/* /Components/SellerStepUpModal.razor.rz.scp.css */
/* step-up 모달 다이얼로그 — sl-scrim 위 중앙 카드(SellerTransfer 반려 모달과 동일 배치). */
.sl-stepup[b-edduxkyru0] {
    position: relative;
    z-index: 901;
    width: min(420px, calc(100vw - 32px));
    margin: 12vh auto 0;
}

/* 인증 코드 입력 — 6자리 가독성(자간·중앙정렬·큰 글자). */
.sl-stepup__code[b-edduxkyru0] {
    letter-spacing: 8px;
    text-align: center;
    font-size: 19px;
    font-weight: 700;
}

/* 안내 문구 · 오류 · 하단 버튼 줄 — 인라인으로 흩어져 있던 여백을 옮겼다(2026-08-27). */
.sl-stepup__msg[b-edduxkyru0] { margin: 0 0 16px; }
.sl-stepup__err[b-edduxkyru0] { margin-top: 12px; }
.sl-stepup__foot[b-edduxkyru0] { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; }
/* /Components/SellerTemplateEditorModal.razor.rz.scp.css */
/* lean 상세설명 편집기 모달 — seller.css 디자인 토큰 재사용(BEM xte__*).
   Bootstrap modal 미사용. sl-scrim(글로벌) 위에 자체 풀스크린 패널.
   transition: all 금지(구체 속성만). */

.xte[b-2ehd1jjzc3] {
    position: fixed;
    inset: 0 0 0 auto;          /* 우측 사이드 드로어 (image 3) */
    z-index: 902;
    width: min(760px, 96vw);
    height: 100%;
    background: var(--color-surface);
    border-left: 1px solid var(--color-border);
    box-shadow: var(--shadow-xl);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    transform: translateX(28px);
    animation: xte-in-b-2ehd1jjzc3 var(--gudoc-duration-3, 220ms) var(--gudoc-ease-emphasis, ease) forwards;
}

@keyframes xte-in-b-2ehd1jjzc3 {
    to { opacity: 1; transform: translateX(0); }
}

.xte__bar[b-2ehd1jjzc3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

.xte__title[b-2ehd1jjzc3] {
    font-size: 15px;
    font-weight: 800;
    color: var(--color-text-strong);
    display: flex;
    align-items: center;
    gap: 8px;
}

.xte__title i[b-2ehd1jjzc3] { color: var(--color-brand-text); }

.xte__baracts[b-2ehd1jjzc3] { display: flex; gap: 8px; }

.xte__body[b-2ehd1jjzc3] {
    flex: 1;
    overflow-y: auto;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ── 툴바(미리보기/HTML 토글) ── */
.xte__toolbar[b-2ehd1jjzc3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.xte__seg[b-2ehd1jjzc3] {
    display: flex;
    background: var(--color-surface-sunken);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 3px;
}

.xte__seg button[b-2ehd1jjzc3] {
    padding: 7px 14px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    font-size: 12.5px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.xte__seg button.is-on[b-2ehd1jjzc3] {
    background: var(--color-surface-raised);
    color: var(--color-text-strong);
    box-shadow: var(--shadow-xs);
}

.xte__count[b-2ehd1jjzc3] { font-weight: 600; }
.xte__count--over[b-2ehd1jjzc3] { color: var(--color-danger); }

/* ── textarea / 미리보기 ── */
.xte__textarea[b-2ehd1jjzc3] {
    min-height: 360px;
    font-family: var(--gudoc-font-mono, monospace);
    font-size: 13px;
    line-height: 1.6;
    resize: vertical;
}

.xte__textarea--over[b-2ehd1jjzc3] { border-color: var(--color-danger); }

.xte__preview[b-2ehd1jjzc3] {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: #fff;
    color: #111;
    padding: 18px;
    min-height: 360px;
    max-height: 56vh;
    overflow-y: auto;
    word-break: break-word;
}

.xte__preview img[b-2ehd1jjzc3] { max-width: 100%; height: auto; }
.xte__preview *[b-2ehd1jjzc3] { max-width: 100%; }

.xte__preview--code[b-2ehd1jjzc3] {
    background: var(--color-surface-sunken);
    color: var(--color-text-muted);
    font-family: var(--gudoc-font-mono, monospace);
    font-size: 12px;
    white-space: pre-wrap;
}

.xte__empty[b-2ehd1jjzc3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 320px;
    color: var(--color-text-subtle);
}

.xte__empty i[b-2ehd1jjzc3] { font-size: 32px; opacity: 0.6; }
.xte__empty p[b-2ehd1jjzc3] { font-size: 13px; margin: 0; }

/* ── 템플릿 필터/갤러리 ── */
.xte__filters[b-2ehd1jjzc3] {
    display: grid;
    grid-template-columns: 1fr 1fr 1.4fr;
    gap: 12px;
    align-items: end;
}

.xte__filters-search[b-2ehd1jjzc3] { grid-column: auto; }

.xte__grid[b-2ehd1jjzc3] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}

.xte__tcard[b-2ehd1jjzc3] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
    border: 1.5px solid var(--color-border);
    border-radius: 13px;
    background: var(--color-surface);
    text-align: left;
    cursor: pointer;
}

.xte__tcard:hover[b-2ehd1jjzc3] {
    border-color: var(--color-brand);
    background: var(--color-brand-subtle);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.xte__tcard-img[b-2ehd1jjzc3] {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    border-radius: 9px;
}

.xte__tcard-noimg[b-2ehd1jjzc3] {
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 9px;
    background: var(--color-surface-sunken);
    display: grid;
    place-items: center;
    color: var(--color-text-subtle);
    font-size: 24px;
}

.xte__tcard-name[b-2ehd1jjzc3] { font-size: 13px; font-weight: 700; color: var(--color-text-strong); }
.xte__tcard-cat[b-2ehd1jjzc3] { font-size: 11.5px; color: var(--color-text-subtle); }

/* ── 디자인 mock 템플릿 카드(register.js DESC_TEMPLATES 스타일) ── */
.xte__tgrid[b-2ehd1jjzc3] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 14px;
    margin-top: 14px;
}
.xte__tpl[b-2ehd1jjzc3] {
    display: flex;
    flex-direction: column;
    text-align: left;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
    background: var(--color-surface);
    cursor: pointer;
    padding: 0;
    font-family: inherit;
    transition: border-color var(--gudoc-duration-2), box-shadow var(--gudoc-duration-2);
}
.xte__tpl:hover[b-2ehd1jjzc3] { border-color: var(--color-brand); }
.xte__tpl.is-on[b-2ehd1jjzc3] { border-color: var(--color-brand); box-shadow: 0 0 0 2px var(--color-brand-subtle); }
.xte__tpl-pv[b-2ehd1jjzc3] {
    height: 92px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.3;
}
.xte__tpl-info[b-2ehd1jjzc3] { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 5px; }
.xte__tpl-badge[b-2ehd1jjzc3] {
    align-self: flex-start;
    font-size: 10.5px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--color-surface-sunken);
    color: var(--color-text-muted);
}
.xte__tpl-badge--detail[b-2ehd1jjzc3] { background: var(--color-brand-subtle); color: var(--color-brand-text); }
.xte__tpl-badge--seasonal[b-2ehd1jjzc3] { background: var(--color-warning-subtle, #fff4e5); color: var(--color-warning, #b45309); }
.xte__tpl-name[b-2ehd1jjzc3] { font-size: 14px; font-weight: 800; color: var(--color-text-strong); }
.xte__tpl-desc[b-2ehd1jjzc3] { font-size: 12px; color: var(--color-text-muted); line-height: 1.45; }
.xte__tpl-foot[b-2ehd1jjzc3] { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; font-size: 11.5px; color: var(--color-text-subtle); }
.xte__tpl-use[b-2ehd1jjzc3] { display: inline-flex; align-items: center; gap: 4px; }

/* ── 변수폼 + 미리보기 2분할 ── */
.xte__cust-head[b-2ehd1jjzc3] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.xte__cust-name[b-2ehd1jjzc3] { font-size: 14px; font-weight: 700; color: var(--color-text-strong); }

.xte__split[b-2ehd1jjzc3] {
    display: grid;
    grid-template-columns: minmax(0, 380px) 1fr;
    gap: 18px;
    align-items: start;
}

.xte__vars[b-2ehd1jjzc3] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.xte__pvwrap[b-2ehd1jjzc3] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: sticky;
    top: 0;
}

.xte__imgvar[b-2ehd1jjzc3] { gap: 8px; }

.xte__imgrow[b-2ehd1jjzc3] { display: flex; gap: 8px; align-items: stretch; }
.xte__imgrow .sl-input[b-2ehd1jjzc3] { flex: 1; }

.xte__imgprev[b-2ehd1jjzc3] {
    width: 100%;
    max-height: 140px;
    object-fit: contain;
    border: 1px solid var(--color-border);
    border-radius: 9px;
    background: var(--color-surface-sunken);
    padding: 4px;
}

.xte__color[b-2ehd1jjzc3] { display: flex; gap: 6px; align-items: stretch; }
.xte__color .sl-input[b-2ehd1jjzc3] { flex: 1; }

.xte__colorpick[b-2ehd1jjzc3] {
    width: 46px;
    height: 40px;
    padding: 3px;
    border: 1px solid var(--color-border);
    border-radius: 9px;
    background: var(--color-surface-sunken);
    cursor: pointer;
}

@media (max-width: 860px) {
    .xte[b-2ehd1jjzc3] { width: 96vw; height: 92vh; border-radius: 14px; }
    .xte__filters[b-2ehd1jjzc3] { grid-template-columns: 1fr; }
    .xte__split[b-2ehd1jjzc3] { grid-template-columns: 1fr; }
    .xte__pvwrap[b-2ehd1jjzc3] { position: static; }
}

/* 상세 이미지 업로드 구역 — 인라인 여백을 옮겼다(2026-08-27). */
.xte__imgsub[b-2ehd1jjzc3] { margin-top: 14px; }
.xte__imgerr[b-2ehd1jjzc3] { margin-top: 8px; }