/* 리스트 */
.tbl-stat {clear:both; width:100%; border-top:#000 2px solid; border-collapse: collapse; border-spacing:0px;table-layout:fixed; font-size:16px}
/* .tbl-stat caption { font-size:1px; line-height:1px; text-indent:-1000em; visibility:hidden; width:1px; height:1px; overflow:hidden;} */
.tbl-stat thead th, .tbl-stat tbody th {padding:20px; border:solid #e0e0e0; border-width:0 1px 1px 1px; background:#f6f6f6; color:#333; word-wrap:break-word; }
.tbl-stat tbody th {background:#fcfcfc}
.tbl-stat thead th:first-child, .tbl-stat tbody th:first-child,.tbl-stat tbody td:first-child, .tbl-stat tfoot td:first-child {border-left:0px;}
.tbl-stat thead th:last-child, .tbl-stat tbody th:last-child, .tbl-stat tbody td:last-child, .tbl-stat tfoot td:last-child { border-right:0}
.tbl-stat tbody td {padding:20px; text-align:left;  border:1px solid #e0e0e0; border-width:1px;word-break: break-all; line-height:1.6}
.tbl-stat .left,.tbl-stat .l {padding-left:20px}/*여백 재설정이 필요할 경우*/
.tbl-stat tfoot th {background:#f6f6f6; border:solid #e0e0e0; border-width:0 0 1px 0px; text-align:center; padding:10px 0; color:#e6360d;}
.tbl-stat tfoot td {background:#f6f6f6; border:solid #e0e0e0; border-width:0 0 1px 1px; text-align:center;  padding:10px 0; color:#333; font-weight:bold;}
.tbl-stat tbody td h2 { font-size:18px; font-weight:bold}

/* th 정렬 */
.tbl-stat thead th.sort a {display:inline-block;  padding-right:15px; margin:0px 3px; font-weight:bold;}
.tbl-stat thead th.sort a:hover, .tbl-stat thead th a:focus, .tbl-stat thead th.sort a:active {text-decoration:underline;color:#e6360d; }
.tbl-stat thead th.sort_up a {color:#e6360d;  padding-right:15px; margin:0px 3px}
.tbl-stat thead th.sort_up a:hover, .tbl-stat thead th.sort_up a:focus, .tbl-stat thead th.sort_up a:active {text-decoration:underline;}
.tbl-stat thead th.sort_dw a  {color:#e6360d;  padding-right:15px; margin:0px 3px}
.tbl-stat thead th.sort_dw a:hover, .tbl-stat thead th.sort_dw a:focus, .tbl-stat thead th.sort_dw a:active {text-decoration:underline;}
.tbl-stat td.sort {color:#e6360d; font-weight:bold;}

/* 포인트 색 */
.tbl-stat .point {background:#f8f5f3;}


@media screen and (max-width: 600px) {
	.tbl-stat tbody td { padding:10px}
	
}

		 .img2-wrap{
   display:flex;
   gap:16px;                 /* 두 이미지 사이 간격 */
   align-items:stretch;
 }
 .img2-item{
   margin:0;
   flex:1 1 0;               /* 2개 동일 비율 */
 }
 .img2-item img{
   width:100%;
   height:auto;
   display:block;
 }

 /* 모바일: 1열로 */
 @media (max-width:768px){
   .img2-wrap{
	 flex-direction:column;
   }
 }
 
 
  .spec-wrap{
	font-size: 0.9375rem;
	width:100%;
	color:#222;
	padding-bottom: 10px;
  }
  
  /* ---------- 데스크탑 표 ---------- */
  .spec-tbl{
	width:100%;
	border-collapse:separate;
	border-spacing:0;
  }
  .spec-tbl th,
  .spec-tbl td{
	text-align:center;
	padding:14px 18px;
	border-bottom:1px solid #cfcfcf;
	background:#fff;
	vertical-align:middle;
  }
  .spec-tbl thead th{
	text-align:center;
	font-weight:600;
	border-top:0px solid #bdbdbd;
	border-bottom:1px solid #bdbdbd;
  }
  .spec-tbl .sub{ font-weight:600; }
  .spec-tbl .unit{ font-weight:500; color:#444; }
  .center{ text-align:center; }
  .spec-tbl tbody tr.shade td{ background:#f5f3ee; }
  .spec-tbl tbody tr.group-start td{ border-top:0px solid #c9c9c9; }
  
  /* ---------- 모바일 카드 ---------- */
  .spec-mobile{ display:none; }
  
  .spec-card{
	border:1px solid #e2e2e2;
	border-radius:14px;
	overflow:hidden;
	margin:12px 0;
	background:#fff;
  }
  
  .card-head{
	display:flex;
	align-items:center;
	gap:10px;
	padding:14px 14px 12px;
	border-bottom:1px solid #e9e9e9;
	background:#fafafa;
  }
  .card-head .teeth{
	min-width:52px;
	height:34px;
	padding: 0 15px;
	border-radius:999px;
	display:flex;
	align-items:center;
	justify-content:center;
	font-weight:800;
	background:#111;
	color:#fff;
  }
  .card-head .head-title{
	font-weight:700;
	color:#333;
  }
  
  /* 헤더 그리드(항목명) */
  .card-grid{
	display:grid;
	grid-template-columns: 1fr 1fr 1fr .7fr .9fr; /* 모바일에서 스크롤 없이 들어오게 */
	gap:0;
  }
  .card-grid-head{
	padding:10px 12px;
	font-size:12px;
	color:#555;
	background:#fff;
	border-bottom:1px solid #ededed;
  }
  .card-grid-head > div{
	text-align:center;
	line-height:1.2;
	padding:2px 4px;
  }
  
  /* 데이터 줄 */
  .card-row{
	display:grid;
	grid-template-columns: 1fr 1fr 1fr .7fr .9fr;
	padding:12px 12px;
	border-bottom:1px solid #f0f0f0;
	font-size:14px;
  }
  .card-row > div{
	text-align:center;
	padding:2px 4px;
	word-break:break-word;
  }
  .card-row:last-child{ border-bottom:none; }
  .card-row.zebra{ background:#f7f5f1; }
  
  /* 기본(예: 5열) 그대로 두고, 4열일 때만 오버라이드 */
  .spec-mobile.cols-4 .card-grid{
	grid-template-columns: 1fr .7fr 1fr .9fr;
  }
  .spec-mobile.cols-4 .card-row{
	grid-template-columns: 1fr .7fr 1fr .9fr;
  }
/* ===== 모바일 카드 컬럼 자동 전환 (추가) ===== */
  
  /* 기본은 기존 CSS(5열) 사용: .spec-mobile(클래스 없음) 또는 .cols-5 */
  
  /* 4열 */
  .spec-mobile.cols-4 .card-grid,
  .spec-mobile.cols-4 .card-row{
	grid-template-columns: repeat(4, 1fr);
  }
  
  /* 5열(명시용: 기존값 유지) */
  .spec-mobile.cols-5 .card-grid,
  .spec-mobile.cols-5 .card-row{
	grid-template-columns: 1fr 1fr 1fr .7fr .9fr;
  }
  
  /* 6열 */
  .spec-mobile.cols-6 .card-grid,
  .spec-mobile.cols-6 .card-row{
	grid-template-columns: repeat(6, 1fr);
  }
  
  /* 모바일 더 작은 폰에서도 줄바꿈 최소화 */
  @media (max-width: 480px){
	.spec-mobile.cols-6 .card-grid-head{ font-size:11px; }
	.spec-mobile.cols-6 .card-row{ font-size:12px; }
  }

  /* ---------- 반응형 전환 ---------- */
  @media (max-width: 768px){
	.spec-desktop{ display:none; }
	.spec-mobile{ display:block; }
  
	/* 작은 폰에서도 깨지지 않게 */
	.card-row, .card-grid{
	  grid-template-columns: 1fr 1fr 1fr .7fr 1fr;
	}
	.card-row{ font-size:13px; }
  }
.spec-mobile.cols-4 .card-grid,
	  .spec-mobile.cols-4 .card-row{
		grid-template-columns: 1fr .7fr 1fr 1fr; /* 작은 폰 대비 */
	  }
	}
/* -----------------------------
	   모바일 카드: 열이 많아도 자동 줄바꿈(5열 이상 대응)
	   (기존 CSS 아래에 "추가/덮어쓰기"로 넣으세요)
	------------------------------ */
	@media (max-width: 768px){
	  .spec-mobile .card-grid,
	  .spec-mobile .card-row{
		grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)) !important;
	  }
	
	  /* 긴 텍스트 줄바꿈 안정화 */
	  .spec-mobile .card-grid-head > div,
	  .spec-mobile .card-row > div{
		word-break: break-word;
		overflow-wrap: anywhere;
	  }
	}
	
	/* 더 작은 폰(아이폰 SE급) */
	@media (max-width: 480px){
	  .spec-mobile .card-grid,
	  .spec-mobile .card-row{
		grid-template-columns: repeat(auto-fit, minmax(78px, 1fr)) !important;
	  }
	}
	
/* 카드 헤더가 4칸이면 → 그 카드의 grid/row를 4열로 */
	.spec-card:has(.card-grid-head > :nth-child(4):last-child) .card-grid,
	.spec-card:has(.card-grid-head > :nth-child(4):last-child) .card-row{
	  grid-template-columns: repeat(4, 1fr) !important;
	}
	
	/* ✅ 모바일 카드: 5열 이상이면 5열 그리드 + 자동 줄바꿈 (추가 CSS) */
	@media (max-width: 768px){
	  /* 기본: 기존 CSS가 grid를 쓰고 있다는 전제 (지금 사용중인 구조) */
	  .spec-mobile .card-grid,
	  .spec-mobile .card-row{
		display: grid; /* 혹시 기존이 grid가 아닐 때도 안전하게 */
		gap: 0;        /* 기존 간격 유지 원하면 제거 */
	  }
	
	  /* ✅ 6개(=5열 이상 판정용) 이상 칸이 있으면 5열로 고정 */
	  .spec-mobile .card-grid:has(> :nth-child(6)),
	  .spec-mobile .card-row:has(> :nth-child(6)){
		grid-template-columns: repeat(5, minmax(0, 1fr));
		grid-auto-flow: row; /* 초과 칸은 다음 줄로 */
	  }
	
	  /* (선택) 4열만 있는 카드에서 4열 유지하고 싶으면 */
	  .spec-mobile .card-grid:not(:has(> :nth-child(5))),
	  .spec-mobile .card-row:not(:has(> :nth-child(5))){
		grid-template-columns: repeat(4, minmax(0, 1fr));
	  }
	}

	
	/* ==============================
	   ✅ 추가규칙: 5열 이상 자동 줄바꿈 + 헤더/값 줄맞춤(동기화)
	   - 6칸 이상이면 5열 고정
	   - 5칸 초과분은 자동으로 다음 줄
	   - 마지막 줄(남는 1~4칸)도 5열 폭 규칙 유지
	   - 헤더(card-grid-head)와 값(card-row)이 동일 규칙 적용
	================================ */
	@media (max-width:768px){
	
	  /* 1) grid 강제(기존이 grid면 그대로 덮어써도 무해) */
	  .spec-mobile .card-grid,
	  .spec-mobile .card-row{
		display:grid;
		grid-auto-flow:row;
		align-items:stretch;
	  }
	
	  /* 2) ✅ 6칸 이상(=5열 이상 필요) → 5열 고정 + 자동 줄바꿈 */
	  .spec-mobile .card-grid:has(> :nth-child(6)),
	  .spec-mobile .card-row:has(> :nth-child(6)){
		grid-template-columns: repeat(5, minmax(0, 1fr));
	  }
	
	  /* 3) ✅ 마지막 줄 “남는 칸”도 5열 기준으로 폭/정렬 유지
			(빈칸 div 추가 없이도, 남는 칸이 왼쪽부터 1fr로 배치됨)
			→ 텍스트가 길면 줄바꿈/넘침 방지 */
	  .spec-mobile .card-grid > div,
	  .spec-mobile .card-row > div{
		min-width:0;                 /* grid에서 말줄임/줄바꿈 안정 */
		word-break:break-word;       /* 긴 단어(모델명) 안전 */
		overflow-wrap:anywhere;
	  }
	
	  /* 4) ✅ “헤더 줄”과 “값 줄”의 줄 경계선(행 단위) 유지
			기존에 셀 border를 주는 방식이면 그대로 두고,
			행이 여러 줄로 내려가도 외곽선이 안 깨지게 */
	  .spec-mobile .spec-card{
		overflow:hidden;             /* 내부 셀 border가 밖으로 튀는 것 방지 */
	  }
	
	  /* 5) (선택) 4열 카드일 때는 4열 유지 (5열 강제 X)
			- 4칸 이하인 카드에만 적용 */
	  .spec-mobile .card-grid:not(:has(> :nth-child(5))),
	  .spec-mobile .card-row:not(:has(> :nth-child(5))){
		grid-template-columns: repeat(4, minmax(0, 1fr));
	  }
	
	  /* 6) (선택) 3열 이하도 자연스럽게 */
	  .spec-mobile .card-grid:has(> :nth-child(4)):not(:has(> :nth-child(5))),
	  .spec-mobile .card-row:has(> :nth-child(4)):not(:has(> :nth-child(5))){
		/* 위 4열 규칙이 이미 처리하지만, 명시해두고 싶으면 유지 */
	  }
	
	  /* 7) ✅ zebra(줄무늬)도 “카드 단위”로 유지하려면(원하면)
			- 지금처럼 row에 zebra를 주면 한 줄만 색이 들어갑니다.
			- 카드 전체를 zebra로 하고 싶을 때만 사용 */
	  /*
	  .spec-mobile .spec-card.zebra{ background:#f5f3ee; }
	  .spec-mobile .spec-card.zebra .card-row{ background:transparent; }
	  */
	}

			  .spec1-wrap{
		font-size:0.9375rem;
		width:100%;
		color:#222;
	  }
	  
	  /* ---------- 데스크탑 테이블 ---------- */
	  .spec1-tbl{
		width:100%;
		border-collapse:separate;
		border-spacing:0;
	  }
	  .spec1-tbl th,
	  .spec1-tbl td{
		padding:14px 18px;
		border-bottom:1px solid #cfcfcf;
		text-align:center;
	  }
	  .spec1-tbl thead th{
		font-weight:600;
	  }
	  .spec1-tbl .sub{font-weight:500;color:#555;}
	  .spec1-tbl tbody tr.shade td{
		background:#f5f3ee;
	  }
	  
	  /* ---------- 모바일 카드 ---------- */
	  .spec1-mobile{
		display:none;
	  }
	  .spec1-card{
		border:1px solid #ddd;
		border-radius:18px;
		padding:18px;
		margin-bottom:16px;
		background:#fff;
	  }
	  .spec1-card h4{
		margin:0 0 12px;
		font-size:1.05rem;
		font-weight:700;
	  }
	  .spec1-card ul{
		margin:0;
		padding:0;
		list-style:none;
	  }
	  .spec1-card li{
		display:flex;
		justify-content:space-between;
		padding:6px 0;
		border-bottom:1px dashed #ddd;
	  }
	  .spec1-card li:last-child{
		border-bottom:none;
	  }
	  .spec1-card span{
		color:#666;
	  }
	  .spec1-card b{
		font-weight:600;
	  }
	  
	  /* ---------- 반응형 ---------- */
	  @media (max-width:768px){
		.spec1-desktop{display:none;}
		.spec1-mobile{display:block;}
	  }