.ead-main { background: #f7f9fc; padding: 0px 0 56px; color: #1f2d3d; }

.ead-doc-header { background: #fff; border: 1px solid #e4e9f1; border-radius: 10px; padding: 18px 20px; }
.ead-doc-header h1 { font-size: 30px; color: #0f2740; }
.ead-doc-header p { margin-top: 8px; color: #5f7184; }
.ead-doc-meta { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.ead-doc-meta span { background: #eef4fb; border: 1px solid #d9e7f7; border-radius: 6px; padding: 4px 10px; font-size: 12px; color: #335271; }

.ead-doc-layout { margin-top: 18px; display: grid; grid-template-columns: 280px 1fr; gap: 16px; align-items: start; }
.ead-sidebar { position: sticky; top: 12px; border-radius: 10px; padding: 14px; background: #fff; border: 1px solid #e3e9f3; }
.ead-sidebar h3 { font-size: 16px; color: #0f2f4f; margin-bottom: 8px; }
.ead-sidebar a { display: block; padding: 9px 10px; border-radius: 6px; color: #4d6277; margin-top: 4px; font-size: 14px; }
.ead-sidebar a:hover { background: #f2f7fd; }
.ead-sidebar a.active { background: #eaf3ff; color: #0d63b7; font-weight: bold; }

.ead-doc-content { border: 1px solid #e3eaf3; border-radius: 10px; background: #fff; padding: 18px; }
.ead-doc-section { display: none; }
.ead-doc-section.active { display: block; animation: eadFade .2s ease; }
.ead-doc-section h2 { font-size: 25px; color: #102e4b; margin-bottom: 8px; }
.ead-doc-section h3 { margin-top: 12px; font-size: 18px; color: #12324f; }
.ead-doc-section h4 { margin-top: 8px; font-size: 16px; color: #204463; }
.ead-doc-section p { color: #546b82; line-height: 1.8; margin-top: 8px; }
.ead-doc-content img { display: block; margin: 12px auto; border: 1px solid #ccc; border-radius: 12px; }

.ead-bullet { margin-top: 10px; padding-left: 20px; }
.ead-bullet li { list-style: disc; margin-top: 6px; color: #445d77; }
.ead-note { margin-top: 12px; background: #f7fbff; border: 1px solid #d9e9f8; border-radius: 6px; padding: 10px; color: #395978; }

.ead-kv-table { margin-top: 12px; border: 1px solid #e1e8f3; border-radius: 8px; overflow: hidden; }
.ead-kv-table > div { display: grid; grid-template-columns: 220px 1fr; border-top: 1px solid #e9eef6; }
.ead-kv-table > div:first-child { border-top: 0; }
.ead-kv-table label { background: #f5f8fc; padding: 10px 12px; color: #1d446a; font-weight: bold; }
.ead-kv-table span { padding: 10px 12px; color: #4f6479; }

.ead-code-wrap { margin-top: 14px; }
.ead-code-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.ead-code-head b { color: #12304f; font-size: 14px; }
.ead-copy { border: 1px solid #cfdced; background: #fff; color: #2f5b86; border-radius: 6px; padding: 4px 10px; cursor: pointer; }
.ead-copy:hover { background: #f3f8ff; }
.ead-code { border-radius: 10px; background: #0c1d32; color: #dce8fb; padding: 14px; overflow: auto; line-height: 1.6; font-size: 12px; }

.ead-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.ead-image-card { border: 1px solid #e2e9f4; border-radius: 8px; background: #fafcff; overflow: hidden; }
.ead-image-card img { width: 100%; height: 190px; object-fit: cover; display: block; background: #edf5ff; }
.ead-image-card p { padding: 10px 12px; margin-top: 0; color: #4f647a; }

@keyframes eadFade {
    from { opacity: .2; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

@media only screen and (max-width: 1280px) {
    .ead-main { padding: 20px 16px 48px; }
}

@media only screen and (max-width: 992px) {
    .ead-doc-layout { grid-template-columns: 1fr; }
    .ead-sidebar { position: static; }
    .ead-grid-2 { grid-template-columns: 1fr; }
}

@media only screen and (max-width: 768px) {
    .ead-doc-content img { width: 100%; }
    .ead-doc-header h1 { font-size: 24px; }
    .ead-doc-section h2 { font-size: 21px; }
    .ead-kv-table > div { grid-template-columns: 1fr; }
}