/* lcd.css — LCD 디스플레이 및 LED 인디케이터 스타일링 */

/* LCD 컨테이너 */
.lcd-screen {
    flex: 1;
    background: var(--lcd-bg);
    border: 2px solid #222;
    border-radius: 12px;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 
        inset 0 4px 12px rgba(0, 0, 0, 0.8),
        0 1px 0 rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
    font-family: var(--font-lcd);
    user-select: none;
}

/* 백라이트 ON */
.lcd-screen.backlight-on {
    background: var(--lcd-bg-lit);
    box-shadow: 
        inset 0 4px 12px rgba(0, 0, 0, 0.6),
        0 0 20px rgba(0, 255, 102, 0.15);
    border-color: #334433;
}

/* LCD 텍스트 기본 스타일 */
.lcd-text, .lcd-text-giant, .lcd-label-sub {
    color: var(--lcd-text);
    text-shadow: 0 0 6px rgba(136, 204, 136, 0.4);
    font-weight: bold;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

.lcd-screen.backlight-on .lcd-text,
.lcd-screen.backlight-on .lcd-text-giant,
.lcd-screen.backlight-on .lcd-label-sub {
    color: var(--lcd-text-lit);
    text-shadow: 
        0 0 16px rgba(0, 255, 102, 0.8),
        0 0 6px rgba(0, 255, 102, 0.5);
}

/* LCD 행 레이아웃 */
.lcd-top-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.lcd-main-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
    margin: 4px 0;
    width: 100%;
}

.lcd-beat-col, .lcd-tempo-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1;
}

.lcd-beat-col {
    border-right: 1.5px solid rgba(136, 204, 136, 0.15);
}

.lcd-screen.backlight-on .lcd-beat-col {
    border-right-color: rgba(0, 255, 102, 0.25);
}

.lcd-tempo-value-row {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.lcd-label-sub {
    font-size: 0.58rem;
    opacity: 0.5;
    letter-spacing: 1.2px;
    margin-bottom: 2px;
}

.lcd-screen.backlight-on .lcd-label-sub {
    opacity: 0.75;
}

.lcd-text-giant {
    font-size: 3.0rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -1px;
}

#lcd-bpm-note {
    font-size: 1.6rem;
}

/* LED 인디케이터 */
.led-indicators {
    display: flex;
    justify-content: center;
    gap: 32px;
    align-items: center;
    padding-top: 4px;
    margin-bottom: 8px; /* 아래 컨트롤 영역과의 물리적 겹침 방지 */
}

.led {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.4);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6);
    transition: all 0.1s ease;
}

.led-red {
    background: radial-gradient(circle at 35% 35%, #4a0f0f 0%, #1c0505 100%);
}

.led-red.active {
    background: radial-gradient(circle at 35% 35%, #ff4d4d 0%, #a80000 100%);
    box-shadow: 
        0 0 12px var(--led-red-glow), 
        0 0 4px var(--led-red-glow),
        inset 0 1px 1px rgba(255, 255, 255, 0.4);
}

.led-green {
    background: radial-gradient(circle at 35% 35%, #0f3d0f 0%, #051c05 100%);
}

.led-green.active {
    background: radial-gradient(circle at 35% 35%, #52ff52 0%, #009900 100%);
    box-shadow: 
        0 0 12px var(--led-green-glow), 
        0 0 4px var(--led-green-glow),
        inset 0 1px 1px rgba(255, 255, 255, 0.4);
}