@charset "UTF-8";
/* /assets/css/custom.css */
@font-face {
  font-family: 'HuWenMingChaoTi';
  src: url("/fonts/HuWenMingChaoTi.woff2") format("woff2"), url("/fonts/HuWenMingChaoTi.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap; }

body {
  /* 覆蓋字體 */
  --font-primary: 'HuWenMingChaoTi', Verdana, sans-serif;
  /* 新增：覆蓋主要字體大小 (原默認為 1em) */
  /* 可以試試 1.1em, 1.15em, 1.2em 或 17px, 18px 等 */
  --font-size-primary: 1.15em;
  /* 將這行的值調整到你滿意的大小 */ }

/* center any element with .center-image */
.center-image {
  display: block;
  margin: 0 auto; }

img.img-narrow {
  width: 100%;
  max-width: 420px;
  display: block;
  margin: 1.5rem auto; }

.dictation-blank {
  display: inline-block;
  width: var(--dictation-blank-ch, 12ch);
  max-width: 42vw;
  height: 0.95em;
  border-bottom: 0.08em solid currentColor;
  margin: 0 0.08em;
  vertical-align: -0.08em; }

@media (max-width: 480px) {
  .dictation-blank {
    max-width: 34vw; } }

/* 避免日期換行 */
ul.blog-posts li span:first-child {
  white-space: nowrap;
  /* 一行到底 */ }

/* 若仍擠不下，再酌量放寬固定寬度 */
@media (min-width: 640px) {
  ul.blog-posts li span:first-child {
    flex: 0 0 140px; } }

/* ⬇︎手機寬度時，給日期和標題之間加間距 */
@media (max-width: 639px) {
  ul.blog-posts li span:first-child {
    margin-right: 0.5em;
    /* 想大一點就調數值 */ } }

/* 可選：若需調整標題大小，可參考以下示例
   h1 { font-size: 2.2rem; }
   h2 { font-size: 1.8rem; }
*/
/* === Image Lightbox (Click to expand) === */
img:not(.no-zoom) {
  cursor: zoom-in;
  transition: transform 0.2s ease, box-shadow 0.2s ease; }

/* Subtle hover hint (desktop only) */
@media (hover: hover) {
  img:not(.no-zoom):hover {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } }

img.no-zoom {
  cursor: default; }

/* Lightbox overlay */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  cursor: zoom-out;
  padding: 20px;
  box-sizing: border-box; }

.lightbox-overlay.active {
  opacity: 1;
  visibility: visible; }

.lightbox-overlay img {
  max-width: 95vw;
  max-height: 95vh;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  transform: scale(0.9);
  transition: transform 0.3s ease;
  cursor: default; }

.lightbox-overlay.active img {
  transform: scale(1); }

/* Close hint */
.lightbox-close {
  position: absolute;
  top: 20px;
  right: 24px;
  color: #fff;
  font-size: 32px;
  font-weight: 300;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s ease;
  line-height: 1; }

.lightbox-close:hover {
  opacity: 1; }

/* === Kawaii Peeking Cat (Back-to-top) === */
.kawaii-cat {
  --cat-body: #6f747c;
  --cat-shadow: #5a5f67;
  --cat-stripe: #3e434b;
  --cat-ear: #f4bcb6;
  --cat-nose: #f2a59a;
  --cat-eye: #30353c;
  --tail-duration: 1.8s;
  position: fixed;
  left: 16px;
  bottom: 14px;
  width: 96px;
  height: 78px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px) scale(0.96);
  transition: opacity 0.24s ease, transform 0.24s ease;
  pointer-events: none;
  z-index: 1000; }

.kawaii-cat.show {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto; }

@media (max-width: 640px) {
  .kawaii-cat {
    left: 10px;
    bottom: 10px;
    width: 88px;
    height: 72px; } }

.kawaii-cat .cat-shell {
  position: relative;
  width: 100%;
  height: 100%;
  font-size: 1px;
  filter: drop-shadow(0 4px 7px rgba(0, 0, 0, 0.18)); }

.kawaii-cat .cat-shell * {
  position: absolute;
  box-sizing: border-box; }

.kawaii-cat .tail {
  right: 10em;
  bottom: 18em;
  width: 18em;
  height: 40em;
  border-radius: 10em 10em 8em 8em;
  border: 1px solid rgba(38, 42, 49, 0.35);
  background: linear-gradient(to bottom, var(--cat-body) 0 7em, var(--cat-stripe) 7em 12em, var(--cat-body) 12em 18em, var(--cat-stripe) 18em 23em, var(--cat-body) 23em 29em, var(--cat-stripe) 29em 34em, var(--cat-body) 34em 100%);
  transform-origin: 50% 94%;
  transform: rotate(10deg);
  box-shadow: inset 0 -2em 0 rgba(0, 0, 0, 0.12);
  animation: tailWag var(--tail-duration) ease-in-out infinite; }

.kawaii-cat .tail::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.12), transparent 48%); }

.kawaii-cat .body {
  left: 50%;
  bottom: 10em;
  width: 66em;
  height: 30em;
  transform: translateX(-50%);
  border-radius: 48% 48% 40% 40% / 75% 75% 35% 35%;
  border: 1px solid rgba(38, 42, 49, 0.35);
  background: linear-gradient(180deg, #7b8089 0%, var(--cat-body) 72%);
  box-shadow: 0 4em 8em rgba(0, 0, 0, 0.16); }

.kawaii-cat .ear {
  top: -7em;
  width: 17em;
  height: 17em;
  border-radius: 48% 48% 20% 20%;
  border: 1px solid rgba(38, 42, 49, 0.35);
  background: var(--cat-body); }

.kawaii-cat .ear::after {
  content: '';
  top: 4em;
  left: 3em;
  width: 10em;
  height: 9em;
  border-radius: 50%;
  background: var(--cat-ear); }

.kawaii-cat .ear-l {
  left: 9em;
  transform: rotate(-10deg); }

.kawaii-cat .ear-r {
  right: 9em;
  transform: rotate(10deg); }

.kawaii-cat .stripe {
  top: 2em;
  width: 4em;
  height: 10em;
  border-radius: 3em;
  background: var(--cat-stripe);
  opacity: 0.88; }

.kawaii-cat .stripe-l {
  left: 25em;
  transform: rotate(-12deg); }

.kawaii-cat .stripe-c {
  left: 31em; }

.kawaii-cat .stripe-r {
  left: 37em;
  transform: rotate(12deg); }

.kawaii-cat .eye {
  top: 14em;
  width: 6.8em;
  height: 6.8em;
  border-radius: 50%;
  background: var(--cat-eye);
  transition: transform 0.14s ease; }

.kawaii-cat .eye::after {
  content: '';
  top: 1.2em;
  left: 1.4em;
  width: 1.8em;
  height: 1.8em;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  transition: opacity 0.12s ease; }

.kawaii-cat .eye-l {
  left: 19em; }

.kawaii-cat .eye-r {
  right: 19em; }

.kawaii-cat .nose {
  top: 20em;
  left: 50%;
  width: 7em;
  height: 4.5em;
  transform: translateX(-50%);
  border-radius: 50% 50% 65% 65%;
  background: var(--cat-nose); }

.kawaii-cat .paw {
  bottom: -8em;
  width: 22em;
  height: 14em;
  border-radius: 48% 48% 40% 40%;
  border: 1px solid rgba(38, 42, 49, 0.35);
  background: var(--cat-shadow);
  box-shadow: inset 0 -2em 0 rgba(0, 0, 0, 0.12); }

.kawaii-cat .paw::after {
  content: '';
  left: 4.5em;
  right: 4.5em;
  top: 8em;
  height: 1.1em;
  border-radius: 1em;
  background: rgba(47, 52, 60, 0.65); }

.kawaii-cat .paw-l {
  left: 4em; }

.kawaii-cat .paw-r {
  right: 4em; }

.kawaii-cat.is-blink .eye,
.kawaii-cat.is-wink-left .eye-l,
.kawaii-cat.is-wink-right .eye-r {
  transform: scaleY(0.14) translateY(7px); }

.kawaii-cat.is-blink .eye::after,
.kawaii-cat.is-wink-left .eye-l::after,
.kawaii-cat.is-wink-right .eye-r::after {
  opacity: 0; }

.kawaii-cat.is-hop {
  animation: catHop 0.32s ease-out; }

.kawaii-cat:focus-visible {
  outline: 2px solid var(--link-color);
  outline-offset: 4px;
  border-radius: 10px; }

@keyframes tailWag {
  0% {
    transform: rotate(9deg); }
  50% {
    transform: rotate(18deg); }
  100% {
    transform: rotate(9deg); } }

@keyframes catHop {
  0% {
    transform: translateY(0) scale(1); }
  45% {
    transform: translateY(-10px) scale(1.03); }
  100% {
    transform: translateY(0) scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .kawaii-cat,
  .kawaii-cat * {
    animation: none !important;
    transition: none !important; } }

@media print {
  .kawaii-cat {
    display: none !important; } }

.pagination {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  align-items: center; }

.pagination a {
  padding: .1rem .4rem;
  text-decoration: none;
  border-radius: .25rem; }

.pagination a.active {
  font-weight: 700;
  text-decoration: underline; }

.pagination .dots {
  opacity: .6; }

@media (max-width: 600px) {
  .pagination a {
    display: none; }
  .pagination a.active,
  .pagination .prev,
  .pagination .next {
    display: inline-block; } }

/* 让图片永不溢出容器 */
.post-content img,
article img {
  max-width: 100%;
  height: auto; }

/* 手机端：除了 Prev/Next/当前，还显示首末页锚点 */
@media (max-width: 600px) {
  .pagination a {
    display: none; }
  .pagination a.active,
  .pagination .prev,
  .pagination .next,
  .pagination a:first-of-type,
  .pagination a:last-of-type {
    /* 末页 */
    display: inline-block; } }

/* Tag links are no longer emitted anywhere: taxonomies are disabled in
   hugo.toml, showTags is false, and the list template no longer renders a tag
   cloud. The catch-all rules that used to live here matched
   a[href*="/tags/"] -- a *substring* match, so any article link to an external
   URL containing /tags/ would have been silently hidden, and
   :has(> a[href^="/tags/"]) would have hidden the whole surrounding block. */
/* Font is declared at top of file - removed duplicate declaration */
/* 为 TOC 中的嵌套列表（第二级及更深）添加左侧内边距（实现缩进） */
#TableOfContents ul ul {
  padding-left: 20px;
  /* 你可以调整这个值，比如 1.5em 或 25px */ }

/* 可选：为更深层级添加额外缩进 */
/*
  #TableOfContents ul ul ul {
    padding-left: 20px; /* 再增加 20px 缩进 */
/* } */
/* 可选：调整列表项之间的间距 */
#TableOfContents li {
  margin-bottom: 4px;
  /* 调整垂直间距 */ }

/* === Home Manuscript Prototype === */
/* The .home-kawaii-cat / .home-directory-stage / .manu-token rules that lived
   here were dead: their script (static/js/home-manuscript.js) was referenced
   nowhere and none of those classes appeared in any built page. The .home-shell
   rules below are live -- they style the /posts/ hero. The back-to-top cat is
   .kawaii-cat, further up; do not confuse the two. */
.home-shell {
  position: relative;
  display: grid;
  gap: 30px;
  padding-bottom: 24px; }

/* /posts/ 列表頁：頭像與題詞先呈現，再自動隱藏，騰出文章列表。 */
.home-shell--posts {
  overflow: hidden;
  transform-origin: top center;
  animation: postsHeroReveal 3.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  will-change: max-height, opacity; }

@keyframes postsHeroReveal {
  0%,
  60% {
    opacity: 1;
    max-height: 460px;
    padding-bottom: 24px;
    transform: translateY(0); }
  100% {
    opacity: 0;
    max-height: 0;
    padding-bottom: 0;
    transform: translateY(-10px);
    pointer-events: none; } }

/* 偏好減少動態的訪客：直接收起，避免長期阻擋列表。 */
@media (prefers-reduced-motion: reduce) {
  .home-shell--posts {
    animation: none;
    display: none; } }

.home-shell__hero {
  display: grid;
  justify-items: center;
  gap: 18px;
  text-align: center;
  padding: 10px 0 0; }

.home-shell__portrait-wrap {
  width: 24vw;
  min-width: 116px;
  max-width: 168px; }

.home-shell__portrait {
  width: 100%;
  border: 0;
  border-radius: 999px;
  box-shadow: 0 18px 34px rgba(88, 67, 39, 0.14); }

.home-shell__intro {
  display: grid;
  gap: 0.3rem;
  justify-items: center; }

.home-shell__intro-line {
  margin: 0;
  font-size: clamp(1.02rem, 2.05vw, 1.22rem);
  line-height: 1.72;
  letter-spacing: 0.04em; }

.home-shell__intro-line--final {
  font-size: clamp(1.18rem, 2.4vw, 1.5rem);
  letter-spacing: 0.18em; }

@keyframes homeTailWag {
  0% {
    transform: rotate(7deg); }
  50% {
    transform: rotate(18deg); }
  100% {
    transform: rotate(7deg); } }

@keyframes homeCatBoop {
  0% {
    transform: translateY(0) scale(1); }
  36% {
    transform: translateY(-5px) scale(1.045, 0.96); }
  62% {
    transform: translateY(1px) scale(0.982, 1.02); }
  100% {
    transform: translateY(0) scale(1); } }

@keyframes homeCatStretch {
  0% {
    transform: translateY(0) scale(1); }
  35% {
    transform: translateY(1px) scale(1.04, 0.97); }
  68% {
    transform: translateY(0) scale(1.02, 0.985); }
  100% {
    transform: translateY(0) scale(1); } }

@keyframes homeCatRoll {
  0% {
    transform: rotate(0deg) translateY(0) scale(1); }
  28% {
    transform: rotate(-8deg) translateY(1px) scale(1.02, 0.99); }
  62% {
    transform: rotate(-13deg) translateY(2px) scale(1.035, 0.972); }
  100% {
    transform: rotate(0deg) translateY(0) scale(1); } }

@keyframes homeCatPeek {
  0% {
    transform: rotate(0deg) translateY(0) scale(1); }
  40% {
    transform: rotate(5deg) translateY(-1px) scale(1.01); }
  100% {
    transform: rotate(0deg) translateY(0) scale(1); } }

@media (max-width: 760px) {
  .home-shell {
    gap: 20px; }
  .home-shell__portrait-wrap {
    width: 34vw;
    max-width: 148px; }
  .home-shell__intro-line {
    max-width: 18em; }
  .home-shell__intro-line--final {
    letter-spacing: 0.12em; } }

/* ===== 媒體與附件嵌入（render-link hook）===== */
.media-embed {
  margin: 1.4em 0; }

.media-embed__cap {
  margin-top: 0.4em;
  text-align: center;
  font-size: var(--font-size-secondary);
  color: var(--caption-text-color); }

.media-embed__cap a {
  color: inherit; }

.media-audio__player {
  display: block;
  width: 100%; }

.media-video__player {
  display: block;
  width: 100%;
  max-height: 70vh;
  background: #000;
  border-radius: 8px; }

.media-pdf__frame,
.media-text__frame,
.media-doc__frame {
  width: 100%;
  border: 1px solid var(--img-border-color);
  border-radius: 8px;
  background: var(--body-bg-color); }

.media-pdf__frame {
  height: 80vh; }

.media-text__frame {
  height: 360px; }

.media-doc__frame {
  height: 70vh;
  margin-top: 0.6em; }

.media-image__img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  border: 1px solid var(--img-border-color);
  border-radius: 6px; }

.attachment-card {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin: 1.4em 0;
  padding: 0.7em 0.9em;
  border: 1px solid var(--img-border-color);
  border-radius: 10px;
  background: var(--code-bg-color); }

.attachment-card__icon {
  font-size: 1.4em;
  line-height: 1; }

.attachment-card__name {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere; }

.attachment-card__ext {
  flex: none;
  padding: 0.15em 0.5em;
  border-radius: 6px;
  font-family: var(--font-secondary);
  font-size: 0.72em;
  background: var(--table-th-bg-color);
  color: var(--bold-text-color); }

.attachment-card__dl {
  flex: none;
  white-space: nowrap;
  font-size: var(--font-size-secondary); }

.media-doc {
  margin: 1.4em 0; }

.media-doc .attachment-card {
  margin: 0; }

.media-doc__preview {
  margin-top: 0.5em; }

.media-doc__preview > summary {
  cursor: pointer;
  user-select: none;
  font-size: var(--font-size-secondary);
  color: var(--link-color); }