/* /school-match/assets/css/school-match.css */
:root {
    --sm-navy: #10213f;
    --sm-blue: #3157d5;
    --sm-blue-dark: #203faa;
    --sm-mint: #16a99a;
    --sm-bg: #f5f7fb;
    --sm-line: #dfe5ef;
    --sm-text: #172033;
    --sm-muted: #667085;
}

.schoolmatch-page,
.schoolmatch-page * { box-sizing: border-box; }
.schoolmatch-page { min-height: 100vh; overflow: hidden; background: var(--sm-bg); color: var(--sm-text); }
.schoolmatch-page a { text-decoration: none; }

.schoolmatch-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(390px, .92fr);
    gap: 54px;
    align-items: center;
    max-width: 1240px;
    margin: 0 auto;
    padding: 76px 24px 66px;
}
.schoolmatch-hero::before {
    content: "";
    position: absolute;
    width: 620px;
    height: 620px;
    left: -380px;
    top: -310px;
    border-radius: 50%;
    background: rgba(49,87,213,.09);
}
.schoolmatch-hero::after {
    content: "";
    position: absolute;
    width: 360px;
    height: 360px;
    right: -210px;
    bottom: -80px;
    border-radius: 50%;
    background: rgba(22,169,154,.08);
}
.schoolmatch-hero > * { position: relative; z-index: 1; }
.schoolmatch-eyebrow,
.schoolmatch-section-label {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    background: #e9edff;
    color: var(--sm-blue);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .11em;
}
.schoolmatch-hero h1 { margin: 20px 0 0; font-size: clamp(38px, 4.2vw, 58px); line-height: 1.13; letter-spacing: -.06em; font-weight: 900; }
.schoolmatch-hero h1 em { color: var(--sm-blue); font-style: normal; }
.schoolmatch-hero__copy > p { max-width: 660px; margin: 24px 0 0; color: #56647a; font-size: 16px; line-height: 1.85; font-weight: 600; }
.schoolmatch-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.schoolmatch-btn { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 52px; padding: 0 22px; border-radius: 15px; font-size: 14px; font-weight: 900; transition: .2s ease; }
.schoolmatch-btn:hover { transform: translateY(-2px); }
.schoolmatch-btn--primary { background: var(--sm-blue); color: #fff; box-shadow: 0 15px 30px rgba(49,87,213,.25); }
.schoolmatch-btn--primary:hover { background: var(--sm-blue-dark); }
.schoolmatch-btn--ghost { border: 1px solid #d7deea; background: rgba(255,255,255,.72); color: #344054; }
.schoolmatch-hero__meta { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 31px; color: #7a879a; font-size: 12px; font-weight: 800; }
.schoolmatch-hero__meta span { position: relative; }
.schoolmatch-hero__meta span:not(:last-child)::after { content: ""; position: absolute; right: -12px; top: 3px; width: 1px; height: 12px; background: #d4dae4; }
.schoolmatch-hero__meta b { margin-right: 3px; color: var(--sm-text); font-size: 14px; }

.schoolmatch-dashboard { padding: 28px; border: 1px solid rgba(255,255,255,.72); border-radius: 32px; background: rgba(255,255,255,.88); box-shadow: 0 28px 80px rgba(31,45,79,.13); backdrop-filter: blur(12px); }
.schoolmatch-dashboard__head { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-bottom: 22px; border-bottom: 1px solid #e8ecf2; }
.schoolmatch-dashboard__head div > span { display: block; color: #8b96a8; font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.schoolmatch-dashboard__head div > strong { display: block; margin-top: 5px; font-size: 21px; letter-spacing: -.04em; }
.schoolmatch-dashboard__state { padding: 8px 11px; border-radius: 999px; background: #fff3db; color: #9a6410; font-size: 11px; font-weight: 900; }
.schoolmatch-dashboard__state.is-ready { background: #dcf8f3; color: #087a70; }
.schoolmatch-progress-list { display: grid; gap: 11px; margin-top: 20px; }
.schoolmatch-progress-item { display: grid; grid-template-columns: 43px 1fr auto; gap: 13px; align-items: center; padding: 13px 14px; border: 1px solid #e6eaf1; border-radius: 17px; background: #fafbfc; }
.schoolmatch-progress-item.is-complete { border-color: #cfe5e2; background: #f5fcfa; }
.schoolmatch-progress-item__icon { display: grid; place-items: center; width: 43px; height: 43px; border-radius: 13px; background: #e9edff; color: var(--sm-blue); font-size: 13px; font-weight: 900; }
.schoolmatch-progress-item.is-complete .schoolmatch-progress-item__icon { background: #dff7f2; color: #087a70; }
.schoolmatch-progress-item__copy span { display: block; color: #7d899b; font-size: 11px; font-weight: 800; }
.schoolmatch-progress-item__copy strong { display: block; margin-top: 3px; font-size: 14px; }
.schoolmatch-progress-item__count { color: #8b96a8; font-size: 11px; font-weight: 900; }
.schoolmatch-dashboard__notice { display: flex; gap: 10px; align-items: flex-start; margin-top: 18px; padding: 14px 15px; border-radius: 15px; background: #f0f3fb; }
.schoolmatch-dashboard__notice-dot { flex: 0 0 auto; width: 7px; height: 7px; margin-top: 7px; border-radius: 50%; background: var(--sm-blue); box-shadow: 0 0 0 5px rgba(49,87,213,.1); }
.schoolmatch-dashboard__notice p { margin: 0; color: #59677c; font-size: 12px; line-height: 1.65; font-weight: 700; }

.schoolmatch-analysis-section,
.schoolmatch-school-section,
.schoolmatch-flow-section,
.schoolmatch-disclaimer { max-width: 1240px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.schoolmatch-analysis-section { padding-top: 60px; padding-bottom: 70px; }
.schoolmatch-section-head h2 { margin: 14px 0 0; font-size: 34px; line-height: 1.25; letter-spacing: -.055em; }
.schoolmatch-section-head p { max-width: 760px; margin: 12px 0 0; color: var(--sm-muted); font-size: 14px; line-height: 1.75; font-weight: 600; }
.schoolmatch-section-head--row { display: flex; justify-content: space-between; align-items: end; gap: 32px; }
.schoolmatch-head-chip { flex: 0 0 auto; padding: 12px 15px; border: 1px solid #dbe2ec; border-radius: 13px; background: #fff; color: var(--sm-blue); font-size: 12px; font-weight: 900; box-shadow: 0 8px 20px rgba(31,45,79,.05); }

.schoolmatch-analysis-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; margin-top: 30px; }
.schoolmatch-analysis-card { position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 465px; padding: 27px; border: 1px solid var(--sm-line); border-radius: 27px; background: #fff; box-shadow: 0 16px 42px rgba(31,45,79,.07); }
.schoolmatch-analysis-card--esp { border-color: #c9d4ff; background: linear-gradient(155deg,#fff 0%,#f4f6ff 100%); }
.schoolmatch-analysis-card__glow { position: absolute; right: -80px; top: -80px; width: 220px; height: 220px; border-radius: 50%; background: rgba(49,87,213,.12); filter: blur(2px); }
.schoolmatch-analysis-card__top { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.schoolmatch-analysis-card__symbol { display: grid; place-items: center; min-width: 58px; height: 58px; padding: 0 10px; border-radius: 17px; background: #e9edff; color: var(--sm-blue); font-size: 14px; font-weight: 950; letter-spacing: -.03em; }
.schoolmatch-analysis-card--sfi .schoolmatch-analysis-card__symbol { background: #dff7f2; color: #087a70; }
.schoolmatch-analysis-card--esp .schoolmatch-analysis-card__symbol { background: var(--sm-navy); color: #fff; }
.schoolmatch-analysis-card__status { padding: 7px 10px; border-radius: 999px; background: #f1f3f6; color: #7b8798; font-size: 10px; font-weight: 900; }
.schoolmatch-analysis-card__status.is-complete { background: #dcf8f3; color: #087a70; }
.schoolmatch-analysis-card__en { position: relative; z-index: 1; display: block; margin-top: 23px; color: #8994a6; font-size: 9px; font-weight: 900; letter-spacing: .09em; }
.schoolmatch-analysis-card h3 { position: relative; z-index: 1; margin: 7px 0 0; font-size: 25px; letter-spacing: -.045em; }
.schoolmatch-analysis-card > p { position: relative; z-index: 1; margin: 15px 0 0; color: #637085; font-size: 13px; line-height: 1.78; font-weight: 600; }
.schoolmatch-analysis-card ul { position: relative; z-index: 1; display: grid; gap: 9px; margin: 20px 0 0; padding: 0; list-style: none; }
.schoolmatch-analysis-card li { position: relative; padding-left: 18px; color: #3f4c61; font-size: 12px; font-weight: 800; }
.schoolmatch-analysis-card li::before { content: ""; position: absolute; left: 0; top: 5px; width: 7px; height: 7px; border: 2px solid var(--sm-blue); border-radius: 50%; }
.schoolmatch-analysis-card--sfi li::before { border-color: var(--sm-mint); }
.schoolmatch-analysis-card--esp li::before { border-color: var(--sm-navy); }
.schoolmatch-action-row { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 24px; }
.schoolmatch-card-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 15px; border-radius: 13px; background: var(--sm-blue); color: #fff; font-size: 12px; font-weight: 900; box-shadow: 0 10px 20px rgba(49,87,213,.2); transition: .2s ease; }
.schoolmatch-card-btn:hover { transform: translateY(-2px); }
.schoolmatch-card-btn--light { border: 1px solid #dce2eb; background: #f7f8fa; color: #465368; box-shadow: none; }
.schoolmatch-card-btn--dark { background: var(--sm-navy); box-shadow: 0 10px 20px rgba(16,33,63,.2); }
.schoolmatch-inline-link { position: relative; z-index: 1; display: inline-flex; margin-top: 15px; color: var(--sm-blue); font-size: 12px; font-weight: 900; }
.schoolmatch-sub-notice { position: relative; z-index: 1; margin-top: 13px; padding: 12px 13px; border-radius: 12px; background: #f2f4f8; color: #667085; font-size: 11px; line-height: 1.6; font-weight: 700; }

.schoolmatch-school-section { padding-bottom: 74px; }
.schoolmatch-school-panel { padding: 36px; border: 1px solid #e0e5ee; border-radius: 32px; background: #fff; box-shadow: 0 18px 48px rgba(31,45,79,.07); }
.schoolmatch-school-count { flex: 0 0 auto; display: flex; align-items: baseline; gap: 6px; padding: 14px 18px; border-radius: 16px; background: var(--sm-navy); color: #fff; }
.schoolmatch-school-count strong { font-size: 27px; letter-spacing: -.05em; }
.schoolmatch-school-count span { color: rgba(255,255,255,.7); font-size: 11px; font-weight: 900; }
.schoolmatch-school-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 28px; padding-top: 23px; border-top: 1px solid #e8ecf2; }
.schoolmatch-school-search { display: flex; align-items: center; gap: 9px; width: min(390px,100%); min-height: 45px; padding: 0 14px; border: 1px solid #dce2eb; border-radius: 13px; background: #fafbfc; }
.schoolmatch-school-search span { color: #8995a7; font-size: 19px; }
.schoolmatch-school-search input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--sm-text); font-size: 13px; font-weight: 700; }
.schoolmatch-school-toolbar > span { color: #7d899a; font-size: 12px; font-weight: 900; }
.schoolmatch-school-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin-top: 18px; }
.schoolmatch-school-card { display: grid; grid-template-columns: 38px 1fr auto; gap: 11px; align-items: center; min-width: 0; padding: 13px; border: 1px solid #e3e7ee; border-radius: 15px; background: #fbfcfd; transition: .18s ease; }
.schoolmatch-school-card:hover { transform: translateY(-2px); border-color: #becaf5; background: #fff; box-shadow: 0 10px 25px rgba(31,45,79,.08); }
.schoolmatch-school-card__mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: #e9edff; color: var(--sm-blue); font-size: 11px; font-weight: 900; }
.schoolmatch-school-card div { min-width: 0; }
.schoolmatch-school-card strong { display: block; overflow: hidden; color: #263247; font-size: 13px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.schoolmatch-school-card div span { display: block; overflow: hidden; margin-top: 4px; color: #8a95a6; font-size: 10px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.schoolmatch-school-card em { color: #0d8a7f; font-size: 9px; font-style: normal; font-weight: 900; white-space: nowrap; }
.schoolmatch-school-empty-search,
.schoolmatch-empty-box { margin-top: 18px; padding: 28px; border: 1px dashed #ccd4df; border-radius: 18px; background: #fafbfc; color: #768397; text-align: center; font-size: 13px; font-weight: 800; }
.schoolmatch-empty-box strong { display: block; color: var(--sm-text); font-size: 17px; }
.schoolmatch-empty-box p { margin: 8px 0 0; color: var(--sm-muted); font-size: 13px; }

.schoolmatch-flow-section { padding-bottom: 70px; }
.schoolmatch-section-head--center { text-align: center; }
.schoolmatch-section-head--center p { margin-left: auto; margin-right: auto; }
.schoolmatch-flow { display: grid; grid-template-columns: 1fr 34px 1fr 34px 1fr 34px 1fr; gap: 10px; align-items: center; margin-top: 30px; }
.schoolmatch-flow article { display: flex; gap: 14px; min-height: 116px; padding: 20px; border: 1px solid #e0e5ed; border-radius: 20px; background: #fff; box-shadow: 0 10px 28px rgba(31,45,79,.05); }
.schoolmatch-flow article.is-final { border-color: #bfcafa; background: #f4f6ff; }
.schoolmatch-flow article > span { flex: 0 0 auto; display: grid; place-items: center; width: 37px; height: 37px; border-radius: 11px; background: #edf0f6; color: #526176; font-size: 11px; font-weight: 900; }
.schoolmatch-flow article.is-final > span { background: var(--sm-blue); color: #fff; }
.schoolmatch-flow strong { display: block; font-size: 14px; }
.schoolmatch-flow p { margin: 8px 0 0; color: #758195; font-size: 11px; line-height: 1.55; font-weight: 700; }
.schoolmatch-flow i { color: #9aa5b5; font-size: 18px; font-style: normal; font-weight: 900; text-align: center; }
.schoolmatch-disclaimer { display: flex; gap: 22px; align-items: flex-start; margin-bottom: 70px; padding-top: 21px; padding-bottom: 21px; border-top: 1px solid #dce2ea; border-bottom: 1px solid #dce2ea; }
.schoolmatch-disclaimer strong { flex: 0 0 auto; color: #39475c; font-size: 12px; }
.schoolmatch-disclaimer p { margin: 0; color: #7a8698; font-size: 11px; line-height: 1.65; font-weight: 600; }

.schoolmatch-esp-modal[hidden] { display: none; }
.schoolmatch-esp-modal { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: 20px; }
.schoolmatch-esp-modal__backdrop { position: absolute; inset: 0; background: rgba(15,23,42,.62); backdrop-filter: blur(5px); }
.schoolmatch-esp-modal__dialog { position: relative; z-index: 1; width: min(560px,100%); max-height: calc(100vh - 40px); overflow-y: auto; padding: 32px; border-radius: 24px; background: #fff; box-shadow: 0 30px 90px rgba(15,23,42,.3); }
.schoolmatch-esp-modal__close { position: absolute; top: 16px; right: 16px; width: 38px; height: 38px; border: 0; border-radius: 50%; background: #f1f4f8; color: #475467; font-size: 22px; cursor: pointer; }
.schoolmatch-esp-modal__kicker { display: inline-flex; min-height: 29px; align-items: center; padding: 0 11px; border-radius: 999px; background: #eef2ff; color: var(--sm-blue); font-size: 12px; font-weight: 900; }
.schoolmatch-esp-modal__dialog h2 { margin: 18px 44px 0 0; font-size: 26px; line-height: 1.35; letter-spacing: -.035em; }
.schoolmatch-esp-modal__dialog p { margin: 14px 0 0; color: #667085; font-size: 14px; line-height: 1.75; }
.schoolmatch-esp-modal__recommend { margin-top: 20px; padding: 17px 18px; border: 1px solid #d9e2ff; border-radius: 15px; background: #f5f7ff; }
.schoolmatch-esp-modal__recommend strong { display: block; color: #253a86; font-size: 14px; }
.schoolmatch-esp-modal__recommend span { display: block; margin-top: 7px; color: #5f6f9d; font-size: 13px; line-height: 1.65; }
.schoolmatch-esp-modal__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 24px; }
.schoolmatch-esp-modal__btn { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; padding: 0 16px; border-radius: 13px; font-size: 14px; font-weight: 900; text-align: center; }
.schoolmatch-esp-modal__btn--primary { background: var(--sm-blue); color: #fff; }
.schoolmatch-esp-modal__btn--secondary { background: #e9edf4; color: #344054; }
body.schoolmatch-modal-open { overflow: hidden; }

@media (max-width: 1100px) {
    .schoolmatch-hero { grid-template-columns: 1fr; }
    .schoolmatch-dashboard { max-width: 760px; }
    .schoolmatch-analysis-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .schoolmatch-analysis-card--esp { grid-column: 1 / -1; min-height: 390px; }
    .schoolmatch-school-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .schoolmatch-flow { grid-template-columns: 1fr; }
    .schoolmatch-flow i { transform: rotate(90deg); }
}

@media (max-width: 768px) {
    .schoolmatch-hero { gap: 32px; padding: 42px 16px 44px; }
    .schoolmatch-hero h1 { font-size: 36px; }
    .schoolmatch-hero__copy > p { font-size: 14px; }
    .schoolmatch-hero__actions { flex-direction: column; }
    .schoolmatch-btn { width: 100%; }
    .schoolmatch-hero__meta { gap: 15px; }
    .schoolmatch-hero__meta span:not(:last-child)::after { display: none; }
    .schoolmatch-dashboard { padding: 20px; border-radius: 24px; }
    .schoolmatch-dashboard__head { align-items: flex-start; }
    .schoolmatch-analysis-section,
    .schoolmatch-school-section,
    .schoolmatch-flow-section,
    .schoolmatch-disclaimer { padding-left: 16px; padding-right: 16px; }
    .schoolmatch-analysis-section { padding-top: 40px; padding-bottom: 52px; }
    .schoolmatch-section-head--row { align-items: flex-start; flex-direction: column; }
    .schoolmatch-section-head h2 { font-size: 27px; }
    .schoolmatch-analysis-grid { grid-template-columns: 1fr; }
    .schoolmatch-analysis-card--esp { grid-column: auto; }
    .schoolmatch-analysis-card { min-height: auto; padding: 23px; border-radius: 23px; }
    .schoolmatch-action-row { flex-direction: column; }
    .schoolmatch-card-btn { width: 100%; }
    .schoolmatch-school-panel { padding: 23px 18px; border-radius: 24px; }
    .schoolmatch-school-toolbar { align-items: stretch; flex-direction: column; }
    .schoolmatch-school-search { width: 100%; }
    .schoolmatch-school-grid { grid-template-columns: 1fr 1fr; }
    .schoolmatch-disclaimer { flex-direction: column; gap: 8px; margin-bottom: 45px; }
    .schoolmatch-esp-modal { align-items: end; padding: 0; }
    .schoolmatch-esp-modal__dialog { width: 100%; max-height: 92vh; padding: 28px 20px 22px; border-radius: 24px 24px 0 0; }
    .schoolmatch-esp-modal__actions { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .schoolmatch-hero h1 { font-size: 31px; }
    .schoolmatch-dashboard__state { max-width: 100px; text-align: center; }
    .schoolmatch-progress-item { grid-template-columns: 40px 1fr; }
    .schoolmatch-progress-item__count { display: none; }
    .schoolmatch-school-grid { grid-template-columns: 1fr; }
    .schoolmatch-school-count { width: 100%; justify-content: center; }
}

/* =========================
   HERO / CONTENT SECTION SEPARATION v3
   히어로는 완결된 배너로 마감하고 콘텐츠는 독립 영역으로 시작
========================= */
.schoolmatch-page {
    background: #f5f7fb;
}

.schoolmatch-hero {
    position: relative;
    padding-bottom: 72px;
    background:
        radial-gradient(circle at 12% 0%, rgba(49, 87, 213, .12), transparent 30%),
        radial-gradient(circle at 88% 8%, rgba(22, 169, 154, .09), transparent 25%),
        linear-gradient(180deg, #f8faff 0%, #eef3fb 100%);
    border-bottom: 1px solid #dbe3ef;
}

.schoolmatch-hero::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 8px;
    background: linear-gradient(90deg, #3157d5 0%, #7088e8 48%, #16a99a 100%);
    opacity: .92;
}

.schoolmatch-analysis-section {
    position: relative;
    z-index: 1;
    margin-top: 0;
    padding-top: 64px;
    background: #fff;
    border-bottom: 1px solid #e4e9f0;
}

.schoolmatch-analysis-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 18px;
    background: linear-gradient(180deg, rgba(31, 45, 79, .08), rgba(31, 45, 79, 0));
    pointer-events: none;
}

.schoolmatch-analysis-section .schoolmatch-section-head {
    padding: 0;
}

.schoolmatch-school-section {
    background: #f5f7fb;
}

.schoolmatch-flow-section {
    background: #fff;
    border-top: 1px solid #e4e9f0;
}

@media (max-width: 768px) {
    .schoolmatch-hero {
        padding-bottom: 52px;
    }

    .schoolmatch-hero::before {
        height: 6px;
    }

    .schoolmatch-analysis-section {
        padding-top: 44px;
    }
}


/* =========================================================
   School Match Renewal v4
   Shared EduPath design system: navy / slate / white
========================================================= */
:root {
    --sm-navy: #14213a;
    --sm-navy-deep: #0f192b;
    --sm-blue: #315ba8;
    --sm-blue-dark: #284d91;
    --sm-bg: #f5f7fb;
    --sm-line: #dfe5ee;
    --sm-text: #14213a;
    --sm-muted: #687488;
    --sm-card: #ffffff;
    --sm-shadow: 0 20px 60px rgba(20, 33, 58, .08);
}

.schoolmatch-page {
    min-height: 100vh;
    overflow-x: hidden;
    background: #fff;
    color: var(--sm-text);
}

.schoolmatch-shell,
.schoolmatch-hero,
.schoolmatch-analysis-section,
.schoolmatch-school-section,
.schoolmatch-flow-section,
.schoolmatch-summary-strip,
.schoolmatch-disclaimer {
    width: min(1240px, calc(100% - 40px));
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
}

/* quiet local navigation */
.schoolmatch-subnav {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0;
    min-height: 46px;
    margin-top: 18px;
    border-bottom: 1px solid var(--sm-line);
}

.schoolmatch-subnav a {
    position: relative;
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    color: #7b8596;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.schoolmatch-subnav a:hover,
.schoolmatch-subnav a.active {
    color: var(--sm-text);
}

.schoolmatch-subnav a.active {
    font-weight: 900;
}

.schoolmatch-subnav a.active::after {
    content: "";
    position: absolute;
    right: 14px;
    bottom: -1px;
    left: 14px;
    height: 2px;
    border-radius: 999px;
    background: var(--sm-blue);
}

/* hero */
.schoolmatch-hero {
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
    gap: 42px;
    min-height: 560px;
    margin-top: 18px;
    margin-bottom: 0;
    padding: 58px;
    border: 1px solid #e4e9f1;
    border-radius: 30px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.98), rgba(244,247,252,.98)),
        #f5f7fb;
    box-shadow: var(--sm-shadow);
}

.schoolmatch-hero::before,
.schoolmatch-hero::after {
    display: none;
}

.schoolmatch-eyebrow,
.schoolmatch-section-label {
    min-height: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: var(--sm-blue);
    font-size: 10px;
    letter-spacing: .14em;
}

.schoolmatch-hero h1 {
    margin-top: 16px;
    font-size: clamp(40px, 5vw, 62px);
    line-height: 1.08;
    color: var(--sm-text);
}

.schoolmatch-hero h1 em {
    color: var(--sm-blue);
}

.schoolmatch-hero__copy > p {
    margin-top: 22px;
    color: var(--sm-muted);
    font-size: 16px;
    line-height: 1.82;
    font-weight: 500;
}

.schoolmatch-btn {
    min-height: 48px;
    border-radius: 14px;
}

.schoolmatch-btn--primary {
    background: var(--sm-blue);
    box-shadow: 0 12px 28px rgba(49,91,168,.22);
}

.schoolmatch-btn--ghost {
    border-color: var(--sm-line);
    background: #fff;
}

.schoolmatch-hero__meta {
    gap: 18px;
    margin-top: 26px;
    color: #8a94a4;
}

.schoolmatch-dashboard {
    padding: 26px;
    border: 1px solid var(--sm-line);
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 16px 46px rgba(20,33,58,.08);
    backdrop-filter: none;
}

.schoolmatch-dashboard__state,
.schoolmatch-dashboard__state.is-ready {
    background: #eef3fb;
    color: var(--sm-blue);
}

.schoolmatch-progress-item,
.schoolmatch-progress-item.is-complete {
    border-color: #e5e9f0;
    background: #f8fafc;
}

.schoolmatch-progress-item__icon,
.schoolmatch-progress-item.is-complete .schoolmatch-progress-item__icon {
    background: #eaf0fa;
    color: var(--sm-blue);
}

/* sections */
.schoolmatch-analysis-section {
    margin-top: 84px;
    padding-top: 0;
    padding-bottom: 0;
    background: transparent;
    border: 0;
}

.schoolmatch-analysis-section::before {
    display: none;
}

.schoolmatch-section-head h2 {
    margin-top: 12px;
    font-size: 34px;
    color: var(--sm-text);
}

.schoolmatch-section-head p {
    color: var(--sm-muted);
    font-weight: 500;
}

.schoolmatch-head-chip {
    border: 0;
    background: #eef3fb;
    color: var(--sm-blue);
    box-shadow: none;
}

.schoolmatch-analysis-grid {
    gap: 16px;
    margin-top: 28px;
}

.schoolmatch-analysis-card,
.schoolmatch-analysis-card--esp {
    min-height: 470px;
    padding: 26px;
    border: 1px solid var(--sm-line);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 14px 38px rgba(20,33,58,.055);
}

.schoolmatch-analysis-card--esp {
    background: var(--sm-navy-deep);
    color: #fff;
}

.schoolmatch-analysis-card__glow {
    display: none;
}

.schoolmatch-analysis-card__symbol,
.schoolmatch-analysis-card--sfi .schoolmatch-analysis-card__symbol {
    background: #edf2fa;
    color: var(--sm-blue);
}

.schoolmatch-analysis-card--esp .schoolmatch-analysis-card__symbol {
    background: #fff;
    color: var(--sm-navy-deep);
}

.schoolmatch-analysis-card__status,
.schoolmatch-analysis-card__status.is-complete {
    background: #f0f3f7;
    color: #667085;
}

.schoolmatch-analysis-card--esp .schoolmatch-analysis-card__status {
    background: rgba(255,255,255,.1);
    color: #d8e0ec;
}

.schoolmatch-analysis-card > p,
.schoolmatch-analysis-card li {
    color: var(--sm-muted);
}

.schoolmatch-analysis-card--esp > p,
.schoolmatch-analysis-card--esp li {
    color: #c3cedd;
}

.schoolmatch-analysis-card li::before,
.schoolmatch-analysis-card--sfi li::before,
.schoolmatch-analysis-card--esp li::before {
    border-color: var(--sm-blue);
}

.schoolmatch-analysis-card__price {
    border-color: #dbe4f3;
    background: #f4f7fc;
    color: var(--sm-blue);
}

.schoolmatch-analysis-card--esp .schoolmatch-analysis-card__price {
    border-color: rgba(255,255,255,.12);
    background: rgba(255,255,255,.08);
    color: #fff;
}

/* summary strip */
.schoolmatch-summary-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 1px;
    margin-top: 84px;
    overflow: hidden;
    border: 1px solid var(--sm-line);
    border-radius: 22px;
    background: var(--sm-line);
}

.schoolmatch-summary-strip > div {
    padding: 22px;
    background: #fff;
}

.schoolmatch-summary-strip span {
    display: block;
    color: #8a94a4;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .08em;
}

.schoolmatch-summary-strip strong {
    display: block;
    margin-top: 7px;
    color: var(--sm-text);
    font-size: 15px;
}

/* school database */
.schoolmatch-school-section {
    margin-top: 28px;
    padding-bottom: 0;
    background: transparent;
}

.schoolmatch-school-panel {
    padding: 34px;
    border: 1px solid var(--sm-line);
    border-radius: 28px;
    box-shadow: var(--sm-shadow);
}

.schoolmatch-school-count {
    background: var(--sm-navy-deep);
}

.schoolmatch-school-card {
    border-color: #e4e8ef;
    background: #fafbfc;
}

.schoolmatch-school-card__mark {
    background: #edf2fa;
    color: var(--sm-blue);
}

.schoolmatch-school-card em {
    color: var(--sm-blue);
}

/* process */
.schoolmatch-flow-section {
    margin-top: 84px;
    padding-bottom: 0;
    border: 0;
    background: transparent;
}

.schoolmatch-flow article,
.schoolmatch-flow article.is-final {
    border-color: var(--sm-line);
    background: #fff;
    box-shadow: 0 10px 28px rgba(20,33,58,.04);
}

.schoolmatch-flow article.is-final {
    background: var(--sm-navy-deep);
    color: #fff;
}

.schoolmatch-flow article.is-final p {
    color: #c5cfdd;
}

.schoolmatch-flow article.is-final > span {
    background: #fff;
    color: var(--sm-navy-deep);
}

.schoolmatch-disclaimer {
    margin-top: 54px;
    margin-bottom: 70px;
}

@media (max-width: 1100px) {
    .schoolmatch-hero {
        grid-template-columns: 1fr;
    }

    .schoolmatch-analysis-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }

    .schoolmatch-analysis-card--esp {
        grid-column: 1 / -1;
    }

    .schoolmatch-summary-strip {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .schoolmatch-shell,
    .schoolmatch-hero,
    .schoolmatch-analysis-section,
    .schoolmatch-school-section,
    .schoolmatch-flow-section,
    .schoolmatch-summary-strip,
    .schoolmatch-disclaimer {
        width: min(100% - 24px, 1240px);
    }

    .schoolmatch-subnav {
        justify-content: flex-start;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .schoolmatch-subnav::-webkit-scrollbar {
        display: none;
    }

    .schoolmatch-subnav a {
        flex: 0 0 auto;
        min-height: 42px;
        padding: 0 11px;
        font-size: 11px;
    }

    .schoolmatch-hero {
        min-height: 0;
        margin-top: 12px;
        padding: 28px 22px;
        border-radius: 22px;
    }

    .schoolmatch-hero h1 {
        font-size: 35px;
    }

    .schoolmatch-analysis-section,
    .schoolmatch-summary-strip,
    .schoolmatch-flow-section {
        margin-top: 58px;
    }

    .schoolmatch-analysis-grid {
        grid-template-columns: 1fr;
    }

    .schoolmatch-analysis-card--esp {
        grid-column: auto;
    }

    .schoolmatch-analysis-card {
        min-height: 0;
    }

    .schoolmatch-school-panel {
        padding: 24px 18px;
        border-radius: 22px;
    }
}
.schoolmatch-school-regions {
    display: grid;
    gap: 30px;
}

.schoolmatch-school-region {
    min-width: 0;
}

.schoolmatch-school-region__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(15, 23, 42, .1);
}

.schoolmatch-school-region__head h3 {
    margin: 0;
    color: #172033;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.02em;
}

.schoolmatch-school-region__head span {
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
}

@media (max-width: 640px) {
    .schoolmatch-school-regions {
        gap: 24px;
    }

    .schoolmatch-school-region__head h3 {
        font-size: 18px;
    }
}

.schoolmatch-region-change-meta {
    margin-top: 18px;
    margin-bottom: 0;
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
}

.schoolmatch-region-change-meta strong {
    color: #334155;
}

.schoolmatch-card-btn[disabled] {
    cursor: not-allowed;
    opacity: .55;
}

.schoolmatch-region-modal[hidden] {
    display: none;
}

.schoolmatch-region-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: center;
    padding: 20px;
}

.schoolmatch-region-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .58);
    backdrop-filter: blur(3px);
}

.schoolmatch-region-modal__dialog {
    position: relative;
    width: min(100%, 500px);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding: 30px;
    border: 1px solid rgba(148, 163, 184, .28);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .24);
}

.schoolmatch-region-modal__close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: #f1f5f9;
    color: #475569;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.schoolmatch-region-modal__kicker {
    display: block;
    margin-bottom: 8px;
    color: #315ee8;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
}

.schoolmatch-region-modal__dialog h2 {
    margin: 0;
    color: #172033;
    font-size: 26px;
    letter-spacing: -.03em;
}

.schoolmatch-region-modal__description {
    margin: 12px 0 20px;
    color: #64748b;
    font-size: 15px;
    line-height: 1.7;
}

.schoolmatch-region-modal__current {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    padding: 14px 16px;
    border-radius: 14px;
    background: #f8fafc;
    color: #64748b;
    font-size: 14px;
}

.schoolmatch-region-modal__current strong {
    color: #172033;
}

.schoolmatch-region-modal__options {
    display: grid;
    gap: 10px;
}

.schoolmatch-region-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 16px;
    border: 1px solid #dbe3ef;
    border-radius: 14px;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.schoolmatch-region-option:hover {
    border-color: #9db3f4;
    background: #f8faff;
}

.schoolmatch-region-option:has(input:checked) {
    border-color: #315ee8;
    background: #f3f6ff;
    box-shadow: 0 0 0 3px rgba(49, 94, 232, .1);
}

.schoolmatch-region-option input {
    width: 18px;
    height: 18px;
    accent-color: #315ee8;
}

.schoolmatch-region-option span {
    color: #172033;
    font-weight: 800;
}

.schoolmatch-region-option em {
    margin-left: auto;
    color: #64748b;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
}

.schoolmatch-region-modal__notice {
    margin: 18px 0 0;
    padding: 14px 16px;
    border-radius: 14px;
    background: #f8fafc;
    color: #475569;
    font-size: 13px;
    line-height: 1.65;
}

.schoolmatch-region-modal__notice strong {
    display: block;
    margin-bottom: 3px;
    color: #172033;
}

.schoolmatch-region-modal__message {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #fff1f2;
    color: #be123c;
    font-size: 13px;
    font-weight: 700;
}

.schoolmatch-region-modal__actions {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 10px;
    margin-top: 20px;
}

.schoolmatch-region-modal__btn {
    min-height: 48px;
    border: 0;
    border-radius: 13px;
    font: inherit;
    font-weight: 900;
    cursor: pointer;
}

.schoolmatch-region-modal__btn--cancel {
    background: #f1f5f9;
    color: #475569;
}

.schoolmatch-region-modal__btn--submit {
    background: #315ee8;
    color: #fff;
}

.schoolmatch-region-modal__btn:disabled {
    cursor: wait;
    opacity: .65;
}

body.schoolmatch-modal-open {
    overflow: hidden;
}

.schoolmatch-analysis-card__price {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin: 0 0 14px;
    padding: 7px 11px;
    border: 1px solid rgba(49, 94, 232, .18);
    border-radius: 999px;
    background: #f5f7ff;
    color: #2949b8;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: -.01em;
}

.schoolmatch-analysis-card__price.is-owned {
    border-color: rgba(15, 118, 110, .2);
    background: #f0fdfa;
    color: #0f766e;
}

.schoolmatch-analysis-card__purchase-note {
    margin: -2px 0 16px;
    padding: 10px 12px;
    border: 1px solid rgba(148, 163, 184, .2);
    border-radius: 12px;
    background: rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .72);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.55;
}

.schoolmatch-analysis-card__purchase-note strong {
    color: #fff;
    font-weight: 900;
}

@media (max-width: 640px) {
    .schoolmatch-region-modal {
        align-items: end;
        padding: 0;
    }

    .schoolmatch-region-modal__dialog {
        width: 100%;
        max-height: 88vh;
        padding: 26px 20px 22px;
        border-radius: 24px 24px 0 0;
    }
}
/* ESP 카드 CTA 버튼 */
.schoolmatch-analysis-card--esp .schoolmatch-card-btn--dark {
    border: 1px solid rgba(255, 255, 255, .9);
    background: #fff;
    color: var(--sm-navy-deep);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
}

.schoolmatch-analysis-card--esp .schoolmatch-card-btn--dark:hover {
    background: #eef3fb;
    color: var(--sm-navy-deep);
}
.schoolmatch-analysis-card--esp .schoolmatch-analysis-card__en {
    color: rgba(255, 255, 255, .55);
}

.schoolmatch-analysis-card--esp h3 {
    color: #fff;
}


/* =========================================================
   Analysis cards CTA alignment
   ALP · SFI · ESP 하단 버튼 기준선 통일
========================================================= */
.schoolmatch-analysis-grid {
    align-items: stretch;
}

.schoolmatch-analysis-grid .schoolmatch-analysis-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.schoolmatch-analysis-grid .schoolmatch-action-row {
    margin-top: auto;
    padding-top: 24px;
}

/*
 * SFI 카드의 보조 링크/안내는 버튼 위 콘텐츠로 취급합니다.
 * 버튼 아래에 별도 요소가 생겨 액션 기준선이 밀리지 않도록 합니다.
 */
.schoolmatch-analysis-card--sfi .schoolmatch-inline-link,
.schoolmatch-analysis-card--sfi .schoolmatch-sub-notice {
    margin-top: 14px;
    margin-bottom: 0;
}

/* ESP 카드도 다른 카드와 동일한 하단 액션 기준을 사용 */
.schoolmatch-analysis-card--esp .schoolmatch-action-row {
    margin-top: auto;
}

/* 데스크톱에서 버튼 높이도 동일하게 유지 */
@media (min-width: 769px) {
    .schoolmatch-analysis-grid .schoolmatch-card-btn {
        min-height: 44px;
    }
}

/* =========================================================
   Analysis card interior refinement v5
   제목·가격·설명·핵심 항목·CTA의 시각적 위계 강화
========================================================= */
.schoolmatch-analysis-card {
    isolation: isolate;
    min-height: 496px;
    padding: 28px;
    border-radius: 25px;
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.schoolmatch-analysis-card::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    left: 28px;
    right: 28px;
    height: 4px;
    border-radius: 0 0 5px 5px;
    background: linear-gradient(90deg, #315ba8, #6d8ed0);
}

.schoolmatch-analysis-card--sfi::before {
    background: linear-gradient(90deg, #168c82, #53b8ae);
}

.schoolmatch-analysis-card--esp::before {
    background: linear-gradient(90deg, #6e91df, #9cb6f0);
}

@media (hover: hover) {
    .schoolmatch-analysis-card:hover {
        transform: translateY(-5px);
        border-color: #cbd6e8;
        box-shadow: 0 22px 52px rgba(20, 33, 58, .11);
    }

    .schoolmatch-analysis-card--esp:hover {
        border-color: #34445e;
        box-shadow: 0 24px 54px rgba(10, 19, 34, .24);
    }
}

.schoolmatch-analysis-card__top {
    padding-top: 2px;
}

.schoolmatch-analysis-card__symbol {
    min-width: 52px;
    height: 52px;
    border-radius: 15px;
    box-shadow: inset 0 0 0 1px rgba(49, 91, 168, .05);
}

.schoolmatch-analysis-card__status {
    position: relative;
    padding: 7px 11px 7px 22px;
    border: 1px solid #e7ebf1;
    background: #f7f9fc;
}

.schoolmatch-analysis-card__status::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #a4adba;
    transform: translateY(-50%);
}

.schoolmatch-analysis-card__status.is-complete::before {
    background: #16a085;
    box-shadow: 0 0 0 3px rgba(22, 160, 133, .12);
}

.schoolmatch-analysis-card--esp .schoolmatch-analysis-card__status {
    border-color: rgba(255, 255, 255, .08);
}

.schoolmatch-analysis-card--esp .schoolmatch-analysis-card__status::before {
    background: #8fa8d5;
}

.schoolmatch-analysis-card__en {
    margin-top: 21px;
    font-size: 9px;
    letter-spacing: .13em;
}

.schoolmatch-analysis-card h3 {
    margin-top: 6px;
    font-size: 25px;
    line-height: 1.2;
}

.schoolmatch-analysis-card__price {
    margin-top: 7px;
    margin-bottom: 0;
    padding: 6px 10px;
    font-size: 11px;
}

.schoolmatch-analysis-card > p {
    margin-top: 20px;
    padding-top: 17px;
    border-top: 1px solid #e8edf4;
    font-size: 12px;
    line-height: 1.75;
}

.schoolmatch-analysis-card--esp > p {
    border-top-color: rgba(255, 255, 255, .12);
}

.schoolmatch-analysis-card ul {
    gap: 0;
    margin-top: 14px;
    overflow: hidden;
    border: 1px solid #e8edf4;
    border-radius: 14px;
    background: #f8fafc;
}

.schoolmatch-analysis-card li {
    min-height: 38px;
    padding: 10px 12px 10px 35px;
    font-size: 11px;
    line-height: 1.55;
}

.schoolmatch-analysis-card li + li {
    border-top: 1px solid #e8edf4;
}

.schoolmatch-analysis-card li::before {
    content: "\2713";
    display: grid;
    place-items: center;
    left: 12px;
    top: 50%;
    width: 14px;
    height: 14px;
    border: 0;
    border-radius: 50%;
    background: #e7eefb;
    color: #315ba8;
    font-size: 9px;
    font-weight: 950;
    transform: translateY(-50%);
}

.schoolmatch-analysis-card--sfi li::before {
    border: 0;
    background: #e4f5f2;
    color: #168c82;
}

.schoolmatch-analysis-card--esp ul {
    border-color: rgba(255, 255, 255, .11);
    background: rgba(255, 255, 255, .045);
}

.schoolmatch-analysis-card--esp li + li {
    border-top-color: rgba(255, 255, 255, .09);
}

.schoolmatch-analysis-card--esp li::before {
    border: 0;
    background: rgba(126, 160, 224, .17);
    color: #9ebbf1;
}

.schoolmatch-analysis-card__purchase-note {
    margin: 16px 0 0;
    padding: 12px 13px 12px 42px;
    border-color: rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .055);
    position: relative;
}

.schoolmatch-analysis-card__purchase-note::before {
    content: "i";
    position: absolute;
    left: 13px;
    top: 13px;
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    font-family: Georgia, serif;
}

.schoolmatch-analysis-card__purchase-note strong {
    display: inline-block;
    margin-bottom: 3px;
    font-size: 11px;
}

.schoolmatch-analysis-grid .schoolmatch-action-row {
    width: 100%;
    padding-top: 20px;
}

.schoolmatch-analysis-grid .schoolmatch-card-btn {
    flex: 1 1 0;
    min-height: 46px;
    padding: 0 16px;
    border-radius: 12px;
    box-shadow: 0 9px 20px rgba(49, 91, 168, .18);
}

.schoolmatch-analysis-grid .schoolmatch-card-btn--light {
    box-shadow: none;
}

.schoolmatch-analysis-card--esp .schoolmatch-card-btn--dark {
    width: 100%;
    min-height: 48px;
}

@media (max-width: 768px) {
    .schoolmatch-analysis-card {
        min-height: auto;
        padding: 24px 22px;
    }

    .schoolmatch-analysis-card::before {
        left: 22px;
        right: 22px;
    }

    .schoolmatch-analysis-card ul {
        margin-top: 13px;
    }
}


/* =========================================================
   SFI auxiliary result link
   메인 CTA와 경쟁하지 않는 보조 결과 표시
========================================================= */
.schoolmatch-sfi-alt-result {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 16px;
    padding: 10px 12px;
    border: 1px solid #e5e9f0;
    border-radius: 12px;
    background: #f8fafc;
}

.schoolmatch-sfi-alt-result > span {
    flex: 0 0 auto;
    color: #98a2b3;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .04em;
}

.schoolmatch-sfi-alt-result a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #53627a;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.4;
}

.schoolmatch-sfi-alt-result a:hover {
    color: var(--sm-blue);
}

.schoolmatch-sfi-alt-result a span {
    font-size: 12px;
    transition: transform .18s ease;
}

.schoolmatch-sfi-alt-result a:hover span {
    transform: translateX(2px);
}

@media (max-width: 768px) {
    .schoolmatch-sfi-alt-result {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }
}


/* =========================================================
   v4.1 — High School Fit Analyzer wording / school DB refinement
========================================================= */
.schoolmatch-hero__copy > p strong {
    color: var(--sm-text);
    font-weight: 900;
}

.schoolmatch-school-panel {
    overflow: hidden;
    background:
        linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
}

.schoolmatch-school-panel .schoolmatch-section-head--row {
    padding-bottom: 4px;
}

.schoolmatch-school-toolbar {
    margin-top: 24px;
    padding: 16px;
    border: 1px solid #e6eaf1;
    border-radius: 17px;
    background: #f8fafc;
}

.schoolmatch-school-search {
    background: #fff;
}

.schoolmatch-school-toolbar > span {
    padding: 7px 10px;
    border-radius: 999px;
    background: #eef3fb;
    color: var(--sm-blue);
}

.schoolmatch-school-regions {
    margin-top: 26px;
    gap: 34px;
}

.schoolmatch-school-region {
    padding: 0;
}

.schoolmatch-school-region__head {
    margin-bottom: 12px;
    padding: 0 2px 11px;
    border-bottom-color: #dfe5ee;
}

.schoolmatch-school-region__head h3 {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 18px;
}

.schoolmatch-school-region__head h3::before {
    content: "";
    width: 5px;
    height: 18px;
    border-radius: 999px;
    background: var(--sm-blue);
}

.schoolmatch-school-region__head span {
    padding: 5px 9px;
    border-radius: 999px;
    background: #f0f3f8;
    color: #697588;
    font-size: 11px;
}

.schoolmatch-school-grid {
    gap: 9px;
    margin-top: 0;
}

.schoolmatch-school-card {
    min-height: 68px;
    padding: 12px 13px;
    border-color: #e3e8ef;
    background: #fff;
    box-shadow: 0 3px 12px rgba(20,33,58,.025);
}

.schoolmatch-school-card__mark {
    background: #eef3fb;
    color: var(--sm-blue);
}

.schoolmatch-school-card em {
    padding: 5px 7px;
    border-radius: 999px;
    background: #edf8f6;
    color: #0d7c72;
}

@media (max-width: 768px) {
    .schoolmatch-school-toolbar {
        padding: 12px;
    }

    .schoolmatch-school-regions {
        margin-top: 22px;
        gap: 28px;
    }
}