body, html {
    margin: 0;
    padding: 0;
    height: 100vh;
    font-family: 'Inter', sans-serif;
    overflow: hidden; 
}
textarea {
    font-family: monospace;
    outline: none;
    resize: none;
}
/* カラーピッカーのサイズを調整 */
input[type="color"] {
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
/* カラーピッカーのブラウザデフォルトスタイルを隠す (Chrome/Safari) */
input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}
input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 4px;
}
/* カラーピッカーのブラウザデフォルトスタイルを隠す (Firefox) */
input[type="color"]::-moz-focus-inner {
    border: 0;
    padding: 0;
}
input[type="color"]::-moz-color-swatch {
    border: none;
    border-radius: 4px;
}
/* プレビューエリアを相対配置（グリッドSVGを重ねるため） */
#preview {
    position: relative;
    overflow: hidden;
}
/* プレビューコントロールバーの入力要素スタイル */
.preview-input {
    padding: 0.375rem 0.5rem; /* p-1.5 と p-2 の中間 */
    border-radius: 0.375rem; /* rounded-md */
    border: none;
    font-size: 0.875rem; /* text-sm */
    line-height: 1.25rem;
    outline: none;
}
.preview-input:focus {
    box-shadow: 0 0 0 2px var(--tw-ring-color, #3B82F6); /* focus:ring-2 focus:ring-blue-500 */
}
/* 明るい背景用の入力スタイル */
.preview-input-light {
    background-color: #d8d8d8;
    color: #282828; 
}
/* 暗い背景用の入力スタイル */
.preview-input-dark {
    background-color: #282828;
    color: #d8d8d8;
}
.github-icon-link {position: fixed; bottom: 4px; right: 4px; z-index: 999;}
.github-icon-link img {width: 32px; height: 32px;}
.github-icon-link:hover img {transform: scale(1.1);}

/* リサイズバー */
#resizer {
    background-color: #000000;
    flex-shrink: 0;
    z-index: 50; /* 他要素より手前に */
}

/* モバイル (デフォルト: 上下分割) */
#resizer {
    width: 100%;
    height: 2px;
    cursor: row-resize;
}

/* デスクトップ (md以上: 左右分割) */
@media (min-width: 768px) {
    #resizer {
        width: 2px;
        height: auto; /* flex-row の中のため auto で親の高さに */
        cursor: col-resize;
    }
}

/* リサイズ中のテキスト選択を無効化 */
.resizing {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}