/**
 * rinka-daily-vote.css — 今日のひとこと投票（フロントページ）専用スタイル
 *
 * ・「次のりんか、どっちが見たい？」型のワンタップ投票カード。今日のりんか直下に置く。
 * ・2026-07-25 点線フレーム＋♡のコンパクトかわいいカード。
 * ・2026-09-27 制作者「ここもあたらしく」→ 今風に全面リスタイル（見た目だけ・クラス/構造/動作は不変）:
 *     - 質問を大きく主役に（見出しは小さなラベルへ）
 *     - 選択肢は大きなカード型ボタン。投票後はそのカードが横長のバーに変形して％を表示
 *     - 投票数と週まとめは小さなチップ、「これまでの結果」は押しやすいボタン（44px）
 *     - 絵文字の飾り（🎀・♡・📊・📅）はやめて線画アイコン（CSS mask の SVG）へ
 * ・撤収時はこのファイルを削除し、inc/daily-vote.php の wp_enqueue_style も外す（1ファイルで撤収完結）。
 * ・詳細度: rinka-home.css の .rinka-homepage:not(.rinka-fansite) .rinka-vote__*（0,3,0）に負けないよう
 *   主要なルールは #rinka-daily-vote から書く。
 */

/* ===== ローカル変数（この機能内だけ。他機能に影響しない） ===== */
#rinka-daily-vote {
	--rv-accent: #f48fb1;          /* 基調ピンク */
	--rv-accent-strong: #e0457f;   /* 強調（自分の選択・％） */
	--rv-ink: #4b2340;             /* 質問の文字 */
	--rv-ink-soft: #7a3b5c;        /* 選択肢の文字 */
	--rv-sub: #a0607f;             /* 補助文字 */
	--rv-line: rgba(232, 150, 190, .38);
	--rv-soft: #fdf1f6;            /* チップ・薄い面 */
	--rv-track: #fbe6ef;           /* 投票後のバー下地 */
	--rv-radius: 18px;

	/* 線画アイコン（Lucide 系・mask で currentColor に染める） */
	--rv-ico-chart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v16a2 2 0 0 0 2 2h16'/%3E%3Cpath d='M18 17V9'/%3E%3Cpath d='M13 17V5'/%3E%3Cpath d='M8 17v-3'/%3E%3C/svg%3E");
	--rv-ico-users: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
	--rv-ico-sparkles: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.94 15.5A2 2 0 0 0 8.5 14.06l-6.14-1.58a.5.5 0 0 1 0-.96L8.5 9.94A2 2 0 0 0 9.94 8.5l1.58-6.14a.5.5 0 0 1 .96 0l1.58 6.14a2 2 0 0 0 1.44 1.44l6.14 1.58a.5.5 0 0 1 0 .96l-6.14 1.58a2 2 0 0 0-1.44 1.44l-1.58 6.14a.5.5 0 0 1-.96 0z'/%3E%3C/svg%3E");
	--rv-ico-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.29 1.51 4.04 3 5.5l7 7Z'/%3E%3C/svg%3E");
	--rv-ico-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
	--rv-ico-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	--rv-ico-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E");

	margin: -6px 0 16px; /* heroの直下に“ひと続き”で置く */
}

/* hidden 属性をクラスの display より必ず優先（結果・お礼・週まとめ・パネル） */
#rinka-daily-vote [hidden] {
	display: none !important;
}

/* アイコン共通（::before / ::after に mask で線画を描く） */
#rinka-daily-vote .rinka-vote__total::before,
#rinka-daily-vote .rinka-vote__week::before,
#rinka-daily-vote .rinka-vote__thanks-text::before,
#rinka-daily-vote .rinka-vote__arch-link::before,
#rinka-daily-vote .rinka-vote__arch-link::after,
#rinka-daily-vote .rinka-vote__arch-more::before,
#rinka-daily-vote .rinka-vote__opt.is-you .rinka-vote__opt-pct::before {
	content: "";
	display: inline-block;
	flex: none;
	width: 14px;
	height: 14px;
	background-color: currentColor;
	-webkit-mask: var(--rv-ico-chart) center / contain no-repeat;
	mask: var(--rv-ico-chart) center / contain no-repeat;
}

/* ===== カード ===== */
#rinka-daily-vote .rinka-vote__card {
	position: relative;
	background:
		radial-gradient(120% 90% at 100% 0%, rgba(255, 214, 232, .55) 0%, rgba(255, 214, 232, 0) 55%),
		#fff;
	border: 1px solid var(--rv-line);
	border-radius: var(--rv-radius);
	box-shadow: 0 1px 2px rgba(122, 59, 92, .05), 0 8px 24px rgba(214, 120, 170, .10);
	padding: clamp(16px, 2.4vw, 22px);
}

/* ===== 見出し（小さなラベル） ===== */
#rinka-daily-vote .rinka-vote__head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 4px;
}

#rinka-daily-vote .rinka-vote__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 9px;
	color: var(--rv-accent-strong);
	background: var(--rv-soft);
	border: 1px solid var(--rv-line);
	flex: none;
}

#rinka-daily-vote .rinka-vote__icon svg,
#rinka-daily-vote .rinka-vote__icon img {
	width: 17px;
	height: 17px;
}

#rinka-daily-vote .rinka-vote__title {
	font-size: 12.5px;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: .08em;
	color: var(--rv-accent-strong);
}

/* ===== 導入文・お題文（質問が主役） ===== */
#rinka-daily-vote .rinka-vote__intro {
	margin: 0 0 6px;
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--rv-sub);
}

#rinka-daily-vote .rinka-vote__q {
	margin: 2px 0 14px;
	font-size: clamp(19px, 2.6vw, 23px);
	font-weight: 800;
	line-height: 1.4;
	letter-spacing: .01em;
	color: var(--rv-ink);
	text-wrap: balance;
}

/* ===== 選択肢（投票前＝大きなカード型ボタン） ===== */
#rinka-daily-vote .rinka-vote__options {
	--rv-cols: 2;
	position: relative;
	display: grid;
	grid-template-columns: repeat(var(--rv-cols), minmax(0, 1fr));
	gap: 10px;
}

#rinka-daily-vote .rinka-vote__options[data-optn="3"] { --rv-cols: 3; }
#rinka-daily-vote .rinka-vote__options[data-optn="1"] { --rv-cols: 1; }

#rinka-daily-vote .rinka-vote__opt {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 0;
	min-height: 84px;
	margin: 0;
	padding: 12px 10px;
	border: 1.5px solid var(--rv-line);
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 1px 0 rgba(232, 150, 190, .25), 0 4px 12px rgba(214, 120, 170, .08);
	color: var(--rv-ink-soft);
	font: inherit;
	line-height: 1.3;
	letter-spacing: normal;
	text-transform: none;
	text-align: center;
	cursor: pointer;
	overflow: hidden;
	isolation: isolate;
	-webkit-tap-highlight-color: transparent;
	transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

#rinka-daily-vote .rinka-vote__options:not(.is-voted) .rinka-vote__opt:hover {
	transform: translateY(-2px);
	border-color: var(--rv-accent);
	background-color: #fff8fb;
	box-shadow: 0 2px 0 rgba(232, 150, 190, .3), 0 10px 22px rgba(214, 120, 170, .18);
}

#rinka-daily-vote .rinka-vote__opt:focus-visible {
	outline: 3px solid #f5b8d3;
	outline-offset: 2px;
}

#rinka-daily-vote .rinka-vote__options:not(.is-voted) .rinka-vote__opt:active {
	transform: scale(.97);
}

/* 顔（絵文字＋ラベル）＝投票前は縦並び */
#rinka-daily-vote .rinka-vote__opt-face {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	min-width: 0;
	max-width: 100%;
}

#rinka-daily-vote .rinka-vote__opt-emoji {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--rv-soft);
	font-size: 21px;
	line-height: 1;
	flex: none;
}

#rinka-daily-vote .rinka-vote__opt-label {
	max-width: 100%;
	font-size: 14px;
	font-weight: 800;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

/* ===== 結果バー（投票前は隠す） ===== */
#rinka-daily-vote .rinka-vote__options:not(.is-voted) .rinka-vote__opt-bar,
#rinka-daily-vote .rinka-vote__options:not(.is-voted) .rinka-vote__opt-pct {
	display: none;
}

/* ===== 投票後＝カードが横長のバーに変形 ===== */
#rinka-daily-vote .rinka-vote__options.is-voted {
	grid-template-columns: minmax(0, 1fr);
	gap: 8px;
}

#rinka-daily-vote .rinka-vote__options.is-voted .rinka-vote__opt {
	flex-direction: row;
	justify-content: space-between;
	gap: 10px;
	min-height: 52px;
	padding: 8px 14px 8px 8px;
	border-radius: 14px;
	background: #fff;
	box-shadow: none;
	text-align: left;
	cursor: default;
	transform: none;
	animation: rv-morph .38s cubic-bezier(.22, 1, .36, 1) both;
}

#rinka-daily-vote .rinka-vote__options.is-voted .rinka-vote__opt-face {
	flex-direction: row;
	gap: 10px;
	flex: 1 1 auto;
}

#rinka-daily-vote .rinka-vote__options.is-voted .rinka-vote__opt-emoji {
	width: 34px;
	height: 34px;
	font-size: 18px;
	background: rgba(255, 255, 255, .8);
}

#rinka-daily-vote .rinka-vote__options.is-voted .rinka-vote__opt-label {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* バー＝ボタンの背面いっぱいに敷く */
#rinka-daily-vote .rinka-vote__opt-bar {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: block;
	border-radius: inherit;
	background: var(--rv-track);
	opacity: .55;
	overflow: hidden;
}

#rinka-daily-vote .rinka-vote__opt-fill {
	display: block;
	height: 100%;
	width: 0;               /* JSが % を代入してアニメーション */
	background: linear-gradient(90deg, #fbd3e4, #f8bcd6);
	transition: width .8s cubic-bezier(.22, 1, .36, 1);
}

#rinka-daily-vote .rinka-vote__options.is-voted .rinka-vote__opt-bar {
	opacity: 1;
	background: #fdf5f9;
}

#rinka-daily-vote .rinka-vote__opt-pct {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	flex: none;
	font-size: 17px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	color: var(--rv-ink-soft);
	animation: rv-fade .35s ease .15s both;
}

/* 自分が選んだ選択肢 */
#rinka-daily-vote .rinka-vote__opt.is-you {
	border-color: var(--rv-accent-strong);
	box-shadow: 0 0 0 3px rgba(224, 69, 127, .12);
}

#rinka-daily-vote .rinka-vote__opt.is-you .rinka-vote__opt-fill {
	background: linear-gradient(90deg, #f9b3cf, #f48fb1);
}

#rinka-daily-vote .rinka-vote__opt.is-you .rinka-vote__opt-pct {
	color: var(--rv-accent-strong);
}

/* ％の前に小さなチェック（＝きみの一票） */
#rinka-daily-vote .rinka-vote__opt.is-you .rinka-vote__opt-pct::before {
	width: 16px;
	height: 16px;
	-webkit-mask-image: var(--rv-ico-check);
	mask-image: var(--rv-ico-check);
}

@keyframes rv-morph {
	from { opacity: .4; transform: scale(.98); }
	to   { opacity: 1;  transform: none; }
}
@keyframes rv-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* ===== 結果まとめ（小さなチップ：投票数・週まとめ） ===== */
#rinka-daily-vote .rinka-vote__result {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 12px 0 0;
}

#rinka-daily-vote .rinka-vote__total,
#rinka-daily-vote .rinka-vote__week {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	max-width: 100%;
	min-height: 28px;
	padding: 4px 11px 4px 9px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--rv-sub);
	background: var(--rv-soft);
	border: 1px solid rgba(232, 150, 190, .28);
}

#rinka-daily-vote .rinka-vote__total:empty { display: none; }

#rinka-daily-vote .rinka-vote__total::before {
	-webkit-mask-image: var(--rv-ico-users);
	mask-image: var(--rv-ico-users);
}

#rinka-daily-vote .rinka-vote__week {
	color: var(--rv-ink-soft);
}

#rinka-daily-vote .rinka-vote__week::before {
	color: var(--rv-accent-strong);
	-webkit-mask-image: var(--rv-ico-sparkles);
	mask-image: var(--rv-ico-sparkles);
}

/* ===== お礼＋「これまでの結果」ボタン ===== */
#rinka-daily-vote .rinka-vote__thanks {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 12px;
	margin: 12px 0 0;
	padding-top: 12px;
	border-top: 1px solid rgba(232, 150, 190, .25);
	font-size: 13px;
	font-weight: 700;
	color: var(--rv-accent-strong);
}

#rinka-daily-vote .rinka-vote__thanks-text {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
}

#rinka-daily-vote .rinka-vote__thanks-text::before {
	-webkit-mask-image: var(--rv-ico-heart);
	mask-image: var(--rv-ico-heart);
}

#rinka-daily-vote .rinka-vote__arch-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	margin: 0 0 0 auto;
	padding: 0 14px 0 16px;
	border: 1.5px solid var(--rv-line);
	border-radius: 999px;
	background: #fff;
	color: var(--rv-accent-strong);
	font: inherit;
	font-size: 13px;
	font-weight: 800;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: background-color .15s ease, border-color .15s ease;
}

#rinka-daily-vote .rinka-vote__arch-link::after {
	width: 13px;
	height: 13px;
	-webkit-mask-image: var(--rv-ico-chevron);
	mask-image: var(--rv-ico-chevron);
	transition: transform .2s ease;
}

#rinka-daily-vote .rinka-vote__arch-link[aria-expanded="true"]::after {
	transform: rotate(180deg);
}

#rinka-daily-vote .rinka-vote__arch-link:hover {
	background: var(--rv-soft);
	border-color: var(--rv-accent);
}

#rinka-daily-vote .rinka-vote__arch-link:focus-visible,
#rinka-daily-vote .rinka-vote__arch-more:focus-visible {
	outline: 3px solid #f5b8d3;
	outline-offset: 2px;
}

/* ===== 過去の集計パネル ===== */
#rinka-daily-vote .rinka-vote__arch {
	position: relative;
	margin-top: 10px;
	max-height: 260px;
	overflow-y: auto;
	font-size: 12px;
	line-height: 1.55;
	color: var(--rv-sub);
	background: #fffafc;
	border: 1px solid rgba(232, 150, 190, .25);
	border-radius: 14px;
	padding: 4px 12px;
}

#rinka-daily-vote .rinka-vote__arch-row {
	padding: 8px 0;
	border-bottom: 1px solid rgba(232, 150, 190, .18);
}

#rinka-daily-vote .rinka-vote__arch-row:last-of-type {
	border-bottom: 0;
}

#rinka-daily-vote .rinka-vote__arch-date {
	display: inline-block;
	min-width: 38px;
	margin-right: 6px;
	padding: 1px 7px;
	border-radius: 999px;
	background: var(--rv-soft);
	font-size: 11px;
	font-weight: 800;
	text-align: center;
	color: var(--rv-accent-strong);
}

#rinka-daily-vote .rinka-vote__arch-q {
	color: var(--rv-ink);
	font-weight: 700;
	margin-right: 6px;
}

#rinka-daily-vote .rinka-vote__arch-r {
	display: block;
	margin-top: 2px;
	font-variant-numeric: tabular-nums;
}

#rinka-daily-vote .rinka-vote__arch-more {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	min-height: 44px;
	margin: 4px 0;
	padding: 0 12px;
	background: none;
	border: 0;
	border-top: 1px dashed rgba(232, 150, 190, .35);
	font: inherit;
	font-size: 12.5px;
	font-weight: 800;
	color: var(--rv-accent-strong);
	cursor: pointer;
}

#rinka-daily-vote .rinka-vote__arch-more::before {
	-webkit-mask-image: var(--rv-ico-calendar);
	mask-image: var(--rv-ico-calendar);
}

#rinka-daily-vote .rinka-vote__arch-more:hover {
	background: var(--rv-soft);
}

#rinka-daily-vote .rinka-vote__arch-older {
	margin-top: 2px;
}

/* ===== モバイル ===== */
@media (max-width: 480px) {
	#rinka-daily-vote .rinka-vote__card {
		padding: 16px 14px;
	}
	#rinka-daily-vote .rinka-vote__options {
		gap: 8px;
	}
	#rinka-daily-vote .rinka-vote__opt {
		min-height: 80px;
		padding: 10px 6px;
		border-radius: 14px;
	}
	#rinka-daily-vote .rinka-vote__opt-emoji {
		width: 36px;
		height: 36px;
		font-size: 19px;
	}
	#rinka-daily-vote .rinka-vote__options[data-optn="3"] .rinka-vote__opt-label {
		font-size: 13px;
	}
	#rinka-daily-vote .rinka-vote__options.is-voted .rinka-vote__opt {
		min-height: 50px;
		padding: 7px 12px 7px 7px;
	}
	#rinka-daily-vote .rinka-vote__arch-link {
		margin-left: 0;
	}
}

/* ===== 動きを控えめにする設定を尊重 ===== */
@media (prefers-reduced-motion: reduce) {
	#rinka-daily-vote .rinka-vote__opt,
	#rinka-daily-vote .rinka-vote__opt-fill,
	#rinka-daily-vote .rinka-vote__opt-pct,
	#rinka-daily-vote .rinka-vote__arch-link::after {
		transition: none;
		animation: none;
	}
}

/* 今日のお題：選択肢ごとの人数（％の横に小さく・2026-09-28） */
#rinka-daily-vote .rinka-vote__opt-n { margin-left: 4px; font-size: .68em; font-weight: 700; opacity: .7; letter-spacing: 0; }