/* 網站說明頁（/Help/*）的版面。
   ★CSP 不允許內嵌樣式（style-src 'self'、style-src-attr 'none'），所有樣式都要寫在這個檔。 */

.help-guide {
    max-width: 62rem;
    line-height: 1.75;
}

.help-guide h2 {
    margin-top: 2.75rem;
    padding-top: 1rem;
    border-top: 1px solid var(--bs-border-color, #dee2e6);
    font-size: 1.45rem;
}

.help-guide h3 {
    margin-top: 1.75rem;
    font-size: 1.15rem;
}

.help-guide ol.help-steps > li {
    margin-block: .35rem;
}

/* ---- 目錄 ---------------------------------------------------------------------------- */
.help-toc {
    margin-block: 1.25rem 1.5rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .65rem;
    background: var(--bs-body-bg, #fff);
}

.help-toc h2 {
    margin: 0 0 .5rem;
    padding: 0;
    border: 0;
    font-size: 1rem;
}

.help-toc ol {
    margin: 0;
    padding-inline-start: 1.4rem;
    columns: 2 18rem;
}

/* ---- 截圖與圖例 ------------------------------------------------------------------------ */
.help-figure {
    margin-block: 1.25rem 1.75rem;
    padding: .75rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .65rem;
    background: var(--bs-body-bg, #fff);
}

/* inline-block：外框緊貼圖片，窄的截圖不會留下一大片空白；寬的截圖由 max-width 縮到欄寬。 */
.help-figure-image {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    border: 1px solid #e3e6ea;
    border-radius: .4rem;
    cursor: zoom-in;
}

.help-figure-image img {
    display: block;
    max-width: 100%;
    height: auto;
}

.help-figure figcaption {
    margin-top: .75rem;
}

.help-figure-title {
    display: block;
    font-weight: 700;
}

/* 圖例編號做成和截圖上一樣的紅色圓點，讀者一眼就能對上。 */
.help-legend {
    display: grid;
    gap: .45rem;
    margin: .6rem 0 0;
    padding: 0;
    list-style: none;
    counter-reset: help-legend;
}

.help-legend > li {
    display: grid;
    grid-template-columns: 1.75rem 1fr;
    gap: .6rem;
    align-items: start;
    counter-increment: help-legend;
}

.help-legend > li::before {
    content: counter(help-legend);
    width: 1.625rem;
    height: 1.625rem;
    margin-top: .1rem;
    border-radius: 50%;
    background: #e0282e;
    color: #fff;
    font: 700 .95rem/1.625rem Arial, sans-serif;
    text-align: center;
}

/* ---- 提醒框 ---------------------------------------------------------------------------- */
.help-note,
.help-warning {
    margin-block: 1rem;
    padding: .8rem 1rem;
    border-left: .3rem solid;
    border-radius: .4rem;
}

.help-note {
    border-color: #1f6feb;
    background: #eef4ff;
}

.help-warning {
    border-color: #d97706;
    background: #fff6e5;
}

.help-note > :last-child,
.help-warning > :last-child {
    margin-bottom: 0;
}

.help-label {
    display: block;
    margin-bottom: .2rem;
    font-weight: 700;
}

/* ---- 流程圖 ---------------------------------------------------------------------------- */
/* 每一步是一個方塊，上緣色條代表「誰要做這一步」；顏色對照見 .help-actors 圖例。
   寬螢幕橫排、窄螢幕直排；箭頭用偽元素畫，不需要圖片，三種語言的文字都會自動換行。 */
.help-flow-block {
    margin-block: 1rem 1.75rem;
    padding: 1rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .65rem;
    background: var(--bs-body-bg, #fff);
}

.help-flow-block > h3 {
    margin: 0 0 .75rem;
    font-size: 1.05rem;
}

.help-flow {
    display: flex;
    flex-wrap: wrap;
    gap: 1.9rem;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: help-flow;
}

.help-flow > li {
    position: relative;
    flex: 1 1 9.5rem;
    min-width: 9.5rem;
    padding: .7rem .75rem .75rem;
    border: 1px solid #d0d7de;
    border-top: .35rem solid var(--help-actor, #6c757d);
    border-radius: .45rem;
    background: #fbfcfd;
    line-height: 1.5;
    counter-increment: help-flow;
}

.help-flow > li::before {
    content: counter(help-flow);
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    margin-right: .35rem;
    border-radius: 50%;
    background: var(--help-actor, #6c757d);
    color: #fff;
    font: 700 .85rem/1.5rem Arial, sans-serif;
    text-align: center;
}

.help-flow > li + li::after {
    content: "";
    position: absolute;
    top: 50%;
    left: -1.45rem;
    width: 0;
    height: 0;
    border-block: .5rem solid transparent;
    border-left: .75rem solid #8c959f;
    transform: translateY(-50%);
}

.help-flow .help-actor-name {
    display: block;
    margin-top: .15rem;
    color: #57606a;
    font-size: .8rem;
}

.help-flow strong {
    display: block;
    margin-top: .25rem;
}

.help-actor-pc {
    --help-actor: #1f6feb;
}

.help-actor-site {
    --help-actor: #0f7b6c;
}

.help-actor-vendor {
    --help-actor: #c2410c;
}

.help-actors {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.25rem;
    margin: .9rem 0 0;
    padding: 0;
    list-style: none;
    font-size: .9rem;
}

.help-actors > li::before {
    content: "";
    display: inline-block;
    width: .9rem;
    height: .9rem;
    margin-right: .4rem;
    border-radius: .2rem;
    background: var(--help-actor);
    vertical-align: -.1rem;
}

/* ---- 對照表 ---------------------------------------------------------------------------- */
.help-table {
    width: 100%;
    margin-block: .75rem 1.25rem;
    border-collapse: collapse;
}

/* Bootstrap 預設把表格標題放在表格下方；說明頁的對照表要先看到標題再看內容。 */
.help-table caption {
    caption-side: top;
    padding: 0 0 .35rem;
    color: inherit;
    font-weight: 700;
}

.help-table th,
.help-table td {
    padding: .55rem .7rem;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
    text-align: left;
    vertical-align: top;
}

.help-table th[scope="row"] {
    white-space: nowrap;
}

/* 狀態標籤：和網站表格裡的狀態顯示方式相近，說明文字對得上畫面。 */
.help-status {
    display: inline-block;
    padding: .1rem .5rem;
    border-radius: .35rem;
    background: #eef2f6;
    font-size: .9rem;
}

.help-status.bad {
    background: #fde8e8;
    color: #9b1c1c;
}

.help-faq dt {
    margin-top: 1rem;
    font-weight: 700;
}

.help-faq dd {
    margin-left: 0;
}

@media (max-width: 767.98px) {
    .help-flow {
        flex-direction: column;
        gap: 1.6rem;
    }

    .help-flow > li + li::after {
        top: -1.25rem;
        left: 1.25rem;
        border-inline: .5rem solid transparent;
        border-block: 0;
        border-top: .75rem solid #8c959f;
        transform: none;
    }

    .help-table th[scope="row"] {
        white-space: normal;
    }
}

.help-journey { margin: 1.5rem 0; padding: 1.25rem; background: #f6f9fd; border: 1px solid #dbe5ef; border-radius: 1rem; }
.help-journey h2 { margin-top: 0; font-size: 1.35rem; }
.help-journey-picture { overflow-x: auto; background: white; border-radius: .75rem; }
.help-journey-picture img { display: block; width: 100%; min-width: 560px; max-height: 480px; object-fit: contain; }
.help-journey figcaption { margin-top: .5rem; color: #52606d; font-size: .9rem; }
.help-journey-steps { padding-left: 1.6rem; }
.help-journey-steps li { padding: .35rem 0 .35rem .25rem; line-height: 1.7; }
.help-journey-steps li::marker { font-weight: 700; color: #244b73; }
@media (max-width: 767.98px) { .help-journey { padding: .85rem; } .help-journey-picture img { max-height: none; } }

/* Keep comparison words readable inside the same local-scrolling pattern. */
.help-table { min-width: 42rem; }
.help-table th, .help-table td { min-width: 7rem; overflow-wrap: normal; word-break: normal; }
.help-table th[scope="row"] { min-width: 10rem; }