/* * シリウス カレンダー — デザインシステム * 方針：予定ブロック（カテゴリ色＝信号）以外は「ベース色（ネイビー系ニュートラル）＋ * キー色1色（シリウスの金）」だけで構成する。装飾（オーロラ/グレイン/グラデ文字/ * 多重アクセント）は使わず、静かでシンプルに保つ。 */ :root{ /* ---- ベース／サーフェス（明るいUI。背景は夜空、コンテンツは白カード） ---- */ --bg: #e6ecfa; /* ページ地の淡い青（日の帯の間など） */ --surface-1: #ffffff; /* カード・枠 */ --surface-2: #eef3fc; /* 一段手前・入力 */ --surface-3: #e2eaf8; /* ホバー */ --family-navy: #1f2e58; /* 家族の予定の識別色（リスト見出し背景／タイムラインのおうちアイコン） */ --ink: #131d3e; /* 主要文字 */ --muted: #445474; /* 補助 */ --faint: #6675a0; /* 3次 */ --line: rgba(30,50,110,.14); --line-2: rgba(30,50,110,.07); /* ---- キー色（唯一のアクセント：青） ---- */ --key: #1E6FD0; --key-strong: #1559ad; --key-ink: #ffffff; /* ---- カテゴリ色（予定ブロック＝信号。ここだけ多色を許す） ---- */ --c-important:#FF4D5E; /* 重要＝赤（ゆくゆくは移動と同格でヘッダー表示予定） */ --c-move: #FF7A85; --c-move-ink:#3A0D10; /* 予定ブロックのベタ塗り（白文字用）。PC・スマホ・しゅるいタグで共通に使う */ --c-move-solid: color-mix(in srgb, var(--c-move) 45%, #1a0206); /* 重要(赤)と差を付けるため濃いめ */ --c-important-solid: #E11D34; /* 重要＝真っ赤 */ --c-meal: #FFC24B; --c-school: #9FB2D6; --c-lesson: #C9A0FF; --c-homework:#FF9CC4; --c-study: #79ADFF; --c-free: #4FE0AE; --c-event: #59D2E0; --c-chore: #E0A867; --c-sleep: #95A4CC; --c-other: #7A6CB0; --radius: 16px; --radius-sm: 10px; /* 画面の横幅を活かす外枠。広い画面ほど広く使う（左右12pxの余白は確保）。 */ --shell: min(2800px, calc(100vw - 24px)); /* コンテンツは明るいUI（背景のみ夜空）。ネイティブ部品もライト表示に。 */ color-scheme: light; } *{ box-sizing:border-box; } html,body{ margin:0; padding:0; } body{ min-height:100vh; color:var(--ink); font-family:"Inter", system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", sans-serif; font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased; /* 背景だけ夜空（コンテンツがライトでも背景は暗いまま固定） */ background: radial-gradient(135% 90% at 50% -20%, #22356e 0%, #12204d 38%, #0b1330 78%) fixed; } /* 夜空の星：複数レイヤーを別々の周期・位相で瞬かせ、場所もタイミングもバラバラに見せる。 各レイヤーはタイル繰り返しの星（違うタイルサイズ＝密度）。 */ .sky{ position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; } .sky i{ position:absolute; inset:0; display:block; opacity:.9; background-repeat:repeat; } .sky i:nth-child(1){ --dur:3.1s; --delay:-0.3s; background-image: radial-gradient(1.6px 1.6px at 30px 40px, #ffffff, transparent), radial-gradient(1.2px 1.2px at 140px 100px, #dbeaff, transparent); background-size: 190px 190px, 280px 280px; } .sky i:nth-child(2){ --dur:4.7s; --delay:-1.6s; background-image: radial-gradient(1.3px 1.3px at 60px 120px, #cfe2ff, transparent), radial-gradient(1px 1px at 180px 40px, #eaf3ff, transparent); background-size: 150px 150px, 230px 230px; } .sky i:nth-child(3){ --dur:5.9s; --delay:-2.9s; background-image: radial-gradient(1.4px 1.4px at 90px 60px, #ffffff, transparent), radial-gradient(1px 1px at 30px 150px, #cfe2ff, transparent); background-size: 165px 165px, 125px 125px; } .sky i:nth-child(4){ --dur:2.6s; --delay:-0.9s; background-image: radial-gradient(1.1px 1.1px at 120px 90px, #dbeaff, transparent), radial-gradient(1px 1px at 50px 30px, #eaf3ff, transparent); background-size: 105px 105px, 90px 90px; } .sky i.bright{ --dur:6.8s; --delay:-3.7s; background-image: radial-gradient(2.6px 2.6px at 60px 80px, #ffffff 42%, rgba(255,255,255,.4) 70%, transparent), radial-gradient(2.2px 2.2px at 220px 180px, #ffffff 45%, rgba(207,226,255,.35) 74%, transparent); background-size: 360px 360px, 440px 440px; } @media (prefers-reduced-motion: no-preference){ .sky i{ animation:twinkle var(--dur,4s) ease-in-out var(--delay,0s) infinite; } } @keyframes twinkle{ 0%,100%{ opacity:.28 } 50%{ opacity:1 } } a{ color:inherit; } h1,h2,h3{ margin:0; font-weight:700; } /* 数字・時刻は tabular-nums で桁を揃える */ .tnum{ font-variant-numeric: tabular-nums; } /* ============ サーフェス（枠・カードはすべて同じソリッド） ============ */ .glass, .card{ background:var(--surface-1); border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 12px 30px -24px rgba(0,0,0,.5); } /* ============ レイアウト ============ */ .wrap{ max-width:var(--shell); margin:0 auto; padding:16px 20px 48px; } /* ============ ヘッダー ============ */ .site-header{ position:sticky; top:0; z-index:60; display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:12px 18px; margin:10px auto; max-width:var(--shell); } .brand{ display:flex; align-items:center; gap:10px; text-decoration:none; } .brand .star{ width:38px; height:38px; flex:0 0 auto; border-radius:50%; object-fit:cover; box-shadow:0 0 0 1px var(--line), 0 4px 12px -4px rgba(0,0,0,.5); } /* インラインSVGアイコン（絵文字の代替） */ .ic{ display:inline-block; vertical-align:-.16em; flex:0 0 auto; } .btn .ic{ width:16px; height:16px; } .panel h2 .ic{ color:var(--key); } .blk .duty .ic{ width:11px; height:11px; vertical-align:-.1em; margin-right:1px; } .brand .name{ font-weight:800; font-size:18px; letter-spacing:.02em; color:var(--ink); } .brand .sub{ font-size:11px; color:var(--faint); } /* つぎのいどう：ボタンに見えないよう角丸は使わず、左の太い赤バー＋淡い赤帯で 「注意を引く表示」にする（移動＝赤で色を揃える）。 */ .next-items{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-width:0; } /* しゅるいの色（--cat）でボーダー・文字を出す。cat-important→赤 / cat-move→コーラル 等 */ .next-move{ display:flex; align-items:center; gap:9px; padding:5px 14px; border-radius:0; border:1.5px solid var(--cat, var(--c-move)); background:transparent; color:var(--cat, var(--c-move)); white-space:nowrap; } .next-move .nm-ico{ display:inline-flex; color:var(--cat, var(--c-move)); } .next-move .nm-ico .ic{ width:19px; height:19px; } .next-move .nm-who{ color:var(--cat, var(--c-move)); font-weight:800; font-size:13px; letter-spacing:.02em; max-width:8em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .next-move .lbl{ color:var(--cat, var(--c-move)); font-weight:900; font-size:13px; letter-spacing:.02em; } .next-move .nm-time{ color:var(--cat, var(--c-move)); font-weight:800; font-size:19px; line-height:1; } /* 開始を過ぎている猶予中（開始〜開始+5分）は赤ぬり・白抜き文字 */ .next-move.late{ background:#E11D34; border-color:transparent; } .next-move.late .nm-ico, .next-move.late .nm-who, .next-move.late .lbl, .next-move.late .nm-time{ color:#ffffff; } .header-spacer{ flex:1 1 auto; } .weeknav{ display:flex; align-items:center; gap:6px; } .btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:38px; min-width:38px; padding:8px 14px; border-radius:999px; border:1px solid var(--line); background:var(--surface-2); color:var(--ink); font-size:14px; font-weight:600; text-decoration:none; cursor:pointer; transition:transform .15s ease, background .2s ease, border-color .2s ease; } .btn:hover{ background:var(--surface-3); transform:scale(1.04); } .btn:active{ transform:scale(.96); } /* アイコンボタンは正方形（幅=高さ）で真円に。iPhoneで縦長楕円になるのを防ぐ。 */ .btn.icon{ padding:0; width:38px; height:38px; min-width:38px; min-height:38px; flex:0 0 auto; aspect-ratio:1; } /* ロックボタン：錠アイコンの下に状態ラベル（ロック中＝「ロック」/解除中＝「編集」） */ .lock-btn{ flex-direction:column; gap:1px; width:auto; min-width:48px; height:auto; min-height:38px; padding:3px 10px; border-radius:12px; line-height:1; } .lock-btn .lock-ic{ display:none; align-items:center; justify-content:center; } .lock-btn .lock-ic .ic{ width:18px; height:18px; } .lock-btn .lock-lbl{ display:none; font-size:10px; font-weight:800; letter-spacing:.04em; } #board.locked .lock-btn .lock-closed, #board.locked .lock-btn .lock-lbl-locked{ display:inline-flex; } #board:not(.locked) .lock-btn .lock-open, #board:not(.locked) .lock-btn .lock-lbl-open{ display:inline-flex; } /* 状態を色で明示：ロック＝赤ベース / 解除＝青ベース（塗りで視認性を上げる） */ #board.locked .lock-btn{ background:#E11D34; color:#ffffff; border-color:transparent; } #board.locked .lock-btn:hover{ background:#c4152a; } #board:not(.locked) .lock-btn{ background:var(--key); color:var(--key-ink); border-color:transparent; } #board:not(.locked) .lock-btn:hover{ background:var(--key-strong); } /* PC専用：5分おきの自動更新トグル。ロックボタンと同じ縦積みの体裁。 */ .autoreload-btn{ flex-direction:column; gap:1px; width:auto; min-width:48px; height:auto; min-height:38px; padding:3px 10px; border-radius:12px; line-height:1; } .autoreload-btn .ar-ic{ display:inline-flex; align-items:center; justify-content:center; } .autoreload-btn .ar-ic .ic{ width:18px; height:18px; } .autoreload-btn .ar-lbl{ font-size:10px; font-weight:800; letter-spacing:.04em; } .autoreload-btn.on{ background:var(--key); color:var(--key-ink); border-color:transparent; } .autoreload-btn.on:hover{ background:var(--key-strong); } .autoreload-btn.on .ar-ic{ animation:ar-spin 1.2s linear; } /* ON化時にひと回転して分かりやすく */ @keyframes ar-spin{ from{ transform:rotate(0) } to{ transform:rotate(360deg) } } @media (max-width:640px){ .autoreload-btn{ display:none; } } /* スマホでは出さない（PC専用） */ /* ロック中：空きマス（追加）は無効化。予定・日付はホバー/タップで情報を見せたいので pointer-events は残し、クリック（編集・追加）と移動は JS/DnD 側で無効化する。 */ #board.locked .cells, #board.locked .dv-cells{ pointer-events:none; } #board.locked .blk, #board.locked .dv-blk{ cursor:default; } /* ロック中に予定へホバー/タップで出る情報ポップアップ（body直下・fixed配置） */ .blk-tip{ position:fixed; z-index:300; pointer-events:none; max-width:min(280px, 82vw); padding:9px 12px; border-radius:12px; background:linear-gradient(180deg, var(--surface-2), var(--surface-1)); border:1px solid color-mix(in srgb, var(--key) 32%, var(--line)); box-shadow:0 18px 44px -16px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,255,255,.05); color:var(--ink); font-size:12.5px; line-height:1.5; visibility:hidden; opacity:0; transform:translateY(4px); transition:opacity .14s ease, transform .14s ease; } .blk-tip.show{ visibility:visible; opacity:1; transform:none; pointer-events:auto; } /* 表示中は操作可（共有ボタン） */ /* 共有ボタン：単一予定をテキスト共有（Web Share→無ければコピー）。区切り線付きの独立行で情報から離す */ .blk-tip .bt-actions{ display:flex; margin-top:10px; padding-top:9px; border-top:1px solid var(--line-2); } .blk-tip .bt-share{ display:inline-flex; align-items:center; justify-content:center; gap:5px; padding:5px 12px; border-radius:999px; cursor:pointer; font-size:12px; font-weight:800; color:var(--key-ink); background:var(--key); border:1px solid transparent; -webkit-tap-highlight-color:transparent; } .blk-tip .bt-share:hover{ background:var(--key-strong); } .blk-tip .bt-share .ic{ width:13px; height:13px; } .blk-tip .bt-title{ display:block; font-weight:800; font-size:13.5px; } .blk-tip .bt-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; margin-top:4px; color:var(--muted); } .blk-tip .bt-cat{ display:inline-flex; align-items:center; gap:4px; font-weight:700; color:var(--ink); } .blk-tip .bt-dot{ width:9px; height:9px; border-radius:50%; background:var(--cat, var(--key)); flex:0 0 auto; } .blk-tip .bt-repeat{ display:inline-flex; align-items:center; gap:4px; margin-top:4px; font-size:11.5px; font-weight:700; color:var(--key); } .blk-tip .bt-repeat .ic{ width:12px; height:12px; } .blk-tip .bt-note{ display:block; margin-top:6px; padding-top:6px; border-top:1px solid var(--line-2); color:var(--ink); font-size:12px; white-space:pre-wrap; word-break:break-word; } @media (prefers-reduced-motion: reduce){ .blk-tip{ transition:none; transform:none; } } .btn.primary{ background:var(--key); color:var(--key-ink); border-color:transparent; font-weight:700; } .btn.primary:hover{ background:var(--key-strong); } .btn.star{ background:transparent; color:var(--key); border-color:color-mix(in srgb, var(--key) 45%, var(--line)); } .btn.ghost{ background:transparent; } .btn.danger{ background:transparent; color:var(--c-move); border-color:color-mix(in srgb, var(--c-move) 40%, var(--line)); } .btn:focus-visible{ outline:2px solid var(--key); outline-offset:2px; } @media (pointer:coarse){ .btn{ min-height:44px; } .btn.icon{ width:44px; height:44px; min-width:44px; min-height:44px; } /* タッチ時も正方形を維持 */ } /* ---- スマホ：ヘッダーを1行に収め、スクロール追従で固定 ---- */ @media (max-width:640px){ .site-header{ position:sticky; top:0; z-index:60; gap:8px 10px; padding:8px 14px; margin:0; max-width:none; width:100%; border-radius:0; border-left:none; border-right:none; flex-wrap:nowrap; } .brand .sub{ display:none; } /* サブ文言は省略 */ .brand .star{ width:34px; height:34px; } /* ブランド名「シリウス／カレンダー」を2行に */ .brand .name{ font-size:14px; line-height:1.15; } .brand .name .n1, .brand .name .n2{ display:block; } /* 並び：ロゴ＋名前 → つぎの移動／重要（すぐ右） … 設定（右端） */ .brand{ order:0; flex:0 0 auto; } .next-items{ order:1; flex:0 1 auto; min-width:0; gap:6px; } /* スマホは省略せず、ラベルの下に時刻を折り返して2段表示にする */ .next-move{ min-width:0; font-size:12px; padding:4px 10px; flex-wrap:wrap; column-gap:6px; row-gap:1px; align-items:center; white-space:normal; } .next-move .lbl{ display:none; } /* スマホは「移動・重要」文字を省く（アイコン＋色で判別） */ .next-move .nm-time{ font-size:16px; flex-basis:100%; } .site-header > .btn.icon, .site-header > .lock-btn{ order:2; } /* 右端グループ（ロック・設定） */ .site-header > .view-toggle{ margin-left:auto; } /* 右端グループ（切替・ロック・設定）を右へ寄せる先頭 */ .site-header > .lock-btn .lock-lbl{ font-size:8px; } /* スマホは状態ラベルを小さく */ .header-spacer{ display:none; } .weeknav{ display:none; } } /* ============ いま・つぎ ヒーロー ============ */ .hero{ display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; padding:16px 18px; margin:0 auto 16px; max-width:var(--shell); } @media (max-width:800px){ .hero{ grid-template-columns:1fr; } } .hero .cell{ display:flex; flex-direction:column; gap:6px; } .hero .cell .k{ font-size:11px; letter-spacing:.08em; color:var(--faint); text-transform:uppercase; } .hero .cell .v{ font-size:16px; font-weight:700; } .hero .cell .v .time{ font-size:22px; } .hero .cell.next .v{ color:var(--key); } .hero .pill{ display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--muted); } .hero .muted{ color:var(--faint); } .hero .countdown{ font-size:26px; font-weight:800; color:var(--key); } /* ============ 表示フィルタ（曜日・メンバー） ============ */ /* チップ（曜日・カレンダーの選択ボタン。パネル内で使用） */ .chip{ display:inline-flex; align-items:center; gap:5px; min-height:36px; padding:5px 13px; border-radius:999px; border:1px solid var(--line); background:var(--surface-2); color:var(--ink); font-size:13px; font-weight:600; cursor:pointer; transition:background .15s ease; } .chip:hover{ background:var(--surface-3); } .chip .chip-dot{ width:10px; height:10px; border-radius:50%; background:var(--mc, var(--key)); flex:0 0 auto; } /* 選択中（押した）＝絞り込み対象。曜日はキー色、メンバーは本人の色で強調 */ .chip.on{ background:color-mix(in srgb, var(--mc, var(--key)) 22%, var(--surface-2)); border-color:color-mix(in srgb, var(--mc, var(--key)) 60%, transparent); color:var(--ink); } @media (pointer:coarse){ .chip{ min-height:40px; } } /* 左上「絞り込み」ボタン（時間軸ヘッダーの角セル内） */ /* ヘッダー（青地）に馴染む半透明のピル型ボタン。ボタンと分かる背景＋枠を持たせる */ .corner-filter{ display:inline-flex; align-items:center; gap:5px; padding:6px 12px; border-radius:999px; cursor:pointer; color:#eaf1ff; font-size:12.5px; font-weight:700; background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.32); box-shadow:0 1px 2px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.14); transition:background .15s ease, border-color .15s ease, transform .1s ease; } .corner-filter .ic{ width:15px; height:15px; } .corner-filter:hover{ background:rgba(255,255,255,.27); border-color:rgba(255,255,255,.5); color:#ffffff; } .corner-filter:active{ transform:translateY(1px); } /* 絞り込み中：金色で塗って状態を明示（数バッジ #FFCF6B と統一） */ .corner-filter.active{ background:#FFCF6B; border-color:transparent; color:#2a1c00; box-shadow:0 1px 3px rgba(0,0,0,.25); } .corner-filter.active .ic{ color:#2a1c00; } .cf-label{ white-space:nowrap; } .fcount:not(:empty){ background:#FFCF6B; color:#2a1c00; border-radius:999px; padding:0 6px; min-width:18px; text-align:center; font-size:11px; font-weight:800; font-variant-numeric:tabular-nums; } /* 絞り込みパネル（position:fixed。JSでボタン直下に配置） */ .filter-pop{ position:fixed; z-index:120; width:260px; max-width:calc(100vw - 16px); max-height:70vh; overflow:auto; background:var(--surface-1); border:1px solid var(--line); border-radius:16px; padding:16px; box-shadow:0 28px 60px -20px rgba(0,0,0,.65); } .filter-pop[hidden]{ display:none; } .fp-sec{ margin-bottom:14px; } .fp-head{ font-size:12px; font-weight:800; color:var(--faint); margin-bottom:8px; } .fp-chips{ display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; } .fp-chips.col{ grid-template-columns:1fr; } .fp-chips .chip.day{ justify-content:center; padding:6px 0; } .fp-today{ width:100%; justify-content:center; margin-top:8px; } .fp-foot{ display:flex; gap:8px; padding-top:12px; border-top:1px solid var(--line); } .fp-foot .btn{ flex:1; } /* ============ 週タイムライン ============ */ .week-card{ padding:0; overflow:hidden; max-width:var(--shell); margin:0 auto; background:transparent; } /* 日の間の余白は透過させ、隙間から夜空（星）を見せる。各行は不透明 */ .week-scroll{ overflow:auto; max-height:84vh; } /* トラックは利用可能な幅いっぱいに伸縮（flex-grow）し、PCでは 6:00〜22:00 全体が 一度に見えるようにする。--track-min は「これ以上は詰めない」下限で、狭い画面では この幅で横スクロールになる。左の固定列＝日付(--date-w) + メンバー名(--mlabel-w)。 */ :root{ --date-w:58px; --mlabel-w:86px; --label-w:144px; --track-min:1120px; } /* --- 時間軸ヘッダー（sticky top） --- */ .axis-row{ position:sticky; top:0; z-index:30; display:flex; background:var(--surface-1); border-bottom:1px solid var(--line); } .axis-corner{ position:sticky; left:0; z-index:31; flex:0 0 var(--label-w); width:var(--label-w); background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 60%), #3f5cab; border-right:1px solid rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:#eaf1ff; } /* 時間ヘッダー：ブルーアワーの空。あさ(左)＝明るい青 → ひる＝青 → 夕暮れの紫 → よる(右)＝深い夜、へ移ろう。上部にわずかな光沢。ライト/ダーク共通の濃色ヘッダー。 */ .axis-track{ position:relative; flex:1 1 auto; min-width:var(--track-min); color:#eaf1ff; /* 横＝時間の移ろい、縦＝空（上ほど青い）で本物の空っぽく */ background: linear-gradient(180deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 22%), linear-gradient(180deg, rgba(46,98,205,.68) 0%, rgba(46,98,205,.24) 46%, rgba(46,98,205,0) 82%), linear-gradient(90deg, #42579b 0%, #5378c0 42%, #6f6bb2 59%, #a35c78 69%, #5a3a72 83%, #0e1130 100%); } .axis-bands{ display:flex; height:26px; font-size:12px; padding-top:6px; } .axis-bands .band{ display:flex; align-items:center; padding-left:8px; letter-spacing:.18em; color:#ffffff; font-weight:800; text-shadow:0 1px 3px rgba(0,0,0,.55); } .axis-bands .band.am{ flex:0 0 37.5%; } .axis-bands .band.pm{ flex:0 0 37.5%; } .axis-bands .band.night{ flex:1 1 auto; } .axis-hours{ display:flex; height:34px; } .axis-hours .h{ flex:1 1 0; position:relative; font-size:15px; font-weight:700; color:#eaf1ff; } .axis-hours .h > span{ position:absolute; left:6px; top:8px; } /* :30 は正時ラベルと被らないよう、コマ中央（30分グリッド位置）に置く */ .axis-hours .h .half{ position:absolute; left:50%; top:10px; font-size:12px; font-weight:600; color:#cdd9f7; } .axis-hours .h:not(:first-child){ border-left:1px solid rgba(255,255,255,.14); } /* スマホなど狭い幅では :30 ラベルは省略（正時のみ表示） */ @media (max-width:700px){ .axis-hours .h .half{ display:none; } } /* --- 各曜日の行 --- */ /* 日と日の間に余白を入れて、1日ぶんがまとまって見えるようにする */ .day-row{ display:flex; margin-bottom:10px; } .day-row:first-child{ margin-top:8px; } .day-row:last-child{ margin-bottom:0; } /* 左の固定列①：日付（行の高さいっぱいで縦中央） */ .day-date{ position:sticky; left:0; z-index:21; flex:0 0 var(--date-w); width:var(--date-w); background:var(--surface-1); border-right:1px solid var(--line); padding:6px 4px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; text-align:center; text-decoration:none; color:inherit; cursor:pointer; } .day-date:hover{ filter:brightness(1.14); } .day-date .dow{ font-size:12px; color:var(--faint); font-weight:700; } .day-date .dom{ font-size:15px; font-weight:800; line-height:1.1; } .day-date .day-edit-ic{ display:inline-flex; align-items:center; color:var(--faint); opacity:.7; } .day-date .day-edit-ic .ic{ width:11px; height:11px; } .today-badge{ font-size:9px; padding:1px 6px; border-radius:999px; background:var(--key); color:var(--key-ink); font-weight:700; } .holiday-badge{ font-size:9px; padding:1px 6px; border-radius:999px; background:var(--c-move); color:#ffffff; font-weight:800; } /* 国民の祝日名（元日 等）。日曜/祝日と同じ赤のテキストで示す */ .holiday-name{ font-size:11px; font-weight:800; color:var(--c-move); letter-spacing:.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; } .dv-year .holiday-name{ font-size:13px; } .day-row.today .day-date{ background:color-mix(in srgb, var(--key) 12%, var(--surface-1)); } .day-row.today .day-date .dom{ color:var(--key); } /* 日付セルのメモ（狭い列なので小さく・数行でクランプ） */ .day-date .day-memo{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; margin-top:2px; max-width:100%; font-size:10px; line-height:1.3; font-weight:600; color:var(--key); word-break:break-word; } .day-date .day-memo .ic{ width:10px; height:10px; margin-right:2px; vertical-align:-.1em; } /* 日付ホバーで出る、テーマに合わせた吹き出しポップオーバー（メモ全文） */ .day-date.has-memo{ position:sticky; } /* 吹き出しの基準（既に sticky だが明示） */ .day-row:has(.day-date:hover){ z-index:70; } /* ホバー行を後続行より前面へ */ .day-memo-pop{ position:absolute; left:calc(100% + 12px); top:50%; transform:translateY(-50%) scale(.96); transform-origin:left center; z-index:80; width:240px; max-width:52vw; padding:11px 13px 12px; border-radius:14px; text-align:left; pointer-events:none; background:linear-gradient(180deg, var(--surface-2), var(--surface-1)); border:1px solid color-mix(in srgb, var(--key) 34%, var(--line)); box-shadow:0 22px 50px -18px rgba(0,0,0,.78), inset 0 1px 0 rgba(255,255,255,.06); opacity:0; visibility:hidden; transition:opacity .16s ease, transform .16s ease; } .day-date:hover .day-memo-pop, .day-date:focus-visible .day-memo-pop{ opacity:1; visibility:visible; transform:translateY(-50%) scale(1); } .day-memo-pop::before{ /* 左向きの三角 */ content:""; position:absolute; left:-6px; top:50%; transform:translateY(-50%) rotate(45deg); width:12px; height:12px; background:var(--surface-2); border-left:1px solid color-mix(in srgb, var(--key) 34%, var(--line)); border-bottom:1px solid color-mix(in srgb, var(--key) 34%, var(--line)); } .day-memo-pop .dmp-head{ display:flex; align-items:center; gap:5px; font-size:10px; font-weight:800; letter-spacing:.08em; color:var(--key); text-transform:uppercase; margin-bottom:6px; } .day-memo-pop .dmp-head .ic{ width:12px; height:12px; } .day-memo-pop .dmp-body{ display:block; color:var(--ink); font-size:12.5px; font-weight:600; line-height:1.6; white-space:pre-wrap; word-break:break-word; } @media (prefers-reduced-motion: reduce){ .day-memo-pop{ transition:none; transform:translateY(-50%); } .day-date:hover .day-memo-pop{ transform:translateY(-50%); } } /* 左の固定列②：メンバー名（各レーンと同じ高さで並べる＝誰の予定か一目で分かる） */ .lane-labels{ position:sticky; left:var(--date-w); z-index:20; flex:0 0 var(--mlabel-w); width:var(--mlabel-w); background:var(--surface-1); border-right:1px solid var(--line); display:flex; flex-direction:column; } .mlabel{ display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:2px; padding:2px 8px; overflow:hidden; border-top:1px solid var(--line-2); font-size:12.5px; font-weight:700; background:color-mix(in srgb, var(--mc) 8%, transparent); box-shadow:inset 4px 0 0 var(--mc); } /* 左にメンバー色のバー */ .mlabel:first-child{ border-top:none; } .ml-head{ display:flex; align-items:center; gap:6px; max-width:100%; } .ml-head .ml-home{ display:inline-flex; align-items:center; flex:0 0 auto; color:var(--family-navy); } /* 家族レーンは丸ポッチではなくおうちアイコン（リスト見出しと同じ濃いnavy） */ .mdot{ width:11px; height:11px; border-radius:50%; flex:0 0 auto; background:var(--mc); box-shadow:0 0 0 1px rgba(0,0,0,.15) inset; } .mname{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* 終日は楕円ピルで表示（週=メンバー名の下 / 日=列見出しの下）。カテゴリ色の淡い背景 */ .ml-allday, .dv-allday{ display:inline-flex; align-items:center; max-width:100%; text-decoration:none; padding:1px 9px; border-radius:999px; background:color-mix(in srgb, var(--cat) 20%, var(--surface-2)); color:var(--ink); font-size:10.5px; font-weight:700; line-height:1.5; } .ml-allday .ad-t, .dv-allday .ad-t{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; } /* 土日を分かりやすく（日=赤 / 土=青、行にも淡い色） */ .day-row.sun{ background:color-mix(in srgb, var(--c-move) 7%, transparent); } .day-row.sat{ background:color-mix(in srgb, var(--c-study) 7%, transparent); } .day-row.sun .day-date, .day-row.sun .lane-labels{ background:color-mix(in srgb, var(--c-move) 9%, var(--surface-1)); } .day-row.sat .day-date, .day-row.sat .lane-labels{ background:color-mix(in srgb, var(--c-study) 9%, var(--surface-1)); } .day-row.sun .dow, .day-row.sun .dom{ color:var(--c-move); } .day-row.sat .dow, .day-row.sat .dom{ color:var(--c-study); } /* とくべつな日：金色で強調 */ .day-row.special{ background:color-mix(in srgb, #FFC24B 8%, transparent); } .day-row.special .day-date, .day-row.special .lane-labels{ background:color-mix(in srgb, #FFC24B 12%, var(--surface-1)); } .special-badge{ display:inline-flex; align-items:center; justify-content:center; padding:2px 7px; border-radius:999px; background:#E8981A; color:#ffffff; } .special-badge .ic{ width:13px; height:13px; } /* 今日を強調（土日よりも優先）。行全体をキー色の枠で囲み、ほんのり発光させる。 時間帯そのものの背景ハイライトは行わず、track 内で「これから」だけを光らせる。 */ .day-row.today{ position:relative; z-index:1; border:1.5px solid color-mix(in srgb, var(--key) 60%, transparent); box-shadow:0 0 18px -3px color-mix(in srgb, var(--key) 55%, transparent), inset 0 0 24px -10px color-mix(in srgb, var(--key) 60%, transparent); } /* 過去（過ぎた日・今日の過ぎた時間）を暗くする。左端(6:00)から right で範囲指定。 */ .past-hl{ position:absolute; top:0; bottom:0; left:0; z-index:0; pointer-events:none; background:rgba(0,0,0,.20); } .day-row.today .day-date, .day-row.today .lane-labels{ background:color-mix(in srgb, var(--key) 17%, var(--surface-1)); } .day-row.today .day-date{ box-shadow:inset 4px 0 0 var(--key); } .day-row.today .dow, .day-row.today .dom{ color:var(--key); } .day-row.today .today-badge{ box-shadow:0 0 8px -1px color-mix(in srgb, var(--key) 70%, transparent); } /* トラック（時間×レーン）— 時間帯の明暗はニュートラルな濃淡のみ */ .track{ position:relative; flex:1 1 auto; min-width:var(--track-min); /* 時間帯の明暗は付けずフラット（過去だけを .past-hl で暗くする） */ background:var(--surface-1); } /* グリッド線（30分=淡い / 毎正時=強め）。表示時間帯（--span-hours）に連動 */ .track::before{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0; --hpct: calc(100% / var(--span-hours, 16)); /* 毎時の間隔 */ --hhpct: calc(100% / var(--span-hours, 16) / 2); /* 30分の間隔 */ background: repeating-linear-gradient(90deg, transparent, transparent calc(var(--hpct) - 1px), var(--line) calc(var(--hpct) - 1px), var(--line) var(--hpct)), repeating-linear-gradient(90deg, transparent, transparent calc(var(--hhpct) - 1px), var(--line-2) calc(var(--hhpct) - 1px), var(--line-2) var(--hhpct)); } /* レーン（--mc = メンバー色。誰の行か色で分かるよう薄く色付け） */ .lane{ position:relative; border-top:1px solid var(--line-2); background:color-mix(in srgb, var(--mc) 5%, transparent); } .lane:first-child{ border-top:none; } .lane.child{ background:color-mix(in srgb, var(--mc) 8%, transparent); } /* 主役は少しだけ濃く */ /* 追加用セル（30分×レーン）= 素直な DOM のクリック対象 */ .cells{ position:absolute; inset:0; display:grid; grid-template-columns:repeat(var(--half-cells, 32), 1fr); z-index:1; } .cell{ display:block; text-decoration:none; } .cell:hover{ background:color-mix(in srgb, var(--key) 14%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--key) 55%, transparent); } .cell:hover::after{ content:"＋"; display:flex; align-items:center; justify-content:center; height:100%; color:var(--key); font-weight:700; font-size:14px; } /* ============ 予定ブロック（ここだけカテゴリ色＝信号） ============ */ .blocks{ position:absolute; inset:0; z-index:2; pointer-events:none; } .blk{ position:absolute; top:3px; bottom:3px; overflow:hidden; pointer-events:auto; text-decoration:none; display:flex; flex-direction:column; justify-content:center; gap:1px; padding:4px 8px 4px 10px; border-radius:8px; background:color-mix(in srgb, var(--cat) 16%, var(--surface-2)); border:1px solid var(--line); border-left:4px solid var(--cat); color:var(--ink); font-size:12.5px; line-height:1.25; transition:transform .15s ease, filter .2s ease; min-width:0; } .blk{ cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none; -webkit-user-drag:none; } .blk:hover{ transform:translateY(-1px); filter:brightness(1.08); z-index:5; } .blk.dragging{ opacity:.35; pointer-events:none; } /* 下のレーンを判定できるよう透過 */ .blk.resizing{ z-index:6; } /* 右端の終了時刻リサイズ用ハンドル */ .blk-resize{ position:absolute; top:0; right:0; width:11px; height:100%; z-index:3; cursor:ew-resize; } .blk-resize::after{ content:""; position:absolute; top:50%; right:3px; transform:translateY(-50%); width:2px; height:40%; border-radius:2px; background:color-mix(in srgb, currentColor 45%, transparent); } /* ドロップ先の「コマ（着地する範囲）」だけを示すプレビュー */ .drop-preview{ position:absolute; top:3px; bottom:3px; z-index:1; pointer-events:none; border-radius:8px; border:2px dashed color-mix(in srgb, var(--key) 85%, transparent); background:color-mix(in srgb, var(--key) 18%, transparent); } /* ドラッグ中：掴んだブロックの複製がカーソルに追従する */ .blk-ghost{ opacity:.95; transform:none !important; box-shadow:0 18px 38px -10px rgba(0,0,0,.65); outline:2px solid color-mix(in srgb, var(--key) 70%, transparent); } /* リサイズ時の時刻ツールチップ */ .dnd-tip{ position:fixed; z-index:400; pointer-events:none; white-space:nowrap; background:var(--key); color:var(--key-ink); font-weight:800; border-radius:6px; box-shadow:0 12px 30px -8px rgba(0,0,0,.6); padding:3px 8px; font-size:12px; font-variant-numeric:tabular-nums; } .blk .t{ font-weight:700; display:flex; align-items:center; gap:2px; overflow:hidden; } .blk .ev-name{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; } /* 日マタギの継続矢印（‹ ›）はタイトルの切り詰め対象外にして消えないようにする */ .ev-cont{ flex:0 0 auto; opacity:.6; font-weight:700; } .blk .meta{ color:var(--muted); font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .cat-important{ --cat:var(--c-important); } .cat-move { --cat:var(--c-move); } .cat-meal { --cat:var(--c-meal); } .cat-school { --cat:var(--c-school); } .cat-lesson { --cat:var(--c-lesson); } .cat-homework{ --cat:var(--c-homework); } .cat-study { --cat:var(--c-study); } .cat-free { --cat:var(--c-free); } .cat-event { --cat:var(--c-event); } .cat-chore { --cat:var(--c-chore); } .cat-sleep { --cat:var(--c-sleep); } .cat-other { --cat:var(--c-other); } /* 移動＝送迎・重要は濃い色のソリッド塗り＋白抜き文字で視認性を上げる */ .blk.cat-move, .blk.cat-important{ color:#fff; border-color:rgba(0,0,0,.28); border-left-color:rgba(0,0,0,.32); } .blk.cat-move{ background:var(--c-move-solid); } .blk.cat-important{ background:var(--c-important-solid); } .blk.cat-move .meta, .blk.cat-important .meta{ color:rgba(255,255,255,.82); } /* 繰り返し予定は薄い斜めストライプ背景で表す（アイコンを使わないのでタイトルはフル幅） */ .blk.rep{ background-image:repeating-linear-gradient(-45deg, color-mix(in srgb, currentColor 7%, transparent) 0 2px, transparent 2px 9px); } /* 家族の予定：どのしゅるいでも「家」バッジ＋左の破線で見分けられるようにする */ .fam-badge{ display:inline-flex; align-items:center; vertical-align:-.15em; margin-right:2px; opacity:.85; } .fam-badge .ic{ width:11px; height:11px; } .note-badge{ display:inline-flex; align-items:center; vertical-align:-.15em; margin-right:2px; opacity:.7; } .note-badge .ic{ width:11px; height:11px; } .blk.fam, .dv-blk.fam{ box-shadow:inset 3px 0 0 color-mix(in srgb, currentColor 45%, transparent); } .ml-allday.fam, .dv-allday.fam{ border-left:3px solid color-mix(in srgb, currentColor 45%, transparent); } /* 状態 */ .blk.is-done{ opacity:.55; filter:grayscale(.85); } .blk.is-now{ box-shadow:0 0 0 2px color-mix(in srgb, var(--key) 75%, transparent), 0 0 14px -2px color-mix(in srgb, var(--key) 60%, transparent); animation:nowpulse 2.4s ease-in-out infinite; } @keyframes nowpulse{ 0%,100%{ box-shadow:0 0 0 2px color-mix(in srgb, var(--key) 60%, transparent), 0 0 10px -2px color-mix(in srgb, var(--key) 45%, transparent); } 50%{ box-shadow:0 0 0 2px color-mix(in srgb, var(--key) 90%, transparent), 0 0 18px 0 color-mix(in srgb, var(--key) 60%, transparent); } } /* これから（未来）：淡くせず通常発色のまま、点線ボーダーだけで区別する */ .blk.is-plan{ border-style:dashed; } .blk.is-plan.today-plan .t{ font-weight:800; } .blk.is-extra{ border-style:dashed; } .blk.is-extra .t::before{ content:"＋"; color:var(--key); margin-right:1px; } /* 現在時刻ライン（今日の列のみ） */ .nowline{ position:absolute; top:0; bottom:0; width:2px; z-index:4; pointer-events:none; background:var(--key); box-shadow:0 0 10px 1px color-mix(in srgb, var(--key) 70%, transparent); } .nowline .tag{ position:absolute; top:2px; left:4px; font-size:9px; font-weight:800; color:var(--key-ink); background:var(--key); padding:1px 5px; border-radius:999px; white-space:nowrap; } @media (prefers-reduced-motion: reduce){ .blk.is-now{ animation:none; } *{ transition:none !important; } } /* ============ スマホ：1日の縦タイムライン（day-view） ============ */ .day-view{ display:none; } /* 既定は非表示。幅≤640pxのときだけ表示 */ .dv-nav{ position:relative; display:flex; align-items:center; gap:6px; padding:10px 12px 10px 46px; max-width:var(--shell); margin:0 auto; flex-wrap:wrap; } .dv-left{ display:flex; align-items:center; gap:6px; } .dv-right{ display:flex; align-items:center; gap:6px; margin-left:auto; } /* 日付エリアの左右端に配置する、やや縦長の前日/翌日ナビ */ .dv-daynav{ position:absolute; top:6px; bottom:6px; width:34px; z-index:2; display:flex; align-items:center; justify-content:center; color:#eef4ff; text-decoration:none; border-radius:10px; background:rgba(255,255,255,.07); -webkit-tap-highlight-color:transparent; transition:background .15s ease; } .dv-daynav.prev{ left:6px; } /* 翌日ナビは絶対配置をやめ、日付ブロックのすぐ右横（フロー内）に置く */ .dv-left .dv-daynav.next{ position:static; width:32px; align-self:stretch; } .dv-daynav:active{ background:rgba(255,255,255,.18); } @media (hover:hover){ .dv-daynav:hover{ background:rgba(255,255,255,.13); } } .dv-daynav .ic{ width:22px; height:22px; } .dv-nav .btn.icon{ width:38px; height:38px; min-width:38px; min-height:38px; } /* 「今日」ボタンは他のボタンと同じテイスト（明るいサーフェス）に。夜空パネル上で見やすく */ .dv-nav .btn.star{ min-height:38px; padding:6px 13px; background:var(--surface-2); color:var(--ink); border-color:var(--line); font-weight:700; } .dv-nav .btn.star:hover{ background:var(--surface-3); } .dv-datewrap{ display:flex; flex-direction:column; gap:1px; text-decoration:none; color:#eef4ff; cursor:pointer; /* 夜空の上なので明るい文字 */ padding:4px 8px; margin:-4px -4px; border-radius:10px; -webkit-tap-highlight-color:transparent; transition:background .15s ease; } .dv-datewrap:active{ background:rgba(255,255,255,.14); } @media (hover:hover){ .dv-datewrap:hover{ background:rgba(255,255,255,.12); } } .dv-datewrap .dv-edit-ic{ display:inline-flex; align-items:center; color:#aebbe0; opacity:.8; } .dv-datewrap .dv-edit-ic .ic{ width:13px; height:13px; } .dv-year{ display:flex; align-items:center; gap:6px; } /* 1行目：年＋バッジ */ .dv-year .dv-yy{ font-size:12px; font-weight:700; color:#aebbe0; } .dv-datetext{ display:inline-flex; align-items:center; gap:7px; font-weight:800; font-size:18px; } /* 2行目：月/日 曜 */ .dv-datetext .dv-dow{ font-weight:800; } /* 日表示の「今日」等バッジは大きめに（PCの小さいカレンダーとは別に見やすく） */ .dv-year .today-badge{ font-size:12px; padding:3px 10px; } .dv-year .holiday-badge{ font-size:12px; padding:3px 10px; } .dv-year .special-badge{ padding:3px 9px; } .dv-year .special-badge .ic{ width:15px; height:15px; } .day-view.sun .dv-dow, .day-view.sun .dv-datetext{ color:var(--c-move); } .day-view.sat .dv-dow, .day-view.sat .dv-datetext{ color:var(--c-study); } /* スマホ日表示：その日のメモ（日付ナビの下に全幅で表示） */ .dv-memo{ display:flex; align-items:flex-start; gap:7px; margin:0 12px 10px; padding:8px 12px; border-radius:12px; text-decoration:none; color:#ffffff; font-size:13px; line-height:1.5; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.24); } .dv-memo .dv-memo-ic{ display:inline-flex; flex:0 0 auto; margin-top:1px; color:#9ecbff; } .dv-memo .dv-memo-tx{ white-space:pre-wrap; word-break:break-word; font-weight:600; } /* 「カレンダー」ボタン：ラベル上に透明の date input を重ねてタップで日付ピッカーを開く */ .dv-cal{ position:relative; overflow:hidden; } /* 透明の date input がボタン全体を覆い、どこをタップしても（＝入力を直接タップ） ネイティブの日付ピッカーが開く。全モバイルで確実に動く方式。 */ .dv-cal input[type=date]{ position:absolute; inset:0; width:100%; height:100%; min-height:0; opacity:0; border:none; padding:0; cursor:pointer; z-index:1; } /* 日付ナビ＋見出し行はまとめて上部固定。アプリのヘッダー高さ分だけ下げて段積みにする。 日付/メモ領域は夜空（暗い地＋星）にして星空を見せる（列見出し .dv-head は白のまま）。 */ .dv-sticky{ position:sticky; top:var(--app-header-h, 0px); z-index:40; overflow:hidden; box-shadow:0 6px 14px -10px rgba(0,0,0,.5); background:linear-gradient(180deg, #1b2b5c 0%, #14224d 100%); } /* 日付/メモ領域の星（2層をタイルで密に敷き、別々にまたたく）。文字より背面(z:0)、白い列見出しはz:1で覆う */ .dv-sticky::before, .dv-sticky::after, .mv-cal::before, .mv-cal::after, .mv-agenda::before, .mv-agenda::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background-repeat:repeat; opacity:.9; } .dv-sticky::before, .mv-cal::before, .mv-agenda::before{ background-image: radial-gradient(1.5px 1.5px at 20px 20px, #ffffff, transparent), radial-gradient(1.1px 1.1px at 70px 50px, #dbeaff, transparent), radial-gradient(1px 1px at 40px 80px, #cfe2ff, transparent); background-size: 110px 110px, 150px 150px, 90px 90px; } .dv-sticky::after, .mv-cal::after, .mv-agenda::after{ background-image: radial-gradient(1.3px 1.3px at 90px 30px, #ffffff, transparent), radial-gradient(1px 1px at 30px 60px, #eaf3ff, transparent), radial-gradient(1px 1px at 120px 100px, #cfe2ff, transparent); background-size: 130px 130px, 100px 100px, 170px 170px; } @media (prefers-reduced-motion: no-preference){ .dv-sticky::before, .mv-cal::before, .mv-agenda::before{ animation:twinkle 3.4s ease-in-out -0.5s infinite; } .dv-sticky::after, .mv-cal::after, .mv-agenda::after{ animation:twinkle 5.1s ease-in-out -2.2s infinite; } } /* 星より前面に出す（暗い星空の上でも読める。白い列見出しは星を覆う） */ .dv-nav, .dv-memo, .dv-head, .mv-monthnav, .mv-dow, .mv-grid, .mv-agenda > *{ position:relative; z-index:1; } /* 列ヘッダー（メンバー名） */ .dv-head{ display:flex; background:var(--surface-1); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .dv-corner{ flex:0 0 46px; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:#eaf1ff; border-right:1px solid rgba(255,255,255,.12); background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 60%), #3f5cab; } .dv-colhead{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:6px 4px; font-size:12.5px; font-weight:700; border-left:1px solid var(--line-2); box-shadow:inset 0 -3px 0 var(--mc); } .dv-colhead-name{ display:flex; align-items:center; justify-content:center; gap:5px; max-width:100%; } .dv-colhead .mdot{ width:9px; height:9px; border-radius:50%; background:var(--mc); flex:0 0 auto; } .dv-colhead .dv-home{ display:inline-flex; align-items:center; flex:0 0 auto; color:var(--family-navy); } /* 家族列は丸ポッチではなくおうちアイコン（リスト見出しと同じ濃いnavy） */ .dv-colhead .mname{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* スマホ日ビュー：終日ラベルは押しやすいよう大きめのピルに */ .dv-colhead .dv-allday{ width:100%; justify-content:center; font-size:12px; padding:4px 10px; border-radius:999px; min-height:26px; background:color-mix(in srgb, var(--cat) 15%, var(--surface-2)); } .dv-colhead .dv-allday .ad-t{ font-size:12px; font-weight:700; } .dv-colhead.child{ background:color-mix(in srgb, var(--mc) 10%, transparent); } /* 本体（時間ガター＋メンバー列） */ /* タイムライン本文の下地を surface-1 に（見出し行・PCのトラックと同じ明るさに揃える） */ .dv-body{ position:relative; display:flex; background:var(--surface-1); } /* 縦の時間軸：PC版の横グラデーションを縦にしたもの（上=朝の明るい青→下=夜の濃紺） */ .dv-times{ position:relative; flex:0 0 46px; border-right:1px solid rgba(255,255,255,.12); color:#eaf1ff; /* 縦＝時間の移ろい、横＝空（左ほど青い）で本物の空っぽく */ background: linear-gradient(90deg, rgba(46,98,205,.62) 0%, rgba(46,98,205,.20) 52%, rgba(46,98,205,0) 100%), linear-gradient(180deg, #42579b 0%, #5378c0 42%, #6f6bb2 59%, #a35c78 69%, #5a3a72 83%, #0e1130 100%); } .dv-hr{ position:absolute; left:5px; font-size:11px; font-weight:600; color:#eaf1ff; transform:translateY(-6px); text-shadow:0 1px 2px rgba(0,0,0,.5); } /* 端の時刻（6:00＝上端 / 22:00＝下端）が見切れないよう内側に収める */ .dv-hr:first-child{ transform:none; top:3px; } .dv-hr:last-child{ transform:translateY(-100%); margin-top:-2px; } .dv-col{ position:relative; flex:1 1 0; min-width:0; border-left:1px solid var(--line-2); /* 30分＝淡い線 / 毎時＝濃い線。--cell-h（30分の高さ）に連動させてズレを防ぐ */ background-image: repeating-linear-gradient(180deg, transparent, transparent calc(var(--cell-h, 40px) * 2 - 1px), var(--line) calc(var(--cell-h, 40px) * 2 - 1px), var(--line) calc(var(--cell-h, 40px) * 2)), repeating-linear-gradient(180deg, transparent, transparent calc(var(--cell-h, 40px) - 1px), var(--line-2) calc(var(--cell-h, 40px) - 1px), var(--line-2) var(--cell-h, 40px)); /* 全メンバー列にうっすらメンバー色（PCの週表示と同様） */ background-color:color-mix(in srgb, var(--mc) 5%, transparent); } .dv-col.child{ background-color:color-mix(in srgb, var(--mc) 9%, transparent); } .dv-cells{ position:absolute; inset:0; z-index:1; display:flex; flex-direction:column; } .dv-cell{ display:block; text-decoration:none; position:relative; } .dv-cell:hover{ background:color-mix(in srgb, var(--key) 12%, transparent); } /* 1回目タップで選択：＋を表示（もう一度で追加） */ .dv-cell.selected{ background:color-mix(in srgb, var(--key) 20%, transparent); box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--key) 70%, transparent); z-index:3; } .dv-cell.selected::after{ content:"＋"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--key); font-weight:800; font-size:18px; } /* 予定ブロック（縦：top/height） */ .dv-blk{ position:absolute; left:2px; right:2px; z-index:2; overflow:hidden; text-decoration:none; display:flex; flex-direction:column; gap:1px; justify-content:center; padding:2px 6px; border-radius:8px; color:var(--ink); font-size:11.5px; line-height:1.15; background:color-mix(in srgb, var(--cat) 16%, var(--surface-2)); /* 左バーの太さ(4px)で4辺すべてをカテゴリ色で囲う */ border:4px solid var(--cat); } /* 移動・重要は PC と同じ濃色ソリッド＋白文字（スマホ日表示） */ .dv-blk.cat-move, .dv-blk.cat-important{ color:#fff; border-color:rgba(0,0,0,.28); } .dv-blk.cat-move{ background:var(--c-move-solid); } .dv-blk.cat-important{ background:var(--c-important-solid); } .dv-blk .t{ font-weight:700; white-space:normal; word-break:break-word; overflow-wrap:anywhere; } /* 収まらないタイトルは折り返して複数行に */ .dv-blk .meta{ color:var(--muted); font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* 繰り返し予定は薄い斜めストライプ背景（週ビューと同様） */ .dv-blk.rep{ background-image:repeating-linear-gradient(-45deg, color-mix(in srgb, currentColor 7%, transparent) 0 2px, transparent 2px 9px); } .dv-blk.cat-move .meta, .dv-blk.cat-important .meta{ color:rgba(255,255,255,.82); } .dv-blk.is-done{ opacity:.55; filter:grayscale(.85); } .dv-blk.is-plan{ border-style:dashed; } .dv-blk.is-now{ box-shadow:0 0 0 2px color-mix(in srgb, var(--key) 70%, transparent); } .dv-blk.is-extra{ border-style:dashed; } /* 過去を暗く（上=過去 / 下=未来）。時間ガター(46px)より右の列部分を覆う。 */ .dv-past{ position:absolute; left:46px; right:0; top:0; z-index:0; pointer-events:none; background:rgba(0,0,0,.20); } /* 現在時刻ライン */ .dv-now{ position:absolute; left:46px; right:0; height:0; z-index:15; pointer-events:none; border-top:2px solid var(--key); } .dv-now .tag{ position:absolute; left:2px; top:-9px; background:var(--key); color:var(--key-ink); font-size:9px; font-weight:800; padding:0 5px; border-radius:999px; } /* スマホ日表示の絞り込みボタン（アイコンは通常色のまま、数バッジで状態を示す） */ .dv-filter{ position:relative; } .dv-filter .fcount:not(:empty){ position:absolute; top:-4px; right:-4px; } @media (max-width:640px){ .week-card{ display:none; } /* スマホは週表示を隠して日表示に */ .day-view{ display:block; } .weeknav{ display:none; } /* 週ナビはヘッダーから隠す（日ナビを使う） */ .filter-pop .fp-days{ display:none; } /* 1日表示では曜日フィルタは無意味なので隠す */ /* month-mode：日タイムラインを隠して月カレンダー＋アジェンダに */ #board.month-mode .day-view{ display:none; } #board.month-mode .month-view{ display:block; } } /* ============ 表示切替ボタン（ヘッダー・スマホのみ表示） ============ */ .site-header > .view-toggle{ display:none; } /* 既定（PC）は非表示。≤640pxで表示 */ @media (max-width:640px){ .site-header > .view-toggle{ display:inline-flex; } } .view-toggle .vt-ic{ display:none; align-items:center; justify-content:center; } .view-toggle .vt-timeline{ display:inline-flex; } /* タイムライン表示中 → list アイコン */ #board.month-mode .view-toggle .vt-timeline{ display:none; } /* カレンダー表示中 → list-vertical アイコン */ #board.month-mode .view-toggle .vt-calendar{ display:inline-flex; } /* ============ PC/タブレット：週⇄1日 切替ボタン（pcview-toggle） ============ */ .site-header > .pcview-toggle{ display:none; } /* 既定（スマホ幅）は非表示。≥641pxで表示 */ @media (min-width:641px){ .site-header > .pcview-toggle{ display:inline-flex; } } .pcview-toggle .pvt-ic{ display:none; align-items:center; justify-content:center; } .pcview-toggle .pvt-week{ display:inline-flex; } /* 週表示中 → 1日へ（list-vertical） */ #board.pcday .pcview-toggle .pvt-week{ display:none; } /* 1日表示中 → 週へ（list-vertical→list に切替） */ #board.pcday .pcview-toggle .pvt-day{ display:inline-flex; } /* ============ スマホ：月カレンダー＋アジェンダ（month-view） ============ */ /* 日タップ高速化のフレーム(#calendar/#dayview)はレイアウトに影響させない （turbo-frame は既定 display:inline のため、中身を素の子として振る舞わせる） */ turbo-frame#calendar, turbo-frame#dayview{ display:contents; } .month-view{ display:none; max-width:var(--shell); margin:0 auto; color:#eaf1ff; /* 夜空の上なので既定文字は明るく */ --sky-muted:#aab8de; --sky-faint:rgba(234,241,255,.5); } /* スクロールしてもカレンダーはヘッダー直下に固定（アジェンダだけが下でスクロール）。 スクロールする予定が透けないよう夜空調の不透明背景を敷く。 */ .mv-cal{ position:sticky; top:var(--app-header-h, 0px); z-index:30; overflow:hidden; padding:8px 12px 10px; border-bottom:1px solid rgba(255,255,255,.14); background:linear-gradient(180deg, #1b2b5c 0%, #14224d 100%); box-shadow:0 8px 16px -12px rgba(0,0,0,.6); } .mv-monthnav{ display:flex; align-items:center; justify-content:center; gap:16px; padding:4px 0 8px; } .mv-mnav{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:10px; color:inherit; text-decoration:none; -webkit-tap-highlight-color:transparent; } .mv-mnav:active{ background:rgba(255,255,255,.12); } /* 月ラベルはタップでネイティブ月ピッカー（透明の month input がラベル全体を覆う） */ .mv-month-pick{ position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:2px; padding:3px 8px; margin:-3px -4px; border-radius:9px; cursor:pointer; -webkit-tap-highlight-color:transparent; } .mv-month-pick:active{ background:rgba(255,255,255,.12); } .mv-month-pick input[type=month]{ position:absolute; inset:0; width:100%; height:100%; min-height:0; opacity:0; border:none; padding:0; cursor:pointer; z-index:1; } .mv-monthlbl{ font-size:17px; font-weight:800; } .mv-month-caret{ display:inline-flex; align-items:center; color:var(--sky-muted); } .mv-dow{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-bottom:4px; } .mv-dow span{ text-align:center; font-size:11px; font-weight:700; color:var(--sky-muted); padding:2px 0; } .mv-dow span.sun{ color:var(--c-move); } .mv-dow span.sat{ color:var(--c-study); } .mv-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; } .mv-cell{ position:relative; display:flex; flex-direction:column; align-items:center; gap:2px; min-height:44px; padding:5px 0 4px; border-radius:10px; text-decoration:none; color:inherit; -webkit-tap-highlight-color:transparent; } .mv-cell .mv-dnum{ font-size:14px; font-weight:700; line-height:1; } .mv-cell.out .mv-dnum{ opacity:.4; } .mv-cell.sun .mv-dnum{ color:var(--c-move); } .mv-cell.sat .mv-dnum{ color:var(--c-study); } .mv-cell.special .mv-dnum{ color:#FFC24B; } /* とくべつな日＝金（曜日色より優先） */ .mv-cell.today{ background:var(--key); } /* 今日＝青背景（白文字）で最も目立たせる */ .mv-cell.today .mv-dnum{ color:var(--key-ink); } .mv-cell.sel:not(.today){ background:var(--surface-2); } /* 選択日（今日以外）＝明るい下地＋青文字 */ .mv-cell.sel:not(.today) .mv-dnum{ color:var(--key); } .mv-cell-marks{ display:flex; align-items:center; justify-content:center; gap:3px; line-height:1; } /* メモ・ピックアップを横並び（ドットは上に別行） */ .mv-cell-memo{ display:inline-flex; align-items:center; color:#9ecbff; line-height:1; } .mv-cell-memo .ic{ width:11px; height:11px; } .mv-cell.today .mv-cell-memo{ color:var(--key-ink); } /* today は青地なので白 */ .mv-cell.sel:not(.today) .mv-cell-memo{ color:var(--key); } /* sel は明るい下地なので濃色 */ /* ピックアップ：月セルのアイコン（メモの横）。色は特別な日と同じオレンジ */ .mv-cell-pickup{ display:inline-flex; align-items:center; color:#FFC24B; line-height:1; } .mv-cell-pickup .ic{ width:11px; height:11px; } /* ピックアップ：アジェンダの簡易タグ（人＋内容・時間なし）。夜空地の上に載る小さいオレンジのピル */ .mv-pickups{ display:flex; flex-wrap:wrap; gap:6px; margin:8px 12px 10px; } .mv-pickup-tag{ display:inline-flex; align-items:center; gap:5px; max-width:100%; padding:4px 10px; border-radius:999px; font-size:12px; font-weight:700; line-height:1.3; color:#3a2a00; background:#FFC24B; } .mv-pickup-tag .mvp-ic{ display:inline-flex; align-items:center; flex:0 0 auto; color:#7a4d00; } .mv-pickup-tag .mvp-ic .ic{ width:12px; height:12px; } .mv-pickup-tag .mvp-who{ font-weight:800; } .mv-pickup-tag .mvp-who::after{ content:"："; } .mv-pickup-tag .mvp-title{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .mv-dot{ width:5px; height:5px; border-radius:50%; background:#8ab4ff; } .mv-cell.today .mv-dot{ background:var(--key-ink); } /* 青地に白ドット */ .mv-cell.sel:not(.today) .mv-dot{ background:var(--key); } /* 明るい地に青ドット */ .mv-cell.out .mv-dot{ opacity:.4; } .mv-agenda{ position:relative; padding:12px 14px 48px; } /* 全日ぶんのアジェンダを先読みし、選択日以外は隠す（グローバルな [hidden] リセットが無いので明示） */ .mv-day[hidden]{ display:none; } .mv-agenda-head{ display:flex; align-items:center; gap:8px; margin-bottom:10px; } .mv-datewrap{ display:inline-flex; align-items:center; gap:8px; text-decoration:none; color:inherit; padding:3px 7px; margin:-3px -7px; border-radius:10px; -webkit-tap-highlight-color:transparent; } .mv-datewrap:active{ background:rgba(255,255,255,.12); } .mv-edit-ic{ display:inline-flex; align-items:center; color:#aebbe0; opacity:.85; } /* ロック中（閲覧モード）は日付の編集アイコンを隠す */ #board.locked .dv-edit-ic, #board.locked .mv-edit-ic, #board.locked .day-edit-ic{ display:none; } .mv-ah-date{ font-size:17px; font-weight:800; } .mv-ah-dow{ font-size:13px; color:var(--sky-muted); margin-left:2px; } /* 日付行の右端：アクション群（今日へ／予定追加） */ .mv-head-actions{ margin-left:auto; display:inline-flex; align-items:center; gap:8px; flex:0 0 auto; } .mv-today{ display:inline-flex; align-items:center; padding:6px 12px; border-radius:999px; font-size:13px; font-weight:700; text-decoration:none; color:#eaf1ff; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.24); -webkit-tap-highlight-color:transparent; } .mv-today:active{ background:rgba(255,255,255,.20); } .mv-add-ev{ display:inline-flex; align-items:center; gap:3px; flex:0 0 auto; padding:6px 12px; border-radius:999px; background:var(--key); color:#fff; font-size:13px; font-weight:700; text-decoration:none; -webkit-tap-highlight-color:transparent; } .mv-add-ev:active{ background:var(--key-strong); } /* メモ：タイムライン（dv-memo）と同じ半透明グラス */ .mv-memo{ display:flex; align-items:flex-start; gap:7px; padding:8px 12px; margin-bottom:12px; border-radius:12px; text-decoration:none; color:#ffffff; font-size:13px; line-height:1.5; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.24); } .mv-memo-ic{ display:inline-flex; color:#9ecbff; flex:0 0 auto; margin-top:1px; } .mv-memo-tx{ white-space:pre-wrap; word-break:break-word; font-weight:600; } /* 人ごとに1ブロック（1つのカード）。見出し帯＝メモ風の半透明グラス／予定行＝白。中は水平線で区切る */ .mv-group{ margin-bottom:14px; border-radius:12px; overflow:hidden; border:1px solid rgba(255,255,255,.16); box-shadow:0 4px 16px -10px rgba(0,0,0,.55); } .mv-group.is-family{ border-color:rgba(255,255,255,.3); } /* 家族の予定だけ枠線を少し強める */ .mv-person{ display:flex; align-items:center; gap:7px; padding:8px 12px; background:rgba(255,255,255,.20); color:#ffffff; } /* 家族の予定の見出しだけ透過無し（不透明ソリッド navy）にして、星空を透かさずカードとして際立たせる。 夜空に近い暗めの navy でカードを落ち着かせる。 */ .mv-person.is-family{ background:var(--family-navy); } .mv-person .swatch{ width:12px; height:12px; border-radius:50%; flex:0 0 auto; } .mv-person .mv-person-home{ display:inline-flex; align-items:center; flex:0 0 auto; color:#eaf1ff; } /* 家族の予定の見出し＝おうちアイコン（中立色） */ .mv-person .mv-person-home .ic{ width:15px; height:15px; } .mv-person-name{ font-size:13px; font-weight:800; color:#eaf1ff; letter-spacing:.02em; } /* 人ヘッダー右端：この人の予定を追加するボタン */ .mv-person-add{ margin-left:auto; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:8px; color:inherit; text-decoration:none; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.24); transition:background .15s ease; } .mv-person-add:hover{ background:rgba(255,255,255,.28); } .mv-person-add .ic{ width:15px; height:15px; } @media (pointer:coarse){ .mv-person-add{ width:32px; height:32px; } } .mv-ev{ display:flex; align-items:flex-start; gap:10px; padding:10px 12px; color:var(--ink); background:rgba(255,255,255,.88); text-decoration:none; border-top:1px solid var(--line); -webkit-tap-highlight-color:transparent; } .mv-ev:first-child{ border-top:none; } .mv-ev:active{ background:var(--surface-3); } /* いま進行中（当日）の予定をハイライト */ .mv-ev.is-now{ background:color-mix(in srgb, var(--key) 14%, var(--surface-1)); box-shadow:inset 4px 0 0 var(--key); } .mv-ev.is-now .mv-ev-title{ color:var(--key); } .mv-ev-ic{ display:inline-flex; flex:0 0 auto; color:var(--cat, var(--key)); align-self:center; } /* カテゴリアイコンも縦中央 */ .mv-ev-body{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; } /* くりかえし印：時刻の左隣（右側）に置く。複数行メモでも上寄せでタイトル行に揃える。 */ .mv-ev-rep{ display:inline-flex; align-items:center; flex:0 0 auto; color:var(--faint); align-self:center; } /* 末尾マーカーは縦中央 */ .mv-ev-rep .ic{ width:13px; height:13px; } .mv-ev-pickup{ display:inline-flex; align-items:center; flex:0 0 auto; color:var(--faint); align-self:center; } /* リスト項目では繰り返しアイコンと同じ色（オレンジは小さくて見づらいため）・縦中央 */ .mv-ev-pickup .ic{ width:13px; height:13px; } .mv-ev-title{ flex:0 1 auto; min-width:0; font-size:15px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* メモ本文：タイトル下に最大2行。付箋アイコン付き。 */ .mv-ev-note{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:12px; line-height:1.45; color:var(--muted); word-break:break-word; white-space:pre-wrap; } .mv-ev-note-ic{ display:inline-flex; vertical-align:-.15em; margin-right:3px; opacity:.7; } .mv-ev-note-ic .ic{ width:12px; height:12px; } .mv-ev-time{ flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-end; line-height:1.2; font-size:13px; font-weight:700; color:var(--muted); margin-top:1px; } .mv-ev-end{ color:var(--faint); font-weight:600; } /* 「終日」は楕円ピルで囲う（カテゴリ色の淡い背景） */ .mv-ev-allday{ display:inline-block; padding:2px 10px; border-radius:999px; background:color-mix(in srgb, var(--cat) 18%, var(--surface-2)); color:var(--muted); font-size:12px; font-weight:800; line-height:1.4; } .mv-empty{ color:var(--sky-faint); text-align:center; padding:28px 0; } /* PC（>640px）：左サイドバー＝月カレンダー＋リスト（縦積み）／右＝週タイムライン の2カラム */ @media (min-width:641px){ .board-cols{ display:flex; align-items:flex-start; gap:18px; max-width:var(--shell); margin:0 auto; } .board-cols .month-view{ display:block; flex:0 0 340px; width:340px; margin:0; } .board-cols > .board-main{ flex:1 1 auto; min-width:0; } /* 右カラム（週タイムライン＋メモ一覧） */ .board-main > .week-card{ max-width:none; margin:0; } .mv-cal{ position:static; top:auto; z-index:auto; border:1px solid rgba(255,255,255,.16); border-radius:16px; } .mv-agenda{ padding:10px 10px 24px; } /* 非表示トグルON：サイドバーを畳んで週タイムラインを全幅に */ #board.sidebar-off .board-cols .month-view{ display:none; } /* 1日表示ON（#board.pcday）：右カラムを週タイムライン→1日タイムラインに差し替える。 左サイドバー（月カレンダー＋リスト）は常時表示のまま。 */ #board.pcday .board-main > .week-card{ display:none; } #board.pcday .board-main .day-view{ display:block; } #board.pcday .board-main .day-view .dv-nav{ max-width:none; } /* 広い右カラム幅に合わせて日付ナビも広げる */ } /* サイドバー上部ツールバー（PCのみ表示）＋畳んだときの再表示ハンドル */ .mv-topbar{ display:none; } .mv-topbar-title{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:800; color:#eaf1ff; } .mv-collapse-btn{ display:inline-flex; align-items:center; gap:3px; padding:5px 11px; border-radius:999px; cursor:pointer; font-size:12px; font-weight:700; color:#eaf1ff; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28); transition:background .15s ease; } .mv-collapse-btn:hover{ background:rgba(255,255,255,.24); } .sidebar-reopen{ display:none; } @media (min-width:641px){ .board-cols .month-view .mv-topbar{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; padding:0 2px; } #board.sidebar-off .sidebar-reopen{ display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; width:34px; height:46px; border-radius:10px; cursor:pointer; color:#eaf1ff; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.24); transition:background .15s ease; } #board.sidebar-off .sidebar-reopen:hover{ background:rgba(255,255,255,.22); } } /* 保存直後の予定を一瞬ハイライト（focusevent がスクロール＋付与） */ .just-saved{ position:relative; z-index:8; border-radius:8px; animation:just-saved 1.8s ease-out; } @keyframes just-saved{ 0%, 12%{ box-shadow:0 0 0 3px var(--key), 0 0 16px 3px color-mix(in srgb, var(--key) 55%, transparent); } 100%{ box-shadow:0 0 0 0 transparent; } } @media (prefers-reduced-motion: reduce){ .just-saved{ animation:none; } } /* 月カレンダーの日タップで、週タイムラインの該当日を一瞬ハイライト（週内フォーカス） */ .day-row.day-focus{ animation:day-focus 1.2s ease-out; } @keyframes day-focus{ 0%, 15%{ background:color-mix(in srgb, var(--key) 16%, transparent); } 100%{ background:transparent; } } @media (prefers-reduced-motion: reduce){ .day-row.day-focus{ animation:none; } } /* ============ メモのある日／ピックアップ（PC：週タイムラインの下・右カラム内で横並び。デザインは予定リストに合わせる） ============ */ /* スマホは各リストが display:none なので実質非表示。PCで2カラム横並び。 */ @media (min-width:641px){ .side-lists{ display:flex; gap:18px; align-items:flex-start; margin-top:16px; } .side-lists > section{ flex:1 1 0; min-width:0; } } .memo-list, .pickup-list{ display:none; } /* スマホは月/リストビューで見えるので非表示。PCのみ表示 */ @media (min-width:641px){ .memo-list, .pickup-list{ display:block; } } .memo-list h2, .pickup-list h2{ display:flex; align-items:center; gap:6px; font-size:14px; font-weight:800; color:#eaf1ff; margin:0 0 8px; padding:0 2px; } /* 見出しは夜空の上なので明色 */ .memo-list h2 .ic{ color:#9ecbff; } .pickup-list h2 .ic{ color:#FFC24B; } /* ピックアップは特別な日と同じオレンジ */ .memo-list .ml-range, .pickup-list .ml-range{ font-size:12px; font-weight:700; color:var(--sky-muted, #aab8de); } /* ピックアップ一覧：人＋内容（時間なし） */ .pickup-item .pu-who{ flex:0 0 auto; font-weight:800; font-size:13px; line-height:1.5; color:var(--ink); } .pickup-item .pu-who::after{ content:"："; } .pickup-item .pu-title{ min-width:0; flex:1 1 auto; color:var(--muted); font-size:14px; font-weight:600; line-height:1.5; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .ml-empty{ margin:0; padding:14px 12px; border-radius:14px; background:rgba(255,255,255,.88); border:1px solid var(--line); color:var(--muted); font-size:13px; } .ml-items{ list-style:none; margin:0; padding:0; border-radius:14px; overflow:hidden; background:rgba(255,255,255,.88); border:1px solid var(--line); box-shadow:0 4px 14px -10px rgba(0,0,0,.5); } .ml-item{ display:flex; align-items:flex-start; gap:10px; padding:10px 12px; color:var(--ink); text-decoration:none; } .ml-items li + li .ml-item{ border-top:1px solid var(--line); } /* 予定リスト同様の水平線区切り */ .ml-item:hover{ background:var(--surface-3); } .ml-date{ flex:0 0 auto; min-width:92px; font-weight:800; font-size:13px; line-height:1.5; } .ml-item.sun .ml-date{ color:var(--c-move); } .ml-item.sat .ml-date{ color:var(--c-study); } .ml-memo{ min-width:0; flex:1 1 auto; color:var(--muted); font-size:14px; font-weight:600; line-height:1.5; white-space:pre-wrap; word-break:break-word; } /* メモの改行を反映 */ /* ============ モーダル ============ */ #modal:empty{ display:none; } .modal-backdrop{ position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(10,14,30,.55); } .modal-panel{ width:100%; max-width:460px; max-height:90vh; overflow:auto; padding:20px; } .modal-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; } .modal-head-left{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .modal-head h2{ font-size:18px; } .modal-close{ font-size:22px; line-height:1; text-decoration:none; color:var(--faint); } .modal-close:hover{ color:var(--ink); } /* 編集モーダル右上：この予定をコピー */ .modal-copy{ display:inline-flex; align-items:center; gap:5px; flex:0 0 auto; padding:6px 12px; border-radius:999px; text-decoration:none; font-size:13px; font-weight:700; color:var(--key); background:color-mix(in srgb, var(--key) 10%, var(--surface-1)); border:1px solid color-mix(in srgb, var(--key) 40%, var(--line)); } .modal-copy:hover{ background:var(--key); color:var(--key-ink); border-color:transparent; } /* ============ フォーム ============ */ /* --- フォームコントロール共通（アプリ全体で「入力欄らしく」見せる） --- */ input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=time], input[type=search], select, textarea{ /* font-size は 16px 以上に。iOS はこれ未満だとフォーカス時に自動ズームする */ font:inherit; font-size:16px; color:var(--ink); background:var(--surface-2); border:1.5px solid color-mix(in srgb, var(--line) 100%, transparent); border-radius:var(--radius-sm); padding:9px 12px; min-height:44px; width:100%; max-width:100%; min-width:0; box-shadow:inset 0 1px 2px rgba(0,0,0,.18); } select{ cursor:pointer; } input::placeholder{ color:var(--faint); } input:hover, select:hover{ border-color:color-mix(in srgb, var(--ink) 26%, transparent); } input:focus, select:focus, textarea:focus{ outline:none; border-color:var(--key); box-shadow:0 0 0 3px color-mix(in srgb, var(--key) 30%, transparent); } input[type=color]{ padding:2px; min-height:44px; box-shadow:none; cursor:pointer; } /* スマホ：date/time はネイティブ幅が縮まず右にはみ出すことがあるので appearance を外し width に従わせる （タップでネイティブのピッカーは従来どおり開く） */ @media (max-width:640px){ input[type=date], input[type=time]{ -webkit-appearance:none; appearance:none; } } .field{ margin-bottom:14px; } .field label{ display:block; font-size:12px; color:var(--muted); margin-bottom:5px; font-weight:600; } .field-row{ display:flex; gap:10px; } .field-row[hidden]{ display:none; } /* 終日ON時は「はじめ/長さ/おわり」を隠す */ .field-row > .field{ flex:1 1 0; min-width:0; } /* date 等が固有幅で横にはみ出さないよう縮小可に */ /* 終日トグル */ /* 終日トグル：アイコン＋見出し＋スイッチのカード。ONで青くハイライト （.field label{display:block} に負けないよう .field で詳細度を上げる） */ .field .allday-toggle{ display:flex; align-items:center; gap:12px; cursor:pointer; user-select:none; margin:0; padding:11px 14px; border-radius:var(--radius-sm); border:1.5px solid var(--line); background:var(--surface-2); transition:border-color .15s ease, background .15s ease; } .allday-toggle:has(.at-input:checked){ border-color:var(--key); background:color-mix(in srgb, var(--key) 8%, var(--surface-1)); } .allday-toggle:has(.at-input:focus-visible){ outline:2px solid var(--key); outline-offset:2px; } .allday-toggle .at-ic{ display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; width:36px; height:36px; border-radius:10px; background:var(--surface-3); color:var(--muted); transition:background .15s ease, color .15s ease; } .allday-toggle:has(.at-input:checked) .at-ic{ background:var(--key); color:#fff; } .allday-toggle .at-text{ display:flex; flex-direction:column; gap:1px; flex:1 1 auto; min-width:0; } .allday-toggle .at-title{ font-size:14px; font-weight:800; color:var(--ink); line-height:1.2; } .allday-toggle .at-sub{ font-size:11px; font-weight:600; color:var(--faint); line-height:1.3; } .allday-toggle .at-input{ position:absolute; opacity:0; width:1px; height:1px; pointer-events:none; } .allday-toggle .at-switch{ position:relative; flex:0 0 auto; width:46px; height:26px; border-radius:999px; background:var(--surface-3); border:1px solid var(--line); transition:background .15s ease, border-color .15s ease; } .allday-toggle .at-switch::after{ content:""; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.28); transition:transform .18s ease; } .allday-toggle:has(.at-input:checked) .at-switch{ background:var(--key); border-color:transparent; } .allday-toggle:has(.at-input:checked) .at-switch::after{ transform:translateX(20px); } .check{ display:flex; align-items:center; gap:8px; } .check input{ width:20px; height:20px; accent-color:var(--key); } .form-actions{ display:flex; gap:10px; align-items:center; margin-top:18px; } .form-actions .grow{ flex:1; } .errors{ background:color-mix(in srgb, var(--c-move) 16%, var(--surface-2)); border:1px solid color-mix(in srgb, var(--c-move) 45%, transparent); border-radius:var(--radius-sm); padding:10px 12px; margin-bottom:14px; font-size:13px; } .errors ul{ margin:4px 0 0; padding-left:18px; } .cat-hint{ display:inline-block; width:12px; height:12px; border-radius:3px; background:var(--cat); vertical-align:middle; margin-right:4px; } /* しゅるい：カラータグで選択（色はカレンダー表示のカテゴリ色に揃える） */ .cat-picker{ display:flex; flex-direction:column; gap:8px; } .cat-row{ display:flex; flex-wrap:wrap; gap:8px; } .cat-btn{ position:relative; display:inline-flex; align-items:center; gap:6px; cursor:pointer; padding:7px 13px 7px 11px; border-radius:999px; font-size:13px; font-weight:700; color:var(--ink); user-select:none; min-height:38px; background:var(--surface-1); border:1px solid var(--line); border-left:4px solid var(--line); transition:transform .12s ease, filter .15s ease, background .15s ease; } .cat-btn:hover{ filter:brightness(1.08); } .cat-btn:active{ transform:scale(.96); } .cat-btn input{ position:absolute; opacity:0; width:1px; height:1px; pointer-events:none; } .cat-btn .cat-btn-ic{ display:inline-flex; align-items:center; color:var(--cat); position:relative; top:1px; } /* 光学的に中央へ（わずかに下げる） */ .cat-btn .cat-btn-ic .ic{ width:15px; height:15px; } /* 選択中はカテゴリ色でベタ塗り */ .cat-btn:has(input:checked){ background:var(--cat); color:var(--key-ink); border-color:transparent; box-shadow:0 0 0 2px color-mix(in srgb, var(--cat) 45%, transparent); } .cat-btn:has(input:checked) .cat-btn-ic{ color:inherit; } .cat-btn:has(input:focus-visible){ outline:2px solid var(--key); outline-offset:2px; } /* 移動・重要はカレンダー表示と同じ濃色ソリッドに揃える（選択時は白文字） */ .cat-btn.cat-move{ --cat:var(--c-move-solid); } .cat-btn.cat-important{ --cat:var(--c-important-solid); } .cat-btn.cat-move:has(input:checked), .cat-btn.cat-important:has(input:checked){ color:#fff; } @media (pointer:coarse){ .cat-btn{ min-height:40px; } } /* 祝日/とくべつな日 モーダルの選択肢 */ .kind-choices{ display:flex; flex-direction:column; gap:8px; } .kind-opt{ display:flex; align-items:center; gap:9px; padding:10px 12px; border:1px solid var(--line); border-radius:12px; cursor:pointer; } .kind-opt:hover{ background:var(--surface-2); } .kind-opt input{ width:18px; height:18px; accent-color:var(--key); flex:0 0 auto; } .kind-opt > span{ display:inline-flex; align-items:center; gap:7px; font-weight:600; } .kind-swatch{ width:13px; height:13px; border-radius:4px; flex:0 0 auto; } .kind-swatch.sun{ background:var(--c-move); } .kind-swatch.special{ background:#FFC24B; } /* 削除（繰り返しは3モード） */ .delete-box{ margin-top:16px; padding-top:14px; border-top:1px solid var(--line); } .delete-box .role-tag{ display:inline-flex; align-items:center; gap:5px; } .delete-choices{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; } .delete-choices .btn{ flex:1; min-width:100px; } /* くりかえしの内容（頻度・開始/終了）を編集モーダル上部に読み取り専用で表示 */ .rrule-note{ display:flex; flex-direction:column; gap:4px; margin-bottom:14px; padding:9px 12px; border-radius:12px; font-size:13px; background:color-mix(in srgb, var(--key) 12%, var(--surface-1)); border:1px solid color-mix(in srgb, var(--key) 30%, transparent); } .rrule-note .rrule-line{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; } .rrule-note .role-tag{ display:inline-flex; align-items:center; gap:5px; font-weight:700; color:var(--key); } .rrule-note .rrule-body{ font-weight:600; } .rrule-note .rrule-sub{ font-weight:600; opacity:.85; } .rrule-edit-btn{ margin-left:auto; font-size:12px; font-weight:700; color:var(--key); cursor:pointer; background:none; border:1px solid color-mix(in srgb, var(--key) 40%, transparent); border-radius:8px; padding:2px 10px; } .rrule-edit-btn:hover{ background:color-mix(in srgb, var(--key) 14%, transparent); } .rrule-edit{ margin-top:10px; padding-top:10px; border-top:1px solid color-mix(in srgb, var(--key) 25%, transparent); } .endless-check{ display:inline-flex; align-items:center; gap:8px; font-weight:600; cursor:pointer; margin-bottom:8px; } .endless-check input{ width:18px; height:18px; accent-color:var(--key); flex:0 0 auto; } /* くりかえし設定をひと枠にまとめる。頻度を選ぶと .repeating が付いて枠＋詳細が展開する */ .recur-box{ margin-bottom:14px; } .recur-box.repeating{ padding:12px 14px; border:1px solid color-mix(in srgb, var(--key) 30%, var(--line)); border-radius:14px; background:color-mix(in srgb, var(--key) 6%, var(--surface-1)); } .recur-box .recur-detail{ display:none; margin-top:12px; } .recur-box.repeating .recur-detail{ display:block; } .recur-box .recur-detail .field{ margin-bottom:12px; } .recur-box .recur-note{ margin:8px 0 0; } /* くりかえし予定の更新（削除と同じ体裁の3ボタン） */ .update-box .role-tag{ display:inline-flex; align-items:center; gap:5px; } .update-choices{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; } .update-choices .btn{ flex:1; min-width:100px; } /* 更新/削除オプションの開閉トグル：アクションと区別する控えめな見た目＋シェブロン（開くと回転） */ .opt-toggle{ background:transparent; border-style:dashed; color:var(--muted); font-weight:600; } .opt-toggle:hover{ background:var(--surface-2); color:var(--ink); } .opt-toggle .chev{ display:inline-flex; transition:transform .2s ease; opacity:.7; } .opt-toggle .chev .ic{ width:14px; height:14px; } .revealed .opt-toggle .chev{ transform:rotate(180deg); } /* 削除の既定（この予定のみ）＝赤塗りで強調。オプション（これ以降/すべて）は赤枠（.btn.danger）。 */ .btn.danger-solid{ background:#E11D34; color:#fff; border-color:transparent; font-weight:700; } .btn.danger-solid:hover{ background:#c4152a; } /* ============ 確認ダイアログ（turbo_confirm の差し替え） ============ */ /* ブラウザ標準 confirm() の代わり。編集モーダル（z-index:100）より前面に出す。 */ .confirm-backdrop{ position:fixed; inset:0; z-index:500; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(10,14,30,.55); opacity:0; pointer-events:none; transition:opacity .12s ease; /* 非表示中は全画面を覆ってもタップを奪わない */ } .confirm-backdrop.show{ opacity:1; pointer-events:auto; } .confirm-card{ width:100%; max-width:360px; padding:20px; transform:translateY(6px) scale(.98); transition:transform .12s ease; } .confirm-backdrop.show .confirm-card{ transform:none; } .confirm-msg{ font-size:15px; font-weight:700; line-height:1.6; color:var(--ink); white-space:pre-line; } .confirm-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:18px; } /* ============ フラッシュ（トースト） ============ */ /* ページ上部に居座らないよう、右上に浮かせて数秒で自動的に消す。 */ .flash{ position:fixed; top:14px; right:14px; z-index:200; margin:0; display:flex; flex-direction:column; gap:8px; pointer-events:none; max-width:min(360px, calc(100vw - 28px)); } .flash .msg{ pointer-events:auto; cursor:pointer; padding:11px 15px; border-radius:12px; font-size:14px; font-weight:600; box-shadow:0 14px 34px -14px rgba(0,0,0,.55); animation:toast-in .25s ease both; } .flash .msg.leaving{ animation:toast-out .3s ease forwards; } .flash .notice{ background:color-mix(in srgb, var(--key) 22%, var(--surface-1)); border:1px solid color-mix(in srgb, var(--key) 55%, transparent); } .flash .alert{ background:color-mix(in srgb, var(--c-move) 22%, var(--surface-1)); border:1px solid color-mix(in srgb, var(--c-move) 55%, transparent); } @keyframes toast-in{ from{ opacity:0; transform:translateX(16px); } to{ opacity:1; transform:none; } } @keyframes toast-out{ from{ opacity:1; } to{ opacity:0; transform:translateX(16px); } } @media (prefers-reduced-motion: reduce){ .flash .msg{ animation:none; } .flash .msg.leaving{ animation:none; opacity:0; } } /* ============ 設定画面 ============ */ .settings-grid{ display:grid; grid-template-columns:1fr; gap:18px; max-width:820px; margin:0 auto; } .settings-footer{ display:flex; justify-content:center; margin:8px auto 0; } .panel{ padding:20px 22px; } .panel h2{ font-size:17px; margin-bottom:6px; display:flex; align-items:center; gap:9px; } .panel-desc{ font-size:12.5px; color:var(--faint); line-height:1.55; margin:0 0 16px; } /* パネル内の小見出し（上に区切り線） */ .panel .subhead{ font-size:14px; font-weight:800; color:var(--ink); margin:20px 0 12px; padding-top:16px; border-top:1px solid var(--line); } /* ラベル付きフィールド（ラベルは小さく上、入力は下） */ .fld{ display:flex; flex-direction:column; gap:5px; min-width:0; } .fld > span{ font-size:11px; font-weight:700; color:var(--faint); } .fld.grow{ flex:1 1 auto; } /* 横並びフォーム（ラベル付き、下端そろえ） */ .form-grid{ display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; } .colorpick{ width:48px; min-height:44px; padding:2px; } .agepick{ width:74px; } /* カレンダー（レーン）：並び替えできるリスト */ .cal-list{ display:flex; flex-direction:column; gap:8px; } .cal-row{ display:flex; align-items:center; gap:6px; border:1px solid var(--line); border-radius:12px; background:var(--surface-2); } .cal-row.dragging{ opacity:.6; box-shadow:0 12px 26px -12px rgba(0,0,0,.5); } .cal-grip{ display:flex; align-items:center; justify-content:center; width:38px; align-self:stretch; color:var(--faint); cursor:grab; touch-action:none; flex:0 0 auto; } .cal-grip:active{ cursor:grabbing; } .cal-link{ display:flex; align-items:center; gap:10px; flex:1; min-width:0; text-decoration:none; color:inherit; padding:11px 12px 11px 0; } .cal-link:hover{ color:var(--ink); } .cal-row:hover{ border-color:color-mix(in srgb, var(--key) 45%, var(--line)); } .cal-link .swatch{ width:16px; height:16px; border-radius:5px; flex:0 0 auto; box-shadow:0 0 0 1px rgba(0,0,0,.15) inset; } .cal-link .cal-name{ font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .cal-link .role-tag{ font-size:11px; color:var(--faint); } .cal-link .cal-edit{ margin-left:auto; color:var(--faint); display:flex; } /* 祝日・とくべつな日 1件 */ .holiday-item{ display:flex; align-items:center; gap:10px; padding:10px 0; border-top:1px solid var(--line-2); } .holiday-item:first-of-type{ border-top:none; } .holiday-item .hk{ font-size:11px; font-weight:800; padding:2px 9px; border-radius:999px; flex:0 0 auto; } .holiday-item .hk.holiday{ background:color-mix(in srgb, var(--c-move) 20%, transparent); color:var(--c-move); } .holiday-item .hk.special{ background:color-mix(in srgb, #FFC24B 22%, transparent); color:#E0A21A; } .holiday-item .hk.memo{ background:color-mix(in srgb, var(--key) 18%, transparent); color:var(--key); } .holiday-item .hname{ color:var(--muted); } .hi-del{ color:var(--faint); border-color:transparent; } .hi-del:hover{ color:var(--c-move); background:color-mix(in srgb, var(--c-move) 14%, transparent); } /* アバター */ .avatar{ width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; color:#0d1330; flex:0 0 auto; } .avatar.user{ background:color-mix(in srgb, var(--key) 26%, var(--surface-2)); color:var(--key); } .avatar.user .ic{ width:18px; height:18px; } /* 参加者などの汎用行 */ .member-row{ display:flex; align-items:flex-end; gap:10px; padding:8px 0; } .member-row .grow{ flex:1; min-width:120px; } .member-row .role-tag{ font-size:11px; color:var(--faint); } /* 招待 */ .invite-box{ display:flex; gap:22px; flex-wrap:wrap; } .invite-code{ font-family:ui-monospace, monospace; font-size:22px; letter-spacing:.15em; font-weight:800; color:var(--key); } .invite-link{ word-break:break-all; font-size:13px; color:var(--muted); } .inline-form{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; } /* 購読用 .ics の URL 一覧（設定画面）。家族ぶん＋カレンダーごとを縦に並べる。 */ .feed-list{ display:flex; flex-direction:column; gap:10px; } .feed-row{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; padding:10px 12px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface-2); } .feed-row .feed-name{ flex:0 0 auto; min-width:7em; font-weight:700; font-size:13px; } .feed-row .feed-url{ flex:1 1 20em; min-width:0; word-break:break-all; font-family:ui-monospace, monospace; font-size:12.5px; color:var(--muted); } .feed-row form{ flex:0 0 auto; margin:0; } /* ============ 認証画面 ============ */ .auth-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; } .auth-card{ width:100%; max-width:400px; padding:28px; } .auth-card .brand{ justify-content:center; margin-bottom:6px; } .auth-card .brand .star{ width:72px; height:72px; } .auth-card .tagline{ text-align:center; color:var(--muted); font-size:13px; margin-bottom:20px; } .auth-card h1{ text-align:center; font-size:20px; margin-bottom:18px; } .auth-links{ margin-top:16px; text-align:center; font-size:13px; } .auth-links a{ color:var(--key); font-weight:600; } .empty-hint{ text-align:center; color:var(--faint); padding:40px 20px; } /* サービスフッター（2行：サービス名／サブ文言） */ /* フッターは夜空（暗い地）の上に載るので文字を明るく（カード上ではないため） */ .site-footer{ display:flex; flex-direction:column; align-items:center; gap:3px; text-align:center; color:#aebbe0; padding:24px 16px 32px; } .site-footer .ft-name{ font-weight:800; color:#e7eeff; letter-spacing:.02em; } .site-footer .ft-sub{ font-size:12px; } .site-footer .ft-copy{ font-size:11px; margin-top:4px; opacity:.85; } /* ========================================================================= ランディング（ログイン前トップ /） ロゴ・サービス名・キャッチコピー・簡単な説明・導線のみ。中央寄せでシンプルに。 ========================================================================= */ .lp{ min-height:78vh; display:flex; align-items:center; justify-content:center; padding:40px 20px; } .lp-inner{ display:flex; flex-direction:column; align-items:center; text-align:center; max-width:520px; } .lp .star{ width:124px; height:124px; border-radius:50%; box-shadow:0 0 0 1px var(--line), 0 22px 54px -20px rgba(0,0,0,.7); } .lp-brand-txt{ display:flex; flex-direction:column; gap:4px; margin-top:22px; } /* ランディングは夜空（暗い地）に載るので文字を明るく */ .lp-name{ font-weight:800; font-size:30px; letter-spacing:.03em; color:#f2f6ff; } .lp-sub{ font-size:13px; letter-spacing:.16em; color:#aebbe0; } .lp-title{ font-size:clamp(26px, 6vw, 38px); line-height:1.2; font-weight:900; margin:28px 0 0; color:#f2f6ff; } .lp-accent{ color:#7db8ff; text-shadow:0 0 26px rgba(125,184,255,.5); } .lp-lead{ margin:16px 0 0; color:#c2cee9; font-size:15px; line-height:1.8; } .lp-cta{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px; margin-top:32px; } .lp-cta-main{ font-size:16px; padding:12px 28px; border-radius:14px; } .lp-cta-sub{ font-size:15px; padding:12px 22px; } @media (max-width:480px){ .lp-cta{ width:100%; } .lp-cta-main, .lp-cta-sub{ flex:1; text-align:center; } } @media (max-width:640px){ .site-footer{ padding:20px 16px 48px; } }