/* =====================================================================
   Components — Figma 라이브러리 컴포넌트와 같은 이름으로 정리했습니다.
   Data/Stat · Card/Head · Control/Chip · Chart/Tooltip · Chart/Legend ·
   List/Group · List/Row · List/Item · List/Entry · List/Bullet · Media/Placeholder
   ===================================================================== */

/* ---------- Data/Stat ---------------------------------------------- */
.stat { display: grid; gap: 8px; align-content: start; }
.stat__label { font: 600 var(--fs-title)/var(--lh-title) var(--font-kr); letter-spacing: var(--ls-title); }
.stat__value { display: flex; align-items: baseline; gap: 4px; color: var(--c-accent-text); }
.stat__num { font-family: var(--font-display); font-size: var(--fs-stat-l); line-height: 1; letter-spacing: var(--ls-stat-l); font-variant-numeric: tabular-nums; }
.stat--m .stat__num { font-size: var(--fs-stat-m); }
.stat__unit { font: 500 var(--fs-unit)/1 var(--font-kr); }
.stat__note { font: 500 var(--fs-caption)/var(--lh-caption) var(--font-kr); color: var(--c-muted); }
.stat-row { display: flex; flex-wrap: wrap; gap: 24px 48px; }

/* ---------- Card + Card/Head --------------------------------------- */
.card { display: flex; flex-direction: column; scroll-margin-top: calc(var(--header-h) + 16px); }
.card__head {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  height: 48px; padding: 0 16px;
  border-bottom: var(--line) solid var(--c-line);
}
.card__title { font: 600 var(--fs-title)/var(--lh-title) var(--font-kr); color: var(--c-accent-text); }
.card__asof  { font: 500 var(--fs-caption)/1.4 var(--font-kr); color: var(--c-muted); text-align: right; }
.card__body  { display: grid; gap: 20px; align-content: start; padding: 24px var(--gutter); }
.card__top   { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.card__sep   { border-top: var(--line) solid var(--c-accent-soft); padding-top: 20px; }

/* ---------- Control/Chip ------------------------------------------- */
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  padding: 6px 12px;
  border: var(--line) solid var(--c-accent);
  background: var(--c-paper);
  color: var(--c-accent-text);
  font: 500 var(--fs-caption)/1.5 var(--font-kr);
  transition: background-color .2s, color .2s;
}
.chip:hover { background: var(--c-accent-soft); }
.chip[aria-pressed="true"] { background: var(--c-accent); color: var(--c-on-accent); }

/* ---------- Chart canvas + Chart/Tooltip --------------------------- */
.chart { position: relative; width: 100%; }
.chart canvas { display: block; touch-action: pan-y; }
.chart__unit { font: 500 var(--fs-caption)/var(--lh-caption) var(--font-kr); color: var(--c-muted); }
.chart__detail { font: 400 var(--fs-body)/var(--lh-body) var(--font-kr); min-height: 1.7em; }
.chart__detail:empty { display: none; }

.tooltip {
  position: fixed; z-index: 100; pointer-events: none;
  display: grid; gap: 2px;
  padding: 8px 10px;
  background: var(--c-tooltip); color: var(--c-on-tooltip);
  transform: translate(12px, -110%);
  opacity: 0; transition: opacity .12s;
  max-width: 280px;
}
.tooltip.is-on { opacity: 1; }
.tooltip__title { font: 500 var(--fs-caption)/1.5 var(--font-kr); opacity: .8; }
.tooltip__value { font: 600 var(--fs-title)/1.5 var(--font-kr); }

/* 카드 안 나란히 놓기: 차트 | 범례 */
.split { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: start; }
.split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stack { display: grid; gap: 14px; align-content: start; min-width: 0; }

/* ---------- Chart/Legend ------------------------------------------- */
.legend { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.legend--col { display: grid; gap: 10px; }
.legend__item { display: flex; align-items: center; gap: 8px; font: 500 var(--fs-caption)/1.5 var(--font-kr); }
.legend__swatch { width: 12px; height: 12px; flex: none; background: var(--c-accent); }
.legend__value { color: var(--c-accent-text); }
.legend--big .legend__item { font: 600 var(--fs-title)/1.5 var(--font-kr); }
.legend--big .legend__value { font: 500 var(--fs-caption)/1.5 var(--font-kr); margin-left: auto; }

/* ---------- 목록 (List/*) ------------------------------------------- */
.list-cols {                         /* 4단 세로 흐름 (원고 순서 유지) */
  columns: var(--grid-cols);
  column-gap: 0;
  column-rule: var(--line) solid var(--c-line);
  padding: 8px 0 32px;
}
.list-group { break-inside: avoid; padding: 0 var(--gutter); }
.list-group__head {                  /* List/Group */
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 16px 0 8px;
  border-bottom: var(--line) solid var(--c-line);
  font: 600 var(--fs-title)/var(--lh-title) var(--font-kr); color: var(--c-accent-text);
}
.list-group__head small { font: 500 var(--fs-caption)/1 var(--font-kr); color: var(--c-muted); }
.list-region {                       /* 권역 띠 */
  display: flex; gap: 8px; align-items: baseline;
  margin-top: 12px; padding: 6px 8px;
  background: var(--c-accent-soft);
  font: 600 var(--fs-title)/1.5 var(--font-kr);
}
.list-region small { font: 500 var(--fs-caption)/1 var(--font-kr); color: var(--c-accent-text); }
.list-row { display: grid; grid-template-columns: 112px 1fr; gap: 12px; padding: 4px 0; }   /* List/Row */
.list-row span:last-child { color: var(--c-muted); }
.list-item { padding: 4px 0; }                                                          /* List/Item */
.list-entry { padding: 8px 0; border-bottom: var(--line) solid var(--c-accent-soft); break-inside: avoid; } /* List/Entry */
.list-entry__title { font: 400 var(--fs-body)/1.6 var(--font-kr); }
.list-entry--pad { padding-left: var(--gutter); padding-right: var(--gutter); }
.list-cols > .list-region { margin: 12px var(--gutter) 0; break-after: avoid; }
.list-block { scroll-margin-top: var(--header-h); }
.list-entry__body  { font: 500 var(--fs-caption)/var(--lh-caption) var(--font-kr); color: var(--c-muted); white-space: pre-line; }

/* List/Bullet — 사각 마커 */
.bullets { display: grid; gap: 6px; }
.bullet { position: relative; padding-left: 16px; }
.bullet::before { content: ""; position: absolute; left: 0; top: .72em; width: 6px; height: 6px; background: var(--c-accent); }
.bullet b { font-weight: 600; }
.bullet--sub { padding-left: 32px; font: 500 var(--fs-caption)/var(--lh-caption) var(--font-kr); color: var(--c-muted); }
.bullet--sub::before { left: 16px; top: .55em; width: 4px; height: 4px; background: var(--c-accent-soft); }

/* ---------- Media/Placeholder (이미지가 없으면 격자 모티브) ---------- */
.media {
  position: relative; overflow: hidden;
  background-color: var(--c-ground);
  background-image:
    linear-gradient(var(--c-sheet-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--c-sheet-line) 1px, transparent 1px);
  background-size: 6px 6px;
  background-blend-mode: normal;
}
.media::after { content: ""; position: absolute; inset: 0; background: var(--c-ground); opacity: .5; pointer-events: none; }
.media.has-img::after { display: none; }
.media img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.media--contain img { object-fit: contain; }                    /* 포스터 · 단체 사진: 자르지 않음 */
.media--contain.has-img { background: var(--c-ground); }
.media__chip {
  position: absolute; z-index: 2; left: 12px; top: 12px;
  padding: 4px 8px; background: var(--c-paper);
  font: 500 var(--fs-caption)/1.5 var(--font-kr);
  max-width: calc(100% - 24px);
}

/* ---------- 캐러셀 (Swiper) ---------------------------------------- */
.carousel { position: relative; }
.carousel .swiper-slide .media { aspect-ratio: 312 / 420; }
.carousel__nav { position: absolute; z-index: 3; right: 8px; bottom: 24px; display: flex; gap: 3px; }
.carousel__btn { width: 19px; height: 19px; display: grid; place-items: center; color: var(--c-ink); background: var(--c-paper); width: 24px; height: 24px; }
.carousel__btn.is-disabled { opacity: .35; cursor: default; }
.carousel__dots { display: flex; gap: 6px; margin-top: 10px; }
.carousel__dots .swiper-pagination-bullet { width: 6px; height: 6px; border-radius: 0; margin: 0 !important; background: var(--c-accent-soft); opacity: 1; transition: width .2s; }
.carousel__dots .swiper-pagination-bullet-active { width: 16px; background: var(--c-accent); }

/* ---------- 등장 모션 (JS가 .is-in 을 붙입니다) ---------------------- */
[data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
[data-reveal].is-in { opacity: 1; transform: none; }
.no-js [data-reveal] { opacity: 1; transform: none; }

@media (max-width: 640px) {
  .split, .split--even { grid-template-columns: 1fr; }
  .stat-row { gap: 20px 32px; }
  .list-row { grid-template-columns: 104px 1fr; }
}