@charset "utf-8";
/* CSS 파일 최상단 */
/*
@font-face {
    font-family: 'MontserratCustom';
    src: url('Montserrat-Regular.woff2') format('woff2');
    font-weight: 400;
}
*/

@font-face {
  font-family: 'NotoSerifItalic'; /* 내가 사용할 이름 지정 */
  src: url('/common/fonts/NotoSerif-Italic.ttf') format('woff2'); /* 파일 경로 */
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'Montserrat-Variable';
  src: url('/common/fonts/Montserrat-VariableFont_wght.ttf') format('truetype-variations'); 
  font-weight: 100 900; 
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter-Variable';
  src: url('/common/fonts/Inter-VariableFont_opsz,wght.ttf') format('truetype-variations');  
  font-weight: 100 900;  
  font-variation-settings: 'opsz' 32;   
  font-style: normal;
  font-display: swap;
}


/* 100: Thin */
/* 200: ExtraLight */
/* 300: Light */
/* 400: Regular */
/* 500: Medium */
/* 600: SemiBold */
/* 700: Bold */
/* 800: ExtraBold */
/* 900: Black */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, form, label, input, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border:none;
	vertical-align:middle; /*middle baseline;*/
	/*text-align:left;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
	, fieldset, legend
	*/
}

.no-select {
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer */
    user-select: none; /* Non-prefixed version, currently supported by Chrome, Opera */
}

dt { font-weight:bold; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul {	list-style: none;}
blockquote, q {	quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {	content: ''; content: none; }
table {	border-collapse: collapse;	border-spacing: 0;}
a { text-decoration:none; }
caption { display:none; }
fieldset {	position: relative; border-radius:10px;	padding:8px 10px 10px 40px; margin:10px 4px 4px 4px; }
legend {
	position: relative;
	top: -2px;
	background-color:#004080; color:#ffffff;
	margin:0;
	padding:0 20px;
	height:30px; line-height:30px;
	font-size:18px;
	font-weight:bold;
	border-radius:8px;
}

	input[type='checkbox'] {
		padding:2px;
		border-radius:4px;
		height:20px;
		width:20px;
	}

	input[type='radio'] {
		height:20px;
		width:20px;
	}

	input[type='text'], input[type='password'], input[type='file'],  input[type='number'] {
		border:1px solid #aaa;
		padding:4px 6px;
		border-radius:4px;
		height:30px;
		width:calc(100% - 20px);
		min-width:50px;
		color:#004080;
		font-size:18px;
		background-color:#ffffff;
	}

	input {
		&:focus {
			outline: none;
			opacity: 0.8;
		}
		&::placeholder { 
			color:#b7b7ff;  
			font-style: italic; 
			font-size:16px; /*1rem*/
		}
	}

	select {
		border:1px solid #aaa;
		border-radius:4px;
		height:38px;
		width:auto;
		padding:4px 6px;
		color:#004080;
		font-size:1em;
		background-color:#ffffff;
	}

	textarea:focus, div:focus { outline: none; }
	html { 
		margin:0; padding:0; height:100%;
		font-size:clamp(12px, 3.28vw, 25px);
	}

    body {
		position:relative;
		width:100vw; min-width:360px; /* max-width:760px;*/
		height:100vh;
		margin:0; padding:0;height:auto;
		text-align:center;
		font-size:1em;
		font-family: 'Montserrat-Variable','Inter-Variable';
		/*,'MontserratCustom', 'Pretendard''Roboto', 'Noto Sans KR','NanumGothic', '나눔고딕';*/
		font-weight: 400; 
		cursor:default;
		color:#29292c;
		background-color:#ffffff;
		overflow:auto;

		.toast {
			display: fixed; /* 처음에 숨김 */
			position: absolute;
			left: 50%;
			height:auto; width:auto;
			white-space: nowrap;
			transform: translateX(-50%);
			background: rgba(0, 0, 0, 0.7);
			color: #fff;
			padding: 5px 10px;
			border-radius: 25px;
			z-index: 9999;
		}
	}

/*공통관리 */
	.page_box {
		display:block;
		position:relative;
		margin:0 auto;
		width:100%; /*max-width:760px;*/
		min-width:360px;
		/*border:1px solid red;*/
		height:calc(100vh - 2px);
		background-color:#ffffff;
		&.off { display:none; }
		.page_top {
			position:fixed;
			display: flex;
			justify-content: space-between;
			/*border:1px solid red;*/
			top:0; left:0; right:0;
			border-bottom:1px solid #efefef;
			padding:0 min(30px, 3vw) 0 min(30px, 3vw);
			height:47.37px; /*52.63/min(100px, 13vw);*/
			line-height:47.37px; /*52.63min(100px, 13vw);*/
			box-sizing: border-box;
			text-align:left;
			img { 
				width:auto; height:32px; /*min(60px, 8vw); */
			}
			.bi_box { 
				display: inline-block;
				font-size:16px; /*1.28rem; 확대 방지*/
				font-weight:600;
				.top_bi { 

					/*border:1px solid red;*/
				}
				a { color:#000000; }
				.move {
					height:23px;
					margin-right:min(50px, 6.57vw);
				}
			}
			.alarm_box {
				display: inline-block;
					/*border:1px solid green;*/
				.bell_box, .bookmark_box {
					position:relative;
					display: inline-block;
					text-align:right;
					width:50px; /*min(100px, 13vw); */
					/*border:1px solid red;*/
					img { 
						width:auto; height:26px; /*min(50px, 6.5vw); */
					}
				}
				.alarm_cnt {
					position:absolute;
					display:inline-block;
					width:auto; height:20px; /*min(30px, 4vw);line-height:min(25px, 3.2vw);*/					line-height:20px;
					border-radius:20px; /*min(30px, 3.9vw);*/
					border:2px solid #ffffff;
					top:2px; /*min(12px, 1.5vw);*/
					left:50%;
					padding:0 4px; /*min(10px, 1vw);*/
					background-color:#e32626;
					color:#ffffff;
					font-size:12px; /*0.88rem;*/
					font-weight:400;
					-webkit-font-smoothing: antialiased; /* 맥 환경에서 더 선명하게 */
					text-shadow: 0 0 0.1px black; /* 아주 미세한 그림자로 선명도 보정 */
				}
			}
			.like_box {
				img {
					width:20px; height:auto 
				}
				img + img { margin-left:min(50px, 6.57vw); }
			}
		}

		.page_center {
			position: fixed;
			/*border:1px solid blue;*/
			top:47.37px; /*52.63 min(100px, 13vw); */			
			bottom:95.74px; /*105.26min(200px, 26vw);*/
			left:0; right:0;
			overflow:auto;
			overflow-x:hidden;
			transition: all 0.5s ease-in-out;
			 -ms-overflow-style: none;	/* 인터넷 익스플로러, 엣지 */				
			scrollbar-width: none;/* 3. Firefox용 */
			/* iOS에서 부드러운 관성 스크롤 적용 */
			-webkit-overflow-scrolling: touch;
			scroll-snap-type: x mandatory;

			&::-webkit-scrollbar {
				display: none; /* 크롬, 사파리, 오페라, 엣지(신버전) */
			}
		}

		.page_bottom {
			position:fixed;
			/*border:1px solid green;*/
			border-top:1px solid #efefef;/**/
			bottom:-1px; left:0; right:0;
			height:94.74px; /*105.26min(200px, 26vw);*/
			display: flex;
			justify-content: space-between;
			background-color:#ffffff;
			font-size:13px;
			font-weight:600;

			li {
				position:relative;
				/* border:1px solid blue;*/
				background-repeat: no-repeat;
				background-position:center 30%;
				background-size:40px auto; /*cover contain; clamp(30px, 50%, 80px)*/
				flex-basis:25%; /* 기본 너비 설정 */
				height:100%;      /* 높이 설정 */
				text-align:center;
				line-height:min(5px,1vw);
				&:nth-child(1) {
					&.on { background-image: url('/common/images/main/mn01_on.png'); }
					&.off { background-image: url('/common/images/main/mn01_off.png'); }
				}
				&:nth-child(2) {
					&.on { background-image: url('/common/images/main/mn02_on.png'); }
					&.off { background-image: url('/common/images/main/mn02_off.png'); }					
				}
				&:nth-child(3) {
					&.on { background-image: url('/common/images/main/mn03_on.png'); }
					&.off { background-image: url('/common/images/main/mn03_off.png'); }					
				}
				&:nth-child(4) {
					&.on { background-image: url('/common/images/main/mn04_on.png'); }
					&.off { background-image: url('/common/images/main/mn04_off.png'); }					
				}
				&:nth-child(5) {
					&.on { background-image: url('/common/images/main/mn05_on.png'); }
					&.off { background-image: url('/common/images/main/mn05_off.png'); }					
				}
				&.on {
					.text {
						color:#2794bb; 
						font-weight:600;
					}
				}
				.text {
					position:absolute;
					left:50%;
					bottom:20%;
					transform:translateX(-50%);
					font-weight:400;
					color:#b9b9b9;					
				}

			}
		}
	}