/* nbwy Weblog 用（style.css の上に重ねる） */

/* 記事を1件ずつ枠で囲む（nbwyのメモ欄・引用と同じ影） */
.blog-post{
    margin:0 0 2em 0;
    padding:1.5em 1.8em;
    background:#fff;
    box-shadow:1px 1px 3px -1px #888;
}

@media screen and (max-width:580px){
    .blog-post{
        padding:1.2em 1em;
    }
}

/* ---- 検索 ---- */
.blog-search{
    margin:0;
    width:100%;
    max-width:14rem;
}

.blog-search input{
    flex:1;
    min-width:0;
    border:0;
    background:transparent;
    font:inherit;
    font-size:85%;
    color:#444;
    padding:2px 0;
    outline:none;
}

.blog-search button{
    border:0;
    background:transparent;
    color:#0073a8;
    font-size:110%;
    cursor:pointer;
    padding:0 2px;
    line-height:1;
}

.blog-search button:hover{
    opacity:.7;
}

.blog-title{
    font-size:130%;
    margin:0 0 4px 0;
    font-weight:600;
}

.blog-title a{
    text-decoration:none;
}

.blog-date{
    font-family:'Cinzel','Zen Old Mincho',serif;
    font-size:80%;
    letter-spacing:1px;
    color:#444;
    margin-bottom:1.2em;
}

.blog-body{
    line-height:1.8;
    overflow-wrap:anywhere;
}

.blog-body img{
    display:block;
    margin:10px 0;
    box-shadow:1px 1px 3px -1px #888;
}

.blog-meta{
    font-size:80%;
    color:#666;
    margin-top:1.5em;
    display:flex;
    flex-wrap:wrap;
    gap:4px 1.5em;
}

.blog-meta a{
    margin-right:8px;
}

.blog-empty{
    text-align:center;
    color:#888;
    font-size:90%;
}

.blog-pager{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:1em;
    margin:0 0 3em 0;
    font-size:90%;
}

.blog-pager span:last-child{
    text-align:right;
}

.blog-pagenum{
    color:#888;
    font-family:'Cinzel','Zen Old Mincho',serif;
    font-size:85%;
}

/* ---- 本文と横の欄（PCは横並び、スマホは下に回る） ---- */
.blog-layout{
    max-width:70rem;
    margin:0 auto;
}

.blog-main{
    min-width:0;
}

.blog-filter{
    font-size:90%;
    color:#666;
    margin:0 0 2.5em 0;
    padding-bottom:8px;
    border-bottom:1px solid #eee;
}

.blog-side{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));
    gap:2em 3em;
    margin:2em 10px 0 10px;
    padding-top:2em;
    border-top:1px solid #ddd;
    font-size:90%;
}

@media screen and (min-width:900px){
    .blog-layout{
        display:grid;
        grid-template-columns:minmax(0,1fr) 16rem;
        gap:3em;
        align-items:start;
        padding:0 10px;
    }
    .blog-main{
        margin:0;
        width:100%;
    }
    .blog-side{
        grid-template-columns:1fr;
        margin:5px 0 0 0;
        padding:0 0 0 2em;
        border-top:0;
        border-left:1px solid #ddd;
        position:sticky;
        top:20px;
    }
}

.blog-side h5{
    margin:0 0 10px 0;
    letter-spacing:1px;
}

.blog-calhead{
    display:flex;
    justify-content:space-between;
    align-items:center;
    max-width:16rem;
    font-family:'Cinzel','Zen Old Mincho',serif;
    margin-bottom:4px;
}

.blog-calhead a{
    text-decoration:none;
    padding:0 10px;
}

.blog-cal{
    border-collapse:collapse;
    width:100%;
    max-width:16rem;
    text-align:center;
    font-size:90%;
}

.blog-cal th{
    font-weight:normal;
    color:#888;
    padding:3px 0;
}

.blog-cal td{
    padding:3px 0;
    color:#aaa;
}

.blog-cal td a{
    color:#444;
    font-weight:bold;
}

.blog-cal td.today{
    outline:1px solid #cfd8e3;
    outline-offset:-2px;
}

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

.blog-list li{
    margin:0;
    padding:2px 0;
}

.blog-side details{
    margin-bottom:6px;
}

.blog-side summary{
    cursor:pointer;
    font-family:'Cinzel','Zen Old Mincho',serif;
}

.blog-side details .blog-list{
    padding-left:1.2em;
}

.blog-tags a{
    display:inline-block;
    margin:0 10px 6px 0;
}