/* 朝の図書館。生成り・セージ・木の色を、入口から店内まで共有します。 */
:root {
  --paper: #f4f0df;
  --surface: #eae7d6;
  --ink: #3d493c;
  --muted: #6d715e;
  --green: #53694d;
  --green-dark: #3e523b;
  --line: #d8d6c3;
  --accent: #ad785b;
}
body { background-image: radial-gradient(ellipse at 12% 15%, #fffbed80, transparent 65%); }
.site-header { background: #f4f0dff5; }
.brand { color: #48583f; }
.brand-mark { opacity: 1; width: 40px; height: 40px; }
.button { border-radius: 28px; padding: 13px 24px; letter-spacing: .025em; }
.button.primary { box-shadow: inset 0 1px #ffffff20, 0 3px 0 #3e523b20; }
.button.secondary { background: #faf7e980; }
.account-button, .wishlist-button { border-radius: 24px; border-color: #cecfba; }
.nav-link[aria-current="page"] { color: var(--green); text-decoration: underline; text-underline-offset: 7px; }
.entrance { max-width: 1440px; margin: auto; }
.welcome-copy { padding: 32px 24px 10px; z-index: 1; }
.welcome-copy > .eyebrow { font-size: 10px; color: #7b8068; letter-spacing: .2em; margin-bottom: 18px; }
.entrance .welcome-copy h1 { font-size: clamp(29px, 7.7vw, 42px); line-height: 1.65; letter-spacing: -.045em; }
.welcome-copy h1 span { color: #6c7957; }
.welcome-lead { font-family: var(--sans); font-size: 13px; line-height: 2; margin-top: 18px; }
.welcome-aside { display: block; font-size: 11px; margin-top: 12px; color: var(--muted); }
.entry-actions { display: flex; flex-direction: column; align-items: stretch; gap: 10px; max-width: 340px; }
.entry-actions .button { font-size: 12px; justify-content: space-between; }
.entrance-more { margin-top: 16px; }
.entry-note { font-size: 10px; max-width: 330px; line-height: 1.7; }
.welcome-art { padding: 0; min-height: 370px; background: transparent; isolation: isolate; }
.welcome-art::before { inset: 8% 0 3%; background: radial-gradient(ellipse, #dee3bd85, #ecebd738 58%, transparent 72%); border-radius: 50%; }
.welcome-art > img { position: absolute; inset: 10% 10%; width: 80%; height: 75%; object-fit: cover; border-radius: 48% 48% 42% 42%; box-shadow: none; }
.welcome-art.is-ready > img { display: none; }
.welcome-art canvas { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; max-height: none; aspect-ratio: auto; }
.garden-label { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 9px; letter-spacing: .12em; color: #727c60; }
.garden-label i { display: inline-block; width: 5px; height: 5px; background: #85996c; border-radius: 50%; margin-right: 7px; }
.garden-label, .garden-receipt { z-index: 1; pointer-events: none; }
.garden-receipt { position: absolute; bottom: 14px; right: 22px; transform: rotate(7deg); padding: 14px 18px 20px; background: #fffae9; box-shadow: 0 8px 20px #66674712; clip-path: polygon(0 0,100% 0,100% 97%,95% 100%,90% 97%,85% 100%,80% 97%,75% 100%,70% 97%,65% 100%,60% 97%,55% 100%,50% 97%,45% 100%,40% 97%,35% 100%,30% 97%,25% 100%,20% 97%,15% 100%,10% 97%,5% 100%,0 97%); }
.garden-receipt small { display: block; font-size: 7px; letter-spacing: .14em; border-bottom: 1px dashed #d5d0b8; padding-bottom: 7px; }
.garden-receipt > span { display: block; font-family: var(--serif); font-size: 13px; line-height: 1.7; margin: 8px 0; }
.garden-receipt b { font-size: 7px; font-weight: 400; color: var(--muted); }
.store { color: var(--ink); background: #e5e9d8; }
.store-top > div, .glass-button, .store-more > summary, .store-more-panel,
.desktop-hint, .travel-feedback p, .hover-label {
  background: #faf6e8ed; color: #46553d; border: 1px solid #d2d4bc;
  box-shadow: 0 4px 18px #4a543318; border-radius: 18px;
}
.store-top > div { padding: 12px 18px; border-radius: 4px 22px 22px 22px; }
.store-top .open-label, .shelf-navigation label, .desktop-hint > span { color: #697759; }
.glass-button { border-radius: 28px; }
.desktop-hint kbd { border-color: #c6cab2; }
.store-more .room-links a, .store-more .room-links button { color: #46553d; background: #e9e8d6; border-color: #cdd0b9; border-radius: 12px; }
.shelf-navigation button { background: #dce2c6; color: #46553d; border-radius: 12px; }
#joystick { background: #f4f0dfb3; border-color: #b8c2a4; color: #5b6b4a; }
#joystick-knob { background: #99aa7fb3; border-color: #71865b; }
#joystick::before, #joystick::after { background: #97a77f40; }
.tutorial { background: #4d5c3940; backdrop-filter: blur(5px); }
.tutorial > div { border-radius: 24px; background: var(--paper); color: var(--ink); border: 1px solid var(--line); }
.onboarding { background: #53604780; backdrop-filter: blur(8px); }
.onboarding-panel { border-radius: 24px; box-shadow: 0 24px 90px #46503326; }
/* 案内画像は角丸の一枚の絵として枠いっぱいに見せます。被写体は中央に寄せて生成しているため、上下の端だけが切れます。 */
.onboarding-visual { width: 100%; height: 170px; max-height: none; background: #f7f0de; border: 0; border-radius: 16px; }
.onboarding-visual img { filter: none; }
.onboarding-content { min-height: 0; }
.onboarding-book-card, .onboarding-result { border-radius: 12px; }
.onboarding-shelf-preview { background: #d6bd96; border-color: #b49770; border-radius: 18px 18px 8px 8px; }
.onboarding-shelf-preview .onboarding-book-card { background: #f4f0df; }
.onboarding-shelf-preview > span { color: #53694d; }
.onboarding-cover { border-color: #bcc9a5; border-radius: 4px 10px 10px 4px; }
.welcome-art > img { object-fit: contain; border-radius: 0; }
.shelf-page-heading, .list-heading { border-bottom: 1px solid var(--line); padding-bottom: 24px; }
.shelf-toolbar .button { font-size: 12px; }
/* 既存の4枠にクラウド保存が加わっても、下部ナビを一段に収めます。 */
.site-header nav { grid-template-columns: repeat(5, minmax(0, 1fr)); background: #f4f0dff5; }
.site-header nav .account-button { min-width: 0; width: 100%; padding: 4px 2px; font-size: 9px; align-self: center; }
@media (min-width: 680px) {
  /* 広い画面のナビは上部の横並びに戻し、base.css の寸法を使います。 */
  .site-header nav { grid-template-columns: none; background: none; }
  .site-header nav .account-button { min-width: 44px; width: auto; padding: 8px 14px; font-size: 12px; align-self: auto; }
  /* 広い画面では枠を画像と同じ3:2にし、切らずに中央へ置きます。 */
  .onboarding-visual { width: 315px; height: 210px; margin-inline: auto; }
  .entrance { grid-template-columns: 46% 54%; min-height: calc(100dvh - 166px); align-items: center; }
  .welcome-copy { padding: 48px 12px 48px 36px; }
  .entrance .welcome-copy h1 { font-size: clamp(30px, 3.4vw, 49px); }
  .welcome-art { align-self: stretch; min-height: 590px; padding: 0; }
  .welcome-art canvas { width: 100%; margin: 0; max-height: none; }
  .welcome-art > img { height: 75%; }
  .garden-label { top: 52px; font-size: 9px; }
  .garden-receipt { bottom: 42px; right: 32px; }
}
@media (min-width: 1100px) {
  .site-header { margin: 0 5%; padding: 0; }
  .entrance { grid-template-columns: 43% 57%; padding: 0 4%; }
  .welcome-copy { padding: 60px 0 60px 30px; }
  .entrance .welcome-copy h1 { font-size: clamp(38px, 3.45vw, 51px); }
  .welcome-copy > .eyebrow { margin-bottom: 24px; }
  .welcome-lead { font-size: 14px; margin-top: 26px; }
  .welcome-art { min-height: 650px; }
  .garden-label { top: 64px; }
  .garden-receipt { bottom: 48px; right: 40px; padding: 18px 26px 24px; }
  .garden-receipt > span { font-size: 16px; }
}