/* ============================================================
   about-equipment.css — 보유장비 페이지 (그리드 + 라이트박스)
   ★ 정본 about-equipment-full.html <style> 에서 기계 추출(§0-1).
     뒤에 오는 정본 오버라이드(그리드를 3열로 바꾸는 규칙 등)의 순서를 그대로 유지했다.
   ⚠ 진입 연출의 시작 조건만 `.is-js` 로 옮겼다(§0-5).
   ============================================================ */
.wf-43 { aspect-ratio:4/3; }
.e1-hero { padding:clamp(88px,70px + 3vw,140px) 24px clamp(12px,10px + 0.3vw,16px);text-align:center; }
.e1-title { color:#111;font-size:clamp(34px,26px + 2vw,56px);line-height:1.2;letter-spacing:-0.02em;font-weight:400; }
.e1-title strong { font-weight:700; }
.e1-grid-sec { padding:clamp(24px,20px + 0.6vw,34px) 0 clamp(72px,56px + 2vw,110px);background:#FBFAF8; }
.e1-grid { display:flex;flex-wrap:wrap;justify-content:center;gap:44px 24px; }
.e1-item { flex:0 0 calc(25% - 18px);text-align:left;display:block;padding:0;background:none;border:none;cursor:pointer; }
.e1-item .wf-img { transition:opacity .2s; }
.e1-item:hover .wf-img { opacity:0.78; }
.e1-name { display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;font-size:16px;font-weight:600;color:#111;letter-spacing:-0.01em; }
.e1-lb { position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(17,17,17,0.92);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .32s ease,visibility .32s; }
.e1-lb.open { opacity:1;visibility:visible;pointer-events:auto; }
.e1-lb-panel { position:relative;background:transparent;width:100%;max-width:630px;max-height:92vh;overflow-y:auto;padding:0;transform:scale(0.94);transition:transform .38s cubic-bezier(0.2,0.7,0.3,1); }
.e1-lb.open .e1-lb-panel { transform:none; }
.e1-lb-close { position:absolute;top:12px;right:12px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:300;color:rgba(255,255,255,0.7);line-height:1;background:none;border:none;cursor:pointer; }
.e1-lb-close:hover { color:#fff; }
.e1-lb-body { font-family:'Noto Sans','Noto Sans KR',sans-serif; }
.e1-lb-body .wf-img { aspect-ratio:3/4;width:100%;margin:0 auto 18px;background:#2E2E2E;color:rgba(255,255,255,0.4); }
/* ⚠ `.e1-lb-body h3`(0,1,1) 는 Breakdance 의 `.breakdance h3`(0,1,1)와 특이도가 같아
   나중에 로드되는 쪽에 진다 — 제목이 진한 남색 31px 로 바뀌어 어두운 팝업 배경에
   묻혀 있었다(실측: rgb(17,24,39) / 정본은 흰색 18px). `.e1-lb` 를 붙여 특이도만 올린다.
   ※ 같은 함정: '클래스 + h태그' 형태 선택자는 전부 이 위험이 있다. */
.e1-lb .e1-lb-body h3 { font-size:18px;font-weight:700;color:#fff;letter-spacing:-0.01em;margin-bottom:8px;font-family:'Noto Sans','Noto Sans KR',sans-serif; }
.e1-lb-body .e1-lines p { font-size:13px;font-weight:400;line-height:1.55;color:rgba(255,255,255,0.82);margin:0 0 3px;text-align:left; }
.e1-lb-body .e1-areas { margin-top:10px;font-size:12px;color:rgba(255,255,255,0.5); }
.e1-areas { margin-top:14px;font-size:13px;color:#8a8a8a; }
.e1-item:focus,.e1-item:focus-visible { outline:none; }

/* 정본 후반 오버라이드 — 순서 그대로 */
.e1-grid { display:grid;grid-template-columns:repeat(3,1fr);justify-content:start;gap:14px; }
.e1-grid .wf-img { aspect-ratio:3/4; }
.e1-name { justify-content:center;text-align:center; }

@media (max-width:1024px) { .e1-item { flex-basis:calc(50% - 12px); } }
@media (max-width:900px)  { .e1-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:768px)  { .e1-hero { padding-top:88px; } .e1-item { flex-basis:100%; } }
@media (max-width:520px)  { .e1-grid { grid-template-columns:1fr; } }

/* ── 진입 연출 — 딜레이 정본 그대로 ── */
/* ⚠ 예전에는 nth-child(1)~(5) 로 딜레이를 하나씩 박아 두었다. 장비가 6개가 되자
   여섯 번째만 연출 없이 그냥 떠 있었다(실측). 개수에 의존하지 않도록 계산식으로 바꾼다.
   0.39s 에서 0.135s 씩 — 기존 5개의 딜레이(0.39·0.52·0.66·0.80·0.94)와 같은 리듬이다.
   --i 는 about-equipment.js 가 넣는다. JS 가 없으면 아래 기본값(연출 없음)이 그대로 남는다. */
.e1-grid-sec.is-js .e1-grid > * {
  animation: rvFade 1.05s ease both;
  animation-delay: calc(0.39s + var(--i, 0) * 0.135s);
}
.e1-hero.is-js .e1-title { animation:aboutRise 1.1s cubic-bezier(0.22,0.61,0.36,1) .25s both; }
@media (prefers-reduced-motion: reduce) {
  .e1-grid-sec.is-js .e1-grid > *, .e1-hero.is-js .e1-title { animation:none;opacity:1; }
}

/* ── 장비 라이트박스 — 넓은 화면에서는 사진과 설명을 나란히 (2026-08-20) ──
   ⚠ 세로 배치라 사진(3:4)이 패널 높이를 통째로 차지해, 데스크톱에서 제목·설명·적용
     부위가 화면 밖으로 밀려 있었다(실측: 이미지 840px / 패널 828px → 스크롤해야 보임).
     장비 사진과 설명은 함께 봐야 이해되므로, 가로 여유가 있는 폭에서는 좌우로 나눈다.
   모바일은 지금 그대로가 맞다 — 세로로 쌓여도 전부 한 화면에 들어온다(실측 확인). */
@media (min-width: 768px) {
  /* ⚠ 사진을 화면 높이에 맞춰 키운다. 예전에는 패널 폭(940px)에만 맞춰 두어
     팝업 사진이 401×535 → 404×538 로 **섬네일과 사실상 같은 크기**였다.
     확대해서 보려고 여는 팝업인데 커지지 않으니 여는 의미가 없었다(사용자 지적).
     위아래로 260~510px 가 비어 있었으므로 그 공간을 쓴다.
     height 를 주면 aspect-ratio(3/4)가 폭을 정한다 — 어떤 화면에서도 섬네일보다 크다.

     사진은 왼쪽 한 칸을 세로로 다 쓰고, 글은 오른쪽 가운데에 모인다.
     위아래 1fr 행이 여백을 나눠 가져 글 묶음이 사진 높이의 중앙에 온다 —
     `align-self` 로 각자 붙이면 행이 균등 분배되면서 글이 위아래로 벌어진다(실측). */
  .e1-lb-panel { max-width: min(1100px, 92vw); }
  .e1-lb-body {
    display: grid;
    grid-template-columns: auto minmax(300px, 1fr);
    grid-template-rows: 1fr auto auto auto 1fr;
    column-gap: clamp(32px, 3.4vw, 52px);
    justify-content: center;
  }
  .e1-lb-body .wf-img   { grid-column: 1; grid-row: 1 / -1; margin: 0;
                          height: min(78vh, 780px); width: auto; aspect-ratio: 3/4; }
  /* 하단 띠가 있으면 그만큼 낮춘다 — 안 그러면 사진 아래가 띠에 물린다 */
  /* ⚠ 78vh 는 이미 위아래 여백을 22vh 빼 둔 값이다. 거기서 띠 높이를 또 빼면
     짧은 화면에서 팝업 사진이 목록 카드만 해진다(실측 900px 화면: 552 vs 카드 535).
     띠를 뺄 몫은 88vh 에서 뺀다 — 아래 max-height(92vh - 띠) 안에 그대로 들어온다.
     섬네일을 3:4 로 바꾸며 띠가 106 → 150px 로 높아져 드러난 문제다(2026-08-25). */
  .e1-lb.has-rail .e1-lb-body .wf-img { height: min(calc(88vh - var(--rail)), 720px); }
  .e1-lb .e1-lb-body h3 { grid-column: 2; grid-row: 2; font-size: 25px; margin-bottom: 14px; }
  .e1-lb-body .e1-lines { grid-column: 2; grid-row: 3; }
  .e1-lb-body .e1-areas { grid-column: 2; grid-row: 4; margin-top: 16px; font-size: 13px; }
  .e1-lb-body .e1-lines p { font-size: 14.5px; line-height: 1.75; margin-bottom: 8px; }
}

/* ==========================================================================
   라이트박스 하단 장비 띠 (2026-08-22)

   열면 닫는 것 말고 할 게 없던 화면이었다. 여섯 대를 한 자리에서 건너뛰게 한다.
   마크업은 JS 가 목록 버튼에서 만들어 붙인다(about-equipment.js) —
   장비를 더해도 여기서 고칠 것은 없다.
   ========================================================================== */
/* 띠 높이 = 섬네일(76×101) + 간격 6 + 이름 두 줄 27 + 위아래 여백 12 ≈ 146 */
.e1-lb { --rail: 150px; }

/* 띠가 붙으면 패널이 그 위로 올라앉아야 한다 — 안 그러면 사진 아래가 가린다 */
.e1-lb.has-rail { padding-bottom: calc(24px + var(--rail)); }
.e1-lb.has-rail .e1-lb-panel { max-height: calc(92vh - var(--rail)); }

.e1-lb-rail {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: var(--rail);
	display: flex;
	align-items: center;
	padding: 0 20px;
	background: linear-gradient(to top, rgba(10,10,10,0.55), rgba(10,10,10,0));
	opacity: 0;
	transform: translateY(10px);
	transition: opacity .34s ease .06s, transform .34s cubic-bezier(0.2,0.7,0.3,1) .06s;
}
.e1-lb.open .e1-lb-rail { opacity: 1; transform: none; }

/* 여섯 개면 가운데 모이고, 늘어나면 가로로 넘긴다 */
.e1-lb-track {
	display: flex;
	gap: 14px;
	margin: 0 auto;
	padding: 6px 4px;
	max-width: 100%;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}
.e1-lb-track::-webkit-scrollbar { display: none; }

.e1-lb-thumb {
	flex: 0 0 auto;
	width: 76px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	opacity: .46;
	transition: opacity .2s ease;
}
.e1-lb-thumb:hover { opacity: .82; }
.e1-lb-thumb.is-on { opacity: 1; }

.e1-lb-thumb-img {
	display: block;
	width: 76px;
	/* ⚠ 목록 카드(.e1-grid .wf-img)와 팝업 큰 사진이 모두 3:4 세로다.
	   여기만 4:3 가로였다 — 같은 사진인데 띠에서만 가로로 잘려 다른 물건처럼 보였다.
	   비율을 맞춘다(2026-08-25 지시). */
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border-radius: 6px;
	background: #2E2E2E;
	box-shadow: 0 0 0 1px transparent;
	transition: box-shadow .2s ease;
}
.e1-lb-thumb.is-on .e1-lb-thumb-img { box-shadow: 0 0 0 1px #fff; }
.e1-lb-thumb-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.e1-lb-thumb-name {
	font-family: 'Noto Sans', 'Noto Sans KR', sans-serif;
	font-size: 10.5px;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: -0.02em;
	color: rgba(255,255,255,0.72);
	text-align: center;
	/* 이름이 길어도 띠 높이가 흔들리지 않게 두 줄에서 자른다 */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.e1-lb-thumb.is-on .e1-lb-thumb-name { color: #fff; }

@media (prefers-reduced-motion: reduce) {
	.e1-lb-rail { transition: none; }
	.e1-lb-track { scroll-behavior: auto; }
}

@media (max-width: 767px) {
	.e1-lb { --rail: 128px; }   /* 62×83 + 간격 + 이름 두 줄 */
	.e1-lb-rail { padding: 0 12px; }
	.e1-lb-track { gap: 10px; }
	.e1-lb-thumb, .e1-lb-thumb-img { width: 62px; }
	.e1-lb-thumb-name { font-size: 9.5px; }
}