:root {
      --ink: #0f172a; --muted: #475569; --subtle: #94a3b8;
      --line: #e2e8f0; --line-dark: #cbd5e1;
      --bg: #f8fafc; --bg-panel: #ffffff; --bg-sidebar: #f1f5f9;
      --accent: #0f172a; --accent-hover: #1e293b;
      --warn-bg: #fffbeb; --warn-border: #fde68a; --warn-ink: #78350f;
      --red: #b91c1c; --red-bg: #fef2f2;
      --blue: #0369a1; --blue-bg: #eff6ff;
      --green: #166534; --green-bg: #f0fdf4;
    }
    * { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; }
    body {
      font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, sans-serif;
      color: var(--ink); background: var(--bg);
      line-height: 1.7; -webkit-font-smoothing: antialiased;
    }
    .mono { font-family: "JetBrains Mono", "SF Mono", Consolas, monospace; }

    /* Topbar */
    .topbar {
      background: white; border-bottom: 1px solid var(--line);
      padding: 10px 16px; display: flex; align-items: center; gap: 14px;
      height: 48px;
    }
    .topbar .brand { font-size: 13px; font-weight: 700; letter-spacing: 0.1em;
      display: inline-flex; align-items: center; }
    .topbar .brand a { color: var(--ink); text-decoration: none;
      display: inline-flex; align-items: center; }
    .topbar .brand-logo { height: 46px; width: auto; display: block;
      object-fit: contain; max-width: 210px; }
    @media (max-width: 600px) {
      .topbar .brand-logo { height: 34px; max-width: 150px; }
    }
    .topbar .case-code {
      font-size: 10px; letter-spacing: 0.15em; background: var(--ink); color: white;
      padding: 2px 8px; border-radius: 3px;
    }
    .topbar .progress-wrap { display: flex; align-items: center; gap: 8px; flex: 1; max-width: 360px; }
    .topbar .progress-label { font-size: 11px; color: var(--muted); }
    .topbar .progress-items { display: flex; gap: 4px; flex: 1; }
    .topbar .progress-item {
      flex: 1; height: 24px; border-radius: 4px;
      background: var(--line); display: flex; align-items: center;
      justify-content: center; font-size: 10px; color: var(--muted);
      transition: all 0.3s;
    }
    .topbar .progress-item.done { background: var(--green-bg); color: var(--green); }
    .topbar .progress-item .label { font-size: 10px; }
    .topbar .right-actions {
      margin-left: auto; display: flex; gap: 8px;
    }
    .topbar .btn {
      background: none; border: 1px solid var(--line-dark);
      padding: 6px 12px; border-radius: 5px;
      font-size: 12px; cursor: pointer; color: var(--ink);
      transition: all 0.15s;
    }
    .topbar .btn:hover { border-color: var(--ink); background: var(--bg); }
    .topbar .btn.primary { background: var(--ink); color: white; border-color: var(--ink); }
    .topbar .btn.primary:hover { background: var(--accent-hover); }
    .topbar .mode-badge { font-size: 11px; }

    /* Mode selector dropdown */
    .mode-menu {
      position: fixed; top: 52px; right: 16px; z-index: 300;
      background: white; border: 1px solid var(--line); border-radius: 8px;
      box-shadow: 0 8px 28px rgba(15,23,42,0.14);
      padding: 10px; min-width: 320px;
      display: none;
    }
    .mode-menu.open { display: block; }
    .mode-menu-title {
      font-size: 11px; color: var(--muted); font-weight: 500;
      letter-spacing: 0.05em; padding: 4px 8px 8px; border-bottom: 1px solid var(--line);
      margin-bottom: 4px;
    }
    .mode-option {
      display: flex; gap: 10px; align-items: flex-start;
      padding: 10px 12px; border-radius: 6px; cursor: pointer;
      width: 100%; border: none; background: transparent; text-align: left;
      font: inherit; color: inherit;
      transition: background 0.12s;
    }
    .mode-option:hover { background: var(--bg); }
    .mode-option.active { background: var(--blue-bg); }
    .mode-option .mode-option-icon { font-size: 18px; margin-top: 2px; }
    .mode-option-name { font-size: 13px; font-weight: 500; margin-bottom: 2px; }
    .mode-option.active .mode-option-name::after { content: ' ✓'; color: var(--green); }
    .mode-option-desc { font-size: 11px; color: var(--muted); line-height: 1.5; }

    /* Mode: guided -- reveal all think-cards, show interpretations */
    body.mode-guided .think-card:not(.revealed) .think-reveal { display: block; }
    body.mode-guided .think-card .think-question,
    body.mode-guided .think-card .think-hint { display: none; }
    body.mode-guided .think-card { cursor: default; background: #fef7e0; }
    body.mode-guided .think-card:hover { box-shadow: none; }
    body.mode-guided .hint-interpretation { display: block; }

    /* Mode: normal (default) -- hide interpretation from blue banners */
    body.mode-normal .hint-interpretation { display: none; }
    body.mode-normal .hint-orientation-only { display: block; }

    /* Interpretation blocks inside blue banners (hidden on normal mode) */
    .hint-interpretation {
      display: block;
      background: rgba(3,105,161,0.06);
      border-radius: 4px; padding: 8px 10px; margin-top: 8px;
      font-size: 12px; line-height: 1.6;
    }
    .hint-interpretation::before {
      content: '💡 ガイド付きモードの解釈: ';
      font-weight: 700; color: var(--blue); font-size: 11px;
    }

    /* Mode selector on brief section */
    .mode-selector-panel {
      background: white; border: 2px solid var(--blue);
      border-radius: 10px; padding: 18px 22px;
      margin: 20px 0;
      box-shadow: 0 2px 8px rgba(3,105,161,0.08);
    }
    .mode-selector-panel h3 {
      margin: 0 0 6px; font-size: 15px; color: var(--blue);
    }
    .mode-selector-panel .mode-intro {
      font-size: 12px; color: var(--muted); margin: 0 0 12px; line-height: 1.6;
    }
    .mode-selector-panel .mode-grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    }
    .mode-selector-panel .mode-card {
      border: 1px solid var(--line); border-radius: 8px;
      padding: 12px 14px; cursor: pointer;
      transition: all 0.15s; background: white;
    }
    .mode-selector-panel .mode-card:hover {
      border-color: var(--ink); transform: translateY(-1px);
    }
    .mode-selector-panel .mode-card.active {
      border-color: var(--blue); background: var(--blue-bg);
    }
    .mode-selector-panel .mode-card-icon {
      font-size: 20px; margin-bottom: 4px;
    }
    .mode-selector-panel .mode-card-name {
      font-size: 13px; font-weight: 700; margin-bottom: 4px;
    }
    .mode-selector-panel .mode-card-desc {
      font-size: 11px; color: var(--muted); line-height: 1.6;
    }
    @media (max-width: 600px) {
      .mode-selector-panel .mode-grid { grid-template-columns: 1fr; }
    }

    /* Layout: sidebar | main | right panel
       右パネル幅は CSS 変数 --panel-w で可変。drag handle で調整、localStorage に保存 */
    .workspace {
      display: grid;
      grid-template-columns: 200px 1fr var(--panel-w, 500px);
      height: calc(100vh - 48px);
      transition: grid-template-columns 0.25s;
    }
    .workspace.panel-closed { grid-template-columns: 200px 1fr 0px; }
    /* drag 中は transition 無効化(滑らか化) */
    .workspace.resizing { transition: none; }
    .workspace.resizing * { user-select: none; pointer-events: none; }
    .workspace.resizing .panel-resizer { pointer-events: auto; }

    /* 右パネルのドラッグハンドル(右パネル左端) */
    .panel-resizer {
      position: absolute; top: 0; left: -3px; width: 6px; height: 100%;
      cursor: col-resize; z-index: 50;
      background: transparent; transition: background 0.15s;
    }
    .panel-resizer:hover, .panel-resizer.dragging { background: rgba(15,23,42,0.18); }
    .right-panel { position: relative; }
    @media (max-width: 900px) {
      .panel-resizer { display: none; }  /* モバイルではボトムシート、リサイズ不要 */
    }
    .workspace.panel-closed .right-panel { display: none; }

    /* Sidebar */
    .sidebar {
      background: var(--bg-sidebar); border-right: 1px solid var(--line);
      padding: 16px 0; overflow-y: auto;
    }
    .sidebar .section {
      padding: 0 12px; margin-bottom: 16px;
    }
    .sidebar .section-title {
      font-size: 10px; letter-spacing: 0.15em; color: var(--subtle);
      text-transform: uppercase; font-weight: 700; margin-bottom: 6px;
      padding: 0 8px;
    }
    .sidebar .nav-item {
      display: flex; align-items: center; gap: 8px;
      padding: 7px 10px; margin: 1px 0;
      font-size: 13px; color: var(--ink); cursor: pointer; border-radius: 5px;
      transition: background 0.15s;
    }
    .sidebar .nav-item:hover { background: rgba(15,23,42,0.06); }
    .sidebar .nav-item.active {
      background: var(--ink); color: white; font-weight: 500;
    }
    .sidebar .nav-item .icon { font-size: 14px; opacity: 0.85; }
    .sidebar .nav-item .check {
      margin-left: auto; color: var(--green); font-size: 11px;
    }
    .sidebar .nav-item.active .check { color: white; }

    /* Main content */
    .main {
      overflow-y: auto; padding: 28px 36px 60px;
    }
    .main > section { display: none; animation: fadeIn 0.3s ease; }
    .main > section.active { display: block; }
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* Right panel */
    .right-panel {
      background: white; border-left: 1px solid var(--line);
      display: flex; flex-direction: column; overflow: hidden;
    }
    .panel-tabs {
      display: flex; border-bottom: 1px solid var(--line);
      background: var(--bg-sidebar);
    }
    .panel-tab {
      flex: 1; padding: 12px 8px; font-size: 12px;
      background: none; border: none; cursor: pointer;
      color: var(--muted); border-bottom: 2px solid transparent;
      transition: all 0.15s;
      display: flex; align-items: center; justify-content: center; gap: 6px;
    }
    .panel-tab:hover { color: var(--ink); background: rgba(15,23,42,0.03); }
    .panel-tab.active {
      color: var(--ink); border-bottom-color: var(--ink);
      background: white; font-weight: 500;
    }
    .panel-content {
      flex: 1; overflow: hidden; display: flex; flex-direction: column;
    }
    .panel-pane { display: none; flex: 1; overflow: hidden; flex-direction: column; }
    .panel-pane.active { display: flex; }

    /* User persona card (shown at top of right panel) */
    .persona-card {
      display: flex; align-items: center; gap: 10px;
      padding: 8px 12px; background: linear-gradient(90deg, #f8fafc, white);
      border-bottom: 1px solid var(--line);
    }
    .persona-card .persona-avatar {
      width: 48px; height: 48px; border-radius: 50%;
      background-size: cover; background-position: center center;
      border: 2px solid white;
      box-shadow: 0 0 0 1px var(--line);
      flex-shrink: 0;
    }
    .persona-card .persona-text { font-size: 11px; line-height: 1.4; flex: 1; min-width: 0; }
    .persona-card .persona-label {
      font-size: 9px; color: var(--muted);
      letter-spacing: 0.05em; font-weight: 500;
    }
    .persona-card .persona-name { font-size: 12px; font-weight: 700; color: var(--ink); }
    .persona-card .persona-role { font-size: 10px; color: var(--muted); }

    /* Reviewer intro (Sonoda) in review pane */
    .reviewer-intro {
      display: flex; align-items: center; gap: 12px;
      padding: 12px 16px;
      background: linear-gradient(90deg, #f0f9ff, #eff6ff);
      border-bottom: 1px solid var(--line);
    }
    .reviewer-intro .reviewer-avatar {
      width: 72px; height: 72px; border-radius: 50%;
      background-size: cover; background-position: center center;
      border: 3px solid white;
      box-shadow: 0 0 0 1px var(--blue), 0 2px 6px rgba(3,105,161,0.12);
      flex-shrink: 0;
    }
    .reviewer-intro .reviewer-body { flex: 1; min-width: 0; }
    .reviewer-intro .reviewer-label {
      font-size: 10px; color: var(--blue); font-weight: 500;
      letter-spacing: 0.05em;
    }
    .reviewer-intro .reviewer-name { font-size: 14px; font-weight: 700; color: var(--ink); }
    .reviewer-intro .reviewer-role { font-size: 11px; color: var(--muted); }

    /* Character switcher (hearing tab) */
    .character-switcher {
      display: flex; gap: 4px; padding: 8px 8px 0;
      background: var(--bg-sidebar); border-bottom: 1px solid var(--line);
    }
    .char-tab {
      flex: 1; background: white; border: 1px solid var(--line);
      border-bottom: none; border-radius: 6px 6px 0 0;
      padding: 8px 6px 10px; cursor: pointer;
      display: flex; flex-direction: column; align-items: center; gap: 2px;
      font-size: 11px; color: var(--muted);
      transition: all 0.15s; position: relative;
    }
    .char-tab:hover:not(.locked) { background: var(--bg); }
    .char-tab.active {
      background: white; color: var(--ink); font-weight: 500;
      box-shadow: 0 -2px 0 var(--ink) inset;
      border-bottom: 1px solid white;
      margin-bottom: -1px;
    }
    .char-tab.locked {
      opacity: 0.55; cursor: not-allowed; background: #fafbfc;
    }
    .char-tab .char-avatar {
      width: 56px; height: 56px; border-radius: 50%;
      background-size: cover; background-position: center center;
      margin-bottom: 6px;
      border: 2px solid white;
      box-shadow: 0 0 0 1px var(--line);
    }
    .char-tab.locked .char-avatar { filter: grayscale(0.8) brightness(0.9); }
    .char-tab .char-name { font-size: 12px; font-weight: 500; color: var(--ink); }
    .char-tab.locked .char-name { color: var(--muted); }
    .char-tab .char-role { font-size: 9px; color: var(--subtle); }
    .char-tab .char-lock {
      position: absolute; top: 4px; right: 4px; font-size: 10px;
    }
    .hearing-frames {
      flex: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 0;
    }
    .char-frame {
      display: none; flex: 1; flex-direction: column; overflow: hidden; min-height: 0;
    }
    .char-frame.active { display: flex; }

    /* Just-unlocked animation for profile-hero-badge */
    .profile-hero-placeholder {
      background: linear-gradient(135deg, #0369a1 0%, #2563eb 100%);
      position: relative;
    }
    .profile-hero-placeholder .profile-hero-initial {
      position: absolute; inset: 0;
      display: flex; align-items: center; justify-content: center;
      font-size: 96px; font-weight: 700; color: white;
      letter-spacing: -0.05em; line-height: 1; user-select: none;
      text-shadow: 0 2px 8px rgba(0,0,0,0.15);
    }
    .profile-hero-badge.just-unlocked { animation: pulse 1.4s ease-in-out 3; }
    @keyframes pulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.08); }
    }

    /* Unlock notification toast */
    .unlock-toast {
      position: fixed; top: 60px; right: 20px; z-index: 200;
      background: white; border: 1px solid var(--line);
      border-left: 4px solid var(--green);
      border-radius: 8px; padding: 12px 16px;
      box-shadow: 0 6px 20px rgba(15,23,42,0.12);
      max-width: 320px; font-size: 13px;
      transform: translateX(400px); opacity: 0;
      transition: transform 0.4s cubic-bezier(.2,.8,.2,1), opacity 0.4s;
    }
    .unlock-toast.show { transform: translateX(0); opacity: 1; }
    .unlock-toast .toast-title {
      font-weight: 700; color: var(--green);
      margin-bottom: 4px; display: flex; align-items: center; gap: 6px;
    }
    .unlock-toast .toast-body {
      color: var(--ink); font-size: 12px; line-height: 1.6;
    }
    .unlock-toast .toast-action {
      margin-top: 8px; font-size: 11px;
      background: var(--ink); color: white; border: none;
      padding: 6px 12px; border-radius: 4px; cursor: pointer;
    }

    /* F023: ヒアリング動線ガイダンス(次のキャラ誘導 + レビュー前警告) */
    .hearing-nudge {
      background: linear-gradient(90deg, #eff6ff, #f0fdf4);
      border: 1px solid var(--line);
      border-left: 3px solid var(--blue);
      padding: 8px 12px; font-size: 11px;
      color: var(--ink); border-radius: 4px;
      margin: 6px 10px 0; display: none;
      line-height: 1.5;
    }
    .hearing-nudge.show { display: block; }
    .hearing-nudge .hn-cta {
      background: transparent; border: 1px solid var(--blue);
      color: var(--blue); padding: 2px 8px; border-radius: 3px;
      font-size: 10px; cursor: pointer; margin-left: 6px;
      font-family: inherit;
    }
    .hearing-nudge .hn-cta:hover { background: var(--blue); color: white; }
    .pre-review-modal {
      display: none;
      position: fixed; inset: 0; z-index: 300;
      background: rgba(15, 23, 42, 0.5);
      align-items: center; justify-content: center;
      padding: 20px;
    }
    .pre-review-modal.show { display: flex; }
    .pre-review-modal-box {
      background: white; border-radius: 10px;
      padding: 22px 24px; max-width: 420px;
      box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
    }
    .pre-review-modal-title {
      font-weight: 700; font-size: 15px; margin-bottom: 10px;
      color: var(--ink); display: flex; align-items: center; gap: 6px;
    }
    .pre-review-modal-body {
      font-size: 12px; color: var(--muted); line-height: 1.7;
      margin-bottom: 16px;
    }
    .pre-review-modal-body strong { color: var(--ink); }
    .pre-review-modal-actions {
      display: flex; gap: 8px; justify-content: flex-end;
    }
    .pre-review-modal-actions .btn {
      padding: 8px 14px; border-radius: 5px; font-size: 12px;
      cursor: pointer; border: none; font-weight: 500;
      font-family: inherit;
    }
    .pre-review-modal-actions .btn.primary {
      background: var(--blue); color: white;
    }
    .pre-review-modal-actions .btn.secondary {
      background: transparent; color: var(--muted); border: 1px solid var(--line-dark);
    }

        .panel-intro {
      padding: 14px 16px; background: var(--blue-bg);
      border-bottom: 1px solid var(--line);
    }
    .panel-intro-title {
      font-size: 13px; font-weight: 700; color: var(--ink);
      margin-bottom: 6px;
    }
    .panel-intro-body {
      font-size: 12px; color: var(--muted); line-height: 1.6;
    }
    .panel-intro-body .step-num {
      display: inline-block; width: 18px; height: 18px;
      background: var(--blue); color: white;
      border-radius: 50%; text-align: center; line-height: 18px;
      font-size: 10px; font-weight: 700; margin-right: 4px;
      vertical-align: middle;
    }
    /* panel-intro 折りたたみ(PC・モバイル共通、既定で閉じてチャット欄を最大化) */
    .panel-intro.collapsible {
      cursor: pointer;
      padding: 8px 14px;
      user-select: none;
    }
    .panel-intro.collapsible .panel-intro-body { display: none; }
    .panel-intro.collapsible.expanded .panel-intro-body { display: block; margin-top: 6px; }
    .panel-intro.collapsible .panel-intro-title {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 0;
    }
    .panel-intro.collapsible .panel-intro-title::after {
      content: '▾';
      color: var(--muted);
      font-size: 11px;
      transition: transform 0.2s;
      margin-left: 8px;
    }
    .panel-intro.collapsible.expanded .panel-intro-title::after { transform: rotate(180deg); }
    .panel-context {
      display: flex; align-items: center;
      padding: 8px 14px; background: var(--bg-sidebar);
      font-size: 11px; color: var(--muted);
      border-bottom: 1px solid var(--line);
    }
    .panel-context strong { color: var(--ink); }
    .panel-preview {
      padding: 10px 14px; background: var(--bg);
      border-bottom: 1px solid var(--line);
      max-height: 120px; overflow-y: auto;
    }
    .panel-preview-label {
      font-size: 10px; color: var(--muted); letter-spacing: 0.05em;
      margin-bottom: 4px;
    }
    .panel-preview-content {
      font-family: "JetBrains Mono", monospace;
      font-size: 10px; color: var(--ink); white-space: pre-wrap;
      margin: 0; line-height: 1.5;
    }
    .panel-empty-state {
      padding: 40px 24px; text-align: center; flex: 1;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
    }
    .panel-empty-state .empty-icon { font-size: 48px; margin-bottom: 12px; }
    .panel-empty-state .empty-title {
      font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 14px;
    }
    .panel-empty-state .empty-body {
      font-size: 13px; color: var(--muted); line-height: 1.7; margin-bottom: 20px;
    }
    .panel-empty-state .empty-note {
      font-size: 11px; color: var(--subtle); margin-top: 16px;
      line-height: 1.6;
    }
    .panel-active-state { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
    .panel-iframe {
      flex: 1; border: none; width: 100%; background: white;
    }
    .panel-memo { flex: 1; overflow-y: auto; padding: 16px; }
    .panel-memo h4 {
      font-size: 12px; font-weight: 700; letter-spacing: 0.1em;
      color: var(--muted); text-transform: uppercase; margin: 14px 0 6px;
    }
    .panel-memo h4:first-child { margin-top: 0; }
    .panel-memo textarea {
      width: 100%; border: 1px solid var(--line); border-radius: 4px;
      padding: 8px; font-family: inherit; font-size: 12px; line-height: 1.6;
      resize: vertical; min-height: 70px;
    }
    .panel-memo textarea:focus { outline: none; border-color: var(--accent); }
    .panel-memo .hint { font-size: 10px; color: var(--subtle); margin-top: 2px; }
    .panel-memo .actions {
      margin-top: 14px; display: flex; gap: 8px; flex-wrap: wrap;
    }
    .panel-memo .actions .btn {
      background: var(--ink); color: white; border: none;
      padding: 8px 14px; border-radius: 4px; font-size: 12px;
      cursor: pointer;
    }
    .panel-memo .actions .btn:hover { background: var(--accent-hover); }
    .panel-memo .actions .btn.secondary {
      background: transparent; color: var(--ink); border: 1px solid var(--line-dark);
    }
    .panel-memo .save-status {
      font-size: 10px; color: var(--green); margin-top: 6px;
    }

    /* メモ成熟度メーター */
    .memo-maturity {
      background: linear-gradient(90deg, #fef7e0, #eff6ff);
      border: 1px solid var(--line);
      border-radius: 6px;
      padding: 10px 12px;
      margin-bottom: 14px;
      display: flex; align-items: center; gap: 12px;
      font-size: 11px; position: relative;
    }
    .memo-maturity-label { font-weight: 700; color: var(--ink); flex-shrink: 0; }
    .memo-maturity-rank {
      background: white; border: 1px solid var(--line);
      padding: 2px 8px; border-radius: 10px;
      font-weight: 700; font-size: 11px;
      color: var(--muted); flex-shrink: 0;
    }
    .memo-maturity-rank.level-0 { color: var(--muted); }
    .memo-maturity-rank.level-1 { color: var(--blue); border-color: var(--blue); }
    .memo-maturity-rank.level-2 { color: var(--green); border-color: var(--green); }
    .memo-maturity-bar {
      flex: 1; height: 6px; background: var(--line);
      border-radius: 3px; overflow: hidden; min-width: 60px;
    }
    .memo-maturity-bar-fill {
      height: 100%; background: linear-gradient(90deg, var(--blue), var(--green));
      transition: width 0.4s ease; width: 0%;
    }
    .memo-maturity-info {
      width: 20px; height: 20px; border-radius: 50%;
      background: white; border: 1px solid var(--line-dark);
      display: flex; align-items: center; justify-content: center;
      font-size: 11px; color: var(--muted); cursor: pointer; flex-shrink: 0;
    }
    .memo-maturity-info:hover { background: var(--bg-sidebar); }
    .memo-maturity-detail {
      display: none; position: absolute;
      top: 100%; left: 0; right: 0; margin-top: 6px;
      background: white; border: 1px solid var(--line-dark);
      border-radius: 6px; padding: 12px;
      box-shadow: 0 6px 18px rgba(15,23,42,0.1);
      font-size: 11px; line-height: 1.7; z-index: 10;
    }
    .memo-maturity.show-detail .memo-maturity-detail { display: block; }
    .memo-maturity-detail .mmd-axis {
      display: flex; justify-content: space-between;
      padding: 3px 0; border-bottom: 1px solid var(--line);
    }
    .memo-maturity-detail .mmd-axis:last-child { border-bottom: none; }
    .memo-maturity-detail .mmd-axis-name { color: var(--ink); }
    .memo-maturity-detail .mmd-axis-status { color: var(--muted); font-weight: 700; }
    .memo-maturity-detail .mmd-axis-status.ok { color: var(--green); }
    .memo-maturity-detail .mmd-axis-status.warn { color: #ca8a04; }
    .memo-maturity-detail .mmd-tip {
      margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line);
      color: var(--muted); font-size: 10px;
    }

    /* 実戦モードでは想起ツール(教師の用意したヒント)を完全非表示
       自分で考える訓練を機能させる。ガイド付きモードに切替えで表示。 */
    body.mode-normal .recall-tools { display: none; }

    /* 実戦モードでは「答え」表示要素を全て非表示:
       - メモ成熟度バー(セルフチェック誘導) — 採点と無関係なので
       - 証拠 ID 凡例(EV-A〜L 一覧 = 解答キー)
       - EV カード内の「着目点 / 解説」ブロック(.ev-focus-point) */
    body.mode-normal .memo-maturity { display: none; }
    body.mode-normal .nav-item[data-stage="evlegend"] { display: none; }
    body.mode-normal #s-evlegend { display: none; }
    body.mode-normal .ev-focus-point { display: none; }

    /* Post-hearing reveal: 特定キャラから Layer 2 級証言を引き出すと
       資料タブ側に新カードが動的に出現する仕組み。
       - 初期状態: 非表示
       - body に revealed-XXX クラスが付与されたら表示 */
    .post-hearing-locked { display: none; }
    body.revealed-suzuki-discrepancy .post-hearing-locked.requires-suzuki-discrepancy { display: block; }
    /* ADR-002 Day 5: 経理開示資料(田村経理 = takai がヒアリングで開示) */
    body.revealed-takai-monthly-pl .post-hearing-locked.requires-takai-monthly-pl { display: block; }
    body.revealed-takai-ar-aging .post-hearing-locked.requires-takai-ar-aging { display: block; }
    body.revealed-takai-inventory-aging .post-hearing-locked.requires-takai-inventory-aging { display: block; }

    /* ===== 記載例 peek ボタン =====
       メモ各セクションの h4 横に表示される「📋 記載例を見る」ボタン。
       入力で placeholder が消えても、いつでも記載例を確認できる。
       JS が auto-inject するので HTML 改修不要。 */
    .placeholder-peek-btn {
      display: inline-block; margin-left: 8px;
      font-size: 11px; font-weight: 400; color: var(--blue);
      background: rgba(37,99,235,0.06); border: 1px solid rgba(37,99,235,0.18);
      padding: 2px 8px; border-radius: 12px;
      cursor: pointer; user-select: none;
      transition: background 0.15s, border-color 0.15s;
    }
    .placeholder-peek-btn:hover { background: rgba(37,99,235,0.14); border-color: rgba(37,99,235,0.32); }

    /* Post-hearing reveal トースト(目立たせる版)
       - 自動消失せず、ユーザーが明示的に閉じるまで表示
       - 赤系ボーダー + パルスアニメーションで視認性を最大化 */
    .post-hearing-toast {
      max-width: 380px !important;
      border-left: 5px solid #b91c1c !important;
      box-shadow: 0 10px 40px rgba(185,28,28,0.25) !important;
      transform: translateX(0) !important;
      opacity: 1 !important;
    }
    .post-hearing-toast-prominent {
      animation: post-hearing-pulse 2.4s ease-in-out infinite;
    }
    @keyframes post-hearing-pulse {
      0%, 100% { box-shadow: 0 10px 40px rgba(185,28,28,0.25); }
      50% { box-shadow: 0 10px 40px rgba(185,28,28,0.55), 0 0 0 4px rgba(185,28,28,0.18); }
    }
    .toast-action-primary {
      background: #b91c1c !important; color: white !important;
      border: none !important; padding: 7px 14px !important;
      font-size: 12px !important; font-weight: 600 !important;
      border-radius: 5px !important; cursor: pointer !important;
    }
    .toast-action-primary:hover { background: #991b1b !important; }
    .toast-action-close {
      background: transparent !important; color: var(--muted) !important;
      border: 1px solid var(--line-dark) !important; padding: 6px 12px !important;
      font-size: 11px !important; border-radius: 5px !important; cursor: pointer !important;
    }

    /* サイドバー nav-item に「新着」ドットバッジ(post-hearing reveal 通知用) */
    .nav-item.has-new-badge {
      position: relative;
      background: rgba(185,28,28,0.06);
    }
    .nav-item.has-new-badge::after {
      content: 'NEW';
      position: absolute; top: 50%; right: 10px; transform: translateY(-50%);
      background: #b91c1c; color: white; font-size: 9px; font-weight: 700;
      padding: 2px 6px; border-radius: 3px; letter-spacing: 0.4px;
      animation: nav-new-blink 1.6s ease-in-out infinite;
    }
    @keyframes nav-new-blink {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.55; }
    }

    /* CASE リセットボタン(topbar 右側、危険操作なので赤系に) */
    .case-reset-btn {
      background: #fef2f2 !important;
      border: 1px solid #fca5a5 !important;
      color: #b91c1c !important;
      font-size: 11px !important;
      padding: 4px 10px !important;
    }
    .case-reset-btn:hover {
      background: #fee2e2 !important;
      border-color: #f87171 !important;
    }

    /* peek モーダル(右パネル内に重ねて表示、ドラッグで移動可) */
    .placeholder-peek-modal {
      position: fixed; top: 80px; right: 24px;
      width: min(480px, 90vw); max-height: 70vh; overflow: auto;
      background: white; border: 1px solid var(--line-dark);
      border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.18);
      z-index: 200; padding: 14px 16px 18px;
    }
    .placeholder-peek-modal-head {
      display: flex; align-items: center; justify-content: space-between;
      gap: 8px; margin-bottom: 10px; padding-bottom: 8px;
      border-bottom: 1px solid var(--line); cursor: move; user-select: none;
    }
    .placeholder-peek-modal-title { font-weight: 700; font-size: 13px; color: var(--ink); }
    .placeholder-peek-modal-close {
      background: none; border: none; cursor: pointer; font-size: 18px;
      color: var(--muted); padding: 0 4px;
    }
    .placeholder-peek-modal-close:hover { color: var(--ink); }
    .placeholder-peek-modal-body {
      font-size: 12px; line-height: 1.7; color: var(--ink);
      white-space: pre-wrap; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
      background: #f8fafc; padding: 10px 12px; border-radius: 6px;
    }

    /* 想起ツール chip パネル */
    .recall-tools {
      margin-top: 6px; margin-bottom: 8px;
      background: var(--bg-sidebar);
      border: 1px solid var(--line);
      border-radius: 6px; padding: 10px 12px;
    }
    .recall-tools-header {
      display: flex; align-items: center; justify-content: space-between;
      font-size: 11px; color: var(--muted);
      cursor: pointer; user-select: none; margin-bottom: 8px;
    }
    .recall-tools-header strong { color: var(--ink); font-weight: 700; }
    .recall-tools-header .rt-toggle::after {
      content: '▾'; margin-left: 4px; font-size: 10px;
      transition: transform 0.2s; display: inline-block;
    }
    .recall-tools.collapsed .rt-toggle::after { transform: rotate(-90deg); }
    .recall-tools.collapsed .recall-tools-body { display: none; }
    .recall-tools-note { font-size: 10px; color: var(--subtle); margin-bottom: 6px; }
    /* chip タブ(論点 / リスク / リスク要因 切替) */
    .chip-tabs {
      display: flex; gap: 2px;
      border-bottom: 1px solid var(--line);
      margin-bottom: 8px;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }
    .chip-tabs::-webkit-scrollbar { display: none; }
    .chip-tab {
      background: transparent; border: none;
      padding: 6px 10px;
      font-size: 10px; color: var(--muted);
      cursor: pointer; flex-shrink: 0;
      border-bottom: 2px solid transparent;
      margin-bottom: -1px;
      transition: color 0.12s, border-color 0.12s;
      font-family: inherit;
    }
    .chip-tab:hover { color: var(--ink); }
    .chip-tab.active {
      color: var(--ink); border-bottom-color: var(--ink);
      font-weight: 700;
    }
    .chip-panel { display: none; }
    .chip-panel.active { display: block; }
    .chip-group { margin-bottom: 8px; }
    .chip-group:last-child { margin-bottom: 0; }
    .chip-group-title {
      font-size: 10px; font-weight: 700; color: var(--muted);
      margin-bottom: 4px; display: flex; align-items: center; gap: 4px;
    }
    .chip-group-title .cg-note { font-weight: 400; color: var(--subtle); font-size: 9px; }
    .chip-row { display: flex; flex-wrap: wrap; gap: 4px; }
    .chip {
      display: inline-block;
      background: white; border: 1px solid var(--line);
      color: var(--ink); font-size: 11px;
      padding: 3px 9px; border-radius: 11px;
      cursor: pointer; transition: all 0.12s; user-select: none;
    }
    .chip:hover {
      background: var(--red-bg); border-color: var(--red); color: var(--red);
    }
    .chip:active { transform: scale(0.96); }
    .chip.used {
      background: var(--green-bg); border-color: var(--green); color: var(--green);
    }
    .chip.used::before { content: '✓ '; font-weight: 700; }

    @media (max-width: 900px) {
      .memo-maturity { padding: 8px 10px; gap: 8px; font-size: 10px; }
      .memo-maturity-rank { font-size: 10px; padding: 1px 6px; }
      .recall-tools { padding: 8px 10px; }
      .chip-row {
        flex-wrap: nowrap; overflow-x: auto;
        -webkit-overflow-scrolling: touch; scrollbar-width: none;
        padding-bottom: 2px;
      }
      .chip-row::-webkit-scrollbar { display: none; }
      .chip { flex-shrink: 0; padding: 4px 10px; font-size: 11px; }
      .recall-tools.collapsed .recall-tools-body { display: none; }
    }

    /* Typography */
    h1 { font-size: 24px; font-weight: 700; margin: 0 0 6px; letter-spacing: -0.01em; }
    h2 {
      font-size: 12px; font-weight: 700; letter-spacing: 0.15em;
      color: var(--muted); text-transform: uppercase; margin: 28px 0 10px;
      padding-bottom: 6px; border-bottom: 1px solid var(--line);
    }
    h3 { font-size: 15px; font-weight: 700; margin: 18px 0 6px; }
    p { margin: 0 0 10px; font-size: 14px; }
    .subtitle { color: var(--muted); font-size: 14px; margin: 0 0 20px; }

    /* Stats cards */
    .stats-row {
      display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: 12px; margin: 18px 0;
    }
    .stat-card {
      background: var(--bg-panel); border: 1px solid var(--line);
      border-radius: 8px; padding: 16px;
    }
    .stat-card.accent { border-color: var(--red); background: var(--red-bg); }
    .stat-card .label {
      font-size: 12px; color: var(--muted);
      margin-bottom: 6px; font-weight: 500;
      letter-spacing: 0;
    }
    .stat-card .value {
      font-family: "JetBrains Mono", monospace;
      font-size: 24px; font-weight: 700; color: var(--ink);
      line-height: 1.15;
    }
    .stat-card.accent .value { color: var(--red); }
    .stat-card .unit { font-size: 13px; color: var(--muted); margin-left: 3px; font-weight: 500; }
    .stat-card .note { font-size: 11px; color: var(--muted); margin-top: 6px; line-height: 1.5; }
    .stat-card .note strong { color: var(--ink); }

    /* Badges */
    .ev-badge {
      display: inline-block; font-family: "JetBrains Mono", monospace;
      font-size: 10px; font-weight: 700; letter-spacing: 0.05em;
      background: var(--ink); color: white; padding: 2px 6px;
      border-radius: 3px; margin-right: 6px; vertical-align: middle;
    }
    .ev-badge.a { background: #be123c; }
    .ev-badge.b { background: #c2410c; }
    .ev-badge.c { background: #7c2d12; }
    .ev-badge.d { background: #0369a1; }

    /* Accordion cards */
    .ev-card {
      background: var(--bg-panel); border: 1px solid var(--line);
      border-radius: 8px; margin: 10px 0; overflow: hidden;
    }
    .ev-card .head {
      padding: 14px 18px; cursor: pointer; display: flex;
      align-items: center; gap: 10px; user-select: none;
    }
    .ev-card .head:hover { background: var(--bg); }
    .ev-card .head .title { flex: 1; font-weight: 500; font-size: 13px; }
    .ev-card .head .chevron {
      color: var(--subtle); font-size: 11px; transition: transform 0.2s;
    }
    .ev-card.open .head .chevron { transform: rotate(90deg); }
    .ev-card .body {
      max-height: 0; overflow: hidden;
      transition: max-height 0.3s ease, padding 0.3s ease;
      padding: 0 18px; font-size: 13px;
    }
    .ev-card.open .body {
      max-height: 600px; padding: 14px 18px;
      border-top: 1px solid var(--line);
    }
    .ev-card .meta { display: flex; gap: 12px; font-size: 11px; color: var(--muted); margin-bottom: 8px; }

    /* Tables */
    table {
      width: 100%; border-collapse: collapse; background: white;
      font-size: 12px; border: 1px solid var(--line); border-radius: 6px;
      overflow: hidden; margin: 12px 0;
    }
    th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); }
    th { background: #f1f5f9; font-size: 10px; letter-spacing: 0.05em; color: var(--muted); font-weight: 500; }
    tr:last-child td { border-bottom: 0; }
    td.num, th.num { font-family: "JetBrains Mono", monospace; text-align: right; font-size: 11px; }
    tr.highlight { background: var(--red-bg); }
    tr.highlight td { color: var(--red); font-weight: 500; }

    /* Timeline bars */
    .timeline-header {
      display: grid; grid-template-columns: 54px 1fr 80px;
      gap: 8px; margin: 8px 0 4px; font-size: 10px; color: var(--muted);
      letter-spacing: 0.05em; padding-bottom: 4px;
      border-bottom: 1px solid var(--line); font-weight: 500;
    }
    .timeline-row {
      display: grid; grid-template-columns: 54px 1fr 80px;
      gap: 8px; margin: 4px 0; align-items: center; font-size: 11px;
    }
    .timeline-row .month { color: var(--muted); font-family: "JetBrains Mono", monospace; }
    .timeline-row .bar-wrap { background: var(--line); border-radius: 3px; height: 12px; overflow: hidden; }
    .timeline-row .bar {
      height: 100%; background: linear-gradient(90deg, var(--blue), var(--accent));
      transition: width 1.2s cubic-bezier(.2,.8,.2,1); width: 0;
      border-radius: 3px;
    }
    /* peak/dip の赤字色は EV-B 取得後にだけ表示する。取得前は通常色のままで、
       学習者がクリックして証拠取得することで初めて赤字化(=ヒント無しの発見体験)。 */
    .timeline-row .bar.peak { background: linear-gradient(90deg, var(--blue), var(--accent)); }
    .timeline-row.timeline-peak.ev-found .bar.peak { background: linear-gradient(90deg, #f59e0b, var(--red)); }
    .timeline-row .amount {
      font-family: "JetBrains Mono", monospace; text-align: right; color: var(--muted);
      font-size: 10px;
    }
    .timeline-row .amount.peak { color: var(--muted); font-weight: 500; }
    .timeline-row.timeline-peak.ev-found .amount.peak { color: var(--red); }
    /* peak 行はクリック可能を示すホバー演出(取得前のみ) */
    .timeline-row.timeline-peak:not(.ev-found) { cursor: pointer; transition: background 0.15s; }
    .timeline-row.timeline-peak:not(.ev-found):hover { background: var(--bg); }
    .timeline-row.timeline-peak:not(.ev-found):hover .amount { color: var(--ink); }

    /* F-11: 検証ビュー(supplemental_view)= 計画前提 vs 実態 のマトリクス(下段の冗長な棒を置換) */
    .sv-intro { font-size: 13px; color: var(--muted); line-height: 1.6; margin: 4px 0 12px; }
    .sv-matrix { display: flex; flex-direction: column; gap: 8px; }
    .sv-row {
      display: grid; grid-template-columns: minmax(140px, 1fr) 1.5fr auto; gap: 12px;
      align-items: center; padding: 10px 12px;
      border: 1px solid var(--line); border-radius: 8px; background: white;
    }
    .sv-assumption { font-weight: 600; font-size: 13px; color: var(--ink); }
    .sv-reality { font-size: 13px; line-height: 1.5; }
    .sv-reality-found { display: none; color: var(--red); }
    .sv-row.ev-found .sv-reality-found { display: inline; }
    .sv-row.ev-found .sv-reality-locked { display: none; }
    .sv-reality-locked { color: var(--muted); }
    .sv-ev-badge {
      font-family: "JetBrains Mono", monospace; font-size: 11px; font-weight: 600;
      padding: 2px 7px; border-radius: 4px; background: var(--line); color: var(--muted);
    }
    .sv-row.ev-found .sv-ev-badge { background: var(--red); color: white; }
    /* 資料系 EV(未取得)はクリック可能を示すホバー */
    .sv-row[data-ev-trigger]:not(.ev-found) { cursor: pointer; transition: background 0.15s; }
    .sv-row[data-ev-trigger]:not(.ev-found):hover { background: var(--bg); }

    .chart-wrap {
      background: white; border: 1px solid var(--line); border-radius: 8px;
      padding: 16px; margin: 12px 0;
      height: 380px;
    }
    .chart-wrap canvas { width: 100% !important; height: 100% !important; max-height: none; }

    /* Chart legend / explanation box above chart */
    .chart-legend {
      background: #f8fafc; border: 1px solid var(--line); border-left: 3px solid var(--blue);
      border-radius: 0 6px 6px 0; padding: 10px 14px; margin: 8px 0 10px;
      font-size: 12px;
    }
    .chart-legend-row {
      display: grid; grid-template-columns: 90px 1fr; gap: 8px;
      align-items: start; padding: 3px 0; line-height: 1.6;
    }
    .chart-legend-key {
      font-size: 11px; color: var(--muted); font-weight: 500;
      white-space: nowrap;
    }

    /* Flag (orientation banners, always visible) */
    .flag {
      background: var(--warn-bg); border-left: 3px solid #f59e0b;
      padding: 10px 14px; font-size: 12px; color: var(--warn-ink);
      margin: 14px 0; border-radius: 0 6px 6px 0;
    }
    .flag strong { color: var(--red); }

    /* Think card (progressive disclosure — "answer" is hidden until clicked) */
    .think-card {
      background: #fefce8; border: 1px solid #fde68a;
      border-left: 4px solid #f59e0b;
      padding: 14px 18px; margin: 14px 0;
      border-radius: 0 8px 8px 0;
      cursor: pointer; transition: background 0.15s, box-shadow 0.15s;
      user-select: none;
    }
    .think-card:hover {
      background: #fef7e0;
      box-shadow: 0 2px 6px rgba(245,158,11,0.12);
    }
    .think-card .think-prompt {
      font-size: 13px; font-weight: 700; color: #92400e;
      display: flex; align-items: center; gap: 8px;
    }
    .think-card .think-prompt::before {
      content: '💭'; font-size: 16px;
    }
    .think-card .think-question {
      font-size: 13px; color: var(--warn-ink);
      margin: 6px 0 2px; line-height: 1.6;
    }
    .think-card .think-hint {
      font-size: 11px; color: #b45309; font-style: italic;
      display: flex; align-items: center; gap: 4px; margin-top: 4px;
    }
    .think-card .think-reveal {
      display: none; margin-top: 12px; padding-top: 12px;
      border-top: 1px dashed #fbbf24;
      color: var(--ink); font-size: 13px; line-height: 1.7;
      animation: revealFade 0.4s ease;
    }
    .think-card .think-reveal strong { color: var(--red); font-weight: 700; }
    @keyframes revealFade {
      from { opacity: 0; transform: translateY(-4px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .think-card.revealed {
      cursor: default;
    }
    .think-card.revealed .think-prompt::before { content: '💡'; }
    .think-card.revealed .think-prompt-text::after { content: '(解説)'; color: var(--muted); font-weight: 400; margin-left: 4px; font-size: 11px; }
    .think-card.revealed .think-hint { display: none; }
    .think-card.revealed .think-reveal { display: block; }

    /* Flow diagram (briefing) */
    .flow-diagram {
      display: flex; align-items: stretch; gap: 4px; margin: 16px 0 10px;
      flex-wrap: wrap;
    }
    .flow-step {
      flex: 1; min-width: 150px;
      background: white; border: 1px solid var(--line); border-radius: 8px;
      padding: 12px 14px; display: flex; gap: 10px; align-items: flex-start;
    }
    .flow-step-num {
      width: 22px; height: 22px; border-radius: 50%;
      background: var(--ink); color: white;
      font-size: 11px; font-weight: 700;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0; margin-top: 1px;
    }
    .flow-step-title { font-size: 12px; font-weight: 700; margin-bottom: 2px; }
    .flow-step-sub { font-size: 10px; color: var(--muted); line-height: 1.5; }
    .flow-arrow {
      display: flex; align-items: center; color: var(--subtle);
      font-size: 14px;
    }
    @media (max-width: 900px) {
      .flow-diagram { flex-direction: column; }
      .flow-arrow { transform: rotate(90deg); align-self: center; }
    }

    /* Profile card (hero-image style for immersion) */
    .profile-card {
      background: white; border: 1px solid var(--line); border-radius: 12px;
      overflow: hidden; margin: 14px 0;
      transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
    }
    .profile-card:hover {
      border-color: var(--line-dark);
      box-shadow: 0 4px 16px rgba(15,23,42,0.06);
    }
    .profile-hero {
      width: 100%; height: 340px;
      background-size: cover; background-position: center 25%;
      background-color: var(--bg-sidebar);
      border-bottom: 1px solid var(--line);
      position: relative;
    }
    @media (max-width: 700px) {
      .profile-hero { height: 240px; }
    }
    .profile-hero-badge {
      position: absolute; top: 12px; right: 12px;
      background: rgba(15,23,42,0.88); color: white;
      padding: 4px 10px; border-radius: 16px;
      font-size: 11px; font-weight: 500;
      backdrop-filter: blur(4px);
    }
    .profile-body {
      padding: 18px 22px;
    }
    .profile-card .name { font-size: 17px; font-weight: 700; margin: 0; }
    .profile-card .role { font-size: 12px; color: var(--muted); margin: 3px 0 10px; }
    .profile-card .bio { font-size: 13px; color: var(--ink); margin: 8px 0 12px; line-height: 1.75; }
    .profile-card .tag {
      display: inline-block; background: var(--blue-bg); color: var(--blue);
      padding: 3px 9px; border-radius: 4px; font-size: 11px; margin-right: 4px;
    }
    .profile-card .tag.locked { background: #f1f5f9; color: var(--subtle); }
    /* Featured 2-column grid for protagonist + reviewer(CASE 06 から backport) */
    .profile-grid-featured {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin: 14px 0;
    }
    .profile-grid-featured .profile-card { margin: 0; display: flex; flex-direction: column; }
    .profile-grid-featured .profile-hero { height: 260px; }
    .profile-grid-featured .profile-body { flex: 1; display: flex; flex-direction: column; }
    .profile-grid-featured .profile-card .cta { margin-top: auto; }
    @media (max-width: 700px) {
      .profile-grid-featured { grid-template-columns: 1fr; }
      .profile-grid-featured .profile-hero { height: 200px; }
    }

    /* Compact grid layout for multiple character cards(CASE 06 から backport) */
    .profile-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      gap: 14px;
      margin: 14px 0;
    }
    .profile-grid .profile-card { margin: 0; display: flex; flex-direction: column; }
    .profile-grid .profile-hero { height: 200px; }
    .profile-grid .profile-body { padding: 14px 16px; flex: 1; display: flex; flex-direction: column; }
    .profile-grid .profile-card .bio { font-size: 12px; line-height: 1.65; }
    .profile-grid .profile-card .role { font-size: 11px; }
    .profile-grid .profile-card .tag { font-size: 10px; padding: 2px 7px; }
    .profile-grid .profile-card .cta { margin-top: auto; }
    @media (max-width: 700px) {
      .profile-grid .profile-hero { height: 180px; }
    }


    /* Reveal */
    .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.5s, transform 0.5s; }
    .reveal.in-view { opacity: 1; transform: translateY(0); }

    /* Buttons */
    .cta {
      display: inline-flex; align-items: center; gap: 6px;
      background: var(--accent); color: white; text-decoration: none;
      font-weight: 500; padding: 10px 18px; border-radius: 5px;
      transition: background 0.15s; font-size: 13px; border: none; cursor: pointer;
    }
    .cta:hover { background: var(--accent-hover); }
    .cta.secondary { background: transparent; color: var(--ink); border: 1px solid var(--line-dark); }
    .cta.secondary:hover { background: white; border-color: var(--ink); }
    .cta.accent { background: var(--blue); }
    .cta.accent:hover { background: #075985; }

    /* Note */
    .note {
      background: var(--warn-bg); border: 1px solid var(--warn-border);
      border-radius: 6px; padding: 12px 14px; font-size: 11px;
      color: var(--warn-ink); margin: 20px 0;
    }

    /* デフォルト(デスクトップ)ではモバイル専用要素を非表示
       ※ モバイル media query より前に置かないと、@media 内の display:flex が
       後出しの display:none に上書きされてしまう(以前そのバグがあった) */
    .mobile-panel-header { display: none; }
    .mobile-fab { display: none; }
    .hamburger-btn { display: none; }
    .sidebar-backdrop { display: none; }

    /* Mobile */
    @media (max-width: 900px) {
      html, body { overflow: auto; height: auto; }
      .workspace,
      .workspace.panel-closed {
        grid-template-columns: 1fr; height: auto;
      }
/* F022: モバイル版サイドバーをハンバーガー式に。main 全幅確保 */
      .sidebar {
        position: fixed; top: 0; left: 0; bottom: 0; width: 280px;
        z-index: 150;
        background: white;
        border-right: 1px solid var(--line);
        border-bottom: none;
        padding: 14px 8px 20px;
        transform: translateX(-100%);
        transition: transform 0.28s cubic-bezier(.2,.8,.2,1);
        overflow-y: auto; overflow-x: hidden;
        height: 100dvh;
      }
      .sidebar.mobile-open { transform: translateX(0); box-shadow: 0 0 20px rgba(15,23,42,0.2); }
      .sidebar .section-title { display: block; font-size: 10px; }

      /* ハンバーガーボタン(topbar 内) */
      .hamburger-btn {
        display: flex; align-items: center; justify-content: center;
        width: 36px; height: 36px;
        background: transparent; border: 1px solid var(--line-dark);
        border-radius: 5px; cursor: pointer;
        font-size: 18px; padding: 0;
        order: -1;  /* topbar の先頭に配置 */
      }
      .hamburger-btn:active { background: var(--bg-sidebar); }

      /* サイドバーバックドロップ */
      .sidebar-backdrop {
        display: none;
        position: fixed; inset: 0; z-index: 140;
        background: rgba(15, 23, 42, 0.4);
      }
      .sidebar-backdrop.show { display: block; }
      .sidebar .section { margin-bottom: 12px; padding: 0; }
      .main { padding: 20px 16px 100px; }  /* FAB分の余白 */
      .topbar .progress-wrap { display: none; }  /* モバイルで邪魔なので非表示 */
      .topbar { flex-wrap: wrap; gap: 8px; height: auto; padding: 8px; }

      /* === モバイル: 右パネルを全画面モードに(ChatGPT パターン) === */
      .right-panel {
        position: fixed; inset: 0;
        height: 100dvh;  /* iOS Safari 動的ビューポート対応 */
        border: none;
        box-shadow: none;
        transform: translateX(100%);
        transition: transform 0.28s cubic-bezier(.2,.8,.2,1);
        z-index: 200;
        background: white;
        padding-bottom: env(safe-area-inset-bottom);
      }
      .right-panel.mobile-open { transform: translateX(0); }
      .workspace.panel-closed .right-panel { display: flex; transform: translateX(100%); }

      /* モバイル専用 Sticky ヘッダー(Character.AI パターン) */
      .mobile-panel-header {
        display: flex !important;
        align-items: center; gap: 10px;
        padding: 10px 14px;
        background: white;
        border-bottom: 1px solid var(--line);
        position: sticky; top: 0; z-index: 10;
      }
      .mobile-panel-header .mph-back {
        width: 36px; height: 36px; border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        font-size: 18px; background: var(--bg-sidebar);
        border: none; cursor: pointer; flex-shrink: 0;
      }
      .mobile-panel-header .mph-title {
        flex: 1; font-size: 14px; font-weight: 700; color: var(--ink);
      }
      .mobile-panel-header .mph-sub {
        font-size: 11px; color: var(--muted);
      }

      /* モバイルで persona card を 1 行にコンパクト化 */
      .persona-card {
        padding: 6px 12px;
      }
      .persona-card .persona-label { display: none; }
      .persona-card .persona-avatar {
        width: 32px; height: 32px;
      }
      .persona-card .persona-name { font-size: 11px; }
      .persona-card .persona-role { font-size: 9px; }

      /* キャラタブは横スクロール + コンパクト */
      .character-switcher {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
      }
      .character-switcher::-webkit-scrollbar { display: none; }
      .char-tab {
        flex: 0 0 33%;
        min-width: 100px;
        padding: 6px 4px 8px;
      }
      .char-tab .char-avatar {
        width: 40px; height: 40px;
      }
      .char-tab .char-name { font-size: 11px; }
      .char-tab .char-role { font-size: 9px; }

      /* モバイルでパネル intro をコンパクト化(折りたたみ) */
      .panel-intro {
        padding: 8px 12px;
      }
      .panel-intro-title { font-size: 12px; margin-bottom: 2px; }
      .panel-intro-body { font-size: 11px; line-height: 1.5; }
      .panel-context { padding: 6px 12px; font-size: 10px; }

      /* レビュアーインも (園田) モバイルでコンパクト化 */
      .reviewer-intro {
        padding: 8px 12px; gap: 10px;
      }
      .reviewer-intro .reviewer-avatar {
        width: 44px; height: 44px;
      }
      .reviewer-intro .reviewer-name { font-size: 12px; }
      .reviewer-intro .reviewer-role { font-size: 10px; }

      /* iframe は残り全部を使う */
      .panel-iframe {
        flex: 1 1 0;
        min-height: 0;
      }

      /* モバイル Floating Action Button(メイン画面右下) */
      .mobile-fab {
        display: flex !important;
        position: fixed;
        right: 16px; bottom: calc(20px + env(safe-area-inset-bottom));
        width: 56px; height: 56px;
        border-radius: 50%;
        background: var(--ink); color: white;
        align-items: center; justify-content: center;
        font-size: 24px;
        border: none; cursor: pointer;
        box-shadow: 0 4px 16px rgba(15,23,42,0.25);
        z-index: 90;
        transition: transform 0.15s;
      }
      .mobile-fab:active { transform: scale(0.95); }
      .workspace:not(.panel-closed) .mobile-fab { display: none !important; }

      /* モバイルモードセレクター縮小 */
      .topbar .mode-badge { font-size: 10px; padding: 4px 8px; }

      /* Help ボタン(モバイルで intro 折りたたみ表示切替) */
      .panel-intro.collapsible {
        cursor: pointer;
        padding: 8px 12px;
        user-select: none;
      }
      .panel-intro.collapsible .panel-intro-body { display: none; }
      .panel-intro.collapsible.expanded .panel-intro-body { display: block; margin-top: 4px; }
      .panel-intro.collapsible .panel-intro-title {
        display: flex; align-items: center; justify-content: space-between;
      }
      .panel-intro.collapsible .panel-intro-title::after {
        content: '▾';
        color: var(--muted);
        font-size: 10px;
        transition: transform 0.2s;
      }
      .panel-intro.collapsible.expanded .panel-intro-title::after { transform: rotate(180deg); }


      /* F021: 園田レビューのモバイル UI 改善 - iframe の縦スペース最大化 */
      #reviewActiveState .reviewer-intro {
        padding: 6px 10px;
        position: sticky; top: 0; z-index: 5;
        background: white;
        border-bottom: 1px solid var(--line);
      }
      #reviewActiveState .reviewer-intro .reviewer-avatar {
        width: 32px; height: 32px;
      }
      #reviewActiveState .reviewer-intro .reviewer-label,
      #reviewActiveState .reviewer-intro .reviewer-role {
        display: none;  /* モバイルでは役割表記を非表示、名前のみ */
      }
      #reviewActiveState .reviewer-intro .reviewer-name {
        font-size: 12px;
      }

      /* panel-intro の詳細(step 1-2-3)を折りたたみ可能に */
      #reviewActiveState > .panel-intro {
        padding: 6px 10px;
        cursor: pointer;
        user-select: none;
      }
      #reviewActiveState > .panel-intro .panel-intro-body {
        display: none;  /* デフォルト非表示 */
      }
      #reviewActiveState > .panel-intro.expanded .panel-intro-body {
        display: block; margin-top: 4px;
      }
      #reviewActiveState > .panel-intro .panel-intro-title {
        display: flex; align-items: center; justify-content: space-between;
        font-size: 12px; margin: 0;
      }
      #reviewActiveState > .panel-intro .panel-intro-title::after {
        content: '▾ 手順';
        font-size: 10px; color: var(--muted); font-weight: 400;
        transition: transform 0.2s;
      }
      #reviewActiveState > .panel-intro.expanded .panel-intro-title::after {
        content: '▴ 閉じる';
      }

      /* panel-preview(メモプレビュー)を折りたたみ可能 + 高さ制限 */
      #reviewActiveState .panel-preview {
        max-height: 60px; overflow-y: auto;
        padding: 4px 10px;
      }
      #reviewActiveState .panel-preview.expanded {
        max-height: 180px;
      }
      #reviewActiveState .panel-preview-label {
        font-size: 10px; cursor: pointer;
      }
      #reviewActiveState .panel-preview-label::after {
        content: ' ▾';
        color: var(--muted);
      }
      #reviewActiveState .panel-preview.expanded .panel-preview-label::after {
        content: ' ▴';
      }

      /* コピーボタンを sticky で常時アクセス可能に */
      #reviewActiveState .panel-context {
        position: sticky; top: 45px; z-index: 4;
        background: var(--bg-sidebar);
        padding: 4px 10px;
        border-bottom: 1px solid var(--line);
      }

      /* モバイルでパネルコンテキストを小さく */
      .panel-context { padding: 4px 12px; font-size: 10px; min-height: 0; }
    }

    @media (max-width: 600px) {
      /* さらに小さい画面(iPhone SE サイズ等)向け微調整 */
      .topbar .case-code { display: none; }
      .topbar .brand { font-size: 12px; }
      .char-tab { flex: 0 0 40%; min-width: 120px; }
    }

    /* ===== Ringi structured form (Section ⑥ 稟議書結論) =====
       data/caseNN.json の ringi_template から生成。memo-conclusion textarea
       の上に挿入され、ハイブリッド形式(構造化フィールド + 任意の補足記述)。 */
    .ringi-form {
      background: var(--accent-bg, #eff6ff);
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 14px 16px;
      margin: 6px 0 12px;
    }
    .ringi-form .ringi-intro {
      font-size: 11.5px;
      color: var(--muted);
      margin-bottom: 12px;
      line-height: 1.6;
    }
    .ringi-section {
      margin-bottom: 14px;
      padding-bottom: 12px;
      border-bottom: 1px dashed var(--line);
    }
    .ringi-section:last-child {
      border-bottom: none;
      margin-bottom: 0;
      padding-bottom: 0;
    }
    .ringi-label {
      font-size: 12.5px;
      font-weight: 700;
      color: var(--ink);
      margin-bottom: 6px;
    }
    .ringi-opt {
      display: flex;
      align-items: flex-start;
      gap: 7px;
      padding: 4px 0;
      font-size: 12.5px;
      cursor: pointer;
      line-height: 1.55;
    }
    .ringi-opt input[type="radio"],
    .ringi-opt input[type="checkbox"] {
      margin-top: 3px;
      flex-shrink: 0;
      cursor: pointer;
    }
    .ringi-form select {
      width: 100%;
      padding: 7px 10px;
      border: 1px solid var(--line-dark);
      border-radius: 5px;
      background: white;
      font-family: inherit;
      font-size: 12.5px;
      color: var(--ink);
      cursor: pointer;
    }
    .ringi-form textarea {
      width: 100%;
      min-height: 60px;
      padding: 8px 10px;
      border: 1px solid var(--line-dark);
      border-radius: 5px;
      font-family: inherit;
      font-size: 12.5px;
      line-height: 1.6;
      resize: vertical;
      outline: none;
      background: white;
    }
    .ringi-form textarea:focus,
    .ringi-form select:focus {
      border-color: var(--accent);
    }
    .ringi-static {
      padding: 6px 10px;
      background: var(--bg);
      border: 1px solid var(--line);
      border-radius: 5px;
      font-size: 12.5px;
      color: var(--muted);
    }
    .ringi-hint {
      font-size: 10.5px;
      color: var(--muted);
      margin-top: 5px;
      font-style: italic;
    }
    .ringi-supplement-label {
      font-size: 11px;
      color: var(--muted);
      margin: 10px 0 4px;
      font-weight: 600;
    }
    /* 構造化フォーム共通拡張(数値入力・参考値・計算式ヒント) */
    .ringi-reference {
      font-size: 10.5px;
      color: var(--muted);
      margin: 2px 0 6px;
      background: rgba(255, 255, 255, 0.4);
      padding: 3px 8px;
      border-radius: 4px;
      display: inline-block;
    }
    .ringi-formula {
      font-size: 10.5px;
      color: var(--accent);
      margin-top: 5px;
      font-family: "JetBrains Mono", monospace;
      line-height: 1.5;
    }
    .ringi-input {
      width: 100%;
      max-width: 240px;
      padding: 7px 10px;
      border: 1px solid var(--line-dark);
      border-radius: 5px;
      font-family: "JetBrains Mono", monospace;
      font-size: 13px;
      outline: none;
      background: white;
    }
    .ringi-input:focus {
      border-color: var(--accent);
    }
    /* 記載例の折り畳み(<details>)— ⑤ 総合判定、⑥ 判断理由 等で利用 */
    .ringi-example-wrap {
      margin-top: 8px;
      border: 1px solid var(--line);
      border-radius: 5px;
      background: #fffbeb;
    }
    .ringi-example-summary {
      cursor: pointer;
      padding: 6px 10px;
      font-size: 12px;
      font-weight: 600;
      color: #92400e;
      list-style: none;
    }
    .ringi-example-summary::-webkit-details-marker { display: none; }
    .ringi-example-summary::before {
      content: '▶';
      margin-right: 5px;
      font-size: 9px;
      transition: transform 0.15s;
      display: inline-block;
    }
    .ringi-example-wrap[open] .ringi-example-summary::before {
      transform: rotate(90deg);
    }
    .ringi-example-summary:hover { background: #fef3c7; }
    .ringi-example-body {
      padding: 8px 12px 10px;
      font-size: 11.5px;
      line-height: 1.7;
      color: var(--ink);
      border-top: 1px solid var(--line);
    }
    .ringi-example-body strong { color: #92400e; }

    /* ===== レビューレポートモーダル(📨 提出の応答を構造化表示) ===== */
    .review-report-modal {
      position: fixed; inset: 0;
      background: rgba(15,23,42,0.55);
      z-index: 10000;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      padding: 24px 12px;
      overflow-y: auto;
    }
    .review-report-box {
      background: white;
      border-radius: 12px;
      max-width: 920px;
      width: 100%;
      box-shadow: 0 12px 40px rgba(0,0,0,0.2);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      max-height: calc(100vh - 48px);
    }
    .review-report-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 14px 20px;
      background: linear-gradient(135deg, #0369a1 0%, #075985 100%);
      color: white;
      flex-shrink: 0;
    }
    .review-report-title { font-size: 16px; font-weight: 700; }
    .review-report-actions { display: flex; gap: 8px; }
    .rr-btn {
      background: rgba(255,255,255,0.15);
      color: white;
      border: 1px solid rgba(255,255,255,0.3);
      border-radius: 6px;
      padding: 6px 12px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      font-family: inherit;
    }
    .rr-btn:hover { background: rgba(255,255,255,0.25); }
    .rr-close { font-size: 16px; padding: 4px 10px; }
    .review-report-body {
      flex: 1;
      overflow-y: auto;
      padding: 20px;
      background: #f8fafc;
    }
    .rr-card {
      background: white;
      border-radius: 8px;
      padding: 16px 18px;
      margin-bottom: 14px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
      border-left: 4px solid var(--line);
    }
    .rr-overview     { border-left-color: #6366f1; }
    .rr-score        { border-left-color: #0369a1; }
    .rr-missing-ev   { border-left-color: #d97706; background: #fffbeb; }
    .rr-evaluation   { border-left-color: #059669; background: #ecfdf5; }
    .rr-grade        { border-left-color: #b45309; background: #fff7e6; }
    .rr-actions      { border-left-color: #0369a1; }
    .rr-hearing      { border-left-color: #d97706; background: #fffbeb; }
    .rr-closing      { border-left-color: #14b8a6; background: #f0fdfa; }
    .rr-hearing-stars {
      font-size: 28px;
      letter-spacing: 4px;
      color: #f59e0b;
      text-align: center;
      padding: 8px 0;
      margin-bottom: 8px;
      background: white;
      border-radius: 6px;
    }
    .rr-stars-num { font-size: 14px; color: var(--muted); margin-left: 8px; letter-spacing: 0; }
    .rr-error        { border-left-color: #b91c1c; background: #fef2f2; }
    .rr-card-title {
      font-size: 14px;
      font-weight: 700;
      margin-bottom: 10px;
      padding-bottom: 6px;
      border-bottom: 1px solid var(--line);
    }
    .rr-card-body { font-size: 13px; line-height: 1.75; color: var(--ink); }
    .rr-card-body p { margin: 6px 0; }
    .rr-card-body strong { font-weight: 700; color: #0f172a; }
    .rr-list { margin: 8px 0 8px 20px; padding-left: 4px; }
    .rr-list li { margin: 3px 0; }
    .rr-table { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: 12.5px; }
    .rr-table th, .rr-table td { padding: 6px 10px; border: 1px solid var(--line); text-align: left; }
    .rr-table th { background: #f1f5f9; font-weight: 700; }
    .rr-table td.num, .rr-table th.num { text-align: right; }
    .rr-pre {
      background: #f1f5f9;
      padding: 10px 12px;
      border-radius: 6px;
      font-size: 12px;
      overflow-x: auto;
      margin: 8px 0;
    }
    .rr-card-body code {
      background: #f1f5f9;
      padding: 1px 5px;
      border-radius: 3px;
      font-size: 12px;
    }
    .review-report-loading {
      text-align: center;
      padding: 40px 20px;
      color: var(--muted);
    }
    .rr-spinner {
      width: 40px; height: 40px;
      border: 3px solid var(--line);
      border-top-color: var(--accent);
      border-radius: 50%;
      margin: 0 auto 14px;
      animation: rrspin 1s linear infinite;
    }
    @keyframes rrspin { to { transform: rotate(360deg); } }
    .rr-loading-text { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
    .rr-loading-sub { font-size: 12px; color: var(--subtle); }

    /* Print: モーダルをそのまま印刷可能なレイアウトに */
    @media print {
      body * { visibility: hidden; }
      .review-report-modal, .review-report-modal * { visibility: visible; }
      .review-report-modal {
        position: absolute !important; inset: 0; padding: 0;
        background: white !important;
        max-height: none;
      }
      .review-report-box { box-shadow: none; max-height: none; }
      .review-report-actions { display: none; }
      .review-report-header { background: white !important; color: var(--ink) !important; border-bottom: 2px solid var(--ink); }
      .review-report-body { padding: 8px 16px; background: white; }
      .rr-card { box-shadow: none; page-break-inside: avoid; }
    }

    @media (max-width: 600px) {
      .review-report-modal { padding: 0; }
      .review-report-box { max-height: 100vh; border-radius: 0; }
      .review-report-title { font-size: 14px; }
      .rr-card { padding: 12px 14px; }
    }

    /* ===== ① 赤フラグ識別 — 行ベース動的フォーム ===== */
    .redflags-form {
      background: white;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 14px;
      margin-bottom: 12px;
    }
    .redflags-intro {
      padding: 10px 12px;
      background: #fef9c3;
      border-left: 4px solid #d97706;
      border-radius: 4px;
      margin-bottom: 12px;
      font-size: 12.5px;
      line-height: 1.6;
    }
    .redflags-rows { display: flex; flex-direction: column; gap: 10px; }
    .redflag-row {
      border: 1px solid var(--line);
      border-radius: 6px;
      padding: 10px 12px;
      background: #fafbfc;
    }
    .redflag-row-header {
      display: flex; justify-content: space-between; align-items: center;
      margin-bottom: 8px;
    }
    .redflag-row-num {
      font-weight: 700; font-size: 12px; color: #b45309;
    }
    .redflag-del-btn {
      background: none; border: 1px solid var(--line-dark); border-radius: 4px;
      width: 24px; height: 24px; cursor: pointer; color: var(--muted);
      font-size: 11px; padding: 0;
    }
    .redflag-del-btn:hover { background: #fee2e2; color: #b91c1c; border-color: #fca5a5; }
    .redflag-row-fields {
      display: grid;
      grid-template-columns: 100px 1fr;
      gap: 6px 10px;
      align-items: center;
    }
    .redflag-row-fields label {
      font-size: 11.5px; color: var(--muted); font-weight: 600;
    }
    .redflag-pattern-label {
      font-weight: 400; font-size: 10.5px; color: var(--subtle);
    }
    .redflag-row-fields input[type="text"],
    .redflag-row-fields select {
      padding: 6px 10px;
      border: 1px solid var(--line-dark);
      border-radius: 5px;
      font-size: 12.5px;
      font-family: inherit;
      background: white;
      outline: none;
      width: 100%;
    }
    .redflag-row-fields input[type="text"]:focus,
    .redflag-row-fields select:focus {
      border-color: var(--accent);
    }
    .redflags-footer {
      display: flex; justify-content: space-between; align-items: center;
      margin-top: 12px;
    }
    .redflags-add-btn {
      background: #eff6ff;
      color: #0369a1;
      border: 1px dashed #0369a1;
      border-radius: 6px;
      padding: 7px 14px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      font-family: inherit;
    }
    .redflags-add-btn:hover { background: #dbeafe; }
    .redflags-counter {
      font-size: 11.5px; color: var(--muted);
    }

    /* ===== ② 事前仮説 + ④ 確定仮説 — ① 行ベース連動フォーム ===== */
    .hypothesis-form {
      background: white;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 14px;
      margin-bottom: 12px;
    }
    .hypothesis-intro {
      padding: 10px 12px;
      background: var(--blue-bg);
      border-left: 4px solid var(--blue);
      border-radius: 4px;
      margin-bottom: 12px;
      font-size: 12.5px;
      line-height: 1.6;
    }
    .hypothesis-empty {
      padding: 14px 16px;
      background: #fef2f2;
      border-left: 4px solid #b91c1c;
      border-radius: 4px;
      font-size: 12.5px;
      color: var(--ink);
      line-height: 1.6;
    }
    .hypothesis-row, .final-hyp-row {
      border: 1px solid var(--line);
      border-radius: 6px;
      padding: 12px;
      background: #fafbfc;
      margin-bottom: 10px;
    }
    .hypothesis-row-header {
      font-size: 12.5px;
      font-weight: 600;
      margin-bottom: 10px;
      padding-bottom: 8px;
      border-bottom: 1px solid var(--line);
      display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline;
    }
    .hyp-row-num { color: #b45309; }
    .hyp-pattern-label {
      font-size: 10.5px; font-weight: 400; color: var(--muted);
      background: #f1f5f9; padding: 2px 8px; border-radius: 10px;
      margin-left: auto;
    }
    .hyp-group {
      margin-bottom: 10px;
    }
    .hyp-group:last-child { margin-bottom: 0; }
    .hyp-group-label {
      font-size: 11.5px;
      font-weight: 700;
      color: var(--ink);
      margin-bottom: 5px;
    }
    .hyp-check {
      display: block;
      padding: 4px 0;
      font-size: 12px;
      line-height: 1.5;
      cursor: pointer;
    }
    .hyp-check input[type="checkbox"] {
      margin-right: 6px;
      vertical-align: middle;
    }
    .hyp-check span { vertical-align: middle; }
    .hyp-check:hover span { color: var(--accent); }
    .hyp-check.hyp-fraud span { color: #991b1b; }
    .hyp-check.hyp-fraud:hover span { color: #b91c1c; }
    .hyp-group input[type="text"] {
      width: 100%;
      padding: 5px 10px;
      margin-top: 4px;
      border: 1px solid var(--line-dark);
      border-radius: 4px;
      font-size: 12px;
      font-family: inherit;
      outline: none;
      background: white;
    }
    .hyp-group input[type="text"]:focus { border-color: var(--accent); }

    /* ④ Final hypothesis status radios */
    .final-hyp-item {
      padding: 8px 10px;
      background: white;
      border: 1px solid var(--line);
      border-radius: 5px;
      margin-bottom: 6px;
    }
    .final-hyp-item.final-hyp-reason-missing {
      border-color: #fca5a5;
      background: #fef2f2;
    }
    .final-hyp-reason {
      margin-top: 8px;
      padding-top: 8px;
      border-top: 1px dashed var(--line);
    }
    .final-hyp-reason.reason-inactive {
      opacity: 0.5;
    }
    .final-hyp-reason label {
      display: block;
      font-size: 10.5px;
      color: var(--muted);
      margin-bottom: 4px;
    }
    .final-hyp-reason input[type="text"] {
      width: 100%;
      padding: 5px 8px;
      border: 1px solid var(--line-dark);
      border-radius: 4px;
      font-size: 12px;
      font-family: inherit;
      outline: none;
    }
    .final-hyp-reason input[type="text"]:focus { border-color: var(--accent); }
    .final-hyp-reason .reason-warn {
      margin-top: 5px;
      padding: 4px 8px;
      background: #fef2f2;
      color: #b91c1c;
      border-radius: 3px;
      font-size: 10.5px;
    }
    .final-hyp-text { font-size: 12px; margin-bottom: 6px; line-height: 1.5; }
    .final-hyp-radios {
      display: flex; gap: 14px; flex-wrap: wrap;
      font-size: 11.5px;
    }
    .final-hyp-radios label {
      cursor: pointer;
      display: flex; align-items: center; gap: 4px;
    }
    .final-hyp-radios input[type="radio"] {
      vertical-align: middle;
    }
    .final-hyp-note { margin-top: 10px; }
    .final-hyp-note label {
      font-size: 11px; color: var(--muted); display: block; margin-bottom: 4px;
    }
    .final-hyp-note textarea {
      width: 100%;
      padding: 6px 10px;
      border: 1px solid var(--line-dark);
      border-radius: 4px;
      font-size: 12px;
      font-family: inherit;
      resize: vertical;
      outline: none;
    }
    .final-hyp-note textarea:focus { border-color: var(--accent); }
    .final-empty {
      padding: 8px 12px;
      background: #fef9c3;
      border-radius: 4px;
      font-size: 11.5px;
      color: var(--muted);
    }

    @media (max-width: 600px) {
      .redflag-row-fields { grid-template-columns: 1fr; }
      .redflag-row-fields label { padding-top: 4px; }
    }

    /* ===== Evidence Inventory(証拠フォルダ、画面左下固定パネル)=====
       配置の変遷:
       - v1 右下固定 → チャット送信ボタンと衝突して送信不能
       - v2 右上固定 → 主人公カード等のコンテンツと衝突
       - v3 左下固定 + デフォルト折りたたみ(現在)
         チャット送信(右下)・主人公カード(右上)・topbar(上)・ヒアリングタブ
         (中央〜右)を全て回避。展開時のみ width:280px、折り畳み時はヘッダのみで
         画面占有を最小化。 */
    .ev-inventory {
      position: fixed;
      left: 16px;
      bottom: 16px;
      width: 280px;
      max-width: calc(100vw - 32px);
      max-height: calc(100vh - 32px);
      background: white;
      border: 1px solid var(--line-dark);
      border-radius: 10px;
      box-shadow: 0 4px 20px rgba(15,23,42,0.12);
      z-index: 90;
      overflow: hidden;
      transition: transform 0.25s, box-shadow 0.25s;
      display: flex;
      flex-direction: column;
    }
    .ev-inventory.collapsed .ev-inv-body { display: none; }
    .ev-inventory.collapsed { max-height: none; width: auto; min-width: 200px; }
    .ev-inv-header {
      background: var(--ink);
      color: white;
      padding: 10px 14px;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .ev-inv-header .ev-count {
      margin-left: auto;
      background: rgba(255,255,255,0.2);
      padding: 2px 8px;
      border-radius: 10px;
      font-size: 11px;
      font-family: "JetBrains Mono", monospace;
    }
    .ev-inv-header .ev-inv-toggle { font-size: 10px; opacity: 0.8; }
    .ev-inv-body {
      overflow-y: auto;
      padding: 8px;
      flex: 1;
    }
    .ev-inv-intro {
      font-size: 10.5px;
      color: var(--ink);
      padding: 8px 10px 10px;
      line-height: 1.6;
      background: #f0f9ff;
      border-radius: 5px;
      margin-bottom: 8px;
    }
    .ev-inv-intro strong { color: var(--ink); }
    .ev-totals {
      font-size: 10.5px;
      color: var(--muted);
      padding: 6px 9px;
      background: #f8fafc;
      border-radius: 5px;
      margin-bottom: 8px;
      font-weight: 600;
    }
    .ev-layer-section { margin-bottom: 10px; }
    .ev-layer-header {
      display: flex; justify-content: space-between; align-items: center;
      padding: 5px 8px;
      background: var(--ink);
      color: white;
      border-radius: 4px;
      font-size: 11px;
      font-weight: 700;
      margin-bottom: 4px;
    }
    .ev-layer-section[data-layer="2"] .ev-layer-header { background: #b45309; }
    .ev-layer-section[data-layer="3"] .ev-layer-header { background: #b91c1c; }
    .ev-layer-count { font-weight: 400; font-size: 10.5px; opacity: 0.95; }
    .ev-layer-breakdown {
      font-size: 10px;
      color: var(--muted);
      padding: 0 8px 4px;
    }
    .ev-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 7px 9px;
      margin-bottom: 3px;
      border-radius: 5px;
      font-size: 11.5px;
      background: var(--bg);
      transition: background 0.15s;
    }
    .ev-item.locked { color: var(--subtle); font-style: italic; }
    .ev-item.unlocked {
      background: var(--green-bg, #f0fdf4);
      color: var(--ink);
      cursor: pointer;
    }
    .ev-item.unlocked:hover { background: #dcfce7; }
    /* .ev-item.decisive 強調(amber)は廃止(判断1・Layer3=種類。重要度色を付けない) */
    .ev-item .ev-id {
      font-family: "JetBrains Mono", monospace;
      font-size: 10.5px;
      font-weight: 700;
      min-width: 40px;
      color: var(--accent);
    }
    .ev-item.locked .ev-id { color: var(--subtle); }
    .ev-item .ev-icon { font-size: 11px; }

    /* ===== Clickable evidence cell(資料表内の発見可能セル)===== */
    [data-ev-trigger] {
      cursor: pointer;
      position: relative;
      transition: background 0.15s, outline 0.15s;
    }
    [data-ev-trigger]:hover {
      background: rgba(3, 105, 161, 0.08) !important;
      outline: 1px dashed var(--accent);
    }
    [data-ev-trigger].ev-found {
      background: rgba(22, 101, 52, 0.08) !important;
      outline: 1px solid var(--green);
    }
    [data-ev-trigger].ev-found::after {
      content: "✓";
      color: var(--green);
      font-weight: 700;
      margin-left: 4px;
    }

    /* ===== Unlock toast(発見通知)===== */
    .ev-toast {
      position: fixed;
      top: 80px;
      right: 16px;
      background: white;
      border: 2px solid var(--green);
      border-radius: 8px;
      padding: 12px 16px;
      box-shadow: 0 4px 20px rgba(22,101,52,0.25);
      z-index: 200;
      max-width: 320px;
      animation: ev-toast-in 0.3s ease-out;
    }
    /* .ev-toast.decisive 強調(amber/pulse)は廃止(判断1・Layer3=種類) */
    .ev-toast-title {
      font-size: 11px;
      color: var(--green);
      font-weight: 700;
      margin-bottom: 4px;
    }
    .ev-toast-body { font-size: 13px; line-height: 1.5; }
    .ev-toast-id {
      font-family: "JetBrains Mono", monospace;
      font-weight: 700;
      color: var(--accent);
      margin-right: 5px;
    }
    @keyframes ev-toast-in {
      from { opacity: 0; transform: translateX(20px); }
      to { opacity: 1; transform: translateX(0); }
    }
    @keyframes ev-pulse {
      0%, 100% { box-shadow: 0 4px 20px rgba(245,158,11,0.3); }
      50% { box-shadow: 0 4px 30px rgba(245,158,11,0.6); }
    }

    /* ===== Reason popup(根拠選択モーダル)===== */
    .ev-reason-modal {
      position: fixed;
      inset: 0;
      background: rgba(15, 23, 42, 0.5);
      z-index: 250;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }
    .ev-reason-box {
      background: white;
      border-radius: 12px;
      padding: 24px;
      max-width: 540px;
      width: 100%;
      max-height: 80vh;
      overflow-y: auto;
      box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    }
    .ev-reason-q {
      font-size: 15px;
      font-weight: 700;
      margin-bottom: 6px;
    }
    .ev-reason-sub {
      font-size: 12px;
      color: var(--muted);
      margin-bottom: 14px;
    }
    .ev-reason-option {
      display: flex;
      gap: 10px;
      padding: 10px 12px;
      border: 1px solid var(--line);
      border-radius: 6px;
      margin-bottom: 6px;
      cursor: pointer;
      transition: background 0.15s, border-color 0.15s;
      font-size: 13px;
      line-height: 1.55;
    }
    .ev-reason-option:hover {
      background: var(--accent-bg, #eff6ff);
      border-color: var(--accent);
    }
    .ev-reason-feedback {
      background: #fef3c7;
      border-left: 3px solid #f59e0b;
      padding: 10px 12px;
      border-radius: 4px;
      font-size: 12px;
      line-height: 1.6;
      margin-top: 12px;
    }
    .ev-reason-actions {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      margin-top: 12px;
    }
    .ev-reason-actions button {
      padding: 7px 14px;
      border: 1px solid var(--line-dark);
      background: white;
      border-radius: 5px;
      font-size: 12px;
      cursor: pointer;
      font-family: inherit;
    }

    /* Mid review banner */
    .mid-review-banner {
      background: linear-gradient(135deg, #eff6ff, white);
      border: 1px solid var(--accent);
      border-radius: 8px;
      padding: 12px 16px;
      margin: 12px 0;
      display: flex;
      gap: 12px;
      align-items: flex-start;
      animation: ev-toast-in 0.4s ease-out;
    }
    .mid-review-avatar {
      width: 36px; height: 36px; border-radius: 50%;
      background-size: cover; background-position: center;
      background-color: #cbd5e1; flex-shrink: 0;
    }
    .mid-review-content { flex: 1; font-size: 13px; line-height: 1.6; }
    .mid-review-name { font-weight: 700; font-size: 12px; color: var(--accent); margin-bottom: 3px; }
    .mid-review-close {
      background: none; border: none; cursor: pointer; color: var(--subtle);
      font-size: 16px; padding: 0;
    }

    /* Mobile: shrink inventory(モバイルも左下を維持) */
    @media (max-width: 600px) {
      .ev-inventory {
        width: 240px;
        max-height: 50vh;
        left: 12px;
        bottom: 12px;
      }
    }