@charset "utf-8";

/* ============================================================
   탭 + 표 (공용)
   시안: Figma 3gC6DdCllqkGj4ATOQ8mMI  node 2048:2531 (생산설비 › 공장별 반응기 현황)

   생산설비 말고 연구설비·분석 시험장비에서도 그대로 쓴다.
   마크업은 /js/tab-table.js 가 만든다. 이 파일은 모양만 맡는다.

     <div class="tab-table" data-tab-table></div>
     TabTable.mount(el, { name:'…', tabs:[ {id,label,columns,rows,…} ] });

   시안에서 가져온 값
     탭 트랙   #ececec 2   (style.css --line-track 과 같다)
     탭 표시   #222    3
     머리 띠   #f4f4f4 높이 83 라운드 15
     행 구분   #ebebeb 1   (행 높이 86)
     표 아래   #9f9f9f 1
   ============================================================ */

.tab-table {
  --tt-point: #135a9c;
  --tt-ink:   #222;
  --tt-head:  #f4f4f4;
  --tt-rule:  #ebebeb;
  --tt-edge:  #9f9f9f;
  --tt-hover: #fafafa;

  --tt-row-h:  86;
  --tt-head-h: 83;
}
/* 섹션 제목 → 탭 줄 (시안 2048:2531). 예전에는 페이지마다 인라인 style 로 48 을 넣었는데,
   모바일에서 간격 토큰(--sp-head)으로 바꾸려면 CSS 에 있어야 해서 여기로 모았다 */
.infra-sec__head + .tab-table { margin-top: calc(48 * var(--u)); }

/* ==================== 탭 ==================== */
.tab-table__nav {
  position: relative;
  display: flex;
  border-bottom: calc(2 * var(--u)) solid var(--line-track);
}

.tab-table__tab {
  position: relative;
  flex: none;
  min-width: calc(151 * var(--u));      /* 시안 탭 폭 */
  padding: 0 calc(39 * var(--u)) calc(20 * var(--u));
  border: 0;
  background: none;
  font-family: inherit;
  font-weight: 400;
  font-size: max(calc(30 * var(--u)), 15px);
  line-height: 1.36;
  letter-spacing: -.02em;
  color: var(--gray);
  white-space: nowrap;
  cursor: pointer;
  transition: color .25s ease;
}
.tab-table__tab:hover { color: var(--ink-mid); }
/* 짚으면 표시 막대가 옮겨 올 자리를 옅게 미리 보여 준다 */
.tab-table__tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(-2 * var(--u));
  height: calc(3 * var(--u));
  background: rgba(34, 34, 34, .22);
  transform: scaleX(0);
  transition: transform .3s cubic-bezier(.22, .61, .36, 1);
  pointer-events: none;
}
.tab-table__tab:hover::after { transform: scaleX(1); }
/* 이미 고른 탭에는 진짜 막대가 있다 */
.tab-table__tab[aria-selected="true"]::after { content: none; }
.tab-table__tab[aria-selected="true"] {
  font-weight: 800;
  color: var(--tt-ink);
}
.tab-table__tab:focus-visible {
  outline: 2px solid var(--tt-point);
  outline-offset: -4px;
}

/* 아래에서 탭 사이를 미끄러져 옮겨 다니는 막대 (시안 Line 45) */
.tab-table__ind {
  position: absolute;
  left: 0;
  bottom: calc(-2 * var(--u));
  width: 0;
  height: calc(3 * var(--u));
  background: var(--tt-ink);
  transform: translateX(0);
  transition: transform .35s cubic-bezier(.22, .61, .36, 1),
              width .35s cubic-bezier(.22, .61, .36, 1);
  pointer-events: none;
}
/* 처음 그려질 때는 미끄러지지 않는다 — 왼쪽 끝에서 날아오는 것처럼 보인다 */
.tab-table__ind.is-idle { transition: none; }

/* ==================== 패널 ====================
   패널을 모두 같은 격자 칸에 겹쳐 둔다.
   그러면 칸 높이가 가장 큰 표에 맞춰지므로,
   공장을 바꿔도 아래 내용이 위아래로 튀지 않는다.
   숨긴 패널은 visibility 로 접근성 트리에서도 빠진다 */
.tab-table__panels {
  display: grid;
  margin-top: calc(30 * var(--u));
}
/* 탭이 없으면 위에 띄울 것도 없다 (연구설비 '장비 상세') */
.tab-table--plain .tab-table__panels { margin-top: 0; }
.tab-table__panel {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
/* 안 보이는 패널은 자리도 차지하지 않는다.
   예전에는 visibility 만 감춰서 표 높이가 가장 긴 탭에 묶였고, 짧은 탭을 열면
   (분석장비 '원소/미량' 2줄 ↔ '물성/수분' 6줄) 아래에 빈 공간이 남았다 */
.tab-table__panel[data-state="hidden"] {
  display: none;
}

/* 나가는 패널 0.2s 페이드아웃 → 들어오는 패널 0.3s 페이드인 + 아래에서 10px */
.js .tab-table__panel { opacity: 1; transform: none; }
.js .tab-table__panel[data-state="out"] {
  opacity: 0;
  transition: opacity .2s ease-in;
}
.js .tab-table__panel[data-state="enter"] {
  opacity: 0;
  transform: translateY(10px);
}
.js .tab-table__panel[data-state="in"] {
  opacity: 1;
  transform: none;
  transition: opacity .3s ease-out, transform .3s ease-out;
}

/* 표 위 설명 (시안 2048:2574) */
.tab-table__lead {
  margin: 0 0 calc(30 * var(--u));
  font-weight: 300;
  font-size: max(calc(20 * var(--u)), 14px);
  line-height: 1.5;
  letter-spacing: -.03em;
  color: var(--ink-body);
  word-break: keep-all;
}

/* ==================== 표 ==================== */
.tab-table__scroller { position: relative; }
.tab-table__scroll { overflow-x: visible; }

.tab-table__table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.tab-table__caption {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- 머리 ---------- */
.tab-table__table thead th {
  height: calc(var(--tt-head-h) * var(--u));
  padding: calc(10 * var(--u)) calc(8 * var(--u));
  background: var(--tt-head);
  font-weight: 500;
  font-size: max(calc(25 * var(--u)), 13px);
  letter-spacing: -.02em;
  color: var(--tt-ink);
  text-align: center;
  vertical-align: middle;
}
.tab-table__table thead th:first-child {
  border-top-left-radius: calc(15 * var(--u));
  border-bottom-left-radius: calc(15 * var(--u));
}
.tab-table__table thead th:last-child {
  border-top-right-radius: calc(15 * var(--u));
  border-bottom-right-radius: calc(15 * var(--u));
}
/* 시안은 두 글자짜리 머리글만 자간을 벌려 네 글자 폭처럼 맞춰 놓았다.
   가운데 정렬이 어긋나지 않도록 뒤쪽 여백을 같은 만큼 빼 준다 */
.tab-table__head-label.is-spaced {
  letter-spacing: .35em;
  margin-right: -.35em;
}

/* ---------- 몸통 ---------- */
.tab-table__table tbody th,
.tab-table__table tbody td {
  height: calc(var(--tt-row-h) * var(--u));
  padding: calc(10 * var(--u)) calc(8 * var(--u));
  border-bottom: 1px solid var(--tt-rule);
  font-weight: 300;
  font-size: max(calc(20 * var(--u)), 13px);
  letter-spacing: -.02em;
  color: var(--ink-body);
  text-align: center;
  vertical-align: middle;
  word-break: keep-all;
}
/*
  묶인 첫 칸은 여러 행에 걸쳐 있다.
  그래서 칸 안쪽 행 사이에는 짧은 선(둘째 칸부터)만 그어지고,
  묶음이 끝나는 자리에서만 선이 표 전체 폭으로 이어진다 — 시안 그대로다.
*/
.tab-table__table tbody th { font-weight: 300; }

/* 표 맨 아래는 진한 선 (시안 Line 48) */
.tab-table__table tbody tr:last-child th,
.tab-table__table tbody tr:last-child td { border-bottom-color: var(--tt-edge); }
/* 머리글 줄이 없는 표(headless — ESG 인권 10대 원칙 등)는 위에도 같은 진한 선을 둔다.
   머리 띠가 위 경계를 만들어 주지 않아 표가 어디서 시작하는지 흐릿했다 (2026-09-14).
   제품 상세 규격 표는 자기 옷(pd-spec)이 따로 있어 그쪽에서 덮는다 */
.tab-table--headless .tab-table__table tbody tr:first-child th,
.tab-table--headless .tab-table__table tbody tr:first-child td { border-top: 1px solid var(--tt-edge); }
.pd-spec .tab-table__table tbody tr:first-child th,
.pd-spec .tab-table__table tbody tr:first-child td { border-top: 0; }

/* ---------- 왼쪽으로 붙이는 표 ----------
   특화기술 '대표 생산품' 처럼 칸 안 글자를 왼쪽에 붙이고 크게 들여쓰는 표가 있다.
   들여쓰기 값(--tt-indent)은 js/tab-table.js 가 config.indent 로 넣는다 */
.tab-table--left .tab-table__table thead th,
.tab-table--left .tab-table__table tbody th,
.tab-table--left .tab-table__table tbody td {
  text-align: left;
  padding-left: calc(var(--tt-indent, 8) * var(--u));
}

.tab-table__table tbody tr { transition: background-color .2s ease; }
.tab-table__table tbody th,
.tab-table__table tbody td { transition: color .2s ease, background-color .2s ease; }
/*
  짚으면 '묶음'이 한 덩어리로 밝아진다 (2026-09-14).
  병합된 첫 칸(rowspan)이 있는 표에서는 줄 하나만 밝히면 어디가 반응하는지 애매했다 →
  js/tab-table.js 가 같은 묶음의 줄 전부에 .is-group-hot, 묶음 칸에 .is-hot 을 붙인다.
  묶음 전체는 옅게, 지금 짚은 줄만 글자가 또렷해진다. 병합이 없는 표에서는 묶음 = 줄 하나라 전과 같다.
*/
.tab-table__table tbody tr.is-group-hot,
.tab-table__table tbody tr:hover { background: var(--tt-hover); }
.tab-table__table tbody tr:hover th,
.tab-table__table tbody tr:hover td { color: var(--tt-ink); }
.tab-table__table tbody th.is-hot {
  background: var(--tt-hover);
  font-weight: 500;
  color: var(--tt-ink);
}

/* 합계·비고 행 */
.tab-table__table tbody tr.is-total th,
.tab-table__table tbody tr.is-total td {
  background: #f8f8f8;
  font-weight: 700;
  color: var(--tt-ink);
}

/* ---------- 머리띠와 행이 차례로 등장 ----------
   패널이 켜질 때마다 다시 돈다 (첫 로드·탭 전환 모두).
   머리띠가 먼저 깔리고 그 아래로 줄이 하나씩 내려온다 */
.js .tab-table__panel[data-state="enter"] tbody tr,
.js .tab-table__panel[data-state="in"] tbody tr {
  --tt-stagger: .04s;
}
/* 머리띠는 opacity 만 쓴다 — table 요소는 transform 지원이 브라우저마다 다르다 */
.js .tab-table__panel[data-state="enter"] thead th { opacity: 0; }
.js .tab-table__panel[data-state="in"] thead th {
  opacity: 1;
  transition: opacity .3s ease-out;
}
.js .tab-table__panel[data-state="enter"] tbody tr {
  opacity: 0;
  transform: translateY(10px);
}
.js .tab-table__panel[data-state="in"] tbody tr {
  opacity: 1;
  transform: none;
  transition: opacity .32s ease-out, transform .32s ease-out;
  /* 머리띠(0.3s) 가 자리 잡는 동안 한 박자 두고 시작한다 */
  transition-delay: calc(.1s + var(--i, 0) * var(--tt-stagger));
}

/* ---------- 표 아래 주석 ---------- */
.tab-table__note {
  display: flex;
  gap: calc(8 * var(--u));
  margin: calc(27 * var(--u)) 0 0;
  font-weight: 300;
  font-size: max(calc(15 * var(--u)), 12px);
  line-height: 1.6;
  letter-spacing: -.05em;
  color: var(--ink-body);
  word-break: keep-all;
}
.tab-table__note::before { content: "*"; flex: none; }

/* ---------- 아직 자료가 없는 공장 ---------- */
.tab-table__empty {
  /* 칸 높이는 가장 큰 표에 맞춰져 있다.
     빈 안내가 그 한가운데 작은 상자로 떠 있으면 아래가 휑해 보이므로
     남은 자리를 그대로 채운다 */
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(300 * var(--u));
  padding: calc(40 * var(--u)) calc(20 * var(--u));
  border: 1px dashed var(--tt-rule);
  border-radius: calc(15 * var(--u));
  font-weight: 300;
  font-size: max(calc(20 * var(--u)), 14px);
  line-height: 1.6;
  letter-spacing: -.03em;
  color: var(--gray);
  text-align: center;
  word-break: keep-all;
}

/* ==================== 좁은 화면 ==================== */
@media (max-width: 768px) {
  .tab-table { --tt-row-h: 0; --tt-head-h: 0; }
  /* 섹션 제목 → 탭 줄 */
  .infra-sec__head + .tab-table { margin-top: var(--sp-head); }

  /* 탭이 세 개를 넘으면 가로로 밀어서 본다 */
  .tab-table__nav {
    overflow-x: auto;
    scrollbar-width: none;
  }
  .tab-table__nav::-webkit-scrollbar { display: none; }
  .tab-table__tab {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 calc(10 * var(--u)) calc(12 * var(--u));
    font-size: max(calc(15 * var(--u)), 14px);
  }
  /* 셋까지는 화면을 삼등분해 꽉 채운다 */
  .tab-table__nav[data-tabs="1"] .tab-table__tab,
  .tab-table__nav[data-tabs="2"] .tab-table__tab,
  .tab-table__nav[data-tabs="3"] .tab-table__tab { flex-basis: 0; }
  .tab-table__nav[data-tabs="4"] .tab-table__tab,
  .tab-table__nav[data-tabs="5"] .tab-table__tab,
  .tab-table__nav[data-tabs="6"] .tab-table__tab {
    flex: none;
    padding: 0 calc(14 * var(--u)) calc(12 * var(--u));
  }

  .tab-table__panels { margin-top: calc(18 * var(--u)); }
  .tab-table__lead {
    margin-bottom: calc(16 * var(--u));
    font-size: max(calc(14 * var(--u)), 13px);
    line-height: 1.7;
  }

  /*
    칸이 다섯을 넘으면 줄여 봐야 못 읽는다.
    가로로 밀어서 보게 하고, 첫 칸은 자리에 붙여 둔다 —
    오른쪽으로 밀어도 무엇에 대한 값인지 놓치지 않는다.
  */
  .tab-table--wide .tab-table__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* --tt-min 은 js/tab-table.js 가 config.minWidth 로 넣는다 (1920 기준) */
  .tab-table--wide .tab-table__table { min-width: calc(var(--tt-min, 660) * var(--u)); }
  .tab-table--wide .tab-table__table thead th:first-child,
  .tab-table--wide .tab-table__table tbody th {
    position: sticky;
    left: 0;
    z-index: 1;
  }
  .tab-table--wide .tab-table__table tbody th { background: var(--color-white); }
  .tab-table--wide .tab-table__table thead th:first-child { background: var(--tt-head); }
  .tab-table--wide .tab-table__table tbody tr:hover th { background: var(--tt-hover); }

  /* 더 밀 수 있다는 표시. 끝까지 밀면 스크립트가 걷는다 */
  .tab-table--wide .tab-table__scroller::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: calc(40 * var(--u));
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, .95));
    pointer-events: none;
    opacity: 1;
    transition: opacity .25s ease;
  }
  .tab-table--wide .tab-table__scroller.is-end::after { opacity: 0; }

  .tab-table__table thead th {
    height: auto;
    padding: calc(14 * var(--u)) calc(6 * var(--u));
    font-size: max(calc(14 * var(--u)), 13px);
  }
  .tab-table__table thead th:first-child { border-radius: calc(10 * var(--u)) 0 0 calc(10 * var(--u)); }
  .tab-table__table thead th:last-child { border-radius: 0 calc(10 * var(--u)) calc(10 * var(--u)) 0; }
  .tab-table__head-label.is-spaced { letter-spacing: 0; margin-right: 0; }

  /* 시안의 큰 들여쓰기는 좁은 화면에서 칸을 다 먹는다. 최소만 남긴다 */
  .tab-table--left .tab-table__table thead th,
  .tab-table--left .tab-table__table tbody th,
  .tab-table--left .tab-table__table tbody td { padding-left: calc(14 * var(--u)); }

  .tab-table__table tbody th,
  .tab-table__table tbody td {
    height: auto;
    padding: calc(16 * var(--u)) calc(6 * var(--u));
    /* 표 글자는 13 아래로 내려가지 않는다 */
    font-size: max(calc(14 * var(--u)), 13px);
  }
  /* 손가락으로는 마우스오버가 없다. 눌린 채 남는 색을 없앤다 */
  .tab-table__table tbody tr:hover,
  .tab-table__table tbody tr.is-group-hot { background: none; }
  .tab-table__table tbody th.is-hot { background: none; font-weight: 300; color: inherit; }
  .tab-table__tab:hover::after { transform: scaleX(0); }
  .tab-table--wide .tab-table__table tbody tr:hover th { background: var(--color-white); }

  .tab-table__note { margin-top: calc(16 * var(--u)); font-size: max(calc(12 * var(--u)), 11px); }
  .tab-table__empty { min-height: calc(160 * var(--u)); font-size: max(calc(14 * var(--u)), 13px); }
}

/* ==================== 모션 최소화 ==================== */
@media (prefers-reduced-motion: reduce) {
  .tab-table__ind { transition: none; }
  .js .tab-table__panel[data-state="out"],
  .js .tab-table__panel[data-state="enter"],
  .js .tab-table__panel[data-state="in"] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .js .tab-table__panel[data-state="enter"] tbody tr,
  .js .tab-table__panel[data-state="in"] tbody tr,
  .js .tab-table__panel[data-state="enter"] thead th,
  .js .tab-table__panel[data-state="in"] thead th {
    opacity: 1;
    transform: none;
    transition: none;
  }
}