/* =========================================================
 * responsive-editor.css
 * bootstrap-wizard.css에서 이동한 반응형(캔버스/텍스트/배경 도구) 스타일
 * responsive.css와 로드 순서가 이어져야 케스케이드가 동일하게 유지됨
========================================================= */

/* =========================================================
   bootstrap-wizard.css에서 이동한 반응형 스타일
   - 기본 스타일은 bootstrap-wizard.css에 두고, @media만 여기서 통합 관리
========================================================= */
@media (max-width: 1024px) {
    .kidikidiBootstrap .editorWrap {
        grid-template-columns: minmax(0, 1fr);
    }

    .kidikidiBootstrap .cartStepFrame {
        order: 2;
    }
}

@media (max-width: 768px) {
    .kidikidiBootstrap .wizardSteps {
        gap: 10px;
        justify-content: flex-start;
    }

    .kidikidiBootstrap .wizardStep {
        gap: 6px;
        padding: 2px 0;
    }

    .kidikidiBootstrap .wizardStep::after {
        width: 12px;
        margin-left: 2px;
    }

    .kidikidiBootstrap .wizardStepNo {
        width: 22px;
        height: 22px;
        font-size: 11px;
    }

    .kidikidiBootstrap .wizardStep strong {
        font-size: 12px;
    }

    .kidikidiBootstrap .wizardStep small {
        display: inline;
        font-size: 11px;
    }

    .kidikidiBootstrap .stepPageHeader {
        grid-template-columns: 1fr;
        gap: 10px;
        text-align: center;
    }

    .kidikidiBootstrap .stepPageHeader .miniStepBtn {
        min-width: 0;
        width: 100% !important;
    }

    .kidikidiBootstrap .stepHeaderInfo .ghostBtn[disabled] {
        display: none;
    }

    .kidikidiBootstrap .stepIntroCard,
    .kidikidiBootstrap .editorStepCard {
        padding: 16px;
        border-radius: 20px;
    }

    .kidikidiBootstrap .optionSelectLine {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    /* 주문번호/이메일은 모바일에서는 한 줄씩 (이름/전화번호만 2열 유지) */
    .kidikidiBootstrap .rowOrderEmail {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .kidikidiBootstrap .canvasFrame {
        padding: 14px;
        border-radius: 18px !important;
    }

    .kidikidiBootstrap .editorActionBar {
        bottom: 10px;
    }
}

@media (max-width: 768px) {
    .kidikidiBootstrap .wizardSteps {
        justify-content: center !important;
        gap: 10px !important;
    }

    .kidikidiBootstrap .wizardStep small {
        display: none !important;
    }

    .kidikidiBootstrap .wizardStep::after {
        width: 12px !important;
        margin-left: 4px !important;
    }

    .kidikidiBootstrap .textToolGrid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 16px !important;
    }
}

@media (max-width: 768px) {
    .kidikidiBootstrap .wizardSteps {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 0 10px !important;
        width: 100% !important;
    }

    .kidikidiBootstrap .wizardStep {
        justify-content: center !important;
    }

    .kidikidiBootstrap .wizardStep::after {
        right: -10px !important;
        width: 10px !important;
    }

    .kidikidiBootstrap .wizardStep strong {
        font-size: 12px !important;
    }

    .kidikidiBootstrap .wizardStep small {
        display: none !important;
    }

    .kidikidiBootstrap .textToolGrid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 16px !important;
    }

    .kidikidiBootstrap .textToolSection {
        padding-right: 0 !important;
    }

    .kidikidiBootstrap .textFontBtn {
        min-width: 68px !important;
        padding: 8px 12px !important;
    }
}

@media (min-width: 1200px) {
    body.kidikidiBootstrap[data-step="editor"] .rightStack {
        max-width: 1220px !important;
    }

    body.kidikidiBootstrap[data-step="editor"] .editorWrap {
        grid-template-columns: minmax(0, 1fr) 360px !important;
    }
}

@media (max-width: 768px) {
    .kidikidiBootstrap .textFontRow {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 900px) {
    .kidikidiBootstrap .textToolGrid {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas:
            "input"
            "font"
            "color"
            "align" !important;
        gap: 18px !important;
    }

    .kidikidiBootstrap .textAlignRow {
        max-width: 100% !important;
    }
}

@media (max-width: 768px) {
    .kidikidiBootstrap .wizardSteps {
        grid-template-columns: repeat(3, 210px) !important;
        gap: 20px !important;
    }

    body.kidikidiBootstrap[data-step="info"] .wizardSteps {
        transform: translateX(230px) !important;
    }

    body.kidikidiBootstrap[data-step="editor"] .wizardSteps {
        transform: translateX(0) !important;
    }

    body.kidikidiBootstrap[data-step="confirm"] .wizardSteps {
        transform: translateX(-230px) !important;
    }

    .kidikidiBootstrap .wizardStep {
        width: 210px !important;
        min-width: 210px !important;
    }

    .kidikidiBootstrap .wizardStep small {
        display: none !important;
    }

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

@media (max-width: 768px) {
    /* 모바일 상단 조작줄: 이전 | 현재 단계명 | 다음 */
    /* 수정 이유: 시안 업로드 후 아래로 스크롤하면 "다음" 버튼이 화면 밖으로
       사라져서 매번 위로 스크롤해야 했음 - 스크롤 중에도 상단에 고정되도록 처리 */
    .kidikidiBootstrap .stepPageHeader,
    .kidikidiBootstrap .stepTopBar.stepPageHeader {
        display: grid !important;
        grid-template-columns: minmax(72px, 0.85fr) minmax(0, 1.3fr) minmax(72px, 0.85fr) !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 8px 4px !important;
        text-align: center !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 30 !important;
        background: var(--card, #fff) !important;
        box-shadow: 0 2px 6px rgba(16, 24, 40, 0.06) !important;
    }

    .kidikidiBootstrap .stepPageHeader .stepTitleBlock {
        min-width: 0 !important;
        text-align: center !important;
    }

    .kidikidiBootstrap .stepPageHeader h2 {
        margin: 0 !important;
        font-size: 15px !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .kidikidiBootstrap .stepPageHeader p {
        display: none !important;
    }

    .kidikidiBootstrap .stepPageHeader .miniStepBtn,
    .kidikidiBootstrap .stepPageHeader .ghostBtn,
    .kidikidiBootstrap .stepPageHeader .confirmBtn {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 38px !important;
        min-height: 38px !important;
        padding: 0 10px !important;
        border-radius: 999px !important;
        font-size: 12px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    /* 1단계의 비활성 이전 버튼도 자리를 유지해서 가운데 정렬이 흔들리지 않게 */
    .kidikidiBootstrap .stepHeaderInfo .ghostBtn[disabled] {
        display: inline-flex !important;
        visibility: hidden !important;
    }

    body.kidikidiBootstrap[data-step="confirm"] .stepHeaderEditor {
        display: none !important;
    }

    body.kidikidiBootstrap[data-step="editor"] .stepHeaderConfirm {
        display: none !important;
    }
}

/* =========================================================
   에디터 선택 핸들 모바일 보정
========================================================= */
@media (max-width: 768px) {
    .bbox .bboxActionGroup {
        top: -54px;
        gap: 8px;
    }

    .bbox .actionBtn {
        width: 38px;
        height: 38px;
        min-width: 38px;
        min-height: 38px;
        background-size: 20px 20px;
        border-radius: 11px;
    }

    .bbox .h {
        width: 16px;
        height: 16px;
    }

    .bbox .h.nw {
        top: -10px;
        left: -10px;
    }

    .bbox .h.ne {
        top: -10px;
        right: -10px;
    }

    .bbox .h.sw {
        bottom: -10px;
        left: -10px;
    }

    .bbox .h.se {
        right: -10px;
        bottom: -10px;
    }
}

/* =========================================================
   "시안 추가" 버튼 모바일 하단 고정
   - 수정 이유: 상단 이전/다음 버튼처럼 스크롤 중에도 항상 눌러서
     시안을 추가할 수 있도록 화면 하단에 고정. bootstrap-wizard-overrides.css
     의 !important position:static은 데스크탑용으로 그대로 두고(원인 불명의
     과거 버그를 되살리지 않기 위해), 가장 나중에 로드되는 이 파일의
     모바일 전용 규칙으로만 다시 고정시킨다. .editorMain은 모바일 1컬럼
     레이아웃에서 전체 스크롤 높이를 차지하지 않으므로 position:sticky가
     아니라 뷰포트 기준 position:fixed를 사용해야 스크롤 내내 고정된다.
========================================================= */
@media (max-width: 768px) {
    .kidikidiBootstrap .editorActionBar {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        z-index: 40 !important;
        margin: 0 !important;
        padding: 10px 12px !important;
        background: var(--card, #fff) !important;
        box-shadow: 0 -2px 10px rgba(16, 24, 40, 0.08) !important;
    }

    /* 하단 고정바에 카트 목록 마지막 항목/푸터가 가려지지 않도록 여유 공간 확보 */
    body.kidikidiBootstrap[data-step="editor"] {
        padding-bottom: 74px !important;
    }

    /* 토스트가 하단 고정바 뒤에 가려지지 않도록 위치를 올림 */
    .toastStack {
        bottom: 84px !important;
    }
}