@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;
}

@font-face {
    font-family: 'PfStardust30';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2506-1@1.0/PFStardust.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'PfStardust30';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2506-1@1.0/PFStardustBold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'PfStardust30';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2506-1@1.0/PFStardustExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-display: swap;
}

/* 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;
}

/* ===================== 커스텀추가 START : 스티커용 CRT (s_style16) / 오르빗 (s_style17) ===================== */
/* 스티커용 CRT = 레이아웃 CRT(main_crt)의 축소판. 베젤=관리자 배경색, LED=포인트색, 버튼은 검은 아웃라인 포함 */
.s_style16 {
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  border-style: solid;
  border-color: transparent;
  border-width: 9px 11px 22px 11px;   /* 스티커용: 메인스킨보다 살짝 얇게 */
  border-radius: 13px;
  background:
    /* LED(포인트색, 깜빡임) + 어두운 점 1개 */
    radial-gradient(circle 3px at 15px calc(100% - 11px), var(--mainskin-point, #7CFCB4) 70%, transparent 72%),
    radial-gradient(circle 2.5px at 26px calc(100% - 11px), rgba(0,0,0,0.35) 70%, transparent 72%),
    /* 버튼 2칸 (빨강/노랑) */
    linear-gradient(180deg, #ff5a52, #b3261e),
    linear-gradient(180deg, #ffe35c, #e3a90f),
    /* 각 버튼 검은 아웃라인 (버튼보다 2px 크게 뒤에 깔) */
    linear-gradient(#0a0a0a, #0a0a0a),
    linear-gradient(#0a0a0a, #0a0a0a),
    /* 베젤: 반투명 베벨(명암) */
    linear-gradient(165deg, rgba(255,255,255,0.10), rgba(255,255,255,0) 42%, rgba(0,0,0,0.14));
  background-color: var(--mainskin-base, #3a3030);
  background-clip: border-box;
  background-origin: border-box;
  background-repeat: no-repeat;
  background-size:
    auto, auto,
    9px 7px, 9px 7px,
    13px 11px, 13px 11px,
    100% 100%;
  background-position:
    0 0, 0 0,
    right 11px bottom 8px, right 24px bottom 8px,
    right 9px bottom 6px, right 22px bottom 6px,
    0 0;
  box-shadow: 0 8px 20px rgba(0,0,0,0.35), 0 0 0 1px rgba(0,0,0,0.2);
  animation: sticker-led-blink 1.4s steps(1, end) infinite;
}
/* 편집 중 hover 하이라이트가 베젤을 무너뜨리지 않게 가드 */
.main--sticker.s_style16.active:hover {
  border-style: solid;
  border-width: 9px 11px 22px 11px;
  background-color: var(--mainskin-base, #3a3030);
}
.s_style16 img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* 화면: 유리광 + 스캔라인 + 검은 테두리(비네팅) */
.s_style16::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
  pointer-events: none;
  z-index: 2;
  background:
    linear-gradient(120deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.04) 16%, transparent 36%),
    repeating-linear-gradient(0deg, rgba(0,0,0,0.10) 0 1px, transparent 1px 3px);
  box-shadow: inset 0 0 0 4px #1a1c18, inset 0 0 20px rgba(0,0,0,0.7);
}
/* 화면 위 녹색 글리치 (main_crt와 동일) */
.s_style16::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
  pointer-events: none;
  z-index: 3;
  mix-blend-mode: screen;
  background:
    repeating-linear-gradient(0deg, rgba(90,255,150,0.05) 0 2px, transparent 2px 4px),
    linear-gradient(0deg, rgba(20,120,60,0.06), rgba(20,120,60,0.06));
  background-size: 100% 100%, 100% 100%;
  background-repeat: repeat, no-repeat;
  background-position: 0 0, 0 0;
}
@media (prefers-reduced-motion: reduce) { .s_style16::after { animation: none; } }
@keyframes sticker-led-blink {
  0%   { background-image:
    radial-gradient(circle 3px at 15px calc(100% - 11px), var(--mainskin-point, #7CFCB4) 70%, transparent 72%),
    radial-gradient(circle 2.5px at 26px calc(100% - 11px), rgba(0,0,0,0.35) 70%, transparent 72%),
    linear-gradient(180deg, #ff5a52, #b3261e),
    linear-gradient(180deg, #ffe35c, #e3a90f),
    linear-gradient(#0a0a0a, #0a0a0a),
    linear-gradient(#0a0a0a, #0a0a0a),
    linear-gradient(165deg, rgba(255,255,255,0.10), rgba(255,255,255,0) 42%, rgba(0,0,0,0.14));
  }
  50%  { background-image:
    radial-gradient(circle 3px at 15px calc(100% - 11px), var(--mainskin-point, #7CFCB4) 70%, transparent 72%),
    radial-gradient(circle 2.5px at 26px calc(100% - 11px), rgba(0,0,0,0.35) 70%, transparent 72%),
    linear-gradient(180deg, #ff5a52, #b3261e),
    linear-gradient(180deg, #ffe35c, #e3a90f),
    linear-gradient(#0a0a0a, #0a0a0a),
    linear-gradient(#0a0a0a, #0a0a0a),
    linear-gradient(165deg, rgba(255,255,255,0.10), rgba(255,255,255,0) 42%, rgba(0,0,0,0.14));
  }
  51%  { background-image:
    radial-gradient(circle 3px at 15px calc(100% - 11px), rgba(70,90,78,0.45) 70%, transparent 72%),
    radial-gradient(circle 2.5px at 26px calc(100% - 11px), rgba(0,0,0,0.35) 70%, transparent 72%),
    linear-gradient(180deg, #ff5a52, #b3261e),
    linear-gradient(180deg, #ffe35c, #e3a90f),
    linear-gradient(#0a0a0a, #0a0a0a),
    linear-gradient(#0a0a0a, #0a0a0a),
    linear-gradient(165deg, rgba(255,255,255,0.10), rgba(255,255,255,0) 42%, rgba(0,0,0,0.14));
  }
  100% { background-image:
    radial-gradient(circle 3px at 15px calc(100% - 11px), rgba(70,90,78,0.45) 70%, transparent 72%),
    radial-gradient(circle 2.5px at 26px calc(100% - 11px), rgba(0,0,0,0.35) 70%, transparent 72%),
    linear-gradient(180deg, #ff5a52, #b3261e),
    linear-gradient(180deg, #ffe35c, #e3a90f),
    linear-gradient(#0a0a0a, #0a0a0a),
    linear-gradient(#0a0a0a, #0a0a0a),
    linear-gradient(165deg, rgba(255,255,255,0.10), rgba(255,255,255,0) 42%, rgba(0,0,0,0.14));
  }
}
@media (prefers-reduced-motion: reduce) { .s_style16 { animation: none; } }

/* 커스텀추가: 스티커용 CRT(스캔라인 없음) — s_style16과 동일하되 ::before의 스캔라인 결과
   ::after의 스캔라인+글리치를 뺀 버전. 사이트 전체 스캔라인과 중복될 때 선택 */
.s_style18 {
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  border-style: solid;
  border-color: transparent;
  border-width: 9px 11px 22px 11px;
  border-radius: 13px;
  background:
    radial-gradient(circle 3px at 15px calc(100% - 11px), var(--mainskin-point, #7CFCB4) 70%, transparent 72%),
    radial-gradient(circle 2.5px at 26px calc(100% - 11px), rgba(0,0,0,0.35) 70%, transparent 72%),
    linear-gradient(180deg, #ff5a52, #b3261e),
    linear-gradient(180deg, #ffe35c, #e3a90f),
    linear-gradient(#0a0a0a, #0a0a0a),
    linear-gradient(#0a0a0a, #0a0a0a),
    linear-gradient(165deg, rgba(255,255,255,0.10), rgba(255,255,255,0) 42%, rgba(0,0,0,0.14));
  background-color: var(--mainskin-base, #3a3030);
  background-clip: border-box;
  background-origin: border-box;
  background-repeat: no-repeat;
  background-size:
    auto, auto,
    9px 7px, 9px 7px,
    13px 11px, 13px 11px,
    100% 100%;
  background-position:
    0 0, 0 0,
    right 11px bottom 8px, right 24px bottom 8px,
    right 9px bottom 6px, right 22px bottom 6px,
    0 0;
  box-shadow: 0 8px 20px rgba(0,0,0,0.35), 0 0 0 1px rgba(0,0,0,0.2);
  animation: sticker-led-blink 1.4s steps(1, end) infinite;
}
.main--sticker.s_style18.active:hover {
  border-style: solid;
  border-width: 9px 11px 22px 11px;
  background-color: var(--mainskin-base, #3a3030);
}
.s_style18 img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* 유리광 + 검은 테두리(비네팅)만 유지, 스캔라인 결 제거 */
.s_style18::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
  pointer-events: none;
  z-index: 2;
  background:
    linear-gradient(120deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.04) 16%, transparent 36%);
  box-shadow: inset 0 0 0 4px #1a1c18, inset 0 0 20px rgba(0,0,0,0.7);
}
/* 스캔라인/글리치 없음, 옅은 녹색 틴트만 유지 */
.s_style18::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
  pointer-events: none;
  z-index: 3;
  mix-blend-mode: screen;
  background: linear-gradient(0deg, rgba(20,120,60,0.06), rgba(20,120,60,0.06));
}

/* 스티커용 오르빗 = 레이아웃 orbit의 축소판. 베젤은 관리자 배경색, 라인/글로우는 포인트색 연동 */
.s_style17 {
  --hud: var(--mainskin-point, #ffb86b);
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  border-style: solid;
  border-color: transparent;
  border-width: 4px;   /* 커스텀추가: 3px -> 4px로 살짝 더 두껍게 */
  border-radius: 0px;
  background: rgba(0,0,0,0.6);
  background-color: rgba(0,0,0,0.6);
  box-shadow:
    0 0 14px color-mix(in srgb, var(--hud) 25%, transparent),
    inset 0 0 0 1.5px color-mix(in srgb, var(--hud) 85%, transparent);   /* 커스텀추가: 55% -> 85%로 진하게 */
}
.s_style17 img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* 화면: 실선 궤도 테두리 + 코너 브래킷(HUD색 연동) — main_layout.orbit의 축소판, 스티커는 실선/각진 모서리로 구분 */
.s_style17::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 0px;
  pointer-events: none;
  z-index: 2;
  border: 1.5px solid color-mix(in srgb, var(--hud) 85%, transparent);   /* 커스텀추가: 40% -> 85%로 진하게, 1px -> 1.5px로 두껍게 */
  filter: drop-shadow(0 0 2px color-mix(in srgb, var(--hud) 70%, transparent));
  background:
    linear-gradient(var(--hud),var(--hud)),
    linear-gradient(var(--hud),var(--hud)),
    linear-gradient(var(--hud),var(--hud)),
    linear-gradient(var(--hud),var(--hud));
  background-repeat: no-repeat;
  background-size: 10px 1.5px, 1.5px 10px, 10px 1.5px, 1.5px 10px;
  background-position:
    left 2px top 2px,
    left 2px top 2px,
    right 2px bottom 2px,
    right 2px bottom 2px;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.5);
}
/* 화면 위: 옅은 스캔라인 */
.s_style17::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 0px;
  pointer-events: none;
  z-index: 3;
  mix-blend-mode: multiply;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0.16) 0px, rgba(0,0,0,0.16) 1px, transparent 2px, transparent 3px);
}
/* 반짝이는 별 하나(고정 앰버) — 스티커는 작아서 1개만, 우상단 포인트 */
.s_style17 .sticker-sparkle {
  position: absolute;
  top: 4px; right: 6px;
  width: 10px; height: 10px;
  z-index: 4;
  filter: drop-shadow(0 0 3px rgba(255,160,60,0.9));
  pointer-events: none;
}
/* ===================== 커스텀추가 END : 스티커용 CRT/오르빗 ===================== */

/* 커스텀추가: 스티커용 오르빗(스캔라인 없음, s_style19) — s_style17과 동일하되 ::after(스캔라인) 제거.
   사이트 전체 스캔라인과 중복될 때 선택 */
.s_style19 {
  --hud: var(--mainskin-point, #ffb86b);
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  border-style: solid;
  border-color: transparent;
  border-width: 4px;
  border-radius: 0px;
  background: rgba(0,0,0,0.6);
  background-color: rgba(0,0,0,0.6);
  box-shadow:
    0 0 14px color-mix(in srgb, var(--hud) 25%, transparent),
    inset 0 0 0 1.5px color-mix(in srgb, var(--hud) 85%, transparent);
}
.s_style19 img { display: block; width: 100%; height: 100%; object-fit: cover; }
.s_style19::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 0px;
  pointer-events: none;
  z-index: 2;
  border: 1.5px solid color-mix(in srgb, var(--hud) 85%, transparent);
  filter: drop-shadow(0 0 2px color-mix(in srgb, var(--hud) 70%, transparent));
  background:
    linear-gradient(var(--hud),var(--hud)),
    linear-gradient(var(--hud),var(--hud)),
    linear-gradient(var(--hud),var(--hud)),
    linear-gradient(var(--hud),var(--hud));
  background-repeat: no-repeat;
  background-size: 10px 1.5px, 1.5px 10px, 10px 1.5px, 1.5px 10px;
  background-position:
    left 2px top 2px,
    left 2px top 2px,
    right 2px bottom 2px,
    right 2px bottom 2px;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.5);
}
/* 스캔라인 없음 */
.s_style19::after {
  content: none;
}
.s_style19 .sticker-sparkle {
  position: absolute;
  top: 4px; right: 6px;
  width: 10px; height: 10px;
  z-index: 4;
  filter: drop-shadow(0 0 3px rgba(255,160,60,0.9));
  pointer-events: none;
}


@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: 0px) {
  #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: 0px) {
  #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,
.orbit_edit,
.latest_edit,
.links_edit,
.latest_n_edit,
.login_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;
}

/* 로그인 */
.mainskin--login-greeting {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  text-align: center;
  font-family: 'Freesentation5';
  font-size: 14px;
  flex-direction: column;
  gap: 10px;
}
.mainskin--login-pointtext {
  font-weight: bold;
}
.mainskin--login-form {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.mainskin--login-form form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.mainskin--login-form .mainskin--input {
  text-align: center;
}
.mainskin--login-btns {
  display: flex;
  justify-content: center;
  gap: 6px;
}
.mainskin--login-form .mainskin--btn,
.mainskin--login-btns .mainskin--btn {
  border: 1px solid var(--mainskin-text);
  background: var(--mainskin-point);
  padding: 6px 16px;
  font-family: 'Freesentation5';
  color: var(--mainskin-text);
  line-height: 1em;
}
.mainskin--login-square .mainskin--input,
.mainskin--login-square .mainskin--btn {
  border-radius: 0px;
}
.mainskin--login-round .mainskin--input,
.mainskin--login-round .mainskin--btn {
  border-radius: 20px;
}

.mainskin--login-header {
  width: 100%;
  padding-bottom: 33%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.mainskin--login-form.round .mainskin--login-header {
  border-radius: 20px 20px 0 0;
}

/* 테마 */
/* 추가할 때는 .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_pola_tape {
  border-width: 10px 10px 45px 10px;
  border-color: #F7F1E3;
  border-style: solid;
  box-shadow: 0px 0px 5px inset rgba(0, 0, 0, 0.2), 0px 0px 16px -6px #00000061;
  rotate: -3deg;
  overflow: visible !important;   /* 이미지 타입 글에 자동으로 붙는 overflow:hidden 인라인 스타일을 이 테마에서만 뚫음 */
}
.main_layout.main_pola_tape::before {
  content: "";
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  width: 110px;
  height: 30px;
  background: rgba(214, 200, 172, 0.4);
  background-image: repeating-linear-gradient(
    90deg,
    rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 1px,
    transparent 1px, transparent 3px
  );
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  z-index: 5;
  pointer-events: none;
}

/* 모눈 배경 */
.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);
}

/* ===================== 커스텀추가 START : 테마 3종 (main_crt, main_cockpit, orbit) ===================== */
/* CRT 모니터 */
/* 폴라로이드처럼 border로 안쪽 여백을 잡아 편집기 padding 설정과 충돌하지 않음.
   border를 투명으로 두고 background-clip:border-box 로 베젤 색을 비치게 함 */
.main_layout.main_crt {
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  border-style: solid;
  border-color: transparent;
  border-width: 14px 16px 40px 16px;   /* 상 우 하 좌 : 하단이 컨트롤 바 */
  min-height: 100px !important;   /* 칸을 작게 잡아도 납짝해지지 않게(편집 아이콘 안 잘림) */
  border-radius: 18px;
  background:
    /* 하단 베젤 위 LED + 버튼 (하단 border 영역에 그려짐) */
    radial-gradient(circle 4px at 24px calc(100% - 20px), var(--mainskin-point) 70%, transparent 72%),
    radial-gradient(circle 3px at 44px calc(100% - 20px), rgba(0,0,0,0.35) 70%, transparent 72%),
    radial-gradient(circle 3px at 60px calc(100% - 20px), rgba(0,0,0,0.35) 70%, transparent 72%),
    /* 우하단 빨강/하양 버튼 4칸 — 네모(직사각형), 크기/위치는 아래 background-size/position 에서 지정 */
    linear-gradient(180deg, #ff5a52, #b3261e),   /* 빨강(켜짐) */
    linear-gradient(180deg, #dfe4e8, #a6aeb4),   /* 하양(약간 어두움) */
    linear-gradient(180deg, #ffe35c, #e3a90f),   /* 노랑(켜짐) */
    linear-gradient(180deg, #b3433c, #6f1a14),   /* 빨강(어두움) */
    /* 위 4개 버튼 각각의 검은 테두리 (버튼보다 1px 크게, 버튼 뒤에 깔림) */
    linear-gradient(#0a0a0a, #0a0a0a),
    linear-gradient(#0a0a0a, #0a0a0a),
    linear-gradient(#0a0a0a, #0a0a0a),
    linear-gradient(#0a0a0a, #0a0a0a),
    /* 베젤: 글별 '배경 색상'(요소 background-color)이 비치도록 반투명 베벨(명암)만 */
    linear-gradient(165deg,
      rgba(255,255,255,0.10),
      rgba(255,255,255,0) 42%,
      rgba(0,0,0,0.14));
  background-clip: border-box;
  background-origin: border-box;   /* LED 위치 % 기준을 전체 박스로 */
  background-repeat: no-repeat !important;
  /* 레이어 순서: LED, 점, 점, 버튼1~4, 버튼테두리1~4, 베젤 */
  background-size:
    auto, auto, auto,
    11px 9px, 11px 9px, 11px 9px, 11px 9px,
    15px 13px, 15px 13px, 15px 13px, 15px 13px,
    100% 100% !important;
  background-position:
    0 0, 0 0, 0 0,
    right 16px bottom 15px, right 33px bottom 15px, right 50px bottom 15px, right 67px bottom 15px,
    right 14px bottom 13px, right 31px bottom 13px, right 48px bottom 13px, right 65px bottom 13px,
    0 0 !important;
  background-color: var(--mainskin-base);   /* 글별 배경색 미설정 시 관리자 배경색으로 대체 */
  box-shadow: 0 14px 34px rgba(0,0,0,0.4), 0 0 0 1px rgba(0,0,0,0.2);
}
/* 화면(=padding box) 위 유리광 + 스캔라인 + 검은 테두리(비네팅) */
.main_layout.main_crt::before {
  content: "";
  position: absolute;
  inset: 0;                 /* 절대위치 기준은 padding box = 화면 영역 */
  border-radius: 10px;
  pointer-events: none;
  z-index: 2;
  background:
    linear-gradient(120deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.04) 16%, transparent 36%),
    repeating-linear-gradient(0deg, rgba(0,0,0,0.10) 0 1px, transparent 1px 3px);
  box-shadow:
    inset 0 0 0 6px #1a1c18,
    inset 0 0 28px rgba(0,0,0,0.7);
}

/* 화면 위 녹색 글리치(옛날 화면) 오버레이 */
.main_layout.main_crt::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
  pointer-events: none;
  z-index: 3;
  mix-blend-mode: screen;          /* 녹색이 빛처럼 더해져 형광체 느낌 */
  background:
    repeating-linear-gradient(0deg, rgba(90,255,150,0.05) 0 2px, transparent 2px 4px),          /* 녹색 스캔라인 */
    linear-gradient(0deg, transparent 44%, rgba(120,255,170,0.22) 50%, transparent 56%),        /* 흐르는 트래킹 밴드 */
    linear-gradient(0deg, rgba(20,120,60,0.06), rgba(20,120,60,0.06));                           /* 옅은 녹색 틴트 */
  background-size: 100% 100%, 100% 240%, 100% 100%;
  background-repeat: repeat, no-repeat, no-repeat;
  background-position: 0 0, 0 -70%, 0 0;
  animation: crt-glitch 7s linear infinite;
}
@keyframes crt-glitch {
  0%   { background-position: 0 0, 0 -70%, 0 0; }
  90%  { background-position: 0 0, 0 170%, 0 0; }
  100% { background-position: 0 0, 0 170%, 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .main_layout.main_crt::after { animation: none; }
}

/* 커스텀추가: CRT 모니터(스캔라인 없음) — main_layout.main_crt와 완전히 동일하되,
   ::before의 스캔라인 결/::after의 스캔라인+트래킹밴드를 뺀 버전.
   사이트 전체 스캔라인과 중복돼서 방해될 때 선택 */
.main_layout.main_crt_noscan {
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  border-style: solid;
  border-color: transparent;
  border-width: 14px 16px 40px 16px;
  min-height: 100px !important;
  border-radius: 18px;
  background:
    radial-gradient(circle 4px at 24px calc(100% - 20px), var(--mainskin-point) 70%, transparent 72%),
    radial-gradient(circle 3px at 44px calc(100% - 20px), rgba(0,0,0,0.35) 70%, transparent 72%),
    radial-gradient(circle 3px at 60px calc(100% - 20px), rgba(0,0,0,0.35) 70%, transparent 72%),
    linear-gradient(180deg, #ff5a52, #b3261e),
    linear-gradient(180deg, #dfe4e8, #a6aeb4),
    linear-gradient(180deg, #ffe35c, #e3a90f),
    linear-gradient(180deg, #b3433c, #6f1a14),
    linear-gradient(#0a0a0a, #0a0a0a),
    linear-gradient(#0a0a0a, #0a0a0a),
    linear-gradient(#0a0a0a, #0a0a0a),
    linear-gradient(#0a0a0a, #0a0a0a),
    linear-gradient(165deg,
      rgba(255,255,255,0.10),
      rgba(255,255,255,0) 42%,
      rgba(0,0,0,0.14));
  background-clip: border-box;
  background-origin: border-box;
  background-repeat: no-repeat !important;
  background-size:
    auto, auto, auto,
    11px 9px, 11px 9px, 11px 9px, 11px 9px,
    15px 13px, 15px 13px, 15px 13px, 15px 13px,
    100% 100% !important;
  background-position:
    0 0, 0 0, 0 0,
    right 16px bottom 15px, right 33px bottom 15px, right 50px bottom 15px, right 67px bottom 15px,
    right 14px bottom 13px, right 31px bottom 13px, right 48px bottom 13px, right 65px bottom 13px,
    0 0 !important;
  background-color: var(--mainskin-base);
  box-shadow: 0 14px 34px rgba(0,0,0,0.4), 0 0 0 1px rgba(0,0,0,0.2);
}
/* 유리광 + 검은 테두리(비네팅)만 유지, 스캔라인 결 제거 */
.main_layout.main_crt_noscan::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
  pointer-events: none;
  z-index: 2;
  background:
    linear-gradient(120deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.04) 16%, transparent 36%);
  box-shadow:
    inset 0 0 0 6px #1a1c18,
    inset 0 0 28px rgba(0,0,0,0.7);
}
/* 스캔라인/트래킹밴드 없음, 옅은 녹색 틴트만 유지 */
.main_layout.main_crt_noscan::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
  pointer-events: none;
  z-index: 3;
  mix-blend-mode: screen;
  background: linear-gradient(0deg, rgba(20,120,60,0.06), rgba(20,120,60,0.06));
  animation: none;
}

/* 콕핏 모니터 (main_cockpit) — 이미지는 안쪽 네모, 베젤은 관리자 배경색 반투명 / 그리블은 포인트색 연동 */
.main_layout.main_cockpit {
  --hud: var(--mainskin-point, #ffd070);   /* HUD 색 = 관리자 포인트색 */
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  border-style: solid;
  border-color: transparent;
  border-width: 24px 64px 30px 16px;
  min-height: 100px !important;   /* 칸을 작게 잡아도 편집 아이콘 안 잘림 */
  padding: 16px 18px !important;   /* 글이 HUD 프레임 안쪽(화면)에만 머물도록 안쪽 여백 */
  border-radius: 6px;
  background:
    linear-gradient(var(--hud),var(--hud)),
    linear-gradient(var(--hud),var(--hud)),
    repeating-linear-gradient(90deg, var(--hud) 0 5px, transparent 5px 9px),
    linear-gradient(var(--hud),var(--hud)),
    linear-gradient(var(--hud),var(--hud)),
    linear-gradient(var(--hud),var(--hud)),
    linear-gradient(var(--hud),var(--hud)),
    linear-gradient(var(--hud),var(--hud)),
    linear-gradient(var(--hud),var(--hud)),
    repeating-linear-gradient(90deg, var(--hud) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--hud) 55%, transparent) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--hud) 70%, transparent) 0 1px, transparent 1px 9px),
    linear-gradient(color-mix(in srgb, var(--hud) 50%, transparent), color-mix(in srgb, var(--hud) 50%, transparent)),
    linear-gradient(color-mix(in srgb, var(--hud) 50%, transparent), color-mix(in srgb, var(--hud) 50%, transparent));
  background-clip: border-box;
  background-origin: border-box;
  background-repeat: no-repeat !important;
  background-size:
    12px 12px,
    44% 13px,
    44px 11px,
    16px 16px,
    16px 16px,
    16px 16px,
    16px 16px,
    16px 16px,
    16px 16px,
    64% 9px,
    64% 4px,
    6px 56%,
    1px 64%,
    100% 1px !important;
  background-position:
    left 14px top 6px,
    left 32px top 6px,
    right 14px top 7px,
    right 40px top 24%,
    right 14px top 24%,
    right 40px top 50%,
    right 14px top 50%,
    right 40px top 76%,
    right 14px top 76%,
    left 20px bottom 7px,
    left 20px bottom 9px,
    left 5px center,
    right 64px center,
    left 0px top 24px !important;
  background-color: color-mix(in srgb, var(--mainskin-base) 55%, transparent);   /* 글별 배경색(rgba/8자리 hex로 알파 가능) 미설정 시 기본 반투명 */
}
/* 화면 위: 코너 브래킷 + 외곽선 (색도 HUD색 연동) */
.main_layout.main_cockpit::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 0 2px color-mix(in srgb, var(--hud) 70%, transparent));
  background:
    linear-gradient(var(--hud),var(--hud)),
    linear-gradient(var(--hud),var(--hud)),
    linear-gradient(var(--hud),var(--hud)),
    linear-gradient(var(--hud),var(--hud)),
    linear-gradient(var(--hud),var(--hud)),
    linear-gradient(var(--hud),var(--hud)),
    linear-gradient(var(--hud),var(--hud)),
    linear-gradient(var(--hud),var(--hud));
  background-repeat: no-repeat;
  background-size:
    18px 2px,
    2px 18px,
    18px 2px,
    2px 18px,
    18px 2px,
    2px 18px,
    18px 2px,
    2px 18px;
  background-position:
    left 10px top 10px,
    left 10px top 10px,
    right 10px top 10px,
    right 10px top 10px,
    left 10px bottom 10px,
    left 10px bottom 10px,
    right 10px bottom 10px,
    right 10px bottom 10px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hud) 85%, transparent);
}
/* 화면 톤: 아주 얅은 스캔라인 */
.main_layout.main_cockpit::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0.06) 0 1px, transparent 1px 3px);
}

/* 궤도 계기판 (orbit) — 레트로 퓨처리즘 앰버 인광 톤 + 반짝이는 별.
   베젤은 관리자 배경색 반투명(콕핏과 동일 패턴), 라인/글로우는 --hud(관리자 포인트색)로 연동 */
.main_layout.orbit {
  --hud: var(--mainskin-point, #ffb86b);
  font-family: 'PfStardust30', sans-serif;   /* 커스텀추가: 오르빗 테마 기본 글꼴 */
  color: #FFF6E0;   /* 커스텀추가: 오르빗 테마 기본 텍스트 색상 */
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  border-style: solid;
  border-color: transparent;
  border-width: 6px;
  min-height: 50px !important;
  border-radius: 8px;
  background:
    linear-gradient(160deg, rgba(255,255,255,0.05), rgba(0,0,0,0.10));
  background-clip: border-box;
  background-origin: border-box;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  background-position: 0 0 !important;
  background-color: color-mix(in srgb, var(--mainskin-base) 88%, transparent);   /* 글별 배경색 미설정 시 거의 불투명한 관리자 배경색 (가독성 우선) */
  box-shadow:
    0 0 24px color-mix(in srgb, var(--hud) 25%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--hud) 55%, transparent);
}
/* 화면 위: 점선 궤도 테두리 + 코너 브래킷(HUD색 연동) */
.main_layout.orbit::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
  pointer-events: none;
  z-index: 2;
  border: 1px dashed color-mix(in srgb, var(--hud) 40%, transparent);
  filter: drop-shadow(0 0 2px color-mix(in srgb, var(--hud) 70%, transparent));
  background:
    linear-gradient(var(--hud),var(--hud)),
    linear-gradient(var(--hud),var(--hud)),
    linear-gradient(var(--hud),var(--hud)),
    linear-gradient(var(--hud),var(--hud)),
    linear-gradient(var(--hud),var(--hud)),
    linear-gradient(var(--hud),var(--hud)),
    linear-gradient(var(--hud),var(--hud)),
    linear-gradient(var(--hud),var(--hud));
  background-repeat: no-repeat;
  background-size:
    14px 2px,
    2px 14px,
    14px 2px,
    2px 14px,
    14px 2px,
    2px 14px,
    14px 2px,
    2px 14px;
  background-position:
    left 3px top 3px,
    left 3px top 3px,
    right 3px top 3px,
    right 3px top 3px,
    left 3px bottom 3px,
    left 3px bottom 3px,
    right 3px bottom 3px,
    right 3px bottom 3px;
  box-shadow: inset 0 0 60px rgba(0,0,0,0.55);
}
/* 화면 위: 스캔라인 + 비네팅 (main_crt보다 옅게, 앰버 인광 느낌만) */
.main_layout.orbit::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
  pointer-events: none;
  z-index: 3;
  mix-blend-mode: multiply;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.12) 0px, rgba(0,0,0,0.12) 1px, transparent 2px, transparent 3px);
}
/* 반짝이는 별 장식 4종 — z-index 4, HUD색과 무관하게 항상 앰버 하이라이트로 고정
   (관리자 포인트색이 바뀌어도 "별"은 늘 반짝이는 느낌을 유지하도록 고정색 사용) */
.main_layout.orbit .orbit-sparkle {
  position: absolute;
  pointer-events: none;
  z-index: 5;   /* 커스텀추가: 4 -> 5로 상향. 콘텐츠에서 z-index:4(+position:relative)로 지정하면 별 위로 올라옴 */
  filter: drop-shadow(0 0 3px rgba(255,160,60,0.9));
}
.main_layout.orbit .orbit-sparkle.pos-1 { top: 14px; left: 20px; width: 16px; height: 16px; }
.main_layout.orbit .orbit-sparkle.pos-2 { top: 22px; right: 60px; width: 12px; height: 12px; opacity: 0.85; }
.main_layout.orbit .orbit-sparkle.pos-3 { bottom: 20px; left: 38%; width: 6px; height: 6px; opacity: 0.7; }
.main_layout.orbit .orbit-sparkle.pos-4 { bottom: 34px; right: 24px; width: 9px; height: 9px; opacity: 0.6; }
.main_layout.orbit .orbit-sparkle.pos-ring { top: -14px; right: -14px; width: 70px; height: 70px; opacity: 0.5; }

/* 커스텀추가: 오르빗 계기판(스캔라인 없음) — main_layout.orbit과 완전히 동일하되,
   자체 스캔라인(::after)만 뺀 버전. 사이트 전체 스캔라인과 중복돼서 방해될 때 선택 */
.main_layout.orbit_noscan {
  --hud: var(--mainskin-point, #ffb86b);
  font-family: 'PfStardust30', sans-serif;
  color: #FFF6E0;
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  border-style: solid;
  border-color: transparent;
  border-width: 6px;
  min-height: 50px !important;
  border-radius: 8px;
  background:
    linear-gradient(160deg, rgba(255,255,255,0.05), rgba(0,0,0,0.10));
  background-clip: border-box;
  background-origin: border-box;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  background-position: 0 0 !important;
  background-color: color-mix(in srgb, var(--mainskin-base) 88%, transparent);
  box-shadow:
    0 0 24px color-mix(in srgb, var(--hud) 25%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--hud) 55%, transparent);
}
.main_layout.orbit_noscan::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
  pointer-events: none;
  z-index: 2;
  border: 1px dashed color-mix(in srgb, var(--hud) 40%, transparent);
  filter: drop-shadow(0 0 2px color-mix(in srgb, var(--hud) 70%, transparent));
  background:
    linear-gradient(var(--hud),var(--hud)),
    linear-gradient(var(--hud),var(--hud)),
    linear-gradient(var(--hud),var(--hud)),
    linear-gradient(var(--hud),var(--hud)),
    linear-gradient(var(--hud),var(--hud)),
    linear-gradient(var(--hud),var(--hud)),
    linear-gradient(var(--hud),var(--hud)),
    linear-gradient(var(--hud),var(--hud));
  background-repeat: no-repeat;
  background-size:
    14px 2px,
    2px 14px,
    14px 2px,
    2px 14px,
    14px 2px,
    2px 14px,
    14px 2px,
    2px 14px;
  background-position:
    left 3px top 3px,
    left 3px top 3px,
    right 3px top 3px,
    right 3px top 3px,
    left 3px bottom 3px,
    left 3px bottom 3px,
    right 3px bottom 3px,
    right 3px bottom 3px;
  box-shadow: inset 0 0 60px rgba(0,0,0,0.55);
}
/* 스캔라인 없음 - ::after 자체를 생성하지 않음 */
.main_layout.orbit_noscan::after {
  content: none;
}
.main_layout.orbit_noscan .orbit-sparkle {
  position: absolute;
  pointer-events: none;
  z-index: 5;
  filter: drop-shadow(0 0 3px rgba(255,160,60,0.9));
}
.main_layout.orbit_noscan .orbit-sparkle.pos-1 { top: 14px; left: 20px; width: 16px; height: 16px; }
.main_layout.orbit_noscan .orbit-sparkle.pos-2 { top: 22px; right: 60px; width: 12px; height: 12px; opacity: 0.85; }
.main_layout.orbit_noscan .orbit-sparkle.pos-3 { bottom: 20px; left: 38%; width: 6px; height: 6px; opacity: 0.7; }
.main_layout.orbit_noscan .orbit-sparkle.pos-4 { bottom: 34px; right: 24px; width: 9px; height: 9px; opacity: 0.6; }
.main_layout.orbit_noscan .orbit-sparkle.pos-ring { top: -14px; right: -14px; width: 70px; height: 70px; opacity: 0.5; }

/* ===================== 커스텀추가 END : 테마 3종 여기까지 ===================== */

/* 효과 */
/* 비뚤게 */
.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;
}
/* ORBIT content: inherits the existing HUD accent and font. */
.mainskin-orbit { --orbit-gold:var(--mainskin-point, #ffd070); color:var(--orbit-gold); width:100%; min-width:0; box-sizing:border-box; padding:var(--orbit-offset,185px) 14px 20px; text-align:left; font-family:inherit; }
.mainskin-orbit * { box-sizing:border-box; }
.orbit-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; border-bottom:1px solid color-mix(in srgb,var(--orbit-gold) 55%,transparent); padding:0 0 10px; font-size:16px; }
.orbit-heading small { font-size:12px; opacity:.65; white-space:nowrap; }
.orbit-gauge { position:relative; width:min(185px,100%); margin:24px auto 15px; aspect-ratio:1; }
.orbit-gauge svg { width:100%; height:100%; display:block; fill:none; stroke:currentColor; }
.orbit-track { opacity:.25; stroke-width:4; }
.orbit-progress { stroke-width:4; transform:rotate(-90deg); transform-origin:100px 100px; }
.orbit-guide { opacity:.4; stroke-width:1; }
.orbit-value { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1.2; }
.orbit-value strong { font-size:36px; font-weight:600; }
.orbit-value small { font-size:12px; margin-top:5px; letter-spacing:1px; }
.orbit-signal { text-align:center; font-size:11px; opacity:.65; padding-bottom:14px; }
.orbit-subheading { border-top:1px solid color-mix(in srgb,var(--orbit-gold) 55%,transparent); padding-top:12px; font-size:15px; font-weight:bold; }
.mainskin-orbit .orbit-list { list-style:none; margin:8px 0 0; padding:0 0 0 20px; }
.orbit-list li { position:relative; min-height:80px; display:flex; align-items:flex-start; justify-content:space-between; gap:6px; padding:9px 0 12px 10px; }
.orbit-list li::before { content:''; position:absolute; left:-12px; top:20px; bottom:-20px; border-left:1px solid currentColor; opacity:.45; }
.orbit-list li:last-child::before { display:none; }
.orbit-list li::after { content:''; position:absolute; left:-17px; top:15px; width:11px; height:11px; border:1px solid currentColor; border-radius:50%; background:#17151e; }
.orbit-list .is-done::after,.orbit-list .is-next::after { background:currentColor; }
.orbit-list .is-next::after { width:17px; height:17px; left:-20px; top:12px; }
.orbit-list time { display:block; font-size:11px; opacity:.55; margin-bottom:4px; }
.orbit-name { font-size:16px; color:color-mix(in srgb,var(--orbit-gold) 65%,white); }
.orbit-status { font-size:12px; opacity:.55; white-space:nowrap; padding-top:15px; }
.is-next .orbit-name,.is-next .orbit-status { color:var(--orbit-gold); font-weight:bold; opacity:1; }
.orbit-message { font-size:12px; line-height:1.7; opacity:.7; padding:16px 0; }

/* Keep the gauge stationary while milestone history scrolls independently. */
.mainskin-orbit .orbit-list { height:320px; overflow-y:auto; overflow-x:hidden; padding-right:8px; overscroll-behavior-y:contain; scrollbar-width:thin; scrollbar-color:var(--orbit-gold) transparent; }
.mainskin-orbit .orbit-list::-webkit-scrollbar { width:5px; }
.mainskin-orbit .orbit-list::-webkit-scrollbar-thumb { background:var(--orbit-gold); border-radius:4px; }
.mainskin-orbit .orbit-list:focus-visible { outline:1px solid var(--orbit-gold); outline-offset:3px; }
.orbit-scroll-hint { font-size:10px; font-weight:normal; opacity:.55; margin-left:6px; white-space:nowrap; }