/* 공용 모바일 안전장치와 표/레이어 반응형 표현 */
html,
body {
    width: 100%;
    max-width: 100%;
}

body.site-shell,
body.admin-shell {
    overflow-x: clip;
}

/*
 * The approved symbol-and-wordmark source has generous concept-canvas whitespace.
 * Crop it non-destructively so the same source asset stays sharp and undistorted.
 * Source canvas: 1802x873, visible logo: x 230..1640 / y 336..516.
 */
.site-wordmark {
    position: relative;
    display: block;
    flex: 0 0 auto;
    width: 7.375rem;
    aspect-ratio: 1411 / 181;
    overflow: hidden;
}

.site-shell .site-wordmark img {
    position: absolute;
    top: -185.64%;
    left: -16.3%;
    width: 127.71%;
    height: auto;
    max-width: none;
}

@media (min-width: 640px) {
    .site-wordmark {
        width: 9.125rem;
    }
}

@media (min-width: 1024px) {
    .site-wordmark {
        width: 9.625rem;
    }
}

.site-shell main,
.admin-shell main,
.site-shell .container,
.admin-shell .admin-content {
    min-width: 0;
}

.charge-button:disabled {
    cursor: not-allowed;
    border-color: #d1d5db;
    background: #e5e7eb;
    color: #9ca3af;
    box-shadow: none;
}

.site-shell img,
.site-shell video,
.site-shell canvas,
.site-shell svg,
.admin-shell img,
.admin-shell video,
.admin-shell canvas,
.admin-shell svg {
    max-width: 100%;
}

.site-shell main input,
.site-shell main select,
.site-shell main textarea,
.admin-shell main input,
.admin-shell main select,
.admin-shell main textarea {
    min-width: 0;
    max-width: 100%;
}

.site-shell main .flex > *,
.admin-shell main .flex > * {
    min-width: 0;
}

.site-shell main p,
.site-shell main td,
.admin-shell main p,
.admin-shell main td {
    word-break: keep-all;
    overflow-wrap: break-word;
}

.site-shell main a,
.admin-shell main a {
    word-break: keep-all;
    overflow-wrap: normal;
}

.responsive-modal-overlay {
    padding: 1rem;
}

.responsive-modal-panel {
    max-width: 100%;
}

@media (max-width: 1023px) {
    .admin-content > .container,
    .admin-content > [class*="max-w-"] {
        width: 100%;
        padding: 0.25rem 0 1rem !important;
    }

    .admin-mobile-stack {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100%;
    }

    .admin-mobile-stack > input:not([type="checkbox"]):not([type="radio"]),
    .admin-mobile-stack > select,
    .admin-mobile-stack > button,
    .admin-mobile-stack > a {
        width: 100% !important;
    }

    .admin-content .tab-btn {
        flex-shrink: 0;
        white-space: nowrap;
    }

    .bid-detail-grid > .flex {
        gap: 0.5rem;
    }

    .bid-detail-grid > .flex > :first-child {
        width: 6rem !important;
    }

    table.mobile-detail-table,
    table.mobile-detail-table tbody {
        display: block;
        width: 100%;
    }

    table.mobile-detail-table colgroup {
        display: none;
    }

    table.mobile-detail-table tbody tr {
        display: grid;
        grid-template-columns: minmax(5.5rem, 34%) minmax(0, 1fr);
        border-bottom: 1px solid #e5e7eb;
    }

    table.mobile-detail-table tbody th,
    table.mobile-detail-table tbody td {
        display: block;
        min-width: 0;
        width: auto !important;
        padding: 0.7rem 0.75rem !important;
        word-break: keep-all;
        overflow-wrap: break-word;
    }

    table.mobile-order-bid-data {
        table-layout: fixed;
    }

    table.mobile-order-bid-data col:nth-child(1) {
        width: 38% !important;
    }

    table.mobile-order-bid-data col:nth-child(2) {
        width: auto !important;
    }

    table.mobile-order-bid-data col:nth-child(3) {
        width: 2.75rem !important;
    }

    table.mobile-order-bid-data td {
        padding: 0.7rem 0.65rem !important;
        word-break: keep-all;
        overflow-wrap: break-word;
    }

    table.mobile-order-bid-data td:last-child {
        padding-right: 0.45rem !important;
        padding-left: 0.35rem !important;
        white-space: nowrap;
    }

    table.mobile-order-bid-data input[type="text"],
    table.mobile-order-bid-data input[type="number"] {
        padding-right: 0.5rem !important;
        padding-left: 0.5rem !important;
        font-size: 1rem !important;
    }

    .site-shell .container,
    .admin-shell .container {
        width: 100%;
    }

    .site-shell main,
    .admin-shell main {
        font-size: 0.9375rem;
    }

    .site-shell main .note-editor,
    .admin-shell main .note-editor {
        max-width: 100%;
    }

    .site-shell main .note-toolbar,
    .admin-shell main .note-toolbar {
        display: flex;
        flex-wrap: wrap;
        overflow-x: hidden;
        white-space: normal;
    }

    .site-shell main .note-btn-group,
    .admin-shell main .note-btn-group {
        float: none;
        display: flex;
        flex-wrap: wrap;
        vertical-align: top;
    }

    .mobile-card-table-shell {
        overflow: visible !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    table.mobile-card-table,
    table.mobile-card-table tbody {
        display: block;
        width: 100% !important;
        min-width: 0 !important;
    }

    table.mobile-card-table colgroup,
    table.mobile-card-table thead {
        display: none !important;
    }

    table.mobile-card-table tbody {
        display: grid;
        gap: 0.75rem;
    }

    table.mobile-card-table tbody tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        height: auto !important;
        min-height: 0 !important;
        width: 100%;
        min-width: 0;
        overflow: hidden;
        border: 1px solid #e2e8f0;
        border-radius: 0.875rem;
        background: #fff;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
    }

    table.mobile-card-table tbody td {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        padding: 0.72rem 0.875rem !important;
        border: 0 !important;
        border-bottom: 1px solid #f1f5f9 !important;
        text-align: left !important;
        white-space: normal !important;
        line-height: 1.45;
        word-break: keep-all !important;
        overflow-wrap: break-word !important;
    }

    table.mobile-card-table tbody td:nth-last-child(-n + 2) {
        border-bottom: 0 !important;
    }

    table.mobile-card-table tbody td[data-mobile-wide="true"] {
        grid-column: 1 / -1;
    }

    table.mobile-card-table tbody td[data-mobile-primary="true"] {
        order: -1;
        grid-column: 1 / -1;
        background: #f8fafc;
    }

    table.mobile-card-table tbody td[data-mobile-wide="true"]:not(:last-child) {
        border-bottom: 1px solid #f1f5f9 !important;
    }

    table.mobile-card-table tbody td::before {
        content: attr(data-mobile-label);
        display: block;
        margin-bottom: 0.25rem;
        color: #64748b;
        font-size: 0.72rem;
        font-weight: 700;
        line-height: 1.45;
    }

    table.mobile-card-table tbody td[data-mobile-empty="true"] {
        display: block !important;
        grid-column: 1 / -1;
        padding: 2.5rem 1rem !important;
        text-align: center !important;
    }

    table.mobile-card-table tbody td[data-mobile-empty="true"]::before,
    table.mobile-card-table tbody td[data-mobile-label=""]::before {
        display: none;
    }

    table.mobile-card-table tbody td > :only-child {
        min-width: 0;
        max-width: 100%;
    }

    table.mobile-card-table tbody td .truncate {
        white-space: normal !important;
        display: -webkit-box !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    table.mobile-card-table tbody td button,
    table.mobile-card-table tbody td a,
    table.mobile-card-table tbody td select,
    table.mobile-card-table tbody td input:not([type="checkbox"]):not([type="radio"]) {
        max-width: 100%;
    }

    .responsive-modal-overlay {
        align-items: flex-end !important;
        padding: 0.75rem !important;
        overflow-y: auto;
    }

    .responsive-modal-panel {
        width: 100% !important;
        max-height: calc(100dvh - 1.5rem) !important;
        margin: auto 0 0 !important;
        overflow-y: auto !important;
        border-radius: 1rem !important;
    }

    .responsive-modal-panel > header,
    .responsive-modal-panel > [class*="border-b"] {
        flex-shrink: 0;
    }

    #_toast_ {
        right: 0.75rem;
        bottom: 0.75rem !important;
        left: 0.75rem !important;
        width: auto;
        transform: none !important;
    }

    #_toast_ > div {
        width: 100%;
        padding: 0.75rem 1rem !important;
        text-align: center;
        overflow-wrap: anywhere;
    }
}

@media (max-width: 479px) {
    table.mobile-card-table tbody td {
        padding: 0.68rem 0.75rem !important;
        font-size: 0.8125rem;
    }
}