@charset "utf-8";
/* ============================================================
   ui-base.css  —  새 UI 공통 토큰
   기존 common.css 뒤에 읽혀서 덮어쓴다. common.css 는 수정하지 않는다.

   원칙 (2026-08-29 확정)
     · 효과를 겹치지 않는다. 베벨·광택·반복 애니메이션을 몰아넣지 않는다.
     · 여백과 글자가 주인공이다.
     · 금색은 버튼과 포커스 표시에만 아껴 쓴다. 배경에 넓게 깔지 않는다.
   ============================================================ */

:root {
	/* --- 기존 z 색 (common.css 와 동일 값) --- */
	--u-gold:        #e0a138;
	--u-gold-soft:   #ffdca1;
	--u-gold-deep:   #b8801f;

	/* --- 어두운 단계 --- */
	--u-bg-0:        #0a0a0c;   /* 바닥 */
	--u-bg-1:        #101013;   /* 패널 */
	--u-bg-2:        #16161a;   /* 입력칸 */
	--u-bg-3:        #1c1c21;   /* 입력칸 포커스 */

	--u-line:        rgba(255, 255, 255, .08);
	--u-line-2:      rgba(255, 255, 255, .16);
	--u-line-gold:   rgba(224, 161, 56, .55);

	--u-text:        #ededf0;
	--u-text-2:      #9c9ca5;
	--u-text-3:      #64646d;

	--u-shadow:      0 24px 60px rgba(0,0,0,.55);
	--u-ring:        0 0 0 3px rgba(224,161,56,.14);

	--u-radius:      14px;
	--u-radius-sm:   10px;
	--u-radius-lg:   20px;
	--u-ease:        cubic-bezier(.4, 0, .2, 1);

	/* ↓ ui-header.css 가 쓰는 이름들. 지우면 헤더가 깨진다.
	     (로그인 화면을 다시 만들면서 한 번 빠뜨려 헤더가 어긋난 적이 있다) */
	--u-gold-lite:   #f0b451;
	--u-ease-io:     cubic-bezier(.4, 0, .2, 1);
	--u-glow-gold:   0 0 0 3px rgba(224,161,56,.14);
	--u-shadow-lg:   0 24px 60px rgba(0,0,0,.55);

	/* 미세 그레인 — 그라데이션 띠(밴딩)를 없애는 용도. 아주 옅게만 쓴다 */
	--u-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 글꼴 — Pretendard(한글 가변폰트) 우선, 없으면 자연스럽게 떨어진다 */
.ui-new,
.ui-new h1, .ui-new h2, .ui-new h3, .ui-new h4,
.ui-new input,
.ui-new button,
.ui-new select,
.ui-new textarea {
	font-family: "Pretendard Variable", "Pretendard", "Noto Sans KR",
	             -apple-system, BlinkMacSystemFont, "Segoe UI",
	             "Malgun Gothic", "맑은 고딕", sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* 숫자는 폭이 일정해야 금액이 흔들리지 않는다 */
.ui-num { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------
   버튼 — 단색에 가깝게. 광택·베벨을 넣지 않는다
   ------------------------------------------------------------ */
.ui-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	border: 0;
	border-radius: var(--u-radius-sm);
	background: var(--u-gold);
	color: #1b1305;
	font-weight: 700;
	letter-spacing: -.01em;
	cursor: pointer;
	transition: background .16s var(--u-ease), transform .12s var(--u-ease);
}
.ui-btn:hover        { background: #edb04c; }
.ui-btn:active       { transform: translateY(1px); background: var(--u-gold-deep); }
.ui-btn:focus-visible{ outline: none; box-shadow: var(--u-ring); }

/* ------------------------------------------------------------
   입력칸 — 라벨이 위로 떠오르는 방식
   ------------------------------------------------------------ */
.ui-field { position: relative; display: block; }

.ui-field > input {
	width: 100%;
	height: 54px;
	padding: 19px 14px 5px 14px;
	box-sizing: border-box;
	border: 1px solid var(--u-line);
	border-radius: var(--u-radius-sm);
	background: var(--u-bg-2);
	color: var(--u-text);
	font-size: 15px;
	line-height: 1.2;
	text-align: left;
	outline: none;
	transition: border-color .16s var(--u-ease),
	            box-shadow .16s var(--u-ease),
	            background .16s var(--u-ease);
}
.ui-field > input:hover { border-color: var(--u-line-2); }
.ui-field > input:focus {
	border-color: var(--u-line-gold);
	background: var(--u-bg-3);
	box-shadow: var(--u-ring);
}

/* 떠오르는 라벨 — placeholder 를 " " 로 두고 :placeholder-shown 으로 판정한다 */
.ui-field > .ui-label {
	position: absolute;
	top: 50%;
	left: 15px;
	transform: translateY(-50%);
	color: var(--u-text-2);
	font-size: 14.5px;
	pointer-events: none;
	transition: top .16s var(--u-ease), font-size .16s var(--u-ease),
	            color .16s var(--u-ease), transform .16s var(--u-ease);
}
.ui-field > input:focus ~ .ui-label,
.ui-field > input:not(:placeholder-shown) ~ .ui-label {
	top: 14px;
	transform: none;
	font-size: 11px;
	color: var(--u-text-3);
}
.ui-field > input:focus ~ .ui-label { color: var(--u-gold); }

/* 오른쪽 보조 버튼 (비밀번호 보기 등) */
.ui-field > .ui-field-btn {
	position: absolute;
	top: 50%;
	right: 7px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin-top: -18px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--u-text-3);
	cursor: pointer;
	transition: color .16s var(--u-ease), background .16s var(--u-ease);
}
.ui-field > .ui-field-btn:hover { color: var(--u-text-2); background: rgba(255,255,255,.05); }
.ui-field > .ui-field-btn svg   { width: 17px; height: 17px; }

/* 애니메이션을 끄고 쓰는 사용자 배려 */
@media (prefers-reduced-motion: reduce) {
	.ui-new *, .ui-new *::before, .ui-new *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
}