/* page_head.css — 모든 화면이 함께 쓰는 제목줄
 *
 * 마크업은 templates/partials/page_head.html 의 page_head() 매크로가 만든다.
 * base.html 이 모든 화면에 이 파일을 불러오므로, 새 화면(app-v2)과 기존 화면
 * 양쪽에서 같은 모양이 된다. 색은 base.html 의 :root 변수(--primary-blue 등)를
 * 쓰므로 두 화면의 팔레트와 어긋나지 않는다.
 *
 * 한 줄 규칙(2026-09-23 원장 지시): 속한 메뉴·제목·버튼이 한 줄에 온다.
 * 세로 높이를 최대한 줄이는 것이 목적이므로 제목 아래에 설명을 붙이지 않는다.
 * 화면을 쓰는 데 꼭 필요한 안내는 본문에 .page-note 로 둔다.
 *
 * 화면에서 직접 h1~h3 로 제목을 쓰지 말 것 — 여기서만 정한다.
 */

/* base.html 의 <main> 바로 아래, 화면이 쓰는 컨테이너 밖에 그린다.
   그래야 .container / .container-fluid / .row>.col 중 무엇을 쓰든 제목이 늘 같은 자리에 선다.
   style.css 의 전역 `header { background:#3498db; color:#fff; padding:1rem }` 이
   이 <header> 에도 묻으므로 여기서 되돌린다. */
.page-head {
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 0 0 16px;
    padding: 0 0 11px;
    border-bottom: 1px solid #dde6f1;
    background: none;
    background-color: transparent;
    color: #172033;
}

/* 옛 화면(.container)은 좌우 여백이 없어 제목만 가장자리에 붙는다 */
main.container > .page-head {
    padding-left: 0;
    padding-right: 0;
}

.page-head-actions:empty {
    display: none;
}

.page-head-title {
    min-width: 0;
    margin: 0;
    color: #172033;
    font-size: 1.16rem;
    font-weight: 750;
    letter-spacing: -0.02em;
    line-height: 1.3;
}

/* 왼쪽 메뉴에서 속한 묶음. 제목 앞에 붙여 "지금 어디"를 알려 준다. */
.page-head-section {
    margin-right: 8px;
    padding-right: 9px;
    border-right: 1px solid #d7e0ec;
    color: var(--dark-blue, #357ABD);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    vertical-align: 1px;
}

.page-head-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

/* 제목줄 안의 버튼은 크기를 맞춘다 — 화면마다 btn / btn-sm 이 섞여 있었다. */
.page-head-actions .btn {
    padding: 4px 11px;
    font-size: 0.8rem;
}

/* 제목줄에서 내려온 안내문. 화면을 쓰는 데 꼭 필요한 것만 남긴다. */
.page-note {
    margin: -6px 0 14px;
    color: #67748a;
    font-size: 0.82rem;
    line-height: 1.5;
}

@media (max-width: 575.98px) {
    .page-head-actions {
        width: 100%;
    }

    .page-head-actions .btn {
        flex: 1 1 auto;
    }
}

/* ── 카드 제목 상자 ───────────────────────────────────────────────────────
 * 화면마다 card-header 에 bg-primary / bg-dark / bg-info / bg-secondary /
 * bg-success / bg-light / bg-white 가 제각각 붙어 있었고, 어떤 곳은 text-center 라
 * 제목이 가운데로 가 있었다. 색과 정렬은 여기서 한 가지로 정한다.
 *
 * 색은 뜻이 있을 때만 쓴다 — 결과의 성공/실패 같은 것. 장식으로 칠하지 말 것.
 * (.card-header 위에 .is-ok / .is-bad 를 얹는다)
 */
.card > .card-header {
    padding: 11px 16px;
    border-bottom: 1px solid #e8eef6;
    background: #f7fafd;
    color: #172033;
    text-align: left;
}

.card > .card-header > h1,
.card > .card-header > h2,
.card > .card-header > h3,
.card > .card-header > h4,
.card > .card-header > h5,
.card > .card-header > h6 {
    margin: 0;
    color: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-align: left;
}

.card > .card-header.is-ok {
    border-bottom-color: #bfe3cd;
    background: #eef8f2;
    color: #1c6b40;
}

.card > .card-header.is-bad {
    border-bottom-color: #f0c9cd;
    background: #fdf0f1;
    color: #98303b;
}