:root {
  color-scheme: light dark;
  --gray-100: #f7f8f9;
  --gray-200: #e9ecef;
  --gray-300: #d9dde3;
  --gray-700: #868b94;
  --gray-800: #555d6d;
  --gray-1000: #1a1c20;
  --canvas: #f7f8f9;
  --surface: #fff;
  --line: #e4e7eb;
  --control-line: #6f7784;
  --ink: #1a1c20;
  --body: #555d6d;
  --muted: #555d6d;
  --point: #d33434;
  --shadow-s2: 0 4px 16px rgb(0 0 0 / 12%);
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--canvas);
  font-synthesis: none;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; overflow-x: clip; line-height: 1.55; background: var(--canvas); }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--point); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--point); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.top { position: sticky; z-index: 20; top: 0; display: flex; align-items: center; gap: 32px; min-height: 64px; padding: 10px 28px; border-bottom: 1px solid var(--line); background: var(--surface); }
.brand { flex: 0 0 auto; color: var(--ink); font-size: 18px; font-weight: 700; letter-spacing: -.03em; }
.brand img { display: block; width: 146px; height: 32px; }
.search { position: relative; display: flex; flex: 1; max-width: 480px; height: 40px; overflow: visible; border: 1px solid var(--control-line); border-radius: 999px; background: var(--surface); }
.search:focus-within { border-color: var(--point); }
.search input { min-width: 0; width: 100%; height: 38px; padding: 0 8px 0 16px; border: 0; border-radius: 999px 0 0 999px; color: var(--ink); background: transparent; font: inherit; font-size: 14px; outline: 0; }
.search button { flex: 0 0 auto; min-width: 64px; height: 38px; padding: 0 16px; border: 0; border-left: 1px solid var(--control-line); border-radius: 0 999px 999px 0; color: var(--point); background: transparent; font: inherit; font-size: 14px; font-weight: 700; white-space: nowrap; }
.search-results { position: absolute; top: 46px; right: 0; left: 0; max-height: 360px; overflow: auto; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-s2); }
.search-results a, .search-results span { display: block; padding: 9px 10px; border-radius: 8px; font-size: 14px; }
.search-results a:hover { background: var(--gray-100); }
.search-results small { color: var(--muted); }

.shell { display: grid; grid-template-columns: 180px minmax(0, 820px) 220px; gap: 32px; max-width: 1320px; margin: 0 auto; padding: 32px 24px 72px; }
.rail { position: sticky; top: 96px; display: flex; flex-direction: column; align-self: start; gap: 2px; }
.rail a { padding: 8px 10px; border-radius: 8px; color: var(--body); font-size: 14px; }
.rail a:hover, .rail-home { color: var(--point) !important; background: var(--surface); font-weight: 700; }
main { min-width: 0; }
main > article { min-height: calc(100svh - 80px); }
.side-note { position: sticky; top: 96px; align-self: start; padding-top: 12px; border-top: 1px solid var(--line); color: var(--body); }
.side-note h2 { margin: 0 0 6px; font-size: 14px; }
.side-note p { margin: 0; color: var(--muted); font-size: 13px; }

.breadcrumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin: 0 0 14px; color: var(--muted); font-size: 13px; }
.breadcrumbs i { color: var(--gray-300); font-style: normal; }
h1 { margin: 0; font-size: 30px; font-weight: 700; line-height: 1.25; letter-spacing: -.035em; }
h2 { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.35; letter-spacing: -.025em; }
h3 { margin: 24px 0 8px; font-size: 16px; font-weight: 600; }
p { color: var(--body); }
article > section { margin-top: 40px; }
.page-meta, .home-intro > p { margin: 8px 0 0; color: var(--muted); font-size: 13px; }
.alias-line { margin: 8px 0 0; color: var(--body); font-size: 13px; }
.direct-note { margin: 14px 0 0; color: var(--body); font-size: 14px; }
.sort-line { margin: 10px 0 0; color: var(--muted); font-size: 13px; }

.summary { margin-top: 24px; padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.summary-value { margin: 0; color: var(--ink); font-size: 24px; font-weight: 700; line-height: 1.35; letter-spacing: -.025em; }
.summary-meta { margin: 6px 0 0; color: var(--muted); font-size: 13px; }
.fact-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; margin-top: 16px; }
.fact-strip span { padding: 9px 0; border-top: 1px solid var(--line); color: var(--body); font-size: 14px; }

.filter-strip { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding-bottom: 2px; }
.filter-strip::-webkit-scrollbar { display: none; }
.filter-strip label { position: relative; display: flex; align-items: center; height: 36px; padding: 0 10px 0 13px; border: 1px solid var(--control-line); border-radius: 999px; background: var(--surface); color: var(--body); font-size: 13px; font-weight: 500; white-space: nowrap; }
.filter-strip select { width: auto; max-width: 156px; height: 34px; padding: 0 20px 0 5px; border: 0; color: var(--body); background: transparent; font: inherit; appearance: none; cursor: pointer; }
.filter-strip label::after { content: "⌄"; margin-left: -16px; color: var(--muted); pointer-events: none; }

.home-browser { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(220px, .85fr); gap: 0; margin-top: 16px; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.list-panel { min-width: 0; padding: 18px 18px 4px; border-right: 1px solid var(--line); }
.preview-panel { margin: 0; padding: 24px; background: var(--gray-100); }
.preview-panel h2 { margin-top: 18px; font-size: 18px; }
.preview-panel p { margin: 6px 0 0; font-size: 13px; }
.preview-panel .preview-value { margin-top: 12px; color: var(--ink); font-size: 24px; font-weight: 700; }
.empty-line { padding: 32px 0; color: var(--muted); text-align: center; font-size: 14px; }
.empty-line button { margin-left: 6px; border: 0; color: var(--point); background: transparent; font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.listing-results { margin-top: 22px; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.section-head > span { flex: 0 0 auto; color: var(--muted); font-size: 12px; }

.card-grid { display: block; margin: 12px 0 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.cert-card { border-bottom: 1px solid var(--line); }
.cert-card a, .cert-card > div { display: flex; flex-direction: column; min-height: 92px; padding: 14px 4px; }
.cert-card a:hover strong { color: var(--point); }
.row-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cert-card strong { color: var(--ink); font-size: 16px; font-weight: 700; }
.cert-card .row-value { margin-top: 5px; color: var(--body); font-size: 14px; font-weight: 500; }
.cert-card .row-meta { margin-top: 3px; color: var(--muted); font-size: 13px; }
.status-badge { display: inline-flex; align-items: center; min-height: 24px; padding: 1px 8px; border: 1px solid var(--point); border-radius: 999px; color: var(--point); background: transparent; font-size: 12px; font-style: normal; font-weight: 700; white-space: nowrap; }

.link-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; margin-top: 12px; border-top: 1px solid var(--line); }
.link-grid a, .link-grid > div { display: flex; min-height: 56px; flex-direction: column; justify-content: center; padding: 10px 2px; border-bottom: 1px solid var(--line); }
.link-grid strong { color: var(--ink); font-size: 14px; }
.link-grid span { color: var(--muted); font-size: 13px; }

.metrics { display: grid; grid-template-columns: repeat(2, 1fr); margin-top: 12px; border-top: 1px solid var(--line); }
.metrics div { padding: 14px 2px; border-bottom: 1px solid var(--line); }
.metrics span { display: block; color: var(--muted); font-size: 13px; }
.metrics strong { color: var(--ink); font-size: 24px; }
.table-wrap { max-width: 100%; margin-top: 12px; overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
table { width: 100%; border-collapse: collapse; font-size: 14px; white-space: nowrap; }
th, td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: right; }
th:first-child, td:first-child { position: sticky; left: 0; z-index: 1; text-align: left; background: var(--surface); }
thead th { color: var(--muted); background: var(--gray-100); font-size: 12px; font-weight: 500; }
thead th:first-child { background: var(--gray-100); }
tbody tr:last-child > * { border-bottom: 0; }

.bars { display: flex; align-items: end; gap: 9px; height: 210px; margin-top: 12px; padding: 22px 12px 30px; overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.bar-year { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 3px; min-width: 40px; height: 100%; }
.bar-year span { position: absolute; bottom: -24px; left: 50%; color: var(--muted); font-size: 11px; transform: translateX(-50%); }
.bar-year i, .bar-year b { display: block; min-height: 2px; height: calc(var(--v) * 1%); border-radius: 2px 2px 0 0; }
.bar-year i { background: var(--point); }
.bar-year b { background: var(--gray-700); }
.legend { display: inline-block; width: 9px; height: 9px; border-radius: 2px; }
.legend.written { background: var(--point); }
.legend.practical { background: var(--gray-700); }

.ranking, .rank-mini { margin: 12px 0 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.ranking li { display: grid; grid-template-columns: 40px minmax(150px, 1fr) 76px 86px; align-items: center; gap: 10px; padding: 11px 2px; border-bottom: 1px solid var(--line); }
.rank-no { color: var(--point); font-weight: 700; }
.ranking strong, .ranking li > span:last-child { text-align: right; }
.rank-mini li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 2px; border-bottom: 1px solid var(--line); }
.rank-mini li.current { color: var(--point); font-weight: 700; }
.rank-mini span { color: var(--muted); font-size: 13px; }
.split-ranks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.compare { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin: 0; font-size: 13px; }
.compare dt { color: var(--muted); }
.compare dd { margin: 0; color: var(--ink); font-weight: 700; }

.note { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.source-box { margin-top: 48px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.source-box p { margin: 2px 0; color: var(--muted); }
.source-box span { color: var(--body); font-weight: 500; }
.source-box a { color: var(--point); text-decoration: underline; text-underline-offset: 2px; }
footer { max-width: 1320px; margin: 0 auto; padding: 24px 28px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
footer nav { display: flex; flex-wrap: wrap; gap: 16px; }
footer p { margin: 7px 0 0; color: var(--muted); }

@media (max-width: 1080px) { .shell { grid-template-columns: 160px minmax(0, 1fr); } .side-note { display: none; } }
@media (max-width: 720px) {
  .top { align-items: stretch; gap: 8px; min-height: 0; padding: 10px 14px; }
  .brand { align-self: center; font-size: 16px; white-space: nowrap; }
  .search { height: 38px; }
  .search input, .search button { height: 36px; }
  .search button { min-width: 56px; padding: 0 12px; }
  .shell { display: block; padding: 14px 15px 56px; }
  .rail { position: static; display: flex; flex-direction: row; gap: 7px; margin: 0 -15px 22px; padding: 0 15px 4px; overflow-x: auto; scrollbar-width: none; }
  .rail::-webkit-scrollbar { display: none; }
  .rail a { flex: 0 0 auto; padding: 7px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); white-space: nowrap; }
  h1 { font-size: 24px; }
  article > section { margin-top: 34px; }
  .summary { margin-top: 20px; }
  .summary-value { font-size: 22px; }
  .fact-strip { grid-template-columns: 1fr; }
  .home-browser { display: block; margin-right: -15px; margin-left: -15px; border-right: 0; border-left: 0; border-radius: 0; }
  .list-panel { padding: 16px 15px 2px; border-right: 0; }
  .preview-panel { display: none; }
  .link-grid, .split-ranks { grid-template-columns: 1fr; gap: 0; }
  .ranking li { grid-template-columns: 32px minmax(118px, 1fr) 64px; }
  .ranking li > span:last-child { display: none; }
  .bars { height: 184px; }
  footer { padding: 22px 15px; }
}
@media (max-width: 380px) { .top { flex-wrap: wrap; } .brand { width: 100%; } .search { max-width: none; flex-basis: 100%; } }
@media (prefers-color-scheme: dark) {
  :root { --canvas: #111318; --surface: #191c22; --line: #30353d; --control-line: #9aa3af; --ink: #f4f5f7; --body: #d2d6dc; --muted: #d2d6dc; --gray-100: #20242b; --gray-200: #282d35; --gray-300: #3a4049; --gray-700: #aeb4bd; --gray-800: #d2d6dc; --gray-1000: #f4f5f7; --point: #e85b5b; }
  .brand img { content: url("/assets/brand/logo-dark.svg"); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }