/* ===== T-force 工事マップ（都道府県方式 v1.14〜 / ダーク地図台 v1.15〜） ===== */
.koji-map-section { margin: 0 0 var(--sec-gap, 64px); }
.koji-map-head { margin-bottom: 18px; }
.koji-map-desc { margin: 0; font-size: 13px; color: #7d7169; }

/* --- 検索UI --- */
.koji-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.koji-search {
  flex: 1 1 220px; min-width: 0;
  padding: 9px 16px; font-size: 13px; font-family: inherit;
  border: 1px solid #d8d2c9; border-radius: 999px; background: #fff;
}
.koji-pref {
  padding: 9px 14px; font-size: 13px; font-family: inherit;
  border: 1px solid #d8d2c9; border-radius: 999px; background: #fff;
}
.koji-status { display: flex; gap: 4px; }
.koji-status button {
  padding: 9px 16px; font-size: 13px; cursor: pointer; font-family: inherit;
  border: 1px solid #d8d2c9; border-radius: 999px; background: #fff; color: inherit;
  transition: background .2s, color .2s, border-color .2s;
}
.koji-status button.is-active { background: var(--main, #591719); border-color: var(--main, #591719); color: #fff; }
.koji-count { font-size: 12px; color: #7d7169; }

/* --- 地図＋パネル --- */
.koji-map-wrap {
  display: grid; grid-template-columns: 1fr 360px;
  border: 1px solid #d8d2c9; background: #fff; min-height: 560px;
  box-shadow: 0 20px 50px rgba(59,14,16,.10);
}
/* 地図台：メインカラーの濃色（v1.15〜） */
.koji-map-stage {
  position: relative; padding: 24px; min-width: 0; overflow: hidden;
  display: grid; place-items: center;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(180deg, #4a1315 0%, var(--main-deep, #2d0a0c) 100%);
}
/* 等高線風のテクスチャ（濃さは --koji-contour で調整。v1.15.1 で「薄い」= .2 に） */
.koji-map-stage::before {
  content: ""; position: absolute; inset: 0; opacity: var(--koji-contour, .2); pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'><g fill='none' stroke='%23b58a86' stroke-width='.8'><path d='M-20 120c60-40 110-60 170-30s90 70 190 40'/><path d='M-20 150c60-40 115-65 175-35s95 75 185 45'/><path d='M-20 180c60-40 120-70 180-40s100 80 180 50'/><path d='M-20 210c60-40 125-75 185-45s105 85 175 55'/><path d='M-20 60c50-30 100-40 160-10s100 60 200 20'/><path d='M-20 30c50-30 105-45 165-15s105 65 195 25'/><path d='M-20 270c60-40 130-80 190-50s110 90 170 60'/><path d='M-20 300c60-40 135-85 195-55s115 95 165 65'/></g></svg>");
  background-size: 320px 320px;
}
.koji-svg { position: relative; width: 100%; max-width: 480px; max-height: 560px; height: auto; display: block; overflow: hidden; }
.koji-svg.is-region { max-width: 540px; }
.koji-okinawa-frame { fill: none; stroke: #a07f7d; stroke-width: .5; stroke-dasharray: 2 1.5; }
.koji-pref-shadow { fill: #1a0506; stroke: none; opacity: .8; }
.koji-pref { fill: #6b4a49; stroke: #8f6b69; stroke-width: .35; stroke-linejoin: round; transition: fill .3s, stroke .3s; outline: none; }
.koji-pref.has-works { fill: #d9b878; stroke: #f4e4c0; stroke-width: .5; cursor: pointer; }
.koji-pref.has-works:hover, .koji-pref.has-works:focus-visible { fill: #e8cc93; }
.koji-pref.is-selected, .koji-pref.is-selected:hover { fill: #fff; stroke: var(--gold, #C9A15F); }

/* ラベル（県名＋件数） */
.koji-label { cursor: pointer; outline: none; }
.koji-label rect { fill: rgba(43,10,12,.92); stroke: var(--gold, #C9A15F); stroke-width: .3; transition: fill .2s; }
.koji-label text { font-family: var(--sans, sans-serif); font-weight: 500; fill: #fff; text-anchor: middle; letter-spacing: .02em; pointer-events: none; }
.koji-label tspan { alignment-baseline: baseline; dominant-baseline: auto; }
.koji-label tspan.n { font-family: var(--serif, serif); font-weight: 700; fill: var(--gold-soft, #E5CFA0); }
.koji-label:hover rect, .koji-label:focus-visible rect { fill: rgba(89,23,25,.95); }
.koji-label.is-selected rect { fill: var(--gold, #C9A15F); stroke: #fff; }
.koji-label.is-selected text, .koji-label.is-selected tspan.n { fill: var(--main-deep, #3B0E10); }

/* ツールチップ */
.koji-tip {
  position: absolute; z-index: 5; pointer-events: none; opacity: 0; transition: opacity .15s;
  background: #fff; color: #2A2022; font-size: 12px; line-height: 1.5; padding: 7px 12px; border-radius: 4px; white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0,0,0,.35); transform: translate(-50%, calc(-100% - 12px));
}
.koji-tip.is-on { opacity: 1; }
.koji-tip small { display: block; color: var(--gold, #C9A15F); font-size: 10px; letter-spacing: .1em; }
.koji-tip::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; background: #fff; transform: translateX(-50%) rotate(45deg); }

/* 凡例・サマリー・方位 */
.koji-legend {
  position: absolute; left: 12px; bottom: 10px; z-index: 2;
  display: flex; gap: 14px; padding: 6px 12px; font-size: 11px; color: #fff;
  background: rgba(43,10,12,.85); border-radius: 6px;
}
.koji-dot { display: inline-block; width: 12px; height: 12px; border-radius: 2px; margin-right: 6px; vertical-align: -2px; }
.koji-dot--has { background: #d9b878; }
.koji-dot--sel { background: #fff; }
.koji-stat { position: absolute; left: 16px; top: 14px; z-index: 2; display: flex; gap: 18px; }
.koji-stat div { font-size: 10px; letter-spacing: .15em; color: var(--gold-soft, #E5CFA0); line-height: 1.3; }
.koji-stat strong { display: block; font-family: var(--serif, serif); font-size: 22px; font-weight: 500; color: #fff; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.koji-compass { position: absolute; right: 16px; top: 14px; width: 34px; height: 34px; z-index: 2; color: var(--gold-soft, #E5CFA0); opacity: .95; }
.koji-compass svg { width: 100%; height: 100%; display: block; }
.koji-compass .koji-compass-needle { fill: #fff; opacity: .85; }
.koji-compass .koji-compass-n { fill: var(--gold, #C9A15F); }
.koji-compass text { fill: var(--gold-soft, #E5CFA0); }
.koji-scale { position: absolute; right: 16px; bottom: 14px; z-index: 2; font-family: var(--serif, serif); font-size: 10px; letter-spacing: .25em; color: var(--gold-soft, #E5CFA0); }

/* --- 右パネル --- */
.koji-panel { border-left: 1px solid #d8d2c9; background: #fff; display: flex; flex-direction: column; min-width: 0; }
.koji-panel-head { padding: 20px 22px 14px; border-bottom: 1px solid #E2D9D7; background: linear-gradient(180deg, #fff 0%, #faf7f3 100%); }
.koji-panel-pref { margin: 0; font-family: var(--serif, serif); font-size: 22px; letter-spacing: .08em; line-height: 1.3; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.koji-panel-pref small { font-family: var(--sans, sans-serif); font-size: 11px; letter-spacing: .25em; color: var(--gold, #C9A15F); }
.koji-panel-sub { margin: 4px 0 0; font-size: 12px; color: #8A7F80; }
.koji-panel-empty { padding: 40px 22px; font-size: 13px; color: #8A7F80; text-align: center; line-height: 2; }
.koji-panel-empty strong { display: block; font-family: var(--serif, serif); font-size: 16px; color: #2A2022; letter-spacing: .1em; font-weight: 500; }
.koji-list { list-style: none; margin: 0; padding: 0; overflow: auto; flex: 1 1 auto; }
.koji-list a {
  position: relative; display: grid; grid-template-columns: 84px 1fr; gap: 14px; align-items: center;
  padding: 14px 22px 22px; border-bottom: 1px solid #E2D9D7; transition: background .25s;
}
.koji-list a:hover { background: #F7F4F2; }
.koji-list-thumb { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 3px; background: var(--main-tint, #7A2A2C); }
.koji-list-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.koji-noimg { display: grid; place-items: center; height: 100%; color: rgba(255,255,255,.55); font-family: var(--serif, serif); font-size: 9px; letter-spacing: .15em; }
.koji-list-body { min-width: 0; display: block; }
.koji-list-title { display: block; font-size: 13px; font-weight: 500; line-height: 1.5; }
.koji-list-meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: 11px; color: #8A7F80; margin-top: 4px; }
.koji-rank {
  position: absolute; left: 8px; top: 8px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--main, #591719); color: #fff; font-size: 10px; display: grid; place-items: center;
  font-variant-numeric: tabular-nums;
}
.koji-list-go { position: absolute; right: 22px; bottom: 10px; font-size: 11px; color: var(--main, #591719); }
.koji-badge { font-size: 10px; padding: 1px 9px; border-radius: 999px; }
.koji-badge--active { background: #FAECE7; color: #993C1D; }
.koji-badge--done { background: #E1F5EE; color: #085041; }
/* 未選択時：都道府県別ランキング */
.koji-summary-head { margin: 0; padding: 16px 22px 8px; font-size: 11px; letter-spacing: .15em; color: #8A7F80; border-bottom: 1px solid #E2D9D7; }
.koji-summary { list-style: none; margin: 0; padding: 0; overflow: auto; flex: 1 1 auto; }
.koji-summary a { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; padding: 12px 22px; border-bottom: 1px solid #E2D9D7; font-size: 13px; transition: background .25s; }
.koji-summary a:hover { background: #F7F4F2; }
.koji-summary-n { font-family: var(--serif, serif); font-size: 15px; color: var(--main, #591719); font-variant-numeric: tabular-nums; }
.koji-summary-n small { font-family: var(--sans, sans-serif); font-size: 10px; color: #8A7F80; margin-left: 2px; }
.koji-summary-bar { grid-column: 1 / -1; height: 3px; background: #E2D9D7; margin-top: -6px; }
.koji-summary-bar i { display: block; height: 100%; background: var(--main-tint, #7A2A2C); }
.koji-panel-clear { margin: 0; padding: 10px 22px 14px; font-size: 12px; text-align: right; }
.koji-panel-clear a { color: #8A7F80; }
.koji-panel-clear a:hover { color: var(--main, #591719); }
.koji-panel-more { margin: 0; padding: 12px 22px 16px; font-size: 12px; text-align: right; border-top: 1px solid #E2D9D7; }
.koji-panel-more a { color: var(--main, #591719); border-bottom: 1px solid var(--main, #591719); }

/* --- スマホ・タブレット --- */
@media (max-width: 900px) {
  .koji-map-wrap { grid-template-columns: 1fr; min-height: 0; }
  .koji-map-stage { padding: 56px 12px 44px; }
  .koji-stat { left: 12px; top: 12px; }
  .koji-compass { right: 12px; top: 10px; }
  .koji-panel { border-left: 0; border-top: 1px solid #d8d2c9; }
  .koji-list { max-height: none; }
}
@media (max-width: 640px) {
  .koji-search { min-width: 100%; }
  .koji-pref { flex: 1 1 auto; }
  .koji-svg { max-width: 100%; }
}