:root {
  --dark-font: #0f0f10;
  --light-font: #79798c;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

html, body {
  width: 100%;
  height: 100vh;
  margin: 0;
}

body {
  font-family: "DM Sans", sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  overflow: hidden;
  overflow-x: hidden;
  background-color: #ffffff;
  background-position: center;
  background-size: cover;
  padding: 20px;
	-ms-overflow-style: none; 
	::-webkit-scrollbar { display: none; }
}

a {
  text-decoration: none;
	color: inherit;
	cursor: pointer;
}

ul, ol, li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.link_tit, .c_cnt {
	display: none;
}

.link_item {
	display: block;
  color: var(--light-font);
  margin-bottom: 32px;
  transition: 0.2s;
	text-align: center;
}

.link_sub_item {
	display: block;
  color: var(--light-font);
  margin-bottom: 32px;
  transition: 0.2s;
	text-align: center;
}

.container {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 900px;
  max-height: 900px;
  background-color:#ffffff;
  display: flex;
  overflow: hidden;
}

.left-area {
  padding: 32px 10px;
  flex-basis: 1 0 132px;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all 300ms cubic-bezier(0.19, 1, 0.56, 1);
  position: relative;
  overflow: auto;
	font-size: 12px;
}
.left-area.show {
   transform: translateX(0);
  width: 20%;
  opacity: 1;
}

.app-name {
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  color: var(--dark-font);
  margin-bottom: 32px;
}

.item-link {
  color: var(--light-font);
  margin-bottom: 32px;
  transition: 0.2s;
}

.main-area {
  flex: 1;
  height: 100%;
  overflow-y: auto;
  background: #ffffff;
  padding-bottom: 24px;
  position: relative;
	overflow: scroll;
    /* IE scroll 숨김 */
    -ms-overflow-style: none;
}

.main-area::-webkit-scrollbar { 
    display: none;
    width: 0 !important;
}

.timeline-Viewport {
	overflow: scroll;
    /* IE scroll 숨김 */
    -ms-overflow-style: none;
}

.timeline-Viewport::-webkit-scrollbar { 
    display: none !important;
    width: 0 !important;
}

.content-section {
  display: block;
  margin-top: 10px;
  overflow-x: hidden;
  padding: 20px 40px 0;
	overflow: scroll;
    /* IE scroll 숨김 */
  -ms-overflow-style: none;
}

.content-section::-webkit-scrollbar { 
    display: none;
    width: 0 !important;
}

@-webkit-keyframes sticky {
  0% {
    transform: translatey(-88px);
  }
  100% {
    transform: translatey(0px);
  }
}

@keyframes sticky {
  0% {
    transform: translatey(-88px);
  }
  100% {
    transform: translatey(0px);
  }
}

.main-area-header {
  padding: 16px 40px;
}

.line-header {
  font-size: 12px;
  line-height: 16px;
  color: #888da9;
}

.btn_subscription {
	display: none;
}

.wrap_btn_etc {
	display: none;
}

.ico_statistics {
	display: none;
}

.ico_postbtn {
	display: none;
}

.container_postbtn .btn_post .ico_statistics {
	display: none;
}

.btn-show-left-area,
.btn-show-right-area {
  position: absolute;
  top: 10px;
  border-radius: 50%;
	width: 20px;
	height: 20px;
  background-color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
  cursor: pointer;
  display: none;
	font-size: 10px;
}

.btn-show-left-area {
	position: fixed;
    z-index: 10;
  left: 10px;
	background-color: var(--light-font);
	color: #ffffff;
}

.btn-show-right-area {
  right: 0;
  border-radius: 4px 0 0 4px;
}

.btn-close-left,
.btn-close-right {
  border: none;
  background-color: transparent;
  position: absolute;
  top: 4px;
  right: 4px;
  color: var(--light-font);
  outline: none;
  cursor: pointer;
	display: none;
	font-size: 10px;
}

.container_postbtn .postbtn_like {
	padding: 0!important;
}

.container_postbtn .btn_post {
	padding: 0!important;
}

.container_postbtn .btn_post .txt_like {
	color: var(--light-font)!important;
	font-size: 10px!important;
}

.tagTrail {
	font-size: 9px;
	color: var(--light-font);
}

.wrap_btn_share {
	display: none;
}

.btn_etc1 {
	display: none;
}

.btn-search {
	padding: 8px 8px;
    border: none;
    background-color: transparent;
    outline: none;
    cursor: pointer;
    line-height: 1;
    border-radius: 20px;
    background-color: var(--light-font);
    color: #ffffff;
    font-size: 10px;
    display: block;
}

.show .btn-close-left,
.show .btn-close-right {
  display: block;
}

/* 프로필 */
.profile-icon {
	display: block;
	width: 48px;
	height: 48px;
	border-radius: 50%;
}

.profile-icon img {
  width: 48px;
	height: 48px;
	border-radius: 50%;
	margin-left: 2px;
	margin-top: 2px;
}

.contents {
	width: 100%;
	height: 100%;
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	margin: 0 auto;
}

/* 썸네일 */
.gallery-item {
	width: 25%;
	display: inline-block;
	padding: 1%;
	overflow: hidden;
	text-overflow: ellipsis;
}

.gallery-item img {
	width:100%;
	border-radius: 8px;
}

.thum-title {
	display: block;
	width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;  /* 말줄임 적용 */
	font-size: 10px;
	font-weight: bold;
	letter-spacing: -0.5px;
	color: #79798c;
}

/* 페이지네이션 */
.paging {
	width: 100%;
	text-align: center;
	font-size: 11px;
	padding: 20px 0;
	color: #79798c;
}

.paging .num {
	padding: 1%;
}

.paging .num .selected {
	font-weight: bolder;
}

/* 본문 */
.post-title {
	display: flex;
	justify-content: space-between;
	width: 100%;
	padding: 10px 0 20px;
	font-size: 11px;
	white-space:nowrap;
}

.post-tit {
	font-weight: bold;
	overflow: hidden;
  text-overflow: ellipsis;
	color: var(--light-font);
}

.post-date {
	color: #999;
	font-weight: 300;
}

.post-desc {
	width: 100%;
	margin: 0 auto;
	font-size: 12px;
	color: var(--dark-font);
}

figure.imageblock.alignCenter {
    margin: 0 auto 5px;
}

/* 카테고리 다른글 */
.another_category th span {
	display: none;
}

.search {
	transform: translateY(-150%);
	position: absolute;
	display: flex;
	z-index: 3;
	width: 100%;
	background-color: var(--light-font);
	color: #fff;
	top: 0;
	transition: all 300ms cubic-bezier(0.19, 1, 0.56, 1);
}

.search input {
	text-align: center;
	padding: 10px;
	color: #fff;
	width: 100%;
	border: none;
	background: none;
	outline: none;
	font-size: 10px;
}

.btn-close-search {
	color: #ffffff;
	border: none;
	background-color: transparent;
	position: absolute;
	outline: none;
	cursor: pointer;
	font-size: 10px;
	top: 50%;
	right: 4px;
	transform: translateY(-50%);
}

.search.show {
	transform: translateY(0%);
	z-index: 50;
}

.search input::placeholder  {
	color: #fff;
}

.container_postbtn {
	padding: 10px 0 !important;
	position: relative;
	clear: both;
}

.postbtn_ccl {
	display: none;
}

.container_postbtn .postbtn_like {
	border: none !important;
}

@media screen and (max-width: 768px) {
	.content-section-line,
	.content-part-line {
		flex-direction: column;
	}
}
@media screen and (max-width: 520px) {
	.thum-title {
			font-size: 9px;
		}
  body {
    padding: 0;
  }
	.profile-icon {
		display: none;
	}
	.left-area {
    transform: translateX(-100%);
    opacity: 0;
    position: absolute;
    z-index: 2;
    height: 100%;
    background-color: #fff;
    background-image: none;
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.4);
  }
	.item-link {
		display: block;
		margin-bottom: 20px;
		text-align: center;
	}
  .btn-show-left-area {
    display: flex;
  }
  .content-section {
    padding: 25px 10px;
  }
  .content-section-line {
    margin: 0;
  }
	.left-area {
		font-size: 10px;
		padding: 32px 5px 32px 5px;
	}
	.left-area.show {
		display: flex;
		z-index: 15;
	}
	.search-wrapper {
		float: right;
		width: 30%;
	}
	.search-wrapper i {
		font-size: 7px;
	}
	.main-area-header {
    padding: 15px 0px;
}