/* v2 の投稿画面（/v2/post/）。規則はすべて body.post-page の中（2026-10-05）。
   入力欄は v2/css/member.css の入力欄（高さ 44px・角丸 8・16px）にそろえる（member.css は読み込まない）。
   色は v2 のトークン：破断面＝--fracture の破線、流下経路＝--runout の実線、範囲＝--polygon。 */
.post-page {
  display: flex;
  flex-direction: column;
  height: auto;
  min-height: 100%;
  background: var(--snow, #f4f6f7);
}
.post-page .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.post-page .post-main {
  position: relative;
  flex: 1 0 auto;
  padding: 20px 16px 40px;
}
.post-page .post-wrap {
  display: grid;
  gap: 14px;
  width: min(720px, 100%);
  margin: 0 auto;
}
.post-page[data-step="3"] .post-wrap {
  width: min(1100px, 100%);
}
.post-page .post-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.post-page .post-head h1 {
  margin: 0;
  font-size: 22px;
  color: var(--ink);
}
.post-page .post-restart,
.post-page .post-link {
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--graphite);
  font: inherit;
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
}
.post-page .post-restart-ask {
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid #fecdca;
  border-radius: 8px;
  background: #fef3f2;
}
.post-page .post-restart-ask p {
  margin: 0;
  font-size: 13px;
  color: #b42318;
}
.post-page .post-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.post-page .post-note {
  margin: 0;
  padding: 8px 12px;
  border-left: 3px solid var(--link);
  background: #eef5fb;
  font-size: 13px;
  color: var(--graphite);
}
.post-page #review-kept[hidden] {
  display: none;
}
.post-page #review-kept p {
  margin: 0;
}
.post-page #review-kept ul {
  margin: 4px 0 0;
  padding-left: 20px;
}
/* フィールドメモからの引き継ぎの案内（?from=memo） */
.post-page .post-handoff {
  display: grid;
  gap: 6px;
  padding: 10px 14px;
  border-left: 3px solid var(--link);
  background: #eef5fb;
  font-size: 13px;
  line-height: 1.7;
  color: var(--graphite);
}
.post-page .post-handoff[hidden] {
  display: none;
}
.post-page .post-handoff-title {
  margin: 0;
  font-weight: 700;
  color: var(--ink);
}
.post-page .post-handoff-lead {
  margin: 0;
}
.post-page .post-handoff-list {
  margin: 0;
  padding-left: 1.3em;
}
.post-page .btn-danger {
  border: 0;
  background: #b42318;
  color: #fff;
}
.post-page .btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 段の表示：大きな丸（36px）の下にラベル・丸の間を線でつなぐ・済んだ段はチェック（2026-10-06・旧画面と同じ形） */
.post-page .post-steps {
  display: flex;
  margin: 0;
  padding: 4px 0 0;
  list-style: none;
}
.post-page .post-steps li {
  position: relative;
  display: grid;
  flex: 1;
  justify-items: center;
  align-content: start;
  gap: 6px;
  min-width: 0;
  padding: 0 2px;
}
.post-page .post-steps li::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 17px;
  left: -50%;
  width: 100%;
  height: 2px;
  background: var(--rule);
  transition: background 0.4s;
}
.post-page .post-steps li:first-child::before,
.post-page .post-steps li[hidden] + li::before {
  display: none;
}
.post-page .post-steps li.is-done::before,
.post-page .post-steps li.is-current::before {
  background: var(--ink);
}
.post-page .post-steps .dot {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 2px solid var(--rule);
  border-radius: 50%;
  background: var(--paper);
  color: var(--mist);
  font-family: var(--data);
  font-size: 14px;
  font-weight: 600;
  transition:
    background 0.3s,
    border-color 0.3s,
    color 0.3s,
    box-shadow 0.3s;
}
.post-page .post-steps li.is-current .dot {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
  box-shadow: 0 0 0 5px rgba(17, 26, 34, 0.08);
}
.post-page .post-steps li.is-done .dot {
  border-color: var(--ink);
  color: var(--ink);
}
.post-page .post-steps li.is-done .dot .num {
  display: none;
}
.post-page .post-steps li.is-done .dot::after {
  content: "";
  width: 10px;
  height: 5px;
  border-bottom: 2px solid var(--ink);
  border-left: 2px solid var(--ink);
  transform: rotate(-45deg) translate(1px, -2px);
}
.post-page .post-steps .lbl {
  max-width: 100%;
  overflow: hidden;
  font-size: 12px;
  line-height: 1.3;
  color: var(--mist);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.post-page .post-steps li.is-current .lbl {
  font-weight: 700;
  color: var(--ink);
}
.post-page .post-steps li.is-done .lbl {
  color: var(--graphite);
}
@media (max-width: 560px) {
  .post-page .post-steps li:not(.is-current) .lbl {
    visibility: hidden;
  }
  /* 今の段のラベルは、丸の幅（約 70px）を越えても切らない */
  .post-page .post-steps li.is-current .lbl {
    max-width: none;
    overflow: visible;
    text-overflow: clip;
  }
}

/* カード・入力欄 */
.post-page .post-card {
  display: grid;
  gap: 14px;
  padding: 22px 22px 24px;
  background: rgba(255, 255, 255, 0.93);
  border: 1px solid var(--rule);
  border-radius: 12px;
}
.post-page .post-card[hidden] {
  display: none;
}
.post-page .post-card h2 {
  margin: 0;
  font-size: 18px;
  color: var(--ink);
}
.post-page .post-lead,
.post-page .post-help,
.post-page .post-status {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--graphite);
}
.post-page .post-help {
  font-size: 12px;
}
.post-page .post-fields {
  display: grid;
  gap: 14px;
}
.post-page .post-field {
  display: grid;
  gap: 6px;
}
.post-page .post-field[hidden] {
  display: none;
}
.post-page .post-field label,
.post-page .post-label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}
.post-page .post-field .fn {
  min-width: 1.4em;
  font-family: var(--data);
  font-size: 11px;
  font-weight: 500;
  color: var(--mist);
}
.post-page .post-field .post-req {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  color: var(--r24);
}
.post-page .post-field .post-req.is-optional {
  font-weight: 500;
  color: var(--mist);
}
.post-page .post-field input:not([type="range"]):not([type="checkbox"]),
.post-page .post-field select,
.post-page .post-field textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
}
.post-page .post-field textarea {
  resize: vertical;
}
.post-page .post-field input:focus,
.post-page .post-field select:focus,
.post-page .post-field textarea:focus {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}
/* 「時刻が分からない」のチェック・深さの単位（cm）の表示 */
.post-page .post-field label.post-check {
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-weight: 500;
  cursor: pointer;
}
.post-page .post-check input[type="checkbox"] {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--ink);
}
.post-page .post-unit-wrap {
  position: relative;
}
.post-page .post-unit-wrap input {
  padding-right: 48px;
}
.post-page .post-unit-wrap .post-unit {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  font-family: var(--data);
  font-size: 14px;
  color: var(--graphite);
  pointer-events: none;
}
.post-page .post-field input:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.post-page .post-group {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 14px 14px 16px;
  border: 1px solid var(--rule);
  border-radius: 10px;
}
.post-page .post-group legend {
  padding: 0 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}
/* 気温：大きな数字・目盛り・早押し（旧画面の形）。触った時だけ記録する */
.post-page .post-temp {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--wash);
}
.post-page .temp-cur {
  text-align: center;
}
.post-page .temp-val {
  display: block;
  font-family: var(--data);
  font-size: 2.2rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.post-page .temp-hint {
  min-height: 1.5em;
  margin: 0;
  font-size: 12px;
  color: var(--graphite);
}
.post-page .temp-scale {
  display: flex;
  justify-content: space-between;
  font-family: var(--data);
  font-size: 11px;
  color: var(--mist);
}
.post-page .temp-scale b {
  color: var(--ink);
}
.post-page .post-temp input[type="range"] {
  width: 100%;
  height: 6px;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 4px;
  background: linear-gradient(to right, var(--rseason) 0%, var(--link) 35%, var(--wash) 48%, var(--wash) 52%, var(--r7) 65%, var(--r24) 100%);
  cursor: pointer;
}
.post-page .post-temp input[type="range"]::-webkit-slider-thumb {
  width: 22px;
  height: 22px;
  -webkit-appearance: none;
  appearance: none;
  border: 3px solid var(--paper);
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 1px 4px rgba(17, 26, 34, 0.3);
}
.post-page .post-temp input[type="range"]::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border: 3px solid var(--paper);
  border-radius: 50%;
  background: var(--ink);
}
.post-page .temp-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.post-page .temp-chip {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.post-page .post-link {
  justify-self: start;
}
.post-page .post-error {
  margin: 0;
  padding: 8px 12px;
  border-left: 3px solid #b42318;
  background: #fef3f2;
  color: #b42318;
  font-size: 13px;
}
.post-page .post-error[hidden] {
  display: none;
}
.post-page .post-error ul {
  margin: 4px 0 0;
  padding-left: 18px;
}
.post-page .post-error .btn {
  margin-top: 8px;
}
.post-page .post-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 4px;
}
.post-page .post-nav .btn {
  min-height: 46px;
  min-width: 120px;
}
.post-page .post-nav .btn-primary {
  min-width: 220px;
}
@media (max-width: 560px) {
  .post-page .post-nav {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .post-page .post-nav .btn {
    width: 100%;
    min-width: 0;
  }
  .post-page .post-nav-spacer {
    display: none;
  }
}

/* 1 投稿のしかた */
.post-page .post-choices {
  display: grid;
  gap: 10px;
}
.post-page .post-choice {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.post-page .post-choice[hidden] {
  display: none;
}
.post-page .post-choice strong {
  font-size: 15px;
}
.post-page .post-choice span {
  font-size: 13px;
  line-height: 1.6;
  color: var(--graphite);
}
.post-page .post-choice.is-selected {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
  background: var(--snow);
}

/* 3 地図：PC はページの中・高さ 70vh。スマホ（幅 768px 以下）は全画面 */
.post-page .map-top {
  display: grid;
  gap: 4px;
}
.post-page .map-sub {
  margin: 0;
  font-family: var(--data);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--mist);
}
.post-page .map-instruction {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--graphite);
}
.post-page .map-stage {
  position: relative;
  border: 1px solid var(--rule);
  border-radius: 10px;
  overflow: hidden;
}
.post-page .map-canvas {
  height: 70vh;
  min-height: 420px;
  background: var(--wash);
}
/* いま描いている線をひと目で（2026-10-06）：地図の枠をその線の色の 2px に・見出しの左に線の見本・「次へ」をその色に・
   描いていない線と点を薄く。色は v2 のトークン（発生位置と範囲＝--polygon・流下経路＝--runout・破断面＝--fracture） */
.post-page[data-sub="location"],
.post-page[data-sub="polygon"] {
  --cur-line: var(--polygon);
}
.post-page[data-sub="runout"] {
  --cur-line: var(--runout);
}
.post-page[data-sub="fracture"] {
  --cur-line: var(--fracture);
}
.post-page[data-step="3"] .map-stage {
  border: 2px solid var(--cur-line, var(--rule));
  transition: border-color 0.3s;
}
.post-page .map-sub-line {
  color: var(--cur-line, var(--mist));
}
.post-page .line-swatch {
  margin-right: 8px;
  vertical-align: -3px;
}
.post-page .line-swatch * {
  display: none;
  stroke-linecap: round;
}
.post-page .sw-run {
  stroke: var(--runout);
  stroke-width: 3;
}
.post-page .sw-frac {
  stroke: var(--fracture);
  stroke-width: 3;
  stroke-dasharray: 7 5;
}
.post-page .sw-loc {
  fill: var(--polygon);
  stroke: #fff;
  stroke-width: 2;
}
.post-page .sw-poly {
  fill: var(--polygon);
  fill-opacity: 0.2;
  stroke: var(--polygon);
  stroke-width: 1.5;
}
.post-page[data-sub="runout"] .sw-run,
.post-page[data-sub="fracture"] .sw-frac,
.post-page[data-sub="location"] .sw-loc,
.post-page[data-sub="polygon"] .sw-poly {
  display: inline;
}
.post-page[data-sub="view"] .line-swatch {
  display: none;
}
.post-page[data-step="3"] :is(#map-next, #map-generate) {
  border-color: var(--cur-line, var(--ink));
  background: var(--cur-line, var(--ink));
}
/* Leaflet の層には map-steps.js が class を当てている（pm-loc・pm-runout・pm-fracture・pm-poly） */
.post-page #post-map :is(.pm-loc, .pm-runout, .pm-fracture, .pm-poly) {
  transition: opacity 0.3s;
}
.post-page[data-sub="runout"] #post-map :is(.pm-loc, .pm-fracture, .pm-poly),
.post-page[data-sub="fracture"] #post-map :is(.pm-loc, .pm-runout, .pm-poly),
.post-page[data-sub="polygon"] #post-map :is(.pm-runout, .pm-fracture) {
  opacity: 0.45;
}
/* 地図の上端に積む：いま描いている線の帯・描き違えの確かめ・説明のカード。右は Leaflet の操作ボタンの分を空ける。
   帯は地図を押す操作の邪魔にならないよう pointer-events:none（押しは地図に届く）。確かめと説明は押せる */
.post-page .map-top-stack {
  position: absolute;
  z-index: 900;
  top: 8px;
  left: 8px;
  right: 56px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  pointer-events: none;
}
.post-page .map-top-stack > * {
  max-width: 100%;
}
.post-page .map-guide {
  position: relative;
  pointer-events: auto;
  width: fit-content;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: min(340px, 100%);
  padding: 10px 10px 10px 12px;
  border-radius: 8px;
  background: rgba(17, 26, 34, 0.92);
  color: #fff;
  font-size: 13px;
  line-height: 1.6;
}
.post-page .map-guide[hidden] {
  display: none;
}
.post-page .map-guide p {
  margin: 0;
}
.post-page .map-guide button {
  flex: none;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
/* 線の見本：流下経路＝--runout の実線、破断面＝--fracture の破線（地図に描く線と同じ色・形） */
.post-page .lg-line {
  display: inline-block;
  width: 26px;
  height: 0;
  margin-right: 6px;
  vertical-align: middle;
  border-top: 3px solid var(--fracture, #1f5bff);
}
.post-page .lg-line.is-runout {
  border-top-style: solid;
  border-top-color: var(--runout, #16a34a);
}
.post-page .lg-line.is-fracture {
  border-top-width: 4px;
  border-top-style: dashed;
  border-top-color: var(--fracture, #1f5bff);
}
.post-page .map-band {
  padding: 6px 12px 7px 10px;
  border-radius: 8px;
  border-left: 5px solid var(--runout, #16a34a);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 2px 8px rgba(17, 26, 34, 0.22);
  pointer-events: none;
}
.post-page .map-band[data-line="fracture"] {
  border-left-color: var(--fracture, #1f5bff);
}
.post-page .map-band[hidden],
.post-page .map-swap[hidden] {
  display: none;
}
.post-page .map-band p {
  margin: 0;
}
.post-page .band-main {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink);
}
.post-page .band-main strong {
  font-weight: 800;
}
.post-page .band-hint {
  margin-top: 1px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--graphite);
}
.post-page .map-swap {
  width: 360px;
  padding: 10px 12px;
  border-radius: 8px;
  border-left: 5px solid var(--polygon, #d4382c);
  background: #fff;
  box-shadow: 0 3px 12px rgba(17, 26, 34, 0.3);
  pointer-events: auto;
}
.post-page .map-swap p {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.55;
  color: var(--ink);
}
.post-page .swap-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.post-page .swap-actions .btn {
  min-height: 40px;
  padding: 6px 12px;
  font-size: 13px;
}
/* 凡例：右下（Leaflet の帰属表示の上）に 2 列で小さく。押せない。
   地図ができると map-steps.js が Leaflet の右下の並び（.leaflet-bottom.leaflet-right）に入れる（位置は Leaflet が決める） */
.post-page .map-stage > .map-legend {
  display: none;
}
.post-page .map-legend {
  display: grid;
  grid-template-columns: auto auto;
  gap: 1px 12px;
  margin-top: 0;
  margin-left: 0;
  padding: 5px 9px;
  list-style: none;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 1px 5px rgba(17, 26, 34, 0.2);
  font-size: 11px;
  line-height: 1.5;
  color: var(--ink);
  pointer-events: none;
}
.post-page .map-legend li {
  white-space: nowrap;
}
.post-page .map-legend .lg-line {
  width: 18px;
  margin-right: 5px;
}
.post-page .lg-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 8px 0 4px;
  box-sizing: border-box;
  vertical-align: middle;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--ink, #111a22);
  box-shadow: 0 0 0 1px var(--ink, #111a22);
}
.post-page .lg-area {
  display: inline-block;
  width: 16px;
  height: 10px;
  margin-right: 5px;
  box-sizing: border-box;
  vertical-align: middle;
  border: 2px solid var(--polygon, #d4382c);
  background: rgba(212, 56, 44, 0.22);
  background: color-mix(in srgb, var(--polygon, #d4382c) 22%, transparent);
}
.post-page .map-locate {
  position: absolute;
  z-index: 900;
  left: 12px;
  bottom: 28px;
  min-height: 38px;
  padding: 6px 14px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(17, 26, 34, 0.18);
}
.post-page .map-note {
  position: absolute;
  z-index: 900;
  left: 12px;
  right: 12px;
  bottom: 106px;
  margin: 0;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  border-left: 3px solid var(--ink);
  color: var(--ink);
  font-size: 13px;
  box-shadow: 0 2px 8px rgba(17, 26, 34, 0.18);
}
.post-page .map-note[hidden] {
  display: none;
}
.post-page .map-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.post-page .map-tools .post-note {
  flex: 1 0 100%;
  font-size: 12px;
  line-height: 1.5;
}
.post-page .poly-tools {
  flex: 1 0 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.post-page .poly-tools[hidden] {
  display: none;
}
.post-page .poly-tools .poly-label {
  font-size: 13px;
  color: var(--graphite);
  margin-right: 4px;
}
.post-page .poly-tools .poly-count {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  min-width: 2.5em;
  text-align: center;
}
.post-page .map-tools .poly-tools .btn.poly-step {
  min-width: 44px;
  padding: 8px 12px;
  font-size: 18px;
  line-height: 1;
}
/* 小さな補足（問いかけの下・点の数の下）：枠も背景も付けない */
.post-page .poly-hint {
  flex: 1 0 100%;
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--graphite);
}
/* 範囲を描く前の問いかけ（地図の下のボタンの上） */
.post-page .poly-ask {
  flex: 1 0 100%;
}
.post-page .poly-ask .poly-ask-q {
  margin: 0 0 2px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink);
}
.post-page .poly-tools .post-note {
  flex: 1 0 100%;
}
.post-page .map-tools .btn {
  min-height: 44px;
  padding: 8px 14px;
}
.post-page :is(#map-next, #map-generate) {
  margin-left: auto;
  min-width: 120px;
}
/* 範囲の調整の取っ手：見た目は直径 10px。押せる範囲は Leaflet の iconSize（18×18）のまま */
.post-page .pm-vertex {
  cursor: grab;
}
.post-page .pm-vertex::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 4px;
  width: 10px;
  height: 10px;
  box-sizing: border-box;
  border: 2px solid var(--polygon, #d4382c);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(17, 26, 34, 0.4);
}
@media (max-width: 768px) {
  .post-page[data-step="3"] {
    overflow: hidden;
  }
  .post-page[data-step="3"] .post-map-card {
    position: fixed;
    /* 全画面の地図は上部バー（.bar 1250）より前（2026-10-06 にバーを詳細シートより前に上げたため） */
    z-index: 1260;
    inset: 0;
    height: 100dvh;
    gap: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: var(--paper);
    grid-template-rows: auto minmax(0, 1fr) auto;
  }
  .post-page[data-step="3"] .map-top {
    padding: 10px 16px 8px;
    padding-top: max(10px, env(safe-area-inset-top, 0px));
  }
  .post-page[data-step="3"] .map-top h2 {
    font-size: 16px;
  }
  .post-page[data-step="3"] .map-instruction {
    font-size: 12px;
    line-height: 1.5;
  }
  .post-page[data-step="3"] .map-stage {
    min-height: 0;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
  .post-page[data-step="3"] .map-canvas {
    height: 100%;
    min-height: 0;
  }
  .post-page[data-step="3"] .map-tools {
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    gap: 6px;
  }
  .post-page[data-step="3"] .map-tools .btn {
    padding: 8px 10px;
    font-size: 13px;
    min-height: 42px;
  }
  /* 主のボタンは、同じ段に収まらない時は 1 行を使い切る */
  .post-page[data-step="3"] :is(#map-next, #map-generate) {
    flex: 1 1 auto;
  }
}

/* 4 詳細：写真 */
.post-page .post-photos {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.post-page .post-photos li {
  position: relative;
  width: 92px;
  height: 92px;
}
.post-page .post-photos img {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  border: 1px solid var(--rule);
  object-fit: cover;
}
.post-page .photo-remove {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
/* 写真：点線の置き場＋カメラの絵＋説明。押すと選ぶ画面が開く（中の仕組みは photo.js のまま） */
.post-page .photo-drop {
  display: grid;
  justify-items: center;
  gap: 4px;
  width: 100%;
  padding: 22px 16px;
  border: 2px dashed var(--rule);
  border-radius: 10px;
  background: var(--paper);
  color: var(--graphite);
  font: inherit;
  text-align: center;
  cursor: pointer;
}
.post-page .photo-drop strong {
  font-size: 15px;
  color: var(--ink);
}
.post-page .photo-drop span {
  font-size: 12px;
  color: var(--mist);
}
.post-page .photo-drop:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 5 確認 */
.post-page .review-map {
  height: 220px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--wash);
  overflow: hidden;
}
.post-page .review-list {
  display: grid;
  margin: 0;
}
.post-page .review-row {
  display: grid;
  grid-template-columns: minmax(0, 9em) minmax(0, 1fr);
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 14px;
}
.post-page .review-row dt {
  color: var(--graphite);
  font-size: 12px;
  padding-top: 2px;
}
.post-page .review-row dd {
  margin: 0;
  color: var(--ink);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.post-page .review-photos li {
  width: 64px;
  height: 64px;
}
.post-page .post-done {
  text-align: center;
  justify-items: center;
  padding: 40px 22px;
}

.post-page .post-foot {
  position: relative;
  border-top: 1px solid var(--rule);
  background: var(--paper);
}

/* 背景（2026-10-06・案 B「地形の上で」）。固定・押せない。段ごとの寄り・ぼかしは post/backdrop.js が --bd-scale・--bd-blur に入れる。
   色は v2 のトークン。動きを減らす設定では寄り・ぼかし・波打ちを止める（JS も寄りとぼかしを 1 倍・0 にする） */
.post-page .bd {
  position: fixed;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.post-page .bd-tw {
  position: absolute;
  inset: 0;
  transform: scale(var(--bd-scale, 1));
  transform-origin: 50% 50%;
  filter: blur(var(--bd-blur, 0px));
  transition:
    transform 1.6s cubic-bezier(0.2, 0.7, 0.2, 1),
    filter 1s ease;
  will-change: transform;
}
.post-page .bd-svg {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
}
.post-page .bd-contours {
  opacity: 0.5;
}
.post-page .bd-contours path {
  fill: none;
  stroke: #c3ccd5;
  stroke-width: 0.8;
}
.post-page .bd-contours path.is-major {
  stroke: var(--rold);
  stroke-width: 1.4;
}
.post-page .bd-tint {
  fill: var(--ink);
  opacity: 0;
  transition:
    opacity 1s,
    fill 1s;
}
.post-page .bd-tint[data-tone="dawn"] {
  fill: var(--r7);
}
.post-page .bd-tint[data-tone="dusk"] {
  fill: var(--r24);
}
.post-page .bd-tint[data-tone="runout"] {
  fill: var(--runout);
}
.post-page .bd-tint[data-tone="fracture"] {
  fill: var(--fracture);
}
.post-page .bd-tint[data-tone="polygon"] {
  fill: var(--polygon);
}
.post-page .bd-tint[data-tone="season"] {
  fill: var(--rseason);
}
.post-page .bd-geo {
  opacity: 0;
  transition: opacity 0.8s;
}
.post-page .bd[data-stage="s3"] .bd-geo,
.post-page .bd[data-stage="s5"] .bd-geo,
.post-page .bd[data-stage="done"] .bd-geo {
  opacity: 1;
}
.post-page .bd[data-stage="s4"] .bd-geo {
  opacity: 0.85;
}
.post-page .bd-poly {
  fill: var(--polygon);
  fill-opacity: 0.18;
  stroke: var(--polygon);
  stroke-width: 1.8;
  stroke-linejoin: round;
}
.post-page .bd-run,
.post-page .bd-frac {
  fill: none;
  stroke-width: 2.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.post-page .bd-run {
  stroke: var(--runout);
}
.post-page .bd-frac {
  stroke: var(--fracture);
  stroke-dasharray: 7.2 5.4;
}
.post-page .bd-run-dot {
  fill: var(--runout);
  stroke: #fff;
  stroke-width: 1.35;
}
.post-page .bd-frac-dot {
  fill: var(--fracture);
  stroke: #fff;
  stroke-width: 1.35;
}
.post-page .bd-loc-halo {
  fill: none;
  stroke: var(--polygon);
  stroke-opacity: 0.35;
  stroke-width: 1.8;
}
.post-page .bd-loc {
  fill: var(--polygon);
  stroke: #fff;
  stroke-width: 2.7;
}
.post-page .bd-ring {
  fill: none;
  stroke: var(--polygon);
  stroke-width: 2;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.post-page .bd[data-stage="done"] .bd-ring {
  animation: post-pulse 1.8s ease-out 0.6s 1;
}
@keyframes post-pulse {
  0% {
    opacity: 0.9;
    transform: scale(0.6);
  }
  100% {
    opacity: 0;
    transform: scale(3.4);
  }
}
@media (prefers-reduced-motion: reduce) {
  .post-page .bd-tw {
    transition: none;
    will-change: auto;
  }
  .post-page .bd-tint,
  .post-page .bd-geo,
  .post-page .post-steps li::before,
  .post-page .post-steps .dot,
  .post-page[data-step="3"] .map-stage,
  .post-page #post-map :is(.pm-loc, .pm-runout, .pm-fracture, .pm-poly) {
    transition: none;
  }
  .post-page .bd[data-stage="done"] .bd-ring {
    animation: none;
  }
}