@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500;700;900&family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap');

:root{
  --cream:#FFFBF3;
  --paper:#FFFFFF;
  --ink:#2B2321;
  --ink-soft:#7A6E63;
  --brand:#E94F64;
  --brand-dark:#C63852;
  --age01:#F492A6;
  --age01-ink:#8C2E44;
  --age01-bg:#FDEDF0;
  --age23:#F5A83C;
  --age23-ink:#8A5111;
  --age23-bg:#FDF1DE;
  --age45:#3FAFC4;
  --age45-ink:#0E5C6C;
  --age45-bg:#E4F5F8;
  --rec:#9B6FCE;
  --rec-ink:#5B3286;
  --rec-bg:#F1E9FB;
  --line:#EAE1D2;
  --shadow: 0 6px 18px rgba(43,35,33,0.08);
  --shadow-lift: 0 14px 30px rgba(43,35,33,0.14);
  --radius-card: 18px;
  --radius-pill: 999px;
  --maxw: 1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:'Zen Kaku Gothic New', 'Hiragino Sans', sans-serif;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{
  font-family:'Zen Maru Gothic', 'Hiragino Sans', sans-serif;
  font-weight:700;
  letter-spacing:.01em;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
button{font-family:inherit;}

.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}

/* ---------- Rhythm line (static) ---------- */
.rhythm-wave{
  width:100%;
  height:22px;
  display:block;
  overflow:hidden;
  line-height:0;
}
.rhythm-wave svg{
  width:100%;
  height:22px;
}

/* ---------- Header / Footer ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,251,243,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  max-width:var(--maxw);
  margin:0 auto;
  padding:12px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.logo-link{
  display:flex;
  align-items:center;
}
.logo-img{
  height:42px; /* 1.5x standard header logo height (28px) */
  width:auto;
  display:block;
}
.header-link{
  font-size:.85rem;
  font-weight:700;
  color:var(--ink);
  border:1.5px solid var(--ink);
  border-radius:var(--radius-pill);
  padding:8px 16px;
  transition:transform .15s ease, background .15s ease, color .15s ease;
  white-space:nowrap;
}
.header-link:hover{
  background:var(--ink);
  color:var(--cream);
  transform:translateY(-1px);
}

.site-footer{
  margin-top:64px;
  border-top:1px solid var(--line);
  background:var(--paper);
}
.footer-inner{
  max-width:var(--maxw);
  margin:0 auto;
  padding:36px 24px 44px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  text-align:center;
}
.footer-word{
  font-family:'Zen Maru Gothic', sans-serif;
  font-weight:900;
  color:var(--brand);
  font-size:1.15rem;
}
.footer-tagline{
  font-size:.82rem;
  color:var(--ink-soft);
  letter-spacing:.04em;
}
.footer-cta{
  margin-top:6px;
  font-size:.85rem;
  font-weight:700;
  padding:10px 22px;
  border-radius:var(--radius-pill);
  background:var(--brand);
  color:#fff;
  transition:transform .15s ease, box-shadow .15s ease;
}
.footer-cta:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow);
}

/* ---------- App shell ---------- */
#app{
  max-width:var(--maxw);
  margin:0 auto;
  padding:36px 24px 20px;
  min-height:60vh;
}

/* ---------- List page: hero ---------- */
.list-hero{
  padding:12px 0 28px;
}
.list-hero h1{
  font-size:clamp(1.7rem, 3vw, 2.5rem);
  margin:0 0 10px;
  line-height:1.35;
}
.list-hero p{
  color:var(--ink-soft);
  max-width:640px;
  margin:0;
  font-size:.98rem;
}

/* ---------- Shop banner (ehon-house) ---------- */
.shop-banner{
  display:block;
  max-width:560px;
  margin:26px auto 8px;
  padding:18px 20px;
  background:var(--paper);
  border:1.5px solid var(--line);
  border-radius:20px;
  box-shadow:var(--shadow);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.shop-banner:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-lift);
  border-color:var(--brand);
}
.shop-banner-caption{
  margin:0 0 12px;
  font-size:.85rem;
  font-weight:700;
  color:var(--ink);
  text-align:center;
}
.shop-banner-caption strong{color:var(--brand);}
.shop-banner-frame{
  display:block;
  border-radius:12px;
  overflow:hidden;
  background:linear-gradient(135deg, var(--age01-bg), var(--age23-bg), var(--age45-bg));
  min-height:90px;
}
.shop-banner-frame img{
  width:100%;
  display:block;
}

/* ---------- Search ---------- */
.search-wrap{
  margin:22px 0 8px;
  position:relative;
  max-width:480px;
}
.search-input{
  width:100%;
  padding:14px 20px 14px 46px;
  border-radius:var(--radius-pill);
  border:1.5px solid var(--line);
  background:var(--paper);
  font-size:.95rem;
  font-family:inherit;
  color:var(--ink);
  box-shadow:var(--shadow);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.search-input:focus{
  outline:none;
  border-color:var(--brand);
  box-shadow:0 0 0 4px rgba(233,79,100,0.15);
}
.search-icon{
  position:absolute;
  left:18px;
  top:50%;
  transform:translateY(-50%);
  width:16px;
  height:16px;
  color:var(--ink-soft);
  pointer-events:none;
}
.search-meta{
  font-size:.78rem;
  color:var(--ink-soft);
  margin:10px 2px 0;
  min-height:1.2em;
}

/* ---------- Age sections ---------- */
.age-section{
  margin-top:42px;
}
.age-heading{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:18px;
}
.age-badge{
  font-family:'Zen Maru Gothic', sans-serif;
  font-weight:900;
  font-size:1.05rem;
  padding:7px 18px;
  border-radius:var(--radius-pill);
}
.age-badge.age-01{background:var(--age01-bg); color:var(--age01-ink);}
.age-badge.age-23{background:var(--age23-bg); color:var(--age23-ink);}
.age-badge.age-45{background:var(--age45-bg); color:var(--age45-ink);}
.age-badge.age-rec{background:var(--rec-bg); color:var(--rec-ink);}
.age-count{
  font-size:.8rem;
  color:var(--ink-soft);
}

.card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(168px, 1fr));
  gap:20px;
}

.book-card{
  background:var(--paper);
  border-radius:var(--radius-card);
  overflow:hidden;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  transition:transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease;
  outline-offset:2px;
}
.book-card:hover, .book-card:focus-visible{
  transform:translateY(-6px) rotate(-0.6deg);
  box-shadow:var(--shadow-lift);
}
.card-cover{
  position:relative;
  width:100%;
  aspect-ratio:3/4;
  overflow:hidden;
  background:var(--line);
}
.card-cover img{
  width:100%; height:100%;
  object-fit:cover;
}
.card-body{
  padding:12px 14px 16px;
  display:flex;
  flex-direction:column;
  gap:4px;
  flex:1;
}
.card-title{
  font-family:'Zen Maru Gothic', sans-serif;
  font-weight:700;
  font-size:.92rem;
  line-height:1.4;
  color:var(--ink);
}
.card-author{
  font-size:.78rem;
  color:var(--ink-soft);
}
.card-tag{
  margin-top:auto;
  align-self:flex-start;
  font-size:.68rem;
  font-weight:700;
  padding:3px 10px;
  border-radius:var(--radius-pill);
  margin-top:8px;
}
.card-tag.age-01{background:var(--age01-bg); color:var(--age01-ink);}
.card-tag.age-23{background:var(--age23-bg); color:var(--age23-ink);}
.card-tag.age-45{background:var(--age45-bg); color:var(--age45-ink);}
.card-tag.age-rec{background:var(--rec-bg); color:var(--rec-ink);}

.empty-state{
  text-align:center;
  padding:60px 20px;
  color:var(--ink-soft);
}
.empty-state .big{
  font-family:'Zen Maru Gothic', sans-serif;
  font-size:1.2rem;
  color:var(--ink);
  margin-bottom:6px;
}

/* ---------- Detail page ---------- */
.back-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:.85rem;
  font-weight:700;
  color:var(--ink-soft);
  margin-bottom:18px;
  transition:color .15s ease, transform .15s ease;
}
.back-link:hover{color:var(--brand); transform:translateX(-3px);}

.book-hero{
  display:grid;
  grid-template-columns:280px 1fr;
  gap:44px;
  align-items:start;
  padding:8px 0 12px;
}
.book-hero .cover-frame{
  position:relative;
  border-radius:22px;
  overflow:hidden;
  box-shadow:var(--shadow-lift);
  background:var(--line);
}
.book-hero .cover-frame img{
  width:100%;
  display:block;
}
.book-hero .info{
  padding-top:4px;
}
.book-hero .age-badge{
  margin-bottom:14px;
}
.book-hero h1{
  font-size:clamp(1.5rem, 2.6vw, 2.15rem);
  margin:0 0 6px;
  line-height:1.35;
}
.book-hero .author{
  font-size:1rem;
  color:var(--ink-soft);
  margin-bottom:20px;
}
.book-hero .comment{
  font-size:.98rem;
  color:var(--ink);
  max-width:56ch;
  margin-bottom:26px;
}
.buy-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--brand);
  color:#fff;
  font-weight:700;
  font-size:.95rem;
  padding:13px 26px;
  border-radius:var(--radius-pill);
  box-shadow:var(--shadow);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.buy-btn:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-lift);
  background:var(--brand-dark);
}
.buy-note{
  margin-top:10px;
  font-size:.76rem;
  color:var(--ink-soft);
}

.video-section{
  margin-top:52px;
}
.video-section h2{
  font-size:1.1rem;
  margin:0 0 14px;
  display:flex;
  align-items:center;
  gap:8px;
}
.video-frame{
  position:relative;
  width:100%;
  padding-top:56.25%;
  border-radius:20px;
  overflow:hidden;
  box-shadow:var(--shadow);
  background:#111;
}
.video-frame iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0;
}
.video-missing{
  padding:40px 20px;
  text-align:center;
  color:var(--ink-soft);
  background:var(--paper);
  border-radius:20px;
  border:1px dashed var(--line);
}

.related-section{
  margin-top:56px;
}
.related-section h2{
  font-size:1.05rem;
  margin-bottom:16px;
}

@media (max-width: 760px){
  .book-hero{
    grid-template-columns:1fr;
    gap:24px;
  }
  .book-hero .cover-frame{
    max-width:240px;
    margin:0 auto;
  }
  .header-inner{padding:10px 16px;}
  .logo-img{height:34px;}
  .header-link{font-size:.78rem; padding:7px 13px;}
  #app{padding:24px 16px 12px;}
  .card-grid{grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:14px;}
}