/**
 * SOA Web Service Page — Cream × Gold Code Editor Edition
 * v1.9.147
 *
 * 革新的なクリーム×金色のコードエディタ風デザイン
 * 価格・運用・保守の不満をリアルに描写する感情誘導型
 */

/* ===== Base ===== */
.svw-page {
	--svw-cream: #f9f3e3;
	--svw-cream-2: #f5efe0;
	--svw-cream-3: #ebe2cc;
	--svw-paper: #dccdaa;
	--svw-ink: #3a2818;
	--svw-ink-2: #5a4828;
	--svw-tan: #8a7858;
	--svw-tan-light: #a89878;
	--svw-gold: #b58a4a;
	--svw-gold-light: #d4b27a;
	--svw-gold-bright: #ffd89a;
	--svw-editor-dark: #2a2520;
	--svw-editor-darker: #1c1814;
	--svw-mac-red: #ff5f56;
	--svw-mac-yellow: #ffbd2e;
	--svw-mac-green: #27c93f;
	--svw-line-soft: rgba(181, 138, 74, 0.18);
	--svw-line: rgba(181, 138, 74, 0.4);

	background: var(--svw-cream-2);
	color: var(--svw-ink);
	font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, sans-serif;
	overflow-x: hidden;
	position: relative;
	cursor: none;
	background-image:
		radial-gradient(circle at 1px 1px, rgba(181, 138, 74, 0.06) 1px, transparent 0);
	background-size: 6px 6px;
}

@media (max-width: 900px) {
	.svw-page { cursor: auto; }
	.svw-cursor { display: none !important; }
}

.svw-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 32px;
	position: relative;
}

@media (max-width: 768px) {
	.svw-container { padding: 0 20px; }
}

/* ===== カスタムカーソル ===== */
.svw-cursor {
	position: fixed;
	top: 0;
	left: 0;
	pointer-events: none;
	z-index: 9999;
	transform: translate3d(-50%, -50%, 0);
	transition: opacity 0.3s;
}

.svw-cursor__ring {
	width: 36px;
	height: 36px;
	border: 1px solid var(--svw-gold);
	border-radius: 50%;
	transition: width 0.3s, height 0.3s, border-color 0.3s;
}

.svw-cursor__dot {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 4px;
	height: 4px;
	background: var(--svw-gold);
	border-radius: 50%;
	transform: translate(-50%, -50%);
}

.svw-cursor__label {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
	font-size: 10px;
	color: var(--svw-gold);
	letter-spacing: 2px;
	opacity: 0;
	transition: opacity 0.3s;
	white-space: nowrap;
	font-weight: 600;
}

.svw-cursor.is-hover .svw-cursor__ring {
	width: 70px;
	height: 70px;
	border-color: var(--svw-ink);
	background: rgba(255, 255, 255, 0.4);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.svw-cursor.is-hover .svw-cursor__dot { opacity: 0; }
.svw-cursor.is-hover .svw-cursor__label { opacity: 1; color: var(--svw-ink); }

/* ===== Editor UI（VS Code 風）===== */
.svw-editor {
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
	background: var(--svw-cream);
	box-shadow: 0 30px 80px rgba(58, 40, 24, 0.12);
	border-radius: 8px;
	overflow: hidden;
}

/* タイトルバー */
.svw-editor__titlebar {
	height: 36px;
	background: var(--svw-editor-darker);
	display: flex;
	align-items: center;
	padding: 0 14px;
	position: relative;
}

.svw-editor__traffic {
	display: flex;
	gap: 8px;
}

.svw-editor__traffic span {
	width: 12px;
	height: 12px;
	border-radius: 50%;
}

.svw-editor__traffic span:nth-child(1) { background: var(--svw-mac-red); }
.svw-editor__traffic span:nth-child(2) { background: var(--svw-mac-yellow); }
.svw-editor__traffic span:nth-child(3) { background: var(--svw-mac-green); }

.svw-editor__title {
	flex: 1;
	text-align: center;
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px;
	color: var(--svw-tan-light);
	letter-spacing: 0.05em;
}

/* メニューバー */
.svw-editor__menubar {
	height: 26px;
	background: var(--svw-editor-dark);
	display: flex;
	align-items: center;
	padding: 0 14px;
	gap: 20px;
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px;
	color: var(--svw-gold-light);
}

@media (max-width: 768px) {
	.svw-editor__menubar { display: none; }
}

/* タブバー */
.svw-editor__tabbar {
	height: 36px;
	background: var(--svw-editor-dark);
	display: flex;
	align-items: stretch;
}

.svw-editor__tab {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 18px;
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px;
	color: var(--svw-tan-light);
	border-right: 1px solid var(--svw-editor-darker);
	position: relative;
}

.svw-editor__tab.is-active {
	background: var(--svw-cream);
	color: var(--svw-ink);
}

.svw-editor__tab.is-active::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--svw-gold);
}

.svw-editor__tab-icon {
	color: var(--svw-gold);
	font-size: 14px;
}

.svw-editor__tab-close {
	color: var(--svw-tan-light);
	margin-left: 4px;
}

/* ブレッドクラム */
.svw-editor__breadcrumb {
	background: var(--svw-cream);
	border-bottom: 1px solid var(--svw-line-soft);
	padding: 8px 20px;
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px;
	color: var(--svw-tan);
	overflow-x: auto;
	white-space: nowrap;
}

.svw-editor__breadcrumb span {
	color: var(--svw-gold);
	margin: 0 6px;
}

/* エディタ本体 */
.svw-editor__body {
	display: grid;
	grid-template-columns: 220px 1fr;
	position: relative;
	min-height: 580px;
}

@media (max-width: 900px) {
	.svw-editor__body { grid-template-columns: 1fr; }
	.svw-editor__sidebar { display: none; }
}

/* サイドバー */
.svw-editor__sidebar {
	background: rgba(58, 40, 24, 0.04);
	border-right: 1px solid var(--svw-line-soft);
	padding: 16px 12px;
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px;
	color: var(--svw-tan);
}

.svw-editor__sidebar-title {
	font-size: 10px;
	color: var(--svw-tan-light);
	letter-spacing: 0.2em;
	margin-bottom: 12px;
}

.svw-editor__sidebar-section {
	margin-bottom: 16px;
}

.svw-editor__sidebar-folder {
	color: var(--svw-gold);
	font-weight: 600;
	margin-bottom: 6px;
}

.svw-editor__sidebar-item {
	padding: 4px 12px;
	cursor: pointer;
	transition: background 0.15s;
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--svw-tan);
}

.svw-editor__sidebar-item:hover {
	background: rgba(181, 138, 74, 0.08);
}

.svw-editor__sidebar-item.is-active {
	background: var(--svw-cream-3);
	color: var(--svw-gold);
	font-weight: 600;
}

/* コードコンテンツ */
.svw-editor__content {
	position: relative;
	padding: 28px 32px 24px 70px;
	font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
	font-size: 13px;
	line-height: 1.85;
	color: var(--svw-ink);
	overflow: hidden;
}

@media (max-width: 768px) {
	.svw-editor__content { padding: 24px 20px 20px 48px; }
}

/* 行番号 */
.svw-editor__content::before {
	content: '1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9\A 10\A 11\A 12\A 13\A 14';
	position: absolute;
	top: 28px;
	left: 16px;
	width: 36px;
	white-space: pre;
	text-align: right;
	color: var(--svw-tan-light);
	font-family: 'JetBrains Mono', monospace;
	font-size: 12px;
	line-height: 1.85;
	user-select: none;
	border-right: 1px solid var(--svw-line-soft);
	padding-right: 10px;
	opacity: 0.6;
}

/* シンタックスハイライト */
.svw-syntax-comment { color: var(--svw-tan-light); font-style: italic; }
.svw-syntax-tag { color: #7a5828; }
.svw-syntax-tagname { color: var(--svw-gold); font-weight: 600; }
.svw-syntax-attr { color: #856237; }
.svw-syntax-string { color: #b8825a; }
.svw-syntax-keyword { color: #9a4a1a; font-weight: 600; }

/* タイトル本体 */
.svw-hero__heading {
	font-family: 'Playfair Display', 'Noto Serif JP', Georgia, serif;
	font-size: clamp(48px, 8vw, 92px);
	font-weight: 200;
	line-height: 1.05;
	color: var(--svw-ink);
	letter-spacing: -0.02em;
	margin: 24px 0;
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0;
}

.svw-hero__heading-text {
	display: inline-block;
}

/* ゴールドオーブ「。」 */
.svw-orb {
	display: inline-block;
	width: clamp(18px, 2.5vw, 26px);
	height: clamp(18px, 2.5vw, 26px);
	border-radius: 50%;
	background:
		radial-gradient(circle at 30% 30%, var(--svw-gold-bright), var(--svw-gold) 50%, #7a5828 100%);
	box-shadow:
		0 0 20px rgba(212, 178, 122, 0.5),
		0 0 40px rgba(212, 178, 122, 0.3),
		inset -2px -2px 6px rgba(0, 0, 0, 0.3);
	margin-left: 4px;
	vertical-align: baseline;
	animation: svw-orb-pulse 3s ease-in-out infinite;
}

@keyframes svw-orb-pulse {
	0%, 100% {
		box-shadow:
			0 0 20px rgba(212, 178, 122, 0.5),
			0 0 40px rgba(212, 178, 122, 0.3),
			inset -2px -2px 6px rgba(0, 0, 0, 0.3);
		transform: scale(1);
	}
	50% {
		box-shadow:
			0 0 30px rgba(212, 178, 122, 0.7),
			0 0 60px rgba(212, 178, 122, 0.5),
			inset -2px -2px 6px rgba(0, 0, 0, 0.3);
		transform: scale(1.08);
	}
}

/* カーソル点滅 */
.svw-caret {
	display: inline-block;
	width: 3px;
	height: 0.9em;
	background: var(--svw-gold);
	vertical-align: middle;
	margin-left: 4px;
	animation: svw-caret-blink 1s infinite;
}

@keyframes svw-caret-blink {
	0%, 49% { opacity: 1; }
	50%, 100% { opacity: 0; }
}

/* Hero サブテキスト */
.svw-hero__divider {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 16px 0 12px;
	font-family: 'Noto Sans JP', sans-serif;
	color: var(--svw-ink-2);
	font-size: 13px;
	font-weight: 400;
}

.svw-hero__divider-line {
	flex: 1;
	max-width: 40px;
	height: 1px;
	background: var(--svw-gold);
}

.svw-hero__lead {
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 12px;
	color: var(--svw-tan);
	line-height: 1.8;
	margin: 0 0 24px;
	letter-spacing: 0.03em;
}

/* CTA */
.svw-btn {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 16px 32px;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.15em;
	text-decoration: none;
	transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
	cursor: none;
	border-radius: 2px;
}

.svw-btn--gold {
	background: var(--svw-gold);
	color: var(--svw-editor-darker);
	border: 1px solid var(--svw-gold);
}

.svw-btn--gold:hover {
	background: var(--svw-ink);
	color: var(--svw-gold);
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(58, 40, 24, 0.25);
}

.svw-btn--outline {
	background: transparent;
	color: var(--svw-ink);
	border: 1px solid var(--svw-gold);
}

.svw-btn--outline:hover {
	background: var(--svw-gold);
	color: var(--svw-editor-darker);
}

.svw-btn__arrow { transition: transform 0.3s; }
.svw-btn:hover .svw-btn__arrow { transform: translateX(6px); }

/* ステータスバー */
.svw-editor__statusbar {
	height: 28px;
	background: var(--svw-gold);
	display: flex;
	align-items: center;
	padding: 0 14px;
	gap: 20px;
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px;
	color: var(--svw-editor-darker);
	font-weight: 500;
}

.svw-editor__statusbar-right {
	margin-left: auto;
	display: flex;
	gap: 18px;
}

@media (max-width: 768px) {
	.svw-editor__statusbar-right { display: none; }
}

/* ===== Section common ===== */
.svw-section {
	padding: 120px 0;
	position: relative;
}

@media (max-width: 768px) {
	.svw-section { padding: 80px 0; }
}

.svw-section--cream { background: var(--svw-cream-2); }
.svw-section--cream-2 { background: var(--svw-cream-3); }
.svw-section--cream-3 { background: var(--svw-cream); }
.svw-section--dark { background: var(--svw-ink); color: var(--svw-cream); }

.svw-chapter {
	display: inline-block;
	margin-bottom: 24px;
}

.svw-chapter__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 16px;
	background: var(--svw-ink);
	color: var(--svw-gold-light);
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px;
	letter-spacing: 0.2em;
	font-weight: 500;
}

.svw-section__eyebrow {
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px;
	color: var(--svw-gold);
	letter-spacing: 0.2em;
	margin: 0 0 14px;
}

.svw-section__title {
	font-family: 'Playfair Display', 'Noto Serif JP', serif;
	font-size: clamp(36px, 5vw, 56px);
	font-weight: 200;
	color: var(--svw-ink);
	margin: 0 0 24px;
	letter-spacing: -0.01em;
	line-height: 1.2;
}

.svw-section--dark .svw-section__title { color: var(--svw-cream); }

.svw-section__desc {
	font-size: 14px;
	color: var(--svw-tan);
	margin: 0 0 60px;
	line-height: 1.9;
	max-width: 640px;
	letter-spacing: 0.03em;
}

.svw-section__bg-text {
	position: absolute;
	right: -40px;
	top: 50%;
	transform: translateY(-50%);
	font-family: 'Playfair Display', serif;
	font-size: clamp(160px, 24vw, 300px);
	font-weight: 100;
	color: var(--svw-paper);
	pointer-events: none;
	user-select: none;
	z-index: 0;
	line-height: 1;
	opacity: 0.6;
}

/* ===== 課題セクション（リアルな悩み）===== */
.svw-pain {
	background: var(--svw-cream);
	position: relative;
}

.svw-pain__intro {
	text-align: center;
	margin-bottom: 80px;
}

.svw-pain__intro-eyebrow {
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px;
	color: var(--svw-gold);
	letter-spacing: 0.4em;
	margin: 0 0 24px;
}

.svw-pain__intro-title {
	font-family: 'Playfair Display', 'Noto Serif JP', serif;
	font-size: clamp(32px, 4.5vw, 48px);
	font-weight: 200;
	color: var(--svw-ink);
	margin: 0 0 16px;
	line-height: 1.3;
}

.svw-pain__intro-sub {
	font-size: 14px;
	color: var(--svw-tan);
	margin: 0;
}

/* GitHub Issue 風 */
.svw-pain__issues {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
	margin-bottom: 80px;
}

@media (max-width: 768px) {
	.svw-pain__issues { grid-template-columns: 1fr; }
}

.svw-pain__issue {
	background: #fff;
	border: 1px solid var(--svw-line-soft);
	border-left: 4px solid var(--svw-gold);
	padding: 24px 28px;
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	position: relative;
}

.svw-pain__issue:hover {
	transform: translateX(6px);
	box-shadow: -10px 6px 24px rgba(58, 40, 24, 0.08);
	border-left-color: var(--svw-ink);
}

.svw-pain__issue-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}

.svw-pain__issue-num {
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px;
	color: var(--svw-tan-light);
	letter-spacing: 0.1em;
}

.svw-pain__issue-tag {
	display: inline-block;
	padding: 2px 10px;
	background: rgba(229, 100, 100, 0.12);
	color: #a32d2d;
	font-family: 'JetBrains Mono', monospace;
	font-size: 10px;
	border-radius: 99px;
	letter-spacing: 0.1em;
	font-weight: 600;
}

.svw-pain__issue-tag--money { background: rgba(181, 138, 74, 0.15); color: var(--svw-gold); }
.svw-pain__issue-tag--time  { background: rgba(120, 90, 50, 0.15); color: #5a4828; }
.svw-pain__issue-tag--quality { background: rgba(154, 74, 26, 0.12); color: #9a4a1a; }
.svw-pain__issue-tag--hidden { background: rgba(58, 40, 24, 0.10); color: #3a2818; }

.svw-pain__issue-title {
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 16px;
	color: var(--svw-ink);
	margin: 0 0 8px;
	line-height: 1.5;
	font-weight: 500;
}

.svw-pain__issue-text {
	font-size: 13px;
	color: var(--svw-tan);
	line-height: 1.7;
	margin: 0;
}

.svw-pain__issue-text strong {
	color: var(--svw-gold);
	font-weight: 600;
}

/* Resolve メッセージ */
.svw-pain__resolve {
	text-align: center;
	padding: 60px 32px;
	background: var(--svw-cream-3);
	border: 1px dashed var(--svw-gold);
	position: relative;
}

.svw-pain__resolve::before {
	content: '// resolve()';
	position: absolute;
	top: 14px;
	left: 20px;
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px;
	color: var(--svw-gold);
	letter-spacing: 0.1em;
}

.svw-pain__resolve-text {
	font-family: 'Playfair Display', 'Noto Serif JP', serif;
	font-size: clamp(24px, 3.5vw, 36px);
	color: var(--svw-ink);
	margin: 0 0 12px;
	font-weight: 200;
	line-height: 1.4;
}

.svw-pain__resolve-sub {
	font-size: 13px;
	color: var(--svw-tan);
	margin: 0;
}

.svw-pain__resolve-sub strong {
	color: var(--svw-gold);
	font-weight: 600;
}

/* ===== Strength （関数返り値風）===== */
.svw-strength {
	background: var(--svw-cream-3);
	position: relative;
}

.svw-strength__code-open,
.svw-strength__code-close {
	font-family: 'JetBrains Mono', monospace;
	font-size: 12px;
	color: var(--svw-tan);
	letter-spacing: 0.1em;
	margin: 24px 0;
}

.svw-strength__layers {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin: 32px 0;
}

.svw-strength__layer {
	background: var(--svw-cream);
	border: 1px solid var(--svw-line-soft);
	border-left: 4px solid var(--svw-gold);
	overflow: hidden;
}

.svw-strength__layer-header {
	background: var(--svw-ink);
	color: var(--svw-cream);
	padding: 10px 24px;
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.svw-strength__layer-header-key {
	color: var(--svw-cream);
}

.svw-strength__layer-header-value {
	color: var(--svw-gold-light);
}

.svw-strength__layer-header-id {
	color: var(--svw-gold-light);
}

.svw-strength__layer-body {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: 32px;
	padding: 28px 32px;
	align-items: center;
}

@media (max-width: 768px) {
	.svw-strength__layer-body {
		grid-template-columns: 80px 1fr;
		gap: 16px;
		padding: 20px;
	}
}

.svw-strength__layer-num {
	font-family: 'Playfair Display', serif;
	font-size: clamp(56px, 7vw, 84px);
	font-weight: 200;
	color: var(--svw-gold);
	line-height: 1;
	letter-spacing: -0.05em;
	text-align: center;
	border-right: 1px solid var(--svw-line-soft);
	padding-right: 24px;
}

.svw-strength__layer-eyebrow {
	font-family: 'JetBrains Mono', monospace;
	font-size: 10px;
	color: var(--svw-tan-light);
	letter-spacing: 0.3em;
	margin: 0 0 8px;
}

.svw-strength__layer-title {
	font-family: 'Playfair Display', 'Noto Serif JP', serif;
	font-size: clamp(20px, 2.4vw, 26px);
	color: var(--svw-ink);
	margin: 0 0 12px;
	font-weight: 300;
	letter-spacing: 0.01em;
}

.svw-strength__layer-desc {
	font-size: 13px;
	color: var(--svw-tan);
	line-height: 1.85;
	margin: 0;
	letter-spacing: 0.03em;
}

/* ===== Scope（@import 風）===== */
.svw-scope { background: var(--svw-cream); position: relative; }

.svw-scope__items {
	display: grid;
	gap: 14px;
}

.svw-scope__item {
	display: grid;
	grid-template-columns: 60px 1fr 240px;
	align-items: center;
	gap: 24px;
	padding: 22px 28px;
	background: var(--svw-cream-2);
	border: 1px solid var(--svw-line-soft);
	border-left: 4px solid var(--svw-gold);
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	font-family: 'JetBrains Mono', monospace;
}

.svw-scope__item:hover {
	transform: translateX(6px);
	background: var(--svw-cream);
	border-left-color: var(--svw-ink);
	box-shadow: -10px 6px 20px rgba(58, 40, 24, 0.06);
}

.svw-scope__item--featured {
	background: var(--svw-cream-3);
	border-left-width: 6px;
}

@media (max-width: 768px) {
	.svw-scope__item {
		grid-template-columns: 1fr;
		gap: 12px;
		padding: 20px;
	}
}

.svw-scope__num {
	font-size: 11px;
	color: var(--svw-tan-light);
	letter-spacing: 0.1em;
}

.svw-scope__body {
	font-family: 'Noto Sans JP', sans-serif;
}

.svw-scope__title {
	font-family: 'Playfair Display', 'Noto Serif JP', serif;
	font-size: 20px;
	color: var(--svw-ink);
	margin: 0 0 6px;
	font-weight: 400;
}

.svw-scope__desc {
	font-size: 12px;
	color: var(--svw-tan);
	line-height: 1.7;
	margin: 0;
	font-family: 'Noto Sans JP', sans-serif;
}

.svw-scope__import {
	font-size: 11px;
	color: var(--svw-gold);
	text-align: right;
	line-height: 1.6;
}

.svw-scope__import-second {
	color: var(--svw-tan-light);
}

@media (max-width: 768px) {
	.svw-scope__import { text-align: left; }
}

/* ===== Workflow (Git Log) ===== */
.svw-workflow { background: var(--svw-cream-2); }

.svw-workflow__terminal {
	background: var(--svw-editor-dark);
	border-radius: 8px;
	overflow: hidden;
	margin: 40px 0;
	box-shadow: 0 20px 50px rgba(58, 40, 24, 0.18);
}

.svw-workflow__terminal-bar {
	background: var(--svw-editor-darker);
	height: 34px;
	display: flex;
	align-items: center;
	padding: 0 14px;
	gap: 14px;
}

.svw-workflow__terminal-traffic {
	display: flex;
	gap: 8px;
}

.svw-workflow__terminal-traffic span {
	width: 11px;
	height: 11px;
	border-radius: 50%;
}

.svw-workflow__terminal-traffic span:nth-child(1) { background: var(--svw-mac-red); }
.svw-workflow__terminal-traffic span:nth-child(2) { background: var(--svw-mac-yellow); }
.svw-workflow__terminal-traffic span:nth-child(3) { background: var(--svw-mac-green); }

.svw-workflow__terminal-title {
	flex: 1;
	text-align: center;
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px;
	color: var(--svw-tan-light);
}

.svw-workflow__terminal-body {
	padding: 28px 32px;
	font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
	font-size: 13px;
	line-height: 1.7;
	color: var(--svw-cream);
}

@media (max-width: 768px) {
	.svw-workflow__terminal-body { padding: 20px; font-size: 11px; }
}

.svw-workflow__terminal-cmd {
	color: var(--svw-gold);
	margin-bottom: 18px;
}

.svw-workflow__terminal-cmd-text {
	color: var(--svw-cream);
}

.svw-workflow__commit {
	display: grid;
	grid-template-columns: 32px 1fr;
	gap: 0;
	padding: 8px 0;
	position: relative;
}

.svw-workflow__commit-marker {
	color: var(--svw-gold);
	font-size: 16px;
	line-height: 1;
	padding-top: 4px;
}

.svw-workflow__commit-line {
	color: var(--svw-gold);
	font-size: 16px;
	line-height: 1;
	grid-column: 1;
}

.svw-workflow__commit-content {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.svw-workflow__commit-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}

.svw-workflow__commit-hash {
	color: var(--svw-gold-bright);
	font-weight: 600;
}

.svw-workflow__commit-period {
	color: var(--svw-tan-light);
	font-size: 11px;
}

.svw-workflow__commit-tag {
	color: var(--svw-gold-light);
	font-weight: 600;
}

.svw-workflow__commit-author {
	color: var(--svw-tan-light);
	font-size: 11px;
	margin-left: auto;
}

@media (max-width: 768px) {
	.svw-workflow__commit-author { display: none; }
}

.svw-workflow__commit-msg {
	color: var(--svw-cream);
	font-size: 12px;
}

.svw-workflow__commit--head .svw-workflow__commit-marker {
	color: var(--svw-mac-green);
	font-size: 20px;
}

.svw-workflow__commit--head .svw-workflow__commit-tag {
	display: inline-block;
	background: var(--svw-mac-green);
	color: var(--svw-editor-darker);
	padding: 1px 8px;
	border-radius: 2px;
	font-weight: 700;
	font-size: 10px;
}

/* ===== Works ===== */
.svw-works { background: var(--svw-cream); }

.svw-works__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-bottom: 48px;
}

@media (max-width: 900px) {
	.svw-works__grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

@media (max-width: 600px) {
	.svw-works__grid { grid-template-columns: 1fr; }
}

.svw-works__card {
	display: block;
	background: var(--svw-cream-2);
	border: 1px solid var(--svw-line-soft);
	overflow: hidden;
	text-decoration: none;
	color: var(--svw-ink);
	transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.svw-works__card:hover {
	transform: translateY(-6px);
	box-shadow: 0 20px 40px rgba(58, 40, 24, 0.15);
	border-color: var(--svw-gold);
}

.svw-works__browser-bar {
	background: var(--svw-editor-darker);
	padding: 8px 12px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.svw-works__browser-traffic {
	display: flex;
	gap: 5px;
}

.svw-works__browser-traffic span {
	width: 8px;
	height: 8px;
	border-radius: 50%;
}

.svw-works__browser-traffic span:nth-child(1) { background: var(--svw-mac-red); }
.svw-works__browser-traffic span:nth-child(2) { background: var(--svw-mac-yellow); }
.svw-works__browser-traffic span:nth-child(3) { background: var(--svw-mac-green); }

.svw-works__browser-url {
	flex: 1;
	background: rgba(245, 239, 224, 0.1);
	padding: 3px 10px;
	border-radius: 3px;
	font-family: 'JetBrains Mono', monospace;
	font-size: 10px;
	color: var(--svw-gold-light);
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.svw-works__thumb {
	aspect-ratio: 16 / 10;
	background: var(--svw-paper);
	overflow: hidden;
	position: relative;
}

.svw-works__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.svw-works__card:hover .svw-works__thumb img { transform: scale(1.08); }

.svw-works__placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Playfair Display', serif;
	font-size: 13px;
	color: var(--svw-tan);
	font-style: italic;
}

.svw-works__meta {
	padding: 16px 20px;
}

.svw-works__cat {
	font-family: 'JetBrains Mono', monospace;
	font-size: 10px;
	color: var(--svw-gold);
	letter-spacing: 0.2em;
	margin-bottom: 6px;
}

.svw-works__title {
	font-family: 'Playfair Display', 'Noto Serif JP', serif;
	font-size: 17px;
	font-weight: 400;
	color: var(--svw-ink);
	margin: 0 0 4px;
	letter-spacing: 0.01em;
}

.svw-works__client {
	font-size: 12px;
	color: var(--svw-tan);
	margin: 0;
}

.svw-works__cta {
	text-align: center;
	margin-top: 40px;
}

/* ===== Pricing 透明性セクション ===== */
.svw-pricing {
	background: var(--svw-cream-2);
	position: relative;
}

.svw-pricing__compare {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	margin-bottom: 60px;
}

@media (max-width: 768px) {
	.svw-pricing__compare { grid-template-columns: 1fr; }
}

.svw-pricing__card {
	padding: 32px;
	border: 1px solid var(--svw-line-soft);
	background: #fff;
	position: relative;
}

.svw-pricing__card--typical {
	background: rgba(229, 100, 100, 0.04);
	border-color: rgba(229, 100, 100, 0.3);
}

.svw-pricing__card--soa {
	background: var(--svw-cream-3);
	border-color: var(--svw-gold);
	border-width: 2px;
}

.svw-pricing__card-label {
	display: inline-block;
	padding: 4px 12px;
	font-family: 'JetBrains Mono', monospace;
	font-size: 10px;
	letter-spacing: 0.2em;
	border-radius: 99px;
	margin-bottom: 16px;
	font-weight: 600;
}

.svw-pricing__card--typical .svw-pricing__card-label {
	background: rgba(229, 100, 100, 0.15);
	color: #a32d2d;
}

.svw-pricing__card--soa .svw-pricing__card-label {
	background: var(--svw-gold);
	color: var(--svw-editor-darker);
}

.svw-pricing__card-title {
	font-family: 'Playfair Display', 'Noto Serif JP', serif;
	font-size: 24px;
	font-weight: 300;
	color: var(--svw-ink);
	margin: 0 0 20px;
}

.svw-pricing__card-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.svw-pricing__card-list li {
	font-size: 13px;
	color: var(--svw-ink-2);
	padding: 10px 0;
	border-bottom: 1px dashed var(--svw-line-soft);
	line-height: 1.7;
	display: flex;
	gap: 10px;
}

.svw-pricing__card-list li:last-child { border-bottom: 0; }

.svw-pricing__card-list li::before {
	content: '\2717';
	color: #a32d2d;
	font-weight: 700;
	flex-shrink: 0;
}

.svw-pricing__card--soa .svw-pricing__card-list li::before {
	content: '\2713';
	color: var(--svw-gold);
}

/* ===== FAQ ===== */
.svw-faq { background: var(--svw-cream); }

.svw-faq__list {
	max-width: 880px;
	margin: 0 auto;
}

.svw-faq__item {
	background: var(--svw-cream-2);
	border: 1px solid var(--svw-line-soft);
	border-left: 4px solid var(--svw-gold);
	margin-bottom: 12px;
	transition: all 0.3s;
}

.svw-faq__item[open] {
	background: var(--svw-cream-3);
	border-left-color: var(--svw-ink);
}

.svw-faq__q {
	display: grid;
	grid-template-columns: 60px 1fr 36px;
	align-items: center;
	gap: 16px;
	padding: 22px 24px;
	cursor: pointer;
	list-style: none;
	user-select: none;
}

.svw-faq__q::-webkit-details-marker { display: none; }

.svw-faq__q-num {
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px;
	color: var(--svw-gold);
	letter-spacing: 0.15em;
	font-weight: 600;
}

.svw-faq__q-text {
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 15px;
	color: var(--svw-ink);
	line-height: 1.5;
	font-weight: 500;
}

.svw-faq__q-toggle {
	width: 24px;
	height: 24px;
	position: relative;
}

.svw-faq__q-toggle::before,
.svw-faq__q-toggle::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 1.5px;
	background: var(--svw-gold);
	transition: transform 0.3s;
}

.svw-faq__q-toggle::after { transform: rotate(90deg); }

.svw-faq__item[open] .svw-faq__q-toggle::after { transform: rotate(0); opacity: 0; }

.svw-faq__a {
	padding: 0 24px 22px 100px;
}

.svw-faq__a-text {
	font-size: 13px;
	color: var(--svw-tan);
	line-height: 1.95;
	margin: 0;
	letter-spacing: 0.02em;
}

@media (max-width: 768px) {
	.svw-faq__q { grid-template-columns: 40px 1fr 24px; gap: 12px; padding: 18px 16px; }
	.svw-faq__q-text { font-size: 13px; }
	.svw-faq__a { padding: 0 16px 16px 68px; }
}

/* ===== CTA — ダークエンドカード ===== */
.svw-cta {
	background: var(--svw-ink);
	padding: 100px 0;
	position: relative;
}

.svw-cta__card {
	max-width: 760px;
	margin: 0 auto;
	padding: 80px 60px;
	border: 1px solid rgba(212, 178, 122, 0.3);
	text-align: center;
	position: relative;
}

.svw-cta__card .svw-frame__corner {
	position: absolute;
	width: 16px;
	height: 16px;
	border: 1.5px solid var(--svw-gold);
}

.svw-cta__card .svw-frame__corner--tl { top: 14px; left: 14px; border-right: 0; border-bottom: 0; }
.svw-cta__card .svw-frame__corner--tr { top: 14px; right: 14px; border-left: 0; border-bottom: 0; }
.svw-cta__card .svw-frame__corner--bl { bottom: 14px; left: 14px; border-right: 0; border-top: 0; }
.svw-cta__card .svw-frame__corner--br { bottom: 14px; right: 14px; border-left: 0; border-top: 0; }

@media (max-width: 768px) {
	.svw-cta__card { padding: 60px 28px; }
}

.svw-cta__fin {
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px;
	color: var(--svw-gold);
	letter-spacing: 0.5em;
	margin: 0 0 32px;
}

.svw-cta__heading {
	font-family: 'Playfair Display', 'Noto Serif JP', serif;
	font-size: clamp(28px, 4.5vw, 42px);
	font-weight: 200;
	color: var(--svw-cream);
	margin: 0 0 24px;
	line-height: 1.4;
}

.svw-cta__line {
	display: block;
	width: 60px;
	height: 1px;
	background: var(--svw-gold);
	margin: 0 auto 20px;
}

.svw-cta__desc {
	font-size: 14px;
	color: var(--svw-gold-light);
	margin: 0 0 40px;
	line-height: 1.9;
}

.svw-cta__credits {
	font-family: 'JetBrains Mono', monospace;
	font-size: 10px;
	color: var(--svw-gold);
	opacity: 0.6;
	letter-spacing: 0.3em;
	margin: 40px 0 0;
}

/* ===== Scroll reveal ===== */
[data-svw-reveal] {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-svw-reveal].is-visible {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	[data-svw-reveal] {
		opacity: 1 !important;
		transform: none !important;
	}
	.svw-orb { animation: none; }
	.svw-caret { animation: none; }
}

/* ===== Philosophy セクション（三位一体）===== */
.svw-philosophy { background: var(--svw-cream-2); position: relative; }

.svw-philosophy__intro {
	font-size: 14px;
	color: var(--svw-ink-2);
	line-height: 2;
	margin: 0 0 48px;
	max-width: 720px;
}

.svw-trinity {
	display: grid;
	grid-template-columns: 1fr 40px 1fr 40px 1fr;
	gap: 0;
	align-items: stretch;
	margin: 40px 0 50px;
}

@media (max-width: 900px) {
	.svw-trinity {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.svw-trinity__arrow { display: none; }
}

.svw-trinity__card {
	background: var(--svw-cream);
	border: 1px solid var(--svw-line);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.svw-trinity__card:hover { transform: translateY(-4px); }

.svw-trinity__card--center {
	border: 2px solid var(--svw-gold);
	box-shadow: 0 10px 30px rgba(181, 138, 74, 0.18);
	background: var(--svw-cream-3);
}

.svw-trinity__head {
	background: var(--svw-ink);
	color: var(--svw-gold-light);
	padding: 14px;
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px;
	letter-spacing: 0.25em;
	text-align: center;
}

.svw-trinity__card--center .svw-trinity__head {
	background: var(--svw-gold);
	color: var(--svw-editor-darker);
	font-weight: 700;
}

.svw-trinity__body {
	padding: 28px 20px;
	text-align: center;
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.svw-trinity__label {
	font-family: 'Playfair Display', 'Noto Serif JP', serif;
	font-size: 22px;
	color: var(--svw-ink);
	margin: 0 0 14px;
	font-weight: 400;
}

.svw-trinity__sep {
	width: 40px;
	height: 1px;
	background: var(--svw-gold);
	margin: 0 auto 16px;
}

.svw-trinity__role {
	font-family: 'Playfair Display', 'Noto Serif JP', serif;
	font-size: 15px;
	color: var(--svw-ink);
	font-style: italic;
	line-height: 1.7;
	margin: 0 0 12px;
}

.svw-trinity__card--center .svw-trinity__role {
	font-weight: 600;
}

.svw-trinity__note {
	font-size: 11px;
	color: var(--svw-tan);
	margin: 0;
	letter-spacing: 0.05em;
}

.svw-trinity__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: serif;
	font-size: 32px;
	color: var(--svw-gold);
}

.svw-philosophy__conclusion {
	background: var(--svw-cream-3);
	border: 1px dashed var(--svw-gold);
	padding: 50px 36px;
	text-align: center;
	position: relative;
	margin-top: 30px;
}

.svw-philosophy__conclusion::before {
	content: '// const result = unify(film, web, ad);';
	position: absolute;
	top: 14px;
	left: 20px;
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px;
	color: var(--svw-gold);
	letter-spacing: 0.05em;
}

.svw-philosophy__conclusion-title {
	font-family: 'Playfair Display', 'Noto Serif JP', serif;
	font-size: clamp(22px, 3vw, 30px);
	color: var(--svw-ink);
	font-weight: 300;
	line-height: 1.5;
	margin: 12px 0 16px;
}

.svw-philosophy__conclusion-sub {
	font-size: 13px;
	color: var(--svw-tan);
	margin: 0;
}

/* ===== Voice セクション（お客様の声）===== */
.svw-voice {
	background: var(--svw-ink);
	color: var(--svw-cream);
	position: relative;
	padding: 130px 0;
}

.svw-voice .svw-chapter__badge {
	background: var(--svw-gold);
	color: var(--svw-editor-darker);
	font-weight: 700;
}

.svw-voice__eyebrow {
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px;
	color: var(--svw-gold-light);
	letter-spacing: 0.3em;
	margin: 0 0 14px;
}

.svw-voice__title {
	font-family: 'Playfair Display', 'Noto Serif JP', serif;
	font-size: clamp(28px, 4vw, 42px);
	color: var(--svw-cream);
	margin: 0 0 80px;
	font-weight: 200;
	line-height: 1.4;
}

.svw-voice__quote {
	text-align: center;
	max-width: 760px;
	margin: 0 auto;
	position: relative;
	padding: 40px 30px;
}

.svw-voice__quote::before,
.svw-voice__quote::after {
	content: '"';
	position: absolute;
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 140px;
	color: var(--svw-gold);
	opacity: 0.3;
	line-height: 1;
}

.svw-voice__quote::before {
	top: -10px;
	left: 0;
}

.svw-voice__quote::after {
	bottom: -90px;
	right: 0;
}

.svw-voice__text-line {
	font-family: 'Playfair Display', 'Noto Serif JP', serif;
	font-size: clamp(28px, 4vw, 40px);
	color: var(--svw-cream);
	font-weight: 200;
	font-style: italic;
	line-height: 1.6;
	margin: 0;
}

.svw-voice__text-highlight {
	font-family: 'Playfair Display', 'Noto Serif JP', serif;
	font-size: clamp(34px, 5vw, 52px);
	color: var(--svw-gold-bright);
	font-weight: 400;
	font-style: italic;
	display: block;
	margin: 8px 0;
}

.svw-voice__author {
	display: block;
	width: 60px;
	height: 1px;
	background: var(--svw-gold);
	margin: 50px auto 16px;
}

.svw-voice__author-text {
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 11px;
	color: var(--svw-gold-light);
	text-align: center;
	letter-spacing: 0.15em;
	margin: 0;
}

.svw-voice__sub {
	margin-top: 80px;
	text-align: center;
}

.svw-voice__sub-line {
	font-size: 14px;
	color: var(--svw-gold-light);
	margin: 0 0 6px;
	line-height: 1.8;
}

/* ===== Strength の特別マーク（aftercare 強調用）===== */
.svw-strength__layer--featured {
	border-width: 2px;
	border-color: var(--svw-gold);
	box-shadow: 0 8px 24px rgba(181, 138, 74, 0.12);
}

.svw-strength__layer--featured .svw-strength__layer-header {
	background: var(--svw-gold);
	color: var(--svw-editor-darker);
}

.svw-strength__layer--featured .svw-strength__layer-header-key,
.svw-strength__layer--featured .svw-strength__layer-header-value,
.svw-strength__layer--featured .svw-strength__layer-header-id {
	color: var(--svw-editor-darker);
}

.svw-strength__featured-star {
	display: inline-block;
	margin-left: 6px;
	color: var(--svw-editor-darker);
	font-weight: 700;
}