/*
 * お知らせ・エラーの見た目（修正依頼 No.0102）
 *
 *   ★ css/common.css から切り出しました（2026-10-18）
 *     管理画面（admin/）は css/common.css を読みません。
 *     サイトと管理画面の両方で、同じ見た目にそろえるためです。
 *     動かしているのは js/message.js です。
 */
/* ============================================================
 * お知らせ・エラーの見た目（修正依頼 No.0102）
 * ============================================================
 *   「エラーの文章は、サイトのトンマナにあった形で表示し、
 *     可能な限り使用言語で表示させる。」（優先度 高）
 *
 *   これまでは alert() でした。ブラウザの灰色の窓が出て、
 *   そこに「joyney.jp の内容」とドメイン名まで並びます。
 *   サイトの色も文字も使えません。
 *
 *   ------------------------------------------------------------
 *   置き場所
 *   ------------------------------------------------------------
 *   スマホ … 画面の下。下のメニュー（md:hidden）の上に重ねます
 *   パソコン … 画面の右下
 *
 *   Clipの丸ボタン（.jy-fab）と重ならないよう、少し上に出します。
 *   出しているのは js/common.js（JoyneyMsg）です。
 * ========================================================== */
.jy-notes {
	position: fixed;
	left: 50%;
	bottom: calc(var(--jy-fab-bottom, 1.25rem) + 4.5rem);
	transform: translateX(-50%);
	z-index: 13500;              /* 写真の拡大（13000）より上 */
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: calc(100% - 2rem);
	max-width: 420px;
	pointer-events: none;        /* 下のものを押せるように。中身だけ押せます */
}

.jy-note {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px 10px 12px 14px;
	border-radius: 12px;
	border: 1px solid #e2e8f0;
	border-left: 4px solid #94a3b8;
	background: #fff;
	box-shadow: 0 10px 28px rgba(15, 23, 42, .18);
	color: #1f2937;
	pointer-events: auto;
	animation: jy-note-in .18s ease-out;
}

.jy-note-tx {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.6;
	/* 長い文でも、箱を押し広げずに折り返します */
	overflow-wrap: anywhere;
}

/* 閉じるボタン。指で押せる大きさ（44px）にします */
.jy-note-x {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: -12px -10px -12px 0;
	border: 0;
	background: none;
	color: #94a3b8;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}
.jy-note-x:hover { color: #475569; }

/* できなかった知らせ … サイトのオレンジ寄りの赤。きつい赤は使いません */
.jy-note--err { border-left-color: #ea580c; background: #fff7ed; color: #7c2d12; }
/* うまくいった知らせ */
.jy-note--ok  { border-left-color: #16a34a; background: #f0fdf4; color: #14532d; }
/* ただのお知らせ */
.jy-note--info { border-left-color: #0ea5e9; background: #f0f9ff; color: #0c4a6e; }

.jy-note.is-out { animation: jy-note-out .2s ease-in forwards; }

@keyframes jy-note-in {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: none; }
}
@keyframes jy-note-out {
	from { opacity: 1; transform: none; }
	to   { opacity: 0; transform: translateY(8px); }
}

/* 動きを控える設定の方には、動かしません */
@media (prefers-reduced-motion: reduce) {
	.jy-note, .jy-note.is-out { animation: none; }
}

/* パソコンでは、右下に寄せます（下にメニューも広告もありません） */
@media (min-width: 768px) {
	.jy-notes {
		left: auto;
		right: 1.5rem;
		bottom: 5.5rem;          /* Clipのラベル付きボタン（高さ48px）の上 */
		transform: none;
		width: auto;
	}
	.jy-note-tx { font-size: 14px; }
}