*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      font-family: 'Noto Sans KR', sans-serif;
      background: #f0f0f0;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      overflow-x: hidden;
    }

    /* ── 툴바 ── */
    .toolbar {
      background: #fff;
      border-bottom: 1px solid #e0e0e0;
      padding: 6px 12px;
      display: flex;
      align-items: center;
      gap: 2px;
      flex-wrap: nowrap;
      overflow-x: auto;
      position: sticky;
      top: 0;
      z-index: 100;
      -webkit-overflow-scrolling: touch;
    }

    .tool-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      padding: 6px 8px;
      border: none;
      background: transparent;
      cursor: pointer;
      border-radius: 6px;
      color: #333;
      font-size: 10px;
      font-family: 'Noto Sans KR', sans-serif;
      transition: background 0.15s;
      white-space: nowrap;
      flex-shrink: 0;
    }
    .tool-btn:hover:not(:disabled) { background: #f0f0f0; }
    .tool-btn:disabled { color: #bbb; cursor: default; }
    .tool-btn svg { width: 22px; height: 22px; }
    .tb-divider { width: 1px; height: 36px; background: #e0e0e0; margin: 0 4px; flex-shrink: 0; }

    /* ── 캔버스 배경색 선택 ── */
    .canvas-color-wrap { position: relative; flex-shrink: 0; }
    .canvas-color-dot {
      width: 22px; height: 22px; border-radius: 50%;
      border: 2px solid #d0d0d0;
      background: #ffffff;
      margin: 0 auto 2px;
      transition: border-color 0.15s, background 0.15s;
    }
    .canvas-color-popup {
      display: none;
      position: fixed;
      background: #fff;
      border-radius: 14px;
      padding: 14px 14px 12px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.18);
      z-index: 9999; width: 240px;
      border: 1px solid #ebebeb;
    }
    .canvas-color-popup.visible { display: block; }
    .ccp-title {
      font-size: 11px; font-weight: 700; color: #222;
      text-align: center; margin-bottom: 10px; letter-spacing: 0.5px;
    }
    .ccp-swatches {
      display: grid; grid-template-columns: repeat(6, 28px); gap: 7px;
    }
    /* ── 커스텀 피커 ── */
    .ccp-divider {
      display: flex; align-items: center; gap: 6px;
      font-size: 10px; font-weight: 600; color: #c0c0c0;
      margin: 11px 0 9px; letter-spacing: 0.4px;
    }
    .ccp-divider::before, .ccp-divider::after {
      content: ''; flex: 1; height: 1px; background: #ebebeb;
    }
    .picker-sq-wrap {
      position: relative; border-radius: 5px; overflow: hidden;
      cursor: crosshair; margin-bottom: 8px; user-select: none;
    }
    .picker-sq-wrap canvas { display: block; }
    .picker-sq-cursor {
      position: absolute; width: 12px; height: 12px; border-radius: 50%;
      border: 2px solid #fff; box-shadow: 0 0 0 1.5px rgba(0,0,0,0.4);
      transform: translate(-50%,-50%); pointer-events: none;
      transition: border-color 0.1s;
    }
    .picker-hue-wrap {
      position: relative; border-radius: 5px; overflow: hidden;
      height: 14px; cursor: ew-resize; margin-bottom: 10px; user-select: none;
    }
    .picker-hue-wrap canvas { display: block; }
    .picker-hue-cursor {
      position: absolute; top: 0; bottom: 0; width: 4px;
      background: #fff; box-shadow: 0 0 0 1.5px rgba(0,0,0,0.4);
      border-radius: 2px; transform: translateX(-50%); pointer-events: none;
    }
    .picker-hex-row {
      display: flex; align-items: center; gap: 6px;
    }
    .picker-preview-swatch {
      width: 26px; height: 26px; border-radius: 5px;
      border: 1px solid #e0e0e0; flex-shrink: 0;
    }
    .picker-hex-field {
      flex: 1; display: flex; align-items: center;
      border: 1px solid #ddd; border-radius: 5px;
      padding: 0 8px; height: 28px; gap: 3px;
    }
    .picker-hex-field:focus-within { border-color: #999; }
    .picker-hash { color: #bbb; font-size: 12px; font-family: monospace; }
    .picker-hex-input {
      border: none; outline: none; width: 100%; background: transparent;
      font-size: 12px; font-family: 'DM Mono','Courier New',monospace;
      color: #333; text-transform: uppercase; letter-spacing: 0.5px;
    }
    .picker-apply-btn {
      height: 28px; padding: 0 12px; background: #222; color: #fff;
      border: none; border-radius: 5px; font-size: 11px;
      font-family: 'Noto Sans KR', sans-serif;
      cursor: pointer; white-space: nowrap; letter-spacing: 0.3px;
    }
    .picker-apply-btn:hover { background: #444; }
    .color-swatch {
      width: 28px; height: 28px; border-radius: 50%;
      cursor: pointer; border: 2.5px solid transparent;
      transition: transform 0.12s, border-color 0.12s;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .color-swatch:hover { transform: scale(1.18); }
    .color-swatch.selected { border-color: #222; }
    .swatch-none {
      background: #ffffff;
      border-color: #d0d0d0;
    }
    .swatch-none.selected { border-color: #222; }

    /* ── 스포이드(배경 채우기) ── */
    .canvas-outer.eyedropper-active canvas { cursor: crosshair !important; }
    .tool-btn.btn-active { background: #ede8f8 !important; color: #7c5cbf !important; }
    #eyedropper-preview {
      position: fixed; width: 52px; height: 52px; border-radius: 50%;
      border: 3px solid #fff; box-shadow: 0 2px 14px rgba(0,0,0,0.38), 0 0 0 1px rgba(0,0,0,0.15);
      pointer-events: none; z-index: 9999; display: none;
      transform: translate(-50%, -145%);
      transition: background 0.05s;
    }
    #eyedropper-preview::after {
      content: ''; position: absolute; bottom: -10px; left: 50%;
      transform: translateX(-50%);
      border: 5px solid transparent; border-top: 6px solid rgba(0,0,0,0.25);
    }
    #eyedropper-hint {
      display: none; position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
      background: rgba(30,30,30,0.82); color: #fff; font-size: 13px; font-weight: 500;
      padding: 9px 18px; border-radius: 20px; white-space: nowrap;
      backdrop-filter: blur(6px); z-index: 55; pointer-events: none;
      box-shadow: 0 2px 12px rgba(0,0,0,0.25);
    }

    /* 이미지 업로드 tooltip wrapper */
    .img-upload-wrap { position: relative; display: inline-block; }

    .img-tooltip {
      display: none;
      position: fixed;
      background: #fff;
      border: 1px solid #ddd;
      border-radius: 10px;
      padding: 14px 16px;
      width: 240px;
      box-shadow: 0 4px 18px rgba(0,0,0,0.13);
      font-size: 12px;
      color: #444;
      line-height: 1.7;
      z-index: 9999;
      pointer-events: none;
    }
    .img-tooltip::before {
      content: '';
      position: absolute;
      top: -7px;
      left: 50%;
      transform: translateX(-50%);
      border: 6px solid transparent;
      border-top: none;
      border-bottom-color: #ddd;
    }
    .img-upload-wrap:hover .img-tooltip { display: block; }

    /* ── 블리드 오버레이 ── */
    #bleed-overlay {
      display: none;
      position: absolute; inset: 0;
      pointer-events: none; z-index: 5;
    }

    /* ── 래핑 힌트 패널 ── */
    .wrap-hint {
      display: none;
      position: absolute; left: 16px; bottom: 24px;
      width: 460px; z-index: 20;
      background: #fff;
      border: 1.5px solid #333;
      border-radius: 12px;
      box-shadow: 0 4px 16px rgba(0,0,0,0.13);
      overflow: hidden;
    }
    .wrap-hint-head {
      background: #222; color: #fff;
      padding: 11px 16px; font-size: 13.5px; font-weight: 700;
      line-height: 1.5; position: relative;
    }
    .wrap-hint-close {
      position: absolute; top: 8px; right: 14px;
      cursor: pointer; font-size: 18px; opacity: 0.7;
      line-height: 1;
    }
    .wrap-hint-close:hover { opacity: 1; }
    .wrap-hint-body { padding: 14px 16px 16px; }
    .wrap-hint-visual {
      margin-bottom: 10px;
    }
    .wrap-hint-sub {
      font-size: 12px; color: #666; line-height: 1.7;
    }

    /* ── 메인 레이아웃 ── */
    .main-content {
      display: flex;
      flex: 1;
      min-height: 0;
      overflow: hidden;
    }

    /* ── 캔버스 영역 ── */
    .canvas-area {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px 20px;
      overflow: auto;
      position: relative;
    }

    /* PVC 반칼 전용 상품 선택기: 전체 패널 대신 작업판 오른쪽 위에 작게 표시 */
    .pvc-kisscut-product-switcher {
      position: absolute;
      top: 14px;
      right: 18px;
      z-index: 520;
      display: flex;
      align-items: center;
      gap: 8px;
      width: min(270px, calc(100% - 36px));
      padding: 8px 10px;
      border: 1px solid rgba(124,58,237,.18);
      border-radius: 11px;
      background: rgba(255,255,255,.97);
      box-shadow: 0 5px 18px rgba(38,31,45,.13);
      box-sizing: border-box;
      backdrop-filter: blur(7px);
    }
    .pvc-kisscut-product-switcher[hidden] { display: none; }
    .pvc-kisscut-product-switcher-label {
      flex: none;
      color: #756d7d;
      font-size: 10px;
      font-weight: 800;
      white-space: nowrap;
    }
    .pvc-kisscut-product-switcher > #csel-sticker-product {
      flex: 1;
      min-width: 0;
      margin: 0;
    }
    .pvc-kisscut-product-switcher > #csel-sticker-product .csel-trigger {
      min-height: 32px;
      padding: 0 9px;
      border-radius: 8px;
      font-size: 11px;
    }
    .pvc-kisscut-product-switcher > #csel-sticker-product .csel-list {
      right: 0;
      left: auto;
      width: min(360px, 62vw);
      max-height: min(360px, 62vh);
      z-index: 540;
    }

    .sr-only {
      position: absolute !important;
      width: 1px !important;
      height: 1px !important;
      padding: 0 !important;
      margin: -1px !important;
      overflow: hidden !important;
      clip: rect(0, 0, 0, 0) !important;
      white-space: nowrap !important;
      border: 0 !important;
    }
    .sheet-clone-guide {
      position: absolute;
      top: 92px;
      right: 22px;
      z-index: 505;
      display: flex;
      width: min(232px, calc(100% - 44px));
      padding: 16px;
      flex-direction: column;
      align-items: stretch;
      gap: 7px;
      border: 1px solid rgba(124,58,237,.20);
      border-radius: 14px;
      background: rgba(255,255,255,.98);
      box-shadow: 0 8px 24px rgba(38,31,45,.14);
      box-sizing: border-box;
      backdrop-filter: blur(8px);
      font-family: 'Noto Sans KR', sans-serif;
    }
    .sheet-clone-guide[hidden] { display: none !important; }
    .sheet-clone-guide-eyebrow {
      color: #7c3aed;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: .1px;
    }
    .sheet-clone-guide-title {
      color: #211a29;
      font-size: 18px;
      font-weight: 900;
      line-height: 1.25;
    }
    .sheet-clone-guide-description {
      margin: 0;
      color: #6b6373;
      font-size: 11px;
      font-weight: 650;
      line-height: 1.55;
    }
    .sheet-clone-guide-status {
      display: block;
      padding: 8px 9px;
      border-radius: 8px;
      background: #f7f3ff;
      color: #6d28d9;
      font-size: 10px;
      font-weight: 850;
      line-height: 1.4;
    }
    .sheet-layout-toolbar {
      position: absolute;
      top: 12px;
      right: 306px;
      left: 16px;
      z-index: 510;
      display: flex;
      min-width: 0;
      min-height: 66px;
      padding: 9px 12px;
      flex-direction: column;
      justify-content: center;
      gap: 5px;
      border: 1px solid rgba(124,58,237,.20);
      border-radius: 13px;
      background: rgba(255,255,255,.98);
      box-shadow: 0 6px 22px rgba(38,31,45,.12);
      box-sizing: border-box;
      backdrop-filter: blur(8px);
    }
    .sheet-layout-toolbar[hidden] { display: none; }
    .sheet-layout-toolbar-main {
      display: grid;
      grid-template-columns: max-content minmax(270px, 1fr) minmax(185px, auto);
      align-items: center;
      gap: 12px;
      min-width: 0;
    }
    .sheet-layout-toolbar-title {
      display: flex;
      flex-direction: column;
      gap: 1px;
      white-space: nowrap;
    }
    .sheet-layout-toolbar-title strong {
      color: #211a29;
      font-size: 13px;
      font-weight: 900;
    }
    .sheet-layout-toolbar-title span {
      color: #746c7d;
      font-size: 9px;
      font-weight: 700;
    }
    .sheet-layout-toolbar .sprod-sheet-division-buttons {
      display: grid;
      grid-template-columns: repeat(4, minmax(64px, 1fr));
      gap: 5px;
      min-width: 0;
    }
    .sheet-layout-toolbar .sprod-sheet-division-buttons button {
      min-width: 0;
      height: 32px;
      padding: 0 8px;
      border: 1px solid #d9d1e2;
      border-radius: 8px;
      background: #fff;
      color: #51495a;
      font-family: 'Noto Sans KR', sans-serif;
      font-size: 10px;
      font-weight: 850;
      cursor: pointer;
      white-space: nowrap;
    }
    .sheet-layout-toolbar .sprod-sheet-division-buttons button:hover { border-color: #8b5cf6; }
    .sheet-layout-toolbar .sprod-sheet-division-buttons button:disabled,
    .sheet-layout-toolbar .sprod-sheet-division-buttons button:disabled:hover {
      border-color: #ddd8e4;
      background: #f1eff4;
      color: #aaa4b1;
      box-shadow: none;
      cursor: not-allowed;
      opacity: .58;
    }
    .sheet-layout-toolbar .sprod-sheet-division-buttons button.active {
      border-color: #7c3aed;
      background: #7c3aed;
      color: #fff;
      box-shadow: 0 3px 9px rgba(124,58,237,.22);
    }
    .sheet-layout-toolbar .sprod-sheet-division-buttons button:focus-visible {
      outline: 3px solid rgba(124,58,237,.25);
      outline-offset: 2px;
    }
    .sheet-layout-toolbar-preview {
      display: grid;
      grid-template-columns: 54px minmax(0, 1fr);
      align-items: center;
      gap: 8px;
      min-width: 0;
    }
    .sheet-layout-toolbar .sprod-mini-sheet {
      display: grid;
      width: 54px;
      min-height: 34px;
      overflow: hidden;
      border: 1.5px solid #7c3aed;
      border-radius: 4px;
      background: #faf8ff;
      box-sizing: border-box;
    }
    .sheet-layout-toolbar .sprod-mini-sheet-cell {
      display: grid;
      min-width: 0;
      place-items: center;
      color: #6d28d9;
      font-size: 7px;
      font-weight: 900;
      box-sizing: border-box;
    }
    .sheet-layout-toolbar .sprod-sheet-division-summary {
      min-width: 0;
      color: #332b3c;
      font-size: 10px;
      font-weight: 800;
      line-height: 1.35;
    }
    .sheet-clone-open {
      display: inline-flex;
      width: 100%;
      min-width: 0;
      min-height: 44px;
      padding: 10px 12px;
      align-items: center;
      justify-content: center;
      gap: 6px;
      border: 1px solid #7c3aed;
      border-radius: 9px;
      background: #7c3aed;
      color: #fff;
      font-family: 'Noto Sans KR', sans-serif;
      font-size: 12px;
      font-weight: 900;
      white-space: nowrap;
      cursor: pointer;
      box-shadow: 0 4px 12px rgba(124,58,237,.22);
    }
    .sheet-clone-open[hidden] { display: none !important; }
    .sheet-clone-open svg {
      width: 15px;
      height: 15px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .sheet-clone-open:hover:not(:disabled) {
      background: #6d28d9;
      box-shadow: 0 6px 16px rgba(124,58,237,.28);
    }
    .sheet-clone-open:focus-visible {
      outline: 3px solid rgba(124,58,237,.25);
      outline-offset: 2px;
    }
    .sheet-clone-open:disabled {
      border-color: #d9d4df;
      background: #f4f2f5;
      color: #a8a1ac;
      box-shadow: none;
      cursor: not-allowed;
    }
    .sheet-layout-toolbar .sprod-sheet-division-note {
      overflow: hidden;
      color: #655d6e;
      font-size: 9px;
      font-weight: 650;
      line-height: 1.3;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    body.sheet-freeform-layout-mode .canvas-scroll-viewport {
      inset: 106px 0 70px;
    }
    body.sheet-freeform-layout-mode .pvc-kisscut-dimensions { position: fixed; }
    body.sheet-freeform-layout-mode .canvas-sheet-workspace,
    body.sheet-freeform-layout-mode .pvc-kisscut-design-workspace { display: none !important; }

    @media (max-width: 1180px) and (min-width: 681px) {
      .sheet-layout-toolbar {
        right: 230px;
        padding-right: 9px;
        padding-left: 9px;
      }
      .sheet-layout-toolbar-main {
        grid-template-columns: max-content minmax(238px, 1fr) max-content;
        gap: 8px;
      }
      .sheet-layout-toolbar-preview { display: none; }
      .sheet-layout-toolbar-title span { display: none; }
      .pvc-kisscut-product-switcher { width: 204px; }
      .pvc-kisscut-product-switcher-label { display: none; }
      .sheet-clone-guide {
        top: 92px;
        right: 14px;
        width: 204px;
      }
    }
    @media (max-width: 900px) and (min-width: 681px) {
      .sheet-layout-toolbar {
        top: 62px;
        right: 14px;
        left: 14px;
      }
      .sheet-layout-toolbar-main { display: block; }
      .sheet-layout-toolbar-title,
      .sheet-layout-toolbar-preview { display: none; }
      .sheet-clone-guide { top: 154px; right: 14px; width: 204px; }
      .sheet-layout-toolbar .sprod-sheet-division-note {
        display: block;
        margin-top: 5px;
        text-align: center;
      }
      body.sheet-freeform-layout-mode .canvas-scroll-viewport { inset: 154px 0 70px; }
    }

    .sheet-clone-modal {
      position: fixed;
      inset: 0;
      z-index: 100300;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      background: rgba(28, 24, 33, .58);
      box-sizing: border-box;
      backdrop-filter: blur(3px);
    }
    .sheet-clone-modal[hidden] { display: none !important; }
    .sheet-clone-card {
      position: relative;
      width: min(440px, 100%);
      max-height: calc(100dvh - 40px);
      padding: 26px;
      overflow: auto;
      border: 1px solid rgba(124,58,237,.16);
      border-radius: 18px;
      background: #fff;
      box-shadow: 0 22px 70px rgba(16,12,22,.30);
      box-sizing: border-box;
      font-family: 'Noto Sans KR', sans-serif;
    }
    .sheet-clone-close {
      position: absolute;
      top: 14px;
      right: 14px;
      width: 32px;
      height: 32px;
      border: 0;
      border-radius: 50%;
      background: #f2eff5;
      color: #5d5565;
      font-size: 22px;
      line-height: 1;
      cursor: pointer;
    }
    .sheet-clone-eyebrow {
      display: block;
      margin: 0 38px 5px 0;
      color: #7c3aed;
      font-size: 11px;
      font-weight: 900;
    }
    .sheet-clone-card h2 {
      margin: 0;
      color: #1f1827;
      font-size: 22px;
      font-weight: 900;
      line-height: 1.35;
    }
    .sheet-clone-description {
      margin: 8px 0 16px;
      color: #6b6373;
      font-size: 12px;
      font-weight: 650;
      line-height: 1.55;
    }
    .sheet-clone-targets {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
    }
    .sheet-clone-target {
      position: relative;
      display: block;
      min-width: 0;
    }
    .sheet-clone-target input {
      position: absolute;
      width: 1px;
      height: 1px;
      opacity: 0;
      pointer-events: none;
    }
    .sheet-clone-target-card {
      display: flex;
      min-height: 58px;
      padding: 8px 6px;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
      border: 1.5px solid #ddd6e5;
      border-radius: 10px;
      background: #fff;
      color: #3f3748;
      text-align: center;
      box-sizing: border-box;
      cursor: pointer;
      transition: border-color .15s, background .15s, transform .15s;
    }
    .sheet-clone-target-card strong { font-size: 12px; font-weight: 900; }
    .sheet-clone-target-card small { color: #8a8292; font-size: 9px; font-weight: 700; }
    .sheet-clone-target input:checked + .sheet-clone-target-card {
      border-color: #7c3aed;
      background: #f3e8ff;
      color: #6d28d9;
      box-shadow: 0 0 0 2px rgba(124,58,237,.10);
      transform: translateY(-1px);
    }
    .sheet-clone-target input:focus-visible + .sheet-clone-target-card {
      outline: 3px solid rgba(124,58,237,.24);
      outline-offset: 2px;
    }
    .sheet-clone-target input:disabled + .sheet-clone-target-card {
      border-style: dashed;
      background: #f4f2f5;
      color: #aaa4af;
      cursor: not-allowed;
    }
    .sheet-clone-select-empty {
      width: 100%;
      height: 38px;
      margin-top: 10px;
      border: 1px solid #c4b5fd;
      border-radius: 9px;
      background: #faf7ff;
      color: #6d28d9;
      font-family: inherit;
      font-size: 11px;
      font-weight: 900;
      cursor: pointer;
    }
    .sheet-clone-select-empty:disabled { opacity: .45; cursor: not-allowed; }
    .sheet-clone-help {
      margin: 14px 0 0;
      padding: 10px 12px;
      border-radius: 9px;
      background: #f7f5f9;
      color: #6c6473;
      font-size: 10px;
      font-weight: 650;
      line-height: 1.5;
    }
    .sheet-clone-actions {
      display: grid;
      grid-template-columns: 1fr 1.5fr;
      gap: 8px;
      margin-top: 16px;
    }
    .sheet-clone-actions button {
      min-height: 44px;
      border-radius: 10px;
      font-family: inherit;
      font-size: 12px;
      font-weight: 900;
      cursor: pointer;
    }
    .sheet-clone-cancel { border: 1px solid #ddd7e2; background: #fff; color: #5f5767; }
    .sheet-clone-confirm { border: 1px solid #7c3aed; background: #7c3aed; color: #fff; }
    .sheet-clone-confirm:disabled { border-color: #d9d4df; background: #e7e3e9; color: #aaa3af; cursor: not-allowed; }

    @media (max-width: 520px) {
      .sheet-clone-card { padding: 22px 18px 18px; }
      .sheet-clone-targets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    .canvas-outer {
      position: relative;
      box-shadow: 0 4px 24px rgba(0,0,0,0.18);
      background: #fff;
    }
    /* ── AI 배경 제거 진행 상태 ── */
    #remove-bg-progress {
      position: absolute;
      inset: 0;
      z-index: 90;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 18px;
      background: rgba(248, 247, 252, 0.88);
      backdrop-filter: blur(3px);
      cursor: wait;
    }
    #remove-bg-progress.visible { display: flex; }
    /* 진행창은 확대된 canvas-outer가 아니라 브라우저 화면을 기준으로 표시합니다. */
    #remove-bg-progress {
      position: fixed;
      inset: 0;
      width: 100vw;
      height: 100vh;
      box-sizing: border-box;
      z-index: 9990;
    }
    #remove-bg-progress .rbg-progress-card {
      max-height: calc(100vh - 48px);
      overflow: auto;
    }
    .rbg-progress-card {
      width: min(390px, calc(100% - 24px));
      padding: 24px 22px 21px;
      border: 1px solid rgba(124, 92, 191, 0.18);
      border-radius: 18px;
      background: rgba(255,255,255,0.97);
      box-shadow: 0 16px 45px rgba(42, 31, 69, 0.18);
      text-align: center;
      color: #28222f;
    }
    .rbg-progress-icon {
      width: 42px;
      height: 42px;
      margin: 0 auto 14px;
      border: 4px solid #e7e0f7;
      border-top-color: #7c5cbf;
      border-radius: 50%;
      animation: rbg-spin .85s linear infinite;
    }
    #remove-bg-progress.success .rbg-progress-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      border: 0;
      background: #e8f8ef;
      color: #15945a;
      animation: none;
      font-size: 25px;
      font-weight: 900;
    }
    #remove-bg-progress.success .rbg-progress-icon::before { content: '✓'; }
    @keyframes rbg-spin { to { transform: rotate(360deg); } }
    .rbg-progress-title { font-size: 17px; font-weight: 800; line-height: 1.45; }
    .rbg-progress-desc { margin-top: 7px; color: #777080; font-size: 12px; line-height: 1.65; }
    .rbg-progress-steps {
      display: flex;
      align-items: flex-start;
      justify-content: center;
      margin-top: 18px;
    }
    .rbg-step { position: relative; flex: 1; color: #aaa3af; font-size: 10px; line-height: 1.35; }
    .rbg-step:not(:last-child)::after {
      content: '';
      position: absolute;
      top: 8px;
      left: calc(50% + 11px);
      width: calc(100% - 22px);
      height: 2px;
      background: #e5e1e9;
    }
    .rbg-step-dot {
      position: relative;
      z-index: 1;
      display: block;
      width: 17px;
      height: 17px;
      margin: 0 auto 6px;
      border: 2px solid #d8d2de;
      border-radius: 50%;
      background: #fff;
    }
    .rbg-step.active { color: #654aa4; font-weight: 700; }
    .rbg-step.active .rbg-step-dot { border-color: #7c5cbf; box-shadow: 0 0 0 3px #eee8fb; }
    .rbg-step.done { color: #5f946f; }
    .rbg-step.done .rbg-step-dot { border-color: #3eaa6d; background: #3eaa6d; }
    .rbg-step.done:not(:last-child)::after { background: #8fd1aa; }
    #remove-bg-progress.success .rbg-progress-steps { display: none; }
    .rbg-btn-spinner {
      width: 20px;
      height: 20px;
      border: 2.5px solid #d8d1e5;
      border-top-color: currentColor;
      border-radius: 50%;
      animation: rbg-spin .85s linear infinite;
    }

    /* 미니 토스트 — 제조 제약(최소 크기/간격) 안내 */
    #mini-toast {
      position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
      background: rgba(30,30,30,0.88); color: #fff; font-size: 13px; font-weight: 500;
      padding: 9px 18px; border-radius: 22px; z-index: 1000; white-space: nowrap;
      box-shadow: 0 8px 24px rgba(0,0,0,.24);
      opacity: 0; pointer-events: none; transition: opacity .2s;
    }
    #mini-toast.show { opacity: 1; }

    /* ── 원형 뱃지 모드: 뱃지에 안 맞는 항목만 숨김 ── */
    /* (자르기·반전·레이어순서·배경색/스포이드는 유지) */
    body.badge-mode #canvas-color-wrap,   /* 캔버스 옆면 채우기(액자 전용) */
    body.badge-mode #btn-ai-prompt,       /* AI 프롬프트 */
    body.badge-mode .tb-div-frameonly,    /* AI 앞 구분선 */
    body.badge-mode #frame-type-label,
    body.badge-mode #frame-type-static,
    body.badge-mode #csel-frame,
    body.badge-mode #frame-type-divider { display: none !important; }

    /* 스티커 전용 화면에서 불필요한 배경 편집 도구 제거 */
    body.sticker-mode #btn-eyedropper,
    body.sticker-mode #bg-color-wrap,
    body.sticker-mode #btn-bg-reset { display: none !important; }

    /* 스티커 편집기에서 사용하지 않는 텍스트·AI 스타일 UI 숨김 */
    #btn-text,
    #m-core-text,
    #btn-ai-prompt,
    #ai-prompt-popup { display: none !important; }

    /* 마플식 레이아웃: 흰 새틴 '앞면' 디스크(안쪽) + 검정 재단점선(바깥, 작업영역 끝)
       사이 = 옆면 감김(블리드). 디자인은 재단점선까지 채워져 앞면 100% 인쇄.
       canvas-outer는 작업영역 전체(=재단선까지) / ::before가 앞면 뱃지 면+그림자 담당 */
    body.badge-mode #canvas-outer {
      position: relative;
      border-radius: 50%;
      background: transparent;          /* 블리드 영역 = 배경 회색이 자연스럽게 비침 */
      box-shadow: none;
    }
    body.badge-mode #canvas-outer::before {
      content: '';
      position: absolute;
      left: 50%; top: 50%;
      width: var(--badge-face-pct, 73%);
      height: var(--badge-face-pct, 73%);
      transform: translate(-50%, -50%);
      border-radius: 50%;
      background: radial-gradient(circle at 50% 30%, #ffffff 0%, #fafbfc 58%, #ebedf0 100%);
      box-shadow:
        0 12px 28px rgba(0,0,0,0.18),
        0 4px 9px rgba(0,0,0,0.10),
        inset 0 2px 4px rgba(255,255,255,0.95),
        inset 0 -14px 24px rgba(0,0,0,0.045);
      pointer-events: none;
      z-index: 0;
    }
    /* 디자인/가이드는 앞면 디스크보다 위에 (사진이 면을 덮도록) */
    body.badge-mode .canvas-container { position: relative; z-index: 1; }

    /* 주문흐름: 다운로드만 — 디자인 보내기·3D·모바일 보내기바 숨김 */
    body.badge-mode #btn-download,
    body.sticker-mode #btn-download,
    body.badge-mode #btn-preview3d,
    body.badge-mode #m-submit-bar { display: none !important; }

    /* 다운로드를 주 버튼으로 승격 (검정 채움·크게) */
    body.badge-mode .download-file-btn,
    body.sticker-mode .download-file-btn {
      margin-top: 0;
      padding: 14px;
      background: #111;
      color: #fff;
      border: none;
      font-size: 15px;
      font-weight: 700;
    }
    body.badge-mode .download-file-btn:hover,
    body.sticker-mode .download-file-btn:hover { background: #333; }
    body.badge-mode .download-file-btn svg,
    body.sticker-mode .download-file-btn svg { stroke: #fff; }

    /* 다운로드 버튼 라벨: 기본/뱃지 토글 */
    .dl-label-badge { display: none; }
    body.badge-mode .dl-label-default,
    body.sticker-mode .dl-label-default { display: none; }
    body.badge-mode .dl-label-badge,
    body.sticker-mode .dl-label-badge { display: inline; }
    /* 마플 스타일: 에디터 상단 고정 경고문 */
    /* ── 우측 패널 (데스크탑) / 하단 시트 (모바일) ── */
    .side-panel {
      display: none;
      position: fixed;
      right: 0;
      top: 0;
      bottom: 0;
      width: 280px;
      background: #fff;
      border-left: 1px solid #e0e0e0;
      padding: 56px 18px 18px;
      overflow-y: auto;
      z-index: 50;
    }
    .side-panel.open { display: block; }

    /* 모바일 전용 요소: 데스크톱에선 숨김 (PC 화면 영향 0) */
    #m-corebar, #m-submit-bar, #m-tools-backdrop, #m-sheet-head { display: none; }

    @media (max-width: 680px) {
      .side-panel {
        top: auto;
        right: 0;
        left: 0;
        width: 100%;
        border-left: none;
        border-top: 1px solid #e0e0e0;
        border-radius: 16px 16px 0 0;
        max-height: 65vh;
        padding: 16px 18px;
        z-index: 400;  /* 하단 고정바(보내기/도구)보다 위로 */
      }

      /* ── 모바일: 캔버스 위 / 컨트롤 아래로 세로 스택 ── */
      .main-content {
        flex-direction: column;
        overflow: visible;
        flex: none;
      }
      .canvas-area {
        flex: none;
        overflow: visible;
        padding: 14px 10px 16px;
      }
      .right-sidebar {
        width: 100%;
        min-width: 0;
        border-left: none;
        border-top: 8px solid #f0f0f0;
        padding: 18px 16px 96px;  /* 하단 고정 보내기 바 높이만큼 여백 */
        overflow-y: visible;
      }
      /* 모바일: 사이드바 안의 '디자인 보내기'는 하단 고정바로 대체 → 숨김 (3D 버튼은 유지) */
      .sidebar-bottom #btn-download { display: none; }
      /* ── 모바일 핵심 도구 바 (상단 고정) ── */
      #m-corebar {
        display: flex;
        position: sticky; top: 0; z-index: 120;
        background: #fff; border-bottom: 1px solid #eee;
        padding: 6px 6px;
      }
      .m-core-btn {
        flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
        background: none; border: none; padding: 8px 0;
        font-size: 12px; color: #333; font-family: 'Noto Sans KR', sans-serif;
        cursor: pointer; border-radius: 10px;
      }
      .m-core-btn svg { width: 24px; height: 24px; }
      .m-core-btn:disabled { color: #c4c4c4; }
      .m-core-btn.active-sheet { background: #f0eaff; color: #7c5cbf; }

      /* ── 툴바를 하단 슬라이드 시트로 ── */
      .toolbar {
        position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 320;
        display: none; flex-wrap: wrap; gap: 6px; align-items: flex-start;
        background: #fff; border-top: 1px solid #e0e0e0; border-radius: 18px 18px 0 0;
        padding: 6px 12px 24px; max-height: 76vh; overflow-y: auto;
        box-shadow: 0 -6px 24px rgba(0,0,0,0.15);
      }
      .toolbar.m-open { display: flex; }
      #m-sheet-head {
        display: block; flex: 0 0 100%; text-align: center;
        font-weight: 700; font-size: 14px; color: #222;
        padding: 14px 0 10px; position: relative;
      }
      #m-sheet-head::before {
        content: ''; position: absolute; top: 5px; left: 50%; transform: translateX(-50%);
        width: 40px; height: 4px; border-radius: 2px; background: #ddd;
      }
      .toolbar > .tool-btn,
      .toolbar > .img-upload-wrap,
      .toolbar > .bg-color-wrap,
      .toolbar > .canvas-color-wrap {
        flex: 0 0 calc(25% - 6px); margin: 0;
        padding: 10px 2px; font-size: 11px; min-height: 62px;
        border-radius: 10px; justify-content: flex-start;
      }
      .toolbar .tool-btn svg { width: 22px; height: 22px; }
      .tb-divider { display: none; }

      /* 색상 피커 팝업: 모바일에선 화면 중앙 고정 (하단 시트 가림 방지) */
      .canvas-color-popup {
        position: fixed !important; left: 50% !important; right: auto !important;
        top: 50% !important; transform: translate(-50%, -50%); z-index: 340 !important;
      }

      /* ── 도구 시트 배경 ── */
      #m-tools-backdrop {
        display: none; position: fixed; inset: 0;
        background: rgba(0,0,0,0.35); z-index: 300;
      }
      #m-tools-backdrop.show { display: block; }

      /* ── 디자인 보내기 하단 고정 바 ── */
      #m-submit-bar {
        display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 110;
        background: #fff; border-top: 1px solid #eee;
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
      }
      #m-submit-btn {
        width: 100%; height: 50px; border: none; border-radius: 12px;
        background: #111; color: #fff; font-size: 16px; font-weight: 700;
        font-family: 'Noto Sans KR', sans-serif; cursor: pointer;
      }
    }

    .panel-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 26px;
      margin-bottom: 16px;
    }
    .panel-title { font-size: 14px; font-weight: 700; }
    .panel-close { font-size: 22px; color: #888; cursor: pointer; line-height: 1; }

    /* 이미지 업로드 패널 */
    .upload-notice {
      color: #ff1a85;
      font-size: 12.5px;
      font-weight: 700;
      margin-bottom: 14px;
      line-height: 1.55;
    }

    .upload-box {
      border: 2px dashed #ccc;
      border-radius: 10px;
      padding: 28px 16px;
      text-align: center;
      cursor: pointer;
      transition: border-color 0.2s, background 0.2s;
    }
    .upload-box:hover { border-color: #ff1a85; background: #fff5fa; }
    .upload-box p { font-size: 13px; color: #555; margin-top: 10px; }
    .upload-box small { font-size: 11px; color: #aaa; }
    #file-input { display: none; }

    /* 텍스트 패널 */
    .section-label { font-size: 11px; color: #777; margin-bottom: 6px; font-weight: 700; }

    /* 커스텀 폰트 피커 */
    .font-picker { position: relative; margin-bottom: 14px; }
    .font-picker-btn {
      width: 100%; padding: 9px 10px;
      border: 1px solid #ddd; border-radius: 7px;
      font-size: 15px; cursor: pointer;
      display: flex; align-items: center; justify-content: space-between;
      background: #fff; user-select: none; outline: none;
    }
    .font-picker-btn:hover, .font-picker.open .font-picker-btn { border-color: #333; }
    .font-picker-btn svg { flex-shrink: 0; margin-left: 6px; transition: transform .15s; }
    .font-picker.open .font-picker-btn svg { transform: rotate(180deg); }
    .font-picker-list {
      display: none; position: absolute; top: calc(100% + 3px); left: 0; right: 0; z-index: 2000;
      background: #fff; border: 1px solid #ddd; border-radius: 8px;
      max-height: 300px; overflow-y: auto;
      box-shadow: 0 6px 20px rgba(0,0,0,0.13);
    }
    .font-picker.open .font-picker-list { display: block; }
    .font-opt {
      padding: 10px 14px; font-size: 16px; cursor: pointer; color: #222; line-height: 1.3;
    }
    .font-opt:hover { background: #f5f5f5; }
    .font-opt.selected { background: #f0f0f0; color: #000; }
    .font-opt-divider { height: 1px; background: #ececec; margin: 4px 0; }

    .fmt-row {
      display: flex;
      gap: 4px;
      margin-bottom: 14px;
      flex-wrap: wrap;
    }

    .fmt-btn {
      width: 32px;
      height: 32px;
      border: 1px solid #ddd;
      background: #fff;
      border-radius: 5px;
      cursor: pointer;
      font-size: 14px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.1s;
    }
    .fmt-btn:hover { background: #f5f5f5; }
    .fmt-btn.active { background: #efefef; border-color: #888; }

    .color-palette {
      display: grid;
      grid-template-columns: repeat(10, 1fr);
      gap: 5px;
      margin-bottom: 16px;
    }
    .c-dot {
      aspect-ratio: 1;
      border-radius: 50%;
      cursor: pointer;
      border: 2px solid transparent;
      transition: transform 0.1s;
    }
    .c-dot:hover { transform: scale(1.15); }
    .c-dot.selected { border-color: #222 !important; }

    .add-text-btn {
      width: 100%;
      padding: 11px;
      background: #222;
      color: #fff;
      border: none;
      border-radius: 8px;
      font-size: 14px;
      font-family: 'Noto Sans KR', sans-serif;
      font-weight: 700;
      cursor: pointer;
      transition: background 0.15s;
    }
    .add-text-btn:hover { background: #444; }

    /* ── 우측 사이드바 ── */
    .right-sidebar {
      width: 290px;
      min-width: 290px;
      border-left: 1px solid #e0e0e0;
      background: #fff;
      display: flex;
      flex-direction: column;
      padding: 24px 20px 24px;
      overflow-y: auto;
    }

    /* 고객 편집 화면에서는 내부 제작 진단 카드 대신 실제 편집 기능만 보여준다. */
    .sprod-rule-summary,
    .sprod-size-guard,
    .sprod-cutline-quality,
    .sprod-image-quality {
      display: none !important;
    }

    .sidebar-product-info {
      margin-bottom: 20px;
      padding-bottom: 16px;
      border-bottom: 1px solid #f0f0f0;
    }
    .product-tag { font-size: 11px; color: #999; margin-bottom: 5px; }
    .product-title { font-size: 17px; font-weight: 700; color: #111; line-height: 1.3; }

    .size-cat-label {
      font-size: 11px; font-weight: 700; color: #aaa;
      letter-spacing: 0.5px; margin: 14px 0 6px 2px;
    }
    .size-cat-label:first-child { margin-top: 0; }

    .sidebar-label {
      font-size: 12px; font-weight: 700; color: #777;
      margin-bottom: 10px; letter-spacing: 0.3px;
    }

    .sidebar-back-btn {
      display: flex; align-items: center; gap: 6px;
      background: none; border: 1px solid #e0e0e0; border-radius: 8px;
      padding: 8px 14px; font-size: 13px; color: #666;
      cursor: pointer; margin-bottom: 18px; transition: all 0.15s;
      font-family: 'Noto Sans KR', sans-serif; font-weight: 500;
    }
    .sidebar-back-btn:hover { border-color: #7c3aed; color: #7c3aed; }

    .size-option-list { display: flex; flex-direction: column; gap: 7px; }

    .size-option {
      display: flex; align-items: center; gap: 8px;
      padding: 7px 12px;
      border: 1.5px solid #e8e8e8; border-radius: 8px;
      cursor: pointer;
      transition: border-color 0.15s, background 0.15s;
    }
    .size-option:hover { border-color: #aaa; background: #fafafa; }
    .size-option.selected { border-color: #222; background: #f5f5f5; }

    .size-opt-thumb { display: none; }

    .size-opt-info { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
    .size-opt-name { font-size: 13px; font-weight: 700; color: #222; }
    .size-opt-dim  { font-size: 11px; color: #222; }
    .size-opt-badge {
      font-size: 10px; font-weight: 700;
      padding: 2px 7px; border-radius: 20px;
      line-height: 1.6; white-space: nowrap;
    }
    .size-opt-badge.badge-desk {
      background: #fff3cd; color: #856404;
      border: 1px solid #ffc107;
    }
    .size-opt-badge.badge-wall {
      background: #fff3cd; color: #856404;
      border: 1px solid #ffc107;
    }

    /* ── 액자 종류 카드 ── */
    .sidebar-divider { height:1px; background:#f0f0f0; margin:16px 0; }

    .frame-type-grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: 7px;
      margin-bottom: 4px;
    }
    .frame-type-card {
      display: flex; flex-direction: column; align-items: center;
      gap: 6px; padding: 10px 6px 9px;
      border: 1.5px solid #e8e8e8; border-radius: 10px;
      cursor: pointer; transition: all 0.15s;
      background: #fafafa; position: relative;
    }
    .frame-type-card:hover { border-color: #bbb; background: #f5f5f5; }
    .frame-type-card.selected { border-color: #222; background: #f5f5f5; }
    .frame-type-card.selected::after {
      content: '✓'; position: absolute; top: 4px; right: 7px;
      font-size: 9px; color: #222; font-weight: 900;
    }
    .frame-icon {
      width: 56px; height: 44px;
      border-radius: 4px;
      overflow: hidden;
      display: block;
      filter: drop-shadow(0 1px 3px rgba(0,0,0,0.15));
    }
    .frame-type-card.selected .frame-icon {
      filter: drop-shadow(0 2px 6px rgba(0,0,0,0.22));
    }
    .frame-type-name {
      font-size: 10.5px; font-weight: 600; color: #555;
      text-align: center; line-height: 1.2;
    }
    .frame-type-card.selected .frame-type-name { color: #111; font-weight: 700; }

    /* ── 액자 종류 드롭다운 ── */
    .frame-sel { position: relative; user-select: none; margin-bottom: 12px; }
    .frame-sel.open .csel-trigger { border-color: #333; }
    .frame-sel.active .csel-trigger { border-color: #222; color: #111; font-weight: 600; }
    .frame-sel.open .csel-arrow { transform: rotate(180deg); }
    .frame-sel.open .csel-list { display: block; }

    /* ── 사이즈 드롭다운 ── */
    .size-dropdowns { display: flex; flex-direction: column; gap: 7px; }
    .size-drop-row { display: flex; align-items: center; gap: 8px; }
    .size-drop-cat {
      font-size: 11px; font-weight: 700; color: #aaa;
      width: 40px; flex-shrink: 0; letter-spacing: 0.2px;
    }

    /* ── 커스텀 드롭다운 ── */
    .custom-sel { position: relative; flex: 1; user-select: none; }
    .csel-trigger {
      display: flex; align-items: center; justify-content: space-between;
      padding: 7px 10px; border: 1.5px solid #e8e8e8; border-radius: 8px;
      font-size: 12px; font-family: 'Noto Sans KR', sans-serif; color: #555;
      background: #fff; cursor: pointer; transition: border-color 0.15s; gap: 4px;
    }
    .csel-trigger:hover { border-color: #bbb; }
    .custom-sel.open .csel-trigger { border-color: #333; }
    .custom-sel.active .csel-trigger { border-color: #222; color: #111; font-weight: 600; }
    .csel-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .csel-arrow { flex-shrink: 0; transition: transform 0.15s; }
    .custom-sel.open .csel-arrow { transform: rotate(180deg); }
    .csel-list {
      display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0;
      background: #fff; border: 1.5px solid #222; border-radius: 8px;
      z-index: 2000; box-shadow: 0 4px 20px rgba(0,0,0,0.13);
      overflow: hidden; max-height: 220px; overflow-y: auto;
    }
    .custom-sel.open .csel-list { display: block; }
    .csel-opt {
      padding: 8px 12px; font-size: 12px; cursor: pointer;
      font-family: 'Noto Sans KR', sans-serif; color: #444;
      transition: background 0.08s;
    }
    .csel-opt:hover { background: #f5f5f5; color: #111; }
    .csel-opt.selected { font-weight: 700; color: #111; background: #fafafa; }


    .sidebar-bottom { margin-top: auto; padding-top: 20px; }

    /* 사이즈 비교 팝업 */
    #size-popup-overlay { display:none; }
    #size-popup {
      display:none; position:fixed; z-index:5000;
      right:300px; bottom:36px;
      background:#fff; border-radius:12px;
      border:1px solid #ddd;
      padding:18px 20px 16px;
      box-shadow:0 8px 32px rgba(0,0,0,0.13);
      font-family:'Noto Sans KR',sans-serif;
      pointer-events:auto;
    }
    #size-popup-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:14px; gap:16px; }
    #size-popup-title { font-size:13px; font-weight:700; color:#111; line-height:1.4; }
    #size-popup-close { background:none; border:none; color:#aaa; font-size:18px; cursor:pointer; line-height:1; padding:0; flex-shrink:0; margin-top:-2px; }
    #size-popup-close:hover { color:#333; }
    #size-popup-note { text-align:center; font-size:11.5px; color:#111; margin-top:12px; padding-top:10px; border-top:1px solid #f0f0f0; font-weight:600; }

    /* 일반 알림에는 보조 동작 버튼을 노출하지 않는다. */
    #alert-modal-action[hidden] { display: none !important; }

.preview3d-btn {
      width: 100%; padding: 11px;
      background: #fff; color: #111;
      border: 1.5px solid #ccc; border-radius: 9px;
      font-size: 14px; font-family: 'Noto Sans KR', sans-serif;
      font-weight: 600; cursor: pointer;
      transition: all 0.15s; margin-bottom: 8px;
      display: flex; align-items: center; justify-content: center; gap: 6px;
    }
    .preview3d-btn:hover { border-color: #111; background: #f5f5f5; }

    /* ── 회전 핸들 Shift 툴팁 ── */
    #rot-shift-tip {
      display: none;
      position: fixed;
      background: rgba(30,30,30,0.88);
      color: #fff;
      padding: 6px 12px;
      border-radius: 7px;
      font-size: 12px;
      pointer-events: none;
      z-index: 9000;
      white-space: nowrap;
      box-shadow: 0 2px 10px rgba(0,0,0,0.28);
      letter-spacing: -0.2px;
    }
    #rot-shift-tip::after {
      content: '';
      position: absolute;
      bottom: -5px; left: 14px;
      border: 5px solid transparent;
      border-top-color: rgba(30,30,30,0.88);
      border-bottom: none;
    }

    #corner-resize-tip {
      display: none;
      position: fixed;
      background: rgba(30,30,30,0.88);
      color: #fff;
      padding: 6px 12px;
      border-radius: 7px;
      font-size: 12px;
      pointer-events: none;
      z-index: 9000;
      white-space: nowrap;
      box-shadow: 0 2px 10px rgba(0,0,0,0.28);
      letter-spacing: -0.2px;
    }
    #corner-resize-tip::after {
      content: '';
      position: absolute;
      bottom: -5px; left: 14px;
      border: 5px solid transparent;
      border-top-color: rgba(30,30,30,0.88);
      border-bottom: none;
    }

    /* ── 3D 미리보기 모달 ── */
    #mock3d-modal {
      display: none; position: fixed; inset: 0;
      background: rgba(0,0,0,0.62); z-index: 2000;
      align-items: center; justify-content: center;
    }
    #mock3d-dialog {
      background: #fff; border-radius: 14px; overflow: hidden;
      width: 1400px;
      max-width: 88vw;
      max-height: calc(100vh - 60px);
      box-shadow: 0 24px 72px rgba(0,0,0,0.38);
      display: flex; flex-direction: column;
    }
    #mock3d-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 16px 24px; background: #111; color: #fff;
      font-weight: 700; font-size: 21px; flex-shrink: 0;
    }
    #mock3d-close-btn {
      background: none; border: none; color: #fff;
      font-size: 36px; cursor: pointer; opacity: 0.75; line-height: 1; padding: 0;
    }
    #mock3d-close-btn:hover { opacity: 1; }
    #mock3d-viewport {
      width: 100%; flex: 1; min-height: 0;
      background: #e8e2d8; position: relative;
    }
    #mock3d-canvas { display: block; width: 100%; height: 100%; cursor: grab; }
    #mock3d-canvas:active { cursor: grabbing; }
    #mock3d-hint {
      position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
      font-size: 17.5px; font-weight: 600;
      color: #111;
      background: rgba(255,255,255,0.82);
      border: 1px solid rgba(0,0,0,0.13);
      border-radius: 20px;
      padding: 6px 18px;
      white-space: nowrap;
      box-shadow: 0 2px 10px rgba(0,0,0,0.12);
      pointer-events: none;
      margin: 0;
      font-family: 'Noto Sans KR', sans-serif;
      letter-spacing: -0.01em;
    }

    /* ── 드래그 유도 손 애니메이션 오버레이 ── */
    #mock3d-drag-hint {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.4s ease;
      z-index: 10;
    }
    #mock3d-drag-hint.visible { opacity: 1; }
    #mock3d-drag-hint.fadeout { opacity: 0; }

    .drag-hint-hand {
      font-size: 44px;
      animation: dragSwipe 1.1s ease-in-out infinite;
      filter: drop-shadow(0 2px 6px rgba(0,0,0,0.3));
    }
    .drag-hint-arrows {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 22px;
      color: #fff;
      font-weight: 700;
      text-shadow: 0 1px 4px rgba(0,0,0,0.5);
      letter-spacing: 2px;
    }
    .drag-hint-label {
      font-size: 14px;
      font-weight: 700;
      color: #fff;
      background: rgba(0,0,0,0.45);
      border-radius: 20px;
      padding: 5px 16px;
      font-family: 'Noto Sans KR', sans-serif;
      text-shadow: none;
      letter-spacing: -0.01em;
    }
    @keyframes dragSwipe {
      0%   { transform: translateX(-18px); }
      50%  { transform: translateX( 18px); }
      100% { transform: translateX(-18px); }
    }
    #mock3d-disclaimer {
      text-align: center;
      font-size: 18px;
      font-weight: 500;
      color: #111;
      background: #f7f7f7;
      border-top: 1px solid #ececec;
      margin: 0;
      padding: 11px 20px;
      font-family: 'Noto Sans KR', sans-serif;
      flex-shrink: 0;
      letter-spacing: -0.01em;
    }

    .download-btn {
      width: 100%;
      padding: 14px;
      background: #111;
      color: #fff;
      border: none;
      border-radius: 9px;
      font-size: 15px;
      font-family: 'Noto Sans KR', sans-serif;
      font-weight: 700;
      cursor: pointer;
      transition: background 0.15s;
    }
    .download-btn:hover { background: #333; }

    /* 다운로드(인쇄용 파일 저장) — 보조 버튼: 흰 배경 + 테두리 */
    .download-file-btn {
      width: 100%;
      margin-top: 8px;
      padding: 12px;
      background: #fff;
      color: #111;
      border: 1.5px solid #d8d8d8;
      border-radius: 9px;
      font-size: 13.5px;
      font-family: 'Noto Sans KR', sans-serif;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      transition: border-color 0.15s, background 0.15s;
    }
    .download-file-btn:hover { border-color: #111; background: #f5f5f5; }

    .production-download-modal {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 100150;
      align-items: center;
      justify-content: center;
      padding: 20px;
      background: rgba(15, 23, 42, 0.62);
      backdrop-filter: blur(4px);
      font-family: 'Noto Sans KR', sans-serif;
    }
    .production-download-card {
      width: min(460px, 100%);
      padding: 30px;
      border: 1px solid rgba(255, 255, 255, 0.85);
      border-radius: 22px;
      background: #fff;
      box-shadow: 0 24px 70px rgba(15, 23, 42, 0.28);
    }
    .production-download-header {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 14px;
    }
    .production-download-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 46px;
      height: 46px;
      flex: 0 0 46px;
      border-radius: 14px;
      background: #eff6ff;
      color: #2563eb;
    }
    .production-download-icon svg {
      width: 23px;
      height: 23px;
    }
    .production-download-eyebrow {
      margin-bottom: 2px;
      color: #2563eb;
      font-size: 12px;
      font-weight: 850;
      letter-spacing: 0.02em;
    }
    .production-download-title {
      margin: 0;
      color: #0f172a;
      font-size: 23px;
      font-weight: 900;
      letter-spacing: -0.04em;
      line-height: 1.3;
    }
    .production-download-description {
      margin: 0 0 18px;
      color: #64748b;
      font-size: 14px;
      font-weight: 550;
      line-height: 1.65;
      word-break: keep-all;
    }
    .production-download-flow {
      display: grid;
      gap: 1px;
      margin-bottom: 22px;
      overflow: hidden;
      border: 1px solid #e2e8f0;
      border-radius: 14px;
      background: #e2e8f0;
    }
    .production-download-flow-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 12px 14px;
      background: #f8fafc;
    }
    .production-download-flow-label {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: #334155;
      font-size: 13px;
      font-weight: 750;
    }
    .production-download-flow-check {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 19px;
      height: 19px;
      border-radius: 50%;
      background: #dbeafe;
      color: #2563eb;
      font-size: 12px;
      font-weight: 900;
    }
    .production-download-flow-destination {
      color: #0f172a;
      font-size: 13px;
      font-weight: 850;
      text-align: right;
    }
    .production-download-summary {
      display: none;
      margin: -6px 0 18px;
      padding: 10px 12px;
      border: 1px solid #bae6fd;
      border-radius: 10px;
      background: #f0f9ff;
      color: #0c4a6e;
      font-size: 12px;
      font-weight: 750;
      line-height: 1.55;
    }
    .production-download-label {
      display: flex;
      align-items: center;
      gap: 7px;
      margin-bottom: 8px;
      color: #0f172a;
      font-size: 14px;
      font-weight: 850;
    }
    .production-download-required {
      padding: 2px 6px;
      border-radius: 999px;
      background: #eff6ff;
      color: #2563eb;
      font-size: 10px;
      font-weight: 850;
    }
    .production-download-name {
      width: 100%;
      box-sizing: border-box;
      padding: 13px 14px;
      border: 1.5px solid #cbd5e1;
      border-radius: 11px;
      outline: none;
      color: #0f172a;
      background: #fff;
      font: 15px 'Noto Sans KR', sans-serif;
      transition: border-color .15s, box-shadow .15s;
    }
    .production-download-name::placeholder { color: #94a3b8; }
    .production-download-name:focus {
      border-color: #2563eb;
      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
    }
    .production-download-help {
      margin-top: 8px;
      color: #64748b;
      font-size: 12.5px;
      font-weight: 550;
      line-height: 1.55;
      word-break: keep-all;
    }
    .production-download-help strong {
      color: #334155;
      font-weight: 800;
    }
    .production-download-error {
      display: none;
      margin-top: 7px;
      color: #dc2626;
      font-size: 12px;
      font-weight: 700;
    }
    .production-download-actions {
      display: grid;
      grid-template-columns: 1fr 1.7fr;
      gap: 10px;
      margin-top: 22px;
    }
    .production-download-action {
      min-height: 48px;
      border-radius: 11px;
      font-family: 'Noto Sans KR', sans-serif;
      font-size: 14px;
      font-weight: 850;
      cursor: pointer;
      transition: background .15s, border-color .15s, transform .15s;
    }
    .production-download-action:hover { transform: translateY(-1px); }
    .production-download-cancel {
      border: 1px solid #e2e8f0;
      background: #f8fafc;
      color: #475569;
    }
    .production-download-cancel:hover {
      border-color: #cbd5e1;
      background: #f1f5f9;
    }
    .production-download-confirm {
      border: 1px solid #2563eb;
      background: #2563eb;
      color: #fff;
      box-shadow: 0 8px 18px rgba(37, 99, 235, 0.2);
    }
    .production-download-confirm:hover {
      border-color: #1d4ed8;
      background: #1d4ed8;
    }

    .download-completion-guide {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 100100;
      align-items: center;
      justify-content: center;
      padding: 22px;
      background: rgba(15, 23, 42, 0.72);
      font-family: 'Noto Sans KR', sans-serif;
    }
    .download-completion-card {
      width: min(620px, 100%);
      max-height: calc(100vh - 44px);
      overflow-y: auto;
      padding: 44px 42px 36px;
      border: 4px solid #e4efff;
      border-radius: 28px;
      background: #fff;
      box-shadow: 0 24px 70px rgba(15, 23, 42, 0.25);
      text-align: center;
    }
    .download-completion-title {
      color: #0f172a;
      font-size: 35px;
      font-weight: 900;
      line-height: 1.25;
      letter-spacing: -0.04em;
    }
    .download-completion-subtitle {
      margin-top: 10px;
      color: #334155;
      font-size: 20px;
      font-weight: 750;
      line-height: 1.65;
    }
    .download-completion-instruction {
      margin: 24px auto 26px;
      padding: 17px 18px;
      border-radius: 15px;
      background: #fff7ed;
      color: #c2410c;
      font-size: 23px;
      font-weight: 900;
      line-height: 1.5;
      word-break: keep-all;
    }
    .download-work-number-panel {
      margin: 0 auto 18px;
      padding: 20px;
      border: 2px solid #bfdbfe;
      border-radius: 18px;
      background: #eff6ff;
    }
    .download-work-number-label {
      color: #475569;
      font-size: 16px;
      font-weight: 800;
    }
    .download-work-number-row {
      display: flex;
      align-items: stretch;
      gap: 9px;
      margin-top: 9px;
    }
    .download-work-number-value {
      display: flex;
      min-width: 0;
      flex: 1;
      align-items: center;
      justify-content: center;
      padding: 13px 12px;
      border: 1px solid #93c5fd;
      border-radius: 11px;
      background: #fff;
      color: #0f172a;
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: 24px;
      font-weight: 900;
      letter-spacing: 0.02em;
      overflow-wrap: anywhere;
      user-select: all;
    }
    .download-work-number-copy {
      flex: 0 0 auto;
      padding: 0 17px;
      border: none;
      border-radius: 11px;
      background: #2563eb;
      color: #fff;
      font-family: 'Noto Sans KR', sans-serif;
      font-size: 16px;
      font-weight: 850;
      cursor: pointer;
    }
    .download-work-number-copy:hover { background: #1d4ed8; }
    .download-work-number-copy:focus-visible {
      outline: 3px solid rgba(59, 130, 246, 0.38);
      outline-offset: 3px;
    }
    .download-work-number-meta {
      margin-top: 10px;
      color: #64748b;
      font-size: 12px;
      font-weight: 650;
      line-height: 1.5;
      word-break: keep-all;
    }
    .download-attachment-demo {
      position: relative;
      margin: 0 auto 18px;
      padding: 28px 18px 18px;
      border: 2px solid #dbeafe;
      border-radius: 18px;
      background: linear-gradient(180deg, #f8fbff 0%, #fff 100%);
    }
    .download-attachment-pointer {
      position: absolute;
      top: -17px;
      left: 50%;
      transform: translateX(-50%);
      padding: 9px 20px;
      border: 2px solid #db2777;
      border-radius: 999px;
      background: linear-gradient(135deg, #f472b6, #ec4899);
      color: #fff;
      font-size: 15px;
      font-weight: 900;
      white-space: nowrap;
      box-shadow: 0 7px 18px rgba(236, 72, 153, 0.28);
    }
    .download-attachment-pointer::after {
      content: '';
      position: absolute;
      left: 50%;
      bottom: -13px;
      width: 0;
      height: 0;
      transform: translateX(-50%);
      border-left: 9px solid transparent;
      border-right: 9px solid transparent;
      border-top: 13px solid #ec4899;
    }
    .download-attachment-row {
      display: grid;
      grid-template-columns: 130px 1fr;
      align-items: center;
      gap: 14px;
      padding: 16px;
      border: 2px dashed #f472b6;
      border-radius: 14px;
      background: #fffafd;
      text-align: left;
    }
    .download-attachment-label {
      color: #1e293b;
      font-size: 14px;
      font-weight: 800;
    }
    .download-attachment-label span {
      margin-left: 5px;
      padding: 2px 5px;
      border-radius: 5px;
      background: #fce7f3;
      color: #db2777;
      font-size: 10px;
    }
    .download-attachment-file {
      color: #64748b;
      font-size: 12px;
      line-height: 1.45;
    }
    .download-attachment-file strong {
      display: inline-block;
      margin-right: 7px;
      padding: 8px 12px;
      border: 1px solid #cbd5e1;
      border-radius: 7px;
      background: #fff;
      color: #334155;
      font-size: 13px;
    }
    .download-completion-note {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 15px 16px;
      border-radius: 14px;
      background: #f8fafc;
      color: #475569;
      font-size: 14px;
      font-weight: 650;
      line-height: 1.55;
      text-align: left;
      word-break: keep-all;
    }
    .download-completion-note-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 24px;
      flex: 0 0 24px;
      border-radius: 50%;
      background: #60a5fa;
      color: #fff;
      font-size: 15px;
      font-weight: 900;
    }
    .download-completion-ok {
      min-width: 190px;
      margin-top: 22px;
      padding: 13px 30px;
      border: none;
      border-radius: 13px;
      background: linear-gradient(135deg, #3b82f6, #1d4ed8);
      color: #fff;
      font-family: 'Noto Sans KR', sans-serif;
      font-size: 18px;
      font-weight: 900;
      cursor: pointer;
      box-shadow: 0 8px 20px rgba(37, 99, 235, 0.28);
    }
    .download-completion-ok:hover { filter: brightness(1.05); }
    .download-completion-ok:focus-visible {
      outline: 3px solid rgba(59, 130, 246, 0.38);
      outline-offset: 3px;
    }
    .kakao-consult-float {
      position: fixed;
      right: 304px;
      bottom: 24px;
      z-index: 480;
      display: flex;
      align-items: center;
      gap: 10px;
      color: #191919;
      font-family: 'Noto Sans KR', sans-serif;
      text-decoration: none;
      filter: drop-shadow(0 8px 18px rgba(15, 23, 42, 0.18));
      transition: transform .16s ease, filter .16s ease;
    }
    .kakao-consult-float:hover {
      transform: translateY(-2px);
      filter: drop-shadow(0 11px 22px rgba(15, 23, 42, 0.23));
    }
    .kakao-consult-message {
      position: relative;
      max-width: 230px;
      padding: 10px 14px;
      border: 1px solid #e2e8f0;
      border-radius: 13px;
      background: #fff;
      color: #334155;
      font-size: 12px;
      font-weight: 700;
      line-height: 1.45;
      word-break: keep-all;
    }
    .kakao-consult-message::after {
      content: '';
      position: absolute;
      right: -7px;
      top: 50%;
      width: 12px;
      height: 12px;
      transform: translateY(-50%) rotate(45deg);
      border-top: 1px solid #e2e8f0;
      border-right: 1px solid #e2e8f0;
      background: #fff;
    }
    .kakao-consult-badge {
      display: flex;
      width: 68px;
      height: 68px;
      flex: 0 0 68px;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border: 1px solid #e6cf00;
      border-radius: 50%;
      background: #fee500;
      color: #191919;
      line-height: 1;
    }
    .kakao-consult-badge small {
      margin-bottom: 5px;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: -.02em;
    }
    .kakao-consult-badge strong {
      font-size: 13px;
      font-weight: 900;
    }
    .kakao-consult-float:focus-visible {
      outline: 3px solid rgba(254, 229, 0, 0.65);
      outline-offset: 4px;
      border-radius: 999px;
    }
    .production-upload-progress {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 100200;
      align-items: center;
      justify-content: center;
      padding: 22px;
      background: rgba(15, 23, 42, 0.78);
      font-family: 'Noto Sans KR', sans-serif;
    }
    .production-upload-progress-card {
      width: min(560px, 100%);
      padding: 46px 42px 40px;
      border: 4px solid #dbeafe;
      border-radius: 28px;
      background: #fff;
      box-shadow: 0 28px 80px rgba(15, 23, 42, 0.38);
      text-align: center;
    }
    .production-upload-progress-spinner {
      width: 58px;
      height: 58px;
      margin: 0 auto 24px;
      border: 7px solid #dbeafe;
      border-top-color: #2563eb;
      border-radius: 50%;
      animation: rbg-spin .85s linear infinite;
    }
    .production-upload-progress-title {
      color: #0f172a;
      font-size: 32px;
      font-weight: 900;
      line-height: 1.3;
      letter-spacing: -0.04em;
    }
    .production-upload-progress-description {
      margin-top: 16px;
      color: #dc2626;
      font-size: 21px;
      font-weight: 900;
      line-height: 1.55;
      word-break: keep-all;
    }
    .production-upload-progress-description span {
      display: block;
      margin-top: 7px;
      color: #475569;
      font-size: 16px;
      font-weight: 700;
    }
    .production-upload-progress-track {
      height: 16px;
      margin-top: 28px;
      overflow: hidden;
      border-radius: 999px;
      background: #e2e8f0;
    }
    .production-upload-progress-bar {
      width: 1%;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, #2563eb, #60a5fa);
      transition: width .2s ease;
    }
    .production-upload-progress-status {
      margin-top: 12px;
      color: #1e3a8a;
      font-size: 17px;
      font-weight: 850;
    }
    @media (max-width: 600px) {
      .production-download-modal { padding: 14px; }
      .production-download-card { padding: 24px 20px 20px; border-radius: 18px; }
      .production-download-title { font-size: 21px; }
      .production-download-description { font-size: 13.5px; }
      .download-completion-guide { padding: 12px; }
      .download-completion-card { padding: 30px 20px 24px; border-radius: 22px; }
      .download-completion-title { font-size: 25px; }
      .download-completion-subtitle,
      .download-completion-instruction { font-size: 15px; }
      .download-work-number-row { flex-direction: column; }
      .download-work-number-copy { min-height: 44px; }
      .download-work-number-value { font-size: 18px; }
      .download-attachment-row { grid-template-columns: 1fr; gap: 8px; }
      .download-completion-note { font-size: 13px; }
      .kakao-consult-float {
        right: 12px;
        bottom: calc(80px + env(safe-area-inset-bottom));
      }
      .kakao-consult-message { display: none; }
      .kakao-consult-badge {
        width: 58px;
        height: 58px;
        flex-basis: 58px;
      }
      .kakao-consult-badge small { font-size: 9px; }
      .kakao-consult-badge strong { font-size: 11px; }
      .production-upload-progress { padding: 12px; }
      .production-upload-progress-card { padding: 38px 22px 32px; border-radius: 22px; }
      .production-upload-progress-title { font-size: 27px; }
      .production-upload-progress-description { font-size: 18px; }
    }

    /* ── 디자인 제출 확인 모달 ── */
    .dl-modal-bg {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.52);
      z-index: 500;
      align-items: center;
      justify-content: center;
    }
    .dl-modal-bg.open { display: flex; }


    /* ── 스타일 미리보기 팝업 ── */
    #style-preview-popup {
      position: fixed;
      z-index: 99999;
      width: 320px;
      background: #fff;
      border-radius: 20px;
      box-shadow: 0 20px 60px rgba(80,40,160,0.15), 0 4px 16px rgba(0,0,0,0.10);
      border: 1px solid #ede9fe;
      padding: 12px 12px 16px;
      pointer-events: none;
      opacity: 0;
      transform: translateX(10px) scale(0.96);
      transition: opacity 0.2s ease, transform 0.2s ease;
    }
    #style-preview-popup.visible {
      opacity: 1;
      transform: translateX(0) scale(1);
    }
    .spp-img-wrap {
      border-radius: 13px;
      overflow: hidden;
      height: 380px;
      background: #f3f3f3;
    }
    .spp-img-wrap img {
      width: 100%;
      height: 112%;
      object-fit: cover;
      object-position: top center;
      display: block;
    }
    .spp-badge {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      font-size: 11px;
      font-weight: 700;
      color: #7c3aed;
      background: #f5f3ff;
      border-radius: 20px;
      padding: 4px 10px;
      margin-top: 11px;
      letter-spacing: -0.01em;
    }
    .spp-title {
      font-size: 15px;
      font-weight: 800;
      color: #111;
      margin-top: 6px;
      letter-spacing: -0.02em;
    }
    .spp-desc {
      font-size: 12px;
      color: #888;
      margin-top: 4px;
      line-height: 1.6;
    }
    .spp-arrow {
      position: absolute;
      right: -8px;
      top: 50%;
      transform: translateY(-50%);
      width: 0; height: 0;
      border-top: 8px solid transparent;
      border-bottom: 8px solid transparent;
      border-left: 8px solid #fff;
      filter: drop-shadow(2px 0 2px rgba(0,0,0,0.06));
    }

    /* ── 제품 안내 바 ── */
    #product-info-bar {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 7px 16px;
      background: #f7f7f7;
      border-bottom: 1px solid #e8e8e8;
      font-family: 'Noto Sans KR', sans-serif;
      font-size: 12px;
      color: #555;
      position: sticky;
      top: 57px;
      z-index: 99;
    }
    #product-info-bar .pib-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      background: #222;
      color: #fff;
      font-size: 11px;
      font-weight: 700;
      padding: 3px 10px;
      border-radius: 20px;
      letter-spacing: 0.2px;
      white-space: nowrap;
    }
    #product-info-bar .pib-size {
      color: #888;
      font-size: 11.5px;
    }

    /* ── AI 시안 기반 고정 제작 안내 ── */
    #sticker-template-notice {
      display: none;
      flex-shrink: 0;
      padding: 8px 16px;
      background: #626262;
      border-bottom: 1px solid #4d4d4d;
      font-family: 'Noto Sans KR', sans-serif;
    }
    #sticker-template-notice.visible { display: block; }
    .stn-card {
      width: min(1180px, 100%);
      margin: 0 auto;
      display: flex;
      align-items: center;
      gap: 18px;
      padding: 11px 16px;
      background: #fff;
      border: 1px solid #e5e5e5;
      box-shadow: 0 3px 10px rgba(0,0,0,.12);
    }
    .stn-title {
      flex: 0 0 auto;
      max-width: 260px;
      color: #ec008c;
      font-size: 15px;
      font-weight: 900;
      line-height: 1.4;
      letter-spacing: -.03em;
    }
    .stn-items {
      flex: 1;
      min-width: 0;
      display: grid;
      grid-template-columns: repeat(var(--stn-count, 3), minmax(0, 1fr));
      gap: 14px;
    }
    .stn-item {
      position: relative;
      min-width: 0;
      padding-left: 12px;
      color: #222;
      font-size: 11px;
      line-height: 1.55;
    }
    .stn-item::before {
      content: '';
      position: absolute;
      top: 1px;
      bottom: 1px;
      left: 0;
      width: 4px;
      border-radius: 4px;
      background: #222;
    }
    .stn-item strong {
      display: block;
      margin-bottom: 1px;
      font-size: 12px;
      font-weight: 900;
      color: inherit;
    }
    .stn-item span { color: #555; }
    .stn-tone-blue { color: #224da8; }
    .stn-tone-blue::before { background: #2f58b0; }
    .stn-tone-pink { color: #ec008c; }
    .stn-tone-pink::before { background: #ec008c; }
    .stn-tone-black { color: #111; }
    .stn-tone-black::before { background: #111; }
    .stn-tone-green { color: #008c4a; }
    .stn-tone-green::before { background: #00a757; }
    #sticker-template-notice[data-variant="piece"] .stn-title {
      padding: 5px 10px;
      background: #ec008c;
      color: #fff;
      white-space: nowrap;
    }
    #sticker-template-notice[data-variant="piece"] .stn-item {
      padding-left: 27px;
    }
    #sticker-template-notice[data-variant="piece"] .stn-item::before {
      content: attr(data-index);
      top: 0;
      bottom: auto;
      width: 20px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: #fbe3f1;
      color: #d9007f;
      font-size: 10px;
      font-weight: 900;
    }
    #sticker-template-notice[data-variant="white-ink"] .stn-card {
      background: #111;
      border-color: #292929;
    }
    #sticker-template-notice[data-variant="white-ink"] .stn-title { color: #ff2da5; }
    #sticker-template-notice[data-variant="white-ink"] .stn-item { color: #fff; }
    #sticker-template-notice[data-variant="white-ink"] .stn-item span { color: #ddd; }
    @media (max-width: 900px) {
      #sticker-template-notice { padding: 6px 8px; }
      .stn-card { display: block; padding: 9px 10px; }
      .stn-title { max-width: none; margin-bottom: 7px; font-size: 13px; }
      .stn-items {
        display: flex;
        gap: 9px;
        overflow-x: auto;
        padding-bottom: 2px;
        scrollbar-width: thin;
      }
      .stn-item { flex: 0 0 230px; font-size: 10px; }
      .stn-item strong { font-size: 11px; }
      #sticker-template-notice[data-variant="piece"] .stn-title {
        display: inline-block;
        white-space: normal;
      }
    }

    /* ── AI 프롬프트 툴바 팝업 ── */
    #ai-prompt-popup {
      position: fixed;
      z-index: 9999;
      width: 300px;
      background: #fff;
      border-radius: 16px;
      box-shadow: 0 12px 40px rgba(80,40,160,0.18), 0 2px 8px rgba(0,0,0,0.10);
      border: 1px solid #ede9fe;
      padding: 0 0 14px;
      pointer-events: none;
      opacity: 0;
      transform: translateY(-8px) scale(0.96);
      transition: opacity 0.18s ease, transform 0.18s ease;
    }
    #ai-prompt-popup.visible {
      opacity: 1;
      transform: translateY(0) scale(1);
      pointer-events: auto;
    }
    .app-arrow-up {
      position: absolute;
      top: -8px;
      left: 50%;
      transform: translateX(-50%);
      width: 0; height: 0;
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      border-bottom: 8px solid #ede9fe;
      z-index: 1;
    }
    .app-arrow-up::after {
      content: '';
      position: absolute;
      top: 1px;
      left: -7px;
      width: 0; height: 0;
      border-left: 7px solid transparent;
      border-right: 7px solid transparent;
      border-bottom: 7px solid #fff;
    }
    .app-img-wrap {
      position: relative;
      height: 230px;
      background: #f0f0f0;
      overflow: hidden;
      border-radius: 16px 16px 0 0;
    }
    .app-img-wrap img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center;
      display: block;
      transition: opacity 0.15s ease;
    }
    .app-badge {
      position: absolute;
      top: 9px;
      left: 9px;
      background: rgba(0,0,0,0.52);
      color: #fff;
      font-size: 10px;
      font-weight: 700;
      padding: 3px 9px;
      border-radius: 20px;
      letter-spacing: 0.2px;
    }
    .app-tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      padding: 10px 11px 2px;
    }
    .app-tab {
      flex: 0 0 auto;
      text-align: center;
      padding: 6px 11px;
      border-radius: 30px;
      font-size: 11.5px;
      font-weight: 600;
      color: #666;
      cursor: pointer;
      border: 1.5px solid #e0e0e0;
      background: #f8f8f8;
      transition: all 0.14s;
      font-family: 'Noto Sans KR', sans-serif;
      white-space: nowrap;
    }
    .app-tab:hover { background: #f0eaff; border-color: #c4b5fd; color: #7c3aed; }
    .app-tab.active { background: #7c3aed; border-color: #7c3aed; color: #fff; }
    .app-section-label {
      font-size: 10px; font-weight: 700; color: #b0b0b0;
      padding: 9px 13px 0; letter-spacing: 0.3px;
    }
    /* ── 사이즈 맞춤 도구 섹션 (스타일 변환과 시각적으로 구분) ── */
    .app-section-label.app-section-tool {
      margin-top: 8px; padding-top: 9px;
      border-top: 1px dashed #e8e8e8;
    }
    .app-tabs.app-tabs-tool { padding-top: 6px; }
    .app-tab-tool:hover  { background: #e7f7ef; border-color: #7fd4a8; color: #0e9f5d; }
    .app-tab-tool.active { background: #0ea96a; border-color: #0ea96a; color: #fff; }
    .app-title {
      font-size: 14px;
      font-weight: 800;
      color: #111;
      padding: 8px 13px 2px;
      letter-spacing: -0.02em;
    }
    .app-desc {
      font-size: 11.5px;
      color: #888;
      padding: 0 13px 10px;
      line-height: 1.65;
    }
    .app-cta-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      margin: 0 11px 6px;
      padding: 10px 14px;
      background: linear-gradient(135deg, #7c3aed, #9333ea);
      color: #fff;
      border: none;
      border-radius: 10px;
      font-size: 13px;
      font-weight: 700;
      font-family: 'Noto Sans KR', sans-serif;
      cursor: pointer;
      width: calc(100% - 22px);
      transition: opacity 0.15s, background 0.22s;
      letter-spacing: -0.01em;
    }
    .app-cta-btn:hover { opacity: 0.88; }
    .app-cta-btn.copied { background: linear-gradient(135deg, #059669, #047857); }
    .app-hint {
      font-size: 10.5px;
      color: #bbb;
      text-align: center;
      padding: 2px 12px 0;
      line-height: 1.5;
    }

    /* 작업판 카메라: 우측 설정 패널과 실제 제작 좌표는 고정하고 가운데 보기만 움직인다. */
    .canvas-area {
      display: block;
      min-width: 0;
      min-height: 0;
      position: relative;
      padding: 0;
      overflow: hidden;
    }
    .cutline-guide-modal {
      position: fixed;
      inset: 0;
      z-index: 100200;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      background: rgba(24, 20, 31, .58);
      backdrop-filter: blur(3px);
    }
    .cutline-guide-modal[hidden] { display: none; }
    .cutline-guide-card {
      position: relative;
      width: min(560px, calc(100vw - 32px));
      max-height: calc(100vh - 32px);
      overflow: auto;
      padding: 28px 30px 24px;
      border: 1px solid rgba(124, 58, 237, .13);
      border-radius: 20px;
      background: #fff;
      box-shadow: 0 24px 70px rgba(20, 13, 29, .28);
      text-align: center;
      color: #28222f;
    }
    .cutline-guide-close {
      position: absolute;
      top: 12px;
      right: 14px;
      width: 34px;
      height: 34px;
      border: 0;
      border-radius: 50%;
      background: #f5f2f8;
      color: #6d6476;
      font: 400 25px/1 'Noto Sans KR', sans-serif;
      cursor: pointer;
    }
    .cutline-guide-close:hover { background: #eee8f5; color: #332b3d; }
    .cutline-guide-eyebrow {
      display: inline-flex;
      padding: 6px 11px;
      border-radius: 999px;
      background: #f1eaff;
      color: #6d35d7;
      font-size: 11px;
      font-weight: 800;
    }
    .cutline-guide-card h2 {
      margin: 12px 0 9px;
      font-size: 21px;
      line-height: 1.42;
      letter-spacing: -.03em;
    }
    .cutline-guide-card h2 em { color: #6d35d7; font-style: normal; }
    .cutline-guide-card p {
      margin: 0 0 16px;
      color: #665e70;
      font-size: 12.5px;
      line-height: 1.7;
    }
    .cutline-guide-card p strong { color: #342b40; }
    .cutline-guide-visual {
      position: relative;
    }
    .cutline-guide-image {
      display: block;
      width: 100%;
      height: auto;
      aspect-ratio: 3 / 2;
      object-fit: cover;
      border: 1px solid #eee9f3;
      border-radius: 14px;
      background: #faf9fc;
    }
    .cutline-guide-image-label {
      position: absolute;
      top: 12.5%;
      z-index: 1;
      transform: translateX(-50%);
      min-width: clamp(76px, 10vw, 132px);
      max-width: 42%;
      padding: 7px 12px;
      border-radius: 999px;
      background: #f1eaff;
      box-shadow: 0 0 0 3px #f1eaff;
      color: #29175c;
      font-size: clamp(8px, 1.15vw, 13px);
      font-weight: 800;
      line-height: 1.2;
      white-space: normal;
    }
    .cutline-guide-image-label--before { left: 25.5%; }
    .cutline-guide-image-label--after { left: 71.5%; }
    .cutline-guide-confirm {
      width: 100%;
      min-height: 46px;
      margin-top: 17px;
      border: 0;
      border-radius: 11px;
      background: #222;
      color: #fff;
      font: 800 14px 'Noto Sans KR', sans-serif;
      cursor: pointer;
    }
    .cutline-guide-confirm:hover { background: #111; }
    .cutline-guide-confirm:focus-visible,
    .cutline-guide-close:focus-visible { outline: 3px solid rgba(124, 58, 237, .28); outline-offset: 2px; }
    @media (max-width: 640px) {
      .cutline-guide-modal { padding: 12px; }
      .cutline-guide-card { padding: 24px 18px 18px; border-radius: 16px; }
      .cutline-guide-card h2 { font-size: 18px; }
      .cutline-guide-card p { font-size: 11.5px; }
      .cutline-guide-image-label { padding: 5px 8px; }
    }
    .canvas-scroll-viewport {
      position: absolute;
      inset: 0 0 70px;
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
      padding: 24px 20px;
      overflow-x: scroll;
      overflow-y: scroll;
      overscroll-behavior: contain;
      scrollbar-gutter: stable both-edges;
    }
    .canvas-scroll-viewport.pan-ready,
    .canvas-scroll-viewport.pan-ready canvas { cursor: grab !important; }
    .canvas-scroll-viewport.is-panning,
    .canvas-scroll-viewport.is-panning canvas { cursor: grabbing !important; }
    .canvas-scroll-viewport.is-panning,
    .canvas-scroll-viewport.is-touch-navigating { user-select: none; }
    .canvas-zoom-shell {
      position: relative;
      flex: 0 0 auto;
      min-width: 0;
      min-height: 0;
      margin: auto;
    }
    .canvas-zoom-shell > #canvas-outer {
      position: absolute;
      left: 0;
      top: 0;
      transform-origin: top left;
    }
    .pvc-kisscut-dimensions {
      position: absolute;
      z-index: 5;
      display: none;
      color: #7b7183;
      font-family: 'Noto Sans KR', sans-serif;
      font-size: 10px;
      font-weight: 800;
      pointer-events: none;
      user-select: none;
    }
    .pvc-kisscut-dimensions:not([hidden]) { display: block; }
    .pvc-kisscut-dimension-horizontal,
    .pvc-kisscut-dimension-vertical {
      position: absolute;
    }
    .pvc-kisscut-dimension-horizontal {
      top: -28px;
      left: 0;
      width: 100%;
      height: 32px;
    }
    .pvc-kisscut-dimension-vertical {
      top: 0;
      left: -52px;
      width: 40px;
      height: 100%;
    }
    .pvc-kisscut-dimension-line {
      position: absolute;
      display: block;
      color: #94889e;
    }
    .pvc-kisscut-dimension-horizontal .pvc-kisscut-dimension-line {
      top: 20px;
      right: 0;
      left: 0;
      border-top: 1.5px solid currentColor;
    }
    .pvc-kisscut-dimension-vertical .pvc-kisscut-dimension-line {
      top: 0;
      bottom: 0;
      left: 20px;
      border-left: 1.5px solid currentColor;
    }
    .pvc-kisscut-dimension-tick {
      position: absolute;
      display: block;
      background: #94889e;
    }
    .pvc-kisscut-dimension-horizontal .pvc-kisscut-dimension-tick {
      top: 13px;
      width: 1.5px;
      height: 15px;
    }
    .pvc-kisscut-dimension-horizontal .pvc-kisscut-dimension-tick-start { left: 0; }
    .pvc-kisscut-dimension-horizontal .pvc-kisscut-dimension-tick-end { right: 0; }
    .pvc-kisscut-dimension-vertical .pvc-kisscut-dimension-tick {
      left: 13px;
      width: 15px;
      height: 1.5px;
    }
    .pvc-kisscut-dimension-vertical .pvc-kisscut-dimension-tick-start { top: 0; }
    .pvc-kisscut-dimension-vertical .pvc-kisscut-dimension-tick-end { bottom: 0; }
    .pvc-kisscut-dimension-arrow {
      position: absolute;
      display: block;
      width: 0;
      height: 0;
      border-top: 4px solid transparent;
      border-bottom: 4px solid transparent;
    }
    .pvc-kisscut-dimension-horizontal .pvc-kisscut-dimension-arrow {
      top: -5px;
    }
    .pvc-kisscut-dimension-horizontal .pvc-kisscut-dimension-arrow-start {
      left: -1px;
      border-right: 6px solid currentColor;
    }
    .pvc-kisscut-dimension-horizontal .pvc-kisscut-dimension-arrow-end {
      right: -1px;
      border-left: 6px solid currentColor;
    }
    .pvc-kisscut-dimension-vertical .pvc-kisscut-dimension-arrow {
      left: -5px;
      border-top: 0;
      border-right: 4px solid transparent;
      border-left: 4px solid transparent;
    }
    .pvc-kisscut-dimension-vertical .pvc-kisscut-dimension-arrow-start {
      top: -1px;
      border-bottom: 6px solid currentColor;
    }
    .pvc-kisscut-dimension-vertical .pvc-kisscut-dimension-arrow-end {
      bottom: -1px;
      border-top: 6px solid currentColor;
    }
    .pvc-kisscut-dimension-label {
      position: absolute;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 2px 7px;
      border: 1px solid rgba(148,136,158,.24);
      border-radius: 999px;
      background: rgba(255,255,255,.94);
      box-shadow: 0 2px 7px rgba(58,43,72,.08);
      white-space: nowrap;
      line-height: 1.25;
    }
    .pvc-kisscut-dimension-horizontal .pvc-kisscut-dimension-label {
      top: 8px;
      left: 50%;
      transform: translateX(-50%);
    }
    .pvc-kisscut-dimension-vertical .pvc-kisscut-dimension-label {
      top: 50%;
      left: 20px;
      transform: translate(-50%, -50%) rotate(-90deg);
    }
    .canvas-detail-overlay {
      position: absolute;
      z-index: 1;
      display: none;
      pointer-events: none;
      image-rendering: auto;
    }
    .canvas-zoom-controls {
      position: absolute;
      left: 50%;
      bottom: 12px;
      z-index: 70;
      display: flex;
      align-items: center;
      gap: 0;
      width: max-content;
      max-width: calc(100% - 36px);
      margin: 0;
      padding: 6px;
      border: 1px solid rgba(0,0,0,0.12);
      border-radius: 12px;
      background: rgba(255,255,255,0.96);
      box-shadow: 0 5px 18px rgba(0,0,0,0.14);
      transform: translateX(-50%);
      backdrop-filter: blur(6px);
    }
    .canvas-zoom-group {
      display: flex;
      align-items: center;
      gap: 5px;
    }
    .canvas-zoom-controls button {
      height: 32px;
      min-width: 34px;
      padding: 0 9px;
      border: 1px solid #dedede;
      border-radius: 8px;
      background: #fff;
      color: #222;
      font-family: 'Noto Sans KR', sans-serif;
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
    }
    .canvas-zoom-controls button:hover:not(:disabled) { background: #f3f0fa; border-color: #b8a7d8; }
    .canvas-zoom-controls button:disabled { color: #bbb; cursor: default; }
    .canvas-sheet-workspace {
      position: absolute;
      top: 12px;
      left: 14px;
      right: 14px;
      z-index: 72;
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding: 10px;
      border: 1px solid rgba(124,58,237,.2);
      border-radius: 15px;
      background: rgba(255,255,255,.97);
      box-shadow: 0 8px 26px rgba(35,23,55,.13);
      backdrop-filter: blur(8px);
    }
    .canvas-sheet-workspace[hidden] { display: none; }
    .pvc-kisscut-design-workspace {
      position: absolute;
      inset: 0;
      z-index: 72;
      pointer-events: none;
    }
    .pvc-kisscut-design-workspace[hidden] { display: none; }
    .pvc-kisscut-design-carousel {
      position: absolute;
      inset: 0;
      overflow: hidden;
      pointer-events: none;
    }
    .pvc-kisscut-carousel-card {
      position: absolute;
      top: 50%;
      z-index: 2;
      display: flex;
      width: clamp(170px, 19vw, 238px);
      aspect-ratio: 86.91 / 127.52;
      flex-direction: column;
      gap: 7px;
      padding: 10px;
      border: 1px solid #d9d4de;
      border-radius: 14px;
      background: rgba(255,255,255,.98);
      box-shadow: 0 10px 28px rgba(38,31,45,.16);
      color: #403948;
      font-family: 'Noto Sans KR', sans-serif;
      cursor: pointer;
      opacity: .74;
      pointer-events: auto;
      transition: opacity .18s ease, transform .18s ease, box-shadow .18s ease;
    }
    .pvc-kisscut-carousel-card[hidden] { display: none; }
    .pvc-kisscut-carousel-card:hover,
    .pvc-kisscut-carousel-card:focus-visible {
      z-index: 4;
      opacity: .94;
      box-shadow: 0 12px 32px rgba(72,45,96,.24);
      outline: none;
    }
    .pvc-kisscut-carousel-card.has-placement-warning {
      border-color: #ef4444;
      background: #fff7f7;
      box-shadow: 0 0 0 2px rgba(239,68,68,.18), 0 10px 28px rgba(185,28,28,.20);
      opacity: 1;
    }
    .pvc-kisscut-carousel-card.has-placement-warning canvas {
      border-color: #ef4444;
      box-shadow: inset 0 0 0 2px rgba(239,68,68,.18);
    }
    .pvc-kisscut-carousel-card-head span.placement-warning,
    #pvc-kisscut-design-status.placement-warning {
      background: #fee2e2;
      color: #b91c1c;
    }
    .pvc-kisscut-carousel-card-left {
      left: -28px;
      transform: translateY(-50%) scale(.86);
    }
    .pvc-kisscut-carousel-card-left:hover,
    .pvc-kisscut-carousel-card-left:focus-visible {
      transform: translate(10px, -50%) scale(.9);
    }
    .pvc-kisscut-carousel-card-right {
      right: -96px;
      transform: translateY(-50%) scale(.86);
    }
    .pvc-kisscut-carousel-card-right:hover,
    .pvc-kisscut-carousel-card-right:focus-visible {
      transform: translate(-10px, -50%) scale(.9);
    }
    .pvc-kisscut-carousel-card-head {
      display: flex;
      min-height: 25px;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      font-size: 11px;
    }
    .pvc-kisscut-carousel-card-head strong {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .pvc-kisscut-carousel-card-head span,
    .pvc-kisscut-carousel-card-foot {
      flex: none;
      padding: 3px 7px;
      border-radius: 999px;
      background: #eee8f8;
      color: #6d28d9;
      font-size: 9px;
      font-weight: 800;
    }
    .pvc-kisscut-carousel-card canvas {
      display: block;
      width: 100%;
      min-height: 0;
      flex: 1;
      border: 1px solid #ece9ee;
      background: #fff;
      object-fit: fill;
    }
    .pvc-kisscut-carousel-card-foot {
      align-self: center;
      min-width: 42px;
      text-align: center;
    }
    .pvc-kisscut-carousel-card.add-mode canvas { visibility: hidden; }
    .pvc-kisscut-carousel-add-placeholder {
      position: absolute;
      inset: 44px 10px 39px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 8px;
      border: 1px dashed #bbb5c0;
      background: #fbfafc;
      color: #88818d;
      font-size: 11px;
      font-weight: 700;
    }
    .pvc-kisscut-carousel-add-placeholder[hidden] { display: none; }
    .pvc-kisscut-carousel-add-icon {
      font-size: 30px;
      font-weight: 300;
      line-height: 1;
    }
    .pvc-kisscut-design-nav,
    .pvc-kisscut-quantity-dock {
      position: absolute;
      left: 50%;
      display: flex;
      align-items: center;
      transform: translateX(-50%);
      pointer-events: auto;
    }
    .pvc-kisscut-design-nav {
      top: 12px;
      z-index: 6;
      gap: 6px;
      padding: 6px;
      border: 1px solid rgba(0,0,0,.12);
      border-radius: 12px;
      background: rgba(255,255,255,.97);
      box-shadow: 0 5px 18px rgba(0,0,0,.13);
      backdrop-filter: blur(6px);
    }
    .pvc-kisscut-design-nav button,
    .pvc-kisscut-design-quantity button {
      height: 30px;
      min-width: 30px;
      padding: 0 9px;
      border: 1px solid #ded8e5;
      border-radius: 8px;
      background: #fff;
      color: #3c3445;
      font-family: 'Noto Sans KR', sans-serif;
      font-size: 11px;
      font-weight: 800;
      cursor: pointer;
    }
    .pvc-kisscut-design-nav button:hover:not(:disabled),
    .pvc-kisscut-design-quantity button:hover:not(:disabled) {
      border-color: #9c7bce;
      background: #f6f1ff;
      color: #6d28d9;
    }
    .pvc-kisscut-design-nav button:disabled,
    .pvc-kisscut-design-quantity button:disabled {
      color: #c8c2cc;
      cursor: default;
    }
    .pvc-kisscut-design-current {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-width: 88px;
      padding: 0 6px;
    }
    #pvc-kisscut-design-position {
      color: #30283a;
      font-size: 11px;
      white-space: nowrap;
    }
    #pvc-kisscut-design-status {
      margin-top: 1px;
      color: #91899a;
      font-size: 8px;
      font-weight: 700;
      white-space: nowrap;
    }
    .pvc-kisscut-design-workspace.has-placement-warning .pvc-kisscut-design-current {
      border-radius: 8px;
      background: #fff1f2;
    }
    .pvc-kisscut-design-workspace.has-placement-warning #pvc-kisscut-design-position {
      color: #b91c1c;
      font-weight: 800;
    }
    #pvc-kisscut-design-add {
      border-color: #7c3aed;
      color: #6d28d9;
    }
    #pvc-kisscut-design-remove {
      border-color: transparent;
      background: transparent;
      color: #91899a;
      font-size: 9px;
    }
    #pvc-kisscut-design-remove:hover:not(:disabled) {
      border-color: #fecaca;
      background: #fff1f2;
      color: #dc2626;
    }
    .pvc-kisscut-quantity-dock {
      bottom: 18px;
      z-index: 6;
      gap: 9px;
      padding: 6px 8px;
      border: 1px solid rgba(0,0,0,.12);
      border-radius: 14px;
      background: rgba(255,255,255,.97);
      box-shadow: 0 5px 18px rgba(0,0,0,.14);
      backdrop-filter: blur(6px);
    }
    .pvc-kisscut-sheet-size {
      padding: 0 5px;
      color: #756d7d;
      font-size: 9px;
      font-weight: 700;
      white-space: nowrap;
    }
    .pvc-kisscut-design-quantity {
      display: inline-flex;
      align-items: center;
      overflow: hidden;
      border: 1px solid #ded6e8;
      border-radius: 999px;
      background: #fff;
    }
    .pvc-kisscut-design-quantity button {
      width: 29px;
      height: 29px;
      padding: 0;
      border: 0;
      border-radius: 50%;
      font-size: 15px;
    }
    #pvc-kisscut-design-quantity {
      min-width: 40px;
      color: #26202d;
      font-size: 11px;
      text-align: center;
      font-variant-numeric: tabular-nums;
    }
    #pvc-kisscut-design-total {
      flex: none;
      padding: 6px 9px;
      border-radius: 999px;
      background: #efe7ff;
      color: #6d28d9;
      font-size: 10px;
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }
    #pvc-kisscut-design-total.complete {
      background: #e8f8ee;
      color: #147a45;
    }
    body.pvc-kisscut-design-manager-mode .pvc-kisscut-design-carousel {
      overflow: visible;
    }
    body.pvc-kisscut-design-manager-mode .pvc-kisscut-carousel-card-left {
      left: clamp(16px, calc(50% - 520px), 260px);
    }
    body.pvc-kisscut-design-manager-mode .pvc-kisscut-carousel-card-right {
      right: clamp(16px, calc(50% - 520px), 260px);
    }
    .pvc-kisscut-submit-bar { display: none; }
    .pvc-kisscut-submit-hint {
      color: #6f6678;
      font-size: 11px;
      font-weight: 600;
      line-height: 1.4;
      text-align: center;
    }
    .pvc-kisscut-submit-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      min-width: 250px;
      min-height: 44px;
      padding: 0 20px;
      border: 0;
      border-radius: 12px;
      background: #111;
      color: #fff;
      font-family: 'Noto Sans KR', sans-serif;
      font-size: 14px;
      font-weight: 800;
      cursor: pointer;
      box-shadow: 0 8px 24px rgba(0,0,0,.18);
    }
    .pvc-kisscut-submit-button:hover:not(:disabled) { background: #333; }
    .pvc-kisscut-submit-button:disabled {
      background: #d8d5dc;
      color: #8f8996;
      cursor: not-allowed;
      box-shadow: 0 5px 14px rgba(0,0,0,.08);
    }
    @media (min-width: 681px) {
      body.pvc-kisscut-design-manager-mode {
        --pvc-kisscut-side-rail: 0px;
        --pvc-kisscut-canvas-bottom: 74px;
        --pvc-kisscut-bottom-bar-height: 66px;
      }
      body.pvc-kisscut-design-manager-mode .right-sidebar { display: none; }

      /* ── 하단 통합 바 ──────────────────────────────────────────────
         제작 크기·수량 / 줌 / 전송이 각자 떠 있으면 좁은 화면에서 서로 겹치고,
         줌은 z-index 가 낮아 카카오 버튼 밑에 깔려 보이지 않았다.
         셋을 화면 맨 아래 한 줄(왼쪽·가운데·오른쪽)에 고정하고, 캔버스는 그 위에서
         끝나게 해서 작업 영역을 가리지 않도록 한다. */
      body.pvc-kisscut-design-manager-mode::after {
        content: '';
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: var(--pvc-kisscut-bottom-bar-height);
        z-index: 60;
        border-top: 1px solid rgba(0,0,0,.10);
        background: rgba(255,255,255,.97);
        box-shadow: 0 -4px 18px rgba(0,0,0,.07);
        backdrop-filter: blur(6px);
        pointer-events: none;
      }
      body.pvc-kisscut-design-manager-mode .canvas-scroll-viewport {
        inset: 66px var(--pvc-kisscut-side-rail) var(--pvc-kisscut-canvas-bottom) 0;
      }
      body.pvc-kisscut-design-manager-mode .pvc-kisscut-design-nav {
        top: 12px;
      }
      body.pvc-kisscut-design-manager-mode .pvc-kisscut-dimensions {
        position: fixed;
      }
      /* 가운데 아래 — 제작 크기 + 매수. 확대/축소는 그 위로 분리한다. */
      body.pvc-kisscut-design-manager-mode .pvc-kisscut-quantity-dock {
        position: fixed;
        left: 50%;
        bottom: 11px;
        z-index: 502;
        transform: translateX(-50%);
        border: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
      }
      /* 가운데 — 줌 (더 이상 다른 요소에 가리지 않는다) */
      body.pvc-kisscut-design-manager-mode .canvas-zoom-controls {
        position: fixed;
        bottom: 64px;
        z-index: 502;
        border: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
      }
      /* 오른쪽 — 안내 문구 + 전송 버튼 */
      body.pvc-kisscut-design-manager-mode .pvc-kisscut-submit-bar {
        position: fixed;
        left: auto;
        right: 20px;
        bottom: 11px;
        z-index: 502;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-direction: row;
        gap: 12px;
        min-width: 0;
        max-width: calc(100vw - 40px);
      }
      body.pvc-kisscut-design-manager-mode .pvc-kisscut-submit-hint {
        display: none;
        max-width: 220px;
        text-align: right;
      }
      body.pvc-kisscut-design-manager-mode .pvc-kisscut-submit-button {
        min-width: 216px;
        min-height: 54px;
        border-radius: 14px;
        font-size: 16px;
      }
      /* 카카오 상담은 하단 바 위로 띄운다. 바 안에 두면 전송 버튼과 붙어 오인 클릭이 나고,
         화면 중앙에 두면 디자인 카드를 가린다. 카드 아래·바 위의 빈 구간에 놓는다. */
      body.pvc-kisscut-design-manager-mode .kakao-consult-float {
        right: 20px;
        bottom: 120px;
        top: auto;
        transform: none;
        z-index: 480;
      }
    }
    /* 브라우저 확대·Windows 배율 때문에 유효 화면이 줄어든 PC용 간소화 배치.
       작업판 오른쪽을 제품 선택/새 디자인 전용 레일로 비워 두고, 하단 기능은
       좌·중·우로 분리해 어떤 배율에서도 서로 겹치지 않게 한다. */
    /* 큰 작업판 자유 편집: 비어 있는 우측 패널을 없애고 작업판에 화면 폭을 돌려준다. */
    @media (min-width: 681px) {
      body.sheet-freeform-layout-mode .right-sidebar {
        display: none;
      }
      body.sheet-freeform-layout-mode .pvc-kisscut-submit-bar {
        position: fixed;
        right: 20px;
        bottom: 12px;
        z-index: 502;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        min-width: 0;
      }
      body.sheet-freeform-layout-mode .pvc-kisscut-submit-hint {
        display: none;
      }
      body.sheet-freeform-layout-mode .pvc-kisscut-submit-button {
        min-width: 216px;
        min-height: 54px;
        border-radius: 14px;
        font-size: 16px;
      }
      body.sheet-freeform-layout-mode .kakao-consult-float {
        top: auto;
        right: 20px;
        bottom: 84px;
        transform: none;
      }
    }

    @media (min-width: 681px) and (max-width: 1500px),
           (min-width: 681px) and (max-height: 760px) {
      body.pvc-kisscut-design-manager-mode {
        --pvc-kisscut-side-rail: 244px;
        --pvc-kisscut-canvas-bottom: 78px;
      }
      body.pvc-kisscut-design-manager-mode .toolbar {
        padding: 4px 8px;
      }
      body.pvc-kisscut-design-manager-mode .tool-btn {
        gap: 1px;
        padding: 4px 6px;
        font-size: 9px;
      }
      body.pvc-kisscut-design-manager-mode .tool-btn svg {
        width: 20px;
        height: 20px;
      }
      body.pvc-kisscut-design-manager-mode .canvas-scroll-viewport {
        padding-right: 14px;
        padding-left: 14px;
      }
      body.pvc-kisscut-design-manager-mode .pvc-kisscut-design-nav,
      body.pvc-kisscut-design-manager-mode .canvas-zoom-controls {
        left: calc(50% - 122px);
      }
      body.pvc-kisscut-design-manager-mode .pvc-kisscut-product-switcher {
        top: 10px;
        right: 14px;
        width: 216px;
      }
      body.pvc-kisscut-design-manager-mode .pvc-kisscut-design-carousel {
        overflow: hidden;
      }
      body.pvc-kisscut-design-manager-mode .pvc-kisscut-carousel-card-left,
      body.pvc-kisscut-design-manager-mode .pvc-kisscut-carousel-card-right {
        width: 186px;
      }
      body.pvc-kisscut-design-manager-mode .pvc-kisscut-carousel-card-left {
        left: 14px;
        transform: translateY(-50%);
      }
      body.pvc-kisscut-design-manager-mode .pvc-kisscut-carousel-card-right {
        right: 14px;
        transform: translateY(-50%);
      }
      body.pvc-kisscut-design-manager-mode .pvc-kisscut-carousel-card-left:hover,
      body.pvc-kisscut-design-manager-mode .pvc-kisscut-carousel-card-left:focus-visible {
        transform: translate(4px, -50%);
      }
      body.pvc-kisscut-design-manager-mode .pvc-kisscut-carousel-card-right:hover,
      body.pvc-kisscut-design-manager-mode .pvc-kisscut-carousel-card-right:focus-visible {
        transform: translate(-4px, -50%);
      }
      body.pvc-kisscut-design-manager-mode .pvc-kisscut-quantity-dock {
        right: auto;
        left: 16px;
        max-width: calc(100vw - 260px);
        transform: none;
      }
      body.pvc-kisscut-design-manager-mode .canvas-zoom-controls {
        bottom: 70px;
      }
      body.pvc-kisscut-design-manager-mode .pvc-kisscut-submit-bar {
        right: 16px;
      }
      body.pvc-kisscut-design-manager-mode .pvc-kisscut-submit-hint {
        display: none;
      }
      body.pvc-kisscut-design-manager-mode .pvc-kisscut-submit-button {
        min-width: 200px;
      }
      body.pvc-kisscut-design-manager-mode .kakao-consult-float {
        top: 188px;
        right: 16px;
        bottom: auto;
      }
      body.pvc-kisscut-design-manager-mode .kakao-consult-message {
        display: none;
      }
      body.pvc-kisscut-design-manager-mode .kakao-consult-badge {
        width: 52px;
        height: 52px;
        flex-basis: 52px;
      }
    }
    @media (min-width: 681px) and (max-width: 900px) {
      body.pvc-kisscut-design-manager-mode {
        --pvc-kisscut-side-rail: 196px;
      }
      body.pvc-kisscut-design-manager-mode .pvc-kisscut-design-nav,
      body.pvc-kisscut-design-manager-mode .canvas-zoom-controls {
        left: calc(50% - 98px);
      }
      body.pvc-kisscut-design-manager-mode .pvc-kisscut-product-switcher {
        right: 10px;
        width: 176px;
        gap: 5px;
        padding-right: 7px;
        padding-left: 7px;
      }
      body.pvc-kisscut-design-manager-mode .pvc-kisscut-product-switcher-label {
        display: none;
      }
      body.pvc-kisscut-design-manager-mode .pvc-kisscut-carousel-card-left,
      body.pvc-kisscut-design-manager-mode .pvc-kisscut-carousel-card-right {
        width: 164px;
      }
      body.pvc-kisscut-design-manager-mode .pvc-kisscut-carousel-card-left { left: 10px; }
      body.pvc-kisscut-design-manager-mode .pvc-kisscut-carousel-card-right { right: 10px; }
      body.pvc-kisscut-design-manager-mode .pvc-kisscut-sheet-size {
        display: none;
      }
      body.pvc-kisscut-design-manager-mode .pvc-kisscut-quantity-dock {
        left: 10px;
        max-width: calc(100vw - 210px);
      }
      body.pvc-kisscut-design-manager-mode .pvc-kisscut-submit-bar { right: 10px; }
      body.pvc-kisscut-design-manager-mode .pvc-kisscut-submit-button {
        min-width: 176px;
        padding-right: 14px;
        padding-left: 14px;
        font-size: 14px;
      }
      body.pvc-kisscut-design-manager-mode .kakao-consult-float { right: 10px; }
      body.pvc-kisscut-design-manager-mode #pvc-kisscut-design-remove {
        display: none;
      }
    }
    @media (min-width: 681px) and (max-height: 700px) {
      body.pvc-kisscut-design-manager-mode .pvc-kisscut-carousel-card-left,
      body.pvc-kisscut-design-manager-mode .pvc-kisscut-carousel-card-right {
        width: 154px;
      }
      body.pvc-kisscut-design-manager-mode .kakao-consult-float {
        top: 184px;
      }
    }
    /* 넉넉한 화면에서만 안내 문구를 함께 보여준다 */
    @media (min-width: 1501px) and (min-height: 761px) {
      body.pvc-kisscut-design-manager-mode .pvc-kisscut-submit-hint { display: block; }
    }
    @media (max-width: 680px) {
      .pvc-kisscut-dimensions { display: none !important; }
    }
    body.pvc-kisscut-design-manager-mode .canvas-minimap { display: none !important; }
    .canvas-sheet-workspace-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }
    .canvas-sheet-workspace-title {
      display: flex;
      align-items: baseline;
      gap: 8px;
      min-width: 0;
    }
    .canvas-sheet-workspace-title strong {
      color: #2f2340;
      font-size: 13px;
      white-space: nowrap;
    }
    #canvas-sheet-progress {
      overflow: hidden;
      color: #746b80;
      font-size: 10px;
      font-weight: 700;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    #btn-canvas-sheet-show-all {
      flex: none;
      height: 28px;
      padding: 0 10px;
      border: 1px solid #d8c9ef;
      border-radius: 8px;
      background: #fff;
      color: #6941a5;
      font: 800 10px 'Noto Sans KR', sans-serif;
      cursor: pointer;
    }
    #btn-canvas-sheet-show-all:hover,
    #btn-canvas-sheet-show-all.active {
      border-color: #7c3aed;
      background: #f3edff;
    }
    .canvas-sheet-cards {
      display: grid;
      grid-template-columns: repeat(8, minmax(76px, 1fr));
      gap: 7px;
      overflow-x: auto;
      padding: 1px 1px 3px;
      scrollbar-width: thin;
    }
    .canvas-sheet-card {
      min-width: 76px;
      padding: 5px;
      border: 1.5px solid #e3ddec;
      border-radius: 10px;
      background: #fff;
      color: #51485d;
      font-family: 'Noto Sans KR', sans-serif;
      cursor: pointer;
      text-align: left;
      transition: border-color .15s, box-shadow .15s, transform .15s;
    }
    .canvas-sheet-card:hover {
      border-color: #a78bda;
      transform: translateY(-1px);
    }
    .canvas-sheet-card.active {
      border-color: #7c3aed;
      box-shadow: 0 0 0 2px rgba(124,58,237,.14);
    }
    .canvas-sheet-card:focus-visible {
      outline: 2px solid #7c3aed;
      outline-offset: 2px;
    }
    .canvas-sheet-card-preview {
      position: relative;
      display: block;
      height: 38px;
      overflow: hidden;
      border: 1px solid #ece8f1;
      border-radius: 6px;
      background: linear-gradient(135deg,#fbfaff,#f1edf7);
    }
    .canvas-sheet-card-preview canvas {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
    .canvas-sheet-card-number {
      position: absolute;
      top: 3px;
      left: 3px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 18px;
      height: 18px;
      border-radius: 6px;
      background: rgba(32,24,43,.86);
      color: #fff;
      font-size: 9px;
      font-weight: 900;
    }
    .canvas-sheet-card-label {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 4px;
      margin-top: 4px;
    }
    .canvas-sheet-card-label strong { font-size: 10px; white-space: nowrap; }
    .canvas-sheet-card-status {
      overflow: hidden;
      color: #9991a3;
      font-size: 8px;
      font-weight: 700;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .canvas-sheet-card.complete .canvas-sheet-card-status { color: #13864c; }
    .canvas-sheet-view {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      min-height: 31px;
      padding-top: 1px;
    }
    .canvas-sheet-view[hidden] { display: none; }
    .canvas-sheet-active-help {
      min-width: 0;
      overflow: hidden;
      color: #62586e;
      font-size: 10px;
      font-weight: 700;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .canvas-sheet-select-label,
    #canvas-sheet-view-select {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      clip-path: inset(50%);
      white-space: nowrap;
    }
    body.sheet-card-mode .canvas-scroll-viewport { top: 143px; }
    #canvas-outer.sheet-focus-active {
      box-shadow: 0 5px 28px rgba(124,58,237,0.24);
    }
    #canvas-zoom-value {
      min-width: 52px;
      color: #333;
      font-size: 12px;
      font-weight: 700;
      text-align: center;
      font-variant-numeric: tabular-nums;
    }

    .canvas-minimap {
      position: absolute;
      right: 16px;
      bottom: 72px;
      z-index: 69;
      width: 180px;
      padding: 7px;
      border: 1px solid rgba(0,0,0,0.16);
      border-radius: 11px;
      background: rgba(255,255,255,0.94);
      box-shadow: 0 5px 18px rgba(0,0,0,0.13);
      backdrop-filter: blur(5px);
      transition: opacity 0.16s ease;
    }
    .canvas-minimap[hidden] { display: none; }
    .canvas-minimap-title {
      margin: 0 1px 5px;
      color: #666;
      font-size: 9px;
      font-weight: 800;
      letter-spacing: 0.02em;
    }
    .canvas-minimap-board {
      position: relative;
      width: 100%;
      overflow: hidden;
      border: 1px solid #d7d7d7;
      border-radius: 5px;
      background: #fff;
      cursor: crosshair;
      touch-action: none;
    }
    #canvas-minimap-preview {
      display: block;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }
    #canvas-minimap-viewport {
      position: absolute;
      min-width: 4px;
      min-height: 4px;
      border: 2px solid #7c3aed;
      border-radius: 3px;
      background: rgba(124,58,237,0.12);
      box-shadow: 0 0 0 1px rgba(255,255,255,0.85) inset;
      pointer-events: none;
      box-sizing: border-box;
    }

    @media (max-width: 680px) {
      .canvas-area {
        display: block;
        position: relative;
        height: clamp(460px, calc(100dvh - 118px), 760px);
        min-height: 460px;
        padding: 0;
        overflow: hidden;
      }
      .sheet-layout-toolbar {
        top: 58px;
        right: 7px;
        left: 7px;
        min-height: 72px;
        padding: 8px;
      }
      .sheet-layout-toolbar-main { display: block; }
      .sheet-layout-toolbar-title,
      .sheet-layout-toolbar-preview { display: none; }
      .sheet-clone-guide { top: 142px; right: 8px; width: 184px; padding: 13px; }
      .sheet-clone-guide-title { font-size: 16px; }
      .sheet-layout-toolbar .sprod-sheet-division-note {
        display: block;
        margin-top: 5px;
        text-align: center;
      }
      body.sheet-freeform-layout-mode .canvas-scroll-viewport { inset: 142px 0 64px; }
      .canvas-scroll-viewport {
        position: absolute;
        inset: 0 0 64px;
        width: 100%;
        padding: 14px 10px;
        overflow: auto;
        overscroll-behavior: contain;
      }
      .canvas-scroll-viewport { touch-action: none; }
      .canvas-zoom-controls {
        display: flex;
        left: 50%;
        right: auto;
        bottom: 8px;
        width: max-content;
        max-width: calc(100% - 16px);
        margin: 0;
        overflow: visible;
        transform: translateX(-50%);
        scrollbar-width:none;
      }
      .canvas-zoom-controls::-webkit-scrollbar { display:none; }
      .canvas-minimap { display:none; }
      .canvas-sheet-workspace {
        top: 7px;
        left: 7px;
        right: 7px;
        gap: 6px;
        padding: 8px;
        border-radius: 12px;
      }
      .canvas-sheet-workspace-title strong { font-size: 12px; }
      #canvas-sheet-progress { font-size: 9px; }
      #btn-canvas-sheet-show-all { height: 27px; padding: 0 8px; }
      .canvas-sheet-cards { grid-template-columns: repeat(8, 72px); gap: 6px; }
      .canvas-sheet-card { min-width: 72px; }
      .canvas-sheet-card-preview { height: 33px; }
      .canvas-sheet-active-help { display: none; }
      .canvas-sheet-view { justify-content: flex-end; min-height: 30px; }
      body.sheet-card-mode .canvas-scroll-viewport { top: 130px; }
      .pvc-kisscut-design-nav {
        top: 7px;
        max-width: calc(100% - 14px);
        overflow-x: auto;
      }
      .pvc-kisscut-product-switcher {
        top: 7px;
        right: 7px;
        width: min(250px, calc(100% - 14px));
      }
      body.pvc-kisscut-design-manager-mode .pvc-kisscut-quantity-dock {
        bottom: 64px;
      }
      .pvc-kisscut-carousel-card {
        width: clamp(138px, 43vw, 180px);
      }
      .pvc-kisscut-carousel-card-left {
        left: -44px;
        transform: translateY(-50%) scale(.82);
      }
      .pvc-kisscut-carousel-card-right {
        right: -92px;
        transform: translateY(-50%) scale(.82);
      }
      .pvc-kisscut-carousel-card-left:hover,
      .pvc-kisscut-carousel-card-left:focus-visible {
        transform: translate(8px, -50%) scale(.86);
      }
      .pvc-kisscut-carousel-card-right:hover,
      .pvc-kisscut-carousel-card-right:focus-visible {
        transform: translate(-8px, -50%) scale(.86);
      }
      .pvc-kisscut-design-current { min-width: 76px; }
      #pvc-kisscut-design-remove { display: none; }
      .pvc-kisscut-quantity-dock {
        bottom: 16px;
        max-width: calc(100% - 14px);
      }
      .pvc-kisscut-sheet-size { display: none; }
    }

/* ════════ 작업 자동저장 복구 안내 바 ════════ */
.autosave-restore-bar {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 600;
  max-width: calc(100vw - 24px);
}
.autosave-restore-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 13px 16px;
  border: 1px solid #d9d2ee;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 28px rgba(28, 18, 55, .18);
  font-family: 'Noto Sans KR', sans-serif;
}
.autosave-restore-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.autosave-restore-text strong { font-size: 13.5px; color: #241a3d; }
.autosave-restore-text span { font-size: 11.5px; color: #6f658d; }
.autosave-restore-actions { display: flex; gap: 8px; flex-shrink: 0; }
.autosave-restore-actions button {
  min-height: 44px;
  padding: 0 16px;
  border-radius: 9px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.autosave-restore-discard {
  border: 1px solid #ddd6ea;
  background: #f7f5fc;
  color: #6f658d;
}
.autosave-restore-confirm {
  border: 0;
  background: #6d4aff;
  color: #fff;
}
.autosave-restore-actions button:focus-visible { outline: 2px solid #241a3d; outline-offset: 2px; }
@media (max-width: 680px) {
  .autosave-restore-bar { left: 12px; right: 12px; bottom: 14px; transform: none; max-width: none; }
  .autosave-restore-card { flex-direction: column; align-items: stretch; gap: 12px; }
  .autosave-restore-actions button { flex: 1; }
}

.preflight-issue-modal {
  position: fixed;
  inset: 0;
  z-index: 100020;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15, 23, 42, .66);
  font-family: 'Noto Sans KR', sans-serif;
}
.preflight-issue-card {
  width: min(620px, 100%);
  max-height: min(760px, calc(100vh - 32px));
  overflow-y: auto;
  padding: 28px;
  border: 3px solid #fee2e2;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(15, 23, 42, .28);
}
.preflight-issue-head { text-align: center; }
.preflight-issue-eyebrow {
  display: inline-block;
  color: #dc2626;
  font-size: 12px;
  font-weight: 850;
}
.preflight-issue-head h2 {
  margin: 7px 0 8px;
  color: #1f2937;
  font-size: 23px;
  font-weight: 900;
  letter-spacing: -.04em;
}
.preflight-issue-head p {
  margin: 0 0 5px;
  color: #374151;
  font-size: 15px;
  font-weight: 800;
}
.preflight-issue-head > span:last-child {
  display: block;
  color: #6b7280;
  font-size: 12px;
}
.preflight-issue-list {
  display: grid;
  gap: 10px;
  margin: 22px 0 18px;
}
.preflight-issue-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  padding: 12px;
  border: 1px solid #fecaca;
  border-radius: 14px;
  background: #fff7f7;
}
.preflight-issue-previews { display: flex; gap: 6px; flex-shrink: 0; }
.preflight-issue-preview {
  display: grid;
  width: 62px;
  height: 62px;
  place-items: center;
  overflow: hidden;
  padding: 3px;
  border: 2px solid #fca5a5;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
}
.preflight-issue-preview:hover,
.preflight-issue-preview:focus-visible { border-color: #dc2626; outline: 3px solid rgba(239, 68, 68, .2); }
.preflight-issue-preview img { width: 100%; height: 100%; object-fit: contain; }
.preflight-issue-content { min-width: 0; }
.preflight-issue-title,
.preflight-issue-detail { display: block; }
.preflight-issue-title { color: #991b1b; font-size: 14px; font-weight: 850; }
.preflight-issue-detail { margin-top: 4px; color: #4b5563; font-size: 12px; line-height: 1.5; }
.preflight-issue-focus {
  min-height: 38px;
  padding: 0 11px;
  border: 1px solid #dc2626;
  border-radius: 9px;
  background: #fff;
  color: #b91c1c;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}
.preflight-issue-focus:hover { background: #fef2f2; }
.preflight-issue-more { margin: 0; color: #6b7280; font-size: 12px; text-align: center; }
.preflight-issue-close {
  display: block;
  width: 100%;
  min-height: 48px;
  border: 0;
  border-radius: 11px;
  background: #222;
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}
.preflight-issue-close:hover { background: #111827; }
.preflight-issue-close:focus-visible { outline: 3px solid rgba(124, 58, 237, .35); outline-offset: 2px; }
@media (max-width: 680px) {
  .preflight-issue-card { padding: 20px 16px; border-radius: 18px; }
  .preflight-issue-head h2 { font-size: 19px; }
  .preflight-issue-item { grid-template-columns: 1fr; gap: 9px; }
  .preflight-issue-previews { order: 0; }
  .preflight-issue-content { order: 1; }
  .preflight-issue-focus { order: 2; width: 100%; }
}

/* 고객용 가이드 가독성 보정: 작업판과 캔버스 배율은 그대로 두고 안내 UI만 키운다. */
@media (min-width: 681px) {
  .sheet-layout-toolbar {
    min-height: 74px;
    padding: 11px 14px;
    gap: 7px;
  }
  .sheet-layout-toolbar-main {
    gap: 14px;
  }
  .sheet-layout-toolbar-title strong {
    font-size: 16px;
  }
  .sheet-layout-toolbar-title span {
    font-size: 12px;
  }
  .sheet-layout-toolbar .sprod-sheet-division-buttons {
    gap: 7px;
  }
  .sheet-layout-toolbar .sprod-sheet-division-buttons button {
    height: 40px;
    padding: 0 12px;
    border-width: 1.5px;
    border-radius: 10px;
    font-size: 13px;
  }
  .sheet-layout-toolbar-preview {
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 10px;
  }
  .sheet-layout-toolbar .sprod-mini-sheet {
    width: 62px;
    min-height: 40px;
    border-width: 2px;
  }
  .sheet-layout-toolbar .sprod-mini-sheet-cell {
    font-size: 9px;
  }
  .sheet-layout-toolbar .sprod-sheet-division-summary {
    font-size: 13px;
    line-height: 1.4;
  }
  .sheet-layout-toolbar .sprod-sheet-division-note {
    color: #51495d;
    font-size: 12px;
    font-weight: 750;
  }

  .pvc-kisscut-dimensions {
    color: #5b5066;
    font-size: clamp(14px, 1.05vw, 17px);
    font-weight: 900;
  }
  .pvc-kisscut-dimension-line {
    color: #81718f;
  }
  .pvc-kisscut-dimension-horizontal .pvc-kisscut-dimension-line {
    border-top-width: 2px;
  }
  .pvc-kisscut-dimension-vertical .pvc-kisscut-dimension-line {
    border-left-width: 2px;
  }
  .pvc-kisscut-dimension-tick {
    background: #81718f;
  }
  .pvc-kisscut-dimension-horizontal .pvc-kisscut-dimension-tick {
    width: 2px;
    height: 18px;
  }
  .pvc-kisscut-dimension-vertical .pvc-kisscut-dimension-tick {
    width: 18px;
    height: 2px;
  }
  .pvc-kisscut-dimension-label {
    min-height: 30px;
    padding: 4px 11px;
    border: 1.5px solid rgba(129, 113, 143, .42);
    background: #fff;
    color: #5b5066;
    box-shadow: 0 3px 10px rgba(58, 43, 72, .16);
    box-sizing: border-box;
  }
}

@media (min-width: 681px) and (max-width: 1180px) {
  .sheet-layout-toolbar-title strong {
    font-size: 15px;
  }
  .sheet-layout-toolbar .sprod-sheet-division-buttons button {
    height: 38px;
    font-size: 12px;
  }
  .sheet-layout-toolbar .sprod-sheet-division-note {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }
}

/* 이미지 업로드 버튼의 긴 안내 툴팁은 고객 화면에서 숨긴다. 업로드 기능은 유지한다. */
.img-upload-wrap:hover .img-tooltip,
.img-tooltip {
  display: none !important;
}

/* 캔버스 이동용 가로·세로 스크롤바는 확대 배율과 무관하게 항상 표시한다. */
@media (min-width: 681px) {
  .canvas-scroll-viewport {
    overflow-x: scroll !important;
    overflow-y: scroll !important;
    scrollbar-width: auto;
    scrollbar-color: #8c8c8c #ededed;
  }
  .canvas-scroll-viewport::-webkit-scrollbar {
    width: 14px;
    height: 14px;
  }
  .canvas-scroll-viewport::-webkit-scrollbar-track {
    border: 1px solid #dedede;
    background: #ededed;
  }
  .canvas-scroll-viewport::-webkit-scrollbar-thumb {
    min-width: 34px;
    min-height: 34px;
    border: 3px solid #ededed;
    border-radius: 999px;
    background: #8c8c8c;
  }
  .canvas-scroll-viewport::-webkit-scrollbar-thumb:hover {
    background: #666;
  }
  .canvas-scroll-viewport::-webkit-scrollbar-corner {
    background: #ededed;
  }
  /* 배율이 낮아 작업판이 화면 안에 모두 들어와도 스크롤 트랙을 유지한다. */
  .canvas-scroll-viewport::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    pointer-events: none;
  }
}

/* 좁은 PC 창이나 브라우저 배율에서도 캔버스 이동바를 숨기지 않는다. */
.canvas-scroll-viewport {
  overflow-x: scroll !important;
  overflow-y: scroll !important;
  scrollbar-width: auto;
  scrollbar-color: #8c8c8c #ededed;
}
.canvas-scroll-viewport::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  pointer-events: none;
}
.canvas-scroll-viewport::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}
.canvas-scroll-viewport::-webkit-scrollbar-track {
  border: 1px solid #dedede;
  background: #ededed;
}
.canvas-scroll-viewport::-webkit-scrollbar-thumb {
  min-width: 34px;
  min-height: 34px;
  border: 3px solid #ededed;
  border-radius: 999px;
  background: #8c8c8c;
}
.canvas-scroll-viewport::-webkit-scrollbar-thumb:hover { background: #666; }
.canvas-scroll-viewport::-webkit-scrollbar-corner { background: #ededed; }