@charset "UTF-8";


        .checker-bg { background-image: linear-gradient(45deg, #eee 25%, transparent 25%), linear-gradient(-45deg, #eee 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #eee 75%), linear-gradient(-45deg, transparent 75%, #eee 75%); background-size: 20px 20px; background-color: #fff; }
        .image-editor-container { width: 100%; height: 600px; overflow: auto; border: 2px solid #ddd; position: relative; text-align: center; }
        .editor-canvas { display: block; max-width: none; user-select: none; -webkit-user-drag: none; }
        .protection-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; cursor: crosshair; }
        .selection-rect { position: absolute; border: 1px dashed #fff; background: rgba(255,255,255,0.3); pointer-events: none; display: none; z-index: 20; }
        .palette-item { width: 30px; height: 30px; border-radius: 4px; border: 1px solid #ccc; cursor: pointer; display: inline-block; margin: 2px; }


 /* 修正後：背景を画像にだけ限定する */
.image-editor-container {
    width: 100%;
    height: 500px;
    overflow: auto;
    border: 1px solid #ddd;
    position: relative;
    background-color: #f8f8f8; /* ★四角のエリアを薄いグレーにして落ち着かせる */
    text-align: center;
}

/* 修正後：背景を画像にだけ限定する */
.image-editor-container {
    width: 100%;
    height: 500px;
    overflow: auto;
    border: 1px solid #ddd;
    position: relative;
    background-color: #f8f8f8; /* ★四角のエリアを薄いグレーにして落ち着かせる */
    text-align: center;
}

/* 市松模様は「画像が乗るラッパー」だけに適用されるようにします */
#canvasWrapper.checker-bg {
    background-image: linear-gradient(45deg, #eee 25%, transparent 25%), linear-gradient(-45deg, #eee 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #eee 75%), linear-gradient(-45deg, transparent 75%, #eee 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
    background-color: #fff;
    background-repeat: repeat;
    display: inline-block;
}

  /* ズーム・スクロール用コンテナ */
  .image-editor-container {
      width: 100%;
      height: 500px;
      overflow: auto; /* スクロールバー */
      border: 1px solid #ddd;
      position: relative;
      background-color: #ccc; /* はみ出した外側の色 */
      text-align: center; /* 画像が小さいときは中央寄せ */
  }

  /* 画像自体のスタイル */
  .editor-canvas {
      /* transform 関係は削除してシンプルにします */
      /* transform-origin: top left;  <-- 削除 */
      cursor: crosshair;
      display: block;
      max-width: none; /* UIkitなどのレスポンシブ制限を解除 */
  }

/* 画像を保護するための透かしレイヤー */
.protection-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    cursor: crosshair; /* クリックできることを示す */
    
    /* 右クリックやドラッグを禁止する */
    user-select: none;
    -webkit-user-drag: none;
    
    /* 「SAMPLE」という透かし文字（SVGデータ）
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 200 200'%3E%3Ctext x='30' y='100' fill='rgba(0,0,0,0.2)' font-family='Arial' font-size='30' transform='rotate(-45 100 100)'%3ESAMPLE%3C/text%3E%3C/svg%3E");
    background-repeat: repeat; */
}

.uk-navbar-nav>li>a.uk-button.uk-button-primary,
.uk-navbar-nav>li>a.uk-button.uk-button-secondary
 {
    color: #fff;
}
.uk-navbar-item, .uk-navbar-nav>li>a, .uk-navbar-toggle {
    padding: 4px 24px;
}


/* スキャンエフェクトのコンテナ */
.scanning::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, transparent, #00d2ff, #fff, #00d2ff, transparent);
    box-shadow: 0 0 15px 5px rgba(0, 210, 255, 0.5);
    z-index: 15;
    animation: scan-line 1.5s infinite ease-in-out;
}

/* 全体のキラキラ（パルス） */
.processing-ai {
    animation: pulse-glow 2s infinite alternate;
    position: relative;
    overflow: hidden;
}

@keyframes scan-line {
    0% { top: 0%; }
    100% { top: 100%; }
}

@keyframes pulse-glow {
    0% { filter: brightness(1) contrast(1); }
    50% { filter: brightness(1.2) contrast(1.1) drop-shadow(0 0 10px rgba(0, 210, 255, 0.3)); }
    100% { filter: brightness(1) contrast(1); }
}


.dropZone {
border:4px dashed #60cd6e; background:#fff; cursor:pointer;
}
[data-theme='dark'] .dropZone {
border:4px dashed #60cd6e; background:#444; cursor:pointer;
}

.uk-notification-message {
    color: #333;
    background: #f8f8aa;
    font-size: 14px;
    white-space: nowrap;
    border: 4px solid #dfdf44;
    border-radius: 20px;
    text-align: center;
}