/* lib/css/style.css — 공통 CSS 단일 파일
 *
 * 로드: lib/php/function.php common() (filemtime 캐시버스트) — **전 페이지**
 * 구성: ① 글로벌/폰트/토큰(:root) ② 공통 bi-* 컴포넌트
 *       ③ [구 list.css 이관분] ④ [구 write.css 이관분]   ← 2026-08-07 일원화
 *
 * ⚠ 페이지타입별 CSS 분리(list.css/write.css) 는 **폐지**됐다. 새 공통 규칙은
 *   페이지타입을 따지지 말고 이 파일 하나에 추가한다(sg2 = 단일 규격).
 *   과거 분리 구조가 "이 페이지엔 안 실림" → 모듈별 재발명을 낳았다.
 * 모듈 전용은 template/page/{module}/style.css (이 파일 뒤에 로드 → override 가능).
 */

/*////////////////////////////////////////////*/
/* 터치모니터 더블클릭 확대방지 */
html {
    -ms-touch-action: none;
    -ms-content-zooming: none;

	/* 21.09.09 ios에서 폰트사이즈자동조절되는것 막기위해서 추가 ( Prevent font scaling in landscape ) */
	-webkit-text-size-adjust: none; /*Chrome, Safari, newer versions of Opera*/
	-moz-text-size-adjust: none; /*Firefox*/
	-ms-text-size-adjust: none;  /*Ie*/
	-o-text-size-adjust: none; /*old versions of Opera*/
}

/* ============================================================
   CSS 변수 토큰 — docs/71 Phase 2: renewal.css :root → style.css 이전 (단일 소스)
   style.css 는 common() 으로 전 페이지(팝업·로그인 포함) 로드 → 토큰 전역 보장
   ============================================================ */
:root {
    /* 팔레트 원색 — 오버레이/딤 전용 앵커. 2026-08-07 추가.
       rgba(0,0,0,x) / rgba(255,255,255,x) 가 49곳에서 리터럴로 쓰였다. 투명도만 다른 같은 색이라
       색 자체를 토큰으로 잡고 투명도는 color-mix 로 준다:
         color-mix(in srgb, var(--black) 55%, transparent)
       ⚠ --bg-card(#FFFFFF)와 값은 같지만 역할이 다르다(카드 배경 ≠ 흰색 오버레이). 섞어 쓰지 않는다. */
    --black: #000000;
    --white: #FFFFFF;

    /* 브랜드 색상 */
    --brand-navy:    #00156E;
    --brand-blue:    #0023B7;
    --brand-purple:  #5E1E7B;
    --brand-lavender:#DEDBF0;

    /* 브랜드 hover/focus 변형 */
    --brand-blue-hover: #0018A0;
    --brand-navy-hover: #000F55;
    --brand-blue-light: rgba(0, 35, 183, 0.08);

    /* 텍스트 팔레트 */
    --txt-primary:   #111827;
    --txt-secondary: #374151;
    --txt-muted:     #6B7280;
    --txt-disabled:  #9CA3AF;

    /* 배경 */
    --bg-page:    #F8F9FC;   /* index.html body background */
    --bg-card:    #FFFFFF;
    --bg-input:   #F9FAFB;
    --bg-section: #FAFAFA;
    /* 선택된 행의 옅은 바탕. 스타일보드 원칙 02 «선택 상태는 indigo 하나로» 의 짝 —
     * 강조 막대·체크박스는 --color-indigo-600, 바탕은 이 색이다(2026-08-21 신설). */
    --bg-selected: #F8FAFF;

    /* ── 팝업 규격 눈금 (2026-08-25 신설) ──────────────────────────────
     * **styleboard4.html 이 팝업의 유일한 규격이다**(사용자 확정). 옛 §38 은 폐기.
     * 보드 값 중 앱 눈금(--fs-*·--space-*·--radius-*)에 **없는 것이 많다**
     *   글자 15 · 여백 18 · 라운드 9 · 높이 34/37/38/30 …
     * 사용자 지시: «토큰이 없으면 추가하자» → 팝업 전용 눈금을 여기서 선언한다.
     * ⚠ 팝업은 앱의 다른 화면과 **다른 눈금**을 쓴다. 팝업 CSS 는 이 토큰만 부른다 —
     *   그래야 «보드와 다른가» 를 이 한 곳에서 볼 수 있다.
     * 검사: node renew_crm/tools/qc/probe_popspec.mjs (보드를 열어 기대값을 읽는다) */
    --pop-w:          423px;  /* 일반 팝업 (보드 §07) */
    --pop-w-form:     720px;  /* 폼형 팝업 (사용자 확정 2026-08-25) */
    --pop-w-wide:    1000px;  /* 넓은 폼 — 예약일시처럼 3분할에 시간칩이 여럿인 것(사용자 확정 2026-08-28) */
    --pop-radius:      12px;
    --pop-line:     #E5E7EB;  /* 셸 테두리 · 리스트 상단 */
    --pop-line-soft:#F3F4F6;  /* 그리드 행 구분선 · 폼 섹션 구분 */
    --pop-head-pad-y:  14px;
    --pop-head-pad-x:  18px;
    --pop-head-gap:    10px;
    --pop-title-fs:    15px;
    --pop-cnt-fs:      12px;
    --pop-close:       26px;
    --pop-foot-pad-t:  13px;
    --pop-foot-pad-b:  12px;
    --pop-foot-gap:     8px;
    --pop-btn-h:       34px;
    --pop-btn-sm-h:    30px;
    --pop-btn-r:        8px;
    --pop-btn-fs:      13px;
    --pop-btn-sm-fs:   12px;
    --pop-search-h:    38px;
    --pop-search-r:     9px;
    --pop-field-h:     36px;
    --pop-field-r:      8px;
    --pop-sel:      #4F46E5;  /* 선택 강조 — 주 액션(파랑)과 구분 */
    --pop-ico:      #9CA3AF;  /* 헤더 아이콘 — 색을 넣지 않는다 */
    --pop-close-col:#6B7280;
    /* 보드 §04 — 팝업 그림자 1종. 앱 --shadow-* 눈금에 없는 값이라 팝업 토큰으로 둔다. */
    --pop-shadow: 0 10px 40px rgba(20, 30, 60, .16), 0 2px 8px rgba(20, 30, 60, .08);
    --pop-btn-nav-h:   37px;  /* 검색 버튼 — 보드 §06 */
    --pop-btn-nav-w:   57px;
    --pop-f-fs:      13px;  /* 폼 입력·셀렉트 글자 — 보드 §08 */
  --pop-f-gap:      5px;  /* 라벨↔입력 — 보드 §08 */
  --pop-tab-gap:    7px;  /* 탭 사이 — 보드 §08 */
  --pop-pill-pad-x:13px;  /* 칩 좌우 */
  --pop-row-gap:   21px;  /* 행 이름↔금액 사이 */
  --pop-tab-line:  #4C44D5;  /* 활성 탭 테두리 — 보드 §08 */
  --pop-pill-bg:   #EEF2FF;  /* 활성 칩 배경 */
  --pop-pill-line: #BFD0FF;  /* 활성 칩 테두리 */
  --pop-row-min-h:   62px;  /* 2줄 카드행 최소 높이 — 보조줄이 없어도 같은 높이 */
  --pop-row-pad-y:   12px;  /* 2줄 카드행 여백 — 보드 §08 */
    --pop-row-pad-x:   14px;
    --pop-sel-bar:      4px;  /* 선택 행 좌측 막대 — 테두리를 «대신» 한다 */
    --pop-check:       17px;  /* 체크 · 라디오 */
    --pop-check-r:      2px;
    --pop-label-fs:    13px;  /* 선택 라벨 */
    --pop-search-pad-l: 12px; /* 돋보기 들여쓰기 — 보드 §07-2 «인풋 안쪽 좌측 12px» */
    --pop-search-pad-r: 13px;



    /* 보더 */
    --border-base:  #E5E7EB;
    --border-light: #F3F4F6;

    /* 상태 색상 */
    --color-success: #059669;
    --color-danger:  #EF4444;
    --color-warning: #F59E0B;
    --color-npay:    #03C75A;
    --color-kakao:      #FAE102;   /* 카카오 브랜드 노랑 — 말풍선 머리 */
    --color-kakao-txt:  #25262A;   /* 카카오 말풍선 글자 */
    --radius-talk:      10px;      /* 말풍선 모서리 — 브랜드 형태 */

    /* 레이아웃 토큰 */
    --header-height: 50px;   /* 헤더 바 높이 (logo 와 분리) */
    --logo-height:   64px;   /* 사이드바 상단 브랜드(logo) 높이 */
    --sidebar-width: 256px;

    /* 그림자 스케일 (erp-design 기준 — 2026-06-11)
       2026-08-07: xs/sm/md 3단뿐이라 **오버레이(드로어·풀모달)급이 규격 밖**이었다 → --shadow-lg 추가.
       그림자는 blur 로 단계를 고른다: ≤1px=xs · 2~3px=sm · 4~8px=md · 12px↑=lg.
       ⚠ **색 있는 그림자 금지**(구 brand blue/rose 틴트 10곳은 중립 단계로 통일) — 강조는 색·보더로. */
    --shadow-xs: 0 1px 1px 0 rgba(0, 0, 0, 0.04);   /* 컴팩트 버튼/위젯 */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);   /* 카드 기본 */
    --shadow-md: 0 4px 8px 0 rgba(0, 0, 0, 0.08);   /* 부각 카드/모달 */
    --shadow-lg: 0 12px 32px 0 rgba(0, 0, 0, 0.18); /* 오버레이(드로어·풀모달·팝오버 최상단) */
    --shadow-inset: inset 0 1px 2px 0 rgba(0, 0, 0, 0.04); /* 눌린 느낌 — 입력/트랙 안쪽 */

    /* 포커스 링 — 2026-08-07 신설. 구현이 폭 1·2·3px × 투명도 .07~.25 로 42곳 제각각이었다.
       입력·버튼 포커스는 **이 하나만** 쓴다(색 변형 금지 — 상태색은 border 로). */
    --ring-focus: 0 0 0 3px rgba(0, 35, 183, 0.12);

    /* 둥글기 스케일 (erp-design 기준) */
    --radius-xs: 3px;    /* 미세 배지/칩 */
    --radius-sm: 4px;    /* 작은 배지/태그 */
    --radius-md: 6px;    /* bi-btn--sm */
    --radius-lg: 8px;    /* 버튼/입력 기본 (rounded-lg) */
    --radius-xl: 12px;   /* 카드 기본 (rounded-xl) */
    --radius-2xl: 16px;  /* 큰 카드/서브바 */
    --radius-full: 9999px; /* pill/완전둥근 (999px 포함 스냅) */

    /* 인터랙션 (erp-design: hover-lift 대신 press-down) */
    --press-scale: 0.98;                 /* active:scale-98 */
    --transition-base: all 0.15s ease;   /* transition-all */

    /* ============================================================
       여백·타이포·z-index 토큰 (2026-07-27 추가, CSS_ARCHITECTURE_REVIEW P1)
       ※ 순수 추가 — 기존 화면 무변화. 모듈은 하드코딩 대신 이 토큰 참조.
       ============================================================ */

    /* 여백 스케일 — 16px 까지 2px 그리드, 그 위는 4px 그리드.
       2026-08-07: 구 스케일(4의 배수만)은 **너무 성겨서** 배지 패딩·아이콘 간격 같은 미세 여백을
       담지 못했다. 그 결과 1·2·3·5·6·7·9·10·11·13·14·15px 가 700곳 넘게 리터럴로 쓰였다.
       반쪽 단계 4개(2·6·10·14)만 추가해 스케일을 규칙적으로 만들고, 나머지는 최근접 스냅했다.
       ⚠ 새 여백이 필요하면 토큰을 늘리지 말고 **이 스케일에서 고른다.** */
    --space-0_5: 2px;
    --space-1:   4px;
    --space-1_5: 6px;
    --space-2:   8px;
    --space-2_5: 10px;
    --space-3:  12px;
    --space-3_5: 14px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;   /* 그리드 마지막 행 잘림 방지 여백 */
    --space-11: 44px;   /* 계산대 합계바 칸 간격 */
    --space-18: 72px;   /* 하단 고정 닫기바 높이만큼의 자리 */

    /* 콘텐츠/카드 공통 여백 */
    --content-pad: 16px;   /* bi-page 등 콘텐츠 영역 안쪽 여백 */
    --card-pad:    16px;   /* 카드 내부 padding */
    --card-gap:    12px;   /* 카드/요소 간 gap */

    /* 팝업 콘텐츠(iframe 본문) 영역 공통 여백 — 헤더(.bi-pop-head) 아래 본문 표준 padding.
       모든 팝업 콘텐츠 루트가 이 토큰을 불러써 헤더↔본문·본문↔가장자리 여백을 일관 유지(개별 하드코딩 금지). */
    --pop-pad-y:   22px;   /* 팝업 본문 상하 여백 */
    --pop-pad-x:   22px;   /* 팝업 본문 좌우 여백 */

    /* 글자 크기 스케일 */
    --fs-2xs:  10px;   /* 미세 캡션/뱃지 (실사용 다수) */
    --fs-xs:   11px;
    --fs-sm:   12px;
    --fs-base: 13px;   /* 본문 기본 */
    --fs-md:   14px;
    --fs-lg:   16px;
    /* 페이지 타이틀(.bi-erp-title)이 쓰던 값. 문서 §4 는 «역할 이름으로 정의» 하라고 하는데
     * 이 역할만 리터럴 18px 로 적혀 있었다 — 픽셀을 바꾸지 않고 토큰으로 등재한다(2026-08-14).
     * 제목을 16 이나 20 으로 «가장 가까운 토큰» 이라며 옮기면 전 화면 제목이 조용히 달라진다. */
    --fs-2lg:  18px;
    --fs-xl:   20px;
    /* 표시용 큰 숫자 — 대시보드 KPI·POS 최종금액처럼 «읽는 글자» 가 아니라 «보는 수» 다.
     * 값이 이미 화면에 있었는데 토큰이 없어 리터럴로 적혀 있었다(2026-08-14 등재). */
    --fs-2xl:  24px;
    --fs-3xl:  30px;

    /* 아이콘 크기 — 규격 문서 §11 (2026-08-14 등재)
     * 전 화면 3,160개를 실측했더니 10·11·12·13·14·16px 이 2,815개였다. 그건 «정한 값» 이 아니라
     * **옆 글자 크기를 물려받은 것**이다(타이포 스케일과 정확히 일치). 그래서 규칙은 이렇다:
     *   기본 — 아이콘은 제 크기를 정하지 않는다. 글자를 따라간다.
     *   홀로 쓰는 것(빈 상태·배너·강조)만 이 셋에서 고른다. */
    --icon-sm: 16px;
    --icon-md: 24px;
    --icon-lg: 32px;

    /* 글자 굵기 / 행간 */
    --fw-normal:   400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;
    --fw-extrabold: 800;   /* 실사용 다수 */
    --fw-black:     900;   /* 실사용 다수 */
    --lh-tight: 1.3;
    --lh-base:  1.5;

    /* 등폭(숫자·시각·코드) — 2026-08-07 신설. 이전엔 같은 용도를 5가지로 제각각 적고 있었다:
       `monospace` / `ui-monospace, Menlo, monospace` / `ui-monospace, SFMono-Regular, Menlo, monospace`
       / `…Monaco, Consolas, "Liberation Mono", "Courier New", monospace` / `'Inter', monospace`.
       등폭이 필요한 곳은 전부 이 토큰만 쓴다(본문 서체는 body 상속 — §폰트 규격). */
    /* 본문 서체 — 값은 여기 한 곳에만 적는다. 쓰는 쪽은 전부 var(--font-sans).
     * (2026-08-24 신설: 벤더 CSS 를 덮어야 하는 자리가 생겨 «상속만으로는 안 되는» 곳이 있다.
     *  그 자리에 'Pretendard' 를 다시 손으로 적으면 값이 두 군데가 된다 → 토큰으로 한 곳에.) */
    --font-sans: 'Pretendard', sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

    /* z-index 스케일 (임의값 방지) */
    --z-dropdown: 1000;
    --z-sticky:   1020;
    --z-header:   1030;
    --z-modal:    1050;
    --z-popover:  1060;
    --z-toast:    1080;

    /* ============================================================
       색 팔레트 스케일 (2026-07-27 추가, CSS_PALETTE_PROPOSAL / P1-b)
       ※ 순수 추가 — 기존 화면 무변화. 실사용 색(Tailwind 계열) → 시맨틱 스케일.
       ※ 값-동일 단계는 기존 토큰 alias 로 연결(단일 출처). 신규 단계만 리터럴.
       ※ 모듈은 하드코딩 hex 대신 이 토큰을 참조(값-동일 치환).
       ============================================================ */

    /* 중립(Gray) — 기존 txt/border 를 하나의 스케일로 편입(alias) */
    --gray-50:  var(--bg-input);      /* #F9FAFB */
    --gray-100: var(--border-light);  /* #F3F4F6 */
    --gray-200: var(--border-base);   /* #E5E7EB */
    --gray-300: #D1D5DB;
    --gray-400: var(--txt-disabled);  /* #9CA3AF */
    --gray-500: var(--txt-muted);     /* #6B7280 */
    --gray-600: #4B5563;
    --gray-700: var(--txt-secondary); /* #374151 */
    --gray-800: #1F2937;
    --gray-900: var(--txt-primary);   /* #111827 */

    /* Danger(빨강) */
    --color-danger-50:  #FEF2F2;
    --color-danger-100: #FEE2E2;
    --color-danger-200: #FECACA;
    --color-danger-500: var(--color-danger);  /* #EF4444 */
    --color-danger-600: #DC2626;
    --color-danger-700: #B91C1C;

    /* Warning(앰버) */
    --color-warning-50:  #FFFBEB;
    --color-warning-100: #FEF3C7;
    --color-warning-200: #FDE68A;
    --color-warning-300: #FCD34D; /* 2026-08 스케일 갭 보완(amber-300) — 사이드 즐겨찾기 hover 등 */
    --color-warning-500: var(--color-warning); /* #F59E0B */
    --color-warning-600: #D97706;
    --color-warning-700: #B45309;

    /* Success(그린) — 기본 성공색(--color-success #059669)=600. 밝은 emerald=500 */
    --color-success-50:  #ECFDF5;
    --color-success-100: #D1FAE5;
    --color-success-200: #A7F3D0;
    --color-success-500: #10B981;
    --color-success-600: var(--color-success); /* #059669 */
    --color-success-700: #047857;

    /* Info(밝은 정보/링크 블루 — brand-blue 와 별개) */
    --color-info-50:  #EFF6FF;
    --color-info-100: #DBEAFE;
    --color-info-200: #BFDBFE;
    --color-info-500: #3B82F6;
    --color-info-600: #2563EB;
    --color-info-700: #1D4ED8;

    /* Indigo(강조 보조) */
    --color-indigo-50:  #EEF2FF;
    --color-indigo-100: #E0E7FF;
    --color-indigo-500: #6366F1;
    --color-indigo-700: #4338CA;

    /* Purple/Pink(브랜드 보조) — brand-purple(#5E1E7B) 과 별개의 밝은 보라 */
    --color-purple-50:  #FAF5FF;
    --color-purple-200: #E9D5FF;
    --color-purple-600: #9333EA;
    --color-purple-700: #7E22CE;
    --color-pink-500:   #EC4899;

    /* Rose(핑크빨강) — danger(정통 빨강)와 별개의 '의도적 액센트'(로즈 카테고리·신규등록 등). 실사용 값 그대로 */
    --color-rose-50:  #FFF1F2;
    --color-rose-100: #FFE4E6;
    --color-rose-200: #FECDD3;
    --color-rose-500: #F43F5E;
    --color-rose-600: #E11D48;
    --color-rose-700: #BE123C;

    /* 스케일 확장 단계 (2026-07-27) — 실사용 중인 exact-Tailwind 값을 기존 스케일에 편입(값-동일) */
    --gray-950:          #030712;
    --color-danger-300:  #FCA5A5;
    --color-danger-400:  #F87171;
    --color-warning-800: #92400E;
    --color-warning-900: #78350F;
    --color-success-300: #6EE7B7;
    --color-success-400: #34D399;
    --color-success-800: #065F46;
    --color-info-300:    #93C5FD;
    --color-info-900:    #1E3A8A;
    --color-indigo-200:  #C7D2FE;
    --color-indigo-600:  #4F46E5;
    --color-indigo-800:  #3730A3;
    --color-indigo-900:  #312E81;
    --color-purple-500:  #A855F7;
    --color-purple-800:  #6B21A8;
}

body {
    margin: 0;
    background: var(--bg-page);
    /* ▣ 폰트 규격 — 값은 :root 의 --font-sans 한 곳에만 있다. 쓰는 쪽은 전부 그 토큰을 참조한다.
         예외는 아이콘(i.fa/fas/far/fal → 'Font Awesome 5 Pro')과 등폭(var(--font-mono))뿐.
       Pretendard: 본문 서체(header.php 가 CDN static dynamic-subset 로드) · sans-serif: 로드 실패 시 시스템 폴백
       ⚠ 2026-08-07 정정: 옛 주석은 Inter/Noto Sans KR/Nanum Gothic/dotum 폴백 스택을 설명했지만
         실제 선언에는 그 어느 것도 없었다(주석↔코드 불일치). 렌더링 실태에 맞춰 주석을 고쳤다.
       ⚠ 2026-08-24 정정: 옛 주석은 "이 한 줄이 전부. 나머지는 상속"이라고 했는데 **사실이 아니었다** —
         dhx 그리드는 벤더 CSS 가 제 서체(Roboto)를 직접 박고, 폼 컨트롤(input·select·button)은
         브라우저 기본값이라 애초에 상속을 안 받는다. 그 두 자리는 아래에서 **명시적으로** 되돌린다.
       ⚠ 2026-08-24 추가 — 세 번째 자리: dhx **차트**(plugin/chart_gpl)도 벤더 CSS 가 제 서체를
         박는다(이번엔 'Nanum Gothic'). 축·범례·툴팁 글자가 본문과 다르게 나왔다(사용자 지적).
         차트 CSS 가 style.css 보다 뒤에 로드돼(모듈 view 에서 개별 link) 특이도가 같으면 진다 —
         아래서 선택자를 더 구체적으로 잡아 이긴다(§24-4 그리드 폰트 고정과 같은 원리). */
    font-family: var(--font-sans);
}
/* dhx 차트(plugin/chart_gpl/chart.css) 축·범례·툴팁·도넛 글자 — 위 body 주석 세 번째 항목.
   벤더가 .dhx_chart .scale-text 등에 (0,2,0) 으로 'Nanum Gothic' 을 박고 스타일시트가 뒤에
   로드돼 이긴다. .bi-page 로 한 단 더 감싸 (0,3,0) 으로 이긴다. */
.bi-page .dhx_chart .legend-text,
.bi-page .dhx_chart .scale-text,
.bi-page .dhx_chart .scale-title,
.bi-page .dhx_chart .tooltip-text,
.bi-page .dhx_chart .donut-value-title,
.bi-page .dhx_chart .donut-value { font-family: var(--font-sans); }

/* form 은 UA 스타일시트가 `margin-block-end: 1em` 을 준다 — 폼을 감싸기만 해도 아래에
 * 빈 줄이 생긴다. 그래서 12개 팝업이 `style="margin:0px; padding:0px"` 을 달고 있었다.
 * 리셋은 리셋 자리에 둔다(2026-08-11). */
form { margin: 0; padding: 0; }

input {
    /*input 입력시, 한글우선 // ie만 적용됨*/
    ime-mode: active;
}

/* 241108 로고 css*/

.h_log_box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2_5);
    padding-right: var(--space-6);
}

.h_shooting_star {
    align-self: flex-end;
    margin-bottom: var(--space-1);
    width: 34px;
    height: 34px;
}

.h_log_wirte_div {
    margin-left: var(--space-1);
}

.h_logo_wirte_top {
    font-size: var(--fs-2xl);
    font-weight: var(--fw-semibold);
    margin-bottom: calc(var(--space-1) * -1);
    letter-spacing: -0.01em;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;    
    color: var(--white);

}

.h_logo_wirte_bottom {
    font-size: var(--fs-2xs);   /* docs/71 Phase 4: renewal 9px 병합 */
    font-weight: var(--fw-medium);
    letter-spacing: -0.02em;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: color-mix(in srgb, var(--white) 50%, transparent);
    
}

/* .menu_open / .login_info — docs/71 Phase 4: renewal 병합본으로 통합, 원본 중복 제거 */

.sub_menu_open {
    /*헤더 상단우측 img 왼쪽 위치한 : */
    float: right;
    width: 10px;
    height: 24px;
    background-image: radial-gradient(circle at center, white 2px, transparent 1px);
    background-size: 12px 8px;
    background-color: var(--color-info-600);
    margin: var(--space-5) var(--space-1_5) var(--space-1_5) var(--space-1_5);
}

.helpu {
    text-decoration: none;
    color: white;
    font-size: var(--fs-md);
    margin: var(--space-5) var(--space-1_5) 0px var(--space-1);
}

.login_user {
    float: right;
    margin: var(--space-2) var(--space-4) 0px var(--space-1);
}

.search_div {
    padding: var(--space-3) 0px var(--space-1_5) 0px;
    margin-left: var(--space-5);
    width: 250px;
    border-bottom: 1px solid var(--gray-100);
}

.search_input {
    /*10-19 130->260px;*/
    width: 220px;
    /* height: 20px;*/
    background-color: var(--gray-50);
    /* margin: 0px 3px 0px 3px;*/
    border: 0px;
    /* border-bottom: 2px solid var(--gray-100);*/
    color: var(--gray-900);
    padding: var(--space-1_5) 0px var(--space-1) var(--space-2);
    font-size: var(--fs-md);
}
.sch_ninput {
    width: 220px;
    background-color: var(--gray-50);
    border: 0px;
    color: var(--gray-900);
    padding: var(--space-1_5) 0px var(--space-1) var(--space-2);
    font-size: var(--fs-md);
}

.sch_nbtn {
    text-decoration: none;
    width: 20px;
    position: absolute;
    height: 30px;
}

#sch_but {
    text-decoration: none;
    width: 20px;
    position: absolute;
    height: 30px;
}

.body_all {
    width: 100%;
    height: 100%;

    background: var(--gray-50);
}

.body-header {
    height: 45px;
    /*    display: -webkit-flex;
    display: flex;*/
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    background: var(--bg-card);
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: center;
    align-items: center;
    position: relative;
    width: 100% z-index: 101;
}

.body-main {

    height: 100%;

}

.body-main-sch {
    height: 50px;
    border-bottom: 2px solid var(--gray-100);
}

/* ================ 2018-10-19 상단 헤더부분 수정 ============================*/
.body-title {
    /* 매출등록은 직접 적용함*/
    /*padding: 13px 30px 9px 40px;
    width: 70px;*/
	width: auto;
    float: left;
    font-size: var(--fs-lg);
    font-weight: bold;
    color: var(--gray-500);
    margin-right: var(--space-1_5);
	text-align: center;
    padding: var(--space-3_5) 40px;
    height: 45px;
    box-sizing: border-box;

	border-bottom: solid 3px var(--brand-blue);
}

.body-title-sub {
    /* 매출등록은 직접 적용함*/
	/*
    padding: 13px 30px 9px 40px;
	width: 70px;*/
	width: auto;
    float: left;
    font-size: var(--fs-lg);
    font-weight: bold;
    color: var(--gray-500);
    margin-right: var(--space-1_5);
	text-align: center;
    padding: var(--space-3_5) 40px;
    height: 45px;
    box-sizing: border-box;

	border-bottom: solid 3px var(--gray-300);
	cursor: pointer;

}

.body-menu {
    float: right;
    /*1019 상단메뉴수정: 10 ->13px */
    padding: var(--space-3_5) var(--space-2_5) var(--space-1_5) var(--space-1_5);
    color: var(--gray-500);
}

.body-menu-sub {
    padding: 0px var(--space-5) 0px var(--space-3);
    font-size: var(--fs-md);
}

/*========================== [등록수정페이지 UI변경] =================================*/
/* 등록수정페이지 그룹*/

/* 부가설명 */
.sub_description {
    color: var(--gray-400);
    font-size: var(--fs-xs);
    font-weight: 300;
    padding-top: var(--space-1_5);
    display: inline-block;
}

/*===========================================================================*/
select {
    padding: var(--space-0_5) var(--space-0_5);

}

textarea, select {
    border: 1px solid var(--gray-300);
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    border-radius: var(--radius-xs);
    border-top: 1px solid var(--gray-300);
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    color: var(--gray-700);
    font-size: var(--fs-base);
    height: 25px;
    line-height: 25px;
    padding: var(--space-0_5) var(--space-2);
}

button {
    cursor: pointer;
}

.sub_menu_button {
    cursor: pointer;
}

input[type="checkbox"]+label {
    display: inline-block;
    background-image: url("/img/page/checkbox_none.png");
    width: 18px;
    height: 18px;
    cursor: pointer;
    position: relative;
    top: 3px;
}

input[type="checkbox"]:checked+label {
    /*background-color: var(--gray-500);*/
    width: 18px;
    height: 18px;
    /*	border: 0px;     12/31 정지은 권한정보 체크시 row 높이 달라지는 문제로 주석처리    */
    background-image: url("/img/page/checkbox.png");
}

input[type="checkbox"] {
    visibility: hidden;
    display: none;
    position: relative;
}

input[type="radio"]+label {
    display: inline-block;
    background-image: url("/img/page/radio.png");
    width: 18px;
    height: 18px;
    cursor: pointer;
    position: relative;
    top: 3px;
}

input[type="radio"]:checked+label {
    /*background-color: var(--gray-500);*/
    width: 18px;
    height: 18px;
    border: 0px;
    background-image: url("/img/page/radio_checked.png");
}

input[type="radio"] {
    visibility: hidden;
    display: none;
    /* position: relative; */
    /* 2024.05.31 radio 버튼 poisition 주석 처리 문소연 */
}

/* ===== sg2 §17 라디오/체크박스 — 공통(전역) 통합 (2026-08)
   위 전역 규칙이 native input 을 sprite(+label) 용으로 숨김. 래퍼 패턴
   (.bi-radio-label / .bi-checkbox-label = input 이 label 안 + <span>텍스트)은
   +label 형제가 없어 sprite 도 안 뜨고 input 도 숨겨져 깨졌음.
   → 래퍼 스코프에서만 native input 을 재활성(accent-color=브랜드블루). 컨테이너
   (filter-card/write-page)에 의존하지 않아 list/write/styleguide 어디서든 self-contained.
   특이도 0,1,1 > 전역 0,0,1 이라 !important 불필요. layout 은 list.css/write.css 에서 이관. */
.bi-radio-group { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
/* sg2 §17 체크박스 그룹 — 여러 체크박스 세로 나열(라디오 그룹 대응). 다중행 라벨은 상단 정렬 */
.bi-checkbox-group .bi-checkbox-label { align-items: flex-start; }
.bi-radio-label {
    display: inline-flex; align-items: center; gap: var(--space-1_5);
    font-size: var(--fs-base); color: var(--txt-secondary);
    cursor: pointer; user-select: none;
}
.bi-checkbox-label {
    display: inline-flex; align-items: center; gap: var(--space-2);
    font-size: var(--fs-md); color: var(--txt-secondary);
    font-weight: var(--fw-normal); cursor: pointer;
}
.bi-radio-label input[type="radio"] {
    visibility: visible; display: inline-block;
    accent-color: var(--brand-blue);
    width: 14px; height: 14px; margin: 0; cursor: pointer; flex-shrink: 0;
}
.bi-checkbox-label input[type="checkbox"] {
    visibility: visible; display: inline-block;
    accent-color: var(--brand-blue);
    width: 16px; height: 16px; margin: 0; cursor: pointer; flex-shrink: 0;
}
/* ⚠ 규격 래퍼 안에서는 옆에 오는 <label> 이 **글자**다.
 *   전역 레거시 규칙 `input[type=checkbox]+label` 이 그 label 을 18px 스프라이트 상자로
 *   바꿔버려, 로그인 화면의 "로그인 정보 저장" 이 한 글자씩 세로로 흘렀다(2026-08-12).
 *   래퍼 스코프(0,1,2)가 전역(0,1,1)을 이기므로 는 필요 없다. */
.bi-checkbox-label input[type="checkbox"] + label,
.bi-radio-label input[type="radio"] + label {
    width: auto; height: auto;
    background: none;
    text-indent: 0; overflow: visible;
    display: inline; cursor: pointer;
}


.bcolor2 {
    cursor: pointer;
    border: 0px;
    line-height: 20px;
    font-weight: bold;
    background: var(--color-info-900);
    -webkit-border-radius: 2px;
    border-radius: var(--radius-xs);
}

.bcolor3 {
    cursor: pointer;
    border: 0px;
    line-height: 20px;
    font-weight: bold;
    background: var(--gray-700);
    -webkit-border-radius: 2px;
    border-radius: var(--radius-xs);
}

.bcolor4 {
    cursor: pointer;
    border: 0px;
    line-height: 20px;
    font-weight: bold;
    background: var(--color-info-600);   /* 2026-08-07 팔레트 밖 #0087a9(청록) → info 계열로 통일. .bcolor* 는 npay 팝업 전용 레거시 세트 */
    padding: 0 var(--space-2);
    -webkit-border-radius: 2px;
    border-radius: var(--radius-xs);
}

.bcolor5 {
    cursor: pointer;
    border: 0px;
    line-height: 20px;
    font-weight: bold;
    background: var(--color-success-500);
    -webkit-border-radius: 2px;
    border-radius: var(--radius-xs);
}

.ft12 {
    font-size: var(--fs-sm);
}

.ft11 {
    font-size: var(--fs-xs);
}

.ft13 {
    font-size: var(--fs-base);
}

.ft14 {
    font-size: var(--fs-md);
}

.ft15 {
    font-size: var(--fs-md);
}

.ft16 {
    font-size: var(--fs-lg);
}

.cursor-p {
    cursor: pointer;
}

.br2_gray {
    border-bottom: 2px solid color-mix(in srgb, var(--black) 10%, transparent);
}

.pop_price {
    color: color-mix(in srgb, var(--black) 80%, transparent);
    padding-right: var(--space-4);
    font-weight: bold;
}

.bt_div {
    width: 100%;
    float: left;
    text-align: right;
    padding-top: var(--space-4);
    border-top: 1px solid color-mix(in srgb, var(--black) 10%, transparent);
}

.pop_desc {
    font-size: var(--fs-sm);
    color: color-mix(in srgb, var(--black) 60%, transparent);
}

/*============ DatePicker ===============*/
/* ⚠ 2026-08-24 «매출기간 캘린더가 깨진다»(사용자 지적 ⑨) — 원인은 이 고정폭이었다.
 *   width:184px 에 아래 select.ui-datepicker-year{width:62px} 가 겹쳐 **네 자리 연도가 «202» 로 잘렸다.**
 *   월 선택 달력(.bi-monthpicker)은 select 가 둘이라 더 좁아 겹쳐 보였다.
 *   → 폭은 내용이 정한다. 최소폭만 준다.
 *   달력은 화면 위에 뜨는 레이어인데 z-index 가 jQuery UI 기본(1)이라 가려질 수 있었다 → 규격 층으로. */
#ui-datepicker-div {
    padding: 0;
    width: auto;
    min-width: 200px;
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    border: 1px solid var(--border-base);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    background: var(--bg-card);
    z-index: var(--z-dropdown, 1000);
    overflow: hidden;
}
/* 월 선택은 select 두 개가 나란히 선다 — 더 넓게 */
#ui-datepicker-div.bi-monthpicker { min-width: 232px; }

.ui-datepicker table {
    /* width: 150px; */
    font-size: var(--fs-sm) !important;
    border-collapse: unset;
}

.ui-datepicker .ui-datepicker-header {
    position: relative;
    font-size: var(--fs-md) !important;
    padding: .2em 0;
    background: var(--gray-100);
    ;
    border: none;
    border-bottom: 1px solid var(--gray-300);
}

/* 연도는 네 자리다 — 62px 에 맞추려다 «202» 로 잘렸다(2026-08-24).
 * 폭은 내용이 정하게 두고, 최소폭만 준다.
 * ⚠ 2026-08-24 — 아래 font-family 가 «먹지 않고 있었다». jquery-ui CDN 테마(smoothness)의
 *   `.ui-widget select { font-family: Verdana,Arial,sans-serif }` 가 특이도(0,2,1)로 완전히
 *   같고, style.css 보다 뒤에 로드돼 동점에서 이긴다. #ui-datepicker-div 로 스코프를 좁혀 이긴다. */
#ui-datepicker-div select.ui-datepicker-month,
#ui-datepicker-div select.ui-datepicker-year {
    width: auto;
    min-width: 72px;
    height: 28px;
    padding: 0 var(--space-1_5);
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    border: 1px solid var(--border-base);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    color: var(--txt-primary);
}

.ui-datepicker td span,
.ui-datepicker td a {
    text-align: center !important;
}

.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
    border: 1px solid var(--gray-300);
    /* 2026-08-11 중복 정리(B0-2): background·color 를 여기서 지웠다.
       아래(L1029 부근) 같은 셀렉터가 `!important` 로 재선언하고 있어 이 두 선언은
       **한 번도 적용된 적이 없다**. 값이 다르니 남겨두면 "여기 고쳤는데 안 바뀐다"가 된다. */
}

.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br {

    border-radius: 0;
}

.ui-datepicker .ui-datepicker-title {
    background: var(--gray-100);
    ;
}

.ui-widget-content .ui-state-default {
    /* border: 1px solid var(--gray-300); */
    background: white;
    border: none !important;
    /*    background:#fffff; */
    font-weight: normal;
    color: var(--gray-600);

}

.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
    /*오늘*/
    /* border: 1px solid var(--gray-300); */
    background: var(--color-info-600) !important;
    /* 구글색*/
    border-radius: 50%;
    color: var(--bg-card) !important;
    /*폰트*/
}

/* ⚠ 2026-08-24 스코프 교정 — 이 규칙은 «날짜 칸» 용인데 셀렉터가 너무 넓어
 *   달력 아래 버튼(오늘·닫기)까지 동그랗게 만들고 흰 배경을 씌우고 있었다.
 *   td 안으로 좁힌다. */
.ui-datepicker td .ui-state-default {
    border-radius: 50%;
    background: white !important;
    font-weight: normal;
    color: var(--gray-600) !important;
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-button.ui-state-active:hover {
    border: 1px solid var(--gray-200);
    background: var(--gray-200) !important;
    font-weight: normal;
    color: var(--gray-900);
}

.ui-icon .ui-icon-circle-triangle-w {
    background-image: url(img/ui-icons_44444_256x240.png);

    background-position: -96px 0;
}

.ui-icon .ui-icon-circle-triangle-e {
    background-image: url(images/ui-icons_222222_256x240.png);
    background-position: -32px 0;
}

/*===기본 스크롤바 (얇고 숨김) =====*/
.scroll {
    border-bottom: 2px solid var(--gray-100);
    height: 408px;
    overflow: scroll;
    overflow-x: hidden;
    -ms-scrollbar-face-color: var(--border-light);
    -ms-scrollbar-arrow-color: var(--border-base);
    -ms-scrollbar-shadow-color: var(--white);
}

/*=====================*/
/* tree */
/*=====================*/

.txt_span_high {
    color: color-mix(in srgb, var(--black) 90%, transparent);
    font-size: var(--fs-md);
    font-weight: bold;
}

.txt_span_middle {
    color: color-mix(in srgb, var(--black) 60%, transparent);
    font-size: var(--fs-md);
}

.sch_mtxt {
    font-size: var(--fs-base);
    width: 120px;
    float: left;
    text-align: right;
    padding-top: var(--space-1_5);
    padding-right: var(--space-1_5);
}

.list_sch {
    /*list 검색 돋보기*/

    float: left;
    position: relative;
    height: 27px;
}

/* 검색조건 rowWrap (한줄) //매출관리,매입관리,홈 사용  */
.sch_rowWrap {
    float: left;
    /* width: 70%; */
	width: 100%; /*창크기 조절시 input깨지는 문제로 px로 변경  드래그 생격서 다시 수정(강무성, 2021-08-03*/
    padding: var(--space-0_5) 0px;
}

/* 검색버튼 왼쪽input */
.sch_left {
    margin-right: var(--space-1);
    width: 216px;
    text-align: right;
}

.sch_icon {
    position: absolute;
    margin-left: var(--space-2);
    margin-top: var(--space-2);
}

/* 20.11.11 크기고정 */
textarea {
	resize: none;
}

/*2021-02-08 보고서 : 와이드화면에서 검색부UI 깨지는 오류수정 */
 .sch_wrap{
	max-width: 1000px; /*2021-08-31 보고서 : 모바일에서 여백스크롤되는 문제 수정 (대표님작업) */
	margin-left: var(--space-5);
}

/* 2024.08.09 list_page 기존 style에서 추가 */
#list_page{
    display: flex;
    justify-content: center;
    align-items: center;
}
.div_select {
    position: relative;
    display: inline-block;
    padding-left: var(--space-2_5);
}

.div_select select {
    width: 60px;
    height: 31px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-xs);
    font-weight: var(--fw-bold);
    font-size: var(--fs-md);
    line-height: 14px;
    padding-left: var(--space-2_5);
}

.div_select::after {
    content: "\f107";
    font-family: 'Font Awesome 5 Pro';   /* 2026-08-07 표기 통일(구 'Font Awesome 5 pro' — CSS 패밀리명은 대소문자 무시라 동작은 같았음) */
    font-weight: var(--fw-black);
    position: absolute;
    pointer-events: none;
    transform: translate(-160%,60%);
    color: var(--gray-300);
}

.div_select option {
    font-weight: var(--fw-bold);
    font-size: var(--fs-md);
    line-height: 14px;
}

/* 책갈피 컨테이너 (접혀진 상태) */
.bookmark-container {
    position: fixed;
    bottom: 30px;
    right: 0;
    width: 25px;
    height: 100px; /* 접힌 상태 높이 */
    background: var(--color-danger-50);
    border-radius: var(--radius-xl) 0 0 var(--radius-xl);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: width 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55),
                height 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.25s; /* height는 0.25초 지연 */
    z-index: 1000;
    overflow: hidden;
    animation: pulse 2s infinite;
}

.bookmark-container.expanded {
    width: 500px;
    min-height: 250px;
    height: auto;
    border-radius: var(--radius-2xl) 0 0 var(--radius-2xl);
    animation: none;
    background: white;
    box-shadow: var(--shadow-lg);
    overflow: visible;
    transition: width 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55),
                height 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); /* 펼칠 때는 지연 없음 */
}

.bookmark-container:hover:not(.expanded):not(.collapsing) {
    width: 55px;
    box-shadow: var(--shadow-lg);
    cursor: pointer;
}

/* 접혀진 상태 아이콘 */
.bookmark-icon {
    width: 10px;
    height: 10px;
    position: relative;
    transition: opacity 0.3s ease 0.1s;
    z-index: 2;
    color: var(--txt-disabled);
}

.bookmark-icon::before {
    font-size: var(--icon-md);   /* §11 아이콘 사다리 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.bookmark-container.expanded .bookmark-icon {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease 0s;
}

/* 펼쳐진 상태 컨텐츠 */
.bookmark-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease 0s, visibility 0s linear 0.3s;
    padding: var(--space-5);
    box-sizing: border-box;
}

.bookmark-container.expanded .bookmark-content {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.4s ease 0.2s, visibility 0s linear 0s;
}

/* 펼쳐진 상태 컨텐츠 */
.bookmark-title {
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    color: var(--gray-700);
    margin-bottom: var(--space-2);
    border-bottom: 1px solid var(--gray-200);
    padding: var(--space-2_5) 0px;
}

.bookmark-message {
    font-size: var(--fs-md);
    color: var(--gray-500);
    line-height: 1.6;
    margin-bottom: var(--space-5);
    padding: var(--space-2_5) 0px;
    min-height: 80px;
}

.bookmark-message .highlight-date {
    color: var(--color-indigo-700);
}

/* 버튼 그룹 */
.bookmark-container .button-group {
    display: flex;
    gap: var(--space-2_5);
    cursor: pointer;
}

.bookmark-container .btn-tooltip {
    padding: var(--space-3) var(--space-4);
    border: none;
    border-radius: var(--radius-lg);
    font-size: var(--fs-md);
    font-weight: var(--fw-medium);
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.bookmark-container .btn-close {
    flex: 0.5;
    background: var(--gray-100);
    color: var(--gray-500);
}

.bookmark-container .btn-close:hover {
    background: var(--gray-100);
}

.bookmark-container .btn-send {
    flex: 1;
    background: linear-gradient(135deg, var(--color-indigo-500) 0%, var(--color-purple-800) 100%);
    color: white;
}

.bookmark-container .btn-send:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

/* ============================================================
   레거시 공통 레이아웃 클래스 (write 폼 공통 — 복수 모듈 사용)
   ============================================================ */
.last  { border-left: 0px; padding: 0px 0px var(--space-4) var(--space-4); }

.circle {
    background: url(/img/page/circle_gray.png) no-repeat;
    width: 25px; height: 25px;
    position: relative; left: -26px; top: 24px;
    margin-top: calc(var(--space-6) * -1); line-height: 20px;
    padding: 1.3px 0px 0px var(--space-2);
    font-size: var(--fs-sm); color: var(--bg-card); font-weight: bold;
}

.edit_one   { width: 100%; float: left; padding: var(--space-1) 0px; }

/* .main_title_sub → popup.css 로 일원화(팝업 전용 · 2026-07-29) */
/* ⚠ .main_more 는 «더보기» **텍스트 링크의 스타일이자 동시에 JS 훅**이다
 *   (buysell/script.js 가 `$('.main_more').click` 으로 잡고 id 로 분기한다 — 지우면 «시술/상품 추가» 가 죽는다).
 *   그런데 이 규칙이 버튼에도 걸려 `float:right · width:10%(POS 30%) · 밑줄` 을 씌웠다 —
 *   §12-4 «버튼 크기를 제 이름으로 다시 정하지 않는다» 가 지목한 바로 그 클래스다(2026-08-21 사용자 지적).
 *   훅은 남기고 **스타일이 버튼을 잡지 않게** 범위를 좁힌다. */
.main_more:not(.bi-btn) { float: right; color: var(--color-info-600); font-size: var(--fs-base); text-decoration: underline; width: 10%; text-align: right; cursor: pointer; }

.text-form  { float: left; width: 100%; margin-top: var(--space-2_5); }
.text-head  { float: left; padding: 0px 0px 0px var(--space-3_5); font-size: var(--fs-base); color: var(--gray-400); }
.text-body  { float: left; }

.ul-style        { font-size: var(--fs-base); padding: 0px; margin: var(--space-2_5) 0px 50px 0px; }
.li-style        { list-style: none; padding: var(--space-1_5); float: left; width: 98%; }
.li-style-span-p { padding-left: var(--space-2_5); }
.li-style-span-r { float: right; }

textarea: :placeholder { color: var(--gray-500); font-weight: lighter; font-size: var(--fs-base); border: none; }

/* 애니메이션 */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

@keyframes blink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* ============================================================
   2. 전역 베이스
   ============================================================ */

/* docs/71 Phase 2: body(Inter+bg-page) 정의를 style.css 로 통합 (중복 제거) */

input[type="text"],
input[type="password"],
textarea,
select,
button {
    font-family: var(--font-sans);
}

/* ── 이미지 기본 규격 (§40-22) ──────────────────────────────────────
 * 사용자 2026-08-12: "이미지 등 크기 규격이 없어서 그런 거야?? 화면에 이미지로 꽉 차서 다 깨져"
 * 그동안 이미지에 대한 규격이 **하나도 없었다**. 원본 픽셀 크기 그대로 그려지니
 * 큰 사진 하나가 칸을 밀어내고 레이아웃을 깨뜨린다.
 * 규격: 이미지는 **담긴 칸을 넘지 않는다**. 비율은 유지한다.
 *   담는 방식이 필요하면 .bi-img-cover(칸을 채우고 잘라냄) / .bi-img-fit(다 보이게 맞춤).
 * ──────────────────────────────────────────────────────────────── */
/* ⚠ `height: auto` 는 **<img> 에만** 준다.
 *   svg 에 주면 크기를 안 정한 인라인 svg(로그인 로고)가 viewBox 비율대로 부풀어
 *   화면을 통째로 덮는다 — 실제로 그렇게 깨졌다(2026-08-12 사용자 보고).
 *   svg 는 "칸을 넘지 않는다" 까지만. 크기는 그 자리의 규격이 정한다. */
img, video, canvas {
    max-width: 100%;
    height: auto;
}
svg { max-width: 100%; }
img { vertical-align: middle; }
/* 로고 마크 — 크기를 안 정한 인라인 svg 가 기대는 규격 */
.bi-logo-mark { width: 44px; height: 44px; flex-shrink: 0; }
.bi-img-cover { width: 100%; height: 100%; object-fit: cover; display: block; }
.bi-img-fit   { width: 100%; height: 100%; object-fit: contain; display: block; }
.bi-img-round { border-radius: var(--radius-lg); }

/* bare h1~h5 — dhtmlx samples/common/index.css 제거(docs/71 Phase 1) 시 무회귀 보존.
   클래스 지정 제목(.bi-*-title 등)은 특이도로 우선하므로 영향 없음. */
h1, h2, h3, h4, h5 {
    color: color-mix(in srgb, var(--black) 70%, transparent);
    font-weight: var(--fw-medium);
}

/* ============================================================
   3. 레이아웃 보정 (레거시 override)
   ============================================================ */

/* 헤더 색상·높이 — erp: 로고는 사이드바로 이동 → 헤더는 사이드바 우측(left:256)부터 */
.header {
    /* docs/71 Phase 4: 원본 .header 병합 (computed 동일, !important 제거). position/top/float 는 원본 고유 */
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-base);
    height: var(--header-height);
    left: var(--sidebar-width);
    width: auto;
    right: 0;
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    float: left;
}
/* 기존 헤더 내 로고 숨김 (로고는 #menu1 상단으로 이동) */
.header .logo { display: none; }

/* 로고 영역 = 사이드바 상단 브랜드 (260702 리뉴얼: 화이트 배경 + 네이비 브랜드) */
.logo {
    /* docs/71 Phase 4: 원본 .logo 병합 (computed 동일, 제거). float/text-align 는 원본 고유 */
    background: var(--brand-navy);
    height: var(--logo-height);
    width: var(--sidebar-width);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: 0 var(--space-3);
    box-sizing: border-box;
    overflow: hidden;
    transition: width .2s ease;
    float: left;
    text-align: center;
}
.logo-brand { display: flex; align-items: center; min-width: 0; overflow: hidden; }

/* 2026-08 sg2 §40-9: 테넌트 PNG 로고(hesol365 등) 이미지 규격 — 인라인 style 대체 */

/* 접기/펼치기 토글 버튼 (erp PanelLeftClose) — 260702: 화이트 로고 배경에 맞춰 회색 아이콘 */
/* 규격 문서 §12-4 사다리: 아이콘 버튼 = 32. 34 는 근거가 없다
 * (.bi-btn--icon 은 2026-08-13 에 같은 이유로 34→32 로 고쳤는데 셸 버튼이 남아 있었다). */
.menu1-collapse {
    position: relative;
    width: 32px; height: 32px;
    flex-shrink: 0;
    border: none;
    background: transparent;
    color: var(--txt-disabled);   /* 흰 배경 위 gray-400 (mockup 11.png) */
    border-radius: var(--radius-lg);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-md);
    transition: background .15s, color .15s, transform .15s;
}
/* 펼침: 패널 아이콘만 (별/툴팁 숨김) — hover 시 진한 회색 + 연한 배경 */
.menu1-collapse-star { display: none; }
.menu1-collapse-panel { display: flex; align-items: center; justify-content: center; }
.menu1-collapse-tip { display: none; }
.menu1-collapse:hover  { background: var(--border-light); color: var(--txt-muted); transform: scale(1.05); }
.menu1-collapse:active { transform: scale(0.95); }
.menu1-collapse svg { width: 22px; height: 22px; transition: transform .2s ease; display: block; }
.menu1-collapse-star svg { width: 22px; height: 22px; }

/* ── 접힌 상태(sidebar-collapsed): 레이아웃 보정 ── */
#menu1 { transition: width .2s ease; }
.header, .main-form { transition: left .2s ease; }
body.sidebar-collapsed #menu1     { width: 64px; }
body.sidebar-collapsed .logo      { width: 64px; justify-content: center; padding: 0; }
body.sidebar-collapsed .logo-brand { display: none; }
/* 260702: 접힘 기본 = 배지 없이 네이비 별(브랜드 마크, 펼침 로고와 동일 색). hover 시에만 gray-100 배지 + 패널 아이콘 + 툴팁 (22.png / 22_hover.png) */
body.sidebar-collapsed .menu1-collapse {
    width: 40px; height: 40px;
    background: transparent;
    box-shadow: none;
}
body.sidebar-collapsed .menu1-collapse-star  { display: flex; align-items: center; justify-content: center; }
body.sidebar-collapsed .menu1-collapse-star svg .fa-primary   { fill: var(--brand-navy); }
body.sidebar-collapsed .menu1-collapse-star svg .fa-secondary { fill: var(--brand-blue); }
body.sidebar-collapsed .menu1-collapse-panel { display: none; }
/* hover: 배지 밝게 + 패널(펼치기) 아이콘 노출
   ⚠ transform 금지: transform 은 자식 position:fixed 툴팁의 containing block 을 이 버튼으로 만들어
   #menu1/.logo 의 overflow:hidden 에 툴팁이 갇혀 잘림 → scale 대신 배경색 변화로만 hover 강조 */
body.sidebar-collapsed .menu1-collapse:hover {
    background: var(--border-light);
    color: var(--txt-muted);
    box-shadow: none;
}
body.sidebar-collapsed .menu1-collapse:hover .menu1-collapse-star  { display: none; }
body.sidebar-collapsed .menu1-collapse:hover .menu1-collapse-panel { display: flex; }
body.sidebar-collapsed .menu1-collapse:hover .menu1-collapse-panel svg { transform: rotate(180deg); }  /* PanelLeftClose → 펼치기 방향 */
/* :active 의 transform:scale 도 위와 동일 사유(툴팁 clip)로 생략 — 클릭 즉시 펼쳐지므로 불필요 */
/* 접힘 hover 툴팁 "메뉴 펼치기" — 배지 우측 (22_hover.png)
   #menu1/.logo overflow:hidden 에 잘리지 않도록 position:fixed 로 사이드바 밖 배치.
   #menu1 top:0 · logo 높이 64px → 배지(40px) 세로중심 ≈ 32px, 접힘 폭 64px → 우측 약 60px */
body.sidebar-collapsed .menu1-collapse:hover .menu1-collapse-tip {
    display: block;
    position: fixed;
    left: 60px;
    top: 32px;
    transform: translateY(-50%);
    white-space: nowrap;
    background: var(--bg-card);
    color: var(--txt-secondary);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    padding: var(--space-1_5) var(--space-2_5);
    border: 1px solid var(--border-base);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 30;
    pointer-events: none;
}
body.sidebar-collapsed .header    { left: 64px; }
body.sidebar-collapsed .main-form { left: 64px; }

/* 로그인 정보 텍스트 (흰 배경 위) */
.login_info {
    /* docs/71 Phase 4: 원본 .login_info 병합 (computed 동일, !important 제거). float 는 원본 고유 */
    float: left;
    color: var(--txt-secondary);
    font-size: var(--fs-sm);
    padding: 0 0 0 var(--space-3);
    line-height: 1.4;
    white-space: nowrap;
}

/* DB/도메인 표시 (흰 배경 위 — 연하게) */
.pr_domain {
    color: var(--txt-disabled) !important;
    line-height: var(--header-height) !important;
    padding: 0 0 0 var(--space-4) !important;
}

/* 헤더 토글 버튼 (menu_open) — 공간 차지 방지 */
.menu_open {
    /* docs/71 Phase 4: 원본 .menu_open 병합 (float 원본 고유, 0 크기라 사실상 무효) */
    float: left;
    width: 0;
    height: 0;
}

/* 사이드바(메인메뉴) — erp Sidebar: top:0 풀하이트, 상단 브랜드 포함 flex 컬럼 */
#menu1 {
    width: var(--sidebar-width);
    top: 0;
    height: 100vh;
    background: var(--bg-card, var(--bg-card)) !important;
    border-right: 1px solid var(--border-base);
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    z-index: 20;
}

/* 사이드바(서브메뉴) = erp '전체 메뉴보기' 모달
   ※ 오버레이/컨테이너 위치·크기는 menu.css 의 #menu2.open / .close 가 제어 */
#menu2 { top: 0; }
#menu2_sub { background-color: var(--bg-card, var(--bg-card)); }

/* 메인 콘텐츠 영역 */
.main-form {
    /* docs/71 Phase 4 수정: menu.css .main-form(left:205px/top:65px, position:fixed, 나중 로드)를
       이기려면 필요. position 은 menu.css 가 제공. (겹침 회귀 수정 2026-07-01) */
    left: var(--sidebar-width);
    top: var(--header-height);
}

/* #rectangle 토글 버튼 — 사이드바 우측 끝, 로고 영역 위 */
#rectangle {
    background: var(--brand-navy);
    z-index: 22;
    left: calc(var(--sidebar-width) - 24px);
    height: var(--header-height);
}

/* 드롭다운 메뉴 위치 보정 */
#user_menu     { top: var(--header-height); }
#question_menu { top: var(--header-height); }

/* ── 좌측: 브레드크럼 영역 ───────────────────────── */
.header-bar__left {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding-left: var(--space-4);
    min-width: 0;
    flex-shrink: 1;
}

/* 브레드크럼 선두 레이어 아이콘 (erp: Layers) */
.hbar-crumb-ico {
    color: var(--txt-disabled);
    font-size: var(--fs-md);
    flex-shrink: 0;
}

/* 브레드크럼 텍스트 그룹 */
.hbar-crumb {
    display: flex;
    align-items: center;
    gap: var(--space-1_5);
    font-size: var(--fs-base);
    font-weight: var(--fw-bold);
    min-width: 0;
}
.hbar-crumb-root { color: var(--txt-disabled); font-weight: var(--fw-semibold); white-space: nowrap; }
.hbar-crumb-cat  { color: var(--txt-disabled); font-weight: var(--fw-medium); white-space: nowrap; }   /* 페이지분류(카테고리) */
.hbar-crumb-sep  { color: var(--gray-300); font-size: var(--fs-2xs); flex-shrink: 0; }
.hbar-crumb-cur  {
    color: var(--txt-primary); font-weight: var(--fw-extrabold);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── 정보 pill (사용자 / 날짜 / DB) — erp desc·clock pill 톤 ── */
.hbar-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1_5);
    height: 27px;   /* §12-4 사다리 sm. 26 은 사다리에 없는 값이었다 */
    padding: 0 var(--space-2_5);
    border-radius: var(--radius-full);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1;
}
.hbar-pill i { font-size: var(--fs-xs); }

/* 페이지 설명 pill (자동 문구) — erp desc pill: 작은 회색 + 말줄임 */
.hbar-pill--desc {
    display: inline-block;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: var(--bg-input);
    color: var(--txt-muted);
    border: 1px solid var(--gray-100);
    font-weight: var(--fw-bold);
    font-size: var(--fs-2xs);
    height: 27px;   /* §12-4 사다리 sm. 26 은 사다리에 없는 값이었다 */
    line-height: 24px;
    padding: 0 var(--space-2_5);
    box-sizing: border-box;
    margin-left: var(--space-1_5);
    vertical-align: middle;
}

/* 오늘 날짜 pill (amber — erp clock pill 색감) */
.hbar-pill--date {
    background: color-mix(in srgb, var(--color-warning) 10%, transparent);
    color: var(--color-warning-700);
    border: 1px solid var(--color-warning-100);
}
.hbar-pill--date i { color: var(--color-warning); }

/* erp 통합 검색 pill (헤더 중앙 절대배치) — 클릭/Ctrl+K → 전체메뉴 모달 */
.hbar-search {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 360px;
    max-width: 32vw;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: 0 var(--space-2) 0 var(--space-3);
    background: var(--bg-input);
    border: 1px solid var(--border-base);
    border-radius: var(--radius-lg);
    cursor: pointer;
    color: var(--txt-disabled);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    transition: background .15s, border-color .15s, color .15s;
}
.hbar-search:hover { background: var(--border-light); border-color: var(--gray-300); color: var(--txt-muted); }
.hbar-search-left { display: flex; align-items: center; gap: var(--space-2); min-width: 0; overflow: hidden; }
.hbar-search-left i { font-size: var(--fs-sm); flex-shrink: 0; }
.hbar-search-left span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hbar-search-kbd {
    flex-shrink: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-base);
    border-radius: var(--radius-sm);
    padding: var(--space-0_5) var(--space-1_5);
    font-size: var(--fs-xs);
    font-family: var(--font-mono);
    color: var(--txt-disabled);
}
/* 좁은 화면에선 숨김 (브레드크럼/우측과 겹침 방지) */
@media (max-width: 1200px) { .hbar-search { display: none; } }

/* 지점 뱃지 (erp branch indicator) */
.hbar-branch {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1_5);
    height: 27px;   /* §12-4 사다리 sm. 26 은 사다리에 없는 값이었다 */
    padding: 0 var(--space-2_5);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--color-indigo-500) 10%, transparent);
    border: 1px solid var(--color-indigo-100);
    color: var(--color-indigo-700);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-extrabold);
    letter-spacing: 0.02em;
    white-space: nowrap;
    flex-shrink: 0;
}
.hbar-branch-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--color-indigo-500);
    flex-shrink: 0;
    animation: hbar-branch-pulse 1.6s ease-in-out infinite;
}
@keyframes hbar-branch-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* 동기화(새로고침) 버튼 (erp sync) */
.hbar-sync {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1_5);
    height: 27px;   /* §12-4 사다리 sm. 26 은 사다리에 없는 값이었다 */
    padding: 0 var(--space-2_5);
    border: 1px solid var(--border-base);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    color: var(--txt-muted);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-extrabold);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background .15s, border-color .15s;
}
.hbar-sync:hover { background: var(--gray-50); border-color: var(--gray-300); }
.hbar-sync i { font-size: var(--fs-xs); color: var(--txt-disabled); }
.hbar-sync.is-syncing i { animation: hbar-spin .7s linear infinite; }
@keyframes hbar-spin { to { transform: rotate(360deg); } }

/* 좁은 화면 보조 정리 */
@media (max-width: 1440px) { .hbar-sync span { display: none; } .hbar-sync { padding: 0 var(--space-2); } }
@media (max-width: 1280px) { .hbar-branch { display: none; } }

/* 지점선택 (level 99) — 인라인 float/padding 중화 + 정렬
   ※ display 는 인라인/JS 가 제어하므로 건드리지 않음 */
#s_br.search_div_add {
    float: none !important;
    padding: 0 !important;
    width: auto !important;
    margin: 0 0 0 var(--space-2) !important;
    align-items: center;
}
#s_br.search_div_add select {
    height: 32px;
    border: 1px solid var(--border-base);
    border-radius: var(--radius-lg);
    font-size: var(--fs-sm);
    color: var(--txt-secondary);
    padding: 0 var(--space-2);
    background: var(--bg-card);
}

/* ── 우측: 기능 아이콘 그룹 ─────────────────────── */
.header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-1_5);
    margin-left: auto;
    flex-shrink: 0;
    padding-right: var(--space-4);
}

/* 그룹 구분선 (pill 묶음 ↔ 아이콘 묶음) */
.header-actions__sep {
    width: 1px;
    height: 22px;
    background: var(--border-base);
    margin: 0 var(--space-0_5);
    flex-shrink: 0;
}

/* 아이콘 버튼 — erp: rounded-lg + subtle border + gray-400, hover:bg-slate-50 + press-down */
/* 아이콘 버튼 = 32 (§12-4 사다리). 헤더도 같은 사다리를 쓴다 — 셸만 예외일 이유가 없다. */
/* ⚠ 이 프로젝트엔 «*{box-sizing:border-box}» 같은 전역 규칙이 없다 — 규칙마다 따로 적는다.
 * 그래서 여기 height:32px 은 **테두리 1px×2 가 밖에 붙어 실측 34** 였다(§12-4 사다리 --icon 은 32).
 * 눈에 안 띄는 2px 이지만 사다리에 없는 값이라 검사가 매번 잡는다(2026-08-21). */
.header-icon-btn {
    box-sizing: border-box;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-lg);
    border: 1px solid color-mix(in srgb, var(--border-base) 70%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--txt-disabled);
    font-size: var(--fs-md);
    background: var(--bg-card);
    position: relative;
    transition: background .15s, color .15s, border-color .15s, transform .15s;
    flex-shrink: 0;
}
.header-icon-btn:hover {
    background: var(--gray-50);
    color: var(--gray-600);
    border-color: var(--border-base);
}
.header-icon-btn:active { transform: scale(0.94); }

/* ── 반응형: 좁은 화면에서 보조 pill 숨김 ── */
@media (max-width: 1280px) { .hbar-pill--desc { display: none; } }
@media (max-width: 1100px) { .hbar-pill--date { display: none; } }

/* ============================================================
   5. 스크롤바 (enterprise 스타일)
   ============================================================ */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: var(--radius-sm); }
::-webkit-scrollbar-thumb:hover { background: var(--txt-disabled); }

/* ============================================================
   6. 모듈 공통 — 리뉴얼 페이지 래퍼
   ============================================================ */
/* 리뉴얼된 list 페이지 최상위 래퍼
 * padding+gap 으로 내부 섹션 간 16px 여백 제공 (bi-card margin 불필요)
 */
.bi-page {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--header-height));
    box-sizing: border-box;        /* padding(상하 32px)이 height 안에 포함 — 하단 패딩 화면 밖 이탈 방지 */
    overflow: hidden;
    background: var(--bg-page);
    padding: var(--content-pad);
    gap: var(--space-4);
}
/* 리뉴얼된 write 페이지 최상위 래퍼
 * bi-page 와 동일하게 padding:16px — 흰 bi-card 주변에 gray var(--bg-page) 프레임 노출 */
.bi-write-page {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--header-height));
    box-sizing: border-box;        /* padding 포함 — 하단 패딩 화면 밖 이탈 방지 */
    overflow: hidden;
    background: var(--bg-page);
    padding: var(--content-pad);
}

/* ============================================================
   §40-10 레이아웃 프리미티브 (2026-08-07 신설)
   ------------------------------------------------------------
   왜: 규격에 "가로 한 줄" 프리미티브가 없어서 모듈마다 새 이름으로 다시 만들고 있었다.
       QC SG-RELOCATED 43건 중 22건이 아래 6가지 선언의 재발명이었다
       (`display:flex; align-items:center; justify-content:space-between` 하나만 10개 모듈·클래스).
   원칙: **역할 이름이 필요하면 모듈 클래스를 남기되(JS 훅·가독성), 레이아웃은 이 프리미티브를 쓴다.**
         `<div class="bi-row-between bi-row-between">` 처럼 병기하고,
         모듈 style.css 에서 레이아웃 선언은 지운다.
   ============================================================ */

/* 가로 한 줄 — 세로 가운데 정렬 + 간격. 간격은 --bi-row-gap 으로 조절(기본 8px). */
.bi-row            { display: flex; align-items: center; gap: var(--bi-row-gap, 8px); }
.bi-row--gap-4     { --bi-row-gap: 4px; }
.bi-row--gap-6     { --bi-row-gap: 6px; }
.bi-row--gap-12    { --bi-row-gap: 12px; }
.bi-row--wrap      { flex-wrap: wrap; }

/* 양끝 배치(라벨 ↔ 값, 제목 ↔ 액션) — 간격 없음. 가장 많이 재발명되던 형태. */
.bi-row-between    { display: flex; align-items: center; justify-content: space-between; }
/* 가운데 배치 */

.bi-row--gap-0     { --bi-row-gap: 0; }
/* 2026-08-11 추가 — SPEC-DUP 이 드러낸 재발명을 흡수하려니 척도에 구멍이 있었다.
 * 토큰 간격(--space-2_5=10 · --space-4=16)에 대응하는 row/col 변형이 없어서
 * 컴포넌트마다 display:flex;gap:… 를 다시 쓰고 있었다. */
/* 세로 정렬 변형 — .bi-row 는 center 고정이라 baseline/stretch 가 필요하면 재발명됐다 */
.bi-row--align-baseline { align-items: baseline; }
.bi-row--align-stretch  { align-items: stretch; }
/* flex 자식이 내용 때문에 안 줄어드는 것 방지. .bi-fill 과 달리 **늘리지는 않는다**. */
.bi-minw-0         { min-width: 0; }

/* 초기 숨김 — 2026-08-07 신설. `style="display:none"` 인라인이 128곳이었다(절대규칙 §4 위반).
 * ⚠ `` 를 **쓰지 않는다** — jQuery `.show()` 가 인라인 display 로 덮어써야 열린다.
 *   (스코프판 `#counter_portal .is-hidden` 은 라 show() 가 안 먹는다. 그 전철 금지.)
 * ⚠ 이름이 `.is-hidden` 이 아닌 이유: `.bi-ra-col-list__item.is-hidden` 이 '숨김'이 아니라
 *   '흐리게+취소선' 의미로 이미 쓰고 있어, 전역화하면 그 항목들이 사라진다. */
/* .bi-hidden 정의는 파일 맨 끝으로 이동(2026-08-11) — 아래 §HIDDEN 참조 */

/* 세로 쌓기 — 간격은 --bi-col-gap(기본 8px) */
.bi-col            { display: flex; flex-direction: column; gap: var(--bi-col-gap, 8px); }
.bi-col--gap-0     { --bi-col-gap: 0; }
/* 2026-08-11 — row 에는 --gap-4 가 있는데 col 에는 없었다. 그 비대칭을 못 보고
 * .bi-col--gap-4 를 쓰는 바람에 필드 간격이 4px→8px 로 벌어졌다(CLASS-ORPHAN 이 잡았다). */
.bi-col--gap-4     { --bi-col-gap: 4px; }
.bi-col--gap-6     { --bi-col-gap: 6px; }
.bi-col--gap-12    { --bi-col-gap: 12px; }
.bi-col--gap-16    { --bi-col-gap: 16px; }   /* 2026-08-11 — --space-4 대응이 없어 재발명됐다 */
.bi-col--grow      { flex: 1; min-height: 0; }

/* 가로 남는 공간 채우기 — flex 자식이 넘치지 않게(min-width:0 필수) */
.bi-fill           { flex: 1; min-width: 0; }
/* 상태 점(색은 쓰는 쪽에서) */
.bi-dot            { width: 6px; height: 6px; border-radius: var(--radius-full); display: inline-block; }

/* ============================================================
   8. 공통 버튼 (list + write 페이지 공용)
   ============================================================ */
.bi-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1_5);
    padding: var(--space-2) var(--space-4);
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    font-family: var(--font-sans);
    border-radius: var(--radius-lg);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s, box-shadow .15s, transform .15s;
    line-height: 1;
    white-space: nowrap;
    background: none;
}
/* 2026-09-02 — <a class="bi-btn"> 는 «링크» 라서 브라우저가 밑줄을 긋는다.
   사용자가 「지급율 찾기」 에서 봤지만, 글자 있는 a 버튼이면 어디서나 같은 일이 난다
   (돋보기처럼 아이콘만 있는 것은 밑줄이 안 보여 지금까지 드러나지 않았을 뿐이다).
   기존 .bi-btn 선언은 그대로 두고 뒤에서 못박는다 — 버튼 모양에 밑줄이 있으면 링크로 읽힌다. */
a.bi-btn, a.bi-btn:hover, a.bi-btn:focus{ text-decoration: none; }
/* erp-design 인터랙션: hover-lift 대신 press-down (active:scale-98) + disabled 상태 (2026-06-11) */
.bi-btn:active:not(:disabled):not(.is-disabled) { transform: scale(var(--press-scale, 0.98)); }.bi-btn--sm  { padding: var(--space-1_5) var(--space-3); font-size: var(--fs-base); border-radius: var(--radius-md); }
/* ── 크기 사다리 (2026-08-13 역전 교정) ───────────────────────────────
 * 사다리는 **한 방향**이어야 한다. 고치기 전 실측은 base 32 · sm 27 · **xs 30** 이었다 —
 * xs 의 세로 여백(8px)이 sm(6px)보다 커서 «가장 작은 것»이 sm 보다 컸다.
 * 같은 툴바에 sm 과 xs 가 같이 놓이면 작아야 할 쪽이 커 보였다(사용자 지적 2026-08-13).
 *   base 32px(14px) · sm 27px(13px) · xs 22px(12px) · lg 48px(15px)
 *
 * ⚠ 2026-08-21 «목록 버튼이 너무 작다»(사용자 지적, 고객관리 엑셀다운·정보등록·정보수정 …).
 *   실측: xs 22px / 글자 12 / 아이콘 12. 같은 화면의 그리드 한 행이 **37px**, 입력칸 36,
 *   검색 버튼 32, 옆의 「표시항목」이 27 — 즉 **행보다 작고, 부수 버튼보다도 작았다.**
 *   클릭 표적도 22px 로 최소치(24) 미만.
 *   전수조사 결과 .bi-btn--xs 는 **목록 list.php 156곳 + write.php 저장/취소 10곳** 이 전부고
 *   **그리드 셀·팝업·JS 템플릿에는 한 번도 쓰이지 않는다** — «작은 버튼» 이 아니라
 *   사실상 «목록 툴바 버튼» 이었다. → 정의를 base(32) 로 올린다. 63모듈이 동시에 맞는다.
 *   같은 줄에 서는 「표시항목」·퀵기간·상태탭도 32 로 맞춰 «한 줄엔 한 크기» 를 지킨다.
 *   이름은 남긴다(마크업 156곳). 새 코드는 그냥 .bi-btn 을 쓴다.
 * ─────────────────────────────────────────────────────────────────── */
.bi-btn--xs  {
    height: 32px;
    padding: 0 var(--space-3);
    font-size: var(--fs-base);
    border-radius: var(--radius-lg);
    font-weight: var(--fw-medium);
}
/* 아이콘은 글자보다 1px 커야 «아이콘» 으로 읽힌다 — 12/12 는 얼룩처럼 보였다 */
.bi-btn--xs > i { font-size: 14px; }

/* erp-design: bg-brand-blue hover:bg-blue-600 active:bg-blue-700 rounded-lg shadow-sm active:scale-98 (hover-lift 폐지) */
.bi-btn--primary            { background: var(--brand-blue); color: var(--bg-card); border-color: var(--brand-blue); font-weight: var(--fw-bold); }
.bi-btn--primary:hover      { background: var(--color-info-600); border-color: var(--color-info-600); }
.bi-btn--primary:active     { background: var(--color-info-700); border-color: var(--color-info-700); }

.bi-btn--ghost              { background: var(--bg-card); color: var(--gray-600); border-color: var(--border-base); font-weight: var(--fw-medium); }
.bi-btn--ghost:hover        { background: var(--bg-input); border-color: var(--border-base); }

.bi-btn--danger             { background: var(--color-danger); color: var(--bg-card); border-color: var(--color-danger); }
.bi-btn--danger:hover       { background: var(--color-danger-600); border-color: var(--color-danger-600); }
.bi-btn--danger-soft        { background: var(--color-danger-50); color: var(--color-danger-600); border-color: var(--color-danger-100); font-weight: var(--fw-medium); }
.bi-btn--danger-soft:hover  { background: var(--color-danger-100); border-color: var(--color-danger-200); }

/* 2026-07-30 bespoke 워크플로우 화면(reception/designer_chart/booking/main 등) 반복 버튼 패턴 공통 변형 */
.bi-btn--navy               { background: var(--brand-navy); color: var(--bg-card); border-color: var(--brand-navy); }
.bi-btn--navy:hover         { background: var(--brand-blue-hover); border-color: var(--brand-blue-hover); }
.bi-btn--navy:active        { background: var(--brand-blue); }
/* 신규 등록(soft rose) — reception/designer_chart 신규등록 버튼 동일 패턴 */
.bi-btn--register           { background: var(--color-rose-50); color: var(--color-rose-700); border-color: var(--color-rose-200); font-weight: var(--fw-extrabold); }
.bi-btn--register:hover     { background: var(--color-rose-100); border-color: var(--color-rose-200); }
.bi-btn--block              { width: 100%; justify-content: center; }
/* 2026-07-31 아이콘 전용 정사각 버튼(예약추가·검색추가 등 반복 패턴) — .bi-btn + 색상변형과 조합. 크기/라운드는 모듈 델타 */
.bi-btn--icon               { width: 32px; height: 32px; padding: 0; justify-content: center; }  /* 2026-08-13 기본 사다리(32px)와 맞춤 — 34 는 근거가 없었다 */

/* 세그먼트 컨트롤(탭형 토글) — reception rtab/seg · designer_chart statseg/rtab · booking viewseg 공통
 * ⚠ 2026-08-14 — 이 블록은 «자리·정렬» 만 맡는다. 색·크기·트랙은 **아래 §pickgrid 옆의 한 곳**이
 *   규격이다(문서 §29: 활성 = brand-blue 배경 + 흰글자, 트랙은 연회색).
 *   여기서 배경·글자색을 또 정하면 두 정의가 싸운다 — 실제로 그랬고, 뒤엣것이 이기고 있었다. */
.bi-segment__btn            { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); transition: all .15s; }
/* 활성 칸은 배경이 brand-blue 다 — 아이콘까지 brand-blue 로 칠하면 파랑 위 파랑이 되어 사라진다.
 * 글자와 같은 색을 물려받게 둔다. */
.bi-segment__btn.is-active i{ color: inherit; }

/* ============================================================
   11. 페이지 레벨 통합 카드
   ============================================================ */
/*
 * toolbar + search + grid + pagination 전체를 하나의 카드로 묶는다.
 *
 * ⚠ 2026-08-11 B0-2: 아래 예시의 .bi-card / .bi-toolbar / .bi-table-card 는 **폐기 이름**이다.
 *   현행 규격은 §40-3 표준 레이아웃:
 *     <div class="bi-page">
 *       <div class="bi-erp-toolbar">          (변형 없음 — 모든 화면이 같은 헤더, 2026-08-21)
 *       <div class="bi-erp-filter">
 *       <div class="bi-erp-card"> <div class="bi-grid-area"> + <div class="bi-pg-wrap">
 *     </div>
 *
 * margin:16px 이 bi-page 의 gray 배경(var(--bg-page))을 카드 주변에 노출.
 */
/*
 * bi-page { padding: 16px } 가 외부 여백을 제공하므로 margin: 0
 */
/* elevated 카드 셸(자기완결 — flex:1 미강제) : bespoke 화면(reception/main/booking 등) 흰 카드 공통. radius-2xl + 강조 그림자. 성장/폭은 모듈 모디파이어(flex/width)로. (2026-07-30) */
.bi-card--box {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg-card);
    border: 1px solid var(--border-base);
    border-radius: var(--radius-2xl);
}

/* ── 인페이지 모달 쉘 (공용) — 모듈들이 각자 오버레이+패널을 재구현하던 것 통합(2026-07-31).
   모듈은 .bi-modal-ov(백드롭) + .bi-modal(패널) + .bi-modal__body 를 쓰고, 헤더는 공용 .bi-pop-head,
   푸터/버튼은 .bi-pop-foot-btns/.bi-pop-btn. 크기·내용만 모듈 modifier. JS 는 id 로 .is-open 토글. ── */
.bi-modal-ov { display: none; position: fixed; inset: 0; z-index: 1000; background: color-mix(in srgb, var(--black) 60%, transparent); backdrop-filter: blur(2px); align-items: center; justify-content: center; padding: var(--space-4); }
.bi-modal-ov.is-open { display: flex; }
.bi-modal { background: var(--bg-card); border: 1px solid var(--border-base); border-radius: var(--radius-xl); width: 100%; max-width: 440px; box-shadow: var(--shadow-lg); overflow: hidden; display: flex; flex-direction: column; max-height: 90vh; text-align: left; }

/* ============================================================
 * bi-log-* — 관리자 로그 7개 모듈 공통 (2026-06-09)
 * 사용: log_login / log_buysell / log_buysell_products / log_buysell_package
 *      log_bk_buysell / log_bk_buysell_products / log_bk_payments
 * ============================================================ */

/* 7탭 nav */
.bi-log-tabs {
    display: flex; flex-wrap: wrap; gap: var(--space-1);
    background: var(--bg-card); border: 1px solid var(--border-base); border-radius: var(--radius-xl);
    padding: var(--space-1_5);
}
/* 로그 화면 탭 — 규격 문서에 «이름» 은 등재돼 있었지만 **크기가 없어** 35px 로 그려지고 있었다.
 * 탭도 버튼이다 → §12-4 사다리 base 32(2026-08-14). 가로로 늘어나는 성격(flex)만 제 것이다. */
.bi-log-tab {
    flex: 1 1 auto; min-width: 110px;
    height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 var(--space-3_5);
    background: transparent; border: 0; border-radius: var(--radius-lg);
    font-size: var(--fs-base); font-weight: var(--fw-medium); color: var(--txt-muted);
    cursor: pointer;
    transition: background .15s, color .15s;
}
.bi-log-tab:hover { background: var(--border-light); color: var(--txt-primary); }
.bi-log-tab.is-active { background: var(--brand-navy); color: var(--bg-card); font-weight: var(--fw-semibold); cursor: default; }

/* 검색 row 추가 요소 */
.bi-log-date-input    { width: 130px; }
.bi-log-date-sep      { color: var(--txt-muted); margin: 0 var(--space-1); }

/* 결과 테이블 (ul/li grid) */
.bi-log-table-body { overflow: auto; flex: 1; min-height: 0; }
.bi-log-row {
    display: grid;
    align-items: center;
    text-align: center;
    border-bottom: 1px solid var(--border-light);
    list-style: none; margin: 0; padding: 0;
    grid-template-columns: repeat(7, minmax(80px, 1fr));   /* default */
}
.bi-log-row li { font-size: var(--fs-base); padding: var(--space-3) var(--space-1_5); word-break: break-all; }
.bi-log-row--head {
    background: var(--bg-input);
    font-weight: var(--fw-semibold); color: var(--txt-secondary);
    border-bottom: 1px solid var(--border-base);
    position: sticky; top: 0; z-index: 2;
}
.bi-log-row--head li { padding: var(--space-3_5) var(--space-1_5); font-size: var(--fs-base); }

/* 컬럼 수 modifier (원본 style.css grid-template-columns 보존) */
.bi-log-row--w15  { grid-template-columns: repeat(15, minmax(80px, 1fr)); }
.bi-log-row--w21  { grid-template-columns: repeat(21, minmax(80px, 1fr)); }

/* 컬럼 다수 → 가로 스크롤 (좁은 화면) */
.bi-log-table-wrap--w15 .bi-log-row, .bi-log-table-wrap--w21 .bi-log-row {
    min-width: max(100%, calc(80px * var(--cols, 18)));
}
.bi-log-table-wrap--w15 .bi-log-table-body, .bi-log-table-wrap--w21 .bi-log-table-body { overflow-x: auto; }

.bi-log-empty {
    padding: 80px var(--space-5);
    text-align: center;
    color: var(--txt-disabled);
    font-size: var(--fs-md);
}

@media (max-width: 1280px) {
    .bi-log-tab { min-width: 90px; font-size: var(--fs-sm); padding: var(--space-2) var(--space-2_5); }
    .bi-log-row li { font-size: var(--fs-sm); padding: var(--space-2_5) var(--space-1); }
}

/* ============================================================
 * bi-bm-* — AI 마케팅 제안 책갈피 (footer.php) — 2026-06-30 리뉴얼
 * 우하단 FAB(접힘) + 둥근 카드(펼침). 구 .bookmark-* (style.css) 위에 덮어쓰기.
 * JS 훅(#bookmarkContainer / .expanded / .bookmark-content / #bookmarkMessage) 불변.
 * ============================================================ */

/* FAB 알림 점 + 펄스 링 */
@keyframes bi-bm-pulse {
    0%   { transform: scale(0.8); opacity: 0.8; }
    100% { transform: scale(1.9); opacity: 0; }
}
@keyframes bi-bm-fab-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}

/* ── 펼침: 카드 ── */
@keyframes bi-bm-card-in {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}

/* 좁은 화면: 카드 폭 축소 */
@media (max-width: 480px) {
}

/* ── 로딩 오버레이 (구 ai_marketing/booking_renew/employee_dayoff 중복) ── */
/* §36 로딩 오버레이 — "로딩은 기존 화면을 지우지 않는다. 겹쳐 표시한다"(규격 §36).
   2026-08-11: 구 `#load_img`(id 셀렉터) → 규격 클래스. id 는 JS 훅이라 마크업에 유지.
   ⚠ `display:block` 을 뺐다 — div 는 원래 block 이고, 이게 있으면 특이도 100(id)으로
     `.bi-hidden`(10)을 이겨 **초기 렌더에서 로딩막이 걷히지 않았다**(2026-08-07 158fe27 이후 실제 발생). */
.bi-loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-card);
    opacity: 0.8;
    text-align: center;
    z-index: 99;
}
.bi-loading > img {
    position: absolute;
    top: 45%;
    left: 50%;
    width: 30px;
    height: 30px;
    z-index: 100;
}

/* ── 마케팅 검색 필드 (구 marketing/marketing2/marketing_point 중복) ── */
.bi-marketing-range-group {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1_5);
    font-size: var(--fs-base);
    color: var(--txt-secondary);
}
/* 숫자 입력(우측 정렬 고정폭) — 이름의 marketing 은 처음 쓴 곳일 뿐 범용이다.
 * 2026-08-11 팝업에서도 같은 것이 필요해 .bi-pop-amt-in 을 만들 뻔했다 → 이걸 쓴다. */
/* 구 .bi-num-input — §21-3 입력 눈금으로 흡수(2026-08-11) */
/* 구 .bi-marketing-num-input — 마크업을 .bi-num-input 으로 옮기고 제거(2026-08-11) */
.bi-marketing-money-input { width: 110px; text-align: right; }
.bi-marketing-date-input  { width: 135px; }  /* marketing_point 은 110px 로 모듈 오버라이드 */

/* ── 급여 수당/과세 항목 행 (구 pay_edit/pay_init 중복) ── */
.bi-payinit-add-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
}
.bi-payinit-add-row {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1_5);
    font-size: var(--fs-base);
    color: var(--txt-secondary);
}
.bi-payinit-add-label {
    min-width: 100px;
    font-weight: var(--fw-semibold);
    color: var(--gray-600);
}

/* ============================================================
   docs/71: ERP list/write 공통 컴포넌트 — list.css·write.css 중복(완전동일) 통합
   (list XOR write 로 동시로드 안 되던 것 → style.css 단일화, 2026-07-01)
   ============================================================ */

.bi-erp-card {
    flex: 1;
    /* ⚠ 가로도 0 까지 줄 수 있어야 한다. min-width 를 안 풀면 안쪽 3열 워크스페이스가
     *   내용 최소폭에 걸려 열이 눌린다 — 디자이너 차팅 좌측 열이 세로 글자로 뭉갰다
     *   (2026-08-13, 공통 셸을 씌우며 드러남). 카드는 «담는 것» 이지 폭을 정하는 것이 아니다. */
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border-base);
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.bi-erp-title { font-size: var(--fs-2lg); font-weight: var(--fw-bold); color: var(--txt-primary); margin: 0; }

/* §40-2 페이지 스크롤 변형 (2026-08-11) — .bi-page 는 overflow:hidden 이라
   내부 카드가 스크롤을 맡는다(표준 목록). 대시보드처럼 **페이지 전체가 세로로 긴** 화면은
   페이지 자체가 스크롤해야 한다. main 이 .bi-main-page 로 따로 정의하던 것을 규격으로 회수. */
.bi-page--scroll { overflow-y: auto; overflow-x: hidden; }

/* §21 폼 · §40-10 레이아웃 보완 (2026-08-11) — 모듈들이 반복해서 다시 만들던 한 줄짜리.
   main 의 .bi-main-modal-input(width:100%) · -submit(width:100%) · -row(margin) 처럼
   화면마다 이름만 다르고 값은 같았다. 규격 유틸로 회수한다. */
.bi-input--block { width: 100%; }
/* ⚠ .bi-btn--block 은 여기 넣지 않는다 — §12 버튼 변형 묶음(위쪽 .bi-btn--icon 옆)에 이미 있다.
   2026-08-11 중복 정리(B0-2): 같은 선언을 두 번 두면 나중에 값을 고칠 때 한쪽만 고친다. */
/* §40-3 카드형 헤더 (2026-08-11) — 워크플로 화면(예약일정표·예약일정표(시간)·휴무설정·AI메시지
   ·대기상담·디자이너차트)이 쓰는 변형. 값은 **§23 카드(.bi-erp-card)에서 그대로** 가져왔다 —
   세 모듈(.bi-aim-header/.bi-dayoff-header/.bi-bk-subbar)이 이미 같은 값을 쓰고 있었다.
   새 디자인이 아니라 기존 규격 조합("카드 안의 툴바")에 이름을 준 것이다. */
/* .bi-erp-toolbar--card 삭제(2026-08-21 · 사용자 지적) — **헤더는 하나다.**
 *
 * 규격 §40-3-1 은 「워크플로 화면은 카드형」이라 적고 예약일정표·대기상담·디자이너차트 등 6개를
 * 나열하고 있었다. 그런데 실물은 **정반대**였다 — 그 6개는 전부 플랫이고,
 * `--card` 를 쓰는 건 문구에 없던 POS 3개(+팝업 1)뿐이었다.
 *
 * POS 가 카드형이었던 이유는 «카드가 없어서» 다. 표준 셸은 프레임 → **카드** → 툴바인데
 * POS 는 프레임(.bi-counter-wrap) 바로 밑에 툴바가 있어, 툴바가 스스로 카드 흉내를 냈다.
 * 예약일정표처럼 플랫로 맞추면 프레임 위에 제목 + 아래 구분선 — 그게 §40-4 의 「타이틀은 유지」다.
 *
 * 남은 규격: .bi-erp-toolbar 하나. 변형 없음. */
/* §40-3 헤더 부속 (2026-08-11 추가) — 6개 워크플로 화면이 각자 다른 헤더를 쓰고 있었다.
   .bi-bk-subbar(예약일정표·예약일정표(시간)) · .bi-dayoff-header(휴무설정) · .bi-aim-header(AI메시지)
   · 헤더 자체가 없던 화면(대기/상담·디자이너차트). 전부 .bi-erp-toolbar 로 통일하고,
   그 화면들이 쓰던 부제·구분점·구분선만 규격 부속으로 올린다(모듈 클래스 신설 금지). */
.bi-erp-title__dot { width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--brand-blue); flex-shrink: 0; }
.bi-erp-title__sub { font-size: var(--fs-sm); color: var(--txt-muted); font-weight: var(--fw-normal); white-space: nowrap; }
.bi-erp-toolbar__div { width: 1px; height: 14px; background: var(--border-base); flex-shrink: 0; }
.bi-erp-toolbar {
    height: 64px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--space-6);
    border-bottom: 1px solid var(--border-base);
}

.bi-res-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.bi-res-header__left  { display: flex; align-items: center; gap: var(--space-6); }

.bi-res-title {
    font-size: var(--fs-2xl);
    font-weight: var(--fw-bold);
    color: var(--txt-primary);
    margin: 0;
}

/* ============================================================
   팝업 공통 헤더 (.bi-pop-head*) — 2026-07-03 popup.css 에서 이전.
   popup_layer.js 가 '<div class="layer_header bi-pop-head">' 를 호스트 페이지 DOM 에 렌더하므로,
   전 페이지 공통 로드되는 이 파일(style.css)에 있어야 모든 모듈 팝업 헤더가 정상 적용됨.
   (docs/76: 밝은 헤더 + 브랜드블루 아이콘배지 + 둥근 닫기버튼 · menu2 스타일 통일)
   ============================================================ */
.bi-pop-head {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; height: auto; padding: var(--space-4) var(--space-5); box-sizing: border-box;   /* menu2-modal-head 와 동일 간격 (헤더 높이 ≈ 64px) */
    /* 스타일보드 §01 원칙 «헤더는 조용하게» — 흰 배경 · 구분선 없음 · 아이콘은 회색(2026-08-21 A단계).
     * 색은 «사용자가 눌러야 할 곳»(검색 navy · 주 액션 blue · 선택 indigo)에만 쓴다.
     * 선은 리스트 상단과 푸터 상단 두 곳에만 둔다 — 헤더에는 두지 않는다. */
    background: var(--bg-card);
    flex-shrink: 0;
}
/* 헤더 아이콘 = fal(light) 고정 — 모듈 wrap(예: .bi-page--scroll i.fal{font-weight:var(--fw-black)})이 헤더 아이콘까지 solid 로 바꿔 모듈 간 굵기(색감) 달라 보이던 것 통일. 특이도 0,3,1 로 wrap(0,2,1) override */
/* 스타일보드 §03 — 팝업 제목 15px. sg2 스케일(…14·16…)엔 15 가 없어 **16 으로 스냅**한다
 * (반픽셀·비스케일 값을 그대로 옮기면 스케일이 무너진다 — 2026-08-21 에 정한 원칙). */
.bi-pop-head-title {
    font-size: var(--pop-title-fs); font-weight: var(--fw-extrabold); color: var(--txt-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ============================================================
   공통 컴포넌트 규격 (Phase 0 공통화, 2026-07-28)
   재사용 패턴을 모듈 프리픽스 중복 대신 공통 클래스로 정의(아직 모듈 미적용).
   상세: renew_crm/docs/design/CSS_CONSOLIDATION_PLAN.md
   ============================================================ */

/* 빈 상태 — 간단 텍스트형(기본) */
.bi-empty {
    text-align: center;
    color: var(--txt-disabled);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    padding: var(--space-6) 0;
}

/* ── 상태 배지 — 색 스케일 기반 modifier (success/danger/warning/info/neutral) ──────────
 * ⚠ 2026-08-21 «변형이 죽어 있었다». 기본 스킨(.bi-badge)이 파일 뒤쪽에 다섯 벌 더 복사돼
 *   있었고, 마지막 사본이 변형과 «같은 특이도로 더 뒤» 라 색·배경을 되돌렸다 —
 *   danger/warning/info/success/neutral 다섯이 렌더에서 전부 회색 하나로 나왔다(구분 1/6).
 *   테두리 색만 살아남아서 «변형이 있긴 한데 안 먹는» 상태로 오래 갔고,
 *   그래서 모듈들이 인라인 style='color:#ef5350' 으로 상태색을 직접 칠하기 시작했다.
 *   → 정의는 여기 한 곳. 뒤쪽 사본 5개 제거. 변형은 반드시 기본 «뒤» 에 온다.
 *   기본값은 «지금 화면에 나오던 그 값»(뒤 사본의 값)을 그대로 승격했다 — 맨 배지를 쓰는
 *   화면(reception 「실시간 수정 가능」·styleguide2 칩)이 변하지 않게 하려는 것이다. */
.bi-badge {
    display: inline-flex; align-items: center;
    font-size: var(--fs-xs); font-weight: var(--fw-semibold);
    color: var(--txt-muted); background: var(--border-light);
    padding: var(--space-0_5) var(--space-1_5); border-radius: var(--radius-sm);
    border: 1px solid transparent; white-space: nowrap;
}
/* ↓ 변형은 기본 바로 뒤 — 순서가 규격이다. 다른 곳에 흩어 놓지 않는다. */
.bi-badge--danger  { background: var(--color-danger-50);  color: var(--color-danger-600);  border-color: var(--color-danger-200); }
.bi-badge--warning { background: var(--color-warning-50); color: var(--color-warning-700); border-color: var(--color-warning-200); }
.bi-badge--info    { background: var(--color-info-50);    color: var(--color-info-700);    border-color: var(--color-info-200); }
.bi-badge--success { background: var(--color-success-50); color: var(--color-success-700); border-color: var(--color-success-200); }
.bi-badge--neutral { background: var(--gray-100);         color: var(--txt-muted);         border-color: var(--border-base); }

/* sg2 §34 텍스트 링크 — 공통 shipped 클래스(2026-08 신설, 규격 있으나 배포 클래스 부재였음).
   브랜드블루 · 기본 밑줄 없음 · hover 밑줄 */
.bi-link { color: var(--brand-blue); text-decoration: none; cursor: pointer; }
.bi-link:hover { text-decoration: underline; }

/* ── §32 토스트 — 결과 알림(필드 단위 에러는 .bi-write-error) ── */
.bi-toast {
    display: inline-flex; align-items: center; gap: var(--space-2);
    padding: var(--space-2) var(--space-3); border-radius: var(--radius-lg);
    font-size: var(--fs-base); font-weight: var(--fw-medium); box-shadow: var(--shadow-md);
}

/* ── §35 스피너 — 로딩 ── */
@keyframes bi-spin { to { transform: rotate(360deg); } }
.bi-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid var(--border-light);
    border-top-color: var(--brand-blue);
    border-radius: 50%;
    animation: bi-spin .7s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .bi-spinner { animation-duration: 1.4s; } }
/* 그리드 검색 로딩 — 2026-08-24 사용자 지적("일마감이 눌러도 반응이 없어 보인다") + §36
 * "로딩은 기존 화면을 지우지 않고 겹쳐 표시한다". 대상은 검색 그리드 AJAX
 * (/src/api/{모듈}/list.php) 전체 — function.js 가 공용 ajaxSend/ajaxComplete 하나로 붙인다.
 * 모듈 뷰를 하나도 고치지 않는다(§5-7 "동작 추가" 패턴) — .bi-grid-area 는 이미 position:relative. */
.bi-grid-loading {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--bg-card) 75%, transparent);
}

/* ── §28 드롭다운 메뉴 — 행 액션(⋯). 이름이 .bi-menu 가 아닌 이유:
      사이드바가 .bi-menu-shopmall* 네임스페이스를 쓰고 있어 혼동된다(template/side/menu.css). ── */
.bi-dropdown {
    display: inline-flex; flex-direction: column; min-width: 150px;
    background: var(--bg-card); border: 1px solid var(--border-base);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: var(--space-1);
}

/* ── §14 빈 상태 박스 — 점선 테두리 + 아이콘 + 제목/보조.
      그리드 셀 안의 짧은 "없음" 문구는 .bi-cell-empty, 패널 여백형은 .bi-empty--panel. ── */
.bi-emptybox {
    display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
    width: 100%; padding: var(--space-8) var(--space-4);
    background: var(--bg-card); border: 1px dashed var(--border-base); border-radius: var(--radius-lg);
}

/* ── §8 타이포 역할 클래스 — 카드제목/본문/보조. 모듈이 fs+fw+color 세 줄을 매번 다시 쓰던 조합 ── */
/* 카드 타이틀 역할 — 한 이름으로 모은다. .bi-write-card__title · .bi-carousel__stat-val 이
 * 같은 선언을 따로 갖고 있었다(2026-08-14 글자 토큰화가 드러냈다). 규격은 하나다. */
.bi-text-title,
.bi-write-card__title,
.bi-carousel__stat-val { font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--txt-primary); }
.bi-text-sub   { font-size: var(--fs-sm);   font-weight: var(--fw-normal);   color: var(--txt-muted); }
/* 숫자 — 자릿수가 흔들리지 않도록 tabular-nums 고정 */
.bi-num        { font-size: var(--fs-base); font-weight: var(--fw-semibold); color: var(--txt-primary); font-variant-numeric: tabular-nums; }

/* ============================================================
   헤더 셸 — 고객센터 패널(qmenu)·유저메뉴·pr_domain·helpu
   header.php 인라인 <style> 이관 (웨이브0, 2026-08-05)
   ============================================================ */
		.question_close {
			width: 30px; height: 30px;
			display: flex; align-items: center; justify-content: center;
			border-radius: var(--radius-lg);
			color: var(--txt-muted, var(--txt-muted)); cursor: pointer; font-size: var(--fs-lg);
			transition: background .15s, color .15s;
		}
		.question_close:hover { background: var(--border-light, var(--border-light)); color: var(--txt-primary, var(--txt-primary)); }

		#user_menu {
			border: 0;
			border-radius: var(--radius-xs);
			box-shadow: var(--ring-focus);
			font-size: var(--fs-md);
			padding: var(--space-2_5);
			width: 230px;
			height: 170px;
			position: fixed;
			right: 48px;
			z-index: 50;
			background-color: var(--bg-card, var(--bg-card));
			text-align: center;
			overflow: hidden;
		}

		#question_menu {
			width: 300px;
			height: calc(100vh - 50px);
			position: fixed;
			right: -320px;
			z-index: 50;
			background: var(--bg-card, var(--bg-card));
			border-left: 1px solid var(--border-base, var(--border-base));
			box-shadow: var(--shadow-lg);
			text-align: left;
			transition: right 0.25s ease;
			overflow-y: auto;
			overflow-x: hidden;
		}
		#question_menu.open { right: 0; }

		/* 리뉴얼: 고객센터 패널 내부 */
		.qmenu-head {
			display: flex; align-items: center; justify-content: space-between;
			padding: var(--space-4) var(--space-5);
			border-bottom: 1px solid var(--border-light);
		}
		.qmenu-title { font-size: var(--fs-md); font-weight: 800; color: var(--txt-primary, var(--txt-primary)); }
		.qmenu-body { padding: var(--space-2_5) var(--space-3); }
		.qmenu-link {
			display: flex; align-items: center; gap: var(--space-3);
			padding: var(--space-2_5);
			border-radius: var(--radius-xl);
			color: var(--txt-secondary, var(--txt-secondary)); font-size: var(--fs-base); font-weight: 600;
			text-decoration: none;
			transition: background .15s, color .15s;
		}
		.qmenu-link:hover { background: var(--color-info-50, var(--color-info-50)); color: var(--brand-blue, var(--brand-blue)); }
		.qmenu-link-ico {
			width: 34px; height: 34px; flex-shrink: 0;
			display: flex; align-items: center; justify-content: center;
			background: color-mix(in srgb, var(--brand-blue) 5%, transparent); color: var(--brand-blue, var(--brand-blue));
			border-radius: var(--radius-lg); font-size: var(--fs-md);
		}
		.qmenu-sublinks {
			margin-top: var(--space-2); padding: var(--space-3) var(--space-3_5);
			border-top: 1px solid var(--border-light);
			display: flex; flex-direction: column; gap: var(--space-2_5);
		}
		.qmenu-sublinks a {
			color: var(--txt-muted, var(--txt-muted)); font-size: var(--fs-sm); font-weight: 600; text-decoration: none;
			transition: color .15s;
		}
		.qmenu-sublinks a:hover { color: var(--brand-blue, var(--brand-blue)); }

		.pr_domain {
			float: left;
			font-size: var(--fs-2xs);
		}

		.helpu {
			float: right;
			margin-top: var(--space-5);
			position: relative;
			left: -158px;
		}

/* ── 헤더 유저메뉴 드롭다운 행 · CID 상태 (header.php 인라인 → 클래스, 웨이브0 2026-08-05) ── */
#user_menu .um-row { display: flex; align-items: center; justify-content: space-between; height: 45px; border-bottom: 1px solid var(--border-base); font-size: var(--fs-base); color: var(--txt-secondary); }
#user_menu .um-row--head { height: 38px; }
#user_menu .um-logout { cursor: pointer; color: var(--txt-muted); }
#user_menu .um-logout:hover { color: var(--brand-blue); }
#user_menu .um-foot { padding-top: var(--space-2_5); text-align: right; }
.header-icon-btn.header-cid-on { color: var(--color-success); }

/* sg2 §31 팝오버 — 트리거 옆에 뜨는 도움말/목록 패널. display 토글은 JS/hover */
.bi-popover { display: none; position: absolute; min-width: 230px; padding: var(--space-2); background: var(--bg-card); border-radius: var(--radius-lg); z-index: var(--z-popover); box-shadow: var(--shadow-md); }
/* §31 보완(2026-08-11) — .bi-popover 가 position:absolute 인데 기준 요소가 규격에 없었다.
   모듈들이 각자 position:relative 를 얹던 자리(booking_buysell #arrow_pop · setting_sms .bi-ssms-help)를
   규격으로 회수한다. 새 절이 아니라 §31 의 빠진 조각을 채우는 것이다. */
.bi-popover-wrap { position: relative; display: inline-flex; align-items: center; gap: var(--space-1); }
.bi-popover-trigger { cursor: pointer; color: var(--brand-blue); font-style: normal; }
.bi-popover-trigger:hover + .bi-popover { display: block; }
/* sg2 비활성 상태 유틸 */
.bi-disabled { color: var(--txt-disabled); cursor: not-allowed; pointer-events: none; }

/* ── 건수 뱃지 ───────────────────────────────────────────────────────── */
.bi-count-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1_5);
    padding: var(--space-1) var(--space-2_5);
    background: var(--border-light);
    border: 1px solid var(--border-base);
    border-radius: var(--radius-full);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--gray-600);
}
.bi-count-badge__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand-blue);
    flex-shrink: 0;
}

/* ── 팝업 검색 input (클릭 아이콘 + readonly input 조합) ────────────── */
/* 고객·직원 등 팝업 검색 트리거가 있는 input 에 사용 */
.bi-search-trigger-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
/* ⚠ 2026-08-21 «돋보기 위에 커서가 있었다» — 39화면 63칸.
 *   아이콘(.bi-search-trigger)은 left:10px 에 서는데 입력의 글자는 12px 에서 시작했다.
 *   아이콘 폭이 13px 이라 **글자와 커서가 돋보기 위에 10px 겹쳐** 앉았다.
 *   .bi-search-wrap 쪽은 아이콘 자리로 padding-left:36px 를 주는데 이 래퍼에는 그 짝이 없었다 —
 *   «아이콘을 놓는 래퍼는 여백도 같이 준다» 는 규칙이 한쪽에만 적용돼 있었던 것.
 *   ⚠ 이 칸들은 대부분 접히는 「상세조건」(.bi-erp-filter__more) 안에 있어서
 *     펼치지 않고 재는 도구에는 **통째로 안 잡혔다**(probe_caret.mjs 가 그래서 0 을 보고했다).
 *     → 접힌 것을 펼치고 재도록 도구를 고쳤다. */
.bi-search-trigger-wrap input[type="text"].bi-input,
.bi-search-trigger-wrap input[type="search"].bi-input,
.bi-search-trigger-wrap input[type="tel"].bi-input {
    padding-left: var(--space-9, 36px);   /* 아이콘 자리 — .bi-search-wrap 과 같은 값 */
}
.bi-search-trigger {
    position: absolute;
    left: 10px;
    display: flex;
    align-items: center;
    color: var(--txt-muted);
    font-size: var(--fs-base);
    text-decoration: none;
    z-index: 1;
    cursor: pointer;
    transition: color .15s;
}
.bi-search-trigger:hover { color: var(--brand-blue); }

/* ── 검색 인풋 ───────────────────────────────────────────────────────── */
/* ⚠ 2026-08-12: 베이스가 **아이콘 여백(padding-left:36px)을 기본으로** 갖고 있었다.
 * 그래서 아이콘 없는 입력(POS·팝업 등)마다 padding 을 다시 쓰는 사본이 생겼고,
 * 그 사본이 김에 border·radius·background 까지 다시 써서 **두 번째 스킨**이 됐다
 * (.bi-input--strong 이 그것이었다 — 선언 11개 중 9개가 베이스와 겹쳤다).
 * → 베이스는 아이콘을 가정하지 않는다. 여백은 **아이콘을 가진 쪽**(.bi-search-wrap)이 준다. */
.bi-input {
    height: 36px;
    border: 1px solid var(--border-base);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    padding: 0 var(--space-3);
    font-size: var(--fs-md);
    font-family: var(--font-sans);
    color: var(--txt-primary);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    box-sizing: border-box;
}
.bi-input:focus {
    border-color: var(--brand-blue);
    box-shadow: var(--ring-focus);
    background: var(--bg-card);
}

/* ── 입력 폭 규격(필터·검색·그리드 공통) — 디자인은 이 규격 중 선택해서 사용. 모듈별 커스텀 폭 지양 ── */
.bi-page .bi-fw-sm { width: 90px; }   /* 년·월·짧은 코드 */
.bi-page .bi-fw-md { width: 130px; }   /* 전표·금액·승인·키인덱스 */
.bi-page .bi-fw-lg { width: 200px; }   /* 전화·이름·지점 */
.bi-page .bi-fw-xl { width: 340px; }   /* 키워드·제목 */
.bi-page .bi-fw-full { width: 100%; }  /* 컬럼/폼 폭 채움 */
.bi-page .bi-fw-r  { text-align: right; }

/* ── 소량 잔여 공통 패턴 ── */
/* 소형 입력 그룹(년월·금액 등 여러 리포트 공통) */
.bi-fld-group { display: inline-flex; align-items: center; gap: var(--space-1_5); }
/* 그리드 셀 강조 텍스트(위험=빨강 굵게) — low-stock·point-use·출고 등 여러 리포트 공통 */
.bi-page .bi-cell-danger, .bi-erp-card #gridbox .bi-cell-danger { color: var(--color-danger); font-weight: var(--fw-black); }

/* ── 그리드 셀 강조 사다리 (2026-08-21 신설) ──────────────────────────────
 * 「어떤 항목을 강조해야 하나」에 답하려면 먼저 **강조할 수단**이 있어야 한다.
 * 실측: 64개 그리드 중 값을 강조하는 모듈은 **3개**(재고·입출금·포인트)뿐이고,
 *       나머지는 고객명도 메모도 전표번호도 전부 같은 무게(rgba(0,0,0,.7))였다.
 *       그래서 **무엇을 굵게 해도 덜 도드라졌다** — 올리기 전에 «바닥을 낮추는» 게 절반이다.
 *
 *   E1  bi-cell-key   무엇인가   행의 주어(고객명·상품명·직원명). **행당 하나**
 *   E2  bi-cell-amt   얼마인가   그 화면의 주 금액 하나. 자릿수 고정
 *   E!  bi-cell-danger 손대야 할 값 (이미 있음 — 재고부족·출금이 쓰고 있다)
 *   E−  bi-cell-mute  없는 값    0원·빈칸·끝난 행
 *
 * 규칙: 한 행에 강조는 **최대 셋**(무엇 · 얼마 · 상태). 넷을 넘으면 강조가 사라진다.
 * ──────────────────────────────────────────────────────────────────────── */
.bi-page .bi-cell-key  { color: var(--txt-primary); font-weight: var(--fw-semibold); }
.bi-page .bi-cell-amt  { color: var(--txt-primary); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.bi-page .bi-cell-mute { color: var(--txt-disabled); }
/* 끝난 행(취소·환불·미사용) — 행 전체를 물린다. 지우지 않고 «비켜 두는» 표시다 */
.bi-page .dhx_grid-row.bi-row-off .dhx_grid-cell { color: var(--txt-disabled); }

/* 숫자는 자릿수가 흔들리면 열이 삐뚤어 보인다. 우측정렬 셀 = 숫자 칸이므로 일괄 고정.
 * ⚠ 실측에서 tabular-nums 를 쓰는 그리드가 **64개 중 0개**였다 —
 *   규격(.bi-num)에는 있는데 그리드가 한 번도 안 쓰고 있었다. */
.bi-page .dhx_grid-cell.dhx_align-right,
.bi-page .dhx_grid-header-cell--align_right { font-variant-numeric: tabular-nums; }
/* 필터 select(패딩·배경) — 여러 리포트가 개별 정의하던 것 공통화 */
.bi-erp-filter select.bi-input { padding: 0 var(--space-2); background: var(--bg-input); }
/* 만료 라벨 + 체크박스(선불/패키지 잔여 공통) */
.bi-fw-expire-label { margin-left: var(--space-2); color: var(--color-danger); font-weight: var(--fw-medium); }
.bi-fw-expire-label input[type="checkbox"] { visibility: visible; display: inline-block; accent-color: var(--brand-blue); width: 14px; height: 14px; margin-right: var(--space-1); vertical-align: middle; }

/* ── 그리드 셀 인라인 입력(편집 표시) 공통 — 여러 모듈 공용. 폭/정렬만 모듈별(width, --right).
   글로벌 .bi-input(36px·검색아이콘 좌패딩)과 달리 셀용 컴팩트(30px). .bi-page 스코프+ 로 글로벌 input 강제규칙 우선. ── */

.bi-search-wrap {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    max-width: 480px;
    position: relative;
}
/* 세로 스택(패널) 안에 놓이는 검색칸 — 폭 제한 해제 + 아래 간격.
 * 2026-08-21: 접수·디자이너차트의 «분류 안 상품명 검색» 이 이 자리를 사설 스킨
 * (.bi-desk__psearch — 테두리·라운드·높이 34 를 따로 갖고 있었다)으로 메우고 있었다.
 * 규격에 «스택형» 이 없어서 생긴 사본이라 변형으로 승격하고 사설 스킨은 제거했다. */
.bi-search-wrap--stack { max-width: none; margin-bottom: var(--space-2_5); }
/* ⚠ 2026-08-21 «돋보기가 칸 밖에 서 있었다».
 *   래퍼(.bi-search-wrap)만 쓰고 아이콘에 이 클래스를 안 붙인 화면이 넷 있었다
 *   (접수 고객조회·상품검색, 디자이너차트 고객검색·상품검색).
 *   클래스가 없으면 아이콘이 absolute 가 아니라 **flex 아이템**이 되어 입력 테두리 «왼쪽 바깥» 에 서고,
 *   입력에는 아이콘용 padding-left:36px 만 빈 채로 남는다 → 돋보기 밖 + 글자 44px 안쪽.
 *   ① top/transform 을 명시한다 — 파일 안 다른 검색아이콘(.bi-bksch-search-icon 등)과 같은 형태로.
 *      (없을 때는 flex 의 static position 에 기대고 있었다 — 래퍼가 늘어나면 같이 끌려간다)
 *   ② 래퍼 안 <i class="fa-search"> 는 클래스를 잊어도 같은 자리에 서게 셀렉터에 함께 태운다. */
.bi-search-icon,
.bi-search-wrap > i.fa-search {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--txt-disabled);
    font-size: var(--fs-md);
    pointer-events: none;
    z-index: 1;
}

/* ── 검색 셀렉트 ─────────────────────────────────────────────────────── */
.bi-search-select {
    height: 36px;
    border: 1px solid var(--border-base);
    border-radius: var(--radius-lg);
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    padding: 0 var(--space-8) 0 var(--space-3_5);   /* style.css 글로벌 select{padding:1px} 덮어쓰기 */
    background-color: var(--bg-card);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    color: var(--txt-primary);
    outline: none;
    min-width: 120px;
    text-indent: 1px;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: border-color .15s, box-shadow .15s;
}
.bi-search-select:hover { border-color: var(--gray-300); }
.bi-search-select:focus {
    border-color: var(--brand-blue);
    box-shadow: var(--ring-focus);
}

/* ── 검색 영역 ───────────────────────────────────────────────────────── */
/* lib/css/style.css 글로벌 강제 규칙 override */
/* 검색 래퍼 안의 입력 — 래퍼가 아이콘을 갖고 있으므로 **왼쪽 여백은 여기서** 준다.
 * ⚠ 2026-08-12 정리: 같은 셀렉터가 한 목록에 **네 번** 반복돼 있었고,
 *   radius·height·background·box-shadow 를 `` 로 베이스와 똑같이 다시 쓰고 있었다.
 *   베이스가 이미 주는 값이라 전부 뺀다. 여기 남는 건 '이 래퍼라서 필요한 것' 뿐이다. */
/* ⚠ 2026-08-13: 이 규칙이 [type="text"] 만 잡아서 **비밀번호 칸에 아이콘 자리가 안 생겼다** —
 *   로그인 화면에서 자물쇠 아이콘이 «패스워드» 글자를 덮었다(padding-left 36 vs 12).
 *   아이콘을 놓는 래퍼 안이면 **글자를 받는 칸은 종류를 가리지 않는다**. */
.bi-search-wrap input[type="text"].bi-input,
.bi-search-wrap input[type="password"].bi-input,
.bi-search-wrap input[type="search"].bi-input,
.bi-search-wrap input[type="tel"].bi-input,
.bi-search-wrap input[type="email"].bi-input,
.bi-search-wrap input[type="number"].bi-input {
    width: 100%;                 /* 래퍼(아이콘+검색박스) 폭 채움 — 모듈별 width 하드코딩 대신 공통에서 */
    box-sizing: border-box;
    padding-left: var(--space-9, 36px);   /* 아이콘 자리 — 스케일 밖 값이라 폴백 표기 */          /* 아이콘 자리 */
}
/* 우측 clear(X) 버튼 있는 검색 인풋 — 텍스트가 X 아래로 안 깔리게 우패딩 확보 */
.bi-input.bi-input--clearable { padding-right: var(--space-8); }
/* 지우기 단추 — --clearable 입력의 짝. 규격에 짝이 없어 화면이 민무늬 <button> 을 쓰고 있었다
 * (레거시 전역 버튼 스킨이 가려주다가 2026-08-12 그 스킨 제거로 드러남). 값이 있을 때만 보인다. */
.bi-input-clear {
    position: absolute; right: var(--space-2); top: 50%; transform: translateY(-50%);
    width: 20px; height: 20px; display: none; align-items: center; justify-content: center;
    padding: 0; border: 0; background: transparent; cursor: pointer;
    color: var(--txt-disabled); font-size: var(--fs-xs); border-radius: 50%;
    transition: color .15s, background .15s;
}
.bi-input-clear.is-show { display: flex; }
.bi-input-clear:hover { color: var(--txt-secondary); background: var(--border-light); }
.bi-search-wrap input[type="text"].bi-input:focus,
.bi-search-wrap input[type="password"].bi-input:focus,
.bi-search-wrap input[type="search"].bi-input:focus,
.bi-search-wrap input[type="tel"].bi-input:focus,
.bi-search-wrap input[type="email"].bi-input:focus,
.bi-search-wrap input[type="number"].bi-input:focus {
    border-color: var(--brand-blue);
    box-shadow: var(--ring-focus);
    background: var(--bg-card);
}
.bi-sch-input { flex: 1; }

/* ── 검색 영역 멀티 row 유틸리티 ─────────────────────────────────────── */
.bi-search-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}
/* 두 번째 이후 검색 row 상단 간격 */
.bi-search-row--top { margin-top: var(--space-2); }

/* ──────────────────────────────────────────────────────────────
 *  검색 상세조건 접기 (전 모듈 공통 규칙)
 *    · 주요(첫 번째) 검색조건은 항상 보임
 *    · 나머지 검색조건은 .bi-erp-filter__more 로 묶어 기본 숨김
 *    · 주요 row 우측 .bi-filter-tools(상세조건 토글 + 검색버튼) 고정
 *    · 토글 클릭 시 lib/js/function.js 의 위임 핸들러가 .is-open 부착
 * ────────────────────────────────────────────────────────────── */
.bi-filter-tools {            /* 주요 검색조건 바로 옆: 검색 + 상세조건 토글 */
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}
/* 필터바의 «상세조건» — 옆의 검색 버튼(.bi-btn 32)과 같은 줄에 선다.
 * 36 은 사다리에 없는 값이라 검색 버튼보다 커 보였다 → base 32(§12-4, 2026-08-14). */
.bi-erp-filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1_5);
    height: 32px;
    padding: 0 var(--space-3_5);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    color: var(--txt-secondary);
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    line-height: 1;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.bi-erp-filter-toggle:hover { background: var(--border-light); border-color: var(--txt-disabled); }
.bi-erp-filter-toggle__chev { font-size: var(--fs-xs); transition: transform .2s; }
.bi-erp-filter-toggle.is-open { background: var(--color-indigo-50); border-color: var(--color-indigo-200); color: var(--brand-navy); }
.bi-erp-filter-toggle.is-open .bi-erp-filter-toggle__chev { transform: rotate(180deg); }

.bi-erp-filter__more { display: none; }
.bi-erp-filter__more.is-open {
    display: flex;
    flex-direction: column;
    gap: var(--space-2_5);
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px dashed var(--border-base);
}
/* __more 안의 첫 row 는 토글 분리선과 중복되므로 상단 간격 제거 */
.bi-erp-filter__more > .bi-search-row:first-child { margin-top: 0; }

.bi-search-label {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--gray-600);
    min-width: 44px;
    flex-shrink: 0;
    white-space: nowrap;
    letter-spacing: -0.01em;
    /* 2026-08-24 사용자 지적 — 라벨-입력폼 간격이 화면마다 달라 보였다(상품별 재고현황
       「상품분류」4자 vs 「상품명」3자). 원인은 min-width:44px + 왼쪽 정렬 — 글자가 짧을수록
       칸 안에 남는 빈칸이 커져 입력폼까지의 눈에 보이는 거리가 늘어난다(3px 대 13px 차이 실측).
       오른쪽 정렬로 바꿔 «라벨 끝 → 입력폼» 간격을 flex gap 하나로 고정한다(전 화면 공통). */
    text-align: right;
}

/* ── 기간 그룹 ───────────────────────────────────────────────────────── */
/* bi-input 기본 padding(0 12px 0 36px)은 아이콘용 — 날짜 input 은 아이콘 없으므로 override */
.bi-date-group input[type="text"].bi-input { padding: 0 var(--space-3); }input[type="text"].bi-date-input { padding: 0 var(--space-3); width: 130px; }

.bi-date-sep {
    font-size: var(--fs-md);
    color: var(--txt-muted);
}
/* 날짜 picker input 고정 폭 — 모든 리뉴얼 모듈 공통 ID */
#start_date_input,
#end_date_input { width: 110px; }

/* ── 퀵 기간 버튼 그룹 ───────────────────────────────────────────────── */
.bi-quick-btns {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    background: var(--border-light);
    padding: var(--space-1);
    border-radius: var(--radius-md);
}/* ── sg2 §29-1 가로 스크롤 pill 필터바 — 공통(2026-08 승격, 구 member .bi-mem-emp-*).
   항목이 가변·다수인 동적 필터(디자이너/직원). 화살표 네비 + 가로스크롤 + navy 활성.
   ※ 화살표 enabled/disabled 색은 모듈 script.js 가 제어(현행 유지). ── */
.bi-pillbar__arrow {
    flex-shrink: 0; width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--txt-secondary); font-size: var(--fs-xs);
    border-radius: 50%; transition: color .15s, background .15s;
}
.bi-pillbar__arrow:hover { color: var(--txt-primary); background: var(--border-light); }
/* 더 갈 곳이 없는 화살표. JS 가 인라인으로 'black' / rgb(159,159,159) 를 찍던 자리 —
 * 기본색이 --txt-disabled 라 «켜진» 상태를 JS 가 검정으로 덮어써야 했다. 뒤집는다:
 * 기본은 켜진 색, 꺼진 것만 상태 클래스로(2026-08-14). */
.bi-pillbar__arrow.is-disabled { color: var(--txt-disabled); cursor: default; }
.bi-pillbar__arrow.is-disabled:hover { color: var(--txt-disabled); background: none; }

/* ── 그리드 영역 + dhx (§5-5 패턴, .bi-grid-area 스코프) ──────────── */
/* .bi-grid-area 로 스코프 — 미갱신 모듈의 #gridbox 에 영향 없음 */
.bi-grid-area {
    flex: 1;
    position: relative;
    overflow: hidden;
    /* ⚠ min-height 금지 — CLAUDE.md §5-6 클립 함정 */
}
.bi-grid-area #gridbox {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.bi-grid-area #gridbox > * { background: var(--bg-card); }/* 2026-07-24 유령 가로 스크롤바 제거 — 세로 스크롤바가 유발한 ~15px 가짜 넘침.
 *   그리드가 `autoWidth:true` 로 컬럼을 컨테이너 폭에 꽉 맞추는데, 목록이 길어 세로
 *   스크롤바(~15px)가 나타나면 그만큼 사용 가능 폭이 줄어 컬럼이 살짝 넘친다(dhx v7 는
 *   세로 스크롤바 폭을 미리 확보하지 않음) → 불필요한 가로 스크롤바가 뜬다.
 *
 * ⚠ 2026-08-24 «그 처방이 진짜 넘침까지 잘라내고 있었다»(사용자 지적 ⑩ ⑪).
 *   overflow-x:hidden 은 15px 유령만 자르는 게 아니라 **846px 짜리 진짜 넘침도 자른다.**
 *   일마감(846px)·직원별매출(1216px)은 오른쪽 컬럼이 통째로 화면 밖에 있었고,
 *   사용자에게는 «검색이 안 된다» 로 보였다 — 실제로는 결과가 화면 밖에 있었을 뿐이다.
 *
 *   → 자르지 않고, **유령의 원인을 없앤다.**
 *     scrollbar-gutter:stable 로 세로 스크롤바 자리를 처음부터 확보하면
 *     dhx 가 재는 clientWidth 가 흔들리지 않아 15px 넘침 자체가 생기지 않는다.
 *     그러면 overflow-x:auto 로 둬도 «맞는 그리드에는 가로바가 안 뜨고,
 *     진짜 넘치는 그리드는 스크롤된다».
 *   ⚠ 세로(overflow-y)는 건드리지 않는다 — dhx 내부 스크롤 유지. */

/* 넘치는 그리드의 가로 스크롤바는 «보여야» 한다 (2026-08-24).
 * 전역 스크롤바는 6px + 옅은 회색이라 긴 목록 아래에서 찾기도 잡기도 어려웠다
 * ("우측으로 이동이 어려워"). 그리드 안에서만 굵고 또렷하게 — 다른 곳은 그대로 6px. */
.bi-grid-area #gridbox ::-webkit-scrollbar,
.bi-grid-area #gridbox::-webkit-scrollbar { width: 10px; height: 10px; }
.bi-grid-area #gridbox ::-webkit-scrollbar-track,
.bi-grid-area #gridbox::-webkit-scrollbar-track { background: var(--border-light); }
.bi-grid-area #gridbox ::-webkit-scrollbar-thumb,
.bi-grid-area #gridbox::-webkit-scrollbar-thumb {
    background: var(--txt-disabled);
    border-radius: var(--radius-full);
    border: 2px solid var(--border-light);   /* 트랙과 붙지 않게 — 손잡이로 읽힌다 */
}
.bi-grid-area #gridbox ::-webkit-scrollbar-thumb:hover,
.bi-grid-area #gridbox::-webkit-scrollbar-thumb:hover { background: var(--txt-muted); }

/* ── 헤더 행 (floating, no card) ─────────────────────────────────── */

/* 엑셀 버튼 파란 텍스트 — bi-btn--ghost 기반 + 강조 */
/* 아이콘-텍스트 간격을 styleguide 4.버튼 엑셀다운 기준(6px)으로 고정 → 전 모듈 엑셀다운 버튼 동일 간격 보장 */
.bi-excel-btn { color: var(--color-info-600); gap: var(--space-1_5); }
.bi-excel-btn:hover { color: var(--brand-blue); }

/* ── bi-erp-card 내 input — lib/css/style.css 전역 숨김 override ─── */
/* dhx boolean 컬럼, 그리드 내 체크박스 공통 (CLAUDE.md §5-1) */
.bi-erp-card input[type="checkbox"] {
    visibility: visible;
    display: inline-block;
    accent-color: var(--brand-blue);
}
/* dhx v7 boolean 그리드 체크박스(.dhx_checkbox) — 체크/포커스 색을 dhx 기본 #0288d1 → 디자인 블루 var(--brand-blue)(진한 var(--brand-blue) 은 너무 진해 완화) */
.bi-page .dhx_checkbox__input:checked + .dhx_checkbox__visual-input {
    background-color: var(--brand-blue);
    border-color: var(--brand-blue);
}
.bi-page .dhx_checkbox__input:focus + .dhx_checkbox__visual-input {
    border-color: var(--brand-blue);
}

/* ── bi-erp-card 내부 그리드 영역 ────────────────────────────────── */
.bi-erp-card .bi-grid-area {
    flex: 1;
    position: relative;
    overflow: hidden;
}
.bi-erp-card .bi-grid-area #gridbox {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.bi-erp-card .bi-grid-area #gridbox > * { background: var(--bg-card); }
/* sg2 §24-4 — 2026-08-24 사용자 지적: ".dhx_grid-content 에 테두리가 1px 들어가서 굵게 나온다".
 * 벤더(dhtmlxGrid v7 grid.css)가 그리드 콘텐츠 통째에 자체 테두리를 하나 더 그린다
 * (border:1px solid #dfdfdf, 하드코딩 색) — 그런데 바로 밖 .bi-erp-card 가 이미 카드 테두리를
 * 그리고 있고 그 안쪽 여백이 사실상 0(카드 테두리 두께만큼)이라 두 선이 거의 겹쳐 «상자 안 상자»
 * 로 두꺼워 보였다. 바깥 카드가 이미 프레임을 주므로 벤더 것은 지운다. */
.bi-page .dhx_grid-content { border: none; }
.bi-page .dhx_grid-header-cell {
    background: var(--bg-input);
    color: var(--txt-muted);
    font-weight: 600;
    font-size: var(--fs-base);
    border-top: none;
    border-bottom: 1px solid var(--border-base);
    border-left: none;
}/* ── 정렬 표시 리뉴얼 (asc/desc) — FA5 Pro 셰브론 + 브랜드블루 (2026-07-01) ──
   dhx 기본: 머티리얼 글리프 + 하늘색(#0288d1) → 리뉴얼 톤 통일. .bi-page 스코프 전 그리드 일괄.
   근거: docs/modules/74_part_grid_정렬표시_디자인리뉴얼.md */
/* ⚠ 2026-08-25 사용자 지적 — 「정렬 표시가 잘 안 보인다. 마우스를 올려야 흐린 회색으로
 *   보이기도 하고 모양도 잘 모르겠다. 오름차순 위 세모 · 내림차순 아래 세모로,
 *   위치는 항목명 좌측 고정으로.」 셋 다 고친다.
 *   ① 모양 — 얇은 셰브론(\f078/\f077) → **속 찬 세모**(fa-caret, \f0d7/\f0d8).
 *      가는 선은 13px 에서 방향이 안 읽힌다. 세모는 채워져 있어 작아도 방향이 보인다.
 *   ② 보임 — hover 에서만 보이던 것을 **늘 보이게**. 정렬 가능한 열임을 미리 알려야
 *      «눌러 볼 생각» 이 든다. 대신 미정렬은 아주 연하게(연회색), 정렬된 것만 브랜드블루. */
/* ⚠ 아이콘 폰트를 쓰지 않고 **CSS 삼각형**으로 그린다.
 *   벤더가 `.dxi:before { font-family: dhxicons !important }` 로 박아 둬서
 *   FA 글리프로는 이길 수 없다(특이도로는 !important 를 못 이긴다).
 *   `!important` 를 맞불로 놓는 대신 — 그러면 AB-IMPORTANT 가 는다 —
 *   **테두리로 세모를 만든다.** 폰트에 기대지 않으니 로드 실패·글리프 누락이 없고,
 *   13px 에서도 가장자리가 또렷하다.
 *   벤더 글리프(\F14C = 가로줄 3개)는 content 를 비워 지운다 — .dxi 를 함께 태워 (0,3,1) 로 이긴다. */
.bi-page .dhx_grid-sort-icon.dxi:before { content: ""; }
/* 세모 6px(좌우 3+3) × 높이 5px — 좌측정렬이 쓸 수 있는 자리가 8px 뿐이라 그 안에
   «세모 6 + 글자와의 틈 2» 로 맞춘다. 다른 정렬도 같은 값을 써서 **간격이 들쭉날쭉하지 않게**. */
.bi-page .dhx_grid-sort-icon:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 5px solid currentColor;      /* ▼ 내림차순 */
}
/* ▲ 오름차순 — 위로 뾰족하게 */
.bi-page .dhx_grid-sort-icon--asc:after {
    border-top: none;
    border-bottom: 5px solid currentColor;
}
/* 정렬 가능하지만 미정렬 — «늘» 연하게 보인다(hover 조건 없음). hover 면 조금 진해진다. */
.bi-page .dhx_grid-header-cell--sortable .dhx_grid-sort-icon:not(.dhx_grid-sort-icon--asc):not(.dhx_grid-sort-icon--desc) {
    opacity: 1;
    color: var(--gray-300);
}
.bi-page .dhx_grid-header-cell--sortable:hover .dhx_grid-sort-icon:not(.dhx_grid-sort-icon--asc):not(.dhx_grid-sort-icon--desc) {
    color: var(--txt-disabled);
}

/* ── 정렬 아이콘 위치: 셀 가장자리(리사이즈 경계와 겹침) → 항목명 바로 옆 inline (2026-07-01) ──
   dhx 기본은 아이콘을 absolute(right/left:4px)로 셀 끝에 둠 → 리사이즈 핸들과 충돌.
   static 으로 흐름에 편입 + 예약 24px 패딩 제거 → 라벨 우측(우측정렬 컬럼은 좌측)에 밀착.

   ⚠ 2026-08-21 «이 규칙이 6주 동안 지고 있었다».
   아래 한 줄짜리 형태(.bi-page .…--sortable .…-text)는 특이도 (0,3,0) 인데,
   벤더가 **정렬 변형을 붙인 복합 셀렉터**로 같은 (0,3,0) 을 쓴다:
       .dhx_grid-header-cell--align_center.dhx_grid-header-cell--sortable .dhx_grid-header-cell-text
         → padding-right: 24px   (grid.css 7.1.5) / 16px (dhtmlxgrid.css)
       .dhx_grid-header-cell--align_center.dhx_grid-header-cell--sortable .dhx_grid-header-cell-text_content
         → padding-left: 24px
   동점이면 **나중에 로드되는 쪽**이 이긴다. 벤더 시트가 style.css 뒤에 붙으므로 벤더가 이겼다.
   결과: 헤더가 정렬아이콘 자리로 좌 24 + 우 16~24 = **40~48px 를 잃고**,
   넘친 글자는 말줄임 없이 «글자 중간에서» 잘렸다(「예약번3」「디자이니」「|술금액」).
   실측 10개 그리드에서 118컬럼 중 34개가 그렇게 잘려 있었다.
   → 벤더와 **같은 복합 형태 + .bi-page** 로 (0,4,0) 을 만들어 확실히 이긴다.
   ⚠ 벤더 셀렉터가 바뀌면 여기도 바뀌어야 한다 → 회귀는 verify_sec1.mjs 의 G-1 이 잡는다. */
.bi-page .dhx_grid-header-cell--sortable .dhx_grid-header-cell-text { width: auto; }/* 벤더의 «정렬변형 + sortable» 복합 셀렉터를 그대로 맞받는다 (0,4,0) */
.bi-page .dhx_grid-header-cell--align_left.dhx_grid-header-cell--sortable   .dhx_grid-header-cell-text,
.bi-page .dhx_grid-header-cell--align_center.dhx_grid-header-cell--sortable .dhx_grid-header-cell-text,
.bi-page .dhx_grid-header-cell--align_right.dhx_grid-header-cell--sortable  .dhx_grid-header-cell-text,
.bi-page .dhx_grid-header-cell--align_left.dhx_grid-header-cell--sortable   .dhx_grid-header-cell-text_content,
.bi-page .dhx_grid-header-cell--align_center.dhx_grid-header-cell--sortable .dhx_grid-header-cell-text_content,
.bi-page .dhx_grid-header-cell--align_right.dhx_grid-header-cell--sortable  .dhx_grid-header-cell-text_content {
    padding-left: 0;
    padding-right: 0;
}
/* ⚠ 2026-08-25 — 자리를 «항목명 좌측» 으로 고정한다(사용자 지시).
 *   전에는 좌·가운데정렬은 오른쪽, 우측정렬만 왼쪽이라 **열마다 자리가 달랐다.**
 *   눈이 세모를 찾아 좌우로 옮겨다녀야 했다 — 한 자리에 고정한다.
 *
 *   ⚠⚠ 그런데 아이콘이 «자리를 차지한 채» 왼쪽에 서면 좌측정렬 헤더가 그만큼 오른쪽으로
 *   밀린다 — 실측 14px. 그러면 2026-08-21·24 에 두 번에 걸쳐 맞춰 놓은
 *   «헤더 글자 = 데이터 글자» 라인이 도로 어긋난다(22/33 컬럼에서 -14px 확인).
 *   좌측정렬은 글자가 이미 칸 왼쪽 끝이라 **왼쪽에 내줄 자리가 없다.**
 *
 *   → 아이콘을 **레이아웃에서 뺀다**(폭 0 + overflow:visible). 가운데정렬에서 쓰던 방법을
 *     전 정렬로 넓혔다. 상자는 글자 바로 앞에 폭 0 으로 서고, 세모는 음수 마진으로
 *     그 왼쪽(헤더 좌패딩 16px 안)에 그려진다. 글자 위치는 **바뀌지 않는다.** */
.bi-page .dhx_grid-sort-icon {
    position: static;
    transform: none;
    top: auto;
    left: auto;
    right: auto;
    order: -1;                        /* 항상 항목명 앞(왼쪽) */
    width: 0;                         /* 레이아웃을 넓히지 않는다 */
    margin: 0;
    overflow: visible;
    flex: 0 0 auto;
}
/* 폭 0 상자 «안» 의 일이라 정렬 계산에 영향이 없다 — 세모만 글자 왼쪽으로 빼낸다.
   가운데·우측정렬은 글자 왼쪽에 빈자리가 있어 이걸로 충분하다. -8 = 세모 6 + 틈 2. */
.bi-page .dhx_grid-sort-icon:after { margin-left: calc(-1 * var(--space-2)); }

/* ⚠ 좌측정렬만 다르다 — 글자가 칸 왼쪽 «끝» 이라 왼쪽에 내줄 자리가 없다.
 *   헤더 칸은 overflow:hidden 이고 좌패딩이 8px 뿐이라, 위 -14px 로 빼내면 세모가 **잘린다**
 *   (실측 — 칸 바깥 x312 에 그려져 조각만 보였다).
 *   → 그 8px 패딩을 아이콘에게 그대로 넘긴다. 패딩이 줄어든 만큼 아이콘이 자리를 차지하므로
 *     **글자 위치는 1px 도 바뀌지 않는다**(라인 어긋남 0 유지). 세모는 칸 안에 온전히 들어간다. */
.bi-page .dhx_grid-header-cell--align_left.dhx_grid-header-cell--sortable { padding-left: 0; }
/* space-2(8px) 안에 «세모 6 + 틈 2» — 가운데·우측정렬의 -space-2 와 같은 리듬이 된다 */
.bi-page .dhx_grid-header-cell--align_left .dhx_grid-sort-icon { width: var(--space-2); }
.bi-page .dhx_grid-header-cell--align_left .dhx_grid-sort-icon:after { margin-left: 0; }
/* ⚠ 2026-08-24 «매출 결제현황은 헤더가 34~50px 왼쪽»(사용자 지적 ⑧) — 위 8~9px 과 다른 원인이다.
 *   헤더 글자는 flex 컨테이너(.dhx_grid-header-cell-text_content) 안에 있는데,
 *   벤더는 justify-content 를 **«정렬 가능(sortable)» 헤더에만** 건다.
 *   정렬을 끈 그리드(headerSort:false)는 justify-content 가 normal(=왼쪽)이라
 *   text-align:center 를 줘도 **flex 컨테이너에는 안 먹어** 글자가 왼쪽에 붙었다.
 *   → 정렬 클래스대로 flex 정렬을 준다. 정렬 가능 여부와 무관하게. */
.bi-page .dhx_grid-header-cell--align_left   .dhx_grid-header-cell-text_content { justify-content: flex-start; }
.bi-page .dhx_grid-header-cell--align_center .dhx_grid-header-cell-text_content { justify-content: center; }
.bi-page .dhx_grid-header-cell--align_right  .dhx_grid-header-cell-text_content { justify-content: flex-end; }

/* ⚠ 2026-08-21 «항목명은 왼쪽에 붙고 데이터는 가운데라 라인이 안 맞는다»(사용자 지적).
 *   가운데정렬 컬럼만 그랬다 — 헤더는 «라벨 + 정렬아이콘» 을 **한 덩어리로** 가운데 두는데
 *   셀은 값만 가운데 둔다. 그래서 라벨이 아이콘 폭의 절반(실측 8~9px)만큼 왼쪽으로 밀렸다.
 *   (좌·우 정렬은 기준 모서리가 아이콘 반대쪽이라 영향이 없다 — 실측 0px)
 *   ⚠ 벤더는 이걸 text_content 의 padding-left:24px 로 «반대편에 같은 폭을 둬서» 상쇄하고 있었다.
 *     그 여백이 항목명을 잘라먹던 범인이라 걷어냈고(G-1), 그러자 이 어긋남이 드러났다.
 *     여백으로 되돌리면 잘림이 돌아온다 → **아이콘이 자리를 안 먹게** 한다.
 *     폭 0 + overflow:visible 이면 글리프는 그대로 보이면서 가운데 계산에서 빠진다. */
/* (구 «가운데정렬만 폭 0» 규칙 — 2026-08-25 부터 위에서 **전 정렬**에 같은 처리를 하므로
   따로 둘 이유가 없어졌다. 가운데정렬이 겪던 8~9px 어긋남도 그 규칙이 그대로 막아 준다.) */
/* 멀티행(colspan) 그룹 헤더 셀 — dhx 기본 .dhx_span-cell(var(--gray-50)) 을 일반 헤더 톤·보더와 통일
   (패키지/선불권 판매현황 등 2행 헤더의 'X월' 그룹 셀이 본문 헤더와 어긋나 보이는 문제) */
.bi-page .dhx_span-cell {
    background: var(--bg-input);
    color: var(--txt-muted);
    font-weight: 600;
    font-size: var(--fs-base);
    border-top: none;
    border-bottom: 1px solid var(--border-base);
}/* ═══════════════════════════════════════════════════════════════════
   분석 리포트 공통 — 섹션 카드 / 타이틀 / 차트 (bi-anl-*)
   (월별매출현황 / 고객매출분석 / 재방률분석 / 상품매출분석 통일)
   ═══════════════════════════════════════════════════════════════════ */
.bi-anl-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: var(--space-4) var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    background: var(--bg-card);
}
.bi-anl-card {
    background: var(--bg-card);
    border: 1px solid var(--border-base);
    border-radius: var(--radius-xl);
    padding: var(--space-4) var(--space-5);
    flex-shrink: 0;
}
/* 2026-08-24 사용자 지시 — 4페이지 디자인은 지금대로 두고, 월별 매출현황만 그래프 카드의
   라운드를 뺀다(월별 매출현황 <b>1건</b>). 바로 아래 그리드 카드(.bi-erp-gridwrap)는 이미
   각짐(border-radius:0) — 라운드를 빼면 위아래 카드가 이어져 보인다. 다른 3개 분석 페이지의
   .bi-anl-card 는 건드리지 않는다(신규 클래스로 이 화면만 opt-in).
   ⚠ 같은 지시 이어서 — 라운드를 빼니 .bi-anl-card 의 4면 테두리 중 위·좌·우가 바로 밖
   .bi-erp-card 테두리와 겹쳐 이중선으로 보였다(사용자 지적). 아래 그리드 카드와 맞닿는
   면(아래)만 남기고 나머진 뺀다 — 바깥 카드가 이미 그 3면의 프레임을 준다. */
.bi-anl-card--square {
    border-radius: 0;
    border: none;
    border-bottom: 1px solid var(--border-base);
}
.bi-anl-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    color: var(--txt-primary);
    letter-spacing: -0.01em;
    margin: 0 0 var(--space-3_5);
}
.bi-anl-title::before {
    content: "";
    width: 3px;
    height: 14px;
    background: var(--brand-blue, var(--brand-blue));
    border-radius: var(--radius-xs);
    flex-shrink: 0;
}
.bi-anl-charts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-4);
}
.bi-anl-chart-title {
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    color: var(--txt-secondary);
    text-align: center;
    margin-bottom: var(--space-2);
}/* sg2 §24 그리드 빈 셀 값 — '-' 등 없음 표시(muted). 공통(2026-08, 구 module .bi-*-memo-empty) */
.bi-cell-empty { color: var(--txt-disabled); }
/* sg2 §24 넓은 그리드 가로 스크롤 — 컬럼 총합 > 컨테이너인 리포트(고정폭 컬럼+autoWidth:false).
   공통 '유령 가로스크롤 방지'(overflow-x:hidden)를 명시 opt-in 으로 되돌림. */
.bi-grid-area--xscroll { overflow-x: auto; }/* sg2 §40-5 차트/그리드 캔버스 박스 — 고정높이 필요(chart.js·고정높이 그리드). .bi-anl-chart-cell 내부 */
.bi-anl-chart-box { width: 100%; height: 240px; }
@media (max-width: 1280px) { .bi-anl-chart-box { height: 200px; } }
/* sg2 §16 월 선택 datepicker 변형 — 일(날짜) 표 숨기고 월·년만 */
.bi-monthpicker .ui-datepicker-calendar { display: none; }
/* (구 «월 달력엔 오늘/닫기 줄을 보인다» 규칙은 뺐다 — 2026-08-24 부터 월은
   12칸 판에서 고르면 바로 닫히므로 그 줄 자체를 만들지 않는다. showButtonPanel:false) */
/* sg2 §16-2 월 판(1~12월) — 2026-08-24 사용자 지적 ③, 재작업(같은 날 ②차) —
 * 「캘린더가 완전히 바뀌었다. 기존 년월일 캘린더와 디자인이 너무 다르다」.
 * 첫 판은 머리줄에 <select> 를 그대로 노출해 일 달력(화살표+가운데 제목)과 다른 위젯처럼 보였다.
 * 화살표·제목 자리를 일 달력과 «같은 마크업» 으로 채운다 — 새 스킨을 만들지 않는다.
 *   · 월·연 <select> 는 지우지 않고 **둘 다** «숨김 보관함»(기존 <code>.bi-hidden</code> 재사용)으로
 *     옮긴다(jQuery UI 상태·data-handler 바인딩 유지, 그림은 안 그린다). select 만 display:none
 *     하면 jQuery UI 가 그 옆에 끼워 넣는 «년»(yearSuffix) 맨텍스트가 안 가려져 "2026년년" 으로
 *     겹쳐 보였다 — 텍스트 노드는 CSS 로 못 가리므로 통째로 옮긴다(function.js biMonthGrid).
 *   · 화살표(.ui-datepicker-prev/next)는 **그대로 보인다** — 일 달력과 똑같은 버튼이다.
 *     다만 여기선 «달» 이 아니라 **연도** 를 옮긴다(12칸을 다 깔았으니 달 이동은 뜻이 없다).
 *     클릭을 가로채는 코드는 function.js — 캡처 단계에서 jQuery UI 자체 핸들러보다 먼저 잡는다.
 *   · 제목 자리(.ui-datepicker-title)에 우리가 만든 «2026년» 글자만 얹는다 — 굵기·배경·정렬은
 *     이미 있는 .ui-datepicker-header/.ui-datepicker-title 규칙을 그대로 물려받는다(별도 지정 없음). */
.bi-monthgrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-1);
    padding: var(--space-2);
}
.bi-monthgrid__cell {
    height: 34px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--txt-primary);
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    line-height: 1;
    cursor: pointer;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}
/* font-family 만 따로 — .ui-widget button 이 Verdana 로 덮는다(jquery-ui CDN 테마, style.css 보다
   뒤에 로드돼 특이도 동점(0,2,1)에서 이긴다). #ui-datepicker-div 로 스코프를 좁혀 이긴다.
   배경·테두리 등 나머지는 이 문제가 없어(브라우저 기본 button 은 항상 저순위) 스코프가 필요 없다
   — 스코프를 걸면 styleguide2 정적 목업(진짜 #ui-datepicker-div 밖)에 회색 버튼 배경이 샜다. */
#ui-datepicker-div .bi-monthgrid__cell { font-family: var(--font-sans); }
.bi-monthgrid__cell:hover { background: var(--border-light); }
.bi-monthgrid__cell:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.bi-monthgrid__cell.is-on {
    background: var(--brand-navy);
    border-color: var(--brand-navy);
    color: var(--bg-card);
    font-weight: var(--fw-semibold);
}
/* 제목 자리("2026년") — 일 달력 제목과 같은 칸(.ui-datepicker-title)에 얹혀 배경·굵기·정렬은
   이미 상속받는다. 폭이 좁아져도 "2026" 과 "년" 사이가 줄바꿈되지 않게만 한다. */
.bi-monthgrid__yr { white-space: nowrap; }
/* 달력 버튼줄(오늘·닫기) — jQuery UI 기본 스킨이 그대로였다(영문·Verdana·회색 테두리).
 * 글자는 function.js 의 currentText/closeText 가 한글로 바꾸고, 모양은 여기서 규격으로. */
.ui-datepicker .ui-datepicker-buttonpane {
    padding: var(--space-2) var(--space-3);
    border-top: 1px solid var(--border-light);
    background: var(--bg-input);
    margin: 0;
}
.ui-datepicker .ui-datepicker-buttonpane button {
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--txt-secondary);
    background: var(--bg-card);
    border: 1px solid var(--border-base);
    border-radius: var(--radius-md);
    padding: var(--space-1) var(--space-3);
    cursor: pointer;
}
.ui-datepicker .ui-datepicker-buttonpane button:hover { background: var(--bg-input); border-color: var(--gray-300); }
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-close {
    background: var(--brand-blue); border-color: var(--brand-blue); color: var(--bg-card); font-weight: var(--fw-bold);
}

/* ═══════════════════════════════════════════════════════════════════
   칼럼 표시/순서 커스터마이즈 톱니 (lib/js/grid_colcfg.js 자동 부착)
   참고: renew_crm/docs/modules/66_part_grid_컬럼순서표시_커스터마이즈.md
   ═══════════════════════════════════════════════════════════════════ */
.bi-grid-area .bi-ra-grid-tools {
    position: absolute;
    top: 6px;
    right: 12px;
    z-index: 6;
}

/* ── 결제탭 높이 보정 modifier ─────────────────────────────────────── */
/* 결제/리포트 탭(42px) + 헤더(--header-height, 50px) — 구 64px 하드코딩 정렬 (2026-06-15) */
.bi-page--payment { height: calc(100vh - var(--header-height) - 42px); }

/* ── 결제구분 컬럼 강조 (dhx template 내 span 적용) ────────────────── */
.bi-pay-approved { color: var(--color-info-600); font-weight: var(--fw-black); }
.bi-pay-canceled { color: var(--color-danger); font-weight: var(--fw-black); }/* ── 1. 툴바 ───────────────────────────────────────────── */
@keyframes bi-erp-pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

/* ── 2. 필터 영역 ──────────────────────────────────────── */
.bi-erp-filter {
    flex-shrink: 0;
    padding: var(--space-3_5) var(--space-6);
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-100);
    display: flex;
    flex-direction: column;
    gap: var(--space-2_5);
}

/* ── 상태 탭 ─────────────────────────────────────────────
 * 규격(2026-08-21 확정): ① 자리는 **필터카드의 마지막 줄** — 접히는 .bi-erp-filter__more 안에
 *   넣지 않는다(매출관리가 거기 있어서 0x0 으로 «한 번도 보이지 않았다»).
 *   ② 다른 검색조건과 같이 **왼쪽 .bi-search-label** 을 붙인다(「예약상태」「전표상태」).
 *   ③ 0건 탭도 숨기지 않는다 — 검색결과가 0 이라는 것도 답이다. */
.bi-erp-tabs { display: flex; align-items: center; gap: var(--space-1_5); flex-wrap: wrap; margin-top: var(--space-2_5); }
/* 라벨과 한 줄에 설 때는 줄 자체가 간격을 갖는다 → 탭의 위 여백은 뺀다 */
.bi-search-row > .bi-erp-tabs { margin-top: 0; }

/* ── 탭형 단일선택 필터 (2026-08-24, 사용자 지시 ⑤) ──────────────────────────
 * 「전체 + 몇 가지 중 하나」를 고르는 필터가 화면마다 라디오 / 탭으로 갈려 있었다
 * (실측: 라디오 84개 · 16화면). 용도가 같으니 매출관리 전표상태 탭으로 통일한다.
 *
 * ⚠ 라디오를 «지우지» 않는다 — 겉모습만 탭으로 바꾼다.
 *   목록 검색은 폼을 serializeArray() 로 통째로 보낸다. 라디오를 hidden input 으로 바꾸면
 *   16개 모듈의 읽는 쪽을 전부 손봐야 하고, 그 중 하나만 놓쳐도 «검색이 안 되는» 화면이 생긴다.
 *   라디오를 그대로 두면 전송·복원·접근성이 전부 그대로다.
 *   활성 표시는 :has(:checked) 가 맡는다 — JS 없이 «지금 무엇이 골라졌는가» 가 따라온다. */
.bi-erp-tabs .bi-erp-tab input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 1px; height: 1px;
    margin: 0;
    pointer-events: none;
}
/* label 은 button 과 달리 기본이 content-box 라 테두리 2px 이 더해져 34px 가 된다 —
 * 같은 줄의 버튼(32)과 어긋난다. 높이는 사다리 값 그대로 유지한다. */
.bi-erp-tabs label.bi-erp-tab { position: relative; user-select: none; box-sizing: border-box; }
.bi-erp-tabs label.bi-erp-tab:has(input[type="radio"]:checked) {
    background: var(--brand-navy);
    border-color: var(--brand-navy);
    color: var(--bg-card);
}
/* 키보드로 옮겨 다닐 때도 어디에 있는지 보여야 한다 */
.bi-erp-tabs label.bi-erp-tab:has(input[type="radio"]:focus-visible) {
    box-shadow: var(--ring-focus);
}
/* 2026-08-21: 높이를 사다리 값(32)으로 고정. 여백으로 정하면 카운트 칩이 있는 탭(30)과
 * 없는 탭(28)이 갈린다 — 실제로 예약관리 30 · 매출관리 28 로 갈려 있었다. */
.bi-erp-tab {
    display: inline-flex; align-items: center; gap: var(--space-1_5);
    height: 32px;
    padding: 0 var(--space-3_5); border-radius: var(--radius-full);
    border: 1px solid var(--border-base); background: var(--bg-card);
    color: var(--gray-600); font-size: var(--fs-sm); font-weight: var(--fw-medium);
    cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
.bi-erp-tab:hover { background: var(--bg-input); border-color: var(--gray-300); }
.bi-erp-tab.is-active { background: var(--brand-navy); border-color: var(--brand-navy); color: var(--bg-card);  }

/* ── 3. 그리드 액션바 ──────────────────────────────────── */
.bi-erp-actionbar {
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--space-2_5) var(--space-6);
    border-bottom: 1px solid var(--border-base);
    background: var(--bg-card);
}
.bi-erp-actionbar__right { display: flex; align-items: center; }
.bi-erp-result { display: inline-flex; align-items: center; gap: var(--space-1_5); font-size: var(--fs-base); font-weight: var(--fw-semibold); color: var(--gray-600); }
.bi-erp-result__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand-blue); }
.bi-erp-result__val { color: var(--brand-blue); font-weight: var(--fw-extrabold); font-size: var(--fs-md); }

/* ── 조회결과 전역 제거(공통 기본사양) — 표시항목 ⚙ 가 이 자리를 대체 ── */
.bi-erp-actionbar__right .bi-erp-result { display: none; }

/* ── 표시항목(칼럼 표시설정) = 기존 grid_colcfg.js ⚙ 을 툴바 오른쪽(조회결과 자리)에 라벨버튼으로 ── */
/* ⚠ 이 버튼은 lib/js/grid_colcfg.js 가 **전 목록 화면에 주입**한다. 아래 베이스가 없으면
 *   51개 화면에서 브라우저 기본 버튼(회색·2px 둥글기)으로 나온다 — 실제로 그렇게 됐었다.
 *   (2026-08-12 복구. 지우기 전에 lib/js 가 쓰는지 본다) */
.bi-ra-grid-cog {
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--border-base);
    background: var(--bg-card);
    color: var(--gray-600);
    border-radius: var(--radius-lg);
    cursor: pointer;
    font-size: var(--fs-md);
    transition: background .15s, border-color .15s, color .15s;
}
.bi-ra-grid-cog:hover { background: var(--bg-input); border-color: var(--gray-300); color: var(--txt-primary); }
.bi-ra-grid-cog[aria-expanded="true"] { background: var(--border-light); border-color: var(--gray-300); color: var(--brand-navy); }
.bi-ra-grid-cog__t { display: none; }
.bi-erp-actionbar__right .bi-ra-grid-tools { position: relative; }
/* 액션바에서는 글자가 붙어 가로로 길어진다. ⚠ 그래도 **높이는 사다리 값**이어야 한다 —
 * `height:auto` 로 두면 padding 이 높이를 정해 28px 이 되고, 옆 버튼(sm 27)과 어긋난다.
 * 문서 §12-4: "버튼 크기는 오직 이 표의 변형으로. 모듈 이름이 맡을 수 있는 건 배치뿐"(2026-08-14). */
/* 2026-08-21: 27 → 32. 같은 줄의 행 액션(.bi-btn--xs)이 32 가 되면서
 * 부수 버튼이 주 액션보다 커 보이던 역전이 사라진다 — «한 줄엔 한 크기». */
.bi-erp-actionbar__right .bi-ra-grid-cog {
    width: auto; height: 32px; padding: 0 var(--space-3); gap: var(--space-1_5);
    font-size: var(--fs-base); font-weight: var(--fw-semibold); color: var(--txt-secondary);
}
.bi-erp-actionbar__right .bi-ra-grid-cog__t { display: inline; }

/* ── 4. 그리드 래퍼 (카드 chrome 제거, dhx 테마는 위 .bi-erp-card 재사용) ── */
.bi-erp-gridwrap.bi-erp-card {
    border: none;
    border-radius: 0;
    box-shadow: none;
    flex: 1;
    min-height: 0;
}

/* ── 5. 페이지네이션 풋터 ──────────────────────────────── */
.bi-erp-foot {
    flex-shrink: 0;
    height: 52px;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 var(--space-6);
    border-top: 1px solid var(--border-base);
    background: var(--bg-card);
    font-size: var(--fs-base); color: var(--txt-muted);
}
.bi-erp-foot__size { display: inline-flex; align-items: center; gap: var(--space-1_5); color: var(--txt-muted); }
.bi-erp-size-select {
    height: 30px; border: 1px solid var(--border-base); border-radius: var(--radius-md);
    padding: 0 var(--space-1_5); background: var(--bg-card); color: var(--txt-secondary);
    font-size: var(--fs-base); font-weight: var(--fw-semibold); cursor: pointer; outline: none;
}
.bi-erp-size-select:focus { border-color: var(--brand-blue); box-shadow: var(--ring-focus); }
.bi-erp-foot__sep { color: var(--gray-300); }
.bi-erp-foot__range { color: var(--txt-muted); }
.bi-erp-foot__range b { color: var(--txt-primary); font-weight: var(--fw-bold); }

/* bi-erp-filter 내 입력 — lib/css/style.css 전역 강제 override (bi-filter-card 와 동일, CLAUDE.md §5-1) */
.bi-erp-filter input[type="text"].bi-input {
    background: var(--bg-card); height: 36px; border-radius: var(--radius-lg);
    border: 1px solid var(--border-base);
    font-size: var(--fs-base);
    transition: border-color .15s, box-shadow .15s;
}
.bi-erp-filter input[type="text"].bi-input:hover { border-color: var(--gray-300); }
.bi-erp-filter input[type="text"].bi-input:focus {
    border-color: var(--brand-blue); box-shadow: var(--ring-focus);
}
.bi-erp-filter input[type="text"].bi-input::placeholder { color: var(--txt-disabled); }
/* 검색영역 모든 select 일관 룩 (모듈별 select 포함) — 흰 배경 + 커스텀 화살표 + hover/focus 링 */
.bi-erp-filter select {
    height: 36px;
    border: 1px solid var(--border-base);
    border-radius: var(--radius-lg);
    background-color: var(--bg-card);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding: 0 var(--space-8) 0 var(--space-3_5) !important;   /* style.css 글로벌 select{padding:1px!important} 덮어쓰기 */
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    color: var(--txt-primary);
    cursor: pointer;
    text-indent: 1px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: border-color .15s, box-shadow .15s;
}
.bi-erp-filter select:hover { border-color: var(--gray-300); }
.bi-erp-filter select:focus { outline: none; border-color: var(--brand-blue); box-shadow: var(--ring-focus); }
.bi-erp-filter input[type="radio"] {
    visibility: visible; display: inline-block;
    accent-color: var(--brand-blue); width: 14px; height: 14px; cursor: pointer; flex-shrink: 0;
}
.bi-erp-filter input[type="checkbox"] {
    visibility: visible; display: inline-block; accent-color: var(--brand-blue);
}
/* 날짜 input 아이콘용 좌패딩 해제 (bi-date-group 과 동일) */
.bi-erp-filter .bi-date-group input[type="text"].bi-input { padding: 0 var(--space-3); }/* ===== sg2 §26-4 권한/설정 매트릭스 — 공통 (2026-08 승격, 구 authority .bi-aut-*).
   메뉴×권한 격자 + 카테고리 헤더 + 셀 체크박스. 컬럼 구성은 매트릭스 표준(이름+5권한). ===== */
.bi-permmatrix-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 92px 92px 92px 92px 92px;
    align-items: center;
    border-bottom: 1px solid var(--border-light);
    transition: background .12s;
}
.bi-permmatrix-row:last-child { border-bottom: none; }
.bi-permmatrix-row input[type="checkbox"] + label { display: none; }
@media (max-width: 1280px) {
    .bi-permmatrix-row { grid-template-columns: minmax(0, 1fr) 80px 80px 80px 80px 80px; }
}

/* ── write 본문 래퍼 ─────────────────────────────────────────────────── */
.bi-write-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-4) var(--space-6) var(--space-8);
}

/* ── lib/css/style.css writeinput height:25px 무력화 / password 동일 스타일 ──
   2026-06-09: .bi-write-body 스코프 → .bi-write-page 스코프로 확장
               (pay_ref/pay_init/pay_edit 처럼 .bi-write-body 없이 직접 .bi-write-card 만 사용하는 모듈 대응) */
.bi-write-page input[type="password"].bi-input, .bi-write-page input[type="text"].bi-input, .bi-write-body input[type="password"].bi-input, .bi-write-body input[type="text"].bi-input, .bi-pop-reg input[type="text"].bi-input, .bi-pop-reg input[type="date"].bi-input {
    height: 36px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-base);
    background: var(--bg-card);
    padding: 0 var(--space-3);
    font-size: var(--fs-md);
    color: var(--txt-primary);
    outline: none;
    box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s;
}
.bi-write-page input[type="password"].bi-input:focus, .bi-write-page input[type="text"].bi-input:focus, .bi-write-body input[type="password"].bi-input:focus, .bi-write-body input[type="text"].bi-input:focus, .bi-pop-reg input[type="text"].bi-input:focus, .bi-pop-reg input[type="date"].bi-input:focus {
    border-color: var(--brand-blue);
    box-shadow: var(--ring-focus);
    background: var(--bg-card);
}.bi-form select.bi-input { cursor: pointer; }
/* 날짜 입력 = 표준 .bi-input.bi-date-input(§16). 아이콘 affix 특수케이스 제거(2026-08). */
.bi-form textarea.bi-input { height: auto; min-height: 60px; padding: var(--space-2) var(--space-3); resize: vertical; line-height: 1.5; }/* ── 카드 ────────────────────────────────────────────────────────────── */
.bi-write-card {
    background: var(--bg-card);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-base);
    margin-bottom: var(--space-4);
}
.bi-write-card__header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px solid var(--border-base);
    background: var(--bg-input);
}
.bi-write-card__header--required { border-bottom: 2px solid var(--color-info-500); }
.bi-write-card__header--required .bi-write-card__title { color: var(--color-info-700); }
.bi-write-card__hint { font-size: var(--fs-sm); color: var(--color-danger); display: none; }
/* sg2 §21 폼 필드 안내문 — 입력 아래 보조 설명(*안내). 표시/숨김 토글은 JS(인라인 display 허용) */
/* sg2 §21 폼 읽기전용 값 — 라벨 옆/아래 계산·표시 값(입력 아님) */
.bi-write-value { display: inline-block; font-size: var(--fs-md); color: var(--txt-secondary); padding: var(--space-2) 0; }
/* sg2 §19 입력 단위 접미(%, 원, 개 등) — 숫자입력 뒤 붙는 단위 라벨 */
/* sg2 §21 필수 표시 · 필드 에러 (2026-08-10 승격)
   규격(styleguide2 §21)은 필수 별표와 에러 메시지를 정의하고 있었는데 공통 구현이 없어,
   규격 페이지가 .sg2doc-req/.sg2doc-errmsg 로 자기 안에 그려두고 있었다 → 여기로 올린다.
   에러 상태는 §40-11 상태 모디파이어 규약대로 .is-error 를 필드 클래스에 결합해 쓴다. */
.bi-write-error { font-size: var(--fs-sm); color: var(--color-danger); }/* input-group 내 narrow(--sm) 입력은 늘어나지 않음(단위·버튼 자리 확보) */
.bi-fld-group .bi-write-input--sm { flex: none; }
/* sg2 §22 폼 정보 안내 박스 — 아이콘+문구, info 톤. 폼 상단/필드 위 설명 배너 */
.bi-write-notice {
    display: flex; align-items: center; gap: var(--space-2);
    margin-bottom: var(--space-4); padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-info-100); border-radius: var(--radius-lg);
    background: var(--color-info-50); color: var(--color-info-700); font-size: var(--fs-base);
}
.bi-write-notice i { font-size: var(--fs-md); }
.bi-write-card__body { padding: var(--space-5) var(--space-6); }

/* ── write 폼 레이아웃 ───────────────────────────────────────────────── */
.bi-write-row {
    display: flex;
    gap: var(--space-5);
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
    align-items: flex-start;
}
/* 카드바디 '직계' 마지막 행만 여백 0 (2026-08). 구 `.bi-write-row:last-child`는
   조건부 서브섹션(.emp-id-section·#naver_section·#block_* 등)의 마지막 행까지 과잉 매칭해
   섹션 간 여백이 사라졌음 → 모듈별 복원 override 필요했음. 직계 스코프로 그 부작용 제거. */
.bi-write-card__body > .bi-write-row:last-child { margin-bottom: 0; }

.bi-write-field {
    flex: 1;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.bi-write-field--full { flex: 0 0 100%; }

.bi-write-label {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--txt-muted);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.bi-write-label-sub {
    font-size: var(--fs-xs);
    font-weight: var(--fw-normal);
    color: var(--txt-disabled);
}

/* ── 세로 정렬 변형(.bi-write-stack) ─────────────────────────────────────
 * 레이블을 행 전체 폭으로 올려(→ 자체 줄) 입력을 다음 줄에 가로 배치.
 * label↔input 세로 간격(row-gap)을 모든 행에 일정하게 부여. (pay_init·pay_edit 등)
 * 기존 .bi-write-row(가로 라벨) 는 그대로 두고, 이 변형이 붙은 폼/영역에서만 세로화. */
.bi-write-stack .bi-write-row {
    row-gap: var(--space-1_5);      /* label ↔ input 세로 간격 (일정) */
    column-gap: var(--space-3);  /* 같은 줄 입력들 사이 가로 간격 */
}
.bi-write-stack .bi-write-row > .bi-write-label {
    flex: 0 0 100%;    /* 레이블을 한 줄 전체로 → 입력은 다음 줄 */
    width: 100%;
}

/* ── 인풋 보조 클래스 ─────────────────────────────────────────────────── */
.bi-write-input--readonly {
    background: var(--border-light);
    color: var(--txt-muted);
    cursor: not-allowed;
}
.bi-write-input--zip { max-width: 200px; }

/* ── 인풋 그룹 (인풋 + 버튼 나란히) ─────────────────────────────────── */
.bi-fld-group input { flex: 1; }

/* ── 주소 래퍼 ───────────────────────────────────────────────────────── */
.bi-write-addr-wrap input { flex: 1; }

/* ── 텍스트에어리어 ───────────────────────────────────────────────────── */
.bi-write-textarea {
    width: 100%;
    height: 100px;
    border: 1px solid var(--border-base);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    padding: var(--space-2) var(--space-3);
    font-size: var(--fs-md);
    color: var(--txt-primary);
    resize: vertical;
    font-family: var(--font-sans);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    box-sizing: border-box;
}
.bi-write-textarea:focus {
    border-color: var(--brand-blue);
    box-shadow: var(--ring-focus);
    background: var(--bg-card);
}

/* ── 라디오 그룹 ─────────────────────────────────────────────────────── */
.bi-write-radio-group {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    flex-wrap: wrap;
    /* 라디오는 인풋 박스(테두리)가 없어 .bi-write-field gap(4px)만으론 레이블과 붙어 보임 → 윗 간격 보정 */
    margin-top: var(--space-2);
}
.bi-write-radio-label {
    display: flex;
    align-items: center;
    gap: var(--space-1_5);
    cursor: pointer;
    font-size: var(--fs-md);
    color: var(--txt-secondary);
}
.bi-write-radio-label input[type="radio"] {
    visibility: visible;
    display: inline-block;
    accent-color: var(--brand-blue);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* flat input+label 패턴 — JS 동적 생성 시 bi-write-radio-label 래퍼 없음 */
.bi-write-radio-group input[type="radio"] {
    visibility: visible;
    display: inline-block;
    accent-color: var(--brand-blue);
    cursor: pointer;
    width: 14px;
    height: 14px;
}
.bi-write-radio-group label {
    font-size: var(--fs-base);
    color: var(--txt-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

/* lib/css/style.css "input[type=radio]+label { background-image:radio.png; width:18px }" 초기화
 * 특이도 (0,2,2) > style.css (0,1,2) — !important 불필요 */
.bi-write-radio-group input[type="radio"] + label {
    display: inline-flex;
    align-items: center;
    background-image: none;
    width: auto;
    height: auto;
    position: static;
    top: auto;
}

/* ── 레이블 힌트 텍스트 ──────────────────────────────────────────────── */
/* 레이블 옆에 병렬로 오는 보조 안내문 (예: *미입력시 자동 부여, 숫자만 입력해주세요) */
.bi-label-hint {
    font-size: var(--fs-sm);
    font-weight: var(--fw-normal);
    color: var(--txt-disabled);
}

/* ── 숫자 인풋 — 우측 정렬 ─────────────────────────────────────────── */
.bi-input--num { text-align: right; }

/* ── select ─────────────────────────────────────────────────────────── */
.bi-write-select {
    height: 36px;
    border: 1px solid var(--border-base);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    padding: 0 var(--space-3);
    font-size: var(--fs-md);
    color: var(--txt-primary);
    outline: none;
    cursor: pointer;
    min-width: 200px;
}
.bi-write-select:focus {
    border-color: var(--brand-blue);
    box-shadow: var(--ring-focus);
    background: var(--bg-card);
}/* ── 필드 헤더 (레이블 + 버튼 인라인) ───────────────────────────────── */
.bi-field-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-1_5);
    flex-wrap: wrap;
}

/* ── 아이콘 전용 버튼 (a·button 공용, 32px 회색 원) ─────────────────── */
.bi-write-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    background: var(--border-light);
    color: var(--txt-secondary);
    text-decoration: none;
    flex-shrink: 0;
    cursor: pointer;
}
.bi-write-icon-btn:hover { background: var(--border-base); }

/* ── 인풋 너비 modifier ──────────────────────────────────────────────── */
.bi-write-input--sm   { width: 140px; }
.bi-write-input--md   { width: 200px; }
.bi-write-input--date { width: 160px; }
.bi-write-input--lg   { width: 240px; }
/* sg2 §21 2단 폼 그리드 — 필드 2개 가로(1fr 1fr) */
.bi-write-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.bi-write-input--xs   { width: 60px; }
/* 메모 textarea 공용(.bi-input 위) — pay_edit/pay_init 등 정산 메모. 모듈별 재구현 대신 이걸 사용 */
.bi-write-memo { width: 80%; min-height: 100px; padding: var(--space-2) var(--space-3); resize: vertical; }

/* ── 필드 폭 modifier (그리드 폼 반/1/4 칸) — 공통 ──
 * ⚠ `min-width` 를 0 으로 풀어야 한다. 베이스 `.bi-write-field { min-width: 200px }` 가
 *   남아 있으면 **min-width 가 max-width 를 이겨** 3칸이 200px 씩 잡힌다.
 *   470px 팝업(회원등록)에서 600px 이 되어 가로로 넘쳤다(2026-08-13 실측).
 *   폭을 지정한 칸은 «지정한 만큼» 이어야 한다 — 그게 규격이다. */
.bi-write-field--half    { flex: 0 0 calc(50% - 10px); max-width: calc(50% - 10px); min-width: 0; }
.bi-write-field--third   { flex: 0 0 calc(33.333% - 14px); max-width: calc(33.333% - 14px); min-width: 0; }

/* ── 구간/설정 리스트(정산 등) — 여러 write 모듈 공통 ── */
.bi-write-type-row  { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-base); color: var(--txt-secondary); }/* ── select 래퍼 / compact variant ──────────────────────────────────── */
.bi-write-select--compact {
    padding: 0 var(--space-2);
    min-width: unset;
}

/* ── 주소 분할 그룹 (우편번호 + 주소 + 상세주소) ─────────────────────── */
.bi-write-addr-zip   { width: 140px; padding-left: var(--space-3); }
.bi-write-addr-addr1 { flex: 1; min-width: 180px; }

/* ── 날짜 피커 팝업 컨테이너 (Daum/SuperCal) ─────────────────────────── */
#testdiv1 {
    position: absolute;
    visibility: hidden;
    background-color: white;
}/* bi-res-header 패턴으로 변환된 레거시 body-header (그룹 D) */
.bi-res-header.body-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3_5) var(--space-8);
    border-bottom: 1px solid var(--border-base);
    box-sizing: border-box;
    width: 100%;
    float: none;
}
.bi-res-header.body-header .bi-res-header__left {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.bi-res-header.body-header .bi-erp-toolbar__right.body-menu {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    /* 레거시 body-menu 의 float right 등 무력화 */
    width: auto;
}

/* ============================================================
 * write 본문의 erp 카드 프레임 (2026-06-17)
 *   구조: .bi-write-page(회색 프레임) > .bi-erp-card(흰 카드) > .bi-erp-toolbar + 폼본문
 *   ※ .bi-res-header / .bi-erp-card / -toolbar / -title 본체는 위 [구 list.css] 블록에 있고
 *      2026-08-07 일원화로 write 페이지에도 그대로 실린다. 여기엔 write 전용 보정만 둔다.
 * ============================================================ */
.bi-erp-card > form { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-4) var(--space-6) var(--space-8); }

/* ============================================================
 * 2026-06-09 그룹 D 추가 무력화 — style.css 글로벌 .body-* 잔여 스타일
 *   style.css L239-317 의 .body-header height/box-shadow/.body-title float/border-bottom/padding/color
 *   .body-menu float/padding 을 bi-res-header 구조와 호환되도록 무력화
 * ============================================================ */

/* 헤더 박스 — body-header 의 45px 고정 / box-shadow 무력화 */
.bi-res-header.body-header {
    height: auto;
    box-shadow: none;
    background: var(--bg-card);
}

/* 타이틀 — body-title 의 float/border/padding/color 잔여 무력화 */
.bi-res-header.body-header .bi-res-title.body-title {
    float: none;
    border-bottom: none;
    padding: 0;
    height: auto;
    margin: 0;
    color: var(--txt-primary);
    text-align: left;
    box-sizing: content-box;
}

/* 우측 메뉴 — body-menu 의 float/padding 잔여 무력화 */
.bi-res-header.body-header .bi-erp-toolbar__right.body-menu {
    float: none;
    padding: 0;
}

/* sub-link (body-title-sub) — bi-btn--ghost 모양으로 통일 */
.bi-res-header.body-header .bi-res-header__left .body-title-sub {
    float: none;
    border-bottom: none;
    padding: var(--space-2) var(--space-3_5);
    height: auto;
    margin: 0;
    color: var(--txt-secondary);
    font-size: var(--fs-base);
    font-weight: 500;
    border: 1px solid var(--border-base);
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    cursor: pointer;
}
.bi-res-header.body-header .bi-res-header__left .body-title-sub:hover {
    background: var(--bg-input);
    border-color: var(--gray-300);
}

/* sg2 §21 2패널 폼 — 사이드(고정폭) + 메인(flex). 미리보기|설정 등 */
.bi-write-split { display: flex; gap: var(--space-4); align-items: stretch; flex-wrap: wrap; }

/* ═══════════════════════════════════════════════════════════════════════════
 * [일원화 2026-08-07] 구 lib/css/pos_console.css
 *   reception·designer_chart POS 콘솔 공통. 원래도 common() 에서 전역 로드 — 로드 조건이 style.css 와 동일했다.
 *   ※ 여기까지가 이 파일의 출처 경계다 — 재구성(sg2 프리미티브화) 시 이 배너를 기준으로 찾는다.
 * ═══════════════════════════════════════════════════════════════════════════ */
/* ============================================================
 * 구 lib/css/pos_console.css (2026-08-07 이 파일로 이관)
 * reception · designer_chart 공유 POS 콘솔 컴포넌트 (2026-07-01)
 * 두 모듈 style.css 에 본문 동일하던 규칙만 그룹 셀렉터로 통합.
 * 근거: docs/modules/73_part_reception_designer_chart_정리.md
 * ============================================================ */

.bi-desk__crm-open:hover, .bi-desk__crm-open:hover { background: color-mix(in srgb, var(--brand-blue) 20%, transparent); }.bi-desk__prepaid-info,
.bi-desk__prepaid-info { display: flex; flex-direction: column; min-width: 0; }.bi-desk__ticket-sub, .bi-desk__ticket-sub { display: flex; flex-direction: column; gap: var(--space-1); }/* ⚠ 2026-08-14 — .bi-segment 가 **두 곳에 정의**돼 있었다(위 §29 블록 + 여기).
 *   뒤엣것이 이겨 실제로는 이 값이 그려졌는데, 둘의 활성색이 서로 달랐다
 *   (§29 블록: 흰 배경+검정 글자 / 여기: brand-blue+흰 글자).
 *   **규격 문서 §29 가 기준이다** — "활성 = brand-blue 배경 + 흰글자, 트랙은 연회색".
 *   그래서 이쪽을 남기고 값만 규격에 맞춘다:
 *     · font-size 10.5px → --fs-2xs(10). 10.5 는 글자 크기 스케일에 없는 값이다.
 *     · grid 4열 고정 → 항목 수만큼. 2개짜리(reception 시술상품/보유패키지)가 4열에 끼어 눌렸다. */
.bi-segment { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--space-0_5); background: var(--border-base); padding: var(--space-0_5); border-radius: var(--radius-xl); border: 1px solid color-mix(in srgb, var(--gray-300) 30%, transparent); }
.bi-segment__btn { border: 0; background: transparent; padding: var(--space-2) var(--space-0_5); border-radius: var(--radius-lg); cursor: pointer; font-size: var(--fs-2xs); font-weight: var(--fw-black); color: var(--txt-muted); letter-spacing: -.02em; line-height: 1.2; }
.bi-segment__btn.is-active { background: var(--brand-blue); color: var(--bg-card); }
.bi-desk__subgrp { display: flex; flex-direction: column; gap: var(--space-1_5); background: var(--gray-50); padding: var(--space-2); margin-bottom: var(--space-3); }
.bi-desk__subgrp .bi-desk__rpanel-lbl { margin-bottom: 0; }.bi-desk__catbtn.is-active,
.bi-desk__catbtn.is-active { color: var(--brand-blue); border-color: color-mix(in srgb, var(--brand-blue) 30%, transparent);  }
.bi-cell-empty,
.bi-cell-empty { font-size: var(--fs-xs); color: var(--txt-disabled); font-style: italic; padding: var(--space-1); }.bi-pick__badge { font-size: var(--fs-2xs); font-weight: var(--fw-black); padding: var(--space-0_5) var(--space-1_5); border-radius: var(--radius-sm); margin-left: var(--space-1_5); vertical-align: middle; border: 1px solid; }
/* ⚠ 이름은 JS 가 잇는다: `'bi-pick__badge--' + bk` (designer_chart·reception).
 *   마크업에 글자로 안 보여 "안 쓰는 규격"으로 몰려 지워졌다 → 되살린다. */

/* 상태색 fill/tone (reception=designer_chart 동일 패턴 통합 · 2026-07-30). fill=바 채움( 오버라이드), tone=뱃지(테두리 포함). */
.bi-lifecycle__fill--blue,    .bi-lifecycle__fill--blue    { background: var(--color-info-500); }
.bi-lifecycle__fill--emerald, .bi-lifecycle__fill--emerald { background: var(--color-success-500); }
.bi-lifecycle__fill--amber,   .bi-lifecycle__fill--amber   { background: var(--color-warning); }
.bi-lifecycle__fill--red,     .bi-lifecycle__fill--red     { background: var(--color-danger); }
.bi-lifecycle__tone--mute,    .bi-lifecycle__tone--mute    { color: var(--txt-muted); background: var(--border-light); border: 1px solid var(--border-base); }

/* 선불권/패키지 행 + CRM 빈상태 (reception=designer_chart 동일, 토큰 전역화 · 2026-07-30) */
.bi-desk__prepaid, .bi-desk__prepaid { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-2_5); background: var(--bg-input); border: 1px solid var(--border-base); border-radius: var(--radius-lg); }
.bi-desk__prepaid-list, .bi-desk__prepaid-list { display: flex; flex-direction: column; gap: var(--space-1_5); }
.bi-desk__prepaid-bal, .bi-desk__prepaid-bal { font-size: var(--fs-base); font-weight: var(--fw-extrabold); color: var(--brand-blue); flex-shrink: 0; }
.bi-desk__prepaid-expire, .bi-desk__prepaid-expire { font-size: var(--fs-2xs); color: var(--txt-disabled); font-weight: var(--fw-semibold); margin-top: var(--space-0_5); }
.bi-desk__crm-none, .bi-desk__crm-none { font-size: var(--fs-xs); color: var(--txt-disabled); text-align: center; padding: var(--space-1_5); background: color-mix(in srgb, var(--bg-input) 50%, transparent); border: 1px dashed var(--gray-100); border-radius: var(--radius-xl); font-style: italic; }

/* T6 컴포넌트 정규화 통합 (reception=canonical · designer_chart 값 수렴 · 클래스명 유지=JS무관 · 2026-07-30) */
.bi-lifecycle__bar, .bi-lifecycle__bar { display: flex; gap: var(--space-0_5); height: 6px; }
.bi-lifecycle__seg, .bi-lifecycle__seg { flex: 1; background: var(--border-base); }
.bi-lifecycle__seg--l, .bi-lifecycle__seg--l { border-radius: var(--radius-full) 0 0 var(--radius-full); }
.bi-lifecycle__seg--r, .bi-lifecycle__seg--r { border-radius: 0 var(--radius-full) var(--radius-full) 0; }
.bi-desk__chart-title, .bi-desk__chart-title { font-size: var(--fs-lg); color: var(--txt-primary); font-weight: var(--fw-extrabold); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bi-desk__crm-open, .bi-desk__crm-open { font-size: var(--fs-2xs); background: color-mix(in srgb, var(--brand-blue) 10%, transparent); color: var(--brand-blue); border: 1px solid color-mix(in srgb, var(--brand-blue) 15%, transparent); font-weight: var(--fw-extrabold); padding: var(--space-1) var(--space-2); border-radius: var(--radius-md); cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-1); }
.bi-cell-empty, .bi-cell-empty { padding: var(--space-8) var(--space-3); text-align: center; font-size: var(--fs-base); color: var(--txt-disabled); font-style: italic; }
.bi-emptybox, .bi-emptybox { background: var(--bg-card); border: 1px dashed var(--border-base); border-radius: var(--radius-xl); }
.bi-lifecycle, .bi-lifecycle { background: color-mix(in srgb, var(--bg-input) 40%, transparent); border: 1px solid var(--gray-100); border-radius: var(--radius-lg); padding: var(--space-2_5); display: flex; flex-direction: column; gap: var(--space-2); }
.bi-write-card__header, .bi-write-card__header { display: flex; justify-content: space-between; align-items: center; font-size: var(--fs-sm); }
.bi-desk__ok, .bi-desk__ok { margin-left: auto; color: var(--color-success); display: inline-flex; align-items: center; gap: var(--space-0_5); font-weight: var(--fw-extrabold); }
.bi-desk__prepaid-name, .bi-desk__prepaid-name { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--txt-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bi-pick, .bi-pick { padding: var(--space-3); background: var(--bg-card); border: 1px solid var(--border-base); border-radius: var(--radius-xl); cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: all .15s; }
.bi-pick__r, .bi-pick__r { display: flex; align-items: center; gap: var(--space-1_5); font-weight: var(--fw-extrabold); color: var(--txt-primary); flex-shrink: 0; }
.bi-pulse, .bi-pulse { animation: bi-pulse 1.6s infinite; }
.bi-lifecycle__stages, .bi-lifecycle__stages { display: flex; justify-content: space-between; font-size: var(--fs-2xs); font-weight: var(--fw-extrabold); color: var(--txt-disabled); }
.bi-desk__status, .bi-desk__status { font-size: var(--fs-xs); padding: var(--space-0_5) var(--space-1_5); border-radius: var(--radius-sm); font-weight: var(--fw-extrabold); margin-top: var(--space-1_5); align-self: flex-start; }
.bi-desk__ticket, .bi-desk__ticket { background: var(--bg-card); border: 1px solid var(--border-base); border-radius: var(--radius-xl); padding: var(--space-3);  display: flex; flex-direction: column; gap: var(--space-2_5); }
.bi-desk__ticket-bar, .bi-desk__ticket-bar { width: 100%; background: var(--gray-100); border-radius: var(--radius-full); height: 6px; overflow: hidden; }
/* ⚠ 셀렉터가 제 이름을 두 번 썼다(합치기 잔재). 높이도 안 정해 padding 이 20px 을 만들었다 →
 * §12-4 사다리 xs 22(2026-08-14). */
.bi-desk__ticket-btn { background: var(--brand-navy); color: var(--bg-card); border: 0; font-size: var(--fs-2xs); height: 22px; display: inline-flex; align-items: center; justify-content: center; padding: 0 var(--space-2_5); border-radius: var(--radius-lg); font-weight: var(--fw-extrabold); cursor: pointer; flex-shrink: 0; }
.bi-desk__ticket-sub-name, .bi-desk__ticket-sub-name { font-size: var(--fs-sm); font-weight: var(--fw-extrabold); color: var(--txt-primary); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bi-desk__ticket-sub-rem, .bi-desk__ticket-sub-rem { font-size: var(--fs-sm); color: var(--brand-blue); font-weight: var(--fw-extrabold); flex-shrink: 0; }
.bi-desk__ticket-subs, .bi-desk__ticket-subs { display: flex; flex-direction: column; gap: var(--space-2); }
.bi-desk__ticket-top, .bi-desk__ticket-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-2); }

/* ═══════════════════════════════════════════════════════════════
   CRM 요약 카드 (공용) — Step1 대기(reception)·Step2 시술(designer_chart) 공유.
   두 모듈이 .bi-desk__crm / .bi-desk__crm 로 각자 구현하던 drift 를
   단일 공용 클래스 .bi-crmcard 로 통합(2026-07-31). 두 모듈 JS 가 이 클래스를 사용.
   ═══════════════════════════════════════════════════════════════ */
.bi-crmcard { background: var(--bg-input); border: 1px solid var(--gray-100); border-radius: var(--radius-xl); padding: var(--space-2_5); display: flex; flex-direction: column; gap: var(--space-1_5); }
.bi-crmcard__top { display: flex; justify-content: space-between; align-items: center; font-size: var(--fs-xs); }
.bi-crmcard__top span:first-child { color: var(--txt-primary); font-weight: var(--fw-black); }
.bi-crmcard__top span:last-child, .bi-crmcard__top .bi-num { color: var(--txt-disabled); }
.bi-crmcard__msg { font-size: var(--fs-xs); color: var(--txt-muted); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bi-crmcard__msg.is-clampable { cursor: pointer; }
.bi-crmcard__msg.is-expanded { display: block; -webkit-line-clamp: unset; overflow: visible; }
.bi-crmcard__more { padding: 0; border: 0; background: none; color: var(--txt-disabled); font-size: var(--fs-2xs); font-weight: var(--fw-semibold); cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-1); }
.bi-crmcard__more i { font-size: var(--fs-2xs); }
.bi-crmcard__foot { display: flex; align-items: center; font-size: var(--fs-2xs); padding-top: var(--space-1_5); border-top: 1px solid var(--border-light); }

/* ── 재방주기 박스 (공용) — reception cycle-box / dchart cyclebox 통합(2026-07-31). 단일 .bi-cyclebox 사용 ── */
/* 규격 §40-2 «안쪽 구획은 둘레가 아니라 구분선으로» — 셸 카드가 이미 테두리·둥글기를 갖는다.
 * .bi-cyclebox 둘은 .bi-write-grid-2 안에 **가로로 나란히** 놓이므로 **둘째 칸에 왼쪽 세로선**을 긋는다.
 * (2026-08-21 — 178×85 라 옛 검사 문턱 220×90 에 걸리지 않아 «상자 안 상자 0» 으로 읽혔다.) */
.bi-cyclebox { background: transparent; border: 0; border-radius: 0; padding: var(--space-2_5) 0; display: flex; flex-direction: column; gap: var(--space-1); }
.bi-write-grid-2 > .bi-cyclebox + .bi-cyclebox { border-left: 1px solid var(--border-base); padding-left: var(--space-4); }
.bi-cyclebox__lbl { font-size: var(--fs-xs); color: var(--txt-disabled); font-weight: var(--fw-black); }
.bi-cyclebox__val { font-size: var(--fs-md); font-weight: var(--fw-black); color: var(--txt-primary); }
.bi-cyclebox__unit { font-size: var(--fs-xs); color: var(--txt-disabled); font-weight: var(--fw-bold); }
.bi-cyclebox__hint { font-size: var(--fs-2xs); color: var(--txt-muted); font-weight: var(--fw-extrabold); }

/* ── 티켓 진행바 fill (공용) — reception/dchart 동일(rc-blue=dc-blue=brand-blue) → 그룹 통합(2026-07-31). is-crit 등 상태는 모듈 유지 ── */
.bi-desk__ticket-bar > div, .bi-desk__ticket-bar > div { height: 100%; background: var(--brand-blue); border-radius: var(--radius-full); transition: width .3s; }

/* ── 디자이너 이름 뱃지 + Col2 헤더 타이틀 (공용) — reception/dchart 동일 → 그룹 통합 (2026-08-03) ── */
.bi-queue__emp, .bi-queue__emp { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--txt-secondary); flex-shrink: 0; }
.bi-row { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
 * [일원화 2026-08-07] 구 lib/css/booking_schedule.css
 *   booking_renew·booking_time 예약일정 공통 크롬. 원래도 common() 전역 로드.
 *   ※ 여기까지가 이 파일의 출처 경계다 — 재구성(sg2 프리미티브화) 시 이 배너를 기준으로 찾는다.
 * ═══════════════════════════════════════════════════════════════════════════ */
/* 구 lib/css/booking_schedule.css (2026-08-07 이 파일로 이관) — 예약일정표 공통 크롬(booking_renew · booking_time)
 * 두 모듈(일별/시간별)이 스코프(.bi-page)만 다르게 100% 복제하던 규칙을 통합.
 *   .bi-bki-*  예약 상세 패널  ·  .bi-bksch-* 사이드 필터/통계  ·  .bi-bk-* 범례/서브바/빈패널
 * 접두어가 두 모듈 전용(bki/bksch) 또는 타 모듈과 무충돌(bk 범례·서브바)이라 전역 로드 무해.
 *   ⚠ 모듈 고유·반응형(@media)·분기 규칙은 각 style.css 에 유지(나중 로드로 override 승).
 *   (구: function.php head 에서 개별 <link> 전역 로드 → 2026-08-07 style.css 로 통합)
 */

.bi-bk-legend-item {
    display: flex;
    align-items: center;
    gap: var(--space-1_5);
    font-size: var(--fs-sm);
    color: var(--txt-muted);
}
.bi-bk-legend-dot {
    width: 12px;
    height: 12px;
    border-radius: var(--radius-xs);
    flex-shrink: 0;
}
.bi-bk-legend-dot--request   { background: var(--color-success-500); }
.bi-bk-legend-dot--confirmed { background: var(--color-info-500); }
.bi-bk-legend-dot--completed { background: var(--txt-disabled); }
.bi-bk-legend-dot--cancelled { background: var(--color-danger-50); border: 1px solid var(--color-danger-300); }
.bi-bk-legend--subbar { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; }
.bi-bk-legend--subbar .bi-bk-legend-item { font-size: var(--fs-xs); white-space: nowrap; }
.bi-bk-panel-title {
    font-weight: var(--fw-bold);
    font-size: var(--fs-lg);
    color: var(--txt-primary);
}
.bi-bk-panel-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 280px;
    padding: var(--space-6);
    color: var(--txt-disabled);
}
.bi-bk-panel-empty-icon {
    width: 64px;
    height: 64px;
    background: var(--bg-input);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-4);
    font-size: var(--icon-md);   /* §11 아이콘 사다리 */
    color: var(--gray-300);
}
.bi-bk-panel-empty-title {
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    color: var(--txt-muted);
    margin: 0 0 var(--space-2);
}
.bi-bk-panel-empty-desc {
    font-size: var(--fs-sm);
    color: var(--txt-disabled);
    text-align: center;
    margin: 0;
    line-height: 1.6;
}
.bi-bki-head .bi-bk-panel-title { display: flex; align-items: center; gap: var(--space-2); }
.bi-bki-head .bi-bk-panel-title i { color: var(--brand-navy); font-size: var(--fs-md); }
.bi-bki-profile {
    position: relative; display: flex; align-items: center; gap: var(--space-3);
    background: color-mix(in srgb, var(--bg-input) 50%, transparent); border: 1px solid var(--border-light); border-radius: var(--radius-xl); padding: var(--space-2);
}
.bi-bki-avatar {
    width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--radius-xl);
    background: var(--brand-navy); color: var(--bg-card); font-weight: var(--fw-extrabold); font-size: var(--fs-md);
    display: flex; align-items: center; justify-content: center;
}
.bi-bki-profile-info { flex: 1; min-width: 0; padding-right: var(--space-4); }
.bi-bki-profile-nameline { display: flex; align-items: center; gap: var(--space-1_5); }
.bi-bki-profile-name { font-size: var(--fs-md); font-weight: var(--fw-black); color: var(--gray-950); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bi-bki-gender { flex-shrink: 0; font-size: var(--fs-2xs); font-weight: var(--fw-bold); color: var(--color-indigo-700); background: var(--color-indigo-50); padding: var(--space-0_5) var(--space-1_5); border-radius: var(--radius-sm); line-height: 1.5; }
.bi-bki-profile-phone { font-size: var(--fs-2xs); font-weight: var(--fw-bold); color: var(--txt-disabled); margin-top: var(--space-0_5); font-family: var(--font-mono); }
.bi-bki-profile-phone:empty::before { content: '전화번호 미등록'; color: var(--gray-300); }
.bi-bki-close {
    position: absolute; top: 8px; right: 8px;
    width: 22px; height: 22px; padding: 0; border: 0; background: transparent;
    color: var(--txt-disabled); font-size: var(--fs-md); line-height: 1; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-md);
    transition: background .12s, color .12s;
}
.bi-bki-close:hover { background: var(--border-light); color: var(--gray-600); }
.bi-bki-status.status_round {
    flex-shrink: 0;
    padding: var(--space-1) var(--space-2_5); border-radius: var(--radius-full);
    font-size: var(--fs-xs); font-weight: var(--fw-extrabold); color: var(--bg-card);
}
.bi-bki-table {
    border: 1px solid var(--border-base); border-radius: var(--radius-xl); padding: var(--space-3);
    display: flex; flex-direction: column; gap: var(--space-2_5);
}
.bi-bki-row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.bi-bki-row--top { align-items: flex-start; }
.bi-bki-k { font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--txt-disabled); flex-shrink: 0; }
.bi-bki-v { font-size: var(--fs-xs); font-weight: var(--fw-extrabold); color: var(--txt-primary); text-align: right; min-width: 0; word-break: break-all; display: inline-flex; align-items: center; gap: var(--space-1_5); justify-content: flex-end; }
.bi-bki-vi { font-size: var(--fs-xs); color: var(--color-indigo-500); }
.bi-bki-mono { font-family: var(--font-mono); }
.bi-bki-goods {
    max-width: 175px;
    background: color-mix(in srgb, var(--bg-input) 70%, transparent); border: 1px solid var(--gray-100); border-radius: var(--radius-lg); padding: var(--space-1) var(--space-2);
}
.bi-bki-memo { background: color-mix(in srgb, var(--color-warning-50) 60%, transparent); border: 1px solid var(--color-warning-200); border-radius: var(--radius-xl); padding: var(--space-2_5) var(--space-3); }
.bi-bki-memo-label { display: flex; align-items: center; gap: var(--space-1_5); font-size: var(--fs-2xs); font-weight: var(--fw-extrabold); color: var(--color-warning-800); text-transform: uppercase; letter-spacing: .02em; }
.bi-bki-memo-label i { font-size: var(--fs-xs); color: var(--color-warning-600); }
.bi-bki-memo-text { margin-top: var(--space-1_5); font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--color-warning-900); line-height: 1.55; white-space: pre-line; max-height: 84px; overflow-y: auto; }
.bi-bki-actsec { display: flex; flex-direction: column; gap: var(--space-2_5); padding-top: var(--space-3); border-top: 1px solid var(--gray-100); }
.bi-seclabel { font-size: var(--fs-2xs); font-weight: var(--fw-extrabold); color: var(--txt-disabled); text-transform: uppercase; letter-spacing: .04em; }
/* 인스펙터 컨테이너 + 상태처리 버튼 base — 전역 input[type=button] 강제스타일(gradient·content-box·line-height27·min-width54) 무력화. booking_renew·booking_time 공통 (2026-07-31 모듈 중복 이관) */
.bi-bki { display: flex; flex-direction: column; padding: var(--space-4); }
.bi-bki > * + * { margin-top: var(--space-3_5); }
.bi-write-grid-2 input[type="button"].bi-bki-btn {
    height: 40px; min-width: 0; padding: 0 var(--space-3);
    box-sizing: border-box; line-height: 1; vertical-align: middle;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--radius-xl); font-size: var(--fs-base); font-weight: var(--fw-extrabold); cursor: pointer;
    border: 1px solid transparent; background-image: none;
    transition: background .15s, color .15s, border-color .15s;
}
.bi-write-grid-2 input[type="button"].bi-bki-btn--sales { background: var(--color-success); color: var(--bg-card); text-align: center; }
.bi-bki-sublinks { display: flex; justify-content: flex-end; gap: var(--space-1); min-height: 0; }
.bi-bki-sublinks input[type="button"].bi-bki-link {
    height: 28px; min-width: 0; padding: 0 var(--space-2_5);
    box-sizing: border-box; line-height: 1; vertical-align: middle;
    background: transparent; background-image: none; border: 0; border-radius: var(--radius-lg);
    color: var(--txt-muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); cursor: pointer;
    transition: background .12s, color .12s;
}
.bi-write-grid-2 input[type="button"].bi-bki-btn--primary { background: var(--brand-blue); color: var(--bg-card); }
.bi-write-grid-2 input[type="button"].bi-bki-btn--primary:hover { background: var(--brand-navy); }
.bi-write-grid-2 input[type="button"].bi-bki-btn--sales:hover { background: var(--color-success-700); }
.bi-bki-sublinks input[type="button"].bi-bki-link:hover { background: var(--border-light); color: var(--txt-secondary); }
.bi-bki-sublinks input[type="button"].bi-bki-link--danger { color: var(--color-danger-600); }
.bi-bki-sublinks input[type="button"].bi-bki-link--danger:hover { background: var(--color-danger-50); color: var(--color-danger-700); }
.bi-bksch-sec-head {
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: var(--space-1_5); border-bottom: 1px solid var(--gray-100);
}
.bi-seclabel span { color: var(--txt-muted); }
.bi-bksch-sec-toggle {
    border: 0; background: transparent; padding: 0; cursor: pointer;
    font-size: var(--fs-2xs); font-weight: var(--fw-extrabold); color: var(--brand-blue);
}
.bi-bksch-sec-toggle:hover { text-decoration: underline; }
.bi-bksch-emp-list { display: flex; flex-direction: column; gap: var(--space-0_5); height: 210px; overflow-y: auto; }
/* 위젯 카드 + 체크박스 전역 스프라이트 무력화(CLAUDE §5-1) — booking_renew·booking_time 공통 (2026-07-31 모듈 중복 이관) */
.bi-bksch-side-sec { padding: var(--space-4); background: var(--bg-card); border: 1px solid var(--border-base); border-radius: var(--radius-2xl);  display: flex; flex-direction: column; gap: var(--space-2_5); }.bi-bksch-emp-row {
    display: flex; align-items: center; gap: var(--space-2);
    padding: var(--space-1_5) var(--space-2); border-radius: var(--radius-xl);
    border: 1px solid transparent; cursor: pointer; user-select: none;
    transition: background .12s, border-color .12s;
}.bi-bksch-emp-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.bi-bksch-emp-info { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.bi-bksch-emp-name { font-size: var(--fs-sm); font-weight: var(--fw-extrabold); color: var(--gray-800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bi-bksch-emp-role { font-size: var(--fs-2xs); font-weight: var(--fw-semibold); color: var(--txt-disabled); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: var(--space-0_5); }
.bi-bksch-emp-cnt {
    flex-shrink: 0; font-size: var(--fs-2xs); font-weight: var(--fw-extrabold); color: var(--txt-muted);
    background: var(--border-light); border: 1px solid var(--gray-200); border-radius: var(--radius-md); padding: var(--space-0_5) var(--space-1_5);
}
.bi-bksch-status-chip {
    flex: 1 1 28%; min-width: 0; height: 30px; padding: 0 var(--space-2_5);
    border: 1px solid var(--border-base); border-radius: var(--radius-lg); background: var(--bg-card);
    color: var(--gray-600); font-size: var(--fs-sm); font-weight: var(--fw-semibold); cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.bi-bksch-status-chip:hover { background: var(--bg-input); border-color: var(--gray-300); }
.bi-bksch-status-chip.is-active { background: var(--brand-navy); border-color: var(--brand-navy); color: var(--bg-card); }
.bi-bksch-stat { display: flex; flex-direction: column; gap: var(--space-0_5); padding: var(--space-2) var(--space-2_5); border-radius: var(--radius-xl); border: 1px solid transparent; }
.bi-bksch-stat-k { font-size: var(--fs-2xs); font-weight: var(--fw-bold); }
.bi-bksch-stat-v { font-size: var(--fs-md); font-weight: var(--fw-black); }
.bi-bksch-stat--book { background: color-mix(in srgb, var(--color-info-50) 60%, transparent); border-color: var(--color-info-100); }
.bi-bksch-stat--book .bi-bksch-stat-k { color: var(--color-info-500); }
.bi-bksch-stat--book .bi-bksch-stat-v { color: var(--color-info-700); }
.bi-bksch-stat--done { background: color-mix(in srgb, var(--color-success-50) 60%, transparent); border-color: var(--color-success-100); }
.bi-bksch-stat--done .bi-bksch-stat-k { color: var(--color-success-500); }
.bi-bksch-stat--done .bi-bksch-stat-v { color: var(--color-success-700); }
.bi-bksch-typefilter { display: flex; flex-direction: column; gap: var(--space-0_5); }
.bi-bksch-emp-row:hover { background: var(--bg-input); border-color: var(--gray-100); }
.bi-bksch-emp-dot.is-naver  { background: var(--color-success-500); }
.bi-bksch-emp-dot.is-walkin { background: var(--color-info-500); }
.bi-bksch-type-name { flex: 1; min-width: 0; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--gray-800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ============================================================
   우측열: 예약상세 인스펙터 패널 + 실시간 플랜 일지
   (booking_renew·booking_time 공통 — 2026-07-31 booking_renew/style.css 에서 이관)
   ============================================================ */
.bi-bk-rightcol {
    width: 340px; flex-shrink: 0; align-self: flex-start;
    display: flex; flex-direction: column; gap: var(--space-3); min-height: 0;
    overflow: visible;
}
.bi-bk-rightcol .bi-bk-info-panel { width: 100%; flex: 0 0 auto; overflow: visible; }
.bi-bk-info-panel {
    width: 340px;
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--bg-card); border-radius: var(--radius-xl); border: 1px solid var(--border-base);
}
.bi-bk-panel-header {
    padding: var(--space-3_5) var(--space-5); border-bottom: 1px solid var(--border-light);
    background: color-mix(in srgb, var(--bg-input) 50%, transparent); flex-shrink: 0;
}
.bi-bk-panel-body { overflow: visible; position: relative; }/* 실시간 최근 플랜 일지 */
.bi-bka {
    flex: 0 0 auto; display: flex; flex-direction: column; overflow: hidden;
    background: var(--bg-card); border: 1px solid var(--border-base); border-radius: var(--radius-xl);
}
.bi-bka-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-light); flex-shrink: 0;
}
.bi-bka-live { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--color-danger); flex-shrink: 0; }
.bi-bka-live::before {
    content: ''; position: absolute; inset: 0; border-radius: 50%;
    background: var(--color-danger-400); opacity: .75; animation: sdpBkaPing 1.3s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes sdpBkaPing { 0% { transform: scale(1); opacity: .7; } 75%, 100% { transform: scale(2.4); opacity: 0; } }
.bi-bka-list { height: 195px; overflow-y: auto; padding: var(--space-2_5) var(--space-3); display: flex; flex-direction: column; gap: var(--space-1_5); }
.bi-bka-item {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
    padding: var(--space-2) var(--space-2_5); border: 1px solid var(--border-light); border-radius: var(--radius-xl); background: color-mix(in srgb, var(--bg-page) 40%, transparent);
    transition: background .12s;
}
.bi-bka-item:hover { background: var(--gray-50); }
.bi-bka-badge {
    flex-shrink: 0; min-width: 34px; text-align: center;
    font-size: var(--fs-2xs); font-weight: var(--fw-extrabold); padding: var(--space-0_5) var(--space-1_5); border-radius: var(--radius-md); border: 1px solid transparent;
}
.bi-bka-badge.is-emerald { background: var(--color-success-50); color: var(--color-success-700); border-color: var(--color-success-100); }
.bi-bka-badge.is-blue    { background: var(--color-info-50); color: var(--color-info-600); border-color: var(--color-info-100); }
.bi-bka-badge.is-purple  { background: var(--color-purple-50); color: var(--color-purple-700); border-color: var(--color-purple-50); }
.bi-bka-badge.is-red     { background: var(--color-danger-50); color: var(--color-danger-600); border-color: var(--color-danger-100); }
.bi-bka-badge.is-gray    { background: var(--border-light); color: var(--txt-muted); border-color: var(--border-base); }
.bi-bka-name { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--gray-800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bi-bka-emp  { font-size: var(--fs-2xs); font-weight: var(--fw-semibold); color: var(--txt-disabled); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bi-bka-time { flex-shrink: 0; font-size: var(--fs-2xs); font-weight: var(--fw-bold); color: var(--txt-disabled); font-family: var(--font-mono); }



/* ═══════════════════════════════════════════════════════════════════════════
 * [일원화 2026-08-07] 구 lib/css/popup_layer.css
 *   레이어 팝업 셸(호스트측 .write_layout 등). 원래도 common() 전역 로드.
 *   ※ 여기까지가 이 파일의 출처 경계다 — 재구성(sg2 프리미티브화) 시 이 배너를 기준으로 찾는다.
 * ═══════════════════════════════════════════════════════════════════════════ */
.write_layout{
	width: 100%;
       position: absolute;
    top: 0px;
    left: 10px;
    height: 100%;
    float: left;
    display: none;
    z-index: 2000;   /* 셸(사이드바·헤더 1000 대) 위 — 팝업은 화면을 덮는다(2026-08-28) */
}
.write_layout_pop{
	/* ⚠ 화면마다 달랐다 — designer_chart 에서는 content-box 로 잡혀 테두리 2px 이 더해졌고,
	   JS 가 맞춘 높이보다 상자가 2px 커져 버튼 아래에 틈이 남았다(2026-08-27 실측).
	   상자 크기의 셈법은 상자가 스스로 정한다 — 여는 화면에 맡기지 않는다. */
	box-sizing: border-box;
	position: relative;
        top: -10%;
    left: -250px;
    height: 300px;
	width: 600px;

/*팝업박스 보더 — 라운드 + 연한 테두리 + 그림자 (디자인 정합)*/
/* 스타일보드 §04 형태 — 팝업 박스는 라운드 12 + 2겹 그림자(떠 있는 것에만 그림자, 2026-08-25) */
border: 1px solid var(--border-base);
border-radius: var(--pop-radius);
box-shadow: var(--pop-shadow);
overflow: hidden;
background: var(--bg-card);
color: var(--gray-800);
    display: none;
}

/* 결제 팝업 박스 고정 높이 — JS 인라인/auto-resize 보다 우선() */
/* 2026-07-31 #card_pay 고정높이(513/iframe449) 제거.
 *   pop_name 'card_pay' 는 **6개 팝업이 공유**한다 — 카드결제(구/신)·카드승인취소(구/신)·리포트 취소 2종.
 * 라 호출부가 넘긴 높이를 전부 덮어써, 디자이너 결제(비사업자·PayUp) 선택 시 펼쳐지는
 *   카드정보 입력 블록만큼 아래(결제일자·카드종류·승인번호·버튼)가 잘렸다.
 *   도입 사유는 "JS 인라인/캐시보다 우선"(2026-06-23)이었으나 card_pay 는 popup_layer.js:92 _noFit 이라
 *   auto-resize 가 애초에 돌지 않고, 각 호출부가 이미 적정 높이를 넘긴다 → 호출부 값을 그대로 쓴다.
 *   본서버(shop)에도 이 규칙은 없다(전수 확인). 2026-08-27 에 #prepay·#n_pay 도 같은 이유로 제거했다. */
/* 2026-08-27 제거 — 이 네 줄이 «버튼 아래 빈 띠» 의 진짜 원인이었다(사용자 캡처 pop2·pop3).
 *   ① `!important` 라 JS 자동맞춤이 계산한 옳은 높이(선불권 354)를 **덮어썼다**.
 *      인라인은 354 인데 그려진 건 548 이었다 — 인라인만 보면 «맞았다» 로 읽힌다.
 *   ② iframe 높이가 **헤더 64px 가정**으로 계산돼 있었다. 실제 헤더는 규격상 56 이다.
 *      548 − 484 = 64 가 그 흔적이다(2026-08-26 에 고친 그 가정이 CSS 에 한 벌 더 있었다).
 *   높이는 이제 내용이 정한다 — popup_layer.js 의 _fit 이 재서 맞춘다. */

/* 스타일 카탈로그 팝업(style_catalog) — 박스 크기 확정(넓게·86vh), iframe 풀, 라운드 20
   ⚠ 2026-08-31 — 여기 있던  를 지웠다.
   이 팝업이 헤더를 **제 안에 하나 더** 그리고 있어서 껍데기 헤더를 숨겨 놨던 것인데,
   그 때문에 상자(760)와 iframe(676)이 84 만큼 어긋나 푸터 아래 흰 띠가 남았다
   (사용자 지적). 안쪽 헤더를 없앴으므로 이제 껍데기 헤더가 유일한 헤더다 — 숨기지 않는다. */
#style_catalog{ width: 1120px; max-width: 96vw; height: 86vh; max-height: 860px; border-radius: var(--radius-2xl); }
#style_catalog > iframe{ width: 100%; }
/* ⚠ 2026-08-21 — 여기 있던 «화면 중앙 재정렬»(left/top 50% + translate(-50%,-50%)) 을 **삭제**했다.
 *   popup_layer.js 가 이미 top/left 를 계산해 인라인으로 중앙에 놓는다(실측: 1440×900 에서 900×600 팝업이 270,150 = 정확히 중앙).
 *   그 위에 transform: translate(-50%,-50%) 가 더해지면 **제 크기의 절반만큼 더 밀린다** — 카탈로그만 가운데가 아니었던 이유다.
 *   중앙 정렬은 한 곳에서만 한다. */

/* ================= [1] counter (bi-counter-*) — 구 counter.css ================= */
/*
 * lib/css/counter.css  (구 template/page/counter/style.css)
 * 2026-06-26: counter 모듈 삭제 시, 이 bi-counter-* 디자인 시스템을 buy_write(매출/예약/매입등록)가
 *   @import 로 공유하고 있어 lib/css 로 이전. buysell/style.css 가 @import url('/lib/css/counter.css').
 * 공용 POS/카운터 룩 — 전 셀렉터 .bi-counter- 스코프 격리. FA Pro 5.13.
 * §8-5 레거시 전역 CSS 함정 방어: textarea/input/select/checkbox 명시 override.
 */

/* ===== 토큰 (wrapper 로컬) ===== */
.bi-counter-wrap {
    --cc-navy: var(--brand-navy);
    --cc-blue: var(--brand-blue);
    --cc-blue-2: var(--color-info-600);
    --cc-ink: var(--txt-primary);
    --cc-ink-2: var(--txt-secondary);
    --cc-gray: var(--txt-muted);
    --cc-gray-l: var(--txt-disabled);
    --cc-line: var(--border-base);
    --cc-line-l: var(--border-light);
    --cc-bg: var(--bg-page);
    --cc-rose: var(--color-rose-600);
    --cc-emerald: var(--color-success);
    --cc-amber: var(--color-warning-600);
    color: var(--cc-ink-2);
    padding: var(--space-4);
    box-sizing: border-box;
    height: calc(100vh - 64px);   /* stack/짧은 뷰포트에서 콘텐츠가 넘치면 하단 잘림 → wrap 을 스크롤 컨테이너로(너비 무관, 전역) */
    overflow-y: auto;
    background: var(--cc-bg);
}#counter_portal {
    --cc-navy:var(--brand-navy); --cc-blue:var(--brand-blue); --cc-blue-2:var(--color-info-600); --cc-ink:var(--txt-primary); --cc-ink-2:var(--txt-secondary); --cc-gray:var(--txt-muted); --cc-gray-l:var(--txt-disabled); --cc-line:var(--border-base); --cc-line-l:var(--border-light); --cc-bg:var(--bg-page); --cc-rose:var(--color-rose-600); --cc-emerald:var(--color-success); --cc-amber:var(--color-warning-600);
}
#counter_portal *, #counter_portal *::before, #counter_portal *::after { box-sizing: border-box; }
#counter_portal i.fa, #counter_portal i.fas, #counter_portal i.far, #counter_portal i.fal { font-family: 'Font Awesome 5 Pro'; }
.bi-counter-wrap .is-hidden { display: none; }
.bi-counter-pulse { animation: bi-counter-pulse 1.6s infinite; }
@keyframes bi-counter-pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }

/* ===== 2컬럼 그리드 (8/4, xl=1280 이하 stack) ===== */
.bi-counter-grid {
    display: grid;
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    gap: var(--space-3);
    align-items: start;
}
.bi-counter-col { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }

/* ── POS 를 §40-3 표준 셸로 (2026-08-21 · 사용자 지시 «예약일정표처럼») ──────────────
 * 예약일정표는 프레임 → **카드 하나** → 툴바 + 3열이고, 열은 §40-2 대로 **구분선**으로 나뉜다.
 * POS 는 카드가 없어 툴바가 카드 흉내를 내고 안쪽 구획이 각자 둘레를 그렸다 — 상자 안 상자.
 * 이제 .bi-erp-card 로 감쌌으므로, 그 안에서는 둘레를 걷고 선으로 나눈다.
 *   가로로 나란한 것(좌/우 열) = 왼쪽 세로선 · 세로로 쌓인 것 = 위쪽 가로선 · 첫 칸에는 안 긋는다. */
/* align-items: start 면 짧은 열의 높이만큼만 선이 그려져 **구분줄이 끝까지 안 간다**(사용자 지적).
 * 카드 안에서는 두 열이 같은 높이를 갖게 해서 세로선이 아래까지 내려가게 한다. */
.bi-erp-card > .bi-counter-grid { gap: 0; align-items: stretch; }
.bi-erp-card .bi-counter-col { gap: 0; }
.bi-erp-card .bi-counter-card,
.bi-erp-card .bi-counter-datebar {
    border: 0; border-radius: 0; box-shadow: none; background: transparent;
}
.bi-erp-card > .bi-counter-grid > .bi-counter-col + .bi-counter-col { border-left: 1px solid var(--border-base); }
.bi-erp-card .bi-counter-col > * + * { border-top: 1px solid var(--border-base); }

/* ===== 카드 공통 ===== */
.bi-counter-card {
    background: var(--bg-card);
    border: 1px solid var(--cc-line);
    border-radius: var(--radius-2xl);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.bi-counter-card__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-3_5) var(--space-5);
    background: var(--gray-50);
    border-bottom: 1px solid var(--cc-line-l);
    flex-shrink: 0;
}
.bi-counter-card__title {
    font-size: var(--fs-md); font-weight: var(--fw-black); color: var(--gray-950);
    display: inline-flex; align-items: center; gap: var(--space-1_5);
    text-transform: uppercase; letter-spacing: .03em;
}
.bi-counter-card__title--lg { font-size: var(--fs-md); }
.bi-counter-card__title i { color: var(--cc-blue); }

/* §8-5 전역 checkbox visibility:hidden override */
.bi-counter-wrap input[type="checkbox"] {
    visibility: visible; display: inline-block;
    width: 14px; height: 14px; accent-color: var(--cc-blue); margin: 0; cursor: pointer;
}

.bi-counter-cust-body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }

/* ===== 수납 대기 결제 큐 ===== */
/* 규격 §40-2 «안쪽 구획은 둘레가 아니라 구분선으로» — 셸 카드(.bi-counter-card) 안이다.
 * 둘레(테두리+둥글기)는 빼고, 세로로 쌓인 구획이므로 **아래 가로선**으로 다음 구획과 나눈다.
 * 틴트는 남긴다 — 이 구획은 **누를 수 있는 대기열**이라 배경이 그 신호를 맡는다(색은 둘레가 아니다).
 * (2026-08-21 — 프레임이 .bi-counter-wrap 이라 옛 검사 범위(.bi-erp-card 안)에서 통째로 빠져 있었다.) */
.bi-counter-queue-box {
    padding: var(--space-3); border-radius: 0; border: 0;
    border-bottom: 1px solid var(--border-base);
    background: color-mix(in srgb, var(--brand-navy) 5%, transparent);
    display: flex; flex-direction: column; gap: var(--space-1_5);
}
.bi-counter-queue-title {
    font-size: var(--fs-sm); font-weight: var(--fw-black); color: var(--cc-navy);
    text-transform: uppercase; letter-spacing: .04em;
    display: inline-flex; align-items: center; gap: var(--space-1_5);
}
.bi-counter-queue-title i { color: var(--cc-rose); }
.bi-counter-queue-meta { font-size: var(--fs-xs); color: var(--cc-gray-l); font-weight: var(--fw-bold); }
.bi-counter-queue { display: flex; gap: var(--space-2); overflow-x: auto; padding-bottom: var(--space-1); }
/* ⚠ 함정 — <button> 에 글자 크기를 안 주면 상속이 아니라 **브라우저 기본 13.333px** 이 된다.
 * 이 카드가 그랬다: 규격 스케일(10·11·12·13·14·16·…) 어디에도 없는 «13.3» 이 실측에 찍혔고,
 * style.css 를 아무리 grep 해도 그 값이 안 나온다 — 아무도 안 적었기 때문이다(2026-08-21).
 * 버튼은 글자 크기를 **반드시 적는다.** */
.bi-counter-qcard {
    flex-shrink: 0; text-align: left; cursor: pointer; font-size: var(--fs-base);
    padding: var(--space-2_5); border-radius: var(--radius-xl);
    background: var(--bg-card); border: 1px solid var(--cc-line); color: var(--txt-secondary);
    transition: all .15s; min-width: 0;
}
.bi-counter-qcard:hover { background: var(--bg-input); }
.bi-counter-qcard.is-active {
    background: color-mix(in srgb, var(--color-info-50) 70%, transparent); border-color: var(--cc-blue); color: var(--cc-navy);
}
.bi-counter-qcard__top { display: flex; align-items: center; gap: var(--space-1_5); line-height: 1; }
.bi-counter-qgrade {
    font-size: var(--fs-2xs); font-weight: var(--fw-black); padding: var(--space-0_5) var(--space-1); border-radius: var(--radius-xs);
    background: var(--border-base); color: var(--txt-muted); flex-shrink: 0;
}
.bi-counter-qgrade.is-hi { background: var(--color-warning-100); color: var(--color-warning-700); }
.bi-counter-qname { font-weight: var(--fw-extrabold); font-size: var(--fs-xs); color: var(--txt-primary); white-space: nowrap; }
.bi-counter-qpaid { color: var(--color-success-500); font-size: var(--fs-sm); flex-shrink: 0; }
.bi-counter-qdot { width: 6px; height: 6px; background: var(--color-rose-500); border-radius: 50%; flex-shrink: 0; animation: bi-counter-pulse 1.2s infinite; }
.bi-counter-qsub { font-size: var(--fs-2xs); color: var(--cc-gray-l); font-weight: var(--fw-medium); margin: var(--space-1_5) 0 0; line-height: 1; white-space: nowrap; }
.bi-counter-qpaid-txt { color: var(--color-success); font-weight: var(--fw-extrabold); }
.bi-counter-qempty { font-size: var(--fs-sm); color: var(--cc-gray-l); font-style: italic; padding: var(--space-2); }

/* 구 .bi-counter-field/-row/--2 와 그 > label — §21 .bi-write-row/.bi-write-field/.bi-write-label,
 * 단독은 §40-10 .bi-col --gap-4 + .bi-minw-0 으로 흡수(2026-08-11).
 * ⚠ .bi-write-field 는 flex:1;min-width:200px 라 **행 안에서만** 안전하다.
 *   세로 스택 안에 단독으로 쓰면 세로로 늘어난다 → 단독은 .bi-col 조합. */
/* §8-5 전역 input[type=text]/select/textarea border-radius·height override */
/* ⚠ 2026-08-12: 여기 있던 블록은 **변형이 아니라 입력의 두 번째 스킨**이었다.
 * 선언 11개 중 9개가 베이스와 겹쳤고(width·height·padding·background·border·radius·
 * font-size·color·outline·transition), 스코프 접두(.bi-counter-wrap input[type=…])는
 * 그 사본이 베이스를 이기게 하려는 특이도 우회였다. 그대로 두면 §21-3 '입력은 하나다' 가 무너진다.
 *   width  → .bi-input--block    height → .bi-input--md
 *   padding·border·radius·font-size·color·outline·transition → 베이스
 * **여기 남는 것은 '강조' 뿐이다.** (POS 마크업은 이미 네 변형을 함께 붙이고 있다) */
/* * ⚠ **배경·테두리·포커스도 빼야 한다.** 규격은 입력을 하나로 정했고 배경색은 거기에 없다.
 *   강조가 배경을 바꾸면 그건 강조가 아니라 **두 번째 입력**이다(사용자 지적 2026-08-12).
 *   여기 남는 것은 글자 굵기 하나뿐이다. */
.bi-input--strong { font-weight: var(--fw-extrabold); }
/* 아이콘 여백 — 베이스(.bi-input--strong padding:0 12px)와 동급 특이도로 올려 이기게 함 (§5-1) */
.bi-counter-wrap input[type="text"].bi-input--icon { padding-left: var(--space-10); }
/* 디자이너 input — 클릭 시 popup_layer_emp 오픈 (readonly 이지만 클릭 가능 표시) */
.bi-input--clickable { cursor: pointer; }
.bi-input--clickable:hover { border-color: var(--cc-blue); background: var(--bg-card); }

.bi-counter-search-wrap { position: relative; flex: 1; min-width: 0; }
.bi-counter-search-wrap > i {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: var(--cc-gray-l); font-size: var(--fs-md); pointer-events: none; z-index: 1;
}
.bi-counter-search-wrap > i.fa-user-check { color: var(--cc-blue); }
.bi-counter-search-btn {
    flex-shrink: 0; width: 40px; height: 32px;   /* §12-4 사다리 base 32. 40 은 사다리에 없다(2026-08-14) */
    background: var(--border-light); border: 1px solid var(--cc-line); border-radius: var(--radius-xl);
    color: var(--gray-600); cursor: pointer; transition: background .15s;
    display: inline-flex; align-items: center; justify-content: center;
}
.bi-counter-search-btn:hover { background: var(--border-base); }.bi-counter-consult:focus { border-color: color-mix(in srgb, var(--color-warning-300) 90%, transparent); }

/* ============================================================
   빌링 테이블
   ============================================================ */
.bi-counter-bill-card { min-height: 360px; }

.bi-counter-bill-scroll { flex: 1; overflow-x: auto; }

/* §8-5 전역 input[type=text].writeinput height override */

.bi-counter-bill-foot {
    background: var(--gray-50); border-top: 1px solid var(--cc-line);
    padding: var(--space-3_5) var(--space-6); display: flex; justify-content: flex-end; align-items: center; gap: var(--space-8);
    flex-wrap: wrap;
}
.bi-counter-foot-label {
    display: block; font-size: var(--fs-xs); font-weight: var(--fw-extrabold); color: var(--cc-gray-l);
    text-transform: uppercase; letter-spacing: .03em; line-height: 1; margin-bottom: var(--space-1);
}
.bi-counter-foot-val { font-size: var(--fs-md); color: var(--txt-secondary); }
.bi-counter-foot-val--mono { color: var(--txt-primary); font-variant-numeric: tabular-nums; }

/* ============================================================
   우측 컬럼
   ============================================================ */
.bi-counter-datebar {
    display: flex; align-items: center; justify-content: space-between;
    background: var(--bg-card); padding: var(--space-3) var(--space-4); border-radius: var(--radius-2xl);
    border: 1px solid var(--cc-line); 
}
.bi-counter-datebar__l { position: relative; display: flex; align-items: center; gap: var(--space-2); cursor: pointer; }
.bi-counter-datebar__l i { color: var(--cc-blue); font-size: var(--fs-2lg); }
.bi-counter-datebar__caption { font-weight: var(--fw-extrabold); color: var(--txt-secondary); font-size: var(--fs-base); }
/* 네이티브 datepicker 트리거용 — 시각적으로 숨기되 showPicker() 호출 가능하도록 DOM 유지 */
.bi-counter-datebar__close {
    font-size: var(--fs-sm); background: var(--border-light); border: 1px solid var(--cc-line); color: var(--txt-secondary);
    font-weight: var(--fw-black); padding: var(--space-2) var(--space-2_5); border-radius: var(--radius-lg); cursor: pointer; transition: background .15s;
}
.bi-counter-datebar__close:hover { background: var(--border-base); }.bi-counter-memo-ta:focus { border-color: var(--cc-blue); }

/* ============================================================
   POS 정산 도크
   ============================================================ */
.bi-counter-dock { padding: var(--space-5); gap: var(--space-4); }

/* 선불권/포인트 사용 입력 */

.bi-counter-final {
    border-top: 1px dashed var(--cc-line-l); padding-top: var(--space-3); margin-top: var(--space-1);
    display: flex; justify-content: space-between; align-items: baseline;
}
.bi-counter-final-label { font-size: var(--fs-md); font-weight: var(--fw-black); color: var(--gray-950); text-transform: uppercase; }
.bi-counter-final-amt {
    display: block; font-size: var(--fs-3xl); font-weight: var(--fw-black); color: var(--cc-blue);
    font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1;
}
.bi-counter-final-amt small { font-size: var(--fs-md); font-weight: var(--fw-bold); }

/* 결제 버튼 */
.bi-counter-pay-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
/* ⚠ 기본 배경이 없으면 변형(--npay·--done)을 안 붙인 버튼이 **브라우저 기본 회색**으로 나온다.
 *   레거시 전역 버튼 스킨이 가려주고 있었을 뿐이다(2026-08-12 그 스킨을 없애며 드러남).
 *   §12 기준: 색없음 = 흰 배경 + 테두리. */
/* 규격 §12-5 크기 — POS 결제수단 타일. 사다리(48·32·27·22) 밖이지만 **위반이 아니라 별도 규격**이다.
 * 아이콘 위·글자 아래로 쌓는 **손가락 타깃**이라 사다리의 «글자 한 줄» 전제가 성립하지 않는다.
 * 값을 안 적어두면 padding·아이콘 크기가 대신 정하고, 검사는 «사다리 밖» 으로만 읽는다 →
 * §12-5 는 색만 정하고 크기를 안 정해서 실제로 그렇게 됐다(2026-08-21). 높이를 규격으로 못 박는다. */
.bi-counter-pay-btn {
    height: 78px;
    padding: var(--space-4) var(--space-1); border: 1px solid var(--border-base); border-radius: var(--radius-xl); cursor: pointer;
    background: var(--bg-card); color: var(--txt-primary); font-size: var(--fs-md); font-weight: var(--fw-black);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2);
}
.bi-counter-pay-btn i { font-size: var(--fs-xl); }
.bi-counter-pay-btn:active { transform: scale(.97); }
.bi-counter-pay-btn:disabled { opacity: .45; cursor: not-allowed; }
/* 2026-08-11 §12-5 규격 적용 — **색은 둘만**(N Pay 네이버 초록 · 결제완료 브랜드블루).
   구 구현: 현금=초록 · 카드=네이비 · N Pay=로즈. 수단마다 색이 달라
   "지금 눌러야 할 것"을 색으로 구분할 수 없었다 — styleguide2 §12-5 가 "교정 대상"으로
   지목해두고 미뤄져 있던 마지막 항목이다. 색은 강조의 도구라 아껴 쓴다. */
.bi-counter-pay-btn--cash,
.bi-counter-pay-btn--card {
    background: var(--bg-card); border: 1px solid var(--gray-300); color: var(--txt-secondary);
}/* N Pay — 네이버 브랜드 초록. 결제수단 중 유일하게 색을 갖는다(브랜드 식별)
   ⚠ 이 규칙이 사라져 있었다(2026-08-12 복구). 마크업에 변형이 안 붙어 "아무도 안 쓰는
     규격" 으로 보였고, 레거시 전역 버튼 스킨이 회색으로 가려 눈에 띄지 않았다. */
.bi-counter-pay-btn--npay { background: var(--color-npay); border-color: var(--color-npay); color: var(--bg-card); }
.bi-counter-pay-btn--npay:hover:not(:disabled) { background: color-mix(in srgb, var(--color-npay) 88%, var(--black)); }
/* 비활성(N Pay 미계약 등) — JS 토글 */
.bi-counter-pay-btn--inactive { opacity: .4; pointer-events: none; }

/* ============================================================
   모달 공통
   ============================================================ */
@keyframes bi-counter-zoom { from { transform: scale(.95); opacity: .5; } to { transform: scale(1); opacity: 1; } }

/* ----- 할인 모달 ----- */
#counter_disc_presets { display: flex; flex-direction: column; gap: var(--space-1_5); max-height: 170px; overflow-y: auto; padding-right: var(--space-1); }

/* ============================================================
   반응형 (1920 → 1440 → 1280 → 1024)
   ============================================================ */
@media (max-width: 1280px) {
    .bi-counter-grid { grid-template-columns: 1fr; }
}
@media (max-width: 1024px) {
    .bi-write-grid-2 { grid-template-columns: 1fr; }
    .bi-counter-bill-foot { gap: var(--space-5); }
}

/* ===================================================================
   § 2-1. 페이지 레이아웃
   =================================================================== */

/* 전표번호 배지 */
.bi-bs-keyindex-badge {
    font-size: var(--fs-base);
    color: var(--txt-muted);
    background: var(--border-light);
    border-radius: var(--radius-sm);
    padding: var(--space-1) var(--space-2_5);
    font-variant-numeric: tabular-nums;
}

/* ===================================================================
   § 2-2. 2컬럼 그리드
   =================================================================== */

/* 컬럼 안 카드: write.css margin-bottom:16px 대신 gap만 사용 */

@media (max-width: 1280px) {
}
@media (max-width: 1024px) {
}

/* ===================================================================
   § 2-3. 카드 헤더 내부 요소
   =================================================================== */

/* 포인트 배지 */
.bi-bs-point-badge {
    font-size: var(--fs-sm);
    color: var(--brand-blue);
    font-weight: var(--fw-semibold);
    white-space: nowrap;
}

/* 더보기 / 추가 링크 */
.bi-bs-link {
    font-size: var(--fs-base);
    color: var(--color-info-500);
    text-decoration: underline;
}

/* ===================================================================
   § 2-4. 고객 폼 레이아웃 오버라이드
   =================================================================== */

/* 성별 세그먼트 컨트롤 */
.bi-bs-sex-group {
    display: flex;
    background: var(--bg-input);
    padding: var(--space-1);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-base);
    gap: var(--space-0_5);
}
.bi-bs-sex-r {
    display: none;
    position: absolute;
}
/* lib/css/style.css  input[type=radio]+label { background-image:...; width:18px } 초기화 */
.bi-bs-sex-group .bi-bs-sex-r + .bi-bs-sex-lbl {
    background-image: none;
    width: auto;
    height: auto;
    position: static;
    top: auto;
}
.bi-bs-sex-lbl {
    flex: 1;
    text-align: center;
    padding: var(--space-1_5) var(--space-2);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    border-radius: var(--radius-md);
    color: var(--txt-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, color .15s, box-shadow .15s;
    user-select: none;
}
.bi-bs-sex-lbl:hover {
    background: color-mix(in srgb, var(--border-base) 50%, transparent);
}
.bi-bs-sex-r:checked + .bi-bs-sex-lbl {
    background: var(--bg-card);
    color: var(--brand-blue);
    font-weight: var(--fw-bold);
}

/* ── 고객 검색 — icon inside input + 검색 버튼 ─────────────────── */

/* 메모 노란 배경 */

@media (max-width: 1024px) {
}

/* ===================================================================
   § 2-5. 상품 카드
   =================================================================== */

/* 시술 추가 버튼 */

.bi-bs-pro-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-base);
    text-align: left;
    table-layout: fixed;
}
/* thead */
.bi-bs-pro-th {
    background: var(--bg-input);
    color: var(--txt-muted);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    padding: var(--space-2_5) var(--space-3_5);
    border-bottom: 1px solid var(--border-base);
    white-space: nowrap;
}
.bi-bs-pro-th--no    { width: 44px;  text-align: center; }
.bi-bs-pro-th--proc  { width: 130px; }
.bi-bs-pro-th--pro   { /* auto — table-layout:fixed 에서 나머지 너비 차지 */ }
.bi-bs-pro-th--price { width: 90px;  text-align: right; }
.bi-bs-pro-th--qty   { width: 68px;  text-align: center; }
/* 구 .bi-bs-pro-th--disc — .bi-bs-pro-th--price 와 같아 합침(2026-08-12) */
.bi-bs-pro-th--total { width: 160px; text-align: right; font-weight: var(--fw-bold); color: var(--txt-secondary); }
.bi-bs-pro-th--del   { width: 32px;  padding-left: 0; padding-right: 0; }
/* tbody rows */
.bi-bs-pro-row {
    border-bottom: 1px solid var(--border-light);
    transition: background .15s;
}
.bi-bs-pro-row:hover { background: color-mix(in srgb, var(--color-info-50) 30%, transparent); }
/* td */
.bi-bs-pro-td {
    padding: var(--space-2_5) var(--space-3_5);
    vertical-align: middle;
}
.bi-bs-pro-td--no    { text-align: center; }
/* (구 «.bi-bs-pro-td--proc { display:flex }» — td 를 표에서 빼내 행을 깨뜨리던 규칙.
   2026-08-26 제거. 대신 아래쪽(§POS 전표)에서 table-cell 인 채로 안쪽만 세운다.) */
.bi-bs-pro-td--del   { text-align: center; padding-left: 0; padding-right: 0; }
/* row number */
.bi-bs-pro-rownum {
    color: var(--txt-disabled);
    font-size: var(--fs-xs);
    font-family: var(--font-mono);
}
/* inputs inside td */
.bi-bs-pro-input {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid transparent;
    border-radius: 0;
    outline: none;
    padding: var(--space-1) var(--space-0_5);
    height: auto;
    font-size: var(--fs-base);
    color: var(--txt-primary);
    box-shadow: none;
    box-sizing: border-box;
    transition: border-color .15s;
}
.bi-bs-pro-input:focus {
    border-bottom-color: var(--brand-blue);
    background: transparent;
    box-shadow: none;
}
.bi-bs-pro-input[readonly] { color: var(--txt-secondary); }
.bi-bs-pro-input--r { text-align: right; font-family: var(--font-mono); }
.bi-bs-pro-input--c { text-align: center; }
/* 수량 입력 */
.bi-bs-pro-input--qty {
    display: inline-block;
    width: 48px;
    background: var(--bg-input);
    border: 1px solid var(--border-base);
    border-bottom: 1px solid var(--border-base);
    border-radius: var(--radius-md);
    padding: var(--space-1) var(--space-1_5);
    height: 28px;
    font-size: var(--fs-sm);
    box-sizing: border-box;
}
.bi-bs-pro-input--qty:focus {
    border-color: var(--brand-blue, var(--brand-blue));
    box-shadow: var(--ring-focus);
}
.bi-bs-pro-input--pro { font-weight: var(--fw-medium); }
.bi-bs-pro-input--total { font-weight: 700; color: var(--txt-primary); font-family: var(--font-mono); }
/* search btn inside proc/disc td */
/* delete btn */
.bi-bs-pro-del-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--gray-300);
    padding: var(--space-1);
    border-radius: var(--radius-sm);
    transition: color .15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.bi-bs-pro-del-btn:hover { color: var(--color-danger); }

/* ===================================================================
   § 2-6. 정보 탭 (CSS-only tab system)
   =================================================================== */

/* 탭 라디오 인풋 숨김 */
.bi-bs-tab-r {
    display: none;
    position: absolute;
    pointer-events: none;
}

/* 정보 탭 카드 */
.bi-bs-info-card {
    height: 340px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* 탭 헤더 바 */
.bi-bs-tab-hdr {
    display: flex;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
}

/* 탭 레이블 */
.bi-bs-tab-lbl {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1_5);
    padding: var(--space-3) var(--space-2);
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    color: var(--txt-disabled);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: calc(var(--space-0_5) * -1);
    white-space: nowrap;
    transition: color .15s, border-color .15s, background .15s;
}
.bi-bs-tab-lbl:hover { color: var(--txt-secondary); }

/* 탭 패널 컨테이너 */
.bi-bs-tab-panels {
    flex: 1;
    overflow-y: auto;
    background: color-mix(in srgb, var(--bg-input) 30%, transparent);
    padding: var(--space-5);
    min-height: 0;
}/* 개별 패널 — 기본 숨김 */
.bi-bs-tab-pnl { display: none; }/* 메모: flex column — textarea h-full */
#itab_memo:checked ~ .bi-bs-tab-panels #pnl_memo {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* 패널 내부 — 스크롤 리스트 — flex:1 으로 더보기를 하단으로 밀어냄 */
.bi-bs-info-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    list-style: none;
}

/* 더보기 — 하단 고정 (flex-shrink:0 + 패널 flex column 덕분에 항상 최하단) */
/* 탭을 바꿔도 이 줄의 높이는 같아야 한다 — «최근 내역» 은 링크만, «보유 정액권» 은 버튼+링크라
 * 내용이 높이를 정하게 두면 탭 전환 때 아래가 들썩인다(2026-08-21 사용자 지적).
 * 가장 큰 내용(버튼 27=--sm)에 맞춰 **줄 높이를 규격으로 고정**한다. */
.bi-bs-pnl-more {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 27px;
    padding: var(--space-2) 0 0;
    border-top: 1px solid var(--border-light);
    margin-top: var(--space-1);
}
.bi-bs-pnl-more .bi-bs-link {
    font-size: var(--fs-sm);
    color: var(--color-info-500);
    text-decoration: underline;
    cursor: pointer;
}

/* ── 공통 빈 상태 ── */
.bi-bs-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-6) var(--space-3);
    list-style: none;
    color: var(--txt-disabled);
    text-align: center;
}
.bi-bs-empty-state i { font-size: var(--icon-md); opacity: 0.2; color: var(--txt-disabled); }
.bi-bs-empty-state p { font-size: var(--fs-base); margin: 0; }

/* ===================================================================
   § 2-9. 로딩 레이어
   =================================================================== */

.bi-bs-panel-layer {
    display: none;
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, var(--black) 30%, transparent);
    z-index: 9000;
    justify-content: center;
    align-items: center;
}
.bi-bs-panel-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ===================================================================
   § 3. 레거시 클래스 보존 (JS 호환 — 수정 금지)
   =================================================================== */

.ad_style {
    padding: var(--space-5) var(--space-5);
    float: left;
    width: 100%;
    font-size: var(--fs-base);
    box-sizing: border-box;
}

/* 2026-08-07 공통 일원화: .ul-style(margin 5px↔10px)·.li-style(width 100%↔98%) 사본 제거.
   차이가 무의미한데 전역 클래스를 모듈군마다 다르게 덮고 있었다(같은 클래스가 products 에선 다른 값).
   → 공통 style.css 단일 정의 사용. span-r 90px 는 #package_olist 스코프라 유지. */

#package_olist .li-style-span-r {
    float: right;
    width: 90px;
    text-align: right;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* 상품 목록 컬럼 너비 */
.product_list2 { width: 300px; text-align: left; }
.product_list3 { width: 80px; text-align: right; }
.product_list4 { width: 150px; text-align: right; }

.bi-counter-wrap .main_more:not(.bi-btn) { width: 30%; }

@media (max-width: 981px) {
    .product_list2 { width: 250px; }
    .product_list3 { width: 73px; }
}

/* ===== buysell/style.css 이관(2026-08, §40-6-2: 모듈 @import 제거·POS 공통 일원화) =====
 *  - 아래는 매출등록 전용 보강(.bi-bs-counter 스코프): 동적 테이블/리스트를 counter 카드 안에 맞춤
 *
 * ⚠ 2026-08-07 결함 수정: 이 자리에 ① 여는 `/*` 없이 `*  - …` + ` *​/` 로 끝나는 **깨진 주석**과
 *   ② `@import url('/lib/css/buy_write.css')` — buy_write.css 가 **자기 자신을 import** 하는 줄이
 *   있었다(구 buysell/style.css 헤더를 이관하며 통째로 딸려 옴, 커밋 914ac03).
 *   깨진 주석은 파서를 어긋나게 하고, 자기 @import 는 파일 삭제 후 404 가 된다. 둘 다 제거.
 * ===================================================================================== */

/* ── 래퍼: write 페이지 높이 정렬(헤더 변수) ── */
.bi-counter-wrap.bi-bs-counter { height: calc(100vh - var(--header-height, 64px)); }/* 보조/액션 버튼 톤 통일 */
.bi-bs-counter .bi-counter-pay .bi-bs-dock-btn { border-radius: var(--radius-xl); font-weight: var(--fw-extrabold); height: 40px; }
.bi-bs-counter .bi-counter-pay .bi-bs-dock-actions { gap: var(--space-2_5); }
/* 보조행: flex 균등분배 → 포인트 숨김 시 남은 버튼이 자리 채움(3개=33%, 2개=50%) */
.bi-bs-counter .bi-counter-pay > .bi-bs-dock-btns { display: flex; gap: var(--space-2); }
.bi-bs-counter .bi-counter-pay > .bi-bs-dock-btns > .bi-bs-dock-btn { flex: 1 1 0; min-width: 0; }

/* ── 신규 고객 등록 모달 (designer_chart 신규회원등록 패턴) ── */
/* 신규회원 모달 = 공용 .bi-modal-ov(백드롭)+.bi-modal(패널) 사용(2026-07-31). 토글은 JS .css('display','flex')/.hide() 그대로(인라인 display가 공용 위 적용). 아래는 bs 전용 크기/여백 modifier */
/* 구 .bi-bs-reg-row/--2/--3/-field — §21 .bi-write-row/.bi-write-field(--third)/.bi-write-label 로 흡수(2026-08-11).
 * 가이드가 이미 같은 폼(고객명·연락처·성별·생년월일)을 그 규격으로 전시하고 있었다.
 * 새 격자 규격을 만들 뻔했으나 대응물이 있으면 만들지 않는다. */
/* 폼 필드 = 공통 .bi-form .bi-input (buy_write.php form 에 .bi-form 추가). 개별 재정의 제거 (2026-07-31) */
/* 취소/확인 = 공통 .bi-btn--ghost/--primary. 델타: 2:3 비율·큰 라운드·굵기·padding·그림자 (2026-07-31) */

/* ── 시술/상품 내역 테이블(JS bi-bs-pro-*) — counter bill 디자인 정합 ── */
.bi-bs-counter .bi-bs-pro-table { width: 100%; border-collapse: collapse; font-size: var(--fs-md); color: var(--gray-800); }

/* 헤더: counter thead (컬럼별 정렬은 buysell.css 유지 → 전역 center 강제 안 함) */
.bi-bs-counter .bi-bs-pro-th {
    background: var(--gray-50); color: var(--txt-muted); font-weight: var(--fw-extrabold);
    font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em;
    padding: var(--space-3_5) var(--space-2_5); border-bottom: 1px solid var(--border-base); white-space: nowrap;
}
.bi-bs-counter .bi-bs-pro-th--total { color: var(--txt-secondary); font-weight: var(--fw-black); }

/* 행 — counter row (여백 + hover) */
.bi-bs-counter .bi-bs-pro-table tbody tr.bi-bs-pro-row { border-bottom: 1px solid var(--border-light); transition: background .12s; }
.bi-bs-counter .bi-bs-pro-table tbody tr.bi-bs-pro-row:hover { background: color-mix(in srgb, var(--color-info-50) 30%, transparent); }
.bi-bs-counter .bi-bs-pro-td { padding: var(--space-2_5) var(--space-2_5); vertical-align: middle; }

/* No. — counter td--no (회색 tabular) */
.bi-bs-counter .bi-bs-pro-rownum {
    display: inline-block; text-align: center; color: var(--txt-disabled);
    font-weight: var(--fw-extrabold); font-size: var(--fs-base); font-variant-numeric: tabular-nums;
}.bi-bs-counter .bi-bs-pro-input--r { text-align: right; font-variant-numeric: tabular-nums; font-family: inherit; }/* 읽기전용 계산값(단가/할인/매출액) → counter 처럼 텍스트화(테두리 제거) */
.bi-counter-wrap.bi-bs-counter input[type="text"].bi-bs-pro-input[readonly] {
    background: transparent; border-color: transparent; box-shadow: none;
    padding-left: var(--space-1); padding-right: var(--space-1); cursor: default;
}.bi-bs-counter .bi-bs-pro-input--pro:hover { color: var(--brand-blue); }

/* 분류 input(2차 분류명) — 테두리 없는 텍스트형, 클릭 */
.bi-counter-wrap.bi-bs-counter input[type="text"].bi-bs-pro-input[name='input_proc[]'] {
    background: transparent; border-color: transparent; box-shadow: none;
    padding-left: var(--space-1); cursor: pointer; color: var(--gray-600); font-weight: 600;
}/* 합계: 매출인정(input_tdesiner) + 구분자 숨김 → 매출액(--total)만 표시 (값은 DOM 유지·제출됨) */
.bi-bs-counter input[name='input_tdesiner[]'] { display: none; }/* 삭제 버튼 — counter delbtn */
.bi-bs-counter .bi-bs-pro-del-btn {
    width: 30px; height: 30px; border: none; background: none; color: var(--txt-disabled);
    border-radius: var(--radius-lg); cursor: pointer; transition: all .12s;
    display: inline-flex; align-items: center; justify-content: center;
}
.bi-bs-counter .bi-bs-pro-del-btn:hover { color: var(--color-danger); background: var(--color-danger-50); }/* ── 컬럼 폭 보정: 분류(배지+명) / 수량(스테퍼) / 할인(버튼) ── */
.bi-bs-counter .bi-bs-pro-th--proc { width: 150px; }
.bi-bs-counter .bi-bs-pro-th--qty  { width: 112px; }

/* ── 분류 td: 1차 배지 + 2차 분류명 배지 가로 나란히 ──
   2026-08-26 — td 가 다시 table-cell 이라 flex 속성(flex-direction·gap·flex:1)은 안 먹는다.
   간격은 인접 형제 마진으로, 인풋은 폭 100% 로. */
.bi-bs-counter .bi-bs-pro-td--proc { white-space: nowrap; }
.bi-bs-counter .bi-bs-pro-td--proc > * + * { margin-left: var(--space-1_5); }
.bi-bs-counter .bi-bs-pro-td--proc .bi-bs-pro-input { width: 100%; min-width: 0; }

/* ── 분류 1차 상품구분 배지 (counter catbadge) — 코드별 결정적 색상 ── */
.bi-bs-counter .bi-bs-pro-cat-badge {
    display: none; align-self: center; flex-shrink: 0; max-width: 70px;
    padding: var(--space-0_5) var(--space-2_5); border-radius: var(--radius-md); font-size: var(--fs-xs); font-weight: var(--fw-black);
    border: 1px solid; white-space: nowrap; line-height: 1.6; cursor: pointer;
    overflow: hidden; text-overflow: ellipsis; margin: var(--space-2) 0px;
}
.bi-bs-counter .bi-bs-pro-cat-badge.is-on { display: inline-block; }

/* ── 분류 2차 분류명 배지 (1차와 유사 디자인, 중립 회색) ── */
.bi-bs-counter .bi-bs-pro-cat-badge2 {
    display: none; align-self: center; flex-shrink: 1; min-width: 0; max-width: 100%;
    padding: var(--space-0_5) var(--space-2_5); border-radius: var(--radius-md); font-size: var(--fs-xs); font-weight: var(--fw-extrabold);
    border: 1px solid var(--border-base); background: var(--border-light); color: var(--gray-600);
    white-space: nowrap; line-height: 1.6; cursor: pointer;
    overflow: hidden; text-overflow: ellipsis;
}
.bi-bs-counter .bi-bs-pro-cat-badge2.is-on { display: inline-block; }
.bi-bs-counter .bi-bs-pro-cat-badge.is-cat-blue   { background: var(--color-info-50); color: var(--brand-blue); border-color: var(--color-info-100); }
.bi-bs-counter .bi-bs-pro-cat-badge.is-cat-rose   { background: var(--color-rose-50); color: var(--color-rose-600); border-color: var(--color-rose-200); }
.bi-bs-counter .bi-bs-pro-cat-badge.is-cat-green  { background: var(--color-success-50); color: var(--color-success); border-color: var(--color-success-100); }
.bi-bs-counter .bi-bs-pro-cat-badge.is-cat-amber  { background: var(--color-warning-50); color: var(--color-warning-600); border-color: var(--color-warning-200); }
.bi-bs-counter .bi-bs-pro-cat-badge.is-cat-violet { background: var(--color-purple-50); color: var(--color-purple-600); border-color: var(--color-purple-200); }

/* ── 시술/상품 내역 푸터 — 글자 크게 (디자인 정합, counter 모듈 미영향) ── */
.bi-bs-counter .bi-counter-bill-foot { padding: var(--space-5) var(--space-6); gap: var(--space-11); }
.bi-bs-counter .bi-counter-foot-label { font-size: var(--fs-base); margin-bottom: var(--space-2); letter-spacing: 0; }
.bi-bs-counter .bi-counter-foot-val { font-size: var(--fs-lg); font-weight: var(--fw-extrabold); }
.bi-bs-counter #bs_foot_total { font-size: var(--fs-xl); font-weight: var(--fw-black); color: var(--brand-blue); }

/* ── 정산 dock 맨 위 '총 합계' 행 강조 ── */
.bi-bs-counter .bi-bs-dock-row--grand > span:first-child { color: var(--gray-800); font-weight: 800; font-size: var(--fs-md); }
.bi-bs-counter .bi-bs-dock-row--grand > span:last-child { color: var(--txt-primary); font-weight: 900; font-size: var(--fs-lg); font-variant-numeric: tabular-nums; }

/* ── 상품 없을 때 빈 상태 (counter empty-row) ── */
.bi-bs-counter .bi-bs-pro-empty { display: none; padding: 52px var(--space-4); text-align: center; color: var(--txt-disabled); }
.bi-bs-counter .bi-bs-pro-empty.is-on { display: block; }
.bi-bs-counter .bi-bs-pro-empty i { font-size: var(--fs-3xl); display: block; margin-bottom: var(--space-3); opacity: .45; }
.bi-bs-counter .bi-bs-pro-empty p { margin: 0; font-size: var(--fs-base); line-height: 1.7; font-weight: var(--fw-medium); }
.bi-bs-counter .bi-bs-pro-empty b { color: var(--brand-blue); font-weight: var(--fw-extrabold); }

/* ── 수량 +/- 스테퍼 (counter qty) ── */
.bi-bs-counter .bi-bs-pro-qty { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1_5); }
.bi-bs-counter .bi-bs-pro-qty-btn {
    width: 24px; height: 24px; flex-shrink: 0; padding: 0; border: none; border-radius: var(--radius-lg);
    background: var(--border-light); color: var(--gray-600); cursor: pointer; font-size: var(--fs-2xs);
    display: inline-flex; align-items: center; justify-content: center;
}
.bi-bs-counter .bi-bs-pro-qty-btn:hover { background: var(--border-base); color: var(--brand-blue); }

/* ── 할인 버튼 (counter discbtn: 없으면 '할인추가' 회색 / 있으면 '금액 / 율' 빨강) ── */
.bi-bs-counter .bi-bs-pro-disc-btn {
    min-width: 88px; padding: var(--space-2_5) var(--space-3_5); border-radius: var(--radius-lg); border: 1px solid var(--border-base);
    background: var(--bg-input); color: var(--txt-muted); font-size: var(--fs-base); font-weight: var(--fw-extrabold); cursor: pointer;
    white-space: nowrap; transition: all .12s; 
    font-variant-numeric: tabular-nums;
}
.bi-bs-counter .bi-bs-pro-disc-btn:hover { background: var(--border-light); color: var(--txt-secondary); }
.bi-bs-counter .bi-bs-pro-disc-btn.is-active { background: var(--color-danger-50); color: var(--color-danger-600); border-color: var(--color-danger-200); }
.bi-bs-counter .bi-bs-pro-disc-btn.is-active:hover { background: var(--color-danger-100); }

/* ── 최근내역 / 정액권 리스트(JS) — counter 톤 ── */
.bi-bs-counter .bi-bs-info-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.bi-bs-counter .bi-bs-empty-state {
    list-style: none; text-align: center; color: var(--txt-disabled); font-size: var(--fs-base); padding: var(--space-8) var(--space-2);
}
.bi-bs-counter .bi-bs-empty-state i { font-size: var(--icon-md); display: block; margin-bottom: var(--space-1_5); opacity: .6; }

/* ── 성별 라디오(전역 스프라이트 무력화 → 세그 느낌) ── */
.bi-counter-wrap.bi-bs-counter input[type="radio"].bi-bs-sex-r { position: absolute; opacity: 0; pointer-events: none; }
.bi-bs-counter .bi-bs-sex-group { display: inline-flex; gap: 0; background: var(--border-light); border-radius: var(--radius-xl); padding: var(--space-1); }
.bi-counter-wrap.bi-bs-counter input[type="radio"].bi-bs-sex-r + label.bi-bs-sex-lbl {
    background-image: none; width: auto; height: 33px; position: static; top: auto;
    display: inline-flex; align-items: center; justify-content: center;
    padding: var(--space-1_5) var(--space-4); border-radius: var(--radius-lg); font-size: var(--fs-base); font-weight: var(--fw-extrabold); color: var(--txt-muted); cursor: pointer; border: none;
}
.bi-bs-counter input[type="radio"].bi-bs-sex-r:checked + label.bi-bs-sex-lbl {
    background: var(--bg-card); color: var(--brand-blue); 
}

/* ── 정산 도크 보강: 매출/결제 요약 라인 ── */
.bi-bs-counter .bi-bs-dock-sum { display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--fs-base); }
.bi-bs-counter .bi-bs-dock-row { display: flex; justify-content: space-between; align-items: center; }
.bi-bs-counter .bi-bs-dock-row > span:first-child { color: var(--txt-muted); font-weight: var(--fw-semibold); }
.bi-bs-counter .bi-bs-dock-row > span:last-child { color: var(--gray-800); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.bi-bs-counter .bi-bs-dock-row--remain > span { color: var(--color-rose-600); font-weight: 900; }
.bi-bs-counter .bi-bs-dock-divider { height: 1px; background: var(--border-light); margin: var(--space-0_5) 0; }

/* 결제 버튼 그리드(보조: 선불권/포인트/접수/취소 등) */
.bi-bs-counter .bi-bs-dock-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
/* 규격 §12-5 크기 — 보조 결제(선불권·포인트·접수). 타일 78 과 최종액션 48 사이의 **한 칸**. */
.bi-bs-counter .bi-bs-dock-btn {
    height: 40px;
    padding: 0 var(--space-1_5); border-radius: var(--radius-xl); border: 1px solid var(--border-base); background: var(--bg-card); color: var(--txt-secondary);
    font-size: var(--fs-base); font-weight: var(--fw-extrabold); cursor: pointer; transition: all .15s;
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-0_5); line-height: 1.25;
}
.bi-bs-counter .bi-bs-dock-btn:hover { background: var(--bg-input); border-color: var(--gray-300); }

/* 액션 (닫기 / 결제완료) */
/* 두 액션은 §12-5-1 에서 **같은 등급(48)** 이다. 폭도 같아야 한다 —
 * 1fr 1.4fr 이라 결제완료만 1.4배 넓었고, 글자도 16 vs 브라우저 기본(13.3)이라 «왜 큰지 모르겠다» 는
 * 지적이 나왔다(2026-08-21). 크기는 §12-4 --lg 와 같은 글자(--fs-md 14)로 통일한다. */
.bi-bs-counter .bi-bs-dock-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2_5); }
/* 규격 §12-5 크기 — 최종 액션 두 개는 사다리 --lg(48)에 맞춘다.
 * 실측 47 이었다(padding 14 로 «거의» 48). 1px 차이는 안 보이지만 **사다리에 있는 값과 없는 값은 다르다** —
 * 없는 값이면 검사가 «사다리 밖» 으로 잡고, 다음 사람이 또 판정해야 한다(2026-08-21). */
.bi-bs-counter .bi-bs-dock-close {
    height: 48px; padding: 0 var(--space-3_5); border-radius: var(--radius-xl); border: 1px solid var(--border-base); background: var(--bg-card); color: var(--txt-secondary);
    font-size: var(--fs-md); font-weight: var(--fw-extrabold); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
}
.bi-bs-counter .bi-bs-dock-close:hover { background: var(--bg-input); }
/* 결제완료 = 화면의 **최종 주 액션**. 규격 문서 §12-5: "색은 둘만 — N Pay 와 결제완료(브랜드블루)".
 * 2026-08-14: 실물이 검정(--txt-primary)이라 문구와 달랐다. **문서가 기준**이므로 실물을 문서에 맞춘다. */
.bi-bs-counter .bi-bs-dock-pay {
    height: 48px; padding: 0 var(--space-3_5); border-radius: var(--radius-xl); border: none; background: var(--brand-blue); color: var(--bg-card);
    font-size: var(--fs-md); font-weight: var(--fw-black); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
}
.bi-bs-counter .bi-bs-dock-pay:hover { background: var(--brand-blue-hover); }/* keyindex 배지 */
.bi-bs-counter .bi-bs-keyindex-badge:empty { display: none; }
.bi-bs-counter .bi-bs-keyindex-badge {
    font-size: var(--fs-xs); font-weight: var(--fw-extrabold); color: var(--brand-blue); background: var(--color-info-50);
    border: 1px solid var(--color-info-100); border-radius: var(--radius-lg); padding: var(--space-1) var(--space-2);
}

/* 로딩 레이어 */
.bi-bs-counter .bi-bs-panel-layer {
    position: fixed; inset: 0; background: color-mix(in srgb, var(--white) 60%, transparent); z-index: 1500;
    display: none; align-items: center; justify-content: center;
}

/* ============================================================
 * booking_buysell · report_buy_appear 공통 (2026-07-01)
 * 두 모듈이 이 파일을 @import 하므로 여기서 단일 정의 → 각 모듈 중복 제거.
 * 근거: docs/modules/66_part_common_css_공통화_디자인리뉴얼.md
 * ============================================================ */

/* write: 안내문 바 (counter 톤) — .ad_style(float:left) 무력화: 상단 전체폭 */
.bi-bs-counter .bi-bk-info-bar {
    float: none; clear: both; width: 100%; box-sizing: border-box;
    margin: 0 0 var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-xl);
    background: var(--color-warning-50); border: 1px solid var(--color-warning-200); color: var(--color-warning-800);
    font-size: var(--fs-base); font-weight: var(--fw-semibold); display: flex; align-items: center; gap: var(--space-2);
}
.bi-bs-counter .bi-bk-info-bar i { color: var(--color-warning-600); }

/* write: 주 동작 2분할 결제버튼 그리드 (매출/선결제, 현금/카드 등) */
.bi-bs-counter .bi-counter-pay-grid--bk2 { grid-template-columns: 1fr 1fr; }

/*member popup*/
.pop_m_p_h{
    width: 100%;
    float: left;
    border-bottom: 2px solid var(--gray-100);
}
.pop_m_p_b{
    width: 100%;
    float: left;
}
.pop_m_h_sub{
    float: left;
    padding: 0px 0px 0px var(--space-4);
}
.pop_m_b{
    width: 100%;
    float: left;
    font-size: var(--fs-base);
}
.pop_m_b_ul{
    list-style: none;
    padding: 0px;
    margin: 0px;
}
.pop_m_b_li_div{
    float: left;
    padding: 0px 0px 0px var(--space-2);
    min-height: 1px;
}

/* 검색 팝업 헤더 부제목 — 13px 통일 (products 의 11px drift 정정) */
.main_title_sub{
    font-size: var(--fs-base);
    color: var(--gray-300);
    padding-left: var(--space-2_5);
    letter-spacing: -1px;
}

/* 검색 돋보기 버튼 (input 옆 절대위치) */
.sch_but_pop{
    text-decoration: none;
    width: 20px;
    position: absolute;
    height: 30px;
}

/* 팝업 본문 — 상품찾기/담당자/거래처 등 좌측 박스 */
.pop_body{
    padding: 0px var(--space-2_5);
    width: 250px;
    float: left;
    margin: var(--space-2_5) 0px;
}

/* 팝업 본문 분할선 */
.pop_border_l{
    border-left: 1px solid var(--gray-100);
}

/* ============================================================
   매출상품 선택 팝업 (popup_layer_product.php) — counter 카탈로그 모달(2단) 스코프
   - 레거시 .pop_body float 3열 → 상단 필터존(구분 세그먼트 + 분류 칩 + 검색) / 하단 상품 리스트
   - JS emit/참조 id/class(pop_*_ul, pop_m_b_li, pop_m_b_li_div, *_select_val,
     search_input_*, sch_but_*, ck_fill/ck_plus, product_save_but*) 보존, 룩만 재정의
   - 선택 하이라이트: 인라인 background → .is-sel 클래스 (JS/PHP 동기화)
   - 2026-06-22 신규 / 2026-06-22 2단(카탈로그) 재구성
   ============================================================ */
.bi-pop-catalog{
    box-sizing: border-box;
    display: flex; flex-direction: column;
    height: 100vh; padding: var(--space-5);
    font-family: var(--font-sans);
    background: var(--bg-page); color: var(--gray-800);
}
.bi-pop-catalog *{ box-sizing: border-box; }
.bi-pop-catalog ul{ list-style: none; margin: 0; padding: 0; }

/* 푸터 */
/* 예약 상품팝업 푸터 안내(체크박스 대신 안내문) */
/* 전역 input[type=checkbox]{visibility:hidden;display:none} 무력화 (CLAUDE.md §5-1) */
/* 공용 팝업 footer(취소+주버튼) — styleguide §13 톤: 우측정렬 + 상단 구분선 + 배경. 여기 한 곳에서 관리. */
/* 스타일보드 §07 해부도 — 「선은 리스트 상단(--border-base)과 **푸터 상단(--border-light)** 두 곳에만」.
 * 푸터 선은 헤더보다 연하다(구획을 나누되 눈길을 끌지 않는다). 배경도 흰색으로 — 회색 띠를 두지 않는다(2026-08-21 A단계). */
.bi-pop-foot-btns{ display: flex; gap: var(--space-2); flex-shrink: 0; justify-content: flex-end; padding: var(--pop-foot-pad-t) var(--pop-head-pad-x) var(--pop-foot-pad-b); border-top: 1px solid var(--pop-line); background: var(--bg-card); gap: var(--pop-foot-gap); }
/* footer 를 팝업 가장자리까지(bg·줄 풀블리드): body 하단 padding 제거(footer 가 바닥) + 좌우 padding 은 음수 margin 으로 상쇄. 팝업별로 다른 건 좌우 값뿐.
 — 뒤에 선언되는 body padding 단축속성(.bi-pop-reg{padding:22px} 등)이 padding-bottom 을 되돌리는 것 방지. */
/* 푸터가 바닥에 붙는 팝업은 body 아래 여백을 두지 않는다.
   ⚠ 채움형(--fill)은 «옛 fixed 푸터 자리»로 비워 둔 72px 때문에 남는 공간이 0 이 되어
     목록이 자라지 못하고 마지막 줄이 잘렸다(discount_list, 2026-08-25). 같은 이유·같은 선언이라 함께 묶는다. */
.bi-pop-reg{ padding-bottom: 0; }   /* 아래 간격은 푸터가 갖는다(2026-08-27) */
/* 버튼바는 좌우 여백을 뚫고 팝업 전폭을 쓴다(바닥에 붙는 띠).
 * ⚠ 음수 여백만 주면 **폭이 부모보다 커져** 폼이 가로로 넘친다(448 > 426, 2026-08-13 실측).
 *   넓히는 만큼 폭도 함께 정해 준다 — «뚫고 나가되 넘치지는 않게». */
.bi-pop-reg .bi-pop-foot-btns{
    margin: 0 calc(-1 * var(--pop-pad-x)) 0;
    width: calc(100% + var(--pop-pad-x) * 2);
    box-sizing: border-box;
}

/* ============================================================
   결제 팝업 공통 스킨 (.bi-pop-pay) — 현금/카드/선불권/포인트/N페이
   레거시 마크업(.bt_div/.but_blue/.btn_size/.writeinput/.pop_desc)을
   리뉴얼 토큰으로 재스타일 (id/구조/핸들러 무변경, 래퍼 div 만 추가)
   - 2026-06-22 추가
   ============================================================ */
/* ⚠ 2026-08-28 — 여기 값을 규격으로 바꿨다가 되돌렸다.
   공통 규칙을 고치면 그 규칙을 쓰는 «모든 팝업» 이 함께 움직인다(상품추가 팝업이 깨졌다).
   규격값은 아래 `.bi-pop-board` 로 **덧붙여** 준다 — 프로젝트 규칙 §4(기존 클래스 수정 금지). */
.bi-pop-pay{
    box-sizing: border-box; min-height: auto; padding: var(--space-5) var(--space-6) var(--space-6);
    font-family: var(--font-sans);
    background: var(--bg-card); color: var(--gray-800);
    display: flow-root;   /* 레거시 float 본문을 BFC 로 포함 → auto-height 가 콘텐츠 높이를 정확히 측정(스크롤 방지) */
}
/* 채움형 — 옛 규격은 푸터를 바닥에 «고정» 하고 그 높이(72px)만큼 아래를 비워 뒀다.
   푸터가 흐름 안으로 들어온 지금은 그 자리가 두 번 잡혀 «남는 공간 0» 이 되고,
   목록이 자라지 못해 마지막 줄이 잘렸다(discount_list 실측 2026-08-25).
   ⚠ 반드시 .bi-pop-pay 선언 «뒤» 에 있어야 한다 — 같은 특이도는 순서로 갈린다. */
.bi-pop-pay--fill,
.bi-pop-pay--list.bi-pop-pay--fill{ padding-top: 0; padding-bottom: 0; }   /* 보드: 헤더 바로 아래가 검색칸(간격 0) */   /* --list 가 비워 둔 72px(옛 fixed 푸터 자리)를 되돌린다 */
.bi-pop-pay *{ box-sizing: border-box; }
/* 레거시 팝업 float 본문 포함(clearfix) — popup_layer.js auto-height 가 콘텐츠 높이를 정확히 측정해
   팝업이 콘텐츠에 맞춰 리사이즈됨(불필요한 스크롤 방지). 버튼 영역은 float 본문 아래로 정렬. */
.bi-pop-pay::after{ content: ''; display: table; clear: both; }
.bi-pop-pay .bt_div{ clear: both; }

/* 안내문 — 회색 작은 텍스트(박스 아님) */
.bi-pop-pay .pop_desc{
    background: transparent; border: none; border-radius: 0;
    padding: 0 0 var(--space-1); color: var(--txt-disabled); float: none; width: auto;
    font-size: var(--fs-sm); line-height: 1.6; margin-bottom: var(--space-5);
}

/* 입력/셀렉트 — 모서리·테두리만 토큰화(높이는 인라인 유지해 레이아웃 보존) */
.bi-pop-pay input[type="text"], .bi-pop-pay select, .bi-pop-pay input[type="number"] {
    border: 1px solid var(--gray-300); border-radius: var(--radius-lg);
    background: var(--bg-card); color: var(--gray-800); box-shadow: none; outline: none;
}
.bi-pop-pay input[type="text"]:focus, .bi-pop-pay select:focus {
    border-color: var(--brand-blue); box-shadow: var(--ring-focus);
}

/* 금액 강조 입력(인라인 font-size 큰 것) */
.bi-pop-pay input#pay_amount, .bi-pop-pay input[id*="amount"]{
    font-weight: 700; color: var(--txt-primary); background: var(--bg-card);
}

/* ── 검색 리스트형 팝업(고객/디자이너 검색) — 공통 스킨 + 하단 고정 닫기바 ── */

.bi-pop-pay--list{ padding-bottom: var(--space-18); } /* 하단 고정 닫기바 공간 확보 */
.bi-pop-pay--list .pop_m_b{ height: auto; max-height: calc(100vh - 210px); overflow-y: auto; }
.bi-pop-pay--list [style*="position: fixed"]{
    left: 0; right: 0; bottom: 0; top: auto;
    width: 100%; padding: var(--space-3_5) var(--space-6); margin: 0;
    background: var(--bg-card); border-top: 1px solid var(--gray-100); box-sizing: border-box;
}
.bi-pop-pay--list [style*="position: fixed"] .bt_div{ width: auto; padding: 0; margin: 0; border: none; justify-content: flex-end; }
/* 검색 입력 행 — 디자인 정합(큰 검색바) */
.bi-pop-pay--list .body-main-sch{ display: flex; align-items: center; gap: var(--space-3); padding: var(--space-1) 0 var(--space-4); }
.bi-pop-pay--list .body-main-sch > div{ float: none; padding: 0; }
.bi-pop-pay--list .body-main-sch > div:first-child{ position: relative; }
.bi-pop-pay--list .body-main-sch .fa-search{ position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--txt-disabled); font-size: var(--fs-md); pointer-events: none; z-index: 1; }
.bi-pop-pay--list .sch_but_pop{ position: absolute; left: 8px; top: 0; width: 34px; height: 46px; z-index: 2; }
.bi-pop-pay--list .main_title_sub{ color: var(--txt-disabled); font-size: var(--fs-base); padding-left: 0; }
/* 안내문구 줄바꿈은 어절(공백) 단위로 — 옆 배치 유지, 2줄로 감싸지되 단어 중간에서 끊기던 것("필수입력"→"필/수입력") 방지 */
.bi-pop-pay--list .main_title_sub{ word-break: keep-all; }

/* inout_item 검색 입력창 = member 톤(46px 라운드). inout 은 --list(고정높이 → footer 잘림) 대신 자동높이 유지라 .pop_i_p_h 스코프로 개별 적용. */
.pop_i_p_h{ display: flex !important; align-items: center; gap: var(--space-3); padding: var(--space-1) 0 var(--space-4); }   /* member 검색행(.bi-pop-pay--list .body-main-sch)과 동일 간격 */
.pop_i_p_h > div{ float: none !important; padding: 0 !important; }
.pop_i_p_h > div:first-child{ position: relative; }
.pop_i_p_h .sch_but_pop{ position: absolute !important; left: 8px; top: 0; width: 34px !important; height: 46px !important; z-index: 2; }
.pop_i_p_h .fa-search{ position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--txt-disabled); font-size: var(--fs-md); pointer-events: none; z-index: 1; }
.pop_i_p_h .main_title_sub{ color: var(--txt-disabled) !important; font-size: var(--fs-base) !important; padding-left: 0 !important; }

/* 신규회원/거래처 등록 모달(popup_layer_reg · office_reg) = 공통 write 폼 디자인(.bi-write-row/field/label · .bi-input · .bi-write-select) 100% 재사용. 입력 박스 스타일은 style.css(구 write.css) 가 .bi-pop-reg 스코프로 제공. 아래는 좁은 모달(430px)에 맞춘 폭·간격 조정만. (2026-07-30 폼 디자인 write 통일) */
.bi-pop-reg .bi-write-row { gap: var(--space-3); margin-bottom: var(--space-3); }
.bi-pop-reg .bi-write-row:last-of-type { margin-bottom: 0; }
.bi-pop-reg .bi-write-field { min-width: 0; }
.bi-pop-reg .bi-write-field--half  { flex: 0 0 calc(50% - 6px); max-width: calc(50% - 6px); }
.bi-pop-reg .bi-write-field--third { flex: 0 0 calc(33.333% - 8px); max-width: calc(33.333% - 8px); }
.bi-pop-reg .bi-write-select { width: 100%; min-width: 0; }
.bi-pop-reg .bi-input--block { width: 100%; }

/* 팝업별 검색필드 폭 */
/* 검색결과 테이블 — 헤더/행을 flex 동일 컬럼으로 정렬(등록지점 줄바꿈 방지 + 위치 정렬, 휴대폰 폭 자동 축소) */
/* 2026-07-23 정산 지급율 관리(popup_layer_pay_ref) — 팝업 폭 790px 기준 검색필드 */
/* 지급율 표는 12컬럼으로 팝업 폭(790px)을 넘는다 → 표 영역만 가로 스크롤.
   ⚠ 가로 스크롤바는 **바깥(.pop_m_p_b) 한 곳에만** 둔다. 헤더(.pop_m_h)와 행(.pop_m_b)이
      함께 밀려야 컬럼 정렬이 유지되기 때문. 안쪽에도 스크롤이 생기면 헤더만 남고 행이
      따로 움직여 정렬이 깨진다.
   ⚠ .bi-pop-pay--list .pop_m_b 는 `overflow-y:auto`(위 §검색리스트 공통) 인데,
      CSS Overflow 규칙상 한 축이 non-visible 이면 나머지 축의 `visible` 이 `auto` 로 승격된다
      → 지정하지 않으면 안쪽에도 가로 스크롤바가 자동 생성(스크롤바 2개). 명시적으로 hidden 고정.
      단 hidden 이 잘라내지 않도록 .pop_m_b 폭을 표 전체 폭으로 넓혀 준다. */
/* 빈 상태 행 — 행 폭은 표와 같은 1650px(위 그룹 규칙) 이므로 기존처럼 가운데 정렬하면
   문구가 825px 지점에 놓여 화면 밖으로 밀린다. 좌측 정렬 + sticky 로 가시영역에 고정한다.
   (부모 .pop_m_b 가 1650px 라 `width:100%` 로는 못 줄인다 — 좌측 고정이 정답) */
/* 하단 고정 닫기바 — 버튼 우측 정렬(단일 자식 flex:1 무력화) */
.bi-pop-pay--list [style*="position: fixed"] .bt_div > div{ flex: 0 0 auto; }

/* 선불권 리스트(.pop_m_p_b float:left) 를 .div_wrap 가 감싸 해제 — 금액블록이 옆에 붙지 않고 세로로 쌓이게 */
.bi-pop-pay .div_wrap::after{ content: ""; display: table; clear: both; }

/* ── 선불권 결제 팝업(.bi-pop-pay--prepay) 컨텐츠 영역 간격 정돈 — 2026-07-27 ──
   레거시 인라인 값이 남긴 세 가지 어긋남을 스코프 안에서만 교정한다(인라인 자체는 보존).
     ① .div_wrap 의 좌우 10px 인덴트 → 리스트만 안쪽으로 밀려 하단 금액행과 좌우가 어긋났다.
     ② .pop_m_b 의 height:130px 고정 → 선불권 1~2건이면 아래가 텅 비고, 3건 이상이면 스크롤.
     ③ 헤더 열 폭 합(635px) ≠ 행 열 폭 합(570px) → '사용금액'부터 헤더와 값이 어긋났다. */
/* ③ 열 폭 — 헤더(.pop_m_h_sub)와 행(.pop_m_b_li_div)의 인라인 폭이 서로 달라(합계 635 vs 570)
      '사용금액'부터 어긋났고, 구매일 칸(80px − 좌패딩 15px = 65px)이 좁아 `2026-07-27` 이 두 줄로 밀렸다.
      → 양쪽에 같은 폭을 주고 날짜는 nowrap. 팝업 내부 가용폭 682px(730 − 좌우패딩 48) 안에 들어간다(합계 629).
      ⚠ 행의 li 는 hidden input 3개로 시작하므로 nth-child 가 아니라 **nth-of-type**(div 기준)으로 센다. */

/* 2026-07-31 네이버 디자이너 목록 팝업(popup_layer_employee_naver) 헤더 열 폭 보정.
   증상: 컬럼명 '네이버디자이너코드' 가 두 줄로 밀림(캡처 확인).
   원인: 헤더 2번째 열만 인라인 120px 인데 행은 150px — 폭이 어긋난 데다 좌패딩 15px 을 빼면
         가용폭 105px 이라 9글자(13px 폰트, 약 117px)가 안 들어간다.
   조치: 헤더 2번째 열을 행과 같은 150px 로 맞추고, 컬럼명은 전부 nowrap.
   ⚠ 행의 li 는 hidden input 으로 시작하므로 nth-child 가 아니라 **nth-of-type**(div 기준). */

/* 2026-07-31 카드승인취소 팝업 — 결제 주체(디자이너/사업장) 표시행(읽기전용).
   shop 원본은 인라인 style 이었으나 절대규칙(신규 인라인 style ❌)에 따라 클래스로 이식. */
/* 결제 주체(사업장/디자이너) 선택 — 카드결제 팝업은 선택형, 취소 팝업은 표시전용(disabled).
   여백: 위 안내문(.pop_desc)과 아래 '결제금액' 라벨(.bi-pop-card-label, margin-top:14px) 사이.
   아래는 6px 만 두고 나머지는 라벨 margin 이 담당 → 합계 20px 로 다른 섹션 간격과 같은 리듬. */
.bi-pop-card-payer{ display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-4); font-size: var(--fs-md); color: var(--txt-secondary); }
.bi-pop-card-payer span{ margin-right: var(--space-3_5); }
.bi-pop-card-payer input[type="radio"]:disabled + label{ opacity: .7; cursor: default; }

/* 신용카드 팝업 — 안내문 하단여백 제거 */
.bi-pop-pay--card .pop_desc{ margin-bottom: 0; }
/* 안내문 긴 문장 넘침 시 문자단위로 다음 줄로 줄바꿈 */
.bi-pop-pay--card .pop_desc{ word-break: break-all; overflow-wrap: anywhere; }

/* ── 카드승인취소(다중결제) 선택 리스트 오버레이 — 2026-07-28 ──────────────────
   증상: 목록과 하단 버튼줄이 팝업 밖으로 넘치고(닫기 버튼 잘림), 헤더와 값의 열이 어긋나며,
         목록 아래로 큰 빈 공간이 남았다.
   원인: `.selectWrap` 이 `position:absolute; width:100%; height:510px`(팝업 인라인 style) 인데
         **기준이 되는 positioned 조상이 없어** body 기준으로 잡혔다 → 팝업 좌우 패딩(24px)만큼
         오른쪽으로 밀려 넘치고, 고정 높이 510px 이 콘텐츠와 무관하게 빈 공간을 만들었다.
         열 폭도 헤더(130/140/100)와 JS 가 그리는 행(150/150/100)이 서로 달랐다.
   대응: 팝업 래퍼에 `--cardcancel` 를 부여해 기준 컨테이너로 만들고, 오버레이를 그 안쪽에 맞춘다.
         인라인 style 은 그대로 두고 스코프 규칙으로만 덮는다. */
/* 열 폭 — 헤더(.pop_m_h_sub)와 행(.pop_m_b_li_div)에 같은 값. 행은 hidden input 으로 시작하므로 nth-of-type(div 기준) */
/* '검색결과가 존재하지 않습니다' 빈 행은 div 가 하나뿐 → 1번 열 규칙(170px)에서 제외 */
/* 하단 줄 — 안내문 좌측 / 버튼 우측, float 대신 flex (좁은 폭에서 겹치고 두 줄로 밀리던 것) */

/* 버튼 행 — 상단 구분선 + 우측 정렬 */
.bi-pop-pay .bt_div{ display: flex; justify-content: flex-end; align-items: center; gap: var(--space-2); border-top: 1px solid var(--gray-100); padding-top: var(--space-4); margin-top: var(--space-4); }
.bi-pop-pay .bt_div > div{ display: flex; gap: var(--space-2); align-items: center; }
.bi-pop-pay .bt_div > div:first-child:not(:last-child){ flex: 1; } /* 좌측 요소가 있을 때만 늘림 — 버튼 단독이면 우측 정렬 유지 */
/* 하단 고정 버튼바(선불권 등 position:fixed) — 팝업 폭에 맞춤(고정폭 넘침 방지) */
.bi-pop-pay .bt_div[style*="fixed"]{ left: 0; right: 0; width: auto; margin: 0; padding: var(--space-3) var(--space-5); background: var(--bg-card); }

/* 팝업 전역 버튼 베이스라인 — popup.css 는 팝업에서만 로드되므로 스킨(.bi-pop-pay) 없는
   레거시 팝업의 버튼에도 모던 룩 적용. 미사용 → 인라인 style 가진 버튼(결제팝업 등)은
   원본 유지(레이아웃 보호). 스킨 적용 팝업은 아래 .bi-pop-pay 규칙()이 우선. 2026-06-25 */
.bt_div input[type="button"], .bt_div input[type="submit"], .bt_div button,
input.btn_size, input.but_blue{
    height: 36px; padding: 0 var(--space-4); border-radius: var(--radius-lg); border: 1px solid var(--border-base);
    background: var(--border-light); color: var(--txt-secondary); font-size: var(--fs-base); font-weight: var(--fw-bold); cursor: pointer;
    vertical-align: middle; transition: background .12s;
}
.bt_div input[type="button"]:hover, .bt_div input[type="submit"]:hover, .bt_div button:hover{ background: var(--border-base); }/* N페이 팝업 상태 버튼(bcolor*) — 라운드/그림자 적용(색은 유지) */
.bi-pop-pay button[class*="bcolor"]{ border-radius: var(--radius-xl); font-weight: 800; border: none;  transition: filter .12s; }
.bi-pop-pay button[class*="bcolor"]:hover{ filter: brightness(.95); }
.bi-pop-pay button[class*="bcolor"] p{ margin: 0; }

/* ── N페이 스타일태그 카테고리 — 아코디언 카드(인라인 <style> 오버라이드) ── */
/* 헤어길이 라디오(FEMALE/MALE) → styleguide §5 네이티브 + brand accent (전역 input[type=radio]{visibility:hidden} + '+label' PNG 박스 무력화) */

/* ── 카드결제 팝업 ── */
/* 결제금액 행 — 할부 select(고정폭) + 금액 input(가변, 팝업 폭 채움) */
.bi-pop-pay select#txtPeriod { flex: 0 0 auto; }   /* 크기는 규격·격자가 정한다(2026-08-26) */
/* 수기 등록 체크 (우측 정렬) */
/* styleguide §5 체크박스(네이티브 accent-color)로 통일 — 전역 input[type=checkbox]{visibility:hidden} + '+label' PNG 박스 무력화 */
/* 레거시 PNG 커스텀 박스용 빈 label 제거 */
/* 결제팝업 옵션(체크박스·라디오) — styleguide §5 네이티브 + brand accent, label>input+span 패턴 (현금팝업 계좌이체/현금영수증/소득공제·지출증빙 등) */
/* 승인 정보 그리드 (결제일자 full + 카드종류/승인번호 2열) */
/* 2026-07-31 카드정보 입력(비사업자 디자이너/PayUp) — 승인정보 그리드와 동일 리듬.
   display 는 draw_payUi() 가 토글하므로 기본은 none(인라인 style 제거 대체). */
.bi-pop-pay .bi-pop-card-pg{ display: none; grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-3_5); margin-top: var(--space-3_5); }
.bi-pop-pay .bi-pop-card-info{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-3_5); margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--gray-100); }

/* ── 선결제(예약금) 팝업(popup_layer_bk_deposit) — 금액·결제기한·방식·확인체크 리디자인 ── */
/* 결제기한 + 결제방식 2열 */
/* 결제내역 확인 체크박스 — 전역 input[type=checkbox]{visibility:hidden} 무력화(§5-1) */

/* designer_chart 모달 스타일이 의존하는 --dc-* 변수 재선언(팝업은 .bi-page--scroll 밖) */
.bi-pop-reg {
    --dc-blue:var(--brand-blue); --dc-blue-soft:rgba(0,35,183,.05); --dc-navy:var(--brand-navy);
    --dc-ink:var(--txt-primary); --dc-sub:var(--txt-muted); --dc-mut:var(--txt-disabled); --dc-line:var(--border-base);
    font-family: var(--font-sans);
}

/* ════════════════════════════════════════════════════════════
   예약일시 팝업(popup_layer_bk_datetime) — 캘린더 + 시작/종료시간 3컬럼 리디자인
   · supercal CSS 는 booking/style.css 에만 있고 이 팝업엔 미로딩 → 여기서 스코프 재정의
   · 인라인 width/height/float 무력화() 후 카드형 3컬럼 + 시간칩 그리드
   ════════════════════════════════════════════════════════════ */
.bi-pop-pay.bi-pop-pay--dt{
    padding: var(--space-4) var(--space-5);
    display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--space-3_5);
}
/* 3개 컬럼(.pop_body) — 인라인 width:280/height 무력화 → 균등 카드 */
.bi-pop-pay--dt .pop_body{
    width: auto; height: auto; flex: 1 1 0; min-width: 250px;
    background: var(--bg-card); border: 1px solid var(--gray-100); border-radius: var(--radius-2xl);
    padding: var(--space-3_5) var(--space-4); margin: 0; box-sizing: border-box;
}
.bi-pop-pay--dt .pop_body.pop_border_l{ border-left: 1px solid var(--gray-100); }
.bi-pop-pay--dt .pop_m_p_b{ width: auto; }/* 섹션 헤더(예약 날짜 / 예약시작시간 / 예약종료시간) — 구분선 없음 */
.bi-pop-pay--dt .pop_m_h_sub{
    width: auto; padding: 0;
    font-size: var(--fs-base); font-weight: var(--fw-extrabold); color: var(--brand-blue); white-space: nowrap;
}/* .pop_m_b 공통 — 인라인 width/height 무력화(블록 유지). ⚠ 캘린더 컬럼의 .pop_m_b(.cal 포함)도 이 규칙만 받게 함 */
.bi-pop-pay--dt .pop_m_b{
    width: auto; height: auto; margin: 0 0 var(--space-3);
}
/* 오전/오후 행은 시간 컬럼(.pop_border_l)에만 flex 적용 — 캘린더 컬럼(.cal)이 32px 로 오므라드는 버그 방지 */
.bi-pop-pay--dt .pop_border_l .pop_m_b{
    display: flex; align-items: flex-start; gap: var(--space-2_5);
}
.bi-pop-pay--dt .pop_border_l .pop_m_b > div:first-child{ /* 오전/오후 라벨 */
    float: none; width: 32px; height: auto; margin: 0;
    flex: 0 0 32px; padding-top: var(--space-1_5); font-size: var(--fs-sm); font-weight: var(--fw-extrabold); color: var(--txt-muted);
}
.bi-pop-pay--dt .time_block{
    width: auto; float: none; flex: 1; min-width: 0;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-1_5);
}
/* 캘린더 컨테이너 — 컬럼 전체폭 채움(.pop_m_b > div:first-child 류 영향 차단) */
.bi-pop-pay--dt .cal{ width: 100%; float: none; flex: none; }/* 고를 수 없는 시간(첫 칸·마지막 칸). JS 가 인라인으로 #efefef/#b9b9b9 를 찍던 자리 —
 * 상태는 클래스로, 색은 토큰으로(2026-08-14).
 * ⚠ :hover 도 같이 눌러야 «고를 수 없는데 손을 대면 반응하는» 칸이 되지 않는다. */
.bi-pop-pay--dt .t_butn.is-disabled,
.bi-pop-pay--dt .t_butn2.is-disabled{ background: var(--gray-100); color: var(--gray-400); cursor: default; }
.bi-pop-pay--dt .t_butn.is-disabled:hover,
.bi-pop-pay--dt .t_butn2.is-disabled:hover{ background: var(--gray-100); color: var(--gray-400); border-color: var(--border-base); }

/* ── supercal 캘린더 (브랜드 블루 톤 재디자인 — 자체완결: bootstrap 미로딩) ──
   · 플러그인이 nav 버튼/셀에 .css()(인라인 font-size:30px·color)로 직접 박으므로 로 제압
   · transition='carousel-vertical' 은 월전환 시 table 을 position:absolute 로 슬라이드 → .supercal-month overflow:hidden 필수 */
.bi-pop-pay--dt .supercal{ width: 100%; }
.bi-pop-pay--dt .supercal-header{
    width: 100%; margin: 0 0 var(--space-2_5); line-height: 1;
    display: flex; align-items: center; justify-content: space-between;
}
/* ⚠ 2026-08-31 — 캘린더를 규격안(popup_spec2 §1 `.cal`) 값으로 다시 짰다.
   그동안 「고쳤다」고 했지만 화면은 옛 모양 그대로였다. 이유는 CSS 가 아니라 **플러그인의 인라인 style**
   (jquery.supercal.js 가 .css('color','red') · .css('font-size','30px') 로 직접 박음)이 이겼기 때문이다.
   플러그인 쪽 인라인을 걷어내고(그 파일은 이 팝업만 쓴다) 여기서 모양을 정한다.
   규격안 값: 월표시 12.5/800 · 요일 10.5 회색 · 날짜 12/600 · 칸 radius 7 · 고른 날 navy · 다른 달 #D1D5DB */
.bi-pop-pay--dt .supercal-header .month{
    order: 1; flex: 1; text-align: center;
    font-size: 12.5px; font-weight: var(--fw-extrabold); color: var(--txt-primary);
}
.bi-pop-pay--dt .supercal-header .month div{ display: inline; }.bi-pop-pay--dt .supercal-header button.prev-month{ order: 0; }
.bi-pop-pay--dt .supercal-header button.next-month{ order: 2; }.bi-pop-pay--dt .supercal-month{ margin: 0; overflow: hidden; position: relative; }
.bi-pop-pay--dt .supercal table{
    width: 100%; margin: 0; background: transparent;
    border-collapse: separate; border-spacing: 2px; table-layout: fixed;
    box-sizing: border-box;   /* width:100% 에 border-spacing 포함 → 카드 영역 밖으로 안 넘침 */
}.bi-pop-pay--dt .cal{ max-width: 100%; overflow: hidden; }
/* 요일 머리 — 규격안은 주말도 «회색 한 톤» 이다(옛 화면의 빨강·파랑은 플러그인 인라인이었다) */
.bi-pop-pay--dt .supercal th{
    font-size: 10.5px; font-weight: var(--fw-semibold); color: var(--txt-muted);
    text-align: center; padding: var(--space-0_5) 0 var(--space-1_5);
    border: none; background: transparent;
}
/* 날짜 칸 — 배경 없이, 고른 날만 채운다 */
.bi-pop-pay--dt .supercal td{
    text-align: center; cursor: pointer; height: 30px; padding: var(--space-1) 0; color: var(--txt-secondary);
    /* 규격안 값은 7 이지만 토큰에 7 이 없다 → 가장 가까운 --radius-md(6). 새 토큰을 만들지 않는다. */
    border: none; border-radius: var(--radius-md); font-size: var(--pop-cnt-fs); font-weight: var(--fw-semibold);
    background: transparent; transition: background .12s, color .12s;
}
.bi-pop-pay--dt .supercal td:hover{ background: var(--bg-selected); color: var(--brand-blue); }
/* 지난 날·다른 달만 흐리다 — 그 밖의 날은 한 톤 */
.bi-pop-pay--dt .supercal td.before{ color: var(--gray-300); cursor: default; }
.bi-pop-pay--dt .supercal td.today{ box-shadow: inset 0 0 0 1.5px var(--color-info-200); font-weight: var(--fw-extrabold); }
.bi-pop-pay--dt .supercal td.selected{ background: var(--brand-navy); color: var(--bg-card); font-weight: var(--fw-extrabold); }
.bi-pop-pay--dt .supercal-footer{ display: none; } /* 하단 입력행 숨김(헤더로 충분) */

/* 하단 안내문 + 완료/닫기 버튼 영역 — 전체폭 차지 */
.bi-pop-pay--dt > div:last-child{ flex: 1 1 100%; }

/* ── 신규 회원/거래처 등록 팝업(popup_layer_reg · office_reg) — 공통 write 폼(.bi-write-* · .bi-input) 사용 + 팝업 본문 패딩 ──
   ⚠ 2026-08-07 결함 수정: 원문이 `.bi-write-*​/.bi-input` 이라 그 `*` + `/` 가 **주석을 조기 종료**시켰다.
   뒤 문구가 CSS 로 파싱되며 파서가 어긋나고 짝 없는 종료자가 남았다. 와일드카드 뒤 `/` 금지. ── */
/* 팝업 콘텐츠 영역 공통 여백은 --pop-pad-y/x 토큰(style.css :root)에서 불러씀 — 개별 하드코딩 대신 공통 규격 사용 */
.bi-pop-reg{ padding: 0 var(--pop-head-pad-x); color: var(--txt-primary); box-sizing: border-box; }   /* 보드 .pop-body 좌우값(2026-08-27) */
.bi-pop-reg *{ box-sizing: border-box; }

/* ── 스타일 카탈로그 팝업(popup_layer_catalog) — 본문 cat 스타일은 아래로 이관됨(팝업 공통). 모달 박스 → 팝업 전체폭 채움 ── */
/* 콘솔(좌) + 갤러리(우) 가로 배치 확정 */
/* ⚠ designer_chart/style.css @media(max-width:1024) 가 콘솔 display:none/view 220 처리 — 팝업 iframe(~980px)은 항상 ≤1024 라 무력화 필요 */

/* 카탈로그 팝업 본문 스타일 — designer_chart/style.css 에서 이관(팝업 공통 · 2026-07-30). --dc-* → 전역 토큰. */
/* 헤더를 공용 .bi-pop-head 로 통일 — 컨테이너 padding:20 상쇄해 헤더바를 박스 상단 가장자리까지(라운드 20 매칭).
   width:auto — 공용 .bi-pop-head{width:100%}(=content 폭)이면 음수 margin 상쇄 후 우측 40px 빔 → auto 로 flex stretch 가 margin 까지 채워 박스 폭 꽉 참. */
/* 공용 .bi-pop-head-title 은 overflow:hidden(긴 제목 말줄임)이라 __who 배지에 padding 크게 주면 상하가 잘림.
   카탈로그 제목은 짧으므로 넘침 허용 + inline-flex 로 배지 높이만큼 타이틀/헤더가 커지도록(잘림 방지·수직 중앙). */

.bi-catalog__tab { flex: 1; border: 0; background: transparent; color: var(--txt-muted); font-size: var(--fs-sm); font-weight: var(--fw-extrabold); padding: var(--space-2) var(--space-1_5); border-radius: var(--radius-lg); cursor: pointer; }
.bi-catalog__tab:hover { color: var(--txt-primary); }
.bi-catalog__tab.is-active { background: var(--bg-card); color: var(--gray-950);  }
.bi-catalog__thumb { position: relative; aspect-ratio: 1/1; border: 2px solid var(--border-base); border-radius: var(--radius-xl); overflow: hidden; background: var(--bg-card); cursor: pointer; padding: 0; }
.bi-catalog__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bi-catalog__thumb:hover { border-color: var(--color-indigo-200); }
.bi-catalog__thumb.is-selected { border-color: var(--brand-blue);  }
/* 2026-06-26 카탈로그 썸네일 삭제 버튼(hover) — 갤러리(.bi-gallery__del) 패턴 재사용. 시술 후 사진만 표시 */
.bi-catalog__del { position: absolute; top: 5px; right: 5px; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--black) 60%, transparent); color: var(--bg-card); font-size: var(--fs-xs); line-height: 1; display: none; align-items: center; justify-content: center; cursor: pointer; z-index: 3; }
.bi-catalog__thumb:hover .bi-catalog__del { display: inline-flex; }
.bi-catalog__del:hover { background: var(--color-danger-600); }
/* 사진 고유 비율 유지 — 정사각형 강제·크롭 제거. 폭에 맞추되 높이는 원본 비율대로(세로 길면 컬럼 스크롤). */
.bi-catalog__swatch { width: 18px; height: 18px; border-radius: var(--radius-full); border: 1px solid var(--border-base); display: inline-block; }
@media (max-width: 1024px) {
}

/* ════════════════════════════════════════════════════════════
   제휴/할인 팝업(popup_layer_discount) — 할인 모달 디자인 (2026-06-25)
   ════════════════════════════════════════════════════════════ */

/* 프리셋(쿠폰) 영역 */

/* 직접 수동 조율 */
/* ── booking_renew 간편예약 팝업 (popup_layer_bk_quick) — 인라인 모달에서 이전. 오버레이/모달/헤더는 플러그인이 제공하므로 제외 ── */
.bi-bq-field label { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--txt-secondary); }

/* 결제 요약 팝업 본문(popup_layer_dchart_pay) — designer_chart/style.css 에서 이관(팝업 공통 · 2026-07-30). --dc-* → 전역 토큰. */
.bi-paypop__custsub { font-size: var(--fs-lg); color: var(--txt-muted); font-weight: var(--fw-bold); }
.bi-paypop__divider { border-bottom: 1px solid var(--border-light); }
.bi-paypop__item { display: flex; justify-content: space-between; align-items: center; font-size: var(--fs-base); font-weight: var(--fw-bold); color: var(--gray-600); padding: var(--space-2) 0; border-top: 1px solid var(--gray-50); }
.bi-paypop__item:first-child { border-top: 0; }
.bi-paypop__pkg { font-size: var(--fs-sm); font-weight: var(--fw-extrabold); color: var(--color-purple-700); background: color-mix(in srgb, var(--color-purple-700) 10%, transparent); padding: var(--space-0_5) var(--space-2); border-radius: var(--radius-sm); }
/* 2026-08-28 — 아래 16 은 보드에서 «본문» 의 것이다(.pop-body padding-bottom).
   이 팝업들은 본문이 .bi-pop-pad 가 아니라 제 스크롤 상자라 규격 여백을 못 받는다 → 여기서 준다. */
.bi-paypop__scroll { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: var(--space-3_5); padding-bottom: var(--space-4); }
.bi-paypop__qty { font-size: var(--fs-xs); color: var(--brand-blue); font-weight: var(--fw-extrabold); }
#dchart_pay_split_body .bi-paypop__item { width: 100%; }
.bi-paypop__chip { font-size: var(--fs-2xs); border-radius: var(--radius-lg); padding: var(--space-1_5) var(--space-2_5); font-weight: var(--fw-black); cursor: pointer; border: 1px solid; }
.bi-paypop__chip.is-on { background: var(--color-danger-600); color: var(--bg-card); border-color: var(--color-danger-600);  }
.bi-paypop__disc-none { font-size: var(--fs-xs); color: var(--txt-disabled); font-style: italic; padding: var(--space-0_5) 0; }
.bi-paypop__method { padding: var(--space-2) var(--space-0_5); border-radius: var(--radius-xl); border: 1px solid var(--gray-300); background: var(--bg-card); font-size: var(--fs-sm); font-weight: var(--fw-black); color: var(--txt-secondary); cursor: pointer; }
.bi-paypop__method:hover { background: var(--bg-input); }
.bi-paypop__method.is-active { background: color-mix(in srgb, var(--brand-blue) 10%, transparent); border-color: var(--brand-blue); color: var(--brand-blue); }
.bi-paypop__method.is-npay.is-active { background: color-mix(in srgb, var(--color-npay) 10%, transparent); border-color: var(--color-npay); color: var(--color-npay); }
.bi-paypop__method.is-disabled, .bi-paypop__method.is-disabled:hover { opacity: .45; cursor: not-allowed; background: var(--border-light); color: var(--txt-disabled); border-color: var(--border-base); }

/* AI 메시지(CRM 컴포저) 팝업 본문(popup_layer_ai_msg) — designer_chart/style.css 에서 이관(팝업 공통 · 2026-07-30). --dc-* → 전역 토큰. */
.bi-msgpop__mode { border: 1px solid var(--border-base); border-radius: var(--radius-xl); padding: var(--space-2_5); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-0_5); cursor: pointer; transition: all .12s; }
.bi-msgpop__mode i { color: var(--txt-disabled); }
.bi-msgpop__mode:hover { border-color: var(--brand-blue); background: var(--dc-blue-soft); }
.bi-msgpop__mode.is-active { border-color: var(--brand-blue); background: var(--dc-blue-soft); }
.bi-msgpop__mode.is-active i { color: var(--brand-blue); }
.bi-msgpop__mode.is-disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }

/* 2026-07-31 AI 메시지 팝업(popup_layer_ai_msg) 높이 구조 — **콘텐츠 높이에 맞춤**(스크롤 없음).
   래퍼에 고정 높이를 주지 않아 자연 높이가 나오고, 팝업의 fitPopup 이 그 값을 재서
   박스=콘텐츠+헤더(64), iframe=콘텐츠 로 맞춘다 → 내부 스크롤바가 생기지 않는다.
   화면이 너무 작아 다 못 담을 때만 iframe 자체 스크롤(scrolling="auto")이 폴백으로 동작.
   ⚠ 기존 .bi-pop-pay--aim(popup.css) 규칙은 그대로 두고 신규 클래스로 분리. */
/* ⚠ 래퍼(.bi-pop-pay--aim)에는 gap 을 주지 말 것 — 자식이 [본문]+[버튼바] 둘뿐이라
   **버튼 아래 흰 여백**으로 나타난다(실측 확인). popup.css:272 에서 해당 gap 규칙을 제거했다.
   본문↔버튼바 간격은 __scroll 의 padding-bottom 으로 준다. */
.bi-pop-pay--aim-fit { height: auto; }

/* 2026-07-31 SMS/LMS 선택 카드 — 팝업 톤 정렬.
   기존 `.bi-msgpop__mode*`(위 419~) 는 designer_chart 본문도 쓰므로 건드리지 않고,
   **팝업 스코프(.bi-pop-pay--aim-fit) 안에서만** 덮는다.
   맞춘 기준: 수신인 카드(.bi-msgpop__recv) 의 radius 14 / 발송 버튼의 --brand-blue.
   기존 --dc-blue-soft 는 alpha .05 라 선택 상태가 거의 안 보였다 → 테두리·틴트·그림자로 강화. */
/* ⚠ 2026-08-28 — SMS·LMS 가 **세로로 쌓여** 있었다.
   `.bi-write-grid-2` 는 1024px 이하에서 1열로 접히는데(본문 화면용 반응형),
   팝업 iframe 은 폭이 423 이라 **언제나** 그 조건에 걸린다. 팝업은 화면 축소가 아니라
   제 폭을 가진 상자이므로 여기서는 2열을 되돌린다. */
.bi-pop-pay--aim-fit .bi-write-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2_5); }
.bi-pop-pay--aim-fit .bi-msgpop__mode {
    position: relative; padding: var(--space-3) var(--space-2_5); gap: var(--space-1_5);
    background: var(--bg-card); border: 1px solid var(--dc-line); border-radius: var(--radius-2xl);
    transition: border-color .12s, background .12s, box-shadow .12s, color .12s;
}
.bi-pop-pay--aim-fit .bi-msgpop__mode i { font-size: var(--fs-md); color: var(--dc-mut); transition: color .12s; }
.bi-pop-pay--aim-fit .bi-msgpop__mode:hover { border-color: var(--brand-blue); background: var(--bg-input); }
/* 선택 상태 — 테두리 + 옅은 틴트 + 인셋 링(1px 이중선 효과) */
.bi-pop-pay--aim-fit .bi-msgpop__mode.is-active {
    border-color: var(--brand-blue); background: color-mix(in srgb, var(--brand-blue) 5%, transparent);
    box-shadow: inset 0 0 0 1px var(--brand-blue), 0 2px 6px color-mix(in srgb, var(--brand-blue) 12%, transparent);
}
.bi-pop-pay--aim-fit .bi-msgpop__mode.is-active i { color: var(--brand-blue); }
/* 선택 체크 — FA5 Pro solid(f00c). 아이콘 폰트는 팝업이 이미 로드(fas fa-paper-plane 등) */
.bi-pop-pay--aim-fit .bi-msgpop__mode.is-active::after {
    content: '\f00c'; font-family: 'Font Awesome 5 Pro'; font-weight: 900;
    position: absolute; top: 7px; right: 9px; font-size: var(--fs-2xs); color: var(--brand-blue);
}
/* 비활성(90바이트 초과 시 SMS) — 점선으로 '선택 불가'를 명시 */
.bi-pop-pay--aim-fit .bi-msgpop__mode.is-disabled {
    opacity: .45; background: var(--bg-input); border-style: dashed; box-shadow: none;
}

/* ── 시술이미지 팝업(popup_layer_img · member·buysell 공용) 본문 — member/style.css 에서 이관,
 *   전부 #popup_layer_img 스코프(전역 누출 차단) · 2026-07-30
 *   ⚠ 무스코프 선택자(.container/.pop_desc/.img-box 등) — 다른 모듈 누출 위험.
 *   Phase 2 에서 .bi-mem-pop-* wrapper 스코프로 격리한다.
 *   (2026-08-07 결함 수정: 위 2줄이 주석 밖으로 나와 CSS 로 파싱되고 있었다) ── */

/* 시술이미지 팝업 */
/* 2026-07-28 스코프 누출 차단: bare .container(Bootstrap 등과 충돌 위험) → 시술이미지 팝업 컨테이너(#popup_layer_img) 하위로 격리. popup_layer_img.php 에서만 사용(확인). */
#popup_layer_img .container {
    max-width: 600px;
    margin: 0 auto;
    padding: var(--space-2_5) var(--space-5);
    position: relative;
}

#popup_layer_img .form-setting {
    padding: 0px;
    margin: 0px;
}

#popup_layer_img .dp-none {
    display: none;
}

#popup_layer_img .cursor {
    cursor: pointer;
}

#popup_layer_img .box-prev {
    position: absolute;
    left: 6px;
    top: -10px;
}

#popup_layer_img .box-next {
    position: absolute;
    right: 6px;
    top: -10px;
}

#popup_layer_img .pop_desc {
    line-height: 40px;
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--space-1_5);
    font-size: var(--fs-md);
    color: var(--txt-muted);
    font-weight: var(--fw-medium);
}

#popup_layer_img .thumbnail-slider-wrapper {
    overflow: hidden;
    position: relative;
    width: 100%;
}

#bx-pager {
    display: flex;
    margin-bottom: var(--space-5);
    transition: transform 0.3s ease;
}

#popup_layer_img .box-nav {
    position: absolute;
    top: 16%;
    left: 0%;
    width: 100%;
    transform: translateY(-50%);
}

#popup_layer_img .box-nav span {
    cursor: pointer;
    font-size: var(--fs-sm);
    font-weight: bold;
    color: var(--bg-card);
    background: var(--gray-300);
    padding: var(--space-1_5) var(--space-2_5);
    border-radius: 50%;
}

#bx-pager .img-box {
    flex: 0 0 calc((100% - 40px) / 5);
    width: calc((100% - 40px) / 5);
    max-width: calc((100% - 40px) / 5);
    height: 100px;
    display: inline-block;
    position: relative;
    border: 1px solid var(--gray-300);
    text-align: center;
    overflow: hidden;
    border-radius: var(--radius-sm);
    margin-right: var(--space-2);
    cursor: pointer;
}

#popup_layer_img .img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#popup_layer_img .img-box .upload-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    cursor: pointer;
    font-size: var(--fs-2xl);
    color: var(--gray-600);
    background-color: var(--gray-50);
    transition: background-color 0.3s;
}

#popup_layer_img .img-box .upload-btn:hover {
    background-color: var(--gray-200);
}

#popup_layer_img .img-box .tag {
    position: absolute;
    top: 5px;
    left: 5px;
    background: color-mix(in srgb, var(--color-indigo-500) 80%, transparent);
    color: var(--bg-card);
    font-size: var(--fs-sm);
    padding: var(--space-0_5) var(--space-1_5);
    border-radius: var(--radius-xs);
    line-height: 15px;
}

#popup_layer_img .img-box .delete {
    position: absolute;
    top: 5px;
    right: 5px;
    background: color-mix(in srgb, var(--color-indigo-500) 80%, transparent);
    color: var(--bg-card);
    font-size: var(--fs-sm);
    padding: var(--space-0_5) var(--space-1_5);
    border-radius: var(--radius-xs);
    cursor: pointer;
    line-height: 15px;
    transition: background-color 0.3s;
}

#popup_layer_img .img-box .delete:hover {
    background: color-mix(in srgb, var(--color-indigo-500) 80%, transparent);
}

#popup_layer_img .slider-container {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    position: relative;
}

/* ul-slider 클래스 추가 - 이미지 너비 깨짐 방지 */
#popup_layer_img .ul-slider {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

#popup_layer_img .ul-slider li {
    /* width: 100%; */
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--gray-50);
    overflow: hidden;
}

/* 기존 slider 스타일 제거하고 ul-slider로 통합 */
#popup_layer_img .slider_img {
    max-height: 400px;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

#popup_layer_img .bx-pager {
    text-align: center;
    margin-top: var(--space-4);
}

#popup_layer_img .bx-pager-link {
    display: block;
    width: 60px;
    height: 60px;
    border: 2px solid var(--gray-300);
    border-radius: var(--radius-sm);
    overflow: hidden;
    transition: border-color 0.3s;
}

#popup_layer_img .bx-pager-link.active {
    border-color: var(--brand-blue);
}

#popup_layer_img .bx-pager-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#popup_layer_img .loading {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: color-mix(in srgb, var(--white) 90%, transparent);
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    z-index: 1000;
}

#popup_layer_img .spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--gray-100);
    border-top: 4px solid var(--brand-blue);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

#popup_layer_img .empty-slider {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 400px;
    background-color: var(--gray-50);
    color: var(--txt-disabled);
    font-size: var(--fs-2lg);
    border: 2px dashed var(--gray-300);
    border-radius: var(--radius-lg);
}

/* ============================================================
   sg2 §38-3 팝업 헤더(컴팩트) · §38-4 리스트형 콘텐츠 — 2026-08-10 확정
   근거: 사용자 확정 — A "컴팩트 + 아이콘(fa-user)" · B-1 "표형·단일선택" · B-4 "카드행형·다중선택"
        (팝업 규격 추천안 검토 → styleguide2 §38 반영)
   ⚠ 기존 .bi-pop-head / .bi-pop-list--member 등은 손대지 않는다(§4 절대규칙).
     신규 modifier·클래스만 추가하고, 실제 팝업 57개 적용은 모듈별 마이그레이션으로 별도 진행.
   ============================================================ */

/* ── 38-4-A. 표형 리스트(정형 다컬럼 · 단일선택) ──
   체크박스 없음. 행 클릭 → 좌측 3px 브랜드블루 바 + 연파랑 하이라이트. */
.bi-pop-tbl-row{
    display: grid; gap: var(--space-2); align-items: center;
    /* ⚠ box-sizing 필수 — 이 파일엔 전역 `* { box-sizing }` 이 없다.
     * 없으면 좌우 패딩 24px 이 폭에 더해져 목록이 넘친다(2026-08-12, 13개 팝업에서 실측). */
    box-sizing: border-box;
    padding: var(--space-2_5) var(--space-3); border-bottom: 1px solid var(--border-light);
    font-size: var(--fs-base); color: var(--txt-primary); cursor: pointer;
}
.bi-pop-tbl-row:last-child{ border-bottom: 0; }
.bi-pop-tbl-row:hover{ background: var(--color-info-50); }
/* 스타일보드 원칙 02 «선택 상태는 indigo 하나로» (2026-08-21 A단계) —
 * 주 액션(--brand-blue)과 **다른 색**이어야 «누를 곳» 과 «고른 것» 이 구분된다.
 * 단일선택 = 좌측 4px 막대 + 옅은 바탕 · 다중선택 = indigo 체크박스. 보드 Don't: 선택 강조에 brand-blue 금지. */
.bi-pop-tbl-row.is-sel{ background: var(--bg-selected); box-shadow: inset 4px 0 0 var(--color-indigo-600); }
/* 팝업 문서 바탕 — iframe 팝업은 **자기 document** 라 페이지 body 규칙이 미치지 않는다.
 * 그래서 14개 팝업이 `<body style='background:#fff'>` 를 각자 달고 있었다(2026-08-11).
 * ⚠ 흰색 리터럴이 아니라 토큰이다 — 카드 배경과 같은 값을 써야 테마가 갈리지 않는다. */

/* 팝업 콘텐츠 좌우 여백 — iframe 팝업은 페이지 셸 밖이라 자기 여백을 스스로 준다.
 * 2026-08-11: 26개 팝업이 이걸 `style="padding: 0px 10px"` 인라인으로 39번 반복하고 있었다. */
/* ⚠ box-sizing 필수 — 이 파일에는 전역 `* { box-sizing }` 이 없다. 안 주면 패딩이
 * 폭에 더해져 부모를 넘친다(slip_2022 에서 599 > 580 으로 실제 발생, 2026-08-11). */
/* 하단 닫기/확인 바 — 본문과 떨어뜨리는 윗여백. 구 `style="padding-top:11px"` 18회. */
/* 팝업 안 블록 사이 간격 — 안내문·구획을 앞 블록과 떼어 놓는다.
 * 구 `style="padding-top:15px"` 이 13개 팝업에서 17번 반복됐다(2026-08-11).
 * ⚠ 이건 **여백 유틸리티가 아니다.** 팝업 블록 간격 하나만을 위한 이름이고,
 *   다른 간격이 필요하면 그때 규격을 다시 본다. 여백 utility 를 열지 않는다. */
/* 명세 행의 항목명 칸 강조 — 결제 팝업이 `color:#4285f4` 리터럴로 쓰던 것.
 * 규격색(--brand-blue)으로 바꾼다. 리터럴은 테마가 갈릴 때 혼자 남는다. */
/* 결제 금액 입력 — 팝업에서 가장 눈에 띄어야 하는 한 칸. 높이는 §21-3 --md(40px)와 같아
 * 그걸 병기하고, **폭과 글자 크기만** 여기서 준다(구 인라인 width:300px·font-size:20px ×4파일). */
/* 구 .bi-pop-pay__amt — §21-3 입력 눈금으로 흡수(2026-08-11) */
/* 결제 팝업의 좁은 셀렉트(할부개월 등) — 구 인라인 font-size:16px;width:120px;height:30px ×3파일 */
/* 구 .bi-pop-pay__sel — §21-3 입력 눈금으로 흡수(2026-08-11) */
/* 필드 묶음 안쪽 여백 — 구 인라인 padding:7px 11px ×5파일 */
.bi-pop-field{ padding: var(--space-1_5) var(--space-3); box-sizing: border-box; }
/* 팝업 검색 입력 — 검색바(.bi-row)에 들어가는 한 칸. 구 인라인 width:250px ×7파일.
 * ⚠ --block(100%)이 아니다. 옆에 검색 버튼·안내문이 서므로 고정폭이 맞다. */
/* ⚠ .bi-msgprev-phone(폰 목업 250px)과 값이 같지만 **다른 것**이다 —
 * 하나는 검색 입력, 하나는 브랜드 자산 목업 폭. 우연 일치라 합치지 않는다. */
/* 구 .bi-pop-search-input(250px) — §21-3 .bi-input--w250 으로 흡수(2026-08-11).
 * ⚠ 이 이름은 7008행에 **다른 의미로 이미 있었다**(카탈로그 검색의 테두리 없는 입력).
 *   모르고 같은 이름을 또 정의해 그 입력의 폭을 250px 로 바꿔 놓고 있었다. */
/* 결제 정보 조회칸 — 읽기전용으로 승인일자·카드사·승인번호를 보여주는 작은 입력.
 * 구 인라인 `height:25px; width:110px; margin-top:4px` ×8회(card·card_cancel 계열). */
/* 구 .bi-pop-input-sm — §21-3 입력 눈금으로 흡수(2026-08-11) */
/* 네이버페이 결제 버튼 — 색은 기존 .bcolor2~5 가 상태별로 준다. 여기서는 **크기와 글자만**.
 * 구 인라인 `height:60px; font-size:14px; color:#FFFFFF` ×10회(npay_btn).
 * 폭은 인라인 %·px 대신 부모 .bi-row 와 .bi-fill 이 나눈다. */
/* 결제 버튼 행 — 한 줄에 1~2개. 버튼이 폭을 **균등하게 나눈다**(구 인라인 49%/32%/230px).
 * 아래 여백은 행이 준다(구 인라인 margin-bottom:10px ×5회). */

/* ── 38-6. 예약 일시 선택기 (2026-08-11) ──
 * 날짜 · 시간 · 담당자를 고정폭 패널로 나란히 놓는 예약 팝업 전용 구조.
 * 구 인라인 `width:280px; height:350px` / `width:280px; height:50%; margin:15px 0`
 * / `width:230px; float:right` 가 bk_datetime 에서 12번 반복됐다.
 * ⚠ float 를 flex 로 바꾸지 않았다 — 이 팝업은 기존에 가로넘침 4건이 있어
 *   배치를 손대면 원인이 섞인다. **규격으로 옮기기만** 하고 넘침은 따로 본다. */
/* 폭은 변수로 — 선택기마다 열 폭이 다르다(bk_datetime 280 · bk_p 150/220/350 · setpoint 430).
 * 값을 인라인으로 흩뿌리는 대신 **정해진 눈금**만 둔다. 새 폭이 필요하면 여기에 추가한다. */
/* 높이가 내용에 맞아야 하는 열 */
/* 구 .bi-pop-picker__col--auto — .bi-pop-pay--aim-fit 와 같아 합침(2026-08-12) */

/* ── 38-7. 예약 선택 패널 (2026-08-11) — booking_renew 팝업 ──
 * 디자이너 가로 스크롤 띠 + 우측 예약정보 패널. 인라인 30건이 이 구조를 그리고 있었다. */
.bi-pop-bk__track    { width: 100%; font-size: var(--fs-base); line-height: 3.2; }
.bi-pop-bk__strip    { display: -webkit-inline-box; overflow-x: hidden; }
.bi-pop-bk__emp-pad  { padding-left: var(--space-6); }   /* 디자이너 띠 항목 좌여백 */

/* ── 팝업 잔여 반복 (2026-08-11) — 한 파일에만 있어도 인라인보다 규격이 낫다 ── */
/* 합계 블록(우측 정렬 · 굵게) — npay·edit_pkg 공통 */
.bi-pop-total{ width: 50%; font-size: var(--fs-md); float: right; padding-top: var(--space-8); font-weight: var(--fw-bold); }
/* 어두운 머리띠 — npay 결과 안내 */

/* 발송 팝업 좌측 수신자 칸(273px) 과 가운데 세로 구분선 */
/* 금액 입력(우측 정렬 고정폭) — prepay */
/* 구 .bi-pop-amt-in — .bi-num-input 과 같아 제거(2026-08-11) */
/* 하단 고정 바 — prepay 처럼 스크롤되는 팝업의 버튼줄 */

/* ── 잔여 반복 2차 (2026-08-11) ── */
/* 선택기 좌우 이동 버튼(40px 세로 막대) — 높이만 두 가지 */
/* 읽기전용 표시 입력(테두리 없이 값만 보여준다) */
/* 구 .bi-pop-readonly-in — §21-3 입력 눈금으로 흡수(2026-08-11) */
/* 우하단에 고정되는 작은 입력 */
/* 아주 작은 숫자 입력(횟수 등) */
/* 구 .bi-pop-tiny-in — §21-3 입력 눈금으로 흡수(2026-08-11) */
/* 구 .bi-pop-date-in — §21-3 입력 눈금으로 흡수(2026-08-11) */
/* 오른쪽 절반 블록 */


/* ── 잔여 반복 3차 (2026-08-11) ── */
/* ⚠ position:relative 하나뿐이라 .bi-dropdown-anchor 등과 선언이 겹친다. **우연 일치다** —
 * 배치 기준점은 컴포넌트마다 따로 잡는 것이라 합치면 의미가 무너진다. */
.bi-pop-pad--rel   { position: relative; }   /* .bi-pop-pad 위에 병기 */
.bi-pop-pad--wide  { padding: 44px var(--space-3); box-sizing: border-box; } /* 넓은 상하 여백 블록 */
.bi-pop-cover{ position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--bg-card); color: var(--txt-primary); box-sizing: border-box; }
.bi-pop-cover .bi-pop-pad{ flex: 1 1 auto; }
/* 구 .bi-pop-amt-wide — §21-3 입력 눈금으로 흡수(2026-08-11) */
/* 구 .bi-pop-count-in — §21-3 입력 눈금으로 흡수(2026-08-11) */
/* 구 .bi-pop-divider — .bi-paypop__divider 와 같아 제거(2026-08-11) */
.bi-pop-selected   { background: var(--color-info-50); }                     /* 선택된 행(구 #e4e4ff) */

/* 표 본문 — 목록이 길어지면 여기서만 스크롤한다. 레거시 팝업이 이걸
 * `style="height:245px; overflow-y:scroll"` 인라인으로 하고 있었다(2026-08-11).
 * ⚠ height 가 아니라 max-height 다 — 결과가 적을 때 빈 공간이 남지 않게. */
.bi-pop-tbl-body{ max-height: 245px; overflow-y: auto; }   /* 본문 밖의 목록도 같은 리셋 */

/* ── 38-4-C. 금액 명세 행 — 항목명 ↔ 금액 (2026-08-11 신설) ──
 * §38-4-B(선택 리스트)와 다르다: **고를 수 없는 내역**이라 hover·cursor 가 없어야 한다.
 * 결제 팝업들이 이 형태를 `float:left; width:40%` / `width:60%` 로 각자 만들고 있었다
 * (npay·card·cash·slip·pay_ref 등 32개 팝업에 float 149건).
 * 위 §38-4 주석이 "불균등이 필요하면 sg2 에 조합 modifier 를 추가한다" 고 정해 둔 그 경우다.
 * 금액칸은 기존 .bi-pop-tbl-cell--amt 를 그대로 쓴다(우측·굵게·자릿수 정렬). */
/* 항목 3열(항목명 · 단가 · 수량) — 전표 명세. 구 float 60%/20%/20% */
/* 굵게만 — 구 인라인 `padding-top:10px; font-weight:bold` 의 padding 은
 * .bi-pop-spec 이 이미 준다(10px). 굵기만 남는다(npay ×7). */
/* 구 .bi-pop-spec--bold — .bi-strong 과 같아 제거. 굵기는 .bi-strong 병기(2026-08-11) */
/* 전표 점선 구분선 — 인쇄 전표의 톱니선. 이미지가 두 종류다(위/아래) */
/* 정보 한 줄 — 라벨 ↔ 값. 구 인라인 `float:left; height:30px; padding-top:4px` +
 * 안쪽 float:left/right 조합(edit_pkg ×4). 높이만 고정하고 배치는 프리미티브가 한다. */
/* 라벨 폭 고정 정보 행 — 라벨이 130px 로 맞춰지고 값이 이어진다.
 * 구 인라인 `height:30px; padding-bottom:12px` + 안쪽 `float:left; width:130px` ×3(npay_ref). */
/* 안내 문단 — 팝업 하단의 여러 줄 주의사항. 구 인라인 `width:93%; line-height:19px; margin-top:0` ×3파일 */
.bi-pop-note{ margin: 0 0 var(--space-4); font-size: var(--pop-cnt-fs); color: var(--txt-muted); line-height: 1.6; }   /* 보드 §08 안내문 (2026-08-26) */

/* ── 38-4-B. 카드행 리스트(다중선택) ──
   행 좌측 체크박스 + 주정보/보조 2줄 + 우측 메타(금액·담당). 상품추가형. */
/* ⚠ 전역 `input[type=checkbox]{visibility:hidden;display:none}`(sprite +label 용) 때문에
   행 안의 native 체크박스가 사라진다 → §17 래퍼(.bi-checkbox-label)와 같은 방식으로 스코프 재활성.
   특이도 0,1,1 > 전역 0,0,1 이라 !important 불필요. */
.bi-pop-tbl-row input[type="checkbox"] {
    visibility: visible; display: inline-block;
    accent-color: var(--color-indigo-600);
    width: 16px; height: 16px; margin: 0; cursor: pointer; flex-shrink: 0;
}

/* ── 38-4 견본용(styleguide2 §38) ──
   styleguide2 는 자체 CSS 를 갖지 않는다 → 견본 클래스도 이 파일에 둔다.
   실제 팝업은 .bi-pop-pay 가 좌우 패딩을 주지만 견본은 셸 없이 그리므로
   본문·푸터가 자기 가로 패딩을 갖는다(.sg2doc-popfoot 의 음수마진 무효화).
   ⚠ 모듈 CSS 는 page_header() 가 common() **뒤에** 로드한다 → 같은 0,1,0 으로는
     styleguide2 쪽 .sg2doc-popbody/.sg2doc-popfoot 에 진다. 부모를 붙여 0,2,0 으로 이긴다. */
.sg2doc-popsample .sg2doc-popbody--list{
    display: flex; flex-direction: column; gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
}
.sg2doc-popsample .sg2doc-popfoot--inset{ margin: 0; padding: var(--space-3) var(--space-5); }

/* =========================================================
   §40-7 위젯 컴포넌트 — 프로모 배너 · 통계 타일 · 단순 표 · 캐러셀 (2026-08-11 편입)
   ---------------------------------------------------------
   출처: main(대시보드)이 bi-dash-* · bi-ai-banner-* · bi-perf-* 세 접두로 갖고 있던 것.
   §40-7 은 "위젯 = 카드+KPI+미니차트 조합, 재발명 금지"라고 정했고 그 조합분(카드·배지·
   아이콘버튼·카드머리·KPI)은 이미 규격 이름으로 회수했다.
   여기 남은 넷은 **조합으로 안 되는 실체**라 규격에 정식 추가한다(원칙 ⓑ):
     .bi-promo      프로모 배너 — 브랜드블루 바탕, 화면당 1개
     .bi-stat*      통계 타일 — KPI 숫자를 담는 선택 가능한 타일(.bi-statgrid 로 배치)
     .bi-simpletbl  단순 표 — 조회·정렬·페이징 없는 읽기전용 소량. 그 외는 §24 그리드
     .bi-carousel   가로 카드 캐러셀
   모듈 접두를 떼고 범용 이름으로 올린다 — reception·designer_chart 도 같은 모양을 갖고 있다.
   ⚠ 규격에 넣은 이상 styleguide2 에 전시해야 한다(QC SPEC-UNSHOWN).
   ========================================================= */
/* 프레임 = 공통 .bi-page (padding·gap·box-sizing:border-box·height 담당). 루트에서 body_all 제거로
   더 이상 padding·box-sizing 보정 불필요. 대시보드 델타 = 전체 세로 스크롤만 (2026-07-31) */
.bi-page.bi-page--scroll {
    overflow-y: auto;
    overflow-x: hidden;
}

/* ============================================================
   대시보드 (AI배너 + 2위젯 + Performance, 2026-06-15)
   토큰: gap-3=12, p-8=32, p-6=24, p-4=16, rounded-2xl=16, rounded-xl=12
         gray-200=var(--border-base), gray-100=var(--border-light), gray-50=var(--bg-input), gray-400=var(--txt-disabled)
         brand navy=var(--brand-navy) blue=var(--brand-blue) purple=var(--brand-purple), green=#00C853
   ============================================================ */

/* ---------- AI 마케팅 상단 배너 ---------- */
.bi-promo {
    position: relative;
    background: var(--brand-blue);                       /* bg-[var(--brand-blue)] */
    border-radius: var(--radius-2xl);                       /* rounded-2xl */
    padding: var(--space-8);                             /* p-8 */
    color: var(--bg-card);
    overflow: hidden;
    flex-shrink: 0;
}

/* ---------- 2 위젯 그리드 ---------- */
.bi-dashgrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);   /* xl:grid-cols-2 */
    gap: var(--space-3);                                /* gap-3 */
}
@media (max-width: 1279px) { .bi-dashgrid { grid-template-columns: 1fr; } }

/* 2026-08-07 §40-10 프리미티브로 대체 — .bi-row: 마크업에 .bi-row 병기 */
/* 2026-08-07 공통 대체 — .bi-erp-title: 선언이 공통 .bi-erp-title 과 동일 → 마크업에 .bi-erp-title 병기 */
/* text-xs font-bold px-2 py-0.5 */
/* bg-blue-50 text-brand-blue */
/* bg-purple-50 text-brand-purple */

/* 스탯 카드 — grid-cols-3 gap-4 mb-6 */
.bi-statgrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);                                 /* gap-4 */
    margin-bottom: var(--space-6);                       /* mb-6 */
}
.bi-stat {
    position: relative;
    display: flex; flex-direction: column;
    padding: var(--space-4);                             /* p-4 */
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);                       /* rounded-xl */
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
}
.bi-stat:hover { border-color: var(--border-base); }
.bi-stat.is-active { border-color: var(--brand-blue);  }

/* 테이블 — text-sm, thead 무배경 text-xs gray-400, td py-4 */

.bi-simpletbl { width: 100%; border-collapse: collapse; font-size: var(--fs-md); text-align: left; }
.bi-simpletbl thead th {
    color: var(--txt-disabled); font-weight: var(--fw-normal); font-size: var(--fs-sm);   /* text-xs text-gray-400 font-normal */
    text-align: left; padding: var(--space-2) 0; border-bottom: 1px solid var(--border-light); white-space: nowrap;
}
.bi-simpletbl tbody td { padding: var(--space-4) 0; border-bottom: 1px solid var(--bg-input); color: var(--txt-muted); }  /* py-4 divide-gray-50 */
.bi-simpletbl tbody tr:last-child td { border-bottom: none; }
.bi-simpletbl tbody tr:hover { background: color-mix(in srgb, var(--bg-input) 50%, transparent); }
/* 구 .bi-simpletbl__r — 규격으로 흡수(2026-08-11) */
/* 보조 셀 — 구 main 의 td-svc / td-desg / td-no 셋이 같은 색 하나였다. 하나로 합친다.
   우측 정렬은 셀 종류가 아니라 배치라서 .bi-simpletbl__r 로 따로 붙인다(§40-11 방식). */
/* 빈 상태 — 구 main 은 40px 과 를 썼다. 는 모듈 CSS 와 싸우려던 흔적이라
   공통으로 올라온 지금은 필요 없고, 40px 은 여백 스케일 밖이라 --space-8(32px)로 스냅한다. */

/* ---------- Performance (디자이너 슬라이더) ---------- */
.bi-carousel {
    background: var(--bg-card);
    border: 1px solid var(--border-base);
    border-radius: var(--radius-2xl);
    padding: var(--space-6);                             /* p-6 */
}

/* 2026-08-07 공통 대체 — .bi-erp-title: 선언이 공통 .bi-erp-title 과 동일 → 마크업에 .bi-erp-title 병기 */
.bi-carousel__viewport { overflow: hidden; }
.bi-carousel__card {
    flex: 0 0 calc((100% - 64px) / 5);         /* 5장 노출, gap 16px*4 */
    box-sizing: border-box;
    border: 1px solid var(--border-light); border-radius: var(--radius-xl); padding: var(--space-5);
    display: flex; flex-direction: column; align-items: center;
    background: var(--bg-card); cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}
.bi-carousel__card:hover { border-color: color-mix(in srgb, var(--brand-blue) 30%, transparent);  }
/* 2026-08-07 SG-RELOCATED 예외(의도적 유지)
   QC 가 공통 .bi-bs-sum-lbl--bold(POS 합계 라벨)와 같은 선언이라 지적하지만 **병합 금지** —
   대시보드 실적 수치와 POS 전표 합계는 무관하다. 굵은 본문 텍스트라 값이 겹쳤을 뿐. */

@media (max-width: 1279px) { .bi-carousel__card { flex-basis: calc((100% - 32px) / 3); } }   /* md:grid-cols-3 */
@media (max-width: 767px)  { .bi-carousel__card { flex-basis: calc((100% - 16px) / 2); } }   /* sm:grid-cols-2 */

/* =========================================================
   §21 보완 — 입력 크기·아이콘 래퍼 변형 (2026-08-11)
   ---------------------------------------------------------
   .bi-input 은 이미 좌측 36px 을 아이콘 자리로 비워두고 있고,
   그 아이콘을 놓는 기준은 .bi-search-wrap/.bi-search-icon 이다.
   검색 말고 다른 폼에서도 같은 조합이 필요해 변형 셋만 채운다(새 컴포넌트 아님).
   ========================================================= */
/* 크기 — 16(표 안 미세 입력) · 25(조회 표시칸) · 30(좁은 셀렉트) · 36(기본)
 *        · 40(터치 대상이 큰 POS) · 46(주 액션 하나뿐인 인증 화면)
 * 2026-08-11: 팝업 정리 중 .bi-pop-input-sm / __sel / -tiny-in / -count-in 처럼
 * **입력 클래스를 팝업마다 새로 만들고 있었다.** 입력은 하나이고 크기는 변형이다(§21-3 원칙).
 * 아래 눈금으로 흡수한다. 새 크기가 필요하면 여기에 추가한다. */
.bi-input--md        { height: 40px; }
/* 폭 눈금 — 고정폭이 의미 있는 자리만(표 열·조회칸·검색). 그 외는 --block 이 맞다. */
.bi-input--w80       { width: 80px; }
.bi-input--w120      { width: 120px; }
/* 테두리 없이 값만 보여주는 표시용 입력(읽기 전용) */
.bi-input--w100      { width: 100px; }
.bi-input--w220      { width: 220px; }

/* 상품 하위항목 표 — 머리와 JS 가 만드는 본문이 **같은 열 폭**을 써야 어긋나지 않는다.
 * 2026-08-11: 머리는 인라인 226/100/116/117px, 본문은 JS 인라인 220px 이었다.
 * 열 폭을 규격 한 곳에 두고 둘 다 여기서 읽는다. */
.bi-input--w70       { width: 70px; }

/* ── 잔여 반복 4차 (2026-08-11) ── */
/* ⚠ 1px 은 간격 눈금 밖이다 — 값을 맞추려는 미세 보정이라 토큰이 없다.
 * 눈금에 1px 을 추가하면 그게 간격처럼 쓰이기 시작한다. 여기만 예외로 둔다. */
/* 전표(접수증) — 인쇄를 흉내내는 좁은 문서. 글자·여백이 화면 규격과 다르다 */
/* 발송 팝업 — 좌(수신자) · 가운데(이동버튼) · 우(폰) 3단 */
/* 강조 — POS 금액칸처럼 값 자체가 주인공인 자리 */
/* 구 .bi-input--strong 2차 정의 — **배경을 더하고 있었다.** 규격에 입력 배경은 없다.
 * 강조가 배경을 바꾸면 강조가 아니라 두 번째 입력이 된다(사용자 지적 2026-08-12).
 * 굵기는 §5-1 의 정의 하나로 충분하다. */
/* 아이콘 자리 넓힘 — 기본 36px 보다 큰 아이콘을 쓸 때 */
.bi-input--icon      { padding-left: var(--space-10); }
/* §12 보완 — 큰 버튼. 인증·확인처럼 화면에 주 액션이 하나뿐인 자리에서 쓴다 */
.bi-btn--lg          { height: 48px; font-size: var(--fs-md); }

/* =========================================================
   §40-13 인증 화면 (2026-08-11 신설)
   ---------------------------------------------------------
   왜 새 절인가: 로그인은 **셸(헤더·사이드) 밖 단독 페이지**다. §40-3 표준 레이아웃
   (.bi-page > 툴바 + 필터 + 목록카드)이 성립하지 않는다 — 툴바도 그리드도 없다.
   기존 규격 어디에도 "뷰포트 한가운데 카드 하나" 형태가 없어 원칙 ⓑ 로 추가한다.

   구성은 전부 기존 규격 조합이다:
     화면  .bi-auth (뷰포트 중앙)  →  .bi-auth__wrap (폭 420)  →  .bi-erp-card (§23)
     입력  .bi-search-wrap.--full + .bi-search-icon + .bi-input.--block.--lg (§21)
     버튼  .bi-btn.bi-btn--primary.bi-btn--block (§12)
     에러  .bi-write-error (§21) · 폼 전역 에러는 .bi-auth__alert
     체크  .bi-checkbox-group / .bi-checkbox-label (§17)
   고유는 "중앙 정렬 + 브랜드 로크업 + 폼 에러 배너" 셋뿐이다.
   ⚠ 구 set_up/style.css 상단 절반은 PNG 스프라이트 체크박스·절대좌표 토글 같은 레거시를
 로 덮어쓰는 코드였다. 마크업에서 옛 클래스를 떼며 통째로 사라졌다.
   ========================================================= */
/* 화면 전체를 차지하는 건 이 클래스가 <body> 에 붙었을 때만이다.
   styleguide2 가 견본을 보여줄 때 100vh 를 먹지 않게 분리해 둔다. */

/* 폼 전역 에러 — 필드를 특정할 수 없는 서버 응답(아이디/PW 불일치 등) */
.bi-write-error.is-show { display: block; }

/* =========================================================
   §28 보완 — 드롭다운 앵커·라벨·구분선 (2026-08-11)
   규격에 목록(.bi-dropdown)과 항목만 있어서 "어디에 붙어 뜨는가"가 없었다.
   ========================================================= */
.bi-dropdown-anchor { position: relative; }

/* =========================================================
   §17-2 선택 타일 (2026-08-11 신설)
   ---------------------------------------------------------
   체크박스를 숨기고 **타일 전체를 누르는** 다중선택. 휴무설정의 디자이너 고르기와
   휴무유형 고르기가 같은 것이었고, 대기상담·디자이너차트의 프리셋도 같은 모양이다.
   상태는 §40-11 규약대로 .is-on 이 아니라 --on 이 아닌 .is-active … 로 통일하지 않고
   기존 JS 훅(.--on)을 유지한다: 마크업이 아니라 JS 가 토글하는 자리라 이름을 바꾸면 끊긴다.
   ========================================================= */
.bi-pickgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: var(--space-2_5); }
.bi-pick {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: var(--space-1_5);
    padding: var(--space-3) var(--space-2);
    border: 1px solid var(--border-base); border-radius: var(--radius-xl);
    background: var(--bg-card); color: var(--txt-muted);
    font-size: var(--fs-sm); font-weight: var(--fw-semibold);
    cursor: pointer; text-align: center; transition: all 0.12s;
}
.bi-pick:hover { border-color: var(--gray-300); background: var(--bg-input); }
.bi-pick i { font-size: var(--fs-lg); }
.bi-pick__cb { display: none; }
/* 타일 안 아바타 — 크기·색은 §30 .bi-avatar 가 준다. 사진이 원 밖으로 나가지 않게만 덧붙인다 */
.bi-pick__nm {
    font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--txt-secondary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.bi-pick--on { border-color: var(--brand-blue); background: var(--color-info-50); box-shadow: 0 0 0 1px var(--brand-blue) inset; }
.bi-pick--on .bi-pick__nm { color: var(--brand-blue); }
.bi-pick--on::after {
    content: "\f00c"; font-family: "Font Awesome 5 Pro"; font-weight: var(--fw-black);
    position: absolute; top: 6px; right: 6px; width: 16px; height: 16px;
    background: var(--brand-blue); color: var(--bg-card); border-radius: var(--radius-full);
    font-size: 8px; display: flex; align-items: center; justify-content: center;
}

/* =========================================================
   §29 안내 박스 (2026-08-11 신설) — 아이콘 + 설명 한 덩어리.
   경고(§26 배지)도 에러(§21)도 아닌 "그냥 알려주는" 회색 박스. 여러 모달이 각자 만들고 있었다.
   ========================================================= */
.bi-note {
    display: flex; align-items: flex-start; gap: var(--space-2);
    background: var(--bg-input); border-radius: var(--radius-lg); padding: var(--space-3);
    font-size: var(--fs-sm); color: var(--txt-muted); line-height: 1.5;
}
.bi-note i { color: var(--txt-disabled); margin-top: var(--space-0_5); flex-shrink: 0; }

/* =========================================================
   §21-2 날짜 내비게이터 (2026-08-11 신설)
   ---------------------------------------------------------
   "◀ [날짜입력] ▶" 한 덩어리. 휴무설정·예약일정표·예약일정표(시간)가 각각
   .bi-dayoff-date-nav / .bi-datenav / .bi-bkt-daynav 로 같은 것을 만들고 있었다.
   가운데 입력은 §21 .bi-input 이 아니라 **테두리 없는 날짜 버튼**이라 별도 규격이 맞다.
   ========================================================= */
.bi-datenav {
    display: flex; align-items: center; flex-shrink: 0;
    border: 1px solid var(--border-base); border-radius: var(--radius-lg);
    background: var(--bg-card); padding: var(--space-0_5); gap: var(--space-0_5);
}
.bi-datenav__btn {
    display: flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: var(--radius-md);
    border: none; background: transparent; color: var(--txt-muted);
    cursor: pointer; font-size: var(--fs-sm); user-select: none;
    transition: background 0.12s, color 0.12s;
}
.bi-datenav__btn:hover { background: var(--border-light); color: var(--txt-secondary); }
.bi-datenav__input {
    width: auto; min-width: 115px; height: 28px;
    border: none; border-radius: 0; background: transparent; box-shadow: none; outline: none;
    padding: 0; text-align: center; cursor: pointer;
    font-weight: var(--fw-bold); font-size: var(--fs-base); color: var(--txt-primary);
}

/* =========================================================
   §40-14 스케줄 매트릭스 (2026-08-11 신설)
   ---------------------------------------------------------
   왜 새 절인가: "열 = 사람 / 행 = 시간" 격자는 §24 그리드(dhx)로도 §40-5 차트로도
   표현되지 않는다. 휴무설정·예약일정표·예약일정표(시간) 세 화면이 각각
   .bi-dayoff-matrix-* / .bi-bk-dhead-* / .bi-bkt-grid-* 로 **같은 것을 세 번** 만들고 있었다.

   구조:
     .bi-schmx                가로 스크롤 판 (열이 inline-block 이라 nowrap)
       .bi-schmx__col           열 하나 = 사람 하나 (184)
       .bi-schmx__col--time     첫 열 = 시간 라벨 (90, 좌측 고정)
         .bi-schmx__head        열 머리 (152, 상단 고정) — 아바타·이름·직책·⋯
         .bi-schmx__row         시간 행 (48)
           .bi-schmx__slot      행 안의 색 블록 (상태별)
             .bi-schmx__count   그 칸의 예약 수

   ⚠ 슬롯 상태를 :has(아이콘)으로 읽는다. 레거시 JS 가 체크박스 아이콘으로 상태를 그리기
     때문이며, CLAUDE.md §7 "input 값 신뢰 ❌ → 렌더된 DOM 에서 상태 파싱"과 같은 이유다.
     JS 를 고쳐 --open/--closed 를 직접 붙이게 되면 이 :has 규칙은 지운다.
   ========================================================= */

.bi-schmx__col {
    display: inline-block; vertical-align: top; width: 184px;
    box-sizing: border-box; border-right: 1px dashed var(--border-light);
}
.bi-schmx__name {
    display: block; font-size: var(--fs-base); font-weight: var(--fw-bold); color: var(--txt-primary);
    line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 172px;
}
.bi-schmx__role {
    display: block; font-size: var(--fs-2xs); font-weight: var(--fw-medium); color: var(--txt-muted);
    line-height: 1.2; margin-top: calc(var(--space-0_5) * -1);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 172px;
}

.bi-schmx__slot {
    height: 100%; border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center; gap: var(--space-1);
    cursor: pointer; transition: all 0.12s; border: 1px solid transparent;
}
.bi-schmx__count { font-size: var(--fs-2xs); font-family: var(--font-mono, monospace); font-weight: var(--fw-bold); margin: 0; line-height: 1; }
.bi-schmx__mark  { display: none; }

/* 열림 */
.bi-schmx__slot:has(i.fa-check-square) {
    background: color-mix(in srgb, var(--brand-blue) 5%, transparent);
    border-color: color-mix(in srgb, var(--brand-blue) 25%, transparent);
}
.bi-schmx__slot:has(i.fa-check-square):hover { background: color-mix(in srgb, var(--brand-blue) 15%, transparent); }
.bi-schmx__slot:has(i.fa-check-square) .bi-schmx__count { color: var(--txt-disabled); }
/* 닫힘(휴무) — X 표시 */
.bi-schmx__slot:has(i.fa-square) { background: var(--border-light); border-color: var(--border-base); }
.bi-schmx__slot:has(i.fa-square):hover { background: var(--gray-200); }
.bi-schmx__slot:has(i.fa-square) .bi-schmx__count { color: var(--txt-disabled); }
.bi-schmx__slot:has(i.fa-square):not(.bi-schmx__slot--booked)::before {
    content: "\f00d"; font-family: "Font Awesome 5 Pro"; font-weight: var(--fw-black);
    font-size: var(--fs-xs); color: var(--txt-disabled); line-height: 1;
}

/* =========================================================
   §26-2 칩 — 고른 값을 되짚어 보여주는 조각 (2026-08-11 신설)
   ---------------------------------------------------------
   "선택된 조건", "적용된 필터"처럼 **고른 값을 나열**하는 조각.
   §26 배지(.bi-badge)는 상태를 알리는 읽기 전용이고, 칩은 **누를 수 있고 지울 수 있다** — 다른 것이다.
   AI 메시지 발송(.bi-aim-filter-chip) · 팝업(.bi-pop-chip) · 대기상담(tag/qchip)이
   각자 만들고 있던 것을 하나로 회수한다.
   ========================================================= */
.bi-chip {
    display: inline-flex; align-items: center;
    padding: var(--space-1_5) var(--space-3);
    border-radius: var(--radius-full);
    background: var(--bg-card); border: 1px solid var(--color-indigo-200);
    color: var(--brand-blue);
    font-size: var(--fs-sm); font-weight: var(--fw-medium);
    cursor: pointer; user-select: none; transition: all .15s;
}
.bi-chip:hover { border-color: var(--brand-blue); }
/* 아직 고르지 않은 후보 — 네모난 태그형. 고르면 .is-selected */
.bi-chip--opt {
    border-radius: var(--radius-lg); border-color: var(--border-base); color: var(--gray-600);
    box-shadow: none; text-align: center; white-space: nowrap;
}
.bi-chip--opt:hover { background: var(--bg-input); border-color: var(--gray-300); }
.bi-chip--opt.is-selected {
    background: var(--brand-blue-light); border-color: var(--brand-blue); color: var(--brand-blue);
}

/* =========================================================
   §26-3 카운트 필 — "선택 12 · 전체 340" (2026-08-11 신설)
   ⚠ §40-7-1 .bi-stat(KPI 타일)과 합치지 않는다. 저건 대시보드 위젯 안의 큰 숫자이고
     이건 표 머리 옆에 붙는 작은 필이다 — 크기도 역할도 다르다.
   ========================================================= */
.bi-countpill {
    display: inline-flex; align-items: center; gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: var(--gray-50); border-radius: var(--radius-2xl);
    font-size: var(--fs-md); font-weight: var(--fw-semibold);
}

/* =========================================================
   §24-2 선택형 데이터 표 (2026-08-11 신설)
   ---------------------------------------------------------
   dhx 그리드(§24)가 아닌 순수 <table> 인데 **체크박스 열 · 행 hover · 행 선택**이 있는 표.
   §40-7-1 .bi-simpletbl(읽기전용 소량)로는 부족해서 별도 규격으로 둔다.
   행 사이를 띄우고 모서리를 둥글리는 "카드형 행" 방식.
   ⚠ 구 ai_marketing 은 "td: nth-child(3)" "tr: hover" 처럼 **콜론 뒤에 공백**이 들어가
     6개 셀렉터가 무효였다(브라우저가 파싱을 포기). 옮기면서 바로잡았다.
   ========================================================= */
.bi-datatbl { width: 100%; border-collapse: separate; border-spacing: 0 8px; }
.bi-datatbl thead th {
    text-align: left; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--txt-muted);
    padding: var(--space-3) var(--space-4); background: var(--bg-input);
    border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light);
    white-space: nowrap;
}
.bi-datatbl tbody tr { transition: background .2s; cursor: pointer; }
.bi-datatbl tbody tr:hover { background: color-mix(in srgb, var(--brand-blue) 5%, transparent); }
.bi-datatbl tbody tr.is-active { background: color-mix(in srgb, var(--brand-blue) 5%, transparent); }
.bi-datatbl tbody td {
    padding: var(--space-1_5) var(--space-4); font-size: var(--fs-md);
    vertical-align: middle; background: var(--gray-50);
}
.bi-datatbl tbody tr td:first-child { text-align: center; border-top-left-radius: var(--radius-xl); border-bottom-left-radius: var(--radius-xl); }
.bi-datatbl tbody tr td:last-child  { border-top-right-radius: var(--radius-xl); border-bottom-right-radius: var(--radius-xl); }
/* 행을 펼쳐 상세를 보여주는 줄 */
.bi-datatbl__more { display: none; }
.bi-datatbl__more.is-shown { display: table-row; }

/* =========================================================
   §40-16 캠페인 발송 화면 (2026-08-11 신설)
   ---------------------------------------------------------
   왜 새 절인가: "조건을 좁혀 대상을 고르고 → 메시지를 만들어 → 보낸다"는 흐름은
   §40-3 표준 목록(툴바+필터+그리드)도 §40-4 예외 레이아웃도 아니다.
   좌측 조건 패널 · 우측 대상 표 · 메시지 미리보기 세 덩어리가 한 화면에 있다.

   안쪽은 전부 기존 규격 조합이다 — 카드 §23 · 버튼 §12 · 체크박스 §17 · 칩 §26-2
   · 카운트 필 §26-3 · 표 §24-2 · 레이아웃 §40-10.
   고유는 **접이식 조건 패널**과 **메시지 미리보기** 둘뿐이다.
   ⚠ 상태 이름은 규격 관례대로 .is-open 을 쓴다(구 .is-collapsed 는 뒤집힌 의미라 헷갈렸다).
   ========================================================= */

/* 접이식 조건 패널 */
.bi-fpanel            { border-radius: var(--radius-lg); overflow: hidden; transition: all .3s; }
.bi-fpanel__title {
    display: flex; align-items: center; cursor: pointer;
    font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--gray-800);
    padding-bottom: var(--space-4); padding-right: var(--space-4);
}
.bi-fpanel__title.is-disabled { cursor: not-allowed; }
.bi-fpanel__title i   { margin-left: var(--space-1); font-size: var(--fs-base); vertical-align: middle; }
.bi-fpanel__body      { display: none; flex-direction: column; gap: var(--space-4); padding: 0 var(--space-5); }
.bi-fpanel__body.is-open { display: flex; }
.bi-fpanel__body.is-disabled { cursor: not-allowed; }

/* 조건 묶음 한 줄 */
.bi-fcat        { transition: border-color .3s; }

/* 메시지 미리보기 — setting_sms 의 폰 목업과 한 쌍(그 배치에서 합류) */
.bi-msgprev--empty     { color: var(--color-danger-600); font-weight: var(--fw-semibold); }

/* §17 보완 — 전역 PNG 체크박스를 끄고 네이티브로 (2026-08-11)
   lib/css/style.css 전역이 "input[type=checkbox]{visibility:hidden;display:none}" + "+label" PNG 박스라,
   네이티브 체크박스를 쓰려는 화면마다 그걸 무력화하는 코드를 각자 갖고 있었다. 규격으로 회수한다.
   ⚠ "+label" 은 PNG 박스 전용이라 숨긴다 — 숨기지 않으면 박스가 두 개로 보인다.
     label 자체는 JS 가 for 재지정에 쓰므로 DOM 에서 빼지 않는다. */

/* §12 보완 — 재생성 계열 액센트(indigo) · 비활성 */
.bi-btn.is-disabled   { opacity: .6; background: var(--gray-200); color: var(--gray-950); cursor: not-allowed; }
.bi-btn--primary.is-disabled { background: var(--txt-disabled); color: var(--bg-card); opacity: 1; }

/* ── 발송대상 체크박스 — styleguide §5 네이티브 체크박스로 통일 (2026-07-23) ──────────
   lib/css/style.css 의 전역 `input[type=checkbox]{visibility:hidden;display:none}` +
   `+label` PNG 박스(checkbox_none.png/checkbox.png)가 적용돼 구형 이미지 체크박스로 보이던 문제.
   전역 규칙을 무력화하고 accent-color 네이티브 체크박스로 표시한다.
   (동일 패턴: lib/css/style.css(구 popup.css) §결제팝업 `.bi-pop-pay .bi-pop-opt input[type=checkbox]`)
   ⚠ `+label` 은 PNG 박스 전용이라 숨긴다 — 숨기지 않으면 박스가 2개로 보인다.
      label 자체는 script.js 의 clone/for 재지정 로직이 참조하므로 DOM 에서 제거하지 않는다. */

/* 2026-08-07 §40-10 프리미티브로 대체 — .bi-datatbl__more-head: 마크업 사용처 0 — 죽은 CSS */

.bi-datatbl__name {
    font-weight: var(--fw-semibold);
}

/* ── 타겟팅 조건 카드 ───────────────────────────── */

/* 카테고리 그리드 */
/* 기본 조건(항상 표시) / 선택칩 / 상세 토글 간격 */
.bi-camp__grid { margin-bottom: var(--space-4); }

/* 기본(빠른) 조건 — 카테고리를 한 줄(가로 일렬)로 나란히 */
.bi-camp__grid {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--space-6);
    overflow-x: auto;
    margin-top: var(--space-4);   /* 타겟팅 조건 설정 헤더와 좌우스크롤 행 사이 간격 */
    padding-top: var(--space-0_5);
}
.bi-camp__grid .bi-fcat {
    display: flex;
    align-items: center;
    gap: var(--space-2_5);
    flex-shrink: 0;
}
.bi-camp__grid .bi-row--wrap {
    flex-wrap: nowrap;
}

/* ── 반응형: 1100px 이하 1단 ───────────────────── */
@media (max-width: 1100px) {

}

/* =========================================================
   §40-17 작업 데스크 (2026-08-11 신설)
   ---------------------------------------------------------
   왜 새 절인가: "왼쪽에서 사람을 고르고 → 가운데서 내용을 채우고 → 오른쪽에서 담아 넘긴다"는
   3열 작업 화면은 §40-3 표준 목록도 §40-4 예외 레이아웃도 아니다.
   Step1 대기/상담(reception)과 Step2 디자이너 차트(designer_chart)가 **같은 구조**라,
   모듈 이름이 아니라 역할 이름(desk)으로 올린다 — B4 에서 Step2 가 그대로 쓴다.

   안쪽은 기존 규격 조합이다 — 카드 §23 · 버튼/세그먼트 §12 · 선택 타일 §17-2 · 배지 §26
   · 칩 §26-2 · 아바타 §30 · 토스트 §32 · 레이아웃 §40-10 · 빈 상태 §14.
   고유는 셋 — 3열 격자(.bi-desk) · 대기 큐 행(.bi-queue) · 장바구니(.bi-basket).
   ⚠ 구 reception 은 --rc-navy 같은 **로컬 토큰 별칭**을 두고 있었다(전역 토큰을 그대로 가리킴).
     이름만 하나 더 만드는 셈이라 전부 전역 토큰으로 되돌렸다.
   ========================================================= */
/* style.css(구 pos_console.css)(공통 스킨)는 function.php 가 filemtime ?v 로 전역 로드 (docs/73) */
/* ===== 토큰 (wrapper 로컬) ===== */
/* 프레임 = 공통 .bi-page (list.php 루트에 bi-page 추가). display/flex/height/box-sizing/padding/gap/background 공통 담당.
   여기선 rc 토큰·폰트·색 + 전체 세로 스크롤(공통 overflow:hidden 델타)만 (2026-07-31) */

/* FA 보호는 위 §.bi-page 스코프 규칙이 이미 한다(.bi-page i.fa/fas/fal/far/fab).
   구 reception 이 갖고 있던 wrap-스코프 사본은 제거 — 같은 일을 두 번 하지 않는다.
   ⚠ 2026-08-11: 이관 중 다중 셀렉터 규칙의 **마지막 줄만** 지워져 선택자 목록이 다음 규칙과
     붙어버린 사고가 있었다(brace 는 균형이라 검출 안 됨). 다중 셀렉터는 통째로 다룬다. */

/* 모달 portal 컨테이너 — body 직속, 상위 stacking context 탈출(오버레이가 사이드까지 전체 덮음).
   레이아웃(height/overflow/padding)은 재선언하지 않는다. */
#reception_portal { font-family: var(--font-sans); }
#reception_portal *, #reception_portal *::before, #reception_portal *::after { box-sizing: border-box; }
#reception_portal i.fa, #reception_portal i.fas, #reception_portal i.far, #reception_portal i.fal { font-family: 'Font Awesome 5 Pro' !important; }
@keyframes bi-pulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }

/* ===== 3컬럼 그리드 ===== */
.bi-desk {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);   /* 패널 간격 공통 16px 통일 (구 12px) (2026-07-31) */
    /* 2026-07-23 Step2(designer_chart) 와 컨텐츠(카드) 높이 통일 — wrap(calc(100vh-64px)) 을 채우도록 height:100%.
       기존 calc(100vh-150px)+min 760px 이라 Step2 보다 짧았음. */
    height: 100%;
    min-height: 0;
    align-items: stretch;
}

/* 과거 방문 이력 라벨 — 14px / font-weight 900 / uppercase / letter-spacing .1em */
#reception_hist_title { font-size: var(--fs-md); font-weight: var(--fw-black); color: var(--txt-disabled); letter-spacing: .1em; }

/* ===== COL1 : 검색 카드 ===== */
/* 탭+검색 영역 — 회색 박스 제거, 흰 배경 + 요소 분리 */
.bi-desk__panel-body { display: flex; flex-direction: column; background: var(--bg-card); flex-shrink: 0; }

/* ===== 목록 / 행 ===== */
.bi-queue__list { flex: 1; overflow-y: auto; }

.bi-queue__row { padding: var(--space-3); cursor: pointer; display: flex; flex-direction: column; gap: var(--space-1_5); border-left: 4px solid transparent; border-bottom: 1px solid var(--border-light); transition: background .15s; }
.bi-queue__row:hover { background: var(--bg-input); }
.bi-queue__row.is-active { background: color-mix(in srgb, var(--brand-blue) 5%, transparent); border-left-color: var(--brand-blue); }
/* 2026-08-07 §40-10 프리미티브로 대체 — .bi-queue__r1: 마크업에 .bi-row-between 병기 */
.bi-queue__name { font-weight: var(--fw-extrabold); color: var(--txt-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--fs-base); }
.bi-queue__row.is-active .bi-queue__name { color: var(--brand-blue); }
.bi-queue__sub { font-size: var(--fs-xs); color: var(--txt-disabled); font-weight: var(--fw-semibold); white-space: nowrap; }
.bi-queue__r2 { display: flex; justify-content: space-between; align-items: center; padding-top: var(--space-1); border-top: 1px dashed var(--border-light); }
.bi-queue__badges { display: flex; flex-wrap: wrap; gap: var(--space-1); align-items: center; min-width: 0; }
/* .bi-queue__emp → 공통 style.css(구 pos_console.css) 그룹 이관 (dchart 동일) (2026-08-03) */
.bi-queue__r3 { display: flex; justify-content: space-between; align-items: center; padding-top: var(--space-1); border-top: 1px dashed var(--border-light); }
.bi-queue__chart { font-size: var(--fs-xs); color: var(--txt-disabled); font-family: monospace; font-weight: var(--fw-semibold); }


/* tone 매핑 */

.bi-desk__sec { padding-top: var(--space-3); border-top: 1px dashed var(--gray-100); display: flex; flex-direction: column; gap: var(--space-2); }
/* 2026-08-07 §40-10 프리미티브로 대체 — .bi-write-card__header: 마크업에 .bi-row-between 병기 */

/* ===== COL2 : 방문이력 / 상담 ===== */
/* ⚠ 한 이름에 규격이 둘이었다 — COL1(스크롤·여백 14)과 COL2(여백 0·hidden)가 같은 이름을 써서
 *   뒤엣것이 이기고 COL1 패널(#reception_guide)이 **잘려** 있었다(안 313 > 칸 293, 2026-08-14).
 *   규격은 하나다 — 여백 0 은 그대로 두고, 넘치면 **잘리지 말고 스크롤**하게 한다. */
.bi-desk__panel-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 0; padding: 0; overflow-y: auto; }

/* 2026-08-07 §40-10 프리미티브로 대체 — .bi-write-card__header: 마크업에 .bi-row-between 병기 */
/* height: 전역 textarea{height:25px}(style.css:377) 무력화 — rows=4 / text-sm / leading-relaxed 기준 4행 높이 */

/* ===== COL3 : 선택판 ===== */
/* 캡슐형 세그먼트 — 트랙(컨테이너)을 흰 카드보다 한 단계 어둡게(gray-200) → 비활성 탭이 회색 버튼으로 보임 */
/* 간격: 트랙 p-0.5(2px) + gap-1(4px) + rounded-lg(8px), 버튼 py-1.5(6px) + rounded-md(6px) */
/* 배치만 — 룩은 공통 .bi-segment--fill */
.bi-desk__rpanel { flex: 1; overflow-y: auto; padding: var(--space-4); background: color-mix(in srgb, var(--bg-input) 40%, transparent); display: flex; flex-direction: column; gap: var(--space-2); min-height: 0; }

.bi-pick__l p { font-weight: var(--fw-extrabold); color: var(--txt-primary); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--fs-base); }
.bi-pick__l span { font-size: var(--fs-xs); color: var(--txt-disabled); font-family: monospace; font-weight: var(--fw-bold); text-transform: uppercase; }
.bi-pick__r i { color: var(--brand-blue); }

/* 보유 패키지/선불권 탭: 두 섹션(선불권·패키지 정보) 공통 구조 — subtitle 라벨 + 내용 카드 */
/* 2026-08-07 §40-10: .bi-desk__membersec — 마크업에 .bi-col 병기 */
/* 보유 선불권별 목록 */
.bi-desk__ticket-exp { font-size: var(--fs-xs); background: var(--color-indigo-50); color: var(--color-indigo-700); border: 1px solid var(--color-indigo-100); padding: var(--space-0_5) var(--space-1_5); border-radius: var(--radius-sm); font-family: monospace; display: inline-block; margin-bottom: var(--space-1); font-weight: var(--fw-bold); }
.bi-desk__ticket-btn:hover { background: var(--gray-900); }

/* ===== 바스켓 / 접수 ===== */
.bi-basket__area { padding: var(--space-4); background: color-mix(in srgb, var(--color-indigo-50) 20%, transparent); border-top: 1px solid var(--color-indigo-100); display: flex; flex-direction: column; gap: var(--space-3); flex-shrink: 0; }
.bi-basket__head { display: flex; justify-content: space-between; align-items: center; padding-bottom: var(--space-1); border-bottom: 1px solid var(--color-indigo-50); }
.bi-basket__total { font-size: var(--fs-lg); font-weight: var(--fw-extrabold); color: var(--color-indigo-800); }
.bi-basket { display: flex; flex-direction: column; gap: var(--space-1_5); max-height: 140px; overflow-y: auto; padding-right: var(--space-1); }
.bi-basket__empty { padding: var(--space-4); text-align: center; font-size: var(--fs-base); color: var(--txt-disabled); font-weight: var(--fw-bold); font-style: italic; }
.bi-basket__row { display: flex; justify-content: space-between; align-items: center; background: var(--bg-card); border: 1px solid var(--color-indigo-100); padding: var(--space-2); border-radius: var(--radius-xl);  }
.bi-basket__row p { font-weight: var(--fw-bold); color: var(--gray-800); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: var(--space-2); font-size: var(--fs-base); }
/* 2026-08-07 §40-10: .bi-basket__row-r — 마크업에 .bi-row .bi-row--shrink-0 병기 */
/* 높이를 안 정하면 padding+아이콘이 높이를 만든다(24px) — 사다리 xs 22 로 고정(§12-4, 2026-08-14) */
.bi-basket__del { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; color: var(--txt-disabled); cursor: pointer; padding: 0; border-radius: var(--radius-lg); }
.bi-basket__del:hover { color: var(--color-rose-500); background: var(--border-light); }

/* ===== 접수 완료 배너 ===== */
/* 2026-07-23 빈 배너가 wrap 의 flex-gap(12px) 슬롯을 차지해 그리드가 12px 밀려내려가던 문제 — 비었을 때 숨김(헤더~카드 간격을 buysell 등과 동일하게) */
#reception_banner:empty { display: none; }
/* 2026-08-07 §40-10: .bi-deskbar__txt — 마크업에 .bi-col .bi-col--gap-6 병기 */

/* ===== 반응형 (1280 / 1024) ===== */
@media (max-width: 1280px) {

    .bi-desk { gap: var(--space-2_5); height: calc(100vh - 140px); }

}
@media (max-width: 1024px) {
    .bi-desk { min-height: 700px; }
    .bi-queue__name { font-size: var(--fs-sm); }
    .bi-pick__l p { font-size: var(--fs-sm); }
}

/* =========================================================
   §40-17-1 차팅 데스크 부속 — 갤러리 · 라이트박스 · 시술 타임라인 (2026-08-11)
   ---------------------------------------------------------
   Step2 디자이너 차트(designer_chart)를 §40-17 작업 데스크에 합류시키며 남은 것.
   모듈 CSS 주석이 스스로 "reception 동일 패턴"이라 적고 있었고 실제로 대기 큐·장바구니
   ·프리셋·티켓·회원섹션이 선언까지 같았다 → 한 벌만 남기고 나머지는 지웠다.
   여기 남은 셋은 Step2 에만 있는 것이라 데스크 부속으로 올린다.
   ⚠ 구 designer_chart 도 --dc-navy 같은 로컬 토큰 별칭을 두고 있었다(reception 의 --rc-* 와 같은 문제).
     전부 전역 토큰으로 되돌렸다.
   ========================================================= */
/* style.css(구 pos_console.css)(공통 스킨)는 function.php 가 filemtime ?v 로 전역 로드 (docs/73) */

.bi-page--scroll i.fa, .bi-page--scroll i.fas, .bi-page--scroll i.far, .bi-page--scroll i.fal {
    font-family: 'Font Awesome 5 Pro'; font-weight: var(--fw-black);
}

/* ===== 그리드 3컬럼 ===== */

/* ⚠ .bi-desk__col 도 정의가 둘이었다(게다가 셀렉터가 제 이름을 두 번 썼다).
 *   뒤엣것이 gap·height 를 지우고 overflow:hidden 을 줘서, designer_chart 3열의 내용이
 *   **잘려 닿을 수 없었다**(안 1185 > 칸 749, 2026-08-14). 하나로 합치고 넘치면 스크롤한다.
 *   테두리·둥글기는 셸 안에서 §40-2 규칙이 다시 걷어낸다(상자 안 상자 금지). */
.bi-desk__col { display: flex; flex-direction: column; gap: var(--space-3); height: 100%; min-height: 0; background: var(--bg-card); border: 1px solid var(--border-base); border-radius: var(--radius-xl); overflow-y: auto; }

/* 2026-08-07 §40-10 프리미티브로 대체 — .bi-row-between: 마크업에 .bi-row-between 병기 */

/* 색/모양 = 공통 .bi-badge--success/--warning/--info/--neutral (JS 지정). 델타: 줄어들지 않게 + 원래 폰트크기 (2026-07-31) */

.bi-queue__r2, .bi-queue__r3 { display: flex; justify-content: space-between; align-items: center; gap: var(--space-1_5); padding-top: var(--space-1); border-top: 1px dashed var(--gray-100); }

/* 재방주기 박스 → 공용 .bi-cyclebox/.bi-write-grid-2 (style.css(구 pos_console.css)) 통합, JS 도 사용(2026-07-31). */

@keyframes sdpDchartPulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }/* .bi-row → 공통 style.css(구 pos_console.css) 그룹 이관 (reception charting 동일) (2026-08-03) */
.bi-desk__chart-title i { color: var(--brand-blue); margin-right: var(--space-0_5); }

/* ===== Col2 Left: 기록 ===== */
/* 2026-08-07 §40-10 프리미티브로 대체 — .bi-desk__field: 마크업에 .bi-col .bi-col--gap-5 병기 */
/* 2026-08-07 §40-10: .bi-dot — 마크업에 공통 .bi-dot 병기 */
/* ⚠️ 전역 textarea{height:25px} 차단 */

/* 2026-08-07 §40-10 프리미티브로 대체 — .bi-gallery__head: 마크업에 .bi-row-between 병기 */
/* 2026-08-07 §40-10 프리미티브로 대체 — .bi-gallery__boxhead: 마크업에 .bi-row-between 병기 */
.bi-gallery__thumb { position: relative; aspect-ratio: 1/1; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border-base); background: var(--bg-card); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.bi-gallery__thumb:hover {  }
.bi-gallery__del { position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--black) 60%, transparent); color: var(--bg-card); font-size: var(--fs-2xs); line-height: 1; display: none; align-items: center; justify-content: center; cursor: pointer; }
.bi-gallery__thumb:hover .bi-gallery__del { display: inline-flex; }
.bi-gallery__del:hover { background: var(--color-danger-600); }
/* 2026-08-07 §40-10: .bi-gallery__thumb img — 마크업에 공통 .bi-img-cover 부여 */

/* ===== Col2 Right: 타임라인 ===== */
.bi-timeline__tl { position: relative; padding-left: var(--space-5); cursor: pointer; }

/* 상위/하위 2단 분류 스킨(rpanel__lbl·presetgrp·maintabs·maintab·subgrp·cats·catbtn·cats__empty·presetlist) → lib/css/style.css(구 pos_console.css) 통합(reception 공통) */
/* 과거 전표 클릭 시 이동 대상 카드/티켓 강조(약 1.6초) */
/* 프리셋 카드 — reception 컴팩트 톤(좌:상품명+카테고리 / 우:가격+아이콘). 선택 시 ✓ 표시 */

.bi-pick__r i { font-size: var(--fs-sm); }

/* 보유 패키지/선불권 탭: 두 섹션(선불권·패키지) 공통 — rpanel__lbl 라벨 + 카드 목록 (reception 동일 패턴) */

.bi-desk__ticket-exp { font-size: var(--fs-xs); padding: var(--space-0_5) var(--space-1_5); border-radius: var(--radius-sm); border: 1px solid color-mix(in srgb, var(--brand-blue) 20%, transparent); background: color-mix(in srgb, var(--brand-blue) 5%, transparent); color: var(--brand-blue); font-weight: var(--fw-bold); }
/* 2026-08-07 SG-RELOCATED 예외(의도적 유지)
   QC 가 공통 .bi-counter-catbadge.is-retail 과 같은 선언이라 지적하지만 **병합 금지** —
   '만료임박 경고'와 '소매 분류 배지'는 역할이 다르다. rose 색 조합이 우연히 같을 뿐. */
.bi-desk__ticket-exp.is-crit { background: var(--color-rose-50); color: var(--color-rose-600); border-color: var(--color-rose-200); }
.bi-desk__ticket-exp.is-done { background: var(--color-danger-100); color: var(--color-danger-600); border-color: var(--color-danger-200); font-weight: var(--fw-black); }
/* 티켓 진행바 fill 기본 → 공용 그룹(style.css(구 pos_console.css)). is-crit 상태만 dchart 유지 */
.bi-desk__ticket-bar > div.is-crit { background: var(--color-danger); }
.bi-desk__ticket-btn:hover { background: var(--brand-blue-hover); }
.bi-desk__ticket-btn:disabled { background: var(--border-light); color: var(--txt-muted); cursor: not-allowed; }

/* 결제 모달 */
/*   (팝업 CSS 는 style.css(구 popup.css) 로 일원화 — styleguide2 §38). 나머지 .bi-paypop__* 는 여기 유지. */
/* 바스켓 수량 스텝퍼 (하이브리드: 프리셋 클릭 +1, 여기서 ± 직접 조정) */
/* 수량 스테퍼 */
.bi-basket__qbtn { width: 22px; height: 22px;   /* §12-4 사다리 xs 22 */ line-height: 1; padding: 0; border: 1px solid transparent; background: transparent; color: var(--txt-secondary); border-radius: var(--radius-md); font-size: var(--fs-sm); font-weight: var(--fw-black); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .12s, color .12s, border-color .12s; }
.bi-basket__qbtn:hover { background: var(--bg-card); color: var(--gray-800); border-color: color-mix(in srgb, var(--border-base) 50%, transparent);  }
/* 카운트 = 키보드 직접수정 input(유지). 평소엔 보더 없이 mono 텍스트처럼, 포커스 시에만 보더 */
input[type="text"].bi-basket__qn { width: 26px; height: 20px; text-align: center; font-size: var(--fs-xs); font-weight: var(--fw-black); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; color: var(--gray-950); border: 1px solid transparent; border-radius: var(--radius-md); padding: 0 var(--space-0_5); box-sizing: border-box; outline: none; background: transparent; }
input[type="text"].bi-basket__qn:focus { border-color: var(--brand-blue); background: var(--bg-card); }

/* ===== 반응형 ===== */

@media (max-width: 1280px) {
    .bi-desk__chart-title { font-size: var(--fs-base); }
}
@media (max-width: 1024px) {

}

/* 카탈로그 모달 portal 컨테이너 — body 직속, 상위 stacking context 탈출용(미디어쿼리 사이드메뉴 가림 방지).
   wrap-스코프 의존(변수·폰트·FA)만 재선언, height/overflow/padding 은 제외(레이아웃 영향 0) */
#dchart_portal {
      
}
#dchart_portal i.fa, #dchart_portal i.fas, #dchart_portal i.far, #dchart_portal i.fal {
    font-family: 'Font Awesome 5 Pro'; font-weight: var(--fw-black);
}

/* =========================================================
   §40-18 미니 캘린더 · §40-19 예약 카드와 상태 (2026-08-11 신설)
   ---------------------------------------------------------
   예약일정표(booking_renew)와 예약일정표(시간)(booking_time)이 **같은 캘린더·같은 예약 카드**를
   각각 bi-bk-cal-* / bi-bt-cal-* 로 만들고 있었다. 역할 이름으로 한 벌만 남긴다.

   .bi-cal*      좌측 사이드의 월 달력(28px 칸 · 일/토 색 · 예약 있는 날 점)
   .bi-resv*     시간표 위에 얹히는 예약 블록. 상태 6종은 §3 상태색을 쓴다
                  (요청·확정·체크인·완료·취소·블록). **색만으로 구분하지 않는다** —
                  좌측 점(.bi-resv-dot--*)과 범례 스위치(.bi-resv-sw--*)가 함께 붙는다.
   .bi-bksplit*  좌(사이드) + 우(시간표) 2단 프레임. 시간표 자체는 §40-14 스케줄 매트릭스.
   ⚠ 새 색을 만들지 않는다. 상태색은 §3 팔레트에서 고른다.
   ========================================================= */
/* 둥근 아이콘 버튼(등록 +) — §12 .bi-btn--icon 에 라운드만 얹는다 */
/* 예약 상태 6종 중 취소·범례 힌트·시간표 본문 — 마크업만 있고 규격에 빠져 있던 조각 */
/* 검색어 지우기 × — §21 .bi-search-wrap 안 우측 */
/* ── 페이지 컨테이너 ─────────────────────────────────────────────── */

/* ── 상단 서브바 — booking_renew 와 동일(bi-bk-subbar / bi-bk-legend) ── */

@media (max-width: 1280px) { .bi-page .bi-bk-legend--subbar { gap: var(--space-2_5); } .bi-page .bi-bk-legend--subbar .bi-bk-legend-item { font-size: var(--fs-2xs); } }

/* ── 본문 레이아웃 ───────────────────────────────────────────────── */
.bi-bksplit { flex: 1; display: flex; gap: var(--space-4); min-height: 0; }
/* 우측열 = 공통 .bi-bk-rightcol(style.css(구 booking_schedule.css), booking_renew 와 공유). booking_time 은 본문 높이 채우고 넘치면 내부 스크롤(booking_renew 는 JS 로 height 지정) (2026-07-31) */
.bi-bksplit > .bi-bk-rightcol { align-self: stretch; overflow-y: auto; overflow-x: hidden; padding-right: var(--space-0_5); }

/* ── 좌 1B: 캘린더 ─────────────────────────────────────────────── */
.bi-cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
.bi-cal__label { font-size: var(--fs-xs); font-weight: var(--fw-black); letter-spacing: .06em; color: var(--txt-disabled); }
/* §29-2 칩 = 28. 실측 18 이라 캘린더 헤더(46) 안에서 혼자 작았다(2026-08-21). */
.bi-cal__today { box-sizing: border-box; height: 28px; display: inline-flex; align-items: center; font-size: var(--fs-2xs); font-weight: var(--fw-extrabold); color: var(--brand-blue, var(--brand-blue)); background: var(--color-info-50); border: 1px solid var(--color-info-100); border-radius: var(--radius-lg); padding: 0 var(--space-2); cursor: pointer; }
.bi-cal__today:hover { background: var(--color-indigo-100); }
.bi-cal__nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2_5); padding: 0 var(--space-1); }
.bi-cal__navbtn { border: none; background: none; color: var(--txt-disabled); cursor: pointer; padding: var(--space-1); border-radius: var(--radius-lg); font-size: var(--fs-base); }
.bi-cal__navbtn:hover { background: var(--border-light); color: var(--txt-secondary); }
.bi-cal__title { font-size: var(--fs-sm); font-weight: var(--fw-black); color: var(--gray-800); }
.bi-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--space-1); }
.bi-cal__day {
    position: relative; height: 28px; border: none; background: none; border-radius: var(--radius-lg);
    font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--txt-secondary); cursor: pointer;
    display: flex; align-items: center; justify-content: center; transition: all .12s;
}
.bi-cal__day:hover { background: var(--border-light); }.bi-cal__day.is-sel { background: var(--brand-blue, var(--brand-blue)); color: var(--bg-card); font-weight: var(--fw-extrabold);  }

/* 2026-08-07 §40-10 프리미티브로 대체 — .bi-bt-main-head-left: 마크업에 .bi-row .bi-row--gap-12 병기 */
/* 2026-08-07 §40-10 프리미티브로 대체 — .bi-bt-daynav: 마크업에 .bi-row 병기 */

.bi-datenav__input { min-width: 90px; text-align: center; font-size: var(--fs-sm); font-weight: var(--fw-black); color: var(--gray-800); background: var(--bg-input); border: 1px solid var(--gray-100); border-radius: var(--radius-lg); padding: var(--space-1) var(--space-2_5); }

/* ── 타임라인 그리드 (디자이너 행 세로 × 시간 열 가로) ───────────────
   열 고정폭: 디자이너 150px + 시간 104px (script.js BT_DNAME_W/BT_COL_W 와 일치) */

.bi-schmx__thcell { flex: 0 0 104px; width: 104px; display: flex; align-items: center; justify-content: center; border-right: 1px solid var(--gray-100); border-bottom: 1px solid var(--gray-100); font-family: ui-monospace, monospace; font-size: var(--fs-xs); font-weight: var(--fw-extrabold); color: var(--txt-muted); background: color-mix(in srgb, var(--bg-input) 50%, transparent); }

.bi-schmx__name { font-size: var(--fs-sm); font-weight: var(--fw-black); color: var(--txt-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bi-schmx__role { font-size: var(--fs-2xs); font-weight: var(--fw-bold); color: var(--txt-disabled); margin-top: var(--space-0_5); }

/* 빈 슬롯 (클릭 시 신규 등록 팝업) — booking_renew 일간처럼 '+' 항상 흐리게, hover 시 '예약 추가' */
.bi-schmx__slot--free { flex: 1; min-height: 44px; width: 100%; border: 1px dashed var(--border-base); border-radius: var(--radius-lg); background: var(--bg-card); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: var(--space-1); font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--gray-300); transition: background .12s, border-color .12s, color .12s; }
/* 2026-08-07 SG-RELOCATED 예외(의도적 유지)
   QC 가 공통 .hbar-search:hover 와 같은 선언이라 지적하지만 **병합 금지** — 헤더 검색버튼과
   캘린더 빈 슬롯은 무관한 컴포넌트다. 값(회색 hover)이 같을 뿐 한쪽이 바뀌면 다른 쪽도 끌려간다. */
.bi-schmx__slot--free:hover { background: var(--border-light); border-color: var(--gray-300); color: var(--txt-muted); }

/* ── 예약 카드 (셀 내 세로 스택) ─────────────────────────────────── */
.bi-resv { display: block; width: 100%; border-radius: var(--radius-xl); padding: var(--space-2); cursor: pointer; overflow: hidden;  transition: box-shadow .15s, transform .1s; text-align: left; }
.bi-resv:hover {  }
.bi-resv:active { transform: scale(.98); }
.bi-resv.is-sel {  }
/* 구 .bi-resv__top — 배치를 §40-10 으로 옮기자 margin 하나만 남았고 사용처가 0이 됐다(2026-08-11) */
/* 2026-08-07 §40-10 프리미티브로 대체 — .bi-bt-card-tl: 마크업에 .bi-row .bi-row--gap-4 병기 */

/* 상태 뱃지 (카드/상세 공통) */
.bi-resv-dot { font-size: var(--fs-2xs); font-weight: var(--fw-black); padding: var(--space-0_5) var(--space-1_5); border-radius: var(--radius-sm); border: 1px solid transparent; }

/* ── 모달 공통 ───────────────────────────────────────────────────── */
/* 예약상세 모달 = 공용 .bi-modal-ov/.bi-modal/.bi-modal--sm/.bi-modal__body 사용(2026-07-31).
   bt 전용: 상세 body 는 bi-bki 가 자체 padding(16px) 제공 → 이중 패딩 방지(공용 __body padding 무력화) */
#bt_detail_body { padding: 0; }

/* ── 반응형: 1280 이하 좌패널 축소, 1024 세로 분리 ─────────────── */
@media (max-width: 1280px) {
    .bi-schmx__thcell { flex-basis: 96px; width: 96px; }
    .bi-bksplit > .bi-bk-rightcol, .bi-bksplit > .bi-bk-rightcol .bi-bk-info-panel { width: 300px; }
}
@media (max-width: 1024px) {
    .bi-bksplit { flex-direction: column; }
    .bi-bksplit > .bi-bk-rightcol, .bi-bksplit > .bi-bk-rightcol .bi-bk-info-panel { width: 100%; align-self: auto; overflow: visible; }
}

/* =========================================================
   §40-18-1 주·월 보기 · 예약 화면 사이드 (2026-08-11)
   ---------------------------------------------------------
   예약일정표(booking_renew)를 §40-18 캘린더 · §40-19 예약 카드 · §40-14 매트릭스에
   합류시키고 남은 것. 이 화면에만 있는 **주 단위 행 선택**(.bi-cal__wrow)과
   **월 그리드**(.bi-cal__mgrid), 그리고 좌측 사이드의 필터 행이다.
   ⚠ 상태 배지 번호(구 .bi-bk-badge1~6)는 §40-19 상태 이름으로 바꿨다 —
     숫자는 무엇을 뜻하는지 코드를 읽어야 알 수 있었다.
   ========================================================= */
/* 월간 캘린더 요일 머리줄 — 2026-08-14 규격 신설.
 * 사용자: "예약일정표 월간일때 날짜 캘린더 깨저 규격이 빠진거같아"
 * 실제로 **CSS 가 하나도 없었다.** JS 가 만들고(#div_top_yoil), 스크롤할 때만 position:fixed 를
 * 걸어 두는 식이라 머리줄이 제자리를 잃고 첫 주 날짜가 위로 잘려 나갔다(실측 top -137, 머리줄 222).
 * 규격으로 정한다 — 그리드 위에 붙는 머리줄(sticky) · 흰 바탕 · 아래 구분선.
 * ⚠ 머리칸은 날짜칸(170px)과 같은 이름을 쓰므로 높이·아래선을 여기서 되돌린다. */
.bi-page #div_top_yoil {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-base);
  font-size: 0;                      /* inline-block 칸 사이 공백 제거 */
}
.bi-page #div_top_yoil .bi-bk-calendar--month {
  height: auto;
  border-bottom: 0;
  text-align: center;
}

.bi-page .bi-bk-calendar--month {
  display: inline-block;
  vertical-align: bottom;
  width: calc(100% / 7);
  /*height: calc(98% / 5);*/
  height: 170px;
  box-sizing: border-box;
  /*border-radius: 5px;*/
  border-right: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
  padding: var(--space-1);
}

.bi-page .bi-bk-calendar--week {
  display: inline-block;
  vertical-align: bottom;
  width: calc((100% - 82px) / 7);
  /*height: calc(98% / 5);*/
  /*height: 170px;*/
  box-sizing: border-box;
  /*border-radius: 5px;*/
  border-right: 1px solid var(--gray-200);
  border-top: none;
  padding: 0px;
}

.bi-page .bi-bk-calendar--days {
  display: inline-block;
  vertical-align: bottom;
  /*width: 140px;*/
  /* 적으면 채우고(calc), 많으면 220px 고정 후 가로 스크롤(min-width). 시간열은 :first-child 에서 80px 로 리셋 */
  width: calc((100% - 82px) / var(--dcols, 8));
  min-width: 220px;
  max-width: 400px;          /* 1~2명일 때 과도하게 넓어지지 않도록 */
  white-space: normal;       /* #calendar_days nowrap 상속 해제(내용은 정상 줄바꿈) */
  /*height: calc(98% / 5);*/
  /*height: 170px;*/
  box-sizing: border-box;
  /*border-radius: 5px;*/
  /*border-left: 1px solid var(--gray-200);*/
  border-right: 1px solid var(--gray-200);
  border-top: none;
  padding: 0px;
}

#div_type{
    overflow-y: auto;
    overflow-x: auto;       /* 디자이너 열이 많으면 가로 스크롤 */
    cursor: grab;           /* 마우스 드래그 패닝 */
    scrollbar-width: thin;                      /* Firefox */
    scrollbar-color: var(--gray-300) transparent;
}

.bi-page .bi-bk-ht45{
    height: 45px;
    font-size: var(--fs-lg);
    padding: var(--space-1) var(--space-3);
    line-height: 2.4;
    font-weight: var(--fw-bold);
    background: white;
}
.bi-page .bi-bk-ht45-line{
    height: 45px;
    /*line-height: 2.8;*/
    display: flex;
    align-items: center;
    text-align: center;
    background: white;
    border-bottom: 1px solid var(--gray-200);
    /*width:138px;*/
}

.bi-page .bi-bk-txt-center{
    text-align: center;
    /*width:139px;*/
    /*border-right: 1px solid var(--gray-200);*/
}

.bi-page .bi-bk-inner{
    border-radius: var(--radius-xs);
    height: 22px;
    background: var(--color-info-600);
    text-align: left;
    padding: var(--space-1) var(--space-2);
    color: white;
    line-height: 2;
    margin-bottom: 0;
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    cursor: pointer;
    text-align-last: justify;
}

.bi-page .bi-bk-sp17{
    font-size: var(--fs-lg);
    padding: var(--space-1) var(--space-3);
    font-weight: var(--fw-bold);
    color: var(--gray-500);
}

.bi-page .bi-bk-calendar--week .bi-bk-sp17{
    color: var(--gray-500);
    font-weight: var(--fw-bold);
}

.bi-page .bi-bk-sp14{
    font-size: var(--fs-md);
    padding: var(--space-1) var(--space-2_5);
    font-weight: var(--fw-normal);
    color: var(--gray-700);
    width: 100%;
}

.bi-page .bi-bk-today{
    background: var(--color-npay);
    border-radius: var(--radius-2xl);
    color: white;
}

.bi-page .bi-bk-div5{
    margin-bottom: var(--space-1_5);
    margin-top: var(--space-1_5);
}

.bi-page .bi-bk-emp-active{
    border-bottom: 3px solid var(--brand-blue);
    color: var(--brand-blue);
    padding-bottom: var(--space-1);
}

.bi-page .bi-bk-number-grey{
    color: var(--gray-400);
}

.bi-page .bi-bk-btn-status{
    padding: var(--space-3_5) var(--space-3);
    text-align-last: center;
}

.bi-page .bi-bk-commend{
    /*padding:5px;*/
    /*background: var(--brand-blue);*/
    color: white;
    border-radius: var(--radius-xs);
    line-height: 0.8;
    font-size: var(--fs-base);
    cursor: pointer;
    width: 27px;
}
.bi-page .bi-bk-slot180{
    /* 고정 높이 — 좌측 시간열과 디자이너 열의 행 정렬(디자인 단일 시간축) */
    height: 84px;
    font-size: var(--fs-2xs);
    /*color:var(--gray-400);*/
    text-align: center;
    border-bottom: 1px solid var(--gray-200);
    padding: var(--space-1);
}
.bi-page .bi-bk-time-color{
    color: var(--gray-400);
}
.bi-page .bi-bk-mg10{
    margin-top: var(--space-2_5);
}

.bi-page .act_date{
    border-color: var(--brand-blue);
    color: var(--bg-card);
    cursor: pointer;
    background-image: -webkit-linear-gradient(top, var(--brand-blue), var(--brand-blue));
    background-color: var(--brand-blue);
}
.bi-page .act_status{
    border-color: var(--brand-blue);
    color: var(--bg-card);
    cursor: pointer;
    background-image: -webkit-linear-gradient(top, var(--brand-blue), var(--brand-blue));
    background-color: var(--brand-blue);
}

/* 40px 은 여백 스케일 밖 — 토큰을 늘리지 않고 스케일 조합으로 같은 값을 만든다(§1) */
.bi-page .bi-bk-emp{
    padding-left: calc(var(--space-8) + var(--space-2));
    font-weight: var(--fw-bold);
    cursor: pointer;
}
.bi-page .bi-bk-emp:first-child{
    padding-left: var(--space-2_5);
}
.bi-page .bi-bk-emp span{
    padding: var(--space-2_5) 0px;
}

.bi-page .bi-bk-ten-up{
    padding: var(--space-1) var(--space-1_5);
}

#calendar_days{
    white-space: nowrap;    /* 디자이너 열을 한 줄로 유지(가로 스크롤) */
}

/* 2026-08-21 제거 — 고객관리 디자이너 필터 아래에 «회색 판» 이 하나 더 있었다(사용자 지적).
 * 정체는 이 id 셀렉터의 border-bottom: 2px 였다. 밑줄 탭 시절의 잔재인데
 * 지금은 알약(pill)이라 밑줄이 필요 없고, 바로 아래 필터카드의 구분선과 겹쳐 두 줄로 보였다.
 * display:flex 는 .bi-pillbar 가 이미 준다 → 규칙 자체를 없앤다.
 * (id 셀렉터는 특이도가 높아 클래스로는 못 이긴다 — 그래서 오래 살아남았다) */

.bi-page .bi-bk-status1{
    background: var(--color-success-400);    
}

.bi-page .bi-bk-status2{
    background: var(--color-info-600);    
}

.bi-page .bi-bk-status3{
    background: var(--gray-300);    
}

.bi-page .bi-bk-status4{
    background: var(--color-purple-500);    
}

.bi-page .bi-bk-status5{
    background: var(--gray-300);    
}

.bi-page .bi-bk-status6{
    /* 2024.09.20 예약마감 css 추가  */
    background: var(--gray-300);     
}

/* 선결제 배지 안 원화 아이콘 — 배지 색 상속, 또렷하게 */

.bi-page .bi-bk-scroll{
    cursor: pointer;
}
.bi-page .bi-bk-days-scroll{
    cursor: pointer;
}
/* 더 갈 곳이 없는 화살표. JS 가 인라인으로 rgb(159,159,159) / 'black' 을 찍던 자리 —
 * 켜진 쪽은 아무 색도 주지 않는다(글자색을 물려받는 게 규격이다). 꺼진 쪽만 상태로 표시한다. */
.bi-page .bi-bk-scroll.is-disabled,
.bi-page .bi-bk-days-scroll.is-disabled{ color: var(--gray-400); cursor: default; }

.bi-page .inp_date{
    width: 100%;
    text-align: center;
    border: none;
    height: 20px;
    font-weight: 900;
    font-size: var(--fs-md);
}

/* 달력 컨테이너 스크롤바 — 얇고 은은한 회색 (디자인 scrollbar-thin) */
#div_type::-webkit-scrollbar { width: 9px; height: 9px; }
#div_type::-webkit-scrollbar-track { background: transparent; }
#div_type::-webkit-scrollbar-thumb {
    background: var(--gray-300);
    border-radius: var(--radius-full);
    border: 2px solid transparent;
    background-clip: padding-box;
}
#div_type::-webkit-scrollbar-thumb:hover {
    background: var(--txt-disabled);
    background-clip: padding-box;
}
#div_type::-webkit-scrollbar-corner { background: transparent; }

/* 고객명 옆에 디자이너명 출력 툴팁*/
#tooltip-re {
    display: none;
    position: relative;
    transform: translateX(8%);
    z-index: 90;
}
.bi-page .tooltip {
    position: absolute;
    width: 200px;
    height: 32px;
    background-color: var(--color-warning-300);
    line-height: 32px;
    text-align: center;
    padding: var(--space-0_5) var(--space-2);
    color: var(--gray-800);
    font-size: var(--fs-xs);
    font-weight: var(--fw-extrabold);
    left: -29px;
    bottom: 44px;
    z-index: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#tooltip-container:hover+#tooltip-re{
    display: block;
}

/* 날짜 네비게이션 */
/* 2026-08-07 §40-10 프리미티브로 대체 — .bi-datenav: 마크업에 .bi-row .bi-row--gap-4 병기 */
.bi-datenav .bi-bk-commend {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background .15s;
    flex-shrink: 0;
    background: var(--brand-blue);
}
.bi-datenav .bi-bk-commend:hover { background: var(--brand-blue-hover); }
.bi-datenav .bi-bk-commend svg { width: 12px; height: 12px; }
.bi-datenav .bi-bk-commend svg path { fill: var(--bg-card); }
.bi-datenav .inp_date {
    /* legacy .inp_date { width:100%; border:none; height:20px; } 덮어쓰기 */
    width: auto;
    min-width: 160px;
    border: 1px solid var(--border-base);
    border-radius: var(--radius-lg);
    padding: var(--space-1) var(--space-3_5);
    height: 32px;
    text-align: center;
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--txt-primary);
    background: var(--bg-card);
    line-height: normal;
}

/* 서브바 좌측 예약상태 범례 (검색필드에서 이동) */

@media (max-width: 1280px) { .bi-bk-legend--subbar { gap: var(--space-2_5); } .bi-bk-legend--subbar .bi-bk-legend-item { font-size: var(--fs-2xs); } }

/* ⚠ 배경·테두리가 없으면 브라우저 기본 회색 버튼이 된다. 레거시 전역 버튼 스킨이
 *   가려주고 있었을 뿐이다(2026-08-12 그 스킨 제거로 드러남).
 *   세그먼트 항목은 **바탕 없음**, 활성만 색(.act_date) — 그게 §12 세그먼트 규격이다. */
/* .bi-segment input[type="button"] 삭제(2026-08-21) — 세그먼트 구현이 **셋**이었다.
 *   ① .bi-segment__btn (§29 규격 · 특이도 0,1,0)
 *   ② .bi-seg-wrap input[type="button"] (레거시 래퍼 · 삭제됨)
 *   ③ .bi-segment input[type="button"] ← 이것 (특이도 0,1,1)
 * ③ 이 ① 을 **조용히 이긴다**(요소+속성 선택자가 클래스보다 높다). 그래서 마크업에
 * .bi-segment__btn 을 붙여도 화면이 그대로였다 — 규격을 고쳐도 안 바뀌는 상태였다.
 * 마크업의 <input> 전부에 규격 클래스를 달았으므로 ③ 을 없앤다. ① 하나만 남는다. */
.bi-segment__btn:hover:not(.is-active) { background: color-mix(in srgb, var(--black) 5%, transparent); color: var(--txt-secondary); }

/* ============================================================
   예약정보 인스펙터 (2026-06-16)
   기존 hook 클래스(.bk_status/.bk_top_name/.bk_phone/.bk_emp/.bk_date/.bk_type/
   .bk_num/.bk_goods/.bk_price/.bk_first_price/.bk_memo/.bk_avatar/.div_group/버튼) 보존
   ============================================================ */

/* 프로필 헤더 */

.bi-bki-gender:empty { display: none; }/* 인스펙터 버튼 base(.bi-bki-btn/--sales/-sublinks/-link) → 공통 style.css(구 booking_schedule.css) 이관 (2026-07-31).
   아래는 booking_renew 전용 델타: 부모 .div_group 의 text-align-last:right(JS) 상속 보정 */
.bi-write-grid-2 input[type="button"].bi-bki-btn--sales { text-align-last: center; }

/* ============================================================
   Stage 1 — 스케줄러 토큰 정렬 (2026-06-15)
   ⚠ JS 슬롯 수학에 영향 주는 치수(.bi-bk-slot180 170px·.bi-bk-inner 22px·열너비)는 불변.
      색·라운드·테두리·폰트·sticky 등 코스메틱만 조정.
   ============================================================ */

/* 디자이너 열 헤더 (Dashboard: 굵은 이름 + 연한 헤더 배경) — sticky 는 기존 JS 가 담당하므로 CSS sticky 미사용(충돌 방지) */
.bi-page .bi-bk-ht45-line {
    background: var(--bg-card);                /* 디자인 th 흰색 */
    border-bottom: 1px solid var(--border-base);
}
/* 디자이너 열 헤더 고정 — sticky(스크롤 컨테이너 #div_type 내에서만, 인스펙터 안 가림) */
.bi-page #calendar_days .bi-bk-calendar--days .bi-bk-ht45-line { position: sticky; top: 0; z-index: 5; }
/* 가로 스크롤 시 좌측 시간열 고정 (sticky left) — 흰 배경으로 카드가 비치지 않게 */
.bi-page #calendar_days .bi-bk-calendar--days:first-child {
    position: sticky; left: 0; z-index: 6;
    background: var(--bg-card);
    border-right: 1px solid var(--gray-200);
}
/* 좌상단 코너(시간열 헤더)는 가로·세로 모두 위로 */
.bi-page #calendar_days .bi-bk-calendar--days:first-child .bi-bk-ht45-line { z-index: 7; }
.bi-page .bi-bk-calendar--days .bi-bk-ht45-line .bi-bk-sp14 {
    color: var(--txt-primary);
    font-weight: var(--fw-bold);
    font-size: var(--fs-base);
}
/* 첫 열(시간 라벨열) 헤더도 디자이너 헤더와 동일하게 흰색 */
.bi-page .bi-bk-calendar--days:first-child .bi-bk-ht45-line { background: var(--bg-card); }
/* 시간 라벨열은 80px 고정 (디자이너 열의 min-width:220 적용 제외) */
.bi-page .bi-bk-calendar--days:first-child { width: 80px; min-width: 80px; max-width: 80px; }/* 예약 카드 (innerDiv) — Dashboard 카드 톤: 라운드 + 그림자 + 폰트 */
.bi-page .bi-bk-inner {
    border-radius: var(--radius-md);
    font-weight: var(--fw-semibold);
    letter-spacing: -0.01em;
}
/* 예약 가능(빈) 셀 — Dashboard 빈 셀: 점선 박스, 평소 '+' 흐림 / hover 시 '+ 예약 추가' */
.bi-page .bi-bk-innerPossible {
    background: var(--bg-card);
    color: var(--txt-disabled);
    border: 1px dashed var(--border-base);
    box-shadow: none;
    font-weight: var(--fw-bold);
    transition: background .12s, border-color .12s, color .12s;
}
.bi-page .bi-bk-innerPossible:hover {
    background: var(--bg-input);
    border-color: var(--gray-300);
    color: var(--gray-600);
}
.bi-page .bi-bk-innerPossible .bi-bk-sp-remain-cnt { display: none; }   /* 잔여수는 로직용 — 화면 숨김 */

/* 상태색 — Dashboard 팔레트로 정렬 (1신청 emerald / 2확정 blue / 4완료 gray / 3·5·6 취소·노쇼·마감 gray) */
.bi-page .bi-bk-inner.bi-bk-status1 { background: var(--color-success-500); }   /* 신청 = emerald */
.bi-page .bi-bk-inner.bi-bk-status2 { background: var(--color-info-600); }   /* 확정 = blue */
.bi-page .bi-bk-inner.bi-bk-status4 { background: var(--txt-muted); }/* 시간 슬롯 행 hover (인터랙션 힌트) */
.bi-page .bi-bk-time:hover { background: color-mix(in srgb, var(--bg-input) 60%, transparent); }

/* 디자이너 슬라이더 활성 — Dashboard 브랜드 블루 언더라인 */
.bi-page .bi-bk-emp-active { color: var(--color-info-600); }

/* ============================================================
   Stage 2 — 카드형 예약 + 디자이너 헤더 아바타 (2026-06-15)
   .bi-bk-inner · bi-bk-status · data-속성 · onclick · 툴팁 보존, 마크업만 카드화.
   슬롯(.bi-bk-slot180 170px) 안에서 카드 높이 auto(min 40px) — max_num(4) collapse 로 한도.
   ============================================================ */

/* 예약 카드 (Dashboard 카드: 시간 + 네이버 + 고객명) */
.bi-page .bi-bk-inner.bi-bksch-card {
    height: auto;
    min-height: 50px;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-2_5);
    line-height: 1.25;
    text-align: left;
    text-align-last: left;
    border-radius: var(--radius-xl);     /* rounded-xl (디자인) */
    color: var(--gray-800);          /* 연한 배경 카드 → 진한 글자 */
    white-space: normal;
}
/* 카드 상태색 — Dashboard: 연한 배경 + 색상 좌측보더 + 진한 색 글자 (solid override) */
.bi-page .bi-bk-inner.bi-bksch-card.bi-bk-status1 { background: var(--color-success-50); border: 1px dashed var(--color-success-300); color: var(--color-success-800); }
.bi-page .bi-bk-inner.bi-bksch-card.bi-bk-status2 { background: var(--color-info-50); border-left: 3px solid var(--color-info-600); color: var(--brand-blue); }
.bi-page .bi-bk-inner.bi-bksch-card.bi-bk-status4 { background: var(--bg-input); border-left: 3px solid var(--txt-disabled); color: var(--txt-muted); }/* 모든 시간 슬롯 — flex column: 내용(카드/예약가능)이 칸을 꽉 채움 */
.bi-page .bi-bk-time { display: flex; flex-direction: column; gap: var(--space-0_5); padding: var(--space-1) var(--space-1); }
.bi-page .bi-bk-time > br { display: none; }
.bi-page .bi-bk-time > .bi-bk-inner { flex: 1 1 auto; }
/* 예약가능(빈) 셀 — 점선 placeholder 가 칸을 채우고 가운데 정렬 */
/* 2026-08-07 §40-10: .bi-page .bi-bk-time .bi-bk-innerPossible — 마크업에 .bi-row-center 병기 */
/* 주간: 예약 카드를 빈슬롯보다 먼저(위) 표시 — 빈슬롯을 맨 아래로 */
.bi-page .bi-bk-calendar--week .bi-bk-time .bi-bk-innerPossible { order: 10; }

/* 주간/월간 집계 칩 + hover 상세(고객명·디자이너) */
.bi-page .bi-agg { position: relative; min-width: 0; }
/* 집계 요약: 주간=단일 '예약 N건' 칩 / 월간=상태별 건수 칩(wrap) */
/* 2026-08-07 §40-10: .bi-agg-summary — 마크업에 .bi-row .bi-row--wrap .bi-row--gap-4 병기 */
.bi-page .bi-agg[data-mode="week"] .bi-agg-summary { display: block; }
/* 주간 예약 요약 = 슬롯형(빈슬롯과 구분되는 파란 톤) · 좌 '예약' · 우 건수 */
/* 월간 예약 요약 = 셀 가로 100% · 상태별 풀폭 행(좌 상태 · 우 건수) */
.bi-page .bi-agg[data-mode="month"] { width: 100%; }
.bi-page .bi-agg[data-mode="month"] .bi-agg-summary { flex-direction: column; flex-wrap: nowrap; width: 100%; gap: var(--space-1); }
.bi-page .bi-agg-stat {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; box-sizing: border-box; white-space: nowrap;
    font-size: var(--fs-xs); font-weight: var(--fw-extrabold); line-height: 1.5;
    padding: var(--space-0_5) var(--space-2); border-radius: var(--radius-md); border: 1px solid transparent;
}
.bi-page .bi-agg-stat.bi-bk-status1 { background: var(--color-success-100); color: var(--color-success-700); border-color: var(--color-success-300); }
.bi-page .bi-agg-stat.bi-bk-status2 { background: var(--color-info-100); color: var(--color-info-700); border-color: var(--color-info-300); }
.bi-page .bi-agg-stat.bi-bk-status4 { background: var(--border-base); color: var(--txt-muted); }.bi-page .bi-agg-list {
    display: none; position: absolute; left: 0; top: 100%; z-index: 50;
    min-width: 220px; max-width: 300px; overflow-y: auto;
    margin-top: var(--space-1); padding: var(--space-1_5);
    background: var(--bg-card); border: 1px solid var(--border-base); border-radius: var(--radius-xl);
    white-space: normal; text-align: left;
}
.bi-page .bi-agg[data-mode="week"]:hover .bi-agg-list { display: block; }/* 일간 취소 칩 — 슬롯 안에서 늘어나지 않고 컴팩트하게(활성 카드 아래) */
.bi-page .bi-bk-time > .bi-agg--daycancel { flex: 0 0 auto; width: 100%; margin-top: var(--space-0_5); }
/* hover 항목 = 슬롯 카드와 동일 룩의 블럭(시간·고객명·디자이너·시술) — 펼친 리스트, 높이 고정 80px */
.bi-page .bi-agg-item.bi-bksch-card {
    width: 100%; box-sizing: border-box; margin: 0 0 var(--space-1_5); cursor: pointer;
    height: 80px; min-height: 80px; overflow: hidden; justify-content: center;
}
.bi-page .bi-agg-item.bi-bksch-card:last-child { margin-bottom: 0; }
/* 일간 활성 과밀 ②: 3건+ 집계 칩(취소 칩과 동일 컴팩트·hover 펼침) */
/* 일간 활성 과밀 ①: 2건 컴팩트 — min-height 해제로 둘이 슬롯(84px)을 나눠 갖고, 서비스줄 숨김·이름 축소로 잘림 방지 */
.bi-page #calendar_days .bi-bk-time.is-dense .bi-bksch-card { min-height: 0; padding: var(--space-1) var(--space-2); gap: var(--space-0_5); }
.bi-page #calendar_days .bi-bk-time.is-dense .bi-bksch-card .bi-bksch-card-name { font-size: var(--fs-xs); }
/* 주간: 예약 요약 + 빈슬롯. 빈슬롯만이면 100%, 둘 다면 50:50 (flex 1 1 0). box-sizing 으로 침범 방지 */
.bi-page #calendar_week .bi-bk-time { flex-direction: column; gap: var(--space-1); align-items: stretch; box-sizing: border-box; }.bi-page #calendar_week .bi-bk-time > .bi-agg { display: flex; order: 1; }
.bi-page #calendar_week .bi-bk-time > .bi-bk-innerPossible { order: 2; }
.bi-page #calendar_week .bi-bk-time > .bi-agg > .bi-agg-summary { flex: 1; min-width: 0; display: flex; }

/* 시간은 좌측 시간열에만 표시 (디자인 단일 시간축) — 디자이너 열의 슬롯 시간 라벨 숨김 */
.bi-page .bi-bk-calendar--days:not(:first-child) .bi-bk-time > .bi-bk-mg10 { display: none; }
/* 좌측 시간열 — 시간 가운데, mono */
.bi-page .bi-bk-calendar--days:first-child .bi-bk-time { align-items: center; justify-content: center; }
.bi-page .bi-bk-calendar--days:first-child .bi-bk-time > .bi-bk-mg10 {
    flex: 0 0 auto; text-align: center; font-size: var(--fs-xs); font-weight: var(--fw-extrabold); color: var(--txt-muted);
    font-family: ui-monospace, Menlo, monospace;
}

/* 2026-08-07 §40-10: .bi-bksch-card-top — 마크업에 .bi-row .bi-row--gap-6 병기 */
/* 카드 상태 배지 */
.bi-bksch-card-badge { flex-shrink: 0; font-size: var(--fs-2xs); font-weight: var(--fw-extrabold); padding: var(--space-0_5) var(--space-1_5); border-radius: var(--radius-md); border: 1px solid transparent; line-height: 1.5; }
.bi-bksch-card-time {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: var(--fs-2xs); font-weight: var(--fw-bold); opacity: .8;
}
.bi-bksch-card-name {
    font-size: var(--fs-base); font-weight: var(--fw-extrabold);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 2026-06-26 예약 카드 이름/상품명이 부모 .bi-bk-inner 의 text-align-last:justify 를 상속해
   공백 있는 상품명("남성 드라이" 등)의 공백이 카드 폭만큼 과하게 벌어지던 문제 → 좌측 정렬 고정 */
.bi-page .bi-bksch-card-name, .bi-bksch-card-name { text-align-last: left; }

/* 디자이너 열 헤더 — 아바타 이니셜 + 이름 (Dashboard 헤더) */
/* 직책 — 디자이너명 아래, 좌측 정렬 (부모 text-align:center 상속 차단) */
.bi-bksch-dhead-cnt {
    flex-shrink: 0; min-width: 18px; text-align: center;
    font-size: var(--fs-2xs); font-weight: var(--fw-extrabold); color: var(--color-indigo-700);
    background: var(--color-indigo-50); border: 1px solid var(--color-indigo-100); border-radius: var(--radius-full); padding: var(--space-0_5) var(--space-2);
}

/* ── Stage 3 — 현재시각 빨간선 (일간 뷰 오버레이, 09:00~21:30, 슬롯 170px) ── */
#calendar_days { position: relative; }
.bi-bksch-nowline {
    position: absolute; left: 0; right: 0; height: 2px;
    background: var(--color-danger); z-index: 40; pointer-events: none;
}

/* 검색 영역 (Dashboard Section 1A — 아이콘 내장 입력 + navy + 버튼) */
/* 2026-08-07 §40-10: 레이아웃(flex:1;min-width:0)은 .bi-fill 병기 */
/* 기본형 → 공용 .bi-btn.bi-btn--navy.bi-btn--icon (HTML). 델타: 라운드·그림자 (hover/active 는 공용) (2026-07-31) */

/* 미니 월 달력 (Dashboard Section 1B — Calendar Picker) */
.bi-cal__today:hover { background: var(--color-info-100); }
.bi-cal__nav:hover { background: var(--border-light); color: var(--txt-secondary); }
.bi-cal__day:hover { background: color-mix(in srgb, var(--border-light) 80%, transparent); }
.bi-cal__day.is-sun { color: var(--color-danger); }
.bi-cal__day.is-sat { color: var(--color-info-500); }
.bi-cal__day.is-empty { background: transparent; cursor: default; pointer-events: none; }
.bi-cal__day.is-today { box-shadow: inset 0 0 0 1.5px var(--color-info-200); color: var(--brand-blue); font-weight: var(--fw-extrabold); }
.bi-cal__day.is-sel { background: var(--brand-blue); color: var(--bg-card); font-weight: var(--fw-extrabold);  }
.bi-cal__day.is-out { color: var(--gray-300); }   /* 앞뒤 달 날짜 흐리게 (booking_time 캘린더와 동일) */

/* 주간 모드 — 주(row) 단위 선택/hover 하이라이트. 그리드를 세로 스택(각 주=7칸 가로) */
.bi-cal__grid.is-weekmode { display: block; }

/* 전역 input[type=checkbox]{visibility:hidden;display:none} 강제 규칙 회피 (CLAUDE §5-1) */
/* 체크박스 스프라이트 무력화 → 공통 style.css(구 booking_schedule.css) 이관 (2026-07-31) */

/* 스케줄 상태 통계 (예약/완료 건수) */

.bi-bksch-stat-v b { font-weight: var(--fw-black); }

/* ============================================================
   간편예약 팝업 (신규 — 예약 등록 모달, 2026-06-16)
   ============================================================ */
/* .bi-bq-overlay/-modal/-head/-close = 구 인페이지 모달 크롬. 레이어팝업(popup_layer_bk_quick)으로 전환돼 dead → 제거(2026-07-31). bq-body/row/field 는 폼 내용으로 live 유지. */
/* 2026-08-07 공통 일원화: `#popup_layer_member .write_layout{z-index:2000}` 은 style.css(구 popup.css) 에 동일 정의가
   있어 제거(팝업 CSS 는 style.css(구 popup.css) 로 일원화 — styleguide2 §38). */
/* 간편예약 레이어 팝업(popup_layer_bk_quick)을 스케줄(헤더 z:99·100, 집계 z:50, 현재시간줄 z:40) 위로 올림.
   .write_layout 기본 z-index:10 은 스케줄 요소들보다 낮아 가려지므로 상향(위치는 그대로, z-index 만). */
#popup_layer_bk_quick .write_layout { z-index: 1000; }
/* 2026-08-27 제거 — 여기 `#popup_layer_bk_quick .write_layout_pop{width:460px;height:660px}` 가 있었다.
 *   도입 사유는 「다른 팝업이 열리면 popup_layer.js 가 **전역** .write_layout_pop 크기를 덮어쓴다」였는데,
 *   그 전역 덮어쓰기는 2026-08-26 에 **원인을 고쳤다**(지금 여는 팝업의 상자만 고른다).
 *   증상을 막으려고 id 로 박아둔 크기가 남아 규격 폭(423)을 이기고 있었다 — #prepay·#n_pay 와 같은 함정.
 *   ⚠ **원인을 고친 뒤에는 그때 세운 방어막도 걷어야 한다.** 안 걷으면 다음 규격을 그게 막는다. */

.bi-page .div_grada_left, .div_grada_right { width: 50px; text-align: center; font-size: var(--fs-2xl); line-height: 1.75; }

/* §40-10 보완 — 인라인 style 을 걷어내며 필요해진 배치 유틸 (2026-08-11).
   팝업 마크업이 `style="text-align:right"` 처럼 한 줄짜리 인라인을 400여 곳에서 쓰고 있었다.
   뜻이 하나뿐인 것만 여기로 회수한다 — 여러 선언이 얽힌 float 레이아웃은
   마크업 구조를 바꿔야 해서 L2(브라우저) 확인 뒤에 한다. */
.bi-tr          { text-align: right; }
.bi-tc          { text-align: center; }
.bi-strong      { font-weight: var(--fw-bold); }
.bi-nounderline { text-decoration: none; }

/* 눌러서 팝업을 여는 읽기전용 입력 — 커서를 손모양으로, 깜빡이는 캐럿은 숨긴다.
   담당자·상품 선택처럼 "입력칸처럼 보이지만 실제로는 버튼"인 자리(§21 보완). */
/* 눌러서 팝업을 여는 읽기전용 입력 — 커서는 §40-10 .bi-clickable 이 맡고,
   여기서는 "타이핑할 수 없다"는 표시(캐럿 숨김)만 더한다. 마크업에 둘을 병기한다. */
.bi-input--clickable { caret-color: transparent; }
/* 범례에 쓰는 상태 아이콘 — 매트릭스 슬롯의 마커와 같은 뜻을 설명용으로 보여준다 */
/* §8 보완 — 작은 대문자 섹션 라벨. 예약 상세·예약 스케줄·예약 집계가 각자 만들고 있었다 */
/* =========================================================
   §40-2-1 발송 미리보기 — 문자 · 알림톡 (2026-08-11 신설)
   ---------------------------------------------------------
   **콘텐츠 고유**다. 실제 발송 화면을 흉내내는 그림이라 규격 컴포넌트로 대체할 수 없고,
   카카오 노랑(#FAE102)·말풍선 모서리는 **브랜드 자산**이라 규격색으로 바꾸면 오히려 틀린다.
   그래서 규격에 "고유"로 명시하고 전시한다 — 예외를 숨기지 않고 드러낸다.
   ⚠ 이 색·모양을 다른 화면에서 재사용하지 않는다. 알림톡 미리보기 한 곳 전용이다.
   ========================================================= */
.bi-msgprev-phone__top { height: 53px; }
.bi-msgprev-phone__ta  { width: 184px; height: 280px; overflow-y: scroll; line-height: 15px; letter-spacing: -0.5pt; word-wrap: break-word; font-family: 돋움체; background: transparent; border: 0; }
.bi-msgprev-phone__size{ width: 85%; text-align: right; padding-top: var(--space-3); }
.bi-msgprev-phone__foot{ height: 56px; }
/* 발송 팝업 변형 — 설정 화면은 본문 하나지만 발송 팝업(sms·lms)은 **본문 + 추가** 2단이다.
 * 배경 gif 가 단마다 다르다(A / Add / PhoneBody). 브랜드 자산이라 값 그대로 유지한다.
 * 2026-08-11: 이걸 팝업 두 곳이 긴 인라인 style 로 각자 갖고 있었다. */
/* 발송 팝업의 입력칸은 설정 화면보다 작다(2단으로 나뉘므로) */
/* 폰 목업 바깥 — 발송 팝업은 폼 옆에 나란히 놓는다 */
/* 발송 팝업 입력 열 — 폰 목업(250px) 옆에 서는 폼 기둥. 폭이 목업과 짝이라 규격에 둔다.
 * 안쪽 항목 간격은 §40-10 .bi-col --gap-16 이 준다(구 padding-top:16px 반복). */
/* 알림톡 — 카카오 브랜드 */
/* §40-10 보완 — 인라인 style 을 걷어내며 필요해진 한 줄짜리 (2026-08-11 2차) */
.bi-clickable { cursor: pointer; }
/* 잠깐 짚어 보여주는 강조 — 목록에서 방금 바뀐 행을 알릴 때(§40-11 상태).
 * 2026-08-12: 한 화면 전용 .bi-hl 을 걷어내며 규격 상태로 올렸다. */
.bi-row.is-highlight, .bi-pop-tbl-row.is-highlight, .bi-erp-card.is-highlight,
.is-highlight {  border-radius: var(--radius-lg); }

/* ── 40-20. 수신 전화 알림 (2026-08-11) — footer.php 의 CID 팝업 ──
 * 전화가 오면 화면 구석에 뜨는 파란 카드. 인라인 8건이 이 하나를 그리고 있었다.
 * ⚠ 파랑 두 가지(#4dabf7 머리/본문 · #2d87e2 수신줄)는 토큰에 없다.
 *   sg2 색과 다른 계열이라 억지로 맞추면 알림의 '눈에 띔' 이 무너진다 →
 *   §40-2-1(브랜드 자산)과 같은 취급으로 **값을 그대로 두고 규격에 명시**한다. */
/* 구 .bi-btn--cid-w70 — .bi-input--w70 와 같아 합침(2026-08-12) */
/* 구 .bi-btn--cid-w100 — .bi-input--w100 와 같아 합침(2026-08-12) */

/* ── 잔여 마무리 (2026-08-12) ── */
/* 예약 달력 위 요일 표시 — 절대배치로 셀 위에 겹친다 */
/* LMS 본문(장문) — SMS 보다 길어 배경 gif 와 높이가 다르다 */
/* =========================================================
   §HIDDEN — 숨김 유틸리티 (파일 맨 끝 · 위치가 곧 규칙)
   ---------------------------------------------------------
   `.bi-hidden` 은 "무조건 숨긴다"가 계약이다. 그런데 특이도가 0,1,0 뿐이라
   같은 특이도의 컴포넌트 규칙이 뒤에 오면 진다 — 실제로 `.bi-bki{display:flex}`(L5218)가
   `.bi-hidden`(L2169)을 이겨 숨겨야 할 요소가 보이고 있었다.

   ⚠ `` 는 쓰지 않는다 — jQuery `.show()` 가 안 먹는다(구 `#counter_portal .is-hidden` 의 전철).
   → 대신 **정의를 파일 맨 끝에 둔다.** 같은 특이도면 나중이 이기므로 공통 안에서는 항상 이긴다.
   이 블록 아래에 다른 규칙을 추가하지 말 것.

   모듈 CSS 는 공통 뒤에 로드되므로 여전히 이길 수 있다.
   그 자리는 QC `CASCADE-LOSS` 가 잡는다(2026-08-07 158fe27 사고의 재발 방지).
   ========================================================= */
.bi-hidden { display: none; }

/* =========================================================
   §38-8 팝업 파일에서 이관한 전용 규칙 (2026-08-11)
   ---------------------------------------------------------
   세 팝업이 각자 <style> 블록을 갖고 있었다(§4 절대규칙 위반).
   ⚠ 값은 **그대로** 옮긴다. 여기서 값까지 바꾸면 이관 실패와 디자인 변경이
     한 커밋에 섞여 원인을 가릴 수 없다. 토큰화는 별도로 한다.
   ========================================================= */
/* ── npay_btn 팝업 전용 (2026-08-11: 파일 내 <style> 블록에서 이관 — §4 절대규칙) ── */
/* 20.09.17 tag */
.pop_cate_wrap{
	border:1px solid var(--border-base);
	margin: var(--space-4) 0;
}

.pop_cate_div{
	width:450px;
	height:auto;
	margin: var(--space-2_5);
	/*border:1px solid var(--border-base);*/
	cursor:pointer;
}

.pop_cate_title{
	width:450px;
	height:35px;
	line-height:35px;
}

.tags_name{
	margin-left: var(--space-2_5);color: var(--brand-blue);font-size: var(--fs-md);
}

.pop_cate_title_right{
	float:right;
	width:100px;
	overflow:auto;
}

.onoff{
	float:left;width:20px;font-size: var(--fs-xl);cursor:pointer;postion:fixed;right:20px;display:none;
}
.onoff.off{
	display:block;
}

.pop_tag_ul{
	width:450px;
	padding:0px;
	margin:0px;
	overflow:hidden;
	border-top:1px solid var(--border-base);
	/*border:1px solid var(--border-base);*/
	display:none;
	cursor:default;
}

.pop_tag_li{
	width:150px;
	list-style:none;
	float:left;
	/*margin:5px 0px;*/
	margin-top: var(--space-2_5);
}

.ch_label{
	cursor:pointer;
}

/* ── sch_mem 팝업 전용 (2026-08-11: 파일 내 <style> 블록에서 이관 — §4 절대규칙) ── */
.write_layout {     /* 1012 wi/hei 100%-> 80% 변경 // top 0->5px sch_mem실행시 좌우스크롤 생성방지  */
    width: 80%;
    position: absolute;
/*    top: 0px;*/
   top: -37px;
	left: 10px;
    height: 70%;
    float: left;
    /*  display: none;*/
    /* display: block;*/

}

/* ── slip_2022 팝업 전용 (2026-08-11: 파일 내 <style> 블록에서 이관 — §4 절대규칙) ── */
.signature-pad--body canvas {
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-xs) inset;
	border:1px solid var(--border-base);
	width: 100%;
    height: 100%;
}
.signature-pad--body {
	height: 150px;
    width: 250px;
    margin: 0 auto;
}
.signature-pad--footer {
    width: 100%;
    text-align: right;
	padding-top: var(--space-3_5);
}

/* ── popup_layer_prepay (2026-08-12: 파일 내 <style> 에서 이관 — §4) ── */
  
  		.pop_m_b_li_div{
  			padding-left: var(--space-4);
  			line-height: 21px;
  		}

  		.pop_desc p {
  			margin: var(--space-0_5) 0;
  		}
  input[type="tel"] { /*태블릿용 - input type변경 시 계산이벤트 안먹는 문제로 보류*/
  	border: 1px solid var(--border-base);
  	-webkit-border-radius: var(--radius-sm);
  	-moz-border-radius: var(--radius-sm);
  	border-radius: var(--radius-sm);
  	border-top: 1px solid var(--border-base);
  	-webkit-box-shadow: none;
  	-moz-box-shadow: none;
  	box-shadow: none;
  	color: var(--txt-primary);
  	font-size: var(--fs-base);
  	height: 20px;
  	line-height: 25px;
  	padding: var(--space-0_5) var(--space-1);
  }  .selectWrap{
  	/* display:none; */
  	width: 100%;
      height: 428px;
      background: #fff;
      position: absolute;
      z-index: 999;
  }/* ── popup_layer_card_cancel_2022 (2026-08-12: 파일 내 <style> 에서 이관 — §4) ── */
  #kisPosOcx{
  	display:none; 
  }
  .selectWrap{
  	/* display:none; */
  	width: 100%;
      height: 510px;
      background: #fff;
      position: absolute;
      z-index: 999;
  }

  .selectWrap p{
  	 padding: 0 var(--space-2_5); 
  	color:rgba(0, 0, 0, 0.6);
  }

/* =========================================================
   가이드 데모 무대 (2026-08-12)
   ---------------------------------------------------------
   position:absolute/fixed 인 규격(.bi-cid · .bi-pop-cover ·
   .bi-pop-bk__daylbl · .bi-pop-corner-in)을 가이드에 그대로 놓으면 **문서를 덮는다**.
   실제로 styleguide2 가 반투명 흰 판에 가려졌다(사용자 발견 2026-08-12).
   → 데모는 이 무대 안에서만 띄운다. 무대가 배치 기준(relative)과 크기를 준다.
   ⚠ 규격 자체는 손대지 않는다 — 문제는 전시 방법이었다. */
/* ⚠ `overflow:hidden` 만으로는 **position:fixed 자식을 못 가둔다** — fixed 는 뷰포트 기준이라
 *   무대를 뚫고 나와 가이드 위를 덮는다(2026-08-12 실제로 스타일가이드2 가 그렇게 깨졌다).
 *   `contain: layout paint` 가 이 요소를 **고정·절대 요소의 기준 상자**로 만들어 가둔다.
 *   ⚠ `transform: translateZ(0)` 로도 되지만 그건 **합성 레이어를 만든다** — 무대가 260개면
 *     레이어도 260개라 스크롤·이동이 멈춘다(2026-08-13 사용자 보고). contain 만 쓴다. */
.sg2doc-stage{ position: relative; height: 220px; overflow: hidden;
               contain: layout paint;
               border: 1px dashed var(--border-base); border-radius: var(--radius-lg);
               background: var(--bg-input); }
/* 이름 나열 목록 안에서 쓰는 작은 무대 — .bi-loading·.bi-modal-ov 처럼
 * width/height 100% 로 부모를 덮는 규격을 여기 가둔다. */
/* ⚠ 고정 140×34 로 가두면 **견본이 안 보인다** — 117개가 그렇게 눌려 있었다(2026-08-13).
 *   무대는 «넘치는 것을 막는» 울타리지 «크기를 정하는» 상자가 아니다.
 *   자기 크기대로 보여주되 위·아래로만 한도를 둔다. */
.sg2doc-stage--mini{
    display: inline-block; vertical-align: top;
    width: auto; height: auto;
    min-width: 40px; min-height: 28px;
    max-width: 320px; max-height: 120px;
}

/* =========================================================
   §40-2-1 발송 팝업 3단 — 되살림 (2026-08-12)
   ---------------------------------------------------------
   SPEC-SINGLE-USE 가 이걸 '한 곳 전용' 으로 봤다. 판정이 **팝업 전체를 한 덩어리**로
   묶어 세기 때문이다 — 실제로는 popup_layer_sms 와 _lms 둘이 공유하는 규격이다.
   빼고 나니 두 팝업에서 가로넘침 56건이 났다(L2-P 실측).
   ⚠ 사용처 판정을 '팝업' 하나로 뭉개면 팝업끼리 공유하는 규격이 전용으로 보인다.
   ========================================================= */
/* 발송 팝업 바깥 감싸개 — 폰 목업(.bi-msgprev-phone--aside, 250px)과 **다른 것**이다.
 * 2026-08-12: 인라인 정리 때 이 자리에 --aside 를 잘못 붙여 840px 안내 박스가
 * 250px 기둥 안에 갇혔고 가로넘침 56건이 났다(L2-P 실측). */
/* ⚠ 2026-08-12: float + 고정폭(534+58+250)이라 870px 창을 구조적으로 넘쳤다.
 *   규격 입력(§21)이 옛 25px 입력보다 커지자 넘침이 더 늘었다 — 값을 되돌릴 게 아니라
 *   배치를 §40-10 프리미티브 방식으로 바꾼다. 폰 목업만 고정폭, 본문은 남는 폭을 쓴다. */
.bi-msgsend__wrap  { background: var(--bg-card); display: flex; flex-wrap: wrap; align-items: flex-start;
                     gap: var(--space-4); padding: var(--space-4); box-sizing: border-box; width: 100%; }
.bi-msgsend__form  { width: 200px; }
.bi-msgsend__left  { font-size: var(--fs-sm); flex: 1 1 320px; min-width: 0; }
.bi-msgsend__mid   { flex: 0 0 58px; }
.bi-msgprev-phone--aside { flex: 0 0 250px; width: 250px; }

/* §40-2-1 발송 팝업 — sms·lms **둘이 공유**하는 규격. SPEC-SINGLE-USE 가 팝업을
 * 한 덩어리로 세는 바람에 전용으로 보여 빠졌다가 되살렸다(2026-08-12). */
.bi-msgsend__recv{ padding: var(--space-4_5, 18px); flex: 1 1 240px; min-width: 0; height: 400px; box-sizing: border-box; }
.bi-msgsend__vline{ margin: auto; height: 460px; width: 1px; border-left: 1px solid var(--border-base); }
.bi-msgsend__notice{ box-sizing: border-box; padding: var(--space-2_5); border: 1px solid var(--border-base);
                      height: auto; background: var(--bg-input); box-sizing: border-box; }
.bi-msgsend__list{ width: 96%; height: 368px; }
.bi-msgsend__dot{ margin: auto; height: 10px; width: 10px; background-image: url('/img/page/line-cicle.gif'); }
.bi-msgsend__caption{ font-size: var(--fs-sm); background-color: var(--bg-input); font-weight: var(--fw-bold);
                       color: var(--txt-muted); padding: var(--space-1_5) 0; }
.bi-msgprev-phone__body--a  { height: 188px; padding-top: var(--space-10, 40px); text-align: center; background-image: url("/img/page/bgSmsInputA.gif"); }
.bi-msgprev-phone__body--ph { height: 176px; text-align: center; background-image: url("/img/page/bgPhoneBody.gif"); }
.bi-msgprev-phone__body--add{ width: 210px; margin: auto; height: 176px; padding-top: var(--space-6); text-align: center; background-image: url("/img/page/bgSmsInputAdd.gif"); }
.bi-msgprev-phone__ta--sm   { width: 185px; height: 120px; overflow: hidden; line-height: 16px; letter-spacing: -0.5pt; word-wrap: break-word; font-family: 돋움체; background-color: transparent; border: 0; cursor: pointer; }
.bi-msgprev-phone__size--sm { width: 85%; text-align: right; padding-top: var(--space-1); }
.bi-msgprev-phone__body--lms2{ height: 363px; padding-top: var(--space-10); text-align: center;
                                background-image: url('/img/page/bgSmsInputB.gif'); }

/* ── lib/js·src 가 찍어내는 마크업의 규격 (2026-08-12 복구) ─────────
 * list_pages()·행 체크·컬럼배치 드롭다운·팝업 헤더는 **공통 JS 가 문자열로**
 * 만든다. 규격 사용처 계산이 template/ 만 보던 때 "한 화면 전용"으로 오인돼
 * 지워졌다 → 되살린다. **지우기 전에 lib/js·src 도 사용처로 세라.**
 * ──────────────────────────────────────────────────────────────── */
.bi-log-row--w7   { grid-template-columns: repeat(7,  minmax(80px, 1fr)); }
.bi-log-row--w12  { grid-template-columns: repeat(12, minmax(80px, 1fr)); }
.bi-log-row--w19  { grid-template-columns: repeat(19, minmax(80px, 1fr)); }
.bi-pop-head-left { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.bi-pop-head-ico {
    width: 32px; height: 32px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--brand-blue-light); color: var(--brand-blue);
    border-radius: var(--radius-md); font-size: var(--fs-md);
}
.bi-pop-head .bi-pop-head-ico i.fal { font-weight: 300; }
/* 스타일보드 §06 — 닫기 26×26(2026-08-25). 32 는 헤더에서 과하게 컸다. */
.bi-pop-head-close {
    width: var(--pop-close); height: var(--pop-close); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border: 0; background: none;                 /* <button> 로도 쓰이므로 리셋 */
    border-radius: var(--radius-md); color: var(--txt-muted); font-size: var(--fs-lg);
    cursor: pointer; transition: var(--transition-base);
}
.bi-pop-head-close:hover { background: var(--border-light); color: var(--txt-primary); }
/* 페이징 줄 — 이전·숫자·다음이 서로 붙지 않게 (사용자 2026-08-12).
 * 감싸개에 배치 규격이 없어 버튼들이 맞붙어 있었다. 간격은 눈금(--space-1_5=6px).
 * §40-10 .bi-row 로도 되지만, 이 줄은 **공통 JS 가 찍는 고정 구조**라 이름을 준다. */
.bi-pg-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-1_5);
    padding: var(--space-2_5) 0;
}
.bi-pg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1_5);
    min-width: 32px;
    height: 32px;
    padding: 0 var(--space-2_5);
    border: 1px solid var(--border-base);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    color: var(--txt-secondary);
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
    line-height: 1;
    white-space: nowrap;
    box-sizing: border-box;
    user-select: none;
}
.bi-pg-btn:hover {
    background: var(--bg-input);
    border-color: var(--gray-300);
}
.bi-pg-btn--active {
    background: var(--brand-blue);
    border-color: var(--brand-blue);
    color: var(--bg-card);
    cursor: default;
}
.bi-pg-btn--disabled {
    color: var(--gray-300);
    cursor: default;
    pointer-events: none;
}
.bi-ra-col-dropdown {
    position: absolute;
    top: 42px; right: 0;
    min-width: 240px; max-height: 380px;
    display: flex; flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border-base);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    padding: var(--space-2) 0;
    z-index: 30;
    overflow: hidden;
}
.bi-ra-col-dropdown[hidden] { display: none; }
.bi-ra-col-dropdown__header {
    padding: var(--space-1_5) var(--space-3_5) var(--space-2);
    font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--txt-muted);
    border-bottom: 1px solid var(--border-light);
    margin-bottom: var(--space-1);
}
.bi-ra-col-list {
    list-style: none; margin: 0; padding: 0;
    flex: 1 1 auto; overflow-y: auto; max-height: 280px;
}
.bi-ra-col-list::-webkit-scrollbar { width: 8px; }
.bi-ra-col-list::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: var(--radius-sm); }
.bi-ra-col-list::-webkit-scrollbar-thumb:hover { background: var(--txt-disabled); }
.bi-ra-col-list::-webkit-scrollbar-track { background: transparent; }
.bi-ra-col-list__row {
    display: flex; align-items: center; justify-content: space-between;
    transition: background .12s;
}
.bi-ra-col-list__row:hover { background: var(--bg-input); }
.bi-ra-col-list__item {
    display: flex; align-items: center; gap: var(--space-2_5);
    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3_5);
    font-size: var(--fs-base); color: var(--txt-primary); cursor: pointer;
    flex: 1 1 auto; min-width: 0;
    transition: color .12s;
}
.bi-ra-col-list__item input[type=checkbox] {
    width: 14px; height: 14px;
    accent-color: var(--brand-blue, var(--brand-blue));
    margin: 0; cursor: pointer; flex-shrink: 0;
    visibility: visible; display: inline-block; /* style.css 글로벌 체크박스 숨김 무력화 */
}
.bi-ra-col-list__item > span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bi-ra-col-list__item.is-hidden { color: var(--txt-disabled); }
.bi-ra-col-list__item.is-hidden > span { text-decoration: line-through; text-decoration-color: var(--gray-300); }
.bi-ra-col-list__moves { display: inline-flex; align-items: center; gap: var(--space-0_5); padding-right: var(--space-2); flex-shrink: 0; }
.bi-ra-col-move {
    width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 1px solid transparent; border-radius: var(--radius-md);
    color: var(--txt-muted); cursor: pointer; font-size: var(--fs-xs); padding: 0;
    transition: background .12s, color .12s, border-color .12s;
}
.bi-ra-col-move:hover { background: var(--bg-card); border-color: var(--border-base); color: var(--brand-blue, var(--brand-blue)); }
.bi-ra-col-dropdown__divider { height: 1px; background: var(--border-light); margin: var(--space-1_5) 0; }
.bi-ra-col-dropdown__reset {
    width: calc(100% - 12px); margin: 0 var(--space-1_5); padding: var(--space-2) var(--space-2_5);
    background: var(--bg-card); border: 1px solid var(--border-base); border-radius: var(--radius-lg);
    color: var(--color-danger); font-size: var(--fs-sm); font-weight: var(--fw-semibold); text-align: center; cursor: pointer;
    transition: background .15s, border-color .15s;
}
.bi-ra-col-dropdown__reset:hover { background: var(--color-danger-50); border-color: var(--color-danger-200); }
.bi-ra-col-dropdown__reset i { margin-right: var(--space-1); }
.bi-erp-selected {
    display: inline-flex; align-items: center; gap: var(--space-1);
    font-size: var(--fs-base); font-weight: var(--fw-semibold);
    color: var(--txt-muted); margin-right: var(--space-1); white-space: nowrap;
}
.bi-erp-selected b { color: var(--brand-blue); font-weight: var(--fw-extrabold); }
.bi-erp-selected.is-on { color: var(--txt-primary); }
.bi-rowchk { width: 16px; height: 16px; margin: 0; cursor: pointer; accent-color: var(--brand-blue); vertical-align: middle; }
/* 스타일보드 §07 해부도 — 헤더 여백 14·18(2026-08-25). 전 10·16 이라 헤더가 4px 얕았다. */
.bi-pop-head--compact{ padding: var(--pop-head-pad-y) var(--pop-head-pad-x); }   /* 보드 §07 — 14·18 */
.bi-pop-head--compact .bi-pop-head-left{ gap: var(--pop-head-gap); }
/* 스타일보드 Don't 첫 줄 «아이콘에 색을 넣지 않는다 — 헤더 #9CA3AF, 닫기 #6B7280 고정».
 * 파란 아이콘은 «눌러야 할 곳» 으로 읽힌다 — 헤더는 조용해야 한다(2026-08-25). */
.bi-pop-head--compact .bi-pop-head-ico{
    /* 보드 §07 «아이콘(28box · 회색)» — 상자 크기가 헤더 높이(56)를 만든다.
       auto 로 두면 글자 높이(16)만큼만 차지해 헤더가 54 로 얕아졌다(2026-08-25). */
    width: 28px; height: 28px; border-radius: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: none; color: var(--pop-ico); font-size: var(--fs-lg);
}

/* ── §40-13 인증 화면 — 로그인은 셸 밖 단독 페이지 (2026-08-12 복구) ──────
 * ⚠ 한 화면에서만 쓴다. 그래서 "한 곳 전용" 판정에 걸려 걷혔고 로그인이 무너졌다.
 *   단독 페이지의 규격은 **그 화면 전체가 그 규격**이라 사용처가 하나인 게 정상이다.
 *   지우기 전에 물어야 할 것은 "몇 곳에서 쓰나" 가 아니라 "지우면 무엇이 남나" 다.
 * ──────────────────────────────────────────────────────────────── */
.bi-auth {
    background: var(--bg-page);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
    box-sizing: border-box;
}
body.bi-auth { min-height: 100vh; margin: 0; }
.bi-auth__wrap  { width: 100%; max-width: 420px; }
.bi-auth__logo  { display: flex; justify-content: center; margin-bottom: var(--space-5); }
.bi-auth__logo img { max-width: 100%; height: auto; }
.bi-auth__head  { text-align: center; margin-bottom: var(--space-6); }
/* ⚠ 로그인 카드는 **write 폼이 아니다**. §21 의 .bi-erp-card > form 여백(16·24·32)을 물려받아
 *   로고·제목은 카드 모서리에 붙고 폼만 안쪽으로 들어가 있었다 — 위 0 / 아래 32 로 비대칭이었고,
 *   제목과 첫 입력칸 사이만 40px(24 margin + 16 padding)로 혼자 벌어졌다(사용자 지적 2026-08-13).
 *   여백은 **카드가 사방 균일하게** 맡고, 폼은 자기 여백을 갖지 않는다.
 *   세로 리듬: 카드 32 → 로고 20 → 제목·부제 24 → 칸 12 → 버튼 12 → 옵션 16 → 카드 32 */
.bi-auth__wrap .bi-erp-card { padding: var(--space-8); }
.bi-auth__wrap .bi-erp-card > form { padding: 0; overflow-y: visible; }
.bi-auth__form  { margin: 0; }
.bi-auth__head > * { margin: 0; }
.bi-auth__head { display: flex; flex-direction: column; gap: var(--space-2); }
.bi-auth__field { margin-bottom: var(--space-3); }
/* 2026-08-13 로그인 버튼과 체크박스가 **간격 0** 으로 맞붙어 있었다(버튼 아래 616 = 그룹 위 616).
 *   확정 액션과 옵션은 다른 묶음이다 — 칸 사이(12px)보다 한 칸 넓게 띄운다. */
.bi-auth__form .bi-checkbox-group { margin-top: var(--space-4); }
.bi-auth__alert {
    display: none;
    margin-bottom: var(--space-3_5);
    padding: var(--space-2_5) var(--space-3);
    background: var(--color-danger-50);
    border: 1px solid var(--color-danger-200);
    border-radius: var(--radius-xl);
    font-size: var(--fs-sm);
    line-height: 1.4;
    color: var(--color-danger);
}
.bi-auth__alert.is-show { display: block; }
.bi-auth__brand      { display: flex; justify-content: center; align-items: flex-end; }
.bi-auth__brand-star { align-self: flex-end; margin-bottom: var(--space-1); width: 54px; height: 54px; }
.bi-auth__brand-txt  { margin-left: var(--space-1_5); }
.bi-auth__brand-name {
    display: flex;
    font-size: var(--fs-3xl);
    font-weight: var(--fw-semibold);
    line-height: 35px;
    letter-spacing: -0.01em;
}
.bi-auth__brand-a   { color: var(--color-info-600); }
.bi-auth__brand-dot { color: var(--txt-muted); }
.bi-auth__brand-b   { color: var(--color-info-500); }   /* 구 var(--color-cyan-500, --color-info-400) — 둘 다 정의 없어 무효였다(2026-08-25) */
.bi-auth__brand-sub {
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    margin-left: var(--space-0_5);
    letter-spacing: -0.02em;
    color: color-mix(in srgb, var(--black) 50%, transparent);
}

/* ════════════════════════════════════════════════════════════
   되살린 규격 — "한 곳 전용" 판정으로 걷혔던 것들 (2026-08-12)

   ⚠ 지우기 전에 물어야 할 것은 «몇 곳에서 쓰나» 가 아니라 «지우면 무엇이 남나» 다.
     로그인·디자이너 탭·예약 일정표·AI 메시지 발송은 사용처가 하나지만
     그 화면의 **구조 자체**였다. 걷어내니 화면이 통째로 무너졌다.
   규격화는 다시 한다 — 기준은 «같은 것이 둘 이상 있는가»(SPEC-DUP) 다.
   ════════════════════════════════════════════════════════════ */
.bi-logo-img { width: 70%; height: auto; margin-top: var(--space-2); }
.logo.bi-logo-light {
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-light);   /* 헤더와의 경계 (mockup) */
}
.bi-logo-light .h_log_box { padding-right: 0; gap: var(--space-2); }
.bi-logo-light .h_shooting_star { width: 26px; height: 26px; margin-bottom: 0; align-self: center; }
.bi-logo-light .h_shooting_star svg .fa-primary   { fill: var(--brand-navy); }
.bi-logo-light .h_shooting_star svg .fa-secondary { fill: var(--brand-blue); }
.bi-logo-light .h_logo_wirte_top {
    color: var(--brand-navy);
    font-size: var(--fs-xl);
    font-weight: var(--fw-extrabold);
    margin-bottom: 0;
}
.bi-row-center     { display: flex; align-items: center; justify-content: center; }
.bi-row--shrink-0  { flex-shrink: 0; }
.bi-row--gap-10    { --bi-row-gap: 10px; }
.bi-col--gap-5     { --bi-col-gap: 5px; }
.bi-col--gap-14    { --bi-col-gap: 14px; }.bi-segment--fill           { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--space-1); }   /* 버튼 균등폭(2등분 등) */
.bi-modal__body { padding: var(--space-5) var(--space-5); overflow-y: auto; }.bookmark-container.bi-bm {
    position: fixed;
    right: 24px;
    bottom: 24px;
    left: auto;
    width: auto;
    height: auto;
    min-height: 0;
    background: transparent;
    box-shadow: none;
    border: none;
    border-radius: 0;
    overflow: visible;
    transition: none;
    z-index: 60;
}
.bookmark-container.bi-bm.expanded { width: auto; min-height: 0; }
.bookmark-container.bi-bm:hover:not(.expanded):not(.collapsing) {
    width: auto;
    box-shadow: none;
}
.bi-bm-fab {
    position: relative;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-blue) 100%);
    color: var(--bg-card);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-xl);
    cursor: pointer;
    box-shadow: var(--shadow-lg);
    opacity: 1;
    visibility: visible;
    transition: transform .15s ease, box-shadow .15s ease;
    animation: bi-bm-fab-float 3s ease-in-out infinite;
}
.bookmark-container.bi-bm:hover .bi-bm-fab { transform: scale(1.06); box-shadow: var(--shadow-lg); }
.bi-bm-fab::before { content: none; }   /* 구 .bookmark-icon::before(28px) 제거 */
.bookmark-container.bi-bm.expanded .bi-bm-fab { display: none; }
.bi-bm-fab-dot {
    position: absolute;
    top: 9px;
    right: 9px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--color-danger);
    border: 2px solid var(--white);
}
.bi-bm-fab-dot::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--color-danger) 60%, transparent);
    animation: bi-bm-pulse 1.8s ease-out infinite;
}
.bi-bm-card {
    /* 구 .bookmark-content(absolute inset, opacity 토글) 무력화 */
    position: static;
    top: auto; left: auto;
    display: none;
    width: 360px;
    max-width: calc(100vw - 48px);
    padding: 0;   /* 구 .bookmark-content padding:20px 제거 (내부에서 패딩) */
    background: var(--bg-card);
    border: 1px solid var(--border-base);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    flex-direction: column;
}
.bookmark-container.bi-bm.expanded .bi-bm-card {
    display: flex;
    animation: bi-bm-card-in .18s ease;
}
.bi-bm-card-head {
    display: flex;
    align-items: center;
    gap: var(--space-2_5);
    padding: var(--space-3_5) var(--space-4);
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-100);
}
.bi-bm-card-head-ico {
    width: 30px; height: 30px;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--brand-blue) 10%, transparent);
    color: var(--brand-blue);
    border-radius: var(--radius-lg);
    font-size: var(--fs-md);
}
.bi-bm-card-title {
    font-size: var(--fs-md);
    font-weight: var(--fw-extrabold);
    color: var(--txt-primary);
    margin: 0;
    padding: 0;            /* 구 .bookmark-title padding:10px 0 제거 */
    border-bottom: none;   /* 구 .bookmark-title 밑줄 제거 */
}
.bi-bm-card-msg {
    padding: var(--space-3_5) var(--space-4);
    margin: 0;             /* 구 .bookmark-message margin-bottom:20px 제거 */
    font-size: var(--fs-base);
    line-height: 1.65;
    color: var(--gray-600);
    max-height: 240px;
    overflow-y: auto;
}
.bi-bm-card-msg .highlight-date {
    color: var(--brand-blue);
    font-weight: var(--fw-bold);
}
.bi-bm-card-actions {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--gray-100);
}
.bi-bm-btn {
    padding: var(--space-2_5) var(--space-3_5);
    border: 1px solid transparent;
    border-radius: var(--radius-xl);
    font-size: var(--fs-base);
    font-weight: var(--fw-bold);
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.bi-bm-btn--ghost {
    flex: 0 0 84px;   /* 구 .btn-close flex:0.5 무력화 */
    background: var(--bg-card);
    color: var(--txt-muted);
    border-color: var(--border-base);
}
.bi-bm-btn--ghost:hover { background: var(--border-light); color: var(--txt-secondary); }
.bi-bm-btn--send {
    flex: 1;
    background: var(--brand-blue);
    color: var(--bg-card);
}
.bi-bm-btn--send:hover { background: var(--brand-blue-hover); transform: none; box-shadow: none; }
.bi-marketing-select {
    width: 140px;
    padding: 0 var(--space-2);
    background: var(--bg-input);
}
.bi-marketing-branch-select {
    width: 200px;
    padding: 0 var(--space-2);
    background: var(--bg-input);
}.bi-table-wrap  { width: 100%; overflow-x: auto; }
.bi-field-row    { margin: var(--space-2) 0; }
.bi-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: var(--radius-full);
    background: var(--brand-lavender); color: var(--brand-blue);
    font-size: var(--fs-sm); font-weight: var(--fw-bold); flex-shrink: 0;
}
.bi-dropdown__item {
    padding: var(--space-1_5) var(--space-3); font-size: var(--fs-base);
    color: var(--txt-secondary); border-radius: var(--radius-md); cursor: pointer;
}
.bi-dropdown__item:hover { background: var(--bg-input); color: var(--txt-primary); }
.bi-dropdown__item--danger { color: var(--color-danger-600); }
.bi-emptybox__sub   { margin: 0; font-size: var(--fs-sm); color: var(--txt-muted); }
.bi-popover--right { right: 0; left: auto; }
.bi-popover-list { list-style: none; padding: var(--space-1_5); margin: 0; }
.bi-popover-item { padding-bottom: var(--space-2_5); border-bottom: 1px solid var(--border-light); }
.bi-popover-item:last-child { border-bottom: none; padding-bottom: 0; }
.bi-popover-name { display: inline-block; background: var(--color-info-100); color: var(--brand-blue); padding: var(--space-0_5) var(--space-1_5); border-radius: var(--radius-sm); font-weight: var(--fw-bold); }
.bi-popover-desc { margin-top: var(--space-1); font-size: var(--fs-sm); color: var(--txt-muted); }
.bi-filter-card select.bi-input, .bi-erp-filter select.bi-input { padding: 0 var(--space-2); background: var(--bg-input); }
.bi-page .bi-grid-input {
    width: 100%;          /* 컬럼(셀) 폭에 맞춤 — 모듈별 폭 하드코딩 대신 컬럼 width 가 기준 */
    height: 30px;
    text-align: center;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    font-size: var(--fs-base);
    color: var(--txt-primary);
    padding: 0 var(--space-1_5);
    outline: none;
    box-sizing: border-box;
    cursor: text;
    transition: border-color .15s, box-shadow .15s;
}
.bi-page .bi-grid-input:hover  { border-color: var(--txt-disabled); }
.bi-page .bi-grid-input:focus  { border-color: var(--brand-blue); box-shadow: var(--ring-focus); }
.bi-page .bi-grid-input--right { text-align: right; }
/* (구 .bi-date-notice — 고객메모내역의 「* 데이터 수집 기간… 」 안내문 전용이었다.
   2026-08-25 사용자 지시로 그 문구를 빼자 **사용처가 0** 이 되어 같이 지웠다.
   같은 자리가 다시 필요하면 규격으로 새로 등록한다 — 죽은 채로 두지 않는다.) */

/* ── 디자이너 필터 필바 ──────────────────────────────────────────
 * ⚠ 2026-08-21 두 가지를 고쳤다(사용자 지적).
 *   ① 아래 2px 밑줄 — 밑줄 탭(underline tab)의 잔재였다. 이건 **알약(pill)** 이라
 *      밑줄이 필요 없고, 바로 아래 필터카드의 구분선과 겹쳐 **두 줄로** 보였다.
 *   ② 좌우 화살표 — 디자이너가 적어 넘치지 않는데도 항상 떠 있었다.
 *      화살표는 «넘쳐서 못 보는 게 있다» 는 신호다. 안 넘치면 신호가 아니라 잡음이다.
 *      → 넘칠 때만 .is-scrollable 이 붙고, 그때만 보인다. */
.bi-pillbar { display: flex; align-items: center; gap: var(--space-1); height: 36px; overflow: hidden; }
.bi-pillbar:not(.is-scrollable) .bi-pillbar__arrow { display: none; }
.bi-pillbar__scroll { flex: 1; overflow-x: auto; display: flex; align-items: center; gap: var(--space-1_5); scrollbar-width: none; }
.bi-pillbar__scroll::-webkit-scrollbar { display: none; }
.bi-pillbar__pill { padding: 0; font-weight: var(--fw-normal); cursor: pointer; flex-shrink: 0; }
.bi-pillbar__pill:first-child { padding: 0; }
/* 2026-08-24 — 상태 탭(.bi-erp-tab)과 같은 크기로 맞췄다(사용자 지시).
 * 둘 다 «필터 줄에 서는 알약» 이라 같은 것이어야 한다. 실측은 23px vs 32px 로 갈려 있었다.
 * 높이는 여백이 아니라 height 로 고정한다 — 여백으로 정하면 글자 길이·자식 유무에 따라 흔들린다. */
.bi-pillbar__pill span {
    display: inline-flex; align-items: center;
    height: 32px; padding: 0 var(--space-3_5);
    font-size: var(--fs-sm); font-weight: var(--fw-medium);
    border-radius: var(--radius-full); border: 1px solid var(--border-base);
    background: var(--bg-card); color: var(--txt-muted);
    white-space: nowrap; transition: all .15s;
}
.bi-pillbar__pill span:hover { background: var(--bg-input); border-color: var(--gray-300); }
.bi-pillbar__pill span.bi-pillbar__pill-active {
    background: var(--brand-navy); color: var(--bg-card);
    border-color: var(--brand-navy); border-bottom: none;
    box-shadow: var(--shadow-md);
}.bi-filter-card {
    background: var(--bg-card);
    padding: var(--space-5);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-base);
    box-shadow: var(--shadow-sm);
    flex-shrink: 0;
}
.bi-filter-card--compact { padding: var(--space-3) var(--space-5); }   /* 밀집 레이아웃(캘린더·매트릭스 컨트롤 행) */
.bi-filter-card--hidden  { display: none; }          /* 필터카드 숨김(DOM 유지, JS 토글) */
.bi-filter-card input[type="text"].bi-input {
    background: var(--bg-card);
    height: 36px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.bi-filter-card input[type="text"].bi-input:focus {
    border-color: var(--brand-blue);
    box-shadow: var(--ring-focus);
    background: var(--bg-card);
}
.bi-res-pagination {
    flex-shrink: 0;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid var(--border-base);
    background: var(--bg-card);
}.bi-page .scale-title {
    fill: var(--txt-muted);
    font-weight: 600;
}
.bi-page .bar-text {
    fill: var(--txt-muted);
}.bi-page .main-scale {
    stroke: var(--border-base);
}.bi-anl-chart-box--tall  { height: 320px; }
.bi-anl-chart-box--xtall { height: 420px; }
.bi-anl-grid { width: 100%; overflow: hidden; }
.bi-anl-grid--sm { min-height: 79px; }
.bi-anl-grid--md { min-height: 153px; }
.bi-anl-matrix { border: 1px solid var(--border-base); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-card); max-width: 720px; }
.bi-anl-matrix-row { display: flex; border-bottom: 1px solid var(--border-light); }
.bi-anl-matrix-row:last-child { border-bottom: none; }
.bi-anl-matrix-row--head { background: var(--bg-input); font-weight: var(--fw-semibold); color: var(--txt-primary); }
.bi-anl-matrix-cell { flex: 1; padding: var(--space-2_5) var(--space-4); text-align: right; font-size: var(--fs-base); color: var(--txt-secondary); box-sizing: border-box; border-left: 1px solid var(--border-light); }
.bi-anl-matrix-cell:first-child { border-left: none; }
.bi-anl-matrix-cell--label { background: var(--bg-input); }.bi-erp-divider { border-top: 1px solid var(--gray-100); padding-top: var(--space-3); margin-top: 0; }
.bi-erp-tab-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 16px; padding: 0 var(--space-1_5);
    border-radius: var(--radius-full); background: var(--border-light); color: var(--txt-muted);
    font-size: var(--fs-2xs); font-weight: var(--fw-bold); line-height: 1;
}
.bi-erp-tab.is-active .bi-erp-tab-count { background: color-mix(in srgb, var(--white) 20%, transparent); color: var(--bg-card); }
   17개 모듈의 .bi-{x}-total/-summary 중복 → 이 공통 클래스로 대체 예정.
/* ⚠ 2026-08-21 — 합계 클래스는 dhx `mark` 훅으로 «셀» 에 붙는다(행이 아니다).
 * 행 셀렉터만 있으면 배경만 먹고 굵기가 안 먹는다 → 셀 자신도 잡는다.
 * (그 전에는 `cellCss` 로 걸어 두어 **아무 데도 안 붙고 있었다** — 12개 리포트가 그랬다) */
.bi-grid-total,
.bi-grid-total .dhx_grid-cell,
.dhx_grid-cell.bi-grid-total {
    background: var(--border-light);
    font-weight: var(--fw-bold);
    color: var(--txt-primary);
}
.bi-permmatrix-group-select { max-width: 340px; }
.bi-permmatrix-matrix-body { padding: 0; }
.bi-permmatrix-matrix { background: var(--bg-card); overflow: hidden; }
.bi-permmatrix-row:not(.bi-permmatrix-row--head):hover { background: var(--color-info-50); }
.bi-permmatrix-row--head {
    background: var(--bg-input); border-bottom: 1px solid var(--border-base);
    font-weight: var(--fw-semibold); font-size: var(--fs-sm);
}
.bi-permmatrix-row--head .bi-permmatrix-cell {
    padding: var(--space-3) var(--space-2); text-align: center; color: var(--txt-muted); font-weight: var(--fw-semibold);
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1_5);
}
.bi-permmatrix-row--head .bi-permmatrix-cell--name { justify-content: flex-start; text-align: left; padding-left: var(--space-5); color: var(--txt-secondary); }
.bi-permmatrix-row--head .bi-permmatrix-cell i { font-size: var(--fs-xs); color: var(--txt-disabled); }
.bi-permmatrix-row--head .bi-permmatrix-cell + .bi-permmatrix-cell { box-shadow: inset 1px 0 0 var(--gray-100); }
.bi-permmatrix-cell { padding: var(--space-3) var(--space-2); text-align: center; font-size: var(--fs-base); color: var(--txt-secondary); }
.bi-permmatrix-cell--name { text-align: left; padding-left: var(--space-5); font-weight: var(--fw-semibold); color: var(--gray-800); }
.bi-permmatrix-row:not(.bi-permmatrix-row--head) .bi-permmatrix-cell--all { background: color-mix(in srgb, var(--brand-navy) 5%, transparent); }
.bi-permmatrix-category {
    display: flex; align-items: center; gap: var(--space-2);
    background: var(--color-indigo-50); color: var(--brand-blue); font-weight: var(--fw-extrabold); font-size: var(--fs-xs);
    padding: var(--space-2_5) var(--space-5); border-bottom: 1px solid var(--border-base);
    text-transform: uppercase; letter-spacing: .04em;
}
.bi-permmatrix-category::before {
    content: '\f0c9'; font-family: 'Font Awesome 5 Pro'; font-weight: var(--fw-black);
    font-size: var(--fs-xs); opacity: .65;
}
.bi-permmatrix-check {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1_5);
    cursor: pointer; margin: 0;
}
.bi-permmatrix-check input[type="checkbox"] {
    visibility: visible; display: inline-block;
    width: 17px; height: 17px;
    accent-color: var(--brand-blue); cursor: pointer; margin: 0;
    position: static;
}
.bi-permmatrix-check input[type="checkbox"] + span { font-size: var(--fs-base); color: var(--txt-secondary); }
.bi-permmatrix-row--head .bi-permmatrix-check input[type="checkbox"] + span { color: var(--txt-muted); font-weight: var(--fw-semibold); }.bi-write-note { font-size: var(--fs-xs); color: var(--txt-muted); }
.bi-write-unit { font-size: var(--fs-base); color: var(--txt-muted); flex-shrink: 0; }
.bi-write-req { color: var(--color-danger); margin-left: var(--space-0_5); }.bi-write-field--quarter { flex: 0 0 calc(25% - 10px); max-width: calc(25% - 10px); }
.bi-write-type-label { min-width: 120px; font-weight: var(--fw-semibold); color: var(--gray-600); }
.bi-write-divider   { border-top: 1px solid var(--border-base); padding-top: var(--space-3); margin-top: var(--space-3); }.bi-write-notice--block { display: block; line-height: 1.8; align-items: initial; }
.bi-write-split__side { flex: 0 0 300px; }
/* 2026-09-02 — 미리보기(폰·알림톡)는 둘 다 250 인데 칸이 300 이라 오른쪽에 50px 이 죽어 있었다.
   그 죽은 공간이 gap 16 과 겹쳐 「간격이 너무 넓다」 로 보였다(사용자 지적).
   기존 규칙은 그대로 두고 «내용 폭에 맞춘 칸» 을 modifier 로 더한다. */
.bi-write-split__side--fit { flex: 0 0 250px; }
.bi-write-split__main { flex: 1; min-width: 360px; }.bi-desk__chart, .bi-row { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.bi-bk-subbar {
    height: 44px; flex-shrink: 0; box-sizing: border-box;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 var(--space-4);
    background: var(--bg-card);
    border: 1px solid color-mix(in srgb, var(--border-base) 90%, transparent); border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-sm);
}
.bi-bki-status.sp_status1 { background: var(--color-success-500); }
.bi-bki-status.sp_status2 { background: var(--color-info-600); }
.bi-bki-status.sp_status4 { background: var(--txt-muted); }.bi-bksch-emp-dot.dot-c0 { background: var(--color-indigo-500); }
.bi-bksch-emp-dot.dot-c1 { background: var(--color-purple-500); }
.bi-bksch-emp-dot.dot-c2 { background: var(--color-pink-500); }
.bi-bksch-emp-dot.dot-c3 { background: var(--color-success-500); }
.bi-bksch-emp-dot.dot-c4 { background: var(--color-warning); }
.bi-bksch-emp-dot.dot-c5 { background: var(--color-info-500); }
.bi-bksch-emp-dot.dot-c6 { background: var(--color-success-500); }
.bi-bksch-emp-dot.dot-c7 { background: var(--color-rose-500); }.bi-counter-select {
    height: 40px; padding: 0 var(--space-2_5); background: var(--bg-card);
    border: 1px solid var(--cc-line); border-radius: var(--radius-xl);
    font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--gray-800); outline: none; cursor: pointer;
}
.bi-counter-select:focus { border-color: var(--cc-blue); }
.bi-counter-wrap input[type="text"].bi-counter-input--search { padding-left: var(--space-10); }.bi-counter-foot-val--rose { color: var(--color-rose-500); font-weight: var(--fw-extrabold); }
.bi-counter-hcard {
    background: var(--bg-card); padding: var(--space-3); border-radius: var(--radius-xl); border: 1px solid var(--cc-line);
    box-shadow: var(--shadow-xs);
}
.bi-counter-hcard.is-dim { opacity: .8; border-color: var(--cc-line-l); }
.bi-counter-hcard__top {
    display: flex; justify-content: space-between; font-size: var(--fs-sm);
    padding-bottom: var(--space-1_5); border-bottom: 1px solid var(--cc-line-l); margin-bottom: var(--space-1_5);
}
.bi-counter-hcard__top strong { color: var(--gray-800); font-variant-numeric: tabular-nums; }
.bi-counter-hcard.is-dim .bi-counter-hcard__top strong { color: var(--cc-gray-l); }
.bi-counter-hcard__top span { color: var(--cc-gray-l); font-weight: var(--fw-bold); }
.bi-counter-hcard__name { font-weight: var(--fw-extrabold); color: var(--gray-800); font-size: var(--fs-md); margin: 0; }
.bi-counter-hcard.is-dim .bi-counter-hcard__name { color: var(--txt-muted); }
.bi-counter-hcard__amt { text-align: right; font-size: var(--fs-sm); color: var(--txt-muted); font-variant-numeric: tabular-nums; margin: var(--space-1) 0 0; font-weight: var(--fw-bold); }.bi-counter-pay-btn--pay { background: var(--color-npay); }
.bi-counter-pay-btn--pay:hover:not(:disabled) { filter: brightness(1.05); }.bi-bs-pro-td--disc  { text-align: right; }.bi-bs-pro-total-wrap .bi-bs-pro-input {
    flex: 1;
    width: 0;
    min-width: 0;
}
.bi-bs-pro-total-sep {
    color: var(--gray-300);
    font-size: var(--fs-xs);
    flex-shrink: 0;
    user-select: none;
}.bi-bs-bank-badge {
    font-size: var(--fs-xs);
    color: var(--txt-muted);
    background: var(--border-light);
    border-radius: var(--radius-xs);
    padding: var(--space-0_5) var(--space-1);
    margin-left: var(--space-1);
}
.bi-bs-pay-grid-2 .bi-bs-pay-btn {
    height: auto;
    min-height: 80px;
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    border-radius: var(--radius-xl);
    padding: var(--space-4) var(--space-2);
    box-shadow: var(--shadow-sm);
}
.bi-bs-pay-grid-2 .bi-bs-pay-btn:active { transform: scale(.97); }
.bi-bs-pay-grid-3 .bi-bs-pay-btn {
    height: 44px;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
}
.bi-bs-counter .bi-bs-hidden-btn { display: none; }.bi-bs-counter .bi-counter-pay-btn.bi-bs-pay-btn--inactive { opacity: .4; pointer-events: none; }
.bi-bs-reg-box { width: 460px; max-width: 92vw; padding: var(--space-6); border-radius: var(--radius-2xl);   /* 2026-08-07 스케일 밖 24px → 16px 스냅 */ gap: var(--space-4); color: var(--txt-primary); }
.bi-bs-reg-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: var(--space-2); border-bottom: 1px solid var(--border-light); }
.bi-bs-reg-icon { width: 34px; height: 34px; border-radius: 50%; background: var(--color-info-50); border: 1px solid var(--color-info-100); color: var(--brand-blue); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bi-bs-reg-title { font-size: var(--fs-lg); font-weight: var(--fw-extrabold); color: var(--txt-primary); margin: 0; }
.bi-bs-reg-desc { font-size: var(--fs-sm); color: var(--txt-disabled); margin: var(--space-0_5) 0 0; }
.bi-bs-reg-close { width: 28px; height: 28px; border: 0; background: none; color: var(--txt-disabled); cursor: pointer; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.bi-bs-reg-close:hover { color: var(--gray-600); background: var(--border-light); }
.bi-bs-reg-footer { display: flex; gap: var(--space-2_5); padding-top: var(--space-3_5); border-top: 1px solid var(--border-light); }
.bi-bs-reg-cancel  { flex: 1;   padding: var(--space-3); border-radius: var(--radius-xl); font-weight: var(--fw-extrabold); }
.bi-bs-reg-confirm { flex: 1.5; padding: var(--space-3); border-radius: var(--radius-xl); font-weight: var(--fw-extrabold); box-shadow: var(--shadow-md); }
.bi-bs-counter .bi-bs-pnl-more--split { display: flex; align-items: center; justify-content: space-between; }
.bi-bs-counter .bi-bs-pkg-sms-btn {
    display: inline-flex; align-items: center; gap: var(--space-1_5);
    padding: var(--space-1_5) var(--space-3); border-radius: var(--radius-lg); border: 1px solid var(--color-info-100);
    background: var(--color-info-50); color: var(--brand-blue); font-size: var(--fs-sm); font-weight: var(--fw-extrabold); cursor: pointer;
    transition: background .12s;
}
.bi-bs-counter .bi-bs-pkg-sms-btn:hover { background: var(--color-info-100); }.bi-bs-counter .bi-bs-pro-th--disc { width: 124px; text-align: center; }
/* 2026-08-26 — justify-content 는 flex 전용이라 table-cell 에선 안 먹는다 → text-align */
.bi-bs-counter .bi-bs-pro-td--disc { text-align: center; }
.bi-bs-counter .bi-counter-foot-val--rose { font-weight: var(--fw-black); }
.bi-bs-counter .bi-bs-vcard-cnt {
    font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--brand-blue);
    background: var(--color-info-50); border: 1px solid var(--color-info-100); border-radius: var(--radius-full);
    padding: var(--space-0_5) var(--space-2_5); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.bi-bs-counter .bi-bs-vcard-cnt b { font-weight: var(--fw-black); font-size: var(--fs-sm); }
.bi-bs-counter .bi-bs-vcard-cnt--inf { color: var(--color-success); background: var(--color-success-50); border-color: var(--color-success-100); }
.bi-bs-counter .bi-bs-vcard-date { margin: var(--space-1_5) 0 0; font-size: var(--fs-xs); color: var(--txt-disabled); }
.bi-bs-counter .bi-bs-dock-btns--2 { grid-template-columns: 1fr 1fr; }
/* 선불권·포인트·접수 = **보조 결제/액션**. 규격 문서 §12-5: "현금·신용카드·선불권·접수증출력은
 * 색없음(일반형)". 2026-08-14: 실물이 연파랑 틴트라 문구와 달랐다 → **문서가 기준**이므로 색을 뺀다.
 * 색은 강조의 도구다 — 수단마다 색을 달리하면 "지금 눌러야 할 것"을 색으로 알 수 없다. */
.bi-bs-counter .bi-bs-dock-btn--recv  { background: var(--bg-card); color: var(--txt-secondary); border-color: var(--border-base); }
.bi-bs-counter .bi-bs-dock-btn--recv:hover  { background: var(--bg-input); }.bi-pop-hidden{ display: none; }
.bi-pop-cat-tools{ flex-shrink: 0; display: flex; flex-direction: column; gap: var(--space-2_5); margin-bottom: var(--space-3); }
/* ── 카탈로그 상단 — 보드 §08 «상품 추가» (2026-08-26 재정의) ─────────
 * 탭 그룹은 회색 카드 안에 가로로 놓인다. 칩은 그 아래 한 줄.
 * 예전 규칙은 레거시 li 클래스를 겨냥해 실물에 하나도 안 걸렸다. */
.bi-pop-catalog .bi-pop-seg{
    display: flex; gap: var(--pop-tab-gap); flex-wrap: wrap; margin: 0; list-style: none;
    background: var(--pop-line-soft); border: 1px solid var(--pop-line);
    border-radius: var(--radius-sm); padding: var(--space-2_5);
}
.bi-pop-catalog .bi-pop-seg > li{
    height: 32px; padding: 0 var(--space-4); display: inline-flex; align-items: center;
    border-radius: var(--pop-btn-r); background: var(--bg-card); border: 1px solid var(--pop-line);
    font-size: 12.5px; font-weight: var(--fw-extrabold); color: var(--txt-muted); cursor: pointer;
}
.bi-pop-catalog .bi-pop-seg > li:hover{ border-color: var(--gray-300); color: var(--txt-secondary); }
.bi-pop-catalog .bi-pop-seg > li.is-sel{ background: var(--brand-navy); border-color: var(--pop-tab-line); color: var(--bg-card); }
.bi-pop-seg > li > div{ float: none; padding: 0; }

.bi-pop-catalog .bi-pop-chip-ul{ display: flex; gap: var(--space-1_5); flex-wrap: wrap; margin: 0; padding: 9px 0 0 var(--space-2_5); list-style: none; }
.bi-pop-catalog .bi-pop-chip-ul > li{
    height: 28px; padding: 0 var(--pop-pill-pad-x); display: inline-flex; align-items: center;
    border-radius: var(--radius-full); background: var(--bg-card); border: 1px solid var(--pop-line);
    font-size: var(--pop-cnt-fs); font-weight: var(--fw-semibold); color: var(--txt-muted);
    cursor: pointer; white-space: nowrap;
}
.bi-pop-catalog .bi-pop-chip-ul > li:hover{ background: var(--pop-line-soft); }
.bi-pop-catalog .bi-pop-chip-ul > li.is-sel{ background: var(--pop-pill-bg); border-color: var(--pop-pill-line); color: var(--brand-blue); }
.bi-pop-chip-ul > li > div{ float: none; padding: 0; }

/* 상품 행 — 한 줄 그리드(이름 좌 · 금액 우). 보드는 체크박스 열을 더 두지만
   다중선택은 매출등록 행 추가 구조를 바꿔야 해 다음 단계로 미뤘다(2026-08-26). */
.bi-pop-catalog .bi-pop-prod-ul{ margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--pop-line); }
.bi-pop-catalog .bi-pop-prod-ul > li{
    display: grid; grid-template-columns: var(--pop-check) 1fr auto; column-gap: var(--pop-row-gap); align-items: center;
    padding: var(--space-2_5) var(--space-3) 11px; background: var(--bg-card);
    border-bottom: 1px solid var(--pop-line-soft); cursor: pointer;
}
.bi-pop-prod-ul > li:hover{ background: var(--bg-selected); }
.bi-pop-prod-ul > li.is-sel{ background: var(--bg-selected); }
.bi-pop-prod-ul > li > div:first-of-type{ font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--txt-primary); line-height: 19.5px; }
.bi-pop-prod-ul > li > div:last-of-type{ font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--txt-primary); line-height: 19.5px; text-align: right; font-variant-numeric: tabular-nums; }
.bi-pop-cat-list{ flex: 1 1 auto; min-height: 0; overflow-y: auto; background: var(--bg-card); }   /* 카드 테두리 제거 — 목록은 위 1px 선으로 시작(보드 §08) */
.bi-pop-prod-ul .pop_m_b_li{
    width: 100%; float: none; display: flow-root;
    padding: var(--space-3_5) var(--space-3_5); margin-bottom: var(--space-1_5);
    border: 1px solid var(--gray-100); border-radius: var(--radius-xl); background: var(--bg-card);
    cursor: pointer; font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--gray-800); transition: all .12s;
}
.bi-pop-prod-ul .pop_m_b_li:hover{ background: var(--bg-input); border-color: var(--color-info-100); }
.bi-pop-prod-ul .pop_m_b_li.is-sel{ background: var(--bg-selected); border-color: var(--color-indigo-600); box-shadow: inset 4px 0 0 var(--color-indigo-600); }
.bi-pop-prod-ul .pop_m_b_li_div{ padding: 0; min-height: 0; color: var(--txt-secondary); font-weight: var(--fw-extrabold); }
/* 보드 §07 — 푸터는 «좌 보조 → 여백 → 주 액션 → 닫기» 이고 **상단 선이 있다.**
 * 2026-08-10 요청으로 선·배경을 없앴었는데, styleboard4 가 규격이 되면서 보드를 따른다(2026-08-25).
 * 안쪽 .bi-pop-foot-btns 는 버튼 묶음일 뿐이라 선을 갖지 않는다 — 바깥이 푸터다. */
.bi-pop-check{
    display: flex; align-items: flex-start; gap: var(--space-2); cursor: pointer;
    font-size: var(--fs-sm); color: var(--txt-muted); line-height: 1.5; max-width: 470px;
}
.bi-pop-check input[type="checkbox"]{
    visibility: visible; display: inline-block;
    -webkit-appearance: auto; appearance: auto;
    width: 16px; height: 16px; margin: var(--space-0_5) 0 0; flex-shrink: 0;
    accent-color: var(--brand-blue); cursor: pointer;
}
/* — 뒤에 선언되는 body padding 단축속성(.bi-pop-reg{padding:22px} 등)이 padding-bottom 을 되돌리는 것 방지. */
.bi-pop-pay--dchart, .bi-pop-pay--aim{ padding-bottom: 0; }
.bi-pop-pay--dchart .bi-pop-foot-btns, .bi-pop-pay--aim .bi-pop-foot-btns{ margin-left: calc(var(--space-6) * -1); margin-right: calc(var(--space-6) * -1); }
.bi-pop-btn{
    height: 40px; padding: 0 var(--space-5); border-radius: var(--radius-xl); border: 1px solid var(--border-base);
    background: var(--bg-card); color: var(--txt-secondary); font-size: var(--fs-md); font-weight: var(--fw-extrabold); cursor: pointer;
}
.bi-pop-btn:hover{ background: var(--bg-input); }
.bi-pop-btn--ghost{ background: var(--color-info-50); color: var(--brand-blue); border-color: var(--color-info-100); }
.bi-pop-btn--ghost:hover{ background: var(--color-info-100); }
.bi-pop-btn--primary{ background: var(--brand-blue); color: var(--bg-card); border: none; }   /* docs/76: 구글블루 var(--brand-blue) → 앱 브랜드블루 통일 */
.bi-pop-btn--primary:hover{ background: var(--brand-blue-hover); }
.bi-pop-pay--dchart, .bi-pop-pay--aim { display: flex; flex-direction: column; }
.bi-pop-pay--dchart { height: 100vh; }
.bi-pop-pay input[type="text"], .bi-pop-pay input.writeinput, .bi-pop-pay select, .bi-pop-pay input[type="number"]{
    border: 1px solid var(--gray-300); border-radius: var(--radius-lg);
    background: var(--bg-card); color: var(--gray-800); box-shadow: none; outline: none;
}
.bi-pop-pay input[type="text"]:focus, .bi-pop-pay input.writeinput:focus, .bi-pop-pay select:focus{
    border-color: var(--brand-blue); box-shadow: var(--ring-focus);
}
.bi-pop-pay--list .text_input{
    width: 340px; height: 46px; font-size: var(--fs-md); line-height: 46px;
    border: 1px solid var(--gray-300); border-bottom: 1px solid var(--gray-300); border-radius: var(--radius-xl);
    padding: 0 var(--space-3_5) 0 40px; margin: 0; background: var(--bg-card); color: var(--gray-800);
}
.bi-pop-pay--list .text_input:focus{ border-color: var(--brand-blue); box-shadow: var(--ring-focus); }
.bi-pop-pay--list.bi-pop-list--member .text_input{ width: 320px; }.bi-pop-list--member .pop_m_h{ border-left: 2px solid transparent; }.bi-pop-pay--list.bi-pop-list--emp .text_input{ width: 230px; }
.bi-pop-pay--list .bi-pop-list-foot{
    position: fixed; left: 0; right: 0; bottom: 0; width: 100%;
    display: flex; justify-content: flex-end; align-items: center;
    padding: var(--pop-foot-pad-t) var(--pop-head-pad-x) var(--pop-foot-pad-b); gap: var(--pop-foot-gap);
    background: var(--bg-card); border-top: 1px solid var(--pop-line); box-sizing: border-box; z-index: 5;
}
.bi-pop-pay .bi-pop-prepay-amt{ clear: both; margin-top: var(--space-3_5); padding-top: var(--space-3_5); border-top: 1px solid var(--gray-100); }



.bi-pop-pay input.writeinput.bi-pop-prepay-amount{ flex: 0 0 240px; width: 240px; height: 44px; margin: 0; border: 1px solid var(--gray-300); border-radius: var(--radius-lg); background: var(--bg-card); font-size: var(--fs-2lg); font-weight: 700; color: var(--txt-primary); text-align: right; padding: 0 var(--space-3); box-sizing: border-box; }

.bi-pop-pay--prepay .div_wrap{ padding-left: 0; padding-right: 0; }
.bi-pop-pay--prepay .pop_desc{ margin-bottom: var(--space-3); }



.bi-pop-list--nvemp .pop_m_h_sub{ white-space: nowrap; }
.bi-pop-list--nvemp .pop_m_h_sub:nth-of-type(2){ width: 150px; }  /* 초기화 버튼 */


.bi-pop-pay--prepay .bi-pop-prepay-amt{ margin-top: var(--space-4); padding-top: var(--space-4); }
.bi-pop-pay--cash .pop_desc{ margin-bottom: 0; }
.bi-pop-pay--cash .pop_desc{ word-break: break-all; overflow-wrap: anywhere; }
.bi-pop-pay--cash .bi-pop-card-label{ margin: var(--space-1_5) 0 var(--space-2); }
.bi-pop-pay--cardcancel{ position: relative; }
.bi-pop-pay--cardcancel .selectWrap{
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    width: auto; height: auto;
    padding: var(--space-5) var(--space-6) var(--space-6); box-sizing: border-box;
    display: flex; flex-direction: column; background: var(--bg-card);
}
.bi-pop-pay--cardcancel .selectWrap > div{ padding: 0; }          /* 인라인 padding:10px 제거(팝업 패딩과 이중 적용) */
.bi-pop-pay--cardcancel .selectWrap .pop_m_p_b{ flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.bi-pop-pay--cardcancel .selectWrap .pop_m_h{ padding: var(--space-3) 0; }
.bi-pop-pay--cardcancel .selectWrap .pop_m_b{ flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.bi-pop-pay--cardcancel .selectWrap .pop_m_b_li{ width: 100%; padding: 0; }.bi-pop-pay--cardcancel .selectWrap .pop_m_b_li_div:only-of-type{ width: 100%; padding-left: 0; }
.bi-pop-pay--cardcancel .selectWrap .bt_div{
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    margin-top: auto; padding-top: var(--space-4); float: none;
}
.bi-pop-pay--cardcancel .selectWrap .bt_div > div{ float: none; padding-top: 0; }
.bi-pop-pay--cardcancel .selectWrap .pop_desc{ margin: 0; padding: 0; text-align: left; }
.bi-pop-pay.bi-pop-pay--slip{ padding: 0; }
.bi-pop-pay .bi-pop-slip-foot{ display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); float: none; width: 100%; box-sizing: border-box; padding-top: var(--space-3); }
.bi-pop-pay--slip .bi-pop-slip-foot .btn_size{ min-width: 65px; }
.bi-pop-pay--slip #signature-pad, .bi-pop-pay--slip .signature-pad{ width: 100%; box-sizing: border-box; }
.bi-pop-pay--slip .signature-pad--body{ width: 100%; overflow: hidden; }
.bi-pop-pay--slip .signature-pad--body canvas{ width: 100%; height: auto; max-width: 100%; display: block; }.bi-pop-pay--npay{ overflow: hidden; }
.bi-pop-pay--npay .pop_desc{ margin-bottom: 0px; }
.bi-pop-pay--npay .pop_cate_wrap{ border: 1px solid var(--border-base); border-radius: var(--radius-xl); margin: var(--space-2_5) 0; background: var(--bg-card); overflow: hidden; }
.bi-pop-pay--npay .pop_cate_div{ width: auto; height: auto; margin: 0; }
.bi-pop-pay--npay .pop_cate_title{ width: auto; height: auto; line-height: 1.2; display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3_5) var(--space-4); }
.bi-pop-pay--npay .pop_cate_title > b{ font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--gray-800); flex: 0 0 auto; }
.bi-pop-pay--npay .pop_cate_title .tags_name{ flex: 1 1 auto; margin: 0; color: var(--brand-blue); font-size: var(--fs-base); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bi-pop-pay--npay .pop_cate_title_right{ float: none; width: auto; overflow: visible; display: flex; align-items: center; gap: var(--space-3); margin-left: auto; flex: 0 0 auto; }
.bi-pop-pay--npay .pop_cate_title_right .pop_desc{ float: none; width: auto; margin: 0; padding: 0; font-size: var(--fs-sm); color: var(--txt-disabled); line-height: 1; white-space: nowrap; }
.bi-pop-pay--npay .onoff{ float: none; width: 18px; height: 18px; right: auto; font-size: var(--fs-lg); color: var(--txt-disabled); line-height: 18px; text-align: center; }
.bi-pop-pay--npay .pop_tag_ul{ width: auto; padding: var(--space-1) var(--space-4) var(--space-3); margin: 0; border-top: 1px solid var(--gray-100); overflow: hidden; }
.bi-pop-pay--npay .pop_tag_li{ width: 33.33%; min-width: 0; box-sizing: border-box; float: left; margin: var(--space-2) 0; padding-right: var(--space-1_5); font-size: var(--fs-base); }
.bi-pop-pay--npay .pop_tag_li .ch_label{ color: var(--txt-secondary); }
.bi-pop-pay--npay .radio_div input[type="radio"]{
    visibility: visible; display: inline-block;
    -webkit-appearance: auto; appearance: auto;
    width: 16px; height: 16px; margin: 0 var(--space-0_5) 0 0; vertical-align: middle;
    accent-color: var(--brand-blue); cursor: pointer;
}
.bi-pop-pay--npay .radio_div input[type="radio"]+label{ display: none; }
/* 성별 셀렉트 ↔ 길이 라디오 — 붙어 있어 한 덩어리로 보였다(사용자 지적 2026-08-27).
   폼 칸 사이 간격(12)과 같은 리듬을 준다. 라디오 줄 자체도 위아래로 숨을 준다. */
.bi-pop-pay--npay .bi-pop-f{ margin-bottom: var(--space-3); }
.bi-pop-pay--npay .radio_div:not(.bi-hidden){ display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-bottom: var(--space-3); }
.bi-pop-pay--npay .radio_div .bi-pop-opt{ margin: 0; }
.bi-pop-pay .bi-pop-card-label{ display: block; font-size: var(--fs-md); font-weight: var(--fw-extrabold); color: var(--gray-800); margin: var(--space-3_5) 0 var(--space-2); padding-left: var(--space-0_5); }
.bi-pop-pay .bi-pop-card-body{ width: 100%; }
.bi-pop-pay .bi-pop-card-amount-row{ display: flex; gap: var(--space-2); align-items: stretch; }
.bi-pop-pay select.bi-pop-card-period, .bi-pop-pay select#txtPeriod{ flex: 0 0 auto; }   /* 크기는 규격·격자가 정한다(2026-08-26) */
.bi-pop-pay input.writeinput.bi-pop-card-amount{ flex: 1 1 auto; width: auto; min-width: 0; }
.bi-pop-pay input#pay_amount.writeinput{ font-weight: var(--fw-bold); color: var(--txt-primary); font-variant-numeric: tabular-nums; }   /* 크기는 규격을 따른다(2026-08-26) */
.bi-pop-pay .bi-pop-card-manual{ display: flex; align-items: center; justify-content: flex-end; gap: var(--space-1_5); margin: var(--space-3) var(--space-0_5) var(--space-1); font-size: var(--fs-base); color: var(--txt-secondary); }
.bi-pop-pay .bi-pop-card-manual span{ user-select: none; }
.bi-pop-pay .bi-pop-card-manual input[type="checkbox"]{
    visibility: visible; display: inline-block;
    -webkit-appearance: auto; appearance: auto;
    width: 16px; height: 16px; margin: 0; flex-shrink: 0;
    accent-color: var(--brand-blue); cursor: pointer;
}
.bi-pop-pay .bi-pop-card-manual > label[for]{ display: none; }
.bi-pop-pay .bi-pop-opts{ display: flex; flex-direction: column; gap: var(--space-2_5); margin: var(--space-3) var(--space-0_5) var(--space-1); }
.bi-pop-pay .bi-pop-opt-row{ display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.bi-pop-pay .bi-pop-opt{ display: inline-flex; align-items: center; gap: var(--space-1_5); margin: 0; font-size: var(--fs-base); color: var(--txt-secondary); cursor: pointer; }.bi-pop-pay .bi-pop-opt input:disabled{ cursor: not-allowed; opacity: .6; }
.bi-pop-pay .bi-pop-opt span{ user-select: none; }
.bi-pop-pay .bi-pop-card-pg input.bi-pop-card-pg-no{ height: 46px; font-size: var(--fs-2lg); letter-spacing: .5px; }
.bi-pop-pay .bi-pop-card-field--full{ grid-column: 1 / -1; }
.bi-pop-pay .bi-pop-card-field label{ display: block; font-size: var(--fs-base); color: var(--txt-muted); margin: 0 0 var(--space-1_5); padding: 0; float: none; }
.bi-pop-pay .bi-pop-card-field input.writeinput{ width: 100%; height: 40px; margin: 0; background: var(--bg-input); }
/* 2026-08-27 제거 — 선결제 팝업 전용 폼 규칙 묶음. 보드 §08/§09 로 옮겨 대상이 사라졌고,
   .bi-pop-dep-body 의 좌우 2px 여백이 규격 여백 18 을 이겨 내용이 벽에 붙었다. */
.bi-pop-pay input.writeinput.bi-pop-cash-amount{ width: 100%; height: 48px; font-size: var(--fs-xl); font-weight: 700; color: var(--txt-primary); }
.bi-pop-pay .bi-pop-card-body .ft13{ font-size: var(--fs-base); color: var(--txt-secondary); }
.bi-pop-pay .bi-pop-card-body .br2_gray{ margin-top: var(--space-4); padding-top: var(--space-3_5); border: none; border-top: 1px solid var(--gray-100); }
/* ⚠ 2026-08-28 — `.bi-pop-pay` 를 빠뜨려 **테두리가 통째로 사라져** 있었다.
   ai_msg 는 뿌리가 `.bi-pop-pay--aim` 인데 --dc-* 는 여기 둘에만 선언돼 있었다.
   정의 안 된 변수를 쓴 `border:1px solid var(--dc-line)` 은 **선언 전체가 무효**가 되어
   border-style 이 none 으로 떨어진다 — 미선택 LMS 카드가 허공의 글자로 보인 이유다.
   색이 틀린 게 아니라 «규칙이 죽은» 것이라 눈으로만 잡혔다. */
.bi-pop-reg, .bi-pop-cat-wrap, .bi-pop-pay{
    --dc-blue:var(--brand-blue); --dc-blue-soft:rgba(0,35,183,.05); --dc-navy:var(--brand-navy);
    --dc-ink:var(--txt-primary); --dc-sub:var(--txt-muted); --dc-mut:var(--txt-disabled); --dc-line:var(--border-base);
    font-family: var(--font-sans);
}.bi-pop-pay--dt .pop_m_h{
    margin: 0 0 var(--space-3); padding: 0;
    display: flex; align-items: center; gap: var(--space-2); border: none;
}.bi-pop-cat-wrap{ height: 100vh; box-sizing: border-box; color: var(--txt-primary); }
.bi-pop-cat-wrap *{ box-sizing: border-box; }
.bi-pop-cat.bi-catalog{
    width: 100%; max-width: none; height: 100%;
    border-radius: 0; box-shadow: none; padding: var(--space-5);
    display: flex; flex-direction: column;
}
/* 2026-08-28 — 규격 푸터를 달았더니 이 상자의 아래 여백 20 이 «푸터 밑» 에 깔려
   푸터가 바닥에서 20 떠 보였다(실측). 푸터는 제 여백(13/18/12)을 가지므로 여기선 0 이다. */
.bi-pop-cat.bi-catalog:has(> .bi-pop-list-foot){ padding-bottom: 0; }
/* 예약일시 선택은 «자동맞춤 제외»(내부 스크롤 의도)라 상자가 내용보다 클 수 있다.
   그럴 때도 푸터는 바닥에 붙어야 한다 — 남는 자리를 본문이 먹는다(실측 푸터아래 17 → 0). */
/* 아래 여백은 0 — 푸터가 제 여백(13/18/12)을 갖는다. 뿌리 여백이 남으면 푸터 밑에 깔린다. */
/* ⚠ 2026-08-31 — 세로 정렬이 남는 자리를 «위아래로 나눠» 푸터가 바닥에서 14 떠 있었다
   (실측: 본문 위 34 · 푸터 아래 14). 위에서부터 쌓고, 남는 자리는 푸터의 margin-top:auto 가 먹는다. */
.bi-pop-pay--dt{ min-height: 100vh; display: flex; flex-direction: column; justify-content: flex-start; padding-bottom: 0; }
/* ⚠ 전폭 규칙의 margin-top:16 이 뒤에 오며 auto 를 이겨, 푸터가 바닥까지 못 갔다(실측 14 남음).
   특이도를 올려 «바닥으로 민다» 를 확정한다. */
.bi-pop-page .bi-pop-pay--dt > .bi-pop-list-foot,
.bi-pop-page .bi-pop-pay--dt > .bi-pop-foot-btns{ margin-top: auto; }
.bi-pop-cat .bi-catalog__body{ flex: 1; display: flex; flex-direction: row; gap: var(--space-5); min-height: 0; }
.bi-pop-cat .bi-catalog__console{ display: flex; flex-direction: column; width: 220px; flex-shrink: 0; }
.bi-pop-cat .bi-catalog__main{ flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.bi-pop-cat .bi-catalog__content{ flex: 1; display: flex; flex-direction: row; min-height: 0; }
.bi-pop-cat .bi-catalog__grid{ flex: 1 1 auto; min-width: 0; }
.bi-pop-cat .bi-catalog__view{ flex-shrink: 0; width: 280px; }
.bi-catalog { background: var(--bg-card); border-radius: var(--radius-2xl); padding: var(--space-5); width: 980px; max-width: 94vw; height: 86vh; display: flex; flex-direction: column; gap: var(--space-3_5); box-shadow: var(--shadow-lg); }
/*   width:auto — 공용 .bi-pop-head{width:100%}(=content 폭)이면 음수 margin 상쇄 후 우측 40px 빔 → auto 로 flex stretch 가 margin 까지 채워 박스 폭 꽉 참. */
.bi-catalog > .bi-pop-head { margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) 0; border-radius: var(--radius-2xl) var(--radius-2xl) 0 0; width: auto; }
.bi-catalog > .bi-pop-head .bi-pop-head-title { overflow: visible; display: inline-flex; align-items: center; gap: var(--space-1_5); }
.bi-catalog__who { font-size: var(--fs-sm); font-weight: var(--fw-extrabold); color: var(--color-purple-700); background: var(--color-purple-50); border: 1px solid var(--color-purple-200); padding: var(--space-0_5) var(--space-2_5); border-radius: var(--radius-full); }
.bi-catalog__body { flex: 1; display: flex; gap: var(--space-5); min-height: 0; }
.bi-catalog__console { width: 220px; flex-shrink: 0; background: var(--bg-input); border: 1px solid var(--border-base); border-radius: var(--radius-2xl); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3_5); }
.bi-catalog__console-t { font-size: var(--fs-xs); font-weight: var(--fw-black); color: var(--txt-disabled); letter-spacing: .15em; font-family: var(--font-mono); }
.bi-catalog__console-d { font-size: var(--fs-2xs); color: var(--txt-muted); font-weight: var(--fw-medium); line-height: 1.5; margin: var(--space-1) 0 0; word-break: keep-all; }
.bi-catalog__card { border-radius: var(--radius-2xl); padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2_5); }
.bi-catalog__card--ai { background: color-mix(in srgb, var(--color-purple-600) 5%, transparent); border: 1px solid var(--color-purple-200); }
.bi-catalog__card--up { background: color-mix(in srgb, var(--brand-blue) 5%, transparent); border: 1px solid var(--color-indigo-200); }
.bi-catalog__card-h { font-size: var(--fs-xs); font-weight: var(--fw-black); color: var(--gray-800); display: flex; align-items: center; gap: var(--space-1_5); }
.bi-catalog__dot--ai { background: var(--color-purple-600); }
.bi-catalog__dot--up { background: var(--brand-blue); }
.bi-catalog__cbtn { width: 100%; border: 0; color: var(--bg-card); font-size: var(--fs-sm); font-weight: var(--fw-black); padding: var(--space-2_5); border-radius: var(--radius-xl); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1_5); box-shadow: var(--shadow-md); }
.bi-catalog__cbtn i { color: var(--bg-card); }
.bi-catalog__cbtn--ai { background: var(--color-purple-600); }
.bi-catalog__cbtn--ai:hover { background: var(--color-purple-700); }
.bi-catalog__cbtn--up { background: var(--brand-blue); }
.bi-catalog__cbtn--up:hover { background: var(--brand-blue); }
.bi-catalog__main { flex: 1; display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.bi-catalog__tabs { display: flex; gap: var(--space-1); background: var(--border-light); padding: var(--space-1); border-radius: var(--radius-xl); flex-shrink: 0; }
.bi-catalog__content { flex: 1; display: flex; gap: var(--space-3_5); min-height: 0; }
.bi-catalog__grid { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: min-content; gap: var(--space-2_5); overflow-y: auto; align-content: start; padding-right: var(--space-1); }
.bi-catalog__thumb--vt { border-color: var(--color-purple-200); }
.bi-catalog__thumb--vt.is-selected { border-color: var(--color-purple-600); box-shadow: var(--ring-focus); }
.bi-catalog__tag { position: absolute; left: 5px; bottom: 5px; font-size: var(--fs-2xs); font-weight: var(--fw-black); color: var(--bg-card); padding: var(--space-0_5) var(--space-1_5); border-radius: var(--radius-md); }
.bi-catalog__empty { grid-column: 1 / -1; padding: 40px var(--space-3); text-align: center; color: var(--txt-disabled); font-size: var(--fs-sm); font-style: italic; }
.bi-catalog__view { width: 280px; flex-shrink: 0; border-left: 1px solid var(--border-base); padding-left: var(--space-3_5); display: flex; flex-direction: column; gap: var(--space-3); overflow-y: auto; }
.bi-catalog__viewempty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); color: var(--txt-disabled); font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-align: center; }
.bi-catalog__viewempty i { font-size: var(--fs-xl); color: var(--gray-300); }
.bi-catalog__viewimg { border-radius: var(--radius-2xl); overflow: hidden; border: 1px solid var(--border-base); background: var(--bg-input); text-align: center; }
.bi-catalog__viewimg img { display: block; width: 100%; height: auto; }
.bi-catalog__meta-tags { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.bi-catalog__meta-tags span { font-size: var(--fs-2xs); font-weight: var(--fw-bold); color: var(--gray-600); background: var(--border-light); padding: var(--space-0_5) var(--space-2); border-radius: var(--radius-full); }
.bi-catalog__meta-at { font-size: var(--fs-xs); color: var(--txt-disabled); font-weight: var(--fw-semibold); }
.bi-catalog__meta-link { font-size: var(--fs-xs); font-weight: var(--fw-extrabold); color: var(--brand-blue); text-decoration: none; display: inline-flex; align-items: center; gap: var(--space-1_5); }
.bi-catalog__meta-link:hover { text-decoration: underline; }
.bi-pop-pay--form{ display: block; }
.bi-pop-pay--form form{ display: block; }
.bi-pop-pay .bi-pop-form-row{
    float: none; width: auto; clear: both;
    margin: 0 0 var(--space-4); padding: 0;
}
.bi-pop-pay .bi-pop-form-row:last-of-type{ margin-bottom: var(--space-1); }
.bi-pop-pay .bi-pop-form-label{
    display: block; float: none; width: auto; padding: 0;
    margin: 0 0 var(--space-2); font-size: var(--fs-base); font-weight: var(--fw-semibold); color: var(--txt-secondary); line-height: 1.4;
}
.bi-pop-pay .bi-pop-form-label b{ font-size: var(--fs-base); font-weight: 600; color: var(--txt-secondary); }
.bi-pop-pay .bi-pop-form-label .sub_description{
    display: inline; padding: 0; margin-left: var(--space-1_5);
    font-size: var(--fs-sm); font-weight: var(--fw-normal); color: var(--txt-disabled);
}.bi-pop-pay .bi-pop-form-row input.bi-pop-form-full{ width: 100%; }
.bi-pop-pay .bi-pop-form-range{ display: flex; align-items: center; gap: var(--space-2); }
.bi-pop-pay .bi-pop-form-range input.writeinput{ flex: 1 1 0; width: auto; }
.bi-pop-pay .bi-pop-form-range .bi-pop-form-tilde{ flex: 0 0 auto; color: var(--txt-disabled); font-size: var(--fs-md); }
.bi-pop-pay .bi-pop-point-amount-row{ display: flex; align-items: center; gap: var(--space-3_5); }
.bi-pop-pay--form input#use_point.writeinput{
    flex: 1 1 0; width: auto; height: 44px;
    text-align: right; font-size: var(--fs-2lg); font-weight: 700; color: var(--txt-primary);
}
.bi-pop-pay .bi-pop-point-radio{
    flex: 0 0 auto; display: flex; align-items: center; gap: var(--space-3_5);
    font-size: var(--fs-base); color: var(--txt-secondary); white-space: nowrap; padding: 0; height: auto; float: none;
}
.bi-pop-pay .bi-pop-point-radio label{ margin: 0; }
.bi-pop-pay--msg{ padding: var(--space-4) var(--space-5) var(--space-3); }
.bi-pop-pay--msg > div:first-of-type{ float: none; margin: 0; width: auto; }
.bi-pop-pay--msg form{ margin: 0; padding: 0; }
.bi-pop-pay--msg .ft12{
    width: auto; float: none; height: auto; box-sizing: border-box;
    background: var(--bg-input); border: 1px solid var(--gray-100); border-radius: var(--radius-xl);
    padding: var(--space-3) var(--space-3_5); margin-bottom: var(--space-3_5);
    font-size: var(--fs-sm); line-height: 1.7; color: var(--txt-muted);
}
.bi-pop-pay--msg .bi-msg-rpanel{
    border: 1px solid var(--gray-100); box-shadow: none;
    border-radius: var(--radius-2xl); background: var(--bg-card); box-sizing: border-box;
    width: 480px; height: auto; min-height: 482px;
    float: left; padding: var(--space-5);
}
.bi-pop-pay--msg .bi-msg-rpanel > div{
    width: 100%; float: none; height: auto;
    padding: 0; margin: 0;
}
.bi-pop-pay--msg .bi-msg-rpanel > div + div{ margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border-light); }
.bi-pop-pay--msg .bi-msg-rpanel input.writeinput{ width: 100%; }
.bi-pop-pay--msg .bi-msg-rpanel select[multiple]{ width: 100%; height: 150px; }
.bi-pop-pay--msg .bi-msg-rpanel .edit_one{ margin-bottom: var(--space-1_5); }
.bi-pop-pay--msg .bi-msg-rpanel > div > div[style*="padding-top"]{ padding-top: var(--space-3); }
.bi-pop-pay--msg .edit_one b{ font-size: var(--fs-base); font-weight: var(--fw-bold); color: var(--txt-secondary); }
.bi-pop-pay--msg .edit_one[style*="font-weight"]{ font-size: var(--fs-base); font-weight: 700; color: var(--txt-secondary); }
.bi-pop-pay--msg .ft11{ color: var(--txt-muted); }
.bi-pop-pay--msg .txt_span_middle{ font-weight: var(--fw-semibold); color: var(--txt-disabled); }
.bi-pop-pay--msg input.writeinput{
    height: 36px; border: 1px solid var(--border-base); border-radius: var(--radius-lg);
    background: var(--bg-card); color: var(--gray-800); padding: 0 var(--space-3);
    font-size: var(--fs-base); box-shadow: none;
}
.bi-pop-pay--msg input.writeinput:focus{ border-color: var(--brand-blue); box-shadow: var(--ring-focus); }
.bi-pop-pay--msg select{
    height: 36px; border: 1px solid var(--border-base); border-radius: var(--radius-lg);
    background: var(--bg-card); color: var(--gray-800); font-size: var(--fs-base); padding: 0 var(--space-2); box-shadow: none;
}
.bi-pop-pay--msg select[multiple]{ padding: var(--space-1); }
.bi-pop-pay--msg select:focus{ border-color: var(--brand-blue); box-shadow: var(--ring-focus); }
.bi-pop-pay--msg select[multiple] option{ padding: var(--space-1_5) var(--space-2); font-size: var(--fs-base); }
.bi-pop-pay--msg input[type="button"][value="입력"]{
    width: auto; height: 36px; padding: 0 var(--space-3_5);
    border: 1px solid var(--gray-300); border-radius: var(--radius-lg);
    background: var(--border-light); color: var(--txt-secondary); font-size: var(--fs-base); font-weight: 600; cursor: pointer;
}
.bi-pop-pay--msg input[type="button"][value="입력"]:hover{ background: var(--border-base); }
.bi-pop-pay--msg .edit_one{ margin-bottom: var(--space-1); }
/* 2026-08-27 제거 — 할인 팝업 전용 폼 규칙 묶음. 보드 §08 로 옮겨 대상이 사라졌고,
   남은 .bi-pop-disc-search 테두리가 규격 입력칸을 두 겹으로 감쌌다. */
.bi-pop-pay--prodpick .bi-pop-prodpick-col{
    width: auto; flex: 1 1 0; min-width: 200px; margin: 0; padding: 0;
    display: flex; flex-direction: column;
    background: var(--bg-card); border: 1px solid var(--border-base); border-radius: var(--radius-xl); overflow: hidden;
}
.bi-pop-pay--prodpick .bi-pop-prodpick-head{
    width: auto; height: auto; float: none;
    padding: var(--space-3) var(--space-3_5); border-bottom: 1px solid var(--gray-100);
    font-size: var(--fs-base); font-weight: var(--fw-semibold); color: var(--txt-secondary);
}
.bi-pop-pay--prodpick .bi-pop-prodpick-search{
    position: relative; display: flex; align-items: center;
    height: 36px; padding: 0 var(--space-2_5) 0 34px; background: var(--bg-input); border: 1px solid var(--border-base); border-radius: var(--radius-lg);
}
.bi-pop-pay--prodpick .bi-pop-prodpick-search:focus-within{ border-color: var(--brand-blue); box-shadow: var(--ring-focus); background: var(--bg-card); }
.bi-pop-pay--prodpick .bi-pop-prodpick-search > i.fas{ position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--txt-disabled); font-size: var(--fs-sm); pointer-events: none; }
.bi-pop-pay--prodpick .bi-pop-prodpick-search .sch_but_pop{ left: 4px; top: 0; height: 36px; width: 28px; z-index: 2; }
.bi-pop-pay--prodpick .bi-pop-prodpick-search input.search_input_pop{
    width: 100%; height: 100%; border: none; box-shadow: none;
    background: transparent; padding: 0; margin: 0; font-size: var(--fs-base); color: var(--gray-800);
}
.bi-pop-pay--msg .bi-msg-direct{ margin-bottom: var(--space-2_5); }
.bi-pop-pay--msg .bi-msg-direct-label{ display: block; float: none; padding: 0 0 var(--space-1_5); font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--txt-muted); }
.bi-pop-pay--msg .bi-msg-direct-row{ display: flex; gap: var(--space-2); align-items: center; }
.bi-pop-pay--msg .bi-msg-direct-row input[type="text"].writeinput{ flex: 1 1 auto; width: auto; }
.bi-pop-pay--msg .bi-msg-direct-row input[type="button"]{
    flex: 0 0 auto; width: auto; height: 36px; padding: 0 var(--space-4);
    border: 1px solid var(--gray-300); border-radius: var(--radius-lg);
    background: var(--border-light); color: var(--txt-secondary); font-size: var(--fs-base); font-weight: 600; cursor: pointer;
}
.bi-pop-pay--msg select[multiple]{ height: 300px; }
.bi-pop-pay--paylist .pop_desc{ margin-bottom: var(--space-3_5); padding-top: 0; font-size: var(--fs-base); color: var(--txt-muted); }
.bi-pop-pay--paylist .pop_m_p_b{ width: 100%; border: 1px solid var(--border-base); border-radius: var(--radius-xl); overflow: hidden; box-sizing: border-box; }
.bi-pop-pay--paylist .pop_m_h{
    width: 100%; display: flex; margin: 0; border: none;
    background: var(--bg-input); border-bottom: 1px solid var(--gray-100);
}
.bi-pop-pay--paylist .pop_m_h_sub{
    flex: 0 0 110px; width: auto; padding: var(--space-3) var(--space-1_5); text-align: center;
    font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--txt-muted); border-left: 1px solid var(--gray-100);
}
.bi-pop-pay--paylist .pop_m_h_sub:first-child{ flex: 1 1 auto; text-align: left; padding-left: var(--space-3_5); border-left: none; }
.bi-pop-pay--paylist .pop_m_b{ width: 100%; height: 300px; overflow-y: auto; }
.bi-pop-pay--paylist .pop_m_b_ul{ margin: 0; padding: 0; list-style: none; }
.bi-pop-pay--paylist .pop_m_b_li{
    display: flex; align-items: center; border-bottom: 1px solid var(--border-light); cursor: pointer; background: var(--bg-card);
}
.bi-pop-pay--paylist .pop_m_b_li:hover{ background: var(--border-light); }
.bi-pop-pay--paylist .pop_m_b_li_div{
    flex: 0 0 110px; width: auto; padding: var(--space-3) var(--space-1_5); text-align: center;
    font-size: var(--fs-base); color: var(--txt-secondary); border-left: 1px solid var(--border-light);
}
.bi-pop-pay--paylist .pop_m_b_li_div:first-child{ flex: 1 1 auto; text-align: left; padding-left: var(--space-3_5); border-left: none; font-weight: var(--fw-semibold); }
.bi-bq-pop { display: flex; flex-direction: column; min-height: 100%; box-sizing: border-box; }
/* ⚠ 2026-09-02 — 좌우 여백이 «두 겹» 이었다(실측 36px, 규격 18px).
 *   뿌리 .bi-pop-reg 가 padding: 0 18 (보드 .pop-body 좌우값)을 갖는데
 *   그 안의 .bi-pop-pad--form 이 또 padding: 0 18 을 가져 첫 블록이 36 에서 시작했다.
 *   .bi-pop-pad--form 은 다른 팝업(뿌리 여백이 없는 것)이 쓰므로 공통 규칙은 두고,
 *   «뿌리가 이미 좌우를 가진» 이 조합에서만 안쪽 좌우를 0 으로 돌린다.
 *   아래 여백 16 은 규격(.pop-body padding 0 18 16)대로 여기서 준다. */
.bi-pop-reg .bi-pop-pad--form{ padding-left: 0; padding-right: 0; padding-bottom: var(--space-4); }
/* ⚠ 2026-09-02 — 위 padding-bottom 16 과 푸터의 margin-top 16 이 겹쳐 «메모 아래 32» 가 됐다.
 *   규격은 «본문 아래 16 + 푸터 윗선» 이다. 이 조합에서만 푸터 위 여백을 뺀다. */
.bi-pop-reg .bi-pop-pad--form + .bi-pop-list-foot{ margin-top: 0; }
.bi-bq-body { padding: var(--space-5) var(--space-5); display: flex; flex-direction: column; gap: var(--space-3_5); flex: 1; }
.bi-bq-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3_5); }
.bi-bq-textarea { height: auto; padding: var(--space-2_5) var(--space-3); resize: vertical; line-height: 1.4; }
.bi-bq-cust .bi-bq-cust-input { flex: 1; min-width: 0; }
/* ⚠ 2026-09-02 — 규격 검색행 안의 인풋은 «투명» 이어야 하는데
 *   .bi-pop-reg input[type=text].bi-input (0,3,1) 이 .bi-pop-page .bi-pop-search__box input (0,2,1) 을 이겨
 *   테두리가 두 겹으로 보였다. 마크업에서 bi-input 을 떼는 것이 맞지만,
 *   혹시 다시 붙어도 상자 안에서는 투명하도록 못박는다. */
.bi-bq-cust-btn { flex-shrink: 0; width: 38px; height: 38px; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--brand-blue); color: var(--bg-card); font-size: var(--fs-md); border: 0; border-radius: var(--radius-xl); cursor: pointer; transition: background .15s, transform .1s; }
.bi-bq-cust-btn:hover { background: var(--brand-navy); }
.bi-bq-cust-btn:active { transform: scale(.95); }
/* 2026-09-02 — 라벨 «위» 로 올렸다(사용자 지시). 라벨과 붙지 않게 아래 여백을 준다.
   ⚠ 글자는 규격 보조문(.bi-pop-note = 12/400 --txt-muted)과 같아야 한다 —
      전엔 11/600 --txt-disabled 라 «다른 글» 처럼 보였다(실측). */
.bi-bq-cust-state { display: flex; align-items: center; gap: var(--space-1_5); margin-bottom: var(--space-1_5);
    font-size: var(--pop-cnt-fs); font-weight: var(--fw-normal); color: var(--txt-muted); }
.bi-bq-cust-state.is-linked { color: var(--color-success); }
/* 2026-09-02 — 2글자 미만일 때 «왜 안 되는지» 를 그 자리에서 알린다(전엔 조용히 아무 일도 없었다) */
/* ⚠ 검색행이 .bi-pop-f 안에 들어가면 «아래 여백이 두 겹» 이 된다 —
   .bi-pop-search{margin-bottom:12} + .bi-pop-f{margin-bottom:12} = 24.
   다른 줄은 12 인데 고객명 줄만 24 라 «간격이 안 맞아» 보였다(2026-09-02 실측). */
.bi-pop-page .bi-pop-f > .bi-pop-search{ margin-bottom: 0; }

/* 검색 안내 토스트 — 줄로 끼우면 팝업이 밀린다. 검색칸 아래에 «겹쳐» 뜬다.
   ⚠ 2026-09-02 — 처음엔 간편예약 전용(.bi-bq-toast)이었는데, 2글자 제한은
      고객검색·거래처검색 등 «여러 팝업» 에 있다 → 공용 이름(.bi-pop-toast)으로 올린다. */
/* 붙을 자리는 «이미 있는» 기준점을 쓴다 — .bi-pop-search · .bi-counter-search-wrap 둘 다 relative 다.
   ⚠ 전용 앵커 클래스(.bi-toast-host)를 새로 만들려다 SPEC-DUP 에 걸렸다(2026-09-02).
      position:relative 한 줄짜리 규격이 이미 다섯이라 여섯째를 보태는 꼴이었다.
      기준점이 안 잡힌 자리에서는 biPopToast 가 alert 로 물러선다 — 엉뚱한 데 뜨느니 낫다. */
.bi-pop-toast, .bi-bq-toast{
    position: absolute; left: 0; top: calc(100% + 6px); z-index: 5;
    max-width: 100%; padding: var(--space-1_5) var(--space-2_5);
    border-radius: var(--radius-lg); background: var(--gray-900); color: var(--white);
    font-size: var(--fs-xs); font-weight: var(--fw-semibold); white-space: nowrap;
    opacity: 0; visibility: hidden; transform: translateY(-3px);
    transition: opacity .15s, transform .15s, visibility .15s;
    box-shadow: var(--shadow-lg); pointer-events: none;
}
.bi-pop-toast.is-on, .bi-bq-toast.is-on{ opacity: 1; visibility: visible; transform: translateY(0); }
.bi-pop-page .bi-pop-search{ position: relative; }

.bi-bq-cust-state i { font-size: var(--fs-sm); }
.bi-bq-note { display: flex; align-items: center; gap: var(--space-1_5); background: var(--color-info-50); border: 1px solid var(--color-info-100); color: var(--color-info-700); font-size: var(--fs-sm); font-weight: var(--fw-semibold); padding: var(--space-2) var(--space-3); border-radius: var(--radius-xl); }
.bi-bq-foot { display: flex; justify-content: flex-end; gap: var(--space-2_5); padding: var(--space-3_5) var(--space-5); background: var(--bg-input); border-top: 1px solid var(--gray-100); }
.bi-bq-btn { height: 38px; padding: 0 var(--space-5); border-radius: var(--radius-xl); font-size: var(--fs-base); font-weight: var(--fw-bold); cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-1_5); border: 1px solid transparent; transition: background .15s, border-color .15s, color .15s; }
.bi-bq-btn--ghost { background: var(--bg-card); border-color: var(--border-base); color: var(--gray-600); }
.bi-bq-btn--ghost:hover { background: var(--border-light); }
.bi-bq-btn--primary { background: var(--brand-blue); color: var(--bg-card); }
.bi-bq-btn--primary:hover { background: var(--brand-navy); }.bi-pg-choice {
  float: left;
  width: 100%;
  padding: var(--space-3) var(--space-3) 0;
  display: flex;
  gap: var(--space-5);
  align-items: center;
}
.bi-pg-choice__item {
  display: flex;
  align-items: center;
  gap: var(--space-1_5);
  font-size: var(--fs-md);
  cursor: pointer;
}
.bi-pg-fields {
  float: left;
  width: 100%;
  padding: var(--space-2_5) var(--space-3) 0;
  display: none; /* draw_payUi() 가 켠다 */
}
.bi-pg-fields__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-bottom: var(--space-1_5);
}
.bi-pg-fields__row label {
  width: 92px;
  font-size: var(--fs-base);
  color: var(--gray-600);
}
.bi-pg-fields__row input {
  flex: 1;
  height: 32px;
  padding: 0 var(--space-2);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  font-size: var(--fs-md);
}
.bi-paypop__cust { font-size: var(--fs-xl); font-weight: var(--fw-black); color: var(--txt-primary); }
.bi-paypop__totallbl { font-size: var(--fs-base); font-weight: var(--fw-black); color: var(--txt-muted); }
.bi-paypop__totalval { font-size: var(--fs-3xl); font-weight: var(--fw-black); color: var(--txt-primary); }
.bi-paypop__items { display: flex; flex-direction: column; max-height: 140px; overflow-y: auto; }
.bi-paypop__collapse { border-bottom: 1px solid var(--border-light); padding-bottom: var(--space-2); }
.bi-paypop__collapse-btn { width: 100%; display: flex; justify-content: space-between; align-items: center; background: transparent; border: 0; cursor: pointer; font-size: var(--fs-sm); font-weight: var(--fw-black); color: var(--gray-600); padding: var(--space-1) 0; }
.bi-paypop__collapse-btn span { display: inline-flex; align-items: center; gap: var(--space-1_5); }
.bi-paypop__collapse-btn i { color: var(--txt-disabled); }
.bi-paypop__collapse-body { display: flex; flex-wrap: wrap; align-content: flex-start; gap: var(--space-1_5); margin-top: var(--space-2); max-height: 120px; overflow-y: auto; }
.bi-paypop__collapse-body.is-hidden { display: none; }
.bi-paypop__hint { font-size: var(--fs-xs); color: var(--txt-muted); text-align: center; padding: var(--space-0_5) 0 var(--space-1_5); display: flex; align-items: center; justify-content: center; gap: var(--space-1_5); }
.bi-paypop__hint i { color: var(--txt-disabled); }
.bi-paypop__methods-lbl { font-size: var(--fs-sm); color: var(--txt-muted); font-weight: var(--fw-black); }
.bi-paypop__methods-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--space-1_5); }
.bi-msgpop__recv { background: var(--bg-input); border: 1px solid var(--border-base); border-radius: var(--radius-2xl); padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-1_5); }
.bi-msgpop__recv-top h4 { font-size: var(--fs-md); font-weight: var(--fw-black); color: var(--txt-primary); margin: 0; }
.bi-msgpop__recv-top span { font-size: var(--fs-sm); color: var(--txt-disabled); }
.bi-msgpop__tag { font-size: var(--fs-xs); padding: var(--space-0_5) var(--space-1_5); border-radius: var(--radius-sm); font-weight: var(--fw-extrabold); }
.bi-msgpop__tag.tag-indigo { background: var(--color-indigo-50); color: var(--color-indigo-700); }
.bi-msgpop__tag.tag-amber { background: var(--color-warning-50); color: var(--color-warning-700); }
.bi-msgpop__tag.tag-rose { background: var(--color-rose-50); color: var(--color-rose-700); font-weight: var(--fw-black); }
.bi-msgpop__meta { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--txt-disabled); font-weight: var(--fw-bold); padding: 0 var(--space-0_5); }
.bi-msgpop__mode-name { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--txt-secondary); }
.bi-msgpop__mode-price { font-size: var(--fs-2xs); color: var(--txt-disabled); }
.bi-msgpop__mode.is-active i, .bi-msgpop__mode.is-active .bi-msgpop__mode-name { color: var(--brand-blue); }
.bi-msgpop__scroll { display: flex; flex-direction: column; gap: var(--space-3_5); padding-bottom: var(--space-4); }   /* 보드 .pop-body 의 아래 16 */
.bi-pop-pay--aim-fit .bi-msgpop__mode-name  { font-size: var(--fs-base); font-weight: 800; color: var(--txt-secondary); }
.bi-pop-pay--aim-fit .bi-msgpop__mode-price { font-size: var(--fs-xs); font-weight: 700; color: var(--dc-mut); }.bi-pop-pay--aim-fit .bi-msgpop__mode.is-active .bi-msgpop__mode-price { color: var(--brand-blue); opacity: .75; }
.bi-pop-tbl{ border: 1px solid var(--border-base); border-radius: var(--radius-lg); overflow: hidden; }
.bi-pop-tbl-head{
    display: grid; gap: var(--space-2); padding: var(--space-2) var(--space-3);
    background: var(--bg-input); border-bottom: 1px solid var(--border-base);
    font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--txt-muted);
}
.bi-pop-tbl-cell--amt{ text-align: right; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.bi-pop-page{ background: var(--bg-card); }
/* 팝업은 별도 문서라 .bi-page 스코프가 안 닿는다 — 폼 컨트롤 글꼴을 여기서도 물려받게 한다
 * (브라우저 기본은 Arial 이라 본문 글꼴을 안 따라온다, 2026-08-21) */
.bi-pop-page input,
.bi-pop-page select,
.bi-pop-page textarea,
.bi-pop-page button { font-family: var(--font-sans); }
.bi-pop-pad{ padding: 0 var(--space-2_5); box-sizing: border-box; }   /* 규격값은 .bi-pop-board 에서 덧붙인다(2026-08-28 되돌림) */
.bi-pop-btnbar{ padding-top: var(--space-3); }
.bi-pop-block{ padding-top: var(--space-4); }
.bi-pop-spec__lbl{ color: var(--brand-blue); font-size: var(--fs-sm); text-align: left; }
.bi-pop-paybtn{ height: 60px; font-size: var(--fs-base); color: var(--white); box-sizing: border-box; }
.bi-pop-paybtn-row{ display: flex; gap: var(--space-2); margin-bottom: var(--space-2_5); }
.bi-pop-paybtn-row > .bi-pop-paybtn{ flex: 1; min-width: 0; }
.bi-pop-picker__col { width: var(--bi-picker-w, 280px); height: 350px; box-sizing: border-box; }
.bi-pop-picker__col--w430{ --bi-picker-w: 430px; width: 430px; }   /* 단독으로도 쓸 수 있게 */
/* ⚠ 폭은 부모가 정한다. 여기 `width:280px` 는 부모 .bi-pop-picker__col 의 **바깥 폭**을 그대로
 *   다시 적은 것이라, 칼럼의 좌우 안쪽 여백(17px)만큼 그대로 넘쳤다(280 > 263, 2026-08-14 실측).
 *   .bi-timeline 이 `width:40%` 로 눌렸던 것과 같은 계열이다. */
.bi-pop-picker__sec { width: 100%; height: 50%; margin: var(--space-4) 0; box-sizing: border-box; }
.bi-pop-picker__list{ width: 230px; float: right; }
.bi-pop-picker__head{ padding: 0 0 var(--space-1_5) 0; margin-top: var(--space-3); }
.bi-pop-bk__scroller { display: none; height: 45px; color: var(--txt-muted); }
.bi-pop-bk__arrow    { width: 50px; font-size: var(--fs-2xl, 25px); margin-top: var(--space-2_5); text-align: center; }
.bi-pop-bk__info     { min-width: 335px; border: 1px solid var(--border-light); border-top: none;
                        overflow-y: auto; position: relative; background: var(--bg-card); box-sizing: border-box; }
.bi-pop-bk__info-pad { padding: var(--space-4) var(--space-4_5, 18px); }
.bi-pop-bk__title    { font-weight: var(--fw-bold); font-size: var(--fs-xl); color: var(--txt-secondary); }
.bi-pop-bk__searchbox{ display: flex; border: 1px solid var(--border-light); width: 258px;
                        padding: var(--space-1_5); background: var(--bg-card); height: 21px; box-sizing: border-box; }
.bi-pop-bk__schhead  { height: auto; padding-bottom: var(--space-2_5); border-bottom: 5px solid var(--border-light); }
.bi-pop-bk__schtitle { font-size: var(--fs-sm); padding: 11px 0 var(--space-2_5) var(--space-2_5); width: 95%; box-sizing: border-box; }
.bi-pop-bk__row      { display: flex; width: 100%; background: var(--bg-card); }
.bi-pop-bk__sec      { margin-top: var(--space-6); font-size: var(--fs-lg); margin-bottom: var(--space-5); font-weight: var(--fw-bold); }
.bi-pop-bk__sec--sub { margin-top: var(--space-2_5); font-size: var(--fs-lg); margin-bottom: var(--space-1_5); font-weight: var(--fw-normal); }
.bi-pop-bk__name     { margin-left: var(--space-4); color: var(--txt-secondary); }
.bi-pop-bk__hr       { margin: var(--space-0_5) 0; }
.bi-pop-bk__group    { text-align-last: justify; padding: var(--space-4) var(--space-2_5); }
.bi-pop-bk__copy     { border-bottom: 1px solid var(--border-base); margin-bottom: var(--space-10); display: none; }
.bi-pop-picker__nav    { height: 60px; width: 40px; font-size: var(--fs-base); margin-left: var(--space-2_5); }
.bi-pop-picker__nav--tall{ height: 85px; }
.bi-pop-corner-in{ width: 155px; position: absolute; bottom: 7px; right: 18px; }
.bi-pop-lbl60{ width: 60px; margin-right: var(--space-5); text-align: right; }
.bi-pop-scrollbox  { height: 130px; overflow: auto; }
.bi-pop-tbl-empty{ grid-column: 1 / -1; color: var(--txt-muted); padding: var(--space-4) 0; font-size: var(--pop-cnt-fs); }
.bi-pop-tbl--c1{ grid-template-columns: 1fr; }
.bi-pop-tbl--c2.bi-pop-tbl-head, .bi-pop-tbl--c2.bi-pop-tbl-row{ grid-template-columns: repeat(2, 1fr); }
.bi-pop-tbl--c3.bi-pop-tbl-head, .bi-pop-tbl--c3.bi-pop-tbl-row{ grid-template-columns: repeat(3, 1fr); }
.bi-pop-tbl--c4.bi-pop-tbl-head, .bi-pop-tbl--c4.bi-pop-tbl-row{ grid-template-columns: repeat(4, 1fr); }
.bi-pop-tbl--c5.bi-pop-tbl-head, .bi-pop-tbl--c5.bi-pop-tbl-row{ grid-template-columns: repeat(5, 1fr); }
.bi-pop-tbl--c6.bi-pop-tbl-head, .bi-pop-tbl--c6.bi-pop-tbl-row{ grid-template-columns: repeat(6, 1fr); }
.bi-pop-tbl--c12.bi-pop-tbl-head, .bi-pop-tbl--c12.bi-pop-tbl-row{ grid-template-columns: repeat(12, 1fr); }
.bi-pop-tbl--c2 .bi-pop-tbl-head, .bi-pop-tbl--c2 .bi-pop-tbl-row{ grid-template-columns: repeat(2, 1fr); }
.bi-pop-tbl--c3 .bi-pop-tbl-head, .bi-pop-tbl--c3 .bi-pop-tbl-row{ grid-template-columns: repeat(3, 1fr); }
.bi-pop-tbl--c4 .bi-pop-tbl-head, .bi-pop-tbl--c4 .bi-pop-tbl-row{ grid-template-columns: repeat(4, 1fr); }
.bi-pop-tbl--c5 .bi-pop-tbl-head, .bi-pop-tbl--c5 .bi-pop-tbl-row{ grid-template-columns: repeat(5, 1fr); }
.bi-pop-tbl--c6 .bi-pop-tbl-head, .bi-pop-tbl--c6 .bi-pop-tbl-row{ grid-template-columns: repeat(6, 1fr); }
.bi-pop-tbl--c12 .bi-pop-tbl-head, .bi-pop-tbl--c12 .bi-pop-tbl-row{ grid-template-columns: repeat(12, 1fr); }
.bi-pop-spec{
    display: grid; grid-template-columns: 2fr 3fr; gap: var(--space-2);
    align-items: center; padding: var(--space-2_5) 0;
    /* ⚠ float 형제 사이에 놓이면 폭이 0 이 된다(slip_2022 에서 clientWidth 0 으로 실측).
     * 레거시 팝업은 아직 float 흐름이 남아 있어 width·clear 를 함께 준다. */
    box-sizing: border-box; width: 100%; clear: both;
}
.bi-pop-spec--half{ grid-template-columns: 1fr 1fr; }   /* 균등 2열 — 구 float 50%/50% */
.bi-pop-spec--3{ grid-template-columns: 3fr 1fr 1fr; }
.bi-pop-slip-sep{ margin: var(--space-2_5) 0; height: 0; border-top: 1px dashed var(--pop-line); background: none; }
.bi-pop-slip-sep--b{ border-top-style: solid; }
.bi-pop-inforow{ display: flex; align-items: center; justify-content: space-between; min-height: 30px; }
.bi-pop-inforow--lbl130{ justify-content: flex-start; gap: var(--space-2); padding-bottom: var(--space-3); }
.bi-pop-inforow--lbl130 > :first-child{ flex: 0 0 130px; }
.bi-pop-spec--total{ font-weight: var(--fw-bold); border-top: 1px solid var(--border-base); }
.bi-pop-clist-item.is-sel .bi-pop-clist-meta{ color: var(--color-indigo-600); }.bi-promo__deco { position: absolute; right: 0; top: 0; height: 100%; width: 33%; opacity: 0.1; pointer-events: none; }
.bi-promo__deco svg { height: 100%; width: 100%; }
.bi-promo__body { position: relative; z-index: 10; }   /* 본문은 폭 제한 없음 → 닫기 버튼 우측 끝 정렬 */
.bi-promo__top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--space-4); }
.bi-promo__badge {
    padding: var(--space-1) var(--space-3); border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--white) 20%, transparent);
    border: 1px solid color-mix(in srgb, var(--white) 10%, transparent);
    font-size: var(--fs-sm); font-weight: var(--fw-semibold);
    color: var(--bg-card);                    /* 흰 글자 (상속 의존 X) */
}
/* 배너 닫기 — 높이를 안 정해 글자 높이(16px)가 그대로 버튼 높이가 됐다.
 * 누르는 것은 사다리를 따른다 → xs 22(§12-4, 2026-08-14). */
.bi-promo__close {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1);
    height: 22px; padding: 0 var(--space-1_5);
    background: none; border: none; cursor: pointer;
    font-size: var(--fs-sm); opacity: 0.8; transition: opacity .15s;
    color: var(--bg-card);
}
.bi-promo__close:hover { opacity: 1; }
.bi-promo__title { font-size: var(--fs-2xl); font-weight: var(--fw-bold); line-height: 1.25; margin: 0 0 var(--space-3); color: var(--bg-card); }   /* text-2xl, white */
.bi-promo__desc { font-size: var(--fs-md); line-height: 1.625; margin: 0 0 var(--space-8); max-width: 42rem; color: color-mix(in srgb, var(--white) 80%, transparent); }   /* text-white/80 */
/* 배너의 주 액션 — 높이를 안 정해 padding 이 높이를 만들었다(40·42, 테두리 유무로 갈림).
 * 눌러야 하는 것은 사다리를 따른다 → lg 48(§12-4, 2026-08-14). */
.bi-promo__btn { height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0 var(--space-6); box-sizing: border-box; border-radius: var(--radius-lg); font-size: var(--fs-md); font-weight: var(--fw-bold); cursor: pointer; transition: background .15s; border: none; }
.bi-promo__btn--light { background: var(--bg-card); color: var(--brand-blue); }   /* 파란 글자 */
.bi-promo__btn--light:hover { background: var(--border-light); }
.bi-promo__btn--navy { background: var(--brand-navy); color: var(--bg-card); border: 1px solid color-mix(in srgb, var(--white) 20%, transparent); }   /* 흰 글자 */
.bi-promo__btn--navy:hover { background: var(--brand-navy-hover); }
.bi-promo__mockup {
    position: absolute; right: 48px; top: 48px; bottom: 0; width: 320px;
    background: color-mix(in srgb, var(--white) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--white) 20%, transparent); border-bottom: none;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0; padding: var(--space-4);
}
.bi-promo__tags { display: flex; gap: var(--space-2); margin-bottom: var(--space-4); }
.bi-promo__tags span { padding: var(--space-0_5) var(--space-2); border-radius: var(--radius-full); background: color-mix(in srgb, var(--white) 20%, transparent); font-size: var(--fs-2xs); }
.bi-promo__lines { display: flex; flex-direction: column; gap: var(--space-2); opacity: 0.5; }
.bi-promo__line { height: 8px; background: var(--bg-card); border-radius: var(--radius-sm); width: 100%; }
.bi-promo__line--3q { width: 75%; }
.bi-promo__line--5q { width: 83%; }
.bi-promo__spark { position: absolute; bottom: 16px; right: 16px; font-size: var(--icon-md); color: var(--bg-card); opacity: 0.8; }
.bi-statgrid--2 { grid-template-columns: repeat(2, 1fr); }
.bi-dash-kpi-lb { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--txt-disabled); margin-bottom: var(--space-1); white-space: nowrap; }  /* text-xs font-medium text-gray-400 */
.bi-dash-kpi { font-size: var(--fs-3xl); font-weight: var(--fw-bold); color: var(--txt-primary); line-height: 1.1; }  /* text-3xl font-bold */
.bi-stat--navy { background: var(--brand-navy); border-color: var(--brand-navy); box-shadow: var(--shadow-md); }
.bi-stat--navy .bi-dash-kpi-lb { color: color-mix(in srgb, var(--white) 70%, transparent); }   /* text-white/70 */
.bi-stat--navy .bi-dash-kpi { color: var(--bg-card); }
.bi-stat--navy:hover { border-color: var(--brand-navy); }
.bi-stat--navy.is-active { box-shadow: var(--shadow-md); }
.bi-stat--purple { background: var(--brand-purple); border-color: var(--brand-purple); box-shadow: var(--shadow-md); }
.bi-stat--purple .bi-dash-kpi-lb { color: color-mix(in srgb, var(--white) 70%, transparent); }
.bi-stat--purple .bi-dash-kpi { color: var(--bg-card); }
.bi-stat--purple:hover { border-color: var(--brand-purple); }
.bi-stat--purple .bi-stat__ico { color: color-mix(in srgb, var(--white) 30%, transparent); }   /* ArrowUpRight text-white/30 */
.bi-stat--purple.is-active { box-shadow: var(--shadow-md); }   /* 강조 카드 활성 시 파란 링 대신 고유 그림자 (navy 와 동일) */
.bi-simpletbl tbody tr: last-child td { border-bottom: none; }
.bi-simpletbl tbody tr: hover { background: color-mix(in srgb, var(--bg-input) 50%, transparent); }
.bi-simpletbl__time { color: var(--gray-600); font-weight: var(--fw-medium); white-space: nowrap; }   /* text-gray-600 font-medium */
.bi-simpletbl__name { font-weight: var(--fw-bold); color: var(--txt-primary); }   /* font-bold text-gray-900 */
.bi-simpletbl__cell { color: var(--txt-muted); }
.bi-simpletbl__cell--ok { color: var(--color-success-500); }           /* 미지정 = green */
.bi-simpletbl__memo { text-align: right; color: var(--txt-disabled); font-size: var(--fs-sm); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }  /* text-gray-400 text-xs truncate */
.bi-simpletbl-empty { text-align: center; color: var(--txt-disabled); padding: var(--space-8) 0; }
.bi-simpletbl-more {
    width: 100%; margin-top: var(--space-4); padding: var(--space-2); border: none; cursor: pointer;
    background: none; border-radius: var(--radius-lg);
    font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--brand-blue);
    transition: background .15s;
}
.bi-simpletbl-more:hover { background: var(--color-info-50); }   /* hover:bg-blue-50 */
.bi-carousel__btn {
    width: 32px; height: 32px; border: none; background: none; cursor: pointer;
    border-radius: var(--radius-full); color: var(--txt-disabled); font-size: var(--fs-md);
    display: flex; align-items: center; justify-content: center;
    transition: background .15s, color .15s;
}
.bi-carousel__btn:hover { background: var(--border-light); color: var(--txt-muted); }
.bi-carousel__track { display: flex; gap: var(--space-4); transition: transform .3s ease; }
.bi-carousel__avatar { position: relative; margin-bottom: var(--space-3); }.bi-carousel__card:hover .bi-carousel__avatar img { transform: scale(1.05); }
.bi-carousel__avatar-ph { display: flex; align-items: center; justify-content: center; background: var(--border-light); color: var(--txt-disabled); font-size: var(--fs-2xl); }
.bi-carousel__name { font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--txt-primary); margin: 0; }
.bi-carousel__role { font-size: var(--fs-sm); color: var(--txt-disabled); margin: 0 0 var(--space-4); }
.bi-carousel__stats { display: flex; justify-content: space-between; width: 100%; text-align: center; padding: 0 var(--space-2); }
.bi-carousel__stat { display: flex; flex-direction: column; align-items: center; }
.bi-carousel__stat-lb { font-size: var(--fs-2xs); color: var(--txt-disabled); margin-bottom: var(--space-1); display: flex; align-items: center; gap: var(--space-1); }
.bi-carousel__divider { width: 1px; background: var(--border-light); align-self: stretch; }
.bi-carousel__empty { color: var(--txt-disabled); padding: var(--space-6); text-align: center; width: 100%; }
.bi-input--xs        { height: 16px; }
.bi-input--xs2       { height: 19px; }
.bi-input--sm        { height: 25px; }
.bi-input--sm2       { height: 30px; }
.bi-input--lg        { height: 46px; font-size: var(--fs-md); }
.bi-input--xl        { font-size: var(--fs-xl); }   /* 글자만 키운다 — 금액칸 */
.bi-input--w30       { width: 30px; }
.bi-input--w65       { width: 65px; }
.bi-input--w110      { width: 110px; }
.bi-input--w155      { width: 155px; }
.bi-input--w250      { width: 250px; }
.bi-input--w300      { width: 300px; }
.bi-input--plain     { border: none; margin-top: 0; pointer-events: none; font-weight: var(--fw-bold); }
.bi-proditem-row{ display: grid; grid-template-columns: 226px 100px 116px 117px; align-items: center; }
/* 구성상품 표 — 머리와 줄이 «같은 격자» 를 쓰게 한다 (2026-09-04 사용자 지시).
   전에는 머리만 격자(226+100+116+117=559)였고 줄은 float + 인라인 width 였다.
   그래서 720 팝업 안에서 오른쪽 125px 이 통째로 비었다. 상품명 칸을 1fr 로 늘려 폭을 다 쓴다. */
.bi-proditem-row--fluid{ grid-template-columns: 1fr 92px 124px 124px; gap: var(--space-2); }
.bi-proditem-cell{ display: flex; align-items: center; gap: var(--space-1_5); min-width: 0; }
.bi-proditem-cell > input[type="text"]{ flex: 1 1 auto; min-width: 0; width: auto; }
/* ⚠ 전역 .li-style 이 `float:left · width:98% · padding:6px` 을 준다 — 격자와 싸운다.
   실측: 머리는 18~700 인데 줄은 18~686 으로 «14px 짧았다». 눈으로는 안 보이는 어긋남이다.
   그리고 .ul-style 의 `margin-bottom:50px` 이 표 아래 빈 띠를 만들었다. 둘 다 여기서 되돌린다. */
#pro_list_ul{ margin: var(--space-2_5) 0 0; }
#pro_list_ul > li.bi-proditem-row--fluid{ float: none; width: auto; padding: var(--space-1) 0; }
/* 상품 고르기 돋보기 — 인라인 style(색·밑줄)로 그리던 것을 클래스로 옮겼다(2026-09-04) */
.bi-proditem-pick{ flex: 0 0 auto; color: var(--txt-primary); text-decoration: none; }
.bi-input--w90       { width: 90px; }
.bi-pop-lbl-pad    { padding-top: var(--space-0_5); }   /* 읽기전용 값 옆 라벨 미세 정렬 */
.bi-pop-picker__col--h300{ height: 300px; }
.bi-pop-slip-body  { padding: var(--space-2_5) 0; font-size: var(--fs-sm); }
.bi-pop-slip-title { font-size: var(--fs-lg); font-weight: var(--fw-bold); padding: var(--space-2_5) 0; }
.bi-pop-slip-sign{ position: relative; border: 1px solid var(--pop-line); border-radius: var(--radius-lg); background: var(--bg-card); overflow: hidden; }
.bi-pop-slip-sign::after{ content: '이 칸에 서명해 주세요'; position: absolute; left: var(--space-3_5); right: var(--space-3_5); bottom: var(--space-3);
    border-top: 1px dashed var(--pop-line); padding-top: var(--space-1_5); text-align: center;
    font-size: var(--pop-cnt-fs); color: var(--txt-disabled); pointer-events: none; }
.bi-pop-slip-sign canvas{ position: relative; z-index: 1; }
.bi-pop-slip-sign img{ display: block; position: absolute; left: 0; top: 0;
                        border-radius: var(--radius-sm); box-shadow: var(--shadow-xs) inset;
                        border: 1px solid var(--border-base); width: 250px; height: 150px; }
.bi-pop-slip-canvas{ touch-action: none; user-select: none; width: 100%; height: 150px; display: block; }
.bi-search-wrap--full{ max-width: none; width: 100%; }
.bi-search-icon--right { left: auto; right: 12px; pointer-events: auto; cursor: pointer; z-index: 5; }
.bi-modal--lg { max-width: 640px; }
.bi-modal__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--border-light);
}
.bi-modal__head-ico {
    width: 38px; height: 38px; border-radius: var(--radius-xl);
    background: var(--color-info-50); color: var(--brand-blue);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--fs-lg); flex-shrink: 0;
}
.bi-modal__head-txt h3 { margin: 0; font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--txt-primary); }
.bi-modal__head-txt p  { margin: var(--space-0_5) 0 0; font-size: var(--fs-sm); color: var(--txt-muted); }
.bi-modal__close {
    width: 32px; height: 32px; border: none; background: transparent;
    color: var(--txt-disabled); border-radius: var(--radius-lg);
    cursor: pointer; font-size: var(--fs-lg);
}
.bi-modal__close:hover { background: var(--border-light); color: var(--txt-secondary); }
.bi-modal__foot {
    display: flex; justify-content: flex-end; gap: var(--space-2);
    padding: var(--space-4) var(--space-6);
    background: var(--bg-input); border-top: 1px solid var(--border-light);
}
.bi-modal__divider { height: 1px; background: var(--border-light); }
.bi-modal__body--sections { display: flex; flex-direction: column; gap: var(--space-5); }
.bi-modal__label {
    display: flex; align-items: center; justify-content: space-between;
    font-size: var(--fs-base); font-weight: var(--fw-bold); color: var(--txt-secondary);
    margin-bottom: var(--space-2_5);
}
.bi-linkbtn {
    border: none; background: transparent; cursor: pointer;
    color: var(--brand-blue); font-size: var(--fs-sm); font-weight: var(--fw-semibold);
}
.bi-linkbtn:hover { text-decoration: underline; }
.bi-avatar--lg { width: 40px; height: 40px; font-size: var(--fs-md); }
.bi-avatar      { position: relative; overflow: visible; }
.bi-avatar__img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    border-radius: var(--radius-full); object-fit: cover;
    background: var(--bg-card); z-index: 1;
}
.bi-avatar__initial { line-height: 1; }
.bi-avatar__dot {
    position: absolute; bottom: -1px; right: -1px; width: 11px; height: 11px;
    border-radius: var(--radius-full); background: var(--color-success-500);
    border: 2px solid var(--white); z-index: 2;
}
.bi-dropdown--below {
    position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    margin-top: var(--space-1); min-width: 188px; z-index: 50;
    padding: 0 0 var(--space-1); overflow: hidden; text-align: left;
    border-radius: var(--radius-xl); box-shadow: var(--shadow-lg);
}
.bi-dropdown__label {
    padding: var(--space-2) var(--space-3) var(--space-1_5);
    font-size: var(--fs-2xs); font-weight: var(--fw-bold); color: var(--txt-disabled);
    letter-spacing: 0.04em; background: var(--bg-input); text-transform: uppercase;
}
.bi-dropdown__divider { height: 1px; background: var(--border-light); margin: var(--space-1) 0; }
.bi-dropdown__item   { display: flex; align-items: center; gap: var(--space-2); width: 100%; border: none; background: transparent; text-align: left; }
.bi-dropdown__item i { width: 14px; text-align: center; font-size: var(--fs-sm); color: var(--txt-disabled); }
.bi-dropdown__item:hover i { color: var(--brand-blue); }
.bi-dropdown__item--danger:hover { background: var(--color-danger-50); color: var(--color-danger-600); }
.bi-dropdown__item--danger:hover i { color: var(--color-danger-600); }
.bi-pickgrid--4 { grid-template-columns: repeat(4, 1fr); }
.bi-pick__av { overflow: hidden; }
.bi-pick--danger.bi-pick--on { background: var(--color-danger-50); border-color: var(--color-danger-200); color: var(--color-danger-600); box-shadow: none; }
.bi-pick--danger.bi-pick--on::after { background: var(--color-danger-600); }
.bi-datenav__mid { display: flex; align-items: center; gap: var(--space-1_5); padding: 0 var(--space-2); }
.bi-datenav__ico { color: var(--brand-blue); font-size: var(--fs-base); flex-shrink: 0; }
.bi-schmx { width: 100%; flex: 1; min-height: 0; overflow: auto; white-space: nowrap; }
.bi-schmx::-webkit-scrollbar { width: 8px; height: 8px; }
.bi-schmx::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: var(--radius-sm); }
.bi-schmx::-webkit-scrollbar-track { background: var(--bg-input); }
.bi-schmx__head {
    height: 152px; display: flex; flex-direction: column;
    align-items: center; justify-content: center; text-align: center;
    background: var(--bg-card); border-bottom: 1px solid var(--border-light);
    position: sticky; top: 0; z-index: 5; box-sizing: border-box;
    padding: var(--space-3_5) var(--space-2); transition: background 0.12s;
}
.bi-schmx__col:not(.bi-schmx__col--time) .bi-schmx__head:hover { background: var(--bg-input); }
.bi-schmx__col--time .bi-schmx__head { width: auto; }
.bi-schmx__head-in { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); width: 100%; text-align: center; }
.bi-schmx__timelb { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--txt-disabled); letter-spacing: 0.02em; }
.bi-schmx__row { height: 48px; padding: var(--space-1_5); border-bottom: 1px solid var(--bg-input); box-sizing: border-box; }
.bi-schmx__col--time .bi-schmx__row {
    display: flex; align-items: center; justify-content: center;
    font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--txt-muted);
    font-family: var(--font-mono, monospace);
    border-bottom: 1px solid var(--border-light); background: var(--bg-card);
    cursor: pointer; padding: 0; text-align: center;
    transition: background 0.12s, color 0.12s;
}
.bi-schmx__col--time .bi-schmx__row:hover { color: var(--brand-blue); background: var(--color-info-50); }
.bi-schmx__col--time .bi-schmx__row br { display: none; }
.bi-schmx__timetxt { pointer-events: none; }
.bi-schmx__row .bi-schmx__slot--booked { background: var(--color-danger-50); border-color: var(--color-danger-200); }
.bi-schmx__row .bi-schmx__slot--booked:hover { background: var(--color-danger-100); }
.bi-schmx__row .bi-schmx__slot--booked .bi-schmx__count { color: var(--color-danger-600); }
.bi-erp-card--flush { padding: 0; overflow: hidden; display: flex; flex-direction: column; flex: 1; min-height: 0; }
.bi-chip__x { margin-left: var(--space-1_5); font-weight: var(--fw-bold); font-size: var(--fs-md); line-height: 1; color: var(--txt-disabled); transition: color .15s; }
.bi-chip:hover .bi-chip__x { color: var(--brand-blue); }
.bi-chipbox {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
    border: 1px solid var(--color-info-100);
    background: color-mix(in srgb, var(--color-info-50) 40%, transparent);
    padding: var(--space-3) var(--space-3_5);
    border-radius: var(--radius-xl); min-height: 50px;
}
.bi-chipbox--tight { padding: var(--space-2_5) var(--space-3); min-height: 25px; }
.bi-chipbox__lb { flex-shrink: 0; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--brand-blue); letter-spacing: 0.03em; }
.bi-countpill__n { color: var(--brand-blue); font-size: var(--fs-lg); }
.bi-countpill--sel   { background: color-mix(in srgb, var(--brand-blue) 10%, transparent); color: var(--brand-blue); }
.bi-countpill--total { background: var(--border-light); color: var(--gray-600); }
.bi-datatbl thead th.bi-datatbl__cb { width: 50px; text-align: center; }
.bi-datatbl td.bi-datatbl__nowrap { white-space: nowrap; }
.bi-datatbl__loading { text-align: center; padding: var(--space-8) var(--space-5); background: var(--bg-page); }
.bi-camp        { display: flex; flex-direction: column; gap: var(--space-4); }
.bi-camp__body  { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.bi-fpanel__title-txt { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--gray-800); }
.bi-fpanel__chev      { width: 20px; height: 20px; color: var(--txt-muted); transition: transform .3s; }
.bi-fpanel.is-open .bi-fpanel__chev { transform: rotate(180deg); }
.bi-fcat__title {
    display: flex; align-items: center; gap: var(--space-1_5);
    font-size: var(--fs-base); font-weight: var(--fw-semibold); color: var(--txt-primary);
    margin-bottom: var(--space-2_5); letter-spacing: -0.01em;
}
.bi-fcat__title i { color: var(--brand-blue); font-size: var(--fs-base); width: 14px; text-align: center; }
.bi-msgprev {
    background: var(--border-light); border: 1px solid var(--border-base);
    border-radius: var(--radius-2xl); padding: var(--space-5);
    font-size: var(--fs-md); line-height: 1.7; color: var(--txt-secondary);
}
.bi-msgprev.is-editing { border-color: var(--brand-blue); box-shadow: var(--ring-focus); outline: none; }
.bi-msgprev__var       { color: var(--txt-disabled); font-weight: var(--fw-semibold); font-size: var(--fs-md); }
.bi-checkbox-native[type="checkbox"] {
    visibility: visible; display: inline-block;
    width: 16px; height: 16px; margin: 0;
    accent-color: var(--brand-blue); cursor: pointer;
}
.bi-checkbox-native + label { display: none; }
.bi-datatbl__more-body {
    max-width: 100%;
}
.bi-datatbl__more-text {
    background: white;
    border: 1px solid var(--color-warning-300);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    color: var(--txt-muted);
    font-size: var(--fs-md);
    margin: var(--space-2_5) 0;
    text-align: left;
}
.bi-camp__actions {
    margin-top: var(--space-8);
    display: flex;
    gap: var(--space-3);
}
.bi-camp {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: 0 0 var(--space-6); /* 좌우 0: 공통 .bi-page padding(16px)이 헤더와 동일하게 정렬 담당. 하단만 스크롤 끝 여백 (2026-07-31) */
}
.bi-camp__target { padding: 0; }
.bi-camp__target-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-6);
    background: var(--gray-50);
    border-bottom: 1px solid var(--border-light);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.bi-camp__target-title {
    margin: 0;
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    color: var(--txt-primary);
    line-height: 1.3;
}
.bi-camp__target-sub {
    margin: var(--space-1) 0 0;
    font-size: var(--fs-base);
    color: var(--txt-muted);
}
.bi-camp__target-head .bi-btn--navy { flex-shrink: 0; }
.bi-camp__target > #aiResult { padding: var(--space-4) var(--space-6) var(--space-5); }
.bi-camp__target .bi-fpanel__body { padding: var(--space-2) 0 0; }
.bi-camp__target #selectedChips { margin-bottom: var(--space-3_5); }
.bi-camp__target .bi-fpanel { margin-top: var(--space-0_5); }
.bi-camp__grid .bi-fcat__title {
    margin-bottom: 0;
    flex-shrink: 0;
    white-space: nowrap;
}
.bi-camp__cols {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: var(--space-4);
    align-items: start; /* 발송대상 목록(우)이 길어져도 AI 메시지 영역(좌)이 따라 늘어나지 않도록 */
}.bi-camp__editor { padding: 0; }
.bi-camp__editor-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border-light);
}
.bi-camp__editor-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    color: var(--txt-primary);
}
.bi-camp__spark {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-lg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-indigo-500), var(--color-purple-600));
    color: var(--bg-card);
    font-size: var(--fs-base);
    box-shadow: var(--shadow-sm);
}
.bi-camp__editor-btns { display: flex; gap: var(--space-2); flex-shrink: 0; }
.bi-camp__editor-btns .bi-btn--block {
    margin-top: 0;
    width: auto;
    white-space: nowrap;
}
.bi-camp__editor-body { padding: var(--space-5) var(--space-5); }
.bi-camp__editor-body .bi-msgprev { flex: 0 0 auto; min-height: 170px; }
.bi-camp__editor-body .bi-msgprev#aiMsgLoading { min-height: 0; }
.bi-camp__tip {
    background: var(--color-info-50);
    border: 1px solid var(--color-info-100);
    border-radius: var(--radius-xl);
    padding: var(--space-3) var(--space-3_5);
}
.bi-camp__tip-head {
    margin: 0;
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    color: var(--color-info-900);
    cursor: pointer;
}
.bi-camp__tip-line {
    margin: var(--space-2) 0 0;
    font-size: var(--fs-sm);
    line-height: 1.6;
    color: var(--color-info-700);
}
.bi-camp__audience { padding: 0; margin: 0; }
.bi-camp__aud-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    margin-bottom: 0;
    border-bottom: 1px solid var(--border-light);
}
.bi-camp__aud-head .bi-row { margin-left: 0; }
.bi-camp__selectall {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    flex-shrink: 0;
}
.bi-camp__selectall-txt {
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    color: var(--gray-600);
}
.bi-camp__th-div {
    display: block;
    width: 4px;
    height: 16px;
    background: var(--gray-300);
    border-radius: var(--radius-full);
    margin: 0 auto;
}
.bi-camp__audience .bi-camp__actions {
    margin-top: 0;
    padding: var(--space-3_5) var(--space-5);
    border-top: 1px solid var(--border-light);
}
.bi-camp__audience .bi-camp__actions .bi-btn--lg {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}
.bi-queue__time { font-size: var(--fs-xs); font-weight: var(--fw-extrabold); padding: var(--space-0_5) var(--space-1_5); border-radius: var(--radius-xs); background: var(--color-info-50); color: var(--color-info-600); border: 1px solid var(--color-info-100); flex-shrink: 0; }
.bi-queue__time.is-none { background: var(--bg-input); color: var(--txt-disabled); border-color: var(--border-base); }
.bi-queue__phone { font-size: var(--fs-sm); color: var(--txt-muted); font-family: monospace; }
.bi-desk__hist-sec { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); }
.bi-desk__hist-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-3_5); padding-right: var(--space-1); }
.bi-desk__hist-item { position: relative; padding-left: var(--space-4); border-left: 1px solid var(--gray-100); }
.bi-desk__hist-box { background: color-mix(in srgb, var(--bg-input) 60%, transparent); border: 1px solid var(--border-base); border-radius: var(--radius-xl); padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
.bi-desk__hist-box-top span: first-child { font-family: monospace; font-weight: var(--fw-extrabold); color: var(--txt-primary); }
.bi-desk__hist-emp { font-size: var(--fs-xs); color: var(--txt-muted); background: var(--border-light); padding: var(--space-0_5) var(--space-1_5); border-radius: var(--radius-sm); font-weight: var(--fw-bold); }
.bi-desk__hist-sum { font-size: var(--fs-base); font-weight: var(--fw-bold); color: var(--txt-secondary); line-height: 1.5; margin: 0; }
.bi-desk__hist-memo { padding-top: var(--space-2); border-top: 1px dashed var(--border-base); font-size: var(--fs-2xs); color: var(--gray-500); line-height: 1.5; }
.bi-desk__hist-memo span { font-weight: var(--fw-extrabold); color: var(--txt-secondary); display: block; margin-bottom: var(--space-0_5); }
.bi-desk__hist-memo p { background: color-mix(in srgb, var(--white) 80%, transparent); padding: var(--space-1_5); border-radius: var(--radius-sm); border: 1px solid color-mix(in srgb, var(--border-base) 50%, transparent); font-family: monospace; margin: 0; }
.bi-desk__consult { border-top: 1px solid var(--gray-100); padding-top: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); flex-shrink: 0; }
.bi-desk__consult--top { border-top: 0; border-bottom: 1px solid var(--gray-100); padding: var(--space-4); }
.bi-desk__consult-ta { width: 100%; height: auto; min-height: 112px; font-size: var(--fs-md); padding: var(--space-2_5); background: color-mix(in srgb, var(--color-warning-50) 20%, transparent); border: 1px solid var(--color-warning-200); border-radius: var(--radius-xl); outline: none; resize: none; line-height: 1.625; color: var(--gray-800); box-shadow: var(--shadow-inset); }
.bi-desk__consult-ta:focus { background: var(--bg-card); border-color: var(--brand-blue); }
.bi-desk__bal { background: var(--bg-card); border: 1px solid var(--border-base); border-radius: var(--radius-xl); padding: var(--space-3); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: var(--space-2); }
.bi-desk__ticket-info h5 { font-size: var(--fs-base); font-weight: var(--fw-extrabold); color: var(--txt-primary); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bi-basket__title { font-size: var(--fs-md); font-weight: var(--fw-extrabold); color: var(--color-indigo-900); display: inline-flex; align-items: center; gap: var(--space-1_5); }
.bi-basket__title i { color: var(--color-indigo-700); }
.bi-basket__row-r span { font-family: monospace; color: var(--gray-600); font-weight: var(--fw-bold); }
.bi-deskbar { background: var(--color-success-50); border: 2px solid var(--color-success-200); border-radius: var(--radius-2xl); padding: var(--space-4); display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.bi-deskbar__ic { width: 40px; height: 40px; border-radius: 50%; background: var(--color-success-100); color: var(--color-success); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: var(--fs-xl); }
.bi-deskbar__txt h4 { font-size: var(--fs-lg); font-weight: var(--fw-extrabold); color: var(--color-success-800); margin: 0; }
.bi-deskbar__txt p { font-size: var(--fs-base); color: var(--color-success-700); line-height: 1.5; margin: 0; }
.bi-deskbar__meta { display: flex; flex-wrap: wrap; gap: var(--space-1); align-items: center; font-size: var(--fs-base); }
.bi-deskbar__time { background: var(--color-success-200); color: var(--color-success-800); padding: var(--space-0_5) var(--space-2); border-radius: var(--radius-sm); font-weight: var(--fw-extrabold); }
.bi-deskbar__sep { color: var(--txt-disabled); }
.bi-deskbar__lbl { color: var(--color-success-700); font-weight: var(--fw-bold); }
.bi-deskbar__close { border: 0; background: none; color: var(--color-success-400); cursor: pointer; padding: var(--space-1); border-radius: 50%; }
.bi-deskbar__close:hover { color: var(--color-success-700); background: var(--color-success-100); }
.bi-segment__btn-nm { font-size: var(--fs-sm); font-weight: var(--fw-black); }
.bi-segment__btn-cnt { font-size: var(--fs-xs); font-family: monospace; opacity: .75; }
.bi-qchip { font-size: var(--fs-xs); padding: var(--space-0_5) var(--space-1); border-radius: var(--radius-xs); font-weight: var(--fw-bold); }
.bi-qchip--grade { color: var(--color-indigo-600); background: color-mix(in srgb, var(--color-indigo-500) 10%, transparent); }
.bi-qchip--danger { color: var(--color-danger-600); background: color-mix(in srgb, var(--color-danger) 10%, transparent); font-weight: var(--fw-black); }
.bi-qchip--scalp { color: var(--color-warning-700); background: color-mix(in srgb, var(--color-warning) 10%, transparent); max-width: 130px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.bi-desk__chart-info { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; }
.bi-desk__chart-key { font-size: var(--fs-sm); background: color-mix(in srgb, var(--brand-blue) 5%, transparent); color: var(--brand-blue); padding: var(--space-1_5) var(--space-2_5); border-radius: var(--radius-lg); font-weight: var(--fw-bold); display: inline-flex; align-items: center; gap: var(--space-1); white-space: nowrap; }
.bi-desk__chart-key b { color: var(--brand-navy); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-weight: var(--fw-extrabold); font-size: var(--fs-base); }
.bi-desk__chart-key.is-new { background: var(--color-warning-50); color: var(--color-warning-700); }
.bi-desk__chart-key.is-new b { color: var(--color-warning-600); font-family: var(--font-sans); }
.bi-desk__records { width: 60%; overflow-y: auto; padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); border-right: 1px solid var(--border-base); }
.bi-desk__field--treat { background: color-mix(in srgb, var(--color-purple-50) 40%, transparent); border: 1px solid var(--color-purple-200); padding: var(--space-3); border-radius: var(--radius-xl); }
.bi-desk__field-lbl { font-size: var(--fs-base); font-weight: var(--fw-black); color: var(--gray-800); display: inline-flex; align-items: center; gap: var(--space-1_5); }
.bi-desk__field-lbl--alt { color: var(--color-purple-800); }
.bi-dot--info { background: var(--brand-blue); }
.bi-dot--alt { background: var(--color-purple-600); }
.bi-desk__ta { width: 100%; box-sizing: border-box; font-size: var(--fs-base); padding: var(--space-2_5); background: var(--bg-input); border: 1px solid var(--border-base); border-radius: var(--radius-lg); outline: none; line-height: 1.6; height: auto; min-height: 90px; color: var(--gray-800); resize: vertical; box-shadow: var(--shadow-inset); }
.bi-desk__ta:focus { background: var(--bg-card); border-color: var(--brand-blue); }
.bi-desk__ta--treat { background: var(--bg-card); border-color: var(--color-purple-200); min-height: 110px; color: var(--color-purple-800); }
.bi-desk__ta--treat:focus { border-color: var(--color-purple-600); }
.bi-gallery { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--gray-100); }
/* ⚠ 2026-08-21: 여기 white-space:nowrap 을 줬다가 되돌렸다. 좁은 가운데 열에서 접히길래
 * 한 줄로 묶었더니 이번엔 옆 버튼(카탈로그 더보기)에 가려 **잘렸다**. 접히는 게 잘리는 것보다 낫다.
 * 근본 원인은 제목과 버튼이 좁은 한 줄을 나눠 쓰는 것 — 레이아웃 판단이 필요하다. */
/* 갤러리 구역 머리 — 제목과 버튼을 **세로로 쌓는다** (2026-08-21)
 *
 * 원래 .bi-row-between(가로 space-between)이었다. 그런데 이 열이 좁아서 가로 배치가 성립하지 않는다:
 *   1440 — 행 201 · 버튼 108 → 제목에 93 남는데 한 줄에 220 필요 (2~3줄로 접힘)
 *   1280 — 제목 폭 47 · 높이 92
 *   1024 — 제목 폭 **18** · 높이 **152** ← 글자가 세로로 한 자씩 흐른다
 * 버튼이 행을 통째로 먹는다. 폭을 나눠 쓸 수가 없다.
 *
 * ⚠ 제목에 white-space:nowrap 을 준 적이 있는데(2026-08-14), 접힘이 **잘림**으로 바뀌었다 —
 *   옆 버튼에 가려 글자가 사라졌다. **접히는 게 잘리는 것보다 낫고, 안 접히는 게 가장 낫다.**
 *   가로를 나눠 쓰는 걸 포기하면 셋 다 사라진다. */
.bi-gallery__head { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-2); }
.bi-gallery__head > :last-child { align-self: flex-end; }
.bi-gallery__title { font-size: var(--fs-base); font-weight: var(--fw-black); color: var(--txt-primary); }
.bi-gallery__box { background: var(--bg-input); border: 1px solid var(--gray-100); border-radius: var(--radius-lg); padding: var(--space-2_5); display: flex; flex-direction: column; gap: var(--space-1_5); }
.bi-gallery__box--vt { background: color-mix(in srgb, var(--color-purple-50) 40%, transparent); border-color: var(--color-purple-200); }
.bi-gallery__boxtitle { font-size: var(--fs-base); font-weight: var(--fw-extrabold); color: var(--gray-800); }
.bi-gallery__boxtitle--vt { color: var(--color-purple-800); }
.bi-gallery__vt { color: var(--color-purple-700); border-color: var(--color-purple-200); }
.bi-gallery__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-2); }
.bi-gallery__thumb--vt { border-color: var(--color-purple-200); }
.bi-gallery__empty { border: 1px dashed var(--border-base); border-radius: var(--radius-md); padding: var(--space-3); text-align: center; color: var(--txt-muted); font-size: var(--fs-sm); }
/* ⚠ flex:1 + min-height:0 은 «필요하면 0 까지 줄어라» 는 뜻이다. 열이 스크롤하게 된 뒤로는
 *   그 말이 목록을 0 으로 만들어 머리(47px)만 남았다(안 102 > 칸 47, 2026-08-14).
 *   늘어나되 **줄어들지는 않는다** — 넘치면 열이 스크롤한다. */
.bi-timeline { width: 100%; flex: 1 0 auto; display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
.bi-timeline__head { padding: var(--space-3); border-bottom: 1px solid var(--gray-100); background: color-mix(in srgb, var(--bg-input) 30%, transparent); display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; }
.bi-timeline__title { font-size: var(--fs-base); font-weight: var(--fw-black); color: var(--gray-900); display: inline-flex; align-items: center; gap: var(--space-1_5); }
.bi-timeline__title i { color: var(--brand-blue); }
.bi-timeline__count { font-size: var(--fs-xs); font-weight: var(--fw-bold); background: var(--border-base); color: var(--txt-secondary); padding: var(--space-0_5) var(--space-2); border-radius: var(--radius-full); font-family: monospace; }
.bi-timeline__list { flex: 1; overflow-y: auto; padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-3); background: color-mix(in srgb, var(--bg-input) 20%, transparent); }
.bi-timeline__tip { padding: var(--space-2); background: color-mix(in srgb, var(--color-info-50) 50%, transparent); border-top: 1px solid var(--gray-100); font-size: var(--fs-xs); color: var(--brand-blue); line-height: 1.5; font-weight: var(--fw-medium); flex-shrink: 0; }
.bi-timeline__dot { position: absolute; left: 0; top: 6px; width: 10px; height: 10px; border-radius: var(--radius-full); border: 2px solid var(--gray-300); background: var(--bg-card); z-index: 1; }
.bi-timeline__tl.is-selected .bi-timeline__dot { background: var(--brand-blue); border-color: var(--brand-blue); transform: scale(1.1); }
.bi-timeline__card { padding: var(--space-2); border: 1px solid var(--gray-100); border-radius: var(--radius-lg); background: var(--bg-card); }
.bi-timeline__tl.is-selected .bi-timeline__card { background: var(--dc-blue-soft); border-color: color-mix(in srgb, var(--brand-blue) 20%, transparent); }
.bi-timeline__card:hover { background: var(--bg-input); }
.bi-timeline__top { margin-bottom: var(--space-1); }   /* 배치는 §40-10 프리미티브가 맡는다(2026-08-11) */
.bi-timeline__topl { display: inline-flex; align-items: center; gap: var(--space-1_5); min-width: 0; }
.bi-timeline__top strong { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--gray-900); }
.bi-timeline__key { font-size: var(--fs-xs); font-family: monospace; font-weight: var(--fw-bold); color: var(--txt-muted); background: var(--border-light); padding: var(--space-0_5) var(--space-1_5); border-radius: var(--radius-xs); }
.bi-timeline__latest { font-size: var(--fs-xs); background: color-mix(in srgb, var(--brand-blue) 10%, transparent); color: var(--brand-blue); font-weight: var(--fw-bold); padding: 0 var(--space-1); border-radius: var(--radius-xs); }
.bi-timeline__emp { font-size: var(--fs-xs); color: var(--txt-muted); }
.bi-timeline__sum { font-size: var(--fs-xs); color: var(--txt-secondary); line-height: 1.5; background: color-mix(in srgb, var(--bg-input) 60%, transparent); padding: var(--space-1_5); border-radius: var(--radius-sm); margin-top: var(--space-1_5); border: 1px solid var(--border-light); }
.bi-pick__cat { font-size: var(--fs-xs); color: var(--txt-muted); font-family: monospace; font-weight: var(--fw-bold); text-transform: uppercase; }
.bi-desk__ticket-kind { font-size: var(--fs-xs); background: color-mix(in srgb, var(--brand-navy) 5%, transparent); color: var(--brand-navy); border: 1px solid var(--border-base); padding: 0 var(--space-1); border-radius: var(--radius-xs); font-weight: var(--fw-black); text-transform: uppercase; letter-spacing: .04em; }
.bi-desk__ticket-name { font-size: var(--fs-base); font-weight: var(--fw-bold); color: var(--txt-primary); line-height: 1.5; }
.bi-desk__ticket-btn--sm { width: auto; padding: var(--space-1) var(--space-2); font-size: var(--fs-2xs); flex-shrink: 0; }
.bi-basket__name { color: var(--gray-800); font-size: var(--fs-sm); font-weight: var(--fw-black); line-height: 1.25; word-break: break-all; }
.bi-basket__pricebox { display: flex; flex-direction: column; align-items: flex-end; }
.bi-basket__unit { font-size: var(--fs-2xs); color: var(--txt-muted); font-weight: var(--fw-bold); line-height: 1; margin-bottom: var(--space-0_5); }
.bi-basket__pkgtag { font-size: var(--fs-2xs); font-weight: var(--fw-black); color: var(--color-purple-700); background: color-mix(in srgb, var(--color-purple-700) 10%, transparent); border: 1px solid var(--color-purple-200); padding: var(--space-0_5) var(--space-1_5); border-radius: var(--radius-md); }
.bi-basket__price { color: var(--brand-blue); font-size: var(--fs-sm); background: color-mix(in srgb, var(--brand-blue) 5%, transparent); padding: var(--space-0_5) var(--space-1_5); border-radius: var(--radius-sm); font-weight: var(--fw-black); }
.bi-basket__price--pkg { color: var(--color-purple-700); background: color-mix(in srgb, var(--color-purple-700) 10%, transparent); }
.bi-desk__sum { padding-top: var(--space-2); border-top: 1px solid var(--border-base); display: flex; flex-direction: column; gap: var(--space-2_5); }
.bi-desk__sum-lbl { font-weight: var(--fw-extrabold); color: var(--txt-secondary); font-size: var(--fs-base); }
.bi-desk__sum-lbl .bi-num { color: var(--brand-blue); }
.bi-desk__sum-val { font-size: var(--fs-lg); font-weight: var(--fw-black); color: var(--txt-primary); }
.bi-lightbox { position: relative; display: flex; align-items: center; justify-content: center; max-width: 92vw; max-height: 90vh; }
.bi-lightbox img { max-width: 92vw; max-height: 90vh; object-fit: contain; border-radius: var(--radius-lg); background: var(--bg-card); box-shadow: var(--shadow-lg); }
.bi-lightbox__btn { position: absolute; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 0; border-radius: 50%;   /* §12-4 아이콘 32 */ background: color-mix(in srgb, var(--black) 60%, transparent); color: var(--bg-card); font-size: var(--fs-lg); cursor: pointer; transition: background .15s; }
.bi-lightbox__btn:hover { background: color-mix(in srgb, var(--black) 80%, transparent); }
.bi-lightbox__close { top: 10px; right: 10px; }
.bi-lightbox__nav { top: 50%; transform: translateY(-50%); }
.bi-lightbox__nav--prev { left: 10px; }
.bi-lightbox__nav--next { right: 10px; }
.bi-lightbox__count { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); background: color-mix(in srgb, var(--black) 60%, transparent); color: var(--bg-card); font-size: var(--fs-sm); font-weight: var(--fw-bold); padding: var(--space-1) var(--space-2_5); border-radius: var(--radius-full); }
.bi-basket__qty { display: inline-flex; align-items: center; gap: var(--space-1); background: var(--bg-input); border: 1px solid var(--gray-100); padding: var(--space-0_5); border-radius: var(--radius-lg); }
.bi-gallery__more:hover { background: var(--brand-blue-hover); }
.bi-gallery__more i { color: var(--bg-card); }
.bi-resv-sw--cancel { background: var(--gray-300); }
.bi-bksplit__foot-hint { font-size: var(--fs-2xs); color: var(--txt-disabled); }
.bi-schmx__body { position: relative; }
.bi-search-clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); border: none; background: none; color: var(--txt-disabled); cursor: pointer; font-size: var(--fs-base); }
.bi-search-clear:hover { color: var(--gray-600); }
.bi-bksplit__side { width: 280px; flex-shrink: 0; display: flex; flex-direction: column; gap: var(--space-3); overflow-y: auto; }
.bi-bksplit__main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--border-base); border-radius: var(--radius-2xl); overflow: hidden; min-height: 500px; }
.bi-cal__dow { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: var(--fs-2xs); font-weight: var(--fw-extrabold); color: var(--txt-disabled); margin-bottom: var(--space-1_5); }
.bi-cal__dow .is-sun { color: var(--color-danger); }
.bi-cal__dow .is-sat { color: var(--color-info-500); }
.bi-cal__dot { position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: var(--radius-full); background: var(--color-indigo-500); }
.bi-schmx.is-grabbing, .bi-schmx.is-grabbing * { cursor: grabbing; }
/* 배지는 한 줄이다 — 좁은 가운데 열에서 «실시간 / 대기열» 로 접혔다(2026-08-21) */
.bi-bksplit__live { white-space: nowrap; font-size: var(--fs-xs); font-weight: var(--fw-black); background: var(--color-danger-400); color: var(--bg-card); border-radius: var(--radius-sm); padding: var(--space-0_5) var(--space-2); }
.bi-bksplit__date { color: var(--txt-primary); font-weight: var(--fw-extrabold); font-size: var(--fs-sm); }
.bi-bksplit__sep { color: var(--gray-300); }
/* 라벨도 한 줄 — «16개 시술 진 / 행중» 으로 접혔다 */
.bi-bksplit__progress { white-space: nowrap; color: var(--brand-blue, var(--brand-blue)); font-weight: var(--fw-bold); font-size: var(--fs-sm); text-decoration: underline; }
.bi-schmx__inner { width: max-content; min-width: 100%; position: relative; }
.bi-schmx__headrow { display: flex; position: sticky; top: 0; z-index: 6; background: var(--white); box-shadow: var(--shadow-sm); }
.bi-schmx__corner { flex: 0 0 150px; width: 150px; position: sticky; left: 0; z-index: 8; display: flex; align-items: center; justify-content: center; border-right: 1px solid var(--border-base); border-bottom: 1px solid var(--gray-100); background: var(--bg-input); font-size: var(--fs-xs); font-weight: var(--fw-black); color: var(--txt-muted); }
.bi-schmx__drow { display: flex; min-height: 78px; align-items: stretch; }
.bi-schmx__dname { flex: 0 0 150px; width: 150px; position: sticky; left: 0; z-index: 4; display: flex; align-items: center; justify-content: space-between; gap: var(--space-1_5); padding: var(--space-2) var(--space-2_5); border-right: 1px solid var(--border-base); border-bottom: 1px solid var(--gray-100); border-left: 4px solid var(--color-indigo-500); background: var(--bg-card); }
.bi-schmx__cnt { flex-shrink: 0; font-size: var(--fs-2xs); font-weight: var(--fw-black); color: var(--color-indigo-700); background: var(--color-indigo-50); border: 1px solid var(--color-indigo-100); border-radius: var(--radius-full); padding: var(--space-0_5) var(--space-2); }
.bi-schmx__cell { flex: 0 0 104px; width: 104px; border-right: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); padding: var(--space-1_5); display: flex; flex-direction: column; gap: var(--space-1); }
.bi-schmx__slot-ico { font-size: var(--fs-sm); opacity: .6; }
.bi-schmx__slot-lbl { display: none; }
.bi-schmx__slot--free:hover .bi-schmx__slot-ico { display: none; }
.bi-schmx__slot--free:hover .bi-schmx__slot-lbl { display: inline; }
.bi-schmx__inner.is-loading, #bt_timeline.is-loading { opacity: .5; pointer-events: none; }
.bi-schmx__empty { padding: 60px var(--space-5); text-align: center; color: var(--txt-disabled); font-size: var(--fs-base); font-weight: var(--fw-bold); }
.bi-resv__time { font-family: ui-monospace, monospace; font-size: var(--fs-2xs); color: var(--txt-muted); }
.bi-resv__tr { display: flex; gap: var(--space-0_5); }
.bi-resv__name { font-size: var(--fs-xs); font-weight: var(--fw-black); color: var(--gray-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bi-resv__sub { font-size: var(--fs-2xs); font-weight: var(--fw-bold); color: var(--txt-disabled); }
.bi-resv__detail { font-size: var(--fs-2xs); font-weight: var(--fw-semibold); color: var(--txt-muted); margin-top: var(--space-0_5); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bi-resv__memo { font-size: var(--fs-2xs); color: var(--txt-disabled); font-style: italic; margin-top: var(--space-1); padding-top: var(--space-1); border-top: 1px solid color-mix(in srgb, var(--black) 5%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bi-resv--cancel .bi-resv__name { text-decoration: line-through; }
.bi-resv-dot--request { background: color-mix(in srgb, var(--color-success-100) 70%, transparent); color: var(--color-success-700); border-color: var(--color-success-200); }
.bi-resv-dot--confirmed { background: color-mix(in srgb, var(--color-info-100) 70%, transparent); color: var(--color-info-700); border-color: var(--color-info-200); }
.bi-resv-dot--checkin { background: color-mix(in srgb, var(--color-warning-100) 70%, transparent); color: var(--color-warning-700); border-color: var(--color-warning-200); }
.bi-resv-dot--done { background: var(--border-base); color: var(--txt-muted); }
.bi-resv-dot--cancel { background: var(--color-danger-100); color: var(--color-danger-600); border-color: var(--color-danger-200); }
.bi-resv-dot--block { background: var(--color-danger-100); color: var(--color-danger-700); border-color: var(--color-danger-200); }
.bi-resv-naver { width: 14px; height: 14px; border-radius: var(--radius-sm); background: var(--color-npay); color: var(--bg-card); font-weight: var(--fw-black); font-size: var(--fs-2xs); display: inline-flex; align-items: center; justify-content: center; }
.bi-schmx__now { position: absolute; top: 0; bottom: 0; width: 2px; background: color-mix(in srgb, var(--color-danger) 80%, transparent); z-index: 7; pointer-events: none; }
.bi-schmx__now-lbl { position: absolute; top: 3px; left: 50%; transform: translateX(-50%); font-family: ui-monospace, monospace; font-size: var(--fs-2xs); font-weight: var(--fw-black); color: var(--bg-card); background: var(--color-danger); border-radius: var(--radius-sm); padding: var(--space-0_5) var(--space-1_5); white-space: nowrap; }
.bi-schmx__now::before { content: ''; position: absolute; top: 0; left: -4px; width: 10px; height: 10px; border-radius: var(--radius-full); background: var(--color-danger); border: 2px solid var(--white); box-shadow: var(--shadow-sm); }
.bi-bksplit__foot { height: 40px; border-top: 1px solid var(--gray-100); padding: 0 var(--space-4); background: color-mix(in srgb, var(--bg-input) 70%, transparent); display: flex; align-items: center; gap: var(--space-4); flex-shrink: 0; }
/* 2026-08-13 범례가 좁아질 때 «신 청 / 확 정» 처럼 한 글자씩 세로로 흘렀다 — 줄바꿈 금지 + 넘치면 접는다 */
.bi-bksplit__foot { flex-wrap: wrap; height: auto; min-height: 40px; padding-top: var(--space-1_5); padding-bottom: var(--space-1_5); }
.bi-bksplit__foot-lb, .bi-bksplit__foot-item { white-space: nowrap; flex-shrink: 0; }
.bi-bksplit__foot-lb { font-size: var(--fs-2xs); font-weight: var(--fw-extrabold); text-transform: uppercase; letter-spacing: .06em; color: var(--txt-disabled); }
.bi-bksplit__foot-item { display: flex; align-items: center; gap: var(--space-1_5); font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--txt-muted); }
.bi-resv-sw { width: 10px; height: 10px; border-radius: var(--radius-xs); }
.bi-resv-sw--request { background: var(--color-warning-100); border: 1px solid var(--color-warning-200); }
.bi-resv-sw--confirmed { background: var(--color-info-50); border: 1px solid var(--color-info-200); }
.bi-resv-sw--done { background: var(--color-success-50); border: 1px solid var(--border-base); }
.bi-page .bi-bk-status-round{
    border-radius: var(--radius-2xl);
    color: white;
    padding: var(--space-2_5) var(--space-1_5);
}
.bi-page .bi-bk-sp-red{
    color: red;
}
.bi-page .bi-bk-yoil-font{
    font-size: var(--fs-sm);
    font-weight: var(--fw-normal);
}
.bi-page .bi-bk-sp-today-check{
    float: right;
    font-size: var(--fs-sm);
    color: var(--color-npay);
    line-height: 2;
    margin-right: var(--space-2_5);
}
.bi-page .bi-bk-div-status345{
    background: var(--color-purple-500);    
}
.bi-page .bi-bk-sp-deposit0{
    background: var(--color-danger); color: var(--bg-card); font-size: var(--fs-xs); font-weight: var(--fw-extrabold);
    border-radius: var(--radius-xs); padding: var(--space-0_5) var(--space-1_5); line-height: 1.4;
    display: inline-flex; align-items: center;
}
.bi-page .bi-bk-sp-deposit1{
    background: var(--gray-300); color: var(--gray-600); font-size: var(--fs-xs); font-weight: var(--fw-extrabold);
    border-radius: var(--radius-xs); padding: var(--space-0_5) var(--space-1_5); line-height: 1.4;
    display: inline-flex; align-items: center;
}
.bi-page .bi-bk-sp-deposit0 i.fas, .bi-bk-sp-deposit1 i.fas { font-size: var(--fs-xs); line-height: 1; }
.bi-bksplit__fc-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-base);
    font-weight: var(--fw-bold);
    color: var(--txt-primary);
    border-bottom: 1px solid var(--border-light);
    padding-bottom: var(--space-2_5);
    margin-bottom: var(--space-2_5);
}
.bi-bksplit__fc-ico { color: var(--brand-blue); font-size: var(--fs-base); }
.bi-bksplit__fc-row {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    flex-wrap: wrap;
    font-size: var(--fs-base);
    margin-bottom: var(--space-2);
}
.bi-bksplit__fc-row:last-child { margin-bottom: 0; }
.bi-bksplit__fc-label {
    color: var(--txt-muted);
    font-weight: var(--fw-medium);
    white-space: nowrap;
    font-size: var(--fs-sm);
}
/* .bi-seg-wrap 계열 삭제(2026-08-21) — 세그먼트 구현이 둘이었다.
 * §29 .bi-segment/__btn 과 이 레거시(.bi-seg-wrap + input[type="button"] 요소 선택자)가
 * booking_renew 한 요소에 **동시에** 붙어 있었고, 실제로 그리는 건 레거시였다.
 * 규격 문서가 기준이므로 §29 쪽으로 통일하고 레거시를 없앤다.
 * 바뀌는 것: 글자 12→10(--fs-2xs) · 활성색 네이비/흰색 → brand-blue (§29 «활성=brand-blue+흰글자»). */
.bi-bksplit__fc-row--nav {
    border-top: 1px solid var(--border-light);
    padding-top: var(--space-3);
    margin-top: 0;
}
.bi-bksplit__calcol {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    background: var(--bg-card);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-base);
    box-shadow: var(--shadow-sm);
}
.bi-cal__header {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-2_5);
    height: 46px; box-sizing: border-box; padding: 0 var(--space-4);
    border-bottom: 1px solid var(--border-base); background: var(--bg-card); flex-shrink: 0;
    white-space: nowrap; overflow: hidden;
}
.bi-cal__hleft { display: flex; align-items: center; gap: var(--space-2_5); min-width: 0; overflow: hidden; }
.bi-cal__navdate {
    display: inline-flex; align-items: center; justify-content: center;
    height: 28px; padding: 0 var(--space-3); min-width: 110px;
    background: var(--bg-input); border: 1px solid var(--border-base); border-radius: var(--radius-lg);
    color: var(--txt-primary); font-size: var(--fs-sm); font-weight: var(--fw-extrabold); white-space: nowrap;
}
.bi-cal__badge {
    display: inline-flex; align-items: center; gap: var(--space-1); flex-shrink: 0;
    font-size: var(--fs-xs); font-weight: var(--fw-extrabold); color: var(--bg-card); background: var(--color-danger-400);
    border-radius: var(--radius-md); padding: var(--space-1) var(--space-2);
}
.bi-cal__badge i { font-size: var(--fs-2xs); }
.bi-cal__date { font-size: var(--fs-base); font-weight: var(--fw-extrabold); color: var(--txt-primary); }
.bi-cal__sep { width: 1px; height: 12px; background: var(--border-base); flex-shrink: 0; }
.bi-cal__prog { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--txt-muted); }
.bi-cal__prog b { color: var(--brand-blue); font-weight: var(--fw-extrabold); }
.bi-bksplit__empslide {
    display: none;
}.bi-bksplit__calcol {
    background: var(--bg-card);
    border: 1px solid var(--border-base);
    border-radius: var(--radius-2xl);                       /* rounded-2xl */
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}.bi-page .bi-bk-innerPossible .bi-pos-ico { font-size: var(--fs-sm); opacity: .5; }
.bi-page .bi-bk-innerPossible .bi-pos-label { display: none; font-size: var(--fs-xs); font-weight: var(--fw-extrabold); }
.bi-page .bi-bk-innerPossible:hover .bi-pos-ico { display: none; }
.bi-page .bi-bk-innerPossible:hover .bi-pos-label { display: inline; }.bi-page .bi-agg-count {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; height: 100%; box-sizing: border-box; cursor: default;
    background: var(--color-info-50); border: 1px solid var(--color-info-200); border-radius: var(--radius-lg);
    color: var(--color-info-700); padding: var(--space-1) var(--space-2_5); white-space: nowrap;
    overflow: hidden;
}
.bi-page .bi-agg:hover .bi-agg-count { background: var(--color-info-100); border-color: var(--color-info-300); }
.bi-page .bi-agg-count-lb { font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.bi-page .bi-agg-count-n { font-size: var(--fs-base); font-weight: var(--fw-extrabold); }
.bi-page .bi-agg-stat-n { font-weight: var(--fw-extrabold); }.bi-page .bi-agg-emp-line { font-size: var(--fs-2xs); font-weight: var(--fw-bold); color: var(--txt-muted); }
.bi-page .bi-bk-time > .bi-agg--dayactive { flex: 0 0 auto; width: 100%; margin-top: var(--space-0_5); }
.bi-page #calendar_days .bi-bk-time.is-dense .bi-bksch-card .bi-bksch-card-svc { display: none; }.bi-page #calendar_week .bi-bk-time > .bi-agg .bi-agg-count { flex: 1; height: 100%; box-sizing: border-box; }
.bi-bksch-card-badge.bi-resv-dot--request { background: var(--color-success-100); color: var(--color-success-700); border-color: var(--color-success-300); }
.bi-bksch-card-badge.bi-resv-dot--confirmed { background: var(--color-info-100); color: var(--color-info-700); border-color: var(--color-info-300); }
.bi-bksch-card-badge.bi-resv-dot--done { background: var(--border-base); color: var(--txt-muted); }.bi-bksch-card-nv {
    background: var(--color-npay); color: var(--bg-card); font-size: var(--fs-2xs); font-weight: var(--fw-extrabold);
    border-radius: var(--radius-xs); padding: 0 var(--space-1); line-height: 1.5; margin-left: auto;
}
.bi-bksch-card-sex { font-size: var(--fs-2xs); font-weight: var(--fw-bold); opacity: .6; }
.bi-bksch-card-svc {
    font-size: var(--fs-2xs); font-weight: var(--fw-semibold); opacity: .85;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}.bi-bksch-dhead {
    display: flex; align-items: center; gap: var(--space-2);
    padding: 0 var(--space-2) 0 var(--space-2);
    border-left: 4px solid transparent;     /* 디자이너 색상 (bi-bk-dhead-c0~7) */
}
.bi-bksch-dhead-info { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-width: 0; flex: 1; line-height: 1.2; text-align: left; }
.bi-bksch-dhead .bi-bk-sp14 { width: auto; padding: 0; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bi-bksch-dhead-name { font-size: var(--fs-sm); font-weight: var(--fw-black); color: var(--txt-primary); text-align: left; }
.bi-page .bi-bk-calendar--days .bi-bk-ht45-line .bi-bksch-dhead-name.bi-bk-sp14 { font-size: var(--fs-sm); font-weight: var(--fw-black); color: var(--txt-primary); text-align: left; }
.bi-page .bi-bk-calendar--days .bi-bk-ht45-line .bi-bksch-dhead-role { display: block; font-size: var(--fs-2xs); font-weight: var(--fw-bold); color: var(--txt-disabled); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: var(--space-0_5); width: 100%; }
.bi-bksch-dhead.bi-bk-dhead-c0 { border-left-color: var(--color-indigo-500); }
.bi-bksch-dhead.bi-bk-dhead-c1 { border-left-color: var(--color-purple-500); }
.bi-bksch-dhead.bi-bk-dhead-c2 { border-left-color: var(--color-pink-500); }
.bi-bksch-dhead.bi-bk-dhead-c3 { border-left-color: var(--color-success-500); }
.bi-bksch-dhead.bi-bk-dhead-c4 { border-left-color: var(--color-warning); }
.bi-bksch-dhead.bi-bk-dhead-c5 { border-left-color: var(--color-info-500); }
.bi-bksch-dhead.bi-bk-dhead-c6 { border-left-color: var(--color-success-500); }
.bi-bksch-dhead.bi-bk-dhead-c7 { border-left-color: var(--color-rose-500); }
.bi-bksch-nowdot {
    position: absolute; left: 0; top: -3px; width: 8px; height: 8px;
    border-radius: 50%; background: var(--color-danger); border: 1px solid var(--white);
}
.bi-bksch-nowlabel {
    position: absolute; left: 12px; top: -9px;
    background: var(--color-danger); color: var(--bg-card); font-size: var(--fs-2xs); font-weight: var(--fw-extrabold);
    padding: var(--space-0_5) var(--space-1_5); border-radius: var(--radius-sm);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.bi-bksch-side {
    width: 280px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);                 /* 위젯 카드 간 간격 */
    background: transparent;    /* 컨테이너는 투명 — 각 섹션이 개별 위젯 */
    overflow-y: auto;
    overflow-x: hidden;
}
.bi-bksch-side-sec--search { padding: var(--space-3); }
.bi-bksch-search { display: flex; flex-direction: row; align-items: center; gap: var(--space-2); }
.bi-bksch-search-box { position: relative; }
.bi-bksch-search-icon {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    font-size: var(--fs-base); color: var(--txt-disabled); pointer-events: none;
}
.bi-bksch-search-clear {
    display: none;
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    width: 20px; height: 20px; padding: 0;
    border: 0; background: transparent; cursor: pointer;
    color: var(--txt-disabled); font-size: var(--fs-base); line-height: 1;
    align-items: center; justify-content: center;
}
.bi-bksch-search-clear.is-show { display: inline-flex; }
.bi-bksch-search-clear:hover { color: var(--gray-600); }
.bi-cal__wdrow { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: var(--space-1_5); }
.bi-cal__wd { text-align: center; font-size: var(--fs-2xs); font-weight: var(--fw-extrabold); color: var(--txt-disabled); }
.bi-cal__wd.is-sun { color: var(--color-danger); }
.bi-cal__wd.is-sat { color: var(--color-info-500); }
.bi-cal__wrow {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--space-1);
    padding: var(--space-0_5); border-radius: var(--radius-lg); cursor: pointer;
    transition: background .12s, box-shadow .12s;
}
.bi-cal__wrow + .bi-cal__wrow { margin-top: var(--space-1); }
.bi-cal__wrow:hover { background: color-mix(in srgb, var(--color-info-100) 60%, transparent); }
.bi-cal__wrow:hover .bi-cal__day:hover { background: transparent; }   /* 셀 개별 hover 억제(주 전체 강조) */
.bi-cal__wrow.is-wsel { background: var(--brand-blue); box-shadow: var(--shadow-sm); }
.bi-cal__wrow.is-wsel .bi-cal__day { color: var(--bg-card); font-weight: var(--fw-extrabold); }
.bi-cal__wrow.is-wsel .bi-cal__day.is-out { color: color-mix(in srgb, var(--white) 60%, transparent); }
.bi-cal__wrow.is-wsel .bi-cal__day.is-today { box-shadow: var(--shadow-inset); }
.bi-cal__mgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-1_5); }
.bi-cal__mon {
    height: 40px; padding: 0; border: 1px solid var(--border-light); background: var(--bg-card);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--txt-secondary);
    border-radius: var(--radius-xl); cursor: pointer; transition: background .12s, color .12s, border-color .12s;
}
.bi-cal__mon:hover { background: color-mix(in srgb, var(--border-light) 80%, transparent); border-color: var(--gray-300); }
.bi-cal__mon.is-today { box-shadow: inset 0 0 0 1.5px var(--color-info-200); color: var(--brand-blue); font-weight: var(--fw-extrabold); }
.bi-cal__mon.is-sel { background: var(--brand-blue); color: var(--bg-card); border-color: var(--brand-blue); font-weight: var(--fw-extrabold); box-shadow: var(--shadow-sm); }
.bi-schmx__mark-legend { font-size: var(--fs-base); color: var(--txt-muted); }
.bi-msgprev-phone      { width: 250px; }
.bi-msgprev-phone__body{ height: 323px; padding-top: var(--space-10, 40px); width: 100%; text-align: center; background-image: url("/img/page/bgSmsInputB.gif"); }
.bi-msgprev-talk       { width: 250px; }
.bi-msgprev-talk__box  { border-radius: var(--radius-talk); }
.bi-msgprev-talk__head { padding: var(--space-3); background: var(--color-kakao); text-align: left; border-radius: var(--radius-talk) var(--radius-talk) 0 0; font-size: var(--fs-sm); font-weight: 600; }
.bi-msgprev-talk__body { padding: var(--space-2_5) var(--space-1); color: var(--color-kakao-txt); border-radius: 0 0 var(--radius-talk) var(--radius-talk); font-weight: 500; letter-spacing: -0.2px; line-height: 1.2; font-size: var(--fs-sm); background: var(--bg-card); border: 1px solid var(--border-light); }
.bi-msgprev-talk__ta   { width: 100%; line-height: 1.5; border: 0; box-sizing: border-box; resize: none; }
.bi-txt-secondary { color: var(--txt-secondary); }
.bi-txt-muted     { color: var(--txt-muted); }
.bi-txt-disabled  { color: var(--txt-disabled); }
.bi-txt-primary   { color: var(--txt-primary); }
.bi-txt-white     { color: var(--white); }
.bi-cid{ position: fixed; bottom: 0; right: 0; display: none; background-color: var(--bg-card);
          border: 1px solid var(--color-info-600); font-weight: var(--fw-bold); box-sizing: border-box; }
.bi-cid__date  { padding: var(--space-2_5); font-size: var(--fs-base); background-color: var(--color-info-500);
                  font-weight: var(--fw-bold); height: 19px; width: 445px; box-sizing: border-box; }
.bi-cid__close { padding: var(--space-2_5); float: right; width: 15px; cursor: pointer; }
.bi-cid__icon  { background-color: var(--color-info-500); text-align: center; font-size: var(--icon-lg); }
.bi-cid__name  { background-color: var(--color-info-500); text-align: center; font-size: var(--fs-3xl);
                  padding: var(--space-2_5) 0 var(--space-5) 0; font-weight: var(--fw-bold); cursor: pointer; }
.bi-cid__callee{ background-color: var(--color-info-600); padding: var(--space-2_5); font-size: var(--fs-xl);
                  color: var(--color-info-200); font-weight: var(--fw-bold); }
.bi-cid__btns  { text-align: center; float: left; width: 300px; padding: var(--space-2_5); box-sizing: border-box; }
.bi-cid__btns--r{ float: right; padding: var(--space-2_5) 34px var(--space-2_5) 0; }
.bi-btn--cid   { height: 50px; font-size: var(--fs-lg); }        /* 알림 안의 큰 버튼 */

.bi-pop-btnbar--w330{ width: 330px; }
.bi-pop-note--sm  { font-size: var(--fs-xs); margin-left: var(--space-1); color: var(--txt-muted); }
.bi-pop-inline-btn{ font-size: var(--fs-xs); margin-left: var(--space-3_5); }
.bi-input--borderless{ border: none; }                   /* 래퍼가 테두리를 가진 검색칸 */
.bi-pop-tbl-empty--tall{ padding-bottom: var(--space-6); }          /* 결과없음 줄에 여백을 더 준다 */
.bi-pop-note--sm-strong{ font-size: var(--fs-xs); margin-left: var(--space-1); color: var(--txt-muted); font-weight: var(--fw-semibold); }
.bi-pop-note--xs  { font-size: var(--fs-2xs); color: var(--txt-muted); margin: var(--space-0_5); }
.bi-pop-field--w450{ width: 450px; }
.bi-pop-bk__daylbl{ text-align-last: justify; position: absolute; margin-top: var(--space-1_5);
                     margin-left: var(--space-1_5); color: var(--txt-muted); font-size: var(--fs-2xl); z-index: 9999; }
.bi-indent    { padding-left: var(--space-12, 50px); }
   같은 특이도의 컴포넌트 규칙이 뒤에 오면 진다 — 실제로 `.bi-bki{display:flex}`(L5218)가
.sg2doc-stage > .bi-cid{ position: absolute; }/* ════════════════════════════════════════════════════════════
   되살린 규격 — "한 곳 전용" 판정으로 걷혔던 것들 (2026-08-12)

   ⚠ 지우기 전에 물어야 할 것은 «몇 곳에서 쓰나» 가 아니라 «지우면 무엇이 남나» 다.
     로그인·디자이너 탭·예약 일정표·AI 메시지 발송은 사용처가 하나지만
     그 화면의 **구조 자체**였다. 걷어내니 화면이 통째로 무너졌다.
   규격화는 다시 한다 — 기준은 «같은 것이 둘 이상 있는가»(SPEC-DUP) 다.
   ════════════════════════════════════════════════════════════ */
.bi-btn:disabled,
.bi-btn.is-disabled {
    background: var(--border-light);
    color: var(--txt-disabled, var(--txt-disabled));
    border-color: var(--border-light);
    transform: none;
    cursor: not-allowed;
}
.bi-log-table-wrap--w15 .bi-log-row,
.bi-log-table-wrap--w19 .bi-log-row,
.bi-log-table-wrap--w21 .bi-log-row {
    min-width: max(100%, calc(80px * var(--cols, 18)));
}
.bi-log-table-wrap--w15 .bi-log-table-body,
.bi-log-table-wrap--w19 .bi-log-table-body,
.bi-log-table-wrap--w21 .bi-log-table-body { overflow-x: auto; }
.bi-search-wrap input[type="text"].bi-input,
.bi-bksch-search-box input[type="text"].bi-input {
    width: 100%;                 /* 래퍼(아이콘+검색박스) 폭 채움 — 모듈별 width 하드코딩 대신 공통에서 */
    box-sizing: border-box;
    padding-left: var(--space-9, 36px);   /* 아이콘 자리 — 스케일 밖 값이라 폴백 표기 */          /* 아이콘 자리 */
}
.bi-search-wrap input[type="text"].bi-input:focus,
.bi-search-wrap input[type="text"].bi-input:focus,
.bi-search-wrap input[type="text"].bi-input:focus,
.bi-bksch-search-box input[type="text"].bi-input:focus,
.bi-search-wrap input[type="text"].bi-input:focus {
    border-color: var(--brand-blue);
    box-shadow: var(--ring-focus);
    background: var(--bg-card);
}
.bi-grid-total--center,
.bi-grid-total--center .dhx_grid-cell { text-align: center; }
/* 2026-08-21: 퀵기간도 32. 같은 줄에 검색(32)·상세조건(32)이 서는데 혼자 27 이라
 * 필터 줄에 버튼 높이가 둘 섞여 있었다 — «한 줄엔 한 크기». */
.bi-quick-btns .bi-btn,
.bi-quick-btns input[type="button"].bi-btn {
    background: transparent;
    border-color: transparent;
    color: var(--txt-secondary);
    height: 32px;
    padding: 0 var(--space-3);
    font-size: var(--fs-base);
}
.bi-quick-btns .bi-btn:hover,
.bi-quick-btns input[type="button"].bi-btn:hover {
    background: var(--bg-card);
    border-color: var(--border-base);
}
.bi-quick-btns .bi-btn.is-active,
.bi-quick-btns input[type="button"].bi-btn.is-active {
    background: var(--bg-card);
    border-color: var(--border-base);
    color: var(--color-info-600);
    font-weight: var(--fw-semibold);
}
.bi-search-area input[type="radio"],
.bi-filter-card input[type="radio"] {
    visibility: visible;
    display: inline-block;
    accent-color: var(--brand-blue);
    width: 14px;
    height: 14px;
    cursor: pointer;
    flex-shrink: 0;
}
.bi-grid-area #gridbox .dhx_grid-body,
.bi-grid-area #gridbox [class*="dhx_grid-body"] {
    padding-bottom: var(--space-10);
    /* 2026-08-11 중복 정리(B0-2): `box-sizing:content-box` 를 지웠다.
       바로 아래 규칙이 같은 셀렉터에 `border-box !important` 를 주며 그 이유를 적어두었다
       — 즉 이 선언은 적용된 적이 없고, 남겨두면 아래 교정을 되돌리려는 사람을 오도한다. */
}
.bi-grid-area #gridbox .dhx_grid-body,
.bi-grid-area #gridbox [class*="dhx_grid-body"] {
    box-sizing: border-box;
}
.bi-erp-card:not(:has(.bi-erp-foot)) .bi-grid-area #gridbox .dhx_grid-body,
.bi-erp-card:not(:has(.bi-erp-foot)) .bi-grid-area #gridbox [class*="dhx_grid-body"] {
    padding-bottom: 0;
}
/* 기본은 «자르기» — 유령 15px 넘침을 막는다(2026-07-24 사유는 위 블록 참고).
 * 진짜로 넓은 그리드는 아래 .is-xscroll 이 열어 준다 — 그 판단은 CSS 가 못 한다(픽셀 수를 세야 한다). */
/* ⚠ 2026-08-24 스코프를 «푸터 없는 카드» → **전 그리드** 로 넓혔다.
 *   원래 이 규칙은 푸터 없는 리포트만 잡았고, 푸터 있는 목록(고객관리 등)은
 *   유령 10px 넘침에도 가로바가 뜰 수 있었다. 다만 본문이 컨테이너를 넘어 있어서
 *   그 바가 «잘려» 안 보였을 뿐이다 — 높이를 바로잡자 유령 바가 드러났다.
 *   → 기본은 전부 자르고, 진짜 넘침(24px 초과)만 아래 .is-xscroll 이 연다. */
.bi-erp-card .bi-grid-area #gridbox .dhx_grid-body,
.bi-erp-card .bi-grid-area #gridbox [class*="dhx_grid-body"] {
    overflow-x: hidden;
}

/* ⚠ 2026-08-24 «가로 스크롤바가 푸터 뒤에 그려지고 있었다» — 사용자 지적 ⑪ 의 진짜 원인.
 *   실측(패키지 사용내역): .bi-grid-area 는 y788 에서 끝나는데 .dhx_grid-body 는 y827 까지 그려졌고,
 *   가로 스크롤바 띠(y817~827)가 페이지네이션 푸터(y788~841) **안쪽**에 깔렸다 → 잡을 수가 없다.
 *   원인은 «마지막 행 잘림» 을 막으려고 준 padding-bottom:40px 이다. 본문 높이가 내용으로 정해지는데
 *   거기에 40px 이 더해져 컨테이너보다 커졌고, 스크롤바는 늘 «패딩 박스 맨 아래» 에 붙는다.
 *   본문은 box-sizing:content-box 라 height 532 + padding 40 = **572** 가 되어
 *   컨테이너(534)를 38px 넘었고, 넘친 부분에 스크롤바가 있어 .bi-grid-area(overflow:hidden)에 잘렸다.
 *   → 여백은 그대로 두고(잘림 방지 유지) **여백을 높이 «안» 으로** 넣는다(border-box).
 *     그러면 본문이 컨테이너에 들어가고 스크롤바가 화면 안에 남는다. */
/* box-sizing 은 벤더가 이긴다(실측: 우리 규칙을 넣어도 content-box 그대로) →
 * 높이 자체를 여백만큼 줄여 «패딩 포함 총 높이 = 컨테이너» 가 되게 한다.
 * ⚠ dhx 가 height 를 **인라인으로** 박으므로 여기서는 !important 가 유일한 수단이다.
 *   푸터가 있는 카드(=패딩 40px 를 받는 쪽)에만 건다 — 푸터 없는 리포트는 패딩이 0이라 대상이 아니다.
 *   스크롤 가능한 «내용» 총량은 그대로다(줄인 40px 를 패딩이 되돌려 준다) → 마지막 행도 그대로 보인다. */
/* ⚠ 2026-08-27 제거 — 여기 있던 `height: calc(100% - var(--space-10)) !important` 는
 *   위 진단이 틀려서 생긴 우회였다. box-sizing 이 content-box 로 남은 «진짜 이유» 는
 *   벤더가 아니라 우리 규칙(아래 블록)이었고, 그걸 border-box 로 돌리자 높이를 깎을 이유가 없어졌다.
 *
 *   깎아 두면 오히려 «리스트가 화면에 차지 않는» 새 문제가 된다 — 카드가 중첩된 화면
 *   (.bi-erp-card 안 .bi-erp-gridwrap)에서는 두 규칙이 **서로 다른 조상** 을 보기 때문이다.
 *   실측(예약관리) — 여백 규칙은 :not(:has(.bi-erp-foot)) 이 «안쪽» 카드에 맞아 padding 0,
 *   높이 규칙은 :has(.bi-erp-foot) 가 «바깥» 카드에 맞아 -40px → 되돌려 줄 여백이 없어
 *   본문이 컨테이너보다 40px 짧아졌다(content 581 · body 541). 15줄 중 12줄만 보이고
 *   나머지는 세로 스크롤 안으로 밀렸다.
 *
 *   ⚠ !important 로 우회하기 전에 «왜 지고 있나» 를 끝까지 본다. 그때 벤더를 탓하고 멈춘 탓에
 *     한 줄짜리 고침(content-box→border-box)이 석 달 뒤에야 나왔다. */

/* «진짜로» 넘치는 그리드만 가로 스크롤을 연다.
 * 판정은 JS(lib/js/grid_colcfg.js)가 그린 뒤 실제 픽셀로 한다 — 15px 유령과 800px 진짜를
 * CSS 로는 구별할 수 없다. 임계값(24px)을 넘으면 .bi-grid-area 에 .is-xscroll 이 붙는다.
 * ⚠ 위 «자르기» 규칙과 **같은 특이도(1,4,0)** 로 맞추고 **바로 뒤에** 둔다 —
 *   앞에 두거나 특이도가 낮으면 조용히 진다(2026-08-24 실제로 그랬다). */
.bi-erp-card .bi-grid-area.is-xscroll #gridbox .dhx_grid-body,
.bi-erp-card .bi-grid-area.is-xscroll #gridbox [class*="dhx_grid-body"] {
    overflow-x: auto;
}
/* 잡아끌어 미는 그리드 — 2026-08-24 사용자 지적 ⑤.
 * 가로 스크롤바는 그리드 맨 아래에 하나뿐이라, 윗줄을 보다 옆을 보려면 매번 아래로 내려가야 했다.
 * 동작은 function.js 가 붙인다(6px 넘게 끌어야 «민 것» — 행 선택을 뺏지 않는다). 여기선 손모양만. */
.bi-erp-card .bi-grid-area.is-xscroll #gridbox .dhx_grid-body,
.bi-erp-card .bi-grid-area.is-xscroll #gridbox [class*="dhx_grid-body"] {
    cursor: grab;
}
.bi-erp-card .bi-grid-area.is-xscroll #gridbox .dhx_grid-body.is-panning,
.bi-erp-card .bi-grid-area.is-xscroll #gridbox [class*="dhx_grid-body"].is-panning {
    cursor: grabbing;
    user-select: none;
}
.bi-erp-card .bi-grid-area #gridbox .dhx_grid-body,
.bi-erp-card .bi-grid-area #gridbox [class*="dhx_grid-body"] {
    padding-bottom: var(--space-10);
    /* ⚠ 2026-08-27 «리스트가 화면에 차지 않고 세로 스크롤이 생긴다»(사용자 지적) —
     *   여기 있던 `box-sizing: content-box` 가 범인이었다.
     *   위(9949)에 이미 `border-box` 규칙이 있는데 이쪽이 특이도 (1,3,0) > (1,2,0) 로 이겨
     *   **우리 규칙이 우리 규칙을 덮고** 있었다.
     *   2026-08-24 주석은 이걸 «벤더가 이긴다» 고 잘못 읽고, 진 이유를 못 찾아
     *   높이를 40px 깎는 !important 로 우회했다(아래 블록에서 함께 제거).
     *   border-box 면 여백이 높이 «안» 에 들어가 총 높이 = 컨테이너가 된다 —
     *   깎을 필요도, 죽는 40px 도 없다. */
}
.bi-page .dhx_grid-header,
.bi-page [class*="dhx_header-row"] {
    background: var(--bg-input);
}
.bi-page .dhx_grid-header-cell--sortable:hover:after,
.bi-page .dhx_grid-header-cell--sorted:after {
    display: none;
}
.bi-page .dhx_grid-sort-icon--asc,
.bi-page .dhx_grid-sort-icon--desc {
    color: var(--brand-blue);
}
.bi-page .dhx_grid-header-cell--sortable .dhx_grid-header-cell-text,
.bi-page .dhx_grid-header-cell--sortable .dhx_grid-header-cell-text_content {
    padding-left: 0;
    padding-right: 0;
}
.bi-page .dhx_grid-header-cell.bi-grid-msep,
.bi-page .dhx_grid-cell.bi-grid-msep {
    border-left: 2px solid var(--gray-300);
}
.bi-page .scale-text,
.bi-page .start-text,
.bi-page .end-text {
    fill: var(--txt-disabled);
    font-size: var(--fs-xs);
}
.bi-page .grid-line,
.bi-page .dash-line {
    stroke: var(--border-light);
}
.bi-erp-card #gridbox .dhx_grid-body .dhx_cell,
.bi-erp-card #gridbox .dhx_grid-body [class*="dhx_cell"],
.bi-erp-card #gridbox [class*="dhx_grid-body"] [class*="dhx_cell"] {
    padding: 0 var(--space-4);
    border-bottom: 1px solid var(--border-light);
    color: var(--txt-secondary);
    font-size: var(--fs-base);
}
#gridbox .dhx_grid-row:hover .dhx_grid-cell,
.bi-erp-card #gridbox .dhx_grid-row:hover .dhx_grid-cell {
    background: color-mix(in srgb, var(--color-info-50) 40%, transparent);
    cursor: pointer;
}
#gridbox .dhx_grid-selected-row,
.bi-erp-card #gridbox .dhx_grid-selected-row {
    background: color-mix(in srgb, var(--brand-blue) 10%, transparent);
    box-shadow: none;   /* dhx v7 기본 선택행 좌측 inset 액센트(세로 바) 제거 */
    border-left: 0;
}
#gridbox .dhx_grid-selected-cell,
.bi-erp-card #gridbox .dhx_grid-selected-cell,
#gridbox .dhx_grid-selected-focus-cell,
.bi-erp-card #gridbox .dhx_grid-selected-focus-cell {
    /* 2026-08 sg2 §24-3: 선택 시 파랑 테두리(→ 첫 셀 왼쪽이 세로 파란선으로 보임) 제거.
       일반 그리드선(border-base)으로 되돌리고 배경 틴트만 남긴다. box-shadow(포커스 아웃라인)도 차단. */
    border-color: var(--border-base);
    background-color: color-mix(in srgb, var(--brand-blue) 5%, transparent);
    box-shadow: none;
}
.bi-grid-area--xscroll #gridbox .dhx_grid-body,
.bi-grid-area--xscroll #gridbox [class*="dhx_grid-body"] { overflow-x: auto; }
/* ── 글꼴은 한 벌이다 (2026-08-21, 사용자 지적) ──────────────────────────
 * 실측: 화면 안에 **Pretendard 가 아닌 요소가 1,525개** 있었다.
 *   ① dhx 그리드 — 벤더 grid.css 가 `.dhx_widget`·`.dhx_grid`·`.dhx_grid-cell` 에
 *      `Roboto, Arial, Tahoma, Verdana` 를 직접 박는다. 목록 화면의 «본문» 이 통째로 다른 글꼴이었다.
 *      배지·강조 같은 우리 클래스도 그 안에 있으니 같이 끌려갔다.
 *   ② 폼 컨트롤(input·select·textarea·button) — 브라우저 기본값이라 글꼴을 물려받지 않는다(Arial).
 * → 둘 다 `inherit` 로 되돌린다. .bi-page 를 앞에 붙여 벤더보다 특이도가 높다.
 * ⚠ 아이콘은 예외다 — 아래 FA 규칙이 (0,2,1) 로 더 높아 안 끌려간다(CLAUDE.md §7 함정).
 * ⚠ 2026-08-24 `inherit` → `var(--font-sans)` 로 바꿨다(사용자 지적).
 *   `inherit` 는 «바로 위 부모의 값» 이라, 벤더가 중간 조상에 서체를 박으면 **그걸 물려받는다**.
 *   지금은 조상까지 다 덮어서 결과가 맞았지만, 벤더가 규칙을 하나 더 늘리면 조용히 되돌아간다.
 *   보는 쪽에서도 계산값이 `inherit` 로만 보여 «무슨 서체인지» 를 알 수 없었다.
 *   → 값은 :root 의 --font-sans 한 곳, 쓰는 쪽은 그 토큰을 «명시» 한다. */
.bi-page .dhx_widget,
.bi-page .dhx_grid,
.bi-page .dhx_grid-row,
.bi-page .dhx_grid-cell,
.bi-page .dhx_grid-cell__content,
.bi-page .dhx_grid-header,
.bi-page .dhx_grid-header-cell,
.bi-page .dhx_grid-header-cell-text,
.bi-page .dhx_grid-header-cell-text_content,
.bi-page input,
.bi-page select,
.bi-page textarea,
.bi-page button { font-family: var(--font-sans); }

.bi-page i.fa,
.bi-page i.fas,
.bi-page i.fal,
.bi-page i.far,
.bi-page i.fab { font-family: 'Font Awesome 5 Pro'; }
/* ⚠ 2026-08-21 — 합계 클래스는 dhx `mark` 훅으로 «셀» 에 붙는다(행이 아니다).
 * 행 셀렉터만 있으면 배경만 먹고 굵기가 안 먹는다 → 셀 자신도 잡는다.
 * (그 전에는 `cellCss` 로 걸어 두어 **아무 데도 안 붙고 있었다** — 12개 리포트가 그랬다) */
.bi-grid-total,
.bi-grid-total .dhx_grid-cell,
.dhx_grid-cell.bi-grid-total {
    background: var(--border-light);
    font-weight: var(--fw-bold);
    color: var(--txt-primary);
}
.bi-permmatrix-check input[type="checkbox"] + label,
.bi-permmatrix-row input[type="checkbox"] + label { display: none; }
.bi-write-page input[type="password"].bi-input,
.bi-write-page input[type="text"].writeinput,
.bi-write-page input[type="text"].bi-input,
.bi-write-body input[type="password"].bi-input,
.bi-write-body input[type="text"].writeinput,
.bi-write-body input[type="text"].bi-input,
.bi-pop-reg input[type="text"].bi-input,
.bi-pop-reg input[type="date"].bi-input {
    height: 36px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-base);
    background: var(--bg-card);
    padding: 0 var(--space-3);
    font-size: var(--fs-md);
    color: var(--txt-primary);
    outline: none;
    box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s;
}
.bi-write-page input[type="password"].bi-input:focus,
.bi-write-page input[type="text"].writeinput:focus,
.bi-write-page input[type="text"].bi-input:focus,
.bi-write-body input[type="password"].bi-input:focus,
.bi-write-body input[type="text"].writeinput:focus,
.bi-write-body input[type="text"].bi-input:focus,
.bi-pop-reg input[type="text"].bi-input:focus,
.bi-pop-reg input[type="date"].bi-input:focus {
    border-color: var(--brand-blue);
    box-shadow: var(--ring-focus);
    background: var(--bg-card);
}
.bi-form input[type="text"].bi-input,
.bi-form input[type="tel"].bi-input,
.bi-form input[type="date"].bi-input,
.bi-form input[type="number"].bi-input,
.bi-form input[type="password"].bi-input,
.bi-form select.bi-input,
.bi-form textarea.bi-input {
    width: 100%;
    box-sizing: border-box;
    height: 36px;
    border: 1px solid var(--border-base);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    padding: 0 var(--space-3);
    font-size: var(--fs-md);
    color: var(--txt-primary);
    outline: none;
    font-family: var(--font-sans);
    transition: border-color .15s, box-shadow .15s;
}
.bi-form input.bi-input:focus,
.bi-form select.bi-input:focus,
.bi-form textarea.bi-input:focus {
    border-color: var(--brand-blue);
    box-shadow: var(--ring-focus);
    background: var(--bg-card);
}
.bi-form .bi-input.is-error,
.bi-write-page .bi-input.is-error,
.bi-write-body .bi-input.is-error,
.bi-write-textarea.is-error {
    border-color: var(--color-danger);
    box-shadow: 0 0 0 2px var(--color-danger-100);
}
.bi-write-page input[type="checkbox"],
.bi-write-body input[type="checkbox"] {
    visibility: visible;
    display: inline-block;
    accent-color: var(--brand-blue);
    width: 16px;
    height: 16px;
    cursor: pointer;
    flex-shrink: 0;
}
.bi-write-page input: :placeholder,
.bi-write-page textarea::placeholder,
.bi-write-body input::placeholder,
.bi-write-body textarea::placeholder {
    color: var(--txt-disabled);
    font-weight: var(--fw-normal);
    font-size: var(--fs-sm);
}
.bi-write-page .bi-erp-title,
.body-header .body-title {
    font-size: var(--fs-2xl);
    font-weight: 700;
    color: var(--txt-primary);
    margin: 0;
    line-height: 1.4;
    /* 레거시 인라인 style="width:..px" / float 무력화 */
    width: auto;
    float: none;
    padding: 0;
}
.bi-desk__cardbtn:hover,
.bi-desk__crm-open:hover,
.bi-desk__crm-open:hover { background: color-mix(in srgb, var(--brand-blue) 20%, transparent); }
.bi-num,
.bi-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.bi-desk__newbtn:hover,
.bi-desk__prepaid-info,
.bi-desk__prepaid-info { display: flex; flex-direction: column; min-width: 0; }
.bi-pick__l,
.bi-pick__l { min-width: 0; padding-right: var(--space-2); }
.bi-lifecycle__stage--amber,
.bi-lifecycle__stage--amber { color: var(--color-warning-600); }
.bi-lifecycle__stage--blue,
.bi-lifecycle__stage--blue { color: var(--color-info-600); }
.bi-lifecycle__stage--emerald,
.bi-lifecycle__stage--emerald { color: var(--color-success); }
.bi-lifecycle__stage--red,
.bi-lifecycle__stage--red { color: var(--color-danger); }
.bi-desk__ticket-meter,
.bi-desk__ticket-sub,
.bi-desk__ticket-sub { display: flex; flex-direction: column; gap: var(--space-1); }
.bi-desk__ticket-sub-head,
.bi-desk__ticket-sub-head { display: flex; align-items: center; gap: var(--space-2); }
.bi-desk__tickets,
.bi-desk__tickets { display: flex; flex-direction: column; gap: var(--space-2); }
.bi-toast i,
.bi-toast i { font-size: var(--fs-lg); }
.bi-toast.is-show,
.bi-toast.is-show { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.bi-desk__rpanel-lbl,
.bi-desk__rpanel-lbl { font-size: var(--fs-xs); color: var(--txt-muted); font-weight: var(--fw-black); display: block; text-transform: uppercase; letter-spacing: .06em; margin-bottom: var(--space-2); }
.bi-pickgrid__grp,
.bi-pickgrid__grp { display: flex; flex-direction: column; gap: var(--space-1_5); margin-bottom: var(--space-3); }
.bi-pickgrid__grp .bi-desk__rpanel-lbl,
.bi-pickgrid__grp .bi-desk__rpanel-lbl { margin-bottom: 0; }
.bi-segment,
.bi-segment { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-0_5); background: var(--border-base); padding: var(--space-0_5); border-radius: var(--radius-xl); border: 1px solid color-mix(in srgb, var(--gray-300) 30%, transparent); }
.bi-segment__btn,
.bi-segment__btn { border: 0; background: transparent; padding: var(--space-2) var(--space-0_5); border-radius: var(--radius-lg); cursor: pointer; font-size: var(--fs-2xs); font-weight: var(--fw-black); color: var(--txt-muted); letter-spacing: -.02em; line-height: 1.2; }
.bi-segment__btn.is-active,
.bi-segment__btn.is-active { background: var(--brand-blue); color: var(--bg-card); box-shadow: var(--shadow-sm); }
.bi-desk__subcats,
.bi-desk__subcats { display: flex; flex-wrap: wrap; gap: var(--space-1_5); max-height: 140px; overflow-y: auto; }
.bi-desk__catbtn,
.bi-desk__catbtn { border: 1px solid var(--border-base); background: var(--bg-card); padding: var(--space-1) var(--space-2); border-radius: var(--radius-lg); cursor: pointer; font-size: var(--fs-2xs); font-weight: var(--fw-black); color: var(--txt-muted); }
.bi-desk__catbtn.is-active,
.bi-desk__catbtn.is-active { color: var(--brand-blue); border-color: color-mix(in srgb, var(--brand-blue) 30%, transparent); box-shadow: var(--shadow-xs); }
.bi-pickgrid__list,
.bi-pickgrid__list { display: flex; flex-direction: column; gap: var(--space-2); }
.bi-pick.is-sel,
.bi-pick.is-sel { border-color: var(--brand-blue); background: color-mix(in srgb, var(--brand-blue) 5%, transparent); }
.bi-pick__badge,
.bi-pick__badge { font-size: var(--fs-2xs); font-weight: var(--fw-black); padding: var(--space-0_5) var(--space-1_5); border-radius: var(--radius-sm); margin-left: var(--space-1_5); vertical-align: middle; border: 1px solid; }
.bi-bksch-emp-list input[type="checkbox"].bi-bksch-emp-chk,
.bi-bksch-typefilter input[type="checkbox"].bi-bksch-type-chk {
    visibility: visible; display: inline-block;
    width: 14px; height: 14px; margin: 0; flex-shrink: 0;
    accent-color: var(--brand-blue); cursor: pointer;
    -webkit-appearance: auto; appearance: auto; background-image: none;
}
.bi-bk-panel-body:has(#div_reserve .mb_reserve) .bi-bk-panel-empty,
.bi-bk-panel-body:has(.bi-bki:not([style*="display:none"])) .bi-bk-panel-empty { display: none; }
.bi-counter-wrap *,
.bi-counter-wrap *::before,
.bi-counter-wrap *::after { box-sizing: border-box; }
.bi-counter-wrap i.fa,
.bi-counter-wrap i.fas,
.bi-counter-wrap i.far,
.bi-counter-wrap i.fal { font-family: 'Font Awesome 5 Pro'; }
.bi-counter-wrap textarea.bi-counter-consult,
.bi-counter-consult {
    width: 100%; height: auto; min-height: 60px; line-height: 1.6;
    padding: var(--space-2_5) var(--space-3_5); resize: none;
    background: color-mix(in srgb, var(--color-warning-50) 20%, transparent); border: 1px solid color-mix(in srgb, var(--color-warning-300) 60%, transparent);
    border-radius: var(--radius-xl); font-size: var(--fs-md); color: var(--color-warning-900); outline: none;
}
.bi-counter-wrap textarea.bi-counter-memo-ta,
.bi-counter-memo-ta {
    width: 100%; flex: 1; height: auto; min-height: 120px; line-height: 1.6;
    padding: var(--space-2_5); resize: none; background: var(--bg-card); border: 1px solid var(--cc-line);
    border-radius: var(--radius-xl); font-size: var(--fs-md); color: var(--txt-secondary); outline: none; font-weight: var(--fw-medium);
}
.bi-counter-pay-btn--cash,
.bi-counter-pay-btn--card {
    background: var(--bg-card); border: 1px solid var(--gray-300); color: var(--txt-secondary);
    box-shadow: var(--shadow-xs);
}
.bi-counter-pay-btn--cash:hover:not(:disabled),
.bi-counter-pay-btn--card:hover:not(:disabled) { background: var(--bg-input); }
/* ⚠ 2026-08-26 «상품을 추가하면 표가 깨진다»(사용자 지적) — 원인은 여기였다.
 *   `<td>` 에 display:flex 를 주면 그 칸은 **표 레이아웃에서 빠져나온다.**
 *   실측 — 분류·상품명 두 칸이 **둘 다 x=273** 에 겹쳐 상품명이 아래로 밀리고,
 *   그 뒤 칸이 통째로 한 칸씩 왼쪽으로 밀렸다(삭제 버튼이 합계 자리에, 폭도 160px).
 *   td 는 table-cell 로 두고, 안쪽 내용만 가로로 세운다. */
.bi-bs-pro-td--proc,
.bi-bs-pro-td--disc  { white-space: nowrap; }
.bi-bs-pro-td--proc > *,
.bi-bs-pro-td--disc  > * { vertical-align: middle; }
/* 배지 둘 사이 간격 — flex 의 gap 을 대신한다(표 칸에는 gap 이 안 먹는다) */
.bi-bs-pro-td--proc > * + * { margin-left: var(--space-1); }
.bi-bs-pro-td--price,
.bi-bs-pro-td--total { text-align: right; }
/* flex:1 대신 폭 100% — 칸이 다시 table-cell 이라 인풋이 칸을 채우면 된다 */
.bi-bs-pro-td--proc .bi-bs-pro-input,
.bi-bs-pro-td--disc .bi-bs-pro-input,
.bi-bs-pro-td--pro  .bi-bs-pro-input {
    width: 100%;
    min-width: 0;
}
#itab_hist:checked ~ .bi-bs-tab-panels,
#itab_pkg:checked  ~ .bi-bs-tab-panels,
#itab_memo:checked ~ .bi-bs-tab-panels {
    overflow-y: hidden;
    display: flex;
    flex-direction: column;
}
#itab_hist:checked ~ .bi-bs-tab-hdr .bi-bs-tab-lbl[for="itab_hist"],
#itab_pkg:checked  ~ .bi-bs-tab-hdr .bi-bs-tab-lbl[for="itab_pkg"],
#itab_memo:checked ~ .bi-bs-tab-hdr .bi-bs-tab-lbl[for="itab_memo"] {
    color: var(--brand-blue);
    border-bottom-color: var(--brand-blue);
    font-weight: var(--fw-bold);
    background: color-mix(in srgb, var(--color-info-50) 50%, transparent);
}
#itab_hist:checked ~ .bi-bs-tab-panels #pnl_history,
#itab_pkg:checked  ~ .bi-bs-tab-panels #pnl_package {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}
.bi-bs-counter .bi-counter-pay > .bi-counter-pay-grid,
.bi-bs-counter .bi-counter-pay > .bi-bs-dock-btns { margin-bottom: var(--space-2); }
.bi-counter-wrap.bi-bs-counter input[type="text"].bi-bs-pro-input,
.bi-bs-counter .bi-bs-pro-input {
    height: 36px; border-radius: var(--radius-lg);
    background: var(--bg-input); border: 1px solid var(--border-base);
    font-weight: 700; font-size: var(--fs-base); color: var(--gray-800);
    transition: border-color .12s, background .12s, box-shadow .12s;
}
.bi-counter-wrap.bi-bs-counter input[type="text"].bi-bs-pro-input:focus,
.bi-bs-counter .bi-bs-pro-input:focus {
    border-color: var(--brand-blue); background: var(--bg-card); box-shadow: var(--ring-focus);
}
.bi-bs-counter .bi-bs-pro-input--c,
.bi-bs-counter .bi-bs-pro-input--qty { text-align: center; }
.bi-counter-wrap.bi-bs-counter input[type="text"].bi-bs-pro-input[name='input_price[]'],
.bi-counter-wrap.bi-bs-counter input[type="text"].bi-bs-pro-input[name='input_disc[]'] {
    color: var(--txt-muted); font-weight: 600;
}
.bi-counter-wrap.bi-bs-counter input[type="text"].bi-bs-pro-input--pro,
.bi-bs-counter .bi-bs-pro-input--pro {
    font-weight: 800; font-size: var(--fs-md); color: var(--txt-primary);
    background: transparent; border-color: transparent; box-shadow: none;
    padding-left: var(--space-1); cursor: pointer;
}
.bi-counter-wrap.bi-bs-counter input[type="text"].bi-bs-pro-input--pro:focus,
.bi-counter-wrap.bi-bs-counter input[type="text"].bi-bs-pro-input[name='input_proc[]']:focus {
    background: transparent; border-color: transparent; box-shadow: none;
}
.bi-counter-wrap.bi-bs-counter input[type="text"].bi-bs-pro-input--qty,
.bi-bs-counter .bi-bs-pro-input--qty {
    width: 44px; height: 32px; font-weight: 900;
    background: var(--bg-input); border-radius: var(--radius-lg);
}
.bi-bs-counter input[name='input_tdesiner[]'],
.bi-bs-counter .bi-bs-pro-total-sep { display: none; }
.bi-counter-wrap.bi-bs-counter input[type="text"].bi-bs-pro-input--total,
.bi-bs-counter .bi-bs-pro-input--total { color: var(--txt-primary); font-weight: 900; }
.bi-bs-counter .bi-bs-pro-th--no,
.bi-bs-counter .bi-bs-pro-td--no { display: none; }
.bi-counter-wrap.bi-bs-counter input[type="text"].bi-bs-datebar-date,
.bi-bs-counter .bi-bs-datebar-date {
    border: none; background: transparent; box-shadow: none;
    width: 110px; height: auto; padding: 0;
    font-weight: 800; font-size: var(--fs-lg); color: var(--brand-navy);
    font-variant-numeric: tabular-nums; cursor: pointer; outline: none;
}
.bi-pop-list--member .pop_m_h,
.bi-pop-list--member .pop_m_b_li{
    display: flex; align-items: center; width: 100%; box-sizing: border-box;
}
.bi-pop-list--member .pop_m_h_sub,
.bi-pop-list--member .pop_m_b_li_div{
    flex: 1 1 0; width: auto; min-width: 0;
    padding: 0 var(--space-2_5); float: none; box-sizing: border-box;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bi-pop-pay--cardcancel .selectWrap .pop_m_h_sub:nth-of-type(1),
.bi-pop-pay--cardcancel .selectWrap .pop_m_b_li_div:nth-of-type(1){ width: 170px; padding-left: var(--space-5); }
.bi-pop-pay--cardcancel .selectWrap .pop_m_h_sub:nth-of-type(2),
.bi-pop-pay--cardcancel .selectWrap .pop_m_b_li_div:nth-of-type(2){ width: 140px; }
.bi-pop-pay--cardcancel .selectWrap .pop_m_h_sub:nth-of-type(3),
.bi-pop-pay--cardcancel .selectWrap .pop_m_b_li_div:nth-of-type(3){ width: 110px; text-align: right; }
.bi-pop-pay input.btn_size, .bi-pop-pay .btn_size, .bi-pop-pay input[type="button"].btn_size,
.bi-pop-pay .bt_div input[type="button"],
.bi-pop-pay .bt_div input[type="submit"],
.bi-pop-pay .bt_div button{
    height: 40px; min-width: 76px; padding: 0 var(--space-5);
    border-radius: var(--radius-lg); border: 1px solid var(--border-base);
    background: var(--border-light); color: var(--txt-secondary);
    font-size: var(--fs-md); font-weight: 700; cursor: pointer; width: auto;
    transition: background .12s, border-color .12s;
}
.bi-pop-pay input.btn_size:hover,
.bi-pop-pay .bt_div input[type="button"]:hover,
.bi-pop-pay .bt_div input[type="submit"]:hover,
.bi-pop-pay .bt_div button:hover{ background: var(--border-base); }
.bi-pop-pay input.btn_size.but_blue,
.bi-pop-pay input.but_blue, .bi-pop-pay .but_blue,
.bi-pop-pay .bt_div input.but_blue,
.bi-pop-pay .bt_div button.but_blue{
    background: var(--brand-blue); color: var(--bg-card); border: none; font-weight: 800;
    box-shadow: var(--shadow-md);
}
.bi-pop-pay input.btn_size.but_blue:hover,
.bi-pop-pay input.but_blue:hover, .bi-pop-pay .but_blue:hover{ background: var(--brand-blue-hover); }
.bi-pop-pay .bi-pop-opt input[type="checkbox"],
.bi-pop-pay .bi-pop-opt input[type="radio"]{
    visibility: visible; display: inline-block;
    -webkit-appearance: auto; appearance: auto;
    width: 16px; height: 16px; margin: 0; flex-shrink: 0;
    accent-color: var(--brand-blue); cursor: pointer;
}
.bi-pop-pay--dep .bi-pop-dep-info input.writeinput,
.bi-pop-pay--dep .bi-pop-dep-info select{
    width: 100%; height: 42px; margin: 0;
    border: 1px solid var(--gray-300); border-radius: var(--radius-lg); background: var(--bg-input);
    font-size: var(--fs-md); color: var(--gray-800); padding: 0 var(--space-2_5); box-sizing: border-box;
}
.bi-pop-pay--dep .bi-pop-dep-info input.writeinput:focus,
.bi-pop-pay--dep .bi-pop-dep-info select:focus{ border-color: var(--brand-blue); background: var(--bg-card); }
.bi-pop-pay--dt .pop_body:not(.pop_border_l) .pop_m_p_b,
.bi-pop-pay--dt .pop_body:not(.pop_border_l) .pop_m_b{ float: none; width: 100%; display: block; }
.bi-pop-pay--dt #selected_date,
.bi-pop-pay--dt #selected_time,
.bi-pop-pay--dt #selected_etime{
    width: auto; flex: 1; min-width: 0;
    border: none; background: transparent;
    font-weight: 800; font-size: var(--fs-md); color: var(--txt-primary); margin: 0;
}
.bi-pop-pay--dt .t_butn,
.bi-pop-pay--dt .t_butn2{
    width: 100%; margin: 0; padding: var(--space-2) var(--space-1); float: none;
    border: 1px solid var(--border-base); border-radius: var(--radius-lg);
    font-size: var(--fs-base); font-weight: var(--fw-semibold); text-align: center; cursor: pointer; line-height: 1.2;
    background: var(--bg-card); color: var(--txt-secondary);
    transition: background .12s, color .12s, border-color .12s;
}
.bi-pop-pay--dt .t_butn:hover,
.bi-pop-pay--dt .t_butn2:hover{ background: var(--color-info-50); color: var(--brand-blue); border-color: var(--color-info-200); }
.bi-pop-pay--dt .t_butn.active,
.bi-pop-pay--dt .t_butn2.active{ background: var(--brand-blue); color: var(--bg-card); border-color: var(--brand-blue); }
/* 월 이동 화살표 — 규격안은 «파란 알약 버튼» 이 아니라 글자만 놓인 홑화살표다(2026-08-31).
   30px 짜리 파란 원은 플러그인 인라인(font-size:30px)을 덮으려다 커진 것이었다. */
.bi-pop-pay--dt .supercal-header button.prev-month,
.bi-pop-pay--dt .supercal-header button.next-month{
    float: none; cursor: pointer; width: 22px; height: 22px;
    padding: 0; margin: 0; border: none; border-radius: var(--radius-md);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: var(--fs-md); line-height: 1; color: var(--txt-secondary);
    background: none; box-shadow: none; flex: 0 0 22px;
}
.bi-pop-pay--dt .supercal-header button.prev-month:hover,
.bi-pop-pay--dt .supercal-header button.next-month:hover{ background: var(--bg-selected); color: var(--brand-blue); }
.bi-pop-pay--dt .cal,
.bi-pop-pay--dt .supercal,
.bi-pop-pay--dt .supercal *{ box-sizing: border-box; }
.bi-pop-pay--dt .supercal td.month-prev,
.bi-pop-pay--dt .supercal td.month-next{ background: transparent; color: var(--gray-300); cursor: default; }
.bi-pop-pay--form input.writeinput,
.bi-pop-pay--form input[type="text"]{
    height: 36px; padding: 0 var(--space-2_5); margin: 0;
    border: 1px solid var(--border-base); border-radius: var(--radius-lg);
    background: var(--bg-card); color: var(--gray-800); font-size: var(--fs-md);
    box-sizing: border-box; vertical-align: middle;
}
.bi-pop-pay--form input.writeinput:focus,
.bi-pop-pay--form input[type="text"]:focus{
    border-color: var(--brand-blue); box-shadow: var(--ring-focus);
}
.bi-bq-pop #popup_layer_member .write_layout,
#popup_layer_member .write_layout { z-index: 2000; }
.bi-pop-pay--aim-fit .bi-msgpop__mode.is-active i,
.bi-pop-pay--aim-fit .bi-msgpop__mode.is-active .bi-msgpop__mode-name { color: var(--brand-blue); }
.bi-pop-tbl-body ul,
.bi-pop-tbl-list{ list-style: none; margin: 0; padding: 0; }   /* 본문 밖의 목록도 같은 리셋 */
.bi-pop-clist-item input[type="checkbox"],
.bi-pop-tbl-row input[type="checkbox"]{
    visibility: visible; display: inline-block;
    accent-color: var(--color-indigo-600);
    width: 16px; height: 16px; margin: 0; cursor: pointer; flex-shrink: 0;
}
.bi-carousel__avatar img,
.bi-carousel__avatar .bi-carousel__avatar-ph {
    width: 64px; height: 64px; border-radius: var(--radius-full); object-fit: cover;
    border: 2px solid var(--white); box-shadow: var(--shadow-sm);
    transition: transform .15s;
}
.bi-camp__col--l,
.bi-camp__col--r { display: flex; min-width: 0; }
.bi-camp__col--l > .bi-erp-card,
.bi-camp__col--r > .bi-erp-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.bi-desk__crm-open.is-disabled,
.bi-desk__crm-open:disabled { background: var(--border-light); color: var(--txt-disabled); border-color: var(--border-base); cursor: not-allowed; opacity: .7; }
.bi-desk__crm-open.is-disabled:hover,
.bi-desk__crm-open:disabled:hover { background: var(--border-light); }
.bi-bki-status.bi-bk-status3,
.bi-bki-status.bi-bk-status5,
.bi-bki-status.bi-bk-status6 { background: var(--color-danger-50); color: var(--color-danger-700); }
.bi-page .bi-bk-slot180 .bi-bk-time-color,
.bi-page .bi-bk-slot180.bi-bk-time-color {
    color: var(--txt-disabled);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: var(--fw-semibold);
}
.bi-page .bi-bk-inner.bi-bk-status3,
.bi-page .bi-bk-inner.bi-bk-status5,
.bi-page .bi-bk-inner.bi-bk-status6 { background: var(--gray-300); color: var(--txt-muted); }
.bi-page .bi-bk-inner.bi-bksch-card.bi-bk-status3,
.bi-page .bi-bk-inner.bi-bksch-card.bi-bk-status5,
.bi-page .bi-bk-inner.bi-bksch-card.bi-bk-status6 { background: var(--color-danger-50); border-left: 3px solid var(--color-danger-300); color: var(--color-danger-700); opacity: .9; }
.bi-page .bi-agg-stat.bi-bk-status3,
.bi-page .bi-agg-stat.bi-bk-status5,
.bi-page .bi-agg-stat.bi-bk-status6 { background: var(--color-danger-50); color: var(--color-danger-700); border-color: var(--color-danger-300); }
.bi-page .bi-agg-item.is-filtered,
.bi-page .bi-agg-item.is-status-hidden { display: none; }
.bi-page #calendar_week .bi-bk-time > .bi-agg,
.bi-page #calendar_week .bi-bk-time > .bi-bk-innerPossible {
    flex: 1 1 0; min-height: 0; box-sizing: border-box; margin: 0;
}
.bi-bksch-card-badge.bi-resv-dot--checkin,
.bi-bksch-card-badge.bi-resv-dot--cancel,
.bi-bksch-card-badge.bi-resv-dot--block { background: var(--color-danger-100); color: var(--color-danger-600); }
.bi-page .bi-bksch-card-name,
.bi-bksch-card-name,
.bi-page .bi-bksch-card-svc,
.bi-bksch-card-svc { text-align-last: left; }
.sg2doc-stage > .bi-cid{ position: absolute; }

/* ── @media 껍데기 복구 (2026-08-12) ─────────────────────────────────
 * 규칙 블록만 되살리면 이 껍데기가 안 온다 → 좁은 화면용 규칙이 모든 폭에 걸린다.
 * ──────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .bookmark-container.bi-bm { right: 16px; bottom: 16px; }
    .bi-bm-card { width: calc(100vw - 32px); }
}

@media (max-width: 1024px) {
    .bi-catalog { width: 96vw; height: 90vh; }
    .bi-catalog__console { display: none; }
    .bi-catalog__view { width: 220px; }
    .bi-desk__records, .bi-timeline { width: 100%; border-right: 0; }
    .bi-desk__records { border-bottom: 1px solid var(--border-base); }
    .bi-bksplit__side { width: 100%; flex-direction: row; flex-wrap: wrap; }
    .bi-bksplit__side > .bi-erp-card, .bi-bksplit__side > .bi-bksch-side-sec { flex: 1 1 240px; }
    .bi-bksplit__main { min-height: 560px; }
}

@media (max-width: 1100px) {
    .bi-camp__cols { grid-template-columns: 1fr; }
}

@media (max-width: 1280px) {
    .bi-desk__records { width: 55%; }
    .bi-timeline { width: 45%; }
    .bi-bksplit__side { width: 240px; }
    .bi-schmx__thcell, .bi-schmx__cell { flex-basis: 96px; width: 96px; }
    .bi-schmx__corner, .bi-schmx__dname { flex-basis: 132px; width: 132px; }
}

/* ── 워크플로 화면 안쪽 구획은 «카드» 가 아니다 (2026-08-13) ─────────────
 * 사용자: "기존 B형의 경우 각 컨텐츠 카드에 라운드 테두리가 있는데 빼줘"
 * 셸 카드(.bi-erp-card)가 이미 테두리·둥글기를 갖는다. 그 안에서 열·패널이 또 그리면
 * 상자 안 상자가 된다. 안쪽은 구분선으로 나누고 둘레는 두지 않는다.
 * ⚠ 배경은 남긴다 — 흰 바탕까지 지우면 구획이 안 보인다.
 * ⚠ 칩·뱃지·버튼·입력칸은 대상이 아니다. 그 둥글기는 규격이다.
 * ──────────────────────────────────────────────────────────────────── */
/* ⚠ 2026-08-14 — 이 규칙이 «이름을 열거해서» 걸리고 있었다. 그래서 목록에 없는 이름은
 *   계속 둥근 채로 남았다 — 사용자 지적: "ai메시지발송의 경우 컨텐츠 라운드 빼달라는게 그대로 있어".
 *   이름 목록은 사람이 관리하면 반드시 샌다. **구조로 거는 규칙을 먼저 둔다.**
 *
 *   ① 카드 안에 또 카드는 없다 — 셸이 이미 카드다.
 *      (ai_marketing 의 .bi-camp__target/__editor/__audience, 로그 화면의 표 래퍼가 전부 이 경우였다.
 *       실측: probe_nestbox.mjs 가 105화면에서 «상자 안 상자» 를 위치로 찾는다) */
.bi-erp-card .bi-erp-card {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/*   ② 카드가 아닌 이름으로 둘레를 그리던 안쪽 패널들.
 *      ⚠ 입력칸(textarea·input)·문서가 카드로 정한 것(§23 카드 · §40-5 차트 카드 · §29 안내 박스)은
 *        대상이 아니다 — 그 둥글기는 규격이다. */
.bi-erp-card .bi-desk__col,
.bi-erp-card .bi-card--box,
.bi-erp-card .bi-bksch-side-sec,
.bi-erp-card .bi-bksplit__main,
.bi-erp-card .bi-bksplit__calcol,
.bi-erp-card .bi-bk-info-panel,
.bi-erp-card .bi-bka,
.bi-erp-card .bi-msgprev,
.bi-erp-card .bi-camp__tip,
.bi-erp-card .bi-lifecycle,
.bi-erp-card .bi-desk__hist-box,
.bi-erp-card .bi-desk__field--treat,
.bi-erp-card .bi-desk__ticket,
.bi-erp-card .bi-crmcard {
    border: 0;
    border-radius: 0;
}

/* ⚠ 2026-08-14 — 위에서 둘레를 지우며 **구분선까지 지웠다.**
 *   사용자: "라운드를 없앴지만 컨텐츠별 구분 border 까지 지워버려서 컨텐츠 영역 구분이 어려워"
 *   바로 위 주석이 «안쪽은 구분선으로 나누고» 라고 적어 놓고 `border: 0` 으로 다 지운 것이다.
 *   구분선을 되돌린다 — 다만 **둘레가 아니라 선 하나**로.
 *
 *   어느 변에 긋는가는 형제가 어떻게 놓였나로 정한다(probe_partition.mjs 로 실측):
 *     · 가로로 나란한 것(.bi-desk__col 3열, split 의 본문)  → 왼쪽 세로선
 *     · 세로로 쌓인 것(.bi-card--box, .bi-bksch-side-sec)   → 위쪽 가로선
 *   첫 칸에는 긋지 않는다(`+` 로 «앞에 형제가 있을 때만»). 그래서 바깥 둘레는 생기지 않는다.
 *   선 옆에 부모 gap 과 같은 여백을 줘 선이 글자에 붙지 않게 한다. */
/* ⚠ 선 옆에 여백을 더하면 **열이 그만큼 좁아진다.** designer_chart 가운데 열이 눌려
 *   «간편결제요청» 이 잘리고 제목이 두 줄로 접혔다(2026-08-14). 부모 gap(16)이 이미 사이를 벌려 놓았으니
 *   선만 긋고 여백은 더하지 않는다 — 폭은 한 픽셀도 뺏지 않는다. */
.bi-erp-card .bi-desk__col + .bi-desk__col,
.bi-erp-card .bi-bksplit__side + .bi-bksplit__main,
.bi-erp-card .bi-bksplit__side + .bi-bksplit__calcol {
    border-left: 1px solid var(--border-base);
}
.bi-erp-card .bi-card--box + .bi-card--box,
.bi-erp-card .bi-bksch-side-sec + .bi-bksch-side-sec,
.bi-erp-card .bi-bk-info-panel + .bi-bka,
.bi-erp-card .bi-bka + .bi-bk-info-panel {
    border-top: 1px solid var(--border-light);
    padding-top: var(--space-3);
}

/* ── 팝업 버튼 — 보드 §06 (2026-08-25) ─────────────────────────────────
 * 보드: 주 액션 #0023B7 h34 r8 13Bold · 검색 navy h37 w57 · ghost h34(작은 h30·12)
 * ⚠ 앱 전체 버튼 사다리(§12-4 48·32·27·22)는 **그대로 둔다.** 팝업만 다른 눈금이다.
 *   스코프: .bi-pop-page(팝업 문서 body) 안에서만. */
.bi-pop-page .bi-btn{ height: var(--pop-btn-h); border-radius: var(--pop-btn-r); font-size: var(--pop-btn-fs); }
.bi-pop-page .bi-btn--sm{ height: var(--pop-btn-sm-h); font-size: var(--pop-btn-sm-fs); }
.bi-pop-page .bi-btn--ghost{ background: var(--bg-card); border: 1px solid var(--pop-line); color: var(--txt-secondary); }
.bi-pop-page .bi-btn--primary{ background: var(--brand-blue); color: var(--bg-card); }

/* 팝업 폭 = 규격 (styleboard4 §07 · 2026-08-25).
 * popup_layer.js 가 인라인 px 대신 이 클래스를 붙인다 — 폭은 토큰 한 곳에서 바뀐다.
 * 보드에 본문이 없는 13개는 클래스가 안 붙어 기존 호출 인자를 그대로 쓴다(5단계에서 결정). */
.write_layout_pop--list{ width: var(--pop-w); }
/* 2026-08-28 — 세 번째 폭. 720 에 3분할을 넣으니 시간칩이 좁아 «갑갑하다» 는 지적(사용자). */
.write_layout_pop--form{ width: var(--pop-w-form); }
.write_layout_pop--wide{ width: var(--pop-w-wide); }

/* ══ 2단계 컨트롤 — styleboard4 §06 (2026-08-25) ═══════════════════════
 * 팝업 안에서만 적용한다. 앱 전체 버튼 사다리(§12-4)·입력 규격은 그대로 둔다.
 * 보드: 주 액션 blue h34 · 검색 navy h37·w57 · ghost h34(작은 h30)
 *       검색칸 h38/r9 · 필드 h36/r8 · 셀렉트만 회색바탕 · 체크/라디오 17 */

/* 푸터 버튼은 --sm 이어도 h34 다 — 보드 푸터에는 «작은 닫기» 가 없다.
 * (디자이너 검색의 닫기가 --sm 이라 h30 으로 그려지고 있었다) */
.bi-pop-page .bi-pop-list-foot .bi-btn,
.bi-pop-page .bi-pop-foot-btns .bi-btn{ height: var(--pop-btn-h); font-size: var(--pop-btn-fs); }
.bi-pop-page .bi-pop-list-foot .bi-btn--sm,
.bi-pop-page .bi-pop-foot-btns .bi-btn--sm{ height: var(--pop-btn-sm-h); font-size: var(--pop-btn-sm-fs); }

/* 검색 버튼 — 색으로 주 액션과 구분한다(보드: 검색만 navy) */
/* ⚠ .sch_but_pop 은 **글자 없는 <a> 트리거**다(내용이 &nbsp; 하나).
 *   보드의 «검색» 버튼(navy·글자 있음)을 여기 씌웠더니 화면에 **글자 없는 네이비 덩어리**가 생겼다
 *   (2026-08-25 눈으로 잡힘 — 대조 검사기는 «다른 항목 1개» 라고 했다).
 *   보드 구조의 검색행은 3단계에서 마크업과 함께 만든다. 그때 .bi-btn--search 를 붙인다. */
.bi-pop-page .bi-btn--search{
    height: var(--pop-btn-nav-h); min-width: var(--pop-btn-nav-w);
    background: var(--brand-navy); color: var(--bg-input);
    border: 0; border-radius: var(--pop-btn-r);
    font-size: var(--pop-btn-sm-fs); font-weight: var(--fw-bold); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}

/* 입력 — 검색칸과 폼 필드는 높이가 다르다(보드 §06) */
.bi-pop-page .bi-input,
.bi-pop-page input[type="text"],
.bi-pop-page input[type="password"],
.bi-pop-page input[type="number"],
.bi-pop-page .text_input{
    height: var(--pop-field-h); border-radius: var(--pop-field-r);
    font-size: var(--pop-btn-fs); background: var(--bg-card);
    border: 1px solid var(--pop-line); box-sizing: border-box;
}
/* 셀렉트만 회색 바탕 — 보드 §06 «셀렉트만 #F9FAFB · 인풋은 흰 배경» */
.bi-pop-page select,
.bi-pop-page .bi-write-select{
    height: var(--pop-field-h); border-radius: var(--pop-field-r);
    font-size: var(--pop-btn-fs); background: var(--bg-input);
    border: 1px solid var(--pop-line); box-sizing: border-box;
}
/* 검색행 인풋은 더 크다(h38) — 검색은 팝업의 주 동작이다 */
.bi-pop-page .bi-pop-search input,
.bi-pop-page .body-main-sch input[type="text"]{
    height: var(--pop-search-h); border-radius: var(--pop-search-r);
    background: var(--bg-input);
}

/* 선택 컨트롤 — 체크 17·r2 · 라디오 17 · 라벨 13 (보드 §06) */
.bi-pop-page input[type="checkbox"]{
    width: var(--pop-check); height: var(--pop-check);
    accent-color: var(--pop-sel); border-radius: var(--pop-check-r);
}
.bi-pop-page input[type="radio"]{
    /* ⚠ 전역 레거시 `input[type=radio]{visibility:hidden;display:none}` 이 살아 있다.
       옛 화면은 <label> 로 동그라미를 «그려» 썼지만, 보드는 **네이티브 라디오**를 쓴다(§05).
       그래서 팝업 안에서는 되살린다 — 안 그러면 글자만 남고 동그라미가 사라진다(2026-08-26 실측). */
    display: inline-block; visibility: visible;
    width: var(--pop-check); height: var(--pop-check);
    accent-color: var(--brand-navy);
    margin: 0; vertical-align: middle;
}
/* ⚠ 보드는 «라디오 링 navy · 점 blue» 라고 적었지만 네이티브 입력은 링과 점을 **따로 못 칠한다.**
 *   직접 그리면 2026-08-25 에 되돌린 «깨져 보이는 체크박스» 로 돌아간다 → 한 색(navy)으로 둔다.
 *   보드에 반영이 필요하면 그때 함께 고친다. */
.bi-pop-page .bi-checkbox-label,
.bi-pop-page .bi-radio-label{ font-size: var(--pop-label-fs); font-weight: var(--fw-normal); }

/* ══ 3단계 리스트 본문 — styleboard4 §07 해부도 (2026-08-25) ═══════════
 * 보드 구조:
 *   검색행  .bi-pop-search > .bi-pop-search__box(아이콘+인풋) + navy 검색 버튼
 *           인풋 상자 h38·r9·#F9FAFB · 돋보기는 **상자 안쪽 좌측 12px**
 *   리스트  상단 1px --pop-line 으로 시작 · 선택은 좌측 4px indigo
 *
 * ⚠ 2단계에서 배운 것: 스타일을 **글자 없는 트리거**(.sch_but_pop)에 씌우면
 *   화면에 네이비 덩어리가 생긴다. 그래서 구조를 먼저 만들고 클래스를 붙인다. */

.bi-pop-page .bi-pop-search{
    display: flex; align-items: center; gap: var(--space-2);
    margin-bottom: var(--space-3);
}
/* 인풋 «상자» 가 배경·테두리·라운드를 갖고, 안쪽 <input> 은 투명하다 —
 * 돋보기를 상자 안에 두려면 이 구조여야 한다(보드와 같은 방식). */
.bi-pop-page .bi-pop-search__box{
    flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--space-2_5);
    height: var(--pop-search-h); padding: 0 var(--pop-search-pad-r) 0 var(--pop-search-pad-l);
    background: var(--bg-input); border: 1px solid var(--pop-line);
    border-radius: var(--pop-search-r); box-sizing: border-box;
    /* 안내 토스트가 «입력 상자» 를 기준으로 뜬다 — 검색행에 붙이면 버튼까지 포함한
       행 왼쪽 끝(본문 여백 밖)에 걸려, 리스트형 팝업에서 목록 위에 여백 없이 얹혔다
       (2026-09-02 사용자 지적). 기준을 상자로 내리면 왼쪽이 입력칸과 맞는다. */
    position: relative;
}
.bi-pop-page .bi-pop-search__box i{
    color: var(--pop-ico); font-size: var(--pop-btn-fs); width: 16px;
    text-align: center; flex: 0 0 auto;
}
/* 상자가 이미 테두리를 가졌다 — 안쪽 인풋은 배경도 테두리도 없다.
 * (2단계에서 넣은 .bi-pop-page input 규칙을 이 자리에서만 되돌린다) */
.bi-pop-page .bi-pop-search__box input{
    flex: 1; min-width: 0; height: auto;
    border: 0; padding: 0; background: transparent;
    font-size: var(--pop-btn-fs); color: var(--txt-primary); outline: none;
}
/* 포커스 표시는 «상자» 가 한다 — 안쪽 인풋이 따로 테를 그리면 링이 두 겹으로 보인다.
   레거시 .text_input:focus 가 box-shadow 를 얹는 팝업이 있어 그림자까지 끈다(2026-08-25). */
.bi-pop-page .bi-pop-search__box input:focus{ border: 0; box-shadow: none; background: transparent; }
.bi-pop-page .bi-pop-search__box:focus-within{ border-color: var(--brand-blue); box-shadow: var(--ring-focus); }
.bi-pop-page .bi-pop-search__box input::placeholder{ color: var(--txt-disabled); font-weight: var(--fw-semibold); }

/* 리스트는 상단 선으로 시작한다(보드 §07-3) */
.bi-pop-page .bi-pop-tbl,
.bi-pop-page .bi-pop-clist{ border-top: 1px solid var(--pop-line); }

/* iframe 은 width 속성(HTML)으로 폭을 받는다 — 규격 폭 팝업에서는 상자를 꽉 채우게 한다.
 * 안 그러면 박스만 423 이 되고 안쪽 문서는 500 인 채라 내용이 넘친다(2026-08-25 실측). */
.write_layout_pop--list > iframe,
.write_layout_pop--form > iframe,
.write_layout_pop--wide > iframe{ width: 100%; box-sizing: border-box; }

/* 보드 구조(.bi-pop-search)로 옮긴 검색행에서는 옛 절대배치를 푼다.
 * .sch_but_pop 은 원래 **인풋 위에 겹쳐 놓는 돋보기 오버레이**였다(position:absolute).
 * 보드는 인풋 오른쪽에 **글자 있는 navy 버튼**이다 — 겹치면 안 된다(2026-08-25 눈으로 잡음).
 * 훅(.sch_but_pop)은 JS 가 쓰므로 지우지 않고, 이 구조 안에서만 배치를 되돌린다. */
.bi-pop-page .bi-pop-srch .sch_but_pop,
.bi-pop-page .bi-pop-search .sch_but_pop{
    position: static; width: auto; height: var(--pop-btn-nav-h); min-width: var(--pop-btn-nav-w);
    flex: 0 0 auto; padding: 0 var(--space-3);
    background: var(--brand-navy); color: var(--bg-input);
    border-radius: var(--pop-btn-r); font-size: var(--pop-btn-sm-fs); font-weight: var(--fw-bold);
    display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
}

/* 옛 검색 돋보기는 **인풋 위에 절대배치로 얹는** 방식이었다(.bi-pop-pay--list .body-main-sch .fa-search).
 * 보드 구조에서는 돋보기가 **상자 안 첫 자식**이라 흐름 배치여야 한다 —
 * 절대배치가 남아 있으면 상자 밖으로 떨어진다(2026-08-25 눈으로 잡음: 목록 위에 떠 있었다). */
.bi-pop-page .bi-pop-search .bi-pop-search__box i{ position: static; transform: none; left: auto; top: auto; }
/* ⚠ 옛 규칙 .bi-pop-pay--list .body-main-sch .fa-search 가 클래스 3개(0,3,0)라
 *   내 0,2,1 로는 못 이겼다. !important 대신 **선택자를 한 단계 더** 적어 이긴다. */

/* ══ 2줄 카드행 — styleboard4 §07-3 / §08 (2026-08-25) ═════════════════
 * 보드: 「2줄 행(고객)이면 행마다 테두리, 그리드 행(상품)이면 구분선」
 *       선택 = 좌측 4px indigo + 옅은 바탕, **테두리는 없앤다**(막대가 대신한다)
 *
 * ⚠ .bi-pop-clist 는 2026-08-10 에 규격만 만들고 **쓰는 팝업이 0개** 였다
 *   (그때 문서에도 「실제 팝업 적용은 미착수」로 적혀 있다).
 *   이제 고객 검색이 처음 쓴다 — 규격은 «쓰여야» 규격이다. */

/* 보드: 행은 «맞붙어» 있다 — 간격 0 · 라운드 0 · 목록 위 1px 선으로 시작하고
 * 팝업 좌우 끝까지 간다(본문 좌우 여백을 음수로 상쇄). 라운드 행(.r10)은 보드에서
 * «아직 안 정한 대안» 으로 그려둔 것이라 규격이 아니다. */
.bi-pop-page .bi-pop-clist{
    list-style: none; margin: 0; padding: 0;
    border-top: 1px solid var(--pop-line);
    overflow-y: auto; flex: 1 1 auto; min-height: 0;
}
.bi-pop-page .bi-pop-clist-item{
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--pop-row-pad-y) var(--pop-row-pad-x); box-sizing: border-box;
    background: var(--bg-card); cursor: pointer;
    border: 0; border-bottom: 1px solid var(--pop-line);   /* 한 줄만 — 겹쳐 2px 되던 것 (2026-08-26) */
    min-height: var(--pop-row-min-h);   /* 보조줄 유무와 무관하게 같은 높이(2026-08-26) */
}
.bi-pop-page .bi-pop-clist-item:hover{ background: var(--bg-selected); }
/* 선택 — 보드: 테두리를 없애고 좌측 4px 막대. 여백은 막대 두께만큼 보정한다. */
.bi-pop-page .bi-pop-clist-item.is-sel{
    background: var(--bg-selected);
    border-left: var(--pop-sel-bar) solid var(--pop-sel);
    padding: var(--pop-row-pad-y) var(--pop-row-pad-x) var(--pop-row-pad-y)
             calc(var(--pop-row-pad-x) + var(--pop-sel-bar));
}
.bi-pop-page .bi-pop-clist-main{ flex: 1; min-width: 0; }
.bi-pop-page .bi-pop-clist-nm{
    font-size: 13.5px; font-weight: var(--fw-bold); color: var(--txt-primary); line-height: 1.5;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 이름 옆 연락처 — 보드는 같은 줄에 흐린 글자로 둔다 */
.bi-pop-page .bi-pop-clist-nm span{ font-size: var(--pop-cnt-fs); font-weight: var(--fw-medium); color: var(--txt-muted); }
.bi-pop-page .bi-pop-clist-sub{
    font-size: var(--pop-cnt-fs); color: var(--txt-muted); line-height: 1.5;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bi-pop-page .bi-pop-clist-meta{
    flex: 0 0 auto; font-size: var(--pop-cnt-fs); font-weight: var(--fw-bold);
    color: var(--txt-secondary); text-align: right;
}
.bi-pop-page .bi-pop-clist-item.is-sel .bi-pop-clist-meta{ color: var(--pop-sel); }

/* 카드행 목록에는 표 헤더가 없다 — 각 행이 스스로 설명한다(보드 §08) */
.bi-pop-page .bi-pop-clist + .bi-pop-tbl-head,
.bi-pop-page .bi-pop-tbl-head.is-hidden{ display: none; }

/* ══ 목록형 팝업 «채움» — styleboard4 §08 (2026-08-25) ═══════════════════
 * 보드에서 목록은 팝업 본문을 «끝까지» 채우고, 넘치면 목록만 스크롤한다.
 * 실물은 .bi-pop-tbl-body{max-height:245px} 라 창 높이 600 에서 4행만 보이고
 * 아래가 텅 비었다 — 창 높이와 목록 높이가 서로를 모른다.
 * 높이를 새로 계산하지 않고 flex 사슬로 «남는 만큼» 준다.
 * body 에 absolute inset 을 쓰는 이유: html{height:100%} 를 전역에 심지 않기 위해서다. */
/* 기준점은 body 가 아니라 래퍼다 — 팝업 문서는 <body> 가 두 번 나오고(header + 개별 파일)
 * 파서가 «먼저 나온» body 의 class 만 살리기 때문에 개별 팝업의 body class 는 절대 안 먹는다. */
.bi-pop-pay--fill{ position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; }
/* ⚠ .bi-pop-pad 는 본문에도, 하단 버튼바에도 쓰인다(같은 이름 두 용도).
   통째로 늘리면 푸터까지 늘어나 버튼이 허공에 뜬다 — naver 에서 실제로 그랬다.
   늘어나는 것은 «목록을 품은» 본문 하나뿐이다. */
.bi-pop-pay--fill .bi-pop-pad--fill,
.bi-pop-pay--fill .bi-pop-listwrap{ display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.bi-pop-pay--fill > .bi-pop-pad:not(.bi-pop-pad--fill){ flex: 0 0 auto; }   /* 하단 버튼바 */
.bi-pop-pay--fill .bi-pop-search{ flex: 0 0 auto; }
.bi-pop-pay--fill .bi-pop-tbl-body{ flex: 1 1 auto; max-height: none; min-height: 0; display: flex; flex-direction: column; }
.bi-pop-pay--fill .bi-pop-list-foot{ flex: 0 0 auto; }

/* 좌우 여백은 «검색행과 푸터에만» 준다 — 보드에서 목록은 팝업 벽까지 닿고,
 * 행 안쪽 14px 이 글자를 세운다. 음수 마진으로 여백을 상쇄하던 방식은
 * 껍데기(.bi-pop-pay 24px)와 본문(.bi-pop-pad 10px)이 각각 밀어 두 겹으로 어긋났다. */
.bi-pop-pay--fill,
.bi-pop-pay--fill .bi-pop-pad--fill{ padding-left: 0; padding-right: 0; }
.bi-pop-pay--fill .bi-pop-search{ padding: 0 var(--pop-head-pad-x) var(--pop-head-pad-x); margin-bottom: 0; }
.bi-pop-pay--fill .bi-pop-list-foot{ padding: var(--pop-foot-pad-t) var(--pop-head-pad-x) var(--pop-foot-pad-b); }

/* 헤더 건수 — 보드: 제목 뒤 12px SemiBold 회색 (2026-08-25) */
.bi-pop-head-cnt{ font-size: var(--pop-cnt-fs); font-weight: var(--fw-semibold); color: var(--txt-muted); margin-left: var(--space-0_5); }
.bi-pop-head-cnt:empty{ display: none; }

/* 빈 상태 줄 — «결과 없음» 은 행이 아니다. 카드행 규격(테두리·선택·2줄)을 입히면
   검사기가 이걸 행으로 재고, 사용자도 누를 수 있는 줄로 오해한다. (2026-08-25) */
/* 2026-08-28 — 스코프를 풀었다. 「비어 있음」은 팝업만의 것이 아니다.
   designer_chart 본문이 같은 뜻으로 `.bi-paypop__item-empty` 를 따로 갖고 있었다 —
   같은 것을 두 이름으로 두면 둘이 서서히 달라진다. 빈 상태는 제품 전체에서 하나다. */
.bi-pop-clist-none{
    list-style: none; padding: var(--pop-row-pad-y) var(--pop-row-pad-x);
    color: var(--txt-muted); text-align: center; font-size: var(--pop-cnt-fs);
}

/* 채움형 팝업의 푸터는 흐름 안에 둔다 — 옛 position:fixed 는 목록 마지막 줄을 덮는다 (2026-08-25) */
.bi-pop-pay--fill .bi-pop-list-foot{ position: static; }

/* 푸터 좌우 가르기 — 보드 §푸터: 선택 초기화(좌) … 확인·닫기(우) (2026-08-26) */
.bi-pop-foot-sp{ flex: 1 1 auto; }

/* 팝업 iframe 은 블록으로 — inline 줄상자 여백이 팝업 바닥에 빈 띠를 만든다 (2026-08-26) */
.write_layout_pop > iframe{ display: block; }

/* 규격 푸터 안의 버튼 묶음은 «배치» 만 한다 — 여백·선은 바깥 푸터가 이미 그렸다 (2026-08-26) */
.bi-pop-list-foot .bi-pop-foot-btns{ padding: 0; border-top: 0; background: transparent; }
/* 2026-08-28 — 전폭(100vw) 규칙이 «푸터 안에 든 푸터» 에도 걸렸다.
   버튼 묶음이 팝업 폭을 통째로 차지해 왼쪽 체크 라벨을 상자 밖(-90px)으로 밀어냈고,
   그래서 「내부소진·샘플」이 왼쪽 가장자리에 한 글자씩 세로로 눌려 보였다(사용자 캡처 poc1).
   전폭은 «바깥 푸터» 의 성질이다 — 안쪽 묶음은 제 내용만큼만 차지한다. */
.bi-pop-page .bi-pop-list-foot .bi-pop-foot-btns{
    width: auto; margin-left: 0; margin-right: 0; flex: 0 1 auto;
    /* 위 여백(16)도 «바깥 푸터» 의 것이다 — 안쪽 묶음이 받으면 푸터가 그만큼 두꺼워진다.
       실측: 상품추가 76 vs 고객검색·디자이너검색 60. 같은 형식이어야 한다(사용자 지적). */
    margin-top: 0;
}

/* 상품 추가형 간격 — 보드 §08 (2026-08-26) */
.bi-pop-catalog .bi-pop-search{ padding-bottom: var(--space-2_5); }
.bi-pop-catalog .bi-pop-cat-tools{ gap: 0; margin-bottom: var(--space-4); }

/* 상품 행 체크박스 — 보드 §08 (2026-08-26) */
.bi-pop-catalog .bi-pop-prod-ul input[type="checkbox"]{ width: var(--pop-check); height: var(--pop-check); margin: 0; accent-color: var(--pop-sel); cursor: pointer; }
/* 푸터 좌측 옵션은 왼쪽 끝에 — 규격 푸터가 오른쪽 정렬이라 그냥 두면 버튼 쪽으로 밀린다 */
.bi-pop-list-foot .bi-pop-check{ margin-right: auto; }
/* 2026-08-28 — 푸터의 체크 라벨이 «세로로 눌려» 글자가 한 자씩 쪼개졌다(사용자 캡처 poc1·상품추가).
   .bi-pop-check 는 flex 항목인데 flex-shrink 기본값이 1 이라, 옆 버튼들이 자리를 다 가져가면
   라벨이 0 에 가깝게 줄어든다. 보드 견본(§07 상품 추가)의 푸터는 «한 줄» 이다 — 줄지 않게 못박는다.
   ⚠ 기존 선언은 그대로 두고 «새 규칙» 으로 더한다(§4). */
.bi-pop-list-foot .bi-pop-check,
.bi-pop-foot-btns .bi-pop-check{ flex: 0 0 auto; white-space: nowrap; }

/* ══════════════════════════════════════════════════════════════════════
   .bi-pop-board — «규격안(styleboard4) 값을 그대로 쓰는 팝업» 표시 (2026-08-28)

   왜 새 클래스인가
     팝업 하나를 규격에 맞추려고 .bi-pop-pay / .bi-pop-pad / 푸터 같은 **공통 규칙의 값**을
     고쳤더니, 그 규칙을 쓰는 다른 팝업이 함께 움직여 상품추가 팝업이 깨졌다(사용자 지적).
     프로젝트 규칙 §4 — 기존 클래스는 고치지 않고 **새 클래스를 더한다**.
     그래서 규격값은 전부 여기 모으고, 옮긴 팝업의 뿌리에만 이 클래스를 붙인다.
     붙이지 않은 팝업은 예전 그대로 — 회귀가 원천적으로 생기지 않는다.

   값의 출처는 보드뿐이다(probe_vs_board.mjs 가 보드에서 읽어 대조한다).
   ══════════════════════════════════════════════════════════════════════ */
.bi-pop-board{                                   /* 보드 .pop-body */
    padding: 0 var(--pop-head-pad-x) var(--space-4);
    color: var(--txt-primary); line-height: 1.5;
}
/* 본문 아래 16 은 «본문» 의 것 — 푸터는 그 아래 바닥에 붙는다(보드 .pop-body) */
.bi-pop-board .bi-pop-pad{ padding: 0 0 var(--space-4); }
.bi-pop-board .bi-pop-pad--form{ padding: 0 0 var(--space-4); }
/* 목록이 본문의 마지막이면 «마지막 행의 아래선이 곧 푸터 윗선» — 사이 여백 0(보드 .pp-b.flush) */
.bi-pop-board:has(> .bi-pop-pad > .bi-pop-clist:last-child),
.bi-pop-board:has(> .bi-pop-pad > .bi-pop-tbl-body:last-child),
.bi-pop-board:has(> .bi-pop-pad--form > .bi-pop-clist:last-child){ padding-bottom: 0; }
/* 본문↔푸터선 16 은 «본문의 아래 여백» 이다 — 푸터에 얹으면 자리가 어긋난다 */
.bi-pop-page .bi-pop-board .bi-pop-list-foot,
.bi-pop-page .bi-pop-board .bi-pop-foot-btns{ margin-top: 0; }
/* 헤더는 부모 DOM 이라 여기 닿지 않는다 — 헤더용 규격은 .bi-pop-head--board 로 따로 준다 */

/* 2026-08-28 — 팝업 푸터 버튼을 보드 `.b`/`.b-pri`/`.b-ghost` 값 그대로 맞춘다.
   전역 `.bi-btn` 은 제품 전체가 쓰므로 건드리지 않고, **팝업 푸터 안에서만** 규격을 준다.
   어긋나 있던 것: 높이(패딩 8 로 대신) · 줄간격 1(=13px, 보드 19.5) · 보조버튼 굵기 500(보드 700)
   · 좌우 16(보조버튼 보드 13) · 아이콘 간격 6(보드에는 없다) · 모서리 --radius-lg(보드 8). */
.bi-pop-list-foot .bi-btn,
.bi-pop-foot-btns .bi-btn{
    height: 34px; padding: 0 var(--space-4); border-radius: var(--radius-lg);
    font-size: var(--pop-f-fs); font-weight: var(--fw-bold); line-height: 19.5px;
    justify-content: center; gap: normal; border: 1px solid transparent;
}
.bi-pop-list-foot .bi-btn > i,
.bi-pop-foot-btns .bi-btn > i{ margin-right: var(--space-1_5); }   /* 아이콘은 gap 대신 제 여백으로 */
.bi-pop-list-foot .bi-btn--primary,
.bi-pop-foot-btns .bi-btn--primary{ background: var(--brand-blue); color: var(--bg-card); border-color: transparent; }
.bi-pop-list-foot .bi-btn--ghost,
.bi-pop-foot-btns .bi-btn--ghost{ background: var(--bg-card); color: var(--txt-secondary); border-color: var(--pop-line); }
/* 옵션 줄 오른쪽 금액 — 「생일할인 … 0」처럼 체크와 값이 한 줄에 서는 곳(2026-08-27) */
.bi-pop-page .bi-pop-opt-row{ display: flex; align-items: center; gap: var(--space-4); }
.bi-pop-page .bi-pop-opt-amt{ margin-left: auto; font-size: var(--pop-f-fs); font-weight: var(--fw-bold); color: var(--txt-primary); }
/* 금액 요약 줄 — 「이름 : 값」 몇 줄짜리 팝업(네이버페이 환불 등)의 공통 짜임.
   보드에 별도 원형이 없어 폼 라벨·본문 글자를 그대로 쓴다(2026-08-27). */
.bi-pop-page .bi-pop-sumlist{ display: flex; flex-direction: column; gap: var(--space-2_5); margin-bottom: var(--space-4); }
.bi-pop-page .bi-pop-sumrow{ display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); font-size: var(--pop-cnt-fs); color: var(--txt-secondary); }
.bi-pop-page .bi-pop-sumrow > span:last-child{ font-weight: var(--fw-bold); color: var(--txt-primary); }
.bi-pop-page .bi-pop-sumrow--strong{ font-size: var(--pop-f-fs); }
.bi-pop-page .bi-pop-sumrow--strong > span:last-child{ font-size: var(--fs-lg); font-weight: var(--fw-extrabold); }

/* 라벨 옆 보조설명 — 붙어 보이던 것(2026-08-27). 라벨은 굵고 보조는 흐리게, 사이를 띄운다. */
.bi-pop-page .bi-pop-f > label .sub_description{ margin-left: var(--space-1_5); font-weight: var(--fw-medium); color: var(--txt-disabled); }

/* 푸터 왼쪽 보조 링크(모듈설치확인 등) — 버튼과 같은 줄에 두되 왼쪽 끝에 붙인다. */
.bi-pop-list-foot .bi-pop-foot-link{ margin-right: auto; font-size: var(--pop-cnt-fs); color: var(--txt-muted); }

/* ══ 팝업 폼 격자 — 보드 §08·§09 (2026-08-26) ═══════════════════════
 * 라벨(12 ExtraBold) 위 · 입력 아래 · 두 칸씩. 한 칸짜리는 --one 으로 폭을 다 쓴다. */
.bi-pop-form2{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-3); margin-bottom: var(--space-3); }
.bi-pop-f{ display: flex; flex-direction: column; gap: var(--pop-f-gap); min-width: 0; }
.bi-pop-f > label{ font-size: var(--pop-cnt-fs); font-weight: var(--fw-bold); color: var(--txt-secondary); line-height: 18px; }
.bi-pop-f > label .bi-req{ color: var(--color-danger); margin-left: var(--space-0_5); }
/* 2026-08-28 — `number`·`tel` 이 빠져 있었다. 타입 하나가 빠지면 그 칸만 규격 밖이 되는데
   생김새가 비슷해 눈으로는 안 잡힌다(discount 의 «직접 입력» 이 그랬다). 타입을 다 적는다. */
.bi-pop-page .bi-pop-f input[type="text"], .bi-pop-page .bi-pop-f input[type="password"],
.bi-pop-page .bi-pop-f input[type="number"], .bi-pop-page .bi-pop-f input[type="tel"],
.bi-pop-page .bi-pop-f select{
    width: 100%; height: var(--pop-field-h); border-radius: var(--pop-field-r);
    padding: 0 var(--space-3); font-size: var(--pop-f-fs); border: 1px solid var(--pop-line);
    background: var(--bg-card); color: var(--txt-primary); box-sizing: border-box;
}
/* ⚠ 위 규칙과 특이도가 같아(0,3,1) «뒤» 에 있어야 이긴다 —
   검색 상자 «안» 의 인풋은 투명해야 테두리가 두 겹으로 안 보인다(2026-09-02). */
.bi-pop-page .bi-pop-search__box input,
.bi-pop-page .bi-pop-f .bi-pop-search__box input,
.bi-pop-page .bi-pop-search__box input.bi-input{
    border: 0; background: transparent; box-shadow: none; height: auto; padding: 0; border-radius: 0;
}
.bi-pop-page .bi-pop-f select{ background: var(--bg-input); }   /* 보드: 셀렉트는 바탕이 옅다 */
/* 2026-08-28 — 보드 §09 에는 «여러 줄 입력»(.pp-f .tx)이 있는데 CSS 에 옮겨져 있지 않았다.
   그래서 팝업마다 제 방언(.bi-msgpop__ta 등)으로 따로 만들고 있었다. 보드 값 그대로 여기 둔다. */
.bi-pop-page .bi-pop-f textarea{
    width: 100%; min-height: 96px; resize: vertical;
    border-radius: var(--pop-field-r); padding: var(--space-2_5) var(--space-3);
    font-size: var(--pop-f-fs); line-height: 1.6; border: 1px solid var(--pop-line);
    background: var(--bg-card); color: var(--txt-primary); box-sizing: border-box; font-family: var(--font-sans);
}
/* 결제구분↔결제금액 줄 — 보드는 구분이 좁고 금액이 넓다 */
.bi-pop-form2--amt{ grid-template-columns: 110px 1fr; }
/* 3열·4열 — 보드 §09 의 .fgrid 를 열 수만 달리한 것. 짧은 칸(성별·생년월일·등급 / 적립률 넷)이 한 줄에 든다. */
/* 폼 칸 안의 «입력 + 검색 버튼» 한 줄 — 보드 .fwrap. 여러 팝업이 같은 모양을 각자 그리고 있었다. */
.bi-pop-page .bi-pop-srch{ display: flex; align-items: center; gap: var(--space-2); }
.bi-pop-page .bi-pop-srch > input[type=text]{ flex: 1 1 auto; min-width: 0; }
/* 2026-09-02 — 「직책·은행」 처럼 «셀렉트 + 옆 버튼» 이 생겼다(사용자 지시로 버튼을 라벨 줄에서 내렸다).
   위 규칙이 input[type=text] 만 늘려서 select 는 제 폭에 머물고 버튼이 가운데 떠 있었다. */
.bi-pop-page .bi-pop-srch > select{ flex: 1 1 auto; min-width: 0; }
.bi-pop-page .bi-pop-srch > .bi-btn{ flex: 0 0 auto; height: var(--pop-field-h); }
.bi-pop-form3{ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin-bottom: var(--space-3); }
.bi-pop-form4{ display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2) var(--space-2); margin-bottom: var(--space-3); }
/* 폼 섹션 구분 — 새 색 없이 --group 선 + 흐린 소제목(보드 .fsec) */
.bi-pop-fsec{ display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-1_5); padding-top: var(--space-3_5); border-top: 1px solid var(--gray-100); }
.bi-pop-fsec--first{ margin-top: 0; padding-top: 0; border-top: 0; }
.bi-pop-fsec > span{ font-size: var(--fs-xs); font-weight: var(--fw-extrabold); letter-spacing: .08em; color: var(--txt-disabled); }

/* 폼 본문은 좌우 여백을 지킨다 — 목록형만 벽까지 간다 (2026-08-26) */
.bi-pop-pad--form{ padding: 0 var(--pop-head-pad-x); }   /* 규격값은 .bi-pop-board 에서(2026-08-28 되돌림) */

/* 폼 셀렉트 — 전역 select 규칙(44)이 이겨 칸 높이가 어긋났다(2026-08-26) */
.bi-pop-page .bi-pop-f select{ height: var(--pop-field-h); font-size: var(--pop-f-fs); background: var(--bg-input); }

/* 팝업 푸터 — 원형과 무관한 공통 규격 (2026-08-26) */
.bi-pop-page .bi-pop-list-foot{
    display: flex; align-items: center; justify-content: flex-end; gap: var(--pop-foot-gap);
    padding: var(--pop-foot-pad-t) var(--pop-head-pad-x) var(--pop-foot-pad-b);
    border-top: 1px solid var(--pop-line); background: var(--bg-card); box-sizing: border-box;
}

/* 폼 안의 체크 줄도 다음 줄과 12 를 띄운다 — 보드 §08 (2026-08-26) */
.bi-pop-pad--form .bi-pop-check{ margin-bottom: var(--space-3); }

/* 폼 본문은 헤더 바로 아래에서 시작한다 — 보드 §08 (2026-08-26) */
.bi-pop-pad--form{ padding-top: 0; }   /* 위 선언과 같은 뜻 — 뒤에 오는 단축속성이 되돌리지 않게 한 번 더 */

/* 여백이 두 겹으로 잡히던 것 — `.bi-pop-pay`(자체 padding)가 `.bi-pop-pad--form`(18)을 감싸면
   본문이 42 만큼 밀려 헤더 타이틀보다 안쪽에서 시작했다(cash 실측 2026-08-27). 여백은 안쪽 한 곳만 잡는다. */
.bi-pop-pay:has(.bi-pop-pad){ padding: 0; }
/* ⚠ 2026-08-28 — 위 `:has()` 규칙이 «뒤에 오고 특이도도 높아» .bi-pop-board 의 본문 여백을 지웠다.
   그래서 안내문·검색줄이 팝업 벽에 붙어 버렸다(규격안은 좌우 18 들여쓰기).
   규격 여백은 여기서 다시 못박는다 — 클래스를 더하는 것만으로는 «뒤에 오는 규칙» 을 못 이긴다. */
/* ⚠ 아래 16 을 «껍데기» 에 주면 그 여백이 **푸터 밑** 에 깔려 푸터가 떠 보인다
   (실측 푸터아래여유 paylist_cash 17 · setpoint 16 — 사용자 지적).
   보드에서 그 16 은 본문(.pop-body)의 것이다. 껍데기는 좌우만 갖는다. */
.bi-pop-pay.bi-pop-board{ padding: 0 var(--pop-head-pad-x) 0; }
/* 보드: **목록은 팝업 벽까지 닿는다** — 구분선이 벽에서 벽까지 그어지고,
   글자는 행 안쪽 여백(14)이 세운다. 안내문·검색줄만 18 들여쓴다.
   목록까지 18 을 먹으면 구분선이 짧아져 «떠 있는» 선으로 보인다(사용자 지적). */
.bi-pop-pay.bi-pop-board .bi-pop-clist,
.bi-pop-pay.bi-pop-board .bi-pop-tbl-body{
    margin-left: calc(var(--pop-head-pad-x) * -1);
    margin-right: calc(var(--pop-head-pad-x) * -1);
}
/* ⚠ 목록이 «상자 안에 또» 들어 있는 팝업이 있다(.bi-pop-tbl-body > .bi-pop-clist — pay_ref).
   둘 다 −18 을 받으면 −36 이 되어 행이 좌우로 잘린다("60%" 가 "0%" 로 보였다).
   전폭은 바깥 상자 한 번만 준다. */
.bi-pop-pay.bi-pop-board .bi-pop-tbl-body .bi-pop-clist{ margin-left: 0; margin-right: 0; }
/* 안내문 아래 16 — 보드 `.pop-note{margin:0 0 12~16}`.
   `.bi-pop-note:last-of-type:not(:only-child){margin-bottom:0}` 이 이걸 지워
   setpoint 에서 안내문과 「시술」이 맞붙어 있었다(사용자 지적). 특이도를 맞춰 되돌린다. */
/* ⚠ `.bi-pop-note:last-of-type:not(:only-child){margin-bottom:0}` 이 **뒤에 있고 특이도도 같아**
   계속 이겼다(실측 안내문↔본문 0, 규격안 12). :last-of-type 을 함께 걸어 특이도를 올린다. */
.bi-pop-page .bi-pop-pay.bi-pop-board .bi-pop-note,
.bi-pop-page .bi-pop-pay.bi-pop-board .bi-pop-note:last-of-type{ margin-bottom: var(--space-3); }
/* 본문 아래 16 도 `:has(.bi-pop-pad){padding:0}` 에 밀려 0 이 되곤 했다 — 특이도를 올려 못박는다.
   (--disc 와 «목록이 마지막» 인 경우는 아래 규칙이 더 높은 특이도로 다시 덮는다) */
.bi-pop-page .bi-pop-pay.bi-pop-board{ padding-bottom: 0; }
/* ⚠ 제휴/할인은 푸터가 «하단 고정» 이라 그 높이만큼 아래를 비워 둬야 한다.
   바로 위 board 여백(아래 16)이 그 예약을 덮어써서 단위·직접입력 폼이 푸터에 가려졌다.
   푸터를 이루는 값으로 다시 계산해 준다(버튼 높이가 바뀌면 함께 따라간다). */
/* ⚠ 뿌리 padding 으로 푸터 자리를 잡으려 했으나, 뿌리를 노리는 규칙이 여럿이라
   특이도 싸움이 반복됐다(실측 padding-bottom 이 계속 0). 그래서 **마지막 블록 자신** 이
   푸터 높이만큼 아래를 밀어 두게 한다 — 뿌리 여백이 어떻게 되든 폼이 가려지지 않는다. */
.bi-pop-pay--disc > .bi-pop-pad--form{
    margin-bottom: calc(var(--pop-foot-pad-t) + 34px + var(--pop-foot-pad-b));
}
/* 이 둘은 푸터가 본문의 «마지막 요소» 다 — 뿌리 아래 여백이 남으면 푸터 밑에 빈 띠가 생긴다
   (실측 푸터아래여유 16). 보드는 0 이다. */
.bi-pop-page .bi-pop-pay.bi-pop-board.bi-pop-pay--dchart,
.bi-pop-page .bi-pop-pay.bi-pop-board.bi-pop-pay--aim{ padding-bottom: 0; }
/* 결제수단 고르개 — 보드에 이 부품은 없지만, «여럿 중 하나를 고르는 칩» 은 보드 §06 의 필터 pill 이다.
   그 값(높이 28~38 · radius 999 · 활성 #EEF2FF/#BFD0FF/#0023B7)을 그대로 가져다 쓴다.
   ⚠ 기존 `.bi-paypop__method` 선언은 그대로 두고, 규격 팝업 안에서만 덮는다(§4). */
.bi-pop-board .bi-paypop__method{
    height: 38px; padding: 0 var(--space-3_5); border-radius: var(--radius-full);
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--pop-line); background: var(--bg-card);
    font-size: var(--pop-f-fs); font-weight: var(--fw-bold); color: var(--txt-secondary);
}
.bi-pop-board .bi-paypop__method.is-active{
    background: var(--color-indigo-50); border-color: var(--pop-pill-line, #BFD0FF); color: var(--brand-blue);
}
/* ── AI 메시지: 규격안대로 «군더더기» 를 걷는다 (2026-08-28 사용자 지시) ──
   규격안의 선택지는 «이름 + 단가» 두 줄이 전부다. 실제에는 체크표시(::after)와
   inset 이중 테두리·그림자가 들어가 있어 다른 물건처럼 보였다. */
.bi-pop-board .bi-msgpop__mode{
    border: 1px solid var(--pop-line); border-radius: var(--radius-2xl);
    background: var(--bg-card); box-shadow: none; padding: var(--space-3) var(--space-2_5);
}
.bi-pop-board .bi-msgpop__mode.is-active{
    border-color: var(--brand-blue); background: var(--color-indigo-50); box-shadow: none;
}
.bi-pop-board .bi-msgpop__mode.is-active::after{ content: none; }   /* 체크표시 제거 */
/* 수신인 태그 — 글자가 흐려 보였다. 규격안과 같은 «대비» 를 토큰으로 낸다.
   ⚠ 날색(#EEF2FF 등)을 그대로 쓰면 게이트가 막는다 — 같은 값의 토큰이 이미 있다. */
.bi-pop-board .bi-msgpop__tag.tag-indigo{ background: var(--color-indigo-50); color: var(--color-indigo-700); }
.bi-pop-board .bi-msgpop__tag.tag-amber { background: var(--color-warning-100); color: var(--color-warning-800); }
.bi-pop-board .bi-msgpop__tag.tag-rose  { background: var(--color-rose-100); color: var(--color-rose-700); }
/* ⚠ 하단 «고정» 푸터를 쓰는 팝업(--disc)은 제외한다 — 여기서 아래를 0 으로 만들면
   푸터가 흐름 밖이라 본문 마지막 블록을 그대로 덮는다(실측: 폼이 통째로 가려졌다). */
.bi-pop-page .bi-pop-board .bi-pop-pad:has(> .bi-pop-clist:last-child),
.bi-pop-page .bi-pop-board .bi-pop-pad:has(> .bi-pop-tbl-body:last-child),
.bi-pop-page .bi-pop-board .bi-pop-pad--form:has(> .bi-pop-clist:last-child){ padding-bottom: 0; }

/* 2026-08-28 — 검색·목록형인데 «목록 아래에 폼이 하나 더» 붙는 유일한 팝업(제휴/할인).
   푸터는 이 원형답게 하단 고정(position:fixed)이라 흐름에서 빠진다. 그래서 두 가지가 필요하다:
     ① 목록이 남는 자리를 먹어야 폼이 푸터 «바로 위» 에 선다(안 그러면 폼이 허공 가운데 뜬다 — 실측 빈 띠 165)
     ② 푸터 높이만큼 아래를 비워 둬야 푸터가 폼을 «덮지» 않는다
   ⚠ ②를 --list 의 padding-bottom 에 기대면 안 된다. 바로 위 `:has(.bi-pop-pad){padding:0}` 이 그걸 지운다
     (실측 padding-bottom 0 → 고정 푸터가 폼 위에 겹쳐 폼이 통째로 안 보였다).
     그래서 그 규칙 **뒤에서** 같은 특이도로 다시 준다.
   ⚠ box-sizing 을 빼면 100vh 에 아래 여백이 더해져 폼이 상자 밖으로 밀려난다. */
.bi-pop-pay--list.bi-pop-pay--disc{
    box-sizing: border-box; display: flex; flex-direction: column;
    height: 100vh; padding-bottom: calc(var(--pop-foot-pad-t) + 34px + var(--pop-foot-pad-b));
}
.bi-pop-pay--disc > .bi-pop-pad:not(.bi-pop-pad--form){ display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.bi-pop-pay--disc .bi-pop-clist{ flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.bi-pop-pay--disc > .bi-pop-pad--form{ flex: 0 0 auto; }
/* 푸터 윗선은 «팝업 전폭» 이다 — 보드 §08.
   ⚠ 감싼 상자마다 음수 여백을 주는 방식은 새 상자가 생길 때마다 빠진다(2026-08-27 네 팝업에서 확인).
     iframe 뷰포트 폭 = 팝업 안폭이라, 그 기준으로 한 번에 뚫는다. 버튼 여백(18)은 푸터 자신의 패딩이 지킨다. */
.bi-pop-page .bi-pop-list-foot,
.bi-pop-page .bi-pop-foot-btns{
    width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); box-sizing: border-box;
    margin-top: var(--space-4);   /* 본문 ↔ 푸터선 16. 규격 배치는 .bi-pop-board 가 덮는다(2026-08-28 되돌림) */
}
/* 2026-08-28 — 보드 `.pp-b.flush` 규칙을 제대로 옮긴다.
   실측(probe_gaps): 마지막블록↔푸터선이 **규격안 0 · 실제 16~24** 였다.
   목록이 본문의 마지막이면 «마지막 행의 아래선이 곧 푸터 윗선» 이라 사이에 여백이 없다.
   내가 본문 아래 16 을 모든 팝업에 준 것이 목록형에서는 규격을 깨뜨렸다(사용자 지적).
   ⚠ 폼형은 반대다 — 마지막 칸의 margin-bottom 12 + 본문 16 = 28 이 규격이다. 그래서
     아래에 있던 `:last-child{margin-bottom:0}` 도 걷는다(그게 폼형을 16 으로 눌러 놨다). */
.bi-pop-page .bi-pop-pad:has(> .bi-pop-clist:last-child),
.bi-pop-page .bi-pop-pad:has(> .bi-pop-tbl-body:last-child),
.bi-pop-page .bi-pop-pad--form:has(> .bi-pop-clist:last-child),
.bi-pop-page .bi-pop-pad--form:has(> .bi-pop-tbl-body:last-child){ padding-bottom: 0; }
.bi-pop-page .bi-pop-list-foot ~ *:last-child{ margin-bottom: 0; }
.bi-pop-page .bi-pop-note:last-of-type:not(:only-child){ margin-bottom: 0; }
.bi-pop-page .bi-pop-clist ~ .bi-pop-list-foot,
.bi-pop-page .bi-pop-tbl-body ~ .bi-pop-list-foot,
.bi-pop-page .bi-pop-clist ~ .bi-pop-foot-btns,
.bi-pop-page .bi-pop-prod-ul ~ .bi-pop-foot-btns,
.bi-pop-pay--fill .bi-pop-list-foot,
.bi-pop-pay--list .bi-pop-list-foot{ margin-top: 0; }

/* 셀렉트 화살표 — 보드는 옅은 홑화살표다. 브라우저 기본 화살표는 굵고 색이 진해 규격과 다르게 보인다. */
.bi-pop-page .bi-pop-f select{
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='%239CA3AF' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat; background-position: right var(--space-3) center;
    padding-right: var(--space-8);   /* 화살표 자리 */
}

/* 결제 팝업 레거시 라벨/본문 → 보드 §08 값 (2026-08-26) */
.bi-pop-page .bi-pop-card-label{ display: block; margin: 0 0 var(--pop-f-gap); font-size: var(--pop-cnt-fs); font-weight: var(--fw-bold); color: var(--txt-secondary); line-height: 18px; }
.bi-pop-page .bi-pop-card-body{ margin-bottom: var(--space-3); }
.bi-pop-page .bi-pop-card-body input[type="text"], .bi-pop-page .bi-pop-card-body select{
    height: var(--pop-field-h); border-radius: var(--pop-field-r); font-size: var(--pop-f-fs);
}
/* 홀로 놓인 폼 칸도 줄 간격을 지킨다 */
.bi-pop-pad--form > .bi-pop-f{ margin-bottom: var(--space-3); }
/* ══ 선불권 결제 — 카드행 2줄로 옮긴 뒤의 정돈 (2026-08-27) ═══════════════
 * 목록이 6열 표에서 카드행으로 바뀌면서 표 시절의 선·폭 규칙이 남아 겹쳐 보였다. */
/* 목록을 감싼 divider 의 아래선 + 마지막 행의 아래선 = 두 줄. 목록이 스스로 긋는다. */
.bi-pop-pay--prepay .bi-paypop__divider{ border-bottom: 0; }
/* 선불권 행은 «고르는» 행이 아니다 — 만료일 순으로 전부 자동 차감된다. 손가락 커서·hover 를 끈다. */
.bi-pop-pay--prepay .bi-pop-clist-item{ cursor: default; }
.bi-pop-pay--prepay .bi-pop-clist-item:hover{ background: var(--bg-card); }
/* 오른쪽 금액 두 줄(남은금액 / 충전금액) — 아래줄은 본문 보조줄과 같은 리듬 */
.bi-pop-pay--prepay .bi-pop-clist-meta > div + div{ font-weight: var(--fw-medium); color: var(--txt-muted); line-height: 1.5; }
/* 카드행은 팝업 좌우 끝까지 간다 — 본문 여백만큼 되돌린다(보드 §08). */
.bi-pop-pay--prepay .bi-pop-clist{
    margin-left: calc(var(--pop-head-pad-x) * -1); margin-right: calc(var(--pop-head-pad-x) * -1);
}
/* 금액 두 줄은 라벨·값 규격을 따른다 — 옛 15px/18px 은 카드행 13px 옆에서 혼자 컸다. */


/* 본문 좌우 여백은 폼과 같은 18 — .bi-pop-pad 기본값(10)이 헤더와 어긋났다. */
.bi-pop-pay--prepay .bi-pop-pad{ padding-left: var(--pop-head-pad-x); padding-right: var(--pop-head-pad-x); padding-top: 0; }
.bi-pop-pay--prepay .pop_desc{ padding-top: var(--space-3); }
/* 금액 두 줄은 .bi-pop-pad 밖(form 직속)이라 좌우 여백이 없어 벽에 붙었다(2026-08-27). */
.bi-pop-pay--prepay .bi-pop-prepay-amt{ padding-left: var(--pop-head-pad-x); padding-right: var(--pop-head-pad-x); }
/* 목록 끝과 금액줄 사이 — 목록 마지막 행 선 + 금액줄 윗선이 나란히 두 줄로 보였다. 위쪽 하나만 남긴다. */
.bi-pop-pay--prepay .bi-pop-clist-item:last-child{ border-bottom: 0; }


/* ══ 예약일시 선택(bk_datetime) — 넓은 폼 3분할 (2026-08-27) ═══════════
 * 규격안대로: 폭은 폼형(720)을 쓰고, 날짜·시작시간·종료시간을 **한 줄에 셋**.
 * 고정 폭(280×3=840)이 720 을 넘겨 마지막 칸이 밀려 나가 있었다. */
.bi-pop-pay--dt{ display: flex; flex-direction: column; }
/* ⚠ 푸터 아래 «14px» 의 정체 (2026-08-31) — 자유공간이 아니었다.
 * 공통 `.bi-pop-pay::after{content:'';display:table}` 는 float 시절의 클리어픽스인데,
 * 뿌리가 flex 가 되면서 **높이 0 짜리 flex 항목**이 됐다. 그 앞의 `gap:14px` 가
 * 푸터 뒤에 그대로 찍힌 것. 그래서 margin-top:auto 를 줘도(57px 로 먹고 있었다) 14 가 남았다.
 * 공통 규칙은 다른 팝업이 쓰므로 건드리지 않고 이 팝업에서만 항목에서 뺀다. */
.bi-pop-pay--dt::after{ display: none; }
.bi-pop-pay--dt .bi-pop-pad--dtgrid{
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-3);
    align-items: start; min-height: 0;
}
/* ⚠ 2026-08-31 — 여기 `max-height:352px; overflow-y:auto` 가 있었다.
 * 그래서 팝업 높이를 550→620 으로 키워도 칸은 350 에 머물고 «넘침 53» 이 그대로였다
 * (사용자: "스크롤이 생기는데 스크롤 안생기게 팝업 크기를 키워줘").
 * 칸은 격자 줄을 채우고, 팝업 높이가 가장 긴 칸을 담는다 — 자르는 쪽이 아니라 담는 쪽. */
.bi-pop-pay--dt .bi-pop-picker__col{
    width: auto; min-width: 0; height: auto; max-height: none; overflow: visible;
    border: 1px solid var(--pop-line); border-radius: var(--radius-xl); padding: var(--space-3);
}
/* 회색 머리띠 → 규격 라벨(12/700) — 보드에 «색 띠 머리» 는 없다 */
.bi-pop-pay--dt .bi-pop-picker__head{
    display: flex; flex-direction: column; gap: var(--pop-f-gap);
    margin: 0 0 var(--space-3); padding: 0; background: none; border: 0;
}
.bi-pop-pay--dt .bi-pop-picker__head > div:first-child{
    width: auto; padding: 0; white-space: nowrap;          /* 「예약 날짜」가 두 줄로 깨지던 것 */
    font-size: var(--pop-cnt-fs); font-weight: var(--fw-bold); color: var(--txt-secondary); line-height: 18px;
}
/* 오전·오후 = 섹션 소제목 (보드 .fsec) */
.bi-pop-pay--dt .bi-pop-picker__nav,
.bi-pop-pay--dt .bi-pop-picker__nav--tall{
    height: auto; margin: var(--space-3) 0 var(--space-2); padding: 0;
    font-size: var(--fs-xs); font-weight: var(--fw-extrabold); letter-spacing: .08em; color: var(--txt-disabled);
    background: none; border: 0; writing-mode: horizontal-tb;
}
.bi-pop-pay--dt .bi-pop-picker__sec:first-of-type .bi-pop-picker__nav{ margin-top: 0; }
/* 필수표시 * — 규격안은 빨강. 공통 `.bi-req` 는 `.bi-pop-f > label` 안에서만 색이 붙어
   여기(칸 머리의 평범한 div)에서는 검정으로 나왔다(2026-08-31). */
.bi-pop-pay--dt .bi-pop-picker__head .bi-req{ color: var(--color-danger); margin-left: var(--space-0_5); }
/* 안내문은 격자 위에 한 줄 — 규격안에 있던 것이 빠져 있었다(2026-08-28) */
.bi-pop-pay--dt .bi-pop-note--dt{ padding: 0 var(--pop-head-pad-x); margin: 0 0 var(--space-3); }
/* 고른 시간칩은 navy — 규격안대로. 지난 시간은 흐리게. */
/* ⚠ 2026-08-31 — 여기에 `.t_butn2.active` 가 빠져 있었다.
   시작시간은 .t_butn, 종료시간은 .t_butn2 다. 그래서 시작은 navy, 종료는 앞 규칙의 파랑으로
   «둘의 색이 서로 달랐다»(사용자 지적). 규격안은 고른 시간칩이 둘 다 navy 다. */
.bi-pop-pay--dt .t_butn.active,
.bi-pop-pay--dt .t_butn2.active{ background: var(--brand-navy); border-color: var(--brand-navy); color: var(--white); font-weight: var(--fw-extrabold); }
.bi-pop-pay--dt .t_butn:disabled,
.bi-pop-pay--dt .t_butn.is-past{ color: var(--gray-300); background: var(--bg-input); cursor: not-allowed; }
/* 시간칩 — 폭을 1000 으로 넓혔으니 한 줄에 5개(2026-08-28 규격안 확정).
   720 에서 4열일 때 «갑갑하다» 는 지적이었다. */
.bi-pop-pay--dt .bi-pop-picker__list{
    display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-1_5); width: auto; height: auto;
}
.bi-pop-pay--dt .bi-pop-picker__list > *{ width: auto; margin: 0; }


/* ══ 문자·장문 전송(sms · lms) — 폰 미리보기 + 입력폼 2단 (2026-08-27) ══════
 * 사용자 지시: «기존처럼 휴대폰 미리보기와 입력 폼 내용이 일단 다 들어가게».
 * 지금은 폰 그림이 본문의 절반을 차지하고 폭 870 에 세로도 넘쳤다.
 * → 폰은 **왼쪽 고정 폭**으로 줄이고, 오른쪽에 폼을 규격 라벨·입력으로 세운다. */
.bi-pop-pay--msg .bi-pop-pad--msggrid{
    display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: var(--space-4); align-items: start;
}
/* ⚠ 옛 폰 목업은 배경 이미지 폭(gif)에 기대 «고정 폭» 이었다 — 격자 칸을 넘겨 가로 스크롤이 났다.
   칸 안으로 들어오게 하고, 이미지도 칸 폭을 따르게 한다(2026-08-27). */
.bi-pop-pay--msg .bi-pop-pad--msggrid img{ max-width: 100%; height: auto; display: block; }
.bi-pop-pay--msg .bi-pop-pad--msggrid *{ max-width: 100%; box-sizing: border-box; }
.bi-pop-pay--msg .bi-msgsend__list,
.bi-pop-pay--msg input[type="text"],
.bi-pop-pay--msg textarea{ width: 100%; }
.bi-pop-pay--msg .bi-msgsend__wrap{ display: contents; }   /* 옛 가로 배치 래퍼는 격자에 자리를 안 차지한다 */
/* ⚠ 래퍼만 contents 로 풀면 그 안의 <form> 이 블록이라 **격자가 통하지 않는다** —
   폼이 폰 아래로 흘러 한 줄이 됐다(2026-08-27 실측). form 도 함께 태운다. */
.bi-pop-pay--msg .bi-pop-pad--msggrid > form,
.bi-pop-pay--msg .bi-msgsend__wrap > form{ display: contents; }
/* 안내문은 두 칸에 걸친다 */
.bi-pop-pay--msg .bi-msgsend__notice{ grid-column: 1 / -1; margin-bottom: var(--space-3); }
.bi-pop-pay--msg .bi-msgprev-phone--aside{ width: auto; min-width: 0; }
.bi-pop-pay--msg .bi-msgprev-phone__body--a,
.bi-pop-pay--msg .bi-msgprev-phone__body--ph{ width: auto; min-width: 0; }
.bi-pop-pay--msg .bi-msgprev-phone__ta--sm{ width: 100%; box-sizing: border-box; }
.bi-pop-pay--msg .bi-msgprev-phone__top,
.bi-pop-pay--msg .bi-msgprev-phone__foot{ width: 100%; overflow: hidden; }
.bi-pop-pay--msg .bi-msgprev-phone__body--a,
.bi-pop-pay--msg .bi-msgprev-phone__body--ph,
.bi-pop-pay--msg .bi-msgprev-phone__body--add{ width: 100%; padding-left: 0; padding-right: 0; }
/* 폰과 폼 사이의 옛 «점선 연결선» — 격자에서는 자리만 먹는다 */
.bi-pop-pay--msg .bi-msgsend__mid{ display: none; }
.bi-pop-pay--msg .bi-msg-rpanel{ width: auto; min-width: 0; float: none; }
.bi-pop-pay--msg .bi-msgsend__recv,
.bi-pop-pay--msg .bi-msgsend__form{ width: auto; min-width: 0; }
/* 오른쪽 폼 — 규격 라벨(12/700)·입력(h36 r8) */
.bi-pop-pay--msg .edit_one.bi-strong,
.bi-pop-pay--msg .bi-msg-direct-label{
    font-size: var(--pop-cnt-fs); font-weight: var(--fw-bold); color: var(--txt-secondary);
    line-height: 18px; margin: 0 0 var(--pop-f-gap);
}
.bi-pop-pay--msg .bi-msgsend__list{ width: 100%; min-height: 92px; box-sizing: border-box; }
.bi-pop-pay--msg .bi-msg-direct-row{ display: flex; gap: var(--space-2); }
.bi-pop-pay--msg .bi-msg-direct-row > input[type=text]{ flex: 1 1 auto; min-width: 0; }
.bi-pop-pay--msg .bi-msg-direct-row > .bi-btn{ flex: 0 0 auto; height: var(--pop-field-h); }
/* 옛 «라벨로 그린 동그라미» — 네이티브 라디오/체크와 겹쳐 보인다 */
.bi-pop-pay--msg input[type=radio] + label[for],
.bi-pop-pay--msg input[type=checkbox] + label[for]{ display: none; }
.bi-pop-pay--msg input[type=radio],
.bi-pop-pay--msg input[type=checkbox]{
    appearance: auto; visibility: visible; display: inline-block;
    width: var(--pop-check); height: var(--pop-check); margin: 0 var(--space-1_5) 0 0; vertical-align: middle;
    accent-color: var(--brand-navy);
}


/* ══ 스타일 카탈로그(catalog) — 3단 유지 · 우측 미리보기+설명 (2026-08-27) ══
 * 사용자 지시: «기존처럼 3단이여야 하고 우측엔 미리보기와 설명이 나와야 한다».
 * 폭은 사진 콘솔이라 예외로 두되, **헤더 왼쪽이 화면 밖으로 잘려 제목이 안 보이던 것**을 고친다
 *   — 팝업 상자가 중앙에 안 잡혀 왼쪽으로 밀려 있었다(실측 2026-08-27). */
#style_catalog{ max-width: calc(100vw - 24px); }
.bi-pop-cat-wrap{ width: 100%; max-width: 100%; box-sizing: border-box; }
.bi-pop-cat .bi-catalog__body{ padding: 0 var(--pop-head-pad-x) var(--space-4); }
/* 우측 미리보기 — «사진을 고르면 크게» 자리에 설명이 함께 서게 */
.bi-pop-cat .bi-catalog__view{
    flex: 0 0 300px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-3);
    border-left: 1px solid var(--pop-line); padding-left: var(--space-4); margin-left: var(--space-4);
}
/* 콘솔 카드의 보라·파랑 그라데이션은 규격에 없는 색이다 — 규격 카드로 */
.bi-pop-cat .bi-catalog__card{
    background: var(--bg-card); border: 1px solid var(--pop-line); border-radius: var(--radius-xl);
    padding: var(--space-3_5); margin-bottom: var(--space-2_5);
}
.bi-pop-cat .bi-catalog__card-h{
    font-size: var(--pop-cnt-fs); font-weight: var(--fw-bold); color: var(--txt-secondary);
    margin-bottom: var(--space-2);
}
/* 탭 — 보드 §08 탭 규격(회색 카드 안 흰 알약, 활성은 navy) */
.bi-pop-cat .bi-catalog__tabs{
    background: var(--gray-100); border: 1px solid var(--pop-line); border-radius: var(--radius-sm);
    padding: var(--space-2_5); gap: var(--space-1_5); margin-bottom: var(--space-3);
}
.bi-pop-cat .bi-catalog__tab{
    height: 32px; padding: 0 var(--space-4); border-radius: var(--radius-lg);
    background: var(--bg-card); border: 1px solid var(--pop-line); color: var(--txt-secondary);
    font-size: 12.5px; font-weight: var(--fw-extrabold);
}
.bi-pop-cat .bi-catalog__tab.is-active{ background: var(--brand-navy); border-color: var(--pop-tab-line); color: var(--white); }

/* ══════════════════════════════════════════════════════════════════════
   .bi-cat3 — 스타일 카탈로그 «규격안 3단» (2026-08-28)

   사용자 지시: 규격안대로 고친다. 기존 팝업 CSS 를 살리려 애쓰지 않는다.
   단 **공통 규칙은 손대지 않고 여기 새로 더한다** — 이미 끝낸 팝업이 함께 움직이면 안 된다.
   그래서 기존 `.bi-catalog__*` 선언은 그대로 두고, 이 클래스가 붙은 팝업 안에서만 덮는다.

   규격안: 좌 콘솔 220 · 중 갤러리 1fr · 우 미리보기 300
   ══════════════════════════════════════════════════════════════════════ */
/* ⚠ align-items:start 였다 — 세 칸이 «내용만큼만» 서서, 미리보기의 세로 구분선이
   본문 중간에서 끊겨 있었다(2026-08-31 캡처). 칸은 본문 높이를 채운다. */
.bi-cat3 .bi-catalog__body{
    display: grid; grid-template-columns: 220px minmax(0, 1fr) 300px;
    gap: var(--space-4); align-items: stretch; min-height: 0; flex: 1 1 auto;
}
/* 왼쪽 콘솔만 위에 붙인다 — 격자의 직계 자식이라 align-self 는 «세로» 로 작동한다.
   ⚠ .bi-catalog__content 에는 주면 안 된다. 그 부모(.bi-catalog__main)는 세로 flex 라
   같은 속성이 «가로» 로 작동해 사진 격자가 87px 로 눌렸다(2026-08-31 실측). */
.bi-cat3 > .bi-catalog__body > .bi-catalog__console{ align-self: start; }
/* 콘솔 카드 — 강조는 «테두리 색만». 좌측 굵은 막대는 보드에 없는 표현이라 쓰지 않는다(사용자 지적) */
.bi-cat3 .bi-catalog__console{ display: block; }
.bi-cat3 .bi-catalog__card{
    border: 1px solid var(--pop-line); border-radius: var(--radius-xl);
    background: var(--bg-card); padding: var(--space-3_5); box-shadow: none;
}
.bi-cat3 .bi-catalog__card + .bi-catalog__card{ margin-top: var(--space-2_5); }
.bi-cat3 .bi-catalog__card--ai{ border-color: var(--pop-sel); }
.bi-cat3 .bi-catalog__card--ai .bi-catalog__card-h{ color: var(--pop-sel); }
.bi-cat3 .bi-catalog__card-h{ font-size: var(--pop-cnt-fs); font-weight: var(--fw-bold); color: var(--txt-secondary); margin-bottom: var(--space-2); }
.bi-cat3 .bi-catalog__cbtn{ width: 100%; }
/* 갤러리 — 3열. 사진은 세로 3:4 */
.bi-cat3 .bi-catalog__content{ display: block; min-height: 0; }
.bi-cat3 .bi-catalog__grid{
    display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2_5);
}
.bi-cat3 .bi-catalog__grid > *{ aspect-ratio: 3 / 4; }
/* 사진 추가 — 가운데 + 한 글자, 점선으로 «빈 자리» 를 알린다(규격안) */
.bi-cat3 .bi-cat3__add{
    display: flex; align-items: center; justify-content: center;
    border: 1px dashed var(--pop-line); border-radius: var(--radius-lg);
    background: var(--bg-card); color: var(--txt-disabled); font-size: 26px; font-weight: 300;
    line-height: 1; cursor: pointer;
}
.bi-cat3 .bi-cat3__add:hover{ border-color: var(--pop-sel); color: var(--pop-sel); }
/* 미리보기 — 세 번째 단. 경계선으로 나눈다 */
.bi-cat3 .bi-cat3__prev{
    border-left: 1px solid var(--pop-line); padding-left: var(--space-4);
    display: flex; flex-direction: column; gap: var(--space-2_5); min-height: 0;
}
.bi-cat3 .bi-cat3__prev-t{
    font-size: var(--fs-xs); font-weight: var(--fw-extrabold); letter-spacing: .08em; color: var(--txt-disabled);
}
.bi-cat3 .bi-catalog__view{ width: auto; min-height: 0; flex: 1 1 auto; overflow-y: auto; }
/* 빈 안내는 «격자 한 칸» 이 아니라 줄 전체를 쓴다 — 안 그러면 + 옆에 끼어 격자가 흐트러진다 */
.bi-cat3 .bi-catalog__grid > .bi-catalog__empty{ grid-column: 1 / -1; aspect-ratio: auto; padding: var(--space-6) 0; }
/* 미리보기 세로선은 이 단이 하나만 긋는다 — 안쪽 뷰의 테두리는 지운다(선이 두 겹으로 보였다) */
.bi-cat3 .bi-cat3__prev .bi-catalog__view{ border: 0; padding: 0; }

/* ══════════════════════════════════════════════════════════════════════
   .bi-msgspec — 문자·장문 전송 «규격안» (2026-08-28)

   사용자 지시: 규격안대로 고친다. 기존 팝업 CSS 를 살리려 애쓰지 않는다.
   단 공통 규칙은 손대지 않고 여기 새로 더한다 — 이미 끝낸 팝업이 함께 움직이면 안 된다.

   ⚠ 앞선 시도에서 «격자를 새로 얹어» 실패했다. 바깥 격자(.bi-pop-pad--msggrid)는
     이미 2단(210 / 나머지)이다. 여기서는 **격자를 만들지 않고** 안쪽 모양만 규격에 맞춘다.

   ⚠ textarea 가 둘인 것은 «남은 것» 이 아니다 — 90바이트를 넘으면 두 번째 칸으로 이어 쓴다
     (popup_layer_sms.1.js:196). 그래서 지우지 않고, 폰 안에서 **하나의 글상자처럼** 보이게 한다.
   ══════════════════════════════════════════════════════════════════════ */
/* 상자 = 헤더 + 본문(스크롤) + 푸터 — 푸터가 화면 밖으로 밀리지 않는다 */
.bi-msgspec{ display: flex; flex-direction: column; height: 100vh; box-sizing: border-box; padding-bottom: 0; }
.bi-msgspec > .bi-pop-pad{ flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.bi-msgspec > .bi-pop-list-foot{ flex: 0 0 auto; margin-top: 0; }

/* 안내문 — 규격 안내문 모양(옛 회색 상자 대신) */
.bi-msgspec .bi-msgsend__notice{
    background: none; border: 0; padding: 0; margin: 0 0 var(--space-3);
    font-size: var(--pop-cnt-fs); color: var(--txt-muted); line-height: 1.6;
}
/* 폰 — 둥근 카드 하나. 두 글상자는 이어진 하나처럼 보이게 한다. */
.bi-msgspec .bi-msgprev-phone--aside{ width: auto; max-width: 100%; }
.bi-msgspec .bi-msgprev-phone__body--a,
.bi-msgspec .bi-msgprev-phone__body--ph{
    width: auto; background: none; border: 0; padding: 0; margin: 0;
}
.bi-msgspec .bi-msgprev-phone__body--add{ width: auto; padding: 0; }
.bi-msgspec .bi-msgprev-phone__ta--sm{
    width: 100%; box-sizing: border-box; min-height: 132px; resize: vertical;
    border: 1px solid var(--pop-line); border-radius: var(--radius-xl); background: var(--bg-card);
    padding: var(--space-2_5) var(--space-3); margin: 0;
    font-size: var(--pop-f-fs); line-height: 1.6; color: var(--txt-primary); font-family: var(--font-sans);
}
.bi-msgspec .bi-msgprev-phone__body--ph .bi-msgprev-phone__ta--sm{ min-height: 92px; margin-top: var(--space-2); }
/* 글자수 — 글상자 오른쪽 아래에 작게 */
.bi-msgspec .bi-msgprev-phone__size--sm{
    display: block; width: auto; text-align: right; margin: var(--space-1) 0 0;
    font-size: var(--fs-2xs); color: var(--txt-muted); background: none; border: 0; padding: 0;
}
/* ══ 폰 미리보기 — 규격안 .ph2 (2026-08-31) ════════════════════════════
 * 사용자: "sms, lms 는 휴대폰 이미지 부분이 규격안대로 안됬어".
 * 지금까지는 «GIF 를 뺀 밋밋한 글상자» 였다. 규격안은 폰 카드다 —
 * 이어피스 · 브랜드 라벨 · 흰 화면 · 화면 안 말풍선 · 바닥에 글자수 한 번.
 * ⚠ 이름을 새로 판다(.bi-msgphone*). 기존 .bi-msgprev-phone* 는 다른 화면도 쓰므로 그대로 둔다. */
.bi-msgspec .bi-msgphone{
    border: 1px solid var(--pop-line); border-radius: var(--radius-2xl);
    background: var(--bg-input); padding: var(--space-2_5) var(--space-2_5) var(--space-3_5);
    box-sizing: border-box;
}
.bi-msgspec .bi-msgphone__ear{
    width: 52px; height: 5px; border-radius: var(--radius-full);
    background: var(--gray-300); margin: 0 auto var(--space-2);
}
.bi-msgspec .bi-msgphone__brand{
    text-align: center; font-size: var(--fs-2xs); font-weight: var(--fw-extrabold);
    color: var(--txt-muted); margin-bottom: var(--space-2);
}
/* ⚠ 폰 화면 높이는 sms·lms 가 «같다» (2026-08-31 사용자 지시: "sms 휴대폰 이미지 크기를 lms와 같게").
   전에는 lms 의 textarea rows=19 가 높이를 정해 sms(270) 와 lms(403) 가 달랐다.
   → 화면 높이를 여기서 못박고, 글상자는 그 안을 채운다. rows 는 더 이상 크기를 정하지 않는다. */
.bi-msgspec .bi-msgphone__scr{
    background: var(--bg-card); border: 1px solid var(--pop-line); border-radius: var(--radius-xl);
    height: 343px; padding: var(--space-2_5);
    display: flex; flex-direction: column; gap: var(--space-2);
}
/* 말풍선이 화면을 채운다 — 이어쓰기 칸이 드러나면 둘이 나눠 갖는다(화면 높이는 그대로) */
.bi-msgspec .bi-msgphone__bub{ display: flex; flex: 1 1 auto; min-height: 0; }
.bi-msgspec .bi-msgphone__ta{ flex: 1 1 auto; height: 100%; }
/* 말풍선 — 왼쪽 아래 모서리만 각지게(규격 12/12/12/3) */
.bi-msgspec .bi-msgphone__bub{
    background: var(--bg-input); border-radius: var(--radius-xl) var(--radius-xl) var(--radius-xl) 3px;
    padding: var(--space-2) var(--space-2_5); max-width: 88%;
}
/* 말풍선 «안» 의 입력칸 — 테두리·배경 없이 글만 (말풍선이 곧 상자다) */
.bi-msgspec .bi-msgphone__ta{
    width: 100%; box-sizing: border-box; min-height: 0; resize: none;
    border: 0; border-radius: 0; background: none; padding: 0; margin: 0;
    font-size: var(--pop-cnt-fs); line-height: 1.6; color: var(--txt-secondary);
    font-family: var(--font-sans); outline: none;
}
/* 글자수 — 화면 바닥 오른쪽에 한 번 */
.bi-msgspec .bi-msgphone__cnt{
    margin-top: auto; text-align: right;
    font-size: var(--fs-2xs); color: var(--txt-muted);
}
.bi-msgspec .bi-msgphone__cnt2{ margin-left: var(--space-2); }
/* 이어쓰기 칸은 «쓰였을 때만» 보인다 — 비어 있으면 말풍선도 글자수도 접는다.
   (빈 칸일 때 placeholder 가 보이는 것을 신호로 쓴다) */
.bi-msgspec .bi-msgphone__scr:has(#inputsms2:placeholder-shown) .bi-msgphone__bub--cont,
.bi-msgspec .bi-msgphone__scr:has(#inputsms2:placeholder-shown) .bi-msgphone__cnt2{ display: none; }
/* 가운데 점·세로선 장식은 규격에 없다 */
.bi-msgspec .bi-msgsend__mid{ display: none; }
/* 오른쪽 폼 — 칸을 꽉 쓴다 */
.bi-msgspec .bi-msg-rpanel{ width: auto; min-width: 0; }
.bi-msgspec .bi-msgsend__recv,
.bi-msgspec .bi-msgsend__form{ width: auto; min-width: 0; }
/* 폼 줄간격 16 → 12 (2026-08-31). 팝업은 창 높이에 잘리므로 내용을 줄여야 스크롤이 없어진다.
   .bi-col--gap-16 은 공통이라 값을 고치지 않고, 이 팝업 안에서만 덮는다. */
.bi-msgspec .bi-msgsend__form.bi-col--gap-16{ gap: var(--space-2_5); }
/* 전송시각 — 날짜·시·분 한 줄. 날짜가 남는 폭을 갖고 시·분은 제 폭만 쓴다. */
.bi-msgspec .bi-msgsend__when{ align-items: center; flex-wrap: nowrap; font-size: var(--pop-cnt-fs); color: var(--txt-secondary); }
.bi-msgspec .bi-msgsend__when > input[type=text]{ flex: 1 1 auto; min-width: 0; }
.bi-msgspec .bi-msgsend__when > select{ flex: 0 0 auto; }
/* 라벨 — 규격 12/700 */
.bi-msgspec .edit_one > b,
.bi-msgspec .edit_one.bi-strong,
.bi-msgspec .bi-msg-direct-label{
    font-size: var(--pop-cnt-fs); font-weight: var(--fw-bold); color: var(--txt-secondary); line-height: 18px;
}
/* 수신자 목록 — 최대 1,000명. 목록 «안에서» 스크롤해 팝업이 길어지지 않게 한다(규격안) */
.bi-msgspec .bi-msgsend__list{
    /* 최대높이 132 → 104 (2026-08-31): 목록은 어차피 «안에서» 스크롤한다.
       바깥(.bi-pop-pad)에 스크롤이 생기지 않게 하는 쪽이 우선이다. */
    width: 100%; box-sizing: border-box; height: auto; min-height: 80px; max-height: 96px; overflow-y: auto;
    border: 1px solid var(--pop-line); border-radius: var(--radius-lg); background: var(--bg-card);
    font-size: var(--pop-cnt-fs); padding: var(--space-1);
}
/* 옛 폰 목업의 «배경 이미지»(bgPhoneBody.gif·bgSmsInputAdd.gif)가 검은 테두리로 남아 있었다.
   규격안의 폰은 그림이 아니라 둥근 카드다 — 배경과 고정 높이를 걷는다. */
.bi-msgspec .bi-msgprev-phone__body--ph,
.bi-msgspec .bi-msgprev-phone__body--add{
    background-image: none; height: auto; padding-top: 0; text-align: left;
}

/* ══════════════════════════════════════════════════════════════════════
 * §41  write 팝업 — 입력화면을 팝업으로 (2026-08-28)
 * ══════════════════════════════════════════════════════════════════════
 * 규격: renew_crm/write_pop.html.  나머지는 §40 팝업 규격(.bi-pop-form2 ·
 * .bi-pop-f · .bi-pop-fsec · .bi-pop-foot-btns)을 **그대로** 쓴다.
 * 여기 있는 것은 그 규격에 «없어서» 옮길 수 없던 것 8가지뿐 — 새 색·새 토큰 0.
 * ⚠ 기존 클래스를 고치지 않는다(CLAUDE.md §4). 전부 신규 이름이다. */

/* ① 2열 격자에서 한 줄을 다 쓰는 칸 — 메모·주소·이메일처럼 값이 긴 것.
 *    (기존 .bi-pop-form-full 은 .bi-pop-pay 스코프 전용이라 폼 격자에서 안 먹는다) */
.bi-pop-f--full{ grid-column: 1 / -1; }

/* ② 주소 3열 — 우편번호 / 주소 / 상세주소.
 *    .bi-pop-form3 는 «균등» 3열이라 우편번호가 주소만큼 넓어진다. */
.bi-pop-page .bi-pop-faddr{ display: grid; grid-template-columns: 150px 1fr 200px; gap: var(--space-2); }
@media (max-width: 640px){ .bi-pop-page .bi-pop-faddr{ grid-template-columns: 1fr; } }

/* ③ 라벨 옆에 버튼이 붙는 줄 — 주소검색.
 *    버튼을 «필드» 옆에 두면 3열이 4열이 되어 주소칸이 좁아진다. */
.bi-pop-page .bi-pop-flabel-row{ display: flex; align-items: center; gap: var(--space-2); }
.bi-pop-page .bi-pop-flabel-row > label{ flex: 0 0 auto; }
.bi-pop-page .bi-pop-flabel-row > .bi-btn{ height: var(--pop-btn-sm-h); font-size: var(--pop-btn-sm-fs); padding: 0 var(--pop-pill-pad-x); }

/* ④ 라벨 옆 힌트 — 별도 줄로 내리면 칸 높이가 줄마다 달라진다. */
.bi-pop-page .bi-pop-fhint{ margin-left: var(--space-1_5); font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--txt-muted); }

/* ⑤ 팝업 안 여러 줄 입력 — 팝업은 페이지보다 낮다.
 *    .bi-write-textarea 는 «고정» h100, 폼 공통 textarea 는 min 96. 팝업 규격은 74. */
.bi-pop-page .bi-pop-f textarea.bi-pop-ftx{ min-height: 74px; height: auto; }

/* ⑥ 파일 선택 — 브라우저 기본 모양은 높이·글꼴이 규격 밖이라 그 줄만 튄다. */
.bi-pop-page .bi-pop-ffile{ display: flex; align-items: center; gap: var(--space-2); height: var(--pop-field-h); }
.bi-pop-page .bi-pop-ffile > input[type="file"]{ position: absolute; width: 0; height: 0; padding: 0; opacity: 0; overflow: hidden; border: 0; }
.bi-pop-page .bi-pop-ffile > label.bi-btn{ flex: 0 0 auto; height: var(--pop-btn-sm-h); font-size: var(--pop-btn-sm-fs); padding: 0 var(--pop-pill-pad-x); cursor: pointer; }
.bi-pop-page .bi-pop-ffile > .bi-pop-ffile__name{ font-size: var(--pop-cnt-fs); color: var(--txt-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* ⑦ 라디오·체크 한 줄 — 입력칸과 «같은 높이» 라야 옆 칸과 밑선이 맞는다. */
.bi-pop-page .bi-pop-finline{ display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1) var(--space-4); min-height: var(--pop-field-h); }
.bi-pop-page .bi-pop-finline > label{ display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--pop-f-fs); color: var(--txt-secondary); cursor: pointer; margin: 0; font-weight: var(--fw-normal); }
.bi-pop-page .bi-pop-finline input[type="radio"], .bi-pop-page .bi-pop-finline input[type="checkbox"]{
    width: var(--pop-check); height: var(--pop-check); margin: 0; flex: 0 0 auto; }
.bi-pop-page .bi-pop-finline input[type="radio"]{ accent-color: var(--brand-navy); }
.bi-pop-page .bi-pop-finline input[type="checkbox"]{ accent-color: var(--pop-sel); }

/* ⑧ 폼 본문 — 긴 폼은 **본문만** 스크롤한다. 머리·발은 붙어 있어야
 *    26항목짜리(상품)에서도 저장 버튼을 찾으러 스크롤할 일이 없다. */
.bi-pop-page .bi-pop-wbody{ padding-bottom: var(--space-4); }
/* ⚠ 어느 폼이 넘칠지는 «화면 높이» 가 정한다 — 모듈을 보고 미리 고를 수 없다.
 *   (실측: pay_init 19항목 = 1026px 로 화면 밖 106px. 같은 폼도 낮은 화면에선 더 넘친다)
 *   max-height 는 짧은 폼을 늘리지 않으므로 규격이 늘 갖는다. 머리·발은 밖에 있어 고정된다.
 * ⚠ vh 를 쓰면 «안 된다» — 팝업은 iframe 이라 iframe 안에서 1vh 는 «팝업 높이» 다.
 *   팝업 높이는 다시 내용 높이로 정해지므로 되먹임이 생겨 모든 팝업이 268px 로 오그라들었다
 *   (2026-08-28 실측). 화면이 아니라 «상자» 를 기준으로 재는 값이어야 한다 → 고정 560px.
 *   56(머리)+560+59(발) = 675 → 700px 화면까지 저장 버튼이 보인다. */
/* 560 은 «부모 창을 못 읽을 때» 의 안전값이다. 실제 값은 popup_layer_write.js 가
   부모 창 높이에서 머리·발·여백을 빼 --pop-wbody-max 로 넘긴다(브릿지 변수, §4).
   ⚠ 여기에 vh 를 쓰면 안 된다 — iframe 안에서 1vh 는 «팝업 높이» 라 되먹임이 생긴다. */
.bi-pop-page .bi-pop-wbody{ max-height: var(--pop-wbody-max, 560px); overflow-y: auto; overscroll-behavior: contain; }
/* 스크롤바가 생기면 오른쪽 칸이 눌린다 — 그만큼만 비운다 */
.bi-pop-page .bi-pop-wbody{ padding-right: var(--space-1); margin-right: calc(var(--space-1) * -1); }

/* 푸터 — 팝업 벽까지 닿는 띠. 기존 `.bi-pop-reg .bi-pop-foot-btns` 는 --pop-pad-x(22)로
   뚫는데 본문 여백은 --pop-head-pad-x(18)라 좌우로 4px 씩 넘친다.
   기존 규칙을 고치는 대신(§4) write 폼에서만 여백과 같은 값으로 다시 못박는다. */
.bi-pop-page .bi-popwrite .bi-pop-foot-btns{
    margin: 0 calc(-1 * var(--pop-head-pad-x)) 0;
    width: calc(100% + var(--pop-head-pad-x) * 2);
}
/* 페이지 셸(메뉴로 직접 여는 환경설정·내정보관리)에서는 뚫지 않는다 — 벽이 없다 */
.bi-write-page .bi-popwrite .bi-pop-foot-btns{ margin: 0; width: 100%; }
/* 규격 §04 — 구획이 하나뿐이면 소제목을 쓰지 않는다. 첫 격자는 위 여백이 없다. */
.bi-pop-page .bi-popwrite .bi-pop-wbody > .bi-pop-form2:first-child{ margin-top: 0; }
.bi-pop-page .bi-popwrite .bi-pop-form2:last-child{ margin-bottom: 0; }

/* 단위 표기(원 · % · 회) — 입력칸 옆에 붙는 짧은 글. 규격 §05 «숫자는 오른쪽» 과 한 벌이다. */
.bi-pop-page .bi-pop-funit{ font-size: var(--pop-cnt-fs); color: var(--txt-muted); flex: 0 0 auto; white-space: nowrap; }
/* 한 줄 안의 짧은 입력 — 폼 공통 규칙이 width:100% 를 주므로 여기서만 되돌린다.
   («기본적용 비율 [30] %» 처럼 칸이 값보다 커지면 무엇을 넣는 칸인지 흐려진다) */
.bi-pop-page .bi-pop-finline input[type="text"], .bi-pop-page .bi-pop-finline input[type="number"]{ width: auto; min-width: 0; }
.bi-pop-page .bi-pop-finline input.bi-write-input--xs{ width: 68px; }
.bi-pop-page .bi-pop-finline input.bi-write-input--sm{ width: 118px; }
.bi-pop-page .bi-pop-finline input.bi-write-input--md{ width: 160px; }
/* 구획선은 격자 한 줄을 «다» 쓴다 — 한 칸만 차지하면 옆 칸이 소제목 오른쪽으로 올라붙는다
   (pay_ref 실측 2026-08-28: 「구간별 지급율」 옆에 «가.구간» 이 붙어 있었다). */
.bi-pop-page .bi-popwrite .bi-pop-form2 > .bi-pop-fsec,
.bi-pop-page .bi-popwrite .bi-pop-form3 > .bi-pop-fsec,
.bi-pop-page .bi-popwrite .bi-pop-form4 > .bi-pop-fsec{ grid-column: 1 / -1; }
/* 줄 끊기 — 「이 항목은 반 칸 크기 그대로 «혼자» 둔다」 (2026-09-01 고객등록 휴대폰번호).
   빈 칸이 옆자리를 차지해 다음 항목이 새 줄에서 시작한다. --full 로 늘리면 입력칸까지 넓어져
   «크기는 그대로, 줄만 끊는다» 가 안 된다. 높이 0 이라 줄 간격에 영향을 주지 않는다. */
.bi-pop-page .bi-popwrite .bi-pop-f--spacer{ min-height: 0; padding: 0; border: 0; }
/* ⚠ 전역 `input[type=checkbox]{visibility:hidden;display:none}`(옛 스프라이트 +label 방식) 때문에
   폼 안 체크박스가 «보이지 않는다». 라디오는 살아 있어 눈으로 대조하기 전에는 못 잡는다
   (product_category 실측 2026-08-28: 「하위 일괄 적용」 앞이 비어 있었다). 여기서 되살린다. */
.bi-pop-page .bi-pop-finline input[type="checkbox"],
.bi-pop-page .bi-pop-finline input[type="radio"]{
    visibility: visible; display: inline-block;
    -webkit-appearance: auto; -moz-appearance: auto; appearance: auto;
}

/* ⚠ 팝업 안에서는 `.bi-pop-reg *{box-sizing:border-box}` 가 걸리는데, 같은 폼이 **페이지 셸**로
   뜰 때는 그 조상이 없어 옛 content-box 규칙이 이긴다. 그러면 height:36 인 버튼이 테두리 2를
   더해 **38** 로 그려진다(page=write 실측 2026-08-28) — 같은 마크업인데 화면마다 값이 달라진다.
   폼 스코프에서 한 번 못박아 두 셸의 눈금을 맞춘다. */
.bi-popwrite, .bi-popwrite *{ box-sizing: border-box; }

/* ── 문자 미리보기 폰 목업 — 그림 대신 규격으로 (2026-08-31) ──────────────
 * 규격: renew_crm/write_pop.html §06 «미리보기»
 * 왜 GIF 를 걷어내나:
 *   ① 이미지의 색·라운드는 토큰 밖이고 확대하면 흐려진다(bgPhoneTops/Bottoms/bgSmsInputB 3장).
 *   ② 「SMS」 글자가 **그림에 박혀 있다.** 이 화면의 최대 길이는 2000바이트(LMS)인데
 *      캡션은 언제나 SMS 였다 — 화면이 거짓말을 하고 있었다.
 *   ③ 3장을 이어 붙인 상자라 높이가 53+323+56 로 고정이고 팝업 안에서 줄일 수 없다.
 * ⚠ 카카오 알림톡 말풍선(.bi-msgprev-talk*)은 **건드리지 않는다** — 그건 카카오 규격이다. */
.bi-pop-page .bi-pop-phone{
    width: 250px; max-width: 100%; box-sizing: border-box;
    border: 1px solid var(--border-base); border-radius: var(--radius-2xl, 16px);
    background: var(--bg-card); padding: var(--space-3_5) var(--space-3_5) var(--space-5);
    display: flex; flex-direction: column;
}
/* 스피커 슬릿 — 그림에 있던 것을 그대로 옮긴 형태다 */
.bi-pop-page .bi-pop-phone__bar{
    width: 56px; height: 5px; border-radius: var(--radius-full); background: var(--gray-300); margin: 0 auto;
}
/* 캡션은 **바이트 수가 정한다** — 90 이하 SMS · 넘으면 LMS */
.bi-pop-page .bi-pop-phone__cap{
    margin-top: var(--space-2); text-align: center;
    font-size: var(--fs-sm); font-weight: var(--fw-bold); letter-spacing: .08em; color: var(--txt-muted);
}
.bi-pop-page .bi-pop-phone__screen{
    margin-top: var(--space-3); padding-top: var(--space-2_5);
    border-top: 1px solid var(--border-light); display: flex; flex-direction: column;
}
.bi-pop-page .bi-pop-phone__ta{
    width: 100%; height: 280px; border: 0; outline: none; resize: none; background: transparent;
    padding: 0; font-family: var(--font-sans); font-size: var(--fs-sm); line-height: 1.6;
    color: var(--txt-primary); box-sizing: border-box;
}
.bi-pop-page .bi-pop-phone__size{
    margin-top: var(--space-2); text-align: right; font-size: var(--fs-xs); color: var(--txt-disabled);
    font-variant-numeric: tabular-nums;
}

/* ⚠ 감춤이 새고 있었다 — 실측 2026-08-31, 18화면 중 **6화면**.
 *   `.bi-hidden{display:none}` 은 (0,1,0) 이고 7393줄에 있다.
 *   규격 컴포넌트가 `.bi-pop-f{display:flex}`(10905줄, 같은 (0,1,0) 이지만 **뒤**) 나
 *   `.bi-pop-page .bi-pop-finline{display:flex}`((0,2,0)) 로 display 를 잡으면 감춤이 진다.
 *   증상: pay_edit 은 정산타입이 고정급인데도 구간 10줄이 다 보이고,
 *         branch 는 «환경설정 복사 대상 지점» 이 늘 보였다.
 *   («클래스를 붙였는데 안 감춰진다» 는 눈으로는 원래 보이는 칸과 구별이 안 된다 — 재야 안다)
 *   감춤은 무엇이든 이겨야 한다. !important 대신 폼 스코프로 특이도를 올려 못박는다. */
.bi-pop-page .bi-popwrite .bi-hidden,
.bi-pop-page .bi-popwrite.bi-hidden,
.bi-write-page .bi-popwrite .bi-hidden{ display: none; }
/* 카탈로그 푸터 — 「사진 삭제」는 왼쪽, 나머지는 오른쪽(규격안). .sp 가 밀어야 하는데
   이 팝업의 푸터는 flex 인데도 왼쪽 버튼이 붙지 않았다 — 첫 버튼을 직접 민다. */
.bi-cat3 > .bi-pop-list-foot{ justify-content: flex-start; }
.bi-cat3 > .bi-pop-list-foot > .sp{ flex: 1 1 auto; }

/* ① 라벨줄 안의 라벨도 «같은 글자» 여야 한다 — 실측 2026-08-31, 5화면 8개가 규격 밖이었다.
 *   공통 규칙 `.bi-pop-f > label` 은 **직계 자식만** 잡는다. 라벨 옆에 버튼을 붙이려고
 *   한 겹 감싼 순간(.bi-pop-flabel-row) 그 규칙이 빗나가 브라우저 기본값(16px/400)으로 떨어졌다.
 *   «주소» 만 글자가 크고 굵기가 다른데, 눈으로는 «좀 크네» 정도라 지나치기 쉽다.
 *   힌트·별표도 라벨의 자손이라 같이 놓쳤으므로 함께 못박는다. */
.bi-pop-page .bi-pop-flabel-row > label{
    font-size: var(--pop-cnt-fs); font-weight: var(--fw-bold);
    color: var(--txt-secondary); line-height: 18px;
}
.bi-pop-page .bi-pop-flabel-row > label .bi-req{ color: var(--color-danger); margin-left: var(--space-0_5); }

/* ③ 알림톡 미리보기를 **SMS/LMS 미리보기와 같은 크기**로 (2026-08-31 사용자 지적).
 *   말풍선은 내용만큼 자라던 터라, 긴 템플릿에서는 옆의 폰 목업보다 훨씬 길어져
 *   두 미리보기의 «키» 가 달랐다. 내용이 길면 **말풍선 안에서 스크롤**한다.
 * ⚠ 노란 머리·흰 말풍선(브랜드 형태)은 건드리지 않는다 — 크기만 맞춘다.
 *   그래서 .bi-msgprev-talk* 를 고치지 않고 write 폼 스코프에서만 덮는다(§4). */
.bi-pop-page .bi-popwrite .bi-msgprev-talk__ta{
    height: 327px;                    /* 폰 목업 전체 높이(391)에서 말풍선 머리·여백(64)을 뺀 값 — 실측으로 맞췄다 */
    overflow-y: auto; resize: none; box-sizing: border-box;
}

/* ── 예약일시 팝업 푸터 — 규격(높이 60) (2026-08-31) ──
   실측 79 였다. 왼쪽 안내문이 제 줄높이로 푸터를 키우고 있었다.
   규격 푸터는 «버튼 34 + 여백 13/12 = 60» 이다 — 안내문은 그 안에 한 줄로 앉는다.
   ⚠ 이 팝업에서만 쓰는 이름(.bi-dtfoot)으로 더한다 — 공통 푸터 규칙은 건드리지 않는다. */
/* ⚠ 뿌리가 세로 flex 라 푸터가 «늘어나고» 있었다(계산 높이 78.8 — 규격 60).
   푸터는 제 내용만큼만 차지한다. */
.bi-dtfoot{ align-items: center; flex: 0 0 auto;
    /* 규격 푸터 = 여백 13 + 버튼 34 + 여백 12 + 윗선 1 = 60.
       ⚠ 높이를 못박았더니 59 가 나왔다 — border-box 라 못박은 값 안에 윗선 1px 이 먹혔다.
       flex:0 0 auto 로 «늘어나지 않음» 은 이미 보장되니, 높이는 내용이 정하게 둔다(2026-08-31). */
    height: auto; }
.bi-dtfoot > .sp{ flex: 1 1 auto; }
.bi-dtfoot .bi-pop-foot-link{
    flex: 0 1 auto; min-width: 0; line-height: 18px; font-size: var(--pop-cnt-fs);
    color: var(--txt-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    padding: 0; margin: 0; text-decoration: none;
}
/* ⚠ 2026-08-31 — 위 `.bi-pop-pay--dt > div:last-child{flex:1 1 100%}` 는 «막내를 늘리는» 규칙이다.
   규격 푸터를 달면서 막내가 푸터가 되어, 푸터가 79 로 늘어났다(규격 60).
   기존 규칙은 그대로 두고(다른 자리에서 쓸 수 있다) 푸터만 예외로 못박는다. */
.bi-pop-pay--dt > .bi-pop-list-foot.bi-dtfoot{
    flex: 0 0 auto;
    height: auto;       /* 위와 같은 이유 — 못박으면 윗선 1px 만큼 59 가 된다 */
    margin-top: auto;   /* 남는 자리는 위로 — 푸터는 바닥에 붙는다(실측 14 남던 것) */
}
/* ⚠ 2026-08-31 — 문자·장문의 푸터는 본문(.bi-pop-pad) «안» 에 있다.
   옛 마크업의 <div> 짝이 맞지 않아 밖으로 옮기면 구조가 더 흐트러진다(실제로 시도했다).
   구조를 건드리는 대신 **스크롤 상자 바닥에 붙여** 항상 보이게 한다 —
   사용자 지적 「푸터 버튼영역이 없어 안 나와」의 해결이다. */
.bi-msgspec .bi-pop-pad > .bi-pop-list-foot{
    position: sticky; bottom: 0; z-index: 2;
    margin-top: var(--space-4); background: var(--bg-card);
}

/* ⚠ 한 줄 안의 «라벨 아닌 글자» 가 규격을 안 타고 있었다 — 실측 2026-08-31.
 *   `.bi-pop-finline > label` 만 13px 로 잡아 두어, 같은 줄에 있는
 *   포인트 값(`span.upoint_val`)과 약관 링크(`a.bi-link`)가 **브라우저 기본 16px** 로 떴다.
 *   한 줄 안에서 글자 크기가 갈리면 «항목 글자가 들쭉날쭉» 해 보인다.
 *   → 줄 자체에 크기를 준다. 안에 무엇이 들어와도 같은 글자다. */
.bi-pop-page .bi-popwrite .bi-pop-finline{ font-size: var(--pop-f-fs); color: var(--txt-secondary); }
.bi-pop-page .bi-popwrite .bi-pop-finline a,
.bi-pop-page .bi-popwrite .bi-pop-finline span:not(.bi-pop-funit):not(.bi-pop-fhint),
.bi-pop-page .bi-popwrite .bi-pop-finline .bi-write-value{ font-size: var(--pop-f-fs); }
/* 값 표시(포인트·마지막 거래일 등)도 폼 글자와 같은 눈금을 쓴다 — --fs-md(14)가 아니다 */
.bi-pop-page .bi-popwrite .bi-write-value{ font-size: var(--pop-f-fs); padding: 0; }

/* ⚠ 폼 안 버튼 글자가 **세 종류**였다 — 실측 2026-08-31.
 *   푸터 13/700 · 검색줄 13/500 · 라벨옆 12/500.
 *   규격(styleboard4 §09)은 «주 버튼 13 · 보조 버튼 12, 굵기는 둘 다 700» 이다.
 *   보조 버튼은 자리에 따라 **높이만** 다르고(라벨 옆 30 · 검색줄 36) 글자는 같아야 한다 —
 *   한 폼 안에서 같은 성격의 버튼이 크기·굵기가 갈리면 «항목 글자가 들쭉날쭉» 해 보인다. */
.bi-pop-page .bi-popwrite .bi-pop-srch > .bi-btn,
.bi-pop-page .bi-popwrite .bi-pop-flabel-row > .bi-btn,
.bi-pop-page .bi-popwrite .bi-pop-ffile > .bi-btn,
.bi-pop-page .bi-popwrite .bi-pop-f > .bi-btn,
.bi-pop-page .bi-popwrite .bi-pop-finline > .bi-btn{
    font-size: var(--pop-btn-sm-fs); font-weight: var(--fw-bold);
}
.bi-pop-page .bi-popwrite .bi-pop-foot-btns .bi-btn{ font-weight: var(--fw-bold); }

/* ═══════════════════════════════════════════════════════════════════════════
 * §42 예약 상세 = «자리» 가 아니라 «덮개»  (2026-09-02 · 규격 renew_crm/booking_spec.html)
 *   booking_renew · booking_time 공통. 사용자 요구 셋:
 *     ① 예약을 «고를 때» 우측에서 밀려 나오고 닫을 수 있게
 *     ② 중앙(디자이너 × 시간)이 상세가 물고 있던 자리까지 넓어지게
 *     ③ 펼쳐질 때 중앙을 «덮게» — 밀지 않는다
 *   근거(실측): 타임라인 실제 폭 3217px 인데 보이는 창은 976px = 30%.
 *   그 옆에서 340px 가 «예약을 선택하세요» 빈 상태로 늘 자리를 물고 있었다.
 *   덮개로 바꾸면 1920 에서 중앙 976 → 1318, 보이는 시간칸 7.7 → 10.9 칸.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* 좌 사이드와 중앙을 붙인다 — 사용자 지시(2026-09-02) 「붙여달라」.
   구획 구분선이 중앙 세로선까지 닿는다. 좌 구획이 이미 오른쪽 여백 16px 을 갖고 있어
   글자와 세로선 사이는 그대로다 — 폭은 뺏지 않고 «선이 못 미치던 빈 자리» 만 없앤다. */
.bi-bksplit.bi-bksplit--tight { gap: 0; }

/* 덮개가 «중앙 위» 에 얹히려면 기준이 필요하다 */
/* ⚠ 닫힌 덮개는 translateX(100%) 로 오른쪽에 «나가 있다» — 그대로 두면 부모의 scrollWidth 가
   360 늘어 카드에 **가로 넘침**이 생긴다(1630 → 1990 실측). 넘친 만큼을 여기서 자른다. */
.bi-bksplit.bi-bksplit--drawer { position: relative; overflow: hidden; }

/* ⚠ 덮개일 때만 자리를 뺀다 — 기존 .bi-bk-rightcol(340px 고정 열)은 그대로 두고
   두 클래스가 함께 붙었을 때만 덮개가 된다(특이도 0,2,0 로 위 규칙을 이긴다). */
.bi-bksplit > .bi-bk-rightcol.bi-bk-drawer {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: 360px; align-self: auto; box-sizing: border-box;   /* 폭 360 은 여백을 포함한 값이다 */
    background: var(--bg-card);
    border-left: 1px solid var(--border-base);   /* 그림자·스크림은 쓰지 않는다 — 지금 화면에 없는 것이다 */
    /* ⚠ 여백을 주면 안쪽 패널(.bi-bk-panel-header 14/20 · .bi-bki 자체 여백)과 **겹쳐 이중**이 된다.
       덮개는 «자리» 만 잡고 여백은 안쪽 것을 그대로 쓴다. */
    overflow-y: auto; overflow-x: hidden;
    transform: translateX(100%);                  /* 폭이 아니라 «위치» 를 옮긴다 — 타임라인을 다시 그리지 않는다 */
    transition: transform .22s ease;
    /* z 는 «둘 사이» 여야 한다 — 실측으로 정한 값이다.
         .bi-bksch-nowline (현재시각 빨간선) z:40  → 덮개가 이보다 **위**여야 선이 상세를 가로지르지 않는다
         .bi-agg-list (주간·월간 요약에 마우스를 올리면 펼쳐지는 목록) z:50
                                                 → 덮개가 이보다 **아래**여야 그 목록에서 예약을 고를 수 있다
       60 으로 뒀다가 ③ 「마우스오버 설명에서 예약 선택이 안 된다」 를 만들었다. */
    z-index: 45;
}
.bi-bksplit > .bi-bk-rightcol.bi-bk-drawer.is-open { transform: translateX(0); }
/* 닫혀 있는 동안은 «없는 것» 이다 — 탭 이동·읽기 프로그램에서도 빠진다 */
.bi-bksplit > .bi-bk-rightcol.bi-bk-drawer:not(.is-open) { visibility: hidden; }
.bi-bksplit > .bi-bk-rightcol.bi-bk-drawer.is-open { visibility: visible; }
@media (prefers-reduced-motion: reduce) { .bi-bksplit > .bi-bk-rightcol.bi-bk-drawer { transition: none; } }
/* 덮개 안에서는 «상세 → 선 → 플랜 일지» 순서를 그대로 쓴다(지금 우측열과 같다) */
.bi-bksplit > .bi-bk-drawer .bi-bk-info-panel { width: 100%; }
/* 덮개 머리의 닫기 — 자리를 오른쪽 끝으로 */
/* ⚠ .bi-bk-panel-header 는 display:block 이라 margin-left:auto 가 안 먹고
   × 가 **제목 다음 줄로** 떨어졌다(제목 위 162 · 닫기 위 181 실측). 덮개 안에서만 한 줄로 세운다. */
.bi-bk-drawer .bi-bk-panel-header { display: flex; align-items: center; gap: var(--space-2); }
.bi-bk-panel-header .bi-bk-panel-close {
    margin-left: auto; width: 26px; height: 26px; border: 0; border-radius: var(--radius-md);
    background: var(--bg-input); color: var(--txt-muted); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.bi-bk-panel-header .bi-bk-panel-close:hover { background: var(--border-light); color: var(--txt-primary); }
/* 덮개에서는 닫기가 «머리에 하나» 다 — 상세 안 .bi-bki-close 는 같은 일을 두 번 한다 */
.bi-bksplit > .bi-bk-drawer .bi-bki-close { display: none; }
/* 빈 상태 「예약을 선택하세요」 는 덮개에서 쓰이지 않는다 — 안 고르면 덮개 자체가 없다 */
.bi-bksplit > .bi-bk-drawer .bi-bk-panel-empty { display: none; }

/* 예약 상태 배지 — 「실시간 최근 플랜 일지」 배지(.bi-bka-badge) 와 같은 모양.
   ⚠ 지금 것은 bg #2563EB · 흰 글자 · 라운드 0 «각진 사각» 인데 이 형태가 화면 어디에도 없다(사용자 지적).
   색은 «확정 = 파랑» 으로 — 타임라인 카드 배지(.bi-resv-dot--confirmed)와 같은 계열이라 눈이 헷갈리지 않는다. */
/* ⚠ 기존 .bi-bki-status.status_round (0,2,0) 가 r9999 를 준다 — 특이도를 맞춰야 이긴다 */
/* ── 예약 카드 — 두 화면 «한 형태» (2026-09-02) ──────────────────────────
 * 지적 ⑥⑦: 예약일정표 카드에는 **왼쪽 3px 굵은 선**이 있고(디자인에 없던 형태),
 *   예약일정표(시간) 카드는 **배경이 아예 없다**(.bi-bt-card-res--* 는 **정의가 없는 죽은 클래스**였다).
 *   같은 «예약 카드» 가 두 화면에서 다르게 생겼다.
 * → 한 형태로 맞춘다: **연한 배경 + 1px 옅은 테두리 + r12**. 굵은 선은 쓰지 않는다.
 *   색은 상태 배지(.bi-resv-dot--*)와 같은 계열이라 카드와 배지가 따로 놀지 않는다.
 * ⚠ 기존 규칙을 고치지 않는다 — .bi-bksplit--drawer 스코프에서 덮는다(두 화면에만 닿는다). */
.bi-bksplit--drawer .bi-bk-inner.bi-bksch-card,
/* ⚠ .bi-resv 는 content-box 였다. 테두리 1px 을 더하니 width:100% 위에 2px 이 얹혀
   칸(117 · 안쪽 105)을 **11px 넘겼다**(실측). 테두리를 폭 안에 넣는다. */
.bi-bksplit--drawer .bi-resv { border-style: solid; border-width: 1px; border-radius: var(--radius-xl); box-sizing: border-box; }

/* 좌↔중앙 세로 구분선 — 붙이고 나니 «사라졌다».
   ⚠ 원래 규칙은 .bi-bksplit__side + .bi-bksplit__calcol 인데
   booking_renew 의 좌측은 .bi-bksch-side 라 형제 선택자에 걸리지 않았다(실측 border-left 0px).
   두 이름을 다 건다. */
.bi-bksplit--tight > .bi-bksch-side + .bi-bksplit__calcol,
.bi-bksplit--tight > .bi-bksch-side + .bi-bksplit__main,
.bi-bksplit--tight > .bi-bksplit__side + .bi-bksplit__calcol,
.bi-bksplit--tight > .bi-bksplit__side + .bi-bksplit__main {
    border-left: 1px solid var(--border-base);
}

/* ⚠ 여기서 .bi-bka-badge.is-emerald 를 파랑으로 덮었다가 **되돌렸다.**
   같은 클래스가 두 화면에서 «다른 상태» 를 뜻하고 있었기 때문이다 —
   시간표는 확정=emerald, 일정표는 신청=emerald. CSS 로 덮으면 한쪽은 맞고 한쪽은 틀린다.
   → 색이 아니라 **뜻을 통일**했다: booking_time/script.js 의 badgeCls 를 일정표 기준으로 맞췄다.
   기준은 카드 안 배지 .bi-resv-dot--* — 신청 초록 · 확정 파랑 · 완료 회색 · 취소 빨강. */

/* 헤더 일간·주간·월간이 눌려 글자가 깨졌다 — 버튼 21×28 실측, 「일간」 두 글자가 안 들어간다.
   범례가 커지면서 세그먼트를 짓눌렀다. 줄어들지 않게 못박는다. */
.bi-erp-toolbar__right .bi-segment { flex-shrink: 0; }
.bi-erp-toolbar__right .bi-segment .bi-segment__btn { flex-shrink: 0; white-space: nowrap; }
/* ⚠ 진짜 원인은 좌우 여백이 --space-0_5(**2px**) 라 「일간」 두 글자가 버튼에 꽉 찬 것이다(21×28 실측).
   공통 .bi-segment__btn 은 건드리지 않고 이 툴바에서만 숨통을 튼다. */
.bi-erp-toolbar__right .bi-segment .bi-segment__btn { padding-left: var(--space-3); padding-right: var(--space-3); }
/* 카드 고객명 — 시간표만 11/900 이고 일정표는 13/800 이었다(실측). 두 화면을 맞춘다. */
.bi-bksplit--drawer .bi-resv__name { font-size: var(--fs-xs); font-weight: var(--fw-extrabold); }
/* ⚠ 원래 규칙 .bi-page .bi-bk-inner.bi-bksch-card.bi-bk-statusN 은 클래스 **넷**(0,4,0) 이다.
   셋으로는 못 이긴다 — 상태 클래스를 속성으로 한 번 더 걸어 무게를 맞추고 뒤에 둔다. */
.bi-bksplit--drawer .bi-bk-inner.bi-bksch-card[class*="bi-bk-status"] { border-left-width: 1px; }
/* 신청 */
.bi-bksplit--drawer .bi-bk-inner.bi-bksch-card.bi-bk-status1,
.bi-bksplit--drawer .bi-resv.bi-bt-card-res--request {
    background: color-mix(in srgb, var(--color-success-100) 45%, transparent);
    border-color: var(--color-success-200); color: var(--color-success-700);
}
/* 확정 */
.bi-bksplit--drawer .bi-bk-inner.bi-bksch-card.bi-bk-status2,
.bi-bksplit--drawer .bi-resv.bi-bt-card-res--confirmed {
    background: color-mix(in srgb, var(--color-info-100) 45%, transparent);
    border-color: var(--color-info-200); color: var(--color-info-700);
}
/* 취소 · 노쇼 */
.bi-bksplit--drawer .bi-bk-inner.bi-bksch-card.bi-bk-status3,
.bi-bksplit--drawer .bi-bk-inner.bi-bksch-card.bi-bk-status5,
.bi-bksplit--drawer .bi-bk-inner.bi-bksch-card.bi-bk-status6,
.bi-bksplit--drawer .bi-resv.bi-bt-card-res--cancel {
    background: color-mix(in srgb, var(--color-danger-100) 45%, transparent);
    border-color: var(--color-danger-200); color: var(--color-danger-600);
}
/* 완료 */
.bi-bksplit--drawer .bi-bk-inner.bi-bksch-card.bi-bk-status4,
.bi-bksplit--drawer .bi-resv.bi-bt-card-res--done {
    background: var(--bg-input); border-color: var(--border-base); color: var(--txt-muted);
}

.bi-bki-status.bi-bki-status--chip {
    display: inline-block; min-width: 34px; text-align: center;
    font-size: var(--fs-2xs); font-weight: var(--fw-extrabold); line-height: 1.5;
    padding: var(--space-0_5) var(--space-1_5); border-radius: var(--radius-md);
    background: var(--color-info-50); color: var(--color-info-600); border: 1px solid var(--color-info-100);
}


/* ─────────────────────────────────────────────────────────────────────────
   §43 · 예약 두 화면을 «한 벌» 로 (사용자 지적 6건, 2026-09-02)
   ───────────────────────────────────────────────────────────────────────── */

/* ① 카드 안 상태 글자 — 주간·월간의 묶음 칩(.bi-agg-stat)과 «크기·모양·색» 을 같게.
   일간·시간표는 10/900 · r4 · 2/6 이었고 주간·월간은 11/800 · r6 · 2/8 이었다.
   같은 낱말이 자리마다 다른 옷을 입으면 한 화면으로 안 읽힌다. */
.bi-page .bi-resv-dot {
    font-size: var(--fs-xs); font-weight: var(--fw-extrabold); line-height: 1.5;
    padding: var(--space-0_5) var(--space-2); border-radius: var(--radius-md);
    border: 1px solid transparent; white-space: nowrap;
}
/* 색도 .bi-agg-stat 과 같은 값으로 — 신청 초록 · 확정 파랑 · 완료 회색 · 취소·노쇼·마감 빨강 */
.bi-page .bi-resv-dot--request   { background: var(--color-success-100); color: var(--color-success-700); border-color: var(--color-success-300); }
.bi-page .bi-resv-dot--confirmed { background: var(--color-info-100);    color: var(--color-info-700);    border-color: var(--color-info-300); }
.bi-page .bi-resv-dot--done      { background: var(--border-base);       color: var(--txt-muted);         border-color: transparent; }
.bi-page .bi-resv-dot--cancel,
.bi-page .bi-resv-dot--block     { background: var(--color-danger-50);   color: var(--color-danger-700);  border-color: var(--color-danger-300); }
.bi-page .bi-resv-dot--checkin   { background: var(--color-warning-100); color: var(--color-warning-700); border-color: var(--color-warning-300); }

/* ③ 헤더 세그먼트 — 4칸 «고정» 격자였다. 버튼이 셋이면 네 번째 빈 칸이
   「월간」 옆 회색 여백으로 남고, 다섯이면 두 줄로 접힌다.
   → 칸 수를 버튼 수에 맡긴다. 버튼이 넷이면 지금과 똑같다. */
.bi-page .bi-segment { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; }

/* ④ 검색 칸 아래 여백 — 칸 자체의 아래 padding 12 + 칸 사이 12 + 다음 칸 위 12 = 36 이었다.
   칸의 아래 여백을 덜어 24 로. 좌우도 다른 칸(16)에 맞춰 입력폼이 캘린더와 같은 선에서 시작하게 한다. */
.bi-page .bi-bksch-side-sec--search { padding: var(--space-3) var(--space-4) 0; }

/* ⑦ 시간표 아래 「상태 가이드」 스위치 — 위 서브바 범례(.bi-bk-legend-dot--*)와 같은 색으로.
   신청 초록 · 확정 파랑 · 완료 회색 · 취소 빨강 테두리 — 카드 칩과도 한 벌이다. */
.bi-page .bi-resv-sw--request   { background: var(--color-success-500); border: 0; }
.bi-page .bi-resv-sw--confirmed { background: var(--color-info-500);    border: 0; }
.bi-page .bi-resv-sw--done      { background: var(--txt-disabled);      border: 0; }
.bi-page .bi-resv-sw--cancel    { background: var(--color-danger-50);   border: 1px solid var(--color-danger-300); }


/* ④ 중앙의 디자이너 알약 필터바는 **뺐다**(2026-09-04 사용자 지시) —
   같은 필터가 좌측 사이드에 체크박스로 있고, script.js 주석도 중앙 칩을
   「(구) 단일선택 … 현재 미사용(체크박스 필터로 대체)」 이라 적어 두고 있었다.
   규격 부품 .bi-pillbar 자체는 member 화면이 쓰므로 그대로 둔다. */

/* ⑧ 좌측 사이드에서 «고르는 것» 은 네이비다 — 규격안(booking_spec)이 그렇게 그려져 있다
   (.bkm-cn.is-on · .bkm-chip.is-on 둘 다 --navy). 셋 다 --brand-blue 로 칠해져 「튄다」 는 지적을 받았다.
   ⚠ 중앙 상단의 «보기 전환»(.bi-segment 일간·주간·월간)만 brand-blue 로 남는다 —
      「사이드에서 고른다」 와 「보기를 바꾼다」 는 다른 일이고, 규격안도 그렇게 그려져 있다. */
.bi-page .bi-cal__day.is-sel     { background: var(--brand-navy); }
.bi-page .bi-cal__wrow.is-wsel   { background: var(--brand-navy); }
.bi-page .bi-cal__mon.is-sel     { background: var(--brand-navy); border-color: var(--brand-navy); }
.bi-page .bi-bksch-status-chip.is-active {
    background: var(--brand-navy); border-color: var(--brand-navy); color: var(--bg-card);
}

/* ⑨ 보기 탭(일간·주간·월간) 활성색을 «캘린더와 같은 색» 으로 (2026-09-04 사용자 지시).
   §29 는 세그먼트 활성을 brand-blue 로 두지만, 이 화면에서는 좌측 달력·상태 칩이 네이비라
   가운데 탭만 파랑이면 그 하나가 튄다. 예약 두 화면 안에서 «고르는 것» 의 색을 하나로 맞춘다. */
.bi-page .bi-erp-toolbar__right .bi-segment__btn.is-active {
    background: var(--brand-navy); color: var(--bg-card);
}

/* ⑩ 달력에 색 테두리 — 「box-shadow: inset 0 0 0 1.5px 이렇게 색테두리 들어갔으면」 (사용자).
   달을 담은 격자를 한 상자로 두른다. 색은 이미 쓰던 값(오늘 표시 링과 같은 --color-info-200) —
   새 색을 만들지 않는다(styleguide2 §40-19 「상태색은 §3 팔레트에서 고른다」와 같은 생각). */
.bi-page .bi-cal__grid {
    box-shadow: inset 0 0 0 1.5px var(--color-info-200);
    border-radius: var(--radius-lg); padding: var(--space-1_5);
}


/* ─────────────────────────────────────────────────────────────────────────
   §44 · POS 결제·매출등록 — 규격안(pos_spec2.html) 적용 · 1단계
   ───────────────────────────────────────────────────────────────────────── */

/* 결제 대기는 «자리» 가 둘이다 — 넓으면 오른쪽 열, 좁으면 본문 맨 위 띠.
   다른 화면이 아니라 같은 화면의 두 모습이다(사용자 정정 2026-09-07). 기준선 1600. */
@media (min-width: 1600px) {
    .bi-erp-card > .bi-counter-grid { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr) 268px; }
    /* 세로로 쌓아 대기 손님이 여럿 보이게 — 가로 스크롤이 아니라 세로 목록이다 */
    .bi-counter-col--queue .bi-counter-queue {
        flex-direction: column; overflow-x: visible; overflow-y: auto; max-height: 620px;
    }
    .bi-counter-col--queue .bi-counter-qcard { width: 100%; }
}
@media (max-width: 1599px) {
    /* 좁으면 셋을 나란히 못 둔다 — 대기열만 맨 위로 올리고 두 칸 폭을 다 쓴다.
       ⚠ 왼쪽 세로선(.bi-counter-col + .bi-counter-col)이 따라오므로 그쪽을 끄고 아래선으로 바꾼다. */
    .bi-erp-card > .bi-counter-grid > .bi-counter-col--queue {
        order: -1; grid-column: 1 / -1;
        border-left: 0; border-bottom: 1px solid var(--border-base);
    }
}
/* 대기열 칸은 카드 안이라 둘레를 갖지 않는다(§40-2 — 카드 안에서는 선으로 나눈다).
   구 위치에서 갖고 있던 아래선은 이제 열 자신이 긋는다. */
.bi-erp-card .bi-counter-col--queue .bi-counter-queue-box { border-bottom: 0; }

/* 268 열에서 제목이 두 줄로 접혔다 — 「결제 대기」 한 줄 + 건수는 «배지» 로.
   규격안(pos_spec2 §1)의 «🕐 결제 대기 3» 과 같은 모양. */
.bi-counter-queue-box .bi-counter-queue-title { white-space: nowrap; text-transform: none; letter-spacing: 0; }
.bi-counter-queue-box .bi-counter-queue-meta {
    background: var(--color-danger-100); color: var(--color-danger-700);
    border-radius: var(--radius-full); padding: var(--space-0_5) var(--space-2);
    font-size: var(--fs-2xs); font-weight: var(--fw-extrabold); line-height: 1.5;
}


/* §44 · 2단계 — 우측 패널 (pos_spec2 §2·§6) */

/* 목록 칸은 «3줄» 을 기준으로 높이를 고정한다(사용자 지시 2026-09-07).
   실측 한 줄 47 × 3 = 141 + 줄마다 아래 구분선 3 = 144.
   왜 고정인가 — 아래가 «합계 → 결제수단 → 결제완료» 다. 목록이 늘었다 줄었다 하면
   버튼 자리가 움직이고, 계산대에서 버튼이 움직이면 잘못 누른다. */
/* ⚠ 이 목록은 flex:1 이라 «칸을 채우는» 쪽이었다 — height 를 줘도 flex 가 이긴다.
   높이를 못박으려면 flex 를 꺼야 한다. 그리고 패널도 늘어나지 않게 한다. */
.bi-bs-info-card .bi-bs-tab-panels { flex: none; }
.bi-bs-info-card .bi-bs-info-list { flex: 0 0 144px; height: 144px; overflow-y: auto; }
/* ⚠ 형제 선택자(li + li)로 그으면 «1개일 때 줄이 없다».
   줄마다 «아래» 선을 그어 한 줄만 있어도 칸이 목록으로 읽히게 한다(사용자 지시). */
.bi-bs-info-card .bi-bs-info-list > li { border-bottom: 1px solid var(--border-light); }
.bi-bs-info-card .bi-bs-info-list > li.bi-bs-empty-state { border-bottom: 0; height: 100%; }

/* 매출 메모 — 탭에서 내려온 고정 칸 */
/* ⚠ 새 클래스를 만들려다 SPEC-UNSHOWN 에 걸렸다 — 이미 있는 규격으로 쓴다.
   .bi-counter-cust-body = 여백 20 + 세로 스택. 딱 그 모양이다. */
.bi-bs-info-card > .bi-counter-cust-body { gap: var(--space-1_5); padding: var(--space-3) var(--space-5) var(--space-5); }
.bi-bs-info-card .bi-counter-memo-ta { min-height: 62px; }


/* §44 · 3~6단계 (pos_spec2 §5·§8) */

/* 6 · 진행 표시 — 지나온 칸은 파랑 배지, 지금 칸은 회색 배지. 사이는 화살표 없이 간격으로. */
.bi-bs-counter .bi-erp-title__sub { display: inline-flex; align-items: center; gap: var(--space-1_5); }
.bi-bs-counter .bi-erp-title__sub .bi-badge i { font-size: var(--fs-2xs); margin-right: var(--space-0_5); }

/* 5 · 「＋시술/상품 추가」 — §12 축1: primary(브랜드블루)는 화면에 1개 = 결제완료.
   이 버튼은 «워크플로 반복 액션» 이라 네이비다(pos_spec2 §4). */
.bi-bs-counter #product_add.bi-btn--primary {
    background: var(--brand-navy); border-color: var(--brand-navy); color: var(--bg-card);
}
.bi-bs-counter #product_add.bi-btn--primary:hover { background: var(--brand-navy-hover); border-color: var(--brand-navy-hover); }

/* 5 · 「못 쓰는」 상태 — opacity 로 흐리면 «색이 옅은 것» 과 구분이 안 된다(N Pay 초록이 특히).
   회색으로 갈아입혀 «지금은 아니다» 를 분명히 한다(pos_spec2 §5). */
.bi-bs-counter .bi-counter-pay-btn:disabled,
.bi-bs-counter .bi-counter-pay-btn--inactive {
    opacity: 1; background: var(--bg-input); border-color: var(--border-base);
    color: var(--txt-disabled); cursor: not-allowed;
}
.bi-bs-counter .bi-counter-pay-btn:disabled i,
.bi-bs-counter .bi-counter-pay-btn--inactive i { color: var(--txt-disabled); }
.bi-bs-counter .bi-bs-dock-pay:disabled {
    opacity: 1; background: var(--txt-disabled); border-color: var(--txt-disabled); color: var(--bg-card); cursor: not-allowed;
}
.bi-bs-counter .bi-bs-dock-close:disabled {
    opacity: 1; background: var(--bg-input); border-color: var(--border-base); color: var(--txt-disabled); cursor: not-allowed;
}

/* 4 · 내역 행 — 마크업은 이미 규격 모양이다(분류 배지·수량 스테퍼·할인 버튼).
   어긋난 것은 «칩 모양» 뿐이라 그것만 맞춘다. */
.bi-bs-counter .bi-bs-pro-qty {
    border: 1px solid var(--border-base); border-radius: var(--radius-lg); overflow: hidden; gap: 0; height: 32px;
}
.bi-bs-counter .bi-bs-pro-qty .bi-bs-pro-qty-btn { width: 30px; border: 0; background: var(--bg-input); color: var(--txt-muted); }
.bi-bs-counter .bi-bs-pro-qty .bi-bs-pro-input--qty {
    width: 36px; border: 0; border-left: 1px solid var(--border-light); border-right: 1px solid var(--border-light);
    border-radius: 0; text-align: center;
}
/* 할인 — 없으면 흰 칩(할인추가), 값이 있으면 빨강 칩. 값 유무는 JS 가 is-on 으로 표시한다. */
.bi-bs-counter .bi-bs-pro-disc-btn {
    min-width: 88px; height: 32px; border-radius: var(--radius-lg);
    border: 1px solid var(--border-base); background: var(--bg-card); color: var(--txt-secondary);
    font-size: var(--fs-sm); font-weight: var(--fw-bold);
}
.bi-bs-counter .bi-bs-pro-disc-btn.is-on {
    background: var(--color-danger-50); border-color: var(--color-danger-200); color: var(--color-danger-600);
    font-weight: var(--fw-extrabold);
}

/* ⚠ 카드가 «내용보다 작아» 잘렸다 — 레이아웃 검사가 「깨짐 427 > 340」 으로 잡았다.
   목록을 144 로 못박고 매출 메모를 아래로 내리면서 카드가 필요한 높이가 늘었는데,
   카드는 열이 남겨 준 만큼만 갖고 overflow:hidden 이라 아래가 잘렸다.
   → 이 카드는 «내용만큼» 갖게 한다(열은 세로로 늘어나도 된다). 메모 칸 여백도 조금 줄인다. */
.bi-bs-counter .bi-bs-info-card { flex: 0 0 auto; overflow: visible; }
.bi-bs-info-card > .bi-counter-cust-body { padding: var(--space-2_5) var(--space-5) var(--space-4); }


/* §44 · 고객 정보 세 줄 (pos_spec2 §1) — 기존 2단 배치를 규격안 배치로 덮는다. */
.bi-bs-counter .bi-counter-cust-body .bi-write-row { gap: var(--space-4); margin-bottom: 0; }
.bi-bs-counter .bi-counter-cust-body .bi-write-field { flex: 1 1 0; min-width: 0; }
.bi-bs-counter .bi-counter-cust-body .bi-write-field--wide { flex: 2 1 0; }
.bi-bs-counter .bi-bs-field--sex { flex: 0 0 168px; }
/* 검색 버튼은 입력 오른쪽에 붙는 «네모» 다(규격안). 입력의 오른쪽 모서리를 펴서 한 덩어리로. */
.bi-bs-counter .bi-counter-cust-body .bi-row--gap-0 { gap: var(--space-2); }
/* ⚠ 규격안 그림은 42 였지만 §12-4 버튼 사다리(48·32·27·22)에 42 는 없다 —
   검사가 「커짐」 으로 잡았다. 입력(.bi-input--md = 40)에 가장 가까운 «사다리 안» 값은 32 지만
   그러면 입력보다 작아 어긋나 보인다. → 입력을 48 로 올려 버튼과 같은 칸에 세운다. */
.bi-bs-counter .bi-counter-cust-body .bi-input--md,
.bi-bs-counter .bi-counter-cust-body .bi-counter-select { height: 48px; }
.bi-bs-counter .bi-counter-cust-body .bi-counter-search-btn {
    flex: 0 0 48px; width: 48px; height: 48px; border-radius: var(--radius-lg);
    border: 1px solid var(--border-base); background: var(--bg-card); color: var(--txt-muted);
}
.bi-bs-counter .bi-bs-sex-group { height: 48px; }

/* §44 · 마무리 — 규격안과 남아 있던 두 곳 */
/* 성별 — 규격안은 고른 쪽이 «네이비 채움 + 흰 글자» 다(연회색 + 파란 글자였다). */
.bi-bs-counter input[type="radio"].bi-bs-sex-r:checked + label.bi-bs-sex-lbl {
    background: var(--brand-navy); color: var(--bg-card); border-color: var(--brand-navy);
}
/* 매출 메모 — 최근 내역 바로 밑에 «붙어» 경계가 겹쳐 보였다. 위에 선 하나로 가르고 아래 숨을 준다. */
.bi-bs-info-card > .bi-counter-cust-body {
    border-top: 1px solid var(--border-base); padding: var(--space-4) var(--space-5) var(--space-5);
}


/* §44 · 규격안 «모양» (pos_spec2 §1) — bs1.png 대조로 남아 있던 다섯 */

/* ⚠ 「전체 영역 구분하는 틀부터 다르다」(사용자 2026-09-07). 내가 열마다 테두리를 주고
   사이를 벌려 «떨어진 카드 셋» 으로 만들었는데, 규격안은 그 반대다 —
   «흰 판 하나» 를 세로 실선으로 나누고, 테두리 카드는 «좌측 열 안» 의 둘뿐이다.
   → 판을 하나로 되돌리고(§40-2 대로 선으로 나눔), 테두리는 좌측 두 블록에만 남긴다. */
.bi-bs-counter .bi-erp-card > .bi-counter-grid { gap: 0; padding: 0; align-items: stretch; }
.bi-bs-counter .bi-erp-card > .bi-counter-grid > .bi-counter-col + .bi-counter-col {
    border-left: 1px solid var(--border-base);
}
/* 좌측 열만 «카드 둘» — 열 안쪽에 숨을 주고 블록마다 테두리를 준다 */
.bi-bs-counter .bi-erp-card > .bi-counter-grid > .bi-counter-col:first-child {
    padding: var(--space-4); gap: var(--space-4);
}
.bi-bs-counter .bi-erp-card > .bi-counter-grid > .bi-counter-col:first-child > .bi-counter-card {
    border: 1px solid var(--border-base); border-radius: var(--radius-xl);
    background: var(--bg-card); box-shadow: none;
}
.bi-bs-counter .bi-erp-card > .bi-counter-grid > .bi-counter-col:first-child > * + * { border-top: 0; }
/* 우측 결제 열·대기 열은 카드가 아니라 «판의 한 칸» 이다 — 둘레 없음 */
.bi-bs-counter .bi-erp-card > .bi-counter-grid > .bi-counter-col:not(:first-child) > * + * {
    border-top: 1px solid var(--border-light);
}
.bi-bs-counter .bi-counter-card__head { background: var(--bg-card); }

/* ③ 진행 표시 — 동그란 배지 + 사이 연결선 */
.bi-bs-counter .bi-erp-title__sub .bi-badge {
    width: 20px; height: 20px; padding: 0; border-radius: var(--radius-full);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: var(--fs-2xs); font-weight: var(--fw-extrabold);
}
.bi-bs-counter .bi-erp-title__sub .bi-erp-toolbar__div { width: 22px; height: 1px; background: var(--border-base); margin: 0 var(--space-1); }
/* ⚠ 단계 이름에 새 클래스를 만들려다 SPEC-UNSHOWN 에 걸렸다 — 글자는 클래스 없이 두고
   지금 단계만 <b> 로 굵게 한다. 색은 이 줄 안에서만 준다. */
.bi-bs-counter .bi-erp-title__sub { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--txt-muted); }
.bi-bs-counter .bi-erp-title__sub b { color: var(--txt-primary); font-weight: var(--fw-extrabold); }

/* ⑤ 매출일자 칩 — 툴바 오른쪽으로 옮겼다. 카드 둘레는 벗고 한 줄로. */
.bi-bs-counter .bi-erp-toolbar__right .bi-counter-datebar {
    border: 0; background: transparent; padding: 0; gap: var(--space-2);
}

/* §44 · 내역 표 — 규격안은 «No.» 열이 보인다(지금은 폭이 0 이라 안 보였다) */
.bi-bs-counter .bi-bs-pro-th--no { width: 46px; }
.bi-bs-counter .bi-bs-pro-td--no { text-align: center; }
.bi-bs-counter .bi-bs-pro-rownum { color: var(--txt-disabled); font-size: var(--fs-sm); }


/* §44 · 「규격안대로인가」 검사(qc.mjs spec · spec_match/buysell.mjs)가 짚은 자리들 */

/* 1 · No. 열은 10371줄에서 display:none 이었다 — 규격안에는 있다. 되살린다. */
.bi-bs-counter .bi-bs-pro-table .bi-bs-pro-th--no,
.bi-bs-counter .bi-bs-pro-table .bi-bs-pro-td--no { display: table-cell; width: 46px; text-align: center; }

/* 2 · 할인은 «직접 입력» 이 되어야 한다(규격안 칩 안 숫자). 값이 있으면 빨강. */
.bi-bs-counter .bi-bs-pro-disc-in {
    width: 92px; height: 32px; text-align: center; border-radius: var(--radius-lg);
    border: 1px solid var(--border-base); background: var(--bg-card);
    font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--txt-secondary);
}
.bi-bs-counter .bi-bs-pro-disc-in.is-on {
    background: var(--color-danger-50); border-color: var(--color-danger-200);
    color: var(--color-danger-600); font-weight: var(--fw-extrabold);
}

/* 3 · 매출 메모가 아래 합계와 겹쳤다 — 카드 안에서 자기 자리를 갖게 한다. */
.bi-bs-info-card > .bi-counter-cust-body { flex: 0 0 auto; }

/* 4 · 수단별 «×» 취소 — 값이 있는 줄에만 보인다(JS 가 is-on 을 붙인다). */
.bi-bs-counter .bi-bs-dock-x {
    width: 17px; height: 17px; margin-left: var(--space-2); border: 1px solid var(--border-base);
    border-radius: var(--radius-xs); background: var(--bg-card); color: var(--txt-disabled);
    font-size: var(--fs-3xs, 10px); line-height: 1; display: none; align-items: center; justify-content: center;
}
.bi-bs-counter .bi-bs-dock-row.is-on .bi-bs-dock-x { display: inline-flex; }
.bi-bs-counter .bi-bs-dock-x:hover { color: var(--color-danger-600); border-color: var(--color-danger-200); }

/* 5 · 총 결제 금액 */
/* ⚠ 규격안 그림은 31 이었지만 sg2 글자 사다리에 31 은 없다(11·12·13·14·16·18·20·24·30).
   sg2 가 유일 규격이고 규격안은 그 파생이다 → 가장 가까운 30 으로 내린다(probe_break 「커짐」). */
.bi-bs-counter .bi-counter-final-amt { font-size: 30px; }

/* 6 · 결제수단 «고른 표시» — 금액이 잡힌 수단에 테두리 네이비 + 초록 체크 */
.bi-bs-counter .bi-counter-pay-btn.is-on { border-color: var(--brand-navy); color: var(--brand-navy); }
.bi-bs-counter .bi-counter-pay-btn.is-on::after {
    content: '\f00c'; font-family: 'Font Awesome 5 Pro'; font-weight: 900;
    position: absolute; right: 8px; top: 6px; font-size: var(--fs-2xs); color: var(--color-npay);
}
.bi-bs-counter .bi-counter-pay-btn { position: relative; }

/* ⚠ 카드가 flex:0 0 auto 인데도 340 이었다 — 어딘가 «높이» 가 정해져 있어 매출 메모가
   카드 밖으로 삐져나와 도크와 겹쳤다(규격 일치 검사 「매출 메모 겹침」). 높이를 내용에 맡긴다. */
.bi-bs-counter .bi-bs-info-card { height: auto; min-height: 0; }


/* 규격안(buysell1.png) — 고객메모는 «흰 상자» 다. 공통 .bi-counter-consult 는 노란 상자이고
   booking_buysell·report_buy_appear 도 함께 쓰므로 정의를 고치지 않고 이 화면에서만 덮는다(§4). */
.bi-bs-counter textarea.bi-counter-consult {
    background: var(--bg-card); border-color: var(--cc-line); color: var(--txt-secondary);
    min-height: 52px;
}
.bi-bs-counter textarea.bi-counter-consult:focus { border-color: var(--brand-navy); }
/* 규격안 — 「결제수단」 라벨은 총액과 버튼 사이에서 숨을 준다 */
.bi-bs-counter .bi-counter-pay > .bi-write-label { margin-bottom: calc(-1 * var(--space-1)); }

/* ─────────────────────────────────────────────────────────────────────────
   §44-2 · 규격안(buysell1.png)과 «잘라 나란히» 대조해 잰 열 자리 (2026-09-07)
   ───────────────────────────────────────────────────────────────────────── */

/* 10 · 뿌리 원인 — 가운데 열이 454 였다. 규격안은 350(대기 250). 열이 넓으니 버튼이 다 커 보였다. */
@media (min-width: 1600px) {
    .bi-bs-counter .bi-erp-card > .bi-counter-grid { grid-template-columns: minmax(0, 1fr) 350px 250px; }
}

/* 1 · 진행 표시 — 규격안은 «채운 원». 지나온 칸은 파랑, 지금 칸은 네이비. */
.bi-bs-counter .bi-erp-title__sub { color: var(--txt-secondary); font-size: var(--fs-sm); }
.bi-bs-counter .bi-erp-title__sub .bi-badge {
    background: var(--brand-blue); color: var(--bg-card); border-color: transparent;
    width: 18px; height: 18px; padding: 0; font-size: var(--fs-2xs); font-weight: var(--fw-bold);
}
.bi-bs-counter .bi-erp-title__sub .bi-badge:nth-of-type(3) { background: var(--brand-navy); }
.bi-bs-counter .bi-erp-title__sub b { color: var(--txt-primary); }

/* 2 · 매출일자 — 달력 아이콘 + 날짜, 옅은 파란 칩 하나 */
.bi-bs-counter .bi-erp-toolbar__right .bi-counter-datebar {
    background: var(--color-info-50); border: 0; border-radius: var(--radius-lg);
    padding: 0 var(--space-3); height: 32px; width: auto;
}
.bi-bs-counter .bi-counter-datebar__l { gap: var(--space-2); height: 32px; }
.bi-bs-counter .bi-counter-datebar__close {
    background: none; border: 0; padding: 0; height: auto; color: var(--brand-navy);
}
.bi-bs-counter .bi-bs-datebar-date {
    font-size: var(--fs-md); font-weight: var(--fw-extrabold); color: var(--brand-navy);
    background: none; border: 0; width: 96px; padding: 0;
}

/* 3 · 새 전표 — 매출일자 왼쪽, 같은 높이 */
.bi-bs-counter .bi-erp-toolbar__right #bs_new_slip { height: 32px; border-radius: var(--radius-lg); }

/* 4 · 성별 — 규격안은 «네모 두 칸». 회색 트랙 알약이 아니다. */
.bi-bs-counter .bi-bs-sex-group {
    width: 200px; background: var(--bg-card); border: 1px solid var(--border-base);
    border-radius: var(--radius-md); padding: 0; overflow: hidden;
}
.bi-bs-counter .bi-bs-sex-lbl {
    flex: 1; height: 46px; border-radius: 0; font-size: var(--fs-md); font-weight: var(--fw-bold);
}
.bi-bs-counter .bi-bs-sex-r:checked + .bi-bs-sex-lbl { box-shadow: none; }

/* 8 · 탭 — 규격안은 «카드 탭»(옅은 트랙 위 흰 카드), 밑줄 탭이 아니다 */
.bi-bs-counter .bi-bs-tab-hdr {
    background: var(--bg-section); border-bottom: 1px solid var(--border-light);
    padding: var(--space-2); gap: var(--space-2);
}
.bi-bs-counter .bi-bs-tab-lbl {
    height: 40px; border-radius: var(--radius-lg); border: 1px solid transparent;
    background: none; color: var(--txt-disabled); font-weight: var(--fw-bold);
}
/* ⚠ 라디오는 헤더의 «형제» 이지 바로 앞이 아니다 — + 로는 절대 안 걸린다.
   기존 규칙(10318줄)이 쓰는 ~ + [for] 짝을 그대로 따른다. */
.bi-bs-counter #itab_hist:checked ~ .bi-bs-tab-hdr .bi-bs-tab-lbl[for="itab_hist"],
.bi-bs-counter #itab_pkg:checked  ~ .bi-bs-tab-hdr .bi-bs-tab-lbl[for="itab_pkg"] {
    background: var(--bg-card); border-color: var(--border-base); color: var(--brand-navy);
}
/* 8-b · 목록 줄 — 규격안은 «작은 회색 날짜 / 굵은 이름 … 오른쪽 금액» */
.bi-bs-counter .bi-counter-hcard { padding: var(--space-3) var(--space-4); }
.bi-bs-counter .bi-counter-hcard__top {
    font-size: var(--fs-xs); color: var(--txt-disabled); font-weight: var(--fw-medium);
    margin-bottom: var(--space-1);
}
.bi-bs-counter .bi-counter-hcard__line { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.bi-bs-counter .bi-counter-hcard__name { font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--txt-primary); margin: 0; }
.bi-bs-counter .bi-counter-hcard__amt { font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--txt-secondary); margin: 0; white-space: nowrap; }

/* 9 · 합계 — 규격안은 수단마다 아이콘이 있고 줄이 촘촘하며 값이 굵다 */
.bi-bs-counter .bi-bs-dock-row { min-height: 28px; font-size: var(--fs-md); }
.bi-bs-counter .bi-bs-dock-row > span:first-child { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--txt-secondary); }
.bi-bs-counter .bi-bs-dock-row > span:first-child > i { width: 15px; text-align: center; color: var(--txt-disabled); }
.bi-bs-counter .bi-bs-dock-row > span:last-of-type { font-weight: var(--fw-extrabold); color: var(--txt-primary); }
.bi-bs-counter .bi-bs-dock-row--grand { font-size: var(--fs-lg); }
.bi-bs-counter .bi-bs-dock-row--grand > span:first-child { color: var(--txt-primary); font-weight: var(--fw-extrabold); }

/* 5 · 매출액 / 합계 — 규격안은 «회색 매출액 / 굵은 합계». 폭을 못 받아 10px 로 눌려 있었다. */
.bi-bs-counter .bi-bs-pro-td--total { text-align: right; }
.bi-bs-counter .bi-bs-pro-total-wrap {
    display: flex; align-items: baseline; justify-content: flex-end; gap: var(--space-1_5);
}
.bi-bs-counter .bi-bs-pro-total-wrap .bi-bs-pro-input {
    flex: 0 1 auto; width: 66px; min-width: 0; text-align: right; padding: 0;
    background: none; border: 0;
}
.bi-bs-counter .bi-bs-pro-total-wrap input[name='input_tdesiner[]'] {
    color: var(--txt-disabled); font-size: var(--fs-sm); font-weight: var(--fw-medium);
}
.bi-bs-counter .bi-bs-pro-total-wrap .bi-bs-pro-input--total {
    color: var(--txt-primary); font-size: var(--fs-md); font-weight: var(--fw-extrabold); width: 76px;
}

/* 6 · 세부 분류 — 규격안은 배지가 아니라 상품명 아래 작은 회색 글 */
.bi-bs-counter .bi-bs-pro-td--pro .bi-bs-pro-cat-badge2 {
    display: block; background: none; border: 0; padding: 0; margin-top: var(--space-0_5);
    font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--txt-disabled);
    cursor: pointer;
}
.bi-bs-counter .bi-bs-pro-td--pro .bi-bs-pro-cat-badge2:empty { display: none; }
.bi-bs-counter .bi-bs-pro-input--pro { font-weight: var(--fw-bold); }
/* 6-b · 규격안은 분류·상품명이 «왼쪽» 붙임이다. 지금은 가운데라 이름이 안쪽으로 밀려 있었다. */
.bi-bs-counter .bi-bs-pro-th--proc, .bi-bs-counter .bi-bs-pro-td--proc,
.bi-bs-counter .bi-bs-pro-th--pro,  .bi-bs-counter .bi-bs-pro-td--pro { text-align: left; }
.bi-bs-counter .bi-bs-pro-td--pro .bi-bs-pro-input--pro { text-align: left; padding-left: 0; }

/* 6-c · 분류 칸이 150 이라 상품명이 안쪽으로 밀렸다 — 규격안은 배지 하나 폭(70) 이면 된다 */
.bi-bs-counter .bi-bs-pro-th--proc { width: 70px; }
/* 밑줄은 카드 탭에 없다 — 기존 규칙(10318)이 그어 둔 것을 이 화면에서만 끈다 */
.bi-bs-counter .bi-bs-tab-hdr .bi-bs-tab-lbl { border-bottom-color: transparent; box-shadow: none; }
.bi-bs-counter #itab_hist:checked ~ .bi-bs-tab-hdr .bi-bs-tab-lbl[for="itab_hist"],
.bi-bs-counter #itab_pkg:checked  ~ .bi-bs-tab-hdr .bi-bs-tab-lbl[for="itab_pkg"] {
    border-color: var(--border-base); box-shadow: var(--shadow-xs);
}
/* 5-b · «매출액» 과 «/» 를 10367줄에서 display:none 으로 숨겨 두고 있었다 — No. 열과 같은 꼴이다.
   규격안은 「54,000 / 162,000」 둘 다 보여 준다(사용자 5번). 정의는 두고 이 화면에서만 되살린다. */
.bi-bs-counter .bi-bs-pro-total-wrap input[name='input_tdesiner[]'],
.bi-bs-counter .bi-bs-pro-total-wrap .bi-bs-pro-total-sep { display: inline-block; }
/* 5-c · 매출액/합계는 «칸» 이 아니라 «글» 이다(규격안). 공통 입력 스킨이 더 세서 상자로 보였다. */
.bi-counter-wrap.bi-bs-counter .bi-bs-pro-total-wrap input[type="text"].bi-bs-pro-input {
    background: none; border-color: transparent; box-shadow: none; padding: 0; height: auto;
}