:root {
  --hub:        #0f766e;
  --hub-deep:   #134e4a;
  --hub-soft:   #f0fdfa;
  --hub-soft2:  #ccfbf1;
  --hub-line:   #99f6e4;

  --market:     #2563eb;
  --market-soft:#eff6ff;
  --market-line:#bfdbfe;

  --jeonse:     #b45309;
  --jeonse-soft:#fffbeb;
  --jeonse-line:#fde68a;

  --env:        #047857;
  --env-soft:   #ecfdf5;
  --env-line:   #a7f3d0;

  --comp:       #6d28d9;
  --comp-soft:  #f5f3ff;
  --comp-line:  #ddd6fe;
}

/* ━━━━ page-hd ━━━━ */
.page-hd {
  background: linear-gradient(135deg, var(--hub-soft) 0%, var(--hub-soft2) 100%);
  padding: 36px 20px 28px;
  border-bottom: 1px solid var(--hub-line);
}
.page-hd-inner { max-width: 1200px; margin: 0 auto; }
.page-breadcrumb { font-size: 12px; color: #64748b; margin-bottom: 10px; }
.page-breadcrumb a { color: #0f766e; text-decoration: none; }
.page-breadcrumb a:hover { text-decoration: underline; }
.page-hd-title {
  font-size: 22px; font-weight: 800;
  color: var(--hub-deep);
  margin: 0 0 6px;
  letter-spacing: -.5px;
}
.page-hd-desc { font-size: 14px; color: #475569; line-height: 1.6; }

/* ━━━━ 부분 월 배너 ━━━━ */
.partial-month-banner {
  background: #fef3c7;
  border: 1px solid #fcd34d;
  border-left: 4px solid #f59e0b;
  color: #92400e;
  padding: 12px 16px;
  border-radius: 6px;
  margin: 12px 16px;
  font-size: 14px;
  line-height: 1.5;
}
.partial-month-banner strong {
  display: block;
  margin-bottom: 4px;
  font-weight: 700;
}

/* ━━━━ KPI 스트립 — rd-strip 패턴 (rule detail 과 동일 검증된 구조) ━━━━ */
.rd-strip {
  background: #0f766e;
  padding: 8px 20px 10px;
  position: sticky;
  top: var(--header-h, 61px);
  z-index: 100;
}
.rd-strip-inner {
  max-width: 1200px; margin: 8px auto 0;
  display: flex; align-items: center; flex-wrap: wrap;
}

/* 컨텍스트 행 — 항상 노출 (라벨 + 메타 + 토글) */
.rd-strip-context {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
}
.rdc-label {
  font-size: 17px; font-weight: 800; color: #fff;
  letter-spacing: -.3px;
}
.rdc-dim {
  font-size: 15px; font-weight: 600;
  color: #cbd5e1; background: rgba(255,255,255,.12);
  padding: 3px 10px; border-radius: 12px;
}

/* KPI 토글 (CSS-only checkbox hack) */
.kpi-toggle-input {
  position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0;
}
.kpi-toggle-btn {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 5px;
  cursor: pointer;
  font-size: 15px; font-weight: 600;
  color: rgba(255,255,255,.85);
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  padding: 3px 10px; border-radius: 12px;
  user-select: none;
  transition: background .12s ease;
}
.kpi-toggle-btn:hover { background: rgba(255,255,255,.18); }
.kpi-toggle-btn .ki-arrow::before { content: "▴"; font-size: 11px; }
.kpi-toggle-input:not(:checked) ~ .rd-strip-context .kpi-toggle-btn .ki-arrow::before { content: "▾"; }
.kpi-toggle-input:not(:checked) ~ .rd-strip-inner { display: none; }

.si-wrap {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; flex-wrap: wrap;
}
.si {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  padding: 2px 20px;
  text-decoration: none;
  flex: 1 1 0;
  min-width: 0;
}
.si:first-child { padding-left: 0; }
.si + .si { border-left: 1px solid rgba(255,255,255,.18); }
.si-lbl { font-size: 13px; color: rgba(255,255,255,.65); font-weight: 600; letter-spacing: .2px; }
.si-row { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; min-width: 0; }
.si-val {
  font-size: 17px; font-weight: 800; color: #fff; line-height: 1.2;
  word-break: keep-all; overflow-wrap: break-word;
  min-width: 0;
}
.si-cat { flex-shrink: 0; }
.si-unit { font-size: 13px; color: rgba(255,255,255,.6); }
.si-sub {
  font-size: 13px; color: rgba(255,255,255,.7); font-weight: 600; margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%;
}
.si-link {
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}
.si-link:hover { color: inherit; text-decoration: none; }
.si-link:hover .si-val { color: #c7d2fe; }

.si-cat {
  display: inline-block;
  font-size: 10px; font-weight: 700;
  padding: 1px 6px; border-radius: 8px;
  letter-spacing: .3px; margin-left: 4px; vertical-align: 2px;
}
.si-cat.market { background: rgba(96,165,250,.25); color: #bfdbfe; }
.si-cat.jeonse { background: rgba(251,191,36,.25);  color: #fde68a; }
.si-cat.env    { background: rgba(52,211,153,.25);  color: #a7f3d0; }
.si-cat.comp   { background: rgba(196,181,253,.3);  color: #ddd6fe; }

/* 월 네비게이션 */
.mn-nav { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.mn-btn {
  font-size: 13px; color: #fff; padding: 3px 10px; border-radius: 4px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.25);
  text-decoration: none; line-height: 1.5; cursor: pointer;
}
.mn-btn:hover { background: rgba(255,255,255,.32); border-color: rgba(255,255,255,.4); }
.mn-dis {
  color: rgba(255,255,255,.22); background: transparent;
  border-color: rgba(255,255,255,.1); cursor: default;
  pointer-events: none;
}
.mn-select {
  font-size: 13px; font-weight: 700; color: #fff;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 4px; padding: 3px 8px;
  cursor: pointer; outline: none; letter-spacing: -.2px;
}
.mn-select option { color: #0f172a; background: #fff; }

/* ━━━━ 본문 ━━━━ */
.page { max-width: 1200px; margin: 0 auto; padding: 28px 16px 56px; }

/* ━━━━ 섹션 공통 헤더 ━━━━ */
.section-block { margin-bottom: 40px; }
.section-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 1.4px;
  text-transform: uppercase; color: #64748b;
  margin-bottom: 5px;
}
.section-title-row {
  display: flex; align-items: baseline; gap: 12px;
  padding-bottom: 12px;
  border-bottom: 2px solid #0f172a;
  margin-bottom: 16px;
}
.section-heading {
  font-size: 17px; font-weight: 800;
  letter-spacing: -.5px; color: #0f172a;
}
.section-sub {
  font-size: 13px; color: #475569;
  margin-bottom: 16px;
  margin-top: -6px;
}
.section-context {
  font-size: 15px; color: #475569;
  line-height: 1.6;
  margin-bottom: 6px;
  margin-top: -4px;
}

/* ━━━━ 섹션 2: 큐레이션 카드 ━━━━ */
.cur-empty {
  padding: 32px 16px;
  text-align: center;
  color: #475569;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
}
.cur-intro {
  font-size: 14px;
  color: #475569;
  line-height: 1.6;
  margin: 8px 0 20px;
  padding: 10px 14px;
  background: #f8fafc;
  border-left: 3px solid #cbd5e1;
  border-radius: 4px;
}


.criterion-defs {
  display: flex; flex-wrap: wrap; gap: 8px 24px;
  margin-bottom: 20px;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}
.criterion-def-item { display: flex; align-items: center; gap: 10px; }
.criterion-def-text { font-size: 13px; color: #475569; }

.curation-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 1000px) { .curation-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px)  { .curation-grid { grid-template-columns: repeat(2, 1fr); } }

.cur-card {
  background: #fff;
  border-radius: 12px;
  padding: 16px 18px 14px;
  display: flex; flex-direction: column; gap: 8px;
  border: 1px solid;
}
.cur-card.이례성 { border-color: #fde68a; }
.cur-card.규모   { border-color: var(--market-line); }
.cur-card.지속성 { border-color: var(--env-line); }
.cur-card.전환점 { border-color: #fecaca; }
.cur-card.교차   { border-color: var(--comp-line); }

.cur-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

.criterion-badge {
  font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: 4px; white-space: nowrap;
}
.criterion-badge.이례성 { background: #fef3c7; color: #92400e; }
.criterion-badge.규모   { background: var(--market-soft); color: #1e40af; }
.criterion-badge.지속성 { background: var(--env-soft); color: #065f46; }
.criterion-badge.전환점 { background: #fee2e2; color: #991b1b; }
.criterion-badge.교차   { background: var(--comp-soft); color: #5b21b6; }

.cur-cat-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.dot-market { background: var(--market); }
.dot-jeonse { background: var(--jeonse); }
.dot-env    { background: var(--env); }
.dot-comp   { background: var(--comp); }

.cur-label {
  font-size: 15px; font-weight: 800; color: #0f172a;
  letter-spacing: -.3px; line-height: 1.3;
}
.cur-reason { font-size: 14px; color: #334155; font-weight: 500; }

.cur-metric {
  font-size: 17px; font-weight: 900;
  letter-spacing: -.5px; line-height: 1;
}
.cur-card.이례성 .cur-metric { color: #92400e; }
.cur-card.규모   .cur-metric { color: var(--market); }
.cur-card.지속성 .cur-metric { color: var(--env); }
.cur-card.전환점 .cur-metric { color: #dc2626; }
.cur-card.교차   .cur-metric { color: var(--comp); }

.cur-sub { font-size: 13px; color: #334155; margin-top: 2px; }
.cur-badge-sub {
  font-size: 12px; font-weight: 600;
  padding: 2px 7px; border-radius: 4px;
  border: 1px solid;
}
.cur-card.이례성 .cur-badge-sub { border-color: #fde68a;           color: #92400e; }
.cur-card.규모   .cur-badge-sub { border-color: var(--market-line); color: #1e40af; }
.cur-card.지속성 .cur-badge-sub { border-color: var(--env-line);    color: #065f46; }
.cur-card.전환점 .cur-badge-sub { border-color: #fecaca;            color: #991b1b; }
.cur-card.교차   .cur-badge-sub { border-color: var(--comp-line);   color: #5b21b6; }

/* 카테고리 개요 */
.cat-overview {
  display: flex; gap: 0; flex-wrap: wrap;
  margin-bottom: 28px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
}
.co-item {
  flex: 1 1 0; min-width: 140px;
  padding: 14px 18px;
  display: flex; flex-direction: column; gap: 2px;
  border-right: 1px solid #e2e8f0;
  border-left: 4px solid;
}
.co-item:last-child { border-right: none; }
.co-item.market { border-left-color: var(--market); }
.co-item.jeonse { border-left-color: var(--jeonse); }
.co-item.env    { border-left-color: var(--env); }
.co-item.comp   { border-left-color: var(--comp); }

.co-name { font-size: 13px; font-weight: 700; letter-spacing: .3px; }
.co-item.market .co-name { color: var(--market); }
.co-item.jeonse .co-name { color: var(--jeonse); }
.co-item.env    .co-name { color: var(--env); }
.co-item.comp   .co-name { color: var(--comp); }

.co-count { font-size: 18px; font-weight: 800; color: #0f172a; line-height: 1.1; }
.co-count .unit { font-size: 13px; font-weight: 600; color: #475569; margin-left: 2px; }

/* 카테고리 섹션 */
.cat-section { margin-bottom: 36px; }
.cat-head {
  display: flex; align-items: baseline; gap: 12px;
  margin-bottom: 14px; padding-bottom: 10px;
  border-bottom: 2px solid #e2e8f0;
}
.cat-bar { display: inline-block; width: 6px; height: 22px; border-radius: 3px; transform: translateY(4px); }
.cat-section.market .cat-bar { background: var(--market); }
.cat-section.jeonse .cat-bar { background: var(--jeonse); }
.cat-section.env    .cat-bar { background: var(--env); }
.cat-section.comp   .cat-bar { background: var(--comp); }

.cat-name { font-size: 17px; font-weight: 800; }
.cat-section.market .cat-name { color: var(--market); }
.cat-section.jeonse .cat-name { color: var(--jeonse); }
.cat-section.env    .cat-name { color: var(--env); }
.cat-section.comp   .cat-name { color: var(--comp); }

.cat-desc { font-size: 15px; color: #334155; }
.cat-count { margin-left: auto; font-size: 14px; color: #475569; font-weight: 600; }

/* 라벨 카드 그리드 */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.card {
  background: #fff;
  border: 1px solid;
  border-radius: 12px;
  padding: 18px 20px;
  cursor: pointer;
  display: flex; flex-direction: column;
  transition: transform .12s ease, box-shadow .12s ease;
}
.card:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(15,23,42,.08); }
.cat-section.market .card { border-color: var(--market-line); }
.cat-section.jeonse .card { border-color: var(--jeonse-line); }
.cat-section.env    .card { border-color: var(--env-line); }
.cat-section.comp   .card { border-color: var(--comp-line); }

.card-label { font-size: 17px; font-weight: 800; color: #0f172a; margin-bottom: 6px; }
.card-desc  { font-size: 14px; color: #334155; line-height: 1.55; margin-bottom: 14px; flex: 1; }

/* 사회 차원 chip + 카테고리 chip (P-012) — 카드 상단 */
.card-chips {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.card-dim {
  display: inline-block;
  font-size: 13px; font-weight: 600;
  color: #475569; background: #f1f5f9;
  padding: 4px 12px;
  border-radius: 14px;
}
.card-cat {
  display: inline-block;
  font-size: 13px; font-weight: 600;
  padding: 4px 12px;
  border-radius: 14px;
  border: 1px solid;
}
.card-cat.market { background: #eff6ff; color: #2563eb; border-color: #bfdbfe; }
.card-cat.jeonse { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.card-cat.env    { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.card-cat.comp   { background: #f5f3ff; color: #6d28d9; border-color: #ddd6fe; }

/* 복합 카드 자식 룰 (Q5) */
.card-children {
  font-size: 13px; color: #334155;
  background: #f8fafc; border: 1px solid #e2e8f0;
  padding: 10px 14px;
  border-radius: 6px;
}
.card-children ul { margin: 0; padding-left: 20px; }
.card-children li { font-size: 13px; line-height: 1.7; }
.card-children .ch-dim {
  display: inline-block;
  font-size: 13px; font-weight: 700;
  color: #475569; background: #e2e8f0;
  padding: 1px 6px; border-radius: 3px;
  margin-left: 4px;
}

/* 접이식 (card-limit / card-children) — 기본 숨김 */
details.card-collapsible { margin-bottom: 12px; }
details.card-collapsible > summary {
  font-size: 13px; font-weight: 600;
  color: #475569;
  cursor: pointer;
  padding: 8px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  list-style: none;
  user-select: none;
  transition: background .12s ease;
}
details.card-collapsible > summary::-webkit-details-marker { display: none; }
details.card-collapsible > summary::before {
  content: "▸ ";
  display: inline-block;
  width: 14px;
  color: #64748b;
}
details.card-collapsible[open] > summary::before { content: "▾ "; }
details.card-collapsible[open] > summary {
  background: #f1f5f9;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
details.card-collapsible > summary:hover { background: #f1f5f9; }
details.card-collapsible[open] > .card-limit,
details.card-collapsible[open] > .card-children {
  margin-bottom: 0;
  border-top: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.card-limit {
  font-size: 13px; color: #92400e;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 6px;
  padding: 8px 12px;
  line-height: 1.55;
  margin-bottom: 10px;
}

.card-foot {
  display: flex; justify-content: space-between; align-items: flex-end;
  padding-top: 12px;
  border-top: 1px solid #f1f5f9;
  gap: 10px;
}
.card-count {
  display: flex; flex-wrap: wrap;
  gap: 4px 8px; align-items: baseline;
  font-size: 14px; color: #475569; line-height: 1.5;
}
.card-count .sep { color: #cbd5e1; }
.card-count .num {
  font-size: 14px; font-weight: 800;
  font-variant-numeric: tabular-nums; margin-left: 3px;
}
.cat-section.market .card-count .num { color: var(--market); }
.cat-section.jeonse .card-count .num { color: var(--jeonse); }
.cat-section.env    .card-count .num { color: var(--env); }
.cat-section.comp   .card-count .num { color: var(--comp); }

.card-cta { font-size: 14px; font-weight: 700; white-space: nowrap; }
.cat-section.market .card-cta { color: var(--market); }
.cat-section.jeonse .card-cta { color: var(--jeonse); }
.cat-section.env    .card-cta { color: var(--env); }
.cat-section.comp   .card-cta { color: var(--comp); }
.card-cta::after { content: " →"; }

/* 카드 flash 애니메이션 */
@keyframes card-flash {
  0%   { box-shadow: 0 0 0 0 rgba(251,191,36,.7); transform: translateY(-2px); }
  40%  { box-shadow: 0 0 0 10px rgba(251,191,36,0); }
  100% { box-shadow: 0 0 0 0 rgba(251,191,36,0); transform: translateY(0); }
}
.card.flash { animation: card-flash 1.4s ease-out; border-color: #f59e0b !important; }

/* dormant 카드 */
.card.dormant .card-count .num { color: #64748b; }
.card.dormant .card-count .ym {
  background: #fef3c7; color: #92400e;
  font-size: 11px; font-weight: 700;
  padding: 1px 6px; border-radius: 4px; margin-left: 4px;
}

/* 푸터 메모 */
.foot-note {
  margin-top: 32px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 18px 22px;
  font-size: 14px; color: #475569; line-height: 1.7;
}
.foot-note strong { color: #334155; }

/* ── 반응형 720px ── */
@media (max-width: 720px) {
  .si { padding: 2px 12px; }
  .si-val { font-size: 15px; }
  .page-hd { padding: 24px 16px 20px; }
  .page-hd-title { font-size: 20px; }
  .cat-desc { font-size: 14px; }
}

/* 헤더가 2줄(GNB+검색창)로 바뀌는 분기점에 맞춰 top 보정 */
@media (max-width: 580px) {
  .strip { top: 106px; }
}

/* ── 반응형 480px ── */
@media (max-width: 480px) {
  .strip { padding: 0; }
  .si-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    padding: 0 16px;
  }
  .si { flex-shrink: unset; padding: 10px 12px; border-left: none; border-bottom: 1px solid rgba(255,255,255,.18); }
  .si:first-child { padding-left: 12px; }
  .si + .si { border-left: none; }
  .si:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.18); }
  .si:nth-child(3), .si:nth-child(4) { border-bottom: none; }
  .mn-nav { grid-column: 1 / -1; margin-left: 0; justify-content: center; padding: 8px 4px; border-top: 1px solid rgba(255,255,255,.18); }

  .cat-overview { display: grid; grid-template-columns: 1fr 1fr; }
  .co-item { flex: unset; min-width: unset; border-right: none; border-bottom: 1px solid #e2e8f0; }
  .co-item:nth-child(odd) { border-right: 1px solid #e2e8f0; }
  .co-item:nth-child(3), .co-item:nth-child(4) { border-bottom: none; }

  .cat-head { flex-wrap: wrap; }
  .cat-desc { order: 10; width: 100%; font-size: 13px; margin-top: 4px; }
  .cat-count { margin-left: auto; }

  .cards { grid-template-columns: 1fr; }

  .page-hd-title { font-size: 20px; }
  .page-hd-desc  { font-size: 13px; }
  .page { padding: 20px 16px 48px; }
}