*
 * CSS CONTENTS:
 *
 * 01. Web Font
 * 02. Type Selector Reset
 * 03. Accessibility Navigation
 * 04. Layout Selector
 * 05. Components
 * 06. Entry Content
 * 07. Comment
 * 08. Aside(sidebar)
 * 09. ETC
 * 10. Option(Color Type & List Type)
 * 11. Retina Display
 * 12. Media Screen
 * 13. Dark Theme Colors
 *
 */

/* Web Font Load */
@import url('https://fonts.googleapis.com/css?family=Nanum+Myeongjo:800&subset=korean');
@import url('//fonts.googleapis.com/earlyaccess/notosanskr.css');

/* 기본 테마 (라이트 모드 색상) */
:root {
	--bg-primary: #ffffff;
	--bg-secondary: #f5f5f5;
	--bg-tertiary: #fafafa;
	--bg-hover: #f0f0f0;
	--text-primary: #333333;
	--text-secondary: #666666;
	--text-muted: #999999;
	--border-color: #eee;
	--border-light: #e0e0e0;
	--accent-color: #04beb8;
	--accent-hover: #03a09b;
	--link-color: #04beb8;
	--shadow-color: rgba(0,0,0,0.1);
}

/* 다크 모드 (html 태그에 data-theme="dark"가 붙으면 적용) */
html[data-theme='dark'] {
	--bg-primary: #1a1a1a;
	--bg-secondary: #242424;
	--bg-tertiary: #2d2d2d;
	--bg-hover: #333333;
	--text-primary: #e0e0e0;
	--text-secondary: #b0b0b0;
	--text-muted: #888888;
	--border-color: #3a3a3a;
	--border-light: #444444;
	--accent-color: #04beb8;
	--accent-hover: #05d6d0;
	--link-color: #5bc0be;
	--shadow-color: rgba(0,0,0,0.5);
}


/* Type Selector Reset */
body {
	-webkit-text-size-adjust: 100%;
	font-weight: 400;
	font-family: 'AppleSDGothicNeo', 'Noto Sans KR', sans-serif;
	font-size: 1em;
	line-height: 1.25;
	color: var(--text-primary);
	background-color: var(--bg-primary);
}

html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	font-size: 100%;
}
div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, figure {
	margin: 0;
	padding: 0;
}
header, footer, section, article, aside, nav, hgroup, details, menu, figure, figcaption {
	display: block;
}
button, input[type=submit], input[type=reset], input[type=button] {
	overflow: visible;
	cursor: pointer;
}
input[type=text], input[type=email], input[type=password], input[type=submit], textarea {
	-webkit-appearance: none;
}
input, select, textarea, button {
	font-family: 'Noto Sans KR', sans-serif;
	font-size: 100%;
	border-radius: 0;
}
button {
	overflow: visible;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
}
ul li {
	list-style: none;
}
img, fieldset {
	border: none;
	vertical-align: top;
}
hr {
	display: none;
}
a, a:link {text-decoration:none; color: var(--text-primary);}
a:visited {text-decoration:none;}
a:hover, a:focus {text-decoration:underline; color: var(--accent-color);}
a:active {text-decoration:none;}

/* Accessibility Navigation */
#acc-nav {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1000;
	width: 100%;
	height: 0;
}
#acc-nav a {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	overflow: hidden;
	width: 1px;
	height: 1px;
	margin-left: -1px;
	margin-bottom: -1px;
	text-align: center;
	font-weight: bold;
	font-size: 0.875em;
	color: #fff;
	white-space: normal;
}
#acc-nav a:focus, #acc-nav a:hover, #acc-nav a:active {
	width: 100%;
	height: auto;
	padding: 10px 0;
	background: var(--accent-color);
	color: #fff;
	z-index: 1000;
}

/* Layout Selector */
#header {
	border-bottom: 1px solid var(--border-color);
	background-color: var(--bg-secondary);
}
#header .inner {
	position: relative;
	max-width: 1080px;
	margin: 0 auto;
}
#header h1 {
	padding: 23px 0 ;
	font-family: 'Nanum Myeongjo';
	font-weight: 800;
	font-size: 1.75em;
	line-height: 32px;
	letter-spacing: -0.2px;
	color: var(--text-primary);
}
#header h1 a {
	display: inline-block;
	height: 32px;
	text-decoration: none;
	color: var(--text-primary);
	vertical-align: top;
}
#header h1 img {
	width: auto;
	height: 32px;
}

#header .util {
	position: absolute;
	top: 24px;
	right: 0;
}
#header .util .search {
	position: relative;
	float: left;
	overflow: hidden;
	width: 32px;
	background-color: var(--bg-secondary);
	box-sizing: border-box;
	transition: width 0.5s;
	-webkit-transition: width 0.5s;
}
#header .util .search:before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	z-index: 20;
	width: 32px;
	height: 32px;
	border: 1px solid var(--border-color);
	border-radius: 50%;
	text-indent: -999em;
	background: var(--bg-secondary) url(./images/ico_package.png) no-repeat 0 0;
	filter: invert(1);
	vertical-align: top;
	box-sizing: border-box;
	outline: none;
	cursor: pointer;
}
#header .util .search input {
	width: 32px;
	height: 32px;
	padding: 5px 15px;
	border: 0;
	background-color: transparent;
	font-size: 0.875em;
	line-height: 1;
	outline: none;
	box-sizing: border-box;
	color: var(--text-primary);
}
#header .util .search input:focus {
	border-color: var(--accent-color);
}
#header .util .search input::placeholder {
	color: var(--text-muted);
}
#header .util .search button {
	position: absolute;
	top: 1px;
	right: 1px;
	z-index: 10;
	width: 30px;
	height: 30px;
	text-indent: -999em;
	border: 1px solid var(--border-color);
	border-radius: 50%;
	background: var(--bg-secondary) url(./images/ico_package.png) no-repeat -1px -1px;
	filter: invert(1);
	vertical-align: top;
	outline: none;
}
#header .util .search.on {width: 200px;}
#header .util .search.on:before {content: none;}
#header .util .search.on input {
	display: block;
	width: 100%;
	border: 1px solid var(--border-color);
	border-radius: 32px;
	background-color: var(--bg-tertiary);
}
#header .util .search.on button {border-color: transparent;}

#header .util .profile {
	position: relative;
	float: left;
	margin-left: 14px;
}
#header .util .profile button {
	display: block;
	overflow: hidden;
	width: 32px;
	height: 32px;
	border: 1px solid var(--border-color);
	border-radius: 50%;
}
#header .util .profile img {
	width: 100%;
	height: 100%;
}
#header .util .profile nav {
	display: none;
	position: absolute;
	top: 100%;
	left: 50%;
	z-index: 30;
	width: 96px;
	margin: 0 0 0 -48px;
	padding-top: 12px;
}
#header .util .profile ul {
	box-shadow: 1px 1px 3px var(--shadow-color);
}
#header .util .profile ul li a {
	display: block;
	margin-top: -1px;
	border: 1px solid var(--border-color);
	background-color: var(--bg-secondary);
	text-align: center;
	text-decoration: none;
	font-size: 0.875em;
	line-height: 2.3125rem;
	color: var(--text-secondary);
}
#header .util .profile ul li a:focus,
#header .util .profile ul li a:hover {
	background-color: var(--bg-hover);
	color: var(--text-primary);
}
#header .util .menu {
	display: none;
}
#gnb {
	height: 66px;
	overflow-x: auto;
	overflow-y: hidden;
	-ms-overflow-style: none;
	background-color: var(--bg-secondary);
}
#gnb::-webkit-scrollbar {
	display: none;
}

#gnb ul {
	display: inline-block;
	margin-left: -30px;
	vertical-align: top;
}
#gnb ul li {
	float: left;
	padding: 0 26px;
}
#gnb ul li a {
	position: relative;
	display: block;
	text-decoration: none;
	padding: 22px 4px 24px;
	color: var(--text-secondary);
}
#gnb ul li a:hover,
#gnb ul li.current a {
	color: var(--text-primary);
}
#gnb ul li.current a:after,
#gnb ul li a:hover:after,
#gnb ul li a:focus:after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 4px;
	background-color: var(--accent-color);
}
#container {
	position: relative;
	background-color: var(--bg-primary);
}
#container .content-wrap {
	max-width: 1080px;
	margin: 0 auto;
	padding: 0 20px;
}
#container .content-wrap:before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 10;
	width: 1px;
	height: 100%;
	margin-left: 255px;
	background-color: var(--border-color);
}
#container .content-wrap:after {
	content: "";
	clear: both;
	display: block;
	height: 0;
	visibility: hidden;
}
#content {
	float: left;
	width: 68.518518518518519%;
	padding: 72px 0 60px;
	box-sizing: border-box;
}
#content>.inner:after {
	content: "";
	clear: both;
	display: block;
	height: 0;
	visibility: hidden;
}

#aside {
	float: right;
	width: 21.296296296296296%;
	padding: 75px 0 32px;
	box-sizing: border-box;
}
#aside .close,
#aside .profile {
	display: none;
}

#footer {
	padding: 38px 0 28px;
	border-top: 1px solid var(--border-color);
	background-color: var(--bg-secondary);
}
#footer .inner {
	position: relative;
	max-width: 1080px;
	margin: 0 auto;
}
#footer p {
	margin-bottom: 10px;
	font-size: 0.875em;
	color: var(--text-secondary);
}
#footer .order-menu a {
	display: inline-block;
	margin-bottom: 23px;
	font-size: 0.8125em;
	vertical-align: middle;
	color: var(--text-primary);
}
#footer .order-menu a:hover,
#footer .order-menu a:focus {
	color: var(--accent-color);
}
#footer .order-menu a:before {
	content: "";
	display: inline-block;
	width: 2px;
	height: 2px;
	margin: 0 20px 2px 15px;
	background-color: var(--border-light);
	vertical-align: middle;
}
#footer .order-menu a:first-child::before {
	content: none;
}
#footer .page-top {
	position: absolute;
	top: 0;
	right: 0;
	width: 30px;
	height: 30px;
	border: 1px solid var(--border-color);
	border-radius: 50%;
	background: var(--bg-secondary) url(./images/ico_package.png) no-repeat -100px -200px;
	filter: invert(1);
	text-indent: -999em;
}
#footer .page-top:focus,
#footer .page-top:hover {
	background-color: var(--accent-color);
	background-position-x: -150px;
	filter: none;
}

#tt-body-index .main-slider {
	display: block;
}
#tt-body-index #content {
	padding-bottom: 43px;
}
#tt-body-index .post-cover.notice {
	height: auto;
	background-color: transparent;
}
#tt-body-index .post-cover.notice h1 {
	margin: 0;
	font-size: 1.6875em;
	line-height: 1.5;
	color: var(--text-primary);
}
#tt-body-index .post-cover.notice h1 a {
	color: var(--text-primary);
}
#tt-body-index .post-cover.notice .meta {
	margin: 0 0 30px;
	color: var(--text-muted);
}
#tt-body-page #container {
	padding-top: 339px;
}
#tt-body-page.post-cover-hide #container {
	padding-top: 0;
}
#tt-body-page .post-cover {
	position: absolute;
	top: -1px;
	left: 0;
	width: 100%;
}
#tt-body-tag .tags {
	margin-top: 0;
}

/* Components */
.btn, a.btn {
	display: inline-block;
	width: 100px;
	height: 36px;
	background-color: var(--bg-tertiary);
	text-align: center;
	font-weight: 400;
	font-size: 14px;
	line-height: 36px;
	color: var(--text-primary);
	vertical-align: middle;
}
.btn:hover {
	background-color: var(--accent-color);
}
.main-slider {
	display: none;
	position: relative;
	top: -1px;
	z-index: 20;
	overflow: hidden;
	width: 100%;
	background-color: var(--bg-tertiary);
}
.main-slider ul {
	position: relative;
}
.main-slider ul li {
	display: table;
	width: 100%;
	height: 340px;
	background-position: 50% 50%;
	background-size: cover;
}
.main-slider ul li a {
	display: table;
	width: 100%;
	height: 100%;
	text-decoration: none;
	background-color: rgba(0,0,0,0.4);
}
.main-slider ul li .inner {
	display: table-cell;
	vertical-align: middle;
}
.main-slider ul li .box {
	display: block;
	max-width: 910px;
	margin: 0 auto;
	padding: 0 24px 6px;
}
.main-slider ul li .text {
	display: block;
	overflow: hidden;
	max-width: 65%;
	text-overflow: ellipsis;
	font-weight: 300;
	font-size: 2.125em;
	line-height: 1.2352;
	color: #fff;
	display: -webkit-box;
	-webkit-line-clamp: 6;
	-webkit-box-orient: vertical;
}
.main-slider ul li .btn {
	display: block;
	width: 118px;
	height: 35px;
	margin-top: 32px;
	border-radius: 35px;
	line-height: 35px;
	background-color: var(--bg-secondary);
	color: var(--text-primary);
}
.main-slider ul li .btn:hover {
	background-color: var(--accent-color);
	color: #fff;
}
.main-slider .prev,
.main-slider .next {
	display: none;
}
.main-slider .paging {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 10;
	margin-left: 447px;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
}
.main-slider .paging button {
	display: block;
	width: 8px;
	height: 8px;
	margin: 10px 0;
	text-indent: -999em;
	border-radius: 50%;
	background-color: rgba(255,255,255,0.4);
}
.main-slider .paging .current {
	background-color: rgba(255,255,255,1);
}

.cover-thumbnail-1 {
	position: relative;
	margin-bottom: 77px;
}
.cover-thumbnail-1 h2 {
	margin-bottom: 19px;
	font-weight: 500;
	font-size: 1em;
	color: var(--text-primary);
}
.cover-thumbnail-1 ul {
	display: inline-block;
	width: 103.378378378378378%;
	margin-left: -3.378378378378378%;
	margin-bottom: -40px;
	vertical-align: top;
}
.cover-thumbnail-1 ul li {
	float: left;
	width: 33.333333333333333%;
	padding-left: 3.26797385620915%;
	margin: 0 0 38px;
	box-sizing: border-box;
}
.cover-thumbnail-1 ul li a {
	display: block;
	text-decoration: none;
}
.cover-thumbnail-1 ul li a:hover .title,
.cover-thumbnail-1 ul li a:focus .title {
	text-decoration: underline;
	color: var(--accent-color);
}
.cover-thumbnail-1 ul li figure {
	display: block;
	height: 0;
	margin-bottom: 9px;
	padding-bottom: 130.434782608695652%;
	background-color: var(--bg-tertiary);
}
.cover-thumbnail-1 ul li figure img {
	width: 100%;
	height: auto;
}
.cover-thumbnail-1 ul li .title {
	display: block;
	overflow: hidden;
	width: 95%;
	margin-bottom: 2px;
	text-overflow: ellipsis;
	white-space: normal;
	line-height: 1.75;
	color: var(--text-primary);
}
.cover-thumbnail-1 ul li .date {
	display: block;
	font-size: 0.75em;
	color: var(--text-muted);
}
.cover-thumbnail-1 .more {
	position: absolute;
	top: 4px;
	right: 0;
	font-weight: 300;
	font-size: 0.875em;
	color: var(--text-muted);
}

.cover-thumbnail-2 {
	position: relative;
	overflow: hidden;
	width: 100%;
	margin-bottom: 77px;
}
.cover-thumbnail-2 h2 {
	margin-bottom: 28px;
	padding-bottom: 19px;
	border-bottom: 1px solid var(--border-color);
	font-weight: 500;
	font-size: 1em;
	color: var(--text-primary);
}
.cover-thumbnail-2 ul li {
	overflow: hidden;
	margin-top: 28px;
}
.cover-thumbnail-2 ul li a {
	display: block;
	text-decoration: none;
}
.cover-thumbnail-2 ul li a:hover .title,
.cover-thumbnail-2 ul li a:focus .title {
	text-decoration: underline;
	color: var(--accent-color);
}
.cover-thumbnail-2 ul li figure {
	float: right;
	width: 128px;
	margin-left: 57px;
}
.cover-thumbnail-2 ul li figure img {
	width: 100%;
	height: auto;
	border: 1px solid var(--border-color);
	box-sizing: border-box;
}
.cover-thumbnail-2 ul li .title {
	display: block;
	overflow: hidden;
	max-width: 95%;
	margin-bottom: 10px;
	padding-top: 7px;
	text-overflow: ellipsis;
	white-space: normal;
	font-size: 1.25em;
	line-height: 1.4;
	color: var(--text-primary);
}
.cover-thumbnail-2 ul li .excerpt {
	display: block;
	overflow: hidden;
	max-width: 95%;
	margin-bottom: 20px;
	text-overflow: ellipsis;
	font-size: 0.875em;
	line-height: 1.5rem;
	color: var(--text-muted);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}
.cover-thumbnail-2 ul li .meta {
	display: block;
	font-size: 0.75em;
	color: var(--text-muted);
}
.cover-thumbnail-2 ul li .meta span:before {
	content: "";
	display: inline-block;
	width: 2px;
	height: 2px;
	margin: 0 8px 0 5px;
	background-color: var(--border-light);
	vertical-align: middle;
}
.cover-thumbnail-2 ul li .meta span:first-child:before {
	content: none;
}
.cover-thumbnail-2 .more {
	display: block;
	width: 100%;
	margin-top: 28px;
	padding: 12px 0 11px;
	border: 1px solid var(--border-color);
	text-align: center;
	font-size: 0.875em;
	color: var(--text-muted);
}

.cover-thumbnail-3 {
	position: relative;
	margin-bottom: 77px;
}
.cover-thumbnail-3 h2 {
	margin-bottom: 19px;
	font-weight: 500;
	font-size: 1em;
	color: var(--text-primary);
}
.cover-thumbnail-3 ul {
	position: relative;
	display: inline-block;
	width: 103.378378378378378%;
	margin-left: -3.378378378378378%;
	margin-bottom: -25px;
	vertical-align: top;
}
.cover-thumbnail-3 ul li {
	float: left;
	width: 20%;
	margin-bottom: 22px;
	padding-left: 3.26797385620915%;
	box-sizing: border-box;
}
.cover-thumbnail-3 ul li a {
	display: block;
	text-decoration: none;
}
.cover-thumbnail-3 ul li a:hover .title,
.cover-thumbnail-3 ul li a:focus .title {
	text-decoration: underline;
	color: var(--accent-color);
}
.cover-thumbnail-3 ul li figure {
	display: block;
	width: 100%;
	height: 0;
	margin-bottom: 11px;
	padding-bottom: 129.6875%;
	background-color: var(--bg-tertiary);
}
.cover-thumbnail-3 ul li figure img {
	width: 100%;
	height: auto;
	border: 1px solid var(--border-color);
	box-sizing: border-box;
}
.cover-thumbnail-3 ul li .title {
	display: block;
	overflow: hidden;
	width: 95%;
	text-overflow: ellipsis;
	white-space: normal;
	font-size: 0.8125em;
	line-height: 1.4;
	color: var(--text-primary);
}
.cover-thumbnail-3 button {
	position: absolute;
	top: -1px;
	width: 24px;
	height: 24px;
	border: 1px solid var(--border-color);
	border-radius: 50%;
	background: url(./images/ico_package.png) no-repeat 0 -50px;
	filter: invert(1);
	text-indent: -999em;
	outline: none;
}
.cover-thumbnail-3 .prev {
	right: 30px;
}
.cover-thumbnail-3 .next {
	right: 0;
	background-position-x: -50px;
}
.cover-thumbnail-3 button:focus,
.cover-thumbnail-3 button:hover {
	background-color: var(--accent-color);
	background-position-y: -74px;
	filter: none;
}

.cover-thumbnail-4 {
	position: relative;
	margin-bottom: 17px;
}
.cover-thumbnail-4 h2 {
	margin-bottom: 19px;
	font-weight: 500;
	font-size: 1em;
	color: var(--text-primary);
}
.cover-thumbnail-4 ul {
	position: relative;
	display: inline-block;
	width: 103.378378378378378%;
	margin-left: -3.378378378378378%;
	vertical-align: top;
}
.cover-thumbnail-4 ul li {
	float: left;
	width: 33.333333333333333%;
	min-height: 283px;
	padding-left: 3.26797385620915%;
	margin: 0 0 55px;
	box-sizing: border-box;
}
.cover-thumbnail-4 ul li a {
	display: block;
	text-decoration: none;
}
.cover-thumbnail-4 ul li a:hover .title,
.cover-thumbnail-4 ul li a:focus .title {
	text-decoration: underline;
	color: var(--accent-color);
}
.cover-thumbnail-4 ul li figure {
	display: block;
	width: 100%;
	height: 0;
	margin-bottom: 5px;
	padding-bottom: 60.869565217391304%;
	background-color: var(--bg-tertiary);
}
.cover-thumbnail-4 ul li figure img {
	width: 100%;
	height: auto;
}
.cover-thumbnail-4 ul li .title {
	display: block;
	overflow: hidden;
	max-width: 95%;
	margin-bottom: 4px;
	padding-top: 9px;
	text-overflow: ellipsis;
	white-space: normal;
	line-height: 1.4;
	color: var(--text-primary);
}
.cover-thumbnail-4 ul li .excerpt {
	display: block;
	overflow: hidden;
	max-width: 95%;
	margin-bottom: 15px;
	text-overflow: ellipsis;
	font-size: 0.8125em;
	line-height: 1.5rem;
	color: var(--text-muted);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}
.cover-thumbnail-4 ul li .meta {
	display: block;
	font-size: 0.75em;
	color: var(--text-muted);
}
.cover-thumbnail-4 ul li .meta span:before {
	content: "";
	display: inline-block;
	width: 2px;
	height: 2px;
	margin: 7px 8px 9px 5px;
	background-color: var(--border-light);
	vertical-align: top;
}
.cover-thumbnail-4 ul li .meta span:first-child:before {
	content: none;
}
.cover-thumbnail-4 button {
	position: absolute;
	top: -1px;
	width: 24px;
	height: 24px;
	border: 1px solid var(--border-color);
	border-radius: 50%;
	background: url(./images/ico_package.png) no-repeat 0 -50px;
	filter: invert(1);
	text-indent: -999em;
	outline: none;
}
.cover-thumbnail-4 .prev {
	right: 30px;
}
.cover-thumbnail-4 .next {
	right: 0;
	background-position-x: -50px;
}
.cover-thumbnail-4 button:focus,
.cover-thumbnail-4 button:hover {
	background-color: var(--accent-color);
	background-position-y: -74px;
	filter: none;
}

.cover-list {
	position: relative;
	overflow: hidden;
	width: 100%;
	margin-bottom: 42px;
}
.cover-list h2 {
	margin-bottom: 35px;
	padding-bottom: 19px;
	border-bottom: 1px solid var(--border-color);
	font-weight: 500;
	font-size: 1em;
	color: var(--text-primary);
}
.cover-list ul li {
	overflow: hidden;
	margin-bottom: 33px;
}
.cover-list ul li a {
	display: block;
	text-decoration: none;
}
.cover-list ul li a:hover .title,
.cover-list ul li a:focus .title {
	text-decoration: underline;
	color: var(--accent-color);
}
.cover-list ul li .title {
	display: block;
	overflow: hidden;
	max-width: 95%;
	margin-bottom: 6px;
	text-overflow: ellipsis;
	white-space: normal;
	font-size: 1.25em;
	line-height: 1.4;
	color: var(--text-primary);
}
.cover-list ul li .excerpt {
	display: block;
	overflow: hidden;
	max-width: 95%;
	margin-bottom: 18px;
	text-overflow: ellipsis;
	font-size: 0.875em;
	line-height: 1.5rem;
	color: var(--text-muted);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}
.cover-list ul li .date {
	display: block;
	font-size: 0.75em;
	color: var(--text-muted);
}
.cover-list .more {
	position: absolute;
	top: 4px;
	right: 0;
	font-weight: 300;
	font-size: 0.875em;
	color: var(--text-muted);
}

.cover-event {
	margin-bottom: 57px;
}
.cover-event h2 {
	margin-bottom: 19px;
	font-weight: 500;
	font-size: 1em;
	color: var(--text-primary);
}
.cover-event ul {
	display: inline-block;
	width: 102.702702702702703%;
	margin-left: -2.702702702702703%;
	vertical-align: top;
}
.cover-event ul li {
	float: left;
	width: 50%;
	padding-left: 2.631578947368421%;
	margin: 0 0 20px;
	box-sizing: border-box;
}
.cover-event ul li a {
	position: relative;
	display: block;
	padding-bottom: 33.333333333333333%;
	border: 1px solid var(--border-color);
	background-color: var(--bg-tertiary);
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover;
	text-decoration: none;
	color: var(--text-primary);
}
.cover-event ul li a:hover,
.cover-event ul li a:focus {
	color: var(--accent-color);
}
.cover-event ul li a:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.4);
}
.cover-event ul li .title {
	position: absolute;
	top: 15%;
	left: 24px;
	z-index: 30;
	overflow: hidden;
	max-width: 60%;
	margin-bottom: 7px;
	padding-top: 9px;
	text-overflow: ellipsis;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	color: #fff;
}
.cover-event ul li .more {
	position: absolute;
	bottom: 20.833333333333333%;
	left: 24px;
	z-index: 30;
	text-decoration: underline;
	font-size: 0.875em;
	color: rgba(255,255,255,0.6);
}

.post-cover {
	position: relative;
	z-index: 20;
	display: table;
	width: 100%;
	height: 340px;
	background-color: var(--bg-tertiary);
	background-position: 50% 50%;
	background-size: cover;
	box-sizing: border-box;
}
.post-cover:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.85);
}
.post-cover .inner {
	display: table-cell;
	position: relative;
	z-index: 10;
	vertical-align: bottom;
	padding-bottom: 78px;
}
.post-cover .category {
	display: block;
	max-width: 1080px;
	margin: 0 auto 13px;
	font-size: 0.875em;
	color: #fff;
}
.post-cover h1 {
	max-width: 1080px;
	margin: 0 auto;
	font-weight: 300;
	font-size: 2.125em;
	line-height: 1.2352;
	color: #fff;
}
.post-cover a {
	text-decoration: none;
	color: #fff;
}
.post-cover .meta {
	display: block;
	max-width: 1080px;
	margin: 34px auto 0;
	font-size: 0.875em;
	color: rgba(255,255,255,0.6);
}
.post-cover .meta a {
	color: rgba(255,255,255,0.6);
}
.post-cover .meta a:before,
.post-cover .meta span:before {
	content: "";
	display: inline-block;
	width: 2px;
	height: 2px;
	margin: 0 8px 0 4px;
	background-color: rgba(255,255,255,0.6);
	vertical-align: middle;
}
.post-cover .meta span:first-child:before {
	content: none;
}

.post-header {padding-top: 4px;}
.post-header h1 {
	margin-bottom: 18px;
	font-size: 1em;
	line-height: 1.375;
	color: var(--text-primary);
}
#tt-body-archive .post-header span:before {content: "'";}
#tt-body-archive .post-header span:after {content: "' 에 등록된 글";}
#tt-body-tag .post-header span:before {content: "#";}
#tt-body-search .post-header span:before {content: "'";}
#tt-body-search .post-header span:after {content: "'의 검색결과";}

.post-header h1 em {
	margin-left: 7px;
	font-style: normal;
	color: var(--accent-color);
}

.post-item {
	float: left;
	width: 31.081081081081081%;
	margin: 0 0 58px 3.378378378378378%;
}
.post-item:nth-child(3n+1) {
	clear: both;
	margin-left: 0;
}
.post-item a {
	display: block;
	text-decoration: none;
}
.post-item a:hover .title,
.post-item a:focus .title {
	text-decoration: underline;
	color: var(--accent-color);
}
.post-item .thum {
	position: relative;
	display: block;
	overflow: hidden;
	width: 100%;
	height: 0;
	margin-bottom: 5px;
	padding-bottom: 60.869565217391304%;
	background-color: var(--bg-tertiary);
}
.post-item .thum img {
	width: 100%;
	height: auto;
	transform: translateY(-25%);
	-webkit-transform: translateY(-25%);
	-ms-transform: translateY(-25%);
}
.post-item .title {
	display: block;
	overflow: hidden;
	max-width: 98%;
	margin-bottom: 4px;
	padding-top: 9px;
	white-space: normal;
	line-height: 1.4;
	color: var(--text-primary);
}
.post-item .excerpt {
	display: block;
	overflow: hidden;
	max-width: 95%;
	margin-bottom: 15px;
	text-overflow: ellipsis;
	font-size: 0.8125em;
	line-height: 1.5rem;
	color: var(--text-muted);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}
.post-item .meta {
	display: block;
	font-size: 0.75em;
	color: var(--text-muted);
}
.post-item .meta span:before {
	content: "";
	display: inline-block;
	width: 2px;
	height: 2px;
	margin: 0 8px 0 5px;
	background-color: var(--border-light);
	vertical-align: middle;
}
.post-item .meta span:first-child:before {
	content: none;
}
.post-item.protected .thum:before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 34px;
	height: 47px;
	margin: -24px 0 0 -17px;
	background: url(./images/ico_package.png) no-repeat 0 -120px;
	background-size: 120px auto;
	filter: invert(1);
}

.not-found {
	display: block;
	width: 100%;
	margin-bottom: 35px;
}
.not-found li {
	position: relative;
	padding-left: 10px;
	font-size: 0.9375em;
	line-height: 2;
	color: var(--text-muted);
}
.not-found li:before {
	content: "";
	position: absolute;
	top: 15px;
	left: 0;
	width: 2px;
	height: 2px;
	background-color: var(--text-muted);
}
.not-found .tag,
.not-found .category,
.not-found .archive {
	display: none;
}
#tt-body-tag .not-found ul,
#tt-body-category .not-found ul,
#tt-body-archive .not-found ul {display: none;}
#tt-body-tag .not-found .tag,
#tt-body-category .not-found .category,
#tt-body-archive .not-found .archive {display: block;}

.pagination {
	margin-bottom: 60px;
	text-align: center;
}
.pagination a {
	display: inline-block;
	margin: 0 12px;
	font-size: 0.875em;
	line-height: 1.5rem;
	vertical-align: top;
	color: var(--text-muted);
}
.pagination .selected {
	color: var(--text-primary);
}
.pagination .prev,
.pagination .next {
	width: 22px;
	height: 22px;
	border: 1px solid var(--border-color);
	border-radius: 50%;
	background: url(./images/ico_package.png) no-repeat 0 -50px;
	filter: invert(1);
	text-indent: -999em;
}
.pagination .next {
	background-position-x: -50px;
}
.pagination .view-more {
	display: block;
	margin: 0;
	padding: 12px 0 11px;
	border: 1px solid var(--border-color);
	text-align: center;
	font-size: 0.875em;
	color: var(--text-muted);
}

.tags {
	margin-bottom: 45px;
	font-size: 0;
}
.tags:after {
	content: "";
	clear: both;
	display: block;
	height: 0;
	visibility: hidden;
}
.tags h2 {
	margin-bottom: 15px;
	font-weight: 600;
	font-size: 16px;
	color: var(--text-primary);
}
.tags a {
	display: inline-block;
	margin: 0 8px 12px 0;
	padding: 0 17px;
	border: 1px solid var(--border-color);
	border-radius: 32px;
	font-size: 14px;
	line-height: 30px;
	vertical-align: middle;
	color: var(--text-primary);
	background-color: var(--bg-secondary);
}
.tags a:hover,
.tags a:focus {
	color: var(--accent-color);
	border-color: var(--accent-color);
}

.page-nav {
	margin: 52px 0 60px 0;
	padding: 23px 0 20px;
	border-top: 1px solid var(--border-color);
	border-bottom: 1px solid var(--border-color);
}
.page-nav a {
	display: block;
	overflow: hidden;
	padding-left: 58px;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 0.875em;
	line-height: 2.125rem;
	color: var(--text-primary);
}
.page-nav a:hover,
.page-nav a:focus {
	color: var(--accent-color);
}
.page-nav a strong {
	float: left;
	width: 58px;
	margin-left: -58px;
	font-weight: 400;
	color: var(--text-muted);
}
.page-nav a strong:after {
	content: "";
	display: inline-block;
	width: 1px;
	height: 5px;
	margin: 0 8px;
	background: url(./images/ico_package.png) no-repeat -150px -50px;
	filter: invert(1);
	vertical-align: middle;
}

.related-articles {
	margin-bottom: 55px;
}
.related-articles h2 {
	margin-bottom: 15px;
	font-weight: 600;
	font-size: 1em;
	color: var(--text-primary);
}
.related-articles ul {
	display: inline-block;
	width: 101.621621621621622%;
	margin-left: -1.621621621621622%;
	vertical-align: top;
}
.related-articles ul li {
	float: left;
	width: 25%;
	padding-left: 1.621621621621622%;
	box-sizing: border-box;
}
.related-articles ul li:first-child {
	margin-left: 0;
}
.related-articles ul li a {
	color: var(--text-primary);
}
.related-articles ul li a:hover,
.related-articles ul li a:focus {
	color: var(--accent-color);
}
.related-articles ul li figure {
	display: block;
	width: 100%;
	height: 0;
	margin-bottom: 9px;
	padding-bottom: 68.181818181818182%;
	background-color: var(--bg-tertiary);
}
.related-articles ul li figure img {
	width: 100%;
	height: auto;
}
.related-articles ul li .title {
	display: block;
	overflow: hidden;
	max-width: 95%;
	text-overflow: ellipsis;
	white-space: normal;
	font-size: 0.875em;
	line-height: 1.4;
	color: var(--text-primary);
}

/* Entry Content */
.entry-content h1 {
	clear: both;
	margin: 29px 0 22px;
	font-size: 1.6875em;
	line-height: 1.5;
	color: var(--text-primary);
}
.entry-content h2 {
	clear: both;
	margin: 29px 0 22px;
	font-size: 1.5em;
	line-height: 1.5;
	color: var(--text-primary);
}
.entry-content h3 {
	clear: both;
	margin: 29px 0 22px;
	font-size: 1.3125em;
	line-height: 1.5;
	color: var(--text-primary);
}
.entry-content h4 {
	clear: both;
	margin: 29px 0 22px;
	font-weight: 400;
	font-size: 1.125em;
	line-height: 1.5;
	color: var(--text-primary);
}
.entry-content a {
	color: var(--accent-color);
}
.entry-content p {
	margin-bottom: 32px;
	word-break: break-word;
	font-size: 1.0em;
	line-height: 2;
	color: var(--text-primary);
}
.entry-content p img {
	max-width: 100%;
	height: auto;
}
.entry-content figure {
	margin-top: 8px !important;
}
.entry-content hr {
	display: block;
	height: 0;
	border: 0;
	border-bottom: 1px solid var(--border-color);
}
.entry-content pre {
	word-break:break-word;
	white-space:pre-wrap;
	word-wrap:break-word;
	background-color: var(--bg-tertiary);
	padding: 15px;
	border-radius: 5px;
	color: var(--text-primary);
}
.entry-content ul {
	list-style: disc;
	margin-bottom: 22px;
	padding: revert;
}
.entry-content ul li {
	position: relative;
	margin-bottom: 10px;
	font-size: 0.9375em;
	line-height: 1.5714;
	color: var(--text-secondary);
	list-style: inherit;
}
.entry-content ol {
	list-style: decimal inside;
	margin-bottom: 22px;
}
.entry-content ol li {
	position: relative;
	margin-bottom: 10px;
	padding-left: 16px;
	font-size: 0.9375em;
	line-height: 1.5714;
	color: var(--text-secondary);
	text-indent: -15px;
	list-style: inherit;
}
.entry-content img.alignleft {
	float: left;
	margin: 0 22px 22px 0;
}
.entry-content img.aligncenter {
	display: block;
	margin: 0 auto 22px;
}
.entry-content img.alignright {
	float: right;
	margin: 0 0 22px 22px;
}
.entry-content blockquote {
	margin-bottom: 40px;
	padding: 16px 20px;
	border-left: 4px solid var(--accent-color);
	background-color: var(--bg-secondary);
}
.entry-content blockquote p {
	margin: 22px 0 0;
}
.entry-content blockquote p:first-child {
	margin-top: 0;
}
.entry-content table {
	width:100%;
	margin-bottom: 22px;
	border: 1px solid var(--border-color);
	border-collapse: collapse;
	text-align: center;
	font-size: 0.9375em;
	line-height: 1.5714;
	color: var(--text-secondary);
}
.entry-content table thead th {
	padding:7px 0 11px;
	border-left: 1px solid var(--border-color);
	background-color: var(--bg-secondary);
}
.entry-content table tbody td {
	padding:7px 0 11px;
	border-left: 1px solid var(--border-color);
	border-top: 1px solid var(--border-color);
}
.entry-content input {
	height: 36px;
	padding: 0 10px;
	border: 1px solid var(--border-color);
	font-size: 0.875em;
	line-height: 1.25;
	color: var(--text-secondary);
	background-color: var(--bg-tertiary);
	box-sizing: border-box;
	vertical-align: middle;
}
.entry-content .entry-content .protected_form {
	margin-bottom: 40px;
	padding: 120px 0 200px;
	border-bottom: 1px solid var(--border-color);
	text-align: center;
}
.entry-content .entry-content .protected_form input {
	width: 200px;
	margin-bottom: 10px;
	vertical-align: top;
}
.entry-content .cap1 {
	text-align: center;
	font-size: 0.875em;
	font-style: italic;
	color: var(--text-muted);
}
.entry-content .iframe-wrap {
	position: relative;
	height: 0;
	padding-bottom: 56.25%;
}
.entry-content .iframe-wrap iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.entry-content .protected_form {
	display: block;
	width: 100%;
	padding: 98px 0 120px;
	text-align: center;
}
.entry-content .protected_form h2 {
	margin: 0 0 8px;
	font-weight: 600;
	font-size: 1.625em;
	line-height: 2.125rem;
	color: var(--text-primary);
}
.entry-content .protected_form p {
	margin-bottom: 34px;
	font-weight: 300;
	font-size: 1em;
	line-height: 1.75;
	color: var(--text-muted);
}
.entry-content .protected_form input {
	width: 183px;
	padding: 0 23px;
	border: 1px solid var(--border-color);
	font-size: 0.9125em;
	line-height: 2.125rem;
	background-color: var(--bg-tertiary);
	color: var(--text-primary);
}
.entry-content .protected_form input:focus {
	border-color: var(--accent-color);
}
.entry-content .protected_form .btn {
	margin-left: 5px;
}

/* Comment */
.comments {
	margin-bottom: 60px;
}
.comments h2 {
	margin-bottom: 15px;
	font-weight: 600;
	font-size: 1em;
	color: var(--text-primary);
}
.comments h2 .count{
	margin-left: 4px;
	color: var(--accent-color);
}
.comment-list {
	margin-bottom: 60px;
	border-top: 1px solid var(--border-color);
}
.comment-list ul li {
	display: inline-block;
	width: 100%;
	padding: 32px 0 28px;
	border-bottom: 1px solid var(--border-color);
	vertical-align: top;
	box-sizing: border-box;
}
.comment-list .tt_more_preview_comments_wrap {
	padding: 0;
	border: 0;
}
.comment-list .tt_more_preview_comments_text {
	display: block;
	margin: -1px 0 0;
	padding: 12px 0 11px;
	border: 1px solid var(--border-color);
	text-align: center;
	font-size: 0.875em;
	color: var(--text-muted);
}
.comment-list .tt_more_preview_comments_text:hover {
	text-decoration: underline;
}
.comment-list ul li .author-meta {
	position: relative;
	margin-bottom: 7px;
	padding: 2px 0 0 60px;
	font-size: 0.8125em;
	color: var(--text-muted);
}
.comment-list ul li .author-meta a {
	color: var(--text-muted);
}
.comment-list ul li .author-meta a:before,
.comment-list ul li .author-meta span:before {
	content: "";
	display: inline-block;
	width: 2px;
	height: 2px;
	margin: 0 7px 0 5px;
	background-color: var(--border-light);
	vertical-align: middle;
}
.comment-list ul li .author-meta .nickname {
	font-weight: 700;
	color: var(--text-primary);
}
.comment-list ul li .author-meta .nickname a {
	color: var(--text-primary);
}
.comment-list ul li .author-meta .avatar {
	float: left;
	width: 46px;
	margin: -2px 0 0 -60px;
	border: 1px solid var(--border-color);
	border-radius: 50%;
}
.comment-list ul li .author-meta .control {
	position: absolute;
	top: 0;
	right: -9px;
	border-bottom: 0;
}
.comment-list ul li .author-meta .control button {
	content: "";
	display: block;
	width: 20px;
	height: 20px;
	background: url(./images/ico_package.png) no-repeat -141px 5px;
	filter: invert(1);
	text-indent: -999em;
}
.comment-list ul li .author-meta .control .link {
	display: none;
	position: absolute;
	top: 100%;
	left: -65px;
	width: 70px;
	text-align: center;
}
.comment-list ul li .author-meta .control .link a {
	display: block;
	margin-top: -1px;
	border: 1px solid var(--border-color);
	background-color: var(--bg-secondary);
	text-decoration: none;
	font-size: 0.875em;
	line-height: 1.5rem;
	color: var(--text-primary);
}
.comment-list ul li .author-meta .control .link a:focus,
.comment-list ul li .author-meta .control .link a:hover {
	background-color: var(--bg-hover);
	color: var(--accent-color);
}
.comment-list ul li .author-meta .nickname:before,
.comment-list ul li .author-meta .nickname a:before,
.comment-list ul li .author-meta .control:before,
.comment-list ul li .author-meta .control a:before {
	content: none;
}
.comment-list ul li p {
	max-width: 85%;
	padding: 0 0 0 60px;
	font-size: 0.875em;
	line-height: 1.3125rem;
	color: var(--text-secondary);
	box-sizing: border-box;
}
.comment-list ul li .reply {
	display: inline-block;
	margin-top: 10px;
	font-size: 0.8125rem;
	color: var(--text-muted);
}
.comment-list ul li ul {
	margin: 28px 0 -32px 0;
	padding: 26px 0 21px;
	border-top: 1px solid var(--border-color);
	background-color: var(--bg-secondary);
}
.comment-list ul li ul li {
	padding: 14px 0 15px 60px;
	border-bottom: 0;
}
.comment-list ul li ul li .author-meta {
	margin-bottom: 8px;
}
.comment-list ul li ul li .author-meta .control {
	right: 15px;
}
.comment-list ul li ul li .author-meta .avatar {
	width: 42px;
}
.comment-list ul li ul li p {
	max-width: 80%;
}
.comment-list ul li ul .tt_more_preview_comments_wrap {
	display: block;
}
.comment-list ul li ul .tt_more_preview_comments_text {
	margin-bottom: 16px;
	border-top: 0;
	border-left: 0;
	border-right: 0;
}
.comment-list ul li ul .tt_more_preview_comments_text:first-child {
	margin-top: -24px;
	padding: 12px 0 11px;
}

.comment-form {
	position: relative;
	margin-bottom: 60px;
}
.comment-form .field {
	overflow: hidden;
	margin-bottom: -1px;
	border: 1px solid var(--border-color);
}
.comment-form .field input[type=text],
.comment-form .field input[type=password] {
	float: left;
	width: 50%;
	padding: 12px 16px;
	border: 0;
	border-left: 1px solid var(--border-color);
	font-size: 0.875em;
	color: var(--text-secondary);
	background-color: var(--bg-tertiary);
	box-sizing: border-box;
}
.comment-form .field input:first-child {
	border-left: 0;
}
.comment-form textarea {
	display: block;
	width: 100%;
	margin-bottom: 20px;
	padding: 16px 100px 16px 16px;
	border: 1px solid var(--border-color);
	font-size: 0.875em;
	color: var(--text-secondary);
	background-color: var(--bg-tertiary);
	box-sizing: border-box;
	resize: none;
}
.comment-form input::-webkit-input-placeholder,
.comment-form textarea::-webkit-input-placeholder {
	color: var(--text-muted);
}
.comment-form .secret {
	position: absolute;
	left: 0;
	bottom: 8px;
}
.comment-form .secret input {
	display: none;
}
.comment-form .secret label {
	display: inline-block;
	font-size: 0.8125em;
	line-height: 1.25rem;
	color: var(--text-secondary);
	outline: none;
	cursor: pointer;
}
.comment-form .secret label:before {
	content: "";
	display: inline-block;
	width: 19px;
	height: 18px;
	margin-right: 12px;
	border: 1px solid var(--border-color);
	vertical-align: top;
	background-color: var(--bg-tertiary);
}
.comment-form .secret input[type=checkbox]:checked+label:before {
	background: url(./images/ico_package.png) no-repeat -47px 4px;
	filter: invert(1);
}
.comment-form .submit {
	text-align: right;
}
.comment-form .submit button {
	background-color: var(--accent-color);
	color: #fff;
}
.comment-form .submit button:hover,
.comment-form .submit button:focus {
	background-color: var(--accent-hover);
}

/* Aside(sidebar) */
.sidebar h2 {
	margin-bottom: 7px;
	font-weight: 500;
	font-size: 0.875em;
	color: var(--text-primary);
}
.sidebar ul li {
	padding: 4px 0 5px;
	font-size: 0.8125em;
	line-height: 1.25rem;
	color: var(--text-secondary);
}
.sidebar ul li a {
	color: var(--text-secondary);
}
.sidebar ul li a:hover {
	color: var(--accent-color);
}
.sidebar .sidebar-2 {
	margin-top: 38px;
	padding-top: 46px;
	border-top: 1px solid var(--border-color);
}

.sidebar .category {
	margin-bottom: 36px;
}
.sidebar .category ul li {
	padding: 0;
	font-size: 0.875em;
	font-weight: 600;
}
.sidebar .category ul li a {
	color: var(--text-primary);
}
.sidebar .category ul li a:hover {
	color: var(--accent-color);
}
.sidebar .category ul li ul {
	padding-top: 8px;
}
.sidebar .category ul li ul li {
	padding: 6px 0 7px;
	font-weight: 400;
	font-size: 1em;
}
.sidebar .category ul li ul li ul {
	overflow: hidden;
	margin-bottom: -4px;
	padding-top: 6px;
}
.sidebar .category ul li ul li ul li {
	position: relative;
	padding: 3px 0 3px 9px;
	font-size: 0.8125rem;
}
.sidebar .category ul li ul li ul li:before {
	content: "";
	position: absolute;
	bottom: 7px;
	left: 0;
	width: 2px;
	height: 100%;
	background-color: var(--border-color);
}
.sidebar .category ul li ul li ul li:first-child:before {
	top: 7px;
	bottom: auto;
}
.sidebar .category ul li ul li ul li a {
	color: var(--text-muted);
}
.sidebar .notice {
	margin-bottom: 37px;
}
.sidebar .recent-comment {
	margin-bottom: 36px;
}
.sidebar .recent-comment ul li a {
	display: block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.sidebar .post-list {
	margin-bottom: 46px;
}
.sidebar .post-list h2 {
	margin-bottom: 12px;
}
.sidebar .post-list ul li {
	overflow: hidden;
	margin-bottom: 18px;
	padding: 0;
}
.sidebar .post-list ul li img {
	float: right;
	width: 58px;
	height: 58px;
	margin: 2px 0 0 20px;
}
.sidebar .post-list ul li a {
	display: block;
	overflow: hidden;
	text-decoration: none;
}
.sidebar .post-list ul li a:hover .title {
	text-decoration: underline;
	color: var(--accent-color);
}
.sidebar .post-list ul li .title {
	display: block;
	display: -webkit-box;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-line-clamp: 6;
	-webkit-box-orient: vertical;
	color: var(--text-primary);
}
.sidebar .post-list ul li .date {
	display: block;
	margin-top: 6px;
	font-size: 0.75rem;
	line-height: 1;
	color: var(--text-muted);
}
.sidebar .social-list {
	margin-bottom: 46px;
}
.sidebar .social-list h2 {
	margin-bottom: 18px;
}
.sidebar .social-list .tab-list {
	overflow: hidden;
	width: 100%;
}
.sidebar .social-list ul li {
	margin-bottom: 15px;
	padding: 0 0 0 48px;
}
.sidebar .social-list ul li a {
	display: block;
	text-decoration: none;
}
.sidebar .social-list ul li a:hover .text {
	text-decoration: underline;
}
.sidebar .social-list ul li .avatar {
	float: left;
	overflow: hidden;
	width: 40px;
	height: 40px;
	margin-left: -48px;
	border-radius: 50%;
}
.sidebar .social-list ul li .title {
	display: block;
	color: var(--text-primary);
}
.sidebar .social-list ul li .date {
	display: block;
	margin-top: 6px;
	font-size: 0.75rem;
	color: var(--text-secondary);
}
#aside .tags {
	margin: 0 0 41px;
	padding: 0;
	font-size: 1em;
}
#aside .tags h2 {
	margin-bottom: 8px;
	font-size: 0.875em;
}
#aside .tags a {
	float: none;
	margin: 0 4px 0 0;
	padding: 0;
	border: 0;
	font-size: 0.8125em;
	line-height: 2;
	color: var(--text-primary);
	background-color: transparent;
}
#aside .tags a:after {
	content: ", ";
}
#aside .tags a:last-child:after {
	content: none;
}
#aside .tags a:hover,
#aside .tags a:focus {
	color: var(--accent-color);
}
.sidebar .count {
	margin-bottom: 46px;
}
.sidebar .count h2 {
	margin-bottom: 3px;
}
.sidebar .count h2:before {
	content: "";
	display: block;
	width: 17px;
	height: 1px;
	margin-bottom: 18px;
	background-color: var(--text-primary);
}
.sidebar .count p {
	margin-bottom: 6px;
	font-size: 0.8125em;
	color: var(--text-secondary);
}
.sidebar .count .total {
	margin-bottom: 12px;
	font-weight: 700;
	font-size: 1.875em;
	color: var(--text-primary);
}
.sidebar .social-channel {
	margin-bottom: 48px;
}
.sidebar .social-channel ul {
	overflow: hidden;
	width: 100%;
}
.sidebar .social-channel ul li {
	float: left;
	margin-left: 10px;
	padding: 0;
}
.sidebar .social-channel ul li:first-child {
	margin-left: 0;
}
.sidebar .social-channel ul li a {
	display: block;
	width: 34px;
	height: 34px;
	border: 1px solid var(--border-color);
	border-radius: 50%;
	text-indent: -999em;
	background: url(./images/ico_package.png) no-repeat 0 -100px;
	filter: invert(1);
}
.sidebar .social-channel ul li.youtube a {
	background-position-x: -50px;
}
.sidebar .social-channel ul li.instagram a {
	background-position-x: -100px;
}
.sidebar .social-channel ul li.twitter a {
	background-position-x: -150px;
}
.sidebar .social-channel ul li a:focus,
.sidebar .social-channel ul li a:hover {
	background-color: var(--accent-color);
	background-position-y: -150px;
	filter: none;
}
.sidebar .tab-ui h2 a {
	color: var(--text-muted);
}
.sidebar .tab-ui h2 a.current {
	color: var(--text-primary);
}
.sidebar .tab-ui h2 a:before {
	content: "";
	display: inline-block;
	width: 1px;
	height: 5px;
	margin: 0 10px;
	vertical-align: middle;
	background: url(./images/ico_package.png) no-repeat -100px -50px;
	filter: invert(1);
}
.sidebar .tab-ui h2 a:first-child:before {
	content: none;
}

/* ETC */
#dimmed {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 300;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.7);
}

.mobile-menu {
	overflow: hidden;
	height: 100%;
}

.slide-wrap {
	overflow: hidden;
}

/* Overwrite */
#content .another_category {
	margin: 60px 0 57px !important;
	padding: 16px 20px 14px;
	background-color: var(--bg-secondary);
}
#content .another_category h4 {
	margin: 0 0 13px !important;;
	padding: 0 !important;
	border-bottom: 0 !important;
	font-size: 0.875em !important;
	color: var(--text-primary);
}
#content .another_category table {
	margin: 0 !important;
	border: 0;
}
#content .another_category th {
	padding: 2px 0 !important;
	font-size: 0.875rem !important;
	color: var(--text-primary);
}
#content .another_category th a.current {
	text-decoration: underline !important;
	font-weight: 400;
	color: var(--accent-color) !important;
	border: 0 !important;
}
#content .another_category td {
	padding: 2px 0 !important;
	border: 0;
	font-size: 0.75rem !important;
	color: var(--text-muted);
}

.container_postbtn {
	margin: 53px 0 55px;
	padding: 0 !important;
}

.absent_post:before {
	content: "죄송합니다만 \A글을 찾지 못했습니다.";
	display: block;
	margin-bottom: 7px;
	font-weight: bold;
	font-size: 1.75em;
	line-height: 1.285714285714286;
	color: var(--text-primary);
	white-space: pre;
}
.absent_post {
	padding: 98px 0 !important;
	background: none !important;
	font-weight: normal !important;
	font-size: 1em !important;
	line-height: 1.75;
	color: var(--text-muted) !important;
}

/* Option(Color Type & List Type) */
.layout-aside-left #content {
	float: right;
}
.layout-aside-left #aside {
	float: left;
	margin-left: 0;
	padding: 80px 0;
}
.layout-aside-left #container .content-wrap:before {
	margin-left: -256px;
}

.list-type-vertical .post-item {
	margin-bottom: 38px;
}
.list-type-vertical .post-item .thum {
	margin-bottom: 3px;
	padding-bottom: 100%;
}
.list-type-vertical .post-item .thum img {
	transform: translateY(0);
	-webkit-transform: translateY(0);
	-ms-transform: translateY(0);
}
.list-type-vertical .post-item .title {
	margin-bottom: 5px;
}
.list-type-vertical .post-item .excerpt,
.list-type-vertical .post-item .meta .comment {
	display: none;
}
.list-type-vertical .post-item .meta span:before {
	content: none;
}

.list-type-thumbnail .post-header {
	margin-bottom: 28px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--border-color);
}
.list-type-thumbnail .post-header h1 {
	margin-bottom: 0;
}
.list-type-thumbnail .post-item {
	float: none;
	overflow: hidden;
	width: 100%;
	margin: 0 0 28px;
}
.list-type-thumbnail .post-item .thum {
	display: inline;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
}
.list-type-thumbnail .post-item .thum img {
	float: right;
	width: 150px;
	height: auto;
	margin-left: 57px;
	border: 1px solid var(--border-color);
	transform: translateY(0);
	-webkit-transform: translateY(0);
	-ms-transform: translateY(0);
}
.list-type-thumbnail .post-item.protected .thum {
	float: right;
	width: 126px;
	height: 166px;
	margin-left: 57px;
	border: 1px solid var(--border-color);
	background-color: var(--bg-tertiary);
}
.list-type-thumbnail .post-item .title {
	max-width: 95%;
	margin-bottom: 12px;
	padding-top: 7px;
	font-size: 1.25em;
}
.list-type-thumbnail .post-item .excerpt {
	overflow: hidden;
	height: 3.8rem;
	margin-bottom: 20px;
	font-size: 0.875em;
	line-height: 1.25rem;
}
.list-type-thumbnail .post-item .meta .comment {
	display: none;
}
.list-type-thumbnail .post-item .meta span:before {
	content: none;
}

.list-type-text .post-header {
	margin-bottom: 38px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--border-color);
}
.list-type-text .post-header h1 {
	margin-bottom: 0;
}
.list-type-text .post-item {
	float: none;
	overflow: hidden;
	width: 100%;
	margin: 0 0 35px;
}
.list-type-text .post-item .thum {
	display: none;
}
.list-type-text .post-item .title {
	max-width: 96%;
	margin-bottom: 10px;
	padding-top: 0;
	font-size: 1em;
}
.list-type-text .post-item .excerpt {
	max-width: 96%;
	margin-bottom: 20px;
	font-size: 0.875em;
	line-height: 1.25rem;
}
.list-type-text .post-item .meta .comment {
	display: none;
}
.list-type-text .post-item .meta span:before {
	content: none;
}
.list-type-text .pagination {
	margin-top: 36px;
}

/* Retina Display */
@media  only screen and (-webkit-min-device-pixel-ratio:1.5) {
	#header .util .search:before,
	#header .util .search button,
	#footer .page-top,
	.cover-thumbnail-3 button,
	.cover-thumbnail-4 button,
	.page-nav a strong:after,
	.entry-content .protected_form h2:before,
	.comment-list ul li .author-meta .control button,
	.comment-form .secret input[type=checkbox]:checked+label:before,
	.sidebar .social-channel ul li a,
	.sidebar .tab-ui h2 a:before {
		background-image: url(./images/ico_package_2x.png);
		background-size: 200px auto;
	}
	.post-item.protected .thum:before {
		background-image: url(./images/ico_package_2x.png);
		background-size: 120px auto;
	}
}

/* Media Screen */
@media screen and (max-width:1080px) {
	#header h1,
	#footer {
		padding-left: 24px;
		padding-right: 24px;
	}
	#header .util {
		right: 24px;
	}
	#header .util .profile nav {
		left: auto;
		right: 0;
		margin: 0;
	}
	#gnb ul {
		margin-left: -6px;
	}
	#container .content-wrap:before {
		left: 72.7%;
		margin-left: 0;
	}
	.layout-aside-left #container .content-wrap:before {
		left: 27.3%;
		margin-left: 0;
	}
	.main-slider .paging {
		left: auto;
		right: 20px;
		margin-left: 0;
	}
	.cover-event ul li .title {
		-webkit-line-clamp: 1;
	}
	.post-cover {
		padding-left: 24px;
		padding-right: 24px;
	}
}

@media screen and (max-width:767px) {
	#header h1 {
		position: relative;
		z-index: 10;
		padding: 24px;
		background-color: var(--bg-secondary);
	}
	#header .util {
		top: 0;
		right: 0;
		width: 100%;
		padding: 24px 68px 24px 24px;
		box-sizing: border-box;
	}
	#header .util .search {
		float: right;
	}
	#header .util .search.on {
		z-index: 20;
		width: 100%;
	}
	#header .util .search.on input {
		float: right;
		width: 100%;
	}

	#header .util .profile {
		display: none;
	}
	#header .util .menu {
		position: absolute;
		top: 24px;
		right: 24px;
		z-index: 300;
		display: inline-block;
		width: 30px;
		height: 30px;
		border: 1px solid var(--border-color);
		border-radius: 50%;
		text-indent: -999em;
		outline: none;
	}
	#header .util .menu span,
	#header .util .menu:before,
	#header .util .menu:after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 16px;
		height: 1px;
		margin: 0 0 0 -8px;
		background-color: var(--text-secondary);
		transition: transform .5s;
		-webkit-transition: transform .5s;
	}
	#header .util .menu:before {
		margin-top: -6px;
	}
	#header .util .menu:after {
		margin-top: 6px;
	}

	#gnb {
		height: 69px;
	}
	#gnb ul {
		margin-left: 0;
	}
	#gnb ul li {
		padding: 0 24px;
	}
	#gnb ul li a {
		padding: 25px 0 24px;
	}

	#container .content-wrap {
		padding: 0;
	}
	#container .content-wrap:before {
		content: none;
	}
	#content {
		float: none;
		width: auto;
		padding: 34px 24px 40px;
	}

	#aside {
		position: fixed;
		top: 0;
		right: -278px;
		z-index: 400;
		float: none;
		overflow: auto;
		width: 278px;
		height: 100%;
		padding: 94px 24px 40px;
		background-color: var(--bg-secondary);
		box-sizing: border-box;
		transition: left .5s;
		-webkit-transition: right .5s;
	}
	#aside .close {
		position: absolute;
		top: 24px;
		right: 24px;
		z-index: 300;
		display: inline-block;
		width: 30px;
		height: 30px;
		border: 1px solid var(--border-color);
		border-radius: 50%;
		text-indent: -999em;
		outline: none;
	}
	#aside .close span {display: none;}
	#aside .close:before,
	#aside .close:after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 16px;
		height: 1px;
		margin: 0 0 0 -8px;
		background-color: var(--text-secondary);
	}
	#aside .close:before {
		transform: rotate(-45deg);
	}
	#aside .close:after {
		transform: rotate(45deg);
	}

	#aside .profile {
		display: block;
		position: relative;
		margin-bottom: -40px;
	}
	#aside .profile:before {
		content: "";
		position: absolute;
		top: 0;
		left: -24px;
		z-index: 0;
		width: 100%;
		height: 100%;
		padding: 0 24px;
		background-color: var(--bg-tertiary);
	}
	#aside .profile ul {
		position: relative;
		z-index: 10;
		text-align: center;
	}
	#aside .profile ul li {
		display: inline-block;
		padding: 16px 0 18px;
		font-size: 0.875em;
		color: var(--text-primary);
		vertical-align: middle;
	}
	#aside .profile ul li a {
		display: inline-block;
		vertical-align: middle;
	}
	#aside .profile ul li:before {
		content: "";
		display: inline-block;
		width: 1px;
		height: 7px;
		margin: 0 20px 0 16px;
		background: url(./images/ico_package_2x.png) -100px -50px;
		background-size: 200px auto;
		filter: invert(1);
		vertical-align: middle;
	}
	#aside .profile ul li:first-child:before {
		content: none;
	}

	#footer {
		padding: 32px 24px 26px;
	}
	#footer p {
		margin-bottom: 11px;
		font-size: 0.8125em;
	}
	#footer .order-menu {
		margin-bottom: 29px;
	}
	#footer .order-menu a {
		display: block;
		margin-bottom: 0;
		line-height: 1.75rem;
	}
	#footer .order-menu a:before {
		content: none;
	}

	#tt-body-index #content {
		padding: 0;
	}
	#tt-body-index #content>.inner {
		padding: 0 24px;
	}
	#tt-body-index #content>.inner:first-child {
		padding-top: 40px;
	}
	#tt-body-index.list-type-text #content>.inner:first-child {
		padding-top: 36px;
	}
	#tt-body-index .pagination {
		margin: 0 20px 40px;
	}
	#tt-body-page #content {
		padding-left: 0;
		padding-right: 0;
	}
	#tt-body-tag .tags,
	#tt-body-guestbook #content {
		padding-left: 0;
		padding-right: 0;
	}
	#tt-body-guestbook .post-header {
		margin: 0 24px 28px;
	}

	.layout-aside-left #aside {
		padding: 80px 20px 40px;
	}
	.mobile-menu #aside {
		right: 0;
	}

	.main-slider ul li {
		height: 400px;
	}
	.main-slider ul li .inner {
		padding-bottom: 40px;
		vertical-align: bottom;
	}
	.main-slider ul li .text {
		max-width: 100%;
		font-weight: 300;
		font-size: 1.75em;
		line-height: 2.25rem;
		-webkit-line-clamp: 3;
	}
	.main-slider ul li .btn {
		margin-top: 15px;
	}
	.main-slider .paging {
		top: 40px;
		left: 0;
		right: auto;
		bottom: 20px;
		width: 100%;
		height: 8px;
		padding: 0 19px;
		text-align: left;
		box-sizing: border-box;
	}
	.main-slider .paging button {
		display: inline-block;
		margin: 0 5px;
		vertical-align: top;
	}

	.cover-thumbnail-1 {
		margin-bottom: 40px;
		padding: 36px 24px 7px;
		border-top: 8px solid var(--bg-tertiary);
	}
	.cover-thumbnail-1 h2 {
		font-weight: 600;
	}
	.cover-thumbnail-1 .more {
		top: 40px;
		right: 24px;
	}
	.cover-thumbnail-1 ul {
		display: block;
		width: 100%;
		margin-left: 0;
		margin-bottom: -39px;
	}
	.cover-thumbnail-1 ul li {
		float: none;
		width: 100%;
		margin-bottom: 30px;
		padding-left: 0;
	}
	.cover-thumbnail-1 ul li .title {
		margin-bottom: 4px;
	}

	.cover-thumbnail-2 {
		width: auto;
		margin: 0;
		padding: 37px 24px 38px;
		border-top: 8px solid var(--bg-tertiary);
	}
	.cover-thumbnail-2 h2 {
		font-weight: 600;
	}
	.cover-thumbnail-2 ul li figure {
		width: 98px;
		margin-left: 24px;
	}
	.cover-thumbnail-2 ul li .title {
		margin-bottom: 7px;
		padding-top: 3px;
		font-size: 1.125em;
	}
	.cover-thumbnail-2 ul li .excerpt {
		margin-bottom: 9px;
	}

	.cover-thumbnail-3 {
		width: auto;
		margin: 0;
		padding: 37px 24px 15px;
		border-top: 8px solid var(--bg-tertiary);
	}
	.cover-thumbnail-3 h2 {
		font-weight: 600;
	}
	.cover-thumbnail-3 .prev {
		top: 37px;
		right: 54px;
	}
	.cover-thumbnail-3 .next {
		top: 37px;
		right: 24px;
	}
	.cover-thumbnail-3 ul {
		display: block;
		width: auto;
		margin-left: -16px;
	}
	.cover-thumbnail-3 ul li {
		width: 50%;
		padding-left: 16px;
		box-sizing: border-box;
	}

	.cover-thumbnail-4 {
		width: auto;
		margin: 0;
		padding: 37px 24px 9px;
		border-top: 8px solid var(--bg-tertiary);
	}
	.cover-thumbnail-4 h2 {
		font-weight: 600;
		color: var(--text-primary);
	}
	.cover-thumbnail-4 .prev {
		top: 37px;
		right: 54px;
	}
	.cover-thumbnail-4 .next {
		top: 37px;
		right: 24px;
	}
	.cover-thumbnail-4 ul {
		width: 100%;
		margin-left: 0;
	}
	.cover-thumbnail-4 ul li {
		width: 100%;
		margin-bottom: 27px;
		padding-left: 0;
	}
	.cover-thumbnail-4 ul li figure {
		margin-bottom: 7px;
		background-color: var(--bg-tertiary);
	}
	.cover-thumbnail-4 ul li .title {
		margin-bottom: 8px;
		color: var(--text-primary);
	}
	.cover-thumbnail-4 ul li .excerpt {
		margin-bottom: 12px;
		color: var(--text-muted);
	}

	.cover-list {
		width: auto;
		margin: 0;
		padding: 37px 24px 12px;
		border-top: 8px solid var(--bg-tertiary);
	}
	.cover-list h2 {
		margin-bottom: 28px;
		font-weight: 600;
		color: var(--text-primary);
	}
	.cover-list .more {
		top: 37px;
		right: 24px;
		color: var(--text-muted);
	}
	.cover-list ul li {
		margin-bottom: 26px;
	}
	.cover-list ul li .title {
		margin-bottom: 8px;
		font-size: 1em;
		color: var(--text-primary);
	}
	.cover-list ul li .excerpt {
		margin-bottom: 9px;
		-webkit-line-clamp: 4;
		color: var(--text-muted);
	}

	.cover-event {
		width: auto;
		margin: 0;
		padding: 37px 24px 24px;
		border-top: 8px solid var(--bg-tertiary);
	}
	.cover-event h2 {
		font-weight: 600;
		color: var(--text-primary);
	}
	.cover-event ul {
		display: block;
		width: auto;
		margin-left: 0;
	}
	.cover-event ul li {
		float: none;
		width: auto;
		margin-bottom: 16px;
		padding-left: 0;
	}
	.cover-event ul li a {
		padding-bottom: 43.382352941176471%;
		border-color: var(--border-color);
		background-color: var(--bg-tertiary);
		color: var(--text-primary);
	}
	.cover-event ul li .title {
		-webkit-line-clamp: 3;
		color: #fff;
	}
	.cover-event ul li .more {
		display: none;
	}

	.cover-thumbnail-1:first-child {
		border-top: 0;
	}

	.post-header {
		padding-top: 2px;
	}
	.post-item {
		float: none;
		width: auto;
		margin-left: 0;
		margin-bottom: 30px;
	}
	.post-item .thum {
		margin-bottom: 7px;
		background-color: var(--bg-tertiary);
	}
	.post-item .title {
		margin-bottom: 12px;
		color: var(--text-primary);
	}
	.post-item .excerpt {
		margin-bottom: 12px;
		color: var(--text-muted);
	}

	.pagination {
		margin-bottom: 0;
	}
	.pagination a {
		margin: 0 5px;
		color: var(--text-muted);
	}

	.list-type-vertical .post-item {
		margin-bottom: 30px;
	}
	.list-type-vertical .post-item .title {
		margin-bottom: 7px;
	}

	.list-type-thumbnail .post-item .thum img {
		width: 96px;
		margin-left: 25px;
		border-color: var(--border-color);
	}
	.list-type-thumbnail .post-item .title {
		margin-bottom: 9px;
		padding-top: 3px;
		font-size: 1.125em;
	}
	.list-type-thumbnail .post-item .excerpt {
		margin-bottom: 11px;
	}
	.list-type-thumbnail .post-item.protected .thum {
		width: 96px;
		height: 128px;
		margin-left: 25px;
		border-color: var(--border-color);
		background-color: var(--bg-tertiary);
	}

	.list-type-text .post-header {
		margin-bottom: 28px;
	}
	.list-type-text .post-item {
		margin-bottom: 26px;
	}
	.list-type-text .post-item .title {
		margin-bottom: 10px;
	}
	.list-type-text .post-item .excerpt {
		margin-bottom: 12px;
		-webkit-line-clamp: 4;
	}
	.list-type-text .pagination {
		margin-top: 30px;
	}

	.post-cover {
		padding-left: 24px;
		padding-right: 24px;
		background-color: var(--bg-tertiary);
	}
	.post-cover .inner {
		padding-bottom: 38px;
		vertical-align: bottom;
	}

	.post-cover .inner > h1 {
		display: -webkit-box;
		-webkit-line-clamp: 6;
		-webkit-box-orient: vertical;
		overflow: hidden;
		color: #fff;
	}

	.post-cover .category {
		margin-bottom: 13px;
		color: #fff;
	}
	.post-cover h1 {
		font-weight: 300;
	}
	.post-cover .meta {
		margin-top: 33px;
		font-size: 0.8125em;
		color: rgba(255,255,255,0.6);
	}

	.entry-content {
		padding: 0 24px;
	}
	.entry-content p {
		margin-bottom: 22px;
		line-height: 1.625rem;
		color: var(--text-primary);
	}
	.entry-content figure {
		margin-top: 6px !important;
	}
	.entry-content .protected_form input {
		width: 163px;
	}

	#content .another_category {
		margin: 40px 0 37px !important;
	}

	.container_postbtn {
		margin: 35px 0 37px;
	}

	.tags {
		margin-bottom: 25px;
		padding: 0 24px;
	}
	.tags h2 {
		margin-bottom: 19px;
	}

	.page-nav {
		margin: 32px 24px 32px;
		padding: 25px 0 25px;
		border-color: var(--border-color);
	}
	.page-nav a {
		line-height: 1.6875rem;
		color: var(--text-primary);
	}

	.related-articles {
		margin-bottom: 21px;
		padding: 0 24px;
	}
	.related-articles h2 {
		margin-bottom: 19px;
	}
	.related-articles ul {
		width: 103.571428571428571%;
		margin-left: -3.571428571428571%;
	}
	.related-articles ul li {
		width: 50%;
		margin-bottom: 15px;
		padding-left: 3.448275862068966%;
	}
	.related-articles ul li figure {
		margin-bottom: 9px;
		background-color: var(--bg-tertiary);
	}
	.related-articles ul li .title {
		height: 2.8em;
		white-space: normal;
		display: -webkit-box;
		-webkit-line-clamp: 6;
		-webkit-box-orient: vertical;
		color: var(--text-primary);
	}

	.comments {
		margin: 0;
	}
	.comments iframe {
		position: absolute;
		bottom: 0;
		left: 0;
	}
	.comments h2 {
		margin: -3px 0 -1px;
		padding: 0 24px;
		color: var(--text-primary);
	}
	.comment-list {
		margin-bottom: 32px;
		border: 0;
	}
	.comment-list>ul>.tt_more_preview_comments_wrap {
		margin-top: 21px;
		padding: 0 24px;
	}
	.comment-list ul li {
		padding: 34px 0 28px;
		border-color: var(--border-color);
	}
	.comment-list ul li .author-meta {
		margin-bottom: 6px;
		padding-right: 35px;
		color: var(--text-muted);
	}
	.comment-list ul li .author-meta .avatar {
		width: 30px;
		height: 30px;
		margin-left: -42px;
		border-color: var(--border-color);
	}
	.comment-list ul li .author-meta .nickname {
		font-weight: 400;
		color: var(--text-primary);
	}
	.comment-list ul li .author-meta .control {
		top: -2px;
		right: 13px;
	}
	.comment-list ul li .author-meta,
	.comment-list ul li p {
		max-width: none;
		padding: 0 66px;
		color: var(--text-secondary);
	}
	.comment-list ul li ul {
		margin-top: 27px;
		padding: 19px 0 12px;
		background-color: var(--bg-secondary);
		border-color: var(--border-color);
	}
	.comment-list ul li ul li {
		padding: 15px 0 16px;
	}
	.comment-list ul li ul li p {
		max-width: none;
	}
	.comment-list ul li ul li .author-meta {
		margin-bottom: 6px;
	}
	.comment-list ul li ul li .author-meta .avatar {
		width: 30px;
	}
	.comment-form {
		margin-bottom: 40px;
		padding: 0 24px;
	}
	.comment-form textarea {
		padding-right: 32px;
		background-color: var(--bg-tertiary);
		color: var(--text-primary);
		border-color: var(--border-color);
	}
	.comment-form .secret {
		left: 24px;
	}
	.comment-form .secret label {
		color: var(--text-secondary);
	}

	.layout-aside-left #content {
		float: none;
	}

	#tt-body-index.promotion-mobile-hide .main-slider {
		display: none;
	}

	#content .another_category th {
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 6;
		-webkit-box-orient: vertical;
	}
}

@media screen and (max-width: 767px){
	#tt-body-index .post-header {
		padding-top: 36px;
		padding-left: 24px;
	}
}

.revenue_unit_wrap.position_list{
	max-width: 740px;
	margin: 30px auto
}
.markdown-body { 
	box-sizing: border-box; 
	min-width: 200px; 
	max-width: 980px; 
	margin: 0 auto; 
	padding: 45px;
	color: var(--text-primary);
	background-color: var(--bg-primary); 
} 

@media (max-width: 767px) { 
	.markdown-body { 
		padding: 15px;
	} 
}

/* 목차 스타일 (다크모드 적용) */
.book-toc {
    position: relative;
    width: fit-content;
    border: 1px solid #b0d197; /* 특정 색상은 유지하되 필요시 변경 */
    padding: 10px 20px 10px 15px;
    z-index: 1;
    background-color: var(--bg-secondary);
}
.book-toc:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #b0d197;
    z-index: -1;
    opacity: 0.1;
}
.book-toc p {
    font-weight: bold;
    font-size: 1.2em !important;
    color: #396120; /* 가독성을 위해 원본 유지 혹은 밝은 녹색으로 조정 고려 */
}
#toc * {
    font-size: 20px;
    color: var(--text-primary) !important;
}
#toc {
    margin-bottom: 0;
}
#toc a:hover {
    color: var(--accent-color);
}
#toc ul {
    margin-top: 5px;
    margin-bottom: 0px;
}
#toc > li {
    padding-left: 0;
    text-indent: 0;
    list-style-type: disc;
    margin-bottom: 10px;
}
#toc > li > a {
    text-decoration:none;
}
#toc > li > ul {
    padding-left: 20px;
    margin-top: 0;
    margin-bottom: 0;
}
#toc > li > ul > li {
    font-size: 0.87em;
    padding-left: 0;
    text-indent: 0;
    list-style-type: disc;
    margin-bottom: 0;
    margin-top: 5px;
}
#toc > li > ul > li > a {
    font-size: 1em;
    text-decoration:none;
}
#toc > li > ul > li > ul {
    padding-left: 10px;
    margin-top: 0;
    margin-bottom: 0;
}
#toc > li > ul > li > ul > li {
    font-size: 0.87em;
    padding-left: 0;
    text-indent: 0;
    list-style-type: disc;
    margin-bottom: 0;
    margin-top: 3px;
}
#toc > li > ul > li > ul > li > a {
    font-size: 0.875em;
    text-decoration:none;
}

/* 글 제목1,2,3 스타일 */
.tt_article_useless_p_margin h2 {
	text-align: left;
	border-left: #517135 12px solid;
	border-bottom: 1px solid #517135;
	padding: 3px 0 10px 10px;
	margin: 30px 0 20px 0;
    color: var(--text-primary);
}
.tt_article_useless_p_margin h3 {
	text-align: left;
	border-left: #548a25 8px solid;
	border-bottom: 1px solid #548a25;
	padding: 3px 0 10px 10px;
	margin-bottom: 15px;
    color: var(--text-primary);
}
.tt_article_useless_p_margin h4 {
	text-align: left;
	border-left: #71b932 6px solid;
	border-bottom: 1px solid #71b932;
	padding: 3px 0 10px 10px;
	margin-bottom: 15px;
    color: var(--text-primary);
}
.floating-toc {
    position: absolute;
    cursor: pointer;
    border: 1px solid #b0d197;
    background: var(--bg-secondary);
    padding: 10px;
    z-index: 999;
    line-height: 1.5em;
}
.floating-toc p {
    font-weight: bold;
    font-size: 1em !important;
    margin: 0;
    color: var(--text-primary);
}
.floating-toc #toc-body {
    margin-top: 10px;
}
.floating-toc #toc-body #toc * {
    font-size: 15px;
}
.floating-toc #toc > li > ul {
    margin-bottom: 5px;
}
.top-ads {
    text-align: center;
    margin-bottom: 10px;
}
.adsbygoogle.top-left {
    display: inline-block;
    width: 336px;
    height: 300px;
}
.adsbygoogle.top-right {
    display: inline-block;
    margin-left: 20px;
    width: 336px;
    height: 300px;
}
@media (max-width: 767px) {
    .adsbygoogle.top-right {
        display: block;
        height: 355px;
    }
}

/* 다크모드 버튼 스타일 */
.util .theme-btn {
    float: left;
    width: 32px;
    height: 32px;
    margin-left: 14px;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-size: 16px;
    text-align: center;
    line-height: 30px;
    cursor: pointer;
    transition: all 0.3s;
}
.util .theme-btn:hover {
    background-color: var(--bg-hover);
}

@media screen and (max-width: 767px) {
    /* 모바일에서는 메뉴 버튼 옆으로 위치 조정 */
    .util .theme-btn {
        position: absolute;
        top: 24px;
        right: 64px; /* 메뉴 버튼 왼쪽 */
        margin-left: 0;
        z-index: 300;
    }
}

/* --- 다크모드 추가 수정 (하단 하얀 박스 제거) --- */

/* 카테고리의 다른 글 & 작성자 정보 박스 */
#content .another_category,
.another_category,
.writer-info,
.box-author,
.tt-plugin-nif-info {
    background-color: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    border-radius: 4px; /* 모서리 둥글게 (선택사항) */
}

/* 박스 내부 텍스트 색상 강제 변경 */
#content .another_category h4,
#content .another_category th,
#content .another_category td,
#content .another_category a,
.writer-info *,
.box-author * {
    color: var(--text-primary) !important;
    background-color: transparent !important; /* 내부 요소 배경 투명화 */
}

/* 현재 글 표시 (Bold 처리 등) */
#content .another_category th a.current,
#content .another_category td a.current {
    color: var(--accent-color) !important;
    font-weight: bold;
}

/* 혹시 모를 테이블 테두리 정리 */
#content .another_category table,
#content .another_category th,
#content .another_category td {
    border-color: var(--border-color) !important;
}

/* --- 티스토리 시스템 네임카드 다크모드 수정 --- */

/* 1. 전체 박스 배경 및 테두리 */
.tt_box_namecard {
    background-color: var(--bg-secondary) !important; /* 배경을 어두운색으로 */
    border: 1px solid var(--border-color) !important; /* 테두리도 어둡게 */
    box-shadow: none !important; /* 그림자 제거 또는 변경 */
}

/* 2. 블로그 제목 (잔향) */
.tt_box_namecard .tt_tit_cont {
    color: var(--text-primary) !important; /* 글자색을 밝게 */
}

/* 3. 블로그 설명 (임상심리전문가의...) */
.tt_box_namecard .tt_desc {
    color: var(--text-secondary) !important; /* 설명글 색상 */
}

/* 4. 썸네일 이미지 테두리 (필요한 경우) */
.tt_box_namecard .tt_thumb_g {
    border: 1px solid var(--border-color) !important;
}

/* 5. 박스 내부의 모든 링크 강조 제거 */
.tt_box_namecard a {
    text-decoration: none !important;
}

/* --- 다크모드 글자색 정밀 조정 (이미지 스타일) --- */

/* 1. 포스트 상단 제목 (자바스크립트로 이미지에...) */
.post-cover h1 {
    color: #ffffff !important;
    font-weight: 700 !important;
    letter-spacing: -0.05em;
}

/* 2. 제목 아래 메타 정보 (작성일, 수정일, 읽는시간, 카테고리) */
.post-cover .meta, 
.post-cover .meta a, 
.post-cover .category {
    color: #b0b0b0 !important; /* 연한 회색 */
    font-size: 0.95em;
    opacity: 1 !important;
}

/* 3. 본문 소제목 (Intro 등) */
.entry-content h1, 
.entry-content h2, 
.entry-content h3 {
    color: #ffffff !important;
    border-bottom: 1px solid #444 !important; /* 아래쪽 구분선 */
    padding-bottom: 10px;
    margin-top: 40px;
    font-weight: 600;
}

/* 4. 본문 일반 글자 (이미지에 워터마크를...) */
.entry-content p {
    color: #d1d1d1 !important; /* 너무 하얗지 않은 부드러운 회백색 */
    line-height: 1.8; /* 가독성을 위한 줄간격 */
}

/* 5. 사이드바 카테고리 글자색 (우측 영역) */
.sidebar .category ul li a {
    color: #b0b0b0 !important;
}

.sidebar .category ul li a:hover {
    color: #ffffff !important; /* 마우스 올렸을 때 강조 */
}

/* 카테고리 옆의 숫자 (528, 160 등) */
.sidebar .category ul li .c_cnt, 
.sidebar .category ul li span {
    color: #666666 !important; /* 숫자는 조금 더 어둡게 */
    font-size: 0.8em;
}

/* 6. 제목과 본문 사이의 긴 구분선 */
.post-cover {
    border-bottom: 1px solid #444 !important;
}

/* --- 다크모드 글자색 최종 수정 --- */

/* 1. 본문 소제목 (Headings inside content) - #b8b8b8 */
/* 본문 안의 h1, h2, h3, h4만 더 밝은 회색으로 */
.entry-content h1, 
.entry-content h2, 
.entry-content h3, 
.entry-content h4 {
    color: #b8b8b8 !important;
}

/* 2. 글 메인 제목 & 본문 텍스트 & 기타 정보 - #999999 */
/* 포스트 메인 타이틀, 본문 문단, 사이드바, 날짜 등 모두 동일하게 */
.post-cover h1,             /* 포스트 메인 제목 */
.post-cover h1 a,           /* 메인 제목 링크 */
.entry-content p,           /* 본문 문단 */
.entry-content ul li,       /* 리스트 */
.entry-content ol li, 
.post-cover .meta,          /* 날짜, 작성자 등 */
.post-cover .category,      /* 카테고리 */
.sidebar h2,                /* 사이드바 제목 */
.sidebar ul li a,           /* 사이드바 링크 */
.post-header h1,            /* 목록 상단 제목 */
.comment-list p             /* 댓글 내용 */
{
    color: #999999 !important;
}

/* 3. 본문 내 소제목 구분선 (글자색에 맞춰서 살짝 조정) */
.entry-content h1, 
.entry-content h2, 
.entry-content h3 {
    border-bottom: 1px solid #333 !important;
}

/* 4. 카테고리 숫자 등 아주 부수적인 정보 (더 어둡게) */
.sidebar .category ul li .c_cnt, 
.sidebar .category ul li span {
    color: #555555 !important;
}
/* --- 메인 화면(목록/커버) 전용 글자색 조정 --- */

/* 1. 메인 화면 글 제목 (Index & Covers) - #808080 */
.post-item .title,
.cover-thumbnail-1 .title,
.cover-thumbnail-2 .title,
.cover-thumbnail-3 .title,
.cover-thumbnail-4 .title,
.cover-list .title,
.cover-event .title {
    color: #808080 !important;
    font-weight: 500 !important; /* 제목의 무게감 유지 */
}

/* 2. 메인 화면 본문 일부(프리뷰/요약) - #737373 */
.post-item .excerpt,
.cover-thumbnail-2 .excerpt,
.cover-thumbnail-4 .excerpt,
.cover-list .excerpt {
    color: #737373 !important;
}

/* 3. 메인 화면 날짜 및 댓글 수 (부차적인 정보는 더 어둡게 유지) */
.post-item .meta,
.cover-thumbnail-1 .date,
.cover-thumbnail-2 .meta,
.cover-list .date {
    color: #555555 !important;
}


/* --- 기존 설정 유지 (글 상세 페이지) --- */

/* 상세 페이지 메인 제목 & 본문 - #999999 */
.post-cover h1, 
.entry-content p {
    color: #999999 !important;
}

/* 상세 페이지 본문 소제목 - #b8b8b8 */
.entry-content h1, 
.entry-content h2, 
.entry-content h3, 
.entry-content h4 {
    color: #b8b8b8 !important;
}
/* --- [수정본] 헤더 및 상단 메뉴 (라이트/다크 모드 완벽 대응) --- */

/* 1. 헤더와 상단 메뉴 배경색 및 구분선 제거 */
#header, #gnb {
    background-color: var(--bg-primary) !important; 
    border-bottom: none !important; 
    box-shadow: none !important;
}

/* 2. 블로그 타이틀 (잔향) 텍스트 */
#header h1 {
    font-family: 'AppleSDGothicNeo', 'Noto Sans KR', sans-serif !important;
    font-size: 1.4em !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important; /* 변수 사용 */
    padding: 20px 0 !important;
}

/* 3. 검색창 언더라인 스타일 */
#header .util .search {
    width: 180px !important;
    background: transparent !important;
}

#header .util .search:before {
    display: none !important;
}

#header .util .search input {
    width: 100% !important;
    border: none !important;
    border-bottom: 1px solid var(--border-color) !important; /* 변수 사용 */
    background: transparent !important;
    color: var(--text-secondary) !important; /* 변수 사용 */
    padding: 5px 30px 5px 5px !important;
    border-radius: 0 !important;
}

#header .util .search button {
    right: 0 !important;
    top: 5px !important;
    filter: grayscale(1) opacity(0.5) !important; /* 아이콘 색상 자동 대응 */
    border: none !important;
    background-color: transparent !important;
}



/* 5. 콘텐츠 세로선 제거/흐리게 */
#container .content-wrap:before {
    background-color: var(--border-color) !important; /* 변수 사용 */
    width: 1px !important;
    opacity: 0.3;
}

/* 6. 전체 글 갯수 스타일 */
.post-header h1 {
    font-size: 0.9em !important;
    color: var(--text-muted) !important; /* 변수 사용 */
}








/* =========================================
   1. 테마(다크/라이트) 및 전체 배경 설정
   ========================================= */
:root {
    --bg-primary: #ffffff;
    --text-primary: #333333;
    --border-color: #eeeeee;
    --accent-color: #555555;
}

body {
    background-color: var(--bg-primary) !important;
    background-image: none !important;
    font-family: 'AppleSDGothicNeo', 'Noto Sans KR', sans-serif !important;
    overflow-x: hidden !important;
}

/* 다크 모드 설정 */
html[data-theme='dark'] {
    --bg-primary: #000000;
    --text-primary: #e0e0e0;
    --border-color: #333333;
}

html[data-theme='dark'] body {
    background-image: url('https://tistory1.daumcdn.net/tistory/2298/skin/images/andres-molina-HKqik51QjdM-unsplash.jpg') !important;
    background-attachment: fixed !important;
    background-position: right center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-color: #000000 !important;
}

/* 다크모드 투명화 작업 */
html[data-theme='dark'] #wrap, html[data-theme='dark'] #header, html[data-theme='dark'] #gnb,
html[data-theme='dark'] #container, html[data-theme='dark'] #content,
html[data-theme='dark'] #footer, html[data-theme='dark'] .content-wrap {
    background-color: transparent !important;
    border-color: var(--border-color) !important;
}

/* =========================================
   2. 모든 목록 이미지(썸네일) 완전 제거 (PC/모바일 공통)
   ========================================= */
.thum, figure, img[src*="thumb"], .post-item img, [class*="thumbnail"] figure {
    display: none !important;
    width: 0 !important; height: 0 !important;
}

.post-item a, [class*="cover-thumbnail"] a, .related-articles a {
    padding-left: 0 !important;
    padding-right: 0 !important;
    min-height: 0 !important;
    height: auto !important;
}

/* =========================================
   3. PC 레이아웃 및 상세페이지 제목 정리
   ========================================= */
#header, #gnb, .inner, #container {
    border-bottom: none !important; border-top: none !important; box-shadow: none !important;
}

#container { padding-top: 80px !important; } /* PC 상단 여백 */

.post-cover {
    background-image: none !important; background-color: transparent !important;
    height: auto !important; min-height: 0 !important; padding: 40px 0 !important;
    border-bottom: 1px solid var(--border-color) !important;
}

.post-cover .inner {
    display: block !important; position: relative !important;
    max-width: 1080px; margin: 0 auto; padding: 0 20px !important;
    box-sizing: border-box !important; text-align: left;
}

.post-cover h1 {
    font-size: 2.5em !important; line-height: 1.3 !important;
    color: var(--text-primary) !important; word-break: keep-all !important;
}

/* =========================================
   4. 모바일 전용 레이아웃 (767px 이하)
   ========================================= */
@media screen and (max-width: 767px) {
    /* (1) 모바일 상단 60px 한 줄 정렬 */
    #header .inner {
        height: 60px !important; position: relative !important;
        display: block !important; padding: 0 !important;
    }

    /* 로고("잔향") 위치 */
    #header h1 {
        position: absolute !important; left: 20px !important; top: 50% !important;
        transform: translateY(-50%) !important; margin: 0 !important; padding: 0 !important;
    }

    /* (2) 모바일 검색창 + 다크모드 버튼 (겹침 및 클릭 해결) */
    #header .util {
        position: absolute !important; right: 55px !important; top: 50% !important;
        transform: translateY(-50%) !important; display: flex !important;
        align-items: center !important; z-index: 100001 !important;
        width: auto !important; pointer-events: auto !important;
    }
    #header .util .search input {
        width: 100px !important; height: 30px !important;
        background: transparent !important; border-bottom: 1px solid var(--border-color) !important;
        color: var(--text-primary) !important; font-size: 12px !important;
    }

    /* (3) 햄버거 메뉴 (원형 테두리 및 정중앙 정렬) */
    #header .menu {
        position: absolute !important; right: 10px !important; top: 50% !important;
        transform: translateY(-50%) !important; width: 34px !important; height: 34px !important;
        border: 1px solid var(--border-color) !important; border-radius: 50% !important;
        display: flex !important; align-items: center !important; justify-content: center !important;
        background: none !important; z-index: 100002 !important; padding: 0 !important;
    }
    #header .menu span {
        position: relative !important; width: 16px !important; height: 1.5px !important;
        background-color: var(--text-primary) !important; text-indent: -999em !important;
    }
    #header .menu span::before, #header .menu span::after {
        content: "" !important; position: absolute !important; left: 0 !important;
        width: 16px !important; height: 1.5px !important; background-color: var(--text-primary) !important;
    }
    #header .menu span::before { top: -6px !important; }
    #header .menu span::after { top: 6px !important; }

    /* 라이트/다크모드 색상 강제 지정 */
    html[data-theme='light'] #header .menu span, 
    html[data-theme='light'] #header .menu span::before, 
    html[data-theme='light'] #header .menu span::after { background-color: #000000 !important; }
    html[data-theme='dark'] #header .menu span, 
    html[data-theme='dark'] #header .menu span::before, 
    html[data-theme='dark'] #header .menu span::after { background-color: #ffffff !important; }

    /* (4) 기타 모바일 보정 */
    #gnb { display: none !important; } /* 모바일 메뉴바(HOME 등) 삭제 */
    #container { padding-top: 20px !important; }
    .post-cover h1 { font-size: 24px !important; line-height: 1.4 !important; }
    
    /* 배경 이미지 달 위치 조정 */
    html[data-theme='dark'] body {
        background-position: right -60px top -10px !important; 
        background-size: 600px auto !important; 
    }
}

/* 댓글창 다크모드 보정 */
html[data-theme='dark'] .comment-form .field, html[data-theme='dark'] .tt-cmt {
    background-color: #1a1a1a !important; color: #e0e0e0 !important; border: 1px solid var(--border-color) !important;
}


/* ============================================================
   [최종] 상단 메뉴바(HOME 등) 및 커스텀 메뉴 버튼 완전 삭제
   ============================================================ */

/* 1. 웹/모바일 공통: 상단 메뉴바(HOME, ADMIN 등)와 햄버거 메뉴 삭제 */
#gnb, 
#header .menu, 
#header .menu span {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 2. 메뉴바가 사라진 만큼 본문 상단 여백 줄이기 */
#container {
    padding-top: 50px !important; /* PC 기준 여백 줄임 */
}

/* 3. 모바일 전용 보정 */
@media screen and (max-width: 767px) {
    /* 메뉴 버튼이 사라졌으므로 검색창/다크모드 버튼을 오른쪽 끝으로 이동 */
    #header .util {
        right: 15px !important; 
        top: 50% !important;
        transform: translateY(-50%) !important;
    }
    
    /* 본문을 더 위로 끌어올림 */
    #container {
        padding-top: 10px !important;
    }

    /* 상세페이지(글 내용) 제목 겹침 방지 여백 */
    .post-cover {
        padding-top: 20px !important;
    }
}
/* ============================================================
   [최종] 모바일 햄버거 메뉴 가시성 및 위치 긴급 수정
   ============================================================ */
@media screen and (max-width: 767px) {
    
    /* 1. 메뉴 버튼 컨테이너 강제 노출 및 위치 고정 */
    #header .menu {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: absolute !important;
        top: 50% !important;
        right: 10px !important;    /* 화면 가장 오른쪽 끝 */
        transform: translateY(-50%) !important;
        width: 30px !important;
        height: 30px !important;
        background: none !important;
        border: none !important;
        z-index: 100020 !important; /* 검색창보다 높은 순위 */
        cursor: pointer !important;
        padding: 0 !important;
    }

    /* 2. 메뉴 버튼 안의 세 줄 아이콘 새로 그리기 */
    #header .menu span {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 20px !important;
        height: 2px !important;
        background-color: var(--text-main) !important; /* 테마 글자색 연동 */
        text-indent: -9999px !important; /* '메뉴' 글자 숨김 */
        display: block !important;
    }

    /* 위아래 선 추가 */
    #header .menu span::before,
    #header .menu span::after {
        content: "" !important;
        position: absolute !important;
        left: 0 !important;
        width: 20px !important;
        height: 2px !important;
        background-color: var(--text-main) !important;
        display: block !important;
    }

    /* 세 줄 간격 벌리기 */
    #header .menu span::before { top: -7px !important; }
    #header .menu span::after { top: 7px !important; }

    /* 3. 라이트 모드일 때 선 색상 강제 (안 보임 방지) */
    html[data-theme='light'] #header .menu span,
    html[data-theme='light'] #header .menu span::before,
    html[data-theme='light'] #header .menu span::after {
        background-color: #000000 !important;
    }

    /* 4. 다크 모드일 때 선 색상 강제 */
    html[data-theme='dark'] #header .menu span,
    html[data-theme='dark'] #header .menu span::before,
    html[data-theme='dark'] #header .menu span::after {
        background-color: #ffffff !important;
    }

    /* 5. 중복되는 가상 요소 제거 */
    #header .menu::before, 
    #header .menu::after {
        display: none !important;
    }
}
/* ============================================================
   [긴급] 모바일 메뉴 아이콘 강제 출력 (투명도/색상 해결)
   ============================================================ */
@media screen and (max-width: 767px) {
    
    /* 1. 버튼 본체 강제 노출 */
    #header .menu {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 999999 !important; /* 최상단 레이어 */
    }

    /* 2. 메뉴 버튼 안의 span(가운데 선) 강제 노출 */
    #header .menu span {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 20px !important;
        height: 2px !important;
        text-indent: -9999px !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
    }

    /* 3. 위아래 선(before, after) 강제 노출 */
    #header .menu span::before,
    #header .menu span::after {
        content: "" !important; /* 이게 없으면 선이 안 보입니다 */
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 20px !important;
        height: 2px !important;
        position: absolute !important;
        left: 0 !important;
    }

    /* 4. 라이트 모드일 때: 배경은 흰색이므로 선은 "무조건 검정" */
    html[data-theme='light'] #header .menu span,
    html[data-theme='light'] #header .menu span::before,
    html[data-theme='light'] #header .menu span::after {
        background-color: #000000 !important;
    }

    /* 5. 다크 모드일 때: 배경은 어두우므로 선은 "무조건 흰색" */
    html[data-theme='dark'] #header .menu span,
    html[data-theme='dark'] #header .menu span::before,
    html[data-theme='dark'] #header .menu span::after {
        background-color: #ffffff !important;
    }

    /* 선 간격 다시 한번 고정 */
    #header .menu span::before { top: -7px !important; }
    #header .menu span::after { top: 7px !important; }
}
/* ============================================================
   [PC 웹] 상세페이지 제목 영역 레이아웃 및 색상 최종 수정
   ============================================================ */

/* 1. 제목 영역(post-cover)이 본문과 사이드바를 가리지 않게 수정 */
.post-cover {
    position: relative !important;   /* 공중에 떠 있는 상태를 해제하여 본문을 아래로 밈 */
    display: block !important;
    width: 100% !important;
    max-width: 860px !important;     /* 사이드바 영역을 침범하지 않도록 너비 제한 */
    margin: 0 !important;            /* 왼쪽 정렬 유지 */
    padding: 60px 0 40px 0 !important; /* 위아래 적절한 여백 */
    height: auto !important;         /* 높이 자동 조절 */
    background-color: transparent !important; /* 어두운 배경색 제거 */
    border-bottom: 1px solid var(--border-main) !important;
}

/* 제목 영역 앞의 어두운 오버레이(막) 제거 */
.post-cover:before {
    display: none !important;
}

/* 2. 제목 박스 내부 정렬 */
.post-cover .inner {
    position: relative !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    transform: none !important;      /* 중앙 정렬 코드 무력화 */
    top: auto !important;
}

/* 3. 테마별 제목 글자 색상 강제 지정 (안 보이는 문제 해결) */
/* 라이트 모드: 진한 회색/검정 */
html[data-theme='light'] .post-cover h1 {
    color: #222222 !important;
}
/* 다크 모드: 밝은 회색/화이트 */
html[data-theme='dark'] .post-cover h1 {
    color: #eeeeee !important;
}

/* 4. 카테고리 및 메타 정보(날짜 등) 색상 조정 */
.post-cover .category {
    color: var(--accent-color) !important;
    margin-bottom: 10px !important;
}
.post-cover .meta {
    color: #888888 !important;
    font-size: 0.9em !important;
}

/* 5. 본문 내용이 위로 끌어올려지는 현상 방지 */
#content .entry-content {
    margin-top: 30px !important;
    position: relative !important;
    z-index: 1;
}

/* 6. 사이드바와 겹침 방지 보정 (PC) */
@media screen and (min-width: 768px) {
    #content {
        float: left !important;
        width: 70% !important; /* 본문 너비 조절 */
    }
    #aside {
        float: right !important;
        width: 25% !important; /* 사이드바 위치 고정 */
    }
}