/* =========================================================================
   jiyucho-chest.css
   -------------------------------------------------------------------------
   添付の完成版HTML(動くタンス最終完成版.html)内の<style>をそのまま移植。
   レイアウト・アニメーション・サイズ・座標・easingは一切変更していない。
   ========================================================================= */

.interactive-chest-container {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  user-select: none;
  perspective: 1000px;
}

.chest-base-img {
  width: 100%;
  height: auto;
  display: block;
}

.drawer-open-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.1s ease;
}

.drawer-open-wrapper img {
  width: 100%;
  height: auto;
  display: block;
}

.drawer-open-wrapper.slot-1 { margin-top: 0%; }
.drawer-open-wrapper.slot-2 { margin-top: 23.8%; }
.drawer-open-wrapper.slot-3 { margin-top: 45.5%; }

.drawer-open-wrapper.is-open {
  opacity: 1;
}

/* -----------------------------------
   ★ 飛び出すコンテンツ（位置＆サイズ設定）
----------------------------------- */
.pop-content {
  position: absolute;
  left: 14%; /* ★ 左に寄せて右側の枠被りを防止（数値が小さいほど左へ） */
  width: 55%; /* ★ 迫力のある元のサイズに戻しました */
  z-index: 4;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s ease;
  transform-origin: bottom center;
}

/* ★ 修正: 開いた状態のカードは .click-area(z-index:10) より手前(15)に引き上げる。
   閉じている間は z-index:4 のままなので、他の段の .click-area(z-index:10) が
   正しく開閉を受け付ける。開くとカード自身が最前面に来るので、
   隣の段の .click-area に重なっていてもそちらへクリックが取られず、
   カード自身のリンクへ正しく遷移できる。 */
.pop-content.is-open {
  z-index: 15;
}

/* ===============================================
   ★ 各段ごとの個別位置・アニメーション設定
=============================================== */

/* --- 1段目（上段） --- */
.pop-content.slot-1 { top: 12%; transform: translateY(15px) scale(0.6); }
.pop-content.slot-1.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-42px) scale(1.05); /* ★ 現在バッチリな数値 */
}

/* --- 2段目（中段） --- */
.pop-content.slot-2 { top: 30%; transform: translateY(15px) scale(0.6); } /* topを小さくして初期位置を上へ */
.pop-content.slot-2.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-34px) scale(1.05); /* ★ 飛び出し量を大きくして枠被りを回避 */
}

/* --- 3段目（下段） --- */
.pop-content.slot-3 { top: 50%; transform: translateY(15px) scale(0.6); } /* topを小さくして初期位置を上へ */
.pop-content.slot-3.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-55px) scale(1.05); /* ★ 飛び出し量を大きくして枠被りを回避 */
}

/* カード共通デザイン（画像オンリー） */
.pop-card {
  display: block;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
  border: 4px solid #fff;
  background: #fff;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  /* ★ 表示枠を先に固定し、画像の縦横比に依存させない。
     .pop-card--empty(Coming Soonプレースホルダー)と同じ比率にすることで、
     記事の有無やアップロードされた画像の形(縦長/横長/正方形)に関わらず
     引き出しの位置・カードのサイズが常に一定になる。 */
  aspect-ratio: 400 / 250;
}

.pop-card:hover {
  transform: scale(1.03) translateY(-3px);
  box-shadow: 0 15px 30px rgba(0,0,0,0.4);
}

.pop-card img {
  /* ★ width:100%; height:auto; (画像本来の比率でカードの高さが決まる)から、
     width/height共に100%+object-fit:coverに変更。カードの表示枠(上のaspect-ratio)
     を画像の形に関わらず埋め、はみ出したり潰れたりしないようにする。
     結果としてトリミングは発生するが、枠を固定するご要望を優先している。 */
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* カテゴリータグ */
.category-tag {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: bold;
  color: #fff;
  border-radius: 20px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  z-index: 2;
}

.tag-making { background: #ff5252; }
.tag-image  { background: #4ba3e3; }
.tag-doodle { background: #ffb142; }

/* クリック判定用エリア */
.click-area {
  position: absolute;
  left: 10%;
  width: 75%;
  height: 19%;
  cursor: pointer;
  z-index: 10;
}

.click-area.slot-1 { top: 30.5%; }
.click-area.slot-2 { top: 50.5%; }
.click-area.slot-3 { top: 68.5%; }

/* =========================================================================
   ★ ここから下は、WordPress接続にあたって新規追加した分(元デザインには
   存在しない状態への対応)。既存のルールは一切変更していない。
   ========================================================================= */

/* 該当カテゴリーに投稿が1件も無い場合の「Coming Soon」プレースホルダー。
   .pop-card と同じ外寸(4:2.5 = 400x250相当)を保つことで、
   レイアウトが崩れないようにしている。 */
.pop-card--empty {
  aspect-ratio: 400 / 250;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f2ede1;
  color: #a99872;
  font-family: "Klee One", "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .05em;
}

/* 将来、making/sketch/doodle 以外のカテゴリーが追加された場合の
   タグ色フォールバック(既存3色のいずれにも該当しない場合のみ使用)。 */
.tag-generic { background: #8d8d8d; }