/* ==========================================
   1. BASE & TOPBAR
   ========================================== */
body {
  margin: 0;
  background: #000;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  color: #fff;
  overflow-x: hidden;
}

.topbar {
  height: 52px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 12px;
  backdrop-filter: blur(20px);
  background: rgba(0, 0, 0, 0.6);
  position: sticky;
  top: 0;
  z-index: 10;
}

#navTitle {
  justify-self: start;
}

#topBtn {
  justify-self: center;
}

#backBtn {
  justify-self: end;
}

/* ==========================================
   2. GRID & ALBUM (レスポンシブ列数のみ対応)
   ========================================== */
.grid {
  display: grid;
  /* デフォルト（スマホ）: 3カラム */
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  padding: 2px;
}

/* タブレット（600px以上）: 4カラム */
@media (min-width: 600px) {
  .grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* PC（1024px以上）: 5カラム */
@media (min-width: 1024px) {
  .grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* --- 以下の既存スタイルは一切変更せず維持 --- */
.grid img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.album {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  color: #fff;
}

.albumThumbWrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 12px;
  overflow: hidden;
}

.albumThumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.albumName {
  position: absolute;
  bottom: 4px;
  left: 6px;
  /* 左右を少しだけ詰め、15pxの入るスペースを確保 */
  right: 6px;
  z-index: 2;

  /* 攻めの15px */
  font-size: 15px;
  font-weight: 500;
  /* 15pxなら500（中太）程度で十分読みやすい */
  letter-spacing: -0.02em;
  /* 15pxの圧迫感を少し逃がす */
  line-height: 1.25;
  /* 複数行になった時の重なりを防ぐ */
  text-shadow: 0 1px 4px rgba(0, 0, 0, 1.0);

  /* 改行の挙動：記号優先、ダメならどこでも */
  word-break: normal;
  line-break: anywhere;
  overflow-wrap: anywhere;

  display: block;
}


/* --- 2. GRID & ALBUM セクションの末尾に追加 --- */

/* ダウンロードアイコン本体 */
.dl-btn {
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 5;
  color: rgba(255, 255, 255, 0.75);
  font-size: 16px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.2s, color 0.2s;
}

/* タップ・ホバー時に白く強調 */
.dl-btn:active,
.dl-btn:hover {
  color: #fff;
  transform: scale(1.1);
}

/* --- トースト通知：画面下部中央に固定（新設） --- */
.toast {
  position: fixed;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  padding: 10px 24px;
  border-radius: 50px;
  font-size: 13px;
  z-index: 200001;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.4s ease;
  white-space: nowrap;
  backdrop-filter: blur(8px);
  border: 0.5px solid rgba(255, 255, 255, 0.1);
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ==========================================
   3. VIEWER (3枚レール・スワイプ)
   ========================================== */
.viewer {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.95);
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 9999;
}

.viewer-main {
  width: 100vw;
  height: 80dvh;
  /* 下部のカルーセルスペースを確保 */
  overflow: hidden;
  position: relative;
  margin-top: -20px;
}

#swipeTrack {
  display: flex;
  width: 300%;
  height: 100%;
  will-change: transform;
}

.slide {
  width: 33.3333%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

.slide img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  touch-action: none;
}

/* 矢印 (当たり判定拡張) */
.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  margin-top: -20px;
  width: 70px;
  height: 100px;
  display: flex;
  align-items: center;
  z-index: 10000;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.5);
  -webkit-tap-highlight-color: transparent;
}

.arrow.left {
  left: 0;
  justify-content: flex-start;
  padding-left: 10px;
}

.arrow.right {
  right: 0;
  justify-content: flex-end;
  padding-right: 10px;
}

/* ==========================================
   3. VIEWER (矢印・配置追い込み版)
   ========================================== */

/* 矢印の親：当たり判定 80x100px / 位置固定 */
.arrow {
  position: absolute;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 80px !important;
  height: 100px !important;
  display: flex !important;
  align-items: center !important;
  z-index: 10000 !important;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.5);
  -webkit-tap-highlight-color: transparent;
  margin-top: -18px;
  /* こだわりの位置 */
}

/* 矢印の中身：フォントサイズを優先し、幅固定は解除 */
.arrow i {
  font-size: 34px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  /* 圧縮だけは絶対にさせない */
  color: inherit;
  /* width: 34px はあえて削除して「ちょうど良い」遊びを確保 */
  min-width: 1em;
  /* アイコンが消えないための最低限の保険 */
}

/* 左：端に寄せて4pxの隙間 */
.arrow.left {
  left: 0 !important;
  justify-content: flex-start !important;
  padding-left: 4px !important;
}

/* 右：端に寄せて4pxの隙間 */
.arrow.right {
  right: 0 !important;
  justify-content: flex-end !important;
  padding-right: 4px !important;
}

/* 閉じるボタン */
#closeBtn {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 38px;
  color: #fff;
  z-index: 100001;
  cursor: pointer;
  line-height: 1;
}

/* ==========================================
   4. CAROUSEL & EXIF
   ========================================== */
.carousel {
  position: absolute;
  bottom: 20px;
  left: 0;
  width: 100%;
  height: 70px;
  display: flex !important;
  align-items: center;
  overflow-x: scroll !important;
  -webkit-overflow-scrolling: touch;
  padding: 0 20px;
  box-sizing: border-box;
  z-index: 10001;
}

.carousel img {
  width: 50px;
  height: 50px;
  flex: 0 0 50px;
  margin-right: 8px;
  object-fit: cover;
  opacity: 0.5;
  border-radius: 6px;
  transition: transform 0.2s, opacity 0.2s;
}

.carousel img.active {
  opacity: 1;
  transform: scale(1.2);
  box-shadow: inset 0 0 0 2px #fff;
}

/* ==========================================
   4. CAROUSEL & EXIF (レイアウト維持・判定拡張)
   ========================================== */
/* EXIF表示エリア（2段対応・中央配置） */
.exif {
  position: absolute;
  bottom: 95px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.6);
  padding: 8px 18px;
  border-radius: 12px;
  /* カプセル型から少し角丸に変更 */
  font-size: 11px;
  z-index: 10001;
  display: flex;
  flex-direction: column;
  /* 縦に並べる */
  align-items: center;
  /* 中央揃え */
  min-width: 200px;
  max-width: 90%;
  /* スマホではみ出さない */
}

/* 投稿者名の行スタイル */
.uploader-name {
  font-weight: bold;
  color: #fff;
  font-size: 10px;
  margin-bottom: 2px;
}

/* データ行（Map/日付/ファイル名）のスタイル */
.exif-data-row {
  color: #ccc;
  white-space: nowrap;
  /* この行だけは改行させない */
  overflow: hidden;
  /* はみ出したら隠す */
  text-overflow: ellipsis;
  /* 末尾を「...」にする */
  width: 100%;
  text-align: center;
}

/* 地図リンクの判定エリア拡張 */
.exif a {
  position: relative;
  color: inherit;
  text-decoration: none;
}

.exif a::after {
  content: "";
  position: absolute;
  inset: -10px;
  /* タップ判定を周囲10px広げる */
}

/* 投稿者名のカプセル（本体） */
#uploader-info {
  position: absolute;
  bottom: 126px;
  /* 位置調整 */
  left: 4px;
  /* 最左 */
  color: #eee;
  /* 真っ白より少し落とした色 */
  font-size: 10px;
  /* 少し小さく */
  z-index: 10002;

  /* カプセルの装飾 */
  background: rgba(255, 255, 255, 0.15);
  /* かなり薄い白背景 */
  padding: 2px 10px;
  /* 上下を薄く、左右を少し広めに */
  border-radius: 20px;
  /* 角丸カプセル */
  backdrop-filter: blur(4px);
  /* 背景を少しボカすと高級感が出ます */
  border: 1px solid rgba(255, 255, 255, 0.1);
  /* 隠し味の細い枠線 */

  pointer-events: none;
}

/* ラベル部分 */
#uploader-info::before {
  content: "投稿者：";
  font-size: 9px;
  /* ラベルはさらに一回り小さく */
  opacity: 0.8;
  /* 少し透けさせる */
}


/* ==========================================
   5. ZOOM SYSTEM (実寸・適正余白版)
   ========================================== */

/* 拡大ボタン (ビューワー内) */
/* ズームボタン本体（位置と外枠） */
.zoom-btn {
  position: absolute;
  bottom: 124px;
  right: 12px;
  /* 矢印のこだわり(4px)と揃えた配置 */
  width: 38px;
  height: 38px;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  z-index: 10002;
  -webkit-tap-highlight-color: transparent;
  /* タップ時の枠消し */
}

/* 中のFont Awesomeアイコンを調整 */
.zoom-btn i {
  /* 外枠38pxに対して、18px〜20pxくらいがインスタ的なバランスです */
  font-size: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  /* ボタンが小さくてもアイコンを潰させない */
  width: auto !important;
  /* 矢印同様、遊びを持たせるためauto */
}

/* --- 5. ZOOM SYSTEM (画面Fit・見切れ防止版) --- */

/* style.css の .zoom-modal 周辺を差し替え */
.zoom-modal {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 999999;
  /* GridからFlexに変更。これで中身がはみ出した時に左端を起点にできます */
  display: flex !important;
  overflow: auto !important;
}

/* style.css の修正 */
.zoom-img-container {
  display: flex;
  justify-content: center;
  align-items: center;
  /* 画像が最大倍率(3倍)になっても余裕で収まる余白を確保 */
  padding: 150vh 150vw;
  width: max-content;
  height: max-content;
  background: #000;
}

#zoomImg {
  display: block;
  max-width: none !important;
  /* 拡大の基点はセンター */
  transform-origin: center center !important;
  will-change: transform;
}

.zoom-close-trigger {
  position: fixed;
  top: 8px;
  right: 8px;
  font-size: 46px;
  /* 後ほどご自身で微調整してください */
  color: #04fb56;
  cursor: pointer;
  z-index: 1000001;
  font-weight: bold;
  line-height: 1;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* ==========================================
   6. OTHER MODALS (MAP, etc.)
   ========================================== */
#mapModal {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 75dvh;
  /* 少し高さを出すとより没入感が出ます */
  background: rgba(20, 20, 20, 0.85);
  /* 少しだけ明るくして質感を出す */

  /* すりガラス効果 */
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);

  box-shadow: 0px -10px 30px rgba(0, 0, 0, 0.5);
  z-index: 200000;
  border-radius: 24px 24px 0 0;
  /* 角丸を少し強調 */

  /* ここが「ヌルっ」の正体 */
  transform: translateY(100%);
  /* cubic-bezier は Appleがよく使う「最初は速く、最後は吸い付くように止まる」魔法の数字です */
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* 表示された時の状態 */
#mapModal.active {
  transform: translateY(0);
}



.map-handle {
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.map-handle::after {
  content: "";
  width: 40px;
  height: 5px;
  background: #444;
  border-radius: 3px;
}

#googleMap {
  width: 100%;
  height: calc(70dvh - 40px);
  border: none;
}

.hidden {
  display: none !important;
}

/* 全てのaタグに対して：訪問済みでも色を変えない */
a:visited {
  color: inherit !important;
}

/* ナビゲーションボタンなど、個別に色指定がある場合の設定 */
.navBtn:visited {
  color: #0a84ff !important;
  /* 以前の参考コードにある青色を維持 */
}

/* 下線やその他の装飾も、訪問前後で変化させないための念押し */
a,
a:hover,
a:active,
a:visited {
  text-decoration: none;
}

/* =============================================
   PC用：ズームスライダー（ミニマル・センター固定）
   ============================================= */

/* スマホ・タブレット（タッチ操作）では完全に非表示 */
@media (hover: none) {
  .zoom-slider-container {
    display: none !important;
  }
}

/* PC（マウス操作）のみ表示 */
@media (hover: hover) {
  .zoom-slider-container {
    display: flex;
    align-items: center;
    gap: 15px;
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    z-index: 10005;
    background: none;
    border: none;
    padding: 0;
    user-select: none;
  }

  /* スライダー本体：左側が青く染まるグラデーション */
  #zoom-slider {
    -webkit-appearance: none;
    width: 160px;
    height: 2px;
    background: linear-gradient(to right,
        #007aff 0%,
        #007aff var(--value, 0%),
        rgba(255, 255, 255, 0.4) var(--value, 0%),
        rgba(255, 255, 255, 0.4) 100%);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
    margin: 0;
  }

  /* ツマミ（Thumb）：影なしエッジのみ */
  #zoom-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    background: #fff;
    border-radius: 50%;
    box-shadow: none;
    border: 0.5px solid rgba(0, 0, 0, 0.15);
    cursor: pointer;
  }

  /* ＋ー アイコン：クリック可能にする */
  .zoom-icon {
    color: #fff;
    font-size: 24px;
    opacity: 0.8;
    display: inline-block;
    position: relative;
    top: -2px;
    line-height: 1;
    cursor: pointer;
    /* クリック可能であることを示す */
    transition: opacity 0.2s;
  }

  .zoom-icon:hover {
    opacity: 1;
  }
}


/* アルバム一覧のテキスト色を #0A84FF に統一 */
.navBtn,
.navBtn a,
.navBtn a:visited {
  color: #0A84FF !important;
}

/* =============================================
   COMMENT SYSTEM (SAFETY LAYER)
   ============================================= */
/* 左上の吹き出しボタン */
#commentTrigger {
  position: fixed;
  top: max(15px, env(safe-area-inset-top));
  left: 15px;
  z-index: 20000;
  color: #fff;
  background: #0A84FF;
  padding: 8px 14px;
  border-radius: 18px 18px 18px 4px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  display: none;
  align-items: center;
  gap: 5px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

/* =============================================
   COMMENT TOOLTIP (LIGHT MODE / COMPACT)
   ============================================= */

/* ツールチップ全体 */
.comment-tooltip {
  position: fixed;
  top: calc(max(10px, env(safe-area-inset-top)) + 55px);
  left: 12px;
  width: auto;
  min-width: 320px;
  max-width: calc(85vw - 24px);
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border-radius: 20px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  z-index: 100000;
  display: none;
  flex-direction: column;
  overflow: hidden;
}

.comment-tooltip.active {
  display: flex;
}

/* 入力エリア（2段構成） */
.tooltip-input-area {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;

  border-bottom: 1px solid #eee;
}

/* 1段目：名前 */
.name-row {
  display: flex;
  justify-content: flex-start;
}

/* 2段目：本文 + ボタン */
.main-input-row {
  display: flex;
  align-items: flex-end;
  /* 伸びた時にボタンを下に置く */
  gap: 6px;
  width: 100%;
}

/* 共通：インプット欄（高さ最小 & R=50%） */
.name-input,
.text-input {
  background: #f2f2f7 !important;
  border: 1px solid #e5e5ea !important;
  color: #333 !important;
  font-size: 16px !important;
  /* iOSズーム防止 */
  outline: none;
  padding: 0 12px;
}

.name-input {
  width: 230px !important;
  height: 32px;
  /* ギリギリまで低く */
  border-radius: 16px !important;
  /* R50% */
}

/* 本文入力（Textarea：自動で伸びる設定） */
.text-input {
  flex: 1;
  min-height: 32px;
  max-height: 120px;
  border-radius: 16px !important;
  /* R50% */
  padding: 0px 12px;
  line-height: 1.8;
  resize: none;
  overflow-y: hidden;
  /* JSで高さを変えるので隠す */
  display: block;
}

/* 送信ボタン（円形） */
#sendComment {
  width: 32px;
  height: 32px;
  background: #007AFF;
  color: #fff !important;
  border-radius: 50%;
  border: none;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

#sendComment i {
  font-size: 12px;
}

#sendComment:active {
  background: #0051a8;
  transform: scale(0.9);
}

/* リスト部分 */
.tooltip-list {
  max-height: 200px;
  /* 必要に応じて調整 */
  overflow-y: auto !important;
  /* 強制的にスクロールを許可 */
  -webkit-overflow-scrolling: touch;
  /* iOSの慣性スクロールを有効化 */
  overscroll-behavior: contain;
  /* スクロールが端に達した時に背後を動かさない */
  touch-action: pan-y;
  /* 縦方向のタッチ操作のみを許可し、スワイプイベントの衝突を防ぐ */
  background: transparent;
  padding: 4px 12px;
}

.comment-item {
  padding: 4px 0;
  border-bottom: 1px solid #f0f0f0;
  text-align: left;
}

.comment-item:last-child {
  border-bottom: none;
}

.comment-meta {
  display: flex;
  justify-content: flex-start;
  gap: 8px;
  font-size: 11px;
  margin-bottom: 2px;
}

.comment-name {
  color: #007AFF;
  font-weight: 700;
}

.comment-date {
  color: #999;
}

/* 改行を反映させ、文章が長くても崩れないように */
.comment-text {
  font-size: 13px;
  line-height: 1.3;
  color: #444;
  word-break: break-all;
  white-space: pre-wrap;
}


/* 1. スクロールバー自体の横幅・縦幅 */
.tooltip-list::-webkit-scrollbar {
  width: 6px;
  /* 縦スクロールバーの幅 */
  display: block;
  /* 常時表示の意思表示 */
}

/* 2. スクロールバーの「通り道」（レール） */
.tooltip-list::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  /* ほんのりグレーの道を作る */
  border-radius: 10px;
}

/* 3. 動く「つまみ」部分 */
.tooltip-list::-webkit-scrollbar-thumb {
  background: rgba(0, 122, 255, 0.4);
  /* 青色を少し薄くして配置 */
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  /* 背景との境目を見やすく */
}

/* つまみを触った時 */
.tooltip-list::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 122, 255, 0.8);
}

/* 4. iOS向けの念押し設定 */
.tooltip-list {
  scrollbar-width: thin;
  /* Firefox用 */
  scrollbar-color: rgba(0, 122, 255, 0.4) rgba(0, 0, 0, 0.05);
  /* Firefox用 */
  -webkit-overflow-scrolling: touch;
}

/* =============================================
   ALBUM COMMENT BADGE (INTEGRATED STYLE)
   ============================================= */
.albumThumbWrap {
  position: relative;
}

.comment-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 5;
  color: #fff;
  /* #0A84FF（青）か #0cb601（緑）はお好みで。吹き出し形状を継承 */
  background: rgba(10, 132, 255, 0.35);
  padding: 2px 4px;
  border-radius: 12px 12px 12px 4px;
  /* 逆向きの吹き出し形状 */
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.comment-badge i {
  font-size: 10px;
}



/* =============================================================
   4x4 PUNKS ATTITUDE LAYER (TONE & MANNERS)
   既存のロジックを維持しつつ、Aboutページの世界観を強制注入
   ============================================================= */

/* 1. フォントとベーストーンの強制上書き */
body {
  /* 英字は既存のステンシルがあればそれを優先、日本語はKiwi Maruを強制 */
  font-family: 'Sirin Stencil', 'Kiwi Maru', serif !important;
  background-color: #000 !important;
  color: #d0d0d0 !important;
}

/* 2. 背景：Aboutページと共通の「漆黒とノイズ」を背後に忍ばせる */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  /* 極小のノイズ粒子を画面全体に被せる */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='lowNoise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.99' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23lowNoise)'/%3E%3C/svg%3E");
  opacity: 0.05;
  pointer-events: none;
  z-index: 9999;
  /* 全ての上に薄く質感を乗せる */
}

/* 3. トップバーの「とんまな」調整 */
.topbar {
  background: rgba(0, 0, 0, 0.8) !important;
  border-bottom: 1px solid #222;
  backdrop-filter: blur(10px) !important;
}

/* 4. アルバム名：Kiwi Maruを適用し、少し「不気味な愛嬌」を出す */
.albumName {
  font-family: 'Kiwi Maru', serif !important;
  font-weight: 500 !important;
  color: #eee !important;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8) !important;
  letter-spacing: 0.05em !important;
}

/* 5. ビューワー：Aboutページのような「深淵」へ */
.viewer {
  background: radial-gradient(circle at 50% 50%, rgba(20, 20, 20, 1) 0%, rgba(0, 0, 0, 1) 100%) !important;
}

/* 6. EXIF・アップローダー情報：少し「おちょくった」質感へ */
.exif,
#uploader-info {
  font-family: 'Kiwi Maru', serif !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #888 !important;
}

/* 7. コメントシステム：ここだけ少し「生々しい」質感にする */
.comment-tooltip {
  font-family: 'Kiwi Maru', serif !important;
  background: rgba(20, 20, 20, 0.9) !important;
  /* ダークモードへ強制 */
  border: 1px solid #333 !important;
}

.text-input,
.name-input {
  background: #1a1a1a !important;
  border: 1px solid #333 !important;
  color: #eee !important;
}

.comment-text {
  color: #ccc !important;
}





/* 10. 全体的な「とんまな」仕上げ */
img {
  /* 画像にうっすらと暗いフィルターをかけ、Aboutのトーンに合わせる */
  filter: brightness(0.9) contrast(1.1);
  transition: filter 0.3s ease;
}

.grid img:hover {
  filter: brightness(1.1) contrast(1.0);
}

/* =============================================================
   REMOVE BLUE OUTLINE (ANTI-FOCUS GIMMICK)
   ============================================ */
/* 全てのリンク、ボタン、入力欄から青い枠（アウトライン）を消去 */
a,
button,
input,
textarea,
div,
[onclick] {
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* ついでにフォーカスされた時も「何もしない」ことを強制 */
a:focus,
button:focus,
input:focus {
  outline: none !important;
  box-shadow: none !important;
}