/* 白・黒＋強い赤は 2026-04 のデザイン方針 docs/2026-04-29_design-direction.md に合わせた。
   赤（--red）は content.json の theme.accent で上書きされる */
:root {
  --paper: #F0F0F0; --card: #FFFFFF; --ink: #0A0A0A; --sub: #555; --line: #D6D6D6; --red: #D63932;
}
@media (prefers-color-scheme: dark) {
  :root { --paper: #0E0E0E; --card: #171717; --ink: #F0F0F0; --sub: #A8A8A8; --line: #2C2C2C; }
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: Inter, "Noto Sans JP", system-ui, sans-serif; line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 16px; }

header { padding: 72px 0 48px; }
.eyebrow { font: 600 12px/1 Inter, sans-serif; letter-spacing: .18em; color: var(--sub); text-transform: uppercase; }
h1 { font: 900 clamp(48px, 9vw, 96px)/1 Inter, sans-serif; letter-spacing: -.03em; margin: 16px 0 20px; }
.lead { font-size: clamp(17px, 2.2vw, 20px); font-weight: 700; max-width: 40em; margin: 0 0 12px; }
.lead-sub { color: var(--sub); max-width: 44em; margin: 0; }
.links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; border: 2px solid var(--ink);
  font-weight: 700; font-size: 14px; text-decoration: none; background: var(--card);
}
.btn.primary { background: var(--ink); color: var(--paper); }

section { padding: 40px 0; border-top: 2px solid var(--ink); }
h2 { font: 900 28px/1.2 Inter, "Noto Sans JP", sans-serif; margin: 0 0 6px; }
h2 small { display: block; font: 600 12px/1 Inter, sans-serif; letter-spacing: .18em; color: var(--red); margin-bottom: 10px; }
.section-lead { color: var(--sub); margin: 0 0 28px; }

.works { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); }
.work { background: var(--card); border: 1px solid var(--line); display: flex; flex-direction: column; }
.work img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; display: block; border-bottom: 1px solid var(--line); }
.work .body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.work h3 { margin: 0; font-size: 20px; line-height: 1.35; }
.tag { display: inline-block; font: 700 11px/1 "Noto Sans JP", sans-serif; padding: 4px 8px; background: var(--red); color: #fff; margin-right: 6px; vertical-align: 3px; }
.work p { margin: 0; }
.work ul { margin: 0; padding-left: 1.2em; color: var(--sub); font-size: 14px; }
.role { font-size: 14px; border-left: 3px solid var(--red); padding-left: 10px; }
.stack { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 6px; }
.stack > span:not(.itools) { font: 600 12px/1 Inter, sans-serif; padding: 5px 8px; border: 1px solid var(--line); color: var(--sub); }
.work .url { font-weight: 700; font-size: 14px; }

.tools { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.tool { background: var(--card); border: 1px solid var(--line); }
.tool img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; border-bottom: 1px solid var(--line); }
.tool .tbody { padding: 18px 20px; }
.tool h3 { margin: 0 0 6px; font-size: 16px; }
.tool p { margin: 0; font-size: 14px; color: var(--sub); }

.cases { display: grid; gap: 16px; }
.case { background: var(--card); border: 1px solid var(--line); padding: 24px; }
.case h3 { margin: 0 0 4px; font-size: 20px; }
.case .meta { color: var(--sub); font-size: 14px; margin-bottom: 14px; }
.case p { margin: 0; }
.flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 10px; margin: 16px 0; }
.flow > div { border-top: 3px solid var(--ink); padding-top: 8px; font-size: 14px; }
.flow b { display: block; font-size: 15px; }

.skills { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.skills h3 { font-size: 15px; margin: 0 0 6px; }
.skills p { margin: 0; color: var(--sub); font-size: 14px; }

footer { padding: 40px 0 64px; border-top: 2px solid var(--ink); color: var(--sub); font-size: 13px; }
footer .contact { color: var(--ink); font-size: 16px; font-weight: 700; margin-bottom: 16px; }

/* ---- 編集画面だけで使う（公開ページには .editing が付かないので効かない） ---- */
.editing { padding-top: 56px; }
.editbar {
  position: fixed; inset: 0 0 auto 0; z-index: 50; display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding: 10px 16px; background: var(--ink); color: var(--paper); font-size: 13px;
}
.editbar b { font-size: 14px; }
.editbar #status { opacity: .75; }
.editbar .grow { flex: 1; }
.editbar a { color: var(--paper); }
.editbar button { font: 700 13px "Noto Sans JP", sans-serif; padding: 6px 16px; border: 0; background: var(--red); color: #fff; cursor: pointer; }
.editbar input[type=color] { width: 32px; height: 24px; padding: 0; border: 0; background: none; vertical-align: middle; }

.editing .ed { outline: 1px dashed transparent; outline-offset: 2px; min-width: 1em; cursor: text; }
.editing .ed:hover { outline-color: var(--sub); }
.editing .ed:focus { outline: 2px solid var(--red); }
.editing .ed:empty::before { content: attr(data-ph); color: var(--sub); opacity: .6; }
.editing .ed-img { cursor: pointer; }
.editing .ed-img:hover { opacity: .8; outline: 2px dashed var(--red); outline-offset: -4px; }
.editing .no-img { aspect-ratio: 16 / 10; display: grid; place-items: center; border-bottom: 1px solid var(--line); color: var(--sub); cursor: pointer; }
.editing .item { position: relative; }
.itools { position: absolute; top: -12px; right: -6px; z-index: 5; display: flex; gap: 2px; }
.itools button { font: 700 11px/1 Inter, sans-serif; padding: 4px 6px; border: 0; background: var(--ink); color: var(--paper); cursor: pointer; opacity: .55; }
.itools button:hover { opacity: 1; }
.itools button.del:hover { background: var(--red); }
.add { font: 600 12px "Noto Sans JP", sans-serif; padding: 6px 10px; border: 1px dashed var(--sub); background: none; color: var(--sub); cursor: pointer; justify-self: start; align-self: start; }
.add:hover { color: var(--ink); border-color: var(--ink); }
.fld { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--sub); }
.fld input { flex: 1; min-width: 0; font: 13px Inter, "Noto Sans JP", sans-serif; padding: 4px 6px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); }
.sec-toggle { float: right; font-size: 12px; color: var(--sub); }
section.off, header.off { opacity: .35; }
.editing .hidden-item > :not(.itools) { opacity: .3; }
.editing .hidden-item::after { content: '非表示中'; position: absolute; top: 8px; left: 8px;  z-index: 4; font: 700 11px/1 "Noto Sans JP", sans-serif; padding: 4px 6px; background: var(--ink); color: var(--paper); }

/* ---- マウスオーバー（公開ページだけ。編集画面では入力の枠と紛れるので付けない） ----
   動きは「静か・上品」（docs/2026-04-29_design-direction.md）。浮かせるのは2px まで */
body:not(.editing) .work, body:not(.editing) .tool, body:not(.editing) .case {
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
body:not(.editing) .work:hover, body:not(.editing) .tool:hover, body:not(.editing) .case:hover {
  border-color: var(--ink); transform: translateY(-2px); box-shadow: 0 6px 18px rgb(0 0 0 / .08);
}
body:not(.editing) .btn { transition: background .15s, color .15s; }
body:not(.editing) .btn:hover, body:not(.editing) .btn.open { background: var(--ink); color: var(--paper); }
body:not(.editing) .btn.primary:hover, body:not(.editing) .btn.primary.open { background: var(--card); color: var(--ink); }
body:not(.editing) .flow > div { transition: border-color .15s; }
body:not(.editing) .flow > div:hover { border-top-color: var(--red); }
body:not(.editing) .flow > div:hover b, body:not(.editing) .skills > div:hover h3 { color: var(--red); }
body:not(.editing) .skills h3 { transition: color .15s; }
body:not(.editing) a.url:hover, body:not(.editing) footer a:hover { color: var(--red); }
@media (prefers-reduced-motion: reduce) {
  body:not(.editing) .work:hover, body:not(.editing) .tool:hover, body:not(.editing) .case:hover { transform: none; }
}

/* 数字タイル（経歴の下）。数字を主役にして、ラベルは小さく */
.stats { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); margin-top: 28px; }
.stat { background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--red); padding: 18px 20px; }
.stat-num { font: 900 clamp(36px, 6vw, 52px)/1 Inter, sans-serif; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat-label { margin-top: 8px; font-size: 14px; color: var(--sub); }

/* 実績アーカイブ: ジャンルごとに横一列。はみ出した分は横スクロール。押すと YouTube を開く */
.vgroups { display: grid; gap: 28px; }
/* グリッドの子は中身の幅まで広がろうとするので、0 まで縮めてよいと明示する（横スクロールを行の中に閉じ込めるため） */
.vgroups > *, .vrow { min-width: 0; }
.vgroup h3 { margin: 0 0 10px; font-size: 16px; }
.vgroup-empty { display: none; }
.vrow {
  /* 3本でちょうど横幅いっぱい（4本目からは横スクロール）。スマホは1本＋次が少し見える幅 */
  display: grid; grid-auto-flow: column; grid-auto-columns: 80%; gap: 14px;
  overflow-x: auto; padding: 14px 2px 10px; scroll-snap-type: x proximity;
  overscroll-behavior-x: contain; /* 端まで行っても、ブラウザの「戻る」スワイプやページの横移動に伝えない */
}
@media (min-width: 720px) { .vrow { grid-auto-columns: calc((100% - 28px) / 3); } }
.video { scroll-snap-align: start; }
.vthumb { display: block; position: relative; aspect-ratio: 16 / 9; background: var(--ink); overflow: hidden; border: 1px solid var(--line); }
.vthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vnone { position: absolute; inset: 0; display: grid; place-items: center; color: var(--paper); font-size: 12px; opacity: .7; }
.vplay {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; background: rgb(0 0 0 / .6); color: #fff; font-size: 18px; padding-left: 3px; transition: background .15s;
}
body:not(.editing) a.vthumb:hover .vplay, body:not(.editing) a.vthumb:focus-visible .vplay { background: var(--red); }
.vtitle { margin-top: 8px; font-size: 13px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.editing .vtitle { display: block; }

/* トップのボタンの説明。マウスのある端末: 乗せている間だけ行の下に出す（見た目は .section-lead と同じ）。
   出し入れで下の内容がずれないよう、1行分の高さは常に取っておく */
.link-desc { color: var(--sub); margin: 14px 0 0; min-height: 1.75em; opacity: 0; transition: opacity .15s; }
.link-desc.on { opacity: 1; }
/* マウスのない端末: 押すとボタンの行の下に開く吹き出し */
button.btn { font-family: inherit; color: inherit; cursor: pointer; }
button.btn.primary { color: var(--paper); }
/* 開閉の印。文字の ▾ は小さいと「・」に化けるので枠線で三角を描く */
.btn .caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; transition: transform .15s; }
.btn.open .caret { transform: rotate(180deg); }
.link-pop {
  position: relative; margin-top: 14px; max-width: 40em; padding: 16px 18px; background: var(--card);
  border: 2px solid var(--ink); display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px;
}
.link-pop[hidden] { display: none; }
/* 矢印: 押したボタンの真ん中（--arrow-x）に合わせる */
.link-pop::before {
  content: ''; position: absolute; top: -9px; left: calc(var(--arrow-x, 40px) - 8px); width: 14px; height: 14px;
  background: var(--card); border-left: 2px solid var(--ink); border-top: 2px solid var(--ink); transform: rotate(45deg);
}
.link-pop p { margin: 0; flex: 1 1 260px; font-size: 14px; }
.link-pop .pop-go { padding: 8px 14px; font-size: 13px; }
.link-desc-ed { font-size: 12px; color: var(--sub); margin-top: 4px; max-width: 22em; }