/* =========================
   Hatena Blog – Monochrome Layered Dark
   Sidebar Layout / Engineer Style
   ========================= */

:root{
  /* ---- black tone palette ---- */
  --black-1:#0d0d0f;   /* ページ最背面 */
  --black-2:#121214;   /* 全体ベース */
  --black-3:#17171a;   /* メインカード */
  --black-4:#1f1f23;   /* サイドバー */
  --black-5:#26262b;   /* ホバー・軽い強調 */

  --text-main:#e8e8ea;
  --text-sub:#a5a5ad;
  --line:#2c2c31;

  --accent:#ffffff;

  --radius:14px;
  --shadow:0 25px 60px rgba(0,0,0,.55);
  --max:1100px;

  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    "Hiragino Sans", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* ================= BASE ================= */

body{
  background:
    radial-gradient(1200px 800px at 10% -10%, rgba(255,255,255,.04), transparent 60%),
    var(--black-1);
  color:var(--text-main);
  font-family:var(--font-sans);
  line-height:1.85;
  letter-spacing:.01em;
}

a{
  color:var(--text-main);
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.25);
}
a:hover{ border-bottom-color:#fff; }

#wrapper, #container{
  max-width:var(--max);
  margin:0 auto;
  padding:0 20px;
}

/* ================= HEADER ================= */

#blog-title{
  padding:40px 0 20px;
  border-bottom:1px solid var(--line);
}
#blog-title h1{
  font-size:28px;
  letter-spacing:.04em;
  margin:0;
}
#blog-description{
  margin-top:6px;
  color:var(--text-sub);
  font-size:14px;
}

/* ================= LAYOUT ================= */

/* ===== safer 2-column layout (Hatena theme differences friendly) ===== */

/* まず既存テーマのレイアウトを尊重しつつ、2カラム時だけ整える */
#content, #content-inner, .content-inner{
  margin-top:28px;
}

/* 主要カラムに幅指定（テーマがfloatでもflexでも効くように） */
#main{
  box-sizing:border-box;
  width:auto;
  min-width:0;
}

/* サイドバーが存在するテーマ向け */
#box2, #sidebar{
  box-sizing:border-box;
  min-width:260px;
}

/* 「2カラムだけ flex にしたい」場合：存在しがちな内側ラッパーに適用 */
#content-inner{
  display:flex;
  gap:32px;
  align-items:flex-start;
}

/* もし #content-inner が無い/違う場合でも崩れにくいように保険 */
#content:has(#box2){
  display:flex;
  gap:32px;
  align-items:flex-start;
}

/* 比率 */
#content-inner #main, #content #main{
  flex: 1.7;
}
#content-inner #box2, #content #box2,
#content-inner #sidebar, #content #sidebar{
  flex: 1;
}


/* MAIN COLUMN */
#main{
  flex:1.7;
  background:var(--black-3);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:28px 26px;
  box-shadow:var(--shadow);
}

/* SIDEBAR */
#box2{
  flex:1;
}
.hatena-module{
  background:var(--black-4);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px 18px;
  margin-bottom:18px;
}
.hatena-module-title{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--text-sub);
  margin-bottom:12px;
}

/* ================= ENTRIES ================= */

.entry{
  padding:28px 0;
  border-bottom:1px solid var(--line);
}
.entry:last-child{ border-bottom:none; }

.entry-title{
  font-size:22px;
  margin-bottom:10px;
}
.entry-date{
  font-size:13px;
  color:var(--text-sub);
}

/* ================= ARTICLE CONTENT ================= */

.entry-content h2{
  font-size:20px;
  margin:36px 0 14px;
  padding-top:14px;
  border-top:1px solid var(--line);
}

.entry-content h3{
  font-size:17px;
  margin:26px 0 10px;
  color:#fff;
}

.entry-content p{
  margin:14px 0;
  color:rgba(255,255,255,.92);
}

/* ================= CODE ================= */

code{
  background:var(--black-5);
  padding:.2em .4em;
  border-radius:8px;
  font-family:var(--font-mono);
  border:1px solid rgba(255,255,255,.08);
}

pre{
  background:#0a0a0c;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px;
  overflow:auto;
  line-height:1.65;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);
}
pre code{
  background:none;
  border:none;
  padding:0;
}

/* ================= BLOCKQUOTE ================= */

blockquote{
  background:var(--black-5);
  border-left:3px solid rgba(255,255,255,.6);
  padding:14px 16px;
  margin:18px 0;
  border-radius:10px;
  color:var(--text-sub);
}

/* ================= TABLE ================= */

table{
  width:100%;
  border-collapse:collapse;
  margin:20px 0;
  font-size:14px;
}
th, td{
  border:1px solid var(--line);
  padding:10px;
}
th{ background:var(--black-5); }

/* ================= PAGER ================= */

.pager a{
  display:inline-block;
  padding:10px 14px;
  background:var(--black-4);
  border-radius:999px;
  border:1px solid var(--line);
  margin-right:6px;
}
.pager a:hover{ background:var(--black-5); }

/* ================= FOOTER ================= */

#footer{
  margin:40px 0;
  padding-top:20px;
  border-top:1px solid var(--line);
  color:var(--text-sub);
  font-size:13px;
}

/* ================= MOBILE ================= */

/* モバイルでは縦積み */
@media (max-width:900px){
  #content-inner, #content:has(#box2){
    flex-direction:column;
  }
  #box2, #sidebar{
    min-width:0;
  }
}