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;
}

/* 塔羅用的紫色 (Bootstrap 5.2 沒有 purple 的 utility class) */
.text-purple {
  color: #6f42c1 !important;
}
.bg-purple {
  /* 不要在這裡設定 --bs-bg-opacity，才不會蓋掉 bg-opacity-10 等 class */
  background-color: rgba(111, 66, 193, var(--bs-bg-opacity, 1)) !important;
}
.btn-purple {
  color: #fff;
  background-color: #6f42c1;
  border-color: #6f42c1;
}
.btn-purple:hover,
.btn-purple:focus {
  color: #fff;
  background-color: #59339d;
  border-color: #59339d;
}

/* 塔羅：每張牌的意思 */
.tarot-meaning {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.tarot-meaning + .tarot-meaning {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.tarot-thumb {
  width: 64px;
  flex-shrink: 0;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
.tarot-thumb.reversed {
  transform: rotate(180deg);
}
.tarot-note-preview {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 卜卦：擲銅錢，第一擲在最下面 (由下往上排) */
.toss-board {
  display: flex;
  flex-direction: column-reverse;
  gap: 6px;
}
.toss-row {
  display: grid;
  grid-template-columns: 64px auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 6px 10px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
}
.toss-row.current {
  border: 2px solid #0d6efd;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15);
}
.toss-row.pending {
  opacity: 0.45;
}
.toss-label {
  line-height: 1.2;
}
.toss-coins {
  display: flex;
  gap: 8px;
}
.toss-result {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* 銅錢：圓形方孔，正面金黃色、反面古銅色 */
.coin {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid #9a7417;
  background: radial-gradient(circle at 35% 30%, #fff3b0 0%, #f1c84b 45%, #c99a23 100%);
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.25), 0 1px 3px rgba(0, 0, 0, 0.3);
  padding: 0;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.coin::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  background: #fff;
  border: 2px solid #9a7417;
}
.coin.back {
  border-color: #5b3b1a;
  background: radial-gradient(circle at 35% 30%, #d9a066 0%, #a8662e 50%, #6e4219 100%);
}
.coin.back::before {
  border-color: #5b3b1a;
}
.coin:hover:not([disabled]) {
  transform: rotateY(25deg) scale(1.05);
}
.coin[disabled] {
  cursor: default;
}
.coin-face {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -20px;
  font-size: 12px;
  font-weight: bold;
  color: #6b4b10;
}
.coin.back .coin-face {
  color: #5b3b1a;
}
.toss-row .toss-coins {
  padding-bottom: 16px;
}

/* 爻的圖形：陽爻一長條、陰爻中間斷開 */
.yao-bar {
  display: inline-flex;
  gap: 8px;
  width: 64px;
  height: 9px;
}
.yao-bar i {
  flex: 1;
  background: #222;
  border-radius: 1px;
}
.yao-bar.yang {
  gap: 0;
}
.yao-bar.yang i + i {
  display: none;
}

.toss-now {
  justify-self: end;
}

@media (max-width: 480px) {
  .toss-row {
    grid-template-columns: 52px auto;
    gap: 8px;
  }
  .toss-result {
    grid-column: 1 / -1;
  }
  /* 手機上「目前」「已記錄」放在結果的右邊，不要撐滿整行 */
  .toss-now {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

/* 卜卦用的古銅色 */
.text-bronze {
  color: #9a5b13 !important;
}
.bg-bronze {
  background-color: rgba(154, 91, 19, var(--bs-bg-opacity, 1)) !important;
}
.btn-bronze {
  color: #fff;
  background-color: #9a5b13;
  border-color: #9a5b13;
}
.btn-bronze:hover,
.btn-bronze:focus {
  color: #fff;
  background-color: #7c4810;
  border-color: #7c4810;
}

/* Bootstrap 5.2.0-beta1 的 .btn:focus 會套用滑鼠移過去的顏色，按了按鈕之後再按「上一頁」回來，
   按鈕會一直是反白的；改成只有用鍵盤 (Tab) 移到按鈕時才顯示 (跟 Bootstrap 5.2 正式版一樣用 :focus-visible) */
.btn:focus:not(:focus-visible):not(:active) {
  color: var(--bs-btn-color);
  background-color: var(--bs-btn-bg);
  border-color: var(--bs-btn-border-color);
  box-shadow: none;
}

/* 手機、平板等沒有滑鼠的裝置，點過的按鈕會一直停在 hover 的顏色 */
@media (hover: none) {
  .btn:hover:not(:active) {
    color: var(--bs-btn-color);
    background-color: var(--bs-btn-bg);
    border-color: var(--bs-btn-border-color);
  }
}