/* Round 3: G pop / H rank / I warm. Sans only, weight contrast, one colour per category. */
html[data-theme=pop] {
  --sans: "BIZ UDPGothic", "Hiragino Sans", "Yu Gothic UI", "Meiryo", system-ui, sans-serif;
  --round: "Hiragino Maru Gothic ProN", "BIZ UDPGothic", "Yu Gothic UI", "Meiryo", sans-serif;
  --num: "Segoe UI", "SF Pro Display", system-ui, sans-serif;
  --font: var(--sans);
  --c: #64748b; --ct: #eef2f7; --cx: #475569;
  --l1: #15803d; --l1b: #dcfce7; --l2: #1d4ed8; --l2b: #dbeafe; --l3: #374151; --l3b: #e5e7eb;
  --warn: #8a5300; --warnb: #fff1d6; --new: #be185d; --newb: #fce7f3;
}
html[data-theme=pop] .cat-markets { --c: #3b82f6; --ct: #dbeafe; --cx: #1d4ed8; }
html[data-theme=pop] .cat-japan { --c: #f97316; --ct: #ffedd5; --cx: #c2410c; }
html[data-theme=pop] .cat-global { --c: #14b8a6; --ct: #ccfbf1; --cx: #0f766e; }
html[data-theme=pop] .cat-politics { --c: #8b5cf6; --ct: #ede9fe; --cx: #6d28d9; }
html[data-theme=pop] .cat-industry { --c: #eab308; --ct: #fef9c3; --cx: #a16207; }
html[data-theme=pop] .cat-society { --c: #ec4899; --ct: #fce7f3; --cx: #be185d; }
@media (prefers-color-scheme: dark) {
  html[data-theme=pop] { --l1: #86efac; --l1b: #14301f; --l2: #93c5fd; --l2b: #172a46; --l3: #d1d5db; --l3b: #2a2f3a; --warn: #f1b65a; --warnb: #2b2111; --new: #f9a8d4; --newb: #4a1d33; --ct: #1f2937; --cx: #cbd5e1; }
  html[data-theme=pop] .cat-markets { --ct: #1e3a5f; --cx: #93c5fd; }
  html[data-theme=pop] .cat-japan { --ct: #4a2a14; --cx: #fdba74; }
  html[data-theme=pop] .cat-global { --ct: #123f3b; --cx: #5eead4; }
  html[data-theme=pop] .cat-politics { --ct: #33265a; --cx: #c4b5fd; }
  html[data-theme=pop] .cat-industry { --ct: #423a10; --cx: #fde047; }
  html[data-theme=pop] .cat-society { --ct: #4a1d33; --cx: #f9a8d4; }
}

/* shared behaviour: three levels visible (rank, title, one reading line); the rest opens on click */
html[data-theme=pop] body { line-height: 1.75; font-variant-numeric: tabular-nums; }
html[data-theme=pop] :is(h1, h2, .brand, .page-title) { font-family: var(--round); font-weight: 800; letter-spacing: .01em; }
html[data-theme=pop] :is(h3, .ev-title) { font-family: var(--sans); font-weight: 700; word-break: auto-phrase; line-break: strict; text-wrap: balance; }
html[data-theme=pop] .layout { max-width: 1120px; display: block; padding: 0 20px; }
html[data-theme=pop] .layout > main { max-width: none; }
html[data-theme=pop] .page-title { font-size: 30px; margin: 32px 0 12px; }
html[data-theme=pop] .page-title small { display: block; font: 500 14px/1.6 var(--sans); color: var(--muted); margin-top: 4px; }
html[data-theme=pop] .hero { padding: 28px 0 8px; }
html[data-theme=pop] .hero h1 { font-size: 34px; line-height: 1.25; }
html[data-theme=pop] .hero p:not(.stat) { display: none; }
html[data-theme=pop] .stat { color: var(--muted); font-size: 13px; }
html[data-theme=pop] .block > h2 { font-size: 22px; margin: 28px 0 12px; }
html[data-theme=pop] .block > h2 small { font: 500 13px var(--sans); color: var(--muted); margin-left: 10px; }
html[data-theme=pop] .daterow { font: 800 15px var(--round); color: var(--ink); border: 0; margin: 32px 0 8px; }
html[data-theme=pop] .weekbox > summary { font: 800 16px var(--round); padding: 10px 0; }
html[data-theme=pop] .stack { gap: 12px; }
html[data-theme=pop] .rank { display: inline-flex; align-items: center; justify-content: center; font: 800 14px var(--num); color: var(--cx); background: var(--ct); border-radius: 999px; min-width: 32px; height: 32px; padding: 0 8px; }
html[data-theme=pop] .why1 { display: block; margin: 6px 0 0; font-size: 14px; color: var(--muted); line-height: 1.6; }
html[data-theme=pop] .why1 a { color: var(--accent); font-weight: 700; text-decoration: none; margin-right: 8px; }
html[data-theme=pop] .why1 a:hover { text-decoration: underline; }
html[data-theme=pop] .why1-t { display: inline-block; font-size: 11px; font-weight: 800; color: var(--cx); background: var(--ct); border-radius: 4px; padding: 0 6px; margin-right: 8px; line-height: 18px; }
html[data-theme=pop] .why1-w { display: block; margin-top: 2px; }
html[data-theme=pop] .card { cursor: pointer; }
html[data-theme=pop] .card.event:not(.open) .detail { display: none; }
html[data-theme=pop] .card.event .detail { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
html[data-theme=pop] .card.event .ev-title { font-size: 18px !important; line-height: 1.5; margin: 6px 0 0; }
html[data-theme=pop] .card.event .sum { font-size: 15px; margin: 0; line-height: 1.85; max-width: 46em; }
html[data-theme=pop] .card.event .reads { margin-top: 12px; padding-top: 0; border-top: 0; }
html[data-theme=pop] .card.event .read { background: var(--bg); }
html[data-theme=pop] .card.event:not(.open) .heat { display: none; }
html[data-theme=pop] .badge.cat { color: var(--cx); background: var(--ct); border-color: transparent; }
html[data-theme=pop] .badge.l1 { color: var(--l1); background: var(--l1b); } html[data-theme=pop] .badge.l2 { color: var(--l2); background: var(--l2b); } html[data-theme=pop] .badge.l3 { color: var(--l3); background: var(--l3b); }
html[data-theme=pop] .card:not(.event) h3 { font-size: 16px; line-height: 1.5; }
html[data-theme=pop] .card:not(.event):not(.open) :is(.one, details.more, .origin, .sub) { display: none; }
html[data-theme=pop] .card:not(.event) { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; align-items: baseline; border-left: 4px solid var(--c); }
html[data-theme=pop] .card:not(.event) > * { grid-column: 1 / -1; }
html[data-theme=pop] .card:not(.event) > h3 { grid-column: 1; grid-row: 1; }
html[data-theme=pop] .card:not(.event) > .meta { grid-column: 2; grid-row: 1; justify-content: flex-end; flex-wrap: nowrap; white-space: nowrap; font-size: 12.5px; }
html[data-theme=pop] .card:not(.open) .meta :is(.badge.cat, .badge.scope, .badge.en, .badge.warn) { display: none; }
html[data-theme=pop] .sidebox h3 { font: 800 14px var(--round); }
html[data-theme=pop] #side { position: static; max-height: none; overflow: visible; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 48px; padding: 8px 0 24px; }
html[data-theme=pop] .sidebox { max-height: 300px; overflow-y: auto; }
html[data-theme=pop] .read h4::before { content: ""; }
html[data-theme=pop] .themesel { margin-bottom: 0; }
@media (max-width: 720px) {
  html[data-theme=pop] .card:not(.event) { display: block; }
  html[data-theme=pop] .hero h1 { font-size: 26px; }
}

/* ---------- G. Pop Tiles ---------- */
html[data-theme=pop] { --bg: #f7f8fc; --surface: #ffffff; --ink: #1f2333; --muted: #5b6178; --line: #e6e8f2; --accent: #5b5bf0; --accent-ink: #ffffff; --soft: #eeeeff; }
@media (prefers-color-scheme: dark) { html[data-theme=pop] { --bg: #14151c; --surface: #1e2030; --ink: #ecedf5; --muted: #a3a8c3; --line: #2c2f45; --accent: #9b9bff; --accent-ink: #14151c; --soft: #26284a; } }
html[data-theme=pop] .top { background: var(--surface); border-bottom: 0; box-shadow: 0 1px 0 var(--line); }
html[data-theme=pop] .brand { font-size: 20px; }
html[data-theme=pop] .brand::before { content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: linear-gradient(135deg, #5b5bf0, #ec4899); margin-right: 8px; }
html[data-theme=pop] #tabs { background: var(--soft); border-radius: 999px; padding: 3px; gap: 2px; margin-bottom: 8px; }
html[data-theme=pop] #tabs a { border: 0; border-radius: 999px; padding: 6px 16px; }
html[data-theme=pop] #tabs a[aria-current="page"] { background: var(--accent); color: var(--accent-ink); }
html[data-theme=pop] .stack { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
html[data-theme=pop] .card { background: var(--surface); border: 0; border-radius: 16px; box-shadow: 0 2px 10px rgb(30 30 70 / .07); padding: 18px 20px; }
html[data-theme=pop] .card.event { border-top: 4px solid var(--c); }
html[data-theme=pop] .card.event.top1 { grid-column: 1 / -1; background: linear-gradient(135deg, var(--ct), var(--surface) 70%); padding: 24px 28px; }
html[data-theme=pop] .card.event.top1 .ev-title { font-size: 24px !important; }
html[data-theme=pop] .card.event.top1 .rank { background: var(--accent); color: var(--accent-ink); }
html[data-theme=pop] .card.event.top1::after { content: "今週のTOP"; position: absolute; top: 18px; right: 22px; font: 800 12px var(--round); color: var(--accent-ink); background: var(--accent); border-radius: 999px; padding: 2px 12px; }
html[data-theme=pop] .card.event { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 10px; row-gap: 0; align-items: center; }
html[data-theme=pop] .card.event > * { grid-column: 1 / -1; }
html[data-theme=pop] .card.event > .rank { grid-column: 1; grid-row: 1; }
html[data-theme=pop] .card.event > .meta { grid-column: 2; grid-row: 1; }
html[data-theme=pop] .card.top3:not(.top1) .rank { background: var(--c); color: #fff; }
html[data-theme=pop] .card:not(.event) { border-radius: 12px; border-left: 0; box-shadow: none; border: 1px solid var(--line); padding: 12px 16px; }
html[data-theme=pop] .card:not(.event):hover { background: var(--soft); }
html[data-theme=pop] .sidebox { border: 0; border-radius: 16px; background: var(--soft); }
@media (max-width: 720px) { html[data-theme=pop] .stack { grid-template-columns: 1fr; } }


/* library: only search and period are visible; the rest folds away */
html[data-theme=pop] .fopts { margin-top: 8px; }
html[data-theme=pop] .fopts > summary, html[data-theme=pop] .tpbox > summary { cursor: pointer; font-weight: 700; font-size: 14px; color: var(--accent); }
html[data-theme=pop] .filters { background: var(--surface); border: 0; border-radius: 16px; box-shadow: 0 2px 10px rgb(30 30 70 / .07); padding: 14px 18px; margin-bottom: 12px; position: static; }
html[data-theme=pop] .tpbox { border-radius: 16px; box-shadow: none; border: 1px solid var(--line); cursor: default; padding: 12px 18px; }
html[data-theme=pop] .chip { border-radius: 999px; }
html[data-theme=pop] .count { color: var(--muted); font-size: 13px; }

@media (max-width: 720px) {
  html[data-theme=pop] .bar { gap: 8px; }
  html[data-theme=pop] #tabs { width: 100%; overflow-x: auto; flex-wrap: nowrap; }
  html[data-theme=pop] #tabs a { white-space: nowrap; padding: 6px 12px; font-size: 13.5px; }
  html[data-theme=pop] .card.event.top1 { padding: 18px 18px; }
  html[data-theme=pop] .card.event.top1 .ev-title { font-size: 19px !important; }
  html[data-theme=pop] .card.event .ev-title { font-size: 16.5px !important; }
  html[data-theme=pop] .layout { padding: 0 14px; }
  html[data-theme=pop] .card.event.top1::after { top: 14px; right: 14px; }
}

/* home search */
html[data-theme=pop] .hs { margin: 8px 0 8px; }
html[data-theme=pop] .hs-in { width: 100%; font-size: 17px; padding: 14px 20px; border-radius: 999px; border: 2px solid var(--line); background: var(--surface); box-shadow: 0 2px 10px rgb(30 30 70 / .07); }
html[data-theme=pop] .hs-in:focus { border-color: var(--accent); outline: none; }
html[data-theme=pop] .hs-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
html[data-theme=pop] .hs-chips .tag { border-radius: 999px; background: var(--soft); border-color: transparent; color: var(--accent); font-size: 13px; padding: 2px 12px; }
html[data-theme=pop] .hs-group { margin-top: 24px; }
html[data-theme=pop] .hs-group > h3 { font: 800 17px var(--round); display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
html[data-theme=pop] .hs-group .stack { grid-template-columns: 1fr; gap: 8px; }

/* marks, glossary, my page */
.markbar { display: inline-flex; gap: 2px; margin-left: auto; }
.mk { border: 0; background: transparent; color: var(--muted); font-size: 15px; line-height: 1; padding: 3px 5px; border-radius: 6px; cursor: pointer; }
.mk:hover { background: var(--soft); }
.mk[aria-pressed="true"] { color: var(--accent); background: var(--soft); font-weight: 800; }
.markbar:not(.has) .mk:not(:hover) { opacity: .45; }
html[data-theme=pop] .card:not(.open):not(:hover) .markbar:not(.has) { visibility: hidden; }
html[data-theme=pop] .card.term:not(.open) .detail { display: none; }
html[data-theme=pop] .card.term { padding: 14px 18px; }
html[data-theme=pop] .card.term h3 { font-size: 17px; margin: 4px 0 2px; }
html[data-theme=pop] .card.term .meta { align-items: center; }
html[data-theme=pop] .tip { background: var(--soft); border-radius: 10px; padding: 8px 12px; margin: 10px 0; font-size: 14px; }
html[data-theme=pop] .bk { max-width: 230px; }
html[data-theme=pop] .chip.on, html[data-theme=pop] .chip[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
html[data-theme=pop] .chk1 { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
html[data-theme=pop] .bk-term { padding: 10px 0; border-top: 1px dashed var(--line); display: grid; gap: 4px; }
html[data-theme=pop] .bk-term textarea, html[data-theme=pop] .memo textarea { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: var(--surface); }
html[data-theme=pop] .memo { cursor: default; display: grid; gap: 8px; }
html[data-theme=pop] .toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 10px 18px; border-radius: 999px; font-size: 14px; z-index: 20; box-shadow: 0 4px 16px rgb(0 0 0 / .25); }

/* ---- consent banner, ads, footer links ---- */
#consent { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 50; max-width: 640px; margin: 0 auto; background: #fff; border: 1px solid #dfe3f0; border-radius: 16px; padding: 14px 16px; box-shadow: 0 8px 28px rgba(40,50,120,.18); font-size: 13px; line-height: 1.6; }
#consent p { margin: 0 0 10px; }
#consent .row { display: flex; gap: 8px; justify-content: flex-end; }
.adbox { margin: 18px 0; text-align: center; min-height: 90px; }
.adbox small { display: block; font-size: 10px; color: #8a90a8; text-align: left; margin-bottom: 2px; }
.foot a { color: inherit; text-decoration: underline; margin-right: 10px; }
.foot .lnks { margin-top: 6px; }
main.prose { max-width: 760px; margin: 0 auto; padding: 8px 16px 40px; }

/* reason label: quieter than the title and the read tag */
.why-l { display: inline-block; font-style: normal; font-size: 10.5px; color: #8a90a8; border: 1px solid #dfe3f0; border-radius: 999px; padding: 0 7px; margin-right: 6px; line-height: 16px; vertical-align: 1px; }
.why-l::before { content: '\1F4A1 '; font-size: 10px; }

/* ---- sign-in ---- */
.authbox { max-width: 460px; }
.authbox .lead { margin: 0 0 14px; }
.gbtn { width: 100%; background: #fff; color: #333; border: 1px solid #dfe3f0; font-weight: 700; padding: 10px 14px; }
.gbtn:hover { background: #f7f8fc; }
.authbox .or { text-align: center; margin: 14px 0; }
.authmsg { min-height: 1.4em; margin: 10px 0 0; font-size: 13px; color: #c0392b; }
.acctbox .sub { margin: 0 0 8px; }

/* ---- help button: separate from the tab group, top-right corner ---- */
#help { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin-bottom: 8px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: 22px; line-height: 1; text-decoration: none; font-weight: 700; }
#help:hover { color: var(--accent); border-color: var(--accent); }
#help[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.bar .brand { order: 0; }
@media (max-width: 720px) {
  .bar .brand { order: 0; }
  #help { order: 1; margin-left: auto; margin-bottom: 0; }
  html[data-theme=pop] #tabs { order: 2; }
}
/* events: Japan / overseas tabs */
.regtabs { display: flex; gap: 6px; margin: 4px 0 14px; padding: 4px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); width: fit-content; max-width: 100%; }
.regtab { appearance: none; border: 0; background: transparent; color: var(--muted); font: inherit; font-weight: 700; font-size: 15px; padding: 8px 18px; border-radius: 10px; cursor: pointer; white-space: nowrap; }
.regtab:hover { color: var(--accent); }
.regtab[aria-selected="true"] { background: var(--accent); color: var(--accent-ink); }
@media (max-width: 520px) { .regtabs { width: 100%; } .regtab { flex: 1; padding: 8px 6px; font-size: 14px; } }

/* institution's own summary, quoted */
.official { margin: .5rem 0 0; padding: .55rem .8rem; border-left: 3px solid var(--line, #bbb); background: var(--soft, rgba(127,127,127,.08)); font-size: .92em; line-height: 1.7; }
.official footer { margin-top: .35rem; font-size: .85em; opacity: .75; }

/* glossary term pages: related terms as chips, English name */
.prose ul.rel{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;padding:0;margin:.4rem 0 1rem}
.prose ul.rel li{margin:0}
.prose ul.rel a{display:inline-block;padding:.25rem .7rem;border:1px solid currentColor;border-radius:999px;text-decoration:none;font-size:.9rem;opacity:.9}
.prose ul.rel a:hover{opacity:1;text-decoration:underline}
.prose .sub{opacity:.75;margin:.2rem 0}