/* ═══════════════════════════════════════════════════════════════
   ホーム(メニュー) 案3a「すっきりヘッダー」 2026-10-10 BOSS採用
   デザイン原本: NAS プロジェクト/あぷり/README.md（色・寸法はそこが正）
   pocket.css の旧ホーム用ルール(.tiles.row 等)とぶつからないよう、名前は全部 m3- で始める
   字体はiPhone内蔵の丸ゴシック・アイコンは static/home-icons.js（Googleから読まない＝BOSS決定）
   ═══════════════════════════════════════════════════════════════ */
body:has(#home.m3:not(.hide)){background:#FFFCF4}
#home.m3{color:#3D3A4A!important;min-height:100vh}
.m3-wrap{width:100%;min-width:0;max-width:430px;margin:0 auto;padding:34px 18px calc(24px + env(safe-area-inset-bottom));
         display:flex;flex-direction:column;gap:16px}
.m3 svg{display:block;fill:currentColor}

/* 1. ヘッダー */
.m3-head{min-height:56px;display:flex;align-items:center;gap:8px}
.m3-owl{width:42px;height:44px;object-fit:contain;flex-shrink:0;display:block}
.m3-tt{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.m3-dots{display:flex;gap:4px}
.m3-dots i{width:8px;height:8px;border-radius:50%;display:block}
.m3-dots i:nth-child(1){background:#F2708A}.m3-dots i:nth-child(2){background:#F5A04A}.m3-dots i:nth-child(3){background:#F2C935}
.m3-dots i:nth-child(4){background:#5DBB72}.m3-dots i:nth-child(5){background:#4BB4CC}.m3-dots i:nth-child(6){background:#9479D9}
.m3-name{font-size:18px;font-weight:900;line-height:1.2;white-space:nowrap;color:#4A3B32}
.m3-kid{flex-shrink:0;min-height:44px;padding-left:8px;display:flex;align-items:center;
        font-size:14px;font-weight:900;color:#3D3A4A;white-space:nowrap}
.m3-kid:empty{display:none}

/* 2. うちの子写真（/kidphoto で4:3に切って保存しているので、比率は4:3のまま） */
.m3-photo{border-radius:26px;overflow:hidden;background:#F4F1EF;aspect-ratio:4/3}
.m3-photo img{width:100%;height:100%;object-fit:cover;display:block}

/* 3. 確認してほしいこと */
.m3-nh{display:flex;align-items:center;gap:6px;font-size:17px;font-weight:900;margin-bottom:10px;color:#3D3A4A}
.m3-nh svg{width:22px;height:22px;color:#F2708A;flex-shrink:0}
.m3-ncard{background:#fff;border:2px solid #F0EADB;border-radius:22px;overflow:hidden}
.m3-row{display:flex;align-items:center;gap:12px;padding:14px;min-height:64px;text-decoration:none;color:#3D3A4A}
.m3-row+.m3-row{border-top:2px dashed #F0EADB}
a.m3-row:active{background:#FBF8F0}
.m3-ri{width:40px;height:40px;border-radius:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
       background:var(--bg3);color:var(--fg3)}
.m3-ri svg{width:24px;height:24px}
.m3-rt{flex:1;min-width:0}
.m3-rt b{display:block;font-size:15px;font-weight:900;line-height:1.4}
.m3-rt span{display:block;font-size:12px;font-weight:700;color:#6E6878;line-height:1.5;margin-top:1px}
.m3-rt .nb{display:inline}
.m3-chev{width:24px;height:24px;color:#B5AE9E;flex-shrink:0}
/* 締切当日でまだ出していない行（2026-10-13 BOSS決定 案A）。「視差効果を減らす」の人は揺らさず色と札だけ */
.m3-urgent{background:#FFF4F4}
.m3-urgent .m3-rt b{color:#C62828}
.m3-urgent .m3-ri{animation:m3buzz 2s ease-in-out infinite}
.m3-due{display:inline-block;margin-left:6px;padding:0 8px;border-radius:999px;background:#D32F2F;color:#fff;
        font-style:normal;font-size:12px;font-weight:900;line-height:1.6;vertical-align:1px}
@keyframes m3buzz{0%,76%,100%{transform:rotate(0)}80%{transform:rotate(-14deg)}84%{transform:rotate(12deg)}
                  88%{transform:rotate(-10deg)}92%{transform:rotate(6deg)}96%{transform:rotate(-2deg)}}
@media (prefers-reduced-motion:reduce){.m3-urgent .m3-ri{animation:none}}

/* 4. ボタン（2列・全部同じ形。数が奇数なら空いた所は何も出さない＝BOSS決定） */
.m3-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.m3-tile{background:var(--bg3);border-radius:24px;padding:14px 12px 14px 14px;min-height:118px;
         display:flex;flex-direction:column;justify-content:space-between;gap:8px;
         box-shadow:0 3px 0 var(--sh3);text-decoration:none;color:#3D3A4A;border:none;text-align:left;
         font-family:inherit;cursor:pointer}
.m3-tile:active{transform:translateY(2px);box-shadow:0 1px 0 var(--sh3)}
.m3-ti{width:48px;height:48px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;color:var(--fg3)}
.m3-ti svg{width:28px;height:28px}
.m3-tl{font-size:18px;font-weight:900;line-height:1.3}
.m3-td{font-size:clamp(10.5px,calc(100vw / 25 - 4.1px),12px);font-weight:700;color:#5E5A66;line-height:1.45;margin-top:2px}

/* 機能の色（アプリ全体で固定） */
.k-pink  {--bg3:#FFE1E6;--fg3:#C2415D;--sh3:#F5C3CD}
.k-orange{--bg3:#FFE6CC;--fg3:#C2651C;--sh3:#F5CDA5}
.k-yellow{--bg3:#FFF2B8;--fg3:#9A7300;--sh3:#F0DE8A}
.k-green {--bg3:#DDF3DF;--fg3:#2F8446;--sh3:#BFE3C3}
.k-blue  {--bg3:#D6EFF5;--fg3:#1F7F94;--sh3:#B3DDE8}
.k-purple{--bg3:#ECE3FA;--fg3:#7650C2;--sh3:#D6C7F2}
.k-red   {--bg3:#FFD9D9;--fg3:#D32F2F;--sh3:#F5B5B5}   /* 締切当日の「確認してほしいこと」だけで使う */

/* 5. 使い方・このアプリについて */
.m3-foot{display:flex;gap:10px}
.m3-foot button{flex:1;min-height:48px;background:#fff;border:2px solid #E8E2D2;border-radius:16px;
                font-family:inherit;font-size:14px;font-weight:900;color:#3D3A4A;padding:6px 8px;line-height:1.35;cursor:pointer}
.m3-foot button:active{background:#FBF8F0}
.m3-foot button+button{margin-left:0}

/* 6. 注記・開いたカード（pocket.css の青文字指定を上書き） */
#home.m3 .foot-note{text-wrap:balance;color:#6E6878!important;font-size:12px!important;line-height:1.6;margin-top:0!important}
#home.m3 .help-card,#home.m3 .help-card .h,#home.m3 .help-step{color:#3D3A4A!important}
#home.m3 .help-card{margin-top:0;border:2px solid #F0EADB;border-radius:22px;box-shadow:none}
#home.m3 .help-card .h{border-top-color:#F0EADB}
#home.m3 .help-step{background:#FFF8EC}

@media (max-width:359px){ .m3-name{font-size:15px} .m3-kid{font-size:13px} .m3-owl{width:36px;height:38px} }