/* 月の表と右の列にそろえた 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}}