/*
 * ひらづみ書店（/hirazumiya/）— issue #123
 *
 * #app は body 直下の全面の器。平台（#table）は画面の上端から敷き、本がヘッダーの下を通るようにする
 * （下を何かが通らないと、すりガラスのヘッダーが地の色を透かすだけで半透明に見えない。CLAUDE.md）。
 * 平台は栗の板目の壁紙（#wall、img/table-kuri.jpg。差し替えるときはファイル名を変える。本番は画像を 1 年キャッシュする）。
 * 平台に本の表紙を散りばめ、押すと手元に立体の本として持ち上がる。手元の本を傾けると
 * 小口（.fore）と天地（.head / .tail）が見え、その幅がページ数で変わる。背（.spine）は無地。
 * 裏返すと裏表紙（.back）に題・紹介・値段・バーコードが刷ってある。
 * 表紙の画像は楽天の画像をそのまま使う（加工しない）。
 */

:root {
  --table: #3d3a36;
  --table-light: #4a4641;
  --ink: #f4efe6;
  --ink-light: #c9bfb0;
  --paper: #fffdf8;
  --accent: #c7743e;
  --page: #f3eee2;
  --page-line: #ddd4c2;
}

/* html・body の高さは共通 CSS に任せる（ホーム画面から開いたときの時計・電池の帯のぶんを足してある）。
   ここで height: 100% や 100dvh にすると、帯のぶん足りずに画面の下に白い帯が残る */
body { overflow: hidden; overscroll-behavior: none; }

#app {
  position: relative;
  height: 100%;
  padding-top: var(--navbar-h, 72px);
  box-sizing: border-box;
  overflow: hidden;
  background: var(--table);
}

/* 平台。画面の上端から（ヘッダーの下にも本が通る） */
#table {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  background: var(--table);
}

/* 栗の板目の壁紙（img/table-kuri.jpg）。本と一緒に動き、寄り・引きは本より緩い（app.js の applyWall）。
   大きさ・transform は app.js が入れる。background-position を毎フレーム変えると平台を丸ごと描き直すので、
   壁紙は 1 枚の層にして transform だけで動かす */
#wall {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  will-change: transform;
  pointer-events: none;
  background: url('img/table-kuri.jpg') 0 0 / var(--wall-w, 400px) auto repeat;
}

#world {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  will-change: transform;
  /* 指は平台（#table）が受ける。本の要素は画面の近くだけ置き、ドラッグ中に外すことがある。
     触っている要素を外すと iPhone は指を離したことを伝えなくなり、次に触った 1 本指がズームになっていた */
  pointer-events: none;
}
/* 並べ直すときの残像。前の塊を移して散らし、すぐ外す（app.js の scatterOld）。#world の下に重ねる */
.ghost {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  pointer-events: none;
}
/* 描く単位の塊。画面の近くにあるものだけ置く（app.js の updateLive）。中身は塊の左上からの相対 */
.chunk {
  position: absolute;
  width: 0;
  height: 0;
}
/* 名前順のときに平台に置くもの（いまは著者名のカードだけ。app.js の placeSorted） */
.zone { position: absolute; border-radius: 6px; }
/* 著者名のラベル。著者で並べたとき、各著者の本の先頭の区画（いちばん大きい本と同じ広さ）を空け、
   その真ん中に Yusei Magic の横書きの小さなラベルを少し傾けて置く。選んだ著者のラベルも見た目は同じで、本と一緒に揺れる。
   大きさは world の mm（寄ると大きくなる） */
.zone.name-card {
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.zone.name-card .label {
  display: block;
  max-width: 78%;
  padding: 0.45em 0.7em 0.5em;
  font-family: 'Yusei Magic', 'Zen Maru Gothic', sans-serif;
  line-height: 1.25;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #3a2c20;
  background: #fffaf0;
  border-radius: 3px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 5px 10px rgba(0, 0, 0, 0.3);
}
.zone.name-card .label > span { display: block; overflow: hidden; text-overflow: ellipsis; }
/* 名前順のとき、選んだ著者・出版社の本と著者名のラベルだけ左右にゆらゆら揺らす。
   位置は translate プロパティ（app.js の styleBook）が持ち、揺れは rotate プロパティで足す。rotate は translate より
   先にかかるので、本の真ん中を中心に回る。rotate は transform と同じく合成だけで動き、描き直しは起きない。揺らすのは置いてある塊の中の本だけ
   （画面から離れた塊は外れている）。ラベルの傾き（inline の transform）は rotate のあとにかかるので、傾いたまま揺れる。
   拍子は app.js が 1 冊ずつ animation-delay でずらす。
   手元に本を持っているあいだは止める（後ろのすりガラスが、揺れのたびに作り直しになるため） */
.book.z-focus,
.zone.name-card.focus .label { animation: sway 2.6s ease-in-out infinite; }
@keyframes sway {
  0%, 100% { rotate: -4deg; }
  50% { rotate: 4deg; }
}
#app:has(#hand.on) :is(.book.z-focus, .zone.name-card.focus .label) { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .book.z-focus,
  .zone.name-card.focus .label { animation: none; }
}

/* 平台の本: 表紙の画像そのもの。幅と高さは app.js が判型と画像の比率から入れる（区画に収める） */
.book {
  position: absolute;
  left: 0;
  top: 0;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.35), 0 6px 12px rgba(0, 0, 0, 0.35);
  border-radius: 5px; /* 角を少し丸く（world の mm。寄ると一緒に大きくなる） */
  background: #e8e2d6;
}
.book img {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-user-drag: none;
  border-radius: inherit;
}
.book.away { visibility: hidden; }
/* マーク = 本の右上に貼った長方形の付箋。半分が本の上の縁からはみ出す（手元の本も同じ）。
   大きさは本の幅に対する割合（padding-top の % は幅が基準）。マーク = 黄色、済み = 緑にチェック */
.mark {
  position: absolute;
  top: 0;
  right: 10%;
  width: 15%;
  padding-top: 22%;
  transform: translateY(-50%);
  background: linear-gradient(#f6c54e, #efb63a);
  border-radius: 1.5px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}
.mark.check { background: linear-gradient(#78b585, #5f9f6d); }
.mark.check::after {
  content: '';
  position: absolute;
  left: 12%;
  right: 12%;
  top: 6%;
  height: 40%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* 手元では付箋のはみ出した部分も指を受ける（本の枠の外なので、受けないと後ろの暗幕に当たって本が戻ってしまう） */
.face.front .mark { pointer-events: auto; animation: mark-pop 0.25s ease-out; }
@keyframes mark-pop { from { transform: translateY(-50%) scale(1.3); } to { transform: translateY(-50%); } }
/* 表紙を長押ししているあいだ、付箋のあたり（右上）からじわっと明るくなる */
.face.front::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 82% 8%, rgba(255, 253, 248, 0.6), rgba(255, 253, 248, 0.15) 70%);
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
}
.face.front.mark-pressing::after { opacity: 1; transition: opacity 0.45s linear; }
.book.pressed { box-shadow: 0 1px 1px rgba(0, 0, 0, 0.35), 0 14px 24px rgba(0, 0, 0, 0.45); }

/* 画面の下の帯（並べ直す・名前順の著者・出版社・冊数）。真ん中にそろえる */
#toolbar {
  position: absolute;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  left: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  pointer-events: none;
}
#toolbar > * { pointer-events: auto; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: none;
  border-radius: 999px;
  padding: 6px 12px;
  background: rgba(255, 253, 248, 0.92);
  color: #3d3a36;
  font: inherit;
  font-size: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.chip .material-symbols-outlined { font-size: 16px; }
.chip.icon { padding: 6px 8px; }
a.chip { text-decoration: none; }
.chip.danger { color: #a33a2a; }
/* 共有を消す（管理者だけ、共有ページ）。右上の ⚙ の下 */
#btnDelShare { position: absolute; top: calc(var(--navbar-h, 72px) + 50px); right: 10px; }
/* 自動収集の設定（管理者だけ）。右上 */
#btnAdmin { position: absolute; top: calc(var(--navbar-h, 72px) + 10px); right: 10px; }
.count { font-size: 11px; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); pointer-events: none; }
.chip { white-space: nowrap; flex-shrink: 0; }
/* 下の帯の押しもの（並べ直す・オートフライト・本棚・平台へ）。半透明の丸いボタン。
   下を本が流れていく（オートフライト）ので、すりガラス（backdrop-filter）にはしない（流れるたびに作り直しになる） */
.round {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  background: rgba(255, 253, 248, 0.58);
  color: #3d3a36;
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.2s, color 0.2s, transform 0.15s;
}
.round .material-symbols-outlined { font-size: 22px; }
.round:active { transform: scale(0.92); }
/* オートフライト中は灯す。飛行機は流れる向きと逆（右上）へ傾ける */
#btnFlight .material-symbols-outlined { rotate: 70deg; transition: rotate 0.3s; }
#btnFlight.on { background: rgba(199, 116, 62, 0.85); border-color: rgba(255, 236, 210, 0.7); color: #fff; }
.chip.filter { flex-shrink: 1; min-width: 0; max-width: 62%; background: var(--accent); color: #fff; }
.chip.filter .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 手に取った本の下のタグ（著者・出版社） */
#heldTags {
  position: absolute;
  left: 16px;
  right: 16px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  max-height: 72px;
  overflow: hidden;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
}
#hand.lifted #heldTags { opacity: 1; transform: none; pointer-events: auto; }
.tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  max-width: 100%;
  border: none;
  border-radius: 999px;
  padding: 6px 12px;
  background: rgba(255, 253, 248, 0.92);
  color: #3d3a36;
  font: inherit;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.tag .material-symbols-outlined { font-size: 15px; color: #8a7d6c; }
/* 管理者だけのブロック（issue #125） */
.tag.block { color: #a33a2a; }
.tag.block .material-symbols-outlined { color: #a33a2a; }

#hint {
  position: absolute;
  left: 50%;
  bottom: calc(66px + env(safe-area-inset-bottom, 0px)); /* 下の帯（#toolbar）の上 */
  transform: translateX(-50%);
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 12px;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity 0.6s;
}

/* ---------------------------------------------------------------
 * 手元（立体の本）
 * --------------------------------------------------------------- */
#hand { position: fixed; inset: 0; z-index: 50; display: none; }
#hand.on { display: block; }
#handBackdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 18, 16, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.35s;
}
#hand.lifted #handBackdrop { opacity: 1; }

#held {
  /* 長押しで iPhone の拡大鏡や共有の吹き出しが出ないように */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  position: absolute;
  left: 0;
  top: 0;
  perspective: 1100px;
  touch-action: none;
  will-change: transform;
}
#book3d {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  will-change: transform;
}
/* 面はすべて本の中心に置き、向きと距離で箱を組む（寸法は app.js が --w --h --t で入れる） */
.face {
  position: absolute;
  left: 0;
  top: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.face.front {
  width: var(--w); height: var(--h);
  margin: calc(var(--h) / -2) 0 0 calc(var(--w) / -2);
  transform: translateZ(calc(var(--t) / 2));
  box-shadow: var(--held-shadow, 0 30px 60px rgba(0, 0, 0, 0.5));
  background: #e8e2d6;
  border-radius: 6px;
  /* 付箋が上へはみ出せるよう、切り取りはしない（画像のほうを丸める） */
}
.face.front img { display: block; width: 100%; height: 100%; object-fit: fill; pointer-events: none; -webkit-user-drag: none; border-radius: inherit; }
.face.back {
  width: var(--w); height: var(--h);
  margin: calc(var(--h) / -2) 0 0 calc(var(--w) / -2);
  transform: rotateY(180deg) translateZ(calc(var(--t) / 2));
  box-shadow: var(--held-shadow, 0 30px 60px rgba(0, 0, 0, 0.5));
  border-radius: 6px;
  box-sizing: border-box;
  /* #book3d は幅 0 なので % は使えない。本の幅から取る */
  padding: calc(var(--w) * 0.07) calc(var(--w) * 0.08) calc(var(--w) * 0.05);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.06) 0, transparent 6px),
    #f7f2e8;
  color: #3a332b;
  font-size: 11px;
  line-height: 1.55;
}
/* 裏から見える付箋。裏表紙と同じ面に置き、上の縁より上（はみ出した部分）だけを描く。
   表の付箋は右から 10% の位置なので、裏から見ると左から 10%。紙の裏なのでチェックは描かない */
.face.back-tab {
  width: var(--w); height: var(--h);
  margin: calc(var(--h) / -2) 0 0 calc(var(--w) / -2);
  transform: rotateY(180deg) translateZ(calc(var(--t) / 2));
  pointer-events: none;
}
.mark-back {
  position: absolute;
  top: 0;
  left: 10%;
  width: 15%;
  padding-top: 11%;
  transform: translateY(-100%);
  background: linear-gradient(#f0bd47, #f6c54e);
  border-radius: 1.5px 1.5px 0 0;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.25);
}
.mark-back.check { background: linear-gradient(#5f9f6d, #78b585); }

/* 小口（左の側面）: ページの束の細い筋。背は右（縦書きの右綴じの本の向き） */
.face.fore {
  width: var(--t); height: calc(var(--h) - 4px);
  margin: calc((var(--h) - 4px) / -2) 0 0 calc(var(--t) / -2);
  transform: rotateY(-90deg) translateZ(calc(var(--w) / 2 - 1px));
  background: repeating-linear-gradient(90deg, var(--page) 0 1px, var(--page-line) 1px 1.6px);
}
/* 背（右の側面）: 背表紙は作らないので無地。淡い生成り色 */
.face.spine {
  width: var(--t); height: var(--h);
  margin: calc(var(--h) / -2) 0 0 calc(var(--t) / -2);
  transform: rotateY(90deg) translateZ(calc(var(--w) / 2));
  background: linear-gradient(90deg, #ddd2c0, #ebe3d6 50%, #ddd2c0);
}
/* 天・地（上下の面）: ページの束 */
.face.head, .face.tail {
  width: calc(var(--w) - 3px); height: var(--t);
  margin: calc(var(--t) / -2) 0 0 calc((var(--w) - 3px) / -2);
  background: repeating-linear-gradient(0deg, var(--page) 0 1px, var(--page-line) 1px 1.6px);
}
.face.head { transform: translateX(-1px) rotateX(90deg) translateZ(calc(var(--h) / 2 - 2px)); }
.face.tail { transform: translateX(-1px) rotateX(-90deg) translateZ(calc(var(--h) / 2 - 2px)); }

/* 裏表紙の中身（app.js の infoHtml） */
.back .bk-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.back .title { font-weight: 700; font-size: 14px; line-height: 1.35; }
.back .sub { color: #8a7d6c; font-size: 10px; }
.back .meta { margin-top: 2px; font-size: 10px; color: #6b6052; }
.back .volume { margin-top: 2px; font-size: 10px; color: #6b6052; }
.back .caption {
  flex: 1;
  min-height: 0;
  margin-top: 8px;
  overflow-y: auto;
  /* 送るのは app.js（指の動きを本の操作と分け合うため、ブラウザのスクロールには任せない） */
  touch-action: none;
  font-size: 11px;
  color: #4a4239;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 18px), transparent);
  mask-image: linear-gradient(#000 calc(100% - 18px), transparent);
}
.back .links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.back a.btn { -webkit-user-drag: none; -webkit-touch-callout: none; padding: 6px 10px; border-radius: 999px; text-decoration: none; font-size: 11px; background: #ebe3d5; color: #3a332b; }
.back a.btn.buy { background: var(--accent); color: #fff; }
.back .bk-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: 8px; padding-top: 6px; border-top: 1px solid #e6dccb; }
.back .code { background: #fff; padding: 3px 4px 1px; }
.back .barcode { display: block; width: 84px; height: 26px; fill: #222; }
.back .isbn { font-size: 8px; letter-spacing: 0.04em; text-align: center; color: #222; }
.back .price { font-size: 13px; font-weight: 700; white-space: nowrap; }
.back .price small { font-size: 9px; font-weight: 400; }
.back .note { margin-top: 4px; font-size: 8px; line-height: 1.4; color: #9a8e7e; }

/* 自動収集（管理） */
.sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: calc(var(--navbar-h, 72px) + 20px);
  z-index: 60;
  background: var(--paper);
  color: #3a332b;
  border-radius: 16px 16px 0 0;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
}
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid #eee5d8; }
.icon-btn { border: none; background: none; color: #8a7d6c; }
.sheet-body { overflow-y: auto; padding: 10px 14px calc(20px + env(safe-area-inset-bottom, 0px)); font-size: 13px; }
.sheet-body .row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 8px 0; }
.sheet-body .row input[type="number"] { width: 72px; max-width: 72px; flex: none; font: inherit; font-size: 16px; padding: 4px 6px; border: 1px solid #e3d8c6; border-radius: 6px; }
.sheet-body .stat { font-size: 12px; color: #8a7d6c; }
.sheet-body .g { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid #f3ece1; font-size: 12px; }
.sheet-body .g .k { flex: 1; min-width: 0; }
.sheet-body .g .thumb { width: 28px; height: 40px; object-fit: cover; border-radius: 2px; flex: none; }
.sheet-body .sec { margin: 18px 0 4px; font-size: 13px; }
.sheet-body .g .k small { display: block; color: #8a7d6c; font-size: 11px; }
.sheet-body .g.off .k { opacity: 0.45; }
.sheet-body button.s { border: 1px solid #e3d8c6; background: #fff; border-radius: 999px; padding: 5px 10px; font: inherit; font-size: 11px; }
.sheet-body button.p { border: none; background: #3d3a36; color: #fff; border-radius: 999px; padding: 8px 14px; font: inherit; font-size: 13px; }
.sheet-body .add { display: flex; gap: 6px; margin: 10px 0; }
.sheet-body .add input { flex: 1; min-width: 0; font: inherit; font-size: 16px; padding: 6px 10px; border: 1px solid #e3d8c6; border-radius: 8px; }

/* ---------------------------------------------------------------
 * 本棚の共有（issue #137）。下の帯の上に出す小さな欄
 * --------------------------------------------------------------- */
.share-sheet {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: calc(70px + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  max-width: 460px;
  margin: 0 auto;
  padding: 12px 14px 14px;
  border-radius: 14px;
  background: var(--paper);
  color: #3d3a36;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}
.ss-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 14px; }
.ss-switch { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; cursor: pointer; }
.ss-switch input { position: absolute; opacity: 0; pointer-events: none; }
.ss-track { position: relative; width: 44px; height: 26px; border-radius: 13px; background: #cfc6b8; transition: background 0.2s; }
.ss-knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); transition: transform 0.2s; }
.ss-switch input:checked + .ss-track { background: var(--accent); }
.ss-switch input:checked + .ss-track .ss-knob { transform: translateX(18px); }
.ss-switch input:focus-visible + .ss-track { outline: 2px solid var(--accent); outline-offset: 2px; }
.ss-url { display: flex; gap: 6px; align-items: center; margin-top: 10px; }
.ss-url.off { opacity: 0.45; }
.ss-url input { flex: 1; min-width: 0; font: inherit; font-size: 16px; padding: 6px 8px; border: 1px solid #e3d8c6; border-radius: 8px; background: #fff; color: #3d3a36; }
.ss-note { margin: 10px 0 0; font-size: 11px; line-height: 1.6; color: #8a7d6c; }

/* 共有された本棚が非公開・見つからないとき */
.closed-box {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 30;
  width: min(320px, calc(100% - 48px));
  padding: 24px 20px;
  border-radius: 16px;
  background: rgba(255, 253, 248, 0.94);
  color: #3d3a36;
  text-align: center;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.3);
}
.closed-box .material-symbols-outlined { font-size: 32px; color: #8a7d6c; }
.closed-box p { margin: 8px 0 16px; font-size: 15px; font-weight: 700; }

/* ---------------------------------------------------------------
 * ブックマークの平台の検索（issue #141）。手に取った本（#hand、z-index 50）より下に出す
 * --------------------------------------------------------------- */
.search-modal {
  position: absolute;
  inset: 0;
  z-index: 45;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: calc(var(--navbar-h, 72px) + 10px) 10px calc(80px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  background: rgba(20, 18, 16, 0.45);
}
.sm-box {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 560px;
  max-height: 100%;
  padding: 12px;
  box-sizing: border-box;
  border-radius: 14px;
  background: var(--paper);
  color: #3d3a36;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}
.sm-bar { display: flex; align-items: center; gap: 6px; }
.sm-bar input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 16px; /* iOS が拡大しない大きさ */
  padding: 8px 10px;
  border: 1px solid #e3d8c6;
  border-radius: 10px;
  background: #fff;
  color: #3d3a36;
}
.chip.p { background: #3d3a36; color: #fff; }
.chip:disabled { opacity: 0.5; }
.sm-status { margin: 8px 2px; font-size: 12px; line-height: 1.6; color: #8a7d6c; }
.sm-results {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 14px 10px;
  align-items: end;
  padding: 6px 2px 4px;
}
.sm-cover { position: relative; cursor: pointer; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.sm-cover img {
  display: block;
  width: 100%;
  aspect-ratio: 0.7;
  object-fit: cover;
  border-radius: 3px;
  background: #e8e2d6;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25), 0 3px 8px rgba(0, 0, 0, 0.18);
  pointer-events: none;
}
.sm-cover .t {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 4px;
  font-size: 10px;
  line-height: 1.35;
  color: #8a7d6c;
}
.sm-cover.away { visibility: hidden; }

/* 利用者が足した本のチェック（管理、dev） */
.ub-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.sheet-body .s.on { background: #3d3a36; color: #fff; }

/* ---------------------------------------------------------------
 * 1 冊の本の共有（issue #143）。手に取った本（#hand、z-index 50）より上に出す
 * --------------------------------------------------------------- */
.book-share { z-index: 55; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
.bs-go { display: flex; justify-content: flex-end; margin-top: 10px; }
.bs-go .chip { text-decoration: none; }
/* 共有のリンクから開いた本が平台に無いとき、手に取る動きの出どころ（見せない） */
.shared-origin { position: fixed; left: 50%; bottom: 0; width: 60px; height: 84px; margin-left: -30px; visibility: hidden; pointer-events: none; }
.shared-origin img { width: 100%; height: 100%; }

/* ---------------------------------------------------------------
 * 本の共有（/hirazumiya/b/<ISBN>）から開いたときの細いヘッダー（app.js が body に hz-compact を付ける）。
 * 説明の行を消し、余白・アイコン・題を小さくする。戻る矢印・アプリ名・プロフィールは残す。
 * 平台や手元の位置は --navbar-h（header.js が実測）で決まるので、ここで高さを変えれば揃う
 * --------------------------------------------------------------- */
body.hz-compact .navbar { padding-top: calc(0.4rem + var(--safe-top)); padding-bottom: 0.4rem; }
body.hz-compact .logo-subtitle { display: none; }
body.hz-compact .nav-icon { width: 28px; height: 28px; }
body.hz-compact .nav-icon .material-symbols-outlined { font-size: 1.05rem; }
body.hz-compact .logo { font-size: 1.05rem; }