:root {
    --blue: #3182f6;
    --blue-dark: #1b64da;
    --blue-bg: #e8f3ff;
    --g900: #191f28;
    --g800: #333d4b;
    --g700: #4e5968;
    --g600: #6b7684;
    --g500: #8b95a1;
    --g400: #b0b8c1;
    --g300: #d1d6db;
    --g200: #e5e8eb;
    --g100: #f2f4f6;
    --g50: #f9fafb;
    --white: #fff;
    --green: #00b96b;
    --green-bg: #e7f9f0;
    --orange: #ff8a00;
    --orange-bg: #fff3e0;
    --red: #f04452;
    --red-bg: #fef1f2;
    --purple: #8b5cf6;
    --purple-bg: #f3edff;
    --radius: 16px;
    --radius-sm: 10px;
    --sidebar-w: 280px;
    --shadow: 0 1px 3px rgba(0, 0, 0, .04), 0 6px 24px rgba(0, 0, 0, .04);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 32px
}

body {
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    color: var(--g800);
    background: var(--white);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    font-size: 15px;
}

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

code,
pre {
    font-family: 'SF Mono', SFMono-Regular, ui-monospace, Menlo, Monaco, 'Cascadia Code', monospace
}

/* ---------- Layout ---------- */
.layout {
    display: flex;
    min-height: 100vh
}

.sidebar {
    width: var(--sidebar-w);
    flex-shrink: 0;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    border-right: 1px solid var(--g100);
    background: var(--white);
    padding: 28px 16px 60px;
}

.sidebar::-webkit-scrollbar {
    width: 6px
}

.sidebar::-webkit-scrollbar-thumb {
    background: var(--g200);
    border-radius: 3px
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px 24px
}

.brand-logo {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--blue), #4d9bff);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 800;
    font-size: 17px;
}

.brand-name {
    font-weight: 800;
    font-size: 17px;
    color: var(--g900);
    letter-spacing: -.02em
}

.brand-sub {
    font-size: 12px;
    color: var(--g500);
    font-weight: 500
}

.nav-group {
    margin-top: 22px
}

.nav-group-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--g500);
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 0 12px 8px;
}

.nav a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 9px;
    font-size: 14px;
    color: var(--g600);
    font-weight: 500;
    transition: .12s;
}

.nav a:hover {
    background: var(--g50);
    color: var(--g900)
}

.nav a.active {
    background: var(--blue-bg);
    color: var(--blue-dark);
    font-weight: 700
}

.nav .m {
    font-size: 10px;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 5px;
    flex-shrink: 0;
    min-width: 34px;
    text-align: center;
    letter-spacing: .02em;
}

.m.get {
    background: var(--green-bg);
    color: var(--green)
}

.m.post {
    background: var(--blue-bg);
    color: var(--blue)
}

/* ---------- Main ---------- */
.main {
    flex: 1;
    min-width: 0
}

.content {
    max-width: 860px;
    margin: 0 auto;
    padding: 56px 48px 120px
}

.hero {
    padding-bottom: 8px
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--blue-bg);
    color: var(--blue-dark);
    font-weight: 700;
    font-size: 13px;
    padding: 6px 12px;
    border-radius: 999px;
    margin-bottom: 20px;
}

.hero h1 {
    font-size: 40px;
    font-weight: 800;
    color: var(--g900);
    letter-spacing: -.03em;
    line-height: 1.25
}

.hero p.lead {
    font-size: 17px;
    color: var(--g600);
    margin-top: 14px;
    max-width: 620px
}

.section {
    padding-top: 64px;
    scroll-margin-top: 24px
}

.section>h2 {
    font-size: 15px;
    font-weight: 800;
    color: var(--blue);
    letter-spacing: .02em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.endpoint {
    scroll-margin-top: 24px;
    padding-top: 48px
}

.endpoint h3 {
    font-size: 26px;
    font-weight: 800;
    color: var(--g900);
    letter-spacing: -.02em
}

.endpoint .desc {
    color: var(--g600);
    margin-top: 8px;
    font-size: 15px
}

/* url bar */
.urlbar {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--g900);
    color: #fff;
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    margin: 18px 0;
    font-size: 14px;
    flex-wrap: wrap;
}

.urlbar .mtag {
    font-weight: 800;
    font-size: 12px;
    padding: 4px 9px;
    border-radius: 6px;
    letter-spacing: .03em
}

.mtag.get {
    background: var(--green);
    color: #fff
}

.mtag.post {
    background: var(--blue);
    color: #fff
}

.urlbar .path {
    font-family: 'SF Mono', monospace;
    font-size: 14px;
    color: #e5e8eb;
    word-break: break-all
}

.urlbar .scope {
    margin-left: auto;
    font-size: 12px;
    color: var(--g400);
    font-family: 'SF Mono', monospace
}

.urlbar .scope b {
    color: #8fd6b3
}

/* cards & tables */
.card {
    background: var(--white);
    border: 1px solid var(--g100);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    margin: 16px 0;
}

.card-head {
    padding: 16px 20px;
    border-bottom: 1px solid var(--g100);
    font-weight: 700;
    color: var(--g900);
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px
}

.card-body {
    padding: 4px 0
}

h4.blk {
    font-size: 14px;
    font-weight: 700;
    color: var(--g800);
    margin: 28px 0 10px
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px
}

th {
    text-align: left;
    font-weight: 700;
    color: var(--g500);
    font-size: 12px;
    letter-spacing: .02em;
    padding: 11px 20px;
    background: var(--g50);
    text-transform: uppercase;
    border-bottom: 1px solid var(--g100);
}

td {
    padding: 13px 20px;
    border-bottom: 1px solid var(--g100);
    vertical-align: top;
    color: var(--g700)
}

tr:last-child td {
    border-bottom: none
}

td .pn {
    font-family: 'SF Mono', monospace;
    color: var(--g900);
    font-weight: 600;
    font-size: 13px
}

.req {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    color: var(--red);
    background: var(--red-bg);
    padding: 1px 7px;
    border-radius: 5px;
    margin-left: 6px;
    vertical-align: middle
}

.opt {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    color: var(--g500);
    background: var(--g100);
    padding: 1px 7px;
    border-radius: 5px;
    margin-left: 6px;
    vertical-align: middle
}

.ty {
    font-family: 'SF Mono', monospace;
    font-size: 12px;
    color: var(--purple);
    font-weight: 600
}

/* 파라미터/필드 · 타입 · 설명 3열 테이블 컬럼 간격 통일 */
.card table:has(th:nth-child(3)) {
    table-layout: fixed
}

.card table:has(th:nth-child(3)) th:nth-child(1),
.card table:has(th:nth-child(3)) td:nth-child(1) {
    width: 280px
}

.card table:has(th:nth-child(3)) th:nth-child(2),
.card table:has(th:nth-child(3)) td:nth-child(2) {
    width: 120px
}

.card table:has(th:nth-child(3)) td:nth-child(1),
.card table:has(th:nth-child(3)) td:nth-child(2) {
    word-break: break-word
}

@media(max-width:700px) {

    .card table:has(th:nth-child(3)) th:nth-child(1),
    .card table:has(th:nth-child(3)) td:nth-child(1) {
        width: 42%
    }

    .card table:has(th:nth-child(3)) th:nth-child(2),
    .card table:has(th:nth-child(3)) td:nth-child(2) {
        width: 18%
    }
}

/* code */
.code {
    position: relative;
    background: #0f1117;
    border-radius: var(--radius-sm);
    margin: 12px 0;
    overflow: hidden
}

.code-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 14px;
    border-bottom: 1px solid #1f2430
}

.code-lang {
    font-size: 11px;
    font-weight: 700;
    color: #8b95a1;
    letter-spacing: .05em;
    text-transform: uppercase
}

.copy {
    border: none;
    background: #1f2430;
    color: #b0b8c1;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 7px;
    cursor: pointer;
    transition: .12s;
    font-family: inherit;
}

.copy:hover {
    background: #2a3040;
    color: #fff
}

.copy.done {
    background: var(--green);
    color: #fff
}

pre {
    padding: 16px 18px;
    overflow-x: auto;
    font-size: 13px;
    line-height: 1.7
}

pre code {
    color: #e5e8eb;
    white-space: pre
}

.tok-key {
    color: #79b8ff
}

.tok-str {
    color: #9ecbff
}

.tok-num {
    color: #f8c555
}

.tok-bool {
    color: #ff9d7a
}

.tok-punc {
    color: #8b95a1
}

.tok-comment {
    color: #6b7280;
    font-style: italic
}

/* callouts */
.note {
    display: flex;
    gap: 12px;
    background: var(--blue-bg);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    margin: 16px 0;
    font-size: 14px;
    color: var(--g700);
    line-height: 1.55;
}

.note.warn {
    background: var(--orange-bg)
}

.note.tip {
    background: var(--green-bg)
}

.note.important {
    background: var(--purple-bg);
    color: var(--g800);
    font-weight: 500;
}

.note.important .ico {
    color: var(--purple)
}

.note.important b {
    color: #5b21b6
}

.note .ico {
    flex-shrink: 0;
    font-size: 16px;
    line-height: 1.4
}

.note b {
    color: var(--g900)
}

/* pill list for enums */
.pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px
}

.pill {
    font-family: 'SF Mono', monospace;
    font-size: 12px;
    font-weight: 600;
    background: var(--g100);
    color: var(--g700);
    padding: 3px 9px;
    border-radius: 6px
}

/* scope grid */
.scope-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
    margin-top: 14px
}

.scope-item {
    border: 1px solid var(--g100);
    border-radius: var(--radius-sm);
    padding: 13px 15px;
    background: var(--white)
}

.scope-item .code-name {
    font-family: 'SF Mono', monospace;
    font-weight: 700;
    color: var(--blue-dark);
    font-size: 13px
}

.scope-item .code-desc {
    font-size: 13px;
    color: var(--g600);
    margin-top: 3px
}

.divider {
    height: 1px;
    background: var(--g100);
    margin: 0
}

.status-list {
    list-style: none
}

.status-list li {
    display: flex;
    gap: 12px;
    padding: 11px 20px;
    border-bottom: 1px solid var(--g100);
    font-size: 14px;
    align-items: center
}

.status-list li:last-child {
    border-bottom: none
}

.status-code {
    font-family: 'SF Mono', monospace;
    font-weight: 800;
    font-size: 13px;
    padding: 3px 9px;
    border-radius: 6px;
    flex-shrink: 0;
    min-width: 44px;
    text-align: center
}

.sc-2 {
    background: var(--green-bg);
    color: var(--green)
}

.sc-4 {
    background: var(--orange-bg);
    color: var(--orange)
}

.sc-5 {
    background: var(--red-bg);
    color: var(--red)
}

/* flow diagram */
.flow-wrap {
    margin-top: 40px
}

.flow-wrap>h2 {
    font-size: 15px;
    font-weight: 800;
    color: var(--blue);
    letter-spacing: .02em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.flow-wrap>h3 {
    font-size: 26px;
    font-weight: 800;
    color: var(--g900);
    letter-spacing: -.02em;
    margin-top: 6px;
}

.flow-wrap>.desc {
    color: var(--g600);
    margin-top: 8px;
    font-size: 15px
}

.flow {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 28px 0 8px;
}

.flow-step {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 16px;
    align-items: start;
    position: relative;
}

.flow-step+.flow-step {
    margin-top: 0
}

.flow-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
}

.flow-num {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--blue);
    color: #fff;
    font-weight: 800;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 4px var(--blue-bg);
    z-index: 1;
}

.flow-line {
    flex: 1;
    width: 2px;
    background: var(--g200);
    min-height: 20px;
    margin: 6px 0;
}

.flow-step:last-child .flow-line {
    display: none
}

.flow-card {
    background: var(--white);
    border: 1px solid var(--g100);
    border-radius: var(--radius-sm);
    padding: 16px 18px;
    margin-bottom: 16px;
    box-shadow: var(--shadow);
}

.flow-card h4 {
    font-size: 15px;
    font-weight: 800;
    color: var(--g900);
    margin-bottom: 6px;
    letter-spacing: -.01em
}

.flow-card p {
    font-size: 14px;
    color: var(--g600);
    line-height: 1.55;
    margin: 0
}

.flow-card a {
    color: var(--blue-dark);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px
}

.flow-card a:hover {
    color: var(--blue)
}

.flow-branch {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 12px;
}

.flow-branch-item {
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--g700);
}

.flow-branch-item b {
    display: block;
    font-size: 13px;
    margin-bottom: 4px;
    color: var(--g900)
}

.flow-branch-item.ok {
    background: var(--green-bg)
}

.flow-branch-item.wait {
    background: var(--orange-bg)
}

@media(max-width:600px) {
    .flow-branch {
        grid-template-columns: 1fr
    }
}

.topbar {
    display: none
}

@media(max-width:1000px) {
    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        z-index: 50;
        transform: translateX(-100%);
        transition: .25s;
        box-shadow: 0 0 40px rgba(0, 0, 0, .1)
    }

    .sidebar.open {
        transform: translateX(0)
    }

    .topbar {
        display: flex;
        align-items: center;
        gap: 12px;
        position: sticky;
        top: 0;
        z-index: 40;
        background: rgba(255, 255, 255, .9);
        backdrop-filter: blur(10px);
        border-bottom: 1px solid var(--g100);
        padding: 14px 20px;
    }

    .menu-btn {
        border: 1px solid var(--g200);
        background: #fff;
        border-radius: 9px;
        width: 38px;
        height: 38px;
        font-size: 18px;
        cursor: pointer
    }

    .content {
        padding: 32px 20px 100px
    }

    .hero h1 {
        font-size: 30px
    }

    .overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .3);
        z-index: 45
    }

    .overlay.show {
        display: block
    }
}