@charset "UTF-8";
/**
 * VT Timeline UI
 * ------------------------------------------------------------------
 * X / Facebook 系のフィードUIに全面刷新したスタイル。
 *
 * ・旧 .time-line-* 系のクラスには依存しない（vt-tl- 名前空間で独立）
 *   → page.css の既存ルールと特異性で争わずに済む
 * ・header.php は wp_head() より前に page.css を読むため、
 *   enqueue した本ファイルが最後に適用される
 * ・ルート font-size は 62.5%（1rem = 10px）
 *
 * @package vt-renewal
 */

/* ==================================================================
 * トークン
 * ================================================================== */
.timeline {
    --tl-max: 1040px;
    --tl-feed: 620px;
    --tl-side: 340px;
    --tl-gap: 24px;

    --tl-text: #16202a;
    --tl-muted: #5b6b7c;
    --tl-faint: #8a99a8;
    --tl-line: #e3e8ed;
    --tl-line-soft: #eef2f6;
    --tl-surface: #ffffff;
    --tl-page: #f5f7fa;
    --tl-hover: rgba(22, 32, 42, .035);

    --tl-brand: #004096;
    --tl-brand-ink: #003278;
    --tl-brand-soft: #eaf1fb;

    --tl-radius: 14px;
    --tl-shadow: 0 1px 2px rgba(16, 32, 56, .06), 0 1px 10px rgba(16, 32, 56, .04);

    /* .main-header が position:fixed（50px / 1100px以上で84px）なので、
       サイドバーの固定位置はその下に来るようにする */
    --tl-headroom: 66px;

    background: var(--tl-page);
    padding: 24px 0 72px;
    color: var(--tl-text);
    font-feature-settings: "palt" 1;
}

/* 930px 固定を解除してフィード＋サイドバーが収まる幅にする */
.timeline .timeline-inner {
    max-width: var(--tl-max) !important;
    width: 100%;
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
}

/* ==================================================================
 * パンくずリスト（タイムライン専用）
 * ------------------------------------------------------------------
 * 共通の .breadcrumb は使わず、フィード幅に揃えた専用のものを出す。
 * ================================================================== */
.vt-tl-crumb {
    margin: 0 0 14px;
}

.vt-tl-crumb-list {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    min-width: 0;
}

.vt-tl-crumb-item {
    display: flex;
    align-items: center;
    min-width: 0;
    font-size: 1.2rem;
    line-height: 1.6;
    white-space: nowrap;
}

.vt-tl-crumb-item + .vt-tl-crumb-item::before {
    content: '›';
    flex: 0 0 auto;
    margin: 0 8px;
    color: var(--tl-faint);
    font-size: 1.4rem;
    line-height: 1;
}

.vt-tl-crumb-item a {
    color: var(--tl-muted);
    text-decoration: none;
    padding: 3px 0;
    border-bottom: 1px solid transparent;
    transition: color .15s, border-color .15s;
}

.vt-tl-crumb-item a:hover {
    color: var(--tl-brand);
    border-bottom-color: currentColor;
}

/* 最後のパンくず（＝投稿名）は長くなるので省略記号で畳む */
.vt-tl-crumb-item.is-current {
    min-width: 0;
    overflow: hidden;
}

.vt-tl-crumb-item.is-current span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--tl-text);
    font-weight: 700;
}

/* ==================================================================
 * レイアウト
 * ================================================================== */
.timeline .time-line-wrap {
    display: block;
    border: 0;
    margin: 0;
}

.timeline .time-line-feed {
    width: 100%;
    border: 0;
    border-image: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

@media screen and (min-width: 900px) {
    .timeline .time-line-wrap {
        display: grid;
        grid-template-columns: minmax(0, var(--tl-feed)) var(--tl-side);
        gap: var(--tl-gap);
        align-items: start;
        justify-content: center;
    }

    /* サイドバーを画面に固定する。
       内容が画面より高い場合はサイドバー内だけがスクロールする。 */
    .vt-tl-side {
        position: sticky;
        top: var(--tl-headroom);
        max-height: calc(100vh - var(--tl-headroom) - 20px);
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: #cfd8e2 transparent;
        padding-right: 2px;
    }

    .vt-tl-side::-webkit-scrollbar { width: 6px; }
    .vt-tl-side::-webkit-scrollbar-track { background: transparent; }
    .vt-tl-side::-webkit-scrollbar-thumb {
        background: #cfd8e2;
        border-radius: 999px;
    }
    .vt-tl-side:not(:hover)::-webkit-scrollbar-thumb { background: transparent; }
}

@media screen and (min-width: 1100px) {
    .timeline { --tl-headroom: 100px; }
}

/* ==================================================================
 * 共通カード
 * ================================================================== */
.vt-tl-composer,
.vt-tl-post,
.vt-tl-card,
.vt-tl-empty {
    background: var(--tl-surface);
    border: 1px solid var(--tl-line);
    border-radius: var(--tl-radius);
    box-shadow: var(--tl-shadow);
}

/* ==================================================================
 * 投稿フォーム
 * ================================================================== */
.vt-tl-composer {
    padding: 16px 18px 12px;
    margin-bottom: 14px;
}

.vt-tl-composer-top {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.vt-tl-avatar img,
.vt-tl-post-avatar img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    background: var(--tl-line-soft);
}

.vt-tl-composer textarea {
    flex: 1;
    min-height: 56px;
    max-height: 420px;
    padding: 10px 0 6px;
    border: 0;
    outline: none;
    resize: none;
    overflow: hidden;
    background: transparent;
    color: var(--tl-text);
    font-size: 1.6rem;
    line-height: 1.7;
    font-family: inherit;
}

.vt-tl-composer textarea::placeholder {
    color: var(--tl-faint);
}

/* ---- 添付欄（チップで開閉） ---- */
.vt-tl-attach:not(:empty) {
    margin: 4px 0 0 56px;
}

.vt-tl-attach-row[hidden],
.vt-tl-assist[hidden] {
    display: none !important;
}

.vt-tl-attach-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-top: 1px solid var(--tl-line-soft);
}

.vt-tl-attach-row label {
    flex: 0 0 78px;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--tl-muted);
}

.vt-tl-attach-row input[type="text"] {
    flex: 1;
    min-width: 0;
    padding: 8px 10px;
    font-size: 1.3rem;
    color: var(--tl-text);
    background: var(--tl-page);
    border: 1px solid var(--tl-line);
    border-radius: 8px;
}

.vt-tl-attach-row input[type="text"]:focus {
    outline: none;
    border-color: var(--tl-brand);
    background: #fff;
    box-shadow: 0 0 0 3px var(--tl-brand-soft);
}

.vt-tl-attach-row input[type="file"] {
    font-size: 1.2rem;
    color: var(--tl-muted);
    min-width: 0;
}

.vt-tl-assist {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 10px 0 4px;
}

.vt-tl-assist-btn {
    padding: 9px 16px;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background: var(--tl-brand);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: background .15s;
}

.vt-tl-assist-btn:hover:not(:disabled) { background: var(--tl-brand-ink); }
.vt-tl-assist-btn:disabled { opacity: .5; cursor: wait; }

/* ---- トピック選択チップ ---- */
.vt-tl-topics {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--tl-line-soft);
}

.vt-tl-topics-label {
    display: block;
    margin-bottom: 7px;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--tl-muted);
}

.vt-tl-topics-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.vt-tl-topic-chip input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.vt-tl-topic-chip span {
    display: inline-block;
    padding: 6px 12px;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--tl-muted);
    background: var(--tl-page);
    border: 1px solid var(--tl-line);
    border-radius: 999px;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}

.vt-tl-topic-chip span:hover { background: #eef2f6; }

.vt-tl-topic-chip input:checked + span {
    color: #fff;
    background: var(--tl-brand);
    border-color: var(--tl-brand);
}

.vt-tl-topic-chip input:focus-visible + span {
    outline: 2px solid var(--tl-brand);
    outline-offset: 2px;
}

.vt-tl-topic-chip.is-auto input:checked + span {
    background: var(--tl-brand-ink);
    border-color: var(--tl-brand-ink);
}

/* ---- トピック別アーカイブの見出し ---- */
.vt-tl-topic-head {
    padding: 20px 20px 18px;
    background: var(--tl-surface);
    border: 1px solid var(--tl-line);
    border-radius: var(--tl-radius);
    box-shadow: var(--tl-shadow);
}

.vt-tl-topic-eyebrow {
    margin: 0 0 4px;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--tl-brand);
}

.vt-tl-topic-name {
    margin: 0;
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--tl-text);
}

.vt-tl-topic-desc {
    margin: 8px 0 0;
    font-size: 1.35rem;
    line-height: 1.85;
    color: var(--tl-muted);
}

.vt-tl-topic-count {
    margin: 10px 0 0;
    font-size: 1.2rem;
    color: var(--tl-faint);
}

/* ---- ツールバー ---- */
.vt-tl-composer-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--tl-line-soft);
}

.vt-tl-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.vt-tl-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 12px;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
    color: var(--tl-muted);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.vt-tl-chip:hover { background: var(--tl-hover); }

.vt-tl-chip[aria-pressed="true"] {
    color: var(--tl-brand);
    background: var(--tl-brand-soft);
    border-color: #cfe0f6;
}

.vt-tl-submit {
    flex: 0 0 auto;
    padding: 10px 24px;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .04em;
    color: #fff;
    background: var(--tl-brand);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: background .15s;
}

.vt-tl-submit:hover { background: var(--tl-brand-ink); }

/* ==================================================================
 * 投稿カード
 * ================================================================== */
.vt-tl-post {
    padding: 18px 20px 12px;
    transition: border-color .15s;
}

.vt-tl-post:hover { border-color: #d3dce6; }

.vt-tl-post-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.vt-tl-post-id {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.vt-tl-post-name {
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--tl-text);
    line-height: 1.3;
}

.vt-tl-post-time {
    font-size: 1.2rem;
    color: var(--tl-faint);
    line-height: 1.3;
}

/* ---- 本文 ---- */
.vt-tl-body {
    margin-top: 12px;
    font-size: 1.55rem;
    line-height: 1.95;
    color: var(--tl-text);
    overflow-wrap: anywhere;
}

.vt-tl-body p { margin: 0 0 1.2em; }
.vt-tl-body p:last-child { margin-bottom: 0; }

.vt-tl-body a {
    color: var(--tl-brand);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ---- メディア ---- */
.vt-tl-media {
    margin: 14px 0 0;
}

.vt-tl-media--img img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
    border: 1px solid var(--tl-line);
}

/* ---- YouTube（ショート＝縦動画が既定） ----------------------------
 * 以前は「親を overflow:hidden + border-radius にして iframe を絶対配置」
 * という構造だったが、iOS でタップ判定が iframe とずれて再生できない
 * 症状が出るため、絶対配置と overflow を廃止し、
 * iframe 自身に比率と角丸を持たせている。
 * ------------------------------------------------------------------ */
.vt-tl-media--yt {
    width: min(100%, 400px);
    margin: 14px auto 0;
}

.vt-tl-media--yt iframe {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 9 / 16;
    border: 1px solid var(--tl-line);
    border-radius: 12px;
    background: #000;
}

/* 横動画を混ぜる場合（vt_timeline_youtube_orientation フィルタ） */
.vt-tl-media--yt.is-landscape {
    width: 100%;
    max-width: none;
}

.vt-tl-media--yt.is-landscape iframe {
    aspect-ratio: 16 / 9;
}

/* aspect-ratio 非対応の古い環境向けの保険 */
@supports not (aspect-ratio: 9 / 16) {
    .vt-tl-media--yt iframe { height: 676px; }
    .vt-tl-media--yt.is-landscape iframe { height: 340px; }
}

/* ---- フッター ---- */
.vt-tl-post-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--tl-line-soft);
}

.vt-tl-permalink {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px 6px 10px;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--tl-brand);
    border-radius: 999px;
    text-decoration: none;
    transition: background .15s;
}

.vt-tl-permalink:hover { background: var(--tl-brand-soft); }

.vt-tl-post-foot form { margin: 0; }

.vt-tl-icon-btn {
    width: 32px;
    height: 32px;
    display: inline-grid;
    place-items: center;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--tl-faint);
    background: transparent;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.vt-tl-icon-btn:hover { background: #fdecea; color: #d63638; }

.vt-tl-edit {
    padding: 6px 14px;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--tl-muted);
    background: transparent;
    border: 1px solid var(--tl-line);
    border-radius: 999px;
    cursor: pointer;
    transition: background .15s;
}

.vt-tl-edit:hover { background: var(--tl-hover); }

.vt-tl-editarea {
    width: 100%;
    min-height: 180px;
    margin-top: 12px;
    padding: 12px;
    font-size: 1.5rem;
    line-height: 1.9;
    font-family: inherit;
    color: var(--tl-text);
    border: 1px solid var(--tl-line);
    border-radius: 10px;
    resize: vertical;
}

.vt-tl-save {
    margin-top: 10px;
    padding: 9px 20px;
    font-size: 1.3rem;
    font-weight: 700;
    color: #fff;
    background: var(--tl-brand);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
}

.vt-tl-empty {
    padding: 40px 20px;
    text-align: center;
    font-size: 1.4rem;
    color: var(--tl-muted);
}

/* ==================================================================
 * サイドバー
 * ================================================================== */
.vt-tl-side {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 14px;
}

@media screen and (min-width: 900px) {
    .vt-tl-side { margin-top: 0; }
}

.vt-tl-card { padding: 15px 4px 6px; }

.vt-tl-card-ttl {
    margin: 0 0 4px;
    padding: 0 14px;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--tl-text);
    line-height: 1.5;
}

.vt-tl-rank-list,
.vt-tl-col-list,
.vt-tl-ins-grid,
.vt-tl-topic-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ---- トピックから探す ---- */
.vt-tl-topic-item a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 14px;
    text-decoration: none;
    color: inherit;
    transition: background .15s;
}

.vt-tl-topic-item a:hover { background: var(--tl-hover); }

.vt-tl-topic-item.is-current a {
    background: var(--tl-brand-soft);
}

.vt-tl-topic-item-name {
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--tl-text);
}

.vt-tl-topic-item.is-current .vt-tl-topic-item-name { color: var(--tl-brand); }

.vt-tl-topic-item-count {
    flex: 0 0 auto;
    min-width: 26px;
    padding: 2px 7px;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--tl-muted);
    background: var(--tl-page);
    border-radius: 999px;
}

.vt-tl-card-more {
    display: block;
    margin: 4px 6px 6px;
    padding: 9px 8px;
    text-align: center;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--tl-brand);
    text-decoration: none;
    border-radius: 8px;
    transition: background .15s;
}

.vt-tl-card-more:hover { background: var(--tl-brand-soft); }

/* ---- よく読まれている投稿 ---- */
.vt-tl-rank a {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 10px 14px;
    text-decoration: none;
    color: inherit;
    transition: background .15s;
}

.vt-tl-rank a:hover { background: var(--tl-hover); }

.vt-tl-rank-num {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    display: grid;
    place-items: center;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1;
    color: var(--tl-brand);
    background: var(--tl-brand-soft);
    border-radius: 6px;
}

.vt-tl-rank:first-child .vt-tl-rank-num {
    color: #fff;
    background: var(--tl-brand);
}

.vt-tl-rank-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.vt-tl-rank-txt {
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.65;
    color: var(--tl-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.vt-tl-rank-meta {
    font-size: 1.1rem;
    color: var(--tl-faint);
}

/* ---- 関連コラム ---- */
.vt-tl-col a {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 14px;
    text-decoration: none;
    transition: background .15s;
}

.vt-tl-col a:hover { background: var(--tl-hover); }

.vt-tl-col-cat {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--tl-brand);
}

.vt-tl-col-ttl-txt {
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.65;
    color: var(--tl-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---- インストラクター（コンパクトなグリッド） ---- */
.vt-tl-ins-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    padding: 2px 8px 0;
}

.vt-tl-ins a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 10px 4px;
    text-align: center;
    text-decoration: none;
    color: inherit;
    border-radius: 10px;
    transition: background .15s;
}

.vt-tl-ins a:hover { background: var(--tl-hover); }

.vt-tl-ins-img {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--tl-line-soft);
}

.vt-tl-ins-name {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--tl-text);
    letter-spacing: -.01em;
}

.vt-tl-ins-meta {
    font-size: 1.05rem;
    color: var(--tl-faint);
    line-height: 1.3;
}

/* ==================================================================
 * ページネーション（WP-PageNavi）
 * ================================================================== */
.timeline .wp-pagenavi {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 14px;
    border: 0;
    font-size: 1.3rem;
}

.timeline .wp-pagenavi a,
.timeline .wp-pagenavi span {
    min-width: 36px;
    height: 36px;
    display: inline-grid;
    place-items: center;
    padding: 0 10px;
    border: 1px solid var(--tl-line);
    border-radius: 8px;
    background: var(--tl-surface);
    color: var(--tl-muted);
    text-decoration: none;
    transition: background .15s, color .15s;
}

.timeline .wp-pagenavi a:hover {
    background: var(--tl-brand-soft);
    color: var(--tl-brand);
    border-color: #cfe0f6;
}

.timeline .wp-pagenavi span.current {
    background: var(--tl-brand);
    border-color: var(--tl-brand);
    color: #fff;
    font-weight: 700;
}

/* ==================================================================
 * スマホ
 * ================================================================== */
@media screen and (max-width: 899px) {
    .timeline { padding: 16px 0 56px; }
    .timeline .timeline-inner { padding: 0 12px; }

    .vt-tl-composer { padding: 14px 14px 10px; }
    .vt-tl-post { padding: 16px 14px 10px; }

    .vt-tl-attach:not(:empty) { margin-left: 0; }

    .vt-tl-composer-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .vt-tl-submit { width: 100%; }

    .vt-tl-body { font-size: 1.5rem; line-height: 1.9; }
}

@media (prefers-reduced-motion: reduce) {
    .vt-tl-chip,
    .vt-tl-submit,
    .vt-tl-post,
    .vt-tl-ins a,
    .vt-tl-col a { transition: none; }
}