/* ════════════════════════════════════════════════════════════════════
   saju-flow.css — 사주집 [흐름 탐색] 카드 (전체계획 #153 · 경험계약 §5-2)
   ────────────────────────────────────────────────────────────────────
   색은 saju-ui.css 의 사주집 결(--sj-*)만 쓴다 — 한지·다크 브라운·저채도 앰버·샴페인 골드 소량.
   금지(2026-08-27 §9): 네온 · 강한 Glow · 두꺼운 금색 프레임 · 구간마다 다른 색.
   점(●○) 다섯 개가 [세기 1~5] 다 — 막대 그래프·숫자 도배를 하지 않는다.

   글꼴 1.3배(접근성 확대)에서 구간 라벨 4개가 겹치지 않아야 한다(#153 완료 기준) —
   라벨은 nowrap + 칸은 minmax(0,1fr) + 글자 .72rem. 412px 에서 칸 폭 ≈ 78px, 라벨 최대 "10~12월" 7자 ≈ 58px@1.3배.
   ════════════════════════════════════════════════════════════════════ */

.sf-card{
  align-self:stretch; margin:6px 4px 2px;
  padding:12px 12px 10px;
  border:1px solid var(--sj-line, rgba(228,205,170,.22)); border-radius:16px;
  background:var(--sj-card, rgba(48,34,24,.72)); color:var(--sj-ink, #f4ece0);
  box-shadow:0 2px 10px rgba(151,127,168,.08);
  font-size:.86rem;
}
.sf-head{ display:flex; flex-direction:column; gap:2px; margin-bottom:10px; }
.sf-title{ font-weight:600; font-size:.95rem; letter-spacing:.01em; }
.sf-basis{ color:var(--sj-sub, #cbb79c); font-size:.68rem; line-height:1.35; }

/* ── 구간 4 ── */
.sf-track{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:6px;
}
.sf-seg{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  min-width:0; padding:8px 2px 7px;
  border:1px solid var(--sj-line, rgba(228,205,170,.22)); border-radius:12px;
  background:rgba(151,127,168,.08); color:inherit; font-family:inherit; cursor:pointer;
  transition:background-color .18s ease, border-color .18s ease, transform .18s ease;
}
.sf-seg:active{ transform:translateY(1px); }
.sf-seg.is-open{
  border-color:rgba(201,169,97,.55);
  background:var(--sj-card-hi, rgba(60,43,29,.82));
}
.sf-seg-label{
  font-size:.72rem; font-weight:600; letter-spacing:-.01em; white-space:nowrap;
  max-width:100%; overflow:hidden; text-overflow:clip;
}
.sf-seg-kw{
  font-size:.58rem; color:var(--sj-sub, #cbb79c); line-height:1.2; white-space:nowrap;
  max-width:100%; overflow:hidden; text-overflow:ellipsis;
}

/* 세기 점 — 골드는 [찬 점] 에만, 아주 작게 */
.sf-dots{ display:inline-flex; gap:3px; }
.sf-dots i{
  display:block; width:6px; height:6px; border-radius:50%;
  background:rgba(151,127,168,.18);
}
.sf-dots i.on{ background:var(--sj-gold, #c9a961); }

/* ── 미니 카드 — 세그먼트 하나의 분야 도트만(§9 오늘의 운세 · §14 대화 속 인라인 카드) ──
   전체 그리드(SajuFlow.render)는 사주판 시트 안에서만 쓰고, 대화 중에는 이 작은 카드로 충분하다 —
   같은 el()/점() 을 재사용한다(saju-flow.js renderMini). 새 계산은 없다 — 이미 있는 세그먼트
   하나의 levels 만 보여준다. */
.sf-mini{
  align-self:flex-start; margin:6px 4px 2px 34px; max-width:min(88%,340px);
  padding:11px 13px 9px;
  border:1px solid var(--sj-line, rgba(151,127,168,.24)); border-radius:16px;
  background:var(--sj-card, rgba(255,255,255,.86)); color:var(--sj-ink, #463b52);
  box-shadow:0 2px 10px rgba(120,100,90,.14);
  font-size:.86rem;
}
.sf-mini-head{ display:flex; align-items:baseline; gap:6px; margin-bottom:6px; }
.sf-mini-title{ font-weight:700; font-size:.86rem; }
.sf-mini-sub{ color:var(--sj-sub, #8d7f95); font-size:.66rem; }
.sf-mini-row{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:8px;
  font-size:.78rem; padding:2px 0;
}
.sf-mini-row .sf-level-name{ white-space:nowrap; }
.sf-mini-row .sf-level-num{ color:var(--sj-sub, #8d7f95); font-size:.66rem; }

/* ── 펼쳐진 구간 ── */
.sf-detail{
  margin-top:8px; padding:10px 10px 8px;
  border:1px solid rgba(201,169,97,.28); border-radius:12px;
  background:rgba(151,127,168,.1);
  animation:sf-open .18s ease-out;
}
@keyframes sf-open{ from{ opacity:0; transform:translateY(-3px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .sf-detail{ animation:none; } }
.sf-detail-top{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.sf-detail-top strong{ font-size:.92rem; }
.sf-detail-sub{ color:var(--sj-sub, #cbb79c); font-size:.66rem; }
.sf-detail-line{ display:flex; gap:6px; flex-wrap:wrap; margin:6px 0 8px; }
.sf-tag{
  padding:2px 8px; border-radius:999px; font-size:.64rem;
  border:1px solid var(--sj-line, rgba(228,205,170,.22)); color:var(--sj-sub, #cbb79c);
}
.sf-tag-fill{ border-color:rgba(201,169,97,.45); color:var(--sj-ink, #f4ece0); }
.sf-tag-over{ opacity:.8; }
.sf-levels{ display:flex; flex-direction:column; gap:5px; }
.sf-level-row{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:8px;
  font-size:.74rem; padding:2px 4px; border-radius:8px;
}
.sf-level-row.is-active{ background:rgba(201,169,97,.12); }
.sf-level-name{ white-space:nowrap; }
.sf-level-num{ color:var(--sj-sub, #cbb79c); font-size:.66rem; }

/* ── 분야 4 ── */
.sf-fields{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:6px; margin-top:10px;
}
.sf-field{
  display:flex; align-items:center; justify-content:center; gap:4px;
  min-width:0; padding:7px 2px;
  border:1px solid var(--sj-line, rgba(228,205,170,.22)); border-radius:999px;
  background:rgba(151,127,168,.08); color:var(--sj-ink, #f4ece0); font-family:inherit; cursor:pointer;
  font-size:.74rem; white-space:nowrap;
  transition:background-color .18s ease, border-color .18s ease;
}
.sf-field[aria-pressed="true"]{
  border-color:rgba(201,169,97,.55); background:var(--sj-card-hi, rgba(60,43,29,.82));
}
.sf-field-emoji{ font-size:.8rem; line-height:1; }

/* 채팅 보기 안에서 카드는 말풍선보다 넓다 — 탐색 UI 가 중심이다 */
#chat .sf-card{ max-width:none; }