@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/* =============================================================
   holowatch.net TOP page (front-page.php)
   ============================================================= */

.holowatch-top {
	background: #fafbfc;
	color: #1a1a1a;
	padding-bottom: 60px;
}

.holowatch-container {
	max-width: 1080px;
	margin: 0 auto;
	padding: 24px 16px;
}

.holowatch-empty {
	background: #fff;
	border: 1px dashed #c5c5c5;
	border-radius: 6px;
	padding: 32px;
	text-align: center;
	color: #555;
}

.holowatch-empty code {
	background: #f1f1f1;
	padding: 2px 6px;
	border-radius: 3px;
}

.holowatch-meta {
	display: flex;
	justify-content: flex-end;
	gap: 16px;
	flex-wrap: wrap;
	font-size: 12px;
	color: #888;
	margin-bottom: 16px;
}

.holowatch-meta-pair {
	display: inline-flex;
	gap: 6px;
}

.holowatch-meta-label {
	color: #aaa;
}

/* ---------- Schedule tabs (CSS-only filter via radio :checked) ---------- */

.holowatch-tabs {
	margin-top: 4px;
}

.hw-tab-input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.holowatch-tab-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid #eee;
}

.holowatch-tab {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 13px;
	font-weight: 600;
	color: #555;
	background: #f3f4f6;
	border: 1px solid transparent;
	padding: 6px 12px;
	border-radius: 999px;
	cursor: pointer;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
	user-select: none;
}

.holowatch-tab:hover {
	background: #e5e7eb;
}

.holowatch-tab .hw-tab-count {
	font-size: 11px;
	background: rgba(0, 0, 0, 0.08);
	padding: 1px 6px;
	border-radius: 10px;
	font-weight: 500;
}

/* Active tab highlight (radio :checked + label sibling pattern) */
.hw-tab-all:checked      ~ .holowatch-tab-bar .holowatch-tab-all,
.hw-tab-live:checked     ~ .holowatch-tab-bar .holowatch-tab-live,
.hw-tab-upcoming:checked ~ .holowatch-tab-bar .holowatch-tab-upcoming,
.hw-tab-past:checked     ~ .holowatch-tab-bar .holowatch-tab-past {
	background: #1f2937;
	color: #fff;
}

.hw-tab-all:checked      ~ .holowatch-tab-bar .holowatch-tab-all .hw-tab-count,
.hw-tab-live:checked     ~ .holowatch-tab-bar .holowatch-tab-live .hw-tab-count,
.hw-tab-upcoming:checked ~ .holowatch-tab-bar .holowatch-tab-upcoming .hw-tab-count,
.hw-tab-past:checked     ~ .holowatch-tab-bar .holowatch-tab-past .hw-tab-count {
	background: rgba(255, 255, 255, 0.2);
	color: #fff;
}

/* Filter cards based on the checked radio */
.hw-tab-live:checked ~ .holowatch-schedule-grid .holowatch-stream-card[data-status="upcoming"],
.hw-tab-live:checked ~ .holowatch-schedule-grid .holowatch-stream-card[data-status="past"] {
	display: none;
}
.hw-tab-upcoming:checked ~ .holowatch-schedule-grid .holowatch-stream-card[data-status="live"],
.hw-tab-upcoming:checked ~ .holowatch-schedule-grid .holowatch-stream-card[data-status="past"] {
	display: none;
}
.hw-tab-past:checked ~ .holowatch-schedule-grid .holowatch-stream-card[data-status="live"],
.hw-tab-past:checked ~ .holowatch-schedule-grid .holowatch-stream-card[data-status="upcoming"] {
	display: none;
}

/* On the "すべて" tab only, collapse to the first 8 cards until もっと見る is
   toggled. The LIVE / 予定 / 終了 tabs always show every stream of that
   status so a large collab never silently hides a talent. */
.hw-tab-all:checked ~ .hw-sched-more-input:not(:checked) ~ .holowatch-schedule-grid .holowatch-stream-card:nth-of-type(n+9) {
	display: none;
}
.holowatch-sched-more {
	display: none;
	margin-top: 12px;
	text-align: center;
}
.hw-tab-all:checked ~ .hw-sched-more-input:not(:checked) ~ .holowatch-sched-more {
	display: block;
}

/* ---------- Article tabs (4-tab: latest / popular / topic / deepdive) ---------- */

.holowatch-article-tabs .holowatch-tab-panel {
	display: none;
}

.hw-art-latest:checked  ~ .hw-panel-latest,
.hw-art-popular:checked ~ .hw-panel-popular,
.hw-art-topic:checked   ~ .hw-panel-topic,
.hw-art-deep:checked    ~ .hw-panel-deep {
	display: block;
}

.hw-art-latest:checked  ~ .holowatch-tab-bar .holowatch-tab-latest,
.hw-art-popular:checked ~ .holowatch-tab-bar .holowatch-tab-popular,
.hw-art-topic:checked   ~ .holowatch-tab-bar .holowatch-tab-topic,
.hw-art-deep:checked    ~ .holowatch-tab-bar .holowatch-tab-deep {
	background: #1f2937;
	color: #fff;
}

/* ---------- Event table tabs (2-tab: event / music) ---------- */

.holowatch-eventtab .holowatch-tab-panel {
	display: none;
}

.hw-ev-event:checked ~ .hw-evpanel-event,
.hw-ev-music:checked ~ .hw-evpanel-music,
.hw-ev-merch:checked ~ .hw-evpanel-merch {
	display: block;
}

.hw-ev-event:checked ~ .holowatch-tab-bar .holowatch-tab-event,
.hw-ev-music:checked ~ .holowatch-tab-bar .holowatch-tab-music,
.hw-ev-merch:checked ~ .holowatch-tab-bar .holowatch-tab-merch {
	background: #1f2937;
	color: #fff;
}

.holowatch-merch-col-price {
	width: 90px;
}

.holowatch-merch-price {
	white-space: nowrap;
	font-weight: 600;
}

/* ---------- Merch / music archive pages (JS-driven filter / sort) ---------- */

.holowatch-merch-controls,
.holowatch-music-controls {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	margin-bottom: 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid #eee;
}

.holowatch-merch-cats,
.holowatch-music-cats {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.holowatch-merch-catbtn,
.holowatch-music-catbtn {
	border: 1px solid transparent;
	cursor: pointer;
}

.holowatch-merch-catbtn.is-active,
.holowatch-music-catbtn.is-active {
	background: #1f2937;
	color: #fff;
}

.holowatch-merch-selects,
.holowatch-music-selects {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-left: auto;
}

.holowatch-merch-selects select,
.holowatch-music-selects select {
	font-size: 13px;
	padding: 5px 8px;
	border: 1px solid #ddd;
	border-radius: 6px;
	background: #fff;
}

.holowatch-merch-more,
.holowatch-music-loadmore {
	margin-top: 16px;
	text-align: center;
}

.holowatch-merch-more button,
.holowatch-music-loadmore button {
	border: 1px solid #ddd;
	cursor: pointer;
	padding: 8px 28px;
}

.holowatch-music-links a {
	display: inline-block;
	margin-right: 8px;
	font-size: 13px;
	white-space: nowrap;
}

/* ---------- Music archive page ---------- */

.holowatch-music-more {
	margin-top: 12px;
	text-align: right;
}

.holowatch-music-note {
	margin: 0 0 10px;
	font-size: 12px;
	color: #888;
}

.holowatch-music-col-thumb,
.holowatch-music-thumb-cell {
	width: 132px;
}

/* !important / min-max lock the size against Cocoon's img rules
   (height:auto, max-width:100%) which otherwise squashed it. */
.holowatch-music-thumb-cell img {
	width: 120px !important;
	height: 120px !important;
	min-width: 120px;
	max-width: 120px;
	object-fit: cover;
	border-radius: 4px;
	display: block;
}

/* Narrow the release-date column in the music tables only (the shared
   event table keeps its wider 期間 column). */
.hw-evpanel-music .holowatch-event-col-period,
.holowatch-music-archive .holowatch-event-col-period,
.hw-evpanel-music .holowatch-event-period,
.holowatch-music-archive .holowatch-event-period {
	width: 84px;
	white-space: nowrap;
}

/* ---------- Schedule cards ---------- */

.holowatch-schedule-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 16px;
}

.holowatch-stream-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}

.holowatch-stream-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.holowatch-status-live {
	border-color: #dc2626;
	box-shadow: 0 0 0 2px #fee2e2;
}

.holowatch-status-live:hover {
	border-color: #b91c1c;
	box-shadow: 0 0 0 2px #fecaca, 0 4px 12px rgba(220, 38, 38, 0.15);
}

.holowatch-status-past {
	opacity: 0.7;
}

.holowatch-status-past:hover {
	opacity: 1;
}

.holowatch-stream-thumb {
	position: relative;
	aspect-ratio: 16 / 9;
	background: #e5e7eb;
	overflow: hidden;
}

.holowatch-stream-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.holowatch-stream-badge {
	position: absolute;
	top: 6px;
	left: 6px;
	font-size: 10px;
	font-weight: 700;
	padding: 2px 7px;
	border-radius: 3px;
	color: #fff;
	letter-spacing: 0.5px;
}

.holowatch-stream-badge-live {
	background: #dc2626;
	animation: holowatch-pulse 1.6s ease-in-out infinite;
}

.holowatch-stream-badge-upcoming {
	background: #2563eb;
}

.holowatch-stream-badge-past {
	background: #6b7280;
}

@keyframes holowatch-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.55; }
}

.holowatch-stream-time {
	position: absolute;
	bottom: 6px;
	right: 6px;
	font-family: 'SF Mono', Monaco, monospace;
	font-size: 11px;
	font-weight: 700;
	color: #fff;
	background: rgba(0, 0, 0, 0.7);
	padding: 2px 6px;
	border-radius: 3px;
}

.holowatch-stream-body {
	padding: 10px 12px 12px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.holowatch-stream-when {
	display: flex;
	align-items: baseline;
	gap: 6px;
	font-size: 12px;
	color: #374151;
}

.holowatch-stream-when-label {
	font-size: 10px;
	color: #6b7280;
	padding: 1px 5px;
	background: #f3f4f6;
	border-radius: 3px;
}

.holowatch-stream-when-value {
	font-family: 'SF Mono', Monaco, monospace;
	font-weight: 600;
}

.holowatch-stream-meta {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
}

.holowatch-stream-category {
	color: #6b7280;
}

.holowatch-stream-channel {
	font-size: 14px;
	font-weight: 700;
	margin: 2px 0 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.holowatch-stream-title {
	font-size: 12px;
	color: #4b5563;
	line-height: 1.4;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.holowatch-section {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	padding: 24px;
	margin-bottom: 24px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.holowatch-section-title {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 20px;
	padding-bottom: 12px;
	border-bottom: 2px solid #eee;
	line-height: 1.4;
}

.holowatch-section-emoji {
	font-size: 22px;
}

.holowatch-section-count,
.holowatch-section-sub {
	font-size: 12px;
	font-weight: 400;
	color: #888;
	background: #f3f4f6;
	padding: 2px 8px;
	border-radius: 12px;
	margin-left: 4px;
}

.holowatch-empty-note {
	color: #999;
	font-size: 14px;
	padding: 16px 0;
}

/* ---------- Branch badge (shared) ---------- */

.holowatch-branch {
	font-size: 11px;
	font-weight: 700;
	text-align: center;
	padding: 2px 6px;
	border-radius: 3px;
}

.holowatch-branch-en {
	background: #fef3c7;
	color: #92400e;
}

.holowatch-branch-id {
	background: #dcfce7;
	color: #166534;
}

/* ---------- 配信ハイライト (full AI summary cards, vertical layout) ---------- */

.holowatch-highlight-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.holowatch-highlight {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	overflow: hidden;
	transition: box-shadow 0.15s, border-color 0.15s, transform 0.15s;
}

.holowatch-highlight:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	border-color: #d1d5db;
}

.holowatch-highlight-thumb {
	display: block;
	overflow: hidden;
	background: #e5e7eb;
	aspect-ratio: 16 / 9;
}

.holowatch-highlight-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.holowatch-highlight-body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 14px;
	min-width: 0;
}

.holowatch-highlight-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
}

.holowatch-tag {
	font-size: 10px;
	background: #f3f4f6;
	color: #4b5563;
	padding: 2px 6px;
	border-radius: 10px;
}

.holowatch-highlight-date {
	font-size: 11px;
	color: #6b7280;
	font-variant-numeric: tabular-nums;
	padding: 2px 4px;
}

.holowatch-highlight-channel {
	font-size: 15px;
	font-weight: 700;
	margin: 2px 0 0;
	color: #1a1a1a;
}

.holowatch-highlight-title {
	margin: 0 0 4px;
	font-size: 12px;
}

.holowatch-highlight-title a {
	color: #6b7280;
	text-decoration: none;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.holowatch-highlight-title a:hover {
	color: #2563eb;
}

.holowatch-highlight-row {
	font-size: 13px;
	color: #374151;
	margin: 0;
	line-height: 1.6;
}

.holowatch-highlight-label {
	display: inline-block;
	font-size: 10px;
	font-weight: 700;
	background: #1f2937;
	color: #fff;
	padding: 2px 6px;
	border-radius: 3px;
	margin-right: 6px;
	vertical-align: 2px;
	letter-spacing: 0.3px;
}

/* ---------- 記事カテゴリ: ニュース/トピック タイルグリッド ---------- */

.holowatch-tile-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}

.holowatch-tile {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}

.holowatch-tile:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	border-color: #d1d5db;
}

.holowatch-tile-thumb {
	position: relative;
	aspect-ratio: 16 / 9;
	background: #f3f4f6;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.holowatch-tile-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.holowatch-tile-thumb-placeholder {
	font-size: 38px;
	opacity: 0.4;
}

.holowatch-tile-body {
	padding: 10px 12px 14px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1;
}

.holowatch-tile-title {
	font-size: 14px;
	font-weight: 700;
	margin: 0;
	line-height: 1.4;
	color: #1a1a1a;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.holowatch-tile-lead {
	font-size: 12px;
	color: #4b5563;
	line-height: 1.5;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.holowatch-section-more {
	margin-top: 16px;
	text-align: right;
}

.holowatch-more-link {
	display: inline-block;
	font-size: 13px;
	font-weight: 600;
	color: #1f2937;
	text-decoration: none;
	padding: 8px 16px;
	border: 1px solid #d1d5db;
	border-radius: 999px;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.holowatch-more-link:hover {
	background: #1f2937;
	color: #fff;
	border-color: #1f2937;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px) {
	.holowatch-container {
		padding: 16px 12px;
	}
	.holowatch-section {
		padding: 18px 14px;
	}
}

/*834px以下*/
@media screen and (max-width: 834px) {
	.holowatch-section-title {
		font-size: 17px;
	}
	.holowatch-highlight {
		grid-template-columns: 1fr;
	}
	.holowatch-highlight-thumb img {
		max-height: 200px;
	}
	.holowatch-schedule-grid,
	.holowatch-highlight-grid,
	.holowatch-tile-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}
	.holowatch-tab {
		font-size: 12px;
		padding: 5px 10px;
	}
}

/*480px以下*/
@media screen and (max-width: 480px) {
	.holowatch-section {
		padding: 14px 10px;
	}
	.holowatch-stream-channel {
		font-size: 13px;
	}
	.holowatch-stream-title {
		font-size: 11px;
	}
	.holowatch-highlight-grid {
		grid-template-columns: 1fr;
		gap: 14px;
	}
	.holowatch-tile-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}
	.holowatch-tile-title {
		font-size: 13px;
	}
	.holowatch-tile-lead {
		font-size: 11px;
		-webkit-line-clamp: 2;
	}
}

/* ---------- イベント早見表 (events table) ---------- */

.holowatch-event-table-wrap {
	overflow-x: auto;
}

.holowatch-event-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.holowatch-event-table th {
	background: #f3f4f6;
	color: #555;
	font-size: 12px;
	font-weight: 700;
	text-align: left;
	padding: 8px 10px;
	white-space: nowrap;
}

.holowatch-event-table td {
	padding: 10px;
	border-bottom: 1px solid #eee;
	vertical-align: middle;
}

.holowatch-event-period {
	white-space: nowrap;
	color: #555;
	font-size: 13px;
}

.holowatch-event-type {
	color: #888;
	font-size: 12px;
}

.holowatch-event-name a {
	font-weight: 600;
	text-decoration: none;
}

.holowatch-event-name a:hover {
	text-decoration: underline;
}

.holowatch-event-name .holowatch-branch {
	margin-left: 6px;
}

.holowatch-event-summary {
	display: block;
	margin-top: 3px;
	font-size: 12px;
	color: #777;
	line-height: 1.5;
}

.holowatch-event-row.is-past {
	opacity: 0.55;
}

.holowatch-event-badge {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	padding: 3px 8px;
	border-radius: 12px;
	white-space: nowrap;
}

.holowatch-event-badge.is-now {
	background: #dcfce7;
	color: #166534;
}

.holowatch-event-badge.is-soon {
	background: #dbeafe;
	color: #1e40af;
}

.holowatch-event-badge.is-past {
	background: #e5e7eb;
	color: #6b7280;
}

.holowatch-event-badge.is-other {
	background: #f3f4f6;
	color: #888;
}

@media screen and (max-width: 768px) {
	.holowatch-event-table {
		font-size: 13px;
	}
	.holowatch-event-table td {
		padding: 8px 6px;
	}
}

/* =============================================================
   Site header / global nav / footer  (Cocoon override)
   ============================================================= */

/* ---------- Brand logo (shared by header + footer) ---------- */

.hw-logo {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	line-height: 1;
}

.hw-logo-icon {
	display: block;
	width: 36px;
	height: 36px;
	flex: none;
	transition: transform 0.15s ease;
}

.hw-logo-word {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif;
	font-size: 23px;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.hw-w1 { color: #1f2937; }
.hw-w2 { color: #2563eb; }

.hw-logo-live {
	transform-box: fill-box;
	transform-origin: center;
	animation: holowatch-pulse 1.6s ease-in-out infinite;
}

/* ---------- Header bar ---------- */

#header-container {
	background: #ffffff !important;
	border-bottom: 1px solid #e5e7eb;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

#header,
#header-in {
	background: transparent !important;
}

.header-in.wrap {
	max-width: 1080px;
	display: flex;
	align-items: center;
	min-height: 66px;
	padding: 10px 16px;
}

.logo-header {
	margin: 0;
	font-size: inherit;
	line-height: 1;
}

.logo-header .site-name-text-link {
	display: inline-flex;
	text-decoration: none;
}

.logo-header .site-name-text-link:hover .hw-logo-icon {
	transform: scale(1.06) rotate(-3deg);
}

.header-in .tagline {
	margin-left: 14px;
	color: #9ca3af;
	font-size: 12px;
	font-weight: 500;
}

/* ---------- Global navigation ---------- */

#navi {
	background: #1f2937 !important;
	border: none !important;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

#navi .navi-in > ul > li > a {
	color: #e5e7eb !important;
	font-size: 14px;
	font-weight: 600;
	transition: background 0.15s, color 0.15s;
}

#navi .navi-in > ul > li > a:hover {
	background: rgba(255, 255, 255, 0.09) !important;
	color: #ffffff !important;
}

#navi .navi-in > ul > li.current-menu-item > a {
	background: #2563eb !important;
	color: #ffffff !important;
}

/* ---------- Footer ---------- */

#footer {
	background: #1f2937 !important;
	border-top: 3px solid #2563eb;
	color: #cbd5e1;
}

.footer-in.wrap {
	max-width: 1080px;
}

#footer .footer-widgets,
#footer .footer-widgets-mobile {
	padding-top: 28px;
	color: #cbd5e1;
}

#footer .widget-title {
	color: #ffffff;
	border-color: #374151;
}

.footer .footer-bottom {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding: 36px 16px 30px;
	background: transparent;
}

.footer-bottom-logo,
.footer-bottom-logo .logo-footer {
	margin: 0;
}

.footer-bottom-logo .hw-logo-icon {
	width: 30px;
	height: 30px;
}

.footer-bottom-logo .hw-logo-word {
	font-size: 20px;
}

.footer-bottom-logo .hw-w1 { color: #f9fafb; }
.footer-bottom-logo .hw-w2 { color: #60a5fa; }

.footer-bottom-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	width: 100%;
}

.navi-footer ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.navi-footer ul li a {
	color: #cbd5e1 !important;
	font-size: 13px;
	padding: 4px 14px;
	border-right: 1px solid #374151;
	transition: color 0.15s;
}

.navi-footer ul li:last-child a {
	border-right: none;
}

.navi-footer ul li a:hover {
	color: #ffffff !important;
}

.footer .source-org.copyright,
#footer .copyright {
	font-size: 12px;
	color: #94a3b8;
	letter-spacing: 0.02em;
}

@media screen and (max-width: 480px) {
	.hw-logo-word { font-size: 20px; }
	.hw-logo-icon { width: 32px; height: 32px; }
	.header-in.wrap { min-height: 58px; }
	.header-in .tagline { display: none; }
}

/* =============================================================
   Article archive page (page-articles.php)
   ============================================================= */

/* Category filter chips — links styled like the JS catbtns. */
.holowatch-articles-catbtn {
	text-decoration: none;
}

.holowatch-articles-catbtn.is-active {
	background: #1f2937;
	color: #fff;
}

/* ---------- Pagination ---------- */

.holowatch-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin-top: 28px;
}

.holowatch-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 12px;
	font-size: 13px;
	font-weight: 600;
	color: #1f2937;
	text-decoration: none;
	background: #fff;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.holowatch-pagination a.page-numbers:hover {
	background: #f3f4f6;
	border-color: #9ca3af;
}

.holowatch-pagination .page-numbers.current {
	background: #1f2937;
	color: #fff;
	border-color: #1f2937;
}

.holowatch-pagination .page-numbers.dots {
	border-color: transparent;
	background: transparent;
}

/* =============================================================
   Popular ranking page (page-ranking.php)
   ============================================================= */

.holowatch-ranking-tabs .holowatch-tab-panel {
	display: none;
}

.hw-rank-day:checked   ~ .hw-rankpanel-day,
.hw-rank-week:checked  ~ .hw-rankpanel-week,
.hw-rank-month:checked ~ .hw-rankpanel-month {
	display: block;
}

.hw-rank-day:checked   ~ .holowatch-tab-bar .holowatch-tab-rank-day,
.hw-rank-week:checked  ~ .holowatch-tab-bar .holowatch-tab-rank-week,
.hw-rank-month:checked ~ .holowatch-tab-bar .holowatch-tab-rank-month {
	background: #1f2937;
	color: #fff;
}

.holowatch-ranking-list {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: none;
}

.holowatch-ranking-item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px 4px;
	border-bottom: 1px solid #eee;
}

.holowatch-ranking-item:last-child {
	border-bottom: none;
}

.holowatch-rank-badge {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	font-size: 14px;
	font-weight: 800;
	color: #6b7280;
	background: #f3f4f6;
	border-radius: 50%;
	font-variant-numeric: tabular-nums;
}

.holowatch-rank-badge.holowatch-rank-1 {
	color: #7c5800;
	background: #fde68a;
}

.holowatch-rank-badge.holowatch-rank-2 {
	color: #4b5563;
	background: #e5e7eb;
}

.holowatch-rank-badge.holowatch-rank-3 {
	color: #7c3a17;
	background: #fed7aa;
}

.holowatch-rank-thumb {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 96px;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #f3f4f6;
	border-radius: 6px;
}

.holowatch-rank-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.holowatch-rank-thumb .holowatch-tile-thumb-placeholder {
	font-size: 24px;
	opacity: 0.4;
}

.holowatch-rank-title {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.45;
	color: #1a1a1a;
	text-decoration: none;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.holowatch-rank-title:hover {
	color: #2563eb;
}

@media screen and (max-width: 480px) {
	.holowatch-rank-thumb { width: 76px; }
	.holowatch-rank-title { font-size: 13px; }
	.holowatch-rank-badge { width: 26px; height: 26px; font-size: 13px; }
	.holowatch-pagination .page-numbers {
		min-width: 34px;
		height: 34px;
		padding: 0 9px;
	}
}