:root {
    --app-bg: #f6f7f9;
    --surface: #ffffff;
    --surface-subtle: #f9fafb;
    --ink: #17202a;
    --muted: #667085;
    --border: #dfe3e8;
    --border-strong: #c8ced6;
    --primary: #2563eb;
    --primary-soft: #eff6ff;
    --query: #198754;
    --query-soft: #eaf7f0;
    --report: #a15c00;
    --report-soft: #fff5df;
    --code-bg: #111827;
    --code-ink: #e5edf7;
    --header-height: 64px;
    --sidebar-width: 330px;
}

* {
    box-sizing: border-box;
    letter-spacing: 0;
}

html,
body {
    min-width: 320px;
    min-height: 100%;
}

body {
    margin: 0;
    color: var(--ink);
    background: var(--app-bg);
    font-family: "Noto Sans KR", Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button,
input,
select {
    font: inherit;
}

.boot-loader {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    place-items: center;
    background: var(--surface);
}

.is-loading .boot-loader {
    display: grid;
}

.is-loading .app-shell {
    visibility: hidden;
}

.app-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    height: var(--header-height);
    background: rgba(255, 255, 255, 0.96);
}

.header-inner {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
}

.brand {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: var(--ink);
    text-decoration: none;
}

.brand-mark {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    color: #fff;
    background: var(--ink);
    font-size: 18px;
}

.brand-copy {
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 8px;
    white-space: nowrap;
}

.brand-copy strong {
    font-size: 16px;
}

.brand-copy small {
    color: var(--muted);
    font-size: 12px;
}

.auth-status {
    align-items: center;
    gap: 7px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
}

.status-dot,
.status-code > span:first-child {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #d97706;
}

.auth-status.authenticated .status-dot,
.status-code > span:first-child {
    background: #16a34a;
}

.icon-button {
    width: 34px;
    height: 34px;
    padding: 0;
    display: inline-grid;
    place-items: center;
}

.btn,
.form-control,
.form-select,
.modal-content {
    border-radius: 6px;
}

.workspace {
    min-height: calc(100vh - var(--header-height));
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
}

.api-sidebar {
    background: var(--surface);
}

.sidebar-inner {
    position: sticky;
    top: var(--header-height);
    max-height: calc(100vh - var(--header-height));
    padding: 24px 18px;
    overflow-y: auto;
}

.sidebar-heading,
.section-heading,
.response-meta,
.run-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.eyebrow {
    display: block;
    margin-bottom: 3px;
    color: var(--primary);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.sidebar-heading h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 750;
}

.search-box {
    position: relative;
    margin: 18px 0 14px;
}

.search-box i {
    position: absolute;
    top: 50%;
    left: 11px;
    color: #98a2b3;
    transform: translateY(-50%);
    pointer-events: none;
}

.search-box input {
    height: 38px;
    padding-left: 34px;
    border-color: var(--border);
    background: var(--surface-subtle);
}

.endpoint-list {
    display: grid;
    gap: 4px;
}

.endpoint-item {
    width: 100%;
    min-height: 58px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 16px;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--ink);
    background: transparent;
    text-align: left;
}

.endpoint-item:hover {
    background: var(--surface-subtle);
}

.endpoint-item.active {
    border-color: #bfdbfe;
    background: var(--primary-soft);
}

.endpoint-item > span:first-child {
    min-width: 0;
}

.endpoint-item strong,
.endpoint-item small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.endpoint-item strong {
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 12px;
    font-weight: 700;
}

.endpoint-item small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 11px;
}

.endpoint-item > i {
    color: #98a2b3;
    font-size: 11px;
}

.api-content {
    min-width: 0;
}

.content-inner {
    width: min(1320px, 100%);
    margin: 0 auto;
    padding: 24px 28px 52px;
}

.endpoint-hero {
    padding: 0 0 18px;
}

.form-label code {
    color: var(--primary);
}

.endpoint-hero > p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

.api-section {
    margin-bottom: 18px;
    padding: 22px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
}

.api-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 18px;
}

.api-workspace .api-section {
    margin-bottom: 0;
}

.request-section {
    padding: 22px 24px;
}

.response-section {
    min-height: 420px;
    padding: 22px 24px;
}

.section-heading > div:first-child {
    display: flex;
    align-items: center;
    gap: 11px;
}

.section-index {
    width: 29px;
    height: 29px;
    display: grid;
    place-items: center;
    border-radius: 5px;
    color: var(--primary);
    background: var(--primary-soft);
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 10px;
    font-weight: 800;
}

.section-heading h2,
.section-heading p {
    margin: 0;
}

.section-heading h2 {
    font-size: 16px;
    font-weight: 750;
}

.section-heading p {
    margin-top: 2px;
    color: var(--muted);
    font-size: 11px;
}

.parameter-panel {
    margin-top: 20px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface-subtle);
}

.form-label {
    margin-bottom: 7px;
    font-size: 12px;
    font-weight: 700;
}

.code-example {
    margin-top: 20px;
    overflow: hidden;
    border-radius: 7px;
    background: var(--code-bg);
}

.code-toolbar {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 10px;
    border-bottom: 1px solid #2b3545;
}

.toolbar-group {
    display: inline-flex;
    padding: 2px;
    border-radius: 5px;
    background: #1d2635;
}

.code-option {
    min-width: 68px;
    padding: 5px 9px;
    border: 0;
    border-radius: 4px;
    color: #9aa8bc;
    background: transparent;
    font-size: 11px;
    font-weight: 700;
}

.code-option.active {
    color: #fff;
    background: #344054;
}

.code-option:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.usage-note {
    padding: 9px 14px;
    color: #fef3c7;
    background: #59420a;
    font-size: 11px;
}

.code-example pre,
.raw-response-wrap pre {
    margin: 0;
    overflow: auto;
}

.code-example pre {
    min-height: 96px;
    padding: 17px;
}

.code-example code,
.raw-response-wrap code {
    color: var(--code-ink);
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 12px;
    line-height: 1.65;
    white-space: pre;
}

.run-row {
    margin-top: 18px;
}

.run-row > span {
    color: var(--muted);
    font-size: 11px;
}

#run-button {
    min-width: 150px;
    min-height: 42px;
}

.empty-response,
.response-loading {
    min-height: 210px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 20px;
    border: 1px dashed var(--border-strong);
    border-radius: 7px;
    color: var(--muted);
    background: var(--surface-subtle);
    text-align: center;
}

.empty-response > i {
    margin-bottom: 3px;
    color: #98a2b3;
    font-size: 26px;
}

.empty-response strong {
    color: var(--ink);
    font-size: 13px;
}

.empty-response p,
.response-loading span {
    margin: 0;
    font-size: 11px;
}

.empty-response.compact {
    min-height: 170px;
    margin-top: 0;
}

.response-meta {
    margin-top: 18px;
    border-bottom: 1px solid var(--border);
}

.status-code {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #15803d;
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 11px;
    font-weight: 800;
}

.status-code.error {
    color: #b42318;
}

.status-code.error > span:first-child {
    background: #dc2626;
}

.response-meta .nav-link {
    padding: 9px 7px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
}

.response-meta .nav-link.active {
    color: var(--primary);
}

.raw-response-wrap {
    max-height: 560px;
    overflow: auto;
    margin-top: 14px;
    border-radius: 7px;
    background: var(--code-bg);
}

.raw-response-wrap pre {
    padding: 18px;
}

.preview-response {
    margin-top: 14px;
}

.response-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-left: 3px solid var(--primary);
    background: var(--primary-soft);
    font-size: 12px;
}

.summary-label {
    margin-right: 8px;
    color: var(--muted);
}

.response-table-wrap {
    border: 1px solid var(--border);
    border-radius: 6px;
}

.response-table-wrap table {
    min-width: 720px;
    font-size: 11px;
}

.response-table-wrap thead th {
    color: #475467;
    background: var(--surface-subtle);
    font-size: 10px;
    white-space: nowrap;
}

.timetable-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 6px;
}

.timetable-board {
    display: grid;
    grid-template-columns: 74px repeat(var(--timetable-days), minmax(126px, 1fr));
    min-width: 680px;
    background: var(--border);
    gap: 1px;
}

.timetable-corner,
.timetable-day-header,
.timetable-period-label,
.timetable-slot {
    min-width: 0;
    background: var(--surface);
}

.timetable-corner,
.timetable-day-header {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    color: #475467;
    background: var(--surface-subtle);
    font-size: 11px;
    font-weight: 800;
}

.timetable-period-label {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 9px 8px;
    color: var(--ink);
    text-align: center;
}

.timetable-period-label strong {
    font-size: 11px;
}

.timetable-period-label span {
    color: var(--muted);
    font-size: 9px;
    line-height: 1.35;
}

.timetable-slot {
    min-height: 78px;
    padding: 5px;
}

.timetable-slot.has-event {
    background: #f5f8ff;
}

.timetable-event {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 66px;
    padding: 8px;
    border-left: 3px solid var(--primary);
    color: var(--ink);
    background: #eaf0ff;
}

.timetable-event + .timetable-event {
    margin-top: 5px;
}

.timetable-event strong {
    overflow-wrap: anywhere;
    font-size: 11px;
    line-height: 1.35;
}

.timetable-event span {
    color: #475467;
    font-size: 9px;
    line-height: 1.45;
}

.gpa-badge {
    display: inline-block;
    min-width: 40px;
    padding: 3px 6px;
    border-radius: 4px;
    color: #fff;
    background: var(--primary);
    text-align: center;
    font-weight: 800;
}

.modal-content {
    border: 1px solid var(--border);
    box-shadow: 0 20px 55px rgba(16, 24, 40, 0.18);
}

.modal-header,
.modal-body,
.modal-footer {
    padding-left: 24px;
    padding-right: 24px;
}

.modal-header > div {
    display: grid;
    grid-template-columns: 38px 1fr;
    align-items: center;
    gap: 11px;
}

.modal-icon {
    width: 38px;
    height: 38px;
    display: grid;
    grid-row: 1;
    place-items: center;
    border-radius: 7px;
    color: var(--primary);
    background: var(--primary-soft);
}

.modal-title {
    grid-column: 2;
    font-size: 18px;
    font-weight: 760;
}

.modal-body > p {
    font-size: 12px;
}

.modal-footer .btn {
    min-width: 90px;
}

@media (max-width: 991.98px) {
    .workspace {
        display: block;
    }

    .api-sidebar {
        border-right: 0 !important;
        border-bottom: 1px solid var(--border);
    }

    .sidebar-inner {
        position: static;
        max-height: none;
        padding: 18px 20px;
        overflow: visible;
    }

    .sidebar-heading {
        display: none;
    }

    .search-box {
        max-width: 420px;
        margin: 0 0 12px;
    }

    .endpoint-list {
        display: flex;
        gap: 8px;
        padding-bottom: 5px;
        overflow-x: auto;
        scroll-snap-type: x proximity;
    }

    .endpoint-item {
        width: 265px;
        min-width: 265px;
        scroll-snap-align: start;
    }

    .content-inner {
        padding: 26px 24px 52px;
    }

    .api-workspace {
        display: block;
    }

    .api-workspace .api-section {
        margin-bottom: 18px;
    }
}

@media (max-width: 575.98px) {
    :root {
        --header-height: 58px;
    }

    .header-inner {
        padding: 0 14px;
    }

    .brand-mark {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
    }

    .brand-copy {
        display: block;
    }

    .brand-copy strong,
    .brand-copy small {
        display: block;
        line-height: 1.2;
    }

    .sidebar-inner {
        padding: 14px;
    }

    .endpoint-item {
        width: 248px;
        min-width: 248px;
    }

    .content-inner {
        padding: 20px 14px 40px;
    }

    .api-section {
        padding: 16px;
    }

    .response-section {
        min-height: 0;
    }

    .response-section .empty-response,
    .response-section .response-loading {
        min-height: 230px;
    }

    .section-heading {
        align-items: flex-start;
    }

    .section-heading > .badge {
        display: none;
    }

    .code-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .toolbar-group {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .code-option {
        min-width: 0;
    }

    .run-row {
        align-items: stretch;
        flex-direction: column;
    }

    #run-button {
        width: 100%;
    }

    .run-row > span {
        text-align: center;
    }

    .response-section .section-heading {
        align-items: center;
    }

    .response-section .section-heading #copy-button span {
        display: none;
    }

    .response-summary {
        align-items: flex-start;
        flex-direction: column;
    }

    .timetable-board {
        min-width: 620px;
    }

    .modal-dialog {
        margin: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}