/* ===================================================== GLOW 共通デザイン v3（全ページ共有） - デザイン画像2枚（明るい=シャンパンピンク×金／ダーク=夜ベルベット×ピンク発光）準拠。 - テーマは で一括切替（localStorage 'sm_theme'）。 - 色は必ず var(--〜) を使う。ページ側に生の色コードを書かない。 ===================================================== */ /* ---- 下のタブでの画面切り替えを「白い画面をはさまず」つなぐ（2026-07-30追加） ---- GLOWは画面ごとに別ファイルなので、タブを押すとブラウザが本当にページを読み直す。 そのあいだ一瞬白くなるのが「待たされた」と感じる正体だった。 これを入れると、次の画面が用意できるまで前の画面を出したまま、さっと重ねて切り替わる。 対応していないブラウザ（古いiOS等）では、この指定は無視されるだけで悪影響はない。 */ @view-transition{ navigation:auto; } ::view-transition-old(root), ::view-transition-new(root){ animation-duration:.12s; } /* 動きを減らす設定にしている人には、アニメーションを付けない */ @media (prefers-reduced-motion:reduce){ ::view-transition-old(root), ::view-transition-new(root){ animation:none; } } /* ---- ホワイトモード（ポップ・標準） ---- */ :root, html[data-theme="light"]{ --pink:#ff4f97; --pink-d:#ff2e86; --pink-l:#ffc4de; --soft:#ffe6f2; --gold:#ffb43a; --gold-l:#ffd98a; --gold-glow:rgba(255,180,58,.28); --ink:#3a2331; --gray:#9a8791; /* 影は3層（大きくやわらかい影＋近い影＋上辺のうす光）で安っぽさを消す */ --card:#ffffff; --card-bd:#ffd6ea; --card-sh:0 10px 26px rgba(255,79,151,.14), 0 3px 10px rgba(150,110,230,.08), 0 1px 3px rgba(58,35,49,.06), inset 0 1px 0 rgba(255,255,255,.9); --panel:#fff2f9; --panel2:#ffe8f3; --input-bg:#fff; --chip-bg:#fff; --head-bg:rgba(255,250,253,.86); --head-bd:rgba(255,160,205,.45); --tab-bg:rgba(255,252,254,.94); --tab-bd:#ffc4de; --tab-active:linear-gradient(160deg,#ffe9f5,#ffd9ec); --glow:0 7px 18px rgba(255,46,134,.34); --toast-bg:#ff2e86; --toast-ink:#fff; --radius:22px; } html[data-theme="light"] body{ background: radial-gradient(420px 300px at 110% -40px, #ffdcef 0%, transparent 68%), radial-gradient(380px 280px at -60px 18%, #e4efff 0%, transparent 70%), radial-gradient(360px 320px at 50% 116%, #fff2d4 0%, transparent 70%), linear-gradient(168deg,#ffffff 0%,#fff3fa 55%,#fdebf6 100%); } /* ===== ホワイトモードだけポップに振り切る（ダークは据え置き） ===== */ html[data-theme="light"] .card, html[data-theme="light"] .menu-card, html[data-theme="light"] .buddy, html[data-theme="light"] .stats .stt, html[data-theme="light"] .summary, html[data-theme="light"] .cal, html[data-theme="light"] .graph{ border:2px solid #ffd0e6; } html[data-theme="light"] .btn{ background:linear-gradient(135deg,#ff62b0 0%,#ff2e86 55%,#ff7a5a 100%); border-radius:18px; } /* ghost（白背景ボタン）は上のグラデ上書きより強くして可読性を守る */ html[data-theme="light"] .btn.btn-ghost, html[data-theme="dark"] .btn.btn-ghost{ background:var(--card); color:var(--pink-d); } html[data-theme="light"] .menu-card .ic{ background:linear-gradient(160deg,#fff0f8,#ffdcee); border:2px solid #ffcbe6; } html[data-theme="light"] .menu-card .st.on{ background:linear-gradient(135deg,#ffcf5b,#ff8fb2); color:#fff; } html[data-theme="light"] .hello{ color:#ff2e86; } html[data-theme="light"] h1{ color:#ff2e86; } html[data-theme="light"] .tabbar .ti.active{ background:linear-gradient(160deg,#ffe3f2,#ffd0e8); } /* メニューアイコンのタイルを色ごとに変えてポップに（順番で色替え） */ html[data-theme="light"] .menu .menu-card:nth-child(1) .ic{ background:linear-gradient(160deg,#ffe0ef,#ffc6e0); } html[data-theme="light"] .menu .menu-card:nth-child(2) .ic{ background:linear-gradient(160deg,#e6ecff,#cddcff); color:#5b6ff0; } html[data-theme="light"] .menu .menu-card:nth-child(3) .ic{ background:linear-gradient(160deg,#fff2cf,#ffe19e); color:#e59a1f; } html[data-theme="light"] .menu .menu-card:nth-child(4) .ic{ background:linear-gradient(160deg,#d8f7e6,#b6efcf); color:#1f9d63; } html[data-theme="light"] .menu .menu-card:nth-child(5) .ic{ background:linear-gradient(160deg,#f0e2ff,#ddc6ff); color:#8a5bf0; } /* ---- ダークモード（夜のベルベット） ---- */ html[data-theme="dark"]{ --pink:#ff5fa2; --pink-d:#ff4f9e; --pink-l:#6e2c4d; --soft:#4a1f38; --gold:#e0b25c; --gold-l:#a5824a; --gold-glow:rgba(224,178,92,.30); --ink:#f7e9f2; --gray:#b89aad; /* 影は3層＋上辺に金のうす光（夜ベルベットの高級感） */ --card:#2a1430; --card-bd:rgba(224,178,92,.32); --card-sh:0 10px 26px rgba(0,0,0,.45), 0 0 18px rgba(255,79,158,.12), inset 0 1px 0 rgba(224,178,92,.14); --panel:#351a3c; --panel2:#3d1c40; --input-bg:#1f0f24; --chip-bg:#351a3c; --head-bg:rgba(26,11,29,.85); --head-bd:rgba(224,178,92,.35); --tab-bg:rgba(22,9,25,.94); --tab-bd:rgba(224,178,92,.45); --tab-active:linear-gradient(160deg,#4a1f38,#5c2344); --glow:0 6px 20px rgba(255,79,158,.45); --toast-bg:#f7e9f2; --toast-ink:#3a1030; } html[data-theme="dark"] body{ background: radial-gradient(480px 340px at 112% -60px, rgba(255,79,158,.16) 0%, transparent 70%), radial-gradient(420px 320px at -70px 30%, rgba(224,178,92,.10) 0%, transparent 70%), linear-gradient(168deg,#170a1b 0%,#241026 55%,#2e1030 100%); } *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;} html{scroll-behavior:smooth;} body{ margin:0; font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic","Meiryo",sans-serif; background-attachment:fixed; color:var(--ink); padding:14px 14px calc(86px + env(safe-area-inset-bottom)); line-height:1.7; min-height:100vh; transition:background .25s, color .25s; } .wrap{max-width:560px; margin:0 auto;} /* GLOWの見出しは高級感のあるセリフ体＋広め字間（デザイン画像準拠） */ h1{font-size:1.3rem; text-align:center; margin:8px 0 2px; font-family:Georgia,"Times New Roman","Yu Mincho","Hiragino Mincho ProN",serif; letter-spacing:.24em; color:var(--ink);} /* 金の下線：中央が明るい2層グラデ＋にじむ光で「輝き」を出す（点滅はさせない） */ h1::after{content:''; display:block; width:70px; height:2px; margin:7px auto 0; border-radius:2px; background:linear-gradient(90deg,transparent,var(--gold) 35%,var(--gold-l) 50%,var(--gold) 65%,transparent); box-shadow:0 0 8px var(--gold-glow), 0 1px 4px var(--gold-glow);} .sub{text-align:center; color:var(--gray); font-size:.82rem; margin-bottom:16px;} .hidden{display:none !important;} /* ---- ふわっと出る共通アニメ ---- */ @keyframes fadeUp{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;}} @keyframes pop{0%{transform:scale(.6); opacity:0;} 70%{transform:scale(1.08);} 100%{transform:scale(1); opacity:1;}} .fade-up{animation:fadeUp .4s ease both;} /* ---- カード（金の細枠＝デザイン画像準拠） ---- */ .card{background:var(--card); border-radius:var(--radius); padding:16px; box-shadow:var(--card-sh); border:1px solid var(--card-bd);} /* ---- 入力 ---- */ .field{margin-bottom:12px;} .field label{display:block; font-size:.74rem; color:var(--gray); margin-bottom:4px; font-weight:700;} .field input{width:100%; border:2px solid var(--soft); border-radius:12px; padding:11px 12px; font-size:1rem; color:var(--ink); background:var(--input-bg); outline:none; transition:border-color .15s;} .field input:focus{border-color:var(--pink);} .err{color:#e0356b; font-size:.82rem; margin:-4px 2px 12px; min-height:1em;} html[data-theme="dark"] .err{color:#ff8fb8;} /* ---- ボタン（ピンクの発光グラデ） ---- */ .btn{display:block; width:100%; border:none; cursor:pointer; background:linear-gradient(135deg,var(--pink),var(--pink-d)); color:#fff; font-size:1.02rem; font-weight:800; padding:14px; border-radius:16px; box-shadow:var(--glow), inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 4px rgba(0,0,0,.10); /* 上辺に光沢・下辺に締まり */ transition:transform .12s, box-shadow .12s; letter-spacing:.02em;} .btn:active{transform:scale(.97); box-shadow:0 3px 10px rgba(255,46,134,.28), inset 0 2px 4px rgba(0,0,0,.12);} /* 押した感 */ .btn-ghost{background:var(--card); color:var(--pink-d); border:2px solid var(--pink-l); box-shadow:none; font-size:.92rem; padding:11px;} .check{display:flex; align-items:center; gap:8px; font-size:.85rem; color:var(--gray); margin:6px 2px 14px; cursor:pointer;} .check input{width:18px; height:18px; accent-color:var(--pink);} /* ---- ホームのメニュー ---- */ .hello{text-align:center; font-size:.95rem; color:var(--pink-d); font-weight:800; margin-bottom:14px;} .menu{display:flex; flex-direction:column; gap:12px;} .menu-card{display:flex; align-items:center; gap:14px; text-decoration:none; background:var(--card); border-radius:var(--radius); padding:15px 16px; color:var(--ink); box-shadow:var(--card-sh); border:1px solid var(--card-bd); transition:transform .12s;} .menu-card:active{transform:scale(.98);} .menu-card .ic{font-size:1.7rem; width:52px; height:52px; flex:none; display:flex; align-items:center; justify-content:center; background:var(--tab-active); border-radius:16px; border:1px solid var(--card-bd);} .menu-card .txt{flex:1; min-width:0;} .menu-card .t{font-weight:800; font-size:1rem; display:block;} .menu-card .d{font-size:.76rem; color:var(--gray); margin-top:2px; display:block;} .menu-card .st{font-size:.68rem; font-weight:800; padding:3px 9px; border-radius:999px; flex:none;} .st.on{background:var(--soft); color:var(--pink-d);} .st.soon{background:var(--panel); color:var(--gray);} /* ---- 機能ページ共通ヘッダー ---- */ .pagehead{position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:10px; margin:-14px -14px 14px; padding:12px 16px calc(10px); background:var(--head-bg); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--head-bd);} .pagehead .home{font-size:.82rem; color:var(--pink-d); background:var(--card); border:1.5px solid var(--pink-l); border-radius:999px; padding:6px 13px; text-decoration:none; flex:none; font-weight:700;} .pagehead .pt{font-size:1.1rem; font-weight:800; flex:1;} .pagehead .action{font-size:.8rem; color:var(--pink-d); background:var(--card); border:1.5px solid var(--pink-l); border-radius:999px; padding:6px 12px; cursor:pointer; font-weight:700; flex:none;} /* ---- 下タブバー（金の縁取り＝デザイン画像準拠） ---- */ .tabbar{position:fixed; left:0; right:0; bottom:0; z-index:40; display:flex; justify-content:space-around; align-items:stretch; background:var(--tab-bg); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-top:1px solid var(--tab-bd); padding:6px 4px calc(6px + env(safe-area-inset-bottom)); box-shadow:0 -6px 20px rgba(0,0,0,.08);} .tabbar .ti{flex:1; display:flex; flex-direction:column; align-items:center; gap:1px; text-decoration:none; color:var(--gray); font-size:1.25rem; padding:5px 0 3px; border-radius:14px; transition:.15s; line-height:1.25;} .tabbar .ti span{font-size:.58rem; font-weight:700; letter-spacing:.02em;} .tabbar .ti.active{color:var(--pink-d); background:var(--tab-active); box-shadow:0 0 12px rgba(255,79,158,.18);} .tabbar .ti:active{transform:scale(.94);} /* ---- ホバー反応（マウスがある端末だけ。スマホには影響しない） ---- */ @media (hover:hover){ .menu-card:hover{transform:translateY(-2px);} .btn:hover{filter:brightness(1.05);} .btn-ghost:hover{filter:none; background:var(--soft);} .chip:hover{border-color:var(--pink-l);} .theme-row button:hover{border-color:var(--pink-l);} } /* ---- チップ（共通） ---- */ .chips{display:flex; flex-wrap:wrap; gap:7px;} .chip{border:2px solid var(--soft); background:var(--chip-bg); color:var(--ink); border-radius:999px; padding:7px 14px; font-size:.86rem; cursor:pointer; font-weight:700; transition:.15s;} .chip.active{background:var(--pink); border-color:var(--pink); color:#fff; box-shadow:0 3px 10px rgba(232,77,138,.3);} /* ---- トースト（共通） ---- */ #toast{position:fixed; left:50%; bottom:calc(96px + env(safe-area-inset-bottom)); transform:translateX(-50%) translateY(20px); background:var(--toast-bg); color:var(--toast-ink); padding:11px 20px; border-radius:999px; font-size:.85rem; opacity:0; transition:.25s; pointer-events:none; z-index:120; /* モーダル(80)より前に出す */ max-width:88%; text-align:center;} #toast.show{opacity:1; transform:translateX(-50%) translateY(0);} /* ---- バックアップ行（共通） ---- */ .backup{margin-top:20px; border-top:1px dashed var(--card-bd); padding-top:14px;} .backup .row{display:flex; gap:8px;} .backup button, .backup label{flex:1; text-align:center; border:2px solid var(--soft); background:var(--card); color:var(--pink-d); border-radius:12px; padding:10px; font-size:.84rem; font-weight:800; cursor:pointer;} .backup .note{font-size:.72rem; color:var(--gray); margin-top:7px; text-align:center;} .soon-box{text-align:center; color:var(--gray); padding:30px 16px;} .soon-box .big{font-size:2.4rem; margin-bottom:8px;} .willdo{background:var(--card); border-radius:16px; padding:14px 18px; margin-top:14px; box-shadow:var(--card-sh); font-size:.9rem; border:1px solid var(--card-bd);} .willdo li{margin:5px 0;} /* ---- テーマ切替スイッチ（ホーム設定用） ---- */ .theme-row{display:flex; gap:8px; margin-bottom:10px;} .theme-row button{flex:1; border:2px solid var(--soft); background:var(--chip-bg); color:var(--ink); border-radius:12px; padding:10px; font-size:.86rem; font-weight:800; cursor:pointer; transition:.15s; display:flex; align-items:center; justify-content:center; gap:6px;} .theme-row button.active{background:var(--pink); border-color:var(--pink); color:#fff; box-shadow:var(--glow);} /* ---- SVGアイコン（icons.js）共通 ---- 絵文字のかわりに使う線画アイコン。色は文字色(currentColor)を継ぐ。 */ svg.gi{width:1.1em; height:1.1em; display:inline-block; vertical-align:-0.18em; flex:none;} [data-ic]{display:inline-flex; align-items:center; justify-content:center; line-height:1;} /* タブバー：アイコンを絵文字と同等サイズに */ .tabbar .ti [data-ic] svg.gi{width:22px; height:22px;} .tabbar .ti [data-ic]{padding:2px 0 1px;} /* ホームメニューの角丸タイル内アイコン */ .menu-card .ic svg.gi{width:26px; height:26px;} .menu-card .ic{color:var(--pink-d);} /* ページ見出し・セクション見出しのアイコンは金で高級感 */ .pagehead .pt [data-ic], h2 [data-ic], h3 [data-ic]{color:var(--gold); margin-right:2px;} .pagehead .home [data-ic] svg.gi{width:17px; height:17px;} /* ボタン内のアイコン */ .btn [data-ic]{vertical-align:-0.18em; margin-right:4px;} /* ---- アイコンが入る前に「場所」を先に確保しておく（2026-07-30追加） ---- アイコンはJS（icons.js）が後からSVGを入れる作りなので、 入った瞬間に大きさが変わって画面がガタッと動いていた。 大きいアイコン（下のタブ・ホームのメニュー）だけ先に大きさを決めておく。 */ .tabbar .ti [data-ic]{display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px;} .menu-card .ic[data-ic], .menu-card .ic{display:inline-flex; align-items:center; justify-content:center; min-width:26px; min-height:26px;} /* ---- 評価の色ドット（良客/普通/注意/NG） ---- */ .dot{display:inline-block; width:.6em; height:.6em; border-radius:50%; margin-right:5px; flex:none;} .dot.ok{background:#3fbf7f;} .dot.normal{background:#b9bac6;} .dot.warn{background:#f0a53a;} .dot.ng{background:#e0356b;} /* ---- 幅のせまいスマホ（〜380px）向けの詰め調整（はみ出し防止） ---- */ @media (max-width:380px){ /* お金カレンダーのマス目：余白と文字を少しだけ小さく */ .cal{padding:9px;} .cal .days{gap:2px;} .day{min-height:60px; padding:3px 1px;} .day .dn{font-size:.62rem;} .day .amt{font-size:.54rem; padding:1px 1px;} .cal .wd{font-size:.62rem;} /* チップ群（口調・区分・評価など）：詰めて折り返しやすく */ .chips{gap:5px;} .chip{padding:6px 11px; font-size:.8rem;} }