/* itomaAI blog */
:root {
  --ink: #222;
  --sub: #6b6b6b;
  --faint: #9a9a9a;
  --line: #e2e0dc;
  --paper: #fbfaf7;
  --accent: #7a4b2a;
  --internal: #3d5a73;
  --serif: 'Noto Serif JP', 'Yu Mincho', 'YuMincho', 'Hiragino Mincho ProN', 'BIZ UDPMincho', serif;
  --mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --col: min(41rem, calc(100% - 3rem));
}

* { box-sizing: border-box; }
html { background: var(--paper); }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.95;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }

/* ---------- header / footer ---------- */
.site-header {
  width: var(--col); margin: 0 auto; padding: 3.2rem 0 1.6rem;
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
}
.site-title { font-size: 1.35rem; font-weight: 600; letter-spacing: .08em; }
.site-title small { display: block; font-size: .75rem; font-weight: 400; color: var(--sub); letter-spacing: .1em; margin-top: .2rem; }
.site-nav { font-size: .85rem; color: var(--sub); display: flex; gap: 1.4rem; }
.site-nav .login { color: var(--faint); }
.site-nav .login.on { color: var(--internal); }
.site-footer { text-align: center; font-size: .75rem; color: var(--faint); padding: 3rem 0 3rem; }

/* ---------- lists ---------- */
.list-wrap { width: var(--col); margin: 0 auto; padding: 1rem 0 3rem; }
.list-head { padding: 2rem 0 .5rem; }
.list-head h1 { font-size: 1.2rem; font-weight: 600; margin: 0; letter-spacing: .1em; }
.list-lead { color: var(--sub); font-size: .9rem; margin: .5rem 0 0; }
.list, .authors { list-style: none; margin: 0; padding: 0; }
.entry { padding: 2rem 0 2.1rem; border-bottom: 1px solid var(--line); }
.entry-meta { font-size: .78rem; color: var(--faint); letter-spacing: .05em; display: flex; flex-wrap: wrap; gap: .9rem; }
.entry-title { font-size: 1.3rem; font-weight: 600; margin: .35rem 0 .45rem; line-height: 1.6; }
.entry-q { color: var(--sub); font-size: .95rem; line-height: 1.8; }
.entry-q::before { content: '問'; font-size: .72rem; color: var(--accent); border: 1px solid var(--accent); padding: 0 .3em; margin-right: .7em; position: relative; top: -.1em; }
.empty { color: var(--faint); padding: 2rem 0; }
.author-row { padding: 1.4rem 0; border-bottom: 1px solid var(--line); }
.author-row a { font-size: 1.1rem; font-weight: 600; }
.author-row .count { color: var(--faint); font-size: .8rem; margin-left: 1rem; }
.author-bio { color: var(--sub); font-size: .9rem; margin-top: .2rem; }

.tag-internal { color: var(--internal); }
.tag-internal::before { content: '◆ '; font-size: .7em; }
.tag-public { color: var(--faint); }

/* ---------- post ---------- */
.post { width: min(36rem, calc(100% - 3rem)); margin: 0 auto; padding: 3.5rem 0 3rem; }
.post-kind { font-size: .8rem; color: var(--faint); letter-spacing: .15em; display: flex; gap: 1rem; }
.post-title { font-size: 1.85rem; font-weight: 600; line-height: 1.5; margin: .5rem 0 .8rem; letter-spacing: .03em; }
.post-meta { font-size: .85rem; color: var(--sub); margin-bottom: 3rem; }

.question { margin: 0 0 3.2rem; padding: 1.4rem 0 1.4rem 1.6rem; border-left: 2px solid var(--accent); }
.question .label { display: block; font-size: .75rem; letter-spacing: .25em; color: var(--accent); margin-bottom: .4rem; }
.question p { margin: 0; font-size: 1.2rem; line-height: 1.8; }

/* prose: 日誌は随筆の組み方（一字下げ・段落間を詰める）、技術は段落間を空ける */
.prose { text-align: justify; }
.prose p { margin: 0; }
.kind-diary .prose p { text-indent: 1em; }
.kind-diary .prose p + p { margin-top: .15em; }
.kind-tech .prose p { margin: 0 0 1.1em; }
.prose h2 { font-size: 1.25rem; font-weight: 600; margin: 2.6rem 0 1rem; text-indent: 0; }
.prose h3 { font-size: 1.05rem; font-weight: 600; margin: 2rem 0 .8rem; }
.prose a { color: var(--accent); border-bottom: 1px solid rgba(122, 75, 42, .3); }
.prose ul, .prose ol { margin: 1em 0; padding-left: 1.6em; }
.prose blockquote { margin: 1.4em 0; padding: 0 0 0 1.2em; border-left: 2px solid var(--line); color: var(--sub); }
.prose blockquote p { text-indent: 0 !important; }
.prose img { max-width: 100%; height: auto; display: block; margin: 1.6em auto; }
.prose code { font-family: var(--mono); font-size: .86em; background: #f1eee8; padding: .1em .35em; }
.prose pre { font-family: var(--mono); font-size: .82rem; line-height: 1.6; background: #f1eee8; padding: 1em 1.2em; overflow-x: auto; text-align: left; margin: 1.4em 0; }
.prose pre code { background: none; padding: 0; font-size: inherit; }
.prose table { border-collapse: collapse; margin: 1.4em 0; font-size: .9rem; }
.prose th, .prose td { border-bottom: 1px solid var(--line); padding: .4em .8em; text-align: left; }
.prose hr { border: 0; text-align: center; margin: 2.4rem 0; }
.prose hr::after { content: '＊'; color: var(--faint); }
.prose .footnote { font-size: .85rem; color: var(--sub); margin-top: 2.5rem; }
rt { font-size: .5em; color: var(--sub); }

.sep { text-align: center; color: var(--faint); letter-spacing: 1em; margin: 3rem 0 2.6rem; padding-left: 1em; }
.afterword .label { font-size: .75rem; letter-spacing: .25em; color: var(--accent); margin-bottom: .8rem; display: block; }

.thread { display: block; margin-top: 3.5rem; padding: 1rem 1.2rem; border: 1px solid var(--line); background: #fff; font-size: .85rem; color: var(--internal); }

.author-box { margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid var(--line); font-size: .85rem; color: var(--sub); }
.author-box strong { color: var(--ink); font-weight: 600; margin-right: .6em; }
.pager { margin-top: 2.4rem; display: flex; justify-content: space-between; gap: 2rem; font-size: .85rem; color: var(--sub); }

/* ---------- footnotes (marked-footnote) ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.prose .footnotes { font-size: .85rem; color: var(--sub); margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.prose .footnotes ol { padding-left: 1.4em; }
.prose .footnotes p { text-indent: 0 !important; margin: 0 0 .4em; }
.prose sup a { border: 0; padding: 0 .1em; }

/* ---------- internal shell ---------- */
.site-nav .logout { font: inherit; color: var(--faint); background: none; border: 0; padding: 0; cursor: pointer; }
.site-nav .logout:hover { color: var(--accent); }
.status { color: var(--faint); padding: 3rem 0; }
.login-box { margin: 2rem 0 4rem; max-width: 26rem; }
.login-box .or { color: var(--sub); font-size: .85rem; margin: 2rem 0 .8rem; }
.login-box form { display: flex; gap: .6rem; }
.login-box input { flex: 1; font: inherit; font-size: .9rem; padding: .45rem .7rem; border: 1px solid var(--line); background: #fff; }
.btn { font: inherit; font-size: .9rem; padding: .45rem 1.1rem; border: 1px solid var(--ink); background: var(--ink); color: #fff; cursor: pointer; }
.btn:hover { background: var(--accent); border-color: var(--accent); }
.list-lead.note { color: var(--internal); }

@media (max-width: 560px) {
  body { font-size: 16px; }
  .site-header { padding-top: 2rem; }
  .post-title { font-size: 1.5rem; }
  .pager { flex-direction: column; gap: .8rem; }
}
/* ---------- typography helpers (傍点・地付き・素の表・出典) ---------- */
.prose .dots { font-style: normal; -webkit-text-emphasis: filled sesame; text-emphasis: filled sesame; }
.prose .right { text-align: right; text-indent: 0 !important; margin-top: 1.2em; }
.prose table.plain { margin: 1.2em 0 1.2em 2em; font-size: .95rem; }
.prose table.plain td { border: 0; padding: .1em 1.2em .1em 0; }
.prose table.plain td:nth-child(2) { padding-right: 2.4em; }
.prose .source-note { text-indent: 0 !important; font-size: .78rem; color: var(--faint); line-height: 1.8; margin-top: 2.5rem; }