/* SSRページ（タグ/動画一覧/着地）の共通スタイル。pages.ts のインライン<style>から外部化＝全SEOページで同一・キャッシュ共有でHTML軽量化。 */
*{margin:0;padding:0;box-sizing:border-box}
body{background:#111;color:#fff;font-family:-apple-system,'Noto Sans JP',sans-serif}
a{color:inherit;text-decoration:none}
header{position:sticky;top:0;background:rgba(17,17,17,.95);padding:12px 16px;display:flex;align-items:center;gap:14px;border-bottom:1px solid #2e2e2e;flex-wrap:wrap}
.logo{color:#FF6B35;font-weight:800;font-size:18px}
nav a{color:#aaa;font-size:13px}
/* ヘッダー検索ボックス（タップ/送信でスワイプUIの検索を呼び出す） */
.hsearch{flex:1;max-width:300px;min-width:120px;display:flex;align-items:center;gap:6px;background:#1e1e1e;border:1px solid #333;border-radius:18px;padding:6px 12px}
.hsearch svg{width:15px;height:15px;color:#888;flex:0 0 auto}
.hsearch input{flex:1;min-width:0;background:none;border:none;color:#fff;font-size:13px;outline:none}
.hsearch input::placeholder{color:#777}
/* 言語の旗ドロップダウン（SPAと同じ見た目） */
.langdd{position:relative;margin-left:auto}
.langdd summary{list-style:none;display:flex;align-items:center;gap:3px;cursor:pointer;padding:5px 6px;border:1px solid #333;border-radius:10px;background:#1e1e1e}
.langdd summary::-webkit-details-marker{display:none}
.langdd summary img{width:22px;height:16px;border-radius:2px;display:block}
.langdd .caret{color:#888;font-size:11px}
.langdd-menu{position:absolute;right:0;top:calc(100% + 6px);background:#1e1e1e;border:1px solid #333;border-radius:10px;padding:4px;min-width:128px;z-index:50;box-shadow:0 8px 24px rgba(0,0,0,.5)}
.langdd-menu a{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;color:#ddd;font-size:13px}
.langdd-menu a img{width:22px;height:16px;border-radius:2px}
.langdd-menu a.on{color:#FF6B35;font-weight:700}
.langdd-menu a:active{background:rgba(255,255,255,.08)}
main{max-width:1100px;margin:0 auto;padding:16px}
h1{font-size:20px;margin-bottom:4px}
.sub{color:#aaa;font-size:13px;margin-bottom:16px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.card{display:block;background:#1e1e1e;border-radius:10px;overflow:hidden;border:1px solid #2e2e2e}
.card .thumb{position:relative;width:100%;aspect-ratio:9/16;background:#000;object-fit:cover;display:block}
.card .rk{position:absolute;top:6px;left:6px;background:#FF6B35;color:#fff;font-size:11px;font-weight:700;padding:2px 7px;border-radius:12px;z-index:2}
.card .card-like{position:absolute;top:6px;right:6px;z-index:3;width:30px;height:30px;border-radius:50%;background:rgba(0,0,0,.45);border:none;color:#fff;font-size:15px;line-height:30px;padding:0;cursor:pointer}
.card .card-like.on{color:#FF6B35;background:rgba(255,107,53,.28)}
/* シェア着地の横4本ランキング（自動再生グリッド） */
.vgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:6px 0 18px}
@media(max-width:380px){.vgrid{gap:4px}}
.more-h{font-size:15px;font-weight:800;margin:14px 0 8px;color:#FF6B35}
.card .meta{padding:7px 9px;font-size:11px;color:#aaa}
.chips{display:flex;flex-wrap:nowrap;gap:6px;margin:10px 0 14px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;white-space:nowrap;background:#1e1e1e;border:1px solid #FF6B35;color:#fff;font-size:12px;font-weight:700;padding:5px 11px;border-radius:16px}
.chip small{color:#FF6B35;margin-left:4px}
.cta{display:inline-block;background:#FF6B35;color:#fff;font-weight:700;padding:10px 18px;border-radius:24px;margin:6px 0 18px}
.player{text-align:center}
.player video{max-width:100%;max-height:62vh;width:auto;height:auto;background:#000;border-radius:10px;display:inline-block;cursor:pointer}
.savebox{background:rgba(255,107,53,.12);border:1px solid rgba(255,107,53,.4);border-radius:12px;padding:12px 14px;margin:12px 0}
.savebox-t{font-weight:800;color:#FF6B35;font-size:15px;margin-bottom:5px}
.savebox-h{font-size:13px;color:#ddd;line-height:1.6}
.dl-link{display:block;text-align:center;margin-top:10px;background:#FF6B35;color:#fff;font-weight:800;font-size:15px;padding:13px;border-radius:12px;text-decoration:none;-webkit-touch-callout:default;touch-action:manipulation}
.dl-link:active{opacity:.85}
footer{color:#666;font-size:11px;padding:24px 16px;text-align:center}
