/* Reset: */
      a,
      abbr,
      acronym,
      address,
      applet,
      article,
      aside,
      audio,
      b,
      big,
      blockquote,
      body,
      canvas,
      caption,
      center,
      cite,
      code,
      dd,
      del,
      details,
      dfn,
      div,
      dl,
      dt,
      em,
      embed,
      fieldset,
      figcaption,
      figure,
      footer,
      form,
      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      header,
      hgroup,
      html,
      i,
      iframe,
      img,
      ins,
      kbd,
      label,
      legend,
      li,
      mark,
      menu,
      nav,
      object,
      ol,
      output,
      p,
      pre,
      q,
      ruby,
      s,
      samp,
      section,
      small,
      span,
      strike,
      strong,
      sub,
      summary,
      sup,
      table,
      tbody,
      td,
      tfoot,
      th,
      thead,
      time,
      tr,
      tt,
      u,
      ul,
      var,
      video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
      }
      article,
      aside,
      details,
      figcaption,
      figure,
      footer,
      header,
      hgroup,
      menu,
      nav,
      section {
        display: block;
      }
      body {
        line-height: 1;
      }
      ol,
      ul {
        list-style: none;
      }
      blockquote,
      q {
        quotes: none;
      }
      blockquote:after,
      blockquote:before,
      q:after,
      q:before {
        content: "";
        content: none;
      }
      table {
        border-collapse: collapse;
        border-spacing: 0;
      }
		
.container {
    display: flex;
    flex-wrap: wrap; /* 允许项目换行 */
}

.item {
    flex: 1; /* 默认每个项目占据相等空间 */
    margin: 10px; /* 添加一些外边距以便于视觉区分 */
    background-color: #f0f0f0; 
    text-align: left; /* 文本居中 */
    padding: 20px; /* 内边距 */
}

@media (max-width: 600px) {
    .container {
        flex-direction: column; /* 垂直排列 */
    }
}

@media (min-width: 601px) and (max-width: 2024px) {
    .container {
        flex-direction: row; /* 让项目水平排列 */
    }
}

		
	  .links{line-height: 180%;} 
	  a:link , a:visited { font-family: 微软雅黑,宋体,Verdana, Arial, sans-serif; text-decoration: none; color: #0F57A2; }
	  a.tt:link , a.tt:visited { font-family: 微软雅黑,宋体,Verdana, Arial, sans-serif; text-decoration: none; color: #000; font-size: 16px; font-weight: bold}
     .detail { text-align: left;}
     .detail img{max-width: 90%;height: auto;width: auto\9;}
		

		
      @font-face {
        font-family: "samhaeng";
        src: url("https://1000randomnames3.com/fonts/samhaeng_regular-web.woff2")
            format("woff2"),
          url("https://1000randomnames3.com/fonts/samhaeng_regular-web.woff")
            format("woff");
        font-weight: 400;
        font-style: normal;
        font-display: swap;
      }
      @font-face {
        font-family: "samhaeng";
        src: url("https://1000randomnames3.com/fonts/samhaeng_bold-web.woff2")
            format("woff2"),
          url("https://1000randomnames3.com/fonts/samhaeng_bold-web.woff")
            format("woff");
        font-weight: 700;
        font-style: normal;
        font-display: swap;
      }
      :root {
        --g: #fff;
        --f: #000;
      }
      html.theme--dark {
        --g: #000;
        --f: #fff;
      }
      html {
        font-size: 81.25%;
        font-family: "samhaeng", "lucida grande", "lucida sans", "lucida",
          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
          Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial,
          sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
        font-weight: 400;
        background-color: var(--g);
        color: var(--f);
        transition: color 0.2s linear, background-color 0.2s linear;
      }
      body {
        font-size: 1rem;
        padding: 0;
      }
      .app {
        display: flex;
        flex-flow: column nowrap;
        align-items: stretch;
        justify-content: flex-start;
        padding: 2rem;
      }
      @media (max-width: 800px) {
        .app {
          padding: 0.5rem 0.5rem 3rem 0.5rem;
        }
      }
      header#app__header {
        display: flex;
        flex-flow: row wrap;
        align-items: flex-start;
        justify-content: flex-start;
        box-sizing: border-box;
        padding: 2rem 3rem 1rem 3rem;
      }
      @media (max-width: 800px) {
        header#app__header {
          padding: 1rem 1.5rem;
        }
      }
      #about {
        line-height: 200%;
        display: flex;
        flex-flow: column nowrap;
        align-items: flex-start;
        justify-content: flex-start;
        padding-bottom: 1rem;
      }
      button#about__header {
        border: none;
        background: transparent;
        color: inherit;
        padding: 0;
        line-height: 200%;
        padding: 0 0.7rem;
        margin-left: -0.7rem;
        margin-right: 1rem;
        border-radius: 0.5rem;
        cursor: pointer;
        appearance: none;
        font-family: inherit;
        font-size: inherit;
      }
      button#about__header:hover {
        text-decoration: underline;
        text-underline-position: under;
      }
      button#about__header:focus {
        outline: none;
        box-shadow: inset 0 0 0 2px var(--f);
      }
      #about__body {
        max-width: 110rem;
      }
      #logo {
        font-weight: 700;
        line-height: 200%;
        margin-left: auto;
        text-decoration: none;
        text-transform: uppercase;
        padding: 0 0.7rem;
        margin-right: -0.7rem;
        margin-bottom: 1rem;
        position: relative;
      }
      #logo:hover {
        text-decoration: underline;
        text-underline-position: under;
      }
      #logo:focus {
        outline: none;
      }
      #logo:focus:after {
        border-radius: 0.5rem;
        content: "";
        position: absolute;
        top: -0.2rem;
        bottom: 0;
        right: 0;
        left: 0;
        box-shadow: inset 0 0 0 2px var(--f);
      }
      #logo:active {
        text-decoration: none;
        background: var(--f);
        color: var(--g);
        outline: none;
        box-shadow: 0 0 0 2px var(--f);
      }
      main#app__body {
        display: flex;
        flex-flow: row wrap;
        align-items: flex-start;
        justify-content: flex-start;
        box-sizing: border-box;
        padding: 2rem;
        order: -1;
      }
      @media (max-width: 800px) {
        main#app__body {
          padding: 1rem 0.5rem;
        }
      }
      ul#app__body__list {
        list-style: none;
        display: flex;
        flex-flow: row wrap;
        align-items: flex-start;
        justify-content: flex-start;
        counter-reset: name-list;
      }
      li {
        width: 16.5rem;
        font-size: 1rem;
        line-height: 200%;
        text-align: left;
      }
      li:last-child:after {
        content: "■";
        margin-left: 0.5rem;
      }
      li:before {
        counter-increment: name-list;
        content: counters(name-list, ".");
        text-align: right;
        margin: 0 0.5rem;
        width: 3rem;
        display: inline-block;
        -webkit-user-select: none;
        user-select: none;
      }
      a {
        color: inherit;
        text-underline-position: under;
      }
      #about__body a:focus {
        outline: none;
        box-shadow: 0 0 0 2px var(--g), 0 0 0 4px var(--f);
        text-decoration: none;
        border-radius: 2px;
      }
      .is-hidden {
        visibility: hidden;
      }
      .is-display-none {
        display: none;
      }








        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: "Microsoft YaHei", "微软雅黑", SimSun, "宋体", Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f8f9fa;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        header {
            text-align: center;
            padding: 1rem;
        }

        .article-container {
            width: 90%;
            max-width: 1200px;
            margin: 2rem auto;
            background-color: #fff;
            padding: 2rem;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        }

       h1, .article-title {
            text-align: center;
            font-size: clamp(1.8rem, 4vw, 2.5rem);
            margin-bottom: 0.8rem;
            color: #212529;
        }

        .article-meta {
            text-align: center;
            font-size: 0.9rem;
            color: #6c757d;
            margin-bottom: 2rem;
            border-bottom: 1px solid #eee;
            padding-bottom: 1rem;
        }

        .article-content {
            line-height: 1.8;
            font-size: 1rem;
        }
        .article-content p {
            text-indent: 2em; /* 首行缩进，文章标配 */
            margin-bottom: 1rem;
        }

        footer {
            background-color: #e9ecef;
            text-align: center;
            padding: 1rem;
            margin-top: auto;
            font-size: 0.9rem;
            color: #6c757d;
        }

        /* 小屏适配：减少容器内边距，优化紧凑显示 */
        @media (max-width: 576px) {
            .article-container {
                padding: 1.2rem;
                margin: 1rem auto;
            }
            .article-content {
                font-size: 0.95rem;
            }
        }