/**
 * practices.css · v0.8.6
 *
 * 夜裡的小練習：
 *   .pg-*  Tools 頁卡片區塊（practices_grid）
 *   .pr-*  練習內頁（single-nm_practice.php）
 *   .prc-* 可儲存小卡的隱藏版型（顏色寫死夜色系，不受亮色模式影響）
 *
 * 前綴皆未與其他 CSS 撞名（出貨前已 grep 驗證）。
 */


/* ═══════════════════════════════════════════════════════════════
   卡片區塊 .practices-section（Tools 頁）
═══════════════════════════════════════════════════════════════ */
.practices-section {
    max-width: var(--max-narrow);
    margin: 0 auto;
    padding: 100px 40px 110px;
}

.pg-head { text-align: center; margin-bottom: 46px; }
.pg-eyebrow {
    font-family: var(--ff-m);
    font-size: 10.5px;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--bronze);
    margin-bottom: 18px;
}
.pg-title {
    font-family: var(--ff-d);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(26px, 3.6vw, 38px);
    line-height: 1.4;
    color: var(--twilight);
    margin: 0 0 16px;
}
.pg-intro {
    font-size: 14.5px;
    line-height: 2;
    color: var(--mist);
    max-width: 52ch;
    margin: 0 auto;
}

.pg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 22px;
}

/* 一張練習卡（整張可點） */
.pg-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 32px 28px 56px;
    border: 1px solid var(--linen);
    border-radius: 14px;
    text-decoration: none;
    background: transparent;
    transition: background var(--t-hover) var(--ease-moon),
                border-color var(--t-hover) var(--ease-moon),
                transform var(--t-hover) var(--ease-moon);
}
a.pg-card:hover {
    background: var(--bone-2);
    border-color: var(--linen-2);
    transform: translateY(-3px);
}

.pg-card-top { display: flex; align-items: center; gap: 10px; }
.pg-moon {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--bronze);
    box-shadow: 0 0 12px rgba(168, 181, 201, calc(var(--glow-strength) * .8));
}
.pg-meta {
    font-family: var(--ff-m);
    font-size: 10.5px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--bronze);
}
.pg-name {
    font-family: var(--ff-d);
    font-style: italic;
    font-weight: 300;
    font-size: 21px;
    line-height: 1.45;
    color: var(--twilight);
}
.pg-line {
    font-size: 13.5px;
    line-height: 1.95;
    color: var(--mist);
    /* 解釋太長時收在 3 行內，卡片高度才整齊 */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pg-go {
    position: absolute;
    right: 26px; bottom: 22px;
    font-family: var(--ff-m);
    font-size: 10.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--mist-soft);
    transition: color var(--t-hover) var(--ease-moon),
                transform var(--t-hover) var(--ease-moon);
}
a.pg-card:hover .pg-go { color: var(--plum-hi); transform: translateX(4px); }

/* 「陸續增加中」dim 卡：虛線框、置中、不可點 */
.pg-coming {
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 32px 28px;
    min-height: 180px;
    border-style: dashed;
    cursor: default;
}
.pg-coming-moon {
    width: 9px; height: 9px; border-radius: 50%;
    border: 1px solid var(--mist-soft);
    opacity: .7;
}
.pg-coming-label {
    font-family: var(--ff-m);
    font-size: 11px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--mist-soft);
}
/* coming 卡的編號（Practice 03） */
.pg-coming-cat {
    font-family: var(--ff-m);
    font-size: 10.5px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--mist-soft);
    opacity: .7;
}
/* coming 卡的描述文字 */
.pg-coming-desc {
    font-family: var(--ff-d);
    font-style: italic;
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--mist-soft);
    max-width: 22ch;
    text-align: center;
}

@media (max-width: 640px) {
    .practices-section { padding: 72px 24px 84px; }
    .pg-grid { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════════════════
   練習內頁 .pr-*
═══════════════════════════════════════════════════════════════ */
/* v0.9.30：左右邊距對齊全站（桌機 40 / 手機 24），原本寫死 24px */
.pr-wrap { max-width: var(--max-prose); padding: 96px 40px 110px; }

@media (max-width: 880px) {
    .pr-wrap { padding: 64px 24px 80px; }
}

.pr-head { text-align: center; margin-bottom: 64px; }
.pr-moon {
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--bronze);
    box-shadow: 0 0 18px rgba(168, 181, 201, calc(var(--glow-strength) * .9));
    margin: 0 auto 24px;
}
.pr-eyebrow {
    font-family: var(--ff-m);
    font-size: 10.5px;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--bronze);
    margin-bottom: 18px;
}
.pr-title {
    font-family: var(--ff-d);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(30px, 5vw, 44px);
    line-height: 1.35;
    color: var(--twilight);
    margin: 0 0 18px;
}
/* 返回連結：內頁左上，回到 Tools 頁 */
.pr-back {
    display: inline-block;
    font-family: var(--ff-m);
    font-size: 11px;
    letter-spacing: .1em;
    color: var(--mist-soft);
    text-decoration: none;
    margin-bottom: 28px;
    transition: color var(--t-hover) var(--ease-moon);
}
.pr-back:hover { color: var(--twilight); }

/* 標題下方三段 meta（以｜分段），例如 10 分鐘 ｜ 一張紙 ｜ 適合…的夜晚 */
.pr-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 18px;
    margin-bottom: 24px;
}
.pr-meta span {
    position: relative;
    font-family: var(--ff-m);
    font-size: 10.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--bronze);
}
.pr-meta span + span::before {
    content: "｜";
    position: absolute;
    left: -13px;
    color: var(--mist-soft);
    opacity: .6;
}

.pr-tag {
    display: inline-block;
    font-family: var(--ff-m);
    font-size: 10.5px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--bronze);
    border: 1px solid var(--linen-2);
    border-radius: 99px;
    padding: 5px 14px;
    margin-bottom: 24px;
}
.pr-intro {
    font-size: 15px;
    line-height: 2.1;
    color: var(--mist);
    max-width: 46ch;
    margin: 0 auto;
}

.pr-sec { margin-bottom: 58px; }
.pr-h {
    font-family: var(--ff-m);
    font-size: 11px;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--bronze);
    margin: 0 0 18px;
}
.pr-body { font-size: 15px; line-height: 2.15; color: var(--twilight-2); margin: 0; }

/* 怎麼做（外掛 wysiwyg 內容） */
.pr-how { font-size: 15px; line-height: 2.15; color: var(--twilight-2); }
.pr-how ul { padding-left: 1.4em; margin: 0; }
.pr-how ul li { margin-bottom: 14px; }
.pr-how ul li::marker { color: var(--plum-hi); }
/* 怎麼做：編號清單（ol）→ 01 / 02 / 03 */
.pr-how ol { list-style: none; counter-reset: pr-step; padding-left: 0; margin: 0; }
.pr-how ol li {
    counter-increment: pr-step;
    position: relative;
    padding-left: 48px;
    margin-bottom: 18px;
}
.pr-how ol li::before {
    content: counter(pr-step, decimal-leading-zero);
    position: absolute; left: 0; top: -1px;
    font-family: var(--ff-num);
    font-style: italic;
    font-size: 22px;
    line-height: 1;
    color: var(--plum-hi);
}

/* 準備清單：無連結純文字；有連結時文字旁出現 ↓ 小圖示 */
.pr-prep { list-style: none; padding: 0; margin: 0; }
.pr-prep li {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    padding: 13px 0;
    border-bottom: 1px solid var(--linen);
    font-size: 15px;
    line-height: 1.9;
    color: var(--twilight-2);
}
.pr-prep li::before { content: '·'; color: var(--plum-hi); margin-right: 2px; }

.pr-dl {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px; height: 24px;
    border: 1px solid var(--linen-2);
    border-radius: 50%;
    color: var(--mist);
    align-self: center;
    transition: color var(--t-hover) var(--ease-moon),
                border-color var(--t-hover) var(--ease-moon);
}
.pr-dl svg { width: 13px; height: 13px; }
.pr-dl:hover, .pr-dl:focus-visible { color: var(--plum-hi); border-color: var(--plum-hi); }

/* hover 顯示連結名稱（中文版 / PDF…） */
.pr-dl::after {
    content: attr(data-label);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--ff-m);
    font-size: 10.5px;
    letter-spacing: .08em;
    white-space: nowrap;
    color: var(--twilight);
    background: var(--bone-2);
    border: 1px solid var(--linen-2);
    border-radius: 6px;
    padding: 4px 9px;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-hover) var(--ease-moon);
}
.pr-dl:hover::after, .pr-dl:focus-visible::after { opacity: 1; }

/* 可儲存小卡按鈕 */
.pr-card-sec { text-align: center; padding: 8px 0; }
.pr-card-btn {
    font-family: var(--ff-m);
    font-size: 12px;
    letter-spacing: .2em;
    color: var(--bronze-hi);
    background: transparent;
    border: 1px solid var(--linen-2);
    border-radius: 99px;
    padding: 13px 28px;
    cursor: pointer;
    transition: color var(--t-hover) var(--ease-moon),
                border-color var(--t-hover) var(--ease-moon),
                transform var(--t-hover) var(--ease-moon);
}
.pr-card-btn:hover { color: var(--plum-hi); border-color: var(--plum-hi); transform: translateY(-2px); }
.pr-card-btn[disabled] { opacity: .55; cursor: progress; transform: none; }
.pr-card-hint { font-size: 12.5px; color: var(--mist-soft); margin: 14px 0 0; }
.pr-card-msg  { font-size: 13px;  color: var(--mist); margin: 12px 0 0; }

/* 誠實註記：左側細線的小框 */
.pr-note {
    border-left: 2px solid var(--plum);
    background: var(--bone-2);
    border-radius: 0 12px 12px 0;
    padding: 26px 28px;
}
.pr-note .pr-body { color: var(--mist); font-size: 14.5px; }
/* 淺色模式：深淺底色太接近，補一道柔和陰影 + 細邊，讓它像深色版一樣浮起來像張卡片 */
[data-theme="light"] .pr-note {
    border-top: 1px solid rgba(26, 32, 48, .06);
    border-right: 1px solid rgba(26, 32, 48, .06);
    border-bottom: 1px solid rgba(26, 32, 48, .06);
    box-shadow: 0 8px 26px rgba(26, 32, 48, .10);
}

/* 相關文章 */
.pr-rel-list { list-style: none; padding: 0; margin: 0; }
.pr-rel-list a {
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding: 13px 0;
    border-bottom: 1px solid var(--linen);
    text-decoration: none;
    transition: transform var(--t-hover) var(--ease-moon);
}
.pr-rel-list a:hover { transform: translateX(4px); }
.pr-rel-date {
    font-family: var(--ff-num);
    font-size: 13px;
    color: var(--mist-soft);
    flex-shrink: 0;
}
.pr-rel-title { font-size: 15px; color: var(--twilight); line-height: 1.8; }
.pr-rel-list a:hover .pr-rel-title { color: var(--plum-hi); }

@media (max-width: 640px) {
    .pr-wrap { padding: 72px 20px 84px; }
    .pr-head { margin-bottom: 48px; }
    .pr-sec  { margin-bottom: 46px; }
}


/* ═══════════════════════════════════════════════════════════════
   可儲存小卡的隱藏版型 #pr-share-card（.prc-*）
   - 放在畫面外，html-to-image 點擊時轉成 PNG
   - 顏色全部寫死夜色系：不管網站在亮 / 暗模式，小卡長一樣
═══════════════════════════════════════════════════════════════ */
#pr-share-card {
    position: fixed;
    top: 0;
    left: -2000px;   /* 移出畫面，但仍會被瀏覽器渲染（display:none 會抓不到）*/
    width: 720px;
    background: #0F1419;
    z-index: -1;
    pointer-events: none;
}
.prc-inner { padding: 76px 64px 52px; text-align: left; }
.prc-moon {
    width: 10px; height: 10px; border-radius: 50%;
    background: #A8B5C9;
    box-shadow: 0 0 20px rgba(168, 181, 201, .55);
    margin-bottom: 30px;
}
.prc-eyebrow {
    font-family: var(--ff-m);
    font-size: 12px;
    letter-spacing: .3em;
    color: #A8B5C9;
    margin-bottom: 20px;
}
.prc-title {
    font-family: var(--ff-d);
    font-style: italic;
    font-weight: 300;
    font-size: 42px;
    line-height: 1.3;
    color: #E8EBF0;
    margin-bottom: 18px;
}
.prc-tag {
    display: inline-block;
    font-family: var(--ff-m);
    font-size: 12px;
    letter-spacing: .2em;
    color: #A8B5C9;
    border: 1px solid rgba(168, 181, 201, .35);
    border-radius: 99px;
    padding: 6px 16px;
    margin-bottom: 26px;
}
.prc-intro { font-size: 16px; line-height: 2; color: #8A92A2; margin-bottom: 8px; }
.prc-line  { height: 1px; background: rgba(168, 181, 201, .22); margin: 30px 0; }
.prc-h {
    font-family: var(--ff-m);
    font-size: 11.5px;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: #A8B5C9;
    margin: 26px 0 14px;
}
.prc-prep { list-style: none; padding: 0; margin: 0; }
.prc-prep li {
    font-size: 15.5px;
    line-height: 1.9;
    color: #C8CFD8;
    padding: 7px 0;
}
.prc-prep li::before { content: '· '; color: #9C8CBC; }
.prc-how { font-size: 15.5px; line-height: 2.05; color: #C8CFD8; }
.prc-how ol, .prc-how ul { padding-left: 1.4em; margin: 0; }
.prc-how li { margin-bottom: 12px; }
.prc-foot {
    display: flex;
    justify-content: space-between;
    font-family: var(--ff-m);
    font-size: 11.5px;
    letter-spacing: .14em;
    color: #6A727F;
    border-top: 1px solid rgba(168, 181, 201, .22);
    padding-top: 26px;
    margin-top: 44px;
}


/* ═══════════════════════════════════════════════════════════════
   iPhone/iPad 備援覆蓋層 .pr-overlay（長按圖片儲存）
═══════════════════════════════════════════════════════════════ */
.pr-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(10, 13, 18, .9);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.pr-overlay[hidden] { display: none; }
.pr-overlay-box { max-width: 420px; width: 100%; text-align: center; }
.pr-overlay-hint {
    font-size: 13.5px;
    color: #C8CFD8;
    margin: 0 0 14px;
    line-height: 1.8;
}
.pr-overlay-img {
    width: 100%;
    height: auto;
    max-height: 70vh;
    object-fit: contain;
    border-radius: 10px;
    border: 1px solid rgba(168, 181, 201, .3);
}
.pr-overlay-close {
    font-family: var(--ff-m);
    font-size: 12px;
    letter-spacing: .2em;
    color: #E8EBF0;
    background: transparent;
    border: 1px solid rgba(168, 181, 201, .4);
    border-radius: 99px;
    padding: 10px 26px;
    margin-top: 18px;
    cursor: pointer;
}

/* ══ v0.9.0:分類膠囊、語音播放器、延伸聆聽 ══ */

/* 練習分類:meta 下方的小膠囊,沒勾分類整排不出現 */
.pr-cats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 24px;
}
.pr-cat-pill {
    font-family: var(--ff-m);
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--plum-hi);
    border: 1px solid var(--plum);
    border-radius: 99px;
    padding: 4px 12px;
    opacity: .9;
}

/* 語音播放器:播放鍵 + plum 進度條 + 時間 */
.pr-audio {
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 420px;
    margin: 26px auto 0;
}
.pr-audio audio { display: none; }
.pr-audio-btn {
    flex: 0 0 42px;
    width: 42px; height: 42px;
    border-radius: 50%;
    border: 1px solid var(--plum);
    background: transparent;
    color: var(--plum-hi);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: border-color var(--t-hover) var(--ease-moon),
                color var(--t-hover) var(--ease-moon),
                transform var(--t-hover) var(--ease-moon);
}
.pr-audio-btn svg { width: 15px; height: 15px; }
.pr-audio-btn:hover { border-color: var(--plum-hi); transform: scale(1.06); }
.pr-audio-track {
    position: relative;
    flex: 1;
    height: 22px;            /* 加大可點範圍,手機好拉 */
    cursor: pointer;
    touch-action: none;      /* 拖拉進度時不要捲動頁面 */
}
.pr-audio-rail,
.pr-audio-fill {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    height: 3px;
    border-radius: 99px;
}
.pr-audio-rail { left: 0; right: 0; background: var(--mist-soft); opacity: .3; }
.pr-audio-fill { left: 0; width: 0%; background: var(--plum); }
.pr-audio-fill::after {
    content: "";
    position: absolute;
    right: -5px; top: 50%; transform: translateY(-50%);
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--plum-hi);
}
.pr-audio-time {
    flex: 0 0 auto;
    min-width: 78px;
    text-align: right;
    font-family: var(--ff-m);
    font-size: 10.5px;
    color: var(--mist-soft);
}
.pr-audio-dl {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    font-family: var(--ff-m);
    font-size: 11px;
    letter-spacing: .08em;
    color: var(--mist-soft);
    text-decoration: none;
    transition: color var(--t-hover) var(--ease-moon);
}
.pr-audio-dl svg { width: 14px; height: 14px; }
.pr-audio-dl:hover { color: var(--plum-hi); }

/* 延伸聆聽・觀看 */
.pr-media-list { list-style: none; padding: 0; margin: 0; }
.pr-media-list li + li { margin-top: 12px; }
.pr-media-list a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    color: var(--twilight-2);
    text-decoration: none;
    transition: color var(--t-hover) var(--ease-moon);
}
.pr-media-list svg { flex: 0 0 16px; width: 16px; height: 16px; color: var(--plum-hi); }
.pr-media-list a:hover { color: var(--plum-hi); }

/* 隱藏小卡內的步驟清單(保險,維持小卡版面緊湊) */
.prc-how ul, .prc-how ol { margin: 0; padding-left: 1.2em; }

/* ══ v0.9.2:結尾 CTA(寫信/預約)══ */
.pr-cta { text-align: center; }
.pr-cta-line {
    font-size: 15px;            /* 與內文一致 */
    line-height: 2.15;
    color: var(--twilight-2);
    margin: 0 0 12px;
}
.pr-cta-line a {
    font-size: 15px;            /* 連結同字級，只用顏色區分 */
    color: var(--plum-hi);
    text-decoration: none;
    white-space: nowrap;
    margin-left: 8px;
    border-bottom: 1px solid transparent;
    transition: border-color var(--t-hover) var(--ease-moon);
}
.pr-cta-line a:hover { border-bottom-color: var(--plum-hi); }

/* 覆蓋層的動作列：下載 + 關閉（兩顆同尺寸、文字垂直水平置中） */
.pr-overlay-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
}
.pr-overlay-actions .pr-overlay-close { margin-top: 0; } /* 取消它自帶的上邊距，跟下載鈕對齊 */
.pr-overlay-dl {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    line-height: 1;
    font-family: var(--ff-m);
    font-size: 12px;
    letter-spacing: .2em;
    color: #E8EBF0;
    border: 1px solid var(--plum);
    border-radius: 99px;
    padding: 10px 26px;
    text-decoration: none;
    transition: border-color var(--t-hover) var(--ease-moon);
}
.pr-overlay-dl:hover { border-color: var(--plum-hi); }