@charset "utf-8";

body {background: #F8F9FB; }



/** 버튼 */
.btn {
	display: flex; justify-content: center; align-items: center; 
	height: 40px; 
	padding: 0 20px; 
	line-height: 1.5;
	border: 1px solid transparent;
	border-radius: 10px; 
	font-weight: 600;
	font-family: inherit;
}

.btn-guest-signup {background: rgb(var(--color-white), 0.15); color: rgb(var(--color-white)); }
.btn-guest-login {background: rgb(var(--color-white)); color: rgb(var(--color-primary)); }
.btn-logout {gap: 4px; padding: 0 10px; color: #95969A; font-weight: 500; }
.btn-logout:before {display: block; clear: both; content: ''; flex-shrink: 0; width: 14px; height: 14px; background: url(/img/icon-gnb-logout.svg) no-repeat center/ contain;}
.btn-charge-coin {gap: 6px; background: rgb(var(--color-primary)); color: rgb(var(--color-white)); }

.btn-outline {border-color: #E1E1E8; }
.btn-primary {background: rgb(var(--color-primary)); color: rgb(var(--color-white)); }
.btn:disabled {opacity: 0.5; }


/** form */
.form-group {display: flex; flex-direction: column; }
.form-label {display: flex; margin-bottom: 10px; font-weight: 500; -webkit-user-select: none; user-select: none; }
.form-select {
	position: relative;
	height: 46px; padding: 0 40px 0 16px; 
	border: 1px solid #E1E1E8; border-radius: 8px; 
	background: url(/img/icon-select-arrow.svg) no-repeat right 14px center/ 10px auto;
	background-color: #F9FAFB; 
	-webkit-appearance: none; 
	appearance: none; 
}
.form-input {
	display: block;
	min-width: 200px; width: 100%; height: 46px;
	padding: 0 16px;
	border: 1px solid #E1E1E8; border-radius: 8px;
	background: #F9FAFB;
}
.form-textarea {
	display: block;
	width: 100%;
	padding: 12px 16px;
	border: 1px solid #E1E1E8;
	border-radius: 8px;
	background: #F9FAFB;
	resize: vertical;
	min-height: 100px;
	font-size: inherit;
	line-height: 1.6;
}
.form-textarea:focus {
	outline: none;
	border-color: rgb(var(--color-primary));
	background: #fff;
}
.form-divider {margin-top: 10px; margin-bottom: 10px; }
.form-actions {display: flex; justify-content: center; }



/** 체크박스, 라디오 */
input[type="radio"], input[type="checkbox"] {
	position: absolute; 
	width: 1px; height: 1px; margin: -1px; overflow: hidden; visibility: hidden; 
	-webkit-appearance: none; 
	appearance: none; 
}
.check-wrap {display: flex; }
.check-item {display: flex; align-items: center; position: relative; }
.check-item .check-elem {cursor: pointer; }
.check-item .elem--outline {
	display: flex; align-items: center; 
	width: 100%; min-height: 46px; padding: 10px 20px; 
	border: 1px solid #EFEFF4; border-radius: 6px; 
	font-weight: 500; 
}
.check-item .chk-box-group {flex: 1; display: flex; align-items: center; gap: 10px; }
.check-item .chk {
	display: flex; justify-content: center; align-items: center; 
	width: 16px; height: 16px; 
	border: 1px solid #95969A;
	background-color: rgb(var(--color-white));
}
.check-item .chk-label {-webkit-user-select: none; user-select: none; }
.check-item input:checked ~ .elem--outline {border-color: rgb(var(--color-primary)); background: rgb(var(--color-primary), 0.05); }

.check-item .chk-box {border-radius: 4px; }
.check-item input:checked ~ .check-elem .chk-box {border: none; background: url(/img/icon-chk-box-on.svg) no-repeat center/ contain, rgb(var(--color-primary)); }

.check-item .chk-radio {border-radius: 16px; }
.check-item .chk-radio:before {display: block; content: ''; width: 8px; height: 8px; border-radius: 8px; background-color: rgb(var(--color-white));}
.check-item input:checked ~ .check-elem .chk-radio {border-color: rgb(var(--color-primary)); }
.check-item input:checked ~ .check-elem .chk-radio:before {border-color: transparent; background: rgb(var(--color-primary)); }




/* ── 공통 유틸리티 (추가) ───────────────────────────────── */
.is-hidden     { display: none !important; }
.text-left     { text-align: left; }
.text-right    { text-align: right; }
.text-primary  { color: var(--color-primary); }
.text-xs       { font-size: .7rem; }
.text-sm       { font-size: .82rem; }
.text-md       { font-size: .85rem; }
.ml-auto       { margin-left: auto; }
.mb-6          { margin-bottom: 6px; }
.mb-8          { margin-bottom: 8px; }
.mb-10         { margin-bottom: 10px; }
.mb-14         { margin-bottom: 14px; }
.mt-6          { margin-top: 6px; }
.w-full        { width: 100%; }
.opacity-40    { opacity: .4; }
.blur-mask     { filter: blur(5px); user-select: none; }



/** gnb */
header {
	position: fixed; top: 0; left: 0; right: 0; z-index: 100; 
	display: flex; align-items: center; 
	height: var(--gnb-height);
	border-bottom: 1px solid #EEEFF2; 
	background: rgb(var(--color-white)); 
}
.gnb-inner {
	display: flex; justify-content: space-between; align-items: center; gap: 12px;
	width: 100%; padding: 0 40px; 
}
.gnb-logo {font-size: 24px; font-weight: 700; }
.gnb-left {display: flex; align-items: center; }
.gnb-nav {display: flex; align-items: center; gap: 12px; }



/** layout */
#content {flex: 1; display: flex; flex-direction: column; min-width: 0; }



/** 약관·개인정보처리방침 페이지 */
.terms-page {
	display: flex; flex-direction: column;
	max-width: 860px; width: 100%;
}
body[data-role="guest"] .terms-page {
	margin: 0 auto;
	padding: 40px 40px 80px;
}
body[data-role="user"] .terms-page,
body[data-role="admin"] .terms-page {
	padding: 0;
}
.terms-header {
	display: flex; align-items: center; gap: 12px;
	margin-bottom: 24px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--color-border, #E1E1E8);
}
.terms-back-btn {
	flex-shrink: 0;
	display: flex; justify-content: center; align-items: center;
	width: 36px; height: 36px;
	border-radius: 8px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2395969A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E") no-repeat center / 18px;
}
.terms-back-btn:hover { background-color: #F3F4F6; }
.terms-title {
	font-size: 24px; font-weight: 700; color: #242424;
}
.terms-body {
	font-size: 14px; line-height: 1.8; color: #444;
	word-break: keep-all; overflow-wrap: break-word;
}



@media (max-width: 1024px) {
	body {font-size: 15px; }



	/** 약관 */
	body[data-role="guest"] .terms-page { padding: 24px 20px 60px; }
	.terms-title { font-size: 20px; }
	
	
	
	/** 버튼 */
	.btn {height: 36px; }
	
	
	
	/** form */
	.form-input {height: 42px; }
	
	
	
	/** gnb */
	.gnb-inner {padding: 0 20px; }
	
}

@media (max-width: 640px) {
	/** 버튼*/
	.btn {}
	
	
	
	/** form */
	.form-input {min-width: 0; }
}