/* =========================================================
   My Dashboard - style.css (Final Fixed Version)
   ========================================================= */

/* Fonts */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap");

/* Reset */
* { box-sizing: border-box; margin: 0; padding: 0; }

/* style.css - body 부분 원상복구 */

body {
  background-color: #13141f; /* 원래의 깔끔한 다크 네이비 */
  color: #a9b1d6;
  font-family: "Pretendard", "JetBrains Mono", sans-serif;

  /* 이미지 관련 코드(url, blend-mode 등)는 전부 삭제했습니다 */

  margin: 0;
  padding: clamp(12px, 1.6vw, 22px);

  min-height: 100svh;
  height: auto;

  overflow-x: hidden;
  overflow-y: auto;
}

input, button, textarea { font-family: "Pretendard", sans-serif; }

/* =========================================================
   Layout
   ========================================================= */

.dashboard-container {
  display: grid;

  /* Desktop default: bento layout */
  grid-template-columns: 260px minmax(340px, 1fr) minmax(340px, 1fr) 320px;
  grid-template-rows: 1fr;
  gap: 16px;

  /* Fill available width (no centering gaps) */
  width: 100%;
  max-width: none;

  /* Keep a dashboard feel without clipping */
  min-height: calc(100svh - 2 * clamp(12px, 1.6vw, 22px));
  height: auto;
}

.left-stack,
.right-stack {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.left-stack  { grid-column: 1 / 2; grid-row: 1 / 2; }
.center-stack { grid-column: 2 / 3; grid-row: 1 / 2; }
.hero-image  { grid-column: 3 / 4; grid-row: 1 / 2; }
.right-stack { grid-column: 4 / 5; grid-row: 1 / 2; }

/* =========================================================
   Center Stack (Fixed Top Alignment)
   ========================================================= */

.center-stack {
  display: flex;
  flex-direction: column;
  height: 100%;
  
  /* 내용물을 무조건 위쪽 정렬 */
  justify-content: flex-start;
  
  /* 위쪽 여백 제거 (맨 위로 붙임) */
  padding-top: 0;
  
  gap: 20px;
}

/* 1. 시계 (순서 1) */
.clock-card {
  flex: none; /* 크기 고정 */
  order: 1;
  
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

#time {
  font-size: 3.5rem;
  color: #e0af68;
  font-weight: 700;
  line-height: 1;
}

/* 2. 날짜 (순서 2) */
.date-card {
  flex: none; /* 크기 고정 */
  order: 2;
  
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2rem;
  color: #c0caf5;
  font-weight: 700;
  padding: 15px;
}

/* style.css */

/* [수정] 검색 카드만 예외적으로 '넘치는 내용'을 보여주도록 허용 */
.search-card {
  flex: none;
  order: 3;
  
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px;
  
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* 👇 이 두 줄이 핵심 해결책입니다! 👇 */
  overflow: visible !important;  /* 카드를 뚫고 나오게 허용 */
  z-index: 50;                   /* 다른 카드보다 위에 보이게 */
}
/* =========================================================
   Card Base
   ========================================================= */

.card {
  background-color: #1a1b26;
  border: 1px solid #24283b;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  position: relative;
  overflow: hidden; /* 중요 */
  transition: border-color 0.2s;
}

.card:hover { border-color: #7aa2f7; }

/* Hero Image */
.hero-image { padding: 0; }
.hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}

/* =========================================================
   Apps / Links (Restored)
   ========================================================= */

.apps-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.apps-card h3,
.weather-card h3,
.todo-card h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.link-item {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: #c0caf5;
  padding: 12px 12px;
  border-radius: 10px;
  background: #24283b;
  transition: 0.2s;
  font-weight: 500;
  line-height: 1.2;
}

/* Sidebar app icon alignment */
.link-item i {
  width: 20px;
  min-width: 20px;
  text-align: center;
  flex: 0 0 20px;
}


.link-item:hover {
  background: #7aa2f7;
  color: #1a1b26;
  font-weight: bold;
}

/* =========================================================
   Search Component
   ========================================================= */


.search-box {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.search-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  position: relative; /* 기준점 */
  z-index: 20;
}

/* [핵심] 아이콘과 메뉴를 감싸는 껍데기 */
.engine-selector-wrapper {
  position: relative; /* 드롭다운의 기준점 역할 */
  width: 60px;
  height: 50px;
}

/* 아이콘 버튼 */
.selected-engine {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;       /* 부모(60px) 꽉 채움 */
  height: 100%;      /* 부모(50px) 꽉 채움 */
  background: #24283b;
  border-radius: 8px;
  cursor: pointer;
  color: #c0caf5;
  transition: 0.2s;
}
.selected-engine:hover { background: #3b4261; color: #fff; }

/* [수정됨] 드롭다운 메뉴 */
.dropdown-options {
  position: absolute; /* 공중 부양! */
  top: 60px;          /* 아이콘 바로 아래 (50px + 여백 10px) */
  left: 0;
  width: 60px;        /* 아이콘 너비와 똑같이 맞춤 */
  
  background: #1f2335;
  border-radius: 8px;
  list-style: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 100;       /* 제일 위에 뜨도록 */
  
  /* 애니메이션 초기 상태 */
  max-height: 0;
  opacity: 0;
  border: none;
  box-shadow: 0 4px 10px rgba(0,0,0,0.5); /* 그림자 추가 */
  
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 열렸을 때 */
.dropdown-options.show {
  max-height: 200px;
  opacity: 1;
  border: 1px solid #414868;
}

.dropdown-options li {
  padding: 12px 0;    /* 위아래 패딩만 */
  cursor: pointer;
  display: flex;
  justify-content: center; /* 아이콘 가운데 정렬 */
  align-items: center;
  font-size: 1.1rem;
  color: #a9b1d6;
  border-bottom: 1px solid #292e42;
}
.dropdown-options li:last-child { border-bottom: none; }
.dropdown-options li:hover { background: #7aa2f7; color: #1a1b26; }


/* --- 아래는 기존과 동일 (입력창, 버튼 등) --- */

.input-wrapper {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
}

.search-box input {
  width: 100%;
  height: 50px;
  padding: 0 15px;
  font-size: 1.1rem;
  background: #24283b;
  border: none;
  color: #ffffff;
  border-radius: 8px;
  outline: none;
}

.search-box button {
  width: 50px;
  height: 50px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #7aa2f7;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1.2rem;
  color: #1a1b26;
  flex-shrink: 0;
}
.search-box button:hover { background: #bb9af7; color: #fff; }

.suggestion-box {
  position: absolute;
  top: 55px;
  left: 0;
  width: 100%;
  background: #1f2335;
  border-radius: 8px;
  list-style: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  z-index: 50;
  max-height: 0;
  opacity: 0;
  border: none;
  box-shadow: 0 4px 10px rgba(0,0,0,0.5);
  transition: all 0.2s;
}
.suggestion-box.show {
  max-height: 400px;
  opacity: 1;
  border: 1px solid #414868;
}
.suggestion-box li {
  padding: 12px 15px;
  cursor: pointer;
  color: #a9b1d6;
  border-bottom: 1px solid #292e42;
  display: flex;
  align-items: center;
  gap: 10px;
}
.suggestion-box li:hover { background: #7aa2f7; color: #1a1b26; }

/* =========================================================
   Weather / Todo
   ========================================================= */

.weather-info {
  font-size: 2rem;
  margin: 20px 0 5px;
  text-align: center;
  color: #9ece6a;
}

.todo-input-box {
  display: flex;
  gap: 10px;
  margin-top: 15px;
  margin-bottom: 15px;
}
.todo-input-box input {
  flex: 1;
  padding: 8px;
  background: #24283b;
  border: 1px solid #414868;
  border-radius: 5px;
  color: #c0caf5;
  outline: none;
}
.todo-input-box button {
  padding: 8px 12px;
  background: #7aa2f7;
  border: none;
  border-radius: 5px;
  color: #1a1b26;
  cursor: pointer;
}
.todo-list {
  list-style: none;
  margin-top: 10px;
  overflow-y: auto;
  max-height: 200px;
}
.todo-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px;
  background: #1f2335;
  border-radius: 5px;
  margin-bottom: 8px;
}
.todo-text { cursor: pointer; flex: 1; margin-left: 10px; }
.completed { text-decoration: line-through; color: #565f89; }
.delete-btn { background: none; border: none; color: #f7768e; cursor: pointer; }

/* =========================================================
   Music Player
   ========================================================= */

.music-card { padding: 20px; }
.music-player-container {
  background: #1f2335;
  padding: 15px;
  border-radius: 12px;
  border: 1px solid #24283b;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.music-controls { display: flex; gap: 10px; }
.control-btn {
  background: #24283b;
  border: none;
  color: #c0caf5;
  padding: 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.2s;
  font-family: inherit;
}
.control-btn:hover { background: #7aa2f7; color: #1a1b26; }
.main-play-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 700;
}
.shuffle-btn { width: 40px; }
.volume-container {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #565f89;
  font-size: 0.9rem;
}
.volume-container input[type=range] {
  width: 100%;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
}
.volume-container input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 6px;
  background: #414868;
  border-radius: 3px;
}
.volume-container input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: #7aa2f7;
  margin-top: -5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
/* =========================================================
   Mini Tetris Widget (Resized)
   ========================================================= */

.tetris-card {
  flex: 1; /* 남는 공간 채움 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  /* [수정] 최소 높이를 줄여서 짤림 방지 */
  min-height: auto; 
  padding-bottom: 15px;
}

/* style.css */

.tetris-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px; /* 간격 미세 조정 */
}

/* 점수 박스 스타일 */
.score-box {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.2;
}

.best-score {
  font-size: 0.75rem;
  color: #565f89; /* 어두운 보라/회색 톤 */
  font-weight: 600;
  font-family: "JetBrains Mono", monospace;
}

.current-score {
  font-family: "JetBrains Mono", monospace;
  font-size: 1.1rem;
  font-weight: 700;
  color: #e0af68; /* 기존 금색 유지 */
}

/* 기존 #score 스타일은 .current-score로 대체되었으므로 삭제하거나 덮어씌워집니다 */

.tetris-body {
  position: relative;
  border: 2px solid #24283b;
  border-radius: 4px;
  background: #000;
  overflow: hidden;
  /* 중앙 정렬 */
  margin: 0 auto;
}

canvas#tetris {
  display: block;
  /* [수정] CSS 크기도 HTML과 동일하게 맞춤 */
  width: 120px;
  height: 240px;
}

/* 오버레이 (Start 화면) */
.tetris-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  z-index: 10;
}

.tetris-overlay.hidden { display: none; }

#overlay-text {
  font-size: 1.2rem;
  font-weight: 700;
  color: #bb9af7;
}

.start-btn {
  background: #7aa2f7;
  border: none;
  padding: 8px 16px; /* 버튼 크기 살짝 축소 */
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: bold;
  cursor: pointer;
  color: #1a1b26;
  transition: 0.2s;
}

.start-btn:hover { background: #bb9af7; color: #fff; }

.tetris-controls-hint {
  font-size: 0.75rem;
  color: #565f89;
  text-align: center;
}
/* =========================================================
   YouTube Widget (Right Bottom)
   ========================================================= */

.youtube-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 200px;
}

.youtube-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.channel-name {
  font-size: 0.85rem;
  color: #7aa2f7;
  font-weight: bold;
}

/* 16:9 비율 유지하는 반응형 비디오 박스 */
.video-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 비율 */
  background: #000;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}
/* =========================================================
   YouTube Volume Control
   ========================================================= */

.yt-volume-control {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 5px 0 5px; /* 영상과 간격 */
}

.yt-volume-control i {
  color: #7aa2f7; /* 아이콘 색상 (파랑) */
  font-size: 1rem;
  width: 24px;
  text-align: center;
}

/* 슬라이더 바 디자인 */
.yt-volume-control input[type=range] {
  flex: 1;
  height: 6px;
  -webkit-appearance: none;
  background: #24283b;
  border-radius: 3px;
  outline: none;
  cursor: pointer;
}

/* 슬라이더 손잡이 (빨강) */
.yt-volume-control input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  background: #f7768e; /* 빨간색 포인트 */
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.1s;
}

.yt-volume-control input[type=range]::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

/* =========================================================
   Responsive Layout
   ========================================================= */

/* <= 1200px: 3 columns (hero below center) */
@media (max-width: 1200px) {
  .dashboard-container {
    grid-template-columns: 260px minmax(320px, 1fr) 320px;
  }
  .left-stack  { grid-column: 1 / 2; grid-row: 1 / 2; }
  .center-stack { grid-column: 2 / 3; grid-row: 1 / 2; }
  .right-stack { grid-column: 3 / 4; grid-row: 1 / 2; }

  .hero-image  { 
    grid-column: 2 / 3; 
    grid-row: 2 / 3; 
  }
}

/* <= 920px: 2 columns (stacked center/hero/right) */
@media (max-width: 920px) {
.dashboard-container {
    grid-template-columns: 260px 1fr;
    grid-template-rows: auto;
  }

  .left-stack  { grid-column: 1 / 2; grid-row: 1 / 4; }
  .center-stack { grid-column: 2 / 3; grid-row: 1 / 2; }
  .hero-image  { grid-column: 2 / 3; grid-row: 2 / 3; }
  .right-stack { grid-column: 2 / 3; grid-row: 3 / 4; }
}

/* <= 720px: single column */
@media (max-width: 720px) {
.dashboard-container {
    grid-template-columns: 1fr;
    width: 100%;
gap: 14px;
  }

  .left-stack,
  .center-stack,
  .hero-image,
  .right-stack {
    grid-column: 1 / 2;
    grid-row: auto;
  }

  /* Improve tap targets */
  .link-item { padding: 12px 14px; }
}



/* Hide scrollbars (scrolling still works) */
html, body {
  -ms-overflow-style: none;   /* IE/Edge legacy */
  scrollbar-width: none;      /* Firefox */
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* If any card/area uses its own scroll, hide those too */
*::-webkit-scrollbar {
  width: 0;
  height: 0;
}
* {
  scrollbar-width: none;
}
/* style.css 맨 마지막 부분 교체 */

/* =========================================================
   Bento Grid: Selective Tilt Interaction
   ========================================================= */

/* 1. 기본 트랜지션 (부드럽게) */
.card {
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 2. [초기화] 모든 카드의 공통 active 효과 제거 */
/* 자바스크립트가 클래스를 붙여도, 여기에 스타일이 없으면 아무 변화가 없습니다 */
.card.active-mode,
.card:focus-within {
  z-index: 100; /* 클릭된 카드가 맨 위에 오게만 설정 */
}


/* --- [그룹 A: 효과 제거 대상] --- */
/* 투두, 유튜브, 테트리스, 앱스, 뮤직, 검색 등은 CSS 규칙을 아예 삭제하여
   클릭해도 아무런 반응(색상/폰트/기울기)이 일어나지 않습니다. */


/* --- [그룹 B: 기울기 애니메이션 대상 (시계, 날씨, 날짜)] --- */
/* 클릭 시 폰트/색상 변경 + 각기 다른 각도로 기울어짐 */

/* ① Clock: 왼쪽으로 휙 (-3도) */
.clock-card.active-mode {
  transform: scale(1.05) rotate(-3deg); /* 왼쪽 기울기 */
  background: linear-gradient(135deg, #093028 0%, #237a57 100%);
  border-color: #7dcfff;
  
  /* 폰트 효과도 이 그룹만 적용 */
  font-family: "JetBrains Mono", serif;
  font-weight: 700;
  box-shadow: 0 10px 20px rgba(0,0,0,0.5);
}
.clock-card.active-mode #time { color: #fff; }

/* ② Date: 오른쪽으로 휙 (+2도) */
.date-card.active-mode {
  transform: scale(1.05) rotate(2deg); /* 오른쪽 기울기 */
  background: linear-gradient(135deg, #1c2e4a 0%, #4a6fa5 100%);
  border-color: #bb9af7;
  
  font-family: "JetBrains Mono", serif;
  font-weight: 700;
  box-shadow: 0 10px 20px rgba(0,0,0,0.5);
}

/* ③ Weather: 살짝 왼쪽 (-1.5도) */
.weather-card.active-mode {
  transform: scale(1.05) rotate(-1.5deg); /* 미세한 왼쪽 기울기 */
  background: linear-gradient(135deg, #1b3a2e 0%, #2d5e4b 100%);
  border-color: #9ece6a;
  
  font-family: "JetBrains Mono", serif;
  font-weight: 700;
  box-shadow: 0 10px 20px rgba(0,0,0,0.5);
}
/* Project ZERO 위젯 스타일 */
.project-zero {
    background: linear-gradient(145deg, #1a1a1a, #0d0d0d);
    border: 1px solid #333;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px;
}

.project-zero h3 {
    color: #ff4757; /* 경고의 붉은색 */
    margin: 0;
    text-shadow: 0 0 5px rgba(255, 71, 87, 0.5);
    font-size: 1.2rem;
}

.d-day {
    font-size: 0.8rem;
    background: #ff4757;
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
    float: right;
}

/* 보스 HP (부채 총액) */
.boss-status {
    text-align: center;
    margin: 15px 0;
}

#total-debt {
    font-size: 2rem;
    font-weight: bold;
    margin: 0;
    font-family: 'Courier New', monospace; /* 숫자 느낌 */
}

.hp-container {
    width: 100%;
    height: 15px;
    background: #333;
    border-radius: 10px;
    margin-top: 5px;
    overflow: hidden;
    border: 1px solid #555;
}

.hp-bar {
    width: 100%; /* 초기값 100% */
    height: 100%;
    background: linear-gradient(90deg, #ff6b81, #ff4757);
    box-shadow: 0 0 10px #ff4757;
    transition: width 0.5s ease-in-out;
}

.status-text {
    font-size: 0.7rem;
    color: #888;
    margin-top: 5px;
}

/* 퀘스트 리스트 */
.quest-list {
    background: rgba(255, 255, 255, 0.05);
    padding: 10px;
    border-radius: 8px;
}

.quest-title {
    font-size: 0.8rem;
    color: #aaa;
    margin-bottom: 8px;
}

.todo-item {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    cursor: pointer;
    font-size: 0.9rem;
}

/* 체크박스 커스텀 */
.todo-item input {
    display: none;
}

.checkmark {
    width: 15px;
    height: 15px;
    border: 2px solid #555;
    border-radius: 3px;
    margin-right: 10px;
    position: relative;
}

.todo-item input:checked ~ .checkmark {
    background: #2ed573; /* 갚으면 초록색으로 변경 */
    border-color: #2ed573;
}

.todo-item input:checked ~ .text {
    text-decoration: line-through;
    color: #555;
}