@charset "utf-8";

/* Nanum Gothic */
@import url('https://fonts.googleapis.com/css?family=Nanum+Gothic&display=swap');
 
.sound_only	 { display: none; }

/* 초기화 */
html {overflow-y:auto}
html * {cursor: url('../data/site/site_cursor.cur'), auto;}
body {margin:0;padding:0;}
#body
{
	height: 760px;
    width: calc(1200px - 40px);
    margin: 0 calc((100% - 1200px) / 2);
    border-radius: 5px;
    border: 1px solid black;
    overflow: hidden;
    background: var(--design-point-color1);
    display: grid;
    position: relative;
    grid-template-columns: 227px auto;
    gap: 0 6px;
    padding: 0 20px;
}

html,body
{   animation: fadeInAnimation ease 0.3s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
     }
}

footer#footer
{
	margin: 0 calc((100% - 1200px)/2);
}


.inner-layout
{
    background: white;
    margin: 32px 0 0;
    border-radius: 4px;
    border: 1px solid #000;
    padding: 0 20px;
    min-height: 634px;
}

.diary-header
{
    display: block;
    width: 186px;
    background: white;
    margin: 32px 0 0;
    border-radius: 4px;
    border: 1px solid #000;
    padding: 20px;
}

.diary-decor {
    position: absolute;
    display: flex;
    flex-direction: column;
	left: 233px;
	z-index:1;
    gap: 24px;
}

.diary-decor.bottom {bottom:200px;}

.diary-footer {
	grid-column: 1 / 3;
    background: white;
    border: 1px solid black;
    padding: 12px 20px;
    border-radius: 4px;
    margin: 16px 0 32px;
	display: flex;
    justify-content: space-between;
	align-items: center;
}
.inner-layout .fix-layout {overflow-y: auto; height: calc(100% - 20px);  margin: 20px 0;}

html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0;padding:0;border:0}
h1, h2, h3, h4, h5, h6 {}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}
ul, li {margin:0;padding:0;list-style:none}
legend {display: none;}
label, input, button, select, img {vertical-align:middle}
input, button {margin:0;padding:0;}
button {cursor:pointer}
textarea, select {font-size:1em}
select {margin:0}
p {margin:0;padding:0;word-break:break-all}
hr {display:none}
pre {overflow-x:scroll;}
a:link, a:visited {text-decoration:none}
a:hover, a:focus, a:active {text-decoration:none}

ul,li	{ margin: 0; padding: 0; }
i,sup,em	{ font-style: normal; }

label	{ cursor: pointer; }

img	{ max-width: 100%; vertical-align: middle; }

table	{ width: 100%; }

.fix-layout				{ position: relative; max-width: 1000px; margin: 0 auto; padding: 0 10px; }
.fix-layout .fix-layout	{ padding: 0; margin:0; }
.trans,
.trans *,
.trans *:after,
.trans *:before	{ -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; }

.none-trans,
.none-trans *,
.none-trans *:after,
.none-trans *:before	{ -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; }

.txt-left	{ text-align: left; }
.txt-center	{ text-align: center; }
.txt-right	{ text-align: right; }

/* scrollbar : ie except */
*::-webkit-scrollbar-track			{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);background-color: rgba(0, 0, 0, 0.2);}
*::-webkit-scrollbar				{ width: 5px; height: 5px; background-color: transparent;}
*::-webkit-scrollbar-thumb			{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background: #fff677; border: none; border-radius: 6.0em; }
 
/**********************
	Form Style
**********************/

.theme-form	{ width: 100%; }


/* 사이드뷰 */
.sv_wrap {display:inline-block;position:relative;font-weight:normal}
.sv_wrap .sv {z-index:1000;display:none;margin:5px 0 0;border:1px solid #283646}
.sv_wrap .sv a {display:inline-block;margin:0;padding:3px;width:94px;border-bottom:1px solid #283646;background:#111;color:#fff !important}
.sv_wrap a:focus, .sv_wrap a:hover, .sv_wrap a:active {text-decoration:none}
.sv_on {display:block !important;position:absolute;top:10px;left:20px;width:auto;height:auto}
.sv_nojs .sv {display:block}