@media (max-width: 1100px) {
    .summary-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .summary-item:nth-child(3) {
        border-left: 0;
        border-top: 1px solid var(--line);
    }

    .summary-item:nth-child(4) {
        border-top: 1px solid var(--line);
    }
}

@media (max-width: 860px) {
    .app-sidebar {
        /* 좁은 화면에서는 로고와 닫기를 별도 칸에 두고 메뉴 영역만 스크롤한다. */
        display: grid;
        grid-template-columns: minmax(0, 1fr) 56px;
        grid-template-rows: 64px minmax(0, 1fr) auto;
        width: min(320px, calc(100vw - 40px));
        transform: translateX(-100%);
        box-shadow: var(--shadow-md);
        transition: transform 180ms ease-out;
    }

    .app-sidebar.is-open {
        transform: translateX(0);
    }

    .app-main {
        margin-left: 0;
    }

    .button.menu-toggle,
    .button.sidebar-close {
        display: inline-flex;
    }

    .app-sidebar .brand {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
        min-height: 64px;
        border-bottom: 0;
    }

    .app-sidebar .brand-mark { flex-shrink: 0; }
    .app-sidebar .brand-copy { min-width: 0; }
    .app-sidebar .brand-copy strong,
    .app-sidebar .brand-copy span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .button.sidebar-close {
        grid-column: 2;
        grid-row: 1;
        position: static;
        align-self: center;
        width: 44px;
        min-height: 44px;
        padding: 0;
        margin-right: 12px;
        --button-ink: var(--surface);
        --button-bg: var(--nav-active);
        --button-border: rgb(255 255 255 / 25%);
        font-size: 24px;
    }

    .app-sidebar .sidebar-nav {
        grid-column: 1 / -1;
        grid-row: 2;
        border-top: 1px solid rgb(255 255 255 / 10%);
        scrollbar-width: thin;
        scrollbar-color: var(--nav-active) var(--nav);
    }

    .app-sidebar .sidebar-footer {
        grid-column: 1 / -1;
        grid-row: 3;
    }

    .app-header {
        padding: 0 12px;
    }

    .app-content {
        padding: 15px;
    }

    .master-detail {
        grid-template-columns: 1fr;
    }

    .group-list {
        max-height: none;
    }

    .detail-fields-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .detail-sections {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .app-content {
        padding: 10px;
    }

    .header-context p {
        display: none;
    }

    .page-intro {
        flex-direction: column;
        padding: 15px;
    }

    .page-intro .button {
        width: 100%;
        margin-top: var(--space-4);
    }

    .summary-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .summary-item {
        padding: var(--space-4);
    }

    .summary-item:nth-child(odd) {
        border-left: 0;
    }

    .summary-item:nth-child(n + 3) {
        border-top: 1px solid var(--line);
    }

    .summary-value {
        font-size: 24px;
    }

    .login-page {
        display: block;
    }

    .login-panel {
        min-height: auto;
    }

    .login-context {
        display: none;
    }

    .workspace-toolbar,
    .toolbar-group {
        align-items: stretch;
        flex-direction: column;
    }

    .workspace-toolbar {
        padding: 10px;
    }

    .toolbar-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .toolbar-actions .button,
    .detail-header .button {
        min-height: 44px;
    }

    .detail-header {
        align-items: stretch;
        flex-direction: column;
        padding: 10px 12px;
    }

    .code-list {
        grid-template-columns: 1fr;
    }

    .toolbar-search {
        width: 100%;
    }

    .toolbar-search > .field-control:not(.toolbar-select),
    .toolbar-filter {
        flex: 0 0 auto;
        width: 100%;
        min-width: 0;
    }

    .toolbar-filter > label {
        width: 48px;
    }

    .toolbar-select {
        width: 100%;
    }

    .detail-fields-grid,
    .field-grid {
        grid-template-columns: 1fr;
    }

    .detail-body-actions {
        align-items: stretch;
    }

    .detail-body-actions .button {
        min-height: 40px;
        flex: 1;
    }

    .record-actions .button {
        min-height: 40px;
        padding-inline: 12px;
    }

    .editor-dialog {
        width: calc(100vw - 16px);
        max-height: calc(100vh - 16px);
    }

    .editor-footer .button {
        min-height: 44px;
        flex: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}