:root {
    --canvas-bg: #0f0f10;
    --canvas-grad-a: rgba(255, 255, 255, 0.04);
    --canvas-grad-b: rgba(255, 255, 255, 0.025);

    --surface: #171718;
    --surface-soft: #1c1c1d;
    --item-bg: #19191a;
    --item-bg-hover: #202022;
    --item-bg-active: #272729;
    --text: #e7edf4;
    --text-muted: #96a2b0;
    --text-read: #6f7d8e;

    --line: #2e2e31;
    --line-strong: #3a3a3f;

    --focus: #8bb3ff;
    --shadow-soft: 0 12px 34px rgba(0, 0, 0, 0.35);
    --shadow-card: 0 10px 26px rgba(0, 0, 0, 0.35);

    --chip-default: #556373;
    --chip-dc: #374a9a;
    --chip-dogdrip: #1f4f7a;
    --chip-fmkorea: #3e7cd3;
    --chip-humoruniv: #df2954;
    --chip-palcook: #369957;

    --fab-bg: rgba(235, 241, 248, 0.2);
    --fab-bg-hover: rgba(235, 241, 248, 0.32);

    --status-loading-bg: #1d1d20;
    --status-error-bg: #2d171b;
    --status-end-bg: #151b22;
    --energy-track: #2f2f33;
    --energy-fill: #83878f;
    --energy-width: 192px;
    --energy-left-offset: 0px;
    --skeleton-base: #232326;
    --skeleton-shine: #313136;

    --radius-lg: 18px;
    --radius-md: 12px;
    --radius-sm: 8px;
    --post-item-height: 76px;
    --motion-fast: 140ms;
    --motion-insert: 180ms;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Pretendard Variable', 'SUIT Variable', 'Apple SD Gothic Neo', 'Noto Sans KR', system-ui, -apple-system, sans-serif;
    color: var(--text);
    line-height: 1.48;
    min-height: 100vh;
    background:
        radial-gradient(1100px 520px at 10% -15%, var(--canvas-grad-a), transparent 60%),
        radial-gradient(900px 460px at 92% -25%, var(--canvas-grad-b), transparent 60%),
        var(--canvas-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 8px 18px;
}

.skip-link {
    position: fixed;
    left: -9999px;
    top: 10px;
    z-index: 90;
    background: #111827;
    color: #fff;
    text-decoration: none;
    border-radius: var(--radius-sm);
    padding: 8px 12px;
}

.skip-link:focus-visible {
    left: 10px;
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.feed-root {
    width: min(860px, 100%);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    overflow: clip;
    position: relative;
}

#post-list {
    list-style: none;
    padding: 0;
    margin: 0;
    overflow-anchor: none;
}

.post-item {
    border-bottom: 1px solid var(--line);
    content-visibility: auto;
    contain-intrinsic-size: var(--post-item-height);
    overflow-anchor: none;
}

.post-item:last-child {
    border-bottom: 0;
}

.post-item.is-unread-filtered {
    display: none !important;
}

.skeleton-item {
    border-bottom: 1px solid var(--line);
    contain: paint;
}

.skeleton-item:last-child {
    border-bottom: 0;
}

.skeleton-link {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 11px 15px 6px;
    min-height: var(--post-item-height);
    pointer-events: none;
    user-select: none;
}

.skeleton-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 9px;
    align-items: start;
    margin-bottom: 4px;
    min-height: 0;
}

.skeleton-chip {
    display: inline-block;
    width: 46px;
    height: 18px;
    border-radius: 5px;
}

.skeleton-title {
    display: inline-block;
    height: 1.34em;
    border-radius: 6px;
}

.skeleton-energy-row {
    display: block;
    width: min(var(--energy-width), calc(100% - var(--energy-left-offset)));
    height: 2px;
    border-radius: 0;
    margin: 0;
    flex: 0 0 auto;
}

.skeleton-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8.4px;
}

.skeleton-meta {
    display: inline-block;
    height: 0.88em;
    border-radius: 999px;
}

.skeleton-meta-right {
    width: 52px;
}

.skeleton-chip,
.skeleton-title,
.skeleton-energy-row,
.skeleton-meta {
    background: linear-gradient(90deg, var(--skeleton-base) 0%, var(--skeleton-shine) 48%, var(--skeleton-base) 100%);
    background-size: 220% 100%;
    animation: skeleton-shimmer 1.2s linear infinite;
}

.post-link {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 11px 15px 6px;
    min-height: var(--post-item-height);
    text-decoration: none;
    color: inherit;
    background: var(--item-bg);
    transition: background-color var(--motion-fast) ease;
}

.post-link:hover {
    background: var(--item-bg-hover);
}

.post-link:active {
    transform: translateY(0.5px);
}

.post-item.is-key-active .post-link {
    background: var(--item-bg-active);
}

.post-item.is-fresh .post-link {
    will-change: transform, opacity;
    animation: post-insert-reveal var(--motion-insert) cubic-bezier(0.22, 0.9, 0.3, 1) both;
}

.post-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 9px;
    align-items: start;
    margin-bottom: 4px;
    min-height: 0;
    min-width: 0;
}

.site-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    padding: 2px 6px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.01em;
    background: var(--chip-default);
    white-space: nowrap;
    flex-shrink: 0;
    margin-top: 1px;
    align-self: start;
}

.site-dc .site-tag {
    background: var(--chip-dc);
}

.site-dogdrip .site-tag {
    background: var(--chip-dogdrip);
}

.site-fmkorea .site-tag {
    background: var(--chip-fmkorea);
}

.site-humoruniv .site-tag {
    background: var(--chip-humoruniv);
}

.site-palcook .site-tag {
    background: var(--chip-palcook);
}

.site-etc .site-tag {
    background: var(--chip-default);
}

.post-title {
    font-size: 0.99rem;
    font-weight: 625;
    line-height: 1.34;
    width: 100%;
    min-width: 0;
    height: 1.34em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 18px), transparent 100%);
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 18px), transparent 100%);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.post-item.is-read .post-title {
    color: var(--text-read);
    font-weight: 500;
}

.post-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--text-muted);
    font-size: 0.78rem;
    gap: 12px;
    margin-top: 5.04px;
}

.post-energy {
    display: block;
    width: min(var(--energy-width), calc(100% - var(--energy-left-offset)));
    height: 2px;
    border-radius: 0;
    overflow: hidden;
    background: var(--energy-track);
    opacity: 0.72;
    margin: 0;
    flex: 0 0 auto;
}

.post-energy-fill {
    display: block;
    height: 100%;
    min-width: 1px;
    border-radius: 0;
    background: var(--energy-fill);
    transition: width var(--motion-fast) ease;
}

.post-date {
    white-space: nowrap;
}

#top-sentinel,
#bottom-sentinel {
    width: 100%;
    height: 1px;
}

#top-spacer {
    width: 100%;
    height: 0;
}

.indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 12px 16px;
    font-size: 0.9rem;
    color: var(--text-muted);
    border-top: 1px solid var(--line);
}

#feed-status[data-mode='loading'] {
    background: var(--status-loading-bg);
}

#feed-status[data-mode='error'] {
    background: var(--status-error-bg);
    color: #b42318;
}

#feed-status[data-mode='end'] {
    background: var(--status-end-bg);
}

#feed-status[data-mode='error'] .spinner,
#feed-status[data-mode='end'] .spinner {
    display: none;
}

.spinner {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 3px solid rgba(0, 0, 0, 0.12);
    border-top-color: rgba(0, 0, 0, 0.58);
    animation: spin 0.85s linear infinite;
}

.retry-button {
    border: 1px solid var(--line-strong);
    background: #fff;
    color: var(--text);
    border-radius: 8px;
    font-size: 0.84rem;
    padding: 6px 11px;
    cursor: pointer;
}

.retry-button:hover {
    background: #f8fafc;
}

.back-to-top {
    position: fixed;
    right: 20px;
    bottom: 18px;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: var(--fab-bg);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 30;
    box-shadow: var(--shadow-card);
}

.back-to-top:hover {
    background: var(--fab-bg-hover);
}

.noscript {
    margin: 0;
    padding: 14px;
    text-align: center;
    color: var(--text-muted);
    border-top: 1px solid var(--line);
}

.post-link:focus-visible,
.retry-button:focus-visible,
.back-to-top:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

.is-hidden {
    display: none !important;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes skeleton-shimmer {
    0% {
        background-position: 220% 0;
    }
    100% {
        background-position: -220% 0;
    }
}

@keyframes post-insert-reveal {
    from {
        opacity: 0.84;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .spinner {
        animation: none;
    }

    .skeleton-chip,
    .skeleton-title,
    .skeleton-energy-row,
    .skeleton-meta {
        animation: none;
    }

    .post-item.is-fresh .post-link {
        animation: none;
    }

    .post-link {
        transition: none;
    }
}

@media (max-width: 920px) {
    body {
        padding: 8px 0 16px;
    }

    .feed-root {
        width: 100%;
        border-left: 0;
        border-right: 0;
        border-radius: 0;
    }

    .post-link,
    .skeleton-link {
        padding: 10px 12px 6px;
    }

    .back-to-top {
        right: 14px;
        bottom: 14px;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --canvas-bg: #0c0c0d;
        --canvas-grad-a: rgba(255, 255, 255, 0.035);
        --canvas-grad-b: rgba(255, 255, 255, 0.02);

        --surface: #151516;
        --surface-soft: #1a1a1c;
        --item-bg: #171718;
        --item-bg-hover: #1d1d1f;
        --item-bg-active: #232326;

        --text: #e7edf4;
        --text-muted: #96a2b0;
        --text-read: #6f7d8e;

        --line: #2b2b2f;
        --line-strong: #39393e;

        --focus: #8bb3ff;
        --shadow-soft: 0 12px 34px rgba(0, 0, 0, 0.36);
        --shadow-card: 0 10px 26px rgba(0, 0, 0, 0.36);

        --status-loading-bg: #1b1b1f;
        --status-error-bg: #2d171b;
        --status-end-bg: #141a22;
        --energy-track: #26262a;
        --energy-fill: #7f858f;
        --skeleton-base: #212125;
        --skeleton-shine: #2d2d32;

        --fab-bg: rgba(235, 241, 248, 0.2);
        --fab-bg-hover: rgba(235, 241, 248, 0.32);
    }

    .skip-link {
        background: #1d1d21;
        color: #e7edf4;
    }

    .retry-button {
        background: #16161a;
        border-color: var(--line);
        color: var(--text);
    }

    .retry-button:hover {
        background: #1d1d22;
    }

    .spinner {
        border-color: rgba(255, 255, 255, 0.17);
        border-top-color: rgba(255, 255, 255, 0.82);
    }
}