[260114]

- 박스 사이즈 조절
 - CSS 코드 정렬

script.js

@@ -1,3 +1,21 @@
+// Focus dot animation
+const dot = document.querySelector('.dot-point');
+
+  function updateDotState() {
+    const isActive =
+      document.visibilityState === 'visible' &&
+      document.hasFocus();
+
+    dot.classList.toggle('is-active', isActive);
+  }
+
+  document.addEventListener('visibilitychange', updateDotState);
+  window.addEventListener('focus', updateDotState);
+  window.addEventListener('blur', updateDotState);
+
+  // 최초 실행
+  updateDotState();
+
 // ping
 async function checkStatus() {
   const cards = document.querySelectorAll(".card");
@@ -81,7 +99,7 @@ window.addEventListener("load", () => {
   setTimeout(startBoltAction, 2000);
 });
 
-// 나사 랜덤 각도 부연
+// 나사 랜덤 각도 부연`
 document.querySelectorAll('.card').forEach((card, cardIndex) => {
   card.querySelectorAll('.card__decor').forEach((decor, decorIndex) => {
 
@@ -140,4 +158,82 @@ window.addEventListener('keydown', (e) => {
 
     console.log(`Current Theme: ${nextTheme}`);
   }
-});
+});
+
+const logo = document.querySelector('header h1');
+// const themes = ['semi-nova', 'nova', 'semi-solaris', 'solaris'];
+// const STORAGE_KEY = 'selected-theme';
+
+let startX = 0;
+let isDragging = false;
+const SWIPE_THRESHOLD = 40; // px
+
+function getCurrentThemeIndex() {
+  return themes.findIndex(t => document.body.classList.contains(t));
+}
+
+function applyTheme(index) {
+  themes.forEach(t => document.body.classList.remove(t));
+  document.body.classList.add(themes[index]);
+  localStorage.setItem(STORAGE_KEY, themes[index]);
+
+const dot = document.querySelector('.dot-point');
+
+if (dot) {
+  dot.classList.remove('blink-alert');
+  void dot.offsetWidth; // 애니메이션 리셋
+  dot.classList.add('blink-alert');
+}
+}
+
+logo.addEventListener('pointerdown', (e) => {
+  startX = e.clientX;
+  isDragging = true;
+  logo.classList.add('is-sliding');
+});
+
+logo.addEventListener('pointerup', (e) => {
+  if (!isDragging) return;
+
+  const deltaX = e.clientX - startX;
+
+  if (Math.abs(deltaX) > SWIPE_THRESHOLD) {
+    let index = getCurrentThemeIndex();
+    if (index === -1) index = 0;
+
+    if (deltaX > 0) {
+      // 👉 오른쪽
+      index = (index + 1) % themes.length;
+    } else {
+      // 👈 왼쪽
+      index = (index - 1 + themes.length) % themes.length;
+    }
+
+    applyTheme(index);
+  }
+
+  reset();
+});
+
+logo.addEventListener('pointerleave', reset);
+logo.addEventListener('pointercancel', reset);
+
+function reset() {
+  isDragging = false;
+  logo.classList.remove('is-sliding');
+}
+// Focus dot animation
+  function updateDotState() {
+    const isActive =
+      document.visibilityState === 'visible' &&
+      document.hasFocus();
+
+    dot.classList.toggle('is-active', isActive);
+  }
+
+  document.addEventListener('visibilitychange', updateDotState);
+  window.addEventListener('focus', updateDotState);
+  window.addEventListener('blur', updateDotState);
+
+  // 최초 실행
+  updateDotState();