html { position:fixed; overflow-x:hidden; overflow-y:auto; left:0; right:0; top:0; bottom:0; }
body { overflow-x:hidden; overflow-y:auto; width:100%; height:100%; }

.gnb { position:fixed; top:0; left:0; width:100%; z-index:1000; }
.gnb .nav-wrapper .menu-button { padding:0 15px; }
.gnb .nav-wrapper .noti-button { display:none; padding:0 15px; }
.left-menu { position:fixed; top:0; left:0; padding-top:70px; min-height:100%; max-height:100%; overflow-y:auto; z-index:999; transition:all .3s; }
.left-menu .collection { border:0; }
.left-menu .collection .collection-item { border:0; font-size:0; padding:0; height:42px; }
.left-menu .collection .collection-item:hover, .left-menu .collection .collection-item.active { background-color:#c8e6c9 !important; }
.left-menu .collection .collection-item > a { color:#333 !important; display:block;  position:relative; width:100%; height:100%; padding:10px 60px 10px 52px; overflow:hidden; white-space:nowrap; word-break:break-all; text-overflow:ellipsis; }
.left-menu .collection .collection-item .text { font-size:14px; vertical-align:middle; width:100%; }
.left-menu .collection .collection-item .count { position:absolute; right:20px; font-size:14px; color:#888; }
.left-menu .collection .collection-item .material-icons { vertical-align:middle; font-size:22px; display:inline-block; position:absolute; left:20px; }


.notification { position:fixed; top:0; right:0; padding-top:60px; min-height:100%; max-height:100%; overflow-y:auto; z-index:999; transition:all .3s; }
.notification .collection { border-left:0; border-right:0; border-top:0; }
.notification .collection .collection-item.avatar { padding-left:55px; padding-right:45px; min-height:0; border-left:0; border-right:0; }
.notification .collection .collection-item .noti-icon { position:absolute; width:32px; height:32px; left:15px; font-size:32px; vertical-align:middle; }
.notification .collection .collection-item .star-icon { position:absolute; top:16px; right:16px; }
.notification .collection .collection-item .title { font-weight:bold; }
.notification .collection .collection-item .title:after { content:"!"; display:inline; }
.notification .collection .collection-item p { color:#555; word-break:break-all; }

.body { word-break:break-all; transition:all .3s; padding:5px; padding-top:64px; }
.body .write { transition:background .3s; border-radius:3px; }
.body .write:not(.focus) { position:relative; background:#81c784; }
.body .write:not(.focus) .placeholder-icon { position:absolute; left:13px; top:16px; font-size:20px; color:#f1f8e9; }
.body .write:not(.focus) .input-field { display:none; }
.body .write:not(.focus) .subject { display:block; }
.body .write:not(.focus) .subject .write-star { display:none; }
.body .write:not(.focus) .subject input { border:0; height:3.5rem; padding:0 20px 0 40px; box-sizing:border-box; margin-bottom:0; }
.body .write:not(.focus) .subject input::-webkit-input-placeholder { color:#f1f8e9 !important; }
.body .write:not(.focus) .subject input:-ms-input-placeholder { color:#f1f8e9 !important; }
.body .write:not(.focus) .subject input:-moz-input-placeholder { color:#f1f8e9 !important; }
.body .write:not(.focus) .subject input::-moz-input-placeholder { color:#f1f8e9 !important; }
.body .write:not(.focus) .subject input::placeholder { color:#f1f8e9 !important; }
.body .write:not(.focus) .subject label { display:none; }
.body .write.focus { margin-top:10px; background-color:#fff; padding:10px; }
.body .write.focus .placeholder-icon { display:none; }
.body .write.focus .input-field { margin:2rem; }
.body .write.focus .input-field label.required:before { display:inline; content:"* "; color:#b71c1c; }
.body .write.focus .subject { padding-right:50px; position:relative; }
.body .write.focus .subject .write-star { position:absolute; right:0px; top:10px; font-size:30px; cursor:default; }
.body .write.focus .button { text-align:right; }

.body .todo-list .collapsible .collapsible-header { position:relative; padding-left:55px; padding-right:55px; }
.body .todo-list .collapsible .collapsible-header .list-check { position:absolute; left:15px; cursor:default; }
.body .todo-list .collapsible .collapsible-header .subject { max-width:calc(100% - 60px); word-break:break-all; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.body .todo-list .collapsible .collapsible-header .date { display:inline-block; margin-left:10px; width:50px; }
.body .todo-list .collapsible .collapsible-header .list-star { position:absolute; right:15px; cursor:default; }
.body .todo-list .collapsible .collapsible-body { position:relative; padding:40px 28px; }
.body .todo-list .collapsible .collapsible-body .button { position:absolute; top:10px; right:10px; }

.body .edit { margin-top:10px; background-color:#fff; padding:10px; }
.body .edit .placeholder-icon { display:none; }
.body .edit .input-field { margin:2rem; }
.body .edit .input-field label.required:before { display:inline; content:"* "; color:#b71c1c; }
.body .edit .subject { padding-right:50px; position:relative; }
.body .edit .subject .edit-star { position:absolute; right:0px; top:10px; font-size:30px; cursor:default; }
.body .edit .button { text-align:right; }

.body .datepicker-date-display .date-text:after { content:"일"; display:inline; }
.body .modal.edit .modal-content { padding:0; }

/* pc */
@media (min-width:993px) {
	.body { padding-right:320px; }
	#toast-container { top:unset; right:unset; bottom:5%; left:5%; }
}

/* tablet ~ pc */
@media (min-width:601px) {
	.left-menu { width:112px; }
	.left-menu .nav-wrapper { display:none; }
	.left-menu .collection .collection-item .text { display:none; }
	.left-menu.active,
	.left-menu:hover { width:250px; }
	.left-menu.active .nav-wrapper,
	.left-menu:hover .nav-wrapper { display:block; }
	.left-menu.active .collection .collection-item .text,
	.left-menu:hover .collection .collection-item .text { display:inline; }
	
	.notification { width:300px; }

	.body { padding-left:132px; }
	.body.left-active, .body.left-hover { padding-left:270px; }
}

/* mobile ~ tablet */
@media (max-width:992px) {
	.gnb .nav-wrapper .noti-button { display:inline-block; }
	.notification { transform:translateX(105%); }
	.notification.active { transform:translateX(0%); }
}

/* mobile */
@media (max-width:600px) {
	.left-menu { width:100%; transform:translateX(-105%); }
	.left-menu.active { transform:translateX(0%); }
	.notification { width:100%; }
}