:root {
    --bg: #fff;
    --fg: #111;
    --dim: #666;
    --faint: #aaa;
    --border: #eaeaea;
    --hover: #fafafa;
    --brand: #4a3f6b;
    --brand-light: #6b5f8f;
    --brand-bg: rgba(74,63,107,.06);
}
[data-theme="dark"] {
    --bg: #111;
    --fg: #eee;
    --dim: #999;
    --faint: #555;
    --border: #272727;
    --hover: #1a1a1a;
    --brand: #9b8fc4;
    --brand-light: #b5abda;
    --brand-bg: rgba(155,143,196,.1);
}

*,*::before,*::after{box-sizing:border-box;margin:0}

body{
    font:16px/1.6 'Pretendard',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
    background:var(--bg);color:var(--fg);-webkit-font-smoothing:antialiased;
}

/* topbar */
.topbar{
    position:sticky;top:0;z-index:50;
    background:var(--bg);
    border-bottom:1px solid var(--border);
}
.topbar-inner{
    display:flex;align-items:center;justify-content:space-between;
    max-width:1080px;margin:0 auto;padding:14px 24px;
}
.topbar-logo{
    display:flex;align-items:center;gap:8px;
    color:var(--fg);text-decoration:none;font-size:15px;font-weight:700;
}
.topbar-logo img{width:28px;height:28px;border-radius:8px}
.topbar-links{display:flex;align-items:center;gap:4px}
.topbar-links a{
    padding:6px 12px;border-radius:6px;
    font-size:13px;font-weight:500;color:var(--faint);
    text-decoration:none;transition:color .15s,background .15s;
}
.topbar-links a:hover{color:var(--fg);background:var(--hover)}
.topbar-links a.is-active{color:var(--fg);font-weight:600}
.topbar-cta,.topbar-cta:hover{
    display:inline-block;padding:8px 22px;margin-left:8px;
    background:var(--brand) !important;color:#fff !important;border-radius:100px;
    font-size:13px;font-weight:600;text-decoration:none;
    transition:opacity .2s;
}
.topbar-cta:hover{opacity:.85}

/* back link */
.back-link{
    display:inline-flex;align-items:center;gap:5px;
    color:var(--faint);font-size:13px;font-weight:500;
    text-decoration:none;transition:color .15s;
    margin-bottom:20px;
}
.back-link:hover{color:var(--fg)}
.back-link i{font-size:11px}

/* page */
.page{max-width:680px;margin:0 auto;padding:48px 20px 100px}
.page h1{font-size:26px;font-weight:700;letter-spacing:-.03em;line-height:1.35}
.page-desc{margin-top:6px;color:var(--faint);font-size:13px}
.page-summary{margin-top:10px;color:var(--dim);font-size:15px;line-height:1.7}

/* section */
.page section{margin-top:40px}
.page section+section{padding-top:36px;border-top:1px solid var(--border)}
.page section h2{font-size:15px;font-weight:700;margin-bottom:10px}
.count{color:var(--faint);font-size:13px;font-weight:400}

/* row */
.row{
    display:flex;align-items:baseline;gap:10px;
    padding:10px 0;border-bottom:1px solid var(--hover);
    color:inherit;text-decoration:none;transition:opacity .12s;
}
.row:last-child{border-bottom:none}
.row:hover{opacity:.55}
.row time{flex:0 0 auto;color:var(--faint);font-size:13px;font-weight:500;font-variant-numeric:tabular-nums}
.row strong{flex:1;font-size:14px;font-weight:600}
.row-excerpt{display:none}
.row-pin{color:var(--brand);font-size:11px}
.tag{
    flex:0 0 auto;padding:1px 6px;border-radius:3px;
    background:var(--brand-bg);color:var(--brand);
    font-size:11px;font-weight:600;
}

/* hr */
.page hr{border:none;border-top:1px solid var(--border);margin:48px 0}

/* article nav */
.article-nav{display:flex;gap:10px;flex-wrap:wrap}
.article-nav-link{
    flex:1;min-width:200px;display:flex;flex-direction:column;gap:3px;
    padding:14px 16px;border:1px solid var(--border);border-radius:8px;
    color:var(--fg);text-decoration:none;transition:border-color .15s;
}
.article-nav-link:hover{border-color:var(--brand)}
.article-nav-link small{color:var(--faint);font-size:11px;font-weight:500}
.article-nav-link span{font-size:13px;font-weight:600}
.article-nav-link.next{text-align:right}

/* empty */
.empty{padding:60px 0;text-align:center;color:var(--faint);font-size:14px}

/* faq bar */
.faq-bar{
    display:flex;align-items:center;gap:3px;flex-wrap:wrap;
    margin-top:24px;padding-bottom:16px;border-bottom:1px solid var(--border);
}
.faq-btn{
    padding:5px 10px;border:none;border-radius:5px;
    background:transparent;color:var(--dim);
    font-size:13px;font-weight:500;cursor:pointer;
    transition:color .12s,background .12s;white-space:nowrap;
}
.faq-btn:hover{color:var(--fg);background:var(--hover)}
.faq-btn.is-active{color:#fff;background:var(--brand)}
.faq-search{
    display:flex;align-items:center;gap:5px;
    margin-left:auto;padding:5px 10px;
    border:1px solid var(--border);border-radius:6px;
    width:160px;transition:border-color .15s;
}
.faq-search:focus-within{border-color:var(--brand)}
.faq-search i{color:var(--faint);font-size:11px}
.faq-search input{
    width:100%;border:0;background:transparent;
    color:var(--fg);font:inherit;font-size:13px;outline:none;
}
.faq-search input::placeholder{color:var(--faint)}

/* faq details */
.faq-group{margin-top:36px}
.faq-group+.faq-group{padding-top:36px;border-top:none}
.faq-group h2{font-size:15px;font-weight:700;margin-bottom:6px}
details[data-faq-item]{border-bottom:1px solid var(--border)}
details[data-faq-item]:first-of-type{border-top:1px solid var(--border)}
details[data-faq-item] summary{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:14px 0;font-size:14px;font-weight:600;
    cursor:pointer;list-style:none;color:var(--fg);
}
details[data-faq-item] summary::-webkit-details-marker{display:none}
details[data-faq-item] summary::after{
    content:'+';flex:0 0 auto;font-size:16px;font-weight:300;color:var(--faint);
}
details[data-faq-item][open] summary::after{content:'\2212'}
details[data-faq-item] summary:hover{color:var(--brand)}
details[data-faq-item][open] summary{color:var(--brand);font-weight:700}
.faq-a{
    padding:8px 16px 24px;
    margin:0 0 0 0;
    background:var(--hover);
    border-radius:8px;
}

/* markdown */
.markdown-content{font-size:15px;line-height:1.8;color:var(--fg)}
.markdown-content>*+*{margin-top:1.1em}
.markdown-content h1,.markdown-content h2,.markdown-content h3{font-weight:700;line-height:1.35;letter-spacing:-.02em}
.markdown-content h1{font-size:1.4em}
.markdown-content h2{font-size:1.2em;margin-top:2em}
.markdown-content h3{font-size:1.05em;margin-top:1.5em}
.markdown-content p,.markdown-content li{color:var(--dim)}
.markdown-content ul,.markdown-content ol{padding-left:1.2em}
.markdown-content blockquote{padding:10px 14px;border-left:3px solid var(--brand);background:var(--brand-bg);border-radius:0 6px 6px 0}
.markdown-content code{padding:.1em .3em;border-radius:3px;background:var(--hover);font-family:'SF Mono',Consolas,monospace;font-size:.88em}
.markdown-content pre{padding:14px 18px;border-radius:8px;background:#1a1a1a;overflow-x:auto}
[data-theme="dark"] .markdown-content pre{background:#000}
.markdown-content pre code{padding:0;background:transparent;color:#d4d4d4}
.markdown-content a{color:var(--brand);text-decoration:underline;text-underline-offset:2px}
.markdown-content table{width:100%;border-collapse:collapse;font-size:14px}
.markdown-content th,.markdown-content td{padding:8px 12px;border-bottom:1px solid var(--border);text-align:left}
.markdown-content th{font-weight:600}
.markdown-content img{
    display:block;
    width:auto;
    max-width:min(100%,720px);
    height:auto;
    margin:1.2em auto;
    border-radius:12px;
}

/* legacy (about.php) */
.support-tabs{display:inline-flex;gap:2px;margin-top:16px}
.support-tab{padding:4px 10px;border-radius:5px;border:none;background:transparent;color:var(--dim);text-decoration:none;font-size:13px;font-weight:500}
.support-tab:hover{color:var(--fg);background:var(--hover)}
.support-tab.is-active{color:#fff;background:var(--brand)}

/* footer */
.site-footer{max-width:680px;margin:0 auto;padding:20px;border-top:1px solid var(--border);display:flex;gap:14px;font-size:11px;color:var(--faint)}
.site-footer a{color:var(--faint);text-decoration:none}
.site-footer a:hover{color:var(--dim)}

/* responsive */
@media(max-width:640px){
    .topbar-inner,.page,.site-footer{padding-left:16px;padding-right:16px}
    .page h1{font-size:22px}
    .topbar-inner{padding:10px 16px}
    .topbar-links a{font-size:12px;padding:4px 8px}
    .faq-search{width:100%;margin-left:0;margin-top:6px}
    .article-nav{flex-direction:column}
    .article-nav-link.next{text-align:left}
}