/* ===========================================================
   Common components for ムダシル。
   Spec: docs/plan/仕様書.md §5 + design-spec/components.md.
   =========================================================== */

/* ---------- Chips and Tags ---------- */
.chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: var(--r-pill);
	background: var(--paper);
	border: 1.5px solid var(--line);
	font-weight: 600;
	font-size: var(--fs-meta);
	color: var(--ink-soft);
	text-decoration: none;
	line-height: 1;
}
.chip-brand  { background: var(--brand);       color: #fff;          border-color: var(--brand); }
.chip-sun    { background: var(--sun-soft);    color: #7a5a00;       border-color: var(--sun); }
.chip-accent { background: var(--accent-soft); color: var(--accent); border-color: #bccbe0; }
.chip-leaf   { background: #E0EDE3;            color: #2D6A4F;       border-color: #B8D9C2; }
.chip-pink   { background: #FDE2E8;            color: #C92E48;       border-color: #F5BFC9; }

.tag {
	display: inline-flex;
	padding: 4px 10px;
	border-radius: var(--r-pill);
	background: var(--paper);
	border: 1.5px solid var(--line);
	font-size: var(--fs-mini);
	color: var(--ink-soft);
	font-weight: 600;
	text-decoration: none;
}
.tag::before { content: '# '; }

/* ---------- muda-point ---------- */
.muda-point {
	background: var(--brand-soft);
	border-top: 4px solid var(--brand);
	border-radius: var(--r-lg);
	padding: 18px 22px;
	position: relative;
	margin: 24px 0;
}
.muda-point__label {
	position: absolute;
	top: -14px;
	left: 18px;
	background: var(--brand);
	color: #fff;
	padding: 4px 12px;
	border-radius: 8px;
	font-size: var(--fs-meta);
	font-weight: 700;
	letter-spacing: .05em;
}
.muda-point__body  { font-size: 14px; line-height: 1.8; margin-top: 8px; color: var(--ink); }
.muda-point__body ul,
.muda-point__body ol { margin: 0; padding-left: 20px; }
.muda-point__body li { margin: 4px 0; }
.muda-point__body p:last-child { margin-bottom: 0; }

/* ---------- muda-term ---------- */
.muda-term {
	background: var(--accent-soft);
	border: 1.5px solid #bccbe0;
	border-radius: 12px;
	padding: 16px 18px;
	margin: 20px 0;
}
.muda-term__head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.muda-term__badge {
	background: var(--accent); color: #fff;
	padding: 2px 8px; border-radius: 4px;
	font-size: var(--fs-mini); font-weight: 700; letter-spacing: .1em;
}
.muda-term__name {
	font-family: var(--font-quote);
	font-weight: 800; font-size: 16px; color: var(--ink);
}
.muda-term__read { font-size: var(--fs-mini); color: var(--ink-mute); }
.muda-term__body { font-size: 13px; color: var(--ink-soft); line-height: 1.7; }
.muda-term__body p:last-child { margin-bottom: 0; }

/* ---------- muda-aside ---------- */
.muda-aside {
	background: var(--paper);
	border: 1.5px dashed var(--line);
	border-radius: 12px;
	padding: 14px 16px;
	margin: 16px 0;
	font-size: 13px;
	color: var(--ink-soft);
	line-height: 1.7;
}
.muda-aside__lbl { font-weight: 700; color: var(--brand); margin-right: 6px; }

/* ---------- muda-summary ---------- */
.muda-summary {
	background: var(--ink);
	color: #fff;
	border-radius: var(--r-lg);
	padding: 20px 22px;
	margin: 28px 0;
}
.muda-summary__lbl {
	font-family: var(--font-heading);
	font-weight: 900;
	font-size: 13px;
	letter-spacing: .2em;
	color: var(--sun);
	margin-bottom: 10px;
}
.muda-summary__body { font-size: 14px; line-height: 1.85; color: #fff; }
.muda-summary__body ul,
.muda-summary__body ol { margin: 0; padding-left: 20px; color: #fff; }
.muda-summary__body li { margin: 4px 0; color: #fff; }
.muda-summary__body p { color: #fff; }
.muda-summary__body p:last-child { margin-bottom: 0; }
.muda-summary__body strong { color: var(--sun); }

/* Article-body cascade safety: prevent .article-body p/ul/li color from
   bleeding into the dark .muda-summary box (which has bg=ink, fg=white).
   Higher specificity than .article-body ul (1 class vs 2 classes nested). */
.article-body .muda-summary,
.article-body .muda-summary p,
.article-body .muda-summary ul,
.article-body .muda-summary ol,
.article-body .muda-summary li { color: #fff; }
.article-body .muda-summary strong { color: var(--sun); }

/* ---------- muda-bubble ---------- */
.muda-bubble {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin: 16px 0;
}
.muda-bubble--right { flex-direction: row-reverse; }
.muda-bubble__avatar {
	flex: 0 0 48px; width: 48px; height: 48px;
	border-radius: 50%; overflow: hidden;
	background: var(--brand-soft);
}
.muda-bubble__avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.muda-bubble__body {
	background: var(--paper);
	border: 1.5px solid var(--line);
	border-radius: var(--r-lg);
	padding: 12px 14px;
	max-width: 80%;
	font-size: 13px;
	line-height: 1.7;
	color: var(--ink);
}
.muda-bubble--right .muda-bubble__body { background: var(--sun-soft); }
.muda-bubble__who { font-size: 10px; font-weight: 700; color: var(--ink-mute); margin-bottom: 4px; }
.muda-bubble__text p:last-child { margin-bottom: 0; }

/* ---------- muda-speech (registry-driven) ----------
   3-axis CSS model:
     - variant (color theme): cool / warm / leaf / ...
     - side                 : --right only (left is default)
     - avatar type          : --text / --image
   See: 03_吹き出し機能/docs/plan/仕様書.md F5-F7. */
.muda-speech {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin: 16px 0;
}
.muda-speech--right { flex-direction: row-reverse; }

.muda-speech__avatar {
	flex: 0 0 48px; width: 48px; height: 48px;
	border-radius: 50%; overflow: hidden;
	display: flex; align-items: center; justify-content: center;
}
.muda-speech__avatar--text {
	font-family: var(--font-heading);
	font-weight: 900;
	font-size: 18px;
}
.muda-speech__avatar--image img {
	display: block; width: 100%; height: 100%; object-fit: cover;
}
.muda-speech__avatar-inner { line-height: 1; }

.muda-speech__body {
	background: var(--paper);
	border: 1.5px solid var(--line);
	border-radius: var(--r-lg);
	padding: 12px 14px;
	max-width: 80%;
	font-size: 14px;
	line-height: 1.75;
	color: var(--ink);
	position: relative;
}
.muda-speech__who {
	font-size: 10px; font-weight: 700;
	color: var(--ink-mute);
	letter-spacing: .05em;
	margin-bottom: 4px;
}
.muda-speech__text p:last-child { margin-bottom: 0; }

/* variant: cool (formerly tied to speech_boy) */
.muda-speech--cool .muda-speech__avatar { background: var(--accent-soft); color: var(--accent); }
.muda-speech--cool .muda-speech__body   { background: var(--accent-soft); border-color: #bccbe0; }

/* variant: warm (formerly tied to speech_teacher) */
.muda-speech--warm .muda-speech__avatar { background: var(--brand-soft); }
.muda-speech--warm .muda-speech__body   { background: var(--sun-soft);   border-color: var(--sun); }

/* variant: leaf (new) */
.muda-speech--leaf .muda-speech__avatar { background: var(--leaf-soft); color: #2D6A4F; }
.muda-speech--leaf .muda-speech__body   { background: var(--leaf-soft); border-color: #B8D9C2; }

/* ---------- muda-cta ---------- */
.muda-cta {
	background: var(--sun-soft);
	border: 2px dashed var(--sun);
	border-radius: 16px;
	padding: 20px 22px;
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 24px 0;
}
.muda-cta__icon { flex: 0 0 56px; width: 56px; height: 56px; }
.muda-cta__icon img { display: block; width: 100%; height: 100%; }
.muda-cta__txt { flex: 1; }
.muda-cta__title {
	font-family: var(--font-heading);
	font-weight: 900;
	font-size: 15px;
	color: var(--ink);
}
.muda-cta__sub { font-size: 12px; color: var(--ink-soft); margin-top: 4px; }

@media (max-width: 640px) {
	.muda-cta { flex-direction: column; text-align: center; }
}

/* ---------- muda-fig ---------- */
.muda-fig {
	margin: 20px 0;
	background: var(--paper);
	border-radius: var(--r-lg);
	padding: 20px;
	border: 1.5px solid var(--line);
}
.muda-fig__caption {
	font-size: var(--fs-mini);
	font-weight: 700;
	color: var(--ink-mute);
	letter-spacing: .2em;
	margin-bottom: 12px;
	display: block;
}
.muda-fig__body img,
.muda-fig__body svg { max-width: 100%; height: auto; display: block; margin-inline: auto; }

/* ---------- Breadcrumbs ---------- */
.crumbs {
	font-size: var(--fs-mini);
	color: var(--ink-mute);
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}
.crumbs a {
	color: var(--ink-mute);
	text-decoration: none;
}
.crumbs a:hover { color: var(--ink-soft); text-decoration: underline; }
.crumbs > span:last-child { color: var(--ink-soft); }

/* ---------- Search box ---------- */
.searchbox {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--paper);
	border: 2px solid var(--ink);
	border-radius: var(--r-pill);
	padding: 10px 18px;
	font-size: var(--fs-ui);
	box-shadow: 0 3px 0 var(--ink);
	max-width: 100%;
}
.searchbox--mini { padding: 6px 12px 6px 14px; font-size: 12px; box-shadow: 0 2px 0 var(--ink); }
.searchbox svg { color: var(--ink-mute); flex-shrink: 0; }
.searchbox input {
	flex: 1; min-width: 0; border: 0; outline: 0;
	background: transparent;
	font: inherit; color: var(--ink);
}
.searchbox input::placeholder { color: var(--ink-mute); }
.searchbox button {
	background: var(--brand); color: #fff;
	border-radius: var(--r-pill);
	padding: 5px 14px; font-size: var(--fs-mini); font-weight: 700;
	border: 0; cursor: pointer;
	flex-shrink: 0;
}
.searchbox button:hover { background: var(--brand-deep); }

/* ---------- TOC ---------- */
.toc {
	background: var(--paper);
	border: 1.5px solid var(--line);
	border-radius: var(--r-lg);
	padding: 18px 22px;
	margin: 20px 0;
}
.toc__head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.toc__badge {
	background: var(--ink); color: #fff;
	padding: 2px 10px; border-radius: 4px;
	font-size: var(--fs-mini); font-weight: 700; letter-spacing: .15em;
}
.toc__title { font-weight: 700; font-size: 13px; color: var(--ink); }
.toc__list { margin: 0; padding: 0; list-style: none; }
.toc__list li { border-bottom: 1px dashed var(--line-soft); padding: 6px 0; }
.toc__list li:last-child { border-bottom: 0; }
.toc__list a {
	display: flex; gap: 12px;
	font-size: 13px; color: var(--ink-soft);
	text-decoration: none;
}
.toc__list a:hover { color: var(--ink); }
.toc__num {
	color: var(--brand); font-weight: 800;
	font-family: var(--font-quote);
	font-style: italic;
	flex: 0 0 24px;
}
.toc__list .toc__h3 { padding-left: 36px; font-size: 12px; }

/* ---------- Article card ---------- */
.card {
	background: var(--paper);
	border-radius: var(--r-lg);
	border: 1.5px solid var(--line);
	overflow: hidden;
	transition: transform .15s, box-shadow .15s;
	display: flex;
	flex-direction: column;
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }
.card__link { display: flex; flex-direction: column; color: inherit; text-decoration: none; height: 100%; }
.card__eye {
	aspect-ratio: 16 / 10;
	background: var(--brand-soft);
	overflow: hidden;
	display: flex; align-items: center; justify-content: center;
}
.card__eye img,
.card__eye svg { display: block; width: 100%; height: 100%; object-fit: cover; }
.card__body { padding: 14px 16px; flex: 1; display: flex; flex-direction: column; }
.card__cat {
	font-weight: 700;
	font-size: var(--fs-mini);
	margin-bottom: 8px;
	letter-spacing: .04em;
}
.card__cat::before { content: '\25cf  '; margin-right: 2px; }
.card__title {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 16px;
	line-height: 1.45;
	color: var(--ink);
	text-wrap: pretty;
	margin: 0 0 auto 0;
}
.card__meta {
	display: flex; gap: 10px;
	color: var(--ink-mute);
	font-size: var(--fs-mini);
	margin-top: 10px;
}

/* ---------- Ranking row ---------- */
.rank-row { display: flex; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px dashed var(--line); }
.rank-row:last-child { border-bottom: 0; }
.rank-row__num {
	font-family: var(--font-quote);
	font-weight: 800;
	font-size: 32px;
	font-style: italic;
	flex: 0 0 32px;
	line-height: 1;
}
.rank-row__num[data-rank="1"] { color: var(--brand); }
.rank-row__num[data-rank="2"] { color: var(--accent); }
.rank-row__num[data-rank="3"] { color: var(--sun); }
.rank-row__num[data-rank="4"],
.rank-row__num[data-rank="5"] { color: var(--ink-mute); }
.rank-row__thumb {
	width: 64px; height: 48px;
	border-radius: 8px;
	overflow: hidden;
	flex: 0 0 64px;
	background: var(--brand-soft);
}
.rank-row__thumb img { width: 100%; height: 100%; object-fit: cover; }
.rank-row__body { flex: 1; min-width: 0; }
.rank-row__cat { font-size: 10px; font-weight: 700; margin-bottom: 3px; }
.rank-row__cat::before { content: '\25cf  '; margin-right: 2px; }
.rank-row__title {
	font-size: 13px; font-weight: 700;
	color: var(--ink); line-height: 1.35;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

/* ---------- Category tile ---------- */
.cat-tile {
	padding: 18px 18px 16px;
	display: flex; flex-direction: column; gap: 8px;
	background: var(--brand-soft);
	border-radius: var(--r-lg);
	min-height: 130px;
	color: var(--ink);
	text-decoration: none;
	position: relative;
	overflow: hidden;
	justify-content: space-between;
	border: 1.5px solid transparent;
	transition: transform .15s, box-shadow .15s;
}
.cat-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); color: var(--ink); }
.cat-tile__emoji {
	position: absolute;
	right: -10px; bottom: -12px;
	font-size: 64px;
	opacity: .5;
	line-height: 1;
	font-family: var(--font-quote);
	font-weight: 800;
	pointer-events: none;
}
.cat-tile__name {
	font-family: var(--font-heading);
	font-weight: 900;
	font-size: 18px;
	color: var(--ink);
	position: relative;
}
.cat-tile__count {
	font-size: var(--fs-mini);
	color: var(--ink-soft);
	position: relative;
}
.cat-tile__arrow {
	font-size: var(--fs-mini);
	font-weight: 700;
	position: relative;
}

/* ---------- Site header (refined) ---------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
}
.site-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 16px;
	background: rgba(253, 248, 238, .92);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border-bottom: 1.5px solid var(--line);
}
@media (min-width: 960px) {
	.site-header-inner { padding: 18px 36px; }
}

.g-nav {
	display: none;
	gap: 24px;
	font-size: 13px;
	font-weight: 700;
	color: var(--ink-soft);
	flex-wrap: nowrap;
}
.g-nav a {
	color: var(--ink-soft);
	text-decoration: none;
	padding: 6px 0;
	border-bottom: 2px solid transparent;
	transition: color .15s, border-color .15s;
	white-space: nowrap;        /* one nav item per row, never split by character */
	flex-shrink: 0;
}
.g-nav a:hover { color: var(--ink); border-bottom-color: var(--brand); }

.g-header-right { display: flex; align-items: center; gap: 12px; }
.g-header-search { display: none; width: 220px; }

.g-menu-toggle {
	background: none;
	border: none;
	padding: 6px;
	cursor: pointer;
	color: var(--ink);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.g-menu-toggle svg { display: block; }

@media (min-width: 960px) {
	.g-nav            { display: flex; }
	.g-header-search  { display: block; }
	.g-menu-toggle    { display: none; }
}

/* mobile menu drawer */
@media (max-width: 959px) {
	.g-nav.is-open {
		display: flex;
		flex-direction: column;
		gap: 4px;
		position: fixed;
		top: 64px;
		left: 0;
		right: 0;
		background: var(--paper);
		border-bottom: 1.5px solid var(--line);
		padding: 16px 20px 24px;
		z-index: 99;
	}
	.g-nav.is-open a {
		display: block;
		padding: 12px 4px;
		border-bottom: 1px solid var(--line-soft);
		font-size: 16px;
		color: var(--ink);
	}
	.g-nav.is-open a:last-child { border-bottom: 0; }
	body.has-menu-open { overflow: hidden; }
}

/* ---------- Site footer (refined) ---------- */
.site-footer {
	margin-top: 60px;
}
.site-footer-inner {
	background: var(--bg);
	border-top: 1.5px solid var(--line);
	padding: 24px 16px;
	font-size: var(--fs-meta);
	color: var(--ink-soft);
}
@media (min-width: 960px) {
	.site-footer-inner { padding: 40px 36px; }
}
.site-footer__top {
	display: flex;
	flex-direction: column;
	gap: 24px;
	justify-content: space-between;
}
@media (min-width: 640px) {
	.site-footer__top { flex-direction: row; }
}
.site-footer__brand { max-width: 320px; line-height: 1.7; color: var(--ink-mute); }
.site-footer__brand .brand { margin-bottom: 10px; }
.site-footer__cols { display: flex; gap: 40px; }
.site-footer__cols h4 {
	font-family: var(--font-heading);
	font-weight: 900;
	font-size: 13px;
	color: var(--ink);
	margin: 0 0 8px;
}
.site-footer__cols ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.site-footer__cols a { color: var(--ink-soft); text-decoration: none; font-size: 13px; }
.site-footer__cols a:hover { color: var(--ink); text-decoration: underline; }
.site-footer__copy {
	margin-top: 24px;
	font-size: var(--fs-mini);
	color: var(--ink-mute);
}