/* =========================
全体
========================= */

body{
    background:#f6f7fb;
}

.public-diary-container{
    max-width:720px;
    margin:0 auto;
    padding:16px;
}

/* =========================
タイトル
========================= */

.page-title{
    font-size:24px;
    font-weight:700;
    margin-bottom:20px;
    color:#222;
}

/* =========================
カード
========================= */

.diary-card{

    background:#fff;

    border-radius:18px;

    padding:18px;

    margin-bottom:16px;

    box-shadow:
        0 4px 18px rgba(0,0,0,0.05);

    transition:.2s;
}

.diary-card:hover{
    transform:translateY(-2px);
}

/* =========================
ヘッダー
========================= */

.diary-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:10px;
}

.author-link{

    text-decoration:none;

    color:#ff4d6d;

    font-weight:700;

    font-size:14px;
}

.diary-date{

    font-size:12px;

    color:#999;
}

/* =========================
タイトル
========================= */

.diary-title{

    display:block;

    font-size:20px;

    font-weight:700;

    color:#222;

    text-decoration:none;

    margin-bottom:12px;

    line-height:1.4;
}

/* =========================
本文
========================= */

.diary-body{

    font-size:14px;

    line-height:1.8;

    color:#555;

    word-break:break-word;
}

/* =========================
フッター
========================= */

.diary-footer{

    margin-top:14px;

    display:flex;

    gap:18px;

    font-size:13px;

    color:#777;
}

/* =========================
空
========================= */

.empty-state{

    text-align:center;

    color:#999;

    padding:40px 20px;
}

/* =========================
スマホ
========================= */

@media (max-width:768px){

    .public-diary-container{
        padding:10px;
    }

    .diary-card{
        padding:14px;
    }

    .diary-title{
        font-size:18px;
    }
}

/* =========================
   投稿者情報（称号＋名前）
========================= */

.author-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
}

.author-info .user-spirit-title {
    display: block;
    margin-bottom: 0;
}

.author-info .author-link {
    display: block;
}