/* styles.css — 顔文字館 全站共享外壳
   设计 token + 基础排版 + 头部(logo/导航/カテゴリー下拉/搜索/主题) + 页脚 + pill。
   页面专属样式留在各自 <head> 的内联 <style>；看板娘样式由 mascot.js 注入。 */

:root{
  color-scheme:light; /* GBACODE-54: UA 画布/スクロールバー/フォーム既定色をテーマに揃え、跨页ナビ間隙の白フラッシュを防ぐ */
  --bg:#F7F3ED; --surface:#FDFBF7; --text:#2A2724; --muted:#8C857D; --border:#E9E2D7;
  --accent:#E08AA0; --accent-soft:#F9E9EE; --bloom:#EE9DB0;
  --surface-hover:color-mix(in srgb, var(--accent) 10%, var(--surface));
  --serif:"Noto Serif JP",serif; --sans:"Noto Sans JP",sans-serif;
  /* --kao: 顔文字本体用。日本語系→記号/絵文字系の順でフォールバックし、結合附加符・ラテン拡張の欠字を補う (#8) */
  --kao:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","Yu Gothic UI","Meiryo","Segoe UI Symbol","Segoe UI Emoji","Apple Color Emoji",sans-serif;
  --ease-spring:cubic-bezier(0.34,1.56,0.64,1); --ease-soft:cubic-bezier(0.22,1,0.36,1);
  --dur-fast:160ms; --dur-base:240ms; --dur-slow:400ms;
  --radius-sm:10px; --radius-md:16px; --radius-lg:24px; --maxw:1080px;
  --shadow-sm:0 1px 2px rgba(42,39,36,.04),0 2px 8px rgba(42,39,36,.03);
  --shadow-md:0 4px 12px rgba(42,39,36,.06),0 12px 28px rgba(42,39,36,.07);
}
/* EN /en/ ページ専用：見出し/ロゴ/nav=Quicksand（丸い幾何 sans・可愛い方向、ユーザー選定）、
   本文/UI=Nunito（丸い humanist sans）。顔文字本体 --kao は Noto Sans JP のまま（仮名字形が要る）。
   JP ページは無影響。フォント link は EN ページ <head> に注入済み（gen-en.js）。 */
html[lang="en"]{
  --serif:"Quicksand","Nunito",sans-serif;
  --sans:"Nunito","Noto Sans JP",sans-serif;
}
[data-theme="dark"]{
  color-scheme:dark; /* GBACODE-54: 暗色で UA 既定を dark に＝半透明 header 等から白が透けない */
  --bg:#1F1B1A; --surface:#2A2523; --text:#F0EBE6; --muted:#A8A099; --border:#3A3331;
  --accent:#E89AAB; --accent-soft:#3D2E30; --bloom:#E89AAB;
  --shadow-sm:0 1px 2px rgba(0,0,0,.2),0 2px 8px rgba(0,0,0,.18);
  --shadow-md:0 4px 12px rgba(0,0,0,.3),0 12px 28px rgba(0,0,0,.32);
}

*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:var(--sans);background:var(--bg);color:var(--text);line-height:1.7;-webkit-font-smoothing:antialiased;transition:background var(--dur-base) var(--ease-soft),color var(--dur-base) var(--ease-soft);scrollbar-gutter:stable;}

/* タップで残る系統焦点枠（Android Chrome の青い枠）を全站で消す。#2
   .card だけ cards.js が個別に消していたが、リンク/ボタン/chip/検索結果カードにも残っていた
   → html で一括 tap-highlight 透明化。鍵盤操作の可視フォーカス環は :focus-visible で温存（A11y）。 */
/* GBACODE-54: html に bg を指定し跨文書ナビ/VT 瞬間の白フラッシュを防ぐ */
html{-webkit-tap-highlight-color:transparent;background:var(--bg);}
:focus:not(:focus-visible){outline:none;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
/* GBACODE-61: パンくずの上下間距を全站で統一。各頁の inline .crumb は about/違い等が
   margin-bottom のみ(=上余白0でヘッダー直下に貼りつく)で不一致だった。nav.crumb は inline
   .crumb より詳細度が高いため、source 順に依らず全頁を上書きして揃える。 */
nav.crumb{margin:20px 0 22px;}

/* ---------- Header ---------- */
header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 82%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transform:translateZ(0);border-bottom:1px solid var(--border);}
.nav{display:flex;align-items:center;gap:14px;height:64px;}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);}
.logo .word{font-family:var(--serif);font-weight:600;font-size:1.35rem;letter-spacing:.02em;white-space:nowrap;}
.logo .dot{color:var(--accent);}
.spacer{flex:1;}

.navlink{display:inline-flex;align-items:center;gap:6px;font-family:var(--serif);font-size:1rem;font-weight:500;color:var(--text);text-decoration:none;padding:9px 14px;border-radius:var(--radius-sm);transition:background .15s,color .15s;cursor:pointer;white-space:nowrap;}
.navlink:hover{background:var(--surface-hover);color:var(--accent);}
.navlink.active{color:var(--accent);}

.catmenu{position:relative;}
.catbtn{background:none;border:none;}
.caret{font-size:0.8em;transition:transform .2s var(--ease-soft);}
.catmenu.open .caret{transform:rotate(180deg);}
.catpanel{position:absolute;top:calc(100% + 8px);left:0;min-width:236px;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-md);padding:6px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s,transform .18s var(--ease-soft),visibility .18s;z-index:60;}
/* GBACODE-41: transparent bridge fills the 8px gap between button and panel,
   keeping .catmenu:hover active while the cursor crosses the gap. */
.catpanel::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px;}
.catmenu.open .catpanel{opacity:1;visibility:visible;transform:translateY(0);}
.catpanel a{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:9px 12px;border-radius:var(--radius-sm);text-decoration:none;color:var(--text);font-family:var(--serif);font-size:0.95rem;transition:background .12s;}
.catpanel a:hover{background:var(--surface-hover);}
.catpanel a .mono{font-family:var(--kao);color:var(--accent);font-size:0.98em;letter-spacing:-0.02em;}
.catpanel-sep{height:1px;background:var(--border);margin:6px 4px;}
.catpanel-all{color:var(--accent);font-weight:500;}
/* PC: hover 展开；触屏走 JS 点击 */
@media (hover:hover) and (pointer:fine){
  .catmenu:hover .catpanel{opacity:1;visibility:visible;transform:translateY(0);}
  .catmenu:hover .caret{transform:rotate(180deg);}
}

.search-mini{position:relative;width:190px;flex-shrink:0;transition:width .22s var(--ease-soft),opacity .2s var(--ease-soft);}
.search-mini:focus-within{width:250px;}
.search-mini input{width:100%;height:40px;padding:0 14px 0 36px;font-family:var(--sans);font-size:0.9rem;color:var(--text);background:var(--surface);border:1.5px solid var(--border);border-radius:999px;outline:none;transition:border-color .2s,box-shadow .2s;}
.search-mini input::placeholder{color:var(--muted);}
.search-mini input:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft);}
.search-mini .si{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none;}
/* GBACODE-62/66/68: 移动端は「1 ページ 1 検索入口」。
   首页 = hero 大搜索框(主视觉。66 で保持＝#hero-search は隠さない)。header の放大镜は重複なので隐す。
   分类页 = 右上の放大镜のみ(下の .mob-search-bar も非表示にする)。 */
@media(max-width:640px){
  .search-mini{display:none;}                  /* header の旧 mini は全モバイルで非表示 */
  /* GBACODE-69: 首页は PC と同じ「主搜索が見えてる間は放大镜を出さない／スクロールアウトで補位」。
     header.hero-active = hero 検索框が視界内 or 検索中（site.js の IntersectionObserver が付与）。
     hero がスクロールアウトすると hero-active が外れ、放大镜が補位入口として現れる。
     分类页は hero-active が付かない＝放大镜は常に表示。 */
  header.hero-active .gs-mob-trigger{display:none;}
}

/* Hero scroll-reveal: search-mini hidden while hero search is in viewport (home page) */
header.hero-active .search-mini{width:0!important;opacity:0;overflow:hidden;pointer-events:none;}

/* 検索欄の clear(×)：OS既定の青を中和し、ミュート色＋手型に統一（hover で玫瑰） */
input[type="search"]::-webkit-search-cancel-button{
  -webkit-appearance:none;appearance:none;width:15px;height:15px;cursor:pointer;
  background-color:var(--muted);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6 6 18' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6 6 18' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:background-color .15s var(--ease-soft);
}
input[type="search"]::-webkit-search-cancel-button:hover{background-color:var(--accent);}

/* GBACODE-47/43: 直リンク(可愛い/泣く/動物)を逐次折りたたみ。
   下拉(catpanel)は常に全9項を表示する設計なので、狭くなったら直リンクを隠すだけでよい
   （隠れても下拉に必ず全項目があり＝死角ゼロ。mob-item の段階表示は不要になった）。
   header 内 <a> 並び: logo(1) / 可愛い(.top2,2) / 泣く(.top2,3) / 動物(.top2,4) */
@media(max-width:920px){ a.top2:nth-of-type(4){display:none;} }  /* 動物を収納 */
@media(max-width:800px){ a.top2:nth-of-type(3){display:none;} }  /* 泣くも収納 */
@media(max-width:700px){ a.top2:nth-of-type(2){display:none;} }  /* 可愛いも収納 */

@media(max-width:640px){
  /* ≤640(モバイル): 下拉を右寄せ（左→右で右端を突破する横スクロールを回避） */
  .catpanel{left:auto;right:0;}
}

.theme{width:40px;height:40px;flex-shrink:0;display:grid;place-items:center;background:none;border:none;border-radius:var(--radius-sm);cursor:pointer;color:var(--text);transition:background .15s,color .15s;}
.theme:hover{background:var(--surface-hover);color:var(--accent);}
/* GBACODE-70: 极窄屏(<360px)で header が溢れる時は、検索放大镜の可見性を優先し暗色切替を隠す。
   logo 文字は触らない(68/69 で放大镜が唯一/補位の検索入口なので可見性が最優先)。
   暗色は prefers-color-scheme で自動追従するため操作不能でも実害小。360px 以上は据え置き。 */
@media(max-width:359px){ .theme{display:none;} }

/* ---------- Pills (人気・関連・兜底) ---------- */
.pills{display:flex;flex-wrap:wrap;gap:10px;}
.pill{display:inline-flex;align-items:center;gap:8px;font-size:0.95rem;padding:10px 18px;border-radius:999px;background:var(--surface);border:1.5px solid var(--border);color:var(--text);text-decoration:none;cursor:pointer;transition:background var(--dur-fast) var(--ease-soft),border-color var(--dur-fast) var(--ease-soft),transform var(--dur-fast) var(--ease-spring);}
.pill:hover{background:var(--surface-hover);transform:translateY(-2px);}
.pill .mono{font-family:var(--kao);color:var(--accent);font-size:0.9em;}

/* ---------- Footer（多列・全站统一） ---------- */
footer.site-footer{border-top:1px solid var(--border);margin-top:72px;padding:44px 0 26px;color:var(--muted);font-size:0.85rem;}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px 24px;align-items:start;}
.foot-col--cats{grid-column:1 / -1;order:9;padding-left:52px;} /* 52px = logo 40 + gap 12，与「顔文字館」文字左对齐 */
.foot-col--cats .cats-wrap{column-width:130px;column-gap:28px;}
.foot-col--cats .cats-wrap a{break-inside:avoid;}
.foot-brand{display:flex;gap:12px;align-items:flex-start;}
.foot-brand .mascot{flex-shrink:0;}
.foot-name{font-family:var(--serif);font-weight:600;font-size:1.06rem;color:var(--text);}
.foot-name .dot{color:var(--accent);}
.foot-tag{margin-top:5px;font-size:0.84rem;line-height:1.6;max-width:22em;}
.foot-col h3{font-family:var(--sans);font-weight:700;font-size:0.76rem;color:var(--text);margin-bottom:12px;letter-spacing:.03em;}
.foot-col a{display:block;color:var(--muted);text-decoration:none;padding:4px 0;transition:color var(--dur-fast) var(--ease-soft);}
.foot-col a:hover{color:var(--accent);}
/* footer 打赏 emoji（site.js 动态包入 .treat-emoji）：仅 hover 该 link 时轻轻晃一下 */
.treat-emoji{display:inline-block;will-change:transform;transform-origin:50% 85%;}
.foot-col a:hover .treat-emoji{animation:treat-wiggle .5s var(--ease-soft);}
@keyframes treat-wiggle{0%,100%{transform:rotate(0);}25%{transform:rotate(-8deg);}55%{transform:rotate(6deg);}80%{transform:rotate(-3deg);}}
@media (prefers-reduced-motion:reduce){.treat-emoji{animation:none!important;}}
.foot-copy{margin-top:34px;padding-top:20px;border-top:1px solid var(--border);font-size:0.78rem;text-align:center;}
.foot-copy a{color:var(--muted);text-decoration:none;border-bottom:1px solid transparent;transition:color .15s,border-color .15s;}
.foot-copy a:hover{color:var(--accent);border-bottom-color:var(--accent);}
@media (max-width:640px){
  .foot-grid{grid-template-columns:1fr 1fr;gap:26px 16px;}
  .foot-brand{grid-column:1 / -1;}
  .foot-col--cats{grid-column:1 / -1;padding-left:0;}
}
@media (max-width:380px){ .foot-grid{grid-template-columns:1fr;} }

/* ---------- Mobile search bar（site.js 注入，仅分类页） ---------- */
.mob-search-bar{
  display:none; /* JS 负责在移动端显示 */
  background:var(--bg);
  border-bottom:1px solid var(--border);
  padding:8px 16px;
}
.mob-search-bar label{
  display:flex;
  align-items:center;
  gap:0;
  position:relative;
  width:100%;
}
.mob-search-bar .mob-si{
  position:absolute;
  left:13px;
  top:50%;
  transform:translateY(-50%);
  color:var(--muted);
  pointer-events:none;
  flex-shrink:0;
}
.mob-search-bar input{
  width:100%;
  height:40px;
  padding:0 14px 0 38px;
  font-family:var(--sans);
  font-size:0.95rem;
  color:var(--text);
  background:var(--surface);
  border:1.5px solid var(--border);
  border-radius:999px;
  outline:none;
  transition:border-color .2s,box-shadow .2s;
}
.mob-search-bar input::placeholder{color:var(--muted);}
.mob-search-bar input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 4px var(--accent-soft);
}
/* GBACODE-68: 分类页の旧式 in-page 检索 bar は廃止し、検索入口を右上の放大镜(全屏全站検索)へ一本化。
   base が display:none のため、モバイルの display:block 上書きを外すだけで全幅で非表示になる。
   （site.js は今も注入するが不可視。#q ミラーは無害なので据え置き。） */

/* ---------- GBACODE-42: 窄屏（≤640px）全屏全站搜索 ----------
   site.js(globalSearch) が header に注入する検索トリガー(.gs-mob-trigger)と、
   既存 #gs-panel を全屏オーバーレイ化する body.gs-mobile スタイル。
   桌面(>640px)では触发器も全屏化も無効＝既存挙動を一切変えない。 */
.gs-mob-trigger{
  display:none; /* 桌面は非表示。≤640px のみ表示（下記 media） */
  width:40px;height:40px;flex-shrink:0;
  place-items:center;
  background:none;border:none;border-radius:var(--radius-sm);
  cursor:pointer;color:var(--text);
  transition:background .15s,color .15s;
}
.gs-mob-trigger:hover{background:var(--surface-hover);color:var(--accent);}

/* 全屏層の上部固定バー（入力欄＋× / 既定は非表示、gs-mobile 時だけ出す） */
.gs-mob-bar{display:none;}
.gs-mob-field{display:flex;align-items:center;position:relative;flex:1;min-width:0;}
.gs-mob-field .gs-mob-si{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  color:var(--muted);pointer-events:none;
}
.gs-mob-field input{
  width:100%;height:46px;padding:0 16px 0 42px;
  font-family:var(--sans);font-size:1rem;color:var(--text);
  background:var(--surface);border:1.5px solid var(--border);
  border-radius:999px;outline:none;
  transition:border-color .2s,box-shadow .2s;
}
.gs-mob-field input::placeholder{color:var(--muted);}
.gs-mob-field input:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft);}
/* GBACODE-64: 全屏層では外部の × (.gs-mob-close) が「検索を閉じる」唯一の操作。
   input[type=search] の原生 clear を消し、似た × が二つ並ぶ混乱を防ぐ（キーワード消去は文字削除で）。 */
.gs-mob-field input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;display:none;}
.gs-mob-close{
  flex-shrink:0;width:42px;height:42px;display:grid;place-items:center;
  background:none;border:none;border-radius:var(--radius-sm);
  cursor:pointer;color:var(--muted);
  transition:background .15s,color .15s;
}
.gs-mob-close:hover{background:var(--surface-hover);color:var(--accent);}

@media(max-width:640px){
  .gs-mob-trigger{display:grid;}

  /* 全屏オーバーレイ：絹白底でビューポート全面、上部に固定バー＋下に結果スクロール */
  body.gs-mobile{overflow:hidden;} /* 背後スクロール抑止 */
  body.gs-mobile #gs-panel{
    position:fixed;inset:0;z-index:200;
    display:block;
    background:var(--bg);          /* 絹白底（純白 #FFF は使わない） */
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
  }
  /* 上部固定バー */
  body.gs-mobile .gs-mob-bar{
    display:flex;align-items:center;gap:8px;
    position:sticky;top:0;z-index:2;
    padding:10px 14px;
    background:color-mix(in srgb,var(--bg) 92%,transparent);
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    border-bottom:1px solid var(--border);
  }
  /* 結果ラッパは全屏向けに余白を詰める（首页の吸頂用 padding-top は不要） */
  body.gs-mobile .gs-wrap{padding:18px 16px 64px;}
  body.gs-mobile.gs-home .gs-wrap{padding-top:18px;}
  /* GBACODE-67: 全屏検索(gs-mobile)では gs-home 用の吸頂 padding-top:80px(site.js injectCSS,
     同詳細度で後勝ち)が漏れ、検索バー〜結果見出し間に大きな空白が出る。詳細度を 1 つ上げて 18px に戻す。 */
  body.gs-mobile.gs-home.gs-active .gs-wrap{padding-top:18px;}
  /* 全屏中は首页 hero 吸頂レイアウトを無効化（mob バーが唯一の入口） */
  body.gs-mobile.gs-home #hero-search{position:static!important;}
}

/* ---------- 减动降级（看板娘动效由 mascot.js 单独降级） ---------- */
@media (prefers-reduced-motion: reduce){
  *,::before,::after{animation-duration:.001ms!important;transition-duration:.001ms!important;}
}

@media (max-width:560px){ .nav{gap:10px;} .logo .word{font-size:1.2rem;} }
/* 极窄屏(Galaxy S8+ 360px 等):收紧间距/字号,保证 logo 与导航单行不折行 */
@media (max-width:400px){
  .nav{gap:8px;}
  .logo{gap:8px;}
  .logo .word{font-size:1.05rem;}
  .navlink{font-size:0.92rem;padding:8px 10px;}
}

/* ---------- 跨文档 View Transitions（MPA nav 切换:整页柔和淡入,logo/header 不硬闪） ----------
   开启后,同源整页导航不再硬闪;给 header 与 logo 稳定 view-transition-name,
   让浏览器把新旧页的它们当同一元素保持(morph)而非重画 → 看板娘 logo 视觉连续。
   Chrome/Edge 支持;Safari/Firefox 暂不支持跨文档 VT → 自动优雅降级为当前整页加载,无害。 */
@view-transition{ navigation:auto; }
/* 头部 logo 每页都是 .logo>.mascot(仅此一个,单文档内唯一,安全)。用类选择器而非 #logo:
   只有分类页有 id=logo,hub/一覧/法务/404 没有 → 必须用 .logo .mascot 才能让所有页的 logo
   都参与跨页 morph,否则 hub↔分类 切换时一侧无名 → 无法保持、仍会闪。
   配套:logo 的 SVG 已静态内联进各页 HTML,保证首帧就在 → VT 截到真 logo 不再淡入空壳。 */
/* GBACODE-53: 全頁共通の logo hop アニメ（id=logo 無し頁でも検索コピー時に跳ねる） */
.logo .mascot.cheer{animation:hop 720ms var(--ease-spring);transform-origin:center bottom;}
@keyframes hop{0%{transform:translateY(0);}30%{transform:translateY(-8px);}60%{transform:translateY(-3px);}80%{transform:translateY(-5px);}100%{transform:translateY(0);}}
@media (prefers-reduced-motion:reduce){.logo .mascot.cheer{animation:none;}}
.logo .mascot{ view-transition-name:site-logo; }
header{ view-transition-name:site-header; }
/* 克制:短柔和淡入(默认根过渡即可;此处仅微调时长,保持 taste 不浮夸) */
::view-transition-old(root),
::view-transition-new(root){ animation-duration:var(--dur-base); animation-timing-function:var(--ease-soft); }

/* reduced-motion 降级(design.md 铁律:全部动效降级) → VT 动画瞬时关停 */
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*){ animation:none !important; }
}
