/* [hidden] 属性を構造で保証する (ui-standards §2-2・§2-13, イシュー#231)。
   .btn 等の display 明示クラスが UA の [hidden] を上書きする罠が4回再発したため、
   個別に [hidden]{display:none} を足す運用をやめ、!important で全要素に一律適用する。
   運用: hidden 切替する要素に style.display を併用しない (JS 側は el.hidden の
   true/false だけで表示制御する)。既存の個別 [hidden] ルール群は冗長だが無害なため削除しない。 */
[hidden] { display: none !important; }

/* ===== モバイル案内バナー ===== */
.mobile-setup-banner {
    background: linear-gradient(135deg, #fff7e0 0%, #fff0b8 100%);
    border-bottom: 2px solid #f0c020;
    color: #5a4400;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.mobile-setup-banner-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.mobile-setup-banner-msg {
    flex: 1 1 200px;
    line-height: 1.4;
}
.mobile-setup-banner-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.mobile-setup-banner-actions a,
.mobile-setup-banner-actions button {
    background: #f0a020;
    color: white;
    border: none;
    padding: 0.45rem 0.9rem;
    border-radius: 4px;
    text-decoration: none;
    font-size: 0.9rem;
    cursor: pointer;
    display: inline-block;
}
.mobile-setup-banner-actions a:hover,
.mobile-setup-banner-actions button:hover {
    background: #d88800;
}
/* ::after でタップ領域だけ44pxに拡張 (見た目は変えない・#225 P7 残り・イシュー#258・ui-standards §2-24) */
.mobile-setup-banner-close {
    position: relative;
    background: transparent;
    border: none;
    font-size: 1.4rem;
    cursor: pointer;
    color: #5a4400;
    padding: 0 0.3rem;
}
.mobile-setup-banner-close::after {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
}

/* 旧 ?u= 公開閲覧モード (.public-mode) は廃止。公開は静的 SSG (ADR-030) に移行。 */

/* Virtual Bookshelf Styles — mockup (refined-iconified.html) 準拠 */
:root {
    /* ===== デザイントークン (mockup 準拠) ===== */
    --bg: #f4f5f7;
    --panel: #ffffff;
    --side: #fbfbfd;
    --fg: #1c1f24;
    --fg2: #4b5460;
    --muted: #6b7280;
    --line: #e4e7eb;
    --line2: #eef0f3;
    --accent: #3d52ff;
    --accent-bg: #eef0ff;
    --accent-strong: #2a3aff;
    --danger: #c23a3a;
    --warning: #a06800;
    /* ホバー背景専用トークン (イシュー#247 決裁1・2 ダーク対応)。--accent-strong はテキスト用途
       (--accent-bg上の文字)にも使うため、ダークでは背景役に転用すると白文字コントラストを割る
       (実測2.26)。--danger/--warning も同様(ライト固定#fce8e8/#fff7e0のまま実測2.36/1.99)。
       ライトはここでは従来値のまま(見た目不変)、ダークは dark-theme.js 側で専用値に上書きする。 */
    --btn-primary-hover-bg: var(--accent-strong);
    --btn-danger-hover-bg: #fce8e8;
    --btn-warning-hover-bg: #fff7e0;
    --shadow: 0 8px 24px rgba(0,0,0,0.06);
    --header-h: 48px;
    --book-width: 160px;
    --book-height: 240px;
    /* #385: モバイルの .book-cover-container を幅100%(トラック追従)にしつつ縦横比を保つための
       単位なし数値版(aspect-ratioはpx付きのvar()をそのまま渡すと無効値になるため別途用意する)。
       px版と数値だけ違う組を必ずペアで更新すること(size-small/medium/largeも同様)。 */
    --book-width-num: 160;
    --book-height-num: 240;

    /* ===== 旧変数の互換エイリアス (段階的廃止予定、新規利用禁止) ===== */
    --primary-color: var(--fg);
    --secondary-color: var(--accent);
    --accent-color: var(--accent);
    --text-color: var(--fg);
    --bg-color: var(--bg);
    --border-color: var(--line);
    --shadow-color: rgba(0, 0, 0, 0.06);
}

/* ===== 見出し / ラベル内の Lucide アイコン共通 ===== */
.h-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: -0.15em;
    color: var(--accent);
    margin-right: 0.4rem;
}
h1 .h-icon,
h2 .h-icon,
h3 .h-icon,
h4 .h-icon,
h5 .h-icon,
summary .h-icon,
.btn .h-icon,
.label-with-icon .h-icon {
    color: inherit;
}
/* 見出しに使うときは accent 色 (オーバーライド) */
.modal-header h2 .h-icon,
.settings-section-title .h-icon { color: var(--accent); }

/* Cover Size Variants */
.bookshelf.size-small {
    --book-width: 120px;
    --book-height: 180px;
    --book-width-num: 120;
    --book-height-num: 180;
}

.bookshelf.size-medium {
    --book-width: 160px;
    --book-height: 240px;
    --book-width-num: 160;
    --book-height-num: 240;
}

.bookshelf.size-large {
    --book-width: 200px;
    --book-height: 300px;
    --book-width-num: 200;
    --book-height-num: 300;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ===== Custom scrollbar (細め、控えめな色) ===== */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--line) transparent;
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background: var(--line);
    border-radius: 5px;
    border: 2px solid transparent;
    background-clip: padding-box;
    transition: background 0.15s;
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--line);
    background-clip: padding-box;
    border: 2px solid transparent;
}

*::-webkit-scrollbar-corner {
    background: transparent;
}

html, body {
    height: 100%;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header Styles */
.header {
    background: var(--panel);
    color: var(--fg);
    border-bottom: 1px solid var(--line);
    height: var(--header-h, 48px);
    flex-shrink: 0;
    box-shadow: none;
    z-index: 50;
    padding: 0;
}

.header-shell {
    display: flex !important;
    align-items: center;
    gap: 0.8rem;
    height: 100%;
    padding: 0 0.9rem !important;
    max-width: none !important;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    color: var(--fg);
    flex-shrink: 0;
}

.brand-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    width: 20px;
    height: 20px;
}

.brand-text {
    user-select: none;
}

/* 中央検索バー (⌘K 起動) */
.palette-trigger {
    flex: 1;
    max-width: 720px;
    margin: 0 auto;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0.35rem 0.7rem;
    color: var(--muted);
    font-size: 0.88rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: border-color 0.1s, background 0.1s;
    font-family: inherit;
}

.palette-trigger:hover {
    border-color: var(--accent);
    background: var(--accent-bg);
    color: var(--fg);
}

.palette-icon {
    display: inline-flex;
    align-items: center;
    color: var(--muted);
}

.palette-trigger:hover .palette-icon {
    color: var(--accent);
}

.palette-placeholder {
    flex: 1;
    text-align: left;
}

.palette-kbd {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 0 0.35rem;
    font-size: 0.72rem;
    color: var(--fg2);
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
}

/* Button Styles */
.btn {
    padding: 0.45rem 0.9rem;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1.2;
    transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
    font-family: inherit;
    background: var(--panel);
    color: var(--text-color);
}

/* 押せるのに何も起きないボタンを見た目で示す (イシュー#89・②レビュー指摘)。
   従来 disabled 初期状態のボタン (#import-selected-books・IconPicker「使う」等) にも波及して統一される。 */
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary {
    background-color: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.btn-primary:hover {
    background-color: var(--btn-primary-hover-bg);
    border-color: var(--btn-primary-hover-bg);
}

.btn-secondary {
    background-color: var(--panel);
    color: var(--fg2);
    border-color: var(--line);
}

.btn-secondary:hover {
    background-color: var(--line2);
    color: var(--fg);
    border-color: var(--line);
}

.btn-warning {
    background-color: var(--panel);
    color: var(--warning);
    border-color: var(--line);
}

.btn-warning:hover {
    background-color: var(--btn-warning-hover-bg);
    border-color: var(--warning);
}

.btn-danger {
    background-color: var(--panel);
    color: var(--danger);
    border-color: var(--line);
}

.btn-danger:hover {
    background-color: var(--btn-danger-hover-bg);
    border-color: var(--danger);
}

.btn-small {
    padding: 0.25rem 0.55rem;
    font-size: 0.8rem;
}

.btn:hover {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.btn:active {
    transform: translateY(1px);
}

.btn.active, .btn-primary.active {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: white;
}

/* Main Layout */
.main {
    flex: 1;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    display: flex;
}

.container {
    display: flex;
    gap: 2rem;
}

/* ===== 3 ペインシェル (PC レイアウト v2) =====
   container.app-shell が左/中/右の grid を作る。
   折りたたみは CSS 変数 --left-col / --right-col の差し替えで実現。
   viewport 高さを満たして内部スクロール (mockup 準拠)。 */
.container.app-shell {
    display: grid;
    grid-template-columns: var(--left-col, 220px) minmax(0, 1fr) var(--right-col, 320px);
    gap: 0;
    max-width: none;
    width: 100%;
    height: 100%;
    align-items: stretch;
    padding: 0;
    /* Phase C2: floating な開閉タブ (.pane-tab) の絶対配置基準 */
    position: relative;
}

/* Phase C2: 折りたたみ時は strip を出さず幅 0 (本一覧を全幅に)。開閉は .pane-tab で行う */
body.left-collapsed   { --left-col: 0px; }
body.right-collapsed  { --right-col: 0px; }
/* ホームでも右ペイン (本詳細) は初期表示 (320px)。不要ならタブで折りたためる */

/* bookshelf-container がフル幅に (中央ペイン: 縦は内部スクロール) */
.bookshelf-container.full-width,
.bookshelf-container.app-main-pane {
    width: 100%;
    min-width: 0;
    height: 100%;
    overflow: hidden;
    background: var(--panel);
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.bookshelf-container.app-main-pane > .view {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

/* Dashboard 内側余白 */
.bookshelf-container.app-main-pane #dashboard {
    padding: 1rem 1.2rem 1.4rem;
}

/* 本棚ビュー内側余白 (上は 0: sticky ヘッダーを天面に密着させる) */
.bookshelf-container.app-main-pane .view-bookshelf {
    padding: 0 0.9rem 1.4rem;
}

/* ===== View 切替 (router 経由で body.app-view-* を切り替える) =====
   イシュー#373 案D: #371 (content-visibility:hidden で裏置き・WebKitで見切れ) と 案B
   (display:none に全面revert・#371の速さを失う) の間を取り、content-visibility も display:none も
   一切使わず transform で画面外へ移動するだけにした。display:block を常に維持するため、
   book-item 個々の content-visibility:auto (#359由来) の評価状態がホーム表示中も乱されず、
   WebKit固有のペイント欠落(見切れ)の引き金になっていた「親のcontent-visibility切替」が無くなる。
   transform はコンポジタ合成のみでレイアウト/ペイントを再計算しないため、#371 が狙った
   「display:none往復のたびに800枚のcontent-visibility:auto判定をやり直すコスト」も避けられる。
   .view-bookshelf 自体は JS 側 (_setBodyView) で ホーム表示中 inert を付け、フォーカス/クリック/
   スクリーンリーダーの対象から外す (display:none 相当のアクセシビリティ挙動を維持)。
   WebKitのフリック再現(tests/e2e/bookshelf-clip-373.spec.js)で検証し、本番投入前に実測値を
   tmp/373/perf.mdに記載する。 */
.view-bookshelf { display: none; } /* bodyにapp-view-*が付く前(起動直後)だけの初期値 */
body.app-view-main .view-bookshelf {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    transform: translateX(-100vw) !important;
    z-index: -1 !important;
    pointer-events: none !important;
}
body.app-view-bookshelf .view-main { display: none !important; }
body.app-view-bookshelf .view-bookshelf {
    display: block !important;
    position: static !important;
    transform: none !important;
    z-index: auto !important;
    pointer-events: auto !important;
}

/* ===== Sidebar / Detail 共通 (mockup: 内部スクロールで固定) ===== */
.app-sidebar,
.app-detail {
    height: 100%;
    min-height: 0;
    border-radius: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.app-sidebar {
    background: var(--line);
    border: none;
    border-right: 1px solid var(--line);
    box-shadow: inset -6px 0 6px -6px rgba(0,0,0,.15);
}

.app-detail {
    background: var(--line);
    border: none;
    border-left: 1px solid var(--line);
    box-shadow: inset 6px 0 6px -6px rgba(0,0,0,.1);
}

.pane-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--line2);
    font-size: 0.85rem;
    color: var(--fg2);
    gap: 0.5rem;
}

.pane-title {
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
}

.pane-title-right {
    flex: 1;
}

.pane-toggle-btn {
    width: 24px;
    height: 24px;
    border: 1px solid transparent;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: 1rem;
    padding: 0;
}

.pane-toggle-btn:hover {
    background: var(--line2);
    color: var(--fg);
    border-color: var(--line);
}

.detail-toggle {
    order: 0;
}

/* ===== 左サイドバー ===== */
.app-sidebar {
    /* 展開時 */
}

.sidebar-nav {
    flex: 1;
    min-height: 0;
    overflow: hidden;            /* nav 全体はスクロールさせない (微スクロール防止) */
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0.4rem;
}
/* ホーム等の固定セクションは縮まない。本棚ツリーを含むセクションだけが伸び、
   ツリー内部だけがスクロールする (見出し・ホームは固定)。 */
.sidebar-nav > .sidebar-section { flex-shrink: 0; }
.sidebar-nav > .sidebar-section:has(#sidebar-bookshelf-tree) {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.sidebar-section + .sidebar-section {
    margin-top: 1rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--line);
}

.sidebar-section-title {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    padding: 0.25rem 0.6rem;
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
/* 見た目のサイズ(密なツリー/サイドバー内なので拡大しない)はそのまま、::after で
   タップ領域だけ44px相当に広げる (#225 P7・#223 A8・イシュー#232 step2・ui-standards §2-24)。
   position:relative の子として絶対配置の透明領域を重ね、クリックは同じ要素が受ける。 */
.sidebar-add-btn {
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    border-radius: 4px;
}
.sidebar-add-btn::after {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
}
.sidebar-add-btn:hover { background: rgba(0, 0, 0, 0.06); color: var(--accent); }

.sidebar-nav-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.4rem 0.6rem;
    border: 1px solid transparent;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    color: var(--fg2);
    font-size: 0.9rem;
    text-align: left;
}

.sidebar-nav-item:hover {
    background: var(--line2);
}

.sidebar-nav-item.is-active {
    background: var(--accent-bg);
    color: var(--accent);
    font-weight: 600;
}

/* ⌘K 起動ボタン右端のショートカットヒント */
.sidebar-nav-item .nav-kbd {
    margin-left: auto;
    font-size: 0.7rem;
    color: var(--fg3, var(--fg2));
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 0 0.3rem;
    line-height: 1.4;
    font-family: inherit;
}

/* 同一セクション内のナビ項目は詰めず、わずかに間隔を空ける (ホームと公開がくっつかないように) */
.sidebar-section > .sidebar-nav-item + .sidebar-nav-item { margin-top: 0.15rem; }
/* 「公開」はナビ移動でなくアクション。ホームから区切って少し下げる */
#sidebar-publish { margin-top: 0.3rem; }

.sidebar-nav-item .nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2em;
    color: currentColor;
}

/* ===== 本棚ツリー (UI-2) ===== */
.sidebar-bookshelf-tree {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;          /* 本棚が多いときはここだけスクロール */
}

.tree-node {
    display: grid;
    grid-template-columns: var(--indent, 0px) 28px minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.5rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.88rem;
    color: var(--fg2);
    border: 1px solid transparent;
    line-height: 1.2;
    position: relative;
}

/* ===== ツリー D&D (Phase H2-2): 並び替え + 親変更 ===== */
.tree-node.tree-dragging { opacity: 0.4; }
.tree-node.tree-drop-inside {
    background: var(--accent-bg);
    box-shadow: inset 0 0 0 2px var(--accent);
}
.tree-node.tree-drop-before::before,
.tree-node.tree-drop-after::after {
    content: '';
    position: absolute;
    left: 0.4rem;
    right: 0.4rem;
    height: 2px;
    background: var(--accent);
    border-radius: 2px;
    pointer-events: none;
}
.tree-node.tree-drop-before::before { top: -1px; }
.tree-node.tree-drop-after::after { bottom: -1px; }

.tree-node:hover {
    background: var(--line2);
}

.tree-node.is-active {
    background: var(--accent-bg);
    color: var(--accent);
    font-weight: 600;
}

.tree-node.lv0 { --indent: 0px; }
.tree-node.lv1 { --indent: 14px; }
.tree-node.lv2 { --indent: 28px; }
.tree-node.lv3 { --indent: 42px; }
.tree-node.lv4 { --indent: 56px; }

.tree-indent { display: block; }

/* ===== 本棚行の共通ビジュアル (BookshelfUI.rowCore) ===== */
/* 見た目はここで一元化し、配置だけ各コンテナ (tree=grid / picker=flex) が決める */
.bsr-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bsr-count {
    font-size: 0.75rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}
/* ツリー内での配置 (アイコン・サイズ等は .bs-icon-frame グループ) */
.tree-node .bsr-icon { grid-column: 2; }
.tree-node .bsr-label { grid-column: 3; }
.tree-node .bsr-count { grid-column: 4; }

/* 選択可能な本棚行 (公開ページの本棚選択など。BookshelfUI.pickItem) */
/* 階層を保った選択ツリー (サイドバーのツリーと同じ borderless 行・親子インデント) */
.bs-pick-tree {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    max-height: 240px;
    overflow: auto;
    padding: 0.3rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
}
.bs-pick-row {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    width: 100%;
    text-align: left;
    padding: 0.35rem 0.5rem;   /* padding-left は depth で JS が上書き */
    border: 1px solid transparent;
    border-radius: 6px;
    background: none;
    cursor: pointer;
    font-size: 0.88rem;
    color: var(--fg2);
}
.bs-pick-row .bsr-label { flex: 1 1 auto; }
.bs-pick-row:hover { background: var(--line2); }
.bs-pick-row.is-selected { background: var(--accent-bg); color: var(--fg); }
.bsr-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    border: 1px solid var(--line);
    border-radius: 5px;
    color: transparent;
    background: var(--panel);
}
.bs-pick-row.is-selected .bsr-check { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ::after でタップ領域のみ拡張 (見た目は18pxのまま・密なツリー行の間隔は変えない)。
   #225 P7・#223 A8・イシュー#232 step2・ui-standards §2-24 */
.tree-toggle {
    position: relative;
    grid-column: 6;
    width: 18px;
    height: 18px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--muted);
    font-size: 0.8rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}
.tree-toggle::after {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    width: 36px;
    height: 36px;
    transform: translate(-50%, -50%);
}

.tree-toggle:hover {
    background: var(--line);
    color: var(--fg);
}

.tree-toggle-placeholder {
    grid-column: 6;
    width: 18px;
    height: 18px;
}

/* 本棚操作メニュー起動ボタン (Phase G) — 常時表示 (タッチでも届くように。旧: hover 限定で隠れていた) */
.tree-more {
    position: relative;
    grid-column: 5;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--muted);
    padding: 0;
    border-radius: 4px;
}
.tree-more::after {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    width: 36px;
    height: 36px;
    transform: translate(-50%, -50%);
}
.tree-node:hover .tree-more,
.tree-node.is-active .tree-more { color: var(--fg2); }
.tree-more:hover { background: var(--line); color: var(--accent); }

.tree-node-menu {
    position: fixed;
    /* z-index は管理役の data-layer (イシュー#367 step5・旧 1200 は撤去) */
    min-width: 170px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    padding: 0.3rem;
    display: flex;
    flex-direction: column;
}
.tree-node-menu button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.6rem;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.85rem;
    color: var(--fg);
    border-radius: 6px;
    text-align: left;
}
.tree-node-menu button:hover { background: var(--line2); }
.tree-node-menu button.is-danger { color: var(--danger); }
.tree-node-menu button.is-danger:hover { background: #fce8e8; }

/* ===== サイドバー折りたたみ (44px ストリップ) ===== */
.sidebar-strip,
.detail-strip {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
}

body.left-collapsed .app-sidebar .sidebar-nav,
body.left-collapsed .app-sidebar .pane-toolbar {
    display: none;
}
body.left-collapsed .app-sidebar .sidebar-strip { display: flex; }

body.right-collapsed .app-detail .detail-body,
body.right-collapsed .app-detail .pane-toolbar {
    display: none;
}
body.right-collapsed .app-detail .detail-strip { display: flex; }

.strip-restore-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--panel);
    cursor: pointer;
    color: var(--muted);
    font-size: 1rem;
}

.strip-restore-btn:hover {
    background: var(--line2);
    color: var(--fg);
}

.strip-label {
    writing-mode: vertical-rl;
    font-size: 0.7rem;
    color: var(--muted);
    letter-spacing: 0.1em;
    margin-top: 0.5rem;
}

/* ===== 右ペイン: 本詳細 ===== */
.detail-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0.75rem 1rem 1.25rem;
}

/* (重複定義) nav 全体はスクロールさせず、本棚ツリーだけ内部スクロール (#6) */
.sidebar-nav {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.detail-placeholder {
    text-align: center;
    color: var(--fg2);
    padding: 3rem 1rem;
    font-size: 0.9rem;
}

.detail-placeholder p:first-child {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

/* ===== 本詳細ペイン (mockup detail-pane-v2.html 準拠、Phase B-8 リライト) ===== */
.bd {
    padding: 0;
}

/* topbar (edit toggle 右寄せ)。イシュー#453・②決裁2026-11-02: position:sticky で
   .detail-body (overflow-y:auto) の先頭に貼り付け、スクロール位置やスマホのソフトキーボード
   表示に関わらず編集終了(=保存)ボタンが常に見える状態にする。.detail-body の padding
   (0.75rem 1rem 1.25rem) を negative margin で打ち消し、幅いっぱいの帯として浮かせる。 */
.bd-topbar {
    display: flex;
    justify-content: flex-end;
    position: sticky;
    top: -0.75rem;
    z-index: 2;
    margin: -0.75rem -1rem 0.5rem;
    padding: 0.75rem 1rem 0.5rem;
    background: var(--bg);
}
/* ::after でタップ領域だけ44pxに拡張 (見た目は変えない・#225 P7 残り・イシュー#258・ui-standards §2-24) */
.bd-edit-toggle {
    position: relative;
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 6px;
    border: 1px solid var(--line);
    background: var(--panel);
    color: var(--fg2);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.bd-edit-toggle::after {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
}
.bd-edit-toggle:hover { background: var(--accent-bg); color: var(--accent); border-color: var(--accent); }
.bd-edit-toggle.is-active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* cover (140px 固定 + 星 overlay) */
.bd-cover-wrap { display: flex; justify-content: center; }
.bd-cover {
    position: relative;
    aspect-ratio: 2/3;
    width: 140px;
    margin: 0 0 0.6rem;
    border-radius: 4px;
    background: var(--line2);
    box-shadow: 0 6px 16px rgba(0,0,0,0.15);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bd-cover img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.bd-cover-placeholder {
    color: var(--muted);
    opacity: 0.65;
}
/* ===== 表紙に重ねる星 (背景なし・縁取りで視認性確保) ===== */
.stars-overlay {
    position: absolute;
    right: 5px;
    bottom: 5px;
    display: inline-flex;
    gap: 1px;
    background: none;
    padding: 0;
    z-index: 2;
}
.stars-overlay .star { cursor: pointer; padding: 0; }
.stars-overlay .lucide-star {
    /* 暗い縁取り + うっすら影で、どんな表紙でも見える */
    filter: drop-shadow(0 0 1px rgba(0,0,0,0.9)) drop-shadow(0 1px 1px rgba(0,0,0,0.45));
    stroke-width: 1.75;
}
.stars-overlay .lucide-star.is-filled { fill: #ffb400; stroke: #fff; }
.stars-overlay .lucide-star.is-empty { fill: rgba(0,0,0,0.18); stroke: #fff; }

/* 後方互換: 旧クラス名 */
.bd-cover-stars { position: absolute; right: 5px; bottom: 5px; display: inline-flex; gap: 1px; }
.bd-cover-stars .star { cursor: pointer; }

.bd-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--fg);
    text-align: center;
}
.bd-author {
    color: var(--fg2);
    font-size: 0.85rem;
    text-align: center;
    margin: 0.15rem 0 0.6rem;
}

.bd-stars {
    color: #ffa500;
    margin: 0 0 0.7rem;
    display: flex;
    justify-content: center;
    gap: 0.1rem;
    align-items: center;
}
.bd-stars .star { cursor: pointer; }

/* ===== セクションカード ===== */
.bd-sections { display: block; }
.bd-section {
    background: var(--bg);
    border: 1px solid var(--line2);
    border-radius: 8px;
    margin-bottom: 0.6rem;
    padding: 0.55rem 0.7rem;
}
.bd.editing .bd-section {
    background: var(--panel);
    border-style: solid;
}
.bd-section.is-dragging { opacity: 0.45; }
.bd-section-drop-indicator {
    height: 3px;
    background: #3b82f6;
    border-radius: 2px;
    margin: 0 0 0.6rem;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}
.bd-section.has-context {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent-bg);
}
.bd-section-head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.4rem;
}
.bd-grip {
    display: inline-flex;
    cursor: grab;
    color: var(--muted);
    touch-action: none; /* Pointer Events が touch スクロールより優先 (イシュー#337) */
}
.bd-section-title {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    flex: 1;
}
.bd-section-title .h-icon { color: var(--muted); }
.bd-section.has-context .bd-section-title,
.bd-section.has-context .bd-section-title .h-icon { color: var(--accent); }

/* meta table */
.bd-meta {
    display: grid;
    grid-template-columns: 56px 1fr;
    row-gap: 0.18rem;
    font-size: 0.8rem;
}
.bd-meta-row {
    display: contents;
}
.bd-meta-row .k {
    color: var(--muted);
}
.bd-meta-row > span:not(.k) {
    color: var(--fg2);
}

.bd-chips-row {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
    align-items: center;
}
.bd-chip-add {
    background: var(--panel);
    border: 1px dashed var(--line);
    color: var(--muted);
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.76rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}
.bd-chip-add:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-bg); }

.bd-empty-note {
    color: var(--muted);
    font-size: 0.78rem;
    font-style: italic;
    margin: 0;
}

.bd-note-display {
    background: var(--bg);
    border: 1px solid var(--line2);
    padding: 0.55rem 0.7rem;
    border-radius: 6px;
    font-size: 0.85rem;
    color: var(--fg);
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}
.bd-note-display.is-fallback {
    color: var(--fg2);
}

.bd-textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 0.55rem 0.7rem;
    font-size: 0.85rem;
    color: var(--fg);
    min-height: 90px;
    resize: vertical;
    background: var(--panel);
    font-family: inherit;
    box-sizing: border-box;
}
.bd-textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-bg);
}

.bd-flags {
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.bd-flag-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: var(--fg2);
    cursor: pointer;
    user-select: none;
}
.bd-flag-label input { margin: 0; }

.bd-memo-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--accent);
    font-size: 0.82rem;
    text-decoration: none;
    background: var(--panel);
    cursor: pointer;
    font-family: inherit;
}
.bd-memo-link:hover { background: var(--accent-bg); border-color: var(--accent); }

.bd-save-status {
    margin-left: 0.4rem;
    font-size: 0.75rem;
    color: var(--muted);
}

.bd-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.9rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--line2);
}
.bd-actions .amazon-link,
.bd-actions .btn {
    /* 内容幅でコンパクトに。両ボタン同じ高さ・余白・字サイズで揃える */
    flex: 0 0 auto;
    white-space: nowrap;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 0.32rem 0.6rem;
    font-size: 0.76rem;
    line-height: 1.2;
    cursor: pointer;
    color: var(--fg2);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    text-decoration: none;
    font-family: inherit;
}
.bd-actions .amazon-link:hover { background: var(--accent-bg); color: var(--accent); border-color: var(--accent); }
.bd-actions .btn:hover { background: var(--line2); color: var(--fg); }
/* ::after でタップ領域の高さだけ44pxに拡張 (見た目は変えない・横長リンクのため幅は要素自身と同じにし
   隣接する除外ボタンとのgapを侵さない・#225 P7 残り・イシュー#258・ui-standards §2-24) */
.bd-actions .amazon-link { position: relative; }
.bd-actions .amazon-link::after {
    content: "";
    position: absolute;
    inset: 50% auto auto 0;
    width: 100%;
    height: 44px;
    transform: translateY(-50%);
}

/* タイトル直下の「Kindleで読む」= 読書の主 CTA。アクセント塗りで一段目立たせる */
.bd-read { display: flex; justify-content: center; margin: 0.1rem 0 0.5rem; }
.bd-read .kindle-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.42rem 1rem;
    background: var(--accent);
    color: #fff;
    border: 1px solid var(--accent);
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.12s, box-shadow 0.12s;
}
.bd-read .kindle-link:hover {
    background: var(--accent-strong, #4856e6);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 35%, transparent);
}
/* アイコンの既定色は var(--accent)。塗りボタン上では青背景に青で見えないので白に揃える */
.bd-read .kindle-link .h-icon { color: inherit; margin-right: 0; }
.bd-actions .btn-warning { color: var(--warning); }
.bd-actions .btn-warning:hover { background: var(--btn-warning-hover-bg); border-color: var(--warning); }
.bd-actions .btn-danger { color: var(--danger); }
.bd-actions .btn-danger:hover { background: var(--btn-danger-hover-bg); border-color: var(--danger); }

/* メタ詳細編集 (常時展開インライン・イシュー#453 案A・②決裁2026-11-02)
   旧 <details class="bd-meta-edit"> の折りたたみ入れ子 (ui-standards §7 原則6違反。
   専用の保存/キャンセルボタンも併せて撤去・保存は topbar の .bd-edit-toggle に統合)。 */
.bd-meta-edit-inline {
    margin: 0.6rem 0;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
}
.bd-meta-edit-inline .edit-field { margin-bottom: 0.5rem; }
.bd-meta-edit-inline .edit-field:last-child { margin-bottom: 0; }
.bd-meta-edit-inline .edit-field label {
    display: block;
    font-size: 0.75rem;
    color: var(--muted);
    margin-bottom: 0.2rem;
}
.bd-meta-edit-inline .edit-field input {
    width: 100%;
    padding: 0.4rem 0.55rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 0.82rem;
    background: var(--panel);
    color: var(--fg);
    box-sizing: border-box;
}
.bd-meta-edit-inline .edit-field input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-bg);
}

/* 本棚追加 inline popover */
.bd-add-bookshelf {
    display: flex;
    gap: 0.3rem;
    align-items: center;
    margin-top: 0.3rem;
}
.bd-add-bookshelf select {
    flex: 1;
    min-width: 0;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 0.8rem;
    background: var(--panel);
    color: var(--fg);
}

/* 旧 .book-detail-* セレクタの app-detail 上書きを撤廃 (.bd-* に置換済み) */
.app-detail .book-detail-cover-placeholder {
    display: none;
}

/* ===== 短文メモブロック (ALL + 各本棚 override) ===== */
.bd-memo-block {
    border: 1px solid var(--line);
    background: var(--panel);
    border-radius: 8px;
    padding: 0.55rem 0.7rem;
    margin: 0.4rem 0;
}
.bd-memo-block-head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.35rem;
}
.bd-memo-scope {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.74rem;
    padding: 0.15rem 0.5rem 0.15rem 0.4rem;
    border-radius: 999px;
    font-weight: 500;
}
.bd-memo-scope-all {
    background: var(--line2);
    color: var(--fg2);
}
.bd-memo-scope-bs {
    background: var(--accent-bg);
    color: var(--accent);
}
.bd-memo-scope .bd-chip-icon {
    display: inline-flex;
    align-items: center;
    background: transparent;
    border: none;
    width: auto;
    height: auto;
}
.bd-memo-block-remove {
    margin-left: auto;
    width: 18px;
    height: 18px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--muted);
    cursor: pointer;
    font-size: 0.8rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.bd-memo-block-remove:hover {
    background: var(--danger);
    color: #fff;
    border-color: var(--danger);
}
.bd-memo-block .bd-textarea {
    margin-bottom: 0.35rem;
}
.bd-memo-block .bd-note-display {
    background: transparent;
    border: none;
    padding: 0;
    border-radius: 0;
}
.bd-memo-block .save-note-status {
    margin-left: auto;
}

.bd-add-override {
    display: flex;
    gap: 0.3rem;
    align-items: center;
    margin-top: 0.4rem;
}
.bd-add-override-select {
    flex: 1;
    min-width: 0;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 0.8rem;
    background: var(--panel);
    color: var(--fg);
}

/* context (開いている本棚) のメモ block を強調 */
.bd-memo-block.is-context {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent-bg);
}

/* context chip 強調 */
.bd-chip.is-context {
    background: var(--accent);
    color: #fff;
}
.bd-chip.is-context .bd-chip-icon { color: #fff; }

/* ===== Icon Picker (Lucide 共通) ===== */
/* 重なり順は重なり管理役 (js/overlay-manager.js) が data-layer で決める (イシュー#367)。
   旧「z-index: 99999 !important で他モーダルより確実に上」は決め打ちの最大値による個別回避だったため撤去。
   大きさは小 (.ov-sm) = 管理役が付ける。 */

.icon-picker-tabs {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid var(--line);
    margin-bottom: 0.8rem;
}

.icon-picker-tab {
    padding: 0.5rem 1rem;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--muted);
    margin-bottom: -1px;
}

.icon-picker-tab:hover {
    color: var(--fg);
}

.icon-picker-tab.is-active {
    color: var(--accent);
    border-bottom-color: var(--accent);
    font-weight: 600;
}

.icon-picker-tab-content {
    display: block;
}

.icon-picker-tab-content[hidden] {
    display: none !important;
}

/* ===== 本棚アイコンの四角枠表示 (ヘッダーボタンと同じトーン) =====
   ツリー / popover / chip / カード / タイトル すべての本棚アイコンに適用。
   背景 #f9fafb + border + 角丸 で 「アイコンらしさ」 を統一。 */

.bs-icon-frame,
.bsr-icon,
.bs-popover-icon,
.bs-chip-icon,
.bs-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--line2);
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--accent);
    box-sizing: border-box;
    flex-shrink: 0;
}

/* サイズバリエーション */
.bsr-icon {
    /* ツリー / 本棚行 (16px icon) */
    width: 26px;
    height: 26px;
}

.bs-popover-icon {
    /* popover 内 (16px icon) */
    width: 26px;
    height: 26px;
}

.bs-chip-icon {
    /* 本詳細 chip (14px icon) */
    width: 22px;
    height: 22px;
}

.bs-card-icon {
    /* ホームカード (18px icon) */
    width: 30px;
    height: 30px;
    margin-right: 0.4rem;
    vertical-align: -3px;
}

/* ホバー (interactive な箇所のみ) */
.tree-node:hover .bsr-icon,
.bookshelf-popover-item:hover .bs-popover-icon {
    background: var(--accent-bg);
    border-color: #c9d2ff;
}

.tree-node.is-active .bsr-icon,
.bookshelf-popover-item.is-current .bs-popover-icon {
    background: var(--accent-bg);
    border-color: var(--accent);
}

/* ===== ヘッダーカスタマイザ行内のアイコン変更ボタン ===== */
.hdr-row-icon-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    padding: 0.25rem 0.4rem;
    margin: 0 0.15rem;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 6px;
    cursor: pointer;
    color: var(--accent);
    transition: background 0.1s, border-color 0.1s;
}

.hdr-row-icon-btn:hover {
    background: var(--line2);
    border-color: var(--accent);
}

.hdr-row-icon-btn svg {
    display: block;
}

.icon-picker-direct-row {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
    margin-bottom: 0.6rem;
}

.icon-picker-direct-row input {
    flex: 1;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 0.85rem;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

.icon-picker-direct-row .btn {
    flex-shrink: 0;
}

.icon-picker-direct-hint {
    font-size: 0.75rem;
    color: var(--muted);
    margin-bottom: 0.5rem;
}

.icon-picker-direct-hint a {
    color: var(--accent);
}

.icon-picker-direct-preview {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--accent);
    min-width: 130px;
    max-width: 200px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.icon-picker-search input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.icon-picker-grid {
    display: block;
    max-height: 50vh;
    overflow-y: auto;
    padding: 0.4rem;
    border: 1px solid var(--line2);
    border-radius: 6px;
    background: var(--line2);
}

.icon-picker-section-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--muted);
    margin: 0.4rem 0.2rem 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.icon-picker-section-label:first-child {
    margin-top: 0;
}

.icon-picker-section {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}

.icon-picker-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    padding: 0.4rem 0.2rem;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    background: var(--panel);
    color: var(--fg2);
    transition: background 0.1s, border-color 0.1s, color 0.1s;
}

.icon-picker-cell:hover {
    background: var(--line2);
    border-color: var(--line);
}

.icon-picker-cell.is-selected {
    background: var(--accent-bg);
    border-color: var(--accent);
    color: var(--accent);
}

.icon-picker-cell-name {
    font-size: 0.6rem;
    /* hover(--line2)・selected(--accent-bg)面で --muted だと 4.23:1/4.27:1 に沈むため --fg2 (実測 6.7 以上) */
    color: var(--fg2);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

.icon-picker-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--panel);
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--fg2);
}

.icon-picker-trigger:hover {
    background: var(--line2);
    border-color: var(--line);
}

.icon-picker-trigger-preview {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
}

/* ===== Lucide star (本詳細 / 本一覧の星評価) ===== */
.lucide-star {
    display: inline-block;
    vertical-align: middle;
}

.lucide-star.is-filled {
    fill: #ffa500;
    stroke: #ffa500;
}

.lucide-star.is-empty {
    fill: none;
    stroke: var(--line);
}

.star {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    padding: 0 1px;
    transition: transform 0.05s;
}

.star:hover {
    transform: scale(1.1);
}

/* hover 時、active class は使われずに JS で color 制御されていたが、
   Lucide 化に伴い hover prev も再実装する必要がある (後追い)。 */

/* ===== 本詳細 chip (pill 風 — accent-bg + Lucide icon) ===== */
.bd-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.5rem 0.2rem 0.45rem;
    border-radius: 999px;
    background: var(--accent-bg);
    color: var(--accent);
    font-size: 0.76rem;
    margin: 0.15rem 0.2rem 0.15rem 0;
    border: 1px solid transparent;
}

.bd-chip-icon {
    display: inline-flex;
    align-items: center;
    color: currentColor;
}

.bd-chip-remove {
    background: transparent;
    border: none;
    color: var(--accent);
    cursor: pointer;
    padding: 0 0.2rem;
    margin-left: 0.15rem;
    font-size: 0.85rem;
    line-height: 1;
    opacity: 0.7;
    border-radius: 50%;
}

.bd-chip-remove:hover {
    opacity: 1;
    background: rgba(255,255,255,0.6);
}

/* ===== Dashboard (UI-5) ===== */

.dashboard {
    width: 100%;
}

.dashboard-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--line);
}

.dashboard-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--fg);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.dashboard-title .h-icon { color: var(--accent); }

.dashboard-toolbar-actions {
    display: flex;
    gap: 0.5rem;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1rem;
}

/* 蔵書ありの可能性が高い端末では、最初の描画前(index.htmlのinline script)で隠す。
   showWelcome=trueと判明した時点でdashboard.js render()がhtml側のクラスを外す
   (フラッシュ防止・イシュー#265)。 */
html.bs-likely-has-data #dashboard-welcome {
    display: none;
}

/* 初回オンボーディング (蔵書0のときだけ) */
.dashboard-welcome {
    position: relative;
    background: linear-gradient(160deg, var(--panel, #fff), var(--surface-2, #f4f1f7));
    border: 1px solid var(--line, #ece7ef);
    border-radius: 14px;
    padding: 1.1rem 1.3rem 1.3rem;
    margin-bottom: 1rem;
}
.dashboard-welcome .dw-close {
    position: absolute; top: 0.6rem; right: 0.6rem;
    width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
    border: 0; background: transparent; border-radius: 6px; cursor: pointer; color: var(--muted, #6b6675);
}
.dashboard-welcome .dw-close:hover { background: var(--surface-3, #ece7f1); }
.dashboard-welcome .dw-title { display: flex; align-items: center; gap: 0.4rem; margin: 0 0 0.15rem; font-size: 1.1rem; }
.dashboard-welcome .dw-title .h-icon { color: var(--accent, #3d52ff); }
.dashboard-welcome .dw-sub { margin: 0 0 0.9rem; color: var(--muted, #6b6675); font-size: 0.86rem; }
.dashboard-welcome .dw-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
/* grid化(イシュー#232 step2): flexだとwrap判定がdw-bodyの内容の自然幅を基準にするため、
   狭幅でdw-num単独が1行目に浮いてdw-bodyだけ2行目へ落ちる(#223 S1=#225 P1)。
   gridならnum/body/btnが独立した列に確定配置され、狭幅ではbtnの列だけ2行目へ明示的に送れる。 */
.dashboard-welcome .dw-step { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.8rem; }
.dashboard-welcome .dw-num {
    width: 26px; height: 26px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--accent, #3d52ff); color: #fff; font-size: 0.82rem; font-weight: 700;
}
.dashboard-welcome .dw-step.is-done .dw-num { background: var(--success, #3aa657); }
.dashboard-welcome .dw-body { min-width: 0; display: flex; flex-direction: column; }
.dashboard-welcome .dw-body strong { font-size: 0.92rem; }
.dashboard-welcome .dw-body span { font-size: 0.8rem; color: var(--muted, #6b6675); }
.dashboard-welcome .dw-step .btn:disabled { opacity: 0.45; cursor: not-allowed; }
@media (max-width: 560px) {
    .dashboard-welcome .dw-step { grid-template-columns: auto 1fr; }
    .dashboard-welcome .dw-step .btn { grid-column: 1 / -1; margin-left: 36px; margin-top: 0.4rem; }
}

.dashboard-widget {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    min-height: 100px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.dashboard-widget.span-3 { grid-column: span 3; }
.dashboard-widget.span-4 { grid-column: span 4; }
.dashboard-widget.span-6 { grid-column: span 6; }
.dashboard-widget.span-8 { grid-column: span 8; }
.dashboard-widget.span-9 { grid-column: span 9; }
.dashboard-widget.span-12 { grid-column: span 12; }

.dashboard-grid.is-edit-mode .dashboard-widget {
    cursor: grab;
    border-style: dashed;
}

.add-widget-card {
    grid-column: span 12;
    background: transparent;
    border: 2px dashed var(--line);
    border-radius: 10px;
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.2rem;
    cursor: pointer;
    font-size: 0.9rem;
    transition: color 0.1s, border-color 0.1s, background 0.1s;
}

.add-widget-card:hover {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-bg);
}

.dashboard-widget.is-dragging {
    opacity: 0.5;
}

/* イシュー#398: _bindPointerReorder (#337) の挿入位置インジケータ。12列gridに挟まるため
   全幅(1/-1)にして横線として見せる (.plugin-drop-indicator と同じ見た目の考え方)。 */
.widget-drop-indicator {
    grid-column: 1 / -1;
    height: 3px;
    background: var(--accent, #3d52ff);
    border-radius: 2px;
    margin: 0;
    box-shadow: 0 0 0 2px rgba(61, 82, 255, 0.2);
}

.widget-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding-bottom: 0.4rem;
    margin-bottom: 0.4rem;
    border-bottom: 1px solid var(--line2);
    font-size: 0.8rem;
    color: var(--muted);
}

.widget-grip {
    color: var(--muted);
    cursor: grab;
    user-select: none;
    font-weight: bold;
}

.widget-title {
    flex: 1;
    font-weight: 600;
}

.widget-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.widget-size-select {
    font-size: 0.75rem;
    padding: 0.1rem 0.3rem;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--panel);
    color: var(--fg);
}

.widget-remove-btn {
    width: 22px;
    height: 22px;
    border: 1px solid #fecaca;
    background: var(--panel);
    color: #dc2626;
    border-radius: 4px;
    cursor: pointer;
    line-height: 1;
    font-size: 1rem;
    padding: 0;
}

.widget-remove-btn:hover {
    background: #fee2e2;
}

.widget-body {
    flex: 1;
    min-height: 50px;
    overflow: hidden;
}

/* ===== ウィジェット個別スタイル ===== */

/* カウンター: 大きな数字 + 単位 */
.widget-big-number {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    justify-content: center;
    padding: 0.5rem 0;
}

.bn-value {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--accent);
    line-height: 1;
    letter-spacing: -0.02em;
}

.bn-sub {
    font-size: 0.85rem;
    color: var(--muted);
}

/* #4: カウンターは常時色違いをやめ、hover/focus 時のみ accent 反転 */
.dashboard-widget.is-counter {
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.dashboard-widget.is-counter:hover,
.dashboard-widget.is-counter:focus-within {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.dashboard-widget.is-counter:hover .widget-header,
.dashboard-widget.is-counter:focus-within .widget-header {
    color: rgba(255, 255, 255, 0.85);
    border-bottom-color: rgba(255, 255, 255, 0.15);
}
.dashboard-widget.is-counter:hover .bn-value,
.dashboard-widget.is-counter:focus-within .bn-value { color: #fff; }
.dashboard-widget.is-counter:hover .bn-sub,
.dashboard-widget.is-counter:focus-within .bn-sub { color: rgba(255, 255, 255, 0.85); }

/* 見出しウィジェット (Phase H) */
.dashboard-widget.is-heading {
    background: none;
    border: none;
    box-shadow: none;
    min-height: 0;
    padding: 0.3rem 0.2rem;
}
.dashboard-grid:not(.is-edit-mode) .dashboard-widget.is-heading .widget-header { display: none; }
.widget-heading-text {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--fg);
    padding: 0.3rem 0;
    border-bottom: 2px solid var(--line);
}
.widget-heading-input {
    width: 100%;
    font-size: 1rem;
    font-weight: 700;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-family: inherit;
    color: var(--fg);
}

/* ウィジェット追加モーダル (Phase H) */
.widget-picker-overlay {
    position: fixed;
    inset: 0;
    /* z-index は管理役の data-layer (イシュー#367 step5・旧 1100 は撤去) */
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
.widget-picker-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 17, 24, 0.45);
    backdrop-filter: blur(2px);
}
.widget-picker-panel {
    position: relative;
    margin-top: 12vh;
    width: min(540px, 92vw);
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    animation: cmdk-in 0.12s ease;
}
.widget-picker-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--line2);
    font-weight: 600;
    color: var(--fg);
}
.widget-picker-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--muted);
    display: inline-flex;
    padding: 4px;
    border-radius: 6px;
}
.widget-picker-close:hover { background: var(--line2); color: var(--fg); }
.widget-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.6rem;
    padding: 1rem;
    overflow-y: auto;
}
.widget-picker-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 0.9rem 0.5rem;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 10px;
    cursor: pointer;
    font-family: inherit;
    color: var(--fg2);
    transition: border-color 0.12s, background 0.12s, color 0.12s;
}
.widget-picker-item:hover { border-color: var(--accent); background: var(--accent-bg); color: var(--accent); }
.wpi-icon { display: inline-flex; }
.wpi-label { font-size: 0.8rem; }

/* 最近追加した本: 横スクロール */
.widget-book-row {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.3rem;
}

.widget-book-cell {
    flex: 0 0 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 0.3rem;
    cursor: pointer;
    transition: background 0.1s, border-color 0.1s;
}

.widget-book-cell:hover {
    background: var(--line2);
    border-color: var(--accent);
}

.widget-book-cell img {
    width: 64px;
    height: 96px;
    object-fit: cover;
    border-radius: 3px;
}

.widget-book-cell-placeholder {
    width: 64px;
    height: 96px;
    background: var(--line2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    border-radius: 3px;
}

.widget-book-cell-title {
    font-size: 0.7rem;
    color: var(--fg2);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.2;
}

/* 今日の一冊: 大きめ */
.widget-today-pick {
    width: 100%;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem;
}

.widget-today-pick img {
    width: 90px;
    height: 130px;
    object-fit: cover;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.widget-today-pick-placeholder {
    width: 90px;
    height: 130px;
    background: var(--line2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    border-radius: 4px;
}

.widget-today-pick-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--fg);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.widget-today-pick-author {
    font-size: 0.75rem;
    color: var(--muted);
    text-align: center;
}

/* 本棚ハイライト: 既存の .bookshelves-grid をそのまま使う */
.widget-bookshelves-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

/* ヒートマップ */
/* 読書統計 (組み込み: 旧 reading-stats プラグインを既定機能化)
   蔵書数 / 年別取得 / 評価分布 / 本棚別 Top5 を 1 つのウィジェットに集約 */
.widget-reading-stats { padding: 0.2rem 0; }
.rs-total { font-size: 1rem; margin-bottom: 0.5rem; }
.rs-total strong { font-variant-numeric: tabular-nums; }
.rs-block { margin-bottom: 0.6rem; }
.rs-block:last-child { margin-bottom: 0; }
.rs-h { font-size: 0.72rem; color: var(--muted, var(--muted)); margin-bottom: 0.25rem; }
.rs-row { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.rs-k { width: 48px; font-size: 0.72rem; text-align: right; flex: 0 0 auto; color: var(--muted, #6b7280); }
.rs-v { width: 36px; font-size: 0.72rem; text-align: right; flex: 0 0 auto; font-variant-numeric: tabular-nums; color: var(--fg2, #374151); }
.rs-track { flex: 1; height: 14px; background: var(--line2, #f3f4f6); border-radius: 3px; overflow: hidden; }
.rs-fill { height: 100%; border-radius: 3px; min-width: 2px; }
.rs-fill.rs-y { background: var(--accent); }
.rs-fill.rs-r { background: var(--accent-strong, var(--accent)); }
.rs-shelves { list-style: none; margin: 0; padding: 0; }
.rs-shelves li { display: flex; justify-content: space-between; font-size: 0.78rem; padding: 1px 0; }
.rs-shelves li strong { font-variant-numeric: tabular-nums; }
.rs-empty { font-size: 0.74rem; color: var(--muted, var(--muted)); }

/* ピン留めメモ */
.widget-pinned-memo {
    width: 100%;
    height: 100%;
    min-height: 80px;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 0.5rem;
    font-family: inherit;
    font-size: 0.85rem;
    resize: vertical;
}

.widget-pinned-memo:focus {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

/* ===== レスポンシブ: 後日対応 (媒体幅 < 1024px は一旦未対応) ===== */

/* ===== Filter Popover の内側スタイル (popover-filter クラスで適用) ===== */
/* ===== 並び替え / フィルター / 表示 popover (刷新 2026-06-07) ===== */
/* .popover.popover-filter で base .popover の left/transform より優先 */
.popover.popover-filter {
    width: 260px;
    min-width: 0;
    /* ツールバー右寄せボタンから開くので右端揃え (画面外へはみ出さない) */
    left: auto;
    right: 0;
    transform: none;
    padding: 0;
    overflow: hidden;
}
.popover-filter .fp-section {
    padding: 0.7rem 0.85rem;
}
.popover-filter .fp-section + .fp-section {
    border-top: 1px solid var(--line, var(--line2));
    box-shadow: inset 0 2px 3px -2px rgba(0,0,0,.14);
    background: var(--side);
}
.popover-filter .fp-section-title {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--muted, #8a90a0);
    text-transform: none;
    margin-bottom: 0.5rem;
}
.popover-filter .fp-select {
    width: 100%;
    padding: 0.4rem 0.55rem;
    border: 1px solid var(--line, var(--line));
    border-radius: 7px;
    font-size: 0.9rem;
    background: var(--panel, #fff);
    color: var(--fg, #1c1f24);
}
.popover-filter .fp-sort-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.popover-filter .fp-sort-row .fp-select { flex: 1; }
.popover-filter .fp-dir-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--line, var(--line));
    border-radius: 7px;
    background: var(--side, #fbfbfd);
    color: var(--fg, #1c1f24);
    font-size: 0.82rem;
    cursor: pointer;
}
.popover-filter .fp-dir-btn:hover { background: var(--accent-bg, #eef0ff); border-color: var(--accent, #3d52ff); }
.popover-filter .fp-dir-btn .h-icon { display: inline-flex; }
.popover-filter .fp-hint {
    margin: 0.5rem 0 0;
    font-size: 0.74rem;
    color: var(--muted, var(--line));
    line-height: 1.45;
}

/* 星評価フィルター行 */
/* 評価でしぼり込み: 連結セグメント (案A)。タップした評価だけ表示 / 無選択=全部 */
.fp-section-titlerow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.fp-section-titlerow .fp-section-title { margin-bottom: 0; }
.fp-reset {
    border: 1px solid transparent;
    background: transparent;
    color: var(--muted);
    width: 24px; height: 24px;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.fp-reset:hover { background: var(--side); border-color: var(--line); color: var(--fg2); }
.fp-reset .h-icon { display: inline-flex; }

.rating-seg {
    display: flex;
    border: 1px solid var(--line);
    border-radius: 9px;
    overflow: hidden;
}
.rating-seg .rseg {
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.12rem;
    padding: 0.45rem 0.2rem;
    font-size: 0.8rem;
    font-family: inherit;
    color: var(--fg2);
    background: var(--panel);
    border: 0;
    border-left: 1px solid var(--line);
    cursor: pointer;
    white-space: nowrap;
}
.rating-seg .rseg:first-child { border-left: 0; }
.rating-seg .rseg[data-rating="0"] { flex: 1.55 1 0; }
.rating-seg .rseg .h-icon { display: inline-flex; color: #cfd2db; }
.rating-seg .rseg:hover { background: var(--side); }
.rating-seg .rseg.on {
    background: var(--accent-bg);
    color: var(--accent-strong);
    font-weight: 700;
}
.rating-seg .rseg.on .h-icon svg { fill: var(--warning, #f0a020); stroke: var(--warning, #f0a020); }

/* ツールバーの絞り込みボタン: 適用中インジケータ (色 + 右上ドット) */
.btn-icon-square.has-active-filter {
    position: relative;
    color: var(--accent-strong);
    border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
    background: var(--accent-bg);
}
.btn-icon-square.has-active-filter::after {
    content: "";
    position: absolute;
    top: 2px; right: 2px;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--accent);
    border: 1.5px solid var(--panel);
}

#current-bookshelf-title {
    color: var(--primary-color, var(--fg));
    margin: 0 0 1rem 0;
    font-size: 1.4rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color, var(--line));
}

.filter-section h3, .stats-section h3 {
    margin-bottom: 1rem;
    color: var(--primary-color);
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 0.5rem;
}

.filter-section > summary {
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary-color);
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--border-color);
    list-style: none;
    user-select: none;
}

.filter-section > summary::-webkit-details-marker { display: none; }

.filter-section > summary::before {
    content: '▸ ';
    transition: transform 0.15s;
}

.filter-section[open] > summary::before {
    content: '▾ ';
}

.filter-group {
    margin-bottom: 1rem;
}

.filter-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--text-color);
}

.filter-group select {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    font-size: 0.9rem;
}

/* Stats Section */
.stats {
    display: grid;
    gap: 0.5rem;
}

.stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-color);
}

.stat-item:last-child {
    border-bottom: none;
}

.stat-value {
    font-weight: bold;
    font-size: 1.2rem;
    color: var(--secondary-color);
}

.stat-label {
    font-size: 0.9rem;
    color: var(--muted);
}

/* Bookshelf Container */
.bookshelf-container {
    flex: 1;
    background: var(--panel);
    border-radius: 10px;
    padding: 2rem;
    box-shadow: 0 2px 10px var(--shadow-color);
}

/* 起動ローディング: C-277 で「初回・新端末のときだけ出る」ものになった。
   2026-09-30 (イシュー#265): 全画面オーバーレイをやめ、上端の細い帯に変更。
   #dashboard 側に静的な初期HTML(ようこそ案内)を置くようになったため (LCP改善)、
   同期完了まで下を覆い隠す必要がなくなった。position:absolute で上端に重ねるのは
   従来どおり (通常フローに置くと、消えた瞬間に #view-main が高さぶん詰まって
   跳ねる=CLS。#223 L1・イシュー#232 step2)。親 .bookshelf-container.app-main-pane は
   position:relative 済み。 */
.loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-align: center;
    padding: 0.55rem 1rem;
    color: var(--fg2);
    background: var(--panel);
    border-bottom: 1px solid var(--line);
    z-index: 2;
}
.loading-spinner {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--line);
    border-top-color: var(--accent);
    animation: bs-spin 0.8s linear infinite;
    flex-shrink: 0;
}
.loading-text {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--fg2);
}
.loading-sub {
    font-size: 0.8rem;
    color: var(--muted);
}
.loading-sub:empty {
    display: none;
}
@keyframes bs-spin {
    to { transform: rotate(360deg); }
}

/* Bookshelf Grid */
.bookshelf {
    display: grid;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

/* Cover View */
.bookshelf.view-covers {
    grid-template-columns: repeat(auto-fill, minmax(var(--book-width), 1fr));
}

/* 一覧 0 件の空状態 (grid なら全幅にまたがる) */
.bookshelf-empty {
    grid-column: 1 / -1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.4rem; padding: 56px 20px; text-align: center; color: var(--muted, #6b6675); min-height: 32vh;
}
/* 純装飾アイコンだが視認性のため罫線色(--line2)は使わない。--muted は薄さを残しつつ AA 装飾基準(3:1)を満たす */
.bookshelf-empty .bse-icon { color: var(--muted, #6b7280); line-height: 0; margin-bottom: 0.3rem; }
.bookshelf-empty .bse-icon svg { width: 32px; height: 32px; }
.bookshelf-empty .bse-title { font-size: 1rem; font-weight: 600; color: var(--text, #241f2b); margin: 0; }
.bookshelf-empty .bse-sub { font-size: 0.85rem; margin: 0; max-width: 26rem; line-height: 1.6; }
.bookshelf-empty .btn { margin-top: 0.7rem; }

/* List View */
.bookshelf.view-list {
    grid-template-columns: 1fr;
    gap: 0.5rem;
}

/* Images View (画像のみ = 表紙ウォール, T03)。グリッドは covers と同じ。
   book-info を出力しないため、カード高さ = 表紙高さのみ */
.bookshelf.view-images {
    grid-template-columns: repeat(auto-fill, minmax(var(--book-width), 1fr));
}

/* Hybrid View */
.bookshelf.view-hybrid {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Phase H2-7 改: 本一覧の描画仮想化を CSS で行う (JS 仮想化は撤去)。
   画面外の本カードは content-visibility:auto でブラウザがレイアウト/描画をスキップ →
   ALL 約2400冊でも初期レイアウトが激減し、スクロールはネイティブで滑らか (再描画なし)。
   contain-intrinsic-size の auto は「一度表示した実寸を記憶」してスクロールバーのドリフトを抑える。
   高さ推定値: 表紙=330px / リスト=112px。幅は grid トラックが決めるので推定値で十分。
   ※ GPU 有効の実ブラウザ向け。ソフトウェアレンダリング (CI ヘッドレス等) では大量要素で
     描画が詰まることがあるため、自動テストでは別途留意。 */
.bookshelf.view-covers .book-item {
    content-visibility: auto;
    contain-intrinsic-size: auto 330px;
}
.bookshelf.view-list .book-item {
    content-visibility: auto;
    contain-intrinsic-size: auto 112px;
}
/* 画像のみ: テキスト分を含まない表紙の実高さで推定 (サイズ設定に追従) */
.bookshelf.view-images .book-item {
    content-visibility: auto;
    contain-intrinsic-size: auto var(--book-height);
}


/* Book Item Styles */
.book-item {
    position: relative;
    transition: all 0.3s ease;
    cursor: pointer;
}
/* カスタム順のときだけ本をドラッグ並べ替え可。grab カーソルで「動かせる」を示す */
.bookshelf.is-custom-order .book-item { cursor: grab; }
.bookshelf.is-custom-order .book-item.dragging { cursor: grabbing; }

.book-item:hover {
    /* Phase B-8: アニメ削除 (translateY -5px はうるさい) */
}

/* Cover Display */
.book-cover-container {
    position: relative;
    width: var(--book-width);
    height: var(--book-height);
    margin: 0 auto;
}

.book-cover {
    width: 100%;
    height: 100%;
    /* Phase B-8: 縦横比保持 + 余白で位置揃え (cover → contain)、画像がタイトルに被らない */
    object-fit: contain;
    /* 全表紙を枠の下端に揃える (棚に立てて並ぶ配置)。縦横比でばらつく余白を
       上側に寄せ、表紙下端〜タイトルの間隔を全カードで一定にする。 */
    object-position: center bottom;
    background: var(--line2);
    border-radius: 6px;
    box-shadow: 0 2px 8px var(--shadow-color);
}

.book-cover-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    text-align: center;
    padding: 1rem;
    font-size: 0.9rem;
    line-height: 1.3;
}

/* 読み込み失敗時に JS (_setupCoverFallback) が差し込む生成表紙。
   グリッド以外の小さい面 (ウィジェット・本棚カード等) でも収まるよう控えめに */
.cover-fallback {
    padding: 0.4rem;
    font-size: 0.72rem;
    overflow: hidden;
    min-height: 40px;
    aspect-ratio: 2 / 3;
    box-sizing: border-box;
}

/* Book Info */
.book-info {
    text-align: center;
    margin-top: 0.75rem;
    padding: 0 0.5rem;
}

.book-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 0.25rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.book-author {
    font-size: 0.75rem;
    color: var(--muted);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Kindle 取込のステータスバッジ (イシュー#41)。「利用終了」= 中立、KU/Prime = accent。
   flex 子要素は日本語の文字単位折返しを防ぐため white-space: nowrap を必須にする (ui-standards §2-15) */
.book-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    justify-content: center;
    margin-top: 0.25rem;
}

.book-badge {
    display: inline-block;
    font-size: 0.7rem;
    padding: 0.05rem 0.4rem;
    border-radius: 8px;
    background: var(--line2);
    color: var(--fg2);
    white-space: nowrap;
}

.book-badge-accent {
    background: var(--accent-bg);
    color: var(--accent);
}

/* イシュー#484: 重複ASIN検出バッジ (warning色。既存の book-badge 型を踏襲) */
.book-badge-warn {
    background: var(--btn-warning-hover-bg);
    color: var(--warning);
}

/* イシュー#484: 本詳細の重複ASIN案内。既存の .btn-warning と同系統の warning 色 */
.bd-dup-asin-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin-top: 0.5rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--warning);
    border-radius: 6px;
    background: var(--btn-warning-hover-bg);
    color: var(--warning);
    font-size: 0.85rem;
}

.bd-dup-asin-notice .h-icon {
    flex-shrink: 0;
}

.cover-badges-layer {
    position: absolute;
    top: 0.3rem;
    left: 0.3rem;
    z-index: 2;
    display: flex;
    gap: 0.2rem;
}

.book-memo {
    font-size: 0.74rem;
    color: var(--fg2);
    margin-top: 0.45rem;
    padding: 0.4rem 0.55rem;
    background: var(--line2);
    border-radius: 7px;
    line-height: 1.5;
    text-align: left;
    word-wrap: break-word;
    overflow-wrap: break-word;
    /* 文字数制限 + 3 行で固定 → カード高さが揃う */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: calc(1.5em * 3 + 0.8rem);
}
/* リスト表示は横幅があるので 2 行で十分 */
.bookshelf.view-list .book-memo {
    -webkit-line-clamp: 2;
    height: calc(1.5em * 2 + 0.8rem);
}

/* List View Styles */
.bookshelf.view-list .book-item {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--panel);
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

.bookshelf.view-list .book-cover-container {
    width: 60px;
    height: 80px;
    margin-right: 1rem;
    flex-shrink: 0;
}

.bookshelf.view-list .book-info {
    text-align: left;
    margin-top: 0;
    flex: 1;
}

.bookshelf.view-list .book-title {
    font-size: 1rem;
    -webkit-line-clamp: 1;
}

.bookshelf.view-list .book-author {
    font-size: 0.85rem;
}

/* Status Badges */
.status-badge {
    position: absolute;
    top: 5px;
    right: 5px;
    padding: 0.2rem 0.5rem;
    font-size: 0.7rem;
    border-radius: 12px;
    color: white;
    font-weight: bold;
}

.status-read {
    background-color: #27ae60;
}

.status-unknown {
    background-color: #95a5a6;
}


/* Hybrid View */
.all-books-section {
    margin-bottom: 2rem;
}

.section-title {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--primary-color);
    border-bottom: 2px solid var(--secondary-color);
    padding-bottom: 0.5rem;
}


.all-books-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
}

/* Modal Styles */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 1000;
    overflow-y: auto;
}

.modal.show {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.modal-content {
    background: var(--panel);
    border-radius: 12px;
    max-width: 900px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 24px 64px rgba(0,0,0,0.18), 0 6px 16px rgba(0,0,0,0.08);
}

/* top:20px は .modal-header (padding-top:1.4rem + h2の行高さの半分) の縦中心に合わせた値
   (元は10pxで.modal-headerのタイトルと10pxずれていた, #225 P2・イシュー#232 step2)。
   .modal-header を持たないモーダルの×はタイトルが無いためこの数値に依存しない。 */
.modal-close {
    position: absolute;
    top: 20px;
    right: 12px;
    width: 32px;
    height: 32px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    color: var(--muted);
    z-index: 10;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.modal-close:hover {
    background: var(--line2);
    color: var(--fg);
    border-color: var(--line);
}

.modal-body {
    padding: 2rem;
    padding-top: 3rem;
}

/* 長文メモ専用モーダル: 全画面に近いサイズで EasyMDE を快適に */
.book-memo-modal-content {
    max-width: 1100px;
    height: 90vh;
    display: flex;
    flex-direction: column;
}

.book-memo-modal-body {
    flex: 1;
    overflow: hidden;
    padding: 1rem 1.5rem 0;
    display: flex;
    flex-direction: column;
}

/* 長文メモの外枠B型ヘッダー(イシュー#282)。.art-fs-hd/.art-fs-title 自体の宣言は
   `#art-edit-view[data-art-mode="form"] .art-fs-hd` (このファイル内) にスコープされ
   #book-memo-modal には当たらないため、同じ値をここで複製する(新規デザインは起こさない)。
   .book-memo-modal-body の最初の子として差し込むため、EasyMDEツールバーと同じ水平paddingを
   共有し、完了ボタンの右端とツールバーの右端が自然に揃う。 */
#book-memo-modal .art-fs-hd {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 0 0 10px; border-bottom: 1px solid var(--line); margin-bottom: 10px;
}
.book-memo-fs-title-col { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }

.book-memo-modal-body .EasyMDEContainer {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.book-memo-modal-body .EasyMDEContainer .CodeMirror,
.book-memo-modal-body .EasyMDEContainer .editor-preview-side {
    flex: 1;
    min-height: 0;
    height: auto !important;
}

/* EasyMDEツールバー共通 (長文メモ・文章ブロック全画面の両方、②決裁2026-10-12・イシュー#281「案1」):
   アイコン(SVG 20px)の下に10pxラベルを縦に並べる (_mdeApplyToolbarLabels が button.innerHTML を
   アイコン+ラベルのspan 2つに差し替えて .mde-iconized クラスを付与)。見せ方は下部アクションバー
   (#art-edit-bottom-bar .art-bar-btn 参照) に揃える。flex: 1 1 0 でツールバー幅に均等配分し、
   7ボタン(スマホ/PC右ペイン)・14ボタン+区切り(PC全幅長文メモ)のいずれも1段に収まる (_local/issue280/
   boxes.json で実測済みの型)。
   js/vendor/easymde.min.css は _ensureEasyMDELoaded() が実行時に <head> 末尾へ動的追加するため
   このファイル(index.htmlで静的に先読み)より後にロードされ、同じ詳細度の `.editor-toolbar button`
   (height:30px・min-width:30px・padding:0 6px 等) が後勝ちでこちらを上書きしてしまう罠がある
   (イシュー#276)。.mde-iconized は余分なクラス1つ分だけ詳細度が高く勝つが、念のため !important も残す。 */
.editor-toolbar.mde-iconized {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 2px 0 !important;
}
.editor-toolbar.mde-iconized button {
    flex: 1 1 0 !important;
    min-width: 44px !important;
    min-height: 44px !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 3px 1px !important;
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    color: var(--fg2) !important;
    font-size: 10px !important;
    font-weight: 400 !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
}
.editor-toolbar.mde-iconized button.active,
.editor-toolbar.mde-iconized button:hover { background: var(--side) !important; }
.editor-toolbar.mde-iconized .mde-tb-ico { width: 20px; height: 20px; display: block; }
.editor-toolbar.mde-iconized .mde-tb-ico svg { width: 100%; height: 100%; display: block; }
.editor-toolbar.mde-iconized .mde-tb-lbl { font-size: 10px; white-space: nowrap; }
/* EasyMDE公式の区切り (`<i class="separator">`、ツールバー直下の button 兄弟要素) を細い縦線に */
.editor-toolbar.mde-iconized i.separator {
    display: inline-block !important;
    width: 1px !important; height: 24px !important;
    background: var(--line) !important; margin: auto 4px !important; border: none !important; opacity: 1 !important;
}
.editor-toolbar.mde-iconized button.active { background: var(--side) !important; }

/* 見出しボタンの3択メニュー (イシュー#282・ハヘロ精査後の方針)。_placeAnchoredMenuが
   position(top/left)を付与する(.art-more-menuと同型)。クリックのたびに生成し閉じたら
   DOMごと消す(永続パネルを持たない=#282 step3の「その他」パネル孤児化バグを踏まない設計)。 */
.mde-heading-menu {
    position: fixed; z-index: 1300; min-width: 11rem; padding: 0.3rem;
    background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
    box-shadow: 0 8px 24px rgba(16, 24, 40, 0.14); display: grid;
}
.mde-heading-item {
    display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; width: 100%;
    padding: 0.5rem 0.6rem; margin: 0; border: none; border-radius: 6px;
    background: none; cursor: pointer; font: inherit; font-size: 0.84rem;
    color: var(--fg); text-align: left;
}
.mde-heading-item:hover { background: var(--accent-bg); }
.mde-heading-check { width: 16px; height: 16px; flex: 0 0 auto; visibility: hidden; }
.mde-heading-item.is-current .mde-heading-check { visibility: visible; }


/* 長文メモ設定 */
.memo-config-row label {
    display: block;
    font-weight: 600;
    color: var(--fg);
    font-size: 0.92rem;
    margin-bottom: 0.5rem;
}

.memo-config-row select {
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--panel);
    font-size: 0.9rem;
    color: var(--fg);
    min-width: 280px;
}

.memo-config-hint {
    font-size: 0.78rem;
    color: #6c7a8a;
    margin-top: 0.5rem;
    line-height: 1.5;
}

/* Book Detail Styles */
.book-detail-header {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 2rem;
    align-items: flex-start;
}

.book-detail-cover {
    width: 120px;
    height: 180px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    flex-shrink: 0;
}

.book-detail-cover-placeholder {
    width: 120px;
    height: 180px;
    background: linear-gradient(135deg, var(--line2), var(--line));
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: #6c757d;
    flex-shrink: 0;
}

.book-detail-info {
    flex: 1;
    min-width: 0;
}

/* Book Links Styles */
.book-links {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    display: flex;
    gap: 0.5rem;
}

.book-link {
    padding: 0.15rem 0.5rem;
    border-radius: 3px;
    text-decoration: none;
    font-size: 0.7rem;
    font-weight: 500;
    transition: all 0.2s ease;
    border: 1px solid;
    text-align: center;
    width: fit-content;
}

.book-links .book-link.amazon-link {
    background-color: #ff9500;
    color: white;
    border-color: #ff9500;
    padding: 0.15rem 0.5rem !important;
    border-radius: 3px !important;
    margin: 0 !important;
    font-weight: 500 !important;
}

.book-links .book-link.amazon-link:hover {
    background-color: #e6850e;
    border-color: #e6850e;
    transform: none !important;
    box-shadow: none !important;
}

.book-link.detail-link {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
}

.book-link.detail-link:hover {
    background-color: #0056b3;
    border-color: #0056b3;
}

.book-cover-link {
    display: block;
    text-decoration: none;
    /* 表紙画像が枠 (--book-height) を満たすよう高さを通す。
       これが無いと img height:100% が auto 親に対して効かず、画像が幅基準の
       バラバラな高さで上揃えになり、表紙下端〜タイトル間隔が本ごとにずれる。 */
    height: 100%;
}

/* ASIN Input Container */
.asin-input-container {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.asin-input-container input {
    flex: 1;
}

/* 色は .btn-secondary の規約色に任せる (旧 #007bff 直指定は C-277 で撤去) */
.asin-input-container .btn {
    white-space: nowrap;
    flex-shrink: 0;
}

.asin-status {
    margin-top: 0.5rem;
    padding: 0.5rem;
    border-radius: 4px;
    font-size: 0.9rem;
}

.asin-status.loading {
    background-color: #e3f2fd;
    color: #1976d2;
    border: 1px solid #bbdefb;
}

.asin-status.success {
    background-color: #e8f5e8;
    color: #2e7d32;
    border: 1px solid #c8e6c9;
}

.asin-status.error {
    background-color: #ffebee;
    color: #c62828;
    border: 1px solid #ffcdd2;
}

/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-top: 2rem;
}

.pagination button {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    background: var(--panel);
    cursor: pointer;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.pagination button:hover:not(:disabled) {
    background-color: var(--secondary-color);
    color: white;
}

.pagination button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pagination .current-page {
    background-color: var(--secondary-color);
    color: white;
    border-color: var(--secondary-color);
}

/* Responsive Design */
@media (max-width: 900px) {
    :root {
        --book-width: 120px;
        --book-height: 180px;
    }
    
    .container {
        flex-direction: column;
        gap: 1rem;
    }
    
    .bookshelf-container {
        width: 100%;
    }

    /* 旧モバイル用 .popover ボトムシート指定はここから撤去。
       この媒体ブロックは base .popover (後方) より前にあるため position/top/left/transform
       だけが base で上書きされ、bottom:0 が残って top+bottom 両指定 → 高さが潰れていた
       (フィルター等が 2px に折りたたまれる不具合)。正しいモバイル調整は末尾のメディアブロックへ。 */

    .bookshelf.view-covers {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 1rem;
    }
    
    .modal-content {
        margin: 1rem;
        max-height: 85vh;
    }
}

@media (max-width: 480px) {
    :root {
        --book-width: 100px;
        --book-height: 150px;
    }
    
    .bookshelf.view-covers {
        grid-template-columns: repeat(3, 1fr);
    }
    
}

/* Animation & Transitions */
.book-item {
    animation: fadeInUp 0.6s ease-out;
}
/* 差分描画で使い回したカードは登場アニメをやり直さない。並び替えで800枚が一斉に出直し約1秒固まっていた (イシュー#387) */
.book-item.bk-settled {
    animation: none;
}
/* 見た目の好みを変えた行の直下の「この端末に記録しました」(表示形式・並び順・表紙の大きさ共通・イシュー#387) */
.device-saved-note {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--muted);
}
.device-saved-note[hidden] { display: none; }

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* .loading は spinner で動きを出すため pulse は付けない (干渉防止) */

@keyframes pulse {
    from {
        opacity: 0.6;
    }
    to {
        opacity: 1;
    }
}

/* Highlight Section in Modal */
.book-highlights {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 2px solid var(--border-color);
}

.highlight-item {
    background: var(--line2);
    padding: 1rem;
    margin-bottom: 1rem;
    border-left: 4px solid var(--secondary-color);
    border-radius: 0 5px 5px 0;
}

.highlight-text {
    font-style: italic;
    margin-bottom: 0.5rem;
}

.highlight-note {
    font-size: 0.9rem;
    color: var(--muted);
}

/* Export Section */
.export-section {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 2px solid var(--border-color);
}

.export-note {
    font-size: 0.8rem;
    color: var(--muted);
    margin-top: 0.5rem;
    text-align: center;
}

/* Amazon Link Styles */
.amazon-link {
    display: inline-block;
    background-color: #ff9500;
    color: white;
    padding: 0.75rem 1.5rem;
    text-decoration: none;
    border-radius: 25px;
    font-weight: bold;
    margin: 1rem 0;
    transition: all 0.3s ease;
}

.amazon-link:hover {
    background-color: #e6850e;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255, 149, 0, 0.3);
}

/* Note Help Text */
.note-help {
    font-size: 0.8rem;
    color: var(--muted);
    margin-top: 0.5rem;
    font-style: italic;
}

/* Button Layout Improvements */
.book-actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 1rem;
}

/* Bookshelf Management Styles */
.bookshelf-controls {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

/* .btn-outline は V6 で未使用 (header は btn-icon-square に統一)。互換のため最小定義のみ残す。 */
.btn-outline {
    background-color: transparent;
    color: var(--text-color);
    border: 1px solid var(--line);
}

.btn-outline:hover {
    background-color: var(--bg);
}

.modal-header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    /* タイトルを角に密着させない: 上・左右に十分な余白を取る (左は本文の 2rem と揃える / 右は閉じるボタン分を確保) */
    padding: 1.4rem 56px 0.85rem 2rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 2px 3px -1px rgba(0,0,0,.1);
    gap: 1rem;
}

.modal-header h2 {
    margin: 0;
    flex: 1;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--fg);
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.modal-header .btn {
    margin-left: auto;
}

.bookshelf-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.85rem 1rem;
    margin-bottom: 0.5rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
    transition: border-color 0.12s, box-shadow 0.12s;
}
.bookshelf-item:hover {
    border-color: var(--line);
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}

.bookshelf-info h4 {
    margin: 0 0 0.5rem 0;
    color: var(--primary-color);
}

.bookshelf-info p {
    margin: 0 0 0.5rem 0;
    color: var(--muted);
    font-size: 0.9rem;
}

.book-count {
    font-size: 0.8rem;
    color: var(--secondary-color);
    font-weight: bold;
}

.bookshelf-actions {
    display: flex;
    gap: 0.5rem;
}

.bookshelf-actions select {
    padding: 0.25rem;
    margin-right: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 3px;
    font-size: 0.85rem;
}

.bookshelf-select {
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    font-size: 0.9rem;
    background: var(--panel);
    color: var(--text-color);
}

.add-to-bookshelf {
    background-color: var(--secondary-color);
    color: white;
    border: none;
}

/* Bookshelf Overview Styles */
.bookshelves-overview {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 2px solid var(--border-color);
}

.bookshelves-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

.bookshelf-preview {
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 1rem 1.2rem;
    background: var(--panel);
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
    /* Phase B-8c: 説明文の有無で位置がずれないよう grid 化、各行の高さを固定 */
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    row-gap: 0.4rem;
    min-height: 180px;
}

.bookshelf-preview:hover {
    border-color: var(--accent);
    box-shadow: 0 4px 12px var(--shadow);
}

.bookshelf-preview h3 {
    margin: 0;
    color: var(--fg);
    font-size: 1rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.bookshelf-preview p {
    margin: 0;
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.4;
    /* Phase B-8c: 説明文が無くても高さ保持で位置ずれ防止 */
    min-height: 1.4em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bookshelf-preview-books {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.bookshelf-preview-book {
    width: 40px;
    height: 60px;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 2px 5px var(--shadow-color);
}

.bookshelf-preview-book img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bookshelf-preview-placeholder {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.7rem;
    font-weight: bold;
}

.bookshelf-preview.text-only .bookshelf-preview-books {
    display: none;
}

/* ===== Settings Modal ===== */
.settings-modal-content {
    /* 大きさは大 (lg) = 管理役が .ov-lg を付ける (max-width: min(900px, 100vw-40px)・イシュー#367 ハヘロ 05:40「設定は大」)。
       幅の上限はここに書かず .ov-lg に任せる (旧 720px 固定は撤去) */
    width: 100%;
    display: flex;
    flex-direction: column;
    height: min(680px, 88vh);
    max-height: 90vh;
    overflow: hidden;
}

/* 設定モーダル下部の固定フッタ (スクロール最下部でも閉じやすく) */
.settings-modal-footer {
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: flex-end;
    gap: 0.7rem;
    padding: 0.75rem 2rem;
    border-top: 1px solid var(--line);
    background: var(--panel);
    z-index: 5;
}

/* Collapsible settings sections (details/summary) */
.settings-section {
    margin-bottom: 0.6rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--line2);
    overflow: hidden;
}
.settings-section:last-child {
    margin-bottom: 0;
}
.settings-section > summary.settings-section-title {
    list-style: none;
    cursor: pointer;
    margin: 0;
    padding: 0.7rem 1rem;
    background: var(--bg);
    color: var(--fg);
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    user-select: none;
    transition: background 0.12s;
}
.settings-section > summary.settings-section-title::-webkit-details-marker { display: none; }
.settings-section > summary.settings-section-title::marker { content: ''; }
.settings-section > summary.settings-section-title::before {
    content: '▶';
    font-size: 0.65rem;
    color: var(--muted);
    transition: transform 0.18s;
    width: 0.9rem;
    text-align: center;
    flex-shrink: 0;
}
.settings-section[open] > summary.settings-section-title::before {
    transform: rotate(90deg);
}
.settings-section > summary.settings-section-title:hover {
    background: var(--line);
}
.settings-section[open] > summary.settings-section-title {
    border-bottom: 1px solid var(--line);
}
.settings-section-body {
    padding: 1rem;
}

/* ===== 設定 master-detail (ADR-047 P2) =====
   iOS設定アプリ型: 一覧 (#settings-master) → カテゴリを押すと全画面 detail。
   PC では左レール (master) + 右ペイン (detail) の 2 ペインに化ける。
   ‹戻る=一覧へ1段 / ×=閉じる。フッターの「閉じる」は廃止。 */
.settings-md-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0 0.5rem 0 0.9rem;
    min-height: 52px;
    border-bottom: 1px solid var(--line);
    margin: 0;
}
.settings-md-header h2 { flex: 1 1 auto; margin: 0; min-width: 0; }
/* ←戻り先の名前 (イシュー#511 X1・docs/ui-standards.md §7c§3): #settings-back(← 設定)・#settings-modal-close
   (← ホーム) の両方がこのクラス。アイコン+文字・タップ領域44px以上。PC(901px超)はどちらも出さない (下の
   @media min-width:901px で非表示)。旧 × (.modal-close) はここでは使わない。
   ②差し戻し(2026-11-03 step4): #settings-modal-close はDOM順ではh2の後ろ(帯の右端)にあったため、
   order:-1で見出しの帯の左端に出す(記事の編集の「← 記事の一覧」と同じ位置に揃える・#497 B1) */
.settings-md-back {
    order: -1;
    flex: 0 0 auto;
    min-height: 44px; padding: 0 0.7rem; gap: 0.3rem;
    display: inline-flex; align-items: center; justify-content: center;
    border: none; background: transparent; color: var(--fg2);
    border-radius: 8px; cursor: pointer; font-size: 0.9rem; white-space: nowrap;
}
.settings-md-back .h-icon { color: inherit; }
.settings-md-back:hover { background: var(--line2); color: var(--fg); }
/* hidden 属性を尊重 (.btn 同様 display 明示が UA の [hidden] を上書きするため) */
.settings-md-back[hidden] { display: none; }

/* 本文ラッパー (modal-body は付けず padding を自前管理) */
.settings-md-body { padding: 0; }

/* 一覧 (master) */
.settings-master { display: block; padding: 0.3rem 0; }
.settings-cat {
    display: flex; align-items: center; gap: 0.75rem; width: 100%;
    padding: 0.7rem 1rem; background: transparent; border: none;
    border-top: 1px solid var(--line2); box-shadow: inset 0 2px 3px -2px rgba(0,0,0,.12); cursor: pointer; text-align: left;
    color: var(--fg); font: inherit;
}
.settings-master .settings-cat:first-child { border-top: none; }
.settings-cat:hover { background: var(--line2); }
.settings-cat-ic {
    flex: 0 0 auto; width: 32px; height: 32px; border-radius: 9px;
    background: var(--accent-bg); color: var(--accent);
    display: flex; align-items: center; justify-content: center;
}
.settings-cat-ic .h-icon { color: var(--accent); }
.settings-cat-tx { flex: 1 1 auto; min-width: 0; }
.settings-cat-tt { display: block; font-size: 0.95rem; font-weight: 600; line-height: 1.25; }
.settings-cat-ds { display: block; font-size: 0.74rem; color: var(--muted); margin-top: 2px; line-height: 1.25; }
.settings-cat-chev { flex: 0 0 auto; color: #c4c9d2; }

/* 詳細 (各 details を pane として 1 つだけ表示) */
.settings-detail { min-width: 0; }
.settings-detail > .settings-section {
    display: none;
    margin: 0; border: none; border-radius: 0; background: var(--panel); overflow: visible;
}
.settings-detail > .settings-section.pane-active { display: block; }
/* 節見出し (アコーディオン summary) は非表示。タイトルはヘッダー/レールが担う */
.settings-detail > .settings-section > summary.settings-section-title { display: none; }
.settings-detail > .settings-section > .settings-section-body { padding: 1rem 1.1rem 1.4rem; }

/* PC (>=901px): 左レール + 右ペインの 2 ペイン（独立スクロール）。境目はjs/ui/viewport.js(900px)と揃える(イシュー#505)。 */
@media (min-width: 901px) {
    .settings-md-header { flex-shrink: 0; }
    .settings-md-body { display: flex; align-items: stretch; flex: 1 1 auto; min-height: 0; overflow: hidden; }
    .settings-master {
        flex: 0 0 210px; padding: 0.6rem 0.5rem; overflow-y: auto;
        border-right: 1px solid var(--line); background: var(--line2);
    }
    .settings-cat {
        border-top: none; border-radius: 9px; padding: 0.55rem 0.6rem; gap: 0.55rem;
        margin-bottom: 2px;
    }
    .settings-master .settings-cat:first-child { border-top: none; }
    .settings-cat-ic { width: 26px; height: 26px; border-radius: 7px; background: transparent; color: var(--muted); }
    .settings-cat-ic .h-icon { color: inherit; }
    .settings-cat-tt { font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .settings-cat-ds, .settings-cat-chev { display: none; }
    .settings-cat.cat-active { background: var(--accent-bg); }
    .settings-cat.cat-active .settings-cat-tt { color: var(--accent); }
    .settings-cat.cat-active .settings-cat-ic,
    .settings-cat.cat-active .settings-cat-ic .h-icon { color: var(--accent); }
    .settings-detail { flex: 1 1 auto; overflow-y: auto; min-height: 0; }
    .settings-md-back { display: none !important; }
}

/* スマホ (<=900px): 一覧 or 詳細 を data-settings-view で全画面切替。境目はjs/ui/viewport.js(900px)と揃える(イシュー#505)。 */
@media (max-width: 900px) {
    .settings-modal-content[data-settings-view="master"] .settings-detail { display: none; }
    .settings-modal-content[data-settings-view="detail"] .settings-master { display: none; }
    /* 一覧=← ホーム・詳細=← 設定 (#settings-back) のみ。詳細では←ホームを出さない (イシュー#511 X1 §4-2) */
    .settings-modal-content[data-settings-view="detail"] #settings-modal-close { display: none; }
    /* 縦スクロールの受け皿。無指定だと .settings-modal-content の overflow:hidden で
       中身が切り捨てられ、スクロールできない (2026-07-28 本人実機報告) */
    .settings-md-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ===== 設定画面 整列 (ADR-047 P5) =====
   各設定行 = ラベル → コントロール → ヒント の縦積み。行間は CSS で一定
   (インライン margin-top は廃止)。ラベル太字・コントロール幅上限で整列。
   publish-config / sync-method-row / action-row / subsection-title の整列は
   後方の既存定義側に集約して二重化を避ける。 */

/* --- 1 設定 = 1 行 (memo-config-row) --- */
.settings-section-body .memo-config-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.3rem 0;
}
/* 連続する設定行は一定間隔で離す (旧インライン margin-top:0.9rem の置き換え) */
.settings-section-body .memo-config-row + .memo-config-row {
    margin-top: 1.1rem;
}
.settings-section-body .memo-config-row > label {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--fg2);
    display: block;
}
/* チェックボックス行はコントロールの直下に詰める */
.settings-section-body .memo-config-row .checkbox-label {
    margin-top: 0.4rem;
    font-weight: 400;
}

/* --- コントロール幅の上限を全セクションで統一 (横ガタつきを抑える) --- */
.settings-section-body .memo-config-row select,
.settings-section-body .memo-config-row input[type="text"],
.settings-section-body .memo-config-row input[type="url"] {
    max-width: 360px;
    width: 100%;
}
.memo-config-hint { display: block; font-size: 0.77rem; color: var(--muted); margin: 0.2rem 0 0; line-height: 1.5; }

/* About section (footer 内容を移動) */
.about-credit,
.about-links {
    margin: 0.4rem 0;
    color: #4a4a4a;
    font-size: 0.9rem;
}
.about-affiliate {
    background: #fff8e1;
    color: #6b5400;
    padding: 0.7rem 0.9rem;
    border-radius: 6px;
    border-left: 3px solid #ffd34d;
    font-size: 0.85rem;
    margin: 0.6rem 0;
    line-height: 1.5;
}
.about-credit a,
.about-links a {
    color: var(--secondary-color, #4a90e2);
    text-decoration: none;
}
.about-credit a:hover,
.about-links a:hover {
    text-decoration: underline;
}

/* path card: パス + 変更ボタン + ステータスを 1 つのカードにまとめる */
.path-card {
    background: var(--line2);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.path-card-header {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.6rem;
}

.path-card-icon {
    font-size: 1.1rem;
}

.path-card-label {
    font-weight: 600;
    color: var(--fg);
    font-size: 0.95rem;
}

.path-card-hint {
    font-size: 0.8rem;
    color: var(--muted);
}

.path-card-hint code {
    background: var(--line2);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.85em;
}

.path-card-body {
    margin-bottom: 0.8rem;
}

.path-display {
    display: block;
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
    font-size: 0.9rem;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 0.5rem 0.7rem;
    color: var(--fg2);
    word-break: break-all;
    min-height: 1.4em;
    line-height: 1.4;
}

.path-display.unset {
    color: var(--muted);
    font-style: italic;
}

.path-card-footer {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
}

.path-status {
    font-size: 0.85rem;
    color: var(--muted);
    flex: 1;
    min-width: 0;
}

/* 同期方式セレクタ */
/* 統一方針 (C-271): ラベル→コントロールの縦積み。説明をカード枠で囲わない */
.sync-method-row {
    display: block;
    margin-bottom: 1.1rem;
}

.sync-method-row > label {
    display: block;
    font-weight: 600;
    color: var(--fg2);
    font-size: 0.88rem;
    margin-bottom: 0.35rem;
}

.sync-method-row select {
    min-width: 0;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--panel);
    font-size: 0.9rem;
    color: var(--fg);
}

.sync-method-hint {
    font-size: 0.78rem;
    color: #6c7a8a;
    flex-basis: 100%;
}

.sync-config-panel[hidden] {
    display: none;
}

/* Asayake ハブ (ADR-032/033): Google ログインボタン・使用量バー・プランバッジ */
.hub-gsi-button {
    margin: 0.2rem 0 0.7rem;
    min-height: 40px;
}
/* ログイン済み⇄保存先として使用中 の差を明示するラベル (H-3) */
.hub-active-state {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin: 0.1rem 0 0.6rem;
    padding: 0.5rem 0.7rem;
    border-radius: 6px;
    font-size: 0.85rem;
    line-height: 1.45;
    background: color-mix(in srgb, var(--warning) 12%, transparent);
    color: var(--fg);
    border: 1px solid color-mix(in srgb, var(--warning) 35%, transparent);
}
.hub-active-state.is-active {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}
.hub-active-state > .h-icon { flex: 0 0 auto; margin-top: 0.1rem; }
.hub-plan-note {
    font-size: 0.8rem;
    color: var(--fg2);
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin: 0.2rem 0 0;
}
/* flex 直下の生テキスト混在で語順が崩れるのを防ぐ: アイコンは固定、本文は単一インライン要素で受ける */
.hub-plan-note > .h-icon { flex: 0 0 auto; margin-top: 0.15rem; }
.hub-plan-note > span:not(.h-icon) { flex: 1 1 auto; min-width: 0; }
.github-auth-connected-msg .acc-id { min-width: 0; overflow-wrap: anywhere; }
.hub-plan-badge {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: var(--bg3, #eef0f5);
    color: var(--fg2);
    line-height: 1.6;
}
.hub-plan-badge.is-plus {
    background: var(--accent);
    color: #fff;
}
.hub-usage {
    margin: 0.5rem 0 0.7rem;
}
.hub-usage-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.3rem;
}
.hub-usage-text {
    font-size: 0.82rem;
    color: var(--fg2);
    font-variant-numeric: tabular-nums;
}
.hub-usage-bar {
    height: 8px;
    border-radius: 999px;
    background: var(--bg3, #eef0f5);
    overflow: hidden;
}
.hub-usage-fill {
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background: var(--accent);
    transition: width 0.3s ease, background 0.3s ease;
}
.hub-usage-fill.is-warn { background: var(--warning, #a06800); }
.hub-usage-fill.is-full { background: var(--danger, #c23a3a); }

/* アカウント (ログイン) セクション */
.account-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.7rem; }
.account-legal-note { margin: 0.6rem 0 0; font-size: 0.76rem; color: var(--muted); }
.account-legal-note a { color: var(--muted); }
.account-consent { display: flex; align-items: flex-start; gap: 0.5rem; margin: 0.2rem 0 0.7rem; font-size: 0.85rem; line-height: 1.5; cursor: pointer; }
.account-consent input[type="checkbox"] { flex: 0 0 auto; }
.account-consent a { color: var(--accent); }

/* 課金 (アップグレード / 支払い管理, ADR-035) */
.account-billing { margin: 0.7rem 0; }
.account-upgrade-lead { margin: 0 0 0.45rem; font-size: 0.85rem; color: var(--muted, #6b6477); line-height: 1.5; }
.account-upgrade-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
#account-manage-billing { margin-top: 0.2rem; }
/* Plus 課金状態 (周期・次回更新日・解約予約) */
.account-plan-detail { margin: 0 0 0.55rem; font-size: 0.82rem; line-height: 1.5; }
.account-plan-period { color: var(--fg2, #4b5460); font-weight: 600; }
.account-plan-cancel { display: block; margin-top: 0.15rem; color: var(--warning, #a06800); }
.account-plan-detail.is-canceling .account-plan-period { color: var(--warning, #a06800); }
/* comp (管理者付与 Plus) 向け案内・支払い遅延警告 (イシュー#231) */
.account-comp-notice { display: flex; align-items: flex-start; gap: 0.35rem; margin: 0 0 0.55rem; font-size: 0.82rem; color: var(--muted, #6b6477); line-height: 1.5; }
.account-comp-notice .h-icon { flex: 0 0 auto; margin-top: 0.15rem; }
.account-comp-notice a { color: var(--accent); }
.account-past-due-notice { display: flex; align-items: flex-start; gap: 0.35rem; margin: 0 0 0.55rem; font-size: 0.82rem; color: var(--warning, #a06800); line-height: 1.5; }
.account-past-due-notice .h-icon { flex: 0 0 auto; margin-top: 0.15rem; color: var(--warning, #a06800); }
/* 管理者: プラン手動切替 (ADR-038) */
.account-admin { margin: 0.7rem 0; padding: 0.6rem 0.7rem; border: 1px dashed var(--line, #ece7ef); border-radius: 9px; background: var(--surface-2, #f7f5fa); }
.account-admin-title { margin: 0 0 0.25rem; font-size: 0.82rem; font-weight: 600; color: var(--fg2, #4b5460); display: flex; align-items: center; gap: 0.35rem; }
.account-admin-hint { margin: 0 0 0.45rem; font-size: 0.78rem; color: var(--muted, #6b6477); line-height: 1.5; }
.account-admin-row { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.account-admin-row input { flex: 1 1 12rem; min-width: 0; padding: 0.35rem 0.5rem; border: 1px solid var(--line, #ece7ef); border-radius: 7px; font-size: 0.85rem; }
.account-admin-result { margin: 0.4rem 0 0; font-size: 0.8rem; color: var(--fg2, #4b5460); }
/* 記事の通報ダイアログ・通報の審査パネル (ADR-099) */
.report-target-url { word-break: break-all; color: var(--fg2, #4b5460); }
.report-error { margin: 0.4rem 0 0; font-size: 0.85rem; color: var(--danger, #c23a3a); }
.report-actions { display: flex; gap: 0.6rem; justify-content: flex-end; margin-top: 1rem; }
.report-actions .btn { white-space: nowrap; }
.report-review-list { margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.5rem; }
.report-item { padding: 0.5rem 0.6rem; border: 1px solid var(--line, #ece7ef); border-radius: 8px; background: var(--panel, #fff); }
.report-item-title { font-size: 0.85rem; font-weight: 600; word-break: break-all; }
.report-item-title a { color: var(--accent-strong, var(--accent)); text-decoration: none; }
.report-item-title a:hover { text-decoration: underline; }
.report-item-meta { margin-top: 0.15rem; font-size: 0.78rem; color: var(--fg2, #4b5460); }
.report-item-reason { margin-top: 0.15rem; font-size: 0.78rem; color: var(--fg2, #4b5460); white-space: pre-wrap; word-break: break-word; }
.report-item-actions { margin-top: 0.4rem; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.report-item-actions .btn { white-space: nowrap; }

/* 公開URLのユーザー名 (S6・ADR-076) */
.account-username { margin: 0.7rem 0; }
.account-username-label { margin: 0 0 0.3rem; font-size: 0.82rem; font-weight: 600; color: var(--fg2, #4b5460); display: flex; align-items: center; gap: 0.35rem; }
.account-username-current { margin: 0 0 0.5rem; font-size: 0.85rem; color: var(--fg2, #4b5460); }
.account-username-current.is-unset { color: var(--warning, #a06800); }
.account-username-row { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.account-username-row input { flex: 1 1 12rem; min-width: 0; padding: 0.35rem 0.5rem; border: 1px solid var(--line, #ece7ef); border-radius: 7px; font-size: 0.85rem; }
.account-username-error { margin: 0.4rem 0 0; font-size: 0.8rem; color: var(--danger, #c23a3a); }
.account-username-hint { margin: 0.4rem 0 0; font-size: 0.76rem; color: var(--fg2, #4b5460); line-height: 1.5; }
.account-username-hint code { font-size: 0.75rem; }

/* サイドバー: アカウント状態チップ */
.sidebar-account-chip {
    display: flex; align-items: center; gap: 0.5rem; width: 100%;
    padding: 0.5rem 0.6rem; margin-bottom: 0.4rem;
    background: var(--surface-2, #f4f1f7); border: 1px solid var(--line, #ece7ef);
    border-radius: 9px; cursor: pointer; color: var(--text, #241f2b);
    font-size: 0.82rem; text-align: left; transition: background 0.15s, border-color 0.15s;
}
.sidebar-account-chip:hover { background: var(--surface-3, #ece7f1); }
.sidebar-account-chip.is-connected { border-color: var(--accent, #3d52ff); }
.sidebar-account-chip .sac-icon { color: var(--muted); flex: 0 0 auto; display: inline-flex; }
.sidebar-account-chip.is-connected .sac-icon { color: var(--accent, #3d52ff); }
.sidebar-account-chip .sac-label {
    flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.sidebar-account-chip .sac-plan {
    flex: 0 0 auto; font-size: 0.68rem; font-weight: 700; padding: 0.08rem 0.4rem;
    border-radius: 999px; background: #e7e3ee; color: var(--muted);
}
.sidebar-account-chip .sac-plan.is-plus { background: var(--accent, #3d52ff); color: #fff; }
body.left-collapsed .app-sidebar .sidebar-account-chip { display: none; }

/* GitHub Device Flow UI */
.github-auth-msg {
    font-size: 0.88rem;
    color: var(--fg2);
    line-height: 1.5;
    margin: 0 0 0.7rem;
}

.github-auth-msg a {
    color: #4a90e2;
    text-decoration: none;
    font-weight: 600;
}

.github-auth-msg a:hover {
    text-decoration: underline;
}

.github-auth-connected-msg {
    font-size: 0.92rem;
    color: var(--fg);
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin: 0 0 0.8rem;
}

.github-auth-status {
    font-size: 0.85rem;
    color: #6c7a8a;
    margin: 0.5rem 0;
}

.github-device-code-box {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--line2);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 0.7rem 1rem;
    margin: 0.5rem 0 0.8rem;
}

.github-device-code-box code {
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--fg);
    flex: 1;
    text-align: center;
    user-select: all;
}

/* GitHub App 未インストール時の誘導 */
.github-install-prompt {
    background: #fef3c7;
    border: 1px solid #fcd34d;
    border-radius: 6px;
    padding: 0.7rem 0.9rem;
    margin: 0.5rem 0;
    font-size: 0.85rem;
    color: #92400e;
    line-height: 1.6;
}

.github-install-prompt a {
    color: #b45309;
    font-weight: 600;
    text-decoration: none;
}

.github-install-prompt a:hover {
    text-decoration: underline;
}

.github-install-hint {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.78rem;
    color: #78350f;
    line-height: 1.5;
}

/* basePath 入力欄 + browse ボタン */
.basepath-row {
    display: flex;
    flex: 1;
    gap: 0.4rem;
    align-items: center;
    min-width: 0;
}

.basepath-row input {
    flex: 1;
    min-width: 0;
}

/* basePath リポジトリ内ブラウザ */
.github-basepath-browser {
    margin: 0.5rem 0;
    background: var(--line2);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 0.6rem 0.9rem;
}

.github-basepath-browser[hidden] {
    display: none;
}

.github-basepath-browser summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--fg);
    font-size: 0.88rem;
}

.basepath-browser-body {
    margin-top: 0.7rem;
}

.basepath-browser-current {
    font-size: 0.85rem;
    color: var(--fg2);
    margin-bottom: 0.4rem;
}

.basepath-browser-current code {
    background: var(--panel);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
    font-size: 0.85rem;
    border: 1px solid var(--line);
    color: var(--fg);
}

.basepath-browser-controls {
    display: flex;
    gap: 0.4rem;
    margin: 0.5rem 0;
    flex-wrap: wrap;
}

.basepath-browser-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 260px;
    overflow-y: auto;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 4px;
}

.basepath-browser-list li {
    padding: 0.35rem 0.7rem;
    border-bottom: 1px solid var(--line2);
    font-size: 0.86rem;
}

.basepath-browser-list li:last-child {
    border-bottom: none;
}

.basepath-browser-list a {
    color: #4a90e2;
    text-decoration: none;
}

.basepath-browser-list a:hover {
    text-decoration: underline;
}

.basepath-browser-list .basepath-file span {
    color: var(--muted);
}

/* GitHub 設定フォーム (接続後) */
.github-form {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-bottom: 0.5rem;
}

/* ラベルを入力の上に積む縦構造。ラベル長がバラついても横位置がずれない (旧 min-width 横並びを廃止)。 */
.github-form label {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    font-size: 0.83rem;
    color: var(--fg2);
}

.github-form .form-label {
    font-weight: 600;
}

/* 子孫セレクタ(直接の子 `>` ではない): #github-base-path は保存先選択ボタンと並べるため
   label 直下に span.basepath-row を挟んでおり(孫要素)、`label > input` だと当たらず
   ブラウザ既定の見た目のまま取り残されていた (#223 S2・イシュー#232 step2)。 */
.github-form label input,
.github-form label select {
    width: 100%;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--line);
    border-radius: 4px;
    font-size: 0.88rem;
    background: var(--panel);
    color: var(--fg);
    font-weight: normal;
    min-width: 0;
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
}

.github-form label input:focus,
.github-form label select:focus {
    border-color: #4a90e2;
    outline: none;
    box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.15);
}

/* セクションのアクションボタン群はラップ横並びで整列 (3つ以上でも収まる) */
.settings-action-row,
.settings-action-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* アクション中心セクション (蔵書): ボタン + 一言説明の縦積み (C-277)。
   横並びボタン羅列はスマホで折り返して不揃いになり、用途も伝わらない */
.settings-action-stack {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}
.action-stack-item {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.action-stack-item .btn {
    width: auto;
    align-self: flex-start;
}
.action-stack-desc {
    margin: 0;
    font-size: 0.8rem;
    color: var(--muted);
    line-height: 1.5;
}

/* プラグイン開発ガイドへの誘導 (設定プラグイン節の末尾)。
   文中リンクを含むため flex にしない (テキストが折り返しで分断される) */
.plugin-dev-link { margin-top: 1rem; }
.plugin-dev-link .h-icon { display: inline-flex; vertical-align: -0.15em; margin-right: 0.3rem; }

.publish-config {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0.6rem 0 1rem;
    padding: 0.8rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--bg2);
}

.publish-config .form-label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--fg2);
    margin-top: 0.7rem;
}
/* 先頭ラベルは上余白なし (塊の区切りは 2 つ目以降に付ける) */
.publish-config > .form-label:first-child { margin-top: 0; }

.publish-config select {
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.92rem;
    background: var(--panel);
    color: var(--fg);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.publish-config select:hover { border-color: #a8acb3; }
.publish-config select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(91, 108, 255, 0.15);
}

.publish-config-hint {
    color: var(--fg3, #888);
    font-size: 0.78rem;
    line-height: 1.5;
}

/* 公開先切替の残存警告 */
.publish-switch-warn {
    margin: 0.4rem 0 0;
    padding: 0.5rem 0.7rem;
    border-radius: 6px;
    background: rgba(212, 145, 0, 0.1);
    border: 1px solid var(--warning, #a06800);
    color: var(--fg2);
    font-size: 0.8rem;
    line-height: 1.5;
}
.publish-switch-warn[hidden] { display: none; }

/* 公開先 (github / hub) ごとの設定ブロック */
.publish-target-config {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--line);
}
.publish-target-config[hidden] { display: none; }

/* 公開先の変更 (折りたたみ・ADR-099): 通常は触らない設定なので、閉じているときは 1 行の目立たない見出しだけにする */
/* .pp-advanced (後方の共通定義) と同じ詳細度になるため、クラスを重ねて必ず勝たせる (ui-standards §2-13) */
.pp-advanced.publish-target-details { background: transparent; margin-top: 0.6rem; }
.pp-advanced.publish-target-details > summary { padding: 0.5rem 0.8rem; font-size: 0.82rem; font-weight: 600; color: var(--fg2); }
.pp-advanced.publish-target-details > summary .h-icon:first-child { flex: 0 0 auto; }
.pp-advanced.publish-target-details > .pp-advanced-body { padding: 0 0.8rem 0.8rem; display: flex; flex-direction: column; gap: 0.4rem; }
.pp-advanced.publish-target-details > .pp-advanced-body > .form-label:first-child { margin-top: 0; }
.publish-index-note[hidden] { display: none; }

/* ===== 公開ページ管理モーダル (P1 静的SSG, ADR-030) ===== */
.publish-pages-content { width: 94vw; } /* 幅の上限は管理役の段階 (.ov-lg 900・編集中 .art-editing は専用ルール) に任せる (イシュー#367・旧 680px は撤去) */
/* 本文 (一覧/編集) は .modal-body を使わない直下要素。ヘッダー左 (2rem) と揃え、
   端に密着しないよう左右・下に十分な余白を取る。上はヘッダーの margin-bottom と二重にしない */
.publish-pages-content > #pp-list-view,
.publish-pages-content > #pp-edit-view { padding: 0.25rem 2rem 1.85rem; }
.pp-hint { color: var(--muted); font-size: 0.85rem; margin: 0; line-height: 1.5; }
.pp-free-notice { display: flex; align-items: flex-start; gap: 0.4rem; margin: 0 0 0.8rem; padding: 0.5rem 0.7rem;
    background: #fff7e6; border: 1px solid #f0d9a8; border-radius: 8px; color: #7a5b00; font-size: 0.8rem; line-height: 1.5; }
.pp-free-notice[hidden] { display: none; }
.pp-free-notice .h-icon { flex: 0 0 auto; margin-top: 0.15rem; color: var(--warning, #a06800); }
.pp-free-notice-text { flex: 1 1 auto; min-width: 0; }
.pp-store-notice { align-items: center; }
.pp-store-notice #art-store-notice-btn { flex: 0 0 auto; }
/* 本棚トップの配色 (ADR-144・イシュー#408 案A)。.art-look-list/.art-look-row(記事の見た目ブロック)を
   そのまま流用し、配色12色ぶんに収まる高さへ上書きする(記事側はレイアウト3種も含むため高さが違う)。 */
.pp-site-theme { margin: 0 0 0.9rem; padding: 0.7rem 0.8rem; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.pp-site-theme[hidden] { display: none; }
/* イシュー#430: button化(開閉トグル)。見た目はdiv時代と同じに保つ(リセット+flex踏襲)。 */
.pp-site-theme-hd { display: flex; align-items: center; gap: 0.4rem; width: 100%; font-size: 0.85rem;
    border: none; background: none; padding: 0; margin: 0; cursor: pointer; color: inherit; font: inherit; text-align: left; }
.pp-site-theme-current { margin-left: auto; color: var(--muted); font-size: 0.8rem; }
.pp-site-theme-caret { transition: transform 0.15s ease; flex: none; }
.pp-site-theme-hd.is-open .pp-site-theme-caret { transform: rotate(180deg); }
.pp-site-theme-list.art-look-list { height: calc(52px * 3.5); margin-top: 0.6rem; }
.pp-site-theme-list.art-look-list[hidden] { display: none; }
.pp-site-theme-hint { margin: 0.5rem 0 0; color: var(--ok, #1f8a4c); font-size: 0.8rem; }
.pp-site-theme-hint[hidden] { display: none; }
/* hidden 属性を尊重 (.btn-small の重複定義の display:flex が UA の [hidden] を上書きしてしまう罠。ui-standards §2-2。
   通知本体は表示のままボタンだけ隠す状態がある = 親の .pp-free-notice[hidden] では救えない) */
#art-store-notice-btn[hidden] { display: none; }
.pp-list-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 0.9rem; flex-wrap: wrap; }
/* イシュー#442: 「公開の設定」「新規作成」の2ボタンをまとめて右側に配置 */
.pp-list-head-actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.pp-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; max-height: 52vh; overflow: auto; }
.pp-empty { color: var(--muted); padding: 1.6rem; text-align: center; border: 1px dashed var(--line); border-radius: 10px; font-size: 0.9rem; }
.pp-empty.pp-error { color: var(--danger); border-color: var(--danger); display: flex; align-items: center; justify-content: center; gap: 0.5rem; flex-wrap: wrap; }
.pp-empty.pp-error .h-icon { color: var(--danger); }
/* イシュー#166: 本ブロック空状態を <button> 化 (対象が明確なブロック内の追加入口)。<p>向けの .pp-empty に
   button 既定装飾のリセットを重ねる (常時表示・hover非依存)。 */
.pp-empty-btn { width: 100%; font: inherit; cursor: pointer; }
.pp-empty-btn:hover { border-color: var(--accent); color: var(--accent); }
.pp-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.7rem 0.9rem; border: 1px solid var(--line); border-radius: 8px; background: var(--line2); }
.pp-row-main { display: flex; flex-direction: column; min-width: 0; }
/* イシュー#442・ハヘロ指摘②: タイトルは状態と同居させず単独行(1内容1行)。長いタイトルは省略せず
   2行まで折返し、それを超えたら…にする(①で状態と判定できる省略ではなく中身を読める形にする・②承認)。 */
.pp-row-title { font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
/* 状態バッジ+冊数をタイトルの下の別行に(ハヘロ指摘②)。タイトルの折返し行数に関わらず常に1行。 */
.pp-row-status-line { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.3rem; }
.pp-row-meta { font-size: 0.78rem; color: var(--muted); }
.pp-row-url { display: flex; align-items: center; gap: 0.3rem; margin-top: 0.25rem; min-width: 0; }
.pp-row-url a { font-size: 0.76rem; color: var(--accent); text-decoration: none; display: inline-flex; align-items: center; gap: 0.25rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-row-url a:hover { text-decoration: underline; }
.pp-url-copy { border: none; background: transparent; color: var(--muted); cursor: pointer; padding: 0.1rem; display: inline-flex; align-items: center; flex-shrink: 0; }
.pp-url-copy:hover { color: var(--accent); }
.pp-row-actions { display: flex; gap: 0.35rem; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.pp-status { font-size: 0.72rem; font-weight: 600; padding: 0.05rem 0.45rem; border-radius: 999px; white-space: nowrap; }
.pp-status-on { color: #1f7a4d; background: #e3f5ec; }
.pp-status-off { color: var(--muted); background: var(--line2); }
/* イシュー#430: 未公開の変更あり(stale)。warning色規約(ui-standards・CLAUDE.md)に合わせる。 */
.pp-status-stale { color: var(--warning, #a06800); background: #fdf3e0; }
.pp-list-foot { display: flex; align-items: center; gap: 0.6rem 0.9rem; margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--line); flex-wrap: wrap; }
.pp-list-foot[hidden] { display: none; }
.pp-foot-hint { font-size: 0.78rem; color: var(--muted); flex: 1; min-width: 12rem; }
.pp-url { font-size: 0.78rem; color: var(--muted); word-break: break-all; width: 100%; }
.pp-url:empty { display: none; }

/* --- エディタ: フル幅・セクション縦積み --- */
.pp-editor { display: flex; flex-direction: column; gap: 0.9rem; max-height: 62vh; overflow: auto; padding: 0.2rem 0.3rem 0.2rem 0; }
.pp-section { border: 1px solid var(--line); border-radius: 8px; padding: 0.95rem 1.05rem; background: var(--line2); }
.pp-section-title { display: flex; align-items: center; gap: 0.55rem; margin: 0 0 0.75rem; font-size: 0.92rem; font-weight: 700; color: var(--fg); }
.pp-step { display: inline-flex; align-items: center; justify-content: center; width: 1.45rem; height: 1.45rem; border-radius: 999px; background: var(--accent-bg); color: var(--accent-strong); font-size: 0.78rem; font-weight: 700; flex-shrink: 0; }
.pp-section .form-group { margin-bottom: 0.75rem; }
.pp-section .form-group:last-child { margin-bottom: 0; }
/* エディタ内のフォームコントロールはアプリ標準 (.form-group input/select/textarea) と同じ見た目に統一。
   form-group の外 (スタイル選択・本検索) も含め取りこぼさないようスコープで一括指定 */
.pp-editor input[type="text"],
.pp-editor select,
.pp-editor textarea {
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.92rem;
    background: var(--panel);
    color: var(--fg);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.pp-editor input[type="text"]:hover,
.pp-editor select:hover,
.pp-editor textarea:hover { border-color: #a8acb3; }
.pp-editor input[type="text"]:focus,
.pp-editor select:focus,
.pp-editor textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(91, 108, 255, 0.15);
}
.pp-style-desc { display: block; color: var(--muted); font-size: 0.8rem; margin-top: 0.45rem; line-height: 1.5; }
.pp-param-label { display: block; font-size: 0.85rem; color: var(--fg2); margin-bottom: 0.3rem; }
.pp-book-results { list-style: none; margin: 0.45rem 0 0; padding: 0; max-height: 170px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.pp-book-results:empty { display: none; }
.pp-book-results li { padding: 0.45rem 0.75rem; cursor: pointer; font-size: 0.88rem; border-bottom: 1px solid var(--line2); }
.pp-book-results li:last-child { border-bottom: none; }
.pp-book-results li:hover { background: var(--accent-bg); }
.pp-bk-author { color: var(--muted); font-size: 0.78rem; }
.pp-book-chosen { list-style: none; margin: 0.55rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.pp-book-chosen:empty { display: none; }
.pp-book-chosen li { display: inline-flex; align-items: center; gap: 0.3rem; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 0.22rem 0.5rem 0.22rem 0.7rem; font-size: 0.8rem; max-width: 260px; }
.pp-book-chosen li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-chip-x { border: none; background: none; cursor: pointer; color: var(--muted); font-size: 1rem; line-height: 1; padding: 0; }
.pp-chip-x:hover { color: var(--danger); }
/* イシュー#168実測で発見: flex-wrap は元々 @media (max-width: 760px) でだけ有効化されていたが、
   900px以下のボトムシート化 (#165) 等モバイル最適化全般は760pxでなく900pxを境にしている。
   この境界のズレにより 760px超〜900px以下 (実測768px) は wrap が効かないまま全要素が1行に
   収めようとし、縮小余地が最も大きい pp-page-ops だけが極端に潰れて内部で3行に分裂していた
   (768x1024実測: h=122px、通常36pxの3.4倍)。既定から wrap にして境界のズレを無くす。 */
/* イシュー#170 (#169監査の実装): 表示設定｜確認・状態｜記事操作の3ゾーンを区切り線+余白で分離
   (隠す/折りたたむでは解かない)。ゾーン内 gap (0.45rem, .art-footer-zone) よりゾーン間 gap を
   大きくして性質差を伝える。900px超は横1列+区切り線 (border-left)、900px以下 (縦積み) は
   境界のズレを避けるため既存のボトムシート化・畳み機能と同じ900px基準で border-top に切替える。 */
.pp-edit-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem 1.6rem; margin-top: 1.1rem; padding-top: 0.9rem; border-top: 1px solid var(--line); }
.art-footer-zone { display: flex; align-items: center; flex-wrap: nowrap; gap: 0.45rem; }
.art-footer-zone-confirm { flex: 1 1 auto; }
.art-footer-zone-display + .art-footer-zone,
.art-footer-zone-confirm + .art-footer-zone { padding-left: 1.6rem; border-left: 1px solid var(--line); }
@media (max-width: 900px) {
    .art-footer-zone { flex-wrap: wrap; }
    .art-footer-zone-ops { flex-wrap: nowrap; } /* イシュー#168: 「割れない1ブロック」原則を維持 */
    .art-footer-zone-display + .art-footer-zone,
    .art-footer-zone-confirm + .art-footer-zone { margin-left: 0; padding-left: 0; border-left: none; width: 100%; padding-top: 0.6rem; border-top: 1px solid var(--line); }
}

/* --- 詳細設定（折りたたみ）: ページ操作（複製・削除など） --- */
.pp-advanced { border: 1px solid var(--line); border-radius: 8px; background: var(--line2); }
.pp-advanced > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 0.5rem; padding: 0.8rem 1.05rem; font-size: 0.9rem; font-weight: 700; color: var(--fg); user-select: none; }
.pp-advanced > summary::-webkit-details-marker { display: none; }
.pp-advanced > summary:hover { color: var(--accent-strong); }
.pp-advanced-caret { color: var(--muted); transition: transform 0.15s; }
.pp-advanced[open] > summary .pp-advanced-caret { transform: rotate(180deg); }
/* text-wrap:pretty で最終行が1文字だけ残る孤立文字(orphan)を避ける (#225 P3・イシュー#232 step2)。
   対応ブラウザが無い場合は通常の折返しに戻るだけで実害なし。 */
.pp-advanced-note { font-weight: 400; font-size: 0.78rem; color: var(--muted); margin-left: auto; text-wrap: pretty; }
.pp-advanced-body { padding: 0 1.05rem 0.95rem; }
/* イシュー#168実測: 900px以下の中間幅(768px)で、親(.pp-edit-actions)の他要素が1行に収まる分だけ
   pp-page-ops に残る横幅が減り、flex-wrap:wrap だと内部の複製/公開取消/削除が3行に分裂していた
   (h=122px、通常36pxの3.4倍)。pp-page-ops を「割れない1ブロック」として扱い、幅が足りなければ
   親側の折り返しで次の行に丸ごと落ちるようにする (nowrap 化)。 */
.pp-page-ops { display: flex; align-items: center; flex-wrap: nowrap; gap: 0.45rem; flex-shrink: 0; }
.pp-page-ops-label { font-size: 0.8rem; color: var(--muted); margin-right: 0.25rem; }
.pp-page-ops .pp-del-spacer { flex: 1; }
/* hidden 属性を尊重 (自身の display:flex と .btn-small の重複定義が UA の [hidden] を上書きしてしまう罠。ui-standards §2-2) */
.pp-page-ops[hidden] { display: none; }
.pp-page-ops .btn[hidden] { display: none; }

/* ===== 記事エディタ (公開v2 S3, ADR-058 §11 / mock-editor.html に準拠) ===== */
/* 編集モードはモーダルの残り高さを .art-wrap に配分する縦積み (900px 超・イシュー#59, ADR-067)。
   外側 (.modal-content) のスクロールを無くし、.art-col と .art-drawer-list の内側だけがスクロールする。 */
/* イシュー#430 (②承認): 「全画面を避け過ぎ」指摘により、編集状態は既定で全画面にする
   (旧 max-width: 1080px を撤廃)。901px以上の専用ルール (旧 min(1240px,...)) も合わせて撤廃。
   本文欄+プレビューの可読性は内側 (.art-wrap 以下) の max-width で別途確保する。 */
.art-modal-content.art-editing { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; border-radius: 0; display: flex; flex-direction: column; }
.art-modal-content.art-editing > .modal-header { display: none; } /* 全画面では独自ヘッダー(art-fs-hd/art-hd)が戻る/完了を持つため、モーダル既定ヘッダーは隠す (イシュー#430) */
.art-modal-content.art-editing > .modal-close { display: none; } /* ×はヘッダーの「完了」等と重複するため隠す (旧600px以下限定ルールをPC/モバイル共通に・イシュー#430) */
.publish-pages-content > #art-list-view,
.publish-pages-content > #art-edit-view { padding: 0.25rem 2rem 1.85rem; }
/* hidden 属性を尊重 (display:flex が UA の [hidden] を上書きしてしまう罠。ui-standards §2-2)。
   詳細度を (2,1,0) にして下の (1,1,0) ルールに順序非依存で勝つ (同点は後勝ちになるため。イシュー#82・ui-standards §2-13) */
.publish-pages-content > #art-edit-view[hidden] { display: none; }
.publish-pages-content > #art-edit-view { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }

/* --- ヘッダー: 戻る/タイトル/テーマ/プレビュー/公開 --- */
.art-hd { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.8rem; }
.art-title-input { flex: 1; min-width: 0; border: 1px solid transparent; background: transparent; font-size: 1.05rem; font-weight: 700;
    padding: 0.4rem 0.55rem; border-radius: 6px; color: var(--fg); font-family: inherit; }
.art-title-input:hover { border-color: var(--line); }
.art-title-input:focus { outline: none; border-color: var(--accent); background: var(--panel); box-shadow: 0 0 0 3px rgba(91, 108, 255, 0.15); }
.art-theme-sel { flex: 0 0 auto; width: auto; max-width: 8.5rem; padding: 0.4rem 0.55rem; border: 1px solid var(--line); border-radius: 6px;
    background: var(--panel); color: var(--fg2); font-size: 0.82rem; }
/* 選択中の配色が一目で分かる手掛かり (過剰にしない=色だけの小さな丸、イシュー#99・指摘3) */
.art-theme-swatch { width: 15px; height: 15px; border-radius: 50%; border: 1px solid var(--line); flex: 0 0 auto; }
/* イシュー#168差し戻し対応: ラベル+select(+スウォッチ)を割れない1ブロックとして扱う
   (pp-page-opsと同じnowrap手法)。幅が足りなければグループごと次の行に落ちる。 */
.art-theme-group { display: flex; align-items: center; gap: 0.45rem; flex-wrap: nowrap; flex-shrink: 0; }
.art-save-status { font-size: 0.78rem; color: var(--muted); }
.art-save-status.is-error { color: var(--danger); font-weight: 600; }
/* U1 (イシュー#276): 公開中・updatedAt > lastBuiltAt のときの「公開中・未反映の変更あり」表示 */
.art-save-status.is-stale { color: var(--warning); font-weight: 600; }
/* hidden 属性を尊重 (.btn-small の重複定義の display:flex が UA の [hidden] を上書きしてしまう罠。ui-standards §2-2) */
#art-save-retry[hidden] { display: none; }

/* --- タグ行 --- */
.art-tagbar { display: flex; align-items: center; flex-wrap: wrap; gap: 0.45rem; padding: 0.6rem 0.1rem 0.9rem; border-bottom: 1px solid var(--line); margin-bottom: 0.9rem; position: relative; }
.art-tag-label { color: var(--muted); font-size: 0.78rem; flex: 0 0 auto; }
.art-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.art-tag { display: inline-flex; align-items: center; gap: 0.35rem; background: var(--accent-bg); color: var(--accent-strong); border-radius: 999px; padding: 0.22rem 0.7rem; font-size: 0.8rem; }
.art-tag-x { border: none; background: none; cursor: pointer; color: var(--accent-strong); opacity: 0.6; font-size: 0.9rem; line-height: 1; padding: 0; }
.art-tag-x:hover { opacity: 1; color: var(--danger); }
.art-tag-input-wrap { position: relative; }
.art-tag-input { border: 1px dashed var(--line); border-radius: 999px; padding: 0.22rem 0.75rem; font-size: 0.8rem; color: var(--fg); min-width: 8rem; background: transparent; font-family: inherit; }
.art-tag-input:focus { outline: none; border-color: var(--accent); border-style: solid; }
.art-sugg { position: absolute; top: 2rem; left: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12); width: 15rem; padding: 0.3rem; z-index: 20; max-height: 14rem; overflow: auto; }
.art-sugg-item { padding: 0.4rem 0.55rem; border-radius: 5px; font-size: 0.8rem; display: flex; justify-content: space-between; gap: 0.5rem; cursor: pointer; align-items: center; }
.art-sugg-item:hover, .art-sugg-item.is-active { background: var(--accent-bg); color: var(--accent-strong); }
.art-sugg-item .art-sugg-count { color: var(--muted); font-size: 0.72rem; flex: 0 0 auto; }
.art-sugg-new { border-top: 1px solid var(--line2); margin-top: 0.25rem; padding-top: 0.45rem; color: var(--fg2); }

/* --- 本体 2 ペイン --- */
.art-wrap { display: grid; grid-template-columns: 1fr 17rem; gap: 1rem; align-items: start; flex: 1 1 auto; min-height: 0; grid-template-rows: minmax(0, 1fr); }
/* 棚が空のときの自動非表示 (_artRenderDrawer)。ユーザー操作の畳み (下の art-drawer-user-collapsed)
   とは別クラス・別状態 (イシュー#168・状態の混線を避ける設計、step1で承認済み)。どちらか一方でも
   真なら畳まれた見た目になる (OR条件で構わない・両立しても矛盾しない)。 */
.art-wrap.art-drawer-collapsed { grid-template-columns: 1fr; }
.art-wrap.art-drawer-collapsed .art-side { display: none; }
.art-wrap.art-drawer-user-collapsed { grid-template-columns: 1fr; }
.art-wrap.art-drawer-user-collapsed .art-side { display: none; }
.art-col { display: flex; flex-direction: column; gap: 0.8rem; min-width: 0; max-height: 100%; overflow: auto; padding: 0.15rem 0.3rem 0.15rem 0; }

/* --- ブロック共通 --- */
/* 区切りの視認性 (イシュー#99): 罫線トークンの濃さで押すのではなく、影で「面として浮いている」ことを
   示す。.dashboard-widget と同じ影の値を再利用 (新しい値を発明しない)。 */
.art-block, .art-look-block { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; position: relative; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03); }
.art-block.is-drag-over { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
/* #133 項目3: 引き出しからの追加先ブロックを常時強調する (Nielsen #1)。.is-drag-over (一時的なD&Dフィードバック) とは
   見た目を分け、ブロックバーの背景も変えて「ここに入る」ことを操作前に予測できるようにする。 */
.art-block.is-add-target { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-bg); }
.art-block.is-add-target .art-block-bar { background: var(--accent-bg); }
.art-block.is-dragging, .art-shelf-item.is-dragging { opacity: 0.45; pointer-events: none; }
/* バーの背景を本体(--panel)と差のある --side にし、罫線だけでなく面でバー/本体を分ける
   (.art-shelf-selbar・.art-drawer-item:hover と同じ既存トークンの再利用)。角丸はブロック本体(10px)に
   揃えて、四角いバー背景が丸角の外にはみ出さないようにする。 */
.art-block-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; padding: 0.45rem 0.65rem; background: var(--side); border-bottom: 1px solid var(--line); border-radius: 10px 10px 0 0; color: var(--muted); font-size: 0.72rem; }
/* 狭幅で文字単位に縦割れするのを防ぐ (CJK は単語境界が無いため folding 対象になりやすい, イシュー#55 差し戻し)。
   スペーサーだけ .art-block-bar-sp { flex: 1 } で個別に上書きするので、このルールより後ろに置くこと。 */
.art-block-bar > * { flex-shrink: 0; white-space: nowrap; }
.art-block-grip { cursor: grab; color: var(--muted); touch-action: none; padding: 0.1rem 0.2rem; }
.art-block-grip:active { cursor: grabbing; }
.art-block-kind { background: var(--line2); border-radius: 4px; padding: 0.1rem 0.45rem; color: var(--fg2); font-weight: 600; }
/* #133: どの本棚から作ったブロックか。.art-block-bar > * の flex-shrink:0/nowrap 既定 (上の
   再発防止コメント参照) では長いパスが横に溢れるため、子セレクタで詳細度を上げて上書きする
   (行の記述順に依存しない・ui-standards §2-13)。イシュー#170でアイコン/通常テキストは撤去済み、
   shelf不在(異常系)の警告テキストのみこのルールを使う。 */
.art-block-bar > .art-block-shelf { flex-shrink: 1; min-width: 0; max-width: 45%; display: inline-flex; align-items: center; gap: 0.25rem; overflow: hidden; color: var(--fg2); }
.art-block-shelf-path { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.art-block-shelf.is-shelf-missing { color: var(--warning); }
.art-block-count { color: var(--muted); }
.art-block-bar-sp { flex: 1; }
.art-block-bar-sep { width: 1px; align-self: stretch; background: var(--line2); margin: 0 0.1rem; }
.art-block-ic { border: none; background: none; color: var(--muted); cursor: pointer; padding: 0 0.2rem; display: inline-flex; align-items: center; border-radius: 4px; }
.art-block-ic:hover { color: var(--accent); }
/* イシュー#170: 削除は複製/選び直しと重さが違う破壊的操作。hover依存の無色は「削除」だと
   伝わらない(Nielsen #4/#9)ため、記事削除(.btn-danger)と同じ常時弱いdangerトーンへ揃える。 */
.art-block-ic.art-block-del { color: var(--danger); }
.art-block-ic.art-block-del:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }
.art-block-body { padding: 0.75rem 0.85rem; }

/* --- 文章ブロック: 生 Markdown textarea --- */
.art-block-text textarea { width: 100%; min-height: 6rem; border: none; resize: vertical; font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 0.82rem; line-height: 1.8; color: var(--fg); background: transparent; padding: 0; }
.art-block-text textarea:focus { outline: none; }

/* --- 本ブロック --- */
.art-block-book-body { display: flex; gap: 0.9rem; align-items: flex-start; }
.art-block-book-body .art-cover { width: 5.5rem; flex: 0 0 auto; }
.art-block-book-info { flex: 1; min-width: 0; }
.art-block-book-info .art-item-title { font-size: 0.92rem; font-weight: 700; }
.art-block-book-info .art-item-author { font-size: 0.78rem; color: var(--muted); margin-top: 0.15rem; }

/* --- 本棚ブロック: バー(密度+畳む) + カード/コンパクトリスト --- */
/* ブロックバーの枠つき/塗りチップはここまで (コンパクト/カードの2つのみ、Polaris Common actions の上限, イシュー#55) */
.art-chip-toggle { border: 1px solid var(--line); background: var(--panel); border-radius: 999px; padding: 0.2rem 0.6rem; font-size: 0.74rem; color: var(--fg2); cursor: pointer; }
.art-chip-toggle.is-on { background: var(--accent-bg); border-color: var(--accent); color: var(--accent-strong); font-weight: 600; }
.art-shelf-sort-sel, .art-sel-show-sel { border: 1px solid var(--line); border-radius: 999px; padding: 0.15rem 0.5rem; font-size: 0.72rem; color: var(--fg2); background: var(--panel); }

/* 選択バー (1件以上選択したときだけ表示、イシュー#55) */
/* 選択バーは「選択中」を示す面なので、他の選択状態(drag-over・選択カード等)と同じ --accent-bg を
   再利用して背景差をはっきりさせる (--side は他の非選択バーと見分けがつきにくかった、イシュー#99)。 */
.art-shelf-selbar { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; padding: 0.4rem 0.65rem; border-bottom: 1px solid var(--line); background: var(--accent-bg); font-size: 0.76rem; }
/* 狭幅で文字単位に縦割れするのを防ぐ (.art-block-bar と同じ理由)。要素ごと次の行に落ちるのは許容する。 */
.art-shelf-selbar > * { flex-shrink: 0; white-space: nowrap; }
.art-shelf-selbar-master { padding: 0.1rem 0.3rem; font-size: 0.76rem; font-weight: 600; color: var(--fg); }
.art-shelf-selbar .art-block-bar-sp { flex: 1; }
.art-sel-all-btn, .art-sel-clear-btn { border: none; background: none; color: var(--accent); cursor: pointer; padding: 0.1rem 0.2rem; font-size: 0.74rem; }
.art-sel-all-btn:hover, .art-sel-clear-btn:hover { text-decoration: underline; }

/* カード表示 (密度=card) */
.art-shelf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.2rem, 1fr)); gap: 0.6rem; }
.art-shelf-grid .art-shelf-item { border: 1px solid var(--line); border-radius: 7px; padding: 0.4rem; position: relative; background: var(--side); }
.art-shelf-grid .art-shelf-item.is-selected { border-color: var(--accent); background: var(--accent-bg); }
.art-shelf-grid .art-shelf-item .art-cover { aspect-ratio: 5/7; max-height: 6.5rem; }
.art-shelf-grid .art-item-check { position: absolute; top: 0.25rem; left: 0.3rem; z-index: 1; }
.art-shelf-grid .art-shelf-item-grip { position: absolute; top: 0.3rem; left: 1.5rem; color: var(--muted); font-size: 0.7rem; cursor: grab; touch-action: none; }
.art-shelf-grid .art-shelf-item-title { font-size: 0.7rem; font-weight: 600; margin-top: 0.3rem; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.art-shelf-grid .art-shelf-item-toggles { display: flex; gap: 0.25rem; margin-top: 0.3rem; }
.art-shelf-grid .art-shelf-item-order-btns { display: flex; gap: 0.15rem; margin-top: 0.25rem; }
.art-shelf-grid .art-shelf-item-remove { position: absolute; top: 0.2rem; right: 0.3rem; }

/* コンパクトリスト表示 (密度=compact, 既定・B) : 1行1冊・34px サムネ・20冊が1画面に収まる */
.art-shelf-list { display: flex; flex-direction: column; }
.art-shelf-list .art-shelf-item {
    display: grid;
    grid-template-columns: 16px 14px 34px 1fr auto auto auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.3rem;
    border: none;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
}
.art-shelf-list .art-shelf-item:last-child { border-bottom: none; }
.art-shelf-list .art-shelf-item:hover { background: var(--side); }
.art-shelf-list .art-shelf-item.is-selected { background: var(--accent-bg); }

/* イシュー#168: 本一覧末尾の常駐追加ボタン (#166のバー内ボタンが複製/削除と同一視覚言語で
   見つけにくかった代替。本そのものが並ぶ領域に常駐させ、grid/list どちらでも1マス/1行として続く)。
   差し戻し対応: 既定色(--muted/--line)が既存の薄い破線ボタンと見分けがつかず埋没した(②実機指摘)。
   主要操作として常時アクセント色で目立たせる(hover待ちにしない・薄いトークンに揃えない)。 */
.art-shelf-add-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3rem;
    border: 1.5px dashed var(--accent); border-radius: 7px; background: var(--accent-bg); color: var(--accent-strong);
    cursor: pointer; font: inherit; font-size: 0.72rem; font-weight: 600; padding: 0.4rem; width: 100%; }
.art-shelf-grid .art-shelf-add-tile { aspect-ratio: 5/7; }
.art-shelf-add-tile:hover { border-style: solid; }
.art-shelf-list .art-shelf-add-tile { flex-direction: row; padding: 0.5rem 0.7rem; border-radius: 6px; margin-top: 0.2rem; }
.art-shelf-add-tile-label { font-weight: 600; }

/* 本0冊の空状態: プレースホルダーの <p> を <button> 化 (#166 の .pp-empty-btn と同じパターンを
   本棚ブロックにも適用。本があるときの .art-shelf-add-tile と同じクリック領域の考え方)。
   .pp-empty の既定(薄いグレー破線)を上書きし、tile と同じアクセント色で統一する。 */
.art-shelf-add-empty { display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    border-color: var(--accent); background: var(--accent-bg); color: var(--accent-strong); font-weight: 600; }
.art-shelf-add-empty:hover { border-style: solid; }
.art-shelf-list .art-shelf-item-grip { color: var(--muted); font-size: 0.65rem; cursor: grab; touch-action: none; }
.art-shelf-list .art-shelf-item .art-cover { width: 34px; height: 34px; aspect-ratio: unset; max-height: none; border-radius: 3px; }
.art-shelf-list .art-shelf-item-title { font-size: 0.78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.art-shelf-list .art-shelf-item-toggles { display: flex; gap: 0.2rem; }
.art-shelf-list .art-shelf-item-order-btns { display: flex; gap: 0.1rem; }

/* 個別アイテム共通 */
.art-shelf-item.is-drag-over { border: 1px dashed var(--accent); background: var(--accent-bg); }
/* イシュー#170: 本棚アイテム行は縦の余白が狭いため、chip-toggleを他箇所より小さくする縮小variant
   (旧 .art-icon-toggle の縮小指定を移設。視覚言語は5種のchip-toggleへ統一、サイズだけ個別) */
.art-shelf-item-toggles .art-chip-toggle { font-size: 0.62rem; padding: 0.05rem 0.3rem; }
.art-shelf-item-ic { border: none; background: none; color: var(--muted); cursor: pointer; padding: 0.1rem; display: inline-flex; align-items: center; }
.art-shelf-item-ic:hover { color: var(--accent); }
.art-shelf-item-ic:disabled { opacity: 0.3; cursor: default; }
.art-shelf-item-remove { border: none; background: none; color: var(--muted); cursor: pointer; font-size: 0.85rem; line-height: 1; padding: 0.1rem; }
.art-shelf-item-remove:hover { color: var(--danger); }

/* 畳む (B): 見出しバーだけ残して本文を隠す */
.art-block.is-collapsed .art-block-bar,
.art-look-block.is-collapsed .art-block-bar { border-bottom: none; border-radius: 10px; }

/* --- 表紙 (プレースホルダ) --- */
.art-cover { aspect-ratio: 5/7; border-radius: 4px; background: var(--line2); display: flex;
    align-items: center; justify-content: center; text-align: center; font-size: 0.62rem; color: var(--muted); padding: 0.3rem; line-height: 1.3; overflow: hidden; }
.art-cover img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }

/* ===== イシュー#230: 共通見出し行・畳み・チップ列・見た目リスト (確定モック editor-v2) =====
   --art-pad = ブロック内容の左端 (1本の揃え線)。本文・一括バー・本棚の各行が同じ値から始まる。
   --art-cols = 本棚の各行・一括バー・本ブロックが共有する列トラック
   (チェック | ハンドル | 書影 | 書名 | チップ3個 | 並べ替え | ×)。チップは固定幅 (押しても太らない)。 */
#art-blocks { --art-pad: 14px; --art-chip-w: 96px; --art-chips-w: calc(var(--art-chip-w) * 3 + 16px);
    --art-cols: 20px 14px 34px minmax(0, 1fr) var(--art-chips-w) 48px 20px; }
.art-canvas-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.4rem; }
.art-canvas-count { font-size: 0.76rem; color: var(--fg2); }

.art-block-bar { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto 28px 28px; align-items: center; gap: 0.25rem;
    flex-wrap: nowrap; padding: 0.3rem 0.35rem; }
.art-block-bar > .art-block-grip { justify-self: center; }
.art-block-tg { display: flex; align-items: center; gap: 0.45rem; min-width: 0; min-height: 32px; border: none; background: none;
    padding: 0 0.2rem; cursor: pointer; color: var(--fg2); font: inherit; text-align: left; }
.art-block-tg .art-block-kind { display: inline-flex; align-items: center; gap: 0.25rem; flex-shrink: 0; }
.art-block-sum { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg2); font-size: 0.76rem; }
.art-block:not(.is-collapsed) .art-block-sum,
.art-look-block:not(.is-collapsed) .art-block-sum { display: none; }
.art-block-extra { display: inline-flex; align-items: center; gap: 0.25rem; min-width: 0; }
.art-block-bar > .art-block-ic { justify-self: center; width: 28px; height: 28px; justify-content: center; padding: 0; }
/* イシュー#430 (②承認・ハヘロ「本の変更ボタン小さすぎ」): 全画面の対象ブロック編集(form)の操作ボタンは
   44px以上の押しやすいサイズにする。一覧の折りたたみ表示は密度優先で元のまま(対象外)。
   文字ラベルの追加はJS側(_artRenderBlockのpickBtnテンプレート)で別途対応が必要(現状はアイコンのみ)。 */
#art-edit-view[data-art-mode="form"] .art-block.is-fs-target > .art-block-bar > .art-block-ic {
    width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 8px;
}
#art-edit-view[data-art-mode="form"] .art-block.is-fs-target .art-chip-toggle,
#art-edit-view[data-art-mode="form"] .art-block.is-fs-target .art-shelf-item-toggles .art-chip-toggle {
    min-height: 44px; padding: 0 0.8rem; font-size: 0.82rem;
}
.art-block-cell { width: 28px; }
.art-block-body { padding: 0.75rem var(--art-pad); }

/* 列トラックの共有 */
.art-gx { display: grid; grid-template-columns: var(--art-cols); column-gap: 8px; align-items: center; }
.art-chips { display: grid; grid-template-columns: repeat(3, var(--art-chip-w)); gap: 8px; }
/* 旧 .art-shelf-list .art-shelf-item-toggles (flex・gap 0.2rem, 詳細度0,2,0) に負けないよう詳細度を揃えて上書き */
.art-shelf-list .art-shelf-item-toggles.art-chips { display: grid; gap: 8px; }
.art-chips .art-chip-toggle,
.art-shelf-item-toggles .art-chip-toggle { width: var(--art-chip-w); min-height: 32px; padding: 0 0.3rem; font-size: 0.74rem; text-align: center; white-space: nowrap; }
.art-chip-toggle.is-mixed { border-style: dashed; border-color: var(--accent); color: var(--accent-strong); }
/* 本棚(各行・一括バー)は長文メモを選べない(イシュー#238)→チップ2個。列トラック(--art-cols第5列=3チップ幅)は
   本ブロックと共有のまま据え置き、.art-chips だけ2列に絞って左詰め。本ブロックのチップ順は
   短文メモ→評価→長文メモ(_artChips)なので、この2チップは本ブロックの先頭2チップと同じ left に揃う。 */
.art-shelf-list .art-shelf-item .art-chips,
.art-shelf-selbar .art-chips { grid-template-columns: repeat(2, var(--art-chip-w)); }

.art-block-book-body.art-gx { align-items: start; }
.art-block-book-body.art-gx .art-cover { grid-column: 1 / 4; width: 100%; }
.art-block-book-body.art-gx .art-block-book-info { grid-column: 4; }
.art-block-book-body.art-gx .art-chips { grid-column: 5; }

.art-shelf-list .art-shelf-item { grid-template-columns: var(--art-cols); column-gap: 8px; gap: 0.3rem 8px; padding: 0.3rem 0; }
.art-shelf-list .art-shelf-item .art-chips { grid-column: 5; }
.art-shelf-list .art-shelf-item-order-btns { grid-column: 6; }
.art-shelf-list .art-shelf-item-remove { grid-column: 7; justify-self: center; }

.art-shelf-selbar.art-gx { padding: 0.45rem var(--art-pad); row-gap: 0.4rem; }
.art-shelf-selbar.art-gx .art-shelf-selbar-master { grid-column: 1 / 5; padding: 0; min-width: 0; }
.art-shelf-selbar.art-gx .art-chips { grid-column: 5; }
.art-shelf-selbar-ops { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; }

/* 見た目ブロック: レイアウト・配色の縦リスト (サムネ | 名前 | 提供元 | 選択)。枠の高さは同じ・中でスクロール */
.art-look-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.art-look-hd { display: flex; align-items: center; gap: 0.5rem; min-height: 34px; margin-bottom: 0.35rem; }
.art-look-hd h4 { margin: 0; font-size: 0.8rem; color: var(--fg2); }
.art-look-cnt { font-size: 0.72rem; color: var(--fg2); }
.art-look-search { margin-left: auto; flex: 0 1 11rem; min-width: 0; padding: 0.3rem 0.55rem; border: 1px solid var(--line); border-radius: 6px;
    font-size: 0.78rem; background: var(--panel); color: var(--fg); }
.art-look-list { border: 1px solid var(--line); border-radius: 10px; overflow-y: auto; overflow-x: hidden; height: calc(52px * 4.5); background: var(--panel); }
.art-look-row { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto 20px; column-gap: 8px; align-items: center; width: 100%;
    min-height: 52px; padding: 6px 10px; border: none; border-top: 1px solid var(--line2); background: none; text-align: left; cursor: pointer; font: inherit; color: var(--fg); }
.art-look-row:first-child { border-top: none; }
.art-look-row[hidden] { display: none; }
.art-look-row:hover { background: var(--side); }
.art-look-row[aria-checked="true"] { background: var(--accent-bg); box-shadow: inset 3px 0 0 var(--accent); }
.art-look-row:disabled { cursor: default; opacity: 0.6; }
.art-look-th { width: 52px; height: 36px; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; display: grid; place-items: center; color: var(--fg2); background: var(--panel); }
.art-look-th.is-color { grid-template-rows: 1fr 6px; place-items: stretch; }
.art-look-th.is-color i { font-style: normal; font-size: 0.8rem; font-weight: 700; align-self: center; text-align: center; }
.art-look-nm { min-width: 0; display: grid; }
.art-look-nm b { font-size: 0.82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.art-look-nm small { font-size: 0.72rem; color: var(--fg2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.art-look-pv { justify-self: start; padding: 0 0.5rem; border: 1px solid var(--line); border-radius: 999px; font-size: 0.68rem; font-weight: 600; color: var(--fg2); line-height: 18px; white-space: nowrap; }
.art-look-pv.is-plugin { border-color: var(--accent); background: var(--accent-bg); color: var(--accent-strong); }
.art-look-mk { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); display: flex; align-items: center; justify-content: center; }
.art-look-row[aria-checked="true"] .art-look-mk { border-color: var(--accent); }
.art-look-row[aria-checked="true"] .art-look-mk::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }

@media (max-width: 900px) {
    /* 狭幅: チップは書名の下の行へ (固定幅3列・チェックの左端から)。列は チェック | ハンドル | 書影 | 書名 | 並べ替え | × */
    #art-blocks { --art-pad: 10px; --art-chip-w: 88px; --art-cols: 20px 14px 34px minmax(0, 1fr) 48px 20px; }
    .art-shelf-list .art-shelf-item .art-chips { grid-column: 1 / -1; grid-row: 2; }
    .art-shelf-list .art-shelf-item-order-btns { grid-column: 5; grid-row: 1; }
    .art-shelf-list .art-shelf-item-remove { grid-column: 6; grid-row: 1; }
    .art-shelf-selbar.art-gx .art-shelf-selbar-master { grid-column: 1 / -1; }
    .art-shelf-selbar.art-gx .art-chips { grid-column: 1 / -1; grid-row: 2; }
    .art-block-book-body.art-gx .art-block-book-info { grid-column: 4 / -1; }
    .art-block-book-body.art-gx .art-chips { grid-column: 1 / -1; grid-row: 2; }
    .art-look-body { grid-template-columns: minmax(0, 1fr); }
    .art-look-row { grid-template-columns: 52px minmax(0, 1fr) 20px; row-gap: 2px; }
    .art-look-th { grid-row: 1 / 3; }
    .art-look-pv { grid-column: 2; grid-row: 2; }
    .art-look-mk { grid-column: 3; grid-row: 1 / 3; }
}

/* --- ブロックを追加 --- */
.art-add { position: relative; text-align: center; padding: 0.3rem 0; }
.art-add-line { border-top: 1px dashed var(--line); position: absolute; top: 50%; left: 0; right: 0; }
.art-add-btn { position: relative; display: inline-block; background: var(--panel); border: 1px solid var(--line); border-radius: 999px;
    padding: 0.3rem 0.9rem; font-size: 0.78rem; color: var(--fg2); cursor: pointer; }
.art-add-btn:hover { border-color: var(--accent); color: var(--accent-strong); }
/* position:fixed (ビューポート基準の絶対座標)。.art-col が overflow:auto のスクロールコンテナ化した
   (イシュー#59) ため position:absolute のままだとクリップされる。fixed は祖先の overflow の影響を
   受けない (ui-standards §2-12・イシュー#82)。top/left は _placeAnchoredMenu が開くたびに px で
   明示計算するため、ここでは既定値を持たない。 */
.art-add-menu { position: fixed; background: var(--panel); border: 1px solid var(--line);
    border-radius: 9px; box-shadow: 0 10px 28px rgba(0,0,0,.14); padding: 0.3rem; width: 15.5rem; text-align: left; z-index: 20; }
.art-add-menu-item { width: 100%; display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.5rem 0.6rem; border-radius: 6px; border: none; background: none; cursor: pointer; text-align: left; }
.art-add-menu-item:hover { background: var(--accent-bg); }
.art-add-menu-item:disabled { cursor: not-allowed; opacity: 0.5; }
.art-add-menu-item:disabled:hover { background: none; }
.art-add-menu-item em { font-style: normal; font-size: 1rem; line-height: 1; width: 1.1rem; text-align: center; padding-top: 0.05rem; color: var(--fg2); }
.art-add-menu-item b { font-size: 0.8rem; display: block; color: var(--fg); }
.art-add-menu-item small { font-size: 0.72rem; color: var(--muted); line-height: 1.4; }

/* #133 項目6: 短/長トグルの説明+メモ内容。.art-add-menu と同じ理由で position:fixed
   (祖先 .art-col の overflow:auto にクリップされない・ui-standards §2-12)。 */
.art-item-tooltip { position: fixed; background: var(--panel); border: 1px solid var(--line);
    border-radius: 8px; box-shadow: 0 10px 28px rgba(0,0,0,.14); padding: 0.5rem 0.65rem; max-width: 16rem; z-index: 30; }
.art-item-tooltip[hidden] { display: none; }
.art-item-tooltip-title { font-size: 0.75rem; font-weight: 700; color: var(--fg); margin-bottom: 0.2rem; }
.art-item-tooltip-body { font-size: 0.72rem; color: var(--fg2); line-height: 1.4; white-space: pre-wrap; word-break: break-word; }

/* --- 右ペイン: 本の引き出し --- */
.art-side { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; position: sticky; top: 0.3rem; max-height: 100%; display: flex; flex-direction: column; box-shadow: -3px 0 8px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.08); }
.art-side h3 { font-size: 0.8rem; padding: 0.6rem 0.7rem; border-bottom: 1px solid var(--line2); display: flex; justify-content: space-between; align-items: center; margin: 0; flex: 0 0 auto; }
/* イシュー#168: art-hd-publish-group (公開ボタン) は元は900px以下限定 (#165、ボトムシートで
   フッターの公開ボタンが隠れる対策) だったが、フッター側の #art-publish を撤去した (重複解消・
   フッター要素数削減) ため、900px超でもこちらを唯一の公開導線として常時表示にする。 */
.art-hd-publish-group { display: flex; margin-left: auto; flex: 0 0 auto; }
/* --- 本の引き出しのボトムシート化用要素 (900px以下限定。#165)。
   900px超では一切使わないため既定は非表示にし、900px以下のメディアクエリでのみ有効化する。 */
.art-sheet-handle { display: none; flex: 0 0 auto; }
.art-sheet-close { display: none; border: none; background: none; color: var(--muted); cursor: pointer; padding: 0.2rem; margin-left: auto; }
.art-sheet-close:hover { color: var(--fg); }
.art-sheet-scrim { display: none; }
/* 900px超限定: 本の引き出しを畳むボタン (イシュー#168)。900px以下は art-sheet-close (×) が
   ボトムシートを閉じる役なので、こちらは非表示にする (下のメディアクエリで反転)。 */
/* イシュー#170 step1で判定: chip-toggle化しない(押すとパネルごと消える=シートの×と同じ性質、
   ON/OFFの状態トグルではない)。「アイコンのみ弱色・hoverでaccent」の5分類へ正式に寄せる微修正のみ。 */
.art-drawer-collapse-btn { display: inline-flex; align-items: center; border: none; background: none; color: var(--muted); cursor: pointer; padding: 0.2rem; margin-left: auto; }
.art-drawer-collapse-btn:hover { color: var(--accent); }
.art-badge { background: #fff7e6; border: 1px solid #f0d9a8; color: #8a6410; border-radius: 999px; font-size: 0.65rem; padding: 0.05rem 0.45rem; font-weight: 700; }
/* #99 <select> だったが #133 でアイコン+パス表記のためボタン+ポップオーバーへ置換
   (.bookshelf-popover-item 型を流用)。.art-side は overflow:hidden のスクロールコンテナのため
   ポップオーバーは position:fixed にする (.art-add-menu と同じ理由・ui-standards §2-12)。 */
/* .popover-host (4852行付近) の display:inline-flex と同点衝突するため複合セレクタで詳細度を上げる (同上)。 */
.popover-host.art-drawer-shelf-host { margin: 0.5rem 0.7rem 0; flex: 0 0 auto; width: calc(100% - 1.4rem); display: flex; }
.art-drawer-shelf-btn { width: 100%; display: flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.6rem; border: 1px solid var(--line); border-radius: 6px; font-size: 0.78rem; color: var(--fg); background: var(--panel); cursor: pointer; }
.art-drawer-shelf-btn:hover { background: var(--side); }
.art-drawer-shelf-icon { display: inline-flex; flex: 0 0 auto; color: var(--fg2); }
/* パス表記は深い階層で長くなる (#133)。nowrap+ellipsis はコンテナが縮められないと効かないため
   min-width:0 を併せて置く (§2-15 の「flex 子は nowrap」は文字単位の縦割れ防止が目的で、
   長文の省略とは別の対処が要る)。 */
.art-drawer-shelf-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.art-drawer-shelf-chevron { flex: 0 0 auto; color: var(--muted); }
/* .popover 側の position:absolute/left:50%/transform (4859行付近) は同じクラス数のため記述順で
   上書きされ得る (ui-standards §2-13)。複合セレクタで詳細度を上げ、順序に依存せず確実に勝たせる。
   left/top は _placeAnchoredMenu が毎回 px で明示計算するので transform は打ち消すだけでよい。 */
.popover.art-drawer-shelf-popover { position: fixed; left: auto; top: auto; transform: none; min-width: 220px; max-width: 320px; max-height: 60vh; overflow-y: auto; }
.art-drawer-shelf-item-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* #133 項目3: 引き出し側にも追加先の手掛かりを出す (Nielsen #1 システム状態の可視性)。 */
.art-drawer-target-hint { margin: 0.4rem 0.7rem 0; font-size: 0.72rem; color: var(--muted); display: flex; align-items: center; gap: 0.3rem; flex: 0 0 auto; }
/* 実測で発見: 生テキストの「追加先:」が flex コンテナの anonymous item になり、深い階層のパスで
   幅が足りないと文字単位に縦割れしていた (ui-standards §2-15)。span で囲み nowrap を明示して解消。 */
.art-drawer-target-label { flex: 0 0 auto; white-space: nowrap; }
.art-drawer-target-icon { display: inline-flex; flex: 0 0 auto; }
.art-drawer-target-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; color: var(--fg2); font-weight: 600; }
.art-drawer-search { margin: 0.5rem 0.7rem 0; padding: 0.35rem 0.6rem; border: 1px solid var(--line); border-radius: 6px; font-size: 0.78rem; color: var(--fg); background: var(--panel); flex: 0 0 auto; }
.art-drawer-search:focus { outline: none; border-color: var(--accent); }
/* #133 項目5: 表示中 (棚選択+検索絞り込み後) の本だけをまとめて追加。全件ボタンは無く「表示中の分だけ」に限定する設計。 */
.art-drawer-add-all { margin: 0.4rem 0.7rem 0; flex: 0 0 auto; width: calc(100% - 1.4rem); justify-content: center; }
/* 常にコンパクトリスト (密度トグル無し, イシュー#34): 表紙2列グリッドは廃止し .art-shelf-list と同体裁の1行1冊にする。
   ⚠️ grid-template-columns は 1fr でなく minmax(0,1fr) にする。1fr の最小は auto なので、タイトルの
   white-space:nowrap の分だけトラックを押し広げてしまう (旧グリッド版で実測 655x1106px まで巨大化した実績あり、commit 2e1c068)。
   min-width:0 も併せて要る (grid item 自体の最小サイズも auto のため)。 */
.art-drawer-list { padding: 0.2rem 0; display: flex; flex-direction: column; overflow: auto; flex: 1 1 auto; }
.art-drawer-item {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.5rem;
    /* 余白を広げて行間を「面の隙間」で分ける (罫線だけに頼らない、イシュー#99)。
       34pxサムネ+padding 0.3rem*2 = 約43.6px、既存の48px上限(イシュー#34)には収まる。 */
    padding: 0.3rem 0.7rem;
    border-bottom: 1px solid var(--line);
    cursor: pointer;
    min-width: 0;
}
.art-drawer-item:last-child { border-bottom: none; }
.art-drawer-item:hover { background: var(--side); }
.art-drawer-item .art-cover { width: 34px; height: 34px; aspect-ratio: unset; max-height: none; border-radius: 3px; font-size: 0.5rem; padding: 0.1rem; }
.art-drawer-item-badge { background: var(--accent); color: #fff; border-radius: 999px; font-size: 0.6rem; padding: 0.05rem 0.35rem; font-weight: 700; flex: 0 0 auto; }
.art-drawer-item-title { font-size: 0.78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* K (イシュー#276): 追加先のブロックに既に入っている本には「追加済み」を出す (印のみ・クリックは禁じない=
   同じ本の多重配置は既存仕様 ADR-058 §11.1 のため) */
.art-drawer-item-added { display: inline-flex; align-items: center; gap: 0.2rem; color: var(--success, #3aa657); font-size: 0.7rem; font-weight: 700; flex: 0 0 auto; white-space: nowrap; }
.art-drawer-empty { padding: 1rem 0.7rem; color: var(--muted); font-size: 0.78rem; text-align: center; }

@media (max-width: 900px) {
    /* ボトムシート化 (イシュー#165・案C)。.art-side を fixed の画面下せり上がりオーバーレイに変え、
       .art-wrap/.art-col は 900px 超と同じ「モーダルの残り高さを flex チェーンで配分する」設計に統一する
       (58vh 決め打ちだった旧実装は #59 時点で「.art-side が縦積みでモーダル全体がスクロールする」前提の
       上に成立していたが、.art-side をフローから外す本変更でその前提自体が崩れるため撤去する)。 */
    .art-wrap { grid-template-columns: 1fr; }

    .art-sheet-handle { display: block; width: 36px; height: 4px; background: var(--line); border-radius: 999px; margin: 0.5rem auto 0; }
    .art-sheet-close { display: inline-flex; align-items: center; }
    .art-drawer-collapse-btn { display: none; }
    /* イシュー#168: art-drawer-user-collapsed は900px超専用の状態。PCで畳んだ記憶が残ったまま
       900px以下でこのモーダルを開くと .art-side ごと display:none になりボトムシートが開けなく
       なる事故になるため、900px以下では明示的に無効化する。 */
    .art-wrap.art-drawer-user-collapsed .art-side { display: flex; }

    /* 高さは vh 決め打ちでなく安全弁 (ヘッダー等の実測 3.5rem を引いた残り) との min() にする。
       完全な「親の残り高さから導く」は position:fixed の性質上できない (containing block が viewport になるため)。
       6幅実測 (イシュー#165 検証ステップ) で安全弁側が常時勝つ場合は実質的な決め打ちと同じになるため flex 側の値を見直す。 */
    .art-side {
        position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto;
        max-height: min(70vh, calc(100vh - 3.5rem));
        border-radius: 14px 14px 0 0;
        box-shadow: 0 -6px 20px rgba(0,0,0,.18);
        transform: translateY(100%);
        transition: transform 0.25s ease;
        /* 構成A (イシュー#276) の #art-edit-bottom-bar (z-index:1050) は edit モードで常時表示なので、
           edit モードのブロック内「+」からもシートを開けるこのドロワーは、開いている間はバーより
           上に来る必要がある (950 → 1060。.art-publish-modal 等 1150+ のモーダル群よりは下のまま)。 */
        z-index: 1060;
    }
    .art-side.is-open { transform: translateY(0); }

    /* イシュー#330: 「戻る/進む」(履歴復元)で開閉する時だけ、スライドのtransitionを無効化して
       即座に表示/非表示する(本詳細・左ドロワーと同じ規則・②決裁2026-10-23)。
       付与/解除は _histNoAnimOnce() (js/bookshelf.js)。 */
    .art-side.hist-no-anim { transition: none !important; }

    .art-sheet-scrim {
        display: block; position: fixed; inset: 0; background: rgba(0,0,0,.35);
        z-index: 1055; opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
    }
    .art-sheet-scrim.is-open { opacity: 1; pointer-events: auto; }
}
@media (max-width: 760px) {
    .art-hd { flex-wrap: wrap; }
    .art-title-input { flex: 1 1 100%; order: -1; }
}

/* --- プレビュー別画面 (ほぼ全画面オーバーレイ) --- */
/* .pp-preview-modal の z-index 1200 は撤去: 重なり順は管理役の data-layer (イシュー#367 step4) */
.pp-preview-dialog { position: relative; display: flex; flex-direction: column; width: 96vw; height: 92vh; max-width: 1100px; margin: 4vh auto 0; background: var(--panel); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); }
.pp-preview-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--line); background: var(--side); }
.pp-preview-bar-title { display: inline-flex; align-items: center; font-weight: 700; font-size: 0.92rem; }
.pp-preview-bar-actions { display: flex; gap: 0.5rem; }
.pp-preview-stage { position: relative; flex: 1; overflow: auto; background: #e9e7ee; display: flex; justify-content: center; }
.pp-preview-stage #pp-preview-frame { width: 100%; max-width: 100%; height: 100%; border: none; background: #fff; }
.pp-preview-stage.pp-stage-mobile { padding: 18px 0; }
.pp-preview-stage.pp-stage-mobile #pp-preview-frame { width: 390px; max-width: 390px; height: 100%; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.18); background: #fff; }
.pp-preview-stall { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.9rem; padding: 1.5rem; background: rgba(255,255,255,.94); text-align: center; }
.pp-preview-stall[hidden] { display: none; }
.pp-preview-stall-msg { margin: 0; color: var(--fg2); font-size: 0.92rem; max-width: 32em; white-space: pre-line; }
/* イシュー#161: 進捗表示はiframe srcdocの再パース非依存(親DOMの同期textContent書き換え)にする */
.pp-preview-progress { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 1.5rem; background: rgba(255,255,255,.94); text-align: center; pointer-events: none; }
.pp-preview-progress[hidden] { display: none; }
.pp-preview-progress-msg { margin: 0; color: #888; font-size: 0.92rem; }
@media (max-width: 760px) {
    .pp-preview-dialog { width: 100vw; height: 100vh; margin: 0; border-radius: 0; }
}

/* 統一方針 (C-271): ボタンは内容幅・横並び (全幅積みは他セクションと不揃いになる) */
.settings-action-row .btn,
.settings-action-list .btn {
    width: auto;
    text-align: center;
}

.settings-subsection-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    color: var(--fg2);
    margin: 1.4rem 0 0.6rem;
    font-weight: 600;
}
/* 節の先頭サブ見出しは上余白を詰める (ヘッダー直下の二重余白を避ける) */
.settings-section-body > .settings-subsection-title:first-child { margin-top: 0.2rem; }

/* プラグインインストールカード */
.plugin-install-card {
    background: var(--line2);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 0.5rem;
}

.plugin-install-label {
    font-weight: 600;
    color: var(--fg);
    margin-bottom: 0.5rem;
}

.plugin-install-input-group {
    display: flex;
    gap: 0.5rem;
}

.plugin-install-input-group input[type="url"] {
    flex: 1;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: 4px;
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
    font-size: 0.85rem;
    background: var(--panel);
}

.plugin-install-hint {
    display: block;
    font-size: 0.8rem;
    color: var(--muted);
    margin-top: 0.5rem;
}

.plugin-install-hint code {
    background: var(--line2);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.9em;
}

.plugins-list-host {
    margin-bottom: 0.5rem;
}

/* プラグイン UI ボタンの受け皿 (旧 pool)。V6 ではカスタマイザに集約したので非表示。 */
.plugin-buttons-host,
.plugins-list-host {
    display: none !important;
}

/* プラグインが本詳細ペインに差し込むセクション (registerDetailSection) */
.plugin-detail-section {
    margin-top: 0.9rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--line, #e5e7eb);
}
.plugin-detail-section:empty {
    display: none;
}

/* ===== Header (V6: square icon buttons, popovers) ===== */
.header-controls {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.3rem;
    flex-shrink: 0;
}

.header-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}

.btn-icon-square {
    width: 32px;
    height: 32px;
    padding: 0;
    background: var(--panel);
    color: var(--fg2);
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 1rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s, opacity 0.12s;
}

.btn-icon-square:hover {
    background: var(--accent-bg);
    border-color: var(--accent);
    color: var(--accent);
}

.btn-icon-square:active {
    background: var(--accent-bg);
}

.btn-icon-square.is-active {
    background: var(--accent-bg);
    color: var(--accent);
    border-color: var(--accent);
}

/* ON/OFF 型プラグインボタンの「現在 ON」表示。
   accent で塗りつぶし、OFF (通常の枠線ボタン) と一目で区別できるようにする。 */
.plugin-ui-button.is-on {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.plugin-ui-button.is-on:hover {
    background: var(--accent-strong, var(--accent));
    color: #fff;
    border-color: var(--accent-strong, var(--accent));
}
.plugin-ui-button.is-on svg { color: #fff; }

/* ===== Phase C2: ヘッダー撤去に伴う再配置 ===== */
/* サイドバー上部の brand (専用行。pane-toolbar は廃止) */
.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
    padding: 0.6rem 0.75rem;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
    color: var(--fg);
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.sidebar-brand:hover { background: var(--line2); }
.sidebar-brand:hover .brand-text { color: var(--accent); }
.sidebar-brand .brand-icon {
    width: 18px;
    height: 18px;
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ペイン開閉タブ: ペイン端から少しだけ飛び出す小さなつまみ。
   .app-shell 基準で絶対配置し、ペインの overflow:hidden にクリップされない。 */
.pane-tab {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 60;
    width: 20px;
    height: 60px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-bg);
    border: 1px solid var(--accent);
    color: var(--accent);
    cursor: pointer;
    box-shadow: 0 2px 6px var(--shadow-color);
    transition: color 0.12s, border-color 0.12s, background 0.12s, left 0.18s, right 0.18s;
}
.pane-tab:hover {
    color: #fff;
    border-color: var(--accent);
    background: var(--accent);
}
.pane-tab svg { display: block; }
/* 折りたたみ時はアイコンを反転 (内向き chevron → 外向き) */
body.left-collapsed  .pane-tab-left svg,
body.right-collapsed .pane-tab-right svg {
    transform: rotate(180deg);
}

.pane-tab-left {
    left: calc(var(--left-col, 220px) - 10px);
    border-radius: 0 8px 8px 0;
    border-left: none;
}
body.left-collapsed .pane-tab-left { left: 0; }

.pane-tab-right {
    right: calc(var(--right-col, 320px) - 10px);
    border-radius: 8px 0 0 8px;
    border-right: none;
}
body.right-collapsed .pane-tab-right { right: 0; }

/* 折りたたみ時はペイン境界の 1px 線を消す (幅 0 でも border が残るため) */
body.left-collapsed .app-sidebar { border-right: none; }
body.right-collapsed .app-detail { border-left: none; }

/* サイドバー下部ユーティリティ (設定 / 本棚管理 / 一覧表示切替 / プラグインボタン) */
.sidebar-utility {
    flex-shrink: 0;
    /* ボタン列を少し上げる: 下余白を増やして最下端から離す */
    padding: 0.4rem 0.5rem 0.85rem;
    border-top: 1px solid var(--line);
}
.sidebar-utility .header-controls {
    flex-wrap: wrap;
    justify-content: flex-start;
    position: relative;
}
/* サイドバーユーティリティのボタンを D&D 並び替え (ヘッダーカスタマイザ廃止後、Pointer Events化=イシュー#337) */
.sidebar-utility .header-item {
    cursor: grab;
}
.sidebar-utility .header-item.hdr-item-dragging {
    opacity: 0.4;
    cursor: grabbing;
}
.hdr-utility-drop-indicator {
    display: inline-block;
    width: 3px;
    align-self: stretch;
    min-height: 28px;
    background: var(--accent, #3d52ff);
    border-radius: 2px;
}
body.left-collapsed .app-sidebar .sidebar-utility {
    display: none;
}

/* ホームは検索バーを置かず ⌘K のみ (全画面共通)。.home-header / .palette-trigger は撤去 */

/* メインビューで本棚を必要とするボタンは disabled 表示 */
body.app-view-main .needs-bookshelf .btn-icon-square {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

/* popover host (本棚切替 / 検索 / フィルター 共通) */
.popover-host {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.popover {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 0.8rem;
    min-width: 240px;
}

.popover[hidden] { display: none; }

.popover-title {
    font-size: 0.85rem;
    color: var(--fg2);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

/* 検索 popover */
.popover-search { min-width: 280px; }
.popover-search input {
    width: 100%;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 0.95rem;
}

/* 本棚切替 popover */
.popover-bookshelf { min-width: 260px; max-height: 60vh; overflow-y: auto; }
.bookshelf-popover-list {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.bookshelf-popover-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.7rem;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    text-align: left;
    font-size: 0.9rem;
    color: var(--fg);
    width: 100%;
}
.bookshelf-popover-item:hover {
    background: var(--accent-bg);
    border-color: #93c5fd;
}
.bookshelf-popover-item.is-current {
    background: var(--accent-bg);
    border-color: #3b82f6;
    font-weight: 600;
}

/* ===== Header customizer (in settings modal) ===== */
.settings-section-hint {
    font-size: 0.85rem;
    color: var(--muted);
    margin: -0.4rem 0 0.8rem;
}

/* ===== Header editor V6 (vertical 2-zone, 1 item per row, D&D) ===== */
.hdr-editor-v6 {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.hdr-zone {
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--line2);
    padding: 0.6rem 0.8rem;
    transition: background 0.12s, border-color 0.12s;
}

.hdr-zone.hdr-drop-target {
    background: var(--accent-bg);
    border-color: #3b82f6;
}

.hdr-zone-title {
    font-size: 0.9rem;
    color: var(--fg);
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.hdr-zone-title small {
    color: var(--muted);
    font-weight: normal;
    margin-left: 0.4rem;
    font-size: 0.85em;
}

.hdr-zone-list {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-height: 2.6rem;
    position: relative;
}

.hdr-empty {
    color: var(--muted);
    font-size: 0.85rem;
    font-style: italic;
    padding: 0.5rem;
    text-align: center;
}

.hdr-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.7rem;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 0.9rem;
    cursor: grab;
    user-select: none;
    transition: background 0.1s, border-color 0.1s;
}

.hdr-row:hover {
    background: var(--accent-bg);
    border-color: #93c5fd;
}

.hdr-row.hdr-row-dragging {
    cursor: grabbing;
    opacity: 0.4;
    background: var(--accent-bg);
    border-color: #3b82f6;
}

.hdr-row-grip {
    color: #aaa;
    font-size: 1.1rem;
    line-height: 1;
    cursor: grab;
}

.hdr-row-icon {
    font-size: 1.2rem;
    line-height: 1;
    width: 1.5rem;
    text-align: center;
}

.hdr-row-label {
    flex: 1;
    color: var(--fg);
}

.hdr-row-badges {
    display: inline-flex;
    gap: 0.3rem;
}

.hdr-row-badge {
    font-size: 0.75rem;
    padding: 0.1rem 0.45rem;
    border-radius: 8px;
    background: var(--line2);
    color: var(--muted);
    white-space: nowrap;
}

.hdr-row-badge.plugin {
    background: #ede9fe;
    color: #6d28d9;
}

.hdr-row-badge.muted {
    background: var(--line2);
    color: var(--muted);
}

.hdr-row-actions {
    display: inline-flex;
    gap: 0.3rem;
}

.hdr-row-move-btn,
.hdr-row-invoke-btn,
.hdr-row-uninstall {
    border: 1px solid var(--line);
    background: var(--panel);
    color: var(--fg2);
    font-size: 0.85rem;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    cursor: pointer;
    min-width: 1.8rem;
    line-height: 1.2;
}

.hdr-row-move-btn {
    font-weight: 600;
    color: #3b82f6;
    border-color: #93c5fd;
}

.hdr-row-move-btn:hover {
    background: var(--accent-bg);
    border-color: #3b82f6;
}

.hdr-row-invoke-btn {
    color: #15803d;
    border-color: #86efac;
    font-weight: 600;
}

.hdr-row-invoke-btn:hover {
    background: #dcfce7;
    border-color: #16a34a;
}

.hdr-row-uninstall {
    color: #b91c1c;
    border-color: #fecaca;
}

.hdr-row-uninstall:hover {
    background: #fee2e2;
    border-color: #b91c1c;
}

.hdr-row-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.85rem;
    cursor: pointer;
    padding: 0.2rem 0.5rem;
    border: 1px solid var(--line);
    background: var(--panel);
    border-radius: 4px;
}

.hdr-row-toggle:hover {
    background: var(--accent-bg);
    border-color: #93c5fd;
}

.hdr-row-toggle input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
}

.hdr-row-plugin-ctrl {
    cursor: default;
    background: var(--line2);
}

.hdr-row-plugin-ctrl:hover {
    background: var(--line2);
    border-color: var(--line);
}

.hdr-row-desc {
    font-size: 0.78rem;
    color: var(--muted);
    margin-top: 0.15rem;
    font-weight: normal;
}

.hdr-row-badge.warn {
    background: #fee2e2;
    color: #b91c1c;
}

/* ===== Plugin list section (V2: grid + drag-rearrange) ===== */
.plugin-search-row {
    margin: 0.5rem 0;
}

.plugin-search-row input {
    width: 100%;
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 0.9rem;
}

.plugin-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.4rem;
    margin-bottom: 1rem;
}

.plugin-card-v2 {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem 0.85rem;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 10px;
    cursor: grab;
    user-select: none;
    transition: border-color 0.12s, box-shadow 0.12s, opacity 0.12s;
}

.plugin-card-v2:hover {
    border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
    box-shadow: 0 1px 4px rgba(18, 20, 28, 0.06);
}

.plugin-card-v2.is-dragging {
    opacity: 0.4;
    cursor: grabbing;
    background: var(--accent-bg);
    border-color: #3b82f6;
}

.plugin-drop-indicator {
    height: 3px;
    background: #3b82f6;
    border-radius: 2px;
    margin: 0;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

/* 1 行目: アイコン chip + 名前/メタ + 有効トグル */
.pcard-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.pcard-icon {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--accent-bg, #eef0ff);
    color: var(--accent, #3d52ff);
}
.pcard-icon.is-off {
    background: var(--line2);
    color: var(--muted);
}
.pcard-headtext {
    flex: 1;
    min-width: 0;
}
.pcard-name {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
}
.pcard-name strong {
    color: var(--fg);
    font-size: 0.95rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pcard-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.1rem;
    min-height: 1em;
}
.pcard-version {
    font-size: 0.75rem;
    color: var(--muted);
}
.pcard-toggle {
    flex: 0 0 auto;
}

.plugin-card-desc {
    font-size: 0.82rem;
    color: var(--fg2, #4b5460);
    margin: 0;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.plugin-state {
    font-size: 0.78rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.plugin-state.ok    { color: #15803d; }
.plugin-state.warn  { color: var(--warning); }
.plugin-state.muted { color: var(--muted); }

.plugin-card-icon-preview {
    color: var(--accent);
    margin-right: 0.4rem;
    display: inline-flex;
    align-items: center;
    vertical-align: -3px;
}

.plugin-publishable-badge {
    display: inline-flex;
    align-items: center;
    color: var(--accent);
    margin-left: 0.2rem;
    vertical-align: -2px;
}

.plugin-standard-badge {
    display: inline-flex;
    align-items: center;
    color: var(--muted);
    margin-left: 0.2rem;
    vertical-align: -2px;
}

/* 拡張点カテゴリのバッジ (種別表示) */
.plugin-card-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin: 0;
}
.plugin-cat-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.68rem;
    line-height: 1;
    padding: 0.18rem 0.45rem;
    border-radius: 999px;
    background: var(--accent-bg, #eef0ff);
    color: var(--accent-strong, #2a3aff);
    border: 1px solid color-mix(in srgb, var(--accent, #3d52ff) 25%, transparent);
}
.plugin-cat-badge .h-icon { display: inline-flex; }

/* 分類マークの凡例 (?ヘルプ) */
.plugin-cat-help {
    margin: 0.4rem 0 0.6rem;
    font-size: 0.85rem;
}
.plugin-cat-help > summary {
    cursor: pointer;
    color: var(--accent, #3d52ff);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    list-style: none;
    user-select: none;
}
.plugin-cat-help > summary::-webkit-details-marker { display: none; }
.plugin-cat-help > summary:hover { text-decoration: underline; }
.plugin-cat-legend {
    margin-top: 0.5rem;
    padding: 0.7rem 0.85rem;
    background: var(--side, #fbfbfd);
    border: 1px solid var(--line, #e5e7eb);
    border-radius: 8px;
}
.plugin-cat-legend-intro {
    margin: 0 0 0.6rem;
    font-size: 0.82rem;
    color: var(--fg2, #4b5460);
    line-height: 1.5;
}
.plugin-cat-legend-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.plugin-cat-legend-list li {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.plugin-cat-legend-list .plugin-cat-badge { flex: 0 0 auto; }
.plugin-cat-legend-desc {
    font-size: 0.82rem;
    color: var(--fg2, #4b5460);
    flex: 1;
    min-width: 180px;
}

.plugin-card-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
    margin-top: 0.05rem;
    padding-top: 0.4rem;
    border-top: 1px solid var(--line2);
}

/* ===== プラグインごとの設定モーダル ===== */
.plugin-settings-modal { position: fixed; inset: 0; display: none; } /* z-index は管理役の data-layer (イシュー#367 step5・旧 1200 は撤去) */
.plugin-settings-modal.show { display: block; }
.plugin-settings-modal .psm-backdrop { position: absolute; inset: 0; background: rgba(18,20,28,0.45); }
.plugin-settings-modal .psm-panel {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: min(560px, calc(100vw - 2rem)); max-height: 85vh; overflow: auto;
    background: var(--panel, #fff); color: var(--fg, #1c1f24);
    border: 1px solid var(--line, #e5e7eb); border-radius: 12px; box-shadow: var(--shadow, 0 8px 24px rgba(0,0,0,0.2));
}
.plugin-settings-modal .psm-head {
    display: flex; align-items: center; gap: 0.7rem;
    padding: 0.9rem 1rem; border-bottom: 1px solid var(--line, #e5e7eb);
    position: sticky; top: 0; background: var(--panel, #fff); z-index: 1;
}
.plugin-settings-modal .psm-head-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; flex: 0 0 auto;
    border-radius: 10px; background: var(--accent-bg, #eef0ff); color: var(--accent, #3d52ff);
}
.plugin-settings-modal .psm-head-icon.is-off { background: var(--line2, var(--line2)); color: var(--muted, var(--line)); }
.plugin-settings-modal .psm-head-text { flex: 1; min-width: 0; }
.plugin-settings-modal .psm-title { margin: 0; font-size: 1.05rem; line-height: 1.2; }
.plugin-settings-modal .psm-head-sub {
    display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.25rem;
}
.plugin-settings-modal .psm-version { font-size: 0.75rem; color: var(--muted, #6b7280); }
.plugin-settings-modal .psm-head-sub .plugin-card-cats { margin: 0; }
.plugin-settings-modal .psm-close {
    background: none; border: none; cursor: pointer; color: var(--muted, var(--muted));
    display: inline-flex; padding: 0.3rem; border-radius: 8px; flex: 0 0 auto; align-self: flex-start;
}
.plugin-settings-modal .psm-close:hover { background: var(--line2, var(--line2)); color: var(--fg, #1c1f24); }
.plugin-settings-modal .psm-body { padding: 1rem 1.1rem 1.2rem; }
.plugin-settings-modal .psm-desc { font-size: 0.85rem; color: var(--fg2, #4b5460); margin: 0 0 1rem; line-height: 1.5; }

/* 有効化トグルカード */
.plugin-settings-modal .psm-enable-card {
    display: flex; align-items: center; gap: 0.8rem;
    padding: 0.7rem 0.9rem; border-radius: 10px;
    border: 1px solid var(--line, #e5e7eb); background: var(--side, #fbfbfd);
    margin-bottom: 1.2rem;
}
.plugin-settings-modal .psm-enable-card.is-on {
    border-color: color-mix(in srgb, var(--accent, #3d52ff) 35%, transparent);
    background: var(--accent-bg, #eef0ff);
}
.plugin-settings-modal .psm-enable-text { flex: 1; min-width: 0; }
.plugin-settings-modal .psm-enable-title { font-size: 0.9rem; font-weight: 600; color: var(--fg, #1c1f24); }
.plugin-settings-modal .psm-enable-state {
    display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.76rem; margin-top: 0.15rem;
}
.plugin-settings-modal .psm-enable-state.ok    { color: #15803d; }
.plugin-settings-modal .psm-enable-state.warn  { color: var(--warning, #a06800); }
.plugin-settings-modal .psm-enable-state.muted { color: var(--muted, var(--muted)); }

.plugin-settings-modal .psm-section { margin-top: 1.2rem; }
.plugin-settings-modal .psm-section-title {
    font-size: 0.72rem; font-weight: 700; color: var(--muted, #6b7280);
    text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.55rem;
    padding-bottom: 0.35rem; border-bottom: 1px solid var(--line, var(--line2));
}
/* 設定フィールド行 (ラベル + ヒント + コントロール) */
.plugin-settings-modal .psm-field {
    display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap;
}
.plugin-settings-modal .psm-field-main { flex: 1; min-width: 120px; display: flex; flex-direction: column; }
.plugin-settings-modal .psm-field-label { font-size: 0.85rem; color: var(--fg, #1c1f24); }
.plugin-settings-modal .psm-field-hint { font-size: 0.72rem; color: var(--muted, var(--line)); }
.plugin-settings-modal .psm-icon-preview {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border: 1px solid var(--line, #e5e7eb); border-radius: 8px;
    background: var(--panel, #fff); color: var(--accent, #3d52ff); flex: 0 0 auto;
}
.plugin-settings-modal .psm-icon-none { color: var(--muted, var(--muted)); }
.plugin-settings-modal .psm-muted { font-size: 0.82rem; color: var(--muted, var(--muted)); margin: 0; }
#psm-plugin-custom { font-size: 0.88rem; }

/* ===== トグルスイッチ (プラグイン有効/無効など汎用) ===== */
.toggle-switch {
    display: inline-flex;
    align-items: center;
    position: relative;
    cursor: pointer;
    flex: 0 0 auto;
}
.toggle-switch input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
}
.toggle-switch-track {
    display: inline-block;
    position: relative;
    width: 38px;
    height: 22px;
    border-radius: 999px;
    background: var(--line);
    transition: background 0.15s ease;
}
.toggle-switch-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--panel);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    transition: transform 0.15s ease;
}
.toggle-switch input:checked + .toggle-switch-track {
    background: var(--accent, #3d52ff);
}
.toggle-switch input:checked + .toggle-switch-track .toggle-switch-thumb {
    transform: translateX(16px);
}
.toggle-switch input:focus-visible + .toggle-switch-track {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #3d52ff) 30%, transparent);
}
.toggle-switch-lg .toggle-switch-track { width: 46px; height: 26px; }
.toggle-switch-lg .toggle-switch-thumb { width: 22px; height: 22px; }
.toggle-switch-lg input:checked + .toggle-switch-track .toggle-switch-thumb { transform: translateX(20px); }

/* 無効プラグインカードは淡色化 (トグル OFF を視覚的に補強) */
.plugin-card-v2.is-disabled { background: var(--side, #fbfbfd); }
.plugin-card-v2.is-disabled .pcard-headtext,
.plugin-card-v2.is-disabled .plugin-card-cats,
.plugin-card-v2.is-disabled .plugin-card-desc { opacity: 0.55; }

/* アイコンのみの小ボタン (削除など) */
.btn-icon-only {
    padding: 0.3rem;
    line-height: 1;
}
.btn-icon-only .h-icon { display: inline-flex; }

.plugin-card-uninstall {
    color: #b91c1c;
    border-color: #fecaca;
}
.plugin-card-uninstall:hover {
    background: #fee2e2;
}

.hdr-drop-indicator {
    height: 3px;
    background: #3b82f6;
    border-radius: 2px;
    margin: 0;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.hdr-editor-hint {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--muted);
    font-size: 0.8rem;
    flex-wrap: wrap;
}

/* ===== Bookshelf view header (mockup: wb-toolbar) ===== */
.bookshelf-view-header {
    /* Phase C2: 本棚ビューのヘッダー。スクロールしても天面に固定 (sticky)。
       view の左右パディングを相殺して全幅バーにする。
       Phase H2-8: アイコンを名前(上)＋説明(下)の左に立てる構成。説明は小さな下段に
       収め、ヘッダーが太くなりすぎないようにする (padding も圧縮)。 */
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--panel);
    border: none;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    padding: 0.4rem 0.9rem;
    margin: 0 -0.9rem 0.8rem;
    font-size: 0.85rem;
}
/* タイトル(アイコン+名前/説明) + ツールバーの行 */
.bvh-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
}

/* アイコン + テキスト(名前/説明) を横並び。アイコンが両行の高さに渡って左に立つ */
.bvh-title {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
    flex: 1 1 auto;
}
.bvh-icon {
    /* Phase H2-8: 以前の本棚アイコンのように四角い枠で囲う */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    background: var(--line2);
    border: 1px solid var(--line, #e5e7eb);
    border-radius: 9px;
    color: var(--accent);
}
.bvh-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    line-height: 1.15;
}

#current-bookshelf-title {
    margin: 0 !important;
    /* 上段=本棚名 (ヘッダーの主役。約7割の視覚比重) */
    font-size: 0.98rem !important;
    font-weight: 600;
    color: var(--fg) !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bookshelf-view-description {
    /* 下段=説明 (名前より小さい従属的な行。約3割) */
    color: var(--muted);
    font-size: 0.72rem;
    line-height: 1.2;
    margin: 0.05rem 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===== Book item: 全体をクリッカブルに (Phase B-8: アニメーション削除) ===== */
.book-item.clickable {
    cursor: pointer;
}

.book-cover-link {
    display: block;
    cursor: pointer;
}


/* Import Modal Styles */
.import-options {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-bottom: 2rem;
}

.import-option {
    padding: 1.5rem;
    border: 2px solid var(--line);
    border-radius: 10px;
    background: var(--line2);
}

.import-option h3 {
    margin-bottom: 1rem;
    color: var(--fg);
}

.kindle-paste-input {
    width: 100%;
    margin-bottom: 0.75rem;
    padding: 0.5rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    font: inherit;
    font-size: 0.85rem;
    resize: vertical;
    box-sizing: border-box;
}

.import-option input[type="file"],
.import-file-row input[type="file"] {
    margin-bottom: 1rem;
    padding: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 5px;
    width: 100%;
}

.import-option-tip {
    margin: 0.75rem 0 0;
    padding: 0.6rem 0.8rem;
    background: var(--line2);
    border-left: 3px solid var(--accent);
    border-radius: 0 6px 6px 0;
    font-size: 0.85rem;
    color: var(--fg-sub, var(--fg));
}

.import-relay-status {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: var(--accent-bg);
    border: 1px solid var(--accent);
    border-radius: 8px;
    font-size: 0.85rem;
    color: var(--fg);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.import-relay-status[hidden] { display: none; }/* display:flex が [hidden] を上書きしていた: 受信待ちでない開封時に空の待機ボックスが常時表示されるバグの修正 */
.import-relay-status .h-icon { flex: 0 0 auto; animation: spin 1.2s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.relay-url-row { display: flex; flex-direction: column; gap: 0.25rem; }
.relay-url-label { font-size: 0.78rem; color: var(--muted, #6b6477); }
.relay-url-copy {
    font-size: 0.75rem;
    word-break: break-all;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 0.25rem 0.4rem;
    user-select: all;
}

/* ===== 取込モーダル: 端末タブ + レーン (2026-07 端末ファースト改修) ===== */
.import-device-tabs { display: flex; gap: 0.4rem; border-bottom: 1px solid var(--line); margin: 0.8rem 0 1rem; }
.import-device-tab { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.45rem 0.9rem; border: none; background: none; color: var(--muted); font-weight: 600; font-size: 0.9rem; border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; }
.import-device-tab.active { color: var(--accent-strong); border-bottom-color: var(--accent); }
.import-device-badge { font-size: 0.68rem; font-weight: 700; color: var(--accent-strong); background: var(--accent-bg); border-radius: 999px; padding: 0.1rem 0.45rem; }
/* 取込モーダルの番号つき手順 (C-281: 「1→2→3 でやれば終わる」を見た目で示す) */
.import-steps {
    list-style: none;
    margin: 0.9rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}
.import-step-head,
.import-step-details > summary {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-weight: 600;
    color: var(--fg);
    font-size: 0.92rem;
}
.import-step-details > summary { cursor: pointer; list-style: none; }
.import-step-details > summary::-webkit-details-marker { display: none; }
.import-step-num {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.import-step-title { min-width: 0; }
.import-step-details > summary .pp-advanced-note { margin-left: 0.1rem; }
.import-step-details > summary .pp-advanced-caret { margin-left: auto; transition: transform 0.15s ease; }
.import-step-details[open] > summary .pp-advanced-caret { transform: rotate(180deg); }
.import-step-body {
    /* 番号バッジの下に本文を揃える (22px バッジ + 0.55rem gap) */
    margin: 0.45rem 0 0 calc(22px + 0.55rem);
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.import-step-body .pp-hint { margin: 0; }
/* 取込ブックマークのドラッグチップ: ボタンでなく「つまめるタグ」に見せる (ADR-054) */
.bml-chip {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.45rem 0.8rem;
    border: 2px dashed var(--accent, #5b5bd6); border-radius: 8px;
    color: var(--accent, #5b5bd6); background: rgba(91, 91, 214, 0.06);
    font-size: 0.9rem; font-weight: 600; text-decoration: none;
    cursor: grab; user-select: none;
}
.bml-chip:active { cursor: grabbing; }
.bml-chip-note { font-size: 0.75rem; font-weight: 400; color: var(--muted, #888); }
.import-option-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; }
.import-option-actions > * { white-space: nowrap; }
/* イシュー#453・②決裁2026-11-02: ui-standards §7 原則7(1行1内容)。説明文とボタンを同じ行に
   並べていた旧実装を縦積みに変更(直し方は tmp/453/453-step1-notes.md §(c)) */
.import-fallback-note { font-size: 0.82rem; color: var(--muted); display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem; margin: 0.3rem 0 0; }
.import-fallback-note p { margin: 0; }
/* 「取込データを直接渡す」節: 「貼り付けて取り込む」/「ファイルから取り込む」の2系統を
   視覚的に分割するブロック (イシュー#89)。細い区切り線だけでは2系統が伝わらなかった。 */
.import-method-block { padding: 0.85rem 0.9rem; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); display: flex; flex-direction: column; gap: 0.6rem; }
.import-method-block + .import-method-block { margin-top: 0.9rem; }
.import-method-block-title { margin: 0; font-size: 0.85rem; font-weight: 700; color: var(--fg); }
.import-file-row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.import-file-row > label, .import-file-row > button { white-space: nowrap; }
/* ファイル名は可変長 (ユーザのファイル名依存) のため nowrap にしない。
   min-width:0 で flex アイテムとして縮小可能にし、単語境界の無い長い名前も折り返す (②レビュー指摘)。 */
.import-file-name { font-size: 0.85rem; color: var(--muted); min-width: 0; overflow-wrap: anywhere; }
.import-relay-waiting { display: flex; align-items: center; gap: 0.5rem; }
.import-media-slot { margin: 0.2rem 0; }
.import-media-gif { display: block; max-width: 100%; border: 1px solid var(--line); border-radius: 8px; }
.import-shortcut-manual { margin-top: 0.5rem; }
.import-shortcut-manual > summary { font-size: 0.8rem; color: var(--muted); cursor: pointer; }
a.relay-url-copy { color: var(--accent-strong); text-decoration: underline; word-break: break-all; }
.book-list-stats { margin-bottom: 1rem; padding: 0.5rem; background: var(--line2); border-radius: 4px; font-size: 0.9rem; color: var(--muted); }
@media (max-width: 900px) { .import-device-tabs { overflow-x: auto; } }

.upgrade-rec-badge {
    display: inline-block;
    margin-left: 0.4rem;
    font-size: 0.72rem;
    font-weight: 600;
    background: #fff3;
    border: 1px solid #fff5;
    border-radius: 999px;
    padding: 0 0.45em;
    vertical-align: middle;
    line-height: 1.6;
}
.upgrade-costly-badge {
    display: inline-block;
    margin-left: 0.4rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--warning, #a06800);
    vertical-align: middle;
}

.import-results {
    background: var(--accent-bg);
    border: 1px solid #3498db;
    border-radius: 10px;
    padding: 1.5rem;
    margin-top: 1rem;
}

.import-summary h3 {
    color: var(--fg);
    margin-bottom: 1rem;
}

.import-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.import-stats .stat-item {
    text-align: center;
    background: var(--panel);
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid var(--line);
}

.import-stats .stat-value.success {
    color: #27ae60;
    font-weight: bold;
}

.import-stats .stat-value.warning {
    color: #f39c12;
    font-weight: bold;
}

.import-note {
    font-style: italic;
    color: var(--muted);
    margin-bottom: 0;
}

/* Add Book Modal: 灰色カード枠 (.add-book-options/.add-option) は C-277 で廃止。
   form-group の縦積み + 右寄せアクションのみ。 */
.modal-footer-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 1.2rem;
}

/* 除外一覧 (C-277: インラインスタイルからクラス化) */
.exclusion-item {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.55rem 0.15rem;
    border-bottom: 1px solid var(--line);
}
.exclusion-cover {
    width: 40px;
    height: 60px;
    object-fit: cover;
    border-radius: 3px;
    flex-shrink: 0;
    background: var(--line);
}
.exclusion-meta { flex: 1; min-width: 0; }
.exclusion-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exclusion-authors { color: var(--muted); font-size: 0.85rem; }
.exclusion-asin { color: var(--muted); font-size: 0.72rem; }

/* モーダル冒頭の補足 (除外一覧など)。pp-hint と同格 */
.muted-hint { color: var(--muted); font-size: 0.85rem; margin: 0 0 0.9rem; line-height: 1.5; }

.form-group {
    margin-bottom: 1rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: bold;
    color: var(--fg);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 0.95rem;
    font-family: inherit;
    background: var(--panel);
    color: var(--text-color);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.form-group input:hover,
.form-group select:hover,
.form-group textarea:hover {
    border-color: #a8acb3;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.15);
}

.form-group small,
.field-help {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.8rem;
    color: #6c757d;
    line-height: 1.3;
    font-weight: normal;
}

.add-results {
    background: var(--accent-bg);
    border: 1px solid #27ae60;
    border-radius: 10px;
    padding: 1.5rem;
    margin-top: 1rem;
}

.add-success h3 {
    color: #27ae60;
    margin-bottom: 1rem;
}

.added-book-info p {
    margin-bottom: 0.5rem;
    color: var(--fg);
}

/* Delete Button Specific Styles */
.delete-btn {
    background-color: #e74c3c !important;
    border-color: #c0392b !important;
}

.delete-btn:hover {
    background-color: #c0392b !important;
    border-color: #a93226 !important;
}

/* Responsive Modal Improvements */
@media (max-width: 900px) {
    .import-options {
        gap: 1rem;
    }

    .import-option {
        padding: 1rem;
    }
    
    .import-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
    
    .management-buttons {
        gap: 0.5rem;
    }
}

/* Book Selection Styles */
.book-selection {
    background: var(--line2);
    border-radius: 8px;
    padding: 1.5rem;
    margin-top: 1rem;
}

.selection-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #dee2e6;
}

.selection-controls .btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

.selected-count {
    font-weight: 500;
    color: #495057;
}

.book-selection-list {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    background: var(--panel);
    margin-bottom: 1rem;
}

.book-selection-item {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    border-bottom: 1px solid #f1f3f4;
    transition: background-color 0.15s ease;
}

.book-selection-item:hover {
    background: var(--line2);
}

.book-selection-item:last-child {
    border-bottom: none;
}

/* 取り込み不可 (既存 / 除外済み) は淡色化 */
.book-selection-item.existing-book,
.book-selection-item.excluded-book {
    opacity: 0.5;
}
.book-selection-item.excluded-book .book-selection-title {
    color: var(--danger, #b91c1c);
}

.book-selection-item input[type="checkbox"] {
    margin-right: 0.75rem;
    transform: scale(1.2);
}

.book-selection-info {
    flex: 1;
}

.book-selection-title {
    font-weight: 500;
    color: var(--fg);
    margin-bottom: 0.25rem;
}

.book-selection-author {
    font-size: 0.875rem;
    color: #6c757d;
}

.book-selection-meta {
    font-size: 0.75rem;
    color: #868e96;
    margin-top: 0.25rem;
}

.import-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    padding-top: 1rem;
    border-top: 1px solid #dee2e6;
}

/* Book Edit Styles */
.book-edit-section {
    background: var(--line2);
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.edit-field {
    margin-bottom: 0.75rem;
}

.edit-field label {
    display: block;
    font-weight: 500;
    margin-bottom: 0.25rem;
    color: #495057;
}

.edit-field input {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    font-size: 0.875rem;
}

.save-book-changes {
    background: #28a745;
    color: white;
}

/* Large Textarea */
.large-textarea {
    min-height: 120px;
    resize: vertical;
    font-family: inherit;
    line-height: 1.5;
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-sizing: border-box;
    font-size: 14px;
}

.note-preview {
    background: var(--line2);
    padding: 0.75rem;
    border-radius: 4px;
    margin-top: 0.5rem;
    border-left: 3px solid #007bff;
}

.note-preview-content {
    white-space: pre-wrap;
    font-size: 0.875rem;
    line-height: 1.4;
}

@media (max-width: 900px) {
    .selection-controls {
        flex-direction: column;
        gap: 0.5rem;
        align-items: stretch;
    }
    
    .book-selection-list {
        max-height: 250px;
    }
    
    .import-actions {
        flex-direction: column;
    }
    
    .edit-field input {
        font-size: 1rem;
    }
    
    .large-textarea {
        min-height: 100px;
        padding: 10px 12px;
        font-size: 16px; /* モバイルでズームを防ぐため16px以上 */
    }
}

/* Bookshelf Edit Button Styles (let .btn / .btn-danger from base apply) */
.bookshelf-item .edit-bookshelf,
.bookshelf-item .delete-bookshelf {
    padding: 0.35rem 0.7rem;
}

/* Drag Handle Styles (Pointer Events D&D) */
.drag-handle {
    position: absolute;
    top: 5px;
    right: 5px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 4px 6px;
    border-radius: 4px;
    font-size: 14px;
    cursor: grab;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 100;
    user-select: none;
    touch-action: none; /* Pointer Events が touch スクロールより優先 */
}

/* カスタム順のときだけハンドルを表示 */
.bookshelf.is-custom-order .book-item:hover .drag-handle,
.bookshelf.is-custom-order .book-item:focus-within .drag-handle {
    opacity: 1;
}

.drag-handle:active {
    cursor: grabbing;
}

/* ドラッグ中の元要素を薄くする */
.book-item.dragging {
    opacity: 0.35;
}

/* ゴースト要素 (JS で fixed clone を挿入) */
.book-item.drag-ghost {
    box-shadow: 0 6px 24px rgba(0, 0, 0, .35);
    border-radius: var(--radius, 6px);
    opacity: 0.78;
}

.book-cover-container {
    position: relative;
}

/* Star Rating Filter Styles */
.star-filter-checkboxes {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.88rem;
    font-weight: 400;
    cursor: pointer;
    padding: 0.4rem 0.5rem;
    border-radius: 6px;
    transition: background-color 0.15s;
    color: var(--fg);
    line-height: 1.3;
    user-select: none;
}

.checkbox-label:hover {
    background-color: var(--line2);
}

/* カスタムチェックボックス — accent カラー + アニメーション */
.checkbox-label input[type="checkbox"],
.account-consent input[type="checkbox"],
.art-item-check,
.art-shelf-select-all {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    background: var(--panel);
    border: 1.5px solid var(--line);
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    transition: border-color 0.12s, background 0.12s;
}
.checkbox-label input[type="checkbox"]:hover,
.account-consent input[type="checkbox"]:hover,
.art-item-check:hover,
.art-shelf-select-all:hover {
    border-color: var(--accent);
}
.checkbox-label input[type="checkbox"]:checked,
.account-consent input[type="checkbox"]:checked,
.art-item-check:checked,
.art-shelf-select-all:checked {
    background: var(--accent);
    border-color: var(--accent);
}
.checkbox-label input[type="checkbox"]:checked::after,
.account-consent input[type="checkbox"]:checked::after,
.art-item-check:checked::after,
.art-shelf-select-all:checked::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.checkbox-label input[type="checkbox"]:focus-visible,
.account-consent input[type="checkbox"]:focus-visible,
.art-item-check:focus-visible,
.art-shelf-select-all:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
/* Mixed (部分選択) 表示: 選択バーのマスターチェック (イシュー#55)。
   :indeterminate 疑似クラスは動的に el.indeterminate を切り替えても再描画がトリガーされない
   ことがある (実測・Chromium) ため、JS側で明示的に付け外しする .is-mixed クラスで見た目を決める。
   詳細度は input.art-shelf-select-all.is-mixed まで上げる (.checkbox-label input[type="checkbox"] が
   祖先 .art-shelf-selbar-master にも .checkbox-label が付いているせいでマッチしてしまい、
   型セレクタ込みの詳細度で .art-shelf-select-all.is-mixed 単体より勝ってしまうため, 実測で判明)。 */
input.art-shelf-select-all.is-mixed {
    background: var(--accent);
    border-color: var(--accent);
}
input.art-shelf-select-all.is-mixed::after {
    content: '';
    position: absolute;
    left: 3px;
    top: 6.5px;
    width: 8px;
    height: 2px;
    background: #fff;
}

/* Phase B-1 短文メモ用の小さい flag-label にも適用 */
.bd-flag-label input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    background: var(--panel);
    border: 1.5px solid var(--line);
    border-radius: 3px;
    cursor: pointer;
    position: relative;
    margin: 0;
    transition: border-color 0.12s, background 0.12s;
}
.bd-flag-label input[type="checkbox"]:hover { border-color: var(--accent); }
.bd-flag-label input[type="checkbox"]:checked {
    background: var(--accent);
    border-color: var(--accent);
}
.bd-flag-label input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 3px;
    top: 0;
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Star Rating Display */
.book-rating {
    margin-top: 0.45rem;
    display: flex;
    justify-content: center;
}
/* 一覧カードの独立星はカード中央寄せ */
.book-rating .star-rating { margin-top: 0; justify-content: center; }
.bookshelf.view-list .book-rating { justify-content: flex-start; }

.stars {
    color: #ffa500;
    margin-right: 0.5rem;
}

.star-rating {
    display: inline-flex;
    gap: 1px;
    cursor: pointer;
    margin-top: 0.5rem;
    line-height: 0;
}

.star-rating .star {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    transition: transform 0.1s ease;
    padding: 1px;
}

.star-rating .star:hover { transform: scale(1.15); }
.star-rating .star:active { transform: scale(1.05); }

/* 表紙に重ねる星ウィジェット内の調整 */
.stars-overlay .star-rating { margin-top: 0; gap: 0; }
.stars-overlay .star-rating .star { padding: 0; }

/* 一覧カード: visibility=hover は「表紙に重なるポップアップ」で表示。
   in-flow ではないのでカードの高さ・行の位置をずらさない。 */
.card-hover-pop {
    position: absolute;
    left: 5px;
    right: 5px;
    bottom: 5px;
    max-height: calc(100% - 10px);
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 6px 8px;
    background: rgba(18, 20, 28, 0.92);
    backdrop-filter: blur(2px);
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.35);
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s;
    z-index: 6;
    pointer-events: none;
    overflow: hidden;
}
/* マウス端末のみ :hover で表示 (タッチでは sticky hover で誤表示するため除外) */
@media (hover: hover) {
    .book-item:hover .card-hover-pop {
        opacity: 1;
        visibility: visible;
        transform: none;
        pointer-events: auto;
    }
}
/* タッチ端末: 長押しで付与する .show-pop で表示 (_initBookPopLongPress) */
.book-item.show-pop .card-hover-pop {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
}
/* タッチ端末では長押し時のネイティブ選択 / 画像コールアウトを抑止 */
@media (hover: none) and (pointer: coarse) {
    .book-item {
        -webkit-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
    }
}
.card-hover-pop .pop-stars {
    position: static;
    right: auto;
    bottom: auto;
    display: flex;
    justify-content: center;
}
.card-hover-pop .pop-stars .star-rating { gap: 1px; }
/* ポップアップ内のメモ: 暗背景に合わせ白文字、行数多めにクランプ */
.card-hover-pop .pop-memo {
    margin: 0;
    padding: 0;
    background: none;
    color: #eef0f5;
    height: auto;
    -webkit-line-clamp: 6;
    overflow: hidden;
}

/* リスト表示: ホバーポップは小さな表紙ではなく行 (.book-item) に重ねる。
   .book-item は position:relative。行全体を覆うが、背景は「上が透明→下が濃い」
   グラデーションにして上側を薄くし、中身(星/メモ)は下詰めで表示する。 */
.bookshelf.view-list .card-hover-pop {
    inset: 0;
    max-height: none;
    flex-direction: row;
    align-items: flex-end;      /* 文字下詰め */
    gap: 14px;
    padding: 0.5rem 0.9rem 0.45rem;
    border-radius: 8px;
    background: linear-gradient(to top,
        rgba(18, 20, 28, 0.95) 0%,
        rgba(18, 20, 28, 0.82) 34%,
        rgba(18, 20, 28, 0) 80%);
    backdrop-filter: none;
}
.bookshelf.view-list .card-hover-pop .pop-stars { justify-content: flex-start; flex: 0 0 auto; align-self: flex-end; }
/* height:auto で上書き。view-list .book-memo の固定高さ(2行分)が効くと 1 行メモでも
   ブロックが 2 行ぶんになりテキストが上端に残って下詰めにならないため。 */
.bookshelf.view-list .card-hover-pop .pop-memo {
    -webkit-line-clamp: 2;
    flex: 1 1 auto;
    text-align: left;
    height: auto;
    align-self: flex-end;
}
/* ポップアップ内の星は暗背景用 (overlay と同じ白縁取り。stars-overlay クラスで適用済) */

/* Bookshelf Management - Drag and Drop Styles */
.bookshelf-item {
    display: flex;
    align-items: center;
    padding: 1rem;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 0.5rem;
    background-color: var(--line2);
    cursor: grab;
    transition: all 0.2s ease;
}

.bookshelf-item:hover {
    background-color: #f0f0f0;
    border-color: #bbb;
}

.bookshelf-item.dragging {
    opacity: 0.5;
    cursor: grabbing;
}

/* 本棚管理モーダルの D&D ドロップ位置インジケータ (左ペインツリーと同挙動) */
.bookshelf-item.bsm-drop-before { box-shadow: 0 -3px 0 0 var(--accent, #3d52ff); }
.bookshelf-item.bsm-drop-after  { box-shadow: 0 3px 0 0 var(--accent, #3d52ff); }
.bookshelf-item.bsm-drop-inside {
    outline: 2px dashed var(--accent, #3d52ff);
    outline-offset: -2px;
    background-color: var(--accent-bg, #eef0ff);
}

.bookshelf-drag-handle {
    color: var(--muted);
    margin-right: 1rem;
    cursor: grab;
    user-select: none;
    padding: 0.5rem;
    display: inline-flex;
    align-items: center;
    touch-action: none; /* Pointer Events が touch スクロールより優先 (イシュー#337) */
}

.bookshelf-drag-handle:hover {
    color: var(--fg);
}

.bookshelf-list-icon {
    display: inline-flex;
    align-items: center;
    vertical-align: -2px;
    margin-right: 0.3rem;
    color: var(--accent);
}

.bookshelf-info {
    flex: 1;
}

.bookshelf-actions {
    display: flex;
    gap: 0.5rem;
}

.bookshelf-item h4 {
    margin: 0 0 0.25rem 0;
    font-size: 1.1rem;
}

.bookshelf-item p {
    margin: 0 0 0.25rem 0;
    color: var(--muted);
    font-size: 0.9rem;
}

.book-count {
    font-size: 0.8rem;
    color: var(--muted);
    font-weight: bold;
}

.special-badge {
    background: #fff7e0;
    color: var(--warning);
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 999px;
    margin-left: 0.4rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

/* 「近日対応」バッジ (coming soon) */
.coming-soon-badge {
    background: var(--line2);
    color: var(--muted);
    font-size: 0.65rem;
    padding: 1px 7px;
    border-radius: 999px;
    margin-left: 0.45rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* ===== はみ出しテキストの自動マーキー (overflow 時だけ往復スクロール) =====
   JS (_setupMarqueeEl) が overflow を検知して .is-marquee と --amq-shift/--amq-dur を付与。 */
.auto-marquee {
    overflow: hidden;
    white-space: nowrap;
}
.auto-marquee > .amq-inner {
    display: inline-block;
    max-width: 100%;
    white-space: nowrap;
    vertical-align: bottom;
}
.auto-marquee.is-marquee > .amq-inner {
    max-width: none;
    will-change: transform;
    animation: amq-scroll var(--amq-dur, 8s) ease-in-out infinite alternate;
}
@keyframes amq-scroll {
    0%, 14%   { transform: translateX(0); }
    86%, 100% { transform: translateX(var(--amq-shift, 0)); }
}
@media (prefers-reduced-motion: reduce) {
    .auto-marquee.is-marquee > .amq-inner { animation: none; }
    /* 入場アニメを切る (animation が 0% で凍結し opacity:0 のまま残るのを防ぐ) */
    .toast, .toast-out, .cfm-overlay { animation: none !important; }
    .toast-out { opacity: 0; }
}

/* ===== 上部ステータスバー (#4 同期切断 / #5 更新あり) + pull-to-refresh ===== */
.bookshelf-container.app-main-pane { position: relative; }

.app-status-bar {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}
.app-status-bar[hidden] { display: none; }
.status-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.95rem;
    font-size: 0.82rem;
    border-bottom: 1px solid var(--line);
}
.status-row .status-ico { display: inline-flex; flex-shrink: 0; }
.status-row .status-msg { flex: 1; min-width: 0; }
/* min-height:44px はタップ領域の目安 (#225 P7・#223 A8・イシュー#232 step2。ui-standardsに
   明記された基準が無かったため §2-24 で新設)。元は高さ21pxで指の当たり判定が狭かった。 */
.status-row .status-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    border: 1px solid currentColor;
    background: transparent;
    color: inherit;
    border-radius: 6px;
    padding: 0.15rem 0.75rem;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
}
.status-row .status-btn:hover { background: rgba(0, 0, 0, 0.06); }
.status-row.status-warn   { background: #fff8e1; color: #7a5400; }
.status-row.status-update { background: var(--accent-bg); color: var(--accent-strong, var(--accent)); }
/* 裏同期の確認中 (C-277): 目立たせない。ニュートラル色 + アイコンだけ回す */
.status-row.status-checking { background: transparent; color: var(--muted); }
.status-row.status-checking .status-ico { animation: bs-spin 1.2s linear infinite; }
body.plugin-dark .status-row.status-warn   { background: rgba(212, 145, 0, 0.16); color: #f0c869; }
body.plugin-dark .status-row.status-update { background: var(--accent-bg); }

.ptr-indicator {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: var(--muted);
    font-size: 0.8rem;
    transform: translateY(-100%);
    pointer-events: none;
    z-index: 4;
}
.ptr-indicator.is-armed { color: var(--accent); }
.ptr-spinner {
    width: 16px; height: 16px;
    border: 2px solid var(--line);
    border-top-color: var(--accent);
    border-radius: 50%;
}
.ptr-indicator.is-refreshing { transform: translateY(0) !important; }
.ptr-indicator.is-refreshing .ptr-spinner { animation: bs-spin 0.8s linear infinite; }

/* 本棚プレビューカードのヘッダー */
.bookshelf-preview-header {
    margin: 0;
}

.bookshelf-preview-header h3 {
    margin: 0;
    line-height: 1.3;
    width: 100%;
}

.bookshelf-preview-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: stretch;
}

.btn-small {
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0.5rem 1rem;
    border-radius: 5px;
    white-space: nowrap;
    text-align: center;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 本棚プレビューカード内のボタンスタイル */
.bookshelf-preview-actions .btn-secondary {
    background-color: #6c757d;
    color: white;
    border: 1px solid #6c757d;
    transition: all 0.2s ease;
}

.bookshelf-preview-actions .btn-secondary:hover {
    background-color: #5a6268;
    border-color: #5a6268;
    color: white;
}

/* ===== ⌘K コマンドパレット (Phase D) ===== */
.cmdk {
    position: fixed;
    inset: 0;
    /* z-index は管理役の data-layer が決める (イシュー#367 step5・旧 1100 は撤去) */
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
.cmdk[hidden] { display: none; }
.cmdk-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 17, 24, 0.45);
    backdrop-filter: blur(2px);
}
.cmdk-panel {
    position: relative;
    margin-top: 12vh;
    width: min(620px, 92vw);
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    background: var(--panel, #fff);
    border: 1px solid var(--line, #e2e4ea);
    border-radius: 12px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    animation: cmdk-in 0.12s ease;
}
@keyframes cmdk-in {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}
.cmdk-input-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.8rem 0.95rem;
    border-bottom: 1px solid var(--line2, #eef0f4);
}
.cmdk-input-icon { color: var(--muted, #8a90a0); display: inline-flex; }
.cmdk-input {
    flex: 1;
    border: none;
    outline: none;
    background: none;
    font-size: 1rem;
    font-family: inherit;
    color: var(--fg, #1c1e26);
}
.cmdk-esc-kbd {
    font-size: 0.7rem;
    color: var(--muted, #8a90a0);
    border: 1px solid var(--line, #e2e4ea);
    border-radius: 5px;
    padding: 1px 6px;
    background: var(--bg, var(--line2));
}
.cmdk-results {
    overflow-y: auto;
    padding: 0.35rem;
    flex: 1;
}
.cmdk-group {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--muted, #8a90a0);
    padding: 0.5rem 0.6rem 0.25rem;
    text-transform: none;
}
.cmdk-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.6rem;
    margin-bottom: 0.15rem;
    border-radius: 8px;
    cursor: pointer;
}
.cmdk-item + .cmdk-item { box-shadow: inset 0 1px 0 var(--line2); }
.cmdk-item.is-active { background: var(--accent-bg, #eef0ff); }
.cmdk-item-icon { color: var(--fg2, #4a4f5e); display: inline-flex; flex-shrink: 0; }
.cmdk-item.is-active .cmdk-item-icon { color: var(--accent, #3d52ff); }
.cmdk-item-title {
    flex: 1;
    font-size: 0.88rem;
    color: var(--fg, #1c1e26);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cmdk-item-sub {
    font-size: 0.74rem;
    color: var(--muted, #8a90a0);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 40%;
    flex-shrink: 0;
}
.cmdk-empty {
    padding: 1.4rem;
    text-align: center;
    color: var(--muted, #8a90a0);
    font-size: 0.85rem;
}
.cmdk-footer {
    display: flex;
    gap: 1rem;
    padding: 0.5rem 0.8rem;
    border-top: 1px solid var(--line2, #eef0f4);
    font-size: 0.72rem;
    color: var(--muted, #8a90a0);
}
.cmdk-footer kbd {
    border: 1px solid var(--line, #e2e4ea);
    border-radius: 4px;
    padding: 0 4px;
    background: var(--bg, var(--line2));
    margin-right: 2px;
}

/* ===== 本棚ツールバー + 複数選択 (Phase E) ===== */
.bookshelf-toolbar {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
}
.bstb-divider {
    width: 1px;
    height: 20px;
    background: var(--line);
    margin: 0 0.15rem;
}
.bookshelf-toolbar .popover-host { position: relative; }
#toggle-select-mode.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

/* カードの選択チェック */
.book-select-check {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 2px solid rgba(255, 255, 255, 0.9);
    background: rgba(0, 0, 0, 0.32);
    display: none;
    align-items: center;
    justify-content: center;
    color: #fff;
    z-index: 4;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
body.select-mode .book-select-check { display: inline-flex; }
body.select-mode .book-select-check svg { opacity: 0; transition: opacity 0.1s; }
.book-item.selected .book-select-check { background: var(--accent); border-color: #fff; }
.book-item.selected .book-select-check svg { opacity: 1; }
body.select-mode .book-item { cursor: pointer; }
body.select-mode .book-item.selected {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 8px;
}
/* select mode 中は drag-handle を隠し誤操作を防ぐ */
body.select-mode .drag-handle { display: none; }

/* 一括操作バー */
.bulk-bar {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin: 0 0 0.7rem;
    padding: 0.5rem 0.75rem;
    background: var(--accent-bg);
    border: 1px solid var(--accent);
    border-radius: 8px;
    flex-wrap: wrap;
}
.bulk-bar[hidden] { display: none; }
.bulk-count {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent);
    flex-shrink: 0;
}
.bulk-actions {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    align-items: center;
}
.bulk-actions .popover-host { position: relative; }
.popover-bulk-shelf {
    min-width: 210px;
    max-height: 320px;
    overflow-y: auto;
    text-align: left;
}

/* =====================================================================
   モバイル本格 UI (<=900px): 単一ペイン + 左ドロワー + 詳細フルシート + 下部ナビ
   ファイル末尾に置き、後勝ちで 3 ペイン用ルールを上書きする。
   境目はjs/ui/viewport.js(900px)と揃える(イシュー#505・旧768pxから統一)。
   ===================================================================== */

/* =====================================================================
   通知 toast + 確認モーダル (T06, js/ui-feedback.js)
   色は CSS 変数のみ。z-index はモーダル (1000+) より上の 1200。
   ===================================================================== */
#toast-container {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    z-index: var(--ov-z-toast); /* 通知の帯 (イシュー#367 step5・旧 1200) */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    pointer-events: none;
    width: max-content;
    max-width: min(92vw, 460px);
}
.toast {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.7rem 0.95rem;
    border-radius: 10px;
    background: var(--panel);
    color: var(--fg);
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    box-shadow: 0 6px 24px var(--shadow-color);
    font-size: 0.88rem;
    line-height: 1.4;
    max-width: 100%;
    opacity: 1; /* 可視は base で保証 (入場アニメは transform のみ。アニメ凍結環境でも見える) */
    animation: toast-in 0.18s ease-out;
}
.toast-message { white-space: pre-line; word-break: break-word; }
.toast .toast-icon { display: inline-flex; flex: 0 0 auto; color: var(--accent); }
.toast-success { border-left-color: var(--accent); }
.toast-success .toast-icon { color: var(--accent); }
.toast-warn { border-left-color: var(--warning); }
.toast-warn .toast-icon { color: var(--warning); }
.toast-error { border-left-color: var(--danger); }
.toast-error .toast-icon { color: var(--danger); }
.toast-action { flex: 0 0 auto; margin-left: 0.2rem; }
.toast-close {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
    padding: 0 0 0 0.25rem;
}
.toast-close:hover { color: var(--fg); }
.toast-out { animation: toast-out 0.18s ease-in forwards; }
@keyframes toast-in {
    from { transform: translateY(8px); }
    to { transform: translateY(0); }
}
@keyframes toast-out {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(8px); }
}

/* 確認モーダル */
.cfm-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--ov-z-dialog); /* ダイアログ帯 (イシュー#367)。順序は管理役の data-layer が足す */
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.42);
    padding: 1rem;
    animation: toast-in 0.14s ease-out;
}
.cfm-box {
    background: var(--panel);
    color: var(--fg);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 12px 40px var(--shadow-color);
    padding: 1.2rem 1.3rem;
    max-width: 440px;
    width: 100%;
}
.cfm-title { font-size: 1.02rem; font-weight: 700; margin-bottom: 0.5rem; }
.cfm-message { font-size: 0.9rem; line-height: 1.55; white-space: pre-line; word-break: break-word; color: var(--fg2); }
.cfm-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1.1rem; }

/* 既定 (PC) ではドロワー系のモバイル専用要素は非表示 */
.mobile-scrim,
.mobile-detail-back { display: none; }

/* 本の詳細(手元の資料)の×(イシュー#511 X1 P11)。PC(901px以上)で、本を選んでいる時だけ出す。
   ESCも同じ処理(js/bookshelf.js _exitBookDetail)。狭い幅は既存の戻るバー(.mobile-detail-back)のまま。
   .app-detail(flex縦積み)の中で.detail-bodyより前の独立した行にする(本文側.bd-topbarの鉛筆ボタンと
   絶対配置で重なり、タップ領域::afterが誤って×を奪っていた分を、別の行にして解消) */
.bd-pc-close {
    display: none;
    align-self: flex-end;
    flex: 0 0 auto;
    width: 32px; height: 32px;
    margin: 10px 10px 0 0;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.bd-pc-close:hover { background: var(--line2); color: var(--fg); border-color: var(--line); }
@media (min-width: 901px) {
    body.book-detail-pinned .bd-pc-close { display: inline-flex; }
}

/* ===== 下部フッターナビ (PC・モバイル共通で常時表示, ADR-047 P1) =====
   ホーム / 本棚 / 検索 / 設定 を集約。現在地ハイライト (.is-active) は
   _updateSidebarActive() が配線。PC では本棚タブはツリーが常時見えるため隠す。 */
.mobile-bottom-nav {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: calc(50px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--panel);
    border-top: 1px solid var(--line);
    z-index: calc(var(--z-chrome) + 50); /* 950: 常設クロームの帯 (イシュー#367) */
}
.mobile-bottom-nav button {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    border: none;
    background: transparent;
    color: var(--muted);
    font-size: 0.64rem;
    cursor: pointer;
    padding: 4px 0 6px;
}
.mobile-bottom-nav button .mnav-icon { display: inline-flex; }
.mobile-bottom-nav button.is-active { color: var(--accent); }

/* PC: フッターナビは左ペインに統合済みのため非表示 */
@media (min-width: 901px) {
    .mobile-bottom-nav { display: none; }
}

@media (max-width: 900px) {
    /* --- 単一ペイン化: 中央のみ。左右はオーバーレイで重ねる --- */
    .container.app-shell { grid-template-columns: 1fr; }

    /* デスクトップのペイン開閉タブ / 折りたたみ strip は隠す */
    .pane-tab { display: none !important; }
    .app-sidebar .sidebar-strip,
    .app-detail .detail-strip { display: none !important; }

    /* 折りたたみ class が付いていてもドロワー内は常にフル表示 */
    body.left-collapsed .app-sidebar .sidebar-nav { display: block !important; }
    body.left-collapsed .app-sidebar .pane-toolbar,
    body.left-collapsed .app-sidebar .sidebar-utility { display: flex !important; }
    body.right-collapsed .app-detail .detail-body,
    body.right-collapsed .app-detail .pane-toolbar { display: block !important; }

    /* --- 左ナビ = ドロワー --- */
    .app-sidebar {
        position: fixed;
        top: 0; left: 0; bottom: 0;
        width: min(82vw, 320px);
        z-index: calc(var(--z-chrome) + 60); /* 960: 常設クロームの帯 (イシュー#367) */
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        border-right: 1px solid var(--line);
        padding-top: env(safe-area-inset-top);
    }
    body.drawer-open .app-sidebar {
        transform: translateX(0);
        box-shadow: 8px 0 28px rgba(0, 0, 0, 0.18);
    }

    /* --- スクリム (ドロワー背面) --- */
    .mobile-scrim {
        display: block;
        position: fixed; inset: 0;
        background: rgba(0, 0, 0, 0.42);
        z-index: calc(var(--z-chrome) + 55); /* 955: 常設クロームの帯 (イシュー#367) */
        opacity: 0; pointer-events: none;
        transition: opacity 0.25s ease;
    }
    body.drawer-open .mobile-scrim { opacity: 1; pointer-events: auto; }

    /* --- 右詳細 = フルシート --- */
    .app-detail {
        position: fixed;
        inset: 0;
        width: auto;
        z-index: calc(var(--z-chrome) + 40); /* 940: 常設クロームの帯 (イシュー#367・下部ナビより下) */
        transform: translateX(100%);
        transition: transform 0.25s ease;
        border-left: none;
        padding-top: env(safe-area-inset-top);
        /* 常設の下部ナビ (950・50px+safe-area) より下に置いたまま、最下部がナビに隠れないよう余白を足す
           (イシュー#367 ②決裁 2026-10-26: 本詳細を開いたまま下部ナビで移れる挙動は変えない・実例A はこれで解消) */
        padding-bottom: calc(50px + env(safe-area-inset-bottom));
        box-sizing: border-box;
    }
    body.book-detail-pinned .app-detail { transform: translateX(0); }

    /* イシュー#330: 「戻る/進む」(履歴復元)で開閉する時だけ、スライドのtransitionを無効化して
       即座に表示/非表示する。iOS実機はスワイプ中に既に開いた/閉じたスナップショットを見せているため、
       律儀にアニメーションを再生すると一瞬閉じてから開き直る(または開いてから閉じ直る)二重表示に見える
       (②決裁2026-10-23)。付与/解除は _histNoAnimOnce() (js/bookshelf.js)。 */
    .app-detail.hist-no-anim,
    .app-sidebar.hist-no-anim,
    .mobile-scrim.hist-no-anim { transition: none !important; }

    .app-detail .detail-body {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        padding-bottom: calc(64px + env(safe-area-inset-bottom));
    }

    /* 詳細シートの戻るバー */
    .mobile-detail-back {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        width: 100%;
        flex: 0 0 auto;
        padding: 0.7rem 0.9rem;
        background: var(--panel);
        border: none;
        border-bottom: 1px solid var(--line);
        color: var(--fg2);
        font-size: 0.9rem;
        cursor: pointer;
    }

    /* --- 中央ペイン: 下部ナビ分の余白 --- */
    .bookshelf-container.app-main-pane {
        padding-bottom: calc(50px + env(safe-area-inset-bottom));
    }
    /* 下部ナビ本体のスタイルは基底 (.mobile-bottom-nav) に集約。モバイルでは本棚タブも表示。 */

    /* toast は下部ナビ (約 58px) + セーフエリアの上に出す */
    #toast-container {
        bottom: calc(64px + env(safe-area-inset-bottom, 0px));
        max-width: 92vw;
    }

    /* 本棚ビューヘッダーの左右余白を詰める */
    .bookshelf-view-header { padding-left: 0.6rem; padding-right: 0.6rem; }

    /* イシュー#389: モバイルの列数を1か所にまとめた表 (②決裁・画像ビューの列数はハヘロへ確認中)。
       #385 で枠が列幅追従になり小/中/大の見た目差が消えたため、スマホでは「大きさ」を列数に
       置き換える (案A)。数字を変える時はこの6行(3サイズ×2ビュー)だけ直せばよい。
       grid-template-columns・gap・下の content-visibility 推定高さ・列数表示UI (js/bookshelf.js
       _updateCoverSizeOptionLabels) は全てここの --mobile-cols-covers 等4変数を読みに来る。
       表紙ビュー(文字あり)=小3/中2/大1列。画像のみビュー(文字なし)=小4/中3/大2列。
       リスト表示 (.view-list) には適用しない。gap は列数が多いほど詰める。 */
    .bookshelf.size-small {
        --mobile-cols-covers: 3; --mobile-gap-covers: 0.75rem;
        --mobile-cols-images: 4; --mobile-gap-images: 0.5rem;
    }
    .bookshelf.size-medium {
        --mobile-cols-covers: 2; --mobile-gap-covers: 0.9rem;
        --mobile-cols-images: 3; --mobile-gap-images: 0.6rem;
    }
    .bookshelf.size-large {
        --mobile-cols-covers: 1; --mobile-gap-covers: 1rem;
        --mobile-cols-images: 2; --mobile-gap-images: 0.75rem;
    }

    /* 表紙グリッド: 列数は上の表に従う (旧実装は2列固定)。
       content-visibility(H2-7) の intrinsic 幅で 1fr トラックが膨張し、
       repeat(N,1fr) が横溢れ(=実質列が減って見える)していたのを防ぐ。
       minmax(0,1fr) はトラックを 0 まで縮められるので溢れない。 */
    .bookshelf.view-covers {
        grid-template-columns: repeat(var(--mobile-cols-covers, 2), minmax(0, 1fr)) !important;
        gap: var(--mobile-gap-covers, 0.9rem);
    }
    .bookshelf.view-covers .book-item { width: 100%; min-width: 0; }
    /* イシュー#385: .book-cover-container が width:var(--book-width) 固定pxのまま(css:2704-2708)で、
       表紙サイズが大きい設定だとモバイル2列のトラック幅を超えてはみ出し、右端が切れて見えていた。
       view-images は既に width:100% で対処済みだったが view-covers だけ漏れていた(実機で再発)。
       幅をトラック追従にしつつ、height:auto + aspect-ratio で設定どおりの縦横比を保つ(#385案C)。 */
    .bookshelf.view-covers .book-cover-container {
        width: 100%;
        height: auto;
        aspect-ratio: var(--book-width-num) / var(--book-height-num);
    }
    /* イシュー#389: content-visibility:auto (css:2674) の初期サイズ推定 (auto 330px 固定) は
       列数が1でも3でも同じ値だったため、実際のカード高さと大きくずれて初回表示のたびに
       スクロールバーが跳ねていた。トラック幅(= 画面幅から左右の内側余白1.8rem分=.view-bookshelfの
       padding左右0.9rem×2・列間gap・列数を引いた値)×2:3(全サイズ共通の縦横比)+書名2行/著者1行の
       おおよその高さ(60px)で近似する。auto 指定なので実際に表示された時点でブラウザが実寸へ
       差し替える=このズレは初回限定 (②レビュー2026-10-28)。 */
    .bookshelf.view-covers .book-item {
        contain-intrinsic-size: auto calc(
            (100vw - 1.8rem - var(--mobile-gap-covers, 0.9rem) * (var(--mobile-cols-covers, 2) - 1))
            / var(--mobile-cols-covers, 2) * 1.5 + 60px
        );
    }

    /* 画像のみビュー: 列数は上の表に従う (旧実装は3列固定) */
    .bookshelf.view-images {
        grid-template-columns: repeat(var(--mobile-cols-images, 3), minmax(0, 1fr)) !important;
        gap: var(--mobile-gap-images, 0.6rem);
    }
    .bookshelf.view-images .book-item { width: 100%; min-width: 0; }
    /* イシュー#385: 旧実装は width:100% のみで height が var(--book-height) 固定のまま残り、
       view-covers と同じ縦横比崩れが潜在していた(表紙サイズ大で特に顕著)。view-covers と揃える。 */
    .bookshelf.view-images .book-cover-container {
        width: 100%;
        height: auto;
        aspect-ratio: var(--book-width-num) / var(--book-height-num);
    }
    /* イシュー#389: view-covers と同じ理由。画像のみビューはテキストが無いので +60px は加えない */
    .bookshelf.view-images .book-item {
        contain-intrinsic-size: auto calc(
            (100vw - 1.8rem - var(--mobile-gap-images, 0.6rem) * (var(--mobile-cols-images, 3) - 1))
            / var(--mobile-cols-images, 3) * 1.5
        );
    }

    /* --- ダッシュボード: スマホは 2 列グリッド。幅は PC の span-N ではなく
           スマホ専用クラス m-half / m-full で決める (dashboard.js が spanMobile から付与)。
           これで「小↔中」のように PC では違うが両方半分に丸まる…という現象を解消し、
           カウンター等もスマホで半分↔全幅を独立に選べる。 --- */
    .dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
    .dashboard-widget.m-half { grid-column: span 1; }
    .dashboard-widget.m-full { grid-column: span 2; }
    .add-widget-card { grid-column: span 2; }
    #dashboard { padding: 0.8rem 0.8rem 1.2rem; }
    .dashboard-toolbar { flex-wrap: wrap; gap: 0.5rem; }

    /* --- ポップオーバー (フィルター/検索/本棚切替/一括): モバイルでも base のドロップダウン
           表示のまま、画面に収まらない高さはスクロール。旧ボトムシート指定 (前方メディアブロック)
           が base に上書きされ bottom:0 残留で潰れていた問題の正しい後追い指定。 --- */
    .popover { max-height: 78vh; overflow-y: auto; }
    .popover.popover-filter { max-height: 78vh; overflow-y: auto; }

    /* --- モーダル: モバイルは全画面シート + 余白圧縮 (中身の横溢れ解消) --- */
    .modal.show { padding: 0; align-items: stretch; }
    .modal-content {
        max-width: 100%;
        width: 100%;
        max-height: 100%;
        height: 100%;
        margin: 0;
        border-radius: 0;
    }
    .modal-body { padding: 1rem; padding-top: 2.6rem; }
    /* 見出しバー (.modal-header) を持つモーダルは本文上余白を詰める (ヘッダーと二重の空き防止) */
    .modal-content:has(.modal-header) .modal-body { padding-top: 1rem; }
    /* 見出しバーをスクロール追従させ、× も常に届く位置に固定 (全画面シート前提) */
    .modal-content .modal-header {
        position: sticky;
        top: 0;
        z-index: 5;
        background: var(--panel);
        margin-bottom: 0;
    }
    .modal-content > .modal-close {
        position: fixed;
        /* 基底の .modal-close と同じ 20px 基準 (#225 P2・イシュー#232 step2) */
        top: calc(20px + env(safe-area-inset-top));
        right: 14px;
        z-index: 7;
    }
    /* 横並び行をモバイルで折り返す + 入力/選択を全幅に (はみ出し防止) */
    .sync-method-row,
    .plugin-install-input-group,
    .settings-action-row,
    .settings-action-list,
    .path-card-footer { flex-wrap: wrap; }
    .modal-content select,
    .modal-content input[type="text"],
    .modal-content textarea { max-width: 100%; }
    .sync-method-row select,
    .plugin-install-input-group input,
    .plugin-install-input-group select { width: 100%; min-width: 0; }
    .plugin-install-card,
    .plugin-cat-legend,
    .settings-section,
    .settings-section-body { min-width: 0; }
    .plugin-install-hint,
    .sync-method-hint { word-break: break-word; overflow-wrap: anywhere; }

    /* ⌘K パレット: タッチ端末ではキーボード操作ヒント (↑↓/↵/Esc) を隠す */
    .cmdk-footer,
    .cmdk-esc-kbd { display: none; }

    /* iOS は font-size<16px の入力に focus すると自動ズームする (viewport の maximum-scale は
       a11y のため設定しない方針)。全フォームコントロールを 16px に統一してズームを止める。
       コンポーネント個別指定 (例 .bd-meta-edit-inline .edit-field input) より強くするため !important。
       checkbox/radio/range/color はテキスト入力でなくズーム対象外なので除外。 */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
    select,
    textarea { font-size: 16px !important; }
}

/* ===== ハブ容量アラートバナー (WP-B3/B4) ===== */
.usage-alert-banner {
    background: color-mix(in srgb, var(--warning) 12%, var(--bg, #fff));
    border-bottom: 2px solid var(--warning);
    color: inherit;
    padding: 0.6rem 1rem;
    font-size: 0.92rem;
}
.usage-alert-banner.is-critical {
    background: color-mix(in srgb, var(--danger) 12%, var(--bg, #fff));
    border-bottom-color: var(--danger);
}
.usage-alert-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.usage-alert-msg { flex: 1 1 240px; line-height: 1.4; }
.usage-alert-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.usage-alert-close {
    background: transparent;
    border: none;
    font-size: 1.1rem;
    cursor: pointer;
    color: inherit;
    opacity: .6;
}
.usage-alert-close:hover { opacity: 1; }
/* hidden 属性を尊重 (.btn の display 明示が UA の [hidden] を上書きするため, ADR-049 と同型) */
.usage-alert-actions .btn[hidden] { display: none; }
/* 同期衝突ダイアログ (3択・WP-B2): 2択想定の cfm-box 幅ではボタンが全て2行に折り返すため拡幅＋折返し許容 */
#sync-conflict-dialog { max-width: 600px; }
#sync-conflict-dialog .cfm-actions { flex-wrap: wrap; }
#sync-conflict-dialog .cfm-actions .btn { white-space: nowrap; }

/* ===== 設定画面の統一方針 (2026-07-28 C-271 / ui-standards §6) =====
   1) 1設定 = ラベル → コントロール → ヒント の縦積み
   2) コントロール (select / テキスト系 input) の幅は 420px 上限・スマホは 100%
   3) 設定内のボタンはすべて小サイズ。主従は色 (btn-primary / btn-secondary) で示す
   4) 枠 (カード) は接続状態を持つものだけ。説明をカードで囲わない */
.settings-section-body select,
.settings-section-body input[type="text"],
.settings-section-body input[type="url"],
.settings-section-body input[type="password"],
.settings-section-body input[type="email"] {
    width: 100%;
    max-width: 420px;
    box-sizing: border-box;
}
.settings-section-body .btn {
    padding: 0.35rem 0.7rem;
    font-size: 0.83rem;
}
@media (max-width: 900px) {
    .settings-section-body select,
    .settings-section-body input[type="text"],
    .settings-section-body input[type="url"],
    .settings-section-body input[type="password"],
    .settings-section-body input[type="email"] { max-width: none; }
}

/* ===== イシュー#230: 記事エディタのヘッダー1行 (戻る / タイトル+保存状態 / プレビュー / 公開する / ⋯) と公開パネル ===== */
.art-hd-title { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.5rem; }
.art-hd-title .art-title-input { flex: 1; }
.art-hd-title .art-save-status { flex: 0 0 auto; white-space: nowrap; }
.art-hd .art-hd-publish-group { margin-left: 0; }
.art-more-host { position: relative; display: inline-flex; flex: 0 0 auto; }
.art-more-host[hidden] { display: none; }
.art-more-btn { padding-left: 0.5rem; padding-right: 0.5rem; position: relative; }
/* ②決裁(2026-10-12): 見た目の大きさは変えず、::afterでタップ領域だけ44px以上に広げる */
.art-more-btn::after { content: ''; position: absolute; inset: -6px; }
.art-more-menu { position: fixed; z-index: 1300; min-width: 11rem; padding: 0.3rem; background: var(--panel); border: 1px solid var(--line);
    border-radius: 8px; box-shadow: 0 8px 24px rgba(16, 24, 40, 0.14); display: grid; }
.art-more-menu[hidden] { display: none; }
.art-more-item { display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.5rem 0.6rem; border: none; background: none;
    border-radius: 6px; cursor: pointer; font: inherit; font-size: 0.84rem; color: var(--fg); text-align: left; }
.art-more-item[hidden] { display: none; }
.art-more-item:hover { background: var(--accent-bg); }
.art-more-item.is-danger { color: var(--danger); }
.art-more-item.is-danger:hover { background: color-mix(in srgb, var(--danger) 10%, transparent); }
@media (max-width: 760px) {
    .art-hd-title { flex: 1 1 100%; order: -1; }
    .art-hd .art-hd-lbl { display: none; }   /* 狭幅はプレビューをアイコンのみにして 戻る/プレビュー/公開する/⋯ を1行に収める */
    .art-hd .art-hd-publish-group { margin-left: auto; }
}

/* .art-publish-modal の z-index 1150 は撤去: 重なり順は管理役の data-layer (イシュー#367 step4) */
.art-pub-content { max-width: 560px; }
.art-pub-body { display: grid; gap: 1rem; padding: 1rem 1.25rem 0; }
.art-pub-sec h3 { margin: 0 0 0.4rem; font-size: 0.86rem; color: var(--fg2); }
.art-pub-check { border: 1px solid var(--line); border-radius: 8px; padding: 0.5rem 0.7rem; }
.art-pub-check > summary { cursor: pointer; display: flex; align-items: center; gap: 0.45rem; font-size: 0.86rem; font-weight: 600; color: var(--ok, var(--fg)); }
.art-pub-check.is-ng { border-color: var(--danger); }
.art-pub-check.is-ng > summary { color: var(--danger); }
.art-pub-check-list { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.3rem; }
.art-pub-check-row { display: grid; grid-template-columns: 18px 4rem minmax(0, 1fr) auto; gap: 0.5rem; align-items: center; font-size: 0.8rem; }
.art-pub-check-row.is-ng { color: var(--danger); }
.art-pub-check-row.is-warn { color: var(--warning); }
.art-pub-check-rq { font-size: 0.7rem; color: var(--fg2); }
.art-pub-line { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin: 0; font-size: 0.86rem; }
.art-pub-note { margin: 0.35rem 0 0; font-size: 0.78rem; color: var(--fg2); }
.art-pub-link { color: var(--accent); font-size: 0.8rem; white-space: nowrap; }
.art-pub-lock { display: flex; align-items: center; gap: 0.4rem; margin: 0; padding: 0.5rem 0.7rem; border: 1px dashed var(--line); border-radius: 8px;
    background: var(--side); font-size: 0.84rem; color: var(--fg2); }
.art-pub-radios { display: grid; gap: 0.35rem; }
.art-pub-radio { display: flex; align-items: center; gap: 0.5rem; font-size: 0.86rem; cursor: pointer; }
.art-pub-radio.is-disabled { color: var(--fg2); cursor: default; }
.art-pub-tags { border-bottom: none; margin-bottom: 0; padding: 0; }
/* タグ0個のとき空の ul が flex gap 分だけ入力欄を右へ押す (390 で +8px ずれた・②差し戻し) → 空なら消してラベル列に揃える */
.art-pub-tags .art-tags:empty { display: none; }
/* ラジオの UA 既定 margin (左 5px 等) でラベル列から右へずれるのを消す */
.art-pub-radio input[type="radio"] { margin: 0; }
.art-pub-done { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; padding: 0.6rem 0.7rem; border: 1px solid var(--accent); border-radius: 8px; background: var(--accent-bg); }
.art-pub-done[hidden] { display: none; }
.art-pub-done-label { font-size: 0.78rem; font-weight: 600; color: var(--fg2); }
.art-pub-url { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.84rem; }
.art-pub-foot { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1rem; padding: 0.8rem 1.25rem 1rem; border-top: 1px solid var(--line); }

/* ===== イシュー#268: 記事エディタ 見たまま編集 (案1・閲覧⇄編集トグル) =====
   #art-edit-view[data-art-mode] = view | edit | form。キャンバスは公開生成器の出力を描く iframe (高さは中身に合わせる)。
   form は step3 でブロック別編集へ置き換えるまでの旧フォーム表示。 */
#art-edit-view[data-art-mode="view"] .art-edit-only,
#art-edit-view[data-art-mode="edit"] .art-view-only,
#art-edit-view[data-art-mode="form"] .art-view-only,
#art-edit-view[data-art-mode] #art-preview { display: none; }
#art-edit-view[data-art-mode="view"] #art-blocks,
#art-edit-view[data-art-mode="edit"] #art-blocks,
#art-edit-view[data-art-mode="form"] #art-canvas { display: none; }
.art-canvas { flex: 0 0 auto; }
.art-canvas-frame { display: block; width: 100%; height: 320px; border: 0; border-radius: 6px; background: #fafafa; }
.art-blk-menu-anchor { position: fixed; pointer-events: none; visibility: hidden; }
.art-add-sheet { position: fixed; inset: 0; z-index: 1250; }
.art-add-sheet[hidden] { display: none; }
.art-add-sheet-backdrop { position: absolute; inset: 0; background: rgba(20, 24, 30, 0.35); }
.art-add-sheet-panel { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 100%; max-width: 420px;
    background: var(--panel); border-radius: 14px 14px 0 0; padding: 14px 14px 22px; box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15); }
.art-add-sheet-hd { font-size: 13px; font-weight: 700; color: var(--fg); margin: 0 4px 10px; }
.art-add-sheet-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 10px; border: none; background: none;
    text-align: left; border-radius: 10px; cursor: pointer; color: var(--fg); }
.art-add-sheet-item:hover { background: var(--accent-bg); }
.art-add-sheet-item[disabled] { opacity: 0.5; cursor: not-allowed; }
.art-add-sheet-ic { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 10px; background: var(--bg); display: inline-flex;
    align-items: center; justify-content: center; color: var(--accent); }
.art-add-sheet-body { display: flex; flex-direction: column; min-width: 0; }
.art-add-sheet-body b { font-size: 14px; }
.art-add-sheet-body small { font-size: 12px; color: var(--fg2); margin-top: 1px; }
/* 閲覧状態は記事だけを見せる (本の引き出しは編集状態でだけ出す。step3 で本棚の全画面の中へ移す) */
#art-edit-view[data-art-mode="view"] .art-wrap { grid-template-columns: 1fr; }
#art-edit-view[data-art-mode="view"] .art-side { display: none; }
/* イシュー#278 (900px超のみ): 本文860px (公開生成器の .article と同値) を編集状態の引き出しの横にも入れるため
   モーダルを広げる (1080→最大1240)。文章ブロックの編集は全画面でなく右ペイン＝引き出しの列を置き換え、
   左には記事 (キャンバス) を出したまま入力に追従させる。900px以下 (ボトムシート・構成A) は従来どおり。 */
@media (min-width: 901px) {
    /* イシュー#430: 旧 width:min(1240px,...) は撤廃(既定で100vwの全画面にする・4656行)。
       このブレークポイント固有に残すのはレイアウトのギャップ調整のみ。 */
    .art-modal-content.art-editing .art-wrap { gap: 0.75rem; }
    #art-edit-view[data-art-mode="form"][data-art-fs-type="text"] .art-wrap { position: relative; grid-template-columns: 1fr 26rem; }
    #art-edit-view[data-art-mode="form"][data-art-fs-type="text"] .art-side { display: none; }
    #art-edit-view[data-art-mode="form"][data-art-fs-type="text"] #art-canvas { display: block; }
    #art-edit-view[data-art-mode="form"][data-art-fs-type="text"] #art-blocks { position: absolute; top: 0; right: 0; bottom: 0; width: 26rem;
        display: flex; flex-direction: column; min-height: 0; overflow: auto; }
    #art-edit-view[data-art-mode="form"][data-art-fs-type="text"] #art-blocks .art-block.is-fs-target,
    #art-edit-view[data-art-mode="form"][data-art-fs-type="text"] #art-blocks .art-fs-text-editor { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
    #art-edit-view[data-art-mode="form"][data-art-fs-type="text"] .art-fs-text-editor .EasyMDEContainer .CodeMirror { min-height: 0; }
    /* 右ペイン (幅416px) のツールバーはスマホと同じ7ボタンに絞る (_mdeToolbarConfig compact)。
       詰め方 (flex: 1 1 0 で1段に収める) は .editor-toolbar.mde-iconized 側で共通化済み (イシュー#281)。 */
}
/* 本棚/本ブロックの全画面編集 ('form'): 上端は キャンセル/題/完了 だけ。中身は対象ブロック1つと本の引き出し */
.art-fs-hd { display: none; }
#art-edit-view[data-art-mode="form"] .art-fs-hd { display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 0 0 10px; border-bottom: 1px solid var(--line); margin-bottom: 10px; }
/* 長いタイトルの1行省略(イシュー#282・ハヘロ精査後の方針)。.art-fs-hd/#book-memo-modal .art-fs-hd
   共通: ボタン(キャンセル/完了)はflex-shrink:0で縮まず、タイトル側だけがflex:1 1 autoで
   縮小対象になりellipsisが効く(2行目の.art-save-statusは別要素なので崩れない)。 */
.art-fs-title { font-size: 15px; font-weight: 700; color: var(--fg); flex: 1 1 auto; min-width: 0;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.art-fs-hd .btn-secondary, .art-fs-hd .btn-primary { flex: 0 0 auto; }
#art-edit-view[data-art-mode="form"] .art-hd,
#art-edit-view[data-art-mode="form"] .art-block:not(.is-fs-target),
#art-edit-view[data-art-mode="form"] .art-look-block,
#art-edit-view[data-art-mode="form"] .art-add,
#art-edit-view[data-art-mode="form"] .art-canvas-head,
#art-edit-view[data-art-mode="form"] .art-empty,
#art-edit-view[data-art-mode="form"] .art-block-grip,
#art-edit-view[data-art-mode="form"] .art-block-tg,
/* 複製は持たない (②決裁)・削除はキャンバスの⋯から行う */
#art-edit-view[data-art-mode="form"] .art-block-dup,
#art-edit-view[data-art-mode="form"] .art-block-del { display: none; }
/* スマホ: 記事エディタは全画面 (モーダルの余白なし)。キャンバス幅=画面幅＝公開ページと同じ幅で描く (②決裁 step3) */
@media (max-width: 600px) {
    #publish-pages-modal .art-modal-content.art-editing { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0;
        border-radius: 0; padding: 0; }
    #publish-pages-modal .art-modal-content.art-editing .modal-header { display: none; }
    #publish-pages-modal .art-modal-content.art-editing #art-edit-view .art-hd,
    #publish-pages-modal .art-modal-content.art-editing #art-edit-view .art-fs-hd { padding: 8px 10px; margin: 0; }
    #publish-pages-modal .art-modal-content.art-editing .art-wrap { gap: 0; }
    #publish-pages-modal .art-modal-content.art-editing .art-col { padding: 0; }
    #publish-pages-modal .art-modal-content.art-editing #art-edit-view[data-art-mode="form"] .art-col { padding: 0 10px; }
    #publish-pages-modal .art-modal-content.art-editing .art-canvas-frame { border-radius: 0; }
}
@media (max-width: 600px) {
    #publish-pages-modal .art-modal-content.art-editing #art-edit-view { padding-left: 0; padding-right: 0; }
    /* 全画面ではモーダルの×がヘッダー右端の「完了」に重なる。編集中は ← (一覧へ) とキャンセル/完了で抜ける */
    #publish-pages-modal .art-modal-content.art-editing > .modal-close { display: none; }
}

/* ===== イシュー#268 step4 ===== */
/* 本棚/本の全画面: 画面そのもの (外枠・上部の帯・バーの装飾を消す)。モック shot-2-shelf-sp-390 の並び */
#art-edit-view[data-art-mode="form"] .art-block.is-fs-target { border: 0; box-shadow: none; background: none; padding: 0; outline: none; }
#art-edit-view[data-art-mode="form"] .art-block.is-fs-target > .art-block-bar { background: none; border: 0; padding: 0; min-height: 0; }
.art-fs-block .art-shelf-list.art-fs-list { display: block; }
.art-fs-sec { font-size: 12px; font-weight: 700; color: var(--fg2); margin: 4px 0 8px; }
.art-fs-row { display: grid; grid-template-columns: 48px 1fr 34px; gap: 10px; align-items: start; padding: 10px 0;
    border-bottom: 1px solid var(--line2); }
.art-fs-cover { width: 48px; height: 72px; border-radius: 3px; overflow: hidden; background: var(--bg); display: flex;
    align-items: center; justify-content: center; font-size: 0; }
.art-fs-cover img { width: 100%; height: 100%; object-fit: cover; }
.art-fs-ttl { font-size: 14px; font-weight: 700; color: var(--fg); line-height: 1.35; }
.art-fs-au { font-size: 12px; color: var(--fg2); }
.art-fs-memo { display: block; width: 100%; height: 34px; margin-top: 6px; border: 1px solid var(--line); border-radius: 7px;
    padding: 0 9px; font-size: 13px; color: var(--fg); background: var(--panel); }
.art-fs-body .art-chips { margin-top: 6px; }
.art-fs-ops { display: flex; flex-direction: column; gap: 4px; }
.art-fs-ic { width: 34px; height: 34px; border-radius: 7px; border: 1px solid var(--line); background: var(--panel); color: var(--fg2);
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.art-fs-ic[disabled] { opacity: 0.4; cursor: default; }
.art-fs-add { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 44px; margin-top: 12px;
    border: 1.5px dashed var(--accent); border-radius: 9px; background: var(--panel); color: var(--accent); font-size: 14px;
    font-weight: 700; cursor: pointer; }
.art-fs-note { font-size: 12px; color: var(--fg2); margin: 10px 0 0; line-height: 1.6; }
/* 文章ブロックの全画面編集 (EasyMDE・イシュー#276 step3)。長文メモと同じエディタをここでも使う */
.art-fs-text-editor { display: flex; flex-direction: column; min-height: 0; }
.art-fs-text-editor .EasyMDEContainer { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.art-fs-text-editor .EasyMDEContainer .CodeMirror { flex: 1 1 auto; min-height: 50vh; font-size: 16px; }
/* 見た目シート */
.art-look-sheet .art-add-sheet-panel { max-width: 440px; max-height: 88dvh; overflow-y: auto; }
.art-look-sheet-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.art-look-sheet-hd .art-add-sheet-hd { margin: 0 4px; }
.art-look-sheet-close { width: 32px; height: 32px; border-radius: 999px; border: none; background: var(--bg); color: var(--fg2);
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.art-lk-sec { font-size: 12px; font-weight: 700; color: var(--fg2); margin: 10px 4px 8px; }
.art-lk-lays { display: flex; gap: 8px; }
.art-lk-lay { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px; border: 1px solid var(--line);
    border-radius: 9px; background: var(--panel); font-size: 12px; color: var(--fg); cursor: pointer; }
.art-lk-lay[aria-checked="true"] { border: 2px solid var(--accent); padding: 9px 3px; color: var(--accent); }
.art-lk-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.art-lk-col { display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: none; padding: 0;
    font-size: 12px; color: var(--fg); cursor: pointer; }
.art-lk-th { width: 100%; height: 44px; border-radius: 8px; border: 1px solid rgba(0, 0, 0, 0.12); display: flex; align-items: flex-end;
    justify-content: space-between; padding: 0 7px 6px; }
.art-lk-th i { font-style: normal; font-size: 13px; font-weight: 700; }
.art-lk-th b { width: 16px; height: 4px; border-radius: 2px; }
.art-lk-col[aria-checked="true"] .art-lk-th { outline: 2px solid var(--accent); outline-offset: 2px; }
/* ヘッダー: スマホは1行 (構成A・イシュー#276・②決裁2026-10-12)。
   閲覧= ← / タイトル(省略) / 編集 / ⋯。編集= ← / タイトル+状態表示 / ⋯ (見た目・公開/更新・完了は
   #art-edit-bottom-bar へ移設)。タイトルは編集状態でも記事の h1 で直接打つ (#275) ため、
   ヘッダー側は表示専用 (pointer-events:none・view モードと同じ見せ方)。 */
@media (max-width: 600px) {
    #art-edit-view .art-hd { flex-wrap: nowrap; gap: 6px; }
    #art-edit-view[data-art-mode="edit"] .art-hd #art-look-btn,
    #art-edit-view[data-art-mode="edit"] .art-hd .art-hd-publish-group,
    #art-edit-view[data-art-mode="edit"] .art-hd #art-mode-done { display: none; }
    #art-edit-view[data-art-mode="view"] .art-hd .art-title-input,
    #art-edit-view[data-art-mode="edit"] .art-hd .art-title-input { border-color: transparent; background: none; text-overflow: ellipsis;
        pointer-events: none; padding-left: 0; }
    #art-edit-view[data-art-mode="view"] .art-hd .art-save-status { display: none; }
    /* ②決裁(2026-10-12): 編集状態はモックどおりタイトル(1行目)+状態表示(2行目)の2段にする */
    #art-edit-view[data-art-mode="edit"] .art-hd .art-hd-title { flex-direction: column; align-items: flex-start; gap: 1px; }
    #art-edit-view[data-art-mode="edit"] .art-hd .art-title-input { font-weight: 700; font-size: 0.95rem; width: 100%; }
    #art-edit-view[data-art-mode="edit"] .art-hd .art-save-status { display: block; }
}
@media (max-width: 600px) {
    #art-edit-view .art-hd .art-hd-title { flex: 1 1 auto; order: 0; }
}

/* ===== 構成A: 下部アクションバー (600px以下・編集状態限定、イシュー#276・#279で3ボタン化) =====
   .mobile-bottom-nav (7423行) と同じ視覚言語 (position:fixed・アイコン上/ラベル下・
   safe-area-inset-bottom)。z-index は .modal(1000) より上、編集中に開き得るシート/メニュー
   (.art-add-sheet 1250・.art-publish-modal 1150・.cfm-overlay 1210・.art-more-menu 1300) より下＝
   それらが開いたときはバーの上に正しく被さる。
   イシュー#279: 「追加」ボタンはブロック間/末尾の「＋ここに追加」(.art-cv-ins-btn) と役割が
   重なるため撤去。見た目/公開/完了の3ボタンは flex:1 1 0 で均等幅のまま (各44px以上を維持)。 */
#art-edit-bottom-bar { display: none; }
@media (max-width: 600px) {
    #art-edit-view[data-art-mode="edit"] #art-edit-bottom-bar {
        display: flex;
        position: fixed; left: 0; right: 0; bottom: 0;
        padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
        background: var(--panel);
        border-top: 1px solid var(--line);
        z-index: 1050;
    }
    #art-edit-bottom-bar .art-bar-btn {
        flex: 1 1 0; min-width: 0; min-height: 44px;
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 2px; border: none; border-radius: 8px; background: transparent;
        color: var(--fg2); font-size: 0.68rem; line-height: 1.2; cursor: pointer; padding: 4px 2px;
    }
    #art-edit-bottom-bar .art-bar-btn:active { background: var(--side); }
    #art-edit-bottom-bar #art-bar-publish { color: var(--accent); }
    #art-edit-bottom-bar #art-bar-publish.is-stale { color: var(--warning); }
    #art-edit-bottom-bar #art-bar-done { color: var(--accent); font-weight: 700; }
    /* バーの実高さ (44px+上下padding+safe-area) 分だけ本文を持ち上げ、最終ブロックが隠れないようにする */
    #art-edit-view[data-art-mode="edit"] .art-wrap { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
}

/* 構成A: キーボード表示中の補助バー (イシュー#276 step3・モック pair-A-kb)。
   JS (_artBindViewportScroll) が visualViewport の縮みで #art-edit-view に is-kb-open を付け、
   #art-kb-bar の top を visualViewport の下端 (=キーボード直上) に追従させる。
   edit モードの下部アクションバーはキーボード表示中だけ隠す (form モードはもともと#art-edit-bottom-barが出ない)。 */
#art-kb-bar { display: none; }
@media (max-width: 600px) {
    #art-edit-view.is-kb-open #art-edit-bottom-bar { display: none; }
    #art-edit-view.is-kb-open #art-kb-bar {
        display: flex; align-items: center; justify-content: flex-end;
        position: fixed; left: 0; right: 0;
        padding: 6px 10px; background: var(--panel); border-top: 1px solid var(--line);
        z-index: 1050;
    }
    #art-kb-bar #art-kb-bar-done { min-height: 44px; }
}

/* 既存 .art-shelf-list .art-shelf-item (グリッド領域指定) より強く、全画面の行の並びに置き換える */
#art-edit-view .art-shelf-list.art-fs-list .art-shelf-item.art-fs-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) 34px;
    grid-template-areas: none; gap: 10px; align-items: start; padding: 10px 0; min-height: 0; background: none; }
#art-edit-view .art-shelf-list.art-fs-list .art-fs-row > * { grid-area: auto; }
/* 並び順を揃える: 「＋本を追加」の隣の小さいテキストボタン (②決裁 step5) */
.art-fs-actions { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.art-fs-actions .art-fs-add { flex: 1; margin-top: 0; }
.art-fs-sort-btn { flex: 0 0 auto; border: none; background: none; color: var(--accent); font-size: 12px; padding: 6px 2px; cursor: pointer;
    text-decoration: underline; text-underline-offset: 3px; }
.art-fs-sort-btn[disabled] { color: var(--fg2); text-decoration: none; cursor: default; opacity: 0.6; }
.art-fs-sort-opts { display: flex; justify-content: flex-end; gap: 6px; margin-top: 6px; }
.art-fs-sort-opts[hidden] { display: none; }
.art-fs-sort-opt { border: 1px solid var(--line); background: var(--panel); color: var(--fg); border-radius: 999px; font-size: 12px; padding: 4px 10px; cursor: pointer; }

/* ===== 重なりの帯と大きさの段階 (重なり管理役 js/overlay-manager.js・イシュー#367・設計案 19 §5/§6) =====
   z-index の固定値はこの節だけに置く。面の root には管理役が data-layer="n" (開いた順) と --layer を書き、
   z-index は帯 + n で決まる = 新しく開いた面が常に最前面。他の節に z-index を書き足さない (帯の対象外は
   部品内部の局所的な重ね 1〜100 と、ブックマークレットが Amazon のページへ注入する進行表示だけ)。 */
:root {
    --z-chrome: 900;        /* 常設 UI (SP 下部ナビ・ドロワーのスクリム等)。面は常にこれより上 */
    --ov-z-base: 1000;      /* 面のスタック (modal・sheet・popover・menu): 1000 + data-layer。未移行の .modal も移行期の
                               橋渡し (overlay-manager.js installLegacyBridge) でスタックに載るので、開いた順 = 重なり順 */
    --ov-z-dialog: 1800;    /* 確認ダイアログ・同期衝突 (履歴に積まない・常に面より上): 1800 + data-layer */
    --ov-z-toast: 1900;     /* toast・バナー */
}
[data-layer] { z-index: calc(var(--ov-z-base) + var(--layer, 0)); }
[data-layer][data-ov-kind="dialog"] { z-index: calc(var(--ov-z-dialog) + var(--layer, 0)); }

/* 大きさの段階 (PC は固定幅・狭幅は既存の .modal-content の媒体ルールに従う = 現状踏襲)。
   sm: 確認・選択のみ / md: 単機能フォーム / lg: 一覧+詳細 / full: 編集に集中 */
.ov-sm { max-width: 440px; }
.ov-md { max-width: 720px; }
.ov-lg { max-width: min(900px, calc(100vw - 40px)); }
.ov-full { width: 100vw; max-width: none; height: 100dvh; max-height: none; border-radius: 0; margin: 0; }
.modal[data-ov-size="full"].show { padding: 0; } /* 全画面は root の余白 (2rem) も外す = 箱がビューポートに一致 */
/* 狭幅 (<=900px・イシュー#505で旧768pxから統一) は段階の上限を外し、各面の既存の媒体ルール (全画面シート等) に従う = 現状踏襲。
   (lg の min(900px, 100vw-40px) が 390 幅で 350px に効いて全画面シートが縮んだ・イシュー#367 step3 実測) */
@media (max-width: 900px) {
    .ov-sm, .ov-md, .ov-lg { max-width: none; }
}

/* ===== イシュー#435: 設定を「アプリのページ」として開く (#430 の統一方針の横展開・案A採用) =====
   技術基盤 (overlays.open/NavState・ADR-131/129) はそのまま使う。見た目だけ「ページ」にする:
   backdropを消しサイドバー(--left-col)の右側だけを覆う・×を消す・読み物幅は中央寄せ。
   PC は既存の「左レール(settings-master)+右ペイン(settings-detail、1 pane だけ表示)」構造
   (§3779〜) をそのまま使い、全画面に広げるだけで案A(#430と同じ骨格)になる。
   スマホは既存の data-settings-view 出し分け(一覧→詳細、戻るで一覧)をそのまま使う。
   publish-section はこの節の対象外 (DOM/ID は不変・#430後続イシューが #/publish/settings へ移す)。 */
#settings-modal.settings-fullpage {
    left: var(--left-col, 220px);
    width: calc(100% - var(--left-col, 220px));
    background: var(--bg);
    padding: 0;
}
#settings-modal.settings-fullpage .settings-modal-content {
    max-width: none; width: 100%; height: 100%; max-height: none; border-radius: 0; margin: 0;
}
/* ×は全幅で出す(イシュー#497 step0)。PCの一覧/詳細では左ナビ以外に設定から出る手段が無かったため。閉じる/戻るの作法の確定は#497の設計に従う */
#settings-modal.settings-fullpage .modal-header { box-shadow: none; } /* .modal-header既定の「ポップアップが浮いている」影はページ化後は不要な名残(②指摘) */
@media (min-width: 901px) {
    #settings-modal.settings-fullpage .settings-detail > .settings-section.pane-active {
        /* margin-top: ヘッダー直下に白背景のカードが密着すると、ヘッダーのborder-bottomと継ぎ目のように
           見える「線の切れ端」が出る(②指摘)。余白を空けて切り離す */
        max-width: 760px; margin: 1.5rem auto 0; padding: 2rem 2rem 6rem; box-sizing: border-box;
    }
}
@media (max-width: 900px) {
    /* サイドバーはモバイルでは常設表示ではない(ドロワー等)ため、左右とも画面幅いっぱいを使う */
    #settings-modal.settings-fullpage { left: 0; width: 100%; }
    #settings-modal.settings-fullpage .settings-detail > .settings-section.pane-active {
        padding: 1rem 1rem 3rem; box-sizing: border-box; /* スマホはカード左右余白を16px前後に (②指摘) */
    }
}