/*
 * デザイントークン v2（docs/04「トークン v2」表を正とする）。
 * 値を直接CSSに書かない。色・角丸・影・操作高さは必ずここを参照する。
 */

:root {
	/* 面 */
	--bg: #fbf6f1;        /* ページ背景（生成り） */
	--surface: #ffffff;   /* カード */
	--line: #efe4dc;      /* 区切り */

	/* 文字 */
	/* 2026-10-23 運営者指示「読みづらい」で濃くした（本文 #4a3f3a→#231c19、補足 #6f625c→#574b45） */
	--ink: #231c19;       /* 本文・値（「未確認」「必須」等の値はこれ） */
	--ink-2: #574b45;     /* 補足 */
	/*
	 * 読ませる文字の下限。ラベル・出所・日付・補足はすべてこれ以上にする。
	 * #8c7f79 は薄すぎるため文字には使わない（運営者指摘 2026-09-08）。
	 */
	--text-2: #574b45;
	--muted: #8c7f79;     /* 罫線・装飾・無効状態のみ。文字に使わない */

	/* 行動（ローズ） */
	--rose: #e9948a;          /* 主ボタン・行動 */
	--rose-dark: #c9766a;     /* リンク・アイコン */
	--rose-tint: #fde7e3;     /* 情報源「病院回答」 */
	--rose-tint-weak: #fff7f5;/* うさぎ固有ブロックの地 */

	/* 状態色。本文より先に目に入ること（v1から据え置き） */
	--sage: #8fbf9f;       /* 診療可 */
	--sage-tint: #e6f1ea;  /* ○・診療時間の● */
	--amber: #eab95a;      /* 条件付き・相違報告 */
	--amber-tint: #fbf0d9; /* 帯 */
	--stone: #c9beb8;      /* 受付不可・要再確認 */
	--coral: #e2705f;      /* 緊急・必須 */

	/*
	 * 淡い地・白地の上の記号と文字（病院詳細 第3稿 2026-09-22 の値。一覧カードの記号・「詳細を見る」と同じ色）。
	 * 上の状態色（地・枠）と組にして使う：--sage-tint の上の ○ は --sage-ink、など。
	 */
	--rose-ink: #a95a4f;    /* 白地の上のリンク・濃いローズの文字 */
	--sage-ink: #2f7a4b;    /* ○（できる・診療） */
	--amber-ink: #8f6410;   /* △（要相談） */
	--stone-ink: #7d716b;   /* ×（できない） */
	--night-amber: #f0c979; /* 夜間の濃い地の上の △ */
	--night-sage: #a8dbb8;  /* 夜間の濃い地の上の ○ */
	--night-stone: #d9cfc9; /* 夜間の濃い地の上の ？ */

	/* 書体 */
	--font: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "ヒラギノ丸ゴ ProN W4",
		"Yu Gothic", "游ゴシック体", sans-serif;

	/* 角丸 */
	--r-12: 12px;
	--r-14: 14px;
	--r-20: 20px;
	--r-22: 22px;  /* カード */
	--r-pill: 999px; /* 入力・ボタン */

	/* 影（v1の「影なし」は撤回） */
	--shadow-card: 0 6px 20px rgba(120, 90, 80, .07);

	/* 文字サイズ（モバイル／PC）。1rem = 15px / 16px */
	--fs-body: 1rem;       /* 本文・値 15/16 */
	--fs-label: .867rem;   /* ラベル・補足・出所・日付 13/14 */
	--fs-min: .8rem;       /* 最小 12/13 */
	/*
	 * バッジ専用の下限（運営者指示 2026-09-11「バッジの文字はもっと小さくてよい」）。
	 * モバイル 11.25px ／ PC 12px。**読ませる文（本文・ラベル・出所・日付）には使わない**——
	 * あちらの下限は --fs-min のまま。バッジは2〜8字の短い決まり文句で、
	 * 同じ言葉が同じ位置に出続けるため、本文より小さくても読み違えが起きにくい。
	 */
	--fs-badge: .75rem;

	/* 操作高さ */
	--h-card-action: 40px; /* 一覧カードの詳細・電話（運営者指示 2026-09-22） */
	--h-min: 44px;
	--h-base: 46px;
	--h-bar-call: 52px;  /* 下部固定バーの電話 */
	--tabbar-row-height: 56px; /* 共通ナビと病院操作の段 */
	--tabbar-padding-y: 12px;
	--tabbar-height: calc(var(--tabbar-row-height) + var(--tabbar-padding-y) * 2 + 1px);
}

/*
 * 文字サイズの基準。rem で組み、PCでは基準を上げて全体を底上げする。
 * 11px は使わない（PCで読めないため。運営者指摘 2026-09-09）。
 */
html {
	background: var(--bg);
	font-size: 15px;
}

@media (min-width: 768px) {
	html { font-size: 16px; }
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font);
	font-weight: 400;
	font-size: var(--fs-body);
	line-height: 1.8;
	-webkit-text-size-adjust: 100%;
	/* 折り返しの指定はサイト全体でこの1つだけ：長い英字・URL が枠からはみ出すときだけ折る。日本語の折り返しはブラウザに任せ、
	   個別の要素で word-break・overflow-wrap・line-break を指定しない（2026-10-22 運営者指示） */
	overflow-wrap: anywhere;
}

/* ---- ヘッダー ---- */
/* ロゴは横:縦 ≒ 4.06:1。高さで指定して幅は auto に任せる（docs/18）。 */
.site-header {
	background: var(--bg);
	padding: 16px 20px;
	border-bottom: 1px solid var(--line);
}

.site-header__brand {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

/*
 * ロゴ内にタグラインが入っているので、小さいとその行が読めない。
 * 文字高はロゴ高の約11%。PC 64px で約7px。88px だと大きすぎたため 64px に調整
 * （運営者判断 2026-09-09）。
 */
.site-header__logo {
	height: 48px;
	width: auto;
	display: block;
}

@media (min-width: 768px) {
	.site-header__logo { height: 64px; }
}

/* ---- フッター ---- */
.site-footer {
	margin-top: 32px;
	padding: 22px 20px 28px;
	border-top: 1px solid var(--line);
	background: var(--surface);
	color: var(--ink-2);
	font-size: 13px;
}

.site-footer a {
	color: var(--rose-dark);
}

.site-footer__inner { max-width: var(--page-max); margin: 0 auto; }
/* ロゴとXを1行の左右に置く。運営表記は最下段の©と同じ行（運営者選択 案B・2026-09-24）。 */
.site-footer__identity {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.site-footer__brand { display: inline-flex; min-width: 0; text-decoration: none; }
.site-footer__brand:focus-visible { outline: 2px solid var(--rose-dark); outline-offset: 3px; border-radius: 4px; }
.site-footer__logo { display: block; height: 50px; width: auto; max-width: 100%; }
@media (min-width: 768px) {
	.site-footer__logo { height: 54px; }
}
.site-footer__social {
	width: 40px; height: 40px; flex: none;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%;
	background: var(--ink); color: var(--surface) !important;
	text-decoration: none; transition: transform .15s, opacity .15s;
}
.site-footer__social:hover { transform: translateY(-1px); opacity: .82; }
.site-footer__social:focus-visible { outline: 2px solid var(--rose-dark); outline-offset: 3px; }
/* 主要リンクは2列のタイル。3件目も全幅にせず、上の行と同じ幅にそろえる。 */
.site-footer__nav {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	margin-top: 18px;
}
.site-footer__link {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 52px;
	box-sizing: border-box;
	padding: 8px 26px 8px 14px;
	border-radius: var(--r-14);
	background: var(--bg);
	color: var(--ink) !important;
	font-size: var(--fs-label);
	font-weight: 700;
	line-height: 1.45;
	text-decoration: none;
}
.site-footer__link::after {
	content: "";
	position: absolute;
	right: 14px;
	width: 6px;
	height: 6px;
	border-top: 1.5px solid var(--rose-dark);
	border-right: 1.5px solid var(--rose-dark);
	transform: rotate(45deg);
}
.site-footer__link:hover { color: var(--rose-dark) !important; background: var(--rose-tint-weak); }
/* 応援の導線。地の色だけ変え、大きさは他のカードと同じ。アイコンは6枚とも付けない（2026-10-22 運営者決定。footer.php の svg は表示しない） */
.site-footer__link--support { background: var(--rose-tint); }
.site-footer__link--support:hover { background: var(--rose-tint); color: var(--rose-ink) !important; }
.site-footer__link-icon { display: none; }
.site-footer__link:focus-visible { outline: 2px solid var(--rose-dark); outline-offset: 2px; }
.site-footer__meta { margin-top: 18px; }
.site-footer__policies {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	font-size: var(--fs-min);
	line-height: 1.7;
}
.site-footer__policies a { text-underline-offset: 3px; }
.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 4px 16px;
	margin-top: 10px;
	padding-top: 12px;
	border-top: 1px solid var(--line);
	color: var(--text-2);
	font-size: var(--fs-min);
	line-height: 1.5;
}
.site-footer__operator,
.site-footer__copy { margin: 0; }
.site-footer__copy { white-space: nowrap; }

/* ---- レイアウト幅（docs/04「レイアウト幅」） ---- */
/*
 * 全ページ 520px・中央寄せ。PCでも1カラムを維持し、2カラム化しない。
 * 520px を超える領域はページ背景をそのまま広げ、コンテンツ枠に影・枠線を付けない。
 * 読者はスマホ利用が中心で、緊急時は特にそうであるため、モバイルの見え方を正とする。
 */
:root { --page-max: 520px; }

.site-main > * {
	max-width: var(--page-max);
	margin-left: auto;
	margin-right: auto;
}

/*
 * ヘッダーのロゴと三本線も本文と同じ520pxに収める（運営者指示 V15・2026-09-14）。
 * 外側の背景と罫線だけを画面幅いっぱいにし、中身は無制限に左右へ広げない。
 */
.site-header__inner {
	width: 100%;
	max-width: var(--page-max);
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}
.site-header__brand {
	min-width: 0;
}

/* 追従フッターも同じ幅で中央に。画面幅いっぱいに伸ばさない。 */
.tabbar {
	max-width: var(--page-max);
	margin: 0 auto;
}