/* =================================================================
 * Page Specific Styles for pngshadow (style.css)
 * ================================================================= */

/* --- 1. アップロード領域 (Drag & Drop Zone) --- */
.upload-zone {
    min-height: 400px;
    border: 2px dashed var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    background-color: var(--bs-tertiary-bg);
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}

.upload-zone:hover,
.upload-zone.dragover {
    border-color: var(--bs-primary);
    background-color: var(--bs-primary-bg-subtle);
}

.upload-zone * {
    pointer-events: none; /* 子要素へのドラッグイベント干渉を防ぐ */
}

.upload-zone .btn {
    pointer-events: auto; /* ボタン部分はクリック可能に */
}

/* --- 2. プレビュー領域とチェッカーボード --- */
.preview-container {
    min-height: 400px;
    /* 縦長の画像でも画面を占有しすぎないように制限 */
    max-height: 60vh; 
}

/* 透過背景を見やすくするための市松模様 (常にライトテーマ基準) */
.checkerboard {
    background-color: #f8f9fa;
    background-image: 
        linear-gradient(45deg, #e4e4e4 25%, transparent 25%), 
        linear-gradient(-45deg, #e4e4e4 25%, transparent 25%), 
        linear-gradient(45deg, transparent 75%, #e4e4e4 75%), 
        linear-gradient(-45deg, transparent 75%, #e4e4e4 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

/* --- 3. キャンバス要素の制約 --- */
#preview-canvas {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* アスペクト比を維持して収める */
    /* 背景色を塗りつぶした際に境界が分かりやすいよう、キャンバス自体に微小な影を落とす */
    box-shadow: 0 0 10px rgba(0,0,0,0.05);
}

/* --- 4. コントロール部品の微調整 --- */
.form-control-color {
    width: 3.5rem;
    padding: 0.25rem;
    cursor: pointer;
}

input[type="range"] {
    cursor: pointer;
}

/* --- 5. UIの微調整 --- */
/* パネルヘッダーの背景色が角丸をはみ出さないようにする */
.card {
    border-radius: var(--bs-border-radius);
}
.card > .card-header:first-child {
    border-top-left-radius: calc(var(--bs-border-radius) - 1px);
    border-top-right-radius: calc(var(--bs-border-radius) - 1px);
}

/* 背景色付きパネル内でのスライダーのトラック（溝）の視認性を向上 */
.bg-light-subtle .form-range::-webkit-slider-runnable-track {
    background-color: rgba(128, 128, 128, 0.3);
}
.bg-light-subtle .form-range::-moz-range-track {
    background-color: rgba(128, 128, 128, 0.3);
}
[data-bs-theme="dark"] .bg-light-subtle .form-range::-webkit-slider-runnable-track {
    background-color: rgba(0, 0, 0, 0.6);
}
[data-bs-theme="dark"] .bg-light-subtle .form-range::-moz-range-track {
    background-color: rgba(0, 0, 0, 0.6);
}

/* =================================================================
 * 6. UX Improvements: フォーム視認性向上 (サイト全体統一)
 * ================================================================= */

.form-control, .form-select {
    background-color: #ffffff;
    border: 1px solid #adb5bd;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
    color: var(--bs-body-color);
    transition: all 0.2s ease-in-out;
}

.form-control:hover, .form-select:hover {
    border-color: #6c757d;
}

.form-control:focus, .form-select:focus {
    background-color: #ffffff;
    border-color: #0d6efd;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.05), 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid #6c757d;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
    color: #f8f9fa;
}

[data-bs-theme="dark"] .form-control:hover,
[data-bs-theme="dark"] .form-select:hover {
    border-color: #adb5bd;
    background-color: rgba(255, 255, 255, 0.09);
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    background-color: rgba(255, 255, 255, 0.09);
    border-color: #86b7fe;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.2), 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}