/* writing.css — 著作一覧ページ専用（旧: index.html 内のインライン<style>から分離） */
/* ══════════════════════════════════════════════════════
   著作一覧 — 追加コンポーネント（style.cssは変更せず、本ページのみで使用）
   既存トークン（--navy/--red/--cream/--surface/--field 等）と
   既存パターン（.chip / .seg-btn / .search-input / .author-cta）を再利用し、
   新規クラスは最小限に留める。
══════════════════════════════════════════════════════ */

/* トークンは style.css の :root に一本化（--field:#FFFFFF はそちらへ反映済み） */

.pub-wrap{max-width:1100px;margin:0 auto;padding:2rem 2rem 5rem;}

/* 仮データ告知（枠線でなく面の色で注意を引く。左にごく細いアクセントバー） */
.pub-notice{
  display:flex;gap:.9rem;align-items:flex-start;
  background:var(--surface-2);border-radius:var(--r-md);
  padding:1rem 1.3rem;margin-bottom:2.2rem;position:relative;overflow:hidden;
}
.pub-notice::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--red);opacity:.55;}
.pub-notice-ic{font-size:1rem;line-height:1.5;flex-shrink:0;}
.pub-notice p{font-family:'Noto Sans JP',sans-serif;font-size:.78rem;line-height:1.85;color:var(--coal);}
.pub-notice strong{color:var(--navy);font-weight:600;}

/* ツールバー：並び替え・表示件数・表示切替 */
.pub-toolbar{
  display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.6rem;
  padding-bottom:1.1rem;margin-bottom:.4rem;
  border-bottom:1px solid var(--cream-d);
}
.pub-toolbar-group{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;}
.pub-toolbar-label{font-family:'Noto Sans JP',sans-serif;font-size:.72rem;color:var(--mid);white-space:nowrap;}
.pub-toolbar-spacer{flex:1;}

/* 表示件数：枠線なしのセレクト。フォーカス時のみ下線アクセント */
.field-select{
  appearance:none;-webkit-appearance:none;
  font-family:'Noto Sans JP',sans-serif;font-size:.78rem;color:var(--coal);
  background:var(--field) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236B6B6B'/%3E%3C/svg%3E") no-repeat right 14px center;
  border:none;outline:none;border-radius:var(--r-sm);
  padding:9px 34px 9px 14px;cursor:pointer;
  box-shadow:inset 0 -2px 0 transparent;transition:background .2s,box-shadow .2s;
}
.field-select:focus{background-color:var(--field-focus);box-shadow:inset 0 -2px 0 var(--red), var(--sh-focus);}

/* 表示切替（リスト／グリッド）：既存 .seg-btn を流用 */
.pub-view-group{display:flex;gap:4px;background:var(--surface-2);padding:4px;border-radius:var(--r-pill);}
.pub-view-group .seg-btn{width:34px;height:30px;display:flex;align-items:center;justify-content:center;background:transparent;}
.pub-view-group .seg-btn[aria-pressed="true"]{background:var(--navy);}
.pub-view-group .seg-btn svg{width:15px;height:15px;fill:currentColor;}

.pub-count{font-family:'Noto Sans JP',sans-serif;font-size:.74rem;color:var(--mid);white-space:nowrap;}

/* 書籍リスト本体 */
.book-list{display:flex;flex-direction:column;}
.book-row{
  display:flex;gap:1.8rem;padding:2.1rem 0;
  border-bottom:1px solid var(--cream-d);
}
.book-row:first-child{padding-top:0;}
.book-row:last-child{border-bottom:none;}

.book-cover{
  flex-shrink:0;width:96px;aspect-ratio:2/3;border-radius:var(--r-sm);
  background:linear-gradient(155deg,var(--surface-2),var(--surface-3));
  display:flex;align-items:center;justify-content:center;text-align:center;
  box-shadow:var(--sh-1);
}
.book-cover span{font-family:'Noto Sans JP',sans-serif;font-size:.6rem;color:var(--soft);line-height:1.7;letter-spacing:.04em;padding:0 6px;}

/* 表紙：新書〜単行本まで縦横比が様々なため、幅固定・高さ自動（intrinsic）で扱う */
.book-cover-wrap{flex-shrink:0;width:104px;display:flex;align-items:flex-end;justify-content:center;}
.book-cover-img{display:block;width:96px;height:auto;border-radius:3px;box-shadow:0 6px 14px -4px rgba(10,31,61,.3),0 1px 3px rgba(10,31,61,.18);}

.book-main{flex:1;min-width:0;}
.book-tag-row{display:flex;align-items:center;gap:.55rem;margin-bottom:.05rem;}
/* ── UIルール（サイト全体）：クリックできない要素には角丸ピル背景を使わない ──
   角丸＋塗り背景は「押せるボタン／チップ」の記号として .chip や .book-cta が
   既に使っている。「単著」「確認済み」等の非インタラクティブな分類ラベルが
   同じ見た目を持つと誤操作を誘発するため、平テキストで示す。
   区分（単著/共著）とデータ状態（確認済み/要確認）の間は区切り「｜」で仕切る。 */
.book-tag{font-family:'Noto Sans JP',sans-serif;font-size:.68rem;font-weight:600;letter-spacing:.06em;color:var(--red);}
.book-tag.sample{color:var(--mid);font-weight:500;}
.book-tag-sep{color:var(--soft);font-size:.7rem;}
.book-title{font-size:1.08rem;font-weight:700;color:var(--navy);letter-spacing:.02em;line-height:1.4;margin-bottom:.05rem;}
.book-subttl{font-family:'Noto Sans JP',sans-serif;font-size:.78rem;color:var(--mid);font-weight:300;margin-bottom:.85rem;line-height:1.4;}

.book-meta{display:grid;grid-template-columns:auto 1fr;gap:.3rem 1.3rem;margin-bottom:1.1rem;max-width:480px;}
.book-meta dt{font-family:'Noto Sans JP',sans-serif;font-size:.66rem;color:var(--mid);line-height:1.5;width:4.4em;white-space:nowrap;text-align:justify;text-align-last:justify;}
.book-meta dd{font-family:'Noto Sans JP',sans-serif;font-size:.8rem;color:var(--coal);line-height:1.5;text-align:justify;text-justify:inter-ideograph;}

.book-summary{font-size:.86rem;color:var(--coal);line-height:1.95;font-weight:300;max-width:640px;text-align:justify;text-justify:inter-ideograph;}

.book-action{flex-shrink:0;width:152px;display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-end;text-align:right;}
.book-cta{
  display:inline-flex;align-items:center;gap:.4rem;
  font-family:'Noto Sans JP',sans-serif;font-size:.74rem;letter-spacing:.05em;
  color:var(--red);background:rgba(139,26,26,.08);text-decoration:none;
  padding:9px 16px;border-radius:var(--r-pill);white-space:nowrap;
  transition:background .2s,color .2s;
}
.book-cta:hover{background:var(--red);color:var(--white);}
.book-cta svg{width:12px;height:12px;}

/* グリッド表示モード */
.book-list.is-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3.5rem 2.5rem;align-items:stretch;}
.book-list.is-grid .book-row{flex-direction:column;padding:0;border-bottom:none;gap:1rem;height:100%;}
.book-list.is-grid .book-cover{width:100%;height:auto;}
.book-list.is-grid .book-cover-wrap{width:100%;}
.book-list.is-grid .book-cover-img{width:100%;}
.book-list.is-grid .book-main{display:flex;flex-direction:column;flex:1;}
.book-list.is-grid .book-action{flex-direction:row;width:100%;align-items:center;margin-top:auto;}
.book-list.is-grid .book-summary{display:none;}
.book-list.is-grid .book-meta{grid-template-columns:auto 1fr;max-width:none;}

/* ══════════════════════════
   書斎風シェルフ表現（PC・タブレットのみ）
   茶系の木目テクスチャは既存ブランド（紺・臙脂・クリーム）と相容れないため使わず、
   「棚板のライン」「本影」「資料を探す高揚感」を固定トークンの配色で表現する。
   モバイルでは情報密度を優先し、このシェルフ演出は付与しない。
══════════════════════════ */
/* ══════════════════════════
   PC・タブレット（≥761px）：表紙は「素の浮遊表紙」に統一
   旧・書斎シェルフ表現（上部の紺→臙脂バー／背景塗り／接地影）は撤去。
   浮遊感は表紙画像自身の box-shadow のみで表現する。
   ホバーは傾けず、垂直方向へふわっと持ち上げる（影も少し深める）。
══════════════════════════ */
@media (min-width:761px){
  /* 表紙まわりの装飾コンテナは持たせない（面・余白のみ） */
  .book-cover-wrap{position:relative;padding:0;background:none;border-radius:0;}
  .book-cover-wrap::before,
  .book-cover-wrap::after{content:none;}
  .book-cover-img{transition:transform .28s ease, box-shadow .28s ease;}
  .book-row:hover .book-cover-img{
    transform:translateY(-6px);
    box-shadow:0 16px 28px -10px rgba(10,31,61,.42),0 3px 8px rgba(10,31,61,.16);
  }

  /* ── タイトル／サブタイトル／著者ブロックの縦リズム（スマホ版の考え方に統一）──
     ・タイトルとサブタイトルの間に読みやすい余白を確保（request a）
     ・著者ブロック(meta)の上に固定余白を持たせ、サブタイトルの有無に関わらず
       著者エリアとの間隔を一定にする（request b） */
  .book-title{margin-bottom:.4rem;}
  .book-subttl{margin-bottom:0;}
  .book-meta{margin-top:.85rem;}

  /* ── メタ各行：ラベルと値の高さを中央で揃える（ISBNまで全項目同一仕様／request c）
     justify割付（著 者 の字間）は横方向のため影響しない ── */
  .book-meta{align-items:center;}
  .book-meta dt,.book-meta dd{align-self:center;}

  /* グリッド表示：表紙背景を外した分、表紙画像は左端揃え（＝下のテキスト左端と一致）*/
  .book-list.is-grid .book-cover-wrap{justify-content:flex-start;}

  /* リスト表示：表紙はグリッド表示に比べ小さく見えるため約2倍(96→190px)に拡大し、
     カード内は上揃え（Amazonボタンの最下部配置は維持）。 */
  .book-list:not(.is-grid) .book-cover-wrap{width:190px;align-items:flex-start;}
  .book-list:not(.is-grid) .book-cover-img{width:190px;}
}

/* ══════════════════════════
   タブレット帯（761–1024px）
   ・グリッドは3列だと窮屈なため2列に。
   ・デスクナビ（7項目）はこの幅で溢れるため、ハンバーガー＝ドロワーへ切替。
     （トップページと同じ操作系をタブレットでも到達可能にする）
   ※同症状は全ページ共通CSS（style.css の768px境界）に起因。恒久対応は
     style.css 側での閾値見直しを推奨（本ページでは暫定的に上書き）。
══════════════════════════ */
@media (min-width:761px) and (max-width:1024px){
  .book-list.is-grid{grid-template-columns:repeat(2,1fr);}
}

@media (max-width:760px){
  /* 罫線：色をはっきりさせ、左右端は背景へ溶けるグラデーション。
     border ではなく背景グラデーションを使うため .book-row の実線境界は消す。 */
  .book-row{
    display:grid;
    grid-template-columns:96px 1fr;
    column-gap:1.1rem;row-gap:.5rem;
    align-items:start;
    border-bottom:none;
    padding:1.9rem 0;
    background-image:linear-gradient(90deg,transparent,var(--soft) 22%,var(--soft) 78%,transparent);
    background-repeat:no-repeat;
    background-position:0 bottom;
    background-size:100% 1px;
  }
  /* 1冊目もツールバー罫線からの余白を他ブロックと揃える（padding-top を戻す） */
  .book-row:first-child{padding-top:1.9rem;}
  /* 最終ブロックの下線は残す（区切りとして機能させる） */

  .book-main,.book-action{display:contents;}

  .book-cover-wrap{grid-column:1;grid-row:1 / span 4;align-items:flex-start;width:96px;}
  .book-cover{width:76px;}
  .book-cover-img{width:96px;}

  .book-tag-row{grid-column:2;grid-row:1;}
  .book-title{grid-column:2;grid-row:2;}
  .book-subttl{grid-column:2;grid-row:3;margin-bottom:0;}
  .book-meta{grid-column:2;grid-row:4;margin-bottom:0;}

  /* メタ各行：ラベルと値の高さを中央で揃える（justify割付を壊さないよう align-self を使う） */
  .book-meta{align-items:center;}
  .book-meta dt{align-self:center;}
  .book-meta dd{align-self:center;}

  .book-summary{grid-column:1 / -1;grid-row:5;max-width:none;width:100%;line-height:1.7;margin-top:.5rem;}

  .book-cta{grid-column:1 / -1;grid-row:6;text-align:left;margin-top:.2rem;justify-self:start;}

  .book-list.is-grid{grid-template-columns:1fr 1fr;gap:1.6rem 2rem;align-items:stretch;}
  /* グリッド表示：各カード内は1段（縦積み）。2カラム内部レイアウトを解除して見切れを防ぐ。
     カード高さを揃え、Amazonボタンは最下部に固定する。
     カード上部の余白・内部の縦間隔はリスト表示に合わせる。 */
  .book-list.is-grid .book-row{
    display:flex;flex-direction:column;align-items:flex-start;
    gap:0;padding:1.9rem 0 0;background-image:none;height:100%;
  }
  .book-list.is-grid .book-cover-wrap{grid-row:auto;grid-column:auto;width:100%;justify-content:flex-start;margin-bottom:1rem;}
  .book-list.is-grid .book-cover-img{width:72px;}
  .book-list.is-grid .book-tag-row,
  .book-list.is-grid .book-title,
  .book-list.is-grid .book-subttl,
  .book-list.is-grid .book-meta,
  .book-list.is-grid .book-cta{grid-column:auto;grid-row:auto;width:100%;}
  /* 内部の縦間隔をリスト表示と同じに（タグ→タイトル→サブタイトル→著者ブロック）。
     著者ブロック(meta)の上に .85rem を固定で持たせることで、
     サブタイトルの有無に関わらずタイトル/サブタイトル下の余白を一定にする。 */
  .book-list.is-grid .book-tag-row{margin-bottom:.05rem;}
  .book-list.is-grid .book-title{font-size:.98rem;margin-bottom:0;}
  .book-list.is-grid .book-subttl{margin-top:.05rem;margin-bottom:0;}
  /* meta：上に .85rem。ラベルブロックを少し狭く、値との余白も詰める（ISBN折り返し防止） */
  .book-list.is-grid .book-meta{display:grid;grid-template-columns:auto 1fr;max-width:none;gap:.3rem .6rem;margin-top:.85rem;margin-bottom:1.4rem;}
  .book-list.is-grid .book-meta dt{width:3.8em;}
  .book-list.is-grid .book-meta dd{font-size:.72rem;letter-spacing:-.02em;overflow-wrap:normal;word-break:keep-all;}
  .book-list.is-grid .book-summary{display:none;}
  /* CTA：リスト表示と同じ寸法（inline-flex・padding:9px 16px）。
     等高のため margin-top:auto で最下部に置きつつ、直前との最小余白はリストと同じ .2rem を担保。 */
  .book-list.is-grid .book-cta{margin-top:auto;align-self:flex-start;width:auto;padding:9px 16px;}

  /* 読み物ページではないため行間を詰める／読みにくいグレーを濃くする */
  .book-subttl{color:var(--coal);}
  .book-meta dt{color:var(--mid);}

  /* ── 並び替えチップ：発売日／書籍名が縦積みにならないよう、
     角丸ピルをやめてミニマルなラジオ表現にし、横1行に収める ── */
  #sortChips{flex-wrap:nowrap;gap:16px;}
  #sortChips .chip{
    background:none;padding:0;border-radius:0;
    font-size:.72rem;font-weight:400;color:var(--coal);
    display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
  }
  #sortChips .chip::before{
    content:'';width:12px;height:12px;border-radius:50%;
    border:1.5px solid var(--mid);flex-shrink:0;box-sizing:border-box;
  }
  #sortChips .chip.active{color:var(--navy);font-weight:600;}
  #sortChips .chip.active::before{
    border-color:var(--navy);
    background:radial-gradient(circle,var(--navy) 42%,transparent 44%);
  }
}
  /* 非活性ソートボタン：枠線を足さず、透過とラベルで状態を伝える */
  #sortChips .chip[disabled]{opacity:.42;cursor:not-allowed;}
  #sortChips .chip[disabled]:hover{background:var(--surface-2);color:var(--mid);}
  .chip-note{font-size:.6rem;margin-left:.4rem;opacity:.85;letter-spacing:.02em;}

/* ══════════════════════════════════════════════════════
   v11-5（2026-07-14）追記：グリッド表示の横はみ出し修正
   ────────────────────────────────────────
   原因：`grid-template-columns:1fr 1fr` の 1fr は minmax(min-content,1fr)。
   ISBN（978-4-380-20006-9）や英字の出版社名は
   `word-break:keep-all / overflow-wrap:normal` により分割不能語となり、
   その min-content 幅がトラック幅を押し広げ、
   グリッド全体がビューポート幅を超えていた（横スクロール発生）。
   対処：トラックの最小幅を 0 と明示し、あふれる語だけ折り返しを許可する。
   ※ 罫線は増やさない。余白と折り返しだけで解決する。
══════════════════════════════════════════════════════ */
@media (max-width:1024px){
  .book-list.is-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .book-list.is-grid .book-row,
  .book-list.is-grid .book-main,
  .book-list.is-grid .book-action{min-width:0;}
  .book-list.is-grid .book-cover-img{max-width:100%;}

  /* 値の列も最小幅 0 に。長い語は「入りきらないときだけ」折り返す */
  .book-list.is-grid .book-meta{grid-template-columns:auto minmax(0,1fr);}
  .book-list.is-grid .book-meta dd{
    min-width:0;
    word-break:normal;
    overflow-wrap:break-word;
  }
  .book-list.is-grid .book-title,
  .book-list.is-grid .book-subttl{min-width:0;overflow-wrap:break-word;}
}

/* スマートフォン：2カラムの実効幅を稼ぐ（外周余白とガターを詰める）。
   1冊あたり約 +28px。ISBN が1行に収まる幅を確保するための最小限の調整。 */
@media (max-width:560px){
  .pub-wrap{padding-left:1.1rem;padding-right:1.1rem;}
  .book-list.is-grid{gap:1.6rem 1.1rem;}
  .book-list.is-grid .book-meta dt{width:3.4em;}
}