@charset "UTF-8";
/* =========================================================================
 * kaia_ext.css — KAIA 보완 (KRDS 벤더 CSS 미수정 원칙: 여기서만 보완/오버라이드)
 * 반드시 CSS 로드 순서상 "마지막"에 로드될 것(landeditor/editor_content 이후).
 * ========================================================================= */

/* [배경 보정] landeditor_viewer.css 의 :root{background:#d9dde1} 가 페이지 전역(html)로 누수됨
 *   → KRDS 서브(sub.html)는 흰 배경이므로 흰색으로 되돌림 */
:root { background: #fff; }

/* [LNB] 클릭/아코디언/초기펼침은 KRDS sub.js(.side .depth_item click + .spy 초기펼침 + slideDown)가 담당.
 *   → 별도 depth2 펼침 CSS 두지 않음(sub.js 의 display!=='none' 토글 판정과 충돌 방지). */

/* [4depth 탭] KRDS .tab_menu 방식 사용(sub_layout/templete.css) → 커스텀 탭 CSS 불필요.
 *   #subTabs 는 .tab_menu 컨테이너, ajax 로 .tab_menu_wrap > ul.menu_list > li.active > a.tabbtn 주입 */
/*   연구비 적정사용 탭(#rscoTab, rsco_tab_inc.jsp)도 같은 .tab_menu 라 여백을 함께 준다.
 *   .tab_menu 자체에는 margin 정의가 없어(sub_layout.css:200-207) 여기서 안 주면
 *   바로 아래 .board_search(padding-top 0)와 딱 붙는다. */
#subTabs:empty,
#rscoTab:empty { display:none; }
#subTabs,
#rscoTab { margin-bottom:24px; }

/* [메인 placeholder] KRDS 메인 퍼블 제공 전까지 최소 표기 */
.main_placeholder { float:none; width:100%; min-height:360px; display:flex; align-items:center; justify-content:center; }
.main_placeholder .main_placeholder_msg { color:#555; font-size:18px; }

/* =========================================================================
 * [헤더 + GNB] KRDS 미포함 → 기존(kaia_common) 헤더/GNB 스타일 이식(전환기).
 *   추후 KRDS 헤더/GNB 정식 구축 시 이 블록 대체.
 * ========================================================================= */
:root {
  --kaia-primary-5:#ecf2fe; --kaia-primary-10:#d8e5fd; --kaia-primary-50:#256ef4;
  --kaia-primary-60:#0b50d0; --kaia-primary-70:#083891; --kaia-primary-80:#052561;
  --kaia-secondary-60:#1c589c; --kaia-secondary-70:#063a74;
  --kaia-gray-0:#ffffff; --kaia-gray-5:#f4f5f6; --kaia-gray-10:#e6e8ea; --kaia-gray-20:#cdd1d5;
  --kaia-gray-30:#b1b8be; --kaia-gray-40:#8a949e; --kaia-gray-50:#6d7882; --kaia-gray-60:#58616a;
  --kaia-gray-70:#464c53; --kaia-gray-90:#1e2124; --kaia-point-60:#ab2b36;
  --kaia-text:var(--kaia-gray-90); --kaia-text-subtle:var(--kaia-gray-70); --kaia-text-primary:var(--kaia-primary-60);
  --kaia-bg:var(--kaia-gray-0); --kaia-bg-subtle:var(--kaia-gray-5); --kaia-line:var(--kaia-gray-10); --kaia-line-strong:var(--kaia-gray-20);
  --kaia-inner:1280px; --kaia-radius:8px; --kaia-shadow:0 4px 16px rgba(30,33,36,.08);
}
#header .inner { width:100%; max-width:var(--kaia-inner); margin:0 auto; padding:0 20px; }

/* skip nav */
.skip_nav a { position:absolute; left:0; top:-100px; z-index:1000; width:100%; text-align:center; padding:10px; background:var(--kaia-primary-60); color:#fff; }
.skip_nav a:focus { top:0; }

/* header : KRDS #header 는 데스크톱에서 position:fixed + ::before 흰 오버레이(z-index:1)로
 * old 헤더/GNB를 덮어 안 보이게 함(작은 화면에선 ::before 가 display:none 이라 보였던 것) → 무력화 */
#header { position:relative !important; padding-top:0 !important; z-index:70; border-bottom:1px solid var(--kaia-line); background:#fff; }
#header::before { display:none !important; }
#header .header_top { border-bottom:1px solid var(--kaia-line); background:var(--kaia-gray-5); }
#header .header_top .inner { display:flex; align-items:center; justify-content:space-between; height:40px; }
#header .header_top .gov_notice { font-size:13px; color:var(--kaia-text-subtle); margin:0; }
#header .util_list { display:flex; gap:20px; list-style:none; margin:0; padding:0; }
#header .util_list a { font-size:13px; color:var(--kaia-text-subtle); display:inline-flex; align-items:center; gap:4px; text-decoration:none; }
#header .util_list a:hover { color:var(--kaia-text-primary); }
#header .header_nav .inner { display:flex; align-items:center; height:88px; gap:40px; }
#header .header_nav .logo { flex:0 0 auto; margin:0; }
#header .header_nav .logo a { display:inline-flex; align-items:center; gap:10px; font-size:22px; font-weight:800; color:var(--kaia-primary-70); text-decoration:none; }
#header .header_nav .logo .logo_mark { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; background:var(--kaia-primary-50); color:#fff; font-size:16px; }
#header .header_nav .logo .logo_sub { font-size:13px; font-weight:500; color:var(--kaia-text-subtle); display:block; }
#header .header_search { margin-left:auto; }
#header .header_search form { display:flex; align-items:center; border:2px solid var(--kaia-primary-60); border-radius:999px; padding:6px 8px 6px 16px; }
#header .header_search input { border:0; outline:0; width:200px; font-size:14px; background:transparent; }
#header .header_search button { color:var(--kaia-primary-60); padding:4px 8px; font-size:16px; background:transparent; border:0; cursor:pointer; }

/* GNB (ajax 주입: .menu-gnb-depth1 > __item.open > .menu-gnb-depth2 …) */
#gnb { border-top:1px solid var(--kaia-line); background:#fff; }
#gnbMenuDiv > .menu-gnb-depth1 { display:flex; justify-content:center; gap:8px; max-width:var(--kaia-inner); margin:0 auto; list-style:none; padding:0; }
.menu-gnb-depth1__item { position:relative; }
.menu-gnb-depth1__item > .depth1__a { display:block; padding:18px 22px; font-size:18px; font-weight:700; color:var(--kaia-gray-90); text-decoration:none; }
.menu-gnb-depth1__item > .depth1__a:hover, .menu-gnb-depth1__item.open > .depth1__a { color:var(--kaia-primary-60); }
.menu-gnb-depth1__item > .depth1__a::after { content:""; display:block; height:3px; background:var(--kaia-primary-50); transform:scaleX(0); transition:transform .2s; }
.menu-gnb-depth1__item.open > .depth1__a::after { transform:scaleX(1); }
.menu-gnb-depth2 { position:absolute; left:0; top:100%; min-width:260px; max-height:70vh; overflow-y:auto; background:#fff; border:1px solid var(--kaia-line); border-top:2px solid var(--kaia-primary-50); box-shadow:var(--kaia-shadow); padding:10px 8px; z-index:50; opacity:0; visibility:hidden; transform:translateY(6px); transition:all .2s; list-style:none; margin:0; }
.menu-gnb-depth1__item.open > .menu-gnb-depth2 { opacity:1; visibility:visible; transform:translateY(0); }
.menu-gnb-depth2__item + .menu-gnb-depth2__item { margin-top:2px; }
.menu-gnb-depth2__item > .depth2__a, .menu-gnb-depth2__item > a { display:block; padding:9px 12px; font-size:15px; font-weight:600; color:var(--kaia-gray-90); white-space:nowrap; border-radius:6px; text-decoration:none; }
.menu-gnb-depth2__item > a:hover { background:var(--kaia-primary-5); color:var(--kaia-primary-60); }
.menu-gnb-depth3 { display:block; padding:2px 0 6px 12px; list-style:none; margin:0; }
.menu-gnb-depth3__item > a { position:relative; display:block; padding:6px 12px 6px 14px; font-size:14px; color:var(--kaia-text-subtle); white-space:nowrap; text-decoration:none; }
.menu-gnb-depth3__item > a::before { content:""; position:absolute; left:2px; top:50%; width:3px; height:3px; margin-top:-1.5px; border-radius:50%; background:var(--kaia-gray-30); }
.menu-gnb-depth3__item > a:hover { color:var(--kaia-primary-60); text-decoration:underline; }
.menu-gnb-depth4 { display:block; padding-left:14px; list-style:none; margin:0; }
.menu-gnb-depth4__item > a { display:block; padding:5px 12px; font-size:13px; color:var(--kaia-gray-50); text-decoration:none; }
.menu-gnb-depth4__item > a:hover { color:var(--kaia-primary-60); }

/* ===================================================================
   기술평가 신청폼(techApplyForm.jsp) — 2026-07-28 퍼블(sub.html/template.css) 스타일로 전환.
   폼 레이아웃은 퍼블 클래스(.form_box/.form_item/.form_input/.cnt_slide_btn/.btn …)가 담당한다.
   여기 남은 것은 [A] 퍼블 CSS에 '정의가 없는' 것만  [B] ax5 파일업로더 위젯 스킨.
   퍼블 산출물에 해당 정의가 나오면 A부터 걷어낼 것. 설계: docs/02_기술평가/분석/2026-07-28-techvalue-apply-form-publishing-style.md
   [삭제] .tf_sec* .tf_fld .tf_req .tf_chks .tf_note .tf_btns .tf_btn* .tf_form_dl .tf_blind
          → 각각 .form_box / .form_item / .em_red / .form_group.ch_list / div.warning.type2 /
            .from_btn_group / .btn·.sky_btn·.blue_btn / .btn.sky_btn.has_ico / .skip 로 대체
   [주의] 기존 .tf_* 는 rem 단위였는데 이 프로젝트 CSS 어디에도 html{font-size:62.5%} 가 없어
          1.9rem 이 19px 아닌 30.4px 로 렌더됐다. 아래는 퍼블과 같이 전부 px 로 적는다.
   =================================================================== */
.tf_wrap{padding-bottom:40px;}

/* ── [A] 퍼블 미정의분 보완 ───────────────────────────────────────── */
/* 아코디언 본문 초기 상태. sub.js:76-97 은 클래스 토글 + slideDown/Up 만 하고 CSS 초기값이 없다.
   그대로 두면 로드 직후 3섹션이 전부 펼쳐졌다 접히는 깜빡임(FOUC)이 난다.
   (ready 이후엔 sub.js 가 inline style 로 제어하므로 이 규칙은 첫 렌더에만 관여) */
.cnt_slide_box{display:none;}
.cnt_slide_box.slide_active{display:block;}

/* 전화 3칸 · 이메일 행. 구분자(-, @)는 .form_text{font-size:0}(template.css:139)에 먹히므로
   마크업에서 .form_text 밖에 두고 여기서 크기를 준다. */
.form_box .form_group.phone_group,
.form_box .form_group.email_group{align-items:center;flex-wrap:wrap;}
.form_box .form_group.phone_group{max-width:420px;}
.form_box .form_group.email_group{max-width:720px;}
.form_box .form_group.phone_group .form_text,
.form_box .form_group.email_group .form_text{flex:1 1 0;width:auto;min-width:0;}
.form_box .form_group.email_group .form_text.mail_sel{flex:0 0 auto;min-width:170px;}
.form_box .form_group .hyphen,
.form_box .form_group .at{flex:none;font-size:18px;color:#58616a;line-height:56px;}


/* 아이콘을 품은 버튼(서식 다운로드) — .btn 은 inline-block 이라 SVG 정렬이 안 맞는다 */
.btn.has_ico{display:inline-flex;align-items:center;gap:6px;}

/* 검증 실패 표시 — 퍼블에 오류 상태 스타일이 없다.
   alert만으로는 어느 칸인지 못 찾아서 영역(.form_item)과 입력칸을 함께 강조한다. */
.form_item.tf_err{outline:2px solid #AB2B36;outline-offset:8px;border-radius:8px;}
.tf_err .form_input,.tf_err .form_select,
.form_input.tf_err,.form_select.tf_err{border-color:#AB2B36;background:#FFF7F7;}

/* 책임자/실무자 소제목 · 구분선 · 인라인 힌트 · 첨부 칸별 소제목 (퍼블 미제공) */
.tf_sub_tit{font-size:20px;font-weight:700;margin:0 0 16px;padding:0 0 8px;color:#1d1d1d;line-height:1.4;}
.tf_sub_tit.lead{border-bottom:2px solid var(--kaia-primary-70,#063A74);}
.tf_sub_tit.work{border-bottom:2px solid #58616a;}
.tf_div{height:1px;background:#e0e5eb;margin:24px 0;}
.tf_hint{font-size:15px;font-weight:400;color:#6d7882;}
.tf_sublbl{display:block;margin:16px 0 8px;font-size:17px;line-height:1.35em;color:#464c53;}
/* 서식 미등록 안내 — 숨기는 대신 보이게 */
.tf_file_warn{display:inline-block;padding:12px 16px;border:1px solid #DE3412;border-radius:8px;
	background:#FDEFEC;color:#BD2C0F;font-size:15px;line-height:1.5;}

/* ── [B] 첨부 영역 : 위젯은 감추고 퍼블 파일첨부 줄을 직접 그린다 ──────────
   [이전] ax5 위젯이 그린 목록·버튼을 CSS 로 퍼블처럼 보이게 꾸며 왔다(!important 약 45줄).
          위젯 마크업에 얽혀 있어 퍼블이 바뀔 때마다 선택자를 다시 맞춰야 했고, 같은 줄인데도
          기타 제출서류(칸 UI)와 모양이 미세하게 달랐다.
   [현재] 여섯 위젯 모두 화면에서만 감추고, .form_file_box 줄은 techApplyForm.jsp 의
          tfOne·tfSlot 스크립트가 그린다. 모양 규칙은 퍼블 template.css 가 그대로 맡는다.
   [주의] 위젯 DOM 은 지우지 않는다 — 업로드·삭제 경로가 끊긴다(ax5ui.itg.js:152 파일선택, :177 삭제 셀).
          display:none 대신 clip 을 쓴다 — 위젯이 요소 폭·위치를 재는 코드가 0 을 보면 오작동할 수 있다.
   [범위] .tf_wrap 은 rsco 화면 4개도 같이 쓴다. 그중 연구비 사용계획 신청폼이 2026-09-08 요청으로
          업로더를 갖게 됐는데, 그 화면은 위젯이 그린 줄을 그대로 보여 준다(예방프로그램 문의폼과 같은 방식).
          그래서 감추는 규칙은 .form_item:not(.rsco_file_item) 으로 좁힌다 — 이 클래스를 붙인 칸만 빠진다.
          기술평가 업로더 6개는 전부 .form_item 의 바로 아래 칸이라 이 선택자에 그대로 걸린다. */
.tf_wrap [data-ax5uploader]{display:block !important;}
.tf_wrap .form_item:not(.rsco_file_item) [data-ax5uploader] [data-ax5uploader-uploaded-box],
.tf_wrap .form_item:not(.rsco_file_item) [data-ax5uploader] .trigger-file-input{
	position:absolute !important;width:1px !important;height:1px !important;
	min-width:0 !important;min-height:0 !important;
	padding:0 !important;margin:-1px !important;overflow:hidden;clip:rect(0,0,0,0);
	white-space:nowrap;border:0 !important;}
/* 위젯의 [적용] 버튼·안내문 줄 — 저장 시 fnTfApplyFiles() 가 대신 반영하므로 필요 없다 */
.tf_wrap [data-btn-wrap]{display:none;}
/* 한 줄짜리 칸 — 고정 5칸(.tf_one)과 기타 칸 목록(.tf_slot_list)이 같은 꼴을 쓴다 */
.tf_one{margin:8px 0 0;}

/* ── [B-1] 기타 제출서류 : 칸(슬롯) UI  [추가 2026-07-30] ───────────────────
   [첨부파일 추가]를 누르면 칸이 한 개 늘어나는 AS-IS 방식. 칸은 화면 요소일 뿐이고
   업로드·삭제는 ax5 위젯이 그대로 한다(techApplyForm.jsp 의 tfSlot* 스크립트가 위젯 버튼을 대신 누른다). */
/* 추가 버튼은 퍼블 .btn.sky_btn(template.css:397,399) 을 그대로 쓴다.
   다만 .btn 에는 disabled 규칙이 없어 7건을 다 채워 눌러도 안 될 때 모양이 그대로라
   누를 수 있는 것처럼 보인다. 그 상태만 여기서 구분한다 — 글자색 #464C53 on #F0F2F4 = 8.1:1 */
.tf_slot_wrap .btn:disabled{background-color:#f0f2f4;border-color:#b1b8be;color:#464c53;cursor:default;}
.tf_slot_wrap .btn:disabled:hover{background-color:#f0f2f4;border-color:#b1b8be;}
/* 비활성일 때 [+] 아이콘만 파란색으로 남아 버튼이 살아있는 것처럼 보이는 걸 막는다 */
.tf_slot_wrap .btn:disabled .icon{opacity:.4;}
/* 버튼 아래 안내문구 — 버튼과 칸 사이 간격만 잡는다 */
.tf_slot_desc{margin:12px 0 0;}
/* '기타' 라벨 — 목록 위에 한 번만. Figma 'text_input' 레이블 규격(15px, box 와 gap 8) */
.tf_slot_lbl{display:block;margin:16px 0 0;font-size:15px;line-height:1.5;color:#464c53;}
.tf_slot_lbl[hidden]{display:none;}
.tf_slot_list{margin:8px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:16px;}
/* 한 칸 = 퍼블 파일첨부 줄 .form_file_box(template.css:303-306) 그대로.
   모양 규칙은 template.css 가 다 가지고 있어 여기엔 세 가지만 보정한다. */
/* 1) 빈 칸 글자색 — 퍼블은 #6D7882 on #CDD1D5 = 2.94:1 로 WCAG AA(4.5:1) 미달이다.
      #4B5359 로 낮춰 5.10:1 확보. 배경·테두리는 퍼블 값 그대로 둔다.
      파일이 담긴 칸(.active)은 #58616A on #FFF = 6.30:1 로 이미 통과라 손대지 않는다
      — .form_file_box .form_file_text.active 가 특정도가 높아 아래 규칙을 다시 덮는다. */
.tf_wrap .form_file_text{color:#4b5359;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
/* 2) 파일이 담긴 칸은 오른쪽 끝에 [X](.file_del_btn, right:10px 지름 25px)가 올라간다.
      그 버튼은 position:absolute 라 자리를 안 차지해 긴 파일명이 밑으로 기어든다. 손가락만큼 비워둔다 */
.tf_wrap .form_file_text.active{padding-right:45px;}
/* 3) 긴 파일명이 들어오면 버튼 글자가 줄바꿈된다. 버튼은 안 줄이고 이름 칸만 줄인다 */
.tf_wrap .form_file_box .btn{flex:none;margin:0;}
.tf_slot_full{margin:12px 0 0;font-size:15px;color:#464c53;}

/* ===================================================================
   [추가 2026-07-28] 스크린리더 전용 공통 클래스 .sr_only
   기존 사용자단 JSP 다수가 class="sr_only" 를 쓰는데(게시판 목록 '조건값'/'검색'/'첨부있음' 등)
   KAIA(KRDS) 템플릿 CSS 에는 정의가 없어 해당 글자가 화면에 그대로 보이던 상태.
   (manpa 템플릿에는 manpa/css/common.css:56 에 정의돼 있음 → kaia 로 전환하며 누락)
   =================================================================== */
.sr_only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ===================================================================
   [추가 2026-07-28] 커스텀 게시판 목록표(user_custom_list.jsp) 본문 칸 정렬
   마크업은 번호/등록일/조회수에 .txt_c(=text center), 제목에 .tit 를 쓰는데
   KAIA(KRDS) 템플릿 CSS 에 두 클래스 정의가 없어 td 기본값(왼쪽)으로 표시되던 상태.
   머리행(thead th)은 브라우저 기본값으로 이미 가운데라 별도 지정하지 않음.
   =================================================================== */
.board_list_table td.txt_c{text-align:center;}
.board_list_table td.no_cont{text-align:center;}
/* 제목 칸은 가독성상 왼쪽 유지(td 기본값). 상위 규칙이 생겨도 흔들리지 않도록 명시 */
.board_list_table td.tit{text-align:left;}

/* ===================================================================
   기술평가 접수확인(techApplyList.jsp) 카드 — 2026-07-27 Figma 스펙 이식.
   구조: 상단행(배지 좌 / 출력·다운로드 버튼 우) + 대상기술명(24px/700) + 신청서류 제출일.
   program.css(벤더, 수정금지)가 아니라 여기(KRDS 보완, 마지막 로드)에 둔다.
   =================================================================== */
/* Figma: border 2px #CDD1D5. template.css `body:not(.media) .box`(특정도 0,2,1)를 이기려 body 프리픽스 사용 */
body:not(.media) .box.card-appl{border:2px solid #CDD1D5;}
.card-appl__top{display:flex;align-items:center;gap:24px;margin-bottom:16px;}
/* 상단행 배지는 좌측 기준 — template.css .temp_badge 공통 margin-left:8px 제거 */
.card-appl__top > .temp_badge{margin-left:0;}
/* 버튼 묶음을 상단행 우측 끝으로 */
.card-appl__acts{display:inline-flex;align-items:center;gap:16px;margin-left:auto;}
/* Figma button_text: 아이콘 20px + 라벨 17px, 배경 없음, radius 4px */
/* [수정 2026-08-07] font-size 1.7rem → 17px. 이 프로젝트에 html{font-size:62.5%} 재정의가 없어
   1.7rem 이 27.2px 로 렌더됐다(브라우저 실측). 위 주석의 의도(17px)와 어긋난 상태였고,
   같은 카드의 .temp_badge(17px)보다 확연히 커 보였다. 376행 .btn_listdown 과 같은 원인. */
.card-appl__btn{display:inline-flex;align-items:center;gap:4px;padding:4px 6px;border:0;border-radius:4px;
	background:transparent;color:#1E2124;font-size:17px;line-height:1.5;font-family:'PretendardGOV';cursor:pointer;}
/* [수정 2026-08-07] display:inline-block 추가. 이 프로젝트는 reset.css:30 / default.css:33 이
   `:after,:before{display:none;content:''}` 로 모든 의사요소를 죽여 놓는다. display 를 명시하지
   않으면 width/height/background 를 줘도 렌더되지 않는다(브라우저 실측: computed display=none).
   그동안 기술평가 목록의 출력·다운로드 버튼 아이콘이 보이지 않던 원인. */
.card-appl__btn::before{content:"";display:inline-block;flex:none;width:20px;height:20px;
	background-repeat:no-repeat;background-position:center;background-size:20px 20px;}
.card-appl__btn.is-print::before{background-image:url(../images/sub/ico_print_20.svg);}
.card-appl__btn.is-pdf::before{background-image:url(../img/sub/archive/ic_download.svg);}
.card-appl__btn:hover{background:#F4F5F6;}
.card-appl__btn:focus{outline:2px solid var(--kaia-primary-60,#256EF4);outline-offset:-2px;}
/* 대상기술명 — Figma heading/medium(24px/700 #1E2124). template.css `.box > *`(18px, 0,2,1)를
   같은 body 프리픽스+클래스(0,3,1)로 이긴다. */
/* [수정 2026-08-07] font-size 2.4rem → 24px. 위 주석이 명시한 24px 의도와 달리 38.4px 로 렌더됐다
   (html{font-size:62.5%} 부재, 브라우저 실측). .card-appl__btn 과 같은 원인. */
/* [수정 2026-08-07] text-decoration:none 추가. <a> 기본 밑줄이 그대로 나와 Figma 와 달랐다.
   다만 제목색이 본문과 같은 #1E2124 라 밑줄만 없애면 링크임을 색으로도 형태로도 알 수 없다
   (WCAG 1.4.1). 그래서 Figma 의 title 우측 arrow-right 를 ::after 로 넣어 링크임을 표시하고,
   hover/focus 에서 밑줄을 되살린다. */
body:not(.media) .box.card-appl > .card__title{display:block;margin:0 0 8px;
	color:#1E2124;font-size:24px;line-height:1.5;font-weight:700;text-decoration:none;}
body:not(.media) .box.card-appl > .card__title::after{content:"";display:inline-block;
	width:20px;height:20px;margin-left:2px;vertical-align:-2px;
	background:url(../images/sub/ico_arr1_20_right.svg) no-repeat center/20px 20px;}
body:not(.media) .box.card-appl > .card__title:hover,
body:not(.media) .box.card-appl > .card__title:focus{text-decoration:underline;}
/* 제출일 행: program.css의 음수 margin-top(구 레이아웃용) 제거 → 타이틀 아래 정상 간격 */
.card-appl > .card__subtitle{margin-top:0;}

/* ===================================================================
   [추가 2026-08-04] 게시판 상단 안내 박스 본체 — 퍼블 '게시판 상단 박스' 이식
   증상: 상단패널 아이콘(.icon_img)이 빈 흰 사각형으로 나옴(= 깨져 보임).
   원인: 프로젝트 template.css(612줄, KRDS 재작성판)에는 퍼블 원본의
        `.box.icon_box.board` 블록(퍼블 template.css:1180-1195)이 통째로 빠져 있다.
        남아있는 건 일반 `.icon_box .icon_img`(프로젝트 template.css:228) 뿐인데
        이 규칙은 background-image 없이 `background:#fff` 만 주는 100x100 각진 흰 상자라
        아이콘 그림이 아예 그려지지 않는다.
   조치: 퍼블 원본 블록을 여기로 이식한다. 아이콘 파일은 프로젝트에 이미 있다
        (resource/templete/kaia/images/sub/box_board_icon.svg).
        퍼블의 기반 규칙(.icon_box / .icon_img)도 프로젝트판과 값이 달라
        아이콘 규칙만 옮기면 여백이 어긋난다 → 박스·아이콘·txt·제목·본문을 한 벌로 덮는다.
   적용 화면: user_custom_list.jsp 상단패널, api_content.jsp, api_form.jsp (모두 .box.icon_box.board)
   =================================================================== */
/* 박스: 회색 카드. font-size/line-height 0 은 아이콘과 .txt 사이 inline-block 공백문자 제거용(퍼블 .icon_box 와 동일) */
.box.icon_box.board{margin-top:22px;margin-bottom:42px;padding:28px 24px 31px 29px;
	border:1px solid #F4F5F6;border-radius:12px;background-color:#F4F5F6;
	font-size:0;line-height:0;}
/* 아이콘: 프로젝트 template.css:228 의 position:absolute/100x100/흰배경을 되돌리고 퍼블 값으로 교체 */
.box.icon_box.board .icon_img{display:inline-block;position:static;width:45px;height:45px;
	background-color:transparent;background-image:url(../images/sub/box_board_icon.svg);
	background-repeat:no-repeat;background-position:center center;background-size:41px 40px;
	vertical-align:top;}
/* 본문영역: 아이콘 오른쪽에 인라인으로 붙는다(45px + margin-left 24px) */
.box.icon_box.board .txt{display:inline-block;width:calc(100% - 74px);margin-top:4px;margin-left:24px;
	color:#464C53;font-size:17px;line-height:1.5;vertical-align:top;box-sizing:border-box;}
.box.icon_box.board .box_title{display:block;margin-bottom:11px;color:#1E2124;
	font-size:19px;line-height:1.5;font-weight:700;word-break:keep-all;}
/* margin-top:0 — 프로젝트 .box .box_text(template.css:199)의 margin-top:15px 이 제목 아래 여백을 이중으로 만든다 */
.box.icon_box.board .box_text{margin-top:0;color:#464C53;font-size:17px;line-height:26px;}
@media all and (max-width:1000px){
	.box.icon_box.board{padding:25px 26px 28px;}
	.box.icon_box.board .box_title{margin-bottom:9px;}
	.box.icon_box.board .box_text{font-size:16px;line-height:24px;}
}
@media all and (max-width:640px){
	.box.icon_box.board{padding:22px;}
	.box.icon_box.board .txt{width:calc(100% - 61px);margin-left:12px;}
	.box.icon_box.board .icon_img{background-size:36px 35px;}
	.box.icon_box.board .box_title{margin-top:0;margin-bottom:8px;}
	.box.icon_box.board .box_text{font-size:15px;line-height:22px;}
}

/* ===================================================================
   [추가 2026-07-28] 게시판 상단 안내 박스 — 열고닫기 (user_custom_list.jsp 상단패널)
   겉모습은 퍼블(20260723 template.html '게시판 상단 박스') = .box.icon_box.board 를 그대로 쓴다.
   [정정 2026-08-04] 이 주석이 가리키던 template.css:570 은 프로젝트 CSS에 존재하지 않는다.
   퍼블 원본은 docs/publishing_files/20260723/resource/krds/css/template.css:1180 이고,
   프로젝트용 이식본은 바로 위 블록이다.
   퍼블 박스는 펼침/접힘이 없으므로, 여기서는 제목줄을 버튼으로 만들고 본문을 접는 것만 보탠다.
   =================================================================== */
/* 제목줄 = 토글 버튼. 버튼 기본 외형만 지우고 글자 스타일은 .box_title(19px/700/#1E2124) 그대로 물려받는다.
   [정정 2026-08-04] 폭 100%의 근거로 적어둔 "기본 .box_title width:calc(100% - 132px)(template.css:554)"는
   퍼블 원본(퍼블 template.css:1163)의 값이고 프로젝트 CSS에는 그 규칙이 없다.
   지금은 위 이식본이 .box_title 을 display:block(폭 auto)으로 두므로 width:100%는 안전장치로만 남긴다. */
body:not(.media) .icon_box.board .board_top_btn{display:flex;align-items:center;gap:12px;width:100%;
	padding:0;border:0;background:transparent;text-align:left;cursor:pointer;}
/* 닫힘 상태에선 제목 아래 여백(.box_title margin-bottom:11px)이 뜬 공간으로 보인다 */
.board_top_box:not(.is-open) .board_top_btn{margin-bottom:0;}
.board_top_box .board_top_tit{flex:1 1 auto;min-width:0;word-break:keep-all;}
/* 화살표는 아코디언과 같은 셰브론. template.css 는 images/guide/ 경로를 쓰는데 이 프로젝트엔 guide 폴더가 없어 images/sub/ 로 참조 */
.board_top_box .board_top_arr{flex:none;width:20px;height:20px;
	background:url(../images/sub/ico_arr_accordion.svg) no-repeat center;background-size:20px 20px;
	transition:transform .3s ease-in-out;}
.board_top_box.is-open .board_top_arr{transform:rotate(180deg);}
.board_top_box .board_top_btn:focus{outline:2px solid #256EF4;outline-offset:4px;}
/* 본문 — 닫힘이 기본 */
.board_top_box .board_top_cont{display:none;}
.board_top_box.is-open .board_top_cont{display:block;}
/* 본문은 관리자 에디터 HTML(bd_ext10) — p/ul/table 등이 들어온다.
   글자 크기·색은 벤더 .box_text(template.css:574, 반응형 포함)를 그대로 상속시키고 여기선 링크색만 잡는다.
   (에디터 콘텐츠 스타일을 덮지 않으려고 자식 선택자는 두지 않음) */
.board_top_box .board_top_cont a{color:#0B50D0;text-decoration:underline;}  /* #0B50D0 on #F4F5F6 = 6.26:1, WCAG AA 통과 */
@media all and (max-width:640px){
	.board_top_box .board_top_arr{width:18px;height:18px;background-size:18px 18px;}
}

/* ===================================================================
   [추가 2026-07-28] 커스텀 목록 직접 다운로드 버튼
   BC_LIST_DOWN_YN='Y' 게시판의 파일컬럼 셀에 표시. 색 조합(#0B50D0 on #ECF2FE, 6.09:1 WCAG AA)은 유지.
   [수정 2026-07-28] font-size를 rem→px로. 이 프로젝트는 html{font-size:62.5%} 재정의가 없어(93행 주석 참고)
   1.6rem이 25.6px로 렌더되어 옆 셀의 .temp_badge(template.css, 17px)보다 확연히 커 보이는 문제.
   기존: font-size:1.6rem;
   .tf_btn.temp 참조는 삭제됨(90행) → 죽은 참조라 정정. */
.board_list_table .btn_listdown{display:inline-flex;align-items:center;gap:4px;
	padding:4px 12px;border:1px solid #256EF4;border-radius:4px;
	background:#ECF2FE;color:#0B50D0;font-size:16px;line-height:1.5;text-decoration:none;white-space:nowrap;}
.board_list_table .btn_listdown:hover,
.board_list_table .btn_listdown:focus{background:#D9E8FD;color:#0B50D0;text-decoration:underline;}
.board_list_table .btn_listdown:focus{outline:2px solid #256EF4;outline-offset:2px;}
.rules_forms_board .board_file_downloads{display:inline-flex;flex-direction:column;align-items:center;gap:4px;}
.rules_forms_board .btn_listdown_icon{display:block;width:16px;height:16px;
	background:url(../images/guide/ico_16_down.svg) center/13px auto no-repeat;}

@media all and (max-width:800px) {
	.rules_forms_board .board_file_downloads {    flex-direction: inherit;}
}
/* ===================================================================
   [이식 2026-08-10] 설명 박스 아이콘(.emphasis) — guide 스킨(user_guide_list.jsp) 담당부서 푸터가 사용.
   퍼블 원본 template.css:1450-1476 에서 이식. KRDS 재작성판 template.css(612줄)에 빠져 있던 것.
   원본과 차이: content:'' 추가 — 원본은 default.css:33 전역 리셋(:before{content:''})에 기대는데
   이 프로젝트는 그 리셋이 로드된다는 보장이 없어 자립하도록 명시했다.
   아이콘(emphasis_icon01~07.svg)은 images/sub/ 에 이미 있음. n1~n7 은 순번이 아니라 아이콘 종류. */
.emphasis{margin-bottom:20px; font-size:0; line-height:0;}
.emphasis .emphasis_item{display:block; position:relative; margin-bottom:12px; padding:28px 15px; border-radius:12px; border:1px solid #CDD1D5; background-color:#fff; vertical-align:top;}
.emphasis .emphasis_item:before{content:''; display:block; position:absolute; top:15px; left:15px; width:52px; height:52px; border-radius:12px; background:#ECF2FE no-repeat center center;}
.emphasis .emphasis_item.n1:before{background-image:url('../images/sub/emphasis_icon01.svg');}
.emphasis .emphasis_item.n2:before{background-image:url('../images/sub/emphasis_icon02.svg');}
.emphasis .emphasis_item.n3:before{background-image:url('../images/sub/emphasis_icon03.svg');}
.emphasis .emphasis_item.n4:before{background-image:url('../images/sub/emphasis_icon04.svg');}
.emphasis .emphasis_item.n5:before{background-image:url('../images/sub/emphasis_icon05.svg');}
.emphasis .emphasis_item.n6:before{background-image:url('../images/sub/emphasis_icon06.svg');}
.emphasis .emphasis_item.n7:before{background-image:url('../images/sub/emphasis_icon07.svg');}
.emphasis .emphasis_item .emphasis_subject{display:inline-block; position:relative; width:auto; padding-right:10px; padding-left:64px; margin-right:10px; color:#1E2124; font-size:17px; line-height:26px; font-weight:700; vertical-align:top;}
.emphasis .emphasis_item .emphasis_subject:before{content:''; display:block; position:absolute; top:0; bottom:0; right:0; width:1px; height:16px; margin:auto 0; background-color:#cdd1d5;}
.emphasis .emphasis_text{display:inline-block; width:calc(100% - 165px); color:#464C53; font-size:17px; line-height:26px; word-break:keep-all;}
@media all and (max-width:640px){
	.emphasis .emphasis_item{margin-bottom:10px; padding:18px 10px;}
	.emphasis .emphasis_item:before{top:10px; left:10px; width:40px; height:40px; background-size:25px 25px;}
	.emphasis .emphasis_item .emphasis_subject{padding-left:50px; font-size:15px; line-height:24px;}
	.emphasis .emphasis_item .emphasis_subject:before{height:14px;}
	.emphasis .emphasis_text{width:calc(100% - 140px); font-size:15px; line-height:24px;}
}
@media all and (max-width:480px){
	.emphasis .emphasis_item{padding-top:72px; text-align:center;}
	.emphasis .emphasis_item:before{top:20px; left:0; right:0; margin:0 auto;}
	.emphasis .emphasis_item .emphasis_subject{display:block; margin-right:0; padding-left:0; padding-right:0;}
	.emphasis .emphasis_item .emphasis_subject:before{display:none;}
	.emphasis .emphasis_text{width:100%; margin-top:5px;}
}

/* ===================================================================
   [보정 2026-08-10] 썸네일 카드 특이도 충돌 — 260810 납품 style.css 의
   '.thumb_board_list .box'(0,2,0)가 kaia_krds.css:1014 'body:not(.media) .box'(0,2,1)에 밀려
   카드가 block+38px 패딩으로 렌더되는 문제. (구 style.css 에 있던 body:not(.media) 접두 보정이
   납품본에서 삭제돼 재발 — 납품본은 벤더 원본 유지 원칙이라 보정은 여기서.)
   값은 납품 style.css 의 .thumb_board_list .box / .ty_horizontal .box 와 동일하게 유지할 것. */
body:not(.media) .thumb_board_list .box{ display: flex; flex-direction: column; margin: 0; padding: 0; color: inherit; text-decoration: none; height: 100%; font-weight: 600; border-color: var(--kaia-gray-30);}
body:not(.media) .thumb_board_list.ty_horizontal .box{ display: grid; grid-template-columns: 160px 1fr; align-items: center; column-gap: 24px; height: auto; padding: 20px;}
@media all and (max-width:1000px){
	body:not(.media) .thumb_board_list.ty_horizontal .box{ grid-template-columns: 120px 1fr; column-gap: 16px;}
}

/* 진흥원동정 상세 본문은 CMS에 저장된 줄바꿈을 유지한다. */
.institute_news_board .pre_wrap{white-space:pre-wrap;overflow-wrap:anywhere;}
/* 카드뉴스는 진흥원동정과 같은 16:9 영역 안에 이미지 전체를 비율 유지하여 표시한다. */
.cardnews_board .photo_slide_box .photo_slide_box_list{border-radius:0;}
.cardnews_board .photo_slide_box .photo_slide_box_list img{object-fit:contain;}
.cardnews_board .photo_slide_box_nav .photo_slide_box_list img{object-fit:contain;border-radius:0;}
/* 퍼블리싱 원본은 1800px 초과 구간에서 썸네일 내비게이션 폭이 없어 Slick 트랙이 화면 밖으로 확장된다. */
@media all and (min-width:1801px){
	.institute_news_board .photo_top_box .top_gallery_slide_nav{width:calc(100% - 50px);}
}
/* 진흥원동정 목록 상단 설명은 PC에서 저장된 줄바꿈 기준 첫 줄만 표시한다. */
@media all and (min-width:1001px){
	.institute_news_board .photo_top_box .top_gallery_right .text_desc{
		display:-webkit-box;max-height:1.5em;overflow:hidden;white-space:pre-line;text-overflow:ellipsis;
		-webkit-box-orient:vertical;-webkit-line-clamp:1;}
}
/* ══════════════════════════════════════════════════════════════════════════
   예방프로그램 이관 (2026-08-07)
   프로젝트 CSS 전수 확인 결과 아래 3가지가 없어 화면이 무너지거나 스타일이
   조용히 안 먹었다. 근거는 각 블록 주석 참고.
   ══════════════════════════════════════════════════════════════════════════ */

/* [1] .temp_badge — 퍼블 template.css:1717~ 에 있으나 프로젝트 template.css 에는 없다
       (templete/kaia/css/*.css 12개 전수 확인, 정의 0건).
       기술평가 목록(techApplyList.jsp)도 이 클래스를 쓰고 있으므로
       여기 넣으면 그 화면의 상태 배지도 함께 정상화된다.
       우리가 쓰는 type3(연한 배경) 계열만 가져왔다.
.temp_badge{display:inline-block;position:relative;width:auto;margin-left:8px;padding:2px 8px;
    border-radius:4px;border:1px solid #256EF4;background-color:#fff;font-size:17px;color:#0B50D0;
    line-height:1.5;font-weight:400;word-break:keep-all;vertical-align:middle;box-sizing:border-box;}*/


.temp_badge{display:inline-block;position:relative;width:auto;margin-left:8px;padding:2px 6px; border-radius:4px;border:1px solid #256EF4;background-color:#fff;font-size:16px;color:#0B50D0; line-height:1.35em;font-weight:bold;word-break:keep-all;vertical-align:middle;box-sizing:border-box;}

.bbs_viewbox .subjectbox .temp_badge {font-size:17px}
.temp_badge.type3{padding:3px 8px;border:0;background-color:#ECF2FE;color:#0B50D0;}
.temp_badge.type3.bg3{background-color:#E6E8EA;color:#464C53;}  /* 마감·비노출·미사용 */
.temp_badge.type3.bg4{background-color:#FBEFF0;color:#AB2B36;}
.temp_badge.type3.bg5{background-color:#efcdc6; color:#DE3412}
.temp_badge.type3.bg6{background-color:#FFF3DB;color:#8A5C00;}  /* 접수전 */
.temp_badge.type3.bg7{background-color:#EAF6EC;color:#267337;}  /* 신청완료 */

.temp_badge.type2{padding:3px 8px;border:0; background-color:#0B50D0;color:#fff;}
.temp_badge.type2.bg3{background-color:#464C53;color:#fff;}  /* 마감·비노출·미사용 */
.temp_badge.type2.bg4{background-color:#AB2B36;color:#fff;}
.temp_badge.type2.bg5{background-color:#DE3412;color:#fff}  /* 진행완료 */
.temp_badge.type2.bg6{background-color:#8A5C00;color:#fff;}  /* 접수전 */
.temp_badge.type2.bg7{background-color:#267337;color:#fff;}  /* 신청완료 */

.temp_badge.type1{padding:5px 15px;border:0; background-color:#0B50D0;color:#fff;}
.temp_badge.type1.bg3{background-color:#464C53;color:#fff;}  /* 마감·비노출·미사용 */
.temp_badge.type1.bg4{background-color:#AB2B36;color:#fff;}
.temp_badge.type1.bg5{background-color:#DE3412;color:#fff}  /* 진행완료 */
.temp_badge.type1.bg6{background-color:#8A5C00;color:#fff;}  /* 접수전 */
.temp_badge.type1.bg7{background-color:#267337;color:#fff;}  /* 신청완료 */


@media all and (max-width:640px) {
	.temp_badge.type1 {padding:2px 6px; font-size:15px}
	.temp_badge.type2, temp_badge.type3 {padding:2px 5px;}
}

/* [2] .tbl_scroll_x — 데스크톱에서도 도는 가로 스크롤 래퍼.
       기존 .scroll_table 은 @media(max-width:640px), .table_scroll 은 @media(max-width:1000px)
       안에만 정의돼 있어 데스크톱에서 동작하지 않는다.
       예방프로그램 회차목록 때문에 만들었으나, 그 화면이 카드형으로 바뀌어(2026-08-19)
       현재 사용처는 없다. 넓은 표가 필요한 다음 화면을 위해 남겨 둔다.
       래퍼가 없으면 폭이 모자란 컬럼이 세로로 무너진다(POC 에서 실제로 재현).
       min-width 는 화면마다 다르므로 여기서 강제하지 않고 각 표에서 정한다. */
.tbl_scroll_x{display:block;position:relative;width:100%;overflow-x:auto;box-sizing:border-box;
    border:1px solid #edf1f5;}
.tbl_scroll_x:focus{outline:2px solid rgba(36,107,235,.8);outline-offset:-1px;}
.tbl_scroll_x .table{margin:0;}

/* [3] 예방프로그램 사용자 화면 보조
   [삭제 2026-08-19] .prevnt_banner — 회차목록이 카드형으로 바뀌며 상단 배너를
   .prevnt_notice(이 파일 끝 예방프로그램 블록)로 옮겼다. JSP 전수 확인 결과 사용처 0. */
.prevnt_cont_body{margin:20px 0;}

/* [4] 예방프로그램 수료증 CSS 는 제거했다 (2026-08-07).
   수료증은 관리자/사용자 양쪽에서 새 창으로 뜨는데, 두 화면의 CSS 세트가 다르다
   (관리자 common_adm/css vs 사용자 templete/kaia/css). 어느 한쪽에 두면 다른 쪽에서 깨진다.
   -> 팝업 JSP 안에 <style> 로 직접 넣어 자족적으로 만들었다. */

/* ══════════════════════════════════════════════════════════════════════════
   연구비 적정사용 확인서비스 (2026-08-07)
   신청결과 목록은 기술평가 접수확인(techApplyList.jsp)과 같은 카드형이라
   .box.card-appl / .temp_badge / .p-page / .box.gray 를 그대로 재사용한다.
   [2026-08-25] 퍼블 완성본(research_list.html)이 나와 임시 클래스를 전부 걷어냈다.
   탭 → .tab_menu(sub_layout.css:199-207) / 정렬줄 → .board_list_toolbar(style.css:206-219)
   목록 → .board_list_text + .board_cate span.type_N(sub_content.css:694-741)
   구 .rsco_tab / .rsco_mode / .rsco_filter / .rsco_total / .rsco_sort / .rsco_meta 는 삭제.
   남은 것은 퍼블에 정의가 '없는' 것뿐이다 — 배지 bg1, 모드 탭 크기, 목록 버튼 모바일 보정.
   같은 규칙을 쓰던 마이페이지 나의질문현황 탭(.mypage_tab)만 아래에 남았다.
   [주의] 이 프로젝트는 reset.css:30 / default.css:33 이
   `:after,:before{display:none;content:''}` 로 모든 의사요소를 죽인다.
   ::before/::after 를 쓸 때는 display 를 반드시 명시할 것.
   ══════════════════════════════════════════════════════════════════════════ */

/* [1-a] 연구비 적정사용 상단 탭(서비스신청/신청결과, rsco_tab_inc.jsp).
       모양은 퍼블 탭 컴포넌트(.tab_menu)가 전부 갖고 있다. 여기서는 여백만 준다.
       아래 여백(24px)과 빈 탭 숨김은 서브 자동탭(#subTabs)과 같은 규칙으로 묶어
       이 파일 위쪽(#subTabs 블록)에 함께 뒀다 — 두 탭 여백이 갈라지지 않게. */
#rscoTab{margin-top:24px;}

/* [1-b] 목록 모드 전환(내 신청 / 담당기관 접수) 크기 축소.
       구조·선택자는 퍼블 탭 그대로 두고 크기만 줄인다 — 바로 위 메뉴 탭과 같은 크기면
       어느 쪽이 상위인지 읽히지 않는다. 색·선택표시는 퍼블 li.active 규칙이 그대로 담당한다. */
.rsco_mode_tab{margin-top:24px;margin-bottom:24px;}
.rsco_mode_tab .menu_list li .tabbtn{padding:8px 20px;font-size:17px;}

/* [1-c] 등분할 가로 탭 — 마이페이지 나의질문현황 3분할 전용.
       연구비적정사용 탭이 퍼블 컴포넌트로 옮겨가면서 이 화면만 남았다(2026-08-25).
       나의질문현황도 .tab_menu 로 옮기면 이 블록은 통째로 지운다.
       AS-IS(rscoRsnbUseList.jsp:131-133) ul.tab_box 와 문구 동일. */
.mypage_tab{display:flex;width:100%;margin-top:24px;border-radius:8px;overflow:hidden;}
.mypage_tab:not(:empty){height:56px;border:1px solid #B1B8BE;}
.mypage_tab a{flex:1 1 0;display:flex;justify-content:center;align-items:center;
	font-size:19px;font-weight:700;color:#464C53;text-decoration:none;}
.mypage_tab a + a{border-left:1px solid #B1B8BE;}
.mypage_tab a:hover{background:#F4F5F6;}
.mypage_tab a[aria-current="page"]{background:#063A74;color:#fff;}  /* #fff on #063A74 = 11.26:1 */
.mypage_tab a:focus{outline:2px solid #256EF4;outline-offset:-4px;}

/* [2] 진행상태 배지 '신청완료'.
       확인중=bg6(#FFF3DB/#8A5C00 5.29:1), 확인완료=bg7(#EAF6EC/#267337 5.26:1)은 위에 이미 있고
       Figma 색과 정확히 일치한다. 신청완료 조합만 없어 추가. #052B57 on #EEF2F7 = 12.54:1 */
.temp_badge.type3.bg1{background-color:#EEF2F7;color:#052B57;}

/* [3] 목록 버튼(확인서출력) 모바일 보정.
       퍼블은 .board_list_btn 안을 a 로 그렸지만(research_list.html) 이 버튼은 팝업을 여는
       동작이라 button 으로 둔다. 그 바람에 800px 이하 전폭 규칙(sub_content.css:737)이
       a 만 잡아 비껴간다 — 같은 값을 button 에도 준다. */

/* 퍼블 탭은 max-width:800px 에서 테두리를 버리고 줄바꿈형으로 바뀐다(sub_layout.css:233-236).
   그때 위 [1-b] 의 padding 이 line-height:52px 위에 얹혀 버튼이 과하게 커지므로 되돌린다. */
@media all and (max-width:800px){
	.rsco_mode_tab .menu_list li .tabbtn{padding:0 12px;line-height:44px;}
}
@media all and (max-width:640px){
	.mypage_tab:not(:empty){height:auto;}
	.mypage_tab a{padding:14px 8px;font-size:17px;}
}

/* ── 신청폼 3종 (A 사용계획 / B 집행 / C 사전정산) ──────────────────────────
   폼 골격은 기술평가 신청폼(techApplyForm.jsp)과 같은 퍼블 클래스를 쓴다.
   .form_box / .form_item / .form_title / .form_text / .form_input / .form_select /
   .form_radio / .form_group.phone_group / .email_group / .hyphen / .em_red / .skip /
   .from_btn_group / .btn — 전부 이미 있다. 달력도 .in-datepicker + template.js
   neo_datepicker 가 준비돼 있다(template.css:295-305).
   아래 3개만 정의가 없어 새로 넣는다.  [퍼블 대기] 완성본 나오면 교체. */

/* [5] 검색버튼이 붙은 입력칸 — 사업명(3폼 공통). 퍼블·KRDS 어디에도 정의 0건 */
.form_group.search_group{display:flex;align-items:flex-end;gap:16px;}
.form_group.search_group .form_text{flex:1 1 auto;min-width:0;}
.form_group.search_group .btn{flex:0 0 auto;min-width:90px;margin:0;}

/* [6] readonly 입력칸(사업명·담당위탁정산기관).
       Figma 회색칸은 .form_input:disabled(template.css:282) 와 색이 같지만 disabled 는
       폼 전송에서 제외되어 값이 서버에 도착하지 않는다. readonly + 이 클래스로 모양만 맞춘다.
       글자색은 Figma #6D7882(#CDD1D5 위 2.94:1, WCAG 미달) 대신 #464C53(4.63:1)로 올렸다.
       비활성이 아니라 '읽어야 하는 실데이터'라 대비 예외가 적용되지 않는다. */
.form_input.is_readonly{background-color:#cdd1d5;border-color:#b1b8be;color:#464c53;}

/* [7] 연구개발기간 3쌍(폼 C) — 달력 두 칸 사이 물결 */
.form_group.period_group{display:flex;align-items:flex-end;gap:16px;}
.form_group.period_group .form_text{flex:1 1 0;min-width:0;}
.form_group.period_group .hyphen{flex:0 0 auto;padding-bottom:14px;}
@media all and (max-width:640px){
	.form_group.search_group{flex-wrap:wrap;}
	.form_group.search_group .btn{width:100%;}
	.form_group.period_group{flex-wrap:wrap;}
	.form_group.period_group .form_text{flex:1 1 100%;}
	.form_group.period_group .hyphen{display:none;}
}

/* [8] 신청폼 제목 — Figma heading/medium 24px/700 #131416.
       .cont_title1/2/3 은 여러 JSP 가 쓰고 있으나 프로젝트 CSS 전수 확인 결과 정의가 0건이라
       브라우저 기본 h2(16px)로 렌더된다. 필드 라벨(.form_title 22px)보다 작아 위계가 뒤집힌다.
       기존 클래스를 건드리면 다른 화면에 영향이 가므로 rsco 전용으로 하나 둔다. */
.rsco_form_tit{margin:0 0 8px;font-size:24px;font-weight:700;line-height:1.5;color:#131416;}

/* [9] 신청사유 textarea(폼 C) — Figma box 264px(내용 232px).
       template.css:252 `textarea.form_input{min-height:150px}` 이 rows 속성을 눌러 8행이 150px 로
       고정된다. 신청사유는 예시 안내가 4줄이라 그대로 두면 첫 화면에서 잘린다. */
textarea.form_input.rsco_ta_lg{min-height:232px;}

/* [11] [퍼블 대기] 사업명 조회 모달 — 프로젝트에 공용 .modal 정의가 없어 여기서 최소한만 만든다.
        본문(검색결과 표)만 스크롤하고 헤더·푸터는 고정한다. 그러려면
        .modal-content 가 flex column 이고 .modal-body 에 min-height:0 이 있어야 한다.
        (min-height 기본값 auto 때문에 flex 자식이 안 줄어들어 overflow 가 먹지 않는다) */
.modal{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000;
	background:rgba(0,0,0,.45);}
.modal .modal-dialog{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
	width:calc(100% - 32px);max-width:640px;}
.modal .modal-content{display:flex;flex-direction:column;max-height:calc(100vh - 48px);
	background:#fff;border-radius:12px;overflow:hidden;
	box-shadow:0 8px 24px rgba(0,0,0,.2);}
.modal .modal-header{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
	gap:16px;padding:20px 24px;border-bottom:1px solid #DDE1E6;}
.modal .modal-title{margin:0;font-size:20px;font-weight:700;line-height:1.5;color:#1E2124;}
.modal .modal-close{flex:0 0 auto;width:32px;height:32px;padding:0;border:0;background:none;
	font-size:24px;line-height:1;color:#464C53;cursor:pointer;}
.modal .modal-close:focus{outline:2px solid #0B50D0;outline-offset:2px;}
.modal .modal-body{flex:1 1 auto;min-height:0;overflow-y:auto;padding:20px 24px;}
.modal .modal-footer{flex:0 0 auto;padding:16px 24px;border-top:1px solid #DDE1E6;text-align:center;}
.modal .modal-footer .btn{margin:0;}

/* [12] [퍼블 대기] 모달 안 검색결과 표. 사업명 셀은 클릭 대상이라 링크 색·밑줄을 유지한다.
        #0B50D0 on #FFF = 6.34:1 (WCAG AA 통과) */
.biz_tbl{width:100%;border-collapse:collapse;border-top:2px solid #1E2124;}
.biz_tbl th,
.biz_tbl td{padding:12px 10px;border-bottom:1px solid #DDE1E6;
	font-size:16px;line-height:1.5;text-align:left;word-break:break-all;}
.biz_tbl th{background:#F4F5F6;color:#1E2124;font-weight:600;}
.biz_tbl td{color:#464C53;}
.biz_tbl td a{color:#0B50D0;text-decoration:underline;}
.biz_tbl td a:focus{outline:2px solid #0B50D0;outline-offset:2px;}
.biz_tbl td.is_empty,
.biz_tbl td.is_none{padding:40px 10px;text-align:center;}
/* 결과 없음은 안내가 아니라 '찾지 못했다'는 신호라 색을 구분한다. #BD2C0F on #FFF = 5.53:1 */
.biz_tbl td.is_none{color:#BD2C0F;}

/* ===================================================================
   [추가 2026-08-10] .thumb_board_list 2열 변형(ty_col2) — report2(보고서형 2단) 스킨 전용.
   260810 퍼블 기본은 3열이고 2열 변형이 납품에 없어 여기서 보완(홍보책자 기획 = 2단).
   모바일 640px 이하는 퍼블 기본 규칙(1~2열 축소)을 그대로 따른다. */
.thumb_board_list.ty_col2{ grid-template-columns: repeat(2, 1fr);}
/* 가로형 카드(표지 좌 + 내용 우) x 2열 그리드 조합 — ty_horizontal 의 display:flex(1열 스택)를
   그리드로 되돌린다. 카드 내부 가로 배치(.box grid)는 ty_horizontal 규칙을 기반으로 아래에서 보정. */
.thumb_board_list.ty_horizontal.ty_col2{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;}
/* [시안 보정] report2 카드 내부: 표지=세로 책자 비율(3:4)로 카드 높이를 채우고,
   우측은 세로 배치(제목 상단, 다운로드/바로보기 버튼은 우하단 별도 줄).
   ty_horizontal 기본(제목·버튼 한 줄 row + 4:3 썸네일)과 달라 이 조합에서만 덮는다. */
.thumb_board_list.ty_horizontal.ty_col2 .box{ grid-template-columns: 130px 1fr; align-items: stretch;}
.thumb_board_list.ty_horizontal.ty_col2 .box_img_wrap{ aspect-ratio: 3 / 4; height: auto;}
.thumb_board_list.ty_horizontal.ty_col2 .box_txt_wrap{ flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 12px;}
.thumb_board_list.ty_horizontal.ty_col2 .box_txt_wrap .box_stats{ margin-top: auto; align-self: flex-end;}
@media all and (max-width:640px){
	.thumb_board_list.ty_col2,
	.thumb_board_list.ty_horizontal.ty_col2{ grid-template-columns: 1fr;}
}

/* ===================================================================
   [보정 2026-08-10] 에디터 본문 글자 겹침 — reset.css:9 의 전역 'a,em,span{display:inline-block}' 이 원인.
   inline-block 스팬은 블록 컨테이너라, HWP 붙여넣기 문단의 내어쓰기(음수 text-indent)가
   스팬마다 다시 적용돼 글자가 왼쪽 스팬 위로 포개진다(물류신기술 상세에서 발견).
   에디터 산출 HTML 영역에서만 원래의 inline 으로 원복(리셋은 벤더라 미수정). */
.contenttext span, .contenttext a, .contenttext em,
.cms-content span, .cms-content a, .cms-content em,
.sub_content span, .sub_content a, .sub_content em,
.board_top_cont span, .board_top_cont a, .board_top_cont em{ display: inline; }

/* ── 동영상형 게시판(vod 스킨) 사용자 화면 ────────────────────────────────
   퍼블·KRDS 어디에도 정의가 없어 새로 넣는다. [퍼블 대기] 완성본 나오면 교체.
   격자·카드는 .thumb_board_list(style.css:223) 를 그대로 쓰고, 여기서는
   ① 목록 맨 위 대표 영상 ② 카드 위 재생 표시 두 가지만 더한다. */

/* [1] 대표 영상 — 16:9 고정. iframe 은 내용이 없어 aspect-ratio 만으로 높이가 잡히지 않으므로
       래퍼에 비율을 주고 내부를 absolute 로 채운다(구형 브라우저 호환). */
.vod_feature{margin:0 0 40px;}
.vod_feature_player{position:relative;width:100%;padding-top:56.25%;
    background:#000;border-radius:12px;overflow:hidden;}
.vod_feature_player iframe,
.vod_feature_player video{position:absolute;top:0;left:0;width:100%;height:100%;border:0;
    background:#000;}
.vod_feature_tit{display:block;margin-top:16px;font-size:20px;font-weight:600;color:#1d1d1d;
    line-height:1.4;word-break:keep-all;}

/* [2] 카드 썸네일 위 재생 표시. 배경만으로 그린 삼각형이라 이미지 파일이 필요 없다.
       장식이므로 마크업에 aria-hidden 을 붙였다. */
.thumb_board_list .box_img_wrap{position:relative;}
.vod_play_mark{position:absolute;top:50%;left:50%;width:56px;height:56px;margin:-28px 0 0 -28px;
    border-radius:50%;background:rgba(0,0,0,.55);pointer-events:none;}
.vod_play_mark:after{position:absolute;top:50%;left:50%;margin:-9px 0 0 -6px;
    border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent #fff;
    content:"";}
.thumb_board_list .box:hover .vod_play_mark{background:rgba(11,80,208,.85);}

@media all and (max-width:640px){
    .vod_feature{margin-bottom:24px;}
    .vod_feature_tit{font-size:17px;}
    .vod_play_mark{width:44px;height:44px;margin:-22px 0 0 -22px;}
    .vod_play_mark:after{margin:-7px 0 0 -5px;border-width:7px 0 7px 12px;}
}

/* ══════════════════════════════════════════════════════════════════════════
   신청결과 상세 (2026-08-12)
   카드=.form_box / 제목=.rsco_form_tit / 표=.table.type2 / 입력=.form_item·.form_input·
   .form_radio / 버튼=.btn·.from_btn_group / 담당자=.box.gray — 전부 퍼블 CSS 를 그대로 쓴다.
   아래 5개만 프로젝트·퍼블 CSS 어디에도 정의가 없어 새로 넣는다(전수 확인).
   [주의] reset.css:30 / default.css:33 이 `:after,:before{display:none}` 로 모든 의사요소를
          죽인다. ::before/::after 를 쓸 때는 display 를 반드시 명시할 것.
   ══════════════════════════════════════════════════════════════════════════ */

/* [13] 상단 상태줄 — 진행상태 배지 + 신청일 */
.rsco_view_top{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:24px;}
.rsco_view_top .rsco_view_date{font-size:17px;color:#464C53;}  /* #464C53 on #FFF = 8.59:1 */

/* [14] 상세 표 — 라벨칸 폭만 정한다. 색·구분선·글자크기는 template.css 의 .table 이 이미 맞다
        (th #edf1f5 / td #fff / 구분선 #cdd1d5). 값칸은 긴 과제명·메일주소가 들어와 넘칠 수 있다. */
.rsco_view_tbl{margin:0;}
.rsco_view_tbl .rsco_col_th{width:20%;}
.rsco_view_tbl th{text-align:center;}
.rsco_view_tbl td{word-break:break-all;}

/* [15] 카드 안 소제목 — .rsco_form_tit(24px) 바로 아래 단계.
        신청폼이 쓰는 .tf_sub_tit 은 프로젝트 CSS 에 정의가 0건이라(브라우저 기본 h3=18px 굵게)
        본문과 구분이 안 된다. 여기서는 쓰지 않는다. */
.rsco_view_sub{margin:32px 0 8px;font-size:19px;font-weight:700;line-height:1.5;color:#1E2124;}

/* [16] 긴 텍스트(사용목적·집행근거·신청사유·검토의견).
        입력할 때 넣은 줄바꿈을 그대로 살린다. 없으면 여러 줄이 한 줄로 붙어 읽을 수 없다. */
.rsco_view_pre{margin:0;white-space:pre-wrap;word-break:break-all;}

/* [17] 목록 버튼이 <a> 다. .btn 은 button 기준(line-height 32px)이라 링크로 쓰면 글자가 위로 뜬다.
        높이·정렬만 맞추고 나머지는 .btn 그대로 둔다. */
/* 버튼줄이 퍼블 표준 .btn_group 으로 바뀐 화면(신청결과 상세·연구수행실적)도 함께 잡는다. */
.from_btn_group a.btn,
.btn_group a.btn{display:inline-flex;align-items:center;justify-content:center;	text-decoration:none;}

@media all and (max-width:640px){
	.rsco_view_tbl .rsco_col_th{width:30%;}
	.rsco_view_sub{margin-top:24px;}
}

/* [18] 목록 모드 전환(내 신청 / 담당기관 접수)은 퍼블 탭 컴포넌트로 옮겼다 → [1-b] 참고. */

/* [19] 신청결과 확인서 버튼의 위치는 퍼블 .board_list_btn(sub_content.css:713)이 잡는다.
        .rsco_compl_btn 은 JS 훅으로만 남았다 — 스타일 없음. */

/* [20] 콘텐츠 페이지 하단 담당부서 안내는 퍼블 CSS 로 넘어갔다.
        common.css 의 .satisfaction .manager_info 가 담당한다(퍼블 safi.html 기준).
        여기 있던 .charge_box 임시 스타일은 제거했다. */

/* ===================================================================
   [추가 2026-08-14] 인터뷰/칼럼(interview)·사회공헌활동(csr) thumbnail 사용자 화면
   공용 thumbnail JSP의 기능 연결은 유지하고, 두 게시판에만 붙는 범위 클래스 안에서
   Figma의 목록·상세 배치를 적용한다. 다른 thumbnail 게시판에는 영향이 없다.
   =================================================================== */

/* 목록: 썸네일 좌측, 제목·게재일(BD_EXT1)·선택 메타·요약 우측의 1열 카드 */
.figma_thumbnail_list .thumb_board_list.ty_horizontal .box{align-items:stretch;}
.figma_thumbnail_list .thumb_board_list.ty_horizontal .box_img_wrap{aspect-ratio:227/153;}
.figma_thumbnail_list .thumb_board_list.ty_horizontal .box_img_wrap img{object-fit:cover;}
.figma_thumbnail_list .thumb_board_list.ty_horizontal .box_txt_wrap{
	display:block;min-width:0;width:100%;padding:0;}
.figma_thumbnail_list .thumb_board_list.ty_horizontal .box_txt{
	height:100%;justify-content:center;gap:8px;}
.figma_thumbnail_list .thumb_board_list.ty_horizontal .box_title{
	display:flex;align-items:center;gap:4px;min-width:0;overflow:visible;}
.figma_thumbnail_list .thumbnail_title_text{
	display:-webkit-box;min-width:0;overflow:hidden;color:var(--kaia-gray-90);
	word-break:keep-all;-webkit-box-orient:vertical;-webkit-line-clamp:1;}
.figma_thumbnail_list .thumbnail_title_arrow{
	display:block;flex:0 0 16px;width:16px;height:16px;
	background:url("../../common/images/icon/icon_arr.svg") center/16px no-repeat;}
.figma_thumbnail_list .thumb_board_list.ty_horizontal .box_meta{
	display:flex;flex-wrap:wrap;gap:8px 16px;margin:0;color:var(--kaia-gray-70);
	font-size:15px;line-height:1.5;font-weight:400;}
.figma_thumbnail_list .thumb_board_list.ty_horizontal .box_meta .meta_item{
	display:inline-flex;align-items:center;gap:4px;}
.figma_thumbnail_list .thumb_board_list.ty_horizontal .box_meta em{
	color:var(--kaia-gray-90);font-weight:600;}
.figma_thumbnail_list .box_summary{
	display:-webkit-box;overflow:hidden;margin:0;color:var(--kaia-gray-70);
	font-size:15px;line-height:1.5;font-weight:400;word-break:keep-all;
	-webkit-box-orient:vertical;-webkit-line-clamp:2;}

/* 상세: 제목과 메타데이터를 좌측 정렬하고 본문·첨부·이전다음·목록 기능은 기존 컴포넌트를 유지한다. */
.figma_thumbnail_view .bbs_viewbox .subjectbox{
	padding:0 0 32px;border:0;border-bottom:1px solid var(--kaia-line-strong);
	border-radius:0;background:transparent;}
.figma_thumbnail_view .bbs_viewbox .subjectbox .subject{
	color:var(--kaia-gray-90);font-size:28px;line-height:1.45;text-align:left;word-break:keep-all;}
.figma_thumbnail_view .bbs_viewbox .subjectbox .fieldlistbox{
	align-items:center;gap:16px;margin-top:18px;padding-top:0;border-top:0;}
.figma_thumbnail_view .bbs_viewbox .subjectbox .fieldlistbox .field_item{
	display:inline-flex;align-items:center;margin-right:0;color:var(--kaia-gray-70);}
.figma_thumbnail_view .bbs_viewbox .subjectbox .fieldlistbox .title:after{
	display:inline-block;margin:0 4px;}
.figma_thumbnail_view .bbs_viewbox .subjectbox .field_separator{
	display:inline-block;color:var(--kaia-gray-30);font-size:15px;line-height:1.5;}
.figma_thumbnail_view .bbs_viewbox .viewcontentbox .contenttext img{
	max-width:100%;height:auto !important;}
.figma_thumbnail_view .bbs_viewbox .viewcontentbox .viewcontent .attachedfile{
	flex-direction:column;gap:16px;background:var(--kaia-gray-5);border-radius:12px;}
.figma_thumbnail_view .bbs_viewbox .viewcontentbox .viewcontent .attachedfile .attach_tit{
	margin:0;color:var(--kaia-gray-90);line-height:1.5;}
.figma_thumbnail_view .bbs_viewbox .viewcontentbox .viewcontent .attachedfile .attach_list{
	width:100%;}
.figma_thumbnail_view .bbs_viewbox .viewcontentbox .viewcontent .attachedfile .attach_item{
	justify-content:space-between;width:100%;padding:12px 16px;border-radius:8px;
	background:var(--kaia-gray-0);}
.figma_thumbnail_view .bbs_viewbox .viewcontentbox .viewcontent .attachedfile .attach_empty{
	justify-content:flex-start;color:var(--kaia-gray-70);}

@media all and (max-width:640px){
	/* 모바일 Figma: 정렬 선택을 검색결과 건수 위에 두고 카드는 이미지 위·본문 아래로 쌓는다. */
	.figma_thumbnail_list .board_list_toolbar{
		flex-direction:column-reverse;align-items:stretch;gap:16px;}
	.figma_thumbnail_list .board_list_toolbar .blt_sort{align-self:flex-end;}
	.figma_thumbnail_list .thumb_board_list.ty_horizontal .box_txt_wrap{width:100%;}
	.figma_thumbnail_list .thumb_board_list.ty_horizontal .box_txt{gap:8px;}
	.figma_thumbnail_list .thumbnail_title_text{-webkit-line-clamp:2;}
	.figma_thumbnail_list .box_summary{-webkit-line-clamp:3;}

	.figma_thumbnail_view .bbs_viewbox .subjectbox{padding:0 0 24px;}
	.figma_thumbnail_view .bbs_viewbox .subjectbox .subject{
		font-size:24px;line-height:1.5;}
	.figma_thumbnail_view .bbs_viewbox .subjectbox .fieldlistbox{
		flex-direction:column;align-items:flex-start;gap:6px;margin-top:18px;}
	.figma_thumbnail_view .bbs_viewbox .subjectbox .field_separator{display:none;}
	.figma_thumbnail_view .bbs_viewbox .viewcontentbox .viewcontent .attachedfile{
		gap:12px;padding:24px 16px;}
	.figma_thumbnail_view .bbs_viewbox .viewcontentbox .viewcontent .attachedfile .attach_item{
		align-items:flex-start;gap:8px;padding:14px 12px;}
	.figma_thumbnail_view .bbs_viewbox .viewcontentbox .viewcontent .attachedfile .attach_item .text{
		flex-wrap:wrap;}
}

/* [21] 사업별 담당부서 표(조직도 옆 custom 게시판, skin=orgbizdept).
        표 자체만 가로 스크롤되게 감싸 좁은 화면에서 페이지 본문이 밀리지 않게 한다. */
.biz_dept_table { overflow-x: auto; }
.biz_dept_table table { width: 100%; min-width: 640px; border-collapse: collapse; }
.biz_dept_table th,
.biz_dept_table td {
	padding: 12px 16px;
	border: 1px solid #d8d8d8;
	text-align: center;
	vertical-align: middle;
}
.biz_dept_table thead th {
	background: #f0f2f5;
	color: #1a1a1a;          /* on #f0f2f5 = 15.5:1, AA/AAA 통과 */
	font-weight: 700;
}
.biz_dept_table td.tal { text-align: left; }
.biz_dept_table td.tac { text-align: center; }

/* [22] 조직도 도형(사용자 조직 및 부서 소개 - 조직도 탭) 스타일은
   orgchart-shape.css 로 옮겼다(관리자 미리보기와 공유하기 위함). 이 파일엔 두지 않는다. */

/* [23] 조직도 검색 영역 + 결과표(부서 도형 클릭 연동). */
.org_search {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin: 32px 0 16px;
}
.org_search select,
.org_search input[type="text"] {
	/* 한 줄을 꽉 채우고, 모자라면 다 같이 줄어든다.
	   셀렉트는 flex 기본 최소폭이 '내용 크기'라 전혀 줄지 않는다 —
	   그래서 합계가 컨테이너를 29px 넘겨 초기화 버튼만 다음 줄로 밀려 있었다.
	   최소폭을 숫자로 못박아야 줄어든다. */
	flex: 1 1 auto;
	min-width: 140px;
	height: 44px;
	padding: 0 12px;
	background: #fff;
	border: 1px solid #6b7280; /* UI 컴포넌트 경계(1.4.11, 3:1 기준) : #6b7280 on #fff = 4.83:1, 통과.
	                               브리프 원안 #c3c8d0(on #fff = 1.68:1)은 미달이라 이 파일 [22] 블록에서
	                               쓰던 #6b7280 을 그대로 재사용했다. */
	border-radius: 6px;
	font-size: 15px;
	color: #1a1a1a;            /* on #fff = 17.4:1, AA/AAA 통과 */
}
/* 입력칸은 셀렉트보다 넓게 시작한다(플레이스홀더가 길다). 위 min-width 는 줄어들 수 있는 하한이고,
   이건 줄어들기 전 기본 폭이다 */
.org_search input[type="text"] { flex-basis: 200px; }
/* select, input, button에 일관된 포커스 스타일 적용 (orgchart-shape.css와 동일) */
.org_search select:focus-visible,
.org_search input[type="text"]:focus-visible,
.org_search .btn_search:focus-visible,
.org_search .btn_reset:focus-visible {
	outline: 3px solid #0b50d0;
	outline-offset: 2px;
}
.org_search .btn_search,
.org_search .btn_reset {
	flex: 0 0 auto;   /* 버튼은 줄이지 않는다 - 글자가 잘린다 */
	height: 44px;
	padding: 0 20px;
	border-radius: 6px;
	font-size: 15px;
	cursor: pointer;
}
.org_search .btn_search {
	background: #0b50d0;
	border: 1px solid #0b50d0;
	color: #fff;                /* on #0b50d0 = 6.8:1, AA 통과(이 파일 .org_box.ceo 와 동일 색조합) */
}
.org_search .btn_reset {
	background: #fff;
	border: 1px solid #6b7280;  /* on #fff = 4.83:1, 통과. 위 select/input 경계와 동일 근거 */
	color: #1a1a1a;             /* on #fff = 17.4:1, AA/AAA 통과 */
}
#orgResultCount { margin: 24px 0 12px; font-size: 17px; color: #1a1a1a; } /* on #fff = 17.4:1, AA/AAA 통과 */

.org_result_table { width: 100%; border-collapse: collapse; }
.org_result_table th,
.org_result_table td {
	padding: 12px 14px;
	border-bottom: 1px solid #e2e5ea; /* 행 구분선(구조적 장식, 1.4.11 UI 컴포넌트 대상 아님) */
	text-align: center;
	vertical-align: middle; /* 2026-09-28 담당업무가 여러 줄이어도 다른 칸이 위로 붙지 않게 세로 가운데 */
}
.org_result_table thead th {
	background: #f0f2f5;
	color: #1a1a1a;                   /* on #f0f2f5 = 15.5:1, 통과(이 파일 .biz_dept_table thead th 와 동일 근거) */
	border-bottom: 2px solid #c3c8d0; /* 헤더 하단 구분선(구조적 장식) */
	font-weight: 700;
}
.org_result_table td.tal { text-align: left; }
.org_result_table td.tac { text-align: center; }
.org_result_table td.work { white-space: pre-line; word-break: break-all; }
/* 2026-09-28 모바일에서 표가 화면 폭에 눌려 글자가 세로로 쪼개지지 않게, 최소 폭을 두고 감싼 상자가 좌우로 스크롤한다 */
.org_result_scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 768px) {
	.org_result_table { min-width: 650px; }
}

@media (max-width: 768px) {
	/* 좁은 화면에서는 컨트롤을 한 줄에 하나씩. flex-basis 를 함께 100% 로 돌려놔야 한다 —
	   flex 항목에서는 flex-basis 가 width 를 이겨서, 위에서 준 flex-basis:200px 가 남아 있으면
	   입력칸만 전폭이 되지 않고 버튼과 한 줄을 나눠 쓴다 */
	.org_search select,
	.org_search input[type="text"] { width: 100%; min-width: 0; flex-basis: 100%; }
	.org_search .btn_search,
	.org_search .btn_reset { flex: 1; }
}

/* [24] 목록 툴바의 '목록당 건수' 선택(신기술 검색 등).
   값은 [23] 조직도 검색(.org_search select)과 동일하게 맞췄다 - 같은 포털에서 두 셀렉트가
   다르게 보이지 않게 하기 위함이다. 테두리 #6b7280 on #fff = 4.83:1 로 UI 컴포넌트 경계
   기준(WCAG 1.4.11, 3:1)을 넘는다. 글자 #1a1a1a on #fff = 17.4:1.
   .blt_sort_select(모바일에서만 뜨는 정렬 전환용)와 겹치지 않도록 전용 클래스로 좁혔다. */
.board_list_toolbar .blt_unit_select {
	height: 44px;
	padding: 0 12px;
	background: #fff;
	border: 1px solid #6b7280;
	border-radius: 6px;
	font-size: 15px;
	color: #1a1a1a;
}
.board_list_toolbar .blt_unit_select:focus-visible {
	outline: 3px solid #0b50d0;
	outline-offset: 2px;
}

/* [25] 안내페이지형 게시판 스킨(guide, user_guide_list.jsp N건형).
   섹션 구조는 퍼블 완성본 research_cont.html 을 그대로 쓴다 —
   div.box > h3.cnt_slide_btn + div.cnt_slide_box (template.css:365, :10-18).
   카드 테두리와 .box{margin-top:25px} 가 섹션 구분·간격을 담당하므로,
   2026-08-25 이전에 여기서 그리던 구분선(border-top)·첫 섹션 보정(#rscoTab 포함)은 지웠다.
   남은 것은 퍼블 CSS 에 정의가 '없는' 두 가지뿐이다. */
/* 제목~본문 간격. template.css:14 가 열린 제목에 margin-bottom:25px 를 주려 하지만
   :18 의 margin-bottom:0 !important(.box 안 제목)에 막혀 적용되지 않는다.
   퍼블 파일은 원본 그대로 두는 규칙이라 손대지 않고, 여기서 본문 위 여백으로 채운다.
   아래 여백은 .box 자체 padding(25px)이 담당하므로 따로 주지 않는다.
   [주의] .gd_wrap 의 직계 .box 만 잡는다. 자손 선택자로 넓히면 본문(.cms-content) 안에
   에디터로 넣은 슬라이드까지 물든다. */
.gd_wrap > .box > .cnt_slide_box { padding-top: 25px; }

/* 섹션 본문 크기 보정. editor_content.css:11 의 .cms-content 는 1.6rem 인데 이 프로젝트엔
   html{font-size:62.5%} 재정의가 없어 25.6px 로 렌더된다(93행 주석과 같은 원인).
   본문이 부제(h4 24px)보다 커져 위계가 뒤집힌다. editor_content.css 는 에디터 본문을 쓰는
   전 화면에 걸리므로 손대지 않고, 이 스킨 안에서만 퍼블 본문 크기(.indent = 17px,
   template.css:536)에 맞춘다. 특정도 (0,3,0) > (0,1,0) 이라 안전하게 이긴다. */
.gd_wrap .cnt_slide_box .cms-content { font-size: 17px; line-height: 1.6; }


/* ══════════════════════════════════════════════════════════════════════════
   예방프로그램 회차목록 (2026-08-25)
   [삭제] .prevnt_card* / .prevnt_meta / .prevnt_state — 퍼블 완성본(research_list2.html)이
   나와 목록을 퍼블 공통 컴포넌트로 바꾸면서 전부 쓰지 않게 됐다.
   지금은 .board_list_text + .board_cate span.type_N (sub_content.css:694-741) 를 쓴다.
   상단 배너(.prevnt_notice)만 퍼블에 대응 컴포넌트가 없어 아래에 남는다.
   ══════════════════════════════════════════════════════════════════════════ */

/* 상단 안내(운영계획 배너). 화면정의서의 강조 안내 박스 자리다. */
.prevnt_notice{display:flex;flex-direction:column;align-items:flex-start;gap:12px;
	margin-top:24px;padding:24px;border-radius:12px;background:#ECF2FE;box-sizing:border-box;}
.prevnt_notice__desc{margin:0;font-size:17px;line-height:1.5;color:#1E2124;text-align:left;}


/* ══════════════════════════════════════════════════════════════════════════
   예방프로그램 회차상세 (2026-08-19, 화면정의서 반영)
   본문 나열형(제목 + 표 + 별도 박스) → 카드형으로 교체.
   카드 껍데기(.form_box)·표(.table.type2)·버튼줄(.from_btn_group)은 퍼블 CSS 를 그대로 쓰고,
   화면정의서에만 있는 값(라벨칸 폭, 카드 안 여백, 신청안내 밴드 색)만 여기 둔다.
   [주의] rem 을 쓰지 않는다. html{font-size:62.5%} 재정의가 없어 1.7rem 이 27.2px 로 렌더된다.
   ══════════════════════════════════════════════════════════════════════════ */

/* 카드 안 제목. 값은 .rsco_form_tit 과 같다(화면정의서 heading/medium 24px/700 #131416).
   페이지 제목은 sub.jsp 가 h2(.contents_title)로 그리므로 카드 제목은 h3 다.
   .cont_title1/2/3 은 프로젝트 CSS 에 정의가 0건이라 브라우저 기본값으로 떨어진다 — 쓰지 않는다. */
.prevnt_form_tit{margin:0 0 8px;font-size:24px;font-weight:700;line-height:1.5;color:#131416;}

/* 상세 표. 색·구분선·글자크기는 template.css 의 .table 이 이미 화면정의서 값과 같다
   (th 배경 #edf1f5 / td #fff / 구분선 #cdd1d5). 여기서는 라벨칸 폭과 카드 안 여백만 정한다.
   .table 기본 margin:10px 0 을 지워야 카드 패딩(35px)과 이중으로 벌어지지 않는다. */
.prevnt_view_tbl{margin:0;}
.prevnt_view_tbl .prevnt_col_th{width:20%;}
.prevnt_view_tbl th{text-align:center;}
/* 값칸에 긴 URL·기관명이 들어온다. 안 끊으면 표가 가로로 밀린다. */
.prevnt_view_tbl td{word-break:break-all;}

/* 세부내용·본문. 줄바꿈은 JSP 가 <br> 로 바꿔 넣으므로 여기서는 줄간격만 넓힌다. */
.prevnt_view_cn{margin:0;line-height:1.6;word-break:break-all;}

/* 신청 안내 밴드 — 화면정의서의 신청영역 강조 박스(#ECF2FE) 자리.
   .box(template.css)는 margin-top:25px 이라 카드 안 첫 요소로 쓸 때 mt_0 을 같이 준다. */
.prevnt_apply_notice{border-color:#ECF2FE;background:#ECF2FE;}
/* #1E2124 on #ECF2FE = 14.4:1, WCAG AA 통과 */
.prevnt_apply_notice p{margin:0;font-size:17px;line-height:1.6;color:#1E2124;word-break:keep-all;}
.prevnt_apply_notice p + p{margin-top:8px;}

/* 로그인 유도 영역(비로그인 + 접수중) — 화면정의서 user_feedback__pc.
   카드 안에서 안내문과 버튼을 가운데로 모은다. 카드 자체 패딩(35px) 위에 세로 여백만 더한다. */
.prevnt_login_ask{display:flex;flex-direction:column;align-items:center;gap:16px;padding:24px 0;}
/* #131416 on #fff = 19.4:1 */
.prevnt_login_ask__tit{margin:0;font-size:19px;font-weight:700;line-height:1.5;
	color:#131416;text-align:center;word-break:keep-all;}
/* 화면정의서 chip__single(144x40, radius 6). 색은 .btn.sky_btn 이 이미 같다
   (#ECF2FE / 테두리 #256EF4 / 글자 #0B50D0). 높이·글자크기는 .sm_btn 이 40px·15px 로 맞다.
   여기서는 최소폭과 radius 만 맞추고 .btn 기본 margin(0 3px)을 지운다.
   버튼이 <a> 라 .btn(inline-block)만으로는 글자가 가운데로 안 오고 밑줄이 남는다
   — .from_btn_group a.btn 과 같은 보정을 건다. */
.btn.prevnt_login_ask__btn{display:inline-flex;align-items:center;justify-content:center;
	min-width:144px;margin:0;border-radius:6px;text-decoration:none;}

/* 640px 이하는 .table.responsive 가 colgroup 을 감추고 라벨-값을 세로로 쌓는다(template.css:714~).
   그래서 라벨칸 폭을 따로 손볼 필요가 없다. */
@media all and (max-width:640px){
	.prevnt_login_ask{padding:8px 0;}
	.prevnt_login_ask__btn{width:100%;}
}


/* ═════════════════════════════════════════════════════════════════════════
   메뉴설명 상단 안내 박스 (2026-08-19)
   메뉴관리 > 메뉴설명(menuMemo)에 관리자가 직접 넣는 마크업이다.
   sub.jsp 가 escapeXml="false" 로 그대로 출력한다 — </header> 직후, #contents 바깥이다.
   그래서 선택자를 #contents 에 묶지 않는다(묶으면 이 영역에 안 걸린다).

   메뉴설명 칸에는 아래 마크업만 넣으면 된다(인라인 스타일 불필요).
     <div class="menu_notice">
       <p class="menu_notice__tit">강조 문구</p>
       <p class="menu_notice__txt">안내 문구</p>
     </div>
   한 줄만 쓸 때는 __txt 한 줄만 남긴다.
   ═════════════════════════════════════════════════════════════════════════ */
/* 아래 여백은 주지 않는다 — 바로 다음 형제인 #contents 가 margin-top:50px 를 갖는다(sub_layout.css:247). */
/* 정렬은 왼쪽이다. 시안 바깥 프레임에 align-items:center 가 있으나 글자 레이어가
   align-self:stretch(폭 100%)라 그 값은 효과가 없고, 글자에는 text-align 이 없다.
   라벨 래퍼도 align-items:flex-start 다 → 실제 렌더는 왼쪽 정렬. */
.menu_notice{display:flex;flex-direction:column;align-items:stretch;
	gap:16px;margin:24px 0 0;padding:24px;border-radius:12px;background:#ECF2FE;box-sizing:border-box;}
/* #131416 on #ECF2FE = 16.41:1 (AA·AAA 통과) */
.menu_notice > p{width:100%;margin:0;color:#131416;text-align:left;word-break:keep-all;}
.menu_notice__tit{font-size:24px;line-height:1.5;font-weight:700;}
.menu_notice__txt{font-size:17px;line-height:1.5;font-weight:400;}

/* 메뉴설명은 '메뉴' 단위 값이라 한 메뉴가 mode 로 여러 화면을 태우면 전 화면에 따라붙는다
   (예방프로그램: 목록/상세/문의목록/문의상세/문의등록이 한 메뉴다).
   목록에만 두려고, 목록이 아닌 화면 JSP 가 html 에 이 클래스를 붙여 감춘다.
   스크립트가 꺼져 있으면 안내가 그대로 보인다 — 정보가 사라지는 쪽으로 실패하지 않는다. */
.no_menu_notice .menu_notice{display:none;}
.menu_notice a{color:#0B50D0;}  /* #0B50D0 on #ECF2FE = 7.09:1 */

@media (max-width:640px){
	.menu_notice{gap:12px;padding:20px 16px;}
	.menu_notice__tit{font-size:20px;}
}

/* ══════════════════════════════════════════════════════════════════════════
   예방프로그램 문의 목록 (2026-08-19, 화면정의서 '문의하기(목록)' 반영)
   안내박스·상단검색·상세검색·정렬 툴바는 이미 있는 컴포넌트를 그대로 쓴다
   (.box.notice_box / .table_header / .adv_search / .board_list_toolbar — style.css).
   카드도 회차 목록과 같은 .box.card-appl.prevnt_card 다. 여기에는 그 컴포넌트에
   없는 것만 둔다 — 안내박스 버튼, 카드 hover, 가로 메타, 목록없음 줄.
   [주의] reset.css:30 / default.css:33 이 `:after,:before{display:none;content:''}` 로
          모든 의사요소를 죽인다. ::after 를 쓸 때는 display 를 반드시 명시할 것.
   ══════════════════════════════════════════════════════════════════════════ */

/* 안내박스의 [문의하기]. .adv_btn(button 용, style.css)을 a 에 씌우면 글자가 위로 붙고
   a 기본 밑줄이 남는다. 화면정의서의 우측 화살표도 여기서 붙인다. */
a.adv_btn.prevnt_qna_ask{display:inline-flex;align-items:center;justify-content:center;gap:4px;
	color:#fff;text-decoration:none;box-sizing:border-box;}
a.adv_btn.prevnt_qna_ask::after{content:"";display:inline-block;flex:none;width:20px;height:20px;
	background:url(../images/sub/ico_arr1_20_wh.svg) no-repeat center/20px 20px;}
a.adv_btn.prevnt_qna_ask:hover{text-decoration:underline;}

/* 안내박스 — 화면정의서 치수 보정. 공용 .notice_box 는 신문고·청렴신고·위치안내 등
   8개 화면이 함께 쓰므로 그 규칙은 건드리지 않고 이 화면에서만 덮는다.
   차이는 4가지뿐이다: radius 12px / padding 24px / 제목 19px / 버튼 위 여백 16px.
   배경(--kaia-primary-5 = #ECF2FE)과 버튼(.adv_btn)은 이미 화면정의서와 같다. */
.box.notice_box.prevnt_qna_notice{padding:24px;border-radius:12px;}
/* 화면정의서 heading/small = 19px/700. 공용 .notice_box 는 24px 다. */
.notice_box.prevnt_qna_notice .bl_box_title{margin-bottom:16px;font-size:19px;line-height:1.5;
	font-weight:700;color:#131416;}  /* #131416 on #ECF2FE = 16.41:1 */
.notice_box.prevnt_qna_notice .bl_box_text{color:#131416;}
/* 버튼은 오른쪽 아래. 화면정의서 바깥 프레임이 align-items:flex-end 다. */
.prevnt_qna_notice__act{display:flex;justify-content:flex-end;margin:16px 0 0;}

/* 카드. 화면정의서의 hover 강조(파란 테두리)만 더한다.
   기본 테두리 2px #CDD1D5 는 .card-appl 이 이미 준다. */
body:not(.media) .box.card-appl.prevnt_qna_item:hover{border-color:#256EF4;}

/* 목록없음. 화면정의서 '문의하기(목록)_목록없음' 화면 — 위아래 선만 있는 안내 줄이다. */
.prevnt_qna_empty{margin:0 0 24px;padding:56px 24px;text-align:center;
	border-top:1px solid #CDD1D5;border-bottom:1px solid #CDD1D5;}
.prevnt_qna_empty p{margin:0;font-size:17px;line-height:1.5;color:#131416;}

@media (max-width:640px){
}

/* ===== 연구수행실적 증명서 목록 =====
   [삭제 2026-08-25] .rsch_list / .rsch_c_* — 퍼블 완성본(performance_list.html)이 나와
   목록을 퍼블 .table.board_table 로 바꿨다. 모바일 카드 전환과 칸 감추기는
   퍼블 CSS(template.css:911-915 의 data-content / .m_none)가 그대로 처리한다. */

/* ══════════════════════════════════════════════════════════════════════════
   KAIA 신문고 사용자 등록·수정·상세 (2026-08-25, Figma node 540:46984)
   공통 게시판 저장·권한·JFile 구조는 유지한다. 아래 규칙은 qna JSP가 붙이는
   .qna_user_form / .qna_user_view 범위에서만 입력 배치와 카드 표시를 보완한다.
   ══════════════════════════════════════════════════════════════════════════ */

/* 등록·수정: 연락처는 세 칸 사이 하이픈을 노출하고 화면 너비를 충분히 사용한다. */
.qna_user_form .qna_phone_group{max-width:none;flex-wrap:nowrap;}

/* 개인정보 수집·이용 안내 (ASIS bul_hypenGray). __hl(수집목적·보유기간) 의 #007db4 는
   #f7f7f7 배경에서 명도대비 약 3.6:1(WCAG AA 미달) — 디자인 확정값이므로 임의 변경 금지. */
.qna_user_form .qna_privacy_notice{margin:0 0 10px;padding:15px 20px;border:1px solid #ebebeb;
	background:#f7f7f7;font-size:16px;line-height:1.6;list-style:none;}
.qna_user_form .qna_privacy_notice li{padding-left:9px;text-indent:-9px;}
.qna_user_form .qna_privacy_notice__lead{margin-bottom:16px;}
.qna_user_form .qna_privacy_notice__hl{font-size:18px;text-decoration:underline;color:#007db4;}

/* 공통 JFile은 업로드 엔진으로 남겨 두고, 화면에는 JSP가 만든 Figma형 슬롯만 표시한다.
   display:none 대신 clip을 사용해 ax5 uploader의 요소 측정과 파일선택 동작을 보존한다. */
.qna_user_form .qna_file_item [data-ax5uploader]{display:block !important;}
.qna_user_form .qna_file_item [data-ax5uploader] [data-ax5uploader-uploaded-box],
.qna_user_form .qna_file_item [data-ax5uploader] .trigger-file-input{
	position:absolute !important;width:1px !important;height:1px !important;
	min-width:0 !important;min-height:0 !important;padding:0 !important;margin:-1px !important;
	overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0 !important;}
.qna_file_slot_list{display:flex;flex-direction:column;gap:12px;margin:8px 0 0;padding:0;list-style:none;}
.qna_file_slot_list_additional:empty{display:none;}
.qna_file_proxy .form_file_box{align-items:center;}
.qna_file_proxy .form_file_text{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#4b5359;}
.qna_file_proxy .form_file_box .btn{flex:none;margin:0;}
.qna_file_proxy .btn:disabled{border-color:#b1b8be;background:#f0f2f4;color:#464c53;cursor:default;}
.qna_file_proxy .btn:disabled:hover{border-color:#b1b8be;background:#f0f2f4;}
.qna_file_full{margin:10px 0 0;font-size:15px;color:#6d7882;}
.qna_file_full[hidden]{display:none;}

/* 목록은 왼쪽, 등록·수정은 오른쪽에 고정한다. */
.qna_form_actions,.qna_view_actions{display:flex;align-items:center;justify-content:space-between;gap:12px;}

/* 상세: 질문과 답변을 동일한 카드·2열 정보표 구조로 표시한다. */
.qna_user_view{display:flex;flex-direction:column;gap:32px;}
.qna_user_view .qna_view_card{margin:0;padding:32px;border-radius:12px;}
.qna_view_title{margin:0 0 16px;font-size:24px;font-weight:700;line-height:1.5;color:inherit;}
.qna_view_table{margin:0;table-layout:fixed;}
.qna_view_table .qna_view_label_col{width:180px;}
.qna_view_table th{text-align:center;}
.qna_view_table td{word-break:break-word;}
.qna_view_content{min-height:120px;padding:28px 24px;font-size:17px;line-height:1.7;word-break:break-word;box-sizing:border-box;}
.qna_view_file{display:grid;grid-template-columns:180px minmax(0,1fr);border-top:1px solid #cdd1d5;border-bottom:1px solid #cdd1d5;}
.qna_view_file_label{display:flex;align-items:center;justify-content:center;padding:16px;background:#edf1f5;color:#1d1d1d;}
.qna_view_file_value{display:flex;align-items:center;min-width:0;padding:16px 20px;}
.qna_file_downloads{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0;}
.qna_file_link{max-width:100%;word-break:break-all;text-align:left;}
.qna_view_edit_actions{display:flex;align-items:center;gap:10px;}

@media all and (max-width:800px){
	.qna_user_form .qna_phone_group{flex-wrap:nowrap;}
	.qna_file_proxy .form_file_box{display:grid;grid-template-columns:minmax(0,1fr) auto auto;}
	.qna_user_view .qna_view_card{padding:24px 20px;}
	.qna_view_table .qna_view_label_col{width:120px;}
	.qna_view_content{min-height:80px;padding:24px 12px;font-size:16px;}
	.qna_view_file{grid-template-columns:120px minmax(0,1fr);}
	.qna_view_file_label,.qna_view_file_value{padding:14px 12px;}
}

@media all and (max-width:500px){
	.qna_user_form .qna_phone_group{gap:4px;}
	.qna_user_form .qna_phone_group .hyphen{font-size:15px;}
	.qna_file_proxy .form_file_box{grid-template-columns:1fr 1fr;}
	.qna_file_proxy .form_file_text{grid-column:1 / -1;}
	.qna_file_proxy .form_file_box .btn{width:100%;padding-left:10px;padding-right:10px;}
	.qna_user_view{gap:24px;}
	.qna_user_view .qna_view_card{padding:20px 16px;}
	.qna_view_title{font-size:20px;}
	.qna_view_table .qna_view_label_col{width:100px;}
	.qna_view_table th,.qna_view_table td{padding:12px 10px;}
	.qna_view_file{grid-template-columns:100px minmax(0,1fr);}
	.qna_form_actions,.qna_view_actions{align-items:stretch;}
	.qna_view_edit_actions{margin-left:auto;}
}

/* ══════════════════════════════════════════════════════════════════════════
   신기술·추천기술 검색 (2026-08-25, 퍼블 newtech_list.html / newtech_view_1~4.html 적용)
   퍼블 HTML 이 쓰는 클래스 가운데 프로젝트 CSS 에 정의가 없는 것만 여기에 둔다.
   나머지(.board_search / .detail_search_form / .cont_tab / .con_popup_box /
   .link_box / .table.board_table / .box.blue_type)는 이미 template.css·sub_content.css 에 있다.
   [주의] reset.css:30 이 `:after,:before{display:none;content:''}` 로 모든 의사요소를 죽인다.
          ::before/::after 를 켜고 끌 때는 display 를 반드시 명시할 것.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 목록 : 체크박스 열 (.table.ch_table > td.ch_td) ──
   퍼블 목록이 쓰는 클래스인데 퍼블 CSS 에도 규칙이 없다. 여기서 넣는 것은
   열 정렬과, 모바일에서 라벨 없는 칸에 빈 라벨 자리가 생기는 것 막기뿐이다. */
.table.ch_table tbody td.ch_td{text-align:center;}
/* .form_ch + label 은 template.css:464 에서 오른쪽 여백 10px 을 갖는다.
   목록 칸에서는 네모칸 하나만 가운데 두면 되므로 여백을 없앤다. */
.table.ch_table tbody td.ch_td .form_ch + label{margin-right:0;}

@media all and (max-width:800px){
	/* .table.board_table tbody td:before(template.css:913)는 data-content 가 없어도
	   120px 라벨 칸과 세로 구분선을 만든다. 라벨이 없는 체크박스·제목 칸에서는 지운다. */
	.table.ch_table tbody td.ch_td:before,
	.table.ch_table tbody td.ch_td:after,
	.table.ch_table tbody td.tit:before,
	.table.ch_table tbody td.tit:after{display:none;}
	.table.ch_table tbody td.ch_td{padding-bottom:0;}
	/* 물류 목록의 선택 셀이 제목 위까지 늘어나지 않도록 왼쪽 선택 영역으로 제한한다. */
	.table.board_table.responsive.ntec_logis_list tbody td.ch_td{width:30px;box-sizing:border-box;}
}

/* ── 상세 홍보자료 : 자료 갤러리 (.tech_gallery) ──
   퍼블 newtech_view_2.html 이 <style> 로만 갖고 있던 규칙을 그대로 옮긴 것이다.
   퍼블이 공용 CSS 에 반영하면 이 블록은 지운다.
   더한 것은 마지막 두 규칙뿐이다 - 슬라이드에 영상(16:9 박스)이 들어갈 수 있어
   높이를 가진 칸을 감당해야 하고, 파일명 줄이 비었을 때 빈 여백이 남지 않게 한다. */
.tech_gallery{position:relative;}
.tech_gallery_head{display:flex;align-items:center;gap:14px;margin-bottom:18px;}
.tech_gallery_count{font-size:17px;color:#1d1d1d;letter-spacing:0;}
.tech_gallery_count .now{font-weight:700;}
.tech_gallery_arrow{display:flex;align-items:center;gap:12px;}
.tech_gallery_arrow button{width:auto;min-width:24px;height:24px;padding:0 2px;border:0;background:transparent;cursor:pointer;font-size:20px;line-height:24px;color:#1d1d1d;}
.tech_gallery_arrow button:hover{color:#256ef4;}
.tech_gallery_title{display:block;font-size:17px;font-weight:700;color:#1d1d1d;margin:0 0 12px 8px;}

.tech_gallery_slide{margin:0 0 22px;}
.tech_gallery_slide .slide_item img{display:block;width:100%;height:auto;}

.tech_gallery_nav{margin:0 auto;max-width:760px;}
.tech_gallery_nav .slick-list{margin:0 -6px;}
.tech_gallery_nav .slide_item{padding:0 6px;cursor:pointer;}
.tech_gallery_nav .slide_item img{display:block;width:100%;height:auto;border:2px solid transparent;box-sizing:border-box;transition:border-color .2s;}
.tech_gallery_nav .slick-current .slide_item img{border-color:#256ef4;}

/* 영상 슬라이드. .vod_feature_player 는 padding-top 으로 16:9 를 잡는 박스라
   fade + adaptiveHeight 로 높이를 재는 slick 안에서도 그대로 쓸 수 있다. */
.tech_gallery_slide .slide_item .vod_feature_player{margin:0;}
/* 파일명이 없는 자료(링크만 있는 영상 등)에서 제목 줄이 빈 채로 자리를 먹지 않게 한다. */
.tech_gallery_title:empty{display:none;}

@media all and (max-width:768px){
	.tech_gallery_title{margin-left:0;}
	.tech_gallery_nav{max-width:100%;}
}

/* ══════════════════════════════════════════════════════════════════════════
   [퍼블 버그 우회] 콘텐츠 내부 탭(.krds_cus_tab)이 클릭에 반응하지 않는 문제 (2026-08-25)

   증상 : .krds_cus_tab 탭 버튼을 눌러도 탭이 바뀌지 않는다. JS 오류는 없다.
   원인 : template.js:1145~1151 의 '드래그 가로 스크롤'이 mousedown 즉시
          .krds_cus_tab_list 에 .is-dragging 을 붙이고, template.css:1380 이 그 동안
          .krds_cus_tab_btn 을 pointer-events:none 으로 만든다.
          그래서 mousedown 은 버튼(em)에 닿지만 mouseup 은 버튼을 통과해
          .krds_cus_tab_item 에 떨어지고, 브라우저는 두 대상의 공통 조상인
          .krds_cus_tab_item 에 click 을 발생시킨다. template.js 가 click 을 건 대상은
          button.krds_cus_tab_btn 이라 핸들러가 영원히 실행되지 않는다.
          (실측: mouseup 시점 button 의 computed pointer-events = none)
   조치 : 실제로 끌었을 때만 막으면 되므로 여기서 되살린다. 진짜 드래그 직후의
          click 한 번은 kaia_ext.js 가 캡처 단계에서 삼킨다.
   [주의] 선택자 앞에 html 을 붙여 특정도를 올린 것은 오타가 아니다.
          이 파일은 sub.css(→template.css import)보다 먼저 로드되므로
          같은 특정도로는 template.css:1380 을 이기지 못한다.
   [원복] 퍼블이 template.js 에서 mousedown 대신 mousemove(임계값 초과) 시점에
          .is-dragging 을 붙이도록 고치면 이 블록과 kaia_ext.js 의 가드를 지운다.
   ══════════════════════════════════════════════════════════════════════════ */
html #contents .krds_cus_tab .krds_cus_tab_list.is-dragging .krds_cus_tab_btn{pointer-events:auto;}

/* ── 4depth 형제 메뉴 탭 감추기 ──
   #subTabs 는 sub.jsp 가 4depth 메뉴에서 형제 메뉴(건설/교통/물류/홍보영상)를 채우는 탭이다.
   메뉴 단위라 목록과 상세가 같은 메뉴를 쓰면 상세에서도 따라 나온다.
   상세 화면 JSP 가 html 에 이 클래스를 붙여 자기 화면에서만 감춘다
   (.no_menu_notice 와 같은 방식). 스크립트가 꺼져 있으면 그대로 보인다 -
   정보가 사라지는 쪽으로 실패하지 않는다.
   [!important 인 이유] sub.js 가 형제 메뉴를 ajax 로 채운 뒤 이 요소에
   인라인 style="display:block" 을 직접 박는다(실측). 인라인 스타일은 선택자 특정도로
   이길 수 없어 !important 말고는 방법이 없다. */
html.no_sub_tabs #subTabs{display:none !important;}

/* ══════════════════════════════════════════════════════════════════════════
   주요연구성과 (2026-08-25, 퍼블 newtech_research_list/view.html 적용)
   목록=.imp_box + .board_list_gallery / 상세=.bbs__view + .research_comment
   — 모두 퍼블 sub_content.css 에 정의가 있다. 여기에는 퍼블 마크업에는 있는데
   CSS 규칙이 빠진 것과, 우리 데이터에만 있어 퍼블 시안에 없는 것만 둔다.
   ══════════════════════════════════════════════════════════════════════════ */

/* [1] 퍼블 시안이 쓰는데 정의가 없는 클래스다. 없으면 본문이 제목에 붙고 줄간격도 좁다.
       퍼블이 sub_content.css 에 .research_message 를 추가하면 이 블록을 지운다. */

/* [2] 연구진 사진. 퍼블 시안에는 사진 자리가 없지만 우리는 관리자에서 받는다.
       말풍선 제목 위에 얹고 폭만 제한한다. */


/* [3] 첨부파일이 없어 비활성화된 버튼 표시 */
.imp_box .btn:disabled{background-color:#f0f2f4;border-color:#b1b8be;color:#464c53;cursor:default;}
.imp_box .btn:disabled:hover{background-color:#f0f2f4;border-color:#b1b8be;}
.imp_box .btn:disabled .icon{opacity:.4;}


/* ══════════════════════════════════════════════════════════════════════════
   서브 제목 옆 모바일 화살표 아이콘 숨김 (2026-08-27)
   sub.js 가 .tab_menu 있는 화면의 .contents_title 을 button 으로 감싸고,
   sub_layout.css:229 가 1000px 이하에서 button:after 로 화살표를 붙인다.
   그런데 .tab_menu 를 접었다 펴는 CSS(.tab_menu.active 등)가 프로젝트 어디에도
   없어서 눌러도 아무 변화가 없다 - 열리는 것처럼 보이는 죽은 화살표다.
   퍼블 원본(sub_layout.css)은 손대지 않고 여기서만 감춘다.
   [!important 인 이유] kaia_ext.css 가 sub.css(→sub_layout.css)보다 먼저 로드돼
   같은 특정도로는 진다. 퍼블에서 접힘 동작이 들어오면 이 블록을 지운다. */
@media all and (max-width:1000px){
    .sub_head .head_box .contents_title button:after{display:none !important; content:none !important;}
    /* 화살표 자리(38px)를 비워두던 제한을 함께 푼다. 안 풀면 제목이 이유 없이 일찍 줄바꿈된다. */
    .sub_head .head_box .contents_title button span{max-width:100% !important;}
}
/* Reserve a row for the share close button so list items cannot cover it. */
.sub_head .head_box .etc_box .share_etc .list_layer{padding-top:40px;}
/* Mobile page actions: retain sharing and member bookmarks; keep printing hidden. */
@media all and (max-width:1000px){
    #main .sub_head .head_box .contents_title{flex:1;min-width:0;width:auto;}
    #main .sub_head .head_box .etc_box{display:flex;flex:0 0 auto;margin-left:12px;}
    #main .sub_head .head_box .etc_box .print_etc{display:none;}
    #main .sub_head .head_box .etc_box .share_etc .list_layer{left:auto;right:0;transform:none;}
    #main .sub_head .head_box .etc_box .share_etc .list_layer:before{left:auto;right:10px;transform:none;}
}

.privacy_policy_board .table_header .total.has_select .input_group_wrap select {
	box-sizing: border-box;
	width: 290px;
	max-width: 100%;
	margin-right: 0;
}
/* 방침 전환 중 본문만 살짝 흐리게 둔다. 페이지가 다시 그려지지 않으므로
   화면 전체가 깜빡이지 않고, 셀렉트와 스크롤 위치는 그대로 유지된다. */
.privacy_policy_board.is_loading #privacyPolicyContent {
	opacity: .45;
	transition: opacity .15s linear;
}
.privacy_policy_board.is_loading select {
	cursor: progress;
}

/* ══════════════════════════════════════════════════════════════════════════
   R&D최종보고서 사용자 상세 (2026-09-09)
   RND 원문과 CMS 자체 등록 첨부를 같은 파일명·다운로드 아이콘 형태로 표시한다.
   실제 파일 조회와 다운로드 권한은 각 기존 경로를 유지한다.
   ══════════════════════════════════════════════════════════════════════════ */
.tskfinal_file_downloads{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0;}
.tskfinal_file_link{max-width:100%;word-break:break-all;text-align:left;}

/* 영문 서브 퀵 메뉴: 긴 문구의 줄바꿈 공간과 아이콘 크기를 확보한다. */
html[lang="en"] .eng_quick.sub_quick .quick_list{grid-template-columns:repeat(2, 128px);}
html[lang="en"] .eng_quick.sub_quick .quick_list a{width:128px; height:auto; min-height:92px;}
html[lang="en"] .eng_quick.sub_quick .quick_icon{flex-shrink:0;}

/* 홍보책자·시행계획서·연구비 교육자료·발간자료 목록: 카드 안에 제목과 버튼이 들어갈 폭을 확보한다. */
.promotion_brochure_list .book_gallery_box ul,
.book_gallery_box.pbls_data_list ul,
.book_gallery_box.education_materials_list ul,
.book_gallery_box.impl_plan_list ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:24px;}
.promotion_brochure_list .book_gallery_box ul li,
.book_gallery_box.pbls_data_list ul li,
.book_gallery_box.education_materials_list ul li,
.book_gallery_box.impl_plan_list ul li{width:100%;min-width:0;margin-bottom:0;padding-bottom:24px;}
.promotion_brochure_list .book_gallery_box ul li:before,
.book_gallery_box.pbls_data_list ul li:before,
.book_gallery_box.education_materials_list ul li:before,
.book_gallery_box.impl_plan_list ul li:before{height:100%;}
.promotion_brochure_list .book_gallery_box ul li .book_text_box,
.book_gallery_box.pbls_data_list ul li .book_text_box,
.book_gallery_box.education_materials_list ul li .book_text_box,
.book_gallery_box.impl_plan_list ul li .book_text_box{min-width:0;}
.promotion_brochure_list .book_gallery_box ul li .book_title,
.book_gallery_box.pbls_data_list ul li .book_title,
.book_gallery_box.education_materials_list ul li .book_title,
.book_gallery_box.impl_plan_list ul li .book_title{display:block;max-height:none;overflow:visible;-webkit-line-clamp:unset;overflow-wrap:anywhere;}
.promotion_brochure_list .book_gallery_box ul li .btn_box,
.book_gallery_box.pbls_data_list ul li .btn_box,
.book_gallery_box.education_materials_list ul li .btn_box,
.book_gallery_box.impl_plan_list ul li .btn_box{position:static;width:100%;margin-top:24px;flex-wrap:wrap;gap:8px;}
.promotion_brochure_list .book_gallery_box ul li .btn_box .btn,
.book_gallery_box.pbls_data_list ul li .btn_box .btn,
.book_gallery_box.education_materials_list ul li .btn_box .btn,
.book_gallery_box.impl_plan_list ul li .btn_box .btn{max-width:100%;}

/* 글로벌리포트 목록: 제목 줄 수가 달라도 같은 행의 하단 통계 위치를 맞춘다. */
.board_list_gallery.global_gallery > ul > li{display:flex;}
.board_list_gallery.global_gallery > ul > li > .gallery_wrap{width:100%;min-width:0;box-sizing:border-box;}

/* 물류신기술 상세: 공백 없는 제목이 flex 최소 너비 때문에 잘리지 않도록 한다. */
.bbs__view.ntec_logis_view .bbs_viewbox .subjectbox .subject > strong{min-width:0;overflow-wrap:anywhere;}
.bbs__view.ntec_logis_view .bbs_viewbox .subjectbox .subject > .temp_badge{flex-shrink:0;}

/* 2026-10-03 메인 우수성과집(국문)·홍보 브로슈어(영문): 모바일(640px 이하)에서도 가운데 카드의
   제목·날짜·다운로드를 보이고, 표지 위에 반투명 어둡게 깔아 흰 글씨를 읽히게 한다.
   제목은 두 줄까지만 보인다. PC 는 main_layout.css 의 기존 규칙. */
@media all and (max-width:640px){
.main-achievements .achievements-list .achievements-item.slick-center .achievement-text{opacity:1;transform:translateY(0);}
.main-achievements .achievements-list .achievements-item .achievement-cover:after{content:"";display:block;position:absolute;left:0;top:0;width:100%;height:100%;border-radius:10px;background:rgba(0,0,0,.4);opacity:0;transition:opacity .35s;pointer-events:none;}
.main-achievements .achievements-list .achievements-item.slick-center .achievement-cover:after{opacity:1;}
.main-achievements .achievements-list .achievements-item .achievement-card .achievement-text strong{font-size:19px;font-weight:600;line-height:1.2;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;}
.main-achievements .achievements-list .achievements-item .achievement-card .achievement-text strong a{display:inline;font-size:inherit;line-height:inherit;max-height:none;}
}

/* 2026-10-03 메인 우수성과집·홍보 브로슈어 PC(641px 이상): 넘길 때 깜빡임 보정.
   main_layout.css 는 어두운 막(:after)을 가운데 카드에만 만들어, 넘기는 순간 막이 한 번에 꺼졌다 켜졌다
   (흰 표지에서 깜빡임으로 보인다). 막을 모든 카드에 두고 투명도만 바꾼다. 어둡기·크기는 기존과 같다.
   카드 기울기·크기도 넘기는 속도(main.js speed 650ms, 같은 cssEase)에 맞춰 바뀌게 한다. */
@media all and (min-width:641px){
.main-achievements .achievements-list .achievements-item .achievement-cover:after{content:"";display:block;position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.5);scale:.925;opacity:0;transition:opacity .35s;pointer-events:none;}
.main-achievements .achievements-list .achievements-item.slick-center .achievement-cover:after{opacity:1;}
.main-achievements .achievements-list .achievements-item .achievement-cover img{transition:transform .65s cubic-bezier(.22,.61,.36,1), scale .65s cubic-bezier(.22,.61,.36,1);}
}