/* ============================================================
 * rinka-memories.css — 思い出アルバム（/memories/）2026-09-26 作り直し
 * 描画: assets/js/rinka-memories.js（.rwm-*）。旧スタイル（fansite.css の .rinka-fs-album* / .rinka-fs-mem*）とは別名。
 * まとめ → 写真アルバム風カレンダー → 月ごとの折りたたみ一覧。押せる所は 44px 以上。
 * スマホ縦持ち最優先・横持ち／PC でも崩れない。prefers-reduced-motion で動きを止める。
 * ========================================================== */

.rwm {
	--rwm-ink: #4a3540;
	--rwm-sub: #76606c;
	--rwm-rose: #d9487f;
	--rwm-rose-ink: #b83a72;
	--rwm-pink: #ff8fbf;
	--rwm-line: #f4d9e6;
	--rwm-soft: #fff5f9;
	max-width: 760px;
	margin: 6px auto 30px;
	color: var(--rwm-ink);
	font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
	-webkit-tap-highlight-color: transparent;
	display: grid; gap: 16px;
}
.rwm *, .rwm *::before, .rwm *::after { box-sizing: border-box; }
.rwm p { margin: 0; }
.rwm [hidden] { display: none !important; }
.rwm > *, .rwm-list, .rwm-list__body, .rwm-flat { min-width: 0; } /* 横スクロールのチップ列で幅が広がらないように */
.rwm-chips { max-width: 100%; }
.rwm-ico { width: 28px; height: 28px; flex: none; object-fit: contain; vertical-align: middle; }
.rwm-svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.rwm button:focus-visible, .rwm summary:focus-visible, .rwm input:focus-visible { outline: 3px solid #9b7bff; outline-offset: 2px; }

/* ---------- まとめ ---------- */
.rwm-sum {
	padding: 16px;
	border-radius: 28px;
	background: linear-gradient(165deg, #fff 0%, #fff5fa 55%, #f4efff 100%);
	border: 1px solid var(--rwm-line);
	box-shadow: 0 12px 30px -12px rgba(184, 58, 114, .25);
	display: grid; gap: 14px;
}
.rwm-sum__say { display: flex; align-items: flex-end; gap: 10px; }
.rwm-sum__face { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; border: 3px solid #fff; box-shadow: 0 4px 12px rgba(184, 58, 114, .2); }
.rwm-sum__msg {
	flex: 1; min-width: 0; padding: 12px 14px;
	border-radius: 18px 18px 18px 6px; background: #fff; border: 2px solid #fbd9e7;
	font-weight: 700; line-height: 1.7; font-size: .96rem;
}
.rwm-stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.rwm-stats li {
	margin: 0; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center;
	padding: 10px 12px; border-radius: 16px; background: #fff; border: 1px solid #f6dde8;
}
.rwm-stats li::before { display: none !important; }
.rwm-stats li > .rwm-ico, .rwm-stats__svg { grid-row: 1 / 3; width: 34px; height: 34px; display: grid; place-items: center; }
.rwm-stats__svg .rwm-svg { width: 26px; height: 26px; }
.rwm-stats__svg.is-fav { color: var(--rwm-rose); }
.rwm-stats__svg.is-fav .rwm-svg { fill: #ffd0e2; }
.rwm-stats__svg.is-pin { color: #8a6ad6; }
.rwm-stats__svg.is-pin .rwm-svg { fill: #e6dcff; }
.rwm-stats b { font-size: 1.35rem; font-weight: 900; color: var(--rwm-rose-ink); line-height: 1.1; font-variant-numeric: tabular-nums; }
.rwm-stats b small { font-size: .78rem; margin-left: 2px; }
.rwm-stats li > span:last-child { font-size: .74rem; font-weight: 700; color: var(--rwm-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rwm-sum__span { font-size: .82rem; color: var(--rwm-sub); font-weight: 700; text-align: center; }
.rwm-goal__top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: .84rem; font-weight: 800; color: var(--rwm-sub); }
.rwm-goal__top b { color: var(--rwm-rose-ink); }
.rwm-goal__bar { margin-top: 6px; height: 12px; border-radius: 999px; background: #f7e6ee; overflow: hidden; }
.rwm-goal__bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ff9cc4, #c9b3ff); }
.rwm-warn { padding: 10px 12px; border-radius: 14px; background: #fff7e3; border: 1px dashed #f0c56a; color: #7a5a1c; font-size: .84rem; line-height: 1.6; }

/* ---------- カレンダー（写真アルバム風） ---------- */
.rwm-cal {
	padding: 14px 12px 16px;
	border-radius: 28px;
	background: #fffdf8;
	border: 1px solid #f1e3cf;
	box-shadow: 0 10px 26px -14px rgba(150, 110, 60, .35), inset 0 0 0 6px #fff;
	position: relative;
}
.rwm-cal::before {
	content: ''; position: absolute; left: 50%; top: -9px; translate: -50% 0;
	width: 90px; height: 20px; border-radius: 4px; background: rgba(255, 190, 215, .7);
	transform: rotate(-2deg); box-shadow: 0 2px 4px rgba(0, 0, 0, .05);
}
.rwm-cal__head { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 6px; margin-bottom: 10px; }
.rwm-cal__nav {
	width: 44px; height: 44px; border-radius: 50%;
	border: 2px solid #f6c1d7; background: #fff; color: var(--rwm-rose-ink);
	font: 900 1.5rem/1 sans-serif; cursor: pointer; display: grid; place-items: center;
	box-shadow: 0 3px 0 #f6dbe7;
}
.rwm-cal__nav:disabled { opacity: .35; cursor: default; box-shadow: none; }
.rwm-cal__title { display: grid; justify-items: center; line-height: 1.3; }
.rwm-cal__title b { font-size: 1.12rem; font-weight: 900; }
.rwm-cal__title small { font-size: .74rem; color: var(--rwm-sub); font-weight: 700; }
.rwm-cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.rwm-cal__wk { text-align: center; font-size: .72rem; font-weight: 800; color: var(--rwm-sub); padding-bottom: 2px; }
.rwm-cal__wk.is-sun { color: #d9487f; }
.rwm-cal__wk.is-sat { color: #5a7fd0; }
.rwm-cal__cell {
	position: relative; aspect-ratio: 1 / 1; min-height: 44px;
	border-radius: 12px; border: 0; padding: 0;
	background: #faf5f0; color: #b7a3ad;
	display: grid; place-items: center;
	font: inherit;
}
.rwm-cal__cell.is-empty { background: transparent; }
.rwm-cal__num { position: absolute; left: 5px; top: 3px; font-size: .68rem; font-weight: 800; line-height: 1; }
.rwm-cal__cell.has-mem {
	background: #fff; color: var(--rwm-ink); cursor: pointer;
	box-shadow: 0 2px 6px rgba(184, 58, 114, .15);
	border: 2px solid #fff;
	transition: transform .15s ease;
}
.rwm-cal__cell.has-mem:active { transform: scale(.94); }
.rwm-cal__ico { width: 62%; height: 62%; object-fit: contain; margin-top: 6px; }
.rwm-cal__n {
	position: absolute; right: 2px; bottom: 2px; min-width: 16px; height: 16px; padding: 0 4px;
	border-radius: 999px; background: var(--rwm-rose); color: #fff; font-size: .62rem; font-weight: 800; line-height: 16px; text-align: center;
}
.rwm-cal__cell.is-sel { border-color: var(--rwm-pink); background: #fff0f6; box-shadow: 0 4px 12px -2px rgba(217, 72, 127, .45); }
.rwm-cal__cell.is-today { outline: 2px dashed #c9b3ff; outline-offset: -2px; }

.rwm-day { margin-top: 14px; }
.rwm-day__h { display: flex; justify-content: center; align-items: center; gap: 8px; font-weight: 900; font-size: .96rem; margin-bottom: 12px !important; }
.rwm-day__h small { min-width: 26px; padding: 1px 8px; border-radius: 999px; background: #ffe6ef; color: var(--rwm-rose-ink); font-size: .78rem; text-align: center; }
.rwm-day .rwm-more { margin-top: 14px; }
.rwm-pola-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.rwm-pola {
	display: grid; gap: 8px; padding: 10px 10px 8px;
	background: #fff; border-radius: 6px;
	box-shadow: 0 8px 18px -8px rgba(90, 58, 70, .35);
	transform: rotate(-1.2deg);
}
.rwm-pola:nth-child(2n) { transform: rotate(1.4deg); }
.rwm-pola.is-pinned { box-shadow: 0 8px 18px -8px rgba(90, 58, 70, .35), 0 0 0 3px #e6dcff; }
.rwm-pola__pic { position: relative; aspect-ratio: 1 / 1; border-radius: 4px; background: linear-gradient(160deg, #ffe7f0, #efe7ff); display: grid; place-items: center; }
.rwm-pola__ico { width: 62%; height: 62%; object-fit: contain; }
.rwm-pola__pic .rwm-tag { position: absolute; left: 6px; bottom: 6px; }
.rwm-pola__text { font-size: .86rem; font-weight: 700; line-height: 1.55; overflow-wrap: anywhere; }
.rwm-pola .rwm-acts { justify-content: space-between; }

/* ---------- 一覧 ---------- */
.rwm-list { padding: 14px 10px 14px; border-radius: 28px; background: #fff; border: 1px solid var(--rwm-line); }
.rwm-list__h { display: flex; align-items: center; gap: 8px; font-weight: 900; font-size: 1.04rem; margin-bottom: 10px !important; }
.rwm-list__h .rwm-ico { width: 32px; height: 32px; }
.rwm-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 999px; background: #f8eef3; }
.rwm-tab {
	min-height: 44px; border: 0; border-radius: 999px; background: transparent;
	font: inherit; font-weight: 800; font-size: .86rem; color: var(--rwm-sub); cursor: pointer; padding: 0 4px;
	white-space: nowrap;
}
.rwm-tab.is-on { background: #fff; color: var(--rwm-rose-ink); box-shadow: 0 2px 8px rgba(184, 58, 114, .18); }
.rwm-search {
	display: flex; align-items: center; gap: 8px; margin: 10px 0 12px;
	min-height: 46px; padding: 0 14px; border-radius: 999px; border: 2px solid #f3dbe6; background: var(--rwm-soft); color: var(--rwm-sub);
}
.rwm-search__q { flex: 1; min-width: 0; min-height: 42px; border: 0 !important; background: transparent !important; box-shadow: none !important; font: inherit; font-size: 16px; color: var(--rwm-ink); padding: 0 !important; outline: none; }

.rwm-months { display: grid; gap: 10px; }
.rwm-month { border-radius: 20px; background: var(--rwm-soft); border: 1px solid #f6dde8; overflow: hidden; }
.rwm-month__sum {
	list-style: none; display: flex; align-items: center; gap: 8px;
	min-height: 54px; padding: 8px 14px; cursor: pointer;
	font-weight: 900;
}
.rwm-month__sum::-webkit-details-marker { display: none; }
.rwm-month__t { white-space: nowrap; }
.rwm-strip { display: flex; margin-left: 4px; min-width: 0; overflow: hidden; }
.rwm-strip__ico { width: 24px; height: 24px; margin-right: -4px; flex: none; }
.rwm-month__n { margin-left: auto; min-width: 30px; padding: 2px 8px; border-radius: 999px; background: #fff; color: var(--rwm-rose-ink); font-size: .82rem; text-align: center; }
.rwm-month__chev { width: 10px; height: 10px; border-right: 2.5px solid var(--rwm-rose-ink); border-bottom: 2.5px solid var(--rwm-rose-ink); transform: rotate(45deg); translate: 0 -3px; transition: transform .2s ease; flex: none; }
.rwm-month[open] .rwm-month__chev { transform: rotate(225deg); translate: 0 2px; }
.rwm-month__body { padding: 0 6px 8px; display: grid; gap: 8px; }
.rwm-flat { display: grid; gap: 8px; }

.rwm-row {
	display: grid; grid-template-columns: 44px 1fr; gap: 4px 8px; align-items: center;
	padding: 8px; border-radius: 16px; background: #fff; border: 1px solid #f6e3ec;
}
.rwm-row.is-pinned { border-color: #d8ccff; background: #fbf9ff; }
.rwm-row__ico { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(160deg, #ffeef5, #f3eeff); display: grid; place-items: center; }
.rwm-row__ico .rwm-ico { width: 34px; height: 34px; }
.rwm-row__body { min-width: 0; }
.rwm-row__text { font-weight: 700; font-size: .92rem; line-height: 1.55; overflow-wrap: anywhere; }
.rwm-row__meta { margin-top: 3px !important; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: .74rem; color: var(--rwm-sub); font-weight: 700; }
.rwm-row { grid-template-columns: 44px 1fr auto; }
.rwm-row .rwm-acts { gap: 4px; }
.rwm-row__meta time { white-space: nowrap; }
.rwm-tag { display: inline-block; padding: 1px 8px; border-radius: 999px; background: #ffe6ef; color: var(--rwm-rose-ink); font-size: .7rem; font-weight: 800; white-space: nowrap; }
.rwm-acts { display: flex; gap: 6px; }
.rwm-act {
	width: 44px; height: 44px; border-radius: 50%; border: 2px solid #f3dbe6; background: #fff; color: #b9a1ad;
	display: grid; place-items: center; cursor: pointer; padding: 0;
}
.rwm-act--fav.is-on { color: var(--rwm-rose); border-color: #ffc2da; background: #fff0f6; }
.rwm-act--fav.is-on .rwm-svg { fill: var(--rwm-rose); }
.rwm-act--pin.is-on { color: #7b5ad6; border-color: #d8ccff; background: #f5f1ff; }
.rwm-act--pin.is-on .rwm-svg { fill: #b9a3ff; }
.rwm-more {
	width: 100%; min-height: 46px; border-radius: 999px; border: 2px dashed #f3c6d9; background: #fff;
	font: inherit; font-weight: 800; color: var(--rwm-rose-ink); cursor: pointer;
}

.rwm-chips { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 10px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.rwm-chip {
	flex: none; display: inline-flex; align-items: center; gap: 6px;
	min-height: 44px; padding: 0 12px 0 8px; border-radius: 999px;
	border: 2px solid #f3dbe6; background: #fff; font: inherit; font-weight: 800; font-size: .84rem; color: var(--rwm-ink); cursor: pointer; white-space: nowrap;
}
.rwm-chip .rwm-ico { width: 26px; height: 26px; }
.rwm-chip b { font-size: .74rem; color: var(--rwm-sub); }
.rwm-chip.is-on { border-color: var(--rwm-pink); background: #fff0f6; color: var(--rwm-rose-ink); }

.rwm-empty { display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: 16px; background: var(--rwm-soft); color: var(--rwm-sub); font-size: .9rem; line-height: 1.7; }
.rwm-empty .rwm-ico { width: 40px; height: 40px; }
.rwm-empty--big { padding: 20px; }

/* ---------- 幅があるとき ---------- */
@media (min-width: 560px) {
	.rwm-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.rwm-cal { padding: 18px 20px 20px; }
	.rwm-cal__grid { gap: 6px; }
}
@media (min-width: 900px) {
	.rwm { max-width: 980px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
	.rwm-sum { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
	.rwm *, .rwm *::before, .rwm *::after { animation: none !important; transition: none !important; }
}