:root { --bg: #2c3e50; --panel: #1a252f; --accent: #ffcc00; --tool: #3498db; --text: #f5f6fa; }

        .header-controls { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; max-width: 900px; }
        .tab-container { display: flex; gap: 5px; margin-bottom: -2px; }
        .tab { 
            padding: 10px 20px; background: #34495e; border: none; 
            border-radius: 8px 8px 0 0; cursor: pointer; color: #bdc3c7; font-weight: bold; font-size: 13px;
        }
        .tab.active { background: var(--panel); color: var(--accent); border-bottom: 3px solid var(--accent); }

        .editor-wrapper { 
            background: var(--panel); padding: 15px; border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.5); display: flex; flex-direction: column; align-items: center;
            width: 100%; max-width: 880px; box-sizing: border-box;
        }
.parent {
display: flex;
position: relative;
  width: 100%;
  max-width: 900px;    /* 너무 커지지 않게 최대 너비 제한 */
  margin: 0 auto;
}
        #editor-content { width: 100%; }
        .controls { 
            margin-bottom: 15px; padding: 12px; background: #34495e; 
            border-radius: 10px; display: flex; flex-direction: column; gap: 10px;
        }

        .tool-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; }
        
        /* 컬러피커 크기 최적화 */
        #colorPicker { width: 120px; height: 35px; cursor: pointer; border: 2px solid white; border-radius: 5px; }

        .d-pad { display: grid; grid-template-areas: ". up ." "left . right" ". down ."; gap: 3px; margin-left: auto; }
        .btn-move { width: 32px; height: 32px; background: #8e44ad; color: white; border: none; cursor: pointer; border-radius: 4px; font-size: 18px; display: flex; align-items: center; justify-content: center; }

        #grid { 
            display: grid; background-color: #7f8c8d; border: 4px solid #000; gap: 1px; 
            user-select: none; margin: 0 auto; touch-action: none; /* */
        }
        .transparent-bg {
            background-color: #eee;
            background-image: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc),
                              linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc);
            background-size: 10px 10px; background-position: 0 0, 5px 5px;
        }

        .size-16 { grid-template-columns: repeat(16, minmax(10px, 28px)); grid-template-rows: repeat(16, minmax(10px, 28px)); }
        .size-32 { grid-template-columns: repeat(32, minmax(5px, 14px)); grid-template-rows: repeat(32, minmax(5px, 14px)); }
        .cell { width: 100%; height: 100%; }

        .preview-box { padding: 15px; background: #34495e; border-radius: 10px; text-align: center; width: 100%; max-width: 250px; margin: 10px auto; }
        #previewCanvas { border: 1px solid #fff; image-rendering: pixelated; width: 64px; height: 64px; }
        #liveTestArea { margin-top: 10px; height: 60px; border: 2px dashed #ffcc00; display: flex; align-items: center; justify-content: center; background: rgba(255, 204, 0, 0.1); font-size: 12px; }

        button { padding: 8px 12px; border: none; border-radius: 5px; cursor: pointer; font-weight: bold; font-size: 13px; }
        .active-mode { outline: 3px solid #ffcc00; box-shadow: 0 0 10px #ffcc00; }
        .btn-tool { background: var(--tool); color: white; }
        .btn-transform { background: #e67e22; color: white; }
        
        #guide-content { display: none; width: 100%; padding: 10px; box-sizing: border-box; line-height: 1.6; }
        .guide-step { background: #34495e; padding: 15px; border-radius: 8px; margin-bottom: 10px; }