/* ギャラリー（v1。2026-11-12）。接頭辞 gl-。絵の枠 .va-frame は va.css */

/* ===== 題名の段 ===== */
.gl-ph .va-in{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:28px 56px;align-items:end}
.gl-who{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:18px}
.gl-who .va-mini{width:96px}
.gl-who b{display:block;font-weight:900;font-size:17px}
.gl-who small{font-family:var(--px);font-size:11px;color:var(--mute)}
.gl-noad{position:relative;background:var(--paper2);border:var(--bd);box-shadow:var(--sh);padding:22px 22px 22px 120px;transform:rotate(1deg)}
.gl-noad .stamp{position:absolute;left:18px;top:50%;width:84px;height:84px;margin-top:-42px;border:3px solid var(--coral);border-radius:999px;display:grid;place-items:center;align-content:center;text-align:center;color:var(--coral);transform:rotate(-12deg)}
.gl-noad .stamp b{font-family:var(--en);font-weight:800;font-size:12px;letter-spacing:.04em;line-height:1}
.gl-noad .stamp span{font-family:var(--px);font-size:10px;margin-top:4px}
.gl-noad p:not(.stamp){font-size:14px;line-height:1.75;font-weight:700;color:var(--ink);margin-bottom:14px}

/* ===== しぼる ===== */
.gl-filter{padding:26px 0 24px}
.gl-filter .row{display:grid;grid-template-columns:5.5em minmax(0,1fr);gap:14px;align-items:start}
.gl-filter .row+.row{margin-top:16px}
.gl-filter h2{font-weight:900;font-size:14px;padding-top:8px}
.gl-filter p{display:flex;flex-wrap:wrap;gap:8px}
.gl-chip{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border:var(--bd);background:var(--paper);color:var(--ink);text-decoration:none;font-weight:700;font-size:13.5px;line-height:1.2;transition:background .15s,transform .15s}
.gl-chip small{font-family:var(--px);font-size:10.5px;color:var(--mute);font-weight:400}
.gl-chip:hover{background:var(--paper2);transform:translate(-1px,-1px)}
.gl-chip.on{background:var(--ink);color:var(--paper2)}
.gl-chip.on small{color:#bdb8ab}
.gl-filter .row[hidden]{display:none}   /* タレントの札が無いとき（0枚・棚の案）は、段ごと出さない */
.gl-talents{display:flex;gap:8px;overflow-x:auto;padding-bottom:8px;scrollbar-width:thin}
.gl-talents .gl-chip{padding:4px 12px 4px 4px;white-space:nowrap}
.gl-talents .va-mini{width:56px;border-width:1.5px}
.gl-talents b{display:block;font-size:13px}

/* ===== 絵の並び ===== */
.gl-grid{columns:4 240px;column-gap:26px}
.gl-item{break-inside:avoid;margin-bottom:30px}
.gl-tag{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.gl-tag a{color:var(--ink);text-decoration:none}
.gl-tag a:hover b{color:var(--coral)}
.gl-tag b{font-weight:900;font-size:15px}
.gl-empty{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:48px;align-items:center;padding:10px 0 20px}
.gl-empty .wall{position:relative;height:340px}
.gl-empty .wall>div{position:absolute}
.gl-empty .f1{left:4%;top:10px;width:46%;transform:rotate(-4deg)}
.gl-empty .f2{left:44%;top:60px;width:44%;transform:rotate(3deg)}
.gl-empty h2{font-weight:900;font-size:clamp(26px,3vw,38px);line-height:1.3;letter-spacing:-.03em;margin-bottom:14px}
.gl-empty p{font-size:15px;line-height:1.8;color:var(--ink2)}
.gl-empty .act{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}

/* ===== このページについて ===== */
.gl-rules{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px;border-top:var(--bd)}
.gl-rules>div{padding:14px 0;border-bottom:1.5px dashed var(--line)}
.gl-rules dt{font-weight:900;font-size:15.5px}
.gl-rules dd{font-size:14px;line-height:1.75;color:var(--ink2);margin-top:3px}
.gl-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}

@media (max-width:900px){
  .gl-ph .va-in{grid-template-columns:1fr}
  .gl-empty{grid-template-columns:1fr;gap:24px}
  .gl-empty .wall{height:260px;max-width:460px}
  .gl-rules{grid-template-columns:1fr}
}
/* ============ 並べ方の別案（?lay=wall|shelf|room。2026-11-12。既定は上の段組み） ============ */
.gl-sub{margin:-14px 0 22px}
/* 額の下の帯：描いた人の名前とXの投稿へのリンクは、額が小さくても隠さない（va.css の「小さい額は右のリンクを隠す」を、このページの案では使わない） */
.va-frame .gl-fc{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:1px 8px}
.gl-fc .gl-ct{grid-column:1/-1;display:flex;align-items:baseline;gap:6px;min-width:0;white-space:nowrap;overflow:hidden}
.gl-fc .gl-ct a{flex:0 0 auto;max-width:100%;overflow:hidden;text-overflow:ellipsis;color:var(--ink);text-decoration:none}   /* タレントの名前を先に。事務所と日付のほうを縮める */
.va-frame .gl-fc .gl-ct b{font-size:14px}
.gl-fc .gl-ct a:hover b{color:var(--coral)}
.gl-fc .gl-ct small{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:10px;color:var(--mute)}
.gl-fc .gl-ct .d{margin-left:auto}
.gl-fc .gl-by{min-width:0;overflow-wrap:anywhere}   /* 描いた人の名前は切らない（長いときは折り返す） */
.va-frame .gl-fc .gl-x{display:inline;white-space:nowrap;color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.gl-x i{font-style:normal}
a.gl-x:hover{color:var(--coral)}
@container (max-width:220px){
  .gl-x .lg{display:none}
  .va-frame .gl-fc .gl-ct b{font-size:11.5px}
  .gl-fc .gl-ct small{display:none}
}
/* 空きの額（0枚のとき・棚の「次の1枚」）：影を消して点線に */
.va-frame.ghost{box-shadow:none;border-style:dashed;border-color:var(--mute);background:rgba(251,249,244,.55)}
.va-frame.ghost figcaption{color:var(--mute)}
.va-frame.ghost figcaption b{color:var(--mute)}

/* ----- 案1 壁：段ごとに高さをそろえ、端から端まで（段の切れ目と幅は gallery.js の justify） ----- */
.gl-wall{--g:16px;display:flex;flex-direction:column;gap:var(--g)}
.gl-w-row{display:flex;justify-content:space-between;align-items:stretch;gap:var(--g)}
.gl-w-row.last{justify-content:flex-start}
.gl-w-it{flex:none;min-width:0}
.gl-w-it>.va-frame{width:100%;height:100%;display:flex;flex-direction:column}   /* 同じ段の額は、下の帯の高さもそろえる */
.gl-w-it>.va-frame>.in{flex:none}
.gl-w-it>.va-frame>figcaption{flex:1;align-content:start}
.gl-w-empty{position:relative}
.gl-w-empty .gl-wall{opacity:.7}
.gl-w-empty .gl-w-row:nth-child(n+4){display:none}   /* 空きの壁は3段まで */
.gl-w-empty .msgw{position:absolute;inset:0;display:grid;place-items:center;padding:16px;pointer-events:none}
.gl-w-empty .msg{pointer-events:auto;width:min(560px,100%);padding:26px 28px 28px;box-shadow:var(--sh-l);transform:rotate(-.8deg)}
.gl-w-empty .msg .va-stick{margin-bottom:14px}
.gl-w-empty .msg h2{font-weight:900;color:var(--ink);font-size:clamp(24px,2.8vw,34px);line-height:1.3;letter-spacing:-.03em;margin-bottom:12px}
.gl-w-empty .msg p{font-size:15px;line-height:1.8;color:var(--ink2)}
.gl-w-empty .msg .act{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}

/* ----- 案2 棚：タレントごとに1段。額は棚板の上に、下の端をそろえて立てる ----- */
.gl-shelves{display:grid;grid-template-columns:minmax(0,1fr);gap:52px 52px}
@media (min-width:1100px){.gl-shelves{grid-template-columns:repeat(2,minmax(0,1fr))}}   /* 広い画面は2列の本棚 */
.gl-s{--s:196px;min-width:0}
.gl-s-empty{--s:210px}
.gl-s-hd{display:flex;align-items:center;flex-wrap:wrap;gap:12px 20px;margin-bottom:14px}
.gl-s-hd .who{display:flex;align-items:center;gap:14px;min-width:0;color:var(--ink);text-decoration:none}
.gl-s-hd .who .va-mini{width:112px}
.gl-s-hd .who b{display:block;font-weight:900;font-size:clamp(20px,2.1vw,27px);line-height:1.2;letter-spacing:-.03em;font-feature-settings:"palt"}
.gl-s-hd .who small{display:flex;align-items:center;gap:8px;margin-top:5px}
.gl-s-hd .who em{font-style:normal;font-family:var(--px);font-size:11.5px;color:var(--mute)}
a.who:hover b{color:var(--coral)}
.gl-s-hd .acts{display:flex;flex-wrap:wrap;gap:10px;margin-left:auto}
.gl-s-hd .mv{display:flex;gap:8px}
.gl-s-hd .mv[hidden]{display:none}
.gl-s-hd .mv button{width:38px;height:36px;border:var(--bd);background:var(--paper2);color:var(--ink);box-shadow:3px 3px 0 var(--ink);font-family:var(--px);font-size:15px;cursor:pointer;transition:transform .15s,box-shadow .15s}
.gl-s-hd .mv button:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.gl-s-hd .mv button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.gl-s-row{display:flex;align-items:flex-end;gap:24px;overflow-x:auto;padding:10px 8px 6px 2px;scroll-snap-type:x proximity;scrollbar-width:thin;scroll-padding-left:2px}
.gl-s-it{display:block;flex:none;width:calc(var(--s) * var(--rs) + 22px);scroll-snap-align:start}
.gl-s-it>.va-frame .in{width:100%}
.gl-s-board{position:relative;height:16px;margin-top:-6px;background:var(--paper2);border:var(--bd);box-shadow:var(--sh)}
.gl-s-board::before{content:"";position:absolute;left:0;right:0;top:3px;height:2px;background:repeating-linear-gradient(90deg,var(--line) 0 10px,transparent 10px 16px)}
.gl-s-add{color:inherit;text-decoration:none}
.gl-s-add .va-frame{transition:border-color .15s,transform .15s}
.gl-s-add:hover .va-frame{border-color:var(--coral);border-style:solid;transform:translate(-1px,-1px)}
.gl-s-add:hover .va-frame .in span{color:var(--coral)}
.gl-s-empty .who.sample .ph{flex:none;width:112px;aspect-ratio:16/9;border:2px dashed var(--mute);background:repeating-linear-gradient(-45deg,transparent 0 7px,rgba(21,21,21,.06) 7px 8px),var(--paper)}
.gl-s-empty .who.sample small{display:block;font-family:var(--px);font-size:11px;color:var(--mute)}
.gl-s-msg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:8px 40px;align-items:start;margin-top:30px}
.gl-s-msg h2{grid-row:span 2;font-weight:900;color:var(--ink);font-size:clamp(24px,2.8vw,34px);line-height:1.3;letter-spacing:-.03em}
.gl-s-msg p{font-size:15px;line-height:1.8;color:var(--ink2)}
.gl-s-msg .act{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}

/* ----- 案3 展示室：1枚を大きく。右に説明の札、下に小さな一覧 ----- */
.gl-r{--rh:min(64vh,600px);display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,360px);grid-template-areas:"art cap" "art nav" "art .";grid-template-rows:auto auto 1fr;gap:22px 40px;align-items:start}
.gl-sub .kbd{display:none}
@media (hover:hover) and (pointer:fine){.gl-sub .kbd{display:inline}}
.gl-r-art{grid-area:art;align-self:stretch;display:grid;place-items:center;min-height:calc(var(--rh) + 96px);padding:28px 24px;background:var(--paper2);border:var(--bd);
  background-image:repeating-linear-gradient(90deg,transparent 0 47px,rgba(21,21,21,.035) 47px 48px)}
.gl-r-fr{width:min(100%,calc(var(--arn) * var(--rh) + 22px))}
.gl-r-fr>.va-frame{box-shadow:var(--sh-l)}
[data-motion="on"] .gl-r.swap .gl-r-fr{animation:gl-swap .42s var(--ease)}
@keyframes gl-swap{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.gl-r-cap{grid-area:cap;padding:22px 22px 20px}
.gl-r-cap .no{display:flex;align-items:baseline;gap:10px;color:var(--ink)}
.gl-r-cap .no b{font-family:var(--en);font-weight:800;font-size:46px;line-height:1;letter-spacing:0}
.gl-r-cap .no span{font-family:var(--px);font-size:12px;color:var(--mute)}
.gl-r-cap .who{display:flex;align-items:center;gap:12px;margin:16px 0 14px;color:var(--ink);text-decoration:none}
.gl-r-cap .who .va-mini{width:100px}
.gl-r-cap .who b{display:block;font-weight:900;font-size:21px;line-height:1.25;letter-spacing:-.02em}
.gl-r-cap .who small{font-family:var(--px);font-size:11px;color:var(--mute)}
.gl-r-cap dl{border-top:var(--bd)}
.gl-r-cap dl>div{display:grid;grid-template-columns:5.5em minmax(0,1fr);align-items:baseline;padding:9px 0;border-bottom:1.5px dashed var(--line)}
.gl-r-cap dt{font-family:var(--px);font-size:11px;color:var(--mute)}
.gl-r-cap dd{font-size:14px;color:var(--ink2);overflow-wrap:anywhere}
.gl-r-cap dd b{font-weight:900;font-size:17px;color:var(--ink)}
.gl-r-cap .xl{margin:16px 0 14px}
.gl-r-cap .xl .va-btn{width:100%}
.gl-r-cap .acts{display:flex;flex-wrap:wrap;gap:10px}
.gl-r-cap .more{margin-top:14px;font-size:13px;font-weight:700}
.gl-r-cap .more a{color:var(--ink);text-underline-offset:3px}
.gl-r-cap .more a:hover{color:var(--coral)}
.gl-r-cap .more i{font-style:normal;font-family:var(--px);color:var(--coral)}
.gl-r-cap h2{font-weight:900;color:var(--ink);font-size:clamp(22px,2.3vw,28px);line-height:1.3;letter-spacing:-.03em;margin:16px 0 10px}
.gl-r-cap .tx{font-size:14.5px;line-height:1.8;color:var(--ink2)}
.gl-r-cap .act{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.gl-r-cap .act .va-btn{font-size:14px;padding:10px 14px}
.gl-r-nav{grid-area:nav;display:flex;align-items:center;justify-content:space-between;gap:12px}
.gl-r-nav .pos{font-family:var(--px);font-size:12px;color:var(--mute);white-space:nowrap}
.gl-r-nav .pos b{font-family:var(--en);font-weight:800;font-size:18px;color:var(--ink)}
.gl-r-strip{position:relative;display:flex;align-items:flex-end;gap:14px;overflow-x:auto;margin-top:30px;padding:16px 8px 10px 2px;border-top:var(--bd);scrollbar-width:thin}
.gl-r-th{flex:none;display:flex;flex-direction:column;align-items:center;gap:6px;padding:0;border:0;background:none;cursor:pointer;color:var(--ink2)}
.gl-r-th .b{display:grid;place-items:center;height:84px;aspect-ratio:var(--ar,4/5);overflow:hidden;border:var(--bd);box-shadow:3px 3px 0 var(--ink);transition:transform .15s,box-shadow .15s,background .15s;
  background:repeating-linear-gradient(-45deg,transparent 0 7px,rgba(21,21,21,.05) 7px 8px),var(--paper)}
.gl-r-th .b img{width:100%;height:100%;object-fit:contain}
.gl-r-th .b small{font-family:var(--en);font-weight:800;font-size:11px;color:var(--mute)}
.gl-r-th .nm{max-width:112px;font-size:11px;font-weight:700;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gl-r-th:hover .b{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.gl-r-th[aria-current] .b{background:var(--coral-l);border-color:var(--coral);box-shadow:3px 3px 0 var(--coral);transform:translateY(-4px)}
.gl-r-th[aria-current] .b small,.gl-r-th[aria-current] .nm{color:var(--coral-d)}
.gl-r-strip.ghost .gl-r-th{cursor:default}
.gl-r-strip.ghost .b{border-style:dashed;border-color:var(--mute);box-shadow:none;opacity:.8}

@media (max-width:900px){
  .gl-r{--rh:min(56vh,520px);grid-template-columns:minmax(0,1fr);grid-template-areas:"art" "nav" "cap";grid-template-rows:auto}
  .gl-r-art{min-height:0;padding:20px 14px}
  .gl-s-msg{grid-template-columns:1fr}
  .gl-s-msg h2{grid-row:auto}
}
@media (max-width:620px){
  .gl-s,.gl-s-empty{--s:146px}
  .gl-shelves{gap:40px}
  .gl-s-hd{gap:10px}
  .gl-s-hd .who .va-mini{width:88px}
  .gl-s-hd .acts{margin-left:0;flex-wrap:nowrap;gap:8px}
  .gl-s-hd .acts .va-btn{font-size:12px;padding:7px 9px;gap:6px}
  .gl-s-hd .mv{display:none}
  .gl-s-row{gap:14px}
  .gl-w-empty .msg{padding:20px 18px 22px}
  .gl-r-art{padding:16px 10px}
  .gl-r-cap{padding:18px 16px}
  .gl-r-cap .no b{font-size:38px}
  .gl-r-th .b{height:64px}
  .gl-r-th .nm{max-width:84px;font-size:10px}
}
@media (max-width:620px){
  .gl-noad{padding:18px 18px 18px 100px}
  .gl-noad .stamp{width:70px;height:70px;margin-top:-35px;left:14px}
  .gl-filter .row{grid-template-columns:1fr;gap:6px}
  .gl-filter h2{padding-top:0}
  .gl-grid{columns:2 150px;column-gap:14px}
  .gl-empty .wall{height:220px}
  .gl-empty .va-frame figcaption{font-size:9px}
  .gl-empty .va-frame .in span{font-size:12px}
}

/* 2026-11-15：事務所の札が14＋そのほかに増えた。見出しと札の上下の線をそろえる（見出しの高さを、札1段の高さにする） */
.gl-filter .row{align-items:start}
.gl-filter h2{display:flex;align-items:center;min-height:var(--rh,34px);padding-top:0;line-height:1.2}
.gl-filter .gl-chip{min-height:34px}
.gl-filter .row.tl{--rh:46px}
@media (max-width:640px){.gl-filter h2{min-height:0}}