@charset "utf-8";

/* 
 *
 * 늘 쓰는 A4 by 늘뉴 
 * ver 2019.07.17
 * https://ncoding.tistory.com
 *
 * CSS CONTENTS:
 *
 * 01. 웹 폰트
 * 02. 기본 스타일 초기화
 * 03. 공통 스타일
 * 04. 레이아웃
 * 05. 세부 요소
 * 06. 게시글 본문
 * 07. 방명록 & 코멘트
 * 08. 하단
 * 09. 기타
 * 10. 반응형
 * 11. animation
 *
 */

/* ***** 01. 웹 폰트 ***** */

@font-face {
    font-family: 'RIDIBatang';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.0/RIDIBatang.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
  font-family: "Pretendard-Regular";
  src: url("https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff")
    format("woff");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Pretendard-Bold";
  src: url("https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Bold.woff")
    format("woff");
  font-weight: 700;
  font-style: normal;
}

/* ***** 02. 기본 스타일 초기화 (가급적 수정하지 마세요) ***** */
* {-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-ms-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease}
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,form,fieldset,figure,legend,textarea,p,blockquote,th,td,figure,select,input,button,img {margin:0;padding:0;border:0}
header,footer,section,article,aside,nav,hgroup,details,menu,figure,figcaption {display:block}
button,input[type=submit],input[type=reset],input[type=button],#top-btn {overflow:visible;cursor:pointer}
input[type=text],input[type=email],input[type=password],input[type=submit],textarea,button {-webkit-appearance:none;background:none;outline:none;padding:3px}
input,select,textarea,button {font-family:'Roboto Condensed','Noto Sans DemiLight',sans-serif;font-size:100%;border-radius:0}
fieldset,label,input,button,select,img {vertical-align:middle}
button {border:0;background:transparent}
ul li {list-style:none}
img, fieldset {border:none}
figure figcaption {padding-top:0;min-height:auto}
p {word-break:break-all}
a {text-decoration:none}


/* ***** 03. 공통 스타일 ***** */
html	{ overflow:hidden }

body	{
	overflow:auto;
	font-size:var(--size);
	    font-family: "Pretendard-Regular";
			font-weight: 400;
	line-height:var(--line);
	text-align:justify;
	background-color: #8C2D35;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}
body:before {
	background-position:center top;
	position:fixed;top:0;left:0;right:0;bottom:0;z-index:-1; 
	content:"";
}
body,a,input,button,textarea { color:var(--text);font-family:var(--font),'Pretendard-Regular','Noto Sans KR',sans-serif }
a:hover	{ color: var(--point);text-shadow:0 0 1px var(--point) }
img			{ max-width:100%;height:auto }
img:hover	{ transition:scale(1.1) }
.hide		{ display:none }

iframe		{ max-width:100% !important }


/* 드래그 효과 */
::selection			{ background-color:var(--point); color:var(--bg); transition: all 250ms ease-in; }
::-moz-selection	{ background-color:var(--point); color:var(--bg); transition: all 250ms ease-in; }
::-webkit-selection	{ background-color:var(--point); color:var(--bg); transition: all 250ms ease-in; }


/* ***** 04. 레이아웃 ***** */
#wrap		{ 
	position:relative;
	max-width:var(--width);
	width:90%;
	min-height:100%;
	margin:0 auto;
	padding:5em;
	background:var(--content);
}
.wrap-inner	{
	opacity:0;
	-webkit-animation:fade-in 0.5s ease-in 0s 1 normal forwards;
	-moz-animation:fade-in .5s ease-in 0s 1 normal forwards;
	-ms-animation:fade-in .5s ease-in 0s 1 normal forwards;
	-o-animation:fade-in .5s ease-in 0s 1 normal forwards;
	animation:fade-in .5s ease-in 0s 1 normal forwards;
}
	
/* ***** 05. 세부 요소 ***** */ 
.protect		{ max-width:200px;margin:20vh auto;text-align:center }
.protect input	{ display:block;width:100%;padding:0;line-height:30px;text-align:center }
.protect .submit	{ margin-top:6px;background:transparent;border:1px solid rgba(0,0,0,.05) }
.protect .submit:hover { background:rgba(0,0,0,.01) }

/* ***** 06. 게시글 본문 ***** */
.article p,
.article h4,
.article ul,
.article ol { margin-bottom:var(--paragraph) !important; }
.article h2	{ height: 2em!important;font-size:1.5em!important;font-family:'RIDIBatang';}
.article h3	{ font-size:1.5em }
.article h4	{ margin-bottom:1em;padding-bottom:1em;border-bottom:1px solid rgba(0,0,0,.1);line-height:1.5;font-size:0.9em; font-weight: Bold; color:(0,0,0,0.8) ; text-align: right !important;}
.article ul,
.article ol	{ margin-left:2em }
.article dt	{ text-decoration:underline }
.article dd	{ margin-left:20px;padding-bottom:10px }
.article code	{ font-family:'ubuntu mono','d2coding',monospace}

.article blockquote {padding: 0em 1em 0em 1em; margin: 0.5em 0em; border-left: 5px solid #ff7a88;font-size:0.9em;}
.article blockquote[data-ke-style='normal']	{ padding:0.6em 1.2em;border-left:5px solid rgba(0,0,0,.1) }

figure.fileblock a			{ border:none }
figure.fileblock .name		{ height:auto }
figure.fileblock .filename	{ margin-top:10px }

.post-404	{ padding:4em 0;border-top-width:1px;border-top-style:solid;font-weight:bold;font-size:1.1em;text-align:center;}


/*  ***** 08. 하단 *****  */
#top-btn	{ display:none;position:fixed;right:25px;bottom:30px;z-index:1;font-size:1.5em;line-height:1}
#footer	{ max-width:var(--width);margin:2em auto 5em auto;font-size:11px; }

/* ***** 09. 기타 ***** */

/* ***** 10. 반응형 ***** */
@media all and (max-width: 767px) {
	#wrap		{ margin:5em 0;padding:5% }
	.tt_article_useless_p_margin h2	{ font-size:1.7em }
	.tt_article_useless_p_margin h3	{ font-size:1em }
	#footer	{ margin:2em 0 }
}

/* ***** 11. animation ***** */
@-webkit-keyframes fade-in { from { opacity:0 } to { opacity:1 } }
@-moz-keyframes fade-in { from { opacity:0 } to { opacity:1 } }
@-ms-keyframes fade-in { from { opacity:0 } to { opacity:1 } }
@-o-keyframes fade-in { from { opacity:0 } to { opacity:1 } }
@keyframes fade-in { from { opacity:0 } to { opacity:1 } }

/* 12. 공감버튼 없애기 */
.container_postbtn {display: none !important;}

/* ***** 13. 밑줄과 취소선 ***** */
u {text-decoration:none;
 display: inline;
 box-shadow: inset 0 -20px 0 #D3EFF0;}
s {text-decoration:none;
 display: inline;
 box-shadow: inset 0 -20px 0 #629BB8;} 

/* ***** 14. 볼드 폰트 ***** */
.tt_article_useless_p_margin > p > b {
  font-family: "Pretendard-Bold";
  font-weight: 700;
}

/* more & less */
div[data-ke-type="moreLess"] {
  width: 100%;
  float: center;
  margin: 0 auto;
	padding-bottom:1.5em; 
}

div[data-ke-type="moreLess"] .btn-toggle-moreless {
  border-radius: 20px;
  background-color: #629BB8;
  cursor: pointer;
  font-size: 10pt !important;
  padding: 2px 20px 2px 20px;
  color: #fff !important;
}

/* - - - BGM 플레이어 관련 - - - */
.mm-bgm{
  position: fixed;
  bottom: 15px; /* 우측상단 원하면 bottom을 top 으로 변경 */
  right: 15px;
  z-index: 9999; /* 맨위로 */
  border: none;
}
/* - - - BGM 플레이어 끝 - - -*/