/*
 * UI-007: shared presentation layer for the EIKEN and TOEIC roadmap cluster.
 * The page-specific inline styles remain as a compatibility baseline; every
 * override is scoped to .exam-roadmap-page so unrelated exam pages do not move.
 */

.en-ui-page.exam-roadmap-page {
  --exam-accent: #1769df;
  --exam-accent-hover: #0f58c6;
  --exam-accent-soft: #edf5ff;
  width: min(1180px, calc(100% - 32px));
  margin-inline: auto;
  padding: clamp(1.5rem, 4vw, 2.75rem) 0 clamp(3.5rem, 7vw, 5.5rem);
  color: var(--en-ui-ink);
}

.en-ui-page.exam-roadmap-page--toeic {
  --exam-accent: #246f79;
  --exam-accent-hover: #185a64;
  --exam-accent-soft: #eaf7f8;
}

.en-ui-page.exam-roadmap-page > :is(.container, .container-xxl) {
  width: 100%;
  max-width: none;
  padding: 0 !important;
}

.en-ui-page.exam-roadmap-page .breadcrumb {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #66798e;
  font-size: 0.84rem;
}

.en-ui-page.exam-roadmap-page .breadcrumb a {
  color: #42617f;
  text-decoration: none;
}

.en-ui-page.exam-roadmap-page :is(
  .eiken-hero,
  .g5-hero,
  .g4-hero,
  .g3-hero,
  .p2-hero,
  .g2-hero,
  .p1-hero,
  .beginner-hero
) {
  position: relative;
  isolation: isolate;
  margin-bottom: clamp(1.7rem, 4vw, 2.5rem) !important;
  border: 1px solid #d6e3f1;
  border-radius: var(--en-ui-radius-lg);
  background:
    radial-gradient(circle at 93% 6%, rgba(23, 105, 223, 0.13), transparent 27rem),
    linear-gradient(135deg, #fbfdff 0%, #f4f8fe 62%, #f7fbfa 100%);
  box-shadow: var(--en-ui-shadow-md);
}

.en-ui-page.exam-roadmap-page--toeic .beginner-hero {
  background:
    radial-gradient(circle at 94% 8%, rgba(36, 111, 121, 0.14), transparent 26rem),
    linear-gradient(135deg, #fbfdff 0%, #f2f9fa 62%, #fbfaf5 100%);
}

.en-ui-page.exam-roadmap-page :is(
  .g5-hero,
  .g4-hero,
  .g3-hero,
  .p2-hero,
  .g2-hero,
  .p1-hero
) {
  padding: clamp(1.75rem, 4.2vw, 3.25rem);
}

.en-ui-page.exam-roadmap-page :is(.eiken-hero, .beginner-hero) {
  padding: 0;
  overflow: clip;
}

.en-ui-page.exam-roadmap-page :is(.eiken-hero-body, .beginner-hero-body) {
  padding: clamp(1.75rem, 4.2vw, 3.25rem);
}

.en-ui-page.exam-roadmap-page :is(.eiken-hero-bar, .beginner-hero-bar) {
  height: 5px;
  background: var(--exam-accent);
}

.en-ui-page.exam-roadmap-page :is(
  .eiken-kicker,
  .g5-eyebrow,
  .g4-eyebrow,
  .g3-eyebrow,
  .p2-eyebrow,
  .g2-eyebrow,
  .p1-eyebrow,
  .beginner-kicker
) {
  color: #315474;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.035em;
}

.en-ui-page.exam-roadmap-page :is(
  .eiken-title,
  .g5-title,
  .g4-title,
  .g3-title,
  .p2-title,
  .g2-title,
  .p1-title,
  .beginner-title
) {
  max-width: 48rem;
  margin-left: 0;
  color: var(--en-ui-ink);
  font-size: clamp(1.9rem, 3.4vw, 2.55rem);
  font-weight: 720;
  letter-spacing: -0.035em;
  line-height: 1.32;
}

.en-ui-page.exam-roadmap-page :is(
  .eiken-lead,
  .g5-lead,
  .g4-lead,
  .g3-lead,
  .p2-lead,
  .g2-lead,
  .p1-lead,
  .beginner-lead,
  .section-lead
) {
  max-width: 49rem;
  color: var(--en-ui-muted);
  font-size: 1rem;
  line-height: 1.82;
}

.en-ui-page.exam-roadmap-page :is(
  .eiken-muted,
  .g5-muted,
  .g4-muted,
  .g3-muted,
  .p2-muted,
  .g2-muted,
  .p1-muted,
  .beginner-muted
) {
  color: var(--en-ui-muted);
}

.en-ui-page.exam-roadmap-page :is(
  .eiken-panel,
  .g5-panel,
  .g4-panel,
  .g3-panel,
  .p2-panel,
  .g2-panel,
  .p1-panel,
  .beginner-panel
) {
  padding: clamp(1rem, 2.6vw, 1.35rem);
  border: 1px solid var(--en-ui-line);
  border-radius: var(--en-ui-radius-md);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: none;
}

.en-ui-page.exam-roadmap-page :is(
  .eiken-chip,
  .g5-chip,
  .g4-chip,
  .g3-chip,
  .p2-chip,
  .g2-chip,
  .p1-chip,
  .beginner-chip
) {
  min-height: 36px;
  padding: 0.38rem 0.68rem;
  border: 1px solid #d3e0ed;
  border-radius: 0.7rem;
  background: rgba(255, 255, 255, 0.82);
  color: #36536f;
  font-size: 0.82rem;
  font-weight: 750;
  box-shadow: none;
}

.en-ui-page.exam-roadmap-page :is(
  .eiken-anchor-nav,
  .g5-anchor-nav,
  .g4-anchor-nav,
  .g3-anchor-nav,
  .p2-anchor-nav,
  .g2-anchor-nav,
  .p1-anchor-nav,
  .beginner-anchor-nav
) {
  display: flex;
  gap: 0.45rem;
  padding: 0.65rem;
  border: 1px solid var(--en-ui-line);
  border-radius: var(--en-ui-radius-md);
  background: var(--en-ui-surface-soft);
  box-shadow: none;
}

.en-ui-page.exam-roadmap-page .beginner-anchor-nav > .d-flex {
  flex-wrap: nowrap !important;
  gap: 0.45rem !important;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

.en-ui-page.exam-roadmap-page :is(
  .eiken-anchor-nav,
  .g5-anchor-nav,
  .g4-anchor-nav,
  .g3-anchor-nav,
  .p2-anchor-nav,
  .g2-anchor-nav,
  .p1-anchor-nav
) {
  flex-wrap: nowrap;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

.en-ui-page.exam-roadmap-page :is(
  .eiken-anchor-nav,
  .g5-anchor-nav,
  .g4-anchor-nav,
  .g3-anchor-nav,
  .p2-anchor-nav,
  .g2-anchor-nav,
  .p1-anchor-nav,
  .beginner-anchor-nav
) a {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0.58rem 0.78rem;
  border: 1px solid transparent;
  border-radius: 0.7rem;
  background: var(--en-ui-surface);
  color: #315b84;
  font-size: 0.88rem;
  font-weight: 750;
  text-decoration: none;
  white-space: nowrap;
}

.en-ui-page.exam-roadmap-page :is(
  .eiken-anchor-nav,
  .g5-anchor-nav,
  .g4-anchor-nav,
  .g3-anchor-nav,
  .p2-anchor-nav,
  .g2-anchor-nav,
  .p1-anchor-nav,
  .beginner-anchor-nav
) a:hover {
  border-color: #b9cee3;
  background: var(--exam-accent-soft);
  color: var(--exam-accent-hover);
}

.en-ui-page.exam-roadmap-page :is(
  .eiken-section,
  .g5-section,
  .g4-section,
  .g3-section,
  .p2-section,
  .g2-section,
  .p1-section
) {
  margin-top: clamp(2.75rem, 6vw, 4.5rem);
}

.en-ui-page.exam-roadmap-page :is(
  .eiken-heading,
  .g5-heading,
  .g4-heading,
  .g3-heading,
  .p2-heading,
  .g2-heading,
  .p1-heading,
  .beginner-heading
) {
  padding-left: 0;
  border-left: 0;
  color: var(--en-ui-ink);
  font-size: clamp(1.28rem, 2.5vw, 1.65rem);
  font-weight: 720;
  letter-spacing: -0.02em;
  line-height: 1.45;
}

.en-ui-page.exam-roadmap-page :is(
  .eiken-heading,
  .g5-heading,
  .g4-heading,
  .g3-heading,
  .p2-heading,
  .g2-heading,
  .p1-heading,
  .beginner-heading
)::before {
  display: inline-block;
  width: 0.28rem;
  height: 1.1em;
  margin-right: 0.65rem;
  border-radius: 999px;
  background: var(--exam-accent);
  content: "";
  vertical-align: -0.16em;
}

.en-ui-page.exam-roadmap-page :is(
  .eiken-card,
  .g5-card,
  .g4-card,
  .g3-card,
  .p2-card,
  .g2-card,
  .p1-card,
  .beginner-card
) {
  height: 100%;
  overflow: clip;
  border: 1px solid var(--en-ui-line);
  border-radius: var(--en-ui-radius-md);
  background: var(--en-ui-surface);
  box-shadow: var(--en-ui-shadow-sm);
}

.en-ui-page.exam-roadmap-page :is(
  .eiken-card-body,
  .g5-card-body,
  .g4-card-body,
  .g3-card-body,
  .p2-card-body,
  .g2-card-body,
  .p1-card-body,
  .beginner-card-body
) {
  padding: clamp(1rem, 2.4vw, 1.35rem);
}

.en-ui-page.exam-roadmap-page :is(
  .eiken-card-accent,
  .g5-card-accent,
  .g4-card-accent,
  .g3-card-accent,
  .p2-card-accent,
  .g2-card-accent,
  .p1-card-accent,
  .beginner-card-accent
) {
  height: 4px;
}

.en-ui-page.exam-roadmap-page :is(
  .eiken-alert,
  .g5-alert,
  .g4-alert,
  .g3-alert,
  .p2-alert,
  .g2-alert,
  .p1-alert,
  .beginner-alert,
  .eiken-final,
  .g5-final,
  .g4-final,
  .g3-final,
  .p2-final,
  .g2-final,
  .p1-final,
  .beginner-final-cta
) {
  padding: clamp(1rem, 2.5vw, 1.4rem);
  border: 1px solid #e4d8bd;
  border-radius: var(--en-ui-radius-md);
  background: #fffaf1;
  box-shadow: none;
}

.en-ui-page.exam-roadmap-page :is(
  .eiken-table-wrap,
  .g5-table-wrap,
  .g4-table-wrap,
  .p2-table-wrap,
  .g2-table-wrap,
  .p1-table-wrap,
  .beginner-table-wrap
) {
  overflow-x: auto;
  border: 1px solid var(--en-ui-line);
  border-radius: var(--en-ui-radius-md);
  background: var(--en-ui-surface);
  box-shadow: none;
}

.en-ui-page.exam-roadmap-page :is(
  .eiken-table,
  .g5-table,
  .g4-table,
  .p2-table,
  .g2-table,
  .p1-table,
  .beginner-table
) th {
  background: #f2f6fb;
  color: #294865;
}

.en-ui-page.exam-roadmap-page :is(
  .g5-link-grid,
  .g4-link-grid,
  .p1-link-grid,
  .beginner-route-grid
) a,
.en-ui-page.exam-roadmap-page .beginner-route-card {
  min-height: 54px;
  padding: 0.78rem 0.9rem;
  border: 1px solid var(--en-ui-line);
  border-radius: 0.85rem;
  background: var(--en-ui-surface);
  color: var(--en-ui-ink);
  box-shadow: none;
}

.en-ui-page.exam-roadmap-page :is(
  .g5-link-grid,
  .g4-link-grid,
  .p1-link-grid,
  .beginner-route-grid
) a:hover,
.en-ui-page.exam-roadmap-page .beginner-route-card:hover {
  border-color: #a9c2dc;
  background: var(--exam-accent-soft);
  color: var(--exam-accent-hover);
  transform: translateY(-1px);
}

.en-ui-page.exam-roadmap-page .btn {
  min-height: 48px;
  max-width: 100%;
  padding: 0.66rem 1rem;
  border-radius: 0.75rem !important;
  font-size: 0.94rem;
  font-weight: 750 !important;
  line-height: 1.4;
  white-space: normal;
  box-shadow: none;
  transition:
    color 0.18s ease,
    background-color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.en-ui-page.exam-roadmap-page .btn:hover {
  transform: translateY(-1px);
}

.en-ui-page.exam-roadmap-page .btn-primary {
  border-color: var(--exam-accent);
  background: var(--exam-accent);
  color: #fff;
  box-shadow: 0 10px 22px rgba(23, 105, 223, 0.18);
}

.en-ui-page.exam-roadmap-page .btn-primary:hover,
.en-ui-page.exam-roadmap-page .btn-primary:focus-visible {
  border-color: var(--exam-accent-hover);
  background: var(--exam-accent-hover);
  color: #fff;
}

.en-ui-page.exam-roadmap-page .btn-outline-primary {
  border-color: var(--en-ui-line-strong);
  background: var(--en-ui-surface);
  color: #245e98;
}

.en-ui-page.exam-roadmap-page .btn-outline-primary:hover,
.en-ui-page.exam-roadmap-page .btn-outline-primary:focus-visible {
  border-color: #97b5d4;
  background: var(--exam-accent-soft);
  color: var(--exam-accent-hover);
}

.en-ui-page.exam-roadmap-page .btn-outline-secondary {
  border-color: transparent;
  background: transparent;
  color: #526a82;
  text-decoration: underline;
  text-decoration-color: #b5c6d6;
  text-underline-offset: 0.24em;
}

.en-ui-page.exam-roadmap-page .btn-outline-secondary:hover,
.en-ui-page.exam-roadmap-page .btn-outline-secondary:focus-visible {
  border-color: transparent;
  background: #f2f6fa;
  color: #274a6b;
}

.en-ui-page.exam-roadmap-page .btn-sm {
  min-height: 44px;
  padding: 0.52rem 0.78rem;
  font-size: 0.86rem;
}

.en-ui-page.exam-roadmap-page .btn-lg {
  min-height: 52px;
  padding: 0.75rem 1.05rem;
  font-size: 0.98rem;
}

.en-ui-page.exam-roadmap-page :is(.placement-question, .g3-quiz, .p2-quiz, .g2-quiz, .eiken-checker) {
  border: 1px solid var(--en-ui-line);
  border-radius: var(--en-ui-radius-md);
  background: var(--en-ui-surface);
  box-shadow: none;
}

.en-ui-page.exam-roadmap-page .placement-options label {
  min-height: 44px;
  border-color: var(--en-ui-line);
  border-radius: 0.7rem;
  background: #fbfdff;
}

.en-ui-page.exam-roadmap-page :is(input[type="radio"], input[type="checkbox"]) {
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--exam-accent);
}

.en-ui-page.exam-roadmap-page .beginner-answer-detail summary {
  min-height: 44px;
  padding-block: 0.7rem;
  cursor: pointer;
}

.en-ui-page.exam-roadmap-page :is(a, button, input, summary):focus-visible {
  outline: 3px solid rgba(23, 105, 223, 0.32);
  outline-offset: 3px;
}

@media (max-width: 767.98px) {
  .en-ui-page.exam-roadmap-page {
    width: min(100% - 24px, 1180px);
    padding: 1.15rem 0 3.5rem;
  }

  .en-ui-page.exam-roadmap-page :is(
    .g5-hero,
    .g4-hero,
    .g3-hero,
    .p2-hero,
    .g2-hero,
    .p1-hero,
    .eiken-hero-body,
    .beginner-hero-body
  ) {
    padding: 1.35rem;
  }

  .en-ui-page.exam-roadmap-page :is(
    .eiken-title,
    .g5-title,
    .g4-title,
    .g3-title,
    .p2-title,
    .g2-title,
    .p1-title,
    .beginner-title
  ) {
    font-size: clamp(1.55rem, 7vw, 1.85rem);
    font-weight: 700;
    line-height: 1.34;
  }

  .en-ui-page.exam-roadmap-page :is(
    .eiken-hero,
    .g5-hero,
    .g4-hero,
    .g3-hero,
    .p2-hero,
    .g2-hero,
    .p1-hero,
    .beginner-hero
  ) {
    border-radius: 1.1rem;
    box-shadow: 0 12px 32px rgba(20, 52, 88, 0.08);
  }

  .en-ui-page.exam-roadmap-page :is(
    .eiken-panel,
    .g5-panel,
    .g4-panel,
    .g3-panel,
    .p2-panel,
    .g2-panel,
    .p1-panel,
    .beginner-panel
  ) {
    padding: 1rem;
    border-radius: 0.9rem;
  }

  .en-ui-page.exam-roadmap-page :is(
    .eiken-anchor-nav,
    .g5-anchor-nav,
    .g4-anchor-nav,
    .g3-anchor-nav,
    .p2-anchor-nav,
    .g2-anchor-nav,
    .p1-anchor-nav,
    .beginner-anchor-nav
  ) {
    margin-bottom: 1.7rem !important;
    border-radius: 0.9rem;
  }

  .en-ui-page.exam-roadmap-page :is(
    .eiken-section,
    .g5-section,
    .g4-section,
    .g3-section,
    .p2-section,
    .g2-section,
    .p1-section
  ) {
    margin-top: 2.8rem;
  }

  .en-ui-page.exam-roadmap-page :is(
    .eiken-hero,
    .g5-hero,
    .g4-hero,
    .g3-hero,
    .p2-hero,
    .g2-hero,
    .p1-hero,
    .beginner-hero
  ) .btn {
    flex: 1 1 12rem;
  }

  .en-ui-page.exam-roadmap-page .beginner-route-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .en-ui-page.exam-roadmap-page :is(.btn, a.beginner-card, .beginner-route-card) {
    transition: none;
  }
}