/**
* theme-dark.css - ダークモード（全ページ共通）
*
* html[data-theme="dark"] が付いている間だけ有効。
* 目に優しい配色を狙い、純黒・純白は使わず、コントラストを少し落としている。
* 背景 #1a1d23 / 面 #22262e / 浮いた面 #2a2f38 / 文字 #d7dbe0 / 補助文字 #a7afb9
*
* 切り替え: フッターの月/太陽ボタン（common.js の Theme）。選択は localStorage('theme') に保存。
* 初期適用: base.html の 内スクリプトが描画前に data-theme を付ける（ちらつき防止）。
*
* セクション:
* 1. 変数（各ページのCSS変数もここで上書き）
* 2. 共通（body・ナビ・フッター・Bootstrap部品）
* 3. トップページ（home.css）
* 4. 共有画面（share.css / JSが生成するUI）
* 5. ガイド・規約・プライバシー・お問い合わせ・セッション作成/期限切れ
*/
/* =============================================================================
1. 変数
============================================================================= */
/* ライト時はフォーム部品もライトで描く（端末のダーク設定に引きずられない） */
html {
color-scheme: light;
}
html[data-theme="dark"] {
color-scheme: dark;
--dk-bg: #1a1d23;
--dk-surface: #22262e;
--dk-surface-2: #2a2f38;
--dk-surface-3: #323844;
--dk-border: rgba(255, 255, 255, 0.09);
--dk-border-strong: rgba(255, 255, 255, 0.16);
--dk-text: #d7dbe0;
--dk-text-2: #a7afb9;
--dk-text-3: #7f8894;
--dk-link: #8ab4f8;
--dk-accent: #5b9cf6;
--dk-info-bg: #1c2b3a;
--dk-info-border: #274460;
--dk-warn-bg: #33290f;
--dk-warn-border: #5a4715;
--dk-ok-bg: #15301f;
--dk-ok-border: #245c37;
--dk-danger-bg: #3a1c20;
--dk-danger-border: #5f2a32;
/* home.css の変数 */
--text-primary: #e2e5e9;
--text-secondary: #a7afb9;
--text-muted: #7f8894;
--bg-section: #1f232a;
--bg-card: #22262e;
--border-light: rgba(255, 255, 255, 0.09);
/* share.css の変数（--color-white はボタン文字などにも使われるので触らない） */
--color-primary: #1fa53f;
--color-primary-hover: #1c9438;
--color-primary-light: rgba(31, 165, 63, 0.18);
--color-gray-50: #2a2f38;
--color-gray-100: #2f353f;
--color-gray-200: #343b46;
--color-gray-300: #3b434f;
--color-gray-400: #444d5a;
--color-gray-500: #8c95a1;
--color-gray-600: #a7afb9;
--color-gray-700: #c0c7d0;
--color-gray-800: #d7dbe0;
--color-gray-900: #e6e9ed;
--chat-bg: #1b2027;
}
/* =============================================================================
2. 共通
============================================================================= */
html[data-theme="dark"] body {
background: var(--dk-bg) !important;
color: var(--dk-text);
}
html[data-theme="dark"] .main-content a:not(.btn):not([class*="btn-"]):not(.guide-card):not(.nav-link) {
color: var(--dk-link);
}
html[data-theme="dark"] hr {
border-color: var(--dk-border-strong);
opacity: 1;
}
/* ナビ・フッター（地図風テクスチャの白線を消して落ち着かせる） */
html[data-theme="dark"] .navbar-map-bg,
html[data-theme="dark"] .footer-map-bg {
background-color: #1f2630;
background-image: none;
}
html[data-theme="dark"] .navbar {
border-bottom-color: rgba(255, 255, 255, 0.06);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
html[data-theme="dark"] .navbar-map-overlay {
background: linear-gradient(135deg, rgba(37, 84, 150, 0.92) 0%, rgba(14, 104, 122, 0.92) 100%);
}
html[data-theme="dark"] .footer {
border-top-color: rgba(255, 255, 255, 0.06);
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.4);
}
html[data-theme="dark"] .footer-map-overlay {
background: linear-gradient(135deg, rgba(20, 24, 31, 0.96) 0%, rgba(14, 17, 22, 0.96) 100%);
}
html[data-theme="dark"] .footer p,
html[data-theme="dark"] .footer .text-muted,
html[data-theme="dark"] .footer a {
color: rgba(215, 219, 224, 0.85) !important;
}
html[data-theme="dark"] .social-btn {
background: var(--dk-surface-2);
color: var(--dk-text-2);
border-color: var(--dk-border-strong);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
html[data-theme="dark"] .social-btn:hover {
background: var(--dk-surface-3);
color: var(--dk-text);
}
html[data-theme="dark"] .social-btn[data-social="twitter"] { color: #4fb3f6; }
html[data-theme="dark"] .social-btn[data-social="facebook"] { color: #7a9be0; }
html[data-theme="dark"] .social-btn[data-social="instagram"] { color: #f06292; }
html[data-theme="dark"] .theme-toggle {
color: #f5c451;
}
html[data-theme="dark"] .cookie-reset-link {
color: var(--dk-link);
}
/* Bootstrap 部品 */
html[data-theme="dark"] .card {
background: var(--dk-surface);
border-color: var(--dk-border);
color: var(--dk-text);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-footer {
background: var(--dk-surface-2);
border-color: var(--dk-border);
color: var(--dk-text);
}
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-light {
background: var(--dk-surface) !important;
color: var(--dk-text);
}
html[data-theme="dark"] .text-dark {
color: var(--dk-text) !important;
}
html[data-theme="dark"] .text-muted {
color: var(--dk-text-3) !important;
}
html[data-theme="dark"] .text-secondary {
color: var(--dk-text-2) !important;
}
html[data-theme="dark"] .border,
html[data-theme="dark"] .border-top,
html[data-theme="dark"] .border-bottom {
border-color: var(--dk-border) !important;
}
html[data-theme="dark"] .alert-info {
background: var(--dk-info-bg);
border-color: var(--dk-info-border);
color: #a9cdf2;
}
html[data-theme="dark"] .alert-warning {
background: var(--dk-warn-bg);
border-color: var(--dk-warn-border);
color: #f2d17a;
}
html[data-theme="dark"] .alert-success {
background: var(--dk-ok-bg);
border-color: var(--dk-ok-border);
color: #8fd9a8;
}
html[data-theme="dark"] .alert-danger {
background: var(--dk-danger-bg);
border-color: var(--dk-danger-border);
color: #f1a0a8;
}
html[data-theme="dark"] .alert-secondary,
html[data-theme="dark"] .alert-light {
background: var(--dk-surface-2);
border-color: var(--dk-border);
color: var(--dk-text-2);
}
html[data-theme="dark"] .alert a {
color: inherit;
text-decoration: underline;
}
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .input-group-text,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]) {
background-color: var(--dk-surface-2);
color: var(--dk-text);
border-color: var(--dk-border-strong);
}
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus,
html[data-theme="dark"] textarea:focus {
background-color: var(--dk-surface-2);
color: var(--dk-text);
border-color: var(--dk-accent);
box-shadow: 0 0 0 0.2rem rgba(91, 156, 246, 0.25);
}
html[data-theme="dark"] .form-control::placeholder,
html[data-theme="dark"] textarea::placeholder {
color: var(--dk-text-3);
}
html[data-theme="dark"] .form-floating > label,
html[data-theme="dark"] .form-label,
html[data-theme="dark"] .form-check-label,
html[data-theme="dark"] .form-text {
color: var(--dk-text-2);
}
html[data-theme="dark"] .form-select {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a7afb9' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}
html[data-theme="dark"] .btn-outline-secondary {
color: var(--dk-text-2);
border-color: var(--dk-border-strong);
}
html[data-theme="dark"] .btn-outline-secondary:hover {
background: var(--dk-surface-3);
color: var(--dk-text);
border-color: var(--dk-border-strong);
}
html[data-theme="dark"] .btn-light,
html[data-theme="dark"] .btn-outline-light {
background: var(--dk-surface-2);
border-color: var(--dk-border-strong);
color: var(--dk-text);
}
html[data-theme="dark"] .btn-secondary {
background: #4b5563;
border-color: #4b5563;
}
html[data-theme="dark"] .breadcrumb-item a {
color: var(--dk-link);
}
html[data-theme="dark"] .breadcrumb-item.active,
html[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before {
color: var(--dk-text-3);
}
html[data-theme="dark"] .modal-content {
background: var(--dk-surface);
color: var(--dk-text);
border-color: var(--dk-border-strong);
}
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer {
border-color: var(--dk-border);
}
html[data-theme="dark"] .modal-header.bg-warning {
background: #8a6d0b !important;
color: #fff;
}
html[data-theme="dark"] .btn-close {
filter: invert(1) grayscale(1) brightness(1.4);
}
html[data-theme="dark"] .table {
color: var(--dk-text);
border-color: var(--dk-border);
}
html[data-theme="dark"] .list-group-item {
background: var(--dk-surface);
color: var(--dk-text);
border-color: var(--dk-border);
}
html[data-theme="dark"] .dropdown-menu {
background: var(--dk-surface-2);
border-color: var(--dk-border-strong);
}
html[data-theme="dark"] .dropdown-item {
color: var(--dk-text);
}
html[data-theme="dark"] .dropdown-item:hover {
background: var(--dk-surface-3);
color: var(--dk-text);
}
html[data-theme="dark"] .badge.bg-light {
background: var(--dk-surface-3) !important;
color: var(--dk-text);
}
/* 共通アラート・チュートリアル・QRポップアップ（common.js） */
html[data-theme="dark"] .custom-alert {
background: rgba(34, 38, 46, 0.97);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}
html[data-theme="dark"] .custom-alert .alert-title {
color: var(--dk-text);
}
html[data-theme="dark"] .custom-alert .alert-message {
color: var(--dk-text-2);
}
html[data-theme="dark"] .custom-alert .alert-close {
color: var(--dk-text-3);
}
html[data-theme="dark"] .tutorial-tooltip,
html[data-theme="dark"] .tutorial-completion,
html[data-theme="dark"] .qr-popup-content,
html[data-theme="dark"] .personal-url-popup-content {
background: var(--dk-surface);
color: var(--dk-text);
}
html[data-theme="dark"] .tutorial-tooltip-body,
html[data-theme="dark"] .qr-popup-body {
color: var(--dk-text-2);
}
html[data-theme="dark"] .tutorial-prev-btn,
html[data-theme="dark"] .tutorial-skip-btn {
background: var(--dk-surface-2);
color: var(--dk-text-2);
}
html[data-theme="dark"] .tutorial-prev-btn:hover,
html[data-theme="dark"] .tutorial-skip-btn:hover {
background: var(--dk-surface-3);
color: var(--dk-text);
}
/* 専用URL/QRアクセスのポップアップ・チュートリアル（common.js が生成） */
html[data-theme="dark"] .qr-popup-title {
color: var(--dk-text);
}
html[data-theme="dark"] .qr-popup-body,
html[data-theme="dark"] .qr-popup-body p,
html[data-theme="dark"] .qr-message,
html[data-theme="dark"] .tutorial-tooltip-body p {
color: var(--dk-text-2);
}
html[data-theme="dark"] .qr-notice {
background: var(--dk-info-bg) !important;
border-color: var(--dk-info-border) !important;
color: #a9cdf2 !important;
}
html[data-theme="dark"] .personal-url-notice {
background: linear-gradient(135deg, #3a2f10 0%, #33290f 100%);
border-color: #6b5417;
}
html[data-theme="dark"] .personal-url-text strong {
color: #f2d17a;
}
html[data-theme="dark"] .personal-url-text p {
color: #d9c48a;
}
/* 写真・スクリーンショットは少しだけ暗くして眩しさを抑える（地図タイルとQRは除く） */
html[data-theme="dark"] img:not(.gm-style img):not([class*="marker"]):not(.stamp-image-preview):not(.message-stamp) {
filter: brightness(0.88);
}
/* =============================================================================
3. トップページ（home.css）
============================================================================= */
html[data-theme="dark"] .hero-section {
background: linear-gradient(180deg, #1f232a 0%, #1a1d23 100%);
}
html[data-theme="dark"] .hero-section::before {
background: radial-gradient(circle, rgba(99, 179, 237, 0.06) 0%, transparent 70%);
}
html[data-theme="dark"] .hero-section::after {
background: radial-gradient(circle, rgba(134, 239, 172, 0.04) 0%, transparent 70%);
}
html[data-theme="dark"] .hero-title-gradient {
filter: drop-shadow(0 2px 6px rgba(37, 99, 235, 0.35));
}
html[data-theme="dark"] .hero-badges li {
background: rgba(255, 255, 255, 0.07);
border-color: rgba(255, 255, 255, 0.14);
color: var(--dk-text-2);
box-shadow: none;
}
html[data-theme="dark"] .hero-illustration {
filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.5));
}
html[data-theme="dark"] .hero-illustration rect[fill="#f0f4f8"] { fill: #262b34; }
html[data-theme="dark"] .hero-illustration path[stroke="#e2e8f0"] { stroke: #3a4250; }
html[data-theme="dark"] .phone-mockup rect[fill="#ffffff"] { fill: #2a2f38; }
html[data-theme="dark"] .phone-mockup rect[fill="#f0f4f8"] { fill: #22262e; }
html[data-theme="dark"] .phone-mockup rect[fill="#f8fafb"] { fill: #2a2f38; }
html[data-theme="dark"] .phone-mockup rect[fill="#cbd5e1"] { fill: #3b434f; }
html[data-theme="dark"] .phone-mockup path[stroke="#e2e8f0"] { stroke: #3a4250; }
html[data-theme="dark"] .phone-mockup text[fill="#64748b"] { fill: #a7afb9; }
html[data-theme="dark"] .duration-select {
background: var(--dk-surface-2);
color: var(--dk-text);
border-color: var(--dk-border-strong);
}
html[data-theme="dark"] .section-title::before,
html[data-theme="dark"] .section-title::after {
opacity: 0.22;
}
html[data-theme="dark"] .feature-card:hover {
background: var(--dk-surface-2);
border-color: var(--dk-border-strong);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
html[data-theme="dark"] .feature-card::before {
background: linear-gradient(90deg, rgba(255, 255, 255, 0.12) 0%, transparent 100%);
}
html[data-theme="dark"] .feature-card:hover .feature-title {
color: #ffffff;
}
html[data-theme="dark"] .feature-card:hover .feature-description {
color: var(--dk-text-2);
}
html[data-theme="dark"] .feature-icon,
html[data-theme="dark"] .feature-card:hover .feature-icon {
background: rgba(255, 255, 255, 0.06) !important;
}
html[data-theme="dark"] .scope-card {
box-shadow: none;
}
html[data-theme="dark"] .scope-card--off::before {
background: linear-gradient(90deg, #5b6472 0%, #7f8894 100%);
}
html[data-theme="dark"] .scope-figure {
background: var(--dk-surface-2);
}
html[data-theme="dark"] .step-item-with-mockup:hover,
html[data-theme="dark"] .scope-card:hover,
html[data-theme="dark"] .faq-item:hover,
html[data-theme="dark"] .video-link-card:hover {
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}
html[data-theme="dark"] .iphone-mockup {
filter: drop-shadow(0 25px 50px rgba(0, 0, 0, 0.6));
}
html[data-theme="dark"] .faq-question:hover {
background: var(--dk-surface-2);
}
html[data-theme="dark"] .faq-section a[style] {
color: var(--dk-link) !important;
}
html[data-theme="dark"] .cta-card {
background: linear-gradient(135deg, #22262e 0%, #1f232a 100%);
}
html[data-theme="dark"] .maintenance-box {
background: rgba(255, 255, 255, 0.05);
border-color: var(--dk-text-3);
}
html[data-theme="dark"] .stats-section::before {
background: linear-gradient(90deg, transparent, var(--dk-border-strong), transparent);
}
/* =============================================================================
4. 共有画面（share.css と JS が生成するUI）
============================================================================= */
html[data-theme="dark"] .map-container {
background: #1f232a;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
}
html[data-theme="dark"] .countdown {
color: #f28b82;
}
/* 参加者リスト */
html[data-theme="dark"] .participant-item {
color: var(--dk-text);
}
html[data-theme="dark"] .participant-list::-webkit-scrollbar-thumb {
background: #5b6472;
}
html[data-theme="dark"] .participant-list::after {
background: linear-gradient(to bottom, transparent, rgba(34, 38, 46, 0.95));
}
html[data-theme="dark"] .scroll-indicator {
background: linear-gradient(to bottom, transparent, var(--dk-surface));
}
/* チャット */
html[data-theme="dark"] .chat-container,
html[data-theme="dark"] .chat-screen {
background: var(--dk-surface) !important;
color: var(--dk-text);
}
html[data-theme="dark"] .chat-participant-list {
background: var(--dk-bg);
}
html[data-theme="dark"] .chat-participant-item {
background: var(--dk-surface);
border-color: var(--dk-border);
color: var(--dk-text);
}
html[data-theme="dark"] .chat-participant-item:hover {
background: var(--dk-surface-2);
}
html[data-theme="dark"] .chat-participant-item .participant-name {
color: var(--dk-text);
}
html[data-theme="dark"] .chat-participant-item.group .last-message {
color: var(--dk-text-2);
}
html[data-theme="dark"] .chat-section-label.group-section {
background: linear-gradient(135deg, #1d3b26 0%, #204a2c 100%);
color: #9fdcb0;
}
html[data-theme="dark"] .chat-section-label.individual-section {
background: linear-gradient(135deg, #34243c 0%, #452f4f 100%);
color: #d9b3e6;
}
html[data-theme="dark"] .message:not(.own) .message-bubble {
background: var(--dk-surface-3);
color: var(--dk-text);
}
html[data-theme="dark"] .message.own .message-bubble {
color: #eef7f0;
}
html[data-theme="dark"] .message.own .message-bubble.stamp-bubble,
html[data-theme="dark"] .message:not(.own) .message-bubble.stamp-bubble {
background: transparent !important;
}
html[data-theme="dark"] .system-message {
background: rgba(255, 255, 255, 0.06);
color: var(--dk-text-2);
}
html[data-theme="dark"] .chat-welcome {
color: var(--dk-text-2);
}
html[data-theme="dark"] .chat-input-area {
background: var(--dk-surface) !important;
border-top: 1px solid var(--dk-border);
}
/* チャット入力欄: color-scheme: dark の影響で端末によっては真っ黒に塗られるため、明示的に指定する */
html[data-theme="dark"] .chat-input,
html[data-theme="dark"] textarea.chat-input,
html[data-theme="dark"] #group-input,
html[data-theme="dark"] #individual-input {
background: #323844 !important;
background-color: #323844 !important;
color: #e6e9ed !important;
-webkit-text-fill-color: #e6e9ed;
caret-color: #e6e9ed;
border: 1px solid var(--dk-border-strong) !important;
color-scheme: dark;
}
html[data-theme="dark"] .chat-input::placeholder,
html[data-theme="dark"] textarea.chat-input::placeholder {
color: var(--dk-text-3);
-webkit-text-fill-color: var(--dk-text-3);
}
html[data-theme="dark"] .chat-input:focus,
html[data-theme="dark"] textarea.chat-input:focus {
border-color: var(--color-primary) !important;
}
html[data-theme="dark"] .chat-input-wrapper {
background: transparent;
}
html[data-theme="dark"] .typing-indicator {
background: rgba(42, 47, 56, 0.96);
color: var(--dk-text-2);
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.4);
}
html[data-theme="dark"] .stamp-picker,
html[data-theme="dark"] .reaction-picker,
html[data-theme="dark"] .delete-message-popup,
html[data-theme="dark"] .image-preview-container,
html[data-theme="dark"] .draw-color-palette {
background: var(--dk-surface);
color: var(--dk-text);
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
}
html[data-theme="dark"] .stamp-picker-header {
background: var(--dk-surface) !important;
border-bottom: 1px solid var(--dk-border);
}
html[data-theme="dark"] .stamp-item:hover {
background: rgba(31, 165, 63, 0.15);
}
html[data-theme="dark"] .draw-color-swatch {
border-color: var(--dk-surface);
}
html[data-theme="dark"] .voice-message-player {
background: rgba(255, 255, 255, 0.06);
}
html[data-theme="dark"] .voice-time,
html[data-theme="dark"] .voice-placeholder,
html[data-theme="dark"] .pin-popup-time {
color: var(--dk-text-2);
}
html[data-theme="dark"] .reaction-add-btn {
background: rgba(255, 255, 255, 0.06);
color: var(--dk-text-3);
}
html[data-theme="dark"] .reaction-add-btn:hover {
background: rgba(255, 255, 255, 0.12);
color: var(--dk-text);
}
html[data-theme="dark"] .link-preview [style*="background: #fff"] {
background: var(--dk-surface-3) !important;
border-color: var(--dk-border) !important;
color: var(--dk-text);
}
/* 地図まわりのコントロール */
html[data-theme="dark"] .gm-control-container,
html[data-theme="dark"] .gm-control-button,
html[data-theme="dark"] #radar-time-control,
html[data-theme="dark"] .map-compass-btn {
background: var(--dk-surface) !important;
color: var(--dk-text) !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
html[data-theme="dark"] .gm-control-button:hover,
html[data-theme="dark"] .map-compass-btn:hover {
background: var(--dk-surface-2) !important;
}
html[data-theme="dark"] .gm-style .gm-style-iw-c {
background: var(--dk-surface) !important;
color: var(--dk-text);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6) !important;
}
html[data-theme="dark"] .gm-style .gm-style-iw-d {
color: var(--dk-text);
}
html[data-theme="dark"] .gm-style .gm-style-iw-tc::after,
html[data-theme="dark"] .gm-style .gm-style-iw-t::after {
background: var(--dk-surface) !important;
}
html[data-theme="dark"] .gm-style .gm-ui-hover-effect > span {
background-color: var(--dk-text);
}
html[data-theme="dark"] .participant-popup-body,
html[data-theme="dark"] .cluster-popup-location {
color: var(--dk-text-2);
}
html[data-theme="dark"] .cluster-popup-members-title {
color: var(--dk-text);
}
html[data-theme="dark"] .cluster-popup-actions .btn-secondary {
background: var(--dk-surface-2);
color: var(--dk-text);
border-color: var(--dk-border-strong);
}
/* LINE連携パネル */
html[data-theme="dark"] .line-link-panel {
background: #1e2a22;
color: var(--dk-text);
border-top: 1px solid var(--dk-border);
}
html[data-theme="dark"] .line-link-code {
background: var(--dk-surface-2);
color: var(--dk-text);
border-color: var(--dk-border-strong);
}
html[data-theme="dark"] .line-link-btn-outline {
background: var(--dk-surface-2);
color: var(--dk-text-2);
border-color: var(--dk-border-strong);
}
html[data-theme="dark"] .line-link-muted,
html[data-theme="dark"] .line-link-waiting,
html[data-theme="dark"] .line-link-btn-text {
color: var(--dk-text-2);
}
/* JSがインラインスタイルで作るUI（通知トースト・通知設定モーダル・ピン/POIポップアップ） */
html[data-theme="dark"] #notification-container .app-notification {
background: var(--dk-surface) !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}
html[data-theme="dark"] [style*="background: white"],
html[data-theme="dark"] [style*="background:white"],
html[data-theme="dark"] [style*="background: #fff;"],
html[data-theme="dark"] [style*="background:#fff;"],
html[data-theme="dark"] [style*="background: #ffffff"] {
background: var(--dk-surface) !important;
color: var(--dk-text);
}
html[data-theme="dark"] [style*="background: #f8f9fa"],
html[data-theme="dark"] [style*="background:#f8f9fa"],
html[data-theme="dark"] [style*="background: #e7f3ff"],
html[data-theme="dark"] [style*="background:#e8f5e9"] {
background: var(--dk-surface-2) !important;
color: var(--dk-text-2) !important;
}
html[data-theme="dark"] [style*="color: #333"],
html[data-theme="dark"] [style*="color:#333"],
html[data-theme="dark"] [style*="color: #1a202c"],
html[data-theme="dark"] [style*="color:#202124"] {
color: var(--dk-text) !important;
}
html[data-theme="dark"] [style*="color: #666"],
html[data-theme="dark"] [style*="color:#666"],
html[data-theme="dark"] [style*="color: #495057"],
html[data-theme="dark"] [style*="color:#5f6368"],
html[data-theme="dark"] [style*="color:#555"] {
color: var(--dk-text-2) !important;
}
html[data-theme="dark"] [style*="color: #999"],
html[data-theme="dark"] [style*="color:#999"] {
color: var(--dk-text-3) !important;
}
html[data-theme="dark"] [style*="background: #f8d7da"] {
background: var(--dk-danger-bg) !important;
color: #f1a0a8 !important;
}
/* QRコードは読み取りのため白地のまま */
html[data-theme="dark"] #qr-code,
html[data-theme="dark"] #modal-qr-code,
html[data-theme="dark"] #qr-code canvas,
html[data-theme="dark"] #qr-code img {
background: #ffffff !important;
filter: none;
}
html[data-theme="dark"] #qr-code canvas,
html[data-theme="dark"] #qr-code img {
padding: 8px;
border-radius: 6px;
}
/* 地図の配色をページを開いたまま切り替えたとき（12-map.js）:
Google Maps の colorScheme は生成後に変えられないため、タイル描画だけ反転して反対の配色に見せる。
ベクター地図は canvas、ラスター地図は /maps/vt のタイル画像。雨雲レーダーのタイルやマーカーは対象外。
※ テーマに関係なく効かせる（ライト→ダーク、ダーク→ライトの両方向） */
/* ライトで生成した地図をダークに見せる */
#map.map-scheme-flip .gm-style canvas,
#map.map-scheme-flip .gm-style img[src*="/maps/vt"] {
filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(0.92);
}
/* ダークで生成した地図をライトに見せる（反転だけだと灰色っぽく沈むので明るめに） */
#map[data-map-scheme="dark"].map-scheme-flip .gm-style canvas,
#map[data-map-scheme="dark"].map-scheme-flip .gm-style img[src*="/maps/vt"] {
filter: invert(1) hue-rotate(180deg) brightness(1.22) contrast(0.9) saturate(0.9);
}
/* =============================================================================
5. ガイド・規約・プライバシー・お問い合わせ・セッション作成/期限切れ
============================================================================= */
/* ガイド記事 */
html[data-theme="dark"] .article-wrap h1,
html[data-theme="dark"] .article-wrap h2,
html[data-theme="dark"] .article-wrap h3 {
color: var(--dk-text);
}
html[data-theme="dark"] .article-wrap h2 {
border-bottom-color: var(--dk-accent);
}
html[data-theme="dark"] .article-wrap p,
html[data-theme="dark"] .article-wrap li {
color: var(--dk-text-2);
}
html[data-theme="dark"] .article-meta {
color: var(--dk-text-3);
}
html[data-theme="dark"] .point-box {
background: var(--dk-info-bg);
border-left-color: var(--dk-accent);
}
html[data-theme="dark"] .caution-box {
background: var(--dk-warn-bg);
}
html[data-theme="dark"] .compare-table {
background: var(--dk-surface);
}
html[data-theme="dark"] .compare-table th {
background: var(--dk-surface-2);
color: var(--dk-text);
border-color: var(--dk-border);
}
html[data-theme="dark"] .compare-table td {
color: var(--dk-text-2);
border-color: var(--dk-border);
}
html[data-theme="dark"] .article-cta {
background: linear-gradient(135deg, #1c2b3a 0%, #1a2a2e 100%);
border-color: var(--dk-info-border);
}
html[data-theme="dark"] .related-links {
background: var(--dk-surface);
border-color: var(--dk-border);
}
html[data-theme="dark"] .related-links a {
color: var(--dk-link);
}
html[data-theme="dark"] .guide-card {
background: var(--dk-surface);
border-color: var(--dk-border);
}
html[data-theme="dark"] .guide-card:hover {
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}
html[data-theme="dark"] .guide-card h2 {
color: var(--dk-text);
}
html[data-theme="dark"] .guide-card p {
color: var(--dk-text-2);
}
html[data-theme="dark"] .guide-card .guide-tag {
background: rgba(91, 156, 246, 0.16);
color: var(--dk-link);
}
/* 利用規約・プライバシーポリシー */
html[data-theme="dark"] .terms-header,
html[data-theme="dark"] .privacy-header {
background: linear-gradient(180deg, #1f232a 0%, #1a1d23 100%);
}
html[data-theme="dark"] .terms-content,
html[data-theme="dark"] .privacy-content {
background: var(--dk-bg);
}
html[data-theme="dark"] .terms-title,
html[data-theme="dark"] .privacy-title,
html[data-theme="dark"] .section-card .section-title,
html[data-theme="dark"] .highlight-box-title,
html[data-theme="dark"] .contact-card-title {
color: var(--dk-text);
}
html[data-theme="dark"] .terms-subtitle,
html[data-theme="dark"] .privacy-subtitle,
html[data-theme="dark"] .section-content,
html[data-theme="dark"] .section-content p,
html[data-theme="dark"] .section-content li,
html[data-theme="dark"] .privacy-list li,
html[data-theme="dark"] .highlight-box-content,
html[data-theme="dark"] .contact-card p {
color: var(--dk-text-2);
}
html[data-theme="dark"] .last-updated {
color: var(--dk-text-3);
}
html[data-theme="dark"] .section-card,
html[data-theme="dark"] .contact-card {
background: var(--dk-surface);
border-color: var(--dk-border);
}
html[data-theme="dark"] .section-card:hover {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
html[data-theme="dark"] .section-icon {
background: rgba(255, 255, 255, 0.06) !important;
}
html[data-theme="dark"] .highlight-box {
background: var(--dk-info-bg);
border-color: var(--dk-info-border);
}
/* お問い合わせ */
html[data-theme="dark"] .contact-header {
color: var(--dk-text);
}
html[data-theme="dark"] .contact-info {
background: linear-gradient(135deg, var(--dk-surface) 0%, var(--dk-surface-2) 100%);
}
html[data-theme="dark"] .contact-info h5 {
color: var(--dk-text);
}
/* セッション作成完了 */
html[data-theme="dark"] .sc-card {
background: var(--dk-surface);
border-color: var(--dk-border);
box-shadow: 0 10px 32px rgba(0, 0, 0, 0.35);
}
html[data-theme="dark"] .sc-check { background: rgba(31, 165, 63, 0.2); color: #4ccf6a; }
html[data-theme="dark"] .sc-title,
html[data-theme="dark"] .sc-home:hover { color: var(--dk-text); }
html[data-theme="dark"] .sc-sub,
html[data-theme="dark"] .sc-qr-loading,
html[data-theme="dark"] .sc-qr-note,
html[data-theme="dark"] .sc-label,
html[data-theme="dark"] .sc-meta,
html[data-theme="dark"] .sc-home { color: var(--dk-text-2); }
html[data-theme="dark"] .sc-actions-help { color: var(--dk-text-3); }
html[data-theme="dark"] .sc-qr { background: var(--dk-surface-2); }
html[data-theme="dark"] #share-url {
background: var(--dk-surface-2);
border-color: var(--dk-border-strong);
color: var(--dk-text);
}
html[data-theme="dark"] .sc-secondary { background: var(--dk-surface-3); color: var(--dk-text); }
html[data-theme="dark"] .sc-secondary:hover { background: #3b424f; color: var(--dk-text); }
html[data-theme="dark"] .sc-meta { border-top-color: var(--dk-border); }
/* 新レイアウト（上のバー・シート・＋） */
html[data-theme="dark"] .share-topbar,
html[data-theme="dark"] .share-sheet {
background: var(--dk-surface);
border-color: var(--dk-border);
}
html[data-theme="dark"] .share-map-wrap { border-color: var(--dk-border); background: var(--dk-surface-2); }
html[data-theme="dark"] .share-timer { background: var(--dk-surface-2); border-color: var(--dk-border-strong); }
html[data-theme="dark"] .share-topbar-left,
html[data-theme="dark"] .share-timer-label,
html[data-theme="dark"] .strip-person,
html[data-theme="dark"] .sheet-summary-sub,
html[data-theme="dark"] .share-sheet-hint { color: var(--dk-text-2); }
html[data-theme="dark"] .sheet-section-title,
html[data-theme="dark"] .sheet-details > summary { color: var(--dk-text); }
html[data-theme="dark"] .sheet-section { border-color: var(--dk-border); }
html[data-theme="dark"] .share-sq { background: var(--dk-surface-2); color: var(--dk-text-2); }
html[data-theme="dark"] .share-topbar-btn { background: var(--dk-surface-2); border-color: var(--dk-border-strong); color: var(--dk-text-2); }
html[data-theme="dark"] .map-round-btn,
html[data-theme="dark"] .fab-label { background: rgba(34, 38, 46, 0.96); color: var(--dk-text); }
html[data-theme="dark"] .strip-av { border-color: var(--dk-surface); box-shadow: 0 0 0 2px var(--dk-border-strong); }
html[data-theme="dark"] .strip-dot { border-color: var(--dk-surface); }
html[data-theme="dark"] .strip-invite .strip-av { background: var(--dk-surface-2); }
html[data-theme="dark"] .share-sheet-grab span { background: var(--dk-border-strong); }
/* 参加者を招待モーダル */
html[data-theme="dark"] .share-invite-title { color: var(--dk-text); }
html[data-theme="dark"] .share-invite-sub,
html[data-theme="dark"] .share-invite-qr-note,
html[data-theme="dark"] .share-invite-meta,
html[data-theme="dark"] .share-invite-label,
html[data-theme="dark"] .sheet-footer-links a { color: var(--dk-text-2); }
html[data-theme="dark"] .share-invite-close { background: var(--dk-surface-2); color: var(--dk-text-2); }
html[data-theme="dark"] .share-invite-qr { background: var(--dk-surface-2); }
html[data-theme="dark"] .share-invite-grab { background: var(--dk-border-strong); }
/* 天気パネル（シート型） */
html[data-theme="dark"] .sheet-modal-title,
html[data-theme="dark"] .weather-temp,
html[data-theme="dark"] .weather-detail-value,
html[data-theme="dark"] .hourly-temp,
html[data-theme="dark"] .weather-card { color: var(--dk-text); }
html[data-theme="dark"] .sheet-modal-sub,
html[data-theme="dark"] .city-name,
html[data-theme="dark"] .weather-description,
html[data-theme="dark"] .weather-detail-label,
html[data-theme="dark"] .hourly-forecast-title,
html[data-theme="dark"] .hourly-time,
html[data-theme="dark"] .weather-update-time,
html[data-theme="dark"] .weather-location { color: var(--dk-text-2); }
html[data-theme="dark"] .sheet-modal-close { background: var(--dk-surface-2); color: var(--dk-text-2); }
html[data-theme="dark"] .weather-main,
html[data-theme="dark"] .hourly-item { background: var(--dk-surface-2); }
html[data-theme="dark"] .weather-detail-item { border-color: var(--dk-border); }
html[data-theme="dark"] .sheet-modal-grab { background: var(--dk-border-strong); }
/* シート内の行ボタン・位置情報の利用許可 */
html[data-theme="dark"] .sheet-row-btn { background: var(--dk-surface-2); border-color: var(--dk-border); color: var(--dk-text); }
html[data-theme="dark"] .sheet-row-icon,
html[data-theme="dark"] .perm-note-icon { background: var(--dk-surface-3); border-color: var(--dk-border-strong); color: var(--dk-text-2); }
html[data-theme="dark"] .sheet-row-sub,
html[data-theme="dark"] .sheet-row-chevron,
html[data-theme="dark"] .perm-cancel { color: var(--dk-text-2); }
html[data-theme="dark"] .perm-lead { color: var(--dk-text); }
html[data-theme="dark"] .perm-notes li { background: var(--dk-surface-2); color: var(--dk-text-2); }