.html-container {
        max-width: 800px;
        margin: 20px auto;
            border: 4px solid #3f8fef;
        padding: 20px;
         background: #2c3e50;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        border-radius: 12px;
    }
    h1 {
        font-size:32px;
        border-bottom: 2px solid #007bff;
        padding-bottom: 10px;
        margin-bottom: 20px;
    }
    
    /* 버튼 컨트롤 영역 */
    .controls {
        margin: 15px 0;
        display: flex;
        flex-wrap: wrap; 
        gap: 10px;
    }
    button {
        padding: 10px 15px;
        border: none;
        border-radius: 4px;
        font-size: 12px;
        cursor: pointer;
        transition: background-color 0.3s;
        color: white;
        font-weight: bold;
        display: inline-block;
        text-align: center;
    }
    
    /* 버튼 색상 */
    #saveButton { background-color: #007bff; }
    #saveButton:hover { background-color: #0056b3; }
    #viewResultButton { background-color: #28a745; }
    #viewResultButton:hover { background-color: #1e7e34; }
    #copyCodeButton { background-color: #ffc107; color: #333; }
    #copyCodeButton:hover { background-color: #e0a800; }
    #clearCodeButton { background-color: #dc3545; }
    #clearCodeButton:hover { background-color: #c82333; }
    #formatCodeButton { background-color: #17a2b8; }
    #formatCodeButton:hover { background-color: #117a8b; }
    
    /* 에디터 영역 */
    .editor-area {
        display: flex;
        gap: 20px;
    }
    .code-panel {
        width: 100%; 
    }
    .panel-title {
        font-weight: bold;
        margin-bottom: 8px;
        color: #555;
    }
    
    /* ------------------------------------- */
    /* 코드 에디터 (단순 textarea, 배경 이미지 적용) */
    /* ------------------------------------- */
    textarea {
        width: 100%;
        height: 500px; 
        padding: 15px;
        box-sizing: border-box;
        border: 1px solid #ccc;
        border-radius: 4px;
        font-family: 'Consolas', 'Courier New', monospace;
        font-size: 14px;
        resize: vertical; 
        color: #333; /* 텍스트 색상 명확하게 */
        
        /* 배경 이미지 속성 */
        background-image: url('incode.png'); 
        background-repeat: no-repeat;
        background-position: center center;
        background-size: auto; 
        
        background-color: rgba(255, 255, 255, 0.7); /* 배경 이미지 위에 투명 흰색 레이어 */
        line-height: 1.5;
        white-space: pre; 
        overflow-y: scroll;
        
        /* 탭 크기 통일 */
        -moz-tab-size: 4; 
        -o-tab-size: 4;
        tab-size: 4; 
    }
    
    /* ------------------------------------- */
    /* 기타 스타일 (이전과 동일) */
    /* ------------------------------------- */
    #resultFrame {
        width: 100%;
        height: 600px; 
        border: 1px solid #ccc; 
        border-radius: 4px;
        background-color: white;
    }
    
    .modal-backdrop { display: none; position: fixed; z-index: 1001; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.7); backdrop-filter: blur(3px); }
    .modal-content { background-color: #fefefe; margin: 5% auto; padding: 20px; border: 1px solid #888; width: 80%; max-width: 800px; border-radius: 8px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); }
    .close-button { color: #aaa; float: right; font-size: 28px; font-weight: bold; text-decoration: none; padding-left: 10px; }
    .close-button:hover, .close-button:focus { color: #000; cursor: pointer; text-decoration: none; }
    #toastContainer { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 2000; display: flex; flex-direction: column; align-items: center; pointer-events: none; }
    .toast-message { background-color: rgba(0, 0, 0, 0.85); color: white; padding: 10px 20px; border-radius: 5px; margin-bottom: 10px; opacity: 0; transition: opacity 0.5s, transform 0.5s; min-width: 200px; text-align: center; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); pointer-events: auto; }
    .toast-message.show { opacity: 1; transform: translateY(0); }
    .toast-message.hide { opacity: 0; transform: translateY(20px); }
    @media screen and (max-width: 768px) { .container { margin: 10px; padding: 10px; } .editor-area { flex-direction: column; } .code-panel { width: 100%; } button { width: auto; } .modal-content { width: 90%; margin: 10% auto; } #resultFrame { height: 300px; } }