/*
 * Rinka — ガイド・カテゴリページの見やすさ（2026-10-22・assets/js/prompt-guide-ui.js と対）
 * 拡大表示 / スマホの下固定バー / 折りたたみ目次 / カテゴリページの作例ギャラリー
 * アクセント色はサイトのピンク（#e86a9a）1つ。
 */
.is-zoomable { cursor: zoom-in; }
.is-zoomable:focus-visible { outline: 3px solid #e86a9a; outline-offset: 3px; }

/* 拡大表示 */
.rinka-pg-lb {
	position: fixed; inset: 0; z-index: 100000;
	display: flex; align-items: center; justify-content: center;
	background: rgba(20, 12, 18, 0.92);
	padding: 48px 8px 24px;
}
.rinka-pg-lb[hidden] { display: none; }
.rinka-pg-lb__fig { margin: 0; max-width: min(1000px, 100%); max-height: 100%; display: flex; flex-direction: column; align-items: center; }
.rinka-pg-lb__img { max-width: 100%; max-height: calc(100vh - 120px); width: auto; height: auto; border-radius: 10px; background: #222; }
.rinka-pg-lb__cap { margin-top: 10px; color: #fbe9f1; font-size: 14px; text-align: center; line-height: 1.6; }
.rinka-pg-lb__btn {
	position: absolute; border: 0; cursor: pointer;
	width: 48px; height: 48px; border-radius: 50%;
	background: rgba(255, 255, 255, 0.16); color: #fff;
	font-size: 30px; line-height: 48px; text-align: center;
}
.rinka-pg-lb__btn:hover, .rinka-pg-lb__btn:focus-visible { background: #e86a9a; outline: none; }
.rinka-pg-lb__close { top: 8px; right: 8px; font-size: 26px; }
.rinka-pg-lb__prev { left: 8px; top: 50%; transform: translateY(-50%); }
.rinka-pg-lb__next { right: 8px; top: 50%; transform: translateY(-50%); }
.rinka-pg-lb__btn[hidden] { display: none; }
html.rinka-pg-lb-open { overflow: hidden; }

/* スマホの下固定バー（親指で届く位置） */
.rinka-pg-bar {
	position: fixed; z-index: 9990; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
	display: flex; gap: 8px;
}
.rinka-pg-bar[hidden] { display: none; }
.rinka-pg-bar__btn {
	min-width: 56px; min-height: 44px; padding: 0 14px;
	border: 1px solid #f3c6d8; border-radius: 999px; cursor: pointer;
	background: #fff; color: #c2457a; font-size: 15px; font-weight: 700;
	box-shadow: 0 4px 14px rgba(194, 69, 122, 0.18);
}
.rinka-pg-bar__btn:hover, .rinka-pg-bar__btn:focus-visible { background: #e86a9a; color: #fff; outline: none; }
@media (min-width: 1025px) { .rinka-pg-bar { right: 20px; bottom: 20px; } }

/* 折りたたみ目次（スマホ・5項目以上の時） */
.rinka-pg-toc.is-folded ol li:nth-child(n+5) { display: none; }
.rinka-pg-toc__toggle {
	display: block; width: 100%; margin-top: 8px; min-height: 44px;
	border: 1px dashed #f3c6d8; border-radius: 10px; background: #fff;
	color: #c2457a; font-size: 15px; font-weight: 700; cursor: pointer;
}
.rinka-pg-toc__toggle:focus-visible { outline: 3px solid #e86a9a; outline-offset: 2px; }

/* カテゴリページ（/prompt-library/type/…/）の作例ギャラリー */
.rinka-ctr-gal { margin: 14px 0 6px; }
.rinka-ctr-gal__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 720px) { .rinka-ctr-gal__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } }
.rinka-ctr-gal__item { margin: 0; }
.rinka-ctr-gal__img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 12px; background: #f6eef2; }
.rinka-ctr-gal__cap { margin-top: 4px; font-size: 13px; text-align: center; color: #6b5a63; }
.rinka-ctr-gal__note { margin-top: 6px; font-size: 12px; color: #9b8a93; }

/* スマホの文字と押しやすさ */
@media (max-width: 640px) {
	.rinka-pg-p, .rinka-pg-ul li, .rinka-pg-steps li { font-size: 16px; }
	.rinka-pg-code__copy { min-height: 44px; min-width: 72px; font-size: 15px; }
	.rinka-pg-tags__scroll, .rinka-ap-guide-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

@media (prefers-reduced-motion: reduce) {
	.rinka-pg-bar__btn, .rinka-pg-lb__btn { transition: none; }
}