/* プロフィール帳モーダル（拡大縮小ビューワ）。詳細: docs/profsheet-modal-implementation-notes.md */

/* ===== プロフィール帳モーダル ===== */

/* ProfileZoom が要求する必須スタイル（詳細: 実装メモ） */
.pm-viewport {
  position: relative;
  overflow: hidden;
  touch-action: none;
  cursor: grab;
}

.pm-viewport.is-dragging {
  cursor: grabbing;
}

.pm-canvas {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
}

.pm-image {
  display: block;
  max-width: none;
  max-height: none;
  /* ズーム・パン操作の成立に必須（詳細: 実装メモ） */
  user-select: none;
  -webkit-user-drag: none;
  touch-action: none;
  /* 画像保存防止（詳細: 実装メモ） */
  -webkit-touch-callout: none;
}

.pm-modal {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
}

.pm-modal::backdrop {
  /* Figma実測（ノード2776-21718）: bg-[rgba(0,0,0,0.8)] */
  background: rgba(0, 0, 0, .8);
}

.pm-controls {
  position: absolute;
  top: 29px;
  right: 25px;
  display: flex;
  gap: 18.67px;
  z-index: 2;
}

.pm-controls button {
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: transparent no-repeat center / contain;
  cursor: pointer;
}

/* アイコン28×28・白抜き。詳細度をクラス2個にする理由は実装メモ参照 */
.pm-controls .pm-fullscreen { background-image: url(../img/icon_modal_fullscreen.svg); }
.pm-controls .pm-close      { background-image: url(../img/icon_modal_close.svg); }

/* zoom_in/zoom_out は21×21で書き出し。サイズ明示の理由は実装メモ参照 */
.pm-controls .pm-zoom-in {
  background-image: url(../img/icon_modal_zoomin.svg);
  background-size: 21px 21px;
}
.pm-controls .pm-zoom-out {
  background-image: url(../img/icon_modal_zoomout.svg);
  background-size: 21px 21px;
}

.pm-controls button:disabled {
  opacity: .35;
  cursor: default;
}

/* --pm-img-w は3値の最小値で決める（幅・マージン・高さ逆算）。詳細は実装メモ参照 */
.pm-modal {
  --pm-top: 129px;      /* 画像上端までの余白（Figma実測） */
  --pm-bottom: 175px;   /* 画像下端からモーダル下端まで（ボタン領域を含む） */
  --pm-side: 100px;     /* 画像左右の最小マージン */
  --pm-arrow-gap: 24px; /* 矢印と画像の間隔（Figma実測 約23〜26px） */
  --pm-slot-h: calc(100dvh - var(--pm-top) - var(--pm-bottom));
  --pm-img-w: min(1014px, calc(100% - 2 * var(--pm-side)), calc(var(--pm-slot-h) * 1014 / 720));
  --pm-img-top: calc(var(--pm-top) + var(--pm-slot-h) / 2); /* 画像エリアの垂直中心 */
}

.pm-modal.is-gallery {
  --pm-bottom: 155px; /* 下部パネルの代わりにサムネイル分だけ確保 */
}

/* 画像エリア。position: absolute への上書きはソース順依存（詳細: 実装メモ） */
.pm-viewport {
  position: absolute;
  top: var(--pm-img-top);
  left: 50%;
  width: var(--pm-img-w);
  aspect-ratio: 1014 / 720;
  transform: translate(-50%, -50%);
}

.pm-prev,
.pm-next {
  position: absolute;
  top: var(--pm-img-top);
  width: 57px;
  height: 57px;
  padding: 0;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  z-index: 2;
  transform: translateY(-50%);
  /* 矢印アセットは共用し .pm-next だけ水平反転（詳細: 実装メモ） */
  background: url(../img/icon_modal_arrow_prev.svg) no-repeat center / contain;
}

.pm-prev { left: calc(50% - var(--pm-img-w) / 2 - var(--pm-arrow-gap) - 57px); }
.pm-next {
  left: calc(50% + var(--pm-img-w) / 2 + var(--pm-arrow-gap));
  transform: translateY(-50%) scaleX(-1);
}

.pm-prev:disabled,
.pm-next:disabled {
  opacity: .35;
  cursor: default;
}

.pm-panel {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

.pm-thumbs {
  display: none;
}

.pm-modal.is-gallery .pm-thumbs {
  position: absolute;
  bottom: 35px;
  left: 50%;
  display: flex;
  gap: 24px;
  align-items: flex-start;
  justify-content: center;
  height: 100px;
  transform: translateX(-50%);
  z-index: 2;
}

/* 1件のときは renderThumbs() が空にする。空のバー自体も出さない */
.pm-modal.is-gallery .pm-thumbs:empty {
  display: none;
}

.pm-thumb {
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  height: 100px;
}

.pm-thumb img {
  display: block;
  width: auto;
  height: 100%;
  border-radius: 10px;
}

.pm-modal.is-gallery .pm-panel {
  display: none;
}

/* PCでは下部パネル内の矢印（SP用）は使わない */
.pm-nav { display: none; }

.pm-actions {
  position: absolute;
  bottom: 59px; /* 1024 - 889 - 76 */
  left: 0;
  display: flex;
  justify-content: center;
  gap: 40px;
  width: 100%;
}

.pm-back,
.pm-detail {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 320px;
  height: 76px;
  text-decoration: none;
  /* Figma実測（詳細: 実装メモ） */
  border: 3px solid #fff;
  border-radius: 5px;
  background: transparent;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
}

/* 疑似全画面: 下部パネルと矢印を隠す（詳細: 実装メモ） */
.pm-modal.is-fullscreen .pm-panel,
.pm-modal.is-fullscreen .pm-prev,
.pm-modal.is-fullscreen .pm-next {
  display: none;
}

.pm-modal.is-fullscreen .pm-viewport {
  top: 67px;
  left: 0;
  width: 100%;
  max-width: none;
  height: calc(100% - 67px);
  aspect-ratio: auto;
  transform: none;
}

/* 画像の読み込みに失敗した状態。ズームボタンはJS側で disabled にしている */
.pm-modal.is-image-error .pm-viewport::after {
  content: "画像を読み込めませんでした";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
}

/* 読み込み中の表示。CSSのみのスピナーで覆う（詳細: 実装メモ） */
.pm-loading {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  background: rgba(51, 54, 59, .55);
  z-index: 1;
}

.pm-modal.is-loading .pm-loading {
  display: flex;
}

.pm-spinner {
  width: 48px;
  height: 48px;
  border: 5px solid rgba(255, 255, 255, .35);
  border-top-color: #FF6623;
  border-radius: 50%;
  animation: pm-spin .8s linear infinite;
}

@keyframes pm-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 767.98px) {
  .pm-controls {
    top: 8px;
    right: 19px;
  }

  /* .pm-viewport は「画像を覗く窓」モデルで定義する（詳細: 実装メモ） */
  .pm-modal {
    --pm-sp-viewport-top: 44px;
    --pm-sp-panel-h: 125px;
    --pm-sp-panel-top: calc(100dvh - var(--pm-sp-panel-h));
    --pm-sp-gap: 4px;
    --pm-sp-viewport-h: max(0px, calc(var(--pm-sp-panel-top) - var(--pm-sp-viewport-top) - var(--pm-sp-gap)));
  }

  .pm-viewport {
    top: var(--pm-sp-viewport-top);
    left: 12px;
    width: calc(100% - 24px);
    height: var(--pm-sp-viewport-h);
    aspect-ratio: auto;
    max-width: none;
    transform: none;
  }

  /* PCの左右矢印は隠し、下部パネル内のラベル付きボタンを使う（設計書 §10.4） */
  .pm-prev,
  .pm-next {
    display: none;
  }

  .pm-panel {
    height: var(--pm-sp-panel-h);
    /* Figma実測。拡大時も同値で画像が透けて見える（詳細: 実装メモ） */
    background: rgba(103, 103, 103, .9);
  }

  .pm-nav {
    position: absolute;
    top: 8px;
    left: 50%;
    display: flex;
    gap: 24px;
    transform: translateX(-50%);
  }

  .pm-nav button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 142px;
    height: 57px;
    padding: 0;
    border: none;
    cursor: pointer;
    /* ブラック地のピル形（詳細: 実装メモ） */
    border-radius: 28.5px;
    background: #33363b;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
  }

  /* ピル端の丸アイコン。PCの矢印アセットを共用（詳細: 実装メモ） */
  .pm-nav button::before {
    content: "";
    position: absolute;
    top: 0;
    width: 57px;
    height: 57px;
    background: url(../img/icon_modal_arrow_prev.svg) no-repeat center / contain;
  }

  /* 詳細度をクラス2個にして優先させる（詳細: 実装メモ） */
  .pm-nav .pm-prev-sp {
    padding-left: 57px;
  }

  .pm-prev-sp::before {
    left: 0;
  }

  .pm-nav .pm-next-sp {
    padding-right: 57px;
  }

  .pm-next-sp::before {
    right: 0;
    transform: scaleX(-1);
  }

  .pm-nav button:disabled {
    opacity: .35;
    cursor: default;
  }

  .pm-actions {
    bottom: 8px;
    gap: 12px;
  }

  .pm-back,
  .pm-detail {
    width: 160px;
    height: 44px;
    /* Figma実測（詳細: 実装メモ） */
    border: 1.265px solid #fff;
    border-radius: 4px;
    font-size: 14px;
  }

  .pm-modal.is-fullscreen .pm-viewport {
    top: var(--pm-sp-viewport-top);
    left: 0;
    width: 100%;
    height: calc(100% - var(--pm-sp-viewport-top));
  }

  .pm-spinner {
    width: 36px;
    height: 36px;
    border-width: 4px;
  }

  .pm-modal.is-gallery {
    --pm-sp-panel-h: 131px; /* 画像窓のサイズ計算をサムネイル帯の高さに合わせる */
  }

  .pm-modal.is-gallery .pm-thumbs {
    bottom: 0;
    left: 0;
    width: 100%;
    height: 131px;
    padding-top: 27px;
    gap: 18.176px;
    background: rgba(103, 103, 103, .9);
    transform: none;
  }

  .pm-modal.is-gallery .pm-thumb {
    height: 75.75px;
  }

  .pm-modal.is-gallery .pm-thumb img {
    border-radius: 7.573px;
  }

  .pm-modal.is-gallery .pm-prev,
  .pm-modal.is-gallery .pm-next {
    display: none;
  }
}