/* =========================================================
   full-house — Neo-Swiss / editorial
   off-white · black · gray + 高亮色 #7DC300(最高亮色 #FF2984 は小さな印だけ)
   ========================================================= */

:root {
  color-scheme: light;
  --paper: #f2f1ec;
  --paper-2: #e6e4de;
  --ink: #0d0d0d;
  --gray: #85847e;
  --gray-2: #bab8b1;
  --soft: rgba(13, 13, 13, .12);
  --acid: #7dc300;
  --hot: #ff2984;
  --glass: rgba(242, 241, 236, .62);
  --blur: blur(12px) saturate(115%);

  --io: cubic-bezier(.7, 0, .2, 1);

  --sans: "Archivo", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --bar: 50px;
  --gut: clamp(20px, 3vw, 56px);   /* 画面の左右の余白 */
  --gap: clamp(24px, 2.6vw, 44px); /* カード同士の間隔 */
  --pad: clamp(20px, 2vw, 32px);   /* ウィンドウ内の余白 */
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--paper); scrollbar-gutter: stable; -webkit-text-size-adjust: 100%; }
html.modal-open { overflow: hidden; }
body {
  margin: 0; min-height: 100vh;
  background: var(--paper); color: var(--ink);
  font: 400 15px/1.6 var(--sans);
  font-feature-settings: "palt";
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
button { padding: 0; border: 0; background: none; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
a { color: inherit; }
::selection { background: var(--acid); color: var(--ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.u {
  font-family: var(--mono); font-size: 11px; font-weight: 400; line-height: 1.45;
  letter-spacing: .04em; text-transform: uppercase; font-feature-settings: normal;
}
.ic { display: block; flex: none; width: 1.1em; height: 1.1em; }
.line { display: block; overflow: hidden; }
.line > span { display: inline-block; }

/* テキストが上下にロールする(ナビ) */
.roll { display: grid; overflow: hidden; }
.roll > span { grid-area: 1 / 1; transition: transform .45s var(--io); }
.roll > span + span { transform: translateY(110%); }

/* ---------- ヘッダー ---------- */
.bar {
  position: fixed; inset: 0 0 auto; z-index: 30;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
  height: var(--bar); padding-left: var(--gut);
  background: rgba(242, 241, 236, .72);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border-bottom: 1px solid var(--ink);
}
.bar-logo { font: 800 17px/1 "Unbounded", var(--sans); letter-spacing: -.01em; text-decoration: none; white-space: nowrap; }
.bar-nav { position: relative; display: flex; justify-self: end; align-self: stretch; margin-block: -1px; }
.nav-thumb { position: absolute; top: 0; bottom: 0; left: 0; width: 0; background: var(--acid); }
.bar-nav.ready .nav-thumb { transition: transform .4s var(--io), width .4s var(--io); }
.nav-item { position: relative; z-index: 1; padding: 0 24px; border-left: 1px solid var(--ink); white-space: nowrap; }
.nav-item:hover .roll > span:first-child { transform: translateY(-110%); }
.nav-item:hover .roll > span + span { transform: none; }

/* ログイン(Clerk) */
.bar-auth { position: relative; display: flex; align-self: stretch; margin-block: -1px; }
.bar-auth:empty { display: none; }
.auth-btn { padding: 0 20px; border-left: 1px solid var(--ink); white-space: nowrap; transition: background .2s; }
.auth-btn:hover { background: var(--acid); }
/* 閲覧にログインは要らないので、Sign in は目立たせない */
.auth-in { color: var(--gray); }
.auth-in:hover { color: var(--ink); }
.auth-dot { display: grid; place-items: center; width: 50px; border-left: 1px solid var(--ink); transition: background .2s; }
.auth-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--acid); }
.auth-dot:hover, .auth-dot[aria-expanded="true"] { background: var(--paper-2); }
.auth-menu {
  position: absolute; top: 100%; right: 0; display: grid; min-width: 220px;
  background: var(--paper); border: 1px solid var(--ink);
}
.auth-email { padding: 12px 16px; color: var(--gray); text-transform: none; border-bottom: 1px solid var(--soft); overflow-wrap: anywhere; }
.auth-menu .auth-btn { padding: 12px 16px; border: 0; text-align: left; }

#page { position: relative; z-index: 1; padding-top: var(--bar); }

/* 背景の大きな文字:右下に置いてぼかす。本文より後ろで、読むのを邪魔しない */
.bg-word {
  position: fixed; right: -1vw; top: 2vw; z-index: 0; pointer-events: none; user-select: none;
  font-size: 26vw; font-weight: 900; font-stretch: 62%; line-height: .8; letter-spacing: -.035em;
  text-transform: uppercase; white-space: nowrap;
  color: rgba(13, 13, 13, .07); filter: blur(6px);
}

/* ---------- 一覧:フィルタ・検索 ---------- */
.deck-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 40px; padding: 44px var(--gut) 36px; }
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.f {
  display: inline-flex; align-items: center; gap: 10px; height: 32px; padding: 0 14px;
  border: 1px solid var(--ink); transition: background .2s var(--io), color .2s var(--io);
}
.f:hover { background: var(--ink); color: var(--paper); }
.f.active { background: var(--acid); color: var(--ink); }
.search { display: flex; align-items: center; gap: 14px; }
.search input {
  width: min(300px, 40vw); height: 32px; padding: 0; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0;
  background: transparent; color: var(--ink); font: 400 14px var(--sans); outline: 0;
}
.search input::placeholder { color: var(--gray-2); }
.search input:focus { border-bottom: 2px solid var(--ink); }
.search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search kbd { padding: 1px 6px; border: 1px solid var(--ink); font: inherit; }

/* ---------- ウィンドウ ---------- */
.window { position: relative; border: 1px solid var(--ink); background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.win-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 40px; padding: 0 0 0 14px; border-bottom: 1px solid var(--ink);
}
.win-bar > span:first-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.win-btns { display: flex; align-self: stretch; }
.sq {
  display: grid; place-items: center; width: 34px; height: 34px; flex: none;
  border: 1px solid var(--ink); background: var(--paper); color: var(--ink); text-decoration: none;
  transition: background .2s var(--io), color .2s var(--io);
}
.sq .ic { width: 15px; height: 15px; }
.sq:hover { background: var(--ink); color: var(--paper); }
.win-bar .sq { align-self: stretch; width: 40px; height: auto; border: 0; border-left: 1px solid var(--ink); background: transparent; }
.win-bar .sq:hover { background: var(--acid); color: var(--ink); }
/* 窓の右上の注記(テスト機能など) */
.win-note { display: inline-flex; align-items: center; gap: 8px; padding-right: 14px; color: var(--gray); text-transform: none; white-space: nowrap; }
.win-note::before { content: ""; width: 8px; height: 8px; background: var(--hot); }
.fill { margin: 36px var(--gut) var(--gut); }

/* 図形アート */
.art { position: relative; overflow: hidden; aspect-ratio: 2 / 1; background: var(--acid); color: var(--ink); }
.art .motif { position: absolute; inset: 0; width: 100%; height: 100%; }
.art-tag { position: absolute; top: 10px; left: 12px; }
.art-idx { position: absolute; bottom: 10px; left: 12px; }
.motif .hot { fill: var(--paper); stroke: var(--ink); stroke-width: 1.2; }
.mo-pop { transition: translate .5s var(--io); }
.art.play .mo-pop, .card:hover .mo-pop { translate: 0 -6px; }
.mo-bar { transform-box: fill-box; transform-origin: center; }
.art.play .mo-bar, .card:hover .mo-bar { animation: eq .7s steps(4) infinite alternate; animation-delay: calc(var(--i) * -70ms); }
.mo-fill { transform-box: fill-box; transform-origin: left center; }
.art.play .mo-fill, .card:hover .mo-fill { animation: typeIn .7s var(--io) both; animation-delay: calc(var(--i) * 110ms); }
.art.play .mo-head, .card:hover .mo-head { animation: sweep 2.4s steps(12) infinite; }
.mo-star { transform-box: fill-box; transform-origin: center; transition: rotate .7s var(--io); }
.art.play .mo-star, .card:hover .mo-star { rotate: 45deg; }
.mo-spark { transform-box: fill-box; transform-origin: center; }
.art.play .mo-spark, .card:hover .mo-spark { animation: blinkS 1.2s steps(1) infinite; animation-delay: calc(var(--i) * .3s); }
.mo-b1, .mo-b2 { transition: translate .6s var(--io); }
.art.play .mo-b1, .card:hover .mo-b1 { translate: 0 33px; }
.art.play .mo-b2, .card:hover .mo-b2 { translate: 0 -33px; }
/* 追加したモチーフ(Salley 〜 YouTube集計) */
.art.play .mo-hop, .card:hover .mo-hop { animation: hop .9s steps(1) infinite; animation-delay: calc(var(--i) * 150ms); }
.art.play .mo-crop, .card:hover .mo-crop { animation: cropX 1.8s var(--io) infinite alternate; }
.art.play .mo-lens, .card:hover .mo-lens { animation: lens 3s var(--io) infinite; }
.mo-draw { stroke-dasharray: 1; }
.art.play .mo-draw, .card:hover .mo-draw { animation: draw 1.2s var(--io) both; }
.mo-ring { transform-box: fill-box; transform-origin: center; opacity: 0; }
.art.play .mo-ring, .card:hover .mo-ring { animation: ring 1.4s ease-out 1s infinite; }
.mo-left, .mo-right { transition: translate .6s var(--io); }
.mo-left { translate: -8px 0; }
.mo-right { translate: 8px 0; }
.art.play .mo-left, .art.play .mo-right, .card:hover .mo-left, .card:hover .mo-right { translate: 0 0; }
.art.play .mo-flash, .card:hover .mo-flash { animation: flash 2.4s linear .6s infinite; }
.mo-progress { stroke-dasharray: 1; stroke-dashoffset: .45; }
.art.play .mo-progress, .card:hover .mo-progress { animation: progress 3s var(--io) infinite; }
.art.play .mo-drift, .card:hover .mo-drift { animation: drift 2.4s steps(8) infinite; animation-delay: calc(var(--i) * -.8s); }
.art.play .mo-scan, .card:hover .mo-scan { animation: scanY 2s steps(8) infinite alternate; }
.mo-ok { transform-box: fill-box; transform-origin: center; }
.art.play .mo-ok, .card:hover .mo-ok { animation: okPop .5s var(--io) .5s both; }
.art.play .mo-count, .card:hover .mo-count { animation: blinkS 1.2s steps(1) infinite; animation-delay: calc(var(--i) * .2s); }
.mo-grow { transform-box: fill-box; transform-origin: center bottom; }
.art.play .mo-grow, .card:hover .mo-grow { animation: grow .7s var(--io) both; animation-delay: calc(var(--i) * 90ms); }
@keyframes hop { 50% { translate: 0 -4px; } }
@keyframes cropX { from { translate: 0 0; } to { translate: 50px 0; } }
@keyframes lens { 0%, 100% { translate: 0 0; } 33% { translate: -46px -18px; } 66% { translate: -30px 8px; } }
@keyframes draw { from { stroke-dashoffset: 1; } }
@keyframes ring { from { scale: .6; opacity: 1; } to { scale: 1.8; opacity: 0; } }
@keyframes flash { 0%, 100% { opacity: 0; } 5% { opacity: .85; } }
@keyframes progress { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes drift { from { translate: 16px 0; } to { translate: -16px 0; } }
@keyframes scanY { from { translate: 0 0; } to { translate: 0 66px; } }
@keyframes okPop { from { scale: 0; } }
@keyframes grow { from { scale: 1 0; } }
@keyframes eq { from { scale: 1 .35; } to { scale: 1 1; } }
@keyframes typeIn { from { scale: 0 1; } }
@keyframes sweep { from { translate: 0 0; } to { translate: 132px 0; } }
@keyframes blinkS { 50% { opacity: 0; } }

/* ---------- 一覧:カード(2列) ---------- */
.cards { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); padding: 0 var(--gut) 120px; }
.card { display: flex; flex-direction: column; border: 1px solid var(--ink); background: var(--paper); cursor: pointer; }
.card.leaving { pointer-events: none; }
.card-body { display: grid; flex: 1; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); min-height: 280px; }
.card .art { aspect-ratio: auto; border-right: 1px solid var(--ink); background: var(--paper-2); transition: background .2s var(--io); }
.card:hover .art, .card:focus-visible .art, .card.hold .art { background: var(--acid); }
.card-text { display: flex; flex-direction: column; gap: 20px; min-width: 0; padding: var(--pad) calc(var(--pad) + 4px); }
.card-name { margin: 0; font-size: clamp(72px, 3.4vw, 58px); font-weight: 900; font-stretch: 66%; line-height: .92; letter-spacing: -.02em; text-transform: uppercase; overflow-wrap: anywhere; }
.card-tag { margin: auto 0 0; font-size: 15px; line-height: 1.7; letter-spacing: .05em; }
.card-na { padding-right: 14px; }
.empty { padding: 32px var(--gut); color: var(--gray); }

/* 日本語の名前:幅の圧縮が効かないので、字間と行間をふつうに戻す */
.card-name.jp { font-size: clamp(64px, 2.8vw, 46px); line-height: 1.2; letter-spacing: 0; }

/* ---------- ネットワーク ---------- */
.check { display: inline-flex; align-items: center; gap: 10px; align-self: stretch; padding: 0 14px; border-left: 1px solid var(--ink); cursor: pointer; }
.check input { position: absolute; opacity: 0; pointer-events: none; }
.check .box { position: relative; width: 12px; height: 12px; border: 1px solid var(--ink); background: var(--paper); }
.check input:checked + .box { background: var(--acid); }
.check input:checked + .box::after { content: ""; position: absolute; inset: 2px; background: var(--ink); }
.check input:focus-visible + .box { outline: 2px solid var(--ink); outline-offset: 2px; }
.check:hover { background: var(--acid); }

.graph-box { position: relative; }
#graph { display: block; width: 100%; height: max(440px, calc(100vh - var(--bar) - 78px - var(--gut))); touch-action: none; cursor: crosshair; }
#graph .link { stroke: var(--ink); stroke-width: 1.5; stroke-linecap: butt; transition: opacity .3s var(--io), stroke-width .2s var(--io); }
#graph .link.low { stroke-dasharray: 5 5; }
#graph .link.kw { stroke-dasharray: 2 4; opacity: .5; }
#graph .link.hl { stroke-width: 2.5; }
#graph .link.low.hl { animation: dash .6s linear infinite; }
#graph .link-hit { stroke: transparent; stroke-width: 16; cursor: help; }
#graph .node { cursor: pointer; transition: opacity .3s var(--io); }
#graph .tile { color: var(--ink); }
#graph .tile .bg { fill: var(--paper); stroke: var(--ink); stroke-width: 1; transition: fill .2s var(--io); }
#graph .node:hover .tile .bg { fill: var(--acid); }
#graph .node.focused .tile { color: var(--paper); }
#graph .node.focused .tile .bg { fill: var(--ink); }
#graph .mark { fill: var(--hot); opacity: 0; }
#graph .node.focused .mark { opacity: 1; }
#graph .node text { fill: var(--ink); font: 800 13px var(--sans); font-stretch: 80%; text-anchor: middle; letter-spacing: .02em; }
#graph .kw text { font: 400 10.5px var(--mono); text-anchor: start; text-transform: none; letter-spacing: .02em; }
#graph .kw rect { fill: var(--ink); }
#graph .dim { opacity: .14; }
@keyframes dash { to { stroke-dashoffset: -20; } }
.tip { position: absolute; z-index: 3; max-width: 280px; padding: 10px 12px; background: var(--ink); color: var(--paper); font-size: 12.5px; line-height: 1.55; pointer-events: none; }
.tip b { display: block; margin-bottom: 4px; color: var(--acid); font: 400 10.5px var(--mono); letter-spacing: .04em; text-transform: uppercase; }

/* ---------- Table(2軸で並べる) ---------- */
.tabs { position: relative; display: flex; align-self: stretch; }
.tab-thumb { position: absolute; top: 0; bottom: 0; left: 0; width: 0; background: var(--acid); }
.tabs.ready .tab-thumb { transition: transform .4s var(--io), width .4s var(--io); }
.tab { position: relative; z-index: 1; padding: 0 16px; border-left: 1px solid var(--ink); white-space: nowrap; }
.table-plot { position: relative; height: max(460px, calc(100vh - var(--bar) - 78px - var(--gut))); margin: 0 var(--pad); }
.plane {
  position: absolute; inset: 60px 0 52px;
  border: 1px solid var(--ink);
  background-image:
    linear-gradient(var(--soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--soft) 1px, transparent 1px);
  background-size: 10% 10%;
}
.axis { position: absolute; background: var(--ink); }
.axis-x { left: 0; right: 0; top: 50%; height: 1px; }
.axis-y { top: 0; bottom: 0; left: 50%; width: 1px; }
.axis-label { position: absolute; z-index: 1; display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px; border: 1px solid var(--ink); background: var(--paper); white-space: nowrap; }
.axis-label .ic { width: 12px; height: 12px; }
.axis-label.y-max { top: 18px; left: 50%; transform: translateX(-50%); }
.axis-label.y-min { bottom: 12px; left: 50%; transform: translateX(-50%); }
.axis-label.x-min { left: 0; top: calc(50% + 8px); }
.axis-label.x-max { right: 0; top: calc(50% + 8px); }
.pin {
  --icon: 44px;
  position: absolute; z-index: 2; left: 50%; top: 50%;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  transform: translate(-50%, calc(var(--icon) / -2));
  transition: left .7s var(--io), top .7s var(--io);
  transition-delay: calc(var(--i) * 35ms);
}
.pin .glyph { display: grid; place-items: center; width: var(--icon); height: var(--icon); border: 1px solid var(--ink); background: var(--paper); transition: background .2s var(--io); }
.pin .glyph .ic { width: 20px; height: 20px; stroke-width: 1.6; }
.pin b {
  position: absolute; top: calc(100% + 8px); left: 50%; translate: -50% 0;
  padding: 1px 6px; font-size: 12.5px; font-weight: 800; font-stretch: 80%; letter-spacing: .02em; white-space: nowrap;
}
/* 名前の位置(重なりを避けて JS が決める) */
.pin[data-lab="right"] b { top: 50%; left: calc(100% + 8px); translate: 0 -50%; }
.pin[data-lab="left"] b { top: 50%; left: auto; right: calc(100% + 8px); translate: 0 -50%; }
.pin[data-lab="top"] b { top: auto; bottom: calc(100% + 8px); }
.pin:hover { z-index: 4; }
.pin:hover .glyph, .pin:focus-visible .glyph, .pin.focused .glyph { background: var(--acid); }
.pin.focused { z-index: 3; }
.pin-tip {
  position: absolute; top: calc(100% + 38px); left: 50%; width: max-content; max-width: 240px;
  padding: 8px 10px; background: var(--ink); color: var(--paper); font-size: 12px; line-height: 1.55; text-align: left;
  clip-path: inset(0 0 100% 0); translate: -50% 0; transition: clip-path .25s var(--io); pointer-events: none;
}
.pin:hover .pin-tip, .pin:focus-visible .pin-tip { clip-path: inset(0); }
.pin:is([data-lab="right"], [data-lab="left"], [data-lab="top"]) .pin-tip { top: calc(100% + 8px); }

/* ---------- Combos(組み合わせ) ---------- */
.combos { padding: 0 calc(var(--pad) + 4px); }
.combo { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; padding: 36px 0 40px; border-top: 1px solid var(--ink); }
.combo:first-child { border-top: 0; }
.cb-num { grid-column: 1 / span 2; font-size: clamp(40px, 4.4vw, 72px); font-weight: 900; font-stretch: 62%; line-height: .8; }
.cb-main { grid-column: 3 / span 10; }
.cb-main h3 { margin: 0 0 22px; font-size: clamp(24px, 2.3vw, 36px); font-weight: 900; line-height: 1.25; letter-spacing: 0; }
.chain { display: flex; flex-wrap: wrap; align-items: center; row-gap: 10px; }
.step { display: inline-flex; align-items: center; height: 42px; border: 1px solid var(--ink); background: var(--paper); transition: background .2s var(--io); }
.step .glyph { display: grid; place-items: center; width: 42px; height: 100%; border-right: 1px solid var(--ink); }
.step .glyph .ic { width: 18px; height: 18px; stroke-width: 1.6; }
.step b { padding: 0 14px; font-size: 13px; font-weight: 800; font-stretch: 80%; text-transform: uppercase; white-space: nowrap; }
.step:hover { background: var(--acid); }
.link { position: relative; width: clamp(32px, 4vw, 64px); height: 1px; background: var(--ink); }
.link::after { content: ""; position: absolute; right: -1px; top: -4px; border-left: 7px solid var(--ink); border-block: 4.5px solid transparent; }
.cb-desc { max-width: 42em; margin: 20px 0 0; font-size: 14.5px; line-height: 1.75; }

/* ---------- 詳細ウィンドウ ---------- */
.scrim { position: fixed; inset: 0; z-index: 40; background: rgba(242, 241, 236, .55); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); opacity: 0; transition: opacity .3s var(--io); }
.scrim.show { opacity: 1; }
.layer { position: fixed; z-index: 41; background: var(--acid); border: 1px solid var(--ink); transform-origin: 0 0; }
.detail { position: fixed; z-index: 42; display: flex; flex-direction: column; background: rgba(242, 241, 236, .8); }
.detail-body { display: grid; flex: 1; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); min-height: 0; }
.d-left { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; padding: 28px calc(var(--pad) + 4px) 32px; border-right: 1px solid var(--ink); scrollbar-width: thin; }
.d-right { min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.d-name { margin: 0; font-size: clamp(56px, 6.4vw, 112px); font-weight: 900; font-stretch: 62%; line-height: .88; letter-spacing: -.02em; text-transform: uppercase; }
/* 表示アニメーション用のマスク。字の上下が切れないよう余白をとる */
.d-name .line { padding: .06em 0 .1em; margin: -.06em 0 -.1em; }
.d-name.jp { font-size: clamp(44px, 4.8vw, 80px); line-height: 1.2; letter-spacing: 0; }
.d-alias { margin: 14px 0 0; color: var(--gray); }
.d-left .art { flex: none; margin: 28px 0 22px; border: 1px solid var(--ink); }
.d-tag { margin: 0; font-size: 16px; line-height: 1.7; letter-spacing: .05em; }
.d-url { align-self: flex-start; margin-top: 12px; color: var(--ink); text-underline-offset: 3px; }
.d-url:hover { background: var(--acid); }
.d-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.d-actions .btn { height: 48px; padding: 0 20px; gap: 10px; font-size: 12.5px; }
.d-actions .btn .ic { width: 17px; height: 17px; }
.btn {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px;
  border: 1px solid var(--ink); background: var(--paper); color: var(--ink); text-decoration: none; white-space: nowrap;
  transition: background .2s var(--io), color .2s var(--io);
}
.btn .ic { width: 14px; height: 14px; }
.btn:hover { background: var(--ink); color: var(--paper); }
.btn.acid { background: var(--acid); }
.btn.acid:hover { background: var(--ink); color: var(--acid); }
.btn.off { color: var(--gray); pointer-events: none; }

.d-tabs { position: sticky; top: 0; z-index: 2; display: flex; border-bottom: 1px solid var(--ink); background: rgba(242, 241, 236, .9); }
.d-tabs .tab { height: 40px; }
.d-tabs .tab:first-of-type { border-left: 0; }
.d-tabs .tab:last-of-type { border-right: 1px solid var(--ink); }
.d-panes { position: relative; padding: 28px calc(var(--pad) + 4px) 36px; }
.d-panes.animating { overflow: hidden; }
.d-sub { margin: 64px 0 14px; color: var(--gray); }

/* しくみ(入力 → アプリ → 出力) */
.flow { display: grid; grid-template-columns: minmax(0, 1fr) 44px auto 44px minmax(0, 1fr); align-items: center; row-gap: 8px; }
.flow .cap { grid-row: 1; color: var(--gray); }
.flow .cap-in { grid-column: 1; }
.flow .cap-out { grid-column: 5; }
.flow .col-in { grid-row: 2; grid-column: 1; }
.flow .pipe-in { grid-row: 2; grid-column: 2; }
.flow .core { grid-row: 2; grid-column: 3; }
.flow .pipe-out { grid-row: 2; grid-column: 4; }
.flow .col-out { grid-row: 2; grid-column: 5; }
.flow-col { display: grid; gap: 8px; }
.io { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid var(--ink); background: var(--paper); font-size: 13.5px; line-height: 1.4; }
.io .ic { width: 15px; height: 15px; }
.core { display: grid; justify-items: center; gap: 8px; padding: 14px 16px; border: 1px solid var(--ink); background: var(--acid); }
.core .ic { width: 26px; height: 26px; stroke-width: 1.6; }
.pipe { position: relative; height: 1px; background: var(--ink); }
.pipe::after { content: ""; position: absolute; right: -1px; top: -4px; border-left: 7px solid var(--ink); border-block: 4.5px solid transparent; }
.kw { display: flex; flex-wrap: wrap; gap: 8px; }
.kw > span { padding: 4px 9px; border: 1px solid var(--ink); font-size: 12.5px; }

/* リスト行 */
.list { border-top: 1px solid var(--ink); }
.li {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; column-gap: 14px;
  width: 100%; padding: 15px 0; border-bottom: 1px solid var(--ink); text-align: left;
}
.li > .u:first-child { align-self: start; padding-top: 3px; color: var(--gray); }
.li b { display: block; font-size: 15px; font-weight: 700; line-height: 1.45; }
.li small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.6; color: var(--gray); }
button.li::before { content: ""; position: absolute; inset: 0 calc(-1 * (var(--pad) + 4px)); z-index: -1; background: var(--acid); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--io); }
button.li:hover::before, button.li:focus-visible::before { transform: scaleX(1); }
button.li:hover small { color: var(--ink); }
/* 連携の強さ:線の見本(高 = 実線、低 = 点線)+ 文字 */
.str { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); }
.str::before { content: ""; width: 22px; border-top: 1.5px solid var(--ink); }
.str-low::before { border-top-style: dashed; }

/* ---------- トースト ---------- */
.toast {
  position: fixed; left: var(--gut); bottom: var(--gut); z-index: 60;
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  background: var(--ink); color: var(--paper);
  transform: translateY(calc(100% + 60px)); transition: transform .35s var(--io);
}
.toast::before { content: ""; width: 8px; height: 8px; background: var(--acid); }
.toast.show { transform: none; }

/* ---------- 編集モード ---------- */
.editing [data-edit] { cursor: text; transition: outline-color .15s; outline: 1px dashed transparent; outline-offset: 3px; }
.editing [data-edit]:hover { outline-color: var(--gray); }
.editing [data-edit]:empty::before { content: attr(data-ph); color: var(--gray-2); }
.editing [data-edit].is-editing { outline: 2px solid var(--acid); background: rgba(125, 195, 0, .12); cursor: text; }
.editing .card { cursor: default; }
.x {
  display: inline-grid; place-items: center; width: 22px; height: 22px; margin-left: 4px;
  font: 400 14px/1 var(--mono); color: var(--gray); transition: color .15s, background .15s;
}
.x:hover { background: var(--hot); color: var(--paper); }
.kw > span { display: inline-flex; align-items: center; }
.kw > span .x { width: 18px; height: 18px; margin: -4px -6px -4px 4px; }
.kw-add, .kw-input { padding: 4px 9px; border: 1px dashed var(--ink); font: inherit; font-size: 12.5px; }
.kw-add:hover { background: var(--acid); border-style: solid; }
.kw-input { width: 140px; background: var(--paper); outline: 2px solid var(--acid); }
.add-row { color: var(--gray); cursor: pointer; }
.add-row:hover { color: var(--ink); }
.add-row select { width: 100%; height: 32px; border: 1px dashed var(--ink); background: var(--paper); font: inherit; font-size: 14px; }
.rel-ctl { display: flex; align-items: center; gap: 6px; }
.str-edit { display: flex; }
.str-opt { height: 24px; padding: 0 8px; border: 1px solid var(--ink); color: var(--gray); }
.str-opt + .str-opt { border-left: 0; }
.str-opt.on { background: var(--ink); color: var(--paper); }
.str-opt:not(.on):hover { background: var(--acid); color: var(--ink); }
.d-edit { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--gray-2); }
.d-edit select { border: 0; background: none; font: inherit; text-transform: none; cursor: pointer; }
.btn.danger { color: var(--hot); border-color: var(--hot); }
.btn.danger:hover { background: var(--hot); color: var(--paper); }
.card-add {
  display: grid; place-content: center; justify-items: center; gap: 12px; min-height: 320px;
  border: 1px dashed var(--ink); color: var(--gray); transition: background .2s var(--io), color .2s var(--io);
}
.card-add:hover { background: var(--acid); color: var(--ink); border-style: solid; }
.card-add-plus { font: 900 96px/.8 var(--sans); font-stretch: 62%; }
.edit-bar {
  position: fixed; right: var(--gut); bottom: var(--gut); z-index: 60;
  display: flex; align-items: stretch; background: var(--ink); color: var(--paper);
}
.edit-state { display: flex; align-items: center; gap: 10px; padding: 0 16px; }
.edit-state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--acid); }
.edit-bar.dirty .edit-state::before { background: var(--hot); }
.edit-btn { padding: 12px 16px; border-left: 1px solid rgba(242, 241, 236, .25); }
.edit-btn:hover { background: var(--paper); color: var(--ink); }
.edit-btn.save { background: var(--acid); color: var(--ink); }
.edit-btn.save:hover { background: var(--paper); }
.edit-btn.save:disabled { background: none; color: var(--gray); cursor: default; }
.edit-btn:disabled { color: var(--gray); cursor: default; }
.edit-btn:disabled:hover { background: none; }

/* Input / Output の箱 */
.io .x { margin: -4px -6px -4px auto; }
.io-add { justify-content: center; border-style: dashed; color: var(--gray); cursor: pointer; }
.io-add:hover { background: var(--acid); color: var(--ink); border-style: solid; }

/* カテゴリの編集 */
.f-edit { height: 32px; padding: 0 14px; border: 1px dashed var(--ink); color: var(--gray); }
.f-edit:hover { background: var(--ink); color: var(--paper); border-style: solid; }
.cat-panel { margin: -12px var(--gut) 32px; border: 1px solid var(--ink); background: var(--paper); }
.cat-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) 48px 36px; align-items: center; border-bottom: 1px solid var(--soft); }
.cat-row > * { padding: 0 14px; }
.cat-row input { height: 40px; border: 0; border-right: 1px solid var(--soft); background: none; font: inherit; font-size: 14px; }
.cat-row input:focus { outline: 2px solid var(--acid); outline-offset: -2px; }
.cat-row .x { justify-self: center; padding: 0; }
.cat-row .x:disabled { opacity: .3; cursor: not-allowed; background: none; color: var(--gray); }
.cat-head { height: 32px; color: var(--gray); }
.cat-add { width: 100%; height: 40px; padding: 0 14px; text-align: left; color: var(--gray); }
.cat-add:hover { background: var(--acid); color: var(--ink); }

/* ---------- Combos の下のフッター:真ん中に手札(AI チャット・要望ボックスの入口。今は準備中) ---------- */
.foot { position: relative; z-index: 1; display: flex; justify-content: center; padding: 8px 0 48px; }
.hand { position: relative; }
.hand-btn { display: block; width: 60px; height: 60px; }
/* 黒い枠は出さない。キーボードで選んだときはカードが開くことで示す */
.hand-btn:focus-visible { outline: none; }
.hand-svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* 下辺の中央を軸に、少しずつ傾けて重ねる → ホバー / 開いているときは扇形に */
.hand-card { transform-box: fill-box; transform-origin: 50% 100%; transition: rotate .45s var(--io), translate .45s var(--io); }
.hand-card.c1 { rotate: -8deg; }
.hand-card.c2 { rotate: -2deg; }
.hand-card.c3 { rotate: 5deg; }
.hand-btn:is(:hover, :focus-visible, [aria-expanded="true"]) .c1 { rotate: -30deg; translate: -3px 0; }
.hand-btn:is(:hover, :focus-visible, [aria-expanded="true"]) .c2 { rotate: -10deg; }
.hand-btn:is(:hover, :focus-visible, [aria-expanded="true"]) .c3 { rotate: 14deg; translate: 3px -3px; }
.hand-pop {
  position: absolute; left: 50%; bottom: calc(100% + 18px); transform: translateX(-50%); width: max-content; max-width: 280px;
  padding: 12px 14px; border: 1px solid var(--ink); background: var(--paper); box-shadow: 8px 8px 0 var(--acid);
}
/* 開くとき:下からワイプで現れる(影は切らない) */
.hand-pop:not([hidden]) { animation: popIn .4s var(--io) both; }
.hand-pop:not([hidden]) p { animation: popLine .45s var(--io) both; }
.hand-pop:not([hidden]) p:nth-child(2) { animation-delay: .08s; }
.hand-pop:not([hidden]) p:nth-child(3) { animation-delay: .14s; }
@keyframes popIn { from { clip-path: inset(100% -12px -12px 0); translate: 0 10px; } to { clip-path: inset(0 -12px -12px 0); translate: 0 0; } }
@keyframes popLine { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.hand-pop p { margin: 0; font-size: 13.5px; font-weight: 700; line-height: 1.8; }
.hand-pop .hand-head { margin-bottom: 6px; color: var(--gray); font-weight: 400; }

/* ---------- 小さい画面 ---------- */
@media (max-width: 900px) {
  .bar { gap: 12px; }
  .bar-nav { overflow-x: auto; scrollbar-width: none; max-width: 100%; }
  .nav-item { padding: 0 12px; }
  .bar-auth > .auth-btn { padding: 0 12px; }
  .deck-top { padding: 28px var(--gut) 24px; }
  .cards { grid-template-columns: 1fr; }
  .fill { margin-top: 24px; }
  .cb-main, .cb-num { grid-column: 1 / -1; }
  .cb-num { margin-bottom: 14px; }
  .table-plot { margin: 0 12px; }
  .axis-label { font-size: 9.5px; }
  .detail-body { display: block; overflow-y: auto; }
  .d-left { overflow: visible; border-right: 0; }
  .d-right { overflow: visible; border-top: 1px solid var(--ink); }
  .d-actions { margin-top: 0; }
  .flow { grid-template-columns: 1fr; justify-items: stretch; }
  .flow > * { grid-row: auto !important; grid-column: auto !important; }
  .flow .cap-out { margin-top: 8px; }
  .core { justify-self: center; }
  .pipe { justify-self: center; width: 1px; height: 28px; }
  .pipe::after { right: auto; top: auto; bottom: -1px; left: -4px; border-left: 4.5px solid transparent; border-right: 4.5px solid transparent; border-top: 7px solid var(--ink); border-bottom: 0; }
}
@media (max-width: 560px) {
  .card-body { grid-template-columns: 1fr; min-height: 0; }
  .card .art { aspect-ratio: 2 / 1; border-right: 0; border-bottom: 1px solid var(--ink); }
  .card-tag { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
}