/* 外枠（5タブ）とホーム・練習・分析タブの見た目（2026-09-25 UI 作り替え）。 色は styles.css の役割変数（--bg / --surface / --text …）だけを使い、ライト/ダークは で切り替わる。タップ領域は 44px 以上。UI に絵文字は使わない。 */ :root { --tabbar-h: 64px; --card-glass: rgba(255, 255, 255, 0.9); --tab-active: var(--green); --ask-bg: var(--navy); --ask-ring: var(--gold); } :root[data-theme="dark"] { --card-glass: rgba(23, 36, 31, 0.9); } .shell { min-height: 100dvh; background: var(--bg); } /* 各タブは自分でスクロールする（行き来してもスクロール位置が残る。復元は shell.js） */ .tab-panel { position: fixed; top: 0; left: 0; right: 0; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; background: var(--bg); color: var(--text); } /* ---------- フッター ---------- */ .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; align-items: stretch; height: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06); } .tabbar-item { flex: 1 1 0; min-width: 44px; min-height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px 2px; border: 0; background: transparent; font-family: inherit; font-size: 11px; font-weight: 700; line-height: 1.2; color: var(--text-muted); cursor: pointer; -webkit-tap-highlight-color: transparent; } .tabbar-item svg { width: 24px; height: 24px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; } .tabbar-item[aria-current="page"] { color: var(--tab-active); } .tabbar-item:focus-visible, .icon-button:focus-visible, .shortcut:focus-visible, .link-row:focus-visible, .chat-back:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } /* 中央の「AIに質問」: 大きな丸を上に張り出させる */ .tabbar-ask { justify-content: flex-end; padding-bottom: 6px; } .tabbar-ask-circle { display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; margin-top: -26px; margin-bottom: 2px; border-radius: 50%; background: var(--ask-bg); border: 2px solid var(--ask-ring); box-shadow: 0 6px 16px rgba(26, 39, 66, 0.35); } .tabbar-ask-circle svg { width: 28px; height: 28px; stroke: var(--gold); } /* ---------- チャット（AIに質問）: ヘッダー左に「戻る」 ---------- */ .tab-panel-chat .header { position: relative; } .chat-back { position: absolute; left: 4px; bottom: 8px; display: inline-flex; align-items: center; gap: 2px; min-width: 44px; min-height: 44px; padding: 0 10px 0 4px; border: 0; border-radius: 10px; background: transparent; color: var(--cream); font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; } .chat-back svg { width: 22px; height: 22px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; } /* ヘッダーの中身が戻るボタンと重ならないよう左右に余白を取る */ .tab-panel-chat .header { padding-left: 80px; padding-right: 12px; justify-content: flex-start; } /* ---------- ホーム ---------- */ .home { background: var(--bg); } /* 背景写真はタブの背面に固定。写真の下端は背景色へ溶ける（素材側のグラデーション） */ .home-bg { position: fixed; top: 0; left: 0; right: 0; width: 100%; height: calc(100dvh - var(--tabbar-h) - env(safe-area-inset-bottom, 0px)); object-fit: cover; object-position: center top; pointer-events: none; } .home-bg:not([src]) { display: none; } .home-bg-dark { display: none; } :root[data-theme="dark"] .home-bg-light { display: none; } :root[data-theme="dark"] .home-bg-dark[src] { display: block; } .home-inner { position: relative; z-index: 1; max-width: 560px; margin: 0 auto; padding: calc(16px + env(safe-area-inset-top, 0px)) 16px 28px; } .home-top { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; min-height: 26dvh; } .home-hello { padding-top: 8px; } .home-greeting { margin: 0; font-family: var(--font-mincho); font-size: 26px; font-weight: 600; line-height: 1.4; letter-spacing: 0.04em; color: var(--heading); } .home-app { margin: 4px 0 0; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; color: var(--heading); } .icon-button { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: var(--card-glass); color: var(--heading); cursor: pointer; } .icon-button svg { width: 22px; height: 22px; stroke: currentColor; stroke-linecap: round; } /* 右上メニュー */ .home-menu { position: absolute; top: calc(64px + env(safe-area-inset-top, 0px)); right: 16px; z-index: 5; min-width: 220px; padding: 6px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); } .home-menu-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; color: var(--text); font-family: inherit; font-size: 15px; text-align: left; cursor: pointer; } .home-menu-item:hover, .home-menu-item:focus-visible { background: var(--surface-2); outline: none; } .home-menu-item svg { flex-shrink: 0; width: 22px; height: 22px; stroke: var(--green); stroke-linecap: round; stroke-linejoin: round; } /* カード（ホームは写真の上に乗るので半透明＋ぼかし） */ .card { margin: 0 0 14px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--text); box-shadow: var(--shadow); } .home .card { background: var(--card-glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .card-label { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; color: var(--accent-text); } .card-title { margin: 0 0 10px; font-family: var(--font-mincho); font-size: 17px; font-weight: 600; color: var(--heading); } .card-note { margin: 8px 0 0; font-size: 12px; color: var(--text-muted); } .mission { border-left: 4px solid var(--gold); } .mission-text { margin: 6px 0 0; font-size: 16px; font-weight: 700; line-height: 1.6; color: var(--text); white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .card-action { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin-top: 8px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--green); color: var(--on-green); font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; } /* 近道4つ */ .shortcut-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 14px; } .shortcut-grid:empty { display: none; } .shortcut { display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--card-glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--text); font-family: inherit; font-size: 14px; font-weight: 700; line-height: 1.35; text-align: left; cursor: pointer; box-shadow: var(--shadow); } .shortcut-icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: var(--green); } .shortcut-icon svg { width: 22px; height: 22px; stroke: var(--on-green); stroke-linecap: round; stroke-linejoin: round; } /* 今週の進捗 */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 8px; margin: 0; } .stat { padding: 10px 8px; border-radius: 12px; background: var(--surface-2); text-align: center; } .stat dt { font-size: 12px; color: var(--text-muted); } .stat dd { margin: 2px 0 0; font-size: 20px; font-weight: 700; color: var(--heading); font-variant-numeric: tabular-nums; } .stat dd small { font-size: 12px; font-weight: 700; margin-left: 2px; } /* ---------- 練習・分析（通常ページ） ---------- */ .page-inner { max-width: 560px; margin: 0 auto; padding: calc(16px + env(safe-area-inset-top, 0px)) 16px 28px; } .page-title { margin: 4px 0 16px; font-family: var(--font-mincho); font-size: 24px; font-weight: 600; letter-spacing: 0.06em; color: var(--heading); } .checklist { list-style: none; margin: 0; padding: 0; } .checklist li + li { border-top: 1px solid var(--line); } .check-row { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 2px; cursor: pointer; color: var(--text); font-size: 15px; line-height: 1.5; } .check-row input { flex-shrink: 0; width: 22px; height: 22px; margin: 0; accent-color: var(--green); } .check-row input:checked + span { color: var(--text-muted); text-decoration: line-through; } .empty-state { margin: 0; padding: 18px 8px; text-align: center; font-size: 14px; color: var(--text-muted); } .link-list { display: flex; flex-direction: column; gap: 10px; } .link-row { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--text); font-family: inherit; font-size: 15px; font-weight: 700; text-align: left; text-decoration: none; cursor: pointer; box-shadow: var(--shadow); } .link-row > svg:first-child { flex-shrink: 0; width: 24px; height: 24px; stroke: var(--green); stroke-linecap: round; stroke-linejoin: round; } .link-row-text { flex: 1; min-width: 0; } .link-row-sub { display: block; font-size: 12px; font-weight: 400; color: var(--text-muted); } .link-row .chevron { flex-shrink: 0; width: 18px; height: 18px; stroke: var(--text-muted); } /* 設定ページの「表示」切替 */ .theme-options { display: flex; gap: 8px; margin: 0; padding: 0; border: 0; } .theme-option { flex: 1; position: relative; } .theme-option input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; } .theme-option span { display: flex; align-items: center; justify-content: center; min-height: 44px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--text); font-size: 14px; font-weight: 700; } .theme-option input:checked + span { border-color: var(--green); background: var(--green); color: var(--on-green); } .theme-option input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; } /* 初回同意は外枠の直下（どのタブでも最初に出す）。フッターより上に重ねる */ .shell > .consent-panel { position: fixed; } /* ===================================================================== 参考画像「ホーム画面4案」の A・B・D を再現（2026-09-27）。C（航空写真マップ）は対象外。 A＝ホーム（ビジュアル重視）／B＝練習（タスク中心）／D＝分析「マイデータ」（目標・分析重視）。 色は下の --ui-* だけを使い、ライト/ダークは で切り替わる。 ===================================================================== */ :root { --ui-bg: #f4f6f3; --ui-card: #ffffff; --ui-line: #e3e8e2; --ui-text: #1d2a23; --ui-muted: #69766e; --ui-green: #1f5f45; --ui-green-2: #2e7d59; --ui-on-green: #ffffff; --ui-pill-bg: #e9efea; --ui-mint: #86d8b2; --ui-mint-ink: #0f3526; --ui-warm: #d9861c; --ui-warm-bg: #fff3e0; --ui-tip-bg: #eef6f0; --ui-good: #1f8a52; --ui-bad: #c0503d; --ui-gold: #d9a521; --ui-advice: #5b78d6; --ui-advice-bg: #edf1fd; --ui-shadow: 0 1px 2px rgba(20, 45, 33, 0.05), 0 8px 22px -14px rgba(20, 45, 33, 0.28); /* A（ホーム）: 写真の上のガラスの板 */ --home-bg: #eef2ee; --home-ink: #16372a; --home-ink-2: #3f5a4d; --glass: rgba(255, 255, 255, 0.84); --glass-line: rgba(255, 255, 255, 0.9); --glass-shadow: 0 10px 28px -16px rgba(20, 45, 33, 0.45); } :root[data-theme="dark"] { --ui-bg: #0f1c16; --ui-card: #16251e; --ui-line: #25392f; --ui-text: #e7eee9; --ui-muted: #9db0a5; --ui-green: #4fb883; --ui-green-2: #3a9a6c; --ui-on-green: #0c1a13; --ui-pill-bg: #1c2e25; --ui-mint: #7fd6b3; --ui-mint-ink: #0c2a1e; --ui-warm: #f0b35a; --ui-warm-bg: #2f2616; --ui-tip-bg: #17291f; --ui-good: #5fd197; --ui-bad: #ff8a78; --ui-gold: #e9c24a; --ui-advice: #9fb4ff; --ui-advice-bg: #1d2640; --ui-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 22px -14px rgba(0, 0, 0, 0.8); --home-bg: #10211a; --home-ink: #f2f7f3; --home-ink-2: #b9cbbf; --glass: rgba(24, 44, 35, 0.72); --glass-line: rgba(255, 255, 255, 0.12); --glass-shadow: 0 10px 28px -16px rgba(0, 0, 0, 0.8); } .ui-brand { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 17px; font-weight: 800; letter-spacing: 0.04em; color: var(--ui-green); } .ui-brand-mark { width: 22px; height: 22px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; } /* ---------- A: ホーム ---------- */ .home { background: var(--home-bg); } .home-bg { height: 64dvh; -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 100%); mask-image: linear-gradient(to bottom, #000 58%, transparent 100%); } .home-inner { padding-top: calc(12px + env(safe-area-inset-top, 0px)); } .home-bar { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; } .home-brand { color: var(--home-ink); text-shadow: 0 1px 8px rgba(255, 255, 255, 0.35); } :root[data-theme="dark"] .home-brand { text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45); } .home-avatar { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 2px solid var(--glass-line); border-radius: 50%; background: var(--glass); color: var(--home-ink); box-shadow: var(--glass-shadow); cursor: pointer; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .home-avatar svg { width: 24px; height: 24px; stroke: currentColor; stroke-linecap: round; } .home-avatar:focus-visible { outline: 2px solid var(--ui-green); outline-offset: 2px; } .home-menu { top: calc(60px + env(safe-area-inset-top, 0px)); } .home-hello { padding: 13dvh 2px 0; } .home-greeting { font-family: var(--font-gothic); font-size: 25px; font-weight: 800; letter-spacing: 0.03em; color: var(--home-ink); text-shadow: 0 1px 12px rgba(255, 255, 255, 0.4); } :root[data-theme="dark"] .home-greeting, :root[data-theme="dark"] .home-sub { text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55); } .home-sub { margin: 4px 0 0; font-size: 14px; font-weight: 600; color: var(--home-ink-2); text-shadow: 0 1px 10px rgba(255, 255, 255, 0.4); } #home-mission { margin-top: 22px; } .mission-a { padding: 16px 16px 14px; border: 1px solid var(--glass-line); border-radius: 18px; background: var(--glass); box-shadow: var(--glass-shadow); color: var(--home-ink); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } .mission-main { display: flex; align-items: center; gap: 12px; } .mission-texts { flex: 1; min-width: 0; } .mission-label { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: var(--home-ink-2); } .mission-title { margin: 4px 0 0; font-size: 19px; font-weight: 800; line-height: 1.4; } .mission-detail { margin: 4px 0 0; font-size: 13.5px; font-weight: 600; color: var(--home-ink-2); } .mission-play { flex: none; display: grid; place-items: center; width: 54px; height: 54px; padding: 0; border: 0; border-radius: 50%; background: var(--ui-mint); color: var(--ui-mint-ink); box-shadow: 0 6px 16px -6px rgba(31, 95, 69, 0.55); cursor: pointer; } .mission-play svg { width: 26px; height: 26px; margin-left: 3px; } .mission-play:focus-visible, .tile:focus-visible, .wstats-more:focus-visible { outline: 2px solid var(--ui-green); outline-offset: 2px; } .mission-progress { display: flex; align-items: center; gap: 12px; margin-top: 12px; } .mission-bar { position: relative; flex: 1; height: 6px; border-radius: 999px; background: rgba(127, 150, 138, 0.3); overflow: hidden; } .mission-bar-fill { position: absolute; inset: 0 auto 0 0; width: calc(var(--ratio, 0) * 100%); min-width: 6px; border-radius: inherit; background: var(--ui-mint); } .mission-count { flex: none; font-size: 12.5px; font-weight: 700; color: var(--home-ink-2); font-variant-numeric: tabular-nums; } .shortcut-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 14px; } .shortcut-row:empty { display: none; } .tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-width: 0; aspect-ratio: 1 / 1.08; padding: 8px 2px; border: 1px solid var(--glass-line); border-radius: 16px; background: var(--glass); box-shadow: var(--glass-shadow); color: var(--home-ink); font-family: inherit; cursor: pointer; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .tile-icon svg { display: block; width: 28px; height: 28px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; } .tile-label { font-size: 11px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; text-align: center; white-space: nowrap; } #home-progress { margin-top: 22px; } .wstats-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; } .wstats-title { margin: 0; font-size: 17px; font-weight: 800; color: var(--home-ink); } .wstats-more { display: inline-flex; align-items: center; gap: 2px; min-height: 36px; padding: 0 4px; border: 0; background: transparent; color: var(--home-ink-2); font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; } .wstats-more .chevron { width: 16px; height: 16px; stroke: currentColor; } .wstats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .wstat { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 12px 11px; border: 1px solid var(--glass-line); border-radius: 16px; background: var(--glass); box-shadow: var(--glass-shadow); color: var(--home-ink); } .wstat-label { margin: 0; font-size: 11.5px; font-weight: 700; color: var(--home-ink-2); white-space: nowrap; } .wstat-value { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 6px; margin: 0; font-size: 24px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; } .wstat-value small { font-size: 12px; font-weight: 700; color: var(--home-ink-2); } .wstat-delta { font-size: 12.5px; font-weight: 800; color: var(--ui-bad); } .wstat-delta.is-good { color: var(--ui-good); } .wbars { display: flex; align-items: flex-end; gap: 3px; height: 26px; margin-top: 2px; } .wbar { flex: 1; height: calc(var(--h, 0.2) * 100%); border-radius: 2px; background: rgba(127, 150, 138, 0.35); } .wbar.is-on { background: var(--ui-mint); } .wstats-note { margin: 8px 2px 0; font-size: 11.5px; color: var(--home-ink-2); } /* ---------- B: 練習 ---------- */ .ui-page { background: var(--ui-bg); color: var(--ui-text); } .ui-inner { display: flex; flex-direction: column; gap: 14px; } .ui-bar { display: flex; align-items: center; justify-content: space-between; min-height: 40px; } .ui-seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; gap: 4px; padding: 4px; border-radius: 999px; background: var(--ui-pill-bg); } .ui-seg-b { min-width: 0; min-height: 40px; padding: 0 6px; border: 0; border-radius: 999px; background: transparent; color: var(--ui-muted); font-family: inherit; font-size: 13.5px; font-weight: 700; white-space: nowrap; cursor: pointer; } .ui-seg-b[aria-selected="true"] { background: var(--ui-green); color: var(--ui-on-green); box-shadow: 0 4px 10px -6px rgba(31, 95, 69, 0.8); } .ui-seg-b:focus-visible, .ui-chip-warm:focus-visible, .task-check:focus-visible, .task-text:focus-visible, .task-go:focus-visible, .add-button:focus-visible { outline: 2px solid var(--ui-green); outline-offset: 2px; } .ui-view { display: flex; flex-direction: column; gap: 12px; } .ui-date-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .ui-date { margin: 0; font-size: 20px; font-weight: 800; color: var(--ui-text); } .ui-chip-warm { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--ui-warm-bg); color: var(--ui-warm); font-family: inherit; font-size: 13px; font-weight: 800; cursor: pointer; } .ui-chip-warm svg, .tip-icon svg { width: 18px; height: 18px; stroke: currentColor; stroke-linecap: round; } .ui-tip { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--ui-line); border-radius: 16px; background: var(--ui-tip-bg); } .tip-icon { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--ui-card); color: var(--ui-green-2); } .tip-icon svg { width: 22px; height: 22px; } .tip-main { margin: 0; font-size: 14.5px; font-weight: 700; line-height: 1.55; color: var(--ui-text); } .tip-sub { margin: 2px 0 0; font-size: 12px; color: var(--ui-muted); } .task-list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; } .task { display: flex; align-items: center; gap: 12px; min-height: 76px; padding: 10px 10px 10px 12px; border: 1px solid var(--ui-line); border-radius: 16px; background: var(--ui-card); box-shadow: var(--ui-shadow); } .task-check { flex: none; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 2px solid var(--ui-line); border-radius: 50%; background: var(--ui-card); color: transparent; cursor: pointer; } .task-check svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; } .task-check[aria-checked="true"] { border-color: var(--ui-green-2); background: var(--ui-green-2); color: #fff; } .task-check:disabled { cursor: default; } .task-thumb { flex: none; display: grid; place-items: center; width: 58px; height: 58px; overflow: hidden; border-radius: 12px; background: var(--ui-pill-bg); color: var(--ui-green-2); } .task-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; } .task-thumb.is-icon svg { width: 28px; height: 28px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; } .task-text { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 4px 0; border: 0; background: transparent; color: var(--ui-text); font-family: inherit; text-align: left; cursor: pointer; } .task-title { font-size: 15px; font-weight: 800; line-height: 1.4; } .task-sub { font-size: 12.5px; color: var(--ui-muted); line-height: 1.4; } .task.is-done .task-title { color: var(--ui-muted); } .task-go { flex: none; display: grid; place-items: center; width: 32px; height: 44px; padding: 0; border: 0; background: transparent; color: var(--ui-muted); cursor: pointer; } .task-go svg { width: 18px; height: 18px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; } span.task-go { cursor: inherit; } .add-button { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 54px; border: 0; border-radius: 999px; background: var(--ui-green); color: var(--ui-on-green); font-family: inherit; font-size: 15.5px; font-weight: 800; box-shadow: 0 8px 18px -10px rgba(31, 95, 69, 0.8); cursor: pointer; } .add-button svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; } .add-form { display: flex; gap: 8px; } .add-input { flex: 1; min-width: 0; min-height: 48px; padding: 0 14px; border: 1.5px solid var(--ui-line); border-radius: 12px; background: var(--ui-card); color: var(--ui-text); font-family: inherit; font-size: 16px; } .add-ok, .add-cancel { flex: none; min-height: 48px; padding: 0 14px; border-radius: 12px; font-family: inherit; font-size: 14px; font-weight: 800; cursor: pointer; } .add-ok { border: 0; background: var(--ui-green); color: var(--ui-on-green); } .add-cancel { border: 1.5px solid var(--ui-line); background: var(--ui-card); color: var(--ui-muted); } .log-list { display: flex; flex-direction: column; margin: 8px 0 0; padding: 0; list-style: none; } .log-item { padding: 10px 0; border-top: 1px solid var(--line); } .log-date { margin: 0; font-size: 12px; font-weight: 700; color: var(--text-muted); } .log-text { margin: 2px 0 0; font-size: 14px; line-height: 1.6; color: var(--text); } /* ---------- D: 分析「マイデータ」 ---------- */ .ui-data-head { padding: calc(14px + env(safe-area-inset-top, 0px)) 16px 0; background: linear-gradient(160deg, #1d4d3a, #173d2e); color: #ffffff; } .ui-data-title { max-width: 560px; margin: 0 auto; font-size: 22px; font-weight: 800; letter-spacing: 0.04em; } .ui-data-tabs { display: flex; gap: 4px; max-width: 560px; margin: 10px auto 0; overflow-x: auto; scrollbar-width: none; } .ui-data-tab { flex: 1 0 auto; min-height: 44px; padding: 0 10px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: rgba(255, 255, 255, 0.72); font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; } .ui-data-tab[aria-selected="true"] { border-bottom-color: #ffffff; color: #ffffff; } .ui-data-tab:focus-visible { outline: 2px solid #ffffff; outline-offset: -4px; } .ui-data #analysis-body { display: flex; flex-direction: column; gap: 12px; } .ui-data .page-inner { padding-top: 16px; } .dcard { padding: 14px 16px; border: 1px solid var(--ui-line); border-radius: 16px; background: var(--ui-card); box-shadow: var(--ui-shadow); color: var(--ui-text); } .dcard-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; } .dcard-title { margin: 0; font-size: 15px; font-weight: 800; color: var(--ui-text); } .dgoal-head { display: flex; align-items: center; gap: 12px; } .dgoal-icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ui-warm-bg); color: var(--ui-warm); } .dgoal-icon svg { width: 24px; height: 24px; stroke: currentColor; } .dgoal-text { flex: 1; min-width: 0; } .dgoal-k { margin: 0; font-size: 12px; font-weight: 700; color: var(--ui-muted); } .dgoal-t { margin: 2px 0 0; font-size: 14.5px; font-weight: 700; } .dgoal-t b { font-size: 22px; font-weight: 800; color: var(--ui-green); } .dgoal-set, .dgoal-opt, .dpill { flex: none; min-height: 34px; padding: 0 12px; border: 1px solid var(--ui-line); border-radius: 999px; background: var(--ui-pill-bg); color: var(--ui-muted); font-family: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; } .dgoal-opt[aria-pressed="true"], .dpill[aria-pressed="true"] { border-color: var(--ui-green); background: var(--ui-green); color: var(--ui-on-green); } .dgoal-set:focus-visible, .dgoal-opt:focus-visible, .dpill:focus-visible, .dadvice:focus-visible { outline: 2px solid var(--ui-green); outline-offset: 2px; } .dgoal-pick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } .dgoal-opt { min-height: 40px; padding: 0 14px; font-size: 14px; } .dgoal-row { display: flex; align-items: center; gap: 12px; margin-top: 12px; } .dgoal-bar { position: relative; flex: 1; height: 8px; border-radius: 999px; background: var(--ui-pill-bg); overflow: hidden; } .dgoal-fill { position: absolute; inset: 0 auto 0 0; width: calc(var(--ratio, 0) * 100%); min-width: 8px; border-radius: inherit; background: var(--ui-green-2); } .dgoal-rest { flex: none; margin: 0; font-size: 12.5px; font-weight: 700; color: var(--ui-muted); } .dgoal-rest b { font-size: 20px; font-weight: 800; color: var(--ui-text); } .dgrid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .dstat-k { margin: 0; font-size: 12px; font-weight: 700; color: var(--ui-muted); } .dstat-v { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; margin: 6px 0 0; font-size: 30px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; } .dstat-date { width: 100%; font-size: 11.5px; font-weight: 600; color: var(--ui-muted); } .dcrown { align-self: center; color: var(--ui-gold); } .dcrown svg { display: block; width: 22px; height: 22px; } .ddelta { display: inline-flex; align-items: center; gap: 1px; font-size: 13px; font-weight: 800; } .ddelta svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .ddelta.is-good { color: var(--ui-good); } .ddelta.is-bad { color: var(--ui-bad); } .dpills { display: flex; gap: 4px; } .dpill { min-height: 30px; padding: 0 9px; font-size: 11.5px; } .dchart { display: block; width: 100%; height: auto; } .dchart-grid { stroke: var(--ui-line); stroke-width: 1; } .dchart-ylab, .dchart-xlab { fill: var(--ui-muted); font-size: 10px; font-weight: 600; } .dchart-line { fill: none; stroke: var(--ui-green-2); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; } .dchart-dot { fill: var(--ui-card); stroke: var(--ui-green-2); stroke-width: 2; } .dchart-dot.is-last { fill: var(--ui-green-2); } .dchart-bubble { fill: var(--ui-green); } .dchart-bubble-t { fill: var(--ui-on-green); font-size: 11px; font-weight: 800; } .drate { display: flex; align-items: center; gap: 10px; padding: 14px 12px; } .ddonut { flex: none; width: 54px; height: 54px; } .ddonut-bg, .ddonut-fg { fill: none; stroke-width: 8; } .ddonut-bg { stroke: var(--ui-pill-bg); } .ddonut-fg { stroke: var(--ui-green-2); stroke-linecap: round; } .drate-text { min-width: 0; } .drate-text .dstat-k { font-size: 11px; line-height: 1.35; } .drate-v { margin: 2px 0 0; font-size: 24px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; } .drate-v small { font-size: 13px; font-weight: 800; } .dadvice { display: flex; align-items: center; gap: 12px; width: 100%; font-family: inherit; text-align: left; cursor: pointer; } .dadvice-icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ui-advice-bg); color: var(--ui-advice); } .dadvice-icon svg { width: 22px; height: 22px; stroke: currentColor; stroke-linecap: round; } .dadvice-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .dadvice-k { font-size: 12.5px; font-weight: 800; color: var(--ui-text); } .dadvice-v { font-size: 13px; line-height: 1.55; color: var(--ui-muted); } .dadvice .chevron { flex: none; width: 18px; height: 18px; stroke: var(--ui-muted); } .dlist-ul { margin: 8px 0 0; padding: 0; list-style: none; } .dlist-li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--ui-line); font-size: 14px; } .dlist-date { color: var(--ui-muted); font-variant-numeric: tabular-nums; } .dlist-v { font-weight: 800; font-variant-numeric: tabular-nums; } .dweek { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; height: 96px; margin-top: 10px; } .dweek-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; } .dweek-bar { width: 100%; max-width: 22px; height: calc(var(--h, 0.1) * 70px); border-radius: 6px 6px 3px 3px; background: var(--ui-pill-bg); } .dweek-bar.is-on { background: var(--ui-green-2); } .dweek-d { font-size: 11.5px; font-weight: 700; color: var(--ui-muted); }