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

* {
  box-sizing: border-box;
}

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

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

body {
  min-height: 100vh;
  overflow-x: hidden;

  color: var(--text);

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


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

.vocabulary-page {
  position: relative;

  display: flex;
  flex-direction: column;

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

  padding:
    clamp(26px, 4.5vh, 52px)
    clamp(30px, 6vw, 100px)
    clamp(32px, 5vh, 58px);

  overflow: hidden;

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


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

  position: absolute;
  inset: 0;

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

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


/* 所有内容位于背景上方 */
.page-header,
.level-introduction,
.level-menu {
  position: relative;
  z-index: 2;
}


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

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

  width: 100%;
  margin-bottom: clamp(22px, 3.5vh, 38px);
}


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

  padding: 8px 0;

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

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

  text-shadow:
    0 2px 10px rgba(0, 11, 30, 0.42);

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

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


/* 页面标题放在右侧深蓝区域 */
.page-heading {
  justify-self: end;

  width: min(700px, 59vw);

  padding-right: clamp(0px, 3vw, 45px);

  text-align: left;
}

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

  color: var(--text-faint);

  font-size: 0.7rem;
  letter-spacing: 0.36em;

  text-shadow:
    0 2px 10px rgba(0, 10, 28, 0.35);
}

.page-heading h1 {
  margin: 0;

  color: var(--text-strong);

  font-size: clamp(3.3rem, 5.3vw, 5.8rem);
  font-weight: 500;
  line-height: 1;

  letter-spacing: 0.17em;
  text-indent: 0.17em;

  text-shadow:
    0 2px 7px rgba(0, 12, 32, 0.42),
    0 10px 30px rgba(0, 10, 28, 0.3);
}

.page-description {
  margin: 15px 0 0;

  color: var(--text-muted);

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

  font-size: 0.76rem;
  letter-spacing: 0.25em;

  text-shadow:
    0 2px 10px rgba(0, 10, 28, 0.35);
}


/* =========================
   等级提示
========================= */

.level-introduction {
  align-self: flex-end;

  width: min(700px, 59vw);

  margin:
    clamp(10px, 2vh, 22px)
    clamp(0px, 3vw, 45px)
    17px
    0;
}

.introduction-japanese {
  margin: 0;

  color: var(--text);

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

  text-shadow:
    0 2px 10px rgba(0, 10, 28, 0.38);
}

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

  color: var(--text-faint);

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

  font-size: 0.7rem;
  letter-spacing: 0.17em;

  text-shadow:
    0 2px 10px rgba(0, 10, 28, 0.34);
}


/* =========================
   N5—N1目录
========================= */

.level-menu {
  align-self: flex-end;

  width: min(700px, 59vw);

  margin-right: clamp(0px, 3vw, 45px);
}


/* 每一个等级 */
.level-item {
  display: grid;

  grid-template-columns:
    55px
    88px
    1fr
    38px;

  align-items: center;

  min-height: clamp(74px, 8.6vh, 90px);

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

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

  text-shadow:
    0 2px 10px rgba(0, 10, 28, 0.34);

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

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

.level-item:hover {
  padding-left: 16px;
  padding-right: 8px;

  color: var(--text-strong);

  background-color:
    var(--border);
}


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

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

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


/* N5—N1 */
.level-code {
  color: var(--text-strong);

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

  font-size: clamp(1.55rem, 2.1vw, 2.2rem);
  font-weight: 500;
  letter-spacing: 0.05em;
}


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

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


/* 日语标题 */
.level-title {
  min-width: 220px;

  font-size: clamp(1.4rem, 2.25vw, 2.25rem);
  font-weight: 400;
  line-height: 1.2;

  letter-spacing: 0.11em;
}


/* 中文说明 */
.level-translation {
  color: var(--text-faint);

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

  font-size: clamp(0.7rem, 0.86vw, 0.86rem);
  letter-spacing: 0.15em;
}


/* 箭头 */
.level-arrow {
  justify-self: end;

  color: var(--text-faint);

  font-family:
    Arial,
    sans-serif;

  font-size: 1.2rem;

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

.level-item:hover .level-arrow {
  color: var(--text-strong);
  transform: translateX(6px);
}


/* =========================
   平板与较窄窗口
========================= */

@media (max-width: 1050px) {
  .page-heading,
  .level-introduction,
  .level-menu {
    width: 68vw;
  }

  .page-header {
    grid-template-columns: 110px 1fr;
  }

  .level-item {
    grid-template-columns:
      48px
      76px
      1fr
      32px;
  }

  .level-title {
    min-width: 190px;
  }
}


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

@media (max-width: 700px) {
  .vocabulary-page {
    padding:
      23px
      8vw
      32px;

    /*
      横图在手机上会裁切，
      让画面尽量保留深蓝海面。
    */
    background-position: 57% center;
  }

  /*
    手机目录会覆盖更多背景，
    因此整体稍微加深。
  */
  .vocabulary-page::before {
    background:
      rgba(255, 255, 255, 0.7);
  }

  .page-header {
    display: block;
  }

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

  .page-heading,
  .level-introduction,
  .level-menu {
    width: 100%;
    padding-right: 0;
    margin-right: 0;
  }

  .page-heading h1 {
    font-size: clamp(2.8rem, 13vw, 4.5rem);

    letter-spacing: 0.13em;
    text-indent: 0.13em;
  }

  .level-introduction {
    margin-top: 38px;
  }

  .level-item {
    grid-template-columns:
      38px
      55px
      1fr
      22px;

    min-height: 89px;
  }

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

  .level-code {
    font-size: 1.3rem;
  }

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

    gap: 6px;
  }

  .level-title {
    min-width: 0;

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

  .level-translation {
    font-size: 0.65rem;
  }

  .level-arrow {
    font-size: 0.95rem;
  }
}