/* ============================================================
   読者サイト共通の追加UI（テンプレ外の独自実装）
   - ページトップへ戻る / SPハンバーガーメニュー / 404 / ページネーション / 検索
   - (site)/layout.tsx で全ページに読み込む
   ============================================================ */

/* ---------- ページトップへ戻る（レインボー仕様） ---------- */
.backtotop{
  position:fixed; right:22px; bottom:22px; z-index:70;
  width:48px; height:48px; border-radius:50%;
  /* 内側=ダーク / 枠=レインボーの二層背景（border-radius対応のグラデ枠） */
  border:2px solid transparent;
  background:
    linear-gradient(rgba(14,14,18,.92), rgba(14,14,18,.92)) padding-box,
    linear-gradient(90deg,#c2ff3d,#2fe6ff,#ff3d9a,#9b6bff,#c2ff3d) border-box;
  background-size:100% 100%, 250% 100%;
  font-size:17px; line-height:1;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  opacity:0; pointer-events:none; transform:translateY(10px);
  transition:opacity .25s, transform .25s;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.backtotop.show{ opacity:1; pointer-events:auto; transform:translateY(0); }
.backtotop:hover{ filter:brightness(1.25); }
.backtotop .bt-arrow{
  font-weight:700;
  background:linear-gradient(90deg,#c2ff3d,#2fe6ff,#ff3d9a,#9b6bff,#c2ff3d);
  background-size:250% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
@media (prefers-reduced-motion:no-preference){
  .backtotop{ animation:btsweep 6s linear infinite; }
  .backtotop .bt-arrow{ animation:btsweep-text 6s linear infinite; }
}
@keyframes btsweep{ to{ background-position:0 0, 250% 0; } }
@keyframes btsweep-text{ to{ background-position:250% 0; } }
@media (max-width:860px){ .backtotop{ right:16px; bottom:16px; width:44px; height:44px; } }

/* ---------- SP ハンバーガーメニュー ---------- */
.nav-toggle{
  display:none; position:relative; z-index:95;
  width:44px; height:44px; border:1px solid rgba(255,255,255,.22); border-radius:10px;
  background:rgba(255,255,255,.06); cursor:pointer; padding:0;
  flex-direction:column; align-items:center; justify-content:center; gap:6px;
}
.nav-toggle span{
  display:block; width:20px; height:2px; background:#fff; border-radius:2px;
  transition:transform .25s, opacity .2s;
}
/* open 時は × に変形 */
.nav-toggle.open span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:0; z-index:90; display:none; flex-direction:column;
  background:
    radial-gradient(120% 90% at 82% -10%, rgba(194,255,61,.10), transparent 55%),
    #0a0a0d;
  padding:120px 26px 40px; overflow-y:auto;
}
.mobile-menu.open{ display:flex; }
.mobile-menu .mm-eyebrow{
  font-family:var(--mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--acid); margin:26px 0 12px;
}
.mobile-menu .mm-link{
  font-family:var(--disp); font-size:34px; letter-spacing:.02em; color:#fff;
  text-decoration:none; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.12);
  display:flex; align-items:center; justify-content:space-between;
}
/* リンクテキストは白（レインボーはアイコン側に使用） */
.mobile-menu .mm-link .t{ color:#fff; }
.mobile-menu .mm-link .arr{ color:var(--acid); font-size:20px; }
.mobile-menu .mm-cats{ display:flex; flex-wrap:wrap; gap:8px; }
.mobile-menu .mm-cats a{
  font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:rgba(255,255,255,.85);
  text-decoration:none; border:1px solid rgba(255,255,255,.25); border-radius:100px;
  padding:9px 16px; transition:.2s;
}
.mobile-menu .mm-cats a:hover{ border-color:var(--acid); color:var(--acid); }
/* SP ではテキストナビを隠してハンバーガーに置き換え */
@media (max-width:860px){
  .mag-nav{ display:none; }
  .nav-toggle{ display:flex; }
  body.menu-open, .mag.menu-open{ overflow:hidden; }
}

/* ---------- 404 ---------- */
.nf-hero{
  min-height:calc(100vh - 420px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:90px 22px 130px;
  background:radial-gradient(120% 90% at 82% -10%, rgba(194,255,61,.10), transparent 55%), var(--blue);
  color:#fff;
}
.nf-hero .code{
  font-family:var(--disp); font-weight:400; font-size:clamp(180px,36vw,460px);
  line-height:.85; letter-spacing:.01em; display:block;
}
.nf-hero .label{
  font-family:var(--mono); font-size:12px; letter-spacing:.34em; text-transform:uppercase;
  color:rgba(255,255,255,.72); margin-top:26px;
}
.nf-hero p{ font-size:15px; line-height:2; color:rgba(255,255,255,.78); margin:18px 0 30px; }
.nf-hero .btn.gold{ font-size:13px; padding:15px 34px; }

/* ---------- ページネーション ---------- */
.pagination{
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin:64px auto 0; font-family:var(--mono); font-size:12px; letter-spacing:.06em;
}
.pagination a, .pagination .cur, .pagination .gap{
  min-width:40px; height:40px; padding:0 12px; border-radius:100px;
  display:flex; align-items:center; justify-content:center; text-decoration:none;
}
.pagination a{ color:var(--ink-2); border:1px solid var(--line); transition:.2s; }
.pagination a:hover{ border-color:var(--ink); color:var(--ink); }
.pagination .cur{ background:var(--acid); color:#0b0b0d; font-weight:700; }
.pagination .gap{ color:var(--ink-3); border:0; min-width:auto; padding:0 2px; }
/* 暗背景（invert-light 外）の場合 */
.pagination.on-dark a{ color:rgba(255,255,255,.75); border-color:rgba(255,255,255,.22); }
.pagination.on-dark a:hover{ border-color:var(--acid); color:var(--acid); }
.pagination.on-dark .gap{ color:rgba(255,255,255,.4); }

/* ---------- SP: Let's talk（quietcta）のレイアウト ----------
   従来は左右paddingが合計192pxあり、390px幅では本文が198pxしか残らず
   見出しが3行に折り返し、ボタンのラベルも2行に割れていた。
   余白を詰めて幅を確保し、ラベルは矢印を絶対配置にしてピル中心へ揃える。 */
/* SP限定の改行ヘルパー（PCでは無効化して1行のまま） */
.br-sp{ display:none; }

@media (max-width:860px){
  .br-sp{ display:inline; }
  .quietcta{ padding:0 20px; }
  .quietcta .in{ padding:64px 16px 68px; }
  .quietcta h2{ font-size:clamp(24px,7.4vw,32px); line-height:1.35; }
  .quietcta p{ font-size:14.5px; }
  .quietcta .btn.gold{
    position:relative; display:flex; align-items:center; justify-content:center;
    width:min(320px,100%); margin:0 auto; gap:0;
    padding:18px 44px; white-space:nowrap;
  }
  .quietcta .btn.gold .arr{ position:absolute; right:22px; top:50%; transform:translateY(-50%); }
}

/* ---------- カテゴリ一覧（/category/） ---------- */
.catindex{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
  padding:56px 0 90px;
}
.catindex a{
  display:block; text-decoration:none; color:inherit;
  border:1px solid var(--line); border-radius:12px; padding:26px 26px 24px;
  transition:border-color .2s, transform .2s;
}
.catindex a:hover{ border-color:var(--acid); transform:translateY(-2px); }
.catindex .nm{
  font-family:var(--head); font-weight:900; font-size:22px; letter-spacing:.01em;
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
}
.catindex .ct{ font-family:var(--mono); font-size:12px; color:var(--acid); }
.catindex .ds{ font-size:13px; line-height:1.9; color:var(--ink-3); margin:10px 0 0; }
@media (max-width:860px){ .catindex{ grid-template-columns:1fr; padding:40px 0 70px; } }

/* ---------- 検索の入力補完（サジェスト） ---------- */
form.search, form.sw-search{ position:relative; }
.suggest{
  display:none; position:absolute; left:0; right:0; top:calc(100% + 8px); z-index:60;
  background:rgba(14,14,18,.97); border:1px solid rgba(255,255,255,.18); border-radius:14px;
  overflow:hidden; box-shadow:0 24px 48px -20px rgba(0,0,0,.6);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.suggest.on{ display:block; }
.suggest a{
  display:flex; align-items:center; gap:10px; padding:12px 18px;
  text-decoration:none; border-bottom:1px solid rgba(255,255,255,.08);
  transition:background .15s;
}
.suggest a:last-child{ border-bottom:0; }
.suggest a:hover{ background:rgba(194,255,61,.10); }
.suggest .c{
  flex:none; font-family:var(--mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase;
  color:#0b0b0d; background:var(--acid); padding:3px 9px; border-radius:100px;
}
.suggest .t{ font-size:13px; line-height:1.5; color:#fff; }
/* 記事サイドバー（白シート内）ではライトテーマに */
.side-col .suggest{ background:#fff; border-color:var(--line); box-shadow:0 16px 36px -18px rgba(0,0,0,.35); }
.side-col .suggest a{ border-bottom-color:var(--line-2); }
.side-col .suggest a:hover{ background:var(--paper-3); }
.side-col .suggest .t{ color:var(--ink); }

/* ---------- 検索結果ページ ---------- */
.searchhead{
  background:radial-gradient(120% 90% at 82% -10%, rgba(194,255,61,.10), transparent 55%), var(--blue);
  color:#fff; padding:40px 0 56px;
}
.searchhead .eyebrow{ color:rgba(255,255,255,.72); }
.searchhead h1{
  font-family:var(--disp); font-weight:400; font-size:clamp(48px,9vw,120px);
  line-height:.9; letter-spacing:.012em; margin:0 0 10px; color:#fff;
}
.searchhead h1 .dot{ color:var(--acid); }
.searchhead .q{ font-size:16px; color:rgba(255,255,255,.82); margin:14px 0 0; }
.searchhead .q b{ color:var(--acid); font-weight:700; }
.searchhead .searchrow{ margin-top:28px; }
.search-empty{ padding:80px 22px 40px; text-align:center; color:var(--ink-2); font-size:15px; line-height:2; }

/* ===== 下書きプレビューの通知バー（ログイン中の未公開記事表示） ===== */
.draft-preview-bar{
  position:sticky; top:0; z-index:90;
  background:#c2ff3d; color:#111607;
  font-family:var(--mono, monospace); font-size:12px; letter-spacing:.12em;
  text-align:center; padding:10px 16px;
}

/* 補足ノート・お知らせ内の自動リンク（囲い内でもリンクと分かる下線+アクセント） */
.m-note a, .m-supplement a{
  color: inherit; text-decoration: underline;
  text-decoration-color: var(--acid, #c2ff3d); text-underline-offset: 3px;
  word-break: break-all;
}

/* ============================================================
   記事一覧ページ /magazine/articles/ の絞り込みUI
   ============================================================ */
.filters{ padding-top:8px; padding-bottom:26px; }
.filters .fl-search{ display:flex; gap:10px; max-width:560px; margin:0 0 26px; }
.filters .fl-search input{
  flex:1; min-width:0; height:48px; padding:0 18px; border-radius:100px;
  border:1px solid var(--line-2, rgba(255,255,255,.16)); background:rgba(255,255,255,.04);
  color:#fff; font-size:14px; line-height:normal;
}
.filters .fl-search input::placeholder{ color:rgba(255,255,255,.4); }
.filters .fl-search input:focus{ outline:none; border-color:var(--acid); }
.filters .fl-search button{
  flex:none; height:48px; padding:0 24px; border-radius:100px; border:0; cursor:pointer;
  background:var(--acid); color:#0b0b0d; font-weight:700; font-size:13.5px; letter-spacing:.04em;
}
.filters .fl-search button:hover{ background:#fff; }

.filters .fl-group{ display:flex; align-items:flex-start; gap:16px; margin-bottom:16px; flex-wrap:wrap; }
.filters .fl-label{
  flex:none; padding-top:8px; min-width:74px;
  font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--acid);
}
.filters .fl-chips{ display:flex; flex-wrap:wrap; gap:8px; flex:1; min-width:0; }
.filters .chip{
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 16px; border-radius:100px; text-decoration:none;
  border:1px solid rgba(255,255,255,.18); color:rgba(255,255,255,.8);
  font-size:13px; transition:.2s; white-space:nowrap;
}
.filters .chip:hover{ border-color:var(--acid); color:#fff; }
.filters .chip.on{ background:var(--acid); border-color:var(--acid); color:#0b0b0d; font-weight:700; }
.filters .chip .n{ font-family:var(--mono); font-size:10px; opacity:.7; }

.filters .fl-result{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin-top:22px; padding-top:18px; border-top:1px solid rgba(255,255,255,.1);
  font-size:13px; color:rgba(255,255,255,.66);
}
.filters .fl-result .cnt b{ font-family:var(--mono); font-size:17px; color:var(--acid); margin-right:3px; }
.filters .fl-result .cond em{ font-style:normal; color:#fff; margin-right:10px; }
.filters .fl-result .clear{ color:rgba(255,255,255,.6); text-decoration:underline; text-underline-offset:3px; }
.filters .fl-result .clear:hover{ color:var(--acid); }

.list-body{ padding-bottom:16px; }
.list-body .empty{ padding:64px 0; text-align:center; color:rgba(255,255,255,.6); font-size:14px; }
.list-body .empty a{ color:var(--acid); text-decoration:underline; text-underline-offset:3px; margin-left:10px; }

.list-links{ display:flex; flex-wrap:wrap; gap:10px 18px; padding-top:6px; padding-bottom:40px; }
.list-links a{
  font-size:13px; color:rgba(255,255,255,.6); text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.18); padding-bottom:3px; transition:.2s;
}
.list-links a:hover{ color:var(--acid); border-color:var(--acid); }

@media (max-width:860px){
  .filters .fl-group{ gap:8px; }
  .filters .fl-label{ min-width:0; padding-top:0; }
  .filters .fl-chips{ width:100%; }
  .filters .fl-search{ max-width:none; }
}

/* 記事一覧のセクション見出し（H1→H3 のスキップ解消用・控えめな見た目） */
.list-sec-head{
  font-size:14px; font-weight:700; letter-spacing:.06em; color:rgba(255,255,255,.75);
  margin:0 0 20px; padding-left:14px; position:relative;
}
.list-sec-head::before{
  content:""; position:absolute; left:0; top:.25em; bottom:.25em; width:3px;
  background:var(--acid); border-radius:2px;
}

/* SP: 記事一覧下部の内部リンクは行高27pxで指では押しづらいため当たり判定を広げる */
@media (max-width:860px){
  .list-links{ gap:4px 18px; }
  .list-links a{ display:inline-block; padding-top:7px; padding-bottom:7px; }
}