/* ============================================================
 * rinka-sidebar-2026.css — サイドバーの小窓をトップの新しいデザインにそろえる（2026-09-28・追加のみ）
 *
 * ・読み込みは inc/rinka-world-2026.php（body.rw26 のページだけ・rinka-world-2026.css のあと）。
 * ・見た目だけ。見出し（h3）の文字・リンク・並び順は変えない。本文や見出しを隠さない。
 * ・トップの「りんかとあそぶ」タイルと同じ：白〜淡いピンクの角丸カード・下に濃い影の線・
 *   見出しは丸枠の中に Codex の絵（sidebar.php の .rinka-side-h__ico・img は alt="" / aria-hidden）。
 * ・押す所は 44px 以上（続きを読む・感想を書く・Xでもっと見る・できること ぜんぶ見る・SNSの丸）。
 * ・PC で右下の「りんかの最新ポスト」小窓が人気の記事にかぶる → サイドバーに同じXの小窓がある時は出さない。
 * ・記事ページは暗い設定の端末でも白いカードのまま（サイト本体に暗い見た目が無い）なので、
 *   文字色・背景色はすべて明示してある（どちらの設定でも同じ見た目＝読める）。
 * 撤収: このファイルを消すだけ。
 * ========================================================== */

body.rw26 #sidebar {
	--s26-accent: #d9538f;
	--s26-ink: #4a3540;
	--s26-soft: #fff0f6;
	--s26-soft2: #ffe0ee;
	--s26-line: #f6d3e3;
	--s26-shadow: rgba(214, 110, 160, .35);
	--s26-sub: #76606c;
	--s26-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d9538f' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
}

/* ---- 小窓：角丸カード＋下の影の線 ---- */
body.rw26 #sidebar .widget.rinka-widget:not(.rinka-widget--dice) {
	background: linear-gradient(165deg, #fff 60%, var(--s26-soft));
	border: 1.5px solid var(--s26-line);
	border-radius: 22px;
	box-shadow: 0 3px 0 var(--s26-line), 0 12px 26px -18px var(--s26-shadow);
	padding: 16px 16px 18px;
	color: var(--s26-ink);
}
body.rw26 #sidebar .widget.rinka-widget--popular {
	background:
		radial-gradient(ellipse 90% 55% at 85% 0%, rgba(255, 224, 170, .35), transparent 60%),
		linear-gradient(165deg, #fff 60%, var(--s26-soft));
}

/* ---- 見出し：灰色の帯をやめて、丸枠の絵＋太字 ---- */
body.rw26 #sidebar .widget.rinka-widget > h3 {
	display: flex; align-items: center; gap: 10px;
	margin: 0 0 14px; padding: 0 0 12px;
	background: none; border: 0; border-bottom: 1.5px dashed var(--s26-line); border-radius: 0;
	box-shadow: none;
	font-size: 1.02rem; font-weight: 900; line-height: 1.35; letter-spacing: .02em;
	color: var(--s26-ink);
	text-align: left;
}
body.rw26 #sidebar .widget.rinka-widget > h3::before,
body.rw26 #sidebar .widget.rinka-widget > h3::after { content: none; display: none; }
body.rw26 #sidebar .rinka-side-h__ico {
	flex: none; display: grid; place-items: center;
	width: 40px; height: 40px; border-radius: 50%;
	background: linear-gradient(145deg, var(--s26-soft), var(--s26-soft2));
	box-shadow: inset 0 -3px 0 rgba(255, 255, 255, .6), 0 0 0 3px #fff, 0 4px 10px -4px var(--s26-shadow);
}
body.rw26 #sidebar .rinka-side-h__ico img {
	display: block; width: 28px; height: 28px; margin: 0; object-fit: contain;
	vertical-align: middle;
}
body.rw26 #sidebar .widget.rinka-widget > h3 > span:not(.rinka-side-h__ico) { min-width: 0; }

/* ---- 人気の記事：1位の 👑（絵文字）→ Codex の王冠の絵 ---- */
body.rw26 #sidebar .ranked li:first-child::before {
	content: "";
	width: 24px; height: 24px; top: -12px; left: -6px;
	background: url("../img/find/crown.webp") center / contain no-repeat;
	font-size: 0;
}
body.rw26 #sidebar .ranked li { min-height: 44px; }
body.rw26 #sidebar .ranked li:first-child {
	background: linear-gradient(120deg, #fff7e0, #fff);
	border: 1.5px solid #f6e3ae;
	box-shadow: 0 3px 0 #f6e3ae;
}
body.rw26 #sidebar .ranked a { color: var(--s26-ink); }
body.rw26 #sidebar .ranked a:hover { color: #b83a72; }

/* ---- プロフィール：SNS の丸は 44px・支援ボタンも 44px ---- */
body.rw26 #sidebar .rinka-profile-box .sns-row { flex-wrap: wrap; }
body.rw26 #sidebar .rinka-profile-box .sns-row a {
	width: 44px; height: 44px;
	background: linear-gradient(145deg, #fff, var(--s26-soft));
	border: 1.5px solid var(--s26-line);
	box-shadow: 0 2px 0 var(--s26-line);
	color: var(--s26-ink);
}
body.rw26 #sidebar .rinka-profile-box .sns-row a img { width: 26px; height: 26px; margin: 0; }
body.rw26 #sidebar .rinka-profile-box .rinka-support-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	min-height: 44px; box-sizing: border-box;
}
body.rw26 #sidebar .rinka-profile-box .rinka-support-btn img { width: 22px; height: 22px; margin: 0; }

/* ---- タグ・カテゴリーのチップ（/tags/ と同じピンクの丸いチップ・44px） ---- */
body.rw26 #sidebar .chips.chips--left { display: flex; flex-wrap: wrap; gap: 8px; }
body.rw26 #sidebar .chips .chip {
	display: inline-flex; align-items: center; gap: 6px;
	min-height: 44px; box-sizing: border-box;
	padding: 6px 14px; margin: 0;
	border-radius: 999px;
	background: #fff; border: 1.5px solid var(--s26-line);
	color: var(--s26-ink); font-size: .82rem; font-weight: 800; line-height: 1.3;
	box-shadow: 0 2px 0 var(--s26-line);
	text-decoration: none;
}
body.rw26 #sidebar .chips .chip:hover { border-color: var(--s26-accent); color: #b83a72; background: #fff; }
body.rw26 #sidebar .chips .chip:focus-visible { outline: 3px solid #8fc3ff; outline-offset: 2px; }
body.rw26 #sidebar .rinka-tagcloud__n {
	display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 99px;
	background: var(--s26-soft); color: #b83a72; opacity: 1;
	font-size: .68rem; font-weight: 900; font-variant-numeric: tabular-nums;
}

/* ---- X の小窓・フォローの小窓 ---- */
body.rw26 #sidebar .rinka-x-feed__more,
body.rw26 #sidebar .rinka-world-more {
	display: flex; align-items: center; justify-content: center; gap: 6px;
	min-height: 44px; box-sizing: border-box;
	margin: 12px 0 0; padding: 8px 16px;
	border-radius: 999px;
	background: linear-gradient(145deg, #fff, var(--s26-soft));
	border: 1.5px solid var(--s26-line);
	box-shadow: 0 3px 0 var(--s26-line);
	color: #b83a72; font-size: .86rem; font-weight: 800; line-height: 1.3;
	text-decoration: none; text-align: center;
}
@media (hover: hover) {
	body.rw26 #sidebar :is(.rinka-x-feed__more, .rinka-world-more, .rinka-voices__toggle):hover {
		transform: translateY(-2px); text-decoration: none;
		box-shadow: 0 5px 0 var(--s26-line), 0 12px 20px -14px var(--s26-shadow);
	}
}
body.rw26 #sidebar :is(.rinka-x-feed__more, .rinka-world-more, .rinka-voices__toggle, .rinka-voices__more, .rinka-voices__pastbtn):focus-visible {
	outline: 3px solid #8fc3ff; outline-offset: 2px;
}
body.rw26 #sidebar .rinka-follow-btns a { min-height: 44px; box-sizing: border-box; }

/* ---- 感想：押す所を 44px に（文字の大きさ・中身はそのまま） ---- */
body.rw26 #sidebar .rinka-voices__compose { text-align: center; }
body.rw26 #sidebar .rinka-voices__toggle {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	min-height: 44px; box-sizing: border-box;
	padding: 6px 18px 6px 8px;
	border-radius: 999px;
	background: linear-gradient(145deg, #fff, var(--s26-soft));
	border: 1.5px solid var(--s26-line);
	box-shadow: 0 3px 0 var(--s26-line);
	color: #b83a72; opacity: 1;
	font-size: .86rem; font-weight: 800; line-height: 1.2;
}
body.rw26 #sidebar .rinka-voices__toggle:not(:has(.rinka-voices__toggle-ico)) { padding-left: 18px; }
body.rw26 #sidebar .rinka-voices__toggle-ico {
	display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
	background: #fff; box-shadow: 0 0 0 2px var(--s26-soft2);
}
body.rw26 #sidebar .rinka-voices__toggle-ico img { width: 22px; height: 22px; margin: 0; display: block; }
body.rw26 #sidebar .rinka-voices__more,
body.rw26 #sidebar .rinka-voices__pastbtn {
	display: inline-flex; align-items: center;
	min-height: 44px; box-sizing: border-box;
	margin: 0; padding: 4px 10px;
	border-radius: 999px;
	color: #b83a72; opacity: 1; font-weight: 800;
}
body.rw26 #sidebar .rinka-voices__more[hidden] { display: none; }
body.rw26 #sidebar .rinka-voices__more:hover,
body.rw26 #sidebar .rinka-voices__pastbtn:hover { background: var(--s26-soft); text-decoration: none; }
body.rw26 #sidebar .rinka-voices__send { min-height: 44px; }

/* ---- 検索：入れる所とボタンも 44px ---- */
body.rw26 #sidebar .rinka-widget--search :is(input[type="search"], input[type="text"], .search-edit) { min-height: 44px; box-sizing: border-box; }

/* ---- りんかワールドのタイル（すでに Codex の絵）：角丸・影の線をそろえる ---- */
body.rw26 #sidebar .rinka-world-tile { min-height: 44px; }

/* ---- PC：右下の「りんかの最新ポスト」小窓が人気の記事にかぶる（B-11）----
 *  サイドバーが本文の横に出る幅で、サイドバーに同じ X の小窓（X の最新ツイート）がある時だけ、
 *  浮いている方としまうボタンを出さない（同じポストはサイドバーで見られる・リンクは減らない）。 */
@media (min-width: 1024px) {
	body.rw26:has(#sidebar .rinka-widget--x) .rinka-fs-xwidget,
	body.rw26:has(#sidebar .rinka-widget--x) .rinka-fs-xwidget-open {
		display: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.rw26 #sidebar :is(.rinka-x-feed__more, .rinka-world-more, .rinka-voices__toggle) { transition: none; transform: none !important; }
}