/* =========================
   基础设置
========================= */

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
}

html {
  background: var(--page-bg);
}

body {
  min-height: 100vh;

  color: var(--text);

  font-family:
    "Yu Mincho",
    "Hiragino Mincho ProN",
    "Noto Serif JP",
    "MS Mincho",
    "KaiTi",
    "STKaiti",
    "Microsoft YaHei",
    serif;
}


/* =========================
   页面背景
========================= */

.n5-page {
  position: relative;

  width: 100%;
  min-height: 100vh;

  padding:
    clamp(26px, 4.5vh, 52px)
    clamp(28px, 6vw, 100px)
    clamp(50px, 7vh, 86px);

  overflow-x: hidden;

  background-color: var(--page-bg);
}


/* 背景层次层 */
.n5-page::before {
  content: "";

  position: fixed;
  inset: 0;

  z-index: 0;
  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      var(--border) 100%
    );
}


/* 内容在背景之上 */
.page-header,
.unit-area {
  position: relative;
  z-index: 2;
}


/* =========================
   页面顶部
========================= */

.page-header {
  display: grid;
  grid-template-columns: 160px 1fr 160px;
  align-items: start;

  width: 100%;
  margin-bottom: clamp(34px, 6vh, 70px);
}


/* 返回上一页 */
.back-link {
  justify-self: start;

  padding: 8px 0;

  color: var(--text);
  text-decoration: none;

  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;

  transition:
    color 0.35s ease,
    transform 0.35s ease;
}

.back-link:hover {
  color: var(--text-strong);
  transform: translateX(-4px);
}


/* 页面标题 */
.page-heading {
  justify-self: center;
  text-align: center;
}

.site-name {
  margin: 0 0 13px;

  color: var(--text-muted);

  font-size: 0.7rem;
  letter-spacing: 0.3em;
}

.page-heading h1 {
  margin: 0;

  color: var(--text-strong);

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size: clamp(4rem, 7vw, 7.2rem);
  font-weight: 400;
  line-height: 0.92;

  letter-spacing: 0.07em;

  text-shadow:
    0 2px 12px var(--border);
}

.page-subtitle {
  margin: 20px 0 0;

  color: var(--text);

  font-size: clamp(1.2rem, 1.8vw, 1.65rem);
  letter-spacing: 0.2em;
}

.page-translation {
  margin: 10px 0 0;

  color: var(--text-muted);

  font-family:
    "KaiTi",
    "STKaiti",
    "Microsoft YaHei",
    "PingFang SC",
    sans-serif;

  font-size: 0.72rem;
  letter-spacing: 0.2em;
}


/* =========================
   单元目录整体区域
========================= */

.unit-area {
  width: min(980px, 84vw);
  margin: 0 auto;
}


/* 页面说明 */
.unit-introduction {
  margin-bottom: 22px;
}

.introduction-japanese {
  margin: 0;

  color: var(--text);

  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.22em;
}

.introduction-chinese {
  margin: 8px 0 0;

  color: var(--text-muted);

  font-family:
    "KaiTi",
    "STKaiti",
    "Microsoft YaHei",
    "PingFang SC",
    sans-serif;

  font-size: 0.7rem;
  letter-spacing: 0.16em;
}


/* =========================
   五个可展开分组
========================= */

.unit-groups {
  border-bottom:
    1px solid var(--border);
}

.unit-group {
  border-top:
    1px solid var(--border);
}


/* 删除浏览器默认三角图标 */
.group-summary {
  list-style: none;
}

.group-summary::-webkit-details-marker {
  display: none;
}


/* 每组标题 */
.group-summary {
  display: grid;

  grid-template-columns:
    75px
    1fr
    auto
    36px;

  align-items: center;

  min-height: clamp(100px, 11vh, 126px);

  padding: 0 8px;

  color: var(--text);

  cursor: pointer;

  transition:
    padding-left 0.4s ease,
    padding-right 0.4s ease,
    background-color 0.4s ease;
}

.group-summary:hover {
  padding-left: 18px;
  padding-right: 14px;

  background-color:
    rgba(255, 255, 255, 0.6);
}


/* 01—05 */
.group-number {
  color: var(--text-muted);

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.12em;
}


/* 单元范围和中文说明 */
.group-main {
  display: flex;
  align-items: baseline;

  gap: clamp(22px, 3vw, 48px);
}

.group-range {
  min-width: 180px;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size: clamp(1.45rem, 2.3vw, 2.25rem);
  font-weight: 400;
  letter-spacing: 0.04em;
}

.group-description {
  color: var(--text-muted);

  font-family:
    "KaiTi",
    "STKaiti",
    "Microsoft YaHei",
    "PingFang SC",
    sans-serif;

  font-size: 0.76rem;
  letter-spacing: 0.16em;
}


/* 每组右侧日语说明 */
.group-japanese {
  margin-right: 28px;

  color: var(--text-muted);

  font-size: 0.84rem;
  letter-spacing: 0.16em;
}


/* 加号 */
.group-toggle {
  justify-self: end;

  color: var(--text-muted);

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size: 1.35rem;
  font-weight: 300;

  transition:
    transform 0.35s ease,
    color 0.35s ease;
}


/* 展开时加号旋转 */
.unit-group[open] .group-toggle {
  color: var(--text-strong);
  transform: rotate(45deg);
}


/* =========================
   展开后的具体单元
========================= */

.unit-list {
  padding:
    0
    22px
    24px
    74px;
}


/* 每一个具体单元 */
.unit-item {
  display: grid;

  grid-template-columns:
    100px
    1fr
    72px;

  align-items: center;

  min-height: 76px;

  border-top:
    1px solid var(--border);

  color: var(--text);
  text-decoration: none;

  transition:
    padding-left 0.35s ease,
    background-color 0.35s ease;
}

.unit-item:last-child {
  border-bottom:
    1px solid var(--border);
}

.unit-item:hover {
  padding-left: 12px;

  background-color:
    rgba(255, 255, 255, 0.6);
}


/* Unit编号 */
.unit-number {
  color: var(--text-muted);

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}


/* 日语标题和中文 */
.unit-text {
  display: flex;
  align-items: baseline;

  gap: clamp(18px, 2.5vw, 38px);
}

.unit-title {
  min-width: 240px;

  font-size: clamp(1.05rem, 1.7vw, 1.45rem);
  letter-spacing: 0.12em;
}

.unit-translation {
  color: var(--text-muted);

  font-family:
    "KaiTi",
    "STKaiti",
    "Microsoft YaHei",
    "PingFang SC",
    sans-serif;

  font-size: 0.7rem;
  letter-spacing: 0.14em;
}


/* 准备中 */
.unit-status {
  justify-self: end;

  color: var(--text-muted);

  font-size: 0.66rem;
  letter-spacing: 0.14em;
}


/* =========================
   平板适配
========================= */

@media (max-width: 1000px) {
  .page-header {
    grid-template-columns: 110px 1fr 110px;
  }

  .unit-area {
    width: 90vw;
  }

  .group-summary {
    grid-template-columns:
      58px
      1fr
      auto
      30px;
  }

  .group-japanese {
    margin-right: 16px;
  }

  .unit-list {
    padding-left: 58px;
  }

  .unit-item {
    grid-template-columns:
      88px
      1fr
      65px;
  }

  .unit-title {
    min-width: 200px;
  }
}


/* =========================
   手机适配
========================= */

@media (max-width: 700px) {
  .n5-page {
    padding:
      23px
      7vw
      46px;

    background-position: 38% top;
    background-attachment: scroll;
  }

  .n5-page::before {
    position: absolute;

    background:
      rgba(255, 255, 255, 0.7);
  }


  /* 手机顶部 */
  .page-header {
    display: block;
    margin-bottom: 42px;
  }

  .back-link {
    display: inline-block;
    margin-bottom: 30px;
  }

  .page-heading h1 {
    font-size: clamp(4rem, 20vw, 6.5rem);
  }

  .page-subtitle {
    font-size: 1.1rem;
  }


  /* 手机目录宽度 */
  .unit-area {
    width: 100%;
  }


  /* 手机分组标题 */
  .group-summary {
    grid-template-columns:
      38px
      1fr
      24px;

    min-height: 94px;
    padding: 0;
  }

  .group-number {
    font-size: 0.68rem;
  }

  .group-main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 8px;
  }

  .group-range {
    min-width: 0;

    font-size: 1.4rem;
  }

  .group-description {
    font-size: 0.67rem;
  }

  .group-japanese {
    display: none;
  }

  .group-toggle {
    font-size: 1.15rem;
  }


  /* 手机具体单元 */
  .unit-list {
    padding:
      0
      0
      20px
      36px;
  }

  .unit-item {
    grid-template-columns:
      72px
      1fr;

    min-height: 82px;
  }

  .unit-number {
    font-size: 0.66rem;
  }

  .unit-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 7px;
  }

  .unit-title {
    min-width: 0;

    font-size: 1.03rem;
    letter-spacing: 0.09em;
  }

  .unit-translation {
    font-size: 0.64rem;
  }

  .unit-status {
    display: none;
  }
}