/* ux-a11y.css — UI/UX 감사 접근성 마감 (A3 대비 · M4 필드 상태 · M11 안내문 · M12 placeholder)
 *
 * 근거: docs/design/ui-ux-polish-spec.md §2(접근성 결함) · §3.2 M4/M11/M12
 * 원칙(사용자 확정 제약):
 *   · 새 색을 만들지 않는다 — 아래 값은 전부 프로젝트가 이미 쓰는 색이다.
 *       #566a7f  폼 라벨 · 카드헤더 h5 · .fi-preview-title
 *       #697a8d  테마 본문색(--bs-body-color)
 *       #696cff  브랜드(.fi-bar-title i · .cs-option.selected)
 *       #8a94a6  ← 유일한 신규값. placeholder 전용(사유는 ③ 참조)
 *   · **한국어 UI 폰트 크기는 바꾸지 않는다**(D23/D26·N4). 여기서 손대는 것은 색·굵기·보더뿐이다.
 *   · 레이아웃/구조 무변경. 미리보기 오버레이(.overlay-text)는 셀렉터에도 등장하지 않는다.
 *
 * ⚠ 명시도 — 이 프로젝트는 프로젝트 CSS 가 테마(core.css/theme-default.css)보다 **먼저** 로드된다.
 *   7세션에 "로드 순서에 눌려 조용히 죽은 선언" 사고가 3회 있었다.
 *   그래서 이 파일의 모든 규칙은 **로드 위치와 무관하게 이기도록** 명시도를 올려 뒀다.
 *     · 단일 클래스 상대는 같은 클래스를 두 번 써서 (0,2,0) 으로 올린다(`.x.x` — DOM 구조에 의존하지 않는 방법).
 *     · Bootstrap 유틸(.text-muted 등 `!important`) 상대는 **명시도를 더 올린 !important** 로 이긴다
 *       (!important 끼리는 명시도가 먼저, 순서는 동률일 때만 본다).
 *
 * ⚠ 소유권 메모: 아래 `.fi-*`(foreign-input.css) · `.fkb-*`(virtual-keyboard.css) 규칙은
 *   그 파일들이 다른 담당 작업 중이라 **원본을 고치지 않고 여기서 덮는다.**
 *   해당 담당 작업이 끝나면 원본으로 옮기고 이 블록을 지우는 편이 깔끔하다.
 */

/* ────────────────────────────────────────────────────────────────
 * ① 안내문 대비 (감사 A3 / M11)
 *    실측(1366px, joytel): 안내 문구가 전부 #a1acb8 로 들어가 있었다.
 *      .fi-bar-desc            2.12:1   (#a1acb8 on #f5f5f9)
 *      .fi-tpl-sub             2.31:1
 *      .fi-tpl-autosave-note   2.31:1   ← "안 보여서 생긴 질문"의 답이 안 보이는 상태였다
 *      .fi-tpl-edit-hint       2.31:1
 *      #signatureModalHint     2.31:1
 *    WCAG AA 본문 기준 4.5:1. 감사 제안은 #697a8d(4.40)였지만 그러면 `.fi-bar-desc` 가
 *    연회색 배경(#f5f5f9) 위에서 4.05 로 여전히 미달이라, **이미 라벨에 쓰는 #566a7f** 로 올린다.
 *      #566a7f on #ffffff = 5.58 : 1
 *      #566a7f on #f5f5f9 = 5.15 : 1
 *    크기(12~13px)는 그대로라 본문(15px)과의 위계는 유지된다.
 * ──────────────────────────────────────────────────────────────── */
.fi-bar-desc.fi-bar-desc,
.fi-tpl-sub.fi-tpl-sub,
.fi-tpl-autosave-note.fi-tpl-autosave-note,
.fi-tpl-edit-hint.fi-tpl-edit-hint,
.fi-row-note.fi-row-note,
.fi-conf-text.fi-conf-text,
.fi-preview-summary.fi-preview-summary,
.fkb-target.fkb-target {
    color: #566a7f;
}

/* 서명 모달 안내 — 마크업이 `class="text-muted small"`(Bootstrap 유틸 !important)이라
   명시도를 (1,1,0) 로 올린 !important 로만 이긴다. base.html 은 PL 소유라 여기서 처리. */
#signatureModal #signatureModalHint.text-muted {
    color: #566a7f !important;
}

/* 푸터 대비 보정 규칙은 삭제했다 (2026-07-29) — 푸터 자체를 없앴다(fragments/footer.html 삭제,
   호출부 11곳 제거). 대상이 없는 규칙이라 남길 이유가 없다. */

/* ────────────────────────────────────────────────────────────────
 * ② 파생 readonly ↔ disabled 구분 (감사 M4 / A3)
 *    실측: 자동 계산 결과(기본료·할인·월 청구요금 = PDF 에 찍히는 금액)와
 *          "지금은 못 쓰는 칸"(법정대리인 등 disabled)이 **배경 #eceef1 로 완전히 동일**했고,
 *          값 대비는 3.79:1 로 미달이었다.
 *
 *    ⚠ 대상 한정이 중요하다. readonly 인 칸은 세 종류다 —
 *       (a) 파생 확정값  id 가 …Display 로 끝난다 (basicAmtDisplay·installmentAmtDisplay …)
 *       (b) 주소 검색칸  .address-input (클릭하면 Daum 팝업. 배경 흰색은 common.css 가 이미 지정)
 *       (c) 자필기재칸   depositorName/relationship 등 — **종이에 손으로 쓰는 칸**이라
 *                        "자동 계산된 확정값"으로 꾸미면 거짓말이 된다.
 *       → (a) 에만 건다. 감사 제안의 "배경 흰색"은 채택하지 않았다:
 *          흰 배경은 "입력 가능"으로 읽히는데 이 칸은 입력할 수 없다.
 *          회색(=편집 불가)을 유지한 채 **글자 대비 5.15 · 굵기 600 · 좌측 브랜드 바**로
 *          "확정된 값"임을 표시한다. disabled 는 현행 그대로(회색·400·바 없음) 두면 두 상태가 갈린다.
 * ──────────────────────────────────────────────────────────────── */
#dataForm input.form-control[readonly][id$="Display"] {
    color: #566a7f;
    font-weight: 600;
    border-left: 3px solid #696cff;
}

/* ────────────────────────────────────────────────────────────────
 * ③ placeholder 대비 (감사 A3 / M12)
 *    실측 1.90:1 (#b4bdc6 on #fff). 이 화면에서 형식 안내(`YYYYMMDD`, `뒷 4자리 입력`)의
 *    **유일한 전달 수단**이 placeholder 인데 가장 안 보이는 글자였다.
 *
 *    목표는 4.5 가 아니라 3.0~3.5 대역이다 — placeholder 를 본문 수준까지 올리면
 *    "값이 들어있다"로 오독된다. 입력값은 #697a8d(4.40)이므로 그보다 확실히 연해야 한다.
 *      #8a94a6 on #ffffff = 3.06 : 1   (값 4.40 과 시각적으로 구분됨)
 * ──────────────────────────────────────────────────────────────── */
body .form-control::placeholder,
body .form-select::placeholder {
    color: #8a94a6;
    opacity: 1;              /* Firefox 기본 0.54 로 다시 흐려지는 것 방지 */
}

/* readonly 칸의 placeholder 는 성격이 다르다 —
     "자필기재"(이 칸은 종이에 손으로 씁니다) · "주소검색을 클릭하세요"(조작 안내)
   값이 채워질 일이 없어 값과 혼동될 여지가 없고, 오히려 **읽혀야 하는 지시문**이다.
   회색 배경(#eceef1)에서는 #8a94a6 이 2.60 밖에 안 나오므로 지시문 수준으로 올린다.
     #566a7f on #eceef1 = 4.81 : 1 · on #ffffff = 5.58 : 1 */
#dataForm .form-control[readonly]::placeholder {
    color: #566a7f;
    opacity: 1;
}

/* ────────────────────────────────────────────────────────────────
 * ④ "처리 중" 안내를 플로팅 버튼이 덮지 않게 (감사 §4.6 레이어 표)
 *    #loadingMessage 의 실제 스타일 출처는 common.css:51 이다
 *    (fragments/loading-message.html 안의 <style th:fragment="loadingMessageStyle"> 는
 *     어디서도 include 되지 않는 죽은 블록 — 실측 확인).
 *    common.css 는 다른 담당 이력이 있는 공용 파일이라 원본을 고치지 않고 여기서 덮는다.
 *      1000 → 1060 : 플로팅 임시저장/불러오기(.form-fab, 1040) 위 · 백드롭(1089)·모달(1090) 아래.
 * ──────────────────────────────────────────────────────────────── */
#loadingMessage {
    z-index: 1060;
}

/* (L5) 신청서 카드 헤더 7개 × 24px 상단 패딩 = 168px 가 세로를 먹는데, 헤더에 배경이 없어
   섹션 경계는 `hr` 1px 에만 의존했다. **상단 패딩만** 줄이고 헤더에 옅은 톤을 준다.
   ⚠ 글자 크기(18px)는 그대로 — 크기를 건드리면 D23(폰트 크기 불변) 위반이다. */
#dataForm .card-header,
.card > .card-header {
    padding-top: 1rem;
}

/* (L6) 미리보기 6장에 페이지 번호가 없어 "몇 번째 장을 보고 있는지" 알 수 없었다.
   ⚠ 오버레이(.overlay-text·.hw-preview·.sig-preview)와 겹치지 않게 z-index 는 그 층(1)보다
     낮게 두고, 이미지 **바깥 모서리**에 붙인다(§6: 1 이하 금지·10 이상 금지 규칙의 취지 = 오버레이 방해 금지). */
.template-image-container {
    counter-increment: tplpage;
}

.template-image-container::before {
    content: counter(tplpage) " / " attr(data-total);
    position: absolute;
    /* 위치 = **이미지 안쪽 하단 중앙** (사용자 지시 2026-07-30 "하단 중앙으로" · "이미지 안에는 들어가게").
       좌측 상단은 서식지 로고·제목과 겹쳐 읽기 어려웠다. 하단 중앙은 서식지 여백이라 값을 가리지 않는다.
       ⚠ `bottom` 은 **컨테이너** 패딩박스 기준인데, 컨테이너는 이미지보다 20px 크다 —
         `.template-image` 자체에 `margin-bottom: 20px`(common.css)가 있어서다(실측 이미지 665 / 컨테이너 685).
         그래서 12px 만 주면 배지가 **이미지 밖 여백**에 놓인다. 그 20px 을 더해 이미지 안으로 넣는다.
         ⚠ common.css 의 그 margin 을 바꾸면 이 값도 함께 바꿔야 한다. */
    left: 50%;
    bottom: 32px;   /* = 이미지 margin-bottom 20px + 이미지 안쪽 여백 12px */
    transform: translateX(-50%);
    z-index: 0;
    /* 알약(배경·테두리·패딩) 제거 — **숫자만** 보이게 (사용자 지시 2026-07-30).
       배경이 없어져 대비가 떨어지므로 색을 한 단계 진하게 하고 굵기를 유지한다.
       서식지 하단은 흰 여백이라 흰 배경 없이도 읽힌다(실측). */
    font-size: 0.6875rem;
    line-height: 1.45;
    font-weight: 600;
    color: #566a7f;
    pointer-events: none;
}

#imageContainer {
    counter-reset: tplpage;
}

/* ────────────────────────────────────────────────────────────────
 * ⑤ 사이드바 상위(큰) 메뉴 활성 표시 — 우측 파란 바 제거 (사용자 지시 2026-07-29)
 *    대상은 `.menu-inner > .menu-item.active` 의 `::before` 하나다.
 *      모양  theme-default.css:43-50  right:0 · width:0.25rem(4px) · height:2.5rem(40px)
 *      색    theme-default.css:754-756  background:#696cff   ← 이것만 없앤다
 *    ⚠ 배경 틴트(rgba(105,108,255,.16))와 글자색(#696cff)은 **그대로 둔다** —
 *      사용자가 "파란색 배경이 아니라 우측 바"라고 지정했다.
 *    ⚠ 하위 메뉴의 활성 불릿(theme-default.css:760-762)도 손대지 않는다 —
 *      "지금 어느 서식지인지"를 알려주는 유일한 표시라 지우면 sidebar.html 의
 *      현재위치 표시(감사 M5·A5)가 죽는다.
 *    벤더 테마 파일은 고치지 않는다. 이 파일은 base.html 에서 theme-default.css **뒤에**
 *    로드되지만(base.html:87 → :90), 파일 상단 규약대로 순서에 의존하지 않도록 !important 를 쓴다.
 * ──────────────────────────────────────────────────────────────── */
.bg-menu-theme .menu-inner > .menu-item.active::before {
    background: transparent !important;
}

/* ────────────────────────────────────────────────────────────────
 * ⑥ 활성 하위 메뉴(예: 조이텔)의 회색 바탕 제거 (사용자 지시 2026-07-29)
 *    원인: `active` 는 sidebar.html 에서 **`<li>`** 에 붙고 `<a class="menu-link">` 에는 없다.
 *          그래서 활성 항목의 링크도 theme-default.css:739-743 의
 *            `.menu-inner .menu-item .menu-link:not(.active):hover → rgba(67,89,113,.04)`
 *          에 그대로 걸린다. 클릭 후 커서가 그 자리에 남아 회색이 유지된다.
 *          (테마가 활성 링크에 주는 #fff 는 명시도 (0,5,0) 이라 hover 규칙 (0,7,1) 에 진다 — 실측 계산)
 *    처리: **활성 항목에 한해서만** hover/focus 배경을 없앤다.
 *          비활성 항목의 hover 회색은 그대로 둔다 — 눌리는 곳임을 알려주는 유일한 피드백이다.
 * ──────────────────────────────────────────────────────────────── */
.bg-menu-theme .menu-inner .menu-item.active > .menu-link:not(.menu-toggle),
.bg-menu-theme .menu-inner .menu-item.active > .menu-link:not(.menu-toggle):hover,
.bg-menu-theme .menu-inner .menu-item.active > .menu-link:not(.menu-toggle):focus {
    background-color: transparent !important;
}

/* ────────────────────────────────────────────────────────────────
 * ⑦ 상위 그룹 파란 강조를 "현재 페이지"에서 **"지금 펼친 그룹"**으로 옮긴다
 *    (사용자 지시 2026-07-29 — "LG알뜰 눌러도 SK알뜰에 파란배경이 뜬다")
 *
 *    왜 그랬나: 파란색이 `.active` 에 걸려 있었고 `.active` 는 sidebar.html 이
 *      **현재 페이지**(form.templateCode)로 서버 렌더한다. LG알뜰은 링크가 아니라
 *      펼치기 토글(javascript:void(0))이라 눌러도 페이지가 안 바뀌니 파란색이 안 움직였다.
 *      (실측: joytel→SK알뜰 · uplusuMobile/Youth/helloMobile/Device→LG알뜰 · ktmMobile→KT알뜰 — 판정 자체는 정상)
 *
 *    JS 를 넣지 않고 `.open` 으로 옮긴다 — 이 메뉴는 **아코디언**이라(main.js:15 가 accordion 을
 *      넘기지 않고 Menu 는 `_accordion = config.accordion !== false`, 실제로 `_closeOther()` 호출)
 *      한 그룹을 펼치면 형제가 닫힌다 → `.open` 은 항상 하나뿐이고 클릭을 그대로 따라간다.
 *
 *    명시도: 테마의 파란 배경(theme-default.css:750-752)이 (0,5,0) + !important 라,
 *      파일 상단 규약대로 `.menu-link.menu-link` 로 (0,6,0) 으로 올린 !important 로 이긴다.
 *      (1)(2) 는 명시도가 같으므로 **순서상 뒤인 (2)가 이긴다** → active·open 동시면 파란색.
 *
 *    ★ 2026-07-29 후속 정정 (사용자 신고 "다른 메뉴 누르면 SK 알뜰만 굵게가 적용되있는데?")
 *      이 작업이 **불완전했다.** 색·배경·우측 바만 `.open` 으로 옮기고 **굵기를 빼먹었다.**
 *      굵기 규칙은 프로젝트 CSS 가 아니라 **벤더**에 있다:
 *        assets/vendor/css/core.css:15099
 *          `.menu-vertical .menu-item.active:not(.open) > .menu-link { font-weight: 600 }`
 *      이 링크에 걸리는 font-weight 선언은 그것 하나뿐이라(getMatchedRules 실측) 경쟁자가 없다.
 *      → 그래서 「현재 페이지 그룹을 접으면 그것만 굵게」 남았다. 초기 진입 때는 `active open` 이라
 *        `:not(.open)` 에 안 걸려 안 굵고, **다른 그룹 토글을 누른 순간** 굵어진다(실측 시퀀스 확인).
 *
 *      게다가 같은 날 common.css 가 형제들을 #233446 으로 어둡게 하면서, 여기서 주던 #566a7f 는
 *      **형제보다 연한 색**이 됐다 → "연한데 혼자 굵은" 위계 역전이 눈에 튄 것이다.
 *
 *      조치 = 접힌 현재-그룹을 **형제와 완전히 같게** 만든다(굵기 400 + 같은 글자색).
 *      강조는 `.open` 하나가 전담한다 — 이 절의 원래 의도가 그것이다.
 *      ⚠ 대신 「접힌 상태에서 현재 그룹 표시」는 포기한다(sidebar.html:34-42 의 목적 일부).
 *        근거: apply-script.js:402-420 이 현재 경로의 조상 li 에 `open` 을 붙이므로 **진입 직후에는
 *        항상 펼쳐져 있고**, 접히는 것은 사용자가 다른 그룹을 직접 누른 뒤뿐이다(그때는 어디 있는지 안다).
 *        펼쳐져 있을 때는 하위 활성 항목의 불릿(#696cff·14px)이 현재 서식지를 그대로 가리킨다.
 *      ⚠ 굵기 해제는 `.menu-link.menu-link`(0,6,0) 로도 벤더 (0,3,0) 을 이기지만 !important 를 유지한다
 *        — 이 파일 상단 규약(로드 순서에 의존하지 않는다)을 따른다.
 * ──────────────────────────────────────────────────────────────── */
/* (1) 현재 페이지 그룹 — 파란 배경/글자/굵기 전부 해제해 형제와 동일하게 */
.bg-menu-theme .menu-inner > .menu-item.active > .menu-link.menu-link {
    background-color: transparent !important;
    /* 형제(common.css 의 `body .menu-link` = #233446)와 같은 색. 예전 #566a7f 는 형제보다 연해
       "흐려진 것"으로 읽혔다 — 표시가 아니라 결함으로 보였다. */
    color: #233446 !important;
    /* 벤더 core.css:15099 의 `font-weight:600` 해제 — 이 신고의 직접 원인. */
    font-weight: 400 !important;
}

/* (2) 지금 펼친 그룹 — 파란색은 여기로 */
.bg-menu-theme .menu-inner > .menu-item.open > .menu-link.menu-link {
    background-color: rgba(105, 108, 255, 0.16) !important;
    color: #696cff !important;
}

/* ────────────────────────────────────────────────────────────────
 * ⑧ 입력 테두리 대비 (외부 디자인 QA C항) — ↩ **원복. 다시 넣지 말 것.**
 *
 *    2026-07-29 에 `border-color: #8a94a6 !important` 로 진하게 했다가
 *    **사용자 지시로 테마 기본값(#D9DEE3)으로 되돌렸다** — "테두리가 진해진 것 같다".
 *    QA C항(비텍스트 대비 3:1)은 **무시 확정**이다. 접근성 기준보다 화면 인상을 택했다.
 *
 *    남겨 두는 계산 근거 (같은 지적이 또 올라올 때 다시 재지 않도록):
 *      #D9DEE3 = 1.35:1  (테마 기본 = 현행)   ← 지금 이 값
 *      #B4BDC6 = 1.90:1  ⚠ QA 보고서는 이 색을 "약 2.9:1" 로 적었는데 **그 수치가 틀렸다**
 *      #9AA5B4 = 2.50:1  (검토한 절충안 — 채택 안 함)
 *      #8A94A6 = 3.06:1  (한때 적용했던 값. 3:1 을 넘는 가장 가까운 기존 색이었다)
 *
 *    ⚠ 되살릴 일이 생기면 **② 의 파생 확정값(…Display) 좌측 브랜드 바(#696cff)를
 *      `border-left-color` 로 다시 복원하는 규칙이 함께 필요하다** —
 *      `border-color !important` 가 ②(75행)의 shorthand 색을 덮어 바가 회색이 된다.
 *    ⚠ foreign-input.css·handwriting.css 안의 자체 테두리(#d9dee3)는 원래부터 무관하다.
 * ──────────────────────────────────────────────────────────────── */

/* ────────────────────────────────────────────────────────────────
 * ⑨ 입력 ↔ 커스텀 셀렉터 높이 불일치 1.56px (QA E-1)
 *    input.form-control 38.05px(padding 7px) ↔ .cs-display 36.49px(padding 4.48px).
 *    나란히 놓이는 구간(요금제↔기본료 · 유심 모델명↔유심 비용)에서 단차가 보인다.
 *    세로 패딩만 input 과 같은 7px 로 맞춘다(가로 패딩은 화살표 자리라 유지).
 *
 *    ⚠ `#dataForm` 으로 **폼 안에만** 건다. 헤더의 언어 드롭박스(.ui-lang-side .cs-display)는
 *      240px·15px 이 사용자 확정값이고 navbar-responsive.css 가 <768px 에서 따로 다룬다 —
 *      전역으로 걸면 헤더 높이까지 흔든다.
 * ──────────────────────────────────────────────────────────────── */
#dataForm .cs-display {
    padding-top: 7px;
    padding-bottom: 7px;
}

/* ────────────────────────────────────────────────────────────────
 * ⑩ 터치 타깃 44px (QA D) — **모바일(<768px)에서만** 건다
 *    PC 레이아웃은 이미 사용자가 확정·수용한 상태라 건드리지 않는다.
 *    QA 실측 중 가장 나쁜 것: 라디오·체크박스 18×18(-26px) · 서명 입력 92×28(-16px).
 *
 *    ⚠ `.form-check-input` 자체를 키우지 않았다 — Bootstrap 이 `margin-top: 0.25em` 으로
 *      글자 기준선에 맞춰 배치하므로 크기를 바꾸면 세로 정렬이 어긋난다(브라우저 확인 필요).
 *      대신 `for` 로 연결된 **라벨의 히트영역**을 44px 로 키운다 — 라벨 클릭도 체크를 토글하므로
 *      실효 터치 영역이 44px 이 된다(라벨 연결은 QA 에서 누락 0건으로 확인됨).
 *    ⚠ font-size 를 16px 로 올리는 QA 권고(iOS 포커스 확대 방지)는 **적용하지 않았다** —
 *      "한국어 UI 폰트 크기는 바꾸지 않는다"(D23/D26)가 사용자 확정 제약이다. 별도 판단 필요.
 * ──────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    #dataForm .form-check-label {
        display: inline-flex;
        align-items: center;
        min-height: 2.75rem;    /* 44px */
    }

    /* 서명 입력·지우기 버튼 */
    .sig-slot .sig-open,
    .sig-slot .sig-remove {
        min-height: 2.75rem;
    }

    /* 입력칸 — 38px → 44px */
    #dataForm .form-control,
    #dataForm .form-select,
    #dataForm .cs-display {
        min-height: 2.75rem;
    }
}