:root{
  --bg:#0b0e13;
  --panel:#121822;
  --muted:#a7b3c5;
  --text:#e8eef7;
  --accent:#5fb3ff;
  --accent-2:#7bd389;
  --danger:#ff6b6b;
  --line:#263245;
  --dash:#2f3c52;
  --card:#0f1520;
  --btn:#1a2230;
  --btn-h:#222c3d;
}

[data-theme="light"]{
  --bg:#f8fafc;
  --panel:#ffffff;
  --muted:#64748b;
  --text:#1e293b;
  --accent:#0ea5e9;
  --accent-2:#10b981;
  --danger:#ef4444;
  --line:#e2e8f0;
  --dash:#cbd5e1;
  --card:#f1f5f9;
  --btn:#f8fafc;
  --btn-h:#e2e8f0;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  transition: background-color 0.3s ease, color 0.3s ease;
}

[data-theme="light"] body{
  background:linear-gradient(180deg,#f8fafc 0%, #f1f5f9 100%);
}

a{color:var(--accent)}
.mono{font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}
.small{font-size:12px}

.app-header{
  padding:28px 20px 8px;
  border-bottom:1px solid var(--line);
  max-width:1200px;
  margin:0 auto;
}
.header-content{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
}
.app-header h1{
  margin:0 0 8px;
  font-size:28px;
  letter-spacing:0.2px;
}
.lead{margin:0 0 10px; color:var(--muted)}

.theme-toggle{
  background:var(--btn);
  border:1px solid var(--line);
  border-radius:8px;
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-size:18px;
  transition:all 0.2s ease;
  flex-shrink:0;
}
.theme-toggle:hover{
  background:var(--btn-h);
  transform:scale(1.05);
}

@media (max-width: 768px){
  .header-content{
    flex-direction:column;
    align-items:center;
    text-align:center;
  }

  /* モバイル向けフォントサイズ調整 */
  .app-header h1{
    font-size:24px;
    line-height:1.3;
  }

  /* タブの改良 */
  .tabs{
    justify-content:center;
    margin-bottom:16px;
  }
  .tab{
    min-height:44px; /* タッチに適したサイズ */
    padding:12px 16px;
    font-size:14px;
  }

  /* ボタンサイズ改良 */
  .btn{
    min-height:44px;
    padding:12px 16px;
    font-size:14px;
  }
  .btn-small{
    min-height:36px;
    padding:8px 12px;
  }

  /* コントロールエリアの余白調整 */
  .controls{
    padding:16px;
    margin-bottom:12px;
  }

  /* ビジュアライザーの高さ調整 */
  .viz{
    height:400px;
    min-height:300px;
  }
}

.app-main{
  padding:14px 16px 40px;
  max-width:1200px;
  margin:0 auto;
}

.tabs{
  display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px;
}
.tab{
  background:var(--btn);
  color:var(--text);
  border:1px solid var(--line);
  border-radius:10px;
  padding:10px 14px;
  cursor:pointer;
}
.tab.active{
  background:var(--accent);
  color:#07121e;
  border-color:transparent;
  font-weight:600;
}

.panel{display:none}
.panel.active{display:block}

.two-col{
  display:grid;
  grid-template-columns: 360px minmax(400px,1fr);
  gap:16px;
}
@media (max-width: 980px){
  .two-col{grid-template-columns: 1fr}
}

/* タブレット・中サイズ画面対応 */
@media (max-width: 768px) and (min-width: 481px){
  .app-main{
    padding:12px 20px 32px;
  }
  .controls{
    padding:16px 20px;
  }
}

/* スマートフォン対応 */
@media (max-width: 480px){
  .app-header{
    padding:20px 16px 8px;
  }
  .app-main{
    padding:10px 12px 28px;
  }

  /* ヘッダータイトル */
  .app-header h1{
    font-size:20px;
    line-height:1.2;
  }
  .lead{
    font-size:14px;
    line-height:1.4;
  }

  /* タブナビゲーション最適化 */
  .tabs{
    gap:6px;
    margin-bottom:12px;
  }
  .tab{
    flex:1;
    text-align:center;
    min-height:40px;
    padding:10px 8px;
    font-size:13px;
  }

  /* コントロールとボタン */
  .controls{
    padding:12px;
    border-radius:12px;
  }
  .button-row{
    flex-wrap:wrap;
    gap:8px;
  }
  .btn{
    flex:1;
    min-width:120px;
    text-align:center;
  }

  /* テキストエリア */
  .textarea{
    font-size:14px;
    border-radius:8px;
  }

  /* ビジュアライザー */
  .viz{
    height:300px;
    min-height:250px;
  }
  .viz-header{
    padding:8px 12px;
    font-size:14px;
  }
  .viz-controls{
    gap:4px;
  }

  /* テーマ切り替えボタン */
  .theme-toggle{
    width:36px;
    height:36px;
    font-size:16px;
  }

  /* エクスポート行の調整 */
  .export-row{
    flex-direction:column;
    align-items:stretch;
    gap:8px;
  }
  .export-row .btn{
    min-width:auto;
  }

  /* 統計表示の調整 */
  .stats{
    flex-wrap:wrap;
    gap:8px;
    font-size:13px;
  }

  /* トグルの調整 */
  .toggle{
    margin:8px 0;
  }

  /* ヒントテキスト */
  .hint{
    font-size:11px;
    line-height:1.3;
  }
}

/* 極小画面対応 (320px以下) */
@media (max-width: 320px){
  .app-header h1{
    font-size:18px;
  }
  .tab{
    font-size:12px;
    padding:8px 6px;
  }
  .btn{
    font-size:13px;
    min-width:100px;
  }
  .viz{
    height:250px;
    min-height:200px;
  }
}

/* ランドスケープモード（小画面） */
@media (max-height: 500px) and (orientation: landscape){
  .app-header{
    padding:12px 16px 6px;
  }
  .app-header h1{
    font-size:20px;
    margin:0 0 4px;
  }
  .lead{
    font-size:13px;
    margin:0 0 6px;
  }
  .viz{
    height:250px;
    min-height:200px;
  }
}

.controls{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.25);
}

.label{display:block; margin-bottom:6px; color:var(--muted)}
.textarea{
  width:100%;
  background:var(--card);
  color:var(--text);
  border:1px solid var(--line);
  border-radius:10px;
  padding:10px;
  resize:vertical;
}
.textarea:focus{
  outline:none;
  border-color:var(--accent);
}

[data-theme="light"] .textarea{
  background:#ffffff;
  border-color:#d1d5db;
}
[data-theme="light"] .textarea:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(14,165,233,0.1);
}

/* タッチデバイス用の改善 */
@media (pointer: coarse){
  .tab, .btn, .btn-small, .theme-toggle{
    min-height:44px; /* iOSガイドライン準拠 */
  }
  .btn-small{
    min-height:36px;
    padding:8px 12px;
  }
  .viz-controls .btn-small{
    min-height:32px;
    padding:6px 10px;
  }
}

/* ホバー効果をタッチデバイスで適切に処理 */
@media (hover: hover) and (pointer: fine){
  .tab:hover, .btn:hover, .theme-toggle:hover{
    transition:all 0.2s ease;
  }
}

.toggle{display:flex; align-items:center; gap:8px; margin:10px 0 2px}
.button-row{display:flex; gap:8px; margin:10px 0}
.export-row{display:flex; gap:8px; align-items:center; margin:10px 0}
.msg{color:var(--accent-2)}
.error-msg{
  color:var(--danger);
  font-size:13px;
  margin-top:6px;
  display:none;
  line-height:1.4;
}

.btn{
  background:var(--btn);
  color:var(--text);
  border:1px solid var(--line);
  border-radius:10px;
  padding:8px 12px;
  cursor:pointer;
}
.btn:hover{background:var(--btn-h)}
.btn.primary{background:var(--accent); color:#051323; border-color:transparent}
.btn.ghost{background:transparent}
.btn.danger{
  background:rgba(255,107,107,0.1);
  color:var(--danger);
  border-color:rgba(255,107,107,0.3);
}
.btn.danger:hover{
  background:rgba(255,107,107,0.2);
  border-color:rgba(255,107,107,0.5);
}

.stats{
  display:flex; gap:12px; margin:10px 0; color:var(--muted)
}
.hint{color:var(--muted); font-size:12px}

.danger-zone{
  margin-top:20px;
  padding-top:16px;
}
.separator{
  border:none;
  border-top:1px solid var(--line);
  margin:0 0 16px 0;
  opacity:0.5;
}

.viz-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,.3);
  display:flex;
  flex-direction:column;
}
.viz-header{
  padding:10px 12px;
  border-bottom:1px solid var(--line);
  color:var(--muted);
  flex-shrink:0;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.viz-controls{
  display:flex;
  gap:6px;
}
.btn-small{
  background:var(--btn);
  color:var(--text);
  border:1px solid var(--line);
  border-radius:6px;
  padding:4px 10px;
  cursor:pointer;
  font-size:12px;
}
.btn-small:hover{background:var(--btn-h)}
.viz{
  width:100%;
  height:520px;
  display:block;
  background: radial-gradient(1200px 520px at 50% 0%, rgba(65,85,120,0.09), rgba(0,0,0,0) 60%);
  overflow:auto;
}

[data-theme="light"] .viz{
  background: radial-gradient(1200px 520px at 50% 0%, rgba(59,130,246,0.05), rgba(255,255,255,0) 60%);
}

.key-letter{
  font-size:18px;
  fill:var(--text);
  opacity:.9;
}
.guide-line{
  stroke:var(--dash);
  stroke-width:1.2;
  stroke-dasharray:6 6;
}
.polyline{
  fill:none;
  stroke:var(--accent);
  stroke-width:2.5;
}
.point{
  fill:var(--accent-2);
  stroke:#0b0f18;
  stroke-width:1;
}
.point.step{
  fill:#ffd166;
}
.hidden-guides .key-letter,
.hidden-guides .guide-line{
  display:none;
}

.doc{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:16px;
  padding:16px;
  line-height:1.7;
}

/* 比較表のスタイル */
.table-container{
  overflow-x:auto;
  margin:16px 0;
  border-radius:12px;
  border:1px solid var(--line);
}

.comparison-table{
  width:100%;
  border-collapse:collapse;
  background:var(--card);
  font-size:14px;
}

.comparison-table th{
  background:var(--btn);
  color:var(--text);
  padding:12px 8px;
  text-align:left;
  font-weight:600;
  border-bottom:2px solid var(--line);
  position:sticky;
  top:0;
  z-index:1;
}

.comparison-table td{
  padding:10px 8px;
  border-bottom:1px solid var(--line);
  vertical-align:top;
}

.comparison-table tr:hover{
  background:rgba(95,179,255,0.05);
}

.highlight-row{
  background:rgba(95,179,255,0.1) !important;
  border-left:3px solid var(--accent);
}

.highlight-row td:first-child{
  color:var(--accent);
}

/* 解読難易度の色分け */
.difficulty-low{
  color:#10b981;
  font-weight:600;
}

.difficulty-medium{
  color:#f59e0b;
  font-weight:600;
}

.difficulty-high{
  color:#ef4444;
  font-weight:600;
}

/* アコーディオンのスタイル */
.accordion{
  margin:0;
}

.accordion-item{
  border:1px solid var(--line);
  border-radius:12px;
  margin-bottom:12px;
  overflow:hidden;
  background:var(--card);
}

.accordion-header{
  width:100%;
  background:var(--btn);
  border:none;
  padding:16px 20px;
  text-align:left;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
  transition:background-color 0.2s ease;
}

.accordion-header:hover{
  background:var(--btn-h);
}

.accordion-header.active{
  background:var(--accent);
  color:#051323;
}

.accordion-header h2{
  margin:0;
  font-size:18px;
  font-weight:600;
  color:inherit;
}

.accordion-icon{
  font-size:14px;
  transition:transform 0.3s ease;
  user-select:none;
}

.accordion-header.active .accordion-icon{
  transform:rotate(0deg);
  color:#051323;
}

.accordion-content{
  max-height:0;
  overflow:hidden;
  transition:max-height 0.4s ease;
  background:var(--panel);
}

.accordion-content.active{
  max-height:2000px; /* 十分大きな値 */
}

.accordion-content > *{
  padding:0 20px 20px;
  margin:0;
}

.accordion-content p:first-child,
.accordion-content ul:first-child,
.accordion-content .table-container:first-child{
  padding-top:20px;
}

/* アコーディオン内の箇条書きの調整 */
.accordion-content ul{
  padding-left:40px; /* デフォルトの20px + 20px追加余白 */
  margin-left:0;
}

.accordion-content li{
  margin-bottom:8px;
  line-height:1.6;
  padding-left:4px; /* 箇条書き記号からの余白 */
}

/* 独自性セクション（簡略化） */
.unique-features{
  margin-top:20px;
  padding:16px;
  background:rgba(95,179,255,0.08);
  border-left:4px solid var(--accent);
  border-radius:8px;
}

.unique-features h3{
  margin:0 0 12px;
  color:var(--accent);
  font-size:16px;
}

.unique-features ul{
  margin:0;
  padding-left:20px;
}

.unique-features li{
  margin-bottom:8px;
  line-height:1.5;
}

/* ライトモード対応 */
[data-theme="light"] .comparison-table{
  background:#ffffff;
}

[data-theme="light"] .comparison-table th{
  background:#f8fafc;
  border-bottom-color:#e2e8f0;
}

[data-theme="light"] .comparison-table td{
  border-bottom-color:#f1f5f9;
}

[data-theme="light"] .comparison-table tr:hover{
  background:rgba(14,165,233,0.05);
}

[data-theme="light"] .highlight-row{
  background:rgba(14,165,233,0.1) !important;
}

[data-theme="light"] .unique-features{
  background:rgba(14,165,233,0.05);
}

/* アコーディオンのライトモード対応 */
[data-theme="light"] .accordion-item{
  background:#ffffff;
  border-color:#e2e8f0;
}

[data-theme="light"] .accordion-header{
  background:#f8fafc;
}

[data-theme="light"] .accordion-header:hover{
  background:#e2e8f0;
}

[data-theme="light"] .accordion-header.active{
  background:var(--accent);
  color:#051323;
}

[data-theme="light"] .accordion-content{
  background:#ffffff;
}

/* レスポンシブ対応 */
@media (max-width: 768px){
  .comparison-table{
    font-size:12px;
  }

  .comparison-table th,
  .comparison-table td{
    padding:8px 6px;
  }

  .unique-features{
    padding:12px;
    font-size:14px;
  }

  /* アコーディオンのレスポンシブ対応 */
  .accordion-header{
    padding:12px 16px;
  }

  .accordion-header h2{
    font-size:16px;
  }

  .accordion-content > *{
    padding:0 16px 16px;
  }

  .accordion-content p:first-child,
  .accordion-content ul:first-child,
  .accordion-content .table-container:first-child{
    padding-top:16px;
  }

  /* アコーディオン内箇条書きのレスポンシブ対応 */
  .accordion-content ul{
    padding-left:36px; /* 16px + 20px */
  }
}

@media (max-width: 480px){
  .table-container{
    margin:12px -12px; /* 親の余白を打ち消し */
    border-radius:0;
    border-left:none;
    border-right:none;
  }

  .comparison-table{
    font-size:11px;
  }

  .comparison-table th,
  .comparison-table td{
    padding:6px 4px;
  }

  .comparison-table th{
    font-size:10px;
  }

  /* アコーディオンの小画面対応 */
  .accordion-header{
    padding:10px 12px;
  }

  .accordion-header h2{
    font-size:15px;
  }

  .accordion-content > *{
    padding:0 12px 12px;
  }

  .accordion-content p:first-child,
  .accordion-content ul:first-child,
  .accordion-content .table-container:first-child{
    padding-top:12px;
  }
}

.app-footer{
  border-top:1px solid var(--line);
  padding:12px 16px 24px;
  color:var(--muted);
  text-align:center;
}
.footer{max-width:1200px; margin:0 auto}