/* =====================================================================
 * jn-theme.css — 기존 jQuery Mobile 1.3.2 · jQuery UI · 공통 클래스 덮어쓰기 (A안 테마층)
 * 위치   : /css/share/jn-theme.css
 * 로드   : /comm/include/share/themeHead.jsp (jn-tokens.css 다음, jn-pattern.css 앞)
 * 기준   : references/design/design-spec.md v2.1 3절 (3-1 원칙 · 3-2 구조 · 3-3 swatch · 3-4 부품 · 3-6 폭 예외)
 * 근거   : requests/sessions/BR11_A_디자인사전조사_Result.md (아래 'A:행' = 그 파일의 행 번호)
 * 요청   : BR11_B (B3), BR11_B2 (질문 결정 반영 · 12절 폭 예외), BR11_B3 (hover · down · active 상태 보정 4-1 · 4-3 · 4-4 · 4-5 · 7)
 *          BR11_C (5-2 팝업 폭 12-3 · 닫기 X 8-7, 5-3 키보드 초점 1-1)
 *          BR11_B4 (체크 버튼 ✔ 숨김 · 주/흰 10-4, 페이징 버튼 4-7, 기존 jQM 팝업 층 8-8)
 *          BR11_B5 (로더 상자 제거 · 뒤 배경 옅게 8-4, 2차: 글자 숨김 · 그림만 · 가운데 · opacity 1)
 *          BR11_D2 (12-4 작명 · 감명 허브 .indexNewClass.jn-hub 배치 → 흐름 안 · PC 720 칼럼, BL-105)
 *          BR11_D3 (12-4 허브 화면 바탕 #F4F4F4 → bg, 12-5 홈 .jn-home 내용 영역 여백)
 *
 * 원칙 (design-spec 3-1)
 *  - 모든 규칙 앞에 :root 를 붙여 라이브러리 규칙보다 한 단계 강하게 쓴다.
 *  - jQM 규칙은 .ui-page / .ui-popup / .ui-loader 아래로, jQuery UI 규칙은 .ui-widget 아래로 한정한다.
 *  - 모양만 바꾼다 (색 · 글꼴 · 테두리 · 모서리 · 그림자 · 안쪽 여백).
 *    position · display · float · width 는 PC 컨테이너(11절) · 폭 예외(12절, design-spec 3-6) 외에는 바꾸지 않는다.
 *    예외: 3-4에서 '숨기고 꺾쇠로' 지정한 접이식 원 아이콘(5절)과, 아이콘 모양을 꺾쇠로 바꾸는 크기 조정.
 *  - 색 · 글꼴 · 간격은 var(--jn-*) 만 쓴다. 색상값 직접 기재 금지.
 *  - !important 는 3-1의 ①(원본이 !important) ②(화면 <style> id 배경 타일) ③(jQM 인라인) 만, 쓴 곳마다 주석.
 *  - style="" 속성은 덮지 않는다 (D~G에서 정리).
 *
 * 목차
 *   1. 기본          글꼴 · 글자색 · 그림자 제거, 키보드 초점(:focus-visible)
 *   2. 페이지        페이지 바탕, 배경 타일 제거, 내용 영역
 *   3. 헤더          jQM 헤더(swatch o · j), 바(bar), 홈·허브 헤더(indexNew_header_footer.css)
 *   4. 버튼          swatch별 버튼(o · l / n · i · j · e / c · d · b · a · k · g · h), 활성 · 비활성, 페이징 버튼
 *   5. 접이식        섹션 카드 모양 (머리 · 내용)
 *   6. 입력          선택상자, 라디오 · 체크, 텍스트 입력, 라벨, #jmForm(jmForm.css id 규칙)
 *   7. 목록          listview 행 · 구분 · 개수 · 꺾쇠, 탭 줄(navbar)
 *   8. 팝업·로더     jQM 팝업 · 배경, popupDark.jsp 클래스, 확인 · 닫기 그림, 대화상자 페이지, 로더(상자 없음 · 뒤 배경), datebox, 팝업 층(z-index)
 *   9. jQuery UI     .ui-widget 아래 색만
 *  10. 기존 공통 클래스  결과 화면 파란 글자, 갈색 · 자주 직접 색 클래스, checkDarkButton, 체크 버튼 ✔ · 주/흰
 *  11. PC 600px 이상  720px 가운데 컨테이너, jqm-docs-jm.css 1280px 규칙 덮기
 *  12. 폭 예외       홈 카드 영역 넘침, 입력 폼 고정 폭 → 카드 폭 (design-spec 3-6), jQM 팝업 폭, 허브 배치 · 바탕, 홈 내용 영역
 * ===================================================================== */


/* =====================================================================
 * 1. 기본
 *    대상: body, swatch 요소 전체(a~p), 입력 요소
 *    근거: A:208 대응표 '글꼴' 행(design-spec 3-4) — jqm-docs-jm.css:1-27 NanumGothic,
 *          jquery.mobile.min.css:12 swatch 마다 font-family: NanumGothic
 * ===================================================================== */

:root body,
:root input,
:root select,
:root textarea,
:root button,
:root [class*="ui-bar-"],
:root [class*="ui-body-"],
:root [class*="ui-btn-up-"],
:root [class*="ui-btn-hover-"],
:root [class*="ui-btn-down-"] {
	font-family: var(--jn-font-body);
}

:root body {
	color: var(--jn-color-text);
	background: var(--jn-color-bg);
}

/* swatch 마다 들어 있는 글자 그림자 제거 */
:root [class*="ui-bar-"],
:root [class*="ui-body-"],
:root .ui-page .ui-btn {
	text-shadow: none;
}

/* 1-1. 키보드 초점 (BR11_C 5-3, design-spec 5 접근성 · BR11_B3 질문 2)
 *  :focus-visible = 키보드(Tab)로 옮긴 초점에만 표시, 손가락 · 마우스로 누를 때는 표시 안 함.
 *  - 목록 행(7절)은 ui-focus 링을 없앴으므로 키보드 초점은 행 안 링크에 이 외곽선이 그려진다.
 *  - jQM 버튼(.ui-btn)은 4-5 의 brand 2px 링(box-shadow)이 이미 있어 제외 (이중 테두리 방지).
 *  - 글자 입력칸(input · textarea)은 6-5 의 테두리 표시를 쓰므로 제외.
 *  - tabindex="-1" (jQM 이 페이지 · 제목에 스크립트로 주는 초점)과 .ui-page(jQM 이 tabindex="0" 을 넣어 첫 Tab 에
 *    화면 전체에 테두리가 그려짐 — Playwright 확인)는 제외.
 *  - 헤더 버튼('Home' · '뒤로가기')은 어두운 바탕이라 3-2 에서 gold-light 로 따로 표시.
 *  :focus-visible 을 모르는 구형 웹뷰는 이 규칙 전체를 무시 (예전 표시 그대로).
 *  :where() 로 세기를 :root + :focus-visible (0,2,0) 로 낮춰, jn-pattern.css 부품별 초점(.jn-subhead 어두운 바탕의
 *  gold-light 등, 같은 세기 · 뒤에 로드)이 이 규칙을 이기게 한다. */
:root :where(a:not(.ui-btn), button, select, summary, input[type="button"], input[type="submit"],
		[tabindex]:not([tabindex="-1"]):not(.ui-btn):not(.ui-page)):focus-visible {
	outline: 2px solid var(--jn-color-brand);
	outline-offset: 2px;
}


/* =====================================================================
 * 2. 페이지
 *    대상 swatch: i (페이지 swatch, A:132), 그 밖의 페이지 swatch(o 등)
 *    근거: A:113-121 배경 이미지 표, A:41 /mobile/index.jsp 타일, design-spec 3-3 i 행 · 3-4 '페이지 바탕'
 *    - jquery.mobile.min.css:27 (.ui-mobile .ui-page-active) · :31 (.ui-body-i.ui-page-active) 타일 제거
 *    - 화면 <style> 타일: #mainContent · .ui-panel-content-wrap
 *      (/mobile/index.jsp, /info/aboutus/, /info/company/, /comm/manual/infoManual.jsp)
 *      BR11_B B2로 include 줄이 화면 <style> 뒤로 옮겨졌으므로 :root 를 붙인 id 선택자로 덮인다.
 *      → !important ② 는 쓰지 않았다.
 * ===================================================================== */

:root .ui-page,
:root .ui-page.ui-page-active,
:root .ui-page.ui-body-i,
:root .ui-page.ui-body-i.ui-page-active {
	background: var(--jn-color-bg);
	color: var(--jn-color-text);
}

/* 화면 <style> · premiumBasic.css 의 내용 영역 배경 이미지 (타일 · content_background.jpg) */
:root #mainContent,
:root .ui-panel-content-wrap {
	background: var(--jn-color-bg);
}

/* 작명 · 감명 허브(/makename/, /checkname/)의 메뉴 영역 = 사실상 페이지 바탕
 * indexNew.css:183-191 .indexNewClass (#4F1730 + bg_cloud.png) → 한지 바탕. 배치(position:fixed)는 그대로 */
:root .indexNewClass {
	background: var(--jn-color-bg);
}

/* 내용 영역(data-role=content)은 페이지 바탕이 보이게 둔다 (swatch o 내용 = 검정 바탕 #06060B 대체) */
:root .ui-page .ui-content[class*="ui-body-"] {
	background: transparent;
	color: var(--jn-color-text);
}

/* 그 밖의 swatch 본문 상자 (.ui-body-*, 카드 내용) → 카드 바탕
 * 3-3: o 내용 · n · c · d · b · l · e 본문 → --jn-color-surface */
:root .ui-page .ui-body-o,
:root .ui-page .ui-body-n,
:root .ui-page .ui-body-c,
:root .ui-page .ui-body-d,
:root .ui-page .ui-body-b,
:root .ui-page .ui-body-l,
:root .ui-page .ui-body-e,
:root .ui-page .ui-body-i,
:root .ui-page .ui-body-j,
:root .ui-page .ui-body-k {
	background: var(--jn-color-surface);
	border-color: var(--jn-color-line);
	color: var(--jn-color-text);
}

/* 본문 상자 안 링크 (swatch o: #DDDDDD, 그 밖: 파랑 #2489ce)
 * jQM 이 본문 a 에 ui-link 를 붙이므로, 새 부품(jn-*) 링크는 자기 색을 쓰도록 제외한다 */
:root .ui-page [class*="ui-body-"] .ui-link:not([class*="jn-"]),
:root .ui-page [class*="ui-body-"] .ui-link:not([class*="jn-"]):visited {
	color: var(--jn-color-brand);
}

:root .ui-page [class*="ui-body-"] .ui-link-inherit {
	color: inherit;
}

/* 가로 넘침 방지 (BR11_B B4-3): 표준 뷰포트에서 레이아웃 폭이 360~430px 로 줄어든다.
 * - 이미지: max-width 100% + height auto. 클래스로 크기를 정한 이미지(.boxIcon height:60% 등)는
 *   이 규칙이 이기지 않도록 클래스 없는 이미지만 대상으로 한다.
 * - iframe · video: max-width 100% 만 (높이는 그대로). 그 밖의 고정 폭은 B4_fixed_width.csv 로 보고만. */
:root .ui-page img:not([class]) {
	max-width: 100%;
	height: auto;
}

:root .ui-page iframe,
:root .ui-page video {
	max-width: 100%;
}


/* =====================================================================
 * 3. 헤더
 *    대상 swatch: o 헤더(A:128 '짙은 갈색 바 #3E2723 + 금색 글자'), j(A:135 진회색 바),
 *                 b 바(A:131 청록), h 바(A:138 로더 제목), l 바(A:130)
 *    근거: design-spec 2-1, 3-3 o 헤더 · b · j · k/g/h 행, 3-4 '헤더' · '홈·허브 헤더'
 * ===================================================================== */

/* 3-1. 어두운 바 : o · j · a (a = datebox 머리 themeHeader "a") */
:root .ui-page .ui-bar-o,
:root .ui-page .ui-bar-j,
:root .ui-page .ui-bar-a,
:root .ui-popup .ui-bar-o,
:root .ui-popup .ui-bar-a {
	background: var(--jn-color-brand-deep);
	border-color: var(--jn-color-brand-deep);
	color: var(--jn-color-text-on-dark);
}

:root .ui-page .ui-bar-o .ui-link-inherit,
:root .ui-page .ui-bar-j .ui-link-inherit {
	color: var(--jn-color-text-on-dark);
}

/* 3-2. jQM 헤더 : 바탕 brand-deep, 아래 2px 금색 선 (2-1 하위 화면 헤더)
 * 위 1px 선(바탕과 같은 색)은 남긴다 — 없으면 고정이 아닌 헤더에서 제목 margin 이 헤더 밖으로 빠진다 */
:root .ui-page .ui-header.ui-bar-o,
:root .ui-page .ui-header.ui-bar-j,
:root .ui-popup .ui-header.ui-bar-o {
	border-width: 1px 0 2px 0;
	border-style: solid;
	border-color: var(--jn-color-brand-deep) var(--jn-color-brand-deep) var(--jn-color-gold);
}

/* 제목 : 고운바탕 17px. 높이 = --jn-header-h(52) = 위아래 여백 + 줄 높이 22 + 위선 1 + 아래선 2
 * jqm-docs-jm.css:1101 .ui-header .ui-title (16px, 그림자) 대체 */
:root .ui-page .ui-header .ui-title {
	font-family: var(--jn-font-display);
	font-size: var(--jn-fs-h3);
	font-weight: var(--jn-fw-bold);
	line-height: 22px;
	margin-top: calc((var(--jn-header-h) - 25px) / 2);
	margin-bottom: calc((var(--jn-header-h) - 25px) / 2);
	color: var(--jn-color-text-on-dark);
	text-shadow: none;
}

/* 헤더 안 버튼 ('Home' · '뒤로가기'): 투명 바탕 + 밝은 글자. 터치 높이 --jn-touch(44)에 맞게 여백만 늘림
 * (아이콘 버튼 전환은 ③ 구조층) */
:root .ui-page .ui-header .ui-btn,
:root .ui-page .ui-header .ui-btn[class*="ui-btn-up-"],
:root .ui-page .ui-header .ui-btn[class*="ui-btn-hover-"],
:root .ui-page .ui-header .ui-btn[class*="ui-btn-down-"] {
	background: transparent;
	border: 1px solid transparent;
	box-shadow: none;
	color: var(--jn-color-text-on-dark);
	font-weight: var(--jn-fw-medium);
}

:root .ui-page .ui-header .ui-btn[class*="ui-btn-hover-"],
:root .ui-page .ui-header .ui-btn[class*="ui-btn-down-"] {
	border-color: var(--jn-color-gold);
}

:root .ui-page .ui-header .ui-btn .ui-btn-inner {
	padding-top: calc((var(--jn-touch) - 22px) / 2);
	padding-bottom: calc((var(--jn-touch) - 22px) / 2);
	font-size: var(--jn-fs-sm);
	line-height: 20px;
	border: 0;
}

/* 헤더 버튼 키보드 초점 (BR11_C 5-3): 위 규칙이 4-5 의 brand 링(box-shadow)을 지우고, 어두운 헤더 위 brand 는 보이지 않으므로
 * gold-light 2px 외곽선 (jn-pattern.css .jn-subhead 와 같은 표시). 손가락 · 마우스로 누를 때는 표시 안 함 */
:root .ui-page .ui-header .ui-btn:focus-visible {
	outline: 2px solid var(--jn-color-gold-light);
	outline-offset: -2px;
}

/* 헤더 아이콘: 검은 원(rgba) 바탕만 지우고 흰 글리프는 그대로 */
:root .ui-page .ui-header .ui-icon {
	background-color: transparent;
	box-shadow: none;
}

/* 3-3. 밝은 띠 : b → tint-strong, h · e · c · d · n · i · k · g · m · p → tint (3-3 b · k/g/h 행) */
:root .ui-page .ui-bar-b {
	background: var(--jn-color-tint-strong);
	border-color: var(--jn-color-line);
	color: var(--jn-color-text-title);
}

:root .ui-page .ui-bar-h,
:root .ui-page .ui-bar-e,
:root .ui-page .ui-bar-c,
:root .ui-page .ui-bar-d,
:root .ui-page .ui-bar-n,
:root .ui-page .ui-bar-i,
:root .ui-page .ui-bar-k,
:root .ui-page .ui-bar-g,
:root .ui-loader .ui-bar-h {
	background: var(--jn-color-tint);
	border-color: var(--jn-color-line);
	color: var(--jn-color-text-title);
}

/* 3-4. l 바 → 주 색 (3-3 l 행) */
:root .ui-page .ui-bar-l {
	background: var(--jn-color-brand);
	border-color: var(--jn-color-brand);
	color: var(--jn-color-on-brand);
}

/* 3-5. 바닥글 swatch o : 위쪽 금색 선 */
:root .ui-page .ui-footer.ui-bar-o {
	border-width: 2px 0 0 0;
	border-style: solid;
	border-color: var(--jn-color-gold);
}

/* 3-6. 홈 · 허브 · 회사소개 헤더 (indexHeader.jsp + indexNew_header_footer.css)
 *      색만 2-1에 맞춘다. z-index(100000)와 배치는 바꾸지 않는다 (3-4 '홈·허브 헤더') */
:root .headerClass {
	/* !important: ① 원본 indexNew_header_footer.css:504 'background:#201026 !important' */
	background: var(--jn-color-brand-deep) !important;
	border-bottom: 2px solid var(--jn-color-gold);
}

:root .headerClass .mainHeaderTitleText {
	color: var(--jn-color-text-on-dark);
	font-family: var(--jn-font-display);
}

:root .headerClass .menuTrigger span {
	background-color: var(--jn-color-text-on-dark);
}

:root .dropListMenu {
	background: var(--jn-color-brand-deep);
	border-color: var(--jn-color-gold);
}

:root .dropListMenu li {
	border-bottom-color: var(--jn-color-brand);
}

:root .dropListMenu li:hover,
:root .dropListMenu li:active {
	background: var(--jn-color-brand);
}

:root .dropListMenu li:last-child {
	/* !important: ① 원본 indexNew_header_footer.css:407 'background:#201026 !important' */
	background: var(--jn-color-brand-deep) !important;
}


/* =====================================================================
 * 4. 버튼
 *    구조: a.ui-btn.ui-btn-up-{s}.ui-btn-corner-all > span.ui-btn-inner > span.ui-btn-text (3-2)
 *    바탕 · 테두리는 .ui-btn-up-*, 글자 · 높이는 .ui-btn-inner (3-4 '버튼').
 *    높이는 .ui-btn-inner 위아래 여백으로 맞춘다 (height 직접 지정 금지 — 두 줄 버튼이 잘림).
 *    근거: A:127-138 swatch 표, design-spec 2-4 · 3-3
 *      - 주 버튼   : o(A:128 '#523B37, hover #870000') · l(A:130 분홍 구매 버튼)
 *      - 흰 버튼   : n(A:127) · i(A:132, 페이지 swatch 를 물려받은 버튼) · j · e
 *      - 보조 버튼 : c · d(A:129,133) · b(A:131) · a · k · g · h(A:136-138)
 *      swatch f · m · p 는 사용 0건(A:140)이라 덮지 않는다.
 * ===================================================================== */

/* 4-1. 공통 : 모서리 · 그림자 · 글자 */
:root .ui-page .ui-btn-corner-all,
:root .ui-popup .ui-btn-corner-all {
	border-radius: var(--jn-radius-md);
}

:root .ui-page .ui-btn.ui-shadow,
:root .ui-popup .ui-btn.ui-shadow {
	box-shadow: none;
}

/* 높이 = 위아래 여백 + 줄 높이 20 + 바깥 테두리 2 + jQM .ui-btn-inner 위 테두리 1 (= 23)
 * 기존 jQM 버튼은 종류(주 · 흰 · 보조)와 관계없이 48px 하나 (design-spec v2.1 2-4, BR11_B 질문 8 결정).
 * 48px 토큰은 --jn-input-h 를 쓴다. 새 부품(.jn-btn--*)의 50 · 46px 는 jn-pattern.css 에서 따로 정한다.
 * (BR11_B 의 주 버튼(o · l) 50px 규칙은 BR11_B2 에서 이 규칙 하나로 합쳤다) */
:root .ui-page .ui-btn > .ui-btn-inner,
:root .ui-popup .ui-btn > .ui-btn-inner {
	padding-top: calc((var(--jn-input-h) - 23px) / 2);
	padding-bottom: calc((var(--jn-input-h) - 23px) / 2);
	line-height: 20px;
}

/* 작은 버튼(data-mini) · 아이콘만 있는 버튼은 jQM 크기 유지 */
:root .ui-page .ui-mini > .ui-btn-inner,
:root .ui-page .ui-mini.ui-btn > .ui-btn-inner {
	padding-top: var(--jn-space-2);
	padding-bottom: var(--jn-space-2);
	line-height: 18px;
}

:root .ui-page .ui-btn-icon-notext > .ui-btn-inner,
:root .ui-popup .ui-btn-icon-notext > .ui-btn-inner {
	padding: 0;
	line-height: normal;
}

/* 위 · 아래 아이콘 버튼은 아이콘 자리 여백(jQM 40px / 헤더 · 탭 줄 30px)을 되살린다 */
:root .ui-page .ui-btn-icon-top > .ui-btn-inner {
	padding-top: 40px;
}

:root .ui-page .ui-btn-icon-bottom > .ui-btn-inner {
	padding-bottom: 40px;
}

:root .ui-page .ui-header .ui-btn.ui-btn-icon-top > .ui-btn-inner,
:root .ui-page .ui-navbar .ui-btn.ui-btn-icon-top > .ui-btn-inner {
	padding-top: 30px;
}

:root .ui-page .ui-header .ui-btn.ui-btn-icon-bottom > .ui-btn-inner,
:root .ui-page .ui-navbar .ui-btn.ui-btn-icon-bottom > .ui-btn-inner {
	padding-bottom: 30px;
}

/* 목록 행(li.ui-btn)은 안쪽 여백을 링크(a.ui-link-inherit)가 가지므로 0 유지 (jQM .ui-li>.ui-btn-inner) */
:root .ui-page .ui-listview .ui-li > .ui-btn-inner {
	padding-top: 0;
	padding-bottom: 0;
}

/* 버튼 안 링크 글자는 버튼 글자색을 따른다 (.ui-btn-up-o a.ui-link-inherit 등) */
:root .ui-page .ui-btn .ui-link-inherit,
:root .ui-popup .ui-btn .ui-link-inherit {
	color: inherit;
}

/* 상태(hover · down · active) 버튼 · 목록 행 안 링크 : 바탕 투명, 글자는 버튼 · 행 글자색 (BR11_B3 B3-1)
 * 원본이 상태 클래스 아래 링크에만 색 · 바탕을 따로 준다:
 *  - jmForm.css:206-211 '.ui-btn-hover-n a.ui-link-inherit { color:#FFFFFF; background:#3E2723 }'
 *    → 입력 화면에서 AJAX 로 넘어간 목록(순차작명 2단계 등)에서 행 위에 짙은 갈색 링크 바탕이 남았다
 *  - jquery.mobile.min.css:12 '.ui-btn-active a.ui-link-inherit { color:#ffffff }' → 선택 행 글자가 흰색 */
:root .ui-page .ui-btn[class*="ui-btn-hover-"] .ui-link-inherit,
:root .ui-page .ui-btn[class*="ui-btn-down-"] .ui-link-inherit,
:root .ui-page .ui-btn.ui-btn-active .ui-link-inherit,
:root .ui-popup .ui-btn[class*="ui-btn-hover-"] .ui-link-inherit,
:root .ui-popup .ui-btn[class*="ui-btn-down-"] .ui-link-inherit,
:root .ui-popup .ui-btn.ui-btn-active .ui-link-inherit {
	background: transparent;
	color: inherit;
}

/* 4-2. 주 버튼 : o · l (2-4 주 버튼) */
:root .ui-page .ui-btn-up-o,
:root .ui-page .ui-btn-up-l,
:root .ui-popup .ui-btn-up-o,
:root .ui-popup .ui-btn-up-l {
	background: var(--jn-color-brand);
	border: 1px solid var(--jn-color-brand);
	color: var(--jn-color-on-brand);
	font-weight: var(--jn-fw-bold);
}

:root .ui-page .ui-btn-hover-o,
:root .ui-page .ui-btn-hover-l,
:root .ui-page .ui-btn-down-o,
:root .ui-page .ui-btn-down-l,
:root .ui-popup .ui-btn-hover-o,
:root .ui-popup .ui-btn-hover-l,
:root .ui-popup .ui-btn-down-o,
:root .ui-popup .ui-btn-down-l {
	background: var(--jn-color-brand-deep);
	border: 1px solid var(--jn-color-brand-deep);
	color: var(--jn-color-on-brand);
	font-weight: var(--jn-fw-bold);
}

/* 4-3. 흰 버튼 : n · i · j · e (2-4 흰 버튼) */
/* 팝업 안 버튼도 같은 swatch 전부 (BR11_B3: .ui-popup i · j 추가) */
:root .ui-page .ui-btn-up-n,
:root .ui-page .ui-btn-up-i,
:root .ui-page .ui-btn-up-j,
:root .ui-page .ui-btn-up-e,
:root .ui-popup .ui-btn-up-n,
:root .ui-popup .ui-btn-up-i,
:root .ui-popup .ui-btn-up-j,
:root .ui-popup .ui-btn-up-e {
	background: var(--jn-color-input);
	border: 1px solid var(--jn-color-line-input);
	color: var(--jn-color-text-title);
	font-weight: var(--jn-fw-bold);
}

/* hover · down : tint, 글자색 유지 (BR11_B3 B3-1 '흰 · 보조 버튼 = tint').
 * BR11_B 의 down = tint-strong 은 아래 주석 블록으로 남긴다 */
:root .ui-page .ui-btn-hover-n,
:root .ui-page .ui-btn-hover-i,
:root .ui-page .ui-btn-hover-j,
:root .ui-page .ui-btn-hover-e,
:root .ui-popup .ui-btn-hover-n,
:root .ui-popup .ui-btn-hover-i,
:root .ui-popup .ui-btn-hover-j,
:root .ui-popup .ui-btn-hover-e,
:root .ui-page .ui-btn-down-n,
:root .ui-page .ui-btn-down-i,
:root .ui-page .ui-btn-down-j,
:root .ui-page .ui-btn-down-e,
:root .ui-popup .ui-btn-down-n,
:root .ui-popup .ui-btn-down-i,
:root .ui-popup .ui-btn-down-j,
:root .ui-popup .ui-btn-down-e {
	background: var(--jn-color-tint);
	border: 1px solid var(--jn-color-line-input);
	color: var(--jn-color-text-title);
}

/* [BR11_B3] down = tint-strong → 위 규칙(tint)으로 합침. 소스 클렌징 때 삭제
:root .ui-page .ui-btn-down-n,
:root .ui-page .ui-btn-down-i,
:root .ui-page .ui-btn-down-j,
:root .ui-page .ui-btn-down-e,
:root .ui-popup .ui-btn-down-n,
:root .ui-popup .ui-btn-down-e {
	background: var(--jn-color-tint-strong);
	border: 1px solid var(--jn-color-line-input);
	color: var(--jn-color-text-title);
}
*/

/* 4-4. 보조 버튼 : c · d · b · a · k · g · h (2-4 보조 버튼, 3-3 c·d · b · k/g/h 행) */
/* 팝업 안 버튼도 같은 swatch 전부 (BR11_B3: .ui-popup d · b · k · g · h 추가) */
:root .ui-page .ui-btn-up-c,
:root .ui-page .ui-btn-up-d,
:root .ui-page .ui-btn-up-b,
:root .ui-page .ui-btn-up-a,
:root .ui-page .ui-btn-up-k,
:root .ui-page .ui-btn-up-g,
:root .ui-page .ui-btn-up-h,
:root .ui-popup .ui-btn-up-c,
:root .ui-popup .ui-btn-up-d,
:root .ui-popup .ui-btn-up-b,
:root .ui-popup .ui-btn-up-a,
:root .ui-popup .ui-btn-up-k,
:root .ui-popup .ui-btn-up-g,
:root .ui-popup .ui-btn-up-h {
	background: transparent;
	border: 1px solid var(--jn-color-brand);
	color: var(--jn-color-brand);
	font-weight: var(--jn-fw-bold);
}

/* hover · down : tint, 글자색 유지 (BR11_B3 B3-1). BR11_B 의 down = tint-strong 은 아래 주석 블록 */
:root .ui-page .ui-btn-hover-c,
:root .ui-page .ui-btn-hover-d,
:root .ui-page .ui-btn-hover-b,
:root .ui-page .ui-btn-hover-a,
:root .ui-page .ui-btn-hover-k,
:root .ui-page .ui-btn-hover-g,
:root .ui-page .ui-btn-hover-h,
:root .ui-popup .ui-btn-hover-c,
:root .ui-popup .ui-btn-hover-d,
:root .ui-popup .ui-btn-hover-b,
:root .ui-popup .ui-btn-hover-a,
:root .ui-popup .ui-btn-hover-k,
:root .ui-popup .ui-btn-hover-g,
:root .ui-popup .ui-btn-hover-h,
:root .ui-page .ui-btn-down-c,
:root .ui-page .ui-btn-down-d,
:root .ui-page .ui-btn-down-b,
:root .ui-page .ui-btn-down-a,
:root .ui-page .ui-btn-down-k,
:root .ui-page .ui-btn-down-g,
:root .ui-page .ui-btn-down-h,
:root .ui-popup .ui-btn-down-c,
:root .ui-popup .ui-btn-down-d,
:root .ui-popup .ui-btn-down-b,
:root .ui-popup .ui-btn-down-a,
:root .ui-popup .ui-btn-down-k,
:root .ui-popup .ui-btn-down-g,
:root .ui-popup .ui-btn-down-h {
	background: var(--jn-color-tint);
	border: 1px solid var(--jn-color-brand);
	color: var(--jn-color-brand);
}

/* [BR11_B3] down = tint-strong → 위 규칙(tint)으로 합침. 소스 클렌징 때 삭제
:root .ui-page .ui-btn-down-c,
:root .ui-page .ui-btn-down-d,
:root .ui-page .ui-btn-down-b,
:root .ui-page .ui-btn-down-a,
:root .ui-page .ui-btn-down-k,
:root .ui-page .ui-btn-down-g,
:root .ui-page .ui-btn-down-h,
:root .ui-popup .ui-btn-down-c,
:root .ui-popup .ui-btn-down-a {
	background: var(--jn-color-tint-strong);
	border: 1px solid var(--jn-color-brand);
	color: var(--jn-color-brand);
}
*/

/* jqm-docs-jm.css:1055-1135 의 swatch k 헤더 버튼 · swatch i 청색 2px 테두리 대체 */
:root .ui-page .ui-btn-up-k .ui-btn-text,
:root .ui-page .ui-btn-hover-k .ui-btn-text {
	text-shadow: none;
}

/* 4-5. 공통 상태 : 선택 = brand 바탕 흰 글자 (3-3 '공통 상태')
 * jquery.mobile.min.css:12 .ui-btn-active #870000, premiumBasic.css:211 대체 */
:root .ui-page .ui-btn-active,
:root .ui-page .ui-btn.ui-btn-active,
:root .ui-popup .ui-btn-active {
	background: var(--jn-color-brand);
	border: 1px solid var(--jn-color-brand);
	color: var(--jn-color-on-brand);
}

/* [BR11_B3] 선택 상태 링크 글자를 on-brand(흰색)로 고정하면 연한 바탕 목록 행(7절)에서 글자가 안 보인다.
 * 링크는 4-1 상태 규칙에서 버튼 · 행 글자색을 따르게 했다 (선택 버튼은 on-brand 그대로). 소스 클렌징 때 삭제
:root .ui-page .ui-btn-active .ui-link-inherit {
	color: var(--jn-color-on-brand);
}
*/

/* 초점 표시 : #870000 번짐 → brand 2px 링 (layout 변화 없이 box-shadow) */
:root .ui-page .ui-btn.ui-focus,
:root .ui-page .ui-btn:focus {
	box-shadow: 0 0 0 2px var(--jn-color-brand);
}

/* 4-6. 비활성 (2-4 비활성: disabled-bg + 1px 점선 + muted 글자)
 * jQM 기본 opacity .3 대신 모양으로 구분한다. 화면 <style> 의 '.ui-disabled{opacity:.6 !important}'
 * (예: /mobile/cn/index.jsp) 는 인라인 !important 라 그 화면에서는 투명도가 남는다 (B7 보고) */
:root .ui-page .ui-btn.ui-disabled {
	opacity: 1;
	background: var(--jn-color-disabled-bg);
	border: 1px dashed var(--jn-color-line-strong);
	color: var(--jn-color-text-muted);
	box-shadow: none;
}

/* 4-7. 페이징 버튼 (BR11_B4 B4-2, design-spec v2.3 2-10) : 빠른작명 목록 /mobile/ms/msList.jsp:671-692 하단 판넬
 *  대상: .moveDiv (처음 · 이전 · 다음 · 끝, 그림 32×32 sq_*.png) · .moveTxt (쪽 번호 #btnPageNum).
 *        테마 화면에서 두 클래스를 쓰는 곳은 msList.jsp 하나 (B4 Result 2절 조사표).
 *  판넬이 컸던 원인 (375px 측정 · 소스):
 *    ① msList.jsp:483-492 화면 <style> 의 .moveDiv .ui-btn-inner { height:38px } · .moveTxt .ui-btn-inner { height:32px }
 *       (content-box) 에 4-1 의 48px 공식 위아래 여백(12.5px × 2)이 더해져 버튼 66 · 60px
 *    ② jQM .ui-btn 위아래 margin .5em(8px), ③ 그림 32px · 번호 20px
 *  - 버튼 높이 = 그림(줄) 높이 + 위아래 여백 + 테두리 3 (4-1 과 같은 계산). 터치 44px · 그림 24px (기본),
 *    마우스(hover:hover · pointer:fine) 40px · 그림 20px. 화면 폭이 아니라 입력 방식으로 나눈다.
 *  - 판넬 위아래 여백 8px = 버튼 위아래 margin --jn-space-2 → 판넬 높이 8 + 44 + 8 = 60px (마우스 56px).
 *  - 모양: 흰 버튼(2-4). 비활성(첫 쪽 '처음 · 이전' 등 msList.js:383-421 ui-disabled)은 흐린 테두리 · 흐린 그림.
 *  - 칸 폭(ui-grid-d 5칸 20%) · position · display · float 는 바꾸지 않는다 (3-1 원칙 4).
 *    그림 크기(img width · height)는 2-10 이 정한 아이콘 크기라 바꾼다 (B4 Result 2절 보고). */
:root .ui-page .ui-btn.moveDiv,
:root .ui-page .ui-btn.moveTxt {
	margin-top: var(--jn-space-2);
	margin-bottom: var(--jn-space-2);
	background: var(--jn-color-input);
	border: 1px solid var(--jn-color-line-input);
	color: var(--jn-color-text-title);
}

:root .ui-page .ui-btn.moveDiv[class*="ui-btn-hover-"],
:root .ui-page .ui-btn.moveDiv[class*="ui-btn-down-"],
:root .ui-page .ui-btn.moveTxt[class*="ui-btn-hover-"],
:root .ui-page .ui-btn.moveTxt[class*="ui-btn-down-"] {
	background: var(--jn-color-tint);
	border-color: var(--jn-color-line-input);
	color: var(--jn-color-text-title);
}

/* 높이 : 화면 <style> 의 height(38 · 32px)를 줄 높이로 바꾸고 여백은 (44 - 24 - 3) / 2 */
:root .ui-page .ui-btn.moveDiv > .ui-btn-inner,
:root .ui-page .ui-btn.moveTxt > .ui-btn-inner {
	height: 24px;
	padding-top: calc((var(--jn-touch) - 24px - 3px) / 2);
	padding-bottom: calc((var(--jn-touch) - 24px - 3px) / 2);
	line-height: 24px;
}

:root .ui-page .ui-btn.moveDiv img {
	width: 24px;
	height: 24px;
	vertical-align: top;
}

/* 쪽 번호 : 버튼 사이 가로 · 세로 가운데 (줄 높이 = 칸 높이), 화면 <style> 20px → 17px bold */
:root .ui-page .ui-btn.moveTxt > .ui-btn-inner {
	font-size: var(--jn-fs-h3);
	font-weight: var(--jn-fw-bold);
}

/* 비활성 : 4-6(점선 · disabled-bg, 잠긴 기능용) 대신 흐린 테두리 + 흐린 그림 (쪽 끝이라 누를 수 없음) */
:root .ui-page .ui-btn.moveDiv.ui-disabled {
	background: var(--jn-color-input);
	border: 1px solid var(--jn-color-line);
	color: var(--jn-color-text-muted);
}

:root .ui-page .ui-btn.moveDiv.ui-disabled img {
	opacity: 0.35;
}

/* 마우스 기기 : 40px · 그림 20px, 여백 (40 - 20 - 3) / 2 */
@media (hover: hover) and (pointer: fine) {
	:root .ui-page .ui-btn.moveDiv > .ui-btn-inner,
	:root .ui-page .ui-btn.moveTxt > .ui-btn-inner {
		height: 20px;
		padding-top: calc((40px - 20px - 3px) / 2);
		padding-bottom: calc((40px - 20px - 3px) / 2);
		line-height: 20px;
	}

	:root .ui-page .ui-btn.moveDiv img {
		width: 20px;
		height: 20px;
	}
}


/* =====================================================================
 * 5. 접이식 → 섹션 카드 (2-3)
 *    구조: div.ui-collapsible > h3.ui-collapsible-heading > a.ui-collapsible-heading-toggle.ui-btn.ui-btn-up-{s}
 *          > .ui-btn-inner > .ui-btn-text + .ui-icon-plus/minus · 내용 div.ui-collapsible-content.ui-body-{s} (3-2)
 *    대상 swatch: o(A:128 '접이식 갈색 띠 #523B37') 를 기준으로 하되, 3-4 '접이식 → 섹션 카드' 는 swatch 를
 *                 가리지 않으므로 모든 접이식 머리에 같은 카드 모양을 쓴다.
 *    - 기존 .ui-icon-plus/minus 원 아이콘은 숨기고(3-4) 오른쪽 꺾쇠를 .ui-btn-inner::after 로 그린다.
 *    - 금색 마름모는 .ui-btn-text::before (3-4).
 * ===================================================================== */

:root .ui-page .ui-collapsible-heading .ui-btn,
:root .ui-page .ui-collapsible-heading .ui-btn[class*="ui-btn-up-"] {
	background: var(--jn-color-surface);
	border: 1px solid var(--jn-color-line);
	box-shadow: none;
	color: var(--jn-color-text-title);
	font-family: var(--jn-font-display);
	font-weight: var(--jn-fw-bold);
}

:root .ui-page .ui-collapsible-heading .ui-btn[class*="ui-btn-hover-"],
:root .ui-page .ui-collapsible-heading .ui-btn[class*="ui-btn-down-"] {
	background: var(--jn-color-tint);
	border: 1px solid var(--jn-color-line);
	color: var(--jn-color-text-title);
}

/* 펼친 머리 : 아래 구분선만 연하게 */
:root .ui-page .ui-collapsible-heading:not(.ui-collapsible-heading-collapsed) .ui-btn {
	border-bottom-color: var(--jn-color-line-soft);
}

/* 머리 높이 = --jn-row-h(52) = 위아래 여백 + 줄 높이 22 + 테두리 2. 왼쪽 아이콘 자리(40px) → 16px, 오른쪽 꺾쇠 자리 44px */
:root .ui-page .ui-collapsible-heading .ui-btn > .ui-btn-inner {
	padding: calc((var(--jn-row-h) - 24px) / 2) var(--jn-touch) calc((var(--jn-row-h) - 24px) / 2) var(--jn-space-4);
	font-size: var(--jn-fs-h3);
	line-height: 22px;
}

/* 금색 마름모 6px (45도 회전) */
:root .ui-page .ui-collapsible-heading .ui-btn-text::before {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin: 0 var(--jn-space-2) 0 var(--jn-space-1);
	vertical-align: middle;
	background: var(--jn-color-gold);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

/* 기존 (+)/(−) 원 아이콘 숨김 (3-4 지정) */
:root .ui-page .ui-collapsible-heading .ui-icon {
	display: none;
}

/* 오른쪽 꺾쇠 : 펼침 = 위(∧), 접힘 = 아래(∨) */
:root .ui-page .ui-collapsible-heading .ui-btn > .ui-btn-inner::after {
	content: "";
	position: absolute;
	top: 50%;
	right: var(--jn-space-4);
	width: 8px;
	height: 8px;
	margin-top: -2px;
	border-right: 2px solid var(--jn-color-text-gold);
	border-bottom: 2px solid var(--jn-color-text-gold);
	-webkit-transform: rotate(-135deg);
	transform: rotate(-135deg);
}

:root .ui-page .ui-collapsible-heading-collapsed .ui-btn > .ui-btn-inner::after {
	margin-top: -7px;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

/* 모서리 : jQM 이 붙이는 모서리 클래스(펼침 = ui-corner-top, 접힘 = ui-corner-all)에 카드 모서리 적용 */
:root .ui-page .ui-collapsible-heading .ui-btn.ui-corner-all {
	border-radius: var(--jn-radius-lg);
}

:root .ui-page .ui-collapsible-heading .ui-btn.ui-corner-top {
	border-radius: var(--jn-radius-lg) var(--jn-radius-lg) 0 0;
}

:root .ui-page .ui-collapsible-heading .ui-btn.ui-corner-bottom {
	border-radius: 0 0 var(--jn-radius-lg) var(--jn-radius-lg);
}

/* 내용 : 카드 바탕, 안쪽 여백 16px (swatch o 내용 = 검정 #06060B · 금색 글자 대체, 3-3 o 접이식 내용) */
:root .ui-page .ui-collapsible-content,
:root .ui-page .ui-collapsible-content[class*="ui-body-"] {
	background: var(--jn-color-surface);
	border-color: var(--jn-color-line);
	color: var(--jn-color-text);
	padding: var(--jn-space-4);
}

:root .ui-page .ui-collapsible-content.ui-corner-bottom {
	border-radius: 0 0 var(--jn-radius-lg) var(--jn-radius-lg);
}


/* =====================================================================
 * 6. 입력 (2-5, jQM 마크업 유지)
 *    대상 swatch: 입력 요소가 물려받는 모든 swatch (선택상자 진한 갈색 버튼형 폐지 — 2-5)
 *    근거: design-spec 3-4 선택상자 · 라디오 묶음 · 세로 라디오·체크 · 텍스트 입력 행
 * ===================================================================== */

/* 6-1. 선택상자 : 높이 = --jn-input-h(48) = 위아래 여백 + 줄 높이 20 + 바깥 테두리 2 + .ui-btn-inner 위 테두리 1 (4-1 버튼과 같은 계산),
 *      흰 바탕, 오른쪽 금색 꺾쇠 */
:root .ui-page .ui-select .ui-btn,
:root .ui-page .ui-select .ui-btn[class*="ui-btn-up-"],
:root .ui-popup .ui-select .ui-btn {
	background: var(--jn-color-input);
	border: 1px solid var(--jn-color-line-input);
	border-radius: var(--jn-radius-md);
	box-shadow: none;
	color: var(--jn-color-text);
	font-weight: var(--jn-fw-regular);
}

:root .ui-page .ui-select .ui-btn[class*="ui-btn-hover-"],
:root .ui-page .ui-select .ui-btn[class*="ui-btn-down-"] {
	background: var(--jn-color-input);
	border: 1px solid var(--jn-color-text-gold);
	color: var(--jn-color-text);
}

:root .ui-page .ui-select .ui-btn.ui-focus {
	border-color: var(--jn-color-brand);
	box-shadow: 0 0 0 1px var(--jn-color-brand);
}

:root .ui-page .ui-select .ui-btn > .ui-btn-inner {
	text-align: left;
	padding-top: calc((var(--jn-input-h) - 23px) / 2);
	padding-bottom: calc((var(--jn-input-h) - 23px) / 2);
	padding-left: var(--jn-space-3);
	font-size: var(--jn-fs-input);
	line-height: 20px;
}

/* 아래 화살표 원 아이콘 → 금색 꺾쇠 (아이콘 칸 자체를 꺾쇠 모양으로) */
:root .ui-page .ui-select .ui-icon,
:root .ui-popup .ui-select .ui-icon {
	background: none;
	border-radius: 0;
	box-shadow: none;
	width: 8px;
	height: 8px;
	margin-top: -7px;
	border-right: 2px solid var(--jn-color-text-gold);
	border-bottom: 2px solid var(--jn-color-text-gold);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

/* 6-2. 묶음 모서리 */
:root .ui-page .ui-controlgroup.ui-corner-all,
:root .ui-page .ui-controlgroup .ui-controlgroup-controls {
	border-radius: var(--jn-radius-md);
}

/* 6-3. 가로 라디오 묶음 → 세그먼트 (칸 높이 = --jn-touch(44), design-spec v2.1 2-5 · BR11_B 질문 4 결정: .jn-segment 와 같음)
 * 테두리 상자 대신 붙어 있는 칸 사이 선으로 칸을 나눈다 (부모 상자 선택은 :has() 가 필요해 쓰지 않음) */
:root .ui-page .ui-controlgroup-horizontal .ui-radio .ui-btn,
:root .ui-page .ui-controlgroup-horizontal .ui-checkbox .ui-btn {
	background: var(--jn-color-input);
	border-color: var(--jn-color-line-input);
	color: var(--jn-color-text-sub);
	font-weight: var(--jn-fw-medium);
}

:root .ui-page .ui-controlgroup-horizontal .ui-radio .ui-btn > .ui-btn-inner,
:root .ui-page .ui-controlgroup-horizontal .ui-checkbox .ui-btn > .ui-btn-inner {
	/* 44 = 위아래 여백 + 줄 높이 20 + 바깥 테두리 2 + .ui-btn-inner 위 테두리 1 (4-1 버튼과 같은 계산) */
	padding: calc((var(--jn-touch) - 23px) / 2) var(--jn-space-4);
	font-size: var(--jn-fs-base);
	line-height: 20px;
}

:root .ui-page .ui-controlgroup-horizontal .ui-radio .ui-radio-on,
:root .ui-page .ui-controlgroup-horizontal .ui-radio .ui-btn-active,
:root .ui-page .ui-controlgroup-horizontal .ui-checkbox .ui-checkbox-on {
	background: var(--jn-color-brand);
	border-color: var(--jn-color-brand);
	color: var(--jn-color-on-brand);
	font-weight: var(--jn-fw-bold);
}

/* 6-4. 세로 라디오 · 체크 : 흰 행 + 선택 표시 brand */
:root .ui-page .ui-radio .ui-btn,
:root .ui-page .ui-checkbox .ui-btn {
	background: var(--jn-color-input);
	border-color: var(--jn-color-line-input);
	color: var(--jn-color-text);
	font-weight: var(--jn-fw-regular);
}

:root .ui-page .ui-radio .ui-btn > .ui-btn-inner,
:root .ui-page .ui-checkbox .ui-btn > .ui-btn-inner {
	/* 48 = 위아래 여백 + 줄 높이 20 + 바깥 테두리 2 + .ui-btn-inner 위 테두리 1 (4-1 버튼과 같은 계산) */
	padding-top: calc((var(--jn-input-h) - 23px) / 2);
	padding-bottom: calc((var(--jn-input-h) - 23px) / 2);
	line-height: 20px;
}

/* 아이콘을 행 가운데로 (jQM top:1.1em 은 48px 행에서 위로 치우침) */
:root .ui-page .ui-radio .ui-btn-icon-left .ui-icon,
:root .ui-page .ui-checkbox .ui-btn-icon-left .ui-icon,
:root .ui-page .ui-radio .ui-btn-icon-right .ui-icon,
:root .ui-page .ui-checkbox .ui-btn-icon-right .ui-icon {
	top: 50%;
}

:root .ui-page .ui-radio-on .ui-icon,
:root .ui-page .ui-checkbox-on .ui-icon {
	background-color: var(--jn-color-brand);
}

:root .ui-page .ui-radio-off .ui-icon,
:root .ui-page .ui-checkbox-off .ui-icon {
	background-color: var(--jn-color-input);
	box-shadow: inset 0 0 0 2px var(--jn-color-line-strong);
}

/* 6-5. 텍스트 입력 : 높이 = --jn-input-h(48) = 위아래 12 + 줄 높이 22 + 테두리 2, 글자 16px, 초점 = brand 2px */
:root .ui-page div.ui-input-text,
:root .ui-page div.ui-input-search,
:root .ui-page textarea.ui-input-text,
:root .ui-popup div.ui-input-text,
:root .ui-popup textarea.ui-input-text {
	background: var(--jn-color-input);
	border: 1px solid var(--jn-color-line-input);
	border-radius: var(--jn-radius-md);
	box-shadow: none;
	color: var(--jn-color-text);
}

:root .ui-page input.ui-input-text,
:root .ui-page textarea.ui-input-text,
:root .ui-popup input.ui-input-text,
:root .ui-popup textarea.ui-input-text {
	font-family: var(--jn-font-body);
	font-size: var(--jn-fs-input);
	color: var(--jn-color-text);
}

/* jQM 구조: 좌우 여백은 감싸는 div, 안쪽 input 은 위아래 여백만 (input 은 width:100% content-box 라
 * 좌우 여백을 주면 넘친다) */
:root .ui-page div.ui-input-text,
:root .ui-popup div.ui-input-text {
	padding-left: var(--jn-space-3);
	padding-right: var(--jn-space-3);
}

:root .ui-page div.ui-input-text input.ui-input-text,
:root .ui-page div.ui-input-search input.ui-input-text,
:root .ui-popup div.ui-input-text input.ui-input-text {
	padding-top: var(--jn-space-3);
	padding-bottom: var(--jn-space-3);
	line-height: 22px;
}

:root .ui-page textarea.ui-input-text,
:root .ui-popup textarea.ui-input-text {
	padding: var(--jn-space-3);
	line-height: var(--jn-lh-base);
}

:root .ui-page div.ui-input-text.ui-focus,
:root .ui-page div.ui-input-search.ui-focus,
:root .ui-page textarea.ui-input-text.ui-focus,
:root .ui-popup div.ui-input-text.ui-focus,
:root .ui-popup textarea.ui-input-text.ui-focus {
	border-color: var(--jn-color-brand);
	box-shadow: 0 0 0 1px var(--jn-color-brand);
}

/* 비활성 입력칸 → 고정값 바탕 (2-5 '고정값') */
:root .ui-page div.ui-input-text.ui-disabled,
:root .ui-page input.ui-input-text:disabled,
:root .ui-page textarea.ui-input-text:disabled {
	background: var(--jn-color-input-locked);
}

/* 6-6. 라벨 : 14px bold title (2-5 라벨) */
:root .ui-page label.ui-input-text,
:root .ui-page label.ui-select,
:root .ui-page .ui-controlgroup-label {
	font-size: var(--jn-fs-sm);
	font-weight: var(--jn-fw-bold);
	color: var(--jn-color-text-title);
}

/* jmCommon.css:582,590 의 'fieldset legend' · 'div label:first-child' (#870000) → 라벨 색
 * jQM 버튼형 라벨(라디오 · 체크)과 새 부품(jn-*) 라벨은 제외 */
:root .ui-page fieldset legend,
:root .ui-page div label:first-child:not(.ui-btn):not([class*="jn-"]) {
	color: var(--jn-color-text-title);
}

/* 6-7. #jmForm (jmForm.css:164-240 id 규칙, 입력 화면 5개: /mobile/cn/, /mobile/cn/T2/, /mobile/mn/, /mobile/ms/, /mobile/sn/)
 *      id 선택자라 위 규칙보다 강하므로 같은 id 를 붙여 덮는다 (!important 없음) */
:root #jmForm .ui-collapsible-heading {
	background: transparent;
	color: inherit;
}

:root #jmForm .ui-collapsible-heading-toggle,
:root #jmForm .ui-collapsible-heading-toggle[class*="ui-btn-up-"] {
	background: var(--jn-color-surface);
	color: var(--jn-color-text-title);
}

:root #jmForm .ui-collapsible-heading-toggle[class*="ui-btn-hover-"],
:root #jmForm .ui-collapsible-heading-toggle[class*="ui-btn-down-"] {
	background: var(--jn-color-tint);
}

:root #jmForm .ui-select .ui-btn-inner {
	background: transparent;
	color: var(--jn-color-text);
}

:root #jmForm .ui-input-text {
	color: var(--jn-color-text);
	font-weight: var(--jn-fw-regular);
}

:root #jmForm .ui-radio-on,
:root #jmForm .ui-checkbox-on {
	background: var(--jn-color-input);
	color: var(--jn-color-text);
}

:root #jmForm .ui-controlgroup-horizontal .ui-radio-on,
:root #jmForm .ui-controlgroup-horizontal .ui-checkbox-on {
	background: var(--jn-color-brand);
	color: var(--jn-color-on-brand);
}

:root #jmForm .ui-checkbox-on .ui-icon,
:root #jmForm .ui-radio-on .ui-icon {
	background-color: var(--jn-color-brand);
}

:root #jmForm .ui-checkbox-off .ui-icon,
:root #jmForm .ui-radio-off .ui-icon {
	background-color: var(--jn-color-input);
	border-color: var(--jn-color-line-strong);
}

:root #jmForm .ui-btn-inner .ui-btn-down-n {
	background: var(--jn-color-tint-strong);
	color: var(--jn-color-text);
}


/* =====================================================================
 * 7. 목록 · 탭 줄
 *    구조: ul.ui-listview > li.ui-li.ui-btn.ui-btn-up-{s} > .ui-btn-inner.ui-li > .ui-btn-text > a.ui-link-inherit (3-2)
 *    대상 swatch: n(A:127 '흰/연회색 버튼·목록') 기준, 행은 swatch 와 관계없이 카드 안 목록 모양
 *    근거: design-spec 3-3 n 행, 3-4 '목록' · '탭 줄'
 * ===================================================================== */

:root .ui-page .ui-listview .ui-li.ui-btn,
:root .ui-page .ui-listview .ui-li.ui-btn[class*="ui-btn-up-"],
:root .ui-page .ui-listview .ui-li-static,
:root .ui-page .ui-listview .ui-li-static[class*="ui-btn-up-"] {
	background: var(--jn-color-surface);
	border-color: var(--jn-color-line-soft);
	color: var(--jn-color-text-strong);
	font-weight: var(--jn-fw-medium);
}

/* 행 상태 (BR11_B3 B3-1) : hover · down = tint, 글자 · 테두리는 보통 상태와 같게.
 * 행 안 링크의 원본 상태 색(흰 글자 · 짙은 갈색 바탕)은 4-1 상태 링크 규칙에서 지운다 */
:root .ui-page .ui-listview .ui-li.ui-btn[class*="ui-btn-hover-"],
:root .ui-page .ui-listview .ui-li.ui-btn[class*="ui-btn-down-"] {
	background: var(--jn-color-tint);
	border-color: var(--jn-color-line-soft);
	color: var(--jn-color-text-strong);
}

/* 초점(ui-focus) : 행은 4-5 의 brand 2px 링 대신 표시 없음 — 누를 때마다 붙어 갈색 테두리로 보였다.
 * 키보드 초점은 행 안 링크의 브라우저 기본 outline 이 남는다 */
:root .ui-page .ui-listview .ui-li.ui-btn.ui-focus {
	box-shadow: none;
}

/* 선택(ui-btn-active, jQM 이 누른 행에 붙임) : tint-strong + 왼쪽 3px brand 선(inset 그림자라 배치 변화 없음), 글자 text-strong.
 * hover · focus 와 함께 붙어도 이 규칙이 이기도록 위 두 규칙보다 뒤에 둔다 */
:root .ui-page .ui-listview .ui-li.ui-btn.ui-btn-active,
:root .ui-page .ui-listview .ui-li.ui-btn.ui-btn-active[class*="ui-btn-hover-"],
:root .ui-page .ui-listview .ui-li.ui-btn.ui-btn-active[class*="ui-btn-down-"] {
	background: var(--jn-color-tint-strong);
	border-color: var(--jn-color-line-soft);
	box-shadow: inset 3px 0 0 var(--jn-color-brand);
	color: var(--jn-color-text-strong);
}

/* [BR11_B3] down · active = tint-strong + text-title → 위 두 규칙으로 나눔. 소스 클렌징 때 삭제
:root .ui-page .ui-listview .ui-li.ui-btn[class*="ui-btn-down-"],
:root .ui-page .ui-listview .ui-li.ui-btn.ui-btn-active {
	background: var(--jn-color-tint-strong);
	border-color: var(--jn-color-line-soft);
	color: var(--jn-color-text-title);
}
*/

/* 행 높이 = --jn-row-h(52): 위아래 여백만 (좌우 · 아이콘 자리 여백은 jQM 유지) */
:root .ui-page .ui-listview .ui-li > .ui-btn-inner > .ui-btn-text > .ui-link-inherit {
	padding-top: calc((var(--jn-row-h) - 22px) / 2);
	padding-bottom: calc((var(--jn-row-h) - 22px) / 2);
	line-height: 22px;
}

:root .ui-page .ui-listview .ui-li-static {
	padding-top: calc((var(--jn-row-h) - 24px) / 2);
	padding-bottom: calc((var(--jn-row-h) - 24px) / 2);
	line-height: 22px;
}

/* 구분 행 */
:root .ui-page .ui-listview .ui-li-divider,
:root .ui-page .ui-listview .ui-li-divider[class*="ui-bar-"] {
	background: var(--jn-color-tint-strong);
	border-color: var(--jn-color-line-soft);
	color: var(--jn-color-text-title);
	font-size: var(--jn-fs-sm);
	font-weight: var(--jn-fw-bold);
}

/* 개수 표시 */
:root .ui-page .ui-listview .ui-li-count {
	background: var(--jn-color-tint);
	border: 0;
	border-radius: var(--jn-radius-pill);
	color: var(--jn-color-text-gold);
	font-size: var(--jn-fs-xxs);
	font-weight: var(--jn-fw-bold);
	text-shadow: none;
}

/* 묶음(inset) 목록 : 카드 모서리 · 테두리 */
:root .ui-page .ui-listview-inset,
:root .ui-page .ui-listview-inset.ui-corner-all {
	border-radius: var(--jn-radius-lg);
	box-shadow: none;
}

/* 오른쪽 화살표 원 아이콘 → 금색 꺾쇠 */
:root .ui-page .ui-listview .ui-icon-arrow-r {
	background: none;
	border-radius: 0;
	box-shadow: none;
	width: 8px;
	height: 8px;
	margin-top: -5px;
	border-top: 2px solid var(--jn-color-text-gold);
	border-right: 2px solid var(--jn-color-text-gold);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

/* 탭 줄 (navbar) → 세그먼트 모양 (단계 표시로 바꾸는 것은 ③ 구조층) */
:root .ui-page .ui-navbar .ui-btn,
:root .ui-page .ui-navbar .ui-btn[class*="ui-btn-up-"],
:root .ui-page .ui-navbar .ui-btn[class*="ui-btn-hover-"],
:root .ui-page .ui-navbar .ui-btn[class*="ui-btn-down-"] {
	background: var(--jn-color-input);
	border-color: var(--jn-color-line-input);
	color: var(--jn-color-text-sub);
	font-weight: var(--jn-fw-medium);
}

:root .ui-page .ui-navbar .ui-btn > .ui-btn-inner {
	font-size: var(--jn-fs-sm);
}

:root .ui-page .ui-navbar .ui-btn.ui-btn-active {
	background: var(--jn-color-brand);
	border-color: var(--jn-color-brand);
	color: var(--jn-color-on-brand);
	font-weight: var(--jn-fw-bold);
}


/* =====================================================================
 * 8. 팝업 · 로더
 *    대상 swatch: e(A:134 '#infoPopup* 팝업 · 로더'), a(A:137 팝업 배경)
 *    근거: design-spec 2-9 · 3-3 e · a 행 · 3-4 'jQM 팝업' · '대화상자 페이지' · '로더' · '날짜 선택'
 *    - 색 · 모서리 · 그림자만. 위치 · 폭 계산(adjustPopup*, popupDark.jsp 6~25행)은 그대로 (A:233-236).
 *      (BR11_C 5-2: 폭은 12-3 에서 화면 폭 - 32px 을 넘지 않게만 덮는다. 위치 계산은 그대로)
 *    - popupDark.jsp 의 style="background:#ffffff !important" 는 흰 바탕이라 그대로 둔다 (3-1 #6).
 *    - checkMobile.js 가 JS 로 넣는 로더 폭 · 테두리(A:151)는 덮지 않는다.
 * ===================================================================== */

/* 8-1. jQM 팝업 */
:root .ui-popup,
:root .ui-popup[class*="ui-body-"] {
	background: var(--jn-color-surface);
	border: 1px solid var(--jn-color-line);
	color: var(--jn-color-text);
}

:root .ui-popup.ui-corner-all {
	border-radius: var(--jn-radius-xl);
}

:root .ui-popup.ui-overlay-shadow {
	box-shadow: var(--jn-shadow-popup);
}

/* 팝업 뒤 배경 : jQM 은 검정 + opacity .5 → 토큰 overlay 그대로 보이게 opacity 1 */
:root .ui-popup-screen.ui-overlay-a,
:root .ui-popup-screen[class*="ui-overlay-"] {
	background: var(--jn-color-overlay);
}

:root .ui-popup-screen.in {
	opacity: 1;
}

/* jQM 은 body 에도 ui-overlay-{s} 를 붙인다 (페이지 swatch i → body.ui-overlay-i).
 * body 는 페이지 바탕으로 두고, jqm-docs-jm.css:64,70 의 1280px 이상 배경 이미지(bg.png · bgdark.png)도 지운다 */
:root body[class*="ui-overlay-"] {
	background: var(--jn-color-bg);
}

/* 8-2. popupDark.jsp · popupWarnDark.jsp 부품 (jqm-docs-jm.css:994 · 1246) */
:root .ui-popup .popupCommonHeaderDark,
:root .ui-popup .popupCommonHeader {
	background: transparent;
	color: var(--jn-color-text-title);
}

:root .ui-popup .popupCommonHeaderDark h3,
:root .ui-popup .popupCommonHeaderDark h4 {
	font-family: var(--jn-font-display);
	font-weight: var(--jn-fw-bold);
}

:root .ui-popup .popupCommonHeaderDark .fa {
	color: var(--jn-color-gold);
}

:root .ui-popup .hrBasePopup {
	background: var(--jn-color-line);
}

:root .ui-popup .popupCommonText {
	color: var(--jn-color-text);
	line-height: var(--jn-lh-base);
}

/* 8-6. 한자입력기 '확 인' (BR11_B3 B3-2) : popupChInputDark.jsp:79 · popupChInputFive.jsp:80 <img id="ChConf">
 * 원인 = 그림 파일 /images/premium/btb_check.svg 자체가 검정(#170609) 바탕 + 금색(#CFA565) 글자 (CSS 색으로 못 바꿈).
 * 같은 모양 · 크기의 주 버튼 색 그림(/images/share/btn-confirm.svg, brand 바탕 + on-brand 글자)으로 보이는 그림만 바꾼다.
 * img 의 content 교체는 Chrome · Android WebView · Safari(WKWebView) 에서 동작, 지원하지 않는 브라우저는 예전 그림 그대로.
 * id · src · 클릭 처리(#ChConf)는 그대로 */
:root .ui-popup #ChConf {
	content: url("/images/share/btn-confirm.svg");
}

/* 원본은 마우스를 올리면 src 를 btb_check_hover.svg 로 바꾼다 → 여기서는 주 버튼 hover(brand-deep) 그림 */
:root .ui-popup #ChConf:hover {
	content: url("/images/share/btn-confirm-hover.svg");
}

/* 8-7. 팝업 닫기 X 그림 (BR11_C 5-2, BL-062) : /images/enq/closeDark.png (짙은 빨강 24×25)
 * → /images/share/btn-close.svg (servicePopup 과 같은 × , text-sub 색 24×24). 8-6 과 같은 content 교체 방식.
 * 대상: popupDark.jsp(#idPopupClose · #idConfClose · #idCheckClose) · popupWarnDark.jsp(#warnClose)
 *       · 한자입력기 popupChInputDark.jsp · popupChInputFive.jsp(#ChConfClose) · popupZipDark.jsp · popupEmailShort.jsp 등
 *       팝업 안에서 이 그림을 쓰는 곳 전부. src · id · 클릭 처리는 그대로 */
:root .ui-popup img[src$="/images/enq/closeDark.png"] {
	content: url("/images/share/btn-close.svg");
}

/* 8-3. 대화상자 페이지 (#dlgCheck, /comm/commonDialog.jsp) : 2-9 모양 (색만) */
:root .ui-page.ui-dialog,
:root .ui-page.ui-dialog.ui-page-active {
	background: var(--jn-color-overlay);
}

:root .ui-page.ui-dialog .ui-dialog-contain {
	border-radius: var(--jn-radius-xl);
	box-shadow: var(--jn-shadow-popup);
}

:root .ui-page.ui-dialog .ui-dialog-contain > .ui-header,
:root .ui-page.ui-dialog .ui-dialog-contain > .ui-header[class*="ui-bar-"] {
	background: var(--jn-color-surface);
	border-color: var(--jn-color-line-soft);
	color: var(--jn-color-text-title);
}

:root .ui-page.ui-dialog .ui-dialog-contain > .ui-header .ui-title {
	color: var(--jn-color-text-title);
	font-size: var(--jn-fs-h2);
}

/* [BR11_B5] 흰 카드 → 아래 8-4 상자 없음으로 교체 — 소스 클렌징 때 삭제
/* 8-4. 로더 : 흰 카드 + 본문 글자 (3-4 '로더') *\/
:root .ui-loader.ui-body-e,
:root .ui-loader[class*="ui-body-"],
:root .ui-loader-verbose {
	background: var(--jn-color-surface);
	border: 1px solid var(--jn-color-line);
	color: var(--jn-color-text);
	box-shadow: var(--jn-shadow-popup);
}
*/

/* 8-4. 로더 : 그림만 — 상자 · 글자 없음 (BR11_B5 1차 · 2차, design-spec v2.4 3-4 로더 행)
 *  ① jQM .ui-loader ($.mobile.loading · viewBlockMsg · viewIconMsg 등, 모든 swatch · default / verbose / textonly)
 *     : 바탕 · 테두리 · 그림자 · 모서리 없음, 원 · 그림 opacity 1 (jQM .ui-loader-verbose .88 · .ui-loader-default .18
 *       · jmForm.css:39 .8 을 덮음). 원 = .ui-icon (아래 brand-deep 동그라미), 그림 = viewIconMsg 의 img.
 *     checkMobile.js htmlLoader* 가 JS 로 넣는 인라인 테두리(#555)는 덮지 않는다 (테마 화면 호출 0곳) */
:root .ui-loader.ui-body-e,
:root .ui-loader[class*="ui-body-"],
:root .ui-loader-verbose {
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: var(--jn-color-text);
	opacity: 1;
}

/* ① 글자 숨김 (2차) : 화면에서만 숨기고 스크린리더 트리에는 남긴다 (display:none 아님)
 *    viewBlockMsg  → <span class="ui-icon ui-icon-loading"></span><h1>Loading ..</h1>
 *    viewIconMsg   → <span class="ui-bar ui-corner-all"><img src="…"><br><h2>처리중..!</h2></span>
 *    그 밖 요소가 아닌 글자(viewCheckMsg · htmlLoader*, 테마 화면 호출 0곳)와 <br> 줄은 font-size · line-height 0 */
:root .ui-loader h1,
:root .ui-loader h2 {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

:root .ui-loader-verbose,
:root .ui-loader-verbose .ui-bar {
	font-size: 0;
	line-height: 0;
}

:root .ui-loader-verbose .ui-bar {
	padding: 0;
}

/* ① 가운데 (2차) : jQM 은 margin-top -43px 고정 (글자 줄 포함 높이 기준) → 글자를 빼면 그림이 위아래로 어긋남
 *    (원 10px 위, 메일 128px 그림 37px 아래). 그림 크기와 상관없이 가운데 오도록 translate 로.
 *    JS 가 margin 을 인라인으로 넣는 로더(htmlLoader*)는 그 위치를 그대로 둔다 */
:root .ui-loader-verbose:not([style*="margin"]) {
	margin: 0;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

:root .ui-loader-verbose .ui-icon {
	margin: 0 auto;
	opacity: 1;
}

/* ① 뒤 배경 div (jqm-docs-jm.css:361 .ui-loader-background 검정 .3, 로더가 뜬 동안 html.ui-loading 에서 보임)
 *    → overlay 토큰을 절반 농도로 (--jn-color-overlay 보다 옅게) */
:root .ui-loader-background {
	background: var(--jn-color-overlay);
	opacity: .5;
}

/* ② popupDark.jsp #loaderPopup (callBasicLoader · callImageLoader · callCustomLoader, 테마 화면 호출 0곳)
 *    바탕은 원래 인라인 transparent !important. 8-1 의 테두리 · 모서리 · 그림자만 없앰, 뒤 배경은 8-1 의 절반 농도 */
:root #loaderPopup.ui-popup {
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

:root #loaderPopup-screen.in {
	opacity: .5;
}

:root .ui-loader h1 {
	color: var(--jn-color-text);
	font-family: var(--jn-font-body);
}

:root .ui-loader .ui-icon {
	background-color: var(--jn-color-brand-deep);
}

/* 8-5. 날짜 선택 (jqm-datebox calbox) : 2-9 색, 선택 날짜 brand */
:root .ui-datebox-container {
	background: var(--jn-color-surface);
	/* !important: ① 원본 jqm-datebox.css:102 'border: 5px solid #111 !important' */
	border: 1px solid var(--jn-color-line) !important;
	border-radius: var(--jn-radius-xl);
	box-shadow: var(--jn-shadow-popup);
	color: var(--jn-color-text);
	overflow: hidden;
}

:root .ui-datebox-container .ui-datebox-gridheader,
:root .ui-datebox-container .ui-datebox-gridlabel {
	color: var(--jn-color-text-title);
}

:root .ui-datebox-container .ui-datebox-griddate[class*="ui-btn-up-"] {
	background: var(--jn-color-input);
	border-color: var(--jn-color-line-soft);
	color: var(--jn-color-text);
}

:root .ui-datebox-container .ui-datebox-griddate.ui-btn-up-b,
:root .ui-datebox-container .ui-datebox-griddate.ui-btn-down-b,
:root .ui-datebox-container .ui-datebox-griddate[class*="ui-btn-down-"] {
	background: var(--jn-color-brand);
	border-color: var(--jn-color-brand);
	color: var(--jn-color-on-brand);
}

:root .ui-datebox-container .ui-datebox-griddate.ui-datebox-griddate-empty {
	background: transparent;
	color: var(--jn-color-text-muted);
}

/* 8-8. 기존 jQM 팝업 층 → 헤더 위 (BR11_B4 B4-3, BL-088, design-spec v2.3 2-9)
 *  jquery.mobile.min.css : .ui-popup-screen z-index 1099 · .ui-popup-container 1100.
 *  홈 · 허브 헤더 .headerClass 는 indexNew_header_footer.css 의 100000 (position:fixed, 바꾸지 않음)
 *  → #infoPopup2 직접 조작형(홈 공지 · 환경설정 · 허브 공지 · SNS 공유 알림)의 뒤 배경이 헤더 아래에 깔렸다.
 *  #infoPopup2 의 style="z-index:5000" 은 컨테이너 안쪽 요소라 효과가 없다.
 *  - 뒤 배경 = --jn-z-popup - 2, 컨테이너 = --jn-z-popup - 1 → servicePopup(#jnPopup, --jn-z-popup)이 늘 맨 위.
 *  - jQM 1.3.2 는 두 요소에 z-index 를 인라인으로 넣지 않는다 (컨테이너 인라인은 max-width · top · left 뿐, 확인함)
 *    → !important 없음.
 *  - 같은 위젯을 쓰는 사용자 지정 select 메뉴(짧은 목록)와 datebox 달력도 함께 올라온다.
 *  - calc() 를 정수 속성에 못 쓰는 구형 웹뷰를 위해 숫자 값을 먼저 쓴다 (200000 - 2 · 200000 - 1). */
:root .ui-popup-screen {
	z-index: 199998;
	z-index: calc(var(--jn-z-popup) - 2);
}

:root .ui-popup-container {
	z-index: 199999;
	z-index: calc(var(--jn-z-popup) - 1);
}


/* =====================================================================
 * 9. jQuery UI (.ui-widget 아래 색만)
 *    근거: A:78 jquery-ui.css(1.9.1, ThemeRoller 파랑 5c9ccc), A:238 테마 대상 화면 .dialog( 사용 0건,
 *          design-spec 3-4 'jQuery UI'. jQM 과 이름이 겹치는 .ui-corner-all · .ui-icon 은 .ui-widget 안에서만.
 * ===================================================================== */

:root .ui-widget,
:root .ui-widget input,
:root .ui-widget select,
:root .ui-widget textarea,
:root .ui-widget button {
	font-family: var(--jn-font-body);
}

:root .ui-widget.ui-widget-content,
:root .ui-widget .ui-widget-content {
	background: var(--jn-color-surface);
	border-color: var(--jn-color-line);
	color: var(--jn-color-text);
}

:root .ui-widget.ui-widget-header,
:root .ui-widget .ui-widget-header {
	background: var(--jn-color-brand-deep);
	border-color: var(--jn-color-brand-deep);
	color: var(--jn-color-text-on-dark);
}

:root .ui-widget .ui-state-default,
:root .ui-widget.ui-state-default {
	background: var(--jn-color-tint);
	border: 1px solid var(--jn-color-line-input);
	color: var(--jn-color-text-title);
}

:root .ui-widget .ui-state-default a {
	color: var(--jn-color-text-title);
}

:root .ui-widget .ui-state-hover,
:root .ui-widget .ui-state-focus,
:root .ui-widget.ui-state-hover,
:root .ui-widget.ui-state-focus {
	background: var(--jn-color-tint-strong);
	border: 1px solid var(--jn-color-text-gold);
	color: var(--jn-color-text-title);
}

:root .ui-widget .ui-state-active,
:root .ui-widget.ui-state-active {
	background: var(--jn-color-brand);
	border: 1px solid var(--jn-color-brand);
	color: var(--jn-color-on-brand);
}

:root .ui-widget .ui-state-active a {
	color: var(--jn-color-on-brand);
}

:root .ui-widget .ui-state-highlight,
:root .ui-widget.ui-state-highlight {
	background: var(--jn-color-tint);
	border: 1px solid var(--jn-color-gold);
	color: var(--jn-color-text);
}

:root .ui-widget .ui-state-error,
:root .ui-widget.ui-state-error {
	background: var(--jn-color-bad-bg);
	border: 1px solid var(--jn-color-bad);
	color: var(--jn-color-bad-text);
}

:root .ui-widget.ui-corner-all,
:root .ui-widget .ui-corner-all {
	border-radius: var(--jn-radius-md);
}

:root .ui-widget-overlay {
	background: var(--jn-color-overlay);
	opacity: 1;
}


/* =====================================================================
 * 10. 기존 공통 클래스
 *    근거: A:326 결과 화면 파란 글자(jmCommon.css:81,91,128, jqm-docs-jm.css:506),
 *          A:96-109 갈색 · 자주 상위 20 중 클래스 규칙에 있는 것 (design-spec 3-4 마지막 두 행)
 *    style="" 에 직접 쓴 색은 덮지 않는다 (D~G).
 * ===================================================================== */

/* 10-1. 결과 화면 파란 글자 : 한자 = brand, 날짜 등 = text-title */
:root .BigCharBlueBasic,
:root .BigCharBlue,
:root .BigCharRed {
	color: var(--jn-color-brand);
}

:root .blueClass {
	color: var(--jn-color-text-title);
}

/* 10-2. #870000 · #3E2723 · #CFA565 글자색 클래스 (jmCommon.css · jmForm.css · jqm-docs-jm.css) */
:root .SearchedChar,
:root .inputTitleTop,
:root .bodyTitleTop,
:root .bodyTitleIcon,
:root .hanjaDictGuide,
:root .starBigPoint,
:root .bodyTitleClass,
:root .iconBottomDarkTitle,
:root .belowGuideClass {
	color: var(--jn-color-brand);
}

:root .mainTopTitleClass {
	color: var(--jn-color-text-title);
}

:root .starBigChar {
	color: var(--jn-color-text-gold);
}

/* 10-3. 구매 · 실행 버튼 (animcharNew.css:276-370) → 2-4 주 버튼
 *  data-theme 가 c · d 등이면 4-4 보조 버튼 규칙(.ui-page .ui-btn-up-d)이 바탕을 투명으로 만드므로
 *  .ui-page .ui-btn.checkDarkButton 으로 한 단계 더 강하게 쓴다 (예: /comm/manual/infoManual.jsp:242 data-theme="d") */
:root .checkDarkButton,
:root .checkPanelButton,
:root .ui-page .ui-btn.checkDarkButton,
:root .ui-page .ui-btn.checkPanelButton {
	/* !important: ① 원본 animcharNew.css:279,282 / 334 'color · border … !important' */
	color: var(--jn-color-on-brand) !important;
	border: 1px solid var(--jn-color-brand) !important;
	background: var(--jn-color-brand);
	text-shadow: none;
}

:root .checkDarkButton:hover,
:root .checkDarkButton:active,
:root .checkPanelButton:hover,
:root .checkPanelButton:active,
:root .ui-page .ui-btn.checkDarkButton[class*="ui-btn-hover-"],
:root .ui-page .ui-btn.checkDarkButton[class*="ui-btn-down-"],
:root .ui-page .ui-btn.checkPanelButton[class*="ui-btn-hover-"],
:root .ui-page .ui-btn.checkPanelButton[class*="ui-btn-down-"] {
	background: var(--jn-color-brand-deep);
	border-color: var(--jn-color-brand-deep);
	text-shadow: none;
}

/* 10-4. 체크 버튼 ✔ · 글자 · 상태 (BR11_B4 B4-1, BL-054, design-spec v2.3 2-4)
 *  ✔ = animcharNew.css:144-155 .anim_char (WebSymbolsRegular 글꼴의 '.' 글자 &#46;, float:left · 20px · margin-left 10px).
 *  테마 화면의 .anim_char 86곳은 모두 버튼 안 (B4 Result 1절 조사표: 버튼 밖 0) → 범위를 버튼으로 좁히지 않는다.
 *  jmAnimation.js 등이 click · mouseover 때 .anim_after · .anim_rotate(회전)를 붙이지만 숨긴 span 이라 보이지 않는다.
 *  display 는 3-1 원칙 4 의 예외 — 2-4 v2.3 이 '이 span 을 숨긴다' 로 정함 */
:root .anim_char {
	display: none;
}

/* 오른쪽 글자 : ✔ 자리만큼 비운 margin-right 25px · 줄 높이 25px (animcharNew.css:158-162)
 *  → 가운데 정렬 · 줄 높이 20px (4-1 의 48px 공식, 25px 이면 버튼이 52px 가 됨) · 16px */
:root .ui-btn .anim_right {
	margin-right: 0;
	font-size: var(--jn-fs-body);
	line-height: inherit;
}

/* .checkButton (animcharNew.css:205-250, 자주색 그라데이션) : 테마 화면 사용 0곳이지만 2-4 대로 주 버튼으로 맞춘다 */
:root .checkButton,
:root .ui-page .ui-btn.checkButton {
	color: var(--jn-color-on-brand);
	border: 1px solid var(--jn-color-brand);
	background: var(--jn-color-brand);
	text-shadow: none;
}

:root .checkButton:hover,
:root .checkButton:active,
:root .ui-page .ui-btn.checkButton[class*="ui-btn-hover-"],
:root .ui-page .ui-btn.checkButton[class*="ui-btn-down-"] {
	background: var(--jn-color-brand-deep);
	border-color: var(--jn-color-brand-deep);
	color: var(--jn-color-on-brand);
	text-shadow: none;
}

/* 10-3 의 hover · down 테두리 보정 : 10-3 기본 규칙이 border 를 !important 로 써서(원본 !important 를 덮느라)
 *  hover · down 의 border-color 가 적용되지 않았다 (brand 테두리 + brand-deep 바탕). 같은 이유로 !important */
:root .checkDarkButton:hover,
:root .checkDarkButton:active,
:root .checkPanelButton:hover,
:root .checkPanelButton:active,
:root .ui-page .ui-btn.checkDarkButton[class*="ui-btn-hover-"],
:root .ui-page .ui-btn.checkDarkButton[class*="ui-btn-down-"],
:root .ui-page .ui-btn.checkPanelButton[class*="ui-btn-hover-"],
:root .ui-page .ui-btn.checkPanelButton[class*="ui-btn-down-"] {
	border-color: var(--jn-color-brand-deep) !important;
}

/* 흰 버튼 (2-4 '닫기 · 보조 동작') : 체크 버튼 묶음(.checkButtonWrap) 안 감싸는 div id 로 고른다 (마크업 변경 없음)
 *  #btnCloseDictionary '사전닫기' 13곳 (cn · cndoc · mn · mndoc · ms · sn 결과 화면)
 *  · #btnCloseWindow '닫 기' · #EmailReset '전달내용 초기화' (/mobile/share/paperEmailUser.jsp:245 · 254, class 없이 swatch o)
 *  그 밖(확인 · 이동 · 구매 · 결제 진행 · 다운로드 · 뷰어 · 이메일 · 후기 저장 · 지원요청)은 주 버튼 그대로.
 *  [BR11_B4 Q2] #btnOut '확인종료'(/mobile/mndoc/index.jsp:241)는 주 버튼: 조회 뒤 #btnGo 가 숨고(.offClass)
 *  단독 버튼만 남음 (아래 목록은 listview 이동 줄). 흰 버튼 선택자에서 주석 처리 — 소스 클렌징 때 삭제
 *  !important: ① 원본 animcharNew.css:279,282 · 314 '.checkDarkButton color · border … !important' 와 10-3 */
:root .checkButtonWrap #btnCloseDictionary .ui-btn,
/* [BR11_B4 Q2] :root .checkButtonWrap #btnOut .ui-btn, */
:root .checkButtonWrap #btnCloseWindow .ui-btn,
:root .checkButtonWrap #EmailReset .ui-btn {
	color: var(--jn-color-text-title) !important;
	border: 1px solid var(--jn-color-line-input) !important;
	background: var(--jn-color-input);
	text-shadow: none;
}

:root .checkButtonWrap #btnCloseDictionary .ui-btn:hover,
:root .checkButtonWrap #btnCloseDictionary .ui-btn:active,
:root .checkButtonWrap #btnCloseDictionary .ui-btn[class*="ui-btn-hover-"],
:root .checkButtonWrap #btnCloseDictionary .ui-btn[class*="ui-btn-down-"],
/* [BR11_B4 Q2]
:root .checkButtonWrap #btnOut .ui-btn:hover,
:root .checkButtonWrap #btnOut .ui-btn:active,
:root .checkButtonWrap #btnOut .ui-btn[class*="ui-btn-hover-"],
:root .checkButtonWrap #btnOut .ui-btn[class*="ui-btn-down-"],
*/
:root .checkButtonWrap #btnCloseWindow .ui-btn:hover,
:root .checkButtonWrap #btnCloseWindow .ui-btn:active,
:root .checkButtonWrap #btnCloseWindow .ui-btn[class*="ui-btn-hover-"],
:root .checkButtonWrap #btnCloseWindow .ui-btn[class*="ui-btn-down-"],
:root .checkButtonWrap #EmailReset .ui-btn:hover,
:root .checkButtonWrap #EmailReset .ui-btn:active,
:root .checkButtonWrap #EmailReset .ui-btn[class*="ui-btn-hover-"],
:root .checkButtonWrap #EmailReset .ui-btn[class*="ui-btn-down-"] {
	color: var(--jn-color-text-title) !important;
	border-color: var(--jn-color-line-input) !important;
	background: var(--jn-color-tint);
}


/* =====================================================================
 * 11. PC 600px 이상 : 콘텐츠 최대 720px 가운데, 바깥 bg-outer
 *     근거: A:192 대응표 'PC 컨테이너', 위험 R9(A:538) jqm-docs-jm.css:38-62 1280px 고정 폭 (!important)
 *     - .ui-page 는 jQM 이 position:absolute · left:0 · width:100% 로 두므로 right:0 + 좌우 margin auto 로 가운데.
 *     - 1280px 이상에서 jqm-docs-jm.css 가 width:1280px !important 를 주지만 max-width 가 width 보다
 *       우선하므로 폭에는 !important 가 필요 없다. 원본이 !important 인 좌우 테두리만 ① 로 덮는다.
 *     - 홈 · 허브 헤더(.headerClass, position:fixed · 100%)는 폭을 바꾸지 않는다 (3-4 '홈·허브 헤더').
 * ===================================================================== */

@media (min-width: 600px) {

	:root body,
	:root body[class*="ui-overlay-"] {
		background: var(--jn-color-bg-outer);
	}

	:root .ui-page {
		max-width: var(--jn-content-max);
		right: 0;
		margin-left: auto;
		margin-right: auto;
		border-left: 1px solid var(--jn-color-line);
		border-right: 1px solid var(--jn-color-line);
	}

	:root .ui-page .ui-header-fixed,
	:root .ui-page .ui-footer-fixed {
		max-width: var(--jn-content-max);
		margin-left: auto;
		margin-right: auto;
	}

	/* 대화상자 페이지는 화면 전체를 덮는다 */
	:root .ui-page.ui-dialog {
		max-width: none;
		border-left: 0;
		border-right: 0;
	}
}

@media (min-width: 1280px) {

	:root .ui-page {
		/* !important: ① 원본 jqm-docs-jm.css:44-45 'border-right/left: 1px #333 outset !important' */
		border-left: 1px solid var(--jn-color-line) !important;
		border-right: 1px solid var(--jn-color-line) !important;
		box-shadow: none;
	}

	:root .ui-page .ui-header,
	:root .ui-page .ui-footer {
		max-width: var(--jn-content-max);
		box-shadow: none;
	}

	/* [BR11_D1] BL-104 : footer 폭 = 칼럼 폭. 원본 jqm-docs-jm.css:54 'width:1280px !important' 를 위 max-width 로 줄인 뒤
	   좌우 padding(홈 #mainFooter 인라인 'padding:5px 5px', mobile/index.jsp:1185)이 더해져 730px → padding 을 폭 안에 넣는다 */
	:root .ui-page .ui-footer {
		box-sizing: border-box;
	}
}


/* =====================================================================
 * 12. 폭 예외 (design-spec 3-6)
 *     표준 뷰포트(3-5)에서 레이아웃 폭이 360~430px 가 되면서, 예전 폭(490~560px)에 맞춘 고정 폭이
 *     모바일에서는 넘치고 PC 720px 카드에서는 왼쪽으로 몰린다. 3-1 원칙 4 의 예외 ② · ③ 으로
 *     min-width · width · max-width · margin(좌우) · box-sizing 만 바꾼다. 배치 구조(2열 등)는 바꾸지 않는다.
 *     원본 CSS · JSP 는 수정하지 않는다. 근거는 '파일:행' (B4 = requests/sessions/BR11_B_inventory/B4_fixed_width.csv).
 * ===================================================================== */

/* 12-1. 홈 카드 영역 (/mobile/index.jsp, BL-046)
 *  - 홈에만 있는 #mainShow 의 형제로 범위를 한정한다 (#contentDiv · #viewHeadWrap 은 후기 · 상담작명 화면 20여 개도 같은 id 를 씀) */

/* 상단 제목 띠 : width:100% + JS 인라인 padding 0 20px(indexMain.js:413,437) → content-box 로 오른쪽 넘침 (375px 에서 r=395)
 *  근거: /mobile/index.jsp:924-936 #mainTitleWrap { width:100%; margin:-5px -10px 0 -10px } */
:root #mainShow ~ #mainTitleWrap {
	box-sizing: border-box;
	max-width: 100%;
}

/* 카드 묶음 : .centerSmallDiv min-width 380(모바일) · .centerBigDiv min-width 600(PC) → 부모 안 100%
 *  근거: /mobile/index.jsp:905-922 (B4 행 /mobile/index.jsp,908 · 918), indexMain.js:180-181,235-236 (클래스 교체) */
:root #mainShow ~ #contentDivWrap #contentDiv {
	box-sizing: border-box;
	min-width: 0;
	width: 100%;
}

/* 카드 안쪽 : 마크업 style="min-width:700px" + JS 인라인 min-width 700px(PC) / 360px(모바일) + 좌우 padding 15px
 *  근거: /mobile/index.jsp:1041 (B4 행 /mobile/index.jsp,1041), indexMain.js:188 · 243 (B4 행)
 *  !important: 원본이 style 속성 · JS .css() 인라인이라 !important 없이는 덮을 수 없다.
 *              design-spec 3-6 이 이 요소를 지정했으므로 3-1 ③(JS 가 넣는 인라인)에 준해 min-width 한 속성만 쓴다. */
:root #mainShow ~ #contentDivWrap #viewHeadWrap {
	box-sizing: border-box;
	min-width: 0 !important;
	width: 100%;
}

/* PC 메뉴 카드 오른쪽 상자 : min-width · max-width 75% + 좌우 padding 140px(content-box) + margin-left 80px
 *  → 720px 컨테이너에서 오른쪽이 약 45px 잘림 (1024px 캡처). padding 을 75% 안에 넣는다.
 *  근거: /mobile/index.jsp:722-733, 987-992 .mainRightBigClass (B4 스캔은 % 값이라 목록 밖, BR11_B2 캡처로 확인) */
:root #mainShow ~ #contentDivWrap .mainRightBigClass {
	box-sizing: border-box;
}

/* 같은 클래스를 쓰는 그 밖의 화면 (회사소개 /info/aboutus/ 등): 모바일 고정 최소 폭 해제, 최대 폭(400px)은 그대로
 *  근거: /info/aboutus/index.jsp:449 · /mobile/svc/svcProcessImage.jsp:140 · /css/premiumBasic.css:276 (B4 행 452 · 143 · 278 은 min-width 줄) */
:root .centerSmallDiv {
	box-sizing: border-box;
	min-width: 0;
	width: 100%;
}

/* 12-2. 입력 폼 고정 폭 → 카드 안쪽 폭 (BL-047)
 *  대상: #jmForm 화면 — 감명 /mobile/cn/ · /mobile/cn/T2/, 단순감명 /mobile/sn/, 순차작명 1단계 /mobile/mn/, 빠른작명 /mobile/ms/
 *  근거: /css/jmForm.css 행 번호 (아래 각 규칙). 마크업 · JS 는 바꾸지 않는다.
 *  CSS 로 못 바꾸는 인라인 폭(한자 입력칸 style="min-width:250px" 등)은 BR11_B2 Result 2절 목록 → BR11_E */

/* 라벨 줄 : 라벨은 왼쪽, 도움말 아이콘은 줄 오른쪽 끝
 *  근거: jmForm.css:48-54 .bodyTitleClass { display:inline-block; min-width:312px } → 아이콘이 다음 줄로 밀림
 *        jmForm.css:72-75 .iconMiddle (inline). 라벨 폭 = 줄 - 40px, 아이콘 칸 32px (사이 공백 포함 줄 안에 들어감) */
:root #jmForm .fieldWrapClass > .bodyTitleClass {
	min-width: 0;
	width: calc(100% - 40px);
}

:root #jmForm .fieldWrapClass > .info.iconMiddle {
	display: inline-block;
	width: 32px;
	text-align: right;
}

/* 입력 묶음 들여쓰기 15px 해제 → 라벨과 같은 왼쪽 선, 카드 안쪽 폭 100%
 *  근거: jmForm.css:64-66 .fieldInClass { margin-left:15px } */
:root #jmForm .fieldInClass {
	margin-left: 0;
}

/* 입력 묶음 최대 폭 해제 (PC 720px 카드에서 왼쪽 몰림 방지)
 *  근거: jmForm.css:97 .bigInputMaxSemi 325 · 101 .bigInputMax 330 · 105 .bigInputCheckMax 336
 *        · 110 .bigInputCheckSemi 333 · 115 .bigInputTextMax 323 (+ margin-left 5px) */
:root #jmForm .bigInputMaxSemi,
:root #jmForm .bigInputMax,
:root #jmForm .bigInputCheckMax,
:root #jmForm .bigInputCheckSemi,
:root #jmForm .bigInputTextMax {
	max-width: none;
}

:root #jmForm .bigInputTextMax {
	margin-left: 0;
}

/* 지역 · 대상자분류 선택 묶음 (순차 · 빠른작명은 가로 라디오 묶음 fieldset)
 *  !important: ① 원본 jmForm.css:132-134 '.selectMaxSemi { max-width:300px !important }' */
:root #jmForm .selectMaxSemi {
	max-width: none !important;
}

/* 한 칸짜리 선택상자 (출생연도 · 출생지역 · 대상자분류) : 323px → 카드 안쪽 폭 100%
 *  근거: jmForm.css:136 .selectMaxSemi .ui-select · 141 .selectMaxClass .ui-select { width:323px; margin-left:5px } */
:root #jmForm .selectMaxClass .ui-select,
:root #jmForm .selectMaxSemi .ui-select {
	width: auto;
	margin-left: 0;
}

/* 짝 칸 (월 · 일, 시 · 분) : 164px → 반씩, 사이 간격 --jn-space-2
 *  근거: jmForm.css:127 .selectMiddleClass .ui-select { width:164px } (jQM .ui-block-a/b 는 49.95% 띄움) */
:root #jmForm .selectMiddleClass .ui-select {
	width: auto;
}

:root #jmForm .ui-grid-a.bigInputCheckMax > .ui-block-a {
	box-sizing: border-box;
	padding-right: calc(var(--jn-space-2) / 2);
}

:root #jmForm .ui-grid-a.bigInputCheckMax > .ui-block-b {
	box-sizing: border-box;
	padding-left: calc(var(--jn-space-2) / 2);
}

/* jQM 격자 안 버튼 좌우 여백(.ui-block-* .ui-btn margin 0 5px)을 지워 짝 칸 바깥 선을 한 칸짜리와 맞춘다 */
:root #jmForm .ui-grid-a.bigInputCheckMax .ui-select .ui-btn {
	margin-left: 0;
	margin-right: 0;
}

/* 한자 입력칸 + 漢 아이콘 : 아이콘을 줄 오른쪽 끝(float) 대신 입력칸 오른쪽에 붙임
 *  근거: jmForm.css:154 .chIconWrap { display:inline-block; margin:5px 17px 0 0; float:right } → 375px 에서 다음 줄로 떨어짐
 *  입력칸 폭은 마크업 style="max-width:250px; min-width:250px" 라 덮지 않는다 (남은 폭 채우기는 BR11_E) */
:root #jmForm .chIconWrap {
	float: none;
	margin: 0 0 0 var(--jn-space-1);
	vertical-align: top;
}

/* 12-3. jQM 팝업 폭 → 화면 폭 - 32px (BR11_C 5-2, BL-048 · BL-062, design-spec 2-9 · --jn-popup-w)
 *  대상: servicePopup 으로 넘어가지 않는 jQM 팝업 — 직접 여는 #infoPopup* · 경고 · 한자입력기 · 우편번호 · 이메일
 *  근거: 서버가 기기별로 정한 인라인 폭 — popupDark.jsp:45 · 74 · 89 · 120 (pMin 370 / pMax 380, iphone 310, mUPD 330)
 *        popupWarnDark.jsp(min-width pMax2) · popupChInputDark.jsp · popupChInputFive.jsp:37 (min-width cMin 490 / mUPD 300)
 *        popupZipDark.jsp(zcMax) · popupEmailShort.jsp(EcMin · EcMax), checkMobile.js adjustPopupGeneralPosition (.css 350 · 420)
 *        → 375px 화면에서 380 · 490px 팝업이 오른쪽으로 넘침 (한자입력기 511px, BL-062)
 *  !important: 폭이 style 속성 · JS .css() 인라인이라 !important 없이는 덮을 수 없다 (3-1 ③, 12-1 과 같은 이유).
 *  - 600px 미만만: 최소 폭을 풀고 폭 · 최대 폭 = 화면 폭 - 32px (servicePopup 과 같은 폭), JS 가 넣은 left 를 풀어 가운데.
 *    안쪽 여백(.ui-content 15px)을 폭 안에 넣는다 (border-box).
 *  - PC(600px 이상)는 서버 · JS 폭(380 · 420 · 490 · 500)을 그대로 쓴다 (화면 폭 - 32px 보다 작아 넘치지 않음.
 *    여기서 max-width 를 덮으면 원래 500 · 420 상한이 풀려 한자입력기가 724px 로 늘어남 — 확인함).
 *  - 인라인 background:#ffffff !important (BL-062) 는 CSS 로 덮을 수 없어 그대로 (흰 바탕이라 화면 차이 없음). 로더 · PDF 팝업은 제외 */
@media (max-width: 599px) {
	:root .ui-popup#infoPopup,
	:root .ui-popup#infoPopup1,
	:root .ui-popup#infoPopup2,
	:root .ui-popup#infoPopup3,
	:root .ui-popup#warnPopup,
	:root .ui-popup#ChPopup,
	:root .ui-popup#zipPopup,
	:root .ui-popup#EmailPopup {
		box-sizing: border-box;
		min-width: 0 !important;
		width: var(--jn-popup-w) !important;
		max-width: var(--jn-popup-w) !important;
		/* 가운데 : adjustPopupGeneralPosition(checkMobile.js:1484) 이 position:fixed + left 를 350px 기준 인라인으로 넣어
		 *  375px 화면에서 left -5px 로 왼쪽이 잘린다. 좌우 0 + margin auto 로 화면 가운데 (jQM 기본 배치에서는 margin 만 적용).
		 *  #infoPopup2 의 인라인 margin-right:5px(popupDark.jsp:89)도 함께 풀린다 */
		left: 0 !important;
		right: 0 !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
}

/* 12-4. 작명 · 감명 허브 배치 → 흐름 안 · PC 720 칼럼 (BR11_D2, BL-105, design-spec 3-6 폭 예외 · 4-2)
 *  대상: /makename/ · /checkname/ 의 .indexNewClass.jn-hub (BR11_D2 에서 .jn-hub 를 붙인 두 화면만. /mobile/indexSv.jsp 는 그대로)
 *  근거: /css/new/indexNew.css:183-192 .indexNewClass · :235-244 .indexNewContainer { position:fixed; top:60px; left:0; width:100%; height:100% }
 *        → 화면 전체 폭에 고정되어 PC 720 칼럼(11절) 밖으로 나가고, 내용이 화면보다 길면 스크롤되지 않는다.
 *  - 고정 · 화면 폭 100% 를 풀어 .ui-page(720 칼럼) 안 흐름으로 넣는다. 위 여백 = 고정 헤더 높이
 *    (.headerClass 60px, indexNew_header_footer.css:497 + 3-6 아래 금색 선 2px — 토큰 없음)
 *  - 가운데 정렬(text-align:center)은 새 부품 기준 왼쪽 정렬로. 바탕은 2절 그대로
 *  - 높이 : 예전에는 고정 상자(높이 100%)가 화면을 덮어 화면 <style> '#mainPage { background:#F4F4F4 !important }' 가
 *    보이지 않았다. 흐름 안으로 들이면 내용 아래로 회색이 보이므로 허브 영역을 화면 높이 이상으로 둔다 (min-height 100vh) */
:root .indexNewClass.jn-hub,
:root .indexNewClass.jn-hub > .indexNewContainer {
	position: static;
	top: auto;
	left: auto;
	display: block;
	width: auto;
	height: auto;
	text-align: left;
}

:root .indexNewClass.jn-hub {
	box-sizing: border-box;
	min-height: 100vh;
	padding-top: 62px;
}

/* [BR11_D3] D3-0 보정 1 : 허브 화면 바탕 = 한지 바탕 (상태와 관계없이)
 *  근거: /makename/index.jsp · /checkname/index.jsp 화면 <style> '#mainContent · #mainPage { background:#F4F4F4 !important }'
 *        → 허브 영역(min-height 100vh)보다 페이지가 길어지는 경우(창 높이 변경 · 주소창 접힘 등) 아래로 연회색이 보인다.
 *  대상: 두 허브 JSP 의 페이지 div 에 붙인 .jn-hub-page (같은 id 를 쓰는 다른 화면은 그대로)
 *  !important: ② 화면 <style> 이 !important (id 선택자라 이쪽도 #mainPage 를 써야 이긴다) */
:root #mainPage.jn-hub-page,
:root .jn-hub-page #mainContent {
	background: var(--jn-color-bg) !important;
}

/* 12-5. 홈 내용 영역 (/mobile/index.jsp, BR11_D3, design-spec 4-1)
 *  - 새 홈 .jn-home 은 자기 여백을 쓰므로 jQM 내용 영역 안쪽 여백(15px)을 없앤다.
 *    위 여백은 마크업 style="margin-top:60px"(고정 헤더 60px) 그대로 + 헤더 아래 금색 선 2px (12-4 와 같은 값, 토큰 없음)
 *  - 대상: 홈 내용 영역에 붙인 .jn-home-content (#mainContent 는 다른 화면도 씀) */
:root #mainContent.jn-home-content {
	padding: 2px 0 0;
}