/* ===========================================================
   個人ブログ 共通スタイル
   デザイン: 紙質感ミニマル / 明朝見出し × ゴシック本文
   =========================================================== */
:root{
  --paper:#faf8f4;
  --ink:#26231f;
  --muted:#7c756b;
  --line:#e7e0d5;
  --accent:#b5502f;      /* テラコッタ */
  --accent-ink:#8f3d21;
  --accent-soft:#f4e9e1;
  --card:#ffffff;
  --code-bg:#f5f0e8;
  --maxw:720px;
  --serif:"Hiragino Mincho ProN","Yu Mincho",YuMincho,"Noto Serif JP",serif;
  --sans:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  line-height:1.85;
  font-size:16.5px;
  /* ごく淡い紙の質感 */
  background-image:radial-gradient(rgba(139,120,94,.035) 1px,transparent 1px);
  background-size:22px 22px;
}
a{color:var(--accent-ink);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}

/* ---- ヘッダー ---- */
.site-header{border-bottom:1px solid var(--line);background:rgba(250,248,244,.85);backdrop-filter:saturate(1.1) blur(4px);position:sticky;top:0;z-index:5}
.site-header .wrap{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:15px 20px;flex-wrap:wrap}
.site-title{font-family:var(--serif);font-size:1.32rem;font-weight:600;letter-spacing:.02em;color:var(--ink)}
.site-title:hover{text-decoration:none;color:var(--accent-ink)}
.site-nav{display:flex;gap:18px;font-size:.92rem}
.site-nav a{color:var(--muted)}
.site-nav a:hover{color:var(--accent-ink);text-decoration:none}

/* ---- 共通の間隔 ---- */
main{padding:38px 0 10px}

/* ---- ブログ トップ ---- */
.intro{margin:6px 0 34px}
.intro h1{font-family:var(--serif);font-size:2rem;line-height:1.35;margin:0 0 12px;font-weight:600}
.intro p{color:var(--muted);margin:0;max-width:46ch}
.author{display:flex;align-items:center;gap:12px;margin:22px 0 0}
.avatar{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#c8724f,#8f3d21);color:#fff;display:grid;place-items:center;font-family:var(--serif);font-size:1.1rem;flex:none}
.author .who{font-size:.9rem;line-height:1.5}
.author .who b{font-weight:600}
.author .who span{color:var(--muted);display:block}

.section-label{font-size:.8rem;letter-spacing:.16em;color:var(--muted);text-transform:uppercase;border-bottom:1px solid var(--line);padding-bottom:8px;margin:0 0 6px}

/* 記事リスト */
.posts{list-style:none;margin:0;padding:0}
.post-item{padding:22px 0;border-bottom:1px solid var(--line)}
.post-item:last-child{border-bottom:0}
.post-item time{font-size:.82rem;color:var(--muted);letter-spacing:.04em}
.post-item h2{font-family:var(--serif);font-size:1.34rem;line-height:1.45;margin:6px 0 8px;font-weight:600}
.post-item h2 a{color:var(--ink)}
.post-item h2 a:hover{color:var(--accent-ink);text-decoration:none}
.post-item p{margin:0 0 12px;color:#4c463d}
.tags{display:flex;flex-wrap:wrap;gap:7px;margin:2px 0 12px}
.tag{font-size:.76rem;color:var(--accent-ink);background:var(--accent-soft);border-radius:999px;padding:3px 11px}
.readmore{font-size:.9rem;font-weight:600;color:var(--accent-ink)}
.readmore::after{content:" →"}

/* ---- 記事ページ ---- */
article.post{background:transparent}
.post-head{margin:2px 0 26px}
.post-head time{font-size:.84rem;color:var(--muted);letter-spacing:.04em}
.post-head h1{font-family:var(--serif);font-size:2rem;line-height:1.4;margin:8px 0 12px;font-weight:600}
.post-body{font-size:1.02rem}
.post-body h2{font-family:var(--serif);font-size:1.4rem;margin:36px 0 12px;padding-bottom:6px;border-bottom:1px solid var(--line);font-weight:600}
.post-body h3{font-size:1.08rem;margin:26px 0 6px;font-weight:600}
.post-body p{margin:0 0 16px}
.post-body strong,.post-body b{color:var(--accent-ink);font-weight:600}
.post-body ul{padding-left:1.3em;margin:6px 0 18px}
.post-body ul li{margin:0 0 8px}
.post-body blockquote{margin:18px 0;padding:12px 18px;border-left:4px solid var(--accent);background:var(--accent-soft);border-radius:0 8px 8px 0;color:#5a4c40}
.post-body blockquote p{margin:0}

/* インラインコード */
.post-body code{font-family:var(--mono);font-size:.9em;background:var(--code-bg);border:1px solid var(--line);border-radius:5px;padding:.08em .4em}
/* コードブロック */
.code-label{font-size:.82rem;color:var(--muted);font-weight:600;margin:16px 0 4px}
pre.code{background:#2b2622;color:#efe7dc;border-radius:10px;padding:15px 17px;margin:6px 0 6px;overflow-x:auto;font-family:var(--mono);font-size:.84rem;line-height:1.65}
pre.code code{all:unset;font-family:var(--mono)}
pre.code .k{color:#e0a06a}
pre.code .s{color:#c9d98a}

/* CTA / サービスリンク */
.servicebar{display:block;border:1px solid var(--line);background:var(--card);border-radius:12px;padding:16px 18px;margin:22px 0 6px;box-shadow:0 1px 0 rgba(0,0,0,.02)}
.servicebar:hover{border-color:var(--accent);text-decoration:none;box-shadow:0 4px 18px rgba(143,61,33,.08)}
.servicebar .t{font-weight:600;color:var(--accent-ink)}
.servicebar .t::after{content:" ↗";font-size:.9em}
.servicebar small{display:block;color:var(--muted);font-size:.85rem;margin-top:5px;line-height:1.6}

.backrow{margin:34px 0 40px}
.backrow a{font-size:.92rem}
.backrow a::before{content:"← "}

/* ---- フッター ---- */
.site-footer{border-top:1px solid var(--line);color:var(--muted);font-size:.84rem;padding:26px 0 40px}
.site-footer .wrap{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}

@media(max-width:520px){
  body{font-size:16px}
  .intro h1{font-size:1.66rem}
  .post-head h1{font-size:1.62rem}
  .post-body h2{font-size:1.24rem}
}