/* ============================================================
   플래너 클래식 시계 - 코어 스타일 (Phase 03 다크모드 기반)
   학습 가이드: CSS 변수(Variables)를 활용해 테마를 관리합니다.
============================================================ */

:root {
  /* 배경 및 패널 색상 (Background & Panel Colors) */
  --bg-color: #0d0f1e; /* 딥 인디고 (Phase 03 기본 배경) */
  --panel-bg: rgba(20, 22, 43, 0.6); /* 반투명 패널 (Glassmorphism) */
  --border-color: rgba(255, 255, 255, 0.08); /* 은은한 테두리 */
  
  /* 텍스트 색상 (Text Colors) */
  --text-main: #ffffff; /* 주 텍스트 (흰색) */
  --text-muted: #8b92a5; /* 보조 텍스트 (회색빛) */
  --primary: #6366f1; /* 포인트 컬러 (보라/파랑) */
  
  /* 시계 링 색상 (Clock Ring Colors) */
  --am-color: #8b5cf6; /* AM 링: 보라색 (야간/새벽 느낌) */
  --pm-color: #3b82f6; /* PM 링: 파란색 (활동 시간 느낌) */
  --done-color: #10b981; /* 완료(Done) 시 보색/강조: 에메랄드 그린 */
  --now-pulse: rgba(255, 255, 255, 0.8); /* 현재 시간 펄스 효과 */
  
  /* 타이포그래피 및 기타 (Typography & UI Variables) */
  --font-ui: 'Inter', sans-serif;
  --font-mono: 'DM Mono', monospace;
  --shadow-glass: 0 8px 32px 0 rgba(0, 0, 0, 0.37); /* 그림자 */
  --backdrop-blur: blur(16px); /* 블러 처리 (유리 질감) */
  --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* 부드러운 애니메이션 */
}

/* 라이트 모드 테마 변수 재정의 */
[data-theme="light"] {
  --bg-color: #f8fafc;
  --panel-bg: rgba(255, 255, 255, 0.85);
  --border-color: rgba(0, 0, 0, 0.08);
  --text-main: #0f172a;
  --text-muted: #64748b;
  --am-color: #3b82f6;
  --pm-color: #f59e0b;
  --shadow-glass: 0 8px 32px 0 rgba(0, 0, 0, 0.05);
}

/* ============================================================
   초기화 및 레이아웃 (Reset & Structural Layout)
============================================================ */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-ui);
  background-color: var(--bg-color);
  color: var(--text-main);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* 스크롤바 숨김 방지 */
  transition: background-color 0.4s ease, color 0.4s ease;
}

#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  position: relative;
}

/* ============================================================
   헤더 (Navbar)
============================================================ */
.navbar {
  height: 64px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  background: transparent;
  z-index: 10;
}

.brand {
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.5px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Phase 03 별 반짝임 아이콘 효과 */
.brand::before {
  content: '✦';
  color: var(--primary);
  font-size: 1.4rem;
}

.actions { display: flex; gap: 12px; align-items: center; }

/* Language Tabs */
.lang-tabs {
  display: flex;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 20px;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin-left: 12px;
}
.lang-tab {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.lang-tab:hover {
  color: var(--text-main);
}
.lang-tab.active {
  background: var(--primary);
  color: white;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.4);
}

.btn {
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  padding: 8px 16px;
  border-radius: 12px; /* 둥근 버튼 모서리 */
  cursor: pointer;
  font-family: var(--font-ui);
  font-weight: 500;
  backdrop-filter: var(--backdrop-blur);
  transition: var(--transition);
}

.btn:hover { background: rgba(255, 255, 255, 0.1); transform: translateY(-1px); }

/* ============================================================
   메인 컨텐츠 영역 (Main Content Area - Dual Layout)
============================================================ */
.main-content {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  gap: 40px;
  padding: 40px 24px 100px; /* 하단 네비게이션 여백 고정 */
  overflow-y: auto;
}

/* 좁은 화면/모바일에서는 세로 레이아웃(수직 배치)으로 전환 */
@media (max-width: 900px) {
  .main-content {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
}

.view-panel {
  flex: 1;
  width: 100%;
  max-width: 500px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: static;
  opacity: 1;
  pointer-events: all;
  transform: none;
}

/* [Phase 5] Mobile Scrolling Layout (Stacked Watch + Schedule) */
@media (max-width: 768px) {
  .main-content {
    flex-direction: column !important;
    align-items: center !important;
    overflow-y: auto !important;
    max-height: 100vh;
    padding-bottom: 120px !important;
  }
  .view-panel {
    display: flex !important; /* Always show both on mobile now */
    max-width: 100% !important;
    margin-bottom: 40px;
    flex-shrink: 0;
  }
}

.hidden { display: none !important; }

/* ============================================================
   시계 뷰 (Clock View)
============================================================ */
.clock-container {
  width: min(90vw, 500px);
  aspect-ratio: 1;
  position: relative;
  cursor: pointer; 
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 시계 상단 브랜딩 오버레이 */
.clock-brand-overlay {
  position: absolute;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 100;
  pointer-events: none;
  background: rgba(0,0,0,0.4);
  padding: 4px 12px;
  border-radius: 20px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.1);
  opacity: 0.8;
  transition: opacity 0.3s;
}

.clock-brand-overlay .brand-icon {
  font-size: 1.2rem;
  color: var(--primary);
  text-shadow: 0 0 10px var(--primary);
}

.clock-brand-overlay .brand-name {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.2rem;
}

.clock-container:hover .clock-brand-overlay {
  opacity: 1;
}

/* 시계 중앙 UI 영역 */
.clock-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 45%;
  aspect-ratio: 1;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 5;
  background: transparent; /* 투명하게 변경 */
  backdrop-filter: none;    /* 흐림 효과 제거 */
  border: none;             /* 테두리 제거 */
  box-shadow: none;         /* 그림자 제거 */
  pointer-events: none;     /* 클릭 이벤트를 부모(SVG 시계)로 넘기되 내부 버튼은 살림 */
}

/* 내부 버튼은 클릭할 수 있게 포인터 이벤트 복구 */
.clock-center * { pointer-events: auto; }

.phase-title {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 4px;
}

.d-day-text {
  font-weight: 700;
  font-size: 1.8rem;
  color: var(--text-main);
  text-shadow: 0 0 10px rgba(255,255,255,0.2);
}

/* Branding Toggle Classes */
.clock-brand-overlay.hide-icon .brand-icon { display: none; }
.clock-brand-overlay.hide-name .brand-name { display: none; }
.clock-brand-overlay.hide-all { display: none; }

.tap-hint {
  font-size: 0.75rem;
  color: var(--primary);
  margin-top: 8px;
  background: rgba(99, 102, 241, 0.2);
  padding: 4px 12px;
  border-radius: 12px;
}

/* 워치 중앙 마이크 버튼 (Call Agent) */
.btn-voice-agent {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(99, 102, 241, 0.2);
  border: 1px solid rgba(99, 102, 241, 0.4);
  color: white;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 500;
  backdrop-filter: blur(10px);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-voice-agent:hover {
  background: var(--primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
}

/* Central Status Display */
.now-status-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.8s ease-out;
  z-index: 2;
}

.now-progress-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  z-index: 1;
}

.now-progress-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.05);
  stroke-width: 4;
}

.now-progress-bar {
  fill: none;
  stroke: var(--primary);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 283; /* 2 * PI * 45 */
  stroke-dashoffset: 283;
  transition: stroke-dashoffset 1s linear, stroke 0.5s ease;
  filter: drop-shadow(0 0 5px var(--primary));
}

/* Category Glows for Center */
.clock-center.theme-sleep { border-color: rgba(59, 130, 246, 0.5); box-shadow: inset 0 0 20px rgba(59, 130, 246, 0.3); }
.clock-center.theme-meal { border-color: rgba(16, 185, 129, 0.5); box-shadow: inset 0 0 20px rgba(16, 185, 129, 0.3); }
.clock-center.theme-exercise { border-color: rgba(239, 68, 68, 0.5); box-shadow: inset 0 0 20px rgba(239, 68, 68, 0.3); }
.clock-center.theme-work { border-color: rgba(244, 63, 148, 0.5); box-shadow: inset 0 0 20px rgba(244, 63, 148, 0.3); }

.now-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1rem;
  color: var(--text-muted);
  margin-bottom: 2px;
}

.digital-clock {
  font-family: 'DM Mono', monospace;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 4px;
}

.now-icon {
  font-size: 2rem;
  margin: 4px 0;
  filter: drop-shadow(0 0 8px rgba(255,255,255,0.3));
}

.now-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: white;
  margin-bottom: 2px;
  text-align: center;
  max-width: 140px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.now-time {
  font-family: 'DM Mono', monospace;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.5);
}

@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}
.btn-voice-agent.listening {
  background: #ef4444; border-color: #f87171;
  animation: pulse-red 1.5s infinite;
}
@keyframes pulse-red {
  0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
  100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* ============================================================
   SVG 시계 요소 스타일 (SVG Elements styling)
============================================================ */
.clock-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 40px rgba(99, 102, 241, 0.15));
}

.ring-am { stroke: var(--am-color); fill: none; opacity: 0.8; }
.ring-pm { stroke: var(--pm-color); fill: none; opacity: 0.8; }

/* 시간 조각(Segment) 인터랙션 */
.segment {
  transition: fill 0.4s ease, stroke 0.4s ease, filter 0.2s;
  cursor: pointer;
}
.segment:hover { filter: brightness(1.3) drop-shadow(0 0 8px currentColor); }

/* 완료(Done) 상태 */
.segment.done { fill: var(--done-color); opacity: 0.9; }

/* 드래그 선택 중 상태 (단일 바(Bar) 느낌으로 통일) */
.segment.selecting {
  stroke: #84cc16 !important; 
  opacity: 0.95;
  filter: drop-shadow(0 0 15px rgba(132, 204, 22, 0.6));
  stroke-dasharray: none;
  stroke-width: 54px; /* 바 두께를 살짝 늘려 강조 */
  z-index: 100;
}

/* 🐾 Cute Animal Theme (Kawaii Style) */
body.theme-cute {
  --primary: #ff85a1;
  --bg-color: #fff9fa;
  --text-main: #6b4f4f;
  --panel-bg: rgba(255, 255, 255, 0.85);
  --border-color: #ffdce3;
  background-image: radial-gradient(circle at 50% 50%, #fff0f3 0%, #fff9fa 100%);
}
body.theme-cute .clock-center {
  background: white; border: 4px solid var(--primary);
  box-shadow: 0 4px 15px rgba(255,133,161,0.3);
}
body.theme-cute .clock-center::before { content: '🐾'; position: absolute; top: -20px; font-size: 2rem; }
body.theme-cute .segment.ring-am { stroke: #ffc2d1; }
body.theme-cute .segment.ring-pm { stroke: #ff9fb2; }

/* 일정이 있는 상태 (has-event - 기본) */
.segment.has-event {
  stroke-dasharray: 4, 8;
  filter: drop-shadow(0 0 8px currentColor);
}

/* 카테고리별 테마 (시계 조각) - Reference Image 기반 프리미엄 컬러 */
.segment.theme-sleep { stroke: #3b82f6 !important; stroke-dasharray: none; filter: drop-shadow(0 0 8px rgba(59,130,246,0.3)); opacity: 0.9; } /* Blue */
.segment.theme-meal { stroke: #10b981 !important; stroke-dasharray: none; filter: drop-shadow(0 0 8px rgba(16,185,129,0.3)); opacity: 0.9; } /* Green */
.segment.theme-lecture { stroke: #14b8a6 !important; stroke-dasharray: none; filter: drop-shadow(0 0 8px rgba(20,184,166,0.3)); opacity: 0.9; } /* Teal */
.segment.theme-exercise { stroke: #ef4444 !important; stroke-dasharray: none; filter: drop-shadow(0 0 8px rgba(239,68,68,0.3)); opacity: 0.9; } /* Red */
.segment.theme-rest { stroke: #8b5cf6 !important; stroke-dasharray: none; filter: drop-shadow(0 0 8px rgba(139,92,246,0.3)); opacity: 0.9; } /* Purple */
.segment.theme-work { stroke: #f43f5e !important; stroke-dasharray: none; filter: drop-shadow(0 0 8px rgba(244,63,94,0.3)); opacity: 0.9; } /* Rose/Red */
.segment.theme-morning { stroke: #f59e0b !important; stroke-dasharray: none; filter: drop-shadow(0 0 8px rgba(245,158,11,0.3)); opacity: 0.9; } /* Yellow/Orange */
.segment.theme-commute { stroke: #f97316 !important; stroke-dasharray: none; filter: drop-shadow(0 0 8px rgba(249,115,22,0.3)); opacity: 0.9; } /* Orange */

/* 텍스트(시간) 및 아이콘 스타일 */
.clock-text-outer {
  font-family: var(--font-mono);
  fill: var(--text-muted);
  font-size: 11px;
  font-weight: 500;
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
}

.clock-icon {
  font-size: 16px;
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.clock-schedule-text {
  font-size: 9px;
  font-weight: 500;
  fill: white;
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
  text-transform: uppercase;
  transition: fill 0.3s;
}

.clock-schedule-text.passed {
  fill: #000000;
  font-weight: 700;
  filter: drop-shadow(0 0 2px rgba(255,255,255,0.3)); /* 검정 글씨 가독성을 위한 아주 연한 광채 */
}

.clock-duration-text {
  font-size: 7px;
  fill: rgba(255,255,255,0.4);
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
}
.segment-border {
  pointer-events: none;
  transition: stroke 0.3s;
}

/* 시계 바늘 */
.clock-hand { stroke: var(--text-main); stroke-linecap: round; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); }
.clock-hand-sec { stroke: #ef4444; }

/* ============================================================
   하단 네비게이션 탭 (Bottom Navigation - Phase 03 Style)
============================================================ */
.bottom-nav {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background: linear-gradient(to top, var(--bg-color) 60%, transparent);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  padding-bottom: 20px;
  z-index: 20;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: var(--transition);
}

.nav-item.active, .nav-item:hover { color: var(--text-main); }
.nav-icon { font-size: 1.4rem; }
.nav-item.active .nav-icon {
  color: var(--primary);
  text-shadow: 0 0 15px var(--primary);
  transform: translateY(-2px);
}

.planner-item:hover {
  transform: translateX(5px);
  background: rgba(255, 255, 255, 0.05) !important;
}

.planner-item.done {
  border-left-color: var(--done-color) !important;
}

.category-indicator.theme-sleep { color: #9ca3af; }
.category-indicator.theme-meal { color: #f59e0b; }
.category-indicator.theme-lecture { color: #10b981; }
.category-indicator.theme-exercise { color: #ef4444; }
.category-indicator.theme-rest { color: #0ea5e9; }
.category-indicator.theme-work { color: #a855f7; }
.category-indicator.has-event { color: var(--primary); }

.btn-check:hover {
  background: rgba(16, 185, 129, 0.2) !important;
}

/* ============================================================
   리스트 플래너 뷰 (List Planner View)
============================================================ */
.planner-header {
  width: min(90vw, 600px);
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;
}
.tabs { display: flex; gap: 8px; background: var(--panel-bg); padding: 4px; border-radius: 12px; }
.tab {
  background: transparent; border: none; color: var(--text-muted); padding: 8px 16px; 
  border-radius: 8px; cursor: pointer; font-weight: 600; transition: var(--transition);
}
.tab.active { background: var(--text-main); color: var(--bg-color); }

/* ============================================================
   스티키 메모 모듈 (Sticky Memos - Avengers Feature)
============================================================ */
.sticky-memo {
  position: absolute; /* 바탕화면 자유 배치 */
  width: 200px;
  min-height: 150px;
  background: rgba(255, 255, 255, 0.9);
  /* 다크모드일지라도 메모는 눈에 잘 띄게 노란색이나 화이트 톤 유지 */
  background: var(--panel-bg);
  backdrop-filter: blur(20px);
  border: 1px solid var(--border-color);
  border-radius: 12px; /* 모서리 둥글게 */
  box-shadow: var(--shadow-glass), 0 10px 40px rgba(0,0,0,0.5); /* 입체감 */
  z-index: 50;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.1s; /* 드래그할 때 부드럽게 */
}

/* 다크모드 테마 덮어쓰기: 메모장 전용 밝은톤 */
[data-theme="dark"] .sticky-memo {
  background: rgba(255, 253, 208, 0.15); /* 연한 노란색 유리 질감 */
  border-left: 4px solid var(--primary); /* 왼쪽 강조선 */
}

.memo-header {
  height: 32px;
  background: rgba(0, 0, 0, 0.2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 8px;
  cursor: grab; /* 마우스를 올리면 손바닥 모양 (드래그 가능 표시) */
}
.memo-header:active { cursor: grabbing; /* 클릭 중일 땐 움켜쥔 손바닥 모양 */ }

.memo-drag-handle { font-size: 14px; pointer-events: none; }
.memo-close {
  background: transparent;
  border: none;
  color: var(--text-main);
  opacity: 0.6;
  cursor: pointer;
}
.memo-close:hover { opacity: 1; color: #ef4444; }

.memo-content {
  flex: 1;
  background: transparent;
  border: none;
  padding: 12px;
  font-family: var(--font-ui);
  color: var(--text-main);
  resize: none; 
  outline: none;
  font-size: 0.9rem;
}

/* 스티키 메모 테마 (색상 변경 지원) */
.theme-yellow { background: rgba(255, 253, 208, 0.9); border-left: 4px solid #f59e0b; }
.theme-blue { background: rgba(200, 230, 255, 0.9); border-left: 4px solid #3b82f6; }
.theme-pink { background: rgba(255, 200, 220, 0.9); border-left: 4px solid #ec4899; }

[data-theme="dark"] .theme-yellow { background: rgba(255, 253, 208, 0.15); }
[data-theme="dark"] .theme-blue { background: rgba(59, 130, 246, 0.15); }
[data-theme="dark"] .theme-pink { background: rgba(236, 72, 153, 0.15); }

/* 메모 색상 선택 팔레트 */
.memo-colors {
  display: flex; gap: 4px; align-items: center; pointer-events: auto;
}
.color-dot {
  width: 12px; height: 12px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(0,0,0,0.2); transition: transform 0.2s;
}
.color-dot:hover { transform: scale(1.3); }
.c-yellow { background: #fcd34d; }
.c-blue { background: #60a5fa; }
.c-pink { background: #f472b6; }

/* ============================================================
   모달 (Modal) - 캡처 미리보기 및 갤러리용
============================================================ */
.modal {
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
  background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(5px);
  display: flex; justify-content: center; align-items: center;
  z-index: 1000; transition: opacity 0.3s;
}
.modal.hidden { opacity: 0; pointer-events: none; }

.modal-content {
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  padding: 24px; border-radius: 16px;
  width: min(90vw, 500px); max-height: 90vh;
  display: flex; flex-direction: column; gap: 16px;
  position: relative; overflow-y: auto;
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

.btn-close-modal {
  position: absolute; top: 16px; right: 16px;
  background: transparent; border: none; font-size: 1.2rem;
  color: var(--text-muted); cursor: pointer;
}
.btn-close-modal:hover { color: #ef4444; }

.modal-actions {
  display: flex; gap: 12px; justify-content: center; margin-top: 8px;
}

/* [Phase 5] Install QR & Instructions */
.install-qr-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  padding: 10px;
}
.qr-image {
  background: white;
  padding: 10px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.install-steps {
  text-align: left;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-main);
}
.step-item { margin-bottom: 8px; }
.step-icon { font-weight: bold; color: var(--primary); margin-right: 5px; }

/* ============================================================
   AI 챗봇 비서 (AI Schedule Agent) UI
============================================================ */
.modal-content label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.modal-content input, .modal-content select {
  font-family: var(--font-ui);
  font-size: 1rem;
  transition: border-color 0.2s;
}

.modal-content input:focus, .modal-content select:focus {
  outline: none;
  border-color: var(--primary) !important;
}

.danger-text {
  color: #ef4444 !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
}
.danger-text:hover {
  background: rgba(239, 68, 68, 0.1) !important;
  border-color: #ef4444 !important;
}

/* ============================================================
   AI 챗봇 비서 (AI Schedule Agent) UI
============================================================ */
.chatbot-fab {
  position: fixed;
  bottom: 100px; /* 하단 네비게이션 바로 위 */
  right: 20px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--primary);
  border: none;
  color: white;
  font-size: 1.8rem;
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(99, 102, 241, 0.5);
  z-index: 100;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.chatbot-fab:hover { transform: scale(1.1) rotate(10deg); }

.chat-panel {
  position: fixed;
  bottom: 170px;
  right: 20px;
  width: 320px;
  height: 450px;
  background: var(--panel-bg);
  backdrop-filter: var(--backdrop-blur);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  box-shadow: var(--shadow-glass), 0 20px 50px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  z-index: 99;
  transition: opacity 0.3s, transform 0.3s;
  overflow: hidden;
}
.chat-panel.hidden { opacity: 0; pointer-events: none; transform: translateY(20px); }

.chat-header {
  height: 50px;
  background: rgba(0, 0, 0, 0.2);
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 16px;
  border-bottom: 1px solid var(--border-color);
}
.chat-header h3 { font-size: 1rem; color: var(--text-main); }

.chat-body {
  flex: 1; padding: 16px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 12px;
}

.chat-bubble {
  max-width: 80%; padding: 10px 14px; border-radius: 16px;
  font-size: 0.9rem; line-height: 1.4; position: relative;
  animation: popIn 0.3s ease-out forwards;
}
@keyframes popIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.chat-bubble.agent {
  background: rgba(99, 102, 241, 0.15); border: 1px solid rgba(99, 102, 241, 0.3);
  align-self: flex-start; border-bottom-left-radius: 4px; display: flex; gap: 8px;
}
.chat-bubble.user {
  background: var(--primary); color: white;
  align-self: flex-end; border-bottom-right-radius: 4px;
}
.chat-bubble .avatar { font-size: 1.5rem; }

.chat-input-area {
  display: flex; gap: 8px; padding: 12px; background: rgba(0,0,0,0.1);
  border-top: 1px solid var(--border-color);
}
.chat-input-area input {
  flex: 1; background: var(--bg-color); border: 1px solid var(--border-color);
  border-radius: 8px; padding: 8px 12px; color: var(--text-main); outline: none;
}
.chat-input-area button { padding: 8px 16px; }

/* ============================================================
   리치 메모 (Rich Memos - Image & Links)
============================================================ */
.sticky-memo {
  min-height: 120px;
  display: flex;
  flex-direction: column;
}

.memo-content {
  flex: 1;
  width: 100%;
  border: none;
  background: transparent;
  padding: 8px;
  font-family: inherit;
  font-size: 0.9rem;
  resize: none;
  outline: none;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.memo-content img {
  max-width: 100%;
  border-radius: 4px;
  margin-top: 5px;
  display: block;
}

.memo-content a {
  color: #3b82f6;
  text-decoration: underline;
  pointer-events: auto !important;
}

.memo-btn-attach {
  font-size: 1rem;
  cursor: pointer;
  margin-right: 4px;
  opacity: 0.7;
}
.memo-btn-attach:hover { opacity: 1; }

.memo-btn-attach-file {
  font-size: 1rem;
  cursor: pointer;
  margin-right: 4px;
  opacity: 0.7;
}
.memo-btn-attach-file:hover { opacity: 1; }

/* [V2] 메모 내 하이퍼링크 스타일 */
.memo-link {
  color: #6366f1;
  text-decoration: underline;
  word-break: break-all;
  font-size: 0.82rem;
  transition: color 0.2s;
}
.memo-link:hover { color: #818cf8; }


/* ============================================================
   줌 제어 (Zoom Controls)
============================================================ */
.zoom-controls {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 10;
}
.btn-zoom {
  width: 32px;
  height: 32px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border-color);
  color: white;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  backdrop-filter: blur(5px);
  transition: all 0.2s;
}
.btn-zoom:hover {
  background: var(--primary);
  border-color: var(--primary);
}

.clock-svg {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center center;
}


/* ============================================================
   캡처 편집기 (Capture Editor UI)
============================================================ */
.editor-toolbar {
  display: flex;
  justify-content: center;
  gap: 15px;
  background: rgba(0,0,0,0.4);
  padding: 10px;
  border-radius: 12px;
  margin-bottom: 10px;
}
.tool-btn {
  background: none;
  border: 1px solid transparent;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 6px;
  transition: all 0.2s;
  color: white;
}
.tool-btn:hover, .tool-btn.active {
  border-color: var(--primary);
  background: rgba(99, 102, 241, 0.2);
}
.color-swatch {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
}
.color-swatch.active {
  border-color: white;
  transform: scale(1.2);
}

.canvas-container {
  position: relative;
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
#editor-canvas {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  cursor: crosshair;
  background: #000;
}


/* ============================================================
   스킨 셀렉터 (Skin Selector)
============================================================ */
.skin-selector-container {
  margin-top: 20px;
  width: 100%;
  max-width: 400px;
}
.skin-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
  padding-left: 10px;
}
.skin-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 10px;
  scrollbar-width: none; /* Firefox */
}
.skin-scroll::-webkit-scrollbar { display: none; } /* Safari/Chrome */

.skin-item {
  flex: 0 0 80px;
  height: 40px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  color: var(--text-muted);
}
.skin-item.active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
  box-shadow: 0 0 15px var(--primary);
}
.skin-item:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,0.1);
}

/* ============================================================
   테마별 스타일 정의 (Themes)
============================================================ */
/* 1. Vibrant (Dark reference-like but pops more) */
body.theme-vibrant { --bg-color: #050505; --panel-bg: rgba(20,20,20,0.8); }
body.theme-vibrant .clock-svg { filter: drop-shadow(0 0 10px rgba(99, 102, 241, 0.4)); }

/* 2. Light (Mimics the white background reference) */
body.theme-minimal-light {
  --bg-color: #f8fafc;
  --text-main: #1e293b;
  --text-muted: #64748b;
  --panel-bg: rgba(255,255,255,0.9);
  --border-color: #e2e8f0;
}
body.theme-minimal-light .clock-center { background: rgba(255,255,255,0.8); border: 1px solid #e2e8f0; }
body.theme-minimal-light .clock-icon { filter: none; }

/* 3. Retro (Cyberpunk/Neon) */
body.theme-retro {
  --primary: #ff00ff;
  --bg-color: #0d0221;
}
body.theme-retro .segment { stroke-width: 12px !important; }

/* 4. Disney/Cute (Soft Pastels) */
body.theme-disney {
  --primary: #ffbdcc;
  --bg-color: #fffafb;
  --text-main: #fa8072;
}

/* 5. Kakao (Yellow concept) */
body.theme-kakao {
  --primary: #fee500;
  --bg-color: #3c1e1e;
}


/* ============================================================
   퀵 스케줄 추가 팝업 (Quick Add Popup)
============================================================ */
.quick-add-popup {
  position: fixed;
  background: var(--panel-bg);
  backdrop-filter: blur(20px);
  border: 1px solid var(--primary);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 260px;
  animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.quick-add-popup input {
  background: rgba(0,0,0,0.2);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 8px;
  color: white;
  outline: none;
}

.emoji-picker {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

.emoji-item {
  font-size: 1.4rem;
  cursor: pointer;
  text-align: center;
  padding: 4px;
  border-radius: 8px;
  transition: background 0.2s;
}

.emoji-item:hover, .emoji-item.selected {
  background: rgba(99, 102, 241, 0.3);
  transform: scale(1.1);
}

.quick-add-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* ====== Screensaver Mode ====== */
body.screensaver-active .bottom-nav,
body.screensaver-active .zoom-controls,
body.screensaver-active .main-header,
body.screensaver-active .sidebar,
body.screensaver-active #settings-panel,
body.screensaver-active .floating-agent-bubble,
body.screensaver-active .floating-capture-widget {
  display: none !important;
}

body.screensaver-active .main-container {
  padding: 0; height: 100vh; justify-content: center; align-items: center;
}

body.screensaver-active .clock-section {
  width: 100%; max-width: none; display: flex !important; align-items: center; justify-content: center;
}

body.screensaver-active .schedule-section { display: none !important; }

/* Drag Selection Overlay Styling */
#drag-overlay {
  fill: none;
  stroke: var(--primary);
  opacity: 0.5;
  filter: drop-shadow(0 0 10px var(--primary));
  transition: none;
}


/* Phase 3: Settings Expansion Styles */
.input-with-icon {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 8px 12px;
  gap: 10px;
  margin-bottom: 5px;
  transition: border-color 0.3s;
}

.input-with-icon:focus-within {
  border-color: var(--primary);
}

.input-with-icon span {
  font-size: 1.1rem;
  opacity: 0.8;
}

.input-with-icon input {
  background: none;
  border: none;
  color: white;
  width: 100%;
  font-size: 0.9rem;
  outline: none;
}

input[type="range"] {
  accent-color: var(--primary);
  cursor: pointer;
  height: 6px;
  background: rgba(255,255,255,0.1);
  border-radius: 3px;
}

input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
  cursor: pointer;
}

/* ============================================================
   📱 모바일 반응형 (Mobile Responsive — Tablet 768px)
============================================================ */
@media (max-width: 768px) {
  /* 헤더 컴팩트화 */
  .navbar {
    height: 52px;
    padding: 0 14px;
  }
  .brand { font-size: 1rem; }
  .brand::before { font-size: 1.1rem; }

  /* 언어 탭 */
  .lang-tabs { margin-left: 6px; }
  .lang-tab { font-size: 0.65rem; padding: 3px 7px; }

  /* 메인 레이아웃 */
  .main-content {
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 16px 12px 90px;
  }

  /* 시계 */
  .clock-container { 
    width: min(90vw, 420px); 
    margin-top: 10px;
  }
  .view-panel { 
    max-width: 100%; 
    padding: 0 10px;
    display: flex !important;
  }

  /* 채팅 패널 */
  .chat-panel {
    width: calc(100vw - 24px);
    right: 12px;
    left: 12px;
    bottom: 150px;
    height: 380px;
  }
  .chatbot-fab { bottom: 90px; right: 14px; width: 52px; height: 52px; font-size: 1.5rem; }

  /* [NEW] NotebookLM Link (Tablet & Mobile) */
  .chat-notebook-link {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    background: rgba(99, 102, 241, 0.2);
    border: 1px solid var(--primary);
    color: var(--primary);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    text-decoration: none;
    transition: all 0.2s;
  }
  .chat-notebook-link:hover {
    background: var(--primary);
    color: white;
  }
  /* 설정 사이드바 */
  .sidebar {
    width: 100vw;
    right: 0;
    border-radius: 0;
  }

  /* 스킨 셀렉터 */
  .skin-selector-container { max-width: 100%; }

  /* 플래너 탭 */
  .tab { padding: 6px 12px; font-size: 0.8rem; }
}

/* ============================================================
   📱 모바일 반응형 (Mobile Phone — 480px 이하)
============================================================ */
@media (max-width: 480px) {
  /* 헤더 */
  .navbar {
    height: 48px;
    padding: 0 10px;
  }
  .brand { font-size: 0.9rem; }
  .brand::before { display: none; } /* 별 아이콘 숨김 */
  .lang-tab { padding: 3px 6px; font-size: 0.6rem; }

  /* 메인 레이아웃 */
  .main-content {
    gap: 8px;
    padding: 8px 8px 85px;
  }

  /* 시계 — 화면 꽉 채우기 */
  .clock-container {
    width: min(95vw, 360px);
  }

  /* 시계 중앙 텍스트 */
  .now-title { font-size: 0.85rem; max-width: 100px; }
  .now-icon { font-size: 1.5rem; }
  .digital-clock { font-size: 0.75rem; }
  .now-label { font-size: 8px; }

  /* 시계 라벨/외부 텍스트 */
  .clock-text-outer { font-size: 9px; }
  .clock-schedule-text { font-size: 7px; }

  /* Call Agent 버튼 */
  .btn-voice-agent {
    font-size: 0.65rem;
    padding: 5px 10px;
    top: 6px;
    right: 6px;
  }

  /* 줌 컨트롤 */
  .zoom-controls { gap: 5px; }
  .btn-zoom { width: 26px; height: 26px; font-size: 0.75rem; }

  /* 스킨 셀렉터 */
  .skin-label { font-size: 0.65rem; }
  .skin-item { flex: 0 0 65px; height: 32px; font-size: 0.65rem; }

  /* 플래너 탭 */
  .tab { padding: 5px 10px; font-size: 0.75rem; }
  .planner-header { padding: 10px !important; }

  /* 하단 네비게이션 */
  .bottom-nav {
    height: 65px;
    gap: 24px;
    padding-bottom: 10px;
  }
  .nav-item { font-size: 0.6rem; gap: 3px; }
  .nav-icon { font-size: 1.1rem; }

  /* 채팅 패널 */
  .chat-panel {
    width: calc(100vw - 16px);
    left: 8px;
    right: 8px;
    bottom: 140px;
    height: 55vh;
    border-radius: 16px 16px 8px 8px;
  }
  .chat-bubble { font-size: 0.8rem; padding: 8px 10px; }
  .chatbot-fab { bottom: 78px; right: 10px; width: 48px; height: 48px; font-size: 1.3rem; }

  /* 설정 사이드바 */
  .sidebar {
    width: 100vw;
    border-radius: 0;
    max-height: 85vh;
    bottom: 0;
    top: auto;
    height: auto;
  }
  .sidebar-content { padding: 12px; }
  .setting-group { margin-bottom: 14px; }
  .setting-group label { font-size: 0.75rem; }

  /* 퀵 추가 팝업 */
  .quick-add-popup {
    width: calc(100vw - 24px) !important;
    left: 12px !important;
    right: 12px !important;
    border-radius: 16px;
  }

  /* 플로팅 캡처 위젯 */
  #floating-capture-widget {
    bottom: 140px;
    left: 10px;
  }

  /* 스티키 메모 (모바일에서 좁게) */
  .sticky-memo { width: 160px; }

  /* 에이전트 추천 버튼 */
  #chat-recommend-area button { font-size: 0.6rem !important; padding: 3px 5px !important; }
}