:root{
    --brand:#FF5D1A;--brand-2:#E84F0F;--text:#222;--muted:#666;--line:#e9ecef;
    --radius:12px;--shadow:0 6px 18px rgba(0,0,0,.06)
}
*{box-sizing:border-box}
html,body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;color:var(--text)}
a{text-decoration:none;color:inherit}
.wrap{max-width:80%;margin:0 auto;padding:20px}
h1{margin:0 0 10px;font-size:1.6rem}
.meta-line{color:var(--muted);font-size:.9rem;margin:4px 0 16px}

/* search bar */
.toolbar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:10px 0 16px}
.search{display:flex;gap:8px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:8px 10px;background:#fff}
.search input{border:0;outline:0;min-width:220px;font-size:1rem}
.search button{border:0;padding:8px 12px;border-radius:10px;background:var(--brand);color:#fff;cursor:pointer}
.search button:hover{background:var(--brand-2)}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.chip{
    display:inline-block;padding:8px 12px;border:1px solid var(--line);border-radius:999px;
    font-size:.95rem;line-height:1;color:#333;background:#fff
}
.chip:hover{border-color:var(--brand);color:var(--brand)}
.chip.active{background:var(--brand);color:#fff;border-color:var(--brand)}

/* table */
table{width:100%;border-collapse:collapse;margin:12px 0 18px}
th,td{padding:12px;border-top:1px solid var(--line);vertical-align:top}
thead th{background:#fafafa;border-top:0;font-weight:700;font-size: 16px;text-align: center}
.title a{color:#111;font-weight:700;font-size: 16px;}
.title a:hover{color:var(--brand)}
.title h1{
    font-weight: 700;
    font-size: 2.5rem;
    text-align: center;
}
.excerpt{color:#555;margin-top:4px}

/* pager */
.pager{display:flex;gap:8px;justify-content:center;margin:16px 0}
.pager a,.pager strong{
    min-width:36px;height:36px;line-height:36px;text-align:center;
    border:1px solid var(--line);border-radius:10px;padding:0 10px
}
.pager strong{background:var(--brand);border-color:var(--brand);color:#fff}


/* 760px 이하: 3번째 컬럼(카테고리) 숨김 */
@media (max-width: 760px) {

    .faqList { font-size: 10px; }

    .faqList thead th:nth-of-type(3),
    .faqList tbody td:nth-of-type(3) {
        display: none;
    }
    .faqList .excerpt { display: none; }
}

/* 500px 이하: 4번째 컬럼(등록일) 추가 숨김 */
@media (max-width: 500px) {
    .faqList thead th:nth-of-type(4),
    .faqList tbody td:nth-of-type(4) {
        display: none;
    }
}


/* 카테고리 칩: 세로 리스트 */
.sidebar .chips{
    display:flex; flex-direction:column; gap:8px; margin:0;
}
.sidebar .chip{
    display:block;
    padding:9px 12px;
    border:1px solid var(--line);
    border-radius:10px;
    color:#333; background:#fff;
}
.sidebar .chip:hover{border-color:var(--brand); color:var(--brand)}
.sidebar .chip.active{background:var(--brand); color:#fff; border-color:var(--brand)}

/* 본문 상단의 정렬/검색만 유지 */
.toolbar{display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin:0 0 8px}


:root {
    --brand: #FF5D1A;
    --brand-2: #E84F0F;
    --text: #222;
    --muted: #666;
    --line: #e9ecef;
    --radius: 12px;
    --shadow: 0 6px 18px rgba(0, 0, 0, .06)
}

* {
    box-sizing: border-box
}

html, body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
    color: var(--text)
}

a {
    text-decoration: none;
    color: inherit
}

.wrap {
    max-width: 80%;
    margin: 0 auto;
    padding: 20px
}

h1 {
    margin: 0 0 12px;
    font-size: 1.8rem;
    line-height: 1.35
}

.meta-line {
    color: var(--muted);
    font-size: .95rem;
    margin: 4px 0 16px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap
}

/* toolbar (검색/정렬) - 상세에선 '목록으로'만 두어도 됨 */
.toolbar {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
    margin: 10px 0 16px
}

.btn {
    display: inline-block;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff
}

.btn:hover {
    border-color: var(--brand);
    color: var(--brand)
}

.btn.primary {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand)
}

.btn.primary:hover {
    background: var(--brand-2);
    border-color: var(--brand-2)
}

/* layout: sidebar + content */
.layout {
    display: grid;
    grid-template-columns:260px 1fr;
    gap: 20px;
    align-items: start
}

.sidebar {
    position: sticky;
    top: 90px;
    max-height: calc(100vh - 110px);
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    padding: 14px
}

.chips {
    display: flex;
    /*flex-direction: column;*/
    gap: 8px;
    margin: 0
}

.chip {
    display: block;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: #333;
    background: #fff
}

.chip:hover {
    border-color: var(--brand);
    color: var(--brand)
}

.chip.active {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand)
}

.article {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 20px
}

.content {
    margin-top: 16px;
    line-height: 1.75
}

.content img {
    max-width: 100%;
    height: auto
}

.content table {
    border-collapse: collapse;
    width: 100%
}

.content table, .content th, .content td {
    border: 1px solid #e5e5e5
}

.content th, .content td {
    padding: 8px
}

.adjacent {
    /*display: flex;*/
    display: none;
    justify-content: space-between;
    margin-top: 18px
}

.adjacent a {
    color: #555
}

.adjacent a:hover {
    color: #000
}

.backline {
    justify-content: right;
    display: flex;
    gap: 10px;
    margin: 8px 0 18px
}
@media (max-width: 1200px) {
    .sidebar{
        display: none;
    }
    .layout{
        display: block;
    }
}

@media (max-width: 960px) {


    .sidebar {
        position: static;
        max-height: none
    }

    .sidebar details {
        border: 1px solid var(--line);
        border-radius: 10px;
        padding: 10px
    }

    .sidebar summary {
        cursor: pointer;
        font-weight: 700;
        color: #333;
        outline: 0
    }
}

.faq-content {
    font-size: 1.05rem;
    line-height: 2.5;
    color: #222
}

.faq-content h2.q {
    font-size: 1.3rem;
    margin: 0 0 10px;
    line-height: 1.5;
}

.faq-content .lead {
    margin: 12px 0;
    padding: 12px 14px;
    border-left: 4px solid #FF5D1A;
    background: #fff8f4;
    color: #333;
    border-radius: 6px;
}

.faq-content ol {
    margin: 6px 0 16px 22px
}

.faq-content li {
    margin: 6px 0
}

.faq-content .tip {
    margin: 16px 0;
    padding: 12px 14px;
    background: #f6fbff;
    border: 1px solid #e5f2ff;
    border-radius: 8px
}

.faq-content blockquote {
    margin: 14px 0;
    padding: 10px 14px;
    border-left: 3px solid #e0e0e0;
    color: #555;
    background: #fafafa;
    border-radius: 4px
}

.faq-content p {
    margin: 8px 0
}

.faq-content code, .faq-content pre {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace
}

.faq-content img {
    max-width: 100%;
    height: auto
}

/* 기본 코드 버튼 (블루 톤) */
.btn-code {
    display:inline-block; margin:0 4px; padding:2px 10px;
    border:1px solid #e5f2ff; border-radius:999px;
    background:#f6fbff; color:#0b5cab; font-size:.92rem;
    line-height:1.9; text-decoration:none;
    transition:background .15s ease,border-color .15s ease,color .15s ease, box-shadow .15s ease;
}
.btn-code:hover { background:#e9f5ff; border-color:#cfe8ff; color:#084a8d; }
.btn-code:focus-visible {
    outline:0; box-shadow:0 0 0 3px rgba(11,92,171,.15), 0 0 0 1px #0b5cab;
}
.btn-code:active { transform:translateY(1px); }

/* 대안 버튼 (ALT) — 따뜻한 톤으로 가독성 분리 */
.btn-code-alt {
    display:inline-block; margin:0 4px; padding:2px 10px;
    border:1px solid #ffe1cc; border-radius:999px;
    background:#fff6f0; color:#9a3e00; font-size:.92rem;
    line-height:1.9; text-decoration:none;
    transition:background .15s ease,border-color .15s ease,color .15s ease, box-shadow .15s ease;
}
.btn-code-alt:hover { background:#ffefe5; border-color:#ffd1b5; color:#7b3200; }
.btn-code-alt:focus-visible {
    outline:0; box-shadow:0 0 0 3px rgba(255,93,26,.18), 0 0 0 1px #ff5d1a;
}
.btn-code-alt:active { transform:translateY(1px); }

/* 선택: 작은 아이콘 느낌 (앞에 점) */
.btn-code::before,
.btn-code-alt::before{
    content:""; display:inline-block; width:6px; height:6px; border-radius:50%;
    margin-right:6px; vertical-align:middle;
}
.btn-code::before { background:#0b5cab; }
.btn-code-alt::before { background:#ff7a2f; }

/* 다크 모드(선택) */
@media (prefers-color-scheme: dark) {
    .btn-code { background:#0d1b2a; border-color:#1f3b5a; color:#aac8ff; }
    .btn-code:hover { background:#0f2236; border-color:#2a4c73; color:#c5d9ff; }

    .btn-code-alt { background:#2a1b12; border-color:#5a3a26; color:#ffbd99; }
    .btn-code-alt:hover { background:#331f15; border-color:#6e462f; color:#ffd2b8; }
}

.title h1 {
    font-weight: 700;
    font-size: 2.5rem;
    text-align: center;
    color:midnightblue;
}

.prev-next-button {
    padding: 10px;
    text-align: center;
    outline: aquamarine;
    background: salmon;
    border-radius: 10px;
}
.prev-next-button span{
    color: #fff;
}