/* ── Reset ───────────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ── Themes ──────────────────────────────────────────────────────────────────── */ :root, [data-theme="dark"] { --bg: #000000; /* 一番後ろの背景（ライトで白の部分）固定 */ --bg-card: #1d1d1d; /* 各パートの背景 固定 */ --bg-input: #12193a; /* タブ/ホバー/保存一覧カードなどカード相当 固定 */ --bg-section:#12193a; /* 出生データ等のカード 固定 */ --bg-write: #898989; /* 書き込み欄（入力フィールド）の背景 固定 */ --accent: #e94560; --accent2: #533483; --text: #ffffff; /* 本文は白で統一 */ --text-dim: #d8d8ea; /* ラベル等も読みやすい薄い白（見づらいグレーは使わない）*/ --border: #3a3a5a; --radius: 10px; --shadow: 0 4px 20px rgba(0,0,0,0.4); --font: 'Segoe UI', system-ui, sans-serif; --map-filter: brightness(0.85) saturate(0.9); } /* ── ダークモードのテーマカラー（アクセント）切替 ─────────────────────── 設定ページで選んだ色を として付ける。 「custom（カラーコード指定）」は theme-accent.js が --accent を直接指定する。 既定（red）は :root の値をそのまま使う。 */ [data-accent="orange"] { --accent: #d09402; --accent2: #d09402; } [data-accent="pink"] { --accent: #d002ce; --accent2: #d002ce; } [data-accent="green"] { --accent: #00b115; --accent2: #00b115; } [data-accent="purple"] { --accent: #6d0bdb; --accent2: #6d0bdb; } [data-theme="light"] { --bg: #f0f2f8; --bg-card: #ffffff; --bg-input: #e8edf5; --bg-write: #ffffff; /* 入力欄はライトでは白（濃いグレーを上書き）*/ --bg-section:#f8f9fc; /* アクセントはライトでも選んだテーマカラーを使う（独自指定しない）。 既定＝:root の赤、プリセット＝[data-accent]、custom＝theme-accent.js。 */ --text: #1a1a2e; --text-dim: #55557a; --border: #c8cce0; --shadow: 0 2px 12px rgba(0,0,0,0.1); --map-filter: none; } /* ── Base ────────────────────────────────────────────────────────────────────── */ html { font-size: 15px; } body { background: var(--bg); color: var(--text); font-family: var(--font); min-height: 100vh; line-height: 1.5; transition: background 0.25s, color 0.25s; } /* ── Header ──────────────────────────────────────────────────────────────────── */ .app-header { display: flex; align-items: center; justify-content: space-between; padding: 0.6rem 1rem; background: var(--bg-card); border-bottom: 2px solid var(--accent); gap: 0.5rem; flex-wrap: wrap; position: sticky; top: 0; z-index: 900; box-shadow: var(--shadow); } .header-title h1 { font-size: 1.3rem; font-weight: 700; color: var(--accent); letter-spacing: 0.02em; } .header-title p { font-size: 0.75rem; color: var(--text-dim); } .header-right { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; } .ephemeris-link { color: var(--accent); text-decoration: none; font-size: 0.8rem; padding: 0.25rem 0.6rem; border: 1px solid var(--accent); border-radius: 4px; transition: all 0.2s; } .ephemeris-link:hover { background: var(--accent); color: #fff; } /* Color mode toggle */ .theme-btns { display: flex; gap: 4px; } .theme-btn { background: transparent; border: 1px solid var(--border); color: var(--text-dim); width: 28px; height: 28px; border-radius: 50%; cursor: pointer; font-size: 0.85rem; transition: all 0.2s; display: flex; align-items: center; justify-content: center; } .theme-btn:hover { border-color: var(--accent); } .theme-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); } .lang-switcher { display: flex; gap: 0.3rem; } .lang-btn { background: transparent; border: 1px solid var(--border); color: var(--text-dim); padding: 0.2rem 0.55rem; border-radius: 4px; cursor: pointer; font-size: 0.78rem; transition: all 0.2s; } .lang-btn:hover { border-color: var(--accent); color: var(--text); } .lang-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); } /* ── Page nav icons (header center) ──────────────────────────────────────────── */ .page-nav-icons { display: flex; align-items: center; gap: 4px; margin-left: 16px; margin-right: auto; } .nav-icon-btn { display: inline-flex; align-items: center; justify-content: center; padding: 5px; border-radius: 6px; color: #9a9ab5; text-decoration: none; transition: color .15s, background .15s; } .nav-icon-btn:hover { color: var(--accent); background: rgba(233,69,96,0.12); } .nav-icon-btn.active { color: var(--accent); } .nav-icon-btn svg { width: 22px; height: 22px; } /* ── Two-column layout ───────────────────────────────────────────────────────── */ .app-layout { display: grid; grid-template-columns: 380px 1fr; height: calc(100vh - 52px); overflow: hidden; } .left-panel { overflow-y: auto; overflow-x: hidden; background: var(--bg); border-right: 1px solid var(--border); padding: 0.75rem; display: flex; flex-direction: column; gap: 0.6rem; } .right-panel { position: relative; display: flex; flex-direction: column; overflow: hidden; } /* ── Map ─────────────────────────────────────────────────────────────────────── */ #map-container { flex: 1; min-height: 0; } #map-container .leaflet-container { height: 100%; width: 100%; filter: var(--map-filter); } .map-active-label { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.65); color: #fff; font-size: 0.78rem; padding: 3px 10px; border-radius: 12px; pointer-events: none; z-index: 800; display: none; } .map-active-label.visible { display: block; } /* ── Results (below map, scrollable) ────────────────────────────────────────── */ #results-outer { max-height: 45vh; overflow-y: auto; border-top: 2px solid var(--accent); background: var(--bg); display: none; } #results-outer.visible { display: block; } /* ── Cards ───────────────────────────────────────────────────────────────────── */ .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.8rem; box-shadow: var(--shadow); } .card-header { display: flex; align-items: center; justify-content: space-between; cursor: pointer; user-select: none; } .card-header h2 { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); } .card-toggle { color: var(--text-dim); font-size: 0.75rem; transition: transform 0.2s; } .card-toggle.open { transform: rotate(180deg); } .card-body { margin-top: 0.7rem; } .card-body.collapsed { display: none; } /* ── Form ────────────────────────────────────────────────────────────────────── */ .form-group { margin-bottom: 0.6rem; } .form-group label { display: block; font-size: 0.74rem; color: var(--text-dim); margin-bottom: 0.25rem; font-weight: 500; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; } .form-row-3 { display: grid; grid-template-columns: 1fr 1fr auto; gap: 0.5rem; align-items: end; } input[type="date"], input[type="time"], input[type="number"], input[type="text"], select, .tz-display { width: 100%; background: var(--bg-write, var(--bg-input)); border: 1px solid var(--border); color: var(--text); padding: 0.4rem 0.55rem; border-radius: 6px; font-size: 1rem; font-family: inherit; transition: border-color 0.2s; -webkit-appearance: none; } input:focus, select:focus { outline: none; border-color: var(--accent); } .tz-display { background: var(--bg-section); color: var(--text-dim); font-size: 0.78rem; } select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%238080a0' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.5rem center; padding-right: 1.6rem; } /* ── Buttons ─────────────────────────────────────────────────────────────────── */ .btn-primary { width: 100%; background: var(--accent); border: none; color: #fff; padding: 0.6rem; border-radius: 6px; font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: opacity 0.2s; font-family: inherit; } .btn-primary:hover:not(:disabled) { opacity: 0.85; } .btn-primary:disabled { opacity: 0.45; cursor: not-allowed; } .btn-secondary { width: 100%; background: transparent; border: 1px solid var(--border); color: var(--text-dim); padding: 0.45rem; border-radius: 6px; font-size: 0.8rem; cursor: pointer; transition: all 0.2s; font-family: inherit; } .btn-secondary:hover { border-color: var(--accent2); color: var(--text); } .btn-icon { background: var(--bg-input); border: 1px solid var(--border); color: var(--text-dim); padding: 0.4rem 0.55rem; border-radius: 6px; cursor: pointer; font-size: 0.85rem; transition: all 0.2s; white-space: nowrap; } .btn-icon:hover { border-color: var(--accent); color: var(--text); } .btn-icon.active { background: var(--accent); color: #fff; border-color: var(--accent); } .btn-row { display: flex; gap: 0.4rem; margin-top: 0.3rem; } .btn-row .btn-icon { flex: 1; text-align: center; font-size: 0.78rem; } .save-flash { font-size: 0.78rem; color: #5cb85c; text-align: center; min-height: 1.2em; margin-top: 0.2rem; } /* ── Settings radio/checkbox ─────────────────────────────────────────────────── */ .radio-group { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.25rem; } .radio-group label { display: flex; align-items: center; gap: 4px; font-size: 1rem; color: var(--text); cursor: pointer; padding: 3px 8px; border: 1px solid var(--border); border-radius: 4px; transition: all 0.15s; } .radio-group label:has(input:checked) { border-color: var(--accent); background: rgba(233,69,96,0.1); color: var(--accent); } .radio-group input { display: none; } .checkbox-row { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; cursor: pointer; margin-top: 0.3rem; } .checkbox-row input[type="checkbox"] { width: auto; accent-color: var(--accent); } /* ── Error / Spinner ─────────────────────────────────────────────────────────── */ #error-message { background: rgba(233,69,96,0.12); border: 1px solid var(--accent); color: var(--accent); padding: 0.5rem 0.7rem; border-radius: 6px; font-size: 0.82rem; margin-top: 0.4rem; } #spinner { display: flex; justify-content: center; margin-top: 0.4rem; } .spinner-ring { width: 26px; height: 26px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ── Results grid ────────────────────────────────────────────────────────────── */ #results-section { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 1rem; padding: 1rem; } .chart-container { grid-column: 1 / -1; display: flex; justify-content: center; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.8rem; } #chart-svg { width: 100%; max-width: 500px; height: auto; } /* ── Tables ──────────────────────────────────────────────────────────────────── */ .table-wrapper { overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-size: 0.8rem; } thead th { color: var(--text-dim); font-weight: 600; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.3rem 0.45rem; border-bottom: 1px solid var(--border); text-align: left; } tbody tr:hover { background: rgba(255,255,255,0.03); } tbody td { padding: 0.3rem 0.45rem; border-bottom: 1px solid rgba(58,58,90,0.35); white-space: nowrap; } .planet-name { display: flex; align-items: center; gap: 0.35rem; } .planet-glyph { font-size: 1.05em; font-family: serif; } .retro { color: #ff9966; font-size: 0.78em; margin-left: 0.2rem; } .oos-mark { color: var(--text-dim); font-size: 0.72em; margin-left: 2px; } .angular-house td { color: #c0c0ff; font-weight: 500; } .aspect-conj { color: #e74c3c; } .aspect-opp { color: #e74c3c; } .aspect-trine { color: #3498db; } .aspect-sq { color: #e67e22; } .aspect-sext { color: #2ecc71; } /* ── Footer ──────────────────────────────────────────────────────────────────── */ .app-footer { text-align: center; color: var(--text-dim); font-size: 0.72rem; padding: 0.6rem; border-top: 1px solid var(--border); } /* ── Responsive ──────────────────────────────────────────────────────────────── */ @media (max-width: 900px) { .app-layout { grid-template-columns: 1fr; height: auto; overflow: visible; } .right-panel { height: 50vh; min-height: 300px; } #results-outer { max-height: none; } .left-panel { height: auto; overflow: visible; } } @media (max-width: 640px) { #results-section { grid-template-columns: 1fr; } .form-row { grid-template-columns: 1fr; } } /* ============================================ Phase 2-A: 場所検索ボックス ============================================ */ /* ラッパー(検索ボックス + 候補リスト) */ .place-search-wrapper { position: relative; margin-bottom: 0.5rem; } /* 検索アイコン(左側固定) */ .place-search-wrapper::before { content: "🔍"; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 16px; pointer-events: none; z-index: 1; } /* 検索ボックス本体 */ input.place-search-input { width: 100%; padding: 0.4rem 0.6rem 0.4rem 38px; font-size: 16px; font-weight: 500; color: var(--text); background: var(--bg-input); border: 1.5px solid var(--border); border-radius: 4px; box-sizing: border-box; transition: border-color 0.2s, box-shadow 0.2s; } /* プレースホルダー */ input.place-search-input::placeholder { color: var(--text-dim); font-weight: normal; font-size: 14px; } /* フォーカス時(共通) */ input.place-search-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(233, 69, 96, 0.2); } /* 出生地用(赤系)*/ #birth-place-search:focus { border-color: #e94560; box-shadow: 0 0 0 2px rgba(233, 69, 96, 0.25); } /* 現在地用(緑系)*/ #cur-place-search:focus { border-color: #4caf50; box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.25); } /* ───────────────────────────────────────────────────────────── Phase 2-A Day 3: 候補リスト(検索結果のドロップダウン) 設計書 3.4 のフォント・色・余白基準に準拠 ───────────────────────────────────────────────────────────── */ /* 候補リスト全体(検索ボックスの下に「浮く」) */ .place-suggestions { /* 絶対配置で親の高さに影響しない → 虫眼鏡の位置がずれない */ position: absolute; top: 100%; /* 検索ボックスの直下に配置 */ left: 0; right: 0; z-index: 100; /* 他の要素より前面に表示 */ /* デフォルトは非表示(.visible で表示) */ display: none; /* リストの初期スタイルをリセット */ list-style: none; margin: 0; padding: 0; /* 見た目 */ background: #fff; border: 1.5px solid #999; border-radius: 6px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* スクロール対応(候補が多い場合) */ max-height: 300px; overflow-y: auto; } /* .visible クラスが付いた時に表示 */ .place-suggestions.visible { display: block; } /* 各候補項目 */ .place-suggestion-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; /* 設計書 3.4: 上下10px(タップ領域確保)*/ cursor: pointer; border-bottom: 1px solid #eee; transition: background-color 0.15s; } /* 最後の項目には下線を引かない */ .place-suggestion-item:last-child { border-bottom: none; } /* ホバー時の背景色 */ .place-suggestion-item:hover { background-color: #f5f5f5; } /* メイン表示(地名) */ .suggestion-main { font-size: 16px; /* 設計書 3.4 */ color: #222; /* 設計書 3.4: 通常テキスト */ font-weight: 500; } /* 補足表示(都道府県・国) */ .suggestion-sub { font-size: 14px; /* 設計書 3.4 */ color: #555; /* 設計書 3.4: 補足テキスト */ margin-left: 12px; } /* 絞り込み促しメッセージ(候補数が多い時の最終行) */ .place-suggestion-message { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background-color: #f9f9f9; border-top: 1px solid #ddd; font-size: 14px; color: #555; cursor: default; /* クリック対象ではないことを示す */ } .place-suggestion-message .suggestion-hint { font-size: 13px; color: #888; font-style: italic; }