/*
  keyboard.css
  ----------------------
  本文件用于美化 Mac 键盘测试页面，包含整体布局、键盘样式、按键高亮、箭头区等详细样式。
  每个主要样式块均有中文注释，便于理解和维护。
*/

/* 页面整体背景、字体、居中布局，模拟 1200x600 屏幕比例 */
body {
  background: #232428; /* 设置页面背景色为深灰色 */
  color: #fff; /* 设置字体颜色为白色 */
  font-family: 'Segoe UI', Arial, sans-serif; /* 设置字体为无衬线字体 */
  display: flex; /* 使用弹性布局，使内容居中 */
  justify-content: center; /* 水平居中内容 */
  align-items: center; /* 垂直居中内容 */
  min-width: 1200px; /* 设置页面最小宽度为1200px */
  min-height: 600px; /* 设置页面最小高度为600px */
  margin: 0; /* 去除页面默认外边距 */
  overflow: auto; /* 内容超出时显示滚动条 */
}

/* 垂直排列 h1 和键盘，并整体居中显示，模拟 1100x600 屏幕比例 */
.container {
  display: flex; /* 使用弹性布局 */
  flex-direction: column; /* 垂直排列子元素 */
  align-items: flex-start; /* 子元素左对齐 */
  justify-content: center; /* 垂直居中 */
  min-width: 1100px; /* 最小宽度 */
  min-height: 600px; /* 最小高度 */
}

/* 键盘整体容器样式，设置背景、圆角、阴影等 */
.keyboard {
  background: #2d2e32; /* 键盘区域背景色 */
  padding: 24px; /* 内边距 */
  border-radius: 12px; /* 圆角 */
  box-shadow: 0 4px 32px #0008; /* 阴影效果 */
  display: inline-block; /* 行内块元素 */
}

/* 每一行按键的容器，横向排列 */
.row {
  display: flex; /* 弹性布局，横向排列 */
  margin-bottom: 8px; /* 行与行之间的间距 */
}

/* 单个按键的基础样式，包括背景、圆角、间距、字体等 */
.key {
  background: #3a3b3f; /* 按键背景色 */
  border-radius: 6px; /* 按键圆角 */
  margin: 3px; /* 按键之间的间距 */
  padding: 16px 14px; /* 按键内边距，上下16px，左右14px */
  min-width: 40px; /* 按键最小宽度 */
  text-align: center; /* 按键文字居中 */
  font-size: 1rem; /* 按键字体大小 */
  box-shadow: 0 2px 4px #0004; /* 按键阴影 */
  user-select: none; /* 禁止选中按键文字 */
  transition: background 0.2s; /* 背景色变化动画 */
}

/* 按下按键时的样式，变色反馈 */
.key:active {
  background: #505156; /* 按下时背景色变深 */
}

/* 宽按键样式（如Tab、Shift等） */
.key.wide {
  min-width: 64px; /* 宽度加大 */
}

/* 更宽的按键样式（如Enter等） */
.key.wider {
  min-width: 80px; /* 更宽 */
  padding-left: 19px; /* 左内边距加大 */
  padding-right: 19px; /* 右内边距加大 */
}

/* 最宽的按键样式（如空格两侧的特殊键） */
.key.widest {
  min-width: 100px; /* 最宽 */
  padding-left: 28px; /* 左内边距加大 */
  padding-right: 28px; /* 右内边距加大 */
}

/* 空格键样式，超宽 */
.key.space {
  min-width: 377px; /* 空格键超宽 */
  background: #3a3b3f; /* 保持背景色一致 */
}

/* 删除键样式，左右内边距加大 */
.key.del {
padding-left: 25px; /* 左内边距加大 */
padding-right: 25px; /* 右内边距加大 */
}

/* Mac箭头按键区域容器，横向排列 */
.arrow-keys-mac {
display: flex; /* 横向排列 */
align-items: center; /* 垂直居中 */
margin-left: 12px; /* 左侧间距 */
}

/* 上下箭头纵向排列容器 */
.arrow-updown-mac {
display: flex; /* 弹性布局 */
flex-direction: column; /* 纵向排列 */
align-items: center; /* 居中 */
margin: 0 2px; /* 左右间距 */
}

/* 左右箭头高度与宽按键一致，内容居中 */
.arrow-keys-mac > .key.arrow {
min-width: 45px; /* 箭头键宽度 */
min-height: 50px; /* 箭头键高度 */
padding: 0; /* 去除内边距 */
font-size: 1.2rem; /* 字体稍大 */
margin: 0 2px; /* 间距 */
display: flex; /* 居中内容 */
align-items: center;
justify-content: center;
}

/* 上下箭头高度减半，内容居中 */
.arrow-updown-mac .key.arrow {
min-width: 45px; /* 宽度 */
min-height: 25px; /* 高度减半 */
padding: 0; /* 去除内边距 */
font-size: 1.2rem; /* 字体稍大 */
margin: 0 2px; /* 间距 */
display: flex; /* 居中内容 */
align-items: center;
justify-content: center;
}

/* 激活（高亮）按键样式，按下时高亮显示 */
.key.active {
  background: #27ae60 !important; /* 绿色高亮 */
  color: #fff; /* 白色字体 */
}

/* 悬停按键样式，发光效果 */
.key.hover {
box-shadow: 0 0 10px rgba(86, 255, 244, 0); /* 发光效果 */
}

/* 标题 h1 样式，居中显示并与键盘有间距 */
h1 {
position: static; /* 默认定位 */
display: block; /* 块级元素 */
width: 100%; /* 宽度100% */
text-align: center; /* 居中 */
margin: 0 0 32px 0; /* 下方留间距 */
font-size: 2.2rem; /* 字体大小 */
letter-spacing: 2px; /* 字母间距 */
font-weight: 600; /* 加粗 */
color: #fff; /* 白色字体 */
user-select: none; /* 禁止选中 */
}

/* 说明书区域样式 */
.manual {
color: #fff; /* 字体颜色 */
font-size: 1.1rem; /* 字体大小 */
text-align: left; /* 左对齐 */
padding: 10px 0 10px 0; /* 上下内边距10px */
letter-spacing: 1px; /* 字母间距 */
user-select: none; /* 禁止选中 */
margin-top: 10px; /* 上外边距 */
width: 100%; /* 宽度100% */
box-shadow: 0 2px 12px #0005; /* 阴影 */
}
.manual-title {
font-size: 1.2rem; /* 标题字体大小 */
font-weight: bold; /* 加粗 */
margin-bottom: 6px; /* 下外边距 */
text-align: left; /* 左对齐 */
}
.manual-desc, .manual-content {
text-align: left; /* 左对齐 */
max-width: none; /* 不限制最大宽度 */
margin-left: 0; /* 左外边距0 */
margin-right: 0; /* 右外边距0 */
}
.manual-desc {
margin-bottom: 10px; /* 下外边距 */
}

/* 小键盘主区：左右分栏布局 */
.numpad-flex {
display: flex; /* 横向排列，左侧数字区，右侧功能键 */
flex-direction: row; /* 横向排列 */
align-items: flex-start; /* 顶部对齐 */
}

/* 小键盘左侧数字区：纵向排列多行 */
.numpad-left {
display: flex; /* 弹性布局 */
flex-direction: column; /* 纵向排列多行 */
}

/* 小键盘右侧功能键区（+、Enter）：纵向排列 */
.numpad-right {
display: flex; /* 弹性布局 */
flex-direction: column; /* 纵向排列 */
margin-left: 0px; /* 与左侧数字区的间距（可调节） */
height: 100%; /* 占满父容器高度 */
justify-content: flex-start; /* 顶部对齐 */
}

/* 小键盘的 + 按钮样式：竖向长键 */
.key.numpad_add {
min-width: 40px; /* 最小宽度，与数字键一致 */
min-height: 84px; /* 占两行高度 */
background: #3a3b3f; /* 背景色 */
display: flex; /* 内容居中 */
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
margin-bottom: 8px; /* 与下方Enter键间距 */
}

/* 小键盘的 Enter 按钮样式：竖向长键 */
.key.numpad_enter {
min-width: 40px; /* 最小宽度，与数字键一致 */
min-height: 84px; /* 占两行高度 */
background: #3a3b3f; /* 背景色 */
display: flex; /* 内容居中 */
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
}

/* 小键盘 0 与 . 按钮加宽 */
.key.decimal_0 {
min-width: 77px; /* 宽度配置，使0和.更宽 */
background: #3a3b3f; /* 保持背景色一致 */
}

/* 小键盘检测专用外层容器，便于独立布局和样式调整 */
.numpad-container {
width: 100%; /* 宽度100%，可根据需要调整 */
display: flex; /* 弹性布局 */
flex-direction: column; /* 垂直排列内容 */
align-items: center; /* 内容居中 */
justify-content: center; /* 垂直居中 */
/* 可根据需要添加更多样式 */
min-width: 600px; /* 设置页面最小宽度为1200px */
min-height: 300px; /* 设置页面最小高度为600px */
}