/* ---------- 디자인 토큰 (라이트 테마) ---------- */
:root {
	/* ★ CHANGED: 다크 → 라이트 팔레트 */
	--bg: #F5F7FB; /* 페이지 배경(밝은 그레이+블루 톤) */
	--surface: #FFFFFF; /* 카드/패널 */
	--line: #E5EAF2; /* 경계선 */
	--text: #0B1220; /* 본문 텍스트 */
	--muted: #5A667A; /* 보조 텍스트 */
	--accent: #2563EB; /* 메인 포커스/버튼 */
	--accent-2: #3B82F6;
	--shadow: 0 10px 30px rgba(8, 34, 84, 0.12);
	/* 스케일 */
	--fs-title: clamp(26px, 3.0vw, 42px);
	--fs-body: clamp(16px, 1.2vw, 20px);
	--fs-label: clamp(14px, 1.0vw, 18px);
	--ctl-h: clamp(48px, 6.2vh, 72px);
	--gap-xl: clamp(16px, 3vh, 36px);
	--gap-lg: clamp(12px, 2.2vh, 28px);
	--gap-md: clamp(10px, 1.6vh, 20px);
	--radius: 18px;
	--radius-sm: 12px;
}

* {
	box-sizing: border-box;
}

html, body {
	height: 100%;
}

body {
	margin: 0;
	color: var(--text);
	background: /* ★ CHANGED: 밝은 배경용 은은한 패턴 */ radial-gradient( 900px 600px
		at 10% 0%, rgba( 37, 99, 235, 0.08), transparent 60%),
		radial-gradient( 800px 600px at 100% 100%, rgba( 14, 165, 233, 0.08),
		transparent 60%), var( --bg);
	font-family: system-ui, -apple-system, "Segoe UI", Roboto,
		"Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}

/* ★CHANGED: 로고+패널 감싸는 컨테이너 */
.login-container {
	display: grid;
	gap: 20px;
	justify-items: start; /* 왼쪽 정렬 */
}

/* ★CHANGED: 로고가 로그인 박스 바로 위 */
.logo-above {
	margin-left: 10px; /* 로그인 박스와 맞춰 살짝 들여쓰기 */
}

.logo-above img {
	max-height: 60px;
	width: auto;
}

/* ---------- 메인 ---------- */
.wrap {
	min-height: calc(100vh - 500px);
	display: grid;
	place-items: center;
	padding: clamp(16px, 3.5vh, 48px) clamp(16px, 3vw, 40px);
	overflow-y: hidden;
}

.panel {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	width: min(960px, 92vw);
	display: grid;
	grid-template-columns: 1.1fr 1fr; /* 좌: 안내 / 우: 폼 */
	overflow: clip;
}

/* 16:10(1280x800) 최적: 세로가 낮으면 좌측 안내를 살짝 축소 */
@media ( max-aspect-ratio : 16/10) {
	.panel {
		grid-template-columns: 1fr 1fr;
	}
}

/* 1열로 접기 (아주 좁은 창 대비) */
@media ( max-width : 980px) {
	.panel {
		grid-template-columns: 1fr;
	}
}

.panel-left {
	padding: clamp(18px, 3vh, 40px);
	background: linear-gradient(180deg, #F9FBFF, #F3F7FE);
	border-right: 1px solid var(--line);
	display: grid;
	align-content: center;
	gap: var(--gap-lg);
}

.title {
	font-size: var(--fs-title);
	font-weight: 800;
	margin: 0;
	letter-spacing: -0.02em;
}

.subtitle {
	color: var(--muted);
	font-size: var(--fs-body);
	margin: 0;
}

.panel-right {
	padding: clamp(18px, 3.2vh, 44px);
	display: grid;
	align-content: center;
	gap: var(--gap-lg);
}

.form {
	display: grid;
	gap: var(--gap-md);
}

.field {
	display: grid;
	gap: var(--gap-md);
}

.label {
	font-size: var(--fs-label);
	color: #334155;
	font-weight: 700;
	margin-bottom: 10px;
}

.input {
	height: var(--ctl-h);
	border-radius: 14px;
	border: 1px solid #D5DEEA; /* ★ CHANGED: 밝은 테두리 */
	background: #FDFEFF; /* ★ CHANGED: 라이트 입력 배경 */
	color: var(--text);
	padding: 0 clamp(14px, 1.2vw, 20px);
	font-size: var(--fs-body);
	outline: none;
	transition: border-color .2s, box-shadow .2s, background .2s;
}

.input::placeholder {
	color: #9AA8BC;
}

.input:focus {
	border-color: var(--accent);
	box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15);
	background: #FFFFFF;
}

.actions {
	display: grid;
	gap: var(--gap-md);
	margin-top: 10px;
}

.btn {
	height: var(--ctl-h);
	border: 0;
	border-radius: 14px;
	background: linear-gradient(180deg, var(--accent), var(--accent-2));
	color: white;
	font-weight: 800;
	font-size: calc(var(--fs-body)+ 2px);
	letter-spacing: 0.02em;
	cursor: pointer;
	box-shadow: 0 8px 18px rgba(37, 99, 235, 0.28);
	transition: transform .06s ease, filter .2s ease, box-shadow .2s ease;
}

.btn:hover {
	filter: brightness(1.05);
}

.btn:active {
	transform: translateY(1px) scale(0.998);
}

.helper {
	text-align: center;
	color: var(--muted);
	font-size: var(--fs-label);
}

/* 세부 최적화 */
@media ( max-height : 820px) {
	.title {
		font-size: clamp(24px, 2.6vw, 36px);
	}
}

@media ( min-width : 1680px) {
	.panel {
		width: min(1100px, 84vw);
	}
}

/* 결제창 */
body {
	margin: 0;
	color: var(--text);
	background: radial-gradient(900px 600px at 12% -10%, rgba(37, 99, 235, 0.08),
		transparent 60%),
		radial-gradient(800px 600px at 100% 110%, rgba(14, 165, 233, 0.08),
		transparent 60%), var(--bg);
	font-family: system-ui, -apple-system, "Segoe UI", Roboto,
		"Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}

/* ---------- 페이지 컨테이너 ---------- */
.wrap {
	min-height: calc(100svh - 90px);
	padding: clamp(16px, 3.2vh, 48px) clamp(16px, 3vw, 40px);
}

.page1 {
	max-width: 1400px;
	margin: 0 auto;
	display: grid;
	gap: var(--gap-lg);
}

.topbar {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 16px;
	margin-top: 30px;
}

.logo-above img {
	display: block;
	max-height: 68px;
	width: auto;
}

.top-actions {
	display: flex;
	gap: 8px;
}

.page1 .ghost-btn {
	height: 50px;
	padding: 0 30px;
	border-radius: 12px;
	border: 1px solid var(--line);
	background: #fff;
	color: #334155;
	font-weight: 700;
	cursor: pointer;
}

/* ---------- 본문 2열 레이아웃 ---------- */
.container {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	/* ★ CHANGED: 가운데 간격 더 넓힘 */
	column-gap: clamp(24px, 2vw, 56px);
	row-gap: var(--gap-xxl);
}

@media ( max-aspect-ratio : 16/10) {
	.container {
		grid-template-columns: 1fr 1fr;
	}
}

@media ( max-width : 1100px) {
	.container {
		grid-template-columns: 1fr;
	}
}

.card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: clamp(16px, 2.6vh, 28px);
}

/* ---------- 좌측: 결제 요약 & 포인트 ---------- */
.amount-wrap {
	display: grid;
	gap: 15px;
}

.amount-hero {
	display: grid;
	gap: var(--gap-md);
	padding: clamp(14px, 2vh, 22px);
	background: var(--surface-2);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

.label {
	color: #334155;
	font-weight: 800;
	font-size: var(--fs-label);
}

.amount {
	font-size: var(--fs-huge);
	font-weight: 900;
	letter-spacing: -0.02em;
}

.subline {
	color: var(--muted);
	font-size: var(--fs-body);
}

.grid-1 .label-flex {
	display: flex;
	justify-content: space-between;
	margin-top: 13px;
}

.label-flex input {
	margin-right: 10px;
}

.label-flex button {
	width: 90px;
    font-size: 16px;
    border-radius: 10px;
    border: 1px solid #eee;
    color: #333;
}

.grid-2 {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--gap-xl);
}

.grid-2>* {
	min-width: 0;
}

.grid-2>.field {
	min-width: 0;
}

@media ( max-width : 1100px) {
	.grid-2 {
		grid-template-columns: 1fr;
	}
}

.field {
	display: grid;
	gap: var(--gap-sm);
}

.input {
	width: 100%;
	display: block;
	height: var(--ctl-h);
	border-radius: var(--radius-sm);
	border: 1px solid #D5DEEA;
	background: #FDFEFF;
	color: var(--text);
	padding: 0 clamp(14px, 1.2vw, 20px);
	font-size: var(--fs-body);
	outline: none;
	transition: border-color .2s, box-shadow .2s, background .2s;
}

.input::placeholder {
	color: #9AA8BC;
}

.input:focus {
	border-color: var(--accent);
	box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15);
	background: #fff;
}

.switch {
	display: inline-grid;
	grid-auto-flow: column;
	align-items: center;
	gap: 10px;
	user-select: none;
}

.switch input {
	display: none;
}

.toggle {
	width: 54px;
	height: 32px;
	border-radius: 999px;
	background: #E5EAF2;
	position: relative;
	transition: background .2s;
	border: 1px solid var(--line);
}

.knob {
	position: absolute;
	top: 50%;
	left: 4px;
	transform: translateY(-50%);
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #fff;
	transition: left .2s;
	border: 1px solid #D5DEEA;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}

.switch input:checked+.toggle {
	background: #DBEAFE;
	border-color: #BFDBFE;
}

.switch input:checked+.toggle .knob {
	left: 26px;
}

.inline {
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
}

.mini {
	height: 40px;
	padding: 0 12px;
	border-radius: 10px;
	border: 1px solid var(--line);
	background: #fff;
	font-weight: 700;
	color: #334155;
	cursor: pointer;
}

/* ---------- 우측: 내역 & 키패드 ---------- */
.list {
	display: grid;
	gap: 10px;
	max-height: 38vh;
	overflow: auto;
	padding-right: 4px;
}

.row {
	display: grid;
	grid-template-columns: 1fr auto auto;
	gap: 12px;
	align-items: center;
	padding: 10px 12px;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: #fff;
}

.row .name {
	font-weight: 800;
}

.row .price {
	font-weight: 900;
}

.row .del {
	border: 0;
	background: transparent;
	color: #64748B;
	font-weight: 900;
	cursor: pointer;
	padding: 6px;
}

.pad {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}

.key {
	height: clamp(56px, 9vh, 86px);
	font-size: clamp(20px, 2vw, 28px);
	border-radius: 16px;
	border: 1px solid var(--line);
	background: #fff;
	cursor: pointer;
	font-weight: 900;
}

.key.ok {
	background: linear-gradient(180deg, var(--accent), var(--accent-2));
	color: #fff;
	border: 0;
	box-shadow: 0 8px 18px rgba(37, 99, 235, 0.28);
}

.key.clear {
	background: #FFF5F5;
	border-color: #FEE2E2;
	color: #DC2626;
}

.sum {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	padding: 12px 16px;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: #fff;
	font-weight: 900;
}

/* 키패드 위/아래 스택 */
.pad-stack {
	display: grid;
	grid-template-rows: auto auto;
	gap: var(--gap-xl);
	margin-top: var(--gap-lg);
}

/* ---------- 하단 고정 결제 버튼 ---------- */
.paybar {
	position: sticky;
	bottom: 0;
	margin-top: var(--gap-xxl);
	background: linear-gradient(180deg, transparent, rgba(245, 247, 251, .92)
		20%, rgba(245, 247, 251, 1) 60%);
	backdrop-filter: blur(2px);
}

/* ★ CHANGED: 버튼 키오스크 사이즈로 크게 */
.paybtn {
	width: 100%;
	height: clamp(76px, 8vh, 128px);
	border: 0;
	border-radius: 20px;
	background: linear-gradient(180deg, #0EA5E9, #2563EB);
	color: #fff;
	font-weight: 900;
	font-size: clamp(22px, 2.3vw, 36px);
	letter-spacing: 0.02em;
	cursor: pointer;
	box-shadow: 0 16px 34px rgba(37, 99, 235, 0.28);
}

.paybtn:disabled {
	background: linear-gradient(180deg, #CBD5E1, #94A3B8);
	box-shadow: none;
	cursor: not-allowed;
	height: 80px;
}

/* 좁은 높이 대응 */
@media ( max-height : 820px) {
	.list {
		max-height: 34vh;
	}
}


/* 결제 리스트 */

.ph-wrap .topbar {
	margin-bottom: 20px;
}

.ph-wrap .top-actions .ghost-btn {
    height: 50px;
    padding: 0 30px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: #fff;
    color: #334155;
    font-weight: 700;
    cursor: pointer;
}
/* ============ 스코프: 결제 내역 전용 ============ */
.ph-page {
	--bg: #F5F7FB;
	--surface: #FFF;
	--surface-2: #F9FBFF;
	--line: #E5EAF2;
	--text: #0B1220;
	--muted: #5A667A;
	--accent: #2563EB;
	--accent-2: #3B82F6;
	--danger: #EF4444;
	--okay: #10B981;
	--shadow: 0 10px 30px rgba(8, 34, 84, .12);
	--fs-huge: clamp(28px, 5.2vw, 64px);
	--fs-title: clamp(20px, 2.0vw, 28px);
	--fs-body: clamp(14px, 1.2vw, 18px);
	--fs-label: clamp(13px, 1.0vw, 16px);
	--gap-xxl: clamp(18px, 3.4vh, 44px);
	--gap-xl: clamp(14px, 2.6vh, 32px);
	--gap-lg: clamp(12px, 2.2vh, 28px);
	--gap-md: clamp(10px, 1.6vh, 20px);
	--gap-sm: clamp(8px, 1.2vh, 14px);
	--radius: 18px;
	--radius-sm: 12px;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto,
		"Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
	color: var(--text);
}

.ph-page * {
	box-sizing: border-box;
}

/* 배경 */
.ph-bg {
	background: radial-gradient(900px 600px at 12% -10%, rgba(37, 99, 235, .08),
		transparent 60%),
		radial-gradient(800px 600px at 100% 110%, rgba(14, 165, 233, .08),
		transparent 60%), var(--bg);
	min-height: 100svh;
}

/* 헤더 */
.ph-header {
	position: sticky;
	top: 0;
	z-index: 10;
	background: transparent;
	padding: clamp(12px, 2.2vh, 24px) clamp(16px, 3vw, 40px);
}

.ph-header-inner {
	max-width: 1400px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 16px;
}

.ph-logo {
	width: min(240px, 22vw);
	aspect-ratio: 5/2;
	border: 2px dashed #C8D4E6;
	border-radius: 14px;
	display: grid;
	place-items: center;
	color: #6B7A93;
	font-size: clamp(12px, 1.0vw, 14px);
	background: #FFFFFFAA;
	backdrop-filter: blur(2px);
}

.ph-header-title {
	color: var(--muted);
	justify-self: center;
	font-size: clamp(13px, 1vw, 16px);
}

.ph-header-actions {
	justify-self: end;
	display: flex;
	gap: 8px;
}

.ph-ghost-btn {
	height: 42px;
	padding: 0 14px;
	border-radius: 12px;
	border: 1px solid var(--line);
	background: #fff;
	color: #334155;
	font-weight: 700;
	cursor: pointer;
}

/* 메인 컨테이너 */
.ph-wrap {
	padding: clamp(16px, 3.2vh, 48px) clamp(16px, 3vw, 40px);
}

.ph-container {
	max-width: 1400px;
	margin: 0 auto;
	display: grid;
	gap: var(--gap-lg);
}

/* 요약 카드 */
.ph-cards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--gap-lg);
}

@media ( max-width :1200px) {
	.ph-cards {
		grid-template-columns: 1fr 1fr;
	}
}

@media ( max-width :700px) {
	.ph-cards {
		grid-template-columns: 1fr;
	}
}

.ph-card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow);
	padding: clamp(14px, 2.2vh, 24px);
	display: grid;
	gap: 6px;
}

.ph-k {
	color: #334155;
	font-weight: 800;
	font-size: var(--fs-label);
}

.ph-v {
	font-weight: 900;
	font-size: clamp(18px, 2.2vw, 24px);
}

/* 필터 바 */
.ph-filters {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow);
	padding: clamp(14px, 2.2vh, 20px);
	display: grid;
	gap: var(--gap-md);
}

.ph-filters-row {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 10px;
	align-items: end;
}

.ph-field {
	display: grid;
	gap: 6px;
}

.ph-label {
	color: #334155;
	font-weight: 800;
	font-size: var(--fs-label);
}

.ph-input, .ph-select {
	height: 48px;
	border-radius: 12px;
	border: 1px solid #D5DEEA;
	background: #FDFEFF;
	padding: 0 12px;
	font-size: var(--fs-body);
	color: var(--text);
	width: 100%;
}

.ph-actions {
	display: flex;
	gap: 15px;
	flex-wrap: wrap;
}

.ph-btn {
	height: 48px;
	padding: 0 25px;
	border-radius: 12px;
	font-weight: 900;
	cursor: pointer;
	border: 0;
}

.ph-btn--primary {
	background: linear-gradient(180deg, var(--accent), var(--accent-2));
	color: #fff;
}

.ph-btn--ghost {
	background: #fff;
	border: 1px solid var(--line);
	color: #334155;
}

.ph-btn--warn {
	background: #FFF5F5;
	border: 1px solid #FEE2E2;
	color: #DC2626;
}

/* 그리드 유틸 (필터 전용) */
.ph-col-3 {
	grid-column: span 3;
}

.ph-col-2 {
	grid-column: span 2;
}

.ph-col-4 {
	grid-column: span 4;
}

.ph-col-6 {
	grid-column: span 6;
}

.ph-col-12 {
	grid-column: 1/-1;
}

@media ( max-width :1100px) {
	.ph-col-3, .ph-col-2 {
		grid-column: span 6;
	}
	.ph-col-4 {
		grid-column: span 6;
	}
}

@media ( max-width :700px) {
	.ph-col-6, .ph-col-3, .ph-col-2, .ph-col-4 {
		grid-column: 1/-1;
	}
}

@media ( max-width :500px) {
	.logo-above img {
    max-height: 50px;
	}
}

/* 테이블 */
.ph-table-wrap {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow);
	overflow: hidden;
}

.ph-page table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fs-body);
}

.ph-page thead th {
	background: var(--surface-2);
	border-bottom: 1px solid var(--line);
	text-align: left;
	padding: 12px 14px;
	white-space: nowrap;
	position: sticky;
	top: 0;
	z-index: 1;
	cursor: pointer;
}

.ph-page tbody td {
	border-top: 1px solid var(--line);
	padding: 12px 14px;
}

.ph-page tbody tr:hover {
	background: #F8FAFF;
}

.ph-stat-badge {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 999px;
	font-weight: 800;
	font-size: 12px;
	border: 1px solid var(--line);
	background: #fff;
	color: #334155;
}

.ph-ok {
	color: var(--okay);
}

.ph-bad {
	color: var(--danger);
}

.ph-t-actions {
	display: flex;
	gap: 6px;
}

.ph-mini {
	height: 36px;
	padding: 0 12px;
	border-radius: 10px;
	border: 1px solid var(--line);
	background: #fff;
	font-weight: 700;
	color: #334155;
	cursor: pointer;
}

/* 페이지네이션 */
.ph-pager {
	display: flex;
	justify-content: center;
	gap: 6px;
	padding: 12px;
	background: #fff;
	border-top: 1px solid var(--line);
}

.ph-pagebtn {
	min-width: 36px;
	height: 36px;
	border-radius: 10px;
	border: 1px solid var(--line);
	background: #fff;
	cursor: pointer;
}

.ph-pagebtn[aria-current="page"] {
	background: #EEF2FF;
	border-color: #C7D2FE;
	font-weight: 900;
}

/* 모바일: 카드형 테이블 */
@media ( max-width :900px) {
	.ph-page table, .ph-page thead, .ph-page tbody, .ph-page th, .ph-page td,
		.ph-page tr {
		display: block;
	}
	.ph-page thead {
		display: none;
	}
	.ph-page tbody tr {
		border-top: 1px solid var(--line);
		background: #fff;
		margin: 8px 10px;
		border-radius: 12px;
		overflow: hidden;
	}
	.ph-page tbody td {
		border: 0;
		display: grid;
		grid-template-columns: 120px 1fr;
		gap: 8px;
		padding: 10px 12px;
		border-top: 1px solid #F0F3FA;
	}
	.ph-page tbody td::before {
		content: attr(data-label);
		color: #64748B;
		font-weight: 800;
	}
	.ph-t-actions {
		padding: 8px 10px;
	}
	.ph-pager {
		border: 0;
	}
}

/* 인쇄 */
@media print {
	.ph-header, .ph-filters, .ph-pager {
		display: none !important;
	}
	.ph-bg {
		background: #fff;
	}
	.ph-wrap {
		padding: 0;
	}
	.ph-container {
		max-width: 100%;
		padding: 0 8px;
	}
	.ph-table-wrap {
		box-shadow: none;
		border-color: #D1D5DB;
	}
	.ph-page thead th {
		position: static;
	}
}

/* 1) 페이지 최대폭을 변수로 제어 (기본: 1200px = 1280 화면용) */
:root { --page-max: 1200px; }

/* 기존 .page1 max-width(1400px) 덮어쓰기 */
.page1 { max-width: var(--page-max); }

/* 2) 1920×1080 이상에서는 여백 유지하며 살짝 넓게 (1440px) */
@media (min-width: 1700px) and (min-height: 980px) {
  :root { --page-max: 1440px; }
}

/* 3) 세로로 꽉 차지 않도록: wrap의 100vh 유사 강제 최소높이 해제 */

/* 4) 2열 유지 임계값 조정
   - 기존 코드에 @media (max-width:1100px){ .container{1열} }가 있음.
   - 그걸 무효화하고 900px 이하에서만 1열로 접도록 조정. */
@media (max-width: 1100px) {
  .container { grid-template-columns: 1.05fr 1fr; } /* ← 2열 유지로 덮어쓰기 */
}
@media (max-width: 900px) {
  .container { grid-template-columns: 1fr; }        /* ← 진짜 좁을 때만 1열 */
}

/* 5) 1280×800에서 높이 감축(군더더기 줄이기): 여백·컨트롤 살짝 컴팩트 */
@media (min-width: 1200px) and (max-width: 1366px) and (max-height: 850px) {
  :root {
    --gap-xl: 24px;
    --gap-lg: 16px;
    --gap-md: 10px;
    --ctl-h: 56px;
    --fs-body: 16px;
    --fs-label: 14px;
  }
  /* 리스트 영역 높이도 고정감 주기 (vh 대신 px 느낌으로) */
  .list { max-height: 300px; }
}

/* 6) 1920×1080에선 넉넉하지만 과도하게 늘지 않게 */
@media (min-width: 1800px) and (min-height: 1000px) {
  .list { max-height: 420px; }
}

/* 스테이지 폭 -20px */
:root { --page-max: 1180px; }                 /* 기존 1200px → 1180px */
@media (min-width: 1700px) and (min-height: 980px) {
  :root { --page-max: 1420px; }               /* 기존 1440px → 1420px */
}
.page1 { max-width: var(--page-max); }

/* 컨트롤 높이 토큰 -20px (입력창, 기본 버튼 등) */
:root {
  /* 기존 clamp(48px, 6.2vh, 72px) → 20px씩 감소 */
  --ctl-h: clamp(28px, 6.2vh, 52px);
}

/* 로고 -20px */
.logo-above img { max-height: 48px; }         /* 기존 68px → 48px */

/* 상단 고스트 버튼 -20px */
.page1 .ghost-btn { height: 30px; padding: 0 20px; } /* 50px → 30px */

/* 미니 버튼 -20px (주의: 작아짐) */
.mini { height: 20px; padding: 0 8px; }       /* 40px → 20px */

/* 숫자 키패드 키 -20px (min/max만 20px씩 감소) */
.key { height: clamp(36px, 9vh, 66px); }      /* 56–86px → 36–66px */

/* 하단 결제 버튼 -20px (min/max만 20px씩 감소) */
.paybtn { height: clamp(56px, 8vh, 108px); }  /* 76–128px → 56–108px */

/* 리스트 높이 여유 -20px */
.list { max-height: calc(38vh - 20px); }

/* 너가 1280×800용으로 고정했던 리스트도 -20px */
@media (min-width: 1200px) and (max-width: 1366px) and (max-height: 850px) {
  .list { max-height: 280px; }                /* 300px → 280px */
}
/* 1920×1080용 리스트도 -20px */
@media (min-width: 1800px) and (min-height: 1000px) {
  .list { max-height: 400px; }                /* 420px → 400px */
}

/* ===== 결제내역(ph-*) 스코프도 동일하게 -20px ===== */

/* 헤더 액션 고스트버튼 -20px */
.ph-ghost-btn { height: 22px; padding: 0 10px; }  /* 42px → 22px */

/* 인풋/셀렉트 -20px */
.ph-input, .ph-select { height: 28px; }           /* 48px → 28px */

/* 기본 버튼 -20px */
.ph-btn { height: 28px; padding: 0 20px; }        /* 48px → 28px */

/* 미니 버튼 -20px */
.ph-mini { height: 16px; padding: 0 8px; }        /* 36px → 16px */

/* 페이지네이션 버튼 -20px */
.ph-pagebtn { min-width: 16px; height: 16px; }    /* 36px → 16px */

/* 로고 박스 폭도 -20px (시각적 균형) */
.ph-logo { width: min(220px, 22vw); }             /* 240px → 220px */


.modal{
	position:fixed;inset:0;display:none;z-index:9999
}
.modal.show{
	display:block
}
.modal__backdrop{
	position:absolute;
	inset:0;
	background:rgba(0,0,0,.45);
	
}
.modal__dialog{
  position: fixed;   /* ← static 대신 fixed */
  left:50%;
  top:40%;
  transform:translate(-50%,-50%);
  width:min(92vw,420px);
  max-height:calc(100dvh - 32px);   /* 화면 기준 자동 확장 */
  display:flex;                      /* 세로 레이아웃 */
  flex-direction:column;
  background:#fff;
  border-radius:14px;
  padding:20px;
  box-shadow:0 10px 30px rgba(0,0,0,.2);
  
}
.modal__title{
	margin:6px 0 0px;
	font-size:25px;
	line-height:1.4;
	text-align:center;
}

.modal__body{
  overflow:auto;
  -webkit-overflow-scrolling:touch;  /* 모바일 부드러운 스크롤 */
  margin:8px 0 0px;
}

.modal__actions{
  display:flex;gap:10px;
  position:sticky; bottom:0;         /* 긴 내용에서도 항상 보이게 */
  background:#fff; padding-top:12px;
}

.btn{
	flex:1;padding:14px 12px;
	font-size:16px;
	border-radius:10px;
	border:0

}
.btn-no{
	background:#615e5e;
	color:#fff
}
.btn-yes{
	background:#3399ff;
	color:#fff
}