:root {
    	--cm-text-color: #FFFFFF;
	--cm-base-color: #1C1818;
	--cm-point-color: #FED36B;
		--cm-base-color-bb: #767272;	
	--cm-base-color-b: #444040;
	--cm-base-color-d:  #000000;
	--cm-base-color-dd:  #767272;
	--cm-point-color-bb: #ffffc5;	
	--cm-point-color-b: #fffb93;
	--cm-point-color-d:  #e0b54d;
	--cm-point-color-dd:  #7c5100;
	--cm-point-color-v:  #ffffa0;
	--cm-point-color-t:  rgba(254, 211, 107, 0.22);
  --cm-point-color-r: #d4fe6b;
  --cm-point-color-r-t: rgba(212, 254, 107, 0.22);
  --cm-base-color-t:  rgba(28, 24, 24, 0.22);
	--cm-text-color-t:  rgba(255, 255, 255, 0.22);
	--cm-base-color-auto: #ffffff;
	--cm-text-color-auto: #000000;
	--cm-point-color-auto: #000000;
	--cm-base-color-auto-t: #ffffff26;
	--cm-text-color-auto-t: #00000026;
	--cm-point-color-auto-t: #00000026;
  --cm-point-color-auto-tt: #00000060;

    --cm-default-font: PfStardust30;
  --cm-title-font: PfStardust30;
  --cm-ani: 0.6s;
  --cm-form-color: #1C1818;}

  header#header {
  left: 0;
  width: 0px;
  z-index: 99;
  pointer-events: none;
  }
  header ~ section#body {
  margin: 0;
  }

.custommenu-wrapper {
  flex-direction: column;    align-items: flex-start;
      justify-content: center}

.custommenu {
  flex-direction: column;
  width: auto;
  height: auto;
  left: 200px;
  font-size: 15px;
  border: 0px solid var(--cm-text-color-t);
  border-radius: 5px;
  justify-content: center;
  }

.custommenu-item {
  padding: 20px;
  margin: 5px 0 5px 0;
  width: 100%;
}

.custommenu-main.disabled:not(.custommenu-folder) {
  display:none;
}
.custommenu-sub.disabled {
  display:none;
}


.custommenu-icon {
    width: 18px;
  height: 18px;
  }

.custommenu-icon i,
.custommenu-icon .material-icons {
  font-size: 18px;
}

.custommenu-divider {
  height: 0px;
  width: 100%;
  border-bottom: 1px solid var(--cm-text-color-t);
}

.custommenu-get-background{
  background-image: url('https://i.imgur.com/ReJqgj5.jpeg');
}

/* ===================== 오르빗 (orbit) 커스텀메뉴 스타일 =====================
   window.css.php의 구조를 기반으로 하되, 색상을 관리자가 커스텀메뉴에서
   지정한 배경색(--cm-base-color)/포인트색(--cm-point-color) 체계에 연동함.
   하드코딩된 앰버색을 쓰지 않고 전부 --cm-point-color 파생 변수를 사용하므로,
   관리자가 포인트색을 바꾸면 점선 테두리/코너 브래킷/글로우/반짝이는 별이 다 같이 바뀜. */

.cm-orbit.custommenu-wrapper .custommenu {
    flex-wrap: wrap;
  width: 140px;
  height: auto;
    border-radius: 5px;
  box-sizing: content-box;
  position: relative;
  overflow: visible;
  border: 0px solid color-mix(in srgb, var(--cm-point-color) 45%, transparent);
  padding-top: 30px;
  box-shadow:
    0 0 20px color-mix(in srgb, var(--cm-point-color) 25%, transparent),
    2px 2px 6px rgba(0, 0, 0, 0.35);
  background: var(--cm-base-color);
  flex-direction: row;
  animation: orbit_window_open var(--cm-ani);
}

/* 점선 궤도 테두리 + 코너 브래킷 (main_layout.orbit과 동일 기법: 배경 레이어 4개로 L자 브래킷)
   커스텀추가: 점선 → 실선으로 변경, 내부 글로우(inset box-shadow) 추가 */
.cm-orbit.custommenu-wrapper .custommenu::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 5px;
  pointer-events: none;
  z-index: 1;
  border: 1px solid color-mix(in srgb, var(--cm-point-color) 65%, transparent);
  filter: drop-shadow(0 0 2px color-mix(in srgb, var(--cm-point-color) 70%, transparent));
  box-shadow: inset 0 0 24px color-mix(in srgb, var(--cm-point-color) 22%, transparent);
  background:
    linear-gradient(var(--cm-point-color), var(--cm-point-color)),
    linear-gradient(var(--cm-point-color), var(--cm-point-color)),
    linear-gradient(var(--cm-point-color), var(--cm-point-color)),
    linear-gradient(var(--cm-point-color), var(--cm-point-color));
  background-repeat: no-repeat;
  background-size: 14px 2px, 2px 14px, 14px 2px, 2px 14px;
  background-position:
    left 6px top 36px,
    left 6px top 36px,
    right 6px bottom 6px,
    right 6px bottom 6px;
}

/* 스캔라인 오버레이 (색과 무관하게 항상 옅은 흑백 결) */
.cm-orbit.custommenu-wrapper .custommenu::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 5px;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: multiply;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0.10) 0px, rgba(0,0,0,0.10) 1px, transparent 2px, transparent 3px);
}

/* 반짝이는 별 (orbit.php에서 JS로 삽입) — 색은 포인트색 연동 */
.cm-orbit .orbit-menu-sparkle {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  fill: color-mix(in srgb, var(--cm-point-color) 80%, white 20%);
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--cm-point-color) 90%, transparent));
}
.cm-orbit .orbit-menu-sparkle.pos-1 { top: 40px; right: 12px; width: 14px; height: 14px; }
.cm-orbit .orbit-menu-sparkle.pos-2 { top: 62px; left: 10px; width: 6px; height: 6px; opacity: 0.75; }

/* 커스텀추가: 아이콘 링을 padding으로 키운 만큼, 공용 tooltip_pos()가 계산하는
   "아이템 위치 - 50px" 기준이 안 맞아 툴팁이 너무 위에 뜨는 것을 보정.
   JS가 top을 인라인으로 직접 지정하므로, transform으로 그 위에 상대적으로 내려줌 */
.cm-orbit .custommenu-item-tooltip {
  transform: translateY(26px);
}

.cm-orbit .custommenu .custommenu-item.custommenu-sub {
  display: none;
}

.cm-orbit .custommenu-subwindow .custommenu-item.custommenu-sub {
  display: flex;
}

.cm-orbit .custommenu.custommenu-subwindow {
    flex-wrap: wrap;
  left: calc(150px + 200px);
    animation: orbit_window_open var(--cm-ani);
}

@keyframes orbit_window_open {
  0%{
    padding-top: 0px;
    opacity: 0;
  }
  100%{
    padding-top: 30px;
    opacity: 1;
  }
}

.cm-orbit .custommenu .custommenu-item {
  flex-direction: column;
  justify-content: center;
      width: calc(50% - (5px * 2));
  }

.cm-orbit .custommenu-item:hover .custommenu-name {
  text-shadow: none;
}

.cm-orbit .custommenu .custommenu-item .custommenu-name {
  color: var(--cm-text-color);
  text-shadow: 0 0 6px color-mix(in srgb, var(--cm-point-color) 40%, transparent);
  width: auto;
  flex-shrink: 0;
  line-height: normal;
  -webkit-line-clamp: 2;
  word-break: auto-phrase;
  max-height: 3em;
  text-align: center;
  white-space: normal;
}

.cm-orbit .custommenu-item:hover .custommenu-name {
  background: transparent;
  color: color-mix(in srgb, var(--cm-point-color) 80%, white 20%);
}

/* 원형 글로우 아이콘 — 오르빗 특유의 원형 버튼 (window의 사각 아이콘과 구분)
   커스텀추가: 링이 아이콘 크기(icon_size)에 딱 맞춰 너무 작아 보이던 것을,
   padding + content-box로 링 자체를 아이콘보다 크게 키움 */
.cm-orbit .custommenu-icon {
  box-sizing: content-box;
  padding: 10px;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--cm-point-color) 55%, transparent);
  box-shadow:
    inset 0 0 8px color-mix(in srgb, var(--cm-point-color) 30%, transparent),
    0 0 6px color-mix(in srgb, var(--cm-point-color) 25%, transparent);
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  margin-bottom: 4px;
  transition: box-shadow 0.25s;
}
.cm-orbit .custommenu-item:hover .custommenu-icon {
  box-shadow:
    inset 0 0 10px color-mix(in srgb, var(--cm-point-color) 50%, transparent),
    0 0 14px color-mix(in srgb, var(--cm-point-color) 55%, transparent);
}

/* 타이틀바: Menu.exe — 커스텀추가: 배경 박스(체크무늬 바)는 없애고,
   텍스트/창조작 아이콘만 어두운 배경 위에 포인트색 글로우 텍스트로 떠 있게 함 */
.cm-orbit .custommenu .custommenu_header_d {
  display: flex;
  position: absolute;
  background: transparent;
  height: 24px;
  width: calc(100% - 18px);
  padding: 0 6px;
  top: 3px;
  border: 0;
  color: var(--cm-point-color);
  text-shadow: 0 0 6px color-mix(in srgb, var(--cm-point-color) 70%, transparent);
  font-size: 11px;
  font-weight: bold;
  align-items: center;
  font-family: var(--cm-title-font);
}

.cm-orbit .custommenu .custommenu_header_d::before {
  content: 'Menu.exe';
  padding-left: 4px;
  flex-grow: 1;
}

.cm-orbit .custommenu .custommenu_header_d::after {
  content: '─ □ X';
  letter-spacing: 2px;
  font-family: 'Galmuri9';
  padding-right: 2px;
}

.cm-orbit .custommenu-folder .custommenu-icon::after {
  content: '+';
  position: absolute;
  right: -8px;
  top: -5px;
  background: var(--cm-point-color);
  color: var(--cm-point-color-auto);
  border-radius: 100%;
  width: 1em;
  height: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 4px color-mix(in srgb, var(--cm-point-color) 60%, transparent);
}

.cm-orbit .custommenu-folder.active .custommenu-icon::after {
  content: '-';
}