/* ============================================================
 * rinka-letters-v2.css — りんかからの手紙（/letters/）の刷新（2026-09-27・追加のみ）
 *
 * ・「りんか郵便局」：エアメールのふち・消印・切手・封ろう・インデックスのタブ。
 * ・読み込みは inc/fansite.php（手紙ページだけ・rinka-letters.css のあと）。
 * ・描画は rinka-letters-view.js のまま（ここは見た目だけ）。新しい飾り画像は assets/img/letters/v2/。
 * 撤収: inc/fansite.php の v2 読み込み1か所を消すだけ。
 * ========================================================== */

.rlv {
	--rlv2-air-a: #ff9cc2;
	--rlv2-air-b: #b9a6ff;
	--rlv2-desk: #fffaf3;
	gap: 22px;
}

/* ---------- 1. ヘッダー＝エアメールのはがき ---------- */
.rlv .rlv-hero {
	border: 0;
	border-radius: 22px;
	padding: 22px 18px 18px;
	box-shadow: 0 18px 38px -22px rgba(150, 60, 110, .5), 0 2px 0 rgba(255, 255, 255, .9) inset;
	isolation: isolate;
}
.rlv .rlv-hero::before {
	/* エアメールのしましまのふち */
	inset: 0;
	border: 0;
	border-radius: 22px;
	padding: 7px;
	background: repeating-linear-gradient(-45deg, var(--rlv2-air-a) 0 12px, #fff 12px 20px, var(--rlv2-air-b) 20px 32px, #fff 32px 40px);
	-webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
	z-index: -1;
	opacity: .85;
}
.rlv .rlv-hero__face {
	/* 切手のようなぎざぎざの額 */
	border-radius: 50%;
	padding: 5px;
	background: conic-gradient(from 200deg, #ffb3cf, #cdb6ff, #ffe39a, #ffb3cf);
	box-shadow: 0 0 0 4px #fff, 0 8px 18px -6px rgba(184, 58, 114, .55);
}
.rlv .rlv-hero__say {
	border-radius: 16px 16px 16px 6px;
	background: #fff;
	box-shadow: 0 6px 16px -10px rgba(184, 58, 114, .55), inset 0 0 0 1.5px #fbe2ec;
}
.rlv .rlv-hero__say::before { display: none; }
.rlv .rlv-hero__main { position: relative; z-index: 1; }

/* 消印（顔の右下にぽんと押す） */
.rlv-postmark {
	position: absolute;
	right: -30px;
	bottom: -14px;
	z-index: 2;
	display: flex;
	align-items: center;
	pointer-events: none;
	transform: rotate(-14deg) scale(.72);
	transform-origin: 30% 70%;
	opacity: .78;
}
.rlv-hero__face .rlv-postmark__wave { display: none; }
.rlv-postmark__ring { background: rgba(255, 255, 255, .78); }
.rlv-postmark__ring {
	display: grid;
	place-items: center;
	align-content: center;
	width: 62px; height: 62px;
	border-radius: 50%;
	border: 2px solid #c7427a;
	box-shadow: inset 0 0 0 3px #fff8fb, inset 0 0 0 4.5px rgba(199, 66, 122, .8);
	color: #c7427a;
	font-family: 'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', sans-serif;
	line-height: 1.05;
}
.rlv-postmark__ring small { font-size: 7px; font-weight: 800; letter-spacing: .08em; }
.rlv-postmark__ring b { font-size: 15px; font-weight: 900; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.rlv-postmark__wave {
	width: 46px; height: 26px;
	margin-left: -2px;
	background:
		radial-gradient(10px 6px at 25% 100%, transparent 70%, #c7427a 72% 86%, transparent 88%) 0 0 / 12px 8px repeat-x,
		radial-gradient(10px 6px at 25% 0, transparent 70%, #c7427a 72% 86%, transparent 88%) 6px 9px / 12px 8px repeat-x,
		radial-gradient(10px 6px at 25% 100%, transparent 70%, #c7427a 72% 86%, transparent 88%) 0 18px / 12px 8px repeat-x;
	opacity: .9;
}
/* ポスト（右下からのぞく） */
.rlv .rlv-hero__box {
	position: absolute;
	right: 8px;
	bottom: 8px;
	width: 58px; height: 58px;
	z-index: 0;
	opacity: .95;
	filter: drop-shadow(0 4px 6px rgba(184, 58, 114, .25));
	pointer-events: none;
}
.rlv .rlv-stats { position: relative; z-index: 1; }
.rlv .rlv-stats > div {
	border: 0;
	background: rgba(255, 255, 255, .92);
	box-shadow: inset 0 0 0 1.5px #f6dbe7, 0 6px 14px -12px rgba(184, 58, 114, .6);
}

/* ---------- セクションの箱：机の上の紙＋マスキングテープ ---------- */
.rlv .rlv-today,
.rlv .rlv-hints,
.rlv .rlv-box {
	position: relative;
	border: 0;
	border-radius: 22px;
	padding: 20px 16px 16px;
	background:
		radial-gradient(rgba(224, 88, 143, .07) 1.2px, transparent 1.4px) 0 0 / 14px 14px,
		var(--rlv2-desk);
	box-shadow: inset 0 0 0 1.5px #f4e2d6, 0 14px 30px -24px rgba(150, 90, 60, .5);
}
.rlv .rlv-today::before,
.rlv .rlv-hints::before,
.rlv .rlv-box::before {
	content: '';
	position: absolute;
	top: -9px;
	left: 50%;
	width: 86px; height: 20px;
	transform: translateX(-50%) rotate(-2deg);
	border-radius: 3px;
	background: repeating-linear-gradient(90deg, rgba(255, 156, 194, .78) 0 8px, rgba(255, 190, 214, .78) 8px 16px);
	box-shadow: 0 2px 4px rgba(150, 60, 100, .12);
	pointer-events: none;
}
.rlv .rlv-hints::before { background: repeating-linear-gradient(90deg, rgba(185, 166, 255, .75) 0 8px, rgba(210, 198, 255, .75) 8px 16px); transform: translateX(-50%) rotate(2deg); }
.rlv .rlv-box::before { background: repeating-linear-gradient(90deg, rgba(255, 207, 120, .8) 0 8px, rgba(255, 228, 170, .8) 8px 16px); }
.rlv .rlv-ico--v2 { width: 50px; height: 50px; filter: drop-shadow(0 3px 5px rgba(150, 60, 100, .2)); }
.rlv .rlv-h { font-size: 1.18rem; }

/* ---------- 2. きょうの手紙 ---------- */
.rlv .rlv-env--big .rlv-env__art { max-width: 300px; }
.rlv .rlv-env__cta {
	background: linear-gradient(180deg, #ff8fb8, #e0588f);
	box-shadow: 0 4px 0 #b83a72, 0 12px 20px -10px rgba(200, 60, 140, .7);
	transition: transform .15s, box-shadow .15s;
}
.rlv .rlv-env--big:active .rlv-env__cta { transform: translateY(3px); box-shadow: 0 1px 0 #b83a72, 0 6px 12px -8px rgba(200, 60, 140, .7); }
.rlv .rlv-strip__row { max-width: 460px; margin: 0 auto; }
.rlv .rlv-strip__row li { border-radius: 50%; }
/* あしたの予告（共通の rinka-daytalk.js から） */
.rlv .rlv-teaser {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: fit-content;
	max-width: 100%;
	margin: 12px auto 0;
	padding: 8px 14px;
	border-radius: 16px;
	background: #fff;
	box-shadow: inset 0 0 0 1.5px #f3dfe9;
	color: var(--rlv-ink);
	font-family: var(--rlv-hand);
	font-weight: 600;
	font-size: .9rem;
	line-height: 1.55;
	box-sizing: border-box;
}
.rlv .rlv-teaser .rlv-ico { width: 24px; height: 24px; }
.rlv .rlv-strip__row li.is-on {
	background: radial-gradient(circle at 35% 30%, #ff9fbf, #e0588f 60%, #b83a72);
	box-shadow: 0 2px 4px -1px rgba(160, 30, 80, .45);
}

/* 封ろう（Codex の絵があれば重ねる。無ければ今までのCSSの封ろう） */
.rlv-seal__img {
	position: absolute;
	inset: -14%;
	width: 128%;
	height: 128%;
	object-fit: contain;
	z-index: 1;
	pointer-events: none;
}
.rlv-seal:has(.rlv-seal__img) { background: none; box-shadow: none; }
.rlv-seal:has(.rlv-seal__img) svg { display: none; }

/* ---------- 3. つぎの条件 ---------- */
.rlv .rlv-hint {
	background: #fff;
	border: 0;
	box-shadow: inset 0 0 0 1.5px #efe2f5;
	border-radius: 16px;
}
.rlv .rlv-bar > span {
	background:
		repeating-linear-gradient(-45deg, rgba(255, 255, 255, .35) 0 6px, transparent 6px 12px),
		linear-gradient(90deg, #ff9cc4, #c8a6ff);
}
.rlv .rlv-hint__num a { min-height: 44px; }

/* おしゃべりへの導線 */
.rlv .rlv-chatlink {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 64px;
	padding: 10px 16px;
	border-radius: 20px;
	background: linear-gradient(135deg, #f3edff 0%, #ffeef6 100%);
	box-shadow: inset 0 0 0 1.5px #e3d6fb, 0 10px 22px -18px rgba(120, 80, 190, .6);
	color: var(--rlv-ink);
	text-decoration: none;
	transition: transform .2s cubic-bezier(.34, 1.56, .64, 1);
}
.rlv .rlv-chatlink:hover, .rlv .rlv-chatlink:focus-visible { transform: translateY(-2px); }
.rlv .rlv-chatlink .rlv-ico { width: 40px; height: 40px; }
.rlv-chatlink__txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.rlv-chatlink__txt strong { font-size: .98rem; font-weight: 800; color: #5f4390; }
.rlv-chatlink__txt small { font-size: .78rem; color: var(--rlv-soft); line-height: 1.45; }
.rlv-chatlink__go {
	flex: none;
	width: 32px; height: 32px;
	border-radius: 50%;
	background: #fff;
	box-shadow: inset 0 0 0 1.5px #d9c6f0;
	position: relative;
}
.rlv-chatlink__go::after {
	content: '';
	position: absolute;
	left: 11px; top: 11px;
	width: 8px; height: 8px;
	border-top: 2.5px solid #7a5da0;
	border-right: 2.5px solid #7a5da0;
	transform: rotate(45deg);
}

/* ---------- 4. 手紙箱：インデックスのタブ・はがきのタイル ---------- */
.rlv .rlv-tabs { gap: 4px; padding: 0 2px; border-bottom: 2px solid #f3dbe6; margin-bottom: 14px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.rlv .rlv-tabs::-webkit-scrollbar { display: none; }
.rlv .rlv-tab {
	flex: 1 0 auto;
	min-height: 44px;
	margin-bottom: -2px;
	padding: 0 12px;
	border: 2px solid #f3dbe6;
	border-bottom-color: #f3dbe6;
	border-radius: 14px 14px 0 0;
	background: #fdf5f9;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}
.rlv .rlv-tab.is-on {
	background: #fff;
	color: var(--rlv-rose-ink);
	border-color: #f3dbe6;
	border-bottom-color: #fff;
}
.rlv-tab__n {
	display: inline-grid;
	place-items: center;
	min-width: 22px; height: 22px;
	padding: 0 6px;
	border-radius: 999px;
	background: #f3e3eb;
	color: var(--rlv-soft);
	font-size: .72rem;
	font-weight: 900;
	font-variant-numeric: tabular-nums;
}
.rlv .rlv-tab.is-on .rlv-tab__n { background: linear-gradient(135deg, #ff8fbf, #c99bff); color: #fff; }

.rlv .rlv-tile {
	background: #fff;
	border: 0;
	box-shadow: inset 0 0 0 1.5px #f4e2ea, 0 8px 18px -16px rgba(184, 58, 114, .6);
}
.rlv .rlv-tile.is-unread {
	background:
		linear-gradient(#fff, #fff) padding-box,
		repeating-linear-gradient(-45deg, var(--rlv2-air-a) 0 8px, #fff 8px 13px, var(--rlv2-air-b) 13px 21px, #fff 21px 26px) border-box;
	border: 4px solid transparent;
	box-shadow: 0 10px 20px -14px rgba(184, 58, 114, .6);
	padding: 8px 6px 6px;
}
.rlv .rlv-tile.is-locked { background: #faf7f8; box-shadow: inset 0 0 0 1.5px #ece3e8; border: 0; }
.rlv .rlv-mark--new { top: 10px; right: 10px; }

/* ---------- 読む画面 ---------- */
.rlv-letter .rlv-reply__lead { display: flex; align-items: center; justify-content: center; gap: 6px; }
.rlv-letter .rlv-reply__lead .rlv-ico { width: 30px; height: 30px; }
.rlv-letter .rlv-chip { min-height: 44px; }
.rlv-letter .rlv-close { min-height: 44px; }

/* ---------- スマホ ---------- */
@media (max-width: 430px) {
	.rlv .rlv-hero { padding: 20px 14px 14px; }
	.rlv .rlv-hero__box { width: 46px; height: 46px; right: 6px; bottom: auto; top: 92px; }
	.rlv .rlv-today, .rlv .rlv-hints, .rlv .rlv-box { padding: 18px 12px 12px; }
	.rlv .rlv-ico--v2 { width: 44px; height: 44px; }
	.rlv .rlv-tab { padding: 0 8px; font-size: .8rem; gap: 4px; }
	.rlv-tab__n { min-width: 20px; height: 20px; padding: 0 5px; }
}
@media (max-width: 380px) {
	.rlv .rlv-hero__box { display: none; }
}
@media (min-width: 640px) {
	.rlv .rlv-hero__box { right: 250px; bottom: 10px; }
}

/* ---------- 暗いテーマ ---------- */
@media (prefers-color-scheme: dark) {
	.rlv { --rlv2-desk: #2b2330; }
	.rlv .rlv-today, .rlv .rlv-hints, .rlv .rlv-box { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
	.rlv .rlv-tile, .rlv .rlv-hint, .rlv .rlv-tab.is-on { background: #332a38; }
	.rlv .rlv-tile.is-unread { background: linear-gradient(#332a38, #332a38) padding-box, repeating-linear-gradient(-45deg, var(--rlv2-air-a) 0 8px, #332a38 8px 13px, var(--rlv2-air-b) 13px 21px, #332a38 21px 26px) border-box; }
	.rlv .rlv-tab { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .12); }
	.rlv .rlv-tab.is-on { border-bottom-color: #332a38; }
	.rlv .rlv-tabs { border-bottom-color: rgba(255, 255, 255, .12); }
	.rlv .rlv-chatlink { background: rgba(255, 255, 255, .06); }
	.rlv-chatlink__txt strong { color: #d8c6ff; }
}

@media (prefers-reduced-motion: reduce) {
	.rlv .rlv-chatlink { transition: none; }
}