/* =====================================================
   japan.css — 全国モード（japan.html）専用スタイル

   ・読み込むのは japan.html だけ。index.html（有田地方版・和歌山県版）は
     一切読み込まないため、既存ページの表示には影響しない。
   ・共通の見た目は css/style.css をそのまま使い、ここでは
     テーマ色の上書きと、タイル地図・都道府県リストの追加分のみを書く。
   ===================================================== */

/* ---------- テーマ色（全国版＝エメラルド） ----------
   有田地方版＝シアン / 和歌山県版＝バイオレット と一目で区別するための色。
   警報の赤・注意の黄・特別警報の紫は防災上の意味を持つため据え置く。 */
body.page-japan,
body[data-area="japan"] {
    --theme-rgb: 0, 229, 160;
    --bg-primary: #001510;
    --bg-panel: rgba(2, 22, 18, 0.92);
    --bg-panel-hover: rgba(4, 36, 29, 0.96);
    --text-primary: #e2fff5;
    --text-secondary: rgba(226, 255, 245, 0.58);
    --text-muted: rgba(226, 255, 245, 0.58);

    /* :root の派生変数は :root の --theme-rgb で確定するため、ここで同じ式を再定義する
       （和歌山県版と同じ対処。省略するとパネル枠だけシアンのまま残る） */
    --color-cyan: rgb(var(--theme-rgb));
    --color-cyan-dim: rgba(var(--theme-rgb), 0.28);
    --color-cyan-glow: rgba(var(--theme-rgb), 0.12);
    --border-panel: 1px solid rgba(var(--theme-rgb), 0.22);
    --shadow-panel: 0 0 20px rgba(var(--theme-rgb), 0.10), inset 0 0 20px rgba(var(--theme-rgb), 0.03);
    --shadow-panel-hover: 0 0 35px rgba(var(--theme-rgb), 0.22), inset 0 0 30px rgba(var(--theme-rgb), 0.06);

    /* 警報レベルの色（地図・リスト共通） */
    --jp-lv3: #b14cff;   /* 特別警報 */
    --jp-lv2: #ff3b30;   /* 警報 */
    --jp-lv1: #ffd60a;   /* 注意報 */
    --jp-lv0: rgba(255, 255, 255, 0.10);  /* 発表なし */
}

/* ---------- 全国モードのパネル配置（PC） ----------
   全国版の枠は「地図」と「都道府県別 状況」の2つだけ。
   左に地図を大きく、右に一覧を画面の高さいっぱいに並べる。
   （style.css の 4列×2行のレイアウトを、このページだけ 2列×1行に置き換える）

   ★注意: style.css には「769〜1199px では position:relative / height:auto の
     2列レイアウトに切り替える」ルールがある（8枠の index.html 用）。
     全国版は2枠なのでそれに乗ると枠が小さくなり、フッターまで前に出てしまう。
     そのため位置・高さ・はみ出しの指定まで含めてここで打ち消す。 */
@media (min-width: 769px) {
    body.page-japan .dashboard-grid,
    body[data-area="japan"] .dashboard-grid {
        /* style.css の中間幅ルールを打ち消し、画面いっぱいの固定レイアウトに戻す */
        position: fixed;
        top: var(--header-height);
        left: 0;
        right: 0;
        bottom: 0;
        height: auto;
        overflow: hidden;
        grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
        grid-template-rows: 1fr;
        grid-auto-rows: auto;
        grid-template-areas: "map list";
    }
    body.page-japan #panel-jpmap,
    body[data-area="japan"] #panel-jpmap  { grid-area: map;  }
    body.page-japan #panel-jplist,
    body[data-area="japan"] #panel-jplist { grid-area: list; }

    /* PCではダッシュボードが画面いっぱいに固定されるため、フッター（免責・著作権）は
       その裏に隠れる。枠のすき間から文字が覗いて「コピーライトが上にズレている」ように
       見えるのを防ぐため、PCでは非表示にする。
       （免責事項はヘッダーのリンクから開ける。版数はヘッダーに出ている） */
    body.page-japan > footer,
    body[data-area="japan"] > footer {
        display: none;
    }
}

/* =====================================================
   タイル地図
   ===================================================== */
.jp-map-wrap {
    position: relative;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
}

/* PCはパネルの高さが決まっている（画面内に収まるダッシュボード）ので、
   地図は「パネルの残りの高さ」に合わせて、正方形のままできるだけ大きく表示する。
   下に凡例を置くぶん（約34px）を差し引いて高さを決める。 */
@media (min-width: 769px) {
    #panel-jpmap .panel-body {
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow-y: auto;
    }
    .jp-map-wrap {
        flex: 0 0 auto;
        align-self: center;
        height: min(calc(100% - 34px), 820px);
        width: auto;
        aspect-ratio: 1 / 1;
        max-width: 100%;
        margin: 0;
    }
    .jp-map-grid {
        height: 100%;
        width: 100%;
        min-width: 0;
    }
}

/* 県名の字を「地図の幅」に合わせて伸び縮みさせるための基準 */
.jp-map-wrap {
    container-type: inline-size;
}

/* 地図が小さくなってもマスが正方形を保てるよう、タイルは縮小を許可する */
.jp-map-grid > .jp-tile {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

/* 地図の大きさに合わせて県名の字も伸び縮みさせる（対応外のブラウザは固定値のまま） */
@supports (font-size: 1cqi) {
    .jp-tile { font-size: clamp(6px, 4cqi, 12px); }
    .jp-tile-quake { font-size: clamp(5px, 2.8cqi, 9px); }
}

/* 11列×11行の格子。マスは正方形に近づける（列数/行数で縦横比を決める）
   ※ japan-map.js の JP_GRID_COLS / JP_GRID_ROWS と必ず同じ数にすること */
.jp-map-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(11, 1fr);
    grid-template-rows: repeat(11, 1fr);
    gap: 3px;
    aspect-ratio: 1 / 1;
}

.jp-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(var(--theme-rgb), 0.35);
    border-radius: 3px;
    background: var(--jp-lv0);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.1;
    letter-spacing: -0.5px;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease;
}

.jp-tile:hover {
    transform: scale(1.12);
    z-index: 5;
    box-shadow: 0 0 12px rgba(var(--theme-rgb), 0.6);
}

.jp-tile-name {
    white-space: nowrap;
}

/* タイル内の震度バッジ（右下に小さく） */
.jp-tile-quake {
    font-size: 8px;
    font-weight: 700;
    color: #fff;
    background: rgba(255, 59, 48, 0.85);
    border-radius: 2px;
    padding: 0 2px;
    margin-top: 1px;
}

/* ---- 警報レベルの塗り ---- */
.jp-tile.jp-w1 { background: rgba(255, 214, 10, 0.85);  color: #1a1400; border-color: var(--jp-lv1); }
.jp-tile.jp-w2 { background: rgba(255, 59, 48, 0.90);   color: #fff;    border-color: var(--jp-lv2); }
.jp-tile.jp-w3 {
    background: rgba(177, 76, 255, 0.95);
    color: #fff;
    border-color: var(--jp-lv3);
    animation: jp-blink 1.1s ease-in-out infinite;
}

/* ---- 地震・津波は枠線で表す（塗りは警報のまま残す） ---- */
.jp-tile.jp-quake     { outline: 2px solid #ff3b30; outline-offset: -2px; }
.jp-tile.jp-tsunami-a { outline: 2px solid #ff9f0a; outline-offset: -2px; }
.jp-tile.jp-tsunami-w {
    outline: 3px solid #ff2020;
    outline-offset: -3px;
    animation: jp-blink 0.9s ease-in-out infinite;
}

@keyframes jp-blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.55; }
}

/* ---- 台風マーカー（地図の上に重ねる簡易表示） ---- */
.jp-typhoon-marker {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 8;
}

.jp-typhoon-eye {
    font-size: 26px;
    line-height: 1;
    animation: jp-spin 6s linear infinite;
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.7));
}

.jp-typhoon-no {
    margin-top: -2px;
    padding: 0 3px;
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    color: #fff;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 2px;
}

@keyframes jp-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .jp-typhoon-eye,
    .jp-tile.jp-w3,
    .jp-tile.jp-tsunami-w { animation: none; }
}

/* =====================================================
   地図の中に置く小枠（凡例・台風情報）
   ・北海道の左〜下の空きマスを使う。地図の外に置かないぶん地図を大きくできる
   ・置き場所は grid-column / grid-row で指定（タイルと重ならない位置にすること）
   ===================================================== */
.jp-inmap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 4px 5px;
    border: 1px solid rgba(var(--theme-rgb), 0.25);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.25);
    font-family: var(--font-mono);
    line-height: 1.3;
    overflow: hidden;
}

/* 台風情報: 左上の空きマス（2〜4行目・1〜5列目） */
.jp-inmap-typhoon {
    grid-column: 1 / 6;
    grid-row: 2 / 5;
    /* 枠が小さいので字は小さめ。はみ出す場合はこの枠だけスクロールする */
    font-size: 8px;
    line-height: 1.25;
    color: var(--text-secondary);
    overflow-y: auto;
    justify-content: flex-start;
}

.jp-inmap-title {
    font-size: 9px;
    color: rgb(var(--theme-rgb));
    letter-spacing: 1px;
    border-bottom: 1px solid rgba(var(--theme-rgb), 0.25);
    margin-bottom: 2px;
}

/* 地図の外に置いていた頃の余白・文字サイズを打ち消す（同じclassを使い回しているため） */
.jp-inmap .jp-typhoon-info {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: inherit;
}

.jp-inmap .jp-ty-item {
    display: block;
}

.jp-inmap .jp-ty-badge,
.jp-inmap .jp-ty-detail {
    display: block;
}

.jp-ty-off {
    display: block;
    color: var(--text-muted);
}

/* ---- 凡例（地図の下） ---- */
.jp-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 10px;
    margin-top: 10px;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-secondary);
}

.jp-legend span.jp-lg {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.jp-legend i {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    font-style: normal;
}

.jp-lg-3 i { background: var(--jp-lv3); }
.jp-lg-2 i { background: var(--jp-lv2); }
.jp-lg-1 i { background: var(--jp-lv1); }
.jp-lg-0 i { background: var(--jp-lv0); }
.jp-lg-q i { background: transparent; outline: 2px solid #ff3b30; outline-offset: -2px; }
.jp-lg-t i { background: transparent; outline: 2px solid #ff9f0a; outline-offset: -2px; }

/* ---- 台風の文字情報（地図の下） ---- */
.jp-typhoon-info {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--color-cyan-dim);
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-secondary);
}

.jp-ty-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
}

.jp-ty-badge {
    color: #ffd60a;
    font-weight: 700;
}

.jp-ty-name { color: var(--text-primary); }

/* =====================================================
   都道府県別リスト
   ===================================================== */
.jp-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.jp-row {
    display: grid;
    grid-template-columns: 6px 76px 1fr;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.03);
    font-family: var(--font-mono);
    font-size: calc(11px * var(--content-scale, 1));
    transition: background .15s ease;
}

.jp-row-bar {
    display: block;
    width: 6px;
    height: 100%;
    min-height: 16px;
    border-radius: 2px;
    background: var(--jp-lv0);
}

.jp-row.jp-w1 .jp-row-bar { background: var(--jp-lv1); }
.jp-row.jp-w2 .jp-row-bar { background: var(--jp-lv2); }
.jp-row.jp-w3 .jp-row-bar { background: var(--jp-lv3); }

.jp-row.jp-w2 { background: rgba(255, 59, 48, 0.10); }
.jp-row.jp-w3 { background: rgba(177, 76, 255, 0.14); }
.jp-row.jp-quake,
.jp-row.jp-tsunami-w { box-shadow: inset 0 0 0 1px rgba(255, 59, 48, 0.55); }

.jp-row-name  { color: var(--text-primary); white-space: nowrap; }
.jp-row-state { color: var(--text-secondary); }

/* タイルを押したときに一覧の該当行を光らせる */
.jp-row.is-focus {
    background: rgba(var(--theme-rgb), 0.25);
}

/* 取得失敗の注意書き（「発表なし」と誤解させないための表示） */
.jp-err {
    margin-bottom: 6px;
    padding: 6px 8px;
    border: 1px solid rgba(255, 159, 10, 0.6);
    border-radius: 3px;
    background: rgba(255, 159, 10, 0.12);
    font-family: var(--font-mono);
    font-size: calc(11px * var(--content-scale, 1));
    line-height: 1.6;
    color: #ffd60a;
}

.jp-err a { color: #ffd60a; }

.jp-none {
    padding: 10px;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-secondary);
}

/* 発表なしの県はまとめて末尾に小さく置く */
.jp-calm {
    margin-top: 6px;
    padding: 6px;
    border-top: 1px dashed var(--color-cyan-dim);
    font-family: var(--font-mono);
    font-size: 10px;
    line-height: 1.6;
    color: var(--text-muted);
}

.jp-calm-label {
    display: block;
    margin-bottom: 2px;
    color: var(--text-secondary);
}

/* =====================================================
   スマホ
   ===================================================== */
@media (max-width: 768px) {
    .jp-map-wrap { max-width: 100%; }

    /* 画面が狭いと県名2文字が潰れるため、少しだけ字を詰める */
    .jp-tile { font-size: 9px; letter-spacing: -1px; }
    .jp-tile-quake { font-size: 7px; }

    .jp-row { grid-template-columns: 5px 68px 1fr; gap: 6px; }

    /* スマホでの枠の並び順: 地図 → 都道府県別 状況 */
    body.page-japan #panel-jpmap,
    body[data-area="japan"] #panel-jpmap  { grid-area: auto !important; order: 1; }
    body.page-japan #panel-jplist,
    body[data-area="japan"] #panel-jplist { grid-area: auto !important; order: 2; }
}

/* 非常に狭い端末では県名を隠して番号だけにする（凡例は下のリストで確認できる） */
@media (max-width: 360px) {
    .jp-tile { font-size: 8px; letter-spacing: -1.5px; }
}