/* S10·S11 사주 + S08 AI 연결 섹션. semantic 토큰만, .sj- 접두사만. (mockup .m2- 대응) */

.sj-stack { display: grid; gap: var(--stack-gap); }
.sj-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.sj-num { font-variant-numeric: tabular-nums; }
.sj-mt { margin-top: var(--space-4); }
.sj-touch { min-height: var(--touch-min); display: inline-flex; align-items: center; flex: none; }
.sj-radio .ds-segment__item[aria-checked="true"] { background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-1); font-weight: var(--font-weight-bold); }
.sj-check-line { display: flex; align-items: center; gap: var(--space-1); min-height: var(--touch-min); font-size: var(--font-size-sm); }

/* 상태 카드 (로딩·키 없음·오류·풀이 받기) */
.sj-state { display: grid; justify-items: center; gap: var(--space-3); text-align: center; padding: var(--space-6) var(--space-4); }
.sj-state__title { font-size: var(--font-size-md); font-weight: var(--font-weight-bold); margin: 0; }
.sj-state .ds-btn-row { width: 100%; }
.sj-state details { width: 100%; text-align: left; font-size: var(--font-size-xs); color: var(--color-text-sub); overflow-wrap: anywhere; }
.sj-state summary { min-height: var(--touch-min); display: flex; align-items: center; cursor: pointer; }
.sj-skel { width: 100%; }
.sj-char-96 { width: 96px; height: 96px; }
.sj-bob { animation: sj-bob 1.6s var(--ease-out) infinite; }
@keyframes sj-bob { 50% { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .sj-bob { animation: none; } }

/* 원국 */
.sj-pillars-wrap { background: var(--saju-brand-bg); border-radius: var(--radius-lg); padding: var(--space-3); }
.sj-pillars-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sj-pillar__el { font-size: var(--font-size-2xs); color: var(--color-text-sub); }
.sj-pillar--me { box-shadow: inset 0 0 0 var(--border-width-strong) var(--saju-brand); }
.sj-pillar--unknown { background: transparent; border: var(--border-width-strong) dashed var(--color-border-strong); color: var(--color-text-sub); }
.sj-el { display: inline-block; border-bottom: 3px solid var(--c); }
.sj-el--wood  { --c: var(--ohaeng-wood); }
.sj-el--fire  { --c: var(--ohaeng-fire); }
.sj-el--earth { --c: var(--ohaeng-earth); }
.sj-el--metal { --c: var(--ohaeng-metal); }
.sj-el--water { --c: var(--ohaeng-water); }
.sj-ohaeng .ds-ohaeng__row { grid-template-columns: 44px 1fr minmax(24px, auto); }

/* 풀이 */
.sj-tips-title { font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); margin: 0 0 var(--space-2); }
.sj-keywords { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.sj-keywords span { padding: 2px var(--space-2); border-radius: var(--radius-pill); background: var(--c-bg, var(--saju-brand-bg)); color: var(--c-fg, var(--saju-brand-fg)); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); }
@media (max-width: 374px) {
  .ds-saju-tabs { grid-template-columns: repeat(4, minmax(80px, 1fr)); overflow-x: auto; scroll-snap-type: x mandatory; }
  .ds-saju-tab { scroll-snap-align: start; }
}

/* S08 AI 연결 */
.sj-card-title { font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); margin: 0 0 var(--space-3); }
.sj-key-row { display: flex; gap: var(--space-2); }
.sj-key-row .ds-input { flex: 1; min-width: 0; }
.sj-warn-more ul { margin: var(--space-2) 0 0; padding-left: var(--space-4); }
.sj-kv { display: grid; gap: var(--space-2); margin: 0; }
.sj-kv > div { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); }
.sj-kv dt { color: var(--color-text-sub); }
.sj-kv dd { margin: 0; font-weight: var(--font-weight-bold); text-align: right; overflow-wrap: anywhere; }