/* ============================================================
 * ランキングページ専用スタイル
 *
 * Source: docs/screens/screens/rankings-pc.html / rankings-sp.html
 * .pmn-rk スコープ配下に閉じる。
 * ============================================================ */

.pmn-rk {
	background: var(--pm-base);
	color: var(--pm-text);
	font-family: var(--pm-font-body);
	min-height: 100vh;
	padding-bottom: 80px;
}

.pmn-rk__container {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 32px;
}
@media (max-width: 767px) { .pmn-rk__container { padding: 0 16px; } }

/* hidden 強制（display:flex/grid 等を持つ要素にも効かせる） */
.pmn-rk [hidden] { display: none !important; }

/* ---- パンくず ---- */
.pmn-rk__bc {
	padding: 14px 0;
	font-size: 13px;
	color: var(--pm-text-sub);
}
.pmn-rk__bc a { color: var(--pm-primary); text-decoration: none; }
.pmn-rk__bc a:hover { text-decoration: underline; }
.pmn-rk__bc .sep { margin: 0 6px; color: var(--pm-text-sub); }

/* ---- Hero ---- */
.pmn-rk__hero {
	background: linear-gradient(180deg, var(--pm-accent-soft) 0%, var(--pm-base) 100%);
	padding: 48px 32px 36px;
	text-align: center;
	border-radius: 0 0 24px 24px;
	margin-bottom: 8px;
}
.pmn-rk__year-stamp {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--pm-font-num);
	font-size: 11px;
	font-weight: 700;
	color: var(--pm-secondary);
	background: var(--pm-surface);
	padding: 5px 14px;
	border-radius: var(--pm-radius-pill);
	margin-bottom: 14px;
	letter-spacing: 0.06em;
}
.pmn-rk__hero h1 {
	font-family: var(--pm-font-heading);
	font-weight: 700;
	font-size: 40px;
	margin: 0 0 10px;
	letter-spacing: 0.02em;
	color: var(--pm-text);
}
.pmn-rk__hero h1 .yr { color: var(--pm-secondary); font-family: var(--pm-font-num); }
.pmn-rk__hero p { color: var(--pm-text-sub); font-size: 14px; margin: 0; line-height: 1.7; }
@media (max-width: 767px) {
	.pmn-rk__hero { padding: 32px 16px 24px; border-radius: 0 0 16px 16px; }
	.pmn-rk__hero h1 { font-size: 24px; }
	.pmn-rk__hero p { font-size: 12px; }
}

/* ---- Controls ---- */
.pmn-rk__controls {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin: 28px 0 18px;
	flex-wrap: wrap;
	gap: 12px;
}
.pmn-rk__tabs {
	display: flex;
	gap: 0;
	border-bottom: 1.5px solid var(--pm-border);
}
.pmn-rk__tab {
	padding: 12px 22px 14px;
	font-family: var(--pm-font-heading);
	font-weight: 600;
	font-size: 14px;
	color: var(--pm-text-sub);
	cursor: pointer;
	border-bottom: 2px solid transparent;
	margin-bottom: -1.5px;
	display: inline-flex;
	gap: 6px;
	align-items: center;
	text-decoration: none;
	transition: color var(--pm-dur-1) var(--pm-ease);
}
.pmn-rk__tab:hover { color: var(--pm-primary); }
.pmn-rk__tab.on { color: var(--pm-primary); border-bottom-color: var(--pm-primary); }
.pmn-rk__year-sel {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--pm-text-sub);
}
.pmn-rk__year-sel select {
	height: 38px;
	padding: 0 12px;
	border: 1px solid var(--pm-border);
	border-radius: 8px;
	font-size: 13px;
	background: var(--pm-surface);
	font-family: inherit;
	font-weight: 600;
	color: var(--pm-text);
}

/* ---- Empty state ---- */
.pmn-rk__empty {
	background: var(--pm-surface);
	border: 1px dashed var(--pm-border);
	border-radius: var(--pm-radius-card);
	padding: 64px 32px;
	text-align: center;
	color: var(--pm-text-sub);
}
.pmn-rk__empty svg { color: var(--pm-accent); margin-bottom: 16px; }
.pmn-rk__empty h2 {
	font-family: var(--pm-font-heading);
	font-weight: 700;
	font-size: 18px;
	color: var(--pm-text);
	margin: 0 0 8px;
}
.pmn-rk__empty p { margin: 0; font-size: 14px; line-height: 1.8; }

/* ---- TOP3 Podium ---- */
.pmn-rk__podium {
	display: grid;
	grid-template-columns: 1fr 1.15fr 1fr;
	gap: 14px;
	align-items: end;
	margin-bottom: 24px;
	margin-top: 32px;
}
@media (max-width: 767px) {
	.pmn-rk__podium { grid-template-columns: 1fr; gap: 16px; margin-top: 16px; }
	/* SP では 金（1位）→ 銀（2位）→ 銅（3位）の順に縦並び。
	 * HTML 上は SEO/PC レイアウトの都合で 銀→金→銅 の順なので order で並べ替える。 */
	.pmn-rk__medal.gold   { order: 1; }
	.pmn-rk__medal.silver { order: 2; }
	.pmn-rk__medal.bronze { order: 3; }
}

.pmn-rk__medal {
	position: relative;
	background: var(--pm-surface);
	border: 1px solid var(--pm-border);
	border-radius: 18px;
	padding: 28px 18px 22px;
	text-align: center;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
	transition: transform var(--pm-dur-2) var(--pm-ease);
}
.pmn-rk__medal:hover { transform: translateY(-4px); }
.pmn-rk__medal.gold {
	border: 2px solid #D4A742;
	background: linear-gradient(180deg, #FFFAEB 0%, var(--pm-surface) 50%);
	padding-top: 36px;
	padding-bottom: 30px;
}
.pmn-rk__medal.silver { border: 1px solid #B5B5B5; }
.pmn-rk__medal.bronze { border: 1px solid #C5895A; }
@media (min-width: 768px) {
	.pmn-rk__medal.silver { order: 1; }
	.pmn-rk__medal.gold   { order: 2; }
	.pmn-rk__medal.bronze { order: 3; }
}

.pmn-rk__coin {
	position: absolute;
	top: -22px;
	left: 50%;
	transform: translateX(-50%);
	width: 56px;
	height: 56px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--pm-font-heading);
	font-weight: 700;
	font-size: 22px;
	color: #fff;
	border: 3px solid var(--pm-surface);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.pmn-rk__medal.gold   .pmn-rk__coin {
	background: linear-gradient(140deg, #F4C84A, #D4A742);
	width: 64px; height: 64px; font-size: 26px; top: -26px;
}
.pmn-rk__medal.silver .pmn-rk__coin { background: linear-gradient(140deg, #D8D8D8, #A5A5A5); }
.pmn-rk__medal.bronze .pmn-rk__coin { background: linear-gradient(140deg, #D49870, #A57144); }

.pmn-rk__medal-link {
	display: block;
	color: inherit;
	text-decoration: none;
}
.pmn-rk__medal .pmn-rk__kj {
	font-family: var(--pm-font-heading);
	font-weight: 700;
	line-height: 1;
	margin: 14px 0 6px;
	letter-spacing: 0.04em;
	color: var(--pm-text);
}
.pmn-rk__medal.gold   .pmn-rk__kj { font-size: 64px; }
.pmn-rk__medal.silver .pmn-rk__kj,
.pmn-rk__medal.bronze .pmn-rk__kj { font-size: 48px; }
.pmn-rk__medal .pmn-rk__rd {
	font-size: 14px;
	color: var(--pm-text);
	font-weight: 500;
	margin-bottom: 2px;
}
.pmn-rk__medal .pmn-rk__rm {
	font-size: 11px;
	color: var(--pm-text-sub);
	font-family: var(--pm-font-num);
	letter-spacing: 0.06em;
	margin-bottom: 14px;
}
.pmn-rk__medal-meta {
	display: flex;
	justify-content: center;
	gap: 10px;
	font-size: 11px;
	color: var(--pm-text-sub);
	margin-bottom: 14px;
	flex-wrap: wrap;
}
.pmn-rk__medal-meta b { color: var(--pm-text); font-family: var(--pm-font-num); margin: 0 2px; }

.ndelta { font-family: var(--pm-font-num); font-weight: 700; font-size: 11px; }
.ndelta.up   { color: var(--pm-success); }
.ndelta.dn   { color: var(--pm-warning); }
.ndelta.same { color: var(--pm-text-sub); }

.pmn-rk__medal-actions {
	display: flex;
	gap: 6px;
	justify-content: center;
}
.pmn-rk__btn-fav {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--pm-surface);
	border: 1px solid var(--pm-border);
	cursor: pointer;
	color: var(--pm-secondary);
	font-size: 14px;
	transition: all var(--pm-dur-1) var(--pm-ease);
}
.pmn-rk__btn-fav.on,
.pmn-rk__btn-fav[aria-pressed="true"] {
	background: var(--pm-secondary);
	color: var(--pm-text-on-primary);
	border-color: var(--pm-secondary);
}
.pmn-rk__btn-detail {
	flex: 1;
	height: 36px;
	background: var(--pm-primary);
	color: var(--pm-text-on-primary);
	border: none;
	border-radius: var(--pm-radius-pill);
	font-size: 12px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	text-decoration: none;
	transition: background var(--pm-dur-1) var(--pm-ease);
}
.pmn-rk__btn-detail:hover { background: var(--pm-primary-hover); }
.pmn-rk__btn-detail svg { flex-shrink: 0; }

/* ---- TOP4-10 Grid ---- */
.pmn-rk__top-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	margin-bottom: 36px;
}
@media (max-width: 1023px) { .pmn-rk__top-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px)  { .pmn-rk__top-grid { grid-template-columns: repeat(2, 1fr); } }

.pmn-rk__tcard {
	background: var(--pm-surface);
	border: 1px solid var(--pm-border);
	border-radius: 14px;
	padding: 18px 14px;
	text-align: center;
	position: relative;
	cursor: pointer;
	transition: transform var(--pm-dur-2) var(--pm-ease), box-shadow var(--pm-dur-2) var(--pm-ease);
	text-decoration: none;
	color: inherit;
	display: block;
}
.pmn-rk__tcard:hover { transform: translateY(-2px); box-shadow: var(--pm-shadow-2); }
.pmn-rk__tcard--more {
	border-style: dashed;
	background: transparent;
	color: var(--pm-text-sub);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: default;
}
.pmn-rk__tcard--more:hover { transform: none; box-shadow: none; }
.pmn-rk__tcard-more-num {
	font-family: var(--pm-font-num);
	font-size: 13px;
	font-weight: 700;
}
.pmn-rk__tcard-more-sub { font-size: 11px; margin-top: 4px; }

.pmn-rk__rank-num {
	font-family: var(--pm-font-num);
	font-weight: 700;
	font-size: 22px;
	color: var(--pm-primary);
	margin-bottom: 4px;
	letter-spacing: 0.02em;
}
.pmn-rk__tkj {
	font-family: var(--pm-font-heading);
	font-weight: 700;
	font-size: 34px;
	margin: 0 0 4px;
	letter-spacing: 0.04em;
	color: var(--pm-text);
}
.pmn-rk__trd { font-size: 12px; color: var(--pm-text-sub); margin-bottom: 8px; }
.pmn-rk__tmeta { font-size: 10px; color: var(--pm-text-sub); }
.pmn-rk__tmeta b { color: var(--pm-text); font-family: var(--pm-font-num); margin: 0 2px; }
.pmn-rk__tcard-fav {
	position: absolute;
	top: 8px; right: 8px;
	width: 30px; height: 30px;
	border: none;
	background: transparent;
	color: #CCC;
	font-size: 14px;
	cursor: pointer;
	border-radius: 50%;
	transition: all var(--pm-dur-1) var(--pm-ease);
}
.pmn-rk__tcard-fav:hover { color: var(--pm-secondary); background: var(--pm-base); }
.pmn-rk__tcard-fav[aria-pressed="true"] {
	color: var(--pm-secondary);
}

/* ---- 11位〜100位 List ---- */
.pmn-rk__list-section {
	background: var(--pm-surface);
	border: 1px solid var(--pm-border);
	border-radius: var(--pm-radius-card);
	padding: 0;
	margin-bottom: 36px;
	overflow: hidden;
}
.pmn-rk__list-section header {
	background: var(--pm-base);
	border-bottom: 1px solid var(--pm-border);
	padding: 18px 24px;
}
.pmn-rk__list-section h2 {
	font-family: var(--pm-font-heading);
	font-weight: 700;
	font-size: 16px;
	margin: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: var(--pm-text);
}
.pmn-rk__list-section h2 .ct {
	font-size: 12px;
	color: var(--pm-text-sub);
	font-weight: 500;
	font-family: var(--pm-font-num);
}
.pmn-rk__list { display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 767px) { .pmn-rk__list { grid-template-columns: 1fr; } }

.pmn-rk__lrow {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 22px;
	border-bottom: 1px solid var(--pm-border);
	cursor: pointer;
	transition: background var(--pm-dur-2) var(--pm-ease);
	text-decoration: none;
	color: inherit;
}
.pmn-rk__lrow:hover { background: var(--pm-primary-soft); }
@media (min-width: 768px) {
	.pmn-rk__lrow:nth-child(2n)   { border-right: none; }
	.pmn-rk__lrow:nth-child(2n+1) { border-right: 1px solid var(--pm-border); }
}
@media (max-width: 767px) {
	.pmn-rk__lrow { padding: 10px 16px; gap: 10px; }
}

.pmn-rk__lrow .nrk {
	font-family: var(--pm-font-num);
	font-weight: 700;
	font-size: 15px;
	color: var(--pm-text-sub);
	width: 34px;
	flex: none;
	text-align: right;
}
.pmn-rk__lrow .nkj {
	font-family: var(--pm-font-heading);
	font-weight: 700;
	font-size: 20px;
	flex: none;
	color: var(--pm-text);
}
.pmn-rk__lrow .nrd {
	font-size: 12px;
	color: var(--pm-text-sub);
	flex: 1;
	min-width: 0;
}
.pmn-rk__lrow .nstr {
	font-size: 11px;
	color: var(--pm-text-sub);
	font-family: var(--pm-font-num);
	flex-shrink: 0;
}
.pmn-rk__lrow .nstr b { color: var(--pm-text); font-weight: 600; margin: 0 2px; }
.pmn-rk__lrow .ndelta {
	font-size: 10px;
	width: 32px;
	text-align: center;
	flex-shrink: 0;
}
.pmn-rk__lrow .nfav {
	width: 28px;
	height: 28px;
	border: none;
	background: transparent;
	color: #CCC;
	font-size: 13px;
	cursor: pointer;
	border-radius: 50%;
	flex-shrink: 0;
	transition: all var(--pm-dur-1) var(--pm-ease);
}
.pmn-rk__lrow .nfav:hover { background: var(--pm-surface); color: var(--pm-secondary); }
.pmn-rk__lrow .nfav[aria-pressed="true"] { color: var(--pm-secondary); }

/* ---- セクション枠（チャート等） ---- */
.pmn-rk__section {
	background: var(--pm-surface);
	border: 1px solid var(--pm-border);
	border-radius: var(--pm-radius-card);
	padding: 24px 28px;
	margin-bottom: 24px;
}
.pmn-rk__section h2 {
	font-family: var(--pm-font-heading);
	font-weight: 700;
	font-size: 18px;
	margin: 0 0 6px;
	color: var(--pm-text);
}
.pmn-rk__section .sub { font-size: 13px; color: var(--pm-text-sub); margin: 0 0 18px; }
.pmn-rk__section--empty-trend { background: var(--pm-base); }
@media (max-width: 767px) { .pmn-rk__section { padding: 18px 20px; } }

.pmn-rk__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 14px;
}
.pmn-rk__legend .lg {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: var(--pm-text);
}
.pmn-rk__legend .sw { width: 12px; height: 3px; border-radius: 2px; flex-shrink: 0; }

.pmn-rk__chart {
	width: 100%;
	height: 280px;
	background: var(--pm-base);
	border-radius: 12px;
	padding: 14px;
	box-sizing: border-box;
}
@media (max-width: 767px) { .pmn-rk__chart { height: 200px; padding: 8px; } }

/* ---- Notice ---- */
.pmn-rk__notice {
	background: var(--pm-accent-soft);
	border-left: 3px solid var(--pm-warning);
	padding: 18px 22px;
	border-radius: 8px;
	margin-bottom: 32px;
}
.pmn-rk__notice h3 {
	font-family: var(--pm-font-heading);
	font-weight: 700;
	font-size: 13px;
	margin: 0 0 8px;
	color: var(--pm-text);
	display: flex;
	align-items: center;
	gap: 6px;
}
.pmn-rk__notice h3 svg,
.pmn-rk__notice h3 i { color: var(--pm-warning); flex-shrink: 0; }
.pmn-rk__notice ul {
	margin: 0;
	padding-left: 18px;
	font-size: 12px;
	color: var(--pm-text-sub);
	line-height: 1.8;
}
.pmn-rk__notice ul li { margin-bottom: 2px; }
.pmn-rk__notice ul li b { color: var(--pm-text); }