/* Stereo Future Publisher — いまのトレンド */

.stfm-trends {
    /* 記事ページ（クリーム地・赤の差し色・目次の枠）に合わせた色 */
    --stfm-accent: #b63227;
    --stfm-line: #d2d0c9;
    margin: 0 0 2em;
    padding: 1.1em 1.25em;
    border: 1px solid var(--stfm-line);
    border-radius: 4px;
    background: #eeede7;
    box-sizing: border-box;
}

/* トップページ：記事一覧のグリッド内でも1行を占める */
.stfm-trends-compact {
    width: 100%;
    flex: 0 0 100%;
    grid-column: 1 / -1;
}

.stfm-trends-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25em 1em;
    margin-bottom: 0.6em;
}

.stfm-trends .stfm-trends-title {
    margin: 0;
    padding: 0.45em 0.8em;
    border: 0;
    border-left: 3px solid var(--stfm-accent);
    border-radius: 2px;
    background: #e4e1da;
    font-size: 1.15em;
    line-height: 1.4;
}

.stfm-trends .stfm-trends-title::before,
.stfm-trends .stfm-trends-title::after {
    display: none;
}

.stfm-trends-updated {
    font-size: 0.78em;
    opacity: 0.7;
}

.stfm-trends-lead {
    margin: 0 0 0.8em;
    font-size: 0.85em;
    opacity: 0.8;
}

.stfm-trends-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.stfm-trend {
    display: flex;
    gap: 0.8em;
    margin: 0;
    padding: 0.75em 0;
    border-top: 1px solid var(--stfm-line);
    list-style: none;
}

.stfm-trend:first-child {
    border-top: 0;
}

.stfm-trend-rank {
    flex: 0 0 1.9em;
    height: 1.9em;
    border-radius: 50%;
    background: #e2dfd8;
    font-weight: 700;
    font-size: 0.9em;
    line-height: 1.9em;
    text-align: center;
}

.stfm-trend:nth-child(-n+3) .stfm-trend-rank {
    color: #fff;
    background: var(--stfm-accent);
}

.stfm-trend-body {
    flex: 1;
    min-width: 0;
}

.stfm-trend-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35em;
}

.stfm-trend-word {
    margin-right: 0.3em;
    font-size: 1.05em;
    overflow-wrap: anywhere;
}

.stfm-badge {
    display: inline-block;
    padding: 0.05em 0.55em;
    border-radius: 999px;
    font-size: 0.7em;
    font-weight: 700;
    line-height: 1.6;
    white-space: nowrap;
    color: #4a4f4b;
    background: #e2dfd8;
}

.stfm-badge-both { color: #fff; background: var(--stfm-accent); }
.stfm-badge-x { color: #fff; background: #222; }
.stfm-badge-google { color: #fff; background: #1a73e8; }
.stfm-badge-hours { color: #7a4a12; background: #f1e2c8; }
.stfm-badge-cat { color: #2f5d47; background: #dde7da; }

.stfm-trends p.stfm-trend-note,
.stfm-trends p.stfm-trend-article {
    margin: 0.3em 0 0;
    font-size: 0.88em;
    line-height: 1.65;
}

.stfm-trend-pending {
    opacity: 0.65;
}

.stfm-trend-source {
    font-size: 0.85em;
    opacity: 0.75;
}

.stfm-trend-article a {
    font-weight: 700;
}

.stfm-trends p.stfm-trends-more {
    margin: 0.6em 0 0;
    text-align: right;
    font-size: 0.9em;
}

.stfm-today-list,
.stfm-upcoming-list,
.stfm-trends-summaries ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.stfm-today-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
}

.stfm-today-list li {
    padding: 0.3em 0.75em;
    border: 1px solid var(--stfm-line);
    border-radius: 999px;
    list-style: none;
    font-size: 0.9em;
}

.stfm-today-count {
    margin-left: 0.4em;
    font-size: 0.8em;
    opacity: 0.65;
}

.stfm-upcoming-list li {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2em 1em;
    padding: 0.65em 0;
    border-top: 1px solid var(--stfm-line);
    list-style: none;
}

.stfm-upcoming-list li:first-child {
    border-top: 0;
}

.stfm-upcoming-when {
    flex: 0 0 9.5em;
    font-weight: 700;
    font-size: 0.9em;
    color: var(--stfm-accent);
}

.stfm-upcoming-list li > div {
    flex: 1;
    min-width: 12em;
}

.stfm-upcoming-note,
.stfm-upcoming-links {
    display: block;
    font-size: 0.85em;
}

.stfm-upcoming-links {
    margin-top: 0.15em;
}

.stfm-trends-summaries li {
    padding: 0.4em 0;
    border-top: 1px solid var(--stfm-line);
    list-style: none;
}

.stfm-trends-summaries li:first-child {
    border-top: 0;
}

/* 子テーマの黒基調トップページに差し込んだとき */
.stfm-sfd-trends .stfm-trends {
    --stfm-line: rgba(255, 255, 255, 0.16);
    color: inherit;
    background: rgba(255, 255, 255, 0.04);
}

.stfm-sfd-trends .stfm-trend-rank {
    color: inherit;
    background: rgba(255, 255, 255, 0.12);
}

.stfm-sfd-trends .stfm-badge {
    color: #ddd;
    background: rgba(255, 255, 255, 0.12);
}

.stfm-sfd-trends .stfm-badge-both { color: #fff; background: var(--stfm-accent); }
.stfm-sfd-trends .stfm-badge-x { color: #fff; background: #000; border: 1px solid rgba(255, 255, 255, 0.35); }
.stfm-sfd-trends .stfm-badge-google { color: #fff; background: #1a73e8; }
.stfm-sfd-trends .stfm-badge-hours { color: #ffd8a8; background: rgba(255, 170, 60, 0.18); }
.stfm-sfd-trends .stfm-badge-cat { color: #b2f2d6; background: rgba(60, 200, 140, 0.18); }

.stfm-sfd-trends a {
    color: inherit;
    text-decoration: underline;
}

@media (max-width: 600px) {
    .stfm-trends {
        padding: 0.9em 0.9em;
    }

    .stfm-upcoming-when {
        flex-basis: 100%;
    }
}

/* 解説を準備中のワード・集計方法 */
.stfm-trends-pending {
    margin-top: 1em;
    padding-top: 0.8em;
    border-top: 1px solid var(--stfm-line);
}

.stfm-trends .stfm-trends-subtitle {
    margin: 0 0 0.6em;
    padding: 0;
    border: 0;
    background: none;
    font-size: 0.95em;
}

.stfm-trends .stfm-trends-subtitle::before,
.stfm-trends .stfm-trends-subtitle::after {
    display: none;
}

.stfm-trends-method ul {
    margin: 0;
    padding-left: 1.2em;
    font-size: 0.88em;
    line-height: 1.7;
}

/* 記事内の集計表 */
.stfm-trend-table-wrap {
    margin: 1.5em 0;
    overflow-x: auto;
}

.stfm-trend-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88em;
}

.stfm-trend-table caption {
    margin-bottom: 0.4em;
    font-weight: 700;
    text-align: left;
}

.stfm-trend-table th,
.stfm-trend-table td {
    padding: 0.45em 0.6em;
    border: 1px solid rgba(128, 128, 128, 0.35);
    white-space: nowrap;
}

.stfm-trend-table td:first-child {
    white-space: normal;
    min-width: 8em;
}

.stfm-trend-table th {
    background: rgba(128, 128, 128, 0.1);
}

.stfm-trend-table-note {
    margin: 0.4em 0 0;
    font-size: 0.78em;
    opacity: 0.75;
}

/* ------------------------------------------------------------------
 * 「いまのトレンド」ページ全体：トップページ（黒基調）と同じ見た目にする
 * body に .stfm-trends-page（プラグインが付ける）
 * ---------------------------------------------------------------- */
.stfm-trends-page #main {
    background: transparent;
    color: #f3f2ee;
    border: 0;
    box-shadow: none;
}
.stfm-trends-page .entry-title {
    color: #f3f2ee;
    font-weight: 800;
    letter-spacing: -0.5px;
    line-height: 1.35;
}
.stfm-trends-page .date-tags,
.stfm-trends-page .date-tags * {
    color: #9aa19c;
}
.stfm-trends-page .entry-content,
.stfm-trends-page .entry-content p,
.stfm-trends-page .entry-content li {
    color: #f3f2ee;
}
.stfm-trends-page .entry-content a {
    color: #ff6252;
}
/* 目次 */
.stfm-trends-page .toc {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid #3a413d;
    color: #f3f2ee;
}
.stfm-trends-page .toc a,
.stfm-trends-page .toc-title {
    color: #f3f2ee;
}
/* 各セクションの箱 */
.stfm-trends-page .stfm-trends {
    --stfm-accent: #b63227;
    --stfm-line: rgba(255, 255, 255, 0.12);
    color: #f3f2ee;
    background: rgba(255, 255, 255, 0.04);
    border-color: #3a413d;
}
.stfm-trends-page .stfm-trends .stfm-trends-title {
    padding: 0 0 0 0.6em;
    background: none;
    border-left-color: #ff6252;
    color: #f3f2ee;
    font-weight: 800;
    letter-spacing: -0.3px;
}
.stfm-trends-page .stfm-trends .stfm-trends-subtitle {
    color: #f3f2ee;
}
.stfm-trends-page .stfm-trends-updated,
.stfm-trends-page .stfm-trends-lead {
    color: #9aa19c;
    opacity: 1;
}
.stfm-trends-page .stfm-trend-rank {
    color: #f3f2ee;
    background: rgba(255, 255, 255, 0.12);
}
.stfm-trends-page .stfm-trend:nth-child(-n+3) .stfm-trend-rank {
    color: #fff;
    background: #b63227;
}
.stfm-trends-page .stfm-trend-word {
    color: #f3f2ee;
}
.stfm-trends-page .stfm-trends p.stfm-trend-note,
.stfm-trends-page .stfm-trends p.stfm-trend-article {
    color: #c9ccc8;
}
.stfm-trends-page .stfm-trends a {
    color: #ff6252;
}
.stfm-trends-page .stfm-badge { color: #ddd; background: rgba(255, 255, 255, 0.12); }
.stfm-trends-page .stfm-badge-both { color: #fff; background: #b63227; }
.stfm-trends-page .stfm-badge-x { color: #fff; background: #000; border: 1px solid rgba(255, 255, 255, 0.35); }
.stfm-trends-page .stfm-badge-google { color: #fff; background: #1a73e8; }
.stfm-trends-page .stfm-badge-hours { color: #ffd8a8; background: rgba(255, 170, 60, 0.18); }
.stfm-trends-page .stfm-badge-cat { color: #b2f2d6; background: rgba(60, 200, 140, 0.18); }
.stfm-trends-page .stfm-upcoming-when {
    color: #ff6252;
}
.stfm-trends-page .stfm-trend-table th {
    background: rgba(255, 255, 255, 0.08);
}
.stfm-trends-page .stfm-trend-table th,
.stfm-trends-page .stfm-trend-table td {
    border-color: rgba(255, 255, 255, 0.18);
}
@media (max-width: 834px) {
    .stfm-trends-page #main {
        padding-left: 14px;
        padding-right: 14px;
    }
}