:root {
  color-scheme: dark;
  --bg: #030712;
  --surface: #111827;
  --surface-2: #1f2937;
  --surface-3: #0b1120;
  --ink: #f3f4f6;
  --muted: #9ca3af;
  --line: #374151;
  --accent: #e5e7eb;
  --accent-2: #d1d5db;
  --gold: #eab308;
  --positive: #22c55e;
  --negative: #ef4444;
  --mixed: #eab308;
  --neutral: #9ca3af;
  --wood: #22c55e;
  --wood-soft: rgba(34, 197, 94, 0.14);
  --fire: #ef4444;
  --fire-soft: rgba(239, 68, 68, 0.14);
  --earth: #eab308;
  --earth-soft: rgba(234, 179, 8, 0.16);
  --metal: #e5e7eb;
  --metal-soft: rgba(229, 231, 235, 0.12);
  --water: #60a5fa;
  --water-soft: rgba(96, 165, 250, 0.14);
  --reading-rose: #c084fc;
  --reading-rose-soft: rgba(192, 132, 252, 0.14);
  --shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
  --shadow-soft: 0 10px 24px rgba(0, 0, 0, 0.18);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family:
    Pretendard, "Noto Sans KR", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

button,
input,
select,
textarea,
.panel,
.metric,
.person-row,
.keyword,
.reading-section,
.personal-history-item,
.personal-chart-strip div,
.feature-grid div,
.view-switcher,
.narrative-tags span {
  border-radius: 8px;
}

.app-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 100vh;
}

body[data-view="reading"] .research-view,
body[data-view="research"] .reading-view {
  display: none !important;
}

.sidebar {
  border-right: 1px solid var(--line);
  background: #030712;
  padding: 22px 18px;
  overflow: auto;
}

.brand {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin-bottom: 24px;
}

.brand-mark {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid var(--line);
  background: #111827;
  color: var(--ink);
  font-weight: 800;
}

.brand h1,
.topbar h2,
.panel h3 {
  margin: 0;
  letter-spacing: 0;
}

.brand h1 {
  font-size: 18px;
}

.brand p,
.eyebrow,
.metric span,
.profile-list dt,
.panel-header span,
.person-meta,
.feature-grid span {
  color: var(--muted);
}

.brand p {
  margin: 4px 0 0;
  font-size: 13px;
}

.search-block {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.search-block label {
  font-size: 13px;
  font-weight: 700;
}

.search-block input {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  padding: 0 12px;
  outline: none;
}

.search-block input:focus {
  border-color: var(--accent-2);
  box-shadow: 0 0 0 3px rgba(229, 231, 235, 0.12);
}

.filters {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin-bottom: 16px;
}

.filter-chip {
  min-height: 34px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font-weight: 700;
}

.filter-chip.active {
  background: var(--accent-2);
  border-color: var(--accent-2);
  color: #030712;
}

.person-list {
  display: grid;
  gap: 8px;
}

.research-person-panel .person-list {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  max-height: min(48vh, 520px);
  overflow: auto;
  padding-right: 4px;
}

.person-row {
  width: 100%;
  border: 1px solid transparent;
  background: rgba(17, 24, 39, 0.82);
  padding: 12px;
  text-align: left;
}

.person-row:hover,
.person-row.active {
  border-color: var(--accent);
  background: var(--surface);
}

.person-row strong {
  display: block;
  margin-bottom: 4px;
}

.person-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
}

.workspace {
  min-width: 0;
  padding: 24px;
  overflow: auto;
}

body[data-view="reading"] .workspace,
body[data-view="research"] .workspace {
  width: min(980px, 100%);
  margin: 0 auto;
  padding: 30px clamp(18px, 4vw, 42px) 44px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

body[data-view="reading"] .topbar,
body[data-view="research"] .topbar {
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  text-align: center;
  border-bottom: 0;
  padding-bottom: 0;
}

.eyebrow {
  margin: 0 0 5px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.topbar h2 {
  font-size: 30px;
}

body[data-view="reading"] .topbar h2 {
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.1;
}

body[data-view="research"] .topbar h2 {
  font-size: clamp(26px, 3.5vw, 38px);
  line-height: 1.12;
}

.reading-heading,
.research-heading {
  min-width: 0;
  flex: 1 1 auto;
}

.reading-heading .eyebrow {
  color: var(--muted);
}

body[data-view="reading"] .reading-heading,
body[data-view="research"] .research-heading {
  flex: 1 0 100%;
}

.research-selected-person {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
}

body[data-view="research"] .toolbar {
  flex: 1 0 100%;
  justify-content: center;
}

.research-person-browser {
  margin-bottom: 12px;
  overflow: hidden;
}

.research-browser-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
}

.research-brand {
  margin-bottom: 0;
}

.research-brand h3 {
  margin: 0;
  color: var(--ink);
  font-size: 18px;
}

.research-brand p {
  margin-top: 4px;
}

.drawer-toggle {
  min-height: 40px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  padding: 0 12px;
  font-weight: 900;
  white-space: nowrap;
}

.drawer-toggle[aria-expanded="true"] {
  border-color: var(--accent-2);
  background: var(--accent-2);
  color: #030712;
}

.research-person-panel {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.research-person-panel[hidden] {
  display: none;
}

.research-filter-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(260px, 0.75fr);
  gap: 12px;
  align-items: end;
}

.research-filter-row .search-block,
.research-filter-row .filters {
  margin-bottom: 0;
}

.view-switcher {
  display: flex;
  flex: 0 0 auto;
  gap: 6px;
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 4px;
  box-shadow: var(--shadow-soft);
}

.view-switcher button {
  min-height: 34px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  padding: 0 12px;
  font-weight: 800;
  white-space: nowrap;
}

.view-switcher button.active {
  border-color: var(--accent-2);
  background: var(--accent-2);
  color: #030712;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.toolbar button,
.dialog-header button {
  min-height: 38px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  padding: 0 12px;
  font-weight: 700;
}

.toolbar button:hover,
.dialog-header button:hover {
  border-color: var(--accent-2);
  color: var(--accent-2);
}

select,
textarea,
.editor-grid input,
.mini-form input,
.candidate-grid input,
.quick-reading-form input,
.quick-reading-form textarea,
.birth-date-field button {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  outline: none;
}

select,
input,
textarea {
  accent-color: var(--accent-2);
}

textarea {
  resize: vertical;
}

select:focus,
textarea:focus,
.editor-grid input:focus,
.mini-form input:focus,
.candidate-grid input:focus,
.quick-reading-form input:focus,
.quick-reading-form textarea:focus,
.birth-date-field button:focus {
  border-color: var(--accent-2);
  box-shadow: 0 0 0 3px rgba(229, 231, 235, 0.12);
}

.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.metric,
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}

.metric {
  min-height: 86px;
  padding: 16px;
}

.metric span,
.metric strong {
  display: block;
}

.metric strong {
  margin-top: 8px;
  font-size: 26px;
}

.personal-panel {
  margin-bottom: 12px;
}

body[data-view="reading"] .personal-panel {
  position: relative;
  margin-top: 18px;
  overflow: hidden;
  border-top: 1px solid var(--line);
  padding: clamp(18px, 3vw, 28px);
}

.personal-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  margin-bottom: 18px;
}

.personal-title {
  margin-bottom: 0;
}

.reading-visual {
  display: grid;
  width: 118px;
  height: 118px;
  place-items: center;
  border: 1px solid var(--line);
  background: var(--surface-3);
  border-radius: 8px;
  box-shadow: inset 0 0 0 8px rgba(31, 41, 55, 0.42);
}

.saju-wheel {
  position: relative;
  display: grid;
  width: 76px;
  height: 76px;
  place-items: center;
  border: 1px solid #77928a;
  border-radius: 50%;
  background:
    linear-gradient(90deg, transparent calc(50% - 1px), var(--line) calc(50% - 1px), var(--line) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(0deg, transparent calc(50% - 1px), var(--line) calc(50% - 1px), var(--line) calc(50% + 1px), transparent calc(50% + 1px));
  color: var(--accent-2);
  font-weight: 900;
}

.saju-wheel span {
  position: absolute;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  color: var(--ink);
  font-size: 13px;
}

.saju-wheel span:nth-child(1) {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.saju-wheel span:nth-child(2) {
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}

.saju-wheel span:nth-child(3) {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.saju-wheel span:nth-child(4) {
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.personal-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.34fr);
  gap: 14px;
  align-items: start;
}

.quick-reading-form {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
}

body[data-view="reading"] .quick-reading-form {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  border: 1px solid var(--line);
  background: #0b1120;
  padding: 14px;
}

.quick-reading-form label,
.actual-events-field,
.birth-date-field {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.quick-reading-form input,
.quick-reading-form select,
.quick-reading-form textarea,
.birth-date-field button {
  min-height: 42px;
  padding: 0 11px;
  color: var(--ink);
  font-weight: 600;
}

.quick-reading-form textarea {
  min-height: 100px;
  padding: 10px 11px;
  line-height: 1.55;
}

body[data-view="reading"] .birth-date-field {
  grid-column: span 2;
}

body[data-view="reading"] .actual-events-field {
  grid-column: 1 / -1;
}

.actual-events-preview {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
  min-height: 46px;
  border: 1px solid color-mix(in srgb, var(--water), transparent 52%);
  border-left: 4px solid var(--water);
  background: color-mix(in srgb, var(--water-soft) 36%, var(--surface-3));
  padding: 10px;
}

.actual-events-preview-empty,
.actual-events-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.actual-events-preview-empty strong,
.actual-events-preview-head strong {
  display: block;
  color: var(--ink);
  font-size: 13px;
}

.actual-events-preview-empty span,
.actual-events-preview-head span,
.actual-events-preview-head em,
.actual-events-preview article small {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.45;
}

.actual-events-preview-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.actual-events-preview article {
  display: grid;
  gap: 5px;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--water), transparent 58%);
  background: rgba(255, 255, 255, 0.05);
  padding: 9px;
}

.actual-events-preview article.needs-type {
  border-color: color-mix(in srgb, var(--earth), transparent 46%);
}

.actual-events-preview article.explicit-type {
  border-color: color-mix(in srgb, var(--reading-rose), transparent 42%);
}

.actual-events-preview article.explicit-type strong {
  color: var(--reading-rose);
}

.actual-events-preview article div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.actual-events-preview article strong {
  color: var(--water);
  font-size: 13px;
}

.actual-events-preview article p,
.actual-events-preview > p {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.birth-date-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.birth-date-label-row button {
  min-height: 30px;
  border-color: color-mix(in srgb, var(--water), transparent 40%);
  background: var(--water-soft);
  color: var(--water);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 900;
}

.birth-date-label-row button[aria-expanded="true"] {
  border-color: var(--water);
  background: var(--water);
  color: #030712;
}

.birth-date-selects {
  display: grid;
  grid-template-columns: minmax(98px, 1.15fr) minmax(76px, 0.85fr) minmax(76px, 0.85fr);
  gap: 8px;
}

.birth-date-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--water), transparent 42%);
  border-left: 5px solid var(--water);
  background: color-mix(in srgb, var(--water-soft) 45%, var(--surface));
  padding: 10px;
}

.birth-date-panel[hidden] {
  display: none;
}

.birth-date-panel label {
  color: var(--muted);
}

.field-invalid input,
.field-invalid select,
.field-invalid textarea,
.field-invalid button,
.field-invalid .birth-date-selects select {
  border-color: var(--negative);
  box-shadow: 0 0 0 3px rgba(182, 59, 59, 0.12);
}

.field-message {
  color: var(--negative);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
}

.quick-reading-form .check-label {
  grid-template-columns: 1fr auto;
  align-items: center;
  min-height: 38px;
}

.quick-reading-form input[type="checkbox"] {
  width: 18px;
  min-height: 18px;
  padding: 0;
}

.quick-reading-actions {
  display: flex;
  flex-wrap: wrap;
  grid-column: 1 / -1;
  gap: 8px;
}

.quick-reading-actions button {
  min-height: 40px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  padding: 0 12px;
  font-weight: 800;
  white-space: nowrap;
}

.quick-reading-actions button[type="submit"] {
  background: var(--accent-2);
  border-color: var(--accent-2);
  color: #030712;
  min-width: 120px;
}

.quick-reading-actions button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.quick-reading-actions button[type="submit"]:hover {
  border-color: var(--accent-2);
  color: #030712;
}

.quick-reading-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.personal-history {
  border: 1px solid var(--line);
  background: var(--surface-3);
  margin-top: 0;
  padding: 12px;
}

.history-header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.history-header-actions button {
  min-height: 28px;
  border: 1px solid color-mix(in srgb, var(--negative), transparent 45%);
  background: rgba(239, 68, 68, 0.08);
  color: var(--negative);
  padding: 0 8px;
  font-size: 12px;
  font-weight: 900;
}

.history-header-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.personal-history-list {
  display: grid;
  gap: 8px;
}

.personal-history-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 10px;
}

.personal-history-item.active {
  border-color: var(--accent-2);
  box-shadow: 0 0 0 3px rgba(229, 231, 235, 0.08);
}

.personal-history-item strong,
.personal-history-item p {
  display: block;
  margin: 0 0 4px;
}

.personal-history-item p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.personal-history-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 9px;
}

.personal-history-meta span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.personal-history-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.personal-history-actions button {
  min-height: 32px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  padding: 0 9px;
  font-weight: 800;
}

.personal-history-actions button:hover {
  border-color: var(--accent-2);
  color: var(--accent-2);
}

.panel-header [data-status="error"] {
  color: var(--negative);
}

.panel-header [data-status="ready"] {
  color: var(--positive);
}

.personal-reading-output {
  display: grid;
  gap: 14px;
  margin-top: 16px;
}

.personal-reading-output > .analysis-text {
  border: 1px dashed var(--line);
  background: var(--surface-3);
  padding: 16px;
  text-align: center;
}

.personal-result-head {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.personal-result-head div,
.personal-chart-strip div {
  min-width: 0;
}

.personal-result-head div {
  border: 1px solid var(--line);
  border-top: 4px solid var(--metric-color, var(--accent-2));
  background: color-mix(in srgb, var(--metric-soft, var(--surface-3)) 46%, var(--surface));
  padding: 12px;
  box-shadow: var(--shadow-soft);
}

.personal-result-head div:nth-child(1) {
  --metric-color: var(--water);
  --metric-soft: var(--water-soft);
}

.personal-result-head div:nth-child(2) {
  --metric-color: var(--earth);
  --metric-soft: var(--earth-soft);
}

.personal-result-head div:nth-child(3) {
  --metric-color: var(--fire);
  --metric-soft: var(--fire-soft);
}

.personal-result-head div:nth-child(4) {
  --metric-color: var(--wood);
  --metric-soft: var(--wood-soft);
}

.personal-result-head div:nth-child(5) {
  --metric-color: var(--metal);
  --metric-soft: var(--metal-soft);
}

.personal-result-head div:nth-child(6) {
  --metric-color: var(--reading-rose);
  --metric-soft: var(--reading-rose-soft);
}

.personal-result-head div:nth-child(7) {
  --metric-color: var(--water);
  --metric-soft: var(--water-soft);
}

.personal-result-head div:nth-child(8) {
  --metric-color: var(--reading-rose);
  --metric-soft: var(--reading-rose-soft);
}

.personal-result-head span,
.personal-chart-strip span,
.personal-chart-strip small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.personal-result-head strong,
.personal-chart-strip strong {
  display: block;
  margin-top: 4px;
  overflow-wrap: anywhere;
}

.personal-chart-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.personal-chart-strip div {
  --element-color: var(--accent-2);
  --element-soft: var(--surface-3);
  border: 1px solid color-mix(in srgb, var(--element-color), transparent 42%);
  border-top: 4px solid var(--element-color);
  background: color-mix(in srgb, var(--element-soft) 48%, var(--surface));
  padding: 12px;
  box-shadow: var(--shadow-soft);
}

.personal-chart-strip strong {
  color: var(--element-color);
  font-size: 15px;
}

.personal-chart-strip small {
  margin-top: 5px;
  line-height: 1.35;
}

.element-wood {
  --element-color: var(--wood);
  --element-soft: var(--wood-soft);
}

.element-fire {
  --element-color: var(--fire);
  --element-soft: var(--fire-soft);
}

.element-earth {
  --element-color: var(--earth);
  --element-soft: var(--earth-soft);
}

.element-metal {
  --element-color: var(--metal);
  --element-soft: var(--metal-soft);
}

.element-water {
  --element-color: var(--water);
  --element-soft: var(--water-soft);
}

.element-neutral {
  --element-color: var(--neutral);
  --element-soft: var(--surface-2);
}

.pillar-glyphs {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

.pillar-glyphs b {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 6px;
  color: #030712;
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
}

.pillar-glyphs .element-wood {
  background: var(--wood);
}

.pillar-glyphs .element-fire {
  background: var(--fire);
  color: #fff;
}

.pillar-glyphs .element-earth {
  background: var(--earth);
}

.pillar-glyphs .element-metal {
  background: var(--metal);
}

.pillar-glyphs .element-water {
  background: #020617;
  color: #fff;
  box-shadow: inset 0 0 0 1px #64748b;
}

.pillar-label {
  margin-top: 8px;
}

.personal-quick-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}

.personal-quick-summary article {
  --summary-color: var(--accent-2);
  --summary-soft: var(--surface-3);
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--summary-color), transparent 42%);
  border-top: 5px solid var(--summary-color);
  background: color-mix(in srgb, var(--summary-soft) 44%, var(--surface));
  padding: 13px;
  box-shadow: var(--shadow-soft);
}

.personal-quick-summary article:nth-child(1) {
  --summary-color: var(--wood);
  --summary-soft: var(--wood-soft);
}

.personal-quick-summary article:nth-child(2) {
  --summary-color: var(--water);
  --summary-soft: var(--water-soft);
}

.personal-quick-summary article:nth-child(3) {
  --summary-color: var(--fire);
  --summary-soft: var(--fire-soft);
}

.personal-quick-summary article:nth-child(4) {
  --summary-color: var(--water);
  --summary-soft: var(--water-soft);
}

.personal-quick-summary article:nth-child(5) {
  --summary-color: var(--reading-rose);
  --summary-soft: var(--reading-rose-soft);
}

.personal-quick-summary article:nth-child(6) {
  --summary-color: var(--metal);
  --summary-soft: var(--metal-soft);
}

.personal-quick-summary span,
.personal-quick-summary em {
  color: var(--summary-color);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.personal-quick-summary strong {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.35;
}

.personal-quick-summary p {
  margin: 8px 0 10px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.personal-quick-summary article > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.personal-quick-summary em {
  border: 1px solid color-mix(in srgb, var(--summary-color), transparent 42%);
  background: rgba(255, 255, 255, 0.06);
  padding: 4px 7px;
}

.personal-difference-summary {
  display: grid;
  gap: 12px;
  border: 1px solid color-mix(in srgb, var(--water), transparent 44%);
  border-left: 5px solid var(--water);
  background:
    linear-gradient(135deg, rgba(96, 165, 250, 0.12), rgba(192, 132, 252, 0.08)),
    var(--surface);
  padding: 15px;
  box-shadow: var(--shadow-soft);
}

.personal-difference-head {
  display: grid;
  gap: 5px;
}

.personal-difference-head span {
  color: var(--water);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.personal-difference-head h3 {
  margin: 0;
  font-size: 18px;
}

.personal-difference-head p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.personal-difference-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.personal-difference-grid article {
  display: grid;
  gap: 8px;
  min-width: 0;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  padding: 12px;
}

.personal-difference-grid span,
.personal-difference-grid em {
  color: var(--water);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.personal-difference-grid strong {
  color: var(--ink);
  line-height: 1.35;
}

.personal-difference-grid p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.personal-difference-grid article > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.personal-difference-grid em {
  border: 1px solid rgba(96, 165, 250, 0.34);
  background: rgba(96, 165, 250, 0.08);
  padding: 4px 7px;
}

.personal-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.personal-result-actions button {
  min-height: 34px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  padding: 0 10px;
  font-weight: 800;
}

.personal-result-actions button:hover {
  border-color: var(--accent-2);
  color: var(--accent-2);
}

.personal-result-actions button.active {
  background: var(--accent-2);
  border-color: var(--accent-2);
  color: #030712;
}

.personal-result-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.38fr) minmax(0, 1fr);
  gap: 14px;
}

.personal-side,
.personal-insight {
  display: grid;
  gap: 12px;
}

.personal-side > div,
.personal-tab-panel {
  border: 1px solid var(--line);
  background: var(--surface-3);
  padding: 14px;
}

.personal-side > div {
  border-left: 5px solid var(--side-color, var(--accent-2));
  background: color-mix(in srgb, var(--side-soft, var(--surface-3)) 42%, var(--surface));
}

.personal-side > div:nth-child(1) {
  --side-color: var(--wood);
  --side-soft: var(--wood-soft);
}

.personal-side > div:nth-child(2) {
  --side-color: var(--gold);
  --side-soft: var(--earth-soft);
}

.personal-side > div:nth-child(3) {
  --side-color: var(--water);
  --side-soft: var(--water-soft);
}

.personal-insight-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.personal-insight-tabs button {
  min-height: 34px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  padding: 0 10px;
  font-weight: 800;
}

.personal-insight-tabs button.active {
  background: var(--accent-2);
  border-color: var(--accent-2);
  color: #030712;
}

.personal-insight-tabs button:nth-child(1).active {
  background: var(--wood);
  border-color: var(--wood);
  color: #030712;
}

.personal-insight-tabs button:nth-child(2).active {
  background: var(--fire);
  border-color: var(--fire);
  color: #fff;
}

.personal-insight-tabs button:nth-child(3).active {
  background: var(--water);
  border-color: var(--water);
  color: #030712;
}

.personal-insight-tabs button:nth-child(4).active {
  background: var(--earth);
  border-color: var(--earth);
  color: #030712;
}

.personal-insight-tabs button:nth-child(5).active {
  background: var(--reading-rose);
  border-color: var(--reading-rose);
  color: #030712;
}

.personal-insight-tabs button:nth-child(6).active {
  background: var(--metal);
  border-color: var(--metal);
  color: #030712;
}

.personal-insight-tabs button:nth-child(7).active {
  background: var(--reading-rose);
  border-color: var(--reading-rose);
  color: #030712;
}

.personal-insight-tabs button:nth-child(8).active {
  background: var(--fire);
  border-color: var(--fire);
  color: #fff;
}

.personal-insight-tabs button:nth-child(9).active {
  background: var(--wood);
  border-color: var(--wood);
  color: #030712;
}

.personal-insight-tabs button:nth-child(10).active {
  background: var(--water);
  border-color: var(--water);
  color: #030712;
}

.personal-insight-tabs button:nth-child(11).active {
  background: var(--metal);
  border-color: var(--metal);
  color: #030712;
}

.personal-tab-panel {
  display: grid;
  gap: 12px;
  --tab-color: var(--accent-2);
  --tab-soft: #eef7f7;
  border-top: 5px solid var(--tab-color);
  background: color-mix(in srgb, var(--tab-soft) 34%, var(--surface-3));
}

.tab-panel-temperament {
  --tab-color: var(--wood);
  --tab-soft: var(--wood-soft);
}

.tab-panel-talent {
  --tab-color: var(--fire);
  --tab-soft: var(--fire-soft);
}

.tab-panel-relationship {
  --tab-color: var(--water);
  --tab-soft: var(--water-soft);
}

.tab-panel-daewoon {
  --tab-color: var(--earth);
  --tab-soft: var(--earth-soft);
}

.tab-panel-calibration {
  --tab-color: var(--reading-rose);
  --tab-soft: var(--reading-rose-soft);
}

.tab-panel-glossary {
  --tab-color: var(--metal);
  --tab-soft: var(--metal-soft);
}

.tab-panel-evidence {
  --tab-color: var(--reading-rose);
  --tab-soft: var(--reading-rose-soft);
}

.tab-panel-elements {
  --tab-color: var(--earth);
  --tab-soft: var(--earth-soft);
}

.tab-panel-wealth {
  --tab-color: var(--gold);
  --tab-soft: var(--earth-soft);
}

.tab-panel-love {
  --tab-color: var(--reading-rose);
  --tab-soft: var(--reading-rose-soft);
}

.tab-panel-yearly {
  --tab-color: var(--water);
  --tab-soft: var(--water-soft);
}

.tab-panel-life {
  --tab-color: var(--metal);
  --tab-soft: var(--metal-soft);
}

.tab-panel-wellness {
  --tab-color: var(--wood);
  --tab-soft: var(--wood-soft);
}

.tab-panel-shadow {
  --tab-color: var(--fire);
  --tab-soft: var(--fire-soft);
}

.tab-panel-action {
  --tab-color: var(--wood);
  --tab-soft: var(--wood-soft);
}

.tab-panel-qa {
  --tab-color: var(--water);
  --tab-soft: var(--water-soft);
}

.personal-narrative-block {
  border: 1px solid var(--line);
  border-left: 5px solid var(--tab-color, var(--accent-2));
  background: color-mix(in srgb, var(--tab-soft, var(--surface-3)) 38%, var(--surface));
  padding: 14px;
}

.personal-narrative-block h4 {
  margin: 0 0 8px;
  font-size: 15px;
}

.personal-narrative-block p {
  margin: 0;
  color: var(--ink);
  line-height: 1.7;
}

.narrative-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.narrative-tags span {
  border: 1px solid var(--line);
  background: var(--tag-soft, #edf2ef);
  border-color: color-mix(in srgb, var(--tag-color, var(--line)), transparent 42%);
  color: var(--tag-color, var(--muted));
  padding: 5px 8px;
  font-size: 12px;
  font-weight: 800;
}

.narrative-tags span:nth-child(5n + 1) {
  --tag-color: var(--wood);
  --tag-soft: var(--wood-soft);
}

.narrative-tags span:nth-child(5n + 2) {
  --tag-color: var(--fire);
  --tag-soft: var(--fire-soft);
}

.narrative-tags span:nth-child(5n + 3) {
  --tag-color: var(--earth);
  --tag-soft: var(--earth-soft);
}

.narrative-tags span:nth-child(5n + 4) {
  --tag-color: var(--water);
  --tag-soft: var(--water-soft);
}

.narrative-tags span:nth-child(5n + 5) {
  --tag-color: var(--metal);
  --tag-soft: var(--metal-soft);
}

.personal-insight-block {
  --block-color: var(--accent-2);
  --block-soft: #eef7f7;
  border-top: 1px solid var(--line);
  border-left: 4px solid var(--block-color);
  background: color-mix(in srgb, var(--block-soft) 32%, transparent);
  padding: 12px 0 0 12px;
}

.personal-insight-block:nth-of-type(2) {
  --block-color: var(--wood);
  --block-soft: var(--wood-soft);
}

.personal-insight-block:nth-of-type(3) {
  --block-color: var(--fire);
  --block-soft: var(--fire-soft);
}

.personal-insight-block:nth-of-type(4) {
  --block-color: var(--earth);
  --block-soft: var(--earth-soft);
}

.personal-insight-block:nth-of-type(5) {
  --block-color: var(--water);
  --block-soft: var(--water-soft);
}

.personal-insight-block:nth-of-type(6) {
  --block-color: var(--metal);
  --block-soft: var(--metal-soft);
}

.personal-insight-block h4 {
  margin: 0 0 8px;
  font-size: 15px;
}

.personal-insight-block p {
  margin: 0 0 10px;
  color: var(--ink);
  line-height: 1.65;
}

.personal-insight-block ul {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.7;
}

.personal-insight-block li + li {
  margin-top: 5px;
}

.precision-score-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.precision-score-grid article {
  --element-color: var(--accent-2);
  --element-soft: var(--surface-3);
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--element-color), transparent 46%);
  border-top: 4px solid var(--element-color);
  background: color-mix(in srgb, var(--element-soft) 34%, var(--surface));
  padding: 12px;
}

.precision-score-grid article > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
}

.precision-score-grid span {
  color: var(--element-color);
  font-size: 12px;
  font-weight: 900;
}

.precision-score-grid strong {
  color: var(--ink);
}

.precision-score-track {
  height: 8px;
  overflow: hidden;
  margin: 9px 0 8px;
  background: color-mix(in srgb, var(--element-soft), var(--surface) 46%);
}

.precision-score-track i {
  display: block;
  height: 100%;
  background: var(--element-color);
}

.precision-score-grid p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.precision-score-grid.report {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: 24px;
}

.precision-score-grid.report article {
  background: #fff;
  border-color: #e5e7eb;
}

.precision-score-grid.report strong,
.precision-score-grid.report p {
  color: #111827;
}

.personal-qa-accordion {
  display: grid;
  gap: 12px;
}

.personal-qa-modern-note {
  display: grid;
  gap: 6px;
  border: 1px solid color-mix(in srgb, var(--reading-rose), transparent 46%);
  border-left: 5px solid var(--reading-rose);
  background: color-mix(in srgb, var(--reading-rose-soft) 28%, var(--surface));
  padding: 13px;
}

.personal-qa-modern-note strong {
  color: var(--ink);
  font-size: 15px;
}

.personal-qa-modern-note p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.personal-qa-tools {
  display: grid;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--water), transparent 48%);
  background: color-mix(in srgb, var(--water-soft) 24%, var(--surface));
  padding: 13px;
}

.personal-qa-tools label {
  display: grid;
  gap: 6px;
}

.personal-qa-tools label span,
.personal-qa-tools p {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.personal-qa-tools input {
  min-height: 40px;
  border: 1px solid var(--line);
  background: var(--surface-3);
  color: var(--ink);
  padding: 0 11px;
  font-weight: 750;
}

.personal-qa-quick,
.personal-qa-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.personal-qa-quick button,
.personal-qa-filters button {
  min-height: 32px;
  border: 1px solid color-mix(in srgb, var(--water), transparent 48%);
  background: var(--surface);
  color: var(--ink);
  padding: 0 9px;
  font-size: 12px;
  font-weight: 850;
}

.personal-qa-quick button {
  color: var(--water);
}

.personal-qa-filters button.active {
  background: var(--water);
  border-color: var(--water);
  color: #030712;
}

.personal-qa-tools p {
  margin: 0;
}

.personal-qa-category {
  display: grid;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--water), transparent 48%);
  border-left: 5px solid var(--water);
  background: color-mix(in srgb, var(--water-soft) 30%, var(--surface));
  padding: 13px;
}

.personal-qa-category-head {
  display: grid;
  gap: 5px;
}

.personal-qa-category-head strong {
  color: var(--ink);
  font-size: 15px;
}

.personal-qa-category-head span {
  color: var(--muted);
  line-height: 1.55;
}

.personal-qa-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 8px;
}

.personal-qa-item {
  --qa-color: var(--water);
  --qa-soft: var(--water-soft);
  border: 1px solid color-mix(in srgb, var(--qa-color), transparent 50%);
  border-left: 4px solid var(--qa-color);
  background: color-mix(in srgb, var(--qa-soft) 24%, var(--surface));
}

.personal-qa-item.qa-strong {
  --qa-color: var(--positive);
  --qa-soft: var(--wood-soft);
}

.personal-qa-item.qa-conditional {
  --qa-color: var(--gold);
  --qa-soft: var(--earth-soft);
}

.personal-qa-item summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  min-height: 48px;
  padding: 10px 11px;
  cursor: pointer;
  list-style: none;
}

.personal-qa-item summary::-webkit-details-marker {
  display: none;
}

.personal-qa-item summary::after {
  content: "+";
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--qa-color), transparent 44%);
  color: var(--qa-color);
  font-weight: 900;
}

.personal-qa-item[open] summary::after {
  content: "-";
}

.personal-qa-item summary span {
  color: var(--ink);
  font-weight: 850;
  line-height: 1.45;
}

.personal-qa-item summary em {
  border: 1px solid color-mix(in srgb, var(--qa-color), transparent 40%);
  background: color-mix(in srgb, var(--qa-soft) 55%, var(--surface));
  color: var(--qa-color);
  padding: 4px 7px;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.personal-qa-item > div {
  display: grid;
  gap: 8px;
  border-top: 1px solid color-mix(in srgb, var(--qa-color), transparent 60%);
  padding: 0 11px 12px;
}

.personal-qa-item p {
  margin: 10px 0 0;
  color: var(--ink);
  line-height: 1.72;
}

.personal-qa-item small {
  color: var(--muted);
  font-weight: 800;
}

.monthly-action-plan {
  display: grid;
  gap: 12px;
  border: 1px solid color-mix(in srgb, var(--water), transparent 45%);
  border-left: 5px solid var(--water);
  background: color-mix(in srgb, var(--water-soft) 30%, var(--surface));
  padding: 14px;
}

.monthly-action-head {
  display: grid;
  gap: 5px;
}

.monthly-action-head span {
  color: var(--water);
  font-size: 12px;
  font-weight: 900;
}

.monthly-action-head h4 {
  margin: 0;
  font-size: 16px;
}

.monthly-action-head p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.monthly-action-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.monthly-action-controls button {
  min-height: 32px;
  border: 1px solid color-mix(in srgb, var(--water), transparent 48%);
  background: var(--surface);
  color: var(--ink);
  padding: 0 9px;
  font-size: 12px;
  font-weight: 850;
}

.monthly-action-controls button.active {
  background: var(--water);
  border-color: var(--water);
  color: #030712;
}

.monthly-action-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
}

.monthly-action-item {
  --month-topic: var(--water);
  --month-soft: var(--water-soft);
  display: grid;
  gap: 8px;
  border: 1px solid color-mix(in srgb, var(--month-topic), transparent 52%);
  border-left: 4px solid var(--month-topic);
  background: color-mix(in srgb, var(--month-soft) 32%, var(--surface));
  padding: 12px;
}

.monthly-action-item.work {
  --month-topic: var(--wood);
  --month-soft: var(--wood-soft);
}

.monthly-action-item.money {
  --month-topic: var(--gold);
  --month-soft: var(--earth-soft);
}

.monthly-action-item.love {
  --month-topic: var(--reading-rose);
  --month-soft: var(--reading-rose-soft);
}

.monthly-action-item.study {
  --month-topic: var(--metal);
  --month-soft: var(--metal-soft);
}

.monthly-action-item.condition {
  --month-topic: var(--fire);
  --month-soft: var(--fire-soft);
}

.monthly-action-item.active {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--month-topic), transparent 38%);
}

.monthly-action-item div {
  display: grid;
  gap: 4px;
}

.monthly-action-item span,
.monthly-action-item em,
.monthly-action-item small {
  font-style: normal;
  font-weight: 850;
}

.monthly-action-item span {
  color: var(--month-topic);
  font-size: 12px;
}

.monthly-action-item strong {
  color: var(--ink);
  font-size: 15px;
}

.monthly-action-item em {
  color: var(--muted);
  font-size: 12px;
}

.monthly-action-item p {
  margin: 0;
  color: var(--ink);
  line-height: 1.65;
}

.monthly-action-item small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.personal-report-view {
  display: grid;
  gap: 18px;
  counter-reset: saju-report-page;
}

.saju-report-page {
  position: relative;
  counter-increment: saju-report-page;
  width: min(100%, 860px);
  min-height: 1120px;
  margin: 0 auto;
  border: 1px solid #e5e7eb;
  border-radius: 2px;
  background: #fbfbf8;
  color: #1f2937;
  padding: 68px 76px;
  box-shadow: 0 24px 54px rgba(0, 0, 0, 0.28);
}

.saju-report-page::after {
  content: "Modern Saju Report · " counter(saju-report-page, decimal-leading-zero);
  position: absolute;
  right: 76px;
  bottom: 28px;
  color: #9ca3af;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.saju-report-page h2,
.saju-report-page h3,
.saju-report-page strong {
  color: #111827;
}

.saju-report-cover {
  display: grid;
  align-content: start;
  gap: 32px;
}

.saju-report-mark {
  width: max-content;
  border: 2px solid #111827;
  background: #facc15;
  color: #111827;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 900;
}

.saju-report-title-block {
  display: grid;
  gap: 10px;
  margin-top: 38px;
  text-align: center;
}

.saju-report-title-block span {
  color: #6b7280;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.saju-report-title-block h2 {
  margin: 0;
  font-size: 34px;
}

.saju-report-title-block strong {
  font-size: 24px;
}

.saju-report-title-block p,
.saju-report-lead {
  margin: 0;
  color: #4b5563;
}

.saju-report-divider {
  height: 2px;
  background: linear-gradient(90deg, transparent, #d1d5db, transparent);
}

.saju-report-lead {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.75;
}

.saju-report-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.saju-report-metrics div {
  border: 1px solid #e5e7eb;
  border-left: 4px solid #111827;
  background: #fff;
  padding: 12px;
}

.saju-report-metrics span,
.saju-report-metrics small,
.saju-report-tags span,
.saju-report-footnote span {
  display: block;
  color: #6b7280;
  font-size: 12px;
  font-weight: 800;
}

.saju-report-metrics strong {
  display: block;
  margin: 5px 0;
  overflow-wrap: anywhere;
}

.saju-report-table-wrap {
  overflow-x: auto;
}

.saju-report-pillar-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  color: #1f2937;
  font-size: 13px;
}

.saju-report-pillar-table th,
.saju-report-pillar-table td {
  border: 1px solid #e5e7eb;
  padding: 10px;
  text-align: left;
  white-space: nowrap;
}

.saju-report-pillar-table th {
  background: #f3f4f6;
  color: #374151;
  font-weight: 900;
}

.saju-report-basis,
.saju-report-comparison {
  display: grid;
  gap: 14px;
  border: 1px solid #e5e7eb;
  background: #fff;
  padding: 16px;
}

.saju-report-basis {
  border-left: 5px solid #111827;
}

.saju-report-basis-head,
.saju-report-comparison-head {
  display: grid;
  gap: 5px;
}

.saju-report-basis-head span,
.saju-report-comparison-head span {
  color: #6b7280;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.saju-report-basis-head p,
.saju-report-comparison-head p,
.saju-report-comparison-empty {
  margin: 0;
  color: #4b5563;
  line-height: 1.65;
}

.saju-report-basis-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.saju-report-basis-grid article {
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  padding: 10px;
}

.saju-report-basis-grid span,
.saju-report-basis-grid small {
  display: block;
  color: #6b7280;
  font-size: 12px;
  font-weight: 800;
}

.saju-report-basis-grid strong {
  display: block;
  margin: 4px 0;
  overflow-wrap: anywhere;
}

.saju-report-basis-flags {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 18px;
  color: #4b5563;
  font-size: 13px;
  line-height: 1.55;
}

.saju-report-toc .saju-report-section-head span {
  width: 62px;
}

.saju-report-toc-grid {
  display: grid;
  gap: 9px;
  margin-top: 30px;
}

.saju-report-toc-grid article {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  border: 1px solid #e5e7eb;
  background: #fff;
  padding: 12px;
}

.saju-report-toc-grid article > span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  background: #111827;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
}

.saju-report-toc-grid div {
  display: grid;
  gap: 4px;
}

.saju-report-toc-grid em {
  color: #2563eb;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.saju-report-toc-grid p {
  margin: 0;
  color: #4b5563;
  line-height: 1.55;
}

.saju-report-toc-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 24px;
}

.saju-report-executive-list {
  display: grid;
  gap: 10px;
  margin-top: 26px;
}

.saju-report-executive-list article {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  border: 1px solid #e5e7eb;
  border-left: 5px solid #111827;
  background: #fff;
  padding: 13px 14px;
}

.saju-report-executive-list span {
  color: #2563eb;
  font-size: 12px;
  font-weight: 900;
}

.saju-report-executive-list strong {
  display: block;
  margin-bottom: 4px;
}

.saju-report-executive-list p {
  margin: 0;
  color: #374151;
  line-height: 1.65;
}

.saju-report-blend-box {
  display: grid;
  gap: 12px;
  border: 1px solid #dbeafe;
  border-left: 5px solid #2563eb;
  background: #eff6ff;
  padding: 15px;
  margin-top: 24px;
}

.saju-report-blend-box span,
.saju-report-blend-box small {
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 900;
}

.saju-report-blend-box strong {
  display: block;
  margin: 4px 0;
}

.saju-report-blend-box p {
  margin: 0;
  color: #374151;
  line-height: 1.6;
}

.saju-report-blend-track {
  display: flex;
  height: 10px;
  overflow: hidden;
  background: #dbeafe;
}

.saju-report-blend-track i,
.saju-report-blend-track b {
  display: block;
  height: 100%;
}

.saju-report-blend-track i {
  background: #111827;
}

.saju-report-blend-track b {
  background: #2563eb;
}

.saju-report-qa-page .saju-report-section-head span {
  background: #2563eb;
}

.saju-report-qa-list {
  display: grid;
  gap: 10px;
  margin-top: 28px;
}

.saju-report-qa-list article {
  display: grid;
  gap: 7px;
  border: 1px solid #e5e7eb;
  border-left: 4px solid #2563eb;
  background: #fff;
  padding: 12px 14px;
}

.saju-report-qa-list article.qa-strong {
  border-left-color: #16a34a;
}

.saju-report-qa-list article.qa-conditional {
  border-left-color: #f59e0b;
}

.saju-report-qa-list strong {
  color: #111827;
  line-height: 1.45;
}

.saju-report-qa-verdict {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.saju-report-qa-verdict span,
.saju-report-qa-verdict em {
  border: 1px solid #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
  padding: 4px 7px;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.qa-strong .saju-report-qa-verdict span {
  border-color: #bbf7d0;
  background: #dcfce7;
  color: #15803d;
}

.qa-conditional .saju-report-qa-verdict span {
  border-color: #fde68a;
  background: #fef3c7;
  color: #b45309;
}

.saju-report-qa-list p {
  margin: 0;
  color: #374151;
  font-size: 14px;
  line-height: 1.7;
}

.saju-report-section-head {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  border-bottom: 2px solid #e5e7eb;
  padding-bottom: 18px;
  margin-bottom: 30px;
}

.saju-report-section-head span {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  background: #111827;
  color: #fff;
  font-weight: 900;
}

.saju-report-section-head h3 {
  margin: 0;
  font-size: 25px;
  line-height: 1.35;
}

.saju-report-prose {
  display: grid;
  gap: 24px;
}

.saju-report-prose p {
  margin: 0;
  color: #374151;
  font-size: 18px;
  font-weight: 650;
  line-height: 1.95;
}

.saju-report-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 34px;
}

.saju-report-tags span {
  border: 1px solid #d1d5db;
  background: #fff;
  color: #374151;
  padding: 7px 10px;
}

.saju-report-evidence-tags {
  display: grid;
  gap: 8px;
  border: 1px solid #e5e7eb;
  border-left: 4px solid #111827;
  background: #fff;
  margin: -10px 0 26px;
  padding: 10px 12px;
}

.saju-report-evidence-tags strong {
  color: #6b7280;
  font-size: 12px;
  text-transform: uppercase;
}

.saju-report-evidence-tags div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.saju-report-evidence-tags span {
  border: 1px solid #d1d5db;
  background: #f9fafb;
  color: #374151;
  padding: 5px 8px;
  font-size: 12px;
  font-weight: 800;
}

.saju-report-difference-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 34px;
}

.saju-report-difference-grid article {
  display: grid;
  gap: 9px;
  border: 1px solid #e5e7eb;
  border-left: 5px solid #2563eb;
  background: #fff;
  padding: 14px;
}

.saju-report-difference-grid span {
  color: #2563eb;
  font-size: 12px;
  font-weight: 900;
}

.saju-report-difference-grid p {
  margin: 0;
  color: #374151;
  line-height: 1.65;
}

.saju-report-difference-grid article > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.saju-report-difference-grid em {
  border: 1px solid #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
  padding: 5px 8px;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.saju-report-element-grid {
  display: grid;
  gap: 10px;
  margin-top: 34px;
}

.saju-report-element-grid article {
  --element-color: #111827;
  display: grid;
  gap: 9px;
  border: 1px solid #e5e7eb;
  border-left: 6px solid var(--element-color);
  background: #fff;
  padding: 13px;
}

.saju-report-element-grid article > div:first-child {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.saju-report-element-grid article span,
.saju-report-element-grid article small {
  color: #4b5563;
  line-height: 1.55;
}

.saju-report-element-track {
  height: 8px;
  overflow: hidden;
  background: #e5e7eb;
}

.saju-report-element-track i {
  display: block;
  height: 100%;
  background: var(--element-color);
}

.saju-report-month-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 30px;
}

.saju-report-month-grid article {
  border: 1px solid #e5e7eb;
  border-left: 4px solid #d1d5db;
  background: #fff;
  padding: 12px;
}

.saju-report-month-grid article.active {
  border-left-color: #2563eb;
  background: #eff6ff;
}

.saju-report-month-grid span,
.saju-report-month-grid p {
  margin: 0;
  color: #6b7280;
  font-size: 12px;
  font-weight: 800;
}

.saju-report-month-grid strong {
  display: block;
  margin: 5px 0;
}

.saju-report-month-score-head {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin: 8px 0;
}

.saju-report-month-score-head em,
.saju-report-month-score-head small {
  border: 1px solid #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
  padding: 4px 6px;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.saju-report-month-scores {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  margin-top: 8px;
}

.saju-report-month-scores div {
  position: relative;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  padding: 5px 4px 7px;
}

.saju-report-month-scores span,
.saju-report-month-scores strong {
  position: relative;
  z-index: 1;
  display: block;
  margin: 0;
  font-size: 10px;
  line-height: 1.2;
}

.saju-report-month-scores strong {
  color: #111827;
  font-size: 12px;
}

.saju-report-month-scores i {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  background: #2563eb;
}

.saju-report-page .monthly-action-plan {
  margin-top: 18px;
  border-color: #dbeafe;
  border-left-color: #2563eb;
  background: #f8fafc;
}

.saju-report-page .monthly-action-head span {
  color: #2563eb;
}

.saju-report-page .monthly-action-head h4,
.saju-report-page .monthly-action-item strong,
.saju-report-page .monthly-action-item p {
  color: #111827;
}

.saju-report-page .monthly-action-head p,
.saju-report-page .monthly-action-item em,
.saju-report-page .monthly-action-item small {
  color: #4b5563;
}

.saju-report-page .monthly-action-item {
  background: #fff;
}

.saju-report-timeline {
  display: grid;
  gap: 10px;
  margin-top: 30px;
}

.saju-report-timeline article,
.saju-report-calibration {
  border: 1px solid #e5e7eb;
  background: #fff;
  padding: 13px;
}

.saju-report-timeline article {
  border-left: 5px solid #d1d5db;
}

.saju-report-timeline article.active {
  border-left-color: #111827;
  background: #f3f4f6;
}

.saju-report-timeline strong,
.saju-report-timeline span,
.saju-report-timeline small {
  display: block;
}

.saju-report-timeline span,
.saju-report-timeline small {
  margin-top: 5px;
  color: #4b5563;
  line-height: 1.55;
}

.saju-report-calibration {
  display: grid;
  grid-template-columns: minmax(180px, 0.34fr) minmax(0, 1fr);
  gap: 16px;
  margin-top: 16px;
  border-left: 5px solid #7c3aed;
}

.saju-report-calibration span {
  color: #7c3aed;
  font-size: 12px;
  font-weight: 900;
}

.saju-report-calibration p,
.saju-report-calibration li {
  color: #374151;
  line-height: 1.65;
}

.saju-report-calibration ul,
.saju-report-conclusion {
  margin: 0;
  padding-left: 20px;
}

.saju-report-comparison {
  margin-top: 16px;
  border-left: 5px solid #7c3aed;
}

.saju-report-comparison-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.saju-report-comparison-grid article {
  display: grid;
  gap: 7px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  padding: 12px;
}

.saju-report-comparison-grid span {
  color: #7c3aed;
  font-size: 12px;
  font-weight: 900;
}

.saju-report-comparison-grid em {
  color: #6b7280;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.saju-report-comparison-grid p {
  margin: 0;
  color: #374151;
  line-height: 1.6;
}

.saju-report-delta-mini {
  display: grid;
  gap: 8px;
}

.saju-report-delta-mini div {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) 86px 86px 44px;
  gap: 8px;
  align-items: center;
  border: 1px solid #e5e7eb;
  background: #fff;
  padding: 9px;
}

.saju-report-delta-mini div.actual-boost,
.saju-report-delta-mini div.actual-only {
  border-left: 4px solid #22c55e;
}

.saju-report-delta-mini div.relative-down {
  border-left: 4px solid #ef4444;
}

.saju-report-delta-mini span,
.saju-report-delta-mini em {
  color: #6b7280;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.saju-report-delta-mini em {
  color: #111827;
  text-align: right;
}

.saju-report-conclusion {
  display: grid;
  gap: 12px;
  margin-top: 34px;
  color: #1f2937;
  font-size: 17px;
  font-weight: 750;
  line-height: 1.75;
}

.saju-report-footnote {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid #e5e7eb;
  margin-top: 48px;
  padding-top: 14px;
}

.calibration-match-block {
  display: grid;
  gap: 10px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.calibration-match-block h4 {
  margin: 0;
  font-size: 15px;
}

.calibration-match-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.calibration-score-board {
  display: grid;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--reading-rose), transparent 42%);
  border-left: 5px solid var(--reading-rose);
  background: color-mix(in srgb, var(--reading-rose-soft) 30%, var(--surface));
  padding: 12px;
}

.calibration-reliability-panel {
  --reliability-color: var(--water);
  --reliability-soft: var(--water-soft);
  display: grid;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--reliability-color), transparent 42%);
  border-left: 5px solid var(--reliability-color);
  background: color-mix(in srgb, var(--reliability-soft) 30%, var(--surface));
  padding: 12px;
}

.calibration-reliability-panel.reliability-strong {
  --reliability-color: var(--positive);
  --reliability-soft: var(--wood-soft);
}

.calibration-reliability-panel.reliability-good {
  --reliability-color: var(--water);
  --reliability-soft: var(--water-soft);
}

.calibration-reliability-panel.reliability-experimental {
  --reliability-color: var(--earth);
  --reliability-soft: var(--earth-soft);
}

.calibration-reliability-panel.reliability-low {
  --reliability-color: var(--fire);
  --reliability-soft: var(--fire-soft);
}

.calibration-reliability-meter {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.calibration-reliability-meter div {
  height: 100%;
  border-radius: inherit;
  background: var(--reliability-color);
}

.calibration-reliability-panel p {
  margin: 0;
  color: var(--ink);
  line-height: 1.62;
}

.calibration-reliability-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.calibration-reliability-grid div {
  border: 1px solid color-mix(in srgb, var(--reliability-color), transparent 50%);
  background: rgba(255, 255, 255, 0.05);
  padding: 9px;
}

.calibration-reliability-grid span,
.calibration-reliability-grid strong {
  display: block;
}

.calibration-reliability-grid span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.calibration-reliability-grid strong {
  margin-top: 4px;
  color: var(--reliability-color);
  font-size: 13px;
  line-height: 1.35;
}

.calibration-reliability-panel ul {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.65;
}

.actual-life-comparison-panel {
  display: grid;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--earth), transparent 42%);
  border-left: 5px solid var(--earth);
  background: color-mix(in srgb, var(--earth-soft) 30%, var(--surface));
  padding: 12px;
}

.actual-life-comparison-panel p {
  margin: 0;
  color: var(--ink);
  line-height: 1.62;
}

.actual-life-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.actual-life-grid div {
  border: 1px solid color-mix(in srgb, var(--earth), transparent 50%);
  background: rgba(255, 255, 255, 0.05);
  padding: 9px;
}

.actual-life-grid span,
.actual-life-grid strong {
  display: block;
}

.actual-life-grid span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.actual-life-grid strong {
  margin-top: 4px;
  color: var(--earth);
  font-size: 13px;
  line-height: 1.35;
}

.actual-life-note {
  border-top: 1px solid color-mix(in srgb, var(--earth), transparent 65%);
  padding-top: 9px;
  color: var(--muted) !important;
  font-size: 13px;
}

.calibration-delta-panel {
  display: grid;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--metal), transparent 42%);
  border-left: 5px solid var(--metal);
  background: color-mix(in srgb, var(--metal-soft) 34%, var(--surface));
  padding: 12px;
}

.calibration-delta-panel p {
  margin: 0;
  color: var(--ink);
  line-height: 1.62;
}

.calibration-delta-list {
  display: grid;
  gap: 8px;
}

.calibration-delta-row {
  display: grid;
  grid-template-columns: minmax(130px, 0.72fr) minmax(0, 1fr) 44px;
  align-items: center;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--metal), transparent 56%);
  background: rgba(255, 255, 255, 0.05);
  padding: 10px;
}

.calibration-delta-row.actual-only,
.calibration-delta-row.actual-boost {
  border-color: color-mix(in srgb, var(--positive), transparent 42%);
}

.calibration-delta-title {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.calibration-delta-title strong,
.calibration-delta-title span {
  overflow-wrap: anywhere;
}

.calibration-delta-title strong {
  color: var(--ink);
  font-size: 14px;
}

.calibration-delta-title span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.calibration-delta-bars {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.calibration-delta-bars div {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 8px;
}

.calibration-delta-bars span,
.calibration-delta-bars em,
.calibration-delta-row i {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.calibration-delta-bars b {
  display: block;
  height: 8px;
  min-width: 3px;
  max-width: 100%;
  background: linear-gradient(90deg, var(--metal), var(--positive));
}

.calibration-delta-bars div:first-child b {
  background: color-mix(in srgb, var(--metal), white 8%);
}

.calibration-delta-row i {
  justify-self: end;
  color: var(--positive);
}

.calibration-delta-row.relative-down i {
  color: var(--fire);
}

.actual-timing-panel {
  display: grid;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--water), transparent 42%);
  border-left: 5px solid var(--water);
  background: color-mix(in srgb, var(--water-soft) 34%, var(--surface));
  padding: 12px;
}

.actual-timing-panel p {
  margin: 0;
  color: var(--ink);
  line-height: 1.62;
}

.actual-timing-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.actual-timing-grid div {
  border: 1px solid color-mix(in srgb, var(--water), transparent 54%);
  background: rgba(255, 255, 255, 0.05);
  padding: 9px;
}

.actual-timing-grid span,
.actual-timing-grid strong {
  display: block;
}

.actual-timing-grid span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.actual-timing-grid strong {
  margin-top: 4px;
  color: var(--water);
  font-size: 13px;
  line-height: 1.35;
}

.actual-timing-list {
  display: grid;
  gap: 8px;
}

.actual-timing-row {
  display: grid;
  gap: 6px;
  border: 1px solid color-mix(in srgb, var(--water), transparent 56%);
  background: rgba(255, 255, 255, 0.05);
  padding: 10px;
}

.actual-timing-row.matched {
  border-color: color-mix(in srgb, var(--positive), transparent 38%);
}

.actual-timing-row.missed {
  border-color: color-mix(in srgb, var(--fire), transparent 46%);
}

.actual-timing-row > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.actual-timing-row strong,
.actual-timing-row span,
.actual-timing-row small {
  overflow-wrap: anywhere;
}

.actual-timing-row strong {
  color: var(--ink);
  font-size: 14px;
}

.actual-timing-row span,
.actual-timing-row small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.actual-timing-row p {
  color: var(--ink);
}

.personal-correction-panel {
  display: grid;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--reading-rose), transparent 40%);
  border-left: 5px solid var(--reading-rose);
  background: color-mix(in srgb, var(--reading-rose-soft) 36%, var(--surface));
  padding: 12px;
}

.personal-correction-panel p {
  margin: 0;
  color: var(--ink);
  line-height: 1.62;
}

.personal-correction-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.personal-correction-metrics div {
  border: 1px solid color-mix(in srgb, var(--reading-rose), transparent 54%);
  background: rgba(255, 255, 255, 0.05);
  padding: 9px;
}

.personal-correction-metrics span,
.personal-correction-metrics strong {
  display: block;
}

.personal-correction-metrics span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.personal-correction-metrics strong {
  margin-top: 4px;
  color: var(--reading-rose);
  font-size: 13px;
  line-height: 1.35;
}

.personal-correction-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.personal-correction-card {
  display: grid;
  gap: 7px;
  border: 1px solid color-mix(in srgb, var(--reading-rose), transparent 56%);
  background: rgba(255, 255, 255, 0.05);
  padding: 10px;
}

.personal-correction-card h4 {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
}

.personal-correction-card ul,
.personal-correction-actions {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.62;
}

.personal-correction-card li,
.personal-correction-actions li {
  overflow-wrap: anywhere;
}

.personal-correction-actions {
  border-top: 1px solid color-mix(in srgb, var(--reading-rose), transparent 66%);
  padding-top: 9px;
}

.calibration-score-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.calibration-score-card {
  --score-color: var(--reading-rose);
  --score-soft: var(--reading-rose-soft);
  display: grid;
  gap: 8px;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--score-color), transparent 42%);
  background: color-mix(in srgb, var(--score-soft) 36%, var(--surface-3));
  padding: 11px;
}

.calibration-score-card.score-positive {
  --score-color: var(--positive);
  --score-soft: var(--wood-soft);
}

.calibration-score-card.score-transition {
  --score-color: var(--earth);
  --score-soft: var(--earth-soft);
}

.calibration-score-card.score-caution {
  --score-color: var(--fire);
  --score-soft: var(--fire-soft);
}

.calibration-score-card > div:first-child {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 8px;
  align-items: start;
}

.calibration-score-card span,
.calibration-score-card small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
}

.calibration-score-card strong {
  color: var(--score-color);
  font-size: 16px;
  line-height: 1.35;
}

.calibration-score-card em {
  grid-row: span 2;
  color: var(--score-color);
  font-size: 18px;
  font-style: normal;
  font-weight: 900;
}

.calibration-score-card p {
  margin: 0;
  color: var(--ink);
  line-height: 1.62;
}

.calibration-score-track {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.calibration-score-track div {
  height: 100%;
  border-radius: inherit;
  background: var(--score-color);
}

.calibration-match-card {
  --calibration-color: var(--reading-rose);
  --calibration-soft: var(--reading-rose-soft);
  display: grid;
  gap: 8px;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--calibration-color), transparent 42%);
  border-left: 5px solid var(--calibration-color);
  background: color-mix(in srgb, var(--calibration-soft) 38%, var(--surface));
  padding: 12px;
}

.calibration-match-card.calibration-positive {
  --calibration-color: var(--positive);
  --calibration-soft: var(--wood-soft);
}

.calibration-match-card.calibration-transition {
  --calibration-color: var(--earth);
  --calibration-soft: var(--earth-soft);
}

.calibration-match-card.calibration-caution {
  --calibration-color: var(--fire);
  --calibration-soft: var(--fire-soft);
}

.calibration-match-card span,
.calibration-match-card small,
.calibration-match-metrics em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.45;
}

.calibration-match-card strong {
  color: var(--calibration-color);
  font-size: 16px;
  line-height: 1.35;
}

.calibration-match-card p {
  margin: 0;
  color: var(--ink);
  line-height: 1.62;
}

.calibration-match-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.calibration-match-metrics em {
  border: 1px solid color-mix(in srgb, var(--calibration-color), transparent 46%);
  background: rgba(255, 255, 255, 0.06);
  color: var(--calibration-color);
  padding: 4px 7px;
}

.daewoon-mini-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.monthly-flow-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.daewoon-mini-list div,
.monthly-flow-list div {
  --flow-color: var(--accent-2);
  --flow-soft: #eef7f7;
  border-top: 1px solid color-mix(in srgb, var(--flow-color), transparent 48%);
  border-left: 4px solid var(--flow-color);
  background: color-mix(in srgb, var(--flow-soft) 40%, var(--surface-3));
  padding: 9px 8px 8px;
}

.daewoon-mini-list div:nth-child(5n + 1),
.monthly-flow-list div:nth-child(5n + 1) {
  --flow-color: var(--wood);
  --flow-soft: var(--wood-soft);
}

.daewoon-mini-list div:nth-child(5n + 2),
.monthly-flow-list div:nth-child(5n + 2) {
  --flow-color: var(--fire);
  --flow-soft: var(--fire-soft);
}

.daewoon-mini-list div:nth-child(5n + 3),
.monthly-flow-list div:nth-child(5n + 3) {
  --flow-color: var(--earth);
  --flow-soft: var(--earth-soft);
}

.daewoon-mini-list div:nth-child(5n + 4),
.monthly-flow-list div:nth-child(5n + 4) {
  --flow-color: var(--water);
  --flow-soft: var(--water-soft);
}

.daewoon-mini-list div:nth-child(5n + 5),
.monthly-flow-list div:nth-child(5n + 5) {
  --flow-color: var(--metal);
  --flow-soft: var(--metal-soft);
}

.daewoon-mini-list div.active,
.monthly-flow-list div.active {
  border-color: var(--gold);
  background: color-mix(in srgb, var(--earth-soft) 55%, var(--surface));
  color: var(--gold);
  box-shadow: inset 0 0 0 1px rgba(166, 107, 25, 0.26);
}

.daewoon-mini-list strong,
.daewoon-mini-list span,
.monthly-flow-list strong,
.monthly-flow-list span {
  display: block;
}

.daewoon-mini-list span,
.monthly-flow-list span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  gap: 12px;
}

.panel {
  min-width: 0;
  padding: 18px;
}

.panel.wide {
  grid-column: 1 / -1;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.panel h3 {
  font-size: 16px;
}

.profile-list {
  display: grid;
  gap: 13px;
  margin: 0;
}

.profile-list div {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 12px;
}

.profile-list dt {
  font-size: 13px;
  font-weight: 800;
}

.profile-list dd {
  margin: 0;
}

.keyword-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.keyword {
  border: 1px solid var(--line);
  background: var(--surface-2);
  padding: 7px 10px;
  font-size: 13px;
  font-weight: 700;
}

.metric strong,
.panel-header h3 {
  color: var(--ink);
}

.timeline {
  display: grid;
  gap: 10px;
}

.event-row {
  display: grid;
  grid-template-columns: 120px 1fr 68px;
  gap: 14px;
  align-items: start;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.event-date {
  color: var(--muted);
  font-weight: 800;
}

.event-type {
  display: inline-block;
  margin-bottom: 5px;
  color: var(--accent-2);
  font-weight: 800;
}

.event-description {
  margin: 0 0 5px;
}

.event-source {
  color: var(--muted);
  font-size: 12px;
}

.impact {
  justify-self: end;
  min-width: 52px;
  border: 1px solid var(--line);
  background: var(--surface-3);
  padding: 6px 8px;
  text-align: center;
  font-weight: 800;
}

.event-actions {
  display: grid;
  justify-items: end;
  gap: 8px;
}

.event-actions button,
.compact-item button,
.mini-form button,
.editor-actions button,
.candidate-grid button {
  min-height: 34px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  padding: 0 10px;
  font-weight: 800;
}

.event-actions button:hover,
.compact-item button:hover,
.mini-form button:hover,
.editor-actions button:hover,
.candidate-grid button:hover {
  border-color: var(--accent);
}

.polarity-positive .impact {
  color: var(--positive);
}

.polarity-negative .impact {
  color: var(--negative);
}

.polarity-mixed .impact {
  color: var(--mixed);
}

.polarity-neutral .impact {
  color: var(--neutral);
}

.analysis-text {
  margin: 0;
  color: var(--ink);
  line-height: 1.7;
}

.reading-preview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.reading-section {
  border: 1px solid var(--line);
  background: var(--surface-3);
  padding: 14px;
}

.reading-section h4 {
  margin: 0 0 8px;
  font-size: 15px;
}

.reading-section p {
  margin: 0 0 10px;
  color: var(--ink);
  line-height: 1.6;
}

.reading-section ul {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.6;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.feature-grid div {
  border: 1px solid var(--line);
  background: var(--surface-3);
  padding: 12px;
}

.feature-grid span,
.feature-grid strong {
  display: block;
}

.feature-grid strong {
  margin-top: 5px;
  font-size: 13px;
}

.feature-grid small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.element-section {
  margin-top: 16px;
}

.panel-header.compact {
  margin-bottom: 9px;
}

.element-bars {
  display: grid;
  gap: 8px;
}

.element-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 24px;
  gap: 10px;
  align-items: center;
  color: var(--element-color, var(--accent-2));
}

.element-row span,
.element-row strong {
  font-size: 13px;
  font-weight: 800;
}

.element-row span {
  display: grid;
  min-height: 24px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--element-color, var(--line)), transparent 42%);
  background: var(--element-soft, var(--surface-2));
}

.element-track {
  height: 11px;
  background: color-mix(in srgb, var(--element-soft, var(--surface-2)), var(--surface) 46%);
  border: 1px solid var(--line);
}

.element-fill {
  height: 100%;
  background: var(--element-color, var(--accent-2));
}

.element-analysis-mini {
  display: grid;
  gap: 7px;
  margin-top: 12px;
}

.element-analysis-mini div {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  border-top: 1px solid var(--line);
  padding-top: 7px;
}

.element-analysis-mini strong {
  color: var(--accent-2);
  font-size: 12px;
}

.element-analysis-mini span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.stat-list,
.compact-list,
.candidate-list {
  display: grid;
  gap: 8px;
}

.split-lists {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.stat-list div {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 10px;
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.stat-list span,
.compact-item span {
  color: var(--muted);
  font-size: 12px;
}

.stat-list strong {
  overflow-wrap: anywhere;
}

.stats-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.stats-controls.single {
  grid-template-columns: minmax(180px, 320px);
}

.stats-controls label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.stats-controls select {
  min-height: 38px;
  padding: 0 10px;
  color: var(--ink);
  font-weight: 600;
}

.pattern-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.pattern-card {
  border: 1px solid var(--line);
  background: var(--surface-3);
  padding: 12px;
}

.pattern-card h4 {
  margin: 0 0 10px;
  font-size: 14px;
}

.pattern-card div {
  display: grid;
  gap: 3px;
  border-top: 1px solid var(--line);
  padding-top: 8px;
  margin-top: 8px;
}

.pattern-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.pattern-card strong {
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.compact-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.compact-item strong,
.compact-item p {
  display: block;
  margin: 0 0 4px;
}

.compact-item a {
  color: var(--accent-2);
}

.candidate-item {
  display: grid;
  grid-template-columns: minmax(160px, 0.8fr) minmax(220px, 1fr) minmax(260px, 1.2fr);
  gap: 14px;
  align-items: start;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.candidate-item strong,
.candidate-item span,
.candidate-item p {
  display: block;
}

.candidate-item p {
  margin: 4px 0 0;
  line-height: 1.45;
}

.candidate-item span {
  color: var(--muted);
  font-size: 12px;
}

.editor-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.editor-grid label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.editor-grid input,
.editor-grid select {
  min-height: 38px;
  padding: 0 10px;
  color: var(--ink);
  font-weight: 500;
}

.editor-grid .check-label {
  align-content: end;
  grid-template-columns: 1fr auto;
}

.editor-grid input[type="checkbox"] {
  width: 18px;
  min-height: 18px;
  align-self: center;
  padding: 0;
}

.editor-actions {
  display: flex;
  align-items: end;
}

.entry-tools {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 18px;
}

.mini-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  border: 1px solid var(--line);
  background: var(--surface-3);
  padding: 12px;
}

.mini-form h4 {
  grid-column: 1 / -1;
  margin: 0;
}

.mini-form input,
.mini-form select {
  min-height: 36px;
  padding: 0 9px;
}

.mini-form input[placeholder="설명"],
.mini-form button {
  grid-column: 1 / -1;
}

.candidate-box {
  margin-top: 18px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.candidate-grid {
  display: grid;
  gap: 8px;
}

.candidate-grid input,
.candidate-grid textarea {
  min-height: 38px;
  padding: 9px 10px;
}

dialog {
  width: min(820px, calc(100vw - 32px));
  border: 1px solid var(--line);
  padding: 0;
}

dialog::backdrop {
  background: rgba(23, 21, 18, 0.42);
}

.dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--line);
  padding: 14px 16px;
}

.dialog-header h3 {
  margin: 0;
}

pre {
  max-height: 68vh;
  margin: 0;
  overflow: auto;
  background: #171512;
  color: #f7efe5;
  padding: 16px;
  font-size: 13px;
  line-height: 1.55;
}

@media (max-width: 940px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .person-list {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  }

  .research-filter-row {
    grid-template-columns: 1fr;
  }

  .metrics,
  .content-grid {
    grid-template-columns: 1fr 1fr;
  }

  .editor-grid,
  .entry-tools,
  .pattern-grid,
  .reading-preview,
  .calibration-reliability-grid,
  .actual-life-grid,
  .actual-timing-grid,
  .personal-correction-metrics,
  .personal-correction-grid,
  .calibration-score-grid,
  .calibration-match-grid,
  .daewoon-mini-list,
  .monthly-flow-list,
  .split-lists,
  .candidate-item {
    grid-template-columns: 1fr 1fr;
  }

  .quick-reading-form,
  body[data-view="reading"] .quick-reading-form,
  .personal-workbench,
  .personal-result-layout {
    grid-template-columns: 1fr;
  }

  body[data-view="reading"] .birth-date-field,
  .birth-date-field {
    grid-column: span 1;
  }

  .panel.wide {
    grid-column: 1 / -1;
  }

  .calibration-delta-row {
    grid-template-columns: 1fr;
  }

  .calibration-delta-row i {
    justify-self: start;
  }

  .saju-report-page {
    min-height: auto;
    padding: 42px 36px;
  }

  .saju-report-page::after {
    right: 36px;
  }

  .saju-report-calibration,
  .saju-report-basis-grid,
	  .saju-report-comparison-grid,
	  .saju-report-difference-grid,
	  .saju-report-month-grid,
	  .saju-report-toc-summary,
	  .saju-report-metrics {
	    grid-template-columns: 1fr;
	  }

	  .saju-report-executive-list article {
	    grid-template-columns: 1fr;
	  }

  .personal-difference-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .saju-report-delta-mini div {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .workspace,
  .sidebar {
    padding: 16px;
  }

  .topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  body[data-view="reading"] .topbar,
  body[data-view="research"] .topbar {
    align-items: center;
  }

  .view-switcher {
    width: 100%;
  }

  .view-switcher button {
    flex: 1 1 0;
  }

  .personal-hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .reading-visual {
    display: none;
  }

  .topbar h2 {
    font-size: 24px;
  }

  .metrics,
  .content-grid,
  .feature-grid,
  .editor-grid,
  .entry-tools,
  .pattern-grid,
    .research-browser-head,
    .stats-controls,
    .birth-date-panel,
    .actual-events-preview-list,
    .mini-form,
    .reading-preview,
    .calibration-reliability-grid,
    .actual-life-grid,
    .actual-timing-grid,
    .personal-correction-metrics,
    .personal-correction-grid,
    .calibration-score-grid,
    .calibration-match-grid,
    .personal-result-head,
	    .personal-chart-strip,
		    .personal-quick-summary,
		    .saju-report-month-scores,
	    .personal-qa-list,
		    .daewoon-mini-list,
	    .monthly-flow-list,
    .split-lists,
    .personal-history-item,
    .candidate-item {
    grid-template-columns: 1fr;
  }

  .quick-reading-actions {
    grid-template-columns: 1fr;
  }

  .personal-history-actions {
    justify-content: flex-start;
  }

  .event-row {
    grid-template-columns: 1fr;
  }

  .impact,
  .event-actions {
    justify-self: start;
    justify-items: start;
  }

  .saju-report-page {
    width: 100%;
    padding: 28px 18px;
  }

  .saju-report-page::after {
    right: 18px;
    bottom: 16px;
  }

  .saju-report-title-block h2 {
    font-size: 27px;
  }

  .saju-report-section-head {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 10px;
  }

  .saju-report-toc-grid article {
    grid-template-columns: 1fr;
  }

  .saju-report-section-head span {
    width: 36px;
    height: 36px;
  }

  .saju-report-section-head h3 {
    font-size: 21px;
  }

  .saju-report-prose p {
    font-size: 16px;
  }

  .saju-report-element-grid article > div:first-child {
    grid-template-columns: 1fr;
  }

  .saju-report-delta-mini div {
    grid-template-columns: 1fr;
  }

  .personal-difference-grid {
    grid-template-columns: 1fr;
  }

  .saju-report-delta-mini em {
    text-align: left;
  }
}

@media print {
  @page {
    size: A4;
    margin: 12mm;
  }

  body {
    background: #fff;
  }

  body * {
    visibility: hidden;
  }

  .personal-report-view,
  .personal-report-view * {
    visibility: visible;
  }

  .personal-report-view {
    position: absolute;
    inset: 0;
    display: block;
    background: #fff;
  }

  .saju-report-page {
    width: 100%;
    min-height: auto;
    margin: 0;
    border: 0;
    box-shadow: none;
    break-after: page;
    page-break-after: always;
  }

  .saju-report-page:last-child {
    break-after: auto;
    page-break-after: auto;
  }
}