@charset "utf-8";

/* =========================================================
   WORKS 詳細ポップアップ（ウィンドウ表示）
   ========================================================= */
body.is-locked { overflow: hidden; }

/* ---------- 背景（TOPページが透けて見える） ---------- */
.popup {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  background: rgba(20, 20, 18, .55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  animation: popup-fade .22s ease-out;
}
.popup[hidden] { display: none; }

@keyframes popup-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- ウィンドウ本体 ---------- */
.popup__window {
  position: relative;
  display: flex; flex-direction: column;
  width: 100%; height: 100%;
  background: var(--white);
  overflow: hidden;
  animation: popup-rise .26s cubic-bezier(.2, .7, .3, 1);
}

@keyframes popup-rise {
  from { transform: translateY(12px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* ---------- 上部バー ---------- */
.workbar {
  flex: none;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 10px var(--gutter);
  background: var(--white);
  border-bottom: 1px solid var(--line);
}
.workbar__title {
  font-size: 11px; font-weight: 400; letter-spacing: .02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.workbar__close {
  flex: none; width: 22px; height: 22px; padding: 0;
  background: none; border: 0; cursor: pointer; color: var(--ink);
}
.workbar__close svg { width: 100%; height: 100%; display: block; }

/* ---------- 中身（ここがスクロールする） ---------- */
.popup__body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-bottom: 32px;
}

/* ---------- 写真 ----------
   写真同士は隙間なく詰めます。線を入れたい場合は
   下の gap を 1px にしてください（--line ではなく白）。 */
.popup__shots { display: flex; flex-direction: column; gap: 0; }

/* justified layout —
   行内の各コマは flex-grow に縦横比を持つ（JS側で指定）。
   幅が縦横比の比率で配分されるため、行の高さが自動的に揃います。
   コマの aspect-ratio は写真と一致させてあるので切り取られません。 */
.shot-row {
  display: flex;
  gap: 0;
  align-items: flex-start;
  justify-content: center;
  /* 行は常にウィンドウ幅いっぱいまで広がります（左右に余白を作らない）。
     高さは行内の縦横比の合計から自動で決まります。 */
}

.shot { flex: 1 1 0; min-width: 0; }
.shot img { width: 100%; height: 100%; object-fit: cover; display: block; }

.popup__video { width: 100%; background: #000; line-height: 0; }
.popup__video iframe,
.popup__video video { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }

.popup__loading {
  padding: 48px 0; text-align: center;
  font-size: 11px; color: var(--muted);
}

/* ---------- キャプション ---------- */
.popup__caption {
  padding: 28px var(--gutter) 0;
  font-size: 12px; line-height: 2; white-space: pre-wrap;
}

/* ---------- クレジット ---------- */
.credit {
  padding: 24px var(--gutter) 0;
  font-size: 9px; line-height: 1.85; color: var(--muted);
}
.credit__row { display: flex; gap: 8px; }
.credit__row dt { flex: none; min-width: 108px; }
.credit__row dd { flex: 1 1 auto; min-width: 0; }

.popup__copy {
  padding: 28px var(--gutter) 0;
  font-size: 9px; color: var(--muted); text-align: right;
}

/* =========================================================
   DESKTOP — ここでウィンドウらしく浮かせる
   ========================================================= */
@media (min-width: 768px) {
  .popup { padding: 40px 32px; }

  .popup__window {
    width: min(1040px, 100%);
    height: auto;
    max-height: 100%;
    box-shadow: 0 24px 64px rgba(0, 0, 0, .28);
  }

  .workbar { padding: 12px var(--gutter); }
  .workbar__title { font-size: 12px; }
  .workbar__close { width: 24px; height: 24px; }

  .popup__shots { gap: 0; }
  .shot-row { gap: 0; }

  .popup__caption { padding-top: 40px; font-size: 13px; max-width: 46em; }
  .credit { padding-top: 32px; font-size: 10px; }
  .credit__row dt { min-width: 150px; }
  .popup__copy { font-size: 10px; }
}