/*
 * こよみの更新履歴（/studio-crm/updates/）。
 * 読み物なので crm-log と同じ「装飾は最小・本文優先」の方針に揃える。
 * 版が増えるほど縦に伸びるページなので、要約だけを目で追える形を最優先にした。
 */

.kylog {
    --kylog-rule: rgba(255, 255, 255, 0.1);
    --kylog-measure: 34em;
}

/* .panel は grid。子の min-width:auto が効くと横に広がるので下限を外す（crm-log と同じ） */
.kylog > .content.narrow {
    min-width: 0;
}

/* ---------- 見出し ---------- */

.kylog-head h1 {
    line-height: 1.45;
}

.kylog-meta {
    margin-top: 20px;
    font-family: var(--font-en);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    color: var(--muted);
}

/* ---------- 本文 ---------- */

.kylog-body {
    max-width: var(--kylog-measure);
    margin: 72px auto 0;
}

.kylog-rel + .kylog-rel {
    margin-top: 56px;
    padding-top: 56px;
    border-top: 1px solid var(--kylog-rule);
}

/* ---------- 版の見出し ---------- */

.kylog-ver {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin: 0 0 10px;
    font-family: var(--font-en);
    letter-spacing: 0.08em;
}

.kylog-num {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--brand);
}

.kylog-ver time {
    font-size: 0.78rem;
    color: var(--muted);
}

/* 版ごとの1行要約。ここだけを縦に追えば更新の密度が分かる */
.kylog-summary {
    margin: 0;
    font-size: 1.06rem;
    line-height: 1.85;
    font-weight: 600;
}

/* ---------- 1件 ---------- */

.kylog-item {
    margin-top: 28px;
}

.kylog-item h2 {
    margin: 0 0 8px;
    font-size: 0.98rem;
    line-height: 1.75;
    font-weight: 600;
}

.kylog-item p {
    margin: 0 0 10px;
    font-size: 0.93rem;
    line-height: 2;
    color: var(--muted);
}

.kylog-item p:last-child {
    margin-bottom: 0;
}

/* ---------- ラベル ---------- */

.kylog-label {
    display: inline-block;
    margin-right: 8px;
    padding: 2px 9px;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.7;
    vertical-align: 0.12em;
    white-space: nowrap;
}

.kylog-label--new {
    color: var(--brand);
}

.kylog-label--better {
    color: #8fb3c9;
}

.kylog-label--fix {
    color: #b9a0c9;
}

/* ---------- 最初の版の一覧 ---------- */

.kylog-list {
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}

.kylog-list li {
    padding: 12px 0;
    border-top: 1px solid var(--kylog-rule);
    font-size: 0.9rem;
    line-height: 1.95;
    color: var(--muted);
}

.kylog-list li strong {
    display: block;
    color: var(--text);
    font-weight: 600;
}

/* ---------- 戻り導線 ---------- */

.kylog-back {
    max-width: var(--kylog-measure);
    margin: 56px auto 0;
    padding-top: 28px;
    border-top: 1px solid var(--kylog-rule);
    font-size: 0.88rem;
}

/* テーマに素の a の色指定が無いので、ここで当てる（crm-log と同じ扱い） */
.kylog-back a,
.kylog-item a {
    color: var(--brand);
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
}

.kylog-back a:hover,
.kylog-back a:focus-visible,
.kylog-item a:hover,
.kylog-item a:focus-visible {
    color: var(--brand-hover);
}

@media (max-width: 600px) {
    .kylog-body {
        margin-top: 48px;
    }

    .kylog-rel + .kylog-rel {
        margin-top: 40px;
        padding-top: 40px;
    }

    .kylog-summary {
        font-size: 1rem;
    }

    /* ラベルが見出しの途中で折り返すと読みにくいので、行を分ける */
    .kylog-label {
        display: block;
        width: fit-content;
        margin: 0 0 6px;
        vertical-align: baseline;
    }
}