/* ==========================================================================
   Piliers — public/css/components/pillars.css
   Composant central. Ordre unique Année → Mois → Jour → Heure, de gauche à
   droite, partout. Hangul principal coloré par son élément (`.el-*` sur
   `.pillar__char`), hanja + élément en petit dessous, romanisation en bas.
   Variantes : `.pillar--day` (« toi »), `.pillars--compact` (héros), `.seal`.
   ========================================================================== */

.pillars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.pillar {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 12px 4px; border-radius: var(--r-sm); border: 1px solid var(--line-soft); background: var(--surface);
}
.pillar__label { font: 600 12px/1 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; white-space: nowrap; }
.pillar__char { display: flex; flex-direction: column; align-items: center; }
.pillar__char + .pillar__char { margin-top: 6px; }
.pillar__g { font: 600 40px/1.05 var(--font-ko); color: var(--el); }
.pillar__sub { font: 500 12px/1.2 var(--font-ui); color: var(--el-ink); margin-top: 3px; white-space: nowrap; }
.pillar__sub .ko-r { font-size: 13px; margin-right: 3px; color: var(--ink-3); }
.pillar__roman { margin-top: 10px; font: 500 12px/1 var(--font-ui); color: var(--ink-3); white-space: nowrap; }

/* Pilier du Jour : le Maître du Jour, « toi » (vermillon = marque et « tu es ici ») */
.pillar--day { border: 1.5px solid var(--accent); background: var(--surface-2); box-shadow: var(--shadow-1); }
.pillar--day .pillar__label { color: var(--accent-ink); }
.pillar__you {
  position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%);
  font: 600 11px/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  background: var(--accent-fill); color: var(--ink-on-accent); padding: 5px 8px; border-radius: var(--r-pill);
}

/* Filet fléché « racines → transmission » */
.pillars-axis { display: flex; align-items: center; gap: 8px; margin-top: 16px; font: 500 12px/1 var(--font-ui); color: var(--ink-3); }
.pillars-axis::before, .pillars-axis::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.pillars-axis .i { width: 14px; height: 14px; }

/* Variante compacte (héros) */
.pillars--compact .pillar { padding: 10px 2px; }
.pillars--compact .pillar__label { font-size: 11px; margin-bottom: 8px; letter-spacing: .1em; }
.pillars--compact .pillar__g { font-size: 34px; }
.pillars--compact .pillar__roman { margin-top: 8px; }

/* Sceau vermillon aux caractères papier */
.seal {
  display: inline-grid; place-items: center; width: 88px; height: 88px; border-radius: 10px;
  background: var(--seal); color: var(--on-seal); font: 600 52px/1 var(--font-ko);
  box-shadow: inset 0 0 0 3px var(--on-seal-ring), inset 0 0 0 6px var(--seal);
}