@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400&display=swap');

body{
  margin:0;
  background:#f5f5f5;
  font-family:'EB Garamond', serif;
  color:#222;
}

/* 紙ノイズ */
body::before{
  content:"";
  position:fixed;
  inset:0;
  background:url("https://www.transparenttextures.com/patterns/paper-fibers.png");
  opacity:0.25;
  pointer-events:none;
}

/* ===== 展示フレーム ===== */
.wrapper{
  max-width:420px;
  margin:100px auto;
  padding:50px 0;
  position:relative;
}

.wrapper::before,
.wrapper::after{
  content:"";
  position:absolute;
  left:0;
  width:100%;
  height:1px;
  background:#aaa;
}

.wrapper::before{ top:0; }
.wrapper::after{ bottom:0; }

/* ===== ステージ ===== */
.stage{
  position:relative;
  height:600px;
}

/* タイトル */
.title{
  position:absolute;
  top:-60px;
  left:10px;
}

.catalog{
  font-size:11px;
  letter-spacing:2px;
  opacity:0.6;
}

/* 扉 */
.door{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:110px;
  z-index:5;
}

.door img{
  width:100%;
  display:block;
  filter:grayscale(100%);
  transition:0.4s;
}

.door:hover img{
  filter:grayscale(0%);
  transform:scale(1.03);
}

/* ===== コラージュ ===== */
.gallery{
  position:absolute;
  inset:0;
}

.item{
  position:absolute;
  cursor:grab;
  display:flex;
  flex-direction:column;
  align-items:center;

  filter:drop-shadow(0 3px 6px rgba(0,0,0,0.12));
}

.item:active{
  cursor:grabbing;
}

/* サイズ */
.item:nth-child(1){ width:60px;}
.item:nth-child(2){ width:85px;}
.item:nth-child(3){ width:55px;}
.item:nth-child(4){ width:75px;}
.item:nth-child(5){ width:50px;}

/* 画像 */
.item img{
  width:100%;
  display:block;
  filter:grayscale(100%);
  transition:0.3s;
}

.item:hover img{
  filter:grayscale(0%);
  transform:scale(1.08);
}

/* ラベル（密着） */
.label{
  margin-top:2px;
  font-size:9px;
  line-height:1.2;

  background:rgba(255,255,255,0.8);
  border:1px solid rgba(0,0,0,0.15);

  padding:1px 4px;
  letter-spacing:1px;

  transform:rotate(-1deg);
}

/* 配置（余白強め） */
.item:nth-child(1){
  top:5%;
  left:5%;
  transform:rotate(-10deg);
}

.item:nth-child(2){
  top:0%;
  left:70%;
  transform:rotate(8deg);
}

.item:nth-child(3){
  top:85%;
  left:0%;
  transform:rotate(-6deg);
}

.item:nth-child(4){
  top:60%;
  left:60%;
  transform:rotate(10deg);
}

.item:nth-child(5){
  top:95%;
  left:70%;
  transform:rotate(-4deg);
}

/* ===== ローディング ===== */
#loading{
  position:fixed;
  inset:0;
  background:#fff;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  z-index:9999;
}

.loading-bar{
  width:200px;
  height:2px;
  background:#ddd;
}

.progress{
  height:100%;
  width:0;
  background:#444;
}

.loading-text{
  font-size:11px;
  margin-top:10px;
  letter-spacing:2px;
}

#loading.hide{
  opacity:0;
  pointer-events:none;
}