:root{
    --w: 280px; /* 전체 너비 */
    --h: 46px;  /* 트랙 높이 */
    --pad: 0px; /* 트랙 패딩 */
    --bg0: #e0e0e0; /* 상태 0 배경 */
    --bg1: #ffd54f; /* 상태 1 배경 */
    --knob: #000000;
    --transition: 250ms cubic-bezier(.2,.9,.3,1);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}


/* 토글 래퍼 */
.three-toggle{width:var(--w)}

/* 트랙 */
.three-toggle .track{
    position:relative;
    height:var(--h);
    border-radius:50px;
    padding:var(--pad);
    box-sizing:border-box;
    display:flex;align-items:center;
    cursor:pointer;
    user-select:none;
    transition:background var(--transition), box-shadow var(--transition);
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
    background:var(--bg0);
}

/* 상태별 배경 (data-state로 바뀜) */
.three-toggle[data-state="0"] .track{background:var(--bg0)}
.three-toggle[data-state="1"] .track{background:var(--bg0)}

/* 레이블 (왼/중/오) */
.labels{
    display: flex;
    flex-direction: row;
    position:absolute;left:6px;right:6px;top:50%;transform:translateY(-50%);
    display:flex;justify-content:space-between;align-items:center;font-size:12px;color:rgba(0,0,0,.55);
    pointer-events:none;
}
.labels span {flex:1;text-align: center;}

/* 노브 */
.knob{
    width:calc((var(--w) - var(--pad)*2) / 2 + 12px);
    height:calc(var(--h) - var(--pad)*2);
    background:var(--knob);
    border-radius:inherit;
    position:relative;z-index:2;flex:0 0 auto;
    margin-left:0px;
    transition:transform var(--transition), box-shadow var(--transition);
    box-shadow: 0 6px 12px rgba(0,0,0,.12);
    display:flex;align-items:center;justify-content:center;font-weight:600;font-size:1.0rem;color:#FFFFFF;
}

/* 노브 위치: data-state에 따라 이동 */
.three-toggle[data-state="0"] .knob{transform:translateX(0)}
.three-toggle[data-state="1"] .knob{transform:translateX(calc((100%) - 24px))}

/* 접근성 포커스 링 */
.three-toggle:focus-within .track{box-shadow:0 4px 18px rgba(0,0,0,.12)}

/* 설명 텍스트 */
.hint{margin-top:12px;font-size:13px;color:#444;text-align:center}

/* 반응형: 너무 좁으면 너비 줄임 */
/*@media (max-width:360px){:root{--w:150px}}*/