@charset "UTF-8";
/*
 * jp-regions.css —— 院校分类页「日本全国行政地图」模块
 *
 * 结构：
 *   .jp-admin__columns  左：全国行政地图 / 右：地区明细放大图 + 院校清单
 *   .jp-national        全国 SVG 地图与九地区图例
 *   .jp-region          单个地区局部放大图（固定 1:1 比例，不提供缩放）
 *   .jp-detail          地区明细面板（放大图 + 仅含大学名称的院校清单）
 *   .jp-table           下半部分各地区院校汇总表
 *
 * 所有色值均取自 variables.css 的 --map-* 令牌。
 */

/* ==========================================================
   一、整体两栏布局
   ========================================================== */

.jp-admin {
    margin-top: 28px;
}

.jp-admin__columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}

@media (min-width: 992px) {
    .jp-admin__columns {
        grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
        gap: 40px;
    }
}

@media (min-width: 1280px) {
    .jp-admin__col--national {
        position: sticky;
        top: 96px;
    }
}

.jp-admin__col-title {
    margin: 0 0 14px;
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--color-primary);
}

.jp-admin__col-title::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 14px;
    margin-right: 8px;
    border-radius: 2px;
    background: var(--color-brand);
    vertical-align: -1px;
}

.jp-admin__note {
    margin: 14px 0 0;
    font-size: 0.75rem;
    line-height: 1.7;
    color: var(--color-text-muted);
}

/* ==========================================================
   二、全国行政地图
   ========================================================== */

.jp-national {
    padding: 18px 18px 16px;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: var(--color-surface);
    box-shadow: 0 10px 30px rgba(24, 51, 88, 0.06);
}

.jp-national__canvas {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    background:
        radial-gradient(120% 85% at 50% 28%, var(--map-sea-light) 0%, var(--map-sea) 58%, var(--map-sea-deep) 100%);
}

.jp-national__svg {
    display: block;
    width: 100%;
    height: 100%;
}

.jp-national .jp-pref {
    fill: var(--map-land-context);
    stroke: var(--map-pref-line);
    stroke-width: 0.9;
    stroke-linejoin: round;
    cursor: pointer;
    transition: fill var(--duration-fast) ease, opacity var(--duration-fast) ease;
}

.jp-national .jp-pref--hokkaido { fill: var(--map-region-hokkaido); }
.jp-national .jp-pref--tohoku { fill: var(--map-region-tohoku); }
.jp-national .jp-pref--kanto { fill: var(--map-region-kanto); }
.jp-national .jp-pref--chubu { fill: var(--map-region-chubu); }
.jp-national .jp-pref--kansai { fill: var(--map-region-kansai); }
.jp-national .jp-pref--chugoku { fill: var(--map-region-chugoku); }
.jp-national .jp-pref--shikoku { fill: var(--map-region-shikoku); }
.jp-national .jp-pref--kyushu { fill: var(--map-region-kyushu); }
/* 冲绳：辖区由数十座碎岛组成，未选中态若沿用与海域接近的浅粉 + 白色细描边，
   在整体压暗后会与海面几乎融为一体。此处单独加深填充、改用深玫红轮廓并加粗描边，
   保证初始化后无需任何交互即可辨认岛链轮廓；选中态仍由下方 --map-region-active 规则接管。 */
.jp-national .jp-pref--okinawa {
    fill: var(--map-region-okinawa);
    stroke: var(--map-region-okinawa-line);
    stroke-width: 1.8;
}

.jp-national[data-active] .jp-pref {
    opacity: 0.42;
}

/* 冲绳碎岛面积小，选中其他地区时不跟随 0.42 的整体压暗，保留 0.72 维持轮廓可辨 */
.jp-national[data-active] .jp-pref--okinawa:not(.is-active) {
    opacity: 0.72;
}

.jp-national[data-active] .jp-pref.is-active {
    opacity: 1;
    fill: var(--map-region-active);
    stroke: var(--map-region-active-deep);
    stroke-width: 1.1;
}

.jp-national[data-active] .jp-pref--hokkaido.is-active,
.jp-national[data-active] .jp-pref--tohoku.is-active,
.jp-national[data-active] .jp-pref--kanto.is-active,
.jp-national[data-active] .jp-pref--chubu.is-active,
.jp-national[data-active] .jp-pref--kansai.is-active,
.jp-national[data-active] .jp-pref--chugoku.is-active,
.jp-national[data-active] .jp-pref--shikoku.is-active,
.jp-national[data-active] .jp-pref--kyushu.is-active,
.jp-national[data-active] .jp-pref--okinawa.is-active {
    fill: var(--map-region-active);
}

.jp-national .jp-pref:hover {
    fill: var(--map-region-active-soft);
}

.jp-national[data-active] .jp-pref.is-active:hover {
    fill: var(--map-region-active);
}

.jp-national__label {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.02em;
    fill: var(--map-label);
    paint-order: stroke;
    stroke: rgba(255, 255, 255, 0.9);
    stroke-width: 2.2px;
    pointer-events: none;
    user-select: none;
}

.jp-national__label.is-active {
    fill: var(--map-region-active-deep);
    font-size: 20px;
}

/* 主要城市地名：红点 + 文字标注，选中地区时同步加深 */
.jp-national__city {
    cursor: pointer;
}

.jp-national__city-dot {
    fill: var(--color-danger);
    opacity: 0.82;
    transition: opacity var(--duration-fast) ease;
}

.jp-national__city-name {
    font-size: 12px;
    font-weight: 600;
    fill: var(--color-danger);
    paint-order: stroke;
    stroke: rgba(255, 255, 255, 0.94);
    stroke-width: 2px;
    pointer-events: none;
    user-select: none;
    transition: fill var(--duration-fast) ease;
}

.jp-national__city.is-active .jp-national__city-dot {
    opacity: 1;
}

.jp-national__city.is-active .jp-national__city-name {
    font-weight: 700;
}

.jp-national__cities:has(.is-active) .jp-national__city:not(.is-active) {
    opacity: 0.55;
}

/* 九地区图例（兼地区选择器） */
.jp-national__legend {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(116px, 1fr));
    gap: 8px;
    margin-top: 16px;
}

.jp-legend-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface-alt);
    color: var(--color-text);
    font-size: 0.8125rem;
    line-height: 1.2;
    cursor: pointer;
    transition: border-color var(--duration-fast) ease, background var(--duration-fast) ease;
}

.jp-legend-chip:hover {
    border-color: var(--color-brand);
    background: var(--color-brand-soft);
}

.jp-legend-chip.is-active {
    border-color: var(--map-region-active-deep);
    background: var(--color-brand-soft);
    font-weight: 700;
    color: var(--color-primary);
}

.jp-legend-chip__swatch {
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    background: var(--map-land-context);
}

.jp-legend-chip--hokkaido .jp-legend-chip__swatch { background: var(--map-region-hokkaido); }
.jp-legend-chip--tohoku .jp-legend-chip__swatch { background: var(--map-region-tohoku); }
.jp-legend-chip--kanto .jp-legend-chip__swatch { background: var(--map-region-kanto); }
.jp-legend-chip--chubu .jp-legend-chip__swatch { background: var(--map-region-chubu); }
.jp-legend-chip--kansai .jp-legend-chip__swatch { background: var(--map-region-kansai); }
.jp-legend-chip--chugoku .jp-legend-chip__swatch { background: var(--map-region-chugoku); }
.jp-legend-chip--shikoku .jp-legend-chip__swatch { background: var(--map-region-shikoku); }
.jp-legend-chip--kyushu .jp-legend-chip__swatch { background: var(--map-region-kyushu); }
.jp-legend-chip--okinawa .jp-legend-chip__swatch { background: var(--map-region-okinawa); }

.jp-legend-chip__name {
    flex: 1 1 auto;
    white-space: nowrap;
}

.jp-legend-chip__count {
    flex: 0 0 auto;
    padding: 1px 5px;
    border-radius: 999px;
    background: rgba(24, 51, 88, 0.08);
    color: var(--color-primary);
    font-size: 0.6875rem;
}

.jp-national__total {
    margin: 14px 0 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-primary);
}

.jp-national__hint {
    margin: 6px 0 0;
    font-size: 0.75rem;
    line-height: 1.7;
    color: var(--color-text-muted);
}

/* ==========================================================
   三、地区局部放大图
   ========================================================== */

.jp-region {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-surface);
    overflow: hidden;
    cursor: pointer;
    transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}

.jp-region:hover,
.jp-region:focus-visible {
    border-color: var(--color-brand);
    box-shadow: 0 6px 18px rgba(24, 51, 88, 0.1);
    outline: none;
}

.jp-region__canvas {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: radial-gradient(120% 85% at 50% 28%, var(--map-sea-light) 0%, var(--map-sea) 58%, var(--map-sea-deep) 100%);
}

.jp-region__zoom {
    position: absolute;
    inset: 0;
    transform-origin: center center;
}

.jp-region__svg {
    display: block;
    width: 100%;
    height: 100%;
}

.jp-region__sea {
    fill: transparent;
}

.jp-region .jp-pref--region {
    fill: var(--map-region-region-fill);
    stroke: var(--map-region-region-line);
    stroke-width: 0.8;
    stroke-linejoin: round;
}

.jp-region__caption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 8px 10px;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-alt);
    font-size: 0.8125rem;
}

.jp-region__name {
    font-weight: 700;
    color: var(--color-primary);
}

.jp-region__count {
    color: var(--color-text-muted);
    font-size: 0.75rem;
}

/* 序号点位：按钮以院校坐标为中心，序号圆点即唯一定位标识 */
.jp-region__markers {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.jp-marker {
    position: absolute;
    left: var(--jp-x, 50%);
    top: var(--jp-y, 50%);
    z-index: 2;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    transform: translate(-50%, -50%);
    cursor: pointer;
    pointer-events: auto;
}

.jp-marker:hover,
.jp-marker:focus-visible {
    z-index: 9;
    outline: none;
}

.jp-marker__num {
    display: grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--map-region-active-deep);
    color: var(--map-label-inverse);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 1px 3px var(--map-marker-ring);
    transition: transform var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}

.jp-marker:hover .jp-marker__num,
.jp-marker:focus-visible .jp-marker__num {
    box-shadow: 0 3px 10px rgba(24, 51, 88, 0.28);
    transform: scale(1.12);
}

/* 重点大学名称标注（仅 logo_url 非空的 45 所）：
   引线层与标注层都是绝对定位覆盖层，不参与文档流，
   位置由脚本按「分散排布 + 箭头引线」计算，因此不影响周边任何元素的布局与交互 */
.jp-region__leaders {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.jp-region__leaders path {
    fill: none;
    stroke: var(--map-callout-line);
    stroke-width: 1.3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.jp-region__labels {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

.jp-callout {
    position: absolute;
    left: 0;
    top: 0;
    padding: 2px 6px;
    border: 1px solid var(--map-callout-border);
    border-radius: 6px;
    background: var(--map-callout-bg);
    color: var(--map-callout-text);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0.01em;
    white-space: nowrap;
    box-shadow: 0 2px 6px var(--map-callout-shadow);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--duration-fast) ease;
}

.jp-callout.is-placed {
    visibility: visible;
    opacity: 1;
}

.jp-region.is-detail .jp-region__caption {
    display: none;
}

.jp-region.is-detail:hover {
    border-color: var(--color-border);
    box-shadow: none;
    cursor: default;
}

/* ==========================================================
   四、地区明细面板
   ========================================================== */

.jp-detail {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: var(--color-surface);
    box-shadow: 0 10px 30px rgba(24, 51, 88, 0.06);
    overflow: hidden;
}

.jp-detail__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-alt);
}

.jp-detail__title {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--color-primary);
}

.jp-detail__meta {
    margin: 4px 0 0;
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.jp-detail__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    flex: 1 1 auto;
    min-height: 0;
}

@media (min-width: 768px) {
    .jp-detail__body {
        grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    }
}

.jp-detail__map {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 220px;
    padding: 10px;
    background: var(--map-sea);
}

.jp-detail__map .jp-region {
    width: 100%;
    border: 0;
    box-shadow: none;
    background: transparent;
}

.jp-detail__map .jp-region__canvas {
    border-radius: 8px;
    cursor: default;
}

.jp-detail__side {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 14px 16px;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
}

@media (min-width: 768px) {
    .jp-detail__side {
        border-top: 0;
        border-left: 1px solid var(--color-border);
    }
}

.jp-detail__side-title {
    margin: 0 0 8px;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-primary);
}

.jp-detail__legend {
    margin: 0;
    padding: 0 4px 0 0;
    list-style: none;
    max-height: 340px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.jp-detail__legend-item {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px;
    padding: 5px 0;
    border-bottom: 1px dashed var(--color-border);
    font-size: 0.8125rem;
    line-height: 1.5;
}

.jp-detail__legend-item:last-child {
    border-bottom: 0;
}

.jp-detail__legend-num {
    flex: 0 0 auto;
    min-width: 18px;
    height: 18px;
    border-radius: 999px;
    background: var(--map-region-active-deep);
    color: var(--map-label-inverse);
    font-size: 10px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

.jp-detail__legend-name {
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: none;
}

.jp-detail__legend-name:hover {
    text-decoration: underline;
}

/* 悬停提示：仅显示大学名称 */
.jp-map-tip {
    position: absolute;
    z-index: 20;
    max-width: 260px;
    padding: 5px 8px;
    border-radius: 6px;
    background: var(--map-tip-bg);
    color: var(--map-tip-text);
    font-size: 0.75rem;
    line-height: 1.4;
    white-space: normal;
    transform: translate(-50%, -140%);
    pointer-events: none;
    box-shadow: 0 6px 18px rgba(24, 51, 88, 0.24);
}

.jp-map-tip[hidden] {
    display: none;
}

/* ==========================================================
   五、选中地区矩阵表 + 主要大学校徽墙（随地图选中地区实时联动）
   ========================================================== */

.uni-browse__meta {
    margin: 0 0 16px;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.jp-selected {
    display: grid;
    gap: 28px;
}

.jp-selected__panel {
    display: grid;
    gap: 24px;
}

.jp-selected__panel[hidden] {
    display: none;
}

/* --- 矩阵表：按属性（国立 / 公立 / 私立）分行、所属县分列 ---
   配色取自参考表格：标题带 #FDE9D9、国立 #F2DCDB、公立 #DAEEF3、私立 #EBF1DE，
   细网格线为深色 1px，与 Excel 版表格一致 */
.jp-matrix {
    border: 1px solid #333;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 10px rgba(24, 51, 88, 0.06);
}

.jp-matrix__scroll {
    overflow-x: auto;
    scrollbar-width: thin;
}

.jp-matrix__table {
    width: 100%;
    min-width: 680px;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 0.8125rem;
    color: #1a1a1a;
}

.jp-matrix__table th,
.jp-matrix__table td {
    padding: 8px 10px;
    border: 1px solid #333;
    text-align: center;
    vertical-align: middle;
    line-height: 1.5;
}

/* 标题行：地区名 + 数量统计（对应表格顶部标题带） */
.jp-matrix__corner {
    width: 112px;
    background: #fff;
}

.jp-matrix__title {
    background: #FDE9D9;
    color: #1a1a1a;
    font-weight: 700;
    font-size: 0.875rem;
}

.jp-matrix__title-region {
    margin-right: 10px;
    font-size: 1rem;
    letter-spacing: 0.08em;
}

.jp-matrix__title-meta {
    font-size: 0.75rem;
    font-weight: 600;
    color: #8a4b24;
}

/* 表头行：区分 | 各都道府県 */
.jp-matrix__head-row th {
    background: #fff;
    font-weight: 700;
    white-space: nowrap;
}

.jp-matrix__kubun-head,
.jp-matrix__kubun {
    width: 112px;
    background: #fff;
    font-weight: 700;
    white-space: nowrap;
}

/* 属性色带 */
.jp-matrix__row--national td { background: #F2DCDB; }
.jp-matrix__row--public td { background: #DAEEF3; }
.jp-matrix__row--private td { background: #EBF1DE; }

.jp-matrix__cell {
    word-break: break-word;
}

.jp-matrix__name {
    color: #0000ee;
    font-weight: 600;
    text-decoration: none;
}

.jp-matrix__name:hover {
    text-decoration: underline;
}

/* --- 主要大学校徽墙：资源来自各地区校徽目录，等比内嵌不变形 --- */
.jp-logo-wall__title {
    margin: 0 0 14px;
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--color-primary);
}

.jp-logo-wall__title::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 14px;
    margin-right: 8px;
    border-radius: 2px;
    background: var(--color-brand);
    vertical-align: -1px;
}

.jp-logo-wall__list {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (max-width: 991px) {
    .jp-logo-wall__list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .jp-logo-wall__list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .jp-logo-wall__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.jp-logo-wall__item {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-surface);
    overflow: hidden;
    transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}

.jp-logo-wall__item:hover {
    border-color: var(--color-brand);
    box-shadow: 0 6px 18px rgba(24, 51, 88, 0.1);
}

.jp-logo-wall__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 10px;
    text-decoration: none;
}

/* 统一横向占位框：横版校徽占比绝大多数，固定高度 + 卡片内最大宽度，
   既保证所有校徽容器尺寸一致，又给长条形校徽足够展示宽度 */
.jp-logo-wall__box {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    place-items: center;
    width: 100%;
    max-width: 240px;
    height: 120px;
    margin: 0 auto;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--color-surface-alt);
    isolation: isolate;
}

@media (max-width: 991px) {
    .jp-logo-wall__box {
        height: 108px;
    }
}

@media (max-width: 767px) {
    .jp-logo-wall__box {
        height: 100px;
    }
}

@media (max-width: 480px) {
    .jp-logo-wall__box {
        height: 92px;
        padding: 8px 10px;
    }
}

/* 等比缩放：网格轨道显式占满固定高度后，图片以 100% × 100% 铺满占位区内容盒，
   再由 object-fit: contain 按原始比例完整缩放、居中，绝不溢出或改变比例 */
.jp-logo-wall__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

/* 透明背景上的白色 / 极浅校徽：转为深色剪影，避免白底白图看不清 */
.jp-logo-wall__img.is-light-logo {
    filter: brightness(0) invert(0.22);
}

/* 浅灰 / 淡彩校徽：整体压暗并提升对比度，确保相对浅色占位框达到 WCAG 可读对比 */
.jp-logo-wall__img.is-pale-logo {
    filter: brightness(0.52) contrast(1.4) saturate(1.05);
}


.jp-logo-wall__name {
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--color-primary);
    text-align: center;
    word-break: break-word;
}

.jp-logo-wall__pref {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.jp-logo-wall__empty {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}