/* 祖父の作品ギャラリー ── 画廊の見た目（生成りの壁・墨の文字・額縁の金）
   設計＝docs/設計書_v1.md §4。本文 17px 以上・押すところ 44px 以上。 */

:root{
  --bg:#f7f3ec;
  --bg-card:#fffdf8;
  --ink:#221e18;
  --ink-soft:#5b5346;
  --ink-faint:#8b8375;
  --gold:#b8973f;
  --gold-soft:#e2d3ab;
  --line:#e3dbcb;
  --shadow:0 2px 6px rgba(52,42,24,.07), 0 12px 28px rgba(52,42,24,.09);
  --shadow-hi:0 4px 10px rgba(52,42,24,.10), 0 18px 40px rgba(52,42,24,.14);
  --focus:#7a5c12;
  --serif:"Noto Serif JP", "Hiragino Mincho ProN", serif;
  --sans:"Noto Sans JP", "Hiragino Sans", system-ui, sans-serif;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#16140f;
    --bg-card:#211e18;
    --ink:#f0ead9;
    --ink-soft:#c3baa4;
    --ink-faint:#9a927f;
    --gold:#d8b862;
    --gold-soft:#5c4c25;
    --line:#39332a;
    --shadow:0 2px 6px rgba(0,0,0,.35), 0 12px 28px rgba(0,0,0,.45);
    --shadow-hi:0 4px 10px rgba(0,0,0,.45), 0 18px 40px rgba(0,0,0,.55);
    --focus:#e8cf8a;
  }
}

*{box-sizing:border-box}

/* display を持つ要素にも hidden を効かせる（札・コメント欄の出し入れ） */
[hidden]{display:none !important}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.9;
  letter-spacing:.02em;
}

.wrap{width:min(1120px, 100% - 40px); margin-inline:auto}

a{color:inherit}

.skip{
  position:absolute; left:-9999px; top:0;
  background:var(--bg-card); color:var(--ink);
  padding:12px 20px; border:2px solid var(--gold); z-index:50;
}
.skip:focus{left:12px; top:12px}

:focus-visible{outline:3px solid var(--focus); outline-offset:3px; border-radius:4px}

/* ── 見出し ───────────────────────────── */
.head{padding:44px 0 28px; text-align:center}
.head .kazari{margin:0 0 10px; color:var(--gold); font-size:20px; letter-spacing:.5em}
.head h1{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(28px, 6vw, 40px); line-height:1.45;
  margin:0 0 6px;
}
.head .author{margin:0; color:var(--gold); font-family:var(--serif); font-size:19px}
.head .intro{
  margin:18px auto 0; max-width:34em;
  color:var(--ink-soft); font-size:17px; white-space:pre-wrap; text-align:left;
}
.head .count{
  margin:24px 0 0; color:var(--ink-faint); font-size:16px;
  padding-top:18px; border-top:1px solid var(--line);
}

/* ── 一覧 ─────────────────────────────── */
.grid{
  display:grid; gap:34px 26px;
  grid-template-columns:1fr;
  padding:10px 0 50px;
}
@media (min-width:600px){ .grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:980px){ .grid{grid-template-columns:repeat(3,1fr); gap:44px 32px} }

.card{
  display:block; width:100%; text-align:left;
  background:none; border:0; padding:0; margin:0;
  font:inherit; color:inherit; cursor:pointer;
}
.card .frame{
  background:var(--bg-card);
  border:1px solid var(--line);
  border-radius:3px;
  padding:12px;
  box-shadow:var(--shadow);
  transition:transform .22s ease, box-shadow .22s ease;
}
.card .frame::after{
  content:""; display:block; height:3px; margin-top:12px;
  background:linear-gradient(90deg, transparent, var(--gold-soft) 20%, var(--gold) 50%, var(--gold-soft) 80%, transparent);
}
.card img{
  display:block; width:100%; height:auto;
  background:var(--line);
  border-radius:2px;
}
.card:hover .frame, .card:focus-visible .frame{
  transform:translateY(-4px); box-shadow:var(--shadow-hi);
}
.card .cap{padding:12px 4px 0}
.card .cap h2{
  font-family:var(--serif); font-weight:600;
  font-size:20px; line-height:1.55; margin:0;
}
.card .meta{
  margin:4px 0 0; color:var(--ink-faint); font-size:16px;
  display:flex; flex-wrap:wrap; gap:14px; align-items:center;
}
.card .meta .n{white-space:nowrap}
.card .meta .n.on{color:var(--gold)}

.empty{padding:40px 0 60px; color:var(--ink-faint); text-align:center}

/* ── 足 ───────────────────────────────── */
.foot{
  border-top:1px solid var(--line); padding:26px 0 44px;
  color:var(--ink-faint); text-align:center;
}
.foot p{margin:4px 0}
.foot .small{font-size:15px}

/* ── 詳細（全画面のダイアログ）───────────── */
dialog#detail{
  width:100%; max-width:100%; height:100%; max-height:100%;
  margin:0; padding:0; border:0;
  background:var(--bg); color:var(--ink);
  overflow:hidden;
}
dialog#detail::backdrop{background:rgba(20,16,8,.72)}

.dlg{display:flex; flex-direction:column; height:100%}

.dlg-bar{
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:8px 12px;
  border-bottom:1px solid var(--line);
  background:var(--bg-card);
}
.dlg-pos{color:var(--ink-faint); font-size:16px}

.btn-ico{
  min-height:44px; min-width:44px; padding:0 16px;
  background:none; border:1px solid transparent; border-radius:8px;
  color:var(--ink); font:inherit; font-size:17px; cursor:pointer;
}
.btn-ico:hover{background:var(--bg); border-color:var(--line)}

.dlg-body{
  flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:18px 20px 30px;
}
@media (min-width:980px){
  .dlg-body{
    display:grid; grid-template-columns:minmax(0,1.25fr) minmax(360px,1fr);
    gap:36px; padding:26px 32px 36px; align-items:start;
  }
}

.dlg-fig{margin:0}
.dlg-imgbox{
  background:var(--bg-card);
  border:1px solid var(--line);
  padding:10px; border-radius:3px; box-shadow:var(--shadow);
}
.dlg-imgbox img{display:block; width:100%; height:auto; border-radius:2px; background:var(--line)}

.dlg-info h2{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(23px,5vw,30px); line-height:1.5; margin:22px 0 0;
}
@media (min-width:980px){ .dlg-info h2{margin-top:0} }

.badge{
  display:inline-block; margin:12px 0 0; padding:5px 14px;
  border:1px solid var(--gold); border-radius:999px;
  color:var(--gold); font-size:16px; line-height:1.6;
}

.spec{margin:16px 0 0; display:grid; grid-template-columns:auto 1fr; gap:4px 16px}
.spec dt{color:var(--ink-faint); font-size:16px}
.spec dd{margin:0; font-size:17px}

.desc{margin:18px 0 0; white-space:pre-wrap; color:var(--ink-soft)}

.acts{display:flex; flex-wrap:wrap; gap:12px; margin:26px 0 0}

.btn-like, .btn-share, .btn-send, .btn-nav{
  min-height:48px; padding:0 20px;
  font:inherit; font-size:17px; cursor:pointer;
  border-radius:10px; border:1px solid var(--line);
  background:var(--bg-card); color:var(--ink);
  display:inline-flex; align-items:center; gap:8px;
}
.btn-like:hover, .btn-share:hover, .btn-send:hover, .btn-nav:hover{border-color:var(--gold)}
.btn-like .heart{font-size:21px; color:var(--gold)}
.btn-like.on{border-color:var(--gold); background:var(--gold-soft)}
.btn-like .num{color:var(--ink-faint)}
.btn-like.on .num{color:var(--ink)}

button[disabled]{opacity:.45; cursor:default}
button[disabled]:hover{border-color:var(--line)}

.note{margin:10px 0 0; color:var(--ink-faint); font-size:16px}
.note.off{color:var(--ink-faint); opacity:.75}

.cmts{margin:32px 0 0; padding-top:22px; border-top:1px solid var(--line)}
.cmts h3{font-family:var(--serif); font-weight:600; font-size:20px; margin:0 0 6px}

.cmt-form{display:flex; flex-direction:column; margin:10px 0 0}
.lbl{font-size:16px; color:var(--ink-soft); margin-top:10px}
.cmt-form input[type=text], .cmt-form textarea{
  font:inherit; font-size:17px; color:var(--ink);
  background:var(--bg-card); border:1px solid var(--line); border-radius:8px;
  padding:11px 12px; margin-top:5px; min-height:46px; width:100%;
}
.cmt-form textarea{min-height:92px; line-height:1.8; resize:vertical}
.cmt-form .btn-send{align-self:flex-start; margin-top:14px}
.hp{position:absolute !important; left:-9999px !important; width:1px !important; height:1px !important; opacity:0}

.cmt-list{list-style:none; margin:20px 0 0; padding:0}
.cmt-list li{padding:14px 0; border-top:1px solid var(--line)}
.cmt-list .who{font-size:16px; color:var(--ink-faint)}
.cmt-list .who b{color:var(--ink); font-weight:500; font-size:17px; margin-right:10px}
.cmt-list .body{margin:4px 0 0; white-space:pre-wrap}

.dlg-nav{
  flex:0 0 auto;
  display:flex; justify-content:space-between; gap:12px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line); background:var(--bg-card);
}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important}
  .card:hover .frame, .card:focus-visible .frame{transform:none}
}