.regions-container {
  --region-rule: #e5e7eb;
  --region-ink: #111827;
  --region-muted: #6b7280;
}

.regions-page { padding: 8px 0 40px; }
.regions-hero { padding: 20px 0 26px; border-bottom: 1px solid var(--region-rule); }
.regions-eyebrow { margin: 0 0 8px; color: var(--region-muted); font-size: 12px; font-weight: 650; }
.regions-hero h1 { margin: 0; color: var(--region-ink); font-size: clamp(27px, 7vw, 34px); line-height: 1.22; letter-spacing: -0.65px; word-break: keep-all; }
.regions-hero > p:last-child { max-width: 560px; margin: 12px 0 0; color: #4b5563; font-size: 14px; line-height: 1.7; word-break: keep-all; }
.region-detail-hero { padding: 10px 0 22px; border-bottom: 0; }
.region-breadcrumb { display: flex; align-items: center; gap: 7px; margin-top: 14px; color: #9ca3af; font-size: 12px; }
.region-breadcrumb a { color: var(--region-muted); text-decoration: none; }
.region-breadcrumb a:hover, .region-breadcrumb a:focus-visible { color: var(--region-ink); text-decoration: underline; text-underline-offset: 3px; }

.regions-section { margin-top: 42px; }
.regions-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 11px; }
.regions-section-head h2 { margin: 0; color: var(--region-ink); font-size: 18px; line-height: 1.35; letter-spacing: -0.25px; }
.regions-section-head > span { color: #9ca3af; font-size: 11px; line-height: 1.4; white-space: nowrap; }

.region-index-list, .region-stat-list, .region-month-list, .region-related-list { margin: 0; padding: 0; list-style: none; }
.region-index-list, .region-stat-list, .region-month-list { border-top: 2px solid #1f2937; }
.region-index-list li, .region-stat-list li { border-bottom: 1px solid var(--region-rule); }
.region-index-list a, .region-stat-list a { display: grid; align-items: center; min-height: 64px; color: inherit; text-decoration: none; }
.region-index-list a { grid-template-columns: 28px minmax(0, 1fr) 20px; column-gap: 12px; }
.region-stat-list a { grid-template-columns: 28px minmax(0, 1fr) 78px; column-gap: 12px; }
.region-index-list a:hover, .region-stat-list a:hover { background: #f9fafb; }
.region-index-list a:focus-visible, .region-stat-list a:focus-visible, .region-related-list a:focus-visible { outline: 2px solid #111827; outline-offset: -2px; }
.region-index-rank, .region-stat-rank { color: #9ca3af; font-size: 11px; text-align: right; font-variant-numeric: tabular-nums; }
.region-index-main, .region-stat-main { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.region-index-main strong, .region-stat-main strong { overflow: hidden; color: var(--region-ink); font-size: 15px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.region-index-main span, .region-stat-main span { overflow: hidden; color: var(--region-muted); font-size: 12px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.region-index-action { color: var(--region-muted); font-size: 14px; line-height: 1; text-align: right; }
.region-stat-value { color: var(--region-ink); font-size: 13px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.region-stat-value small { margin-left: 1px; color: var(--region-muted); font-size: 10px; font-weight: 500; }
.region-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.region-summary { display: grid; grid-template-columns: 0.85fr 0.85fr 1.3fr; margin: 0; padding: 20px 0; border-top: 1px solid var(--region-rule); border-bottom: 1px solid var(--region-rule); }
.region-summary > div { min-width: 0; padding: 0 14px; border-left: 1px solid var(--region-rule); }
.region-summary > div:first-child { padding-left: 0; border-left: 0; }
.region-summary > div:last-child { padding-right: 0; }
.region-summary dt { color: var(--region-muted); font-size: 11px; line-height: 1.4; }
.region-summary dd { display: flex; align-items: baseline; gap: 2px; min-width: 0; margin: 6px 0 0; color: var(--region-ink); line-height: 1.2; white-space: nowrap; }
.region-summary dd strong { font-size: clamp(18px, 4.8vw, 21px); font-weight: 760; letter-spacing: -0.25px; font-variant-numeric: tabular-nums; }
.region-summary dd span { color: #4b5563; font-size: 10px; font-weight: 600; }

.region-month-list { padding: 8px 0; }
.region-month-list li { display: grid; grid-template-columns: 64px minmax(56px, 1fr) 106px; align-items: center; column-gap: 12px; min-height: 44px; }
.region-month-label { display: flex; flex-direction: column; color: #4b5563; font-size: 12px; font-variant-numeric: tabular-nums; }
.region-month-label small { color: #9ca3af; font-size: 9px; }
.region-month-bar { position: relative; height: 3px; overflow: hidden; background: #eef0f2; }
.region-month-bar i { display: block; height: 100%; background: #4b5563; }
.region-month-values { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-width: 0; font-variant-numeric: tabular-nums; }
.region-month-values strong { color: var(--region-ink); font-size: 12px; line-height: 1.2; }
.region-month-values span { color: var(--region-muted); font-size: 10px; line-height: 1.2; white-space: nowrap; }
.region-month-values small { margin-left: 1px; color: inherit; font-size: 0.82em; font-weight: 500; }

.region-related-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--region-rule); }
.region-related-list li { min-width: 0; border-bottom: 1px solid var(--region-rule); }
.region-related-list a { display: grid; grid-template-columns: minmax(0, 1fr) 12px; align-items: center; gap: 8px; min-height: 58px; padding-right: 12px; color: inherit; text-decoration: none; }
.region-related-list a:hover { background: #f9fafb; }
.region-related-list a > span:first-child { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.region-related-list strong { overflow: hidden; color: var(--region-ink); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.region-related-list small { overflow: hidden; color: var(--region-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.region-related-list a > span:last-child { color: #9ca3af; font-size: 12px; text-align: right; }

.regions-method { margin-top: 44px; padding-top: 20px; border-top: 1px solid #d1d5db; }
.regions-method h2 { margin: 0; color: var(--region-ink); font-size: 16px; }
.regions-method p { max-width: 570px; margin: 9px 0 0; color: var(--region-muted); font-size: 12px; line-height: 1.75; word-break: keep-all; }

@media (max-width: 420px) {
  .region-summary > div { padding: 0 9px; }
  .region-summary dd strong { letter-spacing: -0.4px; }
  .region-month-list li { grid-template-columns: 58px minmax(42px, 1fr) 100px; column-gap: 10px; }
  .region-index-list a { grid-template-columns: 24px minmax(0, 1fr) 18px; column-gap: 10px; }
  .region-stat-list a { grid-template-columns: 24px minmax(0, 1fr) 70px; column-gap: 10px; }
  .region-related-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}