/*
  Skin Name: Forefrontde Nightline
  Description: FOREFRONDE の世界観に寄せた Cocoon 用スキン。#242529 を基調に、#24d5e5 をアクセントにした静かなダークUIです。
  Skin URI: https://wp-cocoon.com/
  Author: Codex
  Author URI: https://openai.com/
  Version: 1.0.0
  Priority: 9999000000
*/

:root {
  --ff-bg: #242529;
  --ff-panel: rgba(34, 36, 41, 0.96);
  --ff-panel-soft: rgba(41, 43, 48, 0.96);
  --ff-border: rgba(196, 203, 212, 0.14);
  --ff-border-strong: rgba(36, 213, 229, 0.3);
  --ff-text: #edf3f8;
  --ff-muted: #aab4bf;
  --ff-accent: #24d5e5;
  --ff-accent-soft: rgba(36, 213, 229, 0.12);
  --ff-shadow: 0 16px 36px rgba(0, 0, 0, 0.22);
  --ff-radius: 8px;
}

body,
#body,
#navi,
#header,
#footer {
  background-color: var(--ff-bg);
  color: var(--ff-text);
}

body {
  font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", system-ui, sans-serif;
  letter-spacing: 0.01em;
}

html,
body,
body #wrapper,
body #container,
body #header,
body #footer,
body #content,
body #main,
body #sidebar,
body #sidebar-wrap,
body .content,
body .main,
body .sidebar,
body .widget-area,
body .article,
body .entry-card-wrap,
body .related-entry-card,
body .author-box,
body .toc,
body .comment-respond,
body .pager-post-navi,
body .pagination,
body .navigation,
body .search-result-item,
body .ad-wrap,
body .sns-share {
  background-color: var(--ff-bg) !important;
}

body .entry-content,
body .entry-content > *,
body .article .entry-content,
body .widget .textwidget {
  background: transparent !important;
}

body .content .btn,
body .content .button,
body .content .cat-link,
body .content .tag-cloud-link,
body .content .pagination .page-numbers,
body .content .pager-post-navi a,
body .content .sns-share a,
body .content .pagination,
body .content .pager-post-navi,
body .content .sns-share,
body .content .cat-link,
body .content .tag-cloud-link {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: var(--ff-border) !important;
  color: var(--ff-text) !important;
}

body .content .btn:hover,
body .content .button:hover,
body .content .cat-link:hover,
body .content .tag-cloud-link:hover,
body .content .pagination .page-numbers:hover,
body .content .pager-post-navi a:hover,
body .content .sns-share a:hover {
  background: var(--ff-accent-soft) !important;
  border-color: rgba(36, 213, 229, 0.34) !important;
  color: var(--ff-text) !important;
}

body input[type="submit"],
body input[type="button"],
body input[type="reset"],
body button,
body .wp-block-button__link,
body a.wp-block-button__link,
body .button-link,
body .btn-wrap a,
body .taglink,
body .post-list a,
body .archive-title,
body .cat-list a,
body .navi-entry-cards,
body .page-numbers,
body .search-submit,
body .search-form .search-submit,
body .widget .search-submit,
body .widget_categories a,
body .widget_archive a,
body .widget_pages a {
  background-color: rgba(255, 255, 255, 0.03) !important;
  border-color: var(--ff-border) !important;
  color: var(--ff-text) !important;
}

body input[type="submit"]:hover,
body input[type="button"]:hover,
body input[type="reset"]:hover,
body button:hover,
body .wp-block-button__link:hover,
body a.wp-block-button__link:hover,
body .button-link:hover,
body .btn-wrap a:hover,
body .taglink:hover,
body .post-list a:hover,
body .cat-list a:hover,
body .page-numbers:hover,
body .search-submit:hover,
body .search-form .search-submit:hover,
body .widget .search-submit:hover,
body .widget_categories a:hover,
body .widget_archive a:hover,
body .widget_pages a:hover {
  background-color: var(--ff-accent-soft) !important;
  border-color: rgba(36, 213, 229, 0.34) !important;
  color: var(--ff-text) !important;
}

body [class*="carousel"],
body [class*="slider"],
body [class*="swiper"],
body [class*="pickup"],
body [class*="slide"],
body [class*="pickup"] .slick-slide,
body [class*="carousel"] .slick-slide,
body [class*="slider"] .slick-slide {
  background-color: var(--ff-bg) !important;
}

body [class*="carousel"] .slick-list,
body [class*="carousel"] .slick-track,
body [class*="slider"] .slick-list,
body [class*="slider"] .slick-track,
body [class*="swiper"] .swiper-wrapper,
body [class*="swiper"] .swiper-slide {
  background-color: transparent !important;
}

a {
  color: var(--ff-accent);
}

a:hover {
  color: #7fe9f1;
}

::selection {
  background: rgba(36, 213, 229, 0.24);
  color: #fff;
}

/* 全体の余白感 */
#content,
.content,
.main,
.sidebar,
.entry-content,
.article,
.widget,
.related-entry-card,
.cat-link,
.author-box,
.breadcrumb,
.ad-wrap,
.sns-share,
.toc,
.comment-respond,
.pager-post-navi,
.pagination,
.navigation,
.footer-bottom {
  box-sizing: border-box;
}

/* 記事本文 */
.article,
.entry-content,
.entry-content p,
.entry-content li,
.entry-content td,
.entry-content th {
  color: var(--ff-text);
}

.entry-content p,
.entry-content ul,
.entry-content ol,
.entry-content table,
.entry-content blockquote,
.entry-content pre {
  margin-bottom: 1.2em;
}

.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-title,
.widget-title,
.widgettitle,
.related-entry-card-title,
.widget-entry-card-title,
.author-box .author-name {
  color: var(--ff-text);
  font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", system-ui, sans-serif;
  font-weight: 500;
  letter-spacing: 0.03em;
}

.entry-title {
  font-size: clamp(1.35rem, 3.2vw, 2.1rem);
  line-height: 1.2;
  margin-top: 0.35em;
}

.entry-content h2 {
  border-left: 3px solid var(--ff-accent);
  padding: 0.5em 0 0.5em 0.8em;
  margin: 2.2em 0 1em;
  background: linear-gradient(90deg, rgba(36, 213, 229, 0.08), transparent 72%);
  border-radius: 0 4px 4px 0;
}

.entry-content h3 {
  border-bottom: 1px solid var(--ff-border);
  padding-bottom: 0.45em;
  margin: 1.8em 0 0.9em;
}

.entry-content blockquote {
  border-left: 3px solid var(--ff-border-strong);
  background: rgba(255, 255, 255, 0.03);
  color: var(--ff-muted);
  border-radius: var(--ff-radius);
  padding: 1em 1.2em;
}

.entry-content code,
.entry-content pre {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--ff-border);
  color: #f1f7fb;
  border-radius: var(--ff-radius);
}

.entry-content pre {
  padding: 1rem;
  overflow: auto;
}

/* 元記事の見え方 */
.article,
.entry-card-wrap,
.related-entry-card,
.widget,
.toc,
.author-box,
.comment-respond,
.comment-list li,
.pager-post-navi,
.pagination,
.navigation,
.search-result-item {
  background: var(--ff-panel);
  border: 1px solid var(--ff-border);
  border-radius: 18px;
  box-shadow: var(--ff-shadow);
}

.entry-card-wrap {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
}

.article,
.entry-card-wrap {
  padding: 1.25rem;
}

.article .eye-catch,
.related-entry-card-thumb,
.widget-entry-card-thumb,
.entry-card-thumb {
  border-radius: 14px;
  overflow: hidden;
}

/* カード系 */
.entry-card,
.related-entry-card,
.widget-entry-card,
.popular-entry-card,
.new-entry-card {
  background: var(--ff-panel);
  border: 1px solid var(--ff-border);
  border-radius: 16px;
  box-shadow: var(--ff-shadow);
}

.entry-card:hover,
.related-entry-card:hover,
.widget-entry-card:hover {
  border-color: rgba(36, 213, 229, 0.26);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.26);
}

.related-entry-card-title,
.widget-entry-card-title,
.entry-card-title {
  line-height: 1.35;
}

/* サイドバー */
.sidebar,
.widget,
.widget-area {
  color: var(--ff-text);
}

.widget {
  padding: 1rem;
  margin-bottom: 1rem;
}

.widget-title,
.widgettitle {
  margin-bottom: 0.8rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--ff-border);
}

.widget a {
  color: var(--ff-text);
}

.widget a:hover {
  color: var(--ff-accent);
}

/* ボタン/ラベル */
.btn,
.button,
.cat-link,
.tag-cloud-link,
.pagination .page-numbers,
.pager-post-navi a,
.sns-share a {
  border-radius: var(--ff-radius);
  border: 1px solid var(--ff-border);
  background: rgba(255, 255, 255, 0.03);
  color: var(--ff-text);
}

.btn:hover,
.button:hover,
.cat-link:hover,
.tag-cloud-link:hover,
.pagination .page-numbers:hover,
.pager-post-navi a:hover,
.sns-share a:hover {
  border-color: rgba(36, 213, 229, 0.34);
  background: var(--ff-accent-soft);
  color: var(--ff-text);
}

/* カテゴリ/タグ */
.cat-link,
.tag-cloud-link {
  border-radius: 4px;
  padding: 0.45em 0.8em;
}

/* パンくず */
.breadcrumb,
.breadcrumb a,
.breadcrumb span {
  color: var(--ff-muted);
}

.breadcrumb {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--ff-border);
  border-radius: 999px;
  padding: 0.5rem 0.9rem;
}

.breadcrumb a:hover {
  color: var(--ff-accent);
}

/* テーブル */
.entry-content table {
  border-collapse: collapse;
  width: 100%;
  overflow: hidden;
  border-radius: 14px;
}

.entry-content th,
.entry-content td {
  border: 1px solid var(--ff-border);
  background: rgba(255, 255, 255, 0.02);
}

.entry-content th {
  background: rgba(36, 213, 229, 0.08);
}

/* フッター/補助表示 */
.footer-bottom,
.copyr,
.site-footer,
.footer {
  color: var(--ff-muted);
}

/* ダーク感を少し統一 */
.ad-wrap,
.toc {
  overflow: hidden;
}

/* モバイル */
@media (max-width: 768px) {
  .article,
  .widget,
  .entry-card-wrap,
  .related-entry-card,
  .author-box,
  .comment-respond,
  .pager-post-navi,
  .pagination,
  .navigation {
    border-radius: 14px;
  }

  .entry-content h2 {
    font-size: 1.1rem;
  }
}