/* ============================================================================
   Wiki 서브 도메인 - Readability-Focused 스타일
   Design System: Dark theme with electric cyan accents
   Font: Pretendard (본문), Roboto Mono (코드)
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. 기본 설정 (Base Settings)
   ---------------------------------------------------------------------------- */

/* Pretendard 폰트 로드 */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

/* 루트 변수 정의 */
:root {
    --bg-primary: #0a0a0a;
    --bg-surface: #111111;
    --bg-code: #000000;
    --border-color: #333333;
    --text-primary: #e6e6e6;
    --text-secondary: #999999;
    --accent-color: #00eeff;
    --accent-hover: #00cccc;
    --blockquote-accent: #7c4dff;
}

/* ============================================================================
   FULL WIDTH OVERRIDES - Material Theme 61rem 제약 해제
   ============================================================================ */

/* 최고 특이성으로 테마 CSS 오버라이드 */
html body div.md-grid {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

html body .md-container > .md-grid {
    max-width: 100% !important;
    width: 100% !important;
}

html body .md-main__inner.md-grid {
    max-width: 100% !important;
    width: 100% !important;
}

/* 본문 콘텐츠 영역 너비 확장 - Vercel 스타일 */
.md-content {
    max-width: 90vw !important;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* 태블릿/데스크톱에서 더 넓게 */
@media screen and (min-width: 76.25em) {
    .md-content {
        max-width: 90vw !important;
    }
}

/* 매우 넓은 화면에서도 최대 1600px까지 허용 */
@media screen and (min-width: 125em) {
    .md-content {
        max-width: 1600px !important;
    }
}

/* 기본 배경 및 텍스트 색상 */
body {
    background: var(--bg-primary) !important;
    color: #e6e6e6 !important; /* 글자색을 조금 더 밝게 */
    font-family: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif !important;
    font-size: 16px;
    line-height: 1.75 !important; /* 줄 간격을 넓혀서 시원하게 */
    letter-spacing: -0.01em; /* 자간을 살짝 좁혀서 응집도 향상 */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ----------------------------------------------------------------------------
   2. 링크 스타일 (Links)
   ---------------------------------------------------------------------------- */

a {
    color: var(--accent-color) !important;
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--accent-hover) !important;
    text-decoration: underline;
}

/* 앵커 링크 (헤더 링크) */
.headerlink {
    color: var(--text-secondary) !important;
}

.headerlink:hover {
    color: var(--accent-color) !important;
}

/* ----------------------------------------------------------------------------
   3. 헤더 스타일 (Header)
   ---------------------------------------------------------------------------- */

.md-header {
    background: var(--bg-code) !important;
    border-bottom: 1px solid var(--border-color) !important;
    box-shadow: none !important;
}

/* 헤더 내부 그리드 너비 제한 해제 - 로고 왼쪽 정렬 */
.md-header__inner.md-grid {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0.8rem !important;
}

.md-header__inner {
    border-radius: 0 !important;
}

/* 헤더 내 링크 */
.md-header__title {
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.md-header__topic {
    color: var(--text-primary) !important;
}

/* ----------------------------------------------------------------------------
   4. 내비게이션 탭 (Navigation Tabs)
   ---------------------------------------------------------------------------- */

.md-tabs {
    background: var(--bg-surface) !important;
    border-bottom: 1px solid var(--border-color) !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.md-tabs__item {
    border-radius: 0 !important;
}

.md-tabs__link {
    color: var(--text-secondary) !important;
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

.md-tabs__link:hover,
.md-tabs__link--active {
    color: var(--accent-color) !important;
}

/* ----------------------------------------------------------------------------
   5. 사이드바 내비게이션 (Sidebar Navigation)
   ---------------------------------------------------------------------------- */

.md-nav {
    border-radius: 0 !important;
}

.md-nav__item {
    border-radius: 0 !important;
}

.md-nav__link {
    color: var(--text-secondary) !important;
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

.md-nav__link:hover,
.md-nav__link--active {
    color: var(--accent-color) !important;
    background: var(--bg-surface) !important;
}

.md-nav__link--active {
    border-left: 2px solid var(--accent-color);
}

/* ----------------------------------------------------------------------------
   6. 코드블록 (Code Blocks)
   ---------------------------------------------------------------------------- */

/* 인라인 코드 */
.md-typeset code {
    background: var(--bg-code) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 0 !important;
    color: var(--accent-color) !important;
    padding: 0.2em 0.4em;
    font-size: 0.9em;
    font-family: 'Roboto Mono', 'JetBrains Mono', monospace;
}

/* 코드블록 (fenced code) */
.md-typeset pre {
    background: var(--bg-code) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 0 !important;
}

.md-typeset pre > code {
    background: transparent !important;
    border: none !important;
    font-family: 'Roboto Mono', 'JetBrains Mono', monospace;
}

/* 코드 하이라이트 색상 (검은 배경용) */
.highlight .k { color: #ff79c6; }  /* keyword */
.highlight .kd { color: #ff79c6; } /* keyword.declaration */
.highlight .kn { color: #ff79c6; } /* keyword.namespace */
.highlight .kp { color: #ff79c6; } /* keyword.pseudo */
.highlight .nc { color: #8be9fd; } /* name.class */
.highlight .nf { color: #50fa7b; } /* name.function */
.highlight .nb { color: #8be9fd; } /* name.builtin */
.highlight .s { color: #f1fa8c; }  /* string */
.highlight .mi { color: #bd93f9; } /* number.integer */
.highlight .c { color: #6272a4; }  /* comment */
.highlight .p { color: #f8f8f2; }  /* punctuation */

/* ----------------------------------------------------------------------------
   7. 표 (Tables)
   ---------------------------------------------------------------------------- */

.md-typeset table {
    border: 1px solid var(--border-color) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.md-typeset table thead {
    background: var(--bg-surface) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

.md-typeset table th {
    color: var(--text-primary) !important;
    font-weight: 600;
}

.md-typeset table td {
    border: 1px solid var(--border-color) !important;
}

.md-typeset table tbody tr:hover {
    background: var(--bg-surface) !important;
}

/* ----------------------------------------------------------------------------
   8. Admonition (경고/참고 박스)
   ---------------------------------------------------------------------------- */

.md-typeset .admonition {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-color) !important;
    border-left: 3px solid var(--accent-color) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.md-typeset .admonition-title {
    background: transparent !important;
    color: var(--accent-color) !important;
    font-weight: 600;
}

/* 각 admonition 타입별 색상 */
.md-typeset .note {
    border-left-color: #00eeff !important;
}

.md-typeset .warning {
    border-left-color: #ffcc00 !important;
}

.md-typeset .danger {
    border-left-color: #ff4444 !important;
}

.md-typeset .info {
    border-left-color: #00eeff !important;
}

.md-typeset .tip {
    border-left-color: #00ff88 !important;
}

/* ----------------------------------------------------------------------------
   9. 인용구 (Blockquotes)
   ---------------------------------------------------------------------------- */

.md-typeset blockquote {
    border-left: 3px solid var(--blockquote-accent) !important;
    background: var(--bg-surface) !important;
    padding: 1em 1.2em;
    border-radius: 0 !important;
    margin: 1.5em 0;
}

/* ----------------------------------------------------------------------------
   10. 헤딩 스타일 (Headings)
   ---------------------------------------------------------------------------- */

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
    color: #ffffff !important;
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-top: 2.5em;
    margin-bottom: 1em;
}

.md-typeset h1 {
    border-bottom: 1px solid var(--border-color) !important;
    padding-bottom: 0.5em;
    margin-top: 0;
}

.md-typeset h2 {
    border-bottom: 1px solid var(--border-color) !important;
    padding-bottom: 0.3em;
}

.md-typeset h3:first-of-type {
    margin-top: 1.5em;
}

/* ----------------------------------------------------------------------------
   11. 목록 (Lists)
   ---------------------------------------------------------------------------- */

.md-typeset ul,
.md-typeset ol {
    color: var(--text-primary) !important;
}

.md-typeset li {
    margin-bottom: 0.4em;
}

/* ----------------------------------------------------------------------------
   12. 검색 (Search)
   ---------------------------------------------------------------------------- */

.md-search__input {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 0 !important;
    color: var(--text-primary) !important;
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

.md-search__input::placeholder {
    color: var(--text-secondary) !important;
}

.md-search__icon {
    color: var(--text-secondary) !important;
}

/* ----------------------------------------------------------------------------
   13. 스크롤바 (Scrollbar)
   ---------------------------------------------------------------------------- */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

/* ----------------------------------------------------------------------------
   14. 버튼 및 폼 요소 (Buttons & Forms)
   ---------------------------------------------------------------------------- */

.md-typeset .btn {
    border: 1px solid var(--accent-color) !important;
    background: transparent !important;
    color: var(--accent-color) !important;
    border-radius: 0 !important;
}

.md-typeset .btn:hover {
    background: var(--accent-color) !important;
    color: var(--bg-primary) !important;
}

/* ----------------------------------------------------------------------------
   15. 푸터 (Footer)
   ---------------------------------------------------------------------------- */

.md-footer {
    background: var(--bg-code) !important;
    border-top: 1px solid var(--border-color) !important;
}

.md-footer-nav {
    background: var(--bg-surface) !important;
}

.md-footer-meta {
    background: var(--bg-code) !important;
}

.md-footer-copyright {
    color: var(--text-secondary) !important;
}

/* ----------------------------------------------------------------------------
   Remove previous/next footer links (visual fallback until site rebuilt)
   ---------------------------------------------------------------------------- */
.md-footer__link,
.md-footer__link--prev,
.md-footer__link--next,
.md-footer__direction {
    display: none !important;
}

/* Ensure footer meta stays visible and single-line */
.md-footer-meta__inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* ----------------------------------------------------------------------------
   16. 기타 (Miscellaneous)
   ---------------------------------------------------------------------------- */

/* 둥근 모서리 전체 제거 */
* {
    border-radius: 0 !important;
}

/* 그림자 전체 제거 */
.md-tabs,
.md-nav__item,
.md-typeset table,
.md-typeset .admonition,
.card {
    box-shadow: none !important;
}

/* 선택 텍스트 색상 */
::selection {
    background: var(--accent-color) !important;
    color: var(--bg-primary) !important;
}

::-moz-selection {
    background: var(--accent-color) !important;
    color: var(--bg-primary) !important;
}

/* 토글/아코디언 */
details {
    border: 1px solid var(--border-color) !important;
    background: var(--bg-surface) !important;
    border-radius: 0 !important;
    margin: 1em 0;
}

summary {
    color: var(--accent-color) !important;
    cursor: pointer;
    font-weight: 600;
    padding: 0.5em;
}

summary:hover {
    text-decoration: underline;
}