/* ==========================================================================
   tech-blog-theme — design tokens, base, layout, lists, footer
   An engineering log: monospace dates, hairline ledgers, one colour per category.
   ========================================================================== */

:root {
    color-scheme: light;

    /* Surfaces & ink */
    --color-bg: #ffffff;
    --color-bg-secondary: #f4f5f7;
    --color-bg-tertiary: #e9ebef;
    --color-text: #161b22;
    --color-text-secondary: #4b5563;
    --color-text-muted: #5c6675;
    --color-border: #e3e6ea;
    --color-border-strong: #c9cfd6;
    /* Ghost injects --ghost-accent-color from Design → Brand; Koenig cards use the same variable */
    --color-accent: var(--ghost-accent-color, #2451b3);
    --color-accent-hover: color-mix(in srgb, var(--color-accent) 78%, #000);
    --color-accent-soft: color-mix(in srgb, var(--color-accent) 8%, transparent);
    --color-selection: color-mix(in srgb, var(--color-accent) 18%, transparent);

    /* Category hues — assigned to top-level tag categories by tag-tree.js (12 slots before colours repeat) */
    --cat-1: #6d4fc2;
    --cat-2: #0e8a7a;
    --cat-3: #6b7a1e;
    --cat-4: #b3661a;
    --cat-5: #2451b3;
    --cat-6: #4a5d73;
    --cat-7: #b0358a;
    --cat-8: #c24a3c;
    --cat-9: #1f7a8c;
    --cat-10: #8a5a2b;
    --cat-11: #5b7f2a;
    --cat-12: #7b4b94;
    --cat-color: var(--color-accent);

    /* Type */
    --font-sans: 'IBM Plex Sans KR', 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', system-ui, -apple-system, sans-serif;
    --font-mono: 'IBM Plex Mono', 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
    /* Ghost Design → Fonts injects --gh-font-heading / --gh-font-body; fall back to our stack */
    --font-heading: var(--gh-font-heading, var(--font-sans));
    --font-body: var(--gh-font-body, var(--font-sans));

    /* Layout */
    --sidebar-width: 272px;
    --content-max-width: 760px;
    --list-max-width: 880px;
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;
    --spacing-3xl: 72px;

    --radius-sm: 3px;
    --radius-md: 6px;
    --radius-lg: 10px;

    --shadow-sm: 0 1px 2px rgba(22, 27, 34, 0.06);
    --shadow-md: 0 6px 18px -6px rgba(22, 27, 34, 0.18);
    --shadow-lg: 0 24px 48px -12px rgba(22, 27, 34, 0.28);

    --transition-fast: 120ms ease;
    --transition-base: 180ms ease;
    --transition-slow: 260ms cubic-bezier(0.2, 0.7, 0.2, 1);

    --ring: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-accent);
}

[data-theme="dark"] {
    color-scheme: dark;
    --color-bg: #0e1116;
    --color-bg-secondary: #151a21;
    --color-bg-tertiary: #1d242d;
    --color-text: #e6eaf0;
    --color-text-secondary: #aab3c0;
    --color-text-muted: #8e98a6;
    --color-border: #222a34;
    --color-border-strong: #323c48;
    /* Lighten whatever accent was chosen so it reads on the dark surface */
    --color-accent: color-mix(in srgb, var(--ghost-accent-color, #2451b3) 55%, #fff);
    --color-accent-hover: color-mix(in srgb, var(--ghost-accent-color, #2451b3) 40%, #fff);
    --color-accent-soft: color-mix(in srgb, var(--color-accent) 12%, transparent);
    --color-selection: color-mix(in srgb, var(--color-accent) 28%, transparent);
    --cat-1: #a78bfa;
    --cat-2: #34d3be;
    --cat-3: #b5c44a;
    --cat-4: #f2a54a;
    --cat-5: #7aa2f7;
    --cat-6: #9db2cc;
    --cat-7: #e879c9;
    --cat-8: #f08a7e;
    --cat-9: #5ec8da;
    --cat-10: #d9a066;
    --cat-11: #a3c95a;
    --cat-12: #c99be0;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 6px 18px -6px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 24px 48px -12px rgba(0, 0, 0, 0.7);
}

/* ==========================================================================
   Reset & base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: var(--spacing-xl);
}

@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    word-break: keep-all;
    overflow-wrap: anywhere;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
img { font-style: italic; }

a {
    color: var(--color-accent);
    text-decoration: none;
    text-underline-offset: 0.18em;
    transition: color var(--transition-fast);
}
a:hover { color: var(--color-accent-hover); }

button {
    font: inherit;
    color: inherit;
    cursor: pointer;
    background: none;
    border: 0;
}

input, textarea, select { font: inherit; color: inherit; }

::selection { background: var(--color-selection); }

:focus { outline: none; }
:focus-visible {
    outline: none;
    box-shadow: var(--ring);
    border-radius: var(--radius-sm);
}

kbd {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    padding: 1px 5px;
    border: 1px solid var(--color-border-strong);
    border-bottom-width: 2px;
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    background: var(--color-bg);
}

/* Utilities */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.skip-link {
    position: absolute;
    top: var(--spacing-sm);
    left: var(--spacing-sm);
    z-index: 1000;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-text);
    color: var(--color-bg);
    border-radius: var(--radius-md);
    transform: translateY(-200%);
}
.skip-link:focus { transform: none; color: var(--color-bg); }

/* Small-caps style label in mono: section headings, eyebrows, counts */
.label {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
}

/* Category badge + swatch — colour comes from --cat-color set per element by tag-tree.js */
.category-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--cat-color);
}
a.category-badge:hover { color: var(--cat-color); text-decoration: underline; }

.cat-swatch {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 2px;
    background: var(--cat-color);
    flex-shrink: 0;
    vertical-align: 0.05em;
}

/* ==========================================================================
   Layout
   ========================================================================== */

.site-wrapper {
    display: flex;
    min-height: 100vh;
}

.main-content {
    flex: 1;
    min-width: 0;
    margin-left: var(--sidebar-width);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* Full-bleed Koenig cards size themselves against this column (cqw), not the viewport */
    container-type: inline-size;
    overflow-x: clip;
}
/* Column flex items never shrink below their min-content width by default — a wide table or
   code block would silently push the whole article past the viewport. */
.main-content > * { min-width: 0; max-width: 100%; }

.page-container {
    width: 100%;
    max-width: var(--list-max-width);
    margin: 0 auto;
    padding: var(--spacing-2xl) var(--spacing-xl) var(--spacing-3xl);
}

/* Mobile header — only below the drawer breakpoint */
.mobile-header {
    display: none;
    position: sticky;
    top: 0;
    z-index: 90;
    height: 56px;
    padding: 0 var(--spacing-sm);
    background: color-mix(in srgb, var(--color-bg) 92%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--color-border);
    align-items: center;
    justify-content: space-between;
}

.menu-toggle,
.mobile-header .dark-mode-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    color: var(--color-text);
}
.menu-toggle:hover,
.mobile-header .dark-mode-toggle:hover { background: var(--color-bg-secondary); }

.mobile-logo {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
    letter-spacing: -0.01em;
}

/* ==========================================================================
   Masthead (home) and archive headers (tag / author)
   ========================================================================== */

.masthead {
    padding-bottom: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
    border-bottom: 1px solid var(--color-border);
}

.masthead-title {
    font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.25;
    max-width: 28ch;
}

.masthead-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.archive-header {
    padding-bottom: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    border-bottom: 1px solid var(--color-border);
}

.archive-header .category-badge { margin-bottom: var(--spacing-sm); }

.archive-title {
    font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.25rem);
    letter-spacing: -0.02em;
}

.archive-description {
    margin-top: var(--spacing-sm);
    font-size: 1.0625rem;
    color: var(--color-text-secondary);
    max-width: 60ch;
}

.archive-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.author-avatar-large {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: var(--spacing-md);
}
.author-initial-large {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    font-weight: 700;
    color: #fff;
    background: var(--color-accent);
}
.author-location {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

/* Section heading inside lists */
.section-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--spacing-md);
    margin: 0 0 var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--color-border);
}
.page-container > section + section { margin-top: var(--spacing-3xl); }
.section-heading h2 {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0;
}

/* ==========================================================================
   Featured cards — the one place that gets boxes; the top rule carries the category colour
   ========================================================================== */

.featured-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--spacing-md);
}

.featured-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: var(--spacing-md) var(--spacing-md) var(--spacing-lg);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-lg);
    border-top: 3px solid var(--cat-color);
    transition: background var(--transition-fast);
}
.featured-card:hover { background: var(--color-bg-tertiary); }

.featured-card-image {
    margin: calc(-1 * var(--spacing-md)) calc(-1 * var(--spacing-md)) var(--spacing-md);
    aspect-ratio: 16 / 9;
    overflow: hidden;
}
.featured-card-image img { width: 100%; height: 100%; object-fit: cover; }

.featured-card .category-badge { margin-bottom: var(--spacing-sm); }

.featured-card-title {
    font-size: 1.0625rem;
    line-height: 1.4;
    margin-bottom: var(--spacing-sm);
}
.featured-card-title a { color: var(--color-text); }
.featured-card-title a::after { content: ''; position: absolute; inset: 0; }
.featured-card-title a:hover { color: var(--color-accent); }

.featured-card-excerpt {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: var(--spacing-md);
}

.featured-card-meta {
    margin-top: auto;
    display: flex;
    gap: var(--spacing-md);
}

/* ==========================================================================
   Ledger — the chronological post list
   ========================================================================== */

.posts-list {
    list-style: none;
    border-top: 1px solid var(--color-border);
}

.post-row {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr) auto;
    gap: var(--spacing-md) var(--spacing-lg);
    align-items: start;
    padding: var(--spacing-lg) 0;
    border-bottom: 1px solid var(--color-border);
}

.post-row-date {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--color-text-muted);
    padding-top: 0.35rem;
    font-variant-numeric: tabular-nums;
}

.post-row-body { min-width: 0; }

.post-row-body .category-badge { margin-bottom: var(--spacing-xs); }

.post-row-title {
    font-size: 1.25rem;
    line-height: 1.35;
    letter-spacing: -0.015em;
}
.post-row-title a { color: var(--color-text); }
.post-row-title a:hover { color: var(--color-accent); }

.post-row-excerpt {
    margin-top: var(--spacing-sm);
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--color-text-secondary);
    max-width: 68ch;
}

.post-row-meta {
    display: flex;
    gap: var(--spacing-md);
    margin-top: var(--spacing-sm);
}

.post-row-thumb {
    width: 120px;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-bg-secondary);
}
.post-row-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   Pagination
   ========================================================================== */

.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    margin-top: var(--spacing-xl);
}
.pagination a {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-text);
    transition: border-color var(--transition-fast), background var(--transition-fast);
}
.pagination a:hover { border-color: var(--color-border-strong); background: var(--color-bg-secondary); }
.pagination-prev { margin-right: auto; }
.pagination-next { margin-left: auto; }
.pagination-info { order: 1; flex: 1; text-align: center; }
.pagination-prev { order: 0; }
.pagination-next { order: 2; }

/* ==========================================================================
   Error pages
   ========================================================================== */

.error-page { text-align: center; padding-top: var(--spacing-3xl); }
.error-code {
    font-family: var(--font-mono);
    font-size: clamp(3rem, 8vw, 5rem);
    font-weight: 600;
    color: var(--color-text-muted);
    letter-spacing: -0.04em;
}
.error-message { font-size: 1.5rem; margin: var(--spacing-md) 0 var(--spacing-sm); }
.error-description { color: var(--color-text-secondary); }
.error-actions {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
    margin-top: var(--spacing-xl);
}
.error-button,
.error-button-secondary {
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--radius-md);
    font-weight: 500;
}
.error-button { background: var(--color-accent); color: #fff; }
.error-button:hover { background: var(--color-accent-hover); color: #fff; }
.error-button-secondary { border: 1px solid var(--color-border-strong); color: var(--color-text); }

/* ==========================================================================
   Site footer
   ========================================================================== */

.site-footer {
    margin-top: auto;
    border-top: 1px solid var(--color-border);
}

.footer-content {
    max-width: var(--list-max-width);
    margin: 0 auto;
    padding: var(--spacing-lg) var(--spacing-xl);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md) var(--spacing-lg);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--color-text-muted);
}
.footer-powered { margin-top: 2px; }
.footer-powered a { color: var(--color-text-secondary); }
.footer-nav ul { display: flex; flex-wrap: wrap; gap: var(--spacing-md); list-style: none; }
.footer-nav a { color: var(--color-text-secondary); }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1024px) {
    .main-content { margin-left: 0; }
    .mobile-header { display: flex; }
    .page-container { padding: var(--spacing-xl) var(--spacing-lg) var(--spacing-2xl); }
    .featured-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .page-container { padding: var(--spacing-lg) var(--spacing-md) var(--spacing-2xl); }
    .featured-grid { grid-template-columns: 1fr; }
    .post-row {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: var(--spacing-sm) var(--spacing-md);
        padding: var(--spacing-md) 0;
    }
    .post-row-date { grid-column: 1 / -1; padding-top: 0; }
    .post-row-thumb { width: 88px; }
    .post-row-title { font-size: 1.1rem; }
    .pagination-info { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Ghost's Portal / search / comments are light documents inside iframes. Because `color-scheme`
   inherits, a dark page makes Chrome render those iframes opaque (a white box around the
   Subscribe button). Pinning the embedding element to light keeps them transparent. */
#ghost-portal-root iframe,
#sodo-search-root iframe,
iframe[title="comments-frame"] {
    color-scheme: light;
}

/* Portal's floating trigger is painted in the raw brand accent inside its iframe and knows nothing
   about the theme's dark mode. Inverting only the trigger (not the popup) keeps it readable on dark
   surfaces: a black accent becomes a white pill, coloured accents become a lighter tint of themselves. */
[data-theme="dark"] #ghost-portal-root iframe[title="portal-trigger"] {
    filter: invert(1) hue-rotate(180deg);
}