/* ===== Iosevka Web Font ===== */
@import url('https://h16rkim.github.io/iosevka-webfont/29.0.2/Iosevka.css');

/* ===== Reset & Base ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 13px;
    line-height: 1.7;
    color: #333;
    background: #fff;
}

a { color: inherit; text-decoration: none; }
a:hover { color: #065fd4; text-decoration: underline; }

/* ===== Layout ===== */
.app-layout { width: 100%; min-height: 100vh; }

.app-row {
    display: flex;
    justify-content: center;
    width: 100%;
    padding-top: 20px;
}

.app-col-gutter { flex: 1; max-width: 25%; }
.app-col-main { flex: 0 1 820px; width: 100%; padding: 0 20px; }

/* ===== Header ===== */
.site-header { padding: 0 0 16px; }

.header-row-1 {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.site-title {
    font-family: 'Iosevka Web', monospace;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    text-decoration: none;
}
.site-title:hover { color: #333; text-decoration: none; }

.theme-toggle {
    font-size: 16px;
    color: #999;
    cursor: pointer;
    text-decoration: none;
}
.theme-toggle:hover { color: #666; text-decoration: none; }

.header-row-2 {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-top: 2px;
    font-family: 'Iosevka Web', monospace;
}

.nav-link { font-size: 13px; color: #666; cursor: pointer; }
.nav-link:hover { color: #065fd4; text-decoration: none; }
.nav-sep { color: #ccc; font-size: 11px; user-select: none; }

/* ===== Content Row ===== */
.content-row { display: flex; gap: 28px; padding-top: 8px; }
.sidebar { flex: 0 0 155px; font-size: 13px; }
.main-content { flex: 1; min-width: 0; }

/* ===== Sidebar ===== */
.sidebar-section { margin-bottom: 10px; }

.vintage-divider {
    font-family: monospace;
    color: #bbb;
    font-size: 12px;
    letter-spacing: 0.5px;
}

.sidebar-links { padding: 4px 0; font-size: 13px; line-height: 1.8; }
.sidebar-links a { color: #666; }
.sidebar-links a:hover { color: #065fd4; }

/* ===== Directory Tree ===== */
.directory-tree { list-style: none; padding-left: 0; font-size: 13px; }
.directory-tree .directory-tree { padding-left: 16px; }
.directory-tree li { margin: 3px 0; }
.directory-item { margin: 1px 0; }

.dir-node { display: flex; align-items: center; gap: 6px; }
.dir-action { font-size: 11px !important; color: #999 !important; }
.dir-action:hover { color: #065fd4 !important; }
.dir-inline-form { margin: 4px 0 4px 0; display: flex; align-items: center; gap: 6px; }

.directory-label {
    cursor: pointer;
    color: #444;
    display: block;
    padding: 2px 0;
    font-size: 13px;
}
.directory-label:hover { color: #065fd4; text-decoration: underline; }

.directory-sub { list-style: none; padding-left: 12px; }
.directory-post-item { line-height: 1.5; }
.directory-post-item a { color: #777; font-size: 12px; }
.directory-post-item a:hover { color: #065fd4; }
.directory-post-item a.active { color: #065fd4; font-weight: 600; }

/* ===== Buttons (link style) ===== */
.link-btn {
    background: none;
    border: none;
    padding: 0;
    color: #666;
    cursor: pointer;
    font-size: inherit;
    font-family: inherit;
    text-decoration: none;
}
.link-btn:hover { color: #065fd4; text-decoration: underline; }

.btn { background: none; border: none; padding: 0; color: #666; cursor: pointer; font-size: 13px; font-family: inherit; }
.btn:hover { color: #065fd4; text-decoration: underline; }
.btn-primary { color: #065fd4; }

/* ===== Utility ===== */
.hidden { display: none; }
.text-danger { color: #c00; }
.text-danger:hover { color: #900; }
.text-muted { color: #999; }
.text-primary { color: #065fd4; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.mt-8 { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }

/* ===== Form ===== */
.form-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 10px;
}

.form-label { width: 100px; flex-shrink: 0; }
.form-label-wide { width: 120px; flex-shrink: 0; }

.form-input {
    flex: 1;
    padding: 5px 0;
    border: none;
    border-bottom: 1px solid #ccc;
    font-size: 13px;
    background: transparent;
    outline: none;
}
.form-input:focus { border-bottom-color: #065fd4; }

.form-container { max-width: 480px; }

.form-options {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 12px;
    font-size: 13px;
}

/* ===== Tag ===== */
.tag-item {
    display: inline-block;
    margin-right: 8px;
}

/* ===== Post Form ===== */
.post-title-input {
    width: 100%;
    font-size: 16px;
    padding: 6px 0;
    border: none;
    border-bottom: 1px solid #ccc;
    background: transparent;
    outline: none;
}
.post-title-input:focus { border-bottom-color: #065fd4; }

.post-select {
    padding: 4px 8px;
    border: 1px solid #ccc;
    font-size: 13px;
    background: transparent;
}

.tag-input {
    padding: 4px 0;
    width: 150px;
    border: none;
    border-bottom: 1px solid #ccc;
    font-size: 13px;
    background: transparent;
    outline: none;
}
.tag-input:focus { border-bottom-color: #065fd4; }

/* ===== Two Column Layout (manage pages) ===== */
.two-col {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}
.two-col > * { flex: 1; min-width: 250px; }

/* ===== Table ===== */
.data-table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
    font-size: 13px;
}
.data-table th { padding: 8px; border-bottom: 2px solid #eee; }
.data-table td { padding: 8px; border-bottom: 1px solid #f0f0f0; }

/* ===== Settings Nav ===== */
.settings-nav { width: 120px; }
.settings-nav ul { list-style: none; }

/* ===== Modal ===== */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.3);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content {
    background: #fff;
    padding: 20px;
    width: 300px;
    max-width: 90vw;
    border: 1px solid #ddd;
}

.modal-content h3 { margin-bottom: 14px; font-size: 15px; font-weight: 600; }

.form-group { margin-bottom: 10px; }
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="number"] {
    width: 100%;
    padding: 5px 0;
    border: none;
    border-bottom: 1px solid #ccc;
    font-size: 13px;
    background: transparent;
    outline: none;
}
.form-group input:focus { border-bottom-color: #065fd4; }

.form-actions { display: flex; align-items: center; justify-content: flex-end; margin-top: 14px; }
.form-actions button {
    padding: 4px 12px;
    border: 1px solid #999;
    background: #fff;
    font-size: 13px;
    cursor: pointer;
}
.form-actions button:hover { border-color: #065fd4; color: #065fd4; }
.form-actions a { font-size: 13px; color: #065fd4; }

/* ===== Drawer (mobile) ===== */
.drawer-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.3);
    z-index: 500;
}

.drawer-content {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 220px;
    background: #fff;
    padding: 16px;
    overflow-y: auto;
}

/* ===== Post List ===== */
.post-list { list-style: none; }

.post-card { padding: 8px 0; }

.post-card-header { font-size: 13px; line-height: 1.6; }

.post-card-date {
    font-size: 13px;
    color: #999;
    font-family: monospace;
    margin-right: 6px;
}

.post-card-title-link { color: #065fd4; font-size: 13px; }
.post-card-title-link:hover { text-decoration: underline; }

.post-card-summary {
    font-size: 12px;
    color: #888;
    margin-top: 1px;
    line-height: 1.5;
}

/* ===== Post Detail ===== */
.post-header { margin-bottom: 20px; }
.post-title { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.post-meta { font-size: 12px; color: #999; display: flex; gap: 4px; align-items: baseline; flex-wrap: wrap; }
.meta-sep { color: #ccc; }
.tag-link { color: #065fd4; font-size: 12px; }
.tag-link:hover { text-decoration: underline; }

/* ===== Content-only page (share) ===== */
.content-page { max-width: 720px; margin: 40px auto; padding: 0 20px; }

.post-body { line-height: 1.8; word-break: break-word; font-size: 14px; margin-top: 24px; }
.post-body img { max-width: 100%; }
.post-body pre { background: #f6f8fa; padding: 12px; overflow-x: auto; font-size: 13px; }
.post-body pre code { background: transparent; color: inherit; padding: 0; }
.post-body :not(pre) > code { background: #f6f8fa; padding: 1px 4px; font-size: 13px; }

/* ===== Post Navigation ===== */
.post-nav { display: flex; justify-content: space-between; margin: 28px 0; gap: 8px; }
.post-nav-item { flex: 1; min-width: 0; }
.post-nav-label { font-size: 11px; color: #bbb; }
.post-nav-title { font-size: 13px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post-nav-title a { color: #065fd4; }

/* ===== Comments ===== */
.comment-list { margin-top: 20px; }
.comment-item { padding: 8px 0; border-bottom: 1px solid #eee; }
.comment-header { font-size: 12px; color: #999; margin-bottom: 2px; }
.comment-body { font-size: 13px; }

/* ===== Search ===== */
.search-bar { margin-bottom: 12px; }
.search-bar form { display: flex; align-items: baseline; }
.search-prompt {
    font-family: 'Iosevka Web', monospace;
    font-size: 13px;
    color: #999;
    margin-right: 6px;
    user-select: none;
}
.search-bar input {
    flex: 1;
    padding: 0;
    border: none;
    font-family: 'Iosevka Web', monospace;
    font-size: 13px;
    background: transparent;
    outline: none;
    color: inherit;
}
.search-bar input::placeholder { color: #bbb; }

.search-divider { border: none; border-top: 1px solid #eee; margin: 8px 0; }

/* ===== Year Filter ===== */
.year-filter { margin-bottom: 8px; font-size: 12px; }
.year-filter a { color: #888; margin-right: 4px; text-decoration: none; }
.year-filter a:hover, .year-filter a.active { color: #065fd4; }

/* ===== Loading ===== */
.loading-indicator { text-align: center; padding: 16px; color: #bbb; font-size: 12px; }

/* ===== Responsive ===== */
.mobile-only { display: none; }
.desktop-only { display: block; }

@media (max-width: 768px) {
    .app-col-gutter { display: none; }
    .app-col-main { padding: 0 12px; }
    .sidebar { display: none; }
    .content-row { flex-direction: column; }
    .main-content { width: 100%; }
    .mobile-only { display: inline; }
    .desktop-only { display: none !important; }
}

/* ===== Dark Mode ===== */
body.dark-mode {
    background: #1a1a1a;
    color: #ccc;
}

body.dark-mode a:hover { color: #6eaade; }
body.dark-mode .site-title { color: #ddd; }
body.dark-mode .site-title:hover { color: #ddd; }
body.dark-mode .theme-toggle { color: #777; }
body.dark-mode .theme-toggle:hover { color: #aaa; }
body.dark-mode .nav-link { color: #888; }
body.dark-mode .nav-link:hover { color: #6eaade; }
body.dark-mode .nav-sep { color: #555; }
body.dark-mode .link-btn, body.dark-mode .btn { color: #888; }
body.dark-mode .link-btn:hover, body.dark-mode .btn:hover { color: #6eaade; }
body.dark-mode .post-card-date { color: #777; }
body.dark-mode .post-card-title-link { color: #6eaade; }
body.dark-mode .post-card-summary { color: #666; }
body.dark-mode .post-body { color: #ccc; }
body.dark-mode .post-body pre { background: #252525; }
body.dark-mode .post-body :not(pre) > code { background: #252525; color: #ccc; }
body.dark-mode .post-body a { color: #6eaade; }
body.dark-mode .post-body h1,
body.dark-mode .post-body h2,
body.dark-mode .post-body h3,
body.dark-mode .post-body h4,
body.dark-mode .post-body h5,
body.dark-mode .post-body h6 { color: #ddd; }
body.dark-mode .post-body strong { color: #ddd; }
body.dark-mode .post-body blockquote { color: #aaa; border-left-color: #444; }
body.dark-mode .post-body table th,
body.dark-mode .post-body table td { border-color: #444; color: #ccc; }
body.dark-mode .post-body hr { border-color: #444; }
body.dark-mode .post-body img { opacity: 0.9; }
body.dark-mode .post-title { color: #ddd; }
body.dark-mode .toastui-editor-contents,
body.dark-mode .toastui-editor-contents p,
body.dark-mode .toastui-editor-contents li,
body.dark-mode .toastui-editor-contents div,
body.dark-mode .toastui-editor-contents td,
body.dark-mode .toastui-editor-contents th,
body.dark-mode .toastui-editor-contents dd,
body.dark-mode .toastui-editor-contents dt { color: #ccc !important; }
body.dark-mode .toastui-editor-contents h1,
body.dark-mode .toastui-editor-contents h2,
body.dark-mode .toastui-editor-contents h3,
body.dark-mode .toastui-editor-contents h4,
body.dark-mode .toastui-editor-contents h5,
body.dark-mode .toastui-editor-contents h6,
body.dark-mode .toastui-editor-contents strong { color: #ddd !important; }
body.dark-mode .toastui-editor-contents pre { background: #252525 !important; }
body.dark-mode .toastui-editor-contents :not(pre) > code { background: #252525 !important; color: #ccc !important; }
body.dark-mode .toastui-editor-contents pre code { background: transparent !important; color: inherit !important; }
body.dark-mode .toastui-editor-contents a { color: #6eaade !important; }
body.dark-mode .toastui-editor-contents blockquote { color: #aaa !important; border-left-color: #444 !important; }
body.dark-mode .toastui-editor-contents table th,
body.dark-mode .toastui-editor-contents table td { border-color: #444 !important; }
body.dark-mode .post-nav-title a { color: #6eaade; }
body.dark-mode .meta-sep { color: #555; }
body.dark-mode .tag-link { color: #6eaade; }
body.dark-mode .comment-item { border-bottom-color: #333; }
body.dark-mode .directory-label { color: #bbb; }
body.dark-mode .dir-action { color: #666 !important; }
body.dark-mode .dir-action:hover { color: #6eaade !important; }
body.dark-mode .directory-post-item a { color: #777; }
body.dark-mode .directory-post-item a.active { color: #6eaade; }
body.dark-mode .vintage-divider { color: #555; }
body.dark-mode .sidebar-links a { color: #777; }
body.dark-mode .modal-content { background: #222; border-color: #444; }
body.dark-mode .drawer-content { background: #222; }
body.dark-mode .search-bar input { color: #ccc; }
body.dark-mode .search-bar input::placeholder { color: #555; }
body.dark-mode .search-divider { border-top-color: #333; }
body.dark-mode .search-prompt { color: #666; }
body.dark-mode .form-group input { border-bottom-color: #444; color: #ccc; }
body.dark-mode .form-input { border-bottom-color: #444; color: #ccc; }
body.dark-mode .post-title-input { border-bottom-color: #444; color: #ccc; }
body.dark-mode .tag-input { border-bottom-color: #444; color: #ccc; }
body.dark-mode .post-select { border-color: #444; color: #ccc; background: #2a2a2a; }
body.dark-mode .data-table th { border-bottom-color: #444; }
body.dark-mode .data-table td { border-bottom-color: #333; }
body.dark-mode .form-actions button { border-color: #555; color: #ccc; background: #2a2a2a; }