body .pages-bbs:has(.about-modern) {
    width: calc(100% - 48px);
    max-width: 1400px;
    margin: 28px auto 40px;
    padding: 28px;
    border: 1px solid #e2e8f0;
    border-radius: 22px;
    background: #f6f8fb;
    box-shadow: 0 18px 45px rgba(20, 51, 82, .08);
}

body .pages-bbs:has(.about-modern) > .row { align-items: stretch; }
.about-modern { margin: 0; padding: 0 14px 0 0; }
.about-card { height: 100%; overflow: hidden; border: 1px solid #e2e8f0; border-radius: 18px; background: #fff; box-shadow: 0 8px 24px rgba(20, 51, 82, .06); }
.about-hero { padding: 42px 44px 36px; color: #fff; background: #82aacd; }
.about-eyebrow { margin: 0 0 9px; color: #bcebd9; font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.about-hero h1 { margin: 0 0 15px; color: #fff !important; font-size: clamp(2rem, 3.6vw, 3.1rem); line-height: 1.08; }
.about-intro { max-width: 760px; margin: 0; color: #edfafa; font-size: 1.18rem; line-height: 1.65; }
.about-sections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; padding: 18px 28px 4px; }
.about-sections section { padding: 24px 18px; }
.about-sections h2, .about-community h2 { margin: 0 0 11px; color: #173f62; font-size: 1.22rem; }
.about-sections p, .about-community p { margin: 0 0 10px; color: #4c6074; font-size: 1rem; line-height: 1.7; }
.about-community { margin: 0 44px; padding: 28px 0; border-top: 1px solid #e2e8f0; }
.about-highlight { display: flex; gap: 9px; flex-direction: column; margin: 0 44px 28px; padding: 20px 22px; border-left: 5px solid #28a96b; border-radius: 10px; background: #edf9f2; color: #284f3e; }
.about-highlight strong { color: #176641; font-size: 1.05rem; }
.about-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 0 44px 42px; }
.about-button { display: flex; min-height: 52px; align-items: center; justify-content: center; padding: 13px 18px; border-radius: 9px; color: #fff !important; font-weight: 700; letter-spacing: .035em; text-align: center; text-decoration: none !important; text-transform: uppercase; transition: transform .18s ease, box-shadow .18s ease; }
.about-button:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(20, 51, 82, .18); }
.about-button-primary { background: #219653; }
.about-button-secondary { background: #176f9f; }

body .pages-bbs:has(.about-modern) .col-lg-3 { padding: 0 0 0 14px; }
body .pages-bbs:has(.about-modern) .col-lg-3 > div { height: 100%; margin-top: 0 !important; border-radius: 18px; }

@media (max-width: 991.98px) {
    body .pages-bbs:has(.about-modern) { width: calc(100% - 30px); padding: 20px; }
    .about-modern { padding: 0 0 20px; }
    body .pages-bbs:has(.about-modern) .col-lg-3 { padding: 0; }
}

@media (max-width: 767.98px) {
    body .pages-bbs:has(.about-modern) { width: calc(100% - 20px); margin-top: 16px; padding: 10px; border-radius: 15px; }
    .about-card { border-radius: 13px; }
    .about-hero { padding: 30px 24px; }
    .about-intro { font-size: 1.05rem; }
    .about-sections { grid-template-columns: 1fr; padding: 10px 8px 0; }
    .about-sections section { padding: 19px 16px; }
    .about-community { margin: 0 24px; }
    .about-highlight { margin: 0 24px 24px; }
    .about-actions { grid-template-columns: 1fr; padding: 0 24px 30px; }
}