/* ============================================================
   021_animal_manual.css — 04_dear 동물실험 매뉴얼 (설치류 탭)
   Scope: .manual-content (panel-1만 적용, 다른 탭/페이지 영향 없음)
   Tokens: common.css + components.css 디자인 토큰만 사용 (hex 0건)
   ============================================================ */


/* ===========================================
   3. ol/ul — 줄간격 + 번호/글머리 마커 복원
   common.css가 모든 ol/ul에 list-style:none 적용 → 매뉴얼 페이지에서는 마커 필요
   =========================================== */
.manual-content ol {
    list-style: decimal outside;
    margin: var(--gap-layout-h3-body) 0;
    padding-left: var(--space-8);
    line-height: 1.75;
}

.manual-content ul {
    list-style: disc outside;
    margin: var(--gap-layout-h3-body) 0;
    padding-left: 28px;
    line-height: 1.75;
}

.manual-content ol > li,
.manual-content ul > li {
    margin: var(--gap-card-title-desc) 0;
    padding-left: var(--space-2);
    font-size: var(--fs-list);
    color: var(--color-gray-800);
}

/* ol 번호를 primary 색 + 굵게 */
.manual-content ol > li::marker {
    color: var(--color-primary-700);
    font-weight: var(--fw-bold);
}

/* ===========================================
   4. Nested ul (3depth) — 점선 좌측 보더
   =========================================== */
.manual-content ol ul,
.manual-content ul ul {
    margin: var(--gap-layout-h3-body) 0;
    padding-left: var(--space-6);
}

.manual-content ol ul > li,
.manual-content ul ul > li {
    font-size: var(--fs-small);
    color: var(--color-gray-700);
}

/* ===========================================
   5. Table — table-wrap 간격
   =========================================== */
.manual-content .table-wrap {
    margin: var(--gap-layout-h2-body) 0;
}

/* ===========================================
   통증등급 표 (Appendix A) — 2컬럼 수직 레이아웃
   좌: 카테고리명+설명(th[scope="row"]) / 우: Examples(td)
   베이스: .table.table--label.table--grid
   =========================================== */
.manual-content .manual-pain-table tbody td,
.manual-content .manual-pain-table tbody th {
    vertical-align: top;
}

/* table--label의 width:1% + white-space:nowrap 오버라이드 — 카테고리 설명이 줄바꿈 필요 */
.manual-content .manual-pain-table.table--label tbody th[scope="row"] {
    width: 240px;
    white-space: normal;
}

/* 카테고리 행 내 설명 텍스트 (Category명 아래 요약) */
.manual-content .manual-pain-table__desc {
    margin: var(--gap-form-input-help) 0 0;
    font-size: var(--fs-small);
    font-weight: var(--fw-regular);
    color: var(--color-gray-600);
    line-height: var(--lh-small);
}

/* 셀 내부 보조 단락 — content-block__text(섹션 단위)와 달리 표 셀 컨텍스트 전용 */
.manual-content .manual-pain-table__inline-note {
    margin: var(--gap-layout-h3-body) 0 var(--gap-button-group);
    font-size: var(--fs-small);
    color: var(--color-gray-700);
}

/* 셀 내부 순번 목록 — manual-content의 ol 복원 스타일과 간격 조정 */
.manual-content .manual-pain-table ol.manual-pain-table__numbered {
    margin-top: var(--gap-button-group);
}

/* ===========================================
   컴포넌트 margin 보정
   ol 대체 컴포넌트에 ol과 동일한 간격(gap-layout-h3-body) 적용
   =========================================== */
.manual-content .process-steps,
.manual-content .icon-link-card-grid--1col {
    margin-top: var(--gap-layout-h3-body);
    margin-bottom: var(--gap-layout-h3-body);
}

.manual-content .process-steps__arrow {
    padding: 0;
}


.manual-content .notice-box {
    margin-top: var(--gap-layout-h3-body);
    margin-bottom: var(--gap-layout-h3-body);
}

/* numbered-list ol은 .manual-content ol 규칙으로 이미 간격 적용됨 */

/* ===========================================
   numbered-list 내 레이아웃 조정
   ① __text flex → block: ul list-style outside 클리핑 방지
   ② __item padding 축소: 카드 밀도 조정
   ③ 내부 ul dotted border 스타일
   =========================================== */
.manual-content .numbered-list__text {
    display: block;
}

.manual-content .numbered-list ul {
    list-style: disc outside;
    margin: var(--gap-button-group) 0 0;
    padding-left: var(--space-5);
}

.manual-content .numbered-list ul > li {
    font-size: var(--fs-small);
    color: var(--color-gray-700);
    margin: var(--gap-form-input-help) 0;
    padding-left: var(--space-1);
}

/* ===========================================
   numbered-list — manual-content 내 list-style 복원 취소
   components.css의 numbered-list는 list-style:none 이므로
   위 ol 복원 규칙이 충돌하지 않도록 명시적으로 초기화
   =========================================== */
.manual-content ol.numbered-list {
    list-style: none;
    padding-left: 0;
}

.manual-content ol.numbered-list > li {
    margin: 0;
    padding-left: var(--space-5);
}

.manual-content ol.numbered-list > li::marker {
    content: none;
}