@charset "utf-8";
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
@import url(//cdn.jsdelivr.net/font-nanum/1.0/nanumbarungothic/nanumbarungothic.css);
@import url(http://fonts.googleapis.com/css?family=Roboto:500,400italic,100,300,500italic,100italic,300italic,400);

/* 공통 요소 */
body {
    /* 1. 배경 이미지 경로 (파일업로드 탭에 올린 이미지 이름으로 수정해!) */
    background-image: url('./images/IMG_2900.JPG');
    /* 2. 배경 설정 (스크롤해도 배경은 가만히 있게 하려면 fixed 추가) */
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover; /* 화면에 꽉 차게 조절 */
    background-attachment: fixed; /* 배경 고정 효과 */
	font-family:'Nanum Barun Gothic', 'Nanum Gothic';font-size:12px;}
a, a:link, a:visited, a:active, a:hover{text-decoration:none;-webkit-transition: all .3s ease;-moz-transition: all .3s ease;-ms-transition: all .3s ease;-o-transition: all .3s ease;transition: all .3s ease;}
a, a:link, a:visited{color:#000;}
a:active, a:hover{color:#999;}
.imageblock, img, embed, video, iframe {max-width:100%;height:auto;}
input{font-family:'Nanum Barun Gothic', 'Nanum Gothic';font-size:12px;outline:none;}
.fixed{position:fixed;top:20px;}
li{list-style:none;}
blockquote:before{position:absolute;left:10px;top:10px;content:'\f10d';font:normal normal normal 14px/1 FontAwesome;}
blockquote{position:relative;margin:10px 20px; padding:20px;border:1px solid #eee;}
blockquote p{margin:10px;}
blockquote p:last-child{margin-bottom:0;}
.moreless_content{padding:15px;border:1px solid #eee;}
.moreless_content p:first-child{margin-top:0;}
.moreless_content p:only-child{margin:0;}
.moreless_content p:last-child{margin-bottom:0;}
.moreless_bottom{display:none;}

/* 레이아웃 */
#container{margin:0 auto;padding-top:20px;width:700px;}
#miniMenu{text-align:right;}
	/* 미니메뉴 */
	#miniMenu a{margin-left:10px;}
	#miniMenu a, #miniMenu a:link, #miniMenu a:visited{color:#aaa;}
#header{text-align:center;padding:50px;}
	#header h1{margin:30px 0;font-family:'Roboto', 'Nanum Barun Gothic', 'Nanum Gothic';font-size:50px;font-weight:100;}
#sidebar{width:140px;float:left;margin-right:20px;padding:15px 10px;background:rgb(255, 255, 255);border:1px solid #eee;text-align:center;}
	/* 사이드바 - 메뉴 */
	#sidebar #menu{margin:0;padding:0 5px;text-align:left;}
	#sidebar #menu li{display:block;list-style:none;padding:8px 0;font-size:12px;}
	#sidebar #menu li a span{display:inline;padding-left:5px;}
	/* 사이드바 - 메뉴 끝 */
#content{width:515px;float:right;}
#footer{clear:both;padding:60px 20px;text-align:center;}
	#footer .copyright{margin:30px 0;color:#aaa;}
	#footer .copyright a, #footer .copyright a:link, #footer .copyright a:visited{color:#aaa;}

/* 카테고리 */
#categoryWrap{position:relative;clear:both;}
#categoryHead{margin-top:10px;padding:5px;border:1px solid #eee;text-align:right;}
#category{width:92%;position:absolute;left:-20px;margin:0 20px;padding:5px;display:none;background:#fff;border:1px solid #eee;border-top:none;text-align:left;z-index:999;}
.categoryTitle{float:left;}
#category ul{margin:0;padding:0;line-height:20px;}
#category li{list-style:none;}
#category ul li ul li>ul{padding-left:10px;}
#category ul li ul li>ul li>a:before{content:' - ';}
#category a{display:block;}
#category a:active, #category a:hover{background:#aaa;color:#fff;}

/* 링크 */
#linkWrap{position:relative;clear:both;}
#linkHead{margin-top:10px;padding:5px;border:1px solid #eee;text-align:right;}
#link{width:92%;position:absolute;left:-20px;margin:0 20px;padding:5px;display:none;background:#fff;border:1px solid #eee;border-top:none;text-align:left;z-index:999;}
.linkTitle{float:left;}
#link ul{margin:0;padding:0;line-height:20px;}
#link li{list-style:none;}
#link a{display:block;}
#link a:active, #link a:hover{background:#aaa;color:#fff;}

/* 검색 폼 */
#search{margin-top:10px;margin-bottom:-5px;}
#search input{border:0;background:transparent;}
#search input[type="text"]{width:75%;padding:5px 0;font-family:'Nanum Barun Gothic', 'Nanum Gothic';font-size:12px;}
#search .submit{font:normal normal normal 14px/1 FontAwesome;}
#search input::-webkit-input-placeholder{color:#000;}
#search input:-moz-placeholder{color:#000;}
#search input::-moz-placeholder{color:#000;}
#search input:-ms-input-placeholder{color#000;}

/* 메인 요소 공통 */
.mainElement{margin-bottom:20px;padding:20px;background:#fff;border:1px solid #eee;}
.mainElement h3{margin:0;font-size:14px;font-weight:bold;}

/* 검색 결과 리스트 */
.searchList h3 span{margin-left:5px;}
.searchList ul{margin:0;margin-top:10px;padding:0;}
.searchList ul li{line-height:40px;border-bottom:1px solid #eee;}
.searchList ul li:last-child{margin-bottom:-10px;border:0;}
.searchList .cnt{margin-left:3px;font-size:10px;letter-spacing:-1px;}
.searchList .date{float:right;font-size:10px;letter-spacing:-1px;font-family:'Roboto', 'Nanum Barun Gothic', 'Nanum Gothic';}

/* 태그로그 */
.taglog ul{margin:0;margin-top:20px;padding:0;}
.taglog ul li{display:inline;}
.taglog ul li a{margin-right:7px;}
.taglog ul li a:before{content:'#';}
.taglog .cloud1{font-size:15px;font-weight:bold;}
.taglog .cloud2{font-size:14px;font-weight:bold;}
.taglog .cloud3{font-size:13px;}
.taglog .cloud4{font-size:12px;}
.taglog .cloud5{font-size:11px;}
.taglog .cloud4:link, .taglog .cloud4:visited{color:#777;}
.taglog .cloud5:link, .taglog .cloud5:visited{color:#aaa;}

/* 방명록 */
.guestWrite input[type="text"], .guestWrite input[type="password"]{padding:5px 0;border:0;border-bottom:1px solid #eee;}
.guestWrite .name{margin-right:15px;}
.guestWrite textarea{width:99%;height:100px;border:1px solid #eee;}
.guestWrite  input[type="submit"]{float:right;border:0;background:transparent;}
.guestWrite .guestSecret{margin:0;}
.guestList{padding:0;}
.guestList ul{margin:0;padding:0;}
.guestList .guestA{padding-bottom:20px;border-bottom:1px solid #eee;}
.guestList .guestA:last-child{margin-bottom:0;border-bottom:0;}
.guestList .guestB{padding:0 20px;}
.guestList .meta{padding:20px;padding-bottom:0;}
.guestList .guestB .meta{margin-top:20px;padding:0;}
.guestList .guest1 .guestContent{padding-bottom:0;}
.guestList .guestB .guestContent{padding:10px 0;}
.guestList .guestContent{margin:0;padding:10px 20px;line-height:1.8em;}
.guestList .guest2 .guestContent{padding-bottom:0;}
.guestList .guest2{padding-left:10px;border-left:2px solid #ccc;}
.guestList .meta .name{margin-right:5px;}
.guestList .meta i{margin-right:3px;}
.guestList .meta .date{letter-spacing:-1px;font-size:11px;font-family:'Roboto', 'Nanum Barun Gothic', 'Nanum Gothic';}
.guestList .meta .control{float:right;font-size:10px;font-family:'Roboto', 'Nanum Barun Gothic', 'Nanum Gothic';}
.guestList .meta .control a{margin-left:5px;}

/* 글 공통 */
.titleWrap h2{margin:0;margin-bottom:10px;font-size:14px;}
.titleWrap .date{letter-spacing:-1px;}

/* 공지글 */
.entryNotice p:first-child{margin-top:0;}
.entryNotice p:last-child{margin-bottom:0;}
.entryNotice .article{padding-top:10px;line-height:1.5;}

/* 보호글 */
.entryProtected p{margin:10px 0;text-align:center;}
.entryProtected input{background:transparent;border:0;}
.entryProtected input[type="password"]{width:120px;padding:5px 0;border-bottom:1px solid #eee;}
.entryProtected .passwordForm{margin-bottom:0;}
.entryProtected input[type="password"]::-webkit-input-placeholder{color:#000;}
.entryProtected input[type="password"]:-moz-placeholder{color:#000;}
.entryProtected input[type="password"]::-moz-placeholder{color:#000;}
.entryProtected input[type="password"]:-ms-input-placeholder{color#000;}


/* 일반 글 */
.entry .titleWrap .meta{margin-bottom:10px;}
.entry .titleWrap .meta .date{margin-left:5px;float:right;font-family:'Roboto', 'Nanum Barun Gothic', 'Nanum Gothic';}
.entry .titleWrap .admin{ border:1px dashed #eee;padding:10px;text-align:center;}
.entry .article{padding:10px 0;line-height:1.5;}
.entry .article .another_category{border:0;}
.entry .tagTrail{padding:10px 0;}
.entry .tagTrail a:before{content:'#';}

/* 댓글 */
.comment{margin-top:15px;}
.comment ul{margin:10px 0;padding:0;}
.comment .meta .name{margin-right:5px;}
.comment .meta .date{letter-spacing:-1px;font-size:11px;font-family:'Roboto', 'Nanum Barun Gothic', 'Nanum Gothic';}
.comment .meta .control{float:right;font-size:10px;font-family:'Roboto', 'Nanum Barun Gothic', 'Nanum Gothic';}
.comment .meta .control a{margin-left:5px;}
.commentList .commentB{margin-left:5px;padding-left:10px;border-left:2px solid #ccc;}
.commentList .commentContent{margin:7px 0 10px 0;line-height:1.8em;}
.commentWrite input[type="text"], .commentWrite input[type="password"]{padding:5px 0;border:0;border-bottom:1px solid #eee;}
.commentWrite .name{margin-right:15px;}
.commentWrite textarea{width:99%;height:100px;border:1px solid #eee;}
.commentWrite input[type="submit"]{border:0;background:transparent;}
iframe[src="/api/dummy/comment.php"]{display:none;}


/* 페이징 */
.paging{font-size:13px;}
.paging .num{padding:0 3px;}
.paging .selected{font-weight:bold;}
.paging .no-more-prev, .paging .no-more-next{display:none;}

/* 반응형 레이아웃 */
@media screen and (max-width:700px){
#container{width:100%;padding-top:0;}
#header h1{margin:20px 0;}
#sidebar{position:initial;float:none;width:auto;margin:0;}
	#sidebar #menu{padding:0;text-align:center;}
	#sidebar #menu li{display:inline;padding:2px 0;}
	#sidebar #menu li a span{padding-left:1px;padding-right:3px;}
#content{float:none;width:auto;margin:20px 0;}
#tistorytoolbarid{display:none;}
#search input[type="text"]{width:88%;float:left;}
#search .submit{float:right;}
#categoryWrap{border-top:1px solid #eee;}
#categoryHead{margin:0;padding:0;padding-top:10px;border:0;}
#category{width:100%;left:-11px;margin:0;padding:10px;padding-top:10px;display:none;}
#linkHead{margin:0;padding:0;padding-top:10px;border:0;}
#link{width:100%;left:-11px;margin:0;padding:10px;padding-top:10px;display:none;}
.paging{text-align:center;}
}

#header h1 a {
    font-family: "DotGothic16", sans-serif !important;
    font-size: 3em !important;      /* 글자 크기 3배 */
    font-weight: 450;               /* 폰트 굵기 */
    font-style: normal;
    line-height: 1.2;               /* 줄 간격 (너무 붙어 보이면 조절) */
    display: block;                 /* 크기 적용이 잘 되도록 설정 */
    text-align: center;             /* 가운데 정렬 (원하는 대로 수정 가능) */
}

/* 모바일에서도 너무 크면 화면이 깨질 수 있으니 반응형 추가 */
@media screen and (max-width: 768px) {
    #header h1 a {
        font-size: 2em !important;  /* 모바일에서는 4배로 줄이기 */
    }
}

/* 모바일 전용 메뉴 정렬 */
@media screen and (max-width: 30px) {
    #sidebar #menu {
        display: flex !important;      /* 유연한 박스 모델 사용 */
        flex-wrap: wrap !important;    /* 자리가 모자라면 다음 줄로 */
        justify-content: space-around !important; /* 아이콘 사이 간격을 일정하게 */
        padding: 20px 0 !important;    /* 위아래 여백 추가 */
        text-align: center !important;
    }

    #sidebar #menu li {
        display: inline-block !important;
        width: 30% !important;         /* 한 줄에 3개씩 배치 (더 넓게 보고 싶으면 45%로) */
        margin-bottom: 20px !important; /* 위아래 아이콘 사이 간격 */
        padding: 0 !important;
        font-size: 13px !important;    /* 글자 크기 살짝 키움 */
    }

    #sidebar #menu li a {
        display: flex !important;
        flex-direction: column !important; /* 아이콘 아래에 글자가 오도록 (선택 사항) */
        align-items: center !important;
        gap: 8px !important;           /* 아이콘과 글자 사이 간격 */
    }
	
/* 1. 잠금 화면 자체에 애니메이션 속도 설정 */
#blog-lock-screen {
  /* ... 기존 속성들 ... */
  transition: opacity 1s ease-out, visibility 1s ease-out;
  opacity: 1;
  visibility: visible;
}

/* 2. 사라질 때 적용될 상태 (클래스) */
#blog-lock-screen.fade-out {
  opacity: 0;
  visibility: hidden;
}