/* 關於計畫頁。共用元件（hero、標題、數字卡、步驟、系所清單、CTA）來自 home.css，
   這裡只放本頁獨有的區塊。 */

html { scroll-behavior: smooth; }
section[id^="ap-"] { scroll-margin-top: var(--nav-h); }

/* 段落導覽只在手機出現，外觀沿用全站 .case-module-tab */
.ap-jump { display: none; }

.ap-text {
    margin-top: 1rem;
    color: #3d4a63;
    line-height: 1.95;
}

/* ── 01 緣起：三格數字卡附說明 ─────────────── */
.ap-origin .hp-lead { margin-bottom: 2.5rem; }
.ap-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ap-stats .hp-stat { padding: 1.6rem 1.4rem; }
.ap-stats .hp-stat p {
    margin-top: 0.6rem;
    color: var(--color-muted);
    font-size: 0.86rem;
    line-height: 1.7;
}
.ap-stats .hp-stat--hl p { color: var(--color-primary); }

/* ── 02 架構：左文右勾選清單 ──────────────── */
.ap-structure {
    background: #fff;
    padding: clamp(3rem, 7vw, 4.5rem) 0 1rem;
}

.ap-structure-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: clamp(2rem, 5vw, 4rem);
}

.ap-checks {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem 2rem;
}

.ap-checks li {
    padding-left: 2.2rem;
    position: relative;
}

.ap-checks li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.1rem;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--hp-yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a3260' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 0.9rem no-repeat;
}

.ap-checks h3 {
    color: var(--color-primary);
    font-size: 1.05rem;
    font-weight: 700;
}

.ap-checks p {
    margin-top: 0.35rem;
    color: var(--color-muted);
    font-size: 0.92rem;
    line-height: 1.75;
}

/* ── 03 流程：五欄 ─────────────────────────── */
.ap-step-list {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1.25rem;
}

.ap-step-list::before { left: 10%; right: 10%; }
.ap-step-list .hp-step img { width: 130px; }
.ap-step-list .hp-step-no { left: calc(50% - 74px); }
.ap-step-list .hp-step h3 { font-size: 1.08rem; }
.ap-step-list .hp-step p { font-size: 0.88rem; }

/* ── 04 三階段：深淺遞進的三欄 ─────────────── */
.ap-phases {
    background: #fff;
    padding: 1rem 0 clamp(3.5rem, 8vw, 5.5rem);
}

.ap-phase-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    margin: 2.75rem 0 0;
    padding: 0;
    list-style: none;
}

.ap-phase {
    position: relative;
    padding: 1.6rem 1.5rem 1.75rem;
    border-radius: 20px;
    background: var(--hp-sky);
}

.ap-phase:nth-child(2) { background: #cfe0f3; }
.ap-phase:nth-child(3) { background: var(--color-primary); color: #fff; }

/* 階段之間的箭頭 */
.ap-phase:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -1.05rem;
    width: 0.85rem;
    height: 0.85rem;
    border-top: 3px solid var(--color-primary);
    border-right: 3px solid var(--color-primary);
    transform: translateY(-50%) rotate(45deg);
}

.ap-phase-tag {
    display: inline-block;
    padding: 0.15rem 0.75rem;
    border-radius: 999px;
    background: var(--hp-yellow);
    color: var(--color-primary);
    font-size: 0.8rem;
    font-weight: 700;
}

.ap-phase h3 {
    margin-top: 0.9rem;
    color: var(--color-primary);
    font-size: 1.3rem;
    font-weight: 900;
}

.ap-phase-goal {
    margin-top: 0.3rem;
    color: var(--color-accent);
    font-weight: 700;
    font-size: 0.95rem;
}

.ap-phase p:last-child {
    margin-top: 0.8rem;
    color: #3d4a63;
    font-size: 0.92rem;
    line-height: 1.8;
}

.ap-phase:nth-child(3) h3,
.ap-phase:nth-child(3) .ap-phase-goal { color: #fff; }
.ap-phase:nth-child(3) .ap-phase-goal { color: var(--hp-yellow); }
.ap-phase:nth-child(3) p:last-child { color: rgba(255, 255, 255, 0.8); }

/* ── 05 特色：3×2 編號卡 ───────────────────── */
.ap-feat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    margin-top: 2.75rem;
}

.ap-feat {
    padding: 1.5rem 1.5rem 1.6rem;
    background: #fff;
    border-radius: 20px;
}

.ap-feat span {
    display: block;
    color: var(--hp-yellow);
    -webkit-text-stroke: 1.5px var(--color-primary);
    paint-order: stroke fill;
    font-size: 2rem;
    font-weight: 900;
    line-height: 1;
}

.ap-feat h3 {
    margin-top: 0.75rem;
    color: var(--color-primary);
    font-size: 1.1rem;
    font-weight: 700;
}

.ap-feat p {
    margin-top: 0.45rem;
    color: var(--color-muted);
    font-size: 0.92rem;
    line-height: 1.8;
}

/* ── 06 系所議題：膠囊標籤 ─────────────────── */
.ap-topics {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ap-topics li {
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    background: var(--hp-sky);
    color: #2c3a55;
    font-size: 0.88rem;
}

/* ── 07 成果類型 ───────────────────────────── */
.ap-outcomes {
    background: #fff;
    padding: clamp(2.5rem, 6vw, 4rem) 0;
}

.ap-outcome-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
    margin-top: 2.5rem;
}

.ap-outcome {
    padding: 1.4rem 1.3rem;
    border: 1.5px solid var(--color-border);
    border-top: 4px solid var(--hp-yellow);
    border-radius: 16px;
}

.ap-outcome h3 {
    color: var(--color-primary);
    font-size: 1.05rem;
    font-weight: 700;
}

.ap-outcome p {
    margin-top: 0.5rem;
    color: var(--color-muted);
    font-size: 0.9rem;
    line-height: 1.75;
}

.ap-note {
    margin-top: 1.25rem;
    color: var(--color-muted);
    font-size: 0.85rem;
    text-align: center;
}

/* ── 08 智財：標題壓在外框線上（參考 juji.tw） ─ */
.ap-ip {
    background: #fff;
    padding: clamp(2.5rem, 6vw, 4rem) 0;
}

.ap-ip-box {
    position: relative;
    margin-top: 2rem;
    padding: 3.5rem clamp(1.25rem, 4vw, 3rem) 2.5rem;
    border: 2px solid var(--color-primary);
    border-radius: 28px;
}

.ap-ip-title {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0 1rem;
    background: #fff;
    color: var(--color-primary);
    font-size: clamp(1.3rem, 1rem + 1.2vw, 1.9rem);
    font-weight: 900;
    white-space: nowrap;
}

.ap-ip-title img { width: 72px; height: auto; }
.ap-ip-box .hp-lead { margin-top: 0; }

.ap-rule-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 2rem;
}

.ap-rule {
    padding: 1.3rem 1.4rem;
    background: var(--hp-cream);
    border-radius: 16px;
}

.ap-rule h3 {
    color: var(--color-primary);
    font-size: 1.05rem;
    font-weight: 700;
}

.ap-rule p {
    margin-top: 0.4rem;
    color: #3d4a63;
    font-size: 0.92rem;
    line-height: 1.8;
}

/* ── 09 費用：金額＋20/80 付款條 ───────────── */
.ap-terms {
    background: var(--hp-cream);
    padding: clamp(3.5rem, 8vw, 5.5rem) 0;
}

.ap-fee {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 2rem;
    align-items: center;
    margin-top: 2.5rem;
    padding: 2rem;
    background: #fff;
    border-radius: 24px;
}

.ap-fee-base {
    display: flex;
    flex-direction: column;
    padding-right: 2rem;
    border-right: 1.5px solid var(--color-border);
    color: var(--color-muted);
    font-size: 0.88rem;
}

.ap-fee-base strong {
    color: var(--color-primary);
    font-size: 3.2rem;
    font-weight: 900;
    line-height: 1.15;
}

.ap-fee-base small {
    margin-left: 0.2rem;
    font-size: 0.32em;
    font-weight: 700;
}

.ap-fee-pay {
    display: flex;
    gap: 0.75rem;
}

.ap-fee-opt {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 92px;
    padding: 0.75rem 1.25rem;
    border-radius: 14px;
}

.ap-fee-opt b { font-size: 1.3rem; font-weight: 900; line-height: 1.3; }
.ap-fee-opt span { font-size: 0.88rem; }
.ap-fee-opt--a { background: var(--hp-yellow); color: var(--color-primary); }
.ap-fee-opt--b { background: var(--color-primary); color: #fff; }

.ap-term-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    margin-top: 1.25rem;
}

.ap-term {
    padding: 1.4rem 1.5rem;
    background: #fff;
    border-radius: 20px;
}

.ap-term h3 {
    color: var(--color-primary);
    font-size: 1.05rem;
    font-weight: 700;
}

.ap-term p {
    margin-top: 0.4rem;
    color: var(--color-muted);
    font-size: 0.92rem;
    line-height: 1.8;
}

/* ── RWD ──────────────────────────────────── */
@media (max-width: 960px) {
    .ap-step-list { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 2.5rem; }
    .ap-step-list::before { display: none; }
    .ap-outcome-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ap-structure-grid { grid-template-columns: 1fr; gap: 1.75rem; }
}

@media (max-width: 768px) {
    /* 段落導覽：黏在導覽列下方，頁籤列可左右滑 */
    .ap-jump {
        display: block;
        position: sticky;
        top: var(--nav-h);
        z-index: 5;
        background: rgba(255, 255, 255, 0.96);
        border-bottom: 1px solid var(--color-border);
    }
    .ap-jump .case-module-tabs {
        position: relative; /* 讓 landing.js 以 offsetLeft 計算捲動位置 */
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        padding: 0.6rem var(--content-gutter);
    }
    .ap-jump .case-module-tabs::-webkit-scrollbar { display: none; }
    section[id^="ap-"] { scroll-margin-top: calc(var(--nav-h) + 3.5rem); }

    /* 數字卡改橫列：數字在左，標籤與說明在右 */
    .ap-origin .hp-lead { margin-bottom: 1.75rem; }
    .ap-stats { grid-template-columns: 1fr; gap: 0.6rem; }
    .ap-stats .hp-stat {
        display: grid;
        grid-template-columns: 5.5rem minmax(0, 1fr);
        grid-template-areas: "num label" "num desc";
        column-gap: 0.75rem;
        align-items: center;
        padding: 1rem 1.1rem;
        text-align: left;
    }
    .ap-stats .hp-stat dt { grid-area: label; font-size: 0.95rem; font-weight: 700; color: var(--color-primary); }
    .ap-stats .hp-stat dd { grid-area: num; margin: 0; font-size: 2.4rem; }
    .ap-stats .hp-stat p { grid-area: desc; margin-top: 0.15rem; font-size: 0.82rem; }

    .ap-structure-grid { grid-template-columns: 1fr; gap: 1.75rem; }
    .ap-checks { grid-template-columns: 1fr; gap: 1.1rem; }

    /* 五步驟沿用 home.css 的時間軸，這裡只蓋掉桌機的尺寸 */
    .ap-step-list { grid-template-columns: 1fr; row-gap: 0; }
    .ap-step-list .hp-step img { width: 76px; }
    .ap-step-list .hp-step-no { left: -0.35rem; }
    .ap-step-list .hp-step h3 { font-size: 1.1rem; }
    .ap-step-list .hp-step p { font-size: 0.9rem; }

    .ap-phase-list { grid-template-columns: 1fr; gap: 1.5rem; margin-top: 2rem; }
    .ap-phase { padding: 1.3rem 1.25rem 1.4rem; }
    .ap-phase:not(:last-child)::after {
        top: auto;
        right: auto;
        bottom: -1.1rem;
        left: 50%;
        transform: translateX(-50%) rotate(135deg);
    }

    /* 六大特色：一張白底面板內的編號清單，不再一項一張卡 */
    .ap-feat-grid {
        grid-template-columns: 1fr;
        gap: 0;
        margin-top: 2rem;
        padding: 0.25rem 1.2rem;
        background: #fff;
        border-radius: 20px;
    }
    .ap-feat {
        display: grid;
        grid-template-columns: 2.6rem minmax(0, 1fr);
        column-gap: 0.6rem;
        padding: 1.1rem 0;
        border-radius: 0;
        background: none;
    }
    .ap-feat + .ap-feat { border-top: 1px solid var(--color-border); }
    .ap-feat span { grid-row: 1 / 3; font-size: 1.5rem; }
    .ap-feat h3 { margin-top: 0.1rem; }
    .ap-feat p { margin-top: 0.3rem; font-size: 0.9rem; line-height: 1.75; }

    /* 系所議題：手風琴內改成條列，長議題不再擠成兩行膠囊 */
    .ap-topics { display: block; }
    .ap-topics li {
        position: relative;
        padding: 0.4rem 0 0.4rem 1.1rem;
        border-radius: 0;
        background: none;
        font-size: 0.92rem;
        line-height: 1.6;
    }
    .ap-topics li::before {
        content: "";
        position: absolute;
        left: 0.15rem;
        top: 0.95rem;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--hp-yellow);
    }

    /* 成果類型：左側黃線的精簡區塊 */
    .ap-outcome-grid { grid-template-columns: 1fr; gap: 0.6rem; margin-top: 2rem; }
    .ap-outcome {
        padding: 1rem 1.1rem;
        border: 0;
        border-left: 4px solid var(--hp-yellow);
        border-radius: 0 12px 12px 0;
        background: var(--hp-cream);
    }
    .ap-note { text-align: left; }

    .ap-ip-box { padding: 2.75rem 1rem 1.25rem; border-radius: 20px; }
    .ap-ip-box .hp-lead { text-align: left; }
    .ap-ip-title { white-space: normal; width: max-content; max-width: 90%; text-align: center; }
    .ap-ip-title img { display: none; }
    .ap-rule-grid { grid-template-columns: 1fr; gap: 0.6rem; margin-top: 1.5rem; }
    .ap-rule { padding: 1rem 1.1rem; }

    .ap-fee { grid-template-columns: 1fr; gap: 1.25rem; padding: 1.4rem; }
    .ap-fee-base { padding: 0 0 1.25rem; border-right: 0; border-bottom: 1.5px solid var(--color-border); }
    .ap-fee-opt { min-height: 0; padding: 0.9rem 1rem; }
    .ap-fee-opt b { font-size: 1.1rem; }
    .ap-fee-opt span { font-size: 0.8rem; }
    .ap-term-grid { grid-template-columns: 1fr; gap: 0.6rem; }
    .ap-term { padding: 1.1rem 1.2rem; }
}