/* 페이지 크기 정렬 */
html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* 모달(서명 등)이 열릴 때 세로 스크롤바가 사라지며 페이지가 가로로 밀려
   화면이 "뒤틀려" 보이는 현상 방지:
   - 세로 스크롤바 자리를 항상 확보(overflow-y: scroll)해 모달 open/close 시 폭 변화 제거
   - Bootstrap이 body.modal-open에 인라인으로 넣는 스크롤바 폭 보정(padding-right) 무효화 */
html {
    overflow-y: scroll;
}
body.modal-open {
    padding-right: 0 !important;
}

.template-image-container {
    position: relative !important;
    width: 100%;
}

.template-image {
    width: 100%;
    height: auto;
    margin-bottom: 20px;
    border: 1px solid #e3e6f0;
    border-radius: 8px;
    box-shadow: 0 0.15rem 1.75rem rgba(58, 59, 69, 0.15);
    object-fit: contain;
}

/* 오버레이 텍스트 스타일 추가 */
.overlay-text {
    position: absolute;
    color: #000;
    font-family: 'NanumGothic', sans-serif;
    white-space: nowrap;
    pointer-events: none;
    /* z-index 는 1 로 충분하다 — 이 요소의 유일한 역할은 **서식지 이미지 위**에 값·체크마크를 얹는 것이고,
     * 이미지에는 z-index 가 없다. 예전 값 10 은 드롭박스·팝업 같은 다른 레이어와 경쟁해
     * "좌표 체크마크가 드롭박스 위로 보인다"는 신고의 원인이 될 수 있었다(스태킹 컨텍스트에 따라 갈림).
     * 1 로 낮추면 이미지 위 렌더는 그대로이면서 어떤 팝업도 오버레이에 가려지지 않는다. */
    z-index: 1;
    background: transparent;
    padding: 0;
    border-radius: 0;
}

#loadingMessage {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.5);
    color: white;
    padding: 20px;
    border-radius: 10px;
    z-index: 1000;
}

/* 모달 오버레이 - 화면 전체를 덮고 중앙 정렬 */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    display: none; /* 기본적으로 숨김 */
    z-index: 9999;
    
    /* Flexbox를 사용한 중앙 정렬 - 보일 때만 적용 */
    justify-content: center;
    align-items: center;
}

/* 모달이 보일 때 */
.modal-overlay.show {
    display: flex;
}

/* 모달 컨텐츠 */
.password-modal {
    position: relative;
    max-width: 400px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    z-index: 10000;
    
    /* 그림자와 애니메이션 효과 */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    transform: scale(0.7);
    opacity: 0;
    transition: all 0.3s ease;
}

/* 모달이 활성화될 때 애니메이션 */
.modal-overlay.show .password-modal {
    transform: scale(1);
    opacity: 1;
}

/* 모바일 대응 */
@media (max-width: 576px) {
    .password-modal {
        width: 95%;
        margin: 20px;
    }
}

/* ===== 커스텀 셀렉트 드롭다운 (custom-select.js) ===== */
.cs-wrap {
    position: relative;
    width: 100%;
}
/* 원본 select 는 기능 유지를 위해 DOM 에 두되 화면에서 숨김 */
.cs-native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* 닫힌 컨트롤(표시부) - form-select 룩 재사용 + 텍스트 표시 */
.cs-display {
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    min-height: calc(1.5em + 0.75rem + 2px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cs-display:focus {
    outline: none;
    border-color: #696cff;
    box-shadow: 0 0 0 0.2rem rgba(105, 108, 255, 0.25);
}
.cs-display.cs-disabled {
    background-color: #eceef1;
    cursor: not-allowed;
    opacity: 0.7;
}
/* 옵션 팝업 - 둥글고 부드럽게 */
.cs-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #e3e6f0;
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(58, 59, 69, 0.18);
    padding: 6px;
    z-index: 1080;
    max-height: 280px;
    overflow-y: auto;
    display: none;
}
.cs-wrap.open .cs-menu {
    display: block;
    animation: csFade 0.12s ease;
}
@keyframes csFade {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.cs-option {
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9375rem;
    color: #566a7f;
    transition: background-color 0.12s ease, color 0.12s ease;
}
.cs-option:hover {
    background: rgba(105, 108, 255, 0.12);
    color: #696cff;
}
.cs-option.selected {
    background: rgba(105, 108, 255, 0.16);
    color: #696cff;
    font-weight: 600;
}
/* 키보드 활성 항목(감사 M6·A1·A2, 7세션).
 *   `.selected`(=현재 값)와 별개다 — 방향키로 훑는 중인 위치를 가리키고 Enter 에서 값이 된다.
 *   :hover 와 같은 톤이면 둘이 구분되지 않으므로 **왼쪽 막대 + 진한 배경**으로 구별한다.
 *   ⚠ `.selected` 뒤에 두어야 "선택 항목 위에 활성이 있을 때" 활성 표시가 이긴다. */
/* 키보드 방향키 이동 위치 표시(M6). ⚠ `mousemove` 로도 붙으므로 **마우스 오버 시에도 보인다**.
   (2026-07-27 사용자 지시) 왼쪽 두꺼운 선(`box-shadow: inset 3px 0 0`)은 뺀다 — 마우스로 훑을 때
   막대가 계속 따라다녀 거슬린다. 배경 강조만으로도 현재 위치는 충분히 보인다. */
.cs-option.active {
    background: rgba(105, 108, 255, 0.22);
    color: #696cff;
}
/* optgroup 머리글 (2026-08-12 신설 — 그전에는 그룹 이름이 통째로 사라졌다).
 * ⚠ 클릭 대상이 아니다. `.cs-option` 이 아니어야 인덱스 규약(n번째 .cs-option == options[n])이 유지된다. */
.cs-group {
    padding: 8px 10px 4px;
    font-size: 11px;
    font-weight: 700;
    color: #a1acb8;
    letter-spacing: .3px;
    pointer-events: none;
    user-select: none;
}
.cs-group + .cs-option { margin-top: 0; }

/* 스크롤바 둥글게 */
.cs-menu::-webkit-scrollbar { width: 8px; }
.cs-menu::-webkit-scrollbar-thumb { background: #d9dee3; border-radius: 8px; }

/* ===== 템플릿 상세 좌표 테이블 - 열 너비 고정(빈 표 포함 모든 표 정렬 통일) ===== */
table.coord-table { table-layout: fixed; }
table.coord-table th,
table.coord-table td { overflow: hidden; text-overflow: ellipsis; vertical-align: middle; white-space: nowrap; }
/* 드롭다운이 있는 칸만 클리핑 해제 (2026-08-12 사용자 신고 "정렬 옵션박스가 줄 안에서 생기는데?")
 *   위 `overflow:hidden` 은 긴 라벨 말줄임용인데, 커스텀 셀렉트(custom-select.js)의 메뉴가
 *   `.cs-wrap` 기준 absolute 라 **셀 높이에서 잘려** 목록이 한 줄만 보였다(실측 메뉴 60×131 / 셀 60).
 * ⚠ `:has()` 를 쓰지 않고 마크업에 클래스를 붙였다 — 열 순서가 바뀌어도 안 깨지고,
 *   `:has()` 미지원 브라우저에서 조용히 실패하지도 않는다.
 * ⚠ 부모 `.table-responsive` 도 overflow:auto 라 표 **맨 아래 행**에서는 여전히 잘릴 수 있다.
 *   그 대비는 아래 `.coord-table-wrap` 의 하단 여백이다. */
table.coord-table td.coord-cell-dropdown { overflow: visible; }

/* 정렬 드롭다운을 옆 입력칸(크기·X·Y·박스폭)과 같은 치수로 (사용자 지시 2026-08-12
 *   "크기 X좌표 Y좌표 박스폭 입력칸이랑 정렬 입력칸이랑 크기 달라서 좀 그렇네")
 *
 * 왜 어긋나 있었나 (실측)
 *   옆 칸들: form-control-sm → 28.4px 높이 · 글자 12px · 패딩 4/10 · 모서리 4px
 *   정렬   : custom-select.js 가 만드는 `.cs-display` 는 클래스가 `cs-display form-select` 로
 *            **`-sm` 이 안 붙는다** → 38.9px · 글자 15px · 패딩 7/30/7/14 · 모서리 6px.
 *            게다가 `.cs-display{min-height:calc(1.5em + .75rem + 2px)}` 이 높이를 36.5px 로 붙든다.
 * ⚠ `.cs-display` 전역을 건드리지 않는다 — 이 위젯은 신청서 요금제 등 전 화면에서 쓴다.
 *   좌표 표 안에서만 덮어쓴다. */
table.coord-table td.coord-cell-dropdown .cs-wrap { width: 68px; margin: 0 auto; }
table.coord-table td.coord-cell-dropdown .cs-display {
	min-height: 0;                       /* 위 min-height 를 풀어야 28px 로 내려온다 */
	height: 28.4px;
	padding: 4px 22px 4px 10px;          /* 오른쪽은 form-select 화살표 자리 */
	font-size: 12px;
	line-height: 1.2;
	border-radius: 4px;
	background-position: right 6px center;
	background-size: 13px 11px;
}
/* 목록 글자도 같이 줄인다 — 닫힌 컨트롤만 작으면 열었을 때 글자가 커져 튄다.
 * (메뉴는 position:fixed 로 떠도 DOM 상으로는 이 td 안에 그대로 있어 이 선택자가 닿는다) */
table.coord-table td.coord-cell-dropdown .cs-option { font-size: 12px; padding: 4px 8px; }
table.coord-table th:nth-child(1),
table.coord-table td:nth-child(1) { width: 72px; }    /* No */
/* 입력구분(2번째)은 고정폭 없이 남는 공간을 차지 → 창 크기에 따라 늘어나고 줄어듦 */
table.coord-table th:nth-child(3),
table.coord-table td:nth-child(3) { width: 96px; }    /* 타입 */
table.coord-table th:nth-child(4),
table.coord-table td:nth-child(4) { width: 80px; }    /* 크기 */
table.coord-table th:nth-child(5),
table.coord-table td:nth-child(5),
table.coord-table th:nth-child(6),
table.coord-table td:nth-child(6) { width: 100px; }   /* X좌표 / Y좌표 */
table.coord-table th:nth-child(7),
table.coord-table td:nth-child(7) { width: 90px; }    /* 페이지 */
table.coord-table th:nth-child(8),
table.coord-table td:nth-child(8),
table.coord-table th:nth-child(9),
table.coord-table td:nth-child(9) { width: 124px; }   /* 수정일자 / 등록일자 */
table.coord-table th:nth-child(10),
table.coord-table td:nth-child(10) { width: 64px; }   /* 관리 */

/* 서명 캔버스 커서: 펜 굵기만한 검정 원 */
#signatureCanvas {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Ccircle cx='5' cy='5' r='2.5' fill='black'/%3E%3C/svg%3E") 5 5, crosshair !important;
    /* 태블릿 펜/손가락 서명 중 화면이 스크롤·확대되지 않게 (2026-07-26).
       손가락은 touchmove 의 preventDefault 로 막히지만, **펜(스타일러스)은 touch 이벤트를
       발생시키지 않는다**(포인터 + 마우스 호환 이벤트만). 그래서 CSS 로 제스처를 끊어야
       펜 드래그가 팬/줌으로 소비되지 않는다. 입력 제스처 전용 속성이라 렌더에는 영향 없음. */
    touch-action: none;
}

/* 주소 입력 필드의 배경을 흰색으로 유지 */
.address-input {
    background-color: #ffffff !important;
    cursor: pointer;
}

.address-input:focus {
    background-color: #ffffff !important;
    box-shadow: 0 0 0 0.2rem rgba(105, 108, 255, 0.25);
}

.address-input:read-only {
    background-color: #ffffff !important;
    opacity: 1;
}
/* 비활성 입력칸(자필기재 · 미사용 항목)의 글자를 진하게 (2026-07-27 사용자 지시
   "인풋값이 사용안하거나 자필기재부분이라서 회색값들어가는애들 회색을 좀더 진하게 바꿔").
   실측 대비: 값 #697a8d/배경 #eceef1 = 3.79, 플레이스홀더 `자필기재` #8a94a6 = **2.63**.
   → 값 4.5 이상, 플레이스홀더도 읽히게 올린다. 배경(#eceef1)은 그대로 둔다 —
     "비활성"이라는 신호는 배경이 이미 충분히 주고 있고, 문제는 글자가 안 읽히는 것뿐이다. */
#dataForm input:disabled,
#dataForm select:disabled,
#dataForm textarea:disabled,
#dataForm input[readonly].form-control:disabled {
    color: #4b5563;
}
#dataForm input:disabled::placeholder,
#dataForm textarea:disabled::placeholder {
    color: #5b6b7c;
    opacity: 1;   /* Firefox 는 기본 opacity 를 낮춘다 — 색만 바꾸면 여전히 흐리다 */
}
/* 판매자 서명 재사용 체크박스가 로그인 만료 등으로 잠긴 상태 — 자리는 지키되 잠김을 드러낸다. */
.sig-reuse-blocked { opacity: 0.55; cursor: not-allowed; }

/* 사이드바 로고 아래 로그인 정보(판매점명/접속자) */
.login-info {
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    font-size: 0.8125rem;
    line-height: 1.3;
}
.login-info .bx {
    flex: 0 0 auto;
    font-size: 1rem;
}

/* ────────────────────────────────────────────────────────────────
 * 글자색 2단계 어둡게 (사용자 지시 2026-07-29
 *   "전체적으로 글자색을 한단계 어둡게 해줘" → "아니 2단계 어둡게 해줘 지금 회색글자들")
 *
 * 이 파일은 **전 화면이 로드**한다(신청서 9종 + 관리자 9종). 그래서 여기에 둔다 —
 * ux-a11y.css 는 base.html(신청서)만 싣기 때문에 "전체적으로" 가 안 된다.
 *
 * 이 프로젝트의 회색 사다리(새 색을 만들지 않는다는 제약 아래 쓰는 5단계):
 *     #a1acb8 (2.06) → #8a94a6 (3.06) → #697a8d (4.40) → #566a7f (5.58) → #233446 (11.7)
 *   실측한 현행 값: body·td·.menu-link = #697a8d · .text-muted·.form-label·th = #566a7f
 *
 * 2단계 적용:
 *     본문 계열  #697a8d → **#233446**   (4.40 → 11.7:1)
 *     muted 계열 #a1acb8 → **#566a7f**   (2.06 → 5.58:1, 신청서는 ux-a11y 가 이미 이 값)
 *   ⚠ muted 를 본문과 같은 #233446 으로 올리지 않는다 — 그러면 「본문 vs 보조」 위계가 사라진다.
 *
 * ⚠ 미리보기 오버레이(`.overlay-text`)는 `color:#000` 으로 **명시**돼 있어 이 변경과 무관하다
 *   (실측 확인). 상속을 탔다면 미리보기 글자색이 바뀌어 **미리보기==PDF 불변식**이 깨졌을 것이다.
 * ⚠ 링크·활성 메뉴(#696cff)·상태 배지 색은 건드리지 않는다 — 의미를 나르는 색이다.
 * ⚠ 한 단계로 되돌리려면 아래 `#233446` 을 `#566a7f` 로 바꾸면 된다(그게 「한단계」였다).
 *
 * ⚠ **`!important` 가 필요한 이유**(처음에 빼고 넣었다가 실측에서 전혀 안 먹었다):
 *   이 프로젝트는 프로젝트 CSS 가 테마(core.css·theme-default.css)보다 **먼저** 로드된다.
 *   그래서 테마의 `body { color:#697a8d }` 와 특이도가 같으면 **순서로 진다**(실측: 변경 후에도 #697a8d).
 *   `.menu-link` 는 테마가 `.bg-menu-theme .menu-inner .menu-item .menu-link` 처럼 훨씬 높은
 *   특이도로 잡고 있어 선택자를 아무리 다듬어도 이기기 어렵다 → 여기서는 `!important` 가 정답이다.
 *   (navbar-responsive.css 도 같은 이유로 `#layout-navbar` 접두 + !important 규약을 쓴다.)
 * ──────────────────────────────────────────────────────────────── */
body {
    color: #233446 !important;
}

/* 테마가 따로 지정하는 것들 — 상속만으로는 안 바뀐다(실측: td #697a8d · .menu-link #697a8d). */
body .table,
body .table > :not(caption) > * > *,
body .menu-link {
    color: #233446 !important;
}

/* 보조 텍스트 — 본문보다는 연하게 두되 회색 사다리에서 2단계 올린다. */
body .text-muted {
    color: #566a7f !important;
}

/* ⚠ 예외 처리는 **딱 두 줄이면 된다.**
 *   `body { color: … !important }` 는 body **자기 자신**의 경쟁에만 이긴다 — 자식이 자기 color 를
 *   선언하고 있으면(링크·`.btn`·`.badge`·`.text-primary`·`.overlay-text`) 상속이 일어나지 않으므로
 *   그대로 유지된다. 그래서 그것들을 되돌리는 규칙은 필요 없다.
 *   (한때 `revert-layer` 로 되돌리려 했는데 **틀린 접근**이었다 — @layer 가 없으면 `revert` 처럼
 *    동작해 테마 값이 아니라 **브라우저 기본값**으로 돌아간다. 링크 색이 UA 기본으로 튄다.)
 *
 *   실제로 되돌려야 하는 것은 위에서 `!important` 로 **직접 덮은** 선택자와 겹치는 것뿐이다: */
body .overlay-text { color: #000 !important; }            /* 미리보기==PDF 불변식(재확인용 못박기) */
body .menu-item.active > .menu-link { color: #696cff !important; }   /* 현재 위치 표시(감사 M5·A5) */

/* ────────────────────────────────────────────────────────────────
 * 우하단 플로팅 버튼 5개 — 시각 통일 (사용자 지적 2026-07-29 "그 버튼마다 디자인이 다 다른거 같은데")
 *
 * 통일 전 실측(1440px):
 *   출력      #696cff 채움 / 흰 글자 / 테두리 1px / radius **6px**  / shadow 없음 / **38.9px**
 *   다운로드   흰 α.92 / 보라 글자 / 2px α.7      / radius 12px    / shadow-lg  / 43.9px
 *   APP 접수  흰 α.92 / 보라 글자 / 2px α.7      / radius 12px    / shadow-lg  / 43.9px
 *   임시저장   #696cff α.92 채움 / 흰 글자 / **테두리 0** / radius 12px / shadow-lg / **39.9px**
 *   불러오기   흰 α.92 / 보라 글자 / 2px α.7      / radius 12px    / shadow-lg  / 43.9px
 *   → radius 2종 · 높이 3종(38.9 / 39.9 / 43.9) · 그림자 유무가 섞여 있었다.
 *
 * 원인은 출처가 셋이었다는 것 —
 *   ① 출력·다운로드는 Bootstrap `btn-primary`/`btn-outline-primary` 원본
 *   ② 임시저장·불러오기는 마크업에 박힌 인라인 style
 *   ③ 다운로드·APP접수는 ②를 복사한 것
 * 그래서 **클래스 2종으로 모으고 인라인 style 을 걷어냈다.** 앞으로 이 스택의 모양은 여기 한 곳에서 바뀐다
 * (서식지 9종 × 5버튼 = 45개 인라인 블록을 다시 찾아다니지 않는다).
 *
 * ⚠ 높이를 맞추는 핵심은 **채움 변형에도 2px 투명 테두리**를 주는 것이다. 테두리 유무가 곧 4px 차이였다.
 * ⚠ 채움/외곽선 배정은 **바꾸지 않았다** — 출력·임시저장이 각 묶음의 주 행동이라 원래 채움이었다.
 *   지표(radius·패딩·글자·높이·그림자)만 통일한 것이다.
 * ⚠ 프로젝트 CSS 가 테마보다 먼저 로드되므로 `.btn` 을 물려 (0,2,0) 으로 올려야 테마 `.btn`(0,1,0)을 이긴다.
 * ──────────────────────────────────────────────────────────────── */
.btn.fab-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.2px;
    border: 1px solid transparent;   /* 세 변형의 높이를 같게 만드는 지점 */
    white-space: nowrap;
    box-shadow: none;                /* 그림자는 카드(.form-fab)가 한 번만 진다 */
    transition: background-color .12s, color .12s, border-color .12s;
    /* 높이 고정 (2026-08-12). 내용물(아이콘만 vs 아이콘+글자)에 따라 줄상자 높이가 달라져
       실측 42.4px vs 43.9px 로 어긋났다. 2열 짝 배치에서는 이 어긋남이 바로 눈에 띈다.
       44px 는 터치 목표 최소 권장치(WCAG 2.5.5)와도 맞는다. */
    min-height: 44px;
}
.btn.fab-btn i { font-size: 16px; }

/* ────────────────────────────────────────────────────────────────
 *  3단 위계  (사용자 시안 이미지 2026-08-12)
 *    ① fill  = APP 접수      — 꽉 찬 보라. 가장 강한 한 개.
 *    ② soft  = 출력·다운로드  — 아주 옅은 보라 면 + 보라 글자 + 흐린 테두리.
 *    ③ ghost = 임시저장·불러오기 — 면·테두리 없음, 회색 글자.
 *
 *  ⚠ 예전 배색(fill/outline 을 묶음마다 섞어 쓰던 것)은 **폐기**했다.
 *    그때는 "각 묶음의 주 행동"을 채움으로 표시해 채움이 3개였다(APP 접수·출력·임시저장).
 *    시안은 위계를 **묶음 안이 아니라 묶음 사이**에 둔다 — 한 화면에 강조가 하나뿐이라 눈이 덜 피로하다.
 *  ⚠ `backdrop-filter: blur()` 를 걷어냈다. 카드(.form-fab)가 불투명 흰 면이라
 *    버튼 뒤로 폼이 비치지 않는다 — 블러는 비용만 남는다.
 *  ⚠ `.shadow-lg` 도 9개 서식지 마크업에서 걷어냈다. 카드가 그림자를 지므로
 *    버튼마다 또 지면 3단이 뭉개진다. 되살리지 말 것.
 * ──────────────────────────────────────────────────────────────── */

/* ① 채움 — APP 접수 */
.btn.fab-btn-fill {
    background: #696cff;
    color: #fff;
    border-color: #696cff;
}
.btn.fab-btn-fill:hover,
.btn.fab-btn-fill:focus {
    background: #5f61e6;
    color: #fff;
    border-color: #5f61e6;
}

/* ② 연한 면 — 출력·다운로드 */
.btn.fab-btn-soft {
    background: rgba(105, 108, 255, 0.07);
    color: #696cff;
    border-color: rgba(105, 108, 255, 0.22);
}
.btn.fab-btn-soft:hover,
.btn.fab-btn-soft:focus {
    background: rgba(105, 108, 255, 0.14);
    color: #5f61e6;
    border-color: rgba(105, 108, 255, 0.4);
}

/* ③ 고스트 — 임시저장·불러오기. 가장 약한 단계라 면도 테두리도 없다. */
.btn.fab-btn-ghost {
    background: transparent;
    color: #8592a3;
    border-color: transparent;
}
.btn.fab-btn-ghost:hover,
.btn.fab-btn-ghost:focus {
    background: rgba(105, 108, 255, 0.07);
    color: #696cff;
    border-color: transparent;
}

/* ────────────────────────────────────────────────────────────────
 * 플로팅 버튼 **배치**  (사용자 지시 2026-08-12, 시안 이미지)
 *
 * 세로 1열 5개 → **APP 접수 1개(가로 전체) + 2열 짝 2줄** 로 바꿨다.
 * 시안대로 짝지어 놓으니 세로 길이가 절반이 되어 폼을 덜 가린다(5행 → 3행).
 *
 * ⚠ **인라인 style 을 9개 서식지에서 걷어내고 전부 이 블록으로 옮겼다**(2026-08-12).
 *   그전에는 position/flex/gap/z-index 가 apply-form/*.html 9곳에 복붙돼 있어서
 *   배치를 한 번 바꾸려면 9개 파일을 고쳐야 했다. 이제 이 파일만 고치면 된다.
 *   → 서식지에 다시 인라인 style 을 넣지 말 것.
 *
 * ⚠ 건드리면 안 되는 후크 (실측 확인 2026-08-12)
 *   - `.form-fab-temp`  : apply-script.js:3050 붙여넣기 패널 겹침 가드가 이 클래스만 숨긴다.
 *   - `.form-fab`       : virtual-keyboard.js:271 · ux-a11y.css 의 z-index(1040) 층 계산 기준.
 *   - onclick="applyFormDownload(...)" : apply-script.js:1037 이 속성 선택자로 더블클릭을 막는다.
 *
 * ⚠ z-index 1040 은 부트스트랩 모달 백드롭(1050) **아래**다 — 의도한 값이니 올리지 말 것.
 * ──────────────────────────────────────────────────────────────── */
.form-fab {
    position: fixed;
    right: 30px;
    bottom: 30px;
    z-index: 1040;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 236px;              /* 2열 짝의 한 칸이 fab-btn 최소 폭보다 좁아지지 않는 값 */
    max-width: calc(100vw - 60px);
    /* 시안: 버튼 5개가 **흰 카드 하나** 위에 얹힌다.
     * ⚠ 이 카드가 「불투명 배경」 역할을 넘겨받았다. 예전에는 버튼마다 반투명 흰 배경 +
     *   backdrop-filter 로 각자 뒤를 가렸는데, 카드가 한 번에 가리므로 그쪽을 전부 걷었다.
     * ⚠ 그림자도 여기 한 곳에만 준다(버튼의 .shadow-lg 는 마크업에서 제거). */
    background: #fff;
    border: 1px solid rgba(105, 108, 255, 0.10);
    border-radius: 16px;
    padding: 10px;
    box-shadow: 0 6px 24px rgba(58, 59, 69, 0.16);
}

/* APP 접수 — .form-fab 의 직계 버튼. 혼자 한 줄을 차지한다(시안). */
.form-fab > .btn.fab-btn {
    width: 100%;
}

/* 출력·다운로드 / 임시저장·불러오기 — 각 줄을 정확히 반씩 나눈다.
   flex 가 아니라 grid 인 이유: 글자 수가 달라도(출력 2자 vs 다운로드 4자) 두 칸 폭이 같아야 한다. */
.form-fab-out,
.form-fab-temp {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

/* 짝 버튼은 폭이 좁아 기본 패딩이면 글자가 눌린다 */
.form-fab-out .btn.fab-btn,
.form-fab-temp .btn.fab-btn {
    padding-left: 8px;
    padding-right: 8px;
}

/* ────────────────────────────────────────────────────────────────
 * JS 로 감추는 요소 공용 클래스  (사용자 지시 2026-07-29)
 *   쓰는 곳 ① 법정대리인 카드(방문고객정보가 법정대리인일 때만 표시)
 *   "고객구분 - 방문고객정보가 법정대리인일때만 법정대리인 입력 항목들이 보이게")
 *   토글은 apply-script.js `toggleLegalSection()` — 조이텔 전용(walkInCustomerType 이 그 서식지에만 있다).
 *
 * ⚠ **인라인 `style.display='none'` 으로는 안 숨겨진다.** 법정대리인 카드 헤더가
 *   `card-header d-flex align-items-center` 인데 Bootstrap 의 `.d-flex` 가 `display:flex !important` 라
 *   인라인을 이긴다 — 실제로 HR·본문만 숨고 **헤더만 남았다**(사용자 신고).
 * ⚠ 그래서 선택자를 두 번 써 (0,2,0) 으로 올린다. `.d-flex`(0,1,0)+important 를 특이도로 이기므로
 *   CSS 로드 순서에 의존하지 않는다(이 프로젝트는 프로젝트 CSS 가 테마보다 먼저 로드된다).
 * ──────────────────────────────────────────────────────────────── */
.js-hidden.js-hidden {
    display: none !important;
}