/* ============================================================================
   Krinus Stock — Consolidated NYT-style stylesheet
   ----------------------------------------------------------------------------
   Single custom layer for: index.php, articles.php, articles2.php, articles3.php
   Replaces the old css/custom.css + css/stock-polish.css overrides (no
   duplicate :root blocks, no conflicting nav rules).

   Type system (EN/KR mixed):
     - Headings h1-h6, nav, UI : "Libre Franklin" (Latin) -> "Noto Sans KR" (한글)
     - Body / running text     : "Source Serif 4" (Latin) -> "Noto Serif KR" (한글)
     - Tracking 자간            : -0.005em  (= -0.5%)
     - Width   장평             : OMITTED — Noto KR has no width axis, so true 95%
                                  on web needs transform:scaleX (breaks layout).
                                  Per decision (option B): tracking only.
   ========================================================================== */

:root {
    --k-bg: #ffffff;
    --k-ink: #121212;          /* headlines */
    --k-text: #212529;         /* body copy — uniform, softened (not too dark) */
    --k-muted: #666666;        /* meta / captions */
    --k-faint: #727272;
    --k-rule: #e2e2e2;         /* hairline rules */
    --k-rule-strong: #121212;  /* section divider */
    --k-soft: #f7f7f7;
    --k-link: #555555;         /* links: same as body (진회색, uniform, softened) */
    --k-sans: "Libre Franklin", "Noto Sans KR", "Apple SD Gothic Neo", Arial, sans-serif;
    --k-serif: "Source Serif 4", "Noto Serif KR", Georgia, "Times New Roman", serif;
    --k-track: -0.005em;       /* 자간 -0.5% */
}

/* ---------------------------------------------------------------------------
   1. Base
   ------------------------------------------------------------------------- */
html,
body {
    max-width: 100%;
    /* NO overflow guard here: any overflow on an ANCESTOR of #header
       disables `position: sticky` on the header. The horizontal-overflow
       guard lives on #content/#footer instead (siblings of #header). */
    background: var(--k-bg);
    color: var(--k-text);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html body {
    font-family: var(--k-serif);
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: var(--k-track);
    word-spacing: 0px;
}

#wrapper,
#content,
.content-wrap,
.container,
.row {
    max-width: 100%;
}

.container {
    width: min(1180px, calc(100% - 32px));
}

.content-wrap {
    padding-top: 26px !important;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
}

hr,
.line,
.line-sm {
    border-color: var(--k-rule) !important;
    opacity: 1;
}

/* ---------------------------------------------------------------------------
   2. Typography — headings (sans) / body (serif)
   ------------------------------------------------------------------------- */
html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6,
html body h1 a,
html body h2 a,
html body h3 a,
html body h4 a,
html body h5 a,
html body h6 a,
html body .entry-title h1,
html body .entry-title h2,
html body .entry-title h3,
html body .entry-title h4,
html body .entry-title h5,
html body .entry-title h6,
html body .entry-title h1 a,
html body .entry-title h2 a,
html body .entry-title h3 a,
html body .entry-title h4 a,
html body .entry-title h5 a,
html body .entry-title h6 a,
html body .ahkr,
html body .hkr,
html body .hskr,
html body .rkr,
html body .fkr,
html body .nkr {
    font-family: var(--k-sans) !important;
    color: var(--k-ink) !important;
    font-weight: 400 !important;
    letter-spacing: var(--k-track) !important;
}

html body h1,
html body .entry-title h1,
html body .ahkr {
    font-size: 2.35rem;
    line-height: 1.18 !important;
	letter-spacing: -3px; 
    font-weight: 400 !important;
}

html body h2,
html body .entry-title h2 {
    font-size: 1.75rem;
	letter-spacing: -3px; 
    line-height: 1.24 !important;
}

html body h3,
html body .entry-title h3,
html body .entry-title h3 a,
html body .hkr,
html body .rkr {
    font-size: 1.5rem;
    line-height: 1.32 !important;
	letter-spacing: -3px; 
    margin-bottom: 10px !important;
}

html body h4,
html body h5,
html body h6,
html body .hskr,
html body .fkr {
    font-size: 1.05rem;
    line-height: 1.36 !important;
	letter-spacing: -0.8px; 
}

/* Running text + legacy Korean utility classes -> serif body */
html body,
html body p,
html body li,
html body .entry-content,
html body .entry-content p,
html body .pkr,
html body .spkr,
html body .apkr,
html body .askr,
html body .mkr,
html body .nkr,
html body a.pkr,
html body a.spkr,
html body a.apkr,
html body a.askr,
html body a.mkr {
    font-family: var(--k-serif) !important;
    color: var(--k-text) !important;
    letter-spacing: var(--k-track) !important;
}

html body .entry-content,
html body .entry-content p,
html body .pkr,
html body .apkr,
html body .askr,
html body .spkr,
html body .mkr,
html body .nkr,
html body a.pkr,
html body a.apkr,
html body a.askr {
    font-size: 0.95rem !important;
    line-height: 1.3 !important;
    font-weight: 400 !important;
    color: var(--k-text) !important;
}

html body .entry-content p {
    margin-bottom: 14px;
}

b,
strong,
.fw-bold,
.font-weight-bold,
html body h1 b,
html body h2 b,
html body h3 b,
html body h1 strong,
html body h2 strong,
html body h3 strong {
    font-weight: 5U00 !important;
}

/* Meta / small print -> sans, muted */
html body .entry-meta,
html body .entry-meta a,
html body .entry-meta li,
html body small,
html body .skr,
html body .ckr,
html body .eskr,
html body .spkr,
html body .date-today,
html body .date-today .skr,
html body .date-today .divider-text {
    font-family: var(--k-sans) !important;
    color: var(--k-muted) !important;
    letter-spacing: 0 !important;
}

html body small,
html body .skr,
html body .eskr {
    font-size: 0.78rem;
}

/* Links inside body copy — restrained NYT underline */
html body .entry-content a:not(.btn),
html body .color-underline {
    color: var(--k-link) !important;
    background-image: linear-gradient(transparent calc(100% - 1px), rgba(50, 104, 145, 0.35) 1px);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    transition: color 150ms ease;
}

html body .entry-content a:hover {
    color: var(--k-ink) !important;
}

/* ---------------------------------------------------------------------------
   3. Header — NYT Top Bar + section nav
   ------------------------------------------------------------------------- */
#header,
#header-wrap {
    background: var(--k-bg) !important;
    border-bottom: 1px solid var(--k-rule) !important;
}

/* Top row: masthead + utilities */
#header .header-row:first-child {
    min-height: 72px;
    align-items: center !important;
}

/* Logo flex-column: tighten gap between logo image and date line */
html body #logo {
    justify-content: center !important;
    gap: 2px !important;
}

#logo img {
    max-height: 48px;
    width: auto;
    object-fit: contain;
}

/* Search icon — always visible */
html body #top-search { display: flex !important; align-items: center; }
html body #top-search-trigger { display: flex !important; align-items: center; }
html body #top-search-trigger i { font-size: 17px !important; color: var(--k-ink) !important; }

.date-today,
.date-today small,
.date-today .skr,
.date-today .divider-text {
    color: var(--k-faint) !important;
    font-size: 12px;
    letter-spacing: 0;
}

.date-today::before,
.date-today::after {
    border-color: var(--k-rule) !important;
}

/* Hide the legacy dark-mode toggle (no dark theme on stock pages) */
.dark-mode {
    display: none !important;
}

#top-search-trigger i {
    font-size: 18px;
    color: var(--k-ink);
}

/* Section navigation — NYT style: serif-free, thin, ruled top, even spacing */
.header-border {
    border-top: 1px solid var(--k-rule) !important;
}

/* Nav full-width: nav + ul must be 100% wide so justify-content-between works */
html body nav.primary-menu { width: 100%; }

.primary-menu .menu-container,
.primary-menu .menu-container.hskr {
    gap: 0;
    width: 100%;
    justify-content: space-between !important;
}

html body .primary-menu .menu-link,
html body .sub-menu-container .menu-item > .menu-link {
    font-family: var(--k-sans) !important;
    color: var(--k-ink) !important;
    font-size: 1rem;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    padding-inline: 12px;
}

.primary-menu .menu-container.hskr,
.primary-menu .menu-container.hskr .menu-link,
.primary-menu .menu-container.hskr .menu-link div {
    line-height: 46px !important;
}

.primary-menu .menu-link::after {
    content: "";
    display: block;
    height: 2px;
    background: var(--k-rule-strong);
    transform: scaleX(0);
    transition: transform 140ms ease;
    margin-top: -2px;
}

.primary-menu .menu-link:hover::after,
.primary-menu .current > .menu-link::after {
    transform: scaleX(1);
}

.primary-menu .menu-link:hover,
.primary-menu .current > .menu-link {
    background: transparent !important;
    color: #000 !important;
}

.sub-menu-container {
    border: 1px solid var(--k-rule);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.07);
}

/* Real sticky header (NYT) — ALL widths. Canvas makes #header-wrap
   `position:fixed` on desktop but only pins it (top:0) once its JS adds
   `.sticky-header`; that JS isn't firing here, so the header scrolled away.
   Take #header-wrap in-flow and make #header itself sticky so it pins
   against the tall page body at every viewport width. */
html body #header {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 999;
}

html body #header-wrap {
    position: static !important;
    transition: none !important;
}

html body .header-wrap-clone {
    display: none !important;
    height: 0 !important;
}

@media (min-width: 992px) {
    /* Keep all 9 section-nav items on one line (was wrapping 마켓데이타). */
    html body .primary-menu .menu-container.hskr {
        flex-wrap: nowrap !important;
    }

    html body .primary-menu .menu-container.hskr > .menu-item > .menu-link {
        padding-inline: 8px;
        white-space: nowrap;
    }
}

/* ---------------------------------------------------------------------------
   4. Content — entries, dividers, ads
   ------------------------------------------------------------------------- */
.entry {
    margin-bottom: 24px;
}

.border-between > [class*="col-"]::before,
.border-between > [class*="col-"]::after {
    border-color: var(--k-rule) !important;
    opacity: 1 !important;
}

.entry-image img,
.ad-banner img {
    border-radius: 2px;
    display: block;
    width: 100%;
}

.ad-banner {
    background: var(--k-soft);
    border: 1px solid var(--k-rule);
    padding: 12px;
    text-align: center;
}

.ad-banner small {
    color: var(--k-faint) !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 10px;
}

.skr {
    white-space: normal;
}

/* ---------------------------------------------------------------------------
   5. Footer
   ------------------------------------------------------------------------- */
#footer {
    background: var(--k-bg);
    border-top: 1px solid var(--k-rule) !important;
    margin-top: 44px;
}

#footer .container,
#copyrights .container {
    margin-top: 0 !important;
}

.footer-widgets-wrap {
    padding: 36px 0 18px;
}

html body #footer h4 {
    font-family: var(--k-sans) !important;
    color: var(--k-ink) !important;
    font-size: 13px;
    font-weight: 600 !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 10px !important;
}

html body #footer a,
html body #footer .pkr,
html body #copyrights {
    font-family: var(--k-sans) !important;
    color: var(--k-muted) !important;
    font-size: 13px;
    letter-spacing: 0 !important;
}

html body #footer a:hover {
    color: var(--k-ink) !important;
}

#copyrights {
    border-top: 1px solid var(--k-rule);
    padding-top: 20px;
}

/* ---------------------------------------------------------------------------
   6. Misc legacy helpers kept from custom.css (still referenced in markup)
   ------------------------------------------------------------------------- */
.hr { display: block; margin: 0 auto; border-style: inset; border-width: 1px; background-color: var(--k-rule); }
.hr.double { border-top: 3px double var(--k-rule); }
.vl  { border-left: 1px solid var(--k-rule); height: auto; }
.vls { border-left: 1px solid var(--k-rule); height: 5px; }
.vr  { border-right: 1px solid var(--k-rule); height: 80%; }

ul.no-bullets { list-style: none; margin-left: 10px; padding-left: 0; }

.pt-links a { display: inline-block; margin: 0 3px; color: var(--k-text); border-bottom: 1px dotted var(--k-muted); }
.pt-links a:hover { color: var(--k-ink); border-bottom: 1px solid var(--k-ink); }

/* ---------------------------------------------------------------------------
   6a. Sticky columns — right sidebar (.col-lg-3.position-sticky) AND the
   left SHARE rail (.media-content.position-sticky in arcenter*.php).
   Canvas `.h-100/.h-300/.h-400/.h-500` + the flex row's default stretch make
   the column span the full row height, leaving no travel room so it never
   visually sticks. Force content height + top-align so sticky can engage
   (the overflow-x:clip fix above is the other half of this).
   ------------------------------------------------------------------------- */
html body .row > .position-sticky,
html body .row > [class*="col-"] > .position-sticky {
    height: auto !important;
    align-self: flex-start;
    z-index: 1;
}

@media (max-width: 991.98px) {
    /* Columns stack full-width below lg — pinning would overlap content. */
    html body .row > .position-sticky,
    html body .row > [class*="col-"] > .position-sticky {
        position: static !important;
        top: auto !important;
        margin-top: 0 !important;
    }
}

/* ---------------------------------------------------------------------------
   6c. Header ↔ body gap (requested) + remove link underline rule.
   ------------------------------------------------------------------------- */
html body #content {
    padding-top: 22px;
    max-width: 100%;
    /* Horizontal-overflow guard lives here (sibling of #header) so it can
       never disable the header's position:sticky. `clip` is sticky-safe for
       the in-content article sidebar; `hidden` is the legacy fallback. */
    overflow-x: hidden;
    overflow-x: clip;
}

html body #footer {
    max-width: 100%;
    overflow-x: hidden;
    overflow-x: clip;
}

/* Neutralise the large top-of-page negative margins that pull content up
   under the sticky header (desktop too, not just mobile). */
html body .content-wrap > .container[style*="margin-top: -1"],
html body .content-wrap > .container[style*="margin-top:-1"],
html body #content > .container[style*="margin-top: -1"],
html body #content > .container[style*="margin-top:-1"] {
    margin-top: 0 !important;
}

/* Remove the underline / gradient line under <a> (color-underline + body links) */
html body a,
html body .color-underline,
html body .entry-content a,
html body .entry-content a:not(.btn),
html body .entry-title a,
html body .primary-menu .menu-link {
    text-decoration: none !important;
    background-image: none !important;
}

/* ---------------------------------------------------------------------------
   6b. Dark Section Spotlight (m8: <div class="section dark">)
   The section.dark / .dark selectors below outrank the html-body color rules
   above (extra class specificity + later source order) so light-on-dark text
   is restored — otherwise the consolidated ink/text colors render dark-on-dark.
   ------------------------------------------------------------------------- */
html body .section.dark,
html body .section.dark p,
html body .section.dark li,
html body .section.dark .entry-content,
html body .section.dark .entry-content p,
html body .section.dark .pkr,
html body .section.dark .spkr,
html body .section.dark .mkr,
html body .section.dark td,
html body .section.dark th {
    color: rgba(255, 255, 255, 0.78) !important;
}

html body .section.dark h1,
html body .section.dark h2,
html body .section.dark h3,
html body .section.dark h4,
html body .section.dark h5,
html body .section.dark h6,
html body .section.dark h1 a,
html body .section.dark h2 a,
html body .section.dark h3 a,
html body .section.dark h4 a,
html body .section.dark h5 a,
html body .section.dark .entry-title h3 a,
html body .section.dark .hkr,
html body .section.dark .hskr,
html body .section.dark .rkr,
html body .section.dark .fkr {
    color: #f4f4f4 !important;
}

html body .section.dark .entry-categories a,
html body .section.dark .color-underline {
    color: #d6b14b !important;
}

html body .section.dark hr,
html body .section.dark .line,
html body .section.dark .border-between > [class*="col-"]::before,
html body .section.dark .border-between > [class*="col-"]::after {
    border-color: rgba(255, 255, 255, 0.18) !important;
}

/* ---------------------------------------------------------------------------
   7. Responsive
   ------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .container { width: min(100% - 24px, 720px); }

    html body { font-size: 16px; }

    #header .header-row:first-child { min-height: 78px; }
    #logo { align-items: flex-start !important; }
    #logo img { max-height: 44px; }

    .content-wrap { padding-top: 20px !important; }

    .primary-menu .menu-container.hskr,
    .primary-menu .menu-container.hskr .menu-link,
    .primary-menu .menu-container.hskr .menu-link div {
        line-height: 40px !important;
    }

    .entry {
        border-bottom: 1px solid var(--k-rule) !important;
        margin-bottom: 24px !important;
        padding-bottom: 24px;
    }

    html body h1, html body .entry-title h1, html body .ahkr { font-size: 1.9rem; }
    html body h2, html body .entry-title h2 { font-size: 1.5rem; }
    html body h3, html body .entry-title h3, html body .entry-title h3 a { font-size: 1.2rem; }

    [style*="margin-top:-"], [style*="margin-top: -"] { margin-top: 0 !important; }
    [style*="margin-bottom:-"], [style*="margin-bottom: -"] { margin-bottom: 0 !important; }
    [style*="margin-left"] { margin-left: 0 !important; }
}

@media (max-width: 575.98px) {
    .container { width: calc(100% - 24px); }

    #top-search,
    #primary-menu-trigger { transform: translateY(0); }

    #header .header-row:first-child {
        min-height: 84px;
        align-items: center;
        gap: 8px;
    }

    #logo {
        flex: 1 1 auto;
        min-width: 0;
        max-width: calc(100% - 96px);
        padding: 8px 0;
    }

    #logo a,
    #logo img { max-width: 172px; max-height: 38px; width: auto; }

    #logo .date-today {
        display: block;
        width: 100%;
        max-width: 220px;
        margin: 3px 0 0 !important;
        padding: 0;
        text-align: left;
        white-space: normal;
    }

    #logo .date-today::before,
    #logo .date-today::after { display: none; }

    #logo .date-today .skr,
    #logo .date-today .divider-text {
        display: inline;
        font-size: 11px !important;
        line-height: 1.3 !important;
    }

    .header-misc {
        flex: 0 0 auto;
        margin-left: auto !important;
        gap: 4px;
    }

    #primary-menu-trigger {
        flex: 0 0 36px;
        width: 36px;
        height: 36px;
        margin-left: 0 !important;
    }

    .entry-image.alignleft {
        margin: 0 14px 8px 0 !important;
        max-width: 38vw;
        width: 120px !important;
    }

    .footer-widgets-wrap > [class*="col-"] { margin-bottom: 18px; }
}