:root { --fg: #1f2937; --muted: #5b6472; --line: #e5e7eb; --accent: #0b5cad; --bg-note: #fff7e0; --radius: 8px; }
* { box-sizing: border-box; }
body { margin: 0; font: 18px/1.7 system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--fg); }
a { color: var(--accent); }
.site-header { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; padding: 12px 20px; border-bottom: 1px solid var(--line); }
.brand { font-weight: 700; color: var(--fg); text-decoration: none; }
.search { display: flex; flex: 1 1 260px; gap: 8px; }
.search input { flex: 1; min-width: 0; font: inherit; padding: 8px 12px; border: 1px solid #c4c9d2; border-radius: var(--radius); }
button, .button { font: inherit; padding: 8px 16px; border: 0; border-radius: var(--radius); background: var(--accent); color: #fff; cursor: pointer; text-decoration: none; display: inline-block; }
.account { display: flex; gap: 12px; align-items: center; font-size: 16px; }
.container { max-width: 760px; margin: 0 auto; padding: 24px 16px 64px; }
h1 { font-size: 1.8rem; line-height: 1.3; margin: 8px 0 12px; }
h2 { font-size: 1.35rem; margin-top: 1.8em; }
.breadcrumb { font-size: 15px; color: var(--muted); }
.summary { color: var(--muted); font-size: 1.1rem; }
.muted { color: var(--muted); font-size: 15px; }
img, video { max-width: 100%; height: auto; border-radius: 4px; }
figure { margin: 18px 0; }
figcaption { color: var(--muted); font-size: 15px; }
.callout { background: var(--bg-note); border-left: 4px solid #f0b429; padding: 4px 16px; margin: 18px 0; border-radius: 0 var(--radius) var(--radius) 0; }
.card-list { list-style: none; padding: 0; }
.card-list li { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; margin: 12px 0; }
.card-list a { font-weight: 600; }
.card-list p { margin: 4px 0 0; color: var(--muted); font-size: 16px; }
details { border-bottom: 1px solid var(--line); padding: 10px 0; }
summary { cursor: pointer; font-weight: 600; }
.notice { background: #eef5fc; border-radius: var(--radius); padding: 12px 16px; margin: 16px 0; font-size: 16px; }
@media (max-width: 520px) { body { font-size: 17px; } .container { padding-top: 16px; } }
button.link { background: none; color: var(--accent); padding: 0; text-decoration: underline; }
.table-wrap { overflow-x: auto; margin: 18px 0; }
.table-wrap table { border-collapse: collapse; min-width: 100%; font-size: 16px; }
.table-wrap caption { text-align: left; color: var(--muted); padding-bottom: 6px; }
.table-wrap th, .table-wrap td { border: 1px solid var(--line); padding: 8px 12px; text-align: left; vertical-align: top; }
.table-wrap th { background: #f5f7fa; }
.menu { border-bottom: 1px solid var(--line); padding: 0 20px; font-size: 16px; }
.menu-toggle { display: none; }
.menu-list, .menu-sub { list-style: none; margin: 0; padding: 0; }
.menu-list { display: flex; flex-wrap: wrap; gap: 0 20px; }
.menu-item { position: relative; }
.menu-item > a { display: block; padding: 10px 0; font-weight: 600; text-decoration: none; }
.menu a[aria-current] { color: var(--fg); box-shadow: inset 0 -3px 0 var(--accent); }
.menu-sub { display: none; position: absolute; left: 0; top: 100%; z-index: 10; min-width: 220px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 0; box-shadow: 0 6px 18px rgba(0, 0, 0, .08); }
.menu-item:hover > .menu-sub, .menu-item:focus-within > .menu-sub { display: block; }
.menu-sub a { display: block; padding: 6px 16px; text-decoration: none; }
.menu-sub a[aria-current] { box-shadow: none; font-weight: 700; }
@media (max-width: 720px) {
  .js .menu-toggle { display: block; margin: 8px 0; }
  .js .menu-list { display: none; }
  .js .menu-list.open { display: block; }
  .menu-list { display: block; }
  .menu-sub { display: block; position: static; border: 0; box-shadow: none; padding: 0 0 6px 16px; min-width: 0; }
  .menu-item > a { padding: 8px 0 2px; }
  .menu-sub a { padding: 4px 0; }
}