/* 世界地図 行った国 塗りつぶし */

#app-world {
    --wm-ocean: #dbe7f3;
    --wm-land: #f5f5f4;
    --wm-stroke: #8a8f98;
    --wm-visit: #9d83d9;   /* 訪問: ブランド紫系 */
    --wm-lived: #5b3a9e;   /* 住んだ: 濃い紫 */
    --wm-transit: #7c5ac3; /* 乗り継ぎ: 斜線の色 */
    --wm-text: #1f2937;
}
[data-bs-theme="dark"] #app-world {
    --wm-ocean: #16202e;
    --wm-land: #3a4150;
    --wm-stroke: #7d8696;
    --wm-visit: #8b6fd6;
    --wm-lived: #cbb8ff;
    --wm-transit: #b69cf0;
    --wm-text: #e5e7eb;
}

/* ---- レイアウト（map/pref と同じダッシュボード型） ---- */
.app-world-main {
    display: flex;
    flex-direction: column;
    background: var(--bs-body-bg);
}
#app-world .wm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .6rem 1rem;
    border-bottom: 1px solid var(--bs-border-color);
    flex-shrink: 0;
}
#app-world .wm-header-title { display: flex; align-items: center; min-width: 0; flex: 1; }
#app-world .wm-header-actions { flex-shrink: 0; }
#app-world .wm-counter { display: inline-flex; align-items: baseline; gap: .15rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
#app-world .wm-counter strong { font-size: 1.15rem; color: var(--bs-primary); font-weight: 800; }

/* 操作の帯（塗る種類＋国名で探す） */
#app-world .wm-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
    padding: .5rem 1rem;
    border-bottom: 1px solid var(--bs-border-color);
    background: var(--bs-tertiary-bg);
    flex-shrink: 0;
}
/* 塗る種類（402px でも4つを1行） */
#app-world .wm-modes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .375rem; flex: 1 1 100%; }
#app-world .wm-modes .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .125rem;
    padding: .35rem .25rem;
    white-space: nowrap;
    font-weight: 700;
}
#app-world .wm-modes .btn-check:not(:checked) + .btn { background: var(--bs-body-bg); }
#app-world .wm-modes .mach-mi { font-size: 1.15em; }
#app-world .wm-search { flex: 1 1 100%; min-width: 0; }

/* 検索候補（地図の上に重ねる） */
#app-world .wm-cands {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 1010; /* Leaflet のコントロール（1000）より上 */
    box-shadow: var(--bs-box-shadow);
    max-height: 60vh;
    overflow-y: auto;
}
#app-world .wm-cand-state { font-size: .8rem; padding: .1rem .5rem; }

#app-world .wm-content { flex: 1; display: flex; flex-direction: column; min-height: 0; }

/* ---- 地図 ---- */
/* スマホ縦では画面幅に合わせて低くする（世界地図は横長なので、上下に海だけが広がらないように） */
#app-world .wm-map-wrap { position: relative; flex-shrink: 0; width: 100%; height: min(60vh, 75vw); min-height: 260px; }
#app-world #map { width: 100%; height: 100%; background: var(--wm-ocean); }
#app-world .leaflet-container { font-family: inherit; }
#app-world .wm-hatch-bg { fill: var(--wm-land); }
#app-world .wm-hatch-line { fill: var(--wm-transit); }
#app-world .wm-tip { font-weight: 700; }

/* 凡例（地図の右上に重ねる） */
#app-world .wm-legend {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 600;
    display: flex;
    flex-wrap: wrap;
    gap: .2rem .65rem;
    max-width: calc(100% - 70px); /* 左上のズームボタンに重ねない */
    padding: .3rem .6rem;
    font-size: .78rem;
    color: var(--bs-body-color);
    background: rgba(var(--bs-body-bg-rgb), .92);
}
#app-world .wm-legend > span { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; }
#app-world .wm-sw { display: inline-block; width: .9rem; height: .9rem; border: 1px solid var(--wm-stroke); }
#app-world .wm-sw-0 { background: var(--wm-land); }
#app-world .wm-sw-1 { background: var(--wm-visit); }
#app-world .wm-sw-2 { background: var(--wm-lived); }
#app-world .wm-sw-3 { background: repeating-linear-gradient(45deg, var(--wm-transit) 0 3px, var(--wm-land) 3px 6px); }

/* ---- サイドバー ---- */
#app-world .wm-sidebar {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    padding: .85rem .85rem 1.5rem;
    border-top: 1px solid var(--bs-border-color);
    min-width: 0;
}
#app-world .wm-block { padding: .6rem .85rem; background: var(--bs-tertiary-bg); min-width: 0; }
#app-world .wm-block-head { font-weight: 700; font-size: .9rem; margin-bottom: .5rem; }
#app-world .wm-progress { height: 12px; background: var(--bs-secondary-bg); }
#app-world .wm-actions { display: flex; flex-direction: column; gap: .5rem; }
#app-world .wm-actions .btn-sm { white-space: nowrap; }

/* ---- 地域別の達成率 ---- */
#app-world .wm-region-stats { display: grid; gap: .5rem; }
#app-world .wm-rs-head { display: flex; justify-content: space-between; font-size: .85rem; font-weight: 700; margin-bottom: .15rem; }
#app-world .wm-rs-bar { height: 6px; background: var(--bs-secondary-bg); }
#app-world .wm-rs-fill { background: var(--wm-visit); }

/* PC: 操作の帯を1行に、地図と集計を横並び（pref と同じ 7:3） */
@media (min-width: 992px) {
    .app-world-main { height: calc(100vh - 60px); min-height: 640px; max-height: 100dvh; }
    #app-world .wm-modes { flex: 0 0 auto; width: 26rem; }
    #app-world .wm-search { flex: 1 1 16rem; max-width: 24rem; }
    #app-world .wm-content { flex-direction: row; }
    #app-world .wm-map-wrap { flex: 7; height: auto; min-width: 0; }
    #app-world .wm-sidebar {
        flex: 3;
        max-width: 480px;
        min-width: 320px;
        flex-shrink: 0;
        padding: 1rem;
        border-top: 0;
        border-left: 1px solid var(--bs-border-color);
        overflow-y: auto;
    }
}

/* ---- 国の一覧 ---- */
#app-world .wm-reg { border-bottom: 1px solid var(--bs-border-color-translucent); }
#app-world .wm-reg summary { padding: .6rem .25rem; font-weight: 700; cursor: pointer; }
#app-world .wm-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .375rem;
    padding: 0 0 .75rem;
}
@media (min-width: 768px) and (max-width: 991.98px) { #app-world .wm-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
#app-world .wm-place {
    display: flex;
    align-items: center;
    gap: .25rem;
    min-height: 44px;
    padding: .25rem .5rem;
    text-align: start;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color);
    font-size: .9rem;
    line-height: 1.25;
}
#app-world .wm-place-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
#app-world .wm-tag, #app-world .wm-state { flex: 0 0 auto; font-size: .7rem; padding: 0 .3rem; border: 1px solid currentColor; }
/* 状態: 色だけにせず「訪問」などの文字も出す */
#app-world .wm-place.wm-s1, #app-world .wm-cand-state.wm-s1 { background: var(--wm-visit); color: #1b1030; border-color: var(--wm-visit); font-weight: 700; }
#app-world .wm-place.wm-s2, #app-world .wm-cand-state.wm-s2 { background: var(--wm-lived); color: #fff; border-color: var(--wm-lived); font-weight: 700; }
[data-bs-theme="dark"] #app-world .wm-place.wm-s2, [data-bs-theme="dark"] #app-world .wm-cand-state.wm-s2 { color: #1b1030; }
#app-world .wm-place.wm-s3, #app-world .wm-cand-state.wm-s3 {
    background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--wm-transit) 35%, transparent) 0 4px, transparent 4px 8px);
    border: 2px dashed var(--wm-transit);
    font-weight: 700;
}