/* 左右2ペイン変換（convert-common） */
[hidden] { display: none !important; }
.cv-panes { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 0.6rem; align-items: stretch; }
.cv-pane { display: flex; flex-direction: column; min-width: 0; }
.cv-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.35rem; flex-wrap: wrap; }
.cv-head label { font-weight: 700; font-size: 0.92rem; margin: 0; }
.cv-btns { display: flex; gap: 0.3rem; }
.cv-ta { width: 100%; box-sizing: border-box; min-height: 9rem; flex: 1 1 auto; resize: vertical; line-height: 1.6; font-size: 1rem; padding: 0.6rem 0.7rem; }
.cv-ta.mono { font-family: "SFMono-Regular", Consolas, "Courier New", monospace; letter-spacing: 0.06em; word-break: break-all; }
.cv-count { text-align: right; font-size: 0.75rem; color: var(--text-sub); min-height: 1.1rem; margin-top: 0.2rem; }
.cv-mid { align-self: center; font-size: 1.4rem; color: var(--text-sub); }
.cv-panes + .pt-notice { margin-top: 0.6rem; }

.cv-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.2rem; margin-bottom: 0.9rem; }
.cv-opt { display: flex; align-items: center; gap: 0.5rem; font-size: 0.88rem; }
.cv-opt > span { color: var(--text-sub); }

.cv-chart { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.4rem, 1fr)); gap: 0.3rem; margin-top: 0.6rem; }
.cv-chart > div { border: 1px solid var(--border); border-radius: 6px; padding: 0.25rem 0.4rem; background: var(--surface); text-align: center; }
.cv-chart b { display: block; font-size: 1.1rem; line-height: 1.3; }
.cv-chart code { display: block; font-size: 0.82rem; color: var(--text-sub); font-family: "SFMono-Regular", Consolas, monospace; word-break: break-all; }

@media (max-width: 720px) {
  .cv-panes { grid-template-columns: minmax(0, 1fr); }
  .cv-mid { transform: rotate(90deg); justify-self: center; line-height: 1; }
  .cv-ta { min-height: 7rem; }
}