/* =====================================================================
 * jn-pattern.css — 새 부품 클래스 (jn-*, BEM: 블록__요소--상태)
 * 위치   : /css/share/jn-pattern.css
 * 로드   : /comm/include/share/themeHead.jsp (jn-theme.css 다음)
 * 기준   : references/design/design-spec.md v2.1 2절 부품 규격, 4-5 잠금 영역
 * 요청   : BR11_B (B5), BR11_B2 (on-brand 글자색 · 세그먼트 44px · 하단 바 그림자). 이번 BR에서는 화면에 적용하지 않고 부품 확인 페이지(/comm/themeCheck.jsp)에서만 쓴다.
 *          실제 화면 적용은 BR11_D~G (③ 구조층).
 *          BR11_C : 12절 팝업 추가 — servicePopup.js 를 통해 테마 화면 전체에서 바로 쓰인다.
 *                   5-3 키보드 초점 :focus → :focus-visible (.jn-subhead · .jn-card__head · .jn-btn · .jn-popup)
 *          BR11_D1 : 12절 체크 줄 .jn-popup__check (사용환경 설정 팝업)
 *          BR11_D2 : 13절 허브 .jn-hub (작명 · 감명 허브 화면) · 아이콘 .jn-icon (/images/share/icons/*.svg, mask), 14절 허브 PC 배치
 *          BR11_D3 : 13절 보조 칸 폭 고정 (모바일 2열 · PC 3열 / 4칸 2×2) · 비활성 칸 글자 한 줄, 15절 홈 .jn-home, 14절 홈 PC 배치
 *          BR13_J  : 16절 설정 화면 .jn-setting (/comm/config/)
 *          BR14_A  : 5-4 입력칸 안내문 .jn-field-hint · 꺼진 jQM 선택상자 (출생시간 · 출생지 '모름')
 * 원칙   : 색 · 글꼴 · 간격은 var(--jn-*) 만. :has() · 컨테이너 쿼리 · min() · clamp() 쓰지 않음.
 *          jQM 화면 안에서는 jQM 이 button · input · select 를 자동으로 꾸미고 a 에 ui-link(swatch 링크 색)를 붙이므로
 *          새 부품의 a · button · input · select 에는 data-role="none" 을 함께 쓴다.
 *          (jmCommon.css 'div label:first-child' 같은 요소 선택자보다 강하도록 라벨류는 블록.요소 두 단계로 쓴다)
 *          600px 이상 배치 변경은 파일 맨 끝 미디어 쿼리 한 곳에 모은다.
 *
 * 목차
 *   1. 하위 헤더       .jn-subhead            (2-1)
 *   2. 단계 표시       .jn-steps / .jn-step   (2-2)
 *   3. 섹션 카드       .jn-card               (2-3)
 *   4. 버튼            .jn-btn                (2-4)
 *   5. 입력            .jn-field · .jn-segment · .jn-locked (2-5)
 *   6. 칩              .jn-chip               (2-6)
 *   7. 판정            .jn-sound · .jn-pick   (2-7)
 *   8. 오행 칩         .jn-oh                 (2-8)
 *   9. 하단 고정 바    .jn-bottombar          (2-10)
 *  10. 상단 고정       .jn-sticky             (2-11)
 *  11. 잠금 영역       .jn-locked-section     (4-5)
 *  12. 팝업            .jn-popup              (2-9, BR11_C servicePopup.js 가 만드는 틀)
 *  13. 허브            .jn-hub · .jn-icon      (4-2 · 2-12, BR11_D2 작명 · 감명 허브)
 *  15. 홈              .jn-home               (4-1, BR11_D3 홈 기본 · 이용 중 · 영상 · 앱으로 이용하기)
 *  16. 설정 화면       .jn-setting            (BR13_J 사용환경 설정)
 *  14. 600px 이상 배치  (파일 맨 끝, 16절 다음)
 * ===================================================================== */


/* =====================================================================
 * 1. 하위 헤더 (2-1) : 52px, 왼쪽 홈 44px · 가운데 제목 · 오른쪽 뒤로 44px
 *    <header class="jn-subhead">
 *      <a class="jn-subhead__home" href="/mobile/" aria-label="홈"><i class="fa fa-home"></i><span class="jn-subhead__label">홈</span></a>
 *      <h1 class="jn-subhead__title">감명 정보입력</h1>
 *      <a class="jn-subhead__back" href="#" aria-label="뒤로가기"><i class="fa fa-reply"></i><span class="jn-subhead__label">뒤로</span></a>
 *    </header>
 *    아이콘만 있는 버튼은 aria-label 필수. .jn-subhead__label 은 PC(600px 이상)에서만 보인다.
 * ===================================================================== */

.jn-subhead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
	min-height: var(--jn-header-h);
	padding: 0 var(--jn-space-1);
	background: var(--jn-color-brand-deep);
	border-bottom: 2px solid var(--jn-color-gold);
	color: var(--jn-color-text-on-dark);
}

.jn-subhead__home,
.jn-subhead__back {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--jn-space-1);
	min-width: var(--jn-touch);
	height: var(--jn-touch);
	border-radius: var(--jn-radius-md);
	color: var(--jn-color-text-on-dark);
	font-size: var(--jn-fs-h3);
	text-decoration: none;
}

/* BR11_C 5-3: :focus → :focus-visible (키보드 초점만). 어두운 헤더 위라 brand 대신 gold-light 유지 (대비) */
.jn-subhead__home:focus-visible,
.jn-subhead__back:focus-visible {
	outline: 2px solid var(--jn-color-gold-light);
	outline-offset: -2px;
}

.jn-subhead__title {
	flex: 1;
	margin: 0;
	text-align: center;
	font-family: var(--jn-font-display);
	font-size: var(--jn-fs-h3);
	font-weight: var(--jn-fw-bold);
	line-height: var(--jn-lh-tight);
	color: var(--jn-color-text-on-dark);
}

.jn-subhead__label {
	display: none;
	font-family: var(--jn-font-body);
	font-size: var(--jn-fs-sm);
}


/* =====================================================================
 * 2. 단계 표시 (2-2) : 원 24px, 글자 12px. 완료 단계는 링크(기존 동작 유지)
 *    <ol class="jn-steps">
 *      <li class="jn-step jn-step--done"><a href="…"><span class="jn-step__dot">1</span><span class="jn-step__label">입력</span></a></li>
 *      <li class="jn-step jn-step--current" aria-current="step"><span class="jn-step__dot">3</span><span class="jn-step__label">앞글자</span></li>
 *      <li class="jn-step jn-step--todo"><span class="jn-step__dot">4</span><span class="jn-step__label">뒷글자</span></li>
 *    </ol>
 * ===================================================================== */

.jn-steps {
	display: flex;
	margin: 0;
	padding: var(--jn-space-3) var(--jn-space-2);
	list-style: none;
	background: var(--jn-color-surface);
	border-bottom: 1px solid var(--jn-color-line);
}

.jn-step {
	position: relative;
	flex: 1;
	text-align: center;
}

.jn-step > a,
.jn-step > span {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--jn-space-1);
	color: inherit;
	text-decoration: none;
}

.jn-step__dot {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	font-size: var(--jn-fs-xxs);
	font-weight: var(--jn-fw-bold);
	line-height: 1;
}

.jn-step__label {
	font-size: var(--jn-fs-xxs);
	line-height: var(--jn-lh-tight);
}

/* 완료 : 밝은 금색 원 + 체크 (숫자는 감춤) */
.jn-step--done {
	color: var(--jn-color-text-gold);
}

.jn-step--done .jn-step__dot {
	background: var(--jn-color-gold-light);
	color: transparent;
}

.jn-step--done .jn-step__dot::after {
	content: "";
	position: absolute;
	top: 6px;
	left: 7px;
	width: 9px;
	height: 5px;
	border-left: 2px solid var(--jn-color-brand-deep);
	border-bottom: 2px solid var(--jn-color-brand-deep);
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

/* 현재 : brand 원 + 흰 숫자 */
.jn-step--current {
	color: var(--jn-color-brand);
	font-weight: var(--jn-fw-bold);
}

.jn-step--current .jn-step__dot {
	background: var(--jn-color-brand);
	color: var(--jn-color-on-brand);
}

/* 예정 : 1.5px 테두리 */
.jn-step--todo {
	color: var(--jn-color-text-sub);
}

.jn-step--todo .jn-step__dot {
	border: 1.5px solid var(--jn-color-line-strong);
	color: var(--jn-color-text-sub);
}


/* =====================================================================
 * 3. 섹션 카드 (2-3) : 머리 52px(금색 마름모 + 고운바탕 17px + 꺾쇠), 내용 안쪽 여백 16px
 *    <section class="jn-card">
 *      <button type="button" class="jn-card__head" aria-expanded="true"><span class="jn-card__title">성명총평</span></button>
 *      <div class="jn-card__body">…</div>
 *    </section>
 *    접힘 상태: .jn-card--collapsed (머리 aria-expanded="false"). 꺾쇠가 없는 고정 카드: .jn-card--static
 * ===================================================================== */

.jn-card {
	margin: 0 0 var(--jn-gap-card);
	background: var(--jn-color-surface);
	border: 1px solid var(--jn-color-line);
	border-radius: var(--jn-radius-lg);
	overflow: hidden;
}

.jn-card__head {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--jn-space-2);
	box-sizing: border-box;
	width: 100%;
	min-height: var(--jn-row-h);
	margin: 0;
	padding: 0 var(--jn-touch) 0 var(--jn-space-4);
	background: var(--jn-color-surface);
	border: 0;
	border-bottom: 1px solid var(--jn-color-line-soft);
	font-family: var(--jn-font-display);
	font-size: var(--jn-fs-h3);
	font-weight: var(--jn-fw-bold);
	color: var(--jn-color-text-title);
	text-align: left;
	cursor: pointer;
}

/* 금색 마름모 6px */
.jn-card__head::before {
	content: "";
	flex: none;
	width: 6px;
	height: 6px;
	background: var(--jn-color-gold);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

/* 꺾쇠 : 펼침 = 위 */
.jn-card__head::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);
}

/* BR11_C 5-3: :focus → :focus-visible (키보드 초점만) */
.jn-card__head:focus-visible {
	outline: 2px solid var(--jn-color-brand);
	outline-offset: -2px;
}

.jn-card__title {
	flex: 1;
}

.jn-card__body {
	padding: var(--jn-space-4);
	font-size: var(--jn-fs-base);
	line-height: var(--jn-lh-base);
	color: var(--jn-color-text);
}

/* 접힘 */
.jn-card--collapsed .jn-card__head {
	border-bottom: 0;
}

.jn-card--collapsed .jn-card__head::after {
	margin-top: -7px;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

.jn-card--collapsed .jn-card__body {
	display: none;
}

/* 고정 카드 (접지 않음) */
.jn-card--static .jn-card__head {
	padding-right: var(--jn-space-4);
	cursor: default;
}

.jn-card--static .jn-card__head::after {
	display: none;
}


/* =====================================================================
 * 4. 버튼 (2-4) : 모서리 10px. 기존 '✔ 확 인' 체크 아이콘 없이 글자만
 *    <a class="jn-btn jn-btn--primary" href="…">확인</a>
 *    <button type="button" class="jn-btn jn-btn--disabled" aria-disabled="true">
 *      <span class="jn-btn__main"><i class="fa fa-lock"></i> 작명조회</span><span class="jn-btn__reason">로그아웃 후 이용</span></button>
 *    전체 폭: .jn-btn--block
 * ===================================================================== */

.jn-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--jn-space-2);
	box-sizing: border-box;
	min-height: var(--jn-btn-h-sm);
	margin: 0;
	padding: 0 var(--jn-space-5);
	border: 1px solid transparent;
	border-radius: var(--jn-radius-md);
	background: transparent;
	font-family: var(--jn-font-body);
	font-size: var(--jn-fs-base);
	font-weight: var(--jn-fw-bold);
	line-height: var(--jn-lh-tight);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	-webkit-appearance: none;
}

/* BR11_C 5-3: :focus gold → :focus-visible brand (키보드 초점만, jn-theme.css 1-1 과 같은 표시) */
.jn-btn:focus-visible {
	outline: 2px solid var(--jn-color-brand);
	outline-offset: 2px;
}

.jn-btn--block {
	display: flex;
	width: 100%;
}

/* 주 버튼 50px */
.jn-btn--primary {
	min-height: var(--jn-btn-h);
	background: var(--jn-color-brand);
	border-color: var(--jn-color-brand);
	color: var(--jn-color-on-brand);
	font-size: var(--jn-fs-body);
}

.jn-btn--primary:hover,
.jn-btn--primary:active {
	background: var(--jn-color-brand-deep);
	border-color: var(--jn-color-brand-deep);
}

/* 보조 버튼 46px : 투명 + brand 테두리 */
.jn-btn--secondary {
	background: transparent;
	border-color: var(--jn-color-brand);
	color: var(--jn-color-brand);
}

.jn-btn--secondary:hover,
.jn-btn--secondary:active {
	background: var(--jn-color-tint);
}

/* 흰 버튼 46px */
.jn-btn--white {
	background: var(--jn-color-input);
	border-color: var(--jn-color-line-input);
	color: var(--jn-color-text-title);
}

.jn-btn--white:hover,
.jn-btn--white:active {
	background: var(--jn-color-tint);
}

/* 어두운 바탕용 : 밝은 금색 바탕 + 짙은 글자 (시안 글자색 #3A1520 은 토큰에 없어 brand-deep 사용 — Result 질문) */
.jn-btn--on-dark {
	background: var(--jn-color-gold-light);
	border-color: var(--jn-color-gold-light);
	color: var(--jn-color-brand-deep);
	font-size: var(--jn-fs-sm);
}

.jn-btn--on-dark:hover,
.jn-btn--on-dark:active {
	background: var(--jn-color-gold-pale);
	border-color: var(--jn-color-gold-pale);
}

/* 비활성 56px : 점선 + muted 글자 + (자물쇠 아이콘) + 사유 한 줄. 실제 disabled 대신 aria-disabled="true" */
.jn-btn--disabled,
.jn-btn[aria-disabled="true"] {
	flex-direction: column;
	gap: 2px;
	min-height: 56px;
	background: var(--jn-color-disabled-bg);
	border: 1px dashed var(--jn-color-line-strong);
	color: var(--jn-color-text-muted);
	font-size: var(--jn-fs-sm);
	cursor: default;
}

.jn-btn__main {
	display: inline-flex;
	align-items: center;
	gap: var(--jn-space-1);
}

.jn-btn__reason {
	font-size: var(--jn-fs-xxs);
	font-weight: var(--jn-fw-regular);
}


/* =====================================================================
 * 5. 입력 (2-5)
 *    5-1. 필드
 *    <div class="jn-field">
 *      <label class="jn-field__label" for="birth">출생일자</label>
 *      <input class="jn-field__control" id="birth" type="text">
 *      <p class="jn-field__help">예) 2026-10-19</p>
 *    </div>
 *    선택상자 : <div class="jn-field__select"><select class="jn-field__control">…</select></div>
 *    jQM 이 자동으로 꾸미지 않게 data-role="none" 을 함께 쓴다 (D~G).
 * ===================================================================== */

.jn-field {
	margin: 0 0 var(--jn-space-4);
}

.jn-field .jn-field__label {
	display: block;
	margin: 0 0 var(--jn-space-2);
	font-size: var(--jn-fs-sm);
	font-weight: var(--jn-fw-bold);
	color: var(--jn-color-text-title);
}

.jn-field__control {
	display: block;
	box-sizing: border-box;
	width: 100%;
	min-height: var(--jn-input-h);
	margin: 0;
	padding: 0 var(--jn-space-3);
	background: var(--jn-color-input);
	border: 1px solid var(--jn-color-line-input);
	border-radius: var(--jn-radius-md);
	font-family: var(--jn-font-body);
	font-size: var(--jn-fs-input);
	color: var(--jn-color-text);
	-webkit-appearance: none;
	appearance: none;
}

textarea.jn-field__control {
	padding: var(--jn-space-3);
	line-height: var(--jn-lh-base);
}

.jn-field__control:focus {
	outline: 0;
	border-color: var(--jn-color-brand);
	box-shadow: 0 0 0 1px var(--jn-color-brand);
}

.jn-field__help {
	margin: var(--jn-space-1) 0 0;
	font-size: var(--jn-fs-xs);
	color: var(--jn-color-text-sub);
}

/* 선택상자 : 오른쪽 금색 꺾쇠 */
.jn-field__select {
	position: relative;
}

.jn-field__select .jn-field__control {
	padding-right: var(--jn-touch);
}

.jn-field__select::after {
	content: "";
	position: absolute;
	top: 50%;
	right: var(--jn-space-4);
	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);
	pointer-events: none;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

/* 5-2. 세그먼트 (라디오 묶음 대체)
 *    <div class="jn-segment" role="radiogroup">
 *      <label class="jn-segment__item jn-segment__item--selected"><input type="radio" name="cal" checked data-role="none">양력</label> …
 *    </div>
 *    선택 칸 = --selected 클래스 (JS 가 바꿈). 라디오 input 은 칸 안에 숨긴다. */
.jn-segment {
	display: flex;
	box-sizing: border-box;
	padding: 3px;
	background: var(--jn-color-input);
	border: 1px solid var(--jn-color-line-input);
	border-radius: var(--jn-radius-md);
}

.jn-segment .jn-segment__item {
	position: relative;
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--jn-touch);  /* 칸 높이 44px (design-spec v2.1 2-5, BR11_B 질문 4) */
	border-radius: var(--jn-radius-sm);
	font-size: var(--jn-fs-base);
	color: var(--jn-color-text-sub);
	cursor: pointer;
}

/* 첫 칸 위 여백 제거 — 없으면 첫 칸이 8px 내려가고 나머지 칸이 52px 로 늘어난다
 * !important: ① 원본 jmCommon.css:590-592 'div label:first-child { margin-top:8px !important }' */
.jn-segment .jn-segment__item:first-child {
	margin-top: 0 !important;
}

.jn-segment__item input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
}

.jn-segment .jn-segment__item--selected {
	background: var(--jn-color-brand);
	color: var(--jn-color-on-brand);
	font-weight: var(--jn-fw-bold);
}

/* 5-3. 고정값 (성씨 · 출생연도) : 잠금 바탕 + 오른쪽 '고정' 표시
 *    <div class="jn-locked"><span class="jn-locked__value">박(朴)</span><span class="jn-locked__badge"><i class="fa fa-lock"></i> 고정</span></div> */
.jn-locked {
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
	min-height: var(--jn-input-h);
	padding: 0 var(--jn-space-3);
	background: var(--jn-color-input-locked);
	border: 1px solid var(--jn-color-line);
	border-radius: var(--jn-radius-md);
	font-size: var(--jn-fs-input);
	color: var(--jn-color-text);
}

.jn-locked__badge {
	display: inline-flex;
	align-items: center;
	gap: var(--jn-space-1);
	font-size: var(--jn-fs-xxs);
	color: var(--jn-color-text-gold);
}

/* 5-4. 입력칸 안내문 · 꺼진 선택상자 (BR14_A 출생시간 · 출생지 '모름', /scripts/share/jnBirthUnknown.js)
 *    <p class="jn-field-hint jn-field__help" id="birthhourHint" aria-live="polite"></p>
 *    글자 모양은 5-1 .jn-field__help, 글자가 없으면 높이 0 (JS 가 글자를 넣고 빼서 보이기 · 숨기기)
 *    꺼진 jQM 선택상자 (출생시간 '모름' 일 때 분) : jn-theme.css 6절 선택상자 바탕이 4-6 비활성보다 강해
 *    꺼진 칸이 보통 칸처럼 보이던 것 → 고정값 바탕 + muted 글자 (6절과 같은 강도, 이 파일이 뒤에 로드되어 이김) */
.jn-field-hint {
	word-break: keep-all;	/* 한글 낱말 중간에서 줄이 바뀌지 않게 (13절 · 16절과 같음) */
}

:root .ui-page .ui-select .ui-btn.ui-disabled {
	background: var(--jn-color-input-locked);
	color: var(--jn-color-text-muted);
}


/* =====================================================================
 * 6. 칩 (2-6) : 높이 34px, pill
 *    <a class="jn-chip jn-chip--selected" href="#sec1" aria-current="true">총평</a>
 *    빼는 글자 : <button type="button" class="jn-chip jn-chip--remove" aria-label="'경' 빼기 해제">경</button>
 * ===================================================================== */

.jn-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--jn-space-1);
	box-sizing: border-box;
	height: 34px;
	margin: 0;
	padding: 0 var(--jn-space-3);
	background: var(--jn-color-surface);
	border: 1px solid var(--jn-color-line);
	border-radius: var(--jn-radius-pill);
	font-family: var(--jn-font-body);
	font-size: var(--jn-fs-sm);
	color: var(--jn-color-text-strong);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

.jn-chip--selected {
	background: var(--jn-color-brand);
	border-color: var(--jn-color-brand);
	color: var(--jn-color-on-brand);
	font-weight: var(--jn-fw-bold);
}

.jn-chip--remove {
	background: var(--jn-color-tint);
	border-color: var(--jn-color-brand);
	color: var(--jn-color-brand);
	font-weight: var(--jn-fw-bold);
}

.jn-chip--remove::after {
	content: "\00D7";
	font-size: var(--jn-fs-base);
	line-height: 1;
}

/* 칩 줄 (가로 스크롤) */
.jn-chips {
	display: flex;
	gap: var(--jn-space-2);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}


/* =====================================================================
 * 7. 판정 (2-7) — 색만으로 구분하지 않는다: 모양 + 기호 + 글자
 *    7-1. 소리 배지 (묶음) : 둥근 알약 24px + 소리 막대 14px + 글자 12px bold
 *      <span class="jn-sound jn-sound--good">좋음</span>
 *      아이콘은 ::before 에 /images/share/icons/sound-*.svg 를 mask 로 칠한다 (SVG 가 currentColor 를 쓰므로).
 *      인라인 SVG 를 직접 넣을 때 : <span class="jn-sound jn-sound--good jn-sound--inline"><svg class="jn-sound__icon">…</svg>좋음</span>
 * ===================================================================== */

.jn-sound {
	display: inline-flex;
	align-items: center;
	gap: var(--jn-space-1);
	box-sizing: border-box;
	height: 24px;
	padding: 0 var(--jn-space-2) 0 6px;
	border-radius: var(--jn-radius-pill);
	font-size: var(--jn-fs-xxs);
	font-weight: var(--jn-fw-bold);
	line-height: 1;
	white-space: nowrap;
}

.jn-sound::before {
	content: "";
	flex: none;
	width: 14px;
	height: 14px;
	background-color: currentColor;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.jn-sound--inline::before {
	display: none;
}

.jn-sound__icon {
	flex: none;
	width: 14px;
	height: 14px;
	fill: currentColor;
}

.jn-sound--good {
	background: var(--jn-color-good-bg);
	color: var(--jn-color-good);
}

.jn-sound--good::before {
	-webkit-mask-image: url(/images/share/icons/sound-good.svg);
	mask-image: url(/images/share/icons/sound-good.svg);
}

.jn-sound--soso {
	background: var(--jn-color-soso-bg);
	color: var(--jn-color-soso);
}

.jn-sound--soso::before {
	-webkit-mask-image: url(/images/share/icons/sound-soso.svg);
	mask-image: url(/images/share/icons/sound-soso.svg);
}

.jn-sound--bad {
	background: var(--jn-color-bad-bg);
	color: var(--jn-color-bad-text);
}

.jn-sound--bad::before {
	-webkit-mask-image: url(/images/share/icons/sound-bad.svg);
	mask-image: url(/images/share/icons/sound-bad.svg);
}

/* 나쁨 묶음은 숨기지 않고 글자색만 muted (2-7) — 묶음 제목에 붙인다 */
.jn-judge-muted {
	color: var(--jn-color-text-muted);
}

/*    7-2. 도장 (고르는 항목) : 네모 도장 20px + 글자 12px bold
 *      <span class="jn-pick jn-pick--good">좋음</span>
 *      도장 SVG 는 색이 들어 있어 background-image 로 쓴다. 인라인 SVG 를 쓸 때 : .jn-pick--inline + .jn-pick__icon */
.jn-pick {
	display: inline-flex;
	align-items: center;
	gap: var(--jn-space-1);
	font-size: var(--jn-fs-xxs);
	font-weight: var(--jn-fw-bold);
	line-height: 1;
	white-space: nowrap;
}

.jn-pick::before {
	content: "";
	flex: none;
	width: 20px;
	height: 20px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}

.jn-pick--inline::before {
	display: none;
}

.jn-pick__icon {
	flex: none;
	width: 20px;
	height: 20px;
}

.jn-pick--good {
	color: var(--jn-color-good);
}

.jn-pick--good::before {
	background-image: url(/images/share/icons/pick-good.svg);
}

.jn-pick--soso {
	color: var(--jn-color-soso);
}

.jn-pick--soso::before {
	background-image: url(/images/share/icons/pick-soso.svg);
}

.jn-pick--bad {
	color: var(--jn-color-bad);
}

.jn-pick--bad::before {
	background-image: url(/images/share/icons/pick-bad.svg);
}


/* =====================================================================
 * 8. 오행 칩 (2-8) : 높이 22px, 12px bold
 *    <span class="jn-oh jn-oh--earth">土</span>
 *    모서리: 시안 6px 은 토큰에 없어 --jn-radius-seal(4px) 사용 — Result 질문
 * ===================================================================== */

.jn-oh {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: 22px;
	min-width: 22px;
	padding: 0 var(--jn-space-2);
	border-radius: var(--jn-radius-seal);
	font-size: var(--jn-fs-xxs);
	font-weight: var(--jn-fw-bold);
	line-height: 1;
}

.jn-oh--wood  { background: var(--jn-ohaeng-wood-bg);  color: var(--jn-ohaeng-wood); }
.jn-oh--fire  { background: var(--jn-ohaeng-fire-bg);  color: var(--jn-ohaeng-fire); }
.jn-oh--earth { background: var(--jn-ohaeng-earth-bg); color: var(--jn-ohaeng-earth); }
.jn-oh--metal { background: var(--jn-ohaeng-metal-bg); color: var(--jn-ohaeng-metal); }
.jn-oh--water { background: var(--jn-ohaeng-water-bg); color: var(--jn-ohaeng-water); }


/* =====================================================================
 * 9. 하단 고정 바 (2-10) : 높이 60px, 위 테두리, safe-area 고려
 *    <div class="jn-bottombar">
 *      <button type="button" class="jn-btn jn-btn--white"><i class="fa fa-sliders"></i> 정렬·필터</button>
 *      <div class="jn-bottombar__pager">
 *        <button type="button" class="jn-bottombar__arrow" aria-label="이전 쪽">‹</button>
 *        <span class="jn-bottombar__info">4 / 89</span>
 *        <button type="button" class="jn-bottombar__arrow" aria-label="다음 쪽">›</button>
 *      </div>
 *    </div>
 *    앱 웹뷰에서 네이티브 하단 메뉴(64px)가 웹뷰 위에 겹치는 경우에만 .jn-bottombar--above-nav 를 쓴다
 *    (겹침 여부는 앱 확인 필요 — Result 질문). 위쪽 그림자는 토큰이 없어 넣지 않았다 — Result 질문.
 * ===================================================================== */

.jn-bottombar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: var(--jn-z-sticky);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--jn-space-3);
	box-sizing: border-box;
	min-height: 60px;
	padding: var(--jn-space-2) var(--jn-space-3) var(--jn-space-2) var(--jn-space-4);
	padding-bottom: var(--jn-space-2);
	padding-bottom: calc(var(--jn-space-2) + env(safe-area-inset-bottom));
	background: var(--jn-color-surface);
	border-top: 1px solid var(--jn-color-line-input);
	box-shadow: var(--jn-shadow-bar);  /* 위쪽 그림자 (design-spec v2.1 2-10, BR11_B 질문 5) */
}

.jn-bottombar--above-nav {
	bottom: var(--jn-native-nav-h);
	padding-bottom: var(--jn-space-2);
}

/* 고정 바가 본문을 가리지 않게 본문 끝에 둘 빈 칸 */
.jn-bottombar-spacer {
	height: 60px;
	height: calc(60px + env(safe-area-inset-bottom));
}

.jn-bottombar__pager {
	display: flex;
	align-items: center;
	gap: var(--jn-space-1);
}

.jn-bottombar__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	background: var(--jn-color-input);
	border: 1px solid var(--jn-color-line-input);
	border-radius: var(--jn-radius-md);
	font-size: var(--jn-fs-h2);
	color: var(--jn-color-text-title);
	cursor: pointer;
}

.jn-bottombar__arrow[aria-disabled="true"] {
	color: var(--jn-color-text-muted);
	cursor: default;
}

.jn-bottombar__info {
	min-width: 56px;
	text-align: center;
	font-size: var(--jn-fs-sm);
	font-weight: var(--jn-fw-bold);
	color: var(--jn-color-text-strong);
}


/* =====================================================================
 * 10. 상단 고정 (2-11) : 현재 성명 · 결과 항목 칩. 헤더 아래에 붙는다 (position: sticky)
 *     <div class="jn-sticky">…</div>
 *     jQM 고정 헤더(52px) 아래에 붙이려면 top 을 헤더 높이로: .jn-sticky--below-header
 * ===================================================================== */

.jn-sticky {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: var(--jn-z-sticky);
	padding: var(--jn-space-3) var(--jn-space-4);
	background: var(--jn-color-bg);
	border-bottom: 1px solid var(--jn-color-line);
	box-shadow: var(--jn-shadow-sticky);
}

.jn-sticky--below-header {
	top: var(--jn-header-h);
}


/* =====================================================================
 * 11. 잠금 영역 (4-5 수리 해설 잠금) : 흐림 + 자물쇠 + 안내
 *     <div class="jn-locked-section">
 *       <p class="jn-locked-section__preview" aria-hidden="true">두뇌가 명석하여 …</p>
 *       <div class="jn-locked-section__cover">
 *         <span class="jn-locked-section__title"><i class="fa fa-lock"></i> 수리 해설 4건</span>
 *         <span class="jn-locked-section__desc">상세감명에서 볼 수 있습니다</span>
 *       </div>
 *     </div>
 *     흐린 미리보기 글은 실제 해설이 아닌 자리 표시 문구를 쓴다 (내용 노출 방지 — D~G에서 결정).
 * ===================================================================== */

.jn-locked-section {
	position: relative;
	margin: 0 0 var(--jn-space-3);
	padding: var(--jn-space-3);
	border: 1px dashed var(--jn-color-line-strong);
	border-radius: var(--jn-radius-md);
	overflow: hidden;
}

.jn-locked-section__preview {
	margin: 0;
	font-size: var(--jn-fs-xs);
	line-height: var(--jn-lh-base);
	color: var(--jn-color-text-muted);
	-webkit-filter: blur(3px);
	filter: blur(3px);
	-webkit-user-select: none;
	user-select: none;
}

.jn-locked-section__cover {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--jn-space-1);
}

.jn-locked-section__title {
	display: inline-flex;
	align-items: center;
	gap: var(--jn-space-1);
	font-size: var(--jn-fs-sm);
	font-weight: var(--jn-fw-bold);
	color: var(--jn-color-text-title);
}

.jn-locked-section__desc {
	font-size: var(--jn-fs-xs);
	color: var(--jn-color-text-sub);
}


/* =====================================================================
 * 12. 팝업 (2-9) : /scripts/share/servicePopup.js 가 body 끝에 만드는 틀 (BR11_C)
 *     <div id="jnPopup" class="jn-popup">
 *       <div class="jn-popup__overlay"></div>
 *       <div class="jn-popup__box [jn-popup__box--warn | jn-popup__box--notice]" role="alertdialog" aria-modal="true">
 *         <div class="jn-popup__head"><span class="jn-popup__icon"></span><h2 class="jn-popup__title"></h2><button class="jn-popup__close"></button></div>
 *         <div class="jn-popup__body"> 본문 HTML · <dl class="jn-popup__info"> </div>
 *         <div class="jn-popup__actions [jn-popup__actions--two]"><button class="jn-popup__btn jn-popup__btn--white"> · <button class="jn-popup__btn jn-popup__btn--primary"></div>
 *       </div>
 *     </div>
 *     폭 var(--jn-popup-w) + max-width var(--jn-popup-max-w), 최대 높이 var(--jn-popup-max-h) 에서 본문만 스크롤, 화면 정가운데 + safe-area.
 *     z-index var(--jn-z-popup) (기존 jQM 팝업 5000 · 홈 · 허브 헤더 100000 보다 위). 기기별 폭 계산(popupDark.jsp · adjustPopup*) 쓰지 않음.
 *     위쪽 줄 : 보통 팝업은 없음, 경고(warnDialogueFixed) 만 4px seal + 제목 앞 경고 아이콘 (질문 2 · 시안 07).
 *     body 바로 아래(jQM 페이지 밖)에 붙으므로 jQM swatch 가 닿지 않는다. 기존 전역 요소 선택자(h2 · p · button 등)보다 강하도록 블록.요소로 쓴다.
 * ===================================================================== */

.jn-popup {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: var(--jn-z-popup);
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: 0;
	padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
	font-family: var(--jn-font-body);
	-webkit-text-size-adjust: 100%;
}

/* 뒤 배경 : 눌러도 아무 동작 없음 (실수로 닫히지 않게) */
.jn-popup__overlay {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: var(--jn-color-overlay);
}

.jn-popup__box {
	position: relative;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	width: var(--jn-popup-w);
	max-width: var(--jn-popup-max-w);
	max-height: var(--jn-popup-max-h);
	margin: 0;
	border-radius: var(--jn-radius-xl);
	background: var(--jn-color-surface);
	box-shadow: var(--jn-shadow-popup);
	color: var(--jn-color-text);
	text-align: left;
	overflow: hidden;
}

/* 위쪽 4px 줄은 경고에만 (BR11_C 질문 2, 시안 07: 보통 팝업은 줄 없음) */
.jn-popup__box--warn {
	border-top: 4px solid var(--jn-color-seal);
}

/* 머리 : 제목 · 오른쪽 위 닫기 × 40px */
.jn-popup__head {
	display: flex;
	flex: none;
	align-items: center;
	gap: var(--jn-space-2);
	padding: 14px var(--jn-space-2) 10px 18px;
}

.jn-popup__icon {
	display: none;
	flex: none;
	color: var(--jn-color-seal);
	line-height: 0;
}

.jn-popup__box--warn .jn-popup__icon {
	display: inline-flex;
}

.jn-popup .jn-popup__title {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: none;
	background: none;
	font-family: var(--jn-font-display);
	font-size: 18px;
	font-weight: var(--jn-fw-bold);
	line-height: var(--jn-lh-tight);
	color: var(--jn-color-text-title);
	text-align: left;
	text-shadow: none;
	word-break: keep-all;
	overflow-wrap: break-word;
}

.jn-popup .jn-popup__close {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: none;
	border-radius: var(--jn-radius-md);
	background: transparent;
	color: var(--jn-color-text-sub);
	cursor: pointer;
	-webkit-appearance: none;
}

.jn-popup .jn-popup__close:hover,
.jn-popup .jn-popup__close:active {
	background: var(--jn-color-tint);
}

/* 본문 : 15px, 줄간격 1.6, 이 영역만 스크롤 */
.jn-popup__body {
	flex: 1 1 auto;
	min-height: 0;
	padding: 0 18px var(--jn-space-4);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	font-size: var(--jn-fs-base);
	line-height: var(--jn-lh-base);
	color: var(--jn-color-text);
	word-break: keep-all;
	overflow-wrap: break-word;
}

/* 본문 HTML 기본 모양 : 지금 쓰는 태그 (p · br · b · div · span · h4 · a · textarea) */
.jn-popup .jn-popup__body p {
	margin: 0 0 var(--jn-space-2);
	padding: 0;
	font-size: inherit;
	line-height: inherit;
}

.jn-popup .jn-popup__body p:last-child {
	margin-bottom: 0;
}

.jn-popup .jn-popup__body b,
.jn-popup .jn-popup__body strong {
	font-weight: var(--jn-fw-bold);
}

.jn-popup .jn-popup__body h4 {
	margin: var(--jn-space-3) 0 var(--jn-space-1);
	padding: 0;
	font-family: var(--jn-font-display);
	font-size: var(--jn-fs-h3);
	font-weight: var(--jn-fw-bold);
	line-height: var(--jn-lh-tight);
	color: var(--jn-color-text-title);
}

.jn-popup .jn-popup__body h4:first-child {
	margin-top: 0;
}

.jn-popup .jn-popup__body a {
	color: var(--jn-color-brand);
	font-weight: var(--jn-fw-bold);
	text-decoration: underline;
}

.jn-popup .jn-popup__body textarea {
	display: block;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	margin: var(--jn-space-2) 0 0;
	padding: var(--jn-space-2) var(--jn-space-3);
	border: 1px solid var(--jn-color-line-input);
	border-radius: var(--jn-radius-md);
	background: var(--jn-color-input);
	font-family: var(--jn-font-body);
	font-size: var(--jn-fs-input);
	line-height: var(--jn-lh-base);
	color: var(--jn-color-text);
}

.jn-popup .jn-popup__body img {
	max-width: 100%;
	height: auto;
}

/* 결제 확인 문구의 '※ …' 줄 : 내어쓰기 상자.
   jmCommon.css · jmCommon2.css · jmCommonNew.css 의 .MessageIndent 가 margin-left · text-indent 에 !important 를 써서 여기도 !important (원본 !important 덮기) */
.jn-popup .jn-popup__body .MessageIndent {
	margin: var(--jn-space-3) 0 0 !important;
	padding: 10px var(--jn-space-3) 10px 30px;
	border-radius: var(--jn-radius-md);
	background: var(--jn-color-tint);
	font-size: var(--jn-fs-sm);
	line-height: var(--jn-lh-base);
	color: var(--jn-color-text-sub);
	text-indent: -18px !important;
}

/* 정보형 (notice items) : tint 상자에 '항목 / 값' */
.jn-popup .jn-popup__info {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--jn-space-1) var(--jn-space-3);
	margin: var(--jn-space-2) 0 0;
	padding: var(--jn-space-3);
	border-radius: var(--jn-radius-md);
	background: var(--jn-color-tint);
	font-size: var(--jn-fs-sm);
}

.jn-popup .jn-popup__info dt {
	margin: 0;
	font-weight: var(--jn-fw-regular);
	color: var(--jn-color-text-sub);
}

.jn-popup .jn-popup__info dd {
	margin: 0;
	font-weight: var(--jn-fw-bold);
	color: var(--jn-color-text);
}

/* 체크 줄 (BR11_D1, 사용환경 설정) : 네이티브 체크상자 + 라벨, 한 줄 높이 44px 이상 (터치), 줄 전체를 누르면 체크
   <label class="jn-popup__check" for="includeSound"><input type="checkbox" id="includeSound" data-role="none"><span class="jn-popup__check-text">효과음 포함</span></label>
   jQM 이 꾸미지 않도록 input 에 data-role="none" */
.jn-popup .jn-popup__check {
	display: flex;
	align-items: center;
	gap: var(--jn-space-3);
	box-sizing: border-box;
	min-height: var(--jn-touch);
	margin: var(--jn-space-2) 0 0;
	padding: var(--jn-space-2) var(--jn-space-3);
	border: 1px solid var(--jn-color-line);
	border-radius: var(--jn-radius-md);
	background: var(--jn-color-surface);
	font-size: var(--jn-fs-base);
	line-height: var(--jn-lh-base);
	color: var(--jn-color-text);
	cursor: pointer;
}

.jn-popup .jn-popup__check input[type="checkbox"] {
	flex: none;
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--jn-color-brand);
	cursor: pointer;
}

.jn-popup .jn-popup__check input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--jn-color-brand);
	outline-offset: 2px;
}

.jn-popup .jn-popup__check-text {
	flex: 1 1 auto;
	min-width: 0;
}

/* 버튼 : 하나 = 전체 폭 주 버튼, 둘 = 왼쪽 흰 버튼(취소) · 오른쪽 주 버튼(확인) */
.jn-popup__actions {
	display: flex;
	flex: none;
	gap: var(--jn-space-2);
	padding: 0 18px 18px;
}

.jn-popup .jn-popup__btn {
	display: flex;
	flex: 1 1 0;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 0;
	min-height: var(--jn-btn-h-sm);
	margin: 0;
	padding: var(--jn-space-1) var(--jn-space-3);
	border: 1px solid transparent;
	border-radius: var(--jn-radius-md);
	font-family: var(--jn-font-body);
	font-size: var(--jn-fs-base);
	font-weight: var(--jn-fw-bold);
	line-height: var(--jn-lh-tight);
	text-align: center;
	text-shadow: none;
	white-space: normal;
	cursor: pointer;
	-webkit-appearance: none;
}

/* 키보드 초점 (5-3): 2px brand, 손가락 · 마우스로 누를 때는 표시 안 함 */
.jn-popup .jn-popup__btn:focus-visible,
.jn-popup .jn-popup__close:focus-visible {
	outline: 2px solid var(--jn-color-brand);
	outline-offset: 2px;
}

.jn-popup .jn-popup__btn--primary {
	background: var(--jn-color-brand);
	border-color: var(--jn-color-brand);
	color: var(--jn-color-on-brand);
}

.jn-popup .jn-popup__btn--primary:hover,
.jn-popup .jn-popup__btn--primary:active {
	background: var(--jn-color-brand-deep);
	border-color: var(--jn-color-brand-deep);
}

.jn-popup .jn-popup__btn--white {
	background: var(--jn-color-input);
	border-color: var(--jn-color-line-input);
	color: var(--jn-color-text-title);
}

.jn-popup .jn-popup__btn--white:hover,
.jn-popup .jn-popup__btn--white:active {
	background: var(--jn-color-tint);
}

/* 버튼 하나(alert) : 주 버튼 16px */
.jn-popup__actions:not(.jn-popup__actions--two) .jn-popup__btn--primary {
	font-size: var(--jn-fs-body);
}


/* =====================================================================
 * 13. 허브 (4-2, BR11_D2) : 작명 허브 /makename/ · 감명 허브 /checkname/ — 시안 02_hub_using_mobile · _pc
 *    <div class="indexNewClass jn-hub">                       (배치 = jn-theme.css 12-4)
 *      <section class="jn-hub__status"> 이용중 배지 · 상품명 · 기간 · D-day </section>
 *      <div class="jn-hub__body">
 *        <div class="jn-hub__main">  큰 카드 a.jn-hub__card.jn-hub__card--brand | --deep (2개) + 내 작명목록 a.jn-hub__list
 *        <div class="jn-hub__grid">  보조 칸 a.jn-hub__item
 *        <section class="jn-hub__locked"> 제목 + .jn-hub__grid > button.jn-hub__item--locked[aria-disabled="true"]
 *    모바일: 큰 카드 2열, 내 작명목록 한 줄, 보조 2열 / 600px 이상(14절): 큰 카드 · 내 작명목록 3열, 보조 3열
 *    jQM 이 꾸미지 않도록 a · button 에 data-role="none"
 * ===================================================================== */

/* 13-1. 아이콘 : /images/share/icons/*.svg 를 mask 로 써서 글자색(currentColor) = 아이콘 색 (2-12)
 *  <span class="jn-icon jn-icon--bolt" aria-hidden="true"></span> */
.jn-icon {
	display: inline-block;
	flex: none;
	width: 24px;
	height: 24px;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.jn-icon--search        { -webkit-mask-image: url(/images/share/icons/search.svg);        mask-image: url(/images/share/icons/search.svg); }
.jn-icon--search-name   { -webkit-mask-image: url(/images/share/icons/search-name.svg);   mask-image: url(/images/share/icons/search-name.svg); }
.jn-icon--brush         { -webkit-mask-image: url(/images/share/icons/brush.svg);         mask-image: url(/images/share/icons/brush.svg); }
.jn-icon--key           { -webkit-mask-image: url(/images/share/icons/key.svg);           mask-image: url(/images/share/icons/key.svg); }
.jn-icon--list-ol       { -webkit-mask-image: url(/images/share/icons/list-ol.svg);       mask-image: url(/images/share/icons/list-ol.svg); }
.jn-icon--bolt          { -webkit-mask-image: url(/images/share/icons/bolt.svg);          mask-image: url(/images/share/icons/bolt.svg); }
.jn-icon--bookmark      { -webkit-mask-image: url(/images/share/icons/bookmark.svg);      mask-image: url(/images/share/icons/bookmark.svg); }
.jn-icon--comment       { -webkit-mask-image: url(/images/share/icons/comment.svg);       mask-image: url(/images/share/icons/comment.svg); }
.jn-icon--book          { -webkit-mask-image: url(/images/share/icons/book.svg);          mask-image: url(/images/share/icons/book.svg); }
.jn-icon--video         { -webkit-mask-image: url(/images/share/icons/video.svg);         mask-image: url(/images/share/icons/video.svg); }
.jn-icon--play          { -webkit-mask-image: url(/images/share/icons/play.svg);          mask-image: url(/images/share/icons/play.svg); }
.jn-icon--file-text     { -webkit-mask-image: url(/images/share/icons/file-text.svg);     mask-image: url(/images/share/icons/file-text.svg); }
.jn-icon--lock          { -webkit-mask-image: url(/images/share/icons/lock.svg);          mask-image: url(/images/share/icons/lock.svg); }
.jn-icon--chevron-right { -webkit-mask-image: url(/images/share/icons/chevron-right.svg); mask-image: url(/images/share/icons/chevron-right.svg); }
/* [BR11_D3] 홈 영상 소리 · 앱으로 이용하기 */
.jn-icon--volume-up     { -webkit-mask-image: url(/images/share/icons/volume-up.svg);     mask-image: url(/images/share/icons/volume-up.svg); }
.jn-icon--volume-off    { -webkit-mask-image: url(/images/share/icons/volume-off.svg);    mask-image: url(/images/share/icons/volume-off.svg); }
.jn-icon--smartphone    { -webkit-mask-image: url(/images/share/icons/smartphone.svg);    mask-image: url(/images/share/icons/smartphone.svg); }

/* 13-2. 상태 띠 : tint-strong 바탕, 이용중 배지 · 상품명 · 기간 (왼쪽) / D-day (오른쪽) */
.jn-hub__status {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--jn-space-2);
	padding: var(--jn-space-3) var(--jn-space-4);
	background: var(--jn-color-tint-strong);
	border-bottom: 1px solid var(--jn-color-line-input);
}

.jn-hub__status-main {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--jn-space-1) var(--jn-space-2);
	min-width: 0;
}

.jn-hub__badge {
	padding: 3px 9px;
	border-radius: var(--jn-radius-pill);
	background: var(--jn-color-brand);
	color: var(--jn-color-on-brand);
	font-size: var(--jn-fs-xxs);
	font-weight: var(--jn-fw-bold);
	line-height: var(--jn-lh-tight);
}

.jn-hub__product {
	font-size: var(--jn-fs-sm);
	font-weight: var(--jn-fw-bold);
	color: var(--jn-color-text-title);
}

.jn-hub__period {
	font-size: var(--jn-fs-xs);
	color: var(--jn-color-text-sub);
}

.jn-hub__dday {
	display: flex;
	flex: none;
	align-items: baseline;
	gap: var(--jn-space-1);
	font-family: var(--jn-font-display);
	font-size: var(--jn-fs-h2);
	font-weight: var(--jn-fw-bold);
	color: var(--jn-color-brand);
	white-space: nowrap;
}

/* '남은 기간' 글자는 PC 에서만 (14절) */
.jn-hub__dday-label {
	display: none;
	font-family: var(--jn-font-body);
	font-size: var(--jn-fs-xs);
	font-weight: var(--jn-fw-regular);
	color: var(--jn-color-text-sub);
}

/* 13-3. 본문 */
.jn-hub__body {
	display: flex;
	flex-direction: column;
	gap: var(--jn-gap-card);
	padding: var(--jn-space-5) var(--jn-space-4) var(--jn-space-6);
	word-break: keep-all;	/* 한글 낱말 중간에서 줄이 바뀌지 않게 (375 카드 설명 · 비활성 칸) */
	overflow-wrap: break-word;
}

.jn-hub__main,
.jn-hub__grid {
	display: flex;
	flex-wrap: wrap;
	gap: var(--jn-space-3);
}

/* 큰 카드 : 진한 바탕 + 금빛 아이콘 + 제목 + 설명 한 줄 */
.jn-hub a.jn-hub__card {
	display: flex;
	flex: 1 1 40%;
	flex-direction: column;
	gap: var(--jn-space-3);
	box-sizing: border-box;
	min-width: 0;
	padding: var(--jn-space-4);
	border-radius: var(--jn-radius-lg);
	color: var(--jn-color-on-brand);
	text-decoration: none;
}

.jn-hub a.jn-hub__card--brand {
	background: var(--jn-color-brand);
}

.jn-hub a.jn-hub__card--deep {
	background: var(--jn-color-brand-deep);
}

.jn-hub a.jn-hub__card--brand:hover,
.jn-hub a.jn-hub__card--brand:active {
	background: var(--jn-color-brand-deep);
}

.jn-hub a.jn-hub__card--deep:hover,
.jn-hub a.jn-hub__card--deep:active {
	background: var(--jn-color-brand);
}

.jn-hub__card-icon {
	width: 28px;
	height: 28px;
	color: var(--jn-color-gold-pale);
}

.jn-hub__card-title {
	font-family: var(--jn-font-display);
	font-size: var(--jn-fs-h2);
	font-weight: var(--jn-fw-bold);
	line-height: var(--jn-lh-tight);
}

.jn-hub__card-desc {
	font-size: var(--jn-fs-xs);
	line-height: var(--jn-lh-base);
	color: var(--jn-color-text-on-dark);
}

/* 내 작명목록 : 모바일 한 줄 (아이콘 원 · 제목 + 건수 · 최근 저장 · 꺾쇠) */
.jn-hub a.jn-hub__list {
	display: flex;
	flex: 1 1 100%;
	align-items: center;
	gap: var(--jn-space-3);
	box-sizing: border-box;
	min-width: 0;
	padding: var(--jn-space-3) var(--jn-space-4);
	border: 1px solid var(--jn-color-line);
	border-radius: var(--jn-radius-lg);
	background: var(--jn-color-surface);
	color: var(--jn-color-text);
	text-decoration: none;
}

.jn-hub a.jn-hub__list:hover,
.jn-hub a.jn-hub__list:active {
	border-color: var(--jn-color-gold);
}

.jn-hub__list-icon {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 40px;
	height: 40px;
	border: 1.5px solid var(--jn-color-gold);
	border-radius: 50%;
	background: var(--jn-color-tint);
	color: var(--jn-color-brand);
}

.jn-hub__list-icon .jn-icon {
	width: 20px;
	height: 20px;
}

.jn-hub__list-text {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.jn-hub__list-title {
	font-size: var(--jn-fs-base);
	font-weight: var(--jn-fw-bold);
}

.jn-hub__list-count {
	color: var(--jn-color-brand);
}

.jn-hub__list-sub {
	overflow: hidden;
	font-size: var(--jn-fs-xs);
	color: var(--jn-color-text-sub);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.jn-hub__list-arrow {
	width: 18px;
	height: 18px;
	color: var(--jn-color-gold);
}

/* 보조 칸 : 흰 카드, 아이콘 원(tint) + 글자 (+ 작은 설명)
 *  [BR11_D3] 칸 폭 고정 : 모바일 2열 (칸 수가 홀수여도 마지막 칸이 한 줄 전체로 늘지 않게). PC 열 수는 14절
 *  flex: 1 1 40%; → flex: 0 0 (반 - 간격 반) */
.jn-hub .jn-hub__item {
	display: flex;
	flex: 0 0 calc(50% - var(--jn-space-3) / 2);
	align-items: center;
	gap: var(--jn-space-3);
	box-sizing: border-box;
	min-width: 0;
	min-height: 60px;
	margin: 0;
	padding: var(--jn-space-2) var(--jn-space-3);
	border: 1px solid var(--jn-color-line);
	border-radius: var(--jn-radius-md);
	background: var(--jn-color-surface);
	color: var(--jn-color-text-strong);
	font-family: var(--jn-font-body);
	font-size: var(--jn-fs-sm);
	font-weight: var(--jn-fw-bold);
	line-height: var(--jn-lh-tight);
	text-align: left;
	text-decoration: none;
	text-shadow: none;
	cursor: pointer;
	-webkit-appearance: none;
}

.jn-hub a.jn-hub__item:hover,
.jn-hub a.jn-hub__item:active {
	border-color: var(--jn-color-gold);
}

.jn-hub__item-icon {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--jn-color-tint);
	color: var(--jn-color-text-gold);
}

.jn-hub__item-icon .jn-icon {
	width: 20px;
	height: 20px;
}

.jn-hub__item-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.jn-hub__item-sub {
	font-size: var(--jn-fs-xxs);
	font-weight: var(--jn-fw-medium);
	color: var(--jn-color-text-gold);
}

/* 13-4. 비활성 묶음 (2-4 비활성) : 점선 + muted 글자 + 자물쇠 + 사유 한 줄. 누르면 사유 안내 (aria-disabled) */
.jn-hub__locked {
	display: flex;
	flex-direction: column;
	gap: var(--jn-space-2);
	padding: var(--jn-space-3);
	border-radius: var(--jn-radius-lg);
	background: var(--jn-color-input-locked);
}

.jn-hub .jn-hub__locked-title {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	font-family: var(--jn-font-body);
	font-size: var(--jn-fs-xs);
	font-weight: var(--jn-fw-bold);
	color: var(--jn-color-text-sub);
}

.jn-hub__locked-title .jn-icon {
	width: 15px;
	height: 15px;
}

.jn-hub .jn-hub__item--locked {
	border: 1px dashed var(--jn-color-line-strong);
	background: var(--jn-color-disabled-bg);
	color: var(--jn-color-text-muted);
	cursor: default;
}

.jn-hub__item--locked .jn-hub__item-icon {
	background: transparent;
	color: var(--jn-color-text-muted);
}

.jn-hub__item--locked .jn-hub__item-sub {
	color: var(--jn-color-text-muted);
}

/* [BR11_D3] 375 에서 '로그아웃 후 이용' 이 줄바꿈되지 않게 : 비활성 칸은 아이콘 · 간격 · 좌우 여백을 줄이고 사유 한 줄은 줄바꿈 없음 */
.jn-hub .jn-hub__item--locked {
	gap: var(--jn-space-2);
	padding-right: var(--jn-space-2);
}

.jn-hub__item--locked .jn-hub__item-icon {
	width: 24px;
	height: 24px;
}

.jn-hub__item--locked .jn-hub__item-sub {
	white-space: nowrap;
}

/* 키보드 초점 (5-3) */
.jn-hub a.jn-hub__card:focus-visible,
.jn-hub a.jn-hub__list:focus-visible,
.jn-hub .jn-hub__item:focus-visible {
	outline: 2px solid var(--jn-color-brand);
	outline-offset: 2px;
}


/* =====================================================================
 * 15. 홈 (4-1, BR11_D3) : /mobile/index.jsp — 시안 01_home_mobile · 01_home_using_mobile · 01_home_pc
 *    <div class="jn-home">
 *      <section class="jn-home__status">  이용 중 현황 카드 (배지 · 상품명 · 남은 기간 · 진행 막대 · 기간 · 바로가기 3칸 · 로그아웃 안내)
 *                                         BR13_E: 머리 오른쪽 허브 링크 nav.jn-home__hub-links (작명홈 › · 감명홈 ›)
 *      <div class="jn-home__top">         소개 문구 .jn-home__intro + 영상 .jn-home__media (PC 2열)
 *      <div class="jn-home__products">    a.jn-home__product (성명감정 · 작명) + section.jn-home__paid (PC 3열)
 *                                         BR13_D: 성명감정은 div.jn-home__product--cn (위쪽 링크 + 바로가기 2칸 + 결과물 줄)
 *      <nav class="jn-home__links">       바로가기 3칸
 *      <section class="jn-home__app">     앱으로 이용하기 (웹 · 설정값 있을 때만)
 *    배치(흐름 · 위 여백 · PC 720 칼럼)는 jn-theme.css 12-5. a · button 에 data-role="none"
 * ===================================================================== */

.jn-home {
	display: flex;
	flex-direction: column;
	gap: var(--jn-gap-card);
	box-sizing: border-box;
	padding: var(--jn-space-5) var(--jn-space-4) var(--jn-space-6);
	color: var(--jn-color-text);
	font-family: var(--jn-font-body);
	text-align: left;
	word-break: keep-all;
	overflow-wrap: break-word;
}

/* 15-1. 이용 중 현황 카드 : brand-deep 바탕 + 금색 테두리 */
.jn-home__status {
	display: flex;
	flex-direction: column;
	gap: var(--jn-space-3);
	padding: var(--jn-space-5) var(--jn-space-4);
	border: 1px solid var(--jn-color-gold);
	border-radius: var(--jn-radius-xl);
	background: var(--jn-color-brand-deep);
	color: var(--jn-color-text-on-dark);
}

.jn-home__status-head,
.jn-home__status-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--jn-space-1) var(--jn-space-2);
}

.jn-home__status-row {
	align-items: flex-end;
}

.jn-home__status-title {
	display: flex;
	align-items: center;
	gap: var(--jn-space-2);
	min-width: 0;
}

.jn-home__badge {
	flex: none;
	padding: 3px 10px;
	border-radius: var(--jn-radius-pill);
	background: var(--jn-color-gold-light);
	color: var(--jn-color-brand-deep);
	font-size: var(--jn-fs-xxs);
	font-weight: var(--jn-fw-bold);
	line-height: var(--jn-lh-tight);
}

.jn-home .jn-home__status-product {
	margin: 0;
	font-family: var(--jn-font-display);
	font-size: var(--jn-fs-h3);
	font-weight: var(--jn-fw-bold);
	line-height: var(--jn-lh-tight);
	color: var(--jn-color-text-on-dark);
}

.jn-home__status-note,
.jn-home__status-period,
.jn-home__remain-label {
	font-size: var(--jn-fs-xs);
	color: var(--jn-color-text-on-dark);
}

.jn-home__remain {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.jn-home__remain-value {
	font-family: var(--jn-font-display);
	font-size: var(--jn-fs-score);
	font-weight: var(--jn-fw-bold);
	line-height: 1;
	color: var(--jn-color-gold-pale);
}

/* 진행 막대 : 경과일 / 전체일 (폭은 JSP 가 style="width:n%" 로) */
.jn-home__progress {
	height: 6px;
	border-radius: 3px;
	background: var(--jn-color-brand);
	overflow: hidden;
}

.jn-home__progress-bar {
	height: 6px;
	border-radius: 3px;
	background: var(--jn-color-gold-light);
}

/* 이용 중 바로가기 3칸 : 흰 칸 */
.jn-home__quick {
	display: flex;
	gap: var(--jn-space-2);
}

.jn-home a.jn-home__quick-item {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	box-sizing: border-box;
	min-width: 0;
	min-height: 76px;
	padding: var(--jn-space-3) var(--jn-space-1);
	border-radius: var(--jn-radius-md);
	background: var(--jn-color-surface);
	color: var(--jn-color-text-title);
	font-size: var(--jn-fs-sm);
	font-weight: var(--jn-fw-bold);
	line-height: var(--jn-lh-tight);
	text-align: center;
	text-decoration: none;
}

.jn-home a.jn-home__quick-item:hover,
.jn-home a.jn-home__quick-item:active {
	background: var(--jn-color-tint);
}

.jn-home__quick-item .jn-icon {
	width: 22px;
	height: 22px;
}

.jn-home__quick-sub {
	font-size: var(--jn-fs-xxs);
	font-weight: var(--jn-fw-medium);
	color: var(--jn-color-text-gold);
}

/* BR13_E: 현황 카드 머리 → 작명 · 감명 허브 링크 ('작명코드 인증됨' 글 자리)
 *   모양 = 15-3 성명감정 카드 바로가기 칸(.jn-home__cn-link) · 꺾쇠, 바탕 = 같은 카드 바로가기 3칸(.jn-home__quick-item)과 같은 surface */
.jn-home__hub-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--jn-space-2);
}

.jn-home a.jn-home__hub-link {
	display: inline-flex;
	align-items: center;
	gap: var(--jn-space-1);
	box-sizing: border-box;
	min-height: 44px;
	padding: 10px var(--jn-space-3);
	border-radius: var(--jn-radius-md);
	background: var(--jn-color-surface);
	color: var(--jn-color-text-title);
	font-size: var(--jn-fs-sm);
	font-weight: var(--jn-fw-bold);
	line-height: var(--jn-lh-tight);
	text-decoration: none;
	text-shadow: none;
	white-space: nowrap;
}

.jn-home a.jn-home__hub-link:hover,
.jn-home a.jn-home__hub-link:active {
	background: var(--jn-color-tint);
}

.jn-home__hub-link .jn-icon {
	flex: none;
	width: 16px;
	height: 16px;
	color: var(--jn-color-gold);
}

/* 로그아웃 안내 한 줄 */
.jn-home__status-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--jn-space-2);
	margin: 0;
	padding-top: var(--jn-space-3);
	border-top: 1px solid var(--jn-color-brand);
	font-size: var(--jn-fs-xxs);
	line-height: var(--jn-lh-base);
	color: var(--jn-color-text-on-dark);
}

.jn-home a.jn-home__logout {
	flex: none;
	display: inline-flex;
	align-items: center;
	min-height: var(--jn-touch);
	color: var(--jn-color-gold-pale);
	font-weight: var(--jn-fw-bold);
	text-decoration: underline;
}

/* 15-2. 소개 문구 + 영상 */
.jn-home__top {
	display: flex;
	flex-direction: column;
	gap: var(--jn-gap-card);
}

.jn-home__intro {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	text-align: center;
}

.jn-home .jn-home__title {
	margin: 0;
	font-family: var(--jn-font-display);
	font-size: var(--jn-fs-h1);
	font-weight: var(--jn-fw-bold);
	line-height: var(--jn-lh-tight);
	color: var(--jn-color-brand);
}

.jn-home .jn-home__intro-text {
	margin: 0;
	font-size: var(--jn-fs-sm);
	line-height: var(--jn-lh-base);
	color: var(--jn-color-text-sub);
}

/* 금색 선 + 마름모 (PC 만, 14절) */
.jn-home__ornament {
	display: none;
	align-items: center;
	gap: var(--jn-space-2);
	margin-top: var(--jn-space-1);
}

.jn-home__ornament-line {
	width: 56px;
	height: 1px;
	background: var(--jn-color-gold-light);
}

.jn-home__ornament-dot {
	width: 7px;
	height: 7px;
	background: var(--jn-color-gold);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

.jn-home__media {
	display: flex;
	flex-direction: column;
	gap: var(--jn-space-2);
}

/* 16:9 상자 : 구형 웹뷰를 위해 aspect-ratio 대신 padding-top 56.25% */
.jn-home__video {
	position: relative;
	box-sizing: border-box;		/* [BR11_D3 2차] 테두리 1px 이 폭에 더해져 칼럼보다 2px 넓던 것 */
	width: 100%;
	height: 0;
	padding-top: 56.25%;
	border: 1px solid var(--jn-color-gold);
	border-radius: var(--jn-radius-lg);
	background: var(--jn-color-brand-deep);
	overflow: hidden;
}

.jn-home__video video {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	background: var(--jn-color-brand-deep);
}

/* 가운데 재생 버튼 : 자동재생하지 않을 때(동작 줄이기 · 자동재생 막힘)만 보인다 (.jn-home__video--paused) */
.jn-home .jn-home__video-play {
	position: absolute;
	top: 50%;
	left: 50%;
	display: none;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	margin: -29px 0 0 -29px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--jn-color-gold-light);
	color: var(--jn-color-brand-deep);
	cursor: pointer;
	-webkit-appearance: none;
}

.jn-home__video--paused .jn-home__video-play {
	display: flex;
}

/* 🔊 소리 버튼 : 오른쪽 아래 44px */
.jn-home .jn-home__video-sound {
	position: absolute;
	right: var(--jn-space-2);
	bottom: var(--jn-space-2);
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--jn-touch);
	height: var(--jn-touch);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--jn-color-overlay);
	color: var(--jn-color-on-brand);
	cursor: pointer;
	-webkit-appearance: none;
}

.jn-home__video-sound .jn-icon {
	width: 22px;
	height: 22px;
}

/* 소리 꺼짐(기본) : volume-off 아이콘, 켜짐 : volume-up (.jn-home__video--sound) */
.jn-home__video-sound .jn-icon--volume-up,
.jn-home__video--sound .jn-home__video-sound .jn-icon--volume-off {
	display: none;
}

.jn-home__video--sound .jn-home__video-sound .jn-icon--volume-up {
	display: inline-block;
}

.jn-home .jn-home__video-play:focus-visible,
.jn-home .jn-home__video-sound:focus-visible {
	outline: 2px solid var(--jn-color-gold-light);
	outline-offset: 2px;
}

.jn-home .jn-home__video-note {
	margin: 0;
	font-size: var(--jn-fs-xxs);
	color: var(--jn-color-text-sub);
	text-align: center;
}

/* 15-3. 상품 카드 : 모바일 가로 한 줄 (아이콘 원 · 제목 + 가격 · 설명 · 꺾쇠) */
.jn-home__products {
	display: flex;
	flex-direction: column;
	gap: var(--jn-gap-card);
}

.jn-home a.jn-home__product,
.jn-home div.jn-home__product {		/* BR13_D: 성명감정 카드는 div (바로가기 2칸을 안에 둠) */
	display: flex;
	flex-direction: column;
	gap: var(--jn-space-3);
	box-sizing: border-box;
	padding: var(--jn-space-4);
	border: 1px solid var(--jn-color-line);
	border-radius: var(--jn-radius-lg);
	background: var(--jn-color-surface);
	color: var(--jn-color-text);
	text-decoration: none;
	text-shadow: none;
}

.jn-home a.jn-home__product:hover,
.jn-home a.jn-home__product:active {
	border-color: var(--jn-color-gold);
}

.jn-home__product-head {
	display: flex;
	align-items: center;
	gap: var(--jn-space-3);
	width: 100%;
}

.jn-home__product-icon,
.jn-home__paid-icon {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 54px;
	height: 54px;
	border: 1.5px solid var(--jn-color-gold);
	border-radius: 50%;
	background: var(--jn-color-tint);
	color: var(--jn-color-brand);
}

.jn-home__product-icon .jn-icon,
.jn-home__paid-icon .jn-icon {
	width: 26px;
	height: 26px;
}

.jn-home__product-text {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--jn-space-1);
	min-width: 0;
}

.jn-home__product-title-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--jn-space-2);
}

.jn-home__product-title {
	font-family: var(--jn-font-display);
	font-size: var(--jn-fs-h2);
	font-weight: var(--jn-fw-bold);
	line-height: var(--jn-lh-tight);
	color: var(--jn-color-text);
}

.jn-home__product-price {
	font-size: var(--jn-fs-base);
	font-weight: var(--jn-fw-bold);
	color: var(--jn-color-brand);
	white-space: nowrap;
}

.jn-home__product-desc {
	font-size: var(--jn-fs-xs);
	line-height: var(--jn-lh-base);
	color: var(--jn-color-text-sub);
}

.jn-home__product-arrow {
	width: 18px;
	height: 18px;
	color: var(--jn-color-gold);
}

/* 작명 카드 : 기본 / 프리미엄 요약 2칸 */
.jn-home__plans {
	display: flex;
	gap: var(--jn-space-2);
}

.jn-home__plan {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 2px;
	box-sizing: border-box;
	min-width: 0;
	padding: 10px var(--jn-space-3);
	border-radius: var(--jn-radius-md);
	background: var(--jn-color-tint);
	text-align: left;
}

.jn-home__plan-name {
	font-size: var(--jn-fs-xxs);
	color: var(--jn-color-text-sub);
}

.jn-home__plan-price {
	font-size: var(--jn-fs-body);
	font-weight: var(--jn-fw-bold);
	color: var(--jn-color-brand);
	white-space: nowrap;
}

/* 프리미엄 : 진한 바탕, '유명인 한자 사용처 확인' 을 첫 줄로 (design-spec v2.2) */
.jn-home__plan--premium {
	background: var(--jn-color-brand-deep);
}

.jn-home__plan-benefit {
	font-size: var(--jn-fs-xxs);
	font-weight: var(--jn-fw-bold);
	color: var(--jn-color-gold-light);
}

.jn-home__plan--premium .jn-home__plan-name {
	color: var(--jn-color-text-on-dark);
}

.jn-home__plan--premium .jn-home__plan-price {
	color: var(--jn-color-gold-pale);
}

.jn-home__product-note {
	font-size: var(--jn-fs-xxs);
	line-height: var(--jn-lh-base);
	color: var(--jn-color-text-gold);
}

/* BR13_D: 성명감정 카드 (div.jn-home__product--cn)
 *   위쪽 a.jn-home__product-main (아이콘 · 제목 · 가격 · 설명) → /checkname/
 *   nav.jn-home__cn-links 바로가기 2칸 (1성 2자 · 1성 1자 감명, 작명 카드 기본 / 프리미엄 칸과 같은 tint 칸) → 각자 주소
 *   그 아래 결과물 한 줄 .jn-home__product-note */
.jn-home a.jn-home__product-main {
	border-radius: var(--jn-radius-md);
	color: var(--jn-color-text);
	text-decoration: none;
	text-shadow: none;
}

.jn-home a.jn-home__product-main:hover .jn-home__product-title,
.jn-home a.jn-home__product-main:active .jn-home__product-title {
	color: var(--jn-color-brand);
}

.jn-home__cn-links {
	display: flex;
	gap: var(--jn-space-2);
}

.jn-home a.jn-home__cn-link {
	display: flex;
	flex: 1 1 0;
	align-items: center;
	justify-content: space-between;
	gap: var(--jn-space-1);
	box-sizing: border-box;
	min-width: 0;
	min-height: 44px;
	padding: 10px var(--jn-space-3);
	border-radius: var(--jn-radius-md);
	background: var(--jn-color-tint);
	color: var(--jn-color-text-title);
	font-size: var(--jn-fs-sm);
	font-weight: var(--jn-fw-bold);
	line-height: var(--jn-lh-tight);
	text-decoration: none;
	text-shadow: none;
	white-space: nowrap;
}

.jn-home a.jn-home__cn-link:hover,
.jn-home a.jn-home__cn-link:active {
	background: var(--jn-color-tint-strong);
}

.jn-home__cn-link .jn-icon {
	flex: none;
	width: 16px;
	height: 16px;
	color: var(--jn-color-gold);
}

/* 이미 결제하셨나요? : tint-strong 바탕, 버튼 2개 */
.jn-home__paid {
	display: flex;
	flex-direction: column;
	gap: var(--jn-space-3);
	box-sizing: border-box;
	padding: var(--jn-space-4);
	border: 1px solid var(--jn-color-line-input);
	border-radius: var(--jn-radius-lg);
	background: var(--jn-color-tint-strong);
}

/* 열쇠 아이콘 원은 PC 만 (14절) */
.jn-home__paid .jn-home__paid-icon {
	display: none;
	background: var(--jn-color-surface);
}

.jn-home__paid-text {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.jn-home .jn-home__paid-title {
	margin: 0;
	font-family: var(--jn-font-display);
	font-size: var(--jn-fs-h3);
	font-weight: var(--jn-fw-bold);
	line-height: var(--jn-lh-tight);
	color: var(--jn-color-text-title);
}

.jn-home__paid-desc {
	font-size: var(--jn-fs-xs);
	line-height: var(--jn-lh-base);
	color: var(--jn-color-text-sub);
}

.jn-home__paid-btns {
	display: flex;
	gap: var(--jn-space-2);
}

.jn-home__paid-btns > .jn-btn {
	flex: 1 1 0;
	min-width: 0;
	min-height: var(--jn-btn-h-sm);
	padding: 0 var(--jn-space-2);
	font-size: var(--jn-fs-sm);
}

.jn-home__paid-btns > .jn-btn--white {
	border-color: var(--jn-color-brand);
	color: var(--jn-color-brand);
}

/* 15-4. 바로가기 3칸 (사용후기 · 사용안내서 · 성명학 이야기) */
.jn-home .jn-home__more-title {
	margin: var(--jn-space-1) 0 0;
	font-family: var(--jn-font-display);
	font-size: var(--jn-fs-body);
	font-weight: var(--jn-fw-bold);
	color: var(--jn-color-text-title);
}

.jn-home__links {
	display: flex;
	gap: var(--jn-space-2);
}

.jn-home a.jn-home__link {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	box-sizing: border-box;
	min-width: 0;
	min-height: 72px;
	padding: var(--jn-space-3) var(--jn-space-1);
	border: 1px solid var(--jn-color-line);
	border-radius: var(--jn-radius-md);
	background: var(--jn-color-surface);
	color: var(--jn-color-text-strong);
	font-size: var(--jn-fs-xs);
	font-weight: var(--jn-fw-medium);
	line-height: var(--jn-lh-tight);
	text-align: center;
	text-decoration: none;
}

.jn-home a.jn-home__link:hover,
.jn-home a.jn-home__link:active {
	border-color: var(--jn-color-gold);
}

.jn-home__link .jn-icon {
	width: 22px;
	height: 22px;
	color: var(--jn-color-text-gold);
}

/* 15-5. 앱으로 이용하기 (웹만, 스토어 주소 설정값이 있을 때만) */
.jn-home__app {
	display: flex;
	flex-direction: column;
	gap: var(--jn-space-3);
	padding: var(--jn-space-4);
	border: 1px solid var(--jn-color-line);
	border-radius: var(--jn-radius-lg);
	background: var(--jn-color-surface);
}

.jn-home .jn-home__app-title {
	margin: 0;
	font-family: var(--jn-font-display);
	font-size: var(--jn-fs-h3);
	font-weight: var(--jn-fw-bold);
	color: var(--jn-color-text-title);
}

.jn-home .jn-home__app-desc {
	margin: 0;
	font-size: var(--jn-fs-xs);
	line-height: var(--jn-lh-base);
	color: var(--jn-color-text-sub);
}

.jn-home__app-body {
	display: flex;
	align-items: center;
	gap: var(--jn-space-4);
}

.jn-home__app-btns {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	gap: var(--jn-space-2);
	min-width: 0;
}

.jn-home__app-btns > .jn-btn {
	flex: 1 1 40%;
	min-width: 0;
	padding: 0 var(--jn-space-3);
	font-size: var(--jn-fs-sm);
}

.jn-home__app-btns .jn-icon {
	width: 20px;
	height: 20px;
}

/* QR 은 PC 만 (14절) */
.jn-home__app-qr {
	display: none;
	flex: none;
	width: 96px;
	height: 96px;
	border: 1px solid var(--jn-color-line);
	border-radius: var(--jn-radius-sm);
	background: var(--jn-color-input);
}

/* 키보드 초점 (5-3) */
.jn-home a.jn-home__product:focus-visible,
.jn-home a.jn-home__product-main:focus-visible,	/* BR13_D */
.jn-home a.jn-home__cn-link:focus-visible,		/* BR13_D */
.jn-home a.jn-home__hub-link:focus-visible,		/* BR13_E */
.jn-home a.jn-home__quick-item:focus-visible,
.jn-home a.jn-home__link:focus-visible {
	outline: 2px solid var(--jn-color-brand);
	outline-offset: 2px;
}


/* =====================================================================
 * 16. 설정 화면 (BR13_J, /comm/config/) : 묶음마다 .jn-card--static, 묶음 안에 설정 줄
 *     <div class="jn-setting">
 *       <section class="jn-card jn-card--static">
 *         <div class="jn-card__head"><span class="jn-card__title">소리</span></div>
 *         <div class="jn-card__body">
 *           <label class="jn-setting__row" for="settingSound">
 *             <span class="jn-setting__text"><span class="jn-setting__name">효과음 켜기</span><span class="jn-setting__desc">설명</span></span>
 *             <input type="checkbox" id="settingSound" data-role="none">
 *           </label>
 *         </div>
 *       </section>
 *     </div>
 *     설정 줄 높이 --jn-input-h(48) 이상, 줄 전체를 누르면 체크. 체크상자는 12절 .jn-popup__check 와 같은 모양
 *     버튼 위 설명 한 줄 : <p class="jn-setting__desc jn-setting__desc--block">
 * ===================================================================== */

.jn-setting .jn-setting__row {
	display: flex;
	align-items: center;
	gap: var(--jn-space-3);
	box-sizing: border-box;
	min-height: var(--jn-input-h);
	margin: 0;
	cursor: pointer;
}

.jn-setting .jn-setting__text {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--jn-space-1);
	min-width: 0;
}

.jn-setting .jn-setting__name {
	font-size: var(--jn-fs-body);
	font-weight: var(--jn-fw-medium);
	line-height: var(--jn-lh-tight);
	color: var(--jn-color-text-strong);
}

.jn-setting .jn-setting__desc {
	font-size: var(--jn-fs-xs);
	line-height: var(--jn-lh-base);
	color: var(--jn-color-text-sub);
	word-break: keep-all;	/* 한글 낱말 중간에서 줄이 바뀌지 않게 (13절과 같음) */
}

.jn-setting .jn-setting__desc--block {
	display: block;
	margin: 0 0 var(--jn-space-3);
}

.jn-setting .jn-setting__row input[type="checkbox"] {
	flex: none;
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--jn-color-brand);
	cursor: pointer;
}

.jn-setting .jn-setting__row input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--jn-color-brand);
	outline-offset: 2px;
}


/* =====================================================================
 * 14. 600px 이상 배치 (이 파일의 600px 분기는 여기 한 곳)
 * ===================================================================== */

@media (min-width: 600px) {

	/* 하위 헤더 : PC 60px, 아이콘 + 글자 */
	.jn-subhead {
		min-height: var(--jn-header-h-pc);
		padding: 0 var(--jn-space-3);
	}

	.jn-subhead__label {
		display: inline;
	}

	.jn-subhead__home,
	.jn-subhead__back {
		padding: 0 var(--jn-space-2);
	}

	/* 단계 표시 : 가로 한 줄 + 연결선 */
	.jn-step + .jn-step::before {
		content: "";
		position: absolute;
		top: 12px;
		right: 50%;
		width: 100%;
		border-top: 1.5px solid var(--jn-color-line-strong);
	}

	.jn-step--done + .jn-step::before,
	.jn-step--done + .jn-step--current::before {
		border-top-color: var(--jn-color-gold-light);
	}

	.jn-step > a,
	.jn-step > span {
		position: relative;
		z-index: 1;
	}

	.jn-step__dot {
		box-shadow: 0 0 0 4px var(--jn-color-surface);
	}

	/* 하단 고정 바 : 720px 콘텐츠 폭에 맞춰 가운데 */
	.jn-bottombar {
		max-width: var(--jn-content-max);
		margin: 0 auto;
	}

	/* 카드 묶음 : 3열 (D~G 에서 필요한 곳에 .jn-card-grid 로) */
	.jn-card-grid {
		display: flex;
		flex-wrap: wrap;
		gap: var(--jn-gap-card);
	}

	.jn-card-grid > .jn-card {
		flex: 1 1 30%;
		margin-bottom: 0;
	}

	/* 입력 폼 2열 */
	.jn-field-row {
		display: flex;
		gap: var(--jn-space-4);
	}

	.jn-field-row > .jn-field {
		flex: 1;
	}

	/* 허브 (13절) : 상태 띠 · 본문 PC 여백, 큰 카드 · 내 작명목록 3열 (시안 02_hub_using_pc), 보조 3열 */
	.jn-hub__status {
		padding: var(--jn-space-3) var(--jn-space-7);
	}

	.jn-hub__dday-label {
		display: inline;
	}

	.jn-hub__body {
		gap: var(--jn-space-4);
		padding: var(--jn-space-6) var(--jn-space-7) var(--jn-space-7);
	}

	.jn-hub__main {
		flex-wrap: nowrap;
	}

	.jn-hub a.jn-hub__card,
	.jn-hub a.jn-hub__list {
		flex: 1 1 0;
		padding: var(--jn-space-5);
		border-radius: var(--jn-radius-xl);
	}

	.jn-hub a.jn-hub__list {
		flex-direction: column;
		align-items: flex-start;
	}

	.jn-hub__list-sub {
		white-space: normal;
	}

	.jn-hub__list-arrow {
		display: none;
	}

	/* [BR11_D3] 보조 칸 PC 열 수 : 기본 3열 (칸 폭 고정, 마지막 줄이 늘지 않음).
	 *  칸이 4개이면 JSP 가 .jn-hub__grid--pc2 를 붙여 2×2 (4열은 720 칼럼에서 '성명감정서 조회' 가 줄바꿈됨)
	 *  flex: 1 1 30%; → 아래 */
	.jn-hub .jn-hub__item {
		flex: 0 0 calc((100% - 2 * var(--jn-space-3)) / 3);
		padding: var(--jn-space-2) var(--jn-space-4);
		font-size: var(--jn-fs-base);
	}

	.jn-hub .jn-hub__grid--pc2 > .jn-hub__item {
		flex-basis: calc(50% - var(--jn-space-3) / 2);
	}

	/* 홈 (15절) : PC 소개 + 영상 2열, 상품 카드 3열 (시안 01_home_pc) */
	.jn-home {
		gap: var(--jn-space-6);
		padding: var(--jn-space-7) var(--jn-space-7) var(--jn-space-7);
	}

	.jn-home__top {
		flex-direction: row;
		align-items: center;
		gap: var(--jn-space-6);
	}

	.jn-home__top > .jn-home__intro,
	.jn-home__top > .jn-home__media {
		flex: 1 1 0;
		min-width: 0;
	}

	.jn-home__intro {
		align-items: flex-start;
		text-align: left;
	}

	.jn-home__ornament {
		display: flex;
	}

	.jn-home__intro-text br {
		display: none;
	}

	.jn-home__products {
		flex-direction: row;
		align-items: stretch;
	}

	.jn-home__products > .jn-home__product,
	.jn-home__products > .jn-home__paid {
		flex: 1 1 0;
		min-width: 0;
	}

	.jn-home a.jn-home__product,
	.jn-home div.jn-home__product,		/* BR13_D */
	.jn-home__paid {
		flex-direction: column;
		align-items: center;
		padding: var(--jn-space-5) var(--jn-space-4);
		border-radius: var(--jn-radius-xl);
		text-align: center;
	}

	.jn-home__product-head {
		flex-direction: column;
		align-items: center;
	}

	.jn-home__product-title-row {
		flex-direction: column;
		align-items: center;
	}

	.jn-home__product-arrow {
		display: none;
	}

	.jn-home__product-icon,
	.jn-home__paid-icon {
		width: 64px;
		height: 64px;
	}

	.jn-home__plans {
		flex-direction: column;
		width: 100%;
		margin-top: auto;
	}

	.jn-home__plan {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: var(--jn-space-2) var(--jn-space-3);
	}

	/* 프리미엄 혜택 줄은 칸 위 한 줄 전체 */
	.jn-home__plan-benefit {
		flex: 1 1 100%;
	}

	/* BR13_D: 성명감정 카드 바로가기 2칸 = 작명 카드 기본 / 프리미엄 칸처럼 세로 2줄, 카드 아래쪽에 붙임 */
	.jn-home__cn-links {
		flex-direction: column;
		width: 100%;
		margin-top: auto;
	}

	.jn-home a.jn-home__cn-link {
		padding: var(--jn-space-2) var(--jn-space-3);
	}

	.jn-home__paid .jn-home__paid-icon {
		display: flex;
	}

	.jn-home__paid-btns {
		flex-direction: column;
		width: 100%;
		margin-top: auto;
	}

	.jn-home__links a.jn-home__link {
		flex-direction: row;
		justify-content: center;
		gap: var(--jn-space-2);
		min-height: 56px;
		font-size: var(--jn-fs-base);
	}

	.jn-home__status {
		padding: var(--jn-space-6);
	}

	.jn-home__app-qr {
		display: block;
	}
}