/* BLUE FORM · 서식 작성 (사직서)
   시안: "사직서 서식 리뉴얼.dc.html"
   모든 규칙은 .bf-page 안으로 스코프해 styles.css 레거시와 충돌하지 않게 한다. */

.bf-page {
    --bf-accent: #5b4bec;
    --bf-accent-strong: #4436d6;
    --bf-accent-tint: #eeecfd;
    /* 목록 카드·A4 축소 그림용 액센트 혼합 단계 (30% / 26% / 34% + 흰색) */
    --bf-accent-line: #cec9f9;
    --bf-accent-faint: #d4d0fa;
    --bf-accent-rule: #c7c2f9;
    --bf-ink: #16171d;
    --bf-ink-soft: #1c1e29;
    --bf-text: #2b2e3c;
    --bf-muted: #5c6072;
    --bf-muted-2: #7a7e90;
    --bf-muted-3: #8a8d9c;
    --bf-label: #545869;
    --bf-bg: #f3f4f9;
    --bf-surface: #ffffff;
    --bf-field: #fbfbfe;
    --bf-desk: #e9ebf3;
    --bf-line: #e7e9f2;
    --bf-line-input: #e2e4ef;
    --bf-line-soft: #eef0f7;
    --bf-chip: #f4f5fa;
    --bf-card-shadow: 0 1px 2px rgba(20, 22, 40, .04), 0 12px 32px -20px rgba(20, 22, 40, .22);
    background: var(--bf-bg);
    color: var(--bf-ink);
    -webkit-font-smoothing: antialiased;
}

.bf-page main {
    display: block;
}

.bf-shell {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 28px;
}

/* ── 히어로 ───────────────────────────────────────────── */
.bf-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    padding: 64px 0 34px;
}

.bf-hero-copy {
    flex: 1 1 560px;
    max-width: 780px;
    min-width: 0;
}

.bf-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 28px;
    padding: 0 12px;
    border-radius: 99px;
    background: var(--bf-accent-tint);
    color: var(--bf-accent);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .08em;
}

.bf-page .bf-hero h1 {
    margin: 18px 0 0;
    font-size: clamp(32px, 4.4vw, 52px);
    line-height: 1.14;
    letter-spacing: -.035em;
    font-weight: 800;
    color: var(--bf-ink);
    text-wrap: balance;
}

.bf-hero-lead {
    margin: 20px 0 0;
    font-size: 16px;
    line-height: 1.7;
    color: var(--bf-muted);
    text-wrap: pretty;
}

.bf-hero-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}

.bf-hero-chips li {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 14px;
    border: 1px solid #e4e6f0;
    border-radius: 99px;
    background: var(--bf-surface);
    font-size: 12.5px;
    font-weight: 600;
    color: #4d5060;
}

.bf-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 340px;
    flex: 0 0 340px;
}

.bf-steps li {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 82px;
    padding: 16px 20px;
    border-radius: 14px;
    background: var(--bf-surface);
    border: 1px solid var(--bf-line);
    box-shadow: 0 3px 12px rgba(20, 22, 40, .025);
}

.bf-steps li:last-child {
    background: linear-gradient(135deg, #5b46ed 0%, #6240f1 100%);
    border-color: transparent;
    box-shadow: 0 10px 24px -15px rgba(79, 55, 223, .75);
}

.bf-steps b {
    flex: 0 0 20px;
    font-size: 11px;
    font-weight: 800;
    color: var(--bf-accent);
    letter-spacing: .06em;
}

.bf-steps span {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 5px;
}

.bf-steps strong {
    font-size: 15px;
    line-height: 1.25;
    font-weight: 800;
    color: var(--bf-ink-soft);
}

.bf-steps small {
    font-size: 12px;
    line-height: 1.4;
    font-weight: 500;
    color: var(--bf-muted-2);
}

.bf-steps li:last-child b,
.bf-steps li:last-child strong {
    color: #fff;
}

.bf-steps li:last-child small {
    color: rgba(255, 255, 255, .72);
}

/* ── 작업 영역 ─────────────────────────────────────────── */
.bf-workspace {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-start;
    padding-bottom: 96px;
}

.bf-editor {
    flex: 1 1 380px;
    max-width: 440px;
    min-width: 0;
    border-radius: 18px;
    background: var(--bf-surface);
    border: 1px solid var(--bf-line);
    box-shadow: var(--bf-card-shadow);
    overflow: hidden;
}

.bf-editor-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 24px 18px;
    border-bottom: 1px solid var(--bf-line-soft);
}

.bf-page .bf-editor-head h2 {
    margin: 0;
    font-size: 16.5px;
    font-weight: 800;
    letter-spacing: -.02em;
}

.bf-editor-head p {
    margin: 6px 0 0;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--bf-muted-2);
}

.bf-editor-head-actions {
    display: flex;
    gap: 6px;
    flex: none;
}

.bf-editor-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 26px;
}

/* ── 임시저장 안내 띠 ──────────────────────────────────── */
.bf-page .bf-editor-head-actions .bf-btn[data-action="draft-save"] {
    border-color: var(--bf-accent);
    color: var(--bf-accent);
}

.bf-page .bf-editor-head-actions .bf-btn[data-action="draft-save"]:hover {
    background: var(--bf-accent);
    color: #fff;
}

.bf-draft {
    padding: 12px 24px 14px;
    background: #f6f5ff;
    border-bottom: 1px solid var(--bf-line-soft);
}

.bf-draft-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.bf-draft-state {
    font-size: 12px;
    line-height: 1.5;
    font-weight: 700;
    color: #4a3fb8;
}

.bf-draft-actions {
    display: flex;
    gap: 6px;
    flex: none;
}

/* display 를 준 요소는 hidden 속성만으로 사라지지 않는다 */
.bf-draft-actions[hidden] {
    display: none;
}

.bf-page .bf-draft-note {
    margin: 7px 0 0;
    font-size: 11.5px;
    line-height: 1.65;
    color: var(--bf-muted-3);
}

.bf-page .bf-draft-note b {
    font-weight: 700;
    color: var(--bf-muted-2);
}

.bf-legend {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 14px;
}

.bf-legend b {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .1em;
    color: var(--bf-accent);
}

.bf-legend span {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: -.01em;
}

.bf-legend i {
    flex: 1;
    height: 1px;
    background: var(--bf-line-soft);
}

.bf-field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.bf-field {
    display: block;
    min-width: 0;
}

.bf-field--wide {
    grid-column: span 2;
}

.bf-field > span {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--bf-label);
    margin-bottom: 6px;
}

.bf-page .bf-field input,
.bf-page .bf-field textarea {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid var(--bf-line-input);
    border-radius: 10px;
    background: var(--bf-field);
    color: var(--bf-ink);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
    outline: none;
    transition: border-color .12s, box-shadow .12s, background-color .12s;
}

.bf-page .bf-field textarea {
    min-height: 96px;
    line-height: 1.6;
    resize: vertical;
}

.bf-page .bf-field input:focus,
.bf-page .bf-field textarea:focus {
    border-color: var(--bf-accent);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(91, 75, 236, .16);
}

.bf-page .bf-field ::placeholder {
    color: #a8abbb;
}

/* ── 버튼 ─────────────────────────────────────────────── */
.bf-page .bf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid transparent;
    background: transparent;
    font-family: inherit;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color .14s, border-color .14s, color .14s;
}

.bf-page .bf-btn--mini {
    height: 30px;
    padding: 0 11px;
    border-color: var(--bf-line-input);
    background: #fff;
    border-radius: 8px;
    font-size: 12px;
    color: #4d5060;
}

.bf-page .bf-btn--mini:hover {
    border-color: var(--bf-accent);
    color: var(--bf-accent);
}

.bf-page .bf-btn--quiet {
    height: 30px;
    padding: 0 11px;
    background: var(--bf-chip);
    border-radius: 8px;
    font-size: 12px;
    color: var(--bf-muted-2);
}

.bf-page .bf-btn--quiet:hover {
    background: #eceef6;
    color: var(--bf-text);
}

.bf-page .bf-btn--primary {
    width: 100%;
    height: 48px;
    border-radius: 12px;
    background: var(--bf-accent);
    color: #fff;
    font-size: 14.5px;
    font-weight: 800;
    letter-spacing: -.01em;
    box-shadow: 0 10px 24px -12px rgba(91, 75, 236, .7);
}

.bf-page .bf-btn--primary:hover {
    background: var(--bf-accent-strong);
    color: #fff;
}

.bf-page .bf-btn--secondary {
    height: 42px;
    border-color: var(--bf-line-input);
    background: #fff;
    border-radius: 11px;
    font-size: 13px;
    color: var(--bf-text);
}

.bf-page .bf-btn--secondary:hover {
    border-color: var(--bf-accent);
    color: var(--bf-accent);
}

.bf-page .bf-btn--tiny {
    height: 28px;
    padding: 0 10px;
    border-color: var(--bf-line-input);
    background: #fff;
    border-radius: 8px;
    font-size: 11.5px;
    color: var(--bf-muted-2);
}

.bf-page .bf-btn--tiny:hover {
    border-color: var(--bf-accent);
    color: var(--bf-accent);
}

.bf-page .bf-btn[disabled] {
    opacity: .55;
    cursor: progress;
}

/* ── 서명 · 도장 ──────────────────────────────────────── */
.bf-sign-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: var(--bf-chip);
    border-radius: 11px;
    margin-bottom: 14px;
}

.bf-page .bf-sign-tab {
    flex: 1;
    height: 34px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--bf-muted-2);
    cursor: pointer;
    transition: background-color .14s, color .14s, box-shadow .14s;
}

.bf-page .bf-sign-tab.is-active {
    background: #fff;
    color: var(--bf-ink-soft);
    box-shadow: 0 1px 2px rgba(20, 22, 40, .12);
}

.bf-sign-canvas-wrap {
    border: 1px solid var(--bf-line-input);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}

.bf-sign-canvas {
    display: block;
    width: 100%;
    height: 130px;
    touch-action: none;
    cursor: crosshair;
}

.bf-sign-tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 9px;
}

.bf-sign-hint {
    margin: 0;
    font-size: 11.5px;
    line-height: 1.6;
    color: var(--bf-muted-3);
}

.bf-sign-colors {
    display: flex;
    gap: 6px;
}

.bf-page .bf-swatch {
    width: 24px;
    height: 24px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 50%;
    background: var(--bf-swatch);
    cursor: pointer;
    box-shadow: 0 0 0 1px var(--bf-line-input);
}

.bf-page .bf-swatch.is-active {
    border-color: #fff;
    box-shadow: 0 0 0 2px var(--bf-accent);
}

.bf-upload {
    display: block;
    border: 1.5px dashed #d8dbe9;
    border-radius: 12px;
    background: var(--bf-field);
    padding: 18px 16px;
    text-align: center;
    cursor: pointer;
}

.bf-upload b {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--bf-accent);
}

.bf-upload span {
    display: block;
    font-size: 11.5px;
    color: var(--bf-muted-3);
    margin-top: 5px;
}

.bf-upload input {
    display: block;
    width: auto;
    margin: 12px auto 0;
    font-size: 11.5px;
}

.bf-stamp-view {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 130px;
    margin-top: 14px;
    padding: 10px;
    border: 1px solid var(--bf-line-input);
    border-radius: 12px;
    background-color: #fff;
    background-image:
        linear-gradient(45deg, #f1f2f7 25%, transparent 25%, transparent 75%, #f1f2f7 75%),
        linear-gradient(45deg, #f1f2f7 25%, transparent 25%, transparent 75%, #f1f2f7 75%);
    background-size: 16px 16px;
    background-position: 0 0, 8px 8px;
}

.bf-stamp-empty {
    margin: 0;
    font-size: 11.5px;
    line-height: 1.6;
    color: var(--bf-muted-3);
    text-align: center;
}

.bf-page .bf-stamp-preview {
    display: block;
    max-height: 104px;
    max-width: 70%;
    object-fit: contain;
}

.bf-stamp-controls {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 14px;
}

.bf-stamp-controls > span {
    font-size: 12px;
    font-weight: 700;
    color: var(--bf-label);
    flex: none;
}

.bf-page .bf-stamp-controls input[type="range"] {
    width: 100%;
    min-width: 0;
    accent-color: var(--bf-accent);
}

/* 슬라이더가 width:100% 라 버튼이 눌려 찌그러진다 */
.bf-page .bf-stamp-controls .bf-btn {
    flex: none;
    white-space: nowrap;
}

/* ── 하단 고정 액션 ────────────────────────────────────── */
.bf-actions {
    position: sticky;
    bottom: 0;
    padding: 16px 24px 20px;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--bf-line-soft);
}

.bf-actions-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 8px;
}

.bf-print-copies {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--bf-muted-2);
}

.bf-profile-tools {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid var(--bf-line);
    border-radius: 10px;
    background: var(--bf-chip);
}

.bf-profile-tools > span {
    margin-right: auto;
    font-size: 11.5px;
    color: var(--bf-muted-2);
}

.bf-status {
    min-height: 17px;
    margin: 10px 0 0;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--bf-muted-3);
    text-align: center;
}

.bf-status[data-tone="error"] {
    color: #c02828;
}

.bf-status[data-tone="done"] {
    color: #1d7a4c;
}

/* ── 미리보기 ─────────────────────────────────────────── */
.bf-preview {
    position: sticky;
    top: 96px;
    flex: 2 1 520px;
    min-width: 0;
}

.bf-preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 12px;
}

.bf-preview-title {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
}

.bf-page .bf-preview-title h2 {
    margin: 0;
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: -.01em;
}

.bf-preview-title span {
    font-size: 11.5px;
    color: var(--bf-muted-3);
}

.bf-preview-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.bf-font-select {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--bf-muted-2);
}

.bf-font-select select,
.bf-print-copies select {
    height: 32px;
    padding: 0 28px 0 10px;
    border: 1px solid var(--bf-line);
    border-radius: 8px;
    background: #fff;
    font: inherit;
    color: var(--bf-ink-soft);
}

.bf-zoom {
    display: flex;
    gap: 3px;
    padding: 3px;
    background: var(--bf-desk);
    border-radius: 9px;
    flex: none;
}

.bf-page .bf-zoom button {
    height: 26px;
    padding: 0 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--bf-muted-2);
    cursor: pointer;
    transition: background-color .14s, color .14s;
}

.bf-page .bf-zoom button.is-active {
    background: #fff;
    color: var(--bf-ink-soft);
}

.bf-desk {
    border-radius: 18px;
    border: 1px solid var(--bf-line);
    background: var(--bf-desk);
    padding: 22px;
    overflow: auto;
}

.bf-paper-scale {
    margin: 0 auto;
    overflow: hidden;
}

.bf-paper-inner {
    transform-origin: top left;
}

.bf-preview-note {
    margin: 12px 2px 0;
    font-size: 11.5px;
    color: var(--bf-muted-3);
}

/* ── 종이 (A4) ────────────────────────────────────────────
   2026-08-11: 사직서에서 먼저 만든 따뜻한 서식 톤을 공용 종이로 올렸다.
   크림 바탕 · 굵은 가로선 두 줄로 감싼 표(세로선은 좌우 묶음 사이에만) ·
   밑줄 노트형 내용 상자 · 종이 전체를 나눔고딕 한 벌로 짠다. */
.bf-paper {
    /* 종이 글꼴은 여기 한 곳에서만 정한다. 나눔명조는 계약서·증명서를 판결문처럼
       보이게 하고, 내려받는 워드(맑은 고딕)와도 어긋나서 고딕으로 통일했다.
       Batang 계열로 되돌리지 말 것. */
    --bfp-font: 'Nanum Gothic', 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;

    /* 종이 바탕은 흰색을 유지한다. 크림빛을 넣으면 화면에서도 인쇄물에서도
       누렇게 보이고, 흰 종이에 출력했을 때 미리보기와 어긋난다. */
    --bfp-bg: #ffffff;
    --bfp-ink: #1c1c1e;
    --bfp-ink-strong: #141416;
    --bfp-rule: #26262a;
    --bfp-line: #e3e3e6;
    --bfp-line-soft: #eeeef1;
    --bfp-label-bg: #f4f4f6;
    --bfp-label: #46464b;
    --bfp-muted: #64646a;
    --bfp-faint: #9a9aa1;
    --bfp-box: #d7d7db;
    --bfp-field: #ffffff;

    width: 210mm;
    height: 297mm;
    position: relative;
    padding: 20mm 20mm 17mm;
    box-sizing: border-box;
    background: var(--bfp-bg);
    box-shadow: 0 2px 4px rgba(20, 22, 40, .06), 0 18px 46px -22px rgba(20, 22, 40, .4);
    font-family: var(--bfp-font);
    font-size: 13px;
    color: var(--bfp-ink);
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
}

.bf-page-break {
    position: absolute;
    z-index: 10;
    left: 0;
    width: 100%;
    height: 0;
    border-top: 2px dashed #7668e8;
    color: #5b4bec;
    font-family: 'Pretendard Variable', Pretendard, sans-serif;
    font-size: 10px;
    font-weight: 700;
    line-height: 20px;
    text-align: right;
    pointer-events: none;
}

.bf-page-break::before {
    content: "A4 페이지 경계";
    padding: 2px 6px;
    background: #fff;
}

.bf-print-copy {
    display: none;
}

.bf-doc-head {
    text-align: center;
    padding-bottom: 8px;
}

.bf-doc-title {
    margin: 0;
    font-family: var(--bfp-font);
    font-size: 34px;
    font-weight: 800;
    letter-spacing: .34em;
    text-indent: .34em;
    color: var(--bfp-ink-strong);
}

/* 영문 부제 양옆의 가는 선은 마크업 없이 가상 요소로 긋는다 */
.bf-doc-sub {
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 360px;
    margin: 14px auto 0;
    font-size: 9.5px;
    letter-spacing: .3em;
    color: #8a8a90;
    white-space: nowrap;
}

.bf-doc-sub::before,
.bf-doc-sub::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, rgba(0, 0, 0, 0), #cdcdd3);
}

.bf-doc-sub::after {
    background: linear-gradient(to left, rgba(0, 0, 0, 0), #cdcdd3);
}

.bf-doc-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-top: 1.6px solid var(--bfp-rule);
    border-bottom: 1.6px solid var(--bfp-rule);
    margin-top: 24px;
    font-size: 13px;
    table-layout: fixed;
}

/* 한글은 어디서든 끊기므로 break-all 은 이득이 없고, 대신 날짜·주소의
   숫자 한가운데가 잘린다("테헤란로 1 / 23, 4층"). 어절 단위로 끊고
   칸을 넘기는 긴 토큰만 강제로 자른다. */
.bf-doc-table th,
.bf-doc-table td {
    border-bottom: 1px solid var(--bfp-line);
    vertical-align: middle;
    word-break: keep-all;
    overflow-wrap: anywhere;
}

/* 첫 행에 colspan 이 있으면 table-layout:fixed 가 남은 폭을 되돌려 나눠서
   항목칸이 45% 까지 벌어진다. 병합 칸의 폭 지정을 풀어 준다. */
.bf-doc-table td[colspan] {
    width: auto;
}

/* 값 칸 다음에 다시 항목 칸이 오는 자리 = 좌우 묶음의 경계 */
.bf-doc-table td + th {
    border-left: 1px solid var(--bfp-line);
}

.bf-doc-table tr:last-child > th,
.bf-doc-table tr:last-child > td {
    border-bottom: 0;
}

.bf-doc-table th {
    width: 22%;
    background: var(--bfp-label-bg);
    padding: 9px 14px;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .14em;
    color: var(--bfp-label);
    text-align: left;
}

.bf-doc-table td {
    width: 28%;
    padding: 9px 14px;
    text-align: left;
}

.bf-doc-label {
    margin: 22px 0 0;
    font-family: var(--bfp-font);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--bfp-ink-strong);
}

/* 밑줄 노트: 줄 간격(line-height)과 배경 줄무늬 주기를 같은 값으로 맞춘다 */
.bf-doc-reason {
    margin-top: 10px;
    min-height: 150px;
    padding: 7px 14px;
    border: 1px solid var(--bfp-box);
    border-radius: 2px;
    background-color: var(--bfp-field);
    background-image: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 25px, var(--bfp-line-soft) 25px, var(--bfp-line-soft) 26px);
    background-position: 0 8px;
    font-size: 13px;
    line-height: 26px;
    white-space: pre-wrap;
    word-break: keep-all;
    overflow-wrap: anywhere;
}

.bf-doc-sentence {
    margin: 30px 0 0;
    text-align: center;
    font-family: var(--bfp-font);
    font-size: 13.5px;
    line-height: 1.8;
    letter-spacing: .02em;
    color: #26262a;
}

.bf-doc-date {
    margin: 26px 0 0;
    text-align: center;
    font-size: 12.5px;
    letter-spacing: .22em;
    color: var(--bfp-muted);
}

.bf-doc-sign {
    margin: 26px 0 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 12px;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: .06em;
    color: var(--bfp-label);
}

.bf-doc-signslot {
    position: relative;
    display: inline-flex;
    align-items: flex-end;
    justify-content: center;
    gap: 8px;
    min-width: 170px;
    height: 30px;
    padding: 0 6px 2px;
    border-bottom: 1px solid var(--bfp-rule);
    font-size: 13.5px;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--bfp-ink);
}

/* styles.css 가 img 를 block 으로 만들어 서명이 다음 줄로 떨어지는 것을 막는다 */
.bf-page .bf-doc-sign-image {
    display: inline-block;
    max-height: 40px;
    max-width: 140px;
    object-fit: contain;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
}

/* 맺음 서명란만 이미지를 밑줄 위에 겹쳐 올린다(칸 높이가 30px 뿐이라) */
.bf-page .bf-doc-sign > .bf-doc-signslot .bf-doc-sign-image {
    position: absolute;
    left: 50%;
    bottom: 1px;
    transform: translateX(-50%);
    max-height: 46px;
    max-width: 170px;
}

.bf-doc-signnote {
    font-size: 10px;
    letter-spacing: .1em;
    color: var(--bfp-faint);
}

/* 수신처 위의 짧은 구분선도 마크업 없이 */
.bf-doc-to {
    margin: 34px 0 0;
    text-align: center;
    font-family: var(--bfp-font);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .18em;
    color: var(--bfp-ink-strong);
}

.bf-doc-to::before {
    content: "";
    display: block;
    width: 46px;
    height: 1px;
    margin: 0 auto 22px;
    background: var(--bfp-box);
}

/* ── 빵부스러기 ───────────────────────────────────────── */
.bf-crumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    padding: 22px 0 0;
    font-size: 12px;
    color: var(--bf-muted-3);
}

.bf-page .bf-crumb a {
    color: var(--bf-muted-2);
    text-decoration: none;
}

.bf-page .bf-crumb a:hover {
    color: var(--bf-accent);
    text-decoration: underline;
}

.bf-crumb strong {
    color: var(--bf-text);
    font-weight: 700;
}

/* ── 본문(검색용 설명) ────────────────────────────────── */
.bf-article {
    display: flex;
    flex-wrap: wrap;
    gap: 56px;
    align-items: flex-start;
    margin-top: 80px;
    padding-top: 44px;
    border-top: 1px solid #e2e5f0;
}

.bf-article-main {
    order: 1;
    flex: 3 1 560px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 66px;
}

.bf-article-side {
    order: 2;
    flex: 1 1 250px;
    max-width: 290px;
    min-width: 0;
    position: sticky;
    top: 96px;
}

.bf-block {
    padding: 0;
}

.bf-page .bf-block h2 {
    margin: 0;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--bf-ink);
}

/* 헤딩 아래 짧은 강조 막대 */
.bf-block h2 + .bf-bar {
    display: block;
    width: 34px;
    height: 3px;
    border-radius: 2px;
    background: var(--bf-accent);
    margin: 14px 0 20px;
}

.bf-page .bf-block h3 {
    margin: 0;
    font-size: 14.5px;
    font-weight: 800;
    letter-spacing: -.015em;
}

.bf-block p {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.85;
    color: #4a4e60;
    text-wrap: pretty;
}

.bf-block p + p {
    margin-top: 16px;
}

.bf-block-lead {
    margin-bottom: 22px !important;
}

.bf-toc {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.bf-toc-group {
    padding: 20px 22px;
    border: 1px solid var(--bf-line);
    border-radius: 14px;
    background: var(--bf-surface);
}

.bf-page .bf-toc-group h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 800;
}

.bf-toc-group h3 b {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background: var(--bf-accent-tint);
    color: var(--bf-accent);
    font-size: 10.5px;
    font-weight: 800;
}

.bf-toc-group ul {
    margin: 14px 0 0;
    padding: 0 0 0 17px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bf-toc-group li {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--bf-muted);
}

.bf-audience {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 16px;
}

.bf-audience-item {
    padding: 20px 22px;
    border: 1px solid var(--bf-line);
    border-radius: 14px;
    background: var(--bf-surface);
}

.bf-page .bf-audience-item h3 {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -.01em;
}

.bf-audience-item p {
    margin: 10px 0 0;
    font-size: 13.5px;
    line-height: 1.7;
    color: #6b6f80;
}

/* 한 덩어리로 이어진 목록 — 칸 사이는 1px 배경이 비쳐 실선이 된다 */
.bf-tips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    border: 1px solid var(--bf-line);
    border-radius: 14px;
    overflow: hidden;
    background: var(--bf-line);
}

.bf-tips li {
    display: flex;
    gap: 14px;
    align-items: baseline;
    background: var(--bf-surface);
    padding: 18px 22px;
    font-size: 14.5px;
    line-height: 1.7;
    color: #3f4356;
}

.bf-tips li b {
    flex: none;
    font-size: 11.5px;
    font-weight: 800;
    color: var(--bf-accent);
    letter-spacing: .06em;
}

.bf-faq {
    display: flex;
    flex-direction: column;
    gap: 1px;
    border: 1px solid var(--bf-line);
    border-radius: 14px;
    overflow: hidden;
    background: var(--bf-line);
}

.bf-page .bf-faq details {
    background: var(--bf-surface);
}

.bf-page .bf-faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: #22242f;
    cursor: pointer;
    list-style: none;
}

.bf-page .bf-faq summary::-webkit-details-marker {
    display: none;
}

.bf-page .bf-faq summary::after {
    content: "+";
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background: var(--bf-chip);
    color: var(--bf-accent);
    font-size: 14px;
    font-weight: 700;
}

.bf-page .bf-faq details[open] summary::after {
    content: "−";
}

.bf-page .bf-faq details p {
    margin: 0;
    padding: 0 22px 20px;
    max-width: 62ch;
    font-size: 14px;
    line-height: 1.8;
    color: var(--bf-muted);
}

.bf-disclaimer {
    margin: 16px 2px 0 !important;
    font-size: 12px !important;
    line-height: 1.7 !important;
    color: #9a9dab !important;
}

/* ── 사이드 · 문서 정보 ───────────────────────────────── */
.bf-spec {
    padding: 20px 22px;
    border: 1px solid var(--bf-line);
    border-radius: 16px;
    background: var(--bf-surface);
}

.bf-spec-eyebrow {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    color: var(--bf-accent);
}

.bf-spec dl {
    margin: 12px 0 0;
    display: block;
}

.bf-spec div {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 9px 0;
    border-bottom: 1px solid #f1f2f8;
    font-size: 12.5px;
}

.bf-spec div:last-child {
    border-bottom: 0;
}

.bf-spec dt {
    color: var(--bf-muted-3);
}

.bf-spec dd {
    margin: 0;
    font-weight: 700;
    color: var(--bf-text);
    text-align: right;
}

/* ── 사이드 · 목차 ────────────────────────────────────── */
.bf-toc-nav {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 8px;
    border-radius: 14px;
    border: 1px solid var(--bf-line);
    background: var(--bf-surface);
}

.bf-page .bf-toc-nav a {
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: #4d5060;
    text-decoration: none;
    transition: background-color .14s, color .14s;
}

.bf-page .bf-toc-nav a:hover,
.bf-page .bf-toc-nav a.is-current {
    background: var(--bf-accent-tint);
    color: var(--bf-accent);
    text-decoration: none;
}

/* ── 하단 상담 배너 ───────────────────────────────────── */
.bf-cta {
    border-radius: 18px;
    background: #16171f;
    padding: 34px 36px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.bf-page .bf-cta h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: #fff;
}

.bf-cta p {
    margin: 9px 0 0;
    font-size: 13.5px;
    line-height: 1.7;
    color: #a5a8b8;
}

.bf-cta-actions {
    display: flex;
    gap: 8px;
    flex: none;
}

.bf-page .bf-cta-actions a {
    display: inline-flex;
    align-items: center;
    height: 44px;
    padding: 0 20px;
    border: 1px solid #34363f;
    border-radius: 11px;
    font-size: 13.5px;
    font-weight: 700;
    color: #e7e8ee;
    text-decoration: none;
    transition: background-color .14s, border-color .14s;
}

.bf-page .bf-cta-actions a:hover {
    background: #23242e;
    color: #fff;
    text-decoration: none;
}

.bf-page .bf-cta-actions a.is-primary {
    padding: 0 22px;
    border-color: var(--bf-accent);
    background: var(--bf-accent);
    font-weight: 800;
    color: #fff;
}

.bf-page .bf-cta-actions a.is-primary:hover {
    background: var(--bf-accent-strong);
    border-color: var(--bf-accent-strong);
}

/* ── 서식 카드 ────────────────────────────────────────── */
.bf-cat {
    margin-top: 26px;
}

.bf-cat-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 12px;
}

.bf-cat-head span {
    font-size: 12px;
    font-weight: 700;
    color: var(--bf-muted-3);
}

/* ── 함께 쓰는 서식: 서류함(문서 썸네일 카드 + 관련 서식 스트립) ── */
.bf-related {
    margin-top: 66px;
    padding-bottom: 20px;
}

.bf-related-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    padding-bottom: 22px;
    border-bottom: 1px solid #dfe2ee;
}

.bf-page .bf-related-eyebrow {
    margin: 0;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .16em;
    color: var(--bf-accent);
}

.bf-page .bf-related-head h2 {
    margin: 12px 0 0;
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--bf-ink);
}

.bf-page .bf-related-lead {
    margin: 14px 0 0;
    max-width: 660px;
    font-size: 15px;
    line-height: 1.72;
    color: var(--bf-muted);
}

.bf-page .bf-related-all {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 16px;
    border: 1px solid #cdd1e2;
    border-radius: 10px;
    background: var(--bf-surface);
    font-size: 14px;
    font-weight: 600;
    color: #3a3d4d;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color .16s ease, color .16s ease;
}

.bf-page .bf-related-all span {
    color: var(--bf-muted-3);
    transition: color .16s ease;
}

.bf-page .bf-related-all:hover {
    border-color: var(--bf-accent);
    color: var(--bf-accent);
    text-decoration: none;
}

.bf-page .bf-related-all:hover span {
    color: var(--bf-accent);
}

.bf-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
    gap: 16px;
    margin-top: 26px;
}

.bf-page .bf-card {
    display: flex;
    gap: 16px;
    padding: 18px;
    border: 1px solid var(--bf-line);
    border-radius: 14px;
    background: var(--bf-surface);
    box-shadow: 0 1px 2px rgba(20, 22, 40, .04);
    text-decoration: none;
    color: inherit;
    transition: border-color .14s, box-shadow .14s;
}

.bf-page a.bf-card:hover {
    border-color: #bcb4f5;
    box-shadow: 0 10px 28px -18px rgba(40, 36, 120, .55);
    text-decoration: none;
}

/* 카드 왼쪽 문서 썸네일(순수 CSS 목업) */
.bf-card-thumb {
    flex: none;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 64px;
    height: 90px;
    padding: 9px 8px;
    border: 1px solid var(--bf-line);
    border-radius: 5px;
    background: var(--bf-field);
}

.bf-card-thumb i {
    display: block;
    height: 3px;
    border-radius: 2px;
    background: #e6e8f2;
}

.bf-card-thumb i:nth-child(3) { width: 85%; }
.bf-card-thumb i:nth-child(4) { width: 72%; }

.bf-card-thumb .bf-thumb-title {
    width: 60%;
    height: 6px;
    background: #c9c3f6;
}

.bf-card-thumb .bf-thumb-box {
    margin-top: 4px;
    height: 22px;
    border: 1px solid #e6e8f2;
    border-radius: 2px;
    background: none;
}

.bf-card-thumb .bf-thumb-seal {
    margin-top: auto;
    align-self: flex-end;
    width: 16px;
    height: 16px;
    border: 1.5px dashed #d5c9f2;
    border-radius: 50%;
    background: none;
}

.bf-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.bf-card-cat {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    padding: 3px 7px;
    border-radius: 5px;
    background: var(--bf-accent-tint);
    color: var(--bf-accent);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
}

.bf-page .bf-card h3,
.bf-page .bf-card h4 {
    margin: 10px 0 0;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--bf-ink);
}

.bf-card p {
    margin: 7px 0 0;
    font-size: 13px;
    line-height: 1.62;
    color: var(--bf-muted-2);
}

.bf-card-more {
    margin-top: auto;
    padding-top: 12px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--bf-accent);
}

.bf-list-page main {
    padding-bottom: 40px;
}

/* ── 목록 패널 ────────────────────────────────────────── */
.bf-panel {
    border: 1px solid var(--bf-line);
    border-radius: 20px;
    background: var(--bf-surface);
    box-shadow: 0 1px 2px rgba(20, 22, 40, .04);
    overflow: hidden;
}

.bf-panel-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    padding: 18px 24px;
    border-bottom: 1px solid var(--bf-line-soft);
}

.bf-panel-title {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex: none;
}

.bf-page .bf-panel-title h2 {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--bf-ink);
}

.bf-panel-count {
    font-size: 12.5px;
    color: var(--bf-muted-3);
}

/* 필터는 JS가 붙은 뒤에만 노출한다. contents 로 풀어 헤더 flex 줄에 그대로 얹는다. */
.bf-panel-tools {
    display: none;
}

.bf-panel.is-live .bf-panel-tools {
    display: contents;
}

.bf-search {
    position: relative;
    flex: 1 1 240px;
    min-width: 190px;
    max-width: 320px;
}

.bf-search-icon {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    color: #a8abbb;
    pointer-events: none;
}

.bf-page .bf-search input {
    width: 100%;
    height: 44px;
    margin: 0;
    padding: 0 14px 0 38px;
    border: 1px solid var(--bf-line-input);
    border-radius: 11px;
    background: var(--bf-surface);
    font: inherit;
    font-size: 14px;
    color: var(--bf-ink);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color .12s, box-shadow .12s;
}

.bf-page .bf-search input:focus {
    border-color: var(--bf-accent);
    box-shadow: 0 0 0 3px rgba(91, 75, 236, .15);
}

.bf-page .bf-search input::placeholder {
    color: #a8abbb;
}

.bf-page .bf-search input::-webkit-search-cancel-button {
    cursor: pointer;
}

.bf-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    border-radius: 11px;
    background: var(--bf-chip);
    flex: none;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}

.bf-tabs::-webkit-scrollbar {
    display: none;
}

.bf-page .bf-tabs button {
    height: 32px;
    padding: 0 13px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
    color: var(--bf-muted-2);
    cursor: pointer;
    transition: background-color .12s, color .12s, box-shadow .12s;
}

.bf-page .bf-tabs button:hover {
    color: var(--bf-ink-soft);
}

.bf-page .bf-tabs button.is-on {
    background: var(--bf-surface);
    color: var(--bf-ink-soft);
    box-shadow: 0 1px 2px rgba(20, 22, 40, .12);
}

.bf-toggle {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: none;
    margin-left: auto;
    font-size: 12.5px;
    font-weight: 600;
    color: #4d5060;
    cursor: pointer;
}

.bf-page .bf-toggle input {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: var(--bf-accent);
    cursor: pointer;
}

.bf-panel-body {
    padding: 8px 24px 26px;
}

.bf-group {
    padding-top: 24px;
}

.bf-group[hidden] {
    display: none;
}

.bf-group-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 16px;
}

.bf-page .bf-group-head h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -.025em;
    color: var(--bf-ink);
}

.bf-group-count {
    font-size: 13px;
    font-weight: 700;
    color: #9a9dab;
}

.bf-group-rule {
    flex: 1;
    height: 1px;
    background: var(--bf-line-soft);
}

.bf-list-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

/* ── 목록 항목 ────────────────────────────────────────── */
.bf-page .bf-item {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--bf-accent-line);
    border-radius: 14px;
    background: var(--bf-surface);
    color: inherit;
    text-decoration: none;
    transition: transform .12s, box-shadow .12s, border-color .12s;
}

.bf-page .bf-item[hidden] {
    display: none;
}

.bf-page a.bf-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px -18px rgba(20, 22, 40, .4);
    border-color: var(--bf-accent);
    text-decoration: none;
}

.bf-page .bf-item.is-soon {
    background: var(--bf-field);
    border-color: #e9ebf3;
}

.bf-thumb {
    --tk: var(--bf-accent);
    --tf: var(--bf-accent-faint);
    --tl: var(--bf-accent-rule);
    flex: none;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    height: 320px;
    box-sizing: border-box;
    padding: 18px 22px;
    border: 1px solid #e4e6f0;
    border-radius: 10px;
    background: #f7f7fc;
    box-shadow: inset 0 1px 2px rgba(20, 22, 40, .025);
    overflow: hidden;
}

/* 실제 상세 서식을 A4 비율 그대로 줄여 목록 썸네일로 쓴다. */
.bf-thumb--actual {
    --thumb-scale: .276;
    position: relative;
    display: block;
    padding: 0;
    background: linear-gradient(145deg, #f8f8fd, #f1f2f9);
}

.bf-thumb-sheet {
    position: absolute;
    top: 5px;
    left: 50%;
    width: 219px;
    height: 310px;
    transform: translateX(-50%);
    pointer-events: none;
}

.bf-thumb-sheet .bf-paper {
    --bfp-ink: #3f35c7;
    --bfp-ink-strong: #4f3fe8;
    --bfp-rule: #7668e8;
    --bfp-line: #d7d2fa;
    --bfp-line-soft: #ebe8fd;
    --bfp-label-bg: #f0eefc;
    --bfp-label: #665ad6;
    --bfp-muted: #8c84ce;
    --bfp-faint: #aaa4d8;
    --bfp-box: #d3cef4;
    width: 210mm;
    height: 297mm;
    min-height: 297mm;
    margin: 0;
    border: 1px solid #e1e2ec;
    box-shadow: 0 5px 16px -8px rgba(30, 29, 70, .24);
    transform: scale(var(--thumb-scale));
    transform-origin: top left;
}

.bf-item.is-soon .bf-thumb-sheet {
    filter: grayscale(1);
    opacity: .48;
}

.bf-item.is-soon .bf-thumb {
    --tk: #c8cbd8;
    --tf: #edeff6;
    --tl: #e6e8f1;
}

.bf-tr {
    flex: none;
    border-radius: 2px;
    background: var(--tf);
}

.bf-tr--title {
    width: 44%;
    height: 6px;
    margin: 1px auto 5px;
    background: var(--tk);
}

.bf-tr--h {
    width: 58%;
    height: 5px;
    background: var(--tk);
}

.bf-tr--t {
    width: 100%;
    height: 8px;
}

.bf-tr--p {
    width: 88%;
    height: 4px;
}

.bf-tr--box {
    width: 100%;
    height: 22px;
    background: transparent;
    border: 1px solid var(--tl);
}

.bf-tr--sum {
    width: 46%;
    height: 7px;
    margin-left: auto;
    background: var(--tk);
}

.bf-tr--sign {
    width: 40%;
    height: 5px;
    margin-left: auto;
    background: var(--tk);
}

.bf-item-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 1px 3px 4px;
}

.bf-tag {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    height: 21px;
    padding: 0 8px;
    border-radius: 6px;
    background: var(--bf-accent-tint);
    color: var(--bf-accent);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .02em;
}

.bf-item.is-soon .bf-tag {
    background: #eef0f7;
    color: var(--bf-muted-3);
}

.bf-page .bf-item-title {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.025em;
    line-height: 1.25;
    color: var(--bf-ink);
}

.bf-page .bf-item.is-soon .bf-item-title {
    color: #3f4356;
}

.bf-item-desc {
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--bf-muted);
    text-wrap: pretty;
}

.bf-item.is-soon .bf-item-desc {
    color: #6b6f80;
}

.bf-item-meta {
    margin-top: auto;
    padding-top: 4px;
    font-size: 12px;
    font-weight: 700;
    color: var(--bf-accent);
}

.bf-item.is-soon .bf-item-meta {
    color: var(--bf-muted-3);
}

.bf-empty {
    padding: 56px 0;
    text-align: center;
}

.bf-empty[hidden] {
    display: none;
}

.bf-empty strong {
    display: block;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--bf-ink);
}

.bf-page .bf-empty p {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.7;
    color: var(--bf-muted-3);
}

/* ── 비교 표 ──────────────────────────────────────────── */
.bf-compare {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1px;
    border: 1px solid var(--bf-line);
    border-radius: 16px;
    background: var(--bf-line);
    overflow: hidden;
}

.bf-compare-col {
    padding: 22px 24px;
    background: var(--bf-field);
}

.bf-compare-col.is-us {
    background: var(--bf-surface);
}

.bf-page .bf-compare-label {
    margin: 0;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    color: #9a9dab;
}

.bf-page .bf-compare-col.is-us .bf-compare-label {
    color: var(--bf-accent);
}

.bf-compare ul {
    margin: 14px 0 0;
    padding: 0 0 0 17px;
    list-style: disc;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bf-compare li {
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--bf-muted-2);
}

.bf-compare-col.is-us li {
    color: #3f4356;
}

.bf-page .bf-compare-note {
    margin-top: 18px;
}

/* ── 사이드 · 이용 안내 ───────────────────────────────── */
.bf-guide {
    margin-top: 14px;
    padding: 18px 20px;
    border: 1px solid var(--bf-line);
    border-radius: 16px;
    background: var(--bf-surface);
}

.bf-page .bf-guide h2 {
    margin: 0;
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--bf-ink);
}

.bf-guide ul {
    margin: 12px 0 0;
    padding: 0 0 0 16px;
    list-style: disc;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.bf-guide li {
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--bf-muted);
}

@media (max-width: 760px) {
    .bf-panel-head {
        gap: 12px;
        padding: 16px;
    }

    .bf-search {
        flex-basis: 100%;
        max-width: none;
    }

    .bf-tabs {
        flex: 1 1 auto;
    }

    /* 좁은 화면에서는 체크박스를 다음 줄로 내려 탭과 겹치지 않게 한다. */
    .bf-toggle {
        flex: none;
        width: 100%;
        margin-left: 0;
    }

    .bf-panel-body {
        padding: 4px 16px 22px;
    }

    .bf-list-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1100px) and (min-width: 761px) {
    .bf-list-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .bf-list-grid {
        grid-template-columns: 1fr;
    }
}

/* ── 반응형 ───────────────────────────────────────────── */
@media (max-width: 1080px) {
    .bf-article-side {
        position: static;
        max-width: none;
        flex-basis: 100%;
    }

    .bf-editor {
        max-width: none;
        flex-basis: 100%;
    }

    .bf-preview {
        position: static;
        flex-basis: 100%;
    }

    .bf-actions {
        position: static;
    }
}

@media (max-width: 560px) {
    .bf-shell {
        padding: 0 18px;
    }

    .bf-hero {
        padding: 44px 0 26px;
    }

    .bf-steps {
        width: 100%;
        flex-basis: 100%;
    }

    .bf-field-grid {
        grid-template-columns: 1fr;
    }

    .bf-field--wide {
        grid-column: span 1;
    }

    .bf-desk {
        padding: 12px;
    }

    /* 버튼 세 개가 제목과 한 줄에 들어가지 않으므로 다음 줄로 내린다 */
    .bf-editor-head {
        flex-wrap: wrap;
    }

    .bf-editor-head-actions {
        width: 100%;
    }
}

/* ── 인쇄(PDF 저장) ───────────────────────────────────── */
@media print {
    @page {
        size: A4;
        margin: 0;
    }

    html,
    body.bf-page {
        background: #fff !important;
    }

    /* 종이 한 장만 남긴다. visibility 로 숨기면 빈 페이지가 따라붙는다. */
    body.bf-page > *:not(main),
    .bf-page .bf-hero,
    .bf-page .bf-crumb,
    .bf-page .bf-editor,
    .bf-page .bf-preview-head,
    .bf-page .bf-preview-note,
    .bf-page .bf-article,
    .bf-page .bf-related {
        display: none !important;
    }

    .bf-page .bf-shell {
        max-width: none !important;
        padding: 0 !important;
    }

    .bf-page .bf-workspace {
        display: block !important;
        gap: 0 !important;
        padding: 0 !important;
    }

    .bf-page .bf-desk {
        border: 0 !important;
        border-radius: 0 !important;
        background: #fff !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    .bf-paper-scale {
        width: auto !important;
        height: auto !important;
        overflow: visible !important;
        margin: 0 !important;
    }

    .bf-paper-inner {
        transform: none !important;
    }

    .bf-page-break {
        display: none !important;
    }

    .bf-paper {
        margin: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
        width: 210mm !important;
        height: auto !important;
        min-height: 0 !important;
    }

    .bf-paper + .bf-print-copy {
        display: block !important;
        break-before: page;
        page-break-before: always;
    }
}

/* ══ 서식 확장 (2026-08-10, 13종 추가) ═══════════════════ */

/* ── 본문 안 서식 링크 ─────────────────────────────────── */
.bf-page .bf-inlink {
    color: var(--bf-accent);
    text-decoration: none;
    border-bottom: 1px solid rgba(91, 75, 236, .28);
    font-weight: 600;
}

.bf-page .bf-inlink:hover {
    border-bottom-color: var(--bf-accent);
    background: rgba(91, 75, 236, .07);
}

/* ── 선택 입력칸 ───────────────────────────────────────── */
.bf-page .bf-field select {
    width: 100%;
    height: 44px;
    padding: 0 34px 0 13px;
    border: 1px solid var(--bf-line);
    border-radius: 11px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%236b6f80' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 13px center;
    font-family: inherit;
    font-size: 14px;
    color: var(--bf-ink);
    appearance: none;
    -webkit-appearance: none;
    transition: border-color .16s ease, box-shadow .16s ease;
}

.bf-page .bf-field select:focus {
    outline: none;
    border-color: var(--bf-accent);
    box-shadow: 0 0 0 3px rgba(91, 75, 236, .13);
}

/* ── 종이: 촘촘한 배치(조항이 많은 계약서) ─────────────── */
.bf-paper--dense {
    padding: 16mm 18mm 14mm;
}

.bf-paper--dense .bf-doc-head {
    padding-bottom: 0;
}

.bf-paper--dense .bf-doc-title {
    font-size: 26px;
}

.bf-paper--dense .bf-doc-sub {
    margin-top: 10px;
}

.bf-paper--dense .bf-doc-table {
    margin-top: 18px;
    font-size: 12px;
}

.bf-paper--dense .bf-doc-table th,
.bf-paper--dense .bf-doc-table td {
    padding: 6px 10px;
}

.bf-paper--dense .bf-doc-table th {
    font-size: 11px;
    letter-spacing: .1em;
}

/* ── 종이: 표 변형 ─────────────────────────────────────── */
.bf-doc-table--tight {
    margin-top: 14px;
}

/* 품목표는 칸을 눈으로 세어야 하므로 세로선을 전부 살린다 */
.bf-doc-table--items {
    font-size: 11.5px;
}

.bf-doc-table--items th,
.bf-doc-table--items td {
    width: auto;
    padding: 6px 8px;
    border-left: 1px solid var(--bfp-line);
}

.bf-doc-table--items tr > th:first-child,
.bf-doc-table--items tr > td:first-child {
    border-left: 0;
}

.bf-doc-table--items th {
    width: auto;
    text-align: center;
    letter-spacing: .04em;
}

/* 머리글 줄 아래는 조금 더 진하게 끊는다 */
.bf-doc-table--items thead > tr:last-child > th {
    border-bottom: 1.2px solid #cdcdd3;
}

.bf-doc-table .bf-num {
    text-align: right;
    width: auto;
}

.bf-doc-table .bf-ctr {
    text-align: center;
    width: auto;
}

.bf-doc-table td.bf-strong,
.bf-doc-table th.bf-strong {
    font-weight: 700;
}

.bf-doc-table tr.bf-doc-sumrow td,
.bf-doc-table tr.bf-doc-sumrow th {
    background: #f6f6f8;
    font-weight: 700;
}

.bf-doc-table tr.bf-doc-totalrow td,
.bf-doc-table tr.bf-doc-totalrow th {
    background: #eaeaef;
    font-weight: 700;
    font-size: 12.5px;
}

/* ── 종이: 두 칸 나란히(수신 / 공급자) ─────────────────── */
.bf-doc-cols {
    display: flex;
    gap: 8px;
    margin-top: 20px;
    align-items: flex-start;
}

.bf-doc-col {
    flex: 1 1 0;
    min-width: 0;
}

.bf-doc-col > .bf-doc-table {
    margin-top: 0;
}

.bf-doc-col-label {
    margin: 0 0 5px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    color: var(--bfp-label);
}

/* ── 종이: 문서번호 · 시행일 줄 ────────────────────────── */
.bf-doc-meta {
    margin: 14px 0 0;
    text-align: right;
    font-size: 11.5px;
    line-height: 1.75;
    letter-spacing: .04em;
    color: var(--bfp-muted);
}

/* 공문 본문처럼 상자 없이 흐르는 글: 테두리와 밑줄 배경을 함께 없앤다 */
.bf-doc-reason--plain {
    border: 0;
    padding: 16px 2px 0;
    background: none;
    line-height: 1.85;
}

/* ── 종이: 내용 상자 크기 변형 ─────────────────────────── */
.bf-doc-reason--xs { min-height: 56px; }
.bf-doc-reason--sm { min-height: 84px; }
.bf-doc-reason--md { min-height: 112px; }
.bf-doc-reason--lg { min-height: 190px; }

.bf-doc-label--tight {
    margin-top: 14px;
}

/* ── 종이: 계약 조항 ───────────────────────────────────── */
.bf-doc-clauses {
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.bf-doc-clauses li {
    font-size: 11.8px;
    line-height: 1.62;
    word-break: keep-all;
    overflow-wrap: anywhere;
}

.bf-doc-clauses b {
    font-weight: 700;
}

.bf-doc-clauses .bf-doc-sub-list {
    margin: 3px 0 0;
    padding: 0 0 0 12px;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bf-doc-clauses .bf-doc-sub-list li {
    font-size: 11.4px;
    color: #35353a;
}

.bf-doc-inline-value {
    white-space: pre-wrap;
}

/* ── 종이: 양 당사자 서명 ──────────────────────────────── */
.bf-doc-parties {
    display: flex;
    gap: 10px;
    margin: 18px 0 0;
}

.bf-doc-party {
    flex: 1 1 0;
    min-width: 0;
    border: 1px solid var(--bfp-box);
    border-radius: 2px;
    background: var(--bfp-field);
    padding: 10px 12px;
    font-size: 11.6px;
    line-height: 1.75;
}

.bf-doc-party-title {
    margin: 0 0 5px;
    font-family: var(--bfp-font);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .1em;
    color: var(--bfp-ink-strong);
}

.bf-doc-party-row {
    display: flex;
    gap: 5px;
}

/* 라벨 칸은 가장 긴 항목명(사업체명, 4자)이 한 줄에 들어가는 폭이어야 한다.
   고딕은 명조보다 자폭이 넓어 46px 에서는 '사업체 / 명' 으로 쪼개졌다. */
.bf-doc-party-row > i {
    flex: none;
    width: 56px;
    font-style: normal;
    letter-spacing: .02em;
    color: var(--bfp-label);
}

.bf-doc-party-row > span {
    flex: 1 1 auto;
    min-width: 0;
    word-break: keep-all;
    overflow-wrap: anywhere;
}

.bf-doc-party-sign {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 6px;
    margin-top: 4px;
    min-height: 34px;
}

.bf-doc-party-sign > i {
    flex: none;
    width: 56px;
    font-style: normal;
    letter-spacing: .02em;
    color: var(--bfp-label);
}

/* ── 종이: 사진 자리를 옆에 두는 인적사항(이력서) ───────── */
.bf-doc-withphoto {
    display: flex;
    align-items: stretch;
    gap: 10px;
}

.bf-doc-withphoto > .bf-doc-table {
    flex: 1 1 auto;
    min-width: 0;
}

/* 사진은 붙이거나 워드에서 삽입한다. 런타임에 이미지를 넣지 않는 이유는
   문서당 이미지가 정확히 하나여야 서명 이미지 크기 조정이 안 깨지기 때문이다. */
.bf-doc-photo {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30mm;
    border: 1px solid var(--bfp-box);
    border-radius: 2px;
    background: var(--bfp-field);
    text-align: center;
    font-size: 10.5px;
    line-height: 1.7;
    letter-spacing: .08em;
    color: var(--bfp-faint);
}

/* ── 종이: 서명 줄 변형 ────────────────────────────────── */
.bf-doc-sign--right {
    justify-content: flex-end;
}

.bf-doc-sign--pair {
    justify-content: space-around;
    gap: 24px;
}

.bf-doc-note {
    margin: 12px 0 0;
    font-size: 11px;
    line-height: 1.6;
    color: #64646a;
    white-space: pre-wrap;
}

.bf-doc-to--tight {
    margin-top: 24px;
}

/* ── 상세 페이지: 추가 추천 줄(서류함 스트립) ──────────── */
.bf-more {
    display: flex;
    align-items: stretch;
    margin-top: 14px;
    border: 1px solid var(--bf-line);
    border-radius: 14px;
    background: var(--bf-surface);
    overflow: hidden;
}

.bf-more-head {
    flex: none;
    box-sizing: border-box;
    width: 170px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 18px 20px;
    border-right: 1px solid var(--bf-line-soft);
}

.bf-more-head b {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--bf-ink);
}

.bf-more-head span {
    margin-top: 5px;
    font-size: 12px;
    color: var(--bf-muted-3);
}

/* 서식 수는 2~5개로 페이지마다 다르다. 칸마다 왼쪽·위 선을 긋고 목록 전체를
   1px 끌어올려/당겨서 바깥 테두리와 겹치게 하면 몇 개가 어떻게 줄바꿈되어도
   빈 칸이나 이중선이 생기지 않는다. */
.bf-more-list {
    flex: 1;
    min-width: 0;
    margin: -1px 0 0 -1px;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
}

.bf-more-list li {
    flex: 1 1 210px;
    min-width: 0;
    border-left: 1px solid var(--bf-line-soft);
    border-top: 1px solid var(--bf-line-soft);
}

.bf-page .bf-more-list a {
    display: block;
    height: 100%;
    box-sizing: border-box;
    padding: 18px 20px;
    text-decoration: none;
    transition: background .16s ease;
}

.bf-page .bf-more-list a:hover {
    background: #faf9ff;
}

.bf-more-list b {
    display: block;
    position: relative;
    padding-left: 12px;
    font-size: 14px;
    font-weight: 600;
    color: #3a3d4d;
    transition: color .16s ease;
}

.bf-more-list b::before {
    content: "";
    position: absolute;
    left: 0;
    top: .55em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #c4c8da;
}

.bf-page .bf-more-list a:hover b {
    color: var(--bf-accent);
}

.bf-more-list span {
    display: block;
    margin-top: 6px;
    padding-left: 12px;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--bf-muted-3);
}

/* ── 함께 쓰는 서식: 좁은 화면 ─────────────────────────── */
@media (max-width: 760px) {
    .bf-related-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
    }

    .bf-page .bf-related-head h2 {
        font-size: 26px;
    }

    .bf-page .bf-related-lead {
        font-size: 14px;
    }

    /* 두 문장을 억지로 끊지 않고 화면 폭에 맞춰 흐르게 둔다 */
    .bf-page .bf-related-lead br {
        display: none;
    }

    .bf-more {
        flex-direction: column;
    }

    .bf-more-head {
        width: auto;
        border-right: 0;
    }

    .bf-more-list {
        margin-left: 0;
    }

    .bf-more-list li {
        flex: 1 1 100%;
        border-left: 0;
    }
}

@media print {
    .bf-page .bf-more {
        display: none !important;
    }
}

/* ── 종이: 표 칸 안의 상호 + 직인 ─────────────────────── */
.bf-doc-signcell {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 3px 5px;
}

.bf-doc-signslot--mini {
    min-width: 54px;
    height: 26px;
    padding: 0 2px;
    border-bottom: 0;
}

.bf-page .bf-doc-signslot--mini .bf-doc-sign-image {
    max-height: 26px;
    max-width: 60px;
}

.bf-doc-signcell .bf-doc-signnote {
    font-size: 10.5px;
}

/* ── 촘촘한 종이: 상자 · 문구도 함께 줄인다 ───────────── */
.bf-paper--dense .bf-doc-reason {
    margin-top: 7px;
    padding: 5px 11px;
    font-size: 11.5px;
    line-height: 21px;
    background-image: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 20px, var(--bfp-line-soft) 20px, var(--bfp-line-soft) 21px);
    background-position: 0 6px;
}

.bf-paper--dense .bf-doc-label {
    margin-top: 15px;
    font-size: 12.5px;
}

.bf-paper--dense .bf-doc-label--tight {
    margin-top: 11px;
}

.bf-paper--dense .bf-doc-sentence {
    margin-top: 20px;
    font-size: 12px;
}

.bf-paper--dense .bf-doc-date {
    margin-top: 18px;
    font-size: 11.5px;
}

.bf-paper--dense .bf-doc-sign {
    margin-top: 18px;
    font-size: 11.5px;
}

.bf-paper--dense .bf-doc-signslot {
    height: 26px;
}

.bf-paper--dense .bf-doc-to {
    margin-top: 24px;
    font-size: 14px;
}

.bf-paper--dense .bf-doc-to::before {
    margin-bottom: 16px;
}

.bf-paper--dense .bf-doc-reason--xs { min-height: 44px; }
.bf-paper--dense .bf-doc-reason--sm { min-height: 66px; }
.bf-paper--dense .bf-doc-reason--md { min-height: 90px; }
.bf-paper--dense .bf-doc-reason--lg { min-height: 150px; }

/* ── 더 촘촘한 종이: 조항이 7개 이상인 계약서용 ──────────
   dense 만으로는 A4 한 장을 넘긴다(계약서 5종에서 59~191px 초과 실측).
   dense 규칙과 특이도가 같으므로 반드시 그 뒤에 와야 이긴다. */
.bf-paper--xdense {
    padding: 13mm 17mm 11mm;
}

.bf-paper--xdense .bf-doc-table {
    margin-top: 12px;
    font-size: 11.5px;
}

.bf-paper--xdense .bf-doc-table th,
.bf-paper--xdense .bf-doc-table td {
    padding: 4px 9px;
}

.bf-paper--xdense .bf-doc-clauses {
    margin-top: 10px;
    gap: 4px;
}

.bf-paper--xdense .bf-doc-clauses li {
    font-size: 11.2px;
    line-height: 1.5;
}

.bf-paper--xdense .bf-doc-note {
    margin-top: 10px;
}

.bf-paper--xdense .bf-doc-label {
    margin-top: 11px;
    font-size: 12px;
}

.bf-paper--xdense .bf-doc-label--tight {
    margin-top: 9px;
}

.bf-paper--xdense .bf-doc-reason {
    margin-top: 5px;
    line-height: 19px;
    background-image: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 18px, var(--bfp-line-soft) 18px, var(--bfp-line-soft) 19px);
    background-position: 0 5px;
}

.bf-paper--xdense .bf-doc-reason--xs { min-height: 34px; }
.bf-paper--xdense .bf-doc-reason--sm { min-height: 52px; }

.bf-paper--xdense .bf-doc-sentence {
    margin-top: 13px;
    font-size: 11.5px;
}

.bf-paper--xdense .bf-doc-date {
    margin-top: 12px;
}

.bf-paper--xdense .bf-doc-parties {
    margin-top: 10px;
}

.bf-paper--xdense .bf-doc-party {
    padding: 7px 10px;
    font-size: 11px;
    line-height: 1.6;
}

/* ══ 종이: 사직서 전용(2026-08-11 리디자인) ══════════════
   따뜻한 크림 바탕 · 얇은 구분선 · 밑줄 노트 방식.
   다른 서식(.bf-doc-*)에는 영향이 없도록 .bf-paper--resign 안으로만 묶는다. */
.bf-paper--resign {
    display: flex;
    flex-direction: column;
    padding: 74px 76px 64px;
    background: #ffffff;
    color: #1c1c1e;
    font-family: var(--bfp-font);
    font-size: 13px;
}

.bf-paper--resign .bfr-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding-bottom: 34px;
}

.bf-paper--resign .bfr-title {
    margin: 0;
    font-family: var(--bfp-font);
    font-weight: 800;
    font-size: 40px;
    letter-spacing: .34em;
    text-indent: .34em;
    color: #141416;
}

.bf-paper--resign .bfr-rule {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    max-width: 360px;
    margin: 0;
}

.bf-paper--resign .bfr-rule i {
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, rgba(0, 0, 0, 0), #cdcdd3);
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
}

.bf-paper--resign .bfr-rule i:last-child {
    background: linear-gradient(to left, rgba(0, 0, 0, 0), #cdcdd3);
}

.bf-paper--resign .bfr-rule em {
    font-style: normal;
    font-size: 9.5px;
    letter-spacing: .3em;
    color: #8a8a90;
    white-space: nowrap;
}

/* 표: 바깥 굵은 가로선 두 줄 + 안쪽 얇은 가로선. 세로선은 좌우 묶음 사이에만. */
.bf-paper--resign .bfr-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    border-top: 1.6px solid #26262a;
    border-bottom: 1.6px solid #26262a;
}

.bf-paper--resign .bfr-table th,
.bf-paper--resign .bfr-table td {
    height: 46px;
    vertical-align: middle;
    border-bottom: 1px solid #e3e3e6;
    word-break: keep-all;
    overflow-wrap: anywhere;
}

.bf-paper--resign .bfr-table th {
    width: 16.5%;
    padding: 0 16px;
    background: #f4f4f6;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .14em;
    color: #46464b;
    text-align: left;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
}

.bf-paper--resign .bfr-table td {
    width: 33.5%;
    padding: 0 18px;
    font-size: 13.5px;
    text-align: left;
}

.bf-paper--resign .bfr-table td.bfr-split {
    border-right: 1px solid #e3e3e6;
}

.bf-paper--resign .bfr-lastrow th,
.bf-paper--resign .bfr-lastrow td {
    border-bottom: 0;
}

/* 사직 사유: 남는 높이를 채우는 밑줄 노트 */
.bf-paper--resign .bfr-reason {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding-top: 30px;
}

.bf-paper--resign .bfr-reason-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 0;
    padding-bottom: 10px;
}

.bf-paper--resign .bfr-reason-head b {
    font-family: var(--bfp-font);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .12em;
    color: #141416;
}

.bf-paper--resign .bfr-reason-head em {
    font-style: normal;
    font-size: 9.5px;
    letter-spacing: .16em;
    color: #9a9aa1;
}

.bf-paper--resign .bfr-reason-box {
    flex: 1;
    min-height: 190px;
    box-sizing: border-box;
    padding: 8px 16px;
    border: 1px solid #d7d7db;
    border-radius: 2px;
    background-color: #ffffff;
    background-image: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 31px, #eeeef1 31px, #eeeef1 32px);
    background-position: 0 12px;
    font-size: 13.5px;
    line-height: 32px;
    white-space: pre-wrap;
    word-break: keep-all;
    overflow-wrap: anywhere;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
}

.bf-paper--resign .bfr-foot {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 38px;
}

.bf-paper--resign .bfr-stmt {
    margin: 0;
    font-family: var(--bfp-font);
    font-size: 13.5px;
    line-height: 1.8;
    letter-spacing: .02em;
    color: #26262a;
}

.bf-paper--resign .bfr-date {
    margin: 30px 0 0;
    font-size: 12.5px;
    letter-spacing: .22em;
    color: #64646a;
}

.bf-paper--resign .bfr-sign {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    margin: 0;
    padding-top: 30px;
}

.bf-paper--resign .bfr-sign-label {
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: .14em;
    color: #46464b;
}

.bf-paper--resign .bfr-signslot {
    position: relative;
    display: inline-flex;
    align-items: flex-end;
    justify-content: center;
    gap: 8px;
    width: 180px;
    height: 22px;
    padding-bottom: 2px;
    border-bottom: 1px solid #26262a;
    font-size: 13.5px;
}

.bf-paper--resign .bfr-signnote {
    font-size: 10px;
    letter-spacing: .1em;
    color: #9a9aa1;
    padding-bottom: 2px;
}

.bf-paper--resign .bfr-divider {
    width: 46px;
    height: 1px;
    margin-top: 34px;
    background: #d7d7db;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
}

.bf-paper--resign .bfr-to {
    margin: 22px 0 0;
    font-family: var(--bfp-font);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .18em;
    color: #141416;
}

/* 인쇄: 종이 높이를 살려 사유칸이 미리보기와 같은 높이로 채워지게 한다.
   (297mm 를 그대로 쓰면 반올림 때문에 빈 2쪽이 붙어서 296mm 로 둔다) */
@media print {
    .bf-paper--resign {
        height: auto !important;
        min-height: 296mm !important;
    }
}

/* 서명 이미지가 밑줄 위로 올라오도록(칸 높이 22px) */
.bf-page .bf-paper--resign .bfr-signslot .bf-doc-sign-image {
    position: absolute;
    left: 50%;
    bottom: 1px;
    transform: translateX(-50%);
    max-height: 44px;
    max-width: 170px;
}