/* ====================================================================
   服務頁正文(表單下方的解說 + 常見問題)— reading/_service-content
   版型比照知識文章內頁(knowledge/show + .prose-xuandeng):
   封面圖、燙金首段、金線章節標題、菱形大綱、問答印記。
   靜態檔,不經 Vite 編譯;view 用 filemtime 帶版本號,改完直接生效。
   ==================================================================== */

.sc-wrap {
    position: relative;
    padding: 4rem 0 4.5rem;
    background:
        radial-gradient(56rem 24rem at 88% 0%, rgb(200 164 82 / 0.12), transparent 70%),
        radial-gradient(36rem 20rem at 0% 38%, rgb(180 36 44 / 0.045), transparent 70%),
        var(--color-paper-100);
    border-top: 1px solid rgb(200 164 82 / 0.35);
    /* clip 而不是 hidden:hidden 會讓側欄的 sticky 失效 */
    overflow: clip;
}
@media (min-width: 768px) {
    .sc-wrap { padding: 5rem 0 5.5rem; }
}

/* 雲紋浮水印(與文章頁 CTA 同一張) */
.sc-cloud {
    position: absolute;
    top: 2.5rem;
    right: -4rem;
    width: 22rem;
    opacity: 0.07;
    pointer-events: none;
    user-select: none;
}

.sc-grid { display: block; }
@media (min-width: 1024px) {
    .sc-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 290px;
        gap: 3rem;
        align-items: start;
    }
}
@media (min-width: 1280px) {
    .sc-grid { grid-template-columns: minmax(0, 1fr) 310px; gap: 3.5rem; }
}
.sc-main {
    position: relative;
    min-width: 0;
    width: 100%;
    max-width: 46rem;
    margin-inline: auto;
}

/* --- 開頭:徽章 + 標題 + 作者列 --- */
.sc-eyebrow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 0;
}
.sc-kicker-text {
    font-size: 0.6875rem;
    letter-spacing: 0.35em;
    color: var(--color-brand-700);
    font-weight: 600;
}
.sc-title {
    margin: 0.9rem 0 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.65rem, 1.2rem + 1.7vw, 2.25rem);
    line-height: 1.3;
    letter-spacing: 0.03em;
    color: var(--color-ink-900);
    text-wrap: balance;
}
.sc-dek {
    margin: 0.75rem 0 0;
    font-size: 1rem;
    line-height: 1.8;
    color: var(--color-ink-500);
}
.sc-meta {
    margin: 1.1rem 0 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem 1rem;
    font-size: 0.8125rem;
    letter-spacing: 0.06em;
    color: var(--color-ink-500);
}
.sc-meta > span { display: inline-flex; align-items: center; gap: 0.4rem; }
.sc-meta svg { width: 0.9rem; height: 0.9rem; color: var(--color-brand-600); }

/* --- 封面圖(手機滿版,同文章頁) --- */
.sc-cover {
    margin: 1.75rem 0 2.25rem;
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid rgb(200 164 82 / 0.4);
    box-shadow: 0 14px 34px -22px rgb(60 45 20 / 0.55);
    background: var(--color-paper-200);
}
.sc-cover img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 12 / 5;
    object-fit: cover;
}
@media (max-width: 639px) {
    .sc-cover {
        margin-inline: calc(-1 * var(--xd-gutter, 1rem));
        border-radius: 0;
        border-left: 0;
        border-right: 0;
    }
}

/* --- 「這一頁說了什麼」大綱框(桌機改由側欄負責) --- */
.sc-toc-box {
    margin: 0 0 2.75rem;
    padding: 1rem 1.25rem 0.6rem;
    border: 1px solid rgb(200 164 82 / 0.45);
    border-radius: 1rem;
    background: rgb(253 252 247 / 0.8);
}
@media (min-width: 1024px) {
    .sc-toc-box { display: none; }
}
.sc-box-kicker {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.35rem;
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    color: var(--color-brand-700);
    font-weight: 600;
}
.sc-box-kicker svg { width: 0.9rem; height: 0.9rem; }
.sc-toc-box ol { list-style: none; margin: 0; padding: 0; }
.sc-toc-box a {
    display: flex;
    align-items: baseline;
    gap: 0.65rem;
    padding: 0.55rem 0;
    color: var(--color-ink-700);
    text-decoration: none;
    line-height: 1.55;
    border-bottom: 1px dashed rgb(200 164 82 / 0.3);
}
.sc-toc-box li:last-child a { border-bottom: 0; }
.sc-toc-box a:hover { color: var(--color-brand-800); }
.sc-toc-n {
    flex: none;
    min-width: 1.4em;
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--color-brand-600);
}

/* --- 章節 --- */
.sc-sec { margin-top: 3.25rem; scroll-margin-top: 6.5rem; }
.sc-sec:first-child { margin-top: 0; }

.sc-h2 {
    position: relative;
    margin: 0 0 1.25rem;
    padding: 0.2rem 0 0.6rem 1.1rem;
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.6rem);
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: 0.04em;
    color: var(--color-ink-900);
    border-bottom: 1px dotted rgb(200 164 82 / 0.55);
}
.sc-h2::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.4rem;
    bottom: 0.75rem;
    width: 3px;
    border-radius: 2px;
    background: linear-gradient(to bottom, var(--color-brand-500), var(--color-brand-700));
}
.sc-num { color: var(--color-brand-600); }

.sc-p {
    margin: 0;
    font-size: 1.0625rem;
    line-height: 1.95;
    letter-spacing: 0.015em;
    color: var(--color-ink-700);
    text-align: justify;
    text-justify: inter-ideograph;
}
@media (min-width: 768px) {
    .sc-p { font-size: 1.125rem; line-height: 2; }
}

/* 第一段 = 文章的開場段:墨色加深 + 燙金上下框 */
.sc-lead {
    padding: 1.1rem 1.35rem 1.2rem;
    color: var(--color-ink-900);
    font-weight: 500;
    border-top: 1px solid rgb(200 164 82 / 0.4);
    border-bottom: 1px solid rgb(200 164 82 / 0.4);
    background: linear-gradient(to right, rgb(200 164 82 / 0.08), rgb(200 164 82 / 0) 75%);
}

/* 「感情：……」這類清單 → 兩欄小卡 */
.sc-terms {
    display: grid;
    gap: 0.75rem;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
}
@media (min-width: 640px) {
    .sc-terms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sc-terms > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.sc-term {
    padding: 0.95rem 1.1rem 1rem;
    border-radius: 0.9rem;
    border: 1px solid rgb(200 164 82 / 0.38);
    background: linear-gradient(160deg, #fffdf7, var(--color-paper-50));
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.8), 0 8px 20px -16px rgb(60 45 20 / 0.45);
    transition: border-color 200ms ease, transform 200ms ease;
}
.sc-term:hover { border-color: rgb(200 164 82 / 0.7); transform: translateY(-1px); }
.sc-term-k {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0 0 0.3rem;
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--color-cinnabar-700);
}
.sc-term-k::before {
    content: '';
    flex: none;
    width: 0.45rem;
    height: 0.45rem;
    transform: rotate(45deg);
    background: var(--color-brand-500);
    box-shadow: 0 0 0 2px rgb(200 164 82 / 0.2);
}
.sc-term-v {
    margin: 0;
    text-wrap: pretty;
    font-size: 0.975rem;
    line-height: 1.8;
    color: var(--color-ink-700);
}

/* 一般清單 → 文章的金色圓珠 */
.sc-list { list-style: none; margin: 1.25rem 0 0; padding: 0 0 0 1.4rem; }
.sc-list > li {
    position: relative;
    padding-left: 0.35rem;
    margin-bottom: 0.6rem;
    font-size: 1.0625rem;
    line-height: 1.9;
    color: var(--color-ink-700);
}
.sc-list > li::before {
    content: '';
    position: absolute;
    left: -0.95rem;
    top: 0.95em;
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: var(--color-brand-500);
    box-shadow: 0 0 0 2px rgb(200 164 82 / 0.18);
    transform: translateY(-50%);
}
.sc-list strong {
    color: var(--color-cinnabar-700);
    font-weight: 600;
    background: linear-gradient(to bottom, transparent 60%, rgb(212 169 60 / 0.22) 60%);
    padding: 0 2px;
}

/* --- 常見問題:問/答 印記 --- */
.sc-faq { margin-top: 4rem; scroll-margin-top: 6.5rem; }
.sc-faq-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 1.25rem;
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.6rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--color-ink-900);
}
.sc-faq-title svg { width: 1.35rem; height: 1.35rem; color: var(--color-brand-600); }
.sc-faq-list { border-top: 1px solid rgb(200 164 82 / 0.45); }
.sc-faq-item { border-bottom: 1px solid rgb(200 164 82 / 0.45); }
.sc-faq-item > summary {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1.1rem 0.25rem;
    list-style: none;
    cursor: pointer;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.6;
    color: var(--color-ink-900);
}
.sc-faq-item > summary::-webkit-details-marker { display: none; }
.sc-faq-item > summary:hover .sc-q-text { color: var(--color-brand-800); }
.sc-q, .sc-a-mark {
    flex: none;
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1;
}
.sc-q {
    margin-top: -0.05rem;
    border: 1.5px solid var(--color-cinnabar);
    border-radius: 0.3rem;
    color: var(--color-cinnabar);
    transition: background 200ms ease, color 200ms ease;
}
.sc-faq-item[open] .sc-q { background: var(--color-cinnabar); color: #fff; }
.sc-q-text { flex: 1; min-width: 0; transition: color 200ms ease; }
.sc-chev {
    flex: none;
    width: 1.1rem;
    height: 1.1rem;
    margin-top: 0.3rem;
    color: var(--color-brand-600);
    transition: transform 250ms ease;
}
.sc-faq-item[open] .sc-chev { transform: rotate(180deg); }
.sc-a {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0 0.25rem 1.35rem;
}
.sc-a-mark {
    border-radius: 50%;
    background: rgb(200 164 82 / 0.2);
    color: var(--color-brand-800);
}
.sc-a p {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: 1rem;
    line-height: 1.95;
    color: var(--color-ink-700);
    text-align: justify;
    text-justify: inter-ideograph;
}

/* --- 讀完的行動卡(同文章頁 CTA) --- */
.sc-cta {
    margin-top: 3rem;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.1rem;
    border-radius: 1.25rem;
}
@media (min-width: 640px) {
    .sc-cta { flex-direction: row; align-items: center; gap: 1.25rem; padding: 1.75rem 2rem; }
}
.sc-cta-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: rgb(180 36 44 / 0.1);
    color: var(--color-cinnabar);
}
.sc-cta-icon svg { width: 1.5rem; height: 1.5rem; }
.sc-cta-body { flex: 1; min-width: 0; }
.sc-cta-title {
    margin: 0 0 0.25rem;
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-ink-900);
}
.sc-cta-desc { margin: 0; font-size: 0.9375rem; line-height: 1.7; color: var(--color-ink-500); text-wrap: pretty; }
.sc-cta .btn-ink-cinnabar { flex: none; text-decoration: none; }
@media (max-width: 639px) {
    .sc-cta .btn-ink-cinnabar { align-self: stretch; justify-content: center; }
}

/* --- 側欄 --- */
.sc-side > * + * { margin-top: 1.25rem; }
@media (min-width: 1024px) {
    .sc-side { position: sticky; top: 6rem; }
}
.sc-only-lg { display: none; }
@media (min-width: 1024px) {
    .sc-only-lg { display: block; }
}
.sc-side-card { padding: 1.25rem; }
.sc-side-kicker {
    margin: 0 0 0.85rem;
    font-size: 0.6875rem;
    letter-spacing: 0.35em;
    font-weight: 600;
    color: var(--color-brand-700);
}

/* 金線 + 菱形節點大綱(同文章頁「卷宗刻度」),捲動時亮起目前章節 */
.sc-toc { position: relative; display: flex; flex-direction: column; }
.sc-toc::before {
    content: '';
    position: absolute;
    left: 0.24rem;
    top: 0.9rem;
    bottom: 0.9rem;
    width: 1px;
    background: linear-gradient(to bottom, rgb(200 164 82 / 0.15), rgb(200 164 82 / 0.6), rgb(200 164 82 / 0.15));
}
.sc-toc a {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    padding: 0.45rem 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-ink-600);
    text-decoration: none;
    transition: color 250ms ease;
}
.sc-toc a::before {
    content: '';
    position: relative;
    z-index: 1;
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
    margin-top: 0.42em;
    transform: rotate(45deg);
    border: 1px solid var(--color-brand-500);
    background: var(--color-paper-50);
    transition: background 250ms ease, box-shadow 250ms ease;
}
.sc-toc a:hover { color: var(--color-brand-700); }
.sc-toc a.is-active { color: var(--color-ink-900); font-weight: 600; }
.sc-toc a.is-active::before {
    background: var(--color-brand-500);
    box-shadow: 0 0 0 3px rgb(200 164 82 / 0.22);
}

/* 參考資料庫入口(籤詩庫 / 牌義大全 / 解夢) */
.sc-lib {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 1.25rem;
    text-decoration: none;
}
.sc-lib-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    background: linear-gradient(145deg, var(--color-brand-100), rgb(200 164 82 / 0.35));
    color: var(--color-brand-800);
}
.sc-lib-icon svg { width: 1.25rem; height: 1.25rem; }
.sc-lib-body { flex: 1; min-width: 0; }
.sc-lib-title {
    display: block;
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.45;
    color: var(--color-ink-900);
    transition: color 200ms ease;
}
.sc-lib-desc {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.875rem;
    line-height: 1.65;
    color: var(--color-ink-500);
    text-wrap: pretty;
}
.sc-lib-go {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.6rem;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--color-brand-700);
}
.sc-lib-go svg { width: 0.9rem; height: 0.9rem; transition: transform 200ms ease; }
.sc-lib:hover .sc-lib-title { color: var(--color-brand-700); }
.sc-lib:hover .sc-lib-go svg { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
    .sc-term, .sc-chev, .sc-toc a, .sc-toc a::before, .sc-lib-go svg { transition: none; }
}