/* =========================================================
   モノトレンド — 共通コンポーネント
   ここには「複数ページで使うパーツ」だけを置く。
   ページ固有のレイアウトは home.css / single.css / archive.css へ。
   ========================================================= */

/* ---------- Layout primitives ---------- */
.container {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 var(--container-pad);
}

.eyebrow {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ink-3);
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.eyebrow::before {
	content: "";
	width: 18px;
	height: 1px;
	background: currentColor;
}

.section-title {
	font-family: var(--serif);
	font-size: 28px;
	font-weight: 600;
	letter-spacing: 0.01em;
	margin: 0;
	line-height: 1.3;
}
.section-head {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 28px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--line);
}
.section-head__more {
	font-size: 12px;
	color: var(--ink-2);
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.section-head__more:hover { color: var(--accent); }

/* ---------- Header ---------- */
.site-header {
	border-bottom: 1px solid var(--line);
	background: var(--bg);
	position: relative;
	z-index: 40;
}
.site-header__inner {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 14px var(--container-pad);
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 32px;
}
.brand {
	display: flex;
	align-items: baseline;
	gap: 10px;
}
.brand__logo {
	font-family: var(--serif);
	font-size: 22px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--ink);
}
.brand__logo span { color: var(--accent); }
.brand__tag {
	font-size: 11px;
	color: var(--ink-3);
	letter-spacing: 0.06em;
}
.site-nav {
	display: flex;
	gap: 22px;
	font-size: 13px;
	color: var(--ink-2);
	justify-content: center;
}
.site-nav a {
	position: relative;
	padding: 4px 0;
	transition: color 0.15s;
}
.site-nav a:hover { color: var(--accent); }
.site-nav a.active,
.site-nav a.current-menu-item {
	color: var(--ink);
	font-weight: 600;
}
.site-nav a.active::after,
.site-nav a.current-menu-item::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -19px;
	height: 2px;
	background: var(--accent);
}
.header-tools {
	display: flex;
	align-items: center;
	gap: 8px;
}
.icon-btn {
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	border: 1px solid var(--line-strong);
	background: var(--bg-elev);
	border-radius: 8px;
	color: var(--ink-2);
	transition: all 0.15s;
}
.icon-btn:hover {
	border-color: var(--ink);
	color: var(--ink);
}
.search-pill {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 12px;
	border: 1px solid var(--line-strong);
	border-radius: 8px;
	background: var(--bg-elev);
	color: var(--ink-3);
	font-size: 12px;
	min-width: 180px;
	text-decoration: none;
}
.search-pill kbd {
	margin-left: auto;
	font-family: var(--mono);
	font-size: 10px;
	padding: 1px 5px;
	border: 1px solid var(--line-strong);
	border-radius: 3px;
	background: var(--bg);
}

/* ---------- Footer ---------- */
.site-footer {
	background: var(--ink);
	color: rgba(255,255,255,0.6);
	padding: 56px 0 32px;
	margin-top: 80px;
	font-size: 12px;
}
.site-footer__top {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: 40px;
	padding-bottom: 32px;
	border-bottom: 1px solid rgba(255,255,255,0.1);
}
.site-footer__brand {
	font-family: var(--serif);
	font-size: 22px;
	color: #fff;
	margin: 0 0 12px;
}
.site-footer__brand span { color: var(--accent); }
.site-footer__col-title {
	color: #fff;
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	margin: 0 0 14px;
	font-family: var(--mono);
}
.site-footer__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.site-footer__list a:hover { color: #fff; }
.site-footer__bottom {
	margin-top: 24px;
	display: flex;
	justify-content: space-between;
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.06em;
	color: rgba(255,255,255,0.4);
}

/* ---------- Category pill ---------- */
.cat {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-2);
}
.cat__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--accent);
}
.cat--pc         .cat__dot { background: #c44d2c; }
.cat--audio      .cat__dot { background: #2c6ec4; }
.cat--kitchen    .cat__dot { background: #c89b3c; }
.cat--smart-home .cat__dot { background: #6b4dc4; }
.cat--mobile     .cat__dot { background: #2c8c5a; }
.cat--beauty     .cat__dot { background: #c4548c; }

/* ---------- Stars / Price / Side block / Rank / Tag / Breadcrumb / Chip / Pagination ---------- */
.stars { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px; color: var(--ink-2); }
.stars__svg { color: var(--gold); display: inline-flex; gap: 1px; }
.stars__count { color: var(--ink-3); }
.price { display: inline-flex; align-items: baseline; gap: 4px; font-family: var(--serif); color: var(--ink); }
.price__yen { font-size: 12px; }
.price__num { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.price__sub { font-size: 10px; color: var(--ink-3); margin-left: 4px; font-family: var(--sans); }
.side-block { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 22px; }
.side-block__title { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.rank-list { display: flex; flex-direction: column; gap: 14px; }
.rank-item { display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: start; padding: 0 0 14px; border-bottom: 1px dashed var(--line); text-decoration: none; color: inherit; }
.rank-item:last-child { border-bottom: 0; padding-bottom: 0; }
.rank-item__num { font-family: var(--serif); font-size: 24px; font-weight: 600; color: var(--ink-4); line-height: 1; font-variant-numeric: tabular-nums; }
.rank-item:nth-child(1) .rank-item__num { color: var(--gold); }
.rank-item:nth-child(2) .rank-item__num { color: #aaa; }
.rank-item:nth-child(3) .rank-item__num { color: #c89360; }
.rank-item__title { font-size: 13px; font-weight: 500; color: var(--ink); line-height: 1.5; margin: 0 0 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rank-item__meta { display: flex; gap: 10px; font-size: 10px; color: var(--ink-3); font-family: var(--mono); }
.tag-cloud { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-cloud__item { font-size: 11px; padding: 5px 10px; background: var(--bg-sunken); border-radius: 999px; color: var(--ink-2); transition: all 0.15s; font-family: var(--mono); letter-spacing: 0.02em; }
.tag-cloud__item:hover { background: var(--ink); color: var(--bg); }
.breadcrumb { display: flex; gap: 8px; font-size: 11px; color: var(--ink-3); font-family: var(--mono); letter-spacing: 0.04em; margin-bottom: 32px; }
.breadcrumb a { color: inherit; }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb__sep { color: var(--ink-4); }
.chip { font-size: 12px; padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--bg-elev); color: var(--ink-2); cursor: pointer; transition: all 0.15s; font-family: var(--sans); text-decoration: none; display: inline-flex; align-items: center; }
.chip:hover { border-color: var(--ink); }
.chip--active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.pagination { margin-top: 48px; display: flex; justify-content: center; gap: 6px; }
.page-num { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line); background: var(--bg-elev); border-radius: var(--radius-s); font-family: var(--mono); font-size: 12px; color: var(--ink-2); transition: all 0.15s; cursor: pointer; text-decoration: none; }
.page-num:hover { border-color: var(--ink); color: var(--ink); }
.page-num--active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.page-num--arrow { width: auto; padding: 0 12px; gap: 6px; display: flex; align-items: center; }
.i-12{width:12px;height:12px;}.i-14{width:14px;height:14px;}.i-16{width:16px;height:16px;}.i-18{width:18px;height:18px;}.i-20{width:20px;height:20px;}.i-24{width:24px;height:24px;}.i-32{width:32px;height:32px;}.i-36{width:36px;height:36px;}.i-48{width:48px;height:48px;}

/* Responsive */
@media (max-width: 760px) {
	.site-header__inner { grid-template-columns: 1fr auto; gap: 16px; }
	.site-nav, .search-pill { display: none; }
	.site-footer__top { grid-template-columns: 1fr 1fr; gap: 28px; }
	.site-footer__bottom { flex-direction: column; gap: 8px; }
}

/* =====================================================================
   !important overrides for plugin conflicts (mono-trend-cleantech 等)
   プラグインが h1-h6 と <a> を !important で var(--mt-text)/var(--mt-link)
   に強制するため、ダーク背景上のテキストが死ぬ。
   子テーマ独自クラスのみピンポイントで上書き。
   ===================================================================== */
.hero__feature, .hero__feature:hover { color: var(--bg) !important; }
.hero__feature__title { color: #fff !important; }
.hero__feature__cat   { color: var(--accent) !important; }
.hero__feature__meta  { color: rgba(255,255,255,0.55) !important; }
.cat-hero__name       { color: #fff !important; }
.cat-hero__name-sub   { color: var(--accent) !important; }
.cat-hero__desc       { color: rgba(255,255,255,0.7) !important; }
.cat-hero__num-val    { color: #fff !important; }
.cat-hero__num-lbl    { color: rgba(255,255,255,0.5) !important; }
.site-footer, .site-footer a { color: rgba(255,255,255,0.6) !important; }
.site-footer__brand     { color: #fff !important; }
.site-footer__brand span{ color: var(--accent) !important; }
.site-footer__col-title { color: #fff !important; }
.site-footer__list a:hover { color: #fff !important; }
.cta-banner__title    { color: #fff !important; }
.cta-banner__sub      { color: rgba(255,255,255,0.6) !important; }
.cta-banner__action, .cta-banner__action:hover { color: #fff !important; }
.product-box__head, .product-box__head a { color: var(--bg) !important; }
.compare thead th     { color: var(--bg) !important; }
.shop-btn--amazon, .shop-btn--amazon:hover { color: #232f3e !important; }
.shop-btn--rakuten, .shop-btn--rakuten:hover { color: #fff !important; }
.shop-btn--yahoo, .shop-btn--yahoo:hover { color: #fff !important; }

.article-body > #toc, .article-body > .toc.tnt-number, .article-body div#toc.toc { display: none !important; }
.article-body h2.ae-h2, .article-body h2.wp-block-heading { font-family: var(--serif) !important; font-size: 26px !important; font-weight: 600 !important; color: var(--ink) !important; border: 0 !important; border-bottom: 2px solid var(--ink) !important; padding: 0 0 14px 0 !important; margin: 56px 0 20px !important; background: transparent !important; }
.article-body h3.ae-h3, .article-body h3.wp-block-heading { font-family: var(--serif) !important; font-size: 18px !important; font-weight: 600 !important; color: var(--ink) !important; border: 0 !important; border-left: 3px solid var(--accent) !important; padding: 0 0 0 12px !important; margin: 36px 0 14px !important; background: transparent !important; }

/* DARK_BG_GUARD */
/* プラグインがダーク背景をlightに上書きするのを防御 */
.site-footer { background: var(--ink) !important; }
.cta-banner { background: var(--ink) !important; }
.product-box__head { background: var(--ink) !important; }
.cat-hero { background: var(--ink) !important; }
.compare thead th { background: var(--ink) !important; }
.article-cover { background: linear-gradient(135deg, #2a2724 0%, #1a1816 100%) !important; }
.hero__feature { background: var(--ink) !important; }
.hero__feature__body { background: var(--ink) !important; }
.article-card__num, .post-card__price-tag { background: var(--ink) !important; color: var(--bg) !important; }
.tag-cloud__item:hover { background: var(--ink) !important; color: var(--bg) !important; }
.chip--active, .page-num--active { background: var(--ink) !important; color: var(--bg) !important; }
.view-switcher { background: var(--ink) !important; color: var(--bg) !important; }

/* FOOTER_TEXT_GUARD */
.site-footer p, .site-footer li, .site-footer span, .site-footer__bottom span { color: rgba(255,255,255,0.6) !important; }
.site-footer__brand, .site-footer__brand * { color: #fff !important; }
.site-footer__brand span { color: var(--accent) !important; }
.site-footer__col-title { color: #fff !important; }
.cat-hero, .cat-hero p, .cat-hero span, .cat-hero h1 { /* cat-hero text guard */ }
.cta-banner *, .product-box__head * { color: inherit !important; }