/* 配色切り替えの部品（palette.js が作るボタンと一覧）。
   色はすべて役割の変数（--c-*）と --hair から作る。見本の色だけは各配色の5色そのもの。
   --sans / --maru / --en はサイトの書体に合わせる（未定義なら継承される）。
   スマホ（860px 以下）は右下の丸ボタンと下から出る一覧。下部固定メニューがあるときは bottom を調整する。 */
:root{--hair:color-mix(in srgb,var(--c-deep) 40%,transparent)}
.pl-fab{position:fixed;left:24px;bottom:24px;z-index:200;display:flex;align-items:center;gap:10px;min-height:48px;padding:0 18px 0 14px;border:1px solid var(--hair);border-radius:999px;background:color-mix(in srgb,var(--c-bg) 92%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--c-main);font:700 .85rem/1 var(--sans,inherit);letter-spacing:.06em;cursor:pointer;box-shadow:0 10px 30px color-mix(in srgb,var(--c-main) 16%,transparent)}
.pl-fab:hover{border-color:var(--c-main)}
.pl-dots{display:flex}
.pl-dots i{width:14px;height:14px;border-radius:50%;margin-left:-4px;box-shadow:0 0 0 1.5px var(--c-bg)}
.pl-dots i:first-child{margin-left:0}
.pl-panel{position:fixed;left:24px;bottom:84px;z-index:210;width:min(380px,calc(100vw - 48px));max-height:min(70vh,620px);display:flex;flex-direction:column;background:var(--c-bg);color:var(--c-main);border:1px solid var(--hair);border-radius:22px;box-shadow:0 30px 80px color-mix(in srgb,var(--c-main) 28%,transparent);overflow:hidden}
.pl-panel[hidden]{display:none}
.pl-hd{display:flex;align-items:flex-start;gap:12px;padding:18px 18px 12px 22px;border-bottom:1px solid var(--hair)}
.pl-hd div{flex:1}
.pl-hd b{display:block;font-family:var(--maru,inherit);font-size:1.05rem;letter-spacing:.08em}
.pl-hd small{display:block;margin-top:4px;font-size:.74rem;line-height:1.6}
.pl-x{flex:none;width:40px;height:40px;border:1px solid var(--hair);border-radius:50%;background:transparent;color:var(--c-main);font-size:1.2rem;line-height:1;cursor:pointer}
.pl-x:hover{border-color:var(--c-main)}
.pl-body{overflow:auto;padding:6px 14px 18px;overscroll-behavior:contain}
.pl-cat{margin:14px 6px 8px;font-size:.74rem;letter-spacing:.14em;color:var(--c-hl);font-weight:700}
.pl-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.pl-opt{display:flex;flex-direction:column;align-items:stretch;gap:7px;width:100%;padding:9px 10px 8px;border:1px solid var(--hair);border-radius:14px;background:transparent;color:var(--c-main);font:inherit;text-align:left;cursor:pointer}
.pl-opt:hover{border-color:var(--c-main)}
.pl-item{position:relative}
.pl-item .pl-name{padding-right:24px}
.pl-fav{position:absolute;right:3px;bottom:2px;width:30px;height:30px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:var(--c-deep);font-size:1.05rem;line-height:1;cursor:pointer}
.pl-fav:hover{background:color-mix(in srgb,var(--c-soft) 70%,transparent)}
.pl-fav[aria-pressed="true"]{color:var(--c-hl)}
.pl-favs{padding-bottom:6px;border-bottom:1px dashed var(--hair)}
.pl-empty{margin:0 6px 8px;font-size:.74rem;line-height:1.6;color:color-mix(in srgb,var(--c-main) 70%,transparent)}
.pl-opt[aria-pressed="true"]{border:2px solid var(--c-main);padding:8px 9px 7px;background:color-mix(in srgb,var(--c-soft) 45%,transparent)}
.pl-chips{display:flex;height:22px;border-radius:7px;overflow:hidden;box-shadow:0 0 0 1px var(--hair)}
.pl-chips i{flex:1}
.pl-name{display:flex;gap:6px;align-items:baseline;font-size:.78rem;line-height:1.4}
.pl-name em{font-style:normal;font-family:var(--en,inherit);font-size:.85rem;color:var(--c-hl)}
.pl-fab:focus-visible,.pl-x:focus-visible,.pl-opt:focus-visible,.pl-fav:focus-visible{outline:2px solid var(--c-main);outline-offset:2px}
@media (max-width:860px){
  .pl-fab{left:auto;right:12px;bottom:calc(84px + env(safe-area-inset-bottom));width:48px;height:48px;min-height:0;padding:0;justify-content:center}
  .pl-fab span:last-child{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .pl-dots i{width:12px;height:12px}
  .pl-panel{left:0;right:0;bottom:0;width:auto;max-height:75vh;border-radius:22px 22px 0 0;border-bottom:0;padding-bottom:env(safe-area-inset-bottom)}
}
@media (min-width:861px){.pl-pad-bottom{padding-bottom:72px}}