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

:root{
  --paper:#EAD9B8;
  --paper-2:#E1CBA0;
  --paper-shadow:#C9AF80;
  --ink:#2B2118;
  --ink-soft:#4A3B2C;
  --wood:#3E2A1C;
  --wood-2:#5A3D28;
  --wine:#6E2A34;
  --wine-2:#8A3A46;
  --gold:#A8823C;
  --gold-soft:#C9A55C;
  --sage:#5C6B4F;
  --font-display:'Shippori Mincho','Yu Mincho',serif;
  --font-body:'Zen Kaku Gothic New','Yu Gothic',sans-serif;
}

*{box-sizing:border-box;}
.hidden{display:none !important;}

/* ★v1.3 Phase A：感情の地図（#trendBox）をUI非表示。DOM・JS（renderTrend等）・保存処理は温存。
   将来「棚の記録」として再設計する際はこの1行を削除するだけで復帰できる。
   ID指定のみとし、#shioriCardと共用する.trendクラス全体は対象にしない。 */
#trendBox{ display:none !important; }

/* ★追加：セラピューティックUIの一環。プレースホルダーを淡く上品な色・やや小さめの
   サイズにし、入力前の圧迫感を減らす（世界観の色 --ink-soft をベースに透明度で調整）。 */
input::placeholder, textarea::placeholder{
  color:var(--ink-soft);
  opacity:0.42;
  font-size:0.94em;
}
body.night input::placeholder, body.night textarea::placeholder{
  opacity:0.5;
}

/* ★追加：スマホ実機での横はみ出し（横スクロール・画面が横に広がる現象）を防止 */
html{
  overflow-x:hidden;
  width:100%;
}
body{
  margin:0;
  overflow-x:hidden;
  width:100%;
  max-width:100vw;
}

.shop{
  background:
    radial-gradient(ellipse at top left, rgba(255,255,255,0.15), transparent 60%),
    var(--paper);
  background-image:
    repeating-linear-gradient(0deg, rgba(60,40,20,0.02) 0px, rgba(60,40,20,0.02) 1px, transparent 1px, transparent 3px),
    linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
  color:var(--ink);
  font-family:var(--font-body);
  min-height:100vh;
  line-height:1.8;
  overflow-x:hidden;
  width:100%;
  max-width:100vw;
}

/* ---- motion off ---- */
body.no-motion *, body.no-motion *::before, body.no-motion *::after{
  animation:none !important;
  transition:none !important;
}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
}

.reveal{opacity:0; transform:translateY(14px); transition:opacity .7s ease, transform .7s ease;}
.reveal.visible{opacity:1; transform:none;}
body.no-motion .reveal{opacity:1; transform:none;}
body.no-motion .chat-window{ scroll-behavior:auto; }

/* ---- mood lighting layer (照明・色温度) ---- */
#moodLayer{
  position:fixed; inset:0;
  pointer-events:none;
  z-index:200;
  background:rgba(0,0,0,0);
  transition:background 2.5s ease;
}
body.no-motion #moodLayer{display:none;}

.entrance{
  text-align:center;
  padding:64px 24px 48px;
  border-bottom:1px solid var(--paper-shadow);
  position:relative;
}
.entrance::before{
  content:"";
  display:block;
  width:100%;
  height:6px;
  background:repeating-linear-gradient(90deg, var(--wine) 0 28px, var(--season-accent, var(--gold)) 28px 32px);
  opacity:0.85;
  margin-bottom:40px;
}
.eyebrow{
  font-family:var(--font-display);
  letter-spacing:.35em;
  font-size:12px;
  color:var(--season-accent, var(--wine));
  margin:0 0 18px;
}
.entrance h1{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(30px,5vw,52px);
  margin:0 0 14px;
  letter-spacing:.06em;
  color:var(--ink);
}
.tagline{
  font-family:var(--font-display);
  font-size:17px;
  color:var(--ink-soft);
  margin:0 0 6px;
}
.sub-tagline{
  font-size:13px;
  color:var(--ink-soft);
  margin:0 0 30px;
  letter-spacing:.05em;
}
.enter-btn{
  font-family:var(--font-display);
  background:var(--wine);
  color:var(--paper);
  border:none;
  padding:14px 34px;
  font-size:15px;
  letter-spacing:.1em;
  border-radius:2px;
  cursor:pointer;
  box-shadow:0 3px 0 var(--wood);
  transition:transform .15s ease;
}
.enter-btn:hover{transform:translateY(-2px);}
.enter-btn:active{transform:translateY(1px); box-shadow:0 1px 0 var(--wood);}

.pref-row{
  display:flex;
  gap:10px;
  justify-content:center;
  margin-top:26px;
  flex-wrap:wrap;
}
.pref-toggle{
  font-family:var(--font-body);
  font-size:11.5px;
  letter-spacing:.08em;
  padding:6px 16px;
  border:1.5px solid var(--paper-shadow);
  background:rgba(255,255,255,0.25);
  color:var(--ink-soft);
  opacity:.7;
  border-radius:20px;
  cursor:pointer;
  transition:all .15s ease;
}
.pref-toggle::before{
  content:"○ ";
}
.pref-toggle.on{
  border-color:var(--wine);
  color:#fff9ec;
  background:var(--wine);
  opacity:1;
  font-weight:600;
  box-shadow:0 2px 6px rgba(110,42,52,0.35);
}
.pref-toggle.on::before{
  content:"● ";
}
.trust-row{
  display:flex;
  gap:8px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:16px;
}
.trust-badge{
  font-size:10.5px;
  color:var(--ink-soft);
  letter-spacing:.02em;
  padding:4px 10px;
  border:1px solid var(--paper-shadow);
  border-radius:12px;
  background:rgba(255,255,255,0.3);
}

/* ---- book bookmark page navigation ---- */
.page-nav{
  position:sticky;
  top:0;
  z-index:40;
  display:flex;
  justify-content:center;
  gap:6px;
  padding:10px 12px;
  background:linear-gradient(180deg, rgba(234,217,184,0.97), rgba(234,217,184,0.9));
  backdrop-filter:blur(2px);
  border-bottom:1px solid var(--paper-shadow);
  flex-wrap:wrap;
}
.page-tab{
  font-family:var(--font-display);
  font-size:12.5px;
  letter-spacing:.06em;
  padding:8px 16px 9px;
  border:1px solid var(--gold);
  border-bottom:none;
  border-radius:8px 8px 3px 3px;
  background:#fdf6e6;
  color:var(--ink-soft);
  cursor:pointer;
  position:relative;
  top:0;
  transition:top .15s ease, background .15s ease, color .15s ease;
}
.page-tab:hover{ top:-2px; }
.page-tab.active{
  background:var(--wine);
  color:#f6e8c9;
  border-color:var(--wine);
  top:-3px;
  box-shadow:0 4px 8px rgba(0,0,0,0.15);
}

.intro-explainer{
  max-width:920px;
  margin:0 auto;
  padding:36px 24px;
  border-bottom:1px solid var(--paper-shadow);
}
.intro-explainer.in-header{
  border-bottom:none;
  padding:30px 0 6px;
}
.intro-kicker{
  font-family:var(--font-display);
  font-size:13px;
  color:var(--wine);
  text-align:center;
  letter-spacing:.1em;
  margin:0 0 22px;
}
.intro-steps{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:16px;
}
.intro-step{
  text-align:center;
  padding:16px 10px;
  background:rgba(255,255,255,0.35);
  border:1px solid var(--paper-shadow);
  border-radius:6px;
  font-family:var(--font-body);
  cursor:pointer;
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  box-sizing: border-box;
}
.intro-step:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,0.6);
  border-color:var(--gold);
}
.intro-num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:26px; height:26px;
  border-radius:50%;
  background:var(--gold);
  color:#fff9ec;
  font-family:var(--font-display);
  font-size:13px;
  margin-bottom:8px;
}
.intro-title{
  font-family:var(--font-display);
  font-size:14.5px;
  color:var(--ink);
  margin:0 0 6px;
}
.intro-text{
  font-size:12px;
  color:var(--ink-soft);
  margin:0;
  line-height:1.6;
  flex: 1;
  word-break: auto-phrase;
}
@media (max-width:640px){
  .intro-steps{ grid-template-columns:repeat(2, 1fr); }
}

/* ---- page-turn transition ----
   ★Daypart1_RC2：画面切替のたびに白い光の帯が画面全体を横切る演出（利用時に鬱陶しいとの
   ご指摘）を完全に廃止した。.page-turn-overlay／.page-turn-overlay.active／
   @keyframes pageTurnSwipe は削除済み。対応するDOM（#pageTurnOverlay）もindex.htmlから
   削除済み。画面切替はmain.jsのgoToPage()による即時切替のみとなる。 */

section{
  max-width:920px;
  margin:0 auto;
  padding:56px 24px;
  border-bottom:1px solid var(--paper-shadow);
  scroll-margin-top:64px;
}
section:last-of-type{border-bottom:none;}

.section-head{
  display:flex;
  align-items:baseline;
  gap:14px;
  margin-bottom:28px;
}
.section-num{
  font-family:var(--font-display);
  color:var(--wine);
  font-size:13px;
  border:1px solid var(--wine);
  border-radius:50%;
  width:26px;height:26px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.section-head h2{
  font-family:var(--font-display);
  font-size:23px;
  margin:0;
  font-weight:700;
}
.shelf-count{
  font-size:12px;
  color:var(--gold);
  background:#fff9ec;
  border:1px solid var(--gold);
  padding:2px 12px;
  border-radius:20px;
  margin-left:auto;
}
.section-sub{
  font-size:13px;
  color:var(--ink-soft);
  margin:-18px 0 26px 40px;
}

/* --- counter / chat --- */
.counter-wrap{
  background:rgba(255,255,255,0.35);
  border:1px solid var(--paper-shadow);
  border-radius:4px;
  padding:20px;
}
.keeper-vignette{
  display:flex;
  justify-content:center;
  margin:-4px 0 12px;
}
.keeper-vignette svg{
  width:min(320px,100%);
  height:auto;
  opacity:.92;
}
.keeper-bio{
  text-align:center;
  margin:-4px 0 14px;
}
.keeper-bio summary{
  font-size:11.5px;
  color:var(--ink-soft);
  cursor:pointer;
  list-style:none;
  display:inline-block;
}
.keeper-bio summary::-webkit-details-marker{ display:none; }
.keeper-bio summary::before{ content:"▸ "; color:var(--gold); }
.keeper-bio[open] summary::before{ content:"▾ "; }
.keeper-bio p{
  font-size:12px;
  color:var(--ink-soft);
  max-width:480px;
  margin:8px auto 0;
  line-height:1.8;
}
/* ★RC3 CounterAtmosphere：人物ピクトグラム（.keeper .head/.book）とその「頷き」演出
   （.keeper.listening）を廃止した。新しい静物（.counter-desk-still／.counter-lamp-still／
   .counter-ledger-still）にはこの演出を一切引き継がない。#keeperFigureへのJS参照
   （main.js）はnullセーフなif(kf){...}のままのため、要素が存在しなくても安全。 */

.chat-window{
  max-height:360px;
  overflow-y:auto;
  /* ★追加：吹き出しが増えて内側スクロールが発生した際、店主の返信が
     カクッと瞬間移動せず、優しく追従するように */
  scroll-behavior:smooth;
  padding:6px 4px 10px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.bubble{
  max-width:80%;
  padding:12px 18px;
  /* ★調整：セラピューティックUIの一環。角丸を大きくし、より柔らかいチャット
     吹き出しの形状に。話者側の角だけを軽く「しっぽ」状に残して発言者を示す。 */
  border-radius:18px;
  box-shadow:0 2px 8px rgba(80,55,20,0.08);
  font-size:14.5px;
  white-space:pre-wrap;
}
.bubble.shopkeeper{
  align-self:flex-start;
  background:var(--paper-2);
  border:1px solid var(--paper-shadow);
  border-top-left-radius:4px;
}
.bubble.shopkeeper .name{
  display:block;
  font-family:var(--font-display);
  font-size:11px;
  color:var(--wine);
  margin-bottom:4px;
  letter-spacing:.1em;
}
.bubble.you{
  align-self:flex-end;
  background:var(--wine);
  color:var(--paper);
  border-top-right-radius:4px;
}
.bubble.loading{
  align-self:flex-start;
  background:transparent;
  color:var(--ink-soft);
  font-style:italic;
  font-size:13px;
  padding:0 4px;
}
.chat-input-row{
  display:flex;
  gap:10px;
  margin-top:14px;
  border-top:1px solid var(--paper-shadow);
  padding-top:14px;
}
.chart-options{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:4px 0 6px;
}
.chart-btn{
  font-family:var(--font-body);
  font-size:14.5px;
  font-weight:700;
  padding:10px 18px;
  border:1.5px solid var(--gold);
  background:#fff9ec;
  color:var(--wine);
  border-radius:24px;
  cursor:pointer;
  box-shadow: 0 3px 6px rgba(168,130,60,0.15);
  transition:all .2s ease;
}
.chart-btn:hover{
  background:var(--paper-2);
  transform:translateY(-2px);
  box-shadow: 0 5px 10px rgba(168,130,60,0.2);
}
.chart-btn.primary{
  background:var(--wine);
  color:var(--paper);
  border-color:var(--wine);
}
.next-action-guide {
  background: rgba(255,255,255,0.6);
  border-radius: 6px;
  padding: 14px;
  margin: 12px 0 16px;
  border-left: 4px solid var(--wine);
  animation: dropIn .5s ease;
}
.guide-lead {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13.5px;
  color: var(--wine);
  margin: 0 0 6px;
}
.freeform-hint{
  font-size:11px;
  color:var(--ink-soft);
  margin:0;
}
/* ★追加：最初の画面から出しておく控えめな一言（目立たせすぎない） */
.early-freeform-hint{
  margin:2px 2px 6px;
  opacity:.8;
}
.chat-input-row textarea{
  flex:1;
  resize:none;
  font-family:var(--font-body);
  /* ★修正：iOSはinput/textareaのfont-sizeが16px未満だとフォーカス時に自動ズームするため16pxに */
  font-size:16px;
  padding:10px 12px;
  border:1px solid var(--paper-shadow);
  border-radius:3px;
  background:#fff9ec;
  color:var(--ink);
  min-height:44px;
}
.chat-input-row textarea:focus, textarea:focus, input:focus, select:focus, button:focus-visible{
  outline:2px solid var(--wine-2);
  outline-offset:1px;
}
.send-btn{
  font-family:var(--font-display);
  background:var(--ink);
  color:var(--paper);
  border:none;
  padding:0 22px;
  border-radius:3px;
  cursor:pointer;
  font-size:14px;
}
.send-btn:disabled{opacity:.5; cursor:default;}

/* --- monthly fair --- */
.fair{
  border:1px solid var(--season-accent, var(--gold));
  background:rgba(255,249,236,0.6);
  border-radius:4px;
  padding:12px 16px;
  margin-bottom:18px;
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
  font-size:13px;
}
.fair b{
  font-family:var(--font-display);
  color:var(--wine);
  font-size:14px;
}
.fair-line{color:var(--ink-soft); flex:1; min-width:200px;}
.fair-go{
  font-size:12px;
  padding:6px 14px;
  border:1px solid var(--season-accent, var(--gold));
  background:var(--season-accent, var(--gold));
  color:#fff9ec;
  border-radius:20px;
  cursor:pointer;
}

/* --- shelves --- */
/* ★微調整：棚タブ＋棚内容を含むスワイプ検出専用ラッパー。
   pan-yで縦スクロールは妨げず、横方向のブラウザ既定ジェスチャー処理だけをJS側の
   スワイプ判定に譲る。 */
.shelf-swipe-zone{
  touch-action:pan-y;
}
.shelf-tabs{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:20px;
}
.shelf-group{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.shelf-group-label{
  font-family:var(--font-body);
  font-size:11.5px;
  color:var(--ink-soft);
  opacity:.65;
  letter-spacing:.04em;
}
.shelf-group-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.shelf-wander-row{
  display:flex;
  justify-content:flex-end;
  margin-top:2px;
}
.shelf-tab{
  font-family:var(--font-body);
  font-size:15px;
  padding:8px 16px;
  border:1px solid var(--gold);
  background:transparent;
  color:var(--ink-soft);
  border-radius:20px;
  cursor:pointer;
}
.shelf-tab.active{
  background:var(--gold);
  color:#fff9ec;
  border-color:var(--gold);
}
.shelf-tab.glow{
  border-color:var(--gold);
  box-shadow:0 0 8px rgba(201,165,92,0.6);
}
/* ★決裁済み変更仕様v1.2 5-フェーズ2-5：棚タブglowの無限パルスを停止。
   .shelf-tab.glow自体（静的なbox-shadow強調）は残し、JS側のクラス付与契約は変更しない。 */
/* ★追加：本棚が際限なく伸び続けないための月別タブ。emotion棚の.shelf-tabと統一感を持たせつつ一回り小さく */
.shelf-month-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:10px 0 14px;
}
.shelf-month-tabs.hidden{ display:none; }
.shelf-month-tab{
  font-family:var(--font-body);
  font-size:12.5px;
  padding:5px 12px;
  border:1px solid var(--gold);
  background:transparent;
  color:var(--ink-soft);
  border-radius:16px;
  cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.shelf-month-tab.active{
  background:var(--wine);
  color:#f6e8c9;
  border-color:var(--wine);
}
body.night .shelf-month-tab{ border-color:rgba(201,165,92,0.4); color:var(--ink-soft); }
body.night .shelf-month-tab.active{ background:var(--gold); color:#2b1d10; border-color:var(--gold); }
.wander-btn{
  font-family:var(--font-body);
  font-size:12.5px;
  padding:7px 14px;
  border:1px dashed var(--wine);
  background:transparent;
  color:var(--wine);
  border-radius:20px;
  cursor:pointer;
  margin-left:auto;
}
.shelf-display{
  background:rgba(255,255,255,0.35);
  border:1px solid var(--paper-shadow);
  border-radius:4px;
  padding:24px;
  touch-action:pan-y;
}
.swipe-hint{
  font-size:11px;
  color:var(--ink-soft);
  text-align:right;
  margin:8px 2px 0;
  letter-spacing:.05em;
}
/* ★修正：スワイプはタッチ操作の話なので、マウス操作の（＝スワイプできない）
   デスクトップ環境では表示しない。実際にスワイプで棚を移動できる端末にだけ案内する。 */
@media (hover:hover) and (pointer:fine){
  .swipe-hint{ display:none; }
}
.definition{
  font-size:13px;
  color:var(--ink-soft);
  margin:0 0 16px;
  padding-bottom:16px;
  border-bottom:1px dashed var(--paper-shadow);
}
.definition b{color:var(--wine); font-size:15px;}
.quote-card{
  font-family:var(--font-display);
  font-size:16px;
  line-height:2;
  color:var(--ink);
  padding:6px 0 22px;
  position:relative;
}
.quote-card::before{
  content:"—";
  color:var(--gold);
  margin-right:8px;
}
.quote-source{
  font-size:11.5px;
  color:var(--ink-soft);
  margin:-14px 0 22px;
  text-align:right;
}
/* ★追加：名言の出典が書籍・作品名の場合、その作品に飛べるリンク（控えめな下線のみ） */
.quote-source-link{
  color:inherit;
  text-decoration:underline;
  text-decoration-color:var(--paper-shadow);
  text-underline-offset:2px;
}
.quote-source-link:hover{
  color:var(--wine);
  text-decoration-color:var(--wine);
}
.recommend-section{
  margin-top:20px;
  padding-top:18px;
  border-top:1px dashed var(--paper-shadow);
}
.recommend-heading{
  font-family:var(--font-display);
  font-size:14.5px;
  color:var(--wine);
  margin:0 0 4px;
}
.recommend-subtext{
  font-size:11px;
  color:var(--ink-soft);
  margin:0 0 14px;
  line-height:1.6;
}
.recommend-row{
  display:flex;
  align-items:flex-start;
  gap:10px;
  flex-wrap:wrap;
}
.recommend-label{
  font-size:11px;
  color:var(--gold);
  letter-spacing:.1em;
  margin-right:4px;
}
.recommend-chip{
  font-size:12px;
  color:var(--ink-soft);
  background:#fff9ec;
  border:1px solid var(--paper-shadow);
  padding:4px 10px;
  border-radius:20px;
  display:inline-flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
  max-width:260px;
}
.recommend-why{
  font-size:10.5px;
  /* item 3: 明るい背景(#fff9ec)上でのgoldは判読しにくいため、濃い目のwine系に変更しコントラストを確保 */
  color:#7A4A1F;
  white-space:normal;
  line-height:1.5;
}
.recommend-hook{
  display:inline-block;
  font-size:9.5px;
  color:#fff9ec;
  background:var(--wine);
  padding:2px 8px;
  border-radius:10px;
  margin-bottom:4px;
  letter-spacing:.02em;
}
.recommend-source{
  font-size:10px;
  color:var(--wine);
  text-decoration:none;
  border-bottom:1px dashed var(--wine);
  font-weight:600;
}
.recommend-shop-links{
  display:flex;
  gap:10px;
}
.recommend-buy{
  /* item 3: 明るいクリーム背景上でも視認できるよう、彩度・明度を落とした濃色に調整 */
  font-size:11px;
  color:#8A5A12;
  text-decoration:underline;
  font-weight:700;
}
.recommend-buy.rakuten{ color:#A32222; }
.recommend-buy.kindle{ color:#1F5A73; }
.recommend-buy.audible{ color:#6B4419; }
.recommend-buy:hover{ opacity:.8; }
body.night .recommend-buy{ color:#E8C97A; }
body.night .recommend-buy.rakuten{ color:#E89A9A; }
body.night .recommend-buy.kindle{ color:#8FCBE0; }
body.night .recommend-buy.audible{ color:#D9B27A; }
body.night .recommend-why{ color:var(--gold); }
.recommend-shuffle{
  font-size:11px;
  color:var(--ink-soft);
  background:none;
  border:1px dashed var(--paper-shadow);
  padding:5px 12px;
  border-radius:20px;
  cursor:pointer;
  align-self:center;
}
.recommend-more{
  font-size:11.5px;
  color:var(--wine);
  text-decoration:none;
  border-bottom:1px dashed var(--wine);
  align-self:center;
}
.episode-shuffle{
  font-size:11px;
  color:var(--ink-soft);
  background:none;
  border:1px dashed var(--paper-shadow);
  padding:5px 12px;
  border-radius:20px;
  cursor:pointer;
  margin-top:12px;
}
.episodes-note{
  font-size:10px;
  color:var(--ink-soft);
  opacity:.75;
  margin:8px 0 0;
}
.story-image-btn{
  display:block;
  margin-top:14px;
  font-family:var(--font-display);
  font-size:13px;
  color:#f6e8c9;
  background:var(--wine);
  border:none;
  padding:10px 22px;
  border-radius:20px;
  cursor:pointer;
}
.story-image-btn:disabled{ opacity:.6; }
.story-image-hint{
  font-size:10.5px;
  color:var(--ink-soft);
  margin:8px 0 0;
  line-height:1.6;
}
.shelf-tweets{ margin-top:14px; }
.shelf-tweets-label{
  font-family:var(--font-display);
  font-size:12.5px;
  color:var(--wine);
  margin:0 0 8px;
}
.purify-trigger{
  font-family:var(--font-display);
  font-size:12.5px;
  color:var(--wine);
  background:#fdf6e6;
  border:1px solid var(--wine);
  padding:7px 18px;
  border-radius:20px;
  cursor:pointer;
  margin-top:14px;
  margin-left:10px;
}
.purify-trigger:hover{ background:var(--wine); color:#f6e8c9; }
.music-row{
  margin-top:14px;
}
.playlist-label{
  font-family:var(--font-display);
  font-size:12.5px;
  color:var(--wine);
  margin:0 0 8px;
}
.playlist-tracks{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.playlist-track{
  font-size:12px;
  color:var(--ink-soft);
  text-decoration:none;
  padding:5px 0;
}
.playlist-track:hover{ color:var(--wine); }
.playlist-track-row{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:8px;
  padding:5px 0;
}
.playlist-track-name{
  font-size:12.5px;
  color:var(--ink);
}
.playlist-services{
  display:inline-flex;
  flex-wrap:wrap;
  gap:10px;
}
.apple-music-note{
  margin:8px 2px 0 !important;
  opacity:.7;
}

/* ---- 追加：店主への差し入れ（投げ銭）リンク ---- */
.support-row{ margin-top:16px; }
.support-link{
  display:inline-block;
  font-family:var(--font-display);
  font-size:13px;
  color:var(--wine);
  background:#fdf6e6;
  border:1px solid var(--gold);
  padding:8px 18px;
  border-radius:20px;
  text-decoration:none;
}
.support-link:hover{ background:var(--paper-2); }
.support-hint{ text-align:center; margin-top:6px; }

/* ---- 追加：番台での対話が進むほど、店主が「見えてきている」ことを示す気配メーター
   （Akinatorのテーマ選択・確信度演出を参考に、答えを断定するのではなく
   「少しずつ寄り添っている」ニュアンスに寄せている） ---- */
.mitate-meter{
  margin:6px 2px 2px;
  display:flex;
  align-items:center;
  gap:8px;
  transition:opacity .3s ease;
}
.mitate-meter-label{
  font-size:11px;
  color:var(--ink-soft);
  white-space:nowrap;
}
.mitate-meter-bar{
  flex:1 1 auto;
  height:4px;
  border-radius:2px;
  background:var(--paper-shadow);
  overflow:hidden;
}
.mitate-meter-fill{
  height:100%;
  width:0%;
  background:var(--gold);
  border-radius:2px;
  transition:width .5s ease;
}
body.no-motion .mitate-meter-fill{ transition:none; }
.playlist-services a{
  font-size:10.5px;
  color:var(--wine);
  text-decoration:none;
  border-bottom:1px dashed var(--wine);
}
.music-link{
  font-size:12.5px;
  color:var(--wine);
  text-decoration:none;
  border-bottom:1px dashed var(--wine);
  padding-bottom:1px;
}
.music-link:hover{color:var(--wine-2);}
.episodes{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:14px;
}
.episode-card{
  background:#fff9ec;
  border:1px solid var(--paper-shadow);
  border-left:3px solid var(--sage);
  padding:14px 16px;
  font-size:13.5px;
  border-radius:2px;
}
.episode-card.mine{
  border-left:3px solid var(--wine);
  background:#fdf1e0;
  cursor:pointer;
}
.episode-card.mine:hover{ background:#fbe8cf; }
.mine-who{ color:var(--wine) !important; font-weight:600; }
.episode-card .who{
  display:block;
  font-size:11px;
  color:var(--sage);
  margin-bottom:6px;
  letter-spacing:.05em;
}

/* --- desk / submit --- */
.desk-form{
  background:rgba(255,255,255,0.35);
  border:1px solid var(--paper-shadow);
  border-radius:4px;
  padding:22px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.field-row{display:flex; gap:14px; flex-wrap:wrap;}
.field{display:flex; flex-direction:column; gap:6px; flex:1; min-width:180px;}
.field label{font-size:12px; color:var(--ink-soft); letter-spacing:.05em;}
.field select, .field input, .field textarea{
  font-family:var(--font-body);
  /* ★修正：iOSのフォーカス時自動ズーム対策で16pxに */
  font-size:16px;
  padding:10px 12px;
  border:1px solid var(--paper-shadow);
  border-radius:3px;
  background:#fff9ec;
  color:var(--ink);
}
.field textarea{resize:vertical; min-height:100px;}
.field-hint{
  font-size:11px;
  color:var(--ink-soft);
  line-height:1.6;
}
.desk-extra{
  border-top:1px dashed var(--paper-shadow);
  padding-top:12px;
}
.desk-extra summary{
  /* 任意ラベリング機能の存在に気づけるよう、チップ状に強調（12px→14px） */
  display:inline-block;
  font-size:14px;
  font-weight:600;
  color:var(--wine);
  background:rgba(255,251,240,0.75);
  border:1px dashed var(--gold);
  border-radius:10px;
  padding:10px 16px;
  cursor:pointer;
  list-style:none;
}
body.night .desk-extra summary{
  background:#332E26;
}
.desk-extra summary::-webkit-details-marker{ display:none; }
.desk-extra summary::before{ content:"▸ "; color:var(--gold); }
.desk-extra[open] summary::before{ content:"▾ "; }
.count-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}
.assist-link{
  background:none;
  border:none;
  font-size:12px;
  color:var(--sage);
  text-decoration:underline;
  cursor:pointer;
  padding:0;
}
.story-count{font-size:11.5px; color:var(--ink-soft);}
.story-count.over{color:var(--wine); font-weight:700;}
.desk-actions{display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
.bind-btn{
  font-family:var(--font-display);
  background:var(--wine);
  color:var(--paper);
  border:none;
  padding:12px 26px;
  border-radius:3px;
  cursor:pointer;
  font-size:14px;
  letter-spacing:.05em;
}
.bind-btn:disabled{opacity:.5;}
.desk-msg{font-size:12.5px; color:var(--sage);}

/* --- curation box (店主の審査・提案) --- */
.curate-box{
  background:var(--paper-2);
  border:1px solid var(--paper-shadow);
  border-radius:6px;
  border-top-left-radius:0;
  padding:14px 16px;
  font-size:13.5px;
}
.curate-msg{margin:0 0 12px; white-space:pre-wrap;}
.curate-msg::before{
  content:"店主：";
  font-family:var(--font-display);
  color:var(--wine);
  font-size:12px;
  letter-spacing:.1em;
  margin-right:4px;
}
.curate-actions{display:flex; gap:10px; flex-wrap:wrap; align-items:center;}
.curate-btn{
  font-size:12.5px;
  padding:7px 16px;
  border-radius:20px;
  border:1px solid var(--gold);
  background:#fff9ec;
  cursor:pointer;
  color:var(--ink-soft);
  font-family:var(--font-body);
}
.curate-btn.primary{background:var(--gold); color:#fff9ec;}
.curate-cancel{
  background:none;
  border:none;
  font-size:12px;
  text-decoration:underline;
  color:var(--ink-soft);
  cursor:pointer;
}

/* --- binding ceremony overlay --- */
.bind-overlay{
  position:fixed; inset:0;
  background:rgba(30,20,10,0.72);
  z-index:60;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:20px;
  cursor:pointer;
}
.bind-book{
  width:120px; height:150px;
  position:relative;
  perspective:700px;
}
.bind-spine-strip{
  position:absolute; left:0; top:0; bottom:0; width:10px;
  background:var(--gold);
  border-radius:2px 0 0 2px;
}
.bind-pages{
  position:absolute; inset:6px 4px 6px 12px;
  background:#fdf6e6;
  border-radius:0 3px 3px 0;
  box-shadow:inset -8px 0 12px rgba(0,0,0,0.08);
}
.bind-cover{
  position:absolute; inset:0 0 0 10px;
  background:var(--wine);
  border-radius:0 4px 4px 0;
  transform-origin:left center;
  transform:rotateY(-150deg);
  box-shadow:2px 3px 12px rgba(0,0,0,0.35);
}
/* ★v1.3 Phase C-2：製本演出のCSS側時間を1.7s→1.15sへ（main.jsのt2=1200msより僅かに短く終える） */
.bind-overlay.animating .bind-cover{
  animation:closeCover 1.15s ease forwards;
}
@keyframes closeCover{
  0%{transform:rotateY(-150deg);}
  45%{transform:rotateY(-150deg);}
  100%{transform:rotateY(0deg);}
}
.bind-text{
  font-family:var(--font-display);
  color:#f2e6c8;
  font-size:15px;
  letter-spacing:.15em;
  margin:0;
}
.bind-skip{
  font-size:11px;
  color:#cbb98f;
  margin:0;
  letter-spacing:.1em;
}

/* ---- purification ritual (気持ちを手放す) ---- */
.purify-overlay{
  position:fixed;
  inset:0;
  background:rgba(20,14,8,0.6);
  z-index:75;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.purify-card{
  background:#fdf6e6;
  max-width:440px;
  width:100%;
  border-radius:6px;
  padding:28px;
  position:relative;
  box-shadow:0 20px 60px rgba(0,0,0,0.4);
  text-align:center;
}
.purify-close{
  position:absolute;
  top:12px; right:14px;
  background:none; border:none;
  font-size:20px;
  cursor:pointer;
  color:var(--ink-soft);
}
.purify-kicker{
  font-family:var(--font-display);
  font-size:12px;
  color:var(--gold);
  letter-spacing:.1em;
  margin:0 0 10px;
}
.purify-lead{
  font-size:13px;
  color:var(--ink-soft);
  margin:0 0 16px;
  line-height:1.8;
}
.purify-overlay textarea{
  width:100%;
  font-family:var(--font-body);
  /* ★修正：iOSのフォーカス時自動ズーム対策で16pxに */
  font-size:16px;
  padding:10px 12px;
  border:1px solid var(--paper-shadow);
  border-radius:3px;
  background:#fff9ec;
  color:var(--ink);
  resize:vertical;
  margin-bottom:14px;
  transition:opacity 1.2s ease, transform 1.2s ease;
}
.purify-overlay textarea.dissolving{
  opacity:0;
  transform:translateY(10px) scale(0.98);
}
.purify-btn{
  font-family:var(--font-display);
  background:var(--wine);
  color:#f6e8c9;
  border:none;
  padding:10px 26px;
  border-radius:20px;
  cursor:pointer;
  font-size:14px;
}
.purify-btn:disabled{ opacity:.5; }
.purify-msg{
  margin-top:16px;
  font-size:13px;
  color:var(--wine);
  font-family:var(--font-display);
  line-height:1.8;
}

/* --- invitation (体験マッチングのデモ) --- */
.invitation{
  margin-top:18px;
  background:#fdf6e6;
  border:1px solid var(--gold);
  border-radius:4px;
  padding:22px;
  position:relative;
  box-shadow:0 4px 14px rgba(70,45,20,0.12);
}
.inv-seal{
  position:absolute; top:-14px; right:18px;
  width:38px; height:38px;
  border-radius:50%;
  background:var(--wine);
  color:#f2dfc0;
  font-family:var(--font-display);
  display:flex; align-items:center; justify-content:center;
  font-size:15px;
  box-shadow:0 2px 5px rgba(0,0,0,0.25);
}
.inv-kicker{
  font-family:var(--font-display);
  font-size:11px;
  letter-spacing:.3em;
  color:var(--gold);
  margin:0 0 6px;
}
.inv-title{
  font-family:var(--font-display);
  font-size:17px;
  margin:0 0 8px;
  color:var(--wine);
}
.inv-body{font-size:13.5px; margin:0 0 10px;}
.inv-note{font-size:11px; color:var(--ink-soft); margin:0 0 14px;}
.inv-close{
  font-size:12px;
  background:none;
  border:1px solid var(--paper-shadow);
  padding:6px 16px;
  border-radius:20px;
  cursor:pointer;
  color:var(--ink-soft);
}

/* --- bookshelf --- */
.wood-shelf{
  background:linear-gradient(180deg, var(--wood-2), var(--wood));
  border-radius:4px;
  padding:28px 22px 0;
  position:relative;
  min-height:200px;
}
.shelf-row{
  display:flex;
  align-items:flex-end;
  gap:6px;
  padding-bottom:18px;
  border-bottom:14px solid var(--wood-2);
  box-shadow:0 6px 10px rgba(0,0,0,0.35);
  flex-wrap:wrap;
}
/* ★2026-07-18追加：本棚の年月グループ見出し（例：「2026年7月の棚」）。
   .shelf-rowはflex-wrapのため、flex-basis:100%で強制的に改行させ、
   背表紙の並び自体（writing-mode等）には手を加えない。 */
.shelf-month-heading{
  flex-basis:100%;
  width:100%;
  font-family:var(--font-display);
  font-size:12.5px;
  letter-spacing:.08em;
  color:var(--lamp-glow);
  margin:16px 0 6px;
  padding-top:12px;
  border-top:1px dashed rgba(232,165,92,0.35);
}
.shelf-month-heading:first-child{
  margin-top:0;
  padding-top:0;
  border-top:none;
}
.spine{
  position:relative;
  writing-mode:vertical-rl;
  text-orientation:mixed;
  font-family:var(--font-display);
  color:#f2e6c8;
  font-size:14px;
  letter-spacing:.12em;
  padding:14px 6px;
  border-radius:2px 2px 0 0;
  cursor:pointer;
  box-shadow:inset -3px 0 0 rgba(0,0,0,0.15), inset 3px 0 0 rgba(255,255,255,0.08);
  transition:transform .15s ease;
  max-height:220px;
  transform:rotate(var(--tilt, 0deg));
}
.spine:hover{transform:translateY(-6px) rotate(var(--tilt, 0deg));}
.spine:active{transform:translateY(-4px) rotate(var(--tilt, 0deg));}
.spine.new{animation:dropIn .5s ease;}
/* ★決裁済み変更仕様v1.2 4-2/4-3：以前を振り返った本＝栞印、写真付き＝小さな額縁の線画に置換（絵文字は使わない） */
.spine.is-sealed::before{
  content:"";
  position:absolute;
  top:0; left:50%;
  transform:translateX(-50%);
  width:9px; height:13px;
  background:rgba(255,253,246,.85);
  clip-path:polygon(0 0, 100% 0, 100% 100%, 50% 76%, 0 100%);
  pointer-events:none;
}
.spine.has-photo::after{
  content:"";
  position:absolute;
  bottom:10px; left:50%;
  transform:translateX(-50%);
  width:13px; height:10px;
  border:1px solid rgba(255,253,246,.85);
  pointer-events:none;
}
@keyframes dropIn{
  from{transform:translateY(-20px) rotate(var(--tilt, 0deg)); opacity:0;}
  to{transform:rotate(var(--tilt, 0deg)); opacity:1;}
}
.shelf-empty{
  color:#d8c9a5;
  font-size:13px;
  padding:30px 6px 40px;
  text-align:center;
  width:100%;
}
.shelf-controls{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px;
  margin-top:12px;
}
.reset-link{
  font-size:12px;
  color:var(--ink-soft);
  background:none;
  border:none;
  text-decoration:underline;
  cursor:pointer;
}

/* --- emotion map + shiori --- */
.trend{
  margin-top:26px;
  background:rgba(255,255,255,0.35);
  border:1px solid var(--paper-shadow);
  border-radius:4px;
  padding:20px 22px;
}
.trend h3{
  font-family:var(--font-display);
  font-size:16px;
  margin:0 0 4px;
}
.trend-note{font-size:11px; color:var(--ink-soft); margin:0 0 16px;}
.trend-row{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:8px;
  font-size:12.5px;
}
.trend-label{width:78px; flex-shrink:0; color:var(--ink-soft);}
.trend-bar{height:10px; border-radius:5px; min-width:10px;}
.trend-count{color:var(--ink-soft); font-size:11.5px; flex-shrink:0;}
.trend-summary-main{
  font-size:15px;
  margin:0 0 4px;
  color:var(--wine);
  font-family:var(--font-display);
}
.trend-detail{
  margin-top:10px;
}
.trend-detail summary{
  font-size:12px;
  color:var(--ink-soft);
  cursor:pointer;
  list-style:none;
}
.trend-detail summary::-webkit-details-marker{ display:none; }
.trend-detail summary::before{ content:"▸ "; color:var(--gold); }
.trend-detail[open] summary::before{ content:"▾ "; }
.trend-detail .trend-note{ margin-top:10px; }
#trendBars{ margin-top:10px; }
/* ★2026-07-18変更：「店主より」の栞コメント（#modalNote／#shioriSlip共通）は、日/夜で
   反転するvar(--ink-soft)に可読性を依存させず、固定の煤色背景・生成り色文字にする。 */
.shiori-slip{
  display:block;
  margin-top:14px;
  background:rgba(30,24,18,0.95);
  border:1px dashed var(--lamp-glow);
  padding:12px 16px;
  font-family:var(--font-display);
  font-size:13.5px;
  transform:rotate(-1.2deg);
  color:#F5EAD2;
  opacity:1;
  line-height:2;
}
.shiori-label{
  display:block;
  font-size:10.5px;
  letter-spacing:.25em;
  color:var(--lamp-glow);
  margin-bottom:4px;
  font-family:var(--font-body);
}
#shioriBtn{margin-top:14px;}

/* --- modal ---
   ★2026-07-18変更：本棚の背表紙を押した後の詳細画面（#bookModal）を、固定の煤色背景・
   生成り色文字にする。day/nightで反転するvar(--paper)/var(--ink)には依存しない。 */
.modal{
  position:fixed; inset:0;
  background:rgba(20,14,8,0.55);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  z-index:50;
}
.modal.hidden{display:none;}
.modal-card{
  background:rgba(30,24,18,0.96);
  border:1px solid rgba(232,201,122,0.28);
  max-width:520px;
  width:100%;
  max-height:80vh;
  overflow-y:auto;
  border-radius:4px;
  padding:28px;
  position:relative;
  box-shadow:0 20px 60px rgba(0,0,0,0.45);
}
.modal-close{
  position:absolute; top:14px; right:16px;
  background:none; border:none; font-size:20px; cursor:pointer; color:rgba(245,234,210,0.8);
}
.modal-card h3{
  font-family:var(--font-display);
  font-size:20px;
  margin:0 0 4px;
  color:#F5EAD2;
}
.modal-cat{
  font-size:12px;
  color:var(--lamp-glow);
  margin:0 0 2px;
}
.modal-date{
  font-size:11px;
  color:rgba(245,234,210,0.75);
  margin:0 0 16px;
}
.modal-story{
  font-size:14.5px;
  white-space:pre-wrap;
  line-height:1.9;
  color:#F5EAD2;
}
.modal-tweet{
  margin-top:16px;
  max-height:420px;
  overflow-y:auto;
}
.modal-tweet a.tweet-fallback{
  font-size:12px;
  color:var(--lamp-glow);
  text-decoration:none;
  border-bottom:1px dashed var(--lamp-glow);
}
.modal-del{
  margin-top:20px;
  font-size:12px;
  color:#F0A5AC;
  background:none;
  border:1px solid #F0A5AC;
  padding:6px 14px;
  border-radius:20px;
  cursor:pointer;
}
.modal-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:20px;
}
.modal-actions .modal-del{ margin-top:0; }
/* ★2026-07-18追加：製本後の本の詳細画面から、タイトル・本文を書き直す機能。 */
.modal-edit{
  font-size:12px;
  color:#F5EAD2;
  background:none;
  border:1px solid var(--lamp-glow);
  padding:6px 14px;
  border-radius:20px;
  cursor:pointer;
}
.modal-edit-title-input{
  display:block;
  width:100%;
  box-sizing:border-box;
  font-family:var(--font-display);
  font-size:19px;
  margin:0 0 4px;
  padding:6px 8px;
  border:1px solid var(--lamp-glow);
  border-radius:4px;
  background:rgba(255,255,255,0.06);
  color:#F5EAD2;
}
.modal-edit-story-input{
  display:block;
  width:100%;
  box-sizing:border-box;
  min-height:160px;
  font-size:14.5px;
  line-height:1.9;
  font-family:inherit;
  padding:10px 12px;
  border:1px solid var(--lamp-glow);
  border-radius:4px;
  background:rgba(255,255,255,0.06);
  color:#F5EAD2;
  resize:vertical;
}
.modal-edit-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
}
.modal-edit-msg{
  font-size:12px;
  color:#F0A5AC;
  margin-top:8px;
}
.modal-goshelf{
  font-size:12px;
  color:#F5EAD2;
  background:none;
  border:1px solid var(--lamp-glow);
  padding:6px 14px;
  border-radius:20px;
  cursor:pointer;
}
.modal-share{
  font-size:12px;
  color:#6cc2f7;
  background:none;
  border:1px solid #6cc2f7;
  padding:6px 14px;
  border-radius:20px;
  cursor:pointer;
}
.modal-share-note{
  font-size:11px;
  color:rgba(245,234,210,0.7);
  opacity:1;
  margin-top:6px;
}

footer.shop-footer{
  text-align:center;
  padding:30px 20px 50px;
  font-size:12px;
  color:var(--ink-soft);
  line-height:1.9;
}
.share-row{ margin-top:18px; }
.legal-row{
  margin-top:14px;
  font-size:10.5px;
}
.legal-row a{
  color:var(--ink-soft);
  text-decoration:underline;
}
.legal-sep{ color:var(--ink-soft); margin:0 6px; }
.share-btn{
  font-family:var(--font-display);
  font-size:13px;
  color:var(--wine);
  background:#fdf6e6;
  border:1px solid var(--wine);
  padding:8px 20px;
  border-radius:20px;
  cursor:pointer;
}
.share-btn:hover{ background:var(--wine); color:#f6e8c9; }

.share-menu{
  position:fixed;
  bottom:24px;
  right:24px;
  background:#fdf6e6;
  border:1px solid var(--gold);
  border-radius:8px;
  padding:14px;
  box-shadow:0 10px 30px rgba(0,0,0,0.25);
  z-index:90;
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:180px;
}
.share-menu-title{
  font-family:var(--font-display);
  font-size:13px;
  color:var(--wine);
  margin:0 0 4px;
}
.share-option{
  font-size:12.5px;
  color:var(--ink-soft);
  background:#fff9ec;
  border:1px solid var(--paper-shadow);
  padding:8px 12px;
  border-radius:6px;
  text-decoration:none;
  text-align:left;
  cursor:pointer;
}
.share-url-input{
  font-size:11px;
  color:var(--ink);
  background:#fff9ec;
  border:1px solid var(--paper-shadow);
  border-radius:6px;
  padding:8px 10px;
  width:100%;
  box-sizing:border-box;
}
.share-menu-hint{
  font-size:10px;
  color:var(--ink-soft);
  margin:0;
  line-height:1.5;
}
.share-option:hover{ background:var(--paper-2); }
.share-close{ color:var(--wine); border-color:var(--wine); }

.milestone-toast{
  position:fixed;
  left:50%;
  bottom:24px;
  transform:translateX(-50%) translateY(20px);
  background:var(--wine);
  color:#f6e8c9;
  font-family:var(--font-display);
  font-size:13.5px;
  padding:14px 24px;
  border-radius:6px;
  box-shadow:0 8px 24px rgba(0,0,0,0.3);
  opacity:0;
  transition:opacity .4s ease, transform .4s ease;
  z-index:80;
  max-width:min(90vw, 420px);
  text-align:center;
}
.milestone-toast.show{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}
/* ★追加：控えめな操作フィードバック用トースト（保存完了など）。祝祭感のある
   milestone-toastより優しい色味・より丸い形状にして、日常の完了通知として使う。 */
.gentle-toast{
  background:var(--paper, #F6ECD4);
  color:var(--ink, #3A2A14);
  border:1px solid rgba(168,130,60,0.25);
  border-radius:24px;
  box-shadow:0 10px 28px rgba(80,55,20,0.18);
}
body.night .gentle-toast{
  background:#2E2922;
  color:#EFE3C8;
  border-color:#3A342A;
}

@media (max-width:600px){
  .field-row{flex-direction:column;}
  .wander-btn{margin-left:0; width:100%;}
}

/* ---- 携帯（スマホ）向けの包括的な調整 ---- */
/* ---- 夜の書店モード（22時〜5時に自動適用：セピアを帯びた深い夜の読書室） ---- */
/* ★v1.3 Phase B：恒常夜化の色温度設計（決裁済み：夜青#101824／煤茶#1C1611／生成り#EFE6D3／
   灯橙#E8A55C／墨#2A231Bの世界観設計書v1.1パレットへ整合）。カスタムプロパティの値のみを
   再定義し、参照元セレクタ・DOM・JSには一切触れない。:root側の昼変数はフォールバックとして残す。 */
body.night{
  --paper:#251E17;
  --paper-2:#1C1611;
  --paper-shadow:#4A3D2C;
  --ink:#EFE6D3;
  --ink-soft:#C7B99A;
  --wine:#B7707C;
  --wine-2:#C98A96;
  --gold:#E8A55C;
  --gold-soft:#F0C48A;
  --sage:#8FA382;
  --wood:#1C1611;
  --wood-2:#120D08;
}
body.night .episode-card,
body.night .recommend-chip,
body.night .shelf-display,
body.night .fair,
body.night .intro-step,
body.night .desk-form,
body.night .trend,
body.night .chat-window .bubble.shopkeeper{
  background:#332E26;
}
body.night .chat-window .bubble.user{ background:#4A3038; }
body.night .modal-card,
body.night .purify-card,
body.night .share-menu{ background:#2E2922; }
body.night .page-nav{ background:linear-gradient(180deg, rgba(34,30,25,0.97), rgba(34,30,25,0.9)); }
body.night .page-tab{ background:#332E26; }
body.night textarea, body.night input, body.night select{ background:#262219; color:var(--ink); }

/* ---- タブレット（〜768px）向けの調整 ---- */
@media (max-width:768px){
  section{ padding:44px 20px; }
  .entrance h1{ font-size:34px; }
  .intro-steps{ gap:12px; }
  .episodes{ grid-template-columns:1fr 1fr; }
  .recommend-chip{ max-width:100%; }
  .chat-window{ max-height:320px; }
  .playlist-track-row{ flex-direction:column; align-items:flex-start; gap:4px; }
}

@media (max-width:480px){
  .entrance{ padding:44px 16px 32px; }
  .entrance h1{ font-size:26px; }
  .tagline{ font-size:15px; }
  .sub-tagline{ font-size:12px; }
  .enter-btn{ width:100%; padding:14px 20px; }
  .pref-row{ gap:8px; }

  .page-nav{ padding:8px; gap:4px; }
  .page-tab{ font-size:11px; padding:7px 10px 8px; flex:1; text-align:center; }

  .intro-explainer{ padding:24px 16px; }
  .intro-steps{ grid-template-columns:1fr 1fr; gap:10px; }
  .intro-step{ padding:12px 8px; }

  section{ padding:36px 16px; }
  .section-head{ flex-wrap:wrap; gap:8px; }
  .section-head h2{ font-size:19px; }
  .shelf-count{ margin-left:0; }

  .keeper-vignette svg{ width:min(220px,100%); }
  .chat-window{ max-height:280px; }
  .chat-input-row{ flex-direction:column; }
  .send-btn{ padding:12px; }

  .chart-options{ gap:6px; }
  .chart-btn{ font-size:12px; padding:7px 12px; flex:1 1 auto; }

  .shelf-tabs{ gap:6px; }
  .shelf-tab{ font-size:13.5px; padding:7px 13px; }
  .wander-btn{ font-size:11.5px; }
  .shelf-display{ padding:16px; }
  .episodes{ grid-template-columns:1fr; }

  .recommend-chip{ max-width:100%; width:100%; }
  .recommend-row{ flex-direction:column; align-items:stretch; }

  .desk-form{ padding:16px; }
  .field-row{ flex-direction:column; }

  .wood-shelf{ padding:20px 12px 0; }
  .spine{ font-size:12px; }

  .modal-card{ padding:20px; max-height:85vh; }
  .modal-actions{ flex-direction:column; }
  .modal-actions button{ width:100%; }

  .purify-card{ padding:20px; max-width:100%; }

  .share-menu{
    left:16px; right:16px; bottom:16px;
    min-width:auto; width:auto;
  }

  .milestone-toast{ left:16px; right:16px; transform:translateY(20px); width:auto; max-width:none; }
  .milestone-toast.show{ transform:translateY(0); }

  .bind-overlay .bind-book{ width:96px; height:120px; }
}

/* ============================================================
   追加実装（弾薬3・弾薬8-10統合）
   番台2ステップUI／タイピング演出／感情レタースペース／
   フォーカス暗転／光の粒子／写真添付／箱庭進化／空の背表紙／
   吸い込みアニメ／レコード枠／バックアップ／SEOフッター／PWA案内
   ============================================================ */

/* ---- 番台：心の質感4択（脱・言語化UI） ---- */
.texture-step{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin:10px 0 8px;
}
.texture-btn{
  font-family:var(--font-display);
  font-size:13.5px;
  line-height:1.7;
  text-align:left;
  padding:14px 16px;
  border:1px solid var(--gold);
  background:#fff9ec;
  color:var(--ink-soft);
  border-radius:6px;
  cursor:pointer;
  opacity:0;
  animation:chipFadeIn .5s ease forwards;
  transition:background .2s ease, color .2s ease, opacity .3s ease, transform .2s ease;
}
.texture-btn:hover{ background:var(--paper-2); transform:translateY(-1px); }
.texture-btn.selected{ background:var(--wine); color:#f6e8c9; border-color:var(--wine); }
.texture-btn.dimmed{ opacity:.45; }
body.no-motion .texture-btn{ opacity:1; animation:none; }
body.night .texture-btn{ background:#332E26; }
@media (max-width:480px){ .texture-step{ grid-template-columns:1fr; } }

/* 感情の棚（具体的な15のローマ字キーの棚）が、栞をめくるようにフェード出現する */
.chart-btn.fade-in{
  opacity:0;
  animation:chipFadeIn .45s ease forwards;
}
body.no-motion .chart-btn.fade-in{ opacity:1; animation:none; }
@keyframes chipFadeIn{
  from{ opacity:0; transform:translateY(8px); }
  to{ opacity:1; transform:none; }
}
.chart-btn.ghost{ border-style:dashed; background:transparent; }
.ai-referral-wrap{ margin:6px 2px 10px; padding:8px 10px; border-left:2px solid var(--gold); }
.ai-referral-lead{ font-size:12.5px; opacity:.75; margin:0 0 6px; line-height:1.5; }
.ai-referral-links{ display:flex; flex-wrap:wrap; gap:8px; }
a.ai-referral-link{ text-decoration:none; font-size:13px; padding:7px 14px; display:inline-block; }
.chart-btn.shelf-chip{ font-family:var(--font-display); }

/* ---- 感情レタースペース（重いトーンの時、静寂と余白が広がる） ---- */
.bubble.shopkeeper.tone-heavy{
  letter-spacing:.16em;
  line-height:2.5;
  padding:18px 20px;
}

/* ---- 対話への完全フォーカス（入力中は周囲が静かに暗転する引き算の演出） ---- */
.entrance, .page-nav, #particleLayer, .keeper-vignette, .keeper-bio,
.section-head, .section-sub, .freeform-hint{
  transition:opacity .6s ease;
}
body.focus-dim .entrance,
body.focus-dim .page-nav,
body.focus-dim #particleLayer,
body.focus-dim .keeper-vignette,
body.focus-dim .keeper-bio,
body.focus-dim .section-head,
body.focus-dim .section-sub,
body.focus-dim .freeform-hint{
  opacity:.14;
}
body.focus-dim .chat-window,
body.focus-dim .chat-input-row{ position:relative; z-index:2; }

/* ---- 空気中の光の粒子（パーティクル背景） ----
   ★決裁済み変更仕様v1.2 5-フェーズ2-5：無限演出の抑制のため非表示化。
   DOM（#particleLayer・span×8）・JS側の生成処理には触れず、CSSのみで停止する。 */
#particleLayer{
  display:none;
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:1;
  overflow:hidden;
}
#particleLayer span{
  position:absolute;
  bottom:-10vh;
  width:5px; height:5px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,236,180,.85), rgba(255,236,180,0));
  animation:particleFloat 16s linear infinite;
  opacity:.5;
}
#particleLayer span:nth-child(1){ left:8%;  animation-delay:0s;    animation-duration:18s; }
#particleLayer span:nth-child(2){ left:22%; animation-delay:-4s;   animation-duration:15s; width:4px; height:4px; }
#particleLayer span:nth-child(3){ left:35%; animation-delay:-9s;   animation-duration:20s; }
#particleLayer span:nth-child(4){ left:48%; animation-delay:-2s;   animation-duration:14s; width:6px; height:6px; }
#particleLayer span:nth-child(5){ left:61%; animation-delay:-12s;  animation-duration:19s; }
#particleLayer span:nth-child(6){ left:73%; animation-delay:-6s;   animation-duration:16s; width:4px; height:4px; }
#particleLayer span:nth-child(7){ left:85%; animation-delay:-14s;  animation-duration:21s; }
#particleLayer span:nth-child(8){ left:94%; animation-delay:-8s;   animation-duration:17s; width:6px; height:6px; }
@keyframes particleFloat{
  0%{ transform:translateY(0) scale(.7); opacity:0; }
  12%{ opacity:.55; }
  88%{ opacity:.4; }
  100%{ transform:translateY(-115vh) scale(1.15); opacity:0; }
}
body.no-motion #particleLayer{ display:none; }

/* ---- 写真の添付（カメラ風カスタムラベル＋ふわっとプレビュー） ---- */
.photo-row{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}
.hidden-file{ display:none; }
.photo-label{
  font-family:inherit;
  font-size:12.5px;
  color:var(--ink-soft);
  border:1px dashed var(--gold);
  background:#fff9ec;
  padding:8px 16px;
  border-radius:20px;
  cursor:pointer;
  transition:background .15s ease;
}
.photo-label:hover{ background:var(--paper-2); }
/* ★v1.3 RC2b 項目5：#photoInputは display:none だと一部のスマートフォン・iOS・
   アプリ内ブラウザでlabel[for]経由のクリックが開かないことがあるため、
   display:noneではなく「視覚的にのみ隠す」方式へ変更する。
   フォーカス・プログラムからのclick()は引き続き機能する。 */
.visually-hidden-file{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
  opacity:.01;
}
.photo-hint{ font-size:10.5px; color:var(--ink-soft); flex-basis:100%; line-height:1.6; }
.photo-preview{
  position:relative;
  display:inline-block;
  width:auto;
  max-width:180px;
  line-height:0;              /* ★v1.3 RC2：img下のインライン隙間を消す */
  border:4px solid #fffdf6;
  border-bottom-width:14px;  /* ポラロイド風の白い余白 */
  box-shadow:0 3px 10px rgba(60,40,20,.25);
  transform:rotate(-2deg);
  opacity:0;
}
.photo-preview.pop{ animation:photoPop .5s ease forwards; }
body.no-motion .photo-preview{ opacity:1; }
@keyframes photoPop{
  from{ opacity:0; transform:rotate(-6deg) scale(.85) translateY(8px); }
  to{ opacity:1; transform:rotate(-2deg) scale(1) translateY(0); }
}
/* ★v1.3 RC2：1:1固定＋object-fit:coverの中央トリミングをやめ、
   縦横比を保ったまま最大幅・最大高さの枠内に全体表示する（object-fit:contain）。
   img自体は自然な比率のまま縮小されるため、枠(.photo-preview)もdisplay:inline-blockで
   その実寸に追従し、縦写真は縦長・横写真は横長のまま表示される。 */
.photo-preview img{
  display:block;
  width:auto;
  height:auto;
  max-width:172px;
  max-height:172px;
  object-fit:contain;
}
.photo-remove{
  position:absolute;
  top:-12px; right:-12px;
  width:24px; height:24px;
  border-radius:50%;
  border:none;
  background:var(--wine);
  color:#f6e8c9;
  font-size:13px;
  line-height:1;
  cursor:pointer;
  box-shadow:0 2px 6px rgba(0,0,0,.3);
}

/* ---- 本の頁に挟まれた写真（モーダル）----
   ★v1.3 RC2：1:1固定＋object-fit:coverの中央トリミングをやめ、縦横比を保ったまま
   最大サイズの枠内に全体表示する（object-fit:contain）。width:fit-contentで実際の
   描画サイズに枠を追従させつつ、margin:0 autoでの中央寄せは維持する。 */
.modal-photo{
  display:block;
  width:fit-content;
  max-width:min(340px, 90%);
  margin:0 auto 16px;
  border:5px solid #fffdf6;
  border-bottom-width:18px;
  box-shadow:0 4px 14px rgba(60,40,20,.25);
  transform:rotate(-1.5deg);
  overflow:hidden;
  line-height:0;
}
.modal-photo img{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:60vh;
  object-fit:contain;
}

/* ---- 本棚の箱庭進化（冊数マイルストーンで装飾が豪華に育つ） ----
   ★決裁済み変更仕様v1.2 4-2：棚の成長装飾（旧🕯🪴🏮🐈‍⬛）は絵文字を撤去し、
   「灯りの濃淡」を模したCSSのみの表現へ置換。main.js側は#shelfOrnamentsのtextContentを
   空にし、tierクラス（.wood-shelf.tier1〜4）とtitle属性（達成名の文字ラベル）のみを付与する。 */
.wood-shelf{ transition:box-shadow .8s ease, border-color .8s ease, background .8s ease; }
.shelf-ornaments{
  position:absolute;
  top:6px; right:14px;
  width:74px;
  height:14px;
  pointer-events:none;
}
.wood-shelf.tier1 .shelf-ornaments{
  background:radial-gradient(circle at 88% 50%, rgba(255,214,140,.9) 0 3px, transparent 4px);
}
.wood-shelf.tier2 .shelf-ornaments{
  background:
    radial-gradient(circle at 88% 50%, rgba(255,214,140,.95) 0 3px, transparent 4px),
    radial-gradient(circle at 66% 50%, rgba(255,214,140,.7) 0 2.5px, transparent 3.5px);
}
.wood-shelf.tier3 .shelf-ornaments{
  background:
    radial-gradient(circle at 90% 50%, rgba(255,225,160,1) 0 3.5px, transparent 4.5px),
    radial-gradient(circle at 70% 50%, rgba(255,214,140,.85) 0 3px, transparent 4px),
    radial-gradient(circle at 50% 50%, rgba(255,200,120,.6) 0 2.5px, transparent 3.5px);
}
.wood-shelf.tier4 .shelf-ornaments{
  background:
    radial-gradient(circle at 92% 50%, rgba(255,230,170,1) 0 4px, transparent 5px),
    radial-gradient(circle at 74% 50%, rgba(255,220,150,.9) 0 3.5px, transparent 4.5px),
    radial-gradient(circle at 56% 50%, rgba(255,210,130,.75) 0 3px, transparent 4px),
    radial-gradient(circle at 38% 50%, rgba(255,195,110,.55) 0 2.5px, transparent 3.5px);
}
.wood-shelf.tier1{
  border:2px solid var(--gold-soft);
  box-shadow:0 0 0 1px rgba(201,165,92,.3), 0 6px 18px rgba(0,0,0,.25);
}
.wood-shelf.tier2{
  border:3px solid var(--gold);
  box-shadow:0 0 14px rgba(201,165,92,.35), 0 8px 22px rgba(0,0,0,.3);
  background:linear-gradient(180deg, #6B4A30, #3E2A1C);
}
.wood-shelf.tier3{
  border:3px double var(--gold);
  box-shadow:0 0 22px rgba(255,200,110,.4), 0 10px 26px rgba(0,0,0,.35);
  background:linear-gradient(180deg, #7A5638, #452E1E);
}
.wood-shelf.tier4{
  border:4px double var(--gold);
  box-shadow:0 0 32px rgba(255,210,120,.55), 0 12px 30px rgba(0,0,0,.4);
  background:linear-gradient(180deg, #8A6240, #4A3220);
}

/* ---- 右端に常に置かれる「まだ中身が書かれていない空の背表紙」 ---- */
.spine.empty-spine{
  background:transparent !important;
  border:1.5px dashed rgba(242,230,200,.55);
  color:rgba(242,230,200,.65);
  box-shadow:none;
  min-height:140px;
  font-size:12px;
}
.spine.empty-spine:hover{
  border-color:var(--gold-soft);
  color:#f2e6c8;
}

/* ---- 製本時の吸い込みアニメーション（本が本棚へスッと収まる） ---- */
.fly-book{
  position:fixed;
  left:50%; top:50%;
  width:46px; height:64px;
  margin:-32px 0 0 -23px;
  border-radius:2px 5px 5px 2px;
  box-shadow:inset -4px 0 0 rgba(0,0,0,.2), 0 8px 20px rgba(0,0,0,.35);
  z-index:85;
  pointer-events:none;
  transition:transform .85s cubic-bezier(.5,-0.1,.3,1), opacity .85s ease;
}
.fly-book.go{
  transform:translate(var(--suck-x, 0), var(--suck-y, 0)) scale(.12) rotate(360deg);
  opacity:0;
}

/* ---- 店主のレコード棚（時間帯で変わるアフィリエイト・レコード枠） ---- */
.record-corner{
  margin-top:18px;
  display:flex;
  gap:16px;
  align-items:center;
  background:rgba(255,255,255,.35);
  border:1px solid var(--paper-shadow);
  border-radius:4px;
  padding:16px 18px;
}
body.night .record-corner{ background:#332E26; }
.record-disc{
  width:64px; height:64px;
  flex-shrink:0;
  border-radius:50%;
  background:radial-gradient(circle at 50% 50%, var(--gold) 0 9px, #1c1610 10px 21px, #2b2118 22px 23px, #1c1610 24px 100%);
  box-shadow:0 3px 8px rgba(0,0,0,.35);
}
/* ★決裁済み変更仕様v1.2 5-フェーズ2-5：レコードの無限回転を停止（静止した円盤の意匠として残す）。 */
.record-label{
  font-family:var(--font-display);
  font-size:12.5px;
  color:var(--wine);
  margin:0 0 4px;
}
.record-pr{
  font-size:9.5px;
  color:var(--ink-soft);
  font-family:var(--font-body);
  letter-spacing:0;
}
.record-title{
  font-family:var(--font-display);
  font-size:15px;
  margin:0 0 4px;
  color:var(--ink);
}
.record-line{ font-size:11.5px; color:var(--ink-soft); margin:0 0 8px; }
.record-links{ display:flex; gap:12px; flex-wrap:wrap; margin:0; }
.record-links a{
  font-size:11px;
  color:var(--wine);
  text-decoration:none;
  border-bottom:1px dashed var(--wine);
}
@media (max-width:480px){
  .record-corner{ flex-direction:column; text-align:center; }
  .record-links{ justify-content:center; }
}

/* ---- 本棚の鍵（手動バックアップ） ---- */
.backup-link{ color:var(--wine); font-weight:600; }
.backup-hint{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  margin:14px 2px 0;
}
.backup-hint .share-btn{
  font-size:12px;
  padding:7px 14px;
}

/* ---- フッター：SEO世界観テキスト・アフィリエイト規約 ---- */
.affiliate-note{
  font-size:10.5px;
  color:var(--ink-soft);
  margin-top:16px;
}

/* ============================================================
   item 5: 寄り道セクション（棚ページ。DETOUR_POOLの low/medium/high）
   ============================================================ */
.detour-section{
  margin-top:28px;
  padding-top:20px;
  border-top:1px dashed var(--paper-shadow);
}
.detour-section:empty{ display:none; }
.detour-heading{
  font-family:var(--font-display);
  font-size:14.5px;
  color:var(--wine);
  margin:0 0 4px;
}
.detour-pr{
  font-size:10px;
  color:var(--ink-soft);
  font-family:var(--font-body);
  margin-left:6px;
  opacity:.8;
}
.detour-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:14px;
  margin-top:14px;
}
.detour-card{
  background:#fff9ec;
  border:1px solid var(--paper-shadow);
  border-radius:6px;
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.detour-tier-low{ border-left:4px solid var(--sage); }
.detour-tier-medium{ border-left:4px solid var(--gold); }
.detour-tier-high{ border-left:4px solid var(--wine); }
.detour-tier-badge{
  display:inline-block;
  align-self:flex-start;
  font-size:10px;
  letter-spacing:.05em;
  padding:3px 10px;
  border-radius:12px;
  background:var(--ink);
  color:#fdf6e6;
}
.detour-tier-low .detour-tier-badge{ background:var(--sage); }
.detour-tier-medium .detour-tier-badge{ background:#8A5A12; }
.detour-tier-high .detour-tier-badge{ background:var(--wine); }
.detour-name{
  font-family:var(--font-display);
  font-size:14px;
  color:var(--ink);
  margin:0;
  font-weight:700;
}
.detour-desc{
  font-size:12px;
  color:var(--ink-soft);
  line-height:1.7;
  margin:0;
  flex:1;
}
.detour-link{
  align-self:flex-start;
  font-size:12px;
  font-weight:700;
  color:#8A5A12;
  text-decoration:underline;
  margin-top:4px;
}
.detour-link:hover{ opacity:.8; }
body.night .detour-card{ background:#332E26; }
body.night .detour-link{ color:#E8C97A; }
.detour-loading{
  font-size:12px;
  color:var(--ink-soft);
  opacity:.75;
  margin-top:8px;
}
.detour-tier-live{ border-left:4px solid #4FA3D1; }
.detour-live .detour-tier-badge{ background:#2F6B90; }

/* ---------- 棚の本・音楽おすすめに添える、外部APIから取得したライブな新刊・新譜 ---------- */
.live-pick-wrap:empty{ display:none; }
.live-pick-heading{
  font-family:var(--font-display);
  font-size:13px;
  color:#2F6B90;
  margin:18px 0 8px;
}
.live-pick-row{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:12px;
}
.live-pick-card{
  background:#f4f9fc;
  border:1px solid #cfe2ec;
  border-radius:6px;
  padding:12px 14px;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.live-pick-badge{
  display:inline-block;
  align-self:flex-start;
  font-size:10px;
  letter-spacing:.03em;
  padding:2px 9px;
  border-radius:12px;
  background:#2F6B90;
  color:#F0F8FC;
}
.live-pick-name{
  font-family:var(--font-display);
  font-size:13.5px;
  color:var(--ink);
  margin:2px 0 0;
  font-weight:700;
}
.live-pick-desc{
  font-size:11.5px;
  color:var(--ink-soft);
  line-height:1.6;
  margin:0;
}
.live-pick-link{
  align-self:flex-start;
  font-size:11.5px;
  font-weight:700;
  color:#2F6B90;
  text-decoration:underline;
  margin-top:2px;
}
.live-pick-link:hover{ opacity:.8; }
body.night .live-pick-card{ background:#26313A; border-color:#3A4A56; }
body.night .live-pick-link{ color:#8FC6E8; }

/* ============================================================
   item 6: 手放した気持ちの履歴モーダル（オーバーホール版）
   main.jsのbuildPurifyLogOverlay()が動的に生成する要素に対応するスタイル
   ============================================================ */
.purify-log-overlay{
  position:fixed;
  inset:0;
  background:rgba(20,14,8,0.6);
  z-index:76;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.purify-log-overlay.hidden{ display:none; }
.purify-log-card{
  background:#fdf6e6;
  color:var(--ink);
  max-width:560px;
  width:100%;
  max-height:80vh;
  overflow-y:auto;
  border-radius:6px;
  padding:28px;
  position:relative;
  box-shadow:0 20px 60px rgba(0,0,0,0.4);
}
body.night .purify-log-card{ background:#2E2922; }
.purify-log-close{
  position:absolute;
  top:14px; right:16px;
  background:none;
  border:none;
  font-size:22px;
  line-height:1;
  cursor:pointer;
  color:var(--ink-soft);
  min-width:44px;
  min-height:44px;
}
.purify-log-kicker{
  font-family:var(--font-display);
  font-size:15px;
  color:var(--wine);
  margin:0 0 16px;
  padding-right:36px;
}
.purify-log-list{
  display:flex;
  flex-direction:column;
  gap:14px;
  max-height:50vh;
  overflow-y:auto;
}
.purify-log-entry{
  background:rgba(255,255,255,0.5);
  border:1px solid var(--paper-shadow);
  border-radius:4px;
  padding:14px 16px;
}
body.night .purify-log-entry{ background:#332E26; }
.purify-log-meta{
  font-size:11px;
  color:var(--wine);
  font-weight:700;
  margin:0 0 8px;
}
/* ★決裁済み変更仕様v1.2 4-2：気になるリストの種別（曲／本）は絵文字ではなく単色の文字タグで示す */
.meta-type-tag{
  display:inline-block;
  font-size:9.5px;
  font-weight:700;
  line-height:1;
  padding:3px 5px;
  border:1px solid var(--wine);
  border-radius:2px;
  margin-right:2px;
  letter-spacing:.05em;
}
.meta-type-tag.is-music{ color:var(--sage); border-color:var(--sage); }
.meta-type-tag.is-book{ color:var(--wine); border-color:var(--wine); }
.purify-log-text{
  font-size:13.5px;
  /* item 3/6: 過去ログ本文は必ず高コントラストな地色文字で表示する */
  color:var(--ink);
  white-space:pre-wrap;
  line-height:1.8;
  margin:0;
}
.purify-log-empty{
  font-size:13px;
  color:var(--ink-soft);
  text-align:center;
  padding:20px 0;
}

/* ---- 「気になる」ボタン／気になるリスト ---- */
.fav-btn{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-family:var(--font-display);
  font-size:12px;
  color:var(--wine);
  background:rgba(255,255,255,0.6);
  border:1px solid var(--paper-shadow);
  border-radius:14px;
  padding:5px 12px;
  min-height:32px;
  cursor:pointer;
  margin-top:6px;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.fav-btn:hover{ background:rgba(255,255,255,0.9); }
.fav-btn.is-fav{
  background:var(--wine);
  color:#fff;
  border-color:var(--wine);
}
body.night .fav-btn{
  color:#E8C97A;
  background:rgba(0,0,0,0.2);
  border-color:#3A342A;
}
body.night .fav-btn.is-fav{
  background:#E8C97A;
  color:#2E241A;
  border-color:#E8C97A;
}
.purify-log-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:20px;
  padding-top:16px;
  border-top:1px dashed var(--paper-shadow);
}
.purify-log-hide,
.purify-log-close-btn{
  font-family:var(--font-display);
  font-size:13px;
  padding:10px 20px;
  min-height:44px;
  border-radius:20px;
  cursor:pointer;
}
.purify-log-hide{
  background:none;
  border:1px solid var(--ink-soft);
  color:var(--ink-soft);
}
.purify-log-close-btn{
  background:var(--wine);
  border:1px solid var(--wine);
  color:#f6e8c9;
}
.purify-log-hide:hover{ background:rgba(0,0,0,0.05); }
.purify-log-close-btn:hover{ opacity:.9; }

/* ============================================================
   item 8: トップへ戻るボタン
   ============================================================ */
.back-to-top{
  position:fixed;
  right:20px;
  bottom:24px;
  width:48px;
  height:48px;
  border-radius:50%;
  background:var(--wine);
  color:#f6e8c9;
  border:none;
  font-size:20px;
  line-height:1;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,0.3);
  z-index:60;
  transition:opacity .2s ease, transform .2s ease, bottom .2s ease;
}
/* ★追加：「今の気持ちを綴る」フローティングアクションボタン。右下の「↑」ボタンと
   衝突しないよう左下に配置。編纂机までワンタップで移動できるシグニファイア。 */
.write-fab{
  position:fixed;
  left:20px;
  bottom:24px;
  width:56px;
  height:56px;
  border-radius:50%;
  background:var(--wine);
  color:#f6e8c9;
  border:none;
  padding:0;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(0,0,0,0.3);
  z-index:60;
  transition:transform .15s ease, box-shadow .15s ease;
}
/* ★Hotfix4追加：「書く」の文字ラベルに代わり、Hero下部の蔵書印（.hero-seal）と同じ正式ロゴを
   円いっぱいに表示する。ロゴ画像自体が独自の暗色背景・金の輪郭を持つため、ボタンの
   background（var(--wine)/夜のvar(--gold-soft)）は画像の縁がわずかに透けた場合の保険として残す。 */
.write-fab-icon{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
}
.write-fab:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,0.35); }
.write-fab:active{ transform:translateY(0); }
body.night .write-fab{ background:var(--gold-soft); color:#2E241A; }
@media (max-width:600px){
  .write-fab{ left:14px; bottom:18px; width:50px; height:50px; }
}
.back-to-top.hidden{
  opacity:0;
  pointer-events:none;
  transform:translateY(10px);
}
.back-to-top:hover{ transform:translateY(-2px); }
.back-to-top.near-footer{ bottom:96px; }
@media (max-width:480px){
  .back-to-top{ right:14px; bottom:18px; width:44px; height:44px; font-size:18px; }
  .back-to-top.near-footer{ bottom:88px; }
}

/* ============================================================
   推薦状（invitation）に「棚を見てみる」ボタンを追加（item 5）
   ============================================================ */
.inv-goshelf{
  font-size:12px;
  background:var(--wine);
  color:#f6e8c9;
  border:1px solid var(--wine);
  padding:6px 16px;
  border-radius:20px;
  cursor:pointer;
  margin-right:8px;
}
.inv-goshelf:hover{ opacity:.9; }

/* ---- PWA：ホーム画面へのピン留め案内ポップアップ ---- */
.pwa-popup{
  position:fixed;
  left:50%; bottom:24px;
  transform:translateX(-50%);
  background:#fdf6e6;
  border:1px solid var(--gold);
  border-radius:8px;
  padding:18px 20px;
  box-shadow:0 12px 36px rgba(0,0,0,.3);
  z-index:92;
  max-width:min(92vw, 380px);
  display:flex;
  flex-direction:column;
  gap:0;
}
body.night .pwa-popup{ background:#2E2922; }
.pwa-title{
  font-family:var(--font-display);
  font-size:13.5px;
  color:var(--wine);
  margin:0 0 10px;
}
.pwa-steps{ font-size:12px; color:var(--ink-soft); margin:0 0 8px; line-height:1.9; }
.pwa-note{ font-size:11px; color:var(--ink-soft); margin:0 0 12px; }


/* ============ 最終仕上げの追加スタイル ============ */

/* 棚に並ぶ言葉（名言）を目立たせる：店主が案内する主役コンテンツ */
.quote-card{
  font-size:19px;
  line-height:2.1;
  background:rgba(255,251,240,0.8);
  border-left:3px solid var(--gold);
  padding:16px 18px;
  border-radius:0 6px 6px 0;
  box-shadow:0 2px 10px rgba(0,0,0,0.06);
  margin:4px 0 8px;
}
.quote-source{
  font-size:12.5px;
  margin:6px 0 22px;
}

/* 寄り道（月替わり特集）の注記 */
.detour-note{
  font-size:11px;
  color:var(--ink-soft);
  margin:10px 0 0;
}

/* 編纂机のリード（ここまでを踏まえて） */
.desk-lead{
  font-family:var(--font-display);
  font-size:15px;
  color:var(--wine);
  background:rgba(255,251,240,0.7);
  border-left:3px solid var(--wine);
  padding:10px 14px;
  border-radius:0 6px 6px 0;
  margin:0 0 10px;
}
.desk-lead.hidden{ display:none; }

/* ★2026-07-18追加：編纂机の「言葉にするための助け舟」（旧チャットの代替）。 */
.writing-boat{
  background:rgba(168,130,60,0.08);
  border:1px solid var(--paper-shadow);
  border-radius:6px;
  padding:14px 18px;
  margin:0 0 20px;
}
.writing-boat-heading{
  font-family:var(--font-display);
  font-size:13.5px;
  color:var(--ink);
  margin:0 0 8px;
}
.writing-boat-list{
  margin:0 0 8px;
  padding-left:1.3em;
  list-style:'— ';
}
.writing-boat-list li{
  font-size:13px;
  line-height:1.8;
  color:var(--ink-soft);
  margin:0 0 4px;
}
.writing-boat-note{
  font-size:11px;
  color:var(--ink-soft);
  opacity:.75;
  margin:0;
}

/* 背表紙タイトルの提案チップ */
.title-suggest{ margin-top:10px; }
.title-suggest:empty{ display:none; }
.title-suggest-label{
  display:block;
  font-size:11px;
  color:var(--ink-soft);
  margin-bottom:6px;
}
.title-chip{
  font-family:var(--font-display);
  font-size:12.5px;
  color:var(--ink);
  background:rgba(255,251,240,0.9);
  border:1px solid var(--paper-shadow);
  border-radius:20px;
  padding:6px 12px;
  margin:0 6px 6px 0;
  cursor:pointer;
  transition:transform .12s ease, background .12s ease;
}
.title-chip:hover{ transform:translateY(-2px); background:#fff; }

/* 感情の地図：期間タブ・グリフ */
.trend-period-tabs{ display:flex; gap:6px; margin:10px 0 12px; }
.trend-period-btn{
  font-size:11.5px;
  padding:5px 14px;
  border-radius:20px;
  border:1px solid var(--paper-shadow);
  background:transparent;
  color:var(--ink-soft);
  cursor:pointer;
}
.trend-period-btn.active{
  background:var(--wine);
  border-color:var(--wine);
  color:#FFF6E8;
}
/* ★決裁済み変更仕様v1.2 4-2：感情の地図は絵文字ではなく棚色の点で表す */
.trend-glyph{
  display:inline-block;
  width:8px; height:8px;
  border-radius:50%;
  margin-right:6px;
  vertical-align:middle;
}
.trend-empty{ font-size:12px; color:var(--ink-soft); padding:8px 0; }

/* 来店カード */
.profile-overlay{
  position:fixed; inset:0; z-index:60;
  background:rgba(30,20,12,0.55);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.profile-overlay.hidden{ display:none; }
.profile-card{
  position:relative;
  background:#FFFBF0;
  border:1px solid var(--paper-shadow);
  border-radius:8px;
  box-shadow:0 18px 50px rgba(0,0,0,0.35);
  max-width:440px; width:100%;
  max-height:86vh; overflow-y:auto;
  padding:26px 24px 24px;
}
.profile-close{
  position:absolute; top:10px; right:12px;
  background:none; border:none; font-size:20px;
  color:var(--ink-soft); cursor:pointer;
}
.profile-kicker{
  font-family:var(--font-display);
  font-size:17px; color:var(--wine);
  margin:0 0 10px;
}
.profile-lead{ font-size:13.5px; line-height:1.9; margin:0 0 8px; color:var(--ink); }
.profile-note{ font-size:11px; color:var(--ink-soft); margin:0 0 16px; line-height:1.7; }
.profile-label{
  display:block; font-size:12px; color:var(--ink-soft);
  margin:12px 0 6px;
}
#profileName{
  width:100%; box-sizing:border-box;
  font-size:15px; padding:10px 12px;
  border:1px solid var(--paper-shadow); border-radius:6px;
  background:#fff; color:var(--ink);
  font-family:inherit;
}
.profile-personas{ display:flex; flex-direction:column; gap:10px; margin-bottom:6px; }
.persona-group{ display:flex; flex-direction:column; gap:6px; }
.persona-group-label{
  font-size:11px;
  color:var(--ink-soft);
  opacity:.65;
  letter-spacing:.04em;
}
.persona-group-row{ display:flex; flex-wrap:wrap; gap:8px; }
.persona-group-row-other{ justify-content:flex-start; }
.persona-chip{
  font-size:12.5px; padding:8px 13px;
  border-radius:20px;
  border:1px solid var(--paper-shadow);
  background:#fff; color:var(--ink);
  cursor:pointer;
  transition:all .12s ease;
}
.persona-chip.selected{
  background:var(--wine); border-color:var(--wine); color:#FFF6E8;
}
.profile-keeper-style{ display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 4px; }
.keeper-style-chip{
  font-size:13px; padding:9px 15px;
  line-height:1.5;
  border-radius:14px;
  border:1px solid var(--paper-shadow);
  background:#fff; color:var(--ink);
  cursor:pointer;
  text-align:center;
  transition:all .12s ease;
}
.keeper-style-chip .keeper-style-sub{
  display:block;
  font-size:10.5px;
  opacity:.7;
  letter-spacing:.03em;
}
.keeper-style-chip.selected{
  background:var(--wine); border-color:var(--wine); color:#FFF6E8;
}
body.night .keeper-style-chip{ background:#2E2922; color:#EFE3C8; border-color:#3A342A; }
body.night .keeper-style-chip.selected{ background:#E8C97A; border-color:#E8C97A; color:#2E241A; }
.profile-save{
  display:block; width:100%;
  margin-top:18px;
  font-family:var(--font-display);
  font-size:15px;
  padding:12px;
  background:var(--wine); color:#FFF6E8;
  border:none; border-radius:6px;
  cursor:pointer;
}
.profile-save:hover{ opacity:.92; }
body.night .profile-card{ background:#2A2119; }
body.night .profile-lead{ color:#E8DcC8; }
body.night #profileName, body.night .persona-chip{ background:#3A2E22; color:#E8DCC8; }

/* プレイリストの店主コメント */
.playlist-track-comment{
  display:block;
  font-size:11px;
  color:var(--ink-soft);
  line-height:1.7;
  margin:2px 0 4px;
}


/* ============ Priority 3 追加スタイル ============ */

/* item 1: 夜の書店モードのコントラスト改善 — 明るい下地のカードが夜の文字色と衝突していた問題を解消 */
body.night .quote-card{
  background:#332E26;
  box-shadow:0 2px 10px rgba(0,0,0,0.3);
}
body.night .desk-lead{
  background:#332E26;
}
body.night .swipe-hint,
body.night .detour-note,
body.night .quote-source,
body.night .definition{
  color:#BFB194;
}
body.night footer.shop-footer,
body.night .legal-row a{
  color:#BFB194;
}

/* item 7: 「あなたの物語・みんなの物語」アコーディオン */
.episodes-heading{
  font-family:var(--font-display);
  font-size:14.5px;
  color:var(--wine);
  margin:18px 0 8px;
  letter-spacing:.04em;
}
/* ★決裁済み変更仕様v1.2 3-2：「店内の蔵書」が架空の物語であることを常時示す注記。小さくても隠さない */
.episodes-note{
  font-size:11px;
  color:var(--ink-soft);
  line-height:1.6;
  margin:0 0 12px;
}
.episodes-more{ display:contents; }
.episodes-toggle{
  font-size:12.5px;
  color:var(--ink-soft);
  background:none;
  border:1px dashed var(--paper-shadow);
  border-radius:20px;
  padding:7px 16px;
  cursor:pointer;
  align-self:flex-start;
}
.episodes-toggle:hover{
  color:var(--wine);
  border-color:var(--wine);
}
body.night .episodes-toggle{ color:#BFB194; }

/* item 10: 各セクション下部の「番台へ戻る」ボタン */
.section-return{
  text-align:center;
  margin-top:28px;
}
.back-to-bandai{
  font-family:var(--font-body);
  font-size:13.5px;
  color:var(--wine);
  background:transparent;
  border:1px solid var(--wine);
  border-radius:20px;
  padding:9px 24px;
  cursor:pointer;
  letter-spacing:.06em;
}
.back-to-bandai:hover{
  background:rgba(110,42,52,0.08);
}

/* ==========================================================================
 * ★決裁済み変更仕様v1.2 5-フェーズ2-4：カード感の抑制
 * --------------------------------------------------------------------------
 * アプリ的な角丸チップ・カードの丸み／影を弱め、紙片・棚札・木口に近い直線的な
 * 意匠へ寄せる上書き。既存セレクタ・DOM構造・JSフックには一切触れず、
 * border-radius / box-shadow のみをこのブロックで再定義する（後勝ちの意図的な上書き）。
 * 対象外：.page-tab（本のインデックス見出しを模した意匠として維持）、
 *         .curate-box / .invitation（既に非対称な角丸・便箋的な意匠のため対象外）。
 * ========================================================================== */
.trust-badge,
.intro-step,
.recommend-chip,
.recommend-hook,
.recommend-shuffle,
.episode-shuffle,
.detour-card,
.detour-tier-badge,
.live-pick-card,
.live-pick-badge,
.purify-log-entry,
.shelf-tab,
.shelf-month-tab,
.episode-card{
  border-radius:2px;
}
.recommend-chip,
.detour-card,
.live-pick-card{
  box-shadow:none;
}

/* ============================================================================
 * ★v1.3 Phase B／C 追加分（体験・画面改修仕様書 4章・8章）
 * 既存セレクタの構造・DOM・JSフックは変更せず、新規クラス／新規セレクタの追記と、
 * 一部プロパティ（border-radius・box-shadow・background・color・font-family等）の
 * 上書きのみで構成する。.shop・.entrance・新設ラッパー（.hero／.doma／.shop-guide／
 * .shelf-admin）へのtransform/filter/backdrop-filter/perspective/contain:paintは
 * 一切使用しない。無限アニメーションの新設もしない。
 * ============================================================================ */

/* ---- 4-1 色：Hero専用の「外気」パレット（新規追加のみ・既存カスタムプロパティは変更しない） ---- */
:root{
  --street-blue-1:#0B121C;
  --street-blue-2:#101824;
  --lamp-glow:#E8A55C;
}

/* ---- 第一場面 Hero：外は夜青、CTA直近だけ暖色の気配 ---- */
.entrance.hero{
  background:linear-gradient(180deg, var(--street-blue-1) 0%, var(--street-blue-2) 68%, var(--wood) 100%);
  border-bottom-color:rgba(232,165,92,0.25);
}

/* ============================================================
   ★WeatherPrototype1：時間帯による「店外の空」の色
   ------------------------------------------------------------
   端末の時計だけで決まる data-daypart（main.js の applyDaypartSky）に応じて、
   表紙の空の色（--street-blue-1 / --street-blue-2）だけを差し替える。
   ・位置情報・天気API・外部通信・保存は一切なし
   ・新しいDOM要素・画像・アニメーションを追加しない（背景色の階調のみ）
   ・グラデーションの3段目（--wood＝店内へ続く木の色）は全時間帯で共通に保ち、
     「外が青く、内が暖かい」という対比を崩さない
   ・昼でも一般的な天気アプリのような明るい空にはせず、
     「静かな書店へ続く外気」として彩度・明度を抑える
   ・.entrance.hero の中だけで閉じるため、店内（編纂机・棚・本棚・モーダル）へは波及しない

   差し替える変数は次の2系統：
   ・--street-blue-* … Hero写真が読み込めなかった場合に見える背景グラデーション
   ・--sky-veil-*    … Hero写真の上に敷くベールの色相（通常はこちらが見えている）
     ベールのalpha（濃度）は時間帯によらず固定のため、文字の可読性は従来と同一。
   ============================================================ */

/* 朝：淡い青灰色。夜が明けきらない、少しだけ白んだ外気 */
.entrance.hero[data-daypart="morning"]{
  --street-blue-1:#3B4A5C;
  --street-blue-2:#465768;
  --sky-veil-top:96,116,138;
  --sky-veil-mid:88,106,126;
  --sky-veil-bottom:68,84,100;
}
/* 昼：落ち着いた青。明るくはするが、白く飛ばさない */
.entrance.hero[data-daypart="day"]{
  --street-blue-1:#3F5872;
  --street-blue-2:#4A657F;
  --sky-veil-top:104,134,166;
  --sky-veil-mid:94,122,152;
  --sky-veil-bottom:70,94,120;
}
/* 夕方：青紫へ。わずかに暖色を含ませ、店の灯りへ繋ぐ */
.entrance.hero[data-daypart="evening"]{
  --street-blue-1:#3A3050;
  --street-blue-2:#4A3A4E;
  --sky-veil-top:74,62,104;
  --sky-veil-mid:88,66,92;
  --sky-veil-bottom:76,54,64;
}
/* 夜：深い青（ブランドの中心。既定値と同一＝従来の見た目を維持） */
.entrance.hero[data-daypart="night"]{
  --street-blue-1:#0B121C;
  --street-blue-2:#101824;
  --sky-veil-top:11,18,28;
  --sky-veil-mid:11,18,28;
  --sky-veil-bottom:16,24,36;
}
/* 深夜：より暗い紺。いちばん静かな時間 */
.entrance.hero[data-daypart="midnight"]{
  --street-blue-1:#070E18;
  --street-blue-2:#0A121C;
  --sky-veil-top:7,14,24;
  --sky-veil-mid:7,14,24;
  --sky-veil-bottom:10,18,28;
}
.entrance.hero::before{
  background:repeating-linear-gradient(90deg, var(--lamp-glow) 0 22px, transparent 22px 30px);
  opacity:.35;
}
.entrance.hero::after{
  content:"";
  position:absolute;
  left:50%; bottom:-8%;
  transform:translateX(-50%);
  width:min(70%,520px);
  height:200px;
  background:radial-gradient(ellipse at center, rgba(232,165,92,0.24), transparent 72%);
  pointer-events:none;
  z-index:-1;
}
.entrance.hero .eyebrow{ color:var(--lamp-glow); opacity:.85; }
.entrance.hero .enter-btn{
  background:linear-gradient(180deg, var(--lamp-glow), #C9803D);
  color:#241608;
  box-shadow:0 3px 0 #7A4A1E, 0 10px 26px rgba(232,165,92,0.28);
}
.entrance.hero .enter-btn:hover{ transform:translateY(-2px); }
.entrance.hero .trust-row .trust-badge{
  border-color:rgba(239,230,211,0.3);
  background:rgba(16,24,36,0.35);
  color:var(--ink);
}

/* ---- 第二場面 土間：Heroの夜青から店内の暖色へ、一呼吸で色温度を移す ---- */
.doma{
  height:30px;
  background:linear-gradient(180deg, var(--wood) 0%, var(--paper-2) 100%);
  border-bottom:1px solid var(--paper-shadow);
}
@media (max-width:600px){ .doma{ height:20px; } }

/* ---- 店内案内（旧intro-explainer + pref-row の後退先）：フッター手前の控えめな領域 ---- */
.shop-guide{
  max-width:920px;
  margin:0 auto;
  padding:8px 24px 4px;
  border-top:1px solid var(--paper-shadow);
}
.shop-guide-heading{
  font-family:var(--font-display);
  font-size:14px;
  color:var(--ink-soft);
  letter-spacing:.14em;
  text-align:center;
  margin:22px 0 18px;
  opacity:.85;
}
.shop-guide .intro-explainer.in-header{
  padding:0 0 18px;
  opacity:.92;
}
.shop-guide .intro-kicker{ font-size:12px; }
.shop-guide .intro-steps{ gap:10px; }
.shop-guide .intro-step{
  padding:12px 8px;
  background:transparent;
  box-shadow:none;
}
.shop-guide .pref-row{ margin-top:6px; }

/* ---- 本棚の管理（details.shelf-admin）：desk-extraと同系の控えめな折りたたみ意匠 ---- */
.shelf-admin{
  margin-top:18px;
  border-top:1px dashed var(--paper-shadow);
  padding-top:14px;
}
.shelf-admin summary{
  display:inline-block;
  font-family:var(--font-display);
  font-size:13.5px;
  font-weight:600;
  color:var(--wine);
  background:rgba(255,251,240,0.06);
  border:1px dashed var(--gold);
  border-radius:10px;
  padding:9px 18px;
  cursor:pointer;
  list-style:none;
}
.shelf-admin summary::-webkit-details-marker{ display:none; }
.shelf-admin summary::before{ content:"▸ "; color:var(--gold); }
.shelf-admin[open] summary::before{ content:"▾ "; }
.shelf-admin .shelf-controls{ margin-top:14px; }
.shelf-admin .backup-hint{ margin-top:10px; }

/* ---- ナビ：アプリのタブバーではなく棚の見出し札として、主張を弱める（軽微な上書きのみ） ---- */
.page-tab.active{
  box-shadow:0 2px 4px rgba(0,0,0,0.12);
}

/* ---- 番台：チャットUIから「帳場に置かれた紙」へ ---- */
.chat-window{
  background:linear-gradient(180deg, rgba(0,0,0,0.06), transparent 40%);
  border:1px solid var(--paper-shadow);
  border-radius:2px;
  padding-left:10px;
  padding-right:10px;
}
.bubble{
  border-radius:2px;
  box-shadow:none;
  border:1px solid var(--paper-shadow);
}
.bubble.shopkeeper{
  border-top-left-radius:2px;
  border-left:3px solid var(--gold);
}
.bubble.you{
  border-top-right-radius:2px;
  border-right:3px solid var(--paper);
}

/* ---- v1.3 Phase C：吹き出しの短いフェード（タイピングアニメーション廃止の代替演出） ---- */
@keyframes bubbleFadeIn{
  from{ opacity:0; transform:translateY(4px); }
  to{ opacity:1; transform:translateY(0); }
}
body:not(.no-motion) .bubble{
  animation:bubbleFadeIn .32s ease;
}

/* ---- 編纂机：#storyInputを原稿用紙・便箋に近づける ---- */
#storyInput{
  font-family:var(--font-display);
  line-height:2;
  background:
    repeating-linear-gradient(180deg, transparent 0, transparent 1.95em, rgba(74,61,44,0.12) 1.95em, rgba(74,61,44,0.12) calc(1.95em + 1px)),
    #fff9ec;
}
body.night #storyInput{
  background:
    repeating-linear-gradient(180deg, transparent 0, transparent 1.95em, rgba(239,230,211,0.08) 1.95em, rgba(239,230,211,0.08) calc(1.95em + 1px)),
    #262219;
}

/* ---- 本棚：来店体験の終着点。最も明るい部屋にする（淡い灯りの気配のみ・アニメーションなし） ---- */
#bookshelf{
  background:radial-gradient(ellipse at top, rgba(232,165,92,0.10), transparent 62%);
}

/* ---- 4-2 書体：主要ボタン・見出し・背表紙は明朝（既存の.enter-btn/.send-btn/.bind-btn/.share-btn/
   .page-tab/.spine等は既にvar(--font-display)。ここでは原稿用紙化した本文欄のみ追加指定） ---- */

/* ============================================================================
 * v1.3 Phase B-2 店内装丁
 * ----------------------------------------------------------------------------
 * 目的：Phase A〜Cで整えた導線・夜配色・保存・計測を変更せず、店内画面に残る
 * 「Webアプリ／カード一覧／チャットUI」の見え方だけを、棚・紙・木・帳場の意匠へ
 * 置き換える。既存セレクタ・DOM・JSフックには一切触れず、後勝ちのプロパティ
 * 上書き（border-radius・box-shadow・background・color・font-family・padding等）
 * のみで構成する。.shop・.entrance・section・新設ラッパーへの
 * transform/filter/backdrop-filter/perspective/contain:paintは追加しない。
 * 無限アニメーションの新設もしない。style.css本体の削除・整理は行わない。
 * ============================================================================ */

/* ----------------------------------------------------------------------------
 * 4-1 上部ナビ：タブバーから「棚の見出し札」へ
 * ---------------------------------------------------------------------------- */
.page-nav{
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  background:linear-gradient(180deg, var(--wood) 0%, var(--wood-2) 100%);
  border-top:1px solid rgba(232,165,92,0.14);
  border-bottom:1px solid rgba(0,0,0,0.4);
  box-shadow:0 3px 10px rgba(0,0,0,0.28);
  gap:0;
  padding:0 6px;
}
body.night .page-nav{
  background:linear-gradient(180deg, var(--wood) 0%, var(--wood-2) 100%);
}
.page-tab{
  border:none;
  border-right:1px solid rgba(232,165,92,0.10);
  border-radius:0;
  background:transparent;
  color:var(--ink-soft);
  padding:12px 16px 11px;
  top:0;
  transition:color .15s ease, background .15s ease, box-shadow .15s ease;
}
.page-tab:last-child{ border-right:none; }
.page-tab:hover{
  top:0;
  color:var(--ink);
  background:rgba(255,255,255,0.04);
}
.page-tab.active{
  background:rgba(232,165,92,0.09);
  color:var(--ink);
  border-color:transparent;
  top:0;
  font-weight:700;
  box-shadow:inset 0 -2px 0 var(--gold), inset 0 1px 0 rgba(255,255,255,0.04);
}
body.night .page-tab{ background:transparent; }
body.night .page-tab.active{ background:rgba(232,165,92,0.12); }
@media (max-width:480px){
  .page-nav{ padding:0 2px; }
  .page-tab{ padding:10px 4px 9px; letter-spacing:.02em; border-right-color:rgba(232,165,92,0.08); }
}

/* ----------------------------------------------------------------------------
 * 4-2 番台：大きなチャットカードから「帳場と紙」へ
 * ---------------------------------------------------------------------------- */
.counter-wrap{
  background:transparent;
  border:none;
  border-top:1px solid var(--paper-shadow);
  border-bottom:1px solid var(--paper-shadow);
  border-radius:0;
  padding:20px 4px;
}
.chat-window{
  background:none;
  border:none;
  border-top:1px solid rgba(232,165,92,0.16);
  padding:14px 2px 10px;
  border-radius:0;
}
.bubble{
  max-width:82%;
  padding:11px 14px;
  border-radius:1px;
  box-shadow:none;
  border:none;
  background:transparent;
  font-size:14.5px;
}
.bubble.shopkeeper{
  align-self:flex-start;
  width:min(85%,560px);
  max-width:85%;
  background:linear-gradient(180deg, rgba(232,165,92,0.05), transparent 60%), var(--paper-2);
  border:1px solid var(--paper-shadow);
  border-left:3px solid var(--gold);
  border-radius:0 1px 1px 0;
}
.bubble.shopkeeper .name{
  display:inline-block;
  font-family:var(--font-display);
  font-size:10px;
  color:var(--gold);
  background:transparent;
  border:1px solid rgba(232,165,92,0.4);
  padding:1px 6px;
  margin:0 0 6px;
  letter-spacing:.12em;
}
.bubble.you{
  align-self:flex-end;
  width:min(78%,460px);
  max-width:100%;
  background:rgba(0,0,0,0.14);
  color:var(--ink);
  border:1px solid var(--paper-shadow);
  border-right:3px solid var(--wine);
  border-radius:1px 0 0 1px;
}
body.night .bubble.shopkeeper{ background:linear-gradient(180deg, rgba(232,165,92,0.06), transparent 60%), #241C15; }
body.night .bubble.you{ background:rgba(0,0,0,0.22); }
@media (max-width:480px){
  .bubble.shopkeeper, .bubble.you{ width:100%; max-width:100%; }
}

/* 質感4択・棚チップ等（.chart-btn共通）：丸チップから木の棚札・紙片へ */
.chart-options{ gap:8px; }
.chart-btn{
  font-family:var(--font-display);
  font-weight:400;
  font-size:13.5px;
  padding:10px 16px;
  border:1px solid var(--paper-shadow);
  border-left:2px solid var(--gold);
  background:var(--paper-2);
  color:var(--ink-soft);
  border-radius:0 1px 1px 0;
  box-shadow:none;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.chart-btn:hover{
  background:rgba(232,165,92,0.08);
  color:var(--ink);
  transform:none;
  box-shadow:none;
}
.chart-btn.primary{
  background:rgba(232,165,92,0.14);
  color:var(--ink);
  border-color:var(--gold);
}
.chart-btn.ghost{
  border-style:solid;
  border-left-style:dashed;
  background:transparent;
}
.chart-btn.shelf-chip{ border-left-color:var(--wine); }

.next-action-guide{
  background:transparent;
  border-radius:0;
  padding:10px 0 10px 14px;
  margin:10px 0 14px;
  border-left:2px dashed var(--paper-shadow);
  animation:none;
}
.guide-lead{ color:var(--ink-soft); font-weight:600; }

.chat-input-row{
  border-top:1px solid var(--paper-shadow);
  padding-top:14px;
}
.chat-input-row textarea{
  border:none;
  border-bottom:1px solid var(--paper-shadow);
  border-radius:0;
  background:rgba(255,255,255,0.03);
  padding:10px 8px;
}
body.night .chat-input-row textarea{ background:rgba(0,0,0,0.18); color:var(--ink); }
.send-btn{
  font-family:var(--font-display);
  background:var(--gold);
  color:#241608;
  border-radius:1px;
  padding:0 20px;
  font-weight:700;
  letter-spacing:.06em;
}
.send-btn:hover{ background:var(--gold-soft); }

/* ----------------------------------------------------------------------------
 * 4-3 感情の棚：丸チップから縦長の「背表紙」へ
 * ---------------------------------------------------------------------------- */
.shelf-tabs{
  gap:0;
  margin-bottom:22px;
  background:linear-gradient(180deg, rgba(0,0,0,0.10), transparent 30%);
  border-bottom:10px solid var(--wood-2);
  padding:10px 6px 0;
}
.shelf-group{
  gap:4px;
  padding-bottom:14px;
}
.shelf-group-label{
  font-family:var(--font-display);
  font-size:10.5px;
  color:var(--gold);
  opacity:.8;
  letter-spacing:.1em;
  padding-left:2px;
}
.shelf-group-row{
  align-items:flex-end;
  gap:5px;
}
.shelf-tab{
  font-family:var(--font-display);
  writing-mode:vertical-rl;
  text-orientation:mixed;
  /* ★Hotfix4-追加：以前はwidth:34pxで固定していたため、英語の長いラベル（例：
     "Unnamed Feeling"）が縦書きボックスの高さ(max-height)に収まらない場合、新しい行
     （縦書きでは左側へ追加される列）が固定幅の外へはみ出し、文字が重なって読めなくなって
     いた。width指定をmin-widthへ変更し、overflow-wrapを追加することで、収まらない
     ラベルは列（幅）が自然に増えて箱の中に収まるようにする。短い日本語ラベルは
     従来どおりmin-width（34px）1列で収まるため、見た目の変化はない。 */
  min-width:34px;
  overflow-wrap:anywhere;
  min-height:76px;
  max-height:110px;
  font-size:12.5px;
  letter-spacing:.14em;
  padding:10px 5px;
  border:1px solid rgba(0,0,0,0.3);
  border-top:1px solid rgba(255,255,255,0.06);
  background:linear-gradient(180deg, var(--wood-2), var(--wood));
  color:#EFE1C4;
  border-radius:1px 1px 0 0;
  box-shadow:inset -2px 0 0 rgba(0,0,0,0.18), inset 2px 0 0 rgba(255,255,255,0.05);
  transition:transform .15s ease, box-shadow .15s ease;
}
.shelf-group-row .shelf-tab:nth-child(3n+2){
  background:linear-gradient(180deg, #5A3D28, #3E2A1C);
}
.shelf-group-row .shelf-tab:nth-child(3n+3){
  background:linear-gradient(180deg, #4A3220, #2E1F14);
  min-height:88px;
}
.shelf-group-row .shelf-tab:nth-child(4n){
  min-height:70px;
}
.shelf-tab:hover{
  transform:translateY(-3px);
}
.shelf-tab.active{
  transform:translateY(-4px);
  color:#FFF3D6;
  box-shadow:inset -2px 0 0 rgba(0,0,0,0.18), inset 2px 0 0 rgba(255,255,255,0.05), inset 0 3px 0 var(--gold);
  background:linear-gradient(180deg, #6B4A30, #3E2A1C);
}
.shelf-tab.glow{
  box-shadow:inset -2px 0 0 rgba(0,0,0,0.18), inset 2px 0 0 rgba(255,255,255,0.05), 0 0 7px rgba(232,165,92,0.45);
}
.shelf-wander-row{
  margin-top:8px;
}
.wander-btn{
  font-family:var(--font-display);
  border:none;
  border-bottom:1px dashed var(--wine);
  border-radius:0;
  background:transparent;
  padding:4px 2px;
}
.wander-btn:hover{ color:var(--wine-2); }
@media (max-width:480px){
  .shelf-tab{ min-width:30px; min-height:64px; font-size:11.5px; }
  .shelf-group-row .shelf-tab:nth-child(3n+3){ min-height:74px; }
}

/* ----------------------------------------------------------------------------
 * 4-4 棚の内容：推薦カードから「選書札・蔵書票・帳面」へ
 * ---------------------------------------------------------------------------- */
.shelf-display{
  background:linear-gradient(180deg, rgba(0,0,0,0.08), transparent 12%, transparent 88%, rgba(0,0,0,0.12));
  border:none;
  border-top:6px solid var(--wood-2);
  border-bottom:6px solid var(--wood-2);
  border-radius:0;
  padding:22px 6px;
}
.definition{
  display:inline-block;
  font-size:12.5px;
  color:var(--ink-soft);
  margin:0 0 18px;
  padding:4px 10px 4px 0;
  border-bottom:1px dashed var(--paper-shadow);
}
.definition b{
  font-size:14px;
  border-right:1px solid var(--paper-shadow);
  padding-right:8px;
  margin-right:6px;
}
/* 「最終仕上げ」ブロック（後方L2554付近）のカード化を後勝ちで打ち消す */
.quote-card{
  font-family:var(--font-display);
  font-size:17px;
  line-height:2;
  background:transparent;
  border-left:2px solid var(--gold);
  border-radius:0;
  box-shadow:none;
  padding:2px 0 2px 16px;
  margin:4px 0 6px;
}
.quote-source{
  font-size:11.5px;
  margin:0 0 20px 16px;
}
.episodes-heading{
  font-family:var(--font-display);
  font-size:13px;
  color:var(--gold);
  letter-spacing:.06em;
  border-top:1px solid rgba(232,165,92,0.25);
  padding-top:14px;
  margin-top:8px;
}
.episodes-note{ opacity:.7; }
.episodes{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:0;
}
.episode-card{
  background:transparent;
  border:none;
  border-top:1px solid var(--paper-shadow);
  border-left:2px solid var(--sage);
  border-radius:0;
  padding:14px 14px 16px;
}
.episode-card.mine{
  border-left:2px solid var(--wine);
  background:rgba(183,112,124,0.06);
}
.episode-card.mine:hover{ background:rgba(183,112,124,0.12); }
.episode-card .who{
  font-family:var(--font-display);
  letter-spacing:.1em;
}
.episode-shuffle, .recommend-shuffle{
  border:none;
  border-bottom:1px dashed var(--paper-shadow);
  border-radius:0;
  background:transparent;
  padding:4px 2px;
}

.recommend-section{ border-top:1px dashed var(--paper-shadow); }
.recommend-heading{ letter-spacing:.04em; }
.recommend-row{ gap:0; }
.recommend-chip{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
  width:100%;
  max-width:100%;
  background:transparent;
  border:none;
  border-top:1px solid var(--paper-shadow);
  border-radius:0;
  padding:12px 4px;
}
.recommend-row .recommend-chip:first-of-type{ border-top:none; }
.recommend-hook{
  border-radius:0;
  background:transparent;
  color:var(--wine);
  border:1px solid var(--wine);
  padding:1px 7px;
}
body.night .recommend-hook{ color:#E8A0A8; border-color:#8A5560; }
.recommend-more{ border-radius:0; }

.music-row{ border-top:1px dashed var(--paper-shadow); padding-top:12px; margin-top:16px; }
.playlist-tracks{ gap:0; }
.playlist-track-row{
  border-top:1px solid var(--paper-shadow);
  padding:8px 2px;
  gap:6px 10px;
}
.playlist-tracks .playlist-track-row:first-child{ border-top:none; }

.detour-cards{ gap:0; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); }
.detour-card{
  background:transparent;
  border:none;
  border-left:2px solid var(--sage);
  border-radius:0;
  padding:12px 14px;
}
.detour-tier-low{ border-left-color:var(--sage); }
.detour-tier-medium{ border-left-color:var(--gold); }
.detour-tier-high{ border-left-color:var(--wine); }
.detour-tier-badge{
  border-radius:0;
  background:transparent !important;
  color:var(--ink-soft);
  padding:0;
  font-size:10px;
  letter-spacing:.08em;
  border-bottom:1px solid currentColor;
}
.detour-tier-low .detour-tier-badge{ color:var(--sage); }
.detour-tier-medium .detour-tier-badge{ color:#C99248; }
.detour-tier-high .detour-tier-badge{ color:#C17E8A; }
.detour-cards .detour-card:nth-child(2){ margin-top:10px; }
.detour-cards .detour-card:nth-child(3){ margin-top:20px; }

.live-pick-row{ gap:0; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); }
.live-pick-card{
  background:transparent;
  border:none;
  border-left:2px solid #4FA3D1;
  border-radius:0;
  padding:10px 14px;
}
.live-pick-badge{
  border-radius:0;
  background:transparent;
  color:#4FA3D1;
  padding:0;
  border-bottom:1px solid #4FA3D1;
}
body.night .live-pick-badge{ color:#7FC0E4; border-color:#7FC0E4; }
@media (max-width:768px){
  .detour-cards, .live-pick-row{ grid-template-columns:1fr 1fr; }
}
@media (max-width:480px){
  .detour-cards, .live-pick-row{ grid-template-columns:1fr; }
  .detour-cards .detour-card:nth-child(2), .detour-cards .detour-card:nth-child(3){ margin-top:0; }
}

/* ----------------------------------------------------------------------------
 * 4-5 編纂机：フォームカードから「机面と一枚の紙」へ
 * ---------------------------------------------------------------------------- */
.desk-form{
  background:linear-gradient(180deg, rgba(0,0,0,0.06), transparent 8%), var(--wood-2);
  border:none;
  border-top:4px solid var(--wood);
  border-bottom:4px solid var(--wood);
  border-radius:0;
  padding:22px 18px;
  gap:16px;
}
body.night .desk-form{ background:linear-gradient(180deg, rgba(0,0,0,0.12), transparent 8%), #1C1611; }
#storyInput{
  border:none;
  border-radius:1px;
  box-shadow:0 2px 10px rgba(0,0,0,0.25), inset 0 0 0 1px rgba(0,0,0,0.05);
  padding:16px 18px;
}
.field select, .field input{
  border:none;
  border-bottom:1px solid var(--paper-shadow);
  border-radius:0;
  background:transparent;
  padding:8px 4px;
}
body.night .field select, body.night .field input{ color:var(--ink); }
.field label{
  font-family:var(--font-display);
  font-size:11px;
  letter-spacing:.08em;
  opacity:.85;
}
.count-row{ margin-top:2px; }
.story-count{
  font-family:var(--font-display);
  font-style:italic;
  opacity:.75;
}
.desk-extra{
  border-top:none;
  border-left:2px solid var(--paper-shadow);
  padding:10px 0 4px 14px;
  margin-top:4px;
}
.desk-extra summary{
  background:transparent;
  border:none;
  border-bottom:1px dashed var(--gold);
  border-radius:0;
  padding:2px 4px 4px 0;
  font-weight:600;
}
body.night .desk-extra summary{ background:transparent; }
.desk-actions{ margin-top:4px; }
.bind-btn{
  font-family:var(--font-display);
  background:linear-gradient(180deg, var(--gold), #B47F35);
  color:#241608;
  border:1px solid #7A4A1E;
  border-radius:1px;
  padding:13px 30px;
  font-weight:700;
  letter-spacing:.1em;
  box-shadow:0 2px 0 #5C3714, 0 6px 14px rgba(0,0,0,0.3);
  transition:background .15s ease, box-shadow .15s ease, transform .1s ease;
}
.bind-btn:hover{
  background:linear-gradient(180deg, var(--gold-soft), var(--gold));
}
.bind-btn:active{
  transform:translateY(1px);
  box-shadow:0 1px 0 #5C3714, 0 3px 8px rgba(0,0,0,0.3);
}
.curate-box{
  background:transparent;
  border:none;
  border-left:2px solid var(--wine);
  border-radius:0;
  padding:10px 0 10px 14px;
}
@media (max-width:480px){
  .desk-form{ padding:16px 12px; }
  #storyInput{ padding:12px 14px; }
}

/* ----------------------------------------------------------------------------
 * 4-6 あなたの本棚：「黒い空箱」から木の棚へ
 * ---------------------------------------------------------------------------- */
.wood-shelf{
  position:relative;
  background:linear-gradient(180deg, var(--wood-2), var(--wood));
  border-radius:1px;
  padding:26px 26px 0;
  box-shadow:inset 0 0 40px rgba(0,0,0,0.35);
}
.wood-shelf::before,
.wood-shelf::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width:14px;
  background:linear-gradient(90deg, rgba(0,0,0,0.4), rgba(255,255,255,0.04) 40%, rgba(0,0,0,0.25));
  pointer-events:none;
}
.wood-shelf::before{ left:0; }
.wood-shelf::after{
  right:0;
  left:auto;
  background:linear-gradient(90deg, rgba(0,0,0,0.25), rgba(255,255,255,0.04) 60%, rgba(0,0,0,0.4));
}
.shelf-row{
  position:relative;
  padding-bottom:20px;
  border-bottom:none;
  box-shadow:none;
}
.shelf-row::after{
  content:"";
  position:absolute;
  left:-26px; right:-26px; bottom:0;
  height:16px;
  background:linear-gradient(180deg, var(--wood-2) 0%, var(--wood-2) 55%, #0C0805 100%);
  box-shadow:0 8px 14px rgba(0,0,0,0.4);
}
.shelf-empty{
  position:relative;
  color:rgba(239,230,211,0.55);
  font-family:var(--font-display);
  font-size:12.5px;
  padding:34px 18px 46px;
  letter-spacing:.04em;
}
.spine.empty-spine{
  background:linear-gradient(180deg, rgba(239,230,211,0.05), transparent) !important;
}
#bookshelf .section-head h2{
  position:relative;
}
.shelf-month-tabs{ gap:0; }
.shelf-month-tab{
  border:none;
  border-bottom:2px solid transparent;
  border-radius:0;
  background:transparent;
  padding:5px 10px;
}
.shelf-month-tab.active{
  background:transparent;
  color:var(--gold);
  border-bottom-color:var(--gold);
}
body.night .shelf-month-tab.active{ background:transparent; color:var(--gold); }
.record-corner{
  background:linear-gradient(180deg, rgba(0,0,0,0.08), transparent);
  border:none;
  border-top:1px dashed var(--paper-shadow);
  border-radius:0;
  padding:16px 4px 4px;
}
body.night .record-corner{ background:linear-gradient(180deg, rgba(0,0,0,0.12), transparent); }

/* ----------------------------------------------------------------------------
 * 4-7 店内案内：同寸4カードから「案内板」へ
 * ---------------------------------------------------------------------------- */
.shop-guide{
  background:linear-gradient(180deg, rgba(0,0,0,0.10), transparent 10%), var(--paper-2);
  border:none;
  border-top:1px solid var(--paper-shadow);
  border-bottom:1px solid var(--paper-shadow);
  padding:6px 24px 18px;
}
.shop-guide-heading{
  border-bottom:1px solid rgba(232,165,92,0.2);
  padding-bottom:14px;
  margin-bottom:14px;
}
.shop-guide .intro-steps{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:0;
}
.shop-guide .intro-step{
  padding:6px 14px;
  background:transparent;
  border:none;
  border-left:1px solid var(--paper-shadow);
  border-radius:0;
  align-items:flex-start;
  text-align:left;
  transition:background .15s ease;
}
.shop-guide .intro-steps .intro-step:first-child{ border-left:none; padding-left:2px; }
.shop-guide .intro-step:hover{
  transform:none;
  background:rgba(232,165,92,0.05);
  border-color:var(--paper-shadow);
}
.shop-guide .intro-num{
  width:auto;
  height:auto;
  border-radius:0;
  background:transparent;
  color:var(--gold);
  font-size:11px;
  letter-spacing:.06em;
  margin-bottom:6px;
  border:1px solid rgba(232,165,92,0.35);
  padding:1px 6px;
}
.shop-guide .intro-title{ font-size:13.5px; }
.shop-guide .intro-text{ font-size:11.5px; text-align:left; }
.shop-guide .pref-row{
  justify-content:flex-start;
  border-top:1px dashed var(--paper-shadow);
  padding-top:12px;
}
.shop-guide .pref-toggle{ opacity:.75; }
@media (max-width:768px){
  .shop-guide .intro-steps{ grid-template-columns:1fr 1fr; }
  .shop-guide .intro-steps .intro-step:nth-child(2n+1){ border-left:none; }
  .shop-guide .intro-steps .intro-step:nth-child(1),
  .shop-guide .intro-steps .intro-step:nth-child(2){
    border-bottom:1px solid var(--paper-shadow);
    padding-bottom:12px;
  }
}
@media (max-width:480px){
  .shop-guide .intro-steps{ grid-template-columns:1fr; }
  .shop-guide .intro-steps .intro-step{
    border-left:none;
    border-top:1px solid var(--paper-shadow);
    padding:12px 2px;
  }
  .shop-guide .intro-steps .intro-step:first-child{ border-top:none; }
}

/* ----------------------------------------------------------------------------
 * 4-8 共通：情報密度・余白・書体の底上げ
 * ---------------------------------------------------------------------------- */
.recommend-buy, .music-link, .playlist-services a{
  opacity:.85;
}
.fav-btn{
  border-radius:1px;
}

/* ----------------------------------------------------------------------------
 * レスポンシブ：PCで管理画面のように全幅へ広がらないための余白確認
 * ---------------------------------------------------------------------------- */
@media (min-width:1100px){
  section, .shop-guide{ max-width:920px; }
}

/* ============================================================================
 * v1.3 最終統合：一場面ずつの体験（表紙→書く→製本→まなが預かる→本棚）
 * --------------------------------------------------------------------------
 * 方針：既存のPhase A〜B-2 CSSは一切削除・上書きしない。ここでは
 *   body.experience-ready / body.experience-open / .experience-page.is-active
 * という新しい状態クラスの出し分けと、新設した体験バー・メニュー・
 * 「まなが預かる」場面カードのスタイルだけを追加する。
 * JS初期化前（experience-readyが付く前）は本ブロックの大半が無効なため、
 * 既存の全機能縦スクロール表示のまま壊れない（仕様書4-2）。
 * .shop・祖先要素へtransform/perspective等は使用しない。
 * ============================================================================ */

/* ---- 4-2：JS初期化後・表紙状態。店内セクション・4タブナビ・土間・店内案内を主画面から外す ---- */
body.experience-ready #pageNav,
body.experience-ready .doma,
body.experience-ready .shop-guide{
  display:none;
}
body.experience-ready .experience-page{
  display:none;
}

/* ---- 4-2：店内（体験モード）。is-activeの頁だけを表示し、表紙・通常footerは隠す ---- */
body.experience-open .entrance.hero{
  display:none;
}
body.experience-open .shop-footer{
  display:none;
}
body.experience-open .experience-page{
  display:none;
}
body.experience-open .experience-page.is-active{
  display:block;
}

/* ---- 4-5：頁ごとの最大幅・中央寄せ・必要な場合だけ縦スクロール ---- */
body.experience-open .experience-page.is-active{
  max-width:880px;
  margin:0 auto;
  min-height:calc(100dvh - 52px);
  box-sizing:border-box;
  scroll-margin-top:0;
}
@media (max-width:600px){
  body.experience-open .experience-page.is-active{
    max-width:100%;
    padding-left:16px;
    padding-right:16px;
  }
}

/* ---- 体験バー：体験モード中だけ見える小さな常設ヘッダー（ブランド名＋メニューボタン） ---- */
.experience-bar{
  display:none;
  position:sticky;
  top:0;
  z-index:45;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 18px;
  background:linear-gradient(180deg, rgba(234,217,184,0.97), rgba(234,217,184,0.9));
  border-bottom:1px solid var(--paper-shadow);
}
body.night .experience-bar{
  background:linear-gradient(180deg, rgba(37,30,23,0.97), rgba(37,30,23,0.9));
}
body.experience-open .experience-bar{
  display:flex;
}
.experience-bar-brand{
  font-family:var(--font-display);
  font-size:13.5px;
  letter-spacing:.06em;
  color:var(--ink);
  opacity:.85;
}

/* ---- メニューボタン（表紙用・体験バー用で共通） ---- */
.menu-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:50%;
  border:1px solid var(--paper-shadow);
  background:rgba(255,255,255,0.12);
  color:var(--ink);
  font-size:18px;
  line-height:1;
  cursor:pointer;
  transition:background .15s ease, transform .15s ease;
}
.menu-btn:hover{ transform:translateY(-1px); }
.cover-menu-btn{
  position:absolute;
  top:18px;
  right:18px;
  z-index:2;
  border-color:rgba(239,230,211,0.35);
  background:rgba(16,24,36,0.35);
  color:var(--paper);
}
.experience-bar .menu-btn{
  border-color:var(--paper-shadow);
  background:rgba(255,255,255,0.35);
  color:var(--ink);
}
body.night .experience-bar .menu-btn{
  background:rgba(0,0,0,0.2);
}

/* ---- Hero写真：既存の夜青グラデーションの上に敷く完成画像（読み込み失敗時は自動でフォールバック） ---- */
.entrance.hero{ overflow:hidden; }
.hero-photo{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}
.hero-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.hero-photo::after{
  content:"";
  position:absolute;
  inset:0;
  /* ★v1.3公開前最終修正：暗すぎる／黒い矩形化の指摘を受け、overlayの濃度を大幅に下げる。
     主コピー・CTAの可読性は下の.trust-badge等の背景で個別に確保しているため、
     ここは店舗の扉・窓・灯りが見える程度の薄い濃度に留める（仕様書8章）。 */
  /* ★WeatherPrototype1：濃度（alpha）は従来のまま固定し、色相だけを時間帯で差し替える。
     alphaを変えないため、主コピー・CTAの可読性は従来と完全に同一に保たれる。 */
  background:linear-gradient(180deg,
    rgba(var(--sky-veil-top, 11,18,28), 0.22) 0%,
    rgba(var(--sky-veil-mid, 11,18,28), 0.32) 55%,
    rgba(var(--sky-veil-bottom, 16,24,36), 0.48) 100%);
  opacity:1;
  z-index:0;
}
.hero-photo img{
  opacity:1;
}
.entrance.hero > *:not(.hero-photo){
  position:relative;
  z-index:1;
}
/* ★v1.3公開前最終修正：overlayを薄くした分、写真の明るい部分でも文字が読めるよう
   控えめなtext-shadowで輪郭を補強する（黒い帯や箱は追加しない）。 */
.entrance.hero .eyebrow,
.entrance.hero h1,
.entrance.hero .tagline,
.entrance.hero .sub-tagline{
  text-shadow:0 1px 3px rgba(0,0,0,0.55), 0 0 18px rgba(0,0,0,0.35);
}

/* ============================================================================
 * 店内メニュー（4タブ主ナビの代替。仕様書2-1）
 * ============================================================================ */
.experience-menu{
  position:fixed;
  inset:0;
  z-index:210;
  display:flex;
  justify-content:flex-end;
  background:rgba(11,18,28,0.55);
}
.experience-menu.hidden{ display:none; }
.experience-menu-card{
  width:min(360px, 88vw);
  height:100%;
  overflow-y:auto;
  background:var(--paper);
  color:var(--ink);
  border-left:1px solid var(--paper-shadow);
  padding:20px 20px 32px;
  box-sizing:border-box;
}
.experience-menu-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:16px;
}
.experience-menu-title{
  font-family:var(--font-display);
  font-size:16px;
  letter-spacing:.06em;
}
.experience-menu-close{
  width:36px;
  height:36px;
  border-radius:50%;
  border:1px solid var(--paper-shadow);
  background:transparent;
  color:var(--ink);
  font-size:18px;
  cursor:pointer;
}
.experience-menu-nav{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:20px;
}
.menu-item{
  font-family:var(--font-body);
  font-size:14.5px;
  text-align:left;
  padding:12px 14px;
  border:1px solid var(--paper-shadow);
  border-radius:6px;
  background:rgba(255,255,255,0.3);
  color:var(--ink);
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease;
}
body.night .menu-item{ background:rgba(255,255,255,0.05); }
.menu-item:hover{ border-color:var(--gold); }
.menu-item.active{
  background:var(--wine);
  border-color:var(--wine);
  color:#f6e8c9;
}
.experience-menu-section{
  font-family:var(--font-display);
  font-size:11.5px;
  letter-spacing:.08em;
  color:var(--ink-soft);
  margin:18px 0 8px;
  padding-top:12px;
  border-top:1px dashed var(--paper-shadow);
}
.experience-menu-nav .experience-menu-section{
  margin:10px 0 4px;
  padding-top:8px;
}
.experience-menu-settings{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.experience-menu-settings .pref-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.experience-menu-settings .share-row,
.experience-menu-settings .legal-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px 12px;
}
.experience-menu-settings .about-accordion-wrap{ max-width:none; }

/* ============================================================================
 * ★2026-07-18追加：任意設定の天気連動機能（店内メニュー内の設定行）
 * ============================================================================ */
.weather-settings{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.weather-region-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}
.weather-region-row.hidden{ display:none; }
.weather-region-select{
  flex:1 1 140px;
  min-width:120px;
  font-family:var(--font-body);
  font-size:12px;
  padding:6px 10px;
  border:1.5px solid var(--paper-shadow);
  border-radius:14px;
  background:rgba(255,255,255,0.25);
  color:var(--ink);
}
body.night .weather-region-select{ background:#262219; color:var(--ink); }
.weather-status{
  font-size:11.5px;
  color:var(--ink-soft);
  opacity:.85;
  margin:0;
}
.weather-privacy-note{
  font-size:10.5px;
  line-height:1.5;
  color:var(--ink-soft);
  opacity:.7;
  margin:0;
}

/* ============================================================================
 * 第三頁：店主まなが預かる（旧showUnfiledShelfPicker再構成。仕様書1-3）
 * ============================================================================ */
.mana-receive-overlay{
  position:fixed;
  inset:0;
  z-index:150;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  box-sizing:border-box;
  background:rgba(11,18,28,0.72);
}
.mana-receive-overlay.hidden{ display:none; }
.mana-receive-card{
  width:min(420px, 100%);
  max-height:calc(100dvh - 48px);
  overflow-y:auto;
  /* ★微調整：day/nightで反転するvar(--paper)/var(--ink)には可読性を依存させず、
     固定のほぼ不透明な煤色背景＋固定の生成り文字で常に読める状態にする。 */
  background:rgba(30,24,18,0.95);
  color:#F5EAD2;
  border:1px solid rgba(232,201,122,0.28);
  border-radius:4px;
  padding:28px 24px 24px;
  box-sizing:border-box;
  text-align:center;
  box-shadow:0 18px 46px rgba(0,0,0,0.45);
}
.mana-receive-figure{
  width:132px;
  height:165px;
  margin:0 auto 16px;
  border-radius:3px;
  overflow:hidden;
  /* ★v1.3公開前最終修正：画像成功時に黒い背景板が透けて見えないよう、既定は透明にする。
     暗い背景（wood系）は画像読み込み失敗時（.img-failedが付いた時）だけ表示する。 */
  background:transparent;
}
.mana-receive-figure img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  opacity:1;
}
.mana-receive-figure.img-failed{
  background:linear-gradient(180deg, var(--gold-soft), var(--gold));
}
.mana-receive-book{
  display:inline-block;
  margin:0 auto 14px;
  padding:10px 16px;
  min-width:140px;
  background:linear-gradient(180deg, var(--wine), var(--wine-2));
  color:#f6e8c9;
  border-radius:2px;
  box-shadow:0 3px 0 rgba(0,0,0,0.25);
}
.mana-receive-book-title{
  font-family:var(--font-display);
  font-size:13.5px;
  letter-spacing:.04em;
}
.mana-receive-line{
  font-size:15px;
  line-height:1.85;
  color:#F5EAD2;
  opacity:1;
  margin:0 0 18px;
}
.mana-receive-card label{
  display:block;
  font-size:12.5px;
  color:rgba(245,234,210,0.8);
  margin-bottom:6px;
  text-align:left;
}
.mana-receive-card select{
  width:100%;
  margin-bottom:16px;
  padding:10px 12px;
  border-radius:4px;
  border:1px solid var(--paper-shadow);
  background:rgba(255,255,255,0.5);
  color:var(--ink);
  font-size:14px;
}
body.night .mana-receive-card select{ background:rgba(0,0,0,0.25); }
.mana-receive-actions{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.mana-receive-error{
  margin-top:12px;
  font-size:12.5px;
  color:var(--wine-2);
}
.mana-receive-error.hidden{ display:none; }

/* ---- 本文サイズをPhase B-2よりわずかに引き上げ（仕様書7：約5〜8%） ---- */
body.experience-open .experience-page.is-active .section-sub,
body.experience-open .experience-page.is-active textarea,
body.experience-open .experience-page.is-active input,
body.experience-open .experience-page.is-active .bubble{
  font-size:calc(1em * 1.06);
}

/* ============================================================================
 * v1.3 公開前最終修正
 * ============================================================================ */

/* ---- 1. 主動線だけの頁番号（「Step 1」のようなアプリ的な丸バッジにはしない。地の文として表示） ---- */
.page-label{
  font-family:var(--font-display);
  font-size:12.5px;
  letter-spacing:.08em;
  color:var(--wine);
  white-space:nowrap;
  flex-shrink:0;
}
body.night .section-head .page-label{ color:var(--gold); }
.bind-page-label{
  color:var(--gold-soft);
  font-size:13px;
  margin:0 0 4px;
  text-align:center;
}
.mana-page-label{
  /* ★微調整：暗い煤色カードの上でも常に灯橙で視認できるよう、固定のlamp-glowを使う */
  color:var(--lamp-glow);
  font-size:12.5px;
  margin:0 0 10px;
}
/* ★微調整：第四頁（本棚）の頁番号も、day/nightにかかわらず灯橙で維持する */
#bookshelf .section-head .page-label{
  color:var(--lamp-glow);
}

/* ---- 5. 店内メニューボタンの文字表示 ---- */
.menu-btn-label{
  font-family:var(--font-body);
  font-size:13px;
  letter-spacing:.02em;
  margin-left:6px;
}
.menu-btn-label-short{ display:none; }
@media (max-width:480px){
  .menu-btn-label-full{ display:none; }
  .menu-btn-label-short{ display:inline; }
}
.menu-btn{
  width:auto;
  padding:0 16px 0 14px;
  border-radius:20px;
  gap:2px;
}
@media (max-width:480px){
  .menu-btn{ padding:0 12px 0 12px; }
  .menu-btn-label{ font-size:12px; margin-left:4px; }
}

/* ---- 2. 棚連動の本・音楽推薦（この棚を選んだあなたへ） ---- */
.shelf-pick-recommend{
  margin:24px 0 0;
  padding:20px;
  border:1px solid var(--paper-shadow);
  border-radius:4px;
  background:rgba(255,255,255,0.04);
}
.shelf-pick-recommend-heading{
  font-family:var(--font-display);
  font-size:15px;
  color:var(--wine);
  margin:0 0 6px;
}
body.night .shelf-pick-recommend-heading{ color:var(--gold); }
.shelf-pick-recommend-note{
  font-size:12.5px;
  color:var(--ink-soft);
  margin:0 0 16px;
}
.shelf-pick-recommend-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
@media (max-width:640px){
  .shelf-pick-recommend-grid{ grid-template-columns:1fr; }
}
.shelf-pick-book,
.shelf-pick-music{
  padding:12px 14px;
  border:1px solid var(--paper-shadow);
  border-radius:4px;
  background:rgba(255,255,255,0.03);
}
.shelf-pick-kicker{
  font-size:11px;
  letter-spacing:.08em;
  color:var(--ink-soft);
  margin:0 0 4px;
}
.shelf-pick-title{
  font-family:var(--font-display);
  font-size:14px;
  margin:0 0 4px;
  color:var(--ink);
}
.shelf-pick-meta{
  font-size:12px;
  color:var(--ink-soft);
  margin:0 0 8px;
}
.shelf-pick-link{
  font-size:12.5px;
  color:var(--gold);
}
.shelf-pick-more{
  display:inline-block;
  margin-top:16px;
  font-size:12.5px;
  color:var(--gold);
  cursor:pointer;
}

/* ---- 3. 番台：4択＋それ以外／21棚一覧 ---- */
.counter-shelf-groups{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top:14px;
}
.counter-shelf-group-heading{
  font-family:var(--font-display);
  font-size:13px;
  color:var(--wine);
  margin:0 0 6px;
}
body.night .counter-shelf-group-heading{ color:var(--gold); }
.counter-shelf-group-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.counter-shelf-pill{
  font-size:12.5px;
  padding:7px 12px;
  border:1px solid var(--paper-shadow);
  border-radius:16px;
  background:rgba(255,255,255,0.04);
  color:var(--ink);
  cursor:pointer;
}
.counter-shelf-pill:hover{ border-color:var(--gold); }
.counter-write-btn{
  margin-top:18px;
}

/* ---- 6. 本棚到着後の次行動 ---- */
.bookshelf-arrival{
  margin:24px 0 0;
  padding:20px;
  border:1px solid rgba(232,201,122,0.28);
  border-radius:4px;
  /* ★微調整：従来は背景がほぼ透明（4%白）で、背後の本棚演出に文字が沈んでいた。
     ほぼ不透明な煤色にして、常に一定のコントラストを確保する。 */
  background:rgba(30,24,18,0.95);
  text-align:center;
}
.bookshelf-arrival-heading{
  font-family:var(--font-display);
  font-size:15px;
  color:#F5EAD2;
  opacity:1;
  margin:0 0 14px;
}
.bookshelf-arrival-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
}

/* ---- 3. 番台：棚の案内（統一挨拶文・確認メモ） ---- */
/* ★RC3 CounterAtmosphere：会話アプリの吹き出しに見せず、「番台に置かれた店主のメモ」に
   見せる。左端の細い琥珀色（--lamp-glow）の罫線＋小さな見出しラベルのみで区切り、
   角丸・影・背景色はほぼ付けない（カードが浮いて見えないようにするため）。 */
.counter-note{
  margin:0 0 18px;
  padding:2px 0 2px 16px;
  border-left:2px solid var(--lamp-glow);
}
.counter-note-label{
  display:block;
  font-family:var(--font-display);
  font-size:10.5px;
  letter-spacing:.25em;
  color:var(--lamp-glow);
  margin:0 0 6px;
}
.counter-greeting{
  font-family:var(--font-display);
  font-size:15px;
  line-height:1.85;
  color:var(--ink);
  margin:0;
}
/* ★微調整：既に棚を選んだ利用者が番台へ戻った時だけ表示する、小さな補足文 */
.counter-shelf-return-note{
  font-size:12.5px;
  line-height:1.6;
  color:var(--ink-soft);
  margin:-10px 0 16px;
}
.counter-shelf-confirm-note{
  font-size:14.5px;
  color:var(--ink);
  margin:0 0 14px;
}
.counter-shelf-back{
  margin-top:4px;
}

/* ============================================================================
 * v1.3 RC2 最終微調整（表紙メニューの重なり解消／今日の日付／装丁カード／
 * 「今月の寄り道」の路地デザイン／棚〜本音楽紹介の背景変化）
 * ============================================================================ */

/* ---- 1. 表紙メニューの位置とコントラスト ----
   .entrance.hero > *:not(.hero-photo){position:relative} に上書きされていた
   .cover-menu-btn の position:absolute を、同等詳細度＋記述順の優先度で確実に復元する。 */
.entrance.hero > .cover-menu-btn{
  position:absolute;
  top:max(14px, env(safe-area-inset-top));
  right:max(14px, env(safe-area-inset-right));
  left:auto;
  z-index:5;
  background:rgba(16,24,36,0.86);
  border:1px solid rgba(239,230,211,0.55);
  color:var(--paper);
  box-shadow:0 2px 10px rgba(0,0,0,0.35);
}
.entrance.hero > .cover-menu-btn:hover{
  background:rgba(16,24,36,0.94);
}

/* ★2026-07-18追加：表紙の常時表示言語切替（日本語｜English）。
   .cover-menu-btnと反対側（左上）に置き、常に見える位置に固定する。
   日本語／Englishという言語名自体は、翻訳対象にしない（自分自身を指す固有名のため）。 */
.entrance.hero > .hero-lang-toggle{
  position:absolute;
  top:max(14px, env(safe-area-inset-top));
  left:max(14px, env(safe-area-inset-left));
  right:auto;
  z-index:5;
  display:inline-flex;
  align-items:center;
  gap:4px;
  background:rgba(16,24,36,0.86);
  border:1px solid rgba(239,230,211,0.55);
  border-radius:20px;
  padding:7px 13px;
  font-family:var(--font-body);
  font-size:11.5px;
  letter-spacing:.02em;
  color:rgba(245,234,210,0.62);
  cursor:pointer;
  box-shadow:0 2px 10px rgba(0,0,0,0.35);
}
.entrance.hero > .hero-lang-toggle:hover{
  background:rgba(16,24,36,0.94);
  border-color:rgba(245,234,210,0.8);
}
.hero-lang-toggle .hero-lang-sep{ opacity:.5; }
.hero-lang-toggle .hero-lang-ja,
.hero-lang-toggle .hero-lang-en{ transition:color .15s ease, font-weight .15s ease; }
.hero-lang-toggle.lang-is-ja .hero-lang-ja{ color:#F5EAD2; font-weight:700; }
.hero-lang-toggle.lang-is-en .hero-lang-en{ color:#F5EAD2; font-weight:700; }
body.night .entrance.hero > .hero-lang-toggle{
  background:rgba(11,18,28,.97);
  border:1px solid rgba(245,234,210,.72);
}
@media (max-width:480px){
  .entrance.hero > .hero-lang-toggle{
    padding:6px 10px;
    font-size:10.5px;
  }
}

/* 店内上部（.experience-bar）のメニューボタンも背景とのコントラストを補強する */
.experience-bar .menu-btn{
  border-color:rgba(16,24,36,0.32);
  box-shadow:0 1px 4px rgba(0,0,0,0.1);
}
body.night .experience-bar .menu-btn{
  border-color:rgba(239,230,211,0.4);
  background:rgba(0,0,0,0.32);
}

/* 390px幅でもHero見出し・CTAとメニューが重ならないよう上余白を確保する。
   （.entrance{padding:44px 16px 32px} という既存の480px以下上書きに対し、
   詳細度の高い.entrance.heroで必要な分だけ上パディングを戻す） */
@media (max-width:480px){
  .entrance.hero{ padding-top:64px; }
}

/* ---- RC2b：Hero下部の円形ロゴ（蔵書印）のための余白確保。既存.entrance{padding-bottom:48px}
   に対し、.entrance.hero（詳細度が高い）だけ下パディングを広げ、主コピー・CTA・trust-rowと
   重ならないようにする。 ---- */
.entrance.hero{ padding-bottom:150px; }
@media (max-width:480px){
  .entrance.hero{ padding-bottom:112px; }
}
.entrance.hero > .hero-seal{
  position:absolute;
  left:50%;
  bottom:max(28px, env(safe-area-inset-bottom));
  transform:translateX(-50%);
  z-index:2;
  width:112px;
  height:112px;
  border-radius:50%;
  overflow:hidden;
  box-shadow:0 3px 10px rgba(0,0,0,0.35);
  pointer-events:none;
}
.hero-seal img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
@media (max-width:480px){
  .entrance.hero > .hero-seal{
    width:80px;
    height:80px;
    bottom:max(24px, env(safe-area-inset-bottom));
  }
}

/* ---- 2. 今日の日付 ---- */
.shop-current-date{
  font-family:var(--font-body);
  font-size:12px;
  color:var(--ink);
  opacity:.7;
  letter-spacing:.02em;
  white-space:nowrap;
  margin-left:auto;
  margin-right:12px;
}
body.night .shop-current-date{ color:var(--paper); opacity:.75; }
@media (max-width:480px){
  .shop-current-date{ font-size:11px; margin-right:8px; }
}

/* ============================================================================
 * ★2026-07-19追加：天気連動のバッジ（例：「東京・雨の夜」）と、押した時だけ開く詳細ポップオーバー。
 * 天気連動がOFF、または天気状態が取得できていない間は.hiddenのまま非表示。
 * ============================================================================ */
.weather-badge{
  position:relative;
  font-family:var(--font-body);
  font-size:11.5px;
  letter-spacing:.03em;
  padding:4px 12px;
  margin-right:8px;
  border:1px solid var(--paper-shadow);
  border-radius:14px;
  background:rgba(255,255,255,0.3);
  color:var(--ink);
  opacity:.9;
  cursor:pointer;
  white-space:nowrap;
}
.weather-badge.hidden{ display:none; }
body.night .weather-badge{
  background:rgba(0,0,0,0.24);
  color:var(--paper);
  border-color:rgba(239,230,211,0.3);
}
@media (max-width:480px){
  .weather-badge{ font-size:10.5px; padding:3px 9px; margin-right:6px; }
}

.weather-detail-popover{
  position:absolute;
  top:100%;
  right:18px;
  margin-top:6px;
  z-index:46;
  min-width:160px;
  padding:10px 14px;
  border-radius:8px;
  background:rgba(30,24,18,0.95);
  border:1px solid rgba(232,201,122,0.3);
  box-shadow:0 6px 16px rgba(0,0,0,0.3);
}
.weather-detail-popover.hidden{ display:none; }
.weather-detail-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:11.5px;
  padding:3px 0;
  color:#F5EAD2;
}
.weather-detail-label{ opacity:.7; }
.weather-detail-value{ font-weight:600; }

#desk{ position:relative; }
.desk-current-date{
  position:absolute;
  top:16px;
  right:20px;
  font-family:var(--font-body);
  font-size:12px;
  color:var(--ink);
  opacity:.55;
  letter-spacing:.03em;
  white-space:nowrap;
}
body.night .desk-current-date{ color:var(--paper); opacity:.6; }
@media (max-width:480px){
  .desk-current-date{ top:10px; right:16px; font-size:10.5px; }
}

/* ---- 3. 本・音楽の装丁カード ---- */
.shelf-pick-book,
.shelf-pick-music{
  display:flex;
  gap:14px;
  align-items:flex-start;
}
.shelf-pick-jacket{
  flex:0 0 auto;
  position:relative;
  overflow:hidden;
  border:1px solid rgba(0,0,0,0.15);
  box-shadow:0 2px 6px rgba(0,0,0,0.2);
  display:flex;
  align-items:flex-end;
}
.shelf-pick-book .shelf-pick-jacket{
  width:60px;
  height:90px; /* 縦長 概ね2:3 */
  border-radius:2px 5px 5px 2px;
}
.shelf-pick-music .shelf-pick-jacket{
  width:80px;
  height:80px; /* 正方形 */
  border-radius:3px;
}
.shelf-pick-jacket-tag{
  position:relative;
  z-index:2;
  display:block;
  width:100%;
  padding:3px 6px;
  font-size:9px;
  letter-spacing:.05em;
  background:rgba(0,0,0,0.34);
  color:#fff;
  text-align:center;
}
.shelf-pick-jacket img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:1;
}
.shelf-pick-jacket-spine{
  position:absolute;
  left:0; top:0; bottom:0;
  width:7px;
  background:rgba(0,0,0,0.2);
  z-index:1;
}
.shelf-pick-jacket-grain{
  position:absolute;
  inset:0;
  opacity:.16;
  background-image:repeating-linear-gradient(115deg, rgba(255,255,255,0.55) 0 1px, transparent 1px 6px);
  pointer-events:none;
  z-index:1;
}
.shelf-pick-book-body,
.shelf-pick-music-body{
  flex:1 1 auto;
  min-width:0;
}
@media (max-width:480px){
  .shelf-pick-book, .shelf-pick-music{ gap:10px; }
  .shelf-pick-book .shelf-pick-jacket{ width:50px; height:75px; }
  .shelf-pick-music .shelf-pick-jacket{ width:62px; height:62px; }
}

/* ============================================================================
 * 「今月の寄り道」路地デザイン（内容・リンク・件数・機能は不変更。装飾のみ）
 * ============================================================================ */
.detour-section{
  position:relative;
  /* ★v1.3 RC2b：色の旅がmusic-row（試聴室・灯橙）の直後に来ることを踏まえ、
     ここで夜青へ戻さず、木の茶から灯橙寄りの暖色で続きとして終える
     （「気の向くままに」〜本・音楽紹介の最後を灯橙で締めくくる：仕様書4章）。 */
  background:
    radial-gradient(ellipse at 50% 100%, rgba(232,165,92,0.16), transparent 62%),
    linear-gradient(180deg, #241A12 0%, #3B2814 55%, #4A3018 100%);
  border-top:none;
  border-radius:6px;
  padding:22px 16px 20px;
  overflow:hidden;
}
.detour-heading,
.detour-note{
  position:relative;
  z-index:2;
  /* ★微調整：var(--paper)はbody.nightで#251E17（ほぼ黒）へ反転するため、
     常に暗い夜色背景の上に乗るこの見出しには使えない。固定のクリーム色で確実に読める状態にする。 */
  color:#F5EAD2;
  opacity:1;
}
.detour-pr{
  position:relative;
  z-index:2;
  color:rgba(239,230,211,0.6);
}
.detour-note{ color:rgba(239,230,211,0.55); margin-top:18px; }

.detour-cards{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:0;
  margin-top:18px;
}
/* 石畳を思わせる路地中央の縦線 */
.detour-cards::before{
  content:"";
  position:absolute;
  top:4px;
  bottom:4px;
  left:50%;
  width:2px;
  transform:translateX(-50%);
  background:repeating-linear-gradient(180deg, rgba(232,201,122,0.32) 0 6px, transparent 6px 14px);
  z-index:0;
  pointer-events:none;
}
.detour-card{
  position:relative;
  z-index:1;
  width:60%;
  max-width:280px;
  margin:0 0 22px;
  padding:12px 14px;
  /* ★微調整：背後の窓明かり演出が文字へ透けないよう、ほぼ不透明な煤色に強化 */
  background:rgba(30,24,18,0.95);
  border:1px solid rgba(232,201,122,0.26);
  border-left:none !important;
  border-radius:3px;
  box-shadow:0 6px 16px rgba(0,0,0,0.35), 0 0 20px rgba(232,165,92,0.1);
  color:#F5EAD2;
}
/* 窓から漏れる灯り */
.detour-card::before{
  content:"";
  position:absolute;
  top:-3px;
  width:9px;
  height:9px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(232,165,92,0.9), rgba(232,165,92,0) 70%);
  box-shadow:0 0 10px 3px rgba(232,165,92,0.45);
  pointer-events:none;
}
.detour-cards .detour-card:nth-child(odd){
  align-self:flex-start;
  margin-left:6%;
}
.detour-cards .detour-card:nth-child(odd)::before{ right:-4px; }
.detour-cards .detour-card:nth-child(even){
  align-self:flex-end;
  margin-right:6%;
}
.detour-cards .detour-card:nth-child(even)::before{ left:-4px; }
.detour-cards .detour-card:nth-child(3n){ width:52%; }
.detour-cards .detour-card:nth-child(3n+2){ width:66%; }

.detour-tier-badge{
  background:rgba(232,201,122,0.16) !important;
  color:var(--lamp-glow) !important;
  border:1px solid rgba(232,201,122,0.4);
  border-bottom:1px solid rgba(232,201,122,0.4) !important;
}
/* ★微調整：.detour-name もvar(--paper)依存をやめ、固定のクリーム色・opacity:1で
   夜色カード背景の上でも常に読める状態にする（body.night反転の影響を受けない）。 */
.detour-name{ color:#F5EAD2 !important; opacity:1; }
.detour-desc{ color:rgba(239,230,211,0.82); opacity:1; }
.detour-link,
.detour-link:link{ color:var(--lamp-glow) !important; opacity:1; }
.detour-link:visited{ color:var(--lamp-glow) !important; }
.detour-link:hover,
.detour-link:focus-visible{ color:var(--lamp-glow) !important; opacity:.85; }
body.night .detour-card{ background:rgba(24,19,14,0.96); }
body.night .detour-heading,
body.night .detour-name{ color:#F5EAD2 !important; }

/* ★2026-07-18変更：スマートフォンでは「今月の寄り道」を横スワイプ＋scroll-snapへ変更する。
   デスクトップの路地配置（縦積み・中央線・左右交互）は上のルールのまま一切変更しない。
   内容・リンク・件数は不変更。ここは配置（装飾）だけを上書きする。 */
@media (max-width:480px){
  .detour-cards{
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    gap:12px;
    overflow-x:auto;
    overflow-y:visible;
    scroll-snap-type:x proximity;
    scroll-padding-left:4%;
    -webkit-overflow-scrolling:touch;
    padding-bottom:14px;
  }
  .detour-cards::-webkit-scrollbar{ display:none; }
  /* 路地の中央線・窓明かりの左右振り分けは、横スクロールでは意味を持たないため非表示にする */
  .detour-cards::before{ display:none; }
  .detour-card::before{ display:none; }
  .detour-card,
  .detour-cards .detour-card:nth-child(odd),
  .detour-cards .detour-card:nth-child(even),
  .detour-cards .detour-card:nth-child(3n),
  .detour-cards .detour-card:nth-child(3n+2){
    flex:0 0 78%;
    width:78%;
    max-width:none;
    margin:0;
    align-self:auto;
    scroll-snap-align:center;
  }
}

/* ============================================================================
 * 「気の向くままに」〜本・音楽紹介の区間に、路地→選書棚→試聴室への
 * ゆるやかな視覚変化を加える（内容・リンク・件数は不変更。背景と疑似要素のみ）。
 * 既存の紙面トーンの上に薄い色調オーバーレイを重ねるだけなので、
 * 既存の文字色（--ink系）はそのまま可読性を保つ。
 * transformは装飾用の疑似要素にのみ使用し、祖先要素へは使用しない。
 * アニメーション・自動スクロール・parallaxは一切追加しない。
 * ============================================================================ */

/* Zone A：棚タブ〜「気の向くままに巡る」＝路地の入口（夜青の気配） */
.shelf-tabs{
  position:relative;
  padding:14px 16px 12px;
  margin:0 -16px 20px;
  border-radius:6px;
  background:
    radial-gradient(circle at 10% 15%, rgba(232,165,92,0.07), transparent 42%),
    radial-gradient(circle at 92% 78%, rgba(232,165,92,0.05), transparent 46%),
    linear-gradient(180deg, rgba(11,18,28,0.06) 0%, rgba(16,24,36,0.03) 100%);
}
.shelf-tabs::after{
  content:"";
  position:absolute;
  left:8%;
  right:8%;
  bottom:0;
  height:1px;
  background:repeating-linear-gradient(90deg, rgba(139,110,74,0.35) 0 5px, transparent 5px 11px);
  pointer-events:none;
}

/* Zone B：店主が選んだ本＝奥の選書棚（煤色〜木の茶、棚板の影） */
.recommend-section{
  position:relative;
  padding:20px 6% 20px 4%;
  margin:0 -16px 0;
  background:
    repeating-linear-gradient(90deg, rgba(62,42,28,0.05) 0 2px, transparent 2px 64px),
    linear-gradient(180deg, rgba(30,24,18,0.05) 0%, rgba(62,42,28,0.07) 100%);
}
.recommend-row{ position:relative; z-index:1; }
.recommend-row .recommend-chip:nth-child(3n+1){ margin-top:0; }
.recommend-row .recommend-chip:nth-child(3n+2){ margin-top:10px; }
.recommend-row .recommend-chip:nth-child(3n+3){ margin-top:4px; }

/* Zone C：プレイリスト＝暖かな試聴室（灯橙のやわらかい気配） */
.music-row{
  position:relative;
  padding:18px 4% 18px 8%;
  margin:0 -16px 0;
  background:
    radial-gradient(ellipse at 85% 100%, rgba(232,165,92,0.14), transparent 60%),
    linear-gradient(180deg, rgba(62,42,28,0.06) 0%, rgba(90,61,40,0.08) 100%);
}
.playlist-track-row:nth-child(odd){ padding-left:0; }
.playlist-track-row:nth-child(even){ padding-left:3%; }

@media (max-width:600px){
  .shelf-tabs,
  .recommend-section,
  .music-row{ margin-left:-16px; margin-right:-16px; padding-left:12px; padding-right:12px; }
  .playlist-track-row:nth-child(even){ padding-left:0; }
}

/* ============================================================================
 * v1.3 RC2b：項目7「番台へ戻る」の横に「お店を出る」を追加
 * ============================================================================ */
.section-return{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:10px;
}
/* ★2026-07-18追加：番台への導線（#shelves・#desk）の直前に表示する、小さな呼びかけ。
   .section-returnはflex-wrapのため、flex-basis:100%で単独行にし、下のボタン行と分ける。 */
.section-return-prompt{
  flex-basis:100%;
  text-align:center;
  margin-bottom:2px;
}
.section-return-prompt strong{
  display:block;
  font-family:var(--font-display);
  font-weight:600;
  font-size:13px;
  color:var(--ink-soft);
  letter-spacing:.05em;
}
.section-return-prompt span{
  display:block;
  font-size:11.5px;
  color:var(--ink-soft);
  opacity:.8;
  margin-top:2px;
}
/* ★微調整：以前は薄い枠線＋opacity:.85で「操作できないボタン」に見えていたため、
   常時操作可能な副ボタンとして、生成り色の文字＋濃い地色＋薄いクリーム枠で
   はっきりと視認できる状態に改める（day/nightで色が反転する var(--ink)/var(--paper)
   には依存せず、固定値でコントラストを担保する）。 */
.exit-shop-btn{
  font-family:var(--font-body);
  font-size:12.5px;
  color:#F5EAD2;
  background:rgba(43,33,24,0.82);
  border:1px solid rgba(245,234,210,0.55);
  border-radius:20px;
  padding:8px 20px;
  cursor:pointer;
  letter-spacing:.04em;
  opacity:1;
  box-shadow:0 1px 4px rgba(0,0,0,0.18);
}
.exit-shop-btn:hover{
  background:rgba(43,33,24,0.94);
  border-color:rgba(245,234,210,0.8);
}
.exit-shop-btn:focus-visible,
.back-to-bandai:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:2px;
}
body.night .exit-shop-btn{
  background:rgba(245,234,210,0.10);
  border-color:rgba(245,234,210,0.55);
  color:#F5EAD2;
}
body.night .exit-shop-btn:hover{
  background:rgba(245,234,210,0.18);
}

/* ============================================================================
 * v1.3 RC2b：項目6「感謝」等の未選択棚が常時発光する問題の是正は
 * main.js側（renderShelfTabs）でJSのクラス付与自体を止める。
 * .shelf-tab.glow のCSS定義自体は互換性のため温存する（本ブロックでは変更しない）。
 * ============================================================================ */


/* ============================================================================
 * v1.3 RC2b FINAL3：表紙メニューと正式ロゴの表示保証
 * 位置・機能・遷移は変更しない。
 * ============================================================================ */

/* Hero写真の明暗やday/night変数に影響されない、固定配色のメニューボタン */
body .entrance.hero > .cover-menu-btn,
body.night .entrance.hero > .cover-menu-btn{
  position:absolute;
  top:max(14px, env(safe-area-inset-top));
  right:max(14px, env(safe-area-inset-right));
  left:auto;
  z-index:8;
  background:rgba(11,18,28,.97);
  border:1px solid rgba(245,234,210,.72);
  color:#F5EAD2;
  opacity:1;
  box-shadow:0 4px 14px rgba(0,0,0,.52);
  text-shadow:0 1px 2px rgba(0,0,0,.85);
  mix-blend-mode:normal;
  isolation:isolate;
  -webkit-text-fill-color:#F5EAD2;
}

body .entrance.hero > .cover-menu-btn > span,
body .entrance.hero > .cover-menu-btn .menu-btn-label,
body .entrance.hero > .cover-menu-btn .menu-btn-label-full,
body .entrance.hero > .cover-menu-btn .menu-btn-label-short,
body.night .entrance.hero > .cover-menu-btn > span,
body.night .entrance.hero > .cover-menu-btn .menu-btn-label{
  color:#F5EAD2;
  opacity:1;
  -webkit-text-fill-color:#F5EAD2;
}

body .entrance.hero > .cover-menu-btn:hover,
body.night .entrance.hero > .cover-menu-btn:hover{
  background:#101824;
  border-color:rgba(245,234,210,.9);
}

/* 正式ロゴ。画像が存在する場合はHero写真より前面へ、背景から明確に分離する */
body .entrance.hero > .hero-seal{
  display:block;
  position:absolute;
  left:50%;
  bottom:max(28px, env(safe-area-inset-bottom));
  transform:translateX(-50%);
  z-index:7;
  width:112px;
  height:112px;
  border-radius:50%;
  overflow:hidden;
  opacity:1;
  background:#17120D;
  border:1px solid rgba(232,165,92,.58);
  box-shadow:0 5px 18px rgba(0,0,0,.58);
  pointer-events:none;
  mix-blend-mode:normal;
}

body .entrance.hero > .hero-seal img{
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  opacity:1;
  object-fit:cover;
  mix-blend-mode:normal;
}

@media (max-width:480px){
  body .entrance.hero > .hero-seal{
    width:80px;
    height:80px;
    bottom:max(24px, env(safe-area-inset-bottom));
  }
}

/* ============================================================================
 * ★2026-07-18追加：任意設定の天気連動機能 — 演出のみ（CSS）
 * ------------------------------------------------------------------------
 * ・body[data-weather="clear|cloudy|rain|snow|fog|storm"] が設定されている場合だけ発火する。
 *   天気連動がOFF、または取得できなかった場合はdata-weather属性自体が付与されないため、
 *   ここから下のルールは一切適用されず、既存の見た目（写真・灯り・路地・窓）に変化はない。
 * ・対象は既存の書店写真（.entrance.hero）・路地（.detour-cards）・窓明かり
 *   （.detour-card、既存の::beforeの隣に::afterで追加）のみ。感情の棚・助け舟・推薦・
 *   本の内容など機能面には一切影響しない（見た目のCSSのみ）。
 * ・stormは点滅を使わず、雨（.detour-card::after共用）と外気の暗さ（オーバーレイの濃度）だけを強める。
 * ============================================================================ */

/* ---- 書店写真（Hero）：clear=星と澄んだ外気／cloudy=青灰色の拡散光／rain・storm=路面反射 ---- */
.entrance.hero > .hero-weather-fx{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:0;
  transition:opacity 1.1s ease;
}
body[data-weather] .entrance.hero > .hero-weather-fx{ opacity:1; }

body[data-weather="clear"] .entrance.hero > .hero-weather-fx{
  background-image:
    radial-gradient(1.4px 1.4px at 12% 16%, rgba(255,255,255,.85), transparent 60%),
    radial-gradient(1px 1px at 24% 9%, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(1.4px 1.4px at 37% 20%, rgba(255,255,255,.8), transparent 60%),
    radial-gradient(1px 1px at 51% 7%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1.4px 1.4px at 64% 15%, rgba(255,255,255,.85), transparent 60%),
    radial-gradient(1px 1px at 77% 11%, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(1.4px 1.4px at 89% 19%, rgba(255,255,255,.8), transparent 60%);
  animation:weatherTwinkle 5s ease-in-out infinite;
}

body[data-weather="cloudy"] .entrance.hero > .hero-weather-fx{
  background:linear-gradient(180deg, rgba(140,150,168,.22) 0%, rgba(120,130,150,.12) 55%, transparent 100%);
}

body[data-weather="rain"] .entrance.hero > .hero-weather-fx{
  background-image:
    linear-gradient(0deg, rgba(140,175,205,.22) 0%, transparent 26%),
    repeating-linear-gradient(112deg, rgba(210,225,238,.10) 0 1px, transparent 1px 16px);
  background-position:0 0, 0 0;
  animation:weatherRainDriftHero 1s linear infinite;
}

/* storm：雨の路面反射を流用しつつ、点滅なしで外気の暗さだけを強める */
body[data-weather="storm"] .entrance.hero > .hero-weather-fx{
  background-image:
    linear-gradient(180deg, rgba(6,10,18,.30) 0%, rgba(6,10,18,.16) 45%, transparent 100%),
    linear-gradient(0deg, rgba(120,150,180,.26) 0%, transparent 30%),
    repeating-linear-gradient(112deg, rgba(200,215,230,.14) 0 1px, transparent 1px 14px);
  background-position:0 0, 0 0, 0 0;
  animation:weatherRainDriftStorm .8s linear infinite;
}

@keyframes weatherTwinkle{
  0%, 100%{ opacity:1; }
  50%{ opacity:.72; }
}
@keyframes weatherRainDriftHero{
  0%{ background-position:0 0, 0 0; }
  100%{ background-position:0 0, -30px 44px; }
}
@keyframes weatherRainDriftStorm{
  0%{ background-position:0 0, 0 0, 0 0; }
  100%{ background-position:0 0, 0 0, -26px 38px; }
}

/* ---- 路地（.detour-cards）：fog=路地奥の霞 ---- */
.detour-cards::after{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:40%;
  background:linear-gradient(180deg, rgba(205,205,205,.4), transparent 100%);
  opacity:0;
  transition:opacity 1.1s ease;
  pointer-events:none;
  z-index:2;
}
body[data-weather="fog"] .detour-cards::after{ opacity:1; }

/* ---- 窓（.detour-card、既存の窓明かり::beforeの隣）：rain・storm=雨粒／snow=窓外の小さな雪 ---- */
.detour-card::after{
  content:"";
  position:absolute;
  top:-3px;
  width:5px;
  height:14px;
  border-radius:2px;
  pointer-events:none;
  opacity:0;
}
.detour-cards .detour-card:nth-child(odd)::after{ right:-2px; }
.detour-cards .detour-card:nth-child(even)::after{ left:-2px; }

body[data-weather="rain"] .detour-card::after,
body[data-weather="storm"] .detour-card::after{
  opacity:1;
  background:linear-gradient(180deg, rgba(200,220,235,.75), rgba(200,220,235,.15));
  animation:weatherWindowDrip 1.1s linear infinite;
}
@keyframes weatherWindowDrip{
  0%{ transform:translateY(-2px); opacity:.9; }
  100%{ transform:translateY(9px); opacity:0; }
}

body[data-weather="snow"] .detour-card::after{
  opacity:1;
  width:4px;
  height:4px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.9), rgba(255,255,255,0) 70%);
  animation:weatherWindowSnow 3.4s linear infinite;
}
@keyframes weatherWindowSnow{
  0%{ transform:translate(0,-4px); opacity:.9; }
  100%{ transform:translate(3px,16px); opacity:0; }
}

/* 演出OFF設定（prefs.motion=false／.no-motion）では、天気の揺らぎ・降下アニメーションも静止させる。
   既存の演出トグルの契約（アニメーション全般を止める）を踏襲し、天気状態の表示自体は残す。 */
body.no-motion .hero-weather-fx,
body.no-motion .detour-cards::after,
body.no-motion .detour-card::after{
  animation:none !important;
}
/* ★2026-07-19追加：OS側のprefers-reduced-motionも独立して尊重する（.no-motionの有無に関わらず）。
   保存済みprefs.motion=trueの状態でOSの「視差効果を減らす」がONの場合も、雨・雪等は静止表示にする。 */
@media (prefers-reduced-motion: reduce){
  .hero-weather-fx,
  .detour-cards::after,
  .detour-card::after{
    animation:none !important;
  }
}

/* ============================================================================
 * ★2026-07-19 hotfix（天気機能の差し戻し対応）
 * 1) 帰属表示（天気データ：Open-Meteo（CC BY 4.0））のスタイル
 * 2) 390px幅の上部バー：店名・日付・天気バッジ・メニューボタンが重ならず、
 *    長い英語表示でも横スクロール・画面外へのはみ出しが起きないようにする
 * ============================================================================ */
.weather-attribution{
  margin:4px 0 0;
  font-size:10.5px;
  line-height:1.6;
  color:var(--ink);
  opacity:.62;
}
.weather-attribution a{
  color:inherit;
  text-decoration:underline;
}
body.night .weather-attribution{ color:var(--paper); opacity:.6; }

/* 上部バー：flex子要素が縮められるようmin-width:0を許可し、はみ出しをバー内で吸収する */
.experience-bar{
  flex-wrap:nowrap;
  overflow:hidden;
}
.experience-bar-brand{
  flex:0 1 auto;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.experience-bar .menu-btn{
  flex-shrink:0;
}
.shop-current-date{
  flex:0 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}
/* 天気バッジ：長い地域名（例：Near your current location）でも1行内で省略表示する */
.weather-badge{
  flex:0 1 auto;
  min-width:0;
  max-width:46vw;
  overflow:hidden;
  text-overflow:ellipsis;
}
@media (max-width:480px){
  .experience-bar{ gap:8px; padding:12px 12px; }
  .weather-badge{ max-width:38vw; }
  .experience-bar-brand{ font-size:12.5px; }
}
@media (max-width:390px){
  .weather-badge{ max-width:34vw; font-size:10px; padding:3px 7px; }
  .shop-current-date{ max-width:26vw; }
}

/* ============================================================================
 * ★2026-07-19 feature/first-visit-experience：初回利用体験（3点のみ）
 * 1) 表紙の初回説明＋「この書店の一冊を、のぞいてみる」（閲覧専用サンプル本）
 * 2) 本詳細モーダルの見本バッジ（通常表示では.hidden）
 * 3) 本棚到着パネルの余韻2行
 * 天気連動・製本・本棚・保存形式のスタイルには手を加えない。
 * ============================================================================ */
.first-visit-note{
  position:relative;
  z-index:1;
  max-width:34em;
  margin:18px auto 0;
  padding:0 16px;
  text-align:center;
}
.first-visit-note p{
  margin:0 0 6px;
  font-size:12.5px;
  line-height:1.9;
  letter-spacing:.03em;
  color:#F5EAD2; /* 生成り色。day/night変数の反転に依存させない */
  opacity:.85;
  text-shadow:0 1px 3px rgba(10,14,22,0.55);
}
.sample-peek-btn{
  display:inline-block;
  margin-top:8px;
  padding:7px 18px;
  font-family:var(--font-body);
  font-size:12.5px;
  letter-spacing:.05em;
  color:#F5EAD2;
  background:rgba(16,24,36,0.35);
  border:1px solid rgba(245,234,210,0.4);
  border-radius:18px;
  cursor:pointer;
  opacity:.92;
  transition:background .15s ease, opacity .15s ease;
}
.sample-peek-btn:hover{ background:rgba(16,24,36,0.55); opacity:1; }
@media (max-width:480px){
  .first-visit-note p{ font-size:11.5px; line-height:1.8; }
  .sample-peek-btn{ font-size:12px; padding:6px 15px; }
}

.sample-book-badge{
  margin:0 0 10px;
  padding:5px 10px;
  font-size:11.5px;
  letter-spacing:.04em;
  text-align:center;
  color:var(--ink);
  background:rgba(232,201,122,0.16);
  border:1px dashed rgba(148,118,62,0.5);
  border-radius:8px;
  opacity:.9;
}
.sample-book-badge.hidden{ display:none; }

/* ★Hotfix4-1：サンプル本を「はじめての方へ」パネル内の通常のドキュメントフロー要素として
   表示するための新規スタイル。position:fixed/absoluteは使わず、開いている間は通常の
   ブロック要素として下の要素（ボタン・その下のFAQ/シェア等）を押し下げる。高さは常に
   auto（コンテンツに応じて自然に伸びる）で、固定のmax-heightやoverflow:hiddenは使わない。
   親の.about-accordion-content（index.html側の<style>）と同じ、日/夜で自動反転する
   CSS変数（var(--ink)等）を使い、既存の.modal-card系（#bookModal用・常時暗色固定）とは
   独立させている。 */
.sample-book-inline{
  margin:10px 0 14px;
  padding:14px 16px;
  background:rgba(255,255,255,0.4);
  border:1px solid var(--paper-shadow);
  border-radius:6px;
  text-align:left;
}
.sample-book-inline.hidden{ display:none; }
body.night .sample-book-inline{
  background:#332E26;
  border-color:var(--paper-shadow);
}
.sample-inline-cat{
  font-size:12px;
  color:var(--ink-soft);
  margin:0 0 2px;
}
.sample-inline-title{
  font-family:var(--font-display);
  font-size:16px;
  margin:0 0 4px;
  color:var(--wine);
}
.sample-inline-date{
  font-size:11px;
  color:var(--ink-soft);
  margin:0 0 10px;
}
.sample-inline-story{
  font-size:13.5px;
  white-space:pre-wrap;
  line-height:1.85;
  color:var(--ink);
}
.sample-inline-note{
  display:block;
  margin-top:12px;
  padding:10px 14px;
  border:1px dashed var(--gold);
  border-radius:4px;
  font-size:12.5px;
  line-height:1.8;
  color:var(--ink);
}
.sample-inline-note-label{
  display:block;
  font-size:10px;
  letter-spacing:.2em;
  color:var(--ink-soft);
  margin-bottom:4px;
  font-family:var(--font-body);
}

.bookshelf-arrival-afterglow{
  margin:2px 0;
  font-size:12.5px;
  line-height:1.9;
  letter-spacing:.04em;
  color:#F5EAD2;
  opacity:.8;
  text-align:center;
}
.bookshelf-arrival-afterglow + .bookshelf-arrival-actions{ margin-top:12px; }

/* ============================================================================
 * ★2026-07-19 feature/quiet-experience-and-en-completion
 * A) 表紙の一文安心表示 B) アコーディオンの操作感 C) メニュー上へ戻る
 * D) 月のおすすめ棚＝看板 E) 題名相談パネル I-3) 製本後ボタンのコントラスト
 * ============================================================================ */

/* A: 表紙は一文だけの安心表示（静けさを主役に戻す） */
.first-visit-one-line{
  position:relative; z-index:1;
  margin:14px auto 0; padding:0 16px;
  text-align:center;
  font-size:12.5px; letter-spacing:.05em; line-height:1.8;
  color:#F5EAD2; opacity:.8;
  text-shadow:0 1px 3px rgba(10,14,22,0.55);
}

/* B: 開閉できることが分かる見出し行（行全体クリック可・矢印・展開時の変化） */
.about-accordion-btn{
  width:100%;
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:9px 12px;
  border:1px solid var(--paper-shadow);
  border-radius:8px;
  background:rgba(255,255,255,0.25);
}
.about-accordion-btn .accordion-arrow{
  display:inline-block;
  font-size:10px; opacity:.7;
  transition:transform .25s ease;
}
.about-accordion-btn[aria-expanded="true"]{
  background:rgba(232,201,122,0.18);
  border-color:rgba(148,118,62,0.55);
}
.about-accordion-btn[aria-expanded="true"] .accordion-arrow{ transform:rotate(180deg); }
body.night .about-accordion-btn{ background:rgba(0,0,0,0.22); }
body.night .about-accordion-btn[aria-expanded="true"]{ background:rgba(232,201,122,0.12); }
.about-data-accordion summary{
  border:1px solid var(--paper-shadow);
  border-radius:8px;
  padding:9px 12px;
}
.about-data-accordion summary::after{
  content:"▼"; font-size:10px; opacity:.7; margin-left:8px;
  display:inline-block; transition:transform .25s ease;
}
.about-data-accordion[open] summary{ background:rgba(232,201,122,0.18); }
.about-data-accordion[open] summary::after{ transform:rotate(180deg); }
@media (prefers-reduced-motion: reduce){
  .about-accordion-content{ transition:none !important; }
  .about-accordion-btn .accordion-arrow,
  .about-data-accordion summary::after{ transition:none !important; }
}
body.no-motion .about-accordion-content{ transition:none !important; }

/* C: メニュー最下部の「上へ戻る」（控えめ）
   ★Hotfix3：body.night個別上書き（color:var(--paper)）が夜モードでは暗色に反転する
   --paperを文字色に使っていたため、暗い背景に暗い文字が乗り判読不能だった。
   Hotfix2の.title-consult-btnと同じ考え方で、CSS変数の日/夜自動反転（--gold/--ink-soft）に
   まかせる方式へ統一し、body.night個別上書きを削除した。 */
.menu-back-to-top{
  display:block;
  margin:14px auto 4px;
  padding:6px 16px;
  font-size:11.5px; letter-spacing:.04em;
  color:var(--ink-soft);
  opacity:1;
  background:transparent;
  border:1px solid var(--gold);
  border-radius:14px;
  cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.menu-back-to-top:hover{ color:var(--ink); background:rgba(168,130,60,0.15); }
.menu-back-to-top:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

/* D: 今月のおすすめ棚＝店内に置かれた小さな木の看板 */
.fair-signboard{
  max-width:340px;
  margin:26px auto;
  padding:18px 20px 16px;
  text-align:center;
  background:
    linear-gradient(180deg, rgba(46,36,26,0.96), rgba(38,29,21,0.97)),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.12) 0 2px, transparent 2px 9px);
  border:2px solid rgba(148,118,62,0.55);
  border-radius:6px;
  box-shadow:0 4px 10px rgba(0,0,0,0.35), inset 0 0 0 4px rgba(20,15,10,0.5);
  position:relative;
}
.fair-signboard::before{
  content:"";
  position:absolute; top:-10px; left:50%; transform:translateX(-50%);
  width:52px; height:10px;
  background:rgba(148,118,62,0.65);
  border-radius:3px 3px 0 0;
}
.fair-signboard .fair-kicker{
  margin:0 0 6px;
  font-size:11px; letter-spacing:.14em;
  color:rgba(245,234,210,0.72);
}
.fair-signboard .fair-shelf-name{
  display:block;
  margin:0 0 8px;
  font-family:var(--font-display);
  font-size:19px; letter-spacing:.06em;
  color:#F0DFBC;
  font-style:italic; /* 店主の手書き風の控えめな傾き */
  text-shadow:0 1px 0 rgba(0,0,0,0.4);
}
.fair-signboard .fair-line{
  display:block;
  margin:0 0 12px;
  font-size:12px; line-height:1.9;
  color:rgba(245,234,210,0.85);
}
.fair-signboard .fair-go{
  display:inline-block;
  padding:7px 18px;
  font-size:12.5px; letter-spacing:.05em;
  color:#2A2118;
  background:#E8C97A;
  border:none; border-radius:16px;
  cursor:pointer;
}
.fair-signboard .fair-go:hover{ filter:brightness(1.06); }
.fair-signboard .fair-go:focus-visible{ outline:2px solid #F5EAD2; outline-offset:2px; }

/* E: 題名相談 */
/* ★Hotfix2-1：実ブラウザで背景と同化して気づけないという指摘への最小修正。
   .shelf-month-tab等と同じ「border:var(--gold)＋透明背景＋var(--ink-soft)文字」の
   静かなセカンダリボタン表現に統一し、day/nightはCSS変数の反転にまかせる
   （個別のbody.night上書きは不要になったため削除。旧ルールはcolor:var(--paper)が
   nightモードで暗色に反転し、暗い背景に暗い文字が乗って視認できなくなるバグだった）。
   主CTA（.bind-btn／塗りつぶし＋太字）より明確に弱いトーンを維持しつつ、
   border＋hover＋focus-visibleでクリック可能なボタンだと分かる状態にする。 */
.title-consult-btn{
  display:inline-block;
  margin:6px 0 0;
  padding:6px 14px;
  font-size:12px; letter-spacing:.04em;
  color:var(--ink-soft);
  background:transparent;
  border:1px solid var(--gold);
  border-radius:14px;
  cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.title-consult-btn:hover{ background:rgba(168,130,60,0.15); color:var(--ink); }
.title-consult-btn:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.title-consult-btn[aria-expanded="true"]{ background:rgba(232,201,122,0.25); border-color:var(--gold); color:var(--ink); }
.title-consult{
  margin:10px 0 0;
  padding:12px 14px;
  background:rgba(30,24,18,0.95);
  border:1px solid rgba(232,201,122,0.3);
  border-radius:8px;
}
.title-consult.hidden{ display:none; }
.title-consult-heading{
  margin:0 0 8px;
  font-size:11.5px; letter-spacing:.1em;
  color:rgba(245,234,210,0.7);
}
.title-consult-list{ display:flex; flex-wrap:wrap; gap:8px; }
.title-consult-item{
  padding:6px 12px;
  font-size:12.5px;
  color:#F5EAD2;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(245,234,210,0.35);
  border-radius:14px;
  cursor:pointer;
}
.title-consult-item:hover{ background:rgba(232,201,122,0.22); }
.title-consult-hint{
  margin:8px 0 6px;
  font-size:11px; color:rgba(245,234,210,0.6);
}
.title-consult-more, .title-consult-close{
  margin:2px 8px 0 0;
  padding:5px 12px;
  font-size:11.5px;
  color:#F5EAD2;
  background:none;
  border:1px solid rgba(245,234,210,0.3);
  border-radius:12px;
  cursor:pointer;
  opacity:.85;
}
.title-consult-more:hover, .title-consult-close:hover{ opacity:1; }

/* I-3: 製本後の次行動ボタンの可読性（day/night反転変数へ主要文字色を依存させない） */
.section-return .back-to-bandai{
  color:#F5EAD2 !important;
  background:rgba(30,24,18,0.82) !important;
  border:1px solid rgba(245,234,210,0.45) !important;
  opacity:1 !important;
  text-shadow:none;
}
.section-return .back-to-bandai:hover{ background:rgba(30,24,18,0.95) !important; }
.bookshelf-arrival .chart-btn.primary{
  color:#2A2118 !important;
  background:#E8C97A !important;
  border:1px solid rgba(148,118,62,0.6) !important;
  opacity:1 !important;
}
.bookshelf-arrival .chart-btn.ghost{
  color:#F5EAD2 !important;
  background:rgba(30,24,18,0.8) !important;
  border:1px solid rgba(245,234,210,0.4) !important;
}
/* 寄り道見出しの半月補足 */
.detour-half-note{
  font-size:10.5px; letter-spacing:.06em; opacity:.75; margin-left:6px;
}

/* ============================================================================
 * ■ Visual Redesign RC1（VR1） — 夜の小さな本屋としての視覚再設計
 * ----------------------------------------------------------------------------
 * 方針
 *  - 既存CSSは1行も削除・書き換えしない。本ブロックを末尾へ追加するだけとする。
 *  - 保存キー・保存形式・データ構造・主要イベント処理・正規の画面遷移は不変。
 *    本ブロックはCSSのみであり、JS・保存・遷移へ影響しない。
 *  - 適用範囲は既存の状態クラス（body.experience-open / .entrance.hero）に限定し、
 *    JS初期化前の縦スクロール表示（既存フォールバック契約）は壊さない。
 *  - 角丸は原則0。カード乱用・発光・ガラス質・粒子・パララックスは使わない。
 *  - 8項目固定ナビは実装しない（モックアップ下部ナビは方向性の参考に留める）。
 * ========================================================================= */

/* ---- VR1-1：夜の店内トークン（既存 --paper 系は上書きしない。新しい名前空間） ---- */
:root{
  /* 夜の店内・素材 */
  --vr-night-0:#0C0907;        /* いちばん奥の暗がり */
  --vr-night-1:#14100B;        /* 店内の基準色 */
  --vr-night-2:#1E1711;        /* 手前の面 */
  --vr-night-3:#2A2018;        /* 灯りが届く面 */
  --vr-wood-dark:#241A12;      /* 棚板の影 */
  --vr-wood:#3A2C1E;           /* 長く使われた木 */
  --vr-wood-lit:#4E3A26;       /* 灯りの当たった木 */
  --vr-brass:#8A6B37;          /* くすんだ真鍮 */
  --vr-brass-lit:#B08A4E;      /* 灯りの当たった真鍮 */
  --vr-lamp:#E0A659;           /* 小さな照明の色温度（発光させない） */
  --vr-outside:#1B2432;        /* 窓の外の夜 */

  /* 紙と文字 */
  --vr-paper:#E7DBC1;          /* 栞・原稿の紙 */
  --vr-paper-2:#D6C5A4;        /* 紙の陰 */
  --vr-text:#F0E7D6;           /* 見出し */
  --vr-text-body:#DCD0B9;      /* 本文 */
  /* ★RC1.2（P1-3）：実画面で補助文字が背景へ沈む指摘を受け、muted / faint の明度を上げる。
     夜の書店の色相（暖色寄りのグレージュ）は維持し、白（#FFF）へは寄せない。
     階層は 見出し > 本文 > 補助 > いちばん静か の順で従来どおり保つ。
       muted : #9C8F79 → #BCAF98
       faint : #7C7161 → #A2957E                                             */
  --vr-text-muted:#BCAF98;     /* 補助文 */
  --vr-text-faint:#A2957E;     /* いちばん静かな文字 */

  /* 罫線（細く抑制された線だけを使う） */
  --vr-rule:rgba(200,170,120,0.20);
  --vr-rule-strong:rgba(200,170,120,0.34);
  --vr-rule-faint:rgba(200,170,120,0.11);

  /* 余白の基準（画面間で連続させる） */
  --vr-gap-xs:6px;
  --vr-gap-s:12px;
  --vr-gap-m:22px;
  --vr-gap-l:38px;
  --vr-gap-xl:60px;

  /* 背景画像スロット（既定は none ＝ 画像なしでも成立するCSSフォールバック）。
     画像を追加する場合のみ、下の各 --vr-bg-* を実在するローカル画像の指定へ差し替える。
     存在しないパスを既定値に置かないため、404は発生しない。 */
  --vr-bg-cover:none;
  --vr-bg-counter:none;
  --vr-bg-mana-desk:none;
  --vr-bg-editing-room:none;
  --vr-bg-bookshelf:none;
  --vr-bg-daily-bookmark:none;
  --vr-bg-monthly-detour:none;
  --vr-bg-emotion-shelves:none;

  /* 既存Hero（同梱ローカルアセット）からトリミングして作った店内の奥行き素材。
     人物・UI文字・擬似日本語を含まない。生成・描き足しは行っていない。 */
  --vr-bg-interior:url('assets/bg-shop-interior.webp');
}

/* ---- VR1-2：店内（体験モード）の地。手前から奥へ暗くなる一続きの空間 ---- */
body.experience-open .shop,
body.night.experience-open .shop{
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(224,166,89,0.055) 0%, rgba(224,166,89,0) 62%),
    linear-gradient(180deg, var(--vr-night-2) 0%, var(--vr-night-1) 46%, var(--vr-night-0) 100%);
  background-attachment:fixed;
  color:var(--vr-text-body);
}

/* 頁そのものは透明にし、地と背景層だけで奥行きを作る */
body.experience-open .experience-page.is-active{
  position:relative;
  background:transparent;
  padding-top:var(--vr-gap-l);
  padding-bottom:calc(var(--vr-gap-xl) + 8px);
  max-width:760px;
}

/* ---- VR1-3：背景の層構造 ----------------------------------------------------
 *  1) ページ背景          … 上の .shop
 *  2) 背景画像            … .is-active::before（--vr-bg-* が none のときは描画されない）
 *  3) 明暗オーバーレイ    … ::before の box-shadow inset ＋ ::after の上半分
 *  4) 本文へつなぐ勾配    … ::after の下半分
 *  5) 見出し・本文・操作  … 通常のHTML要素（画像へ焼き込まない）
 * ------------------------------------------------------------------------- */
body.experience-open .experience-page.is-active::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  background-image:var(--vr-page-bg, none);
  background-size:cover;
  background-position:var(--vr-page-bg-pos, 50% 42%);
  background-repeat:no-repeat;
  opacity:var(--vr-page-bg-opacity, 0.30);
  pointer-events:none;
}
body.experience-open .experience-page.is-active::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    /* 上：見出しの背後をわずかに沈める */
    linear-gradient(180deg, rgba(12,9,7,0.62) 0%, rgba(12,9,7,0.18) 26%, rgba(12,9,7,0.00) 44%),
    /* 下：画像から本文・操作領域へ静かにつなぐ */
    linear-gradient(0deg,  rgba(12,9,7,0.92) 0%, rgba(12,9,7,0.72) 22%, rgba(12,9,7,0.10) 58%, rgba(12,9,7,0) 76%),
    /* 左右：店の奥の暗がりを残す（均一な黒板にはしない） */
    radial-gradient(130% 96% at 50% 40%, rgba(12,9,7,0) 40%, rgba(12,9,7,0.55) 100%);
}

/* 画面ごとの背景スロットと主役位置。画像未設定なら 1〜3 の層だけが効く。 */
body.experience-open #counter.is-active{
  --vr-page-bg:var(--vr-bg-counter, none);
  --vr-page-bg-pos:50% 38%;
  --vr-page-bg-opacity:0.34;
}
body.experience-open #desk.is-active{
  --vr-page-bg:var(--vr-bg-mana-desk, none);
  --vr-page-bg-pos:50% 42%;
  --vr-page-bg-opacity:0.28;
}
body.experience-open #desk.is-active.vr-editing{
  --vr-page-bg:var(--vr-bg-editing-room, none);
}
body.experience-open #bookshelf.is-active{
  --vr-page-bg:var(--vr-bg-bookshelf, var(--vr-bg-interior));
  --vr-page-bg-pos:50% 30%;
  --vr-page-bg-opacity:0.24;
}
body.experience-open #shelves.is-active{
  --vr-page-bg:var(--vr-bg-emotion-shelves, var(--vr-bg-interior));
  --vr-page-bg-pos:50% 46%;
  --vr-page-bg-opacity:0.20;
}

/* ---- VR1-4：文字組み。明朝の見出し／読みやすい本文／広げすぎない字間 ---- */
body.experience-open .section-head{
  display:block;
  text-align:center;
  margin:0 0 var(--vr-gap-s);
}
body.experience-open .section-head h2{
  font-family:var(--font-display);
  font-size:26px;
  font-weight:500;
  letter-spacing:.10em;
  line-height:1.5;
  color:var(--vr-text);
  margin:0;
  text-shadow:0 1px 10px rgba(12,9,7,0.75);
}
body.experience-open .section-head .page-label{
  display:block;
  font-family:var(--font-display);
  font-size:11px;
  letter-spacing:.26em;
  color:var(--vr-brass-lit);
  margin:0 0 var(--vr-gap-xs);
  opacity:.9;
}
body.experience-open .section-sub{
  margin:0 auto var(--vr-gap-l);
  max-width:34em;
  text-align:center;
  font-size:13.5px;
  line-height:1.95;
  letter-spacing:.03em;
  color:var(--vr-text-muted);
  text-shadow:0 1px 8px rgba(12,9,7,0.7);
}
body.experience-open .shelf-count{
  display:inline-block;
  margin:var(--vr-gap-xs) auto 0;
  background:transparent;
  border:1px solid var(--vr-rule);
  border-radius:0;
  color:var(--vr-text-muted);
  font-size:11px;
  letter-spacing:.08em;
  padding:2px 10px;
}
body.experience-open p,
body.experience-open li,
body.experience-open label,
body.experience-open summary{
  color:var(--vr-text-body);
}
body.experience-open .field-hint,
body.experience-open .swipe-hint,
body.experience-open .photo-hint,
body.experience-open .trend-note,
body.experience-open .writing-boat-note{
  color:var(--vr-text-faint);
  font-size:12px;
  line-height:1.85;
}

/* ---- VR1-5：操作要素。細い罫線の静かなボタン。発光・浮き上がりを使わない ---- */
body.experience-open .chart-btn,
body.experience-open .bind-btn,
body.experience-open .curate-btn,
body.experience-open .share-btn,
body.experience-open .back-to-bandai,
body.experience-open .exit-shop-btn,
body.experience-open .title-consult-btn,
body.experience-open .assist-link,
body.experience-open .photo-label,
body.experience-open .reset-link{
  border-radius:0;
  box-shadow:none;
  background:rgba(36,26,18,0.52);
  border:1px solid var(--vr-rule);
  color:var(--vr-text);
  font-weight:400;
  letter-spacing:.06em;
  transition:border-color .18s ease, background-color .18s ease, color .18s ease;
  min-height:44px;
}
body.experience-open .chart-btn:hover,
body.experience-open .bind-btn:hover,
body.experience-open .curate-btn:hover,
body.experience-open .share-btn:hover,
body.experience-open .back-to-bandai:hover,
body.experience-open .exit-shop-btn:hover,
body.experience-open .title-consult-btn:hover{
  /* 浮き上がり・発光は使わず、罫線と地の濃さだけを変える */
  transform:none;
  box-shadow:none;
  background:rgba(58,44,30,0.62);
  border-color:var(--vr-rule-strong);
  color:var(--vr-text);
}
/* 主操作：琥珀の枠を過剰反復させないため、主操作だけ紙色の面を持たせる */
body.experience-open .chart-btn.primary,
body.experience-open .bind-btn{
  background:linear-gradient(180deg, rgba(213,190,150,0.95), rgba(190,164,124,0.95));
  border-color:rgba(120,96,60,0.9);
  color:#241A12;
  font-weight:500;
}
body.experience-open .chart-btn.primary:hover,
body.experience-open .bind-btn:hover{
  background:linear-gradient(180deg, rgba(224,203,166,0.98), rgba(200,175,135,0.98));
  color:#1B140E;
}
/* 選択状態を色だけに頼らない（左の細い標＋文字濃度＋罫線） */
body.experience-open .chart-btn[aria-pressed="true"],
body.experience-open .chart-btn.selected,
body.experience-open .shelf-tab.active,
body.experience-open .shelf-tab[aria-selected="true"]{
  border-color:var(--vr-brass-lit);
  color:var(--vr-text);
  background:rgba(58,44,30,0.72);
  box-shadow:inset 3px 0 0 0 var(--vr-brass-lit);
}
body.experience-open .chart-btn[aria-pressed="true"]::after,
body.experience-open .shelf-tab.active::after,
body.experience-open .shelf-tab[aria-selected="true"]::after{
  content:"（選択中）";
  font-size:10.5px;
  letter-spacing:.06em;
  color:var(--vr-text-muted);
  margin-left:.5em;
}
html[lang="en"] body.experience-open .chart-btn[aria-pressed="true"]::after,
html[lang="en"] body.experience-open .shelf-tab.active::after,
html[lang="en"] body.experience-open .shelf-tab[aria-selected="true"]::after{
  content:" (selected)";
}
/* フォーカスは常に明確に。hoverだけで情報を伝えない */
body.experience-open :focus-visible{
  outline:2px solid var(--vr-brass-lit);
  outline-offset:2px;
}

/* ---- VR1-6：入力。チャット送信欄ではなく「一枚の紙」に近づける ---- */
body.experience-open textarea,
body.experience-open input[type="text"],
body.experience-open input[type="url"],
body.experience-open input:not([type]),
body.experience-open select{
  background:linear-gradient(180deg, #EFE5CE 0%, #E2D4B6 100%);
  color:#2B2118;
  border:1px solid rgba(120,96,60,0.55);
  border-radius:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.5), 0 10px 26px rgba(0,0,0,0.42);
  font-family:var(--font-body);
  line-height:2.0;
  caret-color:#6E2A34;
}
body.experience-open textarea::placeholder,
body.experience-open input::placeholder{
  color:rgba(70,58,42,0.62);
}
body.experience-open textarea:focus-visible,
body.experience-open input:focus-visible,
body.experience-open select:focus-visible{
  outline:2px solid var(--vr-brass-lit);
  outline-offset:2px;
  border-color:rgba(120,96,60,0.85);
}

/* ---- VR1-7：表紙（トップページ）。夜の入口。境界を越える一つの決断だけを置く ---- */
.entrance.hero{
  --vr-cover-slot:var(--vr-bg-cover, none);
}
/* ★RC1.2（P1-1）：既存Hero写真の復旧。<picture>のimgが何らかの理由で読めなかった場合でも
   （既存のonerrorが .hero-photo を display:none にするため）表紙が単色・グラデーションだけに
   ならないよう、同じ既存ローカルアセットをCSS背景としても敷く。
   これは写真の「置き換え」ではなく、同一写真の二重化である。新規画像・外部URL・
   画像生成は使用していない。imgが正常に読めた場合は同じ位置に同じ写真が重なるだけで、
   見た目は変わらない。 */
.entrance.hero{
  background-image:
    linear-gradient(180deg, rgba(11,18,28,0.22) 0%, rgba(11,18,28,0.30) 55%, rgba(11,18,28,0.46) 100%),
    url('assets/hero-bookstore-desktop.webp');
  background-size:cover, cover;
  background-position:50% 42%, 50% 42%;
  background-repeat:no-repeat, no-repeat;
}
/* モバイルでは既存のモバイル用アセットへ切り替える（<source media="(max-width:640px)"> と同条件） */
@media (max-width:640px){
  .entrance.hero{
    background-image:
      linear-gradient(180deg, rgba(11,18,28,0.22) 0%, rgba(11,18,28,0.30) 55%, rgba(11,18,28,0.46) 100%),
      url('assets/hero-bookstore-mobile.webp');
    background-position:52% 38%, 52% 38%;
  }
}
/* 既存Hero写真（店の入口・夜の路地）はそのまま主役に使う。差し込み写真に見せず、
   下端を地の暗さへ溶かす。画像読み込み失敗時は既存の夜空グラデーションだけが残る。 */
.entrance.hero .hero-photo::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  /* ★RC1.2（P1-1）：写真が見えなくなるほど暗くしないよう濃度を下げる。
     文字の可読性は、下部グラデーションと各要素側の背景で確保する。
       下部 0.96→0.88 / 途中 0.74→0.62 / 上部 0.42→0.32 / 周辺 0.50→0.38 */
  background:
    linear-gradient(0deg,  rgba(10,8,6,0.88) 0%, rgba(10,8,6,0.62) 18%, rgba(10,8,6,0.10) 48%, rgba(10,8,6,0) 66%),
    linear-gradient(180deg, rgba(10,8,6,0.32) 0%, rgba(10,8,6,0) 28%),
    radial-gradient(120% 92% at 62% 40%, rgba(10,8,6,0) 38%, rgba(10,8,6,0.38) 100%);
}
.entrance.hero .eyebrow{
  letter-spacing:.30em;
  font-size:10.5px;
  color:var(--vr-brass-lit);
  opacity:.88;
}
.entrance.hero h1{
  font-family:var(--font-display);
  font-weight:500;
  letter-spacing:.12em;
  color:var(--vr-text);
  text-shadow:0 2px 18px rgba(8,6,4,0.9), 0 0 2px rgba(8,6,4,0.8);
}
.entrance.hero .tagline,
.entrance.hero .sub-tagline{
  color:var(--vr-text-body);
  letter-spacing:.04em;
  text-shadow:0 1px 12px rgba(8,6,4,0.9);
}
.entrance.hero .sub-tagline{
  color:var(--vr-text-muted);
}
/* 主操作：押せば何が起きるかが分かる一つの操作だけを、静かな面として置く */
.entrance.hero .enter-btn{
  border-radius:0;
  background:linear-gradient(180deg, rgba(214,191,151,0.96), rgba(186,159,118,0.96));
  color:#211812;
  border:1px solid rgba(120,96,60,0.85);
  box-shadow:0 14px 34px rgba(0,0,0,0.5);
  letter-spacing:.14em;
  font-weight:500;
  min-height:52px;
  transition:background-color .18s ease, border-color .18s ease;
}
.entrance.hero .enter-btn:hover{
  transform:none;
  background:linear-gradient(180deg, rgba(228,207,170,0.99), rgba(200,174,133,0.99));
}
/* 安心表示は小さく、しかし入力前に必ず読める位置に残す */
.entrance.hero .trust-row .trust-badge{
  border-radius:0;
  background:rgba(20,16,11,0.55);
  border:1px solid var(--vr-rule-faint);
  color:var(--vr-text-muted);
  font-size:11px;
  letter-spacing:.05em;
}
.entrance.hero .first-visit-note{
  color:var(--vr-text-muted);
  font-size:12.5px;
  letter-spacing:.04em;
}
.entrance.hero .hero-seal{ opacity:.5; }
.entrance.hero .hero-lang-toggle,
.entrance.hero .cover-menu-btn{
  border-radius:0;
  background:rgba(16,12,9,0.62);
  border:1px solid var(--vr-rule-faint);
  color:var(--vr-text-body);
  box-shadow:none;
}

/* ---- VR1-8：番台。入口を入った直後。物の配置だけで店主の気配を出す ---- */
body.experience-open #counter .counter-wrap{
  background:transparent;
  border:0;
  border-radius:0;
  padding:0;
}
body.experience-open #counter .keeper-vignette{
  margin:0 auto var(--vr-gap-m);
  max-width:420px;
  opacity:.92;
}
/* 店主のことば：会話の吹き出しではなく、番台に置かれた一枚のメモ */
body.experience-open .counter-note{
  background:transparent;
  border:0;
  border-top:1px solid var(--vr-rule-faint);
  border-bottom:1px solid var(--vr-rule-faint);
  border-radius:0;
  padding:var(--vr-gap-m) var(--vr-gap-s);
  margin:0 auto var(--vr-gap-l);
  max-width:36em;
  text-align:center;
  box-shadow:none;
}
body.experience-open .counter-note-label{
  font-family:var(--font-display);
  font-size:10.5px;
  letter-spacing:.24em;
  color:var(--vr-brass-lit);
  margin:0 0 var(--vr-gap-xs);
  opacity:.85;
}
body.experience-open .counter-greeting{
  font-family:var(--font-display);
  font-size:15.5px;
  line-height:2.1;
  letter-spacing:.05em;
  color:var(--vr-text);
  margin:0;
}
/* 感情の選択肢：細い罫線の静かなボタン。強く塗りつぶさない */
body.experience-open .counter-shelf-groups{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  max-width:640px;
  margin:0 auto var(--vr-gap-m);
}
body.experience-open .counter-shelf-groups .chart-btn{
  flex:0 1 auto;
  min-width:150px;
  justify-content:center;
  text-align:center;
  font-size:14px;
  padding:12px 20px;
}
body.experience-open .counter-write-btn{
  display:block;
  margin:0 auto;
  min-width:210px;
  background:transparent;
  border-color:var(--vr-rule-faint);
  color:var(--vr-text-muted);
}
body.experience-open .keeper-bio{
  max-width:36em;
  margin:var(--vr-gap-m) auto 0;
  text-align:center;
}
body.experience-open .keeper-bio summary{
  color:var(--vr-text-faint);
  font-size:12px;
  letter-spacing:.08em;
}

/* ---- VR1-9：編纂机（#desk）＝「店主まなが預かる」区画 ＋「編纂室」区画 ------------
 *  8画面のうちモックアップ3・4に対応する2つの視覚状態を、既存の #desk コンテナ内の
 *  明確な区画として実装する。新しいURL・保存キー・データ構造・遷移は追加しない。
 * ------------------------------------------------------------------------- */
body.experience-open .desk-form{
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  padding:0;
  max-width:640px;
  margin:0 auto;
}
body.night.experience-open .desk-form{ background:transparent; }

/* 区画見出し（利用者から見て一つの場所として成立させるための静かな標） */
body.experience-open .vr-stage-label{
  font-family:var(--font-display);
  font-size:19px;
  font-weight:500;
  letter-spacing:.16em;
  color:var(--vr-text);
  text-align:center;
  margin:0 0 var(--vr-gap-xs);
  padding-top:var(--vr-gap-s);
  border-top:1px solid var(--vr-rule-faint);
}
body.experience-open .vr-stage-label.vr-stage-bind{
  margin-top:var(--vr-gap-xl);
}
/* ★Desk Flow Fix 1（2026-07-26）：「店主まなが預かる」直上の横線だけを撤去し、線の代わりに
   上余白を広げる。編纂室見出し（.vr-stage-bind）側の横線・余白は対象外のため変更しない。 */
body.experience-open .vr-stage-label:not(.vr-stage-bind){
  border-top:none;
  padding-top:0;
  margin-top:var(--vr-gap-s);
}
body.experience-open .vr-stage-lead{
  text-align:center;
  font-size:12.5px;
  letter-spacing:.05em;
  color:var(--vr-text-muted);
  margin:0 0 var(--vr-gap-m);
}
/* 「一行だけでも大丈夫」— 励ましを増やさず、一つだけ静かに置く */
body.experience-open .vr-gentle-note{
  font-size:12px;
  line-height:1.9;
  color:var(--vr-text-faint);
  letter-spacing:.03em;
  margin:var(--vr-gap-xs) 0 0;
  text-align:left;
}
/* 一枚の紙に書く行為へ近づける（送信欄には見せない） */
body.experience-open #storyInput{
  min-height:210px;
  padding:20px 18px;
  font-size:15.5px;
  background:
    repeating-linear-gradient(180deg, rgba(120,96,60,0.11) 0px, rgba(120,96,60,0.11) 1px, transparent 1px, transparent 32px),
    linear-gradient(180deg, #EFE5CE 0%, #E4D7BB 100%);
  background-position:0 30px, 0 0;
}
/* ★Desk Flow Fix 1（2026-07-26）：本文用紙（#storyInput）直下の横線を撤去し、
   線の代わりに上余白を広げて区切る。 */
body.experience-open .count-row{
  border-top:none;
  margin-top:var(--vr-gap-s);
  padding-top:var(--vr-gap-xs);
}
body.experience-open .story-count{
  color:var(--vr-text-faint);
  font-size:11.5px;
  letter-spacing:.05em;
}
body.experience-open .assist-link{
  background:transparent;
  border:0;
  border-bottom:1px solid var(--vr-rule);
  min-height:auto;
  padding:2px 0;
  color:var(--vr-text-muted);
  font-size:12px;
}
body.experience-open .writing-boat{
  background:transparent;
  border:1px solid var(--vr-rule-faint);
  border-radius:0;
  box-shadow:none;
  max-width:640px;
  margin:0 auto var(--vr-gap-m);
  padding:var(--vr-gap-s) var(--vr-gap-m);
}
body.experience-open .writing-boat-heading{
  font-family:var(--font-display);
  font-size:12px;
  letter-spacing:.18em;
  color:var(--vr-brass-lit);
}
/* 編纂室：題名相談・AI補助を主役のCTAにしない */
body.experience-open .desk-extra{
  background:transparent;
  border:0;
  border-radius:0;
  padding:0;
}
body.experience-open .desk-extra summary{
  background:transparent;
  border:0;
  border-bottom:1px solid var(--vr-rule-faint);
  border-radius:0;
  color:var(--vr-text-body);
  font-size:13px;
  letter-spacing:.06em;
  padding:10px 0;
}
body.experience-open .desk-extra summary::before{ color:var(--vr-brass); }
body.experience-open .title-consult-btn{
  background:transparent;
  border:1px solid var(--vr-rule-faint);
  color:var(--vr-text-muted);
  font-size:12.5px;
}
body.experience-open .desk-actions{
  flex-direction:column;
  align-items:stretch;
  gap:var(--vr-gap-xs);
  margin-top:var(--vr-gap-m);
}
body.experience-open .bind-btn{
  width:100%;
  min-height:52px;
  letter-spacing:.12em;
}
body.experience-open .photo-row{
  border-top:1px solid var(--vr-rule-faint);
  padding-top:var(--vr-gap-s);
  margin-top:var(--vr-gap-s);
}
body.experience-open .photo-label{
  background:transparent;
  border:1px solid var(--vr-rule-faint);
  color:var(--vr-text-muted);
  font-size:12.5px;
}
/* 進行表示：完了・現在・未完了を色だけに頼らず区別する（丸・罫線・文字濃度） */
body.experience-open .mitate-meter{
  background:transparent;
  border:0;
}
body.experience-open .mitate-meter-bar{
  background:rgba(200,170,120,0.12);
  border-radius:0;
  height:2px;
}
body.experience-open .mitate-meter-fill{
  background:var(--vr-brass-lit);
  border-radius:0;
}

/* ---- VR1-10：本棚。長く使われた木の棚。商品一覧・カードグリッドにしない ---- */
body.experience-open .wood-shelf{
  background:
    linear-gradient(180deg, rgba(12,9,7,0.45) 0%, rgba(12,9,7,0) 18%),
    linear-gradient(180deg, var(--vr-wood-lit) 0%, var(--vr-wood) 58%, var(--vr-wood-dark) 100%);
  border-radius:0;
  box-shadow:inset 0 1px 0 rgba(200,170,120,0.10), 0 22px 46px rgba(0,0,0,0.55);
  padding:34px 20px 0;
}
/* 棚の一部だけを照らす小さなランプ（点滅・脈動はしない静止光） */
body.experience-open .wood-shelf::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(64% 46% at 24% 6%, rgba(224,166,89,0.20) 0%, rgba(224,166,89,0) 72%);
}
body.experience-open .shelf-row{
  border-bottom:12px solid var(--vr-wood-dark);
  box-shadow:0 6px 14px rgba(0,0,0,0.55);
  align-items:flex-end;
  gap:5px;
}
/* 本は均等に並べすぎない：交互にごくわずかな高さ差をつける（移動アニメーションではない）。
   背表紙の実体は既存の .spine（JSが生成）であり、class名・生成処理は変更していない。 */
body.experience-open .shelf-row > .spine:nth-of-type(3n+1){ transform:translateY(-2px); }
body.experience-open .shelf-row > .spine:nth-of-type(4n+3){ transform:translateY(1px); }
/* 最新・選択中の本：発光・バッジではなく、数pxの移動と罫線と文字濃度で示す */
body.experience-open .shelf-row > .spine.new,
body.experience-open .shelf-row > .spine[aria-current]{
  transform:translateY(-5px);
  box-shadow:0 6px 14px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(200,170,120,0.5);
  filter:none;
}
/* 空の棚に置かれる幽霊の背表紙は、これから本が来る余白として静かに残す */
body.experience-open .shelf-row > .spine.empty-spine{
  opacity:.34;
  transform:none;
  box-shadow:none;
}
body.experience-open .shelf-month-heading{
  color:var(--vr-text-muted);
  font-size:11.5px;
  letter-spacing:.16em;
  border-bottom:1px solid var(--vr-rule-faint);
  padding-bottom:4px;
}
/* 空状態はエラーではなく、これから本が置かれる棚の余白として見せる */
body.experience-open .shelf-empty{
  color:var(--vr-text-faint);
  font-size:13px;
  line-height:2.1;
  letter-spacing:.05em;
  background:transparent;
  border:0;
  padding:52px 16px 60px;
  text-align:center;
}
/* 製本完了の合図：この体験で唯一の、短く抑制された一度限りの状態変化 */
body.experience-open .bookshelf-arrival{
  background:transparent;
  border:0;
  border-top:1px solid var(--vr-rule);
  border-radius:0;
  box-shadow:none;
  text-align:center;
  padding:var(--vr-gap-m) 0 0;
  margin-top:var(--vr-gap-m);
  animation:vrSettle 620ms ease-out both;
}
@keyframes vrSettle{
  from{ opacity:0; transform:translateY(6px); }
  to  { opacity:1; transform:none; }
}
body.experience-open .bookshelf-arrival-heading{
  font-family:var(--font-display);
  font-size:16px;
  letter-spacing:.12em;
  color:var(--vr-text);
  margin:0 0 var(--vr-gap-xs);
}
body.experience-open .bookshelf-arrival-afterglow{
  font-size:12.5px;
  color:var(--vr-text-muted);
  line-height:2;
  margin:0;
}
body.experience-open .shelf-admin{
  margin-top:var(--vr-gap-l);
  border-top:1px solid var(--vr-rule-faint);
  padding-top:var(--vr-gap-s);
}
body.experience-open .shelf-admin summary{
  color:var(--vr-text-faint);
  font-size:12px;
  letter-spacing:.10em;
}
body.experience-open .shelf-admin .share-btn,
body.experience-open .shelf-admin .reset-link{
  font-size:12.5px;
  background:transparent;
  color:var(--vr-text-muted);
}

/* ---- VR1-11：感情の棚（#shelves）。店のさらに奥へ続く細い通路 ---- */
body.experience-open #shelves .shelf-tabs{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  border:0;
  background:transparent;
  padding:0 0 var(--vr-gap-m);
}
body.experience-open #shelves .shelf-tab{
  border-radius:0;
  background:rgba(36,26,18,0.5);
  border:1px solid var(--vr-rule-faint);
  color:var(--vr-text-body);
  box-shadow:none;
  font-size:13px;
  letter-spacing:.05em;
  padding:11px 16px;
  min-height:44px;
  /* アイコンは使わず文字だけで意味が伝わる。派手な色分け・顔・絵文字は用いない */
}
body.experience-open #shelves .shelf-display{
  background:transparent;
  border:0;
  border-top:1px solid var(--vr-rule-faint);
  border-radius:0;
  padding-top:var(--vr-gap-m);
}
body.experience-open #shelves .swipe-hint{
  text-align:center;
  letter-spacing:.08em;
}

/* ---- VR1-12：今月の寄り道（#detourSection）。展示台に主役が一つだけ ---- */
body.experience-open .detour-section{
  background:transparent;
  border:0;
  border-top:1px solid var(--vr-rule-faint);
  border-radius:0;
  box-shadow:none;
  margin-top:var(--vr-gap-xl);
  padding:var(--vr-gap-l) 0 0;
  text-align:center;
  max-width:36em;
  margin-left:auto;
  margin-right:auto;
}
body.experience-open .detour-section h3,
body.experience-open .detour-section .detour-heading{
  font-family:var(--font-display);
  font-size:17px;
  font-weight:500;
  letter-spacing:.14em;
  color:var(--vr-text);
  margin:0 0 var(--vr-gap-xs);
}
body.experience-open .detour-half-note{
  color:var(--vr-text-faint);
  letter-spacing:.10em;
}
/* 外部リンクは、移動前に外部サイトであることが分かるようにする */
body.experience-open .detour-section a[target="_blank"]::after{
  content:"（外部サイトへ移動します）";
  display:block;
  font-size:10.5px;
  letter-spacing:.04em;
  color:var(--vr-text-faint);
  margin-top:2px;
}
html[lang="en"] body.experience-open .detour-section a[target="_blank"]::after{
  content:"(opens an external site)";
}
body.experience-open .detour-section a{
  color:var(--vr-text);
  text-decoration:none;
  border-bottom:1px solid var(--vr-rule);
  padding-bottom:2px;
}
/* コンテンツ未設定でも崩れないよう、空の展示台には最低限の余白だけを残す */
body.experience-open .detour-section:empty{
  border-top:0;
  padding:0;
  margin-top:0;
}
body.experience-open .fair{
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
}

/* ---- VR1-13：今日の栞（#shioriCard）。中央に一枚、周囲は暗く余白を十分に ---- */
body.experience-open #shioriCard{
  background:transparent;
  border:0;
  border-top:1px solid var(--vr-rule-faint);
  border-radius:0;
  box-shadow:none;
  text-align:center;
  max-width:34em;
  margin:var(--vr-gap-xl) auto 0;
  padding:var(--vr-gap-l) 0 0;
}
body.experience-open #shioriCard h3{
  font-family:var(--font-display);
  font-size:17px;
  font-weight:500;
  letter-spacing:.16em;
  color:var(--vr-text);
  margin:0 0 var(--vr-gap-xs);
}
/* 栞そのもの：縦長の一枚の紙。文章は画像へ焼き込まずHTMLで表示する */
body.experience-open .shiori-slip{
  display:block;
  position:relative;
  width:min(268px, 78%);
  margin:var(--vr-gap-m) auto;
  padding:38px 22px 30px;
  background:linear-gradient(180deg, var(--vr-paper) 0%, var(--vr-paper-2) 100%);
  color:#2B2118;
  border:0;
  border-radius:0;
  box-shadow:0 20px 40px rgba(0,0,0,0.6);
  font-family:var(--font-display);
  font-size:14px;
  line-height:2.3;
  letter-spacing:.05em;
  text-align:center;
}
/* 上部の小さな留め具（真鍮のくすみ。発光させない） */
body.experience-open .shiori-slip::before{
  content:"";
  position:absolute;
  top:14px; left:50%;
  width:9px; height:9px;
  margin-left:-4.5px;
  border:1px solid var(--vr-brass);
  background:var(--vr-wood-dark);
  border-radius:50%;
}
body.experience-open .shiori-label{
  display:block;
  font-size:10px;
  letter-spacing:.22em;
  color:#7A6A50;
  margin-bottom:var(--vr-gap-s);
}
body.experience-open #shioriCard .curate-btn{
  min-width:220px;
}

/* ---- VR1-14：店主まなが預かるカード（既存 .mana-receive-card）の静音化 ---- */
body.experience-open .mana-receive-card{
  border-radius:0;
  border:1px solid var(--vr-rule);
  background:rgba(20,16,11,0.96);
  color:var(--vr-text);
}
/* ★VisualRedesign RC1.1（P1修正）：C-03「人物や大きなキャラクター画像は使わない」に従い、
   店主まなの人物画像をVisual Redesign状態では表示しない。縮小・減光では要件を満たさない
   ため、非表示まで行う。
   既存の assets/mana-counter.webp は削除しない。main.js の画像生成処理・HTML・保存処理・
   画面遷移・コピー・他の意匠には一切変更を加えていない（本CSS1宣言のみ）。
   本の表紙プレビュー・店主の短い言葉・棚の選択・本棚へ戻る操作・フォーカス制御は
   すべてそのまま残る（.mana-receive-figure は装飾画像のみを含み、alt="" の img 1枚だけを
   子に持つため、非表示にしても支援技術から失われる情報はない）。 */
body.experience-open .mana-receive-figure{
  display:none;
}
body.experience-open .mana-receive-book{
  border-radius:0;
  background:linear-gradient(180deg, var(--vr-wood-lit), var(--vr-wood));
  color:var(--vr-paper);
  box-shadow:none;
  border:1px solid var(--vr-rule-faint);
}
body.experience-open .mana-receive-line{
  font-size:14px;
  color:var(--vr-text-body);
}

/* ---- VR1-15：ナビゲーション。8項目固定表示は実装しない -----------------------
 *  既存の体験バー（ブランド名＋店内メニュー）と、各頁末尾の .section-return を
 *  主導線とする。今日の栞・今月の寄り道・感情の棚は主導線と同じ強さで出さない。
 * ------------------------------------------------------------------------- */
body.experience-open .experience-bar{
  background:linear-gradient(180deg, rgba(12,9,7,0.97), rgba(12,9,7,0.86));
  border-bottom:1px solid var(--vr-rule-faint);
  backdrop-filter:none;
  padding:11px 16px;
}
body.night.experience-open .experience-bar{
  background:linear-gradient(180deg, rgba(12,9,7,0.97), rgba(12,9,7,0.86));
}
body.experience-open .experience-bar-brand{
  font-family:var(--font-display);
  font-size:13px;
  letter-spacing:.14em;
  color:var(--vr-text-body);
}
body.experience-open .shop-current-date{
  color:var(--vr-text-faint);
  font-size:11px;
  letter-spacing:.06em;
}
body.experience-open .experience-bar .menu-btn{
  border-radius:0;
  background:transparent;
  border:1px solid var(--vr-rule-faint);
  color:var(--vr-text-body);
  box-shadow:none;
  min-height:40px;
}
/* 戻る導線はメニューの奥へ隠さず、各頁の末尾に文字で常に置く */
body.experience-open .section-return{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  border-top:1px solid var(--vr-rule-faint);
  margin-top:var(--vr-gap-xl);
  padding-top:var(--vr-gap-m);
  background:transparent;
}
body.experience-open .section-return-prompt{
  flex-basis:100%;
  text-align:center;
  color:var(--vr-text-faint);
  font-size:12px;
  line-height:1.9;
}
body.experience-open .section-return-prompt strong{
  display:block;
  color:var(--vr-text-muted);
  font-weight:400;
  letter-spacing:.08em;
}
body.experience-open .back-to-bandai,
body.experience-open .exit-shop-btn{
  min-width:170px;
  font-size:13px;
  background:transparent;
  color:var(--vr-text-muted);
  border-color:var(--vr-rule-faint);
}

/* ---- VR1-16：レスポンシブ。8画面を一枚のコラージュに縮小せず、各頁を縦画面で ---- */
/* モバイル（390×844 / 430×932） */
@media (max-width:600px){
  body.experience-open .experience-page.is-active{
    padding-left:20px;
    padding-right:20px;
    padding-top:var(--vr-gap-m);
    padding-bottom:var(--vr-gap-xl);
  }
  body.experience-open .section-head h2{ font-size:22px; letter-spacing:.08em; }
  body.experience-open .section-sub{ font-size:12.5px; margin-bottom:var(--vr-gap-m); }
  body.experience-open .vr-stage-label{ font-size:17px; }
  /* 主役が切れないよう、頁ごとに背景の主役位置をモバイル用へ寄せる */
  body.experience-open #counter.is-active{ --vr-page-bg-pos:52% 30%; }
  body.experience-open #desk.is-active{ --vr-page-bg-pos:50% 34%; }
  body.experience-open #bookshelf.is-active{ --vr-page-bg-pos:44% 24%; }
  body.experience-open #shelves.is-active{ --vr-page-bg-pos:50% 40%; }
  body.experience-open .counter-shelf-groups .chart-btn{ min-width:0; width:100%; }
  body.experience-open .shiori-slip{ width:min(240px, 84%); }
  body.experience-open .wood-shelf{ padding:26px 12px 0; }
  body.experience-open .back-to-bandai,
  body.experience-open .exit-shop-btn{ min-width:0; flex:1 1 45%; }
  /* 表紙：扉・灯り・サービス名・主操作が一画面内で理解できる高さに収める */
  .entrance.hero h1{ font-size:clamp(30px, 9vw, 40px); }
  .entrance.hero .enter-btn{ width:min(320px, 86%); }
}
/* タブレット（768×1024） */
@media (min-width:601px) and (max-width:900px){
  body.experience-open .experience-page.is-active{
    max-width:600px;
    padding-left:28px;
    padding-right:28px;
  }
  body.experience-open #bookshelf.is-active{ --vr-page-bg-pos:50% 28%; }
}
/* デスクトップ（1440×1000）。空間に余裕がある場合だけ横並びを許す */
@media (min-width:1100px){
  body.experience-open .experience-page.is-active{
    max-width:820px;
    padding-top:var(--vr-gap-xl);
  }
  body.experience-open .section-head h2{ font-size:29px; }
  body.experience-open .counter-shelf-groups{ max-width:720px; }
  body.experience-open #shelves .shelf-tabs{ max-width:760px; margin:0 auto; }
}

/* ---- VR1-17：アクセシビリティと動きの抑制 ---- */
/* 装飾背景は支援技術から除外する（::before/::after のため元から読まれないが、
   既存の装飾要素にも明示しておく） */
body.experience-open .keeper-vignette,
body.experience-open .hero-weather-fx{
  pointer-events:none;
}
/* 淡い文字色でも必要なコントラストを確保するための下限 */
body.experience-open .field-hint,
body.experience-open .trend-note{
  color:var(--vr-text-faint);
}
@media (prefers-reduced-motion: reduce){
  body.experience-open .bookshelf-arrival{
    animation:none;
  }
  body.experience-open .shelf-row > .spine:nth-of-type(3n+1),
  body.experience-open .shelf-row > .spine:nth-of-type(4n+3),
  body.experience-open .shelf-row > .spine.new,
  body.experience-open .shelf-row > .spine[aria-current]{
    transform:none;
  }
  body.experience-open *,
  .entrance.hero *{
    transition-duration:.001ms !important;
  }
}
/* 自動再生動画・常時動く光は使用しない（新規追加なし） */

/* ============================================================================
 * ■ Visual Redesign RC1.2 — 実ブラウザPreviewで判明した視覚修正（P1×3 / P2×2）
 * ----------------------------------------------------------------------------
 * 適用範囲はCSSのみ。保存キー・保存形式・IndexedDB・バックアップ・主要画面遷移・
 * 推薦／音楽／短い物語・店主まなの人物画像非表示は一切変更していない。
 * 新規画像・新規外部通信・新機能・リファクタリングも行っていない。
 * ========================================================================= */

/* ---- P1-2：固定表示の丸い「書く」（#writeFab / .write-fab）を非表示にする ----
 *  実ブラウザで表紙・番台・感情の棚・編纂机・本棚のすべてに常時表示され、主CTAや
 *  各画面の既存導線と重複し、チャット／サポートボタンのように見えるため。
 *  JS（ensureWriteFab）・保存・遷移処理は変更していない。要素はDOMに残るが、
 *  Visual Redesign状態（JS初期化後＝body.experience-ready / body.experience-open）
 *  では描画もフォーカスもされない。JS初期化前の縦スクロール表示では従来どおり残る。
 *  残す導線：表紙「今の気持ちを書く」／番台から書く導線／編纂机の入力と製本／
 *            本棚「もう一冊つくる」／店内メニューからの移動。
 * ------------------------------------------------------------------------- */
body.experience-ready .write-fab,
body.experience-open  .write-fab{
  display:none;
}

/* ---- P1-3：小さい補助文字のコントラスト（トークンは VR1-1 で引き上げ済み） ----
 *  トークンを経由していなかった箇所を、ここで明示的に引き上げる。
 *  白へは寄せず、主要見出し（--vr-text）より弱い階層は維持する。
 * ------------------------------------------------------------------------- */
/* 表紙：安心表示・保存説明 */
.entrance.hero .trust-row .trust-badge{
  color:var(--vr-text-body);
  border-color:var(--vr-rule);
  background:rgba(16,12,9,0.62);
}
.entrance.hero .first-visit-note{
  color:var(--vr-text-muted);
}
.entrance.hero .sub-tagline{
  color:var(--vr-text-body);
}
.entrance.hero .eyebrow{
  color:#C79A5C;
  opacity:1;
}
/* ヘッダーの日付 */
body.experience-open .shop-current-date{
  color:var(--vr-text-muted);
}
/* section-sub / field-hint / photo-hint / 棚周辺の補助文 */
body.experience-open .section-sub{
  color:var(--vr-text-body);
}
body.experience-open .field-hint,
body.experience-open .photo-hint,
body.experience-open .swipe-hint,
body.experience-open .trend-note,
body.experience-open .writing-boat-note,
body.experience-open .vr-gentle-note,
body.experience-open .story-count,
body.experience-open .detour-half-note{
  color:var(--vr-text-muted);
}
/* 本棚の空状態 */
body.experience-open .shelf-empty{
  color:var(--vr-text-body);
}
/* 棚周辺の小見出し */
body.experience-open .shelf-month-heading,
body.experience-open .shelf-group-label,
body.experience-open .counter-note-label,
body.experience-open .writing-boat-heading,
body.experience-open .section-head .page-label{
  color:#C79A5C;
  opacity:1;
}
/* 折りたたみの見出し（本棚の管理・店主について・題名の任意設定） */
body.experience-open .shelf-admin summary,
body.experience-open .keeper-bio summary,
body.experience-open .desk-extra summary,
body.experience-open .trend-detail summary{
  color:var(--vr-text-body);
}
/* 「（選択中）」の併記も沈ませない */
body.experience-open .chart-btn[aria-pressed="true"]::after,
body.experience-open .shelf-tab.active::after,
body.experience-open .shelf-tab[aria-selected="true"]::after{
  color:var(--vr-text-body);
}
/* 外部リンクの事前明示 */
body.experience-open .detour-section a[target="_blank"]::after{
  color:var(--vr-text-muted);
}

/* ---- P2-1：感情の棚のデスクトップ配置を中央基準へ整える --------------------
 *  実画面でカテゴリ群が左へ寄り、右に大きな空白が出ていた。棚タブの実体は
 *  .shelf-tabs > .shelf-group > (.shelf-group-label + .shelf-group-row > .shelf-tab)
 *  であり、VR1では外側の .shelf-tabs だけを中央寄せしていたため、内側の行が
 *  左詰めのままだった。デスクトップ幅でのみ、内側も中央基準にする。
 *  モバイルの縦書き棚・横スクロール・スワイプ挙動には触れない。
 * ------------------------------------------------------------------------- */
@media (min-width:1100px){
  body.experience-open #shelves .shelf-tabs{
    align-items:center;
  }
  body.experience-open #shelves .shelf-group{
    width:100%;
    align-items:center;
  }
  body.experience-open #shelves .shelf-group-label{
    text-align:center;
    width:100%;
  }
  body.experience-open #shelves .shelf-group-row{
    justify-content:center;
    width:100%;
  }
  /* 番台の選択肢群も同じ基準で中央へ揃える */
  body.experience-open #counter .counter-shelf-groups{
    justify-content:center;
  }
}
/* タブレット幅でも右側だけが大きく空かないようにする */
@media (min-width:601px) and (max-width:1099px){
  body.experience-open #shelves .shelf-group-row{
    justify-content:center;
  }
}

/* ---- P2-2：製本後の通知を書店の配色へ合わせる ------------------------------
 *  .milestone-toast の背景が var(--wine)（#6E2A34）で、実画面ではピンク色に見え、
 *  木・紙・真鍮の配色から浮いていた。文言・表示時間・動作（.show の付け外し、
 *  transition、z-index、位置）は一切変更せず、色と角丸だけを差し替える。
 *  採用案：暗い木色の背景＋紙色文字。
 * ------------------------------------------------------------------------- */
body.experience-ready .milestone-toast,
body.experience-open  .milestone-toast{
  background:linear-gradient(180deg, var(--vr-wood) 0%, var(--vr-wood-dark) 100%);
  color:var(--vr-paper);
  border:1px solid var(--vr-rule);
  border-radius:2px;
  box-shadow:0 10px 26px rgba(0,0,0,0.55);
}
/* 穏やかな完了通知（.gentle-toast）も同じ棚の色に揃える（くすんだ紙色＋濃い茶） */
body.experience-ready .milestone-toast.gentle-toast,
body.experience-open  .milestone-toast.gentle-toast,
body.night.experience-open .milestone-toast.gentle-toast{
  background:linear-gradient(180deg, #D9C9A6 0%, #C3B291 100%);
  color:#2B2118;
  border:1px solid rgba(120,96,60,0.55);
  border-radius:2px;
  box-shadow:0 10px 26px rgba(0,0,0,0.5);
}

/* ============================================================================
 * ★編集室 Clarity Fix 1（2026-07-26）
 * 目的：編集室（#desk）ページで、(1) 何をする場所か迷わない (2) タイトル・本文を
 *       スルーしない (3) 項目が多く面倒そうに見えない、の3点を解消する。
 * 新しい外部通信・保存キー・データ構造・アニメーション・スクロール連動・進捗判定・
 * 新規アイコンライブラリ・Webフォントは追加していない。既存の色・余白・フォント変数のみ使用する。
 * ============================================================================ */

/* ---- 1. 見出し画像（机・原稿・灯り）。1枚のみ。object-fit:coverで横長比率を維持する。
 *        ★Final Clarity Fix：確実に表示させるため、aspect-ratio/object-fitはimg自体に
 *        指定する（960:420は16:7と同一比率）。display:none等の非表示状態は持たない。 ---- */
.desk-hero-image{
  position:relative;
  width:100%;
  max-width:600px;
  margin:var(--vr-gap-m) auto var(--vr-gap-s);
  overflow:hidden;
  border-radius:2px;
  background:var(--vr-night-1);
}
.desk-hero-image img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16/7;
  object-fit:cover;
}
/* 既存の暗い背景になじむ薄いグラデーションをCSSで重ねる（新規画像・JSは使わない） */
.desk-hero-image::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(12,9,7,0) 55%, var(--vr-night-1) 100%);
  pointer-events:none;
}
body.night .desk-hero-image{ background:var(--vr-night-0); }

/* ---- 2. 静的な3工程の道しるべ。進捗率・完了判定・スクロール追従・自動切替は実装しない。
 *        金色の細い線（border）だけで区切りを表現する（新規アイコン・SVGは使わない）。
 *        ★Final Clarity Fix：flexからgridへ変更し、3列を同じ幅・同じ高さに揃える
 *        （align-items:stretchで各列の罫線位置を統一。数字は表示しない）。 ---- */
.desk-steps-overview{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  align-items:stretch;
  list-style:none;
  max-width:600px;
  margin:0 auto var(--vr-gap-l);
  padding:0;
}
.desk-steps-overview li{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  word-break:keep-all;
  font-family:var(--font-display);
  font-size:13px;
  letter-spacing:.05em;
  color:var(--vr-text-muted);
  padding:0 6px var(--vr-gap-xs);
  border-bottom:1px solid var(--vr-rule);
}
.desk-steps-overview li + li{
  border-left:1px solid var(--vr-rule-faint);
}

/* ---- 3. 各工程（本の輪郭を決める／言葉を綴る／一冊にして預ける）の間隔。
 *        区切りは線ではなく余白で表現する（Desk Flow Fix 1と同じ方針を踏襲）。 ---- */
.desk-step-section + .desk-step-section{
  margin-top:var(--vr-gap-xl);
}
/* 3つの見出し（1/2/3）は、既存の「.vr-stage-label:not(.vr-stage-bind)」上書き
   （Desk Flow Fix 1）により、いずれも上罫線なし・上余白のみで統一される。 */

/* ---- 4. 本の輪郭を決める：タイトルを最も目立たせ、いつの気持ちかは控えめにする ---- */
.field-title-primary label{
  font-size:15px;
  font-weight:600;
  color:var(--vr-brass-lit);
  letter-spacing:.08em;
}
.field-title-primary input{
  font-size:17px;
  padding:12px 14px;
}
.field-subtle{
  opacity:.82;
}
.field-subtle label{
  font-size:11px;
}
.field-subtle select,
.field-subtle input{
  font-size:14px;
  padding:8px 10px;
}

/* ---- 5. 2 言葉を綴る：助け舟2つ（ヒント／説明）はネイティブdetails/summaryで初期状態は閉じる。
 *        既存の本文下#assistBtnはHTML側で削除済み。文字数表示（#storyCount）は残す。 ---- */
.boat-intro-heading{
  text-align:center;
  font-size:12.5px;
  letter-spacing:.05em;
  color:var(--vr-text-muted);
  margin:0 0 var(--vr-gap-xs);
}
.writing-boat details{
  border-top:1px solid var(--vr-rule-faint);
  padding-top:var(--vr-gap-xs);
  margin-top:var(--vr-gap-xs);
}
.writing-boat details:first-child{
  border-top:0;
  padding-top:0;
  margin-top:0;
}
.writing-boat summary{
  cursor:pointer;
  font-size:13px;
  letter-spacing:.03em;
  color:var(--vr-text-body);
  list-style:none;
}
.writing-boat summary::-webkit-details-marker{ display:none; }
.writing-boat summary::before{ content:"▸ "; color:var(--vr-brass); }
.writing-boat details[open] summary::before{ content:"▾ "; }
.writing-boat .boat-about summary{
  color:var(--vr-text-faint);
  font-size:12px;
}
.writing-boat .writing-boat-heading{ margin-top:var(--vr-gap-xs); }
.boat-about-body{
  font-size:12px;
  line-height:1.8;
  color:var(--vr-text-faint);
  margin:var(--vr-gap-xs) 0 0;
}
/* 「店主まなが預かる」：もはや区画見出しではなく、本文入力の直前に添える控えめな一言 */
.vr-stage-mana-inline{
  font-size:13px;
  letter-spacing:.05em;
  margin:var(--vr-gap-m) 0 2px;
}
.vr-stage-mana-inline-lead{
  font-size:11.5px;
  color:var(--vr-text-faint);
  margin:0 0 var(--vr-gap-xs);
}

/* ---- 6. 3 一冊にして預ける：Xの投稿欄は写真欄の直下、控えめな扱い。CTAの動作は変更していない。 ---- */
.desk-step-3 .field-subtle{
  margin-top:var(--vr-gap-s);
}

/* ---- モバイル：見出し画像で入力欄を過度に下へ押さない。横長比率は維持する。横スクロールは発生しない
 *        （幅は常に100%・max-width:600pxで、はみ出す固定pxを指定していない）。
 *        ★Final Clarity Fix：390/430pxで3列目が折り返さないよう、文字サイズは12px以上を維持する
 *        （指示書の目安12〜14pxに合わせる。旧10.5pxは下限を割っていたため引き上げ）。 ---- */
@media (max-width:480px){
  .desk-hero-image{
    margin:var(--vr-gap-s) auto var(--vr-gap-xs);
    border-radius:0;
  }
  .desk-steps-overview{
    margin-bottom:var(--vr-gap-m);
  }
  .desk-steps-overview li{
    font-size:12px;
    padding-bottom:6px;
  }
}

/* ============================================================================
 * ■ Visual Polish Fix 1 — 実機（iPhone Safari）で判明した2点の修正
 * ----------------------------------------------------------------------------
 * 保存キー・保存形式・IndexedDB・バックアップ・利用者本文・題名・写真・画面遷移・
 * 正規URL・表紙写真・店主まなの人物画像非表示・本棚／感情の棚／編纂机の構造・
 * 推薦／本／音楽・短い物語・今日の栞・今月の寄り道・GA4イベント・外部通信は
 * 一切変更していない。selectの選択肢・値・保存処理にも触れていない。
 * ========================================================================= */

/* ---- P1：「いつの気持ちですか」等のselect／inputの文字が読めない問題 --------
 *  原因：body.night は --ink を #EFE6D3（薄いクリーム）へ再定義しており、
 *        既存の
 *            body.night .field select, body.night .field input{ color:var(--ink); }
 *        （詳細度 0,2,2）が、Visual Redesignの
 *            body.experience-open select{ color:#2B2118; }
 *        （詳細度 0,1,2）より強い。結果として、Visual Redesignで紙色にした背景の上へ
 *        薄いクリーム文字が乗り、実機でほぼ読めない状態になっていた。
 *        対象は #whenSelect・#categorySelect と、同じ .field 配下の
 *        #titleInput・#tweetInput（同一ルールによる同一原因）。
 *  方針：詳細度で確実に上回る形で、紙面用の濃いインク色を指定し直す。
 *        iOS Safari は select / input の文字色を -webkit-text-fill-color で
 *        上書きすることがあるため、color と併記する。
 *        背景・角丸・枠線など既存の紙色の意匠は変更しない。
 * ------------------------------------------------------------------------- */
body.experience-open .field select,
body.experience-open .field input,
body.night.experience-open .field select,
body.night.experience-open .field input{
  /* 紙面用インク（既存 :root の --ink と同値。night で反転しない固定値にする） */
  color:#2B2118;
  -webkit-text-fill-color:#2B2118;
  opacity:1;
  font-size:16px; /* iOSのフォーカス時自動ズーム対策（既存方針を踏襲） */
  /* ★-webkit-appearance:none はあえて使わない。外観を消すと開閉の標（ネイティブの矢印）
     まで消え、選択欄として認識しにくくなる実機の指摘を悪化させるため。
     iOS Safariで問題になるのは文字色であり、-webkit-text-fill-color の併記で足りる。 */
}
/* 選択後の値・未選択時の表示値・プルダウン内の選択肢を、いずれも同じ濃さで描く */
body.experience-open .field select option,
body.night.experience-open .field select option,
body.experience-open .field select ~ option,
body.experience-open #whenSelect option,
body.experience-open #categorySelect option{
  color:#2B2118;
  -webkit-text-fill-color:#2B2118;
  background-color:#EFE5CE;
  opacity:1;
}
/* disabled／placeholder相当（棚選択の「棚を選んでください」など）も薄くしすぎない */
body.experience-open .field select option[disabled],
body.experience-open .field select option[value=""],
body.experience-open .field select:disabled,
body.experience-open .field input:disabled{
  color:#5A4B36;
  -webkit-text-fill-color:#5A4B36;
  opacity:1;
}
/* 選択欄であることが分かるよう、下辺の罫線を他の入力欄より一段はっきりさせる。
   ネイティブの開閉標（矢印）はそのまま残しているため、独自の矢印は描き足さない。 */
body.experience-open .field select{
  border-bottom:1px solid rgba(107,91,65,0.85);
  padding-right:8px;
}
/* フォーカスは色だけでなく輪郭でも分かるようにする（既存の focus-visible を明示） */
body.experience-open .field select:focus,
body.experience-open .field select:focus-visible,
body.experience-open .field input:focus,
body.experience-open .field input:focus-visible{
  outline:2px solid var(--vr-brass-lit);
  outline-offset:2px;
  color:#2B2118;
  -webkit-text-fill-color:#2B2118;
}
/* 見出しラベル（「いつの気持ちですか」）も、選択欄の見出しとして読める濃さにする */
body.experience-open .field label{
  color:var(--vr-text-body);
}

/* ---- P2：番台の静物（.keeper-vignette のインラインSVG）の見え方 ------------
 *  SVG本体は index.html 側で再構成した。ここでは配置と主張の強さだけを整える。
 *  見出しより主張させず、背景から浮かせず、モバイルで横幅からはみ出さない。
 * ------------------------------------------------------------------------- */
body.experience-open #counter .keeper-vignette{
  max-width:360px;
  margin:0 auto var(--vr-gap-m);
}
body.experience-open #counter .keeper-vignette svg{
  width:100%;
  max-width:100%;
  height:auto;
  display:block;
  opacity:.88; /* 見出しより前へ出さない */
}
@media (max-width:600px){
  body.experience-open #counter .keeper-vignette{
    max-width:300px;
  }
  body.experience-open #counter .keeper-vignette svg{
    width:100%;
    opacity:.84;
  }
}

/* ---- P1追加：製本後の「棚を選ぶ（任意）」select の可読性 ---------------------
 *  対象：製本完了直後に表示される棚選択モーダル
 *        #unfiledShelfPicker（.unfiled-shelf-picker.mana-receive-overlay）内の
 *        .mana-receive-card > select#unfiledShelfSelect
 *        （感情の棚ページの棚ボタン、編纂机の #whenSelect / #categorySelect とは別物）
 *  未選択時の表示文言：t('manaReceivePlaceholder')＝「棚を選んでください」
 *        （option value="" / selected / disabled）
 *  選択済みの値：CATEGORIES の c.id（21棚）
 *
 *  原因：カード自体が暗色（rgba(20,16,11,0.96)）である一方、
 *        既存の  body.night .mana-receive-card select{ background:rgba(0,0,0,0.25); }
 *        で背景がさらに暗くなり、そこへ紙面用の濃いインク色が乗っていたため、
 *        暗背景＋暗文字となって実機でほぼ読めなかった。
 *
 *  方針：優先案「暗い木色の背景＋紙色の文字＋真鍮色の罫線」で統一する。
 *        紙色背景＋白文字、暗背景＋暗文字のいずれにもしない。
 *        矢印はネイティブのまま残し、color-scheme:dark で暗背景向きに描かせる。
 *        選択肢・値・順序・製本処理・保存先・保存形式・モーダルの開閉と
 *        フォーカス制御・aria属性には一切触れない。
 * ------------------------------------------------------------------------- */
body.experience-open .mana-receive-card select,
body.night.experience-open .mana-receive-card select,
body.experience-open #unfiledShelfSelect,
body.night.experience-open #unfiledShelfSelect{
  background:linear-gradient(180deg, var(--vr-wood, #3A2C1E) 0%, var(--vr-wood-dark, #241A12) 100%);
  background-color:#2E2318;                 /* グラデーション非対応時の下地 */
  color:var(--vr-paper, #E7DBC1);
  -webkit-text-fill-color:#E7DBC1;          /* iOS Safariが黒や透明へ戻すのを防ぐ */
  opacity:1;
  border:1px solid var(--vr-brass, #8A6B37);
  border-radius:0;
  /* 暗い面であることをブラウザへ伝え、ネイティブの矢印とoption一覧を明色で描かせる */
  color-scheme:dark;
  font-size:16px;                           /* 極端に小さくしない／iOSの自動ズーム対策 */
  line-height:1.6;
  min-height:48px;                          /* 高さとタップ領域を縮めない */
  padding:12px 12px;
  width:100%;
  box-sizing:border-box;
}
/* 未選択（プレースホルダー）も、選択済みの棚名も、同じ紙色で読めるようにする。
   21棚すべてに同一の指定が当たる（個別の棚IDには一切依存しない）。 */
body.experience-open .mana-receive-card select option,
body.night.experience-open .mana-receive-card select option,
body.experience-open #unfiledShelfSelect option,
body.night.experience-open #unfiledShelfSelect option{
  background-color:#2E2318;
  color:#E7DBC1;
  -webkit-text-fill-color:#E7DBC1;
  opacity:1;
}
/* disabled のプレースホルダー（「棚を選んでください」）を消さず、薄くしすぎない */
body.experience-open .mana-receive-card select option[disabled],
body.experience-open .mana-receive-card select option[value=""],
body.experience-open #unfiledShelfSelect option[disabled],
body.experience-open #unfiledShelfSelect option[value=""]{
  color:#CBBFA6;
  -webkit-text-fill-color:#CBBFA6;
  opacity:1;
}
/* 選択欄の見出し（「棚を選ぶ（任意）」）も暗い面の上で読める濃さにする */
body.experience-open .mana-receive-card label{
  color:var(--vr-text-body, #DCD0B9);
}
/* フォーカスは色だけでなく輪郭でも分かるようにする */
body.experience-open .mana-receive-card select:focus,
body.experience-open .mana-receive-card select:focus-visible,
body.experience-open #unfiledShelfSelect:focus,
body.experience-open #unfiledShelfSelect:focus-visible{
  outline:2px solid var(--vr-brass-lit, #B08A4E);
  outline-offset:2px;
  border-color:var(--vr-brass-lit, #B08A4E);
  color:var(--vr-paper, #E7DBC1);
  -webkit-text-fill-color:#E7DBC1;
}

/* ---- P1追加：原稿用紙textareaの文字と横罫線の位置を揃える -------------------
 *  対象：利用者本文の入力欄 #storyInput（.desk-form > .field 直下）だけ。
 *        題名欄（#titleInput）、select、モーダル内本文、サンプル本には適用しない。
 *
 *  監査で判明した原因（行送りと罫線周期が3系統ばらばらだった）：
 *    (a) 既存 #storyInput：line-height:2 に対し、罫線の周期が 1.95em（0.05em ぶん短い）
 *    (b) Visual Redesign：font-size:15.5px × line-height:2.0 ＝ 行box 31px に対し、
 *        罫線の周期は 32px（1行あたり 1px ずつ累積してずれる）
 *    (c) さらに background-position:0 30px と padding-top:20px が一致しておらず、
 *        1行目から既に罫線へ乗っていなかった
 *    (d) @media (max-width:480px) が padding だけを 12px へ変えるため、
 *        モバイルでは罫線の位相がさらに動いていた
 *
 *  方針：行送りと罫線の周期を単一のカスタムプロパティ --vr-manuscript-line から
 *        参照する構造へ整理する。罫線は「1行ぶんの高さのタイルの最下部に1本」を
 *        繰り返す形にし、background-origin:content-box で内容領域の先頭から
 *        タイルを開始させる。これにより padding を変えても位相が動かず、
 *        行数が増えてもズレが累積しない。
 *
 *  採用値：--vr-manuscript-line:32px ／ font-size:16px ／ line-height:32px ／
 *          padding-top:16px ／ background-position-y:0（content-box基準）
 *          モバイルでも同じ値を使い、周期を変えない。
 *
 *  JavaScriptでの罫線生成・本文の複製・contenteditable化・canvas・外部ライブラリは
 *  使用していない。入力値・保存・IME・選択・コピーの挙動、700文字上限、文字数表示、
 *  下書き保存、タップ領域と高さには一切触れていない。
 *  IMEの変換下線（青い線）はOS側の描画であり、消す指定も入れていない。
 * ------------------------------------------------------------------------- */
body.experience-open #storyInput{
  /* 行送りと罫線周期の唯一の基準。以降はこの変数だけを参照する */
  --vr-manuscript-line:32px;

  font-family:var(--font-display);
  /* iOSのフォーカス時自動ズーム対策も兼ねて16px。32px ÷ 16px ＝ ちょうど2行分の余白 */
  font-size:16px;
  line-height:var(--vr-manuscript-line);

  /* 上下の余白は行送りの半分。文字が上下で切れず、日本語本文の余白も残る */
  padding:16px 18px;
  box-sizing:border-box;
  /* 6行ぶん＋上下padding（＝行送り1つぶん）。従来の210pxより小さくしない */
  min-height:calc(var(--vr-manuscript-line) * 7);

  /* 罫線：1行ぶんの高さのタイルの最下部に1本。紙：全面に1枚。 */
  background-image:
    linear-gradient(to bottom,
      rgba(120,96,60,0)    0,
      rgba(120,96,60,0)    calc(var(--vr-manuscript-line) - 1px),
      rgba(120,96,60,0.16) calc(var(--vr-manuscript-line) - 1px),
      rgba(120,96,60,0.16) var(--vr-manuscript-line)),
    linear-gradient(180deg, #EFE5CE 0%, #E4D7BB 100%);
  background-size:100% var(--vr-manuscript-line), 100% 100%;
  background-repeat:repeat-y, no-repeat;
  /* content-box基準にすることで、paddingを変えても罫線の位相が動かない */
  background-origin:content-box, padding-box;
  background-clip:padding-box, padding-box;
  background-position:0 0, 0 0;
  background-attachment:local, local; /* スクロールしても文字と罫線が一緒に動く */
}
/* モバイルでも周期は変えない。左右の余白だけを詰め、上下と罫線の関係は維持する。
   （既存の @media (max-width:480px){ #storyInput{ padding:12px 14px; } } が
     上下paddingを変えても、background-origin:content-box のため位相は動かないが、
     文字の切れを防ぐため上下は16pxのまま明示しておく。） */
@media (max-width:600px){
  body.experience-open #storyInput{
    padding:16px 14px;
    min-height:calc(var(--vr-manuscript-line) * 7);
  }
}

/* ---- P2追加：表紙の丸い書店ロゴ（蔵書印）を非表示にする ---------------------
 *  対象：<div class="hero-seal" aria-hidden="true"> 内の assets/shop-seal.png
 *        （index.html 291行付近。表紙 .entrance.hero の最下部・中央に絶対配置）
 *        言語切替（.hero-lang-toggle）、店内メニュー（.cover-menu-btn）、店名（h1）、
 *        主CTA（.enter-btn）、安心表示（.trust-row / .first-visit-note）とは別要素。
 *  既存CSS：body .entrance.hero > .hero-seal（5148行）で width/height 112px・
 *        bottom 28px の円形。480px以下では80px。
 *        その分の場所を .entrance.hero{ padding-bottom:150px }（480px以下は112px）が
 *        確保しているため、ロゴだけ消すと下部へ大きな空白が残る。
 *  方針：Visual Redesign状態（JS初期化後 ＝ body.experience-ready）の表紙でのみ非表示にし、
 *        同時に確保していた下部余白を詰める。DOMと assets/shop-seal.png は削除しない。
 *        再表示は本ブロックの display 宣言を外すだけでよい。
 *        他画面での同アセットの利用、OGP、manifest、アプリアイコンには触れていない。
 * ------------------------------------------------------------------------- */
body.experience-ready .entrance.hero > .hero-seal{
  display:none;
}
/* ロゴのために確保していた下部余白を詰める。ただしCTA周辺を上へ詰めすぎず、
   「書いた言葉は、この端末にだけ残ります。」から下部の書店説明へ自然につなぐ。 */
body.experience-ready .entrance.hero{
  padding-bottom:76px;
}
body.experience-ready .entrance.hero .first-visit-note{
  margin-bottom:0;
}
@media (max-width:480px){
  body.experience-ready .entrance.hero{
    padding-bottom:58px;
  }
}

/* ============================================================================
 * ★Release Final UI Fix（2026-07-26）
 * 目的：
 *  (1) 感情の棚「この気持ちを手放す」ボタンの直後に残っていた波線（旧
 *      .recommend-sectionのborder-top。Zone B刷新（後発ルール）がborder-topを
 *      上書きしていなかったため、実運用のbody.experience-open配下でも表示され、
 *      ボタンと重なって見えていた）を消し、ボタンとの間隔を空ける。
 *  (2) 「今月の寄り道」見出し・半月ラベルを中央寄せし、PR/広告リンク表記を
 *      見出しの下に独立した行として配置する（文言・リンク先・rel属性・
 *      デシル抽選ロジックは変更していない）。
 *  (3) 編集室：見出し画像・3工程道しるべの最大幅を.desk-form（640px）に揃え、
 *      3工程を実際に押せるリンクにしたことに伴うタップ領域・フォーカス表示、
 *      および完成した本の見本（details、閲覧専用）の静的スタイルを追加する。
 * 新しい外部通信・保存キー・データ構造・アニメーション・JSロジックの追加は
 * 行っていない（本ブロックはCSSのみ）。
 * ============================================================================ */

/* ---- (1) 「この気持ちを手放す」直後の波線を消し、間隔を空ける ---- */
body.experience-open .purify-trigger{
  margin-bottom:18px;
}
body.experience-open .recommend-section{
  border-top:none;
}

/* ---- (2) 今月の寄り道：見出し・半月ラベルを中央寄せ、PR表記を独立した行にする ---- */
body.experience-open .detour-section .detour-heading{
  text-align:center;
}
body.experience-open .detour-half-note{
  display:inline-block;
  text-align:center;
}
body.experience-open .detour-pr{
  display:block;
  text-align:center;
  margin:4px 0 0;
}

/* ---- (3-a) 編集室：見出し画像・3工程の最大幅を.desk-form（640px）に揃える ---- */
.desk-hero-image,
.desk-steps-overview{
  max-width:640px;
}

/* ---- (3-b) 3工程の道しるべを実際のリンクにしたことに伴うタップ領域・フォーカス表示 ---- */
.desk-steps-overview li{
  padding:0;
}
.desk-steps-overview li a{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:44px;
  padding:0 6px var(--vr-gap-xs, 8px);
  color:inherit;
  text-decoration:none;
}
.desk-steps-overview li a:focus-visible{
  outline:2px solid var(--vr-brass);
  outline-offset:2px;
  border-radius:2px;
}
.desk-step-section{
  scroll-margin-top:16px;
}

/* ---- (3-c) 完成した本の見本（details、既定は閉じている・閲覧専用） ---- */
.desk-sample-intro{
  text-align:center;
  font-size:12.5px;
  letter-spacing:.05em;
  color:var(--vr-text-muted);
  margin:0 0 var(--vr-gap-xs, 6px);
}
.desk-sample-details{
  max-width:640px;
  margin:0 auto var(--vr-gap-l, 20px);
  border:1px solid var(--vr-rule-faint);
  border-radius:2px;
  padding:2px 14px;
}
.desk-sample-details summary{
  cursor:pointer;
  list-style:none;
  font-size:13px;
  letter-spacing:.03em;
  color:var(--vr-text-body);
  padding:10px 0;
  text-align:center;
}
.desk-sample-details summary::-webkit-details-marker{ display:none; }
.desk-sample-details summary::before{ content:"▸ "; color:var(--vr-brass); }
.desk-sample-details[open] summary::before{ content:"▾ "; }
.desk-sample-book{
  padding:2px 0 14px;
  border-top:1px solid var(--vr-rule-faint);
  margin-top:2px;
}
.desk-sample-cat{
  font-size:11.5px;
  color:var(--vr-text-faint);
  margin:10px 0 2px;
}
.desk-sample-title{
  font-family:var(--font-display);
  font-size:15.5px;
  color:var(--vr-brass-lit, var(--vr-text));
  margin:0 0 2px;
}
.desk-sample-date{
  font-size:11px;
  color:var(--vr-text-faint);
  margin:0 0 10px;
}
.desk-sample-story{
  font-size:13px;
  line-height:1.85;
  color:var(--vr-text-body);
  margin:0;
}
@media (max-width:480px){
  .desk-sample-details{ padding:2px 10px; }
}