/**
 * HTML/CSS Live Editor - Layout Styles
 * Version: 2.0.2
 */

/* 全画面モード */
.html-css-live-editor.fullscreen-mode {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 9999 !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
}

/* 管理バーがある場合の調整 */
body.admin-bar .html-css-live-editor.fullscreen-mode {
    top: 32px !important;
    height: calc(100vh - 32px) !important;
}

@media screen and (max-width: 782px) {
    body.admin-bar .html-css-live-editor.fullscreen-mode {
        top: 46px !important;
        height: calc(100vh - 46px) !important;
    }
}

/* 全画面時のボディ調整 */
body.editor-fullscreen {
    overflow: hidden !important;
}

/* 全画面時のエディタメイン調整 */
.html-css-live-editor.fullscreen-mode .editor-main {
    height: calc(100vh - 80px) !important;
}

body.admin-bar .html-css-live-editor.fullscreen-mode .editor-main {
    height: calc(100vh - 112px) !important;
}

@media screen and (max-width: 782px) {
    body.admin-bar .html-css-live-editor.fullscreen-mode .editor-main {
        height: calc(100vh - 126px) !important;
    }
}

/* プレビュー縮尺設定 */
.preview-wrapper {
    transform-origin: top center;
    transition: transform 0.2s ease;
}

.preview-wrapper.scale-90 {
    transform: scale(0.9);
}

.preview-wrapper.scale-80 {
    transform: scale(0.8);
}

.preview-wrapper.scale-70 {
    transform: scale(0.7);
}

.preview-wrapper.scale-60 {
    transform: scale(0.6);
}

.preview-wrapper.scale-50 {
    transform: scale(0.5);
}

/* リサイズハンドルのホバー効果 */
.horizontal-resize-handle:hover,
.vertical-resize-handle:hover {
    background: rgba(52, 152, 219, 0.3) !important;
}

.horizontal-resize-handle:hover div,
.vertical-resize-handle:hover div {
    background: white !important;
}

/* リサイズ中のカーソル無効化 */
.resizing {
    user-select: none !important;
    pointer-events: none !important;
}

.resizing .preview-frame,
.resizing .code-editor {
    pointer-events: none !important;
}

/* リサイズオーバーレイ */
.resize-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(52, 152, 219, 0.05);
    z-index: 9998;
    pointer-events: none;
    display: none;
}

.resize-overlay.active {
    display: block;
}

/* 全画面ボタンの状態 */
.fullscreen-toggle {
    transition: all 0.3s;
}

.fullscreen-toggle:hover {
    background: #34495e !important;
}

.fullscreen-toggle.active {
    background: #e74c3c !important;
}

.fullscreen-toggle.active:hover {
    background: #c0392b !important;
}

/* プレビュー縮尺コントロール */
.preview-scale-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.scale-select:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}

/* レスポンシブ調整 */
@media (max-width: 1024px) {
    .preview-section {
        flex: 0 0 55% !important;
    }
    
    .editor-section {
        flex: 0 0 45% !important;