/* =========================================================
 * 공고내용보기 팝업 전용 — 디자인/모바일 정리
 *  · view_popup.php 에서만 로드 (arrCss 마지막) → 다른 bid 페이지 영향 없음
 *  · 공유 템플릿(view_bid.html/bid_view.html)은 미수정, 여기서 오버라이드만
 * ========================================================= */

html, body.d_box {
	background: #eef2f4;
	-webkit-text-size-adjust: 100%;
}
#wrap.d_box, #wrap_body {
	background: transparent;
}

/* 본문 컨테이너 — 카드형 + 가운데 정렬 + 반응형 폭 */
#wrap_content {
	box-sizing: border-box;
	width: 100%;
	max-width: 1000px;
	margin: 16px auto;
	padding: 0 0 24px;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 6px 24px rgba(20, 40, 30, 0.08);
	overflow: hidden;
}

/* 상단 제목바 — 다크 헤더 + 버튼 정렬, 모바일 줄바꿈 */
#wrap_content .wrap_title {
	background: linear-gradient(135deg, #2b3a42, #1f2b31);
	padding: 14px 18px;
	margin: 0 0 4px;
	flex-wrap: wrap;
}
#wrap_content .wrap_title .title {
	font-size: 17px;
}
#wrap_content .wrap_title .wrap_btn {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
}
#wrap_content .wrap_title .wrap_btn .d_btn.type_small {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 6px 10px;
	font-size: 12.5px;
	line-height: 1;
	border-radius: 6px;
	white-space: nowrap;
}

/* 소제목 (분석의뢰 내용 / 공고내용) — 공고명 h3 는 원본대로 숨김 유지 */
#wrap_content > h4 {
	font-size: 14px;
	color: #2b8a3e;
	padding: 10px 18px 0;
	margin: 8px 0 0;
	border-top: 1px solid #eef0f1;
}

/* 본문 표 — 데스크톱은 넘침 방지만 (폭/여백 강제 X, 원본 레이아웃 보존) */
#wrap_content .d_table {
	max-width: 100%;
}
#wrap_content .d_table th,
#wrap_content .d_table td {
	word-break: break-all;
}

/* 탭바 — 좁은 화면에서 가로 스크롤 */
#wrap_content .tab_bar {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	white-space: nowrap;
}
#wrap_content .gonggomun_notice {
	margin: 8px 18px;
}

/* 탭 콘텐츠(#tab_bid) — 공고원문/발주처별원문/참여업체 등 넓은 표를
 *  패널 단위로 가로 스크롤시켜 잘림/깨짐 방지. (탭 내부 표는 자연폭 유지) */
#wrap_content #tab_bid { max-width: 100%; }
#wrap_content #tab_bid .panels { max-width: 100%; }
#wrap_content #tab_bid .tc-panel {
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
/* 탭 내부 표는 강제 fit(table-layout:fixed) 해제 → 자연폭 + 패널 스크롤.
 *  단 자연폭이 패널보다 좁은 표(예정가격 등)는 min-width 로 패널을 꽉 채운다. */
#wrap_content #tab_bid .tc-panel .d_table {
	table-layout: auto;
	width: auto;
	min-width: 100%;
	max-width: none;
}
/* g2b 공고원문(.Page) — 고정폭 유지하되 패널 안에서 스크롤 */
#wrap_content #tab_bid .Page { max-width: none; }
#wrap_content #tab_bid .tc-panel img { max-width: 100%; height: auto; }

/* 푸터 — 과도한 상단 여백 축소 */
#wrap_content footer,
footer {
	margin-top: 28px !important;
	border-radius: 0 0 12px 12px;
}

/* ---------- 모바일 (≤768px) ---------- */
@media (max-width: 768px) {
	#wrap_content {
		margin: 0;
		border-radius: 0;
		box-shadow: none;
	}
	#wrap_content .wrap_title {
		padding: 12px 14px;
		gap: 8px;
	}
	#wrap_content .wrap_title .title { font-size: 15px; }
	#wrap_content > h3 { font-size: 15px; padding: 12px 14px 4px; }
	#wrap_content > h4 { padding: 10px 14px 0; }

	/* 표 — 정상 테이블 유지(display 변경 X), 화면폭에 맞춰 셀 내용 줄바꿈 */
	#wrap_content .d_table {
		width: 100%;
		max-width: 100%;
		table-layout: fixed;   /* 고정폭 px 무력화 → 컨테이너 폭에 맞춤 */
		font-size: 13px;
	}
	#wrap_content .d_table th,
	#wrap_content .d_table td {
		padding: 7px 8px !important;
		word-break: break-all;
		white-space: normal !important;  /* nowrap 셀도 줄바꿈 허용 */
	}
	#wrap_content .gonggomun_notice { margin: 8px 14px; }

	/* 인쇄/홈 등 버튼 터치 영역 확보 */
	#wrap_content .wrap_title .wrap_btn .d_btn.type_small {
		padding: 8px 12px;
		font-size: 13px;
	}
}

/* ---------- 초소형 (≤420px) — 표 폰트 추가 축소 ---------- */
@media (max-width: 420px) {
	#wrap_content .d_table { font-size: 12px; }
	#wrap_content .wrap_title .title { font-size: 14px; }
}

/* 인쇄 시 — 팝업 그림자/배경 제거 */
@media print {
	html, body.d_box { background: #fff; }
	#wrap_content { box-shadow: none; margin: 0; max-width: none; border-radius: 0; }
	#wrap_content .wrap_title .wrap_btn { display: none !important; }
}

/* =========================================================
 * 2026-10-07 상단 바 개편 + 반응형 보강
 *  · 제목 '공고보기' 크게 / 분석 바로가기(흰 버튼: 사정율분석·예가산출·AI분석) / 기능 버튼(반투명: 홈·관심·인쇄·닫기)
 *  · ≤860px 인쇄·닫기는 아이콘만, ≤600px 두 줄(제목+기능 / 분석 3개 같은 폭)
 *  · ≤600px 공고 정보 표는 '항목명|값' 2열, A값·발주처원문 표는 옆으로 밀어서 보기
 *  · 맨 위로 버튼은 view_bid.html (같은 템플릿을 쓰는 다른 화면에도 나오도록)
 * ========================================================= */
#wrap_content .wrap_title { flex-wrap: nowrap; gap: 12px; }
#wrap_content .wrap_title .title { flex: 1 1 auto; font-size: 24px; letter-spacing: -0.02em; white-space: nowrap; }
#wrap_content .wrap_title .vp-tools { display: flex; flex: 0 0 auto; gap: 6px; }
#wrap_content .wrap_title .vp-tools .vp-tool {
	display: inline-flex; align-items: center; gap: 5px;
	height: 34px; padding: 0 12px !important; box-sizing: border-box;
	border-radius: 8px; background: #fff; color: #1f2937 !important;
	font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap;
}
#wrap_content .wrap_title .vp-tools .vp-tool .material-icons { font-size: 18px !important; color: #1f4fd8; }
#wrap_content .wrap_title .vp-tools .vp-tool:hover { background: #e7efff; }
#wrap_content .wrap_title .vp-tools + .wrap_btn { padding-left: 12px; border-left: 1px solid rgba(255,255,255,0.18); }
#wrap_content .wrap_title .wrap_btn { flex: 0 0 auto; flex-wrap: nowrap; }
#wrap_content .wrap_title .wrap_btn .d_btn.type_small {
	height: 34px; padding: 0 10px !important; box-sizing: border-box;
	border: 1px solid rgba(255,255,255,0.25) !important; border-radius: 8px;
	background: rgba(255,255,255,0.08) !important; color: #fff !important; font-size: 13px; gap: 4px;
}
#wrap_content .wrap_title .wrap_btn .d_btn.type_small:hover { background: rgba(255,255,255,0.2) !important; }
#wrap_content .wrap_title .wrap_btn .material-icons { font-size: 18px !important; color: #fff; }

@media (max-width: 860px) {
	#wrap_content .wrap_title .vp-btn-txt { display: none; }
}
@media (max-width: 600px) {
	#wrap_content .wrap_title { flex-wrap: wrap; gap: 10px; padding: 12px 14px; }
	#wrap_content .wrap_title .title { font-size: 20px; }
	#wrap_content .wrap_title .vp-tools + .wrap_btn { padding-left: 0; border-left: 0; }
	#wrap_content .wrap_title .vp-tools { order: 3; flex: 1 1 100%; }
	#wrap_content .wrap_title .vp-tools .vp-tool { flex: 1 1 0; justify-content: center; padding: 0 6px !important; }

	/* 공고 정보 표 — 항목명|값 2열로 (th,td,th,td 순서 그대로 두 줄이 된다) */
	#wrap_content > h4 + table.d_table,
	#wrap_content > h4 + table.d_table > tbody { display: block; width: 100%; }
	#wrap_content > h4 + table.d_table colgroup { display: none; }
	#wrap_content > h4 + table.d_table tr { display: grid; grid-template-columns: 92px minmax(0, 1fr); }
	#wrap_content > h4 + table.d_table th,
	#wrap_content > h4 + table.d_table td { display: block; min-width: 0; }
	#wrap_content > h4 + table.d_table th { word-break: keep-all; }

	/* 넓은 표 — 글자를 세로로 쪼개지 않고 옆으로 밀어서 */
	#wrap_content table.d_table_basicmoney,
	#wrap_content .g2b_tbl { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
	#wrap_content table.d_table_basicmoney th,
	#wrap_content table.d_table_basicmoney td { white-space: nowrap !important; word-break: keep-all !important; }
}

/* 빨간 안내문 — 공용 css.bid.css 의 li{height:22px} 고정 때문에 좁은 화면에서 두 줄이 겹치던 것 */
#wrap_content .gonggomun_notice li { height: auto; min-height: 22px; line-height: 1.6; }
/* 안내문 상자 — 공용 css.bid.css 의 width:100% + float + 좌우 여백 때문에 카드 밖으로 넘치던 것(모든 폭) */
#wrap_content .gonggomun_notice { display: block; float: none; width: auto; }

/* PC(≥769px) — 카드 안쪽 좌우 여백. 어두운 상단 바는 끝까지 꽉 차게, 소제목·안내문은 표 왼쪽 선에 맞춘다 (2026-10-07) */
@media (min-width: 769px) {
	#wrap_content { padding-left: 24px; padding-right: 24px; }
	#wrap_content .wrap_title { margin-left: -24px; margin-right: -24px; }
	#wrap_content > h4 { padding-left: 0; padding-right: 0; }
	#wrap_content .gonggomun_notice { margin-left: 0; margin-right: 0; }
}

/* 입찰진행일정 — 휴대폰(≤600px)은 화살표 4칸 대신 세로 타임라인 (2026-10-07)
 *  🔴 사이트 css.basic_module.css 가 .progbar span 배경·여백을 !important 로 고정(진한 파랑) → 여기서도 !important 로 이긴다
 *  · 마크업(.progbar li > span "항목<br/>시각", 지난 단계 li.on)은 공용 그대로, 모양만 바꾼다
 *  · 지난 단계 회색, 다음 차례 단계(첫 미경과)는 파란색으로 채워 강조 */
@media (max-width: 600px) {
	#wrap_content .progbar { text-align: left; }
	#wrap_content .progbar ul { display: flex; flex-direction: column; }
	#wrap_content .progbar ul li { position: relative; padding-left: 22px; }
	#wrap_content .progbar ul li::before {        /* 세로 연결선 */
		content: ""; position: absolute; left: 7px; top: 0; bottom: 0; width: 2px; background: #d6e4f5;
	}
	#wrap_content .progbar ul li:first-child::before { top: 50%; }
	#wrap_content .progbar ul li:last-child::before { bottom: 50%; }
	#wrap_content .progbar ul li span {
		float: none; display: flex; justify-content: space-between; align-items: center; gap: 8px;
		margin: 3px 0 !important; padding: 8px 12px !important; border-radius: 8px;
		background: #eaf3fc !important; color: #1f4fd8 !important; font-size: 13px; line-height: 1.3; text-align: left;
	}
	#wrap_content .progbar ul li span br { display: none; }
	#wrap_content .progbar ul li span::after { display: none; }
	#wrap_content .progbar ul li span::before {   /* 단계 점 */
		content: ""; display: block; position: absolute; left: -20px; top: 50%;
		width: 8px; height: 8px; margin-top: -6px; border: 2px solid #fff; border-radius: 50%;
		background: #3498db; box-shadow: 0 0 0 2px #3498db;
	}
	#wrap_content .progbar ul li.on span { background: #f2f3f5 !important; color: #6b7280 !important; }
	#wrap_content .progbar ul li.on span::before { background: #c4c8cf; box-shadow: 0 0 0 2px #c4c8cf; }
	/* 다음 차례 단계 */
	#wrap_content .progbar ul li.on + li:not(.on) span,
	#wrap_content .progbar ul li:first-child:not(.on) span { background: #1f4fd8 !important; color: #fff !important; font-weight: 700; }
}

/* 관련링크(발주처바로가기·원문·결과원문·나라장터검색) — 휴대폰(≤600px)은 같은 폭 아이콘 타일 (2026-10-07)
 *  · 버튼 HTML 은 공용 module.related_link.html 그대로. 종류는 클래스로 구분: 색없음=발주처 홈페이지,
 *    type_red=원문링크/공고원문보기, type_black=발주처원문보기, type_blue=결과원문보기, type_green=나라장터검색
 *  · 원래 버튼 색은 아이콘 색으로 남긴다 */
@media (max-width: 600px) {
	#wrap_content > h4 + table.d_table td:has(> a.d_btn.type_small) { display: flex !important; flex-wrap: wrap; gap: 6px; }
	#wrap_content > h4 + table.d_table td > a.d_btn.type_small {
		flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
		height: auto; min-height: 56px; margin: 0 !important; padding: 8px 4px !important; box-sizing: border-box;
		border: 1px solid #d9dee7 !important; border-radius: 8px; background: #fff !important; color: #374151 !important;
		font-size: 11.5px !important; font-weight: 600; line-height: 1.25; text-align: center; white-space: normal; word-break: keep-all; text-decoration: none;
		text-shadow: none !important; box-shadow: none !important;	/* 색 버튼의 글자 그림자가 남아 번져 보이던 것 */
	}
	#wrap_content > h4 + table.d_table td > a.d_btn.type_small::before {
		content: "language"; font-family: "Material Icons"; font-size: 22px; line-height: 1; font-weight: normal; font-style: normal;
		letter-spacing: normal; text-transform: none; -webkit-font-feature-settings: "liga"; font-feature-settings: "liga"; color: #1f4fd8;
	}
	#wrap_content > h4 + table.d_table td > a.d_btn.type_small.type_red::before   { content: "description"; color: #dc2626; }
	#wrap_content > h4 + table.d_table td > a.d_btn.type_small.type_black::before { content: "description"; color: #111827; }
	#wrap_content > h4 + table.d_table td > a.d_btn.type_small.type_blue::before  { content: "fact_check";  color: #1f4fd8; }
	#wrap_content > h4 + table.d_table td > a.d_btn.type_small.type_green::before { content: "search";      color: #16a34a; }
	#wrap_content > h4 + table.d_table td > a.d_btn.type_small:active { background: #f3f7ff !important; }
}