@charset "UTF-8";
/* =========================================================
 * elephanTools 共通スタイル
 * mockup_v3 のデザインを共通化したもの。Bootstrap 5.3 の後に読み込む。
 *   1. 基本・配色
 *   2. Bootstrap 部品の配色（ブランドカラーに合わせる）
 *   3. ヘッダー
 *   4. トップ（ツールカタログ）
 *   5. ツールページ（view_<id>.html の互換スタイルを含む）
 *   6. フッター
 * ======================================================= */

/* ===== 1. 基本・配色 ===== */
:root {
	--brand: #1EA7D6;
	/* 文字色や白文字の背景には、コントラスト確保のため --brand-dark 以上の濃さを使う */
	--brand-dark: #1689b0;
	--brand-darker: #127499;
	--brand-soft: #eaf7fd;
	--ink: #2a3342;
	--text-sub: #5b6776;
	--text-muted: #6b7686;
	--text-faint: #8a96a5;
	--line: #e7ecf3;
	--line-strong: #d7e3ee;
	--bg: #f6f8fb;
	--focus-ring: rgba(30, 167, 214, .45);
	--header-h: 60px;

	--bs-body-font-family: BlinkMacSystemFont, "Segoe UI", "Roboto", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
	--bs-primary: #1689b0;
	--bs-primary-rgb: 22, 137, 176;
	--bs-link-color: #1689b0;
	--bs-link-color-rgb: 22, 137, 176;
	--bs-link-hover-color: #127499;
	--bs-link-hover-color-rgb: 18, 116, 153;
}

/* ページ間でスクロールバー有無による横ズレを防ぐ（常に縦スクロールバー領域を確保）。
   背景はフッターと同じ白にし、内容の短いページでもフッターの下に灰色がはみ出さないようにする */
html {
	overflow-y: scroll;
	background: #fff;
}

/* ※ --bs-body-bg は変えない（入力欄・カード等の白背景が連動して灰色になるため） */
body {
	background: var(--bg);
	color: var(--ink);
}

/* ===== 2. Bootstrap 部品の配色 ===== */
.btn-primary {
	--bs-btn-bg: var(--brand-dark);
	--bs-btn-border-color: var(--brand-dark);
	--bs-btn-hover-bg: var(--brand-darker);
	--bs-btn-hover-border-color: var(--brand-darker);
	--bs-btn-focus-shadow-rgb: 30, 167, 214;
	--bs-btn-active-bg: #10688a;
	--bs-btn-active-border-color: #10688a;
	--bs-btn-disabled-bg: var(--brand-dark);
	--bs-btn-disabled-border-color: var(--brand-dark);
}

.btn-outline-primary {
	--bs-btn-color: var(--brand-dark);
	--bs-btn-border-color: var(--brand-dark);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: var(--brand-dark);
	--bs-btn-hover-border-color: var(--brand-dark);
	--bs-btn-focus-shadow-rgb: 30, 167, 214;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: var(--brand-dark);
	--bs-btn-active-border-color: var(--brand-dark);
	--bs-btn-disabled-color: var(--brand-dark);
	--bs-btn-disabled-border-color: var(--brand-dark);
}

.form-control,
.form-select {
	border-color: var(--line-strong);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
	border-color: #8fd3eb;
	box-shadow: 0 0 0 .25rem rgba(30, 167, 214, .2);
}

.form-check-input:checked {
	background-color: var(--brand-dark);
	border-color: var(--brand-dark);
}

/* ===== 3. ヘッダー ===== */
.site-header {
	background: #fff;
	border-bottom: 1px solid var(--line);
	position: sticky;
	top: 0;
	z-index: 1020;
}

.site-header-inner {
	height: var(--header-h);
	display: flex;
	align-items: center;
	gap: .9rem;
}

.brand-logo {
	display: block;
	flex-shrink: 0;
}

.brand-logo svg {
	height: 30px;
	width: auto;
	display: block;
}

.header-corp {
	margin-left: auto;
	font-size: .875rem;
	color: var(--text-muted);
	text-decoration: none;
}

.header-corp:hover {
	color: var(--brand-darker);
	text-decoration: underline;
}

/* ツールページ：ロゴ │ ツール名 ……… ツール一覧へ */
.header-divider {
	width: 1px;
	height: 26px;
	background: #e1e8f0;
	flex-shrink: 0;
}

.tool-name {
	font-weight: 700;
	font-size: 1.05rem;
	margin: 0;
	color: var(--ink);
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.back-link {
	margin-left: auto;
	flex-shrink: 0;
	font-size: .85rem;
	color: var(--brand-dark);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: .25rem;
}

.back-link:hover {
	color: var(--brand-darker);
	text-decoration: underline;
}

.back-link svg {
	width: 16px;
	height: 16px;
}

@media (max-width: 575.98px) {
	.site-header-inner {
		gap: .65rem;
	}

	.brand-logo svg {
		height: 24px;
	}

	.tool-name {
		font-size: .95rem;
	}

	/* 狭い画面ではアイコンのみ（リンク名は aria-label で保持） */
	.back-link span {
		display: none;
	}

	.back-link svg {
		width: 20px;
		height: 20px;
	}
}

/* ===== 4. トップ（ツールカタログ） ===== */
.hero {
	background: linear-gradient(135deg, var(--brand-soft) 0%, var(--bg) 70%);
	border-bottom: 1px solid var(--line);
}

.hero h1 {
	font-weight: 800;
	letter-spacing: .02em;
}

.hero .lead {
	color: var(--text-sub);
}

.search-wrap {
	max-width: 560px;
}

.search-wrap .form-control {
	border-radius: 999px;
	padding-left: 2.8rem;
	height: 52px;
	box-shadow: 0 6px 24px rgba(30, 167, 214, .12);
	border-color: var(--line-strong);
}

.search-wrap .form-control:focus {
	border-color: #8fd3eb;
	box-shadow: 0 0 0 .25rem rgba(30, 167, 214, .2), 0 6px 24px rgba(30, 167, 214, .12);
}

.search-wrap .search-icon {
	position: absolute;
	left: 1rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--brand);
	pointer-events: none;
}

/* カテゴリ絞り込みチップ（ヘッダー直下に固定） */
.filter-bar {
	position: sticky;
	top: var(--header-h);
	z-index: 1010;
	background: var(--bg);
	padding: .85rem 0;
	margin-bottom: .5rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	border-bottom: 1px solid var(--line);
}

.filter-bar .filter-label {
	font-size: .8rem;
	font-weight: 700;
	color: var(--text-faint);
	margin-right: .25rem;
	flex-shrink: 0;
}

.chip {
	flex-shrink: 0;
	white-space: nowrap;
	border: 1px solid var(--line-strong);
	background: #fff;
	color: var(--text-sub);
	border-radius: 999px;
	padding: .32rem .9rem;
	font-size: .85rem;
	line-height: 1.2;
	cursor: pointer;
	transition: background .12s, border-color .12s, color .12s;
}

.chip:hover {
	border-color: var(--brand);
	color: var(--brand-darker);
}

.chip.active {
	background: var(--brand-dark);
	border-color: var(--brand-dark);
	color: #fff;
}

.chip:focus-visible {
	outline: 3px solid var(--focus-ring);
	outline-offset: 2px;
}

/* 狭い画面ではチップを 1 行に並べて横スクロール */
@media (max-width: 575.98px) {
	.filter-bar {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.filter-bar::-webkit-scrollbar {
		display: none;
	}
}

/* カテゴリ見出し */
.cat-block {
	/* アンカー遷移時に sticky ヘッダー＋フィルターバーへ隠れないように */
	scroll-margin-top: 130px;
}

.cat-title {
	font-weight: 700;
	font-size: 1.05rem;
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: 2.2rem 0 1rem;
	color: var(--ink);
}

.cat-title .badge-count {
	font-weight: 600;
	font-size: .72rem;
	color: var(--text-faint);
	background: #eef2f7;
	border-radius: 999px;
	padding: .15rem .55rem;
}

/* ツールカード */
.tool-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 14px;
	padding: 1.1rem 1.15rem;
	text-decoration: none;
	color: inherit;
	transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

a.tool-card:hover {
	color: inherit;
	transform: translateY(-3px);
	box-shadow: 0 10px 28px rgba(42, 51, 66, .10);
	border-color: var(--brand);
}

a.tool-card:focus-visible {
	outline: 3px solid var(--focus-ring);
	outline-offset: 2px;
}

.tool-card .icon-box {
	width: 42px;
	height: 42px;
	border-radius: 10px;
	background: var(--brand-soft);
	color: var(--brand);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: .7rem;
}

.tool-card .icon-box svg {
	width: 22px;
	height: 22px;
}

.tool-card h3 {
	font-size: 1rem;
	font-weight: 700;
	margin: 0 0 .3rem;
}

.tool-card p {
	font-size: .82rem;
	color: var(--text-muted);
	margin: 0;
	flex-grow: 1;
}

.tool-card .meta {
	margin-top: .7rem;
	display: flex;
	align-items: center;
	gap: .4rem;
}

.tool-card .cat-tag {
	font-size: .7rem;
	color: #7a8696;
	background: #f1f4f8;
	border-radius: 999px;
	padding: .1rem .5rem;
}

.badge-new,
.badge-soon,
.badge-hidden {
	font-size: .65rem;
	font-weight: 700;
	border-radius: 999px;
	padding: .1rem .45rem;
}

.badge-new {
	background: var(--brand-dark);
	color: #fff;
	letter-spacing: .04em;
}

.badge-soon {
	background: #eef2f7;
	color: var(--text-faint);
}

/* ?dev=1 のときだけ表示される非公開ツール */
.badge-hidden {
	background: #fff3cd;
	color: #8a6d1a;
}

/* 近日公開（リンクなし）。?dev=1 でリンクされる場合も見た目は控えめのまま */
.tool-card.coming {
	opacity: .7;
	cursor: default;
	border-style: dashed;
}

a.tool-card.coming {
	cursor: pointer;
}

.tool-card.coming:hover {
	transform: none;
	box-shadow: none;
	border-color: #d7dee7;
}

.tool-card.coming .icon-box {
	background: #f1f4f8;
	color: #9aa6b4;
}

.no-result {
	display: none;
	text-align: center;
	color: var(--text-faint);
	padding: 3rem 0;
}

@media (prefers-reduced-motion: reduce) {

	.tool-card,
	.chip {
		transition: none;
	}

	a.tool-card:hover {
		transform: none;
	}
}

/* ===== 5. ツールページ ===== */
.tool-body {
	max-width: 880px;
	margin: 1.8rem auto 2.5rem;
}

/* tools.json で "layout": "wide" を指定したページ */
.tool-body.is-wide {
	max-width: 1140px;
}

/* --- view_<id>.html は旧テーマ（AdminKit）前提のマークアップのため、
       ここで新デザイン（mockup_v3 の白カード）に合わせて表示する --- */
.tool-body .content {
	padding: 0;
}

.tool-body .content h1.h3 {
	font-size: 1.5rem;
	font-weight: 800;
	color: var(--ink);
}

.tool-body .card {
	--bs-card-spacer-y: 1.6rem;
	--bs-card-spacer-x: 1.6rem;
	--bs-card-cap-padding-y: 1.1rem;
	--bs-card-cap-padding-x: 1.6rem;
	--bs-card-cap-bg: transparent;
	--bs-card-border-color: var(--line);
	--bs-card-border-radius: 14px;
	--bs-card-inner-border-radius: 13px;
	margin-bottom: 1.5rem;
}

.tool-body .card-header {
	border-bottom: 0;
}

.tool-body .card-header+.card-body {
	padding-top: .9rem;
}

.tool-body .card-title {
	font-size: 1rem;
	font-weight: 700;
	color: var(--ink);
}

/* 旧テーマ固有のユーティリティ */
.tool-body .text-navy {
	color: var(--text-muted);
}

.tool-body .text-sm {
	font-size: .8rem;
}

.tool-body .text-small {
	font-size: .875em;
}

/* 結果の数値・値の強調表示（文字数・IPアドレス等）はブランドカラーで */
.tool-body .h2.text-success,
.tool-body .h4.text-success {
	color: var(--brand-dark) !important;
}

.tool-body .h2.text-success {
	font-weight: 700;
}

@media (max-width: 575.98px) {
	.tool-body {
		margin-top: 1.2rem;
	}

	.tool-body .card {
		--bs-card-spacer-y: 1.1rem;
		--bs-card-spacer-x: 1.1rem;
		--bs-card-cap-padding-x: 1.1rem;
	}
}

/* ===== 6. フッター ===== */
.site-footer {
	border-top: 1px solid var(--line);
	background: #fff;
	color: var(--text-muted);
	font-size: .85rem;
	margin-top: 2rem;
}

.site-footer .foot-logo svg {
	height: 32px;
	width: auto;
	display: block;
	margin-bottom: .9rem;
}

.site-footer .foot-company {
	font-weight: 700;
	color: var(--ink);
}

.site-footer h2.foot-title {
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .08em;
	color: var(--ink);
	text-transform: uppercase;
	margin-bottom: .8rem;
}

.site-footer ul.foot-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.site-footer ul.foot-list li {
	margin-bottom: .45rem;
}

.site-footer a.foot-link {
	color: var(--text-muted);
	text-decoration: none;
}

.site-footer a.foot-link:hover {
	color: var(--brand-darker);
	text-decoration: underline;
}

.site-footer .foot-hr {
	border-color: var(--line);
	opacity: 1;
}

.site-footer .copyright {
	color: var(--text-faint);
}