.region-page {
    --region-ink: #13263d;
    --region-muted: #556a82;
    --region-bg: #ecf2f8;
    --region-surface: #ffffff;
    --region-border: #d7e1ec;
    --region-accent: #0b7f72;
    --region-accent-2: #1f4f8b;
    color: var(--region-ink);
    font-family: var(--region-font-sans, "IBM Plex Sans", "Noto Sans TC", "Noto Sans HK", "Noto Sans JP", "Noto Sans", sans-serif);
    position: relative;
}

.region-page::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle at 10% 8%, rgba(29, 95, 162, 0.12), transparent 30%),
        radial-gradient(circle at 86% 14%, rgba(11, 127, 114, 0.14), transparent 33%),
        linear-gradient(180deg, #f5f8fc 0%, var(--region-bg) 100%);
}

.region-page h1,
.region-page h2,
.region-page h3 {
    font-family: var(--region-font-serif, "IBM Plex Serif", "Noto Serif TC", "Noto Serif HK", "Noto Serif JP", "Noto Serif", serif);
}

.region-page section[id] {
    scroll-margin-top: 6rem;
}

.region-page p,
.region-page li {
    line-height: 1.72;
}

.region-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    color: var(--region-muted);
}

.region-breadcrumb a {
    color: var(--region-accent-2);
    text-decoration: none;
}

.region-breadcrumb a:hover,
.region-breadcrumb a:focus {
    text-decoration: underline;
}

.region-hero {
    position: relative;
    overflow: hidden;
    border-radius: 1.4rem;
    padding: 2.25rem;
    background: linear-gradient(135deg, #173b68 0%, #1f527e 46%, #0b8678 100%);
    box-shadow: 0 18px 36px rgba(11, 37, 63, 0.2);
    color: #f6fbff;
}

.region-hero::before,
.region-hero::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
}

.region-hero::before {
    width: 16rem;
    height: 16rem;
    top: -5rem;
    right: -3rem;
    background: rgba(255, 255, 255, 0.16);
    filter: blur(8px);
}

.region-hero::after {
    width: 13rem;
    height: 13rem;
    left: -4rem;
    bottom: -5rem;
    background: rgba(255, 171, 97, 0.24);
    filter: blur(12px);
}

.region-hero > .row {
    position: relative;
    z-index: 1;
}

.region-kicker {
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 0.8rem;
    color: #d1ecff;
    font-weight: 700;
}

.region-hero .lead {
    color: rgba(246, 251, 255, 0.95);
}

.region-translation-note {
    border-radius: 0.95rem;
    padding: 0.8rem 0.95rem;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(246, 251, 255, 0.94);
    font-size: 0.9rem;
}

.region-hero-panel {
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.12);
    padding: 0.95rem;
}

.region-hero-panel-label {
    font-size: 0.74rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #d4edff;
    font-weight: 700;
}

.region-hero-panel-title {
    font-size: 1rem;
    font-weight: 700;
    color: #ffffff;
}

.region-hero-panel-text {
    font-size: 0.84rem;
    color: #d8edff;
    line-height: 1.55;
}

.region-hero .btn-light {
    border: 1px solid rgba(255, 255, 255, 0.78);
}

.region-hero .btn-outline-light {
    border-color: rgba(255, 255, 255, 0.78);
}

.region-stat-grid {
    display: grid;
    gap: 0.8rem;
}

.region-stat,
.region-card,
.region-section {
    border: 1px solid var(--region-border);
    background: linear-gradient(160deg, var(--region-surface) 0%, #f8fbff 100%);
    box-shadow: 0 10px 24px rgba(15, 39, 65, 0.06);
}

.region-stat {
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.12);
    border-radius: 1rem;
    padding: 0.95rem;
}

.region-stat-value {
    display: block;
    font-size: 1.15rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.25rem;
}

.region-stat-label {
    display: block;
    font-size: 0.82rem;
    color: #d9efff;
}

.region-section {
    border-radius: 1rem;
    padding: 1.15rem;
}

.region-controls {
    border-radius: 1rem;
    border: 1px solid var(--region-border);
    background: linear-gradient(160deg, #f6fbff 0%, #eef4fb 100%);
    box-shadow: 0 10px 24px rgba(15, 39, 65, 0.06);
    padding: 1rem 1.1rem;
}

.region-anchor-nav-wrap {
    margin-top: -0.25rem;
}

.region-anchor-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.region-anchor-link {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    border: 1px solid #cddded;
    background: #f4f8fc;
    color: var(--region-accent-2);
    font-size: 0.88rem;
    font-weight: 700;
    padding: 0.45rem 0.85rem;
    text-decoration: none;
}

.region-anchor-link:hover,
.region-anchor-link:focus {
    border-color: #b5cee5;
    background: #edf4fb;
    color: #173b68;
}

.region-anchor-link.is-active {
    border-color: #0b7f72;
    background: #0b7f72;
    color: #ffffff;
}

.region-anchor-link[aria-current="location"] {
    border-color: #0b7f72;
    background: #0b7f72;
    color: #ffffff;
}

.region-anchor-link[hidden] {
    display: none !important;
}

.region-controls .form-label {
    color: var(--region-muted);
    font-size: 0.82rem;
    font-weight: 700;
}

.region-controls .form-control {
    border-color: #c9d8e8;
    background: rgba(255, 255, 255, 0.88);
}

.region-card {
    border-radius: 1rem;
    padding: 1.1rem;
    height: 100%;
}

.region-signal-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
}

.region-signal-card {
    border-radius: 1rem;
    border: 1px solid var(--region-border);
    background: linear-gradient(160deg, #f8fbff 0%, #eef6ff 100%);
    padding: 1rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.region-signal-label {
    margin-bottom: 0.45rem;
    color: var(--region-accent-2);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.region-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border-radius: 999px;
    background: #eef6ff;
    border: 1px solid #cfe0f1;
    color: #18436b;
    font-size: 0.84rem;
    padding: 0.45rem 0.8rem;
}

.region-note {
    font-size: 0.88rem;
    color: var(--region-muted);
}

.region-empty-state {
    color: #8c2231;
    font-weight: 700;
}

.region-section-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.region-section-toggle {
    flex-shrink: 0;
    border-radius: 999px;
    border: 1px solid #bfd2e6;
    background: #f3f8fd;
    color: #1d4b74;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 0.42rem 0.84rem;
}

.region-section-toggle:hover,
.region-section-toggle:focus {
    border-color: #9cbadc;
    background: #e8f1fb;
    color: #173b68;
}

.region-section-body[hidden] {
    display: none !important;
}

.region-search-section.is-filtered-out {
    display: none !important;
}

.region-search-section[hidden],
.citation-item[hidden] {
    display: none !important;
}

.region-source-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.region-source-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    border-radius: 999px;
    border: 1px solid #d7e4f0;
    background: #f7fbff;
    color: #275071;
    font-size: 0.76rem;
    line-height: 1.35;
    padding: 0.32rem 0.68rem;
    text-decoration: none;
}

.region-source-chip:hover,
.region-source-chip:focus {
    border-color: #b7cde2;
    background: #edf5fc;
    color: #163f68;
}

.region-source-chip small {
    color: var(--region-muted);
    font-size: 0.72rem;
}

.region-card-details {
    border-top: 1px solid #dbe6f0;
    padding-top: 0.85rem;
}

.region-card-details summary {
    cursor: pointer;
    color: var(--region-accent-2);
    font-size: 0.84rem;
    font-weight: 700;
    margin-bottom: 0.8rem;
}

.region-list {
    margin: 0;
    padding-left: 1.1rem;
}

.region-footnote a {
    color: var(--region-accent-2);
    text-decoration: none;
    font-weight: 700;
}

.citation-list {
    list-style: none;
    padding: 0;
}

.citation-item + .citation-item {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #d7e1ec;
}

.citation-number {
    font-weight: 700;
    color: #173b68;
}

.citation-badge {
    border-radius: 999px;
    background: #e8f4ef;
    border: 1px solid #c7e7da;
    color: #0f6d62;
    font-size: 0.75rem;
    padding: 0.18rem 0.55rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.citation-language,
.citation-date {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.18rem 0.55rem;
    font-size: 0.74rem;
    font-weight: 700;
}

.citation-language-ja {
    background: #edf7f1;
    color: #14604d;
}

.citation-language-non-ja {
    background: #fff4e5;
    color: #8a5200;
}

.citation-date {
    background: #f2f7fb;
    color: var(--region-muted);
}

.citation-backlinks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.88rem;
}

.region-market-bar {
    border-radius: 1rem;
    border: 1px solid var(--region-border);
    background: linear-gradient(160deg, #f6fbff 0%, #eef4fb 100%);
    box-shadow: 0 10px 24px rgba(15, 39, 65, 0.06);
    padding: 1rem 1.1rem;
}

.region-market-bar .region-kicker {
    color: var(--region-accent-2);
}

.region-market-bar-actions,
.region-market-switch {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: center;
}

.region-market-switch {
    padding-top: 0.9rem;
    border-top: 1px solid #dbe6f0;
}

.region-market-switch-label {
    font-size: 0.76rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--region-muted);
    font-weight: 700;
}

.region-market-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid #cddded;
    background: #f4f8fc;
    color: var(--region-accent-2);
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.25;
    padding: 0.45rem 0.85rem;
    text-decoration: none;
}

.region-market-link:hover,
.region-market-link:focus {
    border-color: #b5cee5;
    background: #edf4fb;
    color: #173b68;
}

.region-market-link.is-primary {
    border-color: #173b68;
    background: #173b68;
    color: #ffffff;
}

.region-market-link.is-primary:hover,
.region-market-link.is-primary:focus {
    border-color: #102844;
    background: #102844;
    color: #ffffff;
}

.region-disclosure {
    border-top: 1px solid #dbe6f0;
    padding-top: 1rem;
}

.region-disclosure-summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid #cddded;
    background: #f4f8fc;
    color: var(--region-accent-2);
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.25;
    padding: 0.45rem 0.85rem;
    cursor: pointer;
}

.region-disclosure[open] .region-disclosure-summary {
    border-color: #b5cee5;
    background: #edf4fb;
    color: #173b68;
}

@media (max-width: 991px) {
    .region-hero {
        padding: 1.75rem;
    }

    .region-signal-grid {
        grid-template-columns: 1fr;
    }

    .region-section-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 575px) {
    .region-market-bar,
    .region-controls,
    .region-section,
    .region-card {
        padding: 0.95rem;
    }

    .region-anchor-link,
    .region-market-link {
        width: 100%;
        justify-content: center;
    }
}