/* ==========================================================================
   Page Template Maker - tool-specific styles
   （共通スタイルは tool-common.css に依存）
   ========================================================================== */

/* ===== Layout overrides ===== */
.tool--page-template-maker .tool__inner { max-width: 1400px; }

/* ===== Section（番号バッジ付きセクション） ===== */
.tool--page-template-maker .tool__section{
  margin-top:20px;
  padding:20px 24px;
  background:var(--tool-surface);
  border:1px solid var(--tool-border);
  border-radius:var(--tool-radius);
}
.tool--page-template-maker .tool__section:first-of-type{ margin-top:0; }
.tool--page-template-maker .tool__section-head{
  display:flex; align-items:center; gap:12px;
  margin-bottom:18px; padding-bottom:14px;
  border-bottom:1px solid var(--tool-border);
}
.tool--page-template-maker .tool__section-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px;
  background:var(--tool-accent); color:var(--tool-accent-text);
  font-size:11px; font-weight:700;
  border-radius:var(--tool-radius-sm, 6px);
  font-family:Consolas,monospace;
}
.tool--page-template-maker .tool__section-title{
  font-size:15px; font-weight:600; color:var(--tool-text);
}

/* ===== 設定エリア 2カラム ===== */
.ptm-config{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}
.ptm-config__col{ display:flex; flex-direction:column; gap:14px; }
.ptm-config__block + .ptm-config__block{
  margin-top:14px; padding-top:14px;
  border-top:1px dashed var(--tool-border);
}
.ptm-config__block-label{
  font-size:11px; font-weight:700; letter-spacing:.08em;
  color:var(--tool-muted);
  margin-bottom:10px;
  text-transform:uppercase;
}

/* ===== Field ===== */
.tool--page-template-maker .tool__field{
  display:flex; flex-direction:column; gap:5px;
}
.tool--page-template-maker .tool__field + .tool__field{ margin-top:10px; }
.tool--page-template-maker .tool__field-label{
  font-size:11px; font-weight:600; color:var(--tool-text);
}
.tool--page-template-maker .tool__field-req{
  color:var(--tool-accent); margin-left:2px;
}
.tool--page-template-maker .tool__field-hint{
  font-size:10px; color:var(--tool-muted); line-height:1.5;
}

/* ===== Input ===== */
.tool--page-template-maker .tool__input{
  background:var(--tool-surface-2);
  border:1px solid var(--tool-border);
  color:var(--tool-text);
  padding:8px 10px;
  font-size:12px;
  border-radius:var(--tool-radius-sm, 6px);
  font-family:inherit;
  outline:none;
  transition:border-color .15s;
}
.tool--page-template-maker .tool__input:focus{ border-color:var(--tool-accent); }
.tool--page-template-maker .tool__input.is-error{ border-color:var(--tool-danger); }

/* ===== Radio / Check ===== */
.tool--page-template-maker .tool__radios,
.tool--page-template-maker .tool__checks{
  display:flex; flex-direction:column; gap:7px;
}
.tool--page-template-maker .tool__radio,
.tool--page-template-maker .tool__check{
  display:flex; align-items:center; gap:8px;
  cursor:pointer; font-size:12px; color:var(--tool-text);
}
.tool--page-template-maker .tool__radio input,
.tool--page-template-maker .tool__check input{
  accent-color:var(--tool-accent);
  width:14px; height:14px; cursor:pointer; flex-shrink:0;
}
.tool--page-template-maker .tool__selector-fields{
  margin-top:10px; padding:12px;
  background:var(--tool-surface-2);
  border-radius:var(--tool-radius-sm, 6px);
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
}
.tool--page-template-maker .tool__selector-fields[hidden]{ display:none; }

/* ===== Workspace（Input + Preview 2カラム） ===== */
.ptm-workspace{
  display:grid;
  grid-template-columns:minmax(0, 2fr) minmax(0, 3fr);
  gap:16px;
  margin-top:20px;
}

/* ===== Actions（上下アクションバー） ===== */
.ptm-actions{
  display:flex; align-items:center; justify-content:center;
  gap:10px;
  margin-top:20px;
  padding:14px;
  background:var(--tool-surface);
  border:1px solid var(--tool-border);
  border-radius:var(--tool-radius);
  flex-wrap:wrap;
}

/* ===== Textarea / Preview ===== */
.tool--page-template-maker .wpc__textarea{
  width:100%;
  flex:1;
  min-height:520px;
  background:#ffffff;
  border:1px solid var(--tool-border);
  border-radius:var(--tool-radius);
  color:var(--tool-text);
  padding:14px;
  font-family:"SFMono-Regular",Consolas,Monaco,monospace;
  font-size:12px;
  line-height:1.6;
  resize:none;
  outline:none;
  display:block;
  transition:border-color .15s;
}
.tool--page-template-maker .wpc__textarea:focus{
  border-color:var(--tool-accent);
  background:#ffffff;
}
.tool--page-template-maker .wpc__output{ background:var(--tool-surface-2); }
.tool--page-template-maker .wpc__preview{
  background:var(--tool-surface-2);
  padding:14px;
  font-family:"SFMono-Regular",Consolas,Monaco,monospace;
  font-size:12px;
  line-height:1.6;
  color:var(--tool-text);
  flex:1;
  min-height:520px;
  overflow:auto;
  white-space:pre-wrap;
  word-break:break-all;
  margin:0;
}
.tool--page-template-maker .wpc__preview[hidden],
.tool--page-template-maker .wpc__textarea[hidden]{ display:none !important; }

/* ===== Panel layout（パネル内部flex） ===== */
.tool--page-template-maker .tool__panel{
  display:flex;
  flex-direction:column;
  min-width:0;
}

/* ===== Syntax highlight ===== */
.tool--page-template-maker .tok-php{ color:#9333ea; }
.tool--page-template-maker .tok-comment{ color:#6b6e78; }

/* ===== Status states ===== */
.tool--page-template-maker .tool__status.is-success{
  border-color:var(--tool-success);
  color:var(--tool-success);
}
.tool--page-template-maker .tool__status.is-error{
  border-color:var(--tool-danger);
  color:var(--tool-danger);
}

/* ===== Responsive ===== */
@media (max-width: 980px){
  .ptm-workspace{ grid-template-columns:1fr; }
}
@media (max-width: 880px){
  .ptm-config{ grid-template-columns:1fr; gap:20px; }
}