/* =====================================================================
   style.css — HTML→Markdown変換 ツール固有の微調整。
   共通スタイルは /_shared/shirugear.css に任せ、ここでは2ペイン
   レイアウトと入出力テキストエリアの体裁のみ定義する。
   ===================================================================== */

/* 2ペイン（PCは左右、スマホは縦） */
.conv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sg-space-4, 16px);
  align-items: stretch;
}
@media (max-width: 720px) {
  .conv-grid {
    grid-template-columns: 1fr;
  }
}

.conv-pane {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.conv-pane__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sg-space-3, 12px);
  margin-bottom: var(--sg-space-2, 8px);
  min-height: 2em;
}

.conv-input,
.conv-output {
  flex: 1;
  min-height: 360px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9rem;
  line-height: 1.6;
  resize: vertical;
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: auto;
}

.conv-output {
  background: var(--sg-surface-2, #f4f6fb);
}

.conv-copy {
  padding: 4px 12px;
  font-size: 0.8rem;
}

.conv-count {
  margin-top: var(--sg-space-2, 8px);
  text-align: right;
}