/* ============================================================
   style.css —— 个税计算器的"衣服"
   CSS语法就一句话：先点名，再下指令。
   例：button { color: red; } = 点到所有button，把字变红。
   点名三种方式：标签名(body) / .class工牌(.container) / #id工牌(#calcBtn)
   ============================================================ */

/* --- ① 全局规则：管住整个页面 --- */
* {
  box-sizing: border-box;   /* 宽度说多少就是多少，内衬往里挤，盒子不被撑破（新手必踩坑） */
}

body {
  background: #f5f6f8;      /* 浅灰底色，衬托白色卡片 */
  color: #333;              /* 深灰字，比纯黑看着柔和 */
  font-family: system-ui, "Microsoft YaHei", sans-serif;  /* 用系统自带字体，不用下载 */
  line-height: 1.6;         /* 行距1.6倍，读着不挤 */
  margin: 0;                /* 去掉body四周自带的白边 */
}

/* --- ② 大容器：把所有内容装进一张白色圆角卡片 --- */
.container {
  max-width: 480px;         /* 卡片最宽480px：电脑上居中一条，不会摊成大饼 */
  margin: 24px auto;        /* 上下留24px；左右auto=自动平分=水平居中 */
  background: #fff;         /* 白卡片 */
  border-radius: 12px;      /* 圆角12px */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);  /* 底下一点阴影，卡片"浮"起来 */
  padding: 24px 20px;       /* 卡片内衬：上下24、左右20，内容不贴边 */
}

/* --- ③ 标题区 --- */
h1 {
  text-align: center;       /* 居中 */
  font-size: 24px;
  margin: 0 0 4px;          /* 上0 下4：跟副标题挨近点 */
}

.intro {
  text-align: center;
  color: #888;              /* 浅灰当配角 */
  font-size: 14px;
  margin: 0 0 20px;
}

/* --- ④ 输入区：名牌 + 输入框 --- */
.inputs label {
  display: block;           /* label独占一行，才能站在输入框头顶上 */
  font-size: 14px;
  font-weight: 600;         /* 半粗 */
  margin: 12px 0 4px;       /* 上面留12px，跟上一组分开 */
}

.inputs input {
  width: 100%;              /* 框跟卡片同宽 */
  padding: 10px 12px;       /* 内衬：打进去的字不贴边 */
  border: 1px solid #d9d9d9;/* 细灰边框 */
  border-radius: 8px;       /* 圆角框 */
  font-size: 16px;          /* 16px以上，手机上点进输入框页面才不会自动放大 */
}

/* :focus = "正被点击的那个"：给它一圈蓝光，提示"你在填这里" */
.inputs input:focus {
  outline: none;            /* 先去掉浏览器默认的黑框线 */
  border-color: #2563eb;    /* 边框变蓝 */
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);  /* 外面再罩一圈淡蓝光晕 */
}

/* --- ⑤ 按钮 --- */
#calcBtn {
  width: 100%;
  margin-top: 20px;
  padding: 12px;            /* 上下左右都垫12px，按钮厚实好点 */
  background: #2563eb;      /* 主色：蓝 */
  color: #fff;              /* 白字 */
  font-size: 16px;
  font-weight: 600;
  border: none;             /* 去掉按钮自带的灰边 */
  border-radius: 8px;
  cursor: pointer;          /* 鼠标移上去变小手，暗示"能点" */
}

/* :hover = "鼠标悬停时"：颜色加深一点，点了有反馈感 */
#calcBtn:hover {
  background: #1d4ed8;
}

/* --- ⑥ 结果区：淡蓝小面板 --- */
.result {
  margin-top: 20px;
  padding: 16px;
  background: #f0f6ff;      /* 淡蓝底，跟输入区分开 */
  border-radius: 8px;
}

.result h2 {
  font-size: 16px;
  margin: 0 0 8px;
}

.result p {
  margin: 6px 0;            /* 每行结果之间留点呼吸 */
  font-size: 15px;
}

.result span {
  font-weight: 700;         /* 数字加粗 */
  color: #2563eb;           /* 数字标蓝：一眼看到重点 */
}

/* --- ⑦ 参考表 --- */
.reference {
  margin-top: 24px;
}

.reference h2 {
  font-size: 16px;
  margin: 0 0 8px;
}

.reference table {
  width: 100%;
  border-collapse: collapse;   /* 相邻单元格边框合并，不然会出现双线 */
  font-size: 13px;
}

/* "th, td"逗号=一次点名多个：表头格和普通格一起下指令 */
.reference th, .reference td {
  border-bottom: 1px solid #eee;  /* 只要横线不要竖线，表格清爽 */
  padding: 6px 4px;
  text-align: left;
}

.reference th {
  background: #fafafa;      /* 表头垫一层浅灰 */
  font-size: 12px;
  color: #666;
}

/* nth-child(3) = 每行的第3个格子：级数/税率/扣除数这三列靠右对齐，更像数字表 */
.reference th:nth-child(1), .reference td:nth-child(1),
.reference th:nth-child(3), .reference td:nth-child(3),
.reference th:nth-child(4), .reference td:nth-child(4) {
  text-align: right;
}

.note {
  font-size: 13px;
  color: #888;
  line-height: 1.8;         /* 小字多留行距 */
  margin: 0;
}

/* --- ⑧ 分段明细表（长在结果面板里的小表） --- */
#bracketDetail {
  margin-top: 12px;
}

#bracketDetail h3 {
  font-size: 14px;
  margin: 0 0 6px;
}

#bracketDetail table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  background: #fff;         /* 淡蓝面板里垫张白纸 */
  border-radius: 8px;
}

#bracketDetail th, #bracketDetail td {
  border-bottom: 1px solid #eee;
  padding: 6px 8px;
  text-align: right;        /* 数字列靠右，更像账本 */
}

#bracketDetail th:first-child, #bracketDetail td:first-child {
  text-align: left;         /* 第一列是文字区间，靠左 */
}

#bracketDetail .total td {
  font-weight: 700;         /* 合计行加粗 */
  border-bottom: none;      /* 最后一行不要底线 */
}

/* --- ⑨ 警示条：红字提示；:empty=盒子空着时自动隐身 --- */
.warn {
  color: #d64545;
  font-size: 14px;
  margin: 8px 0 0;
}

.warn:empty {
  display: none;
}