/**
 * Base styles
 */

:root {
	--classic-blue: #0f4c81;
	--light-blue-gray: #e8eef3;
	--blue-gray: #d1d9df;
	--white: #fff;

	--primary-color: var(--classic-blue);
	--secondary-color: #7eaad2;
	--tertiary-color: #0086B3;

	--primary-light: #efefef;
	--secondary-light: #fdfdfd;

	--primary-bg: #fdfdfd;
	--secondary-bg: #f2f2f2;
	--tertiary-bg: #e4e4e4;

	--primary-border: #d6d6d6;
	--secondary-border: #dfdfdf;
	--tertiary-border: #8e8e8e;
	
	--primary-text: #333333;
	--secondary-text: #666666;
	--tertiary-text: #999999;

	--primary-btn-active: var(--primary-color);
	--primary-btn-active-text: var(--primary-light);
	--primary-btn-hover: var(--secondary-color);
	--primary-btn-hover-text: var(--secondary-light);
	
	--primary-text-hover: #066cc5;
	
	--text-hover-blue: #047499;
	--text-hover-green: #73941a;

	--marker-orange: #ffdc8c;
	--marker-blue: #2c6691;
	--marker-green: #74965f;
}

html {
	font-size: 16px;
	font-weight: 400;
}

* {
	margin: 0;
	padding: 0;
}

body {
	display: flex;
	min-height: 100vh;
	font-family: "Pretendard Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	line-height: 1.5;
	color: var(--primary-text);
	background-color: var(--primary-bg);
	-webkit-text-size-adjust: 100%;
	-webkit-font-feature-settings: "kern" 1;
	-moz-font-feature-settings: "kern" 1;
	-o-font-feature-settings: "kern" 1;
	font-feature-settings: "kern" 1;
	font-kerning: normal;
}

.container {
	width: 100%;
	display: flex;
	justify-content: space-between;
}

.container .menu-bar {
	display: flex;
	flex-direction: column;
	width: 300px;
	min-width: 300px;
	background-color: var(--primary-bg);
	border-right: 1px solid var(--primary-border);
	user-select: none;
}

.container .page {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 100%;
	height: 100%;
	background-color: var(--primary-bg);
	animation: fade-in 0.4s ease-out;
}

.container .dim {
	display: none;
	position: fixed;
	justify-items: center;
	align-content: center;
	width: 100%;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.7);
}

.container .dim .dim-img {
	display: flex;
	justify-content: center;
	align-items: center;
}

.container .dim .dim-img img {
	width: 100%;
}

.error-page {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
}

.error-page .error-content {
	text-align: center;
}

.error-page .error-content .error-code {
	margin-bottom: 30px;
	font-size: 4em;
	line-height: 1;
	letter-spacing: -1px;
}

.home,
.link,
.blank {
	cursor: pointer;
}

/* Mobile, Tablet Screen */
@media screen and (max-width: 1023px) {
	html {
		font-size: 15px;
	}

	.container {
		flex-direction: column;
		min-width: 100%;
	}

	.container .menu-bar {
		position: fixed;
		z-index: 999;
		width: 100%;
		min-width: 0;
		background-color: var(--secondary-bg);
		border-bottom: 1px solid var(--primary-border);
	}

	.container div.hits,
	.container div.profile {
		display: none;
	}

	.container .menu-bar .nav {
		display: flex !important;
	}

	.container .menu-bar .menu {
		display: none;
	}

	.container .page {
		position: relative;
		z-index: 0;
		margin-top: 62px;
	}

	.container .page .content {
		padding: 30px !important;
		justify-content: center;
	}

	.container .page .content .menu-title {
		text-align: center;
	}

	.container .page .content .index .post .post-card {
		padding: 0 !important;
		border: 1px solid #cfcfcf;
	}

	.container .page .content .index .post .post-card .post-thumbnail {
		border: none !important;
		border-bottom: 1px solid #ebebeb !important;
		border-radius: 10px 10px 0 0 !important;
	}

	.container .page .content .index .post .post-card .post-thumbnail img {
		border-radius: 10px 10px 0 0 !important;
	}

	.container .page .content .index .post .post-card .post-info {
		padding: 15px 20px 20px 20px !important;
	}

	.container .page .content .index .post .post-card .post-info .post-title {
		margin-bottom: 10px !important;
	}

	.container .page .content .index .post .post-card .post-info .post-meta {
		display: none;
	}

	.container .page .content .index .pagination {
		margin: 1em 0 !important;
	}

	.container .page .content .post {
		justify-content: center;
	}

	.post-content .size-sm img,
	.post-content .size-md img,
	.post-content .size-lg img {
		width: 100% !important;
	}

	.container .dim .dim-img,
	.container .dim .dim-img img {
		width: 100%;
	}

	.container .page .footer {
		padding: 30px !important;
	}
}

/* Animation */
@keyframes fade-in {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fade-out {
	from {
		opacity: 1;
		transform: translateY(0);
	}

	to {
		opacity: 0;
		transform: translateY(-8px);
	}
}