/* ==================================================
   PyHiroba - スタイルシート
   V3 Soft Brutalist デザイン適用
   ================================================== */

/* ---------- リセット・基本 ---------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* ブランドカラー */
  --accent:         #028DAE;
  --accent-dk:      #01617a;
  --accent-soft:    #e3f3f7;
  --accent-border:  #c8e8ef;

  /* インク（テキスト） */
  --ink:            #101418;
  --ink-2:          #2b3138;
  --ink-3:          #5b636c;
  --ink-4:          #6b727c;   /* コントラストAA(4.5:1)を満たすよう調整（旧 #8a929b は3.1:1で不足） */

  /* 背景・サーフェス */
  --bg:             #fbfaf7;
  --paper:          #ffffff;
  --bg-2:           #f3f1ec;

  /* ボーダー */
  --line:           #e7e5e0;
  --line-2:         #efece6;

  /* ステータスカラー */
  --color-red:      #e74c3c;
  --color-orange:   #f59e0b;
  --color-green:    #27ae60;

  /* 旧変数エイリアス（ノートブック互換） */
  --brand:          var(--accent);
  --brand-dk:       var(--accent-dk);
  --brand-light:    rgba(2,141,174,0.10);
  --brand-light2:   rgba(2,141,174,0.04);
  --color-bg:       var(--bg);
  --color-surface:  var(--paper);
  --color-border:   var(--line-2);
  --color-border-md: var(--line);
  --color-text:     var(--ink);
  --color-text-sub: var(--ink-3);
  --color-code-bg:  #f5f4f0;

  /* 角丸 */
  --radius-sm:  4px;
  --radius-md:  14px;
  --radius-lg:  22px;

  /* シャドウ */
  --shadow:     0 1px 0 rgba(16,20,24,.04), 0 8px 28px -12px rgba(16,20,24,.10);
  --shadow-sm:  0 1px 0 rgba(16,20,24,.04), 0 4px 12px -6px rgba(16,20,24,.08);
  --shadow-md:  0 1px 0 rgba(16,20,24,.04), 0 8px 28px -12px rgba(16,20,24,.10);
  --shadow-hover: 0 2px 0 rgba(16,20,24,.04), 0 12px 32px -8px rgba(16,20,24,.14);

  /* フォント */
  --font-ui:   'Zen Kaku Gothic New', system-ui, sans-serif;
  --font-code: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-ui);
  font-feature-settings: "palt";
  -webkit-font-smoothing: antialiased;
  background-color: #f9fbfc;
  background-image:
    linear-gradient(rgba(2,141,174,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(2,141,174,0.04) 1px, transparent 1px);
  background-size: 28px 28px;
  color: var(--ink);
  min-height: 100vh;
  font-size: 16px;
  line-height: 1.6;
}

/* ======================================================
   LP V3 — コンテナ・共通
   ====================================================== */

/* V3 グリッド背景 */
.lp.v3 {
  background-color: #f9fbfc;
  background-image:
    linear-gradient(rgba(2,141,174,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(2,141,174,0.04) 1px, transparent 1px);
  background-size: 28px 28px;
  min-height: 100vh;
}

.container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 40px;
}

/* ---------- LP V3 ナビゲーション ---------- */
.v3-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 0;
}
.v3-logo {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: var(--accent);
  text-decoration: none;
}
.v3-nav-links {
  display: flex;
  gap: 28px;
  font-size: 14px;
  font-weight: 500;
}
.v3-nav-links a {
  color: var(--ink-2);
  text-decoration: none;
  transition: color 0.15s;
}
.v3-nav-links a:hover { color: var(--ink); }
.v3-nav-cta {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ---------- アニメーション共通 ---------- */
@keyframes pyh-blink {
  0%, 50%      { opacity: 1 }
  50.01%, 100% { opacity: 0 }
}

/* ヒーロー タイプライターカーソル */
.v3-hero-cursor {
  display: inline-block;
  width: 0.06em;
  height: 0.85em;
  background: #028DAE;
  margin-left: 0.04em;
  vertical-align: -0.08em;
  opacity: 0.85;
}
.v3-hero-cursor.v3-hero-cursor-blink {
  opacity: 1;
  animation: pyh-blink 1s step-end infinite;
}

/* ノートブック タイプカーソル */
.v3-nb-cursor {
  display: inline-block;
  width: 0.5ch;
  height: 1em;
  background: #028DAE;
  vertical-align: -0.1em;
  animation: pyh-blink 0.8s step-end infinite;
}

/* ---------- LP V3 ボタン ---------- */
.v3-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  font-family: var(--font-ui);
  font-feature-settings: "palt";
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s;
  white-space: nowrap;
}
.v3-btn svg { flex-shrink: 0; }
.v3-btn-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.v3-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -10px rgba(2,141,174,.5);
}
.v3-btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.v3-btn-ghost:hover { background: var(--paper); }
.v3-btn-accent {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent-dk);
  height: 56px;
  padding: 0 32px;
  font-size: 16px;
  font-weight: 800;
}
.v3-btn-accent:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -10px rgba(2,141,174,.5);
}

/* ---------- LP V3 ヒーロー ---------- */
.v3-hero {
  padding: 48px 0 60px;
  text-align: center;
}
.v3-hero-brand {
  margin: 8px auto 32px;
  text-align: center;
}
.v3-hero-kana {
  font-size: 32px;
  font-weight: 700;
  color: var(--ink-2);
  letter-spacing: 0.22em;
  margin-bottom: 10px;
  font-family: var(--font-ui);
}
.v3-hero-name {
  font-size: 108px;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.02;
  color: #028DAE;
  font-family: var(--font-ui);
}
.v3-hero-h1 {
  font-size: 30px;
  line-height: 1.5;
  letter-spacing: 0.005em;
  font-weight: 600;
  margin: 0 auto;
  color: var(--ink);
  font-feature-settings: "palt";
  white-space: nowrap;
}
.v3-hero-cta {
  display: flex;
  justify-content: center;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 36px;
}
.v3-micro {
  color: var(--ink-2);
  font-size: 14px;
  margin-top: 18px;
  line-height: 1.6;
  text-align: center;
}

/* ---------- セクション共通 ---------- */
.v3-features {
  padding: 60px 0;
}
.v3-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin: 0 0 36px;
}
.v3-section-eyebrow {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  font-family: var(--font-code);
}
.v3-section-title {
  font-size: 42px;
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: -0.02em;
  margin: 8px 0 0;
}

/* ---------- 特徴グリッド ---------- */
.v3-feat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  max-width: 1080px;
  margin: 0 auto;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
}
.v3-feat {
  background: var(--paper);
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
  min-height: 240px;
  transition: background 0.2s;
}
.v3-feat:hover {
  background: color-mix(in oklab, var(--accent) 4%, white);
}
.v3-feat-ic {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: color-mix(in oklab, var(--accent) 10%, white);
  color: var(--accent);
  border: 1px solid color-mix(in oklab, var(--accent) 22%, white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.2s;
}
.v3-feat:hover .v3-feat-ic { transform: translateY(-2px); }
.v3-feat-ic svg { width: 22px; height: 22px; }
.v3-feat-num {
  font-family: var(--font-code);
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 0.12em;
  font-weight: 600;
  text-transform: uppercase;
}
.v3-feat h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.v3-feat p {
  margin: 0;
  color: var(--ink-2);
  font-size: 17px;
  line-height: 1.8;
  font-weight: 500;
}
/* 特徴カード内のリンク */
.v3-feat-link {
  display: inline-flex;
  align-items: center;
  color: var(--accent);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  white-space: nowrap;
}
.v3-feat-link:hover { text-decoration: underline; }
.v3-feat p .v3-feat-link { margin-left: 6px; font-size: 16px; }
.v3-feat-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin-top: 4px;
}
/* 特徴カード内のダークモード切替。
   フッターのピル型ボタン(.theme-toggle)を、カード内リンク(.v3-feat-link)に
   なじむ「下線調のトグル」に上書きする。状態同期・アイコン出し分けは
   theme.js / 既存CSS の .theme-toggle の仕組みをそのまま利用する。 */
.v3-feat .theme-toggle {
  margin-top: 8px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  color: var(--accent);
  font-size: 15px;
  font-weight: 700;
  gap: 6px;
}
.v3-feat .theme-toggle:hover { background: none; color: var(--accent); }
.v3-feat .theme-toggle .theme-lbl {
  border-bottom: 1px solid color-mix(in oklab, var(--accent) 38%, transparent);
  transition: border-color 0.15s;
}
.v3-feat .theme-toggle:hover .theme-lbl { border-bottom-color: currentColor; }
/* ラベルは状態で出し分け（初期＝ライトなので「ダークにする」を表示） */
.v3-feat .theme-toggle .theme-label-light { display: none; }
[data-theme="dark"] .v3-feat .theme-toggle .theme-label-dark { display: none; }
[data-theme="dark"] .v3-feat .theme-toggle .theme-label-light { display: inline; }

/* ---------- ノートブックプレビュー ---------- */
.v3-preview-wrap {
  position: relative;
}
.v3-preview-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 40%,
    rgba(251,250,247,.6) 70%,
    rgba(251,250,247,.96) 100%
  );
  pointer-events: none;
  border-radius: var(--radius-lg);
}
.v3-preview-cta {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
}
/* ノートブックプレビュー（アプリ風） */
.v3-nb {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.v3-nb-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 1px 0 rgba(16,20,24,.04);
}
.v3-nb-logo {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, #028DAE, #01617a);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 16px;
  flex-shrink: 0;
}
.v3-nb-title {
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.v3-nb-sub {
  font-size: 11px;
  color: var(--ink-4);
  font-weight: 400;
  letter-spacing: 0.3px;
  margin-left: 6px;
}
.v3-nb-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.v3-nb-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 14px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  border: 1px solid transparent;
  cursor: default;
}
.v3-nb-btn-primary { background: #028DAE; color: #fff; }
.v3-nb-btn-ghost { background: #f5f4f0; color: var(--ink); border-color: var(--line); }
.v3-nb-help {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #028DAE;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(2,141,174,.3);
  cursor: default;
}
.v3-nb-body {
  padding: 20px 18px;
  background: var(--bg);
}
.v3-nb-cell {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  margin-bottom: 12px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(16,20,24,.04), 0 4px 12px -6px rgba(16,20,24,.08);
}
.v3-nb-cell:last-child { margin-bottom: 0; }
.v3-nb-cell-tb {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px 3px 10px;
  background: transparent;
  border-bottom: 1px solid var(--line);
}
.v3-nb-cell-num {
  font-family: var(--font-code);
  font-size: 11px;
  color: var(--ink-3);
  font-weight: 600;
  min-width: 20px;
}
/* コード/テキスト 切替トグル（実アプリと同じ見た目） */
.v3-nb-toggle {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  padding: 1px;
  background: rgba(16,20,24,0.04);
  border-radius: 7px;
}
.v3-nb-tgl {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-4);
}
.v3-nb-tgl svg { display: block; }
.v3-nb-tgl.is-active {
  background: #fff;
  color: var(--accent);
  box-shadow: 0 1px 0 rgba(16,20,24,0.04), 0 1px 3px rgba(16,20,24,0.08);
}
.v3-nb-cell-run {
  margin-left: auto;
  background: linear-gradient(180deg, #03a4c8, #028DAE);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 11.5px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 1px 2px rgba(2,141,174,.3);
  cursor: default;
}
.v3-nb-cell-run svg { display: block; }
.v3-nb-ico {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-4);
  font-size: 12px;
  line-height: 1;
  border-radius: 6px;
}
.v3-nb-cell-body { padding: 10px 14px; }
.v3-nb-code {
  font-family: var(--font-code);
  font-size: 13px;
  line-height: 1.7;
  color: #1a1f25;
  white-space: pre-wrap;
  margin: 0;
}
.v3-kw  { color: #9020a8; }
.v3-fn  { color: #2563b8; }
.v3-st  { color: #117a3b; }
.v3-co  { color: #8a929b; }
.v3-nm  { color: #b25e1e; }
/* 出力エリア（実行済みバッジ＋出力／チャート） */
.v3-nb-output {
  border-top: 1px solid var(--line);
  background: #fafaf8;
  padding: 9px 14px 12px;
}
.v3-nb-done-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 700;
  color: #2f9e44;
  background: #ebfbee;
  border: 1px solid #c3e6cb;
  border-radius: 999px;
  padding: 2px 9px;
  letter-spacing: 0.02em;
}
.v3-nb-out {
  margin-top: 8px;
  font-family: var(--font-code);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--ink-2);
  white-space: pre;
}
.v3-nb-chart {
  margin-top: 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px;
}

/* ---------- HOW TO USE (ご利用方法) ---------- */
.v3-faq-section {
  padding: 80px 0;
  border-top: 1px solid var(--ink);
}
.v3-faq {
  background: #fff;
  border: 1px solid var(--ink);
  border-radius: var(--radius-md);
  box-shadow: 6px 6px 0 var(--ink);
  padding: 36px 40px;
  margin-top: 32px;
}
.v3-faq-item {
  border-top: 1px solid var(--line);
  padding: 22px 0;
}
.v3-faq-q {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.v3-q {
  color: var(--accent);
  font-family: var(--font-code);
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
}
.v3-faq-a {
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.8;
  margin-top: 10px;
}

/* ---------- HOW TO USE ステップリスト ---------- */
.v3-use-steps {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: 0;
  padding: 0;
}
.v3-use-step {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.v3-step-num {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #028DAE;
  color: #fff;
  font-weight: 800;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.v3-step-body {
  padding-top: 6px;
}
.v3-step-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--ink);
}
.v3-step-desc {
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.7;
  margin-bottom: 14px;
}
.v3-btn-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 22px;
  font-size: 14px;
  font-weight: 700;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: opacity .15s;
}
.v3-btn-sm:hover { opacity: .85; }
.v3-btn-sm.v3-btn-primary {
  background: #028DAE;
  color: #fff;
  border: 1.5px solid #028DAE;
}
.v3-btn-sm.v3-btn-outline {
  background: transparent;
  color: #028DAE;
  border: 1.5px solid #028DAE;
}

/* ---------- フッター ---------- */
.v3-footer {
  margin-top: 80px;
  padding: 64px 0 32px;
  border-top: 1px solid var(--ink);
  background: var(--paper);
}
.v3-footer-top {
  display: grid;
  grid-template-columns: 1.1fr 1.4fr;
  gap: 60px;
  padding-bottom: 48px;
}
.v3-footer-logo {
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #028DAE;
  font-family: var(--font-ui);
}
.v3-footer-kana {
  font-size: 0.5em;
  font-weight: 700;
  color: var(--ink-3);
  margin-left: 10px;
}
.v3-footer-tagline {
  margin: 14px 0 0;
  color: var(--ink-3);
  font-size: 14px;
  line-height: 1.7;
  max-width: 38ch;
}
.v3-footer-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.v3-footer-cols h5 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin: 0 0 16px;
  font-family: var(--font-code);
}
.v3-footer-cols a {
  display: block;
  font-size: 14px;
  color: var(--ink-2);
  font-weight: 500;
  text-decoration: none;
  padding: 6px 0;
  transition: color 0.15s;
}
.v3-footer-cols a:hover { color: var(--accent); }
.v3-footer-bottom {
  margin-top: 32px;
  display: flex;
  justify-content: space-between;
  color: var(--ink-4);
  font-size: 12.5px;
}

/* レスポンシブ (LP V3) */
@media (max-width: 760px) {
  .container { padding: 0 20px; }
  .v3-nav-links { display: none; }
  .v3-hero { padding: 32px 0 40px; }
  .v3-hero-name { font-size: 64px; }
  .v3-hero-h1 { font-size: 20px; white-space: normal; }
  .v3-section-title { font-size: 28px; }
  .v3-feat-grid { grid-template-columns: minmax(0, 1fr); }
  .v3-feat { padding: 24px; min-height: unset; min-width: 0; }
  .v3-feat > div { min-width: 0; }
  /* 長いカード内リンク（例：安心・安全への取り組みはこちら →）を折り返し、横あふれを防ぐ */
  .v3-feat-link { white-space: normal; }
  /* スマホでは機能の文字を小さめにして読みやすく */
  .v3-feat p { overflow-wrap: anywhere; font-size: 15px; line-height: 1.75; }
  .v3-feat h3 { font-size: 18px; }
  .v3-feat-num { font-size: 10px; }
  .v3-faq { grid-template-columns: 1fr; padding: 24px 18px; }
  /* ご利用方法ステップ：本文やボタンがはみ出さないよう縮小を許可 */
  .v3-use-step { min-width: 0; }
  .v3-step-body { min-width: 0; }
  /* 長いボタン（例：アンケートに回答する →）を折り返して枠内に収める */
  .v3-use-step .v3-btn { white-space: normal; height: auto; min-height: 44px; padding: 10px 18px; }
  .v3-footer-top { grid-template-columns: 1fr; gap: 32px; }
  .v3-footer-cols { grid-template-columns: 1fr 1fr; }
}

/* ======================================================
   ウェルカム画面（Picker デザイン）
   ====================================================== */
#welcome-overlay {
  position: fixed;
  inset: 0;
  background-color: #f9fbfc;
  background-image:
    linear-gradient(rgba(2,141,174,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(2,141,174,0.04) 1px, transparent 1px);
  background-size: 28px 28px;
  display: flex;
  flex-direction: column;
  z-index: 5000;
  overflow-y: auto;
}
#welcome-overlay.hidden { display: none; }

/* ナビバー */
.picker-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}
.picker-logo {
  font-family: var(--font-ui);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: var(--accent);
  text-decoration: none;
}
.picker-nav-cta {
  display: flex;
  align-items: center;
  gap: 10px;
}
.picker-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  font-size: 13px;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  font-family: var(--font-ui);
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  transition: background 0.15s;
}
.picker-btn-ghost:hover { background: rgba(0,0,0,0.04); }

/* メインエリア */
.picker-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
}
.picker-wrap { max-width: 1080px; width: 100%; }

/* ヒーロー */
.picker-hero { text-align: center; margin-bottom: 48px; }
.picker-kana {
  font-size: 22px;
  font-weight: 600;
  color: var(--ink-3);
  letter-spacing: 0.32em;
  margin-bottom: -4px;
  padding-left: 0.32em;
}
.picker-name {
  font-size: 108px;
  font-weight: 900;
  color: #028DAE;
  letter-spacing: -0.03em;
  line-height: 1.02;
  margin: 0;
  font-family: var(--font-ui);
  min-height: 1.1em;
}
.picker-caret {
  display: inline-block;
  width: 0.06em;
  height: 0.85em;
  background: #028DAE;
  margin-left: 0.04em;
  vertical-align: -0.08em;
  animation: pyh-blink 1s step-end infinite;
}
.picker-question {
  font-size: 18px;
  color: var(--ink-2);
  margin-top: 32px;
  font-weight: 500;
}

/* カードグリッド */
.picker-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.picker-card {
  position: relative;
  border-radius: 20px;
  padding: 36px 32px;
  border: 1px solid rgba(0,0,0,0.06);
  background: var(--paper);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.03);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  overflow: hidden;
  min-height: 200px;
  font-family: var(--font-ui);
  font-feature-settings: "palt";
  text-align: left;
}
.picker-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06), 0 16px 40px rgba(0,0,0,0.06);
}
.picker-ic {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
  overflow: hidden;
}
.picker-ic svg {
  width: 28px !important;
  height: 28px !important;
  display: block;
  flex-shrink: 0;
}
.picker-card h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.picker-card p {
  margin: 0;
  font-size: 14px;
  color: var(--ink-3);
  line-height: 1.6;
}
.picker-deco {
  position: absolute;
  right: -40px;
  top: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  opacity: 0.08;
  pointer-events: none;
}

/* カード色バリアント */
.pc1 .picker-ic { background: linear-gradient(135deg, #028DAE, #02a5cb); }
.pc1 .picker-deco { background: #028DAE; }
.pc1 { background: linear-gradient(180deg, rgba(2,141,174,0.04), rgba(255,255,255,0.5)); }

.pc2 .picker-ic { background: linear-gradient(135deg, #f59e0b, #fbbf24); }
.pc2 .picker-deco { background: #f59e0b; }
.pc2 { background: linear-gradient(180deg, rgba(245,158,11,0.05), rgba(255,255,255,0.5)); }

.pc3 .picker-ic { background: linear-gradient(135deg, #7c3aed, #a78bfa); }
.pc3 .picker-deco { background: #7c3aed; }
.pc3 { background: linear-gradient(180deg, rgba(124,58,237,0.05), rgba(255,255,255,0.5)); }

.pc4 .picker-ic { background: linear-gradient(135deg, #e11d48, #fb7185); }
.pc4 .picker-deco { background: #e11d48; }
.pc4 { background: linear-gradient(180deg, rgba(225,29,72,0.05), rgba(255,255,255,0.5)); cursor: default; }
.pc4:hover { transform: none; box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.03); }

/* URL入力行 */
.picker-url-row {
  display: flex;
  gap: 8px;
  margin-top: auto;
}
.picker-url-row input {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 10px;
  font-family: var(--font-code);
  font-size: 13px;
  background: #fff;
  color: var(--ink-2);
  outline: none;
  min-width: 0;
}
.picker-url-row input:focus { border-color: #7c3aed; }
.picker-url-row button {
  background: #7c3aed;
  color: #fff;
  border: none;
  padding: 10px 18px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  font-family: var(--font-ui);
  transition: background 0.15s;
  white-space: nowrap;
}
.picker-url-row button:hover { background: #6d28d9; }
.picker-url-row button:disabled { opacity: 0.6; cursor: default; }

/* フッター */
.picker-footer {
  text-align: center;
  padding: 24px;
  font-size: 13px;
  color: var(--ink-3);
}
/* ピッカー画面内に置いたLP共通フッターは、カードとの間に少し余白を空ける */
#welcome-overlay .v3-footer { margin-top: 56px; }

@media (max-width: 720px) {
  /* 列を minmax(0,1fr) にして、カード内の URL 入力欄の最小幅で列が広がり
     画面外にはみ出す（＝スマホで左上だけ拡大表示される）のを防ぐ */
  .picker-grid { grid-template-columns: minmax(0, 1fr); }
  .picker-name { font-size: 54px; }
  .picker-card { min-width: 0; }
  .picker-url-row { min-width: 0; }
  .picker-url-row input { min-width: 0; width: 100%; }
}
@media (max-width: 480px) {
  .picker-card { padding: 24px 20px; }
  .picker-hero { margin-bottom: 32px; }
  .picker-name { font-size: 44px; }
  .picker-main { padding: 28px 14px; }
}

/* ======================================================
   読み込み画面
   ====================================================== */
#loading-overlay {
  position: fixed;
  inset: 0;
  background: #028DAE;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.4s ease;
}
#loading-overlay.hidden {
  opacity: 0;
  pointer-events: none;
  display: none;
}
.loading-box {
  text-align: center;
  color: #fff;
  padding: 40px;
  max-width: 480px;
  width: 90%;
}
.loading-box h2 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 32px;
  letter-spacing: 0.02em;
}
.loading-bar-outer {
  background: rgba(255,255,255,0.25);
  border-radius: 100px;
  height: 12px;
  overflow: hidden;
  margin-bottom: 20px;
}
.loading-bar-inner {
  height: 100%;
  width: 0%;
  background: rgba(255,255,255,0.85);
  border-radius: 100px;
  transition: width 0.6s ease;
}
#loading-status {
  font-size: 16px;
  opacity: 0.9;
  margin-bottom: 10px;
}
.loading-note {
  font-size: 14px;
  opacity: 0.65;
}

/* ======================================================
   ノートブック共通設定
   ====================================================== */
#app-header,
#main-content,
#notebook-container {
  /* LP 非表示中はノートブック系を隠す */
}

/* ---------- ヘッダー ---------- */
#app-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  gap: 12px;
}
.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.header-logo {
  font-size: 28px;
  line-height: 1;
}
.header-title-group h1 {
  font-size: 18px;
  font-weight: 900;
  color: var(--accent);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.header-subtitle {
  font-size: 11px;
  color: var(--ink-4);
  font-weight: 400;
  letter-spacing: 0.3px;
}
.header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.btn-header {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--font-ui);
  font-feature-settings: "palt";
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.15s, box-shadow 0.15s;
}
.btn-header:active { transform: scale(0.97); }
/* ヘッダーのハンバーガーボタン（通常は非表示、狭い画面でのみ表示） */
.header-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255,255,255,0.6);
  color: var(--ink-2);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s;
}
.header-menu-btn:hover { background: rgba(2,141,174,0.08); }
.header-menu-btn:active { transform: scale(0.97); }
.btn-run-all {
  background: linear-gradient(180deg, #03a4c8, #028DAE);
  color: #fff;
  border-color: #017a96;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 1px 2px rgba(2,141,174,.25), 0 4px 10px rgba(2,141,174,.18);
}
.btn-run-all:hover {
  background: linear-gradient(180deg, #028DAE, #01617a);
  transform: translateY(-1px);
}
.btn-clear {
  background: rgba(255,255,255,0.6);
  color: var(--ink-2);
  border-color: var(--line);
  backdrop-filter: blur(6px);
}
.btn-clear:hover {
  background: #fff;
  transform: translateY(-1px);
}
.btn-about {
  background: transparent;
  color: var(--ink-3);
  border-color: var(--line);
  margin-left: 6px;
  padding: 7px 12px;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: 9px;
}
.btn-about:hover {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
  transform: translateY(-1px);
}

/* ---------- ヘルプパネル ---------- */
#help-panel {
  position: fixed;
  top: 60px;
  right: 20px;
  width: 380px;
  max-width: calc(100vw - 40px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  z-index: 200;
  padding: 20px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
#help-panel.hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
}
.help-close {
  float: right;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 4px 8px;
  font-family: var(--font-ui);
  font-size: 12px;
  cursor: pointer;
  color: var(--ink-3);
  transition: background 0.15s ease;
}
.help-close:hover { background: var(--bg-2); }
.help-content h3 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
  padding-left: 2px;
}
.help-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-bottom: 8px;
}
.help-table th, .help-table td {
  padding: 6px 8px;
  border: 1px solid var(--line);
  text-align: left;
}
.help-table th {
  background: var(--color-code-bg);
  font-weight: 600;
  color: var(--ink-3);
  font-size: 11px;
  letter-spacing: 0.5px;
}
.help-content kbd {
  display: inline-block;
  padding: 1px 5px;
  background: var(--line-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 11px;
  font-family: var(--font-code);
}
.help-content code {
  display: block;
  background: var(--color-code-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-family: var(--font-code);
  font-size: 12px;
  margin: 6px 0;
  line-height: 1.8;
  color: var(--accent-dk);
}
.help-content ul {
  padding-left: 20px;
  font-size: 13px;
  color: var(--ink-2);
}
.help-content ul li { margin-bottom: 4px; line-height: 1.65; }

/* ---------- メインコンテンツ ---------- */
#main-content {
  max-width: 900px;
  margin: 0 auto;
  padding: 24px 20px 60px;
}

/* ---------- セル共通 ---------- */
.cell {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  margin-bottom: 0;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  position: relative;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.cell:hover {
  box-shadow: var(--shadow-hover);
}
.cell.cell-focused {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--brand-light);
}
.cell.running {
  border-color: var(--color-orange);
  box-shadow: 0 0 0 3px rgba(245,158,11,0.15);
}

/* セルツールバー */
.cell-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 8px 3px 10px;
  background: transparent;
  border-bottom: 1px solid var(--line);
  gap: 6px;
}
.cell-toolbar-left {
  display: flex;
  align-items: center;
  gap: 6px;
}
.cell-toolbar-right {
  display: flex;
  align-items: center;
  gap: 3px;
}
.cell-number {
  font-family: var(--font-code);
  font-size: 11px;
  color: var(--ink-3);
  font-weight: 600;
  min-width: 20px;
}
/* セルタイプ切替トグル */
.cell-type-toggle {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  padding: 1px;
  background: rgba(16,20,24,0.04);
  border-radius: 7px;
}
.cell-type-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: transparent;
  border: none;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-4);
  cursor: pointer;
  font-family: var(--font-ui);
  transition: background 0.15s, color 0.15s;
}
.cell-type-btn.is-active {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 1px 0 rgba(16,20,24,0.04), 0 1px 3px rgba(16,20,24,0.08);
}
.cell-code .cell-type-btn.is-active[data-type="code"] { color: var(--accent); }
.cell-text .cell-type-btn.is-active[data-type="text"] { color: #8a6f2a; }

/* ---------- コードセル ---------- */
.cell-code .cell-toolbar {
  background: transparent;
  border-bottom-color: var(--line);
}
.cell-editor .CodeMirror {
  font-family: var(--font-code);
  font-size: 14px;
  line-height: 1.6;
  height: auto;
  min-height: 60px;
  border: none;
  background: #fff;
  padding: 12px 0;
}
.cell-editor .CodeMirror-scroll {
  min-height: 60px;
}
.cell-editor .CodeMirror-gutters {
  background: var(--color-code-bg);
  border-right: 1px solid var(--line);
  min-width: 40px;
}
.cell-editor .CodeMirror-linenumber {
  color: var(--ink-4);
  font-size: 12px;
}
.cell-editor .CodeMirror-cursor {
  border-left-color: var(--accent);
}
.cell-editor .CodeMirror-selected {
  background: rgba(2,141,174,0.12);
}
/* コードセル編集中、CodeMirror 内部（入力用 textarea 等）にフォーカス枠を出さない。
   セルの強調は外枠（.cell-focused）だけで十分。スマホのタッチ操作で
   textarea:focus-visible のアウトラインが内側に二重表示されるのを防ぐ。 */
.cell-editor .CodeMirror textarea:focus,
.cell-editor .CodeMirror textarea:focus-visible,
.cell-editor .CodeMirror-scroll:focus,
.cell-editor .CodeMirror:focus,
.cell-editor .CodeMirror:focus-within {
  outline: none !important;
}

/* ---------- 出力エリア ---------- */
.cell-output {
  border-top: 1px solid var(--line);
  background: #fafaf8;
  min-height: 0;
}
.cell-output:empty { display: none; }
/* 実行済みマーク（出力エリア上部） */
.output-done-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  padding: 2px 10px;
  margin: 10px 16px 0;
  line-height: 1.6;
  letter-spacing: 0.02em;
}
.output-done-badge .done-check {
  font-weight: 900;
}
.output-done-badge.is-ok {
  color: #2f9e44;
  background: #ebfbee;
  border: 1px solid #c3e6cb;
}
.output-done-badge.is-err {
  color: #868e96;
  background: #f1f3f5;
  border: 1px solid #dee2e6;
}
.output-running {
  padding: 12px 16px;
  color: var(--accent);
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.output-running .spinner {
  display: inline-block;
  animation: spin 1s linear infinite;
}
.output-text {
  padding: 12px 16px;
}
.output-text pre {
  font-family: var(--font-code);
  font-size: 13px;
  white-space: pre-wrap;
  word-break: break-all;
  line-height: 1.6;
  color: var(--ink);
}
.output-warning {
  padding: 12px 16px;
  background: #fffbeb;
  border-left: 4px solid #f59e0b;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.output-warning pre {
  font-family: var(--font-code);
  font-size: 12px;
  white-space: pre-wrap;
  color: #92400e;
  margin: 0;
}
/* 警告の種別バッジ + 行番号バッジ */
.warning-header {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.warning-type-badge {
  display: inline-flex;
  align-items: center;
  background: #fef3c7;
  color: #92400e;
  font-weight: 700;
  font-size: 12px;
  padding: 2px 10px;
  border-radius: 999px;
  font-family: var(--font-code);
}
.warning-line-badge {
  display: inline-flex;
  align-items: center;
  background: #fefce8;
  color: #a16207;
  font-weight: 600;
  font-size: 12px;
  padding: 2px 10px;
  border-radius: 999px;
}
/* 警告メッセージ原文 */
.warning-message {
  font-family: var(--font-code);
  font-size: 12.5px;
  color: #92400e;
  background: #fffaf0;
  border-radius: var(--radius-sm);
  padding: 5px 10px;
  margin: 0;
  white-space: pre-wrap;
}
/* 日本語ヒント */
.warning-japanese {
  font-size: 13px;
  color: #7c4a03;
  background: #fef9c3;
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  line-height: 1.75;
}
.warning-japanese::before { content: "💡 "; }
.output-error {
  padding: 14px 16px;
  background: #f8fafc;
  border-left: 4px solid #94a3b8;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
/* エラー種別バッジ + 行番号バッジ */
.error-header {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.error-type-badge {
  display: inline-flex;
  align-items: center;
  background: #e2e8f0;
  color: #334155;
  font-weight: 700;
  font-size: 12px;
  padding: 2px 10px;
  border-radius: 999px;
  font-family: var(--font-code);
  letter-spacing: 0.01em;
}
.error-line-badge {
  display: inline-flex;
  align-items: center;
  background: #eef2f7;
  color: #475569;
  font-weight: 600;
  font-size: 12px;
  padding: 2px 10px;
  border-radius: 999px;
}
/* 英語エラーメッセージ原文 */
.error-message {
  font-family: var(--font-code);
  font-size: 12.5px;
  color: #475569;
  white-space: pre-wrap;
  background: #f1f5f9;
  border-radius: var(--radius-sm);
  padding: 5px 10px;
  margin: 0;
}
/* 問題のあるコード行 */
.error-code-line {
  background: #f8fafc;
  border: 1px solid #d8dee7;
  border-radius: 6px;
  padding: 5px 10px;
  font-family: var(--font-code);
  font-size: 12.5px;
  color: #334155;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.error-code-label {
  font-size: 11px;
  color: #64748b;
  white-space: nowrap;
  font-weight: 600;
  padding-top: 1px;
  flex-shrink: 0;
}
/* 日本語ヒント */
.error-japanese {
  font-size: 13px;
  color: #1e3a5f;
  background: #eff6ff;
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  line-height: 1.75;
}
.error-japanese::before { content: "💡 "; }
.error-details {
  margin-top: 2px;
}
.error-details summary {
  font-size: 12px;
  color: var(--ink-3);
  cursor: pointer;
  padding: 4px 0;
  user-select: none;
}
.error-details pre {
  font-family: var(--font-code);
  font-size: 11px;
  white-space: pre-wrap;
  color: var(--ink-3);
  margin-top: 6px;
  background: var(--color-code-bg);
  padding: 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
}
.output-figure {
  padding: 12px 16px;
  text-align: center;
  background: #fff;
}
.output-figure img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}
/* ---------- HTML repr（DataFrame など） ---------- */
.output-html {
  padding: 12px 16px;
  overflow-x: auto;
}
.output-html table {
  border-collapse: collapse;
  font-family: var(--font-code);
  font-size: 12.5px;
  line-height: 1.5;
}
.output-html table th,
.output-html table td {
  border: 1px solid var(--line);
  padding: 4px 10px;
  text-align: right;
  white-space: nowrap;
}
.output-html table thead th {
  background: var(--bg-2);
  font-weight: 600;
  text-align: center;
}
.output-html table tbody tr:hover {
  background: var(--accent-soft);
}

/* ---------- テキストセル ---------- */
.cell-text .cell-toolbar {
  background: transparent;
  border-bottom-color: var(--line);
}
/* テキストセルは通常ツールバーを隠してシームレスに。
   クリック（編集）すると .editing が付いて再表示される。 */
.cell-text .cell-toolbar { display: none; }
.cell-text.editing .cell-toolbar { display: flex; }

/* ── セクション折りたたみ（Colab風） ── */
/* 折りたたみボタン（見出しセルの左上・控えめ） */
.cell-collapse-btn {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  width: 22px;
  height: 22px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--ink-4);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.cell-collapse-btn:hover { background: rgba(16,20,24,0.06); color: var(--ink-2); }
.cell-collapse-btn .chev { transition: transform 0.15s ease; display: block; }
.cell-collapse-btn.is-collapsed .chev { transform: rotate(-90deg); }
/* 編集中はボタンを隠す（ツールバーと重ならないように） */
.cell.editing .cell-collapse-btn { display: none; }
/* 折りたたみボタンの分だけ、見出しテキストを右に寄せる */
.cell.is-collapse-header .cell-text-display { padding-left: 42px; }
/* 折りたたみ中のセル数表示（灰色・小さめ） */
.cell-collapsed-note {
  padding: 4px 20px 12px 42px;
  font-size: 12px;
  color: var(--ink-4);
  cursor: pointer;
  user-select: none;
}
.cell-collapsed-note:hover { color: var(--ink-2); text-decoration: underline; }
.cell-text-display {
  padding: 16px 20px;
  min-height: 48px;
  cursor: text;
  line-height: 1.8;
}
.cell-text-display:hover { background: #f9faf7; }
.cell-text-display .placeholder {
  color: var(--ink-4);
  font-style: italic;
  font-size: 14px;
}
.cell-text-display h1 { font-size: 22px; font-weight: 900; margin: 8px 0; color: var(--ink); }
.cell-text-display h2 { font-size: 18px; font-weight: 700; margin: 12px 0 6px; color: var(--accent); }
.cell-text-display h3 { font-size: 16px; font-weight: 700; margin: 10px 0 4px; color: var(--ink-2); }
.cell-text-display h4 { font-size: 15px; font-weight: 700; margin: 10px 0 4px; color: var(--ink-2); }
.cell-text-display h5 { font-size: 14px; font-weight: 700; margin: 8px 0 3px; color: var(--ink-3); }
.cell-text-display h6 { font-size: 13px; font-weight: 700; margin: 8px 0 3px; color: var(--ink-3); }
.cell-text-display p  { margin: 6px 0; color: var(--ink-2); }
.cell-text-display ul, .cell-text-display ol { padding-left: 24px; margin: 6px 0; }
.cell-text-display li { margin: 3px 0; color: var(--ink-2); }
.cell-text-display code {
  font-family: var(--font-code);
  background: var(--color-code-bg);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 13px;
  border: 1px solid var(--line);
  color: var(--accent-dk);
}
.cell-text-display pre code {
  display: block;
  padding: 10px;
  font-size: 13px;
  overflow-x: auto;
}
.cell-text-display strong { font-weight: 700; }
.cell-text-display em     { font-style: italic; }
.cell-text-display blockquote {
  border-left: 3px solid var(--accent);
  padding-left: 12px;
  color: var(--ink-3);
  margin: 8px 0;
}
/* テキストセル内の画像（.ipynb に埋め込まれた図・スライド画像など） */
.cell-text-display { overflow-wrap: anywhere; }
/* 画像やその折り返し用ラッパが、セル幅を絶対に超えないようにする */
.cell-text-display img,
.cell-text-display svg,
.cell-text-display video,
.cell-text-display table { max-width: 100% !important; }
.cell-text-display div,
.cell-text-display p,
.cell-text-display figure { max-width: 100%; }
.cell-text-display img {
  height: auto;
  display: block;
  margin: 12px auto;
  border-radius: 10px;
  border: 1px solid var(--line);
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.cell-text-display div[align="center"] { text-align: center; }
/* 画像だけのテキストセル（スライド画像など）→ クリックで拡大 */
.cell-text-display.is-media {
  cursor: zoom-in;
  padding: 12px 20px;
  text-align: center;
}
.cell-text-display.is-media:hover { background: #f4fbfc; }
.cell-text-display.is-media img { margin: 0 auto; transition: transform .15s ease; }
.cell-text-display.is-media:hover img { transform: scale(1.01); }
/* 画像だけのテキストセルに重ねる「スライドに変換」チップ（ホバー/フォーカスで出現） */
.cell-text-display.is-media { position: relative; }
.media-to-slide-chip {
  position: absolute;
  top: 20px;
  right: 28px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.92);
  color: var(--ink-2);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  opacity: 0;
  transition: opacity 0.15s ease, color 0.15s, border-color 0.15s;
}
.cell-text-display.is-media:hover .media-to-slide-chip,
.media-to-slide-chip:focus-visible { opacity: 1; }
.media-to-slide-chip:hover { color: var(--accent); border-color: var(--accent); }
/* ライブラリ読み込み中の表示 */
.output-loading-pkg {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.output-loading-pkg small {
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 400;
}

/* !pip install の結果表示 */
.output-pip {
  font-size: 13px;
  line-height: 1.7;
  padding: 9px 13px;
  border-radius: 9px;
  margin-bottom: 8px;
}
.output-pip.is-ok {
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  color: var(--accent-dk);
  font-weight: 600;
}
.output-pip.is-err {
  background: #fdecec;
  border: 1px solid #f6c9c9;
  color: #b83a3a;
  font-weight: 600;
}
.output-pip .pip-reason {
  color: var(--ink-2);
  font-weight: 400;
}
.cell-text-editor textarea {
  width: 100%;
  min-height: 120px;
  border: none;
  border-top: 2px dashed rgba(2,141,174,0.3);
  padding: 14px 20px;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.8;
  resize: vertical;
  outline: none;
  background: #f0fafb;
  color: var(--ink);
}
.text-editor-hint {
  padding: 6px 20px;
  font-size: 11px;
  color: var(--ink-3);
  background: #f0fafb;
  border-top: 1px solid rgba(2,141,174,0.15);
}

/* ---------- ツールバーボタン ---------- */
.btn-run {
  background: linear-gradient(180deg, #03a4c8, #028DAE);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 6px 14px;
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 400;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 1px 2px rgba(2,141,174,.3), 0 4px 10px rgba(2,141,174,.18);
  transition: background 0.15s ease, transform 0.1s;
}
.btn-run:hover {
  background: linear-gradient(180deg, #028DAE, #01617a);
  transform: translateY(-1px);
}
.btn-run:active { transform: scale(0.96); }
.btn-run:disabled { background: rgba(2,141,174,0.4); cursor: not-allowed; transform: none; box-shadow: none; }
/* 実行中：アイコンをクルクル回す */
.btn-run .spin {
  display: inline-block;
  transform-origin: center;
  animation: spin 0.7s linear infinite;
}
/* 実行完了：少し薄くして「実行済み」を示す（ホバーで元に戻る） */
.btn-run.is-done { opacity: 0.85; transition: opacity 0.15s ease; }
.btn-run.is-done:hover { opacity: 1; }

/* ヘッダーの停止ボタン */
.btn-header.btn-stop-run {
  background: linear-gradient(180deg, #f43f5e, #e11d48);
  color: #fff;
  border-color: #be123c;
}
.btn-header.btn-stop-run:hover { background: linear-gradient(180deg, #e11d48, #be123c); }
/* 停止された出力 */
.output-stopped {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  color: #9b1c1c;
  background: #fff5f5;
  border-left: 3px solid #e11d48;
  font-size: 13px;
}

/* 停止ボタン */
.btn-stop {
  background: #c0392b;
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 5px 12px;
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  animation: stop-pulse 1.4s ease-in-out infinite;
}
@keyframes stop-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(192,57,43,.45); }
  50% { box-shadow: 0 0 0 6px rgba(192,57,43,0); }
}

.btn-edit-text {
  background: rgba(2,141,174,0.08);
  color: var(--accent);
  border: 1px solid rgba(2,141,174,0.2);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease;
}
.btn-edit-text:hover { background: var(--brand-light); }

.btn-icon {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  cursor: pointer;
  color: var(--ink-4);
  transition: background 0.15s ease, border-color 0.15s, color 0.15s;
  line-height: 1;
  padding: 0;
}
.btn-icon:hover {
  background: rgba(16,20,24,0.05);
  border-color: var(--line);
  color: var(--ink-2);
}
.btn-icon:disabled { opacity: 0.3; cursor: not-allowed; }
.btn-delete { color: #b04a3f; }
.btn-delete:hover { background: #fdecea !important; border-color: #f3c7c1 !important; color: #962d22 !important; }

/* ---------- セル追加ボタン（下部） ---------- */
#bottom-add-bar {
  display: flex;
  gap: 12px;
  justify-content: center;
  padding: 20px 0 10px;
}
.btn-add-bottom {
  background: var(--paper);
  border: 1.5px dashed var(--line);
  border-radius: var(--radius-md);
  padding: 10px 24px;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-3);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.btn-add-bottom:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--brand-light);
}

/* ---------- セル間追加ボタン ---------- */
.cell-add-between {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 0;
  overflow: visible;
  opacity: 0;
  transition: opacity 0.15s ease;
  position: relative;
  z-index: 10;
  margin: 0;
}
.cell-wrapper:hover .cell-add-between,
.cell-add-between:focus-within {
  opacity: 1;
}
.btn-add-between {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  /* 目立たない控えめなグレーの小さな＋ */
  background: #fff;
  color: var(--ink-4);
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(16, 20, 24, 0.08);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  /* セル間の余白は保ったまま、＋の中心をセルの下ラインに重ねる（.cell の margin-bottom 分だけ上へ） */
  transform: translateY(0);
}
.btn-add-between svg { display: block; width: 12px; height: 12px; }
.btn-add-between:hover {
  background: var(--bg-2);
  color: var(--ink-2);
  border-color: var(--ink-4);
}

/* ---------- セルラッパー ---------- */
.cell-wrapper {
  position: relative;
  margin-bottom: 8px;
}

/* ---------- 画像セル ---------- */
.cell-image-area { padding: 14px 16px; }
.cell-image-display { text-align: center; }
.cell-image-display img { max-width: 100%; height: auto; border-radius: 10px; }
.image-alt-input {
  display: block;
  width: 100%;
  margin: 10px 0 0;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 13px;
}
.image-alt-input:focus { outline: none; border-color: var(--accent); }
.image-alt-input::placeholder { color: var(--ink-4); }
.btn-image-remove { margin-top: 8px; }

/* ---------- スライドセル ---------- */
.cell-slide .cell-toolbar {
  background: transparent;
  border-bottom-color: var(--line);
}
.slide-drop-zone {
  margin: 20px;
  border: 2px dashed var(--line);
  border-radius: var(--radius-md);
  padding: 36px;
  text-align: center;
  color: var(--ink-3);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.slide-drop-zone:hover,
.slide-drop-zone.drag-over {
  border-color: var(--accent);
  background: var(--brand-light);
  color: var(--accent);
}
.slide-drop-zone .drop-icon { font-size: 36px; margin-bottom: 8px; }
.slide-drop-zone p  { font-size: 14px; margin: 0 0 4px; }
.slide-drop-zone small { font-size: 11px; }
.slide-area { padding: 16px 16px 12px; }
.slide-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: thin;
}
.slide-strip::-webkit-scrollbar { height: 5px; }
.slide-strip::-webkit-scrollbar-thumb { background: rgba(2,141,174,0.25); border-radius: 3px; }
.slide-thumb-wrap {
  position: relative;
  flex-shrink: 0;
  width: 140px;
  height: 96px;
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.slide-thumb-wrap:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}
.slide-thumb-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.slide-thumb-del {
  position: absolute;
  top: 4px; right: 4px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  color: #fff;
  border: none;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s;
}
.slide-thumb-wrap:hover .slide-thumb-del { opacity: 1; }
.slide-num {
  position: absolute;
  bottom: 4px; left: 6px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}
.slide-add-chip {
  flex-shrink: 0;
  width: 140px; height: 96px;
  border-radius: var(--radius-md);
  border: 2px dashed var(--line);
  background: var(--color-code-bg);
  color: var(--ink-3);
  font-size: 24px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.slide-add-chip span { font-size: 11px; font-weight: 500; }
.slide-add-chip:hover {
  border-color: var(--accent);
  background: var(--brand-light);
  color: var(--accent);
}

/* ---------- ライトボックス ---------- */
.slide-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0,0,0,0.92);
  display: flex;
  align-items: center;
  justify-content: center;
}
.slide-lightbox.hidden { display: none; }
.lightbox-img {
  max-width: calc(100vw - 140px);
  max-height: calc(100vh - 80px);
  object-fit: contain;
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 40px rgba(0,0,0,0.6);
  user-select: none;
}
.lightbox-close {
  position: fixed;
  top: 18px; right: 22px;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  color: #fff;
  border: none;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}
.lightbox-close:hover { background: rgba(255,255,255,0.28); }
.lightbox-prev,
.lightbox-next {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  color: #fff;
  border: none;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
  user-select: none;
}
.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }
.lightbox-prev:hover,
.lightbox-next:hover { background: rgba(255,255,255,0.28); }
.lightbox-prev:disabled,
.lightbox-next:disabled { opacity: 0.25; cursor: default; }
.lightbox-counter {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.7);
  font-size: 13px;
  font-weight: 500;
  background: rgba(0,0,0,0.4);
  padding: 4px 14px;
  border-radius: 100px;
}

/* ---------- ノートブック フッター ---------- */
.nb-footer {
  margin-top: 60px;
  padding: 20px 0;
  background: var(--paper);
  border-top: 1px solid var(--line);
}
.nb-footer .footer-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}
.nb-footer .v3-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.nb-footer .footer-brand {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.nb-footer .footer-logo {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: var(--accent);
}
.nb-footer .footer-logo-sub {
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-3);
}
.nb-footer .footer-copy {
  font-size: 12px;
  color: var(--ink-4);
}
.nb-footer .footer-links {
  display: flex;
  gap: 8px;
}
.nb-footer .footer-links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font-size: 12.5px;
  color: var(--ink-2);
  font-weight: 600;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(255,255,255,0.6);
  text-decoration: none;
  transition: background 0.15s, color 0.15s, transform 0.15s, border-color 0.15s;
}
.nb-footer .footer-links a:hover {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
  transform: translateY(-1px);
}

/* ---------- ユーティリティ ---------- */
.hidden {
  display: none !important;
}

/* ---------- スクロールバー ---------- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(2,141,174,0.25); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(2,141,174,0.45); }

/* ---------- レスポンシブ（ノートブック） ---------- */
@media (max-width: 600px) {
  #main-content { padding: 12px 10px 40px; }
  .header-subtitle { display: none; }
  .btn-header { padding: 6px 10px; font-size: 12px; }
  #bottom-add-bar { flex-direction: column; align-items: center; }
  /* ヘッダーが収まらない小画面では、操作ボタンをハンバーガーのドロップダウンにまとめる。
     #app-header は position:sticky なので、そのまま absolute の基準になる。 */
  .header-menu-btn { display: inline-flex; }
  .header-right {
    position: absolute;
    top: calc(100% + 6px);
    right: 10px;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    min-width: 190px;
    padding: 8px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(16,20,24,0.16);
    display: none;
    z-index: 300;
  }
  #app-header.menu-open .header-right { display: flex; }
  .header-right .btn-header { width: 100%; justify-content: flex-start; font-size: 13px; padding: 9px 12px; }
}

/* ======================================================
   教材ガイドページ（guide-use / guide-publish）
   ====================================================== */
.guide-topbar {
  display: flex; align-items: center; justify-content: space-between;
  max-width: 880px; margin: 0 auto; padding: 22px 24px;
}
.guide-topbar .guide-logo {
  font-weight: 900; font-size: 18px; color: var(--accent);
  text-decoration: none; letter-spacing: -0.01em;
}
.guide-topbar a.guide-back {
  display: inline-flex; align-items: center; gap: 6px;
  height: 38px; padding: 0 16px; font-size: 13px; font-weight: 600;
  border-radius: 999px; border: 1px solid var(--ink);
  color: var(--ink); text-decoration: none; background: transparent;
  transition: background .15s;
}
.guide-topbar a.guide-back:hover { background: rgba(0,0,0,0.04); }
.guide-page { max-width: 880px; margin: 0 auto; padding: 0 24px 80px; }
.guide-hero { text-align: center; padding: 36px 0 8px; }
.guide-hero .guide-eyebrow {
  font-family: var(--font-code); font-size: 13px; font-weight: 600;
  letter-spacing: 0.18em; color: var(--accent); margin-bottom: 14px;
}
.guide-hero h1 {
  font-size: 34px; font-weight: 900; letter-spacing: -0.02em;
  color: var(--ink); margin: 0 0 16px; line-height: 1.3;
}
.guide-hero p {
  font-size: 15px; color: var(--ink-3); line-height: 1.85;
  max-width: 640px; margin: 0 auto;
}
.guide-steps { margin-top: 40px; display: flex; flex-direction: column; gap: 18px; }
.guide-step {
  display: flex; gap: 18px;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 16px; padding: 24px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.guide-step-num {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent); color: #fff; font-weight: 800;
  display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.guide-step-body { flex: 1; min-width: 0; }
.guide-step-body h3 { margin: 4px 0 8px; font-size: 18px; font-weight: 700; color: var(--ink); }
.guide-step-body p { margin: 0 0 8px; color: var(--ink-2); font-size: 14.5px; line-height: 1.85; }
.guide-step-body ul { margin: 6px 0; padding-left: 20px; }
.guide-step-body li { margin: 5px 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.8; }
.guide-step-body code {
  font-family: var(--font-code); font-size: 13px;
  background: var(--color-code-bg); padding: 2px 6px; border-radius: 4px;
  color: var(--accent-dk); word-break: break-all;
}
.guide-url-box {
  background: #f8fafc; border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 12px; margin: 10px 0;
  font-family: var(--font-code); font-size: 12.5px; color: var(--ink-2);
  word-break: break-all; line-height: 1.8;
}
.guide-note {
  margin-top: 32px; padding: 18px 20px;
  background: var(--accent-soft); border: 1px solid var(--accent-border);
  border-radius: 14px; color: var(--ink-2); font-size: 14px; line-height: 1.9;
}
.guide-note h4 { margin: 0 0 6px; color: var(--accent-dk); font-size: 14px; }
.guide-foot {
  margin-top: 40px; display: flex; flex-wrap: wrap; gap: 14px; justify-content: center;
}
.guide-foot a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 18px; border-radius: 999px;
  border: 1px solid var(--accent); color: var(--accent);
  text-decoration: none; font-weight: 700; font-size: 14px;
  transition: opacity .15s;
}
.guide-foot a.primary { background: var(--accent); color: #fff; }
.guide-foot a:hover { opacity: .88; }
@media (max-width: 640px) {
  .guide-hero h1 { font-size: 26px; }
  .guide-step { flex-direction: column; gap: 10px; }
}

/* ============================================================
   共通モーダル（確認/通知ダイアログ）
   ============================================================ */
.pmodal-overlay {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(16, 20, 24, 0.42);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.18s ease;
}
.pmodal-overlay.is-open { opacity: 1; }

.pmodal {
  width: 100%;
  max-width: 400px;
  background: #fff;
  border-radius: 18px;
  padding: 28px 26px 22px;
  box-shadow: 0 24px 60px -12px rgba(16, 20, 24, 0.34);
  text-align: center;
  transform: translateY(10px) scale(0.97);
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.pmodal-overlay.is-open .pmodal { transform: translateY(0) scale(1); }

.pmodal-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
}
.pmodal-icon.is-danger {
  background: #fdecec;
  color: #d64545;
}
.pmodal-icon svg { width: 26px; height: 26px; }

.pmodal-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
}
.pmodal-msg {
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-3);
  white-space: pre-line;
  /* 長いURLなどがモーダルからはみ出さないよう、必要なら途中で改行する */
  overflow-wrap: anywhere;
  word-break: break-word;
  margin-bottom: 22px;
}
.pmodal-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.pmodal-btn {
  flex: 1;
  min-width: 0;
  padding: 11px 16px;
  border-radius: 11px;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}
.pmodal-cancel {
  background: var(--bg-2);
  color: var(--ink-2);
  border-color: var(--border, #e2ded6);
}
.pmodal-cancel:hover { background: #eae7e0; }
.pmodal-confirm {
  background: var(--accent);
  color: #fff;
}
.pmodal-confirm:hover { background: var(--accent-dk); }
.pmodal-confirm.is-danger { background: #d64545; }
.pmodal-confirm.is-danger:hover { background: #b83a3a; }
.pmodal-default {
  background: #fff;
  color: var(--ink-2);
  border-color: var(--line);
}
.pmodal-default:hover { background: var(--bg-2); }
.pmodal-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ============================================================
   アクセシビリティ
   ============================================================ */

/* キーボード操作時の可視フォーカス（マウス操作では出ない）。
   全ての操作可能要素にはっきりした枠を表示する。 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible,
.picker-card:focus-visible,
.cell-text-display:focus-visible {
  outline: 3px solid var(--accent-dk);
  outline-offset: 2px;
  border-radius: 4px;
}
/* CodeMirror がフォーカスを持ったときのセル強調（フォーカス位置を分かりやすく） */
.cell.cell-focused { box-shadow: 0 0 0 2px var(--accent-dk); }

/* 本文へスキップ（キーボードでTabすると最初に現れるリンク） */
.skip-link {
  position: fixed;
  top: -60px;
  left: 12px;
  z-index: 13000;
  background: var(--accent-dk);
  color: #fff;
  padding: 10px 16px;
  border-radius: 0 0 10px 10px;
  font-weight: 700;
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 0; }

/* スクリーンリーダー専用テキスト（画面には出さず、読み上げにだけ使う） */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* ============================================================
   ダークモード切替ボタン（フッター共通・js/theme.js が制御）
   ============================================================ */
.v3-footer-bottom {
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-3);
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.theme-toggle:hover {
  color: var(--ink);
  border-color: var(--ink-4);
  background: rgba(16,20,24,0.04);
}
.theme-toggle svg { display: block; flex-shrink: 0; }
/* アイコンはテーマに応じて月／太陽を切り替える。
   .theme-toggle svg（詳細度0,1,1）に負けないよう .theme-toggle 配下で指定する。 */
.theme-toggle .theme-ic-sun { display: none; }
[data-theme="dark"] .theme-toggle .theme-ic-moon { display: none; }
[data-theme="dark"] .theme-toggle .theme-ic-sun { display: block; }
[data-theme="dark"] .theme-toggle:hover { background: rgba(255,255,255,0.07); }

/* ============================================================
   ダークモード
   フッターの切替ボタンで <html data-theme="dark"> が付与された
   ときだけ適用される。基本はテーマ変数の上書きで反転し、
   ハードコード色を使っている箇所だけ個別に調整する。
   ============================================================ */
:root { color-scheme: light; }

:root[data-theme="dark"] {
  color-scheme: dark;

  /* ブランドカラー（暗背景でのコントラスト確保のため少し明るく） */
  --accent:         #35aecb;
  --accent-dk:      #7fd0e2;   /* 暗背景では「濃い」役割を明るい色が担う（フォーカス枠など） */
  --accent-soft:    #0e2f38;
  --accent-border:  #1d4a58;

  /* インク（テキスト） */
  --ink:            #e8eaed;
  --ink-2:          #c9cfd6;
  --ink-3:          #9aa3ad;
  --ink-4:          #8b939e;

  /* 背景・サーフェス */
  --bg:             #12161a;
  --paper:          #191e24;
  --bg-2:           #21272e;

  /* ボーダー */
  --line:           #2c333b;
  --line-2:         #272d35;

  /* ステータスカラー */
  --color-red:      #f0705f;
  --color-orange:   #f5b04b;
  --color-green:    #4cc272;

  /* 旧変数エイリアス */
  --brand-light:    rgba(53,174,203,0.16);
  --brand-light2:   rgba(53,174,203,0.07);
  --color-code-bg:  #14191f;

  /* シャドウ（暗背景では黒を強めに） */
  --shadow:     0 1px 0 rgba(0,0,0,.35), 0 8px 28px -12px rgba(0,0,0,.55);
  --shadow-sm:  0 1px 0 rgba(0,0,0,.35), 0 4px 12px -6px rgba(0,0,0,.45);
  --shadow-md:  0 1px 0 rgba(0,0,0,.35), 0 8px 28px -12px rgba(0,0,0,.55);
  --shadow-hover: 0 2px 0 rgba(0,0,0,.35), 0 12px 32px -8px rgba(0,0,0,.6);
}

/* ---------- 背景（本体・LP・ウェルカム画面の方眼グリッド） ---------- */
[data-theme="dark"] body,
[data-theme="dark"] .lp.v3,
[data-theme="dark"] #welcome-overlay {
  background-color: #101418;
  background-image:
    linear-gradient(rgba(53,174,203,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(53,174,203,0.05) 1px, transparent 1px);
}

/* ---------- アクセント塗りのボタン等：白文字→暗色文字に反転 ---------- */
[data-theme="dark"] .v3-btn-primary,
[data-theme="dark"] .v3-btn-accent,
[data-theme="dark"] .pmodal-confirm,
[data-theme="dark"] .guide-step-num,
[data-theme="dark"] .guide-foot a.primary,
[data-theme="dark"] .skip-link {
  color: #0e1418;
}
[data-theme="dark"] .pmodal-confirm.is-danger { color: #fff; }

/* ---------- ハードコードのブランド青（#028DAE）を明るいアクセントへ ---------- */
[data-theme="dark"] .v3-hero-name,
[data-theme="dark"] .picker-name,
[data-theme="dark"] .v3-footer-logo { color: var(--accent); }
[data-theme="dark"] .v3-hero-cursor,
[data-theme="dark"] .v3-nb-cursor,
[data-theme="dark"] .picker-caret { background: var(--accent); }
[data-theme="dark"] .v3-btn-sm.v3-btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #0e1418;
}
[data-theme="dark"] .v3-btn-sm.v3-btn-outline {
  color: var(--accent);
  border-color: var(--accent);
}

/* ---------- LP：ノートブックモック ---------- */
[data-theme="dark"] .v3-nb-bar { background: var(--paper); }
[data-theme="dark"] .v3-nb-cell { background: var(--paper); }
[data-theme="dark"] .v3-nb-btn-ghost { background: #232a32; }
[data-theme="dark"] .v3-nb-toggle { background: rgba(255,255,255,0.06); }
[data-theme="dark"] .v3-nb-tgl.is-active { background: #2b333c; }
[data-theme="dark"] .v3-nb-code { color: var(--ink); }
[data-theme="dark"] .v3-kw { color: #c792ea; }
[data-theme="dark"] .v3-fn { color: #82aaff; }
[data-theme="dark"] .v3-st { color: #c3e88d; }
[data-theme="dark"] .v3-co { color: #7d8799; }
[data-theme="dark"] .v3-nm { color: #f78c6c; }
[data-theme="dark"] .v3-nb-output { background: #151a20; }
[data-theme="dark"] .v3-nb-done-badge {
  color: #58c97a;
  background: rgba(76,194,114,0.12);
  border-color: rgba(76,194,114,0.35);
}
[data-theme="dark"] .v3-preview-overlay {
  background: linear-gradient(
    to bottom,
    transparent 40%,
    rgba(16,20,24,.6) 70%,
    rgba(16,20,24,.96) 100%
  );
}

/* ---------- LP：特徴カード・FAQ ---------- */
[data-theme="dark"] .v3-feat:hover {
  background: color-mix(in oklab, var(--accent) 7%, #191e24);
}
[data-theme="dark"] .v3-feat-ic {
  background: color-mix(in oklab, var(--accent) 16%, #191e24);
  border-color: color-mix(in oklab, var(--accent) 32%, #191e24);
}
[data-theme="dark"] .v3-faq { background: var(--paper); }

/* ---------- ウェルカム画面（Picker） ---------- */
[data-theme="dark"] .picker-card {
  border-color: rgba(255,255,255,0.08);
}
[data-theme="dark"] .pc1 { background: linear-gradient(180deg, rgba(53,174,203,0.10), rgba(25,30,36,0.5)); }
[data-theme="dark"] .pc2 { background: linear-gradient(180deg, rgba(245,158,11,0.10), rgba(25,30,36,0.5)); }
[data-theme="dark"] .pc3 { background: linear-gradient(180deg, rgba(167,139,250,0.10), rgba(25,30,36,0.5)); }
[data-theme="dark"] .pc4 { background: linear-gradient(180deg, rgba(251,113,133,0.10), rgba(25,30,36,0.5)); }
[data-theme="dark"] .picker-url-row input {
  background: #12161a;
  border-color: rgba(255,255,255,0.12);
}
[data-theme="dark"] .picker-btn-ghost:hover { background: rgba(255,255,255,0.06); }

/* ---------- 読み込み画面 ---------- */
[data-theme="dark"] #loading-overlay { background: #024459; }

/* ---------- ヘッダー ---------- */
[data-theme="dark"] .btn-clear { background: rgba(25,30,36,0.6); }
[data-theme="dark"] .btn-clear:hover { background: #232a32; }
[data-theme="dark"] .btn-about:hover { color: #101418; }

/* ---------- セル・ツールバー ---------- */
[data-theme="dark"] .cell-type-toggle { background: rgba(255,255,255,0.06); }
[data-theme="dark"] .cell-type-btn.is-active { background: #2b333c; }
[data-theme="dark"] .cell-text .cell-type-btn.is-active[data-type="text"] { color: #d9b96a; }
[data-theme="dark"] .btn-icon:hover { background: rgba(255,255,255,0.07); }
[data-theme="dark"] .btn-delete { color: #e08a7c; }
[data-theme="dark"] .btn-delete:hover {
  background: rgba(240,112,95,0.14) !important;
  border-color: rgba(240,112,95,0.4) !important;
  color: #f0917f !important;
}
[data-theme="dark"] .cell-collapse-btn:hover { background: rgba(255,255,255,0.08); }
[data-theme="dark"] .btn-add-between { background: var(--paper); }

/* ---------- コードエディタ（CodeMirror） ---------- */
[data-theme="dark"] .cell-editor .CodeMirror {
  background: var(--paper);
  color: var(--ink);
}
[data-theme="dark"] .cell-editor .CodeMirror-selected { background: rgba(53,174,203,0.20); }
[data-theme="dark"] .cell-editor .cm-s-default .cm-keyword  { color: #c792ea; }
[data-theme="dark"] .cell-editor .cm-s-default .cm-atom     { color: #f78c6c; }
[data-theme="dark"] .cell-editor .cm-s-default .cm-number   { color: #f78c6c; }
[data-theme="dark"] .cell-editor .cm-s-default .cm-def      { color: #82aaff; }
[data-theme="dark"] .cell-editor .cm-s-default .cm-variable { color: var(--ink); }
[data-theme="dark"] .cell-editor .cm-s-default .cm-variable-2 { color: #addb67; }
[data-theme="dark"] .cell-editor .cm-s-default .cm-property { color: #addb67; }
[data-theme="dark"] .cell-editor .cm-s-default .cm-operator { color: #89ddff; }
[data-theme="dark"] .cell-editor .cm-s-default .cm-comment  { color: #7d8799; }
[data-theme="dark"] .cell-editor .cm-s-default .cm-string   { color: #c3e88d; }
[data-theme="dark"] .cell-editor .cm-s-default .cm-string-2 { color: #c3e88d; }
[data-theme="dark"] .cell-editor .cm-s-default .cm-meta     { color: #89ddff; }
[data-theme="dark"] .cell-editor .cm-s-default .cm-builtin  { color: #ffcb6b; }
[data-theme="dark"] .cell-editor .cm-s-default .cm-bracket  { color: #a6accd; }
[data-theme="dark"] .cell-editor .cm-s-default .cm-error    { color: #f0705f; }
[data-theme="dark"] .cell-editor .CodeMirror span.CodeMirror-matchingbracket {
  color: #4cc272;
  background: rgba(76,194,114,0.15);
}

/* ---------- 出力エリア ---------- */
[data-theme="dark"] .cell-output { background: #151a20; }
[data-theme="dark"] .output-done-badge.is-ok {
  color: #58c97a;
  background: rgba(76,194,114,0.12);
  border-color: rgba(76,194,114,0.35);
}
[data-theme="dark"] .output-done-badge.is-err {
  color: #9aa3ad;
  background: #232930;
  border-color: #333b44;
}
/* 警告（黄系） */
[data-theme="dark"] .output-warning { background: #2a2214; border-left-color: #f5b04b; }
[data-theme="dark"] .output-warning pre { color: #eecf8a; }
[data-theme="dark"] .warning-type-badge { background: #3a2f16; color: #f2d38b; }
[data-theme="dark"] .warning-line-badge { background: #322a12; color: #e5c46b; }
[data-theme="dark"] .warning-message { background: #262017; color: #eecf8a; }
[data-theme="dark"] .warning-japanese { background: #33290f; color: #ecd9a0; }
/* エラー（グレー/青系） */
[data-theme="dark"] .output-error { background: #1a2027; border-left-color: #566374; }
[data-theme="dark"] .error-type-badge { background: #2c3642; color: #c3cedb; }
[data-theme="dark"] .error-line-badge { background: #242d37; color: #a8b4c2; }
[data-theme="dark"] .error-message { background: #202832; color: #aab7c6; }
[data-theme="dark"] .error-code-line { background: #1c232b; border-color: #323d49; color: #c3cedb; }
[data-theme="dark"] .error-code-label { color: #8494a6; }
[data-theme="dark"] .error-japanese { background: #16283c; color: #a8c8ee; }
/* 停止・pip失敗（赤系） */
[data-theme="dark"] .output-stopped { background: #2a1a1c; color: #f0a2a2; }
[data-theme="dark"] .output-pip.is-err {
  background: rgba(240,112,95,0.12);
  border-color: rgba(240,112,95,0.35);
  color: #f0917f;
}
/* グラフ画像は白背景のまま見せる（matplotlib の書き出しが白のため） */

/* ---------- テキストセル ---------- */
[data-theme="dark"] .cell-text-display:hover { background: #1c2127; }
[data-theme="dark"] .cell-text-display.is-media:hover { background: #17222a; }
[data-theme="dark"] .cell-text-editor textarea,
[data-theme="dark"] .text-editor-hint { background: #10242b; }
[data-theme="dark"] .media-to-slide-chip { background: rgba(25,30,36,0.92); }
[data-theme="dark"] .media-to-slide-chip:hover { background: var(--paper); }

/* ---------- モーダル ---------- */
[data-theme="dark"] .pmodal-overlay { background: rgba(0,0,0,0.6); }
[data-theme="dark"] .pmodal { background: var(--paper); }
[data-theme="dark"] .pmodal-cancel { border-color: var(--line); }
[data-theme="dark"] .pmodal-cancel:hover { background: #2a323b; }
[data-theme="dark"] .pmodal-default { background: var(--paper); }
[data-theme="dark"] .pmodal-icon.is-danger { background: rgba(240,112,95,0.15); color: #f0705f; }

/* ---------- ノートブックフッター・ガイドページ ---------- */
[data-theme="dark"] .nb-footer .footer-links a { background: rgba(25,30,36,0.6); }
[data-theme="dark"] .nb-footer .footer-links a:hover { color: #101418; }
[data-theme="dark"] .guide-topbar a.guide-back:hover { background: rgba(255,255,255,0.06); }
[data-theme="dark"] .guide-url-box { background: #1a2027; }