/*
 * Local Media Core：部品の見た目
 * 色は SWELL の「メインカラー」（--color_main）から作るので、地域ごとにテーマカラーを変えるだけで全体が揃う。
 */
:root {
	--lmc-accent: var(--color_main, #dd9933);
	--lmc-ink: #7a541c;        /* 文字・リンク用の濃い色 */
	--lmc-tint: #fbebd8;       /* 薄い帯 */
	--lmc-soft: #fdf6ee;       /* さらに薄い帯 */
	--lmc-line: #eadbc8;       /* 枠線 */
	--lmc-photo: #f3e3cf;      /* 写真がないときの枠 */
	--lmc-on-accent: #2b1d0e;  /* メインカラーの上の文字 */
	--lmc-text: var(--color_text, #333);
	--lmc-sub: #5e554c;
	--lmc-green: #3e7a1e;
	--lmc-green-tint: #eef6e6;
	--lmc-radius: 16px;
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
	:root {
		--lmc-ink: color-mix(in srgb, var(--lmc-accent) 55%, #000);
		--lmc-tint: color-mix(in srgb, var(--lmc-accent) 18%, #fff);
		--lmc-soft: color-mix(in srgb, var(--lmc-accent) 8%, #fff);
		--lmc-line: color-mix(in srgb, var(--lmc-accent) 25%, #fff);
		--lmc-photo: color-mix(in srgb, var(--lmc-accent) 22%, #f6f1ea);
	}
}

/* 並べ方 */
.lmc-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.lmc-grid--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 14px; }
.lmc-scroll { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; }
.lmc-scroll > * { flex: 0 0 220px; scroll-snap-align: start; }

/* 写真がないときの枠 */
.lmc-noimage { display: block; width: 100%; height: 100%; background: var(--lmc-photo); }

/* 店舗のカード */
.lmc-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--lmc-line); border-radius: var(--lmc-radius); overflow: hidden; color: var(--lmc-text); text-decoration: none; transition: box-shadow .2s, transform .2s; }
.lmc-card:hover { box-shadow: 0 6px 18px rgba(74, 52, 32, .12); transform: translateY(-2px); color: var(--lmc-text); }
.lmc-card__img { position: relative; display: block; aspect-ratio: 3 / 2; background: var(--lmc-photo); }
.lmc-card__img img, .lmc-post__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lmc-card__body { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px 16px; line-height: 1.6; }
.lmc-card__meta { font-size: 12px; color: var(--lmc-sub); }
.lmc-card__title { font-weight: 700; font-size: 17px; }
.lmc-card__text { font-size: 13px; color: var(--lmc-sub); }
.lmc-card--small .lmc-card__body { padding: 10px 12px 12px; }
.lmc-card--small .lmc-card__title { font-size: 15px; }
.lmc-card--small .lmc-card__text { display: none; }
.lmc-card--row { flex-direction: row; }
.lmc-card--row .lmc-card__img { flex: 0 0 38%; aspect-ratio: auto; min-height: 120px; }

.lmc-badge { position: absolute; top: 10px; left: 10px; background: #fff; color: var(--lmc-ink); font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 12px; line-height: 1.5; }
.lmc-fresh { margin-top: 6px; font-size: 12px; font-weight: 700; color: var(--lmc-green); }
.lmc-fresh::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #69b532; margin-right: 6px; vertical-align: 1px; }

/* インスタ投稿のカード */
.lmc-post { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--lmc-line); border-radius: 14px; overflow: hidden; color: var(--lmc-text); text-decoration: none; }
.lmc-post:hover { color: var(--lmc-text); box-shadow: 0 6px 18px rgba(74, 52, 32, .12); }
.lmc-post__img { display: block; aspect-ratio: 1 / 1; background: var(--lmc-photo); }
.lmc-post__body { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px 14px; line-height: 1.6; }
.lmc-post__meta { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--lmc-sub); }
.lmc-post__shop { font-weight: 700; font-size: 15px; }
.lmc-post__text { font-size: 13px; color: var(--lmc-sub); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* 記事に差し込む「佐用に寄るなら」 */
.lmc-nearby { margin: 2.5em 0; padding: 20px 22px; border: 2px solid var(--lmc-accent); border-radius: var(--lmc-radius); background: var(--lmc-soft); }
.lmc-nearby__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; margin-bottom: 14px; }
.post_content .lmc-nearby__title, .lmc-nearby__title { margin: 0; font-size: 20px; font-weight: 700; }
.lmc-nearby__more { font-size: 14px; font-weight: 700; color: var(--lmc-ink); }
.lmc-inline-shop { margin: 1.5em 0; }
.post_content .lmc-card, .post_content .lmc-card:hover { text-decoration: none; }

@media (max-width: 599px) {
	.lmc-card--row { flex-direction: column; }
	.lmc-card--row .lmc-card__img { aspect-ratio: 3 / 2; }
	.lmc-nearby { padding: 16px; }
}