/* ====================================================================
 * hierarchy.css — 화면 위계 3층 시스템 (25차 · 2026-08-12)
 *
 * 왜 만들었나 (오라클 화면 실측):
 *   4411px(5.4화면)에 동급 기능 12개가 평면 나열. 원인 3층 —
 *   ① 위계: .sh(21px 볼드 + 오렌지 바) 하나가 페이지 제목과 하위 구획에
 *      똑같이 쓰여 h1과 h3의 무게가 같았다.
 *   ② 의미: 12개 중 8개는 "다른 화면으로 가는 문"인데 기능 카드처럼 박혀 있었다.
 *   ③ 표면: radius 8종(10~18px) · border 11종 · shadow 6종의 무작위 변주.
 *      변주가 의미를 안 실으니 노이즈만 되고 뇌는 "다 같은 것"으로 뭉갠다
 *      (게슈탈트 유사성).
 *
 * 원칙: 변주를 무작위 차원(radius·테두리 색)에서 빼고 의미 차원(위계 레벨)에 넣는다.
 *   위계 도구는 크기보다 굵기·색·여백 (Refactoring UI) · 강조는 조연을 죽여서 만든다.
 *
 * 레벨:
 *   L1 .sh          페이지 제목 — 화면당 1개 (기존 스타일 유지)
 *   L2 .sh2         구획 라벨 — 조용하게. 바 없음, 헤어라인으로 구획만 표시
 *   L3 카드 안 제목  각 모듈이 자체 렌더
 *
 * 표면(무게 3단):
 *   .srf-hero   화면당 1개 — "오늘 할 일". 채움 배경 + 액센트 테두리
 *   .srf-card   실제 기능 카드 — 카드 배경 + 얇은 테두리
 *   .srf-quiet  다른 화면으로 가는 문 — 테두리 없는 리스트 행 (.hub)
 * ==================================================================== */

/* ──────────────────────────────────────────
   L2 — 구획 라벨 (.sh2)
   .sh 대비: 21px→12px · 오렌지 바 제거 · 색 죽임 + 헤어라인
   "여백만으로 그룹핑하라 · 구분선은 최후" → 헤어라인은 아주 옅게만
   ────────────────────────────────────────── */
.sh2 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 26px 2px 11px;
}
.sh2:first-child { margin-top: 6px; }
.sh2-t {
  flex: none;
  font-family: 'Pretendard','Apple SD Gothic Neo',sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .3px;
  color: var(--t3);
}
/* 헤어라인 — 라벨 오른쪽으로 흘려 구획의 시작을 말없이 알린다 (연속성) */
.sh2::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--bd);
  opacity: .55;
}
/* 구획 부제 — 꼭 필요할 때만. 라벨 아래 한 줄 */
.sh2-sub {
  font-size: 11.5px;
  color: var(--t3);
  line-height: 1.55;
  margin: -5px 2px 11px;
  font-weight: 400;
}
/* 긴 목록(학습 개념 368개 등)의 구획 헤더는 스크롤 내내 붙어 있어야
   "지금 어느 구간인지"를 잃지 않는다. 배경을 깔아야 밑의 카드가 비쳐 보이지 않는다. */
.sh2-sticky {
  position: sticky;
  top: 0;
  z-index: 5;
  margin: 20px 0 9px;
  padding: 7px 2px;
  background: var(--bg);
}

/* 구획 라벨 우측 액션 (예: "전체 보기 →") — 헤어라인보다 뒤에 오도록 order 사용 */
.sh2-act {
  flex: none;
  order: 3;
  background: transparent;
  border: 0;
  padding: 3px 2px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--acc-text, var(--acc));
  cursor: pointer;
}
.sh2-act:active { opacity: .6; }

/* ──────────────────────────────────────────
   표면 — radius/shadow를 단일 스케일로 통일
   (기존 10·11·12·13·14·15·16·18px 난립 → 14px 하나)
   ────────────────────────────────────────── */
.srf-hero,
.srf-card,
.hub { border-radius: 14px; }

.srf-card {
  background: var(--bg2);
  border: 1px solid var(--bd);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}
.srf-hero {
  background: var(--bg2);
  border: 1.5px solid color-mix(in srgb, var(--acc) 42%, transparent);
  box-shadow: 0 3px 12px color-mix(in srgb, var(--acc) 13%, transparent);
}

/* ──────────────────────────────────────────
   목적지 허브 — "다른 화면으로 가는 문"들을 한 덩어리로
   각자 카드 + 각자 섹션 헤더로 흩어져 있던 것을 하나의 리스트로 접는다.
   행끼리는 테두리 대신 구분선 1개 (공통 영역 원리 — 한 카드 = 한 덩어리)
   ────────────────────────────────────────── */
.hub {
  background: var(--bg2);
  border: 1px solid var(--bd);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
  overflow: hidden;
}
.hub-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 13px;
  cursor: pointer;
  background: transparent;
  border: 0;
  width: 100%;
  text-align: left;
  font-family: inherit;
  transition: background .14s ease;
}
.hub-row + .hub-row { border-top: 1px solid color-mix(in srgb, var(--bd) 55%, transparent); }
.hub-row:active { background: var(--bg3); }

.hub-ic {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--bg3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
}
.hub-body { flex: 1; min-width: 0; }
.hub-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--t);
  line-height: 1.35;
  display: flex;
  align-items: center;
  gap: 6px;
}
.hub-desc {
  font-size: 11px;
  color: var(--t3);
  line-height: 1.45;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hub-arrow {
  flex: none;
  font-size: 15px;
  color: var(--t3);
  opacity: .6;
}
/* 잠김·전용 표시 — 색이 아니라 태그로도 전달 (색맹 대비) */
.hub-tag {
  flex: none;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .3px;
  padding: 2px 6px;
  border-radius: 20px;
  background: var(--bg3);
  color: var(--t3);
}
.hub-tag.on {
  background: color-mix(in srgb, var(--acc) 15%, transparent);
  color: var(--acc-text, var(--acc));
}
/* 허브 행의 아이콘 타일에 모듈 색을 주고 싶을 때만 (--hub-c 지정) */
.hub-row[style*="--hub-c"] .hub-ic {
  background: color-mix(in srgb, var(--hub-c) 14%, transparent);
}

/* ──────────────────────────────────────────
   구획 사이 리듬 — 4/8pt 스케일
   구획이 바뀌는 지점의 여백을 항목 간 여백보다 확실히 크게 (근접성)
   ────────────────────────────────────────── */
.sec-gap { height: 8px; }

/* ──────────────────────────────────────────
   오라클 화면 — 기존 카드들의 radius 난립 정리
   (모듈 자체 CSS를 건드리지 않고 이 레이어에서만 통일)
   ────────────────────────────────────────── */
#page-oracle .oracle-tier-card,
#page-oracle .oracle-challenge,
#page-oracle .oracle-guild-card,
#page-oracle .oracle-workshop-card,
#page-oracle .oracle-pro-card,
#page-oracle .oracle-report-inline-wrap,
#page-oracle .oracle-dash-btn { border-radius: 14px; }

/* 티어 카드 — 내 상태 구획의 대표라 카드 무게는 유지하되 과한 테두리만 정리 */
#page-oracle .oracle-tier-card { border-width: 1px; }

/* 이번 주 도전 — 지표명이 길면 제목이 2줄로 접혀 카드가 뭉개졌다.
   "무엇인지"(eyebrow) / "어떤 지표"(제목) / "언제·왜"(힌트) 3단으로 나눈다 */
.oracle-ch-eyebrow {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .4px;
  color: var(--acc-text, var(--acc));
  margin-bottom: 2px;
}
#page-oracle .oracle-ch-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 기존 개별 카드로 흩어져 있던 목적지 블록은 허브로 대체됐다 —
   혹시 다른 경로로 남아 렌더되면 눈에 띄지 않게 숨긴다 */
#page-oracle .oracle-eco-grid:empty { display: none; }