/* ============================================================ public_html/assets/css/dashboard.css — el-cielo Family 共通スタイル 秘書版 _dashboard/assets/css/dashboard.css の :root 変数・.login-* を流用（発明しない）。 Phase2 でカレンダー本体の .cal-* を追加移植する。 ============================================================ */ :root{ --bg:#f6f4fb; --card:#ffffff; --line:#e7e2f0; --text:#2c2540; --sub:#7a7290; --accent:#8E6FC4; --radius:14px; --shadow:0 2px 10px rgba(90,70,140,.08); } *{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--text); font-family:-apple-system,"Hiragino Sans","Yu Gothic",sans-serif;line-height:1.6} a{color:var(--accent);text-decoration:none} /* ===== ログイン画面（秘書版流用）===== */ .login-body{min-height:100vh;margin:0;display:flex;align-items:center;justify-content:center; background:linear-gradient(135deg,#f6f4fb 0%,#efe9f8 100%);padding:20px} .login-card{background:var(--card);border:1px solid var(--line);border-radius:18px; box-shadow:0 8px 30px rgba(90,70,140,.14);padding:32px 28px;width:100%;max-width:380px;text-align:center} .login-logo{font-weight:700;color:var(--text);font-size:1.05rem;margin-bottom:18px} .login-title{font-size:1.3rem;margin:0 0 6px;color:var(--text)} .login-note{font-size:.84rem;color:var(--sub);margin:0 0 14px} .login-err{background:#fdecec;border:1px solid #f3c2c2;color:#b3261e;border-radius:10px; padding:9px 12px;font-size:.84rem;margin:0 0 14px} .login-fld{display:block;text-align:left;margin-bottom:14px} .login-fld>span{display:block;font-size:.8rem;color:var(--sub);margin-bottom:5px} .login-fld input{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:10px; font-size:1rem;font-family:inherit;background:#fff;color:var(--text)} .login-fld input:focus{outline:none;border-color:var(--accent)} .login-btn{width:100%;padding:12px;border:0;border-radius:10px;background:var(--accent);color:#fff; font-size:1rem;font-weight:700;cursor:pointer;font-family:inherit;margin-top:4px} .login-btn:hover{filter:brightness(1.06)} .login-foot{font-size:.74rem;color:var(--sub);margin:16px 0 0} /* ============================================================ Phase2 追加：共通ナビ＋ページ枠＋フラッシュ／ヒント（.fam-* は家族版で新規） ============================================================ */ /* task#10：TimeTree風に上部サービス名ロゴ／横長ナビ(.fam-nav*)を廃止し、 ナビを画面下部の固定タブバー(.fam-tabbar)へ移設。旧 .fam-nav* は参照が無いので削除。 */ /* --- 下固定タブバー（TimeTree風・📅📁✉️↩） --- */ .fam-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:40; display:flex;justify-content:space-around;align-items:stretch; min-height:56px;background:var(--card);border-top:1px solid var(--line); box-shadow:0 -2px 10px rgba(90,70,140,.06); /* iPhone のホームインジケータ安全域ぶんを下に確保（viewport-fit=cover 前提） */ padding-bottom:env(safe-area-inset-bottom)} /* 各タブ＝縦積み（アイコン上/ラベル下）。a も form(button) も同じ見た目に揃える。 */ .fam-tab,.fam-tab button{display:flex;flex-direction:column;align-items:center;justify-content:center; gap:2px;flex:1 1 0;min-width:0;height:56px;padding:6px 2px; color:var(--sub);font-size:.72rem;font-weight:600;text-decoration:none; background:none;border:0;cursor:pointer;font-family:inherit; -webkit-tap-highlight-color:transparent} .fam-tab{margin:0} .fam-tab button{width:100%} .fam-tab-ic{font-size:1.25rem;line-height:1} .fam-tab-lb{line-height:1} .fam-tab.active,.fam-tab.active .fam-tab-lb{color:var(--accent)} .fam-tab:hover,.fam-tab:hover .fam-tab-lb{color:var(--accent)} .fam-main{max-width:1000px;margin:0 auto; /* 上：viewport-fit=cover で上バーを廃したため、iPhone のステータスバー/ノッチ安全域を上にも確保 （PWA standalone で最上部の年月がバーに潜らないように）。左右も安全域を尊重。 下：下タブバー(56px)＋余白＋iPhone安全域ぶんを空け、最終行やFABが隠れないように。 */ padding-top:calc(20px + env(safe-area-inset-top)); padding-right:calc(18px + env(safe-area-inset-right)); padding-left:calc(18px + env(safe-area-inset-left)); padding-bottom:calc(76px + env(safe-area-inset-bottom))} /* フラッシュ／ヒント／ノート（秘書版 .flash/.hint/.note を家族版に移植） */ .flash{border-radius:var(--radius);padding:12px 16px;margin-bottom:18px;font-size:.9rem} .flash.ok{background:#e8f6ec;border:1px solid #bfe3c9;color:#1f7a3d} .flash.err{background:#fdecec;border:1px solid #f3c2c2;color:#b3261e} .hint{font-size:.76rem;color:var(--sub);margin:6px 0 0} .note{font-size:.82rem;color:var(--sub);background:#fff;border:1px dashed var(--line); border-radius:var(--radius);padding:12px 14px;margin-top:10px} /* フォルダ管理（calendars.php）＝新規 .fam-fold-* / .fam-mem-* */ .cal-chip-icon{font-size:.92rem;line-height:1} .fam-fold-head{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap} .fam-fold-name{font-weight:700;color:var(--text)} .fam-fold-badge{font-size:.7rem;font-weight:700;padding:2px 9px;border-radius:999px; background:#efe9f8;color:var(--accent)} .fam-fold-links{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .fam-fold-link{font-size:.8rem;font-weight:600} .fam-fold-links form{margin:0} .fam-mem{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line)} .fam-mem-title{font-size:.8rem;font-weight:700;color:var(--sub);margin-bottom:6px} .fam-mem-list{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-direction:column;gap:5px} .fam-mem-item{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:.86rem} .fam-mem-role{color:var(--sub);font-size:.78rem} .fam-mem-item form{margin:0} .fam-mem-del{color:#b3261e;border:1px solid #f3c2c2;background:#fff; padding:3px 10px;border-radius:999px;font-size:.74rem;cursor:pointer;font-family:inherit} .fam-mem-del:hover{background:#fdecec;border-color:#e89a9a} .fam-mem-add{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;margin-top:6px} .fam-mem-add .cal-input{flex:1 1 auto;min-width:0} /* ※カレンダー専用クラス（.cal-*）で完結。他ページ(index/schedule/cost等)へは波及しない。 色は既存テーマトークン(--accent #8E6FC4 / --bg / --card / --line / --sub)に合わせる。*/ /* --- TimeTree風 月ヘッダー：年月を大きく・◀▶で前後月・「今日」ボタン --- */ /* task#70：上部を圧縮（margin 14→8）。右側に「今日」「ICS取込」を横並びの小ピルで収め縦行を増やさない */ /* task#74④：年月ヘッダー上の余白を詰める。共通レイアウト(.dash-main の上 padding 24px)は 他ページ共用なので触らず、.cal-top 側に負の上マージンを入れて calendar だけ吸収する。 */ .cal-top{display:flex;align-items:center;justify-content:center;gap:6px;margin:-12px 0 8px;position:relative} .cal-monthlabel{font-weight:700;text-align:center;color:var(--text); min-width:170px;line-height:1.1} .cal-ym-y{font-size:.92rem;color:var(--sub);font-weight:700;margin-right:2px} .cal-ym-m{font-size:1.6rem;font-weight:800;color:var(--text)} .cal-navbtn{display:inline-flex;align-items:center;justify-content:center; width:38px;height:38px;border-radius:50%;font-size:1.5rem;line-height:1; color:var(--accent);background:var(--card);border:1px solid var(--line);flex:none} .cal-navbtn:hover{background:#f3eefb} /* 右側アクション群（今日／ICS取込）。ヘッダー右端に絶対配置で縦行を増やさない */ .cal-top-actions{position:absolute;right:0;top:50%;transform:translateY(-50%); display:inline-flex;align-items:center;gap:6px} .cal-today-btn{font-size:.78rem;font-weight:700;padding:6px 12px;border-radius:999px; color:var(--accent);background:#efe9f8;border:1px solid var(--line);white-space:nowrap} .cal-today-btn:hover{background:var(--accent);color:#fff} /* ICS取込：横長テキストピル（×ボタン用の正方形 .cal-pill.ghost を流用しない＝①の崩れ根治） */ .cal-import-btn{display:inline-flex;align-items:center;gap:3px;font-size:.78rem;font-weight:700; padding:6px 12px;border-radius:999px;white-space:nowrap; color:var(--accent);background:var(--card);border:1px solid var(--line)} .cal-import-btn:hover{background:#f3eefb;color:var(--accent)} /* task#74①：カテゴリ管理は歯車アイコンのみ（テキストなし）の丸ボタン。ICS/今日ピルと高さを揃える */ .cal-cat-gear{display:inline-flex;align-items:center;justify-content:center;flex:none; width:34px;height:34px;border-radius:50%;font-size:1.05rem;line-height:1; background:var(--card);border:1px solid var(--line);text-decoration:none} .cal-cat-gear:hover{background:#f3eefb} /* --- カテゴリ・チップ（丸ピル＋色ドット＋チェック） --- */ /* task#70：チップ行のmarginを圧縮（14→8）して1画面に収まりやすく */ .cal-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px} .cal-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px; font-size:.84rem;font-weight:600;background:var(--card);border:1px solid var(--line);color:var(--text); -webkit-tap-highlight-color:transparent} .cal-chip.active{background:var(--accent);color:#fff;border-color:var(--accent)} /* task#74②：選択中カテゴリは自カラーで背景塗り＋白文字にハイライト（TimeTree風・もう一度押すと解除） */ .cal-chip[style*="--chip-c"].active{background:var(--chip-c);border-color:var(--chip-c);color:#fff} .cal-dot{display:inline-block;width:11px;height:11px;border-radius:50%;flex:none} .cal-notify{margin-bottom:8px;display:flex;align-items:center;gap:10px;flex-wrap:wrap} /* task#70：VAPID未設定の案内は控えめに（全幅の大きい .note を使わず小さく1行で）。情報は残すが場所を取らない */ .cal-note{font-size:.72rem;color:var(--sub);margin:0 0 8px;line-height:1.4} .cal-note code{font-size:.92em} /* 「フォルダが無い」等の独立注記でだけ余白が欲しい箇所用の修飾。 .cal-note 本体に padding を持たせると calendar.php の1行注記2箇所に波及するため分離（inline style 廃止）。 */ .cal-note-pad{padding:16px} /* --- 月グリッド --- */ /* task#74⑥：グリッドを横幅いっぱいに。.dash-main の左右 padding(18px)を負マージンで相殺し コンテンツ領域(最大1000px)の左右端まで広げる。共通レイアウトは触らず .cal-grid 側で吸収。 端まで使う分 width は「100% + 左右18px×2」で計算する。 */ .cal-grid{width:calc(100% + 36px);margin-left:-18px;margin-right:-18px; border-collapse:collapse;table-layout:fixed;background:var(--card); border-left:0;border-right:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line); border-radius:0;overflow:hidden} .cal-grid th{padding:8px 4px;font-size:.78rem;font-weight:700;color:var(--sub); border-bottom:1px solid var(--line);background:#faf8fd} .cal-grid th.cal-sun,.cal-day.cal-sun .cal-daynum{color:#d2453b} .cal-grid th.cal-sat,.cal-day.cal-sat .cal-daynum{color:#2f6fd0} /* task#74⑤：日にちのマスを縦に大きく（78→104px）。予定バーが複数でも見やすい高さに戻す */ .cal-day{vertical-align:top;height:104px;border:1px solid var(--line);padding:4px;position:relative} .cal-empty{border:1px solid var(--line);background:#fbfafd} .cal-day.cal-today{background:#f3eefb} .cal-daynum{font-size:.82rem;font-weight:700;margin-bottom:3px} .cal-day.cal-today .cal-daynum{display:inline-block;background:var(--accent);color:#fff; width:22px;height:22px;line-height:22px;text-align:center;border-radius:50%} .cal-events{display:flex;flex-direction:column;gap:2px} /* カラー帯バー：カテゴリ色・白文字・はみ出しは省略 */ .cal-bar{display:flex;align-items:center;gap:4px;font-size:.72rem;color:#fff; padding:2px 6px;border-radius:6px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis; line-height:1.3} .cal-bar:hover{opacity:.88} /* task#70：バーは予定名を主役に。終日は小さな●印・🔁🔔 は最小マークで右に添える */ .cal-bar-allday{flex:none;font-size:.5rem;line-height:1;opacity:.9} .cal-bar-mk{flex:none;font-size:.62rem;line-height:1} .cal-bar-title{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis} .cal-add-day{position:absolute;right:3px;bottom:2px;color:var(--sub);font-size:.9rem; opacity:0;transition:opacity .15s} .cal-day:hover .cal-add-day{opacity:.7} .cal-add-day:hover{color:var(--accent)} /* --- 右下FAB --- */ /* task#10：下固定タブバー(56px)と重ならないよう bottom を引き上げ（タブ高+余白+安全域）。 */ .cal-fab{position:fixed;right:max(22px,env(safe-area-inset-right)); bottom:calc(72px + env(safe-area-inset-bottom));width:56px;height:56px;border-radius:50%; background:var(--accent);color:#fff;font-size:1.9rem;line-height:56px;text-align:center; box-shadow:0 4px 16px rgba(90,70,140,.4);z-index:20;-webkit-tap-highlight-color:transparent} .cal-fab:hover{opacity:.92;color:#fff} .cal-fab:active{transform:scale(.94)} /* ============ 入力＝TimeTree風 シート（縦に項目が並ぶ・行アイコン＋トグル） ============ */ /* task#70：シート上の余白が空きすぎとの指摘。dash-main の上 padding(24px)を打ち消し 気味に詰める（-12px）。共通レイアウト(layout.php)は他ページ共用なので触らず、.cal-sheet 側で吸収。 */ .cal-sheet{max-width:600px;margin:-12px auto 0;background:var(--card); border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)} /* シート上部バー：左×・中央タイトル・右「保存」ピル task#70：以前は position:sticky;top:56px で、スクロール時にバーが直後のタイトル入力欄を 不透明背景で覆い隠していた（＝「予定名を入れる場所が消えた」の正体）。 sticky を外し通常フローに戻すことでタイトル欄を覆わない＝根治。 （バーは常に最上部にあり×/保存はすぐ届くため sticky は不要） */ .cal-sheet-bar{display:flex;align-items:center;justify-content:space-between;gap:10px; padding:10px 14px;border-bottom:1px solid var(--line);background:var(--card)} .cal-sheet-title{font-size:.95rem;font-weight:700;color:var(--text)} .cal-pill{display:inline-flex;align-items:center;justify-content:center;gap:4px; min-width:40px;height:38px;padding:0 16px;border-radius:999px;font-size:.92rem;font-weight:700; border:1px solid var(--line);background:var(--card);color:var(--text);cursor:pointer; font-family:inherit;-webkit-tap-highlight-color:transparent} .cal-pill.ghost{width:38px;height:38px;padding:0;font-size:1.3rem;color:var(--sub)} .cal-pill.ghost:hover{color:var(--text);background:#f3eefb} .cal-pill.primary{background:var(--accent);color:#fff;border-color:var(--accent)} .cal-pill.primary:hover{opacity:.92} /* シート本文 */ .cal-sheet-body{padding:4px 0} /* 大きいタイトル入力（task#71：見本=TimeTreeに合わせ見出しラベルを撤去＝入力欄のみ。 プレースホルダ「予定名を入力」で役割が分かる。大きめ・クリーンに見せる。 */ .cal-titlefield{padding:14px 16px;border-bottom:1px solid var(--line)} .cal-titlefield input{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:10px; background:#fff;font-size:1.2rem;font-weight:700;color:var(--text);font-family:inherit;padding:12px 14px} .cal-titlefield input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px rgba(142,111,196,.18)} .cal-titlefield input::placeholder{color:var(--sub);font-weight:600;font-size:.95rem} /* 誰と（task#71：予定名と同じく見出し無し＝アイコン＋入力欄のみ。プレースホルダ「予定相手」をグレー表示） */ .cal-whofield{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--line)} .cal-whofield-icon{font-size:1.1rem;flex:none;width:24px;text-align:center;color:var(--sub)} .cal-whofield input{flex:1 1 auto;min-width:0;box-sizing:border-box} .cal-whofield input::placeholder{color:var(--sub)} /* 行レイアウト：左にアイコン＋ラベル、右に入力（task#71：見本=TimeTreeに合わせ全行を1行で右寄せ） gap を 8px に詰め、ラベルの min-width を縮めて狭幅でも横1行を維持する（縦積みにしない）。 */ .cal-row{display:flex;align-items:center;gap:8px;padding:13px 16px;border-bottom:1px solid var(--line)} .cal-row.is-col{flex-direction:column;align-items:stretch;gap:8px} .cal-row:last-child{border-bottom:0} .cal-row-icon{font-size:1.1rem;flex:none;width:24px;text-align:center;color:var(--sub)} /* ラベルは折り返さず固定幅（広すぎると入力が押されるので 72px に。狭幅でさらに詰める） */ .cal-row-label{font-size:.86rem;font-weight:700;color:var(--text);flex:none;min-width:72px;white-space:nowrap} .cal-row-ctrl{flex:1 1 auto;min-width:0;display:flex;justify-content:flex-end;align-items:center;gap:8px} /* 行内の入力は右側スペースを埋めて伸縮（inline style width:100% を廃し CSS に寄せた＝1行右寄せの根治） */ .cal-row-ctrl > .cal-input{flex:1 1 auto;min-width:0} .cal-row.is-col .cal-row-head{display:flex;align-items:center;gap:12px} .cal-row.is-col .cal-row-ctrl{justify-content:flex-start;padding-left:36px} /* チップ/ピル風の日時・セレクト入力 */ /* iOS Safari は入力欄の font-size が16px未満だとタップ時に自動ズームしレイアウトが崩れる。 .cal-titlefield input(1.2rem)・.login-fld input(1rem) の流儀に合わせ 1rem(=16px) で抑止する（root既定16px前提）。 */ .cal-input{padding:9px 12px;border:1px solid var(--line);border-radius:10px;font-size:1rem; font-family:inherit;background:#fff;color:var(--text);box-sizing:border-box;max-width:100%} .cal-input:focus{outline:none;border-color:var(--accent)} .cal-input.cal-cat-dot{display:inline-flex;align-items:center;gap:7px} select.cal-input{cursor:pointer} /* 日付＋時刻はTimeTree同様に必ず1行（折り返さない）。min-widthを320px幅に収まるよう縮小 */ .cal-dt-chip{display:flex;gap:6px;align-items:center;flex-wrap:nowrap;width:100%;justify-content:flex-end} .cal-dt-chip input[type=date]{flex:1 1 110px;min-width:104px} .cal-dt-chip input[type=time]{flex:0 1 92px;min-width:76px} /* TimeTree風ピル：角丸を強め、開始の日付ピルはアクセント寄りに薄く強調（ライトトーン維持） */ .cal-dt-chip input[type=date],.cal-dt-chip input[type=time]{border-radius:999px;text-align:center} .cal-dt-chip input[type=date]{background:#f3eefb;border-color:#d9ccf0;color:var(--text);font-weight:700} .cal-dt-chip input[type=date]:focus{background:#fff;border-color:var(--accent)} textarea.cal-input{width:100%;resize:vertical;line-height:1.5} /* メモ行は1カラムで広く */ .cal-hint{font-size:.74rem;color:var(--sub);line-height:1.5;padding:2px 16px 10px;display:block} /* トグルスイッチ（終日） */ .cal-switch{position:relative;display:inline-block;width:50px;height:28px;flex:none} .cal-switch input{position:absolute;opacity:0;width:0;height:0} .cal-switch .cal-slider{position:absolute;inset:0;background:#cfc8de;border-radius:999px; transition:background .18s;cursor:pointer} .cal-switch .cal-slider::before{content:"";position:absolute;width:22px;height:22px;left:3px;top:3px; background:#fff;border-radius:50%;transition:transform .18s;box-shadow:0 1px 3px rgba(0,0,0,.25)} .cal-switch input:checked + .cal-slider{background:var(--accent)} .cal-switch input:checked + .cal-slider::before{transform:translateX(22px)} /* シート下部：削除など */ .cal-sheet-foot{padding:14px 16px;border-top:1px solid var(--line)} .cal-del-btn{width:100%;color:#b3261e;border-color:#f3c2c2;background:#fff; padding:11px;border-radius:10px;font-weight:700;cursor:pointer;font-family:inherit;font-size:.92rem} .cal-del-btn:hover{background:#fdecec;color:#b3261e;border-color:#e89a9a} .cal-sheet-back{display:block;text-align:center;font-size:.84rem;color:var(--sub);margin-top:12px} /* --- スマホ対応（375px想定で破綻しない） --- */ @media(max-width:640px){ .cal-top{flex-wrap:wrap} .cal-ym-m{font-size:1.45rem} .cal-monthlabel{min-width:96px} /* 狭幅：「今日」はヘッダー右端の絶対配置をやめ、必要なら次行へ折り返す（重なり/はみ出し防止） */ /* task#70：狭幅は右側アクション群（今日/ICS取込）を絶対配置やめて次行へ折り返す（重なり防止） */ .cal-top-actions{position:static;transform:none;margin-left:auto;flex-wrap:wrap;justify-content:flex-end} .cal-today-btn,.cal-import-btn{padding:5px 10px;font-size:.72rem} .cal-navbtn{width:36px;height:36px;font-size:1.3rem} /* task#74⑤：モバイルも日セルを少し大きく（72→90px。極狭は下の 380px 帯で程々に抑える） */ .cal-day{height:90px;padding:2px} .cal-bar{padding:2px 4px;border-radius:5px;gap:2px} .cal-bar-mk{font-size:.56rem} .cal-bar-title{font-size:.64rem} /* スマホでもタイトルは消さず縮小して残す */ .cal-daynum{font-size:.76rem} .cal-grid th{font-size:.7rem;padding:6px 2px} /* 入力シート（task#71：見本=TimeTree。以前は flex-wrap:wrap でラベル上・入力下に縦積みして 「改行だらけ」になっていた＝これを撤廃し、狭幅でも全行を横1行・入力は右寄せに保つ）。 ラベル幅と gap を詰め、padding を縮めて 320px でも横スクロールが出ないようにする。 */ .cal-row{gap:8px;padding:13px 14px} .cal-row-label{min-width:0;font-size:.84rem} .cal-row-icon{width:22px} .cal-titlefield,.cal-whofield{padding-left:14px;padding-right:14px} /* シートをモバイルで全幅に：.dash-main の左右padding(18px)を負マージンで打ち消し画面端まで。 端まで使うので枠線/角丸/横影は外す（見本の全幅感）。共通レイアウトは触らず .cal-sheet 側で吸収。 */ .cal-sheet{margin-left:-18px;margin-right:-18px;border-left:0;border-right:0;border-radius:0; box-shadow:0 1px 0 var(--line)} } @media(max-width:340px){ .cal-day{height:82px} /* task#74⑤：極狭(≤340px)のみ程々に（90→82px）。375pxは上の90pxが効く */ .cal-bar-title{display:none} /* 極狭幅のみ：色帯＋時刻に割り切る */ /* 320px帯：日時ピルと時刻の最小幅をさらに詰めて横1行を死守 */ .cal-row{gap:6px;padding:12px} .cal-dt-chip input[type=date]{min-width:92px;flex:1 1 96px} .cal-dt-chip input[type=time]{min-width:68px} /* 極狭でも font-size は 16px(1rem) を維持（iOS自動ズーム抑止）。左右paddingのみ詰める */ .cal-input{padding:9px 8px} } /* ============================================================ task#73：予定カテゴリ管理（calendar_categories.php） TimeTree「予定のラベルを管理」相当。既存 .cal-* トークンを流用し新規は .cal-cat-* に限定。 ============================================================ */ .cal-cat{max-width:640px} .cal-cat-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:4px} .cal-cat-title{font-size:1.15rem;margin:0} .cal-cat-head .cal-sheet-back{margin-top:0} /* 見出し横に置くので上マージンを消す */ .cal-cat-list{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:10px} .cal-cat-item{background:var(--card);border:1px solid var(--line);border-radius:var(--radius); padding:12px 14px;box-shadow:var(--shadow)} .cal-cat-row{display:flex;align-items:center;gap:10px;flex-wrap:nowrap} .cal-cat-name{flex:1 1 40px;min-width:0} /* 名前欄は縮小許容＝狭幅でも色/保存を右端に収める */ .cal-cat-color{flex:none;width:42px;height:34px;padding:2px;border:1px solid var(--line); border-radius:8px;background:#fff;cursor:pointer} .cal-cat-save{flex:none} .cal-cat-meta{display:flex;align-items:center;justify-content:space-between;gap:10px; margin-top:8px;padding-top:8px;border-top:1px dashed var(--line)} .cal-cat-used{font-size:.78rem;color:var(--sub)} .cal-cat-del{color:#b3261e;border:1px solid #f3c2c2;background:#fff; padding:6px 12px;border-radius:999px;font-size:.8rem;cursor:pointer;font-family:inherit} .cal-cat-del:hover:not(:disabled){background:#fdecec;border-color:#e89a9a} .cal-cat-del:disabled{color:#bbb;border-color:var(--line);cursor:not-allowed} .cal-cat-add{margin-top:20px;background:#faf8fe;border:1px dashed var(--line); border-radius:var(--radius);padding:14px 16px} .cal-cat-add-label{display:block;font-size:.86rem;font-weight:700;color:var(--text);margin-bottom:10px} .cal-cat-add-row{display:flex;align-items:center;gap:10px;flex-wrap:nowrap} @media(max-width:640px){ .cal-cat-row,.cal-cat-add-row{gap:8px} .cal-cat-color{width:38px;height:32px} .cal-cat-save{padding:6px 12px} } /* ============================================================ 招待発行（invite.php）＝ページ内