#app {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;
}

/* ===== 상단 툴바 ===== */
#toolbar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  height: var(--toolbar-height);
  padding: 0 var(--spacing-md) 0 var(--spacing-sm);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
  gap: var(--spacing-md);
  z-index: 20;
}

#toolbar .toolbar-left {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  min-width: 0;
}

#toolbar .toolbar-center {
  display: flex;
  justify-content: center;
  min-width: 0;
}

#toolbar .toolbar-center .search-wrapper {
  width: 100%;
  max-width: 480px;
}

#toolbar .toolbar-right {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  justify-content: flex-end;
}

#app-title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  letter-spacing: -0.2px;
  padding: 0 var(--spacing-xs);
}

/* ===== 메인 영역 ===== */
#main {
  display: flex;
  flex: 1;
  overflow: hidden;
  position: relative;
}

/* ===== 좌측 네비 레일 ===== */
#nav-rail {
  width: max-content;
  flex-shrink: 0;
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

#nav-rail-content {
  display: flex;
  flex-direction: column;
  padding: var(--spacing-md) var(--spacing-sm);
  gap: var(--spacing-md);
  flex: 1;
  min-height: 0;
}

/* ===== 노트 리스트 패널 ===== */
#sidebar {
  width: fit-content;
  min-width: var(--list-min-width);
  max-width: var(--list-max-width);
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--color-border);
  background: var(--color-surface);
  flex-shrink: 0;
  overflow: hidden;
}

#sidebar-header {
  padding: var(--spacing-md) var(--spacing-lg);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.sidebar-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
}

#sidebar-title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  letter-spacing: -0.2px;
}

#note-list {
  contain: inline-size;
  flex: 1;
  overflow-y: auto;
  min-width: 0;
}

#note-list-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--color-text-tertiary);
  gap: var(--spacing-md);
  padding: var(--spacing-xl);
  text-align: center;
}

#note-list-empty .empty-icon {
  color: var(--color-text-tertiary);
  opacity: 0.6;
}

#note-list-empty p {
  font-size: var(--font-size-sm);
}

#note-count {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  padding: var(--spacing-sm) var(--spacing-lg);
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;
}

/* ===== 에디터 패널 ===== */
#editor-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-bg);
  min-width: 0;
}

#editor-placeholder {
  flex: 1;
  display: block;
  overflow-y: auto;
  background: var(--color-bg);
}

/* ===== 리사이즈 핸들 ===== */
#resize-handle {
  width: 4px;
  cursor: col-resize;
  background: transparent;
  flex-shrink: 0;
  transition: background var(--transition-fast);
  margin-left: -2px;
  margin-right: -2px;
  position: relative;
  z-index: 1;
}

#resize-handle:hover,
#resize-handle.dragging {
  background: var(--color-border-strong);
}

/* ===== 모바일 네비 백드롭 ===== */
#nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--color-overlay);
  z-index: 14;
  opacity: 0;
  transition: opacity var(--transition-normal);
}

/* ===== 반응형: 태블릿 ===== */
@media (max-width: 1024px) {
  #toolbar .toolbar-center {
    max-width: 320px;
  }
}

/* ===== 모바일 (768px 이하) ===== */
@media (max-width: 768px) {
  /* 툴바: 검색을 별도 영역으로 */
  #toolbar {
    grid-template-columns: auto 1fr auto;
    padding: 0 var(--spacing-sm);
  }

  #toolbar .toolbar-center {
    display: none;
  }

  #app-title {
    font-size: var(--font-size-md);
  }

  /* 네비 레일: 드로어로 변경 */
  #nav-rail {
    position: fixed;
    top: var(--toolbar-height);
    bottom: 0;
    left: 0;
    width: 260px;
    z-index: 15;
    transform: translateX(-100%);
    transition: transform var(--transition-slow);
    box-shadow: var(--shadow-lg);
  }

  #app.nav-open #nav-rail {
    transform: translateX(0);
  }

  #app.nav-open #nav-backdrop {
    display: block;
    opacity: 1;
  }

  /* 사이드바와 에디터: 토글 방식 (현재 메모 열람 시) */
  #sidebar {
    /* 인라인 style.width를 덮어쓰기 위해 !important */
    width: 100% !important;
    max-width: 100%;
    min-width: 0;
  }

  #editor-panel {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    transform: translateX(100%);
    transition: transform var(--transition-slow);
    background: var(--color-bg);
  }

  #app.note-open #editor-panel {
    transform: translateX(0);
  }

  #resize-handle {
    display: none;
  }

  /* 새 메모 버튼: 모바일에선 라벨 숨김 */
  #btn-new-note .btn-label {
    display: none;
  }

  #btn-new-note {
    width: 36px;
    height: 36px;
    padding: 0;
    justify-content: center;
  }
}

/* 매우 좁은 화면 */
@media (max-width: 480px) {
  #nav-rail {
    width: 240px;
  }
}