/* metako-site/works/shodo.html から生成。直接編集しない。 */
/* ============================================================
   METAKO WORLD - 展示室ページ
   ★ このファイルは tools/build_gallery.py が作る。直接編集しない。
     題名を足すときは myworks/works.json を直してから作り直す。
   ============================================================ */
:root{
  color-scheme: light;
  --bg:#F2EADB; --panel:#FDF9F0; --panel-2:#FBF4E6;
  --ink:#4A3728; --ink-soft:#857058; --ink-mute:#A08D74;
  --line:#E7D9BF; --line-soft:#F0E6D4;
  --accent:#8A5A32; --accent-ink:#FFF8EA;
  --z:#4F7A9B;
  --radius:14px; --radius-s:9px;
  --shadow:0 1px 2px rgba(74,55,40,.05), 0 8px 20px -10px rgba(74,55,40,.25);
  --gap:10px;
}
*{ box-sizing:border-box; }
html{ font-size:15px; }
body{
  margin:0; padding:var(--gap);
  background:
    radial-gradient(1200px 600px at 12% -10%, #FBF3E4 0%, transparent 60%),
    radial-gradient(900px 500px at 100% 110%, #EFE2CB 0%, transparent 62%),
    var(--bg);
  color:var(--ink);
  font-family:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Yu Gothic",system-ui,sans-serif;
  line-height:1.7;
}
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; height:auto; }

header{
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  padding:.6rem 1.2rem;
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow);
}
.brand{ display:flex; align-items:baseline; gap:.5em; font-family:"Cormorant Garamond",serif; }
.brand b{ font-size:1.35rem; letter-spacing:.06em; }
.brand small{ font-size:.72rem; letter-spacing:.22em; color:var(--ink-soft); }
.back{
  margin-left:auto; font-size:.9rem; color:var(--ink-soft);
  border:1px solid var(--line); border-radius:999px; padding:.35em 1em;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.back:hover{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.lang{ display:flex; align-items:center; gap:.25rem; border:1px solid var(--line); border-radius:999px; padding:.15rem; }
.lang button{
  font:inherit; font-size:.8rem; letter-spacing:.08em;
  padding:.2em .8em; border:0; border-radius:999px;
  background:transparent; color:var(--ink-soft); cursor:pointer;
}
.lang button[aria-pressed="true"]{ background:var(--accent); color:var(--accent-ink); }

main{ max-width:1180px; margin:0 auto; }
.intro{
  margin:var(--gap) 0;
  padding:1.6rem 1.8rem;
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow);
}
.eyebrow{
  display:flex; align-items:center; gap:.45em; margin:0;
  font-size:.9rem; font-weight:700; letter-spacing:.10em; color:var(--z);
}
h1{ margin:.15em 0 .5em; font-size:1.9rem; letter-spacing:.03em; }
.lead{ margin:0; max-width:52em; color:var(--ink-soft); font-size:.98rem; }
.count{ margin:.9em 0 0; font-size:.85rem; color:var(--ink-mute); }
.intro .btn{ margin-top:1.1rem; }
.btn{
  display:inline-flex; align-items:center; gap:.4em;
  padding:.55em 1.3em; border-radius:999px;
  border:1px solid var(--line); background:var(--panel-2);
  color:var(--ink); font-size:.92rem; cursor:pointer;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.btn--solid{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.btn--solid:hover{ filter:brightness(1.08); }

.grid{
  display:grid; gap:var(--gap);
  grid-template-columns:repeat(auto-fill, minmax(215px, 1fr));
  margin:0; padding:0;
}
.work{ margin:0; }
.work__btn{
  display:block; width:100%; padding:0; cursor:zoom-in;
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow);
  overflow:hidden;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.work__btn:hover{
  transform:translateY(-2px);
  box-shadow:0 2px 4px rgba(74,55,40,.06), 0 14px 28px -12px rgba(74,55,40,.32);
  border-color:#DCC9A8;
}
.work__btn img{ width:100%; }
figcaption{ padding:.5em .2em 0; font-size:.86rem; color:var(--ink-soft); text-align:center; }

footer{
  margin:calc(var(--gap) * 2) 0 var(--gap);
  display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center;
}

/* ---- 拡大表示 ---- */
.lb[hidden]{ display:none; }
.lb{
  position:fixed; inset:0; z-index:100;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(1rem, 4vh, 3rem);
  background:rgba(44,32,22,.86);
}
.lb__img{ max-width:100%; max-height:100%; border-radius:var(--radius-s); box-shadow:0 20px 50px -20px #000; }
.lb__cap{
  position:absolute; left:0; right:0; bottom:1rem;
  text-align:center; color:#FBF4E6; font-size:.95rem;
  text-shadow:0 1px 3px rgba(0,0,0,.6);
}
.lb button{
  position:absolute; display:flex; align-items:center; justify-content:center;
  width:2.8rem; height:2.8rem; border-radius:50%;
  border:1px solid rgba(253,249,240,.4); background:rgba(44,32,22,.55);
  color:#FDF9F0; font-size:1.2rem; cursor:pointer;
}
.lb button:hover{ background:var(--accent); border-color:var(--accent); }
.lb__close{ top:1rem; right:1rem; }
.lb__prev{ left:1rem; top:50%; transform:translateY(-50%); }
.lb__next{ right:1rem; top:50%; transform:translateY(-50%); }

@media (max-width:620px){
  html{ font-size:14px; }
  .grid{ grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); }

  .intro{ padding:1.2rem 1.2rem; }
  h1{ font-size:1.6rem; }
  .lb__prev{ left:.4rem; } .lb__next{ right:.4rem; }
}
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}