/* General Body and Base Styles */
body {
    font-family: 'Segoe UI', monospace;
    background-color: #111;
    color: #0f0;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-rows: auto 1fr auto; /* 헤더, 메인 콘텐츠, 푸터 */
    min-height: 100vh; /* 전체 뷰포트 높이 */
    overflow-x: hidden; /* 가로 스크롤 방지 */
    transition: background-color 0.5s ease; /* LED 모드 전환 시 부드러운 배경 전환 */
}

/* Header */
header {
    background-color: #0a0a0a;
    color: #0f0;
    padding: 15px 20px;
    text-align: center;
    border-bottom: 1px solid #333;
    transition: all 0.5s ease; /* LED 모드 전환 시 부드러운 전환 */
}
header h1 {
    margin: 0;
    font-size: 1.8em;
}

/* Main Container for 3 Columns */
#container {
    display: grid;
    grid-template-columns: 250px 1fr 300px; /* 작품 (고정), 드로잉 영역 (유동), 오른쪽 패널 (고정) */
    gap: 20px;
    padding: 20px;
    overflow: auto; /* 콘텐츠가 넘칠 경우 스크롤 허용 */
    transition: all 0.5s ease; /* LED 모드 전환 시 부드러운 전환 */
}

/* Left Artwork Section */
#artwork-section {
    background-color: #1a1a1a;
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #333;
    overflow-y: auto; /* 작품 콘텐츠가 높이를 초과할 경우 스크롤 허용 */
    display: flex;
    flex-direction: column;
    transition: all 0.5s ease; /* LED 모드 전환 시 부드러운 전환 */
}
#artwork-section h2 {
    margin-top: 0;
    color: #0f0;
    margin-bottom: 10px;
}
#saved-artworks {
    flex-grow: 1;
    overflow-y: auto;
    padding-right: 5px; /* 스크롤바 공간 확보 */
}
.saved-artwork-item {
    background-color: #2a2a2a;
    border: 1px solid #444;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: background-color 0.2s;
    position: relative;
    padding-right: 40px; /* 삭제 버튼 공간 */
}
.saved-artwork-item:hover {
    background-color: #3a3a3a;
}
.saved-artwork-item h4 {
    margin: 0 0 5px 0;
    color: #0f0;
    font-size: 1.1em;
}
.saved-artwork-item p {
    margin: 0;
    font-size: 0.8em;
    color: #999;
}
.delete-artwork-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    background: #ff0000;
    color: white;
    border: none;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    font-size: 1.2em;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1; /* 텍스트 중앙 정렬을 위해 */
    padding: 0; /* 내부 패딩 제거 */
}
.delete-artwork-btn:hover {
    background: #cc0000;
}


/* Drawing Area (Middle) */
#drawing-area {
    display: flex;
    flex-direction: column; /* 자식 요소들을 수직으로 쌓음 */
    position: relative; /* 배경 이미지 위치 지정을 위함 (이제는 grid-wrapper에만 영향을 줌) */
    background-color: #1a1a1a;
    border-radius: 10px;
    border: 1px solid #333;
    padding: 10px;
    gap: 15px; /* 컨트롤과 그리드 사이 간격 추가 */
    transition: all 0.5s ease; /* LED 모드 전환 시 부드러운 전환 */
}

/* Controls (이동됨) */
#controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* 컨트롤들을 가로로 중앙 정렬 */
    gap: 10px;
    align-items: center;
    padding: 10px;
    background-color: #0a0a0a; /* 선택 사항: 배경색 추가 */
    border-radius: 8px; /* 선택 사항: 모서리 둥글게 */
    transition: all 0.5s ease; /* LED 모드 전환 시 부드러운 전환 */
}

/* 파일 선택 레이블을 버튼처럼 보이게 함 */
.button-label {
    background: #222;
    color: #0f0;
    border: 1px solid #333;
    padding: 8px 15px;
    cursor: pointer;
    transition: background 0.2s;
    border-radius: 5px;
    display: inline-block; /* 라벨을 버튼처럼 보이게 */
    text-align: center;
    font-family: Arial, sans-serif;
    font-size: 13.3px;
}
.button-label:hover {
    background: #333;
}


#grid-wrapper {
    flex-grow: 1; /* 그리드가 남은 공간을 모두 차지하도록 함 */
    max-width: 100%;
    max-height: 100%;
    display: flex; /* 그리드를 래퍼 안에서 가운데 정렬 */
    justify-content: center;
    align-items: center;
    position: relative; /* 중요: backgroundImage가 이 부모를 기준으로 위치하도록 */
}

#grid {
    display: grid;
    gap: 1px;
    width: fit-content; /* 콘텐츠에 맞춰 너비 조정 */
    height: fit-content; /* 콘텐츠에 맞춰 높이 조정 */
    user-select: none;
    border: 1px solid #333;
    background: transparent; /* 그리드 자체의 배경을 투명하게 설정 (이미지 비침) */
    position: relative; /* 셀의 z-index를 위해 */
    z-index: 2; /* 이미지 위에 오도록 */
}

.cell {
    --cell-width: 14px; /* 기본 셀 너비. JS에서 덮어씀 */
    --cell-height: 14px; /* 기본 셀 높이. JS에서 덮어씀 */
    width: 14px;
    height: 14px;
    background: #111; /* 기본 배경색은 불투명한 #111로 설정 */
    text-align: center;
    vertical-align: middle;
    line-height: 14px;
    font-size: 10px;
    cursor: pointer;
    transition: background 0.2s;
}
.cell:hover {
    background: rgba(0, 255, 0, 0.2);
}
.filled {
    color: #0f0;
}

/* 트레이싱 모드일 때 셀의 배경색 */
.cell.tracing-mode {
    background: rgba(255,255,255,0.05); /* 트레이싱 이미지 있을 때만 투명도 적용 */
}
.cell.tracing-mode:hover {
    background: rgba(0, 255, 0, 0.2); /* 호버 색상은 동일하게 유지 */
}


#backgroundImage {
    position: absolute; /* grid에 상대적으로 위치 */
    top: 0;
    left: 0;
    max-width: 100%; /* Ensure it doesn't exceed grid bounds */
    max-height: 100%; /* Ensure it doesn't exceed grid bounds */
    object-fit: contain; /* 비율 유지하며 영역 안에 맞춤 */
    opacity: 0; /* 초기 투명도를 0으로 설정 (JS에서 동적으로 변경) */
    z-index: 1; /* 그리드(#grid)보다 아래에 위치 */
    pointer-events: none; /* Make it not interfere with cell clicks */
    transition: opacity 0.3s ease-in-out; /* 투명도 변화에 대한 트랜지션 추가 */
}

/* Right Panel */
#right-panel {
    display: flex;
    flex-direction: column; /* 출력 및 컨트롤을 쌓음 */
    gap: 20px;
    transition: all 0.5s ease; /* LED 모드 전환 시 부드러운 전환 */
}

/* Output Section */
#output-section {
    background-color: #1a1a1a;
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #333;
    flex-grow: 1; /* 사용 가능한 공간을 차지하도록 함 */
    display: flex;
    flex-direction: column;
    transition: all 0.5s ease; /* LED 모드 전환 시 부드러운 전환 */
}
#output-section h3 {
    margin-top: 0;
    color: #0f0;
    margin-bottom: 10px;
}
textarea#exported { /* exported textarea 선택자 명확히 지정 */
    width: 100%;
    flex-grow: 1; /* 남은 높이를 모두 차지 */
    background: #000;
    color: #0f0;
    border: 1px solid #333;
    padding: 10px;
    resize: vertical; /* 수직 크기 조절 허용 */
    margin-bottom: 10px; /* 작품명 입력 필드와의 간격 */

    font-family: monospace; /* 명시적으로 monospace 폰트 사용 */
    font-size: 11px; /* 폰트 크기 조정 (기존 10px에서 조금 키움) */
    line-height: 1.1; /* 줄 간격 조정 (텍스트가 겹치지 않게) */
    white-space: pre; /* 공백 유지 */
    overflow: auto; /* 내용이 넘칠 경우 스크롤바 표시 */
    box-sizing: border-box; /* 패딩과 보더가 너비/높이에 포함되도록 */
}

/* 작품명 입력 필드 스타일 */
#artworkNameInput {
    background: #000;
    color: #0f0;
    border: 1px solid #333;
    padding: 6px;
    border-radius: 5px;
    width: calc(100% - 12px); /* 패딩 고려 */
    margin-bottom: 10px;
}
#output-section label[for="artworkNameInput"] {
    display: block; /* 라벨을 블록 요소로 만들어 줄 바꿈 */
    text-align: left;
    margin-bottom: 5px;
    color: #0f0;
    font-size: 0.9em;
}

/* Export Options */
#exportOptions {
    margin-top: 10px; /* 내보내기 버튼 그룹 상단 간격 */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}


/* Controls Remote */
#controls-remote {
    background-color: #1a1a1a;
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #333;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 15px; /* 컨트롤 그룹 사이 간격 */
    transition: all 0.5s ease; /* LED 모드 전환 시 부드러운 전환 */
}
#controls-remote h2 {
    margin-top: 0;
    margin-bottom: 10px;
    color: #0f0;
}

#shift-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding-top: 10px;
    border-top: 1px solid #222; /* 구분선 */
}

#shift-buttons > div {
    display: flex; 
    justify-content: center; 
    gap: 5px;
}


#utiltoolBox {    
    gap: 10px;
}


#ledtoolBox {
    display: flex; 
    justify-content: center; 
    gap: 10px;
}




/* LED Mode Controls */
#led-mode-settings-panel { /* 패널 ID 변경 */
    display: flex; /* JavaScript에서 토글 */
    flex-direction: column;
    gap: 10px;
    padding-top: 15px;
    margin-top: 15px;
    border-top: 1px solid #222;
    transition: all 0.3s ease; /* 부드러운 나타남/사라짐 */
    overflow: hidden; /* 숨길 때 내용 잘림 */
    height: auto; /* 기본 높이 */
}
#led-mode-settings-panel.hidden {
    height: 0;
    padding-top: 0;
    margin-top: 0;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

#led-mode-settings-panel h3 {
    margin: 0 0 10px 0;
    color: #0f0;
}
.led-option-group {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
}

#ledSpeedRange {
    max-width: 120px;
}



#ledSpeedValue {
    min-width: 40px; /* 속도 값 표시 영역 고정 */
    text-align: left;
    color: #ccc;
}
/* LED Mode specific styles */
body.led-mode {
    background-color: #000; /* LED 모드에서는 배경을 더 어둡게 */
}
/* LED 모드 시작 시 숨길 UI 요소들 */
/* header, footer는 별도로 display: none 처리 */
body.led-mode-fullscreen .main-ui-panel {
    display: none !important; /* 중요: 다른 flex/grid 속성 오버라이드 */
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

/* LED 모드 시작 시 전체 화면 레이아웃 변경 */
body.led-mode-fullscreen #container {
    grid-template-columns: 1fr; /* 1열로 변경 */
    grid-template-rows: 1fr; /* 그리드가 전체 높이 차지 */
    padding: 0; /* 패딩 제거 */
}

body.led-mode-fullscreen #drawing-area {
    grid-column: 1 / -1; /* 전체 너비 차지 */
    grid-row: 1 / -1; /* 전체 높이 차지 */
    background-color: #000; /* 드로잉 영역 배경도 검정 */
    border-radius: 0; /* 모서리 둥글기 제거 */
    padding: 0; /* 패딩 제거 */
    justify-content: center; /* 그리드를 중앙 정렬 */
    align-items: center;
}

body.led-mode-fullscreen header,
body.led-mode-fullscreen footer {
    display: none; /* 헤더와 푸터 숨기기 */
}


.led-mode #grid {
    background: #000; /* 그리드 배경도 검정 */
    border: none; /* 그리드 테두리 제거 */
    overflow: hidden;
}
.led-mode .cell {
    background-color: #000 !important; /* LED 모드 셀 기본 배경은 검정 */
    transition: none; /* 애니메이션 중 충돌 방지 */
    color: #0f0; /* 기본 텍스트 색상 (깜빡이거나 이동하지 않을 때) */
}
.led-mode .cell.filled {
    color: #0f0; /* 채워진 셀의 색상 (애니메이션 적용 전) */
    text-shadow: 0 0 5px #0f0, 0 0 10px #0f0, 0 0 15px #0f0; /* LED glow effect */
}

/* LED Blinking Animation */
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}
.led-mode .cell.filled.blink-animation {
    animation: blink var(--animation-duration) infinite alternate;
}

/* LED Moving Animations */
/* 각 방향별 @keyframes 정의: --cell-width, --cell-height, --cols, --rows 변수 활용 */
@keyframes moveLeft {
    from { transform: translateX(calc(var(--cell-width) * var(--cols) * 2.5)); } /* 오른쪽 밖에서 시작 */
    to { transform: translateX(calc(-1 * var(--cell-width) * var(--cols) * 2.5)); } /* 왼쪽 밖으로 사라짐 */
}
@keyframes moveRight {
    from { transform: translateX(calc(-1 * var(--cell-width) * var(--cols) * 2.5)); } /* 오른쪽 밖으로 사라짐 */
    to { transform: translateX(calc(var(--cell-width) * var(--cols) * 2.5)); } /* 오른쪽 밖으로 사라짐 */
}
@keyframes moveUp {
    from { transform: translateY(calc(var(--cell-height) * var(--rows) * 2.5)); } /* 아래쪽 밖에서 시작 */
    to { transform: translateY(calc(-1 * var(--cell-height) * var(--rows) * 2.5)); } /* 위쪽 밖으로 사라짐 */
}
@keyframes moveDown {
    from { transform: translateY(calc(-1 * var(--cell-height) * var(--rows) * 2.5)); } /* 위쪽 밖에서 시작 */
    to { transform: translateY(calc(var(--cell-height) * var(--rows) * 2.5)); } /* 아래쪽 밖으로 사라짐 */
}

.led-mode .cell.filled.move-animation {
    animation-duration: var(--animation-duration);
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    white-space: nowrap; /* 텍스트가 한 줄로 유지되도록 */
    overflow: hidden; /* 셀 경계를 넘어가는 텍스트 숨기기 (셀 내부에서만 숨김) */
    display: inline-block; /* transform 적용을 위해 */
    transform: translateX(0); /* 기본값 */
    animation-fill-mode: forwards; /* 애니메이션 종료 후 마지막 키프레임 상태 유지 */
    /* animation-name은 JS에서 동적으로 설정될 예정 */
}

/* Common Control Styles */
select, input[type="number"], input[type="text"] {
    background: #000;
    color: #0f0;
    border: 1px solid #333;
    padding: 6px; /* 터치 편의성을 위해 패딩 증가 */
    border-radius: 5px;
}
input[type="range"] {
    -webkit-appearance: none; /* 웹킷 브라우저 기본 스타일 제거 */
    width: 100%;
    height: 8px;
    background: #333;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
    border-radius: 4px;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #0f0;
    cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #0f0;
    cursor: pointer;
}


button {
    background: #222;
    color: #0f0;
    border: 1px solid #333;
    padding: 8px 15px; /* 패딩 증가 */
    cursor: pointer;
    transition: background 0.2s;
    border-radius: 5px;
}
button:hover {
    background: #333;
}

/* Modal Styles */
.modal {
    display: none; /* 기본적으로 숨김 */
    position: fixed; /* 제자리에 고정 */
    z-index: 100; /* 맨 위로 */
    left: 0;
    top: 0;
    width: 100%; /* 전체 너비 */
    height: 100%; /* 전체 높이 */
    overflow: auto; /* 필요 시 스크롤 허용 */
    background-color: rgba(0,0,0,0.7); /* 불투명한 검은색 */
    justify-content: center;
    align-items: center;
}

.modal-content {
    background-color: #1a1a1a;
    margin: auto;
    padding: 20px;
    border: 1px solid #555;
    width: 90%; /* 반응형 너비 */
    max-width: 600px; /* 큰 화면에서의 최대 너비 */
    border-radius: 10px;
    position: relative;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.modal-content h2 {
    color: #0f0;
    margin-top: 0;
    margin-bottom: 20px;
    text-align: center;
}

.close-button {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    position: absolute;
    top: 10px;
    right: 20px;
    cursor: pointer;
}
.close-button:hover,
.close-button:focus {
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}

/* Slot Grid (inside modal) */
#slots-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2열 */
    gap: 15px; /* 슬롯 그룹 사이 간격 */
    justify-content: center;
}

.slot-group {
    display: flex;
    flex-direction: column;
    gap: 6px; /* 저장/불러오기 버튼 사이 작은 간격 */
    border: 1px solid #333;
    border-radius: 8px;
    padding: 10px;
    background-color: #2a2a2a;
}
.slot-label {
    font-size: 1.1em;
    color: #fff;
    margin-bottom: 5px;
    text-align: center;
}
.slot-btn {
    font-size: 1em;
    padding: 8px;
    border-radius: 5px;
}
.slot-btn.save {
    background-color: #004d00;
    border-color: #006600;
}
.slot-btn.save:hover {
    background-color: #006600;
    border-color: #008000;
}
.slot-btn.load {
    background-color: #00004d;
    border-color: #000066;
}
.slot-btn.load:hover {
    background-color: #000066;
    border-color: #000080;
}
.slot-feedback {
    background-color: #88ff88;
    color: #000;
    font-weight: bold;
    text-align: center;
    padding: 5px 0;
    margin-top: 8px;
    border-radius: 4px;
}
.slot-feedback.error {
    background-color: #ff8888;
}

/* Footer */
footer {
    background-color: #0a0a0a;
    color: #555;
    padding: 10px 20px;
    text-align: center;
    font-size: 0.8em;
    border-top: 1px solid #333;
    transition: all 0.5s ease; /* LED 모드 전환 시 부드러운 전환 */
}
footer a {
    color: #0f0;
    text-decoration: none;
}
footer a:hover {
    text-decoration: underline;
}

/* 토스트 알림 스타일 */
.toast-notification {
    visibility: hidden; /* 기본적으로 숨김 */
    min-width: 250px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    padding: 10px;
    position: fixed;
    z-index: 101; /* 모달 위로 */
    left: 50%;
    transform: translateX(-50%); /* 중앙 정렬 */
    bottom: 50px; /* 화면 하단에서 50px 위 */
    opacity: 0;
    transition: opacity 0.5s, visibility 0.5s;
}
.toast-notification.show {
    visibility: visible;
    opacity: 1;
}


footer {
    background-color: #0a0a0a;
    color: #555;
    padding: 10px 20px;
    text-align: center;
    font-size: 0.8em;
    border-top: 1px solid #333;
    transition: all 0.5s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px;
}



/* Responsive Adjustments */
@media (max-width: 1024px) {
    header {
        padding: 7px 20px;        
        font-size: 7px;
        font-weight: lighter;
    }


    #container {
        grid-template-columns: 1fr; /* 작은 화면에서는 열을 쌓음 */
        grid-template-rows: auto auto auto; /* 순서대로 정렬 */
        padding: 0px;
    }
    #artwork-section {
        order: 3; /* 작품 섹션이 먼저 오도록 */
        margin-bottom: 10px;
    }
    #drawing-area {
        order: 2; /* 드로잉 영역이 두 번째로 */
        box-sizing: border-box;
        gap: 10px;
    }


    #right-panel {
        order: 1; /* 오른쪽 패널이 마지막으로 */
        gap: 5px;
    }

    #output-section {
        flex-direction: row;
        font-size: 12px;
        justify-content: center;
        align-items: center;
        padding: 5px 15px;
    }

    #output-section label[for="artworkNameInput"] {
        font-size: 12px;
        min-width: 50px;
    }

    #artworkNameInput {
        width: calc(35%);
        max-width: 100px;
        margin-bottom: 0px;
    }

    #exportOptions {
        margin-top: 0px;
        margin-left: 5px;        
        gap: 10px;
    }


    #output-section h3 {
        display: none;
    }

    textarea#exported {
        display: none;
    }



    #controls {
        gap: 7px;
        font-size: 12px;
    }

    #controls select, #controls input[type="number"], #controls input[type="text"] {
        min-width: 55px;
        max-width: 55px;
        box-sizing: border-box;
    }

    
    #controls-remote {
        margin-top: 0px; /* 쌓였을 때 간격 추가 */
        display: flex;
        justify-content: center;
        flex-direction: row;
        flex-wrap: wrap;
        font-size: 12px;
        align-items: center;
        gap: 15px;
        padding: 5px 15px;
    }

    #controls-remote h2 {
        /* display: none; */
        max-width: 50px;
        font-size: 12px;
        margin-bottom: 0px;
    }

    
    #shift-buttons { 
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 10px;
        padding-top: 0px;
        border-top: 1px solid #222;
        max-width: 345px;
    }

    #shift-buttons > div {
        gap: 10px;
    }


    #utiltoolBox {
        max-width: 250px;
        gap: 10px;
    }


    #led-mode-controls {
        margin-top: 5px;
        min-width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 3px;        
        font-size: 12px;
        justify-content: center;
    }

    #led-mode-controls h3 { 
        font-size: 12px;
        max-width: 60px;
        min-width: 60px;
    }

    #ledtoolBox {
        gap: 15px;
        max-width: 300px;
    }

    .led-option-group {
        /* margin-left: 10px; */
        padding: 0px 0px 0px 0px;
    }

    .led-option-group label {
        display: flex;
        justify-content: center;
        align-items: center;
        min-width: 45px;
        gap: 2px;
    }

    .led-option-group1, .led-option-group2 {
        padding: 0px 0px 0px 50px;
    }


    .led-option-group select {
        min-width: 65px;
        max-width: 65px;
        box-sizing: border-box;
    }


    #ledSpeedRange {
        max-width: 55px;
    }


    #grid {
        width: 92vw;
        min-height: 335px;
        height: fit-content;
        box-sizing: border-box;
    }

    
    /* 1024px 이하 화면에서 셀 크기 조절 */
    .cell {
        --cell-width: 10px; /* 업데이트된 셀 너비 */
        --cell-height: 10px; /* 업데이트된 셀 높이 */
        width: 10px;
        height: 10px;
        line-height: 10px;
        font-size: 8px; /* 폰트 사이즈도 줄여서 셀에 맞게 */
    }

    #artwork-section h2 {
        font-size: 12px;
    }

    #saved-artworks {
        font-size: 12px;
    }


}

@media (max-width: 768px) {
    #controls {
        gap: 3px;
        font-size: 12px;
    }

    #controls select, #controls input[type="number"], #controls input[type="text"] {
        min-width: 55px;
        max-width: 55px;
        box-sizing: border-box;
    }

    
    #controls-remote {
        margin-top: 0px; /* 쌓였을 때 간격 추가 */
        display: flex;
        justify-content: space-between;
        flex-direction: row;
        flex-wrap: wrap;
        font-size: 12px;
        align-items: center;
        gap: 0px;
        padding: 5px 15px;
    }

    #controls-remote h2 {
        /* display: none; */
        max-width: 50px;
        font-size: 12px;
        margin-bottom: 0px;
    }

    
    #shift-buttons { 
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 2px;
        padding-top: 0px;
        border-top: 1px solid #222;
        max-width: 275px;
    }

    #shift-buttons > div {
        gap: 2px;
    }


    #utiltoolBox {
        max-width: 140px;
        gap: 2px;
    }


    #led-mode-controls {
        margin-top: 5px;
        min-width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 3px;        
        font-size: 12px;
    }

    #led-mode-controls h3 { 
        font-size: 12px;
        max-width: 60px;
        min-width: 60px;
    }

    #ledtoolBox {
        gap: 5px;
        max-width: 200px;
    }

    .led-option-group {
        /* margin-left: 10px; */
        padding: 0px 0px 0px 0px;
    }

    .led-option-group label {
        display: flex;
        justify-content: center;
        align-items: center;
        min-width: 45px;
        gap: 2px;
    }

    .led-option-group1, .led-option-group2 {
        padding: 0px 0px 0px 50px;
    }


    .led-option-group select {
        min-width: 65px;
        max-width: 65px;
        box-sizing: border-box;
    }


    #ledSpeedRange {
        max-width: 55px;
    }


    #grid {
        width: 92vw;
        min-height: 335px;
        height: fit-content;
        box-sizing: border-box;
    }








    /* 더 작은 화면에서 셀 크기 한 번 더 조절 */
    .cell {
        --cell-width: 8px; /* 업데이트된 셀 너비 */
        --cell-height: 8px; /* 업데이트된 셀 높이 */
        width: 8px;
        height: 8px;
        line-height: 8px;
        font-size: 6px;
    }

    /* 컨트롤 요소들의 간격 조정 */
    #controls {
        gap: 3px;
    }

    #exportOptions {
        gap: 10px;
    }
    
    /* 입력 필드 및 버튼의 패딩 조정 */
    select,#controls input[type="number"],input[type="text"],button,.button-label {
        padding: 6px 10px;
        font-size: 0.9em;
    }


    #controls-remote select, #controls-remote input[type="number"], #controls-remote input[type="text"],#controls-remote button,#controls-remote .button-label {
        padding: 6px 3px;
        font-size: 0.9em;
    }

    footer {
        font-size: 9px;
    }


}


@media (max-width: 600px) {
    .modal-content {
        width: 95%; /* 매우 작은 화면에서 모달 너비 확장 */
    }
    #slots-grid {
        grid-template-columns: 1fr; /* 작은 휴대폰에서는 슬롯을 단일 열로 */
    }

    /* 가장 작은 화면에서 셀 크기 최종 조절 */
    .cell {
        --cell-width: 6px; /* 업데이트된 셀 너비 */
        --cell-height: 6px; /* 업데이트된 셀 높이 */
        width: 6px;
        height: 6px;
        line-height: 6px;
        font-size: 5px;
    }
    
    /* 토스트 알림 위치 조정 */
    .toast-notification {
        bottom: 20px;
    }
}




/* In your CSS file */
.modal-overlay {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1000; /* High z-index to appear on top */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Enable scroll if content is too large */
    background-color: rgba(0, 0, 0, 0.8); /* Black w/ opacity */
    justify-content: center;
    align-items: center;
}

.modal-content-led {
    background-color: #000000;
    margin: auto;
    /* padding: 20px; */
    /* border: 1px solid #888; */
    width: 100vw;
    height: 100vh;
    /* max-width: 1200px; */
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
#led-grid-display-area {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Prevent scrollbars in the display area itself */
}

/* Style for the cloned grid within the modal */
#led-grid-display-area .grid-clone {
    /* Adjust these styles to make it fit 100vh of the modal content area */
    width: 100vw; /* Let content dictate width */
    height: 100%;
    display: grid; /* Maintain grid layout */
    /* You might need to adjust font-size or cell size for optimal viewing in modal */
    font-size: 1.5vmin; /* Example, adjust as needed */
}

#led-grid-display-area .grid-clone .cell {
    /* Ensure cells scale appropriately */
    width: 100%;
    height: 100%;
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 0px solid rgba(255, 255, 255, 0.05); /* Optional: thinner borders for LED effect */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    
}


.close-button {
    color: #aaaaaa;
    font-size: 28px;
    font-weight: bold;
    position: absolute;
    top: 10px;
    right: 15px;
    cursor: pointer;
}

.close-button:hover,
.close-button:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}



/* style.css 에 추가 */
#import-text-modal .modal-content {
    background-color: #282c34; /* Darker background */
    margin: 10% auto; /* Adjust vertical position */
    padding: 30px;
    border: 1px solid #444;
    width: 60%; /* Adjust width as needed */
    max-width: 700px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    animation-name: animatetop;
    animation-duration: 0.4s;
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
}

#import-text-modal textarea {
    width: 95%;
    padding: 10px;
    background-color: #1a1a1a;
    border: 1px solid #0f0;
    color: #eee;
    font-family: monospace;
    font-size: 14px;
    resize: vertical; /* Allow vertical resizing */
}

#import-text-modal .action-btn {
    background-color: #0f0;
    color: #1a1a1a;
    border: none;
    padding: 10px 20px;
    font-size: 1em;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.2s;
}

#import-text-modal .action-btn:hover {
    background-color: #0c0;
}