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

:root{
  --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:"Noto Sans JP",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);
}
[data-theme="dark"]{
  --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;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}

/* ---------- 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;}
.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;}
@media(max-width:640px){ .search-mini{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;}

/* Mobile nav: hide top-2 direct navlinks; accessible via カテゴリー dropdown instead */
@media(max-width:640px){.top2{display:none;}}

/* catpanel mobile-only items (complement for hidden top-2 links) */
.catpanel .mob-item{display:none;}
.catpanel .mob-sep{display:none;}
@media(max-width:640px){
  /* 窄屏下拉改右对齐(从按钮右缘向左展开),避免从左缘向右顶破右边界产生横向滚动 */
  .catpanel{left:auto;right:0;}
  .catpanel .mob-item{display:flex;}
  .catpanel .mob-sep{display:block;}
}

.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);}

/* ---------- 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{border-top:1px solid var(--border);margin-top:64px;padding:32px 0;text-align:center;color:var(--muted);font-size:0.85rem;}

/* ---------- 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);
}
@media(max-width:640px){
  .mob-search-bar{display:block;}
}

/* ---------- 减动降级（看板娘动效由 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 不再淡入空壳。 */
.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; }
}
