/* Study reading interface, adapted to the existing Zola content tree. */
:root {
    --light: #f8fafc;
    --lightgray: #e2e8f0;
    --gray: #64748b;
    --darkgray: #334155;
    --dark: #0f172a;
    --secondary: #4f46e5;
    --tertiary: #3730a3;
    --highlight: rgba(79, 70, 229, .08);
    --surface: #fff;
    --titleFont: Georgia, "Noto Serif KR", serif;
    --headerFont: Georgia, "Noto Serif KR", serif;
    --bodyFont: Pretendard, Inter, "Noto Sans KR", system-ui, sans-serif;
    --codeFont: "Cascadia Code", "IBM Plex Mono", Consolas, monospace;
    --side-panel-width: 272px;
    --top-spacing: 0;
    --radius: 10px;
}

[data-theme="dark"] {
    --light: #0b0f17;
    --lightgray: #243049;
    --gray: #94a3b8;
    --darkgray: #d9e2ef;
    --dark: #f1f5f9;
    --secondary: #a5b4fc;
    --tertiary: #c7d2fe;
    --highlight: rgba(129, 140, 248, .13);
    --surface: #131b2e;
}

html { width: auto; scroll-padding-top: 5.5rem; }
body { background: var(--light); letter-spacing: -.012em; }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible {
    outline: 2px solid var(--secondary);
    outline-offset: 3px;
}

.site-header {
    position: sticky;
    z-index: 60;
    top: 0;
    display: block;
    width: 100%;
    height: 64px;
    margin: 0;
    background: color-mix(in srgb, var(--light) 92%, transparent);
    border-bottom: 1px solid var(--lightgray);
    backdrop-filter: blur(16px);
}
.site-header-inner {
    display: flex;
    align-items: center;
    gap: 2rem;
    max-width: 1600px;
    height: 100%;
    margin: auto;
    padding: 0 2rem;
}
.header-brand {
    display: inline-flex;
    align-items: center;
    flex: none;
    gap: .65rem;
    color: var(--dark);
    font-family: var(--titleFont);
    font-size: 1.1rem;
    font-weight: 700;
    white-space: nowrap;
}
.brand-mark {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 9px;
    background: var(--secondary);
    color: var(--light);
    font-family: var(--bodyFont);
    font-size: 1.05rem;
    font-weight: 800;
}
.brand-mark span { color: color-mix(in srgb, var(--light) 65%, transparent); }
.header-nav { display: flex; align-items: center; height: 100%; gap: 1.5rem; }
.header-nav a { color: var(--gray); font-size: .88rem; font-weight: 600; }
.header-nav a:hover { color: var(--secondary); }
.header-actions { display: flex; align-items: center; gap: .65rem; margin-left: auto; }
.header-actions button, .mobile-menu-button, .sidebar-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    border: 1px solid var(--lightgray);
    border-radius: 8px;
    background: var(--surface);
    color: var(--darkgray);
}
.header-search-button { gap: .55rem; padding: 0 .7rem; }
.header-search-button svg { width: 17px; height: 17px; }
.header-search-button span { font-size: .82rem; }
.header-search-button kbd {
    display: grid;
    place-items: center;
    min-width: 1.3rem;
    padding: .05rem .25rem;
    border: 1px solid var(--lightgray);
    border-radius: 4px;
    color: var(--gray);
    font-size: .7rem;
}
.header-theme-button { width: 36px; padding: 0; }
.header-theme-button svg { width: 18px; height: 18px; }
.mobile-menu-button, .sidebar-close, .sidebar-scrim { display: none; }

.page { max-width: 1600px; }
.page > #quartz-body {
    grid-template-columns: 272px minmax(0, 1fr) 228px;
    grid-template-rows: auto auto;
    grid-template-areas: "grid-sidebar-left grid-center grid-sidebar-right" "grid-sidebar-left grid-footer grid-sidebar-right";
    column-gap: 0;
    min-height: calc(100vh - 64px);
}
.sidebar {
    top: 64px;
    height: calc(100vh - 64px);
    padding: 1.4rem 1rem 1.5rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.sidebar.left { z-index: 5; gap: 1rem; border-right: 1px solid var(--lightgray); }
.sidebar.right { padding: 2rem 1.1rem; border-left: 1px solid var(--lightgray); }
.sidebar-heading { position: relative; display: flex; flex-direction: column; gap: .2rem; padding: 0 .55rem; }
.sidebar-eyebrow, .eyebrow {
    color: var(--secondary);
    font-family: var(--codeFont);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
}
.sidebar-heading strong { font-size: 1rem; }
.search input { height: 2.65rem; padding-left: 2.4rem; border-radius: 8px; background: var(--surface); font-size: .83rem; }
.search .search-icon { left: .85rem; }
#pagefind-dropdown { min-width: 16rem; border-radius: 9px; background: var(--surface); }
.explorer { display: flex; flex-direction: column; gap: .15rem; }
.explorer .sidebar-title, .sidebar-title {
    margin: 1.1rem .55rem .45rem;
    color: var(--gray);
    font-family: var(--bodyFont);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.explorer .sidebar-title-secondary { margin-top: 1.5rem; }
.nav-home {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .55rem .7rem;
    border-radius: 8px;
    color: var(--darkgray);
    font-size: .86rem;
    font-weight: 600;
}
.nav-home:hover, .nav-home[aria-current="page"] { background: var(--highlight); color: var(--secondary); }
.subject-nav { display: flex; flex-direction: column; gap: .12rem; }
.nav-subject { min-width: 0; }
.nav-subject summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .45rem;
    padding: .58rem .7rem;
    border-radius: 8px;
    color: var(--darkgray);
    font-size: .83rem;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    list-style: none;
}
.nav-subject summary::-webkit-details-marker { display: none; }
.nav-subject summary::after { content: '›'; flex: none; color: var(--gray); font-size: 1.05rem; transform: rotate(0); transition: transform .15s; }
.nav-subject[open] summary::after { transform: rotate(90deg); }
.nav-subject summary:hover, .nav-subject[open] > summary { color: var(--secondary); background: var(--highlight); }
.nav-subject-children { display: flex; flex-direction: column; margin: .15rem 0 .55rem .9rem; border-left: 1px solid var(--lightgray); }
.nav-subject-children a { padding: .4rem .55rem .4rem .8rem; border-radius: 0 7px 7px 0; color: var(--gray); font-size: .79rem; font-weight: 500; line-height: 1.4; }
.nav-subject-children a:hover, .nav-subject-children a[aria-current="page"] { color: var(--secondary); background: var(--highlight); }
.sidebar-actions { margin-top: auto; padding: 1rem .55rem 0; border-top: 1px solid var(--lightgray); }
.toc { width: 100%; }
.toc .sidebar-title { margin: 0 0 1rem; }
.toc ul { padding: 0; }
.toc li { margin: .25rem 0; }
.toc a { display: block; padding: .26rem 0 .26rem .75rem; border-left: 2px solid transparent; color: var(--gray); font-size: .79rem; font-weight: 500; line-height: 1.4; }
.toc a:hover, .toc a[aria-current="location"] { color: var(--secondary); border-color: var(--secondary); }
.toc li ul { padding-left: .7rem; }

.center { width: 100%; min-width: 0; max-width: 100%; padding: 2.2rem clamp(1.5rem, 4vw, 4rem) 1rem; }
.page-header { margin: 0 0 1.3rem; }
.page-header header { margin: 0; }
.page-header h1 { font-size: clamp(1.8rem, 2.4vw, 2.7rem); line-height: 1.25; letter-spacing: -.035em; }
.subject-index .page-header { display: none; }
.page-footer { margin-top: 3rem; }
.page > #quartz-body > footer { grid-area: grid-footer; margin: 0; padding: 0 clamp(1.5rem, 4vw, 4rem) 2rem; }
.breadcrumb { gap: .45rem; margin: 0 0 1.25rem; font-size: .78rem; }
.breadcrumb a { color: var(--gray); }
.breadcrumb-current { color: var(--dark); font-weight: 600; }
.breadcrumb-sep { color: var(--gray); opacity: .55; }

.landing-hero { max-width: 46rem; padding: 1.4rem 0 2rem; }
.landing-hero h2 { margin: .7rem 0 .65rem; font-size: clamp(1.7rem, 3vw, 2.7rem); line-height: 1.25; letter-spacing: -.035em; }
.landing-hero p { max-width: 39rem; color: var(--gray); font-size: 1rem; line-height: 1.75; }
.landing-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.4rem; }
.landing-action { display: inline-flex; align-items: center; justify-content: center; min-height: 2.6rem; padding: 0 1rem; border: 1px solid var(--lightgray); border-radius: 8px; background: var(--surface); color: var(--dark); font-size: .86rem; }
.landing-action.primary { border-color: var(--secondary); background: var(--secondary); color: var(--light); }
.landing-action:hover { transform: translateY(-1px); }
.content-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: .75rem 0 1rem; padding-bottom: .6rem; border-bottom: 1px solid var(--lightgray); }
.content-heading h2 { margin: 0; font-size: 1.25rem; }
.content-heading span { color: var(--gray); font-size: .78rem; }
.product-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.product-card { position: relative; min-height: 11rem; padding: 1.3rem; border: 1px solid var(--lightgray); border-radius: 12px; background: var(--surface); }
.product-card::before { position: absolute; inset: 0 0 auto; height: 3px; border-radius: 12px 12px 0 0; background: var(--secondary); content: ''; opacity: 0; }
.product-card:hover { transform: translateY(-2px); border-color: var(--secondary); box-shadow: 0 10px 24px color-mix(in srgb, var(--secondary) 10%, transparent); }
.product-card:hover::before { opacity: 1; }
.product-icon { width: 2.5rem; height: 2.5rem; border-radius: 9px; background: var(--highlight); }
.product-title { font-size: 1.05rem; }
.product-desc { font-size: .84rem; line-height: 1.55; }
.subject-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin: 1rem 0 2.5rem; }
.subject-card { display: flex; flex-direction: column; min-height: 10.5rem; padding: 1.25rem; border: 1px solid var(--lightgray); border-radius: 11px; background: var(--surface); color: var(--dark); transition: transform .2s, border-color .2s, box-shadow .2s; }
.subject-card:hover { transform: translateY(-2px); border-color: var(--secondary); box-shadow: 0 10px 24px color-mix(in srgb, var(--secondary) 10%, transparent); }
.subject-card-code { align-self: flex-start; padding: .18rem .5rem; border-radius: 5px; background: var(--highlight); color: var(--secondary); font-family: var(--codeFont); font-size: .75rem; font-weight: 700; }
.subject-card-title { margin: 1rem 0 auto; font-family: var(--titleFont); font-size: 1.05rem; line-height: 1.4; }
.subject-card-footer { display: flex; justify-content: space-between; gap: .5rem; margin-top: 1.2rem; padding-top: .7rem; border-top: 1px solid var(--lightgray); color: var(--gray); font-size: .78rem; }
.subject-card-footer span { color: var(--secondary); }

.folder-list { gap: .55rem; }
.folder-item { gap: .85rem; min-height: 3.25rem; padding: .75rem 1rem; border: 1px solid var(--lightgray); border-radius: 9px; background: var(--surface); }
.folder-item:hover { border-color: var(--secondary); background: var(--surface); box-shadow: 0 4px 15px color-mix(in srgb, var(--secondary) 8%, transparent); }
.folder-item.last-read-card { border-color: var(--secondary); }
.fi-icon { width: 1.6rem; height: 1.6rem; border-radius: 6px; background: var(--highlight); }
.fi-name { overflow-wrap: anywhere; font-size: .89rem; line-height: 1.45; }
.fi-meta { flex: none; font-size: .74rem; }
.fi-badge { flex: none; border-radius: 999px; font-size: .68rem; }
.card-copy-btn { right: .7rem; border-radius: 6px; background: var(--surface); }
.folder-item-wrapper:hover .folder-item { padding-right: 3rem; }

.post-header { margin-bottom: 1.5rem; }
.post-back { margin-bottom: .8rem; }
.post-meta { gap: .6rem; font-size: .78rem; }
.copy-btn { margin-left: auto; }
.post-content { max-width: 880px; font-size: .98rem; line-height: 1.8; }
.post-content p, .post-content li { line-height: 1.8; }
.post-content > h2 { margin-top: 2.6rem; padding-bottom: .5rem; border-bottom: 1px solid var(--lightgray); font-size: 1.48rem; line-height: 1.35; }
.post-content > h3 { margin-top: 1.9rem; font-size: 1.16rem; }
.post-content blockquote { margin: 1.3rem 0; padding: .55rem 1.1rem; border: 1px solid var(--lightgray); border-left: 3px solid var(--secondary); border-radius: 0 8px 8px 0; background: var(--surface); }
.post-content pre { margin: 1.35rem 0; padding: .65rem 1rem; border-radius: 9px; background: var(--surface); }
.post-content pre code, .post-content pre code.hljs { font-size: .81rem; line-height: 1.55; }
.post-content :not(pre) > code { color: var(--secondary); }
.post-content table { margin: 1.4rem 0; border: 1px solid var(--lightgray); border-radius: 8px; background: var(--surface); }
.post-content th { padding: .65rem .8rem; border-color: var(--lightgray); background: var(--highlight); }
.post-content td { padding: .6rem .8rem; vertical-align: top; }
.post-content tr:nth-child(even) td { background: color-mix(in srgb, var(--lightgray) 22%, transparent); }
.post-content img { max-width: 100%; }
.mobile-toc { display: none; }

@media (max-width: 1199px) {
    .page > #quartz-body { grid-template-columns: 252px minmax(0, 1fr); grid-template-areas: "grid-sidebar-left grid-center" "grid-sidebar-left grid-footer"; }
    .sidebar.right { display: none; }
    .mobile-toc { display: block; margin: 1.25rem 0; border: 1px solid var(--lightgray); border-radius: 8px; background: var(--surface); }
    .mobile-toc summary { padding: .7rem 1rem; color: var(--dark); font-size: .88rem; font-weight: 700; cursor: pointer; }
    .mobile-toc ul { margin: 0; padding: .1rem 1.4rem .75rem 2rem; }
    .mobile-toc li { margin: .3rem 0; font-size: .82rem; }
}

@media (max-width: 860px) {
    .site-header-inner { gap: .75rem; padding: 0 1rem; }
    .mobile-menu-button { display: flex; flex-direction: column; gap: 4px; width: 36px; padding: 0; }
    .mobile-menu-button span { width: 16px; height: 2px; border-radius: 2px; background: currentColor; }
    .header-nav, .header-search-button span, .header-search-button kbd { display: none; }
    .header-brand { font-size: 1rem; }
    .header-search-button { width: 36px; padding: 0; }
    .page > #quartz-body { display: block; min-height: calc(100vh - 64px); padding: 0; }
    .sidebar.left {
        position: fixed;
        z-index: 80;
        top: 64px;
        left: 0;
        display: flex;
        width: min(320px, 88vw);
        height: calc(100vh - 64px);
        padding: 1rem;
        background: var(--light);
        box-shadow: 14px 0 32px rgba(0, 0, 0, .1);
        transform: translateX(-110%);
        transition: transform .2s ease;
    }
    .menu-open .sidebar.left { transform: translateX(0); }
    .sidebar-close { position: absolute; top: .1rem; right: .1rem; display: inline-flex; width: 30px; height: 30px; font-size: 1.3rem; }
    .sidebar-scrim { position: fixed; z-index: 70; inset: 64px 0 0; background: rgba(2, 6, 23, .5); }
    .menu-open .sidebar-scrim { display: block; }
    .menu-open { overflow: hidden; }
    .center { padding: 1.5rem 1rem 1rem; }
    .page > #quartz-body > footer { padding: 0 1rem 2rem; }
    .page-header h1 { font-size: 1.7rem; }
    .landing-hero { padding-top: .5rem; }
    .folder-item { flex-wrap: wrap; }
    .fi-meta { margin-left: 2.45rem; }
    .card-copy-btn { opacity: 1; }
    .post-content { font-size: .94rem; }
}

@media (prefers-reduced-motion: reduce) {
    .sidebar.left, .product-card, .landing-action { transition: none; }
}