@charset "utf-8";

/* 시계용 폰트 연결 */
@import url('https://fonts.googleapis.com/css2?family=Comforter+Brush&family=Neonderthaw&display=swap');

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

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

@font-face {
  font-family: "ROEHOE-CHAN";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10@1.0/ROEHOE-CHAN.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Dovemayo-Medium";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_four@1.0/Dovemayo-Medium.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "LOTTERIACHAB";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302@1.0/LOTTERIACHAB.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "ClimateCrisisKRVF";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2212@1.0/ClimateCrisisKRVF.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "DNFBitBitv2";
  font-style: normal;
  font-weight: 400;
  src: url("//cdn.df.nexon.com/img/common/font/DNFBitBitv2.otf") format("opentype");
}

@font-face {
  font-family: "ChosunKm";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@1.0/ChosunKm.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "HakgyoansimBareonbatangB";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2307-2@1.0/HakgyoansimBareonbatangB.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'NanumSquareNeo-Variable';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_11-01@1.0/NanumSquareNeo-Variable.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
	font-family: 'Freesentation9';
	src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2404@1.0/Freesentation-9Black.woff2') format('woff2');
	font-weight: 900;
	font-style: normal;
}
@font-face {
	font-family: 'Freesentation5';
	src: url('https://cdn.jsdelivr.net/gh/fontbee/font@main/Freesentation/Freesentation-5Medium.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Freesentation3';
	src: url('https://cdn.jsdelivr.net/gh/fontbee/font@main/Freesentation/Freesentation-3Light.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Paperlogy-8ExtraBold';
	src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-8ExtraBold.woff2') format('woff2');
	font-weight: 800;
	font-style: normal;
}
@font-face {
	font-family: 'Paperlogy-5Medium';
	src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-5Medium.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
}

/* scrollbar : ie except */
/* 스크롤 바 숨김처리 */
*::-webkit-scrollbar-track {
  display: none;
}

*::-webkit-scrollbar {
  display: none;
}

textarea::-webkit-scrollbar {
  display: block !important;
}

#mainskin--board {
  position: relative;
  display: flex;
  flex-direction: column;
}

/* 공지 */

.board-notice {
  min-width: 300px;
  text-align: center;
  margin: 0 auto;
  padding: 20px;
}

/* 기본 구조 */
/* 아보카도 라이트용 */
.mid-layout {
  display: unset !important;
}

.mid-layout #mainskin--board * {
  font-family: unset;
}

.fa,
.fa-brands,
.fa-classic,
.fa-regular,
.fa-sharp,
.fa-solid,
.fab,
.far,
.fas {
  font-family: "Font Awesome 6 Free" !important;
}

.mid-layout #mainskin--board .material-icons {
  font-family: "Material Icons" !important;
}

.mid-layout .main_layout.ui-draggable-dragging {
  transition: 0s !important;
}

/* 아보카도 라이트용 여기까지 */
/* 아보카도 퍼스널용 */
.ui-btn {
  display: inline-flex;
  align-items: center;
  margin: 5px;
}

.material-icons {
  font-family: "Material Icons" !important;
}

/* 아보카도 퍼스널용 여기까지 */

.mainskin--header {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px 0px;
  position: relative;
  flex-direction: row;
  z-index: 90;
}

.mainskin--buttons {
  height: 30px;
}

.gnbWrap .material-icons {
  font-size: 1em;
}

#mainskin--list {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-content: center;
  justify-content: center;
  align-items: center;
  position: relative;
}

#mainskin--list.inactive {
  opacity: 0.25;
}

.main_layout {
  display: flex;
  position: relative;
  box-sizing: border-box;
}

.main_layout.loading {
  opacity: 0;
  animation: view-onoff 1s;
  animation-fill-mode: backwards;
}

@keyframes view-onoff {
  0% {
    display: flex;
  }

  100% {
    display: none;
  }
}

.main_layout.active {
  display: flex;
  border: 1px solid white;
  padding: 20px;
  box-shadow: 0px 0px 1px black;
}

.mainskin--background {
  width: 200%;
  height: 200%;
  position: absolute;
  top: -50%;
  left: -50%;
  z-index: -1;
  transition-duration: 0s;
}

.mainskin--btns {
  display: none;
  position: absolute;
  top: 3px;
  left: 3px;
  z-index: 99;
}

.block_num {
  display: inline-block;
  padding: 0px 4px;
  background: black;
  color: white;
  border-radius: 5px;
  margin: 0px 2px;
  font-size: 11px;
  font-weight: normal;
  font-family: 'dotum', serif;
}

.main_layout .mainskin--btns .mainskin--btn {
  width: 25px;
  height: 25px;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  padding: 0;
  margin: 0px;
  box-shadow: 0px 1px 5px -2px rgb(0 0 0 / 56%);
  border: 1px solid;
}

.main_layout.active:hover {
  z-index: 50 !important;
}

.main_layout.active:hover>.mainskin--btns>.block_num {
  display: none;
}

.main_layout.active:hover>.mainskin--btns>.mainskin--btn {
  display: inline-flex;
}

.mainskin--btn .material-icons {
  font-size: 16px;
}

/* 스티커 */
#sticker_window {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
}

#sticker_window.loaded {
  opacity: 1;
}

#sticker_window.active {
  pointer-events: all;
  opacity: 1;
}

#sticker_window.inactive {
  opacity: 0.25;
}

.mainskin--board--sticker {
  background: white;
  color: black;
  padding: 20px;
  border: 1px solid black;
}

.mainskin--board--export {
  padding: 20px;
  background: white;
  border: 1px solid black;
  color: black;
}

.mainskin--board--export textarea,
.mainskin--board--export select {
  background: white;
  color: black;
  border: 1px solid #333;
  border-radius: 0px;
}

.main--sticker {
  position: absolute !important;
  display: inline-flex;
  pointer-events: none;
}

.main--sticker.active {
  pointer-events: visible;
  transition-duration: 0s;
}

.main--sticker.active:hover {
  border: 1px solid rgba(0, 0, 0, 0.575);
  background: rgb(255 255 255 / 40%);
}

.main--sticker img {
  pointer-events: none;
}

.main--sticker--mod,
.main--sticker--del {
  display: none;
  position: absolute;
  justify-content: flex-end;
  z-index: 99;
}

.main--sticker.active:hover .main--sticker--mod,
.main--sticker.active:hover .main--sticker--del,
.main--sticker.active:hover .main--sticker--theme {
  display: flex;
}

.main--sticker--mod {
  top: 0;
  right: 0;
  padding: 10px;
}

.main--sticker--del {
  bottom: 0;
  right: 0;
  padding: 10px;
}

.main--sticker--theme {
  display: none;
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 10px;
  z-index: 99;
}

.main--sticker--theme .main--sticker--select {
  color: rgb(129 129 129);
  background: white;
  border-radius: 20px;
  font-weight: bold;
  font-family: pretendard;
  font-size: 11px;
}

.main--sticker--mod i,
.main--sticker--del i {
  color: white;
  filter: drop-shadow(1px 0px 0px #9d9d9d) drop-shadow(-1px 0px 0px #9d9d9d) drop-shadow(0px 1px 0px #9d9d9d) drop-shadow(0px -1px 0px #9d9d9d);
  position: relative !important;
  top: unset !important;
  left: unset !important;
  margin: 2px;
  font-size: 16px;
  width: 18px !important;
  height: 18px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ui-resizable-handle {
  padding: 5px;
}

.ui-resizable-handle.ui-icon-gripsmall-diagonal-se {
  padding: 0px;
}

/* 스티커용 테마 */

/* 부드러운 하얀 그림자 */
.s_style1 img {
  filter: drop-shadow(0px 0px 5px rgba(255, 255, 255, 0.3));
}

/* 부드러운 검은 그림자 */
.s_style2 img {
  filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.3));
}

/* 딱딱한 그림자 */
.s_style3 img {
  filter: drop-shadow(5px 5px 0px rgba(0, 0, 0, 0.2));
}

/* 흰 선 */
.s_style4 img {
  filter: drop-shadow(1px 0px 0px white) drop-shadow(-1px 0px 0px white) drop-shadow(0px 1px 0px white) drop-shadow(0px -1px 0px white);
}

/* 검은 선 */
.s_style5 img {
  filter: drop-shadow(1px 0px 0px black) drop-shadow(-1px 0px 0px black) drop-shadow(0px 1px 0px black) drop-shadow(0px -1px 0px black);
}

/* 흑백 */
.s_style6 img {
  filter: grayscale(1);
}

/* 세피아 */
.s_style7 img {
  filter: sepia(0.5);
}

/* 불투명 */
.s_style8 img {
  mask-image: linear-gradient(to bottom, white 80%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, white 80%, transparent);
}

/* 애니메이션 */
/* 옆으로 흔들리는 효과 */
.s_style9 img {
  animation-name: headShake2;
  animation-iteration-count: infinite;
  animation-duration: 5s;
}

/* 또이잉 */
.s_style10 img {
  animation-name: rubberBand2;
  animation-iteration-count: infinite;
  animation-duration: 5s;
}

/* 통통 튀는 효과 */
.s_style11 img {
  animation-name: bounce2;
  animation-iteration-count: infinite;
  animation-duration: 5s;
}

/* 깜빡임 */
.s_style12 img {
  animation-name: flicker_slowly;
  animation-iteration-count: infinite;
  animation-duration: 5s;
  animation-timing-function: linear;
}

/* 썬캐쳐 */
.s_style13 img {
  animation-name: hanging_slowly;
  animation-iteration-count: infinite;
  animation-duration: 5s;
}

/* 천천히 회전 */
.s_style14 img {
  animation-name: rotate_slowly;
  animation-iteration-count: infinite;
  animation-duration: 5s;
  animation-timing-function: linear;
}

/* 프레임 */
/* 디지털 */
.s_style15 {
  border: 2px ridge;
}

.s_style15 img {
  border: 2px inset;
  overflow: hidden;
}

.s_style15::before {
  content: "";
  width: 100%;
  height: 28px;
  top: 0px;
  left: 0px;
  position: absolute;
  border: 2px outset;
  box-sizing: border-box;
  align-items: center;
  pointer-events: none;
}

.s_style15::after {
  content: "\25a1\0020\2015\0020\0058";
  font-family: "DNFBITBITV2";
  font-size: 17px;
  text-align: right;
  position: absolute;
  top: 0;
  right: 7px;
  display: inline-flex;
  align-items: center;
  align-content: center;
  height: 28px;
}

@keyframes rotate_slowly {
  from {
    rotate: 0deg;
  }

  to {
    rotate: 360deg;
  }
}

@keyframes hanging_slowly {

  0%,
  100% {
    transform: perspective(300px) rotateY(0deg);
  }

  10% {
    transform: perspective(300px) rotateY(30deg);
  }

  20% {
    transform: perspective(300px) rotateY(-30deg);
  }

  30% {
    transform: perspective(300px) rotateY(10deg);
  }

  34% {
    transform: perspective(300px) rotateY(-5deg);
  }

  38%,
  55% {
    transform: perspective(300px) rotateY(3deg);
  }

  57% {
    transform: perspective(300px) rotateY(-70deg);
  }

  60% {
    transform: perspective(300px) rotateY(60deg);
  }

  70% {
    transform: perspective(300px) rotateY(-50deg);
  }

  80% {
    transform: perspective(300px) rotateY(30deg);
  }

  90% {
    transform: perspective(300px) rotateY(-10deg);
  }
}

@keyframes flicker_slowly {

  0%,
  100% {
    opacity: 1;
    filter: blur(0px);
  }

  50%,
  80% {
    opacity: 1;
    filter: blur(1px);
  }

  69% {
    opacity: 1;
    filter: blur(0.5px);
  }

  70%,
  75%,
  81% {
    opacity: 0.2;
    filter: blur(1px);
  }
}

@keyframes bounce2 {

  80%,
  84%,
  91%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }

  88%,
  89% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1);
    transform: translate3d(0, -30px, 0) scaleY(1.1);
  }

  94% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05);
    transform: translate3d(0, -15px, 0) scaleY(1.05);
  }

  96% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translateZ(0) scaleY(0.95);
    transform: translateZ(0) scaleY(0.95);
  }

  98% {
    -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);
    transform: translate3d(0, -4px, 0) scaleY(1.02);
  }
}

@keyframes headShake2 {
  80% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  81% {
    -webkit-transform: translateX(-6px) rotateY(-9deg);
    transform: translateX(-6px) rotateY(-9deg);
  }

  83% {
    -webkit-transform: translateX(5px) rotateY(7deg);
    transform: translateX(5px) rotateY(7deg);
  }

  85% {
    -webkit-transform: translateX(-3px) rotateY(-5deg);
    transform: translateX(-3px) rotateY(-5deg);
  }

  89% {
    -webkit-transform: translateX(2px) rotateY(3deg);
    transform: translateX(2px) rotateY(3deg);
  }

  90% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes rubberBand2 {
  80% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }

  86% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  88% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  90% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  93% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }

  95% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }

  to {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
}

/* 로딩 화면 */
.load_window {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: white;
  color: #9d9d9d;
  font-size: 13px;
  line-height: 30px;
  flex-direction: column;
  align-items: center;
  align-content: center;
  justify-content: center;
  font-weight: bold;
  z-index: 999;
  animation: fadeIn 0.5s 0s, fadeOut_G 0.5s 6s;
  animation-fill-mode: forwards;
}

@keyframes fadeOut_G {
  0% {
    opacity: 1;
  }

  99% {
    opacity: 0;
  }

  100% {
    opacity: 0;
    display: none;
  }
}

.load_window.loaded {
  animation: fadeOut 0.5s;
}

.loading_animation {
  width: 75px;
  height: 75px;
  background-image: linear-gradient(to bottom,
      #fff2f4,
      #ffffe4,
      #f3fcff,
      #fff2f4);
  border-radius: 100%;
  animation-duration: 0.5s;
  animation-name: prismRainbow;
  animation-iteration-count: infinite;
  -webkit-text-fill-color: transparent;
  animation-timing-function: linear;
  rotate: 135deg;
  border: 1px solid #c1c1c1;
  box-shadow: 4px -5px 0px #c1c1c1;
}

@keyframes prismRainbow {
  0% {
    background-position-y: 0;
  }

  100% {
    background-position-y: 75px;
  }
}

.view_slider {
  display: flex !important;
  opacity: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  max-height: 0 !important;
  z-index: -99 !important;
}

/* 모바일 대응 */
/* PC */
@media all and (min-width: 1001px) {
  #load_window {
    display: none !important;
  }

  #load_window_pc {
    display: flex;
  }

  #mobile_window {
    display: none;
  }

  .main_layout.pc_hide {
    display: none;
  }

  .main_layout.pc_hide.loaded {
    display: none;
  }

  .main_layout.pc_hide.active {
    display: flex;
  }

  .main_layout.loaded {
    display: flex;
  }

  .view-btn-icon {
    display: none;
  }
}

/* 모바일 */
@media all and (max-width: 1000px) {
  #load_window {
    display: flex;
  }

  #load_window_pc {
    display: none !important;
  }

  #mobile_window {
    display: flex;
  }

  .main_layout.loaded {
    display: none;
  }

  .main_layout.loaded.mo_show {
    display: flex;
  }

  #sticker_window {
    display: none;
  }

  .main_layout {
    display: none;
  }

  .main_layout.mo_hide {
    display: none;
  }

  .main_layout.mo_hide.loaded {
    display: none;
  }

  .main_layout.mo_show {
    width: 100% !important;
    display: flex;
    top: 0 !important;
    left: 0 !important;
    translate: none !important;
    position: relative !important;
  }

  .mainskin--slider {
    min-height: 400px;
  }

  .view-btn-text {
    display: none;
  }
}

#mobile_window {
  flex-direction: column;
  align-items: center;
  align-content: center;
  height: max-content;
  padding: 10px;
}

/* 작성 */

.mainskin--write {
  width: 50%;
  min-width: 400px;
  height: fit-content;
}

.mainskin--edit {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: center;
}

.mainskin--edit > * {
  font-family: freesentation5;
}

.mainskin--edit form {
  width: 100%;
}

.mainskin--edit dd {
  display: flex;
  flex-direction: row;
  align-items: center;
  align-content: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-inline-start: 0px;
}

.mainskin--setting {
  display: flex;
  justify-content: center;
  margin: 15px 0px;
}

.mainskin--sticker {
  display: flex;
  justify-content: center;
}

.layout_list {
  display: none;
  flex-direction: column;
  margin-bottom: 20px;
  margin: 0 auto;
  align-items: center;
}

.layout-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.layouts {
  padding: 2px;
  background: white;
  color: black;
  margin: 2px;
  height: 28px;
  display: flex;
  align-items: center;
  width: 300px;
  border-radius: 4px;
  justify-content: flex-start;
  box-sizing: border-box;
}

.listbtns {
  width: 80px;
  text-align: right;
  position: absolute;
  right: 5px;
}

.layout-wrapper .listbtns .mainskin--btn {
  width: 21px;
  height: 21px;
  color: black;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  padding: 0;
  margin: 0px;
}

.layouts.on {
  border: 1px solid black;
}

.layouts:hover {
  background: rgb(206, 206, 206);
}

.layout-wrapper .listbtns .mainskin--btn:hover {
  background: transparent;
}

.layout-wrapper .listbtns .mainskin--btn:hover * {
  color: rgb(121, 121, 121);
}

.layout-wrapper .listbtns .mainskin--btn * {
  font-size: 14px;
  color: black;
}

.mainskin--board--setting {
  display: flex;
  width: 300px;
  background: white;
  color: black;
  padding: 20px;
  box-sizing: border-box;
  border: 1px solid black;
}

#edit_window {
  display: none;
  position: fixed;
  width: 700px;
  height: fit-content;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: 99;
  background: white;
  color: black;
  border: 1px solid black;
  box-shadow: 9px 11px 0px rgb(0 0 0 / 17%);
  padding: 10px;
  box-sizing: border-box;
  max-height: 600px;
  overflow-x: hidden;
  overflow-y: scroll;
  transition: none;
}

#edit_window label {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  margin-right: 8px;
}

div#edit_window::-webkit-scrollbar {
  background: white;
  display: block;
  width: 6px;
}

div#edit_window::-webkit-scrollbar-thumb {
  background: black;
  border-radius: 5px;
}

#edit_window select,
#edit_window textarea {
  border-radius: 0px;
  border: 1px solid black;
  margin: 3px 5px;
  background: white;
  color: black;
}

.desc {
  padding: 2px 5px;
  background: black;
  display: inline-block;
  color: white;
  margin: 3px 0px;
  cursor: pointer;
}

.desc_ {
  display: none;
}

.desc_text {
  padding: 2px 5px;
  background: black;
  display: inline-block;
  color: white;
  margin: 3px 0px;
}

.mainskin--line {
  width: 70%;
  height: 0px;
  border-top: 1px dashed black;
}

.mainskin--input,
.mainskin--input[type="text"] {
  border: 1px solid black;
  border-radius: 0px;
  margin: 3px 5px;
  height: 30px;
  line-height: 30px;
  background: white;
  color: black;
}

.mainskin--input.sml {
  width: 70px;
}

.edit_1 {
  display: flex;
  flex-direction: row;
  padding: 5px 0px;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
  margin: 5px 0px;
}

.edit_1_name {
  font-size: 1.2em;
  font-weight: bold;
  line-height: 1em;
}

.edit_2 {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.default_edit,
.board_edit,
.page_edit,
.iframe_edit,
.slider_edit,
.image_edit,
.clock_edit,
.dday_edit,
.latest_edit,
.links_edit,
.latest_n_edit {
  display: none;
}

.text_edit {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  height: 0;
  overflow: hidden;
}

.text_edit.active_edit {
  opacity: 1;
  pointer-events: visible;
  position: relative;
  height: fit-content;
}

.active_edit {
  display: block !important;
}

/* 텍스트 */
#text_edit iframe {
  min-height: 350px;
  visibility: visible;
}

.mainskin--text--text {
  line-height: 1em;
}

/* 슬라이더 */
.mainskin--slider {
  width: 100%;
  height: 100%;
  display: grid;
}

.mainskin--slider--image {
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
}

.mainskin--slider--text {
  position: absolute;
  z-index: 2;
  top: 10px;
  left: 10px;
  font-weight: bold;
  color: white;
  text-shadow: 1px 1px 0px black, 1px -1px 0px black, -1px 1px 0px black,
    -1px -1px 0px black;
}

.mainskin--slider .swiper-container {
  width: 100%;
  height: 100%;
}

.mainskin--slider .swiper-pagination {
  bottom: 10px;
  left: 50%;
  translate: -50% 0;
}

.mainskin--slider .swiper-prev,
.mainskin--slider .swiper-next {
  position: absolute;
  bottom: 10px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  color: white;
  text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
}

.mainskin--slider .swiper-prev {
  left: 10px;
}

.mainskin--slider .swiper-next {
  right: 10px;
}

.mainskin--slider .swiper-pagination-bullet {
  background: gray;
  box-shadow: 0px 0px 3px black;
  margin: 0px 3px;
  position: relative;
}

.mainskin--slider .swiper-pagination-bullet-active {
  background: white;
  box-shadow: 0px 0px 5px white, 0px 0px 3px black;
  opacity: 1;
}

/* 시계 */
.mainskin--clocks {
  display: flex;
  padding: 2px;
  flex-direction: column;
}

.mainskin--clock span {
  pointer-events: none;
  font-family: unset;
}

.mainskin--clock.big,
#text_test1.big,
#text_test2.big,
#text_test3.big {
  font-size: 50px;
  line-height: 1em;
}

.mainskin--clock.medium,
#text_test1.medium,
#text_test2.medium,
#text_test3.medium {
  font-size: 28px;
  line-height: 1em;
}

.mainskin--clock.small,
#text_test1.small,
#text_test2.small,
#text_test3.small {
  font-size: 14px;
  line-height: 1em;
}

#text_test1,
#text_test2,
#text_test3 {
  line-height: 100%;
}

/* 디데이 */
.mainskin--dday {
  margin: 5px 0px;
  padding: 5px 10px;
  display: flex;
  flex-direction: column;
}

.mainskin--dday--text {
  font-size: 20px;
  line-height: 1em;
}

.mainskin--dday--day {
  font-size: 30px;
  font-weight: bold;
  line-height: 1em;
}

.mainskin--dday--text2 {
  font-size: 18px;
  margin-left: 5px;
  font-weight: normal;
}

/* 링크 */
.mainskin--links {
  display: flex;
}

.mainskin--link {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: 2px;
  transition-duration: 0.5s;
  width: 30px;
  height: 30px;
  position: relative;
}

.mainskin--icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.link_row {
  flex-direction: column;
}

.link_colum {
  flex-direction: row;
}

.mainskin--link .material-icons {
  font-size: 18px;
}

.mainskin--link.round .mainskin--icon {
  width: 25px;
  height: 25px;
  border-radius: 100%;
}

.mainskin--link.round .mainskin--link--text {
  opacity: 0;
  position: absolute;
  width: 80px;
  text-align: center;
  transition-duration: 0.5s;
}

.mainskin--link.round:hover .mainskin--link--text {
  opacity: 1;
}

.mainskin--link.diamond .mainskin--icon {
  width: 25px;
  height: 25px;
  rotate: 45deg;
}

.mainskin--link.diamond .material-icons {
  rotate: -45deg;
}

.mainskin--link.diamond .mainskin--link--text {
  opacity: 0;
  position: absolute;
  width: 80px;
  text-align: center;
  transition-duration: 0.5s;
}

.mainskin--link.diamond:hover .mainskin--link--text {
  opacity: 1;
}

.mainskin--link.text {
  justify-content: space-between;
  width: 100px;
  height: 25px;
  padding: 0px 6px;
  margin: 2px;
}

.mainskin--link.text.link_row {
  height: 100px;
  width: 25px;
  padding: 6px 0px;
}

.mainskin--link.text.link_row .mainskin--link--text {
  writing-mode: vertical-lr;
}

/* 이웃 최신글 */
.latest-n-table td {
  text-align: center;
}
.latest-n-table thead th {
  border: 1px solid black;
  background: white;
  color: black;
}
.latest-n-table input {
  width: 100%;
}
.latest-n-merged {
  display: flex;
  flex-direction: column;
  padding: 10px;
}

.latest-n-merged a {
  margin: 6px 4px;
}
.latest-item {
  background: var(--mainskin-base);
  color: var(--mainskin-text);
  padding: 7px;
  border-radius: 5px;
  border: 1px solid var(--mainskin-point);
  box-shadow: 3px 5px 0px rgba(0, 0, 0, 0.1);
  transition-duration: 0.4s;
  position: relative;
}
.latest-item:hover {
  background: var(--mainskin-text);
  color: var(--mainskin-base);
  border: 1px solid var(--mainskin-base);
  translate: 3px 5px;
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.1);
}
.latest-title {
  font-family: Paperlogy-8ExtraBold;
  padding: 10px;
  font-size: 20px;
}
.latest-subtitle{
  background: var(--mainskin-point);
  color: var(--mainskin-base);
  position: absolute;
  font-family: Paperlogy-5Medium;
  font-size: 10px;
  top: -18px;
  left: 10px;
  padding: 0px 4px;
  height: 18px;
  border-radius: 5px 5px 0px 0px;
}
.latest-name {
  font-family: Paperlogy-5Medium;
  font-size: 13px;
}

/* 테마 */
/* 추가할 때는 .main_layout.스킨명 으로 작성합니다. */
.mainskin--themehead {
  display: none;
}

/* 기본 */
.main_layout.main_default {
  background: linear-gradient(145deg,
      rgba(255, 255, 255, 0.74),
      rgb(255 255 255 / 22%));
  box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.1);
}

/* 유리재질 */
.main_layout.main_glass {
  background: linear-gradient(145deg,
      rgba(255, 255, 255, 0.521),
      rgba(255, 255, 255, 0.096));
  backdrop-filter: blur(20px);
  border-top: 2px solid rgba(255, 255, 255, 0.8);
  border-bottom: 2px solid rgb(0 0 0 / 18%);
}

/* 디지털 */
.main_layout.main_digital {
  font-family: galmuri7;
  border: 2px inset;
  overflow: hidden;
}

.main_layout.main_digital::before {
  content: "";
  width: 100%;
  height: 28px;
  top: 0px;
  left: 0px;
  position: absolute;
  border: 2px outset;
  box-sizing: border-box;
  align-items: center;
  pointer-events: none;
}

.main_layout.main_digital>.mainskin--themehead {
  display: block;
  height: 32px;
  width: 100%;
}

/* 고딕 */
.main_layout.main_gothic {
  border-image: url(https://imgur.com/VymWv2H.png);
  border-image-width: 60px;
  border-image-slice: 100;
  border-image-repeat: stretch;
}

/* 폴라로이드 */
.main_layout.main_pola {
  border-width: 10px 10px 45px 10px;
  border-color: white;
  border-style: solid;
  box-shadow: 0px 0px 5px inset rgba(0, 0, 0, 0.2), 0px 0px 16px -6px #00000061;
  rotate: -3deg;
}

/* 모눈 배경 */
.main_layout.main_grid {
  background-size: 35px 35px !important;
  background-position: 15px 15px !important;
  box-shadow: 5px 5px 0px rgba(0, 0, 0, 0.1);
}

/* 체크 배경 */
.main_layout.main_checked {
  background-size: 30px 30px !important;
  background-position: 15px 15px !important;
  box-shadow: 5px 5px 0px rgba(0, 0, 0, 0.1);
}

/* 효과 */
/* 비뚤게 */
.main_layout.effect_tilt {
  transition-duration: 0.5s;
}

.main_layout.effect_tilt:hover {
  rotate: 1deg;
}

/* 커지는 효과 */
.main_layout.effect_larger {
  scale: 1;
  transition-duration: 0.5s;
}

.main_layout.effect_larger:hover {
  scale: 1.05;
}

/* 반사광 효과 */
.main_layout.effect_sparkle {
  overflow: hidden;
}

.main_layout.effect_sparkle::after {
  content: "";
  position: absolute;
  width: calc(100% + 350px);
  height: 300px;
  rotate: -30deg;
  background: linear-gradient(184deg, white, #ffffff99);
  transform: translate(0, -0%);
  transition-timing-function: cubic-bezier(0.03, 0.61, 0.44, 1.01);
  transition-duration: 1s;
  z-index: 10;
  bottom: -600px;
  left: -175px;
  transition-timing-function: cubic-bezier(0, 0.93, 0.97, 0.05);
  pointer-events: none;
}

.main_layout.effect_sparkle:hover::after {
  bottom: calc(100% + 350px);
}

/* 들림 */
.main_layout.effect_lift {
  transform: translate(0px, 0px);
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.1);
  transition-duration: 0.5s;
}

.main_layout.effect_lift:hover {
  box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.1);
  transform: translate(-3px, -3px);
}

/* 흑백 > 컬러 */

.main_layout.effect_colorful {
  transition-duration: 0.5s;
  filter: grayscale(1);
}

.main_layout.effect_colorful:hover {
  filter: grayscale(0);
}

/* 컬러 > 흑백 */

.main_layout.effect_mono {
  transition-duration: 0.5s;
  filter: grayscale(0);
}

.main_layout.effect_mono:hover {
  filter: grayscale(1);
}

/* 등장 효과 */
.aEffect_fadeIn {
  animation: fadeIn 1s;
}

.aEffect_fadeInDown {
  animation: fadeInDown 1s;
}

.aEffect_fadeInLeft {
  animation: fadeInLeft 1s;
}

.aEffect_fadeInRight {
  animation: fadeInRight 1s;
}

.aEffect_fadeInUp {
  animation: fadeInUp 1s;
}

.aEffect_rotateInDownRight {
  animation: rotateInDownRight 1s;
}

.aEffect_rotateInDownLeft {
  animation: rotateInDownLeft 1s;
}

.aEffect_rotateInUpRight {
  animation: rotateInUpRight 1s;
}

.aEffect_rotateInUpLeft {
  animation: rotateInUpLeft 1s;
}

.aEffect_zoomIn {
  animation: zoomIn 1s;
}

.aEffect_zoomInDown {
  animation: zoomInDown 1s;
}

.aEffect_zoomInLeft {
  animation: zoomInLeft 1s;
}

.aEffect_zoomInRight {
  animation: zoomInRight 1s;
}

.aEffect_zoomInUp {
  animation: zoomInUp 1s;
}

.aEffect_bounceIn {
  animation: bounceIn 1s;
}

.aEffect_bounceInDown {
  animation: bounceInDown 1s;
}

.aEffect_bounceInLeft {
  animation: bounceInLeft 1s;
}

.aEffect_bounceInRight {
  animation: bounceInRight 1s;
}

.aEffect_bounceInUp {
  animation: bounceInUp 1s;
}

.aEffect_backInDown {
  animation: backInDown 1s;
}

.aEffect_backInLeft {
  animation: backInLeft 1s;
}

.aEffect_backInRight {
  animation: backInRight 1s;
}

.aEffect_backInUp {
  animation: backInUp 1s;
}

.aEffect_slideIn {
  animation: slideIn 1s;
}

.aEffect_slideInDown {
  animation: slideInDown 1s;
}

.aEffect_slideInLeft {
  animation: slideInLeft 1s;
}

.aEffect_slideInRight {
  animation: slideInRight 1s;
}

.aEffect_slideInUp {
  animation: slideInUp 1s;
}

.aEffect_flipInX {
  animation: flipInX 1s;
}

.aEffect_flipInY {
  animation: flipInY 1s;
}

.main_btn.active {
  color: var(--color-point2) !important;
  background: var(--color-base) !important;
}