.listing-shell { padding-bottom: 30px; }

.search-bar { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin-bottom: 26px; }
.search-bar input { min-height: 48px; padding: 0 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); outline: none; }
.search-bar button { border: 0; border-radius: 14px; background: var(--ink); color: white; padding: 0 18px; font-weight: 800; }

.content-list { border-top: 1px solid var(--line); }
.content-row { display: grid; grid-template-columns: 180px 130px minmax(0, 1fr) 54px; gap: 24px; align-items: center; padding: 24px 0; border-bottom: 1px solid var(--line); }
.content-row-media { aspect-ratio: 1.4; border-radius: 18px; overflow: hidden; background: var(--soft); }
.content-row-media img { width: 100%; height: 100%; object-fit: cover; }
.content-row-meta { font-size: 0.68rem; color: var(--muted); display: grid; gap: 6px; }
.content-row-meta strong { color: var(--rust); font-size: 0.67rem; letter-spacing: 0.08em; }
.content-row-body h2, .content-row-body h3 { font-family: "Noto Serif TC", serif; font-size: 1.35rem; line-height: 1.35; margin: 0 0 8px; }
.content-row-body p { margin: 0; color: var(--muted); font-size: 0.8rem; max-width: 720px; }
.content-row-arrow { width: 46px; height: 46px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; font-size: 1.1rem; }
.content-row:hover .content-row-arrow { background: var(--ink); color: white; border-color: var(--ink); }

.news-index .content-row { grid-template-columns: 110px 120px minmax(0, 1fr) 54px; }
.news-date { font-family: Georgia, serif; font-size: 1.2rem; color: var(--rust); }

.service-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.service-card { position: relative; min-height: 390px; border-radius: 28px; overflow: hidden; background: var(--paper); box-shadow: var(--shadow); }
.service-card img { width: 100%; height: 220px; object-fit: cover; }
.service-card-body { padding: 24px; }
.service-card small { font-size: 0.68rem; font-weight: 800; color: var(--rust); letter-spacing: 0.08em; }
.service-card h2 { font-family: "Noto Serif TC", serif; font-size: 1.7rem; margin: 8px 0 10px; }
.service-card p { margin: 0; color: var(--muted); font-size: 0.82rem; }
.service-card a:not(.cate_link) { position: absolute; inset: 0; }

.detail-head { padding: 50px 0 26px; }
.detail-head-inner { max-width: 980px; margin: auto; }
.detail-head h1 { font-family: "Noto Serif TC", serif; font-size: clamp(2.9rem, 5.5vw, 3.6rem); line-height: 1.05; letter-spacing: -0.05em; margin: 18px 0 18px; }
.detail-lead { font-size: 1rem; color: var(--muted); max-width: 820px; }
.detail-cover { margin: 30px auto 0; max-width: 1180px; border-radius: 32px; overflow: hidden; box-shadow: var(--shadow); }
.detail-cover img { width: 100%; aspect-ratio: 16/8; object-fit: cover; }

.toc-strip { position: sticky; top: 102px; z-index: 50; margin: 24px auto 0; width: min(calc(100% - 48px), 1040px); padding: 10px; border: 1px solid rgba(112, 91, 68, 0.15); border-radius: 999px; background: rgba(255, 253, 248, 0.92); backdrop-filter: blur(12px); display: flex; gap: 6px; overflow: auto; }
.toc-strip a { white-space: nowrap; padding: 8px 12px; border-radius: 999px; font-size: 0.7rem; font-weight: 700; color: var(--muted); }
.toc-strip a:hover { background: var(--soft); color: var(--ink); }

.article-wrap { max-width: 820px; margin: 52px auto 0; }
.article-wrap .summary-box { padding: 24px 26px; border-radius: 20px; background: #efe4d2; margin-bottom: 38px; }
.article-wrap .summary-box h2 { margin: 0 0 10px; font-size: 1rem; }
.article-wrap .summary-box p { margin: 0; }
.article-wrap h2 { font-family: "Noto Serif TC", serif; font-size: 2rem; line-height: 1.3; margin: 0; }
.article-wrap h3 { font-family: "Noto Serif TC", serif; font-size: 1.35rem; margin: 34px 0 12px; }
.article-wrap p, .article-wrap li { color: #4f4943; font-size: 0.95rem; }
.article-wrap p { margin: 0 0 18px; }
.article-wrap ul, .article-wrap ol { padding-left: 1.25rem; }
.article-wrap figure { margin: 34px 0; }
.article-wrap figure img { width: 100%; border-radius: 20px; }
.article-wrap figcaption { text-align: center; color: var(--muted); font-size: 0.68rem; margin-top: 8px; }
.article-wrap table { width: 100%; border-collapse: collapse; margin: 28px 0; font-size: 0.82rem; }
.article-wrap th, .article-wrap td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; }
.article-wrap th { background: #eee5d8; }

.article-wrap .card { background-color: rgb(255 255 255 / 20%); }
.article-wrap .card h2 , .article-wrap .card h3 { margin: 0; }

.related-band { margin: 56px auto 0; max-width: 980px; padding: 28px; border-radius: 28px; background: #2f5552; color: #f7efe4; display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; }
.related-band h2 { font-family: "Noto Serif TC", serif; margin: 0 0 6px; }
.related-band p { margin: 0; color: #cbd5d2; font-size: 0.8rem; }
.related-band .btn { border-color: rgba(255, 255, 255, 0.35); color: white; }

.faq-layout { display: grid; grid-template-columns: 280px 1fr; gap: 50px; }
.faq-aside { position: sticky; top: 110px; align-self: start; color: var(--muted); font-size: 0.8rem; }
.faq-aside strong { display: block; color: var(--ink); font-family: "Noto Serif TC", serif; font-size: 1.35rem; margin-bottom: 8px; }
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-question { width: 100%; padding: 23px 0; border: 0; background: transparent; display: grid; grid-template-columns: 38px 1fr 30px; gap: 14px; text-align: left; cursor: pointer; color: var(--ink); }
.faq-question span:first-child { font-family: Georgia, serif; color: var(--rust); }
.faq-question b { font-family: "Noto Serif TC", serif; font-size: 1.08rem; }
.faq-question:after { content: "＋"; font-size: 1.2rem; color: var(--muted); }
.faq-item.is-open .faq-question:after { content: "−"; }
.faq-answer { display: none; padding: 0 38px 24px 52px; color: var(--muted); font-size: 0.84rem; }
.faq-item.is-open .faq-answer { display: block; }

@media (max-width: 900px) {
	.content-row { grid-template-columns: 130px 110px 1fr 46px; }
	.service-grid { grid-template-columns: 1fr; }
	.faq-layout { grid-template-columns: 1fr; }
	.faq-aside { position: static; }
	.toc-strip { top: 86px; }
}
@media (max-width: 680px) {
	.search-bar { grid-template-columns: 1fr; }
	.content-row, .news-index .content-row { grid-template-columns: 96px 1fr 40px; gap: 14px; }
	.content-row-meta, .news-date { grid-column: 2; }
	.content-row-body { grid-column: 2; }
	.content-row-arrow { grid-column: 3; grid-row: 1/4; }
	.content-row-media { grid-row: 1/4; }
	.service-card { min-height: 0; }
	.service-card img { height: 190px; }
	.detail-head { padding-top: 32px; }
	.detail-head h1 { font-size: 2.7rem; }
	.detail-cover { border-radius: 22px; }
	.toc-strip { width: calc(100% - 28px); top: 78px; }
	.article-wrap { width: calc(100% - 32px); margin-top: 38px; }
	.article-wrap h2 { font-size: 1.6rem; }
	.related-band { width: calc(100% - 28px); grid-template-columns: 1fr; }
	.faq-question { grid-template-columns: 30px 1fr 24px; }
	.faq-answer { padding-left: 44px; }
}