/* 外部容器，保持行内布局 */
.flow-layout {
  display: flex;
  flex-wrap: wrap;
  /* 支持换行 */
}


.calculate_result {
  line-height: 2rem;
  padding-left: .2rem;
  padding-right: .2rem;
  white-space: nowrap;
  /* 防止文本换行 */
  overflow: hidden;
  /* 隐藏超出的文本 */
  /* padding: 20px; */
  text-overflow: ellipsis;
  /* 超出部分用省略号表示 */
  text-align: center;

}



.grid-container {
  padding: .5rem;
  display: grid;
  width: 20rem;
  margin-bottom: .5rem;
  grid-template-columns: 1fr 3fr;
  /* 上层左右1:3 */
  grid-template-rows: 1fr 1fr;
  /* 上下两行，比例1:1 */
  /* height: 100vh;  设置容器的高度为视口高度 */
}

.grid-three-container {
  padding: .5rem;
  display: grid;
  width: 20rem;
  grid-template-columns: 1fr 1.5fr 1.5fr;
  /* 上层左右1:3 */
  grid-template-rows: 1fr 1fr;
  /* 上下两行，比例1:1 */
}

.bottom-three {
  /* background-color: lightcoral; */
  padding: .5rem;
  padding-left: .5rem;
  padding-right: .2rem;
  white-space: nowrap;
  /* 防止文本换行 */
  overflow: hidden;
  /* 隐藏超出的文本 */
  /* padding: 20px; */
  text-overflow: ellipsis;
  /* 超出部分用省略号表示 */
  grid-column: 1 / span 3;
  /* 底部部分占据两列 */
}

.top-left {
  /* background-color: lightblue; */
  /* padding: .5rem; */
  /* padding: 20px; */
}

.top-right {
  /* background-color: lightgreen; */
  /* padding: .5rem; */
  /* padding: 20px; */
}

.bottom {
  /* background-color: lightcoral; */
  padding: .2rem;
  padding-left: .5rem;
  padding-right: .2rem;
  white-space: nowrap;
  /* 防止文本换行 */
  overflow: hidden;
  /* 隐藏超出的文本 */
  /* padding: 20px; */
  text-overflow: ellipsis;
  /* 超出部分用省略号表示 */
  grid-column: 1 / span 2;
  /* 底部部分占据两列 */
  text-align: center;
}

/* 每个子div，使用 inline-block 布局 */
.single-emoji {
  display: inline-block;
  /* 设置为行内块级元素 */
  /* width: 200px; */
  /* 设置宽度为200px */
  height: 42px;
  /* 设置高度为70px */
  /* margin-right: 0.5rem; */
  /* 子项之间的间距 */
  margin-bottom: 1rem;
  /* border: 1px solid #ccc; */
  vertical-align: top;
  /* 确保所有div在同一行顶部对齐 */
  /* padding: 5px; */
  /* 内边距 */
  box-sizing: border-box;
  /* 包括边框在宽高内 */
}

/* 使用 Grid 布局 */
.single-calculator-grid {
  display: grid;
  grid-template-columns: 34px 150px;
  /* 设置为1:2的列比例 */
  height: 100%;
  /* 高度占满父容器 */
}

/* 左侧部分 */
.part-left {
  text-align: center;
  vertical-align: middle;
  line-height: 34px;
  font-size: 28.8px;
  /* 垂直居中 */
}

/* 右侧部分 */
.part-right {
  display: grid;
  grid-template-rows: 1fr 1fr;
  /* 上下分为两行 */
  text-align: left;
  font-size: 12px;
}

/* 上层文本 */
.part-right .top {
  font-size: 12.8px;
  font-weight: bold;
  /* 加粗显示 */
  line-height: 1.5;
  /* 行间距 */
}

/* 下层显示 Unicode 和 16 进制 */
.part-right .bottom {
  display: flex;
  /* justify-content: space-between; */
  /* margin-right: 5px; */
  text-align: left;
  font-size: 12px;
  color: #555;
  /* 设置颜色为灰色 */
}


.calculator_container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  /* 上层为 3 个均分的部分 */
  grid-template-rows: 1.5rem 1.5rem;
  /* 下层为 2 行 */
  gap: 2px;
  /* 网格之间的间距 */
  /* max-width: 1000px; */
  /* width: 100%; */
}

/* 上层三个部分 */
.calculator_container-top-left,
.calculator_container-top-center,
.calculator_container-top-right {
  /* background-color: #3498db; */
  /* padding: 20px; */
  /* color: white; */
  text-align: center;
  border-radius: 8px;
}

/* 下层两个部分 */
.calculator_container-bottom-left,
.calculator_container-bottom-right {
  /* background-color: #2ecc71; */
  /* padding: 20px; */
  /* color: white; */
  text-align: center;
  border-radius: 8px;
}





.wd-container {
  display: flex;
  /* 使用flex布局使文字和输入框水平对齐 */
  align-items: center;
  /* 垂直居中对齐文字和输入框 */
  /* padding: 20px; */
  margin-bottom: .5rem;

}

.wd-label {
  font-size: 1rem;
  line-height: 2rem;
  min-width: 3.5rem;
  text-align: center;
  margin-left: .5rem;
  margin-right: .5rem;
}

.wd-input {
  line-height: 2.2rem;
  /* border-color: #eee */
  /* height: 30px; 输入框的高度 */
  /* padding: 5px; 输入框内部的内边距 */
  font-size: 1rem;
  /* 输入框字体大小 */
  border: 1px solid #ccc;
  /* 输入框的边框 */
  border-radius: 4px;
  /* 圆角边框 */
  /* width: 200px; 输入框的宽度 */
  /* width: 8rem; */
  padding-left: 8px;
  padding-right: 8px;
  border-color: #ccc;
  outline: none !important;
}


.wd-input:focus {
  border-color: #ccc;

}



.calculate_two_part_container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}