/* ═══════════════════════════════════════════
   Sicza Cube - 文章归档 v1
   ═══════════════════════════════════════════ */

.sc-arc {
	--arc-accent: rgba(255, 82, 43, 0.93);
	--arc-accent-light: rgba(255, 82, 43, 0.08);
	--arc-accent-18: rgba(255, 82, 43, 0.18);
	--arc-bg: #fff;
	--arc-text: #1c1c1c;
	--arc-text-2: #666;
	--arc-text-3: #999;
	--arc-border: #e8e8e8;
	--arc-radius: 8px;
	--arc-radius-lg: 14px;
	--arc-transition: 0.2s ease;
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 20px 60px;
	background: var(--arc-bg);
	color: var(--arc-text);
	font-family: -apple-system, BlinkMacSystemFont, "Noto Sans SC", sans-serif;
}

/* ── 头部 ─────────────────────────────────── */

.sc-arc-header {
	padding: 60px 0 24px;
	text-align: center;
}
.sc-arc-title {
	font-family: "Noto Serif SC", serif;
	font-size: clamp(1.6rem, 3.5vw, 2.4rem);
	font-weight: 900;
	letter-spacing: 0.04em;
	margin-bottom: 6px;
}
.sc-arc-sub { font-size: 0.9rem; color: var(--arc-text-3); }
.sc-arc-stats {
	display: flex;
	justify-content: center;
	gap: 24px;
	margin-top: 12px;
	font-size: 0.8rem;
	color: var(--arc-text-3);
}
.sc-arc-stats b { color: var(--arc-accent); font-size: 1rem; margin-right: 2px; }

/* ── 侧边栏布局 ─────────────────────────── */

.sc-arc[data-layout="left-narrow"],
.sc-arc[data-layout="right"] {
	max-width: 1400px;
}

.sc-arc-sidebar-wrap {
	display: grid;
	grid-template-columns: var(--arc-sidebar-w, 260px) 1fr;
	gap: 28px;
	align-items: start;
}
.sc-arc[data-layout="right"] .sc-arc-sidebar-wrap {
	grid-template-columns: 1fr var(--arc-sidebar-w, 260px);
}
.sc-arc[data-layout="right"] .sc-arc-sidebar { order: 2; }
.sc-arc[data-layout="right"] .sc-arc-main { order: 1; }

.sc-arc-side-toggle {
	display: none;
	width: 100%;
	padding: 10px;
	background: var(--arc-bg);
	border: 1px solid var(--arc-border);
	border-radius: var(--arc-radius);
	color: var(--arc-text-2);
	font-size: 0.86rem;
	cursor: pointer;
	text-align: center;
	margin-bottom: 12px;
	font-family: inherit;
}

.sc-arc-sidebar {
	background: var(--arc-bg);
	border: 1px solid var(--arc-border);
	border-radius: var(--arc-radius-lg);
	padding: 20px;
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	scrollbar-width: thin;
}

.sc-arc-main { min-width: 0; }
.sc-arc-main-toolbar {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	padding: 10px 0;
}

/* 侧边栏分区 */
.sc-arc-side-sec { margin-bottom: 20px; }
.sc-arc-side-sec:last-of-type { margin-bottom: 0; }

.sc-arc-side-title {
	font-size: 0.76rem;
	font-weight: 700;
	color: var(--arc-text-3);
	letter-spacing: 0.1em;
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	gap: 8px;
}
.sc-arc-side-title::before {
	content: '';
	width: 3px;
	height: 12px;
	background: var(--arc-accent);
	border-radius: 2px;
}

/* 侧边栏分类 */
.sc-arc-cat-list { list-style: none; }
.sc-arc-cat-list > li { margin-bottom: 6px; }
.sc-arc-cat-row {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-bottom: 1px;
}
.sc-arc-cat-row .sc-arc-cat-arrow {
	width: 14px; height: 14px;
	display: inline-flex; align-items: center; justify-content: center;
	background: none; border: 1px solid var(--arc-border);
	border-radius: 3px; color: var(--arc-text-3);
	font-size: 0.45rem; cursor: pointer; transition: all var(--arc-transition);
	flex-shrink: 0; line-height: 1; padding: 0;
}
.sc-arc-cat-row .sc-arc-cat-arrow:hover { border-color: var(--arc-text-2); color: var(--arc-text-2); }
.sc-arc-cat-row .sc-arc-cat-arrow.on { transform: rotate(90deg); color: var(--arc-accent); border-color: var(--arc-accent); }

.sc-arc-side-btn {
	flex: 1;
	display: flex; align-items: center;
	padding: 7px 10px;
	background: transparent; border: 1px solid transparent;
	border-radius: var(--arc-radius);
	color: var(--arc-text-2); font-size: 0.85rem;
	cursor: pointer; transition: all var(--arc-transition); text-align: left; gap: 6px;
	font-family: inherit; width: 100%;
}
.sc-arc-side-btn:hover { background: var(--arc-accent-light); color: var(--arc-text); border-color: var(--arc-border); }
.sc-arc-side-btn.on { background: var(--arc-accent-light); border-color: var(--arc-accent-18); color: var(--arc-accent); font-weight: 500; }

.sc-arc-side-num {
	margin-left: auto; font-size: 0.7rem; color: var(--arc-text-3);
	background: #f5f5f5; padding: 1px 7px; border-radius: 10px;
	min-width: 20px; text-align: center;
}
.sc-arc-side-btn.on .sc-arc-side-num { background: var(--arc-accent-18); color: var(--arc-accent); }

.sc-arc-sub-list {
	list-style: none; padding-left: 22px;
	overflow: hidden; max-height: 0; transition: max-height 0.35s ease;
}
.sc-arc-sub-list.on { max-height: 800px; }
.sc-arc-sub-list li { margin-top: 4px; }

.sc-arc-side-btn--sub {
	font-size: 0.8rem; color: var(--arc-text-3);
}
.sc-arc-side-btn--sub::before { content: '└'; color: var(--arc-text-3); font-size: 0.65rem; margin-right: 2px; }
.sc-arc-side-btn--sub:hover { color: var(--arc-text-2); }
.sc-arc-side-btn--sub.on { color: var(--arc-accent); background: var(--arc-accent-light); }

/* 侧边栏标签 */
.sc-arc-side-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.sc-arc-side-tag {
	padding: 4px 11px; background: var(--arc-accent-light); border: 1px solid var(--arc-accent-18);
	border-radius: 18px; color: var(--arc-accent); font-size: 0.75rem;
	cursor: pointer; transition: all var(--arc-transition); white-space: nowrap;
	font-family: inherit;
}
.sc-arc-side-tag:hover { border-color: var(--arc-accent); }
.sc-arc-side-tag.on { background: var(--arc-accent); border-color: var(--arc-accent); color: #fff; }

/* 侧边栏年份 */
.sc-arc-side-years { display: flex; flex-wrap: wrap; gap: 6px; }
.sc-arc-side-year {
	padding: 5px 14px; border: 1px solid var(--arc-border); border-radius: 16px;
	background: transparent; color: var(--arc-text-2); font-size: 0.8rem;
	cursor: pointer; transition: all var(--arc-transition); font-weight: 600;
	font-family: inherit;
}
.sc-arc-side-year:hover { border-color: var(--arc-accent); color: var(--arc-accent); }
.sc-arc-side-year.on { background: var(--arc-accent); border-color: var(--arc-accent); color: #fff; }

/* 侧边栏清除按钮 */
.sc-arc-side-clear {
	visibility: hidden;
	opacity: 0;
	width: 100%; padding: 9px; margin-top: 14px;
	background: transparent; border: 1px solid #e57373; border-radius: var(--arc-radius);
	color: #e57373; font-size: 0.8rem; cursor: pointer;
	transition: opacity 0.2s ease, visibility 0.2s ease, background 0.2s ease;
	font-family: inherit;
}
.sc-arc-side-clear.show { visibility: visible; opacity: 1; }
.sc-arc-side-clear:hover { background: #ffebee; }

/* 公告框 */
.sc-arc-announce {
	margin-top: 20px;
	padding: 16px;
	border: 1px solid var(--arc-border);
	border-radius: var(--arc-radius);
	background: #fafafa;
	font-size: 0.85rem;
	line-height: 1.6;
	color: var(--arc-text-2);
}

@media (max-width: 860px) {
	.sc-arc-sidebar-wrap { grid-template-columns: 1fr; }
	.sc-arc-side-toggle { display: block; }
	.sc-arc-sidebar { position: static; max-height: none; display: none; }
	.sc-arc-sidebar.open { display: block; }
}

/* ── 工具栏（全宽） ─────────────────────── */

.sc-arc-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 16px;
	padding: 16px 0;
	border-bottom: 1px solid var(--arc-border);
	margin-bottom: 20px;
}

.sc-arc-filters { flex: 1; display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }

.sc-arc-filter-group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}
.sc-arc-filter-label {
	font-size: 12px;
	color: var(--arc-text-3);
	font-weight: 600;
	letter-spacing: 0.05em;
	margin-right: 2px;
	white-space: nowrap;
}

/* 全宽分类项 */
.sc-arc-cat-item { position: relative; }
.sc-arc-tag .sc-arc-cat-arrow {
	display: inline-block;
	font-size: 0.65em;
	margin-left: 2px;
	transition: transform var(--arc-transition);
}
.sc-arc-cat-item.open > .sc-arc-tag .sc-arc-cat-arrow { transform: rotate(90deg); }

.sc-arc-cat-children {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	background: var(--arc-bg);
	border: 1px solid var(--arc-border);
	border-radius: var(--arc-radius);
	padding: 6px;
	margin-top: 4px;
	z-index: 50;
	box-shadow: 0 4px 16px rgba(0,0,0,0.08);
	flex-direction: column;
	gap: 4px;
	min-width: 100px;
}
.sc-arc-cat-item.open > .sc-arc-cat-children { display: flex; }

/* 全宽标签按钮 */
.sc-arc-tag {
	padding: 5px 12px;
	border: 1px solid var(--arc-border);
	border-radius: 16px;
	background: transparent;
	color: var(--arc-text-2);
	font-size: 12px;
	cursor: pointer;
	transition: all var(--arc-transition);
	white-space: nowrap;
	font-family: inherit;
	line-height: 1.4;
}
.sc-arc-tag:hover { border-color: var(--arc-accent); color: var(--arc-accent); }
.sc-arc-tag.active { background: var(--arc-accent); border-color: var(--arc-accent); color: #fff; }

.sc-arc-tag--cat { border-color: #d0d0d0; color: var(--arc-text-2); }
.sc-arc-tag--cat.active { background: #4a7c59; border-color: #4a7c59; color: #fff; }
.sc-arc-tag--cat:hover { border-color: #4a7c59; color: #4a7c59; }
.sc-arc-tag--sub { font-size: 11px; }

.sc-arc-tag--tag { color: var(--arc-accent); border-color: var(--arc-accent-18); background: var(--arc-accent-light); }
.sc-arc-tag--tag.active { background: var(--arc-accent); color: #fff; }
.sc-arc-tag--tag:hover { background: var(--arc-accent-18); }

.sc-arc-tag--year { font-weight: 600; }

/* ── 已选标签栏 ───────────────────────────── */

.sc-arc-chips {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 0;
	flex-wrap: wrap;
}
.sc-arc-chips-list { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.sc-arc-chip {
	display: inline-flex; align-items: center; gap: 4px;
	padding: 3px 10px;
	border-radius: 14px;
	font-size: 12px;
	animation: arcChipPop 0.15s ease;
}
.sc-arc-chip--cat { background: #e8f5e9; color: #2e7d32; }
.sc-arc-chip--tag { background: var(--arc-accent-light); color: var(--arc-accent); }
.sc-arc-chip--year { background: #e3f2fd; color: #1565c0; }
@keyframes arcChipPop { from { opacity: 0; transform: scale(0.9); } }

.sc-arc-chip-x {
	width: 14px; height: 14px;
	border: none; border-radius: 50%;
	background: rgba(0,0,0,0.1);
	color: inherit; font-size: 10px;
	cursor: pointer; line-height: 14px; text-align: center;
	padding: 0;
}
.sc-arc-chip-x:hover { background: rgba(0,0,0,0.2); }

.sc-arc-chips-clear {
	padding: 3px 12px;
	border: 1px solid #e57373;
	border-radius: 14px;
	background: transparent;
	color: #e57373;
	font-size: 11px;
	cursor: pointer;
	white-space: nowrap;
	font-family: inherit;
}
.sc-arc-chips-clear:hover { background: #ffebee; }

/* ── 视图切换 ─────────────────────────────── */

.sc-arc-views { display: flex; gap: 0; margin-left: auto; flex-shrink: 0; }
.sc-arc-view-btn {
	width: 34px; height: 34px;
	border: 1px solid var(--arc-border);
	background: transparent;
	cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	transition: all var(--arc-transition);
	color: var(--arc-text-3);
}
.sc-arc-view-btn:first-child { border-radius: 6px 0 0 6px; }
.sc-arc-view-btn:last-child { border-radius: 0 6px 6px 0; }
.sc-arc-view-btn.active { background: var(--arc-accent); border-color: var(--arc-accent); color: #fff; }
.sc-arc-view-btn svg { width: 16px; height: 16px; }

/* ── 视图通用 ─────────────────────────────── */

.sc-arc-view {
	display: none !important;
	visibility: hidden;
	height: 0;
	overflow: hidden;
}
.sc-arc-view.active {
	visibility: visible;
	height: auto;
	overflow: visible;
}
.sc-arc-grid.active { display: grid !important; }
.sc-arc-masonry.active { display: block !important; }
.sc-arc-timeline.active { display: block !important; }

.sc-arc-result-info {
	font-size: 0.8rem;
	color: var(--arc-text-3);
	margin-bottom: 16px;
}
.sc-arc-result-info strong { color: var(--arc-accent); font-size: 1rem; }

/* ── 网格视图（文章卡片）──────────────────── */

.sc-arc-grid {
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.sc-arc-card {
	background: var(--arc-bg);
	border: 1px solid var(--arc-border);
	border-radius: var(--arc-radius-lg);
	padding: 20px 18px 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	transition: all var(--arc-transition);
}
.sc-arc-card:hover {
	border-color: var(--arc-accent-18);
	box-shadow: 0 4px 20px rgba(0,0,0,0.06);
	transform: translateY(-2px);
}

.sc-arc-card-meta {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 0.72rem;
}
.sc-arc-card-date { color: var(--arc-text-3); white-space: nowrap; }
.sc-arc-card-cat { color: var(--arc-accent); font-weight: 500; }

.sc-arc-card-title {
	font-family: "Noto Serif SC", serif;
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.4;
}
.sc-arc-card-title a {
	color: var(--arc-text);
	text-decoration: none;
	transition: color var(--arc-transition);
}
.sc-arc-card-title a:hover { color: var(--arc-accent); }

.sc-arc-card-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}
.sc-arc-card-tag {
	font-size: 0.65rem;
	padding: 2px 7px;
	background: var(--arc-accent-light);
	border: 1px solid var(--arc-accent-18);
	border-radius: 12px;
	color: var(--arc-text-3);
	cursor: pointer;
	transition: all var(--arc-transition);
	white-space: nowrap;
}
.sc-arc-card-tag:hover { color: var(--arc-accent); border-color: var(--arc-accent); }

/* 带封面的卡片 */
.sc-arc-card--cover { padding: 0; overflow: hidden; }
.sc-arc-card-thumb {
	width: 100%;
	aspect-ratio: 16/10;
	overflow: hidden;
}
.sc-arc-card-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}
.sc-arc-card--cover:hover .sc-arc-card-thumb img { transform: scale(1.04); }
.sc-arc-card--cover .sc-arc-card-body { padding: 14px 16px 16px; }

/* ── 瀑布流视图 ───────────────────────────── */

.sc-arc-masonry {
	column-count: var(--arc-cols, 3);
	column-gap: 20px;
}

.sc-arc-masonry .sc-arc-card {
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	margin-bottom: 20px;
}
.sc-arc-masonry .sc-arc-card-thumb {
	aspect-ratio: auto;
}
.sc-arc-masonry .sc-arc-card-thumb img {
	height: auto;
}

/* ── 时间轴视图 ───────────────────────────── */

.sc-arc-tl-nav {
	display: flex;
	gap: 8px;
	padding: 12px 0;
	overflow-x: auto;
	scrollbar-width: thin;
	margin-bottom: 24px;
}
.sc-arc-tl-capsule {
	flex-shrink: 0;
	padding: 6px 16px;
	border: 1px solid var(--arc-border);
	border-radius: 20px;
	background: transparent;
	color: var(--arc-text-2);
	font-size: 13px;
	cursor: pointer;
	transition: all var(--arc-transition);
	white-space: nowrap;
	font-family: inherit;
	font-weight: 500;
}
.sc-arc-tl-capsule:hover { border-color: var(--arc-accent); color: var(--arc-accent); }
.sc-arc-tl-capsule.active { background: var(--arc-accent); border-color: var(--arc-accent); color: #fff; }
.sc-arc-tl-capsule-count {
	display: inline-block;
	margin-left: 4px;
	font-size: 11px;
	opacity: 0.7;
}

.sc-arc-tl-section { margin-bottom: 32px; }
.sc-arc-tl-section-title {
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 16px;
	padding-left: 12px;
	border-left: 3px solid var(--arc-accent);
}

.sc-arc-tl-list {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.sc-arc-tl-item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px 14px;
	border-radius: var(--arc-radius);
	text-decoration: none;
	color: var(--arc-text);
	transition: all var(--arc-transition);
}
.sc-arc-tl-item:hover {
	background: var(--arc-accent-light);
	color: var(--arc-text);
}
.sc-arc-tl-date {
	font-size: 0.78rem;
	color: var(--arc-text-3);
	min-width: 40px;
	flex-shrink: 0;
}
.sc-arc-tl-title {
	flex: 1;
	font-size: 0.9rem;
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.sc-arc-tl-cat {
	font-size: 0.7rem;
	color: var(--arc-accent);
	background: var(--arc-accent-light);
	padding: 2px 8px;
	border-radius: 10px;
	flex-shrink: 0;
}

/* ── 加载更多 ─────────────────────────────── */

.sc-arc-more { text-align: center; padding: 40px 0; }
.sc-arc-more-btn {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 10px 28px;
	border: 1px solid var(--arc-border);
	background: transparent;
	color: var(--arc-text-2);
	font-size: 14px;
	border-radius: var(--arc-radius);
	cursor: pointer;
	transition: all var(--arc-transition);
	font-family: inherit;
}
.sc-arc-more-btn:hover { border-color: var(--arc-accent); color: var(--arc-accent); }
.sc-arc-more-btn.loading { pointer-events: none; opacity: 0.5; }
.sc-arc-more-spin { display: none; width: 14px; height: 14px; border: 2px solid var(--arc-border); border-top-color: var(--arc-accent); border-radius: 50%; animation: arcSpin 0.7s linear infinite; }
.sc-arc-more-btn.loading .sc-arc-more-spin { display: block; }
.sc-arc-more-btn.loading .sc-arc-more-label { display: none; }
@keyframes arcSpin { to { transform: rotate(360deg); } }

/* ── 空状态 ───────────────────────────────── */

.sc-arc-empty { text-align: center; padding: 60px 20px; color: var(--arc-text-3); font-size: 0.9rem; }

/* ── 响应式 ───────────────────────────────── */

@media (max-width: 900px) {
	.sc-arc-grid { grid-template-columns: repeat(2, 1fr); }
	.sc-arc-masonry { column-count: 2; }
}
@media (max-width: 600px) {
	.sc-arc-grid { grid-template-columns: 1fr; }
	.sc-arc-masonry { column-count: 1; }
}