/* レスポンシブレイアウト - 4方向対応 */

/* ベースレイアウト */
#appLayout {
  display: flex;
  flex: 1;
  overflow: hidden;
  flex-direction: column;
}

/* --- 1. 縦画面用: 下配置 --- */
body.layout-bottom #appLayout {
  flex-direction: column;
}
body.layout-bottom .viewport-area {
  order: 1;
}
body.layout-bottom .toolbar-dock {
  order: 2;
  border-top: 1px solid var(--border-color);
  width: 100%;
  height: auto;
  flex-direction: column;
  padding: 5px;
  gap: 5px;
}
body.layout-bottom .dock-row {
  flex-direction: row;
  width: auto;
  border: none;
  padding: 0;
  margin: 0;
}
body.layout-bottom .size-group,
body.layout-bottom .tool-group-container,
body.layout-bottom .palette-container {
  flex-direction: row;
  width: auto;
}

/* --- 2. 縦画面用: 上配置 --- */
body.layout-top #appLayout {
  flex-direction: column;
}
body.layout-top .toolbar-dock {
  order: 1;
  border-bottom: 1px solid var(--border-color);
  width: 100%;
  height: auto;
  flex-direction: column;
  padding: 5px;
  gap: 5px;
}
body.layout-top .viewport-area {
  order: 2;
}
body.layout-top .dock-row {
  flex-direction: row;
  width: auto;
  border: none;
  padding: 0;
  margin: 0;
}
body.layout-top .size-group,
body.layout-top .tool-group-container,
body.layout-top .palette-container {
  flex-direction: row;
  width: auto;
}

/* --- 3. 横画面用: 左配置 --- */
body.layout-left #appLayout {
  flex-direction: row;
}
body.layout-left .toolbar-dock {
  order: 1;
  border-right: 1px solid var(--border-color);
  width: 60px;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px 5px;
  overflow-y: auto;
  overflow-x: hidden;
  align-items: center;
}
body.layout-left .viewport-area {
  order: 2;
}
body.layout-left .dock-row,
body.layout-left .size-group,
body.layout-left .tool-group-container {
  flex-direction: column;
  width: 100%;
  border: none;
  padding: 0;
  margin: 0;
}
body.layout-left .palette-container {
  flex-direction: column;
  width: 100%;
  align-items: center;
  gap: 5px;
}
body.layout-left #quickPalette {
  flex-direction: column;
  width: auto;
  max-height: 200px;
  max-width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}
body.layout-left #mainColorBtn {
  width: 36px;
  height: 36px;
}

/* --- 4. 横画面用: 右配置 --- */
body.layout-right #appLayout {
  flex-direction: row;
}
body.layout-right .viewport-area {
  order: 1;
}
body.layout-right .toolbar-dock {
  order: 2;
  border-left: 1px solid var(--border-color);
  width: 60px;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px 5px;
  overflow-y: auto;
  overflow-x: hidden;
  align-items: center;
}
body.layout-right .dock-row,
body.layout-right .size-group,
body.layout-right .tool-group-container {
  flex-direction: column;
  width: 100%;
  border: none;
  padding: 0;
  margin: 0;
}
body.layout-right .palette-container {
  flex-direction: column;
  width: 100%;
  align-items: center;
  gap: 5px;
}
body.layout-right #quickPalette {
  flex-direction: column;
  width: auto;
  max-height: 200px;
  max-width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}
body.layout-right #mainColorBtn {
  width: 36px;
  height: 36px;
}

/* 横配置共通設定 */
body.layout-left .tool-separator,
body.layout-right .tool-separator {
  display: none;
}