: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;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;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)}

/* tool wiki */
.wiki-page{max-width:760px}
.wiki-head{
    display:flex;align-items:flex-end;justify-content:space-between;gap:18px;
    padding-bottom:18px;border-bottom:1px solid var(--border);
}
.wiki-eyebrow{
    margin-bottom:4px;color:var(--brand);font-size:12px;font-weight:700;
}
.wiki-count{
    flex:0 0 auto;margin-bottom:3px;
    color:var(--faint);font-size:12px;font-weight:700;
}
.wiki-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:18px}
.wiki-card{
    display:flex;gap:12px;align-items:center;
    min-height:64px;padding:12px 14px;border:1px solid var(--border);border-radius:10px;
    color:var(--fg);text-decoration:none;background:var(--bg);
    transition:border-color .15s,background .15s,transform .15s;
}
.wiki-card:hover{border-color:var(--brand);background:var(--hover);transform:translateY(-1px)}
.wiki-card-icon{
    width:40px;height:40px;border-radius:10px;
    display:inline-flex;align-items:center;justify-content:center;
    flex:0 0 auto;font-size:17px;
}
.wiki-card-icon img{
    width:21px;height:21px;object-fit:contain;display:block;
}
.wiki-card-body{display:flex;align-items:center;min-width:0;flex:1}
.wiki-card-title{font-size:15px;font-weight:750;line-height:1.25}
.wiki-card-arrow{
    margin-left:auto;color:var(--faint);font-size:10px;transition:color .15s,transform .15s;
}
.wiki-card:hover .wiki-card-arrow{color:var(--brand);transform:translateX(2px)}
.wiki-toc{
    display:flex;flex-wrap:wrap;gap:6px;
    margin-top:24px;padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--hover);
}
.wiki-toc a{
    padding:5px 9px;border-radius:999px;
    color:var(--dim);text-decoration:none;font-size:12px;font-weight:600;
    background:var(--bg);border:1px solid var(--border);
}
.wiki-toc a:hover{color:var(--brand);border-color:var(--brand)}
.wiki-detail-page{max-width:680px}
.wiki-detail-head{
    display:flex;gap:12px;align-items:center;
    margin-top:4px;padding-bottom:20px;border-bottom:1px solid var(--border);
}
.wiki-detail-icon{
    width:42px;height:42px;border-radius:10px;
    display:inline-flex;align-items:center;justify-content:center;
    flex:0 0 auto;font-size:18px;
}
.wiki-detail-icon img{
    width:23px;height:23px;object-fit:contain;display:block;
}
.wiki-detail-head h1{margin-top:0}
.wiki-detail-head .page-summary{margin-top:6px}
.wiki-detail-content{margin-top:24px}
.wiki-detail-content h2,.wiki-detail-content h3{scroll-margin-top:88px}

/* 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}
    .wiki-head{align-items:flex-start;flex-direction:column;gap:6px}
    .wiki-count{margin-bottom:0}
    .wiki-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
    .wiki-card{gap:8px;min-height:58px;padding:10px}
    .wiki-card-icon{width:34px;height:34px;border-radius:9px;font-size:15px}
    .wiki-card-icon img{width:19px;height:19px}
    .wiki-card-title{font-size:14px}
    .wiki-card-arrow{display:none}
    .wiki-detail-head{gap:10px;align-items:flex-start;padding-bottom:18px}
    .wiki-detail-icon{
        width:38px;height:38px;border-radius:9px;
        margin-top:1px;font-size:16px;
    }
    .wiki-detail-icon img{width:21px;height:21px}
    .wiki-detail-head h1{font-size:21px;line-height:1.25}
    .wiki-detail-head .page-summary{
        margin-top:4px;font-size:13px;line-height:1.55;color:var(--dim);
    }
    .wiki-detail-content{margin-top:20px}
    .wiki-detail-content h2{font-size:17px}
    .wiki-detail-content h3{font-size:15px}
    .wiki-detail-content p,.wiki-detail-content li{font-size:14px;line-height:1.75}
}