/* Explain: Styles for inner page layouts and list item elements. */
.page-hero {
    background: var(--primary-color);
    color: #ffffff;
    padding-top: 10rem;
    padding-bottom: 3rem;
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.72);
}

.breadcrumb a {
    color: rgba(255, 255, 255, 0.72);
    transition: color 200ms ease;
}

.breadcrumb a:hover {
    color: #ffffff;
}

.inner-panel {
    border: 1px solid var(--border-color);
    border-radius: 1.5rem;
    background: #ffffff;
    padding: 1.6rem;
    box-shadow: var(--shadow-card);
}

.field-label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-color);
}

/* ── 공지·규정 목록 행 ──
   아이콘 → (분류 태그 + 제목 / 내용) → (작성자 / 날짜)의 자리를
   공지사항과 규칙·규정 목록에서 동일하게 유지합니다. */
.doc-row {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    background: #ffffff;
    padding: 1.1rem 1.25rem;
    transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}

.doc-row:hover {
    border-color: var(--accent-color);
    box-shadow: 0 14px 30px rgba(15, 36, 68, 0.1);
    transform: translateY(-2px);
}

/* 아이콘 — 모든 행에서 같은 크기·같은 위치 */
.doc-row-icon {
    display: inline-flex;
    height: 2.6rem;
    width: 2.6rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 0.85rem;
    background: var(--accent-soft);
    color: var(--accent-color);
    font-size: 1.05rem;
}

/* 본문 — 태그·제목 줄과 내용 줄의 간격을 고정합니다. */
.doc-row-body {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 0.35rem;
}

.doc-row-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.doc-row-title {
    min-width: 0;
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--text-color);
    overflow-wrap: anywhere;
}

.doc-row-desc {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.7;
    color: var(--text-muted);
    overflow-wrap: anywhere;
}

/* 작성자·날짜 — 오른쪽 같은 자리에 정렬 */
.doc-row-meta {
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.2rem;
    padding-top: 0.1rem;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--text-muted);
    text-align: right;
}

.doc-row-meta time {
    font-variant-numeric: tabular-nums;
}

.stage-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.22rem 0.7rem;
    font-size: 0.72rem;
    font-weight: 700;
}

.stage-review {
    background: rgba(107, 114, 128, 0.14);
    color: #4b5563;
}

.stage-progress {
    background: var(--accent-soft);
    color: var(--accent-color);
}

.stage-done {
    background: rgba(16, 122, 87, 0.14);
    color: #0f7a57;
}