/* 月の表と右の列にそろえた 1 つの箱（templates/_month_top_box.html）。色は bc-ui の値をこの箱の中だけに置く（bc-ui.css 37KB をこの面に足さない） */
.month-top-box{--bc-bg:#fff;--bc-border:#d5dde1;--bc-brand-strong:#10516a;--bc-brand:#176b87;--bc-muted:#555;--bc-sun:#c62828;--bc-surface:#f6f9fa;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,642px) minmax(0,1fr);width:calc(100% - 39px);margin:2px 0 6px 30px;border:1px solid var(--bc-border);border-radius:14px;background:var(--bc-bg);overflow:hidden}
/* 左の端は表（.calendar-table-thismonth の内側 30px）、右の端は右の列にそろえる。満月のページは下の段の組みが違うが、切り替えても箱が動かないよう同じ寸法で置く */
.month .month-top-box~.calendar-table-wrap{margin-top:0}
.month-top-box__main{min-width:0;display:flex;flex-direction:column}
.month-top-box__top{box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:62px;padding:8px 14px 8px 12px;background:var(--bc-surface)}
.month-top-box__today{display:flex;align-items:center;gap:10px;min-width:0;color:var(--bc-brand-strong);text-decoration:none}
.month-top-box__tile{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--bc-sun);border-radius:9px;background:var(--bc-bg);line-height:1}
.month-top-box__tile[hidden],.month-top-box__today-line[hidden]{display:none}
.month-top-box__tile b{font-size:18px;color:var(--bc-sun)}.month-top-box__tile i{margin-top:3px;font-size:10px;font-style:normal;font-weight:700;color:var(--bc-sun)}
.month-top-box__today-text{display:flex;flex-direction:column;line-height:1.4}.month-top-box__today-line{font-size:14px;font-weight:700}.month-top-box__go{font-size:12.5px;font-weight:700;color:var(--bc-brand)}
.month-top-box__print{display:flex;align-items:center;gap:6px;flex:none}.month-top-box__print-label{font-size:12.5px;font-weight:700;color:var(--bc-muted)}.month-top-box__print a{display:inline-flex;align-items:baseline;gap:4px;padding:7px 10px;border:1px solid var(--bc-brand);border-radius:8px;background:var(--bc-bg);color:var(--bc-brand);font-size:13.5px;font-weight:700;line-height:1;text-decoration:none}.month-top-box__print small{font-size:10.5px}
.month-top-box__tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--bc-border)}.month-top-box__tabs a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-width:0;height:46px;border-left:1px solid var(--bc-border);color:var(--bc-brand);font-size:15px;font-weight:700;line-height:1.15;text-decoration:none}.month-top-box__tabs a:first-child{border-left:0}.month-top-box__tabs small{font-size:11px;font-weight:600;color:var(--bc-muted)}.month-top-box__tabs a[aria-current=page]{background:var(--bc-brand);color:var(--bc-bg)}.month-top-box__tabs a[aria-current=page] small{color:var(--bc-bg)}
.month-top-box__plan{display:flex;flex-direction:column;justify-content:center;gap:4px;min-width:0;padding:10px 16px;border-left:1px solid var(--bc-border);background:var(--bc-surface);color:var(--bc-brand-strong);text-decoration:none}.month-top-box__plan-label{font-size:11.5px;font-weight:700;color:var(--bc-muted)}.month-top-box__plan-row{display:flex;align-items:center;gap:12px}.month-top-box__plan .month-strip__plan{flex:none;display:block}.month-top-box__plan .month-strip__q{font-size:14px;font-weight:700;line-height:1.35}.month-top-box__plan .month-strip__q b{color:var(--bc-brand);font-size:18px}
.month-top-box__today:hover .month-top-box__go,.month-top-box__plan:hover .month-top-box__go{text-decoration:underline}
@media(max-width:1099px){.month-top-box{display:block;width:auto;margin:2px 0 6px}.month-top-box__plan{display:none}.month-top-box__top{min-height:54px;padding:6px 8px;gap:4px}.month-top-box__today{gap:5px}.month-top-box__tile{width:32px;height:36px}.month-top-box__tile b{font-size:16px}.month-top-box__today-line{font-size:12px}.month-top-box__go{font-size:11px}.month-top-box__print{gap:3px}.month-top-box__print-label{display:none}.month-top-box__print a{padding:6px 5px;font-size:11px}.month-top-box__print small{display:none}.month-top-box__tabs a{height:42px;font-size:13px}.month-top-box__tabs small{font-size:10px}}
/* 既存の段取りの絵と同じ逆算アニメーション */
@media(prefers-reduced-motion:no-preference){.month-strip__plan g{transform-box:fill-box}.month-strip__flag{transform-origin:50% 0;animation:ms-pole .35s .1s ease-out both}.month-strip__cloth{transform-box:fill-box;transform-origin:0 50%;animation:ms-wave .5s .45s ease-in-out 2}.month-strip__slack{transform-origin:100% 50%;animation:ms-grow .3s .45s ease-out both}.month-strip__bar{animation:ms-in .32s ease-out both}.month-strip__q b{display:inline-block;animation:ms-pop .6s 1.55s ease-out both}.month-top-box__plan:hover .month-strip__flag{animation-name:ms-pole2}.month-top-box__plan:hover .month-strip__slack{animation-name:ms-grow2}.month-top-box__plan:hover .month-strip__bar{animation-name:ms-in2}.month-top-box__plan:hover .month-strip__q b{animation-name:ms-pop2}}
@keyframes ms-pole{from{transform:scaleY(0)}to{transform:none}}@keyframes ms-pole2{from{transform:scaleY(0)}to{transform:none}}@keyframes ms-wave{50%{transform:skewY(-12deg) scaleX(.85)}}@keyframes ms-grow{from{opacity:0;transform:scaleX(0)}to{opacity:1;transform:none}}@keyframes ms-grow2{from{opacity:0;transform:scaleX(0)}to{opacity:1;transform:none}}@keyframes ms-in{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}@keyframes ms-in2{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}@keyframes ms-pop{35%{transform:scale(1.28)}100%{transform:none}}@keyframes ms-pop2{35%{transform:scale(1.28)}100%{transform:none}}
/* 切り替えのタブの絵（10/25 ユーザー「いいね」）。絵は page_generators/month_top_box.py の TAB_ICONS、字は ::after */
.month-top-box__tabs a{flex-direction:row;gap:10px}.month-top-box__label{display:flex;flex-direction:column;align-items:flex-start;gap:1px}
.month-top-box__icon{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;width:34px;height:34px;border-radius:50%;background:var(--bc-bg);box-shadow:0 0 0 1px var(--bc-border),0 1px 3px rgba(18,72,90,.1);transition:transform .18s}.month-top-box__icon svg{display:block}
.month-top-box__icon--taian,.month-top-box__icon--moon{background:none;box-shadow:0 1px 4px rgba(14,31,61,.25)}.month-top-box__icon--holidays{background:linear-gradient(160deg,#cfe8fb,#eef7fe 70%);box-shadow:0 0 0 1px #b9d7ee,0 1px 3px rgba(18,72,90,.1)}
.month-top-box__icon--normal::after{content:attr(data-m);position:absolute;left:0;right:0;top:15px;text-align:center;font-size:10px;font-weight:800;line-height:1;color:var(--bc-brand-strong)}
.month-top-box__icon--taian::after{content:"安";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:"Hiragino Mincho ProN","Yu Mincho",serif;font-size:17px;font-weight:900;color:#fff}
.month-top-box__tabs a[aria-current=page] .month-top-box__icon{box-shadow:0 0 0 2px rgba(255,255,255,.7),0 2px 6px rgba(0,0,0,.2)}.month-top-box__tabs a:hover .month-top-box__icon{transform:translateY(-1px) scale(1.08)}
.month-top-box__glow{transform-origin:12.5px 12px;animation:mtb-glow 3.2s ease-in-out infinite}.month-top-box__star{animation:mtb-tw 2.4s ease-in-out infinite}.month-top-box__star--2{animation-delay:.8s}.month-top-box__star--3{animation-delay:1.6s}.month-top-box__cloth{transform-origin:5.5px 10px;animation:mtb-wave 2.8s ease-in-out infinite}
@keyframes mtb-glow{0%,100%{opacity:.5;transform:scale(.85)}50%{opacity:1;transform:scale(1.05)}}@keyframes mtb-tw{0%,100%{opacity:.25}50%{opacity:1}}@keyframes mtb-wave{0%,100%{transform:skewY(0)}50%{transform:skewY(-5deg)}}
@media(max-width:1099px){.month-top-box__tabs a{gap:4px;padding:0 2px}.month-top-box__icon{width:26px;height:26px}.month-top-box__icon svg{width:20px;height:20px}.month-top-box__icon--taian svg,.month-top-box__icon--moon svg{width:26px;height:26px}.month-top-box__icon--normal::after{top:11px;font-size:8.5px}.month-top-box__icon--taian::after{font-size:13px}}
@media(prefers-reduced-motion:reduce){.month-top-box__glow,.month-top-box__star,.month-top-box__cloth{animation:none}}
/* 「{月}月の境目」の 1 行（N12・page_generators/month_sakaime.py）。字は小さめ、色は箱の既存の変数だけ */
.month-top-box__sakaime{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 16px;margin:0;padding:2px 14px;border-top:1px solid var(--bc-border);font-size:13px;line-height:1.4}.month-top-box__sakaime b{font-size:12px;color:var(--bc-muted)}.month-top-box__sakaime a{color:var(--bc-brand);font-weight:700;text-decoration:none}.month-top-box__sakaime a span{color:var(--bc-brand-strong)}.month-top-box__sakaime a:hover{text-decoration:underline}
/* SP は 1 行だけ: 先頭の 1 件を出し、長ければ … で切る（2 件目は DOM に残して隠す） */
@media(max-width:1099px){.month-top-box__sakaime{flex-wrap:nowrap;padding:2px 8px;gap:0 10px;font-size:12.5px}.month-top-box__sakaime b{flex:none;white-space:nowrap}.month-top-box__sakaime a{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.month-top-box__sakaime a~a{display:none}}