/**
 * Ultimate Member — dotplot 스타일 참고 (중립 톤·여백·단정한 보더)
 * - 생일: 네이티브 date 입력 + (백업) jQuery UI 달력
 * - 성별 등 라디오: 좌우 2열, 박스 없음, 시스템 라디오만
 *
 * 참고: 네이티브 date의 팝업 달력 UI는 OS/브라우저 전용이라 CSS로 동일 디자인 불가.
 */

/* ---- 토큰 — 필드 면색은 테마 body(--bg #f6f4f1)와 동일 (순백이면 본문+미스트 레이어와 톤이 갈라짐) ---- */
.um .um-form {
	--dp-radius: 8px;
	--dp-radius-lg: 12px;
	--dp-border: 1px solid #e4e4e7;
	--dp-border-focus: 1px solid #a1a1aa;
	--dp-bg: #f6f4f1;
	--dp-bg-subtle: #ebe6df;
	--dp-text: #18181b;
	--dp-muted: #71717a;
	/* UM 코어 기본 #3ba1da 대신 테마 악센트(혜광 main.css --accent 와 맞춤) */
	--dp-accent: #8e6e53;
	--dp-accent-contrast: #fafaf8;
	--um-hyegwang-brand-hover: #7a5f47;
	--dp-focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px #d4d4d8;
	/* 하위 호환 */
	--hw-um-radius: var(--dp-radius);
	--hw-um-border: var(--dp-border);
	--hw-um-focus: var(--dp-focus-ring);
	--hw-um-muted: var(--dp-muted);
}

/* 모달·오버레이 등 .um 밖에서도 강조색 사용 */
body.um-page {
	--dp-accent: #8e6e53;
	--dp-accent-contrast: #fafaf8;
	--um-hyegwang-brand-hover: #7a5f47;
}

.um .um-field {
	margin-bottom: 1.15rem;
}

.um .um-field-label {
	margin-bottom: 0.35rem;
	font-weight: 600;
	color: var(--dp-text);
	font-size: 0.875rem;
	letter-spacing: -0.01em;
}

.um .um-field-label label {
	font-weight: inherit;
}

/* ---- 텍스트·이메일·비밀번호 등 ---- */
.um .um-field input[type="text"],
.um .um-field input[type="password"],
.um .um-field input[type="email"],
.um .um-field input[type="tel"],
.um .um-field input[type="url"],
.um .um-field input[type="number"],
.um .um-field textarea,
.um .um-field select {
	width: 100%;
	max-width: 100%;
	padding: 0.75rem 0.875rem;
	font-size: 0.9375rem;
	line-height: 1.5;
	border: var(--dp-border);
	border-radius: var(--dp-radius);
	background: var(--dp-bg);
	color: var(--dp-text);
	box-sizing: border-box;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.um .um-field input:focus,
.um .um-field textarea:focus,
.um .um-field select:focus {
	outline: none;
	border-color: #e4e4e7;
	box-shadow: none;
}

.um .um-field textarea {
	min-height: 6rem;
	resize: vertical;
}

/* ---- 라디오: 좌우 배치, 박스 없음, UM 커스텀 아이콘 숨김 → 네이티브 라디오만 ---- */
.um .um-field-type_radio .um-field-area {
	display: flex !important;
	flex-flow: row wrap !important;
	align-items: center !important;
	gap: 0.5rem 1.5rem !important;
	float: none !important;
}

.um .um-field-type_radio .um-field-area > .um-clear {
	display: none !important;
}

.um .um-field-type_radio .um-field-area > label.um-field-radio.um-field-half {
	width: auto !important;
	flex: 1 1 calc(50% - 0.75rem) !important;
	max-width: calc(50% - 0.75rem) !important;
	float: none !important;
	display: inline-flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 0.5rem !important;
	margin: 0 !important;
	padding: 0.25rem 0 !important;
	box-sizing: border-box !important;
	border: none !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	cursor: pointer;
}

.um .um-field-type_radio .um-field-area > label.um-field-radio.um-field-half:hover {
	background: transparent !important;
}

/* UM 안드로이드 라디오 아이콘 제거 */
.um .um-field-type_radio .um-field-area > label.um-field-radio .um-field-radio-state {
	display: none !important;
}

/* UM 기본: 라디오 input 을 opacity:0 width:0 으로 숨김 → 네이티브 라디오 강제 표시 */
.um .um-field-type_radio .um-field-area > label.um-field-radio.um-field-half .um-field-radio-option {
	margin: 0 !important;
	margin-left: 0 !important;
	padding: 0 !important;
	flex: 0 1 auto;
	min-width: 0;
	white-space: nowrap;
	line-height: 1.4;
	font-weight: 500;
	font-size: 0.9375rem;
	color: var(--dp-text) !important;
	display: inline !important;
}

.um .um-field-type_radio .um-field-area > label.um-field-radio.um-field-half input[type="radio"] {
	opacity: 1 !important;
	width: 1.125rem !important;
	height: 1.125rem !important;
	min-width: 1.125rem !important;
	max-width: none !important;
	display: inline-block !important;
	float: none !important;
	position: static !important;
	flex-shrink: 0;
	margin: 0 !important;
	margin-right: 0.25rem !important;
	accent-color: var(--dp-accent);
	cursor: pointer;
	-webkit-appearance: auto;
	appearance: auto;
}

/* 체크박스: 기본 2열일 때만 비슷하게 (박스 없이) */
.um .um-field-type_checkbox .um-field-area {
	display: flex !important;
	flex-flow: row wrap !important;
	align-items: center !important;
	gap: 0.5rem 1.25rem !important;
}

.um .um-field-type_checkbox .um-field-area > .um-clear {
	display: none !important;
}

.um .um-field-type_checkbox .um-field-area > label.um-field-checkbox.um-field-half {
	width: auto !important;
	flex: 1 1 calc(50% - 0.625rem) !important;
	max-width: calc(50% - 0.625rem) !important;
	float: none !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 0.5rem !important;
	margin: 0 !important;
	padding: 0.25rem 0 !important;
	border: none !important;
	background: transparent !important;
	cursor: pointer;
}

.um .um-field-type_checkbox .um-field-area > label.um-field-checkbox .um-field-checkbox-state {
	display: none !important;
}

.um .um-field-type_checkbox .um-field-area > label.um-field-checkbox.um-field-half input[type="checkbox"] {
	opacity: 1 !important;
	width: 1.125rem !important;
	height: 1.125rem !important;
	min-width: 1.125rem !important;
	display: inline-block !important;
	float: none !important;
	position: static !important;
	accent-color: var(--dp-accent);
	margin: 0 !important;
	flex-shrink: 0;
	-webkit-appearance: auto;
	appearance: auto;
}

.um .um-field-type_checkbox .um-field-area > label.um-field-checkbox.um-field-half .um-field-checkbox-option {
	margin-left: 0 !important;
	color: var(--dp-text) !important;
}

/* 약관·개인정보 동의(복수 체크): 2열 50% 대신 풀폭 세로 — 우측 빈 여백·줄바꿈 깨짐 방지 */
.um .um-field-type_checkbox.um-field-terms_agree .um-field-area,
.um .um-field-type_checkbox.um-field-privacy_agree .um-field-area,
.um .um-field-type_checkbox.um-field-privacy_policy_agree .um-field-area,
.um .um-field-type_checkbox.um-field-privacy_policy .um-field-area {
	flex-direction: column !important;
	align-items: stretch !important;
	align-content: flex-start !important;
	gap: 0.75rem 0 !important;
}

.um .um-field-type_checkbox.um-field-terms_agree .um-field-area > label.um-field-checkbox.um-field-half,
.um .um-field-type_checkbox.um-field-privacy_agree .um-field-area > label.um-field-checkbox.um-field-half,
.um .um-field-type_checkbox.um-field-privacy_policy_agree .um-field-area > label.um-field-checkbox.um-field-half,
.um .um-field-type_checkbox.um-field-privacy_policy .um-field-area > label.um-field-checkbox.um-field-half {
	flex: 1 1 auto !important;
	max-width: 100% !important;
	width: 100% !important;
	align-items: flex-start !important;
}

.um .um-field-type_checkbox.um-field-terms_agree .um-field-area > label.um-field-checkbox.um-field-half .um-field-checkbox-option,
.um .um-field-type_checkbox.um-field-privacy_agree .um-field-area > label.um-field-checkbox.um-field-half .um-field-checkbox-option,
.um .um-field-type_checkbox.um-field-privacy_policy_agree .um-field-area > label.um-field-checkbox.um-field-half .um-field-checkbox-option,
.um .um-field-type_checkbox.um-field-privacy_policy .um-field-area > label.um-field-checkbox.um-field-half .um-field-checkbox-option {
	min-width: 0;
	flex: 1 1 auto;
	line-height: 1.45;
}

/* ---- 생일: 라벨/필드 아이콘 숨김 (UM 기본 캘린더 글리프) ---- */
.um .um-field-type_date .um-field-label-icon,
.um .um-field.um-field-date .um-field-label-icon {
	display: none !important;
}

.um .um-field-type_date .um-field-icon,
.um .um-field.um-field-date .um-field-icon {
	display: none !important;
}

/* ---- 생일: 래퍼 + 네이티브 date (빈 칸 문구는 브라우저 기본) ---- */
.um .um-field-type_date .um-field-area,
.um .um-field.um-field-date .um-field-area {
	position: relative;
}

.um .hw-um-date-wrap {
	display: block;
	width: 100%;
	position: relative;
	border: var(--dp-border);
	border-radius: var(--dp-radius);
	background: var(--dp-bg);
	box-sizing: border-box;
	min-height: 2.875rem;
	cursor: pointer;
}

.um .hw-um-date-wrap input[type="date"].um-form-field,
.um .hw-um-date-wrap input[type="date"] {
	position: relative;
	z-index: 2;
	width: 100% !important;
	max-width: 100% !important;
	padding: 0.75rem 0.875rem !important;
	margin: 0 !important;
	font-size: 0.9375rem;
	line-height: 1.5;
	border: none !important;
	border-radius: var(--dp-radius);
	background: transparent !important;
	color: var(--dp-text);
	box-sizing: border-box;
	min-height: 2.875rem;
	font-variant-numeric: tabular-nums;
	-webkit-appearance: none;
	appearance: none;
	box-shadow: none !important;
}

/* 값은 항상 보이게 (투명 처리 금지 — 부분 입력/포커스 시에도 숫자가 안 보이던 문제 방지) */

.um .hw-um-date-wrap input[type="date"]:focus {
	outline: none !important;
	border: none !important;
	box-shadow: none !important;
}

/* 달력 인디케이터 숨김 + 영역 전체가 클릭 타깃 (Chromium) */
.um .hw-um-date-wrap input[type="date"]::-webkit-calendar-picker-indicator,
.um .um-field-type_date input[type="date"]::-webkit-calendar-picker-indicator,
.um .um-field.um-field-date input[type="date"]::-webkit-calendar-picker-indicator {
	opacity: 0 !important;
	cursor: pointer;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

/* Firefox: 네이티브 인디케이터만 사용 */
.um .um-field-type_date input[type="date"]::-moz-focus-inner {
	border: 0;
}

/* datepicker 미전환 시(백업) */
.um .um-field-type_date input[type="text"].um-datepicker,
.um .um-field.um-field-date input[type="text"] {
	padding-right: 0.875rem;
	border: var(--dp-border);
	border-radius: var(--dp-radius);
}

/* ---- 기본 버튼 (UM 코어 #3ba1da 대신 --dp-accent) ---- */
.um .um-button,
.um input[type="submit"].um-button,
.um button.um-button {
	border-radius: var(--dp-radius);
	padding: 0.7rem 1.25rem;
	font-size: 0.9375rem;
	font-weight: 600;
	border: none;
	cursor: pointer;
	transition: transform 0.05s ease, opacity 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
	background-color: var(--dp-accent) !important;
	color: var(--dp-accent-contrast) !important;
}

.um .um-button:hover,
.um input[type="submit"].um-button:hover,
.um button.um-button:hover {
	background-color: var(--um-hyegwang-brand-hover, #7a5f47) !important;
	color: var(--dp-accent-contrast) !important;
}

.um .um-button:active {
	transform: scale(0.98);
}

/* ---- jQuery UI Datepicker — dotplot 스타일(백업 필드용) ---- */
.ui-datepicker {
	font-family: inherit !important;
	font-size: 0.8125rem !important;
	border: var(--dp-border) !important;
	border-radius: var(--dp-radius-lg) !important;
	box-shadow: 0 4px 24px rgba(24, 24, 27, 0.08), 0 1px 3px rgba(24, 24, 27, 0.06) !important;
	padding: 0.75rem !important;
	background: var(--dp-bg) !important;
	color: var(--dp-text) !important;
	z-index: 10050 !important;
	min-width: 17rem;
}

.ui-datepicker .ui-datepicker-header {
	border: none !important;
	background: var(--dp-bg-subtle) !important;
	border-radius: var(--dp-radius) !important;
	padding: 0.5rem 0.25rem !important;
	margin-bottom: 0.5rem !important;
}

.ui-datepicker .ui-datepicker-title {
	font-weight: 600 !important;
	color: var(--dp-text) !important;
	line-height: 1.75 !important;
	font-size: 0.875rem !important;
	letter-spacing: -0.02em !important;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
	top: 0.55rem !important;
	width: 2rem !important;
	height: 2rem !important;
	border-radius: var(--dp-radius) !important;
	cursor: pointer !important;
	border: none !important;
	background: transparent !important;
}

.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-next:hover {
	background: #e4e4e7 !important;
}

.ui-datepicker table {
	margin: 0 !important;
	border-collapse: separate !important;
	border-spacing: 2px !important;
	width: 100% !important;
}

.ui-datepicker th {
	font-size: 0.625rem !important;
	font-weight: 600 !important;
	color: var(--dp-muted) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.06em !important;
	padding: 0.35rem 0 !important;
}

.ui-datepicker td {
	padding: 0 !important;
	border: none !important;
}

.ui-datepicker td a,
.ui-datepicker td span {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 2.125rem !important;
	height: 2.125rem !important;
	margin: 0 auto !important;
	padding: 0 !important;
	border-radius: 9999px !important;
	border: none !important;
	background: transparent !important;
	color: var(--dp-text) !important;
	font-weight: 500 !important;
	font-size: 0.8125rem !important;
	line-height: 1 !important;
}

.ui-datepicker td a:hover {
	background: #f4f4f5 !important;
	color: var(--dp-text) !important;
}

/* 선택된 날짜: 채워진 점(원) */
.ui-datepicker td .ui-state-active,
.ui-datepicker td .ui-state-active.ui-state-hover {
	background: var(--dp-accent) !important;
	color: var(--dp-accent-contrast) !important;
}

.ui-datepicker td .ui-state-highlight {
	background: #f4f4f5 !important;
	color: var(--dp-text) !important;
	font-weight: 600 !important;
}

.ui-datepicker .ui-state-disabled span {
	color: #d4d4d8 !important;
	opacity: 1 !important;
}

/* ---- 알림 / 에러 ---- */
.um .um-notice,
.um .um-field-error {
	border-radius: var(--dp-radius);
}

.um .um-field-error {
	margin-top: 0.35rem;
	font-size: 0.875rem;
}

/* ---- UM 번들 기본 강조색(#3ba1da) 잔여분 — 링크·계정·모달·피커 등 ---- */
.um .um-cover-add:hover,
.um .um-field-checkbox.active:not(.um-field-radio-state-disabled) i,
.um .um-field-radio.active:not(.um-field-radio-state-disabled) i,
.um .um-item-meta a,
.um .um-member-less a:hover,
.um .um-member-more a:hover,
.um .um-member-name a:hover,
.um .um-members-pagi a:hover,
.um .um-profile-subnav a.active,
.um .um-tip:hover,
.um-account-name a:hover,
.um-account-nav a.current,
.um-account-side li a.current span.um-account-icon,
.um-account-side li a.current:hover span.um-account-icon,
.um-dropdown li a:hover,
.um i.um-active-color,
.um span.um-active-color {
	color: var(--dp-accent) !important;
}

.picker__box,
.picker__nav--next:hover,
.picker__nav--prev:hover,
.um .um-field-group-head,
.um .um-members-pagi span.current,
.um .um-members-pagi span.current:hover,
.um .um-profile-nav-item.active a,
.um .um-profile-nav-item.active a:hover,
.um-modal-header,
.upload,
div.uimob800 .um-account-side li a.current,
div.uimob800 .um-account-side li a.current:hover {
	background-color: var(--dp-accent) !important;
}

.um-modal-btn:not(:disabled) {
	background-color: var(--dp-accent) !important;
	color: var(--dp-accent-contrast) !important;
}

/* ---- 내 정보(UM 계정): 본문·미스트와 같은 베이스 ---- */
body.um-page-account {
	background-color: #f6f4f1;
}

.um.um-account {
	background-color: transparent !important;
}

/* 사이드 탭: UM 기본 #eee(차가운 회색) → 테마 크림 계열 */
.um.um-account .um-account-side li {
	background: #e8e3dd !important;
}

.um.um-account .um-account-side li a:hover {
	background: #ddd6ce !important;
	color: #2d2926 !important;
}

.um.um-account p.um-notice {
	background: #ede8e1 !important;
	color: #2d2926 !important;
}

/* 로그인 페이지: h1.entry-title ~ 폼·소셜까지 동일 650px 컬럼(784px 이상·이하 동일 가로 기준) */
body.um-page-login .site-main .entry.entry--page {
	max-width: 650px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 50px;
	box-sizing: border-box;
}

body.um-page-login .site-main .entry.entry--page .entry-content {
	margin-top: 50px;
}