/* 재구축에서 추가한 스타일. 퍼블 원본(styles.css/reactive.css)을 오염시키지 않으려고 분리한다. 항상 마지막에 로드 */

/* ── 소형 버튼 ────────────────────────────────────────────────
   퍼블의 .btn 은 테두리·글꼴만 정의하고 크기는 '.btn_btm .btn' 안에서만 붙는다.
   목록/테이블 안에 버튼을 놓으면 크기가 하나도 안 잡히므로(마이페이지 내역·프로그램 상세)
   여기서 독립적으로 크기를 준다. */
.btn_sm {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 34px;
	padding: 0 14px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	border-radius: 4px;
	white-space: nowrap;
}

/* 목록 행에서 버튼 여러 개를 나란히 */
.btn_row {
	display: flex;
	gap: 6px;
	justify-content: center;
	flex-wrap: wrap;
}

/* 마이페이지 내역 표(회의실·라운지·디바이스·기타장비·프로그램·멘토링 공통).
   관리 열은 퀵 메뉴와 겹치지 않도록 폭을 고정하고 버튼을 한 줄로 정렬한다. */
.my_history table {table-layout:fixed;}
.my_history .manage_col {width:210px;}
.my_history .btn_row {align-items:center; flex-wrap:nowrap; justify-content:center;}
.my_history .btn_row > .btn {display:flex !important; align-items:center; height:34px; line-height:32px;}
.reservation_state {display:inline-flex; min-width:64px; height:30px; align-items:center; justify-content:center; padding:0 12px; border-radius:15px; font-size:14px; font-weight:600;}
.reservation_state.waiting {background:#fff1d6; color:#8a5700;}
.reservation_state.approved {background:#e4f5eb; color:#187343;}
.reservation_state.cancelled {background:#fbe7e7; color:#c82d2d;}
.reservation_state.default {background:#f1f3f5; color:#5d6874;}
.history_filter {display:flex; justify-content:flex-end; margin-bottom:24px;}
/* 우측 고정 퀵메뉴(.quick, 뷰포트 우측 최대 88px)가 .inner 오른쪽 끝을 덮는다 — 뷰포트가 1624px 미만이면
   본문 우측 끝이 퀵메뉴 아래로 들어간다. 이 필터는 버튼이 오른쪽 끝에 붙어 '초기화'가 가려지므로 그만큼 들인다.
   1624px 이상에서는 겹치지 않으므로 원래 정렬을 유지한다. */
@media screen and (min-width:769px) and (max-width:1623px) {
	.history_filter {padding-right:96px;}
}
.history_filter_fields {display:flex; align-items:center; flex-wrap:wrap; justify-content:flex-end; gap:8px;}
.history_filter label {display:flex; align-items:center; gap:10px; color:#222; font-weight:500;}
.history_filter input {height:46px; border:#ddd 1px solid; border-radius:4px; padding:0 12px; background:#fff; color:#222;}
.history_filter select {height:46px; min-width:120px; border:#ddd 1px solid; border-radius:4px; padding:0 36px 0 12px; background:#fff; color:#222;}
.history_filter .history_select_label {position:relative;}
.history_filter .history_select_label::after {content:''; position:absolute; right:15px; top:50%; width:7px; height:7px; border-right:1px solid #222; border-bottom:1px solid #222; pointer-events:none; transform:translateY(-70%) rotate(45deg);}
.search_wrap .device_keyword {min-height:52px; padding:0 18px; font-size:16px;}
.requesttestbox_anchor {position:relative; margin-top:120px;}
.requesttestbox_anchor .requesttestbox {margin-top:0;}
/* 폭은 .inner 본문폭(max-width 1480 - 좌우 padding 40)과 같게 맞춘다.
   1180px 로 두면 떠오르는 순간 260px 좁아져 목록과 어긋난 것처럼 보인다. */
.requesttestbox.floating_cart {position:fixed; z-index:1000; bottom:20px; left:50%; width:min(1440px, calc(100% - 40px)); transform:translateX(-50%);}
.requesttestbox.floating_cart .request_list {background:#fff;}
/* 접었을 때는 제목줄만 남으므로 아래쪽 모서리도 둥글려야 잘린 것처럼 보이지 않는다 */
.requesttestbox.is_closed .tit {border-radius:16px;}
.requesttestbox .tit .btns_abso .btn_cart_toggle {font-size:16px; color:#fff; font-weight:600; text-decoration:underline;}
.device_cart_notice_layer {position:fixed; z-index:10002; inset:0; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(5,40,81,.48);}
.device_cart_notice {width:min(440px, 100%); padding:36px; background:#fff; border-radius:16px; box-shadow:0 20px 60px rgba(0,0,0,.3); text-align:center;}
.device_cart_notice_icon {display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px; margin-bottom:16px; border-radius:50%; background:#0081cc; color:#fff; font-size:30px; font-weight:700;}
.device_cart_notice p {margin-bottom:24px; color:#222; font-size:18px; font-weight:600; line-height:1.6;}
.device_cart_notice .btn_btm {margin-top:0;}
.reservation_device .btn_btm .btn {cursor:pointer; transition:background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;}
.reservation_device .btn_btm .btn:not(:disabled):hover {transform:translateY(-1px);}
.reservation_device .btn_btm .btn_bwb:not(:disabled):hover {background:#eef6ff; border-color:#0081cc;}
.reservation_device .btn_btm .btn_wbb:not(:disabled):hover {background:#075aa0; border-color:#075aa0;}
.reservation_device .btn_btm .btn:disabled {cursor:not-allowed;}
@media screen and (max-width:768px) {.requesttestbox.floating_cart {bottom:12px; width:calc(100% - 32px);}}
/* type=search 는 size 기본값 때문에 240px 가까이 잡혀 필터 한 줄을 넘긴다 — 폭을 직접 준다 */
.history_filter input[type="search"] {width:180px;}
.history_filter .history_query {margin-left:8px;}
/* 화면에서만 숨기고 스크린리더에는 남긴다(구간 끝 날짜 라벨 등 — '~' 가 이미 의미를 준다) */
.sr_only {position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap;}
.history_filter .btn {height:46px; padding:0 18px; font-size:15px;}

/* 우측 고정 퀵메뉴가 서류 목록의 검색·조회 열을 덮지 않도록 본문 여백을 확보한다. */
@media screen and (min-width:769px) and (max-width:1623px) {
	.program_documents {padding-right:96px;}
}

/* 취소처럼 되돌릴 수 없는 동작은 색으로 구분한다(퍼블 팔레트엔 경고색이 없다) */
.btn_wrr {
	color: #fff;
	background: #d32f2f;
	border-color: #d32f2f;
}

.btn_wrr:hover {
	background: #b71c1c;
	border-color: #b71c1c;
}

/* ── 레이어 팝업 ────────────────────────────────────────────
   퍼블에 .layer_pop 정의가 없어, 이 클래스를 쓰던 화면(회의실·라운지 설문 게이트,
   장비대여 인증 안내)이 팝업이 아니라 페이지 맨 아래에 그대로 흘러나오고 있었다.
   마크업은 display:block 을 인라인으로 주므로 여기서는 위치·배경만 잡는다. */
.layer_pop {
	position: fixed;
	inset: 0;
	z-index: 1000;
	background: rgba(0, 0, 0, .5);
	overflow-y: auto;
	padding: 80px 20px 40px;
}

.layer_pop .layer_inner {
	position: relative;
	width: 100%;
	max-width: 520px;
	margin: 0 auto;
	background: #fff;
	border-radius: 16px;
	padding: 40px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
}

.layer_pop .layer_close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #f1f1f1;
	font-size: 13px;
	color: #666;
	line-height: 32px;
	text-align: center;
}

/* 팝업 안의 제목은 페이지 타이틀보다 작아야 한다(.ctit 재사용 보정) */
.layer_pop .ctit {
	font-size: 24px;
	margin-bottom: 16px;
}

/* 공간 정보 박스에 이미지가 없는 경우(라운지 — 마스터에 이미지가 없고 원본 자산도 사본에 없다).
   퍼블은 .txt 폭을 'calc(100% - 480px)' 로 잡아 이미지 자리를 비워두므로 폭을 되돌린다 */
.reservation_room_write_top.no_img .txt {
	width: 100%;
}

/* 다른 화면에서 특정 입력 행으로 보낸 뒤 어디를 봐야 하는지 알려준다(장비대여 서류 등록 유도) */
.row_focus > th,
.row_focus > td {
	background: #fff8e1;
	transition: background .4s ease;
}

/* ── 본문 중간에 놓는 보조 버튼 ──────────────────────────────
   .btn_btm 밖에서 쓰는 중간 크기. 프로그램 상세의 '추가서류제출',
   라운지 대관의 '신청서 양식 내려받기'처럼 안내 흐름 속에 있는 버튼용. */
.btn_md {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 24px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	border-radius: 24px;
	white-space: nowrap;
}

/* 다운로드 버튼 — 아이콘으로 성격을 드러낸다 */
.btn_md.btn_down::before {
	content: "";
	width: 18px;
	height: 18px;
	margin-right: 8px;
	background: currentColor;
	mask: url('/pub/images/icon_down.svg') no-repeat 50% 50% / contain;
	-webkit-mask: url('/pub/images/icon_down.svg') no-repeat 50% 50% / contain;
}

/* ── 메인 레이어팝업 하단 바 ──────────────────────────────────
   구 퍼블(popup_new.css)의 .bt 는 inline <span> 이라 width:98px/height:15px 이 애초에 적용되지 않고,
   마크업의 &nbsp; 로 폭을 벌리던 자리다(=버튼처럼 안 보인다). 마크업은 원본 구조를 유지한 채 여기서 크기를 준다.
   .close 가 position:absolute 라 높이를 바꾸면 .main_popup 의 padding-bottom 도 같이 맞춰야 이미지를 가리지 않는다. */
.main_popup {
	padding-bottom: 46px;
}

.main_popup .close {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 6px 10px;
	padding: 9px 12px;
	background: #fff;
	border: 1px solid #e0e0e0;
	border-top: 0;
	color: #444;
	font-size: 13px;
	text-align: left;
}

.main_popup .close p {
	display: flex;
	align-items: center;
	gap: 6px;
}

.main_popup .close input[type="checkbox"] {
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: #0081cc;
	cursor: pointer;
}

.main_popup .close label {
	cursor: pointer;
}

.main_popup .bt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 64px;
	height: 28px;
	padding: 0 14px;
	background: #fff;
	border: 1px solid #0081cc;
	border-radius: 4px;
	color: #0081cc;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	transition: background .15s linear, color .15s linear;
}

.main_popup .close a:hover .bt,
.main_popup .close a:focus-visible .bt {
	background: #0081cc;
	color: #fff;
}

/* ── 체크박스·라디오 키보드 접근 ──────────────────────────────
   퍼블은 label.check/radio 의 input 을 display:none 으로 지웠는데, 그러면 탭 순서에서도 빠져
   키보드만으로는 체크할 방법이 없다. 서류추가제출처럼 동의가 필수인 폼은 제출 자체가 막힌다.
   그래서 시각적으로만 숨기고, 포커스 링은 대체 표시 요소인 i 에 그린다. */
label.check input,
label.radio input {
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	opacity: 0;
	pointer-events: none;
}
label.check input:focus-visible + i,
label.radio input:focus-visible + i {
	outline: #052851 2px solid;
	outline-offset: 2px;
}

/* ── 안내 화면 제목 ───────────────────────────────────────────
   board_view 구조를 빌려 쓰는 독립 안내 화면(InvestorDenied)은 제목을 h2 로 내보낸다(헤더 로고가 h1 이다).
   퍼블은 .board_tit strong 에만 크기를 줘서(styles.css:207 / reactive.css:18·245) 같은 값을 h2 에도 맞춘다. */
.board_view .board_tit h2 {
	display: block;
	margin: 0;
	font-size: 40px;
	color: #222;
	font-weight: 700;
	text-align: center;
}
@media screen and (max-width: 1440px) {
	.board_view .board_tit h2 { font-size: 30px; }
}
@media screen and (max-width: 1023px) {
	.board_view .board_tit h2 { font-size: 24px; line-height: 1.5; }
}

/* ── 서브비주얼 없는 안내 화면 ────────────────────────────────
   메뉴에 없는 경로는 SiteFrame 이 Aside(서브비주얼)를 렌더하지 않아 본문이 화면 최상단에서 시작한다.
   헤더가 position:fixed 라 그대로 두면 제목이 통째로 헤더 밑에 깔린다.
   헤더 높이(1200px~ 101 / 1023px~ 81 / 767px~ 61)만큼 띄우고 읽을 여백을 더한다. */
.notice_screen {
	padding-top: 161px;
}
@media screen and (max-width: 1023px) {
	.notice_screen { padding-top: 121px; }
}
@media screen and (max-width: 767px) {
	.notice_screen { padding-top: 91px; }
}

/* ── 입주기업 카드 ────────────────────────────────────────────
   팝업을 여는 동작이라 a 에서 button 으로 바꿨다. 퍼블은 '.tenant_companies_list li a' 에만
   크기를 줘서 같은 값을 button 에 옮기고, 브라우저 기본 버튼 모양(배경·테두리·가운데정렬·글꼴)을 지운다.
   섹션 제목 .ctit 와 카드 제목이 heading 태그가 되면서 붙는 기본 여백도 함께 지운다. */
.tenant_companies_list li button {
	display: block;
	width: 100%;
	height: 100%;
	padding: 40px;
	margin: 0;
	background: none;
	border: 0;
	border-radius: 16px;
	font: inherit;
	color: inherit;
	text-align: left;
	cursor: pointer;
}
.tenant_companies_list li button:focus-visible {
	outline: #052851 2px solid;
	outline-offset: 2px;
}
.tenant_companies_list h3 {
	display: block;
	padding-top: 32px;
	margin: 32px 0 12px;
	border-top: #ebebeb 1px solid;
	font-size: 24px;
	color: #222;
	font-weight: 700;
}
h2.ctit {
	margin: 0;
}
@media screen and (max-width: 1440px) {
	.tenant_companies_list li button { padding: 30px; }
	.tenant_companies_list h3 { padding-top: 28px; margin: 28px 0 12px; font-size: 20px; }
}
@media screen and (max-width: 1023px) {
	.tenant_companies_list li button { padding: 20px; border-radius: 12px; }
	.tenant_companies_list h3 { padding-top: 20px; margin: 20px 0 10px; font-size: 18px; }
}
@media screen and (max-width: 767px) {
	.tenant_companies_list li button { padding: 20px 16px; border-radius: 8px; }
	.tenant_companies_list h3 { padding-top: 15px; margin: 15px 0 10px; font-size: 16px; }
}

/* ── 목록 안에서 링크처럼 보이는 버튼 ──────────────────────────
   이동이 아니라 같은 화면에서 내용을 여는 동작은 button 이어야 한다(낭독기·키보드 동작이 갈린다).
   퍼블에는 표 안의 button 규칙이 없어 기본 버튼 모양을 지우고 링크와 같게 맞춘다. */
.board_list .link_btn {
	display: inline;
	padding: 0;
	margin: 0;
	background: none;
	border: 0;
	font: inherit;
	color: inherit;
	text-align: left;
	cursor: pointer;
}
.board_list .link_btn:hover,
.board_list .link_btn:focus-visible {
	text-decoration: underline;
}

/* 숫자 열은 자릿수가 흔들리지 않게 고정폭 숫자를 쓴다 */
.tnum {
	font-variant-numeric: tabular-nums;
}

/* ── 이전글·다음글 ────────────────────────────────────────────
   구 ASP 상세(news_view.asp 등)에는 없던 블록이라 퍼블 원본에 규칙이 없다.
   dt/dd 를 2열 격자로 묶어, 본문과 [목록] 버튼 사이에 두 줄로 놓는다. */
.board_nav {
	margin-top: 60px;
	border-top: #222 1px solid;
}
.board_nav dl {
	display: grid;
	grid-template-columns: 140px 1fr;
	align-items: center;
}
.board_nav dt,
.board_nav dd {
	padding: 20px 0;
	border-bottom: #ddd 1px solid;
	font-size: 16px;
	line-height: 1.5;
}
.board_nav dt {
	color: #222;
	font-weight: 600;
}
.board_nav dd {
	color: #222;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.board_nav dd a:hover,
.board_nav dd a:focus-visible {
	text-decoration: underline;
}
.board_nav .no_items {
	color: #999;
}

@media screen and (max-width: 767px) {
	.board_nav {margin-top: 40px;}
	.board_nav dl {grid-template-columns: 80px 1fr;}
	.board_nav dt, .board_nav dd {padding: 14px 0; font-size: 14px;}
}