/* Orun skin over the copied gate engine.
 * gate-ungyeol.css stays byte-identical to the reference so the logic, the
 * motion and the palette are untouched; everything Orun-specific lives here —
 * the Latin typefaces, the brand plate, and the pieces Orun has no backing for
 * (audio, paywall) hidden rather than cut out of the engine.
 */

/* ---- type ----
   The palette is the reference crimson, untouched; only the typefaces change,
   because the engine's Korean serif has no Latin cut. */
#gateRoot {
  --g-serif: "Cormorant Garamond", Georgia, serif;
  --g-sans: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ---- birth-date row ----
   The reference sizes this row for the short Korean calendar pills. The
   English "Gregorian / Lunar" pills are wider and squeezed the field until a
   full date (1994.03.12) was cut off on a 375px phone. The field keeps room
   for a whole date, and the pills drop to their own line when it cannot. */
#gateRoot .gate-input-row { flex-wrap: wrap; row-gap: 12px; }
#gateRoot .gate-input-row > input.gate-date { flex: 1 0 6em; }

/* ---- brand plate ---- */
#gateRoot .gate-logo {
  font-family: var(--g-serif);
  font-size: 21px;
  letter-spacing: .16em;
  gap: 8px;
}

/* ---- not backed by Orun ----
   No audio assets ship with Orun, and there is no paywall, so the sound
   controls and the price note are hidden rather than removed from the engine. */
#gateRoot .gate-sound,
#gateRoot .gate-soundhint,
#gateRoot .gate-offer-note,
#gateRoot .gate-revisit { display: none !important; }

/* ---- Orun result stage ---- */
#gateRoot .orun-result {
  position: absolute;
  inset: 0;
  z-index: 6;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

#gateRoot .orun-result-wait {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  min-height: 100%;
  padding: 0 30px;
  text-align: center;
}

#gateRoot .orun-result-wait p {
  margin: 0;
  max-width: 340px;
  color: rgba(246,241,230,.72);
  font-family: var(--g-serif);
  font-size: 19px;
  font-style: italic;
  line-height: 1.45;
}

#gateRoot .orun-result-mark {
  display: block;
  color: var(--g-red-bright);
  font-family: var(--g-serif);
  font-size: 36px;
  line-height: 1;
  animation: gate-breathe 3.8s ease-in-out infinite;
}

#gateRoot .orun-report {
  min-height: 100%;
  padding: 46vh 22px calc(env(safe-area-inset-bottom, 0px) + 34px);
  background: linear-gradient(180deg, transparent 0%, rgba(5,5,7,.42) 22%, rgba(5,5,7,.95) 44%, rgba(5,5,7,.99) 100%);
}

#gateRoot .orun-report-role { margin: 9px 0 6px; color: var(--g-red); font-family: Cinzel, Georgia, serif; font-size: 8px; font-weight: 700; letter-spacing: .2em; }
#gateRoot .orun-report h2 { margin: 0 0 10px; color: #fffaf0; font-family: var(--g-serif); font-size: clamp(32px, 8.6vw, 46px); font-weight: 600; letter-spacing: -.035em; line-height: .98; }
#gateRoot .orun-report-copy { margin: 0; color: rgba(246,241,230,.8); font-family: var(--g-sans); font-size: 14px; line-height: 1.72; }

#gateRoot .orun-report-grid { display: grid; gap: 1px; margin-top: 20px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.1); }
#gateRoot .orun-report-grid > div { min-height: 62px; padding: 12px 13px; background: rgba(18,17,16,.94); }
#gateRoot .orun-report-grid small { display: block; margin-bottom: 5px; color: var(--g-red); font-family: Cinzel, Georgia, serif; font-size: 7px; font-weight: 700; letter-spacing: .18em; }
#gateRoot .orun-report-grid strong { display: block; color: #eee9df; font-family: var(--g-serif); font-size: 18px; font-weight: 600; line-height: 1.2; }

#gateRoot .orun-follow { display: grid; gap: 7px; margin-top: 18px; }

#gateRoot .orun-followup {
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  background: transparent;
  color: #dcd5c8;
  font-family: var(--g-sans);
  font-size: 12px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

#gateRoot .orun-followup::after { content: "+"; float: right; color: var(--g-red); font-size: 17px; font-weight: 400; }
#gateRoot .orun-followup:disabled { color: #8c877f; cursor: default; }
#gateRoot .orun-followup:disabled::after { content: ""; }

#gateRoot .orun-follow-answer {
  margin: -2px 0 4px;
  padding: 12px 13px;
  border-left: 1px solid var(--g-red);
  background: rgba(255,255,255,.04);
  color: rgba(246,241,230,.74);
  font-family: var(--g-serif);
  font-size: 18px;
  font-style: italic;
  line-height: 1.4;
}

#gateRoot .orun-report-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 20px; }

#gateRoot .orun-quiet {
  display: grid;
  place-items: center;
  min-height: 48px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  color: #b9b3aa;
  font-family: var(--g-sans);
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
}

#gateRoot .orun-quiet:hover { border-color: var(--g-red); color: #f6eddc; }

#gateRoot .orun-report-note {
  margin: 18px 0 0;
  color: rgba(255,255,255,.42);
  font-family: var(--g-sans);
  font-size: 11px;
  line-height: 1.6;
  text-align: center;
}