/* guide.crowon.app v2 (server/guide.mjs). The shared CrowOn top bar comes from site-header.css; this file is the guide's
   own look: white #fff / black #000 page, system font, photo cards, a search box first, ink rules and numbered picks.
   Widths line up with the top bar: content 1280px, gutters 20 / 32 / 48px. Motion: press feedback and the FAQ only. */
:root {
  --bg: #fff; --ink: #1d1d1f; --sub: #6e6e73; --faint: #86868b; --rule: #e5e5ea; --soft: #f5f5f7; --inv: #1d1d1f; --inv-ink: #fff;
  --g: 20px; --w: 1280px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #000; --ink: #f5f5f7; --sub: #a1a1a6; --faint: #86868b; --rule: #2c2c2e; --soft: #1c1c1e; --inv: #f5f5f7; --inv-ink: #000; }
}
@media (min-width: 768px) { :root { --g: 32px; } }
@media (min-width: 1200px) { :root { --g: 48px; } }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--bar-h, 44px) + 16px); }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.85 -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Segoe UI", "Noto Sans JP", Meiryo, sans-serif; line-break: strict; overflow-wrap: anywhere; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
main svg, .g-foot svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.nb { display: inline-block; }
.g-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.g-wrap { max-width: calc(var(--w) + var(--g) * 2); margin: 0 auto; padding: 0 var(--g); min-width: 0; }
.g-narrow { max-width: calc(760px + var(--g) * 2); }
.g-skip { position: absolute; left: -9999px; }
.g-skip:focus { left: 16px; top: 16px; z-index: 50; background: var(--inv); color: var(--inv-ink); padding: 8px 14px; }
main :focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
::-webkit-scrollbar { display: none; }

.g-kicker { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--sub); }
.g-kicker a { text-decoration: none; }
.g-kicker a:hover { color: var(--ink); }
.g-count { margin: 12px 0 0; font-size: 14px; color: var(--sub); }
.g-crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 0; padding: 16px 0 0; list-style: none; font-size: 12px; color: var(--sub); }
.g-crumbs li + li::before { content: "›"; margin-right: 6px; color: var(--faint); }
.g-crumbs a { text-decoration: none; }
.g-crumbs a:hover { text-decoration: underline; }
.g-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 20px; border-radius: 999px; background: var(--inv); color: var(--inv-ink); font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.g-btn:active { transform: scale(.97); }
.g-btn em { font-style: normal; font-size: 11px; padding: 1px 5px; border: 1px solid currentColor; border-radius: 4px; }

.g-search { display: flex; align-items: center; gap: 8px; max-width: 640px; height: 48px; padding: 0 6px 0 16px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--bg); }
.g-search svg { width: 18px; height: 18px; color: var(--sub); }
.g-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: var(--ink); font: inherit; font-size: 16px; outline: none; }
.g-search input::-webkit-search-cancel-button { display: none; }
.g-search button { height: 36px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--inv); color: var(--inv-ink); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.g-search button:active { transform: scale(.97); }
.g-search.big { height: 56px; }
.g-search.big button { height: 44px; padding: 0 22px; }
.g-quick { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.g-quick a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; background: var(--soft); font-size: 13px; font-weight: 600; text-decoration: none; }
.g-quick a:active { transform: scale(.97); }

.g-home-top { padding: 48px 0 40px; }
.g-home-top h1 { margin: 0; font-size: 48px; line-height: 1.25; font-weight: 800; letter-spacing: -.01em; }
.g-home-lead { max-width: 640px; margin: 14px 0 24px; font-size: 17px; color: var(--sub); }

.g-sec { padding: 40px 0 8px; }
.g-sec-top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.g-sec-h { margin: 0 0 18px; font-size: 24px; line-height: 1.4; font-weight: 800; }
.g-sec-h a { text-decoration: none; }
.g-all { display: inline-flex; align-items: center; gap: 2px; font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; color: var(--sub); }
.g-all:hover { color: var(--ink); }

.g-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px 20px; margin: 0; padding: 0; list-style: none; }
.g-cats a { display: block; text-decoration: none; }
.g-cat-pic { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 12px; background: var(--soft); }
.g-cat-pic img { width: 100%; height: 100%; object-fit: cover; }
.g-cats b { display: block; margin-top: 10px; font-size: 17px; line-height: 1.4; }
.g-cats span:last-child { font-size: 13px; color: var(--sub); }
.g-cats a:active .g-cat-pic { transform: scale(.98); }
.g-cats.small { grid-template-columns: repeat(7, 1fr); gap: 16px 14px; }
.g-cats.small b { font-size: 14px; }

.g-cards { display: grid; gap: 28px 20px; margin: 0; padding: 0; list-style: none; }
.g-cards.four { grid-template-columns: repeat(4, 1fr); }
.g-cards.three { grid-template-columns: repeat(3, 1fr); margin-bottom: 40px; }
.g-cards.pop { grid-template-columns: repeat(4, 1fr); }
.g-cards.pop .lead { grid-column: span 2; grid-row: span 2; }
.g-card a { display: block; text-decoration: none; }
.g-card-pic { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 12px; background: var(--soft); }
.g-card-pic img { width: 100%; height: 100%; object-fit: cover; }
.g-card-k { display: block; margin-top: 12px; font-size: 12px; font-weight: 700; color: var(--sub); }
.g-card-t { display: block; margin-top: 2px; font-size: 17px; line-height: 1.5; font-weight: 700; }
.g-card-d { display: block; margin-top: 4px; font-size: 12px; color: var(--faint); }
.g-card a:hover .g-card-t { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.g-card a:active .g-card-pic { transform: scale(.98); }
.g-cards.pop .lead .g-card-t { font-size: 26px; line-height: 1.4; }

.g-cathead { display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px; align-items: center; padding: 24px 0 40px; }
.g-cathead h1 { margin: 0; font-size: 44px; line-height: 1.25; font-weight: 800; }
.g-cathead-t p:not(.g-kicker):not(.g-count) { margin: 14px 0 0; font-size: 17px; color: var(--sub); }
.g-cathead figure { margin: 0; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 16px; background: var(--soft); }
.g-cathead figure img { width: 100%; height: 100%; object-fit: cover; }

.g-searchhead { padding: 24px 0 32px; }
.g-searchhead h1 { margin: 0 0 18px; font-size: 32px; line-height: 1.35; font-weight: 800; }
.g-empty { padding: 8px 0 24px; color: var(--sub); }

.g-art-head { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; padding-top: 20px; padding-bottom: 32px; }
.g-art-head h1 { margin: 0; font-size: 36px; line-height: 1.38; font-weight: 800; }
.g-meta { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 14px 0 0; font-size: 13px; color: var(--sub); }
.g-hero-pic { margin: 0; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 16px; background: var(--soft); }
.g-hero-pic img { width: 100%; height: 100%; object-fit: cover; }
.g-art-grid { display: grid; grid-template-columns: 220px minmax(0, 760px); justify-content: start; gap: 64px; }
.g-side { position: relative; }
.g-toc { position: sticky; top: calc(var(--bar-h, 44px) + 24px); padding: 4px 18px 0 0; border-right: 2px solid var(--rule); max-height: calc(100vh - var(--bar-h, 44px) - 48px); overflow-y: auto; scrollbar-width: none; }
.g-toc p { margin: 0 0 8px; font-size: 12px; font-weight: 800; color: var(--sub); }
.g-toc ol, .g-toc-m ol { margin: 0; padding: 0; list-style: none; counter-reset: t; font-size: 14px; line-height: 1.5; }
.g-toc li, .g-toc-m li { counter-increment: t; }
.g-toc a, .g-toc-m a { display: flex; gap: 8px; padding: 6px 0; text-decoration: none; color: var(--sub); }
.g-toc a::before, .g-toc-m a::before { content: counter(t); min-width: 1.2em; font-weight: 700; color: var(--faint); }
.g-toc a:hover, .g-toc-m a:hover { color: var(--ink); }
.g-toc-m { display: none; margin: 24px 0 0; border: 1px solid var(--rule); border-radius: 12px; }
.g-toc-m summary { list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: 48px; padding: 0 16px; font-weight: 700; cursor: pointer; }
.g-toc-m summary::-webkit-details-marker { display: none; }
.g-toc-m summary::after { content: "+"; font-size: 22px; font-weight: 400; color: var(--sub); }
.g-toc-m[open] summary::after { content: "−"; }
.g-toc-m ol { padding: 0 16px 12px; }

.g-body h2 { margin: 56px 0 18px; padding-top: 14px; border-top: 3px solid var(--ink); font-size: 26px; line-height: 1.4; font-weight: 800; }
.g-body h3 { margin: 28px 0 8px; font-size: 19px; line-height: 1.5; font-weight: 700; }
.g-body p { margin: 0 0 14px; }
.g-body p a, .g-src a { text-underline-offset: 3px; }
.g-lead { font-size: 17px; }
.g-note { font-size: 13px; color: var(--sub); }
.g-prnote { padding: 12px 14px; font-size: 13px; line-height: 1.7; color: var(--sub); background: var(--soft); border-radius: 10px; }
.g-about-h { margin: 16px 0 8px; font-size: 36px; line-height: 1.35; font-weight: 800; }

.g-points { margin: 24px 0 0; padding: 18px 20px; background: var(--soft); border-radius: 12px; }
.g-body .g-points-h { margin: 0 0 6px; font-size: 13px; font-weight: 800; }
.g-points ul { margin: 0; padding: 0 0 0 1.2em; font-size: 15px; line-height: 1.8; }

.g-verdict { margin: 28px 0 0; padding: 24px 24px 22px; background: var(--inv); color: var(--inv-ink); border-radius: 14px; }
.g-verdict .g-verdict-h { margin: 0 0 4px; font-size: 13px; font-weight: 800; opacity: .7; }
.g-verdict .g-verdict-n { margin: 0 0 10px; font-size: 26px; line-height: 1.4; font-weight: 800; }
.g-verdict p { margin: 0; font-size: 16px; }
.g-verdict ul { margin: 18px 0 0; padding: 14px 0 0; list-style: none; border-top: 1px solid color-mix(in srgb, var(--inv-ink) 22%, transparent); font-size: 14px; }
.g-verdict li { display: flex; gap: 14px; padding: 4px 0; }
.g-verdict li span { flex: none; width: 15em; opacity: .7; }

.g-table { overflow-x: auto; scrollbar-width: none; margin: 4px 0 0; border: 1px solid var(--rule); border-radius: 12px; }
.g-table table { width: 100%; min-width: 680px; border-collapse: collapse; font-size: 14px; line-height: 1.6; }
.g-table th, .g-table td { padding: 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); }
.g-table tr:last-child th, .g-table tr:last-child td { border-bottom: 0; }
.g-table thead th { font-size: 12px; font-weight: 700; color: var(--sub); background: var(--soft); white-space: nowrap; }
.g-table tbody th { font-weight: 700; min-width: 150px; position: sticky; left: 0; background: var(--bg); }
.g-table tbody th a { display: flex; gap: 8px; align-items: baseline; text-decoration: none; }
.g-rank { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--inv); color: var(--inv-ink); font-size: 12px; font-weight: 800; line-height: 1; }

.g-pick { padding: 4px 0 32px; }
.g-pick + .g-pick { border-top: 1px solid var(--rule); }
.g-body .g-pick h3 { display: flex; align-items: center; gap: 12px; margin: 28px 0 10px; font-size: 23px; line-height: 1.4; font-weight: 800; }
.g-pick h3 .g-rank { width: 30px; height: 30px; font-size: 14px; }
.g-fit { font-size: 15px; font-weight: 600; }
.g-fit span { margin-right: 10px; padding: 2px 8px; border-radius: 6px; background: var(--soft); font-size: 12px; font-weight: 700; color: var(--sub); }
.g-spec { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px; margin: 14px 0 18px; background: var(--rule); border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; }
.g-spec div { padding: 10px 14px; background: var(--bg); }
.g-spec dt { font-size: 12px; font-weight: 700; color: var(--sub); }
.g-spec dd { margin: 2px 0 0; font-size: 14px; line-height: 1.6; font-weight: 600; }
.g-pc { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 18px 0 0; }
.g-pc > div { padding: 14px 16px; border-radius: 10px; background: var(--soft); }
.g-body .g-pc h4 { margin: 0 0 4px; font-size: 13px; font-weight: 800; }
.g-pc ul { margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 1.7; }
.g-pc li { position: relative; padding: 3px 0 3px 18px; }
.g-pc div:first-child li::before { content: ""; position: absolute; left: 1px; top: 11px; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }
.g-pc div:last-child li::before { content: ""; position: absolute; left: 0; top: 14px; width: 9px; height: 2px; background: var(--sub); }
.g-body .g-go { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; }

.g-step { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-right: 10px; border-radius: 50%; border: 1.5px solid var(--ink); font-size: 13px; font-weight: 800; vertical-align: 2px; }
.g-steps { margin: 0; padding: 0; list-style: none; counter-reset: s; }
.g-steps li { counter-increment: s; position: relative; padding: 0 0 18px 44px; }
.g-steps li::before { content: counter(s); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--inv); color: var(--inv-ink); font-size: 13px; font-weight: 800; }
.g-steps li::after { content: ""; position: absolute; left: 13px; top: 32px; bottom: 4px; width: 2px; background: var(--rule); }
.g-steps li:last-child::after { display: none; }
.g-steps b { display: block; font-size: 16px; line-height: 1.6; }
.g-steps p { margin: 4px 0 0; font-size: 15px; }
.g-miss { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.g-miss li { padding: 14px 16px; border: 1px solid var(--rule); border-radius: 12px; }
.g-miss b { display: block; font-size: 15px; }
.g-miss p { margin: 4px 0 0; font-size: 14px; color: var(--sub); }

.g-crowon { margin: 48px 0 0; padding: 20px 22px; border: 1.5px solid var(--ink); border-radius: 14px; }
.g-body .g-crowon-h { margin: 0 0 4px; font-size: 13px; font-weight: 800; }
.g-crowon p { font-size: 15px; }
.g-crowon a { display: inline-flex; align-items: center; gap: 2px; font-size: 14px; font-weight: 700; text-decoration: none; }
.g-q { border-bottom: 1px solid var(--rule); }
.g-q summary { list-style: none; display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; font-weight: 700; cursor: pointer; }
.g-q summary::-webkit-details-marker { display: none; }
.g-q summary::after { content: "+"; font-weight: 400; font-size: 22px; line-height: 1.2; color: var(--sub); }
.g-q[open] summary::after { content: "−"; }
.g-body .g-q p { margin: -4px 0 18px; color: var(--sub); }
.g-method p { font-size: 14px; color: var(--sub); }
.g-src { margin: 0; padding: 0 0 0 1.2em; font-size: 13px; line-height: 1.9; color: var(--sub); }
.g-more { margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--rule); }
.g-404 { padding: 64px var(--g) 32px; }
.g-404 h1 { margin: 0 0 8px; font-size: 32px; }

.g-foot { margin-top: 64px; padding: 40px 0 28px; background: var(--soft); font-size: 13px; }
.g-foot-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px 24px; }
.g-foot h2 { margin: 0 0 8px; font-size: 13px; font-weight: 800; }
.g-foot h2 a { text-decoration: none; }
.g-foot ul { margin: 0; padding: 0; list-style: none; }
.g-foot li { padding: 3px 0; }
.g-foot li a { color: var(--sub); text-decoration: none; }
.g-foot li a:hover { color: var(--ink); text-decoration: underline; }
.g-foot-bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--rule); color: var(--sub); }
.g-foot-bar p { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; }
.g-foot-bar b { color: var(--ink); }
.g-foot-bar a { text-decoration: none; }
.g-foot-bar a:hover { color: var(--ink); text-decoration: underline; }

/* Brand logos: the company's own site icon, small and squared off like an app icon */
.g-logo { flex: none; display: inline-block; border-radius: 22%; box-shadow: 0 0 0 1px var(--rule); background: #fff; object-fit: contain; }
.g-table tbody th a { align-items: center; }
.g-table tbody th a span { min-width: 0; }
.g-fmt { font-weight: 700; color: var(--ink); }

/* type: "which one are you?" */
.g-who { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.g-who a { display: grid; grid-template-columns: minmax(0, 1fr) auto auto 16px; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--rule); text-decoration: none; }
.g-who span { font-size: 15px; color: var(--sub); }
.g-who b { font-size: 15px; text-align: right; }
.g-who svg { color: var(--faint); }
.g-who a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.g-body .g-who-v { margin: 18px 0 0; padding: 16px 18px; background: var(--soft); border-radius: 12px; font-size: 15px; }
.g-who-v b:first-child { display: block; font-size: 13px; color: var(--sub); }
.g-tp-ch { margin: 0; display: grid; gap: 0; }
.g-tp-ch div { display: grid; grid-template-columns: 13em minmax(0, 1fr); gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.g-tp-ch dt { font-weight: 800; line-height: 1.6; }
.g-tp-ch dd { margin: 0; font-size: 15px; }
.g-tp { padding: 8px 0 36px; }
.g-tp + .g-tp { border-top: 1px solid var(--rule); }
.g-body .g-tp-who { margin: 24px 0 6px; font-size: 13px; font-weight: 800; color: var(--sub); }
.g-body .g-tp h3 { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; font-size: 26px; line-height: 1.35; font-weight: 800; }
.g-tp-pc { margin: 16px 0; padding: 0; list-style: none; font-size: 15px; line-height: 1.7; }
.g-tp-pc li { display: flex; gap: 10px; padding: 3px 0; }
.g-tp-pc i { flex: none; font-style: normal; font-weight: 800; width: 1.2em; }
.g-tp-pc .n { color: var(--sub); }
.g-body .g-tp-cells { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 13px; color: var(--sub); }
.g-tp-cells b { margin-right: 6px; color: var(--ink); }

/* sheet: verdict line, highlighted first row, card grid, big-number rules */
.g-vl { margin: 28px 0 0; padding: 0 0 4px; }
.g-body .g-vl p:first-child { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 6px; font-size: 22px; line-height: 1.4; }
.g-vl p:first-child span { font-size: 12px; font-weight: 800; padding: 3px 9px; border-radius: 6px; background: var(--inv); color: var(--inv-ink); }
.g-vl p:last-child { color: var(--sub); font-size: 15px; }
.g-table tr.hl th, .g-table tr.hl td { background: var(--soft); }
.g-scs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0; padding: 0; list-style: none; }
.g-sc { display: flex; flex-direction: column; padding: 18px; border: 1px solid var(--rule); border-radius: 14px; }
.g-sc-top { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.g-body .g-sc h3 { margin: 0; font-size: 17px; line-height: 1.4; font-weight: 800; }
.g-body .g-sc-top p { margin: 2px 0 0; font-size: 12px; line-height: 1.5; color: var(--sub); }
.g-body .g-sc > p { font-size: 14px; line-height: 1.75; }
.g-body .g-sc .g-sc-more { color: var(--sub); }
.g-sc-pc { margin: 4px 0 0; padding: 0; list-style: none; font-size: 13px; line-height: 1.6; }
.g-sc-pc li { display: flex; gap: 6px; padding: 2px 0; }
.g-sc-pc i { flex: none; font-style: normal; font-weight: 800; }
.g-sc-pc .n { color: var(--sub); }
.g-body .g-go.sm { margin-top: auto; padding-top: 14px; }
.g-go.sm .g-btn { min-height: 38px; padding: 0 14px; font-size: 13px; }
.g-rules { margin: 0; padding: 0; list-style: none; counter-reset: r; }
.g-rules li { counter-increment: r; display: grid; grid-template-columns: 64px minmax(0, 1fr); padding: 18px 0; border-bottom: 1px solid var(--rule); }
.g-rules li::before { content: counter(r, decimal-leading-zero); grid-row: span 2; font-size: 34px; line-height: 1; font-weight: 800; color: var(--faint); }
.g-rules b { font-size: 17px; line-height: 1.5; }
.g-body .g-rules p { margin: 4px 0 0; font-size: 15px; }

/* qa: questions and answers */
.g-qa-lead { margin: 4px 0 0; }
.g-body .g-qa-lq { margin: 0 0 10px; font-size: 22px; line-height: 1.5; font-weight: 800; }
.g-qa-big { padding: 20px 0 6px; border-bottom: 1px solid var(--rule); }
.g-body .g-qa-n { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; font-size: 26px; line-height: 1.35; font-weight: 800; }
.g-qa-n b, .g-qa-a b, .g-qa-f b { margin-right: .4em; font-weight: 800; }
.g-body .g-qa-also { margin-top: 14px; font-size: 15px; color: var(--sub); }
.g-qa-also b { color: var(--ink); }
.g-qa-p { padding: 6px 0 26px; }
.g-qa-p + .g-qa-p { border-top: 1px dashed var(--rule); }
.g-body .g-qa-p h3 { display: flex; align-items: center; gap: 10px; margin: 24px 0 8px; font-size: 20px; line-height: 1.45; }
.g-body .g-qa-a { font-size: 16px; font-weight: 700; }
.g-qa-pc { margin: 12px 0 0; display: grid; gap: 6px; font-size: 14px; }
.g-qa-pc div { display: flex; gap: 12px; }
.g-qa-pc dt { flex: none; width: 4.5em; font-weight: 800; }
.g-qa-pc dd { margin: 0; color: var(--sub); }
.g-check { margin: 0; padding: 0; list-style: none; }
.g-check li { position: relative; padding: 12px 0 12px 34px; border-bottom: 1px solid var(--rule); }
.g-check li::before { content: ""; position: absolute; left: 2px; top: 17px; width: 18px; height: 18px; border: 2px solid var(--ink); border-radius: 5px; }
.g-check li::after { content: ""; position: absolute; left: 8px; top: 20px; width: 5px; height: 10px; border: solid var(--ink); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.g-body .g-check p { margin: 2px 0 0; font-size: 15px; color: var(--sub); }
.g-qa-f { padding: 14px 0; border-bottom: 1px solid var(--rule); }
.g-body .g-qa-fq { margin: 0 0 6px; font-weight: 800; }
.g-body .g-qa-f p:last-child { margin: 0; color: var(--sub); }

/* read: an essay with the conclusion at the end */
.f-read .g-body { font-size: 17px; line-height: 1.95; }
.g-body .g-rd-first::first-line { font-weight: 700; }
.g-rd-h { font-weight: 800; }
.g-rd { padding: 4px 0 16px; }
.g-body .g-rd h3 { display: flex; align-items: center; gap: 10px; margin: 36px 0 2px; font-size: 22px; line-height: 1.4; font-weight: 800; }
.g-body .g-rd-sub { margin: 0 0 12px; font-size: 14px; color: var(--sub); }
.g-body .g-go.plain .g-btn { background: none; color: var(--ink); padding: 0; min-height: 32px; text-decoration: underline; text-underline-offset: 3px; }
.g-rd-q { margin: 8px 0 0; padding: 4px 0 4px 22px; border-left: 4px solid var(--ink); }
.g-body .g-rd-qn { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; font-size: 28px; line-height: 1.35; font-weight: 800; }
.g-rd-also { margin: 18px 0 0; padding: 0 0 0 1.2em; font-size: 15px; color: var(--sub); }
.g-rd-also b { color: var(--ink); }

@media (max-width: 1099px) {
  .g-art-grid { grid-template-columns: minmax(0, 1fr); }
  .g-side { display: none; }
  .g-toc-m { display: block; }
  .g-cats.small { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 899px) {
  .g-cards.four, .g-cards.pop, .g-cards.three { grid-template-columns: repeat(2, 1fr); }
  .g-cards.three li:nth-child(3) { display: none; }
  .g-cats { grid-template-columns: repeat(2, 1fr); }
  .g-art-head, .g-cathead { grid-template-columns: 1fr; gap: 20px; }
  .g-art-head .g-hero-pic { order: -1; }
  .g-foot-cols { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 599px) {
  body { line-height: 1.8; }
  .g-home-top { padding: 28px 0 24px; }
  .g-home-top h1 { font-size: 32px; }
  .g-home-lead { font-size: 15px; }
  .g-search.big { height: 52px; }
  .g-sec { padding-top: 32px; }
  .g-sec-h { font-size: 21px; }
  .g-cats, .g-cats.small { grid-template-columns: repeat(2, 1fr); gap: 18px 12px; }
  .g-cats b { font-size: 15px; }
  .g-cards.four, .g-cards.three, .g-cards.pop { grid-template-columns: 1fr 1fr; gap: 22px 12px; }
  .g-card-t { font-size: 15px; }
  .g-cards.pop .lead { grid-column: 1 / -1; grid-row: auto; }
  .g-cards.pop .lead .g-card-t { font-size: 20px; }
  .g-cathead h1 { font-size: 30px; }
  .g-art-head h1 { font-size: 25px; line-height: 1.45; }
  .g-hero-pic, .g-cathead figure { border-radius: 12px; }
  .g-body h2 { font-size: 22px; margin-top: 44px; }
  .g-body .g-pick h3 { font-size: 20px; }
  .g-verdict { padding: 20px 18px; }
  .g-verdict .g-verdict-n { font-size: 22px; }
  .g-verdict li { flex-direction: column; gap: 0; }
  .g-verdict li span { width: auto; }
  .g-pc { grid-template-columns: 1fr; gap: 10px; }
  .g-scs { grid-template-columns: 1fr; }
  .g-tp-ch div { grid-template-columns: 1fr; gap: 4px; }
  .g-who a { grid-template-columns: minmax(0, 1fr) auto 16px; }
  .g-who a .g-logo { display: none; }
  .g-body .g-tp h3, .g-body .g-qa-n, .g-body .g-rd-qn { font-size: 22px; }
  .g-searchhead h1 { font-size: 24px; }
}