/* =======================
   공통 스타일
======================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  font-family: 'wjsans', 'qhsownj', sans-serif;
  font-size: 16px; /* 기본 폰트 */
  line-height: 1.6;
  color: #222;
  background-color: #fff;
   -webkit-text-size-adjust: 100%
}

.center-text {
  text-align: center;
  margin-top: 100px;
  padding: 0 10px;
}

.note {
  display: none;
  margin-top: 10px;
  text-align: center;
  font-size: 14px; /* <p> 기준 */
  color: #555;
}

h4 {
  font-size: 16px; /* 기본 h4 크기 */
  margin-bottom: 6px;
}

.two-column {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

/* 컬럼 내부 중앙 정렬 */
.column {
  display: flex;
  flex-direction: column;
  align-items: center;  /* 가로 중앙 정렬 */
  text-align: center;   /* 텍스트 중앙 */
  padding: 10px;
  width: 200px;
}

/* h4 글자 크기 줄이기 */
#noteGood h4,
#noteBad h4 {
  font-size: 14px;
  margin-bottom: 8px;
}

/* textarea 기본 스타일 (PC용) */
#noteGood textarea,
#noteBad textarea,
#noteSText {
  width: 100%;
  max-width: 180px;
  text-align: left;
  margin-bottom: 8px;
  font-size: 14px;
  font-family: 'wjsans', 'qhsownj', sans-serif;
}

/* 버튼 중앙 정렬 */
#noteGood button,
#noteBad button,
#noteSText + button {
  margin-bottom: 8px;
  font-size: 14px;
  font-family: 'wjsans', 'qhsownj', sans-serif;
  display: block;
  margin: 0 auto 8px auto;
}

.clickable {
  cursor: pointer;
  transition: font-weight 0.2s;
}

.clickable:hover {
  font-weight: bold;
}

/* 투표바 스타일 */
.percent-bar-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
}

.percent-bar {
  width: 80%;
  max-width: 300px;
  height: 6px;
  background-color: #ddd;
  margin: 0 auto;
}

.percent-fill {
  height: 100%;
  width: 0%;
  background-color: #4a90e2;
  transition: width 0.2s ease;
}

.percent-value {
  margin-top: 8px;
  font-size: 14px;
  font-family: 'wjsans', 'qhsownj', sans-serif;
}

.ip-container {
  white-space: normal;
  word-break: break-word;
  overflow-x: hidden;
}

/* PC / 모바일 텍스트 */
.pc-text { display: inline-block; }
.mobile-text { display: none; }

/* =======================
   반응형 스타일
======================= */
@media screen and (max-width: 768px) {
  html, body { font-size: 15px; }
  .center-text { margin-top: 60px; }
  .note { font-size: 14px; }
  h4 { font-size: 15px; }
  textarea, button { font-size: 14px; }

  /* 모바일 1컬럼 중앙 정렬 */
  .two-column {
    flex-direction: column;
    align-items: center;
    gap: 15px;
  }

  .column {
    width: 90%;
    max-width: 400px;
    text-align: center;
  }

  /* textarea 공통 모바일 스타일 */
  #noteGood textarea,
  #noteBad textarea,
  #noteSText {
    width: 100% !important;
    display: block;
    margin: 0 auto 8px auto;
    text-align: left;
    border-radius: 0 !important;
    border: 1.5px solid #ccc;
    background: #fff;
    padding: 6px;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-shadow: none !important;
    outline: none;
  }

  #noteGood button,
  #noteBad button,
  #noteSText + button {
    display: block;
    margin: 0 auto 10px auto;
  }

  .pc-text { display: none !important; }
  .mobile-text { display: inline !important; font-size: 15px; }
}

@media screen and (max-width: 480px) {
  html, body { font-size: 14px; }
  .center-text { margin-top: 40px; }
  .note { font-size: 13px; }
  h4 { font-size: 14px; }
  textarea, button { font-size: 13px; }

  .two-column {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  .column {
    width: 95%;
    max-width: 360px;
  }

  #noteGood textarea,
  #noteBad textarea,
  #noteSText {
    width: 100% !important;
    display: block;
    margin: 0 auto 6px auto;
    text-align: left;
    border-radius: 0;
    box-shadow: none;
    border: 1.5px solid #ccc;
  }

  #noteGood button,
  #noteBad button,
  #noteSText + button {
    display: block;
    margin: 0 auto 8px auto;
  }

  .mobile-text { font-size: 14px; }
}

/* Floating 버튼 */
#floatingBad,
#floatingGood {
  position: absolute;
  cursor: pointer;
  color: black;
  font-weight: bold;
}