/* preview.css: Pandoc HTML を “Markdownプレビュー風” に寄せる */

/* 1) ベース */
:root{
  --bg:#ffffff;
  --text:#24292f;
  --muted:#57606a;
  --border:#d0d7de;
  --codebg:#f6f8fa;
  --link:#0969da;

  --tip-bg:#e7f3ff;
  --tip-border:#54aeff;

  --warn-bg:#fff8c5;
  --warn-border:#d4a72c;

  --callout-bg:#f6f8fa;
  --callout-border:#d0d7de;
}

html, body{
  background:var(--bg);
  color:var(--text);
  margin:0;
  padding:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic",Meiryo,sans-serif;
  line-height:1.75;
  word-break:break-word;
}

/* 2) 余白と幅（Markdownプレビューの“読みやすい幅”） */
main, article, body > *:first-child{
  max-width: 980px;
  margin: 0 auto;
  padding: 28px 20px 60px;
}

/* 3) 見出し */
h1,h2,h3,h4{
  line-height:1.25;
  margin: 1.6em 0 0.6em;
}
h1{ font-size: 2rem; border-bottom:1px solid var(--border); padding-bottom:.3em; }
h2{ font-size: 1.5rem; border-bottom:1px solid var(--border); padding-bottom:.25em; }
h3{ font-size: 1.2rem; }
h4{ font-size: 1.05rem; color:var(--muted); }

/* 4) 段落・リスト */
p{ margin: 0.8em 0; }
ul,ol{ padding-left: 1.4em; }
li{ margin: .35em 0; }

/* 5) リンク */
a{ color:var(--link); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* 6) 引用 */
blockquote{
  margin: 1em 0;
  padding: .5em 1em;
  border-left: .25em solid var(--border);
  color: var(--muted);
  background: #fcfcfd;
}

/* 7) 横線 */
hr{
  border:0;
  border-top:1px solid var(--border);
  margin: 1.8em 0;
}

/* 8) インラインコード・コードブロック */
code{
  background: var(--codebg);
  border: 1px solid rgba(27,31,36,.12);
  border-radius: 6px;
  padding: .15em .35em;
  font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,"Noto Sans Mono CJK JP",monospace;
  font-size: .95em;
}

pre{
  background: var(--codebg);
  border: 1px solid rgba(27,31,36,.12);
  border-radius: 10px;
  padding: 14px 16px;
  overflow:auto;
  margin: 1em 0;
}
pre code{
  background: transparent;
  border: 0;
  padding: 0;
  font-size: .92em;
}

/* 9) テーブル（Pandocが生成する表に対応） */
table{
  border-collapse: collapse;
  width: 100%;
  margin: 1em 0 1.2em;
  font-size: .95em;
}
th, td{
  border: 1px solid var(--border);
  padding: 10px 12px;
  vertical-align: top;
}
th{
  background: #f6f8fa;
  text-align: left;
}

/* 10) Pandoc のコードブロック (sourceCode) を整える */
div.sourceCode{
  margin: 1em 0;
}
div.sourceCode pre{
  margin: 0;
}

/* 11) 独自タグ（Tip/Warning/Callout）を“カード”に変換 */
Tip, Warning, Callout{
  display:block;
  margin: 1em 0;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--callout-bg);
}

Tip{
  background: var(--tip-bg);
  border-color: var(--tip-border);
}
Tip::before{
  content:"💡 Tip";
  display:block;
  font-weight: 700;
  margin-bottom: 6px;
}

Warning{
  background: var(--warn-bg);
  border-color: var(--warn-border);
}
Warning::before{
  content:"⚠️ Warning";
  display:block;
  font-weight: 700;
  margin-bottom: 6px;
}

Callout::before{
  content:"📌 Note";
  display:block;
  font-weight: 700;
  margin-bottom: 6px;
}

/* 12) Steps/Step を “番号付きセクション” っぽく表示 */
Steps{
  display:block;
  margin: 1em 0 1.2em;
  padding: 0;
}
Step{
  display:block;
  margin: .8em 0;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
}
Step[title]::before{
  content: attr(title);
  display:block;
  font-weight: 700;
  margin-bottom: 6px;
}

/* 13) CardGroup/Card を “2列カード” に寄せる */
CardGroup{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 1em 0;
}
@media (max-width: 800px){
  CardGroup{ grid-template-columns: 1fr; }
}

Card{
  display:block;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 14px;
  background: #fff;
  box-shadow: 0 1px 0 rgba(27,31,36,.04);
}

Card[title]::before{
  content: attr(title);
  display:block;
  font-weight: 800;
  margin-bottom: 6px;
}

Card[icon="gear"]::after{ content:" ⚙️"; }
Card[icon="puzzle-piece"]::after{ content:" 🧩"; }
Card[icon="list-check"]::after{ content:" ✅"; }
Card[icon="file-lines"]::after{ content:" 📄"; }

/* Card内の本文を少し落ち着かせる */
Card{
  color: var(--text);
}
Card a{
  word-break: break-all;
}

/* 14) ちょい便利：画像があれば幅に合わせる */
img{
  max-width: 100%;
  height: auto;
}