/* =========================================================
 * UV DTF 스티커 시안 페이지 전용
 * - 헤더 / 단계 / 주문정보 폼 / 모달 / 토스트는 키캡 시안 공용 CSS를 그대로 사용
========================================================= */

/* =========================================================
 * 텍스트 도구 폰트 (files/ 폴더에 직접 보관, woff2)
 * - 기본: 프리텐다드 미디움 / 굵게: KOHI 배움
 * - 둥근: 배달의민족 주아 / 손글씨: 그리운 코코초이툰
 * - 화면 UI용 Pretendard(CDN)와 섞이지 않게 이름을 따로 씀
========================================================= */
@font-face {
    font-family: 'StkPretendardMedium';
    src: url('../files/Pretendard-Medium.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'KOHIBaeum';
    src: url('../files/KOHIBaeum.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'BMJUA';
    src: url('../files/BMJUA.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'GriunCocochoitoon';
    src: url('../files/Griun_Cocochoitoon-Rg.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

.stickerPage {
    --stk-blue: #2563eb;
    --stk-red: #e5484d;
}

.stickerPage .headerLogo {
    width: 32px;
    height: 32px;
}

/* =========================================================
 * 이전 / 다음 단계 바 - 스크롤해도 상단에 고정
========================================================= */
.stickerPage .stepPageHeader {
    position: sticky;
    top: 0;
    z-index: 40;
    padding: 8px 2px;
}

/* 상단에 붙었을 때만 화면 가로 전체에 흰 배경 (box-shadow로 좌우 끝까지 확장) */
.stickerPage .stepPageHeader.is-stuck {
    background: #fff;
    box-shadow: 0 0 0 100vmax #fff;
    clip-path: inset(0 -100vmax);
}

/* =========================================================
 * 단계별 카드 표시
========================================================= */
body.stickerPage[data-step="editor"] .stkConfirmCard,
body.stickerPage[data-step="confirm"] .stkEditorCard {
    display: none !important;
}

body.stickerPage[data-step="editor"] .stkEditorCard {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
}

/* =========================================================
 * 1단계 - 용지 사이즈 원형 체크
========================================================= */
.stkPaperOptions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    border-radius: 16px;
}

.stkPaperOptions.isInvalid .stkPaperOption {
    border-color: rgba(217, 45, 32, 0.6);
}

.kidikidiBootstrap .stkPaperOption {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 10px 12px;
    margin: 0;
    padding: 14px 16px;
    border: 1.5px solid var(--line);
    border-radius: 16px;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.stkPaperOption:hover {
    border-color: #5fb86a;
}

.stkPaperOption input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.stkRadioDot {
    width: 22px;
    height: 22px;
    border: 2px solid #c5cad6;
    border-radius: 50%;
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.stkPaperShape {
    grid-row: 1 / span 2;
    grid-column: 2;
    justify-self: end;
    width: 28px;
    border: 1.5px solid #c5cad6;
    border-radius: 3px;
    background: repeating-conic-gradient(#eef0f4 0 25%, #fff 0 50%) 0 0 / 8px 8px;
}

.stkPaperText {
    grid-column: 1 / span 2;
    display: grid;
    gap: 2px;
}

.stkPaperText b {
    font-size: 18px;
    line-height: 1.2;
}

.stkPaperText small {
    color: var(--muted);
    font-size: 12px;
}

.stkPaperOption:has(input:checked) {
    border-color: #5fb86a;
    background: #eef8ef;
    box-shadow: 0 0 0 3px rgba(123, 203, 132, 0.25);
}

.stkPaperOption input:checked + .stkRadioDot {
    border-color: #111827;
    box-shadow: inset 0 0 0 5px #fff, inset 0 0 0 12px #111827;
}

.stkPaperOption input:focus-visible + .stkRadioDot {
    box-shadow: var(--focus-ring);
}

.stkPaperOption input:disabled ~ * {
    opacity: 0.6;
}

/* =========================================================
 * 1단계 - 이메일 도메인 추천 목록
 * - top을 지정하지 않아 입력칸 바로 아래(원래 자리)에 겹쳐서 표시
========================================================= */
.stkEmailField {
    position: relative;
}

.stkEmailSuggest {
    position: absolute;
    right: 0;
    z-index: 50;
    width: 100%;
    min-width: 240px;
    display: grid;
    margin-top: 4px;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(16, 24, 40, 0.12);
}

.stkEmailSuggest[hidden] {
    display: none;
}

.kidikidiBootstrap .stkEmailOption {
    width: 100%;
    min-height: 40px;
    padding: 8px 12px;
    border: 0;
    border-radius: 10px;
    background: #fff;
    color: var(--txt);
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kidikidiBootstrap .stkEmailOption b {
    color: #2f7a3a;
    font-weight: 700;
}

.kidikidiBootstrap .stkEmailOption:hover,
.kidikidiBootstrap .stkEmailOption.is-active {
    background: #eef8ef;
}

/* =========================================================
 * 2단계 - 제작 화면 레이아웃
========================================================= */
.kidikidiBootstrap .stkEditorCard {
    padding: 20px;
}

.stkEditorWrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 20px;
    align-items: start;
}

.stkCanvasCol {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.stkPill {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fafbfd;
    font-size: 13px;
}

.stkTag {
    padding: 2px 8px;
    border-radius: 999px;
    background: #eef0f4;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
}

.stkTag:not(:first-child) {
    margin-left: 6px;
}

.kidikidiBootstrap .stkPillBtn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: auto;
    min-height: 34px;
    padding: 4px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--txt);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.kidikidiBootstrap .stkPillBtn:hover:not(:disabled) {
    border-color: #111827;
}

.kidikidiBootstrap .stkPillBtnDanger {
    color: var(--bad);
}

.kidikidiBootstrap .stkPillBtnDanger:hover:not(:disabled) {
    border-color: var(--bad);
}

.kidikidiBootstrap .stkPillBtn:disabled {
    opacity: 0.45;
    cursor: default;
}

.stkPillHint {
    color: var(--muted);
    font-size: 11px;
}

.stkPillActions {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.stkCanvasWrap {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    padding: 12px 0;
    border-radius: 16px;
    background: #eef0f4;
}

#stickerCanvas {
    display: block;
    max-width: 100%;
    border-radius: 2px;
    box-shadow: 0 6px 24px rgba(16, 24, 40, 0.14);
    touch-action: none;
    cursor: default;
    outline: none;
}

.stkCmykChip {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(17, 24, 39, 0.82);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    pointer-events: none;
}

/* =========================================================
 * 도구 패널
========================================================= */
.stkToolCol {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.stkToolDock {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.stkPanel {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
}

/* 선택한 스티커 칸 - 포인트 초록 계열로 통일 */
.stkSelPanel {
    border-color: #b5e2ba;
    background: #eef8ef;
}

.stkSelPanel input[type="checkbox"] {
    accent-color: #5fb86a;
}

.kidikidiBootstrap .stkSelPanel .form-control {
    border-color: #b5e2ba;
}

.kidikidiBootstrap .stkSelPanel .form-control:focus {
    border-color: #5fb86a;
    box-shadow: 0 0 0 0.2rem rgba(123, 203, 132, 0.3);
}

.kidikidiBootstrap .stkSelPanel .btn-outline-secondary,
.kidikidiBootstrap .stkSelPanel .btn-outline-danger {
    border-color: #7bcb84 !important;
    background: #fff !important;
    color: #2f7a3a !important;
}

.kidikidiBootstrap .stkSelPanel .btn-outline-secondary:hover:not(:disabled),
.kidikidiBootstrap .stkSelPanel .btn-outline-danger:hover:not(:disabled) {
    border-color: #5fb86a !important;
    background: #e3f4e5 !important;
}

.stkPanelHead {
    display: grid;
    gap: 2px;
}

.stkPanelHead b {
    font-size: 14px;
}

.stkSelBody {
    display: grid;
    gap: 8px;
}

.stkSelBody[hidden],
.stkSelSize[hidden],
.stkBtnRow .btn[hidden],
.stkSelPanel[hidden],
.stkFillInfo[hidden],
.stkMuted[hidden],
.stkWarn[hidden] {
    display: none !important;
}

.stkMuted {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
}

.stkWarn {
    margin: 0;
    padding: 8px 10px;
    border-radius: 10px;
    background: #fffaeb;
    color: #b54708;
    font-size: 12px;
    line-height: 1.5;
}

.stkFieldHint {
    font-size: 11px;
}

.stkFieldGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 10px;
    align-items: end;
}

.kidikidiBootstrap .stkField {
    display: grid;
    gap: 4px;
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
}

/* 자동 배치: 가로 / 세로 / 여백 한 줄 */
.stkFieldGrid.stkFillFields {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.stkField .form-control {
    height: 38px;
    font-size: 14px;
    color: var(--txt);
}

.stkField .form-control-color {
    width: 100%;
    padding: 4px;
}

.kidikidiBootstrap .stkCheck {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    margin: 0;
    font-size: 13px;
    cursor: pointer;
}

.stkBtnRow {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.stkBtnRow .btn {
    flex: 1 1 auto;
}

.stkTabRow {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.kidikidiBootstrap .stkTab {
    flex: 1 1 auto;
    width: auto;
    min-height: 36px;
    padding: 6px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--txt);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.kidikidiBootstrap .stkTab.is-active {
    border-color: #111827;
    background: #111827;
    color: #fff;
}

.stkToolPanel {
    display: none;
}

.stkToolPanel.is-active {
    display: grid;
}

.stkHelpLine {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.stkHelpLine span {
    padding: 3px 8px;
    border-radius: 999px;
    background: #f2f4f7;
    color: var(--muted);
    font-size: 11px;
}

/* 스티커 카테고리 버튼
   - PC: 넘치면 다음 줄로 (마우스로는 옆으로 넘길 수 없어서)
   - 모바일(768px 이하): 한 줄로 두고 손가락으로 옆으로 넘겨보기 */
.stkCatRow {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 -2px;
    padding: 2px;
}

@media (max-width: 768px) {
    .stkCatRow {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .stkCatRow::-webkit-scrollbar {
        display: none;
    }
}

.kidikidiBootstrap .stkCatBtn {
    flex: 0 0 auto;
    width: auto;
    min-height: 30px;
    padding: 4px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--txt);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

.kidikidiBootstrap .stkCatBtn.is-active {
    border-color: #5fb86a;
    background: #7bcb84;
    color: #111827;
}

/* 스티커 목록 - 2줄까지만 보이고 나머지는 스크롤
   (3번째 줄이 살짝 보이게 해서 아래에 더 있다는 걸 알 수 있게)
   - 칸이 정사각형이라 패널 너비(cqi)로 한 줄 높이를 계산 */
#toolLibrary {
    container-type: inline-size;
}

.stkLibraryGrid {
    --stk-lib-cols: 4;
    --stk-lib-gap: 8px;
    --stk-lib-cell: calc((100cqi - (var(--stk-lib-cols) - 1) * var(--stk-lib-gap)) / var(--stk-lib-cols));
    display: grid;
    grid-template-columns: repeat(var(--stk-lib-cols), minmax(0, 1fr));
    grid-auto-rows: var(--stk-lib-cell);
    gap: var(--stk-lib-gap);
    max-height: calc(var(--stk-lib-cell) * 2.35 + var(--stk-lib-gap) * 2);
    overflow-y: auto;
    scrollbar-width: thin;
}

/* 그림만 보이는 정사각형 칸 (이름은 마우스를 올리면 툴팁으로) */
.kidikidiBootstrap .stkLibraryItem {
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 0;
    aspect-ratio: 1;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: repeating-conic-gradient(#f3f4f7 0 25%, #fff 0 50%) 0 0 / 12px 12px;
    font-size: 12px;
    cursor: pointer;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.stkLibraryItem:hover {
    border-color: #5fb86a;
    transform: translateY(-1px);
}

.stkLibraryItem img {
    width: 100%;
    max-width: 56px;
    height: 100%;
    max-height: 56px;
    object-fit: contain;
}

.stkFontRow {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.kidikidiBootstrap .stkFontBtn {
    width: auto;
    padding: 6px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    font-size: 14px;
    cursor: pointer;
}

/* 폰트 버튼은 각 폰트 모양 그대로 보이게
   (공용 CSS의 #toolText * 폰트 고정 규칙보다 우선) */
body.kidikidiBootstrap #toolText .stkFontBtn {
    font-family: var(--stk-font-family) !important;
    font-weight: var(--stk-font-weight) !important;
}

.kidikidiBootstrap .stkFontBtn.is-active {
    border-color: #111827;
    background: #111827;
    color: #fff;
}

/* 글자 색상 9개를 한 줄로 (좁은 화면에서는 동그라미가 함께 작아짐) */
.stkColorRow {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 30px));
    gap: 8px;
}

.kidikidiBootstrap .stkColorBtn {
    width: 100% !important;
    min-height: 0;
    height: auto;
    aspect-ratio: 1;
    padding: 0;
    border: 1px solid rgba(17, 24, 39, 0.18);
    border-radius: 50%;
    background: var(--swatch);
    cursor: pointer;
}

.kidikidiBootstrap .stkColorBtn.is-active {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #111827;
}

.stkFillInfo {
    margin: 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: #f8fafc;
    font-size: 13px;
}

/* 총 개수 강조 (포인트 색상) */
.stkFillTotal {
    display: inline-block;
    padding: 1px 9px;
    border-radius: 999px;
    background: #7bcb84;
    color: #111827;
    font-size: 16px;
    font-weight: 800;
}

/* =========================================================
 * 3단계 - 시안 확인
========================================================= */
.kidikidiBootstrap .stkConfirmCard {
    display: grid;
    gap: 14px;
    padding: 20px;
}

.stkConfirmPreview {
    display: flex;
    justify-content: center;
    padding: 16px;
    border-radius: 16px;
    background: #eef0f4;
}

#confirmCanvas {
    display: block;
    max-width: 100%;
    box-shadow: 0 6px 24px rgba(16, 24, 40, 0.14);
}

.stkConfirmInfo {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
}

.stkConfirmInfo div {
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fafbfd;
}

.stkConfirmInfo dt {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
}

.stkConfirmInfo dd {
    margin: 2px 0 0;
    font-size: 14px;
    font-weight: 700;
    word-break: keep-all;
}

.stkConfirmNote {
    text-align: center;
}

/* =========================================================
 * 용지 변경 모달
========================================================= */
.stkPaperModal {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: none;
}

.stkPaperModal.is-open {
    display: block;
}

.stkPaperModalDim {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.42);
}

.stkPaperModalDialog {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    gap: 12px;
    width: min(520px, calc(100vw - 32px));
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    transform: translate(-50%, -50%);
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.16);
}

.stkPaperModalDialog h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
}

.stkAskText {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    word-break: keep-all;
}

.stkModalActions {
    margin-top: 4px;
}

/* =========================================================
 * 푸터 - 아이콘 출처 (Flaticon 저작자 표시)
========================================================= */
.footerCredit {
    max-width: 1440px;
    margin: 12px auto 0;
    color: #98a2b3;
    font-size: 11px;
    line-height: 1.6;
    text-align: center;
    word-break: keep-all;
}

.footerCredit summary {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #667085;
    cursor: pointer;
    list-style: none;
}

.footerCredit summary::-webkit-details-marker {
    display: none;
}

/* 펼침 표시 화살표 */
.footerCredit summary::after {
    content: "";
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.15s ease;
}

.footerCredit[open] summary::after {
    transform: translateY(1px) rotate(-135deg);
}

.footerCredit p {
    max-width: 960px;
    margin: 8px auto 0;
}

.footerCredit a {
    color: #667085;
    text-decoration: underline;
}

/* =========================================================
 * 접수 완료 잠금
========================================================= */
body.isStickerLocked #stickerCanvas {
    pointer-events: none;
    opacity: 0.6;
}

/* 패널 접기 버튼은 모바일 전용 */
.stkPanelToggle {
    display: none;
}

/* =========================================================
 * 반응형
========================================================= */
@media (max-width: 1024px) {
    .stkEditorWrap {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* 모바일: 도구 탭 + 패널을 캔버스 위로 올리고 스크롤해도 상단에 고정 */
@media (max-width: 768px) {
    .stkToolCol {
        display: contents;
    }

    /* 단계 바 높이를 고정해서 도구 패널이 바로 아래에 붙게 */
    .stickerPage .stepPageHeader {
        height: 56px;
    }

    .stkToolDock {
        position: sticky;
        top: 56px;
        z-index: 30;
        order: -1;
        gap: 8px;
        padding: 8px 0;
        background: #fff;
        box-shadow: 0 8px 12px -10px rgba(16, 24, 40, 0.25);
    }

    /* 패널 안 스크롤이 끝까지 가면 페이지가 이어서 스크롤되도록 둠
       (overscroll-behavior: contain을 쓰면 패널 위를 끌어도 페이지가 안 움직임) */
    .stkToolDock .stkToolPanel {
        max-height: 30vh;
        overflow-y: auto;
    }

    /* 이미지 / 스티커 / 텍스트 패널 접기 (자동 배치는 항상 펼침) */
    .stkToolDock.is-collapsed .stkToolPanel:not(#toolFill) {
        display: none !important;
    }

    .kidikidiBootstrap .stkPanelToggle {
        display: block;
        width: 100%;
        min-height: 30px;
        padding: 4px 0;
        border: 1px dashed var(--line);
        border-radius: 10px;
        background: #fafbfd;
        color: var(--muted);
        font-size: 12px;
        font-weight: 700;
        cursor: pointer;
    }

    .stkPanelToggle[hidden] {
        display: none !important;
    }

    /* 용지 / 뒤로가기 / 초기화 줄 - 선택한 스티커 줄 아래에 한 줄로 고정 */
    .stkToolDock .stkPill {
        order: 2;
        min-width: 0;
        flex-wrap: nowrap;
        padding: 6px 8px;
        border-radius: 12px;
        white-space: nowrap;
    }

    .stkToolDock .stkPillActions {
        flex: 0 0 auto;
        gap: 6px;
    }

    /* 좁은 화면에서는 용지 이름이 말줄임으로 줄어들고 버튼은 그대로 */
    .stkToolDock .stkPill #paperText {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .kidikidiBootstrap .stkToolDock .stkPillBtn {
        min-height: 32px;
        padding: 4px 12px;
        font-size: 12px;
    }

    /* 글씨 스타일 버튼 4개를 한 줄로 */
    .stkFontRow {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .kidikidiBootstrap .stkFontBtn {
        width: 100%;
        padding: 6px 4px;
        font-size: 13px;
        white-space: nowrap;
    }

    /* 스티커 목록은 한 줄 5개로 줄여서 패널 길이를 줄임 */
    .stkLibraryGrid {
        --stk-lib-cols: 5;
        --stk-lib-gap: 6px;
    }

    .kidikidiBootstrap .stkLibraryItem {
        padding: 6px;
    }

    /* 선택한 스티커: 제목 없이 한 줄로 탭 패널 아래에 고정
       - 선택이 없어도 자리를 유지(비활성)해서, 스티커를 누를 때 캔버스가 밀리지 않게 */
    .stkToolDock .stkSelPanel.stkSelPanel[hidden],
    .stkToolDock .stkSelPanel .stkSelBody[hidden] {
        display: flex !important;
    }

    .stkToolDock .stkSelPanel {
        order: 1;
        display: flex;
        padding: 6px 8px;
        border-radius: 12px;
    }

    .stkToolDock .stkSelPanel .stkPanelHead,
    .stkToolDock .stkSelPanel .stkUnit {
        display: none;
    }

    .stkToolDock .stkSelBody {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
        width: 100%;
    }

    .stkToolDock .stkSelSize {
        display: flex;
        flex: 1 1 0;
        align-items: center;
        gap: 6px;
        min-width: 0;
    }

    .kidikidiBootstrap .stkToolDock .stkSelSize .stkField {
        display: flex;
        flex: 1 1 0;
        align-items: center;
        gap: 4px;
        min-width: 0;
        margin: 0;
        font-size: 11px;
        white-space: nowrap;
    }

    .kidikidiBootstrap .stkToolDock .stkSelSize .form-control {
        min-width: 0;
        height: 34px !important;
        min-height: 34px !important;
        padding: 4px 6px;
        border-radius: 10px;
        font-size: 13px;
    }

    .kidikidiBootstrap .stkToolDock .stkSelSize .stkCheck {
        flex: 0 0 auto;
        gap: 4px;
        height: 34px;
        font-size: 11px;
        white-space: nowrap;
    }

    .stkToolDock .stkSelBody .stkBtnRow {
        flex: 0 0 auto;
        flex-wrap: nowrap;
        gap: 6px;
    }

    .kidikidiBootstrap .stkToolDock .stkSelBody .btn {
        min-height: 34px;
        height: 34px;
        padding: 0 10px;
        border-radius: 10px;
        font-size: 12px;
    }

    .stkToolDock .stkSelBody .stkWarn {
        flex-basis: 100%;
        padding: 4px 8px;
        font-size: 11px;
    }
}

@media (max-width: 640px) {
    .kidikidiBootstrap .stkEditorCard,
    .kidikidiBootstrap .stkConfirmCard {
        padding: 12px;
    }

    .stkPaperOptions {
        gap: 8px;
    }

    .kidikidiBootstrap .stkPaperOption {
        padding: 12px 10px;
        gap: 8px;
    }

    .stkPaperText b {
        font-size: 16px;
    }

    .stkPaperText small {
        font-size: 11px;
    }

    .stkPaperShape {
        width: 20px;
    }

    .stkCanvasWrap {
        padding: 8px 0;
    }

    /* 모바일: 주문번호 / 용지 / 배치한 스티커를 미리보기 위에 한 줄로 */
    .stkConfirmInfo {
        order: -1;
        display: flex;
        gap: 6px;
    }

    .stkConfirmInfo div {
        flex: 1 1 auto;
        min-width: 0;
        padding: 8px 10px;
    }

    .stkConfirmInfo div:last-child {
        flex: 0 0 auto;
    }

    .stkConfirmInfo dt {
        white-space: nowrap;
    }

    .stkConfirmInfo dd {
        font-size: 13px;
        overflow-wrap: anywhere;
    }

    .stkConfirmSub {
        display: none;
    }

    .stkConfirmPreview {
        padding: 8px;
    }
}