@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Playfair+Display:wght@500;600&display=swap');
:root { color-scheme:light; --paper:#faf9f6; --ink:#292b28; --muted:#777a78; --green:#667f6b; --line:#e5e4df; --surface:#fcfbf9; }
* { box-sizing:border-box; }
body { min-width:320px; min-height:100vh; margin:0; background:var(--paper); color:var(--ink); font-family:'Manrope','Segoe UI',sans-serif; }
a { color:inherit; }
.compare-shell { width:min(1120px,calc(100% - 48px)); min-height:100vh; margin:0 auto; }
.compare-nav { min-height:76px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.compare-brand { display:inline-flex; align-items:baseline; font-family:'Manrope','Segoe UI',sans-serif; font-size:21px; font-weight:600; letter-spacing:-.04em; text-decoration:none; }
.compare-brand span { color:var(--green); font-family:'Playfair Display',Georgia,serif; font-size:36px; font-weight:500; line-height:1; }
.compare-nav nav { display:flex; align-items:center; gap:14px; }
.compare-back { color:#626661; font-size:13px; text-decoration:none; white-space:nowrap; }
.compare-back:hover { color:var(--green); }
.account-entry { display:inline-flex; min-height:40px; align-items:center; justify-content:center; gap:8px; padding:0 13px; border:1px solid #d5dfd2; border-radius:6px; background:#f1f5ef; color:#4d6b50; font-size:13px; font-weight:700; text-decoration:none; white-space:nowrap; }
.account-entry svg { width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.account-entry:hover { border-color:#b9cbb7; background:#e8efe5; }
.compare-intro { max-width:760px; padding:58px 0 29px; }
.compare-eyebrow,.panel-kicker { display:flex; align-items:center; gap:9px; margin:0 0 13px; color:var(--green); font-size:11px; font-weight:700; letter-spacing:.13em; }
.compare-eyebrow span { width:18px; height:1px; background:var(--green); }
.compare-intro h1 { margin:0; font:500 clamp(36px,5vw,54px)/1.12 'Manrope','Segoe UI',sans-serif; letter-spacing:-.04em; }
.compare-intro > p:last-child { max-width:680px; margin:15px 0 0; color:var(--muted); font-size:15px; line-height:1.65; }
.compare-panel { padding:25px 26px; border:1px solid var(--line); border-radius:8px; background:var(--surface); }
.panel-heading { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.panel-kicker { margin-bottom:6px; font-size:10px; }
.panel-heading h2,.year-heading h2 { margin:0; font:500 25px/1.2 'Manrope','Segoe UI',sans-serif; letter-spacing:-.025em; }
.data-status { padding:7px 10px; border:1px solid #dce5dc; border-radius:20px; background:#f4f7f3; color:#5c765f; font-size:11px; white-space:nowrap; }
.compare-controls { display:grid; grid-template-columns:minmax(170px,.7fr) minmax(280px,1.3fr) auto; align-items:stretch; gap:13px; margin-top:22px; }
.compare-field { display:grid; align-content:start; gap:7px; color:#50534f; font-size:12px; font-weight:700; }
.compare-field label { display:block; line-height:1.4; }
.required-mark { color:#a33732; }
.compare-field select,.department-combobox input { width:100%; height:45px; padding:0 12px; border:1px solid #deded8; border-radius:5px; outline:0; background:#fff; color:#343832; font:13px 'Manrope','Segoe UI',sans-serif; }
.department-combobox input { padding-right:42px; text-overflow:ellipsis; }
.department-combobox input[readonly] { border-color:#d5dfd2; background:#f1f5ef; color:#4d6b50; font-weight:600; cursor:default; }
.compare-field select:focus,.department-combobox input:focus { border-color:#8b9b8d; box-shadow:0 0 0 3px #667f6b1c; }
.department-filter { min-width:0; }
.department-filter > label { display:block; margin-bottom:7px; color:#50534f; font-size:12px; font-weight:700; }
.department-filter > label span { color:#a33732; }
.department-combobox { position:relative; }
.department-combobox input { padding-right:40px; }
.department-combobox input::placeholder { color:#989a94; }
.department-suggestions { position:absolute; z-index:5; top:calc(100% + 5px); right:0; left:0; max-height:250px; overflow:auto; padding:5px; border:1px solid var(--line); border-radius:5px; background:#fff; box-shadow:0 10px 25px #292b281a; }
.department-suggestions[hidden] { display:none; }
.department-suggestion { display:block; width:100%; padding:9px 10px; border:0; border-radius:3px; background:transparent; color:#454943; font:11px 'Manrope','Segoe UI',sans-serif; text-align:left; cursor:pointer; }
.department-suggestion:hover,.department-suggestion:focus-visible { outline:0; background:#f0f3ee; color:#536b58; }
.department-empty { margin:0; padding:10px; color:var(--muted); font-size:11px; }
.department-clear { position:absolute; z-index:2; top:50%; right:9px; display:grid; width:27px; height:27px; transform:translateY(-50%); place-items:center; border:0; border-radius:4px; background:transparent; color:#4d6b50; font:600 19px/1 'Manrope','Segoe UI',sans-serif; cursor:pointer; }
.department-clear:hover { background:#eef3eb; }
.department-clear:focus-visible { outline:2px solid #91a092; outline-offset:1px; }
.department-clear[hidden] { display:none; }
.compare-button { min-height:45px; align-self:end; padding:0 15px; border:1px solid var(--green); border-radius:5px; background:var(--green); color:white; font:700 12px 'Manrope','Segoe UI',sans-serif; white-space:nowrap; cursor:pointer; }
.compare-button:hover:not(:disabled) { background:#536b58; }
.compare-button:disabled { opacity:.5; cursor:not-allowed; }
.compare-message { margin:15px 0 0; padding:11px 13px; border-radius:5px; background:#f8efec; color:#875446; font-size:13px; line-height:1.5; }
.compare-message[hidden],.analysis-results[hidden],.loading-state[hidden] { display:none; }
.analysis-results { margin-top:35px; }
.analysis-heading { display:flex; align-items:end; justify-content:space-between; gap:18px; margin-bottom:18px; }
.analysis-heading h2 { margin:0; font:500 28px/1.2 'Manrope','Segoe UI',sans-serif; }
.result-search { width:min(290px,100%); height:40px; padding:0 11px; border:1px solid var(--line); border-radius:5px; background:#fff; font:12px 'Manrope','Segoe UI',sans-serif; }
.overall-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:23px; }
.summary-card { display:flex; min-height:84px; align-items:center; gap:12px; padding:14px; border:1px solid var(--line); border-radius:6px; background:var(--surface); }
.summary-icon { display:grid; width:37px; height:37px; flex:none; place-items:center; border-radius:6px; background:#f0f3ee; color:var(--green); font-size:20px; }
.summary-copy { display:grid; gap:3px; }
.summary-copy span { color:var(--muted); font-size:11px; }
.summary-copy strong { font-size:20px; }
.summary-copy small { color:#969891; font-size:10px; }
.year-list { display:grid; gap:15px; }
.year-section { overflow:hidden; border:1px solid var(--line); border-radius:7px; background:var(--surface); }
.year-heading { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:17px 19px; border-bottom:1px solid var(--line); }
.year-heading-main { display:flex; align-items:center; gap:12px; }
.year-heading h2 { font-size:24px; }
.year-subtitle { margin:4px 0 0; color:var(--muted); font-size:11px; }
.year-scores { display:flex; gap:9px; }
.year-score { min-width:115px; padding:9px 11px; border:1px solid #e5e7df; border-radius:5px; background:#f6f7f3; }
.year-score span { display:block; margin-bottom:4px; color:var(--muted); font-size:9px; }
.year-score strong { font-size:13px; }
.year-table-wrap { overflow-x:auto; }
.year-table-wrap.is-scrollable { position:relative; overflow:auto; }
.year-table-wrap.is-scrollable:not(.is-scrolled)::after { position:sticky; z-index:3; bottom:0; display:block; height:26px; margin-top:-26px; background:linear-gradient(to bottom,rgba(252,251,249,0),rgba(252,251,249,.96)); content:""; pointer-events:none; }
.year-table { width:100%; border-collapse:collapse; font-size:11px; }
.year-table th,.year-table td { padding:11px 12px; border-bottom:1px solid #eeede8; text-align:left; vertical-align:middle; }
.year-table th { position:sticky; top:0; z-index:1; background:#f6f5f1; color:#72776e; font-size:9px; font-weight:700; letter-spacing:.04em; white-space:nowrap; }
.year-table td { color:#4a4d48; }
.year-table tbody tr:nth-child(odd) { background:#fff; }
.year-table tbody tr:nth-child(even) { background:#f5f6f2; }
.year-table tbody tr:hover { background:#edf1eb; }
.year-table tr:last-child td { border-bottom:0; }
.year-table .position-name { min-width:175px; font-weight:650; }
.year-table .institution-cell { min-width:175px; }
.score-value { white-space:nowrap; font-variant-numeric:tabular-nums; }
.detail-button { min-height:31px; padding:0 9px; border:1px solid #d5dfd2; border-radius:4px; background:#f1f5ef; color:#4d6b50; font:600 10px 'Manrope','Segoe UI',sans-serif; white-space:nowrap; cursor:pointer; }
.detail-button:hover { background:#e8efe5; }
.empty-state { padding:24px 14px; color:var(--muted); font-size:13px; text-align:center; }
.analysis-note { margin:13px 0 0; color:#858983; font-size:10px; line-height:1.6; }
.loading-state { display:flex; align-items:center; gap:10px; padding:22px 2px; color:var(--muted); font-size:12px; }
.loading-state span { width:15px; height:15px; border:2px solid #d9e1d8; border-top-color:var(--green); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.compare-footer { display:flex; justify-content:space-between; margin-top:45px; padding:16px 0 18px; border-top:1px solid var(--line); color:#858983; font-size:10px; }
.compare-footer a { color:var(--ink); font:600 13px 'Manrope','Segoe UI',sans-serif; text-decoration:none; }
.detail-dialog { width:min(850px,calc(100vw - 30px)); max-height:min(82vh,850px); padding:0; overflow:hidden; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--ink); box-shadow:0 24px 80px #292b2830; }
.detail-dialog::backdrop { background:#20241f66; backdrop-filter:blur(2px); }
.detail-dialog-header { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding:20px 22px; border-bottom:1px solid var(--line); }
.detail-dialog-header p { margin:0 0 6px; color:var(--green); font-size:10px; font-weight:700; letter-spacing:.12em; }
.detail-dialog-header h2 { margin:0; font:500 22px/1.3 'Manrope','Segoe UI',sans-serif; }
.detail-close { width:34px; height:34px; flex:none; border:1px solid var(--line); border-radius:50%; background:#fff; color:#626661; font-size:21px; cursor:pointer; }
.detail-table-wrap { max-height:calc(82vh - 85px); overflow:auto; padding:0 22px 18px; }
.detail-table { width:100%; border-collapse:collapse; font-size:12px; }
.detail-table th,.detail-table td { padding:10px 12px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; line-height:1.5; }
.detail-table th { width:185px; color:#50534f; }
.detail-table td { color:#626661; overflow-wrap:anywhere; }
.detail-code-list { display:grid; gap:8px; margin:0; padding-left:18px; }
@media(max-width:850px) { .compare-controls { grid-template-columns:minmax(140px,.7fr) minmax(220px,1.3fr); } .compare-button { grid-column:1/-1; } }
@media(max-width:620px) { .compare-shell { width:calc(100% - 32px); } .compare-nav { min-height:68px; } .compare-nav nav { gap:7px; } .compare-back { font-size:11px; } .account-entry { min-height:36px; gap:5px; padding:0 8px; font-size:11px; } .compare-intro { padding:43px 0 23px; } .compare-intro h1 { font-size:37px; } .compare-intro > p:last-child { font-size:13px; } .compare-panel { padding:18px 15px; } .panel-heading h2 { font-size:22px; } .compare-controls { grid-template-columns:1fr; gap:12px; margin-top:19px; } .compare-button { grid-column:auto; width:100%; } .analysis-heading { align-items:stretch; flex-direction:column; gap:12px; } .analysis-heading h2 { font-size:25px; } .result-search { width:100%; } .overall-summary { gap:7px; } .summary-card { min-height:78px; align-items:flex-start; flex-direction:column; gap:6px; padding:9px; } .summary-icon { width:28px; height:28px; font-size:16px; } .summary-copy span { font-size:9px; } .summary-copy strong { font-size:16px; } .summary-copy small { font-size:9px; } .year-heading { align-items:flex-start; flex-direction:column; gap:11px; padding:14px; } .year-heading h2 { font-size:21px; } .year-scores { width:100%; } .year-score { min-width:0; flex:1; } .year-table { min-width:760px; } .detail-dialog-header { padding:16px; } .detail-table-wrap { padding:0 12px 12px; } .detail-table th { width:120px; } }

/* Comparison page visual language aligned with the refreshed KPSS calculator. */
body:has(.compare-shell) {
  background: #f7f9f7;
  color: #173847;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.compare-shell {
  width: 100%;
  min-height: 100vh;
  padding: 0 20px;
}
.compare-nav {
  position: relative;
  width: 100vw;
  min-height: 83px;
  margin-left: calc(50% - 50vw);
  padding: 0 max(calc((100vw - 1200px) / 2), 20px);
  border-bottom: 1px solid #dfe7e4;
  background: #fff;
  color: #173847;
}
.compare-brand { color: #173847; font-family: 'Manrope', 'Segoe UI', sans-serif; font-weight: 600; }
.compare-brand span { color: #f3b63f; }
.compare-back { color: #173847; font-size: 14px; }
.compare-back:hover { color: #19647a; }
.compare-nav .account-entry {
  min-height: 44px;
  padding: 0 17px;
  border: 1px solid #dfe7e4;
  border-radius: 10px;
  background: #fff;
  color: #173847;
}
.compare-nav .account-entry:hover { border-color: #9eb6ba; background: #f4f8f7; color: #19647a; }
.compare-intro, .compare-panel, .analysis-results, .compare-footer {
  width: min(1200px, 100%);
  margin-right: auto;
  margin-left: auto;
}
.compare-intro { max-width: 1200px; padding: 63px 0 42px; }
.compare-eyebrow, .panel-kicker { color: #19647a; }
.compare-eyebrow { gap: 11px; font-size: 11px; letter-spacing: .14em; }
.compare-eyebrow span { width: 9px; height: 9px; border-radius: 50%; background: #f3b63f; }
.compare-intro h1 {
  margin: 25px 0 15px;
  color: #173847;
  font-size: clamp(38px, 4.2vw, 51px);
  font-weight: 750;
  letter-spacing: -2.4px;
  line-height: 1.12;
}
.compare-intro > p:last-child { max-width: 760px; margin-top: 0; color: #5d7480; font-size: 17px; line-height: 1.65; }
.compare-panel {
  padding: 29px 27px 27px;
  border: 1px solid #dfe7e4;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 14px 42px #193d4509;
}
.panel-heading { align-items: flex-start; }
.panel-heading h2, .year-heading h2 { color: #173847; font-weight: 750; }
.panel-heading h2 { margin-top: 13px; font-size: 30px; letter-spacing: -.04em; }
.data-status { padding: 9px 13px; border-color: #dfe7e4; border-radius: 20px; background: #f4f8f7; color: #19647a; font-size: 12px; }
.compare-controls { grid-template-columns: minmax(210px,.72fr) minmax(360px,1.25fr) auto; gap: 16px; margin-top: 26px; }
.compare-field, .department-filter > label { color: #173847; font-size: 13px; }
.compare-field select, .department-combobox input {
  height: 57px;
  padding: 0 16px;
  border: 1px solid #dfe7e4;
  border-radius: 10px;
  color: #173847;
  font: 15px Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.department-combobox input::placeholder { color: #83939a; }
.department-combobox input[readonly] { border-color: #dfe7e4; border-radius: 10px; background: #f4f8f7; color: #173847; }
.compare-field select:focus, .department-combobox input:focus { border-color: #19647a; box-shadow: 0 0 0 3px #19647a1b; }
.department-filter > label { margin-bottom: 9px; }
.compare-button {
  min-height: 57px;
  padding: 0 19px;
  border: 1px solid #173847;
  border-radius: 10px;
  background: #173847;
  font: 700 14px Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.compare-button:hover:not(:disabled) { border-color: #255363; background: #255363; }
.department-suggestions { border-color: #dfe7e4; border-radius: 10px; box-shadow: 0 14px 34px #193d4518; }
.department-suggestion { border-radius: 6px; color: #173847; font: 13px Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.department-suggestion:hover, .department-suggestion:focus-visible { background: #f4f8f7; color: #19647a; }
.department-clear { color: #19647a; }
.compare-message { border-radius: 10px; font-size: 13px; }
.analysis-results { margin-top: 48px; scroll-margin-top: 20px; }
.analysis-heading { align-items: center; margin-bottom: 21px; }
.analysis-heading .panel-kicker { margin-bottom: 8px; }
.analysis-heading h2 { color: #173847; font-size: 31px; font-weight: 750; letter-spacing: -.04em; }
.result-search { height: 45px; padding: 0 14px; border-color: #dfe7e4; border-radius: 10px; color: #173847; font: 13px Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.result-search:focus { border-color: #19647a; box-shadow: 0 0 0 3px #19647a1b; }
.overall-summary { gap: 16px; margin-bottom: 23px; }
.summary-card { min-height: 98px; gap: 14px; padding: 18px; border-color: #dfe7e4; border-radius: 14px; background: #fff; box-shadow: 0 14px 42px #193d4509; }
.summary-icon { width: 44px; height: 44px; border-radius: 11px; background: #eaf2f4; color: #19647a; font-size: 22px; }
.summary-copy span { color: #5d7480; font-size: 12px; }
.summary-copy strong { color: #173847; font-size: 23px; letter-spacing: -.03em; }
.summary-copy small { color: #83939a; font-size: 10px; }
.year-list { gap: 17px; }
.year-section { border-color: #dfe7e4; border-radius: 16px; background: #fff; box-shadow: 0 14px 42px #193d4509; }
.year-heading { min-height: 84px; padding: 18px 21px; border-bottom-color: #dfe7e4; background: #fff; }
.year-heading-main { gap: 0; }
.year-heading h2 { font-size: 24px; letter-spacing: -.035em; }
.year-subtitle { color: #5d7480; font-size: 12px; }
.year-scores { gap: 10px; }
.year-score { min-width: 125px; padding: 10px 12px; border-color: #dfe7e4; border-radius: 9px; background: #f4f8f7; }
.year-score span { color: #83939a; font-size: 10px; }
.year-score strong { color: #173847; font-size: 14px; }
.year-table-wrap.is-scrollable:not(.is-scrolled)::after { background: linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,.96)); }
.year-table { font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 12px; }
.year-table th, .year-table td { padding: 14px 13px; border-bottom-color: #dfe7e4; }
.year-table th { background: #eaf2f4; color: #19647a; font-size: 10px; letter-spacing: .07em; }
.year-table td { color: #435d69; }
.year-table tbody tr:nth-child(odd) { background: #fff; }
.year-table tbody tr:nth-child(even) { background: #f4f8f7; }
.year-table tbody tr:hover { background: #eaf2f4; }
.year-table .position-name { color: #173847; }
.detail-button { min-height: 36px; padding: 0 11px; border-color: #dfe7e4; border-radius: 8px; background: #f4f8f7; color: #19647a; font: 650 11px Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.detail-button:hover { border-color: #19647a; background: #eaf2f4; }
.empty-state { padding: 34px 20px; border: 1px dashed #d1ddda; border-radius: 14px; background: #fff; color: #5d7480; }
.analysis-note { margin-top: 17px; color: #5d7480; font-size: 11px; }
.loading-state { width: min(1200px,100%); margin: 18px auto 0; color: #5d7480; }
.loading-state span { border-color: #dfe7e4; border-top-color: #19647a; }
.compare-footer { margin-top: 42px; padding: 22px 0 26px; border-color: #dfe7e4; color: #5d7480; font-size: 11px; }
.compare-footer a { color: #173847; }
.detail-dialog { border-color: #dfe7e4; border-radius: 16px; background: #fff; color: #173847; box-shadow: 0 24px 80px #193d4530; }
.detail-dialog::backdrop { background: #17384777; backdrop-filter: blur(3px); }
.detail-dialog-header { border-color: #dfe7e4; }
.detail-dialog-header p { color: #19647a; }
.detail-dialog-header h2 { color: #173847; font-weight: 750; }
.detail-close { border-color: #dfe7e4; border-radius: 10px; color: #173847; }
.detail-table th, .detail-table td { border-color: #dfe7e4; }
.detail-table th { color: #f7f9f7; }
.detail-table td { color: #5d7480; }

@media (max-width: 900px) {
  .compare-intro { padding-top: 45px; }
  .compare-controls { grid-template-columns: minmax(0,.75fr) minmax(0,1.25fr); }
  .compare-button { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .compare-shell { padding: 0 16px; }
  .compare-nav { min-height: 72px; }
  .compare-back { font-size: 11px; }
  .compare-nav .account-entry { min-height: 38px; padding: 0 9px; font-size: 11px; }
  .compare-intro { padding: 38px 0 27px; }
  .compare-intro h1 { margin: 20px 0 12px; font-size: 38px; letter-spacing: -1.5px; }
  .compare-intro > p:last-child { font-size: 14px; }
  .compare-panel { padding: 22px 17px; border-radius: 15px; }
  .panel-heading { display: grid; justify-content: stretch; gap: 10px; }
  .panel-heading > div { grid-row: 2; }
  .panel-heading .data-status { grid-row: 1; justify-self: start; }
  .panel-heading h2 { font-size: 25px; }
  .compare-controls { grid-template-columns: 1fr; gap: 14px; margin-top: 22px; }
  .compare-button { grid-column: auto; width: 100%; }
  .analysis-results { margin-top: 35px; }
  .analysis-heading { align-items: stretch; }
  .analysis-heading h2 { font-size: 26px; }
  .overall-summary { gap: 8px; }
  .summary-card { min-height: 90px; align-items: flex-start; flex-direction: column; gap: 7px; padding: 10px; border-radius: 11px; }
  .summary-icon { width: 31px; height: 31px; border-radius: 8px; font-size: 17px; }
  .summary-copy span { font-size: 9px; }
  .summary-copy strong { font-size: 17px; }
  .summary-copy small { font-size: 9px; }
  .year-heading { gap: 12px; padding: 16px; }
  .year-heading h2 { font-size: 21px; }
  .year-scores { width: 100%; }
  .year-score { min-width: 0; flex: 1; }
  .year-table { min-width: 760px; }
  .compare-footer { margin-top: 32px; }
}