@charset "UTF-8";
/* skin/nstyle_about.css — 關於我們 about 頁「專屬」CSS
   共用層（設計系統／banner 結構）在 css/nstyle_base.css；本檔只放 about 專屬：
     1. banner 換圖　2. 內文排版　3. 人物介紹角色卡
   路徑基準：css/skin/ → 圖片為 ../../images/
   載入順序：about.html 須先載 nstyle_base.css（設計系統）再載本檔。 */

/* ───── 1. banner 換圖（結構在 nstyle_base 的 .nstyle_pagebanner）───── */
.nstyle_pagebanner--about {
  background-image: url(../../images/page_title_about_pc.jpg);
}
@media (max-width: 767.98px) {
  .nstyle_pagebanner--about {
    background-image: url(../../images/page_title_about_mo.jpg);
  }
}

/* 區塊間距已改用共用 .nstyle_page（見 nstyle_base.css）。
   about 若要微調間距，改在此覆寫變數即可，例如：
   .nstyle_page--about { --nstyle_page-gap: 80px; --nstyle_page-gap-end: 100px; } */

/* ───── 2. 內文排版（公司簡介）───── */
.nstyle_about__lead {
  /* 寬度／置中由 BS grid 的 .col-lg-8.mx-auto 負責（見 about.html）*/
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.nstyle_about__lead-title {
  margin: 0;
  font-size: var(--nstyle_font-title-md);
  line-height: 1.5;
  letter-spacing: 0.03em;
  font-weight: 800;
  color: #f67e11;
}
.nstyle_about__lead-title:not(:first-child) {
  margin-top: 22px;
}
.nstyle_about__lead-strong {
  margin: 0;
  font-size: var(--nstyle_font-body-lg);
  line-height: 1.6;
  letter-spacing: 0.03em;
  font-weight: 700;
  color: #2b1c0f;
}
.nstyle_about__text {
  margin: 0;
  font-size: var(--nstyle_font-body-md);
  line-height: 1.9;
  letter-spacing: 0.02em;
  font-weight: 400;
  color: #4a3a2b;
}

/* ───── 2b. 學習整合的思考化：三張特色卡（桌機三欄等高、手機堆疊）───── */
.nstyle_about__cards {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 24px;
}
.nstyle_about__card {
  flex: 1 1 0; /* 三欄等寬、等高 */
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px 26px;
  background: #fffdf7;
  border: 1px solid #f4e3cf;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(146, 88, 20, 0.08);
}
.nstyle_about__card-title {
  margin: 0;
  font-size: var(--nstyle_font-title-sm);
  line-height: 1.5;
  letter-spacing: 0.03em;
  font-weight: 800;
  color: #161a22; /* 小標黑色 */
}
.nstyle_about__card-text {
  margin: 0;
  font-size: var(--nstyle_font-body-sm);
  line-height: 1.9;
  letter-spacing: 0.02em;
  color: #4a3a2b;
}
@media (max-width: 991.98px) {
  .nstyle_about__card {
    flex: 1 1 100%; /* 平板以下改一欄堆疊，避免 2+1 落單 */
  }
}
@media (max-width: 767.98px) {
  .nstyle_about__cards {
    gap: 16px;
    margin-top: 20px;
  }
  .nstyle_about__card {
    padding: 22px 20px;
  }
}

/* ───── 3. 人物介紹角色卡 ───── */
.nstyle_about__chars {
  /* 寬度／置中由 BS grid 的 .col-lg-10.mx-auto 負責（見 about.html）*/
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nstyle_about__char-item {
  flex: 0 1 calc((100% - 24px * 4) / 5); /* 桌機一排 5 張 */
  min-width: 150px;
}
.nstyle_about__char {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.nstyle_about__char:hover {
  transform: translateY(-6px);
}
.nstyle_about__char:focus-visible {
  outline: 2px solid #f67e11;
  outline-offset: 6px;
  border-radius: 8px;
}
.nstyle_about__char-img {
  display: block;
  width: 100%;
  max-width: 200px;
  height: auto;
  filter: drop-shadow(0 6px 14px rgba(146, 88, 20, 0.18));
}
.nstyle_about__char-name {
  font-size: var(--nstyle_font-body-md);
  line-height: 1.4;
  letter-spacing: 0.04em;
  font-weight: 700;
  color: #2b1c0f;
}
@media (max-width: 991.98px) {
  .nstyle_about__char-item {
    flex: 0 1 calc((100% - 24px * 2) / 3); /* 平板一排 3 張 */
  }
}
@media (max-width: 575.98px) {
  .nstyle_about__chars {
    gap: 16px;
  }
  .nstyle_about__char-item {
    flex: 0 1 calc((100% - 16px) / 2); /* 手機一排 2 張 */
    min-width: 0;
  }
}