/* Hallmark · U.S. high-school prospectus, feature story, and enrollment handbook.
   Each design leads with a different part of the same program. */
:root {
  --sans: "NanumBarunGothic", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --ko-serif: "Nanum Myeongjo", "Batang", serif;
  --latin: "Source Sans 3", "Segoe UI", sans-serif;
  --latin-serif: "Georgia", "Baskerville", serif;
  --title: var(--ko-serif);
  --paper: #faf8f0;
  --surface: #eeeadf;
  --ink: #2a211e;
  --muted: #5c5048;
  --accent: #651e2b;
  --accent-hover: #4e1420;
  --on-accent: #fffaf0;
  --line: #d6ccbf;
  --focus: #b07a12;
  --highlight: #e9d6ac;
  --highlight-hover: #f2e4c4;
  --white: #ffffff;
  --photo-label: #161b22e6;
  --measure: 78rem;
  --gutter: clamp(1rem, 5vw, 4.5rem);
  --ease: cubic-bezier(.22, 1, .36, 1);
}
.feature {
  --paper: #fcfcf8;
  --surface: #edf0f3;
  --ink: #102033;
  --muted: #4d5664;
  --accent: #11253c;
  --accent-hover: #243e58;
  --on-accent: #fbfcf8;
  --line: #d1d7df;
  --highlight: #ecd396;
  --highlight-hover: #f6e3b5;
  --focus: #b0780f;
}
.pathway {
  --title: var(--sans);
  --paper: #fcfbf5;
  --surface: #e9eee3;
  --ink: #1f3026;
  --muted: #43594e;
  --accent: #244e3e;
  --accent-hover: #173e31;
  --on-accent: #fffdf3;
  --line: #c9d2c5;
  --focus: #a05a21;
}
.comparison {
  --title: var(--sans);
  --paper: #f5f3eb;
  --surface: #e9e5da;
  --ink: #242a2e;
  --muted: #4f565d;
  --accent: #283f4b;
  --accent-hover: #172d36;
  --on-accent: #fffdf3;
  --line: #ccc9bb;
  --focus: #974020;
}


*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; overflow-x: clip; }
html { scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--ink);
  font: 1rem/1.7 var(--sans);
  word-break: keep-all;
}
a { color: inherit; }
img { display: block; width: 100%; height: auto; }
button, textarea { font: inherit; }
button { color: inherit; }
h1, h2, h3, p, figure, dl, dd { margin: 0; }
h1, h2, h3 {
  min-width: 0;
  font-family: var(--title);
  letter-spacing: -.045em;
  line-height: 1.16;
  text-wrap: balance;
  overflow-wrap: break-word;
}
h1 { font-size: clamp(2.45rem, 5.5vw, 5.6rem); }
h2 { font-size: clamp(1.9rem, 3.65vw, 3.35rem); }
h3 { font-size: clamp(1.1rem, 1.65vw, 1.45rem); }
p { overflow-wrap: break-word; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
[hidden] { display: none !important; }
.shell { width: min(var(--measure), calc(100% - 2 * var(--gutter))); margin-inline: auto; }
section[id] { scroll-margin-top: 1.25rem; }

.skip {
  position: fixed;
  z-index: 10;
  top: .5rem;
  left: .5rem;
  padding: .5rem 1rem;
  background: var(--paper);
  transform: translateY(-160%);
}
.skip:focus { transform: translateY(0); }
.review {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: .75rem;
}
.review .shell {
  display: flex;
  min-height: 2rem;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
}
.review a, .site-footer a { text-underline-offset: .23em; }
.is-preview .review { display: none; }
.masthead { border-bottom: 1px solid var(--line); }
.masthead-inner { min-height: 5.3rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.brand { display: inline-grid; align-content: center; flex: none; line-height: 1.1; text-decoration: none; }
.brand-name { font: 700 1.75rem/1.15 var(--ko-serif); letter-spacing: -.06em; }
.brand-program { margin-top: .38rem; font: 600 .7rem/1.2 var(--sans); }
.main-nav { display: flex; align-items: center; gap: clamp(.9rem, 2.6vw, 2.5rem); }
.main-nav > a { font-size: .9rem; font-weight: 700; text-decoration: none; }
.main-nav > a:not(.action):hover { text-decoration: underline; text-underline-offset: .35em; }
.mobile-nav { display: none; }
.action {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: .95rem;
  min-height: 3rem;
  width: fit-content;
  padding: .65rem 1.05rem;
  border: 1px solid var(--button-border, var(--accent));
  background: var(--button, var(--accent));
  color: var(--button-ink, var(--on-accent));
  font-weight: 700;
  font-size: .9rem;
  text-decoration: none;
  cursor: pointer;
  transition: transform 240ms var(--ease), background-color 240ms var(--ease), border-color 240ms var(--ease);
}
.action:hover { background: var(--button-hover, var(--accent-hover)); transform: translateY(-2px); }
.action:active { transform: translateY(0); }
.action-arrow { font-family: var(--latin); font-size: 1.15em; line-height: 1; }
.text-link { display: inline-flex; gap: .65rem; align-items: center; width: fit-content; color: var(--accent); font-weight: 700; text-underline-offset: .28em; }

.hero-media { min-width: 0; position: relative; overflow: clip; background: var(--surface); }
.hero-media img { height: 100%; object-fit: cover; }
.image-source {
  position: absolute;
  right: 0;
  bottom: 0;
  max-width: 100%;
  padding: .3rem .65rem;
  background: var(--photo-label);
  color: var(--white);
  font-size: .67rem;
  line-height: 1.5;
}
.hero-copy { min-width: 0; align-self: center; }
.hero-copy p { margin: 1.35rem 0 1.7rem; max-width: 31rem; font-size: clamp(1rem, 1.5vw, 1.15rem); }
.english { font-family: var(--latin-serif); font-weight: 400; letter-spacing: -.062em; text-wrap: initial; }
.qualification { background: var(--surface); border-block: 1px solid var(--line); }
.qualification .shell { display: flex; align-items: baseline; gap: .9rem; padding-block: .7rem; font-size: .81rem; color: var(--muted); }
.qualification b { flex: none; color: var(--ink); }
.qualification a { margin-left: .25rem; text-underline-offset: .2em; }

.section { padding-block: clamp(3.5rem, 7.5vw, 7rem); }
.section + .section { border-top: 1px solid var(--line); }
.section-lead { display: grid; gap: 1rem; align-content: start; }
.section-lead > p { max-width: 31rem; color: var(--muted); }
.split { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 8vw, 7rem); }
.catalog-rows > div { padding: 1.1rem 0 1.25rem; border-top: 1px solid var(--line); }
.catalog-rows > div:first-child { padding-top: 0; border-top: 0; }
.catalog-rows > div:last-child { padding-bottom: 0; }
.catalog-rows dt { font-size: 1rem; font-weight: 700; }
.catalog-rows dd { margin-top: .25rem; color: var(--muted); }
.program-menu {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
  border-block: 1px solid var(--line);
}
.program-menu li + li { border-left: 1px solid var(--line); }
.program-menu a { display: grid; align-content: start; gap: .45rem; height: 100%; padding: 1.2rem; text-decoration: none; transition: background-color 240ms var(--ease); }
.program-menu a:hover { background: var(--surface); }
.program-menu a > span { display: flex; justify-content: space-between; gap: .5rem; font-weight: 700; }
.program-menu small { color: var(--muted); font-size: .875rem; }
.academic-band { background: var(--surface); }
.advising { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 5vw, 4rem); margin-top: 2rem; }
.advising > div { border-top: 2px solid var(--accent); padding-top: 1rem; }
.advising dd { margin-top: .6rem; color: var(--muted); }
.advising dt { font: 400 clamp(1.45rem, 2.7vw, 2.4rem)/1.1 var(--latin-serif); }
.feature-letter { max-width: 46rem; margin-top: 1rem; font-size: clamp(1rem, 1.4vw, 1.15rem); color: var(--muted); }
.steps { margin: 0; padding-inline-start: 1.4rem; }
.steps li { padding: 0 0 1rem .4rem; }
.steps li + li { border-top: 1px solid var(--line); padding-top: 1rem; }
.steps li:last-child { padding-bottom: 0; }
.steps li::marker { color: var(--accent); font: 700 .9rem var(--latin); }
.steps p { color: var(--muted); margin-top: .3rem; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  min-height: 3.35rem;
  padding: .8rem 0;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); font-size: 1.15rem; }
.faq details[open] summary::after { content: "−"; }
.faq details p { color: var(--muted); padding: 0 1.15rem 1.1rem 0; }
.admission { background: var(--surface); }
.admission .split { align-items: start; }
.admission .section-lead .action { margin-top: .35rem; }
.admission .consult-list { margin: 0; padding-inline-start: 1.2rem; }
.admission .consult-list li + li { margin-top: .5rem; }
.admission .consult-note { margin-top: .8rem; color: var(--muted); font-size: .82rem; }
.copy-status { font-size: .85rem; }
.copy-status:empty { display: none; }
.memo-copy { width: 100%; min-height: 7.5rem; padding: .65rem; border: 1px solid var(--line); background: var(--paper); color: var(--ink); }
.site-footer { padding-block: 2rem; border-top: 1px solid var(--line); font-size: .8rem; color: var(--muted); }
.site-footer .shell { display: flex; justify-content: space-between; gap: 1rem; }
.site-footer .footer-name { color: var(--ink); font-weight: 700; }

.classic .masthead { border-top: 4px solid var(--accent); }
.classic .masthead-inner { min-height: auto; flex-direction: column; gap: 0; }
.classic .masthead .brand { text-align: center; padding: 1.1rem 0 .95rem; }
.classic .masthead .brand-name { font-size: 2.35rem; color: var(--accent); }
.classic .main-nav { justify-content: center; width: 100%; min-height: 3.1rem; border-top: 1px solid var(--line); }
.classic .main-nav .action { min-height: 2.1rem; padding: .25rem .7rem; }
.classic-hero { background: var(--accent); color: var(--on-accent); }
.classic-hero .hero-grid { display: grid; grid-template-columns: minmax(0, .89fr) minmax(0, 1.11fr); min-height: clamp(31rem, 43vw, 42rem); }
.classic-hero .hero-copy { padding-block: 2.85rem; padding-right: clamp(1.5rem, 4.5vw, 4.5rem); }
.classic-hero h1 { font-size: clamp(3rem, 5.55vw, 6rem); line-height: .98; }
.classic-hero .hero-media img { position: absolute; inset: 0; object-position: 52% center; }
.classic-hero .action, .feature-hero .action {
  --button: var(--highlight);
  --button-ink: var(--ink);
  --button-hover: var(--highlight-hover);
  --button-border: var(--highlight);
}

.feature .masthead { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.feature .masthead .main-nav .action { --button: var(--highlight); --button-ink: var(--ink); --button-hover: var(--highlight-hover); --button-border: var(--highlight); }
.feature-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: clamp(33rem, 48vw, 43rem);
  background: var(--accent);
  color: var(--on-accent);
  isolation: isolate;
}
.feature-hero > * { grid-area: 1 / 1; }
.feature-hero .hero-media img { object-position: 60% 50%; }
.feature-hero .hero-media { min-height: 0; }
.feature-hero .hero-media img { position: absolute; inset: 0; }
.feature-hero .feature-type { z-index: 1; align-self: end; padding-bottom: clamp(2rem, 5vw, 4.5rem); }
.feature-hero .hero-copy { width: fit-content; max-width: 100%; padding: clamp(1.4rem, 3.2vw, 2.75rem); background: var(--accent); border-top: 4px solid var(--highlight); }
.feature-hero h1 { font-size: clamp(3.1rem, 5.7vw, 5.65rem); line-height: .92; }
.feature-hero p { max-width: 24rem; }
.feature .advising-intro { background: var(--paper); }
.feature .advising dt { color: var(--accent); }

.pathway .masthead { border-top: 5px solid var(--accent); }
.pathway .brand-name, .pathway .site-footer .footer-name { font-family: var(--sans); }
.pathway-hero { background: var(--surface); padding-block: clamp(2.2rem, 5vw, 4.8rem); }
.pathway-hero .hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(1.5rem, 6vw, 6rem); }
.pathway-hero h1 { font-size: clamp(2.45rem, 5vw, 4.8rem); }
.pathway-hero .hero-media { aspect-ratio: 1.2; }
.pathway-hero .hero-media img { object-position: 50% 46%; }
.pathway-section { padding-block: clamp(2.75rem, 5.5vw, 5.25rem); }
.pathway-section h2 { margin-bottom: 1.4rem; }
.pathway-selector { display: grid; grid-template-columns: minmax(0, .73fr) minmax(0, 1.27fr); border-top: 1px solid var(--line); }
.route-tabs { display: grid; align-content: start; }
.route-tabs button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  min-height: 3rem;
  padding: .55rem .85rem;
  text-align: left;
  background: var(--paper);
  border: 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.route-tabs button:hover { background: var(--surface); }
.route-tabs button[aria-selected="true"] { background: var(--accent); color: var(--on-accent); font-weight: 700; }
.route-tabs button:focus-visible { outline-offset: -4px; }
.route-body { min-width: 0; background: var(--surface); }
.route-panel { padding: clamp(1.1rem, 4vw, 3.25rem); }
.route-panel h3 { font-size: clamp(1.45rem, 2.65vw, 2.35rem); }
.route-panel p { margin-block: .75rem 1.1rem; color: var(--muted); max-width: 31rem; }
.route-panel + .route-panel { border-top: 1px solid var(--line); }
.credits { text-align: right; }

@media (max-width: 760px) {
  .masthead-inner { min-height: 4.1rem; flex-wrap: wrap; gap: .6rem; position: relative; }
  .brand-name { font-size: 1.4rem; }
  .brand-program { font-size: .64rem; }
  .main-nav { display: none; }
  .mobile-nav { display: block; }
  .mobile-nav summary { list-style: none; cursor: pointer; font-weight: 700; font-size: .88rem; }
  .mobile-nav summary::-webkit-details-marker { display: none; }
  .mobile-nav > div {
    position: absolute;
    z-index: 3;
    right: 0;
    top: calc(100% - .15rem);
    display: grid;
    min-width: 10rem;
    background: var(--paper);
    color: var(--ink);
    border: 1px solid var(--line);
  }
  .mobile-nav a { padding: .6rem .85rem; font-size: .88rem; text-decoration: none; }
  .mobile-nav a + a { border-top: 1px solid var(--line); }
  .classic .masthead-inner { flex-direction: row; }
  .classic .masthead .brand { text-align: left; padding: .7rem 0; }
  .classic .masthead .brand-name { font-size: 1.6rem; }
  .classic-hero .hero-grid { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .classic-hero .hero-copy { padding: 2rem 0 1.65rem; }
  .classic-hero h1 { font-size: clamp(3rem, 11vw, 4.5rem); }
  .classic-hero .hero-media { aspect-ratio: 1.8; margin-inline: calc(-1 * var(--gutter)); }
  .feature-hero { min-height: 0; }
  .feature-hero > * { grid-area: auto; }
  .feature-hero .feature-type { grid-row: 1; padding-block: 1.7rem; }
  .feature-hero .hero-copy { padding: 0; border: 0; }
  .feature-hero h1 { font-size: clamp(3rem, 10vw, 4.45rem); }
  .feature-hero .hero-media { aspect-ratio: 1.65; }
  .hero-copy p { margin: 1rem 0 1.25rem; }
  .pathway-hero .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .pathway-hero h1 { font-size: clamp(2.2rem, 8.6vw, 3.5rem); }
  .pathway-hero .hero-media { aspect-ratio: 2; }
  .qualification .shell { gap: .25rem; flex-direction: column; }
  .split, .advising, .pathway-selector { grid-template-columns: minmax(0, 1fr); }
  .program-menu { grid-template-columns: minmax(0, 1fr); }
  .program-menu li + li { border-left: 0; border-top: 1px solid var(--line); }
  .program-menu a { padding: .8rem 0; }
  .route-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .route-tabs button:nth-child(even) { border-left: 1px solid var(--line); }
  .route-panel { min-height: 0; }
  .site-footer .shell { flex-direction: column; }
  .credits { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .action:hover { transform: none; }
}

/* The two introductions share a masthead system. Each has its own layout below it. */
.prospectus {
  display: grid;
  grid-template-columns: minmax(0, 13.2rem) minmax(0, 1fr);
  align-items: start;
  gap: clamp(2rem, 6.2vw, 6.25rem);
  padding-block: clamp(2.5rem, 5.5vw, 5rem) clamp(3.5rem, 7vw, 6.5rem);
}
.prospectus-contents {
  position: sticky;
  top: 1.5rem;
  padding-top: 1rem;
  border-top: 3px solid var(--accent);
}
.prospectus-contents > p { color: var(--accent); font: 700 1.35rem/1.25 var(--title); }
.prospectus-contents ul { list-style: none; padding: 0; margin: .8rem 0 0; }
.prospectus-contents li { border-bottom: 1px solid var(--line); }
.prospectus-contents a {
  display: block;
  padding: .56rem .15rem;
  font-size: .91rem;
  font-weight: 700;
  text-decoration: none;
}
.prospectus-contents a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: .3em; }
.prospectus-body { min-width: 0; }
.prospectus-chapter + .prospectus-chapter {
  margin-top: clamp(2.6rem, 5.5vw, 5.2rem);
  padding-top: clamp(1.5rem, 3vw, 2.75rem);
  border-top: 1px solid var(--line);
}
.prospectus-chapter h2 { color: var(--accent); }
.prospectus-chapter:not(:first-child) h2 { font-size: clamp(1.8rem, 3.15vw, 2.75rem); }
.chapter-lead { max-width: 42rem; margin-top: 1rem; color: var(--muted); font-size: clamp(1rem, 1.5vw, 1.14rem); }
.diploma-flow {
  margin-top: clamp(1.3rem, 3vw, 2.2rem);
  padding: clamp(1rem, 2.3vw, 1.8rem);
  background: var(--accent);
  color: var(--on-accent);
}
.diploma-flow figcaption { font: 700 clamp(1.15rem, 2.1vw, 1.55rem)/1.3 var(--title); }
.diploma-flow ol {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .65rem;
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
}
.diploma-flow li { position: relative; display: grid; align-content: start; gap: .2rem; min-width: 0; }
.diploma-flow li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 1.55rem;
  right: .55rem;
  width: .45rem;
  height: .45rem;
  border-top: 1px solid var(--highlight);
  border-right: 1px solid var(--highlight);
  transform: rotate(45deg);
}
.diploma-flow li > span:last-child { font-size: .79rem; }
.flow-mark { display: block; width: 3.5rem; height: 3.5rem; margin-bottom: .45rem; color: var(--highlight); }
.flow-mark svg { display: block; width: 100%; height: 100%; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.registrar-note { margin-top: .85rem; font-size: .9rem; color: var(--muted); }
.registrar-note b { color: var(--accent); margin-right: .35rem; }
.planning-spread {
  display: grid;
  grid-template-columns: minmax(0, .87fr) minmax(0, 1.13fr);
  align-items: center;
  gap: clamp(1rem, 3vw, 2.55rem);
  margin-top: 1.3rem;
}
.course-books { overflow: clip; min-width: 0; aspect-ratio: 1.55; }
.course-books img { width: 100%; height: 100%; object-fit: cover; }
.planning-spread h3 { font: 700 1.1rem/1.35 var(--sans); letter-spacing: -.025em; }
.planning-spread ul { margin: .55rem 0; padding-inline-start: 1.15rem; }
.planning-spread p { color: var(--muted); font-size: .9rem; }
.prospectus-support dl { margin-top: 1.3rem; border-block: 1px solid var(--line); }
.prospectus-support dl > div {
  display: grid;
  grid-template-columns: minmax(0, 7rem) minmax(0, 1fr);
  gap: .45rem 1rem;
  padding: .9rem 0;
}
.prospectus-support dl > div + div { border-top: 1px solid var(--line); }
.prospectus-support dt { font-weight: 700; }
.prospectus-support dd { color: var(--muted); }
.prospectus-chapter.faq h2 { margin-bottom: 1.2rem; }

.prospectus-contact, .student-contact { padding-block: clamp(2.35rem, 4.9vw, 4.45rem); }
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, .87fr) minmax(0, 1.13fr);
  gap: clamp(1.7rem, 7vw, 6rem);
  align-items: start;
}
.contact-intro p { max-width: 28rem; margin-top: .9rem; }
.contact-questions { padding-top: 1rem; border-top: 1px solid var(--line); }
.contact-questions h3 { font: 700 1.06rem/1.4 var(--sans); letter-spacing: -.025em; }
.contact-questions ul { margin: .65rem 0 1.15rem; padding-inline-start: 1.2rem; }
.contact-questions li + li { margin-top: .25rem; }
.contact-questions .action { min-height: 2.6rem; padding: .45rem .75rem; }
.contact-questions .copy-status { margin-top: .4rem; }
.contact-questions .memo-copy { margin-top: .55rem; }
.prospectus-contact { background: var(--accent); color: var(--on-accent); }
.prospectus-contact .contact-questions { border-color: var(--highlight); }
.prospectus-contact .action {
  --button: var(--highlight);
  --button-ink: var(--ink);
  --button-hover: var(--highlight-hover);
  --button-border: var(--highlight);
}
.prospectus-footer { border-top: 0; }

.student-spread { padding-block: clamp(3.25rem, 6.35vw, 6rem); }
.study-spread {
  display: grid;
  grid-template-columns: minmax(0, .89fr) minmax(0, 1.11fr);
  align-items: start;
  gap: clamp(1.75rem, 6.2vw, 5.65rem);
}
.study-story { padding-top: .35rem; }
.study-story > p { max-width: 30rem; margin-top: 1rem; font-size: clamp(1rem, 1.5vw, 1.14rem); color: var(--muted); }
.visit-note { max-width: 28rem; margin-top: 1.6rem; padding-top: .85rem; border-top: 1px solid var(--line); }
.visit-note h3 { font: 700 1.02rem/1.4 var(--sans); letter-spacing: -.025em; }
.visit-note p { margin-top: .3rem; color: var(--muted); }
.study-record { min-width: 0; background: var(--white); border: 1px solid var(--line); border-top: 4px solid var(--accent); }
.study-record h3 { padding: .9rem 1.15rem; border-bottom: 1px solid var(--line); background: var(--surface); }
.assignment-chart { padding: .8rem 1.15rem 1rem; }
.assignment-chart p { display: flex; align-items: baseline; gap: .35rem; margin-bottom: .7rem; color: var(--accent); }
.assignment-chart p strong { font: 400 clamp(2.8rem, 5.2vw, 4.55rem)/1 var(--latin-serif); }
.assignment-chart p span { font-weight: 700; }
.assignment-bar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .28rem; }
.assignment-bar span { height: clamp(1.55rem, 3vw, 2.5rem); background: var(--surface); border: 1px solid var(--line); }
.assignment-bar .submitted { background: var(--accent); border-color: var(--accent); }
.assignment-labels { display: grid; grid-template-columns: 3fr 2fr; gap: .28rem; margin-top: .45rem; font-size: .82rem; }
.assignment-labels span:last-child { color: var(--muted); text-align: right; }
.assignment-next { list-style: none; margin: 0; padding: 0 1.15rem; border-top: 1px solid var(--line); }
.assignment-next li { display: grid; grid-template-columns: minmax(0, 3.2rem) minmax(0, 1fr); gap: .65rem; padding: .63rem 0; font-size: .91rem; }
.assignment-next li + li { border-top: 1px solid var(--line); }
.assignment-next li span { color: var(--muted); }
.counseling-spread { background: var(--accent); color: var(--on-accent); }
.counseling-grid {
  display: grid;
  grid-template-columns: minmax(0, .98fr) minmax(0, 1.02fr);
  gap: clamp(1.5rem, 6vw, 5.75rem);
  align-items: stretch;
}
.notebook { min-width: 0; overflow: clip; aspect-ratio: 1.52; }
.notebook img { width: 100%; height: 100%; object-fit: cover; }
.counseling-copy { align-self: center; padding-block: clamp(1.4rem, 3.7vw, 3.6rem); }
.counseling-copy p { max-width: 33rem; margin-top: .9rem; }
.advising-steps { list-style: none; margin: 1.1rem 0 0; padding: 0; }
.advising-steps li { position: relative; margin-left: .4rem; padding: .25rem 0 .55rem 1.4rem; border-left: 1px solid var(--highlight); }
.advising-steps li::before { content: ""; position: absolute; top: .65rem; left: -.26rem; width: .46rem; height: .46rem; background: var(--highlight); transform: rotate(45deg); }
.advising-steps li:last-child { padding-bottom: .2rem; border-color: transparent; }
.student-enrollment {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: clamp(1.7rem, 5.85vw, 5rem);
  padding-block: clamp(2.9rem, 6.4vw, 6rem);
}
.student-enrollment > section { min-width: 0; }
.student-enrollment > section + section { padding-left: clamp(1.1rem, 3vw, 2.65rem); border-left: 1px solid var(--line); }
.student-enrollment h2 { font-size: clamp(1.75rem, 3.05vw, 2.45rem); }
.student-enrollment p { margin-top: .8rem; color: var(--muted); }
.student-faq { padding-block: clamp(2.5rem, 5vw, 4.8rem); border-top: 1px solid var(--line); }
.student-faq .shell { max-width: 49rem; }
.student-faq h2 { margin-bottom: 1.4rem; }
.student-contact { background: var(--surface); }

@media (max-width: 760px) {
  .prospectus, .contact-grid, .study-spread, .counseling-grid, .student-enrollment { grid-template-columns: minmax(0, 1fr); }
  .prospectus { gap: 1.9rem; padding-block: 1.65rem 2.75rem; }
  .prospectus-contents { position: static; padding-top: .7rem; }
  .prospectus-contents ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 .65rem; }
  .prospectus-contents a { font-size: .86rem; }
  .diploma-flow ol { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem .6rem; }
  .diploma-flow li:nth-child(2)::after { display: none; }
  .planning-spread { grid-template-columns: minmax(0, 1fr); }
  .course-books { aspect-ratio: 2.15; }
  .prospectus-support dl > div { grid-template-columns: minmax(0, 1fr); }
  .study-record h3 { padding: .75rem .85rem; }
  .assignment-chart { padding-inline: .85rem; }
  .assignment-next { padding-inline: .85rem; }
  .counseling-grid { gap: 0; }
  .notebook { aspect-ratio: 1.7; }
  .student-enrollment > section + section { padding: 1.3rem 0 0; border: 0; border-top: 1px solid var(--line); }
}




/* BridgeOn 로고 색으로 옮김: 남색 #0F203C, 주황 #F05A28 */
:root{--sans:"Pretendard Variable",Pretendard,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;--latin-serif:"Source Serif 4",Georgia,serif}
.feature{--paper:#fbfaf6;--surface:#eef0f3;--ink:#0F203C;--muted:#4f5868;--accent:#0F203C;--accent-hover:#1b3157;--on-accent:#fbfcf8;--line:#d5d9e0;--highlight:#F05A28;--highlight-hover:#ff7240;--focus:#F05A28}
body{-webkit-font-smoothing:antialiased}
::selection{background:#0F203C;color:#fff}
h1,h2,h3{letter-spacing:-.025em}
.english{letter-spacing:-.03em}
.feature .masthead{position:sticky;top:0;z-index:20;background:var(--accent);color:#fff;border-color:var(--accent)}
.feature .masthead .main-nav .action{--button:var(--highlight);--button-ink:var(--ink);--button-hover:var(--highlight-hover);--button-border:var(--highlight)}
.masthead-inner{min-height:4.75rem}
.brand img{width:auto;height:2.6rem}
html{scroll-padding-top:5.5rem}
section[id]{scroll-margin-top:5.5rem}
.action:hover{transform:none}
.contact-questions .action{--button:var(--highlight);--button-ink:var(--ink);--button-hover:var(--highlight-hover);--button-border:var(--highlight)}
.feature-hero .hero-copy p{color:#dfe5ee}
.advising-steps li::before{border-radius:50%}
@media (max-width:760px){.brand img{height:2.1rem}.mobile-nav summary{min-height:44px;display:flex;align-items:center;padding-inline:.75rem;border:1px solid rgba(255,255,255,.4)}}

/* ---------- 하위 페이지 */
.page-hero{background:var(--accent);color:var(--on-accent);padding-block:clamp(2.6rem,5.6vw,5rem);border-top:1px solid rgba(255,255,255,.14)}
.page-hero h1{font-size:clamp(2.8rem,5.4vw,5rem);line-height:.95}
.page-hero p{margin-top:1.3rem;max-width:33rem;font-size:clamp(1rem,1.5vw,1.15rem);color:#dfe5ee}
.page-hero .crumb{margin:0 0 1rem;font-size:.86rem;font-weight:700;color:#aeb9cc}
.main-nav>a[aria-current]{text-decoration:underline;text-underline-offset:.35em}
.note{margin-top:1.4rem;font-size:.9rem;color:var(--muted)}
.record-list{list-style:none;margin:0;padding:0 1.15rem}
.record-list li{display:grid;grid-template-columns:minmax(0,4.6rem) minmax(0,1fr);gap:.65rem;padding:.7rem 0;font-size:.93rem}
.record-list li+li{border-top:1px solid var(--line)}
.record-list li span{color:var(--muted)}
.assignment-bar.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.unit-list{margin:0;padding:0;list-style:none;counter-reset:u;border-top:2px solid var(--accent)}
.unit-list li{counter-increment:u;display:grid;grid-template-columns:3rem minmax(0,1fr);align-items:baseline;padding:.95rem 0;border-bottom:1px solid var(--line);font:700 clamp(1.1rem,1.7vw,1.35rem)/1.4 var(--title)}
.unit-list li::before{content:counter(u);font:400 1.35rem/1 var(--latin-serif);color:var(--muted)}
.next-band{background:var(--accent);color:var(--on-accent);padding-block:clamp(2.35rem,4.9vw,4.2rem)}
.next-band .shell{display:flex;justify-content:space-between;align-items:center;gap:2rem;flex-wrap:wrap}
.next-band h2{font-size:clamp(1.6rem,2.8vw,2.4rem)}
.next-band p{margin-top:.5rem;color:#d3dae6}
.next-band .action{--button:var(--highlight);--button-ink:var(--ink);--button-hover:var(--highlight-hover);--button-border:var(--highlight)}
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;padding:clamp(1.2rem,3vw,2rem);background:var(--white);border:1px solid var(--line);border-top:4px solid var(--accent)}
.form label{display:grid;gap:.4rem;font-size:.86rem;font-weight:700}
.form .full{grid-column:1/-1}
.form input,.form select,.form textarea{font:400 .95rem/1.4 var(--sans);padding:.72rem .75rem;border:1px solid #b9c0cc;background:var(--paper);color:var(--ink);width:100%;border-radius:0}
.form select{appearance:none;padding-right:2.4rem;background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%230F203C' stroke-width='1.6'/%3E%3C/svg%3E") right .85rem center/.7rem no-repeat}
.form textarea{min-height:5.5rem;resize:none}
.form .agree{display:flex;gap:.6rem;align-items:center;font-weight:500}
.form .agree input{width:1.1rem;height:1.1rem;flex:none;accent-color:var(--accent)}
.form .action{--button:var(--highlight);--button-ink:var(--ink);--button-hover:var(--highlight-hover);--button-border:var(--highlight);width:100%;justify-content:center;min-height:3.2rem}
.form output{font-size:.86rem;color:var(--muted)}
.form output:empty{display:none}
@media (max-width:760px){.form{grid-template-columns:minmax(0,1fr)}}