/* Text Counter v2 */
.tc { margin: 8px 0 24px; }
.tc-pane { display: flex; flex-direction: column; min-width: 0; }
.tc-pane-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  margin-bottom: 8px;
}
.tc-pane-title { font-size: 13px; font-weight: 800; color: #6b6157; }
.tc-clear {
  margin-left: auto;
  padding: 7px 16px;
  font-size: 12.5px;
  font-weight: 800;
  color: #221d18;
  background: #fff;
  border: 1.5px solid #221d18;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.tc-clear:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(34, 29, 24, 0.2); }
.tc textarea {
  width: 100%;
  min-height: 280px;
  padding: 14px;
  font-family: "Hiragino Sans", Meiryo, sans-serif;
  font-size: 14px;
  line-height: 1.8;
  border: 1.5px solid #221d18;
  border-radius: 12px;
  background: #fff;
  resize: vertical;
}
.tc textarea:focus { outline: 2px solid #ff7a00; outline-offset: 1px; }

/* カウントカード */
.tc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 16px;
}
.tc-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  background: #fff;
  border: 1.5px solid #221d18;
  border-radius: 12px;
  min-width: 0;
}
.tc-card-label { font-size: 12px; font-weight: 800; color: #6b6157; }
.tc-card-value {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}
.tc-num {
  font-size: 24px;
  font-weight: 800;
  color: #221d18;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.tc-unit { font-size: 13px; font-weight: 800; color: #6b6157; }
.tc-copy {
  margin-left: auto;
  align-self: center;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  background: #ff7a00;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.tc-copy:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(255, 122, 0, 0.4); }
.tc-copy.is-done { background: #16a34a; }

/* SEO目安メーター */
.tc-seo {
  margin-top: 16px;
  padding: 14px 18px 10px;
  background: #fff4e6;
  border: 1.5px solid #221d18;
  border-radius: 12px;
}
.tc-seo-title { margin: 0 0 12px; font-size: 13.5px; font-weight: 800; color: #221d18; }
.tc-meter { margin-bottom: 14px; }
.tc-meter-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
}
.tc-meter-label { font-size: 12.5px; font-weight: 800; color: #221d18; }
.tc-meter-count {
  margin-left: auto;
  font-size: 12px;
  font-weight: 800;
  color: #6b6157;
  font-variant-numeric: tabular-nums;
}
.tc-meter-bar {
  height: 12px;
  background: #fff;
  border: 1.5px solid #221d18;
  border-radius: 999px;
  overflow: hidden;
}
.tc-meter-fill {
  height: 100%;
  width: 0%;
  background: #ff7a00;
  border-radius: 999px;
  transition: width 0.2s ease, background-color 0.2s ease;
}
.tc-meter-fill.is-over { background: #e11d48; }
.tc-meter-note { margin: 5px 0 0; font-size: 11.5px; color: #6b6157; }
.tc-meter-note.is-over { color: #e11d48; font-weight: 700; }
.tc-seo-caption { margin: 4px 0 4px; font-size: 11px; color: #a89d90; }

@media (max-width: 768px) {
  .tc-grid { grid-template-columns: 1fr; }
  .tc textarea { min-height: 200px; }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .tc-grid { grid-template-columns: repeat(2, 1fr); }
}