/* =========================
   0) Theme tokens
========================= */
:root{
  /* 수령본은 옅은 회색(#f4f6f9)이었으나 도시진단(SI판)과 배경을 맞춰 흰색으로 바꿈
     (2026-08-10).
     주의: .card 는 border: none 이라 경계를 box-shadow 로만 잡는다. 회색 배경 위의
     흰 카드였던 것이 흰 배경 위의 흰 카드가 되므로 카드 구분이 약해진다. 구분이
     필요하면 --shadow 를 키우거나 .card 에 옅은 테두리를 주는 쪽으로 조정할 것. */
  --bg: #ffffff;
  --card-bg: #ffffff;
  --text: #111827;
  --muted: #6b7280;
  --line: rgba(17,24,39,0.10);

  --brand: #0b57ff;
  --brand-weak: rgba(11,87,255,0.12);
  --brand-strong: #6c3ff2;

  --tier2-accent: var(--brand);
  --tier3-bg: #f5f7ff;
  --tier3-border: var(--brand);
  --tier3-header: #33456b;

  --radius: 16px;
  --shadow: 0 10px 24px rgba(0,0,0,0.08);

  /* 현재 미사용. 이 값을 쓰던 #quarto-content 폭 제한 규칙을 아래에서 제거했다.
     폭은 _quarto.yml 의 grid 와 assets/styles/base/_root.scss 가 관리한다. */
  --container-max: 1080px;
}

/* =========================
   1) Base layout
========================= */
html{
  height: 100%;

  /* 전체 글씨 크기를 기존 대비 1.2배로 확대 (2026-08-12 수령본).
     rem 단위로 지정된 현주소 CSS뿐 아니라 Quarto/theme 에서 상속되는
     제목·본문 글씨까지 함께 확대하기 위해 루트 기준 크기를 조정함.
     주석은 "120%" 라고 적혀 있으나 수령본의 실제 값은 144% 다 — 값을 따랐다. */
  font-size: 144%;
}
body{
  height: 100%;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 수령본에는 #quarto-content·.page-columns 를 --container-max(1080px) 로 묶는 규칙이
   있었으나 제거함 (2026-08-10).

   #quarto-content 는 사이드바까지 포함하는 컨테이너다. 1080px 로 묶으면 사이드바를 뺀
   본문이 800px 도 안 되게 눌려, 같은 사이트의 도시진단(본문 1056px)보다 훨씬 좁아진다.
   폭은 _quarto.yml 의 grid(body-width·sidebar-width)가 관리하므로 여기서 덧씌우지 않는다.
   현주소 문서가 theme 을 cosmo 로 바꿔도 그 grid 값은 그대로 적용된다(실측 확인). */
main.content{
  padding-top: 24px;
  padding-bottom: 40px;
}

hr{
  border: none;
  height: 1px;
  background: var(--line);
  margin: 18px 0 22px 0;
}

/* =========================
   2) Typography hierarchy
========================= */
.quarto-title-block .title{
  font-weight: 800;
  letter-spacing: -0.02em;
}

.main-title{
  font-size: 2.05rem;
  font-weight: 900;
  letter-spacing: -0.03em;
  margin: 0 0 6px 0;
}

.header-subtitle{
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--brand);
  margin: 0 0 10px 0;
}

.card-text-sm,
.card-text-sm p,
.card-text-sm li,
.card-text-sm blockquote,
.card-text-sm blockquote p{
  font-size: 1.00rem;
  line-height: 1.65;
  color: #000000;
  font-weight: 400;
}

.card-text-sm blockquote{
  margin: 0;
  padding: 0;
  border-left: none;
}

/* =========================
   3) Grid spacing
========================= */
.grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 28px;
}

.g-col-12 { grid-column: span 12; }
.g-col-6  { grid-column: span 6; }
.g-col-4  { grid-column: span 4; }
.g-col-8  { grid-column: span 8; }

/* =========================
   4) Card system
========================= */
.card{
  background: var(--card-bg);
  border: none !important;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px 24px;
  margin: 0;
  margin-bottom: 32px;
  position: relative;
}

.card-split{
  display: grid;
  grid-template-columns: 5fr 5fr;
  column-gap: 28px;
}
.split-left{ min-width: 0; }
.split-right{ min-width: 0; }

.card-header{
  background: transparent !important;
  border: none !important;
  padding: 0;
  margin: 0 0 8px 0;
  font-size: 1.55rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--text);
}

/* 일반 박스(2단계): 넘버 배지 대신 헤더 하단에 브랜드 컬러 강조선 */
.card > .card-header{
  position: relative;
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--line) !important;
}

.card > .card-header::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 44px;
  height: 3px;
  border-radius: 2px;
  background: var(--tier2-accent);
}

.card-body{ padding: 0; }

.divider{
  height: 1px;
  background: var(--line);
  margin: 10px 0 12px 0;
}

/* =========================
   5) 박스 속 박스 (3단계 서브 박스)
========================= */
/* 상위 일반 박스에 종속된 심화 박스: 틴트 배경 + 좌측 브랜드 컬러 바로 위계 표시 */
.card.card-sub{
  background: var(--tier3-bg);
  box-shadow: 0 6px 16px rgba(17,24,39,0.06);
  border-left: 4px solid var(--tier3-border) !important;
  padding-left: 20px;
}

.card.card-sub > .card-header{
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--tier3-header);
}

.card.card-sub > .card-header::after{
  width: 28px;
  background: var(--tier3-header);
  opacity: 0.7;
}

/* =========================
   6) Header card (1단계 헤드라인 박스)
========================= */
.header-card{
  position: relative;
  overflow: hidden;
  padding: 26px 28px;
  background-color: #faf7ff;
}

.header-card::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(90deg, var(--brand), var(--brand-strong));
}

.header-kicker{
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text);
  opacity: 0.9;
  margin: 0 0 8px 0;
}

.header-year{
  position: absolute;
  top: 18px;
  right: 18px;
  background: var(--brand);
  color: #fff;
  font-weight: 900;
  font-size: 0.95rem;
  padding: 8px 14px;
  border-radius: 10px;
  letter-spacing: 0.02em;
}

.header-card .card-text-sm {
  margin-top: 6px;
  font-size: 1.05rem;
  line-height: 1.75;
  color: #000000;
}

.header-card .card-text-sm p,
.header-card .card-text-sm li {
  font-size: 1.05rem;
  line-height: 1.75;
  color: #000000;
}

/* 헤드라인 박스 내 참고용 주석(설명) 텍스트 — 본문보다 작고 차분하게 처리 */
.header-note{
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  font-size: 0.80rem;
  line-height: 1.6;
  color: var(--muted);
  font-style: italic;
}

/* =========================
   7) Highcharter/htmlwidgets
========================= */
.html-widget,
.highchart,
.highcharts-container{
  width: 100% !important;
}

.card .html-widget{
  margin-top: 10px;
  overflow: hidden;
  border-radius: 12px;
}

/* =========================
   8) Responsive
========================= */
@media (max-width: 900px){
  .card-split{
    grid-template-columns: 1fr;
    row-gap: 14px;
  }
}

/* =========================
   9) Chart title and source
========================= */
.chart-title{
  margin: 2px 0 8px 0;
  font-size: 0.858rem !important;
  font-weight: 800;
  line-height: 1.4;
  color: var(--text);
  letter-spacing: -0.015em;
  text-align: center !important;
  display: block;
  width: 100%;
}

/* 02번 카드: 공통 그림제목보다 한 단계 낮은 유형별 소제목 */
.chart-subtitle{
  margin: 0 0 3px 0;
  font-size: 0.80rem !important;
  font-weight: 400;
  line-height: 1.4;
  color: var(--text);
  letter-spacing: -0.01em;
  text-align: center !important;
  display: block;
  width: 100%;
}

.chart-source{
  margin: 7px 0 2px 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--muted);
}

.card-charts{
  margin-top: 18px;
  row-gap: 22px;
}

/* =========================
   10) References
========================= */
.references-title{
  margin: 0 0 10px 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text);
}

.references,
.references p,
.references li{
  font-size: 0.80rem;
  line-height: 1.65;
  color: var(--muted);
  font-weight: 400;
}

.references ol{
  margin: 0;
  padding-left: 1.25rem;
}

/* =========================
   11) DT 테이블 (지도/차트 옆 축소형 표)
========================= */
/* 지도·차트 옆에 배치되는 DT(DataTables) 테이블: 본문(.card-text-sm)과 동일한 글꼴·크기로 통일 */
.table-text-sm,
.table-text-sm .dataTables_wrapper,
.table-text-sm table.dataTable,
.table-text-sm table.dataTable thead th,
.table-text-sm table.dataTable tbody td,
.table-text-sm .dataTables_info,
.table-text-sm .dataTables_paginate,
.table-text-sm .dataTables_paginate .paginate_button {
  font-family: inherit !important;
  font-size: 0.90rem !important;
}

.table-text-sm table.dataTable thead th,
.table-text-sm table.dataTable tbody td {
  line-height: 1.65 !important;
}