/* =========================================================
   Awa3 Work - main.css
   公開中の旧サイト（React + Tailwind）の見た目を、素のCSSで再現したもの。
   色は先頭の「変数」で一括管理（ライト / ダーク）。ダークは <html class="dark">。
   目次: 1.変数 2.土台 3.ヘッダー 4.トップ/一覧 5.カード 6.サイドバー 7.記事 8.本文 9.フッター 10.その他
   ========================================================= */

/* ---------- 1. 変数 ---------- */
:root {
	--bg: #ffffff;
	--text: #111827;
	--muted: #4b5563;
	--subtle: #6b7280;
	--content: #1f2937;       /* 記事本文の文字色 */
	--card: #ffffff;
	--panel: #f9fafb;         /* サイドバーのカード */
	--row: #ffffff;           /* パネル内の行 */
	--row-hover: #f3f4f6;
	--chip: #e5e7eb;
	--chip-hover: #d1d5db;
	--chip-text: #374151;
	--line: #e5e7eb;
	--header-bg: rgba(255, 255, 255, .95);
	--btn: #f3f4f6;
	--btn-hover: #e5e7eb;
	--btn-icon: #374151;
	--input-bg: #ffffff;
	--input-border: #d1d5db;
	--input-text: #374151;
	--input-focus: #60a5fa;
	--footer-bg: #ffffff;
	--footer-text: #374151;
	--share-bg: #f3f4f6;
	--share-copy: #d1d5db;
	--box-line: #47585c;      /* 本文の囲みブロックの線 */
	--h6: #555555;
	--pre-bg: #f5f6f7;
	--cal-btn: #f3f4f6;
	--cal-btn-hover: #e5e7eb;
	--cal-off: #9ca3af;
	--cal-post-bg: #f3f4f6;
	--cal-post-text: #374151;
	--cal-post-hover: #e5e7eb;
	--cal-sel-bg: #dbeafe;
	--cal-sel-text: #2563eb;
	--cal-sel-ring: #93c5fd;
	--cal-today-bg: #f3e8ff;
	--cal-today-text: #9333ea;
	--cal-line: #e5e7eb;
	--link: #2563eb;
	--shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
	--shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
	--font: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}
html.dark {
	color-scheme: dark;
	--bg: #111827;
	--text: #ffffff;
	--muted: #9ca3af;
	--subtle: #6b7280;
	--content: #e5e7eb;
	--card: #1f2937;
	--panel: #1f2937;
	--row: #374151;
	--row-hover: #4b5563;
	--chip: #374151;
	--chip-hover: #4b5563;
	--chip-text: #d1d5db;
	--line: #1f2937;
	--header-bg: rgba(17, 24, 39, .95);
	--btn: #1f2937;
	--btn-hover: #374151;
	--btn-icon: #ffffff;
	--input-bg: #1f2937;
	--input-border: #374151;
	--input-text: #e5e7eb;
	--input-focus: #6b7280;
	--footer-bg: #111827;
	--footer-text: #d1d5db;
	--share-bg: #1f2937;
	--share-copy: #4b5563;
	--box-line: #9ca3af;
	--h6: #9ca3af;
	--pre-bg: #374151;
	--cal-btn: #374151;
	--cal-btn-hover: #4b5563;
	--cal-off: #6b7280;
	--cal-post-bg: #374151;
	--cal-post-text: #e5e7eb;
	--cal-post-hover: #4b5563;
	--cal-sel-bg: rgba(30, 64, 175, .45);
	--cal-sel-text: #93c5fd;
	--cal-sel-ring: #1d4ed8;
	--cal-today-bg: rgba(107, 33, 168, .45);
	--cal-today-text: #d8b4fe;
	--cal-line: #374151;
	--link: #60a5fa;
}

/* ---------- 2. 土台 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	font-family: var(--font);
	font-size: 18px;
	line-height: 1.5;
	color: var(--text);
	background: var(--bg);
	-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }
[hidden] { display: none !important; }

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link:focus { position: fixed !important; top: .5rem; left: .5rem; width: auto; height: auto; clip: auto; z-index: 999; padding: .5rem 1rem; background: var(--card); color: var(--text); border-radius: .5rem; }

.site { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); }
.page { flex: 1; width: 100%; padding-top: 1.5rem; padding-bottom: 1.5rem; }
@media (min-width: 640px) { .page { padding-top: 2rem; padding-bottom: 2rem; } }
.wrap { width: 100%; max-width: 80rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 640px) { .wrap { padding: 0 1.5rem; } }
.wrap--narrow { max-width: 64rem; }
.wrap--article { max-width: 72rem; padding-left: 1rem; padding-right: 1rem; }
.wrap--article.page { padding-top: 2.5rem; padding-bottom: 2.5rem; }

/* ---------- 3. ヘッダー ---------- */
.site-header {
	position: sticky; top: 0; z-index: 50;
	background: var(--header-bg); border-bottom: 1px solid var(--line);
	-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1rem; padding-bottom: 1rem; }
@media (min-width: 640px) { .site-header__inner { padding-top: 1.5rem; padding-bottom: 1.5rem; } }

.brand { display: flex; align-items: center; gap: .75rem; min-width: 0; transition: opacity .15s; }
.brand:hover { opacity: .8; }
.brand__logo { flex: none; display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; overflow: hidden; border-radius: .5rem; background: #e5e7eb; }
.brand__img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.brand__text { display: flex; flex-direction: column; min-width: 0; }
.brand__title { font-size: 1.25rem; line-height: 1.75rem; font-weight: 700; color: var(--text); }
.brand__desc { display: none; font-size: .75rem; line-height: 1rem; color: var(--muted); }
@media (min-width: 640px) {
	.brand__title { font-size: 1.5rem; line-height: 2rem; }
	.brand__desc { display: block; font-size: .875rem; line-height: 1.25rem; }
}

.site-header__tools { display: flex; align-items: center; gap: 1rem; }
.search { position: relative; }
.search__input {
	width: 100%; padding: .5rem 2.5rem .5rem 1rem; font: inherit; font-size: .875rem; line-height: 1.25rem;
	color: var(--input-text); background: var(--input-bg); border: 1px solid var(--input-border); border-radius: .75rem;
	outline: 0; transition: border-color .15s;
}
.search__input::placeholder { color: #9ca3af; }
.search__input:focus { border-color: var(--input-focus); }
.search__btn { position: absolute; right: .75rem; top: 50%; transform: translateY(-50%); display: flex; color: var(--subtle); }
.search__btn:hover { color: var(--text); }
.search__btn i { font-size: 1.125rem; }
.site-header .search { display: none; width: 16rem; margin-right: .5rem; }
@media (min-width: 1024px) { .site-header .search { display: block; } }

.icon-btn { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: .5rem; background: var(--btn); transition: background .15s; }
.icon-btn:hover { background: var(--btn-hover); }
.icon-btn i { font-size: 1.25rem; line-height: 1; color: var(--btn-icon); }
.icon-btn .icon-sun { display: none; color: #facc15; }
html.dark .icon-btn .icon-moon { display: none; }
html.dark .icon-btn .icon-sun { display: inline-block; }
.menu-toggle { display: flex; }
@media (min-width: 1024px) { .menu-toggle { display: none; } }

/* ---------- 4. トップ / 一覧 ---------- */
.home-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
@media (min-width: 640px) { .home-grid { gap: 2rem; } }
@media (min-width: 1024px) {
	.home-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
	.home-main { grid-column: span 8 / span 8; }
	.home-grid > .sidebar { grid-column: span 4 / span 4; }
}
.home-main { min-width: 0; }
.stack { display: flex; flex-direction: column; gap: 1.5rem; }
.page-title { margin-bottom: 1.5rem; font-size: 1.5rem; line-height: 2rem; font-weight: 700; }
.empty { padding: 2.5rem 0; text-align: center; color: var(--subtle); }

.pagination { margin-top: 2rem; }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.page-numbers { padding: .375rem .875rem; font-size: .875rem; border-radius: .5rem; background: var(--chip); color: var(--chip-text); }
a.page-numbers:hover { background: var(--chip-hover); }
.page-numbers.current { background: #2563eb; color: #fff; }

/* ---------- 5. 記事カード ---------- */
.card {
	position: relative; display: flex; gap: 1.25rem; padding: 1.25rem;
	background: var(--card); color: var(--text); border-radius: .75rem;
	box-shadow: var(--shadow); transition: box-shadow .15s;
}
.card:hover { box-shadow: var(--shadow-hover); }
.card__thumb { flex: none; width: 10rem; height: 7rem; overflow: hidden; border-radius: .375rem; }
.card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.card__noimg { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 1.75rem; color: var(--subtle); background: var(--chip); }
.card__body { display: flex; flex-direction: column; justify-content: space-between; flex: 1; min-width: 0; }
.card__meta { display: flex; align-items: center; gap: .75rem; }
.card__date { font-size: .75rem; line-height: 1rem; color: var(--subtle); }
.card__title { margin-top: .5rem; font-size: 1.25rem; line-height: 1.75rem; font-weight: 700; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: .75rem; } /* カード全体をクリック可能に */
.card__excerpt { margin-top: .5rem; font-size: .875rem; line-height: 1.25rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 639.98px) {
	.card { gap: .75rem; padding: 1rem; }
	.card__thumb { width: 5.5rem; height: 4.5rem; }
	.card__meta { flex-wrap: wrap; gap: .25rem .5rem; }
	.card__title { font-size: 1.0625rem; line-height: 1.5rem; }
}

.badge { position: relative; z-index: 2; display: inline-block; padding: .25rem .75rem; font-size: .875rem; line-height: 1.25rem; color: #fff; white-space: nowrap; border-radius: 9999px; transition: opacity .15s; }
.badge:hover { opacity: .85; }
.tags { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.tag { padding: .25rem .5rem; font-size: .75rem; line-height: 1rem; color: var(--chip-text); background: var(--chip); border-radius: .375rem; transition: background .15s; }
.tag:hover { background: var(--chip-hover); }

/* ---------- 6. サイドバー ---------- */
.sidebar { display: none; flex-direction: column; gap: 2rem; }
@media (min-width: 1024px) {
	.sidebar:not(.sidebar--drawer) { display: flex; }
	.sidebar__search { display: none; }
}
@media (max-width: 1023.98px) { /* スマホ: ヘッダーのメニューボタンで全画面表示 */
	body.menu-open { overflow: hidden; }
	body.menu-open .sidebar {
		display: flex; position: fixed; left: 0; right: 0; bottom: 0; top: var(--header-h, 4.5rem);
		z-index: 40; overflow-y: auto; padding: 1rem; background: var(--bg);
	}
}
.sidebar .search { width: 100%; }

.panel { padding: 1.5rem; background: var(--panel); border-radius: .75rem; }
.panel__title { display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem; font-size: 1rem; line-height: 1.5rem; font-weight: 700; }
.panel__title i { font-size: 1.125rem; }

.profile__head { margin-bottom: 1rem; text-align: center; }
.profile__img { width: 6rem; height: 6rem; margin: 0 auto 1rem; border-radius: 9999px; object-fit: cover; object-position: top; }
.profile__name { font-size: 1.25rem; line-height: 1.75rem; font-weight: 700; }
.profile__title { font-size: .875rem; line-height: 1.25rem; color: var(--muted); }
.profile__bio { max-width: 260px; margin: 0 auto 1rem; font-size: .875rem; line-height: 1.625; text-align: center; color: var(--chip-text); }
.profile__sns { display: flex; justify-content: center; gap: .75rem; }
.sns-btn { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: .5rem; background: var(--row); color: var(--chip-text); transition: background .15s; }
.sns-btn:hover { background: var(--row-hover); }
.sns-btn i { font-size: 1.25rem; }

/* カレンダー（JSで描画） */
.cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem; }
.cal__nav { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: .5rem; background: var(--cal-btn); transition: background .15s; }
.cal__nav:hover { background: var(--cal-btn-hover); }
.cal__month { display: flex; align-items: center; gap: .5rem; font-weight: 600; }
.cal__today { display: flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: .375rem; color: #a855f7; transition: background .15s; }
.cal__today:hover { background: var(--cal-today-bg); }
.cal__today i { font-size: .75rem; }
.cal__week, .cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal__week { margin-bottom: .5rem; font-size: .75rem; line-height: 1rem; text-align: center; color: var(--subtle); }
.cal__grid { gap: .25rem; }
.cal__day { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; font-size: .875rem; line-height: 1.25rem; color: var(--cal-off); border-radius: .5rem; transition: background .15s; }
.cal__day.has-post { color: var(--cal-post-text); background: var(--cal-post-bg); font-weight: 600; cursor: pointer; }
.cal__day.has-post:hover { background: var(--cal-post-hover); }
.cal__day.is-today { color: var(--cal-today-text); background: var(--cal-today-bg); font-weight: 600; }
.cal__day.is-selected { color: var(--cal-sel-text); background: var(--cal-sel-bg); font-weight: 700; box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 0 0 1px var(--cal-sel-ring); }
.cal__legend { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1rem; padding-top: .75rem; border-top: 1px solid var(--cal-line); font-size: .75rem; line-height: 1rem; color: var(--muted); }
.cal__key { display: inline-block; width: .75rem; height: .75rem; margin-right: .25rem; vertical-align: -1px; border-radius: .25rem; }
.cal__key--post { background: var(--cal-post-bg); }
.cal__key--sel { background: var(--cal-sel-bg); }
.cal__key--today { background: var(--cal-today-bg); }

/* カテゴリー / アーカイブ */
.rows { display: flex; flex-direction: column; gap: .5rem; }
.row { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: .625rem .75rem; font-size: 1rem; line-height: 1.5rem; color: var(--chip-text); background: var(--row); border-radius: .5rem; transition: background .15s; }
.row:hover { background: var(--row-hover); }
.row.is-current { box-shadow: 0 0 0 1px var(--cal-sel-ring); }
.row__name { display: flex; align-items: center; min-width: 0; }
.dot { flex: none; display: inline-block; width: .75rem; height: .75rem; margin-right: .75rem; border-radius: 9999px; }
.count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; height: 1.5rem; padding: 0 .25rem; font-size: .75rem; color: var(--chip-text); background: var(--chip); border-radius: 9999px; }
.count--sm { min-width: 1.25rem; height: 1.25rem; font-size: .6875rem; }

.arch > summary { list-style: none; cursor: pointer; font-weight: 600; }
.arch > summary::-webkit-details-marker { display: none; }
.arch > summary i { color: var(--subtle); transition: transform .15s; }
.arch[open] > summary i { transform: rotate(180deg); }
.arch__months { margin-top: .25rem; padding: 0 .25rem; display: flex; flex-direction: column; gap: .25rem; }
.arch__month { display: flex; align-items: center; justify-content: space-between; padding: .375rem .75rem; font-size: .75rem; line-height: 1rem; color: var(--chip-text); border-radius: .375rem; transition: background .15s; }
.arch__month:hover { background: var(--row-hover); }
.arch__month.is-current { background: var(--chip); font-weight: 600; }

/* ---------- 7. 記事ページ ---------- */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 1.5rem; font-size: .875rem; line-height: 1.25rem; }
.crumbs a:hover { text-decoration: underline; }
.crumbs__current { color: var(--subtle); }
.article__title { margin-bottom: 1rem; font-size: 2rem; line-height: 1.25; font-weight: 700; }
@media (min-width: 640px) { .article__title { font-size: 2.25rem; line-height: 2.5rem; } }
.article__cat { margin-bottom: 1rem; }
.article__date { margin-bottom: 1.5rem; font-size: .875rem; line-height: 1.25rem; color: var(--subtle); }

.share { margin-top: 2.5rem; padding: 1.25rem; background: var(--share-bg); border-radius: .5rem; }
.share__title { margin-bottom: 1rem; font-size: 1.125rem; line-height: 1.75rem; font-weight: 700; }
.share__btns { display: flex; flex-wrap: wrap; gap: .75rem; }
.share__btn { display: inline-block; padding: .5rem 1rem; border-radius: .375rem; }
.share__btn--x { background: #000; color: #fff; }
.share__btn--line { background: #22c55e; color: #fff; }
.share__btn--copy { background: var(--share-copy); color: var(--text); }
.back-btn { display: inline-block; margin-top: 2.5rem; padding: .5rem 1.5rem; color: #fff; background: #2563eb; border-radius: .5rem; transition: background .15s; }
.back-btn:hover { background: #1d4ed8; }

/* ---------- 8. 記事本文（Gutenberg） ----------
 * 公開中サイトの実CSS（見出し: index-*.css）と Cocoon の本文系ルールを移植。
 * 段落の余白は 0（Tailwind のリセットが効いていた状態）。間隔はスペーサーブロックや改行で作る運用。 */
.entry-content { font-size: 18px; line-height: 1.5; color: var(--content); overflow-wrap: anywhere; }
.entry-content p { margin: 0; }
.entry-content .has-black-color { color: inherit; }
.entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6 { margin: 2.6rem 0 1.9rem; font-weight: 700; }
.entry-content h2 { padding-bottom: .6rem; border-bottom: 3px solid #e0e0e0; font-size: 1.6rem; }
.entry-content h3 { padding-left: .7rem; border-left: 5px solid #e0e0e0; font-size: 1.4rem; }
.entry-content h4 { font-size: 1.2rem; }
.entry-content h5 { padding-bottom: .4rem; border-bottom: 3px solid #dcdcdc; font-size: 1.07rem; }
.entry-content h6 { font-size: 1rem; color: var(--h6); }
.entry-content ul { list-style: disc; padding-left: 1.5em; }
.entry-content ol { list-style: decimal; padding-left: 1.5em; }
.entry-content a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.entry-content figure, .entry-content .wp-block-image { margin: 0; }
.entry-content img { display: block; max-width: 100%; height: auto; }
.entry-content figcaption { margin-top: .4em; font-size: .85rem; color: var(--subtle); text-align: center; }
.entry-content hr { margin: 0; border: 0; border-top: 1px solid var(--content); }
.entry-content blockquote { padding: .6em 1.2em; border-left: 4px solid var(--chip-hover); color: var(--muted); }
.entry-content pre { margin: 0; padding: 10px; overflow: auto; font-size: 14px; line-height: 1.6; border: 1px solid #ddd; } /* Cocoon の pre と同じ */
.entry-content pre:not(.shiki) { background: var(--pre-bg); }
.entry-content :not(pre) > code { padding: .1em .4em; font-size: .9em; background: var(--chip); border-radius: .3rem; }
.entry-content table { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; }
.entry-content th, .entry-content td { padding: .5em .9em; text-align: left; border: 1px solid var(--line); }
.entry-content iframe, .entry-content video { max-width: 100%; }
.alignleft { float: left; margin: 0 1.5em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1.5em; }
.aligncenter { margin-left: auto; margin-right: auto; }
.entry-content::after { content: ""; display: block; clear: both; }
.page-links { margin-top: 1.5rem; font-size: .9rem; }

/* 旧テーマ（Cocoon）の囲みブロックスタイルの再現（値は Cocoon style.css から） */
.entry-content .has-border,
.entry-content .has-box-style { padding: 1em 1.5em; }
.entry-content .is-style-border-radius-s-solid { border: 2px solid var(--box-line); border-radius: 6px; }
.entry-content .is-style-parenthetic-box { position: relative; }
.entry-content .is-style-parenthetic-box::before,
.entry-content .is-style-parenthetic-box::after { content: ""; position: absolute; bottom: 0; width: .7em; height: 100%; border: 1px solid var(--box-line); }
.entry-content .is-style-parenthetic-box::before { left: 0; border-right-width: 0; }
.entry-content .is-style-parenthetic-box::after { right: 0; border-left-width: 0; }

/* ---------- 9. フッター ---------- */
.site-footer { margin-top: 5rem; padding: 2.5rem 0; color: var(--footer-text); background: var(--footer-bg); border-top: 1px solid var(--line); }
.site-footer__inner { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; text-align: center; }
.site-footer__brand { display: flex; align-items: center; justify-content: center; gap: .75rem; }
.site-footer__name { font-size: 1.25rem; line-height: 1.75rem; font-weight: 700; }
.site-footer__sns { display: flex; justify-content: center; gap: 1.5rem; font-size: 1.25rem; }
.site-footer__sns a { display: flex; transition: color .15s; }
.site-footer__sns .hover-blue:hover { color: #60a5fa; }
.site-footer__sns .hover-indigo:hover { color: #818cf8; }
.site-footer__sns .hover-gray:hover { color: #9ca3af; }
.site-footer__note { font-size: .875rem; line-height: 1.25rem; color: var(--subtle); }

/* ---------- 10. その他 ---------- */
.notfound { padding: 4rem 0; text-align: center; }
.notfound__code { font-size: 4rem; line-height: 1; font-weight: 700; color: #2563eb; }
.notfound__title { margin-top: 1rem; font-size: 1.5rem; line-height: 2rem; font-weight: 700; }
.notfound__text { margin-top: .5rem; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; }
}