#app-container {
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  max-width: 1200px;
  margin: auto;

  display: flex;
  flex-direction: column;

  position: relative;
  
  /* 安全區域支援 */
  padding-left: max(0, env(safe-area-inset-left));
  padding-right: max(0, env(safe-area-inset-right));
}

#app-container.wide {
  max-width: 1200px;
}

/* 大屏幕：桌面、平板、折疊完全展開 */
@media screen and (min-width: 1000px) {
  #app-container {
    max-width: 100%;
  }
}

/* 小屏幕：手機和折疊關閉狀態 */
@media screen and (max-width: 600px) {
  #app-container {
    max-width: 100%;
    margin: 0;
    border-left: none;
    border-right: none;
  }
}

#app-container > * {
  /* padding: 0 1em; */
}

#app-container > header,
#app-container > footer {
  flex: 0 0 auto;
}

#desktop-container {
  display: flex;
  flex-direction: row;
  /* gap: .5em; */
  align-items: stretch;
  flex: 1;
  overflow: hidden;

  aside {
    flex: 0 0 280px;
    border-right: 1px solid #ccc;
    overflow-y: auto;
    overflow-x: hidden;
  }

  main {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 1em;
    
    /* 防止內容被裁剪 */
    min-width: 0;
    word-wrap: break-word;
    word-break: break-word;
  }
}

/* 中等及以下屏幕：隱藏側邊欄 */
@media screen and (max-width: 999px) {
  #desktop-container aside {
    display: none;
  }
  
  #desktop-container {
    flex-direction: column;
  }
}

/* 折疊設備：單一屏幕區段 */
@media (horizontal-viewport-segments: 1) {
  #desktop-container aside {
    display: none;
  }
  
  #app-container {
    max-width: 100%;
    margin: 0;
    border-left: none;
    border-right: none;
  }
}

/* 折疊設備：雙屏幕區段 */
@media (horizontal-viewport-segments: 2) {
  #app-container {
    max-width: 100%;
  }
  
  #desktop-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: max(env(fold-width, 0), 1rem);
  }
  
  aside {
    grid-column: 1;
    display: block !important;
    border-right: none;
  }
  
  main {
    grid-column: 2;
  }
}

/* 折疊姿態檢測 */
@media (device-posture: folded) {
  #app-container {
    max-width: 100%;
    margin: 0;
    border-left: none;
    border-right: none;
  }
  
  #desktop-container aside {
    display: none;
  }
}