/* =========================================================
   pages/factory.css — 공장 & 네트워크(Factory & Network) 전용
   ⚠ page-factory.php 담당. 다른 페이지 클래스 정의 금지.
   Figma node 170-1029 기준.
   ========================================================= */

/* ---------- 원료 수급 / 지도 ---------- */
.fac-map-wrap { margin-top: 60px; display: flex; gap: 64px; align-items: flex-start; }
.fac-map { flex: 0 0 42%; max-width: 660px; }
.fac-map img { width: 100%; height: auto; }

.fac-info { flex: 1; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.fac-box {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 30px 32px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .02);
}
.fac-box h3 {
  font-family: var(--font-body);
  font-size: 26px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.65px;
  margin-bottom: 18px;
}

/* 생산공장 = 채운 초록 알약 */
.fac-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.pill-green {
  background: var(--green);
  color: #fff;
  border-radius: 100px;
  padding: 10px 20px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.5px;
  line-height: 1;
  transition: background-color .25s var(--e-out), transform .25s var(--e-out);
}
.pill-green:hover { background: var(--green-dark); transform: translateY(-1px); }

/* 원료 수급처 = 도(道)별 그룹 + 외곽선 알약 */
.sup-group { margin-bottom: 20px; }
.sup-group:last-child { margin-bottom: 0; }
.sup-group .prov {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.5px;
  color: var(--ink);
  margin-bottom: 11px;
}
.sup-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill-line {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 8px 16px;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -.5px;
  line-height: 1;
  color: var(--gray);
  transition: border-color .25s var(--e-out), color .25s ease, transform .25s var(--e-out);
}
.pill-line:hover { border-color: var(--green); color: var(--green); transform: translateY(-1px); }

/* ---------- 생산시설 및 설비 ---------- */
.eq-group { margin-top: 48px; }
.eq-group:first-of-type { margin-top: 44px; }
.eq-group h4 {
  font-family: var(--font-body);
  font-size: 40px;
  font-weight: 500;
  letter-spacing: -1px;
  color: var(--ink);
  margin-bottom: 24px;
}
.eq-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 24px; }
.eq-grid.cols2 { grid-template-columns: repeat(2, 1fr); max-width: 880px; }
.eq-item { overflow: hidden; }
.eq-item img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: #eee;
  border-radius: 2px;
  transition: transform .5s var(--e-out);
}
.eq-item:hover img { transform: scale(1.04); }
.eq-cap { margin-top: 16px; font-size: 26px; font-weight: 500; letter-spacing: -.65px; color: var(--ink); }
.eq-group > .eq-cap { margin-top: 16px; }

/* ---------- 반응형 ---------- */
@media (max-width: 1024px) {
  .fac-map-wrap { flex-direction: column; gap: 40px; align-items: stretch; }
  .fac-map { flex: none; max-width: 480px; margin: 0 auto; width: 100%; }
  .eq-grid { grid-template-columns: repeat(2, 1fr); }
  .eq-group h4 { font-size: 32px; }
  .eq-cap { font-size: 22px; }
}
@media (max-width: 768px) {
  .fac-map-wrap { margin-top: 40px; gap: 28px; }
  .fac-map { max-width: 420px; }
  .fac-map img { width: 100%; height: auto; }
  .fac-info { gap: 16px; }
  .fac-box { padding: 24px 22px; }
  .fac-box h3 { font-size: 22px; margin-bottom: 15px; }
  .fac-pills { gap: 8px; }
  .pill-green { padding: 9px 18px; font-size: 17px; }
  .pill-line { font-size: 16px; }
  .sup-group { margin-bottom: 18px; }
  .sup-group .prov { font-size: 17px; margin-bottom: 10px; }
  .eq-group { margin-top: 40px; }
  .eq-group:first-of-type { margin-top: 36px; }
  .eq-group h4 { font-size: 26px; margin-bottom: 16px; }
  .eq-grid { gap: 22px 16px; }
  .eq-cap { font-size: 17px; }
}
@media (max-width: 480px) {
  .fac-map-wrap { margin-top: 32px; gap: 24px; }
  .fac-map { max-width: 100%; }
  .fac-map img, .eq-item img { max-width: 100%; }
  .fac-info { gap: 14px; }
  .fac-box { padding: 20px 18px; border-radius: 14px; }
  .fac-box h3 { font-size: 20px; margin-bottom: 14px; }
  /* 알약: 줄바꿈 자연스럽게 + 탭 영역 확보 */
  .fac-pills { gap: 8px; }
  .pill-green { padding: 10px 16px; font-size: 16px; }
  .sup-pills { gap: 7px; }
  .pill-line { padding: 8px 14px; font-size: 15px; }
  .sup-group { margin-bottom: 16px; }
  /* 설비 그리드: 본사(2장)는 1열, 기계설비(6장)는 2열 유지 */
  .eq-grid.cols2 { grid-template-columns: 1fr; }
  .eq-grid { gap: 18px 12px; }
  .eq-group h4 { font-size: 22px; margin-bottom: 14px; }
  .eq-cap { font-size: 15px; margin-top: 10px; }
  .eq-group > .eq-cap { margin-top: 12px; }
}