* { box-sizing:border-box; margin:0; padding:0; }
body {
	font-family: Arial, "맑은 고딕", sans-serif;
	background:#f5f7fa;
	color:#333;
}

/* 공통 레이아웃 */
.wrap {
	min-height:100vh;
	display:flex;
	flex-direction:column;
}

/* 상단 헤더 */
header {
	background:#1f2937;
	color:#ffffff;
	padding:12px 20px;
	box-shadow:0 2px 4px rgba(0,0,0,0.12);
}
.header-inner {
	max-width:1200px;
	margin:0 auto;
	display:flex;
	align-items:center;
	justify-content:space-between;
}
.logo {
	font-size:18px;
	font-weight:bold;
}
.logo span {
	color:#3b82f6;
}
.header-right {
	font-size:12px;
	opacity:0.8;
}

/* 메인 컨텐츠 */
main {
	flex:1;
}
.page-wrap {
	max-width:1400px;
	margin:0 auto;
	display:flex;
	gap:15px;
}

/* 광고 박스를 꽉 차게 */
.ad-box {
width:240px;
height:420px; /* 고정 높이 지정 */
background:#ffffff;
border-radius:12px;
position:relative;
overflow:hidden;
padding:0;
box-shadow:0 4px 12px rgba(0,0,0,0.12);
display:flex;
flex-direction:column;
}

/* 호버 효과 */
.ad-box:hover {
transform: translateY(-3px);
box-shadow:0 6px 16px rgba(0,0,0,0.18);
}

/* 광고 라벨 */
.ad-badge {
position:absolute;
top:10px;
left:10px;
background:#ef4444;
color:#fff;
font-size:10px;
padding:2px 6px;
border-radius:4px;
font-weight:bold;
letter-spacing:0.5px;
}

.ad-img {
width:100%;
height:100%;
object-fit:contain;
background:#fff; /* 빈 공간이 보이지 않도록 흰 배경 */
}



/* 중앙 메인 박스 */
.main-box {
	flex:1;
	background:#ffffff;
	border-radius:10px;
	padding:20px;
	box-shadow:0 3px 10px rgba(0,0,0,0.06);
	display:flex;
	gap:20px;
}
.left-input, .right-preview {
	flex:1;
}

.section-title {
	font-size:18px;
	font-weight:bold;
	margin-bottom:8px;
}
.sub-text {
	font-size:12px;
	color:#777;
	margin-bottom:15px;
}

textarea {
	width:100%;
	padding:10px;
	border:1px solid #d1d5db;
	border-radius:6px;
	font-size:14px;
	resize:vertical;
	min-height:140px;
}
textarea:focus {
	outline:none;
	border-color:#2563eb;
	box-shadow:0 0 0 1px rgba(37,99,235,0.3);
}

.btn-generate {
	margin-top:10px;
	padding:10px 22px;
	border:none;
	background:#2563eb;
	color:#fff;
	border-radius:6px;
	cursor:pointer;
	font-size:14px;
}
.btn-generate:hover {
	background:#1d4ed8;
}

.qr-box {
	border:1px dashed #d1d5db;
	border-radius:8px;
	min-height:260px;
	display:flex;
	align-items:center;
	justify-content:center;
	background:#f9fafb;
	margin-bottom:15px;
}
.qr-placeholder {
	color:#9ca3af;
	font-size:13px;
	text-align:center;
	line-height:1.5;
}

.btn-area {
display: flex;
gap: 10px;
}

.btn-area a {
flex: 1;                /* 양쪽 버튼 동일 너비로 */
text-align: center;     /* 글씨 가운데 정렬 */
padding: 12px 0;        /* 세로 여백 */
box-sizing: border-box; /* padding 포함 계산 */
}

.btn-download {
	flex:0 0 auto;
	padding:8px 16px;
	border-radius:6px;
	text-decoration:none;
	font-size:13px;
	border:1px solid #2563eb;
	color:#2563eb;
	text-align:center;
	background:#eff6ff;
}
.btn-download:hover {
	background:#dbeafe;
}
.btn-download.vector {
	border-color:#047857;
	color:#047857;
	background:#ecfdf3;
}
.btn-download.vector:hover {
	background:#d1fae5;
}

/* 하단 푸터 */
footer {
	background:#111827;
	color:#9ca3af;
	font-size:12px;
	padding:12px 20px;
	margin-top:20px;
}
.footer-inner {
	max-width:1200px;
	margin:0 auto;
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
	gap:8px;
}

/* 반응형 (모바일) */
@media (max-width: 960px) {
	.page-wrap {
		flex-direction:column;
	}
	.ad-box {
		width:100%;
		height:200px;
	}
	.ad-img {            
		height: 200px;
	}
	.ad-placeholder {
		position:static;
		transform:none;
	}
	.main-box {
		flex-direction:column;
	}
}

@media (max-width: 480px) {
	header { padding:10px 14px; }
	main { padding:12px; }
	.main-box { padding:15px; }
	.section-title { font-size:16px; }
	.logo { font-size:16px; }
	.header-right{
		display:none;
	}
	.ad-box {
		height:100px;
	}
	.ad-img {            
		height: 100px;
	}
}
.qr-counter-box {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin: 20px 0;
}
.qr-counter-item {
    text-align: center;
    min-width: 120px;
}

.qr-counter-item .value {
    position: relative;
    display: inline-block;
    overflow: hidden;
    line-height: 1.2;
    font-size: 24px;
    font-weight: bold;
}

.qr-counter-box .value {
    position: relative;
    display: inline-block;
    overflow: hidden;
    line-height: 1.2;
    font-size: 24px;
    font-weight: bold;
}

.value-inner {
    display: block;
    transition: transform 0.5s ease-out;
}

.value-old,
.value-new {
    display: block;
}

/* 숫자(odometer) 스타일 강화 */
.gem-counter-odometer.odometer {
    font-size: 40px;      /* 숫자 크기 키우기 */
    font-weight: 800;     /* 더 두껍게 */
    color: #3b82f6;       /* 살짝 보라색 계열 (원하는 색으로 바꿔도 됨) */
}

/* 위 라벨(TOTAL / TODAY)도 살짝 정리 */
.qr-counter-item .label {
    display: block;
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #777777;       /* 연한 회색 */
    margin-bottom: 6px;
	font-weight: 900;
}
.custom-alert-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.custom-alert-box {
    background: #ffffff;
    padding: 22px 26px;
    border-radius: 10px;
    width: 280px;
    text-align: center;
    box-shadow: 0 8px 26px rgba(0,0,0,0.15);
    transform: translateY(20px);
    transition: transform 0.25s ease;
}

.custom-alert-title {
    font-size: 16px;
    font-weight: bold;
    color: #2563eb;
    margin-bottom: 10px;
}

.custom-alert-message {
    font-size: 14px;
    color: #444;
    line-height: 1.5;
    margin-bottom: 16px;
}

.custom-alert-btn {
    background: #2563eb;
    color: #fff;
    border: none;
    padding: 8px 18px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
}
.custom-alert-btn:hover {
    background: #1e4ec9;
}
.custom-alert-overlay.show {
    opacity: 1;
    pointer-events: auto;
}
.custom-alert-overlay.show .custom-alert-box {
    transform: translateY(0);
}