.toolbar {
            display: flex;
            flex-wrap: wrap;
            gap: 0.25rem; /* gap-1 */
            padding: 0.5rem;
            background-color: white;
            border: 1px solid #e5e7eb; /* gray-200 */
            border-bottom: none;
            border-radius: 0.75rem 0.75rem 0 0; /* rounded-t-xl */
            top: 60px; /* header ³ôÀÌ °í·Á */
            z-index: 10;
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
        }

        .toolbar-button {
            padding: 0.5rem;
            border-radius: 0.5rem;
            transition: background-color 0.15s ease-in-out;
            cursor: pointer;
            color: #4b5563; /* gray-700 */
            font-size: 1.125rem; /* text-lg */
            border: none;
            background: none;
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
        }
        .toolbar-button:hover { background-color: #f3f4f6; /* gray-100 */ }

        /* Ư¼ö±âÈ£ ¹öÆ° */
        .toolbar-button.special {
            background-color: #eff6ff; /* blue-100 */
            color: #2563eb; /* blue-600 */
            font-weight: bold;
        }
        .toolbar-button.special:hover { background-color: #dbeafe; /* blue-200 */ }
        
        .toolbar-select {
        
	        all: unset; /* »ó¼Ó ¼Ó¼ºÀº »ó¼ÓµÈ °ªÀ¸·Î, ³ª¸ÓÁö´Â ÃʱⰪÀ¸·Î, all: initial; /* ¸ðµç ¼Ó¼ºÀ» ÃʱⰪÀ¸·Î */
		    /* unset/initial ÈÄ¿¡ ÇÊ¿äÇÑ ÃÖ¼ÒÇÑÀÇ ½ºÅ¸ÀÏÀ» ´Ù½Ã Á¤ÀÇÇÕ´Ï´Ù. */
		    -webkit-appearance: menulist; /* ±âº» UI appearance º¹¿ø */
		    appearance: menulist;
            
            /* ÆùÆ® Å©±â/Á¾·ù select ÅÂ±× ½ºÅ¸ÀÏ Á¶Á¤ */
            padding: 0.25rem 0.5rem;
            font-size: 0.875rem; /* text-sm */
            height: 2.5rem; /* ¹öÆ°°ú ³ôÀÌ ¸ÂÃß±â */
        }
        .toolbar-select:focus {
             outline: none;
             border-color: #d1d5db;
        }
        
        /* === 3. ¿¡µðÅÍ º»¹® ¿µ¿ª === */
        #editor-content {
            min-height: 200px;
            padding: 1rem;
            border: 1px solid #e5e7eb; /* gray-200 */
            background-color: white;
            transition: all 0.2s;
            line-height: 1.6;
            
            /* Åø¹Ù¿Í À̾îÁöµµ·Ï À§ÂÊ Å׵θ® Á¦°Å */
            border-top: none;
            border-radius: 0 0 0.75rem 0.75rem; /* rounded-b-xl */
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.06); /* shadow-lg */
            height: 35vh;
            overflow-y: auto;
            /* ¿ÞÂÊ Á¤·Ä °íÁ¤ (»ç¿ëÀÚ ¿äû »çÇ×) */
            text-align: left
        }
        /* Æ÷Ä¿½º ½Ã Å׵θ®/±×¸²ÀÚ Á¦°Å */
        #editor-content:focus {
            outline: none;
            border-color: #e5e7eb;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
        }

        /* ÷ºÎ ÆÄÀÏ ¸ñ·Ï ÄÁÅ×ÀÌ³Ê */
        .file-list-container {
            padding: 0.5rem 1rem; /* px-4 py-2 */
            margin-top: 0;
            background-color: white;
            border-bottom: 1px solid #e5e7eb;
            border-left: 1px solid #e5e7eb;
            border-right: 1px solid #e5e7eb;
            border-radius: 0 0 0.75rem 0.75rem;
            box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05); /* shadow-inner */
            margin-bottom: 0.5rem;
        }
        .file-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #f3f4f6; /* gray-100 */
            padding: 0.5rem;
            border-radius: 0.5rem;
            border: 1px solid #e5e7eb;
            font-size: 0.875rem; /* text-sm */
            color: #4b5563; /* gray-700 */
        }
        
        /* === 4. ¹öÆ° ¹× ¸ð´Þ (¼öÁ¤µÈ ·¹À̾ƿô) === */
        
        /* »õ·Î¿î ¾×¼Ç ¹öÆ°À» Æ÷ÇÔÇÏ´Â Çà ÄÁÅ×ÀÌ³Ê (÷ºÎ ¹öÆ°Àº ¿ÞÂÊ, ¾×¼Ç ¹öÆ°Àº ¿À¸¥ÂÊ) */
        .action-row {
            padding: 1rem 1rem 0.75rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        /* ÷ºÎ ¹öÆ° ½ºÅ¸ÀÏ */
        .upload-label {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0; /* ¹öÆ°ÀÌ Âî±×·¯ÁöÁö ¾Êµµ·Ï */
            background-color: #10b981; /* green-500 */
            color: white;
            padding: 0.5rem 0.75rem; /* Àû´çÇÑ Å©±â */
            border-radius: 0.5rem;
            font-weight: 600;
            cursor: pointer;
            transition: background-color 0.15s ease-in-out;
            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); /* shadow-md */
            font-size: 0.875rem; /* text-sm */
        }
        .upload-label:hover { background-color: #059669; /* green-600 */ }
        
        /* ¸ñ·Ï, ¼öÁ¤, »èÁ¦, µî·Ï ¹öÆ° ±×·ì (¿À¸¥ÂÊ Á¤·Ä) */
        .action-buttons-group {
            display: flex;
            gap: 0.5rem; /* ¹öÆ° °£ °£°Ý */
        }

        /* °øÅë ¾×¼Ç ¹öÆ° ½ºÅ¸ÀÏ */
        .action-button {
            padding: 0.5rem 0.75rem; /* Àû´çÈ÷ ÀÛÀº Å©±â */
            border-radius: 0.5rem;
            font-weight: 600;
            border: 1px solid #d1d5db; /* gray-300 */
            cursor: pointer;
            transition: background-color 0.15s ease-in-out;
            font-size: 0.875rem; /* text-sm */
            flex-shrink: 0;
        }

        /* ¸ð´Þ ½ºÅ¸ÀÏ */
        .modal-overlay {
            position: fixed;
            inset: 0;
            z-index: 40;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: rgba(0, 0, 0, 0.7);
        }
        .modal-content {
            background-color: white;
            margin: 1rem;
            padding: 1.5rem;
            border-radius: 0.75rem;
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); 
            width: 100%;
            max-width: 512px;
            max-height: 90vh;
            overflow-y: auto;
        }
        .char-grid-item {
            font-size: 1.5rem; 
            padding: 0.5rem;
            border-radius: 0.375rem;
            transition: background-color 0.15s;
            background: none;
            border: none;
            cursor: pointer;
        }
        .char-grid-item:hover {
            background-color: #eff6ff; 
        }

        /* === 4. ¸Þ½ÃÁö ¹Ú½º ½ºÅ¸ÀÏ (°¡Àå Áß¿äÇÏ°Ô ¼öÁ¤µÈ ºÎºÐ) === */
        #message-box {
            /* ±âº» À§Ä¡ ¹× ½ºÅ¸ÀÏ */
            position: fixed;
            bottom: 5rem; /* 80px */
            left: 50%;
            transform: translate(-50%, 0);
            padding: 0.75rem 1.5rem;
            color: white;
            border-radius: 0.5rem;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.2);
            text-align: center;
            min-width: 250px;
            
            /* Æ®·£Áö¼Ç ¼³Á¤ */
            transition: opacity 0.3s ease-in-out;

            /* Z-Index¸¦ ÃÖ´ë·Î ¼³Á¤ÇÏ¿© ´Ù¸¥ ¿ä¼Ò À§¿¡ È®½ÇÇÏ°Ô Ç¥½Ã */
            z-index: 99999999; 
        }
        
        /* ¼û±è »óÅ (Ãʱ⠻óÅÂ) */
        .message-box-hidden {
            display: none;
            opacity: 0;
            /* pointer-events: none; /* Ŭ¸¯ ¹æÁö (¼±Åà »çÇ×) */
        }
        
        /* Ç¥½Ã »óÅ */
        .message-box-visible {
            display: block;
            opacity: 1;
        }

        /* .hidden Ŭ·¡½º Ãß°¡ (¸ð´ÞÀ» ±âº»ÀûÀ¸·Î ¼û±è) */
        .hidden {
            display: none !important;
        }