/* SW AI Writer — 作品カード（研究ノート風）
   色はテーマ側で --swai-* を上書きすれば変えられます。 */
.swai-work, .swai-related, .swai-shot, .swai-intro {
	--swai-ink: #24303f;
	--swai-sub: #5c6877;
	--swai-line: #d6dce4;
	--swai-grid: rgba(59, 110, 165, .07);
	--swai-paper: #ffffff;
	--swai-tint: #f5f8fb;
	--swai-accent: #3b6ea5;
	--swai-accent-ink: #ffffff;
	--swai-mark: #fff3b0;
	--swai-radius: 6px;
}

.swai-work {
	position: relative;
	margin: 2em 0;
	padding: 0;
	background: var(--swai-paper);
	border: 1px solid var(--swai-line);
	border-radius: var(--swai-radius);
	color: var(--swai-ink);
	line-height: 1.7;
	overflow: hidden;
	box-sizing: border-box;
}
.swai-work *, .swai-work *::before, .swai-work *::after { box-sizing: border-box; }
.swai-work img { display: block; max-width: 100%; height: auto; border: 0; }
.swai-work a { text-decoration: none; }

/* 見出し帯：方眼の上にラベル */
.swai-work__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 6px 14px;
	border-bottom: 1px dashed var(--swai-line);
	background-color: var(--swai-tint);
	background-image: linear-gradient(var(--swai-grid) 1px, transparent 1px), linear-gradient(90deg, var(--swai-grid) 1px, transparent 1px);
	background-size: 12px 12px;
}
.swai-work__no {
	font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	font-size: 11px;
	letter-spacing: .08em;
	color: var(--swai-sub);
}
.swai-work__pr {
	display: inline-block;
	padding: 0 6px;
	border: 1px solid currentColor;
	border-radius: 3px;
	font-size: 10px;
	line-height: 1.6;
	letter-spacing: .05em;
	color: var(--swai-sub);
}

/* 本文 */
.swai-work__body { padding: 14px 16px 16px; min-width: 0; }
.swai-work__title { margin: 0 0 .5em; font-size: 1.02em; font-weight: 700; line-height: 1.5; }
.swai-work__title a { color: var(--swai-ink); }
.swai-work__title a:hover { color: var(--swai-accent); text-decoration: underline; text-underline-offset: 3px; }

.swai-work__spec { margin: 0 0 .8em; padding: 0; font-size: .86em; }
.swai-work__spec > div { display: grid; grid-template-columns: 5.2em 1fr; gap: .6em; padding: .25em 0; border-bottom: 1px dotted var(--swai-line); }
.swai-work__spec > div:last-child { border-bottom: 0; }
.swai-work__spec dt { margin: 0; color: var(--swai-sub); font-weight: 400; }
.swai-work__spec dd { margin: 0; overflow-wrap: anywhere; }

.swai-work__note {
	position: relative;
	margin: 0 0 1em;
	padding: .7em .9em .7em 1em;
	background: linear-gradient(transparent 0, transparent calc(100% - 0px)), var(--swai-tint);
	border-left: 3px solid var(--swai-accent);
	font-size: .9em;
}
.swai-work__note-label {
	display: block;
	margin-bottom: .2em;
	font-size: .78em;
	font-weight: 700;
	letter-spacing: .08em;
	color: var(--swai-accent);
}

.swai-work__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0; }
.swai-work__btn {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	padding: .55em 1.2em;
	border: 1px solid var(--swai-accent);
	border-radius: 999px;
	background: var(--swai-accent);
	color: var(--swai-accent-ink) !important;
	font-size: .9em;
	font-weight: 700;
	line-height: 1.4;
	transition: background-color .15s, color .15s;
}
.swai-work__btn::after { content: "→"; font-weight: 400; }
.swai-work__btn:hover { background: transparent; color: var(--swai-accent) !important; }
.swai-work__btn--small { padding: .35em .9em; font-size: .8em; }
.swai-work__more { font-size: .86em; color: var(--swai-accent); border-bottom: 1px solid currentColor; }
.swai-work__more::after { content: " ›"; }

/* ラベル型：左に表紙、右に情報 */
.swai-work__inner { display: grid; grid-template-columns: minmax(0, 34%) minmax(0, 1fr); }
.swai-work--label .swai-work__thumb {
	display: block;
	aspect-ratio: 5 / 7;
	overflow: hidden;
	border-right: 1px solid var(--swai-line);
	background: var(--swai-tint);
}
.swai-work--label .swai-work__thumb img,
.swai-work--mini .swai-work__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 100% 50%; /* パッケージ画像の表面（右半分）を見せる */
	transition: transform .3s;
}
.swai-work--label .swai-work__thumb:hover img { transform: scale(1.03); }

/* 大きめ：パッケージ全体＋サンプル */
.swai-work__hero { display: block; background: var(--swai-tint); border-bottom: 1px solid var(--swai-line); }
.swai-work__hero img { width: 100%; }
.swai-work__samples { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; margin: 0 0 1em; padding: 0; list-style: none; }
.swai-work__samples li { margin: 0; padding: 0; }
.swai-work__samples a { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 3px; background: var(--swai-tint); }
.swai-work__samples img { width: 100%; height: 100%; object-fit: cover; }

/* 動画：クリックで読み込み（ページを重くしない） */
.swai-work__movie { position: relative; aspect-ratio: 3 / 2; background: #0f141a; border-bottom: 1px solid var(--swai-line); }
.swai-work__movie iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.swai-work__play { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; overflow: hidden; }
.swai-work__play img { width: 100%; height: 100%; object-fit: contain; opacity: .82; transition: opacity .2s; }
.swai-work__play:hover img { opacity: .62; }
.swai-work__play-icon {
	position: absolute; left: 50%; top: 50%;
	width: 64px; height: 64px; margin: -40px 0 0 -32px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	box-shadow: 0 4px 18px rgba(0, 0, 0, .25);
}
.swai-work__play-icon::after {
	content: ""; position: absolute; left: 26px; top: 20px;
	border-style: solid; border-width: 12px 0 12px 19px;
	border-color: transparent transparent transparent var(--swai-accent);
}
.swai-work__play-text {
	position: absolute; left: 0; right: 0; top: 50%; margin-top: 36px;
	color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-shadow: 0 1px 4px rgba(0, 0, 0, .6);
}

/* 関連作品（記事末） */
.swai-related { margin: 3em 0 1em; padding-top: 1.5em; border-top: 2px solid var(--swai-ink); }
.swai-related__title { margin: 0 0 1em; font-size: 1.15em; }
.swai-related__title::before { content: "参考文献 ― "; font-size: .75em; font-weight: 400; letter-spacing: .06em; color: var(--swai-sub); }
.swai-related__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 14px; }
.swai-work--mini { margin: 0; display: flex; flex-direction: column; }
.swai-work--mini .swai-work__thumb { display: block; aspect-ratio: 5 / 7; overflow: hidden; background: var(--swai-tint); border-bottom: 1px solid var(--swai-line); }
.swai-work--mini .swai-work__body { padding: 10px 12px 12px; display: flex; flex-direction: column; flex: 1; }
.swai-work--mini .swai-work__title { font-size: .86em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.swai-work--mini .swai-work__spec { font-size: .76em; }
.swai-work--mini .swai-work__spec > div { grid-template-columns: 3.6em 1fr; }
.swai-work--mini .swai-work__actions { margin-top: auto; justify-content: space-between; }

.swai-work--placeholder { padding: 1em 1.2em; border-style: dashed; color: var(--swai-sub); font-size: .9em; }
.swai-work--placeholder p { margin: 0; }

@media (max-width: 560px) {
	.swai-work__inner { grid-template-columns: minmax(0, 38%) minmax(0, 1fr); }
	.swai-work__body { padding: 12px; }
	.swai-work--label .swai-work__spec > div { grid-template-columns: 1fr; gap: 0; }
	.swai-work--label .swai-work__spec dt { font-size: .85em; }
	.swai-work__samples { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.swai-work--label .swai-work__btn, .swai-work--large .swai-work__btn, .swai-work--movie .swai-work__btn { width: 100%; justify-content: center; font-size: .85em; }
	.swai-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
	.swai-work img, .swai-work__btn { transition: none !important; }
}

/* PR 表記：画像の角に透かし / カードの下に小さく */
.swai-work__thumb, .swai-work__hero, .swai-work__movie, .swai-shot__img { position: relative; }
.swai-pr-mark {
	position: absolute; right: 6px; bottom: 6px; z-index: 2;
	padding: 1px 6px;
	border-radius: 3px;
	background: rgba(20, 28, 38, .45);
	color: rgba(255, 255, 255, .92);
	font-size: 10px; font-weight: 700; line-height: 1.5; letter-spacing: .08em;
	pointer-events: none;
	backdrop-filter: blur(2px);
}
.swai-pr-note { margin: .6em 0 0; text-align: right; font-size: 10px; letter-spacing: .06em; color: var(--swai-sub); }

/* サンプル画像の引用 */
.swai-shot { margin: 1.8em 0; }
.swai-shot__img { display: block; overflow: hidden; border-radius: var(--swai-radius); background: var(--swai-tint); border: 1px solid var(--swai-line); }
.swai-shot__img img { display: block; width: 100%; height: auto; }
.swai-shot__cap { margin-top: .5em; font-size: .8em; line-height: 1.6; color: var(--swai-sub); }
.swai-shot__text { display: block; margin-bottom: .15em; color: var(--swai-ink); font-size: 1.1em; }
.swai-shot__src { color: var(--swai-accent); font-weight: 700; }
.swai-shot__src a { color: var(--swai-accent); text-decoration: underline; text-underline-offset: 3px; }
.swai-shot__src a:hover { color: var(--swai-accent); }
.swai-shot.aligncenter { max-width: 560px; margin-left: auto; margin-right: auto; }

/* 記事末：この記事で紹介した作品 */
.swai-intro { margin: 3em 0 1em; padding: 1.2em 1.2em .6em; border: 1px solid var(--swai-line); border-radius: var(--swai-radius); background-color: var(--swai-tint); background-image: linear-gradient(var(--swai-grid) 1px, transparent 1px), linear-gradient(90deg, var(--swai-grid) 1px, transparent 1px); background-size: 14px 14px; color: var(--swai-ink); }
.swai-intro__heading { display: flex; align-items: center; gap: .6em; margin: 0 0 .8em !important; padding: 0 !important; border: 0 !important; background: none !important; font-size: 1em !important; }
.swai-intro__heading::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: var(--swai-accent); }
.swai-intro__pr { margin-left: auto; padding: 0 6px; border: 1px solid currentColor; border-radius: 3px; font-size: 10px; font-weight: 400; color: var(--swai-sub); }
.swai-intro__list { margin: 0; padding: 0; list-style: none; }
.swai-intro__item { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; align-items: center; margin: 0; padding: 10px 0; border-top: 1px dashed var(--swai-line); }
.swai-intro__item:first-child { border-top: 0; }
.swai-intro__thumb { display: block; aspect-ratio: 5 / 7; overflow: hidden; border-radius: 3px; background: #fff; }
.swai-intro__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.swai-intro__body { display: grid; gap: 3px; min-width: 0; }
.swai-intro__title { color: var(--swai-ink) !important; font-size: .9em; font-weight: 700; line-height: 1.5; text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.swai-intro__title:hover { color: var(--swai-accent) !important; text-decoration: underline; }
.swai-intro__meta { font-size: .76em; color: var(--swai-sub); }
.swai-intro__links { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin-top: 2px; }
.swai-intro, .swai-related, .swai-shot { box-sizing: border-box; max-width: 100%; }
.swai-intro *, .swai-shot * { box-sizing: border-box; }