/* 函数与程序结构专题：topic-need-functions */

.topic-need-functions-story {
    color: var(--article-text-color);
    font-size: 14px;
    line-height: 1.65;
}
.topic-need-functions-story * { box-sizing: border-box; }
.topic-need-functions-story p { margin: 0 0 12px; }
.topic-need-functions-story strong { color: var(--article-heading-color); }
.topic-need-functions-story code, .topic-need-functions-story pre {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.topic-need-functions-section {
    margin-top: 22px;
    scroll-margin-top: 110px;
}
.topic-need-functions-section > h2 {
    display:flex;
    align-items:center;
    gap:14px;
    margin:0 0 8px;
    color:var(--article-heading-color);
    font-size:20px;
    line-height:1.35;
    font-weight:900;
}
.topic-need-functions-number {
    display:inline-flex;
    flex:0 0 38px;
    height:38px;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#0752ff;
    color:#fff;
    font-size:16px;
    font-weight:700;
}
.topic-need-functions-story pre {
    margin:14px 0;
    padding:16px;
    border-radius:14px;
    overflow:auto;
    background:#152033;
    color:#f4f7ff;
    line-height:1.6;
    font-size:12px;
}
.topic-need-functions-story pre code {
    color:inherit;
    white-space:pre;
}
.topic-need-functions-story .cards {
    display:grid;
    gap:10px;
    margin-top:14px;
}
.topic-need-functions-story .cards.two {
    grid-template-columns:repeat(2,minmax(0,1fr));
}
.topic-need-functions-story .cards.three {
    grid-template-columns:repeat(3,minmax(0,1fr));
}
.topic-need-functions-story .cards.four {
    grid-template-columns:repeat(4,minmax(0,1fr));
}
.topic-need-functions-story .cards article {
    padding:14px 10px;
    border:1px solid #e1ebff;
    border-radius:14px;
    background:#f9fbff;
    text-align:center;
}
.topic-need-functions-story .cards h3 {
    margin:0 0 4px;
    color:var(--article-heading-color);
    font-size:13px;
}
.topic-need-functions-story .cards p {
    margin:0;
    color:#617296;
    font-size:10px;
}
.topic-need-functions-story .flow {
    display:grid;
    grid-template-columns:1fr 34px 1fr 34px 1fr;
    gap:7px;
    align-items:center;
    margin-top:14px;
}
.topic-need-functions-story .flow span {
    display:flex;
    min-height:116px;
    align-items:center;
    justify-content:center;
    padding:12px;
    border-radius:14px;
    background:#eef5ff;
    color:#1d3d75;
    font-weight:800;
    text-align:center;
}
.topic-need-functions-story .flow span:nth-of-type(2) { background:#fff6df; }
.topic-need-functions-story .flow span:nth-of-type(3) { background:#eef9f0; }
.topic-need-functions-story .flow b {
    color:#4f82ff;
    font-size:22px;
    text-align:center;
}
.topic-need-functions-story .compare {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    margin-top:14px;
}
.topic-need-functions-story .compare > div {
    padding:15px;
    border-radius:15px;
    background:#eef5ff;
    text-align:center;
}
.topic-need-functions-story .compare > div:nth-child(2) {
    background:#eef9f0;
}
.topic-need-functions-story .compare h3 {
    margin:0 0 5px;
    color:var(--article-heading-color);
    font-size:14px;
}
.topic-need-functions-story .compare p {
    margin:0;
    color:#617296;
    font-size:10px;
}
.topic-need-functions-story .tip, .topic-need-functions-story .warn {
    margin-top:14px;
    padding:14px 16px;
    border-radius:14px;
}
.topic-need-functions-story .tip { background:#eaf5ff; }
.topic-need-functions-story .warn {
    border:1px solid #ffd0dc;
    background:#fff2f6;
}
.topic-need-functions-story .tip h3, .topic-need-functions-story .warn h3 {
    margin:0 0 4px;
    font-size:15px;
}
.topic-need-functions-story .tip h3 { color:#0752ff; }
.topic-need-functions-story .warn h3 { color:#d83265; }
.topic-need-functions-story .state-box {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    margin-top:14px;
}
.topic-need-functions-story .state-box > div {
    padding:14px;
    border-radius:13px;
    background:#f3efff;
    text-align:center;
}
.topic-need-functions-story .state-box strong {
    color:#6049b8;
}
.topic-need-functions-story .stack-visual {
    display:flex;
    width:min(320px,100%);
    flex-direction:column;
    gap:5px;
    margin:16px auto 0;
    padding:14px;
    border-radius:14px;
    background:#f7f8fc;
}
.topic-need-functions-story .stack-visual span {
    padding:12px;
    border-radius:9px;
    background:#fff;
    border:1px solid #dce8ff;
    color:#0752ff;
    font-weight:900;
    text-align:center;
}
.topic-need-functions-story .stack-steps {
    display:grid;
    grid-template-columns:1fr 35px 1fr 35px 1fr;
    gap:7px;
    align-items:center;
    margin-top:14px;
}
.topic-need-functions-story .stack-steps > div {
    min-height:150px;
    padding:13px;
    border-radius:14px;
    background:#f7f8fc;
    text-align:center;
}
.topic-need-functions-story .stack-steps > b {
    color:#4f82ff;
    text-align:center;
}
.topic-need-functions-story .stack-steps p {
    margin:8px 0 0;
    line-height:1.7;
}
.topic-need-functions-story .formula {
    margin-top:14px;
    padding:16px;
    border-radius:14px;
    background:#eef5ff;
    color:#0752ff;
    font-size:16px;
    font-weight:900;
    text-align:center;
}
.topic-need-functions-summary {
    margin-top:22px;
    padding:18px;
    border-radius:16px;
    background:#e9f3ff;
    scroll-margin-top:110px;
}
.topic-need-functions-summary h2 {
    margin:0 0 7px;
    color:#0752ff;
    font-size:19px;
}
.topic-need-functions-summary ul {
    margin:0;
    padding-left:20px;
    line-height:1.75;
}
.topic-need-functions-summary .next {
    margin:10px 0 0;
    padding-top:10px;
    border-top:1px dashed #b8d3f6;
}
.topic-need-functions-pagination {
    display:flex;
    justify-content:space-between;
    gap:18px;
    margin-top:14px;
}
.topic-need-functions-pagination a {
    display:flex;
    align-items:center;
    gap:10px;
    max-width:49%;
    padding:10px 13px;
    border:1px solid #d9e7ff;
    border-radius:12px;
    background:#ffffffb3;
    text-decoration:none;
}
.topic-need-functions-pagination a:last-child { text-align:right; }
.topic-need-functions-pagination strong {
    display:block;
    color:#0752ff;
    font-size:16px;
}
.topic-need-functions-pagination small {
    display:block;
    color:#576b9f;
    font-size:12px;
}

@media (max-width:900px) {
    .topic-need-functions-story .cards.four {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}
@media (max-width:640px) {
    .topic-need-functions-story { font-size:12px; }
    .topic-need-functions-section > h2 {
        gap:9px;
        font-size:16px;
    }
    .topic-need-functions-number {
        flex-basis:31px;
        height:31px;
        font-size:14px;
    }
    .topic-need-functions-story .cards.two,
    .topic-need-functions-story .cards.three,
    .topic-need-functions-story .cards.four,
    .topic-need-functions-story .compare,
    .topic-need-functions-story .flow,
    .topic-need-functions-story .stack-steps {
        grid-template-columns:minmax(0,1fr);
    }
    .topic-need-functions-story .flow b,
    .topic-need-functions-story .stack-steps > b {
        transform:rotate(90deg);
    }
    .topic-need-functions-pagination { gap:9px; }
    .topic-need-functions-pagination a {
        flex:1;
        min-width:0;
        padding:8px 6px;
    }
    .topic-need-functions-pagination strong { font-size:13px; }
    .topic-need-functions-pagination small {
        font-size:10px;
        line-height:1.35;
    }
}