/* 修正：削減量の色を確実に反映 */
.metric-row.success span:last-child {
    color: #16a34a;
    font-weight: 700;
}

/* 他のスタイルはこれまでのデザインを維持 */
.tool-island { background: #fff; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); margin:-60px 0 0; border: 1px solid #e2e8f0; overflow: hidden; }
.island-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; min-height: 600px; background: #f1f5f9; gap: 1px; }
@media (max-width: 992px) { .island-grid { grid-template-columns: 1fr; } }
.input-panel, .diagnostic-panel { padding: 30px; background: #fff; }
.panel-header { margin-bottom: 20px; border-bottom: 2px solid #f1f5f9; padding-bottom: 12px; }
.panel-header .label { font-size: 11px; font-weight: 900; color: #94a3b8; letter-spacing: 0.15em; text-transform: uppercase; }
#htmlInput { width: 100%; height: 320px; padding: 16px; border: 1px solid #e2e8f0; border-radius: 8px; font-family: 'Fira Code', monospace; font-size: 14px; background: #fafafa; }
.minify-options { margin: 24px 0; padding: 20px; background: #f8fafc; border-radius: 10px; display: flex; flex-direction: column; gap: 15px; }
.option-group-title { font-size: 12px; font-weight: 800; color: #64748b; margin-bottom: 5px; }
.option-item { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; color: #334155; cursor: pointer; }
.primary-btn { width: 80%; padding: 16px; background: #2563eb; color: #fff; border: none; border-radius: 8px; font-size: 15px; font-weight: 700; cursor: pointer; }
.score-circle-area { text-align: center; padding: 20px 0; }
.score-circle { width: 140px; height: 140px; margin: 0 auto 10px; position: relative; }
.score-circle svg { transform: rotate(-90deg); width: 100%; height: 100%; }
.circle-bg { fill: none; stroke: #f1f5f9; stroke-width: 3; }
.circle-progress { fill: none; stroke: #22c55e; stroke-width: 3; stroke-linecap: round; transition: stroke-dasharray 1s ease-out; }
.score-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-weight: 800; color: #1e293b; }
.score-text span { font-size: 40px; }
.metrics-list { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 15px; margin: 20px 0; }
.metric-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #f1f5f9; font-size: 14px; }
.metric-row:last-child { border: none; }
.copy-btn { width: 100%; padding: 14px; background: #1e293b; color: #fff; border-radius: 8px; border: none; font-weight: 600; cursor: pointer; margin-top: 10px; }
.placeholder-msg { height: 100%; display: flex; align-items: center; justify-content: center; color: #94a3b8; font-style: italic; text-align: center; }

/* 変換後プレビューエリアのスタイル */
.preview-section {
    margin-top: 20px;
    animation: fadeIn 0.4s ease-out;
}

#htmlPreview {
    width: 100%;
    height: 180px; /* 少しコンパクトに */
    padding: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-family: 'Fira Code', monospace;
    font-size: 12px;
    background: #1e293b; /* 濃い紺色で出力感を出す */
    color: #e2e8f0;
    line-height: 1.5;
    resize: none; /* プレビューなのでリサイズ不可 */
    cursor: default;
}

/* スクロールバーのカスタマイズ（任意） */
#htmlPreview::-webkit-scrollbar { width: 6px; }
#htmlPreview::-webkit-scrollbar-thumb { background: #475569; border-radius: 10px; }

.tool-island--preview{
  margin-top: 14px;
}

.preview-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 18px;
  background:#fff;
}

@media (max-width: 992px){
  .preview-grid{ grid-template-columns: 1fr; }
}

.preview-title{
  font-size: 12px;
  font-weight: 800;
  color:#64748b;
  margin: 0 0 8px;
}

.preview-area{
  width:100%;
  min-height: 240px;
  padding: 14px;
  border:1px solid #e2e8f0;
  border-radius: 10px;
  font-family: 'Fira Code', monospace;
  font-size: 13px;
  background:#fafafa;
  resize: vertical;
}

.preview-frame{
  width:100%;
  min-height: 240px;
  border:1px solid #e2e8f0;
  border-radius: 10px;
  background:#fff;
}

.preview-note{
  margin: 8px 0 0;
  font-size: 12px;
  color:#94a3b8;
}
/* ===== OPTIMIZED PREVIEW（全幅） ===== */

.tool-island--preview{
  margin-top: 14px;
}

.preview-single{
  padding: 0px 25px 20px;
  background: #fff;
}

/* 全幅・コード特化 */
.preview-area--wide{
  width: 100%;
  min-height: 360px;
  padding: 16px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  font-family: 'Fira Code', monospace;
  font-size: 13px;
  line-height: 1.6;
  background: #1e293b;   /* 出力感のある濃紺 */
  color: #e5e7eb;
  resize: vertical;
}

/* スクロールバー（任意・統一感） */
.preview-area--wide::-webkit-scrollbar{
  width: 8px;
}
.preview-area--wide::-webkit-scrollbar-thumb{
  background: #475569;
  border-radius: 10px;
}
.secondary-btn{
  padding:16px 20px;
  background:#f1f5f9;
  color:#334155;
  border:1px solid #e2e8f0;
  border-radius:8px;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
}

.secondary-btn:hover{
  background:#e2e8f0;
}
@media (max-width: 768px) {

  /* 入力・結果パネルの余白を圧縮 */
  .input-panel,
  .diagnostic-panel {
    padding: 16px;
  }

  /* 下段：最適化後HTML（全幅プレビュー） */
  .preview-single {
    padding: 0 16px 20px;
  }

  /* テキストエリアの高さをSP向けに調整 */
  #htmlInput {
    height: 240px;
  }

  #htmlPreview {
    min-height: 200px;
    font-size: 12px;
  }

  /* 円グラフ周りを少しコンパクトに */
  .score-circle {
    width: 120px;
    height: 120px;
  }

  .score-text span {
    font-size: 32px;
  }

  /* 実行・クリアボタンを縦積みに */
  .input-panel .primary-btn,
  .input-panel .secondary-btn {
    width: 100%;
  }

  /* metrics の行間を少し詰める */
  .metric-row {
    padding: 8px 0;
    font-size: 13px;
  }
}