@import '_content/Blazor.Bootstrap/Blazor.Bootstrap.7t9tbfaemk.bundle.scp.css';
@import '_content/Blazored.Toast/Blazored.Toast.bundle.scp.css';

/* /Components/FactorProperties.razor.rz.scp.css */
/* FactorProperties Component Styles */
/* 기존 전역 CSS 클래스들을 최대한 활용하고 최소한의 컴포넌트별 스타일만 정의 */

/* 컴포넌트 컨테이너 - LabelDesign에서 사용하던 스타일 재사용 */
.factor-properties-panel[b-2ttva3ng6o] {
    padding: 0.5rem 1rem;
    background: #fff;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
}

.factor-properties-panel[b-2ttva3ng6o]::-webkit-scrollbar {
    width: 6px;
}

.factor-properties-panel[b-2ttva3ng6o]::-webkit-scrollbar-thumb {
    background: rgba(229, 229, 229);
    border-radius: 6px;
}

.factor-properties-panel[b-2ttva3ng6o]::-webkit-scrollbar-track {
    background: var(--White);
}

/* 회전 입력 그룹 - LabelDesign에서 가져온 스타일 재사용 */
.factor-properties-panel .rotation-input-group[b-2ttva3ng6o] {
    width: 3.75rem;
    position: relative;
    display: flex;
    align-items: center;
}

.factor-properties-panel .rotation-input[b-2ttva3ng6o] {
    width: 100%;
    height: 2rem;
    border: 1px solid var(--border);
    border-radius: 0.25rem;
    padding: 0 1rem 0 0.5rem;
    font-size: 0.75rem;
}

.factor-properties-panel .rotation-input:focus[b-2ttva3ng6o] {
    outline: none;
    border-color: var(--Black);
}

.factor-properties-panel .rotation-unit[b-2ttva3ng6o] {
    position: absolute;
    right: 0.5rem;
    font-size: 0.75rem;
    color: var(--iGray200);
    pointer-events: none;
}

/* 모바일 대응 */
@media (max-width: 768px) {
    .factor-properties-panel[b-2ttva3ng6o] {
        padding: 0.75rem;
        margin: 0.5rem;
        padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
    }

    .factor-properties-panel .rotation-input-group[b-2ttva3ng6o] {
        min-height: 44px; /* 터치 친화적 크기 */
    }

    .factor-properties-panel .rotation-input[b-2ttva3ng6o] {
        padding: 0.5rem 0.75rem;
        font-size: 16px; /* iOS에서 줌 방지 */
    }

    .factor-properties-panel .form-control-sm[b-2ttva3ng6o],
    .factor-properties-panel .form-select-sm[b-2ttva3ng6o] {
        font-size: 16px;
        min-height: 44px;
    }
}

/*
   주요 버튼 스타일들은 전역 CSS에서 제공:
   - .btn-outline-danger (app.css에서 정의됨)
   - .btn-group-sm (app.css에서 정의됨)
   - .btn-caption (app.css에서 정의됨)
   - .btn-outline-primary (Bootstrap 기본)
   - 모든 flexbox 유틸리티 (Bootstrap 기본)

   따라서 별도로 재정의하지 않음
*/
/* /Components/LabelData.razor.rz.scp.css */
/* LabelData.razor.css */

.data-main[b-cnl3fqmjt7] {
    height: calc(100vh - 60px);
    margin-top: 60px;
    display: flex;
    flex-direction: column;
    background-color: var(--iGray05);
    font-family: 'Pretendard Variable', sans-serif;
    overflow: hidden;
    position: relative;
}

.data-content[b-cnl3fqmjt7] {
    flex: 1;
    overflow: hidden;
    padding: 20px;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.table-container[b-cnl3fqmjt7] {
    background: var(--White);
    border: 1px solid var(--iGray50);
    border-radius: 16px;
    box-shadow: 0 10px 26px rgba(47, 51, 54, 0.05);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.table-container .table-responsive[b-cnl3fqmjt7] {
    flex: 1;
    overflow-x: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
}

.data-panel-header[b-cnl3fqmjt7] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--iGray50);
    background: linear-gradient(180deg, var(--White) 0%, var(--iGray05) 100%);
}

.data-panel-header__copy[b-cnl3fqmjt7] {
    min-width: 0;
}

.data-panel-header__title[b-cnl3fqmjt7] {
    margin: 0;
    font-family: 'Pretendard Variable', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--iGray700);
    line-height: 1.2;
}

.data-panel-header__description[b-cnl3fqmjt7] {
    margin: 8px 0 0;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--iGray500);
}

.data-panel-header__meta[b-cnl3fqmjt7] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 6px;
}

.data-status-chip[b-cnl3fqmjt7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    padding: 0 10px;
    border: 1px solid var(--iGray100);
    border-radius: 999px;
    background: var(--White);
    color: var(--iGray600);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.data-status-chip--saved[b-cnl3fqmjt7] {
    border-color: var(--iGray100);
    color: var(--iGray700);
    background: var(--White);
}

.data-status-chip--dirty[b-cnl3fqmjt7] {
    border-color: var(--iRed100);
    color: var(--iRed700);
    background: var(--iRed05);
}

.data-status-chip--linked[b-cnl3fqmjt7] {
    border-color: var(--iRed100);
    color: var(--iRed700);
    background: var(--iRed05);
}

.data-status-chip--binding[b-cnl3fqmjt7] {
    border-color: var(--iGray100);
    color: var(--iGray700);
    background: var(--iGray05);
}

.data-status-chip--current[b-cnl3fqmjt7] {
    border-color: var(--iRed50);
    color: var(--iRed700);
    background: linear-gradient(180deg, var(--iRed05) 0%, #fff7f7 100%);
}

.table-data[b-cnl3fqmjt7] {
    margin-bottom: 0;
    color: var(--iGray700);
    border-collapse: separate;
    border-spacing: 0;
}

.table-data thead th[b-cnl3fqmjt7] {
    background: linear-gradient(180deg, var(--White) 0%, var(--iGray05) 100%);
    border-bottom: 1px solid var(--iGray50);
    border-right: 1px solid var(--iGray25);
    font-family: 'Pretendard Variable', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: var(--iGray500);
    letter-spacing: 0.01em;
    padding: 10px 12px;
    position: sticky;
    top: 0;
    z-index: 10;
    vertical-align: middle;
    white-space: nowrap;
    min-width: 120px;
}

.table-data thead th:last-child[b-cnl3fqmjt7] {
    border-right: none;
    position: sticky;
    right: 0;
    z-index: 15;
    box-shadow: -2px 0 6px rgba(47, 51, 54, 0.08);
}

.table-data td[b-cnl3fqmjt7] {
    vertical-align: middle;
    padding: 8px 12px;
    border-bottom: 1px solid var(--iGray25);
    color: var(--iGray700);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    background: var(--White);
    min-width: 120px;
    white-space: pre-wrap;
}

.table-data td:last-child[b-cnl3fqmjt7] {
    position: sticky;
    right: 0;
    z-index: 5;
    box-shadow: -2px 0 6px rgba(47, 51, 54, 0.08);
}

.table-data tbody tr:last-child td[b-cnl3fqmjt7] {
    border-bottom: none;
}

.table-data tbody tr[b-cnl3fqmjt7] {
    transition: background-color 0.16s ease, box-shadow 0.16s ease;
    cursor: pointer;
}

.table-data tr:hover[b-cnl3fqmjt7] {
    background-color: transparent;
}

.table-data tbody tr:hover td[b-cnl3fqmjt7] {
    background-color: var(--iRed05);
}

.table-data tbody tr:nth-child(even) td[b-cnl3fqmjt7] {
    background-color: var(--iGray05);
}

.table-data tbody tr:nth-child(even):hover td[b-cnl3fqmjt7] {
    background-color: var(--iRed05);
}

.table-data tbody tr.table-warning td[b-cnl3fqmjt7] {
    background-color: #fff8e8;
}

.table-data tbody tr.table-info td[b-cnl3fqmjt7] {
    background-color: var(--iGray05);
}

.table-data tbody tr.table-row--current td[b-cnl3fqmjt7] {
    background: linear-gradient(180deg, var(--iRed05) 0%, #fff6f6 100%);
    box-shadow: inset 0 1px 0 var(--iRed100), inset 0 -1px 0 var(--iRed100);
}

.table-data tbody tr.table-row--current td:first-child[b-cnl3fqmjt7] {
    box-shadow: inset 3px 0 0 var(--iRed700), inset 0 1px 0 var(--iRed100), inset 0 -1px 0 var(--iRed100);
}

.table-data th.table-primary[b-cnl3fqmjt7] {
    background: linear-gradient(180deg, var(--iRed05) 0%, #fff5f5 100%);
    color: var(--iRed700);
    border-bottom-color: var(--iRed100);
}

.table-data .form-control[b-cnl3fqmjt7],
.table-data input[type="text"][b-cnl3fqmjt7] {
    min-height: 30px;
    border: 1px solid var(--iGray100);
    border-radius: 6px;
    font-family: 'Pretendard Variable', sans-serif;
    font-size: 12px;
    color: var(--Black);
    background: var(--White);
    box-shadow: none;
}

.table-data .form-control:focus[b-cnl3fqmjt7],
.table-data input[type="text"]:focus[b-cnl3fqmjt7] {
    border-color: var(--iRed500);
    box-shadow: 0 0 0 3px rgba(216, 92, 93, 0.12);
}

.design-nbg-right .spinner-border[b-cnl3fqmjt7],
.design-nbg-right-mobile .spinner-border[b-cnl3fqmjt7] {
    color: currentColor;
}

.table-data .btn[b-cnl3fqmjt7] {
    font-size: 12px;
    padding: .25rem .625rem;
    line-height: 1;
}

.table-actions[b-cnl3fqmjt7] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.pagination-container[b-cnl3fqmjt7] {
    padding: 16px 20px 20px;
    display: flex;
    justify-content: center;
    background-color: var(--iGray05);
    border-top: 1px solid var(--iGray50);
}

.pagination-container .pagination[b-cnl3fqmjt7] {
    gap: 6px;
}

.pagination-container .page-link[b-cnl3fqmjt7] {
    min-width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid var(--iGray100);
    color: var(--iGray700);
    background: var(--White);
    box-shadow: none;
}

.pagination-container .page-link:hover[b-cnl3fqmjt7] {
    background: var(--iRed05);
    border-color: var(--iRed100);
    color: var(--iRed700);
}

.pagination-container .form-control[b-cnl3fqmjt7] {
    border: 1px solid var(--iGray100);
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--iGray700);
}

.empty-state[b-cnl3fqmjt7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 360px;
    padding: 32px;
    border: 1px dashed var(--iGray100);
    border-radius: 20px;
    background: linear-gradient(180deg, var(--White) 0%, var(--iGray05) 100%);
    color: var(--iGray500);
    text-align: center;
}

.empty-state p[b-cnl3fqmjt7] {
    max-width: 360px;
    margin: 16px 0 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.6;
}

/* Toolbar specifics for Data */
.data-toolbar-item[b-cnl3fqmjt7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.data-toolbar-item small[b-cnl3fqmjt7] {
    font-size: 10px;
    color: #666;
}

/* Custom width for action columns */
.tw-80[b-cnl3fqmjt7] {
    width: 80px;
}
.tw-120[b-cnl3fqmjt7] {
    width: 120px;
}

/* Sheet Selection Overlay */
.sheet-select-overlay[b-cnl3fqmjt7] {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

.sheet-select-dialog[b-cnl3fqmjt7] {
    background: var(--White);
    border-radius: 16px;
    padding: 28px 24px;
    width: 320px;
    max-width: 90vw;
    box-shadow: 0 20px 60px rgba(47, 51, 54, 0.16);
}

.sheet-select-title[b-cnl3fqmjt7] {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 700;
    color: var(--iGray700);
}

.sheet-select-desc[b-cnl3fqmjt7] {
    margin: 0 0 16px;
    font-size: 13px;
    color: var(--iGray500);
    line-height: 1.5;
}

.sheet-select-list[b-cnl3fqmjt7] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 20px;
    max-height: 240px;
    overflow-y: auto;
}

.sheet-select-item[b-cnl3fqmjt7] {
    text-align: left;
    padding: 10px 14px;
    border: 1px solid var(--iGray100);
    border-radius: 10px;
    background: var(--White);
    color: var(--iGray700);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.sheet-select-item:hover[b-cnl3fqmjt7] {
    background: var(--iRed05);
    border-color: var(--iRed100);
}

.sheet-select-item.active[b-cnl3fqmjt7] {
    background: var(--iRed05);
    border-color: var(--iRed500);
    color: var(--iRed700);
    font-weight: 600;
}

.sheet-select-actions[b-cnl3fqmjt7] {
    display: flex;
    gap: 8px;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .data-content[b-cnl3fqmjt7] {
        padding: 12px;
    }

    .data-panel-header[b-cnl3fqmjt7] {
        flex-direction: column;
        align-items: stretch;
        padding: 16px;
    }

    .data-panel-header__meta[b-cnl3fqmjt7] {
        justify-content: flex-start;
    }

    .table-container[b-cnl3fqmjt7] {
        border-radius: 14px;
    }

    .table-data thead th[b-cnl3fqmjt7],
    .table-data td[b-cnl3fqmjt7] {
        padding: 12px 10px;
        font-size: 12px;
    }

    .table-data .btn[b-cnl3fqmjt7] {
        min-width: 54px;
        font-size: 11px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .pagination-container[b-cnl3fqmjt7] {
        padding: 14px 12px 16px;
    }

    .empty-state[b-cnl3fqmjt7] {
        min-height: 280px;
        padding: 24px 18px;
    }
}
/* /Components/LabelDesign.razor.rz.scp.css */
.floating-toolbar[b-j7cwpfwsle] {
    position: absolute;
    top: 2rem;
    left: 50%;
    transform: translateX(-50%);
    border-radius: .5rem;
    box-shadow: 0px 0px 11px rgba(0, 0, 0, 0.15);
    background-color: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    z-index: 100;
}

.floating-toolbar-mobile[b-j7cwpfwsle] {
    position: absolute;
    bottom: 0;
    left: 0;
    top: auto;
    z-index: 900;
    transform: translateX(0);
    border-radius: 0;
    box-shadow: 0px 0px 11px rgba(0, 0, 0, 0.15);
    background-color: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    padding: 0.5rem 0 calc(1.25rem + env(safe-area-inset-bottom, 0px)) 0;
    overflow-x: scroll;
    width: 100%;
}

.floating-toolbar-content[b-j7cwpfwsle] {
    display: flex;
    align-items: center;
}

.floating-toolbar-btn[b-j7cwpfwsle] {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: transparent;
    width: 3.25rem;
    height: 3.25rem;
    cursor: pointer;
    padding: 0.5rem;
    border: none;
    color: var(--Black);
    opacity: .57;
    flex-shrink: 0;
}

.floating-toolbar-btn:hover[b-j7cwpfwsle] {
    opacity: 1;
}
.floating-toolbar-btn:focus span[b-j7cwpfwsle],
.floating-toolbar-btn.active span[b-j7cwpfwsle]{
    color: var(--iRed700) !important;
    opacity: 1;
}

.floating-toolbar-btn img[b-j7cwpfwsle] {
    width: 24px;
    height: 24px;
    margin-bottom: 0.25rem;
}
.floating-toolbar-btn:focus img[b-j7cwpfwsle],
.floating-toolbar-btn.active img[b-j7cwpfwsle] {
    filter: invert(33%) sepia(93%) saturate(633%) hue-rotate(341deg) brightness(95%) contrast(101%);
    opacity: 1;
}

.floating-toolbar-btn span[b-j7cwpfwsle] {
    text-align: center;
    white-space: nowrap;
    font-size: 0.6875rem;
}

.floating-toolbar-divider[b-j7cwpfwsle] {
    width: 1px;
    height: 3.25rem;
    background-color: var(--iGray50);
    margin: 0 4px;
    flex-shrink: 0;
}
@media (max-width: 768px) {
    .left-sidebar[b-j7cwpfwsle] {
        display: none !important;
    }
    .preview-paper[b-j7cwpfwsle] {
        text-align: center;
    }

    .labeldoc-main[b-j7cwpfwsle] {
        position: fixed;
        top: 60px;
        left: 0;
        right: 0;
        width: 100%;
        height: calc(var(--mobile-visible-viewport-height, 100vh) - 60px);
        min-height: calc(var(--mobile-visible-viewport-height, 100vh) - 60px);
        max-height: calc(var(--mobile-visible-viewport-height, 100vh) - 60px);
        margin-top: 0;
        overscroll-behavior: none;
    }

    .labeldoc-content[b-j7cwpfwsle],
    .labeldoc-canvas-container[b-j7cwpfwsle],
    .labeldoc-canvas[b-j7cwpfwsle] {
        overscroll-behavior: none;
    }
}
/* Main layout adjustments */
.labeldoc-main[b-j7cwpfwsle] {
    height: calc(var(--mobile-visible-viewport-height, 100vh) - 60px);
    margin-top: 60px;
    display: flex;
    background-color: #F8F9FA;
    min-height: 0;
    overflow: hidden;
}

@media (max-width: 768px) {
    .labeldoc-main[b-j7cwpfwsle] {
        margin-top: 0;
    }
}

/* Left sidebar - 213px width to match Figma */
.left-sidebar[b-j7cwpfwsle] {
    width: 213px !important;
    min-width: 213px !important;
    max-width: 213px !important;
    flex-shrink: 0;
    background-color: var(--White);
    border-right: 1px solid var(--iGray100);
    padding: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Main content area */
.labeldoc-content[b-j7cwpfwsle] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    height: 100%;
    min-height: 0;
    min-width: 0;
    width: 0;
}

/* Canvas container with rulers - Figma style */
.labeldoc-canvas-container[b-j7cwpfwsle] {
    position: relative;
    flex: 1;
    overflow: hidden;
    min-height: 0;
    min-width: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
}



/* Canvas editing area - flexible sizing */
.labeldoc-canvas[b-j7cwpfwsle] {
    position: relative;
    overflow: hidden;
    z-index: 8;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    width: 100%;
    touch-action: none;
}


/* Preview label adjustments */
.properties-section__title[b-j7cwpfwsle] {
    font-size: 12px;
    font-weight: 600;
    color: #333333;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.properties-section__subtitle[b-j7cwpfwsle] {
    font-size: 11px;
    font-weight: 500;
    color: #666666;
    margin: 12px 0 8px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}



/* Preview container and layer panel overlay styles */
.preview-container[b-j7cwpfwsle] {
    position: relative;
}

.offcanvas-bottom-drawer.offcanvas-minimized[b-j7cwpfwsle] {
    height: auto !important;
    max-height: 40vh;
}

.offcanvas-bottom-drawer.offcanvas-page-preview.offcanvas-minimized[b-j7cwpfwsle] {
    max-height: min(80vh, calc(var(--mobile-visible-viewport-height, 100vh) - 72px)) !important;
}

.offcanvas-bottom-drawer.offcanvas-properties[b-j7cwpfwsle] {
    max-height: min(64vh, calc(var(--mobile-visible-viewport-height, 100vh) - 128px)) !important;
}

.offcanvas-bottom-drawer.offcanvas-properties .offcanvas-body[b-j7cwpfwsle] {
    max-height: calc(min(64vh, calc(var(--mobile-visible-viewport-height, 100vh) - 128px)) - 56px);
}

.offcanvas-bottom-drawer.offcanvas-layers[b-j7cwpfwsle] {
    max-height: min(72vh, calc(var(--mobile-visible-viewport-height, 100vh) - 104px)) !important;
}

.offcanvas-bottom-drawer.offcanvas-layers .offcanvas-body[b-j7cwpfwsle] {
    max-height: calc(min(72vh, calc(var(--mobile-visible-viewport-height, 100vh) - 104px)) - 56px);
}

.offcanvas-bottom-drawer.offcanvas-page-preview .offcanvas-body[b-j7cwpfwsle] {
    max-height: calc(min(80vh, calc(var(--mobile-visible-viewport-height, 100vh) - 72px)) - 56px);
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    scroll-padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
}

.offcanvas-bottom-drawer .offcanvas-body[b-j7cwpfwsle] {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
}

.offcanvas-bottom-drawer.offcanvas-text-edit-mode[b-j7cwpfwsle] {
    height: auto !important;
    max-height: 0;
    overflow: hidden;
    border: 0;
    background: transparent;
}

.offcanvas-bottom-drawer.offcanvas-text-edit-mode .offcanvas-header[b-j7cwpfwsle] {
    display: none;
}

.offcanvas-bottom-drawer.offcanvas-text-edit-mode .offcanvas-body[b-j7cwpfwsle] {
    max-height: 0;
    min-height: 0;
    padding: 0;
    margin: 0;
    border: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.mobile-text-mini-toolbar[b-j7cwpfwsle] {
    position: fixed;
    left: 8px;
    right: 8px;
    z-index: 1200;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.18);
    backdrop-filter: blur(10px);
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
}

.mobile-text-mini-toolbar .mini-control[b-j7cwpfwsle] {
    height: 34px;
    border: 1px solid var(--iGray100);
    border-radius: 8px;
    font-size: 0.75rem;
    background: var(--White);
    color: var(--Black);
    touch-action: manipulation;
}

.mobile-text-mini-toolbar .mini-font[b-j7cwpfwsle] {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 34vw;
    padding: 0 0.625rem;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
}

.mobile-text-mini-toolbar .mini-font__label[b-j7cwpfwsle] {
    display: block;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: left;
    font-size: 0.72rem;
}

.mobile-text-mini-toolbar .mini-size-group[b-j7cwpfwsle],
.mobile-text-mini-toolbar .mini-biu-group[b-j7cwpfwsle] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.mobile-text-mini-toolbar .mini-size-btn[b-j7cwpfwsle],
.mobile-text-mini-toolbar .mini-biu-btn[b-j7cwpfwsle] {
    width: 28px;
    min-width: 28px;
    padding: 0;
    text-align: center;
}

.mobile-text-mini-toolbar .mini-size-value[b-j7cwpfwsle] {
    width: 36px;
    min-width: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mobile-text-mini-toolbar .mini-biu-btn.active[b-j7cwpfwsle] {
    border-color: var(--iRed700);
    color: var(--iRed700);
}

.mobile-text-mini-toolbar .mini-paste[b-j7cwpfwsle] {
    width: 36px;
    min-width: 36px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mobile-text-mini-toolbar .mini-paste img[b-j7cwpfwsle] {
    width: 18px;
    height: 18px;
}

.mobile-text-mini-toolbar .mini-color[b-j7cwpfwsle] {
    width: 36px;
    min-width: 36px;
    padding: 2px;
}

.mini-picker-panel[b-j7cwpfwsle] {
    position: fixed;
    left: 8px;
    right: 8px;
    z-index: 1201;
    padding: 6px;
    transform: translateY(-100%);
    border: 1px solid var(--iGray100);
    border-radius: 10px;
    background: var(--White);
    display: flex;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
}

.mini-picker-item[b-j7cwpfwsle] {
    flex: 0 0 auto;
    height: 30px;
    border: 1px solid var(--iGray100);
    border-radius: 6px;
    background: var(--White);
    font-size: 0.75rem;
    padding: 0 0.5rem;
}

.mini-picker-item.active[b-j7cwpfwsle] {
    border-color: var(--iRed700);
    color: var(--iRed700);
    transform: translateY(0);
}

.mini-color-swatch[b-j7cwpfwsle] {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border: 1px solid var(--iGray100);
    border-radius: 6px;
}

.mini-color-swatch.active[b-j7cwpfwsle] {
    border-color: var(--iRed700);
}

/* Data record navigator bar */
.data-record-nav[b-j7cwpfwsle] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    height: 40px;
    flex-shrink: 0;
    background-color: var(--White);
    border-top: 1px solid var(--iGray100);
    font-size: 0.8125rem;
}

.data-record-nav__info[b-j7cwpfwsle] {
    display: flex;
    align-items: center;
    color: var(--iGray600, #666);
    flex-shrink: 0;
}

.btn-data-nav-action[b-j7cwpfwsle] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
    border: 1px solid var(--iGray300, #bbb);
    border-radius: 20px;
    background-color: transparent;
    color: var(--iGray600, #555);
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.btn-data-nav-action:hover[b-j7cwpfwsle] {
    background-color: var(--iGray50, #f5f5f5);
    border-color: var(--iGray500, #888);
    color: var(--iGray800, #333);
}

/* Field chips in the nav bar (collapsed state) */
.data-field-chips-wrapper[b-j7cwpfwsle] {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.data-field-picker-mobile[b-j7cwpfwsle] {
    flex: 1;
    min-width: 0;
    padding-left: 8px;
    position: relative;
}

.data-field-picker-mobile__toggle[b-j7cwpfwsle] {
    width: 100%;
    justify-content: space-between;
}

.data-field-picker-mobile__menu[b-j7cwpfwsle] {
    position: absolute;
    left: 8px;
    right: 0;
    bottom: calc(100% + 8px);
    z-index: 1002;
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: min(240px, 42vh);
    padding: 8px;
    overflow-y: auto;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.18);
    backdrop-filter: blur(10px);
}

.data-field-picker-mobile__item[b-j7cwpfwsle] {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--iGray100, #e5e7eb);
    border-radius: 10px;
    background: var(--White);
    color: var(--iGray700, #444);
    font-size: 0.8rem;
    font-weight: 500;
    text-align: left;
}

.data-field-picker-mobile__item:active[b-j7cwpfwsle],
.data-field-picker-mobile__item:hover[b-j7cwpfwsle] {
    background: var(--iBlue50, #e8f0fe);
    border-color: var(--iBlue200, #aac4f5);
    color: var(--iBlue700, #2450a6);
}

.data-field-menu-backdrop[b-j7cwpfwsle] {
    position: fixed;
    inset: 0;
    z-index: 1001;
    border: 0;
    background: transparent;
}

.data-field-scroll-btn[b-j7cwpfwsle] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border: 1px solid var(--iGray200, #ddd);
    border-radius: 50%;
    background-color: var(--White);
    cursor: pointer;
    padding: 0;
    transition: background-color 0.15s, border-color 0.15s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.data-field-scroll-btn:hover[b-j7cwpfwsle] {
    background-color: var(--iGray50, #f5f5f5);
    border-color: var(--iGray400, #aaa);
}

.data-field-scroll-btn--left[b-j7cwpfwsle] {
    margin-right: 4px;
}

.data-field-scroll-btn--right[b-j7cwpfwsle] {
    margin-left: 4px;
}

.data-record-nav__fields[b-j7cwpfwsle] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    overflow-x: auto;
    padding: 0 4px;
    min-width: 0;
    scrollbar-width: none;
    position: relative;
}

.data-record-nav__fields.fade-left[b-j7cwpfwsle] {
    -webkit-mask-image: linear-gradient(to right, transparent 0, black 20px);
    mask-image: linear-gradient(to right, transparent 0, black 20px);
}

.data-record-nav__fields.fade-right[b-j7cwpfwsle] {
    -webkit-mask-image: linear-gradient(to left, transparent 0, black 20px);
    mask-image: linear-gradient(to left, transparent 0, black 20px);
}

.data-record-nav__fields.fade-left.fade-right[b-j7cwpfwsle] {
    -webkit-mask-image: linear-gradient(to right, transparent 0, black 20px, black calc(100% - 20px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, black 20px, black calc(100% - 20px), transparent 100%);
}

.data-record-nav__fields[b-j7cwpfwsle]::-webkit-scrollbar {
    display: none;
}

.data-field-chip[b-j7cwpfwsle] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 12px;
    background-color: var(--iBlue50, #e8f0fe);
    color: var(--iBlue600, #3366cc);
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: grab;
    border: 1px solid var(--iBlue200, #aac4f5);
    transition: opacity 0.15s, background-color 0.15s;
    user-select: none;
    flex-shrink: 0;
}

.data-field-chip:hover[b-j7cwpfwsle] {
    background-color: var(--iBlue100, #c6d7fa);
}

.data-field-chip:active[b-j7cwpfwsle] {
    cursor: grabbing;
    opacity: 0.6;
}

/* Expanded data table panel */
.data-nav-expanded-panel[b-j7cwpfwsle] {
    background-color: var(--White);
    border-top: 1px solid var(--iGray100);
    flex-shrink: 0;
}

.data-nav-table-scroll[b-j7cwpfwsle] {
    overflow: auto;
    max-height: 160px;
}

.data-nav-table[b-j7cwpfwsle] {
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
    table-layout: auto;
}

.data-nav-table th[b-j7cwpfwsle],
.data-nav-table td[b-j7cwpfwsle] {
    padding: 4px 10px;
    border-bottom: 1px solid var(--iGray100);
    border-right: 1px solid var(--iGray100);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}

.data-nav-table thead th[b-j7cwpfwsle] {
    position: sticky;
    top: 0;
    background-color: var(--iGray50, #f5f5f5);
    font-weight: 600;
    cursor: grab;
    user-select: none;
    color: var(--iBlue600, #3366cc);
}

.data-nav-table thead th:hover[b-j7cwpfwsle] {
    background-color: var(--iBlue50, #e8f0fe);
}

.data-nav-table thead th:first-child[b-j7cwpfwsle],
.data-nav-table td:first-child[b-j7cwpfwsle] {
    cursor: default;
    color: var(--iGray400, #999);
    background-color: var(--iGray50, #f5f5f5);
    font-weight: 400;
    min-width: 32px;
    text-align: center;
}

.data-nav-table tbody td[b-j7cwpfwsle] {
    cursor: grab;
}

.data-nav-table tbody td:hover[b-j7cwpfwsle] {
    background-color: var(--iBlue50, #e8f0fe);
}

.data-nav-table tbody td:active[b-j7cwpfwsle] {
    cursor: grabbing;
    opacity: 0.6;
}

.data-nav-current-row td[b-j7cwpfwsle] {
    background-color: var(--iBlue50, #e8f0fe) !important;
    font-weight: 500;
}

.data-nav-row-num[b-j7cwpfwsle] {
    cursor: default !important;
}
/* /Components/LabelDesigns/Layers.razor.rz.scp.css */
.layer-panel-overlay[b-8j34glchhp] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    overflow: hidden;
    border: 1px solid var(--iGray50);
}

.layer-panel[b-8j34glchhp] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--White);
}

/* Layer panel header */
.layer-panel-header[b-8j34glchhp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px;
    border-bottom: 1px solid #E5E5E5;
    min-height: 40px;
}

.layer-panel-title[b-8j34glchhp] {
    display: flex;
    align-items: center;
    flex: 1;
    padding: 0 12px;
}

.layer-panel-title span[b-8j34glchhp] {
    font-family: 'Pretendard Variable', sans-serif;
    font-weight: 500;
    font-size: 0.6875rem !important;
    color: var(--iGray300);
    text-align: center;
}

.layer-panel-close-btn[b-8j34glchhp] {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    border-radius: 24px;
    background: #FFFFFF;
    border: none;
    cursor: pointer;
    padding: 8px;
    opacity: 0.57;
    transition: opacity 0.2s;
}

.layer-panel-close-btn:hover[b-8j34glchhp] {
    opacity: 1;
}

.layer-panel-close-btn img[b-8j34glchhp] {
    width: 16px;
    height: 16px;
}

/* Layer list container */
.layer-list-container[b-8j34glchhp] {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Layer item styles to match Figma design */
.layer-list-container .layer-item[b-8j34glchhp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.layer-list-container .layer-item:hover[b-8j34glchhp] {
    background-color: #F8F8F8;
}

.layer-list-container .layer-item.selected[b-8j34glchhp] {
    background-color: #F1F1F1;
}

.layer-list-container .layer-item.highlighted[b-8j34glchhp] {
    background-color: #D0383A;
}

.layer-list-container .layer-item.highlighted .layer-text[b-8j34glchhp] {
    color: #FFFFFF;
}

.layer-list-container .layer-item .layer-content[b-8j34glchhp] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.layer-list-container .layer-item .layer-visibility-icon[b-8j34glchhp] {
    width: 16px;
    height: 16px;
    opacity: 1;
}

.layer-list-container .layer-item.hidden .layer-visibility-icon[b-8j34glchhp] {
    opacity: 0.5;
}

.layer-list-container .layer-item .layer-text[b-8j34glchhp] {
    font-family: 'Pretendard Variable', sans-serif;
    font-weight: 600;
    font-size: 12px;
    color: #636363;
    transition: color 0.2s;
}

.layer-list-container .layer-item.hidden .layer-text[b-8j34glchhp] {
    font-weight: 400;
    color: #B6B6B6;
}

.layer-list-container .layer-item .layer-lock-icon[b-8j34glchhp] {
    width: 16px;
    height: 16px;
    opacity: 0.7;
}

.layer-list-container .layer-item.highlighted .layer-lock-icon[b-8j34glchhp] {
    filter: brightness(0) invert(1);
}

/* Special highlighting for specific layers (like LOVE, YOU examples from Figma) */
.layer-list-container .layer-item.highlight-love[b-8j34glchhp] {
    background-color: #F1F1F1;
}

.layer-list-container .layer-item.highlight-love .layer-text[b-8j34glchhp] {
    color: #000000;
}

.layer-list-container .layer-item.highlight-you[b-8j34glchhp] {
    background-color: #D0383A;
}

.layer-list-container .layer-item.highlight-you .layer-text[b-8j34glchhp] {
    color: #FFFFFF;
}

.layer-list-container .layer-item.highlight-you .layer-lock-icon[b-8j34glchhp] {
    filter: brightness(0) invert(1);
}

/* Layer toolbar at bottom */
.layer-toolbar[b-8j34glchhp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 8px;
    border-top: 1px solid #E5E5E5;
    background: #FFFFFF;
    min-height: 44px;
}

.layer-order-toolbar[b-8j34glchhp] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    padding: 8px;
    border-top: 1px solid #E5E5E5;
    background: #FFFFFF;
}

.layer-order-toolbar .layer-toolbar-btn[b-8j34glchhp] {
    width: 100%;
    border-radius: 10px;
    background: var(--iGray05);
    opacity: 1;
}

.layer-order-toolbar .layer-toolbar-btn:disabled[b-8j34glchhp] {
    opacity: 0.35;
    cursor: default;
}

.layer-toolbar-group[b-8j34glchhp] {
    display: flex;
    align-items: center;
    gap: 0;
}

.layer-toolbar-btn[b-8j34glchhp] {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    border-radius: 24px;
    background: #FFFFFF;
    border: none;
    cursor: pointer;
    padding: 8px;
    opacity: 0.57;
    transition: opacity 0.2s;
}

.layer-toolbar-btn:hover[b-8j34glchhp] {
    opacity: 1;
}

.layer-toolbar-btn img[b-8j34glchhp] {
    width: 16px;
    height: 16px;
}

/* Layer visibility and lock button styles */
.layer-visibility-btn[b-8j34glchhp],
.layer-lock-btn[b-8j34glchhp] {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
}

.layer-visibility-btn:hover[b-8j34glchhp],
.layer-lock-btn:hover[b-8j34glchhp] {
    opacity: 0.7;
}

.layer-panel-overlay-mobile[b-8j34glchhp] {
    position: relative !important;
    border: none;
    z-index: 10;
    overflow: hidden;
}

.layer-panel-overlay-mobile .layer-panel[b-8j34glchhp] {
    background: transparent;
}

.layer-panel-overlay-mobile .layer-order-toolbar[b-8j34glchhp] {
    padding: 0.75rem 0.96875rem 0.5rem;
    background: var(--White);
}

.layer-panel-overlay-mobile .layer-panel-header[b-8j34glchhp] {
    border-top-left-radius: 1.5rem !important;
    border-top-right-radius: 1.5rem !important;
    padding: 0.96875rem;
}
.layer-panel-overlay-mobile .layer-panel-title[b-8j34glchhp] {
    padding: 0;
}
    
/* /Components/LabelDesigns/PagePreviewPanel.razor.rz.scp.css */
.preview-paper[b-qn26g3esyn] {
    text-align: center !important;
    padding: 1rem 1rem 0.5rem 1rem;
}

.label-icon-btn[b-qn26g3esyn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 0.25rem;
    color: var(--Black);
    padding: 0;
    opacity: 0.57;
    border: 1px solid transparent;
    background: transparent;
}
.label-icon-btn span[b-qn26g3esyn] {
    font-size: 0.6875rem;
    text-align: center;
}
.label-icon-btn img[b-qn26g3esyn] {
    width: 1.5rem;
    height: 1.5rem;
    margin-bottom: 0.25rem;
}
.label-icon-btn:hover[b-qn26g3esyn] {
    opacity: 1;
}

.label-icon-btn[disabled][b-qn26g3esyn],
.label-icon-btn:disabled[b-qn26g3esyn] {
    opacity: 0.28;
    cursor: not-allowed;
    filter: grayscale(1) contrast(0.75);
    background: #f3f3f3;
    border: 1px dashed #c4c4c4;
    box-shadow: none;
}

.label-icon-btn[disabled]:hover[b-qn26g3esyn],
.label-icon-btn:disabled:hover[b-qn26g3esyn] {
    opacity: 0.28;
}

.code-name-wrap[b-qn26g3esyn] {
    font-size: 0.6875rem;
    color: var(--Black);
    margin-bottom: 0.5rem;
}

/* Preview container and layer panel overlay styles */
.preview-container[b-qn26g3esyn] {
    position: relative;
}

.preview-hidden[b-qn26g3esyn] {
    visibility: hidden;
    opacity: 0;
}

.page-nav-row-mobile[b-qn26g3esyn] {
    align-items: center !important;
    gap: 0.75rem;
}

.page-nav-group-mobile[b-qn26g3esyn] {
    gap: 0.375rem;
}

.page-nav-btn-mobile[b-qn26g3esyn] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    background: var(--iGray05);
}

.page-nav-status[b-qn26g3esyn] {
    white-space: nowrap;
}

.page-actions-mobile[b-qn26g3esyn] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
}

.page-action-btn-mobile[b-qn26g3esyn] {
    min-height: 4rem;
    padding: 0.5rem 0.25rem;
    border-radius: 0.875rem;
    background: var(--iGray05);
    border: 1px solid transparent;
    opacity: 1;
}

.page-action-btn-mobile span[b-qn26g3esyn] {
    font-size: 0.625rem;
}

.page-action-btn-mobile:hover[b-qn26g3esyn],
.page-action-btn-mobile:focus[b-qn26g3esyn] {
    border-color: var(--iGray100);
}
/* /Components/LabelDocuments/LabelDocumentNew.razor.rz.scp.css */
/* /Components/LabelDocuments/LabelDocumentSearchPanel.razor.rz.scp.css */
.search-panel[b-64u8c8ldvr] {
    position: fixed !important;
    width: 100%;
    overflow: hidden;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.search-panel--collapsed[b-64u8c8ldvr] {
    height: 0;
    opacity: 0;
    visibility: hidden;
    border-top-width: 0;
    border-bottom-width: 0;
    box-shadow: none;
}

.search-panel--expanded[b-64u8c8ldvr] {
    height: auto;
    max-height: 90vh;
    opacity: 1;
    visibility: visible;
    border-top-width: 1px;
    border-bottom-width: 1px;
}

.search-panel-content[b-64u8c8ldvr] {
    height: auto;
    max-height: 90vh;
    transform: translateY(0);
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.search-panel--collapsed .search-panel-content[b-64u8c8ldvr] {
    transform: translateY(-20px);
}

.search-panel-body[b-64u8c8ldvr] {
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(0.75rem);
    padding: 1.5rem;
}

.search-wrap[b-64u8c8ldvr] {
    width: 100%;
    padding: 0 ;
    border-bottom: none;
    z-index: 200;
}

/* Search input frame */
.search-input-frame[b-64u8c8ldvr] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 55rem;
    margin: 0 auto;
}

/* Searchbox styles */
.searchbox[b-64u8c8ldvr] {
    position: relative;
    flex: 1;
}

.searchbox-input[b-64u8c8ldvr] {
    border: 1px solid var(--iGray100);
    border-radius: 0.5rem;
    font-weight: 400;
    font-size: 0.875rem !important;
    line-height: 1.5;
    color: var(--Black);
    width: 100%;
}

.searchbox-input[b-64u8c8ldvr]::placeholder {
    color: var(--iGray200);
}

.searchbox-btn[b-64u8c8ldvr] {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0;
    opacity: 0.57;
    height: 1.5rem;
}

.searchbox-btn img[b-64u8c8ldvr] {
    width: 1.5rem;
    height: 1.5rem;
}

/* Button icon styles */
.btn-icon[b-64u8c8ldvr] {
    background: none;
    border: none;
    padding: 0.5rem;
    border-radius: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Search section styles */
.search-section[b-64u8c8ldvr] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.search-section-header[b-64u8c8ldvr] {
    display: flex;
    align-items: center;
}

.search-section-title[b-64u8c8ldvr] {
    font-family: 'Pretendard Variable', sans-serif;
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 1;
    color: #000;
    margin: 0;
}

.search-section-header .btn-link[b-64u8c8ldvr] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: #636363;
    text-decoration: none;
    font-family: 'Pretendard Variable', sans-serif;
    font-weight: 300;
    font-size: 0.6875rem;
    line-height: 1;
    padding: 0;
    border: none;
    background: none;
}

.search-section-header .btn-link img[b-64u8c8ldvr] {
    width: 1rem;
    height: 1rem;
}

.size-range-container-wrap[b-64u8c8ldvr] {
    display: flex;
    gap: 1rem !important;
}
/* Size range container styles */
.size-range-container[b-64u8c8ldvr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 0.5rem;
    flex: 1;
    position: relative;
    min-width: 200px;
}

.size-range-visual[b-64u8c8ldvr] {
    position: relative;
    width: 100%;
    height: 0.625rem;
    margin: 15px 0;
}

.size-range-track[b-64u8c8ldvr] {
    position: absolute;
    top: 0.125rem;
    left: 0;
    width: 100%;
    height: 0.375rem;
    background: var(--iGray50);
    border-radius: 0.1875rem;
}

.size-range-progress[b-64u8c8ldvr] {
    position: absolute;
    top: 0.125rem;
    left: 0.125rem;
    height: 0.375rem;
    display: flex;
    align-items: center;
    background: var(--iRed700);
    transition: all 0.2s ease;
}

.size-range-info[b-64u8c8ldvr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
}

.size-range-info .d-flex[b-64u8c8ldvr] {
    gap: 0.25rem;
}

.size-range-info img[b-64u8c8ldvr] {
    width: 1rem;
    height: 1rem;
}

.size-label[b-64u8c8ldvr] {
    font-family: 'Pretendard Variable', sans-serif;
    font-weight: 300;
    font-size: 0.6875rem;
    line-height: 1;
    color: #636363;
}

.size-value[b-64u8c8ldvr] {
    font-family: 'Pretendard Variable', sans-serif;
    font-weight: 300;
    font-size: 0.6875rem;
    line-height: 1;
    color: #000;
    text-align: center;
}

/* Shape selection container */
.shape-selection-container[b-64u8c8ldvr] {
    width: 100%;
    display: flex;
    gap: 1rem;
    align-items: center;
}

.shape-option[b-64u8c8ldvr] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem;
    min-width: 6rem;
    height: 3.75rem;
    border-radius: 8px;
    background: var(--iGray05);
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid transparent;
    text-align: center;
    color: var(--iGray500);
}

.shape-option:hover[b-64u8c8ldvr] {
    background: var(--iGray25);
    color: var(--Black);
}
.shape-option.active[b-64u8c8ldvr] {
    background: var(--iRed05);
    border-color: var(--iRed50);
    color: var(--iRed700);
}
.shape-option img[b-64u8c8ldvr] {
  width: 1.5rem;
  height: 1.5rem;
  margin: 0 auto;
  opacity: 0.57;
}

.shape-option:hover img[b-64u8c8ldvr] {
  opacity: 1;
}
.shape-option.active img[b-64u8c8ldvr] {
  filter: invert(33%) sepia(93%) saturate(633%) hue-rotate(341deg) brightness(95%) contrast(101%);

}

.shape-option span[b-64u8c8ldvr] {
  font-size: 0.6875rem ;
  font-weight: 300;
}

.shape-option-content[b-64u8c8ldvr] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.shape-icon[b-64u8c8ldvr] {
    width: 24px;
    height: 24px;
}

.shape-text[b-64u8c8ldvr] {
    font-family: var(--font-main);
    font-weight: 300;
    font-size: 11px;
    line-height: 1em;
    color: #636363;
    text-align: center;
}

/* Vertical divider */
.vr[b-64u8c8ldvr] {
    width: 0;
    height: 3.75rem;
    border-left: 1px dashed var(--iGray50);
    margin: 0 0.5rem;
    opacity: 1;
}

/* Template page submenu styles (reusing existing from app.css) */
.template-page__submenu[b-64u8c8ldvr] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.template-page__submenu-nowrap[b-64u8c8ldvr] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.template-page__tag[b-64u8c8ldvr] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.875rem;
    height: 2rem;
    background: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 1.125rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.template-page__tag:hover[b-64u8c8ldvr] {
    background: #f9f9f9;
}

.template-page__tag.active[b-64u8c8ldvr],
.template-page__tag.search-tag--active[b-64u8c8ldvr] {
    background: #fef9f9;
    border-color: #ebabac;
}

.template-page__tag-text[b-64u8c8ldvr] {
    font-family: 'Pretendard Variable', sans-serif;
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 1;
    color: #636363;
}

.template-page__tag.active .template-page__tag-text[b-64u8c8ldvr],
.template-page__tag.search-tag--active .template-page__tag-text[b-64u8c8ldvr] {
    color: #d0383a;
}

.template-page__tag .btn-icon[b-64u8c8ldvr] {
    padding: 0;
    background: none;
    border: none;
}

.template-page__tag .btn-icon img[b-64u8c8ldvr] {
    width: 0.875rem;
    height: 0.875rem;
}

/* Tag count styles */
.tag-count[b-64u8c8ldvr] {
    font-family: 'Pretendard Variable', sans-serif;
    font-weight: 400;
    font-size: 0.75rem;
    color: #999;
    margin-left: 0.25rem;
}

/* Range slider styles */
.size-range-container[b-64u8c8ldvr] {
    position: relative;
    min-width: 200px;
}

.size-range-visual[b-64u8c8ldvr] {
    position: relative;
    height: 6px;
    margin: 15px 0;
}

.size-range-track[b-64u8c8ldvr] {
    position: absolute;
    width: 100%;
    height: 6px;
    background-color: #e9ecef;
    border-radius: 3px;
    top: 0;
}

.size-range-progress[b-64u8c8ldvr] {
    position: absolute;
    height: 6px;
    background-color: var(--iRed700);
    border-radius: 3px;
    top: 0;
    transition: all 0.2s ease;
}

.size-range-slider[b-64u8c8ldvr] {
    position: absolute;
    width: 100%;
    height: 6px;
    top: 0;
    left: 0;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
    margin: 0;
    pointer-events: none;
}

.size-range-slider[b-64u8c8ldvr]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 0.875rem;
    height: 0.875rem;
    border-radius: 50%;
    background:  var(--iRed700);
    cursor: pointer;
    pointer-events: all;
    position: relative;
    z-index: 2;
}

.size-range-slider[b-64u8c8ldvr]::-moz-range-thumb {
    width: 0.875rem;
    height: 0.875rem;
    border-radius: 50%;
    background:  var(--iRed700);
    cursor: pointer;
    pointer-events: all;
    position: relative;
    z-index: 2;
    border: none;
}

.size-range-slider[b-64u8c8ldvr]::-webkit-slider-track {
    background: transparent;
}

.size-range-slider[b-64u8c8ldvr]::-moz-range-track {
    background: transparent;
}

.size-range-slider:focus[b-64u8c8ldvr] {
    outline: none;
}

.size-range-slider:focus[b-64u8c8ldvr]::-webkit-slider-thumb {
    box-shadow: 0 0 0 3px rgba(208, 56, 58, 0.15);
}

.size-range-slider:focus[b-64u8c8ldvr]::-moz-range-thumb {
    box-shadow: 0 0 0 3px rgba(208, 56, 58, 0.15);
}

/* 두 번째 슬라이더를 위한 z-index 조정 */
.size-range-max[b-64u8c8ldvr] {
    z-index: 1;
}

.size-range-min[b-64u8c8ldvr] {
    z-index: 2;
}

/* 호버 효과 */
.size-range-slider:hover[b-64u8c8ldvr]::-webkit-slider-thumb {
    background: var(--iRed700);
    transform: scale(1.1);
    transition: all 0.2s ease;
}

.size-range-slider:hover[b-64u8c8ldvr]::-moz-range-thumb {
    background: var(--iRed700);
    transform: scale(1.1);
    transition: all 0.2s ease;
}

/* Active 상태 */
.size-range-slider:active[b-64u8c8ldvr]::-webkit-slider-thumb {
    background: var(--iRed700);
    transform: scale(1.2);
}

.size-range-slider:active[b-64u8c8ldvr]::-moz-range-thumb {
    background: var(--iRed700);
    transform: scale(1.2);
}

/* Responsive design */
@media (max-width: 768px) {
.search-panel[b-64u8c8ldvr] {
    height: var(--bs-offcanvas-height);
    max-height: 100%;
    transform: translateY(100%);
    box-shadow: 0 0 11px 0 rgba(0, 0, 0, 0.15) !important;
    border-top-left-radius: 1.5rem ;
    border-top-right-radius: 1.5rem ;
}
.search-panel--expanded[b-64u8c8ldvr] {
    transform: translateY(0);
    bottom: 0;
}
.size-range-container-wrap[b-64u8c8ldvr] {
    flex-direction: column !important;
    row-gap: 0.5rem !important;
    align-content: stretch !important;
}
.shape-option[b-64u8c8ldvr] {
    min-width: unset !important;
    flex: 1 1 auto;
}

    .search-offcanvas .offcanvas-body[b-64u8c8ldvr] {
        padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .size-range-container[b-64u8c8ldvr] {
        min-width: 0;
        width: 100%;
        padding: 0.5rem 1rem;
        row-gap: 0.5rem;;
    }

    .size-range-visual[b-64u8c8ldvr],
    .size-range-track[b-64u8c8ldvr],
    .size-range-progress[b-64u8c8ldvr] {
        width: 100%;
    }

    .shape-selection-container[b-64u8c8ldvr] {
        gap: 0.5rem;
    }

    .template-page__submenu[b-64u8c8ldvr],
    .template-page__submenu-nowrap[b-64u8c8ldvr] {
        width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 0.25rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        touch-action: pan-x;
    }

    .template-page__submenu[b-64u8c8ldvr]::-webkit-scrollbar,
    .template-page__submenu-nowrap[b-64u8c8ldvr]::-webkit-scrollbar {
        display: none;
    }

    .template-page__tag[b-64u8c8ldvr] {
        flex: 0 0 auto;
    }
}
/* /Components/LabelPrint.razor.rz.scp.css */
/* LabelPrint.razor.css - 피그마 디자인 기반 스타일 */

.section-header[b-zhuqamzq8l] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.section-title-with-help[b-zhuqamzq8l] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-title[b-zhuqamzq8l] {
    font-family: 'Pretendard Variable', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #2f3336;
    margin: 0;
    line-height: 1em;
}

/* 프로슈머 옵션 - 피그마 디자인 반영 */
.prosumer-option[b-zhuqamzq8l] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 0;
}

.prosumer-checkbox[b-zhuqamzq8l] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.prosumer-checkbox input[type="checkbox"][b-zhuqamzq8l] {
    display: none;
}

.prosumer-checkbox .checkmark[b-zhuqamzq8l] {
    width: 20px;
    height: 20px;
    border: 1px solid #d0d0d0;
    border-radius: 2px;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.prosumer-checkbox input[type="checkbox"]:checked + .checkmark[b-zhuqamzq8l] {
    background-color: #d0383a;
    border-color: #d0383a;
}

.prosumer-checkbox input[type="checkbox"]:checked + .checkmark[b-zhuqamzq8l]::after {
    content: "✓";
    color: white;
    font-size: 12px;
    font-weight: bold;
}

.prosumer-text[b-zhuqamzq8l] {
    font-family: 'Pretendard Variable', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: var(--Black);
    line-height: 1em;
}


/* 재질 목록 */
.material-list[b-zhuqamzq8l] {
    display: flex;
    flex-direction: column;
    max-height: 18.125rem;
    overflow-y: auto;
}

.material-list[b-zhuqamzq8l]::-webkit-scrollbar {
    width: 6px;
}

.material-list[b-zhuqamzq8l]::-webkit-scrollbar-thumb {
    background: rgba(229, 229, 229);
    border-radius: 6px;
}

.material-list[b-zhuqamzq8l]::-webkit-scrollbar-track {
    background: transparent;
}

.list-group[b-zhuqamzq8l] {
    border-radius: 0;
}
.list-group-item[b-zhuqamzq8l] {
    padding: 0.75rem;
    color: var(--iGray700);
    border: var(--bs-list-group-border-width) solid var(--iGray50);
    font-size: 0.875rem;
    font-weight: 600;
}
.list-group-item.list-group-item[b-zhuqamzq8l] {
    margin-bottom: -1px;
}
.list-group-item.active[b-zhuqamzq8l] {
    z-index: 2;
    color: var(--Black);
    background-color: var(--iRed05);
    border-color: var(--iRed500);
    border-width: 2px;
}

/* Upper section with color circle, name and badges */
.material-upper-section[b-zhuqamzq8l] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.material-left-content[b-zhuqamzq8l] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.material-badges[b-zhuqamzq8l] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

/* Lower section with material code and help button */
.material-lower-section[b-zhuqamzq8l] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
}

.material-color-img[b-zhuqamzq8l] {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: contain;
}

.material-name[b-zhuqamzq8l] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--iGray700);
}

.material-badge-new[b-zhuqamzq8l] {
    width: 16px;
    height: 16px;
    background-color: var(--iRed700);
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    color: var(--White);
    font-weight: bold;
    flex-shrink: 0;
}

.prosumer-badge[b-zhuqamzq8l] {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.prosumer-badge img[b-zhuqamzq8l] {
    width: 24px;
    height: 24px;
}

.material-code[b-zhuqamzq8l] {
    font-weight: 300;
    line-height: 1rem;
    color: var(--iGray500);
}



/* 구분선 */
.section-divider[b-zhuqamzq8l] {
    width: 100%;
    height: 1px;
    background-color: #f4f4f4;
    margin: 16px 0;
}
.quantity-list[b-zhuqamzq8l] {
    height: 15.375rem;
    overflow-y: scroll;
    overflow-x: hidden;
}
.quantity-header[b-zhuqamzq8l] {
    display: flex;
    align-items: center;
}

.quantity-description[b-zhuqamzq8l] {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--iGray500);
    line-height: 1.4;
}

.quantity-input-group[b-zhuqamzq8l] {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.quantity-controls[b-zhuqamzq8l] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.data-linked-quantity-layout[b-zhuqamzq8l] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
}

.data-linked-quantity-main[b-zhuqamzq8l] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    min-width: 0;
    flex: 1 1 auto;
}

.quantity-price[b-zhuqamzq8l] {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--iRed700);
    text-align: end;
}

.quantity-unit[b-zhuqamzq8l] {
    font-size: 12px;
    color: #636363;
    margin-left: 4px;
}

.quantity-input-wrapper[b-zhuqamzq8l] {
    position: relative;
    display: inline-block;
}

.quantity-unit-inside[b-zhuqamzq8l] {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: #636363;
    pointer-events: none;
    background-color: white;
    padding: 0 4px;
}

.quantity-input-wrapper .quantity-input[b-zhuqamzq8l] {
    padding-right: 35px;
}

.quantity-info[b-zhuqamzq8l] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    font-size: 0.75rem;
    color: var(--iGray600);
}

.quantity-info__primary[b-zhuqamzq8l] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--iRed700);
    line-height: 1.25;
}

/* 가격 정보 스타일 개선 */
.price-info[b-zhuqamzq8l] {
    text-align: right;
    display:flex;
    flex-direction: column;
    gap: 0.5rem;
}
.price-info .error-text[b-zhuqamzq8l] {
    color: var(--iRed700);
    font-size: 14px;
    font-weight: 400;
}

.price-info .total-price[b-zhuqamzq8l] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--iGray700);
}

.price-info .unit-price[b-zhuqamzq8l] {
    font-size: 0.875rem;
    color: var(--iRed700);
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.2;
}

.price-info--compact[b-zhuqamzq8l] {
    align-items: flex-end;
    justify-content: center;
    gap: 0.5rem;
    flex: 0 0 auto;
    min-width: 10rem;
}


.option-item[b-zhuqamzq8l] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.option-checkbox[b-zhuqamzq8l] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.option-checkbox input[type="checkbox"][b-zhuqamzq8l] {
    display: none;
}

.option-checkbox .checkmark[b-zhuqamzq8l] {
    width: 20px;
    height: 20px;
    border: 1px solid #d0d0d0;
    border-radius: 2px;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.option-checkbox input[type="checkbox"]:checked + .checkmark[b-zhuqamzq8l] {
    background-color: #d0383a;
    border-color: #d0383a;
}

.option-checkbox input[type="checkbox"]:checked + .checkmark[b-zhuqamzq8l]::after {
    content: "✓";
    color: var(--White);
    font-size: 12px;
    font-weight: bold;
}

.option-text[b-zhuqamzq8l] {
    font-size: 13px;
    font-weight: 400;
    color: var(--Black);
}

.sidebar-print[b-zhuqamzq8l] {
    position: absolute;
    left: 0;
    right: 0;
    background-color: var(--White);
    border-top: 1px solid var(--iGray50);
    display: flex;
    flex-direction: column;
    padding: 1rem;
    z-index: 10;
}

/* 사이드바 푸터 (주문 버튼 + 체크박스) */
.sidebar-footer[b-zhuqamzq8l] {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 25rem;
    background-color: var(--White);
    border-top: 1px solid var(--iGray50);
    display: flex;
    flex-direction: column;
    padding: 1rem;
    box-sizing: border-box;
    z-index: 10;
}

/* 푸터 내 체크박스 영역 */
.sidebar-footer .confirmation-checkboxes[b-zhuqamzq8l] {
    margin-bottom: 16px;
}

/* 주문 요약 영역 */
.order-summary[b-zhuqamzq8l] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
    font-size: 1rem;
    line-height: 1;
    font-weight: 600;
}

.order-btn[b-zhuqamzq8l] {
    width: 100%;
    height: 48px;
    background-color: #d0383a;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.order-btn:hover[b-zhuqamzq8l] {
    background-color: #b52d2f;
}

.order-btn:disabled[b-zhuqamzq8l] {
    background-color: #d0d0d0;
    cursor: not-allowed;
}



/* 기존 헤더 스타일 유지 (필요시) */
.header-preview[b-zhuqamzq8l] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: #ffffff;
    border-bottom: 1px solid #e5e5e5;
    height: 60px;
    display: flex;
    align-items: center;
}

.header-preview__container[b-zhuqamzq8l] {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.header-preview__left[b-zhuqamzq8l] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.logo-labelspace[b-zhuqamzq8l] {
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 8px;
    border-radius: 6px;
    transition: background-color 0.2s ease;
}

.logo-labelspace:hover[b-zhuqamzq8l] {
    background-color: #f8f9fa;
}

.logo-labelspace img[b-zhuqamzq8l] {
    height: 32px;
    width: auto;
}

.settings-btn[b-zhuqamzq8l] {
    background: none;
    border: none;
    padding: 8px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}

.settings-btn:hover[b-zhuqamzq8l] {
    background-color: #f1f3f4;
}

.settings-btn img[b-zhuqamzq8l] {
    width: 20px;
    height: 20px;
}

.header-preview__center[b-zhuqamzq8l] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: 20px;
}



.preview-size[b-zhuqamzq8l] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.size-btn--fit[b-zhuqamzq8l] {
    background: none;
    border: 1px solid #dadce0;
    padding: 8px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.size-btn--fit:hover[b-zhuqamzq8l] {
    background-color: #f8f9fa;
    border-color: #c5c7ca;
}

.size-btn--fit img[b-zhuqamzq8l] {
    width: 16px;
    height: 16px;
}

.zoom-btn[b-zhuqamzq8l] {
    background: none;
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}

.zoom-btn:hover[b-zhuqamzq8l] {
    background-color: #e8eaed;
}

.zoom-btn img[b-zhuqamzq8l] {
    width: 16px;
    height: 16px;
}

.zoom-input[b-zhuqamzq8l] {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0 8px;
    min-width: 60px;
    justify-content: center;
}

.zoom-value[b-zhuqamzq8l] {
    font-size: 13px;
    color: #202124;
}

.zoom-unit[b-zhuqamzq8l] {
    font-size: 13px;
    color: #202124;
}

.header-preview__right[b-zhuqamzq8l] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.dropdown-download[b-zhuqamzq8l] {
    position: relative;
}

.download-btn[b-zhuqamzq8l] {
    background: #ffffff;
    border: 1px solid #e5e5e5;
    color: #2f3336;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 400;
    transition: all 0.2s ease;
    height: 32px;
}

.download-btn:hover[b-zhuqamzq8l] {
    background: #f8f9fa;
    border-color: #c5c7ca;
}

.download-btn img[b-zhuqamzq8l] {
    width: 16px;
    height: 16px;
}

.dropdown-arrow[b-zhuqamzq8l] {
    width: 12px !important;
    height: 12px !important;
}

.dropdown-menu[b-zhuqamzq8l] {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: white;
    border: 1px solid #dadce0;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    min-width: 160px;
    z-index: 1001;
}

.dropdown-item[b-zhuqamzq8l] {
    background: none;
    border: none;
    width: 100%;
    padding: 12px 16px;
    text-align: left;
    cursor: pointer;
    font-size: 14px;
    color: #202124;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dropdown-item:hover[b-zhuqamzq8l] {
    background-color: #f8f9fa;
}

.dropdown-item:first-child[b-zhuqamzq8l] {
    border-radius: 8px 8px 0 0;
}

.dropdown-item:last-child[b-zhuqamzq8l] {
    border-radius: 0 0 8px 8px;
}

.dropdown-item img[b-zhuqamzq8l] {
    width: 16px;
    height: 16px;
}

.design-edit-btn[b-zhuqamzq8l] {
    background: #ffffff;
    border: 1px solid #e5e5e5;
    color: #636363;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 400;
    transition: all 0.2s ease;
    height: 32px;
}

.design-edit-btn:hover[b-zhuqamzq8l] {
    background: #f8f9fa;
    border-color: #c5c7ca;
}

.design-edit-btn img[b-zhuqamzq8l] {
    width: 16px;
    height: 16px;
}

.print-main[b-zhuqamzq8l] {
    display: flex;
    height: 100vh;
    padding-top: 3.75rem;
    background-color: var(--iGray100);
}

.print-content[b-zhuqamzq8l] {
    position: absolute;
    top: 3.75rem;
    left: 0;
    right: 25rem;
    bottom: 0;
    display: flex;
    flex-direction: column;
}

.document-info-header[b-zhuqamzq8l] {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0;
    gap: 0.25rem;
    min-width: 26rem;
}

.document-info-header__title[b-zhuqamzq8l] {
    width: 100%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--Black);
    line-height: 1;
}

.document-info-header__subtitle[b-zhuqamzq8l] {
    font-size: 0.6875rem;
    font-weight: 300;
    color: var(--Black);
    line-height: 1;
}

.label-preview[b-zhuqamzq8l] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: calc(100% - 6rem);
    padding: 0 2rem;
}



.label-preview__canvas[b-zhuqamzq8l] {
    margin: 0 auto;
    width: 100%;
    height: 100%;
    z-index: 8;
}

.pagination-controls[b-zhuqamzq8l] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    margin-left: auto;
    margin-right: auto;
}

.pagination-controls__info[b-zhuqamzq8l] {
    font-size: 14px;
    color: #5f6368;
    margin: 0 16px;
    min-width: 80px;
    text-align: center;
}

/* 최종 확인 탭 스타일 - Figma Frame 183 기반 */
.final-confirm-section[b-zhuqamzq8l] {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 1rem;
}

/* 최종 확인 네비게이션 스타일 */
.final-confirmation-navigation[b-zhuqamzq8l] {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1rem;
    z-index: 10;
    box-sizing: border-box;
}

.final-confirm-title[b-zhuqamzq8l] {
    font-family: 'Pretendard Variable', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--iGray700);
    line-height: 1.25;
    margin: 0;
    flex: 1;
}

/* 체크박스 영역 스타일 - Figma Frame 209 기반 */
.confirmation-checkboxes[b-zhuqamzq8l] {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    gap: 8px;
    padding: 0;
    margin: 0;
    /* width: fill, height: hug content */
}

.checkbox-item[b-zhuqamzq8l] {
    display: flex;
    align-items: center;
    gap: 8px;
    /* width: hug, height: hug */
}

.checkbox-label[b-zhuqamzq8l] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    /* width: hug, height: hug */
}

.checkbox-input[b-zhuqamzq8l] {
    display: none;
}

.checkbox-custom[b-zhuqamzq8l] {
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 2px;
    background-color: #d0383a;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
    position: relative;
    /* Figma 스타일: width: 20px, height: 20px, background: #D0383A */
}

.checkbox-input:not(:checked) + .checkbox-custom[b-zhuqamzq8l] {
    background-color: #ffffff;
    border: 1px solid #d0d0d0;
}

.checkbox-input:checked + .checkbox-custom[b-zhuqamzq8l]::after {
    content: "";
    width: 8.57px;
    height: 7.14px;
    background-image: url("data:image/svg+xml,%3Csvg width='9' height='8' viewBox='0 0 9 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 3.5L3.5 6L8 1' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 8.57px 7.14px;
    /* Figma 스타일: 8.57 x 7.14, white stroke 2px */
}

.checkbox-text[b-zhuqamzq8l] {
    font-family: 'Pretendard Variable', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #000000;
    line-height: 1em;
    /* Figma 스타일: Pretendard Variable, 13px, 400 weight, #000000, line-height: 1em */
}

.checkbox-divider[b-zhuqamzq8l] {
    width: 100%;
    height: 0px;
    border-bottom: 1px solid #f4f4f4;
    margin: 0;
    /* Figma 스타일: Line 4, stroke: #F4F4F4, 1px weight */
}

/* 장바구니 버튼 스타일 */
.cart-btn[b-zhuqamzq8l] {
    transition: all 0.2s ease;
}

.cart-btn--enabled[b-zhuqamzq8l] {
    background: #d0383a !important;
    color: #fef9f9 !important;
    cursor: pointer;
}

.cart-btn--enabled:hover[b-zhuqamzq8l] {
    background: #b8343a !important;
}

.cart-btn--disabled[b-zhuqamzq8l] {
    background: #e8e9e9 !important;
    color: #636363 !important;
    cursor: not-allowed;
}

.cart-btn--disabled:hover[b-zhuqamzq8l] {
    background: #e8e9e9 !important;
}

/* Alert 스타일 - Figma alert 컴포넌트 기반 */
.alert-important[b-zhuqamzq8l] {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    gap: 12px;
    padding: 16px;
    background-color: #fef9f9;
    border-radius: 8px;
    /* Figma 스타일: column, align-self: stretch, gap: 12px, padding: 16px, background: #FEF9F9 */
}

.alert-normal[b-zhuqamzq8l] {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    gap: 12px;
    padding: 16px;
    background-color: #f9f9f9;
    border-radius: 8px;
    /* Figma 스타일: column, align-self: stretch, gap: 12px, padding: 16px, background: #F9F9F9 */
}

.alert-content[b-zhuqamzq8l] {
    display: flex;
    align-self: stretch;
    gap: 12px;
    /* Figma 스타일: row, align-self: stretch, gap: 12px */
}

.alert-icon[b-zhuqamzq8l] {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.alert-text[b-zhuqamzq8l] {
    font-family: 'Pretendard Variable', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5em;
    flex: 1;
    /* Figma 스타일: Pretendard Variable, 14px, 400 weight, line-height: 1.5em */
}

/* Settings Popup Styles */
.settings-popup-overlay[b-zhuqamzq8l] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.settings-popup[b-zhuqamzq8l] {
    background: white;
    border-radius: 8px;
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.settings-popup__header[b-zhuqamzq8l] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px 16px;
    border-bottom: 1px solid #e5e5e5;
}

.settings-popup__title[b-zhuqamzq8l] {
    font-size: 18px;
    font-weight: 600;
    color: #2f3336;
    margin: 0;
}

.settings-popup__actions[b-zhuqamzq8l] {
    display: flex;
    gap: 8px;
}

.settings-popup__content[b-zhuqamzq8l] {
    padding: 24px;
}

.print-options[b-zhuqamzq8l] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.print-option[b-zhuqamzq8l] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.print-option__row[b-zhuqamzq8l] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.print-option__label[b-zhuqamzq8l] {
    font-size: 14px;
    color: #2f3336;
    cursor: pointer;
}

/* Spacing Section */
.spacing-section[b-zhuqamzq8l] {
    margin-bottom: 24px;
}

.spacing-section__title[b-zhuqamzq8l] {
    font-size: 16px;
    font-weight: 600;
    color: #2f3336;
    margin: 0 0 16px 0;
}

.spacing-controls[b-zhuqamzq8l] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Reset Section */
.reset-section[b-zhuqamzq8l] {
    display: flex;
    justify-content: center;
    margin-top: 24px;
}

.reset-btn[b-zhuqamzq8l] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: #f8f9fa;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    color: #636363;
    transition: all 0.2s ease;
}

.reset-btn:hover[b-zhuqamzq8l] {
    background: #e8eaed;
    border-color: #c5c7ca;
}

.reset-btn img[b-zhuqamzq8l] {
    width: 16px;
    height: 16px;
}

.material-section[b-zhuqamzq8l],
.quantity-section[b-zhuqamzq8l],
.print-options-section[b-zhuqamzq8l] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    margin-bottom: 1rem;
}



.material-header[b-zhuqamzq8l],
.quantity-header[b-zhuqamzq8l],
.print-options-header[b-zhuqamzq8l] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.material-header img[b-zhuqamzq8l],
.quantity-header img[b-zhuqamzq8l],
.print-options-header img[b-zhuqamzq8l] {
    width: 1rem;
    height: 1rem;
    margin: 0.25rem;
}
.material-header span[b-zhuqamzq8l],
.quantity-header span[b-zhuqamzq8l],
.print-options-header span[b-zhuqamzq8l] {
    white-space: nowrap;
    font-size: 0.8125rem;
    color: var(--iGray500);
}


/* Error text */
.error[b-zhuqamzq8l] {
    color: var(--iRed700);
    font-size: 14px;
}

.tooltips[b-zhuqamzq8l] {
  position: relative;
}

.tooltips .tooltipContents[b-zhuqamzq8l] {
  visibility: hidden;
  width: 15rem;
  bottom: 1.5rem;
  left: 50%;
  margin-left: -8rem;
  background-color: var(--iGray600);
  color: var(--White);
  text-align: center;
  padding: 0.75rem;
  border-radius: 0.5rem;
  position: absolute;
  z-index: 1;
  display: flex;
  gap: 0.5rem;
  text-align: left;
}
.tooltips .tooltipContents img[b-zhuqamzq8l] {
    width: 100px !important;
    height: 100px !important;
    opacity: 1;
}

.tooltips .tooltipContents[b-zhuqamzq8l]::after {
  content: " ";
  position: absolute;
  top: 100%;
  left: calc(50% - 0.5rem);
  margin-left: 0.5rem;
  border-width: 0.5rem;
  border-style: solid;
  border-color: var(--iGray600) transparent transparent transparent;
}

.tooltips:hover .tooltipContents[b-zhuqamzq8l] {
  visibility: visible;
}

.empty-information-wrap[b-zhuqamzq8l] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    color: var(--iGray500);
    padding-top: 1.5rem;
}
.empty-information-wrap img[b-zhuqamzq8l] {
    width: 5.125rem;
    height: 5.125rem;
}
.empty-information-wrap p[b-zhuqamzq8l] {
    font-size: 0.875rem;
    color: var(--iGray200);
    text-align: center;
    margin-bottom: 0;
}

/* 수량 선택 UI 스타일 */
.quantity-selection-wrapper[b-zhuqamzq8l] {
    position: relative;
    width: 100%;
}

.v-selected-quantity[b-zhuqamzq8l] {
    display: flex;
    align-items: center;
    height: 3.5rem;
    border: 1px solid var(--iGray05);
    padding: 0 0.75rem;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.selected-qty-info[b-zhuqamzq8l],
.select-qty-info[b-zhuqamzq8l] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
}

.quantity-popup[b-zhuqamzq8l],
#qty-popup[b-zhuqamzq8l] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--White);
    border: 1px solid var(-iGray05);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
    margin: 0;
    max-height: 21rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.quantity-popup-content[b-zhuqamzq8l] {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0;
}

/* 커스텀 수량 입력 영역 */
.custom-quantity-section[b-zhuqamzq8l] {
    background-color: var(--iGray05);
    border: 1px solid var(--iGray50);
    padding: 1rem;
    flex-shrink: 0;
}

.custom-quantity-header .d-flex[b-zhuqamzq8l] {
    align-items: stretch;
    gap: 0.5rem;
}

/* 미리 정의된 수량 선택 영역 */
.predefined-quantity-section[b-zhuqamzq8l] {
    flex: 1;
    min-height: 0;
}

/* 수량 선택 옵션들 */
.v-quantity-selection[b-zhuqamzq8l] {
    padding: 12px 16px;
    border-bottom: 1px solid var(--iGray50);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.v-quantity-selection:hover[b-zhuqamzq8l] {
    background-color: var(--iGray05);
}

.v-quantity-selection:last-child[b-zhuqamzq8l] {
    border-bottom: none;
}

/* 커스텀 수량 정보 표시 */
#custom-select-info[b-zhuqamzq8l] {
    margin-top: 12px;
    padding: 12px;
    background-color: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 4px;
}

/* Utility classes from reference file */
.flex-container[b-zhuqamzq8l] {
    display: flex;
}

.align-middle[b-zhuqamzq8l] {
    align-items: center;
}

.flex-child-grow[b-zhuqamzq8l] {
    flex: 1;
}

.flex-child-shrink[b-zhuqamzq8l] {
    flex-shrink: 0;
}


.v-selected-quantity.is-selected[b-zhuqamzq8l] {
    border-color: var(--iRed700);
    background-color: var(--iRed05);
}


.custom-quantity-header[b-zhuqamzq8l] {
    margin-bottom: 0;
}

.custom-quantity-header .d-flex[b-zhuqamzq8l] {
    gap: 8px;
    margin-bottom: 12px;
}
/* 수량 wrapper 스타일 */
#quntityWrapper[b-zhuqamzq8l] {
    position: relative;
}

/* 커스텀 수량 정보 표시 */
#custom-select-info[b-zhuqamzq8l] {
    margin-top: 8px;
    padding: 12px;
    background-color: #ffffff;
    border-radius: 4px;
    border: 1px solid #dee2e6;
}

/* 수량 입력 상태에 따른 박스 스타일 */
.v-selected-quantity.empty[b-zhuqamzq8l] {
    padding: 0.75rem;
    color: var(--iGray700);
    border: 1px solid var(--iGray50);
    font-size: 0.875rem;
    font-weight: 600;
}

.v-selected-quantity.empty:hover[b-zhuqamzq8l] {
    background-color: var(--iGray05);
}

.v-selected-quantity.filled[b-zhuqamzq8l] {
    border: 2px solid var(--iRed500);
    background-color: var(--iRed05);
}

.v-selected-quantity.filled:hover[b-zhuqamzq8l] {
    border: 2px solid var(--iRed700);
    background-color: var(--iRed05);
}

.page-count[b-zhuqamzq8l] {
    color: var(--iRed700);
}

.number-stepper[b-zhuqamzq8l] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.number-stepper input[b-zhuqamzq8l] {
    min-width: 0;
    text-align: center;
    font-size: 16px;
    touch-action: manipulation;
}

.number-stepper--compact[b-zhuqamzq8l] {
    flex: 1;
}

.stepper-btn[b-zhuqamzq8l] {
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--iGray200);
    border-radius: 999px;
    background: var(--White);
    color: var(--Black);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
    flex: 0 0 auto;
    touch-action: manipulation;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.stepper-btn__label[b-zhuqamzq8l] {
    display: block;
    line-height: 1;
    pointer-events: none;
}

.offset-input[b-zhuqamzq8l] {
    font-variant-numeric: tabular-nums;
}

/* Responsive Design */
@media (max-width: 768px) {
    .data-linked-quantity-layout[b-zhuqamzq8l] {
        align-items: center;
        gap: 0.75rem;
    }

    .print-main[b-zhuqamzq8l] {
        flex-direction: column;
    }
    .print-content[b-zhuqamzq8l] {
        position: static;
        min-height: 22rem;
    }
    .print-sidebar[b-zhuqamzq8l] {
        position: static;
        width: 100%;
    }

    .sidebar-footer[b-zhuqamzq8l] {
        left: 0;
        right: 0;
        width: 100%;
    }

    .label-preview[b-zhuqamzq8l] {
        padding: 0 1rem;
        height: calc(100% - 6.5rem);
    }
    .final-confirm-section[b-zhuqamzq8l] {
        margin-bottom: 3.75rem;
    }
    .quantity-list[b-zhuqamzq8l] {
    height: 10.75rem;
    }
    .order-summary[b-zhuqamzq8l] {
        font-size: 0.75rem;
    }

    .adjustment-row[b-zhuqamzq8l] {
        align-items: flex-start;
    }

    .adjustment-inputs[b-zhuqamzq8l] {
        flex-wrap: wrap;
    }

    .number-stepper--compact[b-zhuqamzq8l] {
        min-width: 100%;
    }

    .stepper-btn[b-zhuqamzq8l] {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1.125rem;
    }

    .offset-input[b-zhuqamzq8l] {
        font-size: 16px;
    }
}
/* /Components/Popups/NoticeSection.razor.rz.scp.css */
.notice-section[b-yg2lo43f73] {
    padding: 24px;
}

.notice-header[b-yg2lo43f73] {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    gap: 8px;
}

.notice-header span[b-yg2lo43f73] {
    font-weight: 600;
    font-size: 18px;
}

.notice-block ul[b-yg2lo43f73] {
    padding-left: 20px;
    margin-bottom: 20px;
}

.notice-block li[b-yg2lo43f73] {
    margin-bottom: 8px;
    line-height: 1.5;
}

.notice-label[b-yg2lo43f73] {
    font-weight: 600;
    margin-bottom: 10px;
    color: #333;
}

.highlight[b-yg2lo43f73] {
    color: #dc3545;
    font-weight: 500;
}

.help-icon-btn[b-yg2lo43f73] {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.infomation-wrap[b-yg2lo43f73] {
    background-color: #f8f9fa;
    padding: 16px;
    border-radius: 8px;
}
/* /Components/Popups/PopupColorMaterialCompare.razor.rz.scp.css */
/* Color and Material Comparison Popup Styles */

.material-compare-content[b-mcxk2onqmy] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.material-compare-item[b-mcxk2onqmy] {
    width: 100%;
}

.material-item-row[b-mcxk2onqmy] {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.material-preview[b-mcxk2onqmy] {
    width: 130px;
    height: 130px;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.material-preview img[b-mcxk2onqmy] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.material-info[b-mcxk2onqmy] {
    display: flex;
    flex-direction: column;
}

.material-title[b-mcxk2onqmy] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 1rem;
}

.material-name[b-mcxk2onqmy] {
    font-family: 'Pretendard Variable', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1em;
    color: #000000;
}

.material-printer[b-mcxk2onqmy] {
    font-family: 'Pretendard Variable', sans-serif;
    font-weight: 300;
    font-size: 11px;
    line-height: 1em;
    color: #000000;
}

.material-description[b-mcxk2onqmy] {
    font-family: 'Pretendard Variable', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 1.5em;
    color: #636363;
    text-align: left;
}

.material-select-btn[b-mcxk2onqmy] {
    align-self: stretch;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6px 12px;
    border: 1px solid #F8E1E1;
    border-radius: 4px;
    background-color: #ffffff;
    color: #D85C5D;
    font-family: 'Pretendard Variable', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1em;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.material-select-btn:hover[b-mcxk2onqmy] {
    background-color: #D85C5D;
    color: #ffffff;
    border-color: #D85C5D;
}

.material-select-btn:focus[b-mcxk2onqmy] {
    outline: none;
    box-shadow: 0 0 0 2px rgba(216, 92, 93, 0.25);
}

.material-divider[b-mcxk2onqmy] {
    border: none;
    border-top: 1px solid #E5E5E5;
    margin: 0;
}
/* /Components/Popups/PopupDataLinkIntro.razor.rz.scp.css */
.data-link-intro-modal[b-qkgc97uaqg] {
    --intro-shadow: 0 0 11px rgba(0, 0, 0, 0.15);
}

.data-link-intro-modal .modal-dialog[b-qkgc97uaqg] {
    width: min(352px, calc(100vw - 24px));
    max-width: 352px;
    margin: 1rem auto;
}

.data-link-intro-modal__content[b-qkgc97uaqg] {
    position: relative;
    overflow: hidden;
    border: none;
    border-radius: 16px;
    background: var(--White);
    box-shadow: var(--intro-shadow);
}

.data-link-intro-modal__header[b-qkgc97uaqg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    border-bottom: 1px solid #f4f4f4;
    background: var(--White);
}

.data-link-intro-modal__header-spacer[b-qkgc97uaqg] {
    flex: 1 0 0;
    min-width: 0;
    height: 20px;
}

.data-link-intro-modal__close[b-qkgc97uaqg] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 8px;
    border: none;
    border-radius: 24px;
    background: var(--White);
}

.data-link-intro-modal__close span[b-qkgc97uaqg] {
    position: absolute;
    width: 18px;
    height: 1px;
    background: rgba(47, 51, 54, 0.5);
}

.data-link-intro-modal__close span:first-child[b-qkgc97uaqg] {
    transform: rotate(45deg);
}

.data-link-intro-modal__close span:last-child[b-qkgc97uaqg] {
    transform: rotate(-45deg);
}

.data-link-intro-modal__body[b-qkgc97uaqg] {
    width: 100%;
}

.data-link-intro-modal__canvas[b-qkgc97uaqg] {
    position: relative;
    width: 350px;
    height: 400px;
    overflow: hidden;
}

.data-link-intro-modal__image[b-qkgc97uaqg] {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    user-select: none;
    pointer-events: none;
}

.data-link-intro-modal__detail-button[b-qkgc97uaqg] {
    position: absolute;
    left: 50%;
    bottom: 18px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 200px;
    height: 32px;
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    background: #d0383a;
    color: #fef9f9;
    font-size: 14px;
    font-weight: 400;
    line-height: 14px;
    transform: translateX(-50%);
    box-shadow: 0 8px 18px rgba(208, 56, 58, 0.22);
}

.data-link-intro-modal__detail-button img[b-qkgc97uaqg] {
    width: 16px;
    height: 16px;
    filter: brightness(0) invert(1);
}

.data-link-intro-modal__footer[b-qkgc97uaqg] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: var(--White);
}

.data-link-intro-modal__footer-section[b-qkgc97uaqg] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 175px;
    min-height: 20px;
    padding: 0 16px;
}

.data-link-intro-modal__checkbox[b-qkgc97uaqg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 400;
    line-height: 13px;
    color: #636363;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.data-link-intro-modal__checkbox input[b-qkgc97uaqg] {
    width: 20px;
    height: 20px;
    margin: 0;
    border: 1px solid #d0d0d0;
    border-radius: 2px;
    accent-color: var(--iRed700);
}

.data-link-intro-modal__close-text[b-qkgc97uaqg] {
    border: none;
    background: transparent;
    padding: 0;
    font-size: 13px;
    font-weight: 400;
    line-height: 13px;
    color: #000000;
}

.data-link-intro-modal__backdrop[b-qkgc97uaqg] {
    background: rgba(23, 27, 33, 0.52);
}

@media (max-width: 480px) {
    .data-link-intro-modal .modal-dialog[b-qkgc97uaqg] {
        width: min(352px, calc(100vw - 16px));
        max-width: min(352px, calc(100vw - 16px));
    }

    .data-link-intro-modal__canvas[b-qkgc97uaqg] {
        width: 100%;
        aspect-ratio: 350 / 400;
        height: auto;
    }

    .data-link-intro-modal__detail-button[b-qkgc97uaqg] {
        bottom: 18px;
        width: 57.14%;
    }
}
/* /Components/Popups/PopupMaterialInfo.razor.rz.scp.css */
.material-preview-lg[b-xrw3zgdlc5] {
    width: 220px;
    height: 220px;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
}
.material-preview-lg img[b-xrw3zgdlc5] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.material-info-modal__dialog[b-xrw3zgdlc5] {
    max-width: min(680px, calc(100vw - 2rem));
}

.material-info-modal .modal-content[b-xrw3zgdlc5] {
    max-height: calc(var(--mobile-visible-viewport-height, 100vh) - 2rem);
}

.material-info-modal .modal-body[b-xrw3zgdlc5] {
    overflow-y: auto;
}

.material-info-modal__summary[b-xrw3zgdlc5] {
    min-width: 0;
}

.material-info[b-xrw3zgdlc5] {
    min-width: 0;
}

@media (max-width: 767.98px) {
    .material-info-modal__dialog[b-xrw3zgdlc5] {
        max-width: calc(100vw - 1rem);
        margin: 0.5rem;
    }

    .material-info-modal__summary[b-xrw3zgdlc5] {
        flex-direction: column;
        gap: 0.75rem !important;
    }

    .material-preview-lg[b-xrw3zgdlc5] {
        width: 100%;
        height: min(42vw, 220px);
    }

    .material-info-modal .modal-header[b-xrw3zgdlc5],
    .material-info-modal .modal-body[b-xrw3zgdlc5] {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}
/* /Components/Popups/PopupTemplateMerge.razor.rz.scp.css */
.template-merge-modal[b-rxfni9a3oj] {
    --template-merge-border: #d8dee6;
    --template-merge-accent: #c83333;
    --template-merge-bg: #fffdf8;
    --template-merge-text: #1c2733;
    --template-merge-muted: #4a5663;
}

.template-merge-modal__dialog[b-rxfni9a3oj] {
    width: min(560px, calc(100vw - 24px));
    max-width: 560px;
}

.template-merge-modal__content[b-rxfni9a3oj] {
    border: 0;
    border-radius: 20px;
    box-shadow: 0 20px 44px rgba(24, 31, 41, 0.18);
    overflow: hidden;
}

.template-merge-modal__header[b-rxfni9a3oj] {
    padding: 18px 22px 12px;
    border-bottom: 1px solid #eef1f4;
}

.template-merge-modal__header .modal-title[b-rxfni9a3oj] {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--template-merge-text);
}

.template-merge-modal__body[b-rxfni9a3oj] {
    padding: 20px 22px 8px;
}

.template-merge-modal__intro[b-rxfni9a3oj] {
    margin: 0 0 14px;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--template-merge-muted);
}

.template-merge-modal__options[b-rxfni9a3oj] {
    display: grid;
    gap: 12px;
}

.template-merge-modal__option[b-rxfni9a3oj] {
    display: grid;
    gap: 6px;
    width: 100%;
    padding: 16px 18px;
    border: 1px solid var(--template-merge-border);
    border-radius: 16px;
    background: #ffffff;
    text-align: left;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.template-merge-modal__option:hover[b-rxfni9a3oj] {
    border-color: #b9c3cf;
    box-shadow: 0 8px 20px rgba(28, 39, 51, 0.08);
}

.template-merge-modal__option.is-active[b-rxfni9a3oj] {
    border-color: color-mix(in srgb, var(--template-merge-accent) 65%, white);
    background: var(--template-merge-bg);
    box-shadow: 0 10px 24px rgba(200, 51, 51, 0.14);
}

.template-merge-modal__option-title[b-rxfni9a3oj] {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--template-merge-text);
}

.template-merge-modal__option-desc[b-rxfni9a3oj] {
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--template-merge-muted);
}

.template-merge-modal__option.is-active .template-merge-modal__option-desc[b-rxfni9a3oj] {
    color: var(--template-merge-text);
}

@media (max-width: 480px) {
    .template-merge-modal__header[b-rxfni9a3oj] {
        padding: 16px 18px 10px;
    }

    .template-merge-modal__body[b-rxfni9a3oj] {
        padding: 18px 18px 8px;
    }

    .template-merge-modal__option[b-rxfni9a3oj] {
        padding: 14px 16px;
    }
}
/* /Components/Popups/PopupUnprintableArea.razor.rz.scp.css */
/* /Components/Properties/OffcanvasClipart.razor.rz.scp.css */
.offcanvas-drawer[b-yg5bhxlblj] {
    width: 500px;
}

.offcanvas-content[b-yg5bhxlblj] {
    position: relative;
    z-index: 1;
}

.item-list-2column[b-yg5bhxlblj] {
    grid-template-columns: repeat(4, 1fr);
}

.item-list-container[b-yg5bhxlblj] {
    min-width: 0;
}

.item-card[b-yg5bhxlblj] {
    aspect-ratio: 1;
    border-radius: 16px;
    overflow: hidden;
    background: linear-gradient(180deg, #ffffff 0%, #f5f7fb 100%);
    border: 1px solid rgba(15, 23, 42, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

.item-card img[b-yg5bhxlblj] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@media (max-width: 767.98px) {
    .offcanvas-drawer[b-yg5bhxlblj] {
        width: 100%;
    }

    .item-list-2column[b-yg5bhxlblj] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
}
/* /Components/Properties/OffcanvasFontAwesome.razor.rz.scp.css */
.current-icon-preview[b-dzicpkk51i] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    background-color: #f8f9fa;
}

.current-icon-preview svg[b-dzicpkk51i] {
    width: 20px;
    height: 20px;
    fill: currentColor;
}
/* /Components/Properties/OffcanvasTheme.razor.rz.scp.css */
/* ---- Header delete button ---- */
.theme-delete-btn[b-erys6tw6tm] {
    color: var(--iRed700);
    border-color: var(--iRed200);
    gap: .375rem;
    align-items: center;
}

.theme-delete-btn img[b-erys6tw6tm] {
    filter: invert(32%) sepia(77%) saturate(747%) hue-rotate(325deg) brightness(91%) contrast(97%);
    opacity: 1;
}

.theme-delete-btn:hover[b-erys6tw6tm],
.theme-delete-btn:focus[b-erys6tw6tm],
.theme-delete-btn:active[b-erys6tw6tm] {
    color: var(--iRed700) !important;
    border-color: var(--iRed500) !important;
    background-color: var(--iRed25) !important;
}

/* ---- Clear-background first grid item ---- */
.theme-clear-item[b-erys6tw6tm] {
    cursor: pointer;
}

.theme-clear-card[b-erys6tw6tm] {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed #dc3545 !important;
    border-radius: 8px;
    background-color: #fff5f5;
    min-height: 80px;
}

.theme-clear-icon[b-erys6tw6tm] {
    width: 48px;
    height: 48px;
    filter: invert(18%) sepia(96%) saturate(2800%) hue-rotate(340deg) brightness(90%) contrast(110%);
    opacity: 0.85;
}

.theme-clear-title[b-erys6tw6tm] {
    color: #dc3545;
    font-weight: 600;
}

.theme-clear-item:hover .theme-clear-card[b-erys6tw6tm] {
    background-color: #ffe0e3;
}
/* /Components/Properties/PropertyImage.razor.rz.scp.css */

.file-upload-trigger[b-0cpytcy9uv] {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.file-upload-trigger__button[b-0cpytcy9uv] {
	width: 100%;
	pointer-events: none;
	overflow: hidden;
}

.file-upload-trigger__input[b-0cpytcy9uv] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}
/* /Components/Properties/PropertyShape.razor.rz.scp.css */
/* shape-btn 스타일은 app.css의 공통 스타일 사용 */
/* /Components/Properties/PropertyTable.razor.rz.scp.css */

/* /Components/Properties/PropertyText.razor.rz.scp.css */
/* PropertyText.razor.css - isolation CSS for PropertyText.razor */
/* /Components/Properties/PropertyTextMobile.razor.rz.scp.css */
/* PropertyTextMobile.razor.css */

.mobile-text-input-host[b-lw8b1q2xj2] {
    position: fixed;
    left: 12px;
    top: 12px;
    width: 1px;
    height: 1px;
    opacity: 0.015;
    overflow: hidden;
    pointer-events: none;
    z-index: 1300;
}

.mobile-text-input-host__textarea[b-lw8b1q2xj2] {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border: 0;
    outline: 0;
    resize: none;
    background: transparent;
    color: transparent;
    caret-color: transparent;
}

.mobile-text-style-panel[b-lw8b1q2xj2] {
    min-height: 0;
    padding-bottom: calc(4rem + env(safe-area-inset-bottom, 0px));
}

.mobile-text-style-panel__intro[b-lw8b1q2xj2] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.mobile-text-style-panel__title[b-lw8b1q2xj2] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--Black);
}

.mobile-text-style-panel__subtitle[b-lw8b1q2xj2] {
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--iGray600);
}

.mobile-text-mini-toolbar[b-lw8b1q2xj2] {
    position: fixed;
    left: 8px;
    right: 8px;
    z-index: 1200;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.18);
    backdrop-filter: blur(10px);
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
}

.mobile-text-mini-toolbar .mini-control[b-lw8b1q2xj2] {
    height: 34px;
    border: 1px solid var(--iGray100);
    border-radius: 8px;
    font-size: 0.75rem;
    background: var(--White);
    color: var(--Black);
    touch-action: manipulation;
}

.mobile-text-mini-toolbar .mini-font[b-lw8b1q2xj2] {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 34vw;
    padding: 0 0.625rem;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
}

.mobile-text-mini-toolbar .mini-font__label[b-lw8b1q2xj2] {
    display: block;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: left;
    font-size: 0.72rem;
}

.mobile-text-mini-toolbar .mini-size-group[b-lw8b1q2xj2],
.mobile-text-mini-toolbar .mini-biu-group[b-lw8b1q2xj2] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.mobile-text-mini-toolbar .mini-size-btn[b-lw8b1q2xj2],
.mobile-text-mini-toolbar .mini-biu-btn[b-lw8b1q2xj2] {
    width: 28px;
    min-width: 28px;
    padding: 0;
    text-align: center;
}

.mobile-text-mini-toolbar .mini-size-value[b-lw8b1q2xj2] {
    width: 36px;
    min-width: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mobile-text-mini-toolbar .mini-biu-btn.active[b-lw8b1q2xj2] {
    border-color: var(--iRed700);
    color: var(--iRed700);
}

.mobile-text-mini-toolbar .mini-paste[b-lw8b1q2xj2] {
    width: 36px;
    min-width: 36px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mobile-text-mini-toolbar .mini-paste img[b-lw8b1q2xj2] {
    width: 18px;
    height: 18px;
}

.mobile-text-mini-toolbar .mini-color[b-lw8b1q2xj2] {
    width: 36px;
    min-width: 36px;
    padding: 2px;
}

.mini-picker-panel[b-lw8b1q2xj2] {
    position: fixed;
    left: 8px;
    right: 8px;
    z-index: 1201;
    padding: 6px;
    transform: translateY(-100%);
    border: 1px solid var(--iGray100);
    border-radius: 10px;
    background: var(--White);
    display: flex;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
}

.mini-picker-item[b-lw8b1q2xj2] {
    flex: 0 0 auto;
    height: 30px;
    border: 1px solid var(--iGray100);
    border-radius: 6px;
    background: var(--White);
    font-size: 0.75rem;
    padding: 0 0.5rem;
}

.mini-picker-item.active[b-lw8b1q2xj2] {
    border-color: var(--iRed700);
    color: var(--iRed700);
    transform: translateY(0);
}

.mini-color-swatch[b-lw8b1q2xj2] {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border: 1px solid var(--iGray100);
    border-radius: 6px;
}

.mini-color-swatch.active[b-lw8b1q2xj2] {
    border-color: var(--iRed700);
}
/* /Pages/MakePdf.razor.rz.scp.css */
/* MakePdf.razor.css - LabelPrint 디자인 시스템 기반 스타일 */

/* 메인 레이아웃 */
main[b-gpex076h0a] {
    display: flex;
    height: 100vh;
    background-color: #f8f9fa;
    flex-direction: column;
}

.flex-grow-1[b-gpex076h0a] {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: calc(100vw - 300px);
    max-width: calc(100vw - 300px);
}

/* 캔버스 컨테이너 스타일 개선 */
.flex-grow-1.ph-100[b-gpex076h0a] {
    width: calc(100vw - 300px);
    height: calc(100vh - 60px);
    max-width: calc(100vw - 300px);
    max-height: calc(100vh - 60px);
    overflow: hidden;
}

/* 상단 컨트롤 박스 */
.control-box[b-gpex076h0a] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #ffffff;
    border-bottom: 1px solid #e5e5e5;
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
    box-sizing: border-box;
}

/* 페이지 네비게이션 컨트롤 */
.pagination-controls[b-gpex076h0a] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pagination-controls .btn[b-gpex076h0a] {
    background: #ffffff;
    border: 1px solid #dadce0;
    padding: 8px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    width: 32px;
    height: 32px;
}

.pagination-controls .btn:hover[b-gpex076h0a] {
    background-color: #f8f9fa;
    border-color: #c5c7ca;
}

.pagination-controls .btn img[b-gpex076h0a],
.nav-link img[b-gpex076h0a] {
    width: 16px;
    height: 16px;
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(27%) sepia(12%) saturate(629%) hue-rotate(169deg) brightness(95%) contrast(91%);
}

.pagination-controls .btn:hover img[b-gpex076h0a],
.nav-link:hover img[b-gpex076h0a] {
    filter: brightness(0) saturate(100%) invert(37%) sepia(12%) saturate(629%) hue-rotate(169deg) brightness(85%) contrast(91%);
}

.pagination-controls .text-small[b-gpex076h0a] {
    font-size: 13px;
    color: #5f6368;
    margin: 0 16px;
    min-width: 80px;
    text-align: center;
    white-space: nowrap;
}

/* 네비게이션 필 */
.nav-pills[b-gpex076h0a] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-item[b-gpex076h0a] {
    position: relative;
    cursor: pointer;
}

.nav-link[b-gpex076h0a] {
    background: #ffffff;
    border: 1px solid #e5e5e5;
    color: #2f3336;
    padding: 8px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    width: 32px;
    height: 32px;
}

.nav-link:hover[b-gpex076h0a] {
    background: #f8f9fa;
    border-color: #c5c7ca;
}

.nav-link img[b-gpex076h0a] {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.nav-link:hover[b-gpex076h0a] {
    background: #f8f9fa;
    border-color: #c5c7ca;
}

.nav-link img[b-gpex076h0a] {
    width: 16px;
    height: 16px;
}

.nav-pills-explain[b-gpex076h0a] {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 4px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.nav-item:hover .nav-pills-explain[b-gpex076h0a] {
    opacity: 1;
}

/* 메인 콘텐츠 영역 */
.d-flex[b-gpex076h0a] {
    display: flex;
    background-color: #ffffff;
    height: calc(100vh - 60px);
    width: 100vw;
}

/* 캔버스 영역 */
.ph-100[b-gpex076h0a] {
    min-height: 100px;
    background-color: #ffffff;
    flex: 1;
    width: calc(100% - 300px);
    height: 100%;
}

/* 오른쪽 사이드바 */
.right-sidebar[b-gpex076h0a] {
    width: 300px;
    background: #ffffff;
    border-left: 1px solid #e5e5e5;
    padding: 1rem;
    overflow-y: auto;
    height: calc(100vh - 60px);
    flex-shrink: 0;
}

/* 사이드바 섹션 */
.sidebar-section[b-gpex076h0a] {
    margin-bottom: 1.5rem;
}

.sidebar-section:last-child[b-gpex076h0a] {
    margin-bottom: 0;
}

.section-title[b-gpex076h0a] {
    font-family: 'Pretendard Variable', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #2f3336;
    margin: 0 0 8px 0;
    padding: 8px 0;
}

/* 설정 박스 */
.settings-box[b-gpex076h0a] {
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 1rem;
}

/* 폼 컨트롤 그룹 */
.form-control-group[b-gpex076h0a] {
    margin-bottom: 1rem;
}

.form-control-group:last-child[b-gpex076h0a] {
    margin-bottom: 0;
}

.control-label[b-gpex076h0a] {
    font-size: 13px;
    color: #2f3336;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

/* 라디오 버튼 그룹 개선 */
.radio-group[b-gpex076h0a] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.number-stepper[b-gpex076h0a] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    min-width: 0;
}

.number-stepper .form-control-sm[b-gpex076h0a] {
    width: 5rem;
    text-align: center;
    font-size: 16px;
    touch-action: manipulation;
}

.stepper-btn[b-gpex076h0a] {
    width: 2rem;
    height: 2rem;
    border: 1px solid #dadce0;
    border-radius: 6px;
    background: #ffffff;
    color: #2f3336;
    font-size: 1rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    touch-action: manipulation;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.stepper-btn__label[b-gpex076h0a] {
    display: block;
    line-height: 1;
    pointer-events: none;
}

.offset-input[b-gpex076h0a] {
    font-variant-numeric: tabular-nums;
}

.stepper-btn:active[b-gpex076h0a],
.stepper-btn:hover[b-gpex076h0a] {
    background: #f8f9fa;
    border-color: #c5c7ca;
}

/* 도움말 텍스트 */
.help-text[b-gpex076h0a] {
    font-size: 11px;
    color: #636363;
    line-height: 1.4;
    display: block;
    margin-top: 8px;
}

/* PDF 링크 리스트 */
.pdf-links-list[b-gpex076h0a] {
    padding: 0;
}

/* 줌 컨트롤 (향후 사용을 위해) */
.zoom-controls[b-gpex076h0a] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.zoom-display[b-gpex076h0a] {
    padding: 6px 8px;
    border: 1px solid #dadce0;
    border-radius: 4px;
    min-width: 60px;
    text-align: center;
    font-size: 13px;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.zoom-display:hover[b-gpex076h0a] {
    border-color: #c5c7ca;
}

/* 입력 필드 */
.form-control-sm[b-gpex076h0a] {
    height: 32px;
    padding: 6px 8px;
    font-size: 13px;
    border: 1px solid #dadce0;
    border-radius: 4px;
    transition: border-color 0.2s ease;
    background-color: #ffffff;
    color: #2f3336;
}

.form-control-sm:focus[b-gpex076h0a] {
    outline: none;
    border-color: #d0383a;
    box-shadow: 0 0 0 2px rgba(208, 56, 58, 0.1);
}

/* 폼 컨트롤 */
.form-check-input[b-gpex076h0a] {
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
    accent-color: #d0383a;
}

.form-check-label[b-gpex076h0a] {
    font-size: 13px;
    color: #2f3336;
    cursor: pointer;
    margin: 0;
}

/* 반응형 디자인 */
@media (max-width: 1200px) {
    .right-sidebar[b-gpex076h0a] {
        width: 280px;
    }
}

@media (max-width: 768px) {
    .control-box[b-gpex076h0a] {
        padding: 0.75rem;
        flex-direction: column;
        height: auto;
        gap: 1rem;
    }
    
    .pagination-controls .text-small[b-gpex076h0a] {
        margin: 0 8px;
        min-width: 60px;
    }
    
    .right-sidebar[b-gpex076h0a] {
        width: 100%;
        height: auto;
        border-left: none;
        border-top: 1px solid #e5e5e5;
    }

    .radio-group[b-gpex076h0a] {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .number-stepper[b-gpex076h0a] {
        width: 100%;
    }

    .number-stepper .form-control-sm[b-gpex076h0a] {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        font-size: 16px;
    }

    .stepper-btn[b-gpex076h0a] {
        width: 2.5rem;
        height: 2.5rem;
    }
    
    .d-flex[b-gpex076h0a] {
        flex-direction: column;
    }
}

/* 로딩 상태 */
.loading[b-gpex076h0a] {
    opacity: 0.6;
    pointer-events: none;
}

/* 유틸리티 클래스 */
.justify-content-between[b-gpex076h0a] {
    justify-content: space-between;
}

.justify-content-center[b-gpex076h0a] {
    justify-content: center;
}

.align-items-center[b-gpex076h0a] {
    align-items: center;
}

.text-nowrap[b-gpex076h0a] {
    white-space: nowrap;
}

.flex-nowrap[b-gpex076h0a] {
    flex-wrap: nowrap;
}

.me-3[b-gpex076h0a] {
    margin-right: 1rem;
}

.mx-1[b-gpex076h0a] {
    margin-left: 0.25rem;
    margin-right: 0.25rem;
}

/* 접근성 개선 */
.btn:focus[b-gpex076h0a] {
    outline: 2px solid #d0383a;
    outline-offset: 2px;
}

.form-check-input:focus[b-gpex076h0a] {
    outline: 2px solid #d0383a;
    outline-offset: 2px;
}

/* Legacy Bootstrap 클래스 오버라이드 */
.bg-light.rounded[b-gpex076h0a] {
    background-color: #f8f9fa !important;
    border-radius: 8px !important;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.bg-light small[b-gpex076h0a] {
    font-size: 11px;
    color: #636363;
    line-height: 1.4;
    display: block;
    margin-top: 8px;
}