/* ==============================
   関連スポット・スポットページ（inc/spots/, spot.php）
============================== */

/* 記事ページ「この記事に関連するスポット」 */
.ks {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 8px rgba(0,0,0,.08);
    padding: 16px 16px 14px;
    margin-bottom: 16px;
}
.ks-heading {
    font-size: 1rem;
    font-weight: 900;
    color: #c62828;
    margin-bottom: 10px;
}

/* スポットカード */
.ks-list {
    list-style: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
}
@media (min-width: 560px) {
    .ks-section .ks-list { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.ks-card {
    display: flex;
    gap: 10px;
    align-items: stretch;
    padding: 8px;
    border: 1px solid #eee;
    border-radius: 10px;
    background: #fafafa;
    color: inherit;
    transition: background .15s;
}
.ks-card:hover { background: #fff6f0; border-color: #f5d5c5; }
.ks-thumb {
    flex: 0 0 88px;
    height: 66px;
    border-radius: 6px;
    overflow: hidden;
    background: #eee;
}
.ks-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ks-thumb--none {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #bbb;
}
.ks-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ks-genre {
    align-self: flex-start;
    font-size: .66rem;
    font-weight: 700;
    color: #8a4b00;
    background: #fff4e0;
    padding: 1px 7px;
    border-radius: 999px;
}
.ks-name { font-size: .9rem; font-weight: 800; line-height: 1.35; color: #1a1a1a; }
.ks-desc {
    font-size: .74rem;
    color: #666;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* スポットページ */
.ks-page-text { line-height: 1.9; color: #333; margin: 8px 0 12px; }
.ks-info {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 12px;
    font-size: .86rem;
    margin: 12px 0;
    padding: 10px 12px;
    background: #fafafa;
    border-radius: 8px;
}
.ks-info:empty { display: none; }
.ks-info dt { color: #888; font-weight: 700; }
.ks-info dd { color: #333; }
.ks-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 6px; }
.ks-btn {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 24px;
    border: 1px solid #c62828;
    color: #c62828;
    font-weight: 700;
    font-size: .88rem;
}
.ks-btn:hover { background: #fff0f0; }
.ks-btn--navi { background: #c62828; color: #fff; }
.ks-btn--navi:hover { background: #8b0000; }
.ks-credit { font-size: .72rem; color: #999; margin-top: 8px; }
.ks-credit a { color: #c62828; text-decoration: underline; }

.ks-news { list-style: none; }
.ks-news li { border-top: 1px solid #f1f1f1; }
.ks-news li:first-child { border-top: none; }
.ks-news a { display: block; padding: 10px 0; }
.ks-news a:hover .ks-news-title { color: #c62828; }
.ks-news-title { display: block; font-size: .92rem; font-weight: 700; line-height: 1.5; }
.ks-news-meta { display: block; font-size: .72rem; color: #888; margin-top: 2px; }
.ks-empty { font-size: .86rem; color: #888; line-height: 1.7; }

/* スポット一覧 */
.ks-lead { font-size: .88rem; color: #555; line-height: 1.8; margin: 6px 0 12px; }
.ks-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ks-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid #e0e0e0;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 700;
    color: #444;
    background: #fff;
}
.ks-chip span { font-size: .7rem; color: #999; font-weight: 600; }
.ks-chip:hover { border-color: #c62828; color: #c62828; }
.ks-chip.is-active { background: #c62828; border-color: #c62828; color: #fff; }
.ks-chip.is-active span { color: rgba(255,255,255,.85); }
.ks-badge {
    align-self: flex-start;
    font-size: .68rem;
    font-weight: 700;
    color: #c62828;
    background: #fff0f0;
    padding: 1px 7px;
    border-radius: 999px;
}
.ks-crumb { font-size: .76rem; color: #888; margin: 0 2px 10px; }
.ks-crumb a { color: #c62828; }
.ks-more { margin-top: 12px; text-align: right; font-size: .84rem; }
.ks-more a { color: #c62828; font-weight: 700; }
@media (min-width: 560px) {
    .single-wrap > .ks-section .ks-list,
    .single-wrap > section .ks-list { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}