/* ============================================================
   v8.0.7 - Mobile App Home
   Desktop dashboard remains unchanged.
   ============================================================ */

.mobile-app-home,
.mobile-topbar-identity,
.mobile-kebab {
    display: none;
}

@media (max-width: 820px) {
    /* App-like header */
    .topbar {
        min-height: 76px;
        height: auto;
        padding: 11px 14px 10px 16px;
        background: #4058bb;
        color: #fff;
        border-bottom: 0;
        box-shadow: 0 2px 8px rgba(20, 34, 82, .22);
    }

    .desktop-menu-toggle,
    .desktop-topbar-title,
    .desktop-topbar-actions {
        display: none !important;
    }

    .mobile-topbar-identity {
        min-width: 0;
        display: flex;
        flex: 1;
        flex-direction: column;
        justify-content: center;
        line-height: 1.2;
    }

    .mobile-topbar-identity strong {
        color: #fff;
        font-size: 17px;
        font-weight: 900;
        letter-spacing: .02em;
    }

    .mobile-topbar-identity span {
        margin-top: 4px;
        color: #fff;
        font-size: 13px;
        font-weight: 750;
    }

    .mobile-topbar-identity small {
        margin-top: 3px;
        overflow: hidden;
        color: rgba(255,255,255,.78);
        font-size: 9px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-kebab {
        width: 42px;
        height: 48px;
        display: grid;
        place-items: center;
        flex: 0 0 42px;
        border: 0;
        background: transparent;
        color: #fff;
        cursor: pointer;
        font-size: 34px;
        font-weight: 800;
        line-height: 1;
    }

    .sidebar {
        z-index: 50;
    }

    .sidebar-backdrop {
        z-index: 49;
    }

    /* Dashboard switches to app launcher */
    .dashboard-page .cs-scope-bar {
        display: none;
    }

    .dashboard-page .content {
        max-width: none;
        padding: 0;
        background: #f4f6f9;
    }

    .desktop-dashboard {
        display: none !important;
    }

    .mobile-app-home {
        display: block;
        min-height: calc(100dvh - 76px);
        padding: 18px 14px 28px;
    }

    .mobile-home-intro {
        display: flex;
        justify-content: space-between;
        gap: 14px;
        align-items: flex-start;
        margin: 0 2px 16px;
        padding: 2px 2px 4px;
    }

    .mobile-home-kicker {
        display: inline-block;
        color: #637086;
        font-size: 8px;
        font-weight: 900;
        letter-spacing: .12em;
    }

    .mobile-home-intro h1 {
        margin: 3px 0 2px;
        color: #1d293b;
        font-size: 21px;
        letter-spacing: -.03em;
    }

    .mobile-home-intro p {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        margin: 0;
        color: #637086;
        font-size: 10px;
    }

    .mobile-home-intro p strong {
        color: #30415a;
    }

    .mobile-home-scope {
        max-width: 48%;
        padding: 8px 10px;
        border: 1px solid #dce3ee;
        border-radius: 10px;
        background: #fff;
        text-align: right;
        box-shadow: 0 2px 8px rgba(15,27,45,.035);
    }

    .mobile-home-scope span,
    .mobile-home-scope strong {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-home-scope span {
        color: #8a95a5;
        font-size: 7.5px;
    }

    .mobile-home-scope strong {
        margin-top: 3px;
        color: #4058bb;
        font-size: 9px;
    }

    .mobile-home-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .mobile-home-tile {
        position: relative;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        aspect-ratio: 1 / 1.05;
        overflow: hidden;
        padding: 13px 9px 11px;
        border: 0;
        border-radius: 13px;
        background: #fff;
        box-shadow: 0 3px 10px rgba(24, 37, 60, .11);
        text-align: center;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
        transition: transform .12s ease, box-shadow .12s ease;
    }

    .mobile-home-tile:active {
        transform: scale(.975);
        box-shadow: 0 1px 4px rgba(24, 37, 60, .14);
    }

    .mobile-tile-icon {
        width: 100%;
        flex: 1;
        display: grid;
        place-items: center;
        border-radius: 10px;
        color: #fff;
    }

    .mobile-tile-icon svg {
        width: min(62%, 82px);
        height: min(62%, 82px);
        fill: none;
        stroke: currentColor;
        stroke-width: 3;
        stroke-linecap: round;
        stroke-linejoin: round;
        opacity: .96;
        filter: drop-shadow(0 6px 4px rgba(18,32,65,.10));
    }

    .mobile-home-tile strong {
        width: 100%;
        margin-top: 10px;
        overflow: hidden;
        color: #202a39;
        font-size: 13px;
        font-weight: 900;
        letter-spacing: -.03em;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-home-tile small {
        width: 100%;
        margin-top: 3px;
        overflow: hidden;
        color: #808b9c;
        font-size: 8px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-tile-badge {
        position: absolute;
        z-index: 2;
        top: 8px;
        right: 8px;
        min-width: 21px;
        height: 21px;
        display: grid;
        place-items: center;
        padding: 0 6px;
        border: 2px solid #fff;
        border-radius: 999px;
        background: #e5484d;
        color: #fff;
        font-size: 9px;
        font-weight: 900;
        box-shadow: 0 2px 6px rgba(31,41,55,.18);
    }

    .tile-blue .mobile-tile-icon  { background: #4194e7; }
    .tile-cyan .mobile-tile-icon  { background: #28a7c7; }
    .tile-indigo .mobile-tile-icon{ background: #6978e8; }
    .tile-violet .mobile-tile-icon{ background: #7668df; }
    .tile-green .mobile-tile-icon { background: #16b98d; }
    .tile-yellow .mobile-tile-icon{ background: #f2bd37; }
    .tile-slate .mobile-tile-icon { background: #65748a; }
    .tile-dark .mobile-tile-icon  { background: #39475c; }

    .mobile-home-footer {
        display: flex;
        justify-content: center;
        gap: 6px;
        margin-top: 20px;
        color: #9aa4b1;
        font-size: 8px;
    }
}

@media (min-width: 600px) and (max-width: 820px) {
    .mobile-home-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .mobile-home-tile {
        aspect-ratio: 1 / 1;
    }
}

@media (max-width: 380px) {
    .mobile-home-grid {
        gap: 9px;
    }

    .mobile-home-tile {
        padding: 10px 7px 9px;
    }

    .mobile-home-tile strong {
        font-size: 11.5px;
    }

    .mobile-home-scope {
        display: none;
    }
}

@media (min-width: 821px) {
    .desktop-dashboard {
        display: block;
    }
}


/* ============================================================
   v8.0.8 - Mobile Outbound Request Form
   출고 요청 등록 화면을 모바일 카드형으로 전환
   ============================================================ */

.mobile-field-label {
    display: none;
}

@media (max-width: 820px) {
    .outbound-request-create-panel {
        overflow: visible;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        box-shadow: none;
    }

    .outbound-request-create-panel > .panel-head {
        padding: 14px 12px;
    }

    .outbound-request-create-form {
        padding: 12px !important;
    }

    .outbound-request-create-form .modern-scope-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .outbound-request-create-form .modern-scope-grid label {
        padding: 12px;
        border-radius: 12px;
    }

    .outbound-request-create-form .modern-scope-grid input,
    .outbound-request-create-form .modern-scope-grid select {
        min-width: 0;
        width: 100%;
        height: 48px;
        font-size: 14px;
    }

    .outbound-request-create-form .modern-request-head {
        margin: 14px 0 10px;
        padding: 14px 12px;
        border-radius: 12px;
    }

    .outbound-request-create-form .modern-request-head h3 {
        margin-top: 4px;
        font-size: 18px;
    }

    .outbound-request-create-form .modern-request-head p {
        font-size: 10.5px;
        line-height: 1.55;
    }

    .mobile-request-items {
        width: 100%;
        overflow: visible !important;
        margin: 0;
        padding: 0;
    }

    .mobile-request-items table {
        display: block;
        width: 100%;
        min-width: 0 !important;
        border: 0;
    }

    .mobile-request-items thead {
        display: none;
    }

    .mobile-request-items tbody {
        display: grid;
        width: 100%;
        gap: 10px;
    }

    .mobile-request-items .request-item-row {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(108px, .34fr);
        grid-template-areas:
            "part part"
            "stock qty"
            "remove remove";
        width: 100%;
        min-width: 0;
        padding: 12px;
        border: 1px solid #dce4ef;
        border-radius: 14px;
        background: #fff;
        box-shadow: 0 2px 8px rgba(20, 34, 55, .05);
    }

    .mobile-request-items .request-item-row:hover {
        background: #fff;
    }

    .mobile-request-items .request-item-row td {
        display: block;
        width: auto !important;
        min-width: 0 !important;
        padding: 0;
        border: 0;
        white-space: normal;
        overflow: visible;
    }

    .mobile-request-items .part-combo-cell {
        grid-area: part;
        z-index: 5;
        margin-bottom: 12px;
    }

    .mobile-request-items .available-cell {
        grid-area: stock;
        display: block;
        padding: 10px 10px;
        border: 1px solid #e0e6ef;
        border-radius: 11px;
        background: #f7f9fc;
        color: #26364d;
    }

    .mobile-request-items .request-qty-cell {
        grid-area: qty;
        margin-left: 8px;
    }

    .mobile-request-items .request-remove-cell {
        grid-area: remove;
        display: flex;
        justify-content: flex-end;
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid #edf0f4;
    }

    .mobile-request-items .mobile-field-label {
        display: block;
        margin-bottom: 6px;
        color: #738095;
        font-size: 9px;
        font-weight: 900;
    }

    .mobile-request-items .part-combo {
        width: 100%;
        min-width: 0;
    }

    .mobile-request-items .part-combo-control {
        width: 100%;
        min-width: 0 !important;
        min-height: 50px;
        border-radius: 11px;
    }

    .mobile-request-items .part-combo-input {
        width: 100%;
        min-width: 0 !important;
        height: 48px !important;
        padding: 0 11px !important;
        font-size: 13px !important;
        text-overflow: ellipsis;
    }

    .mobile-request-items .part-combo-toggle {
        flex: 0 0 48px;
        min-width: 48px;
    }

    .mobile-request-items .part-combo-menu {
        left: 0;
        right: 0;
        width: 100%;
        max-width: calc(100vw - 50px);
        max-height: min(50vh, 340px);
        overflow-x: hidden;
        overflow-y: auto;
        border-radius: 11px;
    }

    .mobile-request-items .part-combo-option {
        min-width: 0;
        padding: 11px 10px;
    }

    .mobile-request-items .part-option-main {
        display: grid;
        grid-template-columns: 1fr;
        gap: 2px;
        margin-bottom: 5px;
    }

    .mobile-request-items .part-option-main strong {
        min-width: 0;
        font-size: 11px;
        overflow-wrap: anywhere;
    }

    .mobile-request-items .part-option-main span {
        font-size: 10px;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .mobile-request-items .part-option-sub {
        display: grid;
        grid-template-columns: 1fr;
        gap: 2px;
        font-size: 8.5px;
        white-space: normal;
    }

    .mobile-request-items .available-value {
        display: block;
    }

    .mobile-request-items .available-value strong,
    .mobile-request-items .available-value small {
        display: block;
    }

    .mobile-request-items .available-value strong {
        font-size: 12px;
        color: #26364d;
    }

    .mobile-request-items .available-value small {
        margin-top: 3px;
        font-size: 9px;
        color: #7d899a;
    }

    .mobile-request-items .mobile-qty-label {
        display: block;
    }

    .mobile-request-items .request-qty {
        width: 100% !important;
        min-width: 0;
        height: 46px;
        padding: 0 8px !important;
        border: 1px solid #d6deea !important;
        border-radius: 10px !important;
        background: #fff !important;
        text-align: center;
        font-size: 15px;
        font-weight: 800;
    }

    .mobile-request-items .remove-item {
        width: auto;
        min-width: 76px;
        height: 38px;
        padding: 0 14px;
        border-radius: 9px;
        font-size: 0;
    }

    .mobile-request-items .remove-item::after {
        content: "품목 삭제";
        font-size: 10px;
        font-weight: 800;
    }

    .outbound-request-create-form .request-row-actions {
        align-items: center;
        margin-top: 10px;
        padding: 0;
    }

    .outbound-request-create-form .request-row-actions .btn {
        min-height: 44px;
    }

    .outbound-request-create-form .request-row-actions .panel-note {
        max-width: 45%;
        font-size: 9px;
        text-align: right;
    }

    .outbound-request-create-form .request-remark {
        margin-top: 14px;
    }

    .outbound-request-create-form .request-remark textarea {
        min-height: 96px;
    }

    .outbound-request-create-form .modern-note-box {
        margin-top: 12px;
        padding: 12px;
        line-height: 1.55;
    }

    .outbound-request-create-form .modern-note-box strong {
        font-size: 10px;
    }

    .outbound-request-create-form .modern-note-box span {
        font-size: 9.5px;
    }

    .outbound-request-create-form .form-actions {
        margin: 14px -12px -12px;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    }

    .outbound-request-create-form .form-actions .btn {
        min-height: 52px;
        border-radius: 11px;
        font-size: 14px;
    }
}

@media (max-width: 420px) {
    .mobile-request-items .request-item-row {
        grid-template-columns: minmax(0, 1fr) 104px;
        padding: 10px;
    }

    .mobile-request-items .part-combo-menu {
        max-width: calc(100vw - 38px);
    }

    .outbound-request-create-form .request-row-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .outbound-request-create-form .request-row-actions .btn,
    .outbound-request-create-form .request-row-actions .panel-note {
        width: 100%;
        max-width: none;
        text-align: left;
    }
}


/* ============================================================
   v8.0.9 - Universal Mobile Workspace
   모든 주요 메뉴를 모바일에서 가로 스크롤 없이 사용하도록 정리
   ============================================================ */

@media (max-width: 820px) {
    /* ---------- 공통 폭 / 텍스트 ---------- */
    .content,
    .content > *,
    .panel,
    .sf-stock-list,
    .form-panel,
    .form-panel.wide {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .content {
        overflow-x: hidden;
    }

    .page-heading,
    .panel-head,
    .request-items-head,
    .stock-search-toolbar,
    .sf-list-toolbar {
        min-width: 0;
    }

    .page-heading h1,
    .panel-head h2,
    .page-heading p,
    .panel-note,
    .info-box,
    .process-explainer,
    .branch-access-note,
    .critical-action-note {
        overflow-wrap: anywhere;
        word-break: keep-all;
    }

    .page-heading {
        width: 100%;
        gap: 10px;
    }

    .page-heading > div:first-child {
        min-width: 0;
        width: 100%;
    }

    .heading-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        width: 100%;
    }

    .heading-actions > *,
    .heading-actions form,
    .heading-actions .btn {
        width: 100%;
    }

    .panel-head {
        display: flex;
        flex-wrap: wrap;
        gap: 7px 12px;
    }

    .panel-head > div:first-child {
        min-width: 0;
        flex: 1 1 190px;
    }

    .panel-note {
        max-width: 100%;
        white-space: normal;
        text-align: left;
    }

    /* ---------- 필터 / 검색 ---------- */
    .filter-bar,
    .modern-filter-bar,
    .sf-list-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        width: 100%;
        min-width: 0;
    }

    .filter-bar > input,
    .filter-bar > select,
    .filter-bar > .search-input,
    .modern-filter-search,
    .modern-filter-select,
    .sf-search-box {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        grid-column: 1 / -1;
    }

    .filter-bar > button,
    .filter-bar > a,
    .filter-bar .btn {
        width: 100%;
        min-width: 0;
    }

    .modern-filter-actions {
        grid-column: 1 / -1;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
        width: 100%;
    }

    .modern-filter-actions > * {
        width: 100% !important;
        min-width: 0 !important;
    }

    .sf-list-toolbar {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
        padding: 10px;
    }

    .sf-list-summary {
        width: 100%;
        flex-wrap: wrap;
        white-space: normal;
    }

    /* ---------- 공통 모바일 자동 테이블 ---------- */
    .content .table-wrap:has(.mobile-auto-table),
    .content .sf-stock-table-wrap:has(.mobile-auto-table),
    .content .stock-picker-wrap:has(.mobile-auto-table) {
        width: 100%;
        max-width: 100%;
        max-height: none !important;
        overflow: visible !important;
        border: 0;
    }

    .content table.mobile-auto-table {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        border-collapse: separate;
        border-spacing: 0;
        table-layout: auto !important;
    }

    .content table.mobile-auto-table > thead {
        display: none !important;
    }

    .content table.mobile-auto-table > tbody {
        display: grid !important;
        width: 100%;
        gap: 10px;
        padding: 10px;
        box-sizing: border-box;
    }

    .content table.mobile-auto-table > tbody > tr {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        overflow: hidden !important;
        border: 1px solid #dfe5ee;
        border-radius: 13px;
        background: #fff;
        box-shadow: 0 2px 8px rgba(15, 27, 45, .045);
    }

    .content table.mobile-auto-table > tbody > tr:hover,
    .content table.mobile-auto-table > tbody > tr:hover > td {
        background: #fff;
    }

    .content table.mobile-auto-table > tbody > tr.selected-row {
        border-color: #6d9fe6;
        box-shadow: 0 0 0 2px rgba(54, 115, 201, .10);
    }

    .content table.mobile-auto-table > tbody > tr > td {
        position: static !important;
        display: grid !important;
        grid-template-columns: 96px minmax(0, 1fr);
        align-items: start;
        gap: 10px;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 9px 11px !important;
        border: 0 !important;
        border-bottom: 1px solid #edf1f5 !important;
        background: #fff !important;
        color: #2d3d53;
        text-align: left !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        overflow-wrap: anywhere;
        box-sizing: border-box;
        font-size: 10.5px;
        line-height: 1.45;
    }

    .content table.mobile-auto-table > tbody > tr > td:last-child {
        border-bottom: 0 !important;
    }

    .content table.mobile-auto-table > tbody > tr > td[data-label]::before {
        content: attr(data-label);
        min-width: 0;
        color: #8490a1;
        font-size: 8.5px;
        font-weight: 900;
        line-height: 1.55;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .content table.mobile-auto-table > tbody > tr > td.mobile-primary-cell {
        background: #f7f9fc !important;
        color: #24354c;
        font-size: 11.5px;
        font-weight: 800;
    }

    .content table.mobile-auto-table > tbody > tr > td.mobile-first-cell:first-child {
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
    }

    .content table.mobile-auto-table > tbody > tr > td.mobile-table-action {
        display: block !important;
        padding: 10px 11px !important;
        background: #fafbfd !important;
    }

    .content table.mobile-auto-table > tbody > tr > td.mobile-table-action::before {
        display: none !important;
    }

    .content table.mobile-auto-table > tbody > tr > td.mobile-table-action > *,
    .content table.mobile-auto-table > tbody > tr > td.mobile-table-action form,
    .content table.mobile-auto-table > tbody > tr > td.mobile-table-action .btn {
        width: 100% !important;
        max-width: none !important;
    }

    .content table.mobile-auto-table .mobile-table-empty,
    .content table.mobile-auto-table .empty-cell,
    .content table.mobile-auto-table .sf-empty-row {
        display: block !important;
        width: 100% !important;
        padding: 26px 14px !important;
        border: 0 !important;
        text-align: center !important;
        color: #8793a3;
        background: #fff !important;
    }

    .content table.mobile-auto-table .mobile-table-empty::before,
    .content table.mobile-auto-table .empty-cell::before,
    .content table.mobile-auto-table .sf-empty-row::before {
        display: none !important;
    }

    .content table.mobile-auto-table .table-sub {
        display: block;
        margin-top: 3px;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .content table.mobile-auto-table .mono,
    .request-stock-id {
        overflow-wrap: anywhere;
        word-break: break-all;
    }

    /* Outbound request progress is a work card on a phone, not a shrunken table. */
    .request-progress-panel table.mobile-auto-table > tbody > tr > td.mobile-stock-cell,
    .request-progress-panel table.mobile-auto-table > tbody > tr > td[data-label="Standard"],
    .request-progress-panel table.mobile-auto-table > tbody > tr > td[data-label="요청"],
    .request-progress-panel table.mobile-auto-table > tbody > tr > td[data-label="출고"],
    .request-progress-panel table.mobile-auto-table > tbody > tr > td[data-label="상태"],
    .request-progress-panel table.mobile-auto-table > tbody > tr > td[data-label="보관 위치"],
    .request-progress-panel table.mobile-auto-table > tbody > tr > td.mobile-case-prf-cell {
        display: none !important;
    }

    .request-progress-panel .request-link-summary {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 2px 10px;
        margin: 0 10px 2px;
        padding: 10px 12px;
        border: 1px solid #d7e3f2;
        border-radius: 10px;
        background: #f5f9ff;
    }

    .request-progress-panel .request-link-summary span {
        grid-column: 1 / -1;
        color: #71829a;
        font-size: 10px;
        font-weight: 800;
    }

    .request-progress-panel .request-link-summary strong,
    .request-progress-panel .request-link-summary small {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .request-progress-panel .request-link-summary small {
        align-self: center;
        color: #35619a;
        font-size: 11px;
    }

    .request-progress-panel table.mobile-auto-table > tbody > tr > td.mobile-primary-cell {
        display: block !important;
        width: 100% !important;
        padding: 11px 13px !important;
        font-size: 12px;
    }

    .request-progress-panel table.mobile-auto-table > tbody > tr > td.mobile-primary-cell::before {
        display: block;
        margin-bottom: 3px;
    }

    .request-progress-panel table.mobile-auto-table > tbody > tr > td[data-label="Part Name"] {
        font-size: 14px;
        font-weight: 700;
    }

    .request-progress-panel table.mobile-auto-table > tbody > tr > td.mobile-remaining-cell,
    .request-progress-panel table.mobile-auto-table > tbody > tr > td.mobile-case-prf-cell,
    .request-progress-panel table.mobile-auto-table > tbody > tr > td[data-label="보관 위치"] {
        grid-template-columns: 88px minmax(0, 1fr);
    }

    .request-progress-panel table.mobile-auto-table > tbody > tr > td.mobile-case-prf-cell strong,
    .request-progress-panel table.mobile-auto-table > tbody > tr > td.mobile-case-prf-cell .table-sub {
        overflow-wrap: anywhere;
        word-break: normal;
    }

    .request-progress-panel table.mobile-auto-table > tbody > tr > td.mobile-table-action {
        display: block !important;
    }

    /* Case/PRF details: compact, readable summary cards on a phone. */
    .content .panel:has(> h2:first-child) .case-request-summary {
        margin: 10px 0 14px;
        padding: 13px 14px;
        border: 1px solid #dce7f5;
        border-radius: 12px;
        background: linear-gradient(135deg, #f7faff, #eef5ff);
    }

    .content .case-request-summary > strong {
        display: block;
        color: #17365f;
        font-size: 17px;
        line-height: 1.3;
        overflow-wrap: anywhere;
    }

    .content .case-request-summary > p {
        margin: 7px 0 0;
        color: #5c6f87;
        font-size: 12px;
        line-height: 1.55;
        overflow-wrap: anywhere;
    }

    .content .case-information-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0;
        padding: 0;
        margin: 0;
        border-top: 1px solid #e8edf4;
    }

    .content .case-information-grid > div {
        display: grid;
        grid-template-columns: 96px minmax(0, 1fr);
        gap: 10px;
        padding: 11px 0;
        border-bottom: 1px solid #edf1f6;
    }

    .content .case-information-grid dt {
        color: #7a899d;
        font-size: 10px;
        font-weight: 800;
        line-height: 1.45;
    }

    .content .case-information-grid dd {
        min-width: 0;
        margin: 0;
        color: #263b57;
        font-size: 12px;
        line-height: 1.5;
        overflow-wrap: anywhere;
    }

    .content .case-shipping-summary {
        margin-top: 14px;
        padding: 12px 13px;
        border: 1px solid #e2e8f1;
        border-radius: 11px;
        background: #fafbfd;
    }

    .content .case-shipping-summary > span {
        color: #7a899d;
        font-size: 10px;
        font-weight: 800;
    }

    .content .case-shipping-summary > p {
        margin: 5px 0 0;
        color: #324965;
        font-size: 11px;
        line-height: 1.5;
        overflow-wrap: anywhere;
    }

    /* Inventory: 모바일에서 운영에 덜 중요한 메타정보는 접는다. */
    .inventory-responsive-table .mobile-secondary {
        display: none !important;
    }

    .inventory-responsive-table td[data-label="Fixed Qty"],
    .inventory-responsive-table td[data-label="작성일"],
    .inventory-responsive-table td[data-label="Priority"] {
        display: none !important;
    }

    .inventory-responsive-table td[data-label="Available"] strong,
    .inventory-responsive-table td[data-label="SF On Hand"] strong {
        font-size: 14px;
    }

    .sf-list-footer {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
        padding: 10px;
    }

    .sf-list-footer span {
        min-width: 0;
        padding: 7px 8px;
        border-radius: 8px;
        background: #f7f9fc;
        white-space: normal;
        overflow-wrap: anywhere;
        font-size: 8.5px;
    }

    /* ---------- 출고 상세 / 프로세스 ---------- */
    .linked-workflow,
    .linked-workflow.compact {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        overflow: visible !important;
        padding: 12px !important;
    }

    .linked-step {
        width: 100%;
        min-width: 0 !important;
        padding: 4px 0;
    }

    .linked-line {
        width: 2px !important;
        height: 16px !important;
        margin: 0 0 0 14px;
    }

    .request-detail-summary,
    .request-context-strip,
    .linked-case-summary,
    .scan-result,
    .scan-result.compact {
        grid-template-columns: 1fr !important;
    }

    .request-detail-summary > div,
    .request-context-strip > div,
    .linked-case-summary > div {
        min-width: 0;
    }

    .request-progress-value {
        width: 100%;
        text-align: left;
    }

    .request-progress-track {
        margin-inline: 12px;
    }

    .sf-sync-pending-item {
        grid-template-columns: 1fr !important;
        gap: 7px !important;
    }

    .prf-candidate-grid {
        grid-template-columns: 1fr !important;
    }

    .prf-candidate-top {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    /* ---------- 폼 ---------- */
    .form-grid,
    .scan-entry-grid,
    .change-part-serial-pair {
        grid-template-columns: 1fr !important;
    }

    .form-grid > *,
    .scan-entry-grid > *,
    .change-part-serial-pair > * {
        min-width: 0;
    }

    .form-grid input,
    .form-grid select,
    .form-grid textarea,
    .standalone-label textarea {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .form-actions {
        gap: 8px;
        flex-direction: column;
    }

    .form-actions > *,
    .form-actions .btn {
        width: 100%;
    }

    /* ---------- Scan ---------- */
    .scan-result-grid {
        grid-template-columns: 1fr !important;
    }

    .scan-stock-card {
        grid-template-columns: 1fr !important;
        gap: 9px !important;
    }

    .scan-request-body {
        grid-template-columns: 1fr !important;
    }

    .scan-request-actions {
        grid-template-columns: 1fr !important;
    }

    /* ---------- Inbound ---------- */
    .stock-picker-wrap {
        max-height: none !important;
        overflow: visible !important;
    }

    .inbound-header-grid,
    .erp-condition-grid.header-grid,
    .erp-filter-grid {
        grid-template-columns: 1fr !important;
    }

    .selected-stock-card,
    .critical-action-note,
    .process-explainer,
    .branch-access-note,
    .info-box {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    /* ---------- Salesforce / Admin ---------- */
    .dashboard-grid {
        grid-template-columns: 1fr !important;
    }

    pre {
        width: 100%;
        max-width: 100%;
        overflow-x: auto !important;
        box-sizing: border-box;
        white-space: pre;
        font-size: 9px !important;
    }

    /* 이미 responsive-card-table인 화면도 이 버전 스타일로 통일 */
    .responsive-card-table tbody {
        padding: 10px !important;
    }

    .responsive-card-table tbody td {
        height: auto !important;
        min-height: 0 !important;
        white-space: normal !important;
        overflow: visible !important;
    }
}

@media (max-width: 420px) {
    .content table.mobile-auto-table > tbody {
        padding: 8px;
        gap: 8px;
    }

    .content table.mobile-auto-table > tbody > tr > td {
        grid-template-columns: 82px minmax(0, 1fr);
        gap: 8px;
        padding: 8px 9px !important;
        font-size: 10px;
    }

    .content table.mobile-auto-table > tbody > tr > td[data-label]::before {
        font-size: 8px;
    }

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

    .modern-filter-actions {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 820px) {
    /* Usage / Change Parts 상단 연결정보 */
    .linked-work-card {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 1px !important;
        overflow: hidden;
        border-radius: 12px;
    }

    .linked-work-card > div {
        min-width: 0;
        padding: 10px 12px !important;
    }

    .linked-work-card strong,
    .linked-work-card small {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .serial-pair-arrow {
        transform: rotate(90deg);
        margin: -2px 0;
    }

    /* 인라인 style로 3열 고정된 관리자 KPI도 모바일에서 강제 재배치 */
    .content .metric-grid {
        width: 100% !important;
        max-width: 100% !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    /* 공통 버튼/링크가 부모 밖으로 나가지 않게 */
    .content .btn,
    .content button,
    .content input,
    .content select,
    .content textarea {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* 긴 Salesforce/API 값 */
    .content .mono {
        overflow-wrap: anywhere;
        word-break: break-all;
    }

    .content .info-box {
        display: block;
    }

    /* 요청/출고 화면의 행 버튼 */
    .row-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 7px;
        width: 100%;
        white-space: normal;
    }

    .row-actions .btn {
        width: 100%;
    }

    /* Barcode label option section */
    .label-print-options {
        grid-template-columns: 1fr !important;
    }

    /* 카메라 영역도 폭 제한 */
    .camera-frame,
    .camera-scanner,
    .scan-page-panel {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }
}

@media (max-width: 420px) {
    .content .metric-grid {
        grid-template-columns: 1fr !important;
    }
}


/* ============================================================
   v8.0.9 FINAL - MOBILE IS PRIMARY
   CS / 현장사용자는 스마트폰/태블릿 기준.
   PC Desktop UI는 관리자용 보조 화면.
   ============================================================ */

@media (max-width: 1024px) {
    :root {
        --mobile-page-pad: 12px;
        --mobile-radius: 14px;
    }

    html {
        -webkit-text-size-adjust: 100%;
    }

    body {
        background: #f4f6f9;
    }

    .main {
        width: 100%;
        margin-left: 0;
    }

    .content {
        width: 100%;
        max-width: none;
        padding: var(--mobile-page-pad);
    }

    /* 현장에서는 헤더를 앱처럼 단순하게 */
    .topbar {
        position: sticky;
        top: 0;
        z-index: 25;
        min-height: 72px;
        height: auto;
        padding: 10px 12px 9px 14px;
        background: #4058bb;
        border-bottom: 0;
        color: #fff;
    }

    .desktop-menu-toggle,
    .desktop-topbar-title,
    .desktop-topbar-actions {
        display: none !important;
    }

    .mobile-topbar-identity {
        display: flex !important;
        min-width: 0;
        flex: 1;
        flex-direction: column;
    }

    .mobile-topbar-identity strong {
        color: #fff;
        font-size: 17px;
        line-height: 1.15;
    }

    .mobile-topbar-identity span {
        margin-top: 4px;
        color: #fff;
        font-size: 12px;
        font-weight: 800;
    }

    .mobile-topbar-identity small {
        margin-top: 3px;
        overflow: hidden;
        color: rgba(255,255,255,.8);
        font-size: 9px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-kebab {
        width: 44px;
        height: 48px;
        display: grid !important;
        place-items: center;
        flex: 0 0 44px;
        border: 0;
        background: transparent;
        color: #fff;
        font-size: 32px;
    }

    .sidebar {
        width: min(88vw, 330px);
        z-index: 50;
    }

    .sidebar-backdrop {
        z-index: 49;
    }

    /* 모바일에서는 Scope bar도 compact */
    .cs-scope-bar {
        margin: 8px var(--mobile-page-pad) 0;
        padding: 9px 10px;
        gap: 5px 7px;
        border-radius: 11px;
        font-size: 9px;
    }

    .cs-scope-bar > span:not(.cs-scope-role):last-child {
        width: 100%;
    }

    /* 페이지 제목은 설명보다 행동 우선 */
    .page-heading {
        margin-bottom: 12px;
    }

    .page-heading .eyebrow {
        font-size: 8px;
    }

    .page-heading h1 {
        margin: 3px 0 0;
        font-size: 21px;
        line-height: 1.25;
    }

    .page-heading p {
        margin-top: 6px;
        font-size: 10px;
        line-height: 1.5;
    }

    /* Panel 자체도 앱 카드 느낌 */
    .panel,
    .sf-stock-list,
    .form-panel {
        border-radius: var(--mobile-radius);
        box-shadow: 0 2px 10px rgba(20, 34, 55, .05);
    }

    .panel-head {
        padding: 12px;
    }

    .panel-head h2 {
        font-size: 16px;
    }

    /* 입력은 모바일 손가락 기준 */
    .content input:not([type="hidden"]),
    .content select,
    .content textarea,
    .content .btn,
    .content button {
        min-height: 48px;
        font-size: 14px;
    }

    .content textarea {
        min-height: 92px;
    }

    .content .btn.small {
        min-height: 44px;
        font-size: 12px;
    }

    /* 업무 완료/저장 버튼은 하단에서 항상 쉽게 누름 */
    .form-actions {
        position: sticky;
        bottom: 0;
        z-index: 12;
        margin-left: -12px;
        margin-right: -12px;
        margin-bottom: -12px;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
        border-top: 1px solid #e2e7ef;
        background: rgba(255,255,255,.97);
        backdrop-filter: blur(8px);
    }

    .form-actions .btn.primary {
        min-height: 52px;
        font-size: 14px;
        font-weight: 900;
    }

    /* 목록 카드 - 모든 정보가 화면 안에 */
    .content table.mobile-auto-table > tbody > tr {
        border-radius: 14px;
    }

    .content table.mobile-auto-table > tbody > tr > td {
        grid-template-columns: 94px minmax(0, 1fr);
        padding: 10px 11px !important;
        font-size: 11px;
    }

    .content table.mobile-auto-table > tbody > tr > td[data-label]::before {
        font-size: 8.5px;
    }

    .content table.mobile-auto-table > tbody > tr > td.mobile-primary-cell {
        padding-top: 11px !important;
        padding-bottom: 11px !important;
        font-size: 12px;
    }

    /* 각 카드 버튼은 한 손 조작 가능 */
    .content table.mobile-auto-table > tbody > tr > td.mobile-table-action .btn,
    .content table.mobile-auto-table > tbody > tr > td.mobile-table-action button {
        min-height: 48px;
    }

    /* 검색은 먼저, 부가 필터는 세로로 */
    .filter-bar,
    .modern-filter-bar,
    .sf-list-actions {
        grid-template-columns: 1fr !important;
    }

    .modern-filter-actions {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    /* 카메라/스캔은 모바일에서 가장 크게 */
    .camera-frame {
        min-height: 220px;
        border-radius: 14px;
    }

    .camera-controls {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .camera-controls .camera-status {
        grid-column: 1 / -1;
    }

    /* 모바일 홈도 1024까지 앱 홈 유지 */
    .dashboard-page .desktop-dashboard {
        display: none !important;
    }

    .dashboard-page .mobile-app-home {
        display: block !important;
    }

    .dashboard-page .cs-scope-bar {
        display: none;
    }

    .dashboard-page .content {
        padding: 0;
    }

    .mobile-home-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* 큰 태블릿: 3열 앱 타일 */
@media (min-width: 700px) and (max-width: 1024px) {
    .mobile-home-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .content table.mobile-auto-table > tbody {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .content table.mobile-auto-table > tbody > tr {
        min-width: 0;
    }
}

/* 좁은 휴대폰은 레이블 폭을 더 줄임 */
@media (max-width: 390px) {
    :root {
        --mobile-page-pad: 9px;
    }

    .content table.mobile-auto-table > tbody > tr > td {
        grid-template-columns: 78px minmax(0, 1fr);
        gap: 7px;
        padding: 9px !important;
        font-size: 10.5px;
    }

    .camera-controls {
        grid-template-columns: 1fr;
    }

    .camera-controls .camera-status {
        grid-column: auto;
    }
}

/* Desktop은 관리자용 관리 화면 */
@media (min-width: 1025px) {
    .mobile-topbar-identity,
    .mobile-kebab,
    .mobile-app-home {
        display: none !important;
    }

    .desktop-dashboard {
        display: block !important;
    }
}

/* Final override for the outbound progress card. Keep the code readable even
   when older generic mobile-table rules appear later in this stylesheet. */
@media (max-width: 600px) {
    .request-progress-panel table.mobile-auto-table > tbody > tr > td.mobile-primary-cell,
    .request-progress-panel table.mobile-auto-table > tbody > tr > td[data-label="Part Name"] {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        grid-template-columns: none !important;
        overflow: visible !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
    }

    .request-progress-panel table.mobile-auto-table > tbody > tr > td.mobile-primary-cell {
        white-space: nowrap !important;
    }

    .request-progress-panel table.mobile-auto-table > tbody > tr > td.mobile-primary-cell::before {
        display: block !important;
        width: auto !important;
        margin-bottom: 4px;
    }

    .request-progress-panel table.mobile-auto-table > tbody > tr > td[data-label="Part Name"] {
        font-size: 14px !important;
        font-weight: 700 !important;
        white-space: normal !important;
    }
}