:root {
  /* Museum / Gallery palette */
  --bg: #f9f7f3;         /* gallery wall */
  --panel: #ffffff;
  --ink: #1b1b1b;
  --muted: #6b6b6b;
  --border: #e6e0d6;
  --accent: #2563eb;     /* link/button accent */
  --accent-2: #a2673f;   /* warm accent */
  --chip-on: #ece7de;
  --chip-off: #f1efe9;
  --hl: #fff6e6;         /* subtle highlight */
  --maxw: 920px;
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; background:var(--bg); color:var(--ink);
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Hiragino Sans","Noto Sans JP","Helvetica Neue",Arial,sans-serif;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

header { position: sticky; top:0; z-index: 10; background: linear-gradient(#fff, #fff8); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border); }
.header-inner { max-width: var(--maxw); margin:0 auto; padding: 12px 16px; display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.header-inner h1 { margin:0; font-size: 20px; letter-spacing: .02em; }

.btn { display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:10px; border:1px solid var(--border);
  background: var(--panel); color: var(--ink); cursor:pointer; text-decoration:none; font-size: 15px; }
.btn.primary { background: var(--accent); color:#fff; border-color: var(--accent); }
.btn.warm { background: var(--accent-2); color:#fff; border-color: var(--accent-2); }
.btn:disabled { opacity:.5; cursor:not-allowed; }

main { max-width: var(--maxw); margin: 0 auto; padding: 16px; }

.card { background: var(--panel); border:1px solid var(--border); border-radius:14px; padding:16px; }
.section { margin-top: 16px; }

.footer { color:var(--muted); font-size:12px; text-align:center; padding:24px 0 40px; }

h2 { margin: 0 0 8px 0; font-size: 18px; }

/* 行の余白を少し詰める */
.row { gap: 6px; padding: 10px; }

/* 追加: 並べ替えバー */
.sortbar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.sortbar-label { color: var(--muted); }
.linklike {
  background: none; border: none; padding: 0; margin: 0;
  color: var(--accent); cursor: pointer; font: inherit; text-decoration: underline;
}
.linklike:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.sep { color: var(--muted); }

/* Exhibit grid: 作品名 | 作者 | 墨字 | 6点 | 8点 | 備考 */
.table { overflow:auto; border:1px solid var(--border); border-radius:12px; background: var(--panel); }
.row { display:grid; gap:8px; padding:10px; align-items:center; border-bottom:1px solid var(--border); }
.row.head { background: var(--hl); font-weight:600; }
.row:last-child { border-bottom: none; }

/* デスクトップ時は「タイトル=可変」「作者=やや広め」「右4列=実寸」 */
@media (min-width: 768px) {
  .row { 
    grid-template-columns: 1fr 180px repeat(4, max-content);
  }
  .row .cell:not(.label) { justify-self: center; }
}

/* グループ見出し（著者まとめ表示用） */
.group-head {
  background: var(--hl);
  font-weight: 700;
  color: var(--ink);
}
.group-head .cell {
  grid-column: 1 / -1; /* 全列を横断 */
  padding: 8px 2px;
  font-size: 15px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}



/* チップを少し小さくして詰める */
.chip { 
  min-height: 30px; 
  padding: 4px 10px; 
  font-size: 14px; 
}

/* タイトルは2行折り返し前提で読みやすく */
.cell.label { line-height: 1.6; }


.chips { display:flex; gap:8px; flex-wrap:wrap; }
.chip { display:inline-flex; align-items:center; justify-content:center; min-height:36px; padding:6px 10px;
  border-radius:999px; border:1px solid var(--border); background: var(--chip-on); font-size: 15px; }
.chip.disabled { background: var(--chip-off); color: var(--muted); pointer-events:none; }

.note { color: var(--muted); font-size: 14px; }

/* Viewer page */
.viewer-meta { color: var(--muted); font-size: 13px; margin-bottom: 8px; }
.viewer { border:1px solid var(--border); border-radius:12px; background:#fff; padding:12px; }
.viewer #content {
  white-space: pre-wrap;
  margin: 0;
  font-size: 20px;
  line-height: 2.0;
  font-family: "Noto Sans Symbols 2",
               -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Hiragino Sans", "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
}

.controls { display:flex; gap:10px; flex-wrap:wrap; }
.range { display:flex; align-items:center; gap:8px; }
input[type="range"] { accent-color: var(--accent); }

/* --- Markdown 表示用（備考.md） --- */
.md { font-size: 16px; line-height: 1.9; color: var(--ink); }
.md h1 { font-size: 20px; margin: 0 0 10px; }
.md h2 { font-size: 18px; margin: 18px 0 8px; }
.md p { margin: 5px 0; }
.md ul { margin: 4px 0 8px 1.2em; padding: 0; }
.md li { margin: 2px 0; }
.md a { color: var(--accent); text-decoration: underline; }