/* Phase 2 UI: ライブラリ/カード/シート。色は本体のトークンを使い、ダーク/ライト両対応 */
.p2-slot{padding-bottom:8px}
.p2-h{margin:22px 4px 10px;font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--color-text-muted,#5b7a70)}
.p2-h em{font-style:normal;opacity:.6;margin-left:4px}
.p2-note{font-size:12px;color:var(--color-text-muted,#5b7a70);opacity:.8;margin:6px 4px}
.p2-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:14px 12px}
.p2-row{display:flex;gap:12px;overflow-x:auto;padding:2px 2px 8px;margin:0 -16px;padding-left:16px;padding-right:16px;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.p2-row::-webkit-scrollbar{display:none}
.p2-row .p2-card{flex:0 0 104px;scroll-snap-align:start}
.p2-card{all:unset;box-sizing:border-box;display:flex;flex-direction:column;gap:6px;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;min-width:0}
.p2-card:focus-visible{outline:2px solid var(--color-accent,#28a477);outline-offset:3px;border-radius:12px}
.p2-cover{position:relative;display:grid;place-items:center;aspect-ratio:2/3;border-radius:12px;overflow:hidden;color:#fff;box-shadow:0 6px 18px rgb(0 0 0/.16),inset 0 1px 0 rgb(255 255 255/.25)}
.p2-cover b{font-size:34px;font-weight:800;text-shadow:0 2px 8px rgb(0 0 0/.3)}
.p2-cover-lg{width:84px;flex:0 0 84px}
.p2-fav{position:absolute;top:6px;right:8px;font-style:normal;color:#ff6b8a;font-size:16px;filter:drop-shadow(0 1px 2px rgb(0 0 0/.4))}
.p2-title{font-size:13px;font-weight:600;line-height:1.3;color:var(--color-text,#0c2a22);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.p2-sub{font-size:11px;color:var(--color-text-muted,#5b7a70)}
.p2-actions{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 6px}
.p2-ghost{background:color-mix(in srgb,var(--color-accent,#28a477) 12%,transparent)!important;color:var(--color-text,#0c2a22)!important;box-shadow:none!important}
.p2-danger{background:color-mix(in srgb,#e5484d 14%,transparent)!important;color:#c0282d!important;box-shadow:none!important}
.p2-col,.p2-stat{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;margin-bottom:8px}
.p2-stat b{font-variant-numeric:tabular-nums}
/* シート */
.p2-sheet{position:fixed;inset:0;z-index:200;display:flex;align-items:flex-end;justify-content:center}
.p2-scrim{position:absolute;inset:0;background:rgb(8 24 20/.42);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.p2-panel{position:relative;width:min(560px,100%);max-height:86dvh;overflow:auto;overscroll-behavior:contain;padding:10px 18px calc(24px + env(safe-area-inset-bottom));border-radius:26px 26px 0 0;
 background:color-mix(in srgb,var(--color-surface,#f6fffb) 88%,transparent);backdrop-filter:blur(28px) saturate(1.5);-webkit-backdrop-filter:blur(28px) saturate(1.5);box-shadow:0 -12px 40px rgb(0 0 0/.22),inset 0 1px 0 rgb(255 255 255/.5);will-change:transform}
.p2-grab{width:38px;height:5px;border-radius:3px;background:rgb(0 0 0/.18);margin:2px auto 14px}
.p2-head{display:flex;gap:16px;align-items:flex-start}
.p2-head h3{margin:2px 0 4px;font-size:20px;line-height:1.25}.p2-head p{margin:0;font-size:13px;color:var(--color-text-muted,#5b7a70)}
.p2-chips{display:flex;flex-wrap:wrap;gap:8px}
.p2-chip{all:unset;box-sizing:border-box;padding:8px 14px;border-radius:999px;font-size:13px;cursor:pointer;background:rgb(0 0 0/.06);-webkit-tap-highlight-color:transparent}
.p2-chip.on{background:var(--color-accent,#28a477);color:#fff}
.p2-chlist{display:flex;flex-direction:column;gap:2px}.p2-ch{padding:10px 4px;border-bottom:1px solid rgb(0 0 0/.06);font-size:14px}
@media (prefers-color-scheme:dark){.p2-panel{background:color-mix(in srgb,#10201b 88%,transparent)}.p2-chip{background:rgb(255 255 255/.1)}.p2-grab{background:rgb(255 255 255/.25)}.p2-ch{border-color:rgb(255 255 255/.08)}.p2-ghost{color:#e7fff6!important}}
@media (prefers-reduced-motion:reduce){.p2-panel{will-change:auto}}
/* スクロール末端がフローティングタブバーに隠れないよう、下に十分な余白を確保 */
.mh-screen-scroll{padding-bottom:calc(120px + env(safe-area-inset-bottom))!important}