/* ============================================================
 * らんど ダークモード
 * html.land-dark のときだけ効く。色は <style id="land-dark-vars"> の変数（設定画面で変更可）
 * Cocoon の部品はここで、プラグインの部品は dark.js が自動で暗くする
 * ============================================================ */

/* ---------- 切替ボタン ---------- */
.land-dark-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; margin: 0;
  border-radius: 50%; border: 1px solid rgba(0, 0, 0, .08);
  background: #fff; color: #3b4252;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .16);
  cursor: pointer; line-height: 1;
  transition: transform .2s ease, background-color .3s ease, color .3s ease;
  -webkit-tap-highlight-color: transparent;
}
.land-dark-toggle:hover { transform: scale(1.08); }
.land-dark-toggle:active { transform: scale(.94); }
.land-dark-toggle:focus-visible { outline: 3px solid #7cc8ff; outline-offset: 2px; }
.land-dark-toggle svg { width: 22px; height: 22px; display: block; transition: transform .45s ease; }
.land-dark-toggle .ldt-sun { display: none; }
html.land-dark .land-dark-toggle { background: #262a32; color: #ffd45e; border-color: rgba(255, 255, 255, .14); box-shadow: 0 4px 14px rgba(0, 0, 0, .5); }
html.land-dark .land-dark-toggle .ldt-sun { display: block; transform: rotate(90deg); }
html.land-dark .land-dark-toggle .ldt-moon { display: none; }

.land-dark-toggle.ldt-float { position: fixed; z-index: 9990; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
.land-dark-toggle.ldt-left { left: 16px; }
.land-dark-toggle.ldt-right { right: 16px; bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }
/* Cocoon のスマホ下部メニューがあるときは上にずらす */
body[class*="footer-mobile-buttons"] .land-dark-toggle.ldt-float { bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
body.is-fullscreen-mode .land-dark-toggle.ldt-float, body.land-fullscreen .land-dark-toggle.ldt-float { display: none; }
@media print { .land-dark-toggle { display: none !important; } }

/* 切り替えの瞬間：丸く広がる（View Transitions）。ページ遷移用のフェードは使わない */
html.land-dk-vt::view-transition-old(root),
html.land-dk-vt::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
html.land-dk-vt::view-transition-group(*) { animation-duration: 0s; }
/* 非対応ブラウザ：色をなめらかに */
html.land-dk-fade body, html.land-dk-fade body * { transition: background-color .3s ease, color .3s ease, border-color .3s ease !important; }

/* ---------- 全体 ---------- */
html.land-dark { color-scheme: dark;
  --dk-surface2: color-mix(in srgb, var(--dk-surface) 88%, #fff);
  --dk-border: rgba(255, 255, 255, .12);
  --dk-muted: color-mix(in srgb, var(--dk-text) 62%, var(--dk-base));
}
html.land-dark body { background-color: var(--dk-base) !important; color: var(--dk-text); }
/* 背景画像はそのまま、上から暗く */
html.land-dark body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: rgba(6, 8, 12, var(--dk-dim));
}

/* ---------- ヘッダー・メニュー ---------- */
html.land-dark .header-container,
html.land-dark .header-container .navi,
html.land-dark #header,
html.land-dark .header,
html.land-dark #navi,
html.land-dark #navi .navi-in > .menu-header .sub-menu,
html.land-dark .navi-in .sub-menu,
html.land-dark .navi-in .menu-mobile .sub-menu { background-color: var(--dk-key) !important; }
html.land-dark .header,
html.land-dark .header .site-name-text,
html.land-dark .header .tagline,
html.land-dark #navi .navi-in a,
html.land-dark #navi .navi-in a:hover { color: var(--dk-text) !important; }
html.land-dark #navi .navi-in a:hover { background-color: rgba(255, 255, 255, .08) !important; }
html.land-dark .navi-in .sub-menu { box-shadow: 0 8px 24px rgba(0, 0, 0, .45); }
html.land-dark .mobile-menu-buttons,
html.land-dark .navi-menu-content,
html.land-dark .search-menu-content,
html.land-dark .sidebar-menu-content,
html.land-dark .share-menu-content,
html.land-dark .follow-menu-content { background-color: var(--dk-surface) !important; color: var(--dk-text) !important; }
html.land-dark .mobile-menu-buttons .menu-button > a,
html.land-dark .mobile-menu-buttons .menu-button { color: var(--dk-text) !important; }
html.land-dark .navi-menu-content a,
html.land-dark .menu-drawer a { color: var(--dk-text) !important; }

/* ---------- 本文・サイドバー・フッター ---------- */
html.land-dark .main,
html.land-dark .sidebar,
html.land-dark .breadcrumb,
html.land-dark .carousel-in,
html.land-dark .content-top,
html.land-dark .content-bottom,
html.land-dark .appeal-in,
html.land-dark .recommended { background-color: var(--dk-surface) !important; color: var(--dk-text) !important; }
html.land-dark .footer,
html.land-dark #footer { background-color: var(--dk-key) !important; color: var(--dk-text) !important; }
html.land-dark #footer a:not(.sns-button) { color: var(--dk-text) !important; }
html.land-dark .breadcrumb,
html.land-dark .breadcrumb a,
html.land-dark .breadcrumb .fa { color: var(--dk-muted) !important; }

html.land-dark .entry-title,
html.land-dark .article h1,
html.land-dark .article h2,
html.land-dark .article h3,
html.land-dark .article h4,
html.land-dark .article h5,
html.land-dark .article h6,
html.land-dark .sidebar h2,
html.land-dark .sidebar h3,
html.land-dark .entry-card-title,
html.land-dark .related-entry-card-title,
html.land-dark .card-title { color: var(--dk-text) !important; }
html.land-dark .article h2,
html.land-dark .sidebar h2,
html.land-dark .sidebar h3 { background-color: var(--dk-key) !important; }
html.land-dark .entry-card-snippet,
html.land-dark .related-entry-card-snippet,
html.land-dark .entry-date,
html.land-dark .post-date,
html.land-dark .post-update,
html.land-dark .date-tags,
html.land-dark .author-info,
html.land-dark .card-meta { color: var(--dk-muted) !important; }

html.land-dark .entry-content a:not(.btn):not(.blogcard-wrap):not([class*="wp-block-button"]),
html.land-dark .sidebar .widget a:not(.a-wrap),
html.land-dark .comment-content a { color: var(--dk-link); }

html.land-dark .cat-label,
html.land-dark .cat-link,
html.land-dark .tag-link { background-color: var(--dk-key) !important; color: var(--dk-key-text) !important; }
html.land-dark .tag-link { background-color: transparent !important; }

/* カード・ブログカード・目次・枠 */
html.land-dark .a-wrap:hover { background-color: rgba(255, 255, 255, .05) !important; }
html.land-dark .blogcard,
html.land-dark .blogcard-wrap,
html.land-dark .toc,
html.land-dark .author-box,
html.land-dark .pager-post-navi a.a-wrap,
html.land-dark .comment-area .comment,
html.land-dark .box-menu,
html.land-dark .ranking-item,
html.land-dark .speech-balloon,
html.land-dark .information-box,
html.land-dark .question-box,
html.land-dark .alert-box,
html.land-dark .memo-box,
html.land-dark .comment-box,
html.land-dark .ok-box,
html.land-dark .ng-box,
html.land-dark .good-box,
html.land-dark .bad-box,
html.land-dark .profile-box,
html.land-dark .blank-box,
html.land-dark .sticky,
html.land-dark .timeline-box { background-color: var(--dk-surface2) !important; color: var(--dk-text) !important; }
html.land-dark .speech-balloon::before { border-right-color: var(--dk-border) !important; }
html.land-dark .speech-balloon::after { border-right-color: var(--dk-surface2) !important; }
html.land-dark .sbp-r .speech-balloon::before { border-left-color: var(--dk-border) !important; border-right-color: transparent !important; }
html.land-dark .sbp-r .speech-balloon::after { border-left-color: var(--dk-surface2) !important; border-right-color: transparent !important; }
html.land-dark .blogcard-title,
html.land-dark .toc-title,
html.land-dark .toc a { color: var(--dk-text) !important; }
html.land-dark .blogcard-snippet,
html.land-dark .blogcard-footer { color: var(--dk-muted) !important; }

/* 表・コード・引用 */
html.land-dark table th { background-color: rgba(255, 255, 255, .06) !important; color: var(--dk-text) !important; }
html.land-dark table td, html.land-dark table th { border-color: var(--dk-border) !important; }
html.land-dark table tr:nth-of-type(2n+1) { background-color: rgba(255, 255, 255, .03) !important; }
html.land-dark pre, html.land-dark code:not(pre code) { background-color: #0b0d11 !important; color: #d6dde6 !important; border-color: var(--dk-border) !important; }
html.land-dark blockquote { background-color: rgba(255, 255, 255, .04) !important; color: var(--dk-text) !important; }
html.land-dark hr { border-color: var(--dk-border) !important; }

/* フォーム */
html.land-dark input[type="text"], html.land-dark input[type="search"], html.land-dark input[type="email"], html.land-dark input[type="url"],
html.land-dark input[type="password"], html.land-dark input[type="number"], html.land-dark input[type="tel"], html.land-dark textarea, html.land-dark select,
html.land-dark .search-edit {
  background-color: #0e1014 !important; color: var(--dk-text) !important; border-color: rgba(255, 255, 255, .18) !important;
}
html.land-dark ::placeholder { color: var(--dk-muted) !important; opacity: 1; }

/* ページ送り・ボタン */
html.land-dark .pagination a, html.land-dark .pagination span, html.land-dark .page-numbers,
html.land-dark .pager-links a, html.land-dark .pager-links span,
html.land-dark .comment-btn, html.land-dark .key-btn, html.land-dark .go-to-top-button {
  background-color: var(--dk-surface2) !important; color: var(--dk-text) !important; border-color: var(--dk-border) !important;
}
html.land-dark .pagination .current { background-color: var(--dk-key) !important; }

/* ウィジェット */
html.land-dark .widget_recent_entries ul li a, html.land-dark .widget_categories ul li a, html.land-dark .widget_archive ul li a,
html.land-dark .widget_pages ul li a, html.land-dark .widget_meta ul li a, html.land-dark .widget_nav_menu ul li a,
html.land-dark .widget_rss ul li a { color: var(--dk-text) !important; }
html.land-dark .widget_recent_entries ul li a:hover, html.land-dark .widget_categories ul li a:hover, html.land-dark .widget_archive ul li a:hover,
html.land-dark .widget_pages ul li a:hover, html.land-dark .widget_nav_menu ul li a:hover { background-color: rgba(255, 255, 255, .05) !important; }

/* 枠線（明るいグレーの線を控えめに） */
html.land-dark .entry-card-wrap, html.land-dark .related-entry-card-wrap, html.land-dark .carousel .a-wrap,
html.land-dark .toc, html.land-dark .blogcard, html.land-dark .author-box { border-color: var(--dk-border) !important; }

/* ---------- 自動で暗くした部品（dark.js が付けるクラス） ---------- */
html.land-dark .land-dk-b { background-color: var(--land-dk-b) !important; }
html.land-dark .land-dk-f { color: var(--land-dk-f) !important; }
html.land-dark .land-dk-bd { border-color: var(--dk-border) !important; }