/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

:root {
  --paper: #fbf7ef;
  --ink: #2b2620;
  --muted: #7a6f62;
  --line: #e6dccb;
  --accent: #c2410c;
  --accent-ink: #fff;
  --card: #fff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1c1916;
    --ink: #eee6da;
    --muted: #a99d8e;
    --line: #3a332b;
    --accent: #fb923c;
    --accent-ink: #1c1916;
    --card: #25211d;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Hiragino Kaku Gothic ProN", "Noto Sans JP", system-ui, sans-serif;
  line-height: 1.7;
}
a { color: inherit; }

.site-header, .site-main, .site-footer { max-width: 40rem; margin: 0 auto; padding: 0 16px; }
.site-header { padding-top: 1.5rem; padding-bottom: 1rem; border-bottom: 2px solid var(--ink); }
.logo { font-family: Georgia, "Hiragino Mincho ProN", serif; font-size: 2rem; font-weight: 700; text-decoration: none; letter-spacing: .02em; }
.logo span { color: var(--accent); }
.tagline { margin: .25rem 0 0; color: var(--muted); font-size: .9rem; }
.pr { border: 1px solid var(--muted); border-radius: 3px; padding: 0 .3em; font-size: .75rem; margin-right: .3em; }

.site-main { padding-top: 1rem; padding-bottom: 2rem; }
.sale { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 1rem; margin: 0 0 .9rem; }
.sale-meta { display: flex; flex-wrap: wrap; gap: .4rem; font-size: .8rem; color: var(--muted); }
.badge { background: var(--accent); color: var(--accent-ink); border-radius: 999px; padding: 0 .6em; font-weight: 700; }
.genre { border: 1px solid var(--line); border-radius: 999px; padding: 0 .6em; }
.sale-title { font-size: 1.05rem; margin: .4rem 0 .2rem; line-height: 1.5; }
.sale-title a { text-decoration: none; }
.publisher, .note { margin: 0 0 .5rem; font-size: .9rem; color: var(--muted); }
.amazon-link { display: inline-block; margin-top: .3rem; background: var(--ink); color: var(--paper); text-decoration: none; border-radius: 6px; padding: .45rem .9rem; font-size: .9rem; font-weight: 700; }
.ended-notice { background: var(--line); border-radius: 6px; padding: .6rem 1rem; font-weight: 700; }
.related h2 { font-size: 1rem; margin-top: 2rem; }
.empty, .back { color: var(--muted); }

.site-footer { border-top: 1px solid var(--line); padding-top: 1rem; padding-bottom: 2rem; font-size: .78rem; color: var(--muted); }
.site-footer p { margin: .2rem 0; }
.page h1 { font-size: 1.4rem; }
.page h2 { font-size: 1.05rem; margin-top: 1.5rem; }

.admin main, .admin-nav { max-width: 60rem; margin: 0 auto; padding: 0 16px; }
.admin-nav { display: flex; gap: 1rem; align-items: center; padding-top: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.admin-nav form { margin-left: auto; }
.admin table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.admin th, .admin td { text-align: left; padding: .4rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.admin .warning { background: #fee2e2; color: #7f1d1d; border-radius: 6px; padding: .6rem 1rem; }
.flash { max-width: 60rem; margin: .5rem auto; padding: .5rem 16px; background: var(--line); }
.field { margin-bottom: .8rem; }
.field label { display: block; font-weight: 700; font-size: .9rem; }
.field input[type=text], .field input[type=url], .field input[type=date], .field select, .field textarea { width: 100%; max-width: 36rem; padding: .4rem; font: inherit; }

/* 話題の本・セールの本 */
.buzz-books h2, .sale-books h2 { font-size: 1rem; margin: 0 0 .6rem; }
.buzz-books, .sale-books { margin: 0 0 1.2rem; }
.book-row { display: flex; gap: .8rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .4rem; -webkit-overflow-scrolling: touch; }
.book { flex: 0 0 9.5rem; scroll-snap-align: start; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: .6rem; display: flex; flex-direction: column; }
.book .cover { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 4px; background: var(--line); }
.cover-placeholder { display: flex; align-items: center; justify-content: center; padding: .5rem; text-align: center; font-size: .8rem; line-height: 1.4; color: var(--muted); overflow: hidden; }
.book-title { font-size: .9rem; margin: .5rem 0 .2rem; line-height: 1.4; }
.author, .book-sale { margin: 0 0 .3rem; font-size: .75rem; color: var(--muted); }
.book-sale .period { display: block; }
.book .amazon-link { margin-top: auto; text-align: center; font-size: .8rem; padding: .35rem .5rem; }