/* ぷよぷよ記念日（/puyo）のスタイル。.pz の中だけに効かせる。
   色・余白は Web Awesome のトークン（--wa-*）から取り、ダークモード（html.wa-dark）にそのまま追従させる。
   見た目の役割分け:
   - バッジ（wa-badge）: 種類・○周年・状態。塗りのラベルで、押せない。
   - タグ（.pz-tag / .pz-chip）: 「#」付きの文字。押すと絞り込む。 */

/* アクセントの色は「ぷよぷよ」の 5 色（赤・緑・青・黄・紫）。ライト・ダークで明るさを変える。
   Web Awesome は brand / success / warning / danger の役割の色（--wa-color-*-fill-loud など）を <html> で計算するので、
   .pz の中で役割の色そのものを定義し直す（段階の色 --wa-color-brand-50 などを変えるだけでは子に伝わらない）。
   作り方は Web Awesome 標準と同じ考え方で、元の色を背景（--pz-base）や文字の側（--pz-contrast）と混ぜる。 */
.pz {
    --pz-red: #e5484d;
    --pz-green: #2b9a5f;
    --pz-blue: #3a76f0;
    --pz-yellow: #e9a800;
    --pz-purple: #8a4cc4;
    --pz-base: #fff;     /* quiet な塗りに混ぜる側 */
    --pz-contrast: #000; /* quiet な塗りの上の文字に混ぜる側 */
}

:root.wa-dark .pz {
    --pz-red: #f2666b;
    --pz-green: #3cc483;
    --pz-blue: #6b97ff;
    --pz-yellow: #f6c143;
    --pz-purple: #b48af0;
    --pz-base: var(--wa-color-surface-default);
    --pz-contrast: #fff;
}

.pz {
    --wa-color-brand-fill-quiet: color-mix(in oklab, var(--pz-blue) 14%, var(--pz-base));
    --wa-color-brand-fill-normal: color-mix(in oklab, var(--pz-blue) 28%, var(--pz-base));
    --wa-color-brand-fill-loud: var(--pz-blue);
    --wa-color-brand-border-quiet: color-mix(in oklab, var(--pz-blue) 30%, var(--pz-base));
    --wa-color-brand-border-normal: color-mix(in oklab, var(--pz-blue) 50%, var(--pz-base));
    --wa-color-brand-border-loud: color-mix(in oklab, var(--pz-blue) 75%, var(--pz-base));
    --wa-color-brand-on-quiet: color-mix(in oklab, var(--pz-blue) 70%, var(--pz-contrast));
    --wa-color-brand-on-normal: color-mix(in oklab, var(--pz-blue) 60%, var(--pz-contrast));
    --wa-color-brand-on-loud: #fff;

    --wa-color-success-fill-quiet: color-mix(in oklab, var(--pz-green) 14%, var(--pz-base));
    --wa-color-success-fill-normal: color-mix(in oklab, var(--pz-green) 28%, var(--pz-base));
    --wa-color-success-fill-loud: var(--pz-green);
    --wa-color-success-border-quiet: color-mix(in oklab, var(--pz-green) 30%, var(--pz-base));
    --wa-color-success-border-normal: color-mix(in oklab, var(--pz-green) 50%, var(--pz-base));
    --wa-color-success-border-loud: color-mix(in oklab, var(--pz-green) 75%, var(--pz-base));
    --wa-color-success-on-quiet: color-mix(in oklab, var(--pz-green) 65%, var(--pz-contrast));
    --wa-color-success-on-normal: color-mix(in oklab, var(--pz-green) 55%, var(--pz-contrast));
    --wa-color-success-on-loud: #fff;

    --wa-color-danger-fill-quiet: color-mix(in oklab, var(--pz-red) 14%, var(--pz-base));
    --wa-color-danger-fill-normal: color-mix(in oklab, var(--pz-red) 28%, var(--pz-base));
    --wa-color-danger-fill-loud: var(--pz-red);
    --wa-color-danger-border-quiet: color-mix(in oklab, var(--pz-red) 30%, var(--pz-base));
    --wa-color-danger-border-normal: color-mix(in oklab, var(--pz-red) 50%, var(--pz-base));
    --wa-color-danger-border-loud: color-mix(in oklab, var(--pz-red) 75%, var(--pz-base));
    --wa-color-danger-on-quiet: color-mix(in oklab, var(--pz-red) 70%, var(--pz-contrast));
    --wa-color-danger-on-normal: color-mix(in oklab, var(--pz-red) 60%, var(--pz-contrast));
    --wa-color-danger-on-loud: #fff;

    /* 黄は明るいので、上に載せる文字は黒寄りに */
    --wa-color-warning-fill-quiet: color-mix(in oklab, var(--pz-yellow) 16%, var(--pz-base));
    --wa-color-warning-fill-normal: color-mix(in oklab, var(--pz-yellow) 32%, var(--pz-base));
    --wa-color-warning-fill-loud: var(--pz-yellow);
    --wa-color-warning-border-quiet: color-mix(in oklab, var(--pz-yellow) 35%, var(--pz-base));
    --wa-color-warning-border-normal: color-mix(in oklab, var(--pz-yellow) 55%, var(--pz-base));
    --wa-color-warning-border-loud: color-mix(in oklab, var(--pz-yellow) 80%, var(--pz-base));
    --wa-color-warning-on-quiet: color-mix(in oklab, var(--pz-yellow) 55%, var(--pz-contrast));
    --wa-color-warning-on-normal: color-mix(in oklab, var(--pz-yellow) 45%, var(--pz-contrast));
    --wa-color-warning-on-loud: #2b2000;

    --wa-color-text-link: var(--wa-color-brand-on-quiet);
    --wa-color-focus: var(--pz-blue);
    --wa-form-control-activated-color: var(--pz-blue);

    --pz-bg: var(--wa-color-surface-lowered);
    --pz-surface: var(--wa-color-surface-default);
    --pz-ink: var(--wa-color-text-normal);
    --pz-muted: var(--wa-color-text-quiet);
    --pz-line: var(--wa-color-surface-border);
    --pz-link: var(--wa-color-text-link);
    /* マウスを乗せたときの下地。テーマによっては neutral-fill-quiet がページの背景（surface-lowered）と同じ色になり、
       変化が見えなくなるので、文字色を薄く重ねる（どの背景の上でも少し濃くなる） */
    --pz-hover: color-mix(in srgb, var(--pz-ink) 8%, transparent);
    --pz-heat: var(--wa-color-brand-fill-loud);
    /* 出典の欄で使うアイコン（mask に使う SVG）。開閉の矢印と、Web アーカイブの箱 */
    --pz-chevron-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.5 2.5 11 8l-5.5 5.5' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --pz-archive-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1' y='2' width='14' height='4' rx='1'/%3E%3Cpath fill-rule='evenodd' d='M2 7h12v6a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1zM6.8 9a.8.8 0 0 0 0 1.6h2.4a.8.8 0 0 0 0-1.6z'/%3E%3C/svg%3E");
    --pz-header-h: 61px; /* 固定ヘッダーの高さ（月の切り替えバーをその下に固定する） */
    --pz-font: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Yu Gothic UI", system-ui, sans-serif;

    /* Web Awesome の部品も同じ書体にする */
    --wa-font-family-body: var(--pz-font);
    --wa-font-family-heading: var(--pz-font);

    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--pz-bg);
    color: var(--pz-ink);
    font-family: var(--pz-font);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.7;
    -webkit-text-size-adjust: 100%;
}

body:has(.pz) {
    margin: 0;
    background: var(--wa-color-surface-lowered);
}

.pz *, .pz *::before, .pz *::after {
    box-sizing: border-box;
}

.pz a {
    color: var(--pz-link);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    touch-action: manipulation;
}

.pz a:hover {
    text-decoration-thickness: 2px;
}

.pz h1, .pz h2, .pz h3, .pz h4 {
    font-family: var(--pz-font);
    font-weight: 800;
    line-height: 1.35;
    margin: 0;
    color: var(--pz-ink);
}

.pz p {
    margin: 0;
}

.pz [hidden] {
    display: none !important;
}

.pz code {
    font-size: .8em;
    color: var(--pz-muted);
}

.pz-wrap {
    width: 100%;
    max-width: 1080px;
    margin-inline: auto;
    padding-inline: 16px;
}

.pz-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.pz-skip {
    position: absolute;
    left: 8px;
    top: -48px;
    padding: 8px 12px;
    background: var(--pz-surface);
    border-radius: 8px;
    z-index: 10;
}

.pz-skip:focus {
    top: 8px;
}

/* ページ移動のときに Blazor が見出しへ移すフォーカスには枠を出さない */
.pz [tabindex="-1"]:focus {
    outline: none;
}

.pz :focus-visible {
    outline: 3px solid var(--wa-color-focus);
    outline-offset: 2px;
}

/* ヘッダー */

.pz-header {
    position: sticky;
    top: 0;
    z-index: 5;
    transition: transform .25s ease;
    background: color-mix(in srgb, var(--pz-surface) 90%, transparent);
    backdrop-filter: saturate(1.4) blur(10px);
    -webkit-backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 1px solid var(--pz-line);
}

.pz-header-inner {
    display: flex;
    align-items: center;
    gap: 8px 16px;
    flex-wrap: wrap;
    padding-block: 10px;
}

.pz .pz-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--pz-ink);
    text-decoration: none;
}

.pz-mark {
    flex: none;
    font-size: 1.9rem;
    color: var(--wa-color-brand-on-quiet);
}

.pz-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.pz-brand-title {
    font-weight: 800;
    font-size: 1.25rem;
}

.pz-brand-sub {
    font-size: .75rem;
    color: var(--pz-muted);
}

.pz-nav {
    margin-left: auto;
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.pz .pz-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    color: var(--pz-ink);
    text-decoration: none;
    font-weight: 700;
    font-size: .9rem;
}

.pz a.pz-nav-link, .pz a.pz-nav-link:hover, .pz a.pz-nav-link:active,
.pz a.pz-brand, .pz a.pz-brand:hover, .pz a.pz-brand:active,
.pz .pz-upcoming a, .pz .pz-upcoming a:hover, .pz .pz-upcoming a:active,
.pz .pz-months a, .pz .pz-months a:hover, .pz .pz-months a:active,
.pz a.pz-yc, .pz a.pz-yc:hover, .pz a.pz-yc:active,
.pz .pz-empty-days a, .pz .pz-empty-days a:hover,
.pz .pz-hub-months a, .pz .pz-hub-months a:hover, .pz .pz-hub-months a:active {
    text-decoration: none !important;
    -webkit-text-decoration: none !important;
    color: var(--pz-ink) !important;
}

.pz .pz-nav-link:hover {
    background: var(--pz-hover);
}

.pz a.pz-nav-link.active, .pz a.pz-nav-link.active:hover {
    color: var(--pz-surface) !important;
}

.pz a.pz-yc[data-level="0"] {
    color: var(--pz-muted) !important;
}

.pz a.pz-yc[data-level="3"] {
    color: var(--wa-color-brand-on-loud) !important;
}

.pz .pz-nav-link.active {
    background: var(--pz-ink);
    color: var(--pz-surface);
}

.pz-main {
    flex: 1;
    padding-block: 24px 64px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.pz-admin-callout {
    font-size: .9rem;
}

.pz-note {
    font-size: .85rem;
    color: var(--pz-muted);
}

.pz-empty {
    color: var(--pz-muted);
    font-size: .95rem;
}

/* 今日 */

.pz-today {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pz-today-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}

/* 共有ボタン（右上） */
.pz-share {
    margin-left: auto;
    align-self: center;
}

/* 今日の記念日の共有。右上のページの共有より控えめに、今日の記念日の下の線の上（最後の記念日の出典の下）に右寄せで並べる。
   線は最後の記念日からこの欄に移す */
.pz-today-share {
    display: flex;
    justify-content: flex-end;
    margin-top: -10px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--pz-line);
}

.pz-rows > .pz-entry:has(+ .pz-today-share) {
    border-bottom: 0;
}

.pz-share-subtle wa-button::part(base) {
    color: var(--pz-muted);
}

/* plain のボタンの既定のホバーの下地は、ページの背景と同じ色で見えないので、ほかと同じ下地にする */
@media (hover: hover) {
    .pz-share-subtle wa-button:hover::part(base) {
        color: var(--pz-ink);
        background: var(--pz-hover);
    }
}

.pz-page-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;
}

.pz-today-label {
    font-weight: 800;
    color: var(--pz-muted);
}

.pz-today h1 {
    font-size: clamp(1.75rem, 6vw, 2.5rem);
}

.pz-today h1 small {
    font-size: .5em;
    color: var(--pz-muted);
    margin-left: 10px;
    font-weight: 700;
}

.pz-subhead {
    font-size: 1rem;
    margin-top: 8px !important;
}

.pz-upcoming {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    column-gap: 24px;
    border-top: 1px solid var(--pz-line);
}

.pz-upcoming li {
    border-bottom: 1px solid var(--pz-line);
}

/* タイトルが折り返しても、日付と○周年は 1 行目にそろえる */
.pz .pz-upcoming a {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 8px 4px;
    color: var(--pz-ink);
    text-decoration: none;
    min-width: 0;
}

.pz .pz-upcoming a {
    border-radius: 8px;
    transition: background .12s;
}

.pz .pz-upcoming a:hover {
    background: var(--pz-hover);
}

.pz-upcoming-date {
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    color: var(--pz-muted);
    min-width: 3em;
}

.pz-upcoming-title {
    flex: 1;
    min-width: 0;
    line-height: 1.45;
}

/* 記念日の行（幅いっぱい。枠や背景で囲まず、罫線で区切る） */

.pz-rows {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--pz-line);
}

.pz-entry {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 0;
    border-bottom: 1px solid var(--pz-line);
    min-width: 0;
}

.pz-day-entries > .pz-entry:last-child {
    border-bottom: 0;
}

/* 出典募集中・裏付け募集中の案内 */
.pz-wanted {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: .8rem;
    color: var(--pz-muted);
    max-width: 60em;
}

.pz-wanted wa-icon {
    flex: none;
    position: relative;
    top: 1px;
}

.pz details.pz-sources .pz-wanted {
    margin: 6px 0 4px;
}

.pz-entry-line {
    display: flex;
    align-items: center;
    gap: 4px 10px;
    flex-wrap: wrap;
}

.pz-kind {
    font-size: .72rem;
    flex: none;
}

/* 「その他」は 5 色目の紫（Web Awesome に紫の役割は無いので、バッジの色を直接変える） */
wa-badge.pz-kind-other {
    --wa-color-fill-quiet: color-mix(in oklab, var(--pz-purple) 14%, var(--pz-base));
    --wa-color-fill-normal: color-mix(in oklab, var(--pz-purple) 28%, var(--pz-base));
    --wa-color-fill-loud: var(--pz-purple);
    --wa-color-border-quiet: color-mix(in oklab, var(--pz-purple) 30%, var(--pz-base));
    --wa-color-border-normal: color-mix(in oklab, var(--pz-purple) 50%, var(--pz-base));
    --wa-color-border-loud: color-mix(in oklab, var(--pz-purple) 75%, var(--pz-base));
    --wa-color-on-quiet: color-mix(in oklab, var(--pz-purple) 70%, var(--pz-contrast));
    --wa-color-on-normal: color-mix(in oklab, var(--pz-purple) 60%, var(--pz-contrast));
    --wa-color-on-loud: #fff;
}

.pz-entry-title {
    font-size: 1.05rem !important;
    overflow-wrap: anywhere;
    flex: 1 1 18em;
    min-width: 0;
}

.pz-entry-when {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    font-size: .85rem;
    color: var(--pz-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ○周年（上の「もうすぐの記念日」と同じく、バッジにせず文字で） */
.pz-years, .pz-upcoming-years {
    font-size: .8rem;
    font-weight: 800;
    color: var(--wa-color-warning-on-quiet);
    white-space: nowrap;
}

.pz-entry-summary {
    font-size: .92rem;
    max-width: 60em;
}

.pz-entry-foot {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 2px 16px;
    /* 本文の行間（1.7）のままだと、タグが折り返したときに行が空きすぎる */
    line-height: 1.5;
}

.pz-entry-meta {
    font-size: .8rem;
    color: var(--pz-muted);
}

.pz-entry-admin {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    font-size: .75rem;
}

.pz-entry-notes {
    font-size: .8rem;
    color: var(--pz-muted);
    padding: 6px 10px;
    border-radius: 6px;
    background: var(--wa-color-neutral-fill-quiet);
    max-width: 60em;
}

.pz-admin-status {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.pz-admin-status wa-badge {
    flex: none;
}

.pz-admin-status span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.pz-conflict {
    font-size: .85rem;
    padding: 6px 10px;
    border-radius: 6px;
    background: var(--wa-color-warning-fill-quiet);
    color: var(--wa-color-warning-on-quiet);
    /* 欄の幅いっぱいに広げると、Amazon の画像の有無などで右の余白がまちまちになる。中身の幅に合わせる */
    width: fit-content;
    max-width: min(100%, 60em);
    box-sizing: border-box;
}

.pz-conflict ul {
    margin: 2px 0 0;
    padding-left: 1.2em;
}

/* タグ（#…）。文字だけで、押すと絞り込む */

.pz-tags {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0 10px;
    font-size: .8rem;
}

.pz-tag {
    font: inherit;
    font-size: .8rem;
    font-weight: 700;
    color: var(--pz-link);
    background: none;
    border: 0;
    padding: 2px 0;
    cursor: pointer;
    touch-action: manipulation;
}

span.pz-tag {
    cursor: default;
    color: var(--pz-muted);
}

.pz-tag::before {
    content: "#";
    opacity: .6;
    margin-right: 1px;
}

button.pz-tag:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* 出典 */

.pz details.pz-sources {
    border: 0;
    padding: 0;
    margin: 0;
    background: none;
    font-size: .85rem;
}

.pz details.pz-sources summary {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 0;
    border: 0;
    background: none;
    color: var(--pz-muted);
    font-weight: 700;
    font-size: .8rem;
    cursor: pointer;
    list-style: none;
}

.pz details.pz-sources summary::-webkit-details-marker {
    display: none;
}

/* 開閉の矢印（›）。記念日ごとにアイコンの部品を置くと重いので CSS で描く。
   正方形の箱の中で回すので、開いても文字の位置が動かない */
.pz details.pz-sources summary::before {
    content: "";
    flex: none;
    width: .7rem;
    height: .7rem;
    background: currentColor;
    -webkit-mask: var(--pz-chevron-icon) center / contain no-repeat;
    mask: var(--pz-chevron-icon) center / contain no-repeat;
    transition: rotate .15s;
}

.pz details.pz-sources[open] summary::before {
    rotate: 90deg;
}

/* Web Awesome の既定では、開いた details の summary に負の左右マージンが付き、文字が左にずれる */
.pz details.pz-sources[open] > summary,
.pz details.pz-sources > summary {
    margin: 0;
}

.pz details.pz-sources summary::after {
    content: none;
}

.pz details.pz-sources summary:hover {
    color: var(--pz-ink);
}

.pz-source-list {
    list-style: none;
    margin: 6px 0 4px;
    padding: 10px 12px;
    border-radius: 6px;
    background: var(--wa-color-neutral-fill-quiet);
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 60em;
}

.pz-source-list li {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

/* 出典の種類（公式・書籍・雑誌・Web・書誌）。記念日の種類のバッジより控えめに。
   数が多いので wa-badge は使わず、span を wa-badge（neutral・filled）と同じ見た目にする */
.pz-st {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.6em;
    padding: .375em .625em;
    border: 1.5px solid transparent;
    border-radius: 3px;
    background: var(--wa-color-neutral-fill-normal);
    color: var(--wa-color-neutral-on-normal);
    font-size: .68rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    position: relative;
    top: -1px;
}

.pz-source-body {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Wayback Machine に保存されたページへのリンク。箱のアイコンを CSS で描いて前に付ける */
.pz a.pz-arc::before {
    content: "";
    display: inline-block;
    width: .9em;
    height: .9em;
    margin-right: 4px;
    vertical-align: -.1em;
    background: var(--pz-muted);
    -webkit-mask: var(--pz-archive-icon) center / contain no-repeat;
    mask: var(--pz-archive-icon) center / contain no-repeat;
}

.pz .pz-source-archive.pz-arc::before {
    margin-right: 0;
}

.pz .pz-source-archive {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 6px;
    font-size: .8rem;
    color: var(--pz-muted);
}

.pz-source-list cite {
    font-style: normal;
    font-weight: 700;
}

.pz-source-pub, .pz-source-loc {
    color: var(--pz-muted);
    margin-left: 4px;
}

.pz-source-quote {
    display: block;
    color: var(--pz-muted);
    quotes: "「" "」";
}

.pz-admin-link, .pz-admin-evidence {
    display: block;
    font-size: .8rem;
    color: var(--pz-muted);
}

/* 一覧（絞り込みと表示の切り替え） */

.pz-calendar {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pz-calendar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.pz-calendar-head h1, .pz-page-head h1 {
    font-size: 1.5rem;
}

.pz-count {
    font-size: .9rem;
    color: var(--pz-muted);
    font-weight: 700;
    margin-left: 8px;
}

.pz-filter {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border-radius: var(--wa-border-radius-l);
    background: var(--pz-surface);
    border: 1px solid var(--pz-line);
}

.pz-search {
    max-width: 32rem;
}

.pz-filter-group {
    display: grid;
    grid-template-columns: 5em 1fr;
    align-items: baseline;
    gap: 8px;
}

.pz-filter-label {
    font-size: .8rem;
    font-weight: 800;
    color: var(--pz-muted);
}

.pz-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* 絞り込みのタグ。記念日に付いたタグと同じ「#」付きで、押すと選ばれる */
.pz-chip {
    font: inherit;
    font-size: .85rem;
    font-weight: 700;
    color: var(--pz-ink);
    background: transparent;
    border: 1px solid var(--pz-line);
    border-radius: 999px;
    padding: 3px 12px;
    cursor: pointer;
    touch-action: manipulation;
}

.pz-chip::before {
    content: "#";
    color: var(--pz-muted);
    margin-right: 1px;
}

.pz-chip-count {
    margin-left: 6px;
    font-size: .75rem;
    color: var(--pz-muted);
    font-variant-numeric: tabular-nums;
}

.pz-chip[aria-pressed="true"] {
    background: var(--pz-ink);
    border-color: var(--pz-ink);
    color: var(--pz-surface);
}

.pz-chip[aria-pressed="true"]::before,
.pz-chip[aria-pressed="true"] .pz-chip-count {
    color: inherit;
    opacity: .7;
}

@media (hover: hover) {
    .pz-chip:hover {
        border-color: var(--pz-ink);
    }
}

.pz-more {
    align-self: flex-start;
    font: inherit;
    font-size: .8rem;
    font-weight: 700;
    color: var(--pz-link);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.pz-clear {
    align-self: flex-start;
}

/* 日付順 */

.pz-view {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* 下にスクロールしてヘッダーを隠したら、月の切り替えバーを一番上に */
.pz-header-hidden .pz-header {
    transform: translateY(-100%);
}

.pz-months {
    position: sticky;
    top: var(--pz-header-h);
    transition: top .25s ease;
    z-index: 4;
    display: flex;
    gap: 2px;
    overflow-x: auto;
    padding: 8px 0;
    background: var(--pz-bg);
    border-bottom: 1px solid var(--pz-line);
    scrollbar-width: none;
}

.pz-header-hidden .pz-months {
    top: 0;
}

.pz-months-static {
    position: static;
    flex-wrap: wrap;
}

.pz .pz-months a {
    flex: none;
    padding: 4px 10px;
    border-radius: 999px;
    color: var(--pz-ink);
    text-decoration: none;
    font-weight: 700;
    font-size: .9rem;
    font-variant-numeric: tabular-nums;
}

.pz .pz-months a:hover {
    background: var(--pz-hover);
}

.pz .pz-months a.pz-months-empty {
    color: var(--pz-muted);
    opacity: .5;
}

.pz-month, .pz-series {
    display: flex;
    flex-direction: column;
    scroll-margin-top: calc(var(--pz-header-h) + 56px);
}

.pz-month-title {
    font-size: 1.3rem !important;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--pz-ink);
}

.pz-month-title small {
    font-size: .7em;
    color: var(--pz-muted);
    margin-left: 6px;
}

/* 日付順の一覧の見出しの年（「2027年 1月」）。月の前に置く */
.pz-month-title .pz-month-year {
    margin: 0 6px 0 0;
}

.pz-day {
    display: grid;
    grid-template-columns: 6.5rem 1fr;
    gap: 0 16px;
    border-bottom: 1px solid var(--pz-line);
    scroll-margin-top: calc(var(--pz-header-h) + 56px);
}

.pz-day-label {
    padding-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    line-height: 1.2;
}

.pz-day-num {
    font-weight: 800;
    font-size: 1.15rem;
    font-variant-numeric: tabular-nums;
}

.pz-day-sub {
    font-size: .75rem;
    color: var(--pz-muted);
}

/* 「今日」は記念日の種類と同じ wa-badge（塗りつぶしで目立たせる） */
.pz-day-today-mark {
    align-self: flex-start;
    margin-top: 2px;
    font-size: .72rem;
}

.pz-day-entries {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pz-flash {
    animation: pz-flash 2.4s ease-out;
}

/* スクロールが止まってから付ける。しばらく色を残してから消す */
@keyframes pz-flash {
    0%, 45% { background: var(--wa-color-brand-fill-quiet); }
    100% { background: transparent; }
}

/* 右下の「上へ」のボタン（PuyoLayout）。スクロールしたら出す */
.pz-totop {
    position: fixed;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 30;
    /* grid だと button の中の見えない文字の箱が列の幅を取り、矢印が左に寄る。flex で真ん中に置く */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--pz-line);
    border-radius: 999px;
    background: var(--pz-surface);
    color: var(--pz-ink);
    font-size: 1.1rem;
    box-shadow: var(--wa-shadow-m);
    cursor: pointer;
    touch-action: manipulation;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .2s, transform .2s, visibility 0s .2s;
}

.pz-totop.pz-totop-show {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .2s, transform .2s;
}

@media (hover: hover) {
    .pz-totop:hover {
        border-color: var(--pz-ink);
    }
}

.pz-totop:focus-visible {
    outline: var(--wa-focus-ring);
    outline-offset: 2px;
}

/* 画面の下に短く出すお知らせ（絞り込みを解除したときなど） */
.pz-toast {
    position: fixed;
    left: 50%;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    z-index: 30;
    max-width: calc(100% - 32px - 112px);
    margin: 0;
    padding: 8px 16px;
    border-radius: 999px;
    background: var(--pz-ink);
    color: var(--pz-surface);
    font-size: .85rem;
    font-weight: 700;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, 8px);
    transition: opacity .2s, transform .2s;
}

.pz-toast.pz-toast-show {
    opacity: 1;
    transform: translate(-50%, 0);
}

@media (prefers-reduced-motion: reduce) {
    .pz-totop, .pz-totop.pz-totop-show, .pz-toast {
        transition: none;
    }
}

@media print {
    .pz-totop, .pz-toast {
        display: none;
    }
}

/* 年表 */

.pz-tl-head {
    position: sticky;
    top: var(--pz-header-h);
    transition: top .25s ease;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--pz-bg);
    border-bottom: 1px solid var(--pz-line);
}

.pz-header-hidden .pz-tl-head {
    top: 0;
}

.pz-tl-head .pz-decades {
    position: static;
    flex: 1 1 auto;
    min-width: 0;
    border-bottom: 0;
}

.pz-order {
    flex: none;
}

/* 年は左の欄に、スクロールしても見えるように */
.pz-tl .pz-day-label {
    position: sticky;
    top: calc(var(--pz-header-h) + 56px);
    align-self: start;
    transition: top .25s ease;
}

.pz-header-hidden .pz-tl .pz-day-label {
    top: 56px;
}

/* 年表では年のかわりに月日を出す */
.pz-entry-md {
    display: none;
}

.pz-tl .pz-entry-md {
    display: inline;
}

.pz-tl .pz-entry-year {
    display: none;
}

/* 年間カレンダー */

.pz-cover {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 32rem;
}

.pz-cover strong {
    font-size: 1.4rem;
}

.pz-cover wa-progress-bar {
    --track-height: 8px;
}

.pz-heat-legend {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    font-size: .8rem;
    color: var(--pz-muted);
}

.pz-heat-legend li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pz .pz-heat-legend .pz-yc {
    width: 14px;
    height: 14px;
    border-radius: 3px;
}

.pz-year {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 24px 28px;
}

.pz-ym h3 {
    font-size: 1rem;
    margin-bottom: 6px;
}

.pz-ym-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
}

.pz-ym-wd {
    font-size: .68rem;
    text-align: center;
    color: var(--pz-muted);
}

.pz .pz-yc {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    border-radius: 6px;
    font-size: .75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    color: var(--pz-muted);
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--pz-line);
}

.pz .pz-yc[data-level="1"] {
    background: color-mix(in srgb, var(--pz-heat) 25%, transparent);
    color: var(--pz-ink);
    box-shadow: none;
}

.pz .pz-yc[data-level="2"] {
    background: color-mix(in srgb, var(--pz-heat) 55%, transparent);
    color: var(--pz-ink);
    box-shadow: none;
}

.pz .pz-yc[data-level="3"] {
    background: var(--pz-heat);
    color: var(--wa-color-brand-on-loud);
    box-shadow: none;
}

.pz .pz-yc[aria-disabled="true"] {
    pointer-events: none;
}

.pz .pz-yc-today {
    outline: 2px solid var(--pz-ink);
    outline-offset: 1px;
}

.pz .pz-yc-leap[data-level="0"] {
    box-shadow: inset 0 0 0 1px var(--pz-line);
    border: 1px dashed var(--pz-muted);
}

@media (hover: hover) {
    .pz a.pz-yc:not([aria-disabled="true"]):hover {
        outline: 2px solid var(--pz-heat);
        outline-offset: 1px;
    }
}

/* トップ（/puyo）: 月のページへのリンクと年間カレンダー */

.pz-hub {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pz-hub h2 {
    font-size: 1.25rem;
}

.pz-hub-months {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
    gap: 8px;
}

.pz .pz-hub-months a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px;
    border: 1px solid var(--pz-line);
    border-radius: var(--wa-border-radius-l);
    background: var(--pz-surface);
    color: var(--pz-ink);
    text-decoration: none;
    transition: background .12s, border-color .12s;
}

@media (hover: hover) {
    .pz .pz-hub-months a:hover {
        border-color: var(--pz-ink);
        background: var(--pz-hover);
    }
}

.pz-hub-month {
    font-weight: 800;
    font-size: 1.1rem;
    font-variant-numeric: tabular-nums;
}

.pz-hub-more {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
}

.pz-hub-more a, .pz-pager a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
}

/* 月・日のページ */

/* 見出しの年（月のページは月の前、日のページは日付の後ろ） */
.pz-page-year {
    font-size: .55em;
    color: var(--pz-muted);
    font-weight: 700;
    margin: 0 8px;
}

.pz-page-title h1 > .pz-page-year:first-child {
    margin-left: 0;
}

/* 開いている月 */
.pz .pz-months a[aria-current="page"] {
    background: var(--pz-ink);
    /* リンクの色を固定する !important の指定（.pz .pz-months a）より強くする */
    color: var(--pz-surface) !important;
}

/* 一覧の月の見出し・年間カレンダーの月・日付は、それぞれのページへのリンク。見た目は見出しのままにする */
.pz .pz-month-title a, .pz .pz-ym h3 a, .pz a.pz-day-num,
.pz .pz-month-title a:active, .pz .pz-ym h3 a:active, .pz a.pz-day-num:active {
    color: inherit !important;
    text-decoration: none !important;
}

@media (hover: hover) {
    .pz .pz-month-title a:hover, .pz .pz-ym h3 a:hover, .pz a.pz-day-num:hover {
        color: inherit !important;
        text-decoration: underline !important;
    }
}

/* 前後の月・日 */
.pz-pager {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--pz-line);
}

/* キャラクター */

.pz-page-head {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pz-page-head > p {
    max-width: 48em;
}

.pz-legend {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 20px;
    font-size: .85rem;
    color: var(--pz-muted);
}

.pz-legend li {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
}

.pz-series {
    gap: 0;
}

.pz-work-title {
    font-size: .9rem !important;
    padding-bottom: 12px;
}

.pz-chara-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* 名前の行 | 誕生日、その下に登場作品などを左の欄だけで並べる（誕生日の下に文字を入り込ませない） */
.pz-chara {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "line bday"
        "rest .";
    column-gap: 16px;
    row-gap: 2px;
    padding: 10px 0;
    border-bottom: 1px solid var(--pz-line);
}

.pz-chara > .pz-chara-line {
    grid-area: line;
}

.pz-chara > .pz-bday {
    grid-area: bday;
}

.pz-chara-rest {
    grid-area: rest;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pz-chara:last-child {
    border-bottom: 0;
}

.pz-chara-line {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 2px 12px;
}

.pz-chara-links,
.pz-entry-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0 14px;
    font-size: .8rem;
}

.pz-chara-links wa-icon,
.pz-entry-links wa-icon {
    font-size: .75em;
    margin-left: 3px;
}

/* Amazon の商品画像。見出しの下、説明文の右の空いたところに置く（行は増やさない） */
.pz-entry:has(> .pz-thumb) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 16px;
}

.pz-entry:has(> .pz-thumb) > * {
    grid-column: 1;
}

.pz-entry:has(> .pz-thumb) > .pz-entry-line {
    grid-column: 1 / -1;
}

.pz-entry > .pz-thumb {
    grid-column: 2;
    grid-row: 2 / span 2;
    align-self: start;
    width: 76px;
    line-height: 0;
}

.pz-thumb img {
    width: 100%;
    max-height: 100px;
    object-fit: contain;
    object-position: top center;
    border-radius: 3px;
}

.pz-entry-links .pz-amazon wa-icon {
    margin: 0 3px 0 0;
}

/* 記念日の募集の案内（カレンダーの下） */
.pz-recruit {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px 18px;
    border-radius: 10px;
    background: var(--wa-color-brand-fill-quiet);
    color: var(--wa-color-brand-on-quiet);
}

.pz-recruit > wa-icon {
    font-size: 1.6rem;
    flex: none;
    margin-top: 2px;
}

.pz-recruit h2 {
    font-size: 1rem;
    margin: 0 0 4px;
}

.pz-recruit p {
    margin: 0;
    font-size: .9rem;
}

/* 声優の担当の出典が Wikipedia・ファンサイトだけの印と、担当についての注意書き */
.pz-cv-weak {
    margin-left: 1px;
    font-size: .7em;
    color: var(--pz-muted);
}

.pz-chara-cv .pz-tag {
    margin-left: 8px;
}

.pz-voice-note {
    margin: 6px 0 0;
    font-size: .8rem;
    color: var(--pz-muted);
    max-width: 60em;
}

.pz-sources-sub {
    margin: 8px 0 0;
    font-size: .78rem;
    font-weight: 700;
    color: var(--pz-muted);
}

.pz-chara-name {
    font-weight: 800;
}

.pz-chara-alias {
    font-size: .8rem;
    color: var(--pz-muted);
}

.pz-bday {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pz-legend .pz-bday {
    margin-left: 0;
}

.pz-bday-none {
    font-weight: 500;
    color: var(--pz-muted);
}


.pz-bday wa-icon {
    color: var(--pz-red);
}

/* 管理ページ */

.pz-admin-stats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
    margin: 0;
}

.pz-admin-stats > div {
    padding: 12px 14px;
    border-radius: var(--wa-border-radius-l);
    background: var(--pz-surface);
    border: 1px solid var(--pz-line);
}

.pz-admin-stats dt {
    font-size: .8rem;
    color: var(--pz-muted);
}

.pz-admin-stats dd {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.pz-admin-stats small {
    font-size: .8rem;
    color: var(--pz-muted);
    font-weight: 500;
}

.pz-admin-tabs wa-tab-panel {
    --padding: 16px 0 0;
}

.pz-admin-tabs .pz-note {
    margin-bottom: 12px;
}

.pz-admin-reason {
    display: flex;
    gap: 6px;
    padding-top: 12px;
}

.pz-admin-reason + .pz-entry {
    padding-top: 4px;
}

.pz-empty-days {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px 24px;
}

.pz-empty-days h3 {
    font-size: 1rem;
}

.pz-empty-days small {
    color: var(--pz-muted);
    font-weight: 500;
}

.pz-empty-days p {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.pz .pz-empty-days a {
    min-width: 2em;
    text-align: center;
    padding: 2px 4px;
    border-radius: 4px;
    box-shadow: inset 0 0 0 1px var(--pz-line);
    text-decoration: none;
    color: var(--pz-ink);
    font-variant-numeric: tabular-nums;
}

.pz .pz-admin-only-mark {
    border-bottom: 2px dashed var(--wa-color-warning-border-loud);
}

.pz-table-wrap {
    overflow-x: auto;
}

.pz-table {
    border-collapse: collapse;
    width: 100%;
    font-size: .85rem;
}

.pz-table th, .pz-table td {
    text-align: left;
    vertical-align: top;
    padding: 8px 10px;
    border-bottom: 1px solid var(--pz-line);
}

.pz-table th {
    font-size: .75rem;
    color: var(--pz-muted);
    white-space: nowrap;
}

.pz-table-notes {
    min-width: 20em;
    color: var(--pz-muted);
}

/* 文章のページ */

/* サイトについて: 本文と、右の商品の欄 */
.pz-about {
    display: grid;
    grid-template-columns: minmax(0, 44em) minmax(220px, 280px);
    justify-content: space-between;
    align-items: start;
    gap: 40px;
}

.pz-shop {
    position: sticky;
    top: calc(var(--pz-header-h) + 16px);
    transition: top .25s ease;
    padding: 16px;
    border-radius: 10px;
    background: var(--pz-surface);
}

.pz-header-hidden .pz-shop {
    top: 16px;
}

.pz-shop h2 {
    font-size: .95rem;
    margin: 0 0 10px;
}

.pz-shop ul {
    list-style: none;
    margin: 0;
    padding: 0;
    border-left: 0; /* Web Awesome の aside 内のリストに付く左の線を消す */
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pz .pz-shop a {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 12px;
    align-items: start;
    padding: 6px;
    border-radius: 8px;
    color: var(--pz-ink);
    text-decoration: none !important;
}

.pz .pz-shop a:hover {
    background: var(--pz-hover);
}

.pz-shop img {
    grid-row: 1 / span 2;
    width: 64px;
    max-height: 84px;
    object-fit: contain;
    object-position: top center;
    border-radius: 3px;
}

.pz-shop-name {
    font-size: .85rem;
    font-weight: 700;
    line-height: 1.4;
}

.pz-shop-cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    font-size: .78rem;
    color: var(--pz-link);
}

/* 画面の高さが足りないと固定した欄の下が見えなくなるので、固定しない */
@media (max-height: 860px) {
    .pz-shop {
        position: static;
    }
}

/* 狭い画面では本文の下に、2 列で小さく並べる */
@media (max-width: 900px) {
    .pz-about {
        grid-template-columns: minmax(0, 1fr);
    }

    .pz-shop {
        position: static;
    }

    .pz-shop ul {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
}

.pz-prose {
    max-width: 44em;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pz-prose h1 {
    font-size: 1.6rem;
}

.pz-prose h2 {
    font-size: 1.15rem;
    margin-top: 12px !important;
}

.pz-prose ul {
    margin: 0;
    padding-left: 1.3em;
}

.pz-stats {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 4px 16px;
    margin: 0;
}

.pz-stats dt {
    font-weight: 800;
}

.pz-stats dd {
    margin: 0;
}

/* フッター */

.pz-footer {
    border-top: 1px solid var(--pz-line);
    font-size: .85rem;
    color: var(--pz-muted);
}

.pz-footer-inner {
    padding-block: 24px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pz-footer-small {
    font-size: .8rem;
}

/* スマートフォン */

@media (max-width: 600px) {
    .pz-entry > .pz-thumb {
        width: 60px;
    }

    .pz-thumb img {
        max-height: 80px;
    }

    .pz {
        --pz-header-h: 84px;
        font-size: 15px;
    }

    .pz-main {
        padding-block: 16px 48px;
        gap: 32px;
    }

    /* ヘッダーは「ロゴ」と「メニュー（横にスクロール）」の 2 行。テーマの切り替えは記念日ラボ本体で */
    .pz-header-inner {
        padding-block: 6px 4px;
        gap: 2px;
    }

    .pz-brand-sub, .pz-theme {
        display: none;
    }

    .pz-mark {
        font-size: 1.4rem;
    }

    .pz-brand-title {
        font-size: 1.1rem;
    }

    .pz-nav {
        margin-left: 0;
        width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .pz .pz-nav-link {
        flex: none;
        padding: 3px 10px;
        font-size: .85rem;
    }

    .pz-today-head h1 {
        font-size: 1.75rem;
    }

    .pz-filter {
        padding: 12px;
        gap: 10px;
    }

    /* 絞り込みのタグは、分類ごとに 1 行にして横にスクロール */
    .pz-filter-group {
        grid-template-columns: 4em 1fr;
        align-items: center;
        gap: 6px;
    }

    .pz-filter-group .pz-chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        margin-right: -12px;
        padding-right: 12px;
    }

    .pz-chip {
        flex: none;
        padding: 2px 10px;
    }

    .pz-calendar-head h1 {
        font-size: 1.3rem;
    }

    .pz-day {
        grid-template-columns: 1fr;
    }

    .pz-tl .pz-day-label {
        position: static;
    }

    /* スマホでは誕生日の下も使い、登場作品などを幅いっぱいに並べる */
    .pz-chara {
        grid-template-areas:
            "line bday"
            "rest rest";
        column-gap: 10px;
    }

    .pz-tl-head {
        flex-wrap: wrap;
        gap: 0;
        padding-bottom: 6px;
    }

    .pz-day-label {
        flex-direction: row;
        align-items: baseline;
        gap: 8px;
        padding-top: 12px;
    }

    .pz-day-label + .pz-day-entries > .pz-entry:first-child {
        padding-top: 4px;
    }

    .pz-work-title {
        padding-bottom: 0;
    }

    /* 種類のバッジとタイトルは同じ行に。年・○周年はタイトルの下に */
    /* バッジ（発売など）も文字の流れに入れて、タイトルと一緒に折り返す */
    .pz-entry-line {
        display: block;
    }

    .pz-entry-line > .pz-kind {
        display: inline-block;
        vertical-align: middle;
        margin-right: 6px;
        position: relative;
        top: -2px;
    }

    .pz-entry-title {
        display: inline;
    }

    .pz-entry-when {
        display: flex;
        margin: 2px 0 0;
    }

    /* 出典も、種類のバッジのあとに続けて折り返す */
    .pz-source-list li {
        display: block;
    }

    .pz-st {
        display: inline-flex;
        margin-right: 6px;
        vertical-align: middle;
        top: -1px;
    }

    .pz-year {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px 16px;
    }

    .pz .pz-yc {
        font-size: .68rem;
        border-radius: 4px;
    }
}

/* 色が変わるだけで動きは無いので、動きを減らす設定でも残す（どこへ移動したか分かるように） */

/* 文字を弾ませる（PuyoJelly）。1 文字ずつ下を支点に、つぶれて伸びる */

.pz-jelly {
    display: inline-flex;
    position: relative;
}

.pz-jelly-char {
    display: inline-block;
    transform-origin: 50% 100%;
}

@media (prefers-reduced-motion: no-preference) {
    /* 今日の日付: 上から落ちてきて、着地でつぶれて弾む。そのあと時々ぷるんと揺れる */
    .pz-jelly-drop .pz-jelly-char {
        animation:
            pz-jelly-fall .55s cubic-bezier(.55, 0, .8, .2) calc(var(--i) * .08s) both,
            pz-jelly-land .7s ease-out calc(var(--i) * .08s + .55s) forwards,
            pz-jelly-idle 5s ease-in-out calc(var(--i) * .06s + 2.5s) infinite;
    }

    /* サイト名: マウスを乗せると、1 文字ずつ順にぷるんと揺れる */
    @media (hover: hover) {
        a:hover .pz-jelly:not(.pz-jelly-drop) .pz-jelly-char {
            animation: pz-jelly-land .7s ease-out calc(var(--i) * .04s);
        }
    }
}

@keyframes pz-jelly-fall {
    from { transform: translateY(-1.4em); opacity: 0; }
    30% { opacity: 1; }
    to { transform: translateY(0); }
}

@keyframes pz-jelly-land {
    0% { transform: scale(1.25, .7); }
    30% { transform: translateY(-.18em) scale(.9, 1.12); }
    55% { transform: scale(1.08, .92); }
    75% { transform: scale(.97, 1.03); }
    100% { transform: none; }
}

@keyframes pz-jelly-idle {
    0%, 86%, 100% { transform: none; }
    90% { transform: scale(1.1, .88); }
    94% { transform: translateY(-.06em) scale(.95, 1.06); }
}