/* Web fonts (commander 2026-10-19, requirements R16): MaruBuri for the serif roles, NanumSquareNeo for the
   gothic (sans-serif) roles, the same fonts on English and Korean pages; files from the Naver font CDN.
   Why own @font-face rules instead of the CDN stylesheets maru-buri.css and nanum-square-neo.css: those
   stylesheets declare one family name per weight ('MaruBuriBold', 'NanumSquareNeoBold', ...) without a
   font-weight descriptor, so the browser takes every face as weight 400 and draws synthetic bold on top of it for
   any element with font-weight 600 or more (measured 2026-10-19: headings, slogan, table labels became heavier
   than the real Bold face). Here each family has one name and real weights, so font-weight selects the real
   face and no synthetic bold is drawn (render test: pixel-identical to the CDN faces at weight 400).
   NanumSquareNeo: the CDN stylesheet names only .woff (about 740 KB per weight); the .woff2 files on the same
   CDN path are about 390 KB and draw identical glyphs (all 12,168 characters compared); woff2 first, woff as
   fallback. font-display swap: text is shown at once in the fallback font and switches when the file arrives.
   A browser downloads only the weights that the page really uses.
   Weights: MaruBuri 200 ExtraLight, 300 Light, 400 Regular, 600 SemiBold, 700 Bold;
            NanumSquareNeo 300 Light, 400 Regular, 700 Bold, 800 ExtraBold, 900 Heavy. */
/* 2026-10-19 session 6 (commander R52, R53): fonts split by language, Regular (400) and Bold (700) only; MaruBuri and
   NanumSquareNeo are no longer used and no @font-face rule is left here (the text above describes the session 3 state).
   - Latin letters, digits and punctuation: Noto Serif (serif roles) and Noto Sans (gothic roles), on English and
     Korean pages alike. Each font-family below lists the Latin font first; the browser takes every character from the
     first font that has it, so Latin text on the Korean page is drawn by Noto and Hangul by the Korean font.
   - Hangul: Nanum Myeongjo (serif roles) and Noto Sans KR (gothic roles).
   All four come from Google Fonts (stylesheet link in templates/base.html). Google cuts each font into unicode-range
   slices (.woff2) and a page downloads only the slices of its characters; Noto Serif and Noto Sans hold no Hangul,
   so the English page downloads no Korean font. Measured for every character of the Korean page (2026-10-19,
   _tmp/20261019-r52):
   - Nanum Myeongjo: the Naver CDN file named by the commander is a whole .woff (Regular 935 KB, Bold 1,553 KB, no
     .woff2); Google needs at most 358 KB plus 376 KB; same glyph shapes in renders at 16, 24 and 48 px, spaces
     slightly narrower (commander's choice).
   - Gothic (commander: "폰트도 니가 가장 효율적인 걸로 변경해"): NanumSquareNeo whole Naver files 754 KB; Google
     Noto Sans KR 324 KB (a variable font: both weights share the same slices), Gothic A1 373 KB, IBM Plex Sans KR
     478 KB, Nanum Gothic 570 KB. Noto Sans KR also matches the Latin Noto Sans. */
/* 2026-10-19 16:1x (commander, option A): Hangul serif Nanum Myeongjo -> Noto Serif KR (Google Fonts, variable font,
   both weights share the same slices). Reason: Nanum Myeongjo Regular broke up unevenly in the contents column at
   15.2 px on device scale 1 screens (commander: "한국어 흘림체가 목차에서 좀 깨지네"); Noto Serif KR draws it evenly
   (renders _tmp/20261019-r52/toc_candidates). All font downloads of the Korean page at 1366 (measured): Nanum
   Myeongjo 636 KB, Noto Serif KR 607 KB. It also matches the Latin Noto Serif. */

/* Identity colors of the current QGKR site (index.html :root), kept as constants; everything else derives from them. */
:root {
    --id-brown: #8B4513;
    --id-navy: #05014a;
    --id-gold: #FFD700;
    --paper: #fbfaf6;
    --ink: #1f2430;
    --muted: #6b7280;
    --rule: color-mix(in srgb, var(--id-brown) 18%, #ffffff);
    --accent: color-mix(in srgb, var(--id-brown) 85%, #000000);
    --header-height: 64px;
    --reading-width: 760px;
    /* Font constants, one per role (commander 2026-10-19: the commander picks the fonts later; each role must be
       changeable here only). Every font-family below reads one of these; no font name appears elsewhere.
       Current values are system font placeholders, not the final choice.
       2026-10-19 (R16): fonts chosen by the commander; the placeholders are now the fallback after the web font
       (used while the web font loads or when it cannot be loaded). The weight of each element stays in its own
       rule (font-weight); the available weights are listed at the @font-face rules above.
       2026-10-19 session 6 (R52): one constant per language and style; the role constants combine them (Latin font
       first, then the Hangul font, then the system fallback). Change a font here only. */
    --font-latin-serif: 'Noto Serif';
    --font-hangul-serif: 'Noto Serif KR';
    --font-system-serif: Georgia, 'Times New Roman', serif;
    --font-latin-sans: 'Noto Sans';
    --font-hangul-sans: 'Noto Sans KR';
    --font-system-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Malgun Gothic', sans-serif;
    --font-brand: var(--font-latin-serif), var(--font-hangul-serif), var(--font-system-serif);    /* "QGKR" word in the header */
    --font-display: var(--font-latin-serif), var(--font-hangul-serif), var(--font-system-serif);  /* hero slogan */
    --font-heading: var(--font-latin-serif), var(--font-hangul-serif), var(--font-system-serif);  /* section titles, section numbers, contents column */
    --font-body: var(--font-latin-sans), var(--font-hangul-sans), var(--font-system-sans);        /* paragraphs, tables, form */
    --font-ui: var(--font-latin-sans), var(--font-hangul-sans), var(--font-system-sans);          /* header menu, table labels, buttons */
    --font-figure: var(--font-latin-serif), var(--font-hangul-serif), var(--font-system-serif);   /* figures in the Exhibit tables */
}

/* Korean pages: override only the roles whose font must differ for Hangul (empty until the commander decides). */
/* 2026-10-19 (R16): decided, Korean pages use the same fonts as English pages; MaruBuri and NanumSquareNeo
   both contain all 11,172 Hangul syllables, so this block stays empty. */
/* 2026-10-19 (R18): the empty html:lang(ko) rule is removed (no effect); Korean-only rules go into one written here. */
/* 2026-10-19 session 6: still no Korean font override; the role constants hold the Latin and the Hangul font, and
   the browser picks the font per character on both pages. */
/* Korean line breaking (session 5, Korean page ko/index.html; same rule as ../mobileneuron): Korean breaks between
   words, not inside a word; break-word, not anywhere, so grid and flex minimum widths stay as on the English page. */
html:lang(ko) body { word-break: keep-all; overflow-wrap: break-word; }

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 16px); }
body { font-family: var(--font-body); color: var(--ink); background: var(--paper); line-height: 1.7; }
/* Link underline offset: NanumSquareNeo puts its default underline (font post table: position -0.075em, thickness
   0.05em) inside the bottom of its Latin letters (letters end 0.097em to 0.112em below the baseline), so the browser
   cuts the underline at every letter (skip ink) and it looks broken. 0.2em puts it under the letters (measured
   2026-10-19, _tmp/20261019-youtube_hero/font_underline_metrics.py). */
/* 2026-10-19 session 6: link text is now drawn by Noto Sans (Latin) and Noto Sans KR (Hangul); the offset stays as
   approved by the commander (R22): one underline position below the letters of both fonts. */
a { color: var(--id-navy); text-underline-offset: 0.2em; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 10; height: var(--header-height); background: var(--paper);
    border-bottom: 1px solid var(--rule); display: flex; align-items: center; justify-content: space-between;
    padding: 0 2rem; }
.brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--id-navy); }
.brand img { width: 34px; height: 34px; }
.brand strong { font-family: var(--font-brand); font-size: 1.35rem; letter-spacing: 0.04em; }
.brand span { font-size: 0.8rem; color: var(--muted); }
.site-nav { font-family: var(--font-ui); display: flex; align-items: center; gap: 1.5rem; }
.site-nav a { text-decoration: none; color: var(--ink); font-size: 0.9rem; }
.site-nav a:hover { color: var(--accent); }
.lang-toggle { border: 1px solid var(--id-navy); border-radius: 6px; padding: 0.15rem 0.6rem; font-size: 0.8rem;
    color: var(--id-navy); text-decoration: none; margin-left: 1rem; }

/* Hero: report cover band on chart paper */
/* 2026-10-19 session 6 (commander: "너무 흐려서 조금만 선명하면 좋겠는데", chose 8% of 5, 8, 11, 14 % renders in
   _tmp/20261019-hero_grid): grid line opacity 0.05 -> 0.08; then "아주 살짝만 더 올려봐 ... 10%": 0.10. */
.hero { background-color: var(--id-navy);
    background-image: linear-gradient(rgba(255, 255, 255, 0.10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.10) 1px, transparent 1px),
        linear-gradient(135deg, var(--id-navy), color-mix(in srgb, var(--id-navy) 70%, #1e3a8a));
    background-size: 40px 40px, 40px 40px, auto;
    color: #ffffff; display: grid; grid-template-columns: 1.1fr 1fr; gap: 3rem;
    align-items: center; padding: 2rem max(2rem, calc((100vw - 1200px) / 2)); }
/* 2026-10-19 (commander session 5: less space above and below the hero): min-height 50vh removed and padding 3rem ->
   2rem; the height now follows the content (at 1366x900: 450 px -> about 373 px). */
/* 2026-10-19 session 6, later (commander chose "첫 줄 Regular + 기울임 제거" for both pages): only the gold line is
   Bold; the slogan default is Regular (400, set because h1 is bold by default), so the lead line and the connector
   are Regular. The connector is upright: the fonts have no italic face, the browser drew a slanted copy of the
   upright letters. */
.slogan { font-family: var(--font-display); font-weight: 400; line-height: 1.15; }
/* 2026-10-19 session 6 (commander: "더 명확한 결정을 위한 이 부분폰트가 너무 크다 크기를 황금색과 같게", chosen for
   the English and the Korean page): the lead line has the size of the gold line (was clamp(2rem, 4vw, 3.2rem)); both
   stay Bold. One rule holds the size of both lines, so they cannot drift apart.
   (Later the same day the lead line became Regular, see the note above .slogan.) */
.slogan .lead-line, .slogan .brand-line { display: block; font-size: clamp(1.6rem, 2.9vw, 2.4rem); }
.slogan .connector { display: block; font-size: clamp(1.1rem, 2vw, 1.5rem); color: #9aa0ad; margin: 0.3rem 0; }
.slogan .brand-line { font-weight: 700; color: var(--id-gold); min-height: 1.2em; }
.hero-lead { margin-top: 1.25rem; color: #d7dae3; max-width: 34rem; }
.hero-meta { margin-top: 1rem; font-size: 0.85rem; color: #9aa0ad; }

.video-panel { position: relative; aspect-ratio: 16 / 9; width: 100%; border: 1px solid rgba(255, 215, 0, 0.45);
    border-radius: 6px; overflow: hidden; background: rgba(0, 0, 0, 0.35); }
.video-panel .video-play { all: unset; cursor: pointer; position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 0.6rem; color: #ffffff; text-align: center; }
.video-panel .video-play .icon--fa6-brands { font-size: 3.2rem; color: var(--id-gold); }
.video-panel .video-play small { color: #9aa0ad; }
.video-panel iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Report body: contents column + reading column */
.report { display: grid; grid-template-columns: 220px minmax(0, var(--reading-width)); gap: 3rem; justify-content: center;
    padding: 2.5rem 2rem 4rem; }
/* Contents in MaruBuri Bold at 0.95rem (commander session 5): the thin strokes of MaruBuri Regular broke up unevenly on
   screens of device scale 1 at 14.4 and 16 px; the Bold strokes render evenly (renders:
   _tmp/20261019-open_decisions/toc_variants). The active entry differs by color and the left line, not by weight. */
.toc { font-family: var(--font-heading); position: sticky; top: calc(var(--header-height) + 24px); align-self: start; font-size: 0.95rem; }
/* Contents weights 700: the contents column uses MaruBuri (commander session 5); its Bold file is already loaded for
   the slogan and headings, while SemiBold (600) would add 455 KB (commander chose Bold). */
/* 2026-10-19 session 6 (R52): the contents column keeps Bold 0.95rem in the new serif fonts (Noto Serif for Latin,
   Nanum Myeongjo for Hangul); this decides the contents font that was on hold (R47).
   Commander session 6 ("이제 목차가 깔끔하게 보인다 ... 표준으로 하자"): the entries are Regular (400) again and the
   active entry Bold (700), as in the original design (which had 600 for the active entry; Bold now, R52: Regular and
   Bold only). 2026-10-19 16:1x: Hangul serif is Noto Serif KR now (note at the top of this file). */
.toc-title { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; color: var(--muted); margin-bottom: 0.75rem; }
/* Georgia draws old-style figures by default ("01" looked like "o1"); section numbers and figures use lining figures. */
.num, td.figure { font-variant-numeric: lining-nums; }
.toc ol { list-style: none; border-left: 2px solid var(--rule); }
.toc a { display: block; padding: 0.3rem 0 0.3rem 0.9rem; margin-left: -2px; border-left: 2px solid transparent;
    text-decoration: none; color: var(--muted); }
.toc a .num { color: var(--accent); margin-right: 0.4rem; }
.toc a.active { border-left-color: var(--accent); color: var(--ink); font-weight: 700; }

.report section { padding: 2rem 0; border-top: 1px solid var(--rule); }
.report section:first-child { border-top: 0; padding-top: 0; }
.report h2 { font-family: var(--font-heading); font-size: 1.7rem; color: var(--id-navy); margin-bottom: 0.9rem; }
.report h2 .num { color: var(--accent); margin-right: 0.6rem; }
.report h3 { font-size: 1.05rem; color: var(--id-navy); margin: 1.4rem 0 0.4rem; }
.report p { margin-bottom: 0.8rem; }
.kicker { color: var(--muted); font-size: 0.95rem; }

/* overflow-x: a table wider than the column (measured at 320 px: Report schedule 331 px, Engagement models 339 px)
   scrolls inside its exhibit instead of giving the whole page a horizontal scroll bar (session 5, 2026-10-19). */
figure.exhibit { margin: 1.5rem 0; overflow-x: auto; }
figure.exhibit figcaption { font-family: var(--font-ui); font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent);
    border-bottom: 2px solid var(--id-navy); padding-bottom: 0.35rem; margin-bottom: 0.25rem; }
.exhibit table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.exhibit th, .exhibit td { text-align: left; vertical-align: top; padding: 0.6rem 0.75rem 0.6rem 0; border-bottom: 1px solid var(--rule); }
/* Weight 700 (was 600; session 6, R52: Regular and Bold only). The web fonts drew 600 with their Bold face already. */
.exhibit th { font-family: var(--font-ui); font-size: 0.78rem; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.exhibit td.figure { font-family: var(--font-figure); font-size: 1.05rem; color: var(--id-navy); white-space: nowrap; }
.exhibit .source { font-size: 0.78rem; color: var(--muted); margin-top: 0.4rem; }

/* Flow steps: boxes with an arrow in the gap between them (commander session 5: the ">" stood inside the boxes; a
   Unicode arrow is allowed). The arrow is placed after every step but the last, centered in the 1.6rem column gap; at
   a line end it points on to the next line. */
ol.flow { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; margin: 1rem 0; }
ol.flow li { position: relative; border: 1px solid var(--id-navy); border-radius: 4px; padding: 0.25rem 0.7rem; font-size: 0.85rem; background: #ffffff; }
ol.flow li:not(:last-child)::after { content: "\2192"; position: absolute; left: calc(100% + 0.45rem); top: 50%;
    transform: translateY(-50%); color: var(--accent); font-weight: 700; font-family: var(--font-system-sans); }
/* Arrow font (session 6, commander: system font; the arrow shape may differ by system): Noto Sans has no arrow
   (U+2192 is in none of its Google Fonts slices), and the next font, the Hangul font, would make the English page
   download a Korean font file for this one glyph (385 KB with NanumSquareNeo, measured 2026-10-19). The system fonts
   (Segoe UI, SF, Roboto, Malgun Gothic) have it. */
/* The arrow box is only as wide as the glyph (was a 1.6rem box): at a line end it hangs at most about 1.2rem past the
   step, inside the page padding (a 1.6rem box overflowed the 320 px Korean page by 2 px, measured 2026-10-19). */

/* Contact */
.contact-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 2rem; margin-top: 1rem; }
.contact-form input, .contact-form textarea { width: 100%; padding: 0.75rem; border: 1px solid var(--rule); border-radius: 4px;
    font: inherit; background: #ffffff; margin-bottom: 0.75rem; }
.contact-form textarea { resize: vertical; }
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--id-navy); }
.btn { background: var(--id-navy); color: #ffffff; border: 0; border-radius: 4px; padding: 0.7rem 1.6rem; font: inherit; font-family: var(--font-ui); cursor: pointer; }
.btn:hover { background: var(--accent); }
#result-text { margin-top: 0.75rem; color: var(--accent); font-weight: 700; }  /* 700, was 600 (session 6, R52: Regular and Bold only) */

/* Footer */
/* Footer padding 2.5rem -> 1.5rem top and bottom (commander session 5); the icons add their own 0.5rem click padding. */
.site-footer { background: var(--id-navy); color: #c9ccd6; padding: 1.5rem 2rem; text-align: center; font-size: 0.85rem; }
/* Social icons (commander session 5: a little more space, easy to click): each link has 0.5rem padding, so the click
   area is about 34 px square and the icons stand 1.5rem apart (gap 0.5rem + two paddings; was 1rem). */
.social { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-bottom: 0.75rem; }
.social a { color: #c9ccd6; font-size: 1.15rem; padding: 0.5rem; display: flex; }  /* flex: link = icon + padding (no line height) */
.social a:hover { color: var(--id-gold); }
.site-footer .legal a { color: #c9ccd6; }
.site-footer p { margin: 0.25rem 0; }
/* Subscription block in the report body (session 6, R52: the footer social links under the market reports): the same
   .social links on paper, navy icons, left-aligned; the negative margin cancels the 0.5rem click padding of the first
   icon so the icons line up with the text. Placed after the footer rules: the hover color must override .social a:hover. */
.subscribe { margin-top: 1.5rem; }
.subscribe p { margin-bottom: 0.25rem; }
.subscribe .social { justify-content: start; margin: 0 0 0 -0.5rem; }
.subscribe .social a { color: var(--id-navy); }
.subscribe .social a:hover { color: var(--accent); }

/* Tablet and phone: one column; the contents become a sticky bar under the header */
@media (max-width: 960px) {
    /* Phones and tablets play the Shorts list (js/site.js, commander R60, R62): a vertical 9:16 panel, centered,
       as wide as the column (commander R63; was at most 60% and 320px), but never taller than the screen below the header (100svh where the
       browser knows it, 100vh otherwise), so the whole Short is visible and the panel stays modest. */
    .video-panel { aspect-ratio: 9 / 16; margin-inline: auto;
        width: min(100%, calc((100vh - var(--header-height) - 2rem) * 9 / 16));
        width: min(100%, calc((100svh - var(--header-height) - 2rem) * 9 / 16)); }
    .site-nav a:not(.lang-toggle) { display: none; }
    .hero { grid-template-columns: 1fr; padding: 2rem 1.25rem; gap: 2rem; }
    .report { grid-template-columns: minmax(0, 1fr); padding: 0 1.25rem 3rem; gap: 0; }
    /* Section menu fixed at the bottom of the screen from the first screen on (commander R64, R65, 2026-10-19; was a
       sticky bar under the header): full width, the active section marked on the top edge of its link; the body keeps
       space below the page end so the bar never covers the footer. */
    .toc { position: fixed; top: auto; bottom: 0; left: 0; right: 0; z-index: 10; background: var(--paper);
        border-top: 1px solid var(--rule); margin: 0; padding: 0.4rem 1.25rem; overflow-x: auto; white-space: nowrap; }
    body { padding-bottom: 3.5rem; }
    .toc-title { display: none; }
    .toc ol { display: flex; gap: 0.25rem; border-left: 0; }
    .toc a { border-left: 0; border-top: 2px solid transparent; padding: 0.3rem 0.6rem; margin: 0; }
    .toc a.active { border-top-color: var(--accent); }
    .contact-grid { grid-template-columns: 1fr; }
    .site-header { padding: 0 1.25rem; }
    .brand span { display: none; }
}
/* Narrow phones: the ten social icons do not fit one row with their click padding; two even rows of five instead of
   an uneven wrap (measured at 390 px: 8 + 2). */
@media (max-width: 520px) {
    .social { display: grid; grid-template-columns: repeat(5, auto); justify-content: center; }
}