/* ===== WorldShift Trade Watch — 共有コンポーネント（検索 / カテゴリ絞込 / 用語ツールチップ / 用語集） =====
   ベースの配色・レイアウトは各ページのインラインCSSに依存（--navy 等のCSS変数を利用）。 */

/* カテゴリバー：選択中の見出し */
.catbar a.cur{color:var(--blue);border-bottom-color:var(--blue)}
/* カテゴリバー内の検索窓（用語集の隣・右端に配置） */
.catbar .bound{align-items:center}
.catbar a.push-right{margin-left:auto}
.catbar-search{flex:none;display:flex;align-items:center;padding:0 0 0 10px;position:relative}
.cs-results{position:absolute;top:calc(100% + 6px);right:0;width:340px;max-width:86vw;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 36px rgba(12,35,64,.18);overflow:hidden;z-index:80;display:none}
.cs-results.show{display:block}
.cs-results a{display:block;padding:10px 14px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--navy)}
.cs-results a:last-child{border-bottom:0}
.cs-results a:hover,.cs-results a.active{background:#eef5fc}
.cs-results .r-t{display:block;font-size:14px;font-weight:700;line-height:1.4}
.cs-results .r-c{display:block;font-size:11.5px;color:var(--sub);font-weight:700;margin-top:2px}
.cs-results .r-more{font-size:12.5px;color:var(--blue);font-weight:800;text-align:center;background:#f7fafd}
.cs-results .r-none{padding:12px 14px;color:var(--sub);font-size:13px}
.catbar-search .cs-wrap{position:relative;display:flex;align-items:center}
.catbar-search .cs-ico{position:absolute;left:13px;top:50%;transform:translateY(-50%);font-size:13px;color:var(--sub);pointer-events:none}
.catbar-search input{border:1.5px solid #b9c8da;border-radius:999px;padding:9px 16px 9px 34px;font-size:15px;width:220px;
  background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(12,35,64,.07)}
.catbar-search input::placeholder{color:var(--sub)}
.catbar-search input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(23,99,184,.15)}
@media(max-width:720px){.catbar-search input{width:150px}}

/* ---- トップの検索バー＋絞り込み ---- */
.toolbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:0 0 22px}
.search{position:relative;flex:1 1 320px;max-width:560px}
.search input{width:100%;border:1px solid var(--line);border-radius:999px;padding:13px 46px 13px 18px;font-size:17px;
  background:var(--card);color:var(--ink);box-shadow:0 2px 8px rgba(12,35,64,.05)}
.search input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(23,99,184,.15)}
.search .ico{position:absolute;right:16px;top:50%;transform:translateY(-50%);color:var(--sub);font-size:18px;pointer-events:none}
.active-filter{display:inline-flex;align-items:center;gap:8px;background:#eef4fb;border:1px solid #bcd4f0;color:var(--blue);
  font-weight:800;font-size:15px;padding:7px 8px 7px 14px;border-radius:999px}
.active-filter button{border:0;background:rgba(23,99,184,.12);color:var(--blue);font-weight:900;cursor:pointer;
  font-size:15px;line-height:1;width:22px;height:22px;border-radius:50%}
.active-filter button:hover{background:var(--blue);color:#fff}
.result-count{font-size:15px;color:var(--sub);font-weight:700}
.no-results{display:none;background:var(--card);border:1px dashed #c8d3e0;border-radius:16px;padding:40px 24px;text-align:center;
  color:var(--sub);font-size:18px;line-height:1.7}
.no-results.show{display:block}
/* トップ「すべての記事を見る」ボタン */
.see-all{display:block;text-align:center;margin:24px auto 0;max-width:420px;background:var(--navy);color:#fff;
  font-weight:900;font-size:17px;padding:14px 24px;border-radius:999px;box-shadow:0 6px 18px rgba(12,35,64,.18)}
.see-all:hover{background:var(--blue);color:#fff}
/* メルマガ登録 完了メッセージ（newsletterボックス＝紺地に白文字） */
.nl-done{color:#fff;font-weight:800;font-size:16px;line-height:1.6;margin:8px 0 0}

/* ---- 記事カードのタグチップ ---- */
.tagrow{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0 0}
.tagrow .tg{font-size:12.5px;font-weight:700;color:var(--sub);background:#eef2f7;border-radius:999px;padding:3px 11px;
  cursor:pointer;border:0}
.tagrow .tg::before{content:"#";opacity:.55;margin-right:1px}
.tagrow .tg:hover{color:var(--blue);background:#e7f0fb}

/* ---- カテゴリ一覧ページの記事リスト ---- */
.clist{display:grid;gap:16px;margin:0 0 10px}
.citem{display:grid;grid-template-columns:240px 1fr;gap:20px;align-items:center;background:var(--card);
  border:1px solid var(--line);border-radius:16px;padding:16px;color:var(--ink);
  transition:box-shadow .15s,transform .15s}
.citem:hover{box-shadow:0 12px 30px rgba(12,35,64,.10);transform:translateY(-2px)}
.citem .cthumb{aspect-ratio:16/10;border-radius:12px;overflow:hidden;background:#0c2340}
.citem .cthumb img{width:100%;height:100%;object-fit:cover;display:block}
.citem .cdcat{display:inline-block;background:#eef2f7;color:var(--navy);font-weight:800;font-size:13.5px;padding:4px 11px;border-radius:999px}
.citem h3{font-size:clamp(19px,1.8vw,23px);line-height:1.4;color:var(--navy);margin:10px 0 8px;font-weight:900}
.citem p{font-size:16px;color:#46535f;margin:0 0 10px;line-height:1.6}
.citem .cdate{font-size:14.5px;color:var(--sub);font-weight:700}
.cat-empty{background:var(--card);border:1px dashed #c8d3e0;border-radius:16px;padding:38px 24px;text-align:center;color:var(--sub);font-size:18px}
@media(max-width:720px){.citem{grid-template-columns:1fr}}

/* ---- 実務のワンポイント（具体的な落とし穴回避Tip） ---- */
.tip{background:#fff8ec;border:1px solid #f3d9a8;border-left:6px solid var(--amber);border-radius:14px;padding:16px 20px;margin:24px 0 0}
.tip b{display:block;color:#b9770a;font-size:17px;font-weight:900;margin-bottom:5px}
.tip p{margin:0;font-size:16.5px;line-height:1.72;color:#5a4622}

/* ---- 安心クロージング（不安で終わらせず“当社が代行で解決”を示す） ---- */
.reassure{background:linear-gradient(180deg,#eef7f1,#f5fbf7);border:1px solid #bfe3cf;border-left:6px solid var(--green);
  border-radius:14px;padding:18px 22px;margin:26px 0 0}
.reassure b{display:block;color:var(--green);font-size:18px;font-weight:900;margin-bottom:6px}
.reassure p{margin:0;font-size:17px;line-height:1.75;color:#24412f}

/* ---- 記事中の用語：点線アンダーライン＋ホバー ---- */
.gloss{border-bottom:1px dashed var(--blue);cursor:help;color:inherit;transition:background .12s}
.gloss:hover,.gloss:focus{background:#eef4fb;outline:none;border-radius:3px}

/* ---- ツールチップ ---- */
.gloss-tip{position:fixed;z-index:10000;max-width:340px;background:var(--navy);color:#fff;border-radius:12px;
  padding:13px 16px;font-size:15px;line-height:1.62;box-shadow:0 14px 36px rgba(12,35,64,.38);
  pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity .12s,transform .12s}
.gloss-tip.show{opacity:1;transform:none}
.gloss-tip .tt-term{font-weight:900;font-size:16px;margin-bottom:5px;color:#fff}
.gloss-tip .tt-term span{color:var(--hot2);font-weight:700;font-size:12.5px;margin-left:7px}
.gloss-tip .tt-more{display:block;margin-top:8px;color:#9fc1e8;font-size:13px}

/* ---- 用語集ページ ---- */
.gloss-search{position:relative;max-width:560px;margin:0 0 18px}
.gloss-search input{width:100%;border:1px solid var(--line);border-radius:999px;padding:13px 46px 13px 18px;font-size:17px;
  background:var(--card);color:var(--ink);box-shadow:0 2px 8px rgba(12,35,64,.05)}
.gloss-search input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(23,99,184,.15)}
.gloss-search .ico{position:absolute;right:16px;top:50%;transform:translateY(-50%);color:var(--sub);font-size:18px;pointer-events:none}
.gloss-cats{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px}
.gloss-cats button{border:1px solid var(--line);background:var(--card);color:var(--ink);font-weight:800;font-size:15px;
  padding:9px 16px;border-radius:999px;cursor:pointer}
.gloss-cats button:hover{border-color:var(--blue);color:var(--blue)}
.gloss-cats button.active{background:var(--navy);color:#fff;border-color:var(--navy)}
.gloss-cats button .n{opacity:.6;font-size:13px;margin-left:6px}
.gloss-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px}
.gloss-card{background:var(--card);border:1px solid var(--line);border-left:5px solid var(--green);border-radius:0 14px 14px 0;
  padding:18px 20px;scroll-margin-top:90px;transition:box-shadow .15s}
.gloss-card h3{margin:0 0 8px;font-size:20px;font-weight:900;color:var(--navy)}
.gloss-card h3 .rd{font-size:14px;color:var(--sub);font-weight:700;margin-left:8px}
.gloss-card p{margin:0;font-size:16px;line-height:1.7;color:#34414f}
.gloss-card .gc-cat{display:inline-block;margin-top:11px;font-size:12.5px;font-weight:800;color:var(--green);
  background:#eef7f1;border-radius:999px;padding:3px 11px}
.gloss-card.hl{box-shadow:0 0 0 3px rgba(23,99,184,.4);border-left-color:var(--blue)}

@media(max-width:720px){
  .gloss-list{grid-template-columns:1fr}
  .gloss-tip{max-width:78vw}
}

/* ===== トップのイントロ（地球→ロゴ入替）＋記事スプラッシュ＋背景世界地図 =====
   生成基盤(article_html.py)が出力するページ用に site.css 側へ集約。 */
.intro{position:fixed;inset:0;z-index:9999;background:#fff;display:flex;align-items:center;justify-content:center;
  animation:introEnd .53s ease 2.1s forwards}
@keyframes introEnd{to{opacity:0;visibility:hidden}}
.intro-stage{display:flex;flex-direction:column;align-items:center;gap:26px}
.intro-swap{position:relative;width:clamp(200px,42vw,460px);height:clamp(200px,42vw,460px);flex:none}
.intro .globe{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;overflow:hidden;
  background:radial-gradient(circle at 34% 30%,#5aa0e6,#0b1f44 78%);
  box-shadow:0 24px 60px rgba(12,35,64,.35),inset -22px -16px 44px rgba(0,0,0,.35);transform-origin:center;
  animation:globeSpin 1.13s cubic-bezier(.45,.05,.2,1) forwards, globeOut .45s ease 1.13s forwards}
.intro .globe::after{content:"";position:absolute;inset:0;background:url(../img/world.svg) center/150% no-repeat;
  opacity:.55;filter:brightness(4) grayscale(1);mix-blend-mode:screen}
.intro .intro-logo{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transform:scale(.7);
  animation:logoIn .45s cubic-bezier(.34,1.56,.64,1) 1.16s forwards}
@keyframes globeSpin{from{transform:rotate(-20deg)}to{transform:rotate(360deg)}}
@keyframes globeOut{to{opacity:0;transform:scale(.72) rotate(8deg)}}
@keyframes logoIn{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}
.intro-lock{display:flex;align-items:center;gap:11px;opacity:0;font-size:clamp(22px,2.6vw,34px);font-weight:900;
  color:var(--navy);white-space:nowrap;animation:lockIn .41s ease 1.5s forwards}
.intro-lock .brand-txt span{color:var(--hot)}
@keyframes lockIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.worldmap{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:url(../img/world.svg) center 28% / 118% no-repeat;opacity:.06;filter:grayscale(1) brightness(.35)}
/* 記事を開いた瞬間のロゴスプラッシュ */
.art-splash{position:fixed;inset:0;z-index:9999;background:#fff;display:flex;align-items:center;justify-content:center;
  animation:splashOut .5s ease .7s forwards}
.art-splash img{width:clamp(260px,46vw,560px);height:auto;opacity:0;transform:scale(.86);
  animation:splashLogo .5s cubic-bezier(.34,1.56,.64,1) forwards}
@keyframes splashLogo{to{opacity:1;transform:scale(1)}}
@keyframes splashOut{to{opacity:0;visibility:hidden}}
@media(prefers-reduced-motion:reduce){.intro,.art-splash,.worldmap{animation:none;display:none}}