/* 변경 사유(2026-11-09, K-478 · 기획 시안 after2): 모든 화면 맨 위 업데이트 알림 띠(app/(common)/components/UpdateNoticeBand.tsx).
   규칙은 전부 <html data-notice-band> 가 있을 때만 걸린다. 이 표시는 <head> 스크립트가 끝 시각(11/10 03:30 KST) 전 ·
   닫지 않은 브라우저 · 렌더 대상(pdf-maker 등)이 아닌 화면에서만 단다(app/(common)/lib/updateNoticeBand.ts).
   그래서 표시가 없으면 이 파일은 아무것도 바꾸지 않는다. 띠가 끝나면 파일째 지운다.

   띠는 화면 맨 위에 고정(z 72 — 헤더 70 · 프로필 71 위, 레이어 모달 ≥101 · 생성 딤 10000 아래)되고,
   띠 높이(--bz-notice-h, 부품이 실제 높이를 재서 넣는다)만큼 ① 본문(body) ② 고정 헤더와 헤더 패널 ③ 헤더 밑에 붙은
   작업 화면 고정 요소를 내린다. ③은 화면마다 top 값이 달라(7rem · 5rem · 5.2em · 9.5em …) top 을 다시 적지 않고
   translate 로 같이 내린다 — translate 는 transform 과 따로 더해져 기존 위치 · 애니메이션을 건드리지 않는다.
   화면 아래에 붙는 요소(모바일 하단 시트 등)는 내리지 않는다(아래 제외 목록). */

.bz_notice_band {
    display: none;
}

:root[data-notice-band] {
    --bz-notice-h: 48px;
}
@media (max-width: 760px) {
    :root[data-notice-band] {
        --bz-notice-h: 44px;
    }
}

/* ---------- 띠(최종 C안 — PC 48px · 휴대폰 44px 한 줄) ---------- */
:root[data-notice-band] .bz_notice_band {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 72;
    box-sizing: border-box;
    height: 48px;
    background: #fff4d6;
    border-bottom: 1px solid #f0d08a;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0;
    text-align: left;
    word-break: keep-all;
}
/* 좌우 여백은 헤더 안쪽 줄과 같게(.n_header_inner 1500px · 0 5rem, ≤1040px 0 2rem) */
:root[data-notice-band] .bz_notice_band .bz_notice_band_in {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    max-width: 1500px;
    height: 100%;
    margin: 0 auto;
    padding: 0 5rem;
}
:root[data-notice-band] .bz_notice_band .bz_notice_band_in > * {
    flex: 0 0 auto;
    letter-spacing: 0;
    white-space: nowrap;
}
:root[data-notice-band] .bz_notice_band .bz_notice_band_chip {
    display: inline-block;
    margin-right: 12px;
    padding: 0 8px;
    border-radius: 4px;
    background: #e8901e;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 22px;
}
:root[data-notice-band] .bz_notice_band .bz_notice_band_title {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #5c3500;
    font-size: 15px;
    font-weight: 700;
    line-height: 22px;
}
/* 글자판 안 조각은 둘레 글자 그대로(전역 span 규칙이 크기 · 높이를 바꾼다) */
:root[data-notice-band] .bz_notice_band .bz_notice_band_pc,
:root[data-notice-band] .bz_notice_band .bz_notice_band_m {
    font: inherit;
    letter-spacing: 0;
    vertical-align: baseline;
    color: inherit;
}
:root[data-notice-band] .bz_notice_band .bz_notice_band_pc {
    display: inline;
}
:root[data-notice-band] .bz_notice_band .bz_notice_band_m {
    display: none;
}
:root[data-notice-band] .bz_notice_band .bz_notice_band_bar {
    display: block;
    width: 1px;
    height: 14px;
    margin: 0 12px;
    background: #d9b56a;
}
:root[data-notice-band] .bz_notice_band .bz_notice_band_sub {
    color: #7a5718;
    font-size: 14px;
    font-weight: 400;
}
:root[data-notice-band] .bz_notice_band .bz_notice_band_more {
    display: inline-block;
    margin-left: 14px;
    /* 변경 사유(2026-11-09, K-496 기획): 단추가 띠 높이를 거의 다 채웠다 — 높이 28px · 글자 13px · 좌우 10px 로(색은 그대로) */
    box-sizing: border-box;
    height: 28px;
    padding: 0 10px;
    border-radius: 6px;
    background: #ffe3a3;
    color: #5c3500;
    font-size: 13px;
    font-weight: 700;
    line-height: 28px;
    text-decoration: none;
}
:root[data-notice-band] .bz_notice_band .bz_notice_band_more:hover {
    background: #ffd47a;
}
/* × — 누르는 자리 40×40, 맨 오른쪽 */
:root[data-notice-band] .bz_notice_band .bz_notice_band_close {
    display: block;
    width: 40px;
    height: 40px;
    margin: 0 -10px 0 auto;
    padding: 0;
    border: 0;
    background: none;
    color: #7a5718;
    font-size: 22px;
    font-weight: 400;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
}
@media (max-width: 1040px) {
    :root[data-notice-band] .bz_notice_band .bz_notice_band_in {
        padding: 0 2rem;
    }
}
/* 휴대폰: 한 줄 44px — 가운데 문구(세로줄 · 작업 중 …)는 빼고, 짧은 제목이 모자라면 끝을 … 로 */
@media (max-width: 760px) {
    :root[data-notice-band] .bz_notice_band {
        height: 44px;
    }
    :root[data-notice-band] .bz_notice_band .bz_notice_band_in {
        padding: 0 0.6rem 0 2rem;
    }
    :root[data-notice-band] .bz_notice_band .bz_notice_band_chip {
        margin-right: 8px;
    }
    :root[data-notice-band] .bz_notice_band .bz_notice_band_title {
        flex: 1 1 auto;
        font-size: 14px;
    }
    :root[data-notice-band] .bz_notice_band .bz_notice_band_pc,
    :root[data-notice-band] .bz_notice_band .bz_notice_band_bar,
    :root[data-notice-band] .bz_notice_band .bz_notice_band_sub {
        display: none;
    }
    :root[data-notice-band] .bz_notice_band .bz_notice_band_m {
        display: inline;
    }
    :root[data-notice-band] .bz_notice_band .bz_notice_band_more {
        margin-left: 8px;
    }
    :root[data-notice-band] .bz_notice_band .bz_notice_band_close {
        margin: 0;
    }
}

/* ---------- ① 본문 ---------- */
:root[data-notice-band] body {
    padding-top: var(--bz-notice-h);
}

/* ---------- ② 고정 헤더와 헤더 패널(값은 bz_header.css 납품값 + 띠 높이) ---------- */
:root[data-notice-band] .nbz_header .n_header {
    top: var(--bz-notice-h);
}
:root[data-notice-band] .nbz_header .n_notify,
:root[data-notice-band] .nbz_header .n_profile {
    top: calc(6.6rem + var(--bz-notice-h));
}
:root[data-notice-band] .nbz_header .n_top .n_top_inner {
    padding-top: calc(9rem + var(--bz-notice-h));
}
@media (max-width: 1300px) {
    :root[data-notice-band] .nbz_header .n_header .n_deam,
    :root[data-notice-band] .nbz_header .n_header .n_gnb {
        top: calc(9rem + var(--bz-notice-h));
    }
}
@media (max-width: 1040px) {
    :root[data-notice-band] .nbz_header .n_header .n_deam,
    :root[data-notice-band] .nbz_header .n_header .n_gnb,
    :root[data-notice-band] .nbz_header .n_notify,
    :root[data-notice-band] .nbz_header .n_profile {
        top: calc(5rem + var(--bz-notice-h));
    }
    :root[data-notice-band] .nbz_header .n_top .n_top_inner {
        padding-top: calc(5rem + var(--bz-notice-h));
    }
}

/* ---------- ③ 헤더 밑에 붙은 작업 화면 고정 요소(생성 · 편집 · 검증 · 표준화) ---------- */
:root[data-notice-band] .bz_gener_ing,
:root[data-notice-band] .bz_gener .bz_pager,
:root[data-notice-band] .bz_gener .bz_pager_toggle,
:root[data-notice-band] .bz_gener .bz_quick,
:root[data-notice-band] .bz_gener .bz_quick_toggle,
:root[data-notice-band] .bz_gener .bz_stop_docu,
:root[data-notice-band] .bz_gener .bz_gener_c.bz_word .bz_editor_tool,
:root[data-notice-band] .bz_gener .bz_editor_tool.bz_tool_mobile,
:root[data-notice-band] [data-standardize-publish] .bz_gener .bz_editor_tool,
:root[data-notice-band] .bz_gener .bz_page_tab,
:root[data-notice-band] .bz_gener .bz_success,
:root[data-notice-band] .bz_gener .bz_forms_check,
:root[data-notice-band] .bz_gener .bz_mobile_tab {
    translate: 0 var(--bz-notice-h);
}
/* 화면 아래에 붙는 것은 내리지 않는다 — 표준화 결과의 빠른편집 토글(top:auto), 모바일 PPT 하단 페이지 띠 · 빠른편집 시트, 접힌 페이지 토글 */
:root[data-notice-band] .std-result .bz_quick_toggle {
    translate: none;
}
@media (max-width: 760px) {
    :root[data-notice-band] .bz_design .bz_gener .bz_pager,
    :root[data-notice-band] .bz_design .bz_gener .bz_quick,
    :root[data-notice-band] .bz_gener .bz_pager_toggle.bz_tgl {
        translate: none;
    }
}