/* =========================================================
   Utility Bench - 共通スタイル
   確認くんシリーズとは別系統の新ユーティリティ集用。
   ブループリント風の紺背景 + アンバー差し色。
   ========================================================= */

:root{
  --bg: #0e1420;
  --bg-panel: #131b29;
  --bg-panel-raised: #182234;
  --blueprint-line: rgba(120,150,190,0.14);
  --ink: #dbe4f0;
  --ink-dim: #8496b3;
  --ink-faint: #536078;
  --accent: #f2a65a;
  --accent-dim: #c9834a;
  --accent-soft: rgba(242,166,90,0.12);
  --good: #5eead4;
  --warn: #f2a65a;
  --bad: #f26a5a;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --sans: 'Space Grotesk', system-ui, sans-serif;
  --sidebar-w: 248px;
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  min-height: 100vh;
}

/* ---------- 全体レイアウト(サイドパネル + メイン) ---------- */
.app-shell{
  display:flex;
  min-height: 100vh;
}

/* ---------- サイドパネル ---------- */
.sidebar{
  width: var(--sidebar-w);
  flex-shrink:0;
  background: var(--bg-panel);
  border-right: 1px solid rgba(120,150,190,0.14);
  padding: 22px 14px 24px;
  position: sticky;
  top:0;
  height: 100vh;
  overflow-y:auto;
}
.sidebar-brand{
  display:flex;
  align-items:center;
  gap: 9px;
  padding: 4px 8px 20px;
  border-bottom: 1px solid rgba(120,150,190,0.14);
  margin-bottom: 16px;
}
.sidebar-brand .mark{
  width: 22px; height: 22px;
  border-radius: 5px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-dim);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--accent);
  flex-shrink:0;
}
.sidebar-brand .name{
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.sidebar-brand .name small{
  display:block;
  font-size: 10px;
  font-weight: 400;
  color: var(--ink-faint);
  letter-spacing: 0.08em;
  margin-top: 1px;
}

.nav-group{ margin-bottom: 18px; }
.nav-group-label{
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 0 10px;
  margin-bottom: 6px;
}
.nav-item{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 6px;
  color: var(--ink-dim);
  text-decoration:none;
  font-size: 13px;
  margin-bottom: 2px;
  transition: background .12s ease, color .12s ease;
}
.nav-item:hover{
  background: rgba(120,150,190,0.08);
  color: var(--ink);
}
.nav-item.active{
  background: var(--accent-soft);
  color: var(--accent);
}
.nav-item .dot{
  width:5px; height:5px; border-radius:50%;
  background: currentColor;
  opacity:0.5;
  flex-shrink:0;
}
.nav-item.active .dot{ opacity:1; }
.nav-item.disabled{
  color: var(--ink-faint);
  cursor: default;
  pointer-events: none;
}
.nav-item.disabled .badge{
  margin-left:auto;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.05em;
  background: rgba(120,150,190,0.1);
  color: var(--ink-faint);
  padding: 2px 6px;
  border-radius: 4px;
}

/* ---------- メインエリア ---------- */
.main{
  flex:1;
  min-width:0;
  background:
    linear-gradient(var(--blueprint-line) 1px, transparent 1px) 0 0/40px 40px,
    linear-gradient(90deg, var(--blueprint-line) 1px, transparent 1px) 0 0/40px 40px,
    var(--bg);
  padding: 48px 32px 80px;
  display:flex;
  justify-content:center;
}
.main-inner{ width:100%; max-width: 720px; }

.eyebrow{
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom: 10px;
}
.eyebrow::before{
  content:"";
  width: 18px; height:1px;
  background: var(--accent-dim);
  display:inline-block;
}
h1{
  font-size: clamp(28px, 4vw, 38px);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}
.lede{
  color: var(--ink-dim);
  font-size: 14.5px;
  line-height:1.6;
  margin: 0 0 32px;
  max-width: 54ch;
}
.lede b{ color: var(--ink); font-weight:600; }

.panel{
  background: var(--bg-panel);
  border: 1px solid rgba(120,150,190,0.16);
  border-radius: 10px;
  overflow: hidden;
}

/* =========================================================
   共通UIコンポーネント(出力パネル・フォーム部品・ボタン等)
   複数ツールで使い回す想定。
   ========================================================= */

/* 出力エリア */
.output{
  padding: 26px 24px 22px;
  border-bottom: 1px solid rgba(120,150,190,0.14);
  background: var(--bg-panel-raised);
  position: relative;
}
.output-label{
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-faint);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 10px;
  display:flex;
  justify-content: space-between;
}
.result-row{
  display:flex;
  align-items:center;
  gap: 10px;
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(120,150,190,0.14);
  border-radius: 7px;
  padding: 12px 14px;
}
.result-text{
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.02em;
  word-break: break-all;
  flex: 1;
  user-select: all;
}
.result-text .c-upper{ color: var(--good); }
.result-text .c-num{ color: var(--accent); }
.result-text .c-sym{ color: var(--bad); }

.copy-btn{
  flex-shrink:0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  background: transparent;
  border: 1px solid rgba(120,150,190,0.3);
  color: var(--ink-dim);
  border-radius: 5px;
  padding: 7px 10px;
  cursor:pointer;
  transition: all .15s ease;
}
.copy-btn:hover{ border-color: var(--accent); color: var(--accent); }
.copy-btn.copied{ border-color: var(--good); color: var(--good); }

/* コントロールエリア */
.controls{ padding: 22px 24px 26px; }
.field{ margin-bottom: 20px; }
.field:last-of-type{ margin-bottom: 0; }
.field-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-bottom: 10px;
}
.field-label{
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.field-value{
  font-family: var(--mono);
  font-size: 13px;
  color: var(--accent);
}
input[type="range"]{
  -webkit-appearance:none;
  width:100%;
  height: 4px;
  border-radius: 2px;
  background: rgba(120,150,190,0.2);
  outline:none;
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:16px; height:16px;
  border-radius:50%;
  background: var(--accent);
  border: 2px solid var(--bg-panel);
  box-shadow: 0 0 0 2px var(--accent-dim);
  cursor:pointer;
}
input[type="range"]::-moz-range-thumb{
  width:16px; height:16px;
  border-radius:50%;
  background: var(--accent);
  border: 2px solid var(--bg-panel);
  cursor:pointer;
}

.toggle-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.toggle{
  display:flex;
  align-items:center;
  gap: 10px;
  background: rgba(120,150,190,0.06);
  border: 1px solid rgba(120,150,190,0.14);
  border-radius: 7px;
  padding: 11px 13px;
  cursor:pointer;
  transition: border-color .15s ease, background .15s ease;
}
.toggle:hover{ border-color: rgba(242,166,90,0.4); }
.toggle.active{
  border-color: var(--accent-dim);
  background: var(--accent-soft);
}
.toggle input{ accent-color: var(--accent); width:15px; height:15px; }
.toggle-label{ font-size: 13.5px; color: var(--ink); }
.toggle-sample{ font-family: var(--mono); font-size: 11px; color: var(--ink-faint); margin-left:auto; }

.sub-toggle{
  display:flex;
  align-items:center;
  gap: 9px;
  margin-top: 12px;
  font-size: 13px;
  color: var(--ink-dim);
}
.sub-toggle input{ accent-color: var(--accent); width:14px; height:14px; }

.row-split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.action-btn{
  width:100%;
  margin-top: 24px;
  padding: 14px;
  border-radius: 7px;
  border: none;
  background: var(--accent);
  color: #1a1108;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 14.5px;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform .1s ease, background .15s ease;
}
.action-btn:hover{ background: #f5b56f; }
.action-btn:active{ transform: scale(0.99); }

.strength-row{
  margin-top: 16px;
  display:flex;
  align-items:center;
  gap: 12px;
}
.strength-bar{
  flex:1;
  height: 6px;
  border-radius: 3px;
  background: rgba(120,150,190,0.14);
  overflow:hidden;
}
.strength-fill{
  height:100%;
  width: 0%;
  background: var(--bad);
  transition: width .2s ease, background .2s ease;
}
.strength-text{
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-dim);
  white-space: nowrap;
}

.note{
  margin-top: 18px;
  font-size: 12px;
  color: var(--ink-faint);
  line-height: 1.6;
  display:flex;
  gap: 8px;
}
.note svg{ flex-shrink:0; margin-top:2px; }

/* ---------- モバイル ---------- */
.mobile-nav-toggle{
  display:none;
}
@media (max-width: 860px){
  .app-shell{ flex-direction: column; }
  .sidebar{
    width:100%;
    height:auto;
    position:relative;
    border-right:none;
    border-bottom: 1px solid rgba(120,150,190,0.14);
  }
  .main{ padding: 32px 18px 60px; }
}
@media (max-width: 480px){
  .toggle-grid{ grid-template-columns: 1fr; }
  .row-split{ grid-template-columns: 1fr; }
}