:root{--ink:#354943;--muted:#7c8982;--green:#476c5a;--line:#e4e8df;--paper:#fbfaf6}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'Yu Gothic',Meiryo,sans-serif;font-size:14px}button,input,select,textarea{font:inherit}button,a{cursor:pointer}button{color:inherit}aside{width:240px;background:#f1f3eb;position:fixed;inset:0 auto 0 0;padding:45px 25px;border-right:1px solid var(--line)}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-size:29px}.brand span{font-size:18px;font-weight:700}.brand small{display:block;font-size:8px;letter-spacing:2px;margin-top:7px}.side-label{font-size:9px;letter-spacing:1.7px;margin-top:65px;color:var(--muted)}nav button{width:100%;border:0;background:transparent;text-align:left;padding:16px;margin-top:7px;border-radius:9px}nav button.active{background:#e0e8dc;color:var(--green);font-weight:bold}.side-bottom{position:absolute;bottom:35px;font-size:11px}.side-bottom span{display:block;color:var(--muted);margin-top:10px}main{margin-left:240px;max-width:1450px;padding:30px 6%}header{display:flex;justify-content:space-between;align-items:center;font-size:9px;letter-spacing:2px;color:var(--muted)}.eyebrow{font-size:9px;letter-spacing:2px;color:var(--muted);font-weight:bold}h1{font-family:serif;font-weight:500;font-size:39px;line-height:1.6;letter-spacing:3px;margin:20px 0}p{line-height:1.9}.notice{border:1px solid #dce4d4;border-radius:12px;padding:18px 22px;background:#f0f3e9;display:flex;gap:18px;align-items:center;margin-bottom:42px}.notice strong{font-size:12px}.notice p{margin:2px 0;font-size:12px;color:#677a69}.section-head{display:flex;align-items:center;justify-content:space-between}h2{font-family:serif;font-size:24px;font-weight:500;margin:8px 0 24px}.primary{border:0;background:var(--green);color:white;border-radius:7px;padding:13px 20px;font-size:12px}.tools{display:flex;justify-content:space-between;gap:15px;margin:10px 0 25px;align-items:center}#tags{display:flex;gap:7px;flex-wrap:wrap}.tag{border:1px solid var(--line);border-radius:25px;background:transparent;padding:8px 15px;font-size:11px}.tag.active{background:var(--ink);color:white;border-color:var(--ink)}select{border:1px solid var(--line);border-radius:6px;background:var(--paper);padding:8px;color:var(--muted);font-size:11px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.card{padding:24px;background:white;border:1px solid var(--line);border-radius:12px;text-align:left;min-height:247px;transition:.2s}.card:hover{transform:translateY(-3px);box-shadow:0 7px 20px #3549430c}.card-top{display:flex;justify-content:space-between;color:var(--muted);font-size:10px}.symbol{font-size:24px;color:#9a9c7b}.card h3{font-size:15px;margin:20px 0 7px}.card .date{font-size:10px;color:var(--muted)}.counter{font-size:40px;font-family:Georgia;margin:20px 0 12px;color:var(--green)}.counter small{font-size:11px;font-family:sans-serif;margin:0 5px;color:var(--muted)}.card-tags{font-size:10px;color:#86947d}.subcount{font-size:10px;color:var(--muted);margin-bottom:15px}.empty{padding:50px;text-align:center;color:var(--muted);grid-column:1/-1}dialog{border:1px solid var(--line);border-radius:15px;width:460px;max-width:94vw;padding:28px;background:var(--paper);color:var(--ink)}dialog::backdrop{background:#273a3355;backdrop-filter:blur(4px)}.dialog-head,.dialog-actions{display:flex;justify-content:space-between;align-items:center}.dialog-head button{border:0;background:none;font-size:26px}.dialog-head h2{margin:0 0 15px}form label{display:block;margin:14px 0;font-size:12px}form input:not([type=checkbox]),textarea,form select{display:block;width:100%;margin-top:7px;border:1px solid #d7dfd4;background:white;padding:11px;border-radius:6px;color:var(--ink)}.check{display:flex;gap:7px;align-items:center}.help{font-size:10px;color:var(--muted)}.danger{border:0;background:none;color:#ad6d67}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:var(--ink);color:white;padding:13px 22px;border-radius:8px;display:none;z-index:10}@media(min-width:1450px){main{margin-right:auto}}@media(max-width:1100px){aside{width:200px;padding:30px 18px}main{margin-left:200px;padding:25px 4%}.cards{grid-template-columns:repeat(2,1fr)}h1{font-size:32px}}@media(max-width:700px){aside{position:static;width:100%;padding:18px 20px;border-bottom:1px solid var(--line);border-right:0}.brand{font-size:25px}.brand span{font-size:16px}.side-label,.side-bottom{display:none}nav{display:flex;margin-top:17px;gap:8px}nav button{padding:10px;text-align:center;font-size:12px;margin:0}main{margin:0;padding:23px 20px}header{font-size:8px;letter-spacing:1px}.eyebrow{font-size:8px;letter-spacing:1px}.notice{margin-bottom:28px;padding:15px;gap:10px}.cards{gap:12px}.card{padding:17px 14px;min-height:230px}.card h3{font-size:13px}.counter{font-size:30px}.counter small{font-size:9px}.tools{align-items:flex-start;flex-direction:column}.primary{padding:12px;font-size:11px}h2{font-size:21px}.card-tags{font-size:9px}}

/* ライブ観戦サイトのカレンダー構造・寸法・日付選択仕様に準拠。 */
.calendar{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px;margin-bottom:18px}
.calendar-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.calendar-head button{border:1px solid var(--line);border-radius:10px;background:white;padding:8px 16px;font-size:23px;line-height:1}
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.weekday{text-align:center;color:var(--muted);font-size:11px;padding:12px 0}
.day{border:0;border-radius:9px;min-height:66px;padding:9px 3px;display:flex;align-items:center;flex-direction:column;gap:7px;background:transparent}
.day:hover{background:#f0f3eb}
.day.selected{background:var(--green);color:white}
.day.today:not(.selected){box-shadow:inset 0 0 0 1px #85acad}
.dots{display:flex;gap:3px;flex-wrap:wrap;justify-content:center}
.dot{display:inline-block;width:6px;height:6px;border-radius:50%;flex:none}
.calendar-legend{display:flex;gap:14px;flex-wrap:wrap;color:var(--muted);font-size:11px;margin-bottom:24px}
.calendar-legend>span{display:inline-flex;align-items:center;gap:6px}
.day-heading{font-size:14px;margin:24px 0 16px}
.calendar-toolbar{display:flex;align-items:center;gap:10px;margin:5px 0 16px}
.calendar-toolbar>small{margin-left:auto;color:var(--muted)}
.calendar-toolbar>button,.master-row button,.setting-title button,[data-close-manager],.dialog-actions>button:not(.primary),.timing button{border:1px solid var(--line);background:white;border-radius:8px;padding:9px 12px;font-size:11px}
#month-filter{position:relative}
#month-filter summary{list-style:none;border:1px solid var(--line);background:#fff;border-radius:9px;padding:10px 14px;font-size:12px;cursor:pointer}
#month-filter summary::-webkit-details-marker{display:none}
.month-filter-popup{position:absolute;top:calc(100% + 10px);left:0;width:280px;max-width:calc(100vw - 40px);padding:18px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 12px 28px #0000001f;z-index:4}
.date-year-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.date-year-row strong{font-size:17px}
.date-year-row button{border:0;background:none;width:38px;height:38px;padding:8px;font-size:22px}
.date-month-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.date-month-grid button{border:1px solid transparent;background:transparent;border-radius:10px;font-size:14px;padding:12px 4px}
.date-month-grid button.active{background:#f6f7f6;color:var(--green);border-color:#7eafb5;font-weight:600}
.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.settings-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px;min-width:0}
.settings-card h3{font-size:15px;margin:0}
.setting-title{display:flex;align-items:center;justify-content:space-between;gap:10px}
.master-row{display:flex;align-items:center;gap:8px;border-top:1px solid var(--line);padding:13px 0}
.master-row>span{flex:1;min-width:0;overflow-wrap:anywhere;font-size:12px}
.master-row small{display:block;color:var(--muted);font-size:10px;margin-top:4px}
.master-row button{flex:none;padding:8px}
.reminder-settings{grid-column:1/-1}
.settings-card form{max-width:560px}
fieldset{border:1px solid var(--line);border-radius:8px;margin:16px 0;padding:14px;min-width:0}
legend{font-size:12px;padding:0 6px}
.checks{display:flex;gap:10px 18px;flex-wrap:wrap}
form .checks label{display:flex;align-items:center;gap:6px;margin:0;font-size:12px;overflow-wrap:anywhere;max-width:100%}
input[type=checkbox]{accent-color:var(--green);width:16px;height:16px;flex:none}
form input[type=color]{width:80px;height:44px;padding:5px}
.timing-days{display:flex;gap:6px;flex-wrap:wrap;min-height:34px}
.timing-days button{background:#edf2e8;color:var(--green);border-color:#dce6d5}
.timing-days button span{margin-left:6px}
.timing-add{display:flex;gap:10px;align-items:center;margin-top:12px}
.timing-add label{margin:0;white-space:nowrap}
form .timing-add input{width:88px;margin:0;padding:8px}
.timing>label{max-width:200px;margin-bottom:0}
.dialog-actions{gap:10px;margin-top:20px}
#manager{padding:28px}
#manager p{font-size:12px;overflow-wrap:anywhere}
.card h3,.card-tags{overflow-wrap:anywhere}
button:focus-visible,summary:focus-visible,a:focus-visible{outline:3px solid #8daf95;outline-offset:3px}
button:disabled{opacity:.4;cursor:default}
[hidden]{display:none!important}
@media(max-width:1100px){.settings-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:700px){.calendar{padding:12px}.day{min-height:58px}.calendar-toolbar>small{font-size:10px}.settings-card{padding:18px}.master-row{gap:6px}.settings-grid{gap:15px}nav button{padding:10px 4px;font-size:11px}.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.calendar-legend{font-size:10px;gap:10px}}
@media(max-width:360px){.cards{grid-template-columns:minmax(0,1fr)}.card{min-height:0}.counter{margin:14px 0}}
#form .dialog-actions{justify-content:flex-end}
#form .dialog-actions .danger{margin-right:auto}
.field{margin:14px 0;min-width:0}
.field>span{display:block;font-size:12px;margin-bottom:7px}
.date-trigger,.time-trigger{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;border:1px solid #d7dfd4;border-radius:9px;background:#fff;padding:11px;text-align:left;min-height:44px}
.date-trigger>span,.time-trigger>span{font-size:12px;overflow-wrap:anywhere}
.date-trigger svg,.time-trigger svg{flex:none}
.date-picker{position:relative;margin-top:10px;padding:16px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 4px 18px #23343a0c}
.date-picker-head{display:flex;align-items:center;justify-content:space-between;gap:6px}
.date-picker-head>button{padding:8px 10px;border:1px solid var(--line);background:#fff;border-radius:10px}
.date-picker-head>.date-month-label{display:inline-flex;align-items:center;gap:6px;border:0;font-weight:600;background:transparent;font-size:13px}
.date-picker .cal-grid{gap:2px}
.date-picker .day{min-height:46px;padding:7px 0;justify-content:center;gap:0;border-radius:10px;font-size:12px}
.date-picker .weekday{padding:10px 0}
.sunday{color:#b5666c}.saturday{color:#4c86a6}
.day.selected{color:white}
.date-picker-footer{display:flex;justify-content:space-between;gap:8px;margin-top:10px}
.date-picker-footer button{font-size:11px;padding:7px;border:1px solid var(--line);background:#fff;border-radius:8px}
.date-month-popup{position:absolute;top:58px;left:50%;transform:translateX(-50%);width:min(320px,calc(100% - 20px));padding:18px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 12px 28px #0000001f;z-index:4}
.date-month-popup:before{content:'';position:absolute;top:-8px;left:calc(50% - 8px);width:14px;height:14px;transform:rotate(45deg);background:#fff;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.time-picker{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px;margin-top:8px;box-shadow:0 8px 24px #23343a12}
.time-tabs{display:flex;padding:4px;background:#eaece8;border-radius:12px;gap:4px;margin-bottom:12px}
.time-tabs>button{flex:1;border:0;background:transparent;white-space:nowrap;padding:9px 12px;font-size:12px}
.time-tabs>button.active{background:#fff;color:var(--green);box-shadow:0 2px 5px #22333310;border-radius:8px}
.time-number-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;align-content:start}
.time-number-grid>button{min-width:0;min-height:40px;padding:8px 0;border:1px solid var(--line);background:#fff;border-radius:8px;font-variant-numeric:tabular-nums;font-size:12px}
.time-number-grid>button.active{background:var(--green);color:#fff;border-color:var(--green)}
.time-picker-footer{display:flex;gap:10px;border-top:1px solid var(--line);padding-top:12px;margin-top:12px}
.time-picker-footer>button{flex:1}
.time-picker-footer>button:not(.primary){border:1px solid var(--line);background:#fff;border-radius:8px;padding:9px 12px;font-size:11px}
.timing .time-field{margin-bottom:0}
.date-month-popup button{position:relative}
#editor{max-height:90dvh;overflow-y:auto}
#form .dialog-actions{position:sticky;bottom:-28px;background:var(--paper);padding:16px 0;margin-bottom:-12px;z-index:5;border-top:1px solid var(--line)}

@media(max-width:700px){.date-picker{padding:12px}.date-picker .day{min-height:44px}}

.timing .time-picker-footer>.primary{background:var(--green);color:white;border:0}
header{justify-content:flex-end}
.backup-status{display:block;flex-basis:100%;font-variant-numeric:tabular-nums;padding-top:4px}
@media(max-width:700px){.tools{width:100%;align-items:stretch}#tags{width:100%}#sort{align-self:flex-end;max-width:100%}}



/* 補足行の有無でカード内の位置が変わらないよう、上端と各行の高さを揃える。 */
.card{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start}
.card-top{min-height:30px;align-items:flex-start}
.card h3{line-height:1.6;min-height:3.2em}
.card .date{line-height:1.6;min-height:1.6em}
.subcount{line-height:1.6;min-height:1.6em}
.card-tags{line-height:1.6;min-height:1.6em}
#cloud-gate{position:fixed;inset:0;z-index:100;background:var(--paper);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:25px;text-align:center;gap:15px}
#cloud-gate p{max-width:500px;overflow-wrap:anywhere}
#cloud-gate button,header button{border:1px solid var(--line);background:#fff;border-radius:8px;padding:10px;font-size:11px}
header{gap:12px;flex-wrap:wrap;letter-spacing:0}header form{margin:0}#cloud-updated{margin-right:auto}
.backup-option{display:block;width:100%;text-align:left;border:1px solid var(--line);background:#fff;border-radius:8px;padding:14px;margin-top:10px;font-size:11px;overflow-wrap:anywhere}

/* アカウント操作アイコンと、その下の更新日時。 */
.header-status{display:flex;flex-direction:column;align-items:flex-end;gap:4px;max-width:100%}
.header-actions{display:flex;align-items:center;gap:4px}
.header-actions form{margin:0}
header .header-icon{display:grid;place-items:center;width:40px;height:40px;padding:8px;border:0;border-radius:50%;background:transparent;color:var(--green)}
.header-icon svg{display:block;width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
header .header-icon:hover{background:#e5ebdf}
#cloud-updated{margin:0;font-size:10px;line-height:1.5;letter-spacing:0;text-align:right}
#push-status{font-size:10px;max-width:320px;text-align:right;line-height:1.6;letter-spacing:0}
#push-status:empty{display:none}
#push-toggle[aria-pressed=true]{background:#e0ead8}
@media(max-width:700px){header .header-icon{width:36px;height:36px;padding:7px}#cloud-updated{font-size:9px}}

/* 同じ操作部品を画面幅に応じて移動し、通知状態やイベントを維持する。 */
#desktop-controls{padding:0;margin-top:12px;letter-spacing:0}
#desktop-controls .header-status{align-items:flex-start}
#desktop-controls #cloud-updated,#desktop-controls #push-status{text-align:left}
#desktop-controls #push-status{max-width:190px}
#desktop-controls .header-actions{gap:4px}
@media(min-width:701px){#mobile-header{display:none}}
@media(max-width:700px){#mobile-header{display:flex;justify-content:flex-end;width:100%}#mobile-header .header-status{align-items:flex-end}}

/* 記念日一覧の文字サイズ。 */
.card-top,.card .date,.subcount,.card-tags,.card-notification{font-size:12px}
.card h3{font-size:15px}
.counter{font-size:40px}
.counter small{font-size:10px}
.card-notification{color:var(--muted);line-height:1.6;margin-top:10px;overflow-wrap:anywhere}
#tags .tag,#sort{font-size:12px}
@media(max-width:700px){
  .card-top,.card .date,.subcount,.card-tags,.card-notification{font-size:10px}
  .card h3{font-size:13px}
  .counter{font-size:28px}
  .counter small{font-size:9px}
}

@media(max-width:700px){.brand-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:8px}.brand-row .brand{min-width:0;gap:6px;align-items:flex-start;line-height:36px}.brand-row .brand>span{line-height:36px;white-space:nowrap}.brand-row .brand small{line-height:1.4;margin-top:0}.brand-row .brand small{letter-spacing:1px}#mobile-header{min-width:0;padding:0;align-self:start}#mobile-header .header-status{min-width:0;width:100%}#mobile-header #cloud-updated,#mobile-header #push-status{max-width:100%;overflow-wrap:anywhere}aside nav{clear:both}}

/* ライブ観戦サイトと同じ、画面右下の追加ボタン。 */
.floating-add{position:fixed;right:max(20px,env(safe-area-inset-right));bottom:calc(88px + env(safe-area-inset-bottom));width:56px;height:56px;border-radius:50%;padding:0;display:flex;align-items:center;justify-content:center;box-shadow:0 5px 18px #476c5a38;z-index:6}
.floating-add svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
main{padding-bottom:160px}
@media(max-width:700px){.floating-add{right:max(18px,env(safe-area-inset-right));bottom:calc(24px + env(safe-area-inset-bottom))}}


.setting-title .small-button{display:grid;place-items:center;flex:none;width:36px;height:36px;border:0;border-radius:50%;padding:0;background:var(--green);color:#fff;font-size:26px;line-height:1}
.backup-settings{margin-top:20px}
.backup-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.backup-actions button{border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);font-size:12px;padding:10px 14px;text-align:left}
.backup-actions .backup-status{font-size:10px;color:var(--muted);line-height:1.6}

#push-status.single-line{white-space:nowrap;overflow-wrap:normal}

/* チーム構築サイトと同じ右端の長押しドラッグハンドル。 */
.master-row>.drag-handle{display:grid;place-items:center;flex:0 0 28px;width:28px;min-height:44px;padding:0;border:0;border-radius:5px;background:transparent;color:#8c9b86;cursor:grab;touch-action:none;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}
.drag-handle svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.master-row>.drag-handle:hover,.master-row>.drag-handle:focus-visible{background:#edf3e2;color:#31553a}
.master-row.is-dragging{opacity:.3;outline:1px dashed #71944d}
body.master-dragging{user-select:none;-webkit-user-select:none;overscroll-behavior:none}
.master-ghost{position:fixed;z-index:1000;box-sizing:border-box;background:#fff;border:1px solid #8ca968;border-radius:7px;box-shadow:0 8px 24px #193b3330;pointer-events:none;opacity:.97}
.master-ghost>span{flex:1;min-width:0;overflow-wrap:anywhere;font-size:12px}
.master-ghost small{display:block;color:var(--muted);font-size:10px;margin-top:4px}
.master-ghost button{flex:none;border:1px solid var(--line);background:#fff;border-radius:8px;padding:8px;font-size:11px}
.master-ghost>.drag-handle{border:0;background:transparent;color:#8c9b86;width:28px;padding:0}

/* 一覧と登録画面で共通の年選択。 */
select.calendar-year-select{display:inline-block;width:auto;max-width:100%;margin:0;padding:9px 34px 9px 12px;font-size:12px;color:var(--ink);border:1px solid var(--line);border-radius:9px;background-color:#fff}
.calendar-head #month-filter summary.calendar-month-label{display:flex;align-items:center;gap:6px;border:0;background:transparent;padding:8px 4px;font-size:19px;font-weight:600;white-space:nowrap}
.calendar-head #month-filter .month-filter-popup{left:50%;transform:translateX(-50%);text-align:left}
.date-picker>.calendar-toolbar{margin:0 0 10px}
@media(max-width:700px){.calendar-head #month-filter summary.calendar-month-label{font-size:17px}}