@font-face {
  font-family: 'RobotoCondensed-ExtraLightItalic';
  src: url('/RobotoCondensed-ExtraLightItalic.ttf') format('truetype');
}

body { 
  font-family: sans-serif; 
  background: #f4f4f9; 
  margin: 0; 
  padding: 10px; 
  display: flex; 
  justify-content: center; 
  align-items: flex-start; 
  min-height: 100vh; 
  box-sizing: border-box;
}

.card { 
  background: white; 
  padding: 15px; 
  border-radius: 12px; 
  box-shadow: 0 4px 12px rgba(0,0,0,0.1); 
  width: 100%; 
  max-width: 600px; 
  text-align: center; 
  box-sizing: border-box; 
}

h1 { 
  font-size: 1.3rem; 
  margin-bottom: 15px; 
  color: #333; 
}

button { 
  background: #0070f3; 
  color: white; 
  border: none; 
  padding: 12px 20px; 
  border-radius: 6px; 
  font-size: 1rem; 
  cursor: pointer; 
  width: 100%; 
  box-sizing: border-box;
}

button:hover { 
  background: #0051a2; 
}

button:disabled { 
  background: #ccc; 
  cursor: not-allowed; 
}

.error { 
  color: #d32f2f; 
  font-weight: bold; 
  font-size: 1.1rem; 
  margin: 15px 0; 
}

.success { 
  color: #2e7d32; 
}

#reader { 
  width: 100%; 
  margin-top: 15px; 
}

.hidden { 
  display: none !important; 
}

/* 投票フォームのスタイル */
.group-container { 
  text-align: left; 
  margin-bottom: 25px; 
  border-bottom: 2px solid #eee; 
  padding-bottom: 15px; 
}

/* 1つの投票先カード */
.candidate-card { 
  display: flex; 
  align-items: center; 
  background: #fafafa; 
  border: 1px solid #ddd; 
  border-radius: 8px; 
  padding: 12px; 
  margin-bottom: 12px; 
  gap: 12px; 
  box-sizing: border-box;
}

/* 【置き換え箇所1】左側の画像（A4縦長や横長など、あらゆる比率に柔軟に対応） */
.candidate-img { 
  width: 90px; /* 基準となる横幅 */
  height: auto; /* 比率を保ったまま高さを自動調整 */
  max-height: 140px; /* A4縦長（1:1.41）であってもカード内で高くなりすぎないよう制限 */
  object-fit: contain; /* 画像が変形・トリミングされるのを防ぐ */
  border-radius: 6px; 
  flex-shrink: 0; 
  background: #fff; /* 余白が出る場合の背景色 */
}

/* 【置き換え箇所2】画像なし時のボックス（A4の比率 1:1.41 に合わせた縦長に変更） */
.candidate-no-image { 
  width: 90px; 
  height: 127px; /* 90px × 1.41 のA4比率を再現 */
  background: #cfcfcf; 
  color: #9a9a9a; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  border-radius: 6px; 
  font-size: 0.75rem; 
  font-weight: bold; 
  flex-shrink: 0; 
  border: 1px solid #cccccc; 
  font-family: 'RobotoCondensed-ExtraLightItalic', sans-serif;
}

/* 右側のエリア */
.candidate-right { 
  display: flex; 
  flex-direction: column; 
  flex-grow: 1; 
  text-align: left; 
  gap: 6px; 
  min-width: 0; 
}

.candidate-title { 
  margin: 0; 
  font-size: 1rem; 
  font-weight: bold;
  color: #333;
  word-break: break-all;
}

.candidate-desc { 
  font-size: 0.85rem; 
  color: #555; 
  line-height: 1.35; 
  word-break: break-all;
}

/* 投票コントロール */
.vote-controls { 
  display: flex; 
  align-items: center; 
  width: 100%;  
  gap: 8px;
  margin-top: 4px;
}

.vote-controls button { 
  position: relative; 
  width: 32px;  
  height: 32px; 
  font-size: 1.1rem; 
  font-weight: bold;
  border-radius: 6px;
  background: #0070f3;
  color: white;
  border: none;
  cursor: pointer;
  transition: background-color 0.1s ease, color 0.1s ease;
  flex-shrink: 0; 
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.vote-controls button::after {
  content: '';
  position: absolute;
  top: -6px;
  bottom: -6px;
  left: -6px;
  right: -6px;
}

.vote-controls button:hover:not(:disabled) { 
  background: #0051a2; 
}

.vote-controls button:disabled { 
  background: #e0e0e0 !important; 
  color: #999 !important;
  cursor: not-allowed; 
}

.btn-plus {
  margin-left: auto;
}

.vote-marks-container { 
  display: flex;
  flex-grow: 1; 
  justify-content: space-around; 
  align-items: center; 
  padding: 0 4px;
  overflow: hidden;
}

.vote-mark-item {
  font-size: 1.4rem; 
  font-weight: bold;
  color: #0070f3;
  display: flex;
  align-items: center;
  justify-content: center;
}

.remaining-votes { 
  font-size: 0.9rem;
  font-weight: bold; 
  color: #0070f3; 
  margin-bottom: 10px; 
  text-align: left; 
}

/* --- 極小デバイス（幅380px以下、iPhone SE等）向けの追加対策 --- */
@media screen and (max-width: 380px) {
  .candidate-card {
    flex-direction: column; 
    align-items: flex-start;
  }

  /* 【置き換え箇所3】スマホ縦並び時の画像サイズ調整（A4縦長が長くなりすぎないように制限） */
  .candidate-img {
    width: 100%;
    height: auto;
    max-height: 220px; /* スマホで縦長になりすぎるのを防ぐ上限 */
    object-fit: contain;
  }

  .candidate-no-image {
    width: 100%;
    height: 140px; /* 縦並びのときの「No image」の高さ */
  }

  .candidate-right {
    width: 100%;
  }
}