                    .color-card {
                    background: white;
                    border: 2px solid #3b82f6;
                    border-radius: 50px; /* 더 길쭉하고 둥근 형태 */
                    padding: 0px 5px;
                    box-shadow: 0 10px 25px rgba(59, 130, 246, 0.1);
                    display: flex;
                    align-items: center;
                    gap: 0px;
                    max-width: 500px;
                    }
                    h2 {
                    margin: 0;
                    color: #1e3a8a;
                    font-size: 20px;
                    white-space: nowrap;
                    }
                    .picker-section {
                    display: flex;
                    align-items: center;
                    gap: 0px;
                    }
                    /* 컬러피커 스타일링 */
                    input[type="color"] {
                    -webkit-appearance: none;
                    width: 100px;
                    height: 40px;
                    border: none;
                    border-radius: 12px;
                    cursor: pointer;
                    background: none;
                    padding: 0;
                    overflow: hidden;
                    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
                    transition: transform 0.2s;
                    }
                    input[type="color"]:hover {
                    transform: scale(1.1);
                    }
                    input[type="color"]::-webkit-color-swatch-wrapper {
                    padding: 0;
                    }
                    input[type="color"]::-webkit-color-swatch {
                    border: 2px solid #ffffff;
                    border-radius: 12px;
                    }
                    .controls {
                    display: flex;
                    gap: 0px;
                    align-items: center;
                    }
                    input[type="text"] {
                    width: 100px;
                    padding: 10px;
                    font-size: 16px;
                    border: 2px solid #e2e8f0;
                    border-radius: 12px;
                    text-align: center;
                    font-family: monospace;
                    background-color: #f8fafc;
                    color: #334155;
                    outline: none;
                    }
                    button {
                    padding: 10px 20px;
                    font-size: 15px;
                    font-weight: bold;
                    cursor: pointer;
                    background-color: #3b82f6;
                    color: white;
                    border: none;
                    border-radius: 12px;
                    white-space: nowrap;
                    transition: background-color 0.2s;
                    }
                    button:hover {
                    background-color: #2563eb;
                    }
                    /* 알림 메시지 위치 조정 */
                    #message {
                    position: absolute;
                    bottom: -35px;
                    left: 50%;
                    transform: translateX(-50%);
                    margin: 0;
                    font-size: 13px;
                    font-weight: 600;
                    color: #059669;
                    opacity: 0;
                    transition: opacity 0.3s;
                    white-space: nowrap;
                    }
                    #message.show {
                    opacity: 1;
                    }
                    /* 메시지 배치를 위한 컨테이너 상대 좌표 */
                    .relative-box {
                    position: relative;
                    display: flex;
                    align-items: center;
                    }