/* 外枠（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; }