@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

    * { font-family: 'Pretendard', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; }

    .slide-canvas { box-shadow: 0 20px 60px rgba(0,0,0,0.15); }

    .thumbnail { }
    .thumbnail:hover { box-shadow: 0 8px 20px rgba(0,0,0,0.2); }
    .thumbnail.active { border: 3px solid #1D8BFF; box-shadow: 0 0 0 4px rgba(29, 139, 255, 0.2); }

    .editable-field {
      cursor: text;
      padding: 4px;
      border-radius: 4px;
      outline: none;
    }

    /* PDF/PPT export 모드: 인터랙티브 UI 숨김 */
    body.exporting button { display: none !important; }
    body.exporting [data-element-ai-ui] { display: none !important; }
    body.exporting .index01-drag-handle { display: none !important; }
    body.exporting .editable-field:hover,
    body.exporting .editable-field:focus {
      background: transparent !important;
      outline: none !important;
    }
    /* 슬라이드 외곽 보더 제거 — 캡처에 1px slate-200이 포함되어 PDF 좌/상단에 흰 띠로 잡히는 문제 차단 */
    body.exporting .slide-canvas-root {
      border: 0 !important;
      box-shadow: none !important;
    }

    /* 슬라이드 안 모든 img는 baseline 정렬 영향을 받지 않도록 block 처리
       (inline-block default일 때 부모 div의 line-height/baseline 때문에 위/아래로 미세하게 어긋남) */
    .slide-canvas-root img {
      display: block;
      vertical-align: top;
    }
    /* img를 직접 자식으로 가진 wrapper div의 line-height/font-size를 0으로 강제 — 푸터 로고 등 absolute wrapper의 inline baseline 영향 차단 */
    .slide-canvas-root div:has(> img) {
      line-height: 0;
      font-size: 0;
    }
    .editable-field:hover {
      background: rgba(29, 139, 255, 0.05);
      outline: 2px dashed #1D8BFF;
      outline-offset: 2px;
    }
    .editable-field:focus {
      outline: 2px solid #1D8BFF;
      outline-offset: 2px;
      background: rgba(29, 139, 255, 0.1);
    }

    .editable-image {
      cursor: pointer;
      position: relative;
    }
    .editable-image:hover {
      outline: 3px dashed #10B981;
      outline-offset: 4px;
    }
    .editable-image:hover::after {
      content: '🖼️ 클릭하여 이미지 변경';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: rgba(0,0,0,0.8);
      color: white;
      padding: 8px 16px;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 600;
      pointer-events: none;
      white-space: nowrap;
    }

    /* 섹션 삭제 버튼 스타일 */
    .delete-section-wrapper:hover .delete-section-btn {
      opacity: 1 !important;
    }

    .no-scrollbar::-webkit-scrollbar { display: none; }
    .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

    .thumbnail-preview {
      width: 100%;
      aspect-ratio: 16/9;
      background: white;
      border-radius: 6px;
      overflow: hidden;
      position: relative;
      border: 1px solid #e2e8f0;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    }

    .thumbnail-canvas {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    .dragging {
      opacity: 0.4;
      cursor: grabbing;
      transform: scale(0.98);
      transition: opacity 0.2s, transform 0.2s;
    }

    .drop-indicator-top {
      position: relative;
    }

    .drop-indicator-top::before {
      content: '';
      position: absolute;
      top: -8px;
      left: 50%;
      transform: translateX(-50%);
      width: calc(100% - 8px);
      height: 4px;
      background: #1D8BFF;
      border-radius: 2px;
      box-shadow: 0 0 8px rgba(29, 139, 255, 0.6);
      z-index: 10;
      animation: pulse-line 1s ease-in-out infinite;
    }

    .drop-indicator-bottom {
      position: relative;
    }

    .drop-indicator-bottom::after {
      content: '';
      position: absolute;
      bottom: -8px;
      left: 50%;
      transform: translateX(-50%);
      width: calc(100% - 8px);
      height: 4px;
      background: #1D8BFF;
      border-radius: 2px;
      box-shadow: 0 0 8px rgba(29, 139, 255, 0.6);
      z-index: 10;
      animation: pulse-line 1s ease-in-out infinite;
    }

    /* Core Value 이미지 컨테이너 hover */
    .cv01-img-change-btn { pointer-events: auto; }
    *:hover > div > .cv01-img-change-btn,
    *:hover > div > .cv01-img-hint,
    *:hover > .cv01-img-change-btn,
    *:hover > .cv01-img-hint { opacity: 1 !important; }

    @keyframes pulse-line {
      0%, 100% {
        opacity: 1;
        box-shadow: 0 0 8px rgba(29, 139, 255, 0.6);
      }
      50% {
        opacity: 0.7;
        box-shadow: 0 0 12px rgba(29, 139, 255, 0.8);
      }
    }

    @keyframes progressIndeterminate {
      0% { width: 20%; margin-left: 0; }
      50% { width: 60%; margin-left: 20%; }
      100% { width: 20%; margin-left: 80%; }
    }

    /* Onboarding Modal — 이미지 영역만 팡팡 등장 */
    @keyframes onboardingIconBounce {
      0%   { opacity: 0; transform: scale(0.3) rotate(-15deg); }
      60%  { opacity: 1; transform: scale(1.15) rotate(5deg); }
      80%  { transform: scale(0.95) rotate(-2deg); }
      100% { opacity: 1; transform: scale(1) rotate(0); }
    }

    .onboarding-icon {
      animation: onboardingIconBounce 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
      animation-fill-mode: backwards;
    }