@charset "UTF-8";

/* ================================
   Design refresh (Draft tool)
   - 見た目だけ改善（JS・ID・挙動は維持）
   - 緑ベタ/二重タイトル/古いラジオを解消
   ================================ */

:root{
  --bg: #0b1220;
  --panel: rgba(255,255,255,.08);
  --panel2: rgba(255,255,255,.05);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.70);
  --muted2: rgba(255,255,255,.55);
  --border: rgba(255,255,255,.14);
  --shadow: 0 18px 50px rgba(0,0,0,.35);
  --radius: 18px;
  --radius2: 12px;
  --accent: #78a6ff;
  --accent2:#7cf7d4;
  --focus: rgba(120,166,255,.55);
  --danger:#e85c5c;
  --info:#4f8cff;
}

@media (prefers-color-scheme: light){
  :root{
    --bg: #f6f7fb;
    --panel:#ffffff;
    --panel2:#ffffff;
    --text: rgba(18, 23, 38, .92);
    --muted: rgba(18, 23, 38, .70);
    --muted2: rgba(18, 23, 38, .55);
    --border: rgba(18, 23, 38, .12);
    --shadow: 0 18px 50px rgba(18,23,38,.12);
    --accent:#2f6bff;
    --accent2:#00b894;
    --focus: rgba(47,107,255,.30);
  }
}

*{ box-sizing:border-box; }
html, body{ height:100%; }

body{
  margin:0;
  color:var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, Arial, sans-serif;
  line-height:1.7;
  background:
    radial-gradient(1000px 520px at 15% -10%, rgba(120,166,255,.30), transparent 60%),
    radial-gradient(800px 420px at 85% -5%, rgba(124,247,212,.22), transparent 55%),
    radial-gradient(700px 420px at 50% 115%, rgba(120,166,255,.14), transparent 55%),
    var(--bg);
}

a{ color: color-mix(in srgb, var(--accent) 86%, var(--text)); text-decoration:none; }
a:hover{ text-decoration:underline; text-underline-offset:3px; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 12px;
}

.container{
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 14px 44px;
}

/* 上部「ツール一覧に戻る」 */
body > div[style*="margin:10px 0;font-size:14px;"]{
  max-width: 1080px;
  margin: 10px auto 8px !important;
  padding: 0 14px;
}
body > div[style*="margin:10px 0;font-size:14px;"] a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border:1px solid var(--border);
  border-radius:999px;
  background: rgba(255,255,255,.06);
  font-weight:900;
  color: var(--text) !important;
}
body > div[style*="margin:10px 0;font-size:14px;"] a:hover{
  text-decoration:none;
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  transform: translateY(-1px);
}

/* Hero */
.hero{
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--panel), var(--panel2));
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  padding: 16px 16px 14px;
}
.hero__row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.hero__title{
  margin:0;
  font-size: clamp(20px, 3.2vw, 30px);
  letter-spacing:.02em;
  line-height:1.2;
}
.hero__sub{
  margin:6px 0 0;
  color: var(--muted);
  font-size: 13.5px;
}
.hero__badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border:1px solid var(--border);
  border-radius:999px;
  background: rgba(255,255,255,.06);
  color: var(--muted);
  font-size: 13px;
  white-space:nowrap;
}

/* 二重タイトル解消 */
.legacy-top{ display:none !important; }

/* spacer */
.spacer{ height: 18px; }

/* 説明文 */
p{ margin: 12px 0; color: var(--muted); }
p b, strong{ color: var(--text); }

/* ※ 表示（赤/青）を控えめに */
span[style*="color: red"]{ color: var(--danger) !important; font-size: 12px; margin-left: 4px; }
span[style*="color: blue"]{ color: var(--info) !important; font-size: 12px; margin-left: 4px; }

/* 入力テーブル（緑ベタを無効化してカード化） */
.table-css{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  box-shadow: 0 14px 32px rgba(0,0,0,.18);
}
.table-css tr[bgcolor] td{ background: transparent !important; }
.td-css{
  border: 0 !important;
  border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent) !important;
  padding: 12px 14px !important;
  vertical-align: middle;
}
.table-css tr:first-child .td-css{ border-top: 0 !important; }
.table-css td:first-child{
  width: min(340px, 44vw);
  font-weight: 900;
  letter-spacing: .01em;
  white-space: nowrap;
  color: var(--text) !important;
}

/* テキスト入力 */
.text-input{
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 11px 12px;
  background: rgba(255,255,255,.06);
  color: var(--text);
  font-size: 16px;
}
.text-input::placeholder{ color: var(--muted2); }

/* ラジオをピル化 */
.selection-group{
  display:flex;
  flex-wrap: wrap;
  gap: 10px 10px;
  align-items: center;
}
.radio-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255,255,255,.05);
  cursor:pointer;
  user-select:none;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.radio-pill:hover{
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: rgba(255,255,255,.07);
}
.radio-pill input[type="radio"]{
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--accent);
}
.radio-pill span{
  color: var(--text);
  font-weight: 800;
  font-size: 14px;
}
@supports(selector(:has(*))){
  .radio-pill:has(input[type="radio"]:checked){
    border-color: color-mix(in srgb, var(--accent) 75%, var(--border));
    background: color-mix(in srgb, var(--accent) 14%, rgba(255,255,255,.05));
  }
}

/* ボタン */
.button{
  display:flex;
  gap:10px;
  flex-wrap: wrap;
}
.button button{
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--border));
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 18%, transparent), rgba(255,255,255,.04));
  color: var(--text);
  padding: 12px 14px;
  border-radius: 14px;
  cursor: pointer;
  font-weight: 900;
  letter-spacing: .02em;
  box-shadow: 0 10px 18px rgba(0,0,0,.18);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.button button:hover{
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 75%, var(--border));
  box-shadow: 0 14px 26px rgba(0,0,0,.22);
}

/* 埋め込み（用途別） */
.embed-video{ max-width:100%; border-radius: var(--radius2); }
.embed-form{
  width: 100%;
  max-width: 100%;
  border-radius: var(--radius2);
  border: 0;
}

/* iframe */
iframe{ max-width:100%; border-radius: var(--radius2); }

/* 既存挙動は維持（元CSS互換） */
.display { display:none; }
.result  { display:none; }
.voice   { display:none; }
.back    { display:none; }

/* 入力の既存指定が強すぎるので、classの方を優先する */
input{ font-size: 24px; }
.text-input{ font-size: 16px; }

/* 背景/結果の配置（元のまま） */
#table{
  position: static;
  z-index: 1;
  color: #003333;
  font: 20pt Impact, sans-serif;
}
#background, #display{
  position: fixed;
  left: 0; top: 0;
  width: auto;
  min-width: 100%;
  height: auto;
  min-height: 100%;
  z-index:2;
}
#background img, #display img{
  position: relative;
  width: 100%;
  height: auto;
}

/* スマホ */
@media (max-width: 520px){
  .table-css td:first-child{ width:auto; white-space: normal; }
  .text-input{ font-size: 15px; }
  .radio-pill{ padding: 9px 10px; }
  .radio-pill span{ font-size: 13px; }
}


/* ================================
   iPhone / small-screen fixes
   - テーブルを「縦積み」にして右寄り/窮屈を解消
   - ラジオピルを見やすい1〜2列に
   - iOSのフォームズームを避けつつ文字を適正化
   ================================ */
@media (max-width: 640px){
  /* テーブルをブロック化（1行=1カードの感覚） */
  #tbl{ display:block; }
  #tbl tbody{ display:block; }
  #tbl tr{ display:block; }
  #tbl td{ display:block; width:100% !important; }
  #tbl td:first-child{
    padding-bottom: 6px !important;
    white-space: normal !important;
    opacity: .95;
  }
  #tbl td + td{ padding-top: 0 !important; }

  /* HTML側の nowrap 属性をCSSで無効化 */
  #tbl [nowrap]{ white-space: normal !important; }

  /* 右寄りに見えるのを解消 */
  #tbl .td-css{ text-align:left; }

  /* 入力欄はiOSで見やすく（16px以上でズーム抑制） */
  #tbl input[type="text"],
  #tbl input[type="radio"],
  #tbl button{
    font-size: 16px !important;
  }
  .text-input{ padding: 12px 12px; }

  /* ラジオ：1列で整列 */
  .selection-group{
    width:100%;
    display:grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .radio-pill{
    width:100%;
    justify-content:flex-start;
    padding: 12px 12px;
  }

  /* selection-group内の <br> はモバイルでは不要なので隠す */
  .selection-group br{ display:none; }

  /* ボタンは縦並び */
  .button{ display:grid; grid-template-columns: 1fr; gap: 10px; }
  .button button{ width:100% !important; font-size:18px !important; }

  /* 埋め込み：用途別に最適化 */
  .embed-video{ width:100% !important; height:auto; aspect-ratio: 16 / 9; }
  /* Googleフォームは内容が長いので高さを確保（iPhoneで「一部しか見えない」を防ぐ） */
  .embed-form{ width:100% !important; height: min(1400px, 120vh) !important; max-height: none !important; }
}

/* iPhone縦向き：Googleフォームを「最後まで」外側スクロールで見せるため高さを大きく確保 */
@media (max-width: 640px) and (orientation: portrait){
  .embed-form{
    display:block;
    width:100% !important;
    height: 3200px !important; /* フォームが長くても途中で切れないように大きめ */
    max-height: none !important;
  }
}



/* 少し広いスマホは2列にして密度を調整 */
@media (min-width: 641px) and (max-width: 860px){
  .selection-group{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .radio-pill{ width:100%; }
  .selection-group br{ display:none; }
}