/*
 * NFL 사주/만세력 — WEB_SAJU_UI_V01
 *
 * 모든 선택자가 `.nfl-saju` 아래로 스코프되어 있다. 이 파일은 사주 페이지에서만
 * 로드되고, 그 안에서도 자기 블록 밖으로 나가지 않으므로 기존 패션 사이트의
 * 어떤 요소에도 영향을 주지 않는다.
 *
 * 디자인 원칙: 밝고 깔끔함 / 충분한 여백 / 카드 기반 / 모바일 우선.
 * 검은 배경·금색·부적·붓글씨·오방색 등 점집 느낌 요소를 쓰지 않는다.
 */

.nfl-saju {
	/* 테마 폰트를 그대로 물려받되, 없을 때만 안전한 시스템 스택으로 떨어진다. */
	--nfl-ink: #111418;
	--nfl-ink-soft: #5b636d;
	--nfl-line: #e3e6ea;
	--nfl-line-strong: #c8ced6;
	--nfl-bg-soft: #f7f8fa;
	--nfl-accent: #1f2937;
	--nfl-danger: #b42318;
	--nfl-radius: 14px;

	max-width: 720px;
	margin: 0 auto;
	padding: 8px 0 48px;
	color: var(--nfl-ink);
	font-family: inherit;
	line-height: 1.6;
	-webkit-text-size-adjust: 100%;
}

.nfl-saju *,
.nfl-saju *::before,
.nfl-saju *::after {
	box-sizing: border-box;
}

/*
 * hidden 속성을 확실히 지킨다.
 *
 * 브라우저 기본 규칙 `[hidden] { display: none }` 은 **명시도가 가장 낮아서**,
 * 테마가 `.entry-content p { display: block }` 같은 규칙 하나만 가지고 있어도
 * 조용히 무시된다. 그러면 숨겨야 할 음력 입력·결과·안내가 한꺼번에 보인다.
 *
 * 이 프로젝트의 화면 전환은 전부 hidden 속성으로 하므로, 그 규칙이 깨지면
 * UI 전체가 깨진다. 테마를 고치지 않고 **플러그인 안에서만** 못을 박는다.
 * 범위를 `.nfl-saju` 내부로 한정했으므로 사이트의 다른 요소에는 닿지 않는다.
 */
.nfl-saju [hidden],
.nfl-saju[hidden] {
	display: none !important;
}

/* ---------- 헤더 ---------- */

.nfl-saju__head {
	text-align: center;
	margin-bottom: 28px;
}

.nfl-saju__title {
	margin: 0 0 10px;
	font-size: clamp(1.6rem, 1.15rem + 1.7vw, 2.1rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.25;
	color: var(--nfl-ink);
}

.nfl-saju__lead {
	margin: 0;
	color: var(--nfl-ink-soft);
	font-size: clamp(0.94rem, 0.9rem + 0.2vw, 1rem);
}

/* ---------- 폼 ---------- */

.nfl-saju__form {
	background: #fff;
	border: 1px solid var(--nfl-line);
	border-radius: var(--nfl-radius);
	padding: clamp(18px, 4vw, 28px);
}

.nfl-saju__field {
	margin: 0 0 22px;
}

.nfl-saju__fieldset {
	border: 0;
	padding: 0;
	min-width: 0; /* fieldset 이 flex 안에서 넘치는 것을 막는다 */
}

.nfl-saju__label {
	display: block;
	margin: 0 0 8px;
	padding: 0;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--nfl-ink);
}

.nfl-saju__help {
	margin: 8px 0 0;
	font-size: 0.83rem;
	color: var(--nfl-ink-soft);
}

.nfl-saju__input {
	width: 100%;
	min-height: 52px; /* 손가락으로 누르기 충분한 크기 */
	padding: 12px 14px;
	border: 1px solid var(--nfl-line-strong);
	border-radius: 10px;
	background: #fff;
	color: var(--nfl-ink);
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.4;
	appearance: none;
}

.nfl-saju__input:focus-visible,
.nfl-saju__submit:focus-visible,
.nfl-saju__segmented-input:focus-visible + .nfl-saju__segmented-label,
.nfl-saju__details-summary:focus-visible {
	outline: 2px solid var(--nfl-accent);
	outline-offset: 2px;
}

.nfl-saju__input[aria-invalid="true"] {
	border-color: var(--nfl-danger);
}

/* iOS Safari 에서 date/number 입력이 눌리는 문제 방지 */
.nfl-saju__input--date {
	min-width: 0;
}

/* number 입력의 스피너 제거 — 시/분은 직접 입력이 더 빠르다 */
.nfl-saju__input--time::-webkit-outer-spin-button,
.nfl-saju__input--time::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.nfl-saju__input--time {
	-moz-appearance: textfield;
	text-align: center;
	padding-right: 34px;
}

/* ---------- 성별 (Segmented) ---------- */

.nfl-saju__segmented {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.nfl-saju__segmented-input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

/*
 * 선택 상태가 한눈에 보여야 한다.
 *
 *   선택됨   진한 배경 + 흰 글자 + 굵게
 *   선택 안됨 흰 배경 + 진한 글자 + 테두리
 *
 * 색만으로 구분하지 않는다 — 굵기까지 함께 바뀌므로 색각 이상이 있어도
 * 어느 쪽이 선택됐는지 알 수 있다.
 */
.nfl-saju__segmented-label {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 12px 16px;
	border: 1px solid var(--nfl-line-strong);
	border-radius: 10px;
	background: #fff;
	color: var(--nfl-ink);
	font-size: 1rem;
	font-weight: 500;
	cursor: pointer;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	transition: border-color .12s ease, background-color .12s ease, color .12s ease;
}

.nfl-saju__segmented-label:hover {
	border-color: var(--nfl-ink-soft);
	background: var(--nfl-bg-soft);
}

.nfl-saju__segmented-input:checked + .nfl-saju__segmented-label {
	border-color: var(--nfl-accent);
	background: var(--nfl-accent);
	color: #fff;
	font-weight: 700;
}

/* 선택된 항목 위에 마우스를 올려도 선택 상태가 흐려지지 않게 한다. */
.nfl-saju__segmented-input:checked + .nfl-saju__segmented-label:hover {
	border-color: var(--nfl-accent);
	background: var(--nfl-accent);
	color: #fff;
}

/* ---------- 양력 / 음력 (LUNAR_CALENDAR_V01) ---------- */

/*
 * 달력 종류를 고르면 아래 입력 영역이 통째로 바뀐다.
 * 양력은 브라우저 날짜 선택기, 음력은 년/월/일 숫자 세 칸이다.
 * (음력 2월 30일처럼 양력 달력에 없는 날짜가 실재하기 때문이다.)
 */
.nfl-saju__date-pane {
	margin-top: 12px;
}

.nfl-saju__date-pane[hidden] {
	display: none;
}

.nfl-saju__lunar-date {
	display: flex;
	align-items: center;
	gap: 8px;
}

.nfl-saju__lunar-part {
	position: relative;
	min-width: 0;
}

/* 연도는 네 자리라 월/일보다 넓어야 한다 */
.nfl-saju__lunar-part:first-child {
	flex: 1.5 1 0;
}

.nfl-saju__lunar-part + .nfl-saju__lunar-part {
	flex: 1 1 0;
}

.nfl-saju__lunar-unit {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 0.85rem;
	color: var(--nfl-ink-soft);
	pointer-events: none;
}

.nfl-saju__input--year::-webkit-outer-spin-button,
.nfl-saju__input--year::-webkit-inner-spin-button,
.nfl-saju__input--monthday::-webkit-outer-spin-button,
.nfl-saju__input--monthday::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.nfl-saju__input--year,
.nfl-saju__input--monthday {
	-moz-appearance: textfield;
	text-align: center;
	padding-right: 30px;
}

/* ---------- 윤달 ---------- */

.nfl-saju__leap {
	display: flex;
	align-items: center;
	margin-top: 12px;
}

.nfl-saju__leap-input {
	width: 18px;
	height: 18px;
	margin: 0 8px 0 0;
	accent-color: var(--nfl-accent);
	cursor: pointer;
}

.nfl-saju__leap-label {
	font-size: 0.95rem;
	font-weight: 500;
	cursor: pointer;
}

/* ---------- 변환 안내 (음력 → 양력) ---------- */

.nfl-saju__conversion {
	margin: 0 0 16px;
	padding: 10px 14px;
	border: 1px solid var(--nfl-line);
	border-radius: 8px;
	background: var(--nfl-bg-soft);
	font-size: 0.92rem;
	color: var(--nfl-ink-soft);
	line-height: 1.6;
}

.nfl-saju__conversion[hidden] {
	display: none;
}

/* ---------- 시각 ---------- */

.nfl-saju__time {
	display: flex;
	align-items: center;
	gap: 10px;
}

.nfl-saju__time-part {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
}

.nfl-saju__time-unit {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 0.85rem;
	color: var(--nfl-ink-soft);
	pointer-events: none;
}

.nfl-saju__time-colon {
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--nfl-ink-soft);
	flex: 0 0 auto;
}

/* ---------- 시간 미상 (이번 버전 비활성) ---------- */

/*
 * 체크박스를 지우지 않고 disabled 로 남겨 둔 이유: 출생시간 미상을 지원할
 * 계획이 있다는 것과, 지금은 지원하지 않는다는 것을 동시에 알리기 위해서다.
 * 흐리게 두되 설명 문구는 또렷하게 읽히도록 대비를 유지한다.
 */
.nfl-saju__unknown {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px dashed var(--nfl-line);
}

.nfl-saju__unknown-input {
	width: 18px;
	height: 18px;
	margin: 0 8px 0 0;
	vertical-align: -3px;
	accent-color: var(--nfl-accent);
}

.nfl-saju__unknown-input:disabled,
.nfl-saju__unknown-input:disabled + .nfl-saju__unknown-label {
	cursor: not-allowed;
	opacity: .55;
}

.nfl-saju__unknown-label {
	font-size: 0.95rem;
	font-weight: 500;
}

.nfl-saju__unknown .nfl-saju__help {
	margin-top: 6px;
}

/* ---------- 오류 ---------- */

.nfl-saju__error {
	margin: 0 0 16px;
	padding: 12px 14px;
	border: 1px solid rgba(180, 35, 24, .35);
	border-left: 3px solid var(--nfl-danger);
	border-radius: 8px;
	background: rgba(180, 35, 24, .05);
	color: var(--nfl-danger);
	font-size: 0.92rem;
}

.nfl-saju__error::before {
	content: "알림: "; /* 색상만으로 오류를 전달하지 않는다 */
	font-weight: 700;
}

/* ---------- 버튼 ---------- */

.nfl-saju__submit {
	display: block;
	width: 100%;
	min-height: 56px;
	padding: 16px 24px;
	border: 0;
	border-radius: 10px;
	background: var(--nfl-accent);
	color: #fff;
	font-family: inherit;
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	cursor: pointer;
	transition: opacity .12s ease;
}

.nfl-saju__submit:hover { opacity: .9; }
.nfl-saju__submit[disabled] { opacity: .55; cursor: progress; }

/* ---------- 결과 ---------- */

.nfl-saju__result {
	margin-top: 36px;
}

.nfl-saju__result-title {
	margin: 0 0 18px;
	font-size: clamp(1.2rem, 1rem + 0.7vw, 1.45rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	text-align: center;
}

.nfl-saju__mock-badge {
	margin: 0 0 16px;
	padding: 10px 14px;
	border: 1px dashed #b45309;
	border-radius: 8px;
	background: #fffbeb;
	color: #92400e;
	font-size: 0.85rem;
	text-align: center;
}

/* 모바일 우선: 2 x 2 → 넓어지면 4열 */
.nfl-saju__cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

@media (min-width: 640px) {
	.nfl-saju__cards {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 14px;
	}
}

.nfl-saju__card {
	border: 1px solid var(--nfl-line);
	border-radius: var(--nfl-radius);
	background: var(--nfl-bg-soft);
	padding: 18px 10px 16px;
	text-align: center;
	min-width: 0;
}

.nfl-saju__card-label {
	margin: 0 0 10px;
	font-size: 0.83rem;
	font-weight: 600;
	color: var(--nfl-ink-soft);
	letter-spacing: .02em;
}

.nfl-saju__card-ganzhi {
	margin: 0 0 4px;
	/* 한자 2글자가 좁은 화면에서도 잘리지 않도록 뷰포트에 따라 줄인다 */
	font-size: clamp(1.55rem, 1.05rem + 2.4vw, 2.15rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .02em;
	word-break: keep-all;
}

.nfl-saju__card-hangul {
	margin: 0;
	font-size: clamp(0.86rem, 0.8rem + 0.3vw, 0.98rem);
	color: var(--nfl-ink-soft);
	word-break: keep-all;
}

/* ---------- 계산 상세 ---------- */

.nfl-saju__details {
	margin-top: 22px;
	border: 1px solid var(--nfl-line);
	border-radius: 10px;
	background: #fff;
}

.nfl-saju__details-summary {
	padding: 14px 16px;
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--nfl-ink-soft);
	cursor: pointer;
	list-style: none;
}

.nfl-saju__details-summary::-webkit-details-marker { display: none; }

.nfl-saju__details-summary::after {
	content: " ▾";
	font-size: .8em;
}

.nfl-saju__details[open] .nfl-saju__details-summary::after {
	content: " ▴";
}

.nfl-saju__details-list {
	margin: 0;
	padding: 0 16px 16px;
	display: grid;
	grid-template-columns: minmax(9rem, auto) 1fr;
	gap: 8px 14px;
	font-size: 0.85rem;
}

.nfl-saju__details-list dt {
	color: var(--nfl-ink-soft);
	word-break: keep-all;
}

.nfl-saju__details-list dd {
	margin: 0;
	color: var(--nfl-ink);
	/* 긴 ISO 문자열이 가로 스크롤을 만들지 않도록 강제로 접는다 */
	overflow-wrap: anywhere;
}

@media (max-width: 480px) {
	.nfl-saju__details-list {
		grid-template-columns: 1fr;
		gap: 2px;
	}
	.nfl-saju__details-list dd {
		margin-bottom: 8px;
	}
}

/* ---------- 안내 ---------- */

.nfl-saju__notice {
	margin: 16px 0 0;
	padding: 14px 16px;
	border: 1px solid var(--nfl-line);
	border-radius: 10px;
	background: var(--nfl-bg-soft);
	color: var(--nfl-ink-soft);
	font-size: 0.9rem;
	text-align: center;
}

/* tabindex="-1" 로 포커스를 받으므로 기본 아웃라인을 정돈한다. */
.nfl-saju__notice:focus {
	outline: none;
}

.nfl-saju__notice:focus-visible {
	outline: 2px solid var(--nfl-accent);
	outline-offset: 2px;
}

/*
 * 사용자가 방금 [만세력 보기] 를 눌러서 나온 응답.
 *
 * 계산 서버가 아직 없어도 **눌린 것은 확실히 보여야 한다.** 로드 시 안내와
 * 같은 회색 상자로 두면 화면이 한 글자도 바뀌지 않아 고장난 것처럼 느껴진다.
 */
.nfl-saju__notice--attention {
	border-color: var(--nfl-accent);
	background: #fff;
	color: var(--nfl-ink);
	font-size: 0.95rem;
	font-weight: 600;
	animation: nfl-saju-notice-pop .22s ease-out;
}

@keyframes nfl-saju-notice-pop {
	from { transform: scale(.98); opacity: .6; }
	to   { transform: scale(1);   opacity: 1; }
}

/* 애니메이션을 원치 않는 사용자에게는 움직임 없이 색 변화만 남긴다. */
@media (prefers-reduced-motion: reduce) {
	.nfl-saju__notice--attention {
		animation: none;
	}
}

/* ---------- 접근성 ---------- */

.nfl-saju__sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.nfl-saju * {
		transition: none !important;
	}
}

/* =========================================================================
   사주 기본 구조 (SAJU_MASTER_BUILD_V01 §34)

   네 기둥 아래에 붙는 FACT 영역. 여기 있는 것은 전부 규칙표로 확정되는
   사실이며 해석이 아니다. 색으로 좋고 나쁨을 암시하지 않는다 — 오행마다
   다른 색을 주지 않는 것도 그 때문이다.
   ====================================================================== */

.nfl-saju__facts {
	margin-top: 28px;
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.nfl-saju__fact-block {
	border-top: 1px solid var(--nfl-line);
	padding-top: 18px;
}

.nfl-saju__fact-title {
	margin: 0 0 12px;
	font-size: 1rem;
	font-weight: 600;
	color: var(--nfl-ink);
}

.nfl-saju__fact-note {
	margin: 10px 0 0;
	font-size: 0.82rem;
	line-height: 1.6;
	color: var(--nfl-ink-soft);
}

/* ---------- 나의 일간 ---------- */

.nfl-saju__daymaster {
	margin: 0;
	display: flex;
	align-items: baseline;
	gap: 12px;
	flex-wrap: wrap;
}

.nfl-saju__daymaster-hanja {
	font-size: 2.4rem;
	line-height: 1.1;
	font-weight: 600;
	color: var(--nfl-ink);
}

.nfl-saju__daymaster-desc {
	font-size: 0.95rem;
	color: var(--nfl-ink-soft);
}

/* ---------- 오행 ---------- */

.nfl-saju__elements {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.nfl-saju__element {
	display: grid;
	/* 이름 / 점 / 숫자. 점 칸이 남는 공간을 먹어 숫자가 오른쪽에 붙는다. */
	grid-template-columns: 2.4em 1fr 2em;
	align-items: center;
	gap: 10px;
	font-size: 0.92rem;
}

.nfl-saju__element-name {
	color: var(--nfl-ink);
}

.nfl-saju__element-dots {
	color: var(--nfl-ink-soft);
	letter-spacing: 0.18em;
	/*
	 * 좁은 화면에서는 점이 다음 줄로 넘어가게 둔다.
	 * nowrap + overflow:hidden 으로 잘라내면 개수를 잘못 읽게 된다 —
	 * 숫자가 옆에 있긴 하지만, 점과 숫자가 어긋나 보이는 편이 더 나쁘다.
	 */
	word-break: break-all;
}

.nfl-saju__element-count {
	text-align: right;
	font-variant-numeric: tabular-nums;
	color: var(--nfl-ink-soft);
}

/* ---------- 십성 ---------- */

/* 좁은 화면에서 표가 넘칠 수 있으므로 표만 가로로 스크롤한다.
   페이지 본문이 가로로 밀리지 않게 하는 것이 목적이다. */
.nfl-saju__tengods-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.nfl-saju__tengods {
	width: 100%;
	min-width: 320px;
	border-collapse: collapse;
	font-size: 0.88rem;
}

.nfl-saju__tengods th,
.nfl-saju__tengods td {
	border: 1px solid var(--nfl-line);
	padding: 8px 6px;
	text-align: center;
	vertical-align: middle;
}

.nfl-saju__tengods thead th {
	background: var(--nfl-bg-soft);
	font-weight: 600;
	color: var(--nfl-ink);
}

.nfl-saju__tengods tbody th {
	background: var(--nfl-bg-soft);
	font-weight: 500;
	color: var(--nfl-ink-soft);
}

.nfl-saju__tengod-hanja {
	display: block;
	font-size: 1.15rem;
	color: var(--nfl-ink);
}

.nfl-saju__tengod-name {
	display: block;
	margin-top: 2px;
	font-size: 0.78rem;
	color: var(--nfl-ink-soft);
}

/* 일간 자리 — 십성이 없는 이유를 표시한 칸. */
.nfl-saju__tengod-name--self {
	font-style: italic;
}

/* ---------- 지장간 ---------- */

.nfl-saju__hidden-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-top: 12px;
}

.nfl-saju__hidden-head {
	margin: 0 0 6px;
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--nfl-ink);
}

.nfl-saju__hidden-items {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 10px;
}

.nfl-saju__hidden-item {
	font-size: 0.85rem;
	color: var(--nfl-ink-soft);
	border: 1px solid var(--nfl-line);
	border-radius: 999px;
	padding: 3px 10px;
}

/* ---------- 관계 ---------- */

.nfl-saju__relations {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.nfl-saju__relation {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 0.88rem;
	border: 1px solid var(--nfl-line);
	border-radius: 10px;
	padding: 8px 12px;
}

.nfl-saju__relation-kind {
	font-weight: 600;
	color: var(--nfl-ink);
}

.nfl-saju__relation-chars {
	font-size: 1.05rem;
	color: var(--nfl-ink);
	letter-spacing: 0.08em;
}

.nfl-saju__relation-where {
	font-size: 0.78rem;
	color: var(--nfl-ink-soft);
}

/* 부분 성립 — 완성으로 오해하지 않도록 따로 표시한다. */
.nfl-saju__relation-partial {
	font-size: 0.75rem;
	color: var(--nfl-ink-soft);
	border: 1px dashed var(--nfl-line-strong);
	border-radius: 999px;
	padding: 1px 8px;
}

/* ---------- 월령 · 계절 ---------- */

.nfl-saju__month {
	margin: 0;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 6px 16px;
	font-size: 0.88rem;
}

.nfl-saju__month dt {
	color: var(--nfl-ink-soft);
}

.nfl-saju__month dd {
	margin: 0;
	color: var(--nfl-ink);
}

/* ---------- 좁은 화면 ---------- */

@media (max-width: 480px) {
	.nfl-saju__daymaster-hanja {
		font-size: 2rem;
	}

	.nfl-saju__tengods {
		font-size: 0.82rem;
	}

	.nfl-saju__tengods th,
	.nfl-saju__tengods td {
		padding: 6px 4px;
	}

	.nfl-saju__month {
		grid-template-columns: 1fr;
		gap: 2px 0;
	}

	.nfl-saju__month dd {
		margin-bottom: 8px;
	}
}