/* 記事一覧と本文。アプリの既存色を使用する。 */
.article-list-shell, .article-detail-shell { margin: 32px auto 64px; }
.article-list-shell > h1 { color: var(--navy); font-size: clamp(1.8rem, 4vw, 2.5rem); margin: 0; }
.article-list-shell .article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 28px; }
.article-card h2, .article-card h3 { line-height: 1.65; }
.article-card-date { display: block; margin: 0 18px 20px; color: var(--muted); font-size: .82rem; }
.article-breadcrumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; color: var(--muted); font-size: .9rem; }
.article-breadcrumbs a { text-decoration: underline; text-underline-offset: 4px; }
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 32px; align-items: start; }
.article-main { min-width: 0; }
.gourmet-article-content { border: 0; background: transparent; box-shadow: none; padding: 0; }
.article-heading h1 { color: var(--navy); font-size: clamp(1.65rem, 3vw, 2.35rem); line-height: 1.65; overflow-wrap: anywhere; margin: 0 0 20px; }
.article-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; color: var(--muted); font-size: .85rem; margin-bottom: 26px; }
.article-top-image { height: auto; aspect-ratio: 16 / 9; object-fit: cover; margin-bottom: 28px; }
.article-prose { font-size: 1.0625rem; line-height: 1.95; overflow-wrap: break-word; }
.article-prose h2 { margin: 48px 0 20px; padding: 14px 18px; background: #eee7d8; border-radius: 8px; font-size: 1.4rem; line-height: 1.7; color: var(--navy); }
.article-prose h3 { margin: 32px 0 16px; font-size: 1.15rem; line-height: 1.7; }
.article-prose :is(h2, h3) { scroll-margin-top: 92px; }
.article-prose p, .article-prose li { line-height: 1.95; font-weight: 400; }
.article-prose p { margin: 1.2em 0; }
.article-prose :is(ul, ol) { padding-left: 1.6em; }
.article-prose li + li { margin-top: .6em; }
.article-prose strong { font-weight: 700; }
.article-prose mark { color: inherit; font-weight: 700; background: linear-gradient(transparent 68%, #ffe28a 68%, #ffe28a 95%, transparent 95%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.article-prose a { font-weight: 500; text-underline-offset: 4px; }
.article-prose blockquote { margin: 24px 0; padding: 16px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; font-size: .93rem; }
.article-prose blockquote p { margin: 0; }
.article-prose code { background: #eee7d8; padding: .1em .3em; border-radius: 4px; font-size: .9em; }
.article-prose table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: .95rem; margin: 24px 0; }
.article-prose :is(th, td) { min-width: 9em; padding: 12px 16px; border: 1px solid var(--line); text-align: left; vertical-align: top; line-height: 1.8; }
.article-prose th { background: #eee7d8; }
.article-toc { padding: 20px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.article-toc h2 { margin: 0 0 12px; font-size: 1.05rem; color: var(--navy); }
.article-toc ol { margin: 0; padding-left: 1.5em; line-height: 1.8; }
.article-toc li + li { margin-top: 8px; }
.article-toc a { font-size: .93rem; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.article-search-cta { margin: 36px 0 24px; padding: 24px; border: 1px solid var(--line); background: var(--surface); border-radius: 8px; }
.article-search-cta p { margin: 0 0 16px; line-height: 1.8; font-weight: 700; }
.article-search-cta .shop-link { padding: 12px 20px; }
.article-sidebar { position: sticky; top: 94px; }
.article-sidebar h2 { margin: 0 0 16px; font-size: 1.1rem; color: var(--navy); }
.article-sidebar > a { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: .9rem; line-height: 1.7; }
.article-sidebar img { width: 80px; height: 52px; object-fit: cover; border-radius: 4px; }
.article-sidebar a:hover span { text-decoration: underline; }
.article-detail-shell a:focus-visible, .article-list-shell a:focus-visible { outline: 3px solid var(--leaf); outline-offset: 4px; }
@media (max-width: 980px) { .article-layout { grid-template-columns: minmax(0, 1fr); } .article-sidebar { position: static; } .article-sidebar > a { grid-template-columns: 120px minmax(0, 1fr); } .article-sidebar img { width: 120px; height: 68px; } }
@media (max-width: 640px) { .article-list-shell .article-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; } .article-heading h1 { color: var(--navy); font-size: 1.6rem; } .article-prose { font-size: 1rem; } .article-prose h2 { font-size: 1.2rem; padding: 12px 14px; } .article-toc { padding: 18px; } .article-search-cta { padding: 20px; } .article-search-cta .shop-link { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .article-card { transition: none; } }