/* ==========================================================================
   /library/ 포소화약제 상세페이지 전용 컴포넌트
   페이지마다 다른 콘셉트를 쓰므로, 여기에는 "여러 페이지가 공유하는" 조각만 쌓는다.
   페이지 한 곳에서만 쓰는 디자인은 각 페이지의 <style> 블록에 둔다.
   ========================================================================== */

/* ---------- 관련 페이지 링크 (모든 페이지 공통) ---------- */
.lib-related { margin: 24px 0 0; }
.lib-related-links { display: grid; gap: 10px; }
@media (min-width: 640px) { .lib-related-links { grid-template-columns: repeat(2, 1fr); } }
.lib-related-links a {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  background: #fff;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 15px;
  border: 1px solid var(--bg-sub);
}
.lib-related-links a .arrow { color: var(--accent); flex-shrink: 0; }

/* ---------- PAGE 01: 소방약제 백과사전 ---------- */
.enc-index { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; }
.enc-index a {
  font-size: 13px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--bg-sub);
  color: var(--accent);
}
.enc-grid { display: grid; gap: 20px; margin: 24px 0; }
@media (min-width: 640px) { .enc-grid { grid-template-columns: repeat(2, 1fr); } }
.enc-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 24px;
  border-left: 4px solid var(--accent);
}
.enc-card .enc-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 12px;
}
.enc-card .icon { width: 26px; height: 26px; color: var(--accent); margin: 0 0 10px; }
.enc-card h3 { margin-bottom: 8px; }
.enc-card p { font-size: 15px; margin-bottom: 0; }

/* 종류 비교표: 사전 색인처럼 */
.enc-table-wrap { overflow-x: auto; margin: 24px 0; border-radius: var(--radius); border: 1px solid var(--bg-sub); }
table.enc-table { width: 100%; border-collapse: collapse; min-width: 560px; background: #fff; }
table.enc-table th, table.enc-table td { text-align: left; padding: 14px 16px; font-size: 14px; border-bottom: 1px solid var(--bg-sub); }
table.enc-table thead th { background: var(--accent); color: #fff; font-weight: 700; }
table.enc-table tbody tr:last-child td { border-bottom: none; }
table.enc-table tbody tr:nth-child(even) { background: var(--bg); }

/* ---------- PAGE 02: 실험실 / Chemical Research ---------- */
.lab-hero {
  padding-top: calc(var(--header-h) + 40px);
  padding-bottom: 48px;
  background: #10171a;
  color: #fff;
}
.lab-hero .kicker { color: #6fd3c7; }
.lab-hero h1 { color: #fff; }
.lab-hero .lead { color: #cfe3e0; max-width: 42em; }
.lab-section-dark { background: #10171a; color: #fff; padding: var(--section-gap) 0; }
.lab-section-dark h2 { color: #fff; }
.lab-section-dark p { color: #cfe3e0; }

.lab-diagram {
  background: #16211f;
  border: 1px solid #253634;
  border-radius: var(--radius);
  padding: 28px 20px;
  margin: 24px 0;
}
.lab-diagram svg { width: 100%; height: auto; display: block; }
.lab-diagram figcaption { margin-top: 12px; font-size: 13px; color: #8fb3ad; text-align: center; }

.lab-steps { display: grid; gap: 14px; margin: 24px 0; }
@media (min-width: 640px) { .lab-steps { grid-template-columns: repeat(3, 1fr); } }
.lab-steps .step {
  background: #16211f;
  border: 1px solid #253634;
  border-radius: var(--radius);
  padding: 20px;
}
.lab-steps .step .n { color: #6fd3c7; font-weight: 800; font-size: 13px; letter-spacing: .08em; }
.lab-steps .step h3 { color: #fff; margin: 8px 0; }
.lab-steps .step p { color: #b9d2ce; font-size: 14px; margin-bottom: 0; }

.lab-photo-panel {
  display: grid;
  gap: 20px;
  margin: 24px 0;
  align-items: center;
}
@media (min-width: 768px) { .lab-photo-panel { grid-template-columns: 1fr 1fr; } }
.lab-photo-panel img { border-radius: var(--radius); width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; }
.lab-photo-panel .note { font-size: 13px; color: #8fb3ad; margin-top: 8px; }

.lab-body { background: var(--bg); padding: var(--section-gap) 0; }

/* ==========================================================================
   PAGE 03~20 공용 컴포넌트 — 페이지마다 --lib-accent 를 다르게 override 하고
   컴포넌트를 다르게 조합해서 서로 다른 느낌을 만든다. (페이지 전용 CSS는 각 파일 <style>에)
   ========================================================================== */
:root { --lib-accent: var(--accent); }

/* ---------- Flow steps (공정/시뮬레이션/단계 카드) ---------- */
.flow-steps { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0; margin: 24px 0; }
.flow-steps .fstep {
  flex: 1 1 200px;
  background: #fff;
  border: 1px solid var(--bg-sub);
  border-top: 4px solid var(--lib-accent);
  border-radius: var(--radius);
  padding: 20px;
}
.flow-steps .fstep .n { color: var(--lib-accent); font-weight: 800; font-size: 13px; letter-spacing: .08em; }
.flow-steps .fstep h3 { margin: 8px 0; }
.flow-steps .fstep p { font-size: 14px; margin-bottom: 0; color: var(--text); }
.flow-arrow {
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto; width: 100%; color: var(--lib-accent); font-size: 20px; font-weight: 700; padding: 4px 0;
}
@media (min-width: 768px) { .flow-arrow { width: 32px; } }

/* ---------- Timeline (Before → Inspection → After 등) ---------- */
.timeline { position: relative; margin: 32px 0; padding-left: 28px; border-left: 2px solid var(--bg-sub); }
.timeline .tl-item { position: relative; padding-bottom: 28px; }
.timeline .tl-item:last-child { padding-bottom: 0; }
.timeline .tl-item::before {
  content: ''; position: absolute; left: -33px; top: 4px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--lib-accent); border: 3px solid #fff; box-shadow: 0 0 0 1px var(--lib-accent);
}
.timeline .tl-item .tl-label { color: var(--lib-accent); font-weight: 800; font-size: 13px; letter-spacing: .06em; }
.timeline .tl-item h3 { margin: 6px 0; }
.timeline .tl-item p { font-size: 15px; margin-bottom: 0; }

/* ---------- Checklist ---------- */
.checklist { display: grid; gap: 10px; margin: 24px 0; }
.checklist .cl-item {
  display: flex; align-items: flex-start; gap: 12px;
  background: #fff; border-radius: var(--radius); padding: 16px 18px; border: 1px solid var(--bg-sub);
}
.checklist .cl-item svg { flex-shrink: 0; width: 22px; height: 22px; color: var(--lib-accent); margin-top: 1px; }
.checklist .cl-item p { margin: 0; font-size: 15px; }
.checklist.cl-warn .cl-item svg { color: var(--accent-sub); }

/* ---------- 비교표 (vs) ---------- */
.vs-table-wrap { overflow-x: auto; margin: 24px 0; border-radius: var(--radius); border: 1px solid var(--bg-sub); }
table.vs-table { width: 100%; border-collapse: collapse; min-width: 520px; background: #fff; }
table.vs-table th, table.vs-table td { text-align: left; padding: 14px 16px; font-size: 14px; border-bottom: 1px solid var(--bg-sub); }
table.vs-table thead th { background: var(--lib-accent); color: #fff; font-weight: 700; text-align: center; }
table.vs-table td:first-child, table.vs-table th:first-child { font-weight: 700; background: var(--bg); width: 30%; }
table.vs-table td:not(:first-child) { text-align: center; }
table.vs-table tbody tr:last-child td { border-bottom: none; }

/* ---------- 인증서 / 시험성적서 카드 ---------- */
.cert-card {
  background: #fff;
  border: 2px dashed var(--lib-accent);
  border-radius: var(--radius);
  padding: 28px 24px;
  margin: 24px 0;
  position: relative;
}
.cert-card .cert-badge {
  position: absolute; top: 18px; right: 18px;
  border: 2px solid var(--lib-accent); color: var(--lib-accent);
  border-radius: 50%; width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; text-align: center; line-height: 1.2; transform: rotate(8deg);
}
.cert-card dl { display: grid; grid-template-columns: 100px 1fr; gap: 10px 16px; margin: 0; }
.cert-card dt { font-weight: 700; color: var(--lib-accent); font-size: 14px; }
.cert-card dd { margin: 0; font-size: 14px; }

/* ---------- 아카이브(문서 보관함) 스타일 ---------- */
.archive-block { background: #f3ece0; border: 1px solid #ddd0b8; border-radius: var(--radius); padding: 24px; margin: 24px 0; }
.archive-block h3 { color: #6b4423; margin-bottom: 8px; }
.archive-block p { color: #4a3a28; margin-bottom: 0; font-size: 15px; }
.archive-row { display: grid; gap: 16px; margin: 24px 0; align-items: center; }
@media (min-width: 768px) { .archive-row { grid-template-columns: 1fr 1fr; } }
.archive-row img { border-radius: 4px; filter: sepia(.15); width: 100%; aspect-ratio: 4/3; object-fit: cover; }

/* ---------- 안전 매뉴얼 스타일 ---------- */
.manual-card {
  background: #fff; border-radius: var(--radius); padding: 20px;
  border-left: 6px solid #f5a623; display: flex; gap: 14px;
}
.manual-card svg { flex-shrink: 0; width: 28px; height: 28px; color: #f5a623; }
.manual-card h3 { margin-bottom: 6px; }
.manual-card p { font-size: 14px; margin-bottom: 0; }
.manual-grid { display: grid; gap: 14px; margin: 24px 0; }
@media (min-width: 640px) { .manual-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- 미니멀 브랜드 히어로 ---------- */
.minimal-hero { padding: calc(var(--header-h) + 64px) 0 40px; background: #fff; text-align: center; }
.minimal-hero .kicker { display: block; text-align: center; }
.minimal-hero h1 { font-size: 44px; letter-spacing: -.02em; }
@media (min-width: 1024px) { .minimal-hero h1 { font-size: 76px; } }
.minimal-hero .lead { max-width: 34em; margin: 16px auto 0; text-align: center; }

/* ---------- 다이어그램 패널 (밝은 배경, 다크 lab-diagram의 라이트 버전) ---------- */
.diagram-panel { background: #fff; border: 1px solid var(--bg-sub); border-radius: var(--radius); padding: 24px 18px; margin: 24px 0; }
.diagram-panel svg { width: 100%; height: auto; display: block; }
.diagram-panel figcaption { margin-top: 12px; font-size: 13px; color: var(--text); opacity: .7; text-align: center; }

/* ---------- 스마트팩토리 대시보드 ---------- */
.dash-panel { background: #0c1420; border-radius: var(--radius); padding: 24px; margin: 24px 0; color: #dce8f5; }
.dash-grid { display: grid; gap: 14px; }
@media (min-width: 640px) { .dash-grid { grid-template-columns: repeat(3, 1fr); } }
.dash-card { background: #142235; border: 1px solid #223550; border-radius: 10px; padding: 16px; }
.dash-card .dash-label { font-size: 12px; letter-spacing: .08em; color: #6fa8dc; font-weight: 700; }
.dash-card .dash-value { font-size: 26px; font-weight: 800; margin: 6px 0; color: #fff; }
.dash-card .dash-note { font-size: 12px; color: #8ea6c2; }
.dash-card .dash-bar { height: 6px; border-radius: 3px; background: #223550; overflow: hidden; margin-top: 8px; }
.dash-card .dash-bar > span { display: block; height: 100%; background: #6fa8dc; }