/* ---------- Works · Bento 배치 (시안) ---------- */
  #gallery .wrap, .bento-host{ container-type:inline-size; }
  .gallery-grid.bento{
    --cols:4; --gap:16px;
    display:grid;
    grid-template-columns:repeat(var(--cols), 1fr);
    gap:var(--gap);
    /* 한 줄 높이 = 칸 너비의 0.375배 → 작은 타일(1칸×3줄)이 작품 사진과 같은 4:5 비율 */
    grid-auto-rows:calc((100cqi - (var(--cols) - 1) * var(--gap)) / var(--cols) * 0.375);
    grid-auto-flow:row dense;
  }
  .bento .b-S, .bento .b-info{ grid-column:span 1; grid-row:span 3; }
  .bento .b-W{ grid-column:span 2; grid-row:span 3; }
  .bento .b-L{ grid-column:span 2; grid-row:span 6; }
  .bento .b-T{ grid-column:span 2; grid-row:span 8; }  /* 액자 작품처럼 세로로 긴 사진 */

  .bento .b-tile{ position:relative; display:block; overflow:hidden; background:var(--dye-jjok-deep); }
  .bento .b-tile .art-photo{
    position:absolute; inset:0; aspect-ratio:auto; margin:0; border:0;
    background:var(--dye-jjok-deep);
  }
  .bento .b-tile .art-photo img{ width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.7,.2,1); }
  .bento .b-tile:hover .art-photo img{ transform:scale(1.04); }

  /* 작품 이름: 사진 아래쪽 곤색 그라데이션 위에 */
  .bento .cap{
    position:absolute; left:0; right:0; bottom:0;
    padding:56px 18px 16px;
    background:linear-gradient(to top, rgba(22,33,61,0.82) 0%, rgba(22,33,61,0.45) 55%, rgba(22,33,61,0) 100%);
    color:#FBF6EC; pointer-events:none;
  }
  .bento .cap h3{ font-family:var(--serif); font-weight:400; font-size:0.98rem; line-height:1.4; color:#FBF6EC; margin:0 0 4px; }
  .bento .cap p{ font-size:0.64rem; letter-spacing:0.1em; text-transform:uppercase; color:rgba(251,246,236,0.74); line-height:1.5; }
  .bento .cap .song{
    display:block; font-family:var(--latin); font-style:italic; font-size:0.86rem;
    color:#F0CFC6; margin-top:0; max-height:0; opacity:0; overflow:hidden;
    transition:max-height .45s ease, opacity .45s ease, margin-top .45s ease;
  }
  .bento .b-tile:hover .cap .song,
  .bento .b-tile:focus-visible .cap .song{ max-height:3em; opacity:1; margin-top:6px; }

  /* 큰 타일(L·W)은 글자도 크게, 노래 제목은 늘 보이게 */
  .bento .b-L .cap, .bento .b-W .cap, .bento .b-T .cap{ padding:90px 28px 24px; }
  .bento .b-L .cap h3, .bento .b-W .cap h3, .bento .b-T .cap h3{ font-size:clamp(1.15rem, 1.9cqi, 1.6rem); font-weight:300; margin-bottom:6px; }
  .bento .b-L .cap .song, .bento .b-W .cap .song, .bento .b-T .cap .song{ max-height:3em; opacity:1; margin-top:8px; font-size:0.98rem; }

  /* 안내 카드: 와인색 칸 */
  .bento .b-info{
    background:var(--wine); color:#FBF6EC;
    display:flex; flex-direction:column; justify-content:space-between;
    padding:22px 20px; transition:background .3s;
  }
  .bento .b-info:hover{ background:#6E1E31; }
  .bento .info-top{ display:flex; align-items:baseline; gap:8px; }
  .bento .info-no{ font-family:var(--latin); font-style:italic; font-weight:300; font-size:clamp(2.6rem, 6cqi, 4.4rem); line-height:1; color:var(--gold); }
  .bento .info-unit{ font-family:var(--serif); font-size:0.9rem; color:rgba(251,246,236,0.86); }
  .bento .info-years{ font-family:var(--latin); font-style:italic; font-size:1.05rem; letter-spacing:0.08em; color:rgba(251,246,236,0.78); border-top:1px solid rgba(251,246,236,0.24); padding-top:12px; }
  .bento .info-bottom{ font-family:var(--serif); font-size:0.88rem; line-height:1.6; color:#FBF6EC; }
  .bento .info-link{ display:table; margin-top:10px; font-family:var(--sans); font-size:0.74rem; letter-spacing:0.08em; color:var(--gold); border-bottom:1px solid var(--gold); padding-bottom:2px; }

  @media (max-width:820px){
    .gallery-grid.bento{ --cols:3; --gap:12px; }
  }
  @media (max-width:560px){
    .gallery-grid.bento{ --cols:2; --gap:8px; }
    .bento .cap{ padding:40px 12px 10px; }
    .bento .b-S .cap p{ display:none; }
    .bento .cap h3{ font-size:0.86rem; }
    .bento .b-L .cap, .bento .b-W .cap, .bento .b-T .cap{ padding:60px 16px 14px; }
    .bento .b-L .cap h3, .bento .b-W .cap h3, .bento .b-T .cap h3{ font-size:1.1rem; }
    .bento .b-L .cap .song, .bento .b-W .cap .song, .bento .b-T .cap .song{ font-size:0.86rem; }
    .bento .b-info{ padding:14px 12px; }
    .bento .info-bottom{ font-size:0.76rem; }
  }
  @media (prefers-reduced-motion:reduce){
    .bento .b-tile .art-photo img{ transition:none; }
    .bento .b-tile:hover .art-photo img{ transform:none; }
  }