@charset "utf-8";

/* ============================================================
   장비인프라 › 위험물 인허가 — 이 페이지에만 있는 것
   시안: Figma 3gC6DdCllqkGj4ATOQ8mMI  node 2048:1715

   페이지 틀 · 섹션 제목 · 통계 카드 · 설명 패널(.infra-panel) 은
   다른 인프라 페이지와 똑같아서 /css/page-infra.css 로 뺐다.
   여기에는 이 페이지에만 있는 '인허가 증빙' 그리드를 둔다.

   불러오는 차례
     <link rel="stylesheet" href="../css/page-infra.css">
     <link rel="stylesheet" href="../css/lightbox.css">
     <link rel="stylesheet" href="../css/page-license.css">
   ============================================================ */

/* 위험물 인허가도 탭 바로 아래가 통계 카드다 (생산설비의 인트로 덩어리가 없다) */


/* ==================== 인허가 증빙 ====================
   시안 2048:1738 — 320 넓이 카드 넉 장.
   회색 박스(320×285)가 아래에 깔리고 허가증(250×355)이 그 위로 170 올라온다.
   허가증 비율 250:355 는 A4 세로(1:1.414) 와 거의 같다 */
.lic-permits {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(40 * var(--u));
  margin-top: calc(62 * var(--u));   /* 시안 제목(2949) → 카드(3011) */
}

.lic-permit {
  position: relative;
  display: block;
  width: 100%;
  padding: 0 0 calc(38 * var(--u));  /* 자막(3428) 아래로 남는 자리 */
  border: 0;
  background: none;
  font: inherit;
  text-align: center;
  cursor: pointer;
  transition: transform .35s cubic-bezier(.22, .61, .36, 1);
}

/* 뒤에 깔리는 회색 판 (시안 Rectangle 117) */
.lic-permit__box {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(285 * var(--u));
  border-radius: calc(15 * var(--u));
  background: var(--card-bg-soft);   /* 시안 #f7f7f7 — style.css 와 같은 값 */
  transition: box-shadow .35s ease, background-color .35s ease;
}

/* 허가증 사진. 사진이 없어도 자리는 비율대로 남는다 */
.lic-permit__shot {
  position: relative;
  z-index: 1;
  display: block;                    /* span 이라 블록으로 세워야 크기가 잡힌다 */
  width: calc(250 * var(--u));       /* 카드 320 안에서 좌우 35 씩 */
  margin: 0 auto;
  aspect-ratio: 250 / 355;           /* 시안 그대로 — A4 세로와 거의 같다 */
  border-radius: calc(8 * var(--u));
  overflow: hidden;
  background: #dfe3e8;
  box-shadow: 0 calc(10 * var(--u)) calc(26 * var(--u)) rgba(0, 0, 0, .12);
  transition: box-shadow .35s ease;
}
.lic-permit__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;            /* 허가증은 위쪽(제목·번호)이 중요하다 */
}

/* 사진이 없을 때 세우는 '게재 예정' 표찰 — js 가 img 를 걷어 낸 뒤 넣는다 */
.lic-permit__pending {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(10 * var(--u));
  padding: calc(20 * var(--u));
  background:
    repeating-linear-gradient(135deg, rgba(0, 0, 0, .025) 0 calc(6 * var(--u)), transparent calc(6 * var(--u)) calc(12 * var(--u))),
    #eef1f5;
  color: #7c8794;
  text-align: center;
}
.lic-permit__pending svg {
  width: calc(56 * var(--u));
  height: calc(56 * var(--u));
  margin-bottom: calc(6 * var(--u));
  color: #a5aeb8;
}
.lic-permit__pending b {
  display: inline-block;
  padding: calc(5 * var(--u)) calc(14 * var(--u));
  border-radius: 999px;
  border: 1px solid rgba(19, 90, 156, .35);
  font-weight: 600;
  font-size: max(calc(15 * var(--u)), 12px);
  letter-spacing: -.02em;
  color: var(--infra-point);
  background: #fff;
}
.lic-permit__pending i {
  font-style: normal;
  font-size: max(calc(14 * var(--u)), 11px);
  line-height: 1.4;
  letter-spacing: -.02em;
  word-break: keep-all;
}
.lic-permit:disabled { cursor: default; }
.lic-permit:disabled:hover { transform: none; }
.lic-permit:disabled:hover .lic-permit__box { box-shadow: none; background: var(--card-bg-soft); }
.lic-permit:disabled:hover .lic-permit__caption { color: var(--ink-mid); }

/* 우측 위 확대 표시 */
.lic-permit__zoom {
  position: absolute;
  top: calc(12 * var(--u));
  right: calc(12 * var(--u));
  z-index: 2;
  width: calc(38 * var(--u));
  height: calc(38 * var(--u));
  border-radius: 50%;
  background: rgba(0, 0, 0, .45);
  opacity: 0;
  transform: scale(.85);
  transition: opacity .3s ease, transform .3s ease;
}
/* 돋보기 — 동그라미 하나에 손잡이 하나 */
.lic-permit__zoom::before {
  content: "";
  position: absolute;
  left: calc(10 * var(--u));
  top: calc(10 * var(--u));
  width: calc(13 * var(--u));
  height: calc(13 * var(--u));
  border: calc(2 * var(--u)) solid #fff;
  border-radius: 50%;
}
.lic-permit__zoom::after {
  content: "";
  position: absolute;
  right: calc(9 * var(--u));
  bottom: calc(9 * var(--u));
  width: calc(8 * var(--u));
  height: calc(2 * var(--u));
  background: #fff;
  transform: rotate(45deg);
  transform-origin: right center;
}

.lic-permit__caption {
  position: relative;
  z-index: 1;
  display: block;                    /* span 이라 블록으로 세워야 여백이 먹는다 */
  margin: calc(31 * var(--u)) 0 0;   /* 시안 사진 아래(3366) → 자막(3397) */
  font-weight: 500;
  font-size: max(calc(23 * var(--u)), 14px);
  line-height: 1.35;
  letter-spacing: -.03em;
  color: var(--ink-mid);
  word-break: keep-all;
  transition: color .35s ease;
}

/* ---------- 짚었을 때 ---------- */
/* 선택자가 길다 — 리빌이 끝나면 .js [data-reveal].is-in 이 transform: none 을 거는데
   그 규칙이 :hover 보다 특이도가 높아, 짧게 쓰면 들어올림이 먹지 않는다 */
.lic-permit:hover,
.lic-permit:focus-visible,
.js .lic-permit[data-reveal].is-in:hover,
.js .lic-permit[data-reveal].is-in:focus-visible { transform: translateY(calc(-6 * var(--u))); }
.lic-permit:hover .lic-permit__box,
.lic-permit:focus-visible .lic-permit__box {
  background: var(--color-white);
  box-shadow: 0 calc(18 * var(--u)) calc(40 * var(--u)) rgba(19, 90, 156, .16);
}
.lic-permit:hover .lic-permit__shot,
.lic-permit:focus-visible .lic-permit__shot {
  box-shadow: 0 calc(18 * var(--u)) calc(38 * var(--u)) rgba(0, 0, 0, .22);
}
.lic-permit:hover .lic-permit__zoom,
.lic-permit:focus-visible .lic-permit__zoom { opacity: 1; transform: none; }
.lic-permit:hover .lic-permit__caption,
.lic-permit:focus-visible .lic-permit__caption { color: var(--infra-point); }
.lic-permit:focus-visible {
  outline: 2px solid var(--infra-point);
  outline-offset: calc(6 * var(--u));
}

/* ---------- 순차 등장 ---------- */
.js .lic-permit[data-reveal] { transition-delay: calc(var(--d, 0) * .1s); }

/* ==================== 좁은 화면 (≤768) ==================== */
@media (max-width: 768px) {

  .lic-permits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(14 * var(--u)) calc(12 * var(--u));
    margin-top: var(--sp-head);
  }
  .lic-permit { padding-bottom: calc(16 * var(--u)); }
  .lic-permit__box { height: calc(120 * var(--u)); border-radius: calc(10 * var(--u)); }
  .lic-permit__shot { width: calc(120 * var(--u)); border-radius: calc(6 * var(--u)); }
  .lic-permit__caption {
    margin-top: calc(12 * var(--u));
    font-size: max(calc(13 * var(--u)), 12px);
  }
  /* 손가락에는 마우스오버가 없다. 확대 표시를 늘 보이게 두고 들썩임은 끈다 */
  .lic-permit__zoom {
    top: calc(6 * var(--u));
    right: calc(6 * var(--u));
    width: calc(26 * var(--u));
    height: calc(26 * var(--u));
    opacity: 1;
    transform: none;
  }
  .lic-permit__zoom::before {
    left: calc(7 * var(--u));
    top: calc(7 * var(--u));
    width: calc(9 * var(--u));
    height: calc(9 * var(--u));
    border-width: calc(1.5 * var(--u));
  }
  .lic-permit__zoom::after {
    right: calc(6 * var(--u));
    bottom: calc(6 * var(--u));
    width: calc(6 * var(--u));
    height: calc(1.5 * var(--u));
  }
  .lic-permit:hover,
  .lic-permit:focus-visible { transform: none; }
  .lic-permit:hover .lic-permit__box {
    background: var(--card-bg-soft);
    box-shadow: none;
  }
  .lic-permit:hover .lic-permit__caption { color: var(--ink-mid); }
}

/* ==================== 모션 최소화 ==================== */
@media (prefers-reduced-motion: reduce) {
  .lic-permit,
  .lic-permit__box,
  .lic-permit__shot,
  .lic-permit__zoom,
  .lic-permit__caption { transition: none; }
  .lic-permit:hover,
  .lic-permit:focus-visible { transform: none; }
  .lic-permit__zoom { opacity: 1; transform: none; }
}