@charset "UTF-8";
/* ======================================
   Women Pro Draft Tool UI (Refined)
   - 二重タイトル解消
   - 緑ベタを白カード化
   - ラジオをピル化
   - JS/ID/挙動は維持
   ====================================== */

:root{
  --bg: #0b1220;
  --panel: rgba(255,255,255,.08);
  --panel2: rgba(255,255,255,.06);
  --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: ui-sans-serif, 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;
}

/* ツール一覧に戻る */
body > div[style*="margin:10px 0;"]{
  max-width: 1080px;
  margin: 10px auto 8px !important;
  padding: 0 14px;
}
body > div[style*="margin:10px 0;"] 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;"] a:hover{
  text-decoration: none;
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  transform: translateY(-1px);
}

/* コンテナ */
.container{
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 14px 44px;
}

/* ヒーロー */
.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;
}

/* 二重タイトル解消：旧 #top は非表示 */
#top{ display:none !important; }

/* 説明 */
p{ color: var(--muted); margin: 12px 0; }
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;
}
.table-css td:first-child[style]{ color: var(--text) !important; } /* inline white を上書き */

/* テキスト入力 */
.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);
}

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

/* 既存の挙動は維持（元CSS由来） */
.display, .result, .voice, .back{ display: none; }
/* 背景/表示 */
#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;
}

#table{
  position: static;
  z-index: 1;
  color: #003333;
  font: 20pt Impact, sans-serif;
}

/* 小画面 */
@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表示改善（必須）
   - viewportあり前提で、小画面では縦積み
   - bgcolorの緑を確実に無効化
   - iOSの入力ズーム/巨大文字を抑制
   ================================ */

/* bgcolor の緑を確実に殺す（tr/td両方） */
.table-css tr[bgcolor],
.table-css tr[bgcolor] td{
  background: transparent !important;
}

/* 旧styleで color:white が入っているTDを上書き */
.table-css td[style*="color:white"],
.table-css td[style*="color: white"]{
  color: var(--text) !important;
}

@media (max-width: 700px){
  /* テーブルを縦積みに（Safariでも安定） */
  .table-css, .table-css tbody, .table-css tr, .table-css td{
    display: block;
    width: 100% !important;
  }
  .table-css td{
    padding: 10px 12px !important;
  }
  .table-css td:first-child{
    white-space: normal !important;
    padding-bottom: 6px !important;
  }
  .table-css [nowrap]{ white-space: normal !important; }

  /* 入力: iOSでズームしない & 触りやすい */
  .text-input{ font-size: 16px !important; padding: 12px 12px !important; }
  .button button{ font-size: 18px !important; width: 100% !important; }
  .button{ display: grid; grid-template-columns: 1fr; gap: 10px; }

  /* ラジオ: 2列（狭い端末は1列） */
  .selection-group{
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
  }
  @media (max-width: 420px){
    .selection-group{ grid-template-columns: 1fr; }
  }
  .selection-group br{ display:none !important; }
  .radio-pill{ width: 100%; justify-content: flex-start; padding: 12px 12px; }

  /* iframe */
  iframe{ width: 100% !important; max-width: 100% !important; }
  iframe[src*="youtube.com"], iframe[src*="youtu.be"]{ height: auto !important; aspect-ratio: 16/9; }
}