/* 動画番号の入口（「動画から来た人はこちら」）2026-10-29 kakke決定＝C案＋案2。
   スマホ・狭い画面：右端の縦書きのつまみ（読み始めたら細くなる・一度しまったらヘッダー直下に固定）
   PC（本文の右に250px以上の余白がある画面）：本文の右の余白にカードを常に表示
   部品の組み立て・番号の照合は /js/video-number.js、番号の対応表は /video-numbers.json（oyacare_video_numbers.py が生成） */
.vn,.vn-card,.vn-band{--vn-trust:var(--trust,#3a6b5e);--vn-trust-dark:#2d574c;--vn-accent:var(--accent,#d9772b);--vn-accent-dark:var(--accent-dark,#b85f1c);
  --vn-border:var(--border,#e3ded6);--vn-sub:var(--text-sub,#5a554d);--vn-text:var(--text,#2b2b2b);
  font-family:var(--font-base,"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif);box-sizing:border-box}
.vn *,.vn-card *,.vn-band *{box-sizing:border-box}
.vn button,.vn-card button,.vn-band button{font:inherit;cursor:pointer}
.vn :focus-visible,.vn-card :focus-visible,.vn-band :focus-visible{outline:3px solid var(--heading,#2a3b4d);outline-offset:2px}
.vn-title{font-weight:900;color:var(--vn-trust);line-height:1.4;margin:0}
.vn-lead{margin:0;color:var(--vn-sub);line-height:1.55;word-break:keep-all;overflow-wrap:anywhere}
.vn-row{display:flex;gap:6px}
.vn input,.vn-card input,.vn-band input{font:inherit;font-weight:700;letter-spacing:.08em;font-variant-numeric:tabular-nums;color:var(--vn-text);background:#fff;
  border:2px solid var(--vn-border);border-radius:8px;width:100%;min-width:0;margin:0}
.vn input:focus,.vn-card input:focus,.vn-band input:focus{border-color:var(--vn-trust);outline:none}
.vn-go{background:var(--vn-accent);color:#fff;border:0;border-radius:8px;font-weight:900;white-space:nowrap}
.vn-go:hover{background:var(--vn-accent-dark)}
.vn-out{margin:0;line-height:1.55}
.vn-out:empty{display:none}
.vn-out.ok{color:#2f6b4f;font-weight:700}.vn-out.ng{color:#a33a2a}

/* ---- 右端のつまみ ---- */
.vn{position:fixed;right:env(safe-area-inset-right,0px);top:max(32vh,150px);z-index:45;display:flex;align-items:flex-start}
.vn[hidden]{display:none}
.vn-tab{background:var(--vn-trust);color:#fff;border:0;border-radius:10px 0 0 10px;writing-mode:vertical-rl;letter-spacing:.1em;font-weight:900;
  display:flex;align-items:center;gap:6px;font-size:13px;padding:13px 9px;line-height:1.2}
.vn-tab:hover{background:var(--vn-trust-dark)}
.vn-tab svg{writing-mode:horizontal-tb;width:16px;height:16px;flex:0 0 auto}
.vn-tab-text{display:block;max-height:14em;overflow:hidden;white-space:nowrap}
.vn[data-size="slim"] .vn-tab{padding:11px 4px;gap:0;border-radius:8px 0 0 8px}
.vn[data-size="slim"] .vn-tab-text{max-height:0;opacity:0}
.vn-panel{width:min(260px,calc(100vw - 32px));background:#fff;border:2px solid var(--vn-trust);border-right:0;border-radius:12px 0 0 12px;
  padding:10px 12px 14px 14px;display:grid;gap:6px;margin:0}
.vn-top{display:flex;justify-content:space-between;align-items:center;gap:4px}
.vn .vn-title{font-size:13.5px;white-space:nowrap}
.vn .vn-lead{font-size:12.5px}
.vn .vn-row{margin-top:6px}
.vn input{font-size:20px;padding:6px 10px}
.vn .vn-go{min-height:44px;padding:0 14px;font-size:14px}
.vn .vn-out{font-size:12.5px}
.vn-hide{background:none;border:0;color:var(--vn-sub);font-weight:700;font-size:12px;padding:6px 2px;white-space:nowrap;flex:0 0 auto;min-height:36px}
.vn[data-state="closed"] .vn-panel{display:none}
.vn[data-state="open"] .vn-tab{display:none}

/* ---- PCのカード（本文の右の余白） ---- */
.vn-card{position:fixed;top:96px;z-index:30;width:250px;transition:opacity .2s ease}
.vn-card[hidden]{display:none}
.vn-card.vn-away{opacity:0;pointer-events:none}
.vn-card form{border:2px solid var(--vn-trust);border-radius:12px;padding:18px 18px 20px;display:grid;gap:10px;background:#fff;margin:0}
.vn-card .vn-title{font-size:15.5px;display:flex;align-items:center;gap:7px;white-space:nowrap}
.vn-card .vn-title svg{width:22px;height:22px;flex:0 0 auto}
.vn-card .vn-lead{font-size:14px}
.vn-card .vn-row{flex-direction:column;gap:8px;margin-top:4px}
.vn-card input{font-size:24px;padding:8px 12px;text-align:center}
.vn-card .vn-go{min-height:48px;font-size:15px;width:100%}
.vn-card .vn-out{font-size:13.5px}

/* ---- PCで右の余白が無いページ（ホーム・カテゴリ一覧）：本文上部の横長の帯（2026-10-29 kakke指摘＝つまみ式をやめる） ---- */
.vn-band{margin:1rem 0 1.2rem}
.vn-band[hidden]{display:none}
.vn-band form{border:2px solid var(--vn-trust);border-radius:12px;padding:12px 18px;background:#fff;margin:0;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:6px 18px}
.vn-band .vn-title{font-size:15.5px;display:flex;align-items:center;gap:7px;white-space:nowrap}
.vn-band .vn-title svg{width:22px;height:22px;flex:0 0 auto}
.vn-band .vn-lead{font-size:14px}
.vn-band .vn-row{gap:8px}
.vn-band input{font-size:20px;padding:6px 12px;width:7.5em;text-align:center}
.vn-band .vn-go{min-height:44px;padding:0 18px;font-size:15px}
.vn-band .vn-out{grid-column:1/-1;font-size:13.5px}

@media (prefers-reduced-motion:no-preference){
  .vn{transition:top .35s ease}
  .vn-tab{transition:padding .25s ease,border-radius .25s ease}
  .vn-tab-text{transition:max-height .28s ease,opacity .2s ease}
  .vn-panel.in{animation:vnIn .22s ease-out}
  .vn-panel.out{animation:vnOut .2s ease-in forwards}
  .vn-tab.in{animation:vnTabIn .2s ease-out}
  @keyframes vnIn{from{transform:translateX(100%);opacity:.3}to{transform:none;opacity:1}}
  @keyframes vnOut{from{transform:none;opacity:1}to{transform:translateX(100%);opacity:.2}}
  @keyframes vnTabIn{from{transform:translateX(100%)}to{transform:none}}
}
@media print{.vn,.vn-card,.vn-band{display:none!important}}