/**
 * High curriculum hero.
 * Layout is shared with the middle sheet (curriculum-middle.css).
 * Accent is design.json components.curriculumHighSheet.accent,
 * sampled from the 수학정복하기 title art.
 */

/*
 * Match the page-intro banner (and active local-nav label) to the high green.
 * Pre-high1 also loads this file first, then overrides --color-bg-banner in
 * curriculum-pre-high1.css so its blue wins on that page only.
 */
body[data-page="curriculum"] {
  --color-bg-banner: #2ba86f; /* design.json curriculumHighSheet.accent */
}

.curriculum-sheet--high {
  /* Accent sampled from the theme save button (design.json curriculumHighSheet.accent). */
  --cm-coral: #2ba86f;
  /* Track / process chips follow the same high-sheet green as intro titles. */
  --cm-track: #2ba86f;
  --cm-process: #2ba86f;
  --cm-process-soft: #8acfb0;
  --cm-process-border: #d0ecdf;
  /* Feedback-card shell (middle care-flow) retinted to high green. */
  --cm-feedback-orange: #2ba86f;
  --cm-feedback-header: #eaf6f0;
  /* High sheet is hero-only; keep a short gap before .high-flow. */
  padding-bottom: var(--spacing-md);
}

.curriculum-sheet--high .curriculum-sheet__hero {
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .curriculum-sheet--high {
    padding-bottom: var(--spacing-lg);
  }
}

/**
 * Three-step flow under the hero.
 * Brochure art is a staircase: low blue, mid purple, high red.
 * Each color is a flat run; a short filled triangle climbs to the next level.
 * Colors are design.json components.curriculumHighSheet.
 */
.high-flow {
  --hf-blue: #5078f8;
  --hf-purple: #9870f8;
  --hf-red: #f86060;
  /* Head block height; the staircase SVG sits just under this. */
  --hf-head: 7.2rem;
  /* Step offsets use cqi so they track the same width as the SVG. */
  container-type: inline-size;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr);
  column-gap: 1.25rem;
  align-items: start;
  margin: 0.25rem 0 var(--spacing-3xl);
}

.high-flow__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  position: relative;
  z-index: 1;
}

/* Step 1 on the low blue run; step 2 on the mid purple run; step 3 at the top. */
.high-flow__step--1 {
  margin-top: 6cqi;
}

.high-flow__step--2 {
  margin-top: 3cqi;
}

.high-flow__head,
.high-flow__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 0;
}

.high-flow__step--1 .high-flow__head,
.high-flow__step--1 .high-flow__card {
  --hf-ink: var(--hf-blue);
  color: var(--hf-ink);
}

.high-flow__step--2 .high-flow__head,
.high-flow__step--2 .high-flow__card {
  --hf-ink: var(--hf-purple);
  color: var(--hf-ink);
}

.high-flow__step--3 .high-flow__head,
.high-flow__step--3 .high-flow__card {
  --hf-ink: var(--hf-red);
  color: var(--hf-ink);
}

.high-flow__head {
  justify-content: flex-end;
  gap: 0.28rem;
  width: 100%;
  min-height: var(--hf-head);
  padding-bottom: 0.25rem;
}

.high-flow__card {
  gap: 0.85rem;
  /* Wider card so title + body read closer to the brochure column width. */
  max-width: 20.5rem;
  width: 100%;
  /* Clear the flat run so the card sits fully under its own line. */
  margin-top: 3.6rem;
  /* Brochure stacks the title box and the body on a shared left edge. */
  align-items: stretch;
  text-align: left;
}

.high-flow__step--2 .high-flow__card {
  max-width: 22.5rem;
}

.high-flow__badge {
  margin: 0;
  padding: 0.4rem 1.1rem;
  border-radius: 999px;
  /* Own color is white, so the fill uses the step ink set on the head. */
  background: var(--hf-ink);
  color: #fff;
  font-family: var(--font-primary);
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.high-flow__name {
  margin: 0.15rem 0 0;
  /* A고속도로 (Highway) display face for the three step titles. */
  font-family: var(--font-highway);
  /* Same size for all three titles (개념학습 / 개념유형 다지기 / 확인학습). */
  font-size: clamp(1.95rem, 3vw, 2.55rem);
  font-weight: 400;
  font-style: normal;
  font-synthesis: none;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.high-flow__kicker {
  margin: 0;
  /* Brochure subtitles sit in muted gray above the colored line. */
  color: var(--color-text-muted);
  /* BM JUA (배달의민족 주아) for the three step kickers. */
  font-family: var(--font-bm-jua);
  font-size: clamp(1.02rem, 1.45vw, 1.22rem);
  font-weight: 400;
  font-synthesis: none;
  line-height: 1.35;
  letter-spacing: -0.03em;
}

/* Brochure: only the title sits in a thin rounded frame; body text is bare. */
.high-flow__card-title {
  margin: 0;
  /* Stretch to the full card width (matches parent after align-items: stretch). */
  width: 100%;
  box-sizing: border-box;
  padding: 0.5rem 0.85rem;
  border: 1.5px solid currentColor;
  border-radius: 0.7rem;
  text-align: center;
  font-size: clamp(0.95rem, 1.35vw, 1.12rem);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -0.03em;
}

.high-flow__card-body {
  margin: 0;
  font-size: clamp(1.02rem, 1.4vw, 1.18rem);
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: -0.03em;
}

/* Staircase connector sits between the heads and the cards. */
.high-flow__track {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--hf-head) + 0.05rem);
  z-index: 0;
  pointer-events: none;
}

.high-flow__stairs {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 767px) {
  .high-flow {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
  }

  .high-flow__step,
  .high-flow__step--1,
  .high-flow__step--2 {
    margin-top: 0;
    gap: 0.85rem;
  }

  .high-flow__head {
    min-height: 0;
  }

  .high-flow__card {
    margin-top: 0;
  }

  .high-flow__head,
  .high-flow__card {
    width: 100%;
  }

  .high-flow__head {
    padding-bottom: 0.75rem;
  }

  /*
   * Staircase connector (and its two arrows) only reads across three side-by-side
   * columns, so the stacked layout drops it along with the head's colored run.
   */
  .high-flow__track {
    display: none;
  }
}

/**
 * Bridge copy under .high-flow.
 * Outside .curriculum-sheet, so re-declare sheet tokens used by
 * curriculum-sheet__intro-title / intro-body / hl / em (same as middle).
 * Accent stays the high-sheet green (#2ba86f).
 */
.high-bridge {
  --cm-coral: #2ba86f;
  --cm-ink: #2a2a2a;
  --cm-track: #2ba86f;
  /* White fill for outline chips (same token middle sheet uses). */
  --cm-track-on: #ffffff;
  width: 100%;
  max-width: none;
  margin: 0 0 var(--spacing-2xl);
  padding-top: 0;
  color: var(--cm-ink);
}

/* Multi-line title: keep the coral rule beside the whole title block. */
.high-bridge .curriculum-sheet__intro-title {
  align-items: flex-end;
}

/*
 * Bridge flow chips sit inside intro-body, so drop the section-scale bottom
 * margin the dual-track block uses on the middle sheet.
 */
.high-bridge__tracks {
  margin: var(--spacing-md) 0;
  max-width: none;
}

/*
 * No category label — only four equal outline chips, so the grid is
 * step | › | step | › | step | › | step.
 */
.high-bridge__track {
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
}

/**
 * Body blocks after the bridge (roadmap, vacation, naesin system, school match, CSAT).
 * Same intro/track tokens as middle; accent stays high green.
 */
.high-body {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
}

/*
 * 일반고 / 특목고 weekly hours table.
 * Reuses sheet green for the header; keeps copy compact (no day grid yet).
 */
.high-hours__scroll {
  box-sizing: border-box;
  width: auto;
  min-width: 0;
  margin: 0 clamp(0.75rem, 2vw, 1.75rem) var(--spacing-xl);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.high-hours__table {
  width: 100%;
  min-width: 28rem;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-family: var(--font-primary);
  font-size: clamp(0.95rem, 1.3vw, 1.1rem);
  font-weight: var(--font-weight-semibold);
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--cm-ink, #2a2a2a);
  background: #ffffff;
}

.high-hours__table th,
.high-hours__table td {
  box-sizing: border-box;
  padding: 0.85rem 0.75rem;
  border: 1px solid #d9d9d9;
  text-align: center;
  vertical-align: middle;
  background: #ffffff;
  word-break: keep-all;
}

.high-hours__table thead th {
  background: var(--cm-coral, #2ba86f);
  color: #ffffff;
  font-weight: var(--font-weight-bold);
}

.high-hours__table tbody th {
  background: #f3faf6;
  font-weight: var(--font-weight-bold);
  color: var(--cm-coral, #2ba86f);
}

/* Label chip above a wrap flow (replaces middle track-label for long rows). */
.high-body__flow-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 0.75rem;
  margin-inline-start: clamp(0.75rem, 2vw, 1.75rem);
  padding: 0.55rem 1.1rem;
  background: var(--cm-track);
  color: var(--cm-track-on, #fff);
  border-radius: 10px;
  font-family: var(--font-jalnan);
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

/* Long roadmap / CSAT flows: wrap as chips; › are spans, not list items. */
.high-body__flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.45rem;
  margin: 0 0 var(--spacing-2xl);
  padding: 0 clamp(0.75rem, 2vw, 1.75rem);
  color: var(--cm-track);
}

/**
 * Brochure learning roadmap.
 * Shared 5-track grid on heads / chips / feet:
 *   [1 chip] › [4 chips] › [1 chip]
 * Side columns hug exactly one chip width; every chip/gap stays equal.
 */
.high-roadmap {
  --hr-line: var(--cm-coral, #2ba86f);
  --hr-head-bg: #d2fae0;
  --hr-mid-w: 1rem;
  /* Wide enough for 「학교·학생별 맞춤 대비」 on one line. */
  --hr-chip-w: 11.5rem;
  --hr-chip-gap: 0.45rem;
  --hr-arrow-w: 1rem;
  display: grid;
  justify-content: center;
  width: 100%;
  margin: 0 0 var(--spacing-2xl);
  padding: 0;
  border: none;
  box-sizing: border-box;
  background: transparent;
}

/* Mobile: stack the three stages */
.high-roadmap__heads,
.high-roadmap__chips,
.high-roadmap__feet {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  column-gap: var(--hr-chip-gap);
  row-gap: 0.55rem;
}

.high-roadmap__bridge {
  display: none;
}

.high-roadmap__term-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--hr-chip-gap);
}

.high-roadmap__heads {
  background: var(--hr-head-bg);
  border-bottom: 2px solid var(--hr-line);
}

.high-roadmap__chips {
  box-sizing: border-box;
  min-height: 4.5rem;
  padding: 0.9rem 0.35rem;
  border-bottom: 2px solid var(--hr-line);
  background: #ffffff;
}

.high-roadmap__head {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  min-height: 3rem;
  margin: 0;
  padding: 0.55rem 0.4rem;
  background: transparent;
  color: var(--hr-line);
  font-family: var(--font-primary);
  font-size: clamp(0.9rem, 1.2vw, 1.15rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25;
  text-align: center;
}

.high-roadmap__foot {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0.7rem 0.35rem 0.8rem;
  color: var(--cm-ink, #2a2a2a);
  font-family: var(--font-gyeonggi-batang);
  font-size: clamp(1rem, 1.35vw, 1.22rem);
  line-height: 1.45;
  text-align: center;
}

.high-roadmap__foot--term {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.45rem;
  align-items: center;
  width: 100%;
  padding: 0.7rem 0.2rem 0.8rem;
}

.high-roadmap__foot--term p {
  margin: 0;
  min-width: 0;
  padding: 0 0.25rem;
  color: var(--cm-ink, #2a2a2a);
  font-family: var(--font-gyeonggi-batang);
  font-size: clamp(1rem, 1.35vw, 1.22rem);
  line-height: 1.45;
  text-align: center;
}

.high-roadmap__foot-gap {
  display: none;
}

.high-roadmap__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--hr-chip-w);
  min-width: var(--hr-chip-w);
  max-width: var(--hr-chip-w);
  min-height: 2.75rem;
  padding: 0.5rem 0.55rem;
  background: var(--hr-line);
  border: 2px solid var(--hr-line);
  border-radius: 12px;
  color: #ffffff;
  /* Jalnan 2 (여기어때 잘난체) — same display face as the sheet hero. */
  font-family: var(--font-jalnan);
  font-size: clamp(0.8rem, 1.05vw, 0.95rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.25;
  text-align: center;
  white-space: nowrap;
}

.high-roadmap__arrow {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--hr-arrow-w);
  flex: 0 0 var(--hr-arrow-w);
  color: var(--hr-line);
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  font-weight: 800;
  line-height: 1;
  text-align: center;
  user-select: none;
}

@media (min-width: 768px) {
  .high-roadmap__foot--term {
    grid-template-columns: minmax(0, 1fr) var(--hr-mid-w) minmax(0, 1fr);
    column-gap: 0;
    row-gap: 0;
  }

  .high-roadmap__foot-gap {
    display: block;
    align-self: stretch;
    width: 0;
    min-height: 1.5rem;
    margin-inline: auto;
    border-left: 2px dotted var(--hr-line);
    justify-self: center;
  }

  .high-roadmap__arrow--mid {
    position: relative;
  }

  .high-roadmap__arrow--mid::before {
    content: "";
    position: absolute;
    top: -0.85rem;
    bottom: -0.85rem;
    left: 50%;
    border-left: 2px dotted var(--hr-line);
    transform: translateX(-50%);
    pointer-events: none;
  }
}

/* One-row layout needs ~1100px of content width, so it starts at 1280px. */
@media (min-width: 1280px) {
  .high-roadmap {
    /* Wider so 「꼼꼼한 개념학습」 fits on one line (Jalnan + nowrap). */
    --hr-chip-w: 10.75rem;
    /* Middle track = 4 chips + 3 arrows + 6 gaps (must be explicit, not auto,
       so heads / chips / feet resolve to identical track widths). */
    --hr-term-w: calc(
      4 * var(--hr-chip-w) + 3 * var(--hr-arrow-w) + 6 * var(--hr-chip-gap)
    );
    /* Full row width — used to place the two column rules. */
    --hr-row-w: calc(
      2 * var(--hr-chip-w) + 2 * var(--hr-arrow-w) + var(--hr-term-w) + 4 *
        var(--hr-chip-gap)
    );
  }

  /* Tracks: chip | › | term(4 chips) | › | chip */
  .high-roadmap__heads,
  .high-roadmap__chips,
  .high-roadmap__feet {
    grid-template-columns:
      var(--hr-chip-w)
      var(--hr-arrow-w)
      var(--hr-term-w)
      var(--hr-arrow-w)
      var(--hr-chip-w);
    justify-content: center;
    align-items: stretch;
    column-gap: var(--hr-chip-gap);
    row-gap: 0;
  }

  .high-roadmap__bridge {
    display: block;
  }

  .high-roadmap__term-chips {
    flex-wrap: nowrap;
    justify-content: center;
    gap: var(--hr-chip-gap);
  }

  .high-roadmap__chips {
    align-items: center;
  }

  /*
   * Column rules are drawn once on the whole roadmap so they run unbroken
   * from the header band through the chip row to the captions.
   * x = center of each bridge (›) track.
   */
  .high-roadmap {
    position: relative;
  }

  .high-roadmap::before,
  .high-roadmap::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    border-left: 2px solid var(--hr-line);
    pointer-events: none;
    /* Bands are positioned (for the dotted rule) and paint in DOM order,
       so lift the rules above the chip row's white background. */
    z-index: 2;
  }

  .high-roadmap::before {
    left: calc(
      50% - var(--hr-row-w) / 2 + var(--hr-chip-w) + var(--hr-chip-gap) +
        var(--hr-arrow-w) / 2
    );
  }

  .high-roadmap::after {
    left: calc(
      50% + var(--hr-row-w) / 2 - var(--hr-chip-w) - var(--hr-chip-gap) -
        var(--hr-arrow-w) / 2
    );
  }

  /*
   * Dotted mid rule spans the chip row and the captions as one line,
   * so replace the per-cell dotted borders used in the stacked layout.
   */
  .high-roadmap__arrow--mid::before,
  .high-roadmap__foot-gap {
    border-left: none;
  }

  .high-roadmap__chips,
  .high-roadmap__feet {
    position: relative;
  }

  .high-roadmap__chips::after,
  .high-roadmap__feet::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    border-left: 2px dotted var(--hr-line);
    transform: translateX(-50%);
    pointer-events: none;
  }
}

@media (min-width: 1440px) {
  .high-roadmap {
    --hr-chip-w: 11rem;
  }
}

@media (max-width: 1279px) {
  .high-roadmap__heads .high-roadmap__head--term,
  .high-roadmap__feet .high-roadmap__foot--term {
    border-top: 1px dashed var(--hr-line);
  }
}

/*
 * Mobile: read the roadmap as one top-to-bottom column.
 * The brochure's three-stage header band and the caption row only make sense
 * beside the chips they label, so they are dropped rather than stacked.
 */
@media (max-width: 767px) {
  .high-roadmap__heads,
  .high-roadmap__feet {
    display: none;
  }

  /*
   * Flatten the nested 학기중 group into the same vertical flow as the outer
   * chips: identical direction and gap makes the two levels read as one list.
   */
  .high-roadmap__chips,
  .high-roadmap__term-chips {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
  }

  .high-roadmap__term-chips {
    width: 100%;
  }

  /* Header band is gone, so the band's divider and height floor go with it. */
  .high-roadmap__chips {
    min-height: 0;
    padding: 0;
    border-bottom: none;
    background: transparent;
  }

  /* Drop the fixed brochure chip width; let labels wrap instead of overflow. */
  .high-roadmap__chip {
    width: 100%;
    min-width: 0;
    max-width: 17rem;
    white-space: normal;
  }

  /* Turn the `›` a quarter turn so it points down the column. */
  .high-roadmap__arrow {
    width: auto;
    height: 1.1rem;
    flex: 0 0 auto;
    transform: rotate(90deg);
  }
}

/**
 * CSAT flow: reuse middle feedback-cards (header band + body + chevron gaps).
 * Five steps need one extra card/arrow column vs the middle 4-card strip.
 */
.high-body__csat-cards {
  margin: 0 0 var(--spacing-xl);
  padding-inline: clamp(0.75rem, 2vw, 1.75rem);
}

@media (min-width: 1024px) {
  .high-body__csat-cards.curriculum-sheet__feedback-cards {
    grid-template-columns:
      minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto
      minmax(0, 1fr);
  }

  /*
   * Five narrower cards → shrink chevrons vs middle’s 4-card strip
   * (middle uses ~4.75rem slot / ~3.5rem glyph).
   */
  .high-body__csat-cards .curriculum-sheet__feedback-arrow {
    width: 1.15rem;
    height: 2.85rem;
    margin-left: calc(-0.4rem - 6px);
  }

  .high-body__csat-cards .curriculum-sheet__feedback-arrow::before {
    right: -0.75rem;
  }

  .high-body__csat-cards .curriculum-sheet__feedback-arrow::after {
    left: 0.05rem;
    width: 1.35rem;
    height: 2.15rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 88'%3E%3Cpolyline points='22,10 38,44 22,78' fill='none' stroke='%232BA86F' stroke-width='15' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
  }
}

.high-body__flow-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0.65rem 0.95rem;
  background: var(--cm-track-on, #fff);
  color: var(--cm-track);
  border: 1px solid var(--cm-track);
  border-radius: 10px;
  font-family: var(--font-primary);
  font-size: clamp(0.95rem, 1.4vw, 1.15rem);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.02em;
  line-height: 1.25;
  text-align: center;
}

.high-body__flow-arrow {
  margin: 0;
  color: var(--cm-track);
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  user-select: none;
}

/* Materials chips under 학교별 맞춤 내신대비 */
.high-body__materials {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  list-style: none;
  margin: 0 0 var(--spacing-xl);
  padding: 0 clamp(0.75rem, 2vw, 1.75rem);
}

.high-body__materials li {
  margin: 0;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--cm-coral);
  border-radius: 999px;
  color: var(--cm-coral);
  font-family: var(--font-primary);
  font-size: clamp(0.95rem, 1.3vw, 1.1rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

/*
 * School list box — bordered panel with legend-style title on the top edge.
 * Short labels show on screen; full names live in abbr[title] + JSON-LD + llms.txt.
 */
.high-body__school-box {
  position: relative;
  box-sizing: border-box;
  /* Match intro-body text width (same horizontal inset as curriculum-sheet__intro-body). */
  width: auto;
  max-width: none;
  margin: var(--spacing-md) clamp(0.75rem, 2vw, 1.75rem) var(--spacing-xl);
  padding: clamp(1.35rem, 2.5vw, 1.75rem) clamp(1rem, 2.5vw, 1.75rem)
    clamp(1.1rem, 2vw, 1.4rem);
  border: 2px solid var(--cm-coral);
  border-radius: 0.75rem;
  background: var(--cm-paper, #fff);
}

.high-body__school-box-title {
  position: absolute;
  top: 0;
  left: clamp(0.85rem, 2vw, 1.25rem);
  margin: 0;
  padding: 0 0.55rem;
  transform: translateY(-50%);
  background: var(--cm-paper, #fff);
  color: var(--cm-coral);
  font-family: var(--font-jalnan);
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.high-body__schools {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-gyeonggi-batang);
  font-size: clamp(1.05rem, 1.45vw, 1.22rem);
  font-weight: 400;
  line-height: 1.75;
  color: var(--cm-ink, #2a2a2a);
  letter-spacing: -0.01em;
}

.high-body__schools li {
  display: inline-flex;
  align-items: baseline;
  margin: 0;
  padding: 0;
}

.high-body__school-short {
  text-decoration: none;
  cursor: help;
}

/* Middot separators between short school labels (skip after the last). */
.high-body__schools li:not(:last-child)::after {
  content: " · ";
  font-weight: 400;
  color: var(--cm-ink, #2a2a2a);
}

/*
 * 학프 / 부교재 academy material samples under the school-match close copy.
 * Cover + 4 pages; horizontal scroll on small screens, wrap grid on desktop.
 */
.high-body__hakp-samples {
  display: grid;
  gap: var(--spacing-md);
  margin: 0 0 var(--spacing-2xl);
  padding-inline: clamp(0.75rem, 2vw, 1.75rem);
}

.high-body__hakp-caption {
  margin: 0;
  color: var(--cm-coral);
  font-family: var(--font-jalnan);
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.high-body__hakp-note {
  margin: 0;
  color: var(--cm-ink, #2a2a2a);
  font-family: var(--font-gyeonggi-batang);
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  font-weight: 400;
  line-height: var(--line-height-relaxed);
}

.high-body__hakp-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(10.5rem, 14rem);
  gap: var(--spacing-md);
  list-style: none;
  margin: var(--spacing-sm) 0 0;
  padding: 0.25rem 0.15rem 0.5rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}

@media (min-width: 1024px) {
  .high-body__hakp-grid {
    grid-auto-flow: row;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-auto-columns: unset;
    overflow: visible;
    scroll-snap-type: none;
  }
}

.high-body__hakp-item {
  display: grid;
  gap: 0.45rem;
  margin: 0;
  scroll-snap-align: start;
}

.high-body__hakp-img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--cm-process-border, #d0ecdf);
  border-radius: 0.35rem;
  background: #fff;
  box-sizing: border-box;
}

.high-body__hakp-label {
  text-align: center;
  color: var(--cm-coral);
  font-family: var(--font-primary);
  font-size: clamp(0.9rem, 1.2vw, 1rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/**
 * Four school-check cards — match brochure 2×2 (badge + icon + title + body).
 * Accent uses high-sheet green (--cm-coral) instead of the reference orange.
 */
.high-body__checks {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.75rem, 3.5vw, 2.5rem) clamp(1.25rem, 3vw, 2rem);
  list-style: none;
  /* Narrower strip than full sheet width; keep cards centered. */
  width: 100%;
  max-width: 52rem;
  /* Top padding so corner badges that sit outside the card are not clipped. */
  margin: 0.75rem auto var(--spacing-2xl);
  padding: 1.1rem clamp(0.75rem, 2vw, 1.25rem) 0;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .high-body__checks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.high-body__check {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.65rem;
  min-height: 14.5rem;
  margin: 0;
  padding: 2.1rem 1.35rem 1.6rem;
  background: #ffffff;
  border: 2px solid var(--cm-coral);
  border-radius: 1.75rem;
  box-sizing: border-box;
  text-align: center;
}

/* Corner number badge: left on odd cards, right on even (2×2 columns). */
.high-body__check-num {
  position: absolute;
  top: -0.85rem;
  left: 1.15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 50%;
  background: var(--cm-coral);
  color: #ffffff;
  font-family: var(--font-primary);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.06);
}

@media (min-width: 768px) {
  .high-body__check:nth-child(even) .high-body__check-num {
    left: auto;
    right: 1.15rem;
  }
}

.high-body__check-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4rem;
  margin: 0.15rem 0 0.15rem;
  color: var(--cm-coral);
}

.high-body__check-icon svg {
  display: block;
  width: 100%;
  height: auto;
}

.high-body__check-title {
  margin: 0;
  color: var(--cm-coral);
  font-family: var(--font-primary);
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.high-body__check p {
  margin: 0;
  max-width: 22rem;
  color: var(--cm-ink);
  font-family: var(--font-gyeonggi-batang);
  font-size: clamp(1rem, 1.45vw, 1.18rem);
  line-height: 1.55;
}

/**
 * 방학 커리큘럼 4-step strip (brochure layout).
 * Each column stacks: icon ring → numbered map pin → title → caption.
 * The pins sit on a single dotted rail spanning the whole strip, and a chevron
 * marks each column boundary, so the four steps read left to right.
 * Ink stays the high-sheet green (--cm-coral) like the other retinted brochure
 * blocks; only the closing step keeps the reference's yellow fill.
 */
.high-steps {
  --hs-ink: var(--cm-coral, #2ba86f);
  /* design.json components.curriculumHighSheet.stripAccentFill / Rail / BodyInk */
  --hs-accent: #f2ec72;
  --hs-rail: #d8dedb;
  --hs-body: #4e9b6f;
  /* Ring size and gap also drive the rail/chevron offsets, so keep them here. */
  --hs-ring: clamp(5.5rem, 11vw, 8.5rem);
  --hs-ring-border: 3px;
  --hs-ring-gap: 1.3rem;
  --hs-pin: 2.45rem;
  --hs-col-gap: clamp(0.5rem, 1.5vw, 1.25rem);
  margin: 0 0 var(--spacing-2xl);
  padding-inline: clamp(0.75rem, 2vw, 1.75rem);
}

.high-steps__list {
  position: relative;
  display: grid;
  /* Mobile shows 2×2; the four-across rail layout starts at 768px. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--hs-col-gap);
  row-gap: var(--spacing-xl);
  list-style: none;
  margin: 0;
  padding: 0;
}

.high-steps__item {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  justify-items: center;
  min-width: 0;
  margin: 0;
  text-align: center;
}

.high-steps__ring {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: var(--hs-ring);
  height: var(--hs-ring);
  border: var(--hs-ring-border) solid var(--hs-ink);
  border-radius: 50%;
  background: #ffffff;
}

/* Closing step keeps the same green ring, but fills it to mark the end. */
.high-steps__item--accent .high-steps__ring {
  background: var(--hs-accent);
}

.high-steps__icon {
  display: block;
  width: 52%;
  height: 52%;
  object-fit: contain;
}

/*
 * Map pin. The box is just the round head, so the number stays centered on it
 * and the rail keeps using --hs-pin / 2 as the pin center. The tail is a square
 * with three rounded corners turned 45°, which puts the one sharp corner
 * straight down and blends the taper into the circle as a single shape.
 * A rotated square reaches √2/2 of its side past its center, so the tail adds
 * (0.5 + √2/2 − 1) = 0.2071 of the head height below the box.
 */
.high-steps__num {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: var(--hs-pin);
  height: var(--hs-pin);
  margin-top: var(--hs-ring-gap);
  margin-bottom: calc(var(--hs-pin) * 0.2071);
  color: #ffffff;
  font-family: var(--font-primary);
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
}

.high-steps__num::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--hs-ink);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
}

.high-steps__title {
  margin: 1.1rem 0 0;
  color: var(--hs-ink);
  /* 여기어때 잘난체 — single weight, so no synthesized bold. */
  font-family: var(--font-jalnan);
  font-size: clamp(1.05rem, 1.55vw, 1.3rem);
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: -0.03em;
  line-height: 1.3;
  word-break: keep-all;
}

.high-steps__text {
  margin: 0.7rem 0 0;
  /* Widened with the type bump so the copy still breaks over three lines. */
  max-width: 15rem;
  color: var(--hs-body);
  font-family: var(--font-primary);
  font-size: clamp(1rem, 1.35vw, 1.15rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.65;
  word-break: keep-all;
}

/* The rail and chevrons only make sense across four side-by-side columns. */
@media (min-width: 768px) {
  .high-steps__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    row-gap: 0;
  }

  /* One dotted line across the strip, level with the pin centers. */
  .high-steps__list::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--hs-ring) + var(--hs-ring-gap) + var(--hs-pin) / 2);
    border-top: 2px dotted var(--hs-rail);
  }

  /*
   * With equal tracks the column boundary is exactly halfway between two pins,
   * so anchoring to the item's left edge centers the chevron between them.
   */
  .high-steps__item + .high-steps__item::before {
    content: "›";
    position: absolute;
    z-index: 1;
    top: calc(var(--hs-ring) + var(--hs-ring-gap) + var(--hs-pin) / 2);
    left: calc(var(--hs-col-gap) / -2);
    transform: translate(-50%, -50%);
    color: var(--hs-ink);
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1;
    user-select: none;
  }
}

/* Space under vacation closing line before the next section title. */
.high-body > .curriculum-sheet__report-close {
  margin-bottom: var(--spacing-2xl);
}

/*
 * Feedback cards sit directly in .high-body (middle nests them in an intro),
 * so repeat the side inset the middle sheet applies through that wrapper.
 */
.high-body__feedback-cards {
  padding-inline: clamp(0.75rem, 2vw, 1.75rem);
  margin-bottom: var(--spacing-2xl);
}

/* Middle bakes the chevron color into the SVG data URI, so repaint it green. */
.high-body__feedback-cards .curriculum-sheet__feedback-arrow::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 88'%3E%3Cpolyline points='22,10 38,44 22,78' fill='none' stroke='%232BA86F' stroke-width='15' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
}

/**
 * Naesin overview: reuse middle process-card look, but 4 columns on desktop.
 * Sits above .high-body__detail-steps so titles/detail copy stay under the strip.
 */
.high-body__naesin-process {
  margin-bottom: var(--spacing-lg);
}

/* Closing line under the naesin process strip — space before next section. */
.high-body__naesin-close {
  margin-bottom: var(--spacing-2xl);
}

.high-body__naesin-process-grid {
  max-width: none;
}

@media (min-width: 768px) {
  .high-body__naesin-process-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(1.25rem, 2.5vw, 2rem);
  }
}

@media (min-width: 1024px) {
  .high-body__naesin-process-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(1rem, 2vw, 1.75rem);
  }
}

/* Slightly tighter cards so four columns keep the middle step→result stack. */
.high-body__naesin-process .curriculum-sheet__process-card--step,
.high-body__naesin-process .curriculum-sheet__process-card--result {
  min-height: 8.75rem;
  padding: 1rem 0.7rem 1.1rem;
}

.high-body__naesin-process .curriculum-sheet__process-card--step .curriculum-sheet__process-title,
.high-body__naesin-process .curriculum-sheet__process-card--result .curriculum-sheet__process-title {
  font-size: clamp(1.05rem, 1.55vw, 1.28rem);
}

.high-body__naesin-process .curriculum-sheet__process-card--step .curriculum-sheet__process-desc,
.high-body__naesin-process .curriculum-sheet__process-card--result .curriculum-sheet__process-desc {
  font-size: clamp(1rem, 1.4vw, 1.15rem);
}

/**
 * Detailed naesin SYSTEM steps — longer copy than the chamfer cards.
 * Title uses primary bold; body matches middle intro (GyeonggiBatang).
 */
.high-body__detail-steps {
  display: grid;
  gap: var(--spacing-xl);
  list-style: none;
  margin: 0 0 var(--spacing-2xl);
  padding: 0 clamp(0.75rem, 2vw, 1.75rem);
}

.high-body__detail-step {
  margin: 0;
  padding: 0;
}

.high-body__detail-title {
  margin: 0 0 0.55rem;
  color: var(--cm-coral);
  font-family: var(--font-primary);
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.high-body__detail-body {
  display: grid;
  gap: 0.65rem;
  /* Soft inset so body copy sits slightly inside the step title width. */
  padding-inline: clamp(0.75rem, 1.5vw, 1.25rem);
}

.high-body__detail-body p {
  margin: 0;
  color: var(--cm-ink);
  font-family: var(--font-gyeonggi-batang);
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  line-height: var(--line-height-relaxed);
  letter-spacing: 0;
}

.high-body__flow--compact {
  margin: 0.25rem 0;
  padding-inline: 0;
}

.high-body__flow--compact .high-body__flow-step {
  padding: 0.45rem 0.75rem;
  font-size: clamp(0.9rem, 1.25vw, 1.05rem);
}

/**
 * Mock-exam checklist as a single-row tag strip (not a vertical bullet list).
 * Matches high-body flow chips: green outline tags on one line.
 */
.high-body__bullet-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.45rem;
  list-style: none;
  margin: 0.15rem 0;
  padding: 0;
}

.high-body__bullet-list li {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0.45rem 0.85rem;
  background: var(--cm-track-on, #fff);
  color: var(--cm-coral);
  border: 1px solid var(--cm-coral);
  border-radius: 10px;
  font-family: var(--font-primary);
  font-size: clamp(0.9rem, 1.3vw, 1.1rem);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.02em;
  line-height: 1.25;
  white-space: nowrap;
}