/* site/pages/static-page.css — 정적 콘텐츠 페이지가 함께 쓰는 골격
   대상: IN-01~04 · KE-02 · KE-05 · KE-06 · TP-01 · SK-02
   색·간격·글자 크기는 토큰만 쓴다 — 컨벤션 23. 화면 전용 요소는 화면별 CSS에 둔다. */

/* ── 섹션 ─────────────────────────────────────────── */
.static-sec { margin: 0 0 var(--sp-14); }
.static-sec:last-child { margin-bottom: 0; }
.static-sec__h {
  font-size: var(--fs-22); font-weight: var(--fw-bold); color: var(--c-primary);
  line-height: var(--lh-snug); word-break: keep-all;
  margin: 0 0 var(--sp-5); padding-left: var(--sp-4);
  border-left: 4px solid var(--c-accent);
}
.static-lead {
  font-size: var(--fs-18); font-weight: var(--fw-medium); color: var(--c-text-mute);
  line-height: var(--lh-snug); word-break: keep-all; margin: 0 0 var(--sp-8);
}
.static-note {
  font-size: var(--fs-14); color: var(--c-text-mute); line-height: var(--lh-loose);
  word-break: keep-all; margin: var(--sp-4) 0 0;
}

/* ── 문단 ─────────────────────────────────────────── */
.prose p {
  font-size: var(--fs-16); line-height: var(--lh-loose); color: var(--c-text);
  word-break: keep-all; margin: 0 0 var(--sp-4);
}
.prose p:last-child { margin-bottom: 0; }

/* ── 라벨-값 표 (dl) ──────────────────────────────── */
.def-table {
  display: grid; grid-template-columns: minmax(7rem, 14rem) 1fr;
  gap: 0; margin: 0;
  border-top: 2px solid var(--c-primary);
}
.def-table dt,
.def-table dd {
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--c-line);
  font-size: var(--fs-15); line-height: var(--lh-loose); word-break: keep-all;
  margin: 0;
}
.def-table dt {
  background: var(--c-surface-tint);
  font-weight: var(--fw-semibold); color: var(--c-primary);
}
.def-table dd { color: var(--c-text); }
.def-table a { color: var(--c-accent); }

@media (max-width: 767px) {
  .def-table { grid-template-columns: 1fr; }
  .def-table dt { border-bottom: 0; padding-bottom: var(--sp-2); }
}

/* ── 목록 ─────────────────────────────────────────── */
.bullet-list { margin: 0; padding: 0; list-style: none; }
.bullet-list li {
  position: relative; padding-left: var(--sp-6);
  font-size: var(--fs-16); line-height: var(--lh-loose); color: var(--c-text);
  word-break: keep-all; margin-bottom: var(--sp-3);
}
.bullet-list li:last-child { margin-bottom: 0; }
.bullet-list li::before {
  content: ""; position: absolute; left: 0; top: 0.7em;
  width: 6px; height: 6px; border-radius: var(--r-full); background: var(--c-accent);
}

/* ── 데이터 표 ────────────────────────────────────── */
.table-scroll { overflow-x: auto; }
.data-table {
  width: 100%; border-collapse: collapse;
  border-top: 2px solid var(--c-primary);
}
.data-table th,
.data-table td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--c-line);
  font-size: var(--fs-15); line-height: var(--lh-base);
  text-align: left; word-break: keep-all;
}
.data-table thead th {
  background: var(--c-surface-tint);
  font-weight: var(--fw-semibold); color: var(--c-primary);
}
.data-table tbody th {
  background: var(--c-surface-mute);
  font-weight: var(--fw-semibold); color: var(--c-text-strong);
  vertical-align: middle; text-align: left;
}
/* 열 정렬은 왼쪽이 기본이다 — 길이가 고른 짧은 값(번호·날짜·상태·구분) 열만 머리글과 칸에 c-center를 붙여 가운데에 둔다 */
.data-table .c-center { text-align: center; }

/* ── 탭 ───────────────────────────────────── */
/* 색 전환에 transition을 걸지 않는다 — 헤드리스 캡처(가상 시간)에서 전환이 진행되지 않아
   활성 탭이 전환 시작 색으로 찍히고, 화면 점검 때마다 가짜 결함으로 보인다. */
.content-tabs__list { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-8); }
.content-tabs__btn {
  padding: var(--sp-3) var(--sp-6);
  border: 1px solid var(--c-line); border-radius: var(--r-full);
  background: var(--c-white); color: var(--c-text-mute);
  font-size: var(--fs-15); font-weight: var(--fw-medium); cursor: pointer;
}
.content-tabs__btn:hover { background: var(--c-surface-tint); color: var(--c-primary); }
.content-tabs__btn[aria-selected="true"] {
  background: var(--c-primary); border-color: var(--c-primary); color: var(--c-on-primary);
}
/* 스크립트가 탭을 켜기 전에는 세 내용이 모두 읽히고, 탭이 켜지면 제목이 탭 버튼과 겹쳐 숨는다 */
.content-tabs__panel { margin-bottom: var(--sp-12); }
.content-tabs[data-tabs-ready] .content-tabs__panel { margin-bottom: 0; }
.content-tabs[data-tabs-ready] .content-tabs__h { display: none; }

/* ── 안내 이미지 배너 ─────────────────────── */
.promo-banner { margin: 0 0 var(--sp-10); }
.promo-banner img {
  display: block; width: 100%; height: auto;
  border-radius: var(--r-lg); border: 1px solid var(--c-line-soft);
}

/* ── 채널 목록 ────────────────────────────── */
.channel-list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sp-3); }
.channel-list__item {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--c-line); border-radius: var(--r-md);
  background: var(--c-white);
}
.channel-list__label {
  min-width: 6rem;
  font-size: var(--fs-15); font-weight: var(--fw-semibold); color: var(--c-primary);
}
.channel-list__item a { color: var(--c-accent); font-size: var(--fs-15); word-break: break-all; }
.channel-list__item span:not(.channel-list__label) { font-size: var(--fs-15); color: var(--c-text); }