/* ─────────────────────────────────────────────────────────
   base — 色・文字・画面の骨格

   禁止事項（指示書§30-31）を守る:
   Glassmorphism / 大量のGradient / Bento Grid / 何でも角丸カード /
   強いshadow / Neon / Y2K / Pixel Font / Cyberpunk / 3D floating cards。
   かわいさはパステル角丸UIからではなく、シールそのもの・サイズ差・
   動き・白フチ・微妙な不揃いから出す。
   ───────────────────────────────────────────────────────── */

:root {
	--yt-white: #ffffff;

	/* 文字は緑を入れずニュートラルな黒に寄せる。緑はシールの版インクだけに
	   残す。UI側まで緑にすると画面全体が緑がかって見える。 */
	--yt-ink: #201d19;
	--yt-ink-soft: #8b847b;
	--yt-line: #e5e1db;
	--yt-orange: #f0621f;
	--yt-orange-deep: #d4501a;

	/* シールの基準サイズ。各シールはこの単位に係数を掛けて決まる。
	   固定pxではなくvw相対にする（指示書§24）。

	   幅と高さの両方で頭打ちにする。座標(--x/--y)はステージに対する%なので、
	   幅だけで決めると横長の画面でシールが縦にはみ出し、文字が見切れる。
	   ステージは 100vw - --yt-side なので、vw側の係数は側幅ごとに変わる
	   （responsive.css で上書きする）。 */
	--yt-unit: min(28.8vw, 46svh);

	/* 整列したときの基準サイズ。散らばっているときと違い、こちらは画面の
	   高さで決める。2列×5段に並べるので、段の間隔（高さの19%）に対して
	   シールの高さが決まらないと、横長の画面で段どうしが重なる。
	   1440x900 では --yt-unit と同じ値になるので、そこでの見えは変わらない。 */
	--yt-open-unit: 64svh;

	--yt-side: 22%;
	/* 作品詳細カラム。開いたときだけ使う。 */
	--yt-detail: 34%;

	--yt-shadow: 0 4px 10px rgba(32, 29, 25, 0.19);
	--yt-shadow-hover: 0 10px 22px rgba(32, 29, 25, 0.25);
	--yt-grid-line: oklch(0.68 0.15 48 / 0.22);
	--yt-grid-step: 28px;

	--yt-ease: cubic-bezier(0.22, 0.68, 0.35, 1);
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--yt-white);
	color: var(--yt-ink);
	/* 欧文は Gill Sans（旧ポートフォリオと同じ指定）。和文はグリフを持たないので
	   自動的に Noto Sans JP に落ちる。Gill Sans が無い環境は Cabin。 */
	font-family: 'Gill Sans', 'Gill Sans MT', 'Gill Sans Nova', 'Cabin',
		'Noto Sans JP', system-ui, -apple-system, sans-serif;
	font-weight: 400;
	line-height: 1.7;
	overflow-x: hidden;
}

/* 英字だけの箇所は Gill Sans の細いウェイトで組む。
   和文が混ざる箇所は Noto Sans JP が細くなりすぎるので通常ウェイトのまま。 */
.yt-works__heading,
.yt-nav__link,
.yt-tooltip,
.yt-detail__meta {
	font-weight: 300;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

button {
	font: inherit;
	color: inherit;
}

a {
	color: inherit;
}

/* ─── アクセシビリティ（指示書§29） ─────────────────────── */

.yt-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.yt-skip-link {
	position: absolute;
	top: -100px;
	left: 12px;
	z-index: 999;
	padding: 10px 16px;
	background: var(--yt-ink);
	color: var(--yt-white);
	text-decoration: none;
}

.yt-skip-link:focus {
	top: 12px;
}

:focus-visible {
	outline: 3px solid var(--yt-orange);
	outline-offset: 3px;
}

/* ─── 全体レイアウト ─────────────────────────────────────
   左：作品リスト / 右：シールが散らばるエリア */

.yt-toolbox {
	position: relative;
	display: grid;
	grid-template-columns: var(--yt-side) 1fr;
	height: 100svh;
	min-height: 600px;
}

.yt-side {
	display: flex;
	flex-direction: column;
	min-height: 0;
	padding: 40px 0 28px 44px;
}

.yt-stage {
	position: relative;
	/* 一部が画面外にはみ出してよい（指示書§3.5） */
	overflow: hidden;
	/* 机の上の方眼紙。配置の目安にはなるが、主張はさせない。 */
	background-color: oklch(0.985 0.004 80);
	background-image:
		linear-gradient(to right, var(--yt-grid-line) 1px, transparent 1px),
		linear-gradient(to bottom, var(--yt-grid-line) 1px, transparent 1px);
	background-size: var(--yt-grid-step) var(--yt-grid-step);
}

.yt-stage__inner {
	position: absolute;
	inset: 0;
}

/* ─── 作品詳細カラム（指示書§12）─────────────────────────
   いきなりページ遷移しない。左のリストの1つ右に開く。
   カードUIにしすぎない。紙が現れる程度に留める。 */

.yt-detail {
	position: absolute;
	left: var(--yt-side);
	top: 0;
	bottom: 0;
	z-index: 40;
	width: var(--yt-detail);
	padding: 40px 44px 40px 40px;
	background: var(--yt-white);
	overflow-y: auto;
	overscroll-behavior: contain;

	/* シールゾーンと地続きに見えないよう段差をつける。
	   サイドバーが机の上に置かれた紙、という関係にする。 */
	border-right: 1px solid var(--yt-line);
	box-shadow: 16px 0 30px -20px rgba(32, 29, 25, 0.35);

	opacity: 0;
	translate: -14px 0;
	pointer-events: none;
	transition:
		opacity 0.3s var(--yt-ease),
		translate 0.36s var(--yt-ease);
}

/* 左のリストとの境界。枠で囲わず1本の罫線だけにする。 */
.yt-detail::before {
	content: '';
	position: absolute;
	left: 0;
	top: 56px;
	bottom: 56px;
	width: 1px;
	background: var(--yt-ink);
	opacity: 0.65;
}

.yt-toolbox.has-detail .yt-detail {
	opacity: 1;
	translate: 0 0;
	pointer-events: auto;
}

.yt-detail__close {
	position: absolute;
	top: 18px;
	right: 18px;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	padding: 0;
	background: none;
	border: 2px solid var(--yt-orange);
	border-radius: 50%;
	font-size: 17px;
	line-height: 1;
	color: var(--yt-orange);
	cursor: pointer;
	transition: background 0.16s var(--yt-ease), color 0.16s var(--yt-ease);
}

.yt-detail__close:hover {
	background: var(--yt-orange);
	color: #ffffff;
}

.yt-detail__img {
	width: 100%;
	height: auto;
	margin: 0 0 18px;
	background: #f4f2ee;
}

/* シールの説明の見出し画像。透過のまま、余白を持たせて置く。
   作品のアイキャッチと違って背景を敷かない。 */
.yt-detail__img--sticker {
	width: auto;
	max-width: 76%;
	max-height: 300px;
	margin: 6px auto 24px;
	background: none;
	filter: drop-shadow(var(--yt-shadow));
}

.yt-detail__title {
	margin: 0 0 8px;
	font-size: clamp(17px, 1.4vw, 22px);
	font-weight: 700;
	line-height: 1.45;
}

.yt-detail__meta {
	margin: 0 0 14px;
	font-size: 11px;
	letter-spacing: 0.1em;
	line-height: 1.9;
	color: var(--yt-ink-soft);
}

.yt-detail__tags::before {
	content: '・';
}

.yt-detail__desc {
	margin: 0 0 20px;
	font-size: 13px;
	line-height: 1.95;
}

/* ─── CREDITS ─────────────────────────────────────────
   共同制作者・論文著者。誰と作ったのかが本文を読む前に分かるよう、
   説明文の上に置く。個人制作の作品には要素ごと出さない。 */

.yt-detail__credits {
	margin: 0 0 12px;
	font-size: 11.5px;
	line-height: 1.8;
	color: var(--yt-ink);
}

.yt-detail__credits-label {
	display: block;
	font-size: 9.5px;
	letter-spacing: 0.14em;
	color: var(--yt-ink-soft);
}

/* ─── 外部リンク ───────────────────────────────────────
   受賞ページ・論文など、裏づけのあるものだけ。本文中の裸URLは
   従来どおり大きなリンクカードになる（yt_embed_urls）。
   ここは本文の流れを止めない小さなボタンにする。 */

/* カードそのものは本文の裸URLと同じ .yt-card。ここは何のリンクかを
   示す一行だけを持つ。本文が「法政大学のホームページに掲載」と書いてから
   URLを置いていたのと同じ形。 */

.yt-detail__link-label {
	margin: 0 0 6px;
	font-size: 9.5px;
	letter-spacing: 0.14em;
	line-height: 1.6;
	color: var(--yt-ink-soft);
}

.yt-detail__desc {
	margin: 0 0 20px;
}

/* ─── 詳細カラムの本文 ───────────────────────────────────
   作品単体ページは廃止したので、本文はすべてここに出る。 */

.yt-detail__body-text {
	font-size: 13px;
	line-height: 2.05;
}

.yt-detail__body-text > *:first-child {
	margin-top: 0;
}

.yt-detail__body-text p {
	margin: 0 0 1.4em;
}

.yt-detail__body-text figure,
.yt-detail__body-text img {
	max-width: 100%;
	height: auto;
	margin: 0 0 1.4em;
}

.yt-detail__body-text figure {
	margin-inline: 0;
}

.yt-detail__body-text figcaption {
	margin-top: 6px;
	font-size: 11px;
	color: var(--yt-ink-soft);
}

.yt-detail__body-text h2,
.yt-detail__body-text h3 {
	margin: 1.8em 0 0.6em;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.6;
}

.yt-detail__body-text ul,
.yt-detail__body-text ol {
	margin: 0 0 1.4em;
	padding-left: 1.3em;
}

.yt-detail__body-text a:not(.yt-card) {
	color: var(--yt-orange);
	text-underline-offset: 3px;
}

/* ─── 埋め込み ───────────────────────────────────────── */

.yt-embed {
	margin: 0 0 1.4em;
}

.yt-embed iframe,
.yt-detail__body-text .wp-block-embed iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
}

.yt-detail__body-text .wp-block-embed {
	margin: 0 0 1.4em;
}

.yt-detail__body-text .wp-block-embed figcaption {
	margin-top: 6px;
}

/* ─── リンクカード ────────────────────────────────────
   裸のURLをそのまま出さない。カードにしすぎず、罫線1本で囲う程度。 */

.yt-card {
	display: flex;
	gap: 12px;
	align-items: stretch;
	margin: 0 0 1.4em;
	border: 1px solid var(--yt-line);
	text-decoration: none;
	color: inherit;
	transition: border-color 0.18s var(--yt-ease);
}

.yt-card:hover {
	border-color: var(--yt-ink);
}

.yt-card__thumb {
	flex: 0 0 86px;
	overflow: hidden;
	background: #f4f2ee;
}

/* OGP画像が無いURL・読み込みに失敗したURLにも、同じ大きさの
   代替ヒーローを出す。URLだけのカードを作らない。 */
.yt-card__thumb--fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px;
	background: oklch(0.91 0.055 58);
	color: oklch(0.48 0.14 48);
	font-size: 10px;
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: 0.04em;
	text-align: center;
	overflow-wrap: anywhere;
}

.yt-card__thumb img {
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
}

.yt-card__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	padding: 10px 12px 10px 0;
	min-width: 0;
}

.yt-card:not(:has(.yt-card__thumb)) .yt-card__body {
	padding-left: 12px;
}

.yt-card__title {
	font-size: 12px;
	font-weight: 500;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.yt-card__host {
	font-size: 10px;
	font-weight: 300;
	letter-spacing: 0.08em;
	color: var(--yt-ink-soft);
}

/* ─── カテゴリーから選ぶ代表作品 ───────────────────────── */

.yt-sticker-works {
	margin: 24px 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--yt-line);
}

.yt-sticker-works__label {
	margin: 0 0 9px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.1em;
	color: var(--yt-ink-soft);
}

.yt-sticker-works__list {
	display: grid;
	gap: 8px;
}

.yt-sticker-work {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr);
	gap: 10px;
	align-items: center;
	width: 100%;
	min-height: 52px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	text-align: left;
	cursor: pointer;
}

.yt-sticker-work img {
	width: 48px;
	height: 52px;
	object-fit: cover;
}

.yt-sticker-work > span {
	font-size: 13px;
	font-weight: 500;
	line-height: 1.45;
}

.yt-sticker-work:hover > span {
	color: var(--yt-orange);
}

/* ─── 署名 ───────────────────────────────────────────── */

.yt-signature {
	flex: none;
	margin: 0 0 30px;
	line-height: 1.1;
}

.yt-signature a {
	display: flex;
	align-items: center;
	gap: 9px;
	text-decoration: none;
}

.yt-signature__mark {
	flex: none;
	width: clamp(21px, 1.8vw, 28px);
	height: auto;
}

/* マークと1行に収まる大きさにする。折り返すと署名に見えなくなる。 */
.yt-signature__name {
	/* 本文と同じ Gill Sans。旧ポートフォリオと揃える。 */
	font-size: clamp(15px, 1.32vw, 21px);
	font-weight: 700;
	letter-spacing: 0.015em;
	line-height: 1.1;
	white-space: nowrap;
}

/* ─── 作品リスト ─────────────────────────────────────── */

.yt-works {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding-right: 28px;
}

.yt-works__year {
	margin: 0 0 22px;
}

.yt-works__heading {
	margin: 0 0 4px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.16em;
	color: var(--yt-ink-soft);
}

.yt-works__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.yt-works__item {
	transition: opacity 0.26s var(--yt-ease);
}

.yt-works__link {
	display: inline-block;
	appearance: none;
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	text-align: left;
	cursor: pointer;
	padding: 3px 0;
	font-size: clamp(14px, 1.05vw, 17px);
	font-weight: 500;
	line-height: 1.5;
	text-decoration: none;
	transition: border-color 0.16s var(--yt-ease), color 0.16s var(--yt-ease);
}

/* カードの写真・年ラベル・顔カード・区切りはモバイル専用（mobile.css で出す）。
   PCは作品名だけ。
   PCで画像を読み込ませない仕掛けはこの display:none ではなく、
   work-list.php 側の <picture><source media> にある（そちらのコメント参照）。 */
.yt-works__shot,
.yt-works__year-label,
.yt-works__profile,
.yt-works__all,
.yt-pill,
.yt-scrim,
.yt-menu-btn,
.yt-menu {
	display: none;
}

/* ─── 代表作 ───────────────────────────────────────────
   _yt_priority が high の作品。差をつけるのは太さだけにする。
   文字を大きくしたり「代表作」と札を出したりすると、自己申告が
   前に出すぎて、机に作品を広げている感じが壊れる。
   一覧は年別のままで、並び順も動かさない。 */

.yt-works__item[data-priority='high'] .yt-works__link {
	font-weight: 700;
}

.yt-works__link:hover {
	border-bottom-color: var(--yt-orange);
}

/* 絞り込み時、該当しない作品は引く。消さないのは
   「何が絞られたか」が分かるようにするため（少し目立つ程度の演出）。 */
.yt-works.is-filtering .yt-works__item:not(.is-match) {
	opacity: 0.28;
}

.yt-works.is-filtering .is-match .yt-works__link {
	border-bottom-color: var(--yt-orange);
}

/* 開いている作品 */
.yt-works__item.is-open .yt-works__link {
	color: var(--yt-orange);
	border-bottom-color: var(--yt-orange);
}

/* 該当0件の年も消さず、年の並びを薄く保つ。 */
.yt-works.is-filtering .yt-works__year.is-empty .yt-works__heading {
	color: var(--yt-ink-soft);
	opacity: 0.38;
}

/* ─── ナビゲーション（指示書§27） ───────────────────────── */

.yt-nav {
	flex: none;
	padding-top: 22px;
}

.yt-nav__list {
	display: flex;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.yt-nav__link {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-decoration: none;
	color: var(--yt-ink-soft);
	padding: 3px 0;
	border-bottom: 2px solid transparent;
	transition: color 0.18s var(--yt-ease), border-color 0.18s var(--yt-ease);
}

.yt-nav__link:hover {
	color: var(--yt-ink);
	border-bottom-color: var(--yt-orange);
}

/* ─── tooltip（指示書§8）─────────────────────────────────
   シールの上には文字を書かない。カーソル近くに小さく出す。 */

.yt-tooltip {
	position: fixed;
	z-index: 90;
	top: 0;
	left: 0;
	padding: 5px 11px;
	background: var(--yt-ink);
	color: var(--yt-white);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	translate: -50% -140%;
	transition: opacity 0.14s var(--yt-ease);
}

.yt-tooltip.is-visible {
	opacity: 1;
}

/* ─── 汎用ページ（後続フェーズで作り込む） ────────────────── */

.yt-page {
	max-width: 760px;
	margin: 0 auto;
	padding: 80px 24px 120px;
}

.yt-article__title {
	font-size: clamp(28px, 4vw, 44px);
	line-height: 1.35;
	margin: 0 0 32px;
}