/* Theme Name: iCing
Theme URI: https://example.com
Author: shihhan
Author URI: https://example.com
Description: A WordPress theme for iCing.
Version: 4.0
*/

@font-face {
    font-family: 'BopomofoRuby';
    src: url('BopomofoRuby1909-v1-Regular.ttf') format('truetype');
    font-display: swap;
}

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

/* 網站背景與排版 */
body {
    background-color: #F2F2F2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
	font-family: 'BopomofoRuby', sans-serif;
}

.arial{
	font-family:'arial';
}



/* 統一主區塊格式 */
.main-container,
.gua-result {
    width: 100%;
    /*max-width: 1080px;*/
    margin: 0 auto;
    /* Center the container */
    margin-top: 20px;
    border: 5px solid #8B0000;
    background-color: #FFFFFF;
    padding: 20px;
}

/* 主要容器 */
.main-container {
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    flex-wrap: wrap;
    align-items: center;
}

/* 左側區塊（圖片 + 按鈕） */
.left {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* 左側圖片 */
.left img {
    max-width: 45%;
}

/* 按鈕容器 */
.left-button{
    display: flex;
    gap: 10px;
}

/* 統一按鈕樣式 */
button,.botan {
    margin-top: 10px;
    background-color: #8B0000;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 1.875em;
    cursor: pointer;
    border-radius: 5px;
	
}
button:hover,.botan:hover {
	background-color: #6b0000;
}

#reload-btn {
    display: none;
}

/* 右側區塊（表格） */
.right {
    display: flex;
    width: 100%;
    padding: 20px;
    justify-content: center;
}

/* 卦象結果表格 */
table {
    width: 100%;
    border-collapse: collapse;
    font-weight: bolder;
}

/* 表格樣式 */
table,
th,
td {
    border: 4px solid #8B0000;
    text-align: center;
    font-size: 1.250em;
}

/* 表格內容 */
td {
    padding: 0.2em;
}

/* 第一列（爻名） */
td:first-child {
    color: #8B0000;
    font-size: 1.250em;
    width: 10%;
	
}

tr td:nth-child(2) {
    width: 10%;
}

tr td:nth-child(3) {
    width: 27%;
	padding: 0.4em;
}

/* 圖片大小 */
td img {
    width: 100%;
    height: 30%;
    margin: 0px;
}

/* 最後一列（爻辭）隱藏 */
td:last-child {
    text-align: start;
    
    /* width: 50%; */
}

/*標示注音*/
 idiv {
	 display:inline-block;
}

.dummy2 {
	/*line-height: 1.75rem;*/
	font-family: 'BopomofoRuby', 'AR KaiB5', 'KaiTi TW';
	display: inline-block;
	/*letter-spacing: 0.25rem;*/
	margin-bottom: 0em;
}

/* 豎標注音 
.v ruby,
.v [data-after]::after {
	writing-mode:vertical-lr;
}*/

/* 漢字 + 注音組的顯示方式 */
.ji {
    display: inline-block; /* 讓漢字與注音保持同一個區塊 */
    align-items: center; /* 讓注音與漢字垂直對齊 */
    white-space: nowrap; /* 確保這個 span 內不會被拆開換行 */
	margin: 0;
	margin-right: 0.45rem;
}

/* 注音基本設置 */

.bpmf {
    letter-spacing: 0rem;
    color: #333;
    text-orientation: upright;
    font-weight: bold;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
    position: relative;
    writing-mode: vertical-lr;
	/*margin-right: -0.5em;*/
}


/*注音位置
.after [data-after] {
	position:relative;
}*/

/* 掛辭文字控制項 */
#guaci.dummy2 {
	letter-spacing: 0.3rem;
}


/* 掛辭注音調整項 */
#guaci .bpmf {
	font-size: 30%;/*大小*/
	top: -0.2rem;/*X軸*/
	right: 0.8em;/*Y軸*/
}

/*爻辭文字控制項*/
#hexagram-table .dummy2 {
	letter-spacing: 0.45rem;
	line-height: 1.75rem;
}

/* 爻辭注音調整項 */
#hexagram-table .bpmf {
	font-size: 30%;/*大小*/
	top: -0.2rem;/*X軸*/
	right: 0.4em;/*Y軸*/
}

/*掛歌文字*/
#uta_1-description p,
#uta_2-description p,
#uta_1-description h3,
#uta_2-description h3
{
	letter-spacing: 1.0rem;
	line-height: 1.5rem;
}
#uta_1-description .ji,
#uta_2-description .ji
{
	margin-right: -0.4rem;
}


/*掛歌注音*/
#uta_1-description .bpmf,
#uta_2-description .bpmf
{
	font-size:35%;
	top: -0.05rem;/*X軸*/
	right: 2.35em;/*Y軸*/
}


/*開關*/
.switch {
  position: relative;
  display: inline-block;
  width: 5.5rem;
  height: 2.4rem;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 1.8rem;
    width: 1.8rem;
    left: 0.25rem;
    bottom: 0.3rem;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider {
  background-color: #8b0000;
}

input:focus + .slider {
  box-shadow: 0 0 1px #8b0000;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(3.2rem);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

.slider:after {
  content: "關閉";
  color: white;
  position: absolute;
  right: 0.3em;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.6em;
  transition: opacity 0.4s;
  opacity: 1;
}

.switch input:checked + .slider:after {
  content: "開啟";
  left: 0.3em;
  opacity: 1;
  right: auto;
}


/* Safari調整項 */
@supports (hanging-punctuation: first) and (-webkit-touch-callout: none) 
{

	/* 掛辭文字控制項 */
#guaci.dummy2 {
	letter-spacing: 0.3rem;
}


/* 掛辭注音調整項 */
#guaci .bpmf {
	font-size: 35%;/*大小*/
	top: -0.2rem;/*X軸*/
	right: 0.7em;/*Y軸*/
}

/*爻辭文字控制項*/
#hexagram-table .dummy2 {
	letter-spacing: 0.45rem;
	line-height: 1.75rem;
}

/* 爻辭注音調整項 */
#hexagram-table .bpmf {
	font-size: 30%;/*大小*/
	top: -0.2rem;/*X軸*/
	right: 0.9em;/*Y軸*/
}

/*掛歌文字*/
#uta_1-description p,
#uta_2-description h3,
#uta_1-description p,
#uta_2-description h3,
{
	letter-spacing: 1.5rem;
	line-height: 1.5rem;
}
#uta_1-description .ji
#uta_2-description .ji	
	{
	margin-right: 0rem;
}


/*掛歌注音*/
#uta_1-description .bpmf
#uta_2-description .bpmf

	{
	font-size:35%;
	top: -0.05rem;/*X軸*/
	right: 3.3em;/*Y軸*/
}

    }


/* -------------------- Shepherd 基本樣式覆寫 -------------------- */

/* 引導頭部文字樣式 */
.shepherd-theme-dark .shepherd-header {
    color: #fff;
    height: 30px;
}

/* 引導內容區域樣式 */
.shepherd-theme-dark .shepherd-content {
    background-color: #fff;
    color: #333;
    width: auto;
    margin: 0 auto;
    outline: none;
    padding: 0;
    max-width: 100%;
}

/* 按鈕樣式 */
.shepherd-theme-dark .shepherd-button {
    background-color: #8B0000;
    color: #fff;
    border: 2px solid #8B0000;
    border-radius: 4px;
    font-size: 1rem;
    padding: 10px 20px;
    transition: background-color 0.3s ease;
}

/* 按鈕懸停時效果 */
.shepherd-theme-dark .shepherd-button:hover {
    background-color: #6b0000;
}

/* 高亮元素樣式 */
.shepherd-theme-dark .shepherd-highlight {
    border: 2px solid #8B0000;
    box-shadow: 0 0 10px rgba(139, 0, 0, 0.7);
}

/* 引導箭頭顏色 */
.shepherd-theme-dark .shepherd-arrow {
    border-top-color: #8B0000 !important;
}

/* 引導步驟容器樣式 */
.shepherd-theme-dark .shepherd-step {
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* 第二按鈕樣式 */
.shepherd-button-secondary {
    background-color: #f1f1f1;
    color: #333;
}

/* 第二按鈕懸停效果 */
.shepherd-button-secondary:hover {
    background-color: #ddd;
}

/* 遮罩層樣式*/#shepherd-overlay {
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 9999;
} 


/* 按鈕可以點擊 */
.shepherd-button {
    cursor: pointer;
}

/* 引導步驟的標題和段落字體樣式 */
.shepherd-content p,
.shepherd-content h3 {
    font-size: 18px;
    color: #333;
}

/* 步驟容器的背景和陰影 */
.shepherd-step {
    background-color: #fff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* 前言內容樣式 */
.shepherd-setsumei {
    font-size: 18px;
    color: #4B2A2A;
    font-family: 'arial','Noto Serif', serif;
    padding: 5px;
    max-width: 90%; 
    width: auto;
    margin: 0 auto; 
}

.shepherd-setsumei li{
	margin-top: 1rem;
}

ol, ul {
    margin: 0 0 1.5em 3em;
}


/* 下一步按鈕透明度 */
.shepherd-button-next {
    opacity: 0.9;
}

/* 按鈕文字樣式 */
.shepherd-button {
    background-color: #8B0000;
    text-align: center;
    font-weight: bold;
}

/* 重要文字的樣式 */
.shepherd-point {
    color: #8B0000;
    font-weight: 1000;
}

/*地球圖*/
.chikyuu {
    width: 25%;
    margin: 0 auto;
    display: block;
}

/* -------------------- Shepherd 遮罩與高亮提示（來自前一代版本） -------------------- */

/* 遮罩層樣式 */
.shepherd-modal-overlay-container {
    height: 0;
    left: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    position: fixed;
    top: 0;
    transition: all .3s ease-out, height 0ms .3s, opacity .3s 0ms;
    width: 100vw;
    z-index: 9997;
}

.shepherd-modal-overlay-container.shepherd-modal-is-visible {
    height: 100vh;
    opacity: 0.5;
    transform: translateZ(0);
    transition: all .3s ease-out, height 0s 0s, opacity .3s 0s;
}

.shepherd-modal-overlay-container.shepherd-modal-is-visible path {
    pointer-events: all;
}

/* 讓 Shepherd 高亮元素（shepherd-enabled）不被遮罩影響 */
.shepherd-enabled {
    position: relative;
    z-index: 9999;  /* 確保高亮元素在遮罩之上 */

}



/* 讓返回按鈕靠左 */
.shepherd-button-back {
    margin-right: auto;
}


/*問卦區*/
.gua_question,#AI-switch_area{ 
	display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
	width:95%;
}



#monndaititoru{
width:100%;
}

/* -------------------- 卦象結果、卦辭 -------------------- */
.gua-result {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/*標題樣式*/
.gua-result h1,
.gua-title,
#kidoutitoru,
#monndaititoru{
    color: #8B0000;
    font-size: 1.75rem;
    margin-bottom: 1rem;
    text-align: center;
}

/*問卦區標題*/
#kidoutitoru,
#monndaititoru{
	text-align: left;
	margin-bottom: 0rem
}



/*文字內容樣式*/
.gua-result p {
    font-size: 1.5rem;
    color: #333;
    text-align: left;
    margin: 0.188rem;
	line-height: 2rem;
}

/* 搜尋卦象按鈕 */
#gua-web-search {
    display: none;
    font-size: 1.250em;
}

/* -------------------- 搜尋與選擇區塊 -------------------- */
.gua-select-search {
    width: 100%;
    max-width: 650px;
    margin: 0 auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 標籤樣式 */
.gua-select-search label {
    display: block;
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 5px;
    color: #333;
    text-align: left;
    width: 100%;
}

/* 輸入框 & 下拉選單樣式 */
#gua-search,
#gua-select,
#user-question{
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    transition: border-color 0.3s ease-in-out;
}

/* 聚焦時變色 */
#gua-search:focus,
#gua-select:focus {
    outline: none;
    border-color: #1976d2;
    box-shadow: 0 0 5px rgba(25, 118, 210, 0.3);
}

/* -------------------- 搜尋建議選單樣式 -------------------- */
.suggestions-container {
    /* position: absolute; */
    width: calc(100% - 20px);
    max-width: 600px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-bottom: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    display: none;
    overflow: hidden;
    font-size: 16px;
}

/* 建議選項 */
.suggestions-container div {
    padding: 12px 15px;
    cursor: pointer;
    font-size: 1rem;
    color: #333;
    transition: background 0.2s ease-in-out;
}

/* 懸停時變色 */
.suggestions-container div:hover {
    background: #f0f0f0;
}

/* 限制高度並允許滾動 */
.suggestions-container {
    max-height: 250px;
    overflow-y: auto;
}

/* 美化滾動條 */
.suggestions-container::-webkit-scrollbar {
    width: 6px;
}

.suggestions-container::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

.suggestions-container::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* 輸入框聚焦時顯示建議框 */
#gua-search:focus+.suggestions-container {
    display: block;
}

/* -------------------- 結果區塊 -------------------- */
.guaCiang,
.guaCi,
.guaExp{
    width: 100%;
    max-width: 600px;
    padding: 20px;
    border-radius: 8px;
    background: #FAFAFA;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.guaExp{
	text-align: left;
	font-size: 1rem;
}

.gua-number-container {
    display: flex;
    gap: 0.5rem;
	justify-content: center;
	align-items: stretch;
}

#gua-number {
    padding-right: 0.5rem;
    font-size: 3rem;
    font-weight: bold;
    min-width: 3rem;
    text-align: center;
    align-items: center;
    display: flex;
    padding-bottom: 0.7rem;
}

.gua-result-container {
    display: flex;
    flex-direction: column; /* 讓 `gua-result` 和 `gua-tsusyou` 垂直排列 */
}

/* -------------------- 綜卦區塊(已隱藏) -------------------- */
.gua-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 20px;
    border: 5px solid #8B0000;
    background-color: #FFFFFF;
    width: 80%;
    max-width: 800px;
    border-radius: 8px;
}

/* 單個卦象區塊 */
.gua-item {
    text-align: center;
    flex: 1;
    margin: 10px;
    min-width: 150px;
}

/* -------------------- 文字樣式 -------------------- */
.gua-symbol {
    font-size: 2.5rem;
    font-weight: bold;
    color: #8B0000;
    margin-bottom: 5px;
}

.gua-name {
    font-size: 1.25rem;
    color: #333;
}


#gua-tsusyou{
	font-size: 1.1rem;
}

/* -------------------- 響應式設置 -------------------- */

/* 當螢幕寬度小於768px時 */
@media (max-width: 768px) {
	body{
		font-size: 14px;
	}
	
    .main-container {
        padding: 7.5px;
    }

    .left img {
        max-width: 70%;
    }

	.right {
    padding: 20px 2px;
}
	
    button {
        /*font-size: 24px;*/
        padding: 8px 16px;
    }

    .gua-select-search {
        width: 95%;
    }

    .gua-result {
        width: 100%;
        padding: 15px;
    }

    table,
    th,
    td {
        /*font-size: 16px;*/
    }
	
	/* 表格內容 */
	/*td {
		padding: 5px 2px;
	}*/

    td img {
        width: 100%;
        height: 1rem;
    }

    .gua-title {
        font-size: 1.5rem;
    }

    .gua-result p {
        font-size: 1.25rem;
    }
	/* 掛辭注音調整項 */
	#guaci.v.after [data-after]::after {
		top:-0.27rem;
	}
}

/* 當螢幕寬度小於480px時 */
@media (max-width: 480px) {
		body{
		font-size: 12px;
	}
	
    .left img {
        max-width: 80%;
    }

    button {
        /*font-size: 20px;*/
        padding: 6px 12px;
    }

    .gua-select-search {
        width: 100%;
    }

    .gua-result {
        width: 100%;
        padding: 10px;
    }

    table,
    th,
    td {
        /*font-size: 14px;*/
    }

    td img {
        width: 100%;
        height: 1rem;
    }

    .gua-title {
        font-size: 1.25rem;
    }

    /*.gua-result p {
        font-size: 1rem;
    }*/
		/* 掛辭注音調整項 */
	#guaci.v.after [data-after]::after {
		top:-0.4rem;
	}
	
	/*掛歌文字*/
	#uta_1-description p,
	#uta_2-description p{
		letter-spacing: 1.0rem;
		line-height: 1.5rem;
	}
	
	#uta_1-description .ji,
	#uta_2-description .ji{
		margin-right: -0.44rem;
	}
	
	/*掛歌注音*/
	#uta_1-description .bpmf,
	#uta_2-description .bpmf{
		font-size:35%;
		top: -0.1rem;/*X軸*/
		right: 2.0em;/*Y軸*/
}
	
	
}