(function(){ var root=document.getElementById('soundbar-tabs-v3'); if(!root)return; var state={tab:0,inch:55,barIndex:2}; var bars=[650,900,1100,1170,1300,1500]; var ranges=['700mm 이하','701~950mm','951~1100mm','1101~1210mm','1211~1430mm','1431~1660mm']; function el(id){return root.querySelector('#'+id);} function text(id,value){var node=el(id);if(node)node.textContent=value;} function fmt(n){return Math.round(n).toLocaleString('ko-KR');} function paint(b,on){b.style.setProperty('background',on?'#1764ee':'#ffffff','important');b.style.setProperty('border-color',on?'#1764ee':'#e0e6ef','important');b.style.setProperty('color',on?'#ffffff':'#536075','important');} function width(id,n){var node=el(id);if(!node)return;var v=n.toFixed(4)+'%';node.style.setProperty('width',v,'important');node.setAttribute('width',v);} function row(prefix,n){width(prefix+'-left',(100-n)/2);width(prefix+'-width',n);width(prefix+'-right',(100-n)/2);} function tab(n,focus){ state.tab=n; root.querySelectorAll('[role=tabpanel]').forEach(function(p,i){var on=i===n;p.style.setProperty('display',on?'block':'none','important');p.setAttribute('aria-hidden',String(!on));}); root.querySelectorAll('[data-tab]').forEach(function(b){var on=Number(b.getAttribute('data-tab'))===n;paint(b,on);b.setAttribute('aria-selected',String(on));b.tabIndex=on?0:-1;if(on&&focus)b.focus();}); } function render(){ root.querySelectorAll('[data-inch]').forEach(function(b){var on=Number(b.getAttribute('data-inch'))===state.inch;paint(b,on);b.setAttribute('aria-pressed',String(on));}); root.querySelectorAll('[data-bar-index]').forEach(function(b){var on=Number(b.getAttribute('data-bar-index'))===state.barIndex;paint(b,on);b.setAttribute('aria-pressed',String(on));}); var current=el('sbt-current-link'),route=el('sbt-route-'+state.barIndex); if(current&&route){current.setAttribute('href',route.getAttribute('href'));current.textContent=ranges[state.barIndex]+' 상품 보기 ↗';} var tv=state.inch*25.4*16/Math.sqrt(337),bar=bars[state.barIndex],axis=Math.max(1660,tv*1920/1668,bar),photo=tv/axis*1920/1668*100,sound=bar/axis*100,gap=(tv-bar)/2,over=Math.sign(gap)===-1; row('sbt-tv',photo);row('sbt-bar',sound); text('sbt-metric-tv',fmt(tv)+'mm');text('sbt-metric-bar',fmt(bar)+'mm');text('sbt-metric-ratio',fmt(bar/tv*100)+'%'); text('sbt-tv-caption',state.inch+'형 TV · 화면 가로 추정'); text('sbt-gap-copy',over?'TV 바깥으로, 한쪽 돌출 약 '+fmt(-gap)+'mm':'TV 안쪽으로, 한쪽 여백 약 '+fmt(gap)+'mm'); text('sbt-summary',state.inch+'형 TV + '+fmt(bar)+'mm 사운드바'); text('sbt-products-tv',state.inch+'형 TV · 화면 가로 약 '+fmt(tv)+'mm'); var cardAxis=Math.max(2000,tv*1920/1668),cardPhoto=tv/cardAxis*1920/1668*100; bars.forEach(function(value,i){ row('sbt-card-tv-'+i,cardPhoto);row('sbt-card-bar-'+i,value/cardAxis*100); var side=(tv-value)/2,beyond=Math.sign(side)===-1; text('sbt-card-gap-'+i,(beyond?'한쪽 돌출 약 ':'한쪽 여백 약 ')+fmt(Math.abs(side))+'mm'); }); } root.addEventListener('click',function(e){ var b=e.target.closest('button');if(!b||!root.contains(b))return; if(b.hasAttribute('data-tab')){tab(Number(b.getAttribute('data-tab')),false);return;} if(b.hasAttribute('data-go')){tab(Number(b.getAttribute('data-go')),true);return;} if(b.hasAttribute('data-inch'))state.inch=Number(b.getAttribute('data-inch')); if(b.hasAttribute('data-bar-index'))state.barIndex=Number(b.getAttribute('data-bar-index')); render(); }); root.addEventListener('keydown',function(e){ var b=e.target.closest('[data-tab]');if(!b)return; var n=Number(b.getAttribute('data-tab')); if(e.key==='ArrowRight')n=(n+1)%4;else if(e.key==='ArrowLeft')n=(n+3)%4;else if(e.key==='Home')n=0;else if(e.key==='End')n=3;else return; e.preventDefault();tab(n,true); }); root.addEventListener('change',function(e){if(e.target.hasAttribute('data-check'))text('sbt-check-count','확인한 항목 '+root.querySelectorAll('[data-check]:checked').length+' / 4');}); tab(0,false);render(); })();