@font-face {
  font-family: 'LINESeed';
  src: url('fonts/LINESeedTW_OTF_Bd.woff2') format('woff2');
  font-weight: bold;
  font-style: normal;
}

body {

  margin: 0;
  padding: 0;
  background: #f3b91e;
  color: #fff;
  font-family: sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

h1 {
  margin-bottom: 40px;
  text-align: center;
}

#BG {
position: absolute;
z-index: 0;
top: 50%;
left: 50%;
transform: translate(-50%, -45%);

}

#BG img{
  width: 85vw; 
}

#BG2 {
  display: none;
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -45%);

}

#BG2 img{
  width: 85vw; 
}

.effectLine {
position: absolute;
z-index: 0;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

}

.effectLine img{
  width: 100vw; 
}

#textInput {
  font-family: 'LINESeed';
  font-weight: bold;
  font-size: 18px;
  color: black;
  border: none;
  outline: none;
  position: absolute;
  width: 45vw;
  height: 15vw;
  background: transparent;
  border: none;
  z-index: 2;
  cursor: pointer;
  top: 50%;
  left: 50%;
  transform: translate(-40%, 100%);
  
}

textarea::placeholder {
  color: #aaaaaa;       /* 設定顏色 */
}

.placeholder {
  font-family: 'LINESeed';
  position: absolute;
  text-align: center;
  z-index: 3;
  
  top: 50%;
  left: 50%;
  transform: translate(-40%, 75%);
  pointer-events: none; /* 不影響輸入 */
  color: #aaaaaa; 
}

.placeholder .chinese {
  display: block;       /* 每行獨立 */
  line-height: 1.4;       /* 中文行距 */
  font-size: 16px;      /* 中文字體大小 */
}

/* 英文行距 */
.placeholder .english {
  display: block;       /* 每行獨立 */
  line-height: 1.5;     /* 英文行距 */
  font-size: 12px;      /* 英文字體大小 */
}




#charCount {
  font-family: 'LINESeed';
  font-weight: bold;
  font-size: 12px;
  text-align: center;
  color: black;
  width: 100%;
  height: auto;
  z-index: 2;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-48%, 730%);
}



#form {
  display: flex;
  flex-direction: column;
  align-items: center;
}


.send {
  position: absolute;
  width: 32vw;
  height: auto;
  background: transparent;
  border: none;
  z-index: 2;
  cursor: pointer;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 420%);
} 

.send img {
  width: 32vw;
}




#status {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-30%, 1000%);
  font-size: 12px;
  text-align: center;
  min-height: 16px; /* 保持區塊高度避免閃動 */
}

.success {
  color: #90ee90; /* 淡綠色 */
}

.error {
  color: red;
}

#debug {
  position: fixed;
  bottom: 10px;
  left: 10px;
  background: rgba(0,0,0,0.6);
  color: #0f0;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 14px;
  display: none; /* 預設隱藏 */
  white-space: pre-line;
}