/* 使用說明（/docs/tenant・/docs/line-setup・/docs/customer）共通 モバイルファースト
   17Couple の Seller マニュアル（service リポジトリ static/css/manual.css）と同じ書き方 */
:root {
    --mn-text: #1f2937;
    --mn-muted: #64748b;
    --mn-border: #e2e8f0;
    --mn-bg: #f4f6f8;
    --mn-card: #fff;
    --mn-primary: #2563eb;
    --mn-green: #06c755;
    --mn-warn-bg: #fff7ed;
    --mn-warn-border: #fdba74;
    --mn-note-bg: #eff6ff;
    --mn-note-border: #93c5fd;
    --mn-mark: #e11d48;
    --mn-touch: 48px;
}

.mn-page {
    max-width: 960px;
    margin: 0 auto;
    padding: 16px;
    color: var(--mn-text);
    font-size: 16px;
    line-height: 1.75;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
}

.mn-page h1 { margin: 8px 0 4px; font-size: 1.5rem; font-weight: 800; }

.mn-lead { margin: 0 0 16px; color: var(--mn-muted); }

.mn-page h2 {
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--mn-border);
    font-size: 1.3rem;
    font-weight: 800;
}

.mn-page h3 { margin: 24px 0 8px; font-size: 1.1rem; font-weight: 700; }

.mn-section {
    margin: 0 0 20px;
    padding: 20px 16px;
    background: var(--mn-card);
    border: 1px solid var(--mn-border);
    border-radius: 16px;
    scroll-margin-top: 76px;
}

/* 目次 */
.mn-toc {
    margin: 0 0 20px;
    padding: 16px;
    background: var(--mn-card);
    border: 1px solid var(--mn-border);
    border-radius: 16px;
}

.mn-toc h2 { border: none; padding: 0; font-size: 1rem; }

.mn-toc ol {
    display: grid;
    gap: 4px;
    margin: 0;
    padding-left: 1.4em;
}

.mn-toc a {
    display: inline-block;
    min-height: 32px;
    color: var(--mn-primary);
    text-decoration: none;
}

.mn-toc a:hover,
.mn-toc a:focus-visible { text-decoration: underline; }

/* 手順 */
.mn-steps { margin: 8px 0; padding-left: 1.6em; }

.mn-steps > li { margin-bottom: 8px; }

.mn-steps--marked { padding-left: 0; list-style: none; }

.mn-steps > li::marker { font-weight: 700; color: var(--mn-primary); }

/* 図の番号（スクリーンショットの赤い丸と対応） */
.mn-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5em;
    height: 1.5em;
    margin-right: 4px;
    border-radius: 50%;
    background: var(--mn-mark);
    color: #fff;
    font-size: 0.85em;
    font-weight: 700;
    vertical-align: 0.1em;
}

.mn-figure { margin: 12px 0 16px; }

.mn-figure img {
    display: block;
    max-width: 100%;
    height: auto;
    border: 1px solid var(--mn-border);
    border-radius: 12px;
    background: #fff;
}

.mn-figure--narrow img { max-width: min(100%, 390px); }

.mn-figure a { display: block; }

.mn-figure figcaption { margin-top: 6px; color: var(--mn-muted); font-size: 0.9rem; }

/* 注意・補足 */
.mn-note,
.mn-warn {
    margin: 12px 0;
    padding: 12px 14px;
    border-radius: 12px;
    border-left: 4px solid;
}

.mn-note { background: var(--mn-note-bg); border-color: var(--mn-note-border); }

.mn-warn { background: var(--mn-warn-bg); border-color: var(--mn-warn-border); }

.mn-note p,
.mn-warn p { margin: 0; }

.mn-note ul,
.mn-warn ul { margin: 4px 0 0; padding-left: 1.2em; }

/* 表（モバイルでは横スクロール） */
.mn-table-wrap { overflow-x: auto; margin: 8px 0 16px; }

.mn-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }

.mn-table th,
.mn-table td {
    padding: 8px 10px;
    border: 1px solid var(--mn-border);
    text-align: left;
    vertical-align: top;
}

.mn-table th { background: var(--mn-bg); }

/* 流れ図（縦に並ぶカード。タブレット以上は横） */
.mn-flow {
    display: grid;
    gap: 10px;
    margin: 12px 0;
    padding: 0;
    list-style: none;
    counter-reset: flow;
}

.mn-flow > li {
    position: relative;
    padding: 12px 14px 12px 52px;
    background: var(--mn-bg);
    border: 1px solid var(--mn-border);
    border-radius: 12px;
    counter-increment: flow;
}

.mn-flow > li::before {
    content: counter(flow);
    position: absolute;
    left: 12px;
    top: 12px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--mn-primary);
    color: #fff;
    font-weight: 700;
    line-height: 28px;
    text-align: center;
}

.mn-flow strong { display: block; }

.mn-flow span { color: var(--mn-muted); font-size: 0.92rem; }

.mn-tag {
    display: inline-block;
    padding: 0 8px;
    border-radius: 999px;
    background: #e0e7ff;
    color: #3730a3;
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
}

.mn-tag--green { background: #dcfce7; color: #166534; }

.mn-tag--orange { background: #ffedd5; color: #9a3412; }

.mn-page code {
    padding: 1px 6px;
    border-radius: 6px;
    background: var(--mn-bg);
    color: #be185d;
    font-size: 0.92em;
    overflow-wrap: anywhere;
}

.mn-page details {
    margin: 8px 0;
    padding: 10px 14px;
    border: 1px solid var(--mn-border);
    border-radius: 12px;
}

.mn-page summary { min-height: 32px; font-weight: 700; cursor: pointer; }

.mn-updated { color: var(--mn-muted); font-size: 0.9rem; text-align: right; }

/* 上部の帯（3 冊の使用說明を行き来する） */
.mn-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--mn-green);
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.mn-header__inner {
    max-width: 960px;
    margin: 0 auto;
    padding: 8px 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
}

.mn-header__brand {
    color: #fff;
    font-weight: 800;
    text-decoration: none;
    margin-right: auto;
}

.mn-header__nav { display: flex; gap: 4px; overflow-x: auto; }

.mn-header__nav a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 12px;
    border-radius: 999px;
    color: #fff;
    font-size: 0.95rem;
    text-decoration: none;
    white-space: nowrap;
}

.mn-header__nav a[aria-current="page"] { background: rgba(255, 255, 255, 0.25); font-weight: 700; }

/* 4 冊並ぶと 375px 幅で「常見問題」がはみ出すため、狭い画面では間隔を詰める */
@media (max-width: 400px) { .mn-header__nav a { padding: 0 8px; } }

/* 電腦畫面（LINE Developers など）の圖は幅いっぱいに */
.mn-figure--wide img { width: 100%; }

/* 「どの値をどこに入れるか」の表で、値の名前を目立たせる */
.mn-key { font-weight: 700; white-space: nowrap; }

.mn-en { color: var(--mn-muted); font-size: 0.9em; }

@media (min-width: 768px) {
    .mn-page { padding: 24px; }

    .mn-section { padding: 24px; }

    .mn-toc ol { grid-template-columns: 1fr 1fr; column-gap: 24px; }

    .mn-cols {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        align-items: start;
    }
}