/**
 * ToySPN Builder - Stylesheet
 *
 * このCSSファイルはToySPN Builderの全体的なデザインを定義します。
 * - カラースキーム（CSS変数）
 * - レイアウト（タブ、パネル、カード）
 * - コンポーネント（ボタン、入力欄、グリッド）
 * - 可視化（SVG、ヒストグラム）
 * - レスポンシブデザイン
 */

/* ========================================================
   CSS変数（カラーパレット）
   ======================================================== */
:root{
  --bg:#f7f9fc;           /* 背景色（薄いグレーブルー） */
  --card:#ffffff;         /* カード背景（白） */
  --text:#1f2937;         /* テキスト色（濃いグレー） */
  --muted:#6b7280;        /* 補助テキスト色（ミュートグレー） */
  --accent:#2563eb;       /* アクセントカラー（青） */
  --danger:#dc2626;       /* エラー色（赤） */
  --ok:#059669;           /* 成功色（緑） */
  --border:#e5e7eb;       /* ボーダー色（薄いグレー） */
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

/* ========================================================
   基本スタイル
   ======================================================== */
*{ box-sizing: border-box; }

body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Hiragino Sans", "Noto Sans JP", sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
}

/* ========================================================
   ヘッダー・タブナビゲーション
   ======================================================== */
.app-header{
  background:var(--card);
  border-bottom:1px solid var(--border);
  padding:12px 16px;
  text-align:center;
}

.app-header h1{
  margin:0 0 6px;
  font-size:28px;
  font-weight:700;
}

.tagline{
  margin:0 0 12px;
  font-size:16px;
  color:var(--muted);
  font-weight:400;
}

/* タブボタン */
.tabs{
  display:flex;
  gap:8px;
  justify-content:center;
}

.tab{
  padding:8px 12px;
  border:1px solid var(--border);
  background:#fff;
  border-radius:8px;
  cursor:pointer;
  color:var(--text);
}

.tab.active{
  border-color:var(--accent);
  color:var(--accent);
  font-weight:600;
}

/* ========================================================
   メインコンテンツ・パネル
   ======================================================== */
main{
  padding:16px;
  max-width:1000px;
  margin:0 auto;
}

/* タブパネル（デフォルトは非表示） */
.panel{ display:none; }
.panel.active{ display:block; }

/* カードコンテナ */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:16px;
  margin-bottom:16px;
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
}

/* ========================================================
   グリッドレイアウト（S-Box / P層）
   ======================================================== */
.grid16{
  display:grid;
  grid-template-columns: repeat(16, minmax(50px, 1fr));
  gap:6px;
  margin:12px 0;
}

.grid16-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
}

.grid-label{
  font-size:11px;
  color:var(--text);
  font-family:var(--mono);
  font-weight:700;
  background:var(--border);
  padding:2px 6px;
  border-radius:4px;
  min-width:28px;
}

.grid16 input{
  width:100%;
  padding:8px;
  text-align:center;
  border:1px solid var(--border);
  border-radius:8px;
  font-family:var(--mono);
}

.grid16 input:focus{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-color:var(--accent);
}

/* ========================================================
   フォーム・入力コンポーネント
   ======================================================== */
.row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  margin:8px 0;
}

.config-group{
  display:flex; gap:12px; align-items:center; margin:12px 0;
}
.config-group label{
  flex:1; display:flex; flex-direction:column; gap:6px;
}
.config-group input{
  width:100%;
}
.config-group-inline{
  display:flex; gap:8px; align-items:center; margin:12px 0;
}
.config-group-inline label{
  font-weight:600; font-size:14px;
}
.input-short{
  width:80px; padding:8px; border:1px solid var(--border); border-radius:8px;
  font-family:var(--mono); text-align:center; transition:border-color 0.15s ease;
}
.input-short:focus{
  outline:2px solid var(--accent); outline-offset:2px; border-color:var(--accent);
}
.input-medium{
  width:120px; padding:8px; border:1px solid var(--border); border-radius:8px;
  font-family:var(--mono); text-align:center; transition:border-color 0.15s ease;
}
.input-medium:focus{
  outline:2px solid var(--accent); outline-offset:2px; border-color:var(--accent);
}
.btn{
  padding:8px 14px; border:1px solid var(--border); border-radius:8px; background:#fff; cursor:pointer;
  transition: all 0.15s ease;
}
.btn:hover:not(:disabled){
  filter:brightness(0.95); transform:translateY(-1px); box-shadow:0 2px 4px rgba(0,0,0,.1);
}
.btn.primary{ background:var(--accent); color:#fff; border-color:var(--accent); }
.btn.btn-warning{
  background:#fff; color:#d97706; border-color:#f59e0b; font-weight:600;
}
.btn.btn-warning:hover:not(:disabled){
  background:#fff9e6; border-color:#d97706;
}
.btn.btn-compact{
  padding:6px 10px; font-size:13px;
}
.btn:disabled{ opacity:.6; cursor:not-allowed; }

.validate-section{
  margin:20px 0; text-align:center;
}
.validate-btn{
  padding:14px 40px; font-size:17px; font-weight:600; min-width:240px;
  box-shadow:0 3px 12px rgba(37,99,235,0.4);
}
.validate-btn:hover:not(:disabled){
  box-shadow:0 5px 16px rgba(37,99,235,0.5);
}
.validate-result{
  margin-bottom:16px;
}
.validate-result h4{
  margin:0 0 12px; font-size:15px; color:var(--accent); font-weight:600;
}
.validate-details{
  font-family:var(--mono); font-size:14px; line-height:1.8;
}
.validate-details .detail-row{
  display:flex; justify-content:space-between; align-items:center; padding:6px 0;
  border-bottom:1px solid var(--border);
}
.validate-details .detail-row:last-child{
  border-bottom:none;
}
.validate-details .detail-label{
  font-weight:600; color:var(--text);
}
.validate-details .detail-value{
  color:var(--muted);
}
.validate-details .detail-value.ok{
  color:var(--ok); font-weight:600;
}
.validate-details .detail-value.ng{
  color:var(--danger); font-weight:600;
}

.status{ font-size:14px; color:var(--muted); padding:4px 8px; border-radius:4px; }
.status.ok{ color:var(--ok); background:rgba(5,150,105,0.1); }
.status.bad{ color:var(--danger); background:rgba(220,38,38,0.1); font-weight:500; }

input[type="text"], input[type="number"]{
  padding:8px; border:1px solid var(--border); border-radius:8px; font-family:var(--mono);
  transition: border-color 0.15s ease;
}
input[type="text"]:focus, input[type="number"]:focus{
  outline:2px solid var(--accent); outline-offset:2px; border-color:var(--accent);
}

.steps{
  max-height:420px; overflow:auto;
}
.step-round{
  border:1px solid var(--border); border-radius:8px; padding:12px; margin-bottom:8px; background:#fafafa;
  font-family:var(--mono); font-size:13px;
}
.step-round h4{
  margin:0 0 8px; font-size:14px; color:var(--accent); font-weight:600;
}
.step-row{
  display:flex; align-items:center; gap:8px; margin:4px 0;
}
.step-label{
  min-width:80px; color:var(--muted); font-size:12px;
}
.step-value{
  font-weight:600; color:var(--text); background:#fff; padding:4px 8px; border-radius:4px;
  border:1px solid var(--border);
}
.step-arrow{
  color:var(--muted); font-size:16px;
}

.mono{ font-family:var(--mono); background:#fafafa; padding:8px; border-radius:8px; border:1px solid var(--border); }

.help{ color:var(--muted); margin:4px 0 8px; }
.note{ font-size:14px; color:var(--muted); line-height:1.6; }

.visualization-section{
  margin-top:24px; padding-top:20px; border-top:2px dashed var(--border);
}
.visualization-section h3{
  margin:0 0 16px; font-size:15px; color:var(--accent); font-weight:600;
}
.sbox-visualization{
  width:100%; height:auto; max-width:800px; margin:0 auto; display:block;
  background:#fafafa; border:1px solid var(--border); border-radius:8px; padding:8px;
}
.viz-label{
  font-size:12px; fill:var(--muted); font-weight:600; font-family:var(--mono);
}
.viz-dot{
  r:5; stroke:var(--text); stroke-width:2;
}
.viz-dot.input{
  fill:#fff;
}
.viz-dot.output{
  fill:var(--accent);
}
.viz-arrow{
  stroke:var(--accent); stroke-width:1.5; fill:none; opacity:0.6;
  marker-end:url(#arrowhead);
}
.viz-arrow:hover{
  stroke-width:2.5; opacity:1;
}
.viz-text{
  font-size:11px; fill:var(--text); font-family:var(--mono); font-weight:600;
  text-anchor:middle;
}

.help-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; border-radius:50%; background:var(--muted);
  color:#fff; font-size:12px; font-weight:600; cursor:help;
  margin-left:6px; position:relative; vertical-align:middle;
}
.help-icon:hover{
  background:var(--accent);
}
.help-icon .tooltip{
  visibility:hidden; opacity:0; position:absolute; bottom:calc(100% + 8px); left:50%;
  transform:translateX(-50%); background:var(--text); color:#fff; padding:12px 16px;
  border-radius:8px; font-size:13px; font-weight:400; white-space:normal;
  width:360px; max-width:90vw; line-height:1.6; z-index:100; box-shadow:0 4px 12px rgba(0,0,0,0.2);
  transition:opacity 0.2s ease, visibility 0.2s ease;
}
.help-icon .tooltip::after{
  content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  border:6px solid transparent; border-top-color:var(--text);
}
.help-icon:hover .tooltip{
  visibility:visible; opacity:1;
}

.footer{
  max-width:1000px; margin:16px auto; padding:16px; color:var(--muted);
  border-top:1px solid var(--border); text-align:center;
}

.histogram-data{
  margin-top:12px; max-height:180px; overflow:auto;
  border:1px solid var(--border); border-radius:8px; background:#fafafa;
}
.histogram-data table{
  width:100%; border-collapse:collapse; font-family:var(--mono); font-size:13px;
}
.histogram-data th{
  background:var(--border); padding:6px 8px; text-align:left; font-weight:600;
  position:sticky; top:0;
}
.histogram-data td{
  padding:4px 8px; border-top:1px solid var(--border);
}
.histogram-data tr:hover{
  background:rgba(37,99,235,0.05);
}

.accordion-item{
  border:1px solid var(--border); border-radius:8px; margin-bottom:12px; overflow:hidden;
}
.accordion-header{
  width:100%; display:flex; justify-content:space-between; align-items:center;
  padding:14px 16px; background:#fff; border:none; cursor:pointer; text-align:left;
  font-size:15px; font-weight:600; color:var(--text); transition:background 0.2s ease;
}
.accordion-header:hover{
  background:var(--bg);
}
.accordion-icon{
  font-size:12px; color:var(--muted); transition:transform 0.3s ease;
}
.accordion-item.active .accordion-icon{
  transform:rotate(180deg);
}
.accordion-content{
  max-height:0; overflow:hidden; transition:max-height 0.3s ease;
  background:#fafafa;
}
.accordion-item.active .accordion-content{
  max-height:2000px;
}
.accordion-content > *:first-child{
  margin-top:0;
}
.accordion-content > *:last-child{
  margin-bottom:0;
}
.accordion-content{
  padding:0 16px;
}
.accordion-item.active .accordion-content{
  padding:16px;
}
.accordion-content h4{
  margin:16px 0 8px; font-size:14px; color:var(--accent); font-weight:600;
}
.accordion-content p{
  margin:8px 0; line-height:1.7;
}
.accordion-content ul, .accordion-content ol{
  margin:8px 0; padding-left:24px; line-height:1.7;
}
.accordion-content li{
  margin:4px 0;
}
.code-block{
  background:var(--text); color:#fff; padding:8px 12px; border-radius:6px;
  font-family:var(--mono); font-size:13px; display:block; margin:8px 0;
  overflow-x:auto;
}
.comparison-table{
  width:100%; border-collapse:collapse; margin:12px 0; font-size:13px;
}
.comparison-table th{
  background:var(--border); padding:8px; text-align:left; font-weight:600;
}
.comparison-table td{
  padding:8px; border-top:1px solid var(--border);
}
.comparison-table tr:hover{
  background:rgba(37,99,235,0.05);
}

.expert-hint{
  background:linear-gradient(135deg, #fff9e6 0%, #fff 100%);
  border-left:4px solid #f59e0b;
}
.expert-hint h3{
  margin:0 0 12px; font-size:16px; color:#d97706; font-weight:600;
}
.hint-content{
  font-size:14px; line-height:1.7;
}
.hint-content .hint-section{
  margin-bottom:16px;
}
.hint-content .hint-section:last-child{
  margin-bottom:0;
}
.hint-content h4{
  margin:0 0 6px; font-size:14px; color:var(--accent); font-weight:600;
}
.hint-content ul{
  margin:6px 0; padding-left:20px;
}
.hint-content li{
  margin:4px 0;
}
.hint-verdict{
  display:inline-block; padding:4px 10px; border-radius:4px; font-weight:600;
  margin-right:8px;
}
.hint-verdict.excellent{
  background:rgba(5,150,105,0.15); color:var(--ok);
}
.hint-verdict.good{
  background:rgba(37,99,235,0.15); color:var(--accent);
}
.hint-verdict.fair{
  background:rgba(245,158,11,0.15); color:#d97706;
}
.hint-verdict.poor{
  background:rgba(220,38,38,0.15); color:var(--danger);
}

@media (max-width: 768px){
  .grid16{
    grid-template-columns: repeat(4, 1fr);
  }
  .tabs{
    overflow-x:auto; -webkit-overflow-scrolling:touch;
  }
  .row{
    flex-direction:column; align-items:stretch;
  }
  .step-row{
    flex-direction:column; align-items:flex-start;
  }
  .step-label{
    min-width:auto;
  }
  .comparison-table{
    font-size:12px;
  }
  .comparison-table th, .comparison-table td{
    padding:6px;
  }
}