/* 蒸着膜厚 計算ツール — スタイル
   テーマカラーは下の #vd-fc { } 内の --vd-accent / --vd-accent-ink /
   --vd-read-bg / --vd-read-num を変更すると全体に反映されます。 */
#vd-fc{
  --vd-accent:#1668a6; --vd-accent-ink:#0f4d7d;
  --vd-read-bg:#0f2a44; --vd-read-fg:#e2eef7; --vd-read-num:#63c2f0;
  --vd-ink:#1b2b36; --vd-muted:#5c7079; --vd-line:#d8e1e8;
  --vd-bg:#ffffff; --vd-panel:#f2f6f9; --vd-accent-bg:#e6eff7;
  --vd-warn:#b45309; --vd-warn-bg:#fef4e6;
  --vd-radius:12px;
  all:initial;
  display:block; box-sizing:border-box;
  max-width:100%; margin:1.5em 0; padding:24px 24px 20px;
  background:var(--vd-bg); border:1px solid var(--vd-line); border-radius:var(--vd-radius);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Kaku Gothic ProN",
    "Hiragino Sans","Noto Sans JP",Meiryo,sans-serif;
  color:var(--vd-ink); line-height:1.6; -webkit-text-size-adjust:100%;
}
#vd-fc *,#vd-fc *::before,#vd-fc *::after{box-sizing:border-box;}
#vd-fc .vd-eyebrow{
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--vd-accent-ink); font-weight:700; margin:0 0 2px;
}
#vd-fc h2.vd-title{font-size:20px; font-weight:700; margin:0 0 16px; color:var(--vd-ink); line-height:1.3;}
#vd-fc .vd-card{
  background:var(--vd-panel); border:1px solid var(--vd-line);
  border-radius:10px; padding:16px; margin:0 0 14px;
}
#vd-fc .vd-legend{
  font-size:13px; font-weight:700; color:var(--vd-accent-ink);
  margin:0 0 12px; display:flex; align-items:center; gap:8px;
}
#vd-fc .vd-step{
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; border-radius:50%;
  background:var(--vd-accent); color:#fff; font-size:12px; font-weight:700;
}
#vd-fc .vd-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
#vd-fc .vd-field{display:flex; flex-direction:column; gap:4px; min-width:0;}
#vd-fc .vd-field.vd-span{grid-column:1 / -1;}
#vd-fc label{font-size:12.5px; color:var(--vd-muted); font-weight:600;}
#vd-fc select,#vd-fc input[type="number"]{
  font-family:inherit; font-size:15px; color:var(--vd-ink);
  line-height:1.5 !important; height:auto !important; min-height:46px;
  padding:11px 12px !important; border:1px solid var(--vd-line) !important; border-radius:8px;
  background-color:#fff; width:100%; -webkit-appearance:none; appearance:none;
  box-sizing:border-box !important; margin:0; vertical-align:middle;
}
#vd-fc select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' fill='none' stroke='%235c7079' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat; background-position:right 11px center; padding-right:30px;}
#vd-fc input[type="number"]:focus,#vd-fc select:focus{
  outline:2px solid var(--vd-accent); outline-offset:1px; border-color:var(--vd-accent);
}
#vd-fc .vd-unit{font-size:12px; color:var(--vd-muted); font-weight:600;}
#vd-fc .vd-hint{font-size:11.5px; color:var(--vd-muted); margin-top:2px;}
#vd-fc .vd-mat-note{font-size:12px; color:var(--vd-muted); margin-top:4px; line-height:1.5;}
#vd-fc .vd-mat-note.is-warn{color:var(--vd-warn); background:var(--vd-warn-bg); border-radius:6px; padding:5px 9px;}
/* スライダー */
#vd-fc input[type="range"]{
  -webkit-appearance:none; appearance:none; width:100%; height:22px; background:transparent; cursor:pointer; margin:6px 0 0;
}
#vd-fc input[type="range"]::-webkit-slider-runnable-track{height:4px; border-radius:999px; background:var(--vd-line);}
#vd-fc input[type="range"]::-moz-range-track{height:4px; border-radius:999px; background:var(--vd-line);}
#vd-fc input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:18px; height:18px; margin-top:-7px;
  border-radius:50%; background:var(--vd-accent); border:2px solid #fff; box-shadow:0 1px 3px rgba(0,0,0,.25);
}
#vd-fc input[type="range"]::-moz-range-thumb{
  width:18px; height:18px; border-radius:50%; background:var(--vd-accent);
  border:2px solid #fff; box-shadow:0 1px 3px rgba(0,0,0,.25);
}
#vd-fc input[type="range"]:focus{outline:none;}
#vd-fc input[type="range"]:focus-visible::-webkit-slider-thumb{outline:2px solid var(--vd-accent); outline-offset:2px;}
#vd-fc input[type="range"]:focus-visible::-moz-range-thumb{outline:2px solid var(--vd-accent); outline-offset:2px;}
#vd-fc .vd-rangelbl{display:flex; justify-content:space-between; font-size:10.5px; color:var(--vd-muted); margin-top:-1px;}
/* 入力方法タブ（①）— 約2倍サイズ */
#vd-fc .vd-tabs{display:flex; gap:8px; margin:0 0 16px; flex-wrap:wrap;}
#vd-fc .vd-tab{
  font-family:inherit; font-size:15px; font-weight:700; cursor:pointer;
  padding:15px 16px; border:1.5px solid var(--vd-line); border-radius:12px;
  background:#fff; color:var(--vd-muted); flex:1 1 28%; text-align:center; line-height:1.25;
}
#vd-fc .vd-tab[aria-selected="true"]{
  background:var(--vd-accent); border-color:var(--vd-accent); color:#fff;
  box-shadow:0 2px 6px rgba(15,77,125,.22);
}
#vd-fc .vd-tab:focus-visible{outline:2px solid var(--vd-accent); outline-offset:2px;}
#vd-fc .vd-mode{display:none;}
#vd-fc .vd-mode.is-active{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
/* 線径プリセット */
#vd-fc .vd-presets{display:flex; gap:6px; align-items:center; flex-wrap:wrap;}
#vd-fc .vd-preset{
  font-family:inherit; font-size:13.5px; font-weight:600; cursor:pointer;
  padding:7px 13px; border:1px solid var(--vd-line); border-radius:8px; background:#fff; color:var(--vd-ink); min-width:46px;
}
#vd-fc .vd-preset[aria-pressed="true"]{background:var(--vd-accent); border-color:var(--vd-accent); color:#fff;}
#vd-fc .vd-preset:focus-visible{outline:2px solid var(--vd-accent); outline-offset:2px;}
#vd-fc .vd-dia-val{
  margin-left:auto; font-size:13px; font-weight:700; color:var(--vd-accent-ink);
  font-variant-numeric:tabular-nums; background:var(--vd-accent-bg); border-radius:6px; padding:3px 9px;
}
/* リードアウト（結果表示） */
#vd-fc .vd-readout{
  background:var(--vd-read-bg); border-radius:10px; padding:16px 18px;
  color:var(--vd-read-fg); display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 18px;
}
#vd-fc .vd-readout .vd-rlabel{font-size:12px; opacity:.78; width:100%; font-weight:600;}
#vd-fc .vd-readout .vd-num{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:34px; font-weight:600; color:var(--vd-read-num);
  font-variant-numeric:tabular-nums; letter-spacing:-.01em; line-height:1.1;
}
#vd-fc .vd-readout .vd-runit{font-size:15px; opacity:.85; font-weight:600;}
#vd-fc .vd-readout .vd-sub{
  width:100%; font-size:12.5px; opacity:.82; margin-top:6px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-variant-numeric:tabular-nums;
}
#vd-fc .vd-readout .vd-sub b{color:var(--vd-read-num); font-weight:600;}
/* 分布セクション */
#vd-fc .vd-dist-out{
  display:flex; flex-wrap:wrap; gap:6px 20px; align-items:baseline;
  margin-top:12px; padding-top:12px; border-top:1px dashed var(--vd-line);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-variant-numeric:tabular-nums;
}
#vd-fc .vd-dist-out .vd-dnum{font-size:20px; font-weight:600; color:var(--vd-accent-ink);}
#vd-fc .vd-dist-out .vd-dlabel{font-family:inherit; font-size:12px; color:var(--vd-muted); font-weight:600;}
#vd-fc .vd-notes{font-size:11.5px; color:var(--vd-muted); margin:14px 0 0; line-height:1.7;}
#vd-fc .vd-notes b{color:var(--vd-ink);}
#vd-fc .vd-formula{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12px; color:var(--vd-accent-ink); background:var(--vd-accent-bg); padding:2px 6px; border-radius:5px;
}
@media (max-width:560px){
  #vd-fc{padding:18px 14px;}
  #vd-fc .vd-grid,#vd-fc .vd-mode.is-active{grid-template-columns:1fr;}
  #vd-fc .vd-tab{font-size:14px; padding:13px 8px; flex:1 1 30%;}
  #vd-fc .vd-readout .vd-num{font-size:28px;}
}
@media (prefers-reduced-motion:no-preference){
  #vd-fc select,#vd-fc input[type="number"],#vd-fc .vd-tab,#vd-fc .vd-preset{transition:border-color .15s,background .15s,color .15s;}
}