:root {
   --accent: #4f46e5;
   --bg: #0f172a;
   --card: #0b1220;
   --muted: #94a3b8;

   --table-bg: rgba(11, 18, 32, 0.8);
   --th-bg: rgba(79, 70, 229, 0.45);
   --hover-bg: rgba(100, 90, 229, 0.25);
   --border-color: rgba(255, 255, 255, 0.1);

   --text-color: var(--text-color);
   --font-family: 'D2Coding';

   color-scheme: dark
}

* { box-sizing: border-box; }

/* 폰트 */
@font-face { font-family: 'PyeongChang-Bold';   src: url('/fonts/PyeongChang-Bold.woff2') format('woff2');   font-weight: 700;   font-style: normal}
@font-face { font-family: 'D2Coding';   src: url('/fonts/D2Coding.woff2') format('woff2');   font-weight: normal;   font-style: normal;}

html,
body {
   height: 100%;
   margin: 0;
   font-family: 'PyeongChang-Bold', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
   color: #d7dce2;
   background: linear-gradient(180deg, #071025 0%, #07112a 100%);
   overflow-y: hidden;
}

.app {
   display: grid;
   grid-template-columns: 260px 1fr;
   gap: 18px;
   height: 100vh;
   padding: 18px;
}

/* 텍스트 드래그 */
::selection {background: #fffb00DD;   color: #000;}

/* 페이지 로딩 중 */
#loadingScreen { position: fixed;   top: 0;   left: 0;   width: 100%;   height: 100%;   background: rgba(7, 16, 37, 0.9);   flex-direction: column;   justify-content: center;   align-items: center;   z-index: 99999;   color: white;   font-size: 26px;   font-weight: bold;}
/* 페이지 프로그래스 바 */
#pageBar { position: fixed;   top: 0;   left: 0;   height: 4px;   width: 0%;   background: white;   border-radius: 5px;   z-index: 9999;   transition: width 0.1s ease-out;}

/* 사이드바 스크롤 */
.sidebar::-webkit-scrollbar { width: 10px;}
.sidebar::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.1);}
.sidebar::-webkit-scrollbar-thumb { background: rgba(75, 73, 233, .5);  border-radius: 4px; }
.sidebar::-webkit-scrollbar-thumb:hover { background: rgba(75, 73, 233, 1);}

/* 본문 스크롤 */
.content::-webkit-scrollbar { width: 10px;}
.content::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.1);}
.content::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2);   border-radius: 4px;}
.content::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.4);}

/* 사이드 바 */
.sidebar { border-radius: 12px;   padding: 14px;   overflow-x: hidden;   overflow-y: auto}

.brand { font-weight: 700;   color: var(--muted);   margin-bottom: 12px}
.search { display: flex;   margin-bottom: 16px}
.search input { flex: 1;   padding: 8px;   border-radius: 8px;   border: 1px solid rgba(255, 255, 255, 0.25);   background: transparent;   color: inherit}

.pages { display: flex; flex-direction: column; gap: 6px; padding-bottom: 100px;}
.page { padding: 8px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.page:not([data-id="null"]):hover { background: rgba(255, 255, 255, 0.2)}
.page.active { background: linear-gradient(90deg, rgba(79, 70, 229, 0.4), rgba(79, 70, 229, 0.06));   border-left: 3px solid var(--accent);   padding-left: 6px}

.btn { padding: 8px 10px;   border-radius: 8px;   border: none;   background: var(--accent);   color: white;   cursor: pointer;   transition: background-color 0.3s ease;}
.btn:hover { background: rgba(79, 70, 229, 0.7);}

/* 인라인 링크 아이콘 */
.link-with-icon:hover { opacity: 0.7;}
.link-with-icon { display: inline-block;   vertical-align: middle;   text-decoration: underline;   color: rgb(185, 181, 255);   transition: opacity 0.2s ease;   line-height: 2.0;}
.link-with-icon img { width: 20px;   height: 20px;   margin-right: 6px;   vertical-align: middle;   display: inline-block;}

/* 난이도 변경 */
.btn-switch { padding: 4px 8px;   border-radius: 4px;   background: var(--accent, #4cafef);   position: relative;   margin-left: 12px;   font-size: 12px;}

.btn-switch:hover {transition: ease-out 0.2s;}

.btn-switch:hover::after {
   opacity: 1;
   position: absolute;
   top: 125%;
   left: 50%;
   transform: translateX(-50%);
   background: rgba(0, 0, 0, 0.8);
   color: white;
   padding: 4px 8px;
   border-radius: 4px;
   font-size: 11px;
   white-space: nowrap;
   pointer-events: none;
   transition: opacity 0.2s;
}

.btn-switch[data-mode="docs"]:hover::after {content: "데이터 팩 날개 달기";}
.btn-switch[data-mode="docs2"]:hover::after {content: "점프 투 데이터 팩";}