/* ========================================
   公開型GIS スタイル : 画面機能（属性表示・使い方ガイド・スタート画面・全画面表示・地図上検索バー・印刷要素）
   （読み込み順が適用順です。index.html / survey/index.html の
     link 順を入れ替えると見た目が変わります）
   ======================================== */
/* ========================================
   属性表示（カード型 / 一覧型）
   ======================================== */
.attr-mode-switch {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
}
.attr-mode-switch button {
  flex: 1;
  min-height: 34px;
  border: 1px solid var(--gray-200);
  background: #fff;
  border-radius: var(--radius);
  font-family: var(--font);
  font-size: var(--fs-body);
  color: var(--gray-700);
  cursor: pointer;
}
.attr-mode-switch button.active {
  background: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary);
  font-weight: 700;
}

.attr-card-title { font-size: var(--fs-subhead); font-weight: 700; margin: 0 0 10px; line-height: 1.4; }
.attr-card-note  { font-size: var(--fs-body); color: var(--gray-700); margin: 0 0 10px; line-height: 1.6; }
.attr-card-image { margin: 0 0 12px; }
.attr-card-image img { width: 100%; border-radius: var(--radius); display: block; }

.attr-card-line {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 9px 0;
  border-bottom: 1px solid var(--gray-100);
  min-height: 44px;   /* 指でタップしやすい大きさを確保 */
}
.attr-card-line > i { color: var(--gray-500); font-size: var(--icon-md); margin-top: 2px; width: 16px; text-align: center; flex: none; }
.attr-card-line > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.attr-card-main { font-size: var(--fs-body); color: var(--gray-800); word-break: break-word; }
.attr-card-sub  { font-size: var(--fs-caption); color: var(--gray-500); }
.attr-card-line.tappable { cursor: pointer; }
.attr-card-line.tappable:hover { background: var(--gray-50); }
.attr-card-line.copied .attr-card-sub::after { content: ' — コピーしました'; color: var(--primary); }

.attr-card-actions { display: flex; gap: 8px; margin: 14px 0 0; }
.attr-card-actions .btn { flex: 1; min-height: 42px; }

/* 検索でたどり着いた地物のレイヤがOFFのときに出す案内＋「全部表示」ボタン */
.attr-layer-off {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px solid #ffd9a0;
  border-radius: 8px;
  background: #fff8ec;
  font-size: var(--fs-caption);
  color: var(--gray-600);
}
.attr-layer-off button {
  margin-left: auto;
  border: none;
  border-radius: 6px;
  padding: 8px 12px;
  background: var(--primary, #2b6cb0);
  color: #fff;
  font-size: var(--fs-body);
  font-weight: 600;
  cursor: pointer;
}
.attr-layer-off button:hover { filter: brightness(1.08); }

/* 「表示する情報」パネルで、今ONにしたレイヤの行を一瞬光らせる */
.layer-item-flash { animation: layer-flash 1.6s ease-out; }
@keyframes layer-flash {
  0%, 60% { background: #fff3cd; }
  100%    { background: transparent; }
}

/* 検索した地物の目印（脈打つ円＋ピン） */
.search-highlight-icon { background: none; border: none; }
.search-highlight-icon i {
  position: absolute;
  left: 50%;
  top: 2px;
  transform: translateX(-50%);
  font-size: var(--icon-xl);
  color: #ff5722;
  text-shadow: 0 0 3px #fff, 0 1px 3px rgba(0, 0, 0, 0.4);
}
.search-highlight-icon .pulse {
  position: absolute;
  left: 50%;
  top: 22px;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: rgba(255, 87, 34, 0.45);
  animation: search-pulse 1.6s ease-out infinite;
}
@keyframes search-pulse {
  0%   { transform: scale(1);   opacity: 0.8; }
  100% { transform: scale(3.2); opacity: 0; }
}
.search-highlight-tip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 4px 4px 8px;
  border: 1px solid #ff5722;
  border-radius: 6px;
  background: #fff;
  color: var(--gray-800, #222);
  font-size: var(--fs-caption);
  font-weight: 600;
}
.search-highlight-tip .tip-close {
  flex: none;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 4px;
  padding: 0;
  background: var(--gray-100, #edf2f7);
  color: var(--gray-600, #4a5568);
  font-size: var(--icon-md);
  line-height: 1;
  cursor: pointer;
}
.search-highlight-tip .tip-close:hover { background: #ff5722; color: #fff; }
.search-highlight-tip::before { border-top-color: #ff5722; }
@media (prefers-reduced-motion: reduce) {
  .search-highlight-icon .pulse { animation: none; opacity: 0.5; }
  .layer-item-flash { animation: none; background: #fff3cd; }
}

.attr-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--gray-200);
  font-size: var(--fs-caption);
  color: var(--gray-500);
}

.attr-tools { display: flex; gap: 12px; margin-top: 10px; }
.attr-tools button {
  border: none;
  background: none;
  padding: 6px 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  color: var(--gray-600);
  cursor: pointer;
}
.attr-tools button:hover { color: var(--primary); }
.attr-tools button.copied { color: var(--primary); }
.attr-tools button.copied::after { content: ' ✓'; }

.attr-card-more { margin-top: 12px; border-top: 1px solid var(--gray-200); padding-top: 8px; }
.attr-card-more > summary {
  cursor: pointer;
  font-size: var(--fs-body);
  color: var(--gray-600);
  padding: 6px 0;
}
.attr-card-more .attribute-table { margin-top: 6px; }

/* 数値は桁を比べやすいよう右揃え・等幅にする */
.attribute-table td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* スマホでは地図を見ながら操作できるよう、下から出るシート型にする */
@media (max-width: 640px) {
  #attribute-modal { align-items: flex-end; padding: 0; }
  #attribute-modal .modal {
    max-width: 100%;
    max-height: 78vh;
    border-radius: 16px 16px 0 0;
    animation: attr-sheet-up 0.2s ease;
  }
  @keyframes attr-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
}

/* ========================================
   使い方ガイド
   ======================================== */
#guide-overlay {
  position: fixed;
  inset: 0;
  z-index: 1950;   /* スタート画面(1900)より上、利用規約(2000)より下 */
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
#guide-overlay.hidden { display: none; }

#guide-panel {
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 440px;
  padding: 28px 26px 18px;
  text-align: center;
}
.guide-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--primary-light);
  color: var(--primary);
  /* 64px の丸に収める。文字サイズ切替には連動させない */
  font-size: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.guide-slide h2 { font-size: var(--fs-subhead); margin: 0 0 10px; color: var(--gray-900); }
.guide-slide p  { font-size: var(--fs-body); color: var(--gray-700); line-height: 1.8; margin: 0; }

#guide-dots { display: flex; justify-content: center; gap: 6px; margin: 20px 0 16px; }
#guide-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gray-200);
  transition: background 0.15s;
}
#guide-dots span.active { background: var(--primary); }

#guide-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--gray-200);
}
#guide-nav { display: flex; gap: 8px; }
#guide-footer .btn { min-height: 42px; }
#guide-prev:disabled { opacity: 0.4; cursor: default; }

@media (max-width: 640px) {
  #guide-panel { padding: 22px 18px 14px; }
  /* 54px の丸。上と同じ */
  .guide-icon { width: 54px; height: 54px; font-size: 22px; }
}

/* ========================================
   スタート画面「なにをお探しですか？」
   ======================================== */
#start-overlay {
  position: fixed;
  inset: 0;
  z-index: 1900;   /* 利用規約モーダル(2000)より下。規約に同意してから選ばせる */
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
}
#start-overlay.hidden { display: none; }

#start-panel {
  background: var(--gray-50, #f9fafb);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 760px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 26px 26px 20px;
}
#start-title {
  font-size: var(--fs-title);
  font-weight: 700;
  color: var(--gray-900);
  margin: 0 0 6px;
}
#start-lead {
  font-size: var(--fs-body);
  color: var(--gray-500);
  margin: 0 0 18px;
}
#start-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--gray-200);
}
#start-footer .btn { min-height: 44px; }
#start-skip-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-body);
  color: var(--gray-500);
  cursor: pointer;
}
#start-skip { width: 16px; height: 16px; }

/* 「目的から選ぶ」に戻すボタン（レイヤパネルの先頭） */
#reopen-start {
  width: 100%;
  min-height: 40px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

@media (max-width: 640px) {
  #start-panel { padding: 20px 16px 16px; max-height: 100%; }
  #start-title { font-size: var(--fs-subhead); }
  #start-footer { flex-direction: column-reverse; align-items: stretch; }
}

/* ========================================
   全画面表示（ヘッダーを隠して地図を広く使う）
   ======================================== */
#header { transition: transform 0.25s ease; }
#app    { transition: top 0.25s ease; }
body.header-hidden #header { transform: translateY(-100%); }
body.header-hidden #app    { top: 0; }

/* 管理者プレビューの帯（js/gis-preview.js）もヘッダーと一緒に画面外へ。
   ヘッダー直下に position:fixed で出ているので、残すと地図の上に浮いて重なる。
   自分の高さ＋ヘッダー高さぶん上げると完全に隠れる */
.preview-banner--fixed { transition: transform 0.25s ease; }
body.header-hidden .preview-banner--fixed { transform: translateY(calc(-100% - var(--header-height))); }

/* 解除ボタンは必ず画面に残す（戻る手段が無いと操作不能になるため） */
#exit-fullscreen {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1300;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--gray-200);
  border-radius: 22px;
  background: #fff;
  box-shadow: var(--shadow-lg);
  font-family: var(--font);
  font-size: var(--fs-body);
  color: var(--gray-700);
  cursor: pointer;
}
#exit-fullscreen:hover { background: var(--gray-50); color: var(--primary); }
#exit-fullscreen[hidden] { display: none; }

/* 解除ボタンが出ている間は、検索バーをその下へ避ける */
body.header-hidden #map-search { top: 64px; }

@media (max-width: 640px) {
  /* スマホ: 上段はメニューボタンと検索バー。解除ボタンはその下に置く */
  body.header-hidden #mobile-menu-btn { top: 8px; }
  #exit-fullscreen { top: 56px; left: 56px; font-size: var(--fs-caption); padding: 0 12px; min-height: 40px; }
  body.header-hidden #map-search { top: 8px; }
}

/* ========================================
   地図上の検索バー（常時表示）
   ======================================== */
#map-search {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 340px;
  max-width: calc(100% - 20px);
  z-index: 1150;
}
#map-search-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 24px;
  box-shadow: var(--shadow-lg);
  padding: 0 10px 0 14px;
  height: 44px;
}
#map-search-icon { color: var(--primary); font-size: var(--icon-md); }
#map-search-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: none;
  font-family: var(--font);
  font-size: var(--fs-body);   /* 16px未満だとiOSで自動ズームするため注意 */
  color: var(--gray-800);
}
#map-search-clear {
  border: none;
  background: none;
  cursor: pointer;
  color: var(--gray-500);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex: none;
}
#map-search-clear:hover { background: var(--gray-100); color: var(--gray-700); }

#map-search-results {
  display: none;
  margin-top: 6px;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  max-height: min(60vh, 420px);
  overflow-y: auto;
}
#map-search.open #map-search-results { display: block; }
#map-search-results .map-search-group {
  font-size: var(--fs-caption);
  font-weight: 700;
  color: var(--gray-500);
  padding: 8px 12px 4px;
  background: var(--gray-50, #f8fafc);
}
#map-search-results .search-result-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  min-height: 44px;   /* 指でタップしやすい大きさを確保 */
  cursor: pointer;
  border-bottom: 1px solid var(--gray-100);
}
#map-search-results .search-result-item:hover { background: var(--primary-light); }
#map-search-results .search-result-item i { color: var(--primary); font-size: var(--icon-sm); flex: none; }
#map-search-results .name { font-size: var(--fs-body); color: var(--gray-800); }
#map-search-results .address { font-size: var(--fs-caption); color: var(--gray-500); }

/* 現在地はツールバーの「現在地」ボタンに集約するので、Leaflet標準の小ボタンは隠す */
body.locate-in-toolbar .leaflet-control-locate { display: none !important; }

/* ========================================
   印刷用の表示要素（画面では非表示。印刷時に選ばれたものだけ出す）
   ======================================== */
#print-north, #print-legend, #print-qr { display: none; }

#print-north {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  z-index: 450;
}
#print-north svg { width: 100%; height: auto; }

/* 出典表記（Leaflet | 地理院タイル）のすぐ上に置く。
   --print-attr-h は runPrint() が出典表記の実寸を入れる。 */
#print-legend {
  position: absolute;
  bottom: calc(14mm + var(--print-attr-h, 18px));
  right: 12px;
  z-index: 450;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--gray-300);
  border-radius: 4px;
  padding: 8px 10px;
  max-width: 240px;
  font-size: var(--fs-caption);
}
.print-legend-title { font-weight: 700; margin-bottom: 5px; }
.print-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
}

/* 索引図（右下）と重ならないよう、方位記号の下に置く */
#print-qr {
  position: absolute;
  top: 72px;
  right: 12px;
  z-index: 450;
  background: #fff;
  border: 1px solid var(--gray-300);
  border-radius: 4px;
  padding: 6px 6px 3px;
  text-align: center;
}
#print-qr span { display: block; font-size: var(--fs-caption); color: var(--gray-700); margin-top: 2px; }
#print-qr img, #print-qr canvas { display: block; }

/* 印刷設定パネル */
.print-lead { font-size: var(--fs-caption); color: var(--gray-500); margin-bottom: 10px; }
.print-option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 0 4px;
  border-bottom: 1px solid var(--gray-100);
  cursor: pointer;
  font-size: var(--fs-body);
}
.print-option:last-child { border-bottom: none; }
.print-option input { width: 18px; height: 18px; }

/* 印刷前の準備状態。印刷時と同じ大きさに地図を広げてタイルを読み込ませる。
   （印刷開始と同時に広げると、右側のタイルが間に合わず白く抜けるため） */
/* 準備中は印刷時とまったく同じ大きさ・形にしておく。
   beforeprint の時点では画面の寸法しか測れないため、ここで用紙と同じ形に
   しておかないと Leaflet が誤った大きさで計算し、地図の中心がずれる。 */
body.print-prep #header,
body.print-prep #sidebar { display: none !important; }
body.print-prep #app {
  position: static !important;
  display: block !important;
  top: 0 !important;
}
body.print-prep #map-wrapper {
  position: relative !important;
  display: block !important;
  width: 281mm !important;   /* A4横 297mm − 余白16mm */
  height: 190mm !important;  /* A4横 210mm − 余白16mm − 予備 */
  overflow: hidden !important;
  margin: 0 auto !important;
}
body.print-prep #map { width: 281mm !important; height: 190mm !important; }
/* 地図の上に重なるだけの要素は場所を取らないので、見た目だけ隠す */
body.print-prep #toolbar,
body.print-prep #map-search,
body.print-prep #exit-fullscreen { visibility: hidden !important; }

#print-prep-msg {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.75);
  font-size: var(--fs-body);
  color: var(--gray-700);
}
body.print-busy #print-prep-msg { display: flex; }

@media print {
  #print-prep-msg { display: none !important; }
  @page { size: landscape; margin: 8mm; }

  /* 画面の固定レイアウトのままだと、用紙より広い部分（地図の右側）が切れてしまう。
     印刷時は用紙サイズ（mm）を基準にした通常フローに組み直す。 */
  html, body { width: auto !important; height: auto !important; overflow: visible !important; }
  #app {
    position: static !important;
    display: block !important;
    top: 0 !important;
  }
  /* width を % にすると、Leaflet が準備段階で測った幅と実際の用紙幅がずれ、
     地図の中心（と中心の目印）が横方向にずれる。用紙寸法で固定する。 */
  #map-wrapper {
    position: relative !important;
    display: block !important;
    width: 281mm !important;       /* A4横 297mm − 余白16mm */
    height: 190mm !important;      /* A4横 210mm − 余白16mm − 予備 */
    overflow: hidden !important;
    margin: 0 auto !important;
  }
  #map { width: 281mm !important; height: 190mm !important; }

  #header, #sidebar, #toolbar, #map-search, #start-overlay, #guide-overlay,
  #map-info-bar, #basemap-switcher, #basemap-switcher-2, .basemap-label,
  #exit-fullscreen, #map2, #map-divider, #streetview-pane,
  .leaflet-control-zoom, .leaflet-control-locate, .leaflet-draw,
  .leaflet-control-scale, .leaflet-control-minimap { display: none !important; }
  #print-info-panel { display: block !important; }

  /* 印刷設定で選ばれた項目だけを出す */
  body.pr-north   #print-north  { display: block !important; }
  body.pr-legend  #print-legend { display: block !important; }
  body.pr-qr      #print-qr     { display: block !important; }
  body.pr-scale   .leaflet-control-scale   { display: block !important; }
  body.pr-minimap .leaflet-control-minimap { display: block !important; }
  /* 中心の目印は印刷設定で選ばれたときだけ出す（画面側の表示状態に関係なく） */
  #center-mark, #center-mark-2 { display: none !important; }
  body.pr-center  #center-mark  { display: block !important; opacity: 1 !important; }

  /* 下部の情報パネルと重ならないよう、Leafletの下側コントロールを持ち上げる */
  .leaflet-bottom { bottom: 14mm !important; }
  /* 索引図は凡例のさらに上へ（下から 出典表記 → 凡例 → 索引図 の順） */
  body.pr-legend .leaflet-control-minimap { margin-bottom: var(--print-legend-h, 0px) !important; }
  /* 作図ツールバー用の横ずらしは印刷では不要 */
  .leaflet-top.leaflet-right { padding-right: 0 !important; }

  /* mm→px の端数で地図が1〜2px下にはみ出して見えるため、
     コメント欄を数px下げて地図の下端まで確実に覆う（はみ出しは
     #map-wrapper の overflow:hidden で切られる） */
  #print-info-panel {
    bottom: -4px;
    padding: 6px 12px 10px;
    font-size: var(--fs-caption);
    line-height: 1.6;
  }

  /* 背景色付きのピン・凡例記号などを印刷時も表示させる */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }
}