@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Noto+Sans+KR:wght@400;600;700;800&display=swap');

:root { --ink:#17261f; --paper:#f4f0e7; --lime:#d6f04a; --green:#27704e; --line:#c7c5b9; --muted:#637068; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:'Noto Sans KR',sans-serif; }
main { width:min(1380px,calc(100% - 48px)); margin:0 auto; padding:68px 0 64px; }.page-header { border-bottom:2px solid var(--ink); padding-bottom:44px; margin-bottom:42px; }.eyebrow { margin:0 0 10px; font:500 11px 'DM Mono',monospace; letter-spacing:.13em; }h1 { margin:0; font-size:clamp(2.3rem,5vw,4.5rem); letter-spacing:-.08em; line-height:1; white-space:nowrap; }h1 em { color:var(--green); font-style:normal; }.page-header > p:last-child { margin:25px 0 0; color:var(--muted); line-height:1.7; white-space:nowrap; }.list-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:18px; }h2 { font-size:1.7rem; letter-spacing:-.05em; margin:0; }.list-heading > p { color:var(--muted); font-size:.9rem; margin:0; }.card-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; min-height:350px; }.university-card { appearance:none; background:#fbf9f2; border:1px solid var(--line); color:inherit; cursor:pointer; min-height:250px; padding:20px; text-align:left; transition:transform .18s ease,background .18s ease,border-color .18s ease; }.university-card:hover,.university-card:focus-visible { background:var(--lime); border-color:var(--ink); outline:0; transform:translateY(-4px); }.campus,.year { color:var(--muted); display:block; font:11px 'DM Mono',monospace; letter-spacing:.04em; }.university-card h3 { font-size:1.12rem; letter-spacing:-.05em; margin:14px 0 5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.year { margin-bottom:23px; }.metrics { border-top:1px solid var(--line); }.metric { display:flex; justify-content:space-between; gap:8px; border-bottom:1px solid var(--line); padding:8px 0; font-size:.78rem; }.metric span { color:var(--muted); }.metric strong { font-weight:700; text-align:right; }.pagination { display:flex; gap:6px; justify-content:center; margin:36px 0 0; }.pagination button { width:36px; height:36px; background:transparent; border:1px solid var(--line); color:var(--ink); cursor:pointer; }.pagination button:hover,.pagination button.active { background:var(--ink); color:var(--paper); border-color:var(--ink); }.pagination button:disabled { cursor:default; }
.headline-row { align-items:center; display:flex; gap:20px; justify-content:space-between; }.university-filter { flex:0 0 auto; position:relative; }.university-filter summary { border:1px solid var(--ink); cursor:pointer; font-size:.85rem; font-weight:700; list-style:none; padding:10px 13px; white-space:nowrap; }.university-filter summary::-webkit-details-marker { display:none; }.university-filter summary::after { content:"+"; margin-left:10px; }.university-filter[open] summary::after { content:"-"; }.university-filter summary span { color:var(--green); margin-left:5px; }.filter-panel { background:#fbf9f2; border:1px solid var(--ink); box-shadow:8px 8px 0 rgba(23,38,31,.14); padding:16px; position:absolute; right:0; top:calc(100% + 6px); width:min(520px,calc(100vw - 48px)); z-index:5; }.filter-options { display:grid; gap:7px 14px; grid-template-columns:repeat(3,minmax(0,1fr)); max-height:320px; overflow-y:auto; }.filter-option { align-items:center; display:flex; font-size:.8rem; gap:6px; min-width:0; }.filter-option span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.filter-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:16px; }.filter-actions button { background:transparent; border:1px solid var(--ink); cursor:pointer; font-weight:700; padding:8px 10px; }.filter-actions button:last-child { background:var(--lime); }.filter-error { color:var(--muted); font-size:.8rem; }
.loading { grid-column:1/-1; color:var(--muted); padding:42px 0; }
dialog { border:0; background:transparent; padding:0; width:min(740px,calc(100% - 28px)); }dialog::backdrop { background:rgba(19,31,25,.58); }.dialog-content { background:#fbf9f2; max-height:min(85vh,850px); overflow-y:auto; padding:0 36px 36px; }.dialog-toolbar { align-items:start; background:#fbf9f2; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; gap:18px; margin-bottom:18px; padding:32px 0 18px; position:sticky; top:0; z-index:3; }.dialog-close { border:1px solid var(--ink); background:var(--lime); flex:0 0 auto; padding:7px 11px; cursor:pointer; }.dialog-title { font-size:2rem; margin:0; }.dialog-subtitle { color:var(--muted); margin:6px 0 0; }.detail-section { border-top:1px solid var(--line); padding:18px 0; }.detail-section h3 { font-size:1rem; margin:0 0 10px; }.detail-section ul { margin:0; padding-left:18px; color:#46534c; line-height:1.75; font-size:.9rem; }.detail-section a,.source-link { color:var(--green); font-weight:700; }.source-link { display:inline-block; margin-top:6px; }
.chart-section { padding:24px 0; }.chart-section h3 { font-size:1.1rem; letter-spacing:-.04em; }.donut-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }.donut-card { background:#f1eee5; margin:0; padding:15px; }.donut { align-items:center; aspect-ratio:1; border-radius:50%; display:flex; flex-direction:column; justify-content:center; margin:0 auto 14px; max-width:154px; position:relative; }.donut::before { background:#f1eee5; border-radius:50%; content:""; inset:26%; position:absolute; }.donut strong,.donut span { position:relative; z-index:1; }.donut strong { font:500 16px 'DM Mono',monospace; }.donut span { color:var(--muted); font-size:.66rem; }.legend-row { align-items:center; display:flex; font-size:.72rem; gap:6px; justify-content:space-between; padding:3px 0; }.legend-row span::before,.chart-legend span::before { background:var(--legend-color); border-radius:50%; content:""; display:inline-block; height:8px; margin-right:5px; width:8px; }.legend-row strong { font:500 .7rem 'DM Mono',monospace; }.chart-section svg { background:#f1eee5; display:block; height:auto; overflow:visible; width:100%; }.grid-line { stroke:#d5d2c8; stroke-dasharray:4 5; stroke-width:1; }.axis-label { fill:#6d756e; font-family:'DM Mono',monospace; font-size:11px; }.chart-value { fill:#17261f; font-family:'DM Mono',monospace; font-size:11px; font-weight:500; paint-order:stroke; stroke:#f1eee5; stroke-width:4px; stroke-linejoin:round; }.chart-point { stroke:#f1eee5; stroke-width:3; }.chart-legend { display:flex; flex-wrap:wrap; gap:14px; margin-top:10px; }.chart-legend span { color:var(--muted); font-size:.78rem; }.empty-chart { color:var(--muted); font-size:.88rem; margin:0; padding:24px 0; }
.top-ten-grid { display:grid; gap:14px; grid-template-columns:repeat(2,minmax(0,1fr)); }.top-ten-card { background:#f1eee5; padding:16px; }.top-ten-card h4 { font-size:1.25rem; margin:0 0 12px; }.top-ten-list { list-style:none; margin:0; padding:0; }.top-ten-list li { border-top:1px solid #d7d3c9; padding:12px 0; }.top-ten-list strong,.top-ten-list span,.top-ten-list small { display:block; }.top-ten-list strong { font-size:1.03rem; letter-spacing:-.04em; }.top-ten-list span { color:var(--green); font-size:.88rem; margin:4px 0; }.top-ten-list small { color:var(--muted); font:12px 'DM Mono',monospace; line-height:1.55; }
@media (max-width:1000px) { .card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px) { main { width:min(100% - 28px,1380px); padding-top:38px; }.page-header { padding-bottom:32px; margin-bottom:32px; }.headline-row { align-items:flex-start; flex-direction:column; }.page-header h1,.page-header > p:last-child { white-space:normal; }.filter-panel { left:0; right:auto; width:min(520px,calc(100vw - 28px)); }.filter-options { grid-template-columns:repeat(2,minmax(0,1fr)); }.list-heading { align-items:start; flex-direction:column; gap:8px; }.card-grid { grid-template-columns:1fr; }.dialog-content { padding:0 20px 28px; }.dialog-toolbar { padding-top:24px; }.dialog-title { font-size:1.5rem; }.donut-grid,.top-ten-grid { grid-template-columns:1fr; }.donut-card { align-items:center; display:grid; gap:15px; grid-template-columns:120px 1fr; }.donut { margin:0; }.donut-card figcaption { width:100%; } }