// SunLike White — single full-viewport story.
// Chart fills full viewport width (no horizontal pan / no scroll-jacking).
// Hover one of the 9 wavelength bands to lock that scene; idle auto-cycles
// every 5s so the animation is always visible.
function SunLikeStory() {
  const stageRef = React.useRef(null);
  const [scene, setScene] = React.useState(0);
  const [hovering, setHovering] = React.useState(false);
  const SCENE_COUNT = 9;

  // Auto-advance when not hovering
  React.useEffect(() => {
    if (hovering) return;
    const t = setInterval(() => setScene((s) => (s + 1) % SCENE_COUNT), 5000);
    return () => clearInterval(t);
  }, [hovering]);

  // Apply scene state to DOM nodes
  React.useEffect(() => {
    const stage = stageRef.current;
    if (!stage) return;
    const SCENES = [
      { nm: 380, annD: 0, annA: 0, annB: 0, annC: 0, bD: 0, bA: 0, bB: 0, bC: 0 },
      { nm: 415, annD: 1, annA: 0, annB: 0, annC: 0, bD: 1, bA: 0, bB: 0, bC: 0 },
      { nm: 450, annD: 0, annA: 1, annB: 0, annC: 0, bD: 0, bA: 1, bB: 0, bC: 0 },
      { nm: 490, annD: 0, annA: 0, annB: 1, annC: 0, bD: 0, bA: 0, bB: 1, bC: 0 },
      { nm: 530, annD: 0, annA: 0, annB: 0, annC: 0, bD: 0, bA: 0, bB: 0, bC: 0 },
      { nm: 570, annD: 0, annA: 0, annB: 0, annC: 0, bD: 0, bA: 0, bB: 0, bC: 0 },
      { nm: 610, annD: 0, annA: 0, annB: 0, annC: 1, bD: 0, bA: 0, bB: 0, bC: 1 },
      { nm: 650, annD: 0, annA: 0, annB: 0, annC: 0, bD: 0, bA: 0, bB: 0, bC: 0 },
      { nm: 720, annD: 0, annA: 0, annB: 0, annC: 0, bD: 0, bA: 0, bB: 0, bC: 0 }
    ];
    const SUN = [[150,724],[510,656],[780,595],[1050,566],[1410,526],[1950,473],[2310,444],[2850,405],[3210,382],[3570,351],[3750,337],[4110,306],[4470,192],[4650,200],[4830,222],[5010,238],[5190,268],[5370,316],[5550,382],[5730,481],[5910,587],[6090,663],[6270,724],[6450,762],[6630,785],[8000,800]];
    const STD = [[150,762],[510,738],[870,682],[1050,604],[1200,440],[1290,356],[1410,40],[1500,250],[1620,620],[1770,740],[1950,762],[2130,747],[2310,709],[2670,595],[2850,542],[3210,420],[3570,329],[3750,306],[3930,299],[4110,299],[4290,316],[4470,344],[4650,374],[5010,435],[5550,572],[5910,663],[6270,724],[6810,768],[8000,790]];
    const NAT = [[150,648],[510,610],[780,572],[1050,534],[1410,496],[1950,450],[2310,420],[2850,382],[3210,359],[3570,329],[3750,314],[4110,283],[4650,245],[5010,222],[5550,192],[5910,177],[6270,169],[6810,169],[8000,196]];
    const ptY = (pts, x) => {
      for (let i = 0; i < pts.length - 1; i++) {
        const [x0, y0] = pts[i], [x1, y1] = pts[i + 1];
        if (x >= x0 && x <= x1) return y0 + (y1 - y0) * (x - x0) / (x1 - x0);
      }
      return pts[pts.length - 1][1];
    };

    const s = SCENES[scene];
    const svgX = (s.nm - 380) * 18 + 150;
    const $ = (id) => stage.querySelector('#' + id);
    const q = (sel) => stage.querySelectorAll(sel);

    q('.tslot').forEach((el, j) => el.classList.toggle('on', j === scene));
    q('.kslot').forEach((el, j) => el.classList.toggle('on', j === scene && el.children.length > 0));
    const tp = $('sl-tp'); if (tp) tp.classList.toggle('s0', scene === 0);
    if ($('ann-D')) $('ann-D').style.opacity = s.annD;
    if ($('ann-A')) $('ann-A').style.opacity = s.annA;
    if ($('ann-B')) $('ann-B').style.opacity = s.annB;
    if ($('ann-C')) $('ann-C').style.opacity = s.annC;
    if ($('band-D')) $('band-D').style.opacity = s.bD;
    if ($('band-A')) $('band-A').style.opacity = s.bA;
    if ($('band-B')) $('band-B').style.opacity = s.bB;
    if ($('band-C')) $('band-C').style.opacity = s.bC;
    const hcl = $('sl-hcl-title'); if (hcl) hcl.classList.toggle('show', scene !== 0);
    const lamp = $('sl-lamp-img'); if (lamp) lamp.classList.toggle('show', scene !== 0);
    const legend = $('sl-legend'); if (legend) legend.classList.toggle('show', scene !== 0);

    // Tracker line + dots
    const ty = ptY(SUN, svgX), tys = ptY(STD, svgX), tyn = ptY(NAT, svgX);
    const setAttrs = (el, attrs) => { if (el) for (const k in attrs) el.setAttribute(k, attrs[k]); };
    setAttrs($('tl'), { x1: svgX, x2: svgX });
    setAttrs($('t-glow'), { cx: svgX, cy: ty });
    setAttrs($('t-dot'), { cx: svgX, cy: ty });
    setAttrs($('std-glow'), { cx: svgX, cy: tys });
    setAttrs($('std-dot'), { cx: svgX, cy: tys });
    setAttrs($('std-lbl'), { x: svgX + 14, y: tys - 4 });
    setAttrs($('nat-glow'), { cx: svgX, cy: tyn });
    setAttrs($('nat-dot'), { cx: svgX, cy: tyn });
    setAttrs($('nat-lbl'), { x: svgX + 14, y: tyn - 4 });
    const stl = stage.querySelector('#stl-text');
    if (stl) { stl.setAttribute('x', svgX + 14); stl.setAttribute('y', ty - 14); }
    const stLabel = stage.querySelector('#sun-tracker-label');
    if (stLabel) stLabel.style.opacity = 1;
  }, [scene]);

  // Hover zone definitions — pct of full chart width (chart spans nm 380..780 → x 150..7350 in viewBox 0..8000)
  // pct = ((nm-380)*18 + 150) / 8000 * 100
  const ZONES = [
    { idx: 0, label: 'Intro',   nm: '380', from: 1.9,  to: 9.7  },
    { idx: 1, label: 'D · 415', nm: '415', from: 9.7,  to: 13.5 },
    { idx: 2, label: 'A · 450', nm: '450', from: 13.5, to: 18.0 },
    { idx: 3, label: 'B · 490', nm: '490', from: 18.0, to: 23.5 },
    { idx: 4, label: 'True',    nm: '530', from: 23.5, to: 31.5 },
    { idx: 5, label: 'Rising',  nm: '570', from: 31.5, to: 41.0 },
    { idx: 6, label: 'C · 610', nm: '610', from: 41.0, to: 53.5 },
    { idx: 7, label: 'CRI 97',  nm: '650', from: 53.5, to: 70.0 },
    { idx: 8, label: 'Awards',  nm: '720', from: 70.0, to: 91.9 }
  ];

  return (
    <section
      id="sunlike-story"
      data-section="sunlike-story"
      data-screen-label="05 SunLike White"
      style={{ height: '100vh', width: '100%', background: '#0a0a0a', position: 'relative' }}>
      <div ref={stageRef} className="sunlike-stage" style={{
        position: 'relative', height: '100vh', width: '100%',
        background: '#0a0a0a', color: '#fff', fontFamily: 'Inter, sans-serif', overflow: 'hidden'
      }}>
        <SunLikeStageMarkup />

        {/* Hover zones — invisible strips that drive scene state */}
        <div className="sl-hzones">
          {ZONES.map((z) => (
            <div
              key={z.idx}
              className={'sl-hzone' + (scene === z.idx ? ' active' : '')}
              style={{ left: z.from + '%', width: (z.to - z.from) + '%' }}
              onMouseEnter={() => { setHovering(true); setScene(z.idx); }}
              onMouseLeave={() => setHovering(false)}>
              <span className="sl-hzone-tick" />
              <span className="sl-hzone-label">{z.nm}<em>nm</em></span>
              <span className="sl-hzone-name">{z.label}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function SunLikeStageMarkup() {
  return (
    <>
      <style>{SUNLIKE_CSS}</style>
      <div className="sl-scene-bg" />
      <div className="sl-yax"><span>Relative power</span></div>
      <div className="sl-yticks">
        <div className="sl-ytick-line" style={{ top: '4.44%' }} />
        <span className="sl-ytick" style={{ top: '4.44%' }}>100</span>
        <div className="sl-ytick-line" style={{ top: '25.56%' }} />
        <span className="sl-ytick" style={{ top: '25.56%' }}>75</span>
        <div className="sl-ytick-line" style={{ top: '46.67%' }} />
        <span className="sl-ytick" style={{ top: '46.67%' }}>50</span>
        <div className="sl-ytick-line" style={{ top: '67.78%' }} />
        <span className="sl-ytick" style={{ top: '67.78%' }}>25</span>
        <div className="sl-ytick-line" style={{ top: '88.89%' }} />
        <span className="sl-ytick" style={{ top: '88.89%' }}>0</span>
      </div>
      <div className="sl-legend" id="sl-legend">
        <div className="sl-leg sun"><div className="sl-lline g" />SunLike White LED</div>
        <div className="sl-leg"><div className="sl-lline n" />Natural Sunlight</div>
        <div className="sl-leg std"><div className="sl-lline s" />Standard LED</div>
      </div>
      <div className="sl-cw" ref={(el) => { if (el && !el.dataset.set) { el.innerHTML = window.__SUNLIKE_SVG_INNER || ''; el.dataset.set = '1'; } }} />
      <div className="sl-hcl-title" id="sl-hcl-title">Human Centric<br />Lighting</div>
      <img className="sl-lamp-img" id="sl-lamp-img" src="assets/lamp-silver-product.png" alt="" />
      <div className="sl-tp" id="sl-tp" dangerouslySetInnerHTML={{ __html: SUNLIKE_TP_HTML }} />
      <div className="sl-ko-area" id="sl-ko-area" dangerouslySetInnerHTML={{ __html: SUNLIKE_KO_HTML }} />
      <div className="sl-axbar">
        <span className="sl-axbar-label">{t('common.wavelength')}</span>
        <span className="sl-axbar-note">SunLike White · Relative Spectral Power · 380–780nm</span>
      </div>
    </>
  );
}

const SUNLIKE_CSS = `
.sunlike-stage{font-family:'Inter',sans-serif;}
.sunlike-stage *,.sunlike-stage *::before,.sunlike-stage *::after{box-sizing:border-box;}
.sunlike-stage .sl-scene-bg{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 90% 70% at 55% 45%,#0d1a28 0%,transparent 68%);}
.sunlike-stage .sl-cw{position:absolute;top:0;bottom:88px;left:0;right:0;width:100%;}
.sunlike-stage .sl-cw svg{position:absolute;top:0;left:0;width:100%;height:100%;}
.sunlike-stage .sl-yax{position:absolute;left:36px;top:50%;transform:translateY(-50%);z-index:20;
  background:#fff;width:28px;padding:10px 0;display:flex;align-items:center;justify-content:center;pointer-events:none;}
.sunlike-stage .sl-yax span{writing-mode:vertical-rl;transform:rotate(180deg);
  font-size:9px;font-weight:600;letter-spacing:.12em;white-space:nowrap;color:#000;}
.sunlike-stage .sl-yticks{position:absolute;left:68px;top:0;bottom:88px;z-index:21;pointer-events:none;}
.sunlike-stage .sl-ytick{position:absolute;left:0;font-size:11px;color:rgba(255,255,255,.42);
  letter-spacing:.03em;transform:translateY(-50%);white-space:nowrap;}
.sunlike-stage .sl-ytick-line{position:absolute;left:-32px;width:28px;height:.5px;
  background:rgba(255,255,255,.12);transform:translateY(-50%);}
.sunlike-stage .sl-axbar{position:absolute;bottom:44px;left:0;right:0;height:44px;
  border-top:1px solid rgba(255,255,255,.08);display:flex;align-items:center;padding:0 76px;z-index:20;
  pointer-events:none;background:rgba(10,10,10,.78);backdrop-filter:blur(8px);}
.sunlike-stage .sl-axbar-label{font-size:13px;font-weight:600;letter-spacing:.04em;color:rgba(255,255,255,.55);}
.sunlike-stage .sl-axbar-note{margin-left:auto;font-size:11px;color:rgba(255,255,255,.3);
  background:rgba(255,255,255,.04);border:.5px solid rgba(255,255,255,.09);border-radius:4px;padding:5px 12px;}
.sunlike-stage .sl-lamp-img{position:absolute;left:6vw;top:18vh;width:clamp(140px,13vw,200px);
  z-index:20;pointer-events:none;opacity:0;transition:opacity .5s;mix-blend-mode:lighten;filter:brightness(0.95);}
.sunlike-stage .sl-lamp-img.show{opacity:.95;}
.sunlike-stage .sl-hcl-title{position:absolute;left:6vw;top:34vh;z-index:20;
  font-size:clamp(1.4rem,2.4vw,2.2rem);font-weight:300;line-height:1.12;letter-spacing:-.025em;
  opacity:0;transition:opacity .5s;pointer-events:none;color:#fff;}
.sunlike-stage .sl-hcl-title.show{opacity:1;}
.sunlike-stage .sl-tp{position:absolute;left:6vw;bottom:14vh;width:clamp(280px,32vw,460px);
  z-index:20;transition:left .4s,top .4s,bottom .4s,width .4s;}
.sunlike-stage .sl-tp .tslot{position:absolute;bottom:0;left:0;width:100%;
  opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s;pointer-events:none;}
.sunlike-stage .sl-tp .tslot.on{opacity:1;transform:none;}
.sunlike-stage .sl-tp .ts-kicker{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:#F5A623;margin-bottom:9px;display:flex;align-items:center;}
.sunlike-stage .sl-tp .ts-h{font-size:clamp(.95rem,1.5vw,1.3rem);font-weight:400;line-height:1.35;margin-bottom:10px;color:#fff;}
.sunlike-stage .sl-tp .ts-b{font-size:13px;line-height:1.78;color:rgba(255,255,255,.45);font-weight:300;}
.sunlike-stage .sl-tp.s0{left:6vw;top:18vh;bottom:auto;width:clamp(320px,40vw,560px);}
.sunlike-stage .sl-tp.s0 .tslot{top:0;bottom:auto;}
.sunlike-stage .sl-tp.s0 .ts-kicker{font-size:11px;letter-spacing:.24em;margin-bottom:14px;}
.sunlike-stage .sl-tp.s0 .ts-h{font-size:clamp(1.6rem,2.6vw,2.2rem);font-weight:300;line-height:1.28;margin-bottom:18px;letter-spacing:-.01em;}
.sunlike-stage .sl-tp.s0 .ts-b{font-size:14px;line-height:1.86;color:rgba(255,255,255,.55);max-width:520px;}
.sunlike-stage .ztag{display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;border-radius:50%;font-size:10px;font-weight:700;margin-right:5px;}
.sunlike-stage .sl-ko-area{position:absolute;right:5vw;top:18vh;z-index:20;pointer-events:none;}
.sunlike-stage .sl-ko-area .kslot{position:absolute;top:0;right:0;width:clamp(190px,17vw,270px);
  opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s;
  background:#fff;border-radius:6px;padding:11px 14px;}
.sunlike-stage .sl-ko-area .kslot.on{opacity:1;transform:none;}
.sunlike-stage .ko-title{font-size:12px;font-weight:600;color:#111;margin-bottom:4px;}
.sunlike-stage .ko-body{font-size:11px;color:#444;line-height:1.55;}
.sunlike-stage .sl-legend{position:absolute;top:5vh;right:5vw;z-index:21;
  display:flex;flex-direction:column;gap:7px;opacity:0;transition:opacity .5s;}
.sunlike-stage .sl-legend.show{opacity:1;}
.sunlike-stage .sl-leg{display:flex;align-items:center;gap:8px;font-size:11px;color:rgba(255,255,255,.5);}
.sunlike-stage .sl-leg.sun{color:#F5A623;}
.sunlike-stage .sl-leg.std{color:rgba(195,212,235,.65);}
.sunlike-stage .sl-lline{width:22px;height:2px;border-radius:1px;flex-shrink:0;}
.sunlike-stage .sl-lline.g{background:#F5A623;}
.sunlike-stage .sl-lline.n{background:rgba(188,202,220,.65);}
.sunlike-stage .sl-lline.s{background:transparent;border-top:1.5px dashed rgba(188,212,240,.65);}

/* Hover zones — overlay the chart, hidden strips become visible on hover */
.sunlike-stage .sl-hzones{position:absolute;top:0;bottom:88px;left:0;right:0;z-index:25;pointer-events:none;}
.sunlike-stage .sl-hzone{position:absolute;top:0;bottom:0;pointer-events:auto;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:14px;
  border-left:.5px dashed rgba(255,255,255,0);transition:border-color .25s,background .25s;}
.sunlike-stage .sl-hzone:hover,.sunlike-stage .sl-hzone.active{
  background:linear-gradient(to bottom,rgba(245,166,35,0) 0%,rgba(245,166,35,.04) 60%,rgba(245,166,35,.10) 100%);
  border-left-color:rgba(245,166,35,.35);}
.sunlike-stage .sl-hzone-tick{width:1px;height:18px;background:rgba(255,255,255,.18);margin-bottom:6px;
  opacity:0;transition:opacity .25s;}
.sunlike-stage .sl-hzone:hover .sl-hzone-tick,.sunlike-stage .sl-hzone.active .sl-hzone-tick{opacity:1;background:#F5A623;}
.sunlike-stage .sl-hzone-label{font-size:11px;color:rgba(255,255,255,.32);letter-spacing:.05em;
  margin-bottom:2px;transition:color .25s;}
.sunlike-stage .sl-hzone-label em{font-style:normal;font-size:9px;margin-left:2px;opacity:.6;}
.sunlike-stage .sl-hzone-name{font-size:9px;color:rgba(255,255,255,.22);letter-spacing:.16em;
  text-transform:uppercase;transition:color .25s,opacity .25s;opacity:0;}
.sunlike-stage .sl-hzone:hover .sl-hzone-label,.sunlike-stage .sl-hzone.active .sl-hzone-label{color:#F5A623;}
.sunlike-stage .sl-hzone:hover .sl-hzone-name,.sunlike-stage .sl-hzone.active .sl-hzone-name{color:#F5A623;opacity:.8;}
`;

const SUNLIKE_TP_HTML = `
<div class="tslot" id="sl-ts0">
  <p class="ts-kicker">SOLADUO Overview</p>
  <h3 class="ts-h">What is SunLike White?</h3>
  <p class="ts-b">SunLike White of Seoul Semiconductor has a similar spectrum as natural sunlight spectrum. It may give you benefits to reduce eye fatigue and improve focus, learning efficiency and better sleep quality. SunLike may create a comfortable and natural ambiance in your space.</p>
</div>
<div class="tslot" id="sl-ts1">
  <p class="ts-kicker"><span class="ztag" style="background:rgba(160,80,255,.25);color:#c880ff;">D</span>Opsin 5 · 415nm · Myopia Prevention</p>
  <h3 class="ts-h">Violet spectrum for<br>Eye Health</h3>
  <p class="ts-b">SunLike has a violet component at ~415nm (Opsin 5 zone) that activates the OPN5 photoreceptor — effective for preventing myopia in growing children. Standard LED lacks this component.</p>
</div>
<div class="tslot" id="sl-ts2">
  <p class="ts-kicker"><span class="ztag" style="background:rgba(100,130,255,.25);color:#9ab3ff;">A</span>Blue Hazard · 450nm</p>
  <h3 class="ts-h">Standard LED spikes<br>to 100% at 450nm</h3>
  <p class="ts-b">Standard LED reaches maximum intensity (100%) at 450nm — the Blue Hazard wavelength. SunLike intentionally has only 4% here, nearly eliminating this harmful peak while Natural Sunlight has just 14%.</p>
</div>
<div class="tslot" id="sl-ts3">
  <p class="ts-kicker"><span class="ztag" style="background:rgba(50,200,170,.2);color:#32c8b4;">B</span>Melanopic Zone · 480nm</p>
  <h3 class="ts-h">Memory, Learning<br>&amp; Alertness</h3>
  <p class="ts-b">The melanopic 480nm region controls memory, learning, alertness, and sleep quality. Standard LED has only 5% here — a near-zero valley. SunLike fills this region at 22%, 4.4× more — supporting daytime cognitive function.</p>
</div>
<div class="tslot" id="sl-ts4">
  <p class="ts-kicker">True Colors · 470–500nm</p>
  <h3 class="ts-h">Restoring the<br>True Colors</h3>
  <p class="ts-b">Standard LED loses critical wavelengths in the 470-500nm range (near zero after the spike). SunLike restores this missing spectrum — 99 distinct shades with over 95% fidelity (TM-30-20, Rf ≥ 95).</p>
</div>
<div class="tslot" id="sl-ts5">
  <p class="ts-kicker">Broad Peak Rising · 530–570nm</p>
  <h3 class="ts-h">Improve learning<br>capability</h3>
  <p class="ts-b">SunLike rises smoothly from the valley to its broad peak region — mimicking natural sunlight's gradual increase. Increases alertness and learning effect during the daytime. Standard LED took a jagged path to reach the same region.</p>
</div>
<div class="tslot" id="sl-ts6">
  <p class="ts-kicker"><span class="ztag" style="background:rgba(255,120,50,.2);color:#ff8c50;">C</span>Full-fill Red · 620nm</p>
  <h3 class="ts-h">Create a comfortable<br>environment</h3>
  <p class="ts-b">SunLike reaches its peak at 620nm at 80% — the highest of the three curves. Standard LED is at 60%, Natural at 54%. The Full-fill Red zone supports mood and emotional balance for a comfortable living environment.</p>
</div>
<div class="tslot" id="sl-ts7">
  <p class="ts-kicker">CRI-97 · Rf 95+</p>
  <h3 class="ts-h">Accurate color rendition<br>&amp; Certified Safe</h3>
  <p class="ts-b">By tracking natural sunlight across the full visible spectrum, SunLike achieves CRI-97. Effective on eye health for growing children. SunLike declines gracefully after 650nm, unlike Standard LED's jagged history.</p>
</div>
<div class="tslot" id="sl-ts8">
  <p class="ts-kicker">5개국 10개 글로벌 혁신 기술상</p>
  <h3 class="ts-h">Certified Safe<br>Lighting</h3>
  <p class="ts-b">We have won 10 Global Innovation Technology Awards in 5 countries. SunLike establishes a comfortable environment in any space — certified safe and healthy by global authorities.</p>
</div>
`;

const SUNLIKE_KO_HTML = `
<div class="kslot" id="sl-ks0"></div>
<div class="kslot" id="sl-ks1">
  <p class="ko-title">D 영역 — Opsin 5 · 415nm · 근시 예방</p>
  <p class="ko-body">SunLike의 415nm 바이올렛 성분이 OPN5 활성화. 성장기 근시 예방. 일반 LED는 없음.</p>
</div>
<div class="kslot" id="sl-ks2">
  <p class="ko-title">A 영역 — 블루 해저드 · 450nm</p>
  <p class="ko-body">일반 LED: 100%(최대) vs SunLike: 4%(안전). SunLike는 450nm 블루 해저드를 의도적으로 회피.</p>
</div>
<div class="kslot" id="sl-ks3">
  <p class="ko-title">B 영역 — 멜라노픽 · 480nm</p>
  <p class="ko-body">일반 LED: 5%(고갈) vs SunLike: 22%(채움, 4.4배). 기억력·학습·각성에 결정적.</p>
</div>
<div class="kslot" id="sl-ks4">
  <p class="ko-title">470–500nm 복원</p>
  <p class="ko-body">SunLike는 일반 LED가 0%에 가까운 구간을 복원. Rf≥95, 99가지 색상 95% 이상 충실도.</p>
</div>
<div class="kslot" id="sl-ks5">
  <p class="ko-title">학습 능력 향상</p>
  <p class="ko-body">SunLike의 부드러운 상승 곡선이 자연광을 모방. 낮 시간 각성·학습 효과 향상.</p>
</div>
<div class="kslot" id="sl-ks6">
  <p class="ko-title">C 영역 — 풀필 레드 · 기분·편안함</p>
  <p class="ko-body">620nm 피크: SunLike 80% &gt; 일반LED 60% &gt; 자연광 54%. 기분 균형·편안한 환경.</p>
</div>
<div class="kslot" id="sl-ks7">
  <p class="ko-title">정확한 색상 · CRI-97 · 근시 예방</p>
  <p class="ko-body">CRI-97, Rf 95+. 성장기 근시 예방 효과. 650nm 이후 자연스러운 감소.</p>
</div>
<div class="kslot" id="sl-ks8">
  <p class="ko-title">안전한 조명으로 인증</p>
  <p class="ko-body">5개국 10개 글로벌 혁신 기술상 수상. 어떤 공간에서든 편안하고 안전한 조명.</p>
</div>
`;

window.SunLikeStory = SunLikeStory;