:root{
   --bg:#0b1220;
   --card:#0f1724;
   --code-card: #1e2a47;
   --accent: oklch(0.549 0.2105 277.72);
   --accent-green: yellowgreen;
   --accent-light:#8d85ee;
   --accent-hover: #d1b3ff;
   --muted:#aab3c6;
   --glass: rgba(255,255,255,0.03);

   --table-bg: rgba(11, 18, 32, 0.8);
   --th-bg: rgba(79, 70, 229, 0.45);
   --hover-bg: rgba(137, 131, 224, 0.125);
   --border-color: rgba(255, 255, 255, 0.1);
}

@font-face {font-family: 'Pyeongchang';src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2206-02@1.0/PyeongChang-Regular.woff2') format('woff2');font-weight: normal;font-display: swap;}
@font-face {font-family: 'D2Coding';src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_three@1.0/D2Coding.woff') format('woff');font-weight: normal;font-display: swap;}
@font-face {font-family: 'GimhaeGaya';src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2202-2@1.0/GimhaeGayaR.woff') format('woff');font-weight: normal;font-display: swap;}
@font-face {font-family: 'GMarketSans';src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');font-weight: 500;font-display: swap;}
@font-face {font-family: 'GMarketSans';src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');font-weight: 500;font-display: swap;}
@font-face {font-family: 'Minecraft-Event';src: url('assets/fonts/minecrafter/Minecrafter.Reg.ttf')}

*{box-sizing:border-box}
html,body,#root{height:100%; overflow-y: hidden;}
body{
   background: linear-gradient(180deg, #061025 0%, #071227 100%);
   color:#e6eef8;
   -webkit-font-smoothing:antialiased;
   -moz-osx-font-smoothing:grayscale;
   font-family: 'Pyeongchang';
}

/* 페이지 로딩 중 */
#page-loading { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(7, 16, 37, 0.4); flex-direction: column; justify-content: center; align-items: center; z-index: 99999; color: white; font-size: 26px; font-weight: bold; backdrop-filter: blur(2px);}
/* 진행 바 */
#progress-bar {position: fixed;top: 0;left: 0;height: 4px;background: var(--accent-light); width: 0%;z-index: 9999;transition: width 0.1s linear;}

/* 페이지 링크 미리보기 */
#link-preview {
   position: absolute;
   display: none;
   background: var(--card);
   border: 1px solid var(--accent);
   border-radius: 8px;
   padding: 10px;
   max-width: 300px;
   font-size: 14px;
   color: #e6eef8;
   box-shadow: 0 4px 15px rgba(0, 150, 150, 0.5);
   z-index: 9999;
   pointer-events: none;
   line-height: 1.5;
   opacity: 0;
   transform: translateY(-10px);
   transition: opacity 0.2s ease, transform 0.2s ease;
}
#link-preview.show {
   opacity: .925;
   transform: translateY(0);
}

#article {opacity: 1;transition: opacity 0.3s ease;}
#article.fade {opacity: 0;}

.app{display:flex;height: 100vh;}

/* 어노테이션 */
.annotation:not(.article span) {display: block;font-size: 32px;border-left: 4px solid;background-color: #252525;padding: 6px 12px;margin: 12px 0;border-radius: 4px;font-family: 'Minecraft-Event';}
.annotation-tag {font-weight: bold;cursor: help;position: relative;}

/* 어노테이션 색상 */
.annotation.deprecated {border-color: #ff5555;}
.annotation.deprecated .annotation-tag {color: #ff5555;}
.annotation.todo {border-color: #ffcc00;}
.annotation.todo .annotation-tag {color: #ffcc00;}
.annotation.note {border-color: #55ff55;}
.annotation.note .annotation-tag {color: #55ff55;}

/* 박스 스타일 */
.box {display: flex;gap: 6px;align-items: center;padding: 12px 8px;border-radius: 8px;margin: 8px 0;white-space: pre-wrap;}
.box-text {font-family: 'GMarketSans';}
.box-icon {width: 36px;height: 36px;flex-shrink: 0;filter: brightness(1.75);}
/* 정보 */
.info-box {background-color: #1a1a2e;color: #fff;border-left: 5px solid #5a4bff;}
/* 경고 */
.warning-box {background-color: #1a1a2e;color: #fff;border-left: 5px solid #ff6f3a;}
/* 팁 */
.tip-box {background-color: #1a1a2e;color: #fff;border-left: 5px solid #ffb732;}

.sidebar{
   background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
   border-right: 1px solid rgba(255,255,255,0.03);
   display:flex;
   flex-direction:column;
   gap:12px;
   width: clamp(120px, 30%, 275px);
   padding: 1rem;
   transition: flex .2s ease;
}

/* minecrafter font */
.footer {opacity:0.6;font-size:12px;color:var(--muted);margin-bottom:75px;font-family:'Minecraft-Event';align-self:flex-end;}

.search{width:100%;padding:10px 12px;border-radius:16px;background:var(--glass);color:var(--muted);border: 1px solid rgba(255, 255, 255, 0.5);outline:none;}
.search:focus{border-color: var(--accent-green);}

/* pages list */
.pages{overflow-x: hidden; overflow-y: auto; margin-bottom: 32px;}
.pages::-webkit-scrollbar {width: 12px;}
.pages::-webkit-scrollbar-track {background: rgba(255, 255, 255, 0.05); border-radius: 4px;}
.pages::-webkit-scrollbar-thumb {background-color: var(--accent); border-radius: 4px}
.pages::-webkit-scrollbar-thumb:hover {background-color: var(--accent-light)}
.page-item {display:block;padding:8px 12px;margin:4px 0;border-radius:6px;cursor:pointer;color:#cfe3ff;text-decoration:none;transition: background 0.2s;}
.page-item:hover {background: rgba(179,136,255,0.1);color:#fff;}
.page-item[data-slug="null"]:hover {pointer-events: none;cursor: default;background: rgba(0, 0, 0, 0);}
.page-item.active {background: rgba(179,136,255,0.3);border-left: 4px solid var(--accent);}

/* content */
.content{flex:1;padding:28px;overflow-x:hidden;padding-bottom: 128px;}
.content::-webkit-scrollbar {width: 16px;}
.content::-webkit-scrollbar-track {background: rgba(255, 255, 255, 0.05); border-radius: 4px; margin-bottom: 75px;}
.content::-webkit-scrollbar-thumb {background-color: var(--accent); border-radius: 4px}
.content::-webkit-scrollbar-thumb:hover {background-color: var(--accent-light)}

.article-head{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.article-head h2{margin:0;font-size:36px;color:#fff}
.subtitle {font-size: 16px;color: var(--muted);}
.meta{color:var(--muted);font-size:13px}

.article{
   min-width: auto;
   word-wrap: break-word;
   overflow-wrap: break-word;
   background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.0));
   padding:22px;border-radius:12px;border:1px solid rgba(255,255,255,0.02);
   color: #eaf4ff;
   line-height:1.7;
}

/* markdown elements */
.article h1{font-size:32px}
.article h2{font-size:28px}
.article h3{font-size:24px}
.article h4{font-size:20px}
.article h5{font-size:16px}

.article hr {border: none;height: 1px;background-color: rgba(170, 179, 198, .3);}

.article pre > code {background:none; padding: 0}

.article pre::-webkit-scrollbar {width: 8px; height: 10px;}
.article pre::-webkit-scrollbar-track {background: rgba(255, 255, 255, 0.125); border-radius: 4px}
.article pre::-webkit-scrollbar-thumb {background-color: var(--accent); border-radius: 4px}
.article pre::-webkit-scrollbar-thumb:hover {background-color: var(--accent-light)}

.article pre{padding:12px;border-radius:8px;overflow:auto; font-family: 'D2Coding'; background: var(--code-card) !important;}
.article code { background: rgba(135, 131, 120, 0.15);font-family: 'D2Coding'; color: rgba(255, 131, 120, 0.95);padding: 0.2em 0.4em;border-radius: 6px;font-size: 0.9em;}

/* 코드 블록 복사 버튼 */
.copy-btn:hover {transform: scale(1.1);}
.copy-btn:active {transform: scale(0.95);}
.copy-icon {width: 18px;height: 18px;}
.copy-btn.copied .copy-icon {transition: 0.2s ease; transform: rotate(360deg) scale(1.4);}
.copy-btn {position: absolute;top: 8px;right: 8px;width: 32px;height: 32px;padding: 4px;border: none;border-radius: 6px;background: var(--accent-green);display: flex;justify-content: center;align-items: center;cursor: pointer;z-index: 10; transition: none;}

.article a{color:var(--accent);text-decoration:underline}

.article blockquote { position: relative;margin: 0 0 1em 0; padding: 0.4em 0.5em 0.4em 2.5em;border-left: 4px solid var(--accent); background: var(--card); border-radius: 10px; color: white; line-height: 1.6; font-family: 'GimhaeGaya';}
.article blockquote::before { content: "";position: absolute;left: .45em;top: 50%;transform: translateY(-50%);width: 1.5em;height: 1.5em;background-image: url('');background-size: contain;background-repeat: no-repeat;}

.article details { background: rgba(79, 70, 229, 0.05);border-left: 4px solid var(--accent-green);border-radius: 6px;padding: 8px 12px;line-height: 1.6;margin: 12px 0;transition: background 0.3s;}
.article details summary { color: white;padding-left: 3px;cursor: pointer;font-weight: bold;}
.article details summary:hover span { color: var(--bg);background-color: rgba(54, 254, 173, 0.85);padding: 0 2px;border-radius: 2px;transition: background-color 0.1s ease;}
.article details p { color: #cfe6ff;margin: 6px 0 0 0;}
/* 기본 화살표 제거 */
.details summary {list-style: none; cursor: pointer;}
.details summary::-webkit-details-marker {display: none;}
/* 아이콘 추가 */
.details summary::before {content: "";display: inline-block;width: 18px;height: 36px;margin-top: 18px; margin-right: 6px;background-image: url("assets/img/emoji/close.png");background-size: cover;vertical-align: middle;filter: brightness(1.75);}
.details[open] summary::before {background-image: url("assets/img/emoji/open.png");}

.article a {color: var(--accent-light);text-decoration: underline;transition: color 0.2s;}
.article a:hover {color: var(--accent-hover);}

.article table { max-width: 800px;  border-collapse: collapse;  margin: 1em 0;  background: var(--table-bg);  border-radius: 12px;  overflow: hidden;}
.article th { background: var(--th-bg); font-weight: bold;}
.article td, th { padding: 10px 14px; border-bottom: 1px solid var(--border-color); font-size: 0.95em; color: var(--text-color); text-align: left;}
.article tr:hover td { background: var(--hover-bg);}
.article tr:last-child td { border-bottom: none;}

.article img:not(.emoji,.latex,.copy-icon), video {
   display: block;
   max-width: 100%;
   height: auto;
   margin: 12px 0;
   border-radius: 8px;
   object-fit: contain;
}

.emoji {display:inline-block; vertical-align: middle; width: 1.25em;height: 1.25em;}

@media (max-width: 400px) {
   .article table {
      font-size: 0.85em;
   }
   .article td {
      padding: 8px 10px;
   }
}

::selection {
   background: #4fd1c5;
   color: #0b1220;
}