/* common.css */
.theme-toggle-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.theme-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 20px;
}

.theme-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    inset: 0;
    cursor: pointer;
    background: #d1d5db;
    border-radius: 999px;
    transition: all 0.3s ease;
}

.slider:before {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    left: 4px;
    top: 4px;
    background: white;
    border-radius: 50%;
    transition: all 0.3s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,.2);
}

input:checked + .slider {
    background: #3b82f6;
}

input:checked + .slider:before {
    transform: translateX(28px);
}

.slider:hover {
    filter: brightness(0.95);
}

/* ------------------------------------------------------------
   맨 끝 카드에 들어가는 유틸리티 패널 (네트워크 속도 / 다크모드 / 설정)
   위치·크기 같은 레이아웃만 여기(공용)에 두고, 색상은 style.css / style_dark.css에서.
------------------------------------------------------------ */
.utility-card {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    padding: 10px 16px;
    gap: 4px;
    cursor: default;
}

.utility-card:hover {
    transform: none;
    border-color: #333;
}

.utility-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
}

.utility-value {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.utility-setting-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 30px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: 0.15s;
}

.utility-setting-btn:hover {
    transform: translateY(-1px);
}

.utility-setting-btn img {
    width: 15px;
    height: 15px;
    object-fit: contain;
}

/* ------------------------------------------------------------
   필라멘트 표시 - 카메라(.video-container) 우측/좌측 하단에 오버레이.
   외부 스풀 = 작은 정사각형, AMS(다중슬롯) = 키보드 토글시에만 노출되는 하단 바.
------------------------------------------------------------ */
.fila-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 25%;
    display: flex;
    z-index: 20;
    pointer-events: none; /* 카드 전체 클릭(전체화면 전환)을 막지 않도록 */
}

/* 전체화면(상세보기)은 기존 그대로 큰 슬롯 그리드(.slot-container)로 필라멘트를 보여주므로,
   카메라 코너 오버레이는 그리드(일반) 카드에서만 쓴다. */
.card:fullscreen .fila-overlay {
    display: none;
}

.fila-half {
    flex: 1;
    display: flex;
    align-items: flex-end;
    min-width: 0;
}

.fila-half.fila-left { justify-content: flex-start; }
.fila-half.fila-right { justify-content: flex-end; }

/* 외부 스풀 - 작은 정사각형 (모서리는 아주 살짝만 둥글게) */
.fila-square {
    height: 100%;
    aspect-ratio: 1 / 1;
    margin: 0 4px 4px 4px;
    border-radius: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.7);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.35);
}

.card:fullscreen .fila-square {
    font-size: 22px;
}

/* AMS(다중슬롯) - 기본 숨김, 키보드 토글시에만 노출 */
.fila-ams-row {
    display: none;
    height: 100%;
    width: 100%;
    gap: 3px;
    background: rgba(0,0,0,0.72);
    padding: 3px;
    box-sizing: border-box;
}

.fila-ams-row.visible {
    display: flex;
}

.fila-ams-slot {
    flex: 1;
    min-width: 0;
    border-radius: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.7);
}

.card:fullscreen .fila-ams-slot {
    font-size: 18px;
}

.fila-ams-slot.empty {
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.4);
    text-shadow: none;
}

/* ------------------------------------------------------------
   레이어 / 진행률 분할 행 (왼쪽=레이어, 오른쪽=진행률).
   서로 붙어 보이지 않도록 안쪽에 여백을 준다.
------------------------------------------------------------ */
.row-mid-left,
.row-mid-right {
    flex: 1;
    min-width: 0;
}

.row-mid-left {
    text-align: left;
    padding-right: 8px;
}

.row-mid-right {
    text-align: right;
    padding-left: 8px;
}

/* ------------------------------------------------------------
   4K(3840x2160)급 TV 대응: FHD 기준으로 짠 레이아웃/폰트를 그대로 2배로 키워서
   같은 비율로 한 화면에 꽉 차게 보이도록 함 (px 단위 스타일이 대부분이라 zoom이 제일 간단하고 안전함)
------------------------------------------------------------ */
@media (min-width: 3200px) and (min-height: 1700px) {
    body {
        zoom: 2;
    }
}