: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}