/* 교육정책 모음 화면 */

.policy { padding: 0 0 64px; }

.policy__section { padding: 0 var(--spacing-page); }
.policy__section + .policy__section { margin-top: 40px; }
.policy__section[hidden] { display: none; }

.policy__title {
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-text-strong);
  scroll-margin-top: calc(var(--topbar-height) + 16px);
}

.policy__count { margin-left: 4px; font-size: 13px; font-weight: 500; color: var(--color-text-disabled); }

.policy__note {
  margin: 0 0 14px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--color-text-muted);
}

.policy__note + .policy__note { margin-top: -8px; }

/* 기준 학년 고르기 */

.pick { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.pick__label { font-size: 12px; font-weight: 600; color: var(--color-text-muted); }
.pick__chips { display: inline-flex; flex-wrap: wrap; gap: 4px; }

.pick__chip {
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

.pick__chip:hover { color: var(--color-text-strong); border-color: var(--color-border-strong); }

.pick__chip[aria-pressed="true"] {
  background: var(--color-primary-soft);
  border-color: var(--color-primary-light);
  color: var(--color-primary-dark);
  font-weight: 600;
}

.pick__sum {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, max-content));
  gap: 14px 36px;
  margin-top: 18px;
}

.fact { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fact__key { font-size: 11.5px; color: var(--color-text-muted); }

.fact__val {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--color-text-strong);
}

/* 표. 줄을 누를 일이 없고 양옆 변도 두지 않는다 */
.policy .table-wrap { max-height: none; }
.policy .table tbody tr { cursor: default; }
.policy .table tbody tr:hover td { background: transparent; }
.policy .table td { vertical-align: top; line-height: 1.65; }
.policy .table td:first-child { color: var(--color-text-strong); font-weight: 500; white-space: nowrap; }
.policy .table td.is-wide { min-width: 15em; }
.policy .table td.is-when { white-space: nowrap; color: var(--color-text-muted); }
.policy .table td.is-source { min-width: 11em; color: var(--color-text-muted); font-size: 11.5px; }

.policy .table tbody tr.is-here td,
.policy .table tbody tr.is-here:hover td { background: var(--color-primary-soft); }
.policy .table tbody tr.is-here td:first-child { color: var(--color-primary-dark); font-weight: 600; }

/* 현행 제도 줄은 눌러서 세부 창을 연다 */
.policy .table tbody tr.is-open { cursor: pointer; }
.policy .table tbody tr.is-open:hover td { background: var(--color-surface-subtle); }

.policy__open {
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-weight: 500;
  color: var(--color-text-strong);
  text-align: left;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--color-border-strong);
  text-underline-offset: 3px;
}

.policy__open:hover { color: var(--color-primary-dark); text-decoration-color: currentColor; }

/* 제도 세부 창 */

.modal--detail { width: min(760px, 100%); }

.detail__section + .detail__section { margin-top: 26px; }

.detail__title {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-text-strong);
}

.detail__lead { margin: 10px 0 6px; font-size: 12.5px; color: var(--color-text-muted); }

.detail__list, .detail__list ul { margin: 0; padding-left: 18px; list-style: disc; }
.detail__list ul { list-style: circle; }
.detail__list li::marker { color: var(--color-text-disabled); }
.detail__list > li { margin: 4px 0; font-size: 14px; line-height: 1.7; color: var(--color-text); }
.detail__list ul > li { margin: 2px 0; font-size: 13px; color: var(--color-text-muted); }

.detail__steps { margin: 0 0 10px; padding-left: 20px; list-style: decimal; font-size: 14px; line-height: 1.8; }
.detail__steps ul { margin: 0; padding-left: 18px; list-style: circle; }
.detail__steps ul > li { margin: 2px 0; font-size: 13px; line-height: 1.7; color: var(--color-text-muted); }
.detail__steps li::marker { color: var(--color-text-disabled); }

.detail__quote {
  margin: 0 0 12px;
  padding: 12px 14px;
  border-radius: var(--radius-panel);
  background: var(--color-surface-subtle);
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 1.8;
  color: var(--color-text);
}

.detail__table { margin: 0 0 6px; }
.policy-detail .table td, .detail__table .table td { vertical-align: top; line-height: 1.65; font-size: 13px; }
.detail__table .table tbody tr { cursor: default; }
.detail__table .table tbody tr:hover td { background: transparent; }

.detail__files, .detail__links { margin: 0; padding: 0; list-style: none; }

.detail__file, .detail__link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-top: 1px solid var(--color-divider);
  text-decoration: none;
}

.detail__files li:first-child .detail__file,
.detail__links li:first-child .detail__link { border-top: none; }

.detail__file-name, .detail__link-name { font-size: 13.5px; font-weight: 500; color: var(--color-primary-dark); }
.detail__file:hover .detail__file-name, .detail__link:hover .detail__link-name { text-decoration: underline; }
.detail__file-meta, .detail__link-host { flex: none; font-size: 11.5px; color: var(--color-text-disabled); }

/* 출처 */

.sources__group { width: 9em; }
.sources__name { min-width: 14em; font-weight: 500; }
.sources__note { min-width: 22em; }
.sources__address { min-width: 13em; }
.sources__link { color: var(--color-primary-dark); overflow-wrap: anywhere; }
.sources__link:hover { text-decoration: underline; }
.sources__empty { color: var(--color-text-disabled); }

@media (max-width: 900px) {
  .policy__section { padding: 0 16px; }
  .policy__title { font-size: 18px; }
  .policy__count { font-size: 14px; }
  .policy__note { font-size: 13.5px; }
  .pick { gap: 8px; }
  .pick__label { flex: 1 0 100%; font-size: 13px; }
  .pick__chips { gap: 6px; }
  .pick__chip { min-width: 48px; height: 40px; padding: 0 12px; font-size: 14px; }
  .pick__sum { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
  .fact__key { font-size: 12.5px; }
  .fact__val { font-size: 15px; }
  .policy .table td.is-source { font-size: 12.5px; }
  .detail__title { font-size: 16.5px; }
  .detail__lead { font-size: 13.5px; }
  .detail__list > li, .detail__steps { font-size: 15.5px; }
  .detail__list ul > li, .detail__steps ul > li { font-size: 14px; }
  .detail__quote { font-size: 15px; }
  .detail__file, .detail__link { flex-wrap: wrap; gap: 2px 12px; padding: 12px 0; }
  .detail__file-name, .detail__link-name { font-size: 15px; }
  .detail__file-meta, .detail__link-host { font-size: 12.5px; }
  /* 태블릿 폭에서는 칸을 억지로 줄이지 않고 표를 옆으로 밀어 본다 */
  .policy .table { min-width: 620px; }
  .policy .table td.is-wide { min-width: 18em; }
}

/* 휴대폰: 표를 한 건씩 쌓고 칸 이름을 왼쪽에 붙인다 */
@media (max-width: 640px) {
  .policy .table-wrap, .detail__table.table-wrap { overflow: visible; }
  .policy .table, .detail__table .table { display: block; min-width: 0; }
  .policy .table thead, .detail__table .table thead { display: none; }
  .policy .table tbody, .detail__table .table tbody { display: block; }
  .policy .table tbody tr, .detail__table .table tbody tr {
    display: block;
    padding: 14px 0;
    border-bottom: 1px solid var(--color-divider);
  }
  .policy .table tbody tr:last-child, .detail__table .table tbody tr:last-child { border-bottom: none; }
  .policy .table td, .policy .table td.is-wide, .policy .table td.is-source, .detail__table .table td {
    display: grid;
    grid-template-columns: 4.6em minmax(0, 1fr);
    gap: 10px;
    min-width: 0;
    width: auto;
    padding: 3px 0;
    border: 0;
    font-size: 14.5px;
    line-height: 1.6;
    white-space: normal;
    overflow-wrap: anywhere;
    color: var(--color-text);
  }
  .policy .table td::before, .detail__table .table td::before {
    content: attr(data-label);
    padding-top: 2px;
    font-size: 12.5px;
    font-weight: 400;
    color: var(--color-text-muted);
  }
  .policy .table td:empty, .detail__table .table td:empty { display: none; }
  .policy .table td .tag { justify-self: start; }

  /* 첫 칸은 그 건의 제목 */
  .policy .table td:first-child, .detail__table .table td:first-child {
    display: block;
    margin-bottom: 6px;
    font-size: 16px;
    font-weight: 600;
    white-space: normal;
    color: var(--color-text-strong);
  }
  .policy .table td:first-child::before, .detail__table .table td:first-child::before { display: none; }
  .policy__open { font-weight: 600; padding: 9px 0; }

  .policy .table tbody tr.is-here { margin: 0 -10px; padding-left: 10px; padding-right: 10px; border-radius: var(--radius-panel); background: var(--color-primary-soft); }
  .policy .table tbody tr.is-here td { background: transparent; }
  .policy .table tbody tr.is-open:active { background: var(--color-surface-subtle); }

  /* 출처: 출처명이 제목, 분류는 그 위 작은 글씨 */
  .policy .sources td.sources__group { margin-bottom: 0; font-size: 12.5px; font-weight: 500; color: var(--color-text-muted); }
  .policy .sources td.sources__name { display: block; margin-bottom: 6px; font-size: 16px; font-weight: 600; color: var(--color-text-strong); }
  .policy .sources td.sources__name::before { display: none; }
  .sources__group, .sources__name, .sources__note, .sources__address { width: auto; min-width: 0; }
  .sources__link { display: inline-block; padding: 4px 0; }
}