/* base.css */
@layer reset, tokens, base, pages;

@layer base {
	:root {
		/* 안전 영역을 위한 변수 */
		--safe-top: env(safe-area-inset-top);
		--safe-bottom: env(safe-area-inset-bottom);
		--safe-left: env(safe-area-inset-left);
		--safe-right: env(safe-area-inset-right);
	}

	/*
	body {
		padding-top: env(safe-area-inset-top, 0);
		padding-bottom: env(safe-area-inset-bottom, 0);
		padding-left: env(safe-area-inset-left, 0);
		padding-right: env(safe-area-inset-right, 0);
	}
	*/

	html, body{height:100%;}
    body{
		margin:0;
		min-height:100dvh;
		font-family: var(--font-sans);
		font-size: var(--fs-md);
		font-weight:var(--font-weight);
		line-height: var(--lh-normal);
		color: var(--text);
		background:var(--bg);
		--left-pad: var(--nav-w); /* 레이아웃 패딩(사이드 내비/헤더 쓰는 프로젝트용) */
		/*padding-left: var(--left-pad);
		padding-top: var(--header-h);*/
		transition: padding-left .25s ease;
		overflow-x: hidden;
		word-break: keep-all;
		text-rendering: optimizeLegibility;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
    }
    body.is-collapsed { --left-pad: var(--nav-w-collapsed); }

    a { color: inherit; text-decoration: none; }
    a:focus-visible { outline-offset: 3px; }

    /* 헤딩 스케일 */
    h1 { font-size: var(--fs-3xl); line-height: var(--lh-tight); }
    h2 { font-size: var(--fs-2xl); line-height: var(--lh-tight); }
    h3 { font-size: var(--fs-xl);  line-height: var(--lh-tight); }
    h4 { font-size: var(--fs-lg);  line-height: var(--lh-tight); }
    h5 { font-size: var(--fs-md);  line-height: var(--lh-tight); }
    h6 { font-size: var(--fs-sm);  line-height: var(--lh-tight); }

    /* 본문 간격 유틸리티 느낌의 기본 간격 */
    p + p{ margin-top: var(--space-3); }
    * + h2, * + h3, * + h4 { margin-top: var(--space-6); }

	/* 간격 템플릿 */
	.mt-0 { margin-top: 0 !important; }
	.mb-0 { margin-bottom: 0 !important; }
	.ml-0 { margin-left: 0 !important; }
	.mr-0 { margin-right: 0 !important; }
	.mt-1 { margin-top: var(--space-1) !important; }
	.mb-1 { margin-bottom: var(--space-1) !important; }
	.ml-1 { margin-left: var(--space-1) !important; }
	.mr-1 { margin-right: var(--space-1) !important; }
	.mt-2 { margin-top: var(--space-2) !important; }
	.mb-2 { margin-bottom: var(--space-2) !important; }
	.ml-2 { margin-left: var(--space-2) !important; }
	.mr-2 { margin-right: var(--space-2) !important; }
	.mt-3 { margin-top: var(--space-3) !important; }
	.mb-3 { margin-bottom: var(--space-3) !important; }
	.ml-3 { margin-left: var(--space-3) !important; }
	.mr-3 { margin-right: var(--space-3) !important; }
	.mt-4 { margin-top: var(--space-4) !important; }
	.mb-4 { margin-bottom: var(--space-4) !important; }
	.ml-4 { margin-left: var(--space-4) !important; }
	.mr-4 { margin-right: var(--space-4) !important; }
	.mt-5 { margin-top: var(--space-5) !important; }
	.mb-5 { margin-bottom: var(--space-5) !important; }
	.ml-5 { margin-left: var(--space-5) !important; }
	.mr-5 { margin-right: var(--space-5) !important; }
	.mt-6 { margin-top: var(--space-6) !important; }
	.mb-6 { margin-bottom: var(--space-6) !important; }
	.ml-6 { margin-left: var(--space-6) !important; }
	.mr-6 { margin-right: var(--space-6) !important; }
	.mt-8 { margin-top: var(--space-8) !important; }
	.mb-8 { margin-bottom: var(--space-8) !important; }
	.ml-8 { margin-left: var(--space-8) !important; }
	.mr-8 { margin-right: var(--space-8) !important; }
	.mt-10 { margin-top: var(--space-10) !important; }
	.mb-10 { margin-bottom: var(--space-10) !important; }
	.ml-10 { margin-left: var(--space-10) !important; }
	.mr-10 { margin-right: var(--space-10) !important; }
	.mt-12 { margin-top: var(--space-12) !important; }
	.mb-12 { margin-bottom: var(--space-12) !important; }
	.ml-12 { margin-left: var(--space-12) !important; }
	.mr-12 { margin-right: var(--space-12) !important; }
	.mt-16 { margin-top: var(--space-16) !important; }
	.mb-16 { margin-bottom: var(--space-16) !important; }
	.ml-16 { margin-left: var(--space-16) !important; }
	.mr-16 { margin-right: var(--space-16) !important; }
	.mb-100 { margin-bottom: 100px !important; }

	.pt-0 { padding-top: 0 !important; }
	.pb-0 { padding-bottom: 0 !important; }
	.pl-0 { padding-left: 0 !important; }
	.pr-0 { padding-right: 0 !important; }
	.pt-1 { padding-top: var(--space-1) !important; }
	.pb-1 { padding-bottom: var(--space-1) !important; }
	.pl-1 { padding-left: var(--space-1) !important; }
	.pr-1 { padding-right: var(--space-1) !important; }
	.pt-2 { padding-top: var(--space-2) !important; }
	.pb-2 { padding-bottom: var(--space-2) !important; }
	.pl-2 { padding-left: var(--space-2) !important; }
	.pr-2 { padding-right: var(--space-2) !important; }
	.pt-3 { padding-top: var(--space-3) !important; }
	.pb-3 { padding-bottom: var(--space-3) !important; }
	.pl-3 { padding-left: var(--space-3) !important; }
	.pr-3 { padding-right: var(--space-3) !important; }
	.pt-4 { padding-top: var(--space-4) !important; }
	.pb-4 { padding-bottom: var(--space-4) !important; }
	.pl-4 { padding-left: var(--space-4) !important; }
	.pr-4 { padding-right: var(--space-4) !important; }
	.pt-5 { padding-top: var(--space-5) !important; }
	.pb-5 { padding-bottom: var(--space-5) !important; }
	.pl-5 { padding-left: var(--space-5) !important; }
	.pr-5 { padding-right: var(--space-5) !important; }
	.pt-6 { padding-top: var(--space-6) !important; }
	.pb-6 { padding-bottom: var(--space-6) !important; }
	.pl-6 { padding-left: var(--space-6) !important; }
	.pr-6 { padding-right: var(--space-6) !important; }
	.pt-8 { padding-top: var(--space-8) !important; }
	.pb-8 { padding-bottom: var(--space-8) !important; }
	.pl-8 { padding-left: var(--space-8) !important; }
	.pr-8 { padding-right: var(--space-8) !important; }
	.pt-10 { padding-top: var(--space-10) !important; }
	.pb-10 { padding-bottom: var(--space-10) !important; }
	.pl-10 { padding-left: var(--space-10) !important; }
	.pr-10 { padding-right: var(--space-10) !important; }
	.pt-12 { padding-top: var(--space-12) !important; }
	.pb-12 { padding-bottom: var(--space-12) !important; }
	.pl-12 { padding-left: var(--space-12) !important; }
	.pr-12 { padding-right: var(--space-12) !important; }
	.pt-16 { padding-top: var(--space-16) !important; }
	.pb-16 { padding-bottom: var(--space-16) !important; }
	.pl-16 { padding-left: var(--space-16) !important; }
	.pr-16 { padding-right: var(--space-16) !important; }

    /* 컨테이너 */
    .container{
        width: min(100% - calc(var(--gutter-zero) * 2), var(--container-w));
        margin-inline: auto;
    }
    
	.inner-container{
        width: min(100% - calc(var(--gutter) * 2));
        margin-inline: auto;
    }

	/* 카드/서피스 기본 */
	.surface{
		background: linear-gradient(180deg, var(--surface), var(--surface-2));
		border-radius: var(--radius);
		box-shadow: var(--shadow-1);
	}

	/* 고정 배경 이미지(옵션) */
	.page-bg-img{
		position: fixed; 
		inset: 0; 
		width: 100vw; 
		height: 100vh;
		object-fit: cover; 
		z-index: -1; 
		pointer-events: none;
	}

	/* 반응형 가시성 */
    .only-desktop { display: initial; }
    .only-mobile  { display: none; }
    @media (max-width: 768px){
        .only-desktop { display: none !important; }
        .only-mobile  { display: initial !important; }
    }

    /* 길이 제한 */
	.max-w-sm { max-width: 520px; }
	.max-w-md { max-width: 720px; }
	.max-w-lg { max-width: 960px; }

    /* 아이콘 관리 */
	.icon{
		width: var(--icon-size);
		height: var(--icon-size);
		color: var(--icon-color);
		display:inline-grid; 
		place-items:center;
		line-height:0;
		transition: color .15s ease;
	}
	.icon svg{ width:100%; height:100%; display:block; }
    .icon :is(path,circle,rect,polygon){ fill: currentColor; }

	.icon--stroke {
		stroke: currentColor;
		stroke-width: var(--icon-stroke);
		fill: none;
		vector-effect: non-scaling-stroke;
		transition: stroke-width 0.2s ease-in-out;
    }

	.tabBar i { color:#C698FF; }
    
	.icon--xs { --icon-size: 14px; }
	.icon--sm { --icon-size: 16px; }
	.icon--ssm{ --icon-size: 18px; }
	.icon--md { --icon-size: 20px}
	.icon--lg { --icon-size: 24px; }
	.icon--lg1 { --icon-size: 28px; }
	.icon--xl { --icon-size: 30px; }
	.icon--xxl { --icon-size: 35px; }

	.icon-stroke1{--icon-stroke: 2px;}
    .icon-stroke1{--icon-stroke-hover: 2px;}
    
	.icon-color-w{--icon-color:#ffffff}
	.icon-color-w:hover{--icon-hover:#F2FA18}

	.icon-color-gr{--icon-color:#C698FF}
	.icon-color-gr:hover{--icon-hover:#fff}

	.icon-color-v{--icon-color:rgba(255,255,255,0.5)}
	.icon-color-v:hover{--icon-hover:rgba(255,255,255,0.5)}

	.icon-color-gold{--icon-color:#FFF81F}
	.icon-color-gold:hover{--icon-hover:#FFF81F}

	.item-btn:hover .icon,
    button:hover .icon{ color: var(--icon-hover);}

	.item-btn:hover .icon.icon--stroke,
    button:hover .icon.icon--stroke{stroke-width: var(--icon-stroke-hover);}

    /* ==========================================================================
	modal-open
	========================================================================== */
	.modal_layer{position:relative;  border:1px solid #ddd;
		box-shadow:1px 3px 5px rgba(49, 62, 132, 0.3);
		-webkit-box-shadow:1px 3px 5px rgba(49, 62, 132, 0.3);
		-moz-box-shadow:1px 3px 5px rgba(49, 62, 132, 0.3);
		-o-box-shadow:1px 3px 5px rgba(49, 62, 132, 0.3);
	}
	.modal_layer .closeBtn{position:absolute; bottom:-5px; left:49.5%; transform:translateX(-50%)}
	.modal_layer .closeBtn a{display:flex; color:#fff; width:35px; background:#4063D7; text-align:center; border-radius:50px; height:35px; align-items:center; justify-content:center;}
	.modal_layer .closeBtn a span{display:block; line-height:35px; font-size:16px;}

	.modal_wrap{position:relative; text-align:center; padding:15px 0}
	.modal_wrap h2{font-size:19px; color:#000; font-weight:500; border-bottom:1px solid #ddd; padding-bottom:20px; margin-bottom:20px;}
	.modal_wrap textarea{font-size:14px;}

	.modal_wrap .input-group{margin-bottom:var(--space-8);}
	.modal_wrap .input-group input[type="password"]{padding: 0 16px !important}

    .agree,
    .agree > *{font-size:14px; text-align:left;}
	.agree { height:100%; max-height:500px; overflow-y:scroll; }

	/* ==========================================================================
    checkbox
	=========================================================================== */
	.check_sm{ position: relative;}
	.check_sm input[type="checkbox"]{
	    position: absolute;
	    width:1px;
	    height:1px;
	    padding: 0;
	    margin: -1px;
	    overflow: hidden;
	    clip: rect(0, 0, 0, 0);
	}
	.check_sm input[type="checkbox"] + label {
	    display: inline-block;
	    position: relative;
	    cursor: pointer;
	    top:10px;
	    left:0px;
	    width:25px;
	    height:25px;
	}
	.check_sm input[type="checkbox"] + label:before {
	    content: "";
	    position: absolute;
	    left: 0;
	    top:0px;
	    width:25px;
	    height:25px;
	    text-align: center;
	    background:url(../image/check_off.png) no-repeat center center;  
	    background-size:25px auto;
	    box-sizing: border-box;
	}
	.check_sm input[type="checkbox"]:checked + label:after {
	    content: "";
	    position: absolute;
	    top: 0px;
	    left: 0;
	    width: 25px;
	    height: 25px;  
	    background: url(../image/check_on.png) no-repeat center center;  
	    background-size:25px auto;
	}
	.check_sm input[type="checkbox"] + label span{display:inline-block; padding-left:25px;}
	.check_sm input[type="checkbox"]:checked + label span{color:#6551a9;}

	/* ==========================================================================
    etc
	=========================================================================== */
	.hide { display:none !important; }
}