/* Re-skin the React (jogyeongdo) pages to match the home.
   They render their own chrome (.util + header.gnb + footer.foot + chatbot)
   and a dark hero (section.subhero) inside #root. We hide that chrome, show
   the shared sx-header/sx-footer instead, and lighten the hero so the whole
   page reads like the home. Scoped to #root so the injected sx-* chrome
   (which lives OUTSIDE #root) is untouched. */

/* 1. hide the React chrome */
#root .util,
#root header.gnb,
#root footer.foot,
#root button.chatbot,
#root .chatbot { display: none !important; }

/* 2. clear the fixed sx-header (108px desktop / 64px mobile) */
#root > .page { padding-top: 108px; }
@media (max-width: 768px) { #root > .page { padding-top: 64px; } }

/* 3. dark hero -> light, like the home */
#root .subhero {
  background: linear-gradient(160deg, #f4f7fb 0%, #eaf0f8 58%, #e3ebf6 100%) !important;
  color: #1a2338 !important;
}
#root .subhero::before,
#root .subhero::after { opacity: .25 !important; }
#root .subhero *:not(svg):not(path):not(use):not(img) { color: #1a2338 !important; }
#root .subhero a { color: #314066 !important; }
/* lighten the hero subtitle/meta to the home's grey */
#root .subhero-meta, #root .subhero-inner p { color: #475569 !important; }

/* 4. content -> home design tokens (cards, headings, sections) */
#root .card, #root .card-pad, #root .next-card, #root .banned-item, #root .pax-row,
#root .allow-grid > *, #root .routes-list > * {
  background: #fff !important;
  border: 1px solid #e6ebf2 !important;
  border-radius: 16px !important;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.04) !important;
}
#root .card, #root .next-card, #root .banned-item {
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
#root .card:hover, #root .next-card:hover, #root .banned-item:hover {
  border-color: #cdd7e5 !important;
  box-shadow: 0 12px 28px rgba(16, 24, 40, 0.10) !important;
  transform: translateY(-3px);
}
/* content headings -> home navy-3 */
#root main h1, #root main h2, #root main h3,
#root .pagebody h1, #root .pagebody h2, #root .pagebody h3 {
  color: #071536 !important; letter-spacing: -0.02em;
}
/* any leftover dark content panel -> light */
#root main [class*="dark"], #root .pagebody [style*="background:#0"],
#root .pagebody [style*="background: #0"] { background: #f8fafc !important; color: #1a2338 !important; }