/* [L4.5] wego-components.css — WEGO+ 퍼블 components.css 기반 (버튼·grid chrome·tag/badge·loading).
   출처: wego/css/components.css · 호환: Alopex .Button 레거시 클래스.
   ※ FO/BO 바이트 동일 — 현황: docs/css-hierarchy.md / 계획: docs/design-system-migration.md */

/* =====================================================
   공통 피드백
===================================================== */
.wego-common-toast {
    --wego-toast-anchor-x: -50%;
    --wego-toast-anchor-y: 0%;
    --wego-toast-offset-x: 0px;
    --wego-toast-offset-y: 0px;
    position: fixed;
    left: 50%;
    bottom: 32px;
    z-index: var(--wego-z-toast, 2147483000);
    box-sizing: border-box;
    max-width: min(560px, calc(100vw - 40px));
    padding: 12px 18px;
    color: #fff;
    background: rgba(24, 28, 36, 0.94);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(
        calc(var(--wego-toast-anchor-x) + var(--wego-toast-offset-x)),
        calc(var(--wego-toast-anchor-y) + var(--wego-toast-offset-y) + 12px)
    );
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.wego-common-toast.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translate(
        calc(var(--wego-toast-anchor-x) + var(--wego-toast-offset-x)),
        calc(var(--wego-toast-anchor-y) + var(--wego-toast-offset-y))
    );
}

/* =====================================================
   API 콘텐츠 공통 로딩 스켈레톤
===================================================== */
.wego-loading-skeleton {
    --wego-skeleton-accent: var(--brand-primary, #EF7620);
    --wego-skeleton-gap: 14px;
    --wego-skeleton-line-width: 36%;
    --wego-skeleton-block-height: 36px;
    --wego-skeleton-radius: 8px;
    display: grid;
    gap: var(--wego-skeleton-gap);
}

.wego-loading-skeleton__status {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary, #374151);
    font-size: 13px;
    font-weight: 700;
}

.wego-loading-skeleton__spinner {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    box-sizing: border-box;
    border: 2px solid rgba(148, 163, 184, 0.28);
    border-top-color: var(--wego-skeleton-accent);
    border-radius: 50%;
    animation: wego-loading-skeleton-spin 0.8s linear infinite;
}

.wego-loading-skeleton__body {
    display: grid;
    gap: 7px;
}

.wego-loading-skeleton__line,
.wego-loading-skeleton__block {
    display: block;
    overflow: hidden;
    position: relative;
    border-radius: var(--wego-skeleton-radius);
    background: rgba(226, 232, 240, 0.72);
}

.wego-loading-skeleton__line::after,
.wego-loading-skeleton__block::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.72), transparent);
    animation: wego-loading-skeleton-shimmer 1.35s ease-in-out infinite;
}

.wego-loading-skeleton__line {
    width: var(--wego-skeleton-line-width);
    height: 15px;
    margin-bottom: 1px;
}

.wego-loading-skeleton__block {
    width: 100%;
    height: var(--wego-skeleton-block-height);
}

@keyframes wego-loading-skeleton-spin {
    to { transform: rotate(360deg); }
}

@keyframes wego-loading-skeleton-shimmer {
    to { transform: translateX(100%); }
}

/* =====================================================
   WEGO button base (퍼블 + Alopex .Button 공통 박스)
===================================================== */
.btn-primary,
.btn-outline,
.btn-danger,
.Button.btn-typea,
.Button.btn-typec,
.Button.btn-typeb,
.Button.btn-src,
.Button.login-btn,
.Button.btn_red {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    box-sizing: border-box;
    min-width: 70px;
    height: var(--btn-height);
    padding: var(--btn-padding);
    font-size: var(--btn-font-size);
    font-weight: 600;
    font-family: var(--wego-font-sans, inherit);
    line-height: 1.2;
    border-radius: var(--btn-radius);
    letter-spacing: 0.01em;
    white-space: nowrap;
    cursor: pointer;
    vertical-align: middle;
    transition: background-color 0.16s, border-color 0.16s, color 0.16s, box-shadow 0.16s;
}

.btn-primary span.material-symbols-outlined,
.btn-outline span.material-symbols-outlined,
.btn-danger span.material-symbols-outlined,
.btn-primary span.material-symbols-rounded,
.btn-outline span.material-symbols-rounded,
.btn-danger span.material-symbols-rounded {
    font-size: 15px;
}

/* Primary */
.btn-primary,
.Button.btn-typea.bg-red,
.Button.btn-src,
.Button.login-btn.bg-red,
.Button.btn_red {
    color: var(--btn-primary-fg);
    background-color: var(--btn-primary-bg);
    border: 1.5px solid var(--btn-primary-border);
    box-shadow: var(--btn-primary-shadow);
}

.btn-primary:hover,
.Button.btn-typea.bg-red:hover,
.Button.btn-src:hover,
.Button.login-btn.bg-red:hover,
.Button.btn_red:hover {
    color: var(--btn-primary-fg);
    background-color: var(--btn-primary-bg);
    border-color: var(--btn-primary-border);
}

/* Outline (보조) */
.btn-outline,
.Button.btn-typea:not(.bg-red),
.Button.btn-typec,
.Button.btn-typeb,
.Button.login-btn:not(.bg-red):not(.bg-black) {
    color: var(--text-primary);
    background-color: var(--btn-outline-bg);
    border: 1.5px solid var(--btn-outline-border);
    box-shadow: none;
}

.btn-outline span.material-symbols-outlined,
.btn-outline span.material-symbols-rounded {
    color: var(--btn-outline-icon);
}

.btn-outline:hover,
.Button.btn-typea:not(.bg-red):hover,
.Button.btn-typec:hover,
.Button.btn-typeb:hover {
    color: var(--text-primary);
    background-color: var(--btn-outline-bg);
    border-color: var(--btn-outline-border);
}

.btn-outline:hover span.material-symbols-outlined,
.btn-outline:hover span.material-symbols-rounded {
    color: var(--btn-outline-icon);
}

.btn-outline.is-active {
    background-color: var(--btn-outline-hover-bg);
    border-color: var(--btn-outline-hover-border);
}

/* Danger */
.btn-danger {
    color: var(--btn-danger-fg);
    background-color: var(--btn-outline-bg);
    border: 1.5px solid var(--btn-outline-border);
    box-shadow: none;
}

.btn-danger span.material-symbols-outlined,
.btn-danger span.material-symbols-rounded {
    color: var(--btn-danger-fg);
}

.btn-danger:hover {
    background-color: var(--btn-outline-bg);
    border-color: var(--btn-outline-border);
}

/* Disabled */
.btn-primary:disabled,
.btn-outline:disabled,
.btn-danger:disabled,
.Button.btn-typea.Disabled,
.Button.btn-typea.bg-red.Disabled,
.Button.btn-typec.Disabled,
.Button.btn-typeb.Disabled,
.Button.btn-src.Disabled,
.Button.login-btn.Disabled,
.Button.btn_red.Disabled {
    opacity: var(--btn-disabled-opacity);
    cursor: not-allowed !important;
    pointer-events: none;
    box-shadow: none !important;
    background: var(--btn-disabled-bg) !important;
    border-color: var(--btn-disabled-border) !important;
    color: var(--btn-disabled-fg) !important;
}

/* login-btn 레거시 (높이 45px 유지) */
.Button.login-btn {
    min-width: 70px;
    height: 45px;
    padding: 10px 20px;
}

.Button.login-btn.bg-black {
    color: var(--btn-primary-fg);
    background-color: var(--text-secondary);
    border-color: var(--text-secondary);
    box-shadow: none;
}

.Button.login-btn.bg-black:hover {
    background-color: var(--text-secondary);
    border-color: var(--text-secondary);
}

/* Icon-only (퍼블) */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--btn-height);
    min-width: var(--btn-height);
    height: var(--btn-height);
    padding: 0;
    border-radius: var(--btn-radius);
    border: 1.5px solid var(--border-color);
    background: var(--bg-white);
    color: var(--text-muted);
    transition: all 0.16s;
    flex-shrink: 0;
    cursor: pointer;
    box-sizing: border-box;
}

.btn-icon:hover {
    background: var(--bg-white);
    border-color: var(--border-color);
    color: var(--text-muted);
}

.btn-icon .material-symbols-outlined,
.btn-icon .material-symbols-rounded,
.btn-icon .material-symbols-sharp {
    font-size: 16px;
}

.btn-icon:disabled {
    opacity: var(--btn-disabled-opacity);
    cursor: not-allowed;
    pointer-events: none;
}

/* =====================================================
   Phase 1b — 레거시 ico-* → Material Symbols (::before)
   skgas-bundle 스프라이트 제거 후 적용 (font: wego-font.css)
===================================================== */
.Button.ico-typea,
.Button.ico-typec,
.Button.ico-refresh__typeb {
    position: relative;
    padding: 0;
    text-indent: 0;
    font-size: 0;
    color: transparent;
    background-image: none !important;
    background-color: var(--bg-white) !important;
    overflow: hidden;
}

.Button.ico-typea::before,
.Button.ico-typec::before,
.Button.ico-refresh__typeb::before {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 18px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: block;
    white-space: nowrap;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    -webkit-font-smoothing: antialiased;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: var(--text-muted);
    text-indent: 0;
}

.Button.ico-typea:hover::before,
.Button.ico-typec:hover::before,
.Button.ico-refresh__typeb:hover::before {
    color: var(--text-muted);
}

.Button.ico-typea.Disabled::before,
.Button.ico-typec.Disabled::before,
.Button.ico-refresh__typeb.Disabled::before {
    color: var(--btn-disabled-fg);
}

.Button.ico-typea.ico-src::before { content: 'search'; }
.Button.ico-typea.ico-refresh::before { content: 'refresh'; }
.Button.ico-typea.ico-excel::before,
.Button.ico-typea.ico-exceldown::before {
    content: 'table_view';
    color: #217346;
    font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}
.Button.ico-typea.ico-excel,
.Button.ico-typea.ico-exceldown {
    border-color: #C6E5D1;
    background-color: #F2FAF5 !important;
}
.Button.ico-typea.ico-excel::after,
.Button.ico-typea.ico-exceldown::after {
    content: 'arrow_downward';
    position: absolute;
    right: 1px;
    bottom: 1px;
    display: block;
    width: 12px;
    height: 12px;
    color: #217346;
    font-family: 'Material Symbols Outlined';
    font-size: 12px;
    font-weight: normal;
    line-height: 12px;
    text-align: center;
    font-variation-settings: 'FILL' 0, 'wght' 700, 'GRAD' 0, 'opsz' 20;
}
.Button.ico-typea.ico-excel:hover::before,
.Button.ico-typea.ico-exceldown:hover::before { color: #185C37; }
.Button.ico-typea.ico-excel:hover::after,
.Button.ico-typea.ico-exceldown:hover::after { color: #185C37; }
.Button.ico-typea.ico-excel:hover,
.Button.ico-typea.ico-exceldown:hover {
    border-color: #9DCEB0;
    background-color: #E5F5EB !important;
}
.Button.ico-typea.ico-excel.Disabled::before,
.Button.ico-typea.ico-exceldown.Disabled::before { color: var(--btn-disabled-fg); }
.Button.ico-typea.ico-excel.Disabled::after,
.Button.ico-typea.ico-exceldown.Disabled::after { color: var(--btn-disabled-fg); }
.Button.ico-typea.ico-pdfdown::before { content: 'picture_as_pdf'; }
.Button.ico-typea.ico-excelup::before { content: 'upload'; }
.Button.ico-typea.ico-plus::before { content: 'add'; }
.Button.ico-typea.ico-minus::before { content: 'remove'; }

.Button.ico-typec {
    width: 84px;
    min-width: 84px;
    height: 30px;
    background-color: var(--bg-hover) !important;
}

.Button.ico-typec.ico-goright::before { content: 'arrow_forward'; }
.Button.ico-typec.ico-goleft::before { content: 'arrow_back'; }
.Button.ico-typec.ico-godown::before { content: 'arrow_downward'; }
.Button.ico-typec.ico-goup::before { content: 'arrow_upward'; }

.Button.ico-refresh__typeb {
    min-width: var(--btn-height);
    width: var(--btn-height);
    height: var(--btn-height);
    border: 1.5px solid var(--border-color) !important;
    border-radius: var(--btn-radius);
}

.Button.ico-refresh__typeb::before { content: 'refresh'; }

/* 검색 버튼 내 스프라이트 장식 제거 */
.Button.btn-src .ico.ico-src__typeb {
    display: none !important;
    background: none !important;
}

.Button.btn-src:not(.Disabled)::before {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 15px;
    line-height: 1;
    content: 'search';
    margin-right: 2px;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    color: inherit;
    vertical-align: middle;
}

.Button.ico-typea {
    min-width: var(--btn-height);
    width: var(--btn-height);
    height: var(--btn-height);
    border: 1.5px solid var(--border-color);
    border-radius: var(--btn-radius);
}

.Button.ico-typea.Disabled,
.Button.ico-typec.Disabled,
.Button.ico-refresh__typeb.Disabled {
    opacity: var(--btn-disabled-opacity);
    background-color: var(--btn-disabled-bg) !important;
    border-color: var(--btn-disabled-border) !important;
    pointer-events: none;
}

/* BO ECR primary outline variant */
.Button.btn_red_line {
    color: var(--btn-danger-fg);
    background-color: var(--btn-outline-bg);
    border: 1.5px solid var(--btn-danger-fg);
    box-shadow: none;
}

.Button.btn_red_line:hover {
    background-color: var(--btn-outline-bg);
}

@media (max-width: 768px) {
    .btn-primary,
    .btn-outline,
    .btn-danger,
    .Button.btn-typea,
    .Button.btn-typec,
    .Button.btn-typeb,
    .Button.btn-src {
        padding: 0 10px;
        font-size: 13px;
    }
}

@media (max-width: 540px) {
    .btn-primary,
    .btn-outline,
    .btn-danger,
    .Button.btn-typea,
    .Button.btn-typec,
    .Button.btn-typeb,
    .Button.btn-src {
        padding: 0 8px;
        font-size: 12.5px;
        height: 30px;
    }
}

/* =====================================================
   Grid box chrome (Phase 3 일부 선반영 — 시각만)
===================================================== */
.grid-box {
    background-color: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: var(--card-border-radius);
    padding: var(--card-padding);
    margin-bottom: var(--gap-card);
    box-shadow: var(--shadow-card);
}

.grid-header-tools {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    flex-wrap: wrap;
    gap: 10px;
}

.grid-title-group {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    flex-shrink: 0;
}

.grid-title {
    font-size: 22px;
    font-weight: 400;
    color: var(--text-primary);
    margin: 0;
    line-height: 1;
    letter-spacing: -0.3px;
}

.action-buttons,
.grid-buttons {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* Tag / status-badge / status-dot (퍼블) */
.tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.tag-primary,
.tag-orange {
    background: var(--brand-primary-light);
    color: var(--brand-primary);
}

.tag-blue {
    background: #DBEAFE;
    color: #1D4ED8;
}

.tag-green {
    background: #DCFCE7;
    color: #15803D;
}

.tag-yellow {
    background: #FFFBEB;
    color: #B45309;
}

.tag-red {
    background: #FEE2E2;
    color: #B91C1C;
}

.tag-gray,
.tag-neutral {
    background: #F1F5F9;
    color: #475569;
}

.tag-disabled {
    background: #F3F5F7;
    color: #B0BBC8;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 10px;
    border-radius: var(--radius-xs);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.badge-orange {
    background: var(--brand-primary-light);
    color: var(--brand-primary);
}

.badge-blue {
    background: #E0F2FE;
    color: #0369A1;
}

.badge-green {
    background: #DCFCE7;
    color: #15803D;
}

.badge-yellow {
    background: #FFFBEB;
    color: #B45309;
}

.badge-red {
    background: #FEE2E2;
    color: #B91C1C;
}

.badge-gray {
    background: #F1F5F9;
    color: #475569;
}

.status-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dot-orange {
    background-color: var(--brand-primary);
}

.dot-blue {
    background-color: #1D4ED8;
}

.dot-green {
    background-color: #15803D;
}

.dot-yellow {
    background-color: #eddf6c;
}

.dot-red {
    background-color: #ff3333;
}

.dot-gray {
    background-color: #94A3B8;
}

/* =====================================================
   Table cell buttons (Html / Button:Html) — FO/BO sync
   네이티브 IBSheet AddClass 변형은 wego-ibsheet-shield.css
===================================================== */
.wego-cell-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    box-sizing: border-box;
    margin: 0;
    min-width: 0;
    height: 26px;
    padding: 0 8px;
    border: 1px solid var(--btn-outline-border, #ddd);
    border-radius: 4px;
    background: var(--btn-outline-bg, #fff);
    color: var(--text-primary, #222);
    font-family: var(--wego-font-sans, inherit);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    vertical-align: middle;
}

.wego-cell-btn:hover {
    background: var(--btn-outline-hover-bg, #FFF4EC);
    border-color: var(--btn-outline-hover-border, #FDCFA4);
}

.wego-cell-btn--text {
    height: auto;
    padding: 0 2px;
    border: 0;
    background: transparent;
    color: var(--wego-color-blue, #2f6f9f);
    font-size: 13px;
    text-decoration: underline;
}

.wego-cell-btn--text:hover {
    background: transparent;
    border: 0;
    opacity: 0.85;
}

.wego-cell-btn--text.wego-cell-btn--danger {
    color: var(--btn-danger-fg, #E1002A);
}

.wego-cell-btn--icon {
    width: 28px;
    min-width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #555;
}

.wego-cell-btn--icon:hover {
    background: #f5f6f8;
    border: 0;
}

.wego-cell-btn--icon.wego-cell-btn--danger {
    color: var(--btn-danger-fg, #E1002A);
}

.wego-cell-btn--icon-text {
    padding: 0 10px;
}

.wego-cell-btn--primary {
    border-color: var(--btn-primary-border, #EF7620);
    background: var(--btn-primary-bg, #EF7620);
    color: var(--btn-primary-fg, #fff);
}

.wego-cell-btn--primary:hover {
    background: var(--btn-primary-bg-hover, #D96510);
    border-color: var(--btn-primary-bg-hover, #D96510);
}

.wego-cell-btn--round {
    width: 28px;
    min-width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 50%;
}

.wego-cell-btn--danger:not(.wego-cell-btn--text):not(.wego-cell-btn--icon):not(.wego-cell-btn--primary) {
    border-color: var(--brand-danger, #E1002A);
    color: var(--btn-danger-fg, #E1002A);
    background: #fff;
}

.wego-cell-btn--danger:not(.wego-cell-btn--text):not(.wego-cell-btn--icon):not(.wego-cell-btn--primary):hover {
    background: var(--btn-danger-hover-bg, #FEF2F2);
    border-color: var(--brand-danger, #E1002A);
}

.wego-cell-btn--primary.wego-cell-btn--danger {
    border-color: var(--brand-danger, #E1002A);
    background: var(--brand-danger, #E1002A);
    color: #fff;
}

.wego-cell-btn:disabled,
.wego-cell-btn[aria-disabled="true"] {
    opacity: var(--btn-disabled-opacity, 0.38);
    cursor: not-allowed;
    pointer-events: none;
}

.wego-cell-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    vertical-align: middle;
}

.wego-cell-action .status-badge {
    flex-shrink: 0;
}

/* ECR STEP1: PDF 다운로드 + 품의 불러오기 버튼 동일 크기 */
.ecr-apv-action-btns {
    display: inline-flex;
    gap: 6px;
    align-items: stretch;
    flex-shrink: 0;
}
.ecr-apv-action-btns > .Button.btn_mini {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 132px;
    height: 24px;
    padding: 0 10px;
    white-space: nowrap;
}