https://spsamhwa.com/app/themes/sknk/src/js/main-renewal.js

1
2
3var _rnScrollLockY = 0;
4var _rnPopupOpen = false;
5var _rnOverlayWidthInited = false;
6
7// 3뎁스 유지 판단용 마지막 마우스 위치 (hit-test/mouseleave 의존 제거)
8var lastMouse = { x: 0, y: 0 };
9document.addEventListener('mousemove', function(e) {
10  lastMouse.x = e.clientX;
11  lastMouse.y = e.clientY;
12});
13
14function rnLockBodyScroll() {
15  _rnScrollLockY = window.scrollY;
16  document.body.style.top = '-' + _rnScrollLockY + 'px';
17  document.body.classList.add('rn-scroll-locked');
18}
19function rnUnlockBodyScroll() {
20  document.body.classList.remove('rn-scroll-locked');
21  document.body.style.top = '';
22  window.scrollTo({ top: _rnScrollLockY, behavior: 'instant' });
23}
24
25function rnFullMenuOpen() {
26  if (window.rnSyncPopupButtonPositions) window.rnSyncPopupButtonPositions();
27  rnLockBodyScroll();
28  document.body.classList.add('rn-gnb-open');
29  var det = document.getElementById('rn-gnb-detail');
30  if (det) {
31    det.setAttribute('aria-hidden', 'false');
32    rnInitGnbDetail(det);
33  }
34  var btn = document.getElementById('rnHamburger');
35  if (btn) btn.setAttribute('aria-expanded', 'true');
36}
37function rnFullMenuClose() {
38  document.body.classList.remove('rn-gnb-open');
39  var det = document.getElementById('rn-gnb-detail');
40  if (det) det.setAttribute('aria-hidden', 'true');
41  var btn = document.getElementById('rnHamburger');
42  if (btn) btn.setAttribute('aria-expanded', 'false');
43  rnUnlockBodyScroll();
44}
45
46function rnSearchPopupOpen() {
47  if (window.rnSyncPopupButtonPositions) window.rnSyncPopupButtonPositions();
48  rnLockBodyScroll();
49
50  if (window.innerWidth < 767) {
51    var mobileSearch = document.querySelector('.hd_search.mobile');
52    if (mobileSearch) {
53      mobileSearch.style.display = 'block';
54      mobileSearch.style.position = 'fixed';
55      mobileSearch.style.top = '0';
56      mobileSearch.style.left = '0';
57      mobileSearch.style.width = '100%';
58      mobileSearch.style.height = '100%';
59      mobileSearch.style.background = '#fff';
60      mobileSearch.style.zIndex = '12000';
61      mobileSearch.style.padding = '60px 12px 24px';
62      mobileSearch.style.boxSizing = 'border-box';
63      mobileSearch.style.overflowY = 'auto';
64      return;
65    }
66  }
67  var gnbHistory = document.getElementById('gnb_history');
68  if (gnbHistory) gnbHistory.style.display = 'none';
69  document.body.classList.add('bodyOverflow');
70  document.body.classList.add('gnb-search-open');
71  var el = document.getElementById('gnb_search');
72  if (el) el.style.display = 'block';
73}
74function rnSearchPopupClose() {
75  var mobileSearch = document.querySelector('.hd_search.mobile');
76  if (mobileSearch && mobileSearch.style.display === 'block') {
77    mobileSearch.style.display = '';
78    mobileSearch.style.position = '';
79  }
80  document.body.classList.remove('bodyOverflow');
81  document.body.classList.remove('gnb-search-open');
82  var el = document.getElementById('gnb_search');
83  if (el) el.style.display = 'none';
84  var gnbHistory = document.getElementById('gnb_history');
85  if (gnbHistory) gnbHistory.style.display = 'none';
86  rnUnlockBodyScroll();
87}
88
89function rnInitGnbDetail(det) {
90  if (det._rnInited) return;
91  det._rnInited = true;
92
93  var depth1Items = det.querySelectorAll('.gnb_1_depth');
94  var currentHover = -1;
95
96  depth1Items.forEach(function(item, idx) {
97    var strong = item.querySelector(':scope > a > strong');
98    if (!strong) return;
99
100    strong.addEventListener('mouseenter', function() {
101      currentHover = idx;
102
103      var bg = det.querySelector('.gnb_detail_bg');
104      if (bg) {
105        bg.className = 'gnb_detail_bg bg_' + (idx + 1);
106      }
107      depth1Items.forEach(function(it, i) {
108        if (i === idx) {
109          it.classList.add('hover');
110          it.style.opacity = '1';
111          var wrap = it.querySelector('.gnb_2_depth_wrap');
112          if (wrap) wrap.classList.add('hover');
113
114          var depth2Links = it.querySelectorAll('.gnb_2_depth > a');
115          depth2Links.forEach(function(a, ai) {
116            a.style.transition = 'opacity 0.3s ease ' + (ai * 0.05) + 's, left 0.3s ease ' + (ai * 0.05) + 's';
117            a.style.opacity = '1';
118            a.style.left = '0';
119          });
120        } else {
121          it.classList.remove('hover');
122          it.style.opacity = '0.3';

123          var wrap = it.querySelector('.gnb_2_depth_wrap');
124          if (wrap) wrap.classList.remove('hover');
125          var depth2Links = it.querySelectorAll('.gnb_2_depth > a');
126          depth2Links.forEach(function(a) {
127            a.style.opacity = '0';
128            a.style.left = '50px';
129          });
130        }
131      });
132    });
133  });
134
135  // 3뎁스 메뉴: 2뎁스 항목 호버 시 해당 3뎁스 표시 (기존 헤더 동작과 동일)
136  function rnShowThreeDepth(three) {
137    if (!three) return;
138    three.classList.add('hover');
139    three.querySelectorAll(':scope > li > a').forEach(function(a, ai) {
140      a.style.transition = 'opacity 0.3s ease ' + (ai * 0.05) + 's, left 0.3s ease ' + (ai * 0.05) + 's';
141      a.style.opacity = '1';
142      a.style.left = '0';
143    });
144  }
145  function rnHideThreeDepth(three) {
146    if (!three) return;
147    three.classList.remove('hover');
148    three.querySelectorAll(':scope > li > a').forEach(function(a) {
149      a.style.opacity = '0';
150      a.style.left = '30px';
151    });
152  }
153  det.querySelectorAll('.gnb_2_depth').forEach(function(li) {
154    var three = li.querySelector('.gnb_3_depth');
155    if (!three) return;
156    var link = li.querySelector(':scope > a');
157    var hideTimer = null;
158
159    // 마우스가 2뎁스 항목 또는 3뎁스 영역(완충 포함) 안에 있는지 기하학적으로 판단
160    function hideIfOutside() {
161      var liR = li.getBoundingClientRect();
162      var trR = three.getBoundingClientRect();
163      var pad = 16;
164      var inX = lastMouse.x >= Math.min(liR.left, trR.left) - pad && lastMouse.x <= Math.max(liR.right, trR.right) + pad;
165      var inY = lastMouse.y >= Math.min(liR.top, trR.top) - pad && lastMouse.y <= Math.max(liR.bottom, trR.bottom) + pad;
166      if (!inX || !inY) rnHideThreeDepth(three);
167    }
168    function scheduleHide() {
169      if (hideTimer) clearTimeout(hideTimer);
170      hideTimer = setTimeout(function() { hideIfOutside(); hideTimer = null; }, 250);
171    }
172    function keepOpen() {
173      if (hideTimer) { clearTimeout(hideTimer); hideTimer = null; }
174    }
175
176    // 2뎁스 링크(li > a)에 진입할 때만 3뎁스 표시 — 겹친 영역에서 다른 항목이 활성화되지 않음
177    if (link) {
178      link.addEventListener('mouseenter', function() {
179        keepOpen();
180        det.querySelectorAll('.gnb_3_depth').forEach(function(t) {
181          if (t !== three) rnHideThreeDepth(t);
182        });
183        rnShowThreeDepth(three);
184      });
185      link.addEventListener('mouseleave', scheduleHide);
186    }
187    // 3뎁스 진입 시 유지 / 이탈 시 지연 숨김 (영역 체크로 갭에서도 닫히지 않음)
188    three.addEventListener('mouseenter', keepOpen);
189    three.addEventListener('mouseleave', scheduleHide);
190  });
191
192  det.querySelector('.gnb_detail_wrap').addEventListener('mouseleave', function() {
193    currentHover = -1;
194    depth1Items.forEach(function(it) {
195      it.classList.remove('hover');
196      it.style.opacity = '1';
197      var wrap = it.querySelector('.gnb_2_depth_wrap');
198      if (wrap) wrap.classList.remove('hover');
199      var bg = det.querySelector('.gnb_detail_bg');
200      if (bg) bg.className = 'gnb_detail_bg';
201    });
202    det.querySelectorAll('.gnb_3_depth').forEach(rnHideThreeDepth);
203  });
204
205
206  document.addEventListener('keydown', function rnGnbEsc(e) {
207    if (e.key === 'Escape' && document.body.classList.contains('rn-gnb-open')) {
208      rnFullMenuClose();
209    }
210  });
211}
212
213if (document.readyState === 'loading') {
214  document.addEventListener('DOMContentLoaded', rnInit);
215} else {
216  rnInit();
217}
218if (typeof $ !== 'undefined') {
219  $(document).on('pjax:end', rnInit);
220}
221
222function rnInit() {
223
224  document.querySelectorAll('.rn-mobile-nav-dim').forEach(function(el) { el.remove(); });
225
226  var header = document.getElementById('rn-header');
227  if (header && header._rnInited) return;
228  if (header) {
229    header._rnInited = true;
230    var lastScrollY = 0;
231    var ticking = false;
232
233
234    window.addEventListener('scroll', function() {
235      if (!ticking) {
236        requestAnimationFrame(function() {
237          var currentY = window.scrollY;
238          if (currentY <= 10) {
239            header.classList.remove('is-hidden', 'is-scrolled');
240            document.body.classList.remove('header-is-hidden');
241          } else if (currentY > lastScrollY + 8) {
242            header.classList.add('is-hidden');
243            document.body.classList.add('header-is-hidden');
244          } else if (currentY < lastScrollY - 8) {
245            header.classList.remove('is-hidden');
246            header.classList.add('is-scrolled');
247            document.body.classList.remove('header-is-hidden');
248          }
249          lastScrollY = currentY;
250          ticking = false;

251        });
252        ticking = true;
253      }
254    }, { passive: true });
255
256
257    header.querySelectorAll('.rn-header__menu-link').forEach(function(link) {
258      var span = link.querySelector('span');
259      if (span) {
260        link.style.setProperty('--underline-w', span.offsetWidth + 'px');
261      }
262    });
263
264
265    function alignSubMenu() {
266      var firstLink = header.querySelector('.rn-header__menu-link');
267      var menuLeft = 370;
268
269      if (firstLink) {
270        var rect = firstLink.getBoundingClientRect();
271
272        if (rect.width > 0 && rect.left > 0) {
273          menuLeft = Math.round(rect.left);
274        }
275      }
276
277
278      header.querySelectorAll('.rn-header__sub').forEach(function(sub) {
279        sub.style.paddingLeft = menuLeft + 'px';
280      });
281
282
283      var searchStage = document.getElementById('mrHeroStageSearch');
284      if (searchStage) {
285        searchStage.style.left = menuLeft + 'px';
286      }
287    }
288    alignSubMenu();
289    window.addEventListener('resize', alignSubMenu);
290
291
292
293    document.addEventListener('click', function(e) {
294      if (e.target.closest('.search_close')) {
295
296        setTimeout(rnUnlockBodyScroll, 50);
297      }
298    });
299
300
301    var menuItems = header.querySelectorAll('.rn-header__menu-item');
302    menuItems.forEach(function(item) {
303      item.addEventListener('mouseenter', function() {
304        if (item.querySelector('.rn-header__sub')) {
305          header.classList.add('has-sub');
306        }
307      });
308      item.addEventListener('mouseleave', function() {
309        header.classList.remove('has-sub');
310      });
311    });
312
313
314
315
316    var hamburger    = document.getElementById('rnHamburger');
317    var mobileNav    = document.getElementById('rnMobileNav');
318    var mobileClose  = document.getElementById('rnMobileNavClose');
319
320
321    function openMobileNav() {
322      mobileNav.classList.add('is-open');
323      mobileNav.setAttribute('aria-hidden', 'false');
324      document.body.style.overflow = 'hidden';
325      if (hamburger) hamburger.setAttribute('aria-expanded', 'true');
326
327      var allItems = mobileNav.querySelectorAll('.rn-mobile-nav__item');
328      allItems.forEach(function(it) { it.classList.remove('is-open'); });
329
330      var currentItem = mobileNav.querySelector('.rn-mobile-nav__item.is-current');
331      if (currentItem && currentItem.querySelector('.rn-mobile-nav__sub')) {
332        currentItem.classList.add('is-open');
333      }
334    }
335
336    function closeMobileNav() {
337      mobileNav.classList.remove('is-open');
338      mobileNav.setAttribute('aria-hidden', 'true');
339      document.body.style.overflow = '';
340      document.body.style.position = '';
341      document.body.style.top = '';
342      document.body.style.width = '';
343      document.body.classList.remove('rn-scroll-locked');
344      if (hamburger) hamburger.setAttribute('aria-expanded', 'false');
345    }
346
347    if (hamburger)   hamburger.addEventListener('click', function() {
348      if (window.innerWidth < 767) {
349        openMobileNav();
350      } else {
351        rnFullMenuOpen();
352      }
353    });
354    if (mobileClose) mobileClose.addEventListener('click', closeMobileNav);
355
356
357
358
359    var toggleBtns = document.querySelectorAll('.rn-mobile-nav__toggle[data-toggle="mobile-sub"]');
360    toggleBtns.forEach(function(btn) {
361      btn.addEventListener('click', function() {
362        var item = btn.closest('.rn-mobile-nav__item');
363        var isOpen = item.classList.contains('is-open');
364
365
366        document.querySelectorAll('.rn-mobile-nav__item.is-open').forEach(function(openItem) {
367          openItem.classList.remove('is-open');
368        });
369
370
371        if (!isOpen) {
372          item.classList.add('is-open');
373        }
374      });
375    });
376
377
378
379
380    var mobileLangBtn = mobileNav ? mobileNav.querySelector('.rn-mobile-nav__lang-btn') : null;
381    if (mobileLangBtn) {
382      mobileLangBtn.addEventListener('click', function(e) {
383        e.stopPropagation();
384        var langWrap = mobileLangBtn.closest('.rn-mobile-nav__lang');
385        langWrap.classList.toggle('is-open');
386        mobileLangBtn.setAttribute('aria-expanded', langWrap.classList.contains('is-open'));
387      });
388
389      document.addEventListener('click', function() {
390        var langWrap = mobileNav ? mobileNav.querySelector('.rn-mobile-nav__lang') : null;
391        if (langWrap) langWrap.classList.remove('is-open');
392      });
393    }
394
395
396
397
398    var relationSvc = document.querySelector('#mo_footer .relation_svc') || document.querySelector('.relation_svc');
399    if (relationSvc) {
400      relationSvc.addEventListener('click', function(e) {
401        e.preventDefault();
402        e.stopPropagation();
403        relationSvc.classList.toggle('is-open');
404      });
405    }
406
407
408
409
410    var langEl = header.querySelector('.rn-header__lang');
411    var langBtn = header.querySelector('.rn-header__lang-btn');
412    var langList = header.querySelector('.rn-header__lang-list');
413    if (langEl && langBtn && langList) {
414
415      function positionLangList() {
416        var rect = langBtn.getBoundingClientRect();
417        var listW = langList.offsetWidth || 80;
418
419        var btnCenterX = rect.left + rect.width / 2;
420        var listLeft = btnCenterX - listW / 2;
421
422        listLeft = Math.max(0, Math.min(listLeft, window.innerWidth - listW));
423        langList.style.top  = (rect.bottom + 8) + 'px';
424        langList.style.left = listLeft + 'px';
425        langList.style.right = 'auto';
426      }
427      langBtn.addEventListener('click', function(e) {
428        e.stopPropagation();
429        var willOpen = !langEl.classList.contains('is-open');
430        langEl.classList.toggle('is-open');
431        langBtn.setAttribute('aria-expanded', langEl.classList.contains('is-open'));
432        if (willOpen) positionLangList();
433      });
434
435      document.addEventListener('click', function(e) {
436        if (!langEl.contains(e.target)) {
437          langEl.classList.remove('is-open');
438          langBtn.setAttribute('aria-expanded', 'false');
439        }
440      });
441    }
442  }
443
444
445
446
447  const heroSliderEl = document.getElementById('mrHeroSlider');
448  if (heroSliderEl && typeof Swiper !== 'undefined') {
449    new Swiper('#mrHeroSlider', {
450      loop: false,
451      rewind: true,
452      autoplay: {
453        delay: 5000,
454        disableOnInteraction: false,
455      },
456      effect: 'fade',
457      fadeEffect: { crossFade: true },
458      pagination: {
459        el: '#mrHeroPagination .swiper-pagination',
460        clickable: true,
461      },

462      speed: 800,
463      on: {
464        slideChange: function(swiper) {
465          syncHeroContentItem(swiper);
466        },
467      },
468    });
469  }
470
471
472  function syncHeroContentItem(swiper) {
473    var idx = swiper.activeIndex;
474    var items = document.querySelectorAll('.hero__content-item');
475    items.forEach(function(item, i) {
476      item.classList.toggle('is-active', i === idx);
477    });
478  }
479
480
481
482
483  const heroSliderMoEl = document.getElementById('mrHeroSliderMo');
484  if (heroSliderMoEl && typeof Swiper !== 'undefined') {
485    new Swiper('#mrHeroSliderMo', {
486      loop: false,
487      rewind: true,
488      autoplay: {
489        delay: 5000,
490        disableOnInteraction: false,
491      },
492      effect: 'fade',
493      fadeEffect: { crossFade: true },
494      pagination: {
495        el: '#mrHeroSliderMo .swiper-pagination',
496        clickable: true,
497      },
498      speed: 800,
499    });
500  }
501
502
503  function syncHeroBgImages(sliderEl) {
504    var origSlides = Array.from(
505      sliderEl.querySelectorAll('.swiper-slide:not(.swiper-slide-duplicate)')
506    );
507    var dupSlides = sliderEl.querySelectorAll('.swiper-slide-duplicate');
508
509    dupSlides.forEach(function(dup) {
510      var idx = parseInt(dup.getAttribute('data-swiper-slide-index'), 10);
511      if (isNaN(idx)) return;
512      var orig = origSlides.find(function(s) {
513        return parseInt(s.getAttribute('data-swiper-slide-index'), 10) === idx;
514      });
515
516      if (!orig) orig = origSlides[idx];
517      if (orig && orig.style.backgroundImage) {
518        dup.style.backgroundImage = orig.style.backgroundImage;
519      }
520    });
521  }
522
523
524
525
526  const bizSliderEl = document.getElementById('mrBusinessSlider');
527  if (bizSliderEl && typeof Swiper !== 'undefined') {
528    new Swiper('#mrBusinessSlider', {
529      loop: false,
530      slidesPerView: 1,
531      spaceBetween: 20,   /* 슬라이드 사이 간격 — business__grid의 카드 gap(24px)과 유사한 값 */
532      pagination: {
533        el: '.business__pagination',
534        clickable: true,
535      },
536      navigation: {
537        prevEl: '.business__prev',
538        nextEl: '.business__next',
539      },
540      speed: 600,
541      on: {
542        slideChange: function() {
543
544        }
545      }
546    });
547  }
548
549
550
551
552  const bizSliderMoEl = document.getElementById('mrBusinessSliderMo');
553  if (bizSliderMoEl && typeof Swiper !== 'undefined') {
554    new Swiper('#mrBusinessSliderMo', {
555      loop: false,
556      slidesPerView: 1,
557      spaceBetween: 0,
558      pagination: {
559        el: '.business__pagination--mobile',
560        clickable: true,
561      },
562      speed: 600,
563    });
564  }
565
566
567
568
569
570
571
572
573  // ── 스크롤 등장 모션 ─────────────────────────────────────────────────────
574  // 같은 부모 안에서 형제 순서(nth)를 data-attribute로 기록 → CSS stagger delay
575  function rnInitScrollMotion() {
576    // 그룹 단위로 stagger를 주는 컨테이너들
577    var staggerGroups = [
578      '.renewal-page .mission__cards',
579      '.renewal-page .business__grid',
580      '.renewal-page .hot-issue__grid',
581      '.renewal-page .newsletter__cards',
582      '.renewal-page .faq__list',
583      '.renewal-page .news-ir__list',  /* IR 섹션 뉴스 아이템 stagger */
584    ];
585    staggerGroups.forEach(function(selector) {
586      document.querySelectorAll(selector).forEach(function(group) {
587        var children = group.children;
588        for (var i = 0; i < children.length; i++) {
589          children[i].setAttribute('data-stagger', i);
590        }
591      });
592    });
593
594    var animatedElements = document.querySelectorAll(
595      '.renewal-page .section-title, ' +
596      '.renewal-page .mission__label, ' +
597      '.renewal-page .mission__card, ' +
598      '.renewal-page .business__item, ' +
599      '.renewal-page .hot-issue__card, ' +
600      '.renewal-page .faq__item, ' +
601      '.renewal-page .newsletter__card, ' +
602      '.renewal-page .newsletter__header-content, ' +
603      '.renewal-page .color__content, ' +
604      '.renewal-page .vision__label, ' +
605      '.renewal-page .vision__title, ' +
606      '.renewal-page .news-ir__ir-content, ' + /* IR 블록 */
607      '.renewal-page .news-ir__list li'         /* 뉴스 아이템 */
608    );
609
610    if ('IntersectionObserver' in window && animatedElements.length > 0) {
611      var observer = new IntersectionObserver(function(entries) {

612        entries.forEach(function(entry) {
613          if (entry.isIntersecting) {
614            var el = entry.target;
615            var stagger = el.getAttribute('data-stagger');
616            if (stagger !== null) {
617              el.style.transitionDelay = (parseInt(stagger, 10) * 120) + 'ms';
618            }
619            el.classList.add('animate-in');
620            observer.unobserve(el);
621          }
622        });
623      }, {
624        threshold: 0.12,
625        rootMargin: '0px 0px -48px 0px'
626      });
627
628      animatedElements.forEach(function(el) {
629        el.classList.add('animate-ready');
630        observer.observe(el);
631      });
632    }
633  }
634  rnInitScrollMotion();
635
636
637
638
639
640  document.querySelectorAll('.color__swatch').forEach(function(swatch) {
641    swatch.style.cursor = 'pointer';
642    swatch.addEventListener('click', function(e) {
643      // 복사/전체화면 버튼 클릭 시에는 무시
644      if (e.target.closest('.color__swatch-copy') || e.target.closest('.color__swatch-fullscreen')) return;
645
646      var iTag = swatch.querySelector('i');
647      var code = iTag ? iTag.textContent.trim() : (swatch.getAttribute('data-colorcodename') || '');
648      if (!code) return;
649
650      var copyFn = function() {
651
652        swatch.classList.add('swatch-copied');
653        setTimeout(function() { swatch.classList.remove('swatch-copied'); }, 1200);
654      };
655
656      if (navigator.clipboard) {
657        navigator.clipboard.writeText(code).then(copyFn).catch(function() {
658          var ta = document.createElement('textarea');
659          ta.value = code; ta.style.position = 'fixed'; ta.style.opacity = '0';
660          document.body.appendChild(ta); ta.select();
661          document.execCommand('copy');
662          document.body.removeChild(ta);
663          copyFn();
664        });
665      } else {
666        var ta = document.createElement('textarea');
667        ta.value = code; ta.style.position = 'fixed'; ta.style.opacity = '0';
668        document.body.appendChild(ta); ta.select();
669        document.execCommand('copy');
670        document.body.removeChild(ta);
671        copyFn();
672      }
673    });
674  });
675
676
677
678
679
680
681
682
683
684
685  var heroEl       = document.querySelector('.renewal-page.pc .hero');
686  var stageContent = document.getElementById('mrHeroStageContent');
687  var stageSearch  = document.getElementById('mrHeroStageSearch');
688
689  if (heroEl && stageContent && stageSearch && window.innerWidth >= 767) {
690
691    var heroStage = 0;
692    var isLocked  = false;
693    var LOCK_MS   = 400;
694
695    function lock() {
696      isLocked = true;
697      setTimeout(function() { isLocked = false; }, LOCK_MS);
698    }
699
700
701    stageContent.classList.add('is-active');
702    attachSnap();
703
704
705    function toSearch() {
706      heroEl.classList.add('search-active');
707      stageSearch.setAttribute('aria-hidden', 'false');
708      heroStage = 1;
709      lock();
710    }
711
712    function toContent() {
713      heroEl.classList.remove('search-active');
714      stageSearch.setAttribute('aria-hidden', 'true');
715      heroStage = 0;
716      lock();
717    }
718
719    function toDone() {
720      heroStage = 2;
721
722
723
724      detachSnap();
725      lock();
726
727
728      window.addEventListener('scroll', onDoneScroll, { passive: true });
729    }
730
731
732    function onDoneScroll() {
733
734      if (window.scrollY < 5 && !isLocked && !_rnPopupOpen) {
735        window.removeEventListener('scroll', onDoneScroll);
736        // search-active 상태를 확실히 복원
737        heroEl.classList.add('search-active');
738        stageSearch.setAttribute('aria-hidden', 'false');
739        heroStage = 1;
740        attachSnap();
741      }
742    }
743
744
745
746
747    function onWheel(e) {
748      if (_rnPopupOpen) return;
749      e.preventDefault();
750      if (isLocked) return;
751      var delta = e.deltaY || e.detail || -(e.wheelDelta);
752      if (delta > 0) {
753        if      (heroStage === 0) toSearch();
754        else if (heroStage === 1) toDone();
755      } else {
756        if (heroStage === 1) toContent();
757      }
758    }
759
760
761    var ty0 = 0;
762    function onTouchStart(e) {
763      ty0 = e.touches[0].clientY;
764    }
765    function onTouchMove(e) {
766      if (document.querySelector('.rn-mobile-nav.is-open') || document.querySelector('.hd_search.mobile[style*="display: block"]')) return;
767      e.preventDefault();
768    }
769    function onTouchEnd(e) {
770      if (isLocked) return;
771      var dy = ty0 - e.changedTouches[0].clientY;
772      if (Math.abs(dy) < 40) return;
773      if (dy > 0) {
774        if      (heroStage === 0) toSearch();
775        else if (heroStage === 1) toDone();
776      } else {
777        if (heroStage === 1) toContent();
778      }
779    }
780
781
782    function onKeyDown(e) {
783      var DOWN = [32, 34, 40];
784      var UP   = [33, 38];
785      if (DOWN.indexOf(e.keyCode) !== -1 || UP.indexOf(e.keyCode) !== -1) {
786        e.preventDefault();
787        if (isLocked) return;
788        if (DOWN.indexOf(e.keyCode) !== -1) {
789          if      (heroStage === 0) toSearch();
790          else if (heroStage === 1) toDone();
791        } else {
792          if (heroStage === 1) toContent();
793        }
794      }
795    }
796
797
798    function attachSnap() {
799
800      window.addEventListener('wheel',      onWheel,     { passive: false, capture: true });
801      window.addEventListener('touchstart', onTouchStart,{ passive: true });
802      window.addEventListener('touchmove',  onTouchMove, { passive: false });
803      window.addEventListener('touchend',   onTouchEnd,  { passive: true });
804      window.addEventListener('keydown',    onKeyDown,   false);
805
806      if (window.scrollY !== 0) window.scrollTo(0, 0);
807    }
808    function detachSnap() {
809      window.removeEventListener('wheel',      onWheel,     { capture: true });
810      window.removeEventListener('touchstart', onTouchStart);
811      window.removeEventListener('touchmove',  onTouchMove);
812      window.removeEventListener('touchend',   onTouchEnd);
813      window.removeEventListener('keydown',    onKeyDown);
814    }
815
816
817    var searchInput = document.getElementById('mrHeroSearchInput');
818    if (searchInput) {
819      searchInput.addEventListener('keydown', function(e) {
820        if (e.key === 'Enter') {
821          var q = searchInput.value.trim();
822          if (q) window.location.href = '/?s=' + encodeURIComponent(q);
823          e.stopPropagation();
824        }
825      });
826    }
827
828
829
830
831
832  } else {
833

834    var heroMo      = document.querySelector('.renewal-page.mobile .hero--mobile');
835    var stageSearchMo = document.getElementById('mrHeroStageSearchMo');
836
837    if (heroMo && stageSearchMo) {
838      var moStage   = 0;
839      var moLocked  = false;
840      var MO_LOCK_MS = 400;
841
842      function moLock() {
843        moLocked = true;
844        setTimeout(function() { moLocked = false; }, MO_LOCK_MS);
845      }
846
847      function moToSearch() {
848        heroMo.classList.add('search-active');
849        stageSearchMo.setAttribute('aria-hidden', 'false');
850        moStage = 1;
851        moLock();
852      }
853
854      function moToContent() {
855        heroMo.classList.remove('search-active');
856        stageSearchMo.setAttribute('aria-hidden', 'true');
857        moStage = 0;
858        moLock();
859      }
860
861      function moToDone() {
862        moStage = 2;
863        moDetachSnap();
864        moLock();
865        window.addEventListener('scroll', moOnDoneScroll, { passive: true });
866      }
867
868      function moOnDoneScroll() {
869        if (window.innerWidth >= 767) return;
870        if (window.scrollY < 5 && !moLocked && !_rnPopupOpen) {
871          window.removeEventListener('scroll', moOnDoneScroll);
872          heroMo.classList.add('search-active');
873          stageSearchMo.setAttribute('aria-hidden', 'false');
874          moStage = 1;
875          moAttachSnap();
876        }
877      }
878
879
880      var moTy0 = 0;
881      function moOnTouchStart(e) {
882        moTy0 = e.touches[0].clientY;
883      }
884      function moOnTouchMove(e) {
885        if (_rnPopupOpen) return;
886        if (window.innerWidth >= 767) return;
887        if (document.querySelector('.rn-mobile-nav.is-open') || document.querySelector('.hd_search.mobile[style*="display: block"]')) return;
888        // 불릿(pagination) 터치 시 Swiper 동작을 위해 스킵
889        if (e.target.closest('.swiper-pagination, .swiper-pagination-bullet')) return;
890        e.preventDefault();
891      }
892      function moOnTouchEnd(e) {
893        if (moLocked || _rnPopupOpen) return;
894        if (window.innerWidth >= 767) return;
895        var dy = moTy0 - e.changedTouches[0].clientY;
896        if (Math.abs(dy) < 40) return;
897        if (dy > 0) {
898          if      (moStage === 0) moToSearch();
899          else if (moStage === 1) moToDone();
900        } else {
901          if (moStage === 1) moToContent();
902        }
903      }
904
905
906      function moOnWheel(e) {
907        if (_rnPopupOpen) return;
908        if (window.innerWidth >= 767) return;
909        e.preventDefault();
910        if (moLocked) return;
911        var delta = e.deltaY || e.detail || -(e.wheelDelta);
912        if (delta > 0) {
913          if      (moStage === 0) moToSearch();
914          else if (moStage === 1) moToDone();
915        } else {
916          if (moStage === 1) moToContent();
917        }
918      }
919
920      function moAttachSnap() {
921        window.addEventListener('wheel',      moOnWheel,      { passive: false, capture: true });
922        window.addEventListener('touchstart', moOnTouchStart, { passive: true });
923        window.addEventListener('touchmove',  moOnTouchMove,  { passive: false });
924        window.addEventListener('touchend',   moOnTouchEnd,   { passive: true });
925        if (window.innerWidth < 767 && window.scrollY !== 0) window.scrollTo(0, 0);
926      }
927      function moDetachSnap() {
928        window.removeEventListener('wheel',      moOnWheel,      { capture: true });
929        window.removeEventListener('touchstart', moOnTouchStart);
930        window.removeEventListener('touchmove',  moOnTouchMove);
931        window.removeEventListener('touchend',   moOnTouchEnd);
932      }
933
934
935      var searchInputMo = document.getElementById('mrHeroSearchInputMo');
936      if (searchInputMo) {
937        searchInputMo.addEventListener('keydown', function(e) {
938          if (e.key === 'Enter') {
939            var q = searchInputMo.value.trim();
940            if (q) window.location.href = '/?s=' + encodeURIComponent(q);
941            e.stopPropagation();
942          }
943        });
944      }
945
946      moAttachSnap();
947    } else {
948      if (stageContent) stageContent.classList.add('is-active');
949    }
950  }
951
952
953
954
955  window.goNewsPage = function(url) {
956    if (url) window.location.href = url;
957  };
958
959  // ── 팝업 헤더 버튼 위치 동기화 + 오버레이 width 계산 ──────────────────────
960  function rnSyncPopupButtonPositions() {
961    var searchBtn  = document.querySelector('.rn-header__search-btn');
962    var hamburger  = document.getElementById('rnHamburger');
963    var museum     = document.querySelector('.rn-header__museum');
964    var root       = document.documentElement;
965
966    if (searchBtn) {
967      var sr = searchBtn.getBoundingClientRect();
968      root.style.setProperty('--popup-close-top',           (sr.top + sr.height / 2 - 12) + 'px');
969      root.style.setProperty('--popup-search-close-left',   sr.left + 'px');
970      root.style.setProperty('--popup-search-close-right',  'auto');
971    }
972    if (hamburger) {
973      var hr = hamburger.getBoundingClientRect();
974      root.style.setProperty('--popup-hamburger-close-left',  hr.left + 'px');
975      root.style.setProperty('--popup-hamburger-close-right', 'auto');
976      // 오버레이 shape width: 햄버거 우측 ~ 뷰포트 끝
977      // --rn-overlay-width는 첫 페인트 전 인라인 스크립트가 이미 설정하므로
978      // 초기 호출에서 덮어쓰지 않는다. (폰트 로드에 따른 레이아웃 이동이 재측정돼
979      // 로드 중 크기가 1회 튀는 현상 방지 — resize/팝업 오픈 시에만 재계산)
980      if (_rnOverlayWidthInited || !root.style.getPropertyValue('--rn-overlay-width')) {
981        root.style.setProperty('--rn-overlay-width', (window.innerWidth - hr.right) + 'px');
982        var rnShape = document.querySelector('.rn-header__orange-shape');
983        if (rnShape) rnShape.classList.add('is-measured');
984      }
985    }
986    if (museum) {
987      var mr = museum.getBoundingClientRect();
988      root.style.setProperty('--popup-museum-top',   (mr.top + mr.he

988ight / 2 - 16) + 'px');
989      // 뷰포트 안에 실제로 보이는 너비만 사용 (overflow로 잘린 부분 제외)
990      var visibleWidth = Math.min(mr.right, window.innerWidth) - mr.left;
991      root.style.setProperty('--popup-museum-width', Math.max(visibleWidth, 0) + 'px');
992    }
993  }
994  rnSyncPopupButtonPositions();
995  _rnOverlayWidthInited = true;
996  window.addEventListener('resize', rnSyncPopupButtonPositions);
997  // 전역으로 노출하여 팝업 open 함수에서 즉시 호출 가능하게
998  window.rnSyncPopupButtonPositions = rnSyncPopupButtonPositions;
999
1000}
1001
1002// Hot Issue 클릭 시 조회수 카운트 (외부 링크라 PHP 수집 불가하므로 AJAX 처리)
1003// rnInit() 밖에 배치: rnInit()는 _rnInited 플래그로 중복 실행을 차단하므로
1004// 스크립트가 두 번 로드되어도 querySelectorAll로 매번 새로 바인딩한다.
1005(function() {
1006  document.querySelectorAll('[data-hot-issue-id]').forEach(function(el) {
1007    if (el._hotIssueBound) return;
1008    el._hotIssueBound = true;
1009    el.addEventListener('click', function() {
1010      var postId = this.getAttribute('data-hot-issue-id');
1011      if (!postId || !window.commonSknk) return;
1012      var fd = new FormData();
1013      fd.append('action', 'hot_issue_count_view');
1014      fd.append('post_id', postId);
1015      navigator.sendBeacon(commonSknk.ajax_url, fd);
1016    });
1017  });
1018})();
1019
1020// 컨텐츠 상단으로 이동 버튼
1021(function() {
1022  var btn = document.getElementById('btnTop');
1023  if (!btn) return;
1024
1025  window.addEventListener('scroll', function() {
1026    if (window.scrollY > 300) {
1027      btn.classList.add('is-visible');
1028    } else {
1029      btn.classList.remove('is-visible');
1030    }
1031  }, { passive: true });
1032
1033  btn.addEventListener('click', function(e) {
1034    e.preventDefault();
1035    window.scrollTo({ top: 0, behavior: 'smooth' });
1036  });
1037})();
1038
1039// 컬러 스와치: 복사 & 전체화면
1040(function() {
1041  // 컬러코드 복사
1042  document.addEventListener('click', function(e) {
1043    var btn = e.target.closest('.color__swatch-copy');
1044    if (!btn) return;
1045    e.preventDefault();
1046    e.stopImmediatePropagation();
1047    var swatch = btn.closest('.color__swatch');
1048    var code = swatch && swatch.getAttribute('data-colorcodename');
1049    if (!code) return;
1050    if (navigator.clipboard) {
1051      navigator.clipboard.writeText(code);
1052    } else {
1053      var t = document.createElement('textarea');
1054      document.body.appendChild(t);
1055      t.value = code;
1056      t.select();
1057      document.execCommand('copy');
1058      document.body.removeChild(t);
1059    }
1060    alert('컬러코드가 복사되었습니다.');
1061  }, true);
1062
1063  // 전체화면으로 보기
1064  document.addEventListener('click', function(e) {
1065    var btn = e.target.closest('.color__swatch-fullscreen');
1066    if (!btn) return;
1067    e.preventDefault();
1068    e.stopImmediatePropagation();
1069    var swatch = btn.closest('.color__swatch');
1070    if (!swatch) return;
1071    var colorHex = swatch.getAttribute('data-colorcode');
1072    var colorName = swatch.querySelector('strong') ? swatch.querySelector('strong').textContent : '';
1073    var colorCode = swatch.getAttribute('data-colorcodename') || '';
1074
1075    var popup = document.getElementById('color_full_screen');
1076    if (popup) {
1077      // 통합검색이 열려있으면 닫기
1078      var gnbSearch = document.getElementById('gnb_search');
1079      if (gnbSearch) gnbSearch.style.display = 'none';
1080
1081      // 스크롤 위치 저장 후 잠금
1082      _rnPopupOpen = true;
1083      var savedScrollY = window.scrollY;
1084      document.body.classList.add('color-fullscreen-open');
1085      document.body.classList.add('bodyOverflow');
1086      document.body.style.top = '-' + savedScrollY + 'px';
1087      popup.style.display = 'block';
1088      popup.style.opacity = '1';
1089      popup.style.visibility = 'visible';
1090      var screen = popup.querySelector('.color_screen');
1091      if (screen) screen.style.background = colorHex;
1092      var nameEl = popup.querySelector('.color_info strong');
1093      if (nameEl) nameEl.textContent = colorName;
1094      var codeEl = popup.querySelector('.color_info em');
1095      if (codeEl) codeEl.textContent = colorCode;
1096      var copyBtn = popup.querySelector('[data-share-btn="copy"]');
1097      if (copyBtn) copyBtn.setAttribute('data-clipboard-text', colorCode);
1098
1099      // 팝업 닫기 버튼 바인딩
1100      var closeBtn = popup.querySelector('.pop_close');
1101      if (closeBtn) {
1102        closeBtn.onclick = function() {
1103          popup.style.display = 'none';
1104          popup.style.opacity = '0';
1105          popup.style.visibility = 'hidden';
1106          document.body.classList.remove('bodyOverflow');
1107          document.body.classList.remove('color-fullscreen-open');
1108          document.body.style.top = '';
1109          window.scrollTo({ top: savedScrollY, behavior: 'instant' });
1110          _rnPopupOpen = false;

1111        };
1112      }
1113    }
1114  }, true);
1115
1116})();