/* Megru viewer — 案1 SuperFlow風(白カード)。絵文字不使用・自前SVGアイコン */
:root{
  --bg:#f7f6f3; --card:#fff; --ink:#222; --sub:#8a8880; --line:#eceae5;
  --s:#c0392b; --a:#b8860b; --link:#2668c5; --fold:#efede8;
  --on-ink:#fff; --chip:#f1f0ec; --chip-ink:#666; --t1:#333; --t2:#555; --t3:#444; --t4:#777; --border:#ddd;
  --soft:#f7f6f2; --th:#f4f2ee; --grid:#e3e0d9; --rule:#d9d6cf; --strong:#1a1a1a; --shadow:rgba(0,0,0,.07);
  --good-bg:#eaf4ec; --good-bd:#3e7d4f; --good-ink:#2c6a3d;
  --rd-bg:#fff3e6; --rd-bd:#f2b477; --rd-ink:#b85c00; --rd-press:#ffe3c4;
  --mm-cap:rgba(232,230,224,.97);   /* 目次の縮図の下地 */
}
/* 暗い配色(設定で「暗い」、または「本体に合わせる」で本体がダークモードの時。html[data-theme] は index.html の先頭で決める) */
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#111214; --card:#1c1d20; --ink:#ecebe8; --sub:#96938b; --line:#2b2c30;
  --s:#e0564a; --a:#d4a53a; --link:#79a8f0; --fold:#222327;
  --on-ink:#16171a; --chip:#2a2b2f; --chip-ink:#b3b0a8; --t1:#d8d6d1; --t2:#bcb9b2; --t3:#cbc8c1; --t4:#9d9a92; --border:#3a3b40;
  --soft:#25262a; --th:#26272b; --grid:#393a3f; --rule:#4a4b50; --strong:#f4f3f0; --shadow:rgba(0,0,0,.45);
  --good-bg:#1d3326; --good-bd:#5aa874; --good-ink:#93d6a8;
  --rd-bg:#35271a; --rd-bd:#a8692c; --rd-ink:#f4a65a; --rd-press:#46321d;
  --mm-cap:rgba(52,53,58,.95);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{height:100%}
body{font-family:"Hiragino Sans","Yu Gothic UI","Noto Sans JP",sans-serif;
     background:var(--bg);color:var(--ink);min-height:100%;
     padding-bottom:env(safe-area-inset-bottom)}
button{font:inherit;background:none;border:none;color:inherit;cursor:pointer}
a{color:var(--link);text-decoration:none}
svg{width:20px;height:20px;display:block}

/* header */
.hd{position:fixed;top:0;left:0;right:0;z-index:10;background:var(--card);   /* 固定(sticky は iOS で JS スクロールのたびにずれてチカッとした) */
   
    border-bottom:1px solid var(--line);padding:10px 14px 0;
    padding-top:calc(10px + env(safe-area-inset-top))}
.hd-row{display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:baseline;gap:8px;min-width:0}
.logo{width:19px;height:19px;align-self:center;flex:none}
.brand-name{font-size:17px;font-weight:800;letter-spacing:.3px;align-self:center;display:flex}
/* ワードマーク(u の右上に点。design/wordmark_megru_udot.jpg、2026-09-22 決定・9/25 khamada「アルファベット部分だけあれに」)。
   図案の画像を型にして文字色で塗る(暗い画面でも色が変わる)。ベクター化はストア用の書き出しの時に */
.brand-name .wm{display:block;height:21px;aspect-ratio:3.159;background:currentColor;
  -webkit-mask:url(icons/wordmark.png) center/contain no-repeat;mask:url(icons/wordmark.png) center/contain no-repeat}
.hd-sub{font-size:11px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.icon-btn{padding:8px;margin:-6px;color:var(--t2);display:block;position:relative}
.icon-btn.dot::after{content:"";position:absolute;top:5px;right:5px;width:7px;height:7px;border-radius:50%;background:#e8843c}   /* ノートへの提案が届いている */
.hd-actions{display:flex;gap:10px}
.tabs{display:flex;gap:8px;overflow-x:auto;padding:10px 2px;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:none;font-size:12.5px;padding:6px 13px;border-radius:999px;
     background:var(--chip);color:var(--chip-ink);white-space:nowrap}
.tab.on{background:var(--ink);color:var(--on-ink)}

/* feed */
main{padding:12px 12px 130px;max-width:640px;margin:var(--hd-h, calc(96px + env(safe-area-inset-top))) auto 0;position:relative;overflow-x:clip;touch-action:pan-y}   /* 下はダイアルの分を空ける(末尾の記事がダイアルの上まで来られる) */
.page{will-change:transform}
.page-side{position:absolute;left:0;right:0;padding:12px 12px 0;overflow:hidden;pointer-events:none;will-change:transform}
html,body{overscroll-behavior:none;touch-action:manipulation}   /* ダブルタップ拡大を無効に(スクロール中も CSS なので素通りしない) */
/* 左下の目次: 一覧全体を縮めた点の年表(記事1件=点1つ、今見ている辺りを魚眼で拡大、画面中央の記事はオレンジの大きい点)。
   普段は薄い灰色の細長い縮図、タップで広がる。デザインは 2026-09-24 に試作 7 案から khamada が「C細」を選定 */
.mm{position:fixed;left:0;top:52%;height:35.5%;width:44px;   /* 親指の届く範囲(画面の 52〜87.5%)。vh はホーム画面アプリで実寸とずれたので % */
  z-index:15;touch-action:none;-webkit-tap-highlight-color:transparent;pointer-events:none;
  border-radius:0 30px 30px 0;background:var(--mm-cap);box-shadow:0 1px 6px var(--shadow);
  transform:scale(.47);transition:transform .26s cubic-bezier(.2,.7,.3,1),background .2s,box-shadow .2s,border-radius .26s}
.mm.open{transform:none;pointer-events:auto;background:var(--card);box-shadow:0 2px 12px var(--shadow);border-radius:0 14px 14px 0}   /* タップで広がる */
.mm[hidden]{display:none}
.mm svg{width:100%;height:100%;display:block;overflow:visible}
.mm .spine{stroke:var(--line);stroke-width:2;stroke-linecap:round}
.mm line.t{stroke:var(--ink);opacity:.65;stroke-linecap:round}
.mm line.t.read{stroke:var(--sub);opacity:.35}
.mm line.t.focus{stroke:#f28c3a;opacity:1}
.mm-hit{position:fixed;z-index:15;touch-action:none;-webkit-tap-highlight-color:transparent}
.mm-hit.off,.mm-hit[hidden]{pointer-events:none}
.mm-hit[hidden]{display:none}
.mm-tip{position:fixed;z-index:16;transform:translateY(-50%);max-width:calc(100vw - 150px);background:rgba(34,34,34,.86);color:#fff;
  font-size:12px;line-height:1.45;font-weight:600;padding:7px 10px;border-radius:10px;pointer-events:none}
.mm-tip span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mm-tip[hidden]{display:none}
/* 記事→一覧: 画面左端から右へ引くと現れる半円(指に追従、引き切ると戻る) */
.edge-back{position:fixed;left:0;top:40%;width:112px;height:112px;border-radius:50%;background:rgba(34,34,34,.55);color:#fff;
  transform:translateX(-112px);opacity:0;display:flex;align-items:center;justify-content:flex-end;padding-right:13px;
  box-sizing:border-box;font-size:11px;line-height:1.35;text-align:center;white-space:pre-line;pointer-events:none;z-index:30;
  will-change:transform,opacity}
.day{font-size:12px;color:var(--sub);font-weight:700;margin:14px 4px 8px}
.day:first-child{margin-top:2px}
.card{background:var(--card);border-radius:14px;padding:14px;margin-bottom:10px;
      box-shadow:0 1px 4px var(--shadow)}
.card-top{display:flex;align-items:center;gap:7px;min-width:0}
.gr{font-size:11px;font-weight:700;padding:2px 8px;border-radius:6px;color:#fff;flex:none}
.gr-S{background:var(--s)} .gr-A{background:var(--a)}
.gr-B,.gr-C{background:#a9a69e}
.src{font-size:11px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tt{font-size:14.5px;font-weight:700;line-height:1.45;margin:7px 0 5px;overflow-wrap:anywhere}
.sm{font-size:12.5px;color:var(--t2);line-height:1.55;overflow-wrap:anywhere;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sm.muted{color:#a09d95;font-style:normal}
.card-ft{display:flex;justify-content:space-between;align-items:center;margin-top:10px}
.fb{display:flex;gap:8px}
.fb-btn{display:flex;align-items:center;gap:5px;border:1px solid var(--border);border-radius:999px;
        padding:5px 14px;color:var(--t4)}
.fb-btn svg{width:15px;height:15px}
.fb-btn.on-good{background:var(--good-bg);border-color:var(--good-bd);color:var(--good-ink)}
.read-btn{display:flex;justify-content:center;align-items:center;gap:8px;width:100%;margin-top:14px;
  padding:14px 0;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;
  background:var(--rd-bg);border:1.5px solid var(--rd-bd);color:var(--rd-ink);-webkit-tap-highlight-color:transparent}
.read-btn svg{width:18px;height:18px}
.read-btn:active{background:var(--rd-press)}
.read-btn.on{background:#f28c3a;border-color:#f28c3a;color:#fff}
.read-log{font-size:12px;color:var(--rd-ink);line-height:1.7;margin-bottom:10px}
.read-mark{font-size:11px;color:var(--rd-ink);white-space:nowrap;margin-left:auto;flex:none}
.card.read{opacity:.55}
.lk{display:flex;align-items:center;gap:4px;font-size:12px}
.lk svg{width:13px;height:13px}

/* 学会・イベント予定 */
.ev{background:var(--card);border-radius:14px;padding:12px 14px;margin-bottom:12px;
    box-shadow:0 1px 4px var(--shadow);border-left:4px solid var(--rule)}
.ev-hd{font-size:11.5px;font-weight:700;color:var(--sub);letter-spacing:.5px;margin-bottom:6px}
.ev-row{display:flex;align-items:baseline;gap:8px;padding:5px 0;border-top:1px solid var(--line);
        color:var(--ink);font-size:12.5px}
.ev-row:first-of-type{border-top:none}
.ev-date{flex:none;font-weight:700;min-width:64px;color:var(--t3)}
.ev-name{flex:1;min-width:0;overflow-wrap:anywhere;line-height:1.4}
.ev-left{flex:none;font-size:11px;color:var(--sub)}

/* B/C fold */
.fold{background:var(--fold);border-radius:12px;padding:12px 14px;font-size:13px;color:var(--chip-ink);
      display:flex;justify-content:space-between;align-items:center;width:100%;text-align:left}
.fold svg{width:16px;height:16px;transition:transform .15s}
.fold.open svg{transform:rotate(180deg)}
.rows{margin-top:6px}
.row-item{display:flex;gap:10px;background:var(--card);border-bottom:1px solid var(--line);
          padding:10px 12px;width:100%;text-align:left;align-items:flex-start}
.row-item:first-child{border-radius:12px 12px 0 0}
.row-item:last-child{border-radius:0 0 12px 12px;border-bottom:none}
.row-gr{font-size:11px;font-weight:700;flex:none;margin-top:2px}
.row-gr.g-B{color:#7f8c8d}.row-gr.g-C{color:#b0ada5}
.row-tt{font-size:13px;line-height:1.4;overflow-wrap:anywhere;color:var(--t3)}
.row-src{font-size:11px;color:var(--sub);margin-top:3px}

/* detail */
.dt-hd{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.dt-hd .icon-btn{color:var(--t3)}
.dt{background:var(--card);border-radius:14px;padding:16px;box-shadow:0 1px 4px var(--shadow)}
.dt .tt{font-size:16px;margin:8px 0 2px}
.dt .ot{font-size:12px;color:var(--sub);line-height:1.4;overflow-wrap:anywhere}
.dt h3{font-size:13px;margin:16px 0 4px;padding-left:8px;border-left:3px solid var(--rule)}
.dt p{font-size:13.5px;line-height:1.7;overflow-wrap:anywhere;color:var(--t1)}
.dt ul{margin:2px 0 2px 20px}
.dt li{font-size:13.5px;line-height:1.65;overflow-wrap:anywhere;color:var(--t1)}
.dt .reason{font-size:12.5px;color:var(--chip-ink);background:var(--soft);border-radius:8px;
            padding:9px 11px;margin-top:10px;line-height:1.55}
.dt strong,.dg strong{font-weight:700;color:var(--strong)}
.dt figure{margin:8px 0}
.dt figure img{width:100%;border-radius:10px;display:block;background:var(--th)}
.dt figcaption{font-size:11.5px;color:var(--t4);margin-top:3px;line-height:1.4}
.dt table,.dg table{border-collapse:collapse;width:100%;margin:6px 0 4px;font-size:12px}
.dt th,.dt td,.dg th,.dg td{border:1px solid var(--grid);padding:5px 7px;text-align:left;
                            vertical-align:top;overflow-wrap:anywhere;line-height:1.45}
.dt th,.dg th{background:var(--th);font-weight:700}
.dt-actions{display:flex;justify-content:space-between;align-items:center;margin-top:14px}
.btn-open{display:inline-flex;align-items:center;gap:6px;background:var(--ink);color:var(--on-ink);
          border-radius:999px;padding:8px 16px;font-size:13px}
.btn-open svg{width:14px;height:14px}
.basis{font-size:11px;color:var(--sub);margin-top:12px}

/* search */
.search-bar{display:flex;gap:8px;align-items:center;background:var(--card);border-radius:12px;
            padding:10px 12px;box-shadow:0 1px 4px var(--shadow);margin-bottom:12px}
.search-bar svg{width:16px;height:16px;color:#999;flex:none}
.search-bar input{border:none;outline:none;font:inherit;font-size:14px;width:100%;background:none;color:inherit}
.filters{display:flex;gap:6px;margin-bottom:12px;overflow-x:auto;scrollbar-width:none}
.filters::-webkit-scrollbar{display:none}
.fchip{flex:none;font-size:11.5px;padding:4px 11px;border-radius:999px;background:var(--chip);color:var(--chip-ink)}
.fchip.on{background:#555;color:#fff}
.hint{font-size:12px;color:var(--sub);text-align:center;padding:24px 0}
.hint-sub{font-size:11px;color:#aaa;margin:8px 0 14px;word-break:break-all}
.hint-btn{margin:12px auto 0}

/* digest */
.dg-dates{display:flex;gap:6px;margin-bottom:12px;overflow-x:auto;scrollbar-width:none}
.dg-dates::-webkit-scrollbar{display:none}
.dg{background:var(--card);border-radius:14px;padding:16px;box-shadow:0 1px 4px var(--shadow)}
.dg h2{font-size:15px;margin-bottom:6px}
.dg h3{font-size:13px;margin:14px 0 4px;padding-left:8px;border-left:3px solid var(--rule)}
.dg p{font-size:13px;line-height:1.65;overflow-wrap:anywhere;color:var(--t1)}
.dg ul{margin:2px 0 2px 18px}
.dg li{font-size:13px;line-height:1.6;overflow-wrap:anywhere;color:var(--t1)}
.dg li:not(.sub){margin-top:16px;font-size:14px;font-weight:600;line-height:1.5;color:var(--ink)}   /* 記事の題名: 間隔を広げ読みやすく */
.dg li:not(.sub):first-child{margin-top:8px}
.dg li.sub{list-style:none;color:var(--chip-ink);font-size:12.5px;margin-top:3px}
.dg h2{margin-top:22px}
.dg h2:first-child{margin-top:0}

/* toast */
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));
       transform:translateX(-50%) translateY(20px);background:#333;color:#fff;
       font-size:12.5px;padding:9px 18px;border-radius:999px;opacity:0;
       pointer-events:none;transition:all .25s;white-space:nowrap;z-index:20}
.toast.show{opacity:1;transform:translateX(-50%)}

/* 設定シート(右上の三本線から。表示の明るさなど) */
.sheet-wrap{position:fixed;inset:0;z-index:40;background:rgba(0,0,0,0);transition:background .2s;pointer-events:none}
.sheet-wrap.on{background:rgba(0,0,0,.35);pointer-events:auto}
.sheet-card{position:absolute;left:0;right:0;bottom:0;background:var(--card);color:var(--ink);border-radius:18px 18px 0 0;
  padding:14px 18px calc(22px + env(safe-area-inset-bottom));transform:translateY(105%);transition:transform .25s cubic-bezier(.2,.7,.3,1);
  box-shadow:0 -4px 20px rgba(0,0,0,.15)}
.sheet-wrap.on .sheet-card{transform:none}
.sheet-grip{width:38px;height:4px;border-radius:2px;background:var(--border);margin:0 auto 12px}
.sheet-title{font-size:15px;font-weight:800;margin-bottom:14px}
.set-row{margin-bottom:16px}
.set-name{font-size:12px;color:var(--sub);font-weight:700;margin-bottom:8px}
.seg{display:flex;background:var(--chip);border-radius:12px;padding:3px;gap:3px}
.seg button{flex:1;padding:9px 0;border-radius:9px;font-size:13px;color:var(--chip-ink)}
.seg button.on{background:var(--card);color:var(--ink);font-weight:700;box-shadow:0 1px 3px var(--shadow)}
.acct-list{display:flex;flex-direction:column;gap:6px;margin:6px 0 8px}.acct{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;padding:11px 14px;border-radius:10px;background:var(--chip);color:var(--chip-ink);font-size:14px;text-align:left}.acct.on{outline:1.5px solid var(--ink)}.acct-mail{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.acct-state{flex:none;font-size:12px;color:var(--sub)}.acct.on .acct-state{color:var(--ink);font-weight:700}.acct-acts{display:flex;flex-direction:column;gap:8px}.acct-acts[hidden]{display:none}.link-btn{background:none;border:0;padding:4px 2px;font-size:12px;color:var(--sub);text-align:left;text-decoration:underline}
.set-ask{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.set-ask .set-note{flex-basis:100%;margin:0 0 2px}.set-ask .add-btn{min-height:40px}.set-row button[hidden]{display:none}
.set-note{font-size:11px;color:var(--sub);margin-top:6px;line-height:1.5}


/* 試作 D: フィードの縦スクロールを自前で行う時は、ブラウザ自身のスクロールを止め、一覧(main)を GPU でずらす */
html.vscroll,html.vscroll body{overflow:hidden;height:100%}
html.vscroll main{will-change:transform}
/* 画面の切り替え: ページ自体はぼかさず、上に薄いすりガラスの幕を重ねる(ページ全体にぼかしをかけると
   Dive の奥行き〔3D〕が平らに描かれ、奥の記事が大きく映った。2026-09-24 khamada)。
   押した瞬間に幕が降り(.veil.on)、次の画面は幕がかかった状態から晴れる(html.entering::after) */
.veil{position:fixed;inset:0;z-index:9999;pointer-events:none;background:rgba(247,246,243,.5);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);opacity:0;transition:opacity .4s ease}
.veil.on{opacity:1}
html.entering::after{content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;background:rgba(247,246,243,.5);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);animation:veil-out .55s ease .05s both}
@keyframes veil-out{from{opacity:1}to{opacity:0}}
:root[data-theme="dark"] .veil,:root[data-theme="dark"].entering::after{background:rgba(17,18,20,.5)}
/* 記事を送る(V4): 上から降りるシート(下からだとキーボードに隠れる) */
.sheet-wrap.top .sheet-card{top:0;bottom:auto;border-radius:0 0 18px 18px;padding:calc(14px + env(safe-area-inset-top)) 18px 16px;
  transform:translateY(-105%);box-shadow:0 4px 20px rgba(0,0,0,.15)}
.sheet-wrap.top.on .sheet-card{transform:none}
.add-row{display:flex;gap:8px}
.add-in{flex:1;min-width:0;font-size:16px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--bg);color:var(--ink);outline:none}
.add-btn{flex:none;padding:0 14px;border-radius:10px;font-size:14px;font-weight:700;background:var(--chip);color:var(--chip-ink)}
.add-btn.primary{background:var(--ink);color:var(--card)}
.add-list{margin-top:12px;max-height:45vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
.add-item{display:flex;align-items:baseline;gap:10px;padding:10px 0;border-top:1px solid var(--border);font-size:13px}
.add-item .d{flex:none;color:var(--sub);font-size:11px;font-variant-numeric:tabular-nums}
.add-item .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.add-item .s{flex:none;color:var(--sub);font-size:12px}
.add-item.done{cursor:pointer}
.add-item.done .s{color:var(--ink);font-weight:700}
.add-item.failed .s{max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* タブの長押し・情報源の一覧・並び替え・送るシートのタブ選択(2026-09-25) */
.tab{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.sheet-card.tall{max-height:82vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
.set-name.gap{margin-top:14px}
.add-btn.wide{width:100%;padding:11px 14px;text-align:left}
.add-area{width:100%;resize:none;line-height:1.5;font-family:inherit}
.hidden{display:none!important}
.chips{display:flex;gap:6px;overflow-x:auto;padding:2px 0 8px;-webkit-overflow-scrolling:touch}
.chip{flex:none;padding:7px 12px;border-radius:999px;font-size:13px;background:var(--chip);color:var(--chip-ink);white-space:nowrap}
.chip.on{background:var(--ink);color:var(--card);font-weight:700}
.src-list{margin-top:6px}
.srow{position:relative;overflow:hidden;border-top:1px solid var(--border);transition:max-height .25s,opacity .25s;max-height:120px}
.srow.gone{max-height:0;opacity:0}
.srow-del{position:absolute;right:0;top:0;bottom:0;width:84px;background:#e5484d;color:#fff;font-weight:700;font-size:14px}
.srow-body{position:relative;background:var(--card);touch-action:pan-y}
.src-line{display:flex;align-items:center;gap:12px;padding:11px 2px}
.src-txt{flex:1;min-width:0}
.src-name{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.src-host{font-size:11px;color:var(--sub);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.src-gone{margin-top:14px;font-size:13px;color:var(--sub)}
.src-gone summary{padding:8px 0}
.switch{flex:none;position:relative;width:48px;height:29px;border-radius:15px;background:var(--border);transition:background .2s}
.switch .knob{position:absolute;left:2px;top:2px;width:25px;height:25px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s}
.switch.on{background:#34c759}
.switch.on .knob{transform:translateX(19px)}
.ord-list{margin-top:8px}
.ord-line{display:flex;align-items:center;padding:12px 2px}
.ord-name{flex:1;font-size:15px}
.ord-handle{flex:none;width:40px;text-align:center;font-size:20px;color:var(--sub);touch-action:none}
.srow.dragging{z-index:2;box-shadow:0 6px 18px rgba(0,0,0,.18);transition:none}
.srow.dragging .srow-body{background:var(--card)}
.chips{scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.add-row .add-btn{min-height:42px}
.send-row{margin-top:4px}
.send-row .primary{flex:1}
.sheet-wrap.top .add-area{margin-bottom:10px}
.purge-btn{flex:none;font-size:12px;color:#e5484d;padding:8px 4px}
.purge-btn.armed{font-weight:700}
/* 作成中の帯(画面の最上段=ヘッダーのさらに上、左右いっぱい。B「巡り合う点」2026-09-25) */
.pbar{display:flex;align-items:center;gap:10px;width:calc(100% + 28px);margin:-10px -14px 10px;padding:0 16px;height:0;opacity:0;overflow:hidden;
      background:var(--chip);font-size:14px;color:var(--t2);text-align:left;border-bottom:1px solid transparent;
      transition:height .38s cubic-bezier(.2,.7,.3,1),opacity .3s,filter .45s,border-color .3s}
.pbar.on{height:46px;opacity:1;border-bottom-color:var(--line)}
.pbar.leaving{opacity:0;filter:blur(6px);height:0;transition:height .5s .25s cubic-bezier(.4,0,.2,1),opacity .45s,filter .45s}
.pbar svg{flex:none;width:30px;height:30px;color:var(--ink)}
.pbar .n{color:var(--ink);font-weight:700}
.pbar .chev{margin-left:auto;color:var(--sub);font-size:17px}
.deep-btn{display:block;width:100%;margin:10px 0 0;padding:12px;border-radius:12px;font-size:14px;font-weight:700;
          background:var(--chip);color:var(--ink)}
.deep-btn:disabled{opacity:.7}
.dt h4{font-size:12.5px;margin:12px 0 3px;color:var(--t2)}
/* ログインの画面(docs/auth_design.md)。Google のボタンは Google の決まり(白地・灰色の枠・4 色の G・「Google で続ける」)に合わせる */
.login-page{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px 16px}
.login{width:100%;max-width:340px;display:flex;flex-direction:column;align-items:center;gap:18px}
.login-logo{width:72px;height:72px;color:var(--ink)}
.login-wm{color:var(--ink);margin-bottom:10px}.login-wm .wm{height:30px}
.login-msg{width:100%;font-size:13px;line-height:1.6;color:var(--ink);background:var(--chip);border-radius:10px;padding:10px 12px}
.login-msg[hidden]{display:none}
.gbtn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:46px;border-radius:23px;background:#fff;color:#1f1f1f;
  border:1px solid #747775;font-size:15px;font-weight:500;text-decoration:none}
.gbtn svg{width:20px;height:20px}.gbtn.busy{opacity:.6;pointer-events:none}
:root[data-theme="dark"] .gbtn{background:#131314;color:#e3e3e3;border-color:#8e918f}
/* 2 段階目(本人確認)の画面 */
.login-step{width:100%;display:flex;flex-direction:column;gap:12px}.login-step[hidden],.login [hidden]{display:none}
.login-h{font-size:18px;font-weight:700;margin:0;color:var(--ink)}
.login-note{font-size:13px;line-height:1.7;color:var(--sub);margin:0}
.login-who{font-size:12px;color:var(--sub)}
.login-btn{width:100%;height:46px;border-radius:23px;background:var(--ink);color:var(--card);font-size:15px;font-weight:700;border:0}
.login-btn.busy,.login-btn:disabled{opacity:.6;pointer-events:none}
.login-link{background:none;border:0;color:var(--sub);font-size:13px;text-decoration:underline;padding:6px}
.login-input{width:100%;height:46px;border-radius:10px;border:1px solid var(--sub);background:var(--card);color:var(--ink);font-size:16px;padding:0 12px;letter-spacing:.08em;font-family:ui-monospace,Menlo,Consolas,monospace}
.login-codes{margin:0;padding:12px 12px 12px 36px;background:var(--chip);border-radius:10px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:15px;line-height:1.9;color:var(--ink);user-select:all}