/* ==========================================================================
   common.css
   WEB CRAFT LAB — サイト共通スタイル
   カラー変数 / レイアウト / フォーム部品 / スライダー / コード出力 / FAQ など
   各ツールで共通のスタイルをまとめています。各ツール固有のプレビュー表示など
   （.prop-tabs, .pad-card, .mock-nav 等）はそれぞれのHTML内 <style> に残しています。
   ========================================================================== */

:root{
  --ink:#12131a;
  --ink-2:#1b1d27;
  --panel:#20222e;
  --line:#333648;
  --paper:#f4f2ec;
  --paper-dim:#b9b8c9;
  --lime:#c8ff4d;
  --lime-dim:#7c8f3a;
  --teal:#57e0c9;
  --coral:#ff7a6b;
  --radius:14px;
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:'Inter',sans-serif;
  -webkit-font-smoothing:antialiased;
}
.wrap{
  max-width:1440px;
  margin:0 auto;
  padding:0 24px;
}
header{
  height:70px;
  overflow:hidden;
  margin-bottom:24px;
  border-bottom:1px solid var(--line);
  padding-bottom:8px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.header-title{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
}
.eyebrow{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  line-height:1;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--lime);
  margin:0 0 6px;
  white-space:nowrap;
}
h1{
  font-family:'Space Grotesk',sans-serif;
  font-size:clamp(20px,2.6vw,28px);
  font-weight:700;
  line-height:1.15;
  margin:0;
  letter-spacing:-0.01em;
  display:flex;
  align-items:baseline;
  gap:8px;
  min-width:0;
}
h1 .title-text{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-width:0;
}
h1 .version{
  font-family:'JetBrains Mono',monospace;
  font-size:12px;
  font-weight:500;
  color:var(--paper-dim);
  letter-spacing:0;
  flex-shrink:0;
}
.beta-note{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14px 18px;
  margin:0 0 20px;
  color:var(--paper-dim);
  font-size:13.5px;
  line-height:1.8;
}
.beta-note b{color:var(--paper);}
.beta-note a{color:var(--lime);}
.beta-note ul{margin:4px 0 0;padding-left:1.2em;}
.beta-note li{margin:2px 0;}
.breadcrumb{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  font-size:12.5px;
  color:var(--paper-dim);
  margin:0 0 16px;
}
.breadcrumb a{color:var(--paper-dim);text-decoration:underline;}
.breadcrumb a:hover{color:var(--lime);}
.breadcrumb .sep{color:var(--line);}
.breadcrumb .current{color:var(--paper);}
.panel-primary{
  border-color:var(--lime-dim);
  margin-bottom:20px;
}
.panel-primary h2{margin-bottom:16px;}

/* パネル1: 中身をすべて横並びの1行にする */
.panel-row{
  display:flex;
  flex-wrap:wrap;
  align-items:stretch;
  gap:22px;
}
.device-group{
  flex:1 1 260px;
  min-width:240px;
}
.device-group + .device-group{
  border-left:1px solid var(--line);
  padding-left:22px;
}
@media (max-width:560px){
  .device-group + .device-group{
    border-left:none;
    padding-left:0;
  }
}
.device-group-fields{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
}
.device-group-fields .field-big,
.device-group-fields .field{
  margin-bottom:0;
  flex:1 1 110px;
  min-width:100px;
}
.field-big{margin-bottom:18px;}
.field-big:last-of-type{margin-bottom:16px;}
.field-big label{
  display:block;
  font-family:'Space Grotesk',sans-serif;
  font-size:16px;
  font-weight:600;
  color:var(--paper);
  line-height:20px;
  margin-bottom:8px;
}
.field-big .row{display:flex;align-items:center;gap:8px;}
.field-big input[type=number]{
  width:100%;
  height:50px;
  background:var(--ink);
  border:1px solid var(--line);
  color:var(--lime);
  font-family:'JetBrains Mono',monospace;
  font-size:24px;
  font-weight:600;
  padding:0 14px;
  border-radius:10px;
  outline:none;
}
.field-big input[type=number]:focus{border-color:var(--lime);}
.field label .hint{
  display:block;
  font-family:'JetBrains Mono',monospace;
  font-size:12.5px;
  font-weight:400;
  color:var(--paper-dim);
  margin-top:2px;
}
.bottom-grid > .panel + .panel{
  margin-top:0;
}
.panel{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px;
}
.panel + .panel{margin-top:20px;}
.panel h2{
  font-family:'Space Grotesk',sans-serif;
  font-size:16px;
  font-weight:600;
  margin:0 0 18px;
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--paper);
}
.panel h2 .n{
  font-family:'JetBrains Mono',monospace;
  font-size:13px;
  background:var(--ink);
  border:1px solid var(--line);
  color:var(--lime);
  width:20px;height:20px;
  border-radius:5px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.reset-btn{
  flex-shrink:0;
  background:transparent;
  border:1px solid var(--line);
  color:var(--paper-dim);
  font-family:'JetBrains Mono',monospace;
  font-size:13px;
  padding:6px 12px;
  border-radius:7px;
  cursor:pointer;
  transition:all .15s ease;
}
.reset-btn:hover{border-color:var(--coral);color:var(--coral);}
.field{margin-bottom:16px;}
.field:last-child{margin-bottom:0;}
.field label{
  display:block;
  font-size:14px;
  color:var(--paper-dim);
  line-height:20px;
  margin-bottom:8px;
}
.field .row{
  display:flex;
  align-items:center;
  gap:8px;
}
.field input[type=number]{
  width:100%;
  height:50px;
  background:var(--ink);
  border:1px solid var(--line);
  color:var(--paper);
  font-family:'JetBrains Mono',monospace;
  font-size:17px;
  padding:0 12px;
  border-radius:8px;
  outline:none;
}
.field input[type=number]:focus{border-color:var(--lime);}
.unit{font-family:'JetBrains Mono',monospace;font-size:14px;color:var(--paper-dim);}
.warn{
  margin-top:14px;
  font-size:14px;
  color:var(--coral);
  font-family:'JetBrains Mono',monospace;
  line-height:1.6;
}

/* simulator */
.sim-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  margin-bottom:16px;
  flex-wrap:wrap;
  gap:16px;
}
.sim-readout-big{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.sim-readout-big .sim-label{
  font-family:'JetBrains Mono',monospace;
  font-size:13px;
  letter-spacing:.08em;
  color:var(--paper-dim);
}
.sim-readout-big b,
.sim-readout-big .fs{
  font-family:'Space Grotesk',sans-serif;
  font-size:32px;
  font-weight:700;
  line-height:1;
  color:var(--lime);
}
.sim-readout-big .fs{color:var(--teal);}
input[type=range]{
  width:100%;
  -webkit-appearance:none;
  height:6px;
  background:var(--line);
  border-radius:3px;
  outline:none;
  margin:6px 0 4px;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:18px;height:18px;
  border-radius:50%;
  background:var(--lime);
  border:3px solid var(--ink);
  box-shadow:0 0 0 1px var(--lime);
  cursor:grab;
}
input[type=range]::-moz-range-thumb{
  width:18px;height:18px;
  border-radius:50%;
  background:var(--lime);
  border:3px solid var(--ink);
  cursor:grab;
}
.slider-wrap{position:relative;}
.ruler{
  position:relative;
  height:16px;
  font-family:'JetBrains Mono',monospace;
  font-size:13px;
  color:var(--paper-dim);
  margin-bottom:20px;
}
.ruler span.mark{
  position:absolute;
  top:0;
  color:var(--teal);
  white-space:nowrap;
  transition:left .05s linear;
}
.slider-legend{
  display:flex;
  align-items:center;
  gap:14px;
  font-family:'JetBrains Mono',monospace;
  font-size:12.5px;
  color:var(--paper-dim);
  margin:2px 0 10px;
}
.slider-legend .dot{
  display:inline-block;
  width:9px;height:9px;
  border-radius:2px;
  margin-right:5px;
}
.slider-legend .dot.flat{background:var(--line);}
.slider-legend .dot.fluid{background:var(--lime-dim);}

.frame-scroll{
  overflow-x:auto;
  background:repeating-linear-gradient(45deg, var(--ink) 0 10px, #16171f 10px 20px);
  border:1px dashed var(--line);
  border-radius:10px;
}
/* .frame / .frame-inner はツールごとにサイズ・余白が異なるため、
   各HTMLの <style> 内で個別に定義しています。 */

.frame-caption{
  margin-top:12px;
  font-family:'JetBrains Mono',monospace;
  font-size:14px;
  color:var(--paper-dim);
  text-align:center;
}
.frame-caption b{color:var(--coral);}

svg{width:100%;height:auto;display:block;}

/* code output */
.code-box{
  position:relative;
  background:var(--ink);
  border:1px solid var(--line);
  border-radius:10px;
  padding:18px 90px 18px 20px;
  font-family:'JetBrains Mono',monospace;
  font-size:16px;
  line-height:1.9;
  color:var(--teal);
}
.code-lines{
  display:flex;
  flex-direction:column;
}
.code-line{
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}
.code-box .prop{color:var(--paper-dim);}
.code-box .sel{color:var(--teal);}

.copy-tabs{
  display:flex;
  gap:6px;
  margin-bottom:12px;
}
.copy-tab{
  flex:1;
  background:var(--ink);
  border:1px solid var(--line);
  color:var(--paper-dim);
  font-family:'Inter',sans-serif;
  font-size:14px;
  padding:8px 6px;
  border-radius:7px;
  cursor:pointer;
}
.copy-tab:hover{color:var(--paper);}
.copy-tab.active{
  background:var(--teal);
  border-color:var(--teal);
  color:var(--ink);
  font-weight:600;
}
.copy-name-field{margin-bottom:12px;}
.copy-name-field input{
  width:100%;
  background:var(--ink);
  border:1px solid var(--line);
  color:var(--teal);
  font-family:'JetBrains Mono',monospace;
  font-size:15px;
  padding:8px 10px;
  border-radius:8px;
  outline:none;
}
.copy-name-field input:focus{border-color:var(--lime);}

.unit-row{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:12px;
}
.unit-row .copy-name-field{
  margin-bottom:0;
  flex:1 1 160px;
  min-width:120px;
}
.unit-tabs{display:flex;gap:6px;}
.unit-tab{
  background:var(--ink);
  border:1px solid var(--line);
  color:var(--paper-dim);
  font-family:'JetBrains Mono',monospace;
  font-size:14px;
  padding:6px 14px;
  border-radius:7px;
  cursor:pointer;
}
.unit-tab:hover{color:var(--paper);}
.unit-tab.active{
  background:var(--teal);
  border-color:var(--teal);
  color:var(--ink);
  font-weight:600;
}
.rem-base-field{
  display:flex;
  align-items:center;
  gap:8px;
  font-family:'JetBrains Mono',monospace;
  font-size:14px;
  color:var(--paper-dim);
}
.rem-base-field input{
  width:60px;
  background:var(--ink);
  border:1px solid var(--line);
  color:var(--lime);
  font-family:'JetBrains Mono',monospace;
  font-size:15px;
  padding:5px 8px;
  border-radius:7px;
  outline:none;
}
.rem-base-field input:focus{border-color:var(--lime);}

.copy-btn{
  position:absolute;
  top:12px;right:12px;
  background:var(--panel);
  border:1px solid var(--line);
  color:var(--paper);
  font-family:'Inter',sans-serif;
  font-size:14px;
  font-weight:600;
  padding:7px 12px;
  border-radius:7px;
  cursor:pointer;
}
.copy-btn:hover{border-color:var(--lime);color:var(--lime);}
.copy-btn.copied{background:var(--lime);color:var(--ink);border-color:var(--lime);}
.copy-btn.copy-failed{background:var(--coral);color:var(--ink);border-color:var(--coral);}
.code-note{
  margin-top:10px;
  font-family:'JetBrains Mono',monospace;
  font-size:13px;
  color:var(--paper-dim);
}

.explain{
  font-size:16px;
  line-height:2;
  color:#d8d7e2;
}
.explain code{
  background:var(--ink);
  border:1px solid var(--line);
  color:var(--teal);
  padding:1px 6px;
  border-radius:5px;
  font-family:'JetBrains Mono',monospace;
  font-size:15px;
}
.faq-item{
  border-top:1px solid var(--line);
  padding:14px 0;
}
.faq-item:first-child{border-top:none;padding-top:0;}
.faq-item summary{
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:center;
  gap:10px;
  font-family:'Space Grotesk',sans-serif;
  font-weight:600;
  font-size:16px;
  color:var(--paper);
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::before{
  content:'▸';
  color:var(--lime);
  flex-shrink:0;
}
.faq-item[open] summary::before{content:'▾';}
.faq-item summary:hover{color:var(--lime);}
.faq-answer{
  margin-top:10px;
  padding-left:24px;
  font-size:16px;
  line-height:2;
  color:#d8d7e2;
}
.formula{
  font-family:'JetBrains Mono',monospace;
  font-size:15px;
  background:var(--ink);
  border:1px solid var(--line);
  border-radius:8px;
  padding:14px 16px;
  margin:10px 0 0;
  color:var(--paper-dim);
  line-height:1.9;
}
.formula b{color:var(--lime);}
.formula .val{color:var(--teal);}

.bottom-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
}

footer{
  margin-top:32px;
  text-align:center;
  font-size:14px;
  color:var(--paper-dim);
  font-family:'JetBrains Mono',monospace;
}

/* ==========================================================================
   サイト共通ヘッダー / フッター
   partials/header.php・partials/footer.php から全ページ（index.php /
   tools/**/index.php）に読み込まれる共通パーツのスタイル。ここを直せば、
   サイト全体のヘッダー・フッターが一括で変わる。
   ========================================================================== */
.site-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:26px 0;
}
.site-logo{
  display:flex;
  align-items:baseline;
  gap:2px;
  text-decoration:none;
}
.site-logo .mark{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  font-size:18px;
  color:var(--paper);
  letter-spacing:-0.01em;
}
.site-nav{
  display:flex;
  gap:6px;
}
.site-nav a{
  font-family:'JetBrains Mono',monospace;
  font-size:13px;
  color:var(--paper-dim);
  text-decoration:none;
  padding:8px 14px;
  border-radius:7px;
  transition:all .15s ease;
}
.site-nav a:hover{color:var(--paper);background:var(--panel);}

.site-footer{
  border-top:1px solid var(--line);
  margin-top:56px;
  padding:32px 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  text-align:center;
}
.site-footer .foot-brand{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  font-size:15px;
  color:var(--paper);
}
.footer-links{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  justify-content:center;
}
.footer-links a{
  font-family:'JetBrains Mono',monospace;
  font-size:12.5px;
  color:var(--paper-dim);
  text-decoration:none;
}
.footer-links a:hover{color:var(--lime);}
.site-footer .copyright{
  font-family:'JetBrains Mono',monospace;
  font-size:12.5px;
  color:var(--paper-dim);
}