/* ============================================================
   works.css · 표본 분석실 (works.html)
   ============================================================ */

.lab-header {
  padding: 130px 24px 30px; text-align: center; max-width: 900px; margin: 0 auto;
}
.lab-header .eyebrow { display: block; margin-bottom: 16px; }
.lab-header h1 {
  font-family: var(--f-display); font-weight: 300;
  font-size: clamp(30px, 6vw, 56px); letter-spacing: .24em; color: var(--c-ice);
  text-shadow: 0 0 30px rgba(58,134,255,.25);
}
.lab-header .h1-ko { font-family: var(--f-ko); font-weight: 600; font-size: clamp(18px, 3vw, 26px); letter-spacing: .12em; color: var(--c-helix-cyan); margin-top: 10px; }
.lab-header .lab-meta { margin-top: 18px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; color: var(--c-ice-faint); }
.lab-codestrip { margin: 26px auto 0; max-width: 760px; }

.lab-help {
  text-align: center; margin: 6px auto 40px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; color: var(--c-ice-faint);
}

/* ── 캡슐 그리드 ── */
.specimen-grid {
  max-width: var(--max-w); margin: 0 auto; padding: 0 24px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px;
}
.specimen { display: block; transition: transform var(--t-med); }
.specimen:hover { transform: translateY(-6px); }

.specimen-cap {
  position: relative; height: 150px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  transition: box-shadow var(--t-med), border-color var(--t-med);
}
.specimen:hover .specimen-cap {
  border-color: rgba(107,213,255,.55);
  box-shadow: inset 0 1px 0 rgba(220,240,255,.2), 0 16px 50px rgba(0,0,0,.6), 0 0 50px rgba(58,134,255,.18);
}
.specimen-helix { position: absolute; inset: 0; padding: 0 18%; display: flex; align-items: center; opacity: .8; }
.specimen-helix .helix { --helix-h: 90px; }
.specimen-glyph { position: relative; z-index: 2; }
.specimen-glyph .glyph { width: 40px; height: 40px; stroke: var(--c-ice); filter: drop-shadow(0 0 10px rgba(107,213,255,.5)); }
.specimen-glyph .glyph.fill { fill: var(--c-ice); }
.specimen[data-status="pending"] .specimen-glyph .glyph { opacity: .5; }

.specimen-label { margin-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.specimen-code { font-family: var(--f-mono); font-size: 12px; letter-spacing: .14em; color: var(--c-helix-cyan); }

.specimen-status {
  font-family: var(--f-mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; border: 1px solid currentColor;
}
.specimen-status.pending { color: var(--c-ice-faint); }
.specimen-status.ready { color: var(--c-signal-g); }

.specimen-title { margin-top: 10px; font-family: var(--f-ko); font-weight: 600; font-size: 17px; letter-spacing: .02em; color: var(--c-ice); }
.specimen-form { margin-top: 4px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em; color: var(--c-ice-faint); }

/* ── 인덱스 목록 ── */
.index-strip { max-width: 980px; margin: 70px auto 0; padding: 0 24px; }
.index-title {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--c-helix-cyan); padding-bottom: 12px; border-bottom: 1px solid var(--c-line); margin-bottom: 6px;
}
#specimen-index a {
  display: grid; grid-template-columns: 130px 1fr auto 24px; gap: 18px; align-items: center;
  padding: 16px 6px; border-bottom: 1px solid var(--c-line); transition: background var(--t-fast);
}
#specimen-index a:hover { background: rgba(58,134,255,.06); }
#specimen-index .num { font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; color: var(--c-helix-cyan); }
#specimen-index .ttl { font-family: var(--f-ko); font-size: 16px; color: var(--c-ice); }
#specimen-index .form { font-family: var(--f-mono); font-size: 11px; color: var(--c-ice-faint); }
#specimen-index .arrow { color: var(--c-ice-faint); text-align: right; }
#specimen-index a:hover .arrow { color: var(--c-helix-cyan); }

@media (max-width: 860px) { .specimen-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .specimen-grid { grid-template-columns: 1fr; }
  #specimen-index a { grid-template-columns: 1fr auto; row-gap: 4px; }
  #specimen-index .form { grid-column: 1 / -1; }
}