@charset "utf-8";

/* === 写真拡大モーダル === */
.photo-modal { position: fixed; inset: 0; z-index: 10000; }

.photo-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.85);
  cursor: pointer;
  z-index: 1;
}

.photo-content {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  max-width: 65vw; max-height: 70vh;
  z-index: 2;
}

.photo-content img {
  width: 100%; height: auto;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

/* === キャプション === */
.caption-top-left,
.caption-bottom-right {
  position: absolute;
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
  background: rgba(0,0,0,0.3);
  border-radius: 6px;
  z-index: 3;
}

.caption-top-left {
  top: 10px;
  left: 12px;
  font-size: 14px;
  line-height: 1.5;
  padding: 6px 10px;
}

.caption-bottom-right {
  right: 8px;
  bottom: 8px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 13px;
  text-align: right;
}

.provider {
  font-size: 12px;
  opacity: 0.9;
}

/* === スマホ === */
@media (max-width: 700px) {
  .caption-top-left {
    display: none;
  }

  .photo-content {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .photo-content img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 0;
    box-shadow: none;
  }

  .caption-bottom-right {
    right: 8px;
    bottom: 8px;
    font-size: 14px;
    background: rgba(0,0,0,0.6);
    padding: 6px 12px;
  }
}

/* === 写真下中央の閉じるボタン === */
.photo-close {
  position: fixed;
  left: 50%;
  bottom: 25px;
  transform: translateX(-50%);
  background: #fff;
  color: #000;
  border: none;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  font-size: 26px;
  font-weight: bold;
  line-height: 44px;
  text-align: center;
  cursor: pointer;
  z-index: 10005;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.photo-close:hover {
  transform: translateX(-50%) scale(1.1);
  box-shadow: 0 3px 8px rgba(0,0,0,0.35);
}

/* === スマホでのタップしやすさ調整 === */
@media (max-width: 700px) {
  .photo-close {
    width: 56px;
    height: 56px;
    font-size: 30px;
    line-height: 52px;
    bottom: 30px;
  }
}

.vehicle-thumb.no-photo {
  display: inline-block;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  text-align: center;
  background: #fff5f5;
  transition: 0.2s;
}
.vehicle-thumb.no-photo:hover {
  background: #ffecec;
}
.vehicle-thumb.no-photo .request-icon {
  width: 100%;
  height: auto;
  border-radius: 12px;
  opacity: 0.9;
}
.vehicle-thumb.no-photo .upload-label {
  position: absolute;
  bottom: 4px;
  left: 0;
  right: 0;
  font-size: 12px;
  color: #c62828;
  background: rgba(255,255,255,0.85);
  border-radius: 0 0 12px 12px;
  padding: 2px 0;
}


/* ===== 写真拡大モーダル（カード型：写真上＋情報下） ===== */

/* 画面全体のラッパー */
.photo-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
}

/* 半透明の背景 */
.photo-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}

/* 中央の白いカード */
.photo-dialog {
  position: relative;
  z-index: 1;
  margin: auto;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;

  background: #fff;
  border-radius: 8px;
  padding: 16px;
  max-width: min(90vw, 800px);
  max-height: 90vh;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  overflow-y: auto; /* 情報が多いときスクロール */
}

/* 写真を中央に大きく表示 */
.photo-main {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 12px;
}

.photo-main img {
  max-width: 100%;
  max-height: 60vh;
  object-fit: contain;
  display: block;
}

/* 写真の下の情報ブロック */
.photo-info {
  font-size: 14px;
  line-height: 1.4;
  color: #333;
}

.photo-station {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 4px;
}

.photo-meta {
  margin-top: 2px;
}

.photo-row {
  margin-bottom: 2px;
}

/* 提供者名は右寄せ */
.photo-provider {
  margin-top: 8px;
  text-align: right;
  font-size: 12px;
  color: #555;
}

/* 閉じるボタン（右上） */
.photo-close {
  position: absolute;
  top: 8px;
  right: 8px;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 16px;
  background: rgba(0,0,0,0.8);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
}

/* スマホ向け少し余白調整 */
@media (max-width: 768px) {
  .photo-dialog {
    padding: 12px;
    max-width: 94vw;
  }

  .photo-main img {
    max-height: 50vh;
  }
}

/* ===== 写真拡大モーダル（カード型：写真上＋情報下） ===== */

.photo-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
}

.photo-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}

.photo-dialog {
  position: relative;
  z-index: 1;
  margin: auto;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;

  background: #fff;
  border-radius: 8px;
  padding: 16px;
  max-width: min(90vw, 800px);
  max-height: 90vh;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  overflow-y: auto;
}

/* 写真を中央に大きく表示 */
.photo-main {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 12px;
}

.photo-main img {
  max-width: 100%;
  max-height: 60vh;
  object-fit: contain;
  display: block;
}

/* 情報カード部分 */
.photo-info {
  font-size: 14px;
  line-height: 1.4;
  color: #333;
}

.photo-station {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 4px;
}

.photo-meta {
  margin-top: 2px;
}

.photo-row {
  margin-bottom: 2px;
}

/* 提供者名は右寄せ */
.photo-provider {
  margin-top: 8px;
  text-align: right;
  font-size: 12px;
  color: #555;
}

/* 閉じるボタン（右上） */
.photo-close {
  position: absolute;
  top: 8px;
  right: 8px;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 16px;
  background: rgba(0,0,0,0.8);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
}

/* スマホ調整 */
@media (max-width: 768px) {
  .photo-dialog {
    padding: 12px;
    max-width: 94vw;
  }
  .photo-main img {
    max-height: 50vh;
  }
}
/* ===== 情報カードのデザイン強化 ===== */

.photo-info {
  margin-top: 4px;
  padding: 10px 12px;
  background: #f8f9fb;
  border-radius: 8px;
  border: 1px solid #e0e3ea;
  font-size: 14px;
  line-height: 1.5;
  color: #333;
}

/* 消防署名行 */
.photo-station {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
  gap: 6px;
}

.photo-station-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 999px;
  background: #e53935;
  color: #fff;
  font-size: 11px;
  line-height: 1.4;
}

.photo-station-name {
  font-size: 15px;
  font-weight: 600;
}

/* メタ情報（隊名・車種・車両番号） */
.photo-meta {
  margin-top: 4px;
}

.photo-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 2px;
}

.photo-label {
  flex: 0 0 80px;
  font-size: 12px;
  color: #666;
}

.photo-value {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
}

/* 提供者行（右寄せ＆バッジ付き） */
.photo-provider {
  margin-top: 8px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #555;
}

.photo-provider-label {
  padding: 2px 6px;
  border-radius: 999px;
  background: #eceff4;
  font-size: 11px;
}

.photo-provider-name {
  font-weight: 500;
}
/* ===== モーダル上部に余白をつくる ===== */
.photo-dialog {
  margin-top: 40px !important;   /* ← 上の余白 */
}

/* ===== 閉じるボタン（右上・中央配置） ===== */
.photo-close {
  position: absolute;
  top: 10px;               /* ← モーダル枠からの距離（自由に調整可） */
  right: 10px;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: rgba(0,0,0,0.85);
  color: #fff;
  font-size: 20px;
  line-height: 36px;       /* ← 文字を丸の中央にピタッと揃える */
  text-align: center;      /* ← 水平中央 */
  cursor: pointer;
  padding: 0;              /* ← 余計なズレをなくす */
  display: flex;           /* ← さらに完璧に中央寄せ */
  justify-content: center;
  align-items: center;
  z-index: 20;
}

/* ホバー効果（あれば嬉しい） */
.photo-close:hover {
  background: rgba(0,0,0,0.95);
}

/* ===== 車両サムネイル：拡大アイコン付き ===== */

/* サムネイルのラッパー */
.thumb-wrapper {
  position: relative;
  display: inline-block;
}

/* 右下の🔍アイコン */
.zoom-icon {
  position: absolute;
  right: 4px;
  bottom: 4px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 13px;
  padding: 2px 4px;
  border-radius: 4px;
  pointer-events: none;   /* ← クリックを邪魔しない */
}

/* スマホでは少し大きく＋タップしやすく */
@media (max-width: 768px) {
  .zoom-icon {
    font-size: 15px;
    padding: 3px 6px;
  }
}

/* PC（768px以上）では 🔍 を消す */
@media (min-width: 769px) {
  .zoom-icon {
    display: none !important;
  }
}

/* =========================================================
   写真募集中（コンパクト版）
   ========================================================= */

.no-photo-card {
  display: block;
  width: 100%;
  min-height: 85px;            /* ← 小さくした */
  border-radius: 6px;
  background: #f4f5f7;
  border: 1px dashed #b8bec7;
  text-decoration: none;
  color: #333;
  position: relative;
  overflow: hidden;
  padding: 6px;
  transition: 0.2s;
}

.no-photo-card:hover {
  background: #eef1f5;
  border-color: #9aa4b3;
}

.no-photo-inner {
  text-align: center;
  padding: 6px 0;
}

.no-photo-icon {
  font-size: 20px;             /* ← 小さくした（28→20） */
  margin-bottom: 4px;
  opacity: 0.85;
}

.no-photo-text {
  font-size: 12px;             /* ← 小さくした（14→12） */
  font-weight: 600;
  margin-bottom: 4px;
  color: #444;
}

.no-photo-btn {
  display: inline-block;
  padding: 4px 8px;            /* ← 小さめボタン */
  background: #1976d2;
  color: #fff;
  font-size: 11px;             /* ← 小さくした */
  border-radius: 4px;
  margin-top: 2px;
}

.no-photo-card:hover .no-photo-btn {
  background: #1565c0;
}

/* スマホ最適化 */
@media (max-width: 768px) {
  .no-photo-card {
    min-height: 75px;          /* ← スマホではさらに小さく */
  }
  .no-photo-icon {
    font-size: 18px;
  }
}

.photo-thumbs {
  margin: 8px 0 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}

.photo-thumb-item {
  width: 64px;
  height: 48px;
  object-fit: cover;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0.7;
  border: 2px solid transparent;
}

.photo-thumb-item.is-active {
  opacity: 1;
  border-color: #ff5252;
}

/* =========================
   SP表示（スマホ）用調整
   ========================= */
@media (max-width: 768px) {
  .photo-dialog {
    width: 96vw;          /* ほぼ全幅 */
    max-width: none;
    height: 92vh;         /* ほぼ全高 */
    margin: 0 auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 8px 8px 10px;
    border-radius: 8px;
  }

  .photo-main {
    max-height: 55vh;     /* 画面上の約半分ちょい */
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .photo-main img {
    max-width: 100%;
    max-height: 55vh;
    width: auto;
    height: auto;
    object-fit: contain;
  }

  /* サムネイルは横スクロールしやすく */
  .photo-thumbs {
    margin-top: 6px;
    margin-bottom: 8px;
    display: flex;
    flex-wrap: nowrap;    /* 横一列 */
    overflow-x: auto;     /* 横スクロール */
    gap: 4px;
    padding-bottom: 4px;
  }

  .photo-thumb-item {
    flex: 0 0 auto;
    width: 56px;
    height: 42px;
  }

  .photo-info {
    font-size: 13px;
    padding: 6px 8px;
  }

  .photo-station-name,
  .photo-value,
  .photo-provider-name {
    font-size: 13px;
  }

  .photo-close {
    top: 6px;
    right: 6px;
    font-size: 20px;
    width: 30px;
    height: 30px;
    line-height: 1;
  }
}

/* 共通：ボタンの見た目 */
.zoom-icon-btn {
  position: absolute;
  right: 6px;
  bottom: 16px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: rgba(60, 60, 60, 0.85);
  color: #fff;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

/* PCでは非表示、SPだけ表示 */
@media (min-width: 769px) {
  .zoom-icon-btn {
    display: none;
  }
}