/* ============================================================
 * mk-email-domain.css — 이메일 입력칸 분할 UI
 * assets/js/mk-email-domain.js 가 만드는 마크업 전용.
 *
 *   .mk-ed
 *     ├ input.mk-ed-local   아이디
 *     ├ span.mk-ed-at       @
 *     ├ input.mk-ed-domain  도메인
 *     ├ select.mk-ed-sel    도메인 선택 (다음 줄, 100%)
 *     └ input[type=hidden]  원본 (완성형 값)
 *
 * 각 화면(auth.css / checkout.css)의 전역 input·select 규칙을
 * 그대로 물려받도록 색·테두리는 폴백값으로만 둔다.
 * ============================================================ */

.mk-ed {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 8px;
	width: 100%;
}

/* 아이디 · 도메인 · 셀렉트 모두 한 줄 */
.mk-ed-local {
	flex: 1.15 1 0;
	min-width: 0;
}

.mk-ed-domain {
	flex: 1 1 0;
	min-width: 0;
}

.mk-ed-at {
	flex: 0 0 auto;
	color: #999;
	font-size: 15px;
	line-height: 1;
	user-select: none;
}

/* 셀렉트 — 각 화면의 전역 select 규칙이 appearance:none 을 걸어 화살표가 사라지므로
 * 화살표를 직접 그린다 (!important: 사이트 규칙이 background 를 !important 로 덮음) */
.mk-ed-sel {
	flex: 1 1 0;
	width: auto;
	min-width: 0;
	cursor: pointer;
}

/* 특정도를 올려 사이트 전역 `select { background:#fff !important }` 를 이긴다 */
.mk-ed select.mk-ed-sel {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 36px !important;
	background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23888' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center !important;
	background-size: 12px 8px !important;
}

/* 화면에 따라 .input-text 규칙을 못 받는 곳(상품권 교환 등)을 위한 폴백 */
.mk-ed-local,
.mk-ed-domain,
.mk-ed-sel {
	box-sizing: border-box;
	min-height: 48px;
	padding: 12px 14px;
	border: 1px solid #dcdcdc;
	border-radius: 6px;
	background: #fff;
	color: var(--mk-ink, #222);
	font-family: var(--mk-font-main, inherit);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: -0.02em;
	transition: border-color 0.15s, background 0.15s;
}

.mk-ed-local:focus,
.mk-ed-domain:focus,
.mk-ed-sel:focus {
	border-color: var(--mk-ink, #222);
	background: #fff;
	outline: none;
}

/* 셀렉트로 고른 도메인 — 직접 편집 대신 셀렉트에서 바꾸도록 */
.mk-ed input.mk-ed-domain.is-locked {
	background: #f7f7f7 !important;
	color: #555;
}

/* 검증 오류 (WooCommerce / theme.js 공통) */
.woocommerce-invalid .mk-ed-local,
.woocommerce-invalid .mk-ed-domain,
.mk-ed-local:invalid.is-touched,
.mk-ed-domain:invalid.is-touched {
	border-color: #D9374A;
}

/* 모바일 — 세 칸을 한 줄에 유지하기 위해 여백만 줄인다. 글자는 iOS 확대 방지로 16px */
@media (max-width: 782px) {
	.mk-ed-local,
	.mk-ed-domain,
	.mk-ed-sel {
		font-size: 16px;          /* iOS 자동 확대 방지 — 더 줄이지 말 것 */
		padding-left: 8px !important;
		padding-right: 8px !important;
		letter-spacing: -0.03em;
	}

	.mk-ed select.mk-ed-sel {
		padding-right: 22px !important;
		background-position: right 6px center !important;
	}

	.mk-ed {
		gap: 4px;
	}

	/* 도메인 칸은 셀렉트와 값이 같으므로 조금 좁혀 아이디·셀렉트에 폭을 넘긴다 */
	.mk-ed-domain {
		flex: 0.9 1 0;
	}

	.mk-ed-at {
		font-size: 13px;
	}
}