/* ===== _ing 公式VI色（ing-brand-colors）＝ navy / pink / black / gray のみ =====
   ===== 寸法は黄金比 ×1.618（11 → 14 → 17.8 → 28.8 → 46.6 / 8 → 13 → 21 → 34 → 55 → 89）===== */
:root{
  --navy:#0000b2; --pink:#ff3399; --ink:#000; --mute:#9e9e9e; --rule:#e5e5e5; --bg:#fff; --paper:#f7f7f7;
  --fs0:11px; --fs1:14px; --fs2:17.8px; --fs3:28.8px; --fs4:46.6px;
  --sp1:8px; --sp2:13px; --sp3:21px; --sp4:34px; --sp5:55px; --sp6:89px;
  --serif:'Noto Serif JP','Hiragino Mincho Pro','Yu Mincho',serif;
  --sans:'Noto Sans JP','Meiryo','Hiragino Kaku Gothic Pro',sans-serif;
  --din:'Oswald','Noto Sans JP',sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}   /* grid/flex の子でも隠す */
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:var(--fs1);line-height:1.8}
a{color:var(--navy)}
main{max-width:960px;margin-inline:auto;padding:0 var(--sp3) var(--sp6)}
.narrow{max-width:640px;margin-inline:auto}

header.site{display:flex;align-items:center;justify-content:space-between;gap:var(--sp2);max-width:960px;margin-inline:auto;padding:var(--sp2) var(--sp3);border-bottom:1px solid var(--rule)}
header.site img{height:34px;width:auto}
header.site .t{font-family:var(--din);font-size:var(--fs0);letter-spacing:.14em;color:var(--mute);text-align:center;line-height:1.5}

h1{font-family:var(--serif);font-weight:600;font-size:var(--fs3);line-height:1.4;margin:var(--sp4) 0 var(--sp1)}
h2{font-size:var(--fs2);font-weight:500;margin:var(--sp5) 0 var(--sp2);padding-left:var(--sp2);border-left:3px solid var(--navy)}
p{margin:0 0 var(--sp2)}
.mute{color:var(--mute);font-size:var(--fs0);line-height:1.7}
.badge{display:inline-block;font-family:var(--din);font-size:var(--fs0);letter-spacing:.14em;color:var(--pink);border:1px solid var(--pink);border-radius:2px;padding:0 6px;margin-left:var(--sp1);vertical-align:middle}

.btn{display:inline-block;background:var(--navy);color:#fff;border:0;border-radius:3px;padding:10px var(--sp3);font-size:var(--fs1);font-family:var(--sans);cursor:pointer;text-decoration:none;text-align:center}
.btn.sub{background:#fff;color:var(--navy);border:1px solid var(--navy)}
.btn.wide{display:block;width:100%}
.row{display:flex;flex-wrap:wrap;gap:var(--sp1) var(--sp2);align-items:center;margin:var(--sp2) 0}

/* 絞り込み・並び替え */
.tools{position:sticky;top:0;z-index:5;background:var(--bg);border-bottom:1px solid var(--rule);padding:var(--sp2) 0;margin-bottom:var(--sp3)}
.tools .grp{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:6px}
.tools .lbl{font-size:var(--fs0);color:var(--mute);min-width:5.5em}
.chip{font-size:var(--fs0);font-family:var(--sans);padding:5px 12px;border:1px solid var(--rule);background:#fff;color:var(--ink);border-radius:99px;cursor:pointer;line-height:1.4}
.chip[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.count{font-size:var(--fs0);color:var(--mute)}

/* 作品グリッド */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:var(--sp4) var(--sp3);margin:0;padding:0;list-style:none}
.card{display:flex;flex-direction:column}
.card .ph{display:flex;align-items:flex-end;justify-content:center;height:230px;background:var(--paper);padding:var(--sp2)}
.card .ph img{max-width:100%;max-height:100%;width:auto;height:auto;display:block;box-shadow:0 6px 16px rgba(0,0,0,.20)}
.card .ttl{font-family:var(--serif);font-size:var(--fs2);font-weight:600;line-height:1.4;margin-top:var(--sp2)}
.card .en{font-family:var(--din);font-size:var(--fs0);letter-spacing:.06em;color:var(--mute)}
.card dl{display:grid;grid-template-columns:auto 1fr;gap:1px var(--sp2);margin:var(--sp1) 0 0;font-size:var(--fs0);line-height:1.7}
.card dt{color:var(--mute)}
.card dd{margin:0}
.card .size{font-family:var(--din);font-size:var(--fs1);letter-spacing:.02em}
.card .act{margin-top:var(--sp2)}
.card .note{font-size:var(--fs0);color:var(--navy);margin-top:4px}

/* 詳細ページ */
.hero{display:flex;align-items:center;justify-content:center;background:var(--paper);padding:var(--sp3);min-height:220px}
.hero img{max-width:100%;max-height:52vh;display:block;box-shadow:0 10px 26px rgba(0,0,0,.22)}
dl.spec{display:grid;grid-template-columns:auto 1fr;gap:3px var(--sp3);margin:var(--sp3) 0 0;font-size:var(--fs1)}
dl.spec dt{color:var(--mute)}
dl.spec dd{margin:0}
model-viewer{width:100%;height:340px;background:var(--paper);border:1px solid var(--rule);--poster-color:transparent}
.status{font-size:var(--fs0);color:var(--mute);margin-top:var(--sp1);min-height:1.6em}
#stage{position:relative;width:100%;background:var(--paper);border:1px solid var(--rule);touch-action:none;user-select:none;-webkit-user-select:none}
#stage canvas{width:100%;height:auto;display:block}
input[type=number]{width:5.5em;font-size:var(--fs1);padding:6px;border:1px solid var(--rule);border-radius:3px}
label.f{display:flex;align-items:center;gap:var(--sp1);font-size:var(--fs1)}
ol.how{padding-left:1.4em;margin:0 0 var(--sp2)}
ol.how li{margin-bottom:4px}
.pager{display:flex;justify-content:space-between;gap:var(--sp2);margin-top:var(--sp4);font-size:var(--fs1)}

/* 作家サイトへ戻す枠 */
.artistbox{border:1px solid var(--navy);padding:var(--sp3);margin-top:var(--sp5)}
.artistbox h3{font-family:var(--serif);font-size:var(--fs2);margin:0 0 var(--sp1);font-weight:600}
.artistbox p{font-size:var(--fs1)}
.artistbox .links{display:flex;flex-wrap:wrap;gap:var(--sp1) var(--sp2);margin-top:var(--sp2)}

/* SNSアプリ内ブラウザの案内帯 */
.switchbar{background:var(--navy);color:#fff;padding:var(--sp2) var(--sp3);text-align:center}
.switchbar .sw-t{font-size:var(--fs1);line-height:1.6;margin-bottom:var(--sp1)}
.switchbar .sw-b{display:flex;gap:var(--sp1);justify-content:center;flex-wrap:wrap}
.switchbar .btn{background:#fff;color:var(--navy)}
.switchbar .btn.sub{background:transparent;color:#fff;border:1px solid #fff}
.switchbar .sw-n{font-size:var(--fs0);opacity:.85;margin-top:6px}
.switchbar .sw-m{font-size:var(--fs0);line-height:1.7;margin-top:6px;opacity:.9}
.switchbar .sw-m.strong{opacity:1;font-size:var(--fs1);font-weight:500;background:rgba(255,255,255,.14);border-radius:3px;padding:8px var(--sp2);margin-top:var(--sp1)}

footer.site{margin-top:var(--sp6);padding:var(--sp3) var(--sp3) var(--sp5);border-top:1px solid var(--rule);font-size:var(--fs0);color:var(--mute);line-height:1.7;max-width:960px;margin-inline:auto}
footer.site .logos{display:flex;align-items:center;gap:var(--sp3);margin-top:var(--sp2);flex-wrap:wrap}
footer.site .logos img{height:28px;width:auto}