:root{
    --ink:#11343d;--ink-soft:#5a767d;--teal:#1a6b73;--emerald:#2eb398;--emerald-deep:#1f8f7c;
    --paper:#f7f9f9;--paper-2:#eef2f2;--card:#fff;--line:#dde5e5;
    --pro:#1f8f7c;--con:#c2683b;--amber:#b8862f;--calm:#5a8a9c;
    --shadow:0 2px 8px rgba(17,52,61,.04),0 12px 32px rgba(17,52,61,.06);--r:16px;
    /* ダーク対応で追加：白背景の面・半透明白・ヘッダー背景を変数化（ライト時の値） */
    --surface:#fff;              /* 白背景の面（ボタン/パネル/入力欄など） */
    --header-bg:rgba(255,255,255,.95);
    --chip-bg:rgba(255,255,255,.7);
    --chip-border:#cfe0dd;
    --hero-tag-bg:rgba(255,255,255,0.2);
    --modal-shadow:rgba(0,0,0,.3);
    --care-bg:linear-gradient(160deg,#eef5f6,#e6f1ee);
    --care-border:#d3e6e3;
    --skel-glow:#e4ebeb;
  }
  /* ダークモードの色（data-theme="dark" のとき適用）。深い青緑の世界観を保ちつつ反転 */
  html[data-theme="dark"]{
    --ink:#dfe9ea;            /* 文字：淡い青白 */
    --ink-soft:#8fa6ab;       /* 補助文字 */
    --paper:#0e1c20;          /* ページ背景：黒緑 */
    --paper-2:#13262b;
    --card:#16282d;           /* カード背景 */
    --line:#2a3d42;           /* 罫線 */
    --emerald:#3fcfb0;        /* 暗背景で映えるよう少し明るく */
    --emerald-deep:#37c0a8;
    --pro:#3fcfb0;            /* 賛成：明るめ緑 */
    --con:#e08a5c;            /* 反対：明るめオレンジ */
    --amber:#d6a94a;
    --calm:#7fa8ba;
    --surface:#16282d;       /* 白背景だった面はカード色に */
    --header-bg:rgba(14,28,32,.92);
    --chip-bg:rgba(255,255,255,.06);
    --chip-border:#2a3d42;
    --hero-tag-bg:rgba(255,255,255,0.12);
    --modal-shadow:rgba(0,0,0,.6);
    --shadow:0 2px 8px rgba(0,0,0,.3),0 12px 32px rgba(0,0,0,.35);
    --care-bg:linear-gradient(160deg,#16282d,#13262b);
    --care-border:#2a3d42;
    --skel-glow:#22363b;
  }
  /* ユーザーが手動選択していないときは、OS設定(prefers-color-scheme)に従う */
  @media (prefers-color-scheme: dark){
    html:not([data-theme="light"]):not([data-theme="dark"]){
      --ink:#dfe9ea;--ink-soft:#8fa6ab;--paper:#0e1c20;--paper-2:#13262b;
      --card:#16282d;--line:#2a3d42;--emerald:#3fcfb0;--emerald-deep:#37c0a8;
      --pro:#3fcfb0;--con:#e08a5c;--amber:#d6a94a;--calm:#7fa8ba;
      --surface:#16282d;--header-bg:rgba(14,28,32,.92);--chip-bg:rgba(255,255,255,.06);
      --chip-border:#2a3d42;--hero-tag-bg:rgba(255,255,255,0.12);--modal-shadow:rgba(0,0,0,.6);
      --shadow:0 2px 8px rgba(0,0,0,.3),0 12px 32px rgba(0,0,0,.35);
      --care-bg:linear-gradient(160deg,#16282d,#13262b);--care-border:#2a3d42;--skel-glow:#22363b;
    }
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0;background:var(--paper);color:var(--ink);
    font-family:system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height:1.6;-webkit-font-smoothing:antialiased;overscroll-behavior-y:none;
    word-break: auto-phrase;
  }
  h1, h2, h3, h4 { overflow-wrap: anywhere; }
  ::selection{background:var(--emerald);color:#fff}
  a{color:inherit;text-decoration:none}
  :focus-visible { outline: 3px solid var(--emerald); outline-offset: 2px; border-radius: 4px; }
  
  .wrap{max-width:1280px;margin:0 auto;padding:0 32px}
  .hidden{display:none!important}

  /* Header */
  header{position:sticky;top:0;z-index:60;background:var(--header-bg);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
  .nav-top{display:flex;align-items:center;height:64px;gap:16px;}
  .brand{display:flex;align-items:center;gap:10px;font-weight:800;cursor:pointer;font-size:22px;letter-spacing:-.02em; outline:none;}
  .brand .logo{width:32px;height:32px;color:var(--ink);}
  .brand .name b{color:var(--emerald-deep)}
  /* 20260708: ロゴ名の下に説明タグライン（金谷先生FB＝一発で何なのか分かるように） */
  .brand-text{display:flex;flex-direction:column;line-height:1.15;}
  .brand-tagline{font-size:11px;font-weight:600;letter-spacing:0;color:var(--ink-soft);margin-top:2px;white-space:nowrap;}
  @media(max-width:768px){
    .brand-tagline{font-size:10px;}
  }
  .nav-top .spacer{flex:1}
  .header-actions{display:flex;gap:12px;align-items:center;}
  
  .btn-outline{border:1px solid var(--line);background:var(--surface);border-radius:99px;padding:8px 16px;font-size:13px;font-weight:700;color:var(--ink);cursor:pointer;transition:.2s; display:flex; align-items:center; justify-content:center;}
  .btn-outline:hover{border-color:var(--ink);}
  .btn-solid{border:none;background:var(--ink);border-radius:99px;padding:8px 16px;font-size:13px;font-weight:700;color:#fff;cursor:pointer;transition:.2s; display:flex; align-items:center; justify-content:center;}
  .btn-solid:hover{background:#0a1e24;}
  
  .status-badge{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--emerald-deep);background:#e6f4f1;padding:6px 12px;border-radius:99px;border:1px solid #cce8e2; transition: 0.3s;}
  .status-badge::before{content:"";display:block;width:6px;height:6px;border-radius:50%;background:var(--emerald-deep);}
  .status-badge.syncing { background: #fff3cd; color: #856404; border-color: #ffeeba; }
  .status-badge.syncing::before { background: #856404; animation: blink 1s infinite; }
  @keyframes blink { 50% { opacity: 0; } }

  .nav-bottom{display:flex;gap:32px;height:48px;align-items:flex-end; overflow-x:auto; white-space:nowrap; scrollbar-width:none;}
  .nav-bottom::-webkit-scrollbar { display: none; }
  .tab-link{font-size:14px;font-weight:700;color:var(--ink-soft);padding-bottom:12px;border-bottom:3px solid transparent;cursor:pointer;transition:.2s;}
  .tab-link:hover{color:var(--ink);}
  .tab-link.active{color:var(--ink);border-bottom-color:var(--emerald-deep);}

  /* Layout */
  .main-layout{display:flex;gap:40px;padding:40px 0 80px;}
  .main-content{flex:1;min-width:0;}
  .sidebar{width:340px;flex-shrink:0;display:flex;flex-direction:column;gap:24px;}
  
  .section-header{display:flex;align-items:baseline;gap:16px;margin-bottom:24px;}
  .section-header h1{font-size:24px;font-weight:800;margin:0;}
  .section-header span{font-size:13px;color:var(--ink-soft);font-weight:600;}

  /* Cards */
  .tag{font-size:11px;font-weight:800;background:var(--paper-2);padding:4px 8px;border-radius:4px;color:var(--ink-soft);display:inline-block;}
  .tag.hero-tag{background:var(--hero-tag-bg);color:#fff;}
  
  .hero-card{display:flex;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);margin-bottom:24px;cursor:pointer;transition:.2s;min-height:240px; outline:none;}
  .hero-card:hover, .hero-card:focus-visible{transform:translateY(-4px);box-shadow:0 16px 40px rgba(17,52,61,.08);border-color:var(--emerald);}
  .hero-img{width:40%;background:var(--emerald-deep);padding:24px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;}
  .hero-img::after{content:"";}
  .hero-thumb-bg{position:absolute;inset:0;z-index:0;line-height:0;}
  .hero-thumb-bg .thumb-svg{width:100%;height:100%;display:block;}
  .hero-img > .tag, .hero-img > div{position:relative;z-index:1;}
  .hero-img .hero-tag{background:rgba(255,255,255,.85);color:var(--ink);}
  .hero-img > div[style]{color:var(--ink);text-shadow:0 1px 2px rgba(255,255,255,.4);}
  .hero-body{flex:1;padding:32px;display:flex;flex-direction:column;justify-content:center;}
  /* 20260712 CLS対策②: 読み込み中はスケルトンを見せ、実記事と同じ高さを先に確保する。
     is-loading が外れると本文が出る＝高さが変わらないのでレイアウトがズレない。 */
  .hero-skel{display:none;flex-direction:column;gap:8px;}
  .hero-card.is-loading{cursor:default;min-height:240px;}
  .hero-card.is-loading .hero-skel{display:flex;}
  .hero-card.is-loading #heroTitle,
  .hero-card.is-loading #heroExcerpt{display:none;}
  .hero-card.is-loading .hero-tag,
  .hero-card.is-loading .hero-img > div[style]{opacity:.35;}
  .hero-card.is-loading:hover{transform:none;box-shadow:var(--shadow);border-color:var(--line);}  /* 20260712 CLS対策③: ヒーローも行数固定（見出し2行・本文3行）で高さを一定にする */
  .hero-body h2{font-size:24px;font-weight:800;margin:0 0 12px;line-height:1.4;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
    min-height:calc(24px * 1.4 * 2);}
  .hero-body p{font-size:15px;color:var(--ink-soft);margin:0 0 24px;line-height:1.6;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
    min-height:calc(15px * 1.6 * 3);}

  .article-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));gap:24px;}
  .ncard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:0;cursor:pointer;transition:.2s;display:flex;flex-direction:column;box-shadow:0 2px 8px rgba(17,52,61,.03); outline:none; overflow:hidden;}
  .ncard-thumb{width:100%;height:120px;overflow:hidden;line-height:0;}
  .ncard-thumb .thumb-svg{width:100%;height:100%;display:block;}
  .ncard-body{padding:20px 24px 24px;display:flex;flex-direction:column;flex:1;}
  .ncard:hover, .ncard:focus-visible{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--emerald);}
  /* 20260712 CLS対策③: 見出し・本文の行数を固定して、どの記事でもカード高さを一定にする。
     記事ごとに高さが変わるとスケルトンと必ずズレる＝CLSが消せないため、ここが根治策。
     見た目も揃うので一覧の落ち着きが増す（＝プロダクトの思想とも合う）。 */
  .ncard h3{font-size:17px;font-weight:800;margin:12px 0 8px;line-height:1.4;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
    min-height:calc(17px * 1.4 * 2);}
  .ncard p{font-size:13.5px;color:var(--ink-soft);margin:0 0 16px;line-height:1.6;flex:1;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
    min-height:calc(13.5px * 1.6 * 3);}
  .ncard-foot{display:flex;align-items:center;justify-content:space-between;font-size:11px;font-weight:600;color:var(--ink-soft);}
  .ncard-foot .ai-badge{display:flex;align-items:center;gap:4px;}
  .ncard-foot .ai-badge::before{content:"";display:inline-block;width:10px;height:10px;border-radius:2px;background:var(--con);box-shadow: 6px 0 0 var(--pro);}

  /* Sidebar */
  .side-panel{background: linear-gradient(135deg, var(--teal) 0%, var(--emerald-deep) 100%);border-radius:var(--r);padding:32px 24px;color:#fff;box-shadow:0 4px 12px rgba(26,107,115,0.2);transition:.3s;cursor:pointer; outline:none;}
  .side-panel:hover, .side-panel:focus-visible{transform:translateY(-4px);box-shadow:0 8px 24px rgba(26,107,115,0.3);}
  .side-panel h3{font-size:20px;font-weight:800;margin:0 0 12px;}
  .side-panel p{font-size:14px;color:rgba(255,255,255,0.95);margin:0 0 20px;line-height:1.7;}
  .side-panel .btn-white{background:#fff;color:var(--teal);border:none;border-radius:99px;padding:12px 20px;font-size:14px;font-weight:800;display:inline-flex;align-items:center;gap:8px;transition:.2s;box-shadow:0 2px 8px rgba(0,0,0,0.1); pointer-events: none;}
  .side-panel:hover .btn-white{background:var(--paper-2);transform:translateX(4px);}

  .ranking-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px;}
  .ranking-card h3{font-size:15px;font-weight:800;margin:0 0 16px;color:var(--ink);}
  .ranking-list{list-style:none;padding:0;margin:0;}
  /* 20260712 CLS対策③: 見出しの長さで1行/2行と変わると高さがズレるので、2行で固定する */
  .ranking-list li{display:flex;gap:12px;margin-bottom:16px;font-size:14px;font-weight:700;line-height:1.4;cursor:pointer;color:var(--ink-soft); outline:none;
    min-height:calc(14px * 1.4 * 2);align-items:flex-start;}
  .ranking-list li > span:last-child{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
  .ranking-list li:hover, .ranking-list li:focus-visible{color:var(--ink);}
  .ranking-list li:last-child{margin-bottom:0;}
  .ranking-list .rank{color:var(--emerald-deep);font-weight:800;font-size:16px;width:16px;text-align:center;}

  /* ★ 新設・UI統一用：AI中立サマリコンポーネント */
  .ai-neutral-box { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 24px; margin-bottom: 24px; }
  .ai-neutral-header { font-size: 13px; font-weight: 800; color: var(--calm); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; letter-spacing: 0.05em;}
  .ai-neutral-header::before { content: ""; display: block; width: 8px; height: 8px; background: var(--calm); border-radius: 50%; }
  .ai-header-note { font-size: 11px; font-weight: 600; color: var(--ink-soft); letter-spacing: 0; } /* 20260704c: 「結論ではありません」の控えめ表示 */
  .opinion-ask { text-align: center; font-size: 14px; font-weight: 700; color: var(--ink); margin: 2px 0 10px; } /* 20260704c: 両論の下の問いかけ */
  .sensitive-note { border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; margin-bottom: 40px; font-size: 13.5px; line-height: 1.9; color: var(--ink-soft); } /* 20260704e: センシティブ記事の案内 */
  .sensitive-note p { margin: 0 0 8px; }
  .sensitive-note a { color: var(--calm); text-decoration: underline; }
  /* 20260705b: 記事→Cooldownの往復導線 */
  .to-cooldown { text-align: center; margin: 4px 0 32px; }
  .to-cooldown-lead { font-size: 13px; color: var(--ink-soft); margin-bottom: 10px; }
  .btn-cooldown { font-family: inherit; font-size: 15px; font-weight: 700; color: #fff;
    background: var(--calm); border: none; border-radius: 999px; padding: 12px 26px; cursor: pointer;
    transition: opacity .15s; }
  .btn-cooldown:hover { opacity: .88; }

  /* Modal / Overlay */
  .overlay{position:fixed;inset:0;background:rgba(17,52,61,.7);backdrop-filter:blur(6px);z-index:100;display:none;align-items:flex-start;justify-content:center;padding:40px 20px;}
  .overlay.show{display:flex; animation: fadeIn 0.25s ease;}
  @keyframes fadeIn { from{opacity:0;} to{opacity:1;} }
  
  .modal{background:var(--paper);width:100%;max-width:840px;border-radius:24px;overflow:hidden;box-shadow:0 40px 80px var(--modal-shadow);animation:rise .4s cubic-bezier(0.16, 1, 0.3, 1);position:relative; outline:none; display:flex; flex-direction:column; max-height:90vh;}
  @keyframes rise{from{opacity:0;transform:translateY(30px) scale(0.98)}to{opacity:1;transform:none}}
  
  .modal-head{background:var(--card);padding:32px 40px;border-bottom:1px solid var(--line);display:flex;align-items:flex-start;justify-content:space-between;gap:20px;z-index:10; transition: box-shadow 0.2s ease;}
  .modal-head.scrolled { box-shadow: 0 4px 12px rgba(0,0,0,0.08); border-bottom-color: transparent; }
  /* 元記事へのリンク（20260703d）。表示/非表示は portal.js が記事のlink有無で切り替える */
  .src-link{display:none;margin-top:10px;font-size:13px;font-weight:800;color:var(--emerald-deep);text-decoration:none;align-items:center;gap:5px;}
  .src-link:hover{text-decoration:underline;}
  
  .modal-body{padding:40px; overflow-y:auto; flex:1;}
  .closeb{background:var(--paper-2); border:none; width:40px; height:40px; border-radius:50%; cursor:pointer; font-weight:bold; color:var(--ink-soft); display:flex; align-items:center; justify-content:center; transition: .2s; flex-shrink:0; outline:none;}
  .closeb:hover, .closeb:focus-visible{background:var(--ink); color:#fff; box-shadow:0 0 0 3px rgba(17,52,61,0.2);}

  @media(max-width: 768px) {
    .wrap { padding: 0 16px; }
    .overlay { padding: 40px 0 0 0; align-items: flex-end; }
    .modal { border-radius: 24px 24px 0 0; max-height: 95vh; }
    .modal-head { padding: 20px 24px; }
    .modal-body { padding: 24px; }
    .closeb { width: 36px; height: 36px; }
    /* メインとサイドバーを縦積みにして、サイドバーは下へ回す */
    .main-layout { flex-direction: column; gap: 32px; padding: 28px 0 64px; }
    .sidebar { width: 100%; }
    /* ヒーローカードも縦積みに（画像エリアが横幅を取りすぎないように） */
    .hero-card { flex-direction: column; min-height: 0; }
    /* 20260712 CLS対策③: モバイルは縦積みになり、hero-imgにサムネSVGが入ると
       アスペクト比で高さが伸びる(140→318/545px)＝CLSの主犯だった。
       高さを固定してSVG側を切り抜く(slice)ことで、読み込み中も記事表示後も同じ高さになる。 */
    .hero-card.is-loading { min-height: 0; }
    .hero-img { width: 100%; height: 180px; min-height: 180px; flex: 0 0 180px; }
    .hero-img .thumb-svg { height: 100%; }
    .hero-body { padding: 24px; }
    /* スマホではヘッダーの「最新ニュース」を隠す（ロゴタップで戻れるため） */
    .btn-latest-news { display: none; }
  }

  /* 長押しボタンとUX改善 */
  .press-row { display: flex; gap: 16px; margin-bottom: 32px; flex-wrap: wrap; }
  .press-btn { 
    flex: 1; min-width: 200px; border: 1px solid var(--line); background: var(--surface); 
    border-radius: 16px; padding: 20px; cursor: pointer; text-align: center; 
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.15s, box-shadow 0.15s; 
    position: relative; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; z-index: 1; outline: none;
    touch-action: pan-y;
  }
  .press-btn:hover, .press-btn:focus-visible { border-color: var(--emerald); box-shadow: 0 8px 24px rgba(46,179,152,0.1); }
  .press-btn.holding { transform: scale(0.96); transition: transform 0.1s; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }

  .press-btn .fill { 
    position: absolute; left: 0; top: 0; width: 100%; height: 100%; 
    background: var(--emerald); opacity: 0.15; z-index: -1; 
    transform-origin: left; transform: scaleX(0); transition: transform 0.2s ease-out; 
  }
  .press-btn.holding .fill { transform: scaleX(1); transition: transform 0.6s linear; }
  
  .reveal-area { display: none; outline: none; }
  .reveal-area.show { display: block; animation: rise .4s ease both; }

  .pro-con-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  @media(max-width: 620px) { .pro-con-grid { grid-template-columns: 1fr; } }

  .panel-box{background:var(--surface);padding:24px;border-radius:16px;box-shadow:var(--shadow);}
  .panel-box.con{border-top:4px solid var(--con);}
  .panel-box.pro{border-top:4px solid var(--pro);}

  /* ローディング */
  .loading-box { text-align: center; padding: 40px 20px; display: none; }
  .loading-box.show { display: block; }
  .spinner{display:block;width:24px;height:24px;border:3px solid #bfe3da;border-top-color:var(--emerald-deep);border-radius:50%;animation:spin .8s linear infinite; margin: 0 auto 16px;}
  @keyframes spin {to{transform:rotate(360deg)}}

  /* コメントフォーム */
  .cform { background:var(--card); border:1px solid var(--emerald); border-radius:20px; padding:32px; margin-top:40px; box-shadow: 0 8px 32px rgba(46, 179, 152, 0.08); }
  @media(max-width: 600px) { .cform { padding: 20px; } }
  .cform textarea { width:100%; border:1px solid var(--line); border-radius:12px; padding:16px; min-height:120px; resize:vertical; margin-bottom:8px; font-family:inherit; font-size:15px; outline:none; background:var(--paper); color:var(--ink); transition:.2s; }
  .cform textarea:focus { border-color:var(--emerald); background:var(--surface); box-shadow: 0 0 0 3px rgba(46,179,152,0.1); }
  .cform textarea:disabled { opacity: 0.7; cursor: not-allowed; }
  
  .stance-chips { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
  .stance-chips input[type="radio"] { display: none; }
  .stance-chips label { cursor: pointer; padding: 12px 20px; border-radius: 99px; border: 2px solid var(--line); font-weight: 700; font-size: 14px; color: var(--ink-soft); transition: .2s; display:inline-flex; align-items:center; gap:6px; background:var(--surface); user-select:none;}
  .stance-chips label:hover { border-color: var(--ink-soft); }
  .stance-chips input[type="radio"]:focus-visible + label { outline: 3px solid var(--emerald); outline-offset: 2px; }

  .stance-chips input[value="pro"]:checked + label { background: #e6f4f1; border-color: var(--pro); color: var(--pro); }
  .stance-chips input[value="con"]:checked + label { background: #fcebe4; border-color: var(--con); color: var(--con); }
  .stance-chips input[value="neutral"]:checked + label { background: var(--ink); border-color: var(--ink); color: #fff; }

  .comment-card { padding:24px; background:var(--card); border:1px solid var(--line); border-radius:16px; margin-bottom:16px; outline:none;}
  .comment-card:focus-visible { box-shadow: 0 0 0 3px rgba(46,179,152,0.2); border-color: var(--emerald); }
  
  .btn-submit { background:var(--emerald-deep);color:#fff;border:none;border-radius:12px;padding:16px 24px;font-size:15px;font-weight:700;cursor:pointer;width:100%;transition:.2s;box-shadow:0 4px 12px rgba(31,143,124,.2); outline:none;}
  .btn-submit:hover, .btn-submit:focus-visible { background:#177063;transform:translateY(-2px);box-shadow:0 8px 24px rgba(31,143,124,.3); }
  .btn-submit:disabled { background: var(--ink-soft); cursor: not-allowed; transform: none; box-shadow: none; opacity: 0.7; }

  /* クールダウンセクション */
  .cooldown{padding:60px 0;min-height:70vh;}
  .cd-hero{text-align:center;max-width:680px;margin:0 auto 40px}
  .paste-card{max-width:680px;margin:0 auto;background:var(--card);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);overflow:hidden}
  .paste-card textarea{width:100%;border:none;outline:none;resize:vertical;min-height:160px;padding:32px;font-family:inherit;font-size:18px;line-height:1.6;background:transparent;color:var(--ink);}
  .paste-card textarea:focus { background: var(--surface); }
  /* 入力欄のプレースホルダー（薄い案内文）も両モードで読める色に */
  .paste-card textarea::placeholder,
  .cform textarea::placeholder { color: var(--ink-soft); opacity: 1; }

  /* トースト通知 */
  .toast-container { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 1000; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
  .toast { background: var(--ink); color: #fff; padding: 12px 24px; border-radius: 99px; font-size: 14px; font-weight: 700; box-shadow: 0 10px 30px rgba(0,0,0,0.2); opacity: 0; transform: translateY(20px); transition: 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
  .toast.show { opacity: 1; transform: translateY(0); }
  .toast.error { background: var(--con); }

  /* ===== Cooldown 拡張 ===== */
  .care-card{background:var(--care-bg);border:1px solid var(--care-border);border-radius:18px;padding:26px;margin-bottom:18px;position:relative;overflow:hidden;}
  .care-step{font-family:monospace;font-size:11px;letter-spacing:.1em;color:var(--calm);font-weight:700;margin-bottom:12px;}
  .care-row{display:flex;align-items:center;gap:14px;margin-bottom:16px;}
  .breathe-dot{width:42px;height:42px;border-radius:50%;background:var(--calm);flex:none;animation:breathe 4s ease-in-out infinite;}
  @keyframes breathe{0%,100%{transform:scale(.82);opacity:.55}50%{transform:scale(1.15);opacity:.95}}
  .care-msg{font-size:16px;line-height:1.7;color:var(--ink);}
  .tone-flags{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px;}
  .tone-flag{font-size:12px;background:var(--chip-bg);border:1px solid var(--chip-border);border-radius:8px;padding:6px 11px;color:var(--ink-soft);}
  .tone-flag b{color:var(--con);font-family:monospace;}
  .care-actions{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap;}
  .stage-divider{display:flex;align-items:center;gap:12px;margin:24px 0 18px;color:var(--ink-soft);font-size:12px;font-family:monospace;}
  .stage-divider::before,.stage-divider::after{content:"";flex:1;height:1px;background:var(--line);}
  .info-stage{display:none;}
  .info-stage.show{display:block;animation:fadeIn .4s ease;}
  .swipe-hint{text-align:center;font-size:12px;color:var(--ink-soft);margin-bottom:10px;font-family:monospace;}
  .swipe-track{display:flex;transition:transform .4s cubic-bezier(.4,1,.4,1);}
  .swipe-slide{min-width:100%;padding:0 2px;box-sizing:border-box;}
  .swipe-dots{display:flex;justify-content:center;gap:8px;margin-top:14px;}
  .sdot{width:8px;height:8px;border-radius:50%;background:var(--line);cursor:pointer;transition:.2s;}
  .sdot.active{background:var(--ink);width:22px;border-radius:99px;}
  .vcard{border-top:4px solid;border-radius:16px;background:var(--surface);border:1px solid var(--line);padding:22px;box-shadow:var(--shadow);}
  .vcard.con{border-top-color:var(--con);}.vcard.pro{border-top-color:var(--pro);}.vcard.neutral{border-top-color:var(--calm);}
  .vcard .vside{font-family:monospace;font-size:11px;letter-spacing:.08em;font-weight:700;}
  .vcard.con .vside{color:var(--con);}.vcard.pro .vside{color:var(--pro);}.vcard.neutral .vside{color:var(--calm);}
  .vcard h4{font-size:17px;margin:8px 0 14px;font-weight:800;line-height:1.4;}
  .vcard ul{margin:0;padding-left:18px;}.vcard li{font-size:14px;margin-bottom:10px;color:var(--ink-soft);line-height:1.6;}
  .vcard .who{margin-top:14px;font-size:12px;color:var(--ink-soft);border-top:1px dashed var(--line);padding-top:11px;}
  .deep{display:none;margin-top:16px;}.deep.show{display:block;animation:fadeIn .4s ease;}
  .gauge-row{display:flex;align-items:center;gap:12px;margin-bottom:12px;}
  .gauge-row .lbl{width:64px;font-size:12px;color:var(--ink-soft);flex:none;}
  .gauge{flex:1;height:9px;background:var(--paper-2);border-radius:99px;overflow:hidden;}
  .gauge i{display:block;height:100%;border-radius:99px;width:0;transition:width 1s cubic-bezier(.4,1,.4,1);}
  .gauge-row .val{font-family:monospace;font-size:12px;width:30px;text-align:right;}
  .bars{display:flex;flex-direction:column;gap:14px;}
  .bar-item .top{display:flex;justify-content:space-between;font-size:13px;margin-bottom:6px;}
  .bar-item .top b{font-family:monospace;}
  .dualbar{height:24px;display:flex;border-radius:7px;overflow:hidden;background:var(--paper-2);}
  .dualbar .c{background:var(--con);height:100%;width:0;transition:width 1s ease;}
  .dualbar .p{background:var(--pro);height:100%;width:0;transition:width 1s ease;}
  .disclaimer{font-size:12px;color:var(--ink-soft);background:var(--paper-2);border:1px dashed var(--line);border-radius:10px;padding:13px 15px;margin-top:16px;}

  /* スケルトン表示（ニュース読み込み中のプレースホルダー） */
  /* 20260712: CLS対策。スケルトンを実カード(.ncard)と同じ構造・高さに揃える。
     旧: サムネ枠が無く、paddingも違うため、実カード描画時に高さが変わりガタついていた
     (CLS 0.391=「悪い」)。サムネ120px + 同じpadding にして、置換時のズレを無くす。 */
  /* 20260712 CLS対策③: 実カードは行数クランプで高さ360px固定になったので、
     スケルトンもぴったり同じ高さにする（1pxでもズレるとCLSが出る）。 */
  .skel-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:0;display:flex;flex-direction:column;overflow:hidden;min-height:360px;}
  .skel-thumb{width:100%;height:120px;background:linear-gradient(90deg,var(--paper-2) 25%,var(--skel-glow) 37%,var(--paper-2) 63%);background-size:400% 100%;animation:skel-shimmer 1.4s ease infinite;}
  .skel-body{padding:20px 24px 24px;display:flex;flex-direction:column;gap:12px;flex:1;}
  .skel-line{height:12px;border-radius:6px;background:linear-gradient(90deg,var(--paper-2) 25%,var(--skel-glow) 37%,var(--paper-2) 63%);background-size:400% 100%;animation:skel-shimmer 1.4s ease infinite;}
  .skel-tag{width:48px;height:20px;border-radius:4px;background:linear-gradient(90deg,var(--paper-2) 25%,var(--skel-glow) 37%,var(--paper-2) 63%);background-size:400% 100%;animation:skel-shimmer 1.4s ease infinite;}
  .skel-title{height:18px;width:90%;}
  .skel-title2{height:18px;width:65%;}
  .skel-text{height:12px;width:100%;}
  .skel-text2{height:12px;width:80%;}
  .skel-foot{height:12px;width:40%;margin-top:6px;}
  @keyframes skel-shimmer{0%{background-position:100% 50%;}100%{background-position:0 50%;}}
  @media (prefers-reduced-motion: reduce){ .skel-line,.skel-tag{animation:none;} }

  /* ダークモード トグルボタン（アイコンのみの正方形） */
  .theme-toggle{padding:8px 12px;min-width:40px;font-size:15px;line-height:1;cursor:pointer;}
  .theme-toggle span{display:inline-block;}
  /* AI分析中バッジ：ダークでは暗い琥珀に調整して読めるように */
  html[data-theme="dark"] .status-badge.syncing{background:#3a3320;color:#e8c97a;border-color:#5a4f2e;}
  @media (prefers-color-scheme: dark){
    html:not([data-theme="light"]):not([data-theme="dark"]) .status-badge.syncing{background:#3a3320;color:#e8c97a;border-color:#5a4f2e;}
  }

  /* ============================================================
     ダーク時の「色が反転して読めない」要素の修正
     原因: --ink を“背景色”に使い文字を白にしている箇所は、
     ダークで --ink が淡色に変わると「淡い背景＋白文字」で消える。
     対象: 最新ニュースボタン / 中立チップ / アクティブなスワイプドット
  ============================================================ */
  /* 「最新ニュース」など濃色ボタン：明るいエメラルドを背景にして暗い文字で固定 */
  html[data-theme="dark"] .btn-solid{background:var(--emerald);color:#0e1c20;}
  html[data-theme="dark"] .btn-solid:hover{background:var(--emerald-deep);}
  /* 中立スタンスのチップ（選択中）：同じく明色背景＋暗文字 */
  html[data-theme="dark"] .stance-chips input[value="neutral"]:checked + label{background:var(--emerald);border-color:var(--emerald);color:#0e1c20;}
  /* アクティブなスワイプドット：背景色なので明色に */
  html[data-theme="dark"] .sdot.active{background:var(--emerald);}
  /* トースト：黒背景前提だが、ダークでは明色面に合わせて文字とのコントラストを確保 */
  html[data-theme="dark"] .toast{background:#1f3a40;color:var(--ink);border:1px solid var(--line);}

  @media (prefers-color-scheme: dark){
    html:not([data-theme="light"]):not([data-theme="dark"]) .btn-solid{background:var(--emerald);color:#0e1c20;}
    html:not([data-theme="light"]):not([data-theme="dark"]) .btn-solid:hover{background:var(--emerald-deep);}
    html:not([data-theme="light"]):not([data-theme="dark"]) .stance-chips input[value="neutral"]:checked + label{background:var(--emerald);border-color:var(--emerald);color:#0e1c20;}
    html:not([data-theme="light"]):not([data-theme="dark"]) .sdot.active{background:var(--emerald);}
    html:not([data-theme="light"]):not([data-theme="dark"]) .toast{background:#1f3a40;color:var(--ink);border:1px solid var(--line);}
  }

  /* ============================================================
     About ページ & フッター
  ============================================================ */
  .nav-bottom .spacer{flex:1}
  .tab-about{color:var(--emerald-deep)!important;font-weight:800;}

  .about-wrap{max-width:760px;margin:0 auto;padding-top:32px;padding-bottom:64px;}
  .about-head{margin-bottom:40px;}
  .about-kicker{font-size:13px;font-weight:800;letter-spacing:.14em;color:var(--calm);margin-bottom:12px;}
  .about-head h1{font-size:34px;font-weight:800;margin:0 0 20px;line-height:1.3;color:var(--ink);}
  .about-lead{font-size:16.5px;line-height:1.9;color:var(--ink-soft);margin:0;}

  .about-sec{margin-bottom:36px;padding-bottom:36px;border-bottom:1px solid var(--line);}
  .about-sec:last-child{border-bottom:none;}
  .about-sec h2{font-size:20px;font-weight:800;margin:0 0 16px;color:var(--ink);display:flex;align-items:center;gap:10px;}
  .about-sec h2::before{content:"";display:block;width:6px;height:20px;border-radius:3px;background:var(--emerald-deep);flex-shrink:0;}
  .about-sec p{font-size:15.5px;line-height:1.9;color:var(--ink);margin:0 0 14px;}
  .about-sec p:last-child{margin-bottom:0;}
  .about-note{font-size:13.5px!important;line-height:1.8!important;color:var(--ink-soft)!important;background:var(--paper);border-left:3px solid var(--line);border-radius:0 10px 10px 0;padding:14px 16px;margin-top:16px!important;}

  .about-list{list-style:none;margin:0 0 14px;padding:0;}
  .about-list li{padding:14px 18px;background:var(--paper);border:1px solid var(--line);border-radius:12px;margin-bottom:10px;font-size:15px;line-height:1.7;}
  .about-list li b{display:block;color:var(--ink);font-weight:800;margin-bottom:2px;}
  .about-list li span{display:block;color:var(--ink-soft);font-size:13.5px;}

  .about-closing .about-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px;}
  .about-closing .btn-solid,.about-closing .btn-outline{padding:14px 26px;font-size:15px;border-radius:99px;}

  .site-footer{border-top:1px solid var(--line);background:var(--card);margin-top:40px;}
  .footer-inner{padding:32px 32px;display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px;}
  .footer-brand{display:flex;flex-direction:column;gap:4px;}
  .footer-brand .name{font-size:18px;font-weight:800;color:var(--ink);}
  .footer-brand .name b{color:var(--emerald-deep);}
  .footer-tag{font-size:12.5px;color:var(--ink-soft);}
  .footer-links{display:flex;gap:20px;flex:1;flex-wrap:wrap;}
  .footer-links button,.footer-links a{background:none;border:none;font-family:inherit;font-size:14px;font-weight:700;color:var(--ink-soft);cursor:pointer;padding:4px 0;transition:.2s;text-decoration:none;}
  .footer-links button:hover,.footer-links a:hover{color:var(--emerald-deep);}
  .footer-fine{font-size:12px;color:var(--ink-soft);width:100%;padding-top:8px;border-top:1px dashed var(--line);}

  @media(max-width:768px){
    .about-head h1{font-size:27px;}
    .about-lead{font-size:15.5px;}
    .footer-inner{padding:28px 16px;}
    .footer-links{width:100%;flex:none;}
  }

  /* ============================================================
     検索バー
  ============================================================ */
  .search-bar-wrap{background:var(--card);border-bottom:1px solid var(--line);}
  .search-bar{display:flex;align-items:center;gap:10px;padding:12px 32px;}
  .search-ic{color:var(--ink-soft);display:flex;flex-shrink:0;}
  #searchInput{flex:1;border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:99px;padding:10px 16px;font-size:14px;font-family:inherit;outline:none;transition:.2s;min-width:0;}
  /* ブラウザ純正のクリアボタン(✕)を消して、自作ボタンだけ残す（✕の二重表示を防ぐ） */
  #searchInput::-webkit-search-cancel-button,#searchInput::-webkit-search-decoration{-webkit-appearance:none;appearance:none;display:none;}
  #searchInput{-moz-appearance:textfield;}
  #searchInput:focus{border-color:var(--emerald-deep);background:var(--surface);box-shadow:0 0 0 3px rgba(46,179,152,0.1);}
  #searchInput::placeholder{color:var(--ink-soft);opacity:1;}
  .search-clear{background:var(--ink-soft);border:none;width:32px;height:32px;border-radius:50%;color:#fff;font-size:13px;cursor:pointer;flex-shrink:0;transition:.2s;display:none;align-items:center;justify-content:center;}
  .search-clear.show{display:flex;}
  .search-clear:hover{background:var(--ink);}
  @media(max-width:768px){
    .search-bar{padding:10px 16px;}
    #searchInput{font-size:16px;}
    /* 20260703d: ピンチズーム解禁(viewport変更)に伴い、16px未満の入力欄は
       iOSでフォーカス時に画面が自動ズームして戻らないため、モバイルのみ16pxへ */
    .cform textarea{font-size:16px;}
    .date-picker{font-size:16px;padding:4px 12px;}
  }

  /* About 連絡先 */
  .about-contact{display:flex;flex-direction:column;gap:4px;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin:16px 0 0!important;}
  .about-contact span{font-size:12.5px;font-weight:800;color:var(--ink-soft);letter-spacing:.04em;}
  .about-contact a{font-size:16px;font-weight:800;color:var(--emerald-deep);text-decoration:none;word-break:break-all;}
  .about-contact a:hover{text-decoration:underline;}

  /* ===== 日付切替バー（今日/昨日/カレンダー） ===== */
  .date-bar{display:flex;align-items:center;gap:8px;padding:0 32px 12px;flex-wrap:wrap;}
  .date-chip{border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:999px;padding:6px 14px;font-size:12.5px;font-weight:700;font-family:inherit;cursor:pointer;transition:.2s;}
  .date-chip:hover{border-color:var(--emerald-deep);}
  .date-chip.active{background:var(--emerald-deep);border-color:var(--emerald-deep);color:#fff;}
  .date-picker{border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:999px;padding:5px 12px;font-size:12.5px;font-weight:700;font-family:inherit;cursor:pointer;transition:.2s;outline:none;}
  .date-picker:hover,.date-picker:focus{border-color:var(--emerald-deep);}
  .date-mode-note{font-size:12px;font-weight:700;color:var(--emerald-deep);}
  html[data-theme="dark"] .date-chip.active{background:var(--emerald);border-color:var(--emerald);color:#0e1c20;}
  html[data-theme="dark"] .date-picker{color-scheme:dark;}
  html[data-theme="dark"] .date-mode-note{color:var(--emerald);}
  @media (prefers-color-scheme: dark){
    html:not([data-theme="light"]):not([data-theme="dark"]) .date-chip.active{background:var(--emerald);border-color:var(--emerald);color:#0e1c20;}
    html:not([data-theme="light"]):not([data-theme="dark"]) .date-picker{color-scheme:dark;}
    html:not([data-theme="light"]):not([data-theme="dark"]) .date-mode-note{color:var(--emerald);}
  }
  @media(max-width:768px){
    .date-bar{padding:0 16px 10px;}
  }

  /* --- 20260707: Cooldown 相手役チップ（ケア文の話し方を選ぶ） --- */
  .cd-roles{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:14px 24px 0;}
  .cd-roles .cd-roles-label{font-size:12px;color:var(--ink-soft);font-weight:700;margin-right:2px;}
  .cd-role{
    display:inline-flex;align-items:center;gap:6px;
    border:1px solid var(--line);background:var(--surface);
    border-radius:99px;padding:7px 14px;font-size:13px;font-weight:700;
    color:var(--ink-soft);cursor:pointer;transition:.18s;line-height:1;
  }
  .cd-role:hover{color:var(--ink);border-color:var(--calm);}
  .cd-role .cd-role-emoji{font-size:14px;}
  .cd-role.active{
    background:var(--calm);border-color:var(--calm);color:#fff;
    box-shadow:0 2px 8px rgba(90,138,156,.28);
  }
  .cd-role.active .cd-role-emoji{filter:none;}
  .cd-role:focus-visible{outline:2px solid var(--calm);outline-offset:2px;}
  @media(max-width:768px){
    .cd-roles{padding:12px 16px 0;gap:6px;}
    .cd-role{padding:6px 11px;font-size:12px;}
  }

  /* --- 20260707: Cooldown STEP1.5「手放す」（吐き出し→意見への橋） --- */
  .release-card{
    max-width:680px;margin:0 auto 18px;background:var(--surface);
    border:1px solid var(--line);border-radius:16px;padding:24px;
    position:relative;overflow:hidden;
  }
  .release-lead{font-size:14px;color:var(--ink-soft);line-height:1.8;margin:10px 0 16px;}
  .release-input{
    width:100%;min-height:96px;box-sizing:border-box;resize:vertical;
    border:1px solid var(--line);border-radius:12px;padding:14px 16px;
    background:var(--paper);color:var(--ink);font-size:15px;line-height:1.7;
    font-family:inherit;transition:.2s;
  }
  .release-input:focus{outline:none;border-color:var(--calm);}
  .release-actions{display:flex;align-items:center;gap:16px;margin-top:14px;flex-wrap:wrap;}
  .btn-release{
    background:var(--calm);color:#fff;border:0;border-radius:99px;
    padding:12px 24px;font-size:14px;font-weight:700;cursor:pointer;transition:.2s;
    display:inline-flex;align-items:center;gap:8px;
  }
  .btn-release:hover{filter:brightness(1.06);}
  .btn-release:disabled{opacity:.5;cursor:default;}
  .btn-release i{font-style:normal;font-size:16px;}
  .release-skip{font-size:13px;color:var(--ink-soft);cursor:pointer;text-decoration:underline;text-underline-offset:3px;}
  .release-skip:hover{color:var(--ink);}
  /* 封印アニメ：封筒 */
  .release-envelope{
    display:none;width:120px;height:80px;margin:8px auto 4px;position:relative;
  }
  .release-envelope.show{display:block;animation:envIn .5s ease both;}
  .env-body{position:absolute;inset:0;background:var(--paper-2);border:2px solid var(--calm);border-radius:8px;}
  .env-flap{position:absolute;top:0;left:0;right:0;height:44px;background:var(--calm);
    clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top;animation:flapClose .5s .25s ease both;}
  .env-seal{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%) scale(0);
    width:26px;height:26px;border-radius:50%;background:var(--emerald-deep);color:#fff;
    display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;
    animation:sealPop .35s .7s ease both;}
  @keyframes envIn{from{opacity:0;transform:translateY(6px) scale(.96)}to{opacity:1;transform:none}}
  @keyframes flapClose{from{transform:rotateX(-140deg)}to{transform:rotateX(0)}}
  @keyframes sealPop{from{transform:translate(-50%,-50%) scale(0)}to{transform:translate(-50%,-50%) scale(1)}}
  /* 手放したあとの橋 */
  .release-bridge{display:none;text-align:center;padding:8px 0 2px;}
  .release-bridge.show{display:block;animation:bridgeIn .5s .3s ease both;}
  .bridge-msg{font-size:16px;line-height:1.9;color:var(--ink);margin-bottom:8px;}
  .bridge-msg b{color:var(--calm);}
  .bridge-sub{font-size:13px;color:var(--ink-soft);line-height:1.7;margin-bottom:16px;}
  @keyframes bridgeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  @media(max-width:768px){
    .release-card{padding:18px;border-radius:12px;}
  }

/* [独立版] 単体表示用の微調整 */
body { margin: 0; }
#viewCooldown { display: block !important; }
.hidden { display: block !important; }

/* ============================================================
   Web公開版フッター（20260716）— 本体CalmFilterへの導線
   ・単体HTMLに追記した cd-webfoot 用。既存カラー変数を流用し
     ダーク/ライト両対応。拡張(cooldown.html)側には無い要素なので
     このブロックが余分に読まれても他画面に影響しない。
============================================================ */
.cd-webfoot{
  max-width:680px;margin:56px auto 24px;padding:28px 24px 8px;
  border-top:1px solid var(--line);text-align:center;
}
.cd-webfoot-lead{font-size:15px;color:var(--ink);margin:0 0 18px;line-height:1.7;}
.cd-webfoot-lead b{color:var(--emerald-deep);}
.cd-webfoot-links{margin:0 0 20px;}
.cd-webfoot-links a{
  display:inline-block;font-size:15px;font-weight:700;
  color:var(--emerald-deep);text-decoration:none;
  padding:10px 20px;border:1px solid var(--emerald-deep);border-radius:10px;
  transition:background .15s,color .15s;
}
.cd-webfoot-links a:hover{background:var(--emerald-deep);color:#fff;}
.cd-webfoot-note{font-size:12px;color:var(--ink-soft);line-height:1.7;margin:0;}