/* --- 基本設定 --- */
:root {
    --bg: #f8f9fa;
    --text: #2c3e50;
    --sub-text: #7f8c8d;
    --accent: #5d6d7e;
    --white: #ffffff;
    --border: #dcdde1;
}

body {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    background-color: var(--bg);
    /* 控えめな方眼模様 */
    background-image: radial-gradient(#e0e0e0 1px, transparent 1px);
    background-size: 24px 24px;
    color: var(--text);
    margin: 0;
    line-height: 1.7;
}

a { text-decoration: none; color: inherit; transition: 0.3s; }
a:hover { color: var(--accent); }

/* --- ヘッダー --- */
header {
    background: var(--white);
    border-bottom: 1px solid var(--border);
    padding: 50px 20px;
    text-align: center;
}
.site-title { 
    margin: 0; 
    font-size: 28px; 
    font-weight: 300;
    letter-spacing: 0.1em; 
}
.site-url { 
    margin: 8px 0 0; 
    color: #bdc3c7; 
    font-size: 13px; 
    font-family: serif;
}

/* --- レイアウト --- */
.container {
    display: flex;
    max-width: 900px; /* 少し狭めて集中しやすく */
    margin: 40px auto;
    padding: 0 20px;
    gap: 30px;
}
main { flex: 1; min-width: 0; }
aside { width: 240px; }

/* --- 記事カード --- */
.article-card {
    background: var(--white);
    padding: 35px;
    border-radius: 4px; /* 角丸を控えめに */
    border: 1px solid var(--border);
    margin-bottom: 30px;
}
.entry-meta { 
    margin-bottom: 12px; 
    font-size: 12px; 
    color: var(--sub-text); 
}
.entry-title { 
    margin: 0 0 15px; 
    font-size: 22px; 
    font-weight: bold;
    color: var(--text);
}
.entry-content { font-size: 15px; }
.entry-content img { 
    max-width: 100%; 
    height: auto; 
    border-radius: 4px; 
    margin: 20px 0; 
    cursor: zoom-in;
}

/* --- サイドバー・ウィジェット --- */
.widget {
    background: var(--white);
    padding: 20px;
    border-radius: 4px;
    margin-bottom: 20px;
    border: 1px solid var(--border);
}

.widget-title {
    font-size: 12px;
    color: var(--sub-text);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 15px;
    border-bottom: 1px solid var(--bg);
    padding-bottom: 5px;
}

/* 検索窓 */
#search-input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg);
    font-size: 13px;
    box-sizing: border-box;
}

/* プロフィール（アイコン固定） */
.profile {
    text-align: center;
}
.icon-img {
    width: 80px;         /* 80pxに固定 */
    height: 80px;        /* 80pxに固定 */
    border-radius: 50%;  /* 正円 */
    object-fit: cover;
    border: 1px solid var(--border);
    margin-bottom: 12px;
    display: inline-block;
}
.profile-name { font-size: 15px; font-weight: bold; margin: 0; }
.profile-bio { 
    font-size: 12px; 
    color: var(--sub-text); 
    margin: 8px 0 0; 
    line-height: 1.6; 
}

/* タグ（チップ形式） */
.tag-list-container {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 0;
    margin: 0;
    list-style: none;
}
.tag {
    font-size: 11px;
    padding: 3px 8px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 3px;
    cursor: pointer;
}
.tag:hover, .tag.active {
    background: var(--accent);
    color: var(--white);
}

/* --- フッター --- */
footer {
    text-align: center;
    padding: 40px;
    color: #bdc3c7;
    font-size: 11px;
}

/* --- スマホ対応 --- */
@media (max-width: 768px) {
    .container { flex-direction: column; }
    aside { width: 100%; }
    .article-card { padding: 25px 20px; }
}