/* ============================================================
 * コラム一覧画面（archive-naming_column.php / taxonomy-naming_column_cat.php）
 *
 * Source: docs/screens/screens/columns-pc.html / columns-sp.html
 * .pmn-cols スコープ。デザイントークン (--pm-*) のみ使用。
 * ============================================================ */

/* ------------------------------------------------------------
 * Reset / Container
 * ------------------------------------------------------------ */

.pmn-cols {
	background: var(--pm-base);
	color: var(--pm-text);
	font-family: var(--pm-font-body);
	min-height: 100vh;
	padding-bottom: 80px;
}
.pmn-cols .container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 32px;
}
@media (max-width: 767px) {
	.pmn-cols .container { padding: 0 16px; }
}

.pmn-cols [hidden] { display: none !important; }

/* ---- パンくず ---- */
.pmn-cols__bc {
	padding: 14px 0;
	font-size: 13px;
	color: var(--pm-text-sub);
}
.pmn-cols__bc a { color: var(--pm-primary); text-decoration: none; }
.pmn-cols__bc a:hover { text-decoration: underline; }
.pmn-cols__bc .sep { margin: 0 6px; color: var(--pm-text-sub); }
.pmn-cols__bc .here { color: var(--pm-text-sub); }

/* ---- Hero ---- */
.pmn-cols__hero {
	background: linear-gradient(180deg, #E3F0F7 0%, var(--pm-base) 100%);
	padding: 48px 32px 40px;
	border-radius: 0 0 24px 24px;
	text-align: center;
	margin-bottom: 16px;
}
.pmn-cols__hero h1 {
	font-family: var(--pm-font-heading);
	font-weight: 700;
	font-size: 36px;
	margin: 0 0 10px;
	letter-spacing: 0.02em;
	color: var(--pm-text);
}
.pmn-cols__hero p {
	color: var(--pm-text-sub);
	font-size: 14px;
	margin: 0 0 22px;
	line-height: 1.7;
}
@media (max-width: 767px) {
	.pmn-cols__hero { padding: 32px 16px 28px; border-radius: 0 0 16px 16px; }
	.pmn-cols__hero h1 { font-size: 22px; }
	.pmn-cols__hero p { font-size: 13px; }
}

.pmn-cols__search {
	max-width: 520px;
	margin: 0 auto;
	display: flex;
	background: var(--pm-surface);
	border: 1px solid var(--pm-border);
	border-radius: var(--pm-radius-pill);
	padding: 6px;
	box-shadow: var(--pm-shadow-1);
	box-sizing: border-box;
}
.pmn-cols__search input {
	flex: 1;
	min-width: 0;
	border: none;
	outline: none;
	height: 42px;
	padding: 0 18px;
	background: transparent;
	font-size: 14px;
	font-family: inherit;
	color: var(--pm-text);
}
.pmn-cols__search button {
	flex-shrink: 0;
	height: 42px;
	padding: 0 22px;
	background: var(--pm-primary);
	color: var(--pm-text-on-primary);
	border: none;
	border-radius: var(--pm-radius-pill);
	font-family: var(--pm-font-heading);
	font-weight: 600;
	font-size: 13px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.pmn-cols__search button:hover { background: var(--pm-primary-hover); }

/* ---- カテゴリピル ---- */
.pmn-cols__cats {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding: 24px 0 18px;
	scrollbar-width: none;
}
.pmn-cols__cats::-webkit-scrollbar { display: none; }

.pmn-cols__cat-pill {
	flex: none;
	padding: 9px 18px;
	border-radius: var(--pm-radius-pill);
	background: var(--pm-surface);
	border: 1px solid var(--pm-border);
	font-size: 13px;
	font-weight: 600;
	color: var(--pm-text-sub);
	cursor: pointer;
	white-space: nowrap;
	font-family: inherit;
	text-decoration: none;
	transition: all var(--pm-dur-1) var(--pm-ease);
}
.pmn-cols__cat-pill:hover {
	border-color: var(--pm-primary);
	color: var(--pm-primary);
}
.pmn-cols__cat-pill.on {
	background: var(--pm-primary);
	color: var(--pm-text-on-primary);
	border-color: var(--pm-primary);
}
.pmn-cols__cat-pill .ct {
	font-family: var(--pm-font-num);
	font-weight: 500;
	margin-left: 5px;
	font-size: 11px;
	opacity: 0.7;
}

/* ---- Pickup ---- */
.pmn-cols__pickup {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: 14px;
	margin-bottom: 32px;
}
@media (max-width: 1023px) { .pmn-cols__pickup { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px)  { .pmn-cols__pickup { grid-template-columns: 1fr; } }

.pmn-cols__pcard {
	background: var(--pm-surface);
	border: 1px solid var(--pm-border);
	border-radius: var(--pm-radius-card);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	transition: transform var(--pm-dur-2) var(--pm-ease), box-shadow var(--pm-dur-2) var(--pm-ease);
}
.pmn-cols__pcard:hover { transform: translateY(-3px); box-shadow: var(--pm-shadow-2); }

.pmn-cols__pcard.feat { grid-row: span 2; }
@media (max-width: 1023px) { .pmn-cols__pcard.feat { grid-row: auto; grid-column: span 2; } }
@media (max-width: 600px)  { .pmn-cols__pcard.feat { grid-column: auto; } }

/* 色背景部 (.pthumb) はタイトルを全文表示。テキストは --pm-text のグレー、
 * 背景は ::before の白オーバーレイで彩度を落として可読性を確保する。
 * 写真サムネ等を載せたくなったら .pthumb 内の h3 を消すだけで戻せる。 */
.pmn-cols__pcard .pthumb {
	position: relative;
	aspect-ratio: 16/10;
	background: linear-gradient(135deg, #E3F0F7, var(--pm-secondary-soft));
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 22px 24px;
	box-sizing: border-box;
	overflow: hidden;
}
.pmn-cols__pcard .pthumb::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.35);
	pointer-events: none;
}
.pmn-cols__pickup .pmn-cols__pcard:nth-child(2) .pthumb { background: linear-gradient(135deg, var(--pm-accent-soft), var(--pm-warning-soft)); }
.pmn-cols__pickup .pmn-cols__pcard:nth-child(3) .pthumb { background: linear-gradient(135deg, var(--pm-either-soft), #E3F0F7); }
.pmn-cols__pcard.feat .pthumb { aspect-ratio: 16/9; }

.pmn-cols__pcard .pthumb-title {
	position: relative;
	margin: 0;
	color: var(--pm-text-sub);
	font-family: var(--pm-font-heading);
	font-weight: 700;
	font-size: 1.05rem;
	line-height: 1.5;
	text-align: center;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.pmn-cols__pcard.feat .pthumb-title { font-size: 1.5rem; line-height: 1.4; }

.pop-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	background: var(--pm-secondary);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	padding: 4px 9px;
	border-radius: var(--pm-radius-pill);
}

.pmn-cols__pcard .pbody {
	padding: 14px 16px 16px;
	flex: 1;
	display: flex;
	flex-direction: column;
}
.pmn-cols__pcard.feat .pbody { padding: 18px 22px 20px; }

.pmn-cols__pcard .pcat {
	display: inline-block;
	background: var(--pm-primary-soft);
	color: var(--pm-primary);
	font-size: 10px;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: var(--pm-radius-pill);
	margin-bottom: 6px;
	align-self: flex-start;
}
/* h3 は .pthumb 側に表示（.pthumb-title）。.pbody には h3 を置かない設計。 */
.pmn-cols__pcard p {
	font-size: 12px;
	color: var(--pm-text-sub);
	line-height: 1.7;
	margin: 0 0 10px;
}
.pmn-cols__pcard.feat p { font-size: 13px; }
.pmn-cols__pcard .pmeta {
	display: flex;
	gap: 8px;
	font-size: 10px;
	color: var(--pm-text-sub);
	font-family: var(--pm-font-num);
	margin-top: auto;
}
.pmn-cols__pcard .pmeta b { color: var(--pm-text); }

/* ---- Layout: メイン + サイドバー ---- */
.pmn-cols__layout {
	display: grid;
	grid-template-columns: 1fr 280px;
	gap: 32px;
	padding-bottom: 60px;
}
@media (max-width: 1023px) {
	.pmn-cols__layout { grid-template-columns: 1fr; gap: 24px; }
}

/* ---- Sortbar ---- */
.pmn-cols__sortbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 18px;
	background: var(--pm-surface);
	border: 1px solid var(--pm-border);
	border-radius: var(--pm-radius-btn);
	padding: 12px 18px;
}
.pmn-cols__sortbar-l { font-size: 13px; color: var(--pm-text-sub); }
.pmn-cols__sortbar-l b { color: var(--pm-text); font-family: var(--pm-font-num); margin: 0 2px; }

/* ---- Article grid ---- */
.pmn-cols__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
@media (max-width: 767px) { .pmn-cols__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .pmn-cols__grid { grid-template-columns: 1fr; } }

.pmn-cols__acard {
	background: var(--pm-surface);
	border: 1px solid var(--pm-border);
	border-radius: 14px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	display: flex;
	flex-direction: column;
	transition: transform var(--pm-dur-2) var(--pm-ease), box-shadow var(--pm-dur-2) var(--pm-ease);
	cursor: pointer;
}
.pmn-cols__acard:hover { transform: translateY(-2px); box-shadow: var(--pm-shadow-2); }

/* 色背景部 (.athumb) はタイトル全文をグレー文字で表示する。
 * 背景は ::before の白オーバーレイで彩度を下げ、テキスト可読性を確保。
 * カテゴリピル (.acat) は .abody 側に配置（重複表示を避けるため）。 */
.pmn-cols__acard .athumb {
	position: relative;
	aspect-ratio: 4/3;
	background: linear-gradient(135deg, #E3F0F7, #A8D4E2);
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px 20px;
	box-sizing: border-box;
	overflow: hidden;
}
.pmn-cols__acard .athumb::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.35);
	pointer-events: none;
}
.pmn-cols__acard .athumb-title {
	position: relative;
	margin: 0;
	color: var(--pm-text-sub);
	font-family: var(--pm-font-heading);
	font-weight: 700;
	font-size: 1.25rem;
	line-height: 1.45;
	text-align: center;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.pmn-cols__acard:nth-child(2n) .athumb { background: linear-gradient(135deg, var(--pm-accent-soft), var(--pm-warning-soft)); }
.pmn-cols__acard:nth-child(3n) .athumb { background: linear-gradient(135deg, var(--pm-either-soft), #E3F0F7); }
.pmn-cols__acard:nth-child(4n) .athumb { background: linear-gradient(135deg, var(--pm-secondary-soft), var(--pm-accent-soft)); }
.pmn-cols__acard:nth-child(5n) .athumb { background: linear-gradient(135deg, var(--pm-success-soft), #E3F0F7); }

.pmn-cols__acard .acat {
	display: inline-block;
	align-self: flex-start;
	background: var(--pm-primary-soft);
	color: var(--pm-primary);
	font-size: 10px;
	font-weight: 600;
	padding: 2px 10px;
	border-radius: var(--pm-radius-pill);
	margin-bottom: 8px;
}
.pmn-cols__acard .abody {
	padding: 14px 14px 16px;
	flex: 1;
	display: flex;
	flex-direction: column;
}
/* h3 は .athumb 側に表示（.athumb-title）。.abody には h3 を置かない設計。 */
.pmn-cols__acard p {
	font-size: 12px;
	color: var(--pm-text-sub);
	line-height: 1.65;
	margin: 0 0 10px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.pmn-cols__acard .atags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.pmn-cols__acard .atag {
	padding: 2px 8px;
	border-radius: var(--pm-radius-pill);
	background: var(--pm-base);
	color: var(--pm-text-sub);
	font-size: 10px;
	font-family: var(--pm-font-num);
}
.pmn-cols__acard .ameta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 10px;
	color: var(--pm-text-sub);
	font-family: var(--pm-font-num);
	margin-top: auto;
	border-top: 1px solid var(--pm-border);
	padding-top: 10px;
}
.pmn-cols__acard .ameta .author { display: inline-flex; align-items: center; gap: 5px; }
.pmn-cols__acard .ameta .avatar {
	width: 18px; height: 18px;
	border-radius: 50%;
	background: var(--pm-primary-soft);
	color: var(--pm-primary);
	font-size: 9px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-family: var(--pm-font-heading);
}
.pmn-cols__acard .ameta .ja { color: var(--pm-text); }

/* ---- ページネーション ---- */
.pmn-cols__pg {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 6px;
	margin-top: 32px;
	flex-wrap: wrap;
}
.pmn-cols__pg .page-numbers {
	min-width: 36px;
	height: 36px;
	border-radius: 50%;
	border: none;
	background: transparent;
	font-family: var(--pm-font-num);
	font-size: 13px;
	color: var(--pm-text);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 8px;
	text-decoration: none;
}
.pmn-cols__pg .page-numbers:hover { background: var(--pm-primary-soft); }
.pmn-cols__pg .page-numbers.current {
	background: var(--pm-primary);
	color: var(--pm-text-on-primary);
}
.pmn-cols__pg .page-numbers.dots { color: var(--pm-text-sub); cursor: default; }
.pmn-cols__pg .page-numbers.prev,
.pmn-cols__pg .page-numbers.next {
	padding: 0 14px;
	border-radius: var(--pm-radius-pill);
	color: var(--pm-primary);
	font-weight: 600;
}

/* ---- 空状態 ---- */
.pmn-cols__empty {
	background: var(--pm-surface);
	border: 1px dashed var(--pm-border);
	border-radius: var(--pm-radius-card);
	padding: 64px 32px;
	text-align: center;
	color: var(--pm-text-sub);
}
.pmn-cols__empty svg { color: var(--pm-primary); margin-bottom: 16px; }
.pmn-cols__empty h2 {
	font-family: var(--pm-font-heading);
	font-weight: 700;
	font-size: 18px;
	color: var(--pm-text);
	margin: 0 0 8px;
}
.pmn-cols__empty p { margin: 0; font-size: 14px; line-height: 1.8; }
.pmn-cols__empty a { color: var(--pm-primary); font-weight: 600; }

/* ---- カテゴリ説明（taxonomy ページ専用） ---- */
.pmn-cols__cat-desc {
	background: var(--pm-surface);
	border: 1px solid var(--pm-border);
	border-radius: var(--pm-radius-card);
	padding: 20px 24px;
	margin-bottom: 24px;
	font-size: 14px;
	line-height: 1.85;
	color: var(--pm-text-sub);
}
@media (max-width: 767px) {
	.pmn-cols__cat-desc { padding: 16px; font-size: 13px; }
}

/* ---- Sidebar ---- */
.pmn-cols__sidebar {
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.pmn-cols__sb-card {
	background: var(--pm-surface);
	border: 1px solid var(--pm-border);
	border-radius: 14px;
	padding: 18px;
}
.pmn-cols__sb-card h3 {
	font-family: var(--pm-font-heading);
	font-weight: 700;
	font-size: 14px;
	margin: 0 0 12px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--pm-border);
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--pm-text);
}
.pmn-cols__sb-card h3 svg { color: var(--pm-primary); flex-shrink: 0; }

.pmn-cols__sb-search {
	display: flex;
	border: 1px solid var(--pm-border);
	border-radius: 8px;
	overflow: hidden;
}
.pmn-cols__sb-search input {
	flex: 1;
	min-width: 0;
	border: none;
	outline: none;
	padding: 0 12px;
	height: 38px;
	font-size: 13px;
	font-family: inherit;
	color: var(--pm-text);
}
.pmn-cols__sb-search button {
	flex-shrink: 0;
	width: 42px;
	background: var(--pm-primary);
	color: var(--pm-text-on-primary);
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.pmn-cols__pop-list { display: flex; flex-direction: column; gap: 10px; }
.pop-item {
	display: flex;
	gap: 10px;
	text-decoration: none;
	color: inherit;
	align-items: flex-start;
}
.pop-item .pop-rank {
	font-family: var(--pm-font-num);
	font-weight: 700;
	font-size: 18px;
	color: var(--pm-primary);
	width: 22px;
	flex: none;
	line-height: 1.2;
}
.pop-item .pop-rank.top { color: var(--pm-secondary); }
.pop-item h4 {
	font-family: var(--pm-font-heading);
	font-weight: 600;
	font-size: 12px;
	line-height: 1.5;
	margin: 0 0 3px;
	color: var(--pm-text);
}
.pop-item .pm {
	font-size: 10px;
	color: var(--pm-text-sub);
	font-family: var(--pm-font-num);
}

.pmn-cols__cat-list { display: flex; flex-direction: column; gap: 0; }
.pmn-cols__cat-list a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 9px 0;
	border-bottom: 1px solid var(--pm-border);
	text-decoration: none;
	color: inherit;
	font-size: 13px;
}
.pmn-cols__cat-list a:last-child { border-bottom: none; }
.pmn-cols__cat-list a:hover { color: var(--pm-primary); }
.pmn-cols__cat-list .ct { font-size: 11px; color: var(--pm-text-sub); font-family: var(--pm-font-num); }

.pmn-cols__tagcloud { display: flex; flex-wrap: wrap; gap: 5px; }
.pmn-cols__tagcloud a {
	padding: 4px 10px;
	border-radius: var(--pm-radius-pill);
	background: var(--pm-base);
	color: var(--pm-text);
	font-size: 11px;
	text-decoration: none;
}
.pmn-cols__tagcloud a:hover { background: var(--pm-primary-soft); color: var(--pm-primary); }

/* 内部誘導 CTA（一覧サイドバー）— primary 塗り + 白ボタン + 影で「押せる」を主張。
 * 詳細ページ底部 CTA (.pmn-col-detail__bcta) と統一。 */
.pmn-cols__sb-search-widget {
	background: linear-gradient(135deg, var(--pm-primary) 0%, var(--pm-primary-hover) 100%) !important;
	border: none !important;
	color: #fff;
	text-align: center;
	padding: 24px 20px !important;
	box-shadow: 0 4px 16px rgba(111, 179, 210, 0.2);
}
.pmn-cols__sb-search-widget h3 {
	color: #fff !important;
	border: none !important;
	justify-content: center;
	margin-bottom: 8px !important;
	padding: 0 !important;
	font-size: 16px;
}
.pmn-cols__sb-search-widget p {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.92);
	margin: 0 0 16px;
	line-height: 1.6;
}
.pmn-cols__sb-search-widget a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	box-sizing: border-box;
	height: 44px;
	background: #fff;
	color: var(--pm-primary);
	border: none;
	border-radius: var(--pm-radius-pill);
	font-family: var(--pm-font-heading);
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
	transition: transform var(--pm-dur-1) var(--pm-ease), box-shadow var(--pm-dur-1) var(--pm-ease);
}
.pmn-cols__sb-search-widget a:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}