/* =====================================================================
   SoftonHouse モダンスタイル (ダーク × 桜色)
   2024-2025 トレンドを取り入れたモダンブログ:
     - 背景にオーロラ風の桜色グラデーション
     - 紙風の極薄ノイズで落ち着いた質感
     - 大きめのタイポ + ドロップキャップ
     - チップ型のメタ表示 / 著者アバター
   ===================================================================== */
:root {
    --sh-bg:           #15111a;
    --sh-bg-1:         #1d1820;
    --sh-bg-2:         #221a20;
    --sh-bg-3:         #2a2128;
    --sh-bg-card:      #1e1820;
    --sh-bg-card-hover:#261d24;
    --sh-border:       #3a2e34;
    --sh-border-soft:  #2a2128;
    --sh-text:         #e0d5da;
    --sh-text-muted:   #9a8e94;
    --sh-text-strong:  #f5ecef;
    --sh-text-faint:   #6e646b;
    --sh-accent:       #f2a6b8;
    --sh-accent-soft:  #f8c4d1;
    --sh-accent-deep:  #d88899;
    --sh-accent-cyan:  #8fdcf5;
    --sh-accent-bg:        rgba(242, 166, 184, 0.10);
    --sh-accent-bg-strong: rgba(242, 166, 184, 0.18);
    --sh-aux-1: rgba(242, 166, 184, 0.20);
    --sh-aux-2: rgba(168, 138, 217, 0.14);
    --sh-aux-3: rgba(255, 196, 168, 0.10);
    --sh-danger:       #d68888;
    --sh-font-sans:    "Inter", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, system-ui, sans-serif;
    --sh-font-serif:   "Source Serif Pro", "Noto Serif JP", "游明朝", "Hiragino Mincho ProN", serif;
    --sh-font-mono:    "IBM Plex Mono", "Cascadia Mono", Menlo, Consolas, monospace;
    --sh-radius-sm: 8px;
    --sh-radius-md: 14px;
    --sh-radius-lg: 20px;
}
html { scroll-behavior: smooth; }
html, body { background-color: var(--sh-bg); color: var(--sh-text); color-scheme: dark; min-height: 100%; }
body {
    font-family: var(--sh-font-sans);
    font-feature-settings: "palt";
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    overflow-x: hidden;
}
body::before {
    content: ""; position: fixed; inset: -20%; z-index: -2;
    background:
        radial-gradient(ellipse 60% 50% at 15% 8%,  var(--sh-aux-1), transparent 60%),
        radial-gradient(ellipse 45% 40% at 85% 20%, var(--sh-aux-2), transparent 60%),
        radial-gradient(ellipse 50% 50% at 50% 100%, var(--sh-aux-3), transparent 65%);
    filter: blur(40px); pointer-events: none;
}
body::after {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.035;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
a { color: var(--sh-accent); text-decoration: none; transition: color .15s ease; }
a:hover, a:focus { color: var(--sh-accent-soft); }
h1, h2, h3, h4, h5, h6 { color: var(--sh-text-strong); font-weight: 700; letter-spacing: -0.01em; line-height: 1.4; }
h1 { font-size: 2rem; } h2 { font-size: 1.4rem; } h3 { font-size: 1.15rem; }
::selection { background-color: var(--sh-accent-bg-strong); color: var(--sh-text-strong); }
hr { border: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--sh-border), transparent); margin: 32px 0; opacity: 1; }

.navbar.navbar-dark.bg-dark {
    background-color: rgba(21, 17, 26, 0.7) !important;
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid var(--sh-border-soft);
    /* backdrop-filter がスタッキングコンテキストを作るため、通知パネル等が本文の背面に潜らないよう前面へ */
    position: relative; z-index: 500;
}
.navbar-brand { color: var(--sh-text-strong) !important; font-weight: 700; letter-spacing: 0.04em; font-size: 1.18rem; position: relative; display: inline-flex; align-items: center; text-transform: uppercase; }
.navbar .nav-link { color: var(--sh-text-muted) !important; font-weight: 500; font-size: 0.92rem; transition: color .15s ease; }
.navbar .nav-link:hover, .navbar .nav-link:focus { color: var(--sh-accent) !important; }

/* =====================================================================
   サイト幅 (現代のブログ標準: Medium / note / Zenn 方式)
   - サイト全体はサイドバー込みで上限 1120px の可変 (狭い画面では自然に縮む)
   - 記事本文などの読み物は読書幅 720px (1 行 65〜75 文字の可読性基準)
   - 余白は clamp() でなめらかに可変
   ===================================================================== */
:root {
    --sh-site-width: 1880px;    /* サイト全体の上限幅 (フル HD ぎりぎり、以下は可変) */
    --sh-reading-width: 960px;  /* 読み物ページの読書幅 */
}

.body-content {
    margin-top: 56px;
    padding-left: clamp(16px, 4vw, 32px);
    padding-right: clamp(16px, 4vw, 32px);
    max-width: var(--sh-site-width);
    margin-left: auto; margin-right: auto;
}

.page-header {
    margin-bottom: 40px; padding: 32px 30px 26px;
    border: 1px solid var(--sh-border-soft); border-radius: var(--sh-radius-md);
    position: relative; overflow: hidden;
    background: linear-gradient(135deg, rgba(242,166,184,0.10) 0%, rgba(216,136,153,0.04) 60%, rgba(21,17,26,0) 100%);
}
.page-header::before {
    content: ""; position: absolute; right: -120px; top: -120px;
    width: 360px; height: 360px; border-radius: 50%;
    background: radial-gradient(circle at center, rgba(242,166,184,0.18) 0%, rgba(242,166,184,0) 70%);
    pointer-events: none;
}
.page-header__text { position: relative; z-index: 1; }
.page-header__eyebrow {
    display: block;
    font-family: var(--sh-font-sans);
    font-size: 0.82rem; font-weight: 600;
    letter-spacing: 0.22em; text-transform: uppercase;
    margin-bottom: 10px;
    background: linear-gradient(135deg, var(--sh-accent) 0%, var(--sh-accent-soft) 60%, var(--sh-text-strong) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.page-header h1 {
    font-size: 1.5rem; line-height: 1.3; margin: 0 0 6px 0; letter-spacing: -0.01em;
    color: var(--sh-text-strong); font-weight: 700;
    background: none; -webkit-background-clip: initial; background-clip: initial;
}
.page-header p, .page-header .text-muted { color: var(--sh-text-muted) !important; font-size: 0.9rem; line-height: 1.5; margin: 0; }
@media (max-width: 720px) {
    .page-header { padding: 16px 18px 12px; margin-bottom: 18px; }
    .page-header__eyebrow { font-size: 0.74rem; }
    .page-header h1 { font-size: 1.4rem; }
}

.blog-list {
    list-style: none; padding: 0; margin: 0;
    display: grid; gap: 8px;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    align-items: stretch;
}
.blog-list__item {
    position: relative; min-width: 0; background-color: var(--sh-bg-card);
    border: 1px solid var(--sh-border-soft); border-radius: var(--sh-radius-md);
    padding: 10px 12px; margin: 0;
    display: flex; flex-direction: column;
    transition: border-color .2s ease, background-color .2s ease, transform .2s ease;
}
.blog-list__item:hover, .blog-list__item:focus-within {
    border-color: var(--sh-accent); background-color: var(--sh-bg-card-hover); transform: translateY(-1px);
}
.blog-list__head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.blog-list__avatar {
    flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--sh-font-sans); font-weight: 600; font-size: 0.7rem;
    color: #2a1a1f;
    background: linear-gradient(135deg, var(--sh-accent-soft) 0%, var(--sh-accent-deep) 100%);
    box-shadow: 0 0 0 1px rgba(242, 166, 184, 0.15);
    user-select: none;
}
.blog-list__head-meta {
    display: flex; flex-direction: row; align-items: baseline; gap: 8px;
    font-family: var(--sh-font-mono); font-size: 0.74rem;
    color: var(--sh-text-muted); line-height: 1.2; min-width: 0;
}
.blog-list__head-meta .nickname { color: var(--sh-accent-cyan); font-weight: 600; font-size: 0.84rem; letter-spacing: 0.02em; }

.blog-list__title {
    font-size: 1rem; font-weight: 700; margin: 1px 0 3px 0; line-height: 1.3; letter-spacing: -0.01em;
    overflow-wrap: anywhere; word-break: break-word;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.blog-list__title a {
    color: var(--sh-text-strong);
    background-image: linear-gradient(var(--sh-accent), var(--sh-accent));
    background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%;
    transition: background-size .25s ease, color .15s ease;
}
.blog-list__title a:hover, .blog-list__title a:focus { color: var(--sh-accent-soft); background-size: 100% 1px; }

.blog-list__excerpt {
    color: var(--sh-text-muted); font-size: 0.85rem; line-height: 1.35; margin: 0 0 4px 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; text-overflow: ellipsis;
}
.blog-list__chips { display: flex; flex-wrap: wrap; gap: 4px; }

.chip {
    display: inline-flex; align-items: center;
    font-family: var(--sh-font-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.04em;
    padding: 2px 9px; border-radius: 999px;
    border: 1px solid var(--sh-border); color: var(--sh-text-muted);
    background-color: transparent; line-height: 1.35;
}
.chip--accent { border-color: var(--sh-accent-deep); background-color: var(--sh-accent-bg); color: var(--sh-accent-soft); }

.blog-detail__hero { margin-bottom: 36px; padding-bottom: 28px; border-bottom: 1px solid var(--sh-border-soft); }
.blog-detail__hero h1 { font-size: 2.4rem; line-height: 1.3; margin: 0 0 22px 0; letter-spacing: -0.02em; color: var(--sh-text-strong); }
.blog-detail__byline { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.blog-detail__avatar {
    flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--sh-font-sans); font-weight: 700; font-size: 1.1rem;
    color: #2a1a1f;
    background: linear-gradient(135deg, var(--sh-accent-soft) 0%, var(--sh-accent-deep) 100%);
    box-shadow: 0 0 0 1px rgba(242, 166, 184, 0.18);
    user-select: none;
}
.blog-detail__byline-info { display: flex; flex-direction: column; gap: 2px; font-family: var(--sh-font-mono); font-size: 0.82rem; line-height: 1.25; }
.blog-detail__byline-info .nickname { color: var(--sh-accent-cyan); font-weight: 600; }
.blog-detail__byline-info .when { color: var(--sh-text-muted); }
.blog-detail__chips { display: flex; flex-wrap: wrap; gap: 6px; }

.blog-detail__body {
    font-family: var(--sh-font-sans); font-size: 1.0625rem; line-height: 1.5;
    color: var(--sh-text); word-wrap: break-word; overflow-wrap: break-word;
}
.blog-detail__body::first-letter {
    font-family: var(--sh-font-serif); float: left; font-size: 3.2em; line-height: 0.92;
    padding: 6px 12px 0 0; font-weight: 700; color: var(--sh-accent);
}
.blog-detail__body p { margin: 0 0 1.4em 0; }
.blog-detail__body a {
    color: var(--sh-accent); border-bottom: 1px solid var(--sh-accent-bg-strong);
    transition: border-color .15s ease, color .15s ease;
}
.blog-detail__body a:hover, .blog-detail__body a:focus { color: var(--sh-accent-soft); border-bottom-color: var(--sh-accent-soft); }
.blog-detail__body img { max-width: 100%; height: auto; border-radius: var(--sh-radius-sm); margin: 16px 0; }
.blog-detail__body blockquote {
    margin: 1.6em 0; padding: 0.8em 1.4em;
    border-left: 3px solid var(--sh-accent); background-color: var(--sh-accent-bg);
    color: var(--sh-text-strong); border-radius: 0 var(--sh-radius-sm) var(--sh-radius-sm) 0;
    font-style: italic;
}
.blog-detail__body code {
    font-family: var(--sh-font-mono); font-size: 0.9em;
    padding: 0.15em 0.4em; background-color: var(--sh-bg-card);
    border: 1px solid var(--sh-border-soft); border-radius: 4px;
}

.blog-detail__divider {
    margin: 36px auto; width: 60%; height: 1px; border: 0;
    background: linear-gradient(90deg, transparent, var(--sh-accent-deep), transparent);
    position: relative; overflow: visible;
}
.blog-detail__divider::after {
    content: "❀"; position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%); background-color: var(--sh-bg);
    padding: 0 14px; color: var(--sh-accent); font-size: 0.9rem;
}

.blog-detail__nav {
    margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--sh-border-soft);
    font-family: var(--sh-font-mono); font-size: 0.85rem;
}
.blog-detail__nav a { color: var(--sh-text-muted); }
.blog-detail__nav a:hover, .blog-detail__nav a:focus { color: var(--sh-accent); }

.alert { border-radius: var(--sh-radius-md); border: 1px solid var(--sh-border); background-color: var(--sh-bg-card); color: var(--sh-text); padding: 14px 18px; }
.alert-warning { border-color: var(--sh-accent-deep); background-color: var(--sh-accent-bg); color: var(--sh-text-strong); }
.alert-danger { border-color: var(--sh-danger); background-color: rgba(214,136,136,0.12); color: var(--sh-text-strong); }

input, select, textarea {
    background-color: var(--sh-bg-1); color: var(--sh-text);
    border: 1px solid var(--sh-border); border-radius: var(--sh-radius-sm);
    padding: 8px 12px; font-family: var(--sh-font-sans);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--sh-accent); outline-offset: 1px; border-color: var(--sh-accent); }

footer { color: var(--sh-text-muted); font-family: var(--sh-font-mono); font-size: 0.78rem; padding: 28px 0; text-align: center; letter-spacing: 0.04em; }
.site-footer__powered {
    display: inline-flex; align-items: center; gap: 10px; margin-top: 12px;
    padding: 8px 18px; border: 1px solid var(--sh-border-soft); border-radius: 999px;
    background: rgba(242, 166, 184, 0.06); color: var(--sh-text-muted);
}
.site-footer__powered img {
    width: 28px; height: 28px; object-fit: contain;
    transition: transform .3s ease;
}
.site-footer__powered:hover img { transform: rotate(-12deg) scale(1.1); }
.site-footer__powered strong { color: var(--sh-accent); font-weight: 600; letter-spacing: 0.06em; }

*:focus-visible { outline: 2px solid var(--sh-accent); outline-offset: 2px; border-radius: 2px; }

/* アバターリンク (一覧・詳細ページ共通) */
.blog-list__avatar-link, .blog-detail__avatar-link {
    display: inline-block; line-height: 0; border-radius: 999px;
    transition: transform .2s ease, box-shadow .2s ease;
}
.blog-list__avatar-link:hover, .blog-detail__avatar-link:hover {
    transform: scale(1.06);
    box-shadow: 0 0 0 3px var(--sh-accent-bg-strong);
}
.blog-list__head-meta .nickname a,
.blog-detail__byline-info .nickname a {
    color: inherit; text-decoration: none;
    border-bottom: 1px dashed transparent;
    transition: color .2s ease, border-color .2s ease;
}
.blog-list__head-meta .nickname a:hover,
.blog-detail__byline-info .nickname a:hover {
    color: var(--sh-accent);
    border-bottom-color: var(--sh-accent-deep);
}

/* プロファイルページ (YouTube チャンネル風) */
.profile-page { padding: 24px 0; }
.profile-page__hero {
    display: grid; grid-template-columns: auto 1fr; gap: 24px;
    align-items: center;
    padding: 32px 32px 28px;
    border-radius: var(--sh-radius-lg);
    background: linear-gradient(135deg, var(--sh-bg-card) 0%, var(--sh-bg-2) 100%);
    border: 1px solid var(--sh-border);
    margin-bottom: 32px;
    position: relative; overflow: hidden;
}
.profile-page__hero::before {
    content: ""; position: absolute; inset: -40% -20% auto auto;
    width: 60%; height: 200%;
    background: radial-gradient(ellipse 50% 40% at 50% 50%, var(--sh-aux-1), transparent 60%);
    pointer-events: none; filter: blur(28px);
}
.profile-page__avatar {
    width: 96px; height: 96px; border-radius: 999px;
    background: linear-gradient(135deg, var(--sh-accent-deep), var(--sh-accent-soft));
    color: var(--sh-bg);
    font-size: 2.4rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 16px rgba(216, 136, 153, 0.3);
    position: relative; z-index: 1;
}
.profile-page__avatar-wrap { position: relative; z-index: 1; }
img.profile-page__avatar--photo { object-fit: cover; box-shadow: 0 4px 16px rgba(216, 136, 153, 0.3), 0 0 0 1px var(--sh-border); }
.profile-page__identity { position: relative; z-index: 1; min-width: 0; }
.profile-page__nickname {
    margin: 0 0 4px; font-size: 1.9rem; font-weight: 700; line-height: 1.2;
    color: var(--sh-text-strong);
    background: linear-gradient(120deg, var(--sh-accent-soft), var(--sh-accent));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.profile-page__blogtitle {
    margin: 0 0 6px; font-size: 1.05rem; color: var(--sh-text); font-weight: 500;
}
.profile-page__blogsubject {
    margin: 0 0 10px; font-size: 0.95rem; color: var(--sh-text-muted);
}
.profile-page__introduce {
    margin: 10px 0 0; padding: 10px 14px;
    border-left: 2px solid var(--sh-accent-deep);
    background: var(--sh-accent-bg);
    border-radius: 0 var(--sh-radius-sm) var(--sh-radius-sm) 0;
    color: var(--sh-text); font-size: 0.95rem; line-height: 1.7;
}
.profile-page__counts {
    margin: 12px 0 0; font-size: 0.85rem; color: var(--sh-text-muted);
}

/* About グリッド */
.profile-about {
    margin-bottom: 40px;
    padding: 24px 28px;
    border-radius: var(--sh-radius-md);
    background: var(--sh-bg-card);
    border: 1px solid var(--sh-border-soft);
}
.profile-about__title {
    margin: 0 0 16px; font-size: 1.05rem; font-weight: 600;
    letter-spacing: 0.04em; color: var(--sh-text-strong);
}
.profile-about__title::before { content: "✿ "; color: var(--sh-accent); }
.profile-about__grid {
    margin: 0; display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px 20px;
}
.profile-about__item { margin: 0; }
.profile-about__item dt {
    font-size: 0.78rem; font-weight: 500; color: var(--sh-text-muted);
    letter-spacing: 0.05em; margin-bottom: 2px;
}
.profile-about__item dd {
    margin: 0; font-size: 0.96rem; color: var(--sh-text-strong); line-height: 1.5;
}

/* 記事一覧 */
.profile-posts__title {
    font-size: 1.15rem; font-weight: 600;
    letter-spacing: 0.04em; margin: 0 0 16px;
    color: var(--sh-text-strong);
}
.profile-posts__title::before { content: "✿ "; color: var(--sh-accent); }
.profile-posts__list {
    list-style: none; padding: 0; margin: 0;
    display: grid; gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.profile-posts__item { margin: 0; }
.profile-posts__link {
    display: flex; flex-direction: column; gap: 2px;
    padding: 10px 18px;
    border-radius: var(--sh-radius-sm);
    background: var(--sh-bg-card);
    border: 1px solid var(--sh-border-soft);
    color: var(--sh-text); text-decoration: none;
    transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.profile-posts__link:hover {
    background: var(--sh-bg-card-hover);
    border-color: var(--sh-accent-deep);
    transform: translateX(2px);
}
.profile-posts__heading {
    color: var(--sh-text-strong); font-weight: 500; line-height: 1.3;
}
.profile-posts__meta {
    display: flex; flex-wrap: wrap; gap: 12px;
    font-size: 0.85rem; color: var(--sh-text-muted); line-height: 1.3;
}
.profile-posts__theme { color: var(--sh-accent); }
.profile-posts__empty { color: var(--sh-text-muted); }
.profile-page__nav { margin-top: 24px; }
.profile-page__nav a { color: var(--sh-text-muted); text-decoration: none; }
.profile-page__nav a:hover { color: var(--sh-accent); }

@media (max-width: 540px) {
    .profile-page__hero { grid-template-columns: 1fr; padding: 24px 20px; text-align: center; }
    .profile-page__avatar { margin: 0 auto; width: 80px; height: 80px; font-size: 2rem; }
    .profile-page__nickname { font-size: 1.5rem; }
    .profile-about__grid { grid-template-columns: 1fr 1fr; }
}

/* 同じ著者の他記事サジェスト */
.related-posts {
    margin-top: 56px;
    padding-top: 32px;
    border-top: 1px solid var(--sh-border-soft);
}
.related-posts__title {
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    margin: 0 0 18px;
    color: var(--sh-text-strong);
}
.related-posts__title::before {
    content: "✿ "; color: var(--sh-accent); margin-right: 4px;
}
.related-posts__list {
    list-style: none; padding: 0; margin: 0;
    display: grid; gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.related-posts__item { margin: 0; }
.related-posts__link {
    display: flex; flex-direction: column; gap: 2px;
    padding: 8px 16px;
    border-radius: var(--sh-radius-sm);
    background: var(--sh-bg-card);
    border: 1px solid var(--sh-border-soft);
    color: var(--sh-text); text-decoration: none;
    transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.related-posts__link:hover {
    background: var(--sh-bg-card-hover);
    border-color: var(--sh-accent-deep);
    transform: translateX(2px);
}
.related-posts__heading {
    color: var(--sh-text-strong); font-weight: 500; line-height: 1.3;
}
.related-posts__meta {
    display: flex; flex-wrap: wrap; gap: 12px;
    font-size: 0.85rem; color: var(--sh-text-muted); line-height: 1.3;
}
.related-posts__theme { color: var(--sh-accent); }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media (max-width: 540px) {
    .body-content { margin-top: 32px; }
    .page-header { margin-bottom: 32px; padding-bottom: 20px; }
    .page-header h1 { font-size: 1.35rem; }
    .blog-list__item { padding: 10px 12px; border-radius: var(--sh-radius-sm); }
    .blog-detail__hero h1 { font-size: 1.7rem; }
    .blog-detail__body { font-size: 1rem; line-height: 1.48; }
    .blog-detail__body::first-letter { font-size: 2.6em; }
    .blog-detail__divider { width: 80%; }
}

/* ===== アバター写真 (旧サイト由来のプロフィール画像) ===== */
img.blog-list__avatar--photo {
    object-fit: cover;
    background-color: var(--sh-bg-2);
    box-shadow: 0 0 0 1px var(--sh-border);
}
/* ===== トップページ 2 カラムレイアウトとサイドバー ===== */
.home-sidebar { display: grid; gap: 12px; margin-top: 24px; align-content: start; }
.sidebar-card {
    background-color: var(--sh-bg-card);
    border: 1px solid var(--sh-border-soft);
    border-radius: var(--sh-radius-md);
    padding: 12px 14px;
}
.sidebar-card__title {
    font-size: 0.98rem; font-weight: 600; letter-spacing: 0.04em;
    margin: 0 0 8px; color: var(--sh-text-strong);
}
.sidebar-card__title::before { content: "✿ "; color: var(--sh-accent); }

.author-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.author-list__item { margin: 0; }
.author-list__link {
    display: flex; align-items: center; gap: 10px;
    padding: 3px 6px; border-radius: var(--sh-radius-sm);
    color: var(--sh-text);
    transition: background-color .15s ease, color .15s ease;
}
.author-list__link:hover, .author-list__link:focus {
    background-color: var(--sh-bg-card-hover); color: var(--sh-text-strong);
}
.author-list__link .blog-list__avatar { width: 24px; height: 24px; font-size: 0.7rem; }
.author-list__name {
    flex: 1 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 0.9rem; font-weight: 500;
}
.author-list__count {
    flex-shrink: 0; font-family: var(--sh-font-mono);
    font-size: 0.72rem; color: var(--sh-text-faint);
}

.theme-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.theme-list__item {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--sh-font-mono); font-size: 0.74rem;
    padding: 4px 12px; border-radius: 999px;
    border: 1px solid var(--sh-border); color: var(--sh-text-muted);
    line-height: 1.6; margin: 0;
}
.theme-list__count { color: var(--sh-accent); font-weight: 600; }
.author-list__name { color: var(--sh-accent-cyan); }

/* ===== ログインページ / ナビのログイン状態 ===== */
.nav-link--login { color: var(--sh-accent) !important; font-weight: 600; }
.nav-link--user { color: var(--sh-accent-cyan) !important; cursor: default; }
.login-page { max-width: 552px; margin: 0 auto; }
.login-card {
    background-color: var(--sh-bg-card);
    border: 1px solid var(--sh-border-soft);
    border-radius: var(--sh-radius-md);
    padding: 28px 30px;
    display: grid; gap: 18px;
}
.login-card__form { display: grid; gap: 18px; }
.login-card__field { display: grid; gap: 6px; }
.login-card__field label {
    font-size: 0.82rem; font-weight: 600; letter-spacing: 0.05em;
    color: var(--sh-text-muted);
}
.login-card__field input { width: 100%; }
.login-card__submit {
    width: 100%; padding: 10px 16px;
    border: 0; border-radius: var(--sh-radius-sm);
    background: linear-gradient(135deg, var(--sh-accent-deep), var(--sh-accent));
    color: #2a1a1f; font-weight: 700; font-size: 0.95rem;
    cursor: pointer; transition: filter .15s ease;
}
.login-card__submit:hover, .login-card__submit:focus { filter: brightness(1.1); }
.login-card__note {
    margin: 0; font-size: 0.78rem; color: var(--sh-text-faint);
    font-family: var(--sh-font-mono); text-align: center;
}

/* ===== デスクトップ最適化 =====
   760px 固定 1 カラムは広い画面で間延びするため、
   トップページ (.home-layout を含むときのみ) コンテナを広げて
   本文 + サイドバーの 2 カラムにし、記事カードを複数列化する。
   記事詳細ページの読みやすい行長 (760px) はそのまま維持。 */
@media (min-width: 1024px) {
    .body-content:has(.home-layout) { max-width: var(--sh-site-width); }
    .home-layout {
        display: grid; grid-template-columns: minmax(0, 1fr) 300px;
        gap: 20px; align-items: start;
    }
    .home-sidebar { margin-top: 0; position: sticky; top: 84px; }
    .page-header { padding: 20px 24px 16px; margin-bottom: 20px; }
    .blog-list { gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .blog-list__title { font-size: 1rem; }
    .blog-list__excerpt { font-size: 0.85rem; }
}

/* ===== フル HD (1920px) デスクトップ: 記事カードを 3 段組に ===== */
/* フル HD 以上でもサイト幅は上限のまま (現代のブログ標準は無制限に広げない) */
@media (min-width: 1440px) {
    .body-content:has(.home-layout) { max-width: var(--sh-site-width); }
    .home-layout { grid-template-columns: minmax(0, 1fr) 300px; }
    .blog-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 超ワイド (フル HD 近辺): トップの記事カードを 3 列に */
@media (min-width: 1700px) {
    .blog-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* =====================================================================
   投稿エディタ (Facebook 流コンポーザー) + リンクプレビューカード
   ===================================================================== */
.composer { max-width: var(--sh-reading-width); margin: 0 auto; }

.composer__draft-banner {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    background: var(--sh-bg-2); border: 1px solid var(--sh-border);
    border-radius: 12px; padding: 12px 16px; margin-bottom: 16px;
    color: var(--sh-text); font-size: 0.92rem;
}
.composer__draft-banner button {
    background: transparent; border: 1px solid var(--sh-accent);
    color: var(--sh-accent); border-radius: 999px; padding: 4px 14px;
    font-size: 0.85rem; cursor: pointer;
}
.composer__draft-banner button:hover { background: var(--sh-accent); color: var(--sh-bg); }

.composer__card {
    background: var(--sh-bg-1); border: 1px solid var(--sh-border);
    border-radius: 16px; padding: 20px 22px 18px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

.composer__title {
    width: 100%; background: transparent; border: none; outline: none;
    color: var(--sh-text-strong); font-size: 1.45rem; font-weight: 700;
    line-height: 1.35; padding: 4px 0 10px;
    border-bottom: 1px solid var(--sh-border);
}
.composer__title::placeholder, .composer__body::placeholder { color: var(--sh-text-muted); opacity: 0.7; }

.composer__body {
    width: 100%; background: transparent; border: none; outline: none; resize: none;
    color: var(--sh-text); font-size: 1.02rem; line-height: 1.75;
    padding: 14px 0 4px; min-height: 180px; font-family: inherit;
}

.composer__meta {
    display: flex; justify-content: space-between; gap: 12px;
    color: var(--sh-text-muted); font-size: 0.8rem; line-height: 1.2;
    border-top: 1px dashed var(--sh-border); padding-top: 8px;
}

.composer__previews { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }

.composer__warning {
    margin-top: 12px; padding: 10px 14px; border-radius: 10px;
    background: rgba(216, 136, 68, 0.12); border: 1px solid rgba(216, 160, 80, 0.5);
    color: #e8c08a; font-size: 0.9rem; line-height: 1.42;
}

.composer__options { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 16px; }
.composer__option {
    display: flex; align-items: center; gap: 8px;
    color: var(--sh-text-muted); font-size: 0.88rem;
}
.composer__option select, .composer__option input {
    background: var(--sh-bg-2); border: 1px solid var(--sh-border); border-radius: 8px;
    color: var(--sh-text); padding: 6px 10px; font-size: 0.9rem; outline: none;
}
.composer__option select:focus, .composer__option input:focus { border-color: var(--sh-accent); }

.composer__actions { display: flex; align-items: center; gap: 16px; margin-top: 18px; }
.composer__publish {
    background: linear-gradient(135deg, var(--sh-accent), #c76f85);
    color: #fff; border: none; border-radius: 999px;
    padding: 10px 32px; font-size: 1rem; font-weight: 700; cursor: pointer;
    box-shadow: 0 4px 16px rgba(216, 136, 153, 0.35);
}
.composer__publish:hover { filter: brightness(1.08); }
.composer__cancel { color: var(--sh-text-muted); font-size: 0.9rem; }

/* ---------- リンクプレビューカード (エディタ / 記事詳細 共通) ---------- */
.link-card {
    display: flex; gap: 14px; align-items: stretch; overflow: hidden;
    background: var(--sh-bg-2); border: 1px solid var(--sh-border);
    border-radius: 12px; padding: 0; min-height: 72px;
    color: var(--sh-text); text-decoration: none;
}
.link-card--anchor:hover { border-color: var(--sh-accent); text-decoration: none; }
.link-card--loading {
    align-items: center; padding: 12px 16px;
    color: var(--sh-text-muted); font-size: 0.85rem;
}
.link-card--dead { border-color: rgba(216, 100, 80, 0.6); }
.link-card--dead .link-card__title { color: #e09a8a; }

.link-card__thumb {
    width: 128px; min-width: 128px; object-fit: cover;
    background: var(--sh-bg); border-right: 1px solid var(--sh-border);
}
.link-card__info {
    display: flex; flex-direction: column; justify-content: center; gap: 4px;
    padding: 10px 14px; min-width: 0;
}
.link-card__title {
    color: var(--sh-text-strong); font-weight: 600; font-size: 0.95rem; line-height: 1.42;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.link-card__desc {
    color: var(--sh-text-muted); font-size: 0.82rem; line-height: 1.42;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.link-card__host { color: var(--sh-accent-cyan); font-size: 0.75rem; line-height: 1.2; }

.blog-detail__links { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }

.nav-link--write { color: var(--sh-accent) !important; font-weight: 600; }

@media (max-width: 560px) {
    .link-card__thumb { width: 92px; min-width: 92px; }
    .composer__card { padding: 16px 14px 14px; }
}

/* =====================================================================
   MY メニュー (ダッシュボード) / 投稿記事一覧 / エディタ拡張
   ===================================================================== */
.mymenu, .myposts { width: 100%; margin: 0 auto; }

.mymenu__tiles {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px; margin-top: 8px;
}
.mymenu__tile {
    display: flex; flex-direction: column; gap: 6px;
    background: var(--sh-bg-1); border: 1px solid var(--sh-border);
    border-radius: 14px; padding: 18px 16px; text-decoration: none;
    color: var(--sh-text); transition: border-color .15s, transform .15s;
}
a.mymenu__tile:hover { border-color: var(--sh-accent); transform: translateY(-2px); text-decoration: none; }
.mymenu__tile--primary {
    background: linear-gradient(135deg, rgba(216,136,153,.18), rgba(120,160,220,.12));
    border-color: var(--sh-accent);
}
.mymenu__tile--soon { opacity: .5; cursor: default; }
.mymenu__tile--admin { border-style: dashed; }
.mymenu__tile-icon { font-size: 1.5rem; line-height: 1; }
.mymenu__tile-name { color: var(--sh-text-strong); font-weight: 700; font-size: 1.02rem; line-height: 1.3; }
.mymenu__tile-desc { color: var(--sh-text-muted); font-size: .8rem; line-height: 1.4; }

.mymenu__recent { margin-top: 28px; }

.myposts__filters { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 18px; }
.myposts__filters .chip { text-decoration: none; }

.myposts__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.myposts__item {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    background: var(--sh-bg-1); border: 1px solid var(--sh-border);
    border-radius: 12px; padding: 8px 16px;
}
.myposts__main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.myposts__title {
    color: var(--sh-text-strong); font-weight: 600; text-decoration: none;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    line-height: 1.3;
}
.myposts__title:hover { color: var(--sh-accent); }
.myposts__meta {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    color: var(--sh-text-muted); font-size: .8rem; line-height: 1.3;
}
.myposts__theme { color: var(--sh-accent-cyan); }
.myposts__no { opacity: .7; }
.myposts__actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.myposts__edit {
    border: 1px solid var(--sh-accent); color: var(--sh-accent);
    border-radius: 999px; padding: 4px 16px; font-size: .85rem; text-decoration: none;
}
.myposts__edit:hover { background: var(--sh-accent); color: var(--sh-bg); text-decoration: none; }
.myposts__delete-form { margin: 0; }
.myposts__delete {
    background: transparent; border: 1px solid rgba(216,100,80,.6); color: #e09a8a;
    border-radius: 999px; padding: 4px 16px; font-size: .85rem; cursor: pointer;
}
.myposts__delete:hover { background: rgba(216,100,80,.85); color: #fff; }

/* エディタ: ツールバー・下書きボタン・予約 */
.composer__toolbar {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 0 2px; border-top: 1px dashed var(--sh-border); margin-top: 6px;
}
.composer__tool {
    background: var(--sh-bg-2); border: 1px solid var(--sh-border); color: var(--sh-text);
    border-radius: 999px; padding: 6px 16px; font-size: .9rem; cursor: pointer;
}
.composer__tool:hover { border-color: var(--sh-accent); color: var(--sh-accent); }
.composer__tool-state { color: var(--sh-text-muted); font-size: .8rem; }
.composer__draft {
    background: transparent; border: 1px solid var(--sh-border); color: var(--sh-text);
    border-radius: 999px; padding: 10px 24px; font-size: .95rem; cursor: pointer;
}
.composer__draft:hover { border-color: var(--sh-accent-cyan); color: var(--sh-accent-cyan); }
.composer__option-hint { color: var(--sh-text-muted); font-size: .75rem; }
.composer__option input[type="datetime-local"] { color-scheme: dark; }

/* 状態チップ (下書き/予約) と本文内アップロード画像 */
.chip--state { border-color: var(--sh-accent); color: var(--sh-accent); }
.chip--accent { background: var(--sh-accent); color: var(--sh-bg); border-color: var(--sh-accent); }
.blog-detail__img {
    max-width: 100%; height: auto; border-radius: 10px;
    border: 1px solid var(--sh-border); margin: 8px 0; display: block;
}

@media (max-width: 560px) {
    .myposts__item { flex-direction: column; align-items: stretch; }
    .myposts__actions { justify-content: flex-end; }
}

/* 旧記事本文に含まれる <p> タグの段落間隔 */
.blog-detail__body p { margin: 0 0 0.9em; }
.blog-detail__body p:last-child { margin-bottom: 0; }


/* =====================================================================
   MY メニュー 左サイドバー (共通ナビ)
   ===================================================================== */
.my-layout {
    display: flex; gap: 28px; align-items: flex-start;
    max-width: var(--sh-site-width); margin: 0 auto;
}
.my-layout__content { flex: 1 1 auto; min-width: 0; margin: 0; }

.mymenu-nav {
    flex: 0 0 220px; position: sticky; top: 84px;
    background: var(--sh-bg-1); border: 1px solid var(--sh-border);
    border-radius: 14px; padding: 10px;
}
.mymenu-nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.mymenu-nav__link {
    display: block; padding: 10px 14px; border-radius: 10px;
    color: var(--sh-text); text-decoration: none; font-size: 0.95rem; line-height: 1.4;
}
a.mymenu-nav__link:hover { background: var(--sh-bg-2); color: var(--sh-accent); text-decoration: none; }
.mymenu-nav__link--active {
    background: linear-gradient(135deg, rgba(216,136,153,.22), rgba(120,160,220,.14));
    color: var(--sh-text-strong); font-weight: 700;
    border-left: 3px solid var(--sh-accent); padding-left: 11px;
}
.mymenu-nav__link--soon { opacity: .45; cursor: default; }
.mymenu-nav__sep { border-top: 1px dashed var(--sh-border); margin: 6px 8px; }

/* 拡大表示・モバイル: サイドバーを上部の横並びに */
@media (max-width: 860px) {
    .my-layout { flex-direction: column; gap: 16px; }
    .mymenu-nav { position: static; flex: none; width: 100%; }
    .mymenu-nav__list { flex-direction: row; flex-wrap: wrap; gap: 6px; }
    .mymenu-nav__link { padding: 8px 12px; font-size: 0.88rem; }
    .mymenu-nav__link--active { border-left: none; border-bottom: 3px solid var(--sh-accent); }
    .mymenu-nav__sep { display: none; }
}


/* 読み物ページ (記事詳細など) は読書幅に絞って中央寄せ */
.page-narrow { max-width: var(--sh-reading-width); margin: 0 auto; }


/* 投稿記事一覧: ページ送り */
.myposts__pager {
    display: flex; align-items: center; justify-content: center; gap: 18px;
    margin-top: 20px; padding-top: 16px; border-top: 1px dashed var(--sh-border);
}
.myposts__pager-link {
    border: 1px solid var(--sh-border); color: var(--sh-text);
    border-radius: 999px; padding: 6px 18px; font-size: .9rem; text-decoration: none;
}
a.myposts__pager-link:hover { border-color: var(--sh-accent); color: var(--sh-accent); }
.myposts__pager-link--disabled { opacity: .35; cursor: default; }
.myposts__pager-status { color: var(--sh-text-muted); font-size: .85rem; min-width: 60px; text-align: center; }


/* 投稿記事一覧: カードの通し番号バッジ */
.myposts__seq {
    flex-shrink: 0; min-width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    background: var(--sh-bg-2); border: 1px solid var(--sh-border);
    border-radius: 10px; color: var(--sh-text-muted);
    font-size: .85rem; font-weight: 700; font-variant-numeric: tabular-nums;
}


/* ===== プロフィール編集 ===== */
.myprofile__section-title {
    font-size: 1.02rem; font-weight: 700; color: var(--sh-text-strong);
    margin: 26px 0 12px; line-height: 1.3;
}
.myprofile__section-title::before { content: "✿ "; color: var(--sh-accent); }

.myprofile__photo-card {
    background: var(--sh-bg-1); border: 1px solid var(--sh-border);
    border-radius: 14px; padding: 16px 18px;
}
.myprofile__photo-card .myprofile__section-title { margin-top: 0; }
.myprofile__photo-row { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.myprofile__current { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.myprofile__current-label { color: var(--sh-text-muted); font-size: .78rem; line-height: 1.3; }
.myprofile__photo-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.myprofile__photo-actions .composer__tool { padding: 4px 14px; font-size: .85rem; }
.myprofile__hint { color: var(--sh-text-muted); font-size: .82rem; line-height: 1.4; margin: 0; }

/* クロップエディタ */
.cropper { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--sh-border); }
.cropper__stage { flex-shrink: 0; }
#cropCanvas {
    width: 280px; height: 280px; border-radius: 50%;
    border: 2px solid var(--sh-accent); background: var(--sh-bg);
    cursor: grab; touch-action: none; display: block;
}
#cropCanvas:active { cursor: grabbing; }
.cropper__controls { display: flex; flex-direction: column; gap: 14px; justify-content: center; min-width: 220px; }
.cropper__zoom-label { display: flex; flex-direction: column; gap: 6px; color: var(--sh-text); font-size: .9rem; line-height: 1.3; }
.cropper__zoom-label input[type="range"] { width: 100%; accent-color: var(--sh-accent); }
.cropper__buttons { display: flex; gap: 10px; flex-wrap: wrap; }
.cropper__status { color: var(--sh-accent-cyan); font-size: .85rem; line-height: 1.3; margin: 0; min-height: 1.2em; }

/* フォーム */
.myprofile__form { margin-top: 8px; }
.myprofile__grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px 16px;
}
.myprofile__grid label {
    display: flex; flex-direction: column; gap: 4px;
    color: var(--sh-text-muted); font-size: .82rem; line-height: 1.3;
}
.myprofile__grid input, .myprofile__introduce {
    background: var(--sh-bg-1); border: 1px solid var(--sh-border); border-radius: 8px;
    color: var(--sh-text); padding: 8px 10px; font-size: .95rem; font-family: inherit;
    outline: none; width: 100%;
}
.myprofile__grid input:focus, .myprofile__introduce:focus { border-color: var(--sh-accent); }
.myprofile__wide { grid-column: 1 / -1; }
.myprofile__introduce { resize: vertical; line-height: 1.5; }
.myprofile__submit-row { margin-top: 20px; }

@media (max-width: 560px) {
    .cropper { justify-content: center; }
}


/* 投稿エディタ: 本文中画像のサムネイルプレビュー */
.composer__imgs { display: flex; flex-wrap: wrap; gap: 10px; }
.composer__imgthumb {
    width: 120px; height: 90px; object-fit: cover;
    border-radius: 8px; border: 1px solid var(--sh-border);
    background: var(--sh-bg);
}


/* 投稿前プレビュー画面 */
.pubpreview { max-width: var(--sh-reading-width); margin: 0 auto; }
.pubpreview__note {
    color: var(--sh-accent); font-size: .9rem; line-height: 1.4;
    border: 1px dashed var(--sh-accent); border-radius: 10px;
    padding: 10px 16px; margin-bottom: 18px;
    background: var(--sh-accent-bg, rgba(242,166,184,.06));
}
.pubpreview__frame {
    background: var(--sh-bg-1); border: 1px solid var(--sh-border);
    border-radius: 14px; padding: 26px 28px;
}
.pubpreview__actions { display: flex; align-items: center; gap: 14px; margin-top: 20px; }
@media (max-width: 560px) {
    .pubpreview__frame { padding: 18px 14px; }
}


/* リッチ編集エリア (contenteditable) */
.composer__body--rich {
    min-height: 200px; max-height: 900px; overflow-y: auto;
    white-space: pre-wrap; cursor: text;
}
.composer__body--rich:focus { outline: none; }
.composer__body--rich:empty::before {
    content: attr(data-placeholder);
    color: var(--sh-text-muted); opacity: .7; pointer-events: none;
}
.composer__inline-img {
    display: block; max-width: 100%;
    border-radius: 8px; margin: 6px 0; cursor: pointer;
}
.composer__inline-img--selected { outline: 2px solid var(--sh-accent); outline-offset: 2px; }

/* 画像サイズ変更ツールバー */
.imgtb {
    position: fixed; z-index: 60; display: flex; gap: 2px; align-items: center;
    background: var(--sh-bg-2); border: 1px solid var(--sh-border);
    border-radius: 999px; padding: 4px 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.45);
}
.imgtb button {
    background: transparent; border: none; color: var(--sh-text);
    font-size: .85rem; padding: 4px 12px; border-radius: 999px; cursor: pointer;
    line-height: 1.3;
}
.imgtb button:hover { background: var(--sh-bg-card-hover); }
.imgtb__btn--on { background: var(--sh-accent); color: var(--sh-bg); }
.imgtb__del { color: #e09a8a; }


/* ===== SoftonHouse トレードマーク (豚アイコン + ワードマーク) ===== */
.sitemark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.sitemark__pig { flex-shrink: 0; }
.sitemark__word {
    font-family: Georgia, "Times New Roman", "Yu Mincho", serif;
    font-weight: 700; letter-spacing: 0.06em; line-height: 1;
    background: linear-gradient(100deg, var(--sh-accent) 0%, #c98ad9 55%, #a88ad9 100%);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
}
.sitemark__cap { font-size: 1.4em; }

/* ナビバー内 (小) */
.sitemark--nav .sitemark__word { font-size: 1.05rem; }
.sitemark--nav:hover .sitemark__word { filter: brightness(1.15); }

/* トップページヒーロー (大) */
.page-header--brand { display: flex; flex-direction: column; gap: 14px; }
.sitemark--hero { gap: 18px; }
.sitemark--hero .sitemark__word { font-size: clamp(2rem, 6vw, 3.4rem); }
@media (max-width: 540px) {
    .sitemark--hero .sitemark__pig { width: 52px; height: 52px; }
}


/* ===== コメント (現代風) ===== */
.comments { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--sh-border); }
.comments__title {
    font-size: 1.05rem; font-weight: 600; letter-spacing: 0.04em;
    color: var(--sh-text-strong); margin: 0 0 16px;
}
.comments__title::before { content: "✿ "; color: var(--sh-accent); }
.comments__count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 26px; height: 22px; margin-left: 8px; padding: 0 8px;
    background: var(--sh-bg-2); border: 1px solid var(--sh-border);
    border-radius: 999px; font-size: .78rem; color: var(--sh-text-muted);
    font-variant-numeric: tabular-nums;
}
.comments__flash {
    color: var(--sh-accent); font-size: .88rem; line-height: 1.4;
    border: 1px dashed var(--sh-accent); border-radius: 10px;
    padding: 8px 14px; margin-bottom: 14px;
}
.comments__empty, .comments__login { color: var(--sh-text-muted); font-size: .92rem; line-height: 1.5; }
.comments__login a { color: var(--sh-accent); }

.comments__list { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.comments__item { display: flex; gap: 10px; margin: 0; }
.comments__avatar { flex-shrink: 0; padding-top: 2px; }
.comments__avatar .blog-list__avatar { width: 34px; height: 34px; font-size: .82rem; }
.comments__bubble {
    flex: 1 1 auto; min-width: 0;
    background: var(--sh-bg-card); border: 1px solid var(--sh-border-soft);
    border-radius: 4px 14px 14px 14px; padding: 10px 14px;
}
.comments__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; line-height: 1.3; }
.comments__name { color: var(--sh-accent-cyan); font-weight: 600; font-size: .9rem; text-decoration: none; }
a.comments__name:hover { text-decoration: underline; }
.comments__date { color: var(--sh-text-faint); font-size: .75rem; font-family: var(--sh-font-mono); }
.comments__delete-form { margin: 0 0 0 auto; }
.comments__delete {
    background: transparent; border: none; color: var(--sh-text-faint);
    font-size: .8rem; cursor: pointer; padding: 0 4px; line-height: 1;
}
.comments__delete:hover { color: #e09a8a; }
.comments__body { margin-top: 4px; color: var(--sh-text); font-size: .95rem; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }

.comments__form { margin-top: 6px; }
.comments__input {
    width: 100%; background: var(--sh-bg-1); border: 1px solid var(--sh-border);
    border-radius: 12px; color: var(--sh-text); padding: 10px 14px;
    font-family: inherit; font-size: .95rem; line-height: 1.5; resize: vertical;
}
.comments__input:focus { outline: none; border-color: var(--sh-accent); }
.comments__form-actions { display: flex; justify-content: flex-end; margin-top: 8px; }
.comments__submit {
    background: var(--sh-accent); color: var(--sh-bg); border: none;
    border-radius: 999px; padding: 7px 22px; font-size: .9rem; font-weight: 600; cursor: pointer;
}
.comments__submit:hover { filter: brightness(1.1); }


/* ===== MY メニュー: コメント一覧 ===== */
.mycmt__list { margin-top: 4px; }
.mycmt__bubble { border-radius: 14px; }
.mycmt__article {
    color: var(--sh-text-muted); font-size: .78rem; line-height: 1.3; margin-bottom: 6px;
}
.mycmt__article a { color: var(--sh-accent-cyan); text-decoration: none; }
.mycmt__article a:hover { text-decoration: underline; }
.mycmt__actions {
    display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap;
    margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--sh-border);
}
.mycmt__panel { flex: 0 1 auto; min-width: 0; }
.mycmt__panel[open] { flex: 1 1 100%; }
.mycmt__action {
    display: inline-block; background: transparent; border: none;
    color: var(--sh-text-muted); font-size: .82rem; cursor: pointer;
    padding: 2px 4px; line-height: 1.4; list-style: none;
}
.mycmt__panel summary::-webkit-details-marker { display: none; }
.mycmt__action:hover { color: var(--sh-accent); }
.mycmt__action--danger:hover { color: #e09a8a; }
.mycmt__form { margin-top: 8px; }
.mycmt__delete-form { margin: 0; }


/* ===== フッター帯 ===== */
.site-footer {
    margin-top: 48px;
    background: var(--sh-bg-1);
    border-top: 1px solid var(--sh-border);
}
.site-footer__inner {
    max-width: var(--sh-site-width); margin: 0 auto;
    padding: 26px clamp(16px, 4vw, 40px) 30px;
    display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px;
}
.site-footer__brand { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.sitemark--footer .sitemark__word { font-size: 1rem; }
.site-footer__powered {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--sh-text-faint); font-size: .78rem;
}
.site-footer__powered img { height: 26px; width: auto; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-left: auto; }
.site-footer__links a {
    color: var(--sh-text-muted); font-size: .88rem; text-decoration: none; line-height: 1.4;
}
.site-footer__links a:hover { color: var(--sh-accent); }
/* ハブリンバッジ: 中央下段 (コピーライトの直上) */
.site-footer__powered--center {
    flex-basis: 100%; display: flex; justify-content: center;
    border-top: 1px dashed var(--sh-border); padding-top: 16px;
}
.site-footer__copy {
    flex-basis: 100%; margin: 0; color: var(--sh-text-faint); font-size: .78rem; line-height: 1.4;
    text-align: center;
}
@media (max-width: 560px) {
    .site-footer__links { margin-left: 0; }
}

/* ===== 利用規約ページ ===== */
.terms__body { color: var(--sh-text); font-size: .96rem; line-height: 1.7; }
.terms__body h2 {
    font-size: 1.05rem; font-weight: 600; color: var(--sh-text-strong);
    margin: 30px 0 10px; padding-bottom: 6px; border-bottom: 1px dashed var(--sh-border);
}
.terms__body h2::before { content: "✿ "; color: var(--sh-accent); }
.terms__body p { margin: 0 0 12px; }
.terms__body ol { margin: 0 0 12px; padding-left: 1.6em; }
.terms__body li { margin-bottom: 4px; line-height: 1.6; }
.terms__body a { color: var(--sh-accent); }


/* ===== SNS 共有ボタン ===== */
.share { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.share__label { color: var(--sh-text-muted); font-size: .82rem; margin-right: 4px; }
.share__btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--sh-bg-2); border: 1px solid var(--sh-border);
    color: var(--sh-text); border-radius: 999px;
    padding: 6px 14px; font-size: .82rem; line-height: 1.3;
    text-decoration: none; cursor: pointer;
    transition: border-color .15s ease, color .15s ease, transform .15s ease;
}
.share__btn:hover { transform: translateY(-1px); text-decoration: none; }
.share__btn--x:hover { border-color: #9db3c8; color: #cfe2f3; }
.share__btn--fb:hover { border-color: #6a8dd0; color: #9db8ee; }
.share__btn--line:hover { border-color: #4fc06a; color: #7fdd97; }
.share__btn--copy:hover { border-color: var(--sh-accent); color: var(--sh-accent); }

/* 記事下の共有列 */
.blog-detail__share {
    margin-top: 30px; padding-top: 18px;
    border-top: 1px dashed var(--sh-border);
}

/* フッター内の共有列 */
.site-footer__share { flex-basis: 100%; }


/* フッター最上部・中央の大型共有ボタン (今どき SNS 風) */
.site-footer__share--hero {
    flex-basis: 100%;
    padding-bottom: 18px; margin-bottom: 4px;
    border-bottom: 1px dashed var(--sh-border);
}
.site-footer__share--hero .share { justify-content: center; gap: 12px; }
.site-footer__share--hero .share__label {
    flex-basis: 100%; text-align: center; margin: 0 0 4px;
    font-size: 1rem; font-weight: 600; color: var(--sh-text-strong);
    letter-spacing: 0.06em;
}
.site-footer__share--hero .share__label::before { content: "✿ "; color: var(--sh-accent); }
.site-footer__share--hero .share__btn {
    padding: 12px 26px; font-size: 1rem; gap: 9px;
    border-width: 2px;
}
.site-footer__share--hero .share__btn svg { width: 21px; height: 21px; }
@media (max-width: 560px) {
    .site-footer__share--hero .share__btn { padding: 10px 16px; font-size: .9rem; }
}


/* ===== 管理メニュー ===== */
/* ナビの管理者バッジ */
.nav-link--admin {
    border: 1px solid var(--sh-accent);
    border-radius: 999px;
    padding: 4px 14px !important;
    margin: 4px 6px;
    color: var(--sh-accent) !important;
    font-size: .85rem;
    line-height: 1.5;
}
.nav-link--admin:hover { background: var(--sh-accent); color: var(--sh-bg) !important; }

/* API キー設定 */
.apikeys__form { display: flex; flex-direction: column; gap: 16px; }
.apikeys__card {
    background: var(--sh-bg-card); border: 1px solid var(--sh-border);
    border-radius: 14px; padding: 18px 20px;
}
.apikeys__name {
    font-size: 1rem; font-weight: 600; color: var(--sh-text-strong); margin: 0 0 8px;
}
.apikeys__status { color: var(--sh-text-muted); font-size: .88rem; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.apikeys__badge {
    display: inline-block; border-radius: 999px; padding: 2px 12px; font-size: .78rem;
}
.apikeys__badge--ok { background: rgba(110, 220, 150, .12); color: #7fdd97; border: 1px solid rgba(110, 220, 150, .4); }
.apikeys__badge--none { background: var(--sh-bg-2); color: var(--sh-text-faint); border: 1px solid var(--sh-border); }
.apikeys__masked { color: var(--sh-text); font-family: var(--sh-font-mono); font-size: .85rem; }
.apikeys__label { display: block; color: var(--sh-text-muted); font-size: .85rem; }
.apikeys__input {
    display: block; width: 100%; margin-top: 6px;
    background: var(--sh-bg-1); border: 1px solid var(--sh-border); border-radius: 10px;
    color: var(--sh-text); padding: 10px 14px; font-family: var(--sh-font-mono); font-size: .9rem;
}
.apikeys__input:focus { outline: none; border-color: var(--sh-accent); }
.apikeys__actions { display: flex; align-items: center; gap: 14px; }

.apikeys__dangerzone {
    margin-top: 30px; padding: 18px 20px;
    border: 1px dashed rgba(224, 154, 138, .5); border-radius: 14px;
}
.apikeys__danger-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.apikeys__delete {
    background: transparent; border: 1px solid rgba(224, 154, 138, .5);
    color: #e09a8a; border-radius: 999px; padding: 6px 18px; font-size: .85rem; cursor: pointer;
}
.apikeys__delete:hover:not(:disabled) { background: rgba(224, 154, 138, .12); }
.apikeys__delete:disabled { opacity: .4; cursor: default; }


/* ===== 通知ベル (システムからのお知らせ) ===== */
.notif { display: flex; align-items: center; }
.notif__details { position: relative; }
.notif__bell {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    list-style: none; cursor: pointer; font-size: 1.15rem;
    padding: 6px 10px; border-radius: 999px; line-height: 1;
}
.notif__bell::-webkit-details-marker { display: none; }
.notif__bell:hover { background: var(--sh-bg-2); }
.notif__badge {
    position: absolute; top: 0; right: 0;
    min-width: 18px; height: 18px; padding: 0 5px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--sh-accent); color: var(--sh-bg);
    border-radius: 999px; font-size: .68rem; font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.notif__panel {
    position: absolute; right: 0; top: calc(100% + 10px); z-index: 100;
    width: min(360px, 88vw); max-height: 70vh; overflow-y: auto;
    background: var(--sh-bg-1); border: 1px solid var(--sh-border);
    border-radius: 14px; padding: 14px 16px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, .5);
}
.notif__head {
    font-size: .9rem; font-weight: 600; color: var(--sh-text-strong);
    padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px dashed var(--sh-border);
}
.notif__empty { color: var(--sh-text-muted); font-size: .88rem; margin: 0; }
.notif__item { padding: 8px 0; border-bottom: 1px solid var(--sh-border-soft); }
.notif__item:last-child { border-bottom: none; }
.notif__date { color: var(--sh-text-faint); font-size: .74rem; font-family: var(--sh-font-mono); }
.notif__body { margin: 3px 0 0; color: var(--sh-text); font-size: .9rem; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }

/* ===== 通報 (記事詳細) ===== */
.report { margin-top: 14px; }
.report__toggle {
    display: inline-block; list-style: none; cursor: pointer;
    color: var(--sh-text-faint); font-size: .82rem; padding: 2px 4px;
}
.report__toggle::-webkit-details-marker { display: none; }
.report__toggle:hover { color: #e09a8a; }
.report__form {
    margin-top: 10px; padding: 14px 16px;
    background: var(--sh-bg-card); border: 1px dashed rgba(224, 154, 138, .45);
    border-radius: 12px; display: flex; flex-direction: column; gap: 10px;
}
.report__label { color: var(--sh-text-muted); font-size: .85rem; display: flex; align-items: center; gap: 10px; }
.report__select {
    background: var(--sh-bg-1); border: 1px solid var(--sh-border); border-radius: 8px;
    color: var(--sh-text); padding: 6px 10px; font-size: .88rem;
}
.report__submit {
    background: transparent; border: 1px solid rgba(224, 154, 138, .6);
    color: #e09a8a; border-radius: 999px; padding: 6px 18px; font-size: .85rem; cursor: pointer;
}
.report__submit:hover { background: rgba(224, 154, 138, .12); }

/* ===== 管理: お知らせ管理 / 通報リスト ===== */
.annadmin__form { margin-bottom: 26px; }
.annadmin__list-title, .rptadmin__list-title {
    font-size: 1rem; font-weight: 600; color: var(--sh-text-strong); margin: 0 0 12px;
}
.annadmin__list, .rptadmin__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.annadmin__item, .rptadmin__item {
    background: var(--sh-bg-card); border: 1px solid var(--sh-border);
    border-radius: 12px; padding: 12px 16px;
}
.annadmin__item--stopped { opacity: .55; }
.annadmin__meta, .rptadmin__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.annadmin__toggle { margin-left: auto; }
.annadmin__body { margin: 8px 0 0; color: var(--sh-text); font-size: .92rem; line-height: 1.55; white-space: pre-wrap; }
.rptadmin__badge--open {
    background: rgba(224, 154, 138, .14); color: #e09a8a; border: 1px solid rgba(224, 154, 138, .5);
}
.rptadmin__reason { color: var(--sh-text-strong); font-size: .88rem; font-weight: 600; }
.rptadmin__article { color: var(--sh-accent-cyan); font-size: .84rem; text-decoration: none; margin-left: auto; }
.rptadmin__article:hover { text-decoration: underline; }
.rptadmin__detail { margin: 8px 0 0; color: var(--sh-text); font-size: .9rem; line-height: 1.5; white-space: pre-wrap; }
.rptadmin__reporter { margin-top: 6px; color: var(--sh-text-faint); font-size: .76rem; font-family: var(--sh-font-mono); }


/* ===== 記事詳細: 3 カラムレイアウト (デスクトップのみサイドバー表示) ===== */
/* 全ページ共通: Bootstrap container の上限 (1320px) を解除し、最大フル HD ぎりぎりまで可変 */
.container.body-content { max-width: 1900px; }
.navbar > .container { max-width: 1900px; }
.detail-layout { max-width: 1880px; margin: 0 auto; }
.detail-side { display: none; }

@media (min-width: 1140px) {
    .detail-layout {
        display: grid;
        grid-template-columns: 230px minmax(0, 1fr) 260px;
        gap: 26px;
        align-items: start;
    }
    /* 中央カラムは読書幅の上限を外してグリッド幅いっぱいに使う */
    .detail-layout__main.page-narrow { max-width: none; width: 100%; }
    .detail-side { display: block; position: sticky; top: 84px; }
    /* サイドバー表示中は記事下の関連記事を隠す (左サイドと重複するため) */
    .detail-layout .related-posts { display: none; }
}

/* サイドウィジェット共通 */
.sidew {
    background: var(--sh-bg-card); border: 1px solid var(--sh-border);
    border-radius: var(--sh-radius-md); padding: 16px 18px; margin-bottom: 16px;
}
.sidew__title {
    font-size: .82rem; font-weight: 600; letter-spacing: .08em;
    color: var(--sh-text-strong); margin-bottom: 12px;
    padding-bottom: 8px; border-bottom: 1px dashed var(--sh-border);
}
.sidew__title::before { content: "✿ "; color: var(--sh-accent); }

/* 著者カード */
.sidew--author { text-align: center; }
.sidew--author .sidew__title { text-align: left; }
.sidew__avatar { display: flex; justify-content: center; margin-bottom: 10px; }
.sidew__avatar .blog-list__avatar { width: 72px; height: 72px; font-size: 1.5rem; }
.sidew__author-name { color: var(--sh-text-strong); font-weight: 600; font-size: .98rem; }
.sidew__author-blog { color: var(--sh-accent); font-size: .82rem; margin-top: 2px; }
.sidew__author-intro {
    color: var(--sh-text-muted); font-size: .82rem; line-height: 1.55;
    margin: 8px 0 0; text-align: left;
}
.sidew__more {
    display: inline-block; margin-top: 12px;
    color: var(--sh-accent-cyan); font-size: .82rem; text-decoration: none;
}
.sidew__more:hover { text-decoration: underline; }

/* リスト (他の記事) */
.sidew__list { list-style: none; margin: 0; padding: 0; }
.sidew__list li { padding: 3px 0; border-bottom: 1px solid var(--sh-border-soft); line-height: 1.25; }
.sidew__list li:last-child { border-bottom: none; }
.sidew__list a {
    display: block; color: var(--sh-text); font-size: .85rem; line-height: 1.3; text-decoration: none;
    overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.sidew__list a:hover { color: var(--sh-accent); }
.sidew__list time { color: var(--sh-text-faint); font-size: .72rem; font-family: var(--sh-font-mono); }

/* 新着コメント */
.sidew__cmt-name { color: var(--sh-accent-cyan); font-size: .8rem; font-weight: 600; display: block; }
.sidew__cmt-msg { color: var(--sh-text-muted); font-size: .82rem; }

/* テーマチップ */
.sidew__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sidew__chips .chip { font-size: .76rem; }
.sidew__chip-count { color: var(--sh-text-faint); }

/* アクセスカウンタ (レトロへのオマージュ) */
.sidew__counter { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.sidew__counter > div { display: flex; align-items: baseline; }
.sidew__counter dt { color: var(--sh-text-muted); font-size: .82rem; font-weight: 500; }
.sidew__counter dd {
    margin: 0 0 0 auto; color: var(--sh-accent);
    font-family: var(--sh-font-mono); font-size: 1.05rem; font-variant-numeric: tabular-nums;
}
.sidew__counter-note { margin-top: 8px; color: var(--sh-text-faint); font-size: .7rem; line-height: 1.4; }


/* 記事内の管理者行 (旧 blog_disp.asp 互換: 経過日数 / 会員確認 / 公認 / IP 確認) */
.admin-inline {
    margin-top: 22px; padding: 6px 12px;
    border: 1px dashed var(--sh-border); border-radius: 8px;
    color: var(--sh-text-faint); font-size: .78rem; font-family: var(--sh-font-mono);
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.admin-inline a { color: var(--sh-accent-cyan); text-decoration: none; }
.admin-inline a:hover { text-decoration: underline; }
.admin-inline__sep { color: var(--sh-border); }
.admin-inline__good { color: var(--sh-accent); font-weight: 600; }

/* ===== 足跡 (Good) リアクション ===== */
.good { position: relative; margin-top: 26px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.good__btn {
    display: inline-flex; align-items: center; gap: 9px;
    background: var(--sh-bg-2); border: 2px solid var(--sh-accent);
    color: var(--sh-text-strong); border-radius: 999px;
    padding: 9px 20px; font-size: .95rem; font-weight: 600; cursor: pointer;
    transition: transform .15s ease, background .15s ease;
}
.good__btn:hover:not(:disabled) { transform: translateY(-1px); background: var(--sh-accent-bg-strong); }
.good__btn--done { border-color: var(--sh-border); opacity: .8; }
.good__btn img { border-radius: 4px; }
.good__total {
    background: var(--sh-accent); color: var(--sh-bg);
    border-radius: 999px; min-width: 24px; padding: 1px 8px;
    font-size: .8rem; font-variant-numeric: tabular-nums; text-align: center;
}
.good__bar {
    position: absolute; left: 0; bottom: calc(100% + 10px); z-index: 60;
    display: flex; gap: 4px; flex-wrap: wrap;
    background: var(--sh-bg-1); border: 1px solid var(--sh-border);
    border-radius: 999px; padding: 8px 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
}
.good__react {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    background: transparent; border: none; border-radius: 12px;
    padding: 6px 9px; cursor: pointer;
    transition: transform .12s ease, background .12s ease;
}
.good__react:hover { transform: translateY(-4px) scale(1.15); background: var(--sh-bg-card-hover); }
.good__emoji { font-size: 1.45rem; line-height: 1; }
.good__label { color: var(--sh-text-muted); font-size: .62rem; white-space: nowrap; }
.good__chips { display: flex; gap: 6px; flex-wrap: wrap; }
.good__chip {
    background: var(--sh-bg-card); border: 1px solid var(--sh-border-soft);
    border-radius: 999px; padding: 3px 10px; font-size: .82rem;
}
.good__chip-count { color: var(--sh-text-muted); font-size: .76rem; font-variant-numeric: tabular-nums; }
.good__thanks { color: var(--sh-accent); font-size: .88rem; font-weight: 600; }
@media (max-width: 560px) {
    .good__bar { left: 50%; transform: translateX(-50%); width: max-content; max-width: 92vw; }
}


/* ===== キャラクター配置 ===== */
.page-header__chara {
    position: absolute; right: 22px; bottom: 10px;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .4));
    transition: transform .25s ease;
}
.page-header__chara:hover { transform: rotate(-6deg) scale(1.08); }
@media (max-width: 640px) { .page-header__chara { width: 56px; height: 56px; right: 12px; } }

.chara-note { color: var(--sh-accent); font-size: .84rem; }
.chara-inline { vertical-align: -8px; margin-right: 8px; }
.chara-inline--sm { vertical-align: -7px; margin-right: 6px; }

.report__poli {
    display: flex; align-items: center; gap: 10px;
    color: var(--sh-text-muted); font-size: .8rem; line-height: 1.4;
}

/* エラーページ (シロトン) */
.errorpage { display: flex; justify-content: center; padding: 40px 0; }
.errorpage__card {
    text-align: center; max-width: 480px;
    background: var(--sh-bg-card); border: 1px solid var(--sh-border);
    border-radius: var(--sh-radius-lg); padding: 36px 32px;
}
.errorpage__card h1 { font-size: 1.3rem; color: var(--sh-text-strong); margin: 16px 0 10px; }
.errorpage__card p { color: var(--sh-text-muted); font-size: .92rem; line-height: 1.6; }
.errorpage__sub { color: var(--sh-accent) !important; font-size: .84rem !important; }
.errorpage__rid { font-family: var(--sh-font-mono); font-size: .74rem !important; }
.errorpage__card a { display: inline-block; margin-top: 14px; text-decoration: none; }


/* ===== 画像保管一覧 ===== */
.imggrid {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px;
}
.imggrid__item {
    background: var(--sh-bg-card); border: 1px solid var(--sh-border);
    border-radius: 12px; overflow: hidden; display: flex; flex-direction: column;
}
.imggrid__thumb { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--sh-bg-1); }
.imggrid__thumb img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .2s ease;
}
.imggrid__thumb:hover img { transform: scale(1.06); }
.imggrid__meta {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 6px 10px 0; color: var(--sh-text-faint);
    font-size: .72rem; font-family: var(--sh-font-mono);
}
.imggrid__actions {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 10px 10px;
}
.imggrid__copy {
    background: transparent; border: none; color: var(--sh-accent-cyan);
    font-size: .78rem; cursor: pointer; padding: 2px 0;
}
.imggrid__copy:hover { text-decoration: underline; }
.imggrid__del {
    background: transparent; border: none; color: var(--sh-text-faint);
    font-size: .78rem; cursor: pointer; padding: 2px 0;
}
.imggrid__del:hover { color: #e09a8a; }


/* ===== 管理: 登録者一覧 ===== */
.usradmin__search { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.usradmin__search input[type="text"] {
    background: var(--sh-bg-1); border: 1px solid var(--sh-border); border-radius: 999px;
    color: var(--sh-text); padding: 7px 16px; font-size: .9rem; min-width: 220px;
}
.usradmin__search input[type="text"]:focus { outline: none; border-color: var(--sh-accent); }
.usradmin__filter-sep { width: 1px; align-self: stretch; background: var(--sh-border); margin: 0 4px; }

.usradmin__scroll { overflow-x: auto; }
.usradmin__table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.usradmin__table th {
    text-align: left; color: var(--sh-text-faint); font-size: .72rem; font-weight: 600;
    letter-spacing: .04em; padding: 6px 8px; border-bottom: 1px solid var(--sh-border); white-space: nowrap;
}
.usradmin__table td {
    padding: 5px 8px; border-bottom: 1px solid var(--sh-border-soft);
    vertical-align: middle; line-height: 1.3;
}
.usradmin__table tbody tr:hover { background: var(--sh-bg-card-hover); }
.usradmin__tr--dead { opacity: .5; }
.usradmin__tr--vendor { background: rgba(232, 184, 75, .05); }
.usradmin__no {
    color: var(--sh-text-faint); font-family: var(--sh-font-mono); font-size: .78rem;
    text-align: right; white-space: nowrap; width: 1%;
}
.usradmin__avatar { width: 1%; }
.usradmin__avatar .blog-list__avatar { width: 30px; height: 30px; font-size: .78rem; }
.usradmin__uid { color: var(--sh-accent-cyan); font-weight: 600; font-size: .88rem; text-decoration: none; white-space: nowrap; }
.usradmin__uid:hover { text-decoration: underline; }
.usradmin__badge--good { background: var(--sh-accent-bg-strong); color: var(--sh-accent); border: 1px solid var(--sh-accent); }
.usradmin__badge--vendor { background: rgba(232, 184, 75, .12); color: #e8b84b; border: 1px solid rgba(232, 184, 75, .5); }
.usradmin__names { color: var(--sh-text-muted); font-size: .78rem; line-height: 1.3; }
.usradmin__sub { color: var(--sh-text-faint); font-size: .74rem; font-family: var(--sh-font-mono); white-space: nowrap; }
.usradmin__badges { white-space: nowrap; }
.usradmin__badges .apikeys__badge { margin-right: 4px; }
.usradmin__ops { white-space: nowrap; width: 1%; }
.usradmin__ops form { display: inline-block; margin: 0 2px 0 0; }
.usradmin__ops .mycmt__action { padding: 2px 6px; font-size: .78rem; }


/* ===== About ページ (情報 + キャラクター図鑑) ===== */
.aboutpage__intro p { color: var(--sh-text); line-height: 1.8; font-size: .95rem; }
.aboutpage__intro a { color: var(--sh-accent-cyan); }
.aboutpage__h2 {
    font-size: 1.1rem; color: var(--sh-text-strong); margin: 34px 0 6px;
    padding-bottom: 8px; border-bottom: 1px dashed var(--sh-border);
}
.aboutpage__h2::before { content: "✿ "; color: var(--sh-accent); }
.aboutpage__lead { color: var(--sh-text-muted); font-size: .86rem; margin-bottom: 18px; }

.charadex { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 720px) { .charadex { grid-template-columns: repeat(2, 1fr); } }
.charadex__card {
    display: flex; gap: 14px; align-items: flex-start;
    background: var(--sh-bg-card); border: 1px solid var(--sh-border);
    border-radius: var(--sh-radius-md); padding: 14px 16px;
    transition: transform .15s ease, border-color .15s ease;
}
.charadex__card:hover { transform: translateY(-2px); border-color: var(--sh-accent); }
.charadex__img { flex-shrink: 0; filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .35)); }
.charadex__card:hover .charadex__img { animation: charadex-bounce .5s ease; }
@keyframes charadex-bounce {
    0%, 100% { transform: rotate(0); }
    30% { transform: rotate(-8deg) scale(1.08); }
    60% { transform: rotate(6deg); }
}
.charadex__name { color: var(--sh-text-strong); font-weight: 700; font-size: .95rem; margin-bottom: 4px; }
.charadex__desc { color: var(--sh-text-muted); font-size: .82rem; line-height: 1.6; margin: 0 0 6px; }
.charadex__place { color: var(--sh-accent-cyan); font-size: .74rem; }


/* ===== お気に入りブログ ===== */
.favpage__form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.favpage__form input[type="text"], .favpage__form input[type="url"] {
    background: var(--sh-bg-1); border: 1px solid var(--sh-border); border-radius: 8px;
    color: var(--sh-text); padding: 7px 12px; font-size: .88rem; flex: 1 1 180px;
}
.favpage__form input:focus { outline: none; border-color: var(--sh-accent); }
.favpage__form .favpage__sno { flex: 0 0 64px; text-align: center; font-family: var(--sh-font-mono); }
.favpage__hint { color: var(--sh-text-faint); font-size: .76rem; margin-top: 8px; }
.favpage__list { list-style: none; margin: 0; padding: 0; }
.favpage__item {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 9px 6px; border-bottom: 1px solid var(--sh-border-soft);
}
.favpage__main { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.favpage__order { color: var(--sh-text-faint); font-family: var(--sh-font-mono); font-size: .74rem; }
.favpage__title { color: var(--sh-accent-cyan); font-weight: 600; font-size: .92rem; text-decoration: none; }
.favpage__title:hover { text-decoration: underline; }
.favpage__new {
    background: var(--sh-accent); color: var(--sh-bg); border-radius: 999px;
    padding: 1px 8px; font-size: .66rem; font-weight: 700; letter-spacing: .06em;
}
.favpage__last { color: var(--sh-text-faint); font-size: .74rem; font-family: var(--sh-font-mono); }
.favpage__cmt { color: var(--sh-text-muted); font-size: .8rem; }
.favpage__edit summary { color: var(--sh-text-muted); font-size: .8rem; cursor: pointer; list-style: none; }
.favpage__edit summary::-webkit-details-marker { display: none; }
.favpage__edit[open] { flex-basis: 100%; }
.favpage__edit[open] .favpage__form { margin-top: 8px; }

/* ===== あしあと表示 ===== */
.footprints__list { list-style: none; margin: 0; padding: 0; }
.footprints__item {
    display: flex; align-items: center; gap: 12px;
    padding: 9px 6px; border-bottom: 1px solid var(--sh-border-soft);
}
.footprints__emoji { font-size: 1.5rem; flex-shrink: 0; }
.footprints__body { flex: 1 1 auto; min-width: 0; }
.footprints__who { color: var(--sh-text); font-size: .86rem; }
.footprints__who a { color: var(--sh-accent-cyan); text-decoration: none; font-weight: 600; }
.footprints__who a:hover { text-decoration: underline; }
.footprints__label { color: var(--sh-text-muted); }
.footprints__article {
    display: block; color: var(--sh-text-muted); font-size: .8rem; text-decoration: none;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.footprints__article:hover { color: var(--sh-accent); }
.footprints__date {
    flex-shrink: 0; color: var(--sh-text-faint);
    font-size: .74rem; font-family: var(--sh-font-mono); white-space: nowrap;
}
@media (max-width: 560px) { .footprints__date { display: none; } }

/* ===== アクセス統計 ===== */
.mystats__cards { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.mystats__card {
    flex: 1 1 140px; background: var(--sh-bg-card); border: 1px solid var(--sh-border);
    border-radius: var(--sh-radius-md); padding: 14px 18px; display: flex; flex-direction: column;
}
.mystats__card dt { color: var(--sh-text-muted); font-size: .78rem; font-weight: 500; }
.mystats__card dd {
    margin: 4px 0 0; color: var(--sh-accent);
    font-family: var(--sh-font-mono); font-size: 1.5rem; font-variant-numeric: tabular-nums;
}
.mystats__h2 {
    font-size: 1rem; color: var(--sh-text-strong); margin: 28px 0 12px;
    padding-bottom: 8px; border-bottom: 1px dashed var(--sh-border);
}
.mystats__h2::before { content: "✿ "; color: var(--sh-accent); }

/* 日別バーグラフ (CSS のみ) */
.mystats__chart {
    display: flex; align-items: flex-end; gap: 3px;
    height: 160px; padding: 10px 6px 22px;
    background: var(--sh-bg-card); border: 1px solid var(--sh-border);
    border-radius: var(--sh-radius-md);
}
.mystats__bar-wrap { position: relative; flex: 1 1 0; height: 100%; display: flex; align-items: flex-end; }
.mystats__bar {
    width: 100%; background: linear-gradient(180deg, var(--sh-accent), var(--sh-accent-cyan));
    border-radius: 3px 3px 0 0; min-height: 2px; opacity: .85; transition: opacity .15s ease;
}
.mystats__bar-wrap:hover .mystats__bar { opacity: 1; }
.mystats__bar-label {
    position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%);
    color: var(--sh-text-faint); font-size: .64rem; font-family: var(--sh-font-mono); white-space: nowrap;
}

/* 記事別ランキング */
.mystats__rank { list-style: none; margin: 0; padding: 0; counter-reset: rank; }
.mystats__rank-item {
    display: grid; grid-template-columns: minmax(0, 1fr) 70px; grid-template-rows: auto auto;
    gap: 2px 10px; align-items: center;
    padding: 8px 4px; border-bottom: 1px solid var(--sh-border-soft);
}
.mystats__rank-item::before {
    counter-increment: rank; content: counter(rank) ".";
    grid-row: 1 / 3; display: none;
}
.mystats__rank-title {
    grid-column: 1; color: var(--sh-text); font-size: .88rem; text-decoration: none;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mystats__rank-title:hover { color: var(--sh-accent); }
.mystats__rank-bar {
    grid-column: 1; height: 6px; border-radius: 3px;
    background: linear-gradient(90deg, var(--sh-accent), var(--sh-accent-cyan));
    opacity: .7; min-width: 4px;
}
.mystats__rank-count {
    grid-column: 2; grid-row: 1 / 3; text-align: right;
    color: var(--sh-accent); font-family: var(--sh-font-mono);
    font-size: .92rem; font-variant-numeric: tabular-nums;
}
.mystats__devices { display: flex; gap: 8px; flex-wrap: wrap; }


/* ===== AI 執筆アシスタント (教授トンの AI 軍師) ===== */
.aiassist {
    margin-top: 10px; padding: 14px 16px;
    background: var(--sh-bg-card); border: 1px solid var(--sh-accent);
    border-radius: var(--sh-radius-md);
}
.aiassist__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.aiassist__title { color: var(--sh-text-strong); font-weight: 700; font-size: .92rem; }
.aiassist__remaining { margin-left: auto; color: var(--sh-text-faint); font-size: .76rem; font-family: var(--sh-font-mono); }
.aiassist__actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.aiassist__act {
    background: var(--sh-bg-2); border: 1px solid var(--sh-border); border-radius: 999px;
    color: var(--sh-text); padding: 6px 14px; font-size: .84rem; cursor: pointer;
    transition: border-color .15s ease, transform .12s ease;
}
.aiassist__act:hover:not(:disabled) { border-color: var(--sh-accent); transform: translateY(-1px); }
.aiassist__act:disabled { opacity: .5; cursor: wait; }
.aiassist__state { color: var(--sh-accent); font-size: .8rem; }
.aiassist__result {
    margin-top: 12px; padding: 12px 14px;
    background: var(--sh-bg-1); border: 1px dashed var(--sh-border); border-radius: 10px;
    color: var(--sh-text); font-size: .88rem; line-height: 1.7; white-space: pre-wrap;
    max-height: 300px; overflow-y: auto;
}
.aiassist__cand {
    padding: 6px 10px; border-radius: 8px; cursor: pointer; white-space: normal;
}
.aiassist__cand:hover { background: var(--sh-accent-bg-strong); color: var(--sh-text-strong); }
.aiassist__foot { display: flex; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.aiassist__hint { color: var(--sh-text-faint); font-size: .74rem; }


/* Google ログイン */
.login-card__divider {
    display: flex; align-items: center; gap: 10px; margin: 0;
    color: var(--sh-text-faint); font-size: .76rem;
}
/* ログイン画面をコンパクトに: ヘッダとカードの間隔を詰める */
.login-page .page-header { margin-bottom: 16px; }
.login-card__divider::before, .login-card__divider::after {
    content: ""; flex: 1; height: 1px; background: var(--sh-border);
}
.login-card__google {
    display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
    background: var(--sh-bg-card); color: var(--sh-text); border: 1px solid var(--sh-border);
    border-radius: 10px;
    padding: 10px 16px; font-size: .92rem; font-weight: 600; cursor: pointer;
    transition: box-shadow .15s ease, border-color .15s ease;
}
.login-card__google:hover { border-color: #8ab4f8; box-shadow: 0 2px 12px rgba(66, 133, 244, .3); }

/* ダッシュボード: 直近エラー */
.dash-errors { margin: -14px 0 24px; }
.dash-errors summary { color: #e09a8a; font-size: .84rem; cursor: pointer; }
.dash-errors ul { list-style: none; margin: 8px 0 0; padding: 0; }
.dash-errors li {
    padding: 6px 4px; border-bottom: 1px solid var(--sh-border-soft);
    color: var(--sh-text-muted); font-size: .8rem;
}
.dash-errors li time { color: var(--sh-text-faint); font-family: var(--sh-font-mono); margin-right: 8px; }
.dash-errors li b { color: var(--sh-text); font-weight: 600; margin-right: 6px; }

/* NG ワード編集 */
.ngwords { display: flex; flex-direction: column; gap: 8px; }
.ngwords__area {
    background: var(--sh-bg-1); border: 1px solid var(--sh-border); border-radius: 10px;
    color: var(--sh-text); padding: 10px 14px; font-size: .88rem; font-family: var(--sh-font-mono);
    resize: vertical; max-width: 560px;
}
.ngwords__area:focus { outline: none; border-color: var(--sh-accent); }

/* ===== 管理ダッシュボード (今日の動き) ===== */
.dash {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px; margin-bottom: 26px;
}
.dash__card {
    background: var(--sh-bg-card); border: 1px solid var(--sh-border);
    border-radius: var(--sh-radius-md); padding: 14px 16px;
    display: flex; flex-direction: column; text-decoration: none;
}
a.dash__card { transition: transform .15s ease, border-color .15s ease; }
a.dash__card:hover { transform: translateY(-2px); border-color: var(--sh-accent); }
.dash__card dt { color: var(--sh-text-muted); font-size: .78rem; font-weight: 500; }
.dash__card dd {
    margin: 4px 0 2px; color: var(--sh-accent);
    font-family: var(--sh-font-mono); font-size: 1.6rem; font-variant-numeric: tabular-nums;
}
.dash__sub { color: var(--sh-text-faint); font-size: .72rem; }
.dash__card--alert { border-color: #e09a8a; }
.dash__card--alert dd { color: #e09a8a; }

/* ===== AI 利用設定 (プロバイダ / モデルコンボ / フィルタ) ===== */
.aiconf__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.aiconf__row > label { flex: 0 0 170px; color: var(--sh-text-muted); font-size: .86rem; }
.aiconf__num, .aiconf__select, .aiconf__filter {
    background: var(--sh-bg-1); border: 1px solid var(--sh-border); border-radius: 8px;
    color: var(--sh-text); padding: 7px 12px; font-size: .88rem;
}
.aiconf__num { width: 100px; text-align: center; font-family: var(--sh-font-mono); }
.aiconf__select { min-width: 280px; max-width: 100%; font-family: var(--sh-font-mono); }
.aiconf__filter { width: 130px; }
.aiconf__num:focus, .aiconf__select:focus, .aiconf__filter:focus { outline: none; border-color: var(--sh-accent); }
.aiconf__fetch {
    background: var(--sh-bg-2); border: 1px solid var(--sh-border); border-radius: 8px;
    color: var(--sh-text); padding: 7px 16px; font-size: .84rem; cursor: pointer;
}
.aiconf__fetch:hover:not(:disabled) { border-color: var(--sh-accent); }
.aiconf__fetch:disabled { opacity: .5; cursor: wait; }
/* 保存ボタンは全幅にせずコンパクトに (親が縦 flex で stretch するため align-self で抑止) */
.aiconf__save { width: auto !important; align-self: flex-start; padding: 9px 40px !important; }
#aiConfState { color: var(--sh-accent); font-size: .8rem; margin-left: 10px; }
@media (max-width: 640px) { .aiconf__row > label { flex-basis: 100%; } }


/* AI 3 行まとめ */
.aisummary {
    background: var(--sh-bg-card); border: 1px dashed var(--sh-accent);
    border-radius: var(--sh-radius-md); padding: 10px 14px; margin-bottom: 14px;
}
.aisummary__head { display: flex; align-items: center; gap: 6px; color: var(--sh-accent); font-size: .76rem; font-weight: 700; margin-bottom: 4px; }
.aisummary__text { color: var(--sh-text); font-size: .86rem; line-height: 1.55; white-space: pre-wrap; }
.aisummary__genform { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.aisummary__err { color: #e09a8a; font-size: .76rem; }

/* 著者カードのバッジ (RSS / お気に入り) */
.sidew__badges { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.sidew__badge {
    display: inline-block; background: var(--sh-bg-2); border: 1px solid var(--sh-border);
    border-radius: 999px; color: var(--sh-text-muted); padding: 3px 12px;
    font-size: .72rem; text-decoration: none; cursor: pointer; line-height: 1.4;
}
.sidew__badge:hover { border-color: var(--sh-accent); color: var(--sh-accent); }
.sidew__badge--on {
    border-color: var(--sh-accent); color: var(--sh-accent);
    background: color-mix(in srgb, var(--sh-accent) 14%, var(--sh-bg-2));
    font-weight: 700;
}
.sidew__badge--on:hover { opacity: .8; }
.sidew__fav-msg { color: var(--sh-accent); font-size: .74rem; margin: 6px 0 0; }

/* 著者別 RSS リンク */
.profile-page__rss {
    display: inline-block; vertical-align: middle; margin-left: 10px;
    background: var(--sh-bg-2); border: 1px solid var(--sh-border); border-radius: 999px;
    color: var(--sh-text-muted); padding: 2px 10px; font-size: .68rem; text-decoration: none;
}
.profile-page__rss:hover { border-color: var(--sh-accent); color: var(--sh-accent); }

/* 人気記事ランキング (トップ) */
.poprank { list-style: none; margin: 0; padding: 0; counter-reset: pop; }
.poprank__item {
    counter-increment: pop; position: relative;
    padding: 3px 4px 3px 26px; border-bottom: 1px solid var(--sh-border-soft);
}
.poprank__item:last-child { border-bottom: none; }
.poprank__item::before {
    content: counter(pop); position: absolute; left: 0; top: 5px;
    width: 18px; height: 18px; border-radius: 5px; text-align: center; line-height: 18px;
    background: var(--sh-bg-2); color: var(--sh-text-muted);
    font-size: .7rem; font-family: var(--sh-font-mono);
}
.poprank__item:nth-child(1)::before,
.poprank__item:nth-child(2)::before,
.poprank__item:nth-child(3)::before { background: var(--sh-accent); color: var(--sh-bg); font-weight: 700; }
.poprank__title {
    display: block; color: var(--sh-text); font-size: .84rem; font-weight: 600; text-decoration: none;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.35;
}
.poprank__title:hover { color: var(--sh-accent); }
.poprank__meta { display: block; color: var(--sh-text-faint); font-size: .7rem; line-height: 1.2; margin-top: 0; }

/* 月別アーカイブ */
.archivepage__year {
    font-size: 1.05rem; color: var(--sh-text-strong); margin: 26px 0 10px;
    padding-bottom: 8px; border-bottom: 1px dashed var(--sh-border);
}
.archivepage__year::before { content: "✿ "; color: var(--sh-accent); }
.archivepage__months { display: flex; flex-wrap: wrap; gap: 8px; }
.archivepage__month {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--sh-bg-card); border: 1px solid var(--sh-border); border-radius: 999px;
    color: var(--sh-text); padding: 6px 14px; font-size: .86rem; text-decoration: none;
    transition: border-color .15s ease, transform .12s ease;
}
.archivepage__month:hover { border-color: var(--sh-accent); transform: translateY(-1px); color: var(--sh-accent); }
.archivepage__count { color: var(--sh-text-faint); font-size: .74rem; font-family: var(--sh-font-mono); }

/* 前後記事ナビ */
.postnav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 20px 0 0; }
.postnav__link {
    display: flex; flex-direction: column; gap: 1px;
    background: var(--sh-bg-card); border: 1px solid var(--sh-border);
    border-radius: var(--sh-radius-md); padding: 8px 14px; text-decoration: none;
    transition: transform .15s ease, border-color .15s ease;
}
/* 前後ナビがあるときは「一覧に戻る」との間隔を詰める (通常時の 56px+24px は本文との区切り用) */
.postnav + .blog-detail__nav { margin-top: 14px; padding-top: 0; border-top: none; }
a.postnav__link:hover { transform: translateY(-2px); border-color: var(--sh-accent); }
.postnav__link--next { text-align: right; align-items: flex-end; }
.postnav__link--empty { background: none; border: none; }
.postnav__dir { color: var(--sh-text-faint); font-size: .72rem; line-height: 1.4; }
.postnav__title {
    color: var(--sh-text); font-size: .85rem; font-weight: 600; line-height: 1.5;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
a.postnav__link:hover .postnav__title { color: var(--sh-accent); }
@media (max-width: 560px) { .postnav { grid-template-columns: 1fr; } .postnav__link--empty { display: none; } }

/* サイト内検索 */
.nav-item--search { display: flex; align-items: center; }
.nav-search__input {
    background: var(--sh-bg-1); border: 1px solid var(--sh-border); border-radius: 999px;
    color: var(--sh-text); padding: 5px 14px; font-size: .82rem; width: 170px;
    transition: width .2s ease, border-color .15s ease;
}
.nav-search__input:focus { outline: none; border-color: var(--sh-accent); width: 230px; }
@media (max-width: 991px) { .nav-search__input, .nav-search__input:focus { width: 100%; } }
.searchpage__form { display: flex; gap: 10px; margin-bottom: 22px; flex-wrap: wrap; }
.searchpage__input {
    flex: 1 1 280px; background: var(--sh-bg-1); border: 1px solid var(--sh-border);
    border-radius: 10px; color: var(--sh-text); padding: 9px 14px; font-size: .95rem;
}
.searchpage__input:focus { outline: none; border-color: var(--sh-accent); }
.searchpage__list { list-style: none; margin: 0; padding: 0; }
.searchpage__item { padding: 7px 4px; border-bottom: 1px solid var(--sh-border-soft); }
.searchpage__title { color: var(--sh-text-strong); font-weight: 700; font-size: .95rem; line-height: 1.4; text-decoration: none; }
.searchpage__title:hover { color: var(--sh-accent); }
.searchpage__meta { display: flex; align-items: center; gap: 8px; margin: 1px 0 2px; flex-wrap: wrap; line-height: 1.3; }
.searchpage__meta a { color: var(--sh-accent-cyan); font-size: .78rem; text-decoration: none; }
.searchpage__meta time { color: var(--sh-text-faint); font-size: .74rem; font-family: var(--sh-font-mono); }
.searchpage__excerpt {
    color: var(--sh-text-muted); font-size: .82rem; line-height: 1.5; margin: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* お散歩キャラ (画面下をゆっくり横切る) */
.stroll-chara {
    position: fixed; left: -100px; z-index: 6;
    pointer-events: none; opacity: .88;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .45));
    animation-name: stroll-lr; animation-timing-function: linear; animation-fill-mode: forwards;
}
.stroll-chara--flip {
    left: auto; right: -100px;
    animation-name: stroll-rl;
    transform: scaleX(-1);
}
@keyframes stroll-lr {
    from { translate: 0 0; }
    to   { translate: calc(100vw + 200px) 0; }
}
@keyframes stroll-rl {
    from { translate: 0 0; }
    to   { translate: calc(-100vw - 200px) 0; }
}

/* Google 連携ページ */
.glink__card {
    background: var(--sh-bg-card); border: 1px solid var(--sh-border);
    border-radius: var(--sh-radius-md); padding: 22px 26px; max-width: 560px;
}
.glink__h2 { font-size: .95rem; color: var(--sh-text-strong); margin: 0 0 12px; }
.glink__status { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.glink__email { color: var(--sh-accent-cyan); font-family: var(--sh-font-mono); font-size: .9rem; }
.glink__desc { color: var(--sh-text-muted); font-size: .84rem; line-height: 1.7; }
.glink__btn { max-width: 380px; margin-top: 6px; }

/* 新規登録: URL プレビュー */
.register__urlprev {
    display: block; margin-top: 3px;
    color: var(--sh-accent-cyan); font-size: .76rem; font-family: var(--sh-font-mono);
}

/* ログイン: 新規登録の案内 */
.login-card__note--signup {
    margin: 0; text-align: center;
    color: var(--sh-text-muted); font-size: .78rem; line-height: 1.65;
}


/* ===== ライトテーマ (html[data-theme="light"] で変数を上書き) ===== */
html[data-theme="light"] {
    --sh-bg:           #f2eaee;
    --sh-bg-1:         #ffffff;
    --sh-bg-2:         #e9dde4;
    --sh-bg-3:         #ddccd6;
    --sh-bg-card:      #fdfafc;
    --sh-bg-card-hover:#f7edf2;
    --sh-border:       #c4aab7;
    --sh-border-soft:  #d9c6d0;
    --sh-text:         #332c31;
    --sh-text-muted:   #64555e;
    --sh-text-strong:  #1e181c;
    --sh-text-faint:   #8d7d86;
    --sh-accent:       #c2416a;
    --sh-accent-soft:  #d9718f;
    --sh-accent-deep:  #a52f55;
    --sh-accent-cyan:  #1a7ba3;
    --sh-accent-bg:        rgba(194, 65, 106, 0.12);
    --sh-accent-bg-strong: rgba(194, 65, 106, 0.20);
    --sh-aux-1: rgba(194, 65, 106, 0.20);
    --sh-aux-2: rgba(126, 90, 185, 0.15);
    --sh-aux-3: rgba(215, 135, 90, 0.14);
    --sh-danger:       #b64848;
}
html[data-theme="light"] body { background-color: var(--sh-bg); color: var(--sh-text); }
html[data-theme="light"] .navbar.navbar-dark.bg-dark {
    background-color: var(--sh-bg-1) !important;
    border-bottom: 1px solid var(--sh-border);
}
html[data-theme="light"] .site-footer { background-color: var(--sh-bg-2); }
html[data-theme="light"] .stroll-chara { filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .18)); }

/* テーマ切替ボタン */
.theme-toggle {
    background: none; border: 1px solid var(--sh-border); border-radius: 999px;
    color: var(--sh-text-muted); padding: 4px 10px; font-size: .9rem; cursor: pointer;
    line-height: 1; margin-left: 10px;
}
.theme-toggle:hover { border-color: var(--sh-accent); color: var(--sh-accent); }