@charset "utf-8";
/* ============================================================
   대상 : 센터 페이지(일반페이지) 본문 뒤에 붙는 보유장비 목록
          - db/ktdi_equip_page.sql 이 생성하는 <section class="equip_list">
   변경 : 장비 카드 목록 레이아웃/타이포 신규 정의
   이유 : 시안에는 장비 목록 화면이 없다(접수안내·시험의뢰절차만 있음).
          레거시는 별도 iframe 화면(equipinfo/selectEquipinfoList.jsp)으로 보여줬는데
          카이누리엔 그 구조가 없어 본문에 덧붙였고, 그에 맞는 스타일이 시안 CSS 에 없다.
   ⚠ 시안 원본 CSS 는 수정하지 않는다(개발규약). 이 파일에만 추가한다.
   ============================================================ */

.equip_list {
	margin-top: 60px;
	padding-top: 40px;
	border-top: 2px solid #222;
}

.equip_list_tit {
	font-size: 24px;
	font-weight: 700;
	color: #222;
	margin-bottom: 24px;
}
.equip_list_tit .cnt {
	color: #4d9ce4;
	margin-left: 6px;
}
.equip_list_tit .cnt::before { content: "("; }
.equip_list_tit .cnt::after  { content: ")"; }

.equip_items {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.equip_item {
	display: flex;
	gap: 16px;
	padding: 20px;
	border: 1px solid #ddd;
	border-radius: 8px;
	background: #fff;
}

/* 사진 — 파일 이관 전에는 photo_path 가 없어 .no_img 자리표시자가 온다 */
.equip_thumb {
	flex: 0 0 140px;
	height: 110px;
	overflow: hidden;
	border-radius: 6px;
	background: #f4f6f8;
}
.equip_thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.equip_thumb .no_img {
	display: block;
	width: 100%;
	height: 100%;
	background: #f4f6f8;
	position: relative;
}
.equip_thumb .no_img::after {
	content: "이미지 준비중";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	color: #999;
}

.equip_body { flex: 1 1 auto; min-width: 0; }

.equip_nm {
	font-size: 17px;
	font-weight: 700;
	color: #222;
	margin: 0 0 10px;
	line-height: 1.4;
	word-break: keep-all;
}

/* 제작사·모델명·설치장소·담당자 */
.equip_meta { margin: 0 0 12px; }
.equip_meta > div {
	display: flex;
	gap: 8px;
	font-size: 14px;
	line-height: 1.7;
}
.equip_meta dt {
	flex: 0 0 66px;
	color: #777;
	font-weight: 500;
}
.equip_meta dd {
	flex: 1 1 auto;
	margin: 0;
	color: #333;
	word-break: break-all;
}

/* 장비사양·용도·특징·시험규격 — 값이 있을 때만 생성된다 */
.equip_sec {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px dashed #e5e5e5;
}
.equip_sec h5 {
	font-size: 14px;
	font-weight: 700;
	color: #4d9ce4;
	margin: 0 0 6px;
}
.equip_sec p {
	font-size: 14px;
	line-height: 1.7;
	color: #555;
	margin: 0;
	word-break: keep-all;
}

/* 태블릿 이하 — 1열 */
@media (max-width: 1024px) {
	.equip_items { grid-template-columns: 1fr; }
}

/* 모바일 — 사진을 위로 */
@media (max-width: 640px) {
	.equip_item { flex-direction: column; }
	.equip_thumb { flex: 0 0 auto; width: 100%; height: 180px; }
	.equip_meta dt { flex-basis: 58px; }
}

/* 설비 목록 항목 — 상세 페이지로 이동(별도 페이지, 시안 equip_view). */
.equip_list li a { cursor: pointer; display: block; }

/* ── 설비 목록 썸네일 비율 보정 ─────────────────────────────
   시안 .media_list 는 3열 그리드 + .thumb 16:9(aspect-ratio) 인데
   .thumb img 에 크기·object-fit 이 없어 실이미지(화질·비율 제각각)가
   넘치거나 찌그러졌다. cover 로 채우되 컨테이너 비율에 맞춘다.
   (시안 원본 sub.css 는 수정 금지 → 여기서 override) */
.equip_list.media_list .thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}
/* 사진 없는 설비 — 회색 플레이스홀더로 자리 유지(높이 붕괴 방지) */
.equip_list.media_list .thumb .no_img {
	display: block;
	width: 100%;
	height: 100%;
	background: repeating-linear-gradient(45deg, #f0f1f4, #f0f1f4 10px, #e8eaee 10px, #e8eaee 20px);
}
/* 카드 본문 여백 — 시안이 li 테두리만 주고 padding 이 없어 텍스트가 붙었다 */
.equip_list.media_list .cont {
	padding: 1.2rem 1.4rem 1.4rem;
}
.equip_list.media_list .cont .tit {
	display: block;
	font-size: 1rem;
	font-weight: 600;
	color: #222;
	margin-bottom: 0.4rem;
	/* 장비명이 길면 2줄로 자르고 …  처리 — 카드 높이 균일 */
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.equip_list.media_list .cont .date {
	font-size: 0.8438rem;
	color: #6c7075;
}
.equip_list.media_list li { transition: box-shadow 0.15s; }
.equip_list.media_list li:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.1); }

@media (max-width: 1024px) { .equip_list.media_list { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 640px)  { .equip_list.media_list { grid-template-columns: 1fr !important; } }
 
/* ── 센터 접수안내 '보유장비' 이름표(부여 바이오센터) — 2026-09-28 ─────────────
   대상 : sub.css .table_st1 (min-width:1200px — 넓은 통계표 기준)
   변경 : .table_fit 을 단 표만 최소폭 해제(PC). 모바일(≤900px)은 시안대로 600px + 가로스크롤.
   이유 : 오른쪽 칸(약 760px) 안에서 1200px 로 그려져 3열(만능인장 시험기 등)이 스크롤 밖으로 숨었다
          (시안 bio_center.php 도 같은 증상). 3열짜리 장비명 목록이라 칸에 맞추는 게 맞다. */
.table_st1.table_fit {min-width: 0;width: 900px;}
@media screen and (max-width: 900px) {
  .table_st1.table_fit { min-width: 600px; }
}

/* ── 센터 접수안내 좌우 간격 — 2026-09-29 발주처 #7 ─────────────────────────
   대상 : 센터 5곳 접수안내 탭(section.sub_content.center)의 .col_wrap (시안 sub.css 4fr:6fr)
   변경 : 왼쪽 제목 칸 40% → 28% — '시험의뢰절차·접수안내·온라인 신청' 제목과 오른쪽 내용 사이가 너무 벌어졌다.
   범위 : 센터 접수안내만(다른 일반페이지의 .col_wrap 은 그대로). 1200px 이하는 시안대로 1단. */
@media screen and (min-width: 1201px) {
  .sub_content.center .col_wrap { grid-template-columns: 28fr 72fr; }
}

/* ── 설비 목록 사진 — 여백 두고 원본 비율(2026-09-29 발주처 #11) ─────────────
   대상 : .equip_list.media_list .thumb img (위 'cover' 규칙을 덮는다)
   변경 : 잘라서 꽉 채우기(cover) → **여백을 두고 칸 안에 원본 비율 그대로**, 원본보다 크게 늘리지 않는다.
   이유 : 사진 91장 중 72장이 가로 300px 미만인 작은 원본이라, 카드(약 380px)에 맞춰 늘리고 자르면
          흐리고 잘려 보였다. 고해상도 원본은 못 받는다(발주처 회신) → '이미지 여백을 두는 방향'. */
.equip_list.media_list .thumb {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px;
	background: #fff;
	box-sizing: border-box;
}
.equip_list.media_list .thumb img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}
/* 🔴 센터 페이지 보유장비 표는 클래스 없이도 같은 규칙 (2026-09-30).
   관리자 페이지 편집을 거치면 본문 주소 등이 지워질 위험이 있어(사용자 우려) t_page 본문을 건드리지 않고
   **위치로** 고른다: `.sub_content.center .col_wrap .right > .table_wrap > .table_st1`.
   전체 65개 메뉴 페이지 실측 — 이 선택자에 걸리는 표는 super-fiber · filter · bio 세 센터의 '보유장비' 표뿐.
   ⚠ /support/biz/transfer 도 .col_wrap .right 안에 표가 있지만 .sub_content.center 가 아니라 제외된다.
   .table_fit 클래스 규칙은 그대로 둔다(다른 곳에서 필요할 때 클래스로도 쓸 수 있게). */
.sub_content.center .col_wrap .right > .table_wrap > .table_st1 {min-width: 0;width: 900px;}
@media screen and (max-width: 900px) {
  .sub_content.center .col_wrap .right > .table_wrap > .table_st1 { min-width: 600px; }
}
/* 감싸는 .table_wrap 도 표 폭에 맞춘다 (2026-09-30).
   증상 : 표만 900px 로 줄고 .table_wrap 은 칸 전체(약 1220px)를 차지했다. 게다가 sub.css 의
          overflow:scroll 이라 스크롤할 게 없어도 그 폭만큼 스크롤바 자리가 항상 잡혔다.
   변경 : fit-content(표 폭) + max-width:100%(칸보다 넓어지지 않게) + overflow-x:auto(넘칠 때만 스크롤).
          → PC 는 표 폭에 딱 붙고, 칸이 표보다 좁아지면(모바일 600px 표) 그때만 가로 스크롤.
          실측: 1920·1280·1024·768 스크롤 없음 / 390 은 표 600px + 가로 스크롤.
   ⚠ :has() 로 .table_fit 을 단 표의 wrap 만 고른다 — 다른 표(통계표 등)의 .table_wrap 은 그대로다.
     페이지 본문(t_page)에 wrap 클래스를 따로 달지 않아도 되게 한 선택. */
.table_wrap:has(> .table_fit),
.sub_content.center .col_wrap .right > .table_wrap:has(> .table_st1) {
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}