/*
 * Voice Career スクラッチ版サイトを模倣したヘッダー/フッター
 * （Tailwindの実寸に合わせている。ヘッダー=sticky全幅、フッター=最小構成 v2）
 */

:root {
	--vc-blue: #3489ff;
	--vc-navy: #1e407b;
	--vc-text: #1c2a40;
	--vc-muted: #6b7280;
	--vc-border: #e5e7eb;
}

/* ==========================================================================
   ヘッダー（スクラッチ: sticky top-0 / border-b / 幅制限なし・ロゴ左端 / px-4 py-3）
   ========================================================================== */

.vc-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: #fff;
	border-bottom: 1px solid var(--vc-border);
}

.vc-header__inner {
	/* ロゴを画面左端に寄せるためコンテナの幅制限なし（スクラッチと同じ・クライアント要望 2026-07-03） */
	width: 100%;
	padding: 12px 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.vc-header__logo {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	text-decoration: none;
}

.vc-header__logo-img {
	display: block;
	height: 28px; /* h-7 */
	width: auto;
}

.vc-header__logo-text {
	font-size: 18px;
	font-weight: 700;
	color: var(--vc-navy);
}

.vc-header__nav {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	white-space: nowrap;
	font-size: 14px;
}

.vc-header__nav a {
	color: var(--vc-text);
	text-decoration: none;
}

.vc-header__nav a:hover {
	text-decoration: underline;
}

.vc-header__nav--desktop {
	display: none;
	gap: 20px; /* スクラッチ gap-5（PCもアイコン式・2026-07-16共通化に追随） */
}

.vc-header__nav--mobile {
	display: flex;
	gap: 8px;
}

@media (min-width: 640px) {
	.vc-header__nav--desktop {
		display: flex;
	}
	.vc-header__nav--mobile {
		display: none;
	}
}

/* ==========================================================================
   フッター（スクラッチ最小構成: bg #1e407b / max-w-4xl / px-6 py-7 /
   メニュー横一列センター＋コピーライトのみ）
   ========================================================================== */

/* 短いページでもフッターを最下部に張り付ける（スクラッチの min-h-dvh flex と同じ挙動） */
body {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.vc-footer {
	/* flexの余白吸収で最下部へ。コンテンツとの間隔は各テンプレートの下パディングが担う */
	margin-top: auto;
	border-top: 1px solid var(--vc-border);
	background: var(--vc-navy);
	color: #fff;
}

.vc-footer__inner {
	max-width: 56rem; /* max-w-4xl */
	margin: 0 auto;
	padding: 28px 24px; /* py-7 px-6 */
}

.vc-footer__menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	column-gap: 24px; /* gap-x-6 */
	row-gap: 10px; /* gap-y-2.5 */
}

.vc-footer__menu a {
	font-size: 14px; /* text-sm */
	line-height: 20px;
	color: rgba(255, 255, 255, 0.8);
	text-decoration: none;
	transition: color 0.2s;
}

.vc-footer__menu a:hover {
	color: #fff;
	text-decoration: underline;
}

.vc-footer__copyright {
	margin: 20px 0 0; /* mt-5 */
	text-align: center;
	font-size: 12px; /* text-xs */
	line-height: 16px;
	color: rgba(255, 255, 255, 0.55);
}

/* ==========================================================================
   旧固定ヘッダー前提の打ち消し
   ========================================================================== */

/* 旧テーマは position:fixed のヘッダー（76px）前提で body に padding、
   ヒーローに食い込みマージンを持つ。新ヘッダーは sticky（通常フロー）なので変数を0にして無効化 */
:root {
	--header-h: 0px;
}

/* --------------------------------------------------------------------------
   ナビのボタン表示＋「先月は◯件の投稿がありました」ラベル（2026-07-15）
   スクラッチ側 site-header.tsx / post-count-badge.tsx と同じ実寸値で統一。
   -------------------------------------------------------------------------- */
.vc-header__navitem {
	position: relative;
	display: inline-flex;
}
/* 「![ラベル](URL)」のボタン表示（スクラッチ: rounded-lg bg-#3489ff px-3.5 py-1.5 font-semibold） */
.vc-header__btn {
	border-radius: 8px;
	background: #3489ff;
	padding: 6px 14px;
	font-weight: 600;
	color: #fff !important;
	transition: opacity 0.15s;
}
.vc-header__btn:hover {
	opacity: 0.9;
	text-decoration: none !important;
}
/* /post リンク下のラベル。表示4秒後に0.7秒でフェードアウト（スクラッチ PostCountBadge と同じ） */
.vc-post-badge {
	position: absolute;
	right: 0;
	top: 100%;
	z-index: 50;
	margin-top: 6px;
	white-space: nowrap;
	border-radius: 6px;
	background: #3489ff;
	padding: 6px 12px;
	font-size: 12px;
	font-weight: 500;
	color: #fff;
	box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
	pointer-events: none;
	animation: vc-badge-fade 0.7s ease 4s forwards;
}
.vc-post-badge strong {
	margin: 0 2px;
	font-size: 16px;
	font-weight: 700;
}
@keyframes vc-badge-fade {
	to {
		opacity: 0;
		visibility: hidden;
	}
}

/* --------------------------------------------------------------------------
   スマホナビ: アイコン＋極小文字（OpenMoney式。2026-07-15）
   スクラッチ側 site-header.tsx renderMobileLink と同じ実寸値。
   -------------------------------------------------------------------------- */
.vc-header__nav--mobile {
	gap: 14px; /* スクラッチ gap-3.5 */
}
.vc-header__icon-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	color: #1c2a40;
	text-decoration: none !important;
}
.vc-header__icon-link svg {
	width: 20px;
	height: 20px;
}
.vc-header__icon-label {
	font-size: 10px;
	font-weight: 500;
	line-height: 1;
}
/* PC（640px以上）はアイコン・文字をやや大きく（スクラッチ sm:h-6 / sm:text-xs） */
@media (min-width: 640px) {
	.vc-header__icon-link svg {
		width: 24px;
		height: 24px;
	}
	.vc-header__icon-label {
		font-size: 12px;
	}
}
/* 「投稿（謝礼あり）」はスクラッチと同じ青系文字で固定（アイコンは currentColor 追従）。
   .vc-header__nav a（詳細度0,1,1）に負けないよう a を含めて指定する */
.vc-header__nav a.vc-header__icon-link--post {
	color: #1e6ae0;
}
/* !記法（CTA）は青色＋やや太いストローク */
.vc-header__icon-link--cta {
	color: #1e6ae0;
}
.vc-header__icon-link--cta svg {
	stroke-width: 2.2;
}
/* スマホはロゴをやや縮小して1段に収める（スクラッチ h-6 sm:h-7 と同じ） */
@media (max-width: 639.98px) {
	.vc-header__logo-img {
		height: 24px;
	}
}

/* --------------------------------------------------------------------------
   ログイン状態でのナビ切替（2026-07-23）
   スクラッチのSupabaseログインcookieを header.php 末尾のJSが判定し、
   .vc-header--authed を付与する。既定=ゲスト用を表示・ログイン用は非表示。
   -------------------------------------------------------------------------- */
.vc-header__nav--member {
	display: none;
}
.vc-header--authed .vc-header__nav--guest {
	display: none;
}
@media (min-width: 640px) {
	.vc-header--authed .vc-header__nav--member.vc-header__nav--desktop {
		display: flex;
	}
}
@media (max-width: 639.98px) {
	.vc-header--authed .vc-header__nav--member.vc-header__nav--mobile {
		display: flex;
	}
}