/* ============================================================
   보험킹 디자인 시스템 v4 — "나에게 온 신청"
   ----------------------------------------------------
   - 주제: 고객의 상담 신청이 내 휴대폰으로 도착하는 순간.
     시그니처는 알림 카드(.bk-notice)와 이니셜 아바타(.bk-avatar).
   - 색: 흰 바탕 × 초록(주색) × 노랑 한 점. 노랑은 '새 신청' 표시에만 쓴다.
   - 서체: Pretendard 한 가족. 제목은 800·좁은 자간, 본문 17px.
   - 형태: 선 대신 면(연한 바탕 패널)과 여백으로 구획. 버튼 12, 패널 20.
     그림자는 알림 카드에만.
   - 클래스명은 v2·v3와 호환(.bk-*) — 값만 바뀜. v3의 명패(.bk-sign)·
     도장(.bk-seal)은 패널·아바타 모양으로 재정의해 남은 마크업이 깨지지 않는다.
   ============================================================ */

:root{
    /* ----- 바탕과 글자 ----- */
    --bk-ink:#17211D;
    --bk-ink-soft:#2B332F;
    --bk-ink-mute:#414B46;
    --bk-muted:#5E6B65;
    --bk-muted-2:#8C9892;
    --bk-line:#DDE5E1;
    --bk-line-2:#E7EDEA;
    --bk-line-3:#EEF2F0;
    --bk-paper:#FFFFFF;
    --bk-bg:#FFFFFF;
    --bk-bg-soft:#F3F7F5;
    --bk-bg-tint:#F6F8F7;
    --bk-white:#FFFFFF;

    /* ----- 초록(주색) — 주 버튼·링크·강조 패널 ----- */
    --bk-brand:#0E7A55;
    --bk-brand-2:#1F9A6C;
    --bk-brand-deep:#0A5C40;
    --bk-brand-ink:#0A3D2D;
    --bk-brand-soft:#E2F3EB;
    --bk-brand-tint:#F0F9F4;

    /* ----- 노랑(포인트) — 새 신청 알림 표시에만 ----- */
    --bk-accent:#FFC83D;
    --bk-accent-2:#F5B014;
    --bk-accent-deep:#875310;
    --bk-accent-soft:#FFF2C9;

    /* ----- 빨강 — 경고·늦은 연락·읽지 않은 수. (v3 '인주' 토큰 이름 호환) ----- */
    --bk-seal:#DC4136;
    --bk-seal-deep:#A1251E;
    --bk-seal-soft:#FCDEDB;
    --bk-seal-tint:#FEF1F0;

    --bk-good:#0E7A55;
    --bk-good-soft:#E2F3EB;
    --bk-warn:#A8690B;
    --bk-warn-soft:#FFF2C9;
    --bk-danger:#C22F26;
    --bk-danger-soft:#FCDEDB;
    --bk-info:#2563A8;
    --bk-info-soft:#E3EEFA;

    /* ----- Spacing (8 base) ----- */
    --bk-sp-1:.25rem;
    --bk-sp-2:.5rem;
    --bk-sp-3:.75rem;
    --bk-sp-4:1rem;
    --bk-sp-5:1.5rem;
    --bk-sp-6:2rem;
    --bk-sp-7:3rem;
    --bk-sp-8:4rem;
    --bk-sp-9:6rem;

    /* ----- Radius — 버튼·입력 12, 카드 16, 패널 20. 캡슐은 칩·아바타에만 ----- */
    --bk-r-sm:10px;
    --bk-r-md:12px;
    --bk-r-lg:16px;
    --bk-r-xl:20px;
    --bk-r-2xl:24px;
    --bk-r-full:999px;

    /* ----- Shadow — 알림 카드처럼 '떠 있는 것'에만 ----- */
    --bk-shadow-sm:0 1px 2px rgba(23,33,29,.05);
    --bk-shadow-md:0 2px 8px rgba(23,33,29,.07);
    --bk-shadow-lg:0 10px 28px -10px rgba(23,33,29,.18);
    --bk-shadow-xl:0 22px 48px -18px rgba(23,33,29,.26);

    /* ----- z-index ----- */
    --bk-z-nav:1030;
    --bk-z-overlay:1040;
    --bk-z-fab:1045;
    --bk-z-modal:1050;
    --bk-z-toast:1060;

    /* ----- Typography (시니어 친화: base 17px 유지) ----- */
    --bk-fs-xs:.88rem;
    --bk-fs-sm:.94rem;
    --bk-fs-base:1.0625rem;   /* 17px */
    --bk-fs-md:1.19rem;       /* 19px */
    --bk-fs-lg:1.44rem;       /* 23px */
    --bk-fs-xl:1.75rem;       /* 28px */
    --bk-fs-2xl:2.25rem;      /* 36px */
    --bk-fs-3xl:3rem;         /* 48px */
    --bk-fs-display:4rem;     /* 64px */

    /* ----- Transition ----- */
    --bk-tr-fast:.15s cubic-bezier(.4,0,.2,1);
    --bk-tr-base:.22s cubic-bezier(.4,0,.2,1);
    --bk-tr-slow:.32s cubic-bezier(.4,0,.2,1);

    /* ----- Safe-area ----- */
    --bk-safe-top:env(safe-area-inset-top, 0px);
    --bk-safe-bottom:env(safe-area-inset-bottom, 0px);
    --bk-safe-left:env(safe-area-inset-left, 0px);
    --bk-safe-right:env(safe-area-inset-right, 0px);

    /* ----- Chrome heights / touch ----- */
    --bk-mobile-nav-h:76px;
    --bk-mobile-top-nav-h:60px;
    --bk-desk-top-nav-h:68px;
    --bk-touch-target:48px;

    /* ----- 그라데이션 프리셋 — 단색. 호환용으로 이름만 유지 ----- */
    --bk-grad-brand:var(--bk-brand);
    --bk-grad-deep:var(--bk-brand-ink);
    --bk-grad-accent:var(--bk-accent);
    --bk-grad-hero:var(--bk-brand-ink);
    --bk-grad-coronet:transparent;

    /* ----- 폰트 — 한 가족. display는 같은 서체의 굵은 쓰임 ----- */
    --bk-font:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
    --bk-font-display:var(--bk-font);
    --bk-font-num:'Pretendard Variable','Pretendard',-apple-system,sans-serif;
}

/* ============================================================
   글로벌 인프라 (스코프 없음 — 사이트 전역)
   ============================================================ */
html{
    -webkit-text-size-adjust:100%;
    -moz-text-size-adjust:100%;
    text-size-adjust:100%;
    overflow-x:clip;
    background:var(--bk-paper);
}
body{
    font-family:var(--bk-font);
    color:var(--bk-ink);
    background:var(--bk-paper);
    overscroll-behavior-y:contain;
    overflow-x:clip;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    text-rendering:optimizeLegibility;
    letter-spacing:-0.01em;
    font-variant-numeric:tabular-nums;
    word-break:keep-all;
    overflow-wrap:break-word;
}
*{-webkit-tap-highlight-color:transparent;}
a,button,[role="button"],input,select,textarea,label{
    -webkit-tap-highlight-color:rgba(14,122,85,.10);
}
.bk-btn,.bk-input,button,[role="button"],a.btn,input[type="button"],input[type="submit"]{
    touch-action:manipulation;
}
::selection{background:var(--bk-brand-soft);color:var(--bk-ink);}

/* 키보드 포커스 — 전역 가시성 */
:focus-visible{
    outline:2px solid var(--bk-brand);
    outline-offset:2px;
    border-radius:4px;
}

/* iOS 100vh */
@supports (height:100dvh){
    .bk-100vh{height:100dvh;}
    .bk-min-100vh{min-height:100dvh;}
}
@supports not (height:100dvh){
    .bk-100vh{height:100vh;}
    .bk-min-100vh{min-height:100vh;}
}
.bk-safe-top{padding-top:var(--bk-safe-top);}
.bk-safe-bottom{padding-bottom:var(--bk-safe-bottom);}
.bk-safe-x{padding-left:var(--bk-safe-left);padding-right:var(--bk-safe-right);}

@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
        scroll-behavior:auto !important;
    }
}

/* ============================================================
   v2 시그니처(코로넷·크레스트) — 무력화. 남은 마크업이 있어도 보이지 않는다.
   ============================================================ */
.bk-coronet{display:none !important;}
.bk-crest{display:none !important;}

/* ============================================================
   v4 시그니처 — 알림 카드(.bk-notice)와 이니셜 아바타(.bk-avatar)
   ============================================================ */
/* 아바타: 연한 초록 원에 이름 첫 글자. <span class="bk-avatar">김</span> */
.bk-avatar,.bk-seal{
    display:inline-flex;align-items:center;justify-content:center;
    width:2.5rem;height:2.5rem;flex:0 0 auto;
    background:var(--bk-brand-soft);color:var(--bk-brand-deep);
    font-family:var(--bk-font);font-weight:800;font-size:1.05rem;line-height:1;
    border-radius:var(--bk-r-full);letter-spacing:0;
}
.bk-avatar-sm,.bk-seal-sm{width:2rem;height:2rem;font-size:.9rem;}
.bk-avatar-lg,.bk-seal-lg{width:3.25rem;height:3.25rem;font-size:1.35rem;}
.bk-avatar-solid{background:var(--bk-brand);color:#fff;}
.bk-seal-outline{background:var(--bk-white);color:var(--bk-muted);box-shadow:inset 0 0 0 1.5px var(--bk-line);}

/* 알림 카드: 흰 바탕에 그림자. 왼쪽에 종 아이콘(.ico), 본문(.body) */
.bk-notice{
    display:flex;align-items:flex-start;gap:.85rem;
    background:var(--bk-white);
    border:1px solid var(--bk-line-2);
    border-radius:var(--bk-r-lg);
    box-shadow:var(--bk-shadow-lg);
    padding:1rem 1.1rem;
    text-align:left;
}
.bk-notice .ico{
    flex:0 0 auto;width:2.5rem;height:2.5rem;border-radius:var(--bk-r-md);
    display:flex;align-items:center;justify-content:center;
    background:var(--bk-accent);color:var(--bk-ink);
}
.bk-notice .ico svg{width:1.3rem;height:1.3rem;}
.bk-notice .body{min-width:0;flex:1 1 auto;}
.bk-notice .ttl{font-weight:700;color:var(--bk-ink);line-height:1.4;}
.bk-notice .sub{margin-top:.15rem;font-size:.94rem;color:var(--bk-muted);line-height:1.5;}
.bk-notice-flat{box-shadow:none;border-color:var(--bk-line);}

/* 패널: 연한 바탕의 면. 선 없이 구획한다 */
.bk-panel{background:var(--bk-bg-soft);border-radius:var(--bk-r-xl);padding:1.5rem;}
@media (min-width:640px){ .bk-panel{padding:2rem;} }
.bk-panel-white{background:var(--bk-white);}
.bk-panel-brand{background:var(--bk-brand-tint);box-shadow:inset 0 0 0 1.5px var(--bk-brand-soft);}

/* v3 명패 호환 — 일반 패널로 보인다 */
.bk-sign{
    position:relative;
    background:var(--bk-bg-soft);
    border:0;
    border-radius:var(--bk-r-xl);
    padding:1.5rem 1.75rem;
    color:var(--bk-ink);
}
.bk-sign-ratio{display:flex;flex-direction:column;justify-content:center;}
.bk-sign .bk-seal{position:absolute;top:1rem;right:1rem;}
.bk-sign-soft{background:var(--bk-white);box-shadow:inset 0 0 0 1px var(--bk-line);}
.bk-name{font-family:var(--bk-font);font-weight:800;letter-spacing:-0.02em;line-height:1.25;color:var(--bk-ink);}
.bk-name-lg{font-size:clamp(1.6rem,3.6vw,2.25rem);}
.bk-name-sm{font-size:1.1rem;}
.bk-name .role{font-weight:600;letter-spacing:0;font-size:.6em;color:var(--bk-muted);margin-left:.5em;}
.bk-rule{height:1px;background:var(--bk-line);border:0;margin:0;}
.bk-rule-ink{height:1px;background:var(--bk-line);border:0;margin:0;}

/* 한 번만 일어나는 모션: 알림이 도착한다 */
@keyframes bkNoticeIn{
    0%{opacity:0;transform:translateY(-.6rem) scale(.97);}
    100%{opacity:1;transform:none;}
}
.bk-notice-in{animation:bkNoticeIn .5s cubic-bezier(.2,.7,.2,1) .5s both;}
.bk-ink-in,.bk-stamp-in{animation:none;}

/* ============================================================
   Root 스코프 (.bk 또는 [data-bk])
   ============================================================ */
.bk{
    font-family:var(--bk-font);
    color:var(--bk-ink);
    background:var(--bk-paper);
    letter-spacing:-0.01em;
    line-height:1.7;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    overflow-x:clip;
}
.bk *{box-sizing:border-box;}
.bk h1,.bk h2,.bk h3,.bk h4{
    color:var(--bk-ink);margin:0;
    font-weight:800;line-height:1.2;letter-spacing:-0.025em;
}
.bk p{margin:0;color:var(--bk-ink-soft);}
.bk strong{color:var(--bk-ink);font-weight:700;}
.bk a{color:var(--bk-brand);text-decoration:underline;text-underline-offset:.18em;text-decoration-color:var(--bk-brand-soft);}
.bk a:hover{text-decoration-color:var(--bk-brand);}

/* ============================================================
   Layout
   ============================================================ */
.bk-container{max-width:1120px;margin:0 auto;padding:0 20px;}
.bk-container-sm{max-width:760px;margin:0 auto;padding:0 20px;}
.bk-container-lg{max-width:1280px;margin:0 auto;padding:0 24px;}
.bk-section{padding:64px 0;}
@media (min-width:768px){ .bk-section{padding:104px 0;} }
.bk-section-sm{padding:40px 0;}
@media (min-width:768px){ .bk-section-sm{padding:64px 0;} }
.bk-center{text-align:center;}
/* 본문 줄 길이 — 한글 36자 안팎 */
.bk-measure{max-width:34rem;}

/* ============================================================
   Typography
   ============================================================ */
/* 아이브로우 — 조용한 소제목 한 줄(캡슐·배경 없음) */
.bk-eyebrow{
    display:inline-flex;align-items:center;gap:.45rem;
    font-size:.94rem;font-weight:700;letter-spacing:0;
    color:var(--bk-brand);background:transparent;
    border:0;padding:0;border-radius:0;
    margin-bottom:.9rem;
}
.bk-eyebrow-accent{color:var(--bk-brand);}
.bk-display,.bk-title,.bk-title-lg{
    font-family:var(--bk-font);
    color:var(--bk-ink);font-weight:800;
    letter-spacing:-0.03em;
}
.bk-title{font-size:clamp(1.7rem,3.4vw,2.35rem);line-height:1.28;}
.bk-title-lg{font-size:clamp(2.1rem,5vw,3.4rem);line-height:1.2;}
.bk-display{font-size:clamp(2.3rem,6vw,4rem);line-height:1.16;}
/* .em/.hl/.ul — v2의 강조 수단. 제목 안에서 따로 강조하지 않는다 */
.bk-title .em,.bk-title-lg .em,.bk-display .em{color:inherit;}
.bk-title .hl,.bk-title-lg .hl{background:none;-webkit-text-fill-color:currentColor;color:inherit;}
.bk-title .ul,.bk-title-lg .ul{position:relative;display:inline;color:inherit;}
.bk-title .ul::after,.bk-title-lg .ul::after{content:none;}
.bk-lead{
    color:var(--bk-muted);font-size:clamp(1.0625rem,1.6vw,1.19rem);
    line-height:1.75;font-weight:400;
}
.bk-lead strong{color:var(--bk-ink);font-weight:700;}
/* 숫자·지표 — Pretendard tabular */
.bk-num{font-family:var(--bk-font-num);font-variant-numeric:tabular-nums;letter-spacing:-0.01em;}
.font-num{font-family:var(--bk-font-num) !important;font-variant-numeric:tabular-nums;}
.bk-num-display{font-family:var(--bk-font);font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-0.02em;}

/* ============================================================
   Buttons — 주 버튼은 초록 단색. 그라데이션·글로우 없음
   ============================================================ */
.bk-btn{
    display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
    font-weight:700;font-size:1.02rem;border:1.5px solid transparent;border-radius:var(--bk-r-md);
    cursor:pointer;text-decoration:none !important;font-family:inherit;
    padding:.85rem 1.5rem;min-height:52px;white-space:nowrap;line-height:1.2;
    transition:background var(--bk-tr-fast), color var(--bk-tr-fast), border-color var(--bk-tr-fast);
}
.bk-btn:active{transform:translateY(1px);}
.bk-btn-primary,.bk-btn-accent{background:var(--bk-brand);color:#fff !important;border-color:var(--bk-brand);}
.bk-btn-primary:hover,.bk-btn-accent:hover{background:var(--bk-brand-deep);border-color:var(--bk-brand-deep);color:#fff !important;}
/* 짙은 바탕 위에서는 흰 버튼이 된다 */
.bk-hero-dark .bk-btn-accent,.bg-ink .bk-btn-accent,.bk-dark .bk-btn-accent,
.bk-hero-dark .bk-btn-primary,.bg-ink .bk-btn-primary,.bk-dark .bk-btn-primary{
    background:#fff;color:var(--bk-brand-ink) !important;border-color:#fff;
}
.bk-hero-dark .bk-btn-accent:hover,.bg-ink .bk-btn-accent:hover,.bk-dark .bk-btn-accent:hover,
.bk-hero-dark .bk-btn-primary:hover,.bg-ink .bk-btn-primary:hover,.bk-dark .bk-btn-primary:hover{
    background:var(--bk-brand-soft);color:var(--bk-brand-ink) !important;border-color:var(--bk-brand-soft);
}
.bk-btn-outline{background:var(--bk-white);color:var(--bk-ink) !important;border-color:var(--bk-line);}
.bk-btn-outline:hover{border-color:var(--bk-brand);color:var(--bk-brand-deep) !important;}
.bk-hero-dark .bk-btn-outline,.bg-ink .bk-btn-outline,.bk-dark .bk-btn-outline{background:transparent;color:#fff !important;border-color:rgba(255,255,255,.55);}
.bk-hero-dark .bk-btn-outline:hover,.bg-ink .bk-btn-outline:hover,.bk-dark .bk-btn-outline:hover{background:#fff;color:var(--bk-brand-ink) !important;border-color:#fff;}
.bk-btn-ghost{background:transparent;color:var(--bk-ink) !important;}
.bk-btn-ghost:hover{background:var(--bk-bg-soft);color:var(--bk-ink) !important;}
.bk-btn-light{background:#fff;color:var(--bk-ink) !important;border-color:#fff;}
.bk-btn-light:hover{background:var(--bk-bg-soft);color:var(--bk-ink) !important;}
.bk-btn-sm{padding:.5rem 1.05rem;font-size:.95rem;min-height:44px;border-radius:var(--bk-r-sm);}
.bk-btn-lg{padding:1rem 1.9rem;font-size:1.12rem;min-height:58px;border-radius:14px;}
.bk-btn-block{width:100%;}

/* ============================================================
   Cards — 흰 바탕 + 옅은 선. 그림자·호버 이동 없음
   ============================================================ */
.bk-card{
    background:var(--bk-white);border:1px solid var(--bk-line);border-radius:var(--bk-r-lg);
    padding:1.5rem;
}
.bk-card-lg{
    background:var(--bk-white);border:1px solid var(--bk-line);border-radius:var(--bk-r-xl);
    padding:2rem;
}
.bk-card-soft{background:var(--bk-bg-soft);border-color:transparent;}
.bk-card-hover:hover{border-color:var(--bk-brand);}
.bk-card-glow:hover{border-color:var(--bk-brand);}

/* ============================================================
   Chips / Badges — 캡슐은 여기에만
   ============================================================ */
.bk-chip{
    display:inline-flex;align-items:center;gap:.4rem;
    font-size:.88rem;font-weight:600;
    background:var(--bk-bg-soft);color:var(--bk-ink-soft);
    border:1px solid transparent;border-radius:var(--bk-r-full);
    padding:.3rem .8rem;
}
.bk-chip-brand{background:var(--bk-brand-soft);color:var(--bk-brand-deep) !important;}
.bk-chip-accent{background:var(--bk-accent-soft);color:var(--bk-accent-deep) !important;}
.bk-chip-seal{background:var(--bk-seal-tint);color:var(--bk-seal-deep) !important;}
.bk-chip-good{background:var(--bk-good-soft);color:var(--bk-brand-deep) !important;}
.bk-chip-warn{background:var(--bk-warn-soft);color:var(--bk-accent-deep) !important;}
.bk-chip-danger{background:var(--bk-danger-soft);color:var(--bk-seal-deep) !important;}
.bk-chip-info{background:var(--bk-info-soft);color:var(--bk-info) !important;}

/* ============================================================
   Forms
   ============================================================ */
.bk-input{
    width:100%;border:1.5px solid var(--bk-line);border-radius:var(--bk-r-md);
    padding:.9rem 1rem;font-size:1.05rem;font-family:inherit;
    background:var(--bk-white);color:var(--bk-ink);
    transition:border-color var(--bk-tr-fast), box-shadow var(--bk-tr-fast);
    min-height:52px;
}
.bk-input:focus{outline:0;border-color:var(--bk-brand);box-shadow:0 0 0 4px rgba(14,122,85,.14);}
.bk-input::placeholder{color:var(--bk-muted-2);}
.bk-label{display:block;font-weight:600;font-size:.95rem;color:var(--bk-ink);margin-bottom:.5rem;}
.bk-label .req{color:var(--bk-danger);margin-left:.15rem;}

/* ============================================================
   Grid
   ============================================================ */
.bk-grid{display:grid;gap:1.25rem;}
.bk-grid-2{grid-template-columns:1fr;gap:1.25rem;}
.bk-grid-3{grid-template-columns:1fr;gap:1.25rem;}
.bk-grid-4{grid-template-columns:1fr;gap:1.1rem;}
@media (min-width:640px){
    .bk-grid-2{grid-template-columns:repeat(2,1fr);}
    .bk-grid-4{grid-template-columns:repeat(2,1fr);}
}
@media (min-width:900px){
    .bk-grid-3{grid-template-columns:repeat(3,1fr);}
    .bk-grid-4{grid-template-columns:repeat(4,1fr);}
}
/* 벤토 — 호환용 */
.bk-bento{display:grid;gap:1rem;grid-template-columns:1fr;}
@media (min-width:900px){
    .bk-bento{grid-template-columns:repeat(3,1fr);}
    .bk-bento .span-2{grid-column:span 2;}
    .bk-bento .row-2{grid-row:span 2;}
}
/* 항목 목록 — <dl class="bk-ledger"><div><dt>…</dt><dd>…</dd></div></dl>. 흰 면 위의 줄 목록 */
.bk-ledger{display:grid;gap:0;background:var(--bk-white);border:1px solid var(--bk-line-2);border-radius:var(--bk-r-xl);padding:.35rem 1.25rem;}
.bk-ledger > *{display:grid;grid-template-columns:1fr;gap:.35rem;padding:1.05rem 0;border-bottom:1px solid var(--bk-line);}
.bk-ledger > *:last-child{border-bottom:0;}
@media (min-width:640px){ .bk-ledger{padding:.5rem 1.75rem;} .bk-ledger > *{grid-template-columns:minmax(9rem,14rem) 1fr;gap:1.5rem;} }
.bk-ledger dt{font-weight:700;color:var(--bk-ink);}
.bk-ledger dd{margin:0;color:var(--bk-ink-soft);}

/* ============================================================
   Stat / metric — 흰 타일
   ============================================================ */
.bk-stat{background:var(--bk-white);border:1px solid var(--bk-line-2);border-radius:var(--bk-r-lg);padding:1.1rem 1.25rem;}
.bk-stat .num{
    font-family:var(--bk-font);font-variant-numeric:tabular-nums;
    font-size:2rem;font-weight:800;color:var(--bk-ink);line-height:1.15;letter-spacing:-0.02em;
}
.bk-stat .num.accent{color:var(--bk-brand);}
.bk-stat .lbl{font-size:.94rem;font-weight:500;color:var(--bk-muted);margin-top:.3rem;}

/* ============================================================
   FAB
   ============================================================ */
.bk-fab{
    position:fixed;
    right:calc(14px + var(--bk-safe-right));
    bottom:calc(var(--bk-mobile-nav-h) + max(8px, var(--bk-safe-bottom)));
    z-index:var(--bk-z-fab);
    display:flex;flex-direction:column;gap:.55rem;
    align-items:flex-end;
}
.bk-fab a{
    display:inline-flex;align-items:center;gap:.5rem;
    padding:.85rem 1.25rem;border-radius:var(--bk-r-full);text-decoration:none;
    font-weight:700;font-size:.98rem;font-family:inherit;
    border:1.5px solid var(--bk-brand);
    box-shadow:var(--bk-shadow-lg);
    white-space:nowrap;line-height:1;
}
.bk-fab .fab-call{background:#fff;color:var(--bk-brand-deep) !important;}
.bk-fab .fab-main{background:var(--bk-brand);color:#fff !important;padding:1rem 1.4rem;font-size:1.02rem;}
@media (min-width:768px){ .bk-fab{right:calc(24px + var(--bk-safe-right));gap:.65rem;} }
@media (min-width:992px){ .bk-fab{bottom:calc(24px + var(--bk-safe-bottom));} }

/* ============================================================
   Background helpers
   ============================================================ */
.bk-bg-grid{position:relative;background:var(--bk-paper);}
.bk-bg-grid::before{content:none;}
.bk-bg-soft{background:var(--bk-bg-soft);}
.bk-bg-brand-soft{background:var(--bk-brand-soft);}
.bk-bg-tint{background:var(--bk-bg-tint);}
.bk-bg-paper{background:var(--bk-paper);}

/* 짙은 섹션 — 짙은 초록 단색, 글자는 흰색 */
.bk-hero-dark,.bk-dark{
    position:relative;
    background:var(--bk-brand-ink);
    color:#fff;
}
.bk-hero-dark::before{content:none;}
.bk-hero-dark h1,.bk-hero-dark h2,.bk-hero-dark h3,.bk-dark h1,.bk-dark h2,.bk-dark h3{color:#fff;}
.bk-hero-dark .bk-lead,.bk-dark .bk-lead{color:rgba(255,255,255,.8);}
.bk-hero-dark .bk-rule,.bk-dark .bk-rule{background:rgba(255,255,255,.2);}

/* ============================================================
   Section side nav
   ============================================================ */
.bk-side-nav{
    position:fixed;right:22px;top:50%;
    transform:translateY(-50%);z-index:1035;
    display:none;flex-direction:column;gap:14px;
    align-items:flex-end;pointer-events:auto;
}
@media (min-width:1200px){.bk-side-nav{display:flex;}}
.bk-side-nav-item{
    display:flex;align-items:center;gap:11px;
    text-decoration:none;cursor:pointer;
    font-family:var(--bk-font);font-size:.85rem;font-weight:600;
    border:0;background:transparent;padding:2px 0;line-height:1;
}
.bk-side-nav-item .label{color:var(--bk-muted);opacity:.7;transition:color .22s ease, opacity .22s ease;white-space:nowrap;}
.bk-side-nav-item .dot{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--bk-line);transition:background .22s ease;}
.bk-side-nav-item:hover .label{color:var(--bk-ink);opacity:1;}
.bk-side-nav-item:hover .dot{background:var(--bk-brand);}
.bk-side-nav-item.is-active .label{color:var(--bk-ink);opacity:1;font-weight:700;}
.bk-side-nav-item.is-active .dot{background:var(--bk-brand);}
@media print{.bk-side-nav{display:none !important;}}

/* ============================================================
   Misc
   ============================================================ */
.bk-divider{height:1px;background:var(--bk-line);border:0;margin:0;}
.bk-dot-list{list-style:none;padding:0;margin:0;display:grid;gap:.7rem;}
.bk-dot-list li{position:relative;padding-left:1.4rem;color:var(--bk-ink-soft);line-height:1.6;}
.bk-dot-list li::before{content:"";position:absolute;left:.1rem;top:.7em;width:6px;height:6px;border-radius:50%;background:var(--bk-brand);}

/* 아이콘 — 이모지를 쓰지 않는다. 스프라이트(templates/includes/bk_icons.html)의 듀오톤 아이콘.
   선은 글자색, 면(톤)은 초록. <svg class="bk-ico"><use href="#bk-i-bell-ringing"></use></svg> */
.bk-ico{
    display:inline-block;width:1.2em;height:1.2em;flex:0 0 auto;vertical-align:-.22em;
    fill:currentColor;--bk-ico-tone:var(--bk-brand-2);--bk-ico-tone-o:.34;
}
/* 색 바탕(버튼·짙은 섹션) 위에서는 톤도 글자색을 따른다 */
.bk-btn .bk-ico,.text-white .bk-ico,.bk-dark .bk-ico,.bg-ink .bk-ico,.bg-primary-600 .bk-ico{--bk-ico-tone:currentColor;--bk-ico-tone-o:.25;}
.bk-ico-warm{--bk-ico-tone:var(--bk-accent);--bk-ico-tone-o:.75;}

/* 새 알림 점 — 노랑. 읽지 않은 상담 신청 등 */
.bk-new-dot{display:inline-block;width:.55em;height:.55em;border-radius:50%;background:var(--bk-accent-2);vertical-align:middle;}

/* ============================================================
   접근성
   ============================================================ */
@media (prefers-reduced-motion: reduce){
    .bk *,.bk *::before,.bk *::after,
    .bk-notice-in{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
    }
}

/* ============================================================
   레거시 호환 (easy-* → v4 토큰)
   ============================================================ */
.easy-btn-primary{background:var(--bk-brand) !important;color:#fff !important;}
.easy-btn-primary:hover{background:var(--bk-brand-deep) !important;}
.easy-card{border-radius:var(--bk-r-lg);border-color:var(--bk-line);box-shadow:none;}
.easy-input{border-radius:var(--bk-r-md);}
.easy-input:focus{border-color:var(--bk-brand);box-shadow:0 0 0 4px rgba(14,122,85,.14);}

/* ── 휴대폰 화면 보정 (2026-10) ──
   사용자 연령대가 높아 휴대폰에서는 작은 글씨를 한 단계씩 키운다.
   Tailwind CDN 이 나중에 넣는 유틸리티보다 우선하도록 body 를 앞에 붙인다. */
@media (max-width: 767px) {
  body .text-xs { font-size: .875rem; line-height: 1.45; }
  body .text-\[10px\], body .text-\[11px\], body .text-\[12px\] { font-size: .8125rem; line-height: 1.4; }
  body .text-sm { font-size: .96875rem; line-height: 1.5; }
  /* 입력 글씨가 16px 보다 작으면 아이폰이 화면을 확대한다 */
  body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), body select, body textarea { font-size: 16px; }
  /* 누르는 영역 최소 높이 */
  body .bk-btn, body .bk-btn-sm { min-height: 46px; }
  /* 가로로 넘기는 칩·탭 줄: 잘린 채 멈춰 보이지 않게 끝을 여백으로 */
  body .overflow-x-auto { -webkit-overflow-scrolling: touch; scroll-padding-inline: 1rem; }
}
/* ── PC 화면 보정 (2026-10-05) — PC 에서도 아주 작은 글씨(9~11px)는 읽기 어렵다. 최소 12.5px, text-xs 는 13px ── */
@media (min-width: 768px) {
  body .text-\[9px\], body .text-\[10px\], body .text-\[11px\] { font-size: .78125rem; line-height: 1.4; }
  body .text-xs { font-size: .8125rem; line-height: 1.45; }
}
/* 바탕화면 아이콘으로 열었을 때(앱처럼 실행): 위·아래 안전 영역 */
@media (display-mode: standalone) {
  body { padding-top: env(safe-area-inset-top); }
}

/* ── 휴대폰 화면 모형 (.ph) — 홈 3단계·사용 설명서 공용. 크기는 모형 폭에 비례(cqi), 글자는 실제 글자라 어떤 크기에서도 또렷하다 ── */
.ph{container-type:inline-size;width:100%;max-width:290px;aspect-ratio:320/340;overflow:hidden;border:6px solid #17211D;border-bottom:0;border-radius:28px 28px 0 0;background:#F3F7F5;color:#17211D;text-align:left;}
.ph>*{margin-left:5cqi;margin-right:5cqi;}
.ph b{font-weight:800;display:block;}
.ph span{display:block;color:#5E6B65;font-size:5.8cqi;line-height:1.35;}
.ph em{font-style:normal;font-weight:800;display:block;text-align:center;border-radius:3.6cqi;font-size:6.4cqi;padding:3.8cqi 2cqi;}
.ph-bar{display:flex;align-items:center;gap:2.4cqi;margin:0 !important;padding:4.4cqi 5cqi;background:#fff;font-size:6.6cqi;}
.ph-logo{width:8.4cqi;height:8.4cqi;color:#0A5C40;flex:none;}
.ph-bar i{margin-left:auto;font-style:normal;font-size:4.6cqi;font-weight:700;border:.5cqi solid #DDE5E1;border-radius:99cqi;padding:1.2cqi 3.4cqi;}
.ph-bar i::after{content:'메뉴';}
.ph-title{font-size:8.2cqi;font-weight:800;letter-spacing:-.03em;margin-top:5cqi;}
.ph-dark{margin-top:4cqi;background:#17211D;color:#fff;border-radius:5cqi;padding:5.4cqi;}
.ph-dark b{font-size:7.8cqi;letter-spacing:-.02em;}
.ph-dark span{color:rgba(255,255,255,.75);margin-top:1.4cqi;}
.ph-dark em{background:#fff;color:#0A5C40;margin-top:4.4cqi;}
.ph-row{display:flex;align-items:center;gap:3.6cqi;margin-top:3.6cqi;background:#fff;border-radius:5cqi;padding:5cqi 5cqi;font-size:6.8cqi;}
.ph-row i{width:14cqi;height:14cqi;flex:none;border-radius:50%;background:#E2F3EB;color:#0A5C40;font-style:normal;font-weight:800;font-size:7cqi;display:flex;align-items:center;justify-content:center;}
.ph-row.is-line{justify-content:space-between;}
.ph-row.is-me{background:none;padding:0;margin-top:5cqi;}
.ph-row.is-me i{background:#0E7A55;color:#fff;}
.ph-new{margin-top:4.4cqi;background:#FFF0C2;border-radius:6cqi;padding:5.6cqi;}
.ph-new b{font-size:8.6cqi;line-height:1.3;letter-spacing:-.035em;margin-top:1.4cqi;word-break:keep-all;}
.ph-new em{background:#0E7A55;color:#fff;margin-top:4.6cqi;display:inline-block;padding:3.2cqi 5cqi;}
.ph-stats{display:grid;grid-template-columns:1fr 1fr;gap:3cqi;margin-top:3.6cqi;}
.ph-stats div{background:#fff;border-radius:5cqi;padding:4.4cqi 5cqi;}
.ph-stats b{font-size:11cqi;letter-spacing:-.02em;}
.ph--ad{background:#FDEEE9;}
.ph-who{display:flex;align-items:center;gap:3cqi;margin-top:6cqi;font-size:5.6cqi;}
.ph-who img{width:13cqi;height:13cqi;border-radius:50%;flex:none;}
.ph-who span{font-size:5.8cqi;}
.ph-who b{display:inline;color:#17211D;font-size:6.8cqi;}
.ph-head{margin-top:4.6cqi;font-size:9.4cqi;line-height:1.26;font-weight:800;letter-spacing:-.04em;word-break:keep-all;}
.ph .ph-cta{background:#E2603F;color:#fff;margin-top:5cqi;padding:4cqi 2cqi;}
.ph-art{margin-top:5cqi;background:#fff;border-radius:6cqi 6cqi 0 0;overflow:hidden;}
.ph-art img{display:block;width:100%;}
@media (min-width:768px){ .ph{border-width:7px;border-radius:30px 30px 0 0;} }
/* 설명서용 추가 조각 */
.ph-kakao{display:block;margin-top:5cqi;background:#FEE500;color:#17211D;border-radius:3.6cqi;padding:4cqi 2cqi;text-align:center;font-weight:800;font-size:6.2cqi;}
.ph-choice{margin-top:3.6cqi;background:#fff;border-radius:5cqi;padding:4.6cqi 5cqi;font-size:6.4cqi;font-weight:800;box-shadow:inset 0 0 0 .7cqi #DDE5E1;}
.ph-choice.is-on{box-shadow:inset 0 0 0 1cqi #0E7A55;background:#F0F9F4;}
.ph-choice span{font-weight:500;margin-top:.6cqi;}
.ph-chips{display:flex;flex-wrap:wrap;gap:2.4cqi;margin-top:4cqi;}
.ph-chips span{display:inline-block;background:#fff;color:#17211D;border-radius:99cqi;padding:2.6cqi 4.4cqi;font-size:5.6cqi;font-weight:700;box-shadow:inset 0 0 0 .6cqi #DDE5E1;}
.ph-chips span.is-on{background:#0E7A55;color:#fff;box-shadow:none;}
.ph .ph-go{background:#0E7A55;color:#fff;margin-top:5cqi;}
.ph-cust{margin-top:3.6cqi;background:#fff;border-radius:5cqi;overflow:hidden;}
.ph-cust-top{display:flex;align-items:center;justify-content:space-between;padding:4.4cqi 5cqi 3cqi;font-size:6.6cqi;}
.ph-cust-top i{font-style:normal;font-size:4.8cqi;font-weight:700;color:#0A5C40;background:#E2F3EB;border-radius:99cqi;padding:1.2cqi 3.4cqi;}
.ph-cust-btn{display:grid;grid-template-columns:1fr 1fr;border-top:.5cqi solid #E7EDEA;}
.ph-cust-btn span{display:block;text-align:center;padding:3.8cqi 0;font-size:5.8cqi;font-weight:800;color:#0A5C40;}
.ph-cust-btn span+span{border-left:.5cqi solid #E7EDEA;}

/* ===== 요금 안내(mb-*) — includes/pricing_table.html. 표 대신 '회원권 카드 한 장 + 할 수 있는 일 그림 6칸 + 무료 한 줄' ===== */
.mb{margin-top:2rem;max-width:44rem;}
.mb-card{position:relative;overflow:hidden;border-radius:28px;background:#0B4D38;color:#fff;padding:1.75rem 1.5rem 1.6rem;box-shadow:0 26px 44px -28px rgba(8,58,42,.85);}
.mb-card::after{content:'';position:absolute;right:-70px;top:-70px;width:220px;height:220px;border-radius:50%;border:34px solid rgba(255,255,255,.06);}
.mb-top{display:flex;align-items:center;gap:.6rem;font-size:1.0625rem;font-weight:700;color:rgba(255,255,255,.85);}
.mb-top .bk-ico{font-size:26px;color:#fff;--bk-ico-tone:#fff;--bk-ico-tone-o:.28;}
.mb-price{margin-top:.6rem;display:flex;align-items:baseline;gap:.45rem;line-height:1;font-weight:800;letter-spacing:-.05em;}
.mb-price b{font-size:4.25rem;font-variant-numeric:tabular-nums;}
.mb-price span{font-size:1.625rem;letter-spacing:-.03em;}
.mb-per{margin-top:.55rem;font-size:1.0625rem;color:rgba(255,255,255,.78);word-break:keep-all;}
.mb-grid{margin-top:1.4rem;display:grid;grid-template-columns:1fr 1fr;gap:.6rem;}
.mb-grid li{background:rgba(255,255,255,.1);border-radius:18px;padding:1rem .95rem 1.05rem;}
.mb-grid .bk-ico{font-size:30px;color:#fff;--bk-ico-tone:#9FE0C4;--bk-ico-tone-o:.55;}
.mb-grid b{display:block;margin-top:.55rem;font-size:1.125rem;line-height:1.3;font-weight:800;letter-spacing:-.03em;word-break:keep-all;}
.mb-grid em{display:block;margin-top:.15rem;font-style:normal;font-size:.9375rem;line-height:1.4;color:rgba(255,255,255,.75);word-break:keep-all;}
.mb-go{margin-top:1.4rem;display:flex;align-items:center;justify-content:center;width:100%;min-height:60px;border-radius:18px;background:#fff;color:#0B4D38;font-size:1.1875rem;font-weight:800;letter-spacing:-.02em;}
.mb-go:active{opacity:.8;}
.mb-free{margin-top:1rem;display:flex;gap:.9rem;align-items:flex-start;background:#fff;border-radius:22px;padding:1.2rem 1.25rem;box-shadow:inset 0 0 0 1.5px #DDE5E1;}
.mb-free-tag{flex:none;padding:.3rem .75rem;border-radius:999px;background:#E3F3EC;color:#0A5C40;font-size:.9375rem;font-weight:800;}
.mb-free p{font-size:1.0625rem;line-height:1.6;color:#17211D;word-break:keep-all;}
.mb-free p span{display:block;font-size:.9375rem;color:#5E6B65;}
.mb-free a{display:inline-block;margin-top:.35rem;font-weight:800;color:#0A5C40;text-decoration:underline;text-underline-offset:4px;}
@media (min-width:768px){
  .mb-card{padding:2.5rem 2.5rem 2.25rem;}
  .mb-price b{font-size:5.25rem;}
  .mb-grid{grid-template-columns:repeat(3,1fr);gap:.8rem;}
  .mb-go{max-width:22rem;}
}

/* 휴대폰 모형 안의 입력 칸(프로필 적기 화면) */
.ph-form{margin-top:3.2cqi;background:#fff;border-radius:4.5cqi;padding:3.6cqi 5cqi;box-shadow:inset 0 0 0 .5cqi #DDE5E1;}
.ph-form span{display:block;font-size:4.6cqi;color:#5E6B65;}
.ph-form b{display:block;margin-top:.6cqi;font-size:6.6cqi;font-weight:800;color:#17211D;letter-spacing:-.02em;}

/* ===== 채용 화면 공통(rk) — 공고 등록·수정·요금·패키지·상세. 큰 글씨·큰 입력칸·큰 버튼 (2026-10-05) ===== */
.rk{font-size:1.0625rem;}
.rk h1{letter-spacing:-.04em;}
.rk label{font-size:1rem !important;font-weight:700 !important;color:#17211D !important;margin-bottom:.4rem !important;}
.rk input[type=text],.rk input[type=tel],.rk input[type=email],.rk input[type=number],.rk input[type=date],.rk select,.rk textarea{min-height:52px;border-radius:14px !important;border:1.5px solid #DDE5E1 !important;font-size:1.0625rem !important;padding-left:1rem !important;padding-right:1rem !important;background:#fff;}
.rk textarea{padding-top:.8rem !important;line-height:1.6;}
.rk input:focus,.rk select:focus,.rk textarea:focus{outline:none;border-color:#0E7A55 !important;box-shadow:0 0 0 3px rgba(14,122,85,.15) !important;}
.rk .rounded-xl.shadow-sm,.rk .rounded-2xl.shadow-sm{border-radius:22px !important;box-shadow:0 1px 2px rgba(23,33,29,.05) !important;border:0 !important;}
.rk button.bg-primary-600,.rk a.bg-primary-600{min-height:54px;border-radius:16px !important;font-size:1.0625rem !important;font-weight:800 !important;padding-left:1.5rem;padding-right:1.5rem;}
.rk button.border,.rk a.border{min-height:54px;border-radius:16px !important;font-size:1.0625rem !important;font-weight:700 !important;}
.rk h2.text-lg{font-size:1.3125rem !important;font-weight:800 !important;letter-spacing:-.03em;}
.rk .text-xs{font-size:.875rem !important;}
.rk .text-sm{font-size:.9375rem !important;}

/* 대시보드 왼쪽 메뉴(PC) — 글씨·줄 높이를 한 단계 키운다(2026-10-05) */
aside nav[aria-label="대시보드 메뉴"] > a, aside nav[aria-label="대시보드 메뉴"] div > a { font-size: .96875rem !important; padding-top: .6rem; padding-bottom: .6rem; }
aside nav[aria-label="대시보드 메뉴"] p, aside nav[aria-label="대시보드 메뉴"] .text-xs { font-size: .8125rem !important; }

/* ── 보험킹 소개 영상 (includes/intro_video.html) ── */
.bk-video{margin:1.75rem auto 0;max-width:960px;}
.bk-video video{display:block;width:100%;border-radius:16px;border:1px solid #DDE5E1;background:#F4F7F5;}
.bk-video-v{display:none !important;}
.bk-video figcaption{margin-top:.7rem;text-align:center;font-size:15px;font-weight:600;color:#5E6B65;}
@media (max-width:767px){
  .bk-video{max-width:340px;}
  .bk-video-h{display:none !important;}
  .bk-video-v{display:block !important;}
}
@media print{.bk-video{display:none !important;}}