body {
  font-size: 14px;
  font-family: "Microsoft JhengHei", "Microsoft YaHei", SimHei, Sans-Serif, Arial;
  background-color: rgb(251, 213, 156); 
}

a { 
  text-decoration:none;
}

a:hover { 
  text-decoration:none;
}

.s {
  flex-grow:1;
  text-align:center;
  border-style: solid;
  border-width: 0 1px 0 0;
  border-color: black;
  margin:0 -1px 0 0;
  padding:0 0 0 0;
}

.n {
  flex-grow:1;
  text-align:center;
  vertical-align: middle;
  border-style: solid;
  border-width: 0 1px 0 0;
  border-color: black;
  height: 50px;
  margin:0 -1px 0 0;
  padding:0 0 0 0;
}

.direction {
  flex-basis: 40px;
  flex-grow:1;
  flex-direction:row;
  text-align:center;
  vertical-align: middle;
  border-style: solid;
  border-width: 0 1px 0 0;
  border-color: black;
  height: 90px;
  margin:0 -1px 0 0;
  padding:0 0 0 0;
  display:flex;
  align-items: center;
  justify-content: center;
}

.qua {
  font-size: 24px;
  font-weight: bold;
}

.pillar {
  flex-grow:1;
  text-align:center;
  border-style: solid;
  border-width: 0 1px 0 0;
  border-color: black;
  margin:0 -1px 0 0;
  padding:0 0 0 0;
  font-size: 24px;
  font-weight: bold;
}
  
.vb {
  -webkit-writing-mode: tb-rl;
  writing-mode: tb-rl;
  height:60px;
  text-align:center;
  flex-grow:1;
}

.vs {
  -webkit-writing-mode: tb-rl;
  writing-mode: tb-rl;
  height:25px;
  text-align:center;
  flex-grow:1;
}

.v {
  -webkit-writing-mode: tb-rl;
  writing-mode: tb-rl;
  height:40px;
  text-align:center;
  flex-grow:1;
}
  
.vl {
  -webkit-writing-mode: tb-rl;
  writing-mode: tb-rl;
  height:70px;
  text-align:left;
  flex-grow:1;
  padding: 5px 0px 0px 0px;
  /* border:1px solid black; */
}


.sv {
  -webkit-writing-mode: lr-tb;
  writing-mode: lr-tb;
  display:inline-block;
  height:40px;
  text-align:center;
  vertical-align: middle;
  margin: 3px 0 2px 0;
  flex-grow:1;
}


.sv:after{
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
} 

.c {
  text-align:center;
  border-style: solid;
  border-width: 0 1px 0 0;
  border-color: black;
  margin:0 -1px 0 0;
  padding:0 0 0 0;
}

.h {
  flex-grow:1;
}

.pane {
  border: 0px;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  flex-wrap:wrap;
  border-radius:10px;
  /* background-color:beige; */
  padding: 20px 10px 10px 10px;
}

.flexcontainer {
  display:flex;
  flex-direction: column;
  flex-shrink: 0;
  width:300px;
  border-style: solid;
  border-width: 1px 1px 0 1px;
  border-color: black;
  margin:5px 5px 5px 5px;
  padding:0 0 0 0;
}

.tablecontainer {
  display:flex;
  flex-direction: column;
  flex-shrink: 0;
  width:300px;
  border-style: solid;
  border-width: 1px 1px 1px 1px;
  border-color: black;
  margin:5px;
  padding:0 0 0 0;
}

.tablecontainer .table {
  margin:0;
  padding:0;
  text-align: center;
  border-spacing:0;
  border: 1px solid black;
  background-color: rgb(244, 237, 196);
}

.subcontainer {
  display:flex;
  flex-grow:1;
  background-color: rgb(244, 237, 196);
  justify-content:center;
  flex-direction:row-reverse;
  border-style: solid;
  border-width: 0 0 1px 0;
  border-color: black;
  margin:0;
  padding:0 0 0 0;
}

.hcontainer {
  display:flex;
  flex-grow:1;
  background-color: rgb(244, 237, 196);
  justify-content:center;
  flex-direction:row;
  border-style: solid;
  border-width: 0 0 1px 0;
  border-color: black;
  margin:0;
  padding:0 0 0 0;
}
  
.t {
  -webkit-writing-mode: tb-rl;
  writing-mode: tb-rl;
  align-self:stretch;
  width: 20px;
  text-align:center;
  border-style: solid;
  border-width: 0 1px 0 0;
  border-color: black;
  margin:0 -1px 0 0;
  padding:0 0 0 0;
}
  
hr {
  border-top:1px solid black;
  margin:0;
}


/* SVG 表格 (八字命盤、無敵律數、流年、個人性格分析) */
.svgtable {
  display: block;
  flex-shrink: 0;
  max-width: 100%;
  height: auto;
  margin: 5px;
  font-family: "Microsoft JhengHei", "Microsoft YaHei", "PingFang TC", "Heiti TC", SimHei, Sans-Serif, Arial;
}

.svgtable.wide {
  margin: 0 auto 1rem auto;
}

.svgtable .bg {
  fill: rgb(244, 237, 196);
}

.svgtable .bg-beige {
  fill: beige;
}

.svgtable .stripe {
  fill: rgba(0, 0, 0, 0.05);
}

.svgtable .grid {
  fill: none;
  stroke: black;
  stroke-width: 1;
  shape-rendering: crispEdges;
}

.svgtable text {
  fill: black;
  font-size: 14px;
  text-anchor: middle;
  dominant-baseline: central;
}

/* Safari 不會把 dominant-baseline 繼承給 tspan，要另外指定，不然 tspan 的字會偏上 */
.svgtable tspan {
  dominant-baseline: central;
}

.svgtable .big {
  font-size: 24px;
  font-weight: bold;
}

.svgtable .sm {
  font-size: 12px;
}

.svgtable .desc {
  font-size: 15px;
}

.svgtable .b {
  font-weight: bold;
}

.svgtable .left {
  text-anchor: start;
}

.svgtable .red {
  fill: red;
}

/* SVG 表格及紫微命盤的拷貝按鈕 (由 svgcopy.js 加入)，浮動在右上角 */
/* --k 是 SVG 目前的縮放比例 (由 svgcopy.js 設定)，按鈕跟著縮放才不會壓到格線 */
.svgbox {
  position: relative;
  flex-shrink: 0;
  max-width: 100%;
  margin: 5px;
}

.svgbox > svg {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}

.svgbox.wide {
  margin: 0 auto 1rem auto;
}

/* 紫微命盤維持滿版寬度，按鈕放在右上角方位文字外面的空白處 */
.svgbox.board {
  width: 100%;
  margin: 0;
}

.svgbox.board .svgcopy {
  top: calc(1px * var(--k, 1));
  right: calc(1px * var(--k, 1));
  width: clamp(16px, calc(18px * var(--k, 1)), 24px);
  height: clamp(16px, calc(18px * var(--k, 1)), 24px);
}

.svgcopy {
  position: absolute;
  top: calc(3px * var(--k, 1));
  right: calc(3px * var(--k, 1));
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(18px * var(--k, 1));
  height: calc(18px * var(--k, 1));
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 3px;
  background-color: rgba(255, 255, 255, 0.7);
  color: #333;
  opacity: 0.6;
  cursor: pointer;
  transition: opacity 0.15s;
}

.svgbox:hover .svgcopy,
.svgcopy:focus-visible {
  opacity: 1;
}

.svgcopy:hover {
  background-color: white;
  border-color: rgba(0, 0, 0, 0.6);
}

/* 滑鼠移過去時顯示的提示文字 */
.svgcopy::after {
  content: attr(data-tip);
  position: absolute;
  top: 50%;
  right: calc(100% + 6px);
  transform: translateY(-50%);
  padding: 2px 6px;
  border-radius: 4px;
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  font-size: 12px;
  line-height: 1.4;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}

.svgcopy:hover::after,
.svgcopy:focus-visible::after {
  opacity: 1;
}

/* 紫微命盤結果頁 (body.ziwei-fit)：壓縮上方的標題跟表單，讓命盤可以在一個畫面內看完 */
.ziwei-fit h1 {
  font-size: 1.5rem;
  margin-bottom: 0.25rem;
  padding-top: 0.5rem !important;
}

.ziwei-fit #flowyearform .card-header {
  display: none;
}

.ziwei-fit #flowyearform .card-body {
  padding: 0.25rem 0.5rem;
}

.ziwei-fit .card.my-3 {
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}

.ziwei-fit .card-header {
  padding: 0.25rem 0.75rem;
}

.ziwei-fit .card-body {
  padding: 0.5rem;
}

.ziwei-fit .board-toolbar {
  padding: 0.125rem 0.25rem;
  margin-bottom: 0.25rem;
}

/* 各個 section 的分頁列 (由 sectiontabs.js 加入)，捲動時固定在畫面上方 */
.section-tabs {
  position: sticky;
  top: 0;
  z-index: 10;
  margin-top: 6px; /* 跟上方輸入表單的距離；用 margin 固定在畫面上方時分頁列不會變高 */
  padding-top: 0.5rem;
  padding-bottom: 2px;
  background-color: rgb(255, 240, 193); /* 跟 body 的 bg-warning bg-opacity-25 同色 */
}

.section-tabs .nav {
  gap: 4px;
}

.section-tabs .nav-link {
  padding: 0.25rem 0.75rem;
  border: 1px solid rgba(13, 110, 253, 0.3);
  background-color: white;
}

/* 有分頁列時，卡片跟分頁列之間的距離縮小 */
.section-tabs ~ .container .card[data-tab] {
  margin-top: 0 !important;
}

.section-tabs .nav-link.active {
  border-color: transparent;
}

/* 首頁的服務卡片 (service_cards.html)，滑鼠移過去時稍微浮起來 */
.service-cards .card {
  transition: transform 0.15s, box-shadow 0.15s;
}

.service-cards .card:hover {
  transform: translateY(-2px);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

/* 底下是紫微斗數用的 */

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  gap: 2px;
  /* height: 100vh; */
}

.grid-item-0 {
  grid-column: 1/2;
  grid-row: 4/5;
  /* aspect-ratio: 1/1; */
  border: 1px solid black;
  padding: 5px;
}

.grid-item-1 {
  grid-column: 1/2;
  grid-row: 3/4;
  /* aspect-ratio: 1/1; */
  border: 1px solid black;
  padding: 5px;
}

.grid-item-2 {
  grid-column: 1/2;
  grid-row: 2/3;
  /* aspect-ratio: 1/1; */
  border: 1px solid black;
  padding: 5px;
}

.grid-item-3 {
  grid-column: 1/2;
  grid-row: 1/2;
  /* aspect-ratio: 1/1; */
  border: 1px solid black;
  padding: 5px;
}

.grid-item-4 {
  grid-column: 2/3;
  grid-row: 1/2;
  /* aspect-ratio: 1/1; */
  border: 1px solid black;
  padding: 5px;
}

.grid-item-5 {
  grid-column: 3/4;
  grid-row: 1/2;
  /* aspect-ratio: 1/1; */
  border: 1px solid black;
  padding: 5px;
}

.grid-item-6 {
  grid-column: 4/5;
  grid-row: 1/2;
  /* aspect-ratio: 1/1; */
  border: 1px solid black;
  padding: 5px;
}

.grid-item-7 {
  grid-column: 4/5;
  grid-row: 2/3;
  /* aspect-ratio: 1/1; */
  border: 1px solid black;
  padding: 5px;
}

.grid-item-8 {
  grid-column: 4/5;
  grid-row: 3/4;
  /* aspect-ratio: 1/1; */
  border: 1px solid black;
  padding: 5px;
}

.grid-item-9 {
  grid-column: 4/5;
  grid-row: 4/5;
  /* aspect-ratio: 1/1; */
  border: 1px solid black;
  padding: 5px;
}

.grid-item-10 {
  grid-column: 3/4;
  grid-row: 4/5;
  /* aspect-ratio: 1/1; */
  border: 1px solid black;
  padding: 5px;
}

.grid-item-11 {
  grid-column: 2/3;
  grid-row: 4/5;
  /* aspect-ratio: 1/1; */
  border: 1px solid black;
  padding: 5px;
}

.grid-item-center {
  grid-column: 2/4;
  grid-row: 2/4;
  /* aspect-ratio: 1/1; */
  border: 1px solid black;
  padding: 5px;
}

.gz {
  writing-mode: vertical-rl;
}



.daxian {

}

.xiaoxian {

}

.sihua {
  font-size: 80%;
}

.zihua {
  font-size: 80%;
}

.flowyear {

}

.flowmonth {
  color: #FF5555;
  /* background-color: #FFFF00; */
}

.bg-flowmonth {
  background-color: #00FFFF;
}

.flowday {
  color: #5555FF;
  /* background-color: #FFFF00; */
}

.bg-flowday {
  background-color: #FFAA00;
}

.brightness {
  font-size: 80%;
}

.bg-brightness {
  background-color: #FFFF00;
}

@media screen and (max-width: 500px) {
  .pane {
    border: 0px;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction: column;
  }
}
/* 命盤紀錄：右下角浮動按鈕 */
.records-toggle {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 1030;
  border-radius: 2rem;
}

/* 首頁 */
.home-hero {
  background-size: cover;
  /* 圖片裡的人大約在高度 70%~86% 的位置，寬螢幕時圖片會被裁掉上下，對齊靠下才看得到整個人 */
  background-position: center 85%;
  color: #fff;
}
.home-hero-overlay {
  min-height: 72vh;
  display: flex;
  align-items: center;
  padding: 4rem 0;
  background: linear-gradient(90deg, rgba(10, 12, 40, 0.80) 0%, rgba(10, 12, 40, 0.45) 60%, rgba(10, 12, 40, 0.15) 100%);
}
.home-hero-brand {
  font-size: 1.1rem;
  letter-spacing: 0.15em;
  opacity: 0.9;
  margin-bottom: 0.5rem;
}
.home-hero-title {
  font-size: clamp(2rem, 6vw, 3.5rem);
  font-weight: 700;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
  margin-bottom: 1rem;
}
.home-hero-lead {
  font-size: clamp(1rem, 2.4vw, 1.25rem);
  max-width: 40rem;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
  margin-bottom: 2rem;
}
.home-services {
  padding-top: 3rem;
}
.home-section-head {
  text-align: center;
  margin-bottom: 2rem;
}
.home-section-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: #1a1d4a;
  margin-bottom: 0.5rem;
}
.home-section-title::after {
  content: "";
  display: block;
  width: 3rem;
  height: 3px;
  margin: 0.75rem auto 0;
  border-radius: 2px;
  background: linear-gradient(90deg, #0d6efd, #dc3545, #198754);
}
.home-section-sub {
  color: #6c757d;
  margin-bottom: 0;
}
.home-service {
  border: none;
  border-radius: 1rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.home-service:hover {
  transform: translateY(-4px);
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.18) !important;
}
.home-service-icon {
  flex-shrink: 0;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
}
.home-service-features {
  list-style: none;
  padding-left: 0;
  font-size: 0.95rem;
}
.home-service-features li {
  margin-bottom: 0.35rem;
}

/* 常見問題 */
.faq-item + .faq-item {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* 紫微命盤的直書文字由 vtext.js 指定每個字的位置，每個字都以座標為中心 */
/* writing-mode 要蓋過舊版的 .gz { writing-mode: vertical-rl } */
.svgboard tspan[data-vtg] {
  text-anchor: middle !important;
  writing-mode: horizontal-tb !important;
}