/* ============================================================
	number-input.css
	Hyomin Design System v1.0 — Number Input Component

	컴포넌트:
	- .number-input           — 래퍼 (border, flex row, 160px)
	- .number-input__btn      — − / + 버튼 (40px × 100%)
	- .number-input__field    — 숫자 input (flex-1, text-center)

	수정자:
	- .number-input--sm       — height 32px
	- .number-input--lg       — height 48px
	- .number-input--disabled — 비활성 (또는 input[disabled]으로 자동 감지)

	사용법:
	<div class="number-input">
		<button class="number-input__btn number-input__btn--minus" type="button" aria-label="감소">
			<svg ...>...</svg>
		</button>
		<input class="number-input__field" type="number" value="1" min="0" max="99" aria-label="수량" />
		<button class="number-input__btn number-input__btn--plus" type="button" aria-label="증가">
			<svg ...>...</svg>
		</button>
	</div>
	============================================================ */

/* ─────────────────────────────────────────
	Wrapper
	───────────────────────────────────────── */

.number-input {
	display: inline-flex;
	align-items: stretch;
	width: 160px;
	height: 40px;
	border: 1px solid var(--gray-200);
	border-radius: var(--radius-md);
	overflow: hidden;
	background-color: #ffffff;
}

.number-input--sm {
	height: 32px;
}
.number-input--lg {
	height: 48px;
}

/* ─────────────────────────────────────────
	Buttons (Minus / Plus)
	───────────────────────────────────────── */

.number-input__btn {
	flex-shrink: 0;
	width: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background-color: var(--gray-50);
	color: var(--gray-500);
	cursor: pointer;
	padding: 0;
	transition: background-color var(--duration-fast) var(--easing-default);
}

.number-input__btn svg {
	display: block;
	overflow: visible;
}

.number-input__btn:hover {
	background-color: var(--gray-200);
}
.number-input__btn:focus-visible {
	outline: 2px solid var(--color-accent-main);
	outline-offset: -2px;
}

/* ─────────────────────────────────────────
	Input Field
	───────────────────────────────────────── */

.number-input__field {
	flex: 1;
	min-width: 0;
	border: 0;
	background: transparent;
	text-align: center;
	font-family: var(--font-secondary);
	font-size: var(--font-size-body-sm);
	font-weight: var(--font-weight-regular);
	color: var(--gray-900);
	padding: 0;
	-moz-appearance: textfield;
}

.number-input__field::-webkit-outer-spin-button,
.number-input__field::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.number-input__field:focus {
	outline: none;
}

/* ─────────────────────────────────────────
	Focus (wrapper border)
	───────────────────────────────────────── */
.number-input__field:focus-visible,
.number-input__btn:focus-visible {
	outline: 2px solid var(--color-accent-main);
	outline-offset: -2px;
}

/*.number-input:focus-within {
	border-color: var(--color-accent-main);
}*/

/* ─────────────────────────────────────────
	Disabled
	───────────────────────────────────────── */

.number-input--disabled .number-input__btn,
.number-input:has(.number-input__field:disabled) .number-input__btn {
	background-color: var(--gray-50);
	color: var(--gray-200);
	cursor: not-allowed;
	pointer-events: none;
}

.number-input--disabled .number-input__field,
.number-input:has(.number-input__field:disabled) .number-input__field {
	background-color: var(--gray-50);
	color: var(--gray-200);
	cursor: not-allowed;
}

/* ─────────────────────────────────────────
	Dark Mode
	───────────────────────────────────────── */

[data-theme="dark"] .number-input {
	border-color: var(--gray-600);
	background-color: var(--gray-800);
}

[data-theme="dark"] .number-input__btn {
	background-color: var(--gray-700);
	color: var(--gray-400);
}

[data-theme="dark"] .number-input__btn:hover {
	background-color: var(--gray-600);
}

[data-theme="dark"] .number-input__field {
	color: var(--gray-100);
}

[data-theme="dark"] .number-input:focus-within {
	border-color: var(--color-accent-main);
}

[data-theme="dark"] .number-input--disabled .number-input__btn,
[data-theme="dark"] .number-input:has(.number-input__field:disabled) .number-input__btn {
	background-color: var(--gray-800);
	color: var(--gray-700);
}

[data-theme="dark"] .number-input--disabled .number-input__field,
[data-theme="dark"] .number-input:has(.number-input__field:disabled) .number-input__field {
	background-color: var(--gray-800);
	color: var(--gray-700);
}