/* ********************************************************************
 * name : 동아대학교 고기능성밸브 기술지원센터
 * filename : components.css
 * author : JBieN 제이비엔
 * update : 2026-06-30
********************************************************************* */

/* =============================================
   장비 상세 팝업 (dialog)
============================================= */
.equipPop { --popH: min(830px, calc(100dvh - 92px)); width: min(1380px, calc(100vw - 190px)); max-width: none; max-height: none; padding: 0; border: 0; background: transparent; color: #222; overflow: visible; }
.equipPop::backdrop { background: rgba(9, 9, 10, .78); backdrop-filter: blur(14px); }
.equipPopBox {position: relative;height: var(--popH); max-height: var(--popH);display: grid;grid-template-rows: minmax(0, 1fr) auto;padding: 30px 30px 24px;border-radius: 34px;
  background: #fff;  box-shadow: 0 40px 120px rgba(0, 0, 0, .55);  overflow: hidden;  outline: 0;  transform: translateY(22px) scale(.985);  opacity: 0;  
  transition: transform .42s cubic-bezier(.19, 1, .22, 1), opacity .42s cubic-bezier(.19, 1, .22, 1);
 }
.equipPop[open] .equipPopBox { transform: translateY(0) scale(1); opacity: 1; }
.equipPopClose { position: absolute; right: -88px; top: 0; width: 58px; height: 58px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .76); background: rgba(9, 9, 10, .18); color: #fff; font-size: 36px; line-height: 1; font-weight: 200; cursor: pointer; z-index: 5; }
.equipPopClose:hover { background: rgba(255, 255, 255, .12); }
.equipPopList { position: relative; min-height: 0; overflow: hidden; }
.equipDtl {display: none;grid-template-columns: minmax(0, 1.08fr) minmax(400px, .92fr);gap: clamp(28px, 3.4vw, 35px);align-items: stretch;height: 100%;min-height: 0;}
.equipDtl.isActive { display: grid; }
.equipInfoWrap {width: 100%;min-width: 0;min-height: 0;height: 100%;padding: 3em 3em 3em 0;overflow-x: hidden;overflow-y: auto;overscroll-behavior: contain;-webkit-overflow-scrolling: touch;}
.equipInfoWrap::-webkit-scrollbar { width: 6px; }
.equipInfoWrap::-webkit-scrollbar-track { background: #ececec; border-radius: 999px; }
.equipInfoWrap::-webkit-scrollbar-thumb { background: #222; border-radius: 999px; }

.equipInfoTit { margin: 0; font-size: 3.2rem; font-weight: 800; line-height: 1.2; color: #222; }
.equipInfoTable { margin-top: 2.8rem; }
.equipTableTit { margin: 0 0 1.6rem; font-size: 1.9rem; font-weight: 700; color: #222; }
.equipInfoTable table { width: 100%; border-collapse: collapse; border-top: 2px solid #222; }
.equipInfoTable th, .equipInfoTable td { border: 1px solid #e1e1e1; padding: 0.9rem 2.2rem; font-size: 1.6rem; line-height: 1.6; }
.equipInfoTable tr:first-child th,
.equipInfoTable tr:first-child td { border-top: 0; background: #f5f5f7; font-weight: 800; }
.equipInfoTable th { background: #f5f5f7; font-weight: 700; text-align: center; color: #222; }
.equipInfoTable td { text-align: center; color: #222; }

.equipInfoItem { display: grid; grid-template-columns: 80px 1fr; padding: 2.2rem 0; border-bottom: 1px solid #e5e5e5; }
.equipInfoItem:first-child { border-top: 0; }
.equipInfoItem dt {font-size: 2rem;font-weight: 700;line-height: 1.35;color: #222;margin-top: 3px;letter-spacing: normal;}
.equipInfoItem dd { margin: 0; }
.equipInfoItem ul { margin: 0; padding: 0; list-style: none; }
.equipInfoItem li {position: relative;margin-top: 0.8rem;padding-left: 1rem;font-size: 1.6rem;line-height: 1.8;color: #555;}
.equipInfoItem li:first-child { margin-top: 0; }
.equipInfoItem li::before { content: "·"; position: absolute; left: 0; top: 0; }
.equipInfoItem li ul li::before { content: "-"; }

.equipPopFoot { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 24px; padding-top: 20px; border-top: 1px solid #eee; }
.equipWrap{display: flex;align-items: center;gap: 1em;}
.equipPopCount { color: #777; font-size: 14px; font-weight: 800; letter-spacing: .12em; }
.equipPopBtns { display: flex; gap: 10px; }
.equipPopBtns button { min-width: 96px; height: 44px; border: 1px solid #dedede; border-radius: 999px; background: #fff; color: #222; font-size: 14px; font-weight: 800; letter-spacing: .04em; cursor: pointer; }
.equipPopBtns button:hover,
.equipPopBtns button:focus-visible { border-color: #222; background: #222; color: #fff; }



/* --- 반응형 --- */
@media (min-width: 2100px) {
	.equipPop {--popH: min(1000px, calc(100dvh - 92px));width: min(1680px, calc(100vw - 190px));}
}

@media (max-width: 1180px) {
	.equipInfoWrap {padding: 2em 3em 3em 0;}	
	.equipPop { width: calc(100vw - 48px); --popH: calc(100dvh - 48px); }
	.equipPopBox { height: var(--popH); max-height: var(--popH); }
	.equipPopClose { right: 16px; top: 16px; width: 48px; height: 48px; background: rgba(0, 0, 0, .38); }
	.equipDtl { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr);gap:0; }
	.equipDtlImg { height: auto; min-height: auto; aspect-ratio: 16/10; }
}

@media (max-width: 768px) {
	.equipShowcase .equipSec .equipWrap { --centerW: min(72vw, 400px); --sideW: 38vw; --d1: 42vw; --d2: 76vw; --d3: 110vw; --d4: 145vw; --itemGap: 12px; }
	.equipItem { top: 56%; }
	.equipItem[data-pos="-3"], .equipItem[data-pos="3"] { --o: 0; }
	.equipCta { bottom: 24px; padding: 9px 14px; font-size: 13px; }
	.equipPop { width: calc(100vw - 28px); --popH: calc(100dvh - 28px); }
	.equipPopBox { height: var(--popH); max-height: var(--popH); padding: 18px; border-radius: 24px; }
	.equipDtlImg { border-radius: 18px; aspect-ratio: 4/3; }
	.equipInfoWrap { padding: 2em 1em 1em 0; }
	.equipInfoTit { font-size: 2.8rem; }
	.equipInfoTable { margin-top: 2.8rem; }
	.equipInfoTable th, .equipInfoTable td { padding: 1.2rem 1.4rem; font-size: 1.4rem; }
	.equipInfoItem { grid-template-columns: 60px 1fr; }
	.equipInfoItem dt { font-size: 1.7rem; }
	.equipInfoItem li { font-size: 1.45rem; line-height: 1.75; }
	.equipPopFoot { align-items: stretch; flex-direction: column;gap: 0;margin-top: 0;padding-top: 10px;border-top: 0; }
	.equipPopBtns button { flex: 1; }
	.equipPopCount{font-size: 12px;font-weight: 500;margin-bottom: 5px;}
}

@media (max-width: 640px) {
	.equipPopBtns button {height: 33px;}
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.equipWrap::before,
	.equipItem,
	.equipPopBox,
	.equipCta { transition: none; }
}

/* =============================================
   장비 팝업 이미지 갤러리 (썸네일 전환)
============================================= */
.equipGallery{height:100%;min-height:0;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:1.2rem;}
.equipMainImg{position:relative;height:100%;min-height:0;margin:0;border-radius:26px;overflow:hidden;background:#f1f1f1;}
.equipMainImg img{display:block;width:100%;height:100%;object-fit:cover;}
.equipMainImg figcaption{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;white-space:nowrap;}
.equipThumbList{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:.8rem;min-height:0;}
.equipThumbBtn{position:relative;padding:0;border:2px solid transparent;border-radius:1rem;background:#f1f3f6;overflow:hidden;cursor:pointer;opacity:.55;transition:border-color .25s ease,opacity .25s ease,transform .25s ease;}
.equipThumbBtn img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;transform:none;}
.equipThumbBtn.isActive,.equipThumbBtn:hover,.equipThumbBtn:focus-visible{border-color:var(--main-color,#007aff);opacity:1;transform:translateY(-2px);}
.equipImgCount{position:absolute;right:1.2rem;bottom:1.2rem;z-index:3;display:inline-flex;align-items:center;height:2.8rem;padding:0 1rem;border-radius:99rem;background:rgb(0 0 0 / 28%);color:#fff;font-size:1.2rem;font-weight:600;letter-spacing:.02em;}
.equipmentListCard figure{aspect-ratio:1/1;}
.equipmentListCard figure .equipImgCount{transform:none;display:none;}

@media(max-width:1180px){
	.equipGallery{height:50svh;position: relative;}
	.equipMainImg{height:auto;min-height:auto;}
	.equipThumbList{position: absolute;top: 20px;left: 20px;display: flex;flex-direction: column;}
	.equipMainImg img {object-fit: contain;}
	.equipThumbBtn {opacity: 1;width: 10vw;}
	.equipThumbBtn img{aspect-ratio:4/3;}
}

@media(max-width:768px){
	.equipGallery{height:auto;}
	.equipMainImg{aspect-ratio:16/10;}
	.equipThumbList{grid-template-columns:repeat(6,minmax(0,1fr));}
	.equipThumbBtn img{aspect-ratio:5/3;}
	.equipMainImg img {object-fit: cover;}
	.equipThumbList {position: initial;display: grid;}
	.equipThumbBtn {opacity: .55;width: auto;}
}

@media(max-width:560px){
	.equipThumbList{grid-template-columns:repeat(4,minmax(0,1fr));gap:.6rem;}
	.equipImgCount{right:1rem;bottom:1rem;height:2.6rem;font-size:1.1rem;}
}

/* =============================================
   장비 팝업 스펙 테이블 + 중첩 리스트
============================================= */
.equipTableGroup{display:grid;gap:2.8rem;margin-top:2.8rem;}
.equipTableGroup .equipInfoTable{margin-top:0;}
.equipTableGroup .equipInfoTable table{table-layout:fixed;}
.equipTableGroup .equipInfoTable th{width:11rem;background:#f5f5f7;font-weight:700;text-align:center;}
.equipTableGroup .equipInfoTable td{text-align:center;}
.equipInfoTable .equipTableList{display:grid;gap:.6rem;margin:0;padding:0;list-style:none;text-align:left;}
.equipInfoTable .equipTableList > li{position:relative;margin:0;padding-left:1.3rem;color:#222;font-size:1.55rem;line-height:1.65;}
.equipInfoTable .equipTableList > li::before{content:"";position:absolute;left:0;top:1.05rem;width:.4rem;height:.4rem;border-radius:50%;background:#222;}
.equipInfoTable .equipTableList ul{display:grid;gap:.4rem;margin:.8rem 0 0;padding:0;list-style:none;}
.equipInfoTable .equipTableList ul li{position:relative;padding-left:1.2rem;color:#555;font-size:1.45rem;line-height:1.65;}
.equipInfoTable .equipTableList ul li::before{content:"-";position:absolute;left:0;top:0;color:#555;}

@media (max-width: 768px) {
	.equipTableGroup{gap:2.2rem;margin-top:2.4rem;}
	.equipTableGroup .equipInfoTable th{padding:1.2rem 1.4rem;}
	.equipTableGroup .equipInfoTable td{padding:1.4rem;}
}

@media (max-width: 640px) {
	.equipTableGroup{margin-top:1.4rem;}
	.equipTableGroup .equipInfoTable th{padding:0.8rem 1rem;}
	.equipTableGroup .equipInfoTable td{padding:0.8rem;}
}

.equipNestedList{display:grid;gap:.8rem;margin:0;padding:0;list-style:none;}
.equipNestedList li{position:relative;margin:0;padding-left:1.2rem;color:#555;font-size:1.6rem;line-height:1.8;word-break:keep-all;}
.equipNestedList li::before{content:"·";position:absolute;left:0;top:0;color:#333;font-weight:900;}
.equipNestedList li > span{display:block;}
.equipNestedList .equipNestedList{margin-top:.7rem;padding-left:1.2rem;gap:.5rem;}
.equipNestedList .equipNestedList li{font-size:1.52rem;color:#666;line-height:1.72;}
.equipNestedList .equipNestedList li::before{content:"-";top:0;color:#777;}
.equipNestedList .equipNestedList .equipNestedList{margin-top:.5rem;padding-left:1.2rem;}
.equipNestedList .equipNestedList .equipNestedList li{font-size:1.45rem;color:#777;}
.equipNestedList .equipNestedList .equipNestedList li::before{content:"ㆍ";color:#888;}

@media (max-width: 768px) {
	.equipNestedList li{font-size:1.45rem;line-height:1.72;}
	.equipNestedList .equipNestedList li{font-size:1.38rem;}
	.equipNestedList .equipNestedList .equipNestedList li{font-size:1.34rem;}
}