/* Theme Color Variables */
:root {
    /* Primary colors - Wine red theme */
    --color-primary: #c0392b;
    --color-primary-dark: #722f37;
    --color-primary-medium: #a33327;
    --color-primary-light: #d64b3d;
    --color-primary-lighter: #e57368;

    /* Accent colors */
    --color-accent: #e74c3c;
    --color-accent-light: #f1948a;

    /* Status colors */
    --color-success: #27ae60;
    --color-success-light: #2ecc71;
    --color-success-dark: #219a52;
    --color-success-bg: rgba(46, 204, 113, 0.1);
    --color-success-bg-light: #e8f5e9;
    --color-error: #c0392b;
    --color-error-bg: #fdeaea;
    --color-error-bg-light: #ffebee;
    --color-error-border: #f5c6cb;
    --color-warning: #f39c12;
    --color-warning-light: #f1c40f;
    --color-warning-dark: #e67e22;
    --color-warning-darker: #d35400;
    --color-warning-bg: #fff3e0;
    --color-warning-bg-hover: #ffe0b2;
    --color-info: #3498db;
    --color-info-light: #5dade2;
    --color-info-dark: #2980b9;
    --color-info-bg: #e3f2fd;
    --color-purple: #9b59b6;
    --color-purple-light: #a29bfe;
    --color-purple-dark: #8e44ad;
    --color-purple-darker: #5b4cdb;
    --color-purple-bg: #f3e5f5;
    --color-purple-bg-light: #f0eeff;
    --color-teal: #00b894;
    --color-teal-dark: #00a382;
    --color-teal-bg: #e6f7f2;
    --color-cyan: #17a2b8;
    --color-cyan-dark: #138496;

    /* Tag colors - 8-color cycling pattern */
    --color-tag-1: #d63031;
    --color-tag-2: #0984e3;
    --color-tag-3: #00a86b;
    --color-tag-4: #8e44ad;
    --color-tag-5: #d35400;
    --color-tag-6: #00838f;
    --color-tag-7: #c78c06;
    --color-tag-8: #6c5ce7;

    /* Service/Brand colors */
    --color-github: #24292e;
    --color-github-dark: #1b1f23;
    --color-google: #4285f4;
    --color-google-red: #ea4335;
    --color-cloudflare: #f58220;
    --color-openai: #10a37f;
    --color-openai-dark: #0d8a6a;

    /* Base colors */
    --color-white: #fff;
    --color-black: #000;

    /* Gray scale */
    --color-gray-50: #f8f9fa;
    --color-gray-100: #f5f5f5;
    --color-gray-200: #e9ecef;
    --color-gray-300: #e0e0e0;
    --color-gray-400: #ddd;
    --color-gray-500: #bbb; /* 글자색으로 절대 사용 금지 */
    --color-gray-600: #757575;
    --color-gray-700: #666;
    --color-gray-800: #555;
    --color-gray-900: #333;

    /* Text colors */
    --color-text: var(--color-gray-900);
    --color-text-light: var(--color-gray-800);
    --color-text-muted: var(--color-gray-600);
    --color-text-placeholder: var(--color-gray-600);

    /* Background colors */
    --color-bg: var(--color-white);
    --color-bg-secondary: var(--color-gray-100);
    --color-bg-tertiary: var(--color-gray-50);
    --color-bg-hover: var(--color-primary-alpha-08);
    --color-bg-active: var(--color-primary-alpha-12);
    --color-bg-overlay: rgba(0, 0, 0, 0.6);
    --color-bg-overlay-dark: rgba(0, 0, 0, 0.9);

    /* Border colors */
    --color-border: #d0d0d0;
    --color-border-light: var(--color-gray-300);
    --color-border-lighter: var(--color-gray-200);

    /* Footer colors (always dark) */
    --color-footer-bg: #1a1a2e;

    /* Editor colors (always dark) */
    --color-editor-bg: #1e1e1e;

    /* Shadow colors */
    --shadow-light: rgba(0, 0, 0, 0.05);
    --shadow-medium: rgba(0, 0, 0, 0.15);
    --shadow-dark: rgba(0, 0, 0, 0.3);

    /* Primary color with opacity */
    --color-primary-alpha-03: rgba(192, 57, 43, 0.03);
    --color-primary-alpha-05: rgba(192, 57, 43, 0.05);
    --color-primary-alpha-08: rgba(192, 57, 43, 0.08);
    --color-primary-alpha-10: rgba(192, 57, 43, 0.1);
    --color-primary-alpha-12: rgba(192, 57, 43, 0.12);
    --color-primary-alpha-15: rgba(192, 57, 43, 0.15);
    --color-primary-alpha-20: rgba(192, 57, 43, 0.2);
    --color-primary-alpha-30: rgba(192, 57, 43, 0.3);
    --color-primary-alpha-40: rgba(192, 57, 43, 0.4);
    --color-primary-alpha-50: rgba(192, 57, 43, 0.5);

    /* Purple color with opacity */
    --color-purple-alpha-08: rgba(155, 89, 182, 0.08);
    --color-purple-alpha-10: rgba(155, 89, 182, 0.1);
    --color-purple-alpha-12: rgba(155, 89, 182, 0.12);
    --color-purple-alpha-15: rgba(155, 89, 182, 0.15);
    --color-purple-alpha-20: rgba(155, 89, 182, 0.2);
    --color-purple-alpha-25: rgba(155, 89, 182, 0.25);

    /* Info (blue) color with opacity */
    --color-info-alpha-08: rgba(52, 152, 219, 0.08);
    --color-info-alpha-10: rgba(52, 152, 219, 0.1);
    --color-info-alpha-12: rgba(52, 152, 219, 0.12);
    --color-info-alpha-15: rgba(52, 152, 219, 0.15);
    --color-info-alpha-20: rgba(52, 152, 219, 0.2);
    --color-info-alpha-25: rgba(52, 152, 219, 0.25);

    /* Success (green) color with opacity */
    --color-success-alpha-10: rgba(39, 174, 96, 0.1);
    --color-success-alpha-20: rgba(39, 174, 96, 0.2);
    --color-success-light-alpha-20: rgba(46, 204, 113, 0.2);

    /* Border radius */
    /* the scale lives in tokens.css; these names stay so existing rules keep working */
    --radius-xs: var(--r-xs);
    --radius-sm: var(--r-1);
    --radius-md: var(--r-2);
    --radius-lg: var(--r-3);
    --radius-xl: var(--r-4);
    --radius-2xl: var(--r-5);
    --radius-full: 50%;

    /* Z-index layers */
    --z-dropdown: 100;
    --z-sticky: 500;
    --z-modal: 1000;
    --z-modal-overlay: 999;
    --z-toast: 1100;
    --z-max: 9999;

    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 0.75rem;
    --spacing-lg: 1rem;
    --spacing-xl: 1.5rem;
    --spacing-2xl: 2rem;

    /* Box shadows */
    --shadow-sm: 0 2px 4px var(--shadow-light);
    --shadow-md: 0 4px 12px var(--shadow-medium);
    --shadow-lg: 0 8px 24px var(--shadow-medium);
    --shadow-primary-sm: 0 4px 12px var(--color-primary-alpha-10);
    --shadow-primary-md: 0 8px 24px var(--color-primary-alpha-12);
    --shadow-card-hover: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-card-hover-dark: 0 4px 12px rgba(0, 0, 0, 0.5);

    /* Transitions */
    --transition-fast: all 0.2s ease;
    --transition-normal: all 0.3s ease;

    /* White with opacity (for overlays on dark backgrounds) */
    --color-white-10: rgba(255, 255, 255, 0.1);
    --color-white-15: rgba(255, 255, 255, 0.15);
    --color-white-20: rgba(255, 255, 255, 0.2);
    --color-white-30: rgba(255, 255, 255, 0.3);
    --color-white-50: rgba(255, 255, 255, 0.5);
    --color-white-70: rgba(255, 255, 255, 0.7);
    --color-white-80: rgba(255, 255, 255, 0.8);
    --color-white-90: rgba(255, 255, 255, 0.9);

    /* Code colors */
    --color-code-bg: #2d2d2d;
    --color-code-text: #aaa;
    --color-code-text-light: #f8f8f2;

    /* Social colors */
    --color-linkedin: #0077b5;
    --color-ocean: #0077b6;

    /* Banner gradient */
    --gradient-night-sky: linear-gradient(180deg, #0c1445 0%, #1a237e 40%, #283593 70%, #3949ab 100%);
    --gradient-primary: linear-gradient(135deg, var(--color-primary), var(--color-accent));
    --gradient-primary-dark: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    --gradient-badge-admin: linear-gradient(135deg, #c0392b, #e74c3c);
    --gradient-badge-staff: linear-gradient(135deg, #2980b9, #3498db);
    --gradient-underline: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));

    /* Common gradients */
    --gradient-ocean: linear-gradient(180deg, #023e8a 0%, #0077b6 60%, #0096c7 100%);
    --gradient-ocean-135: linear-gradient(135deg, #023e8a 0%, #0077b6 50%, #0096c7 100%);
    --gradient-light-bg: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    --gradient-dark-bg: linear-gradient(135deg, #252525 0%, #1a1a1a 100%);
    --gradient-purple: linear-gradient(135deg, #6c5ce7, #a29bfe);
    --gradient-sticky: linear-gradient(120deg, #fff9c4 0%, #fff59d 100%);
    --gradient-cyan: linear-gradient(135deg, #0077b6 0%, #00b4d8 100%);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    max-width: 100%;
}

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

html {
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    scroll-behavior: smooth;
}

body {
    min-height: 100%;
}

/* Main Scrollbar Styling - browser default width */

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: var(--font-sans);
    line-height: 1.6;
    color: var(--color-text);
}

main {
    flex: 1;
    max-width: 1300px;
    width: 100%;
    margin: 0 auto;
    padding: 2rem 2rem 3rem;
}

main:has(.shell) {
    max-width: none;
    padding: 0;
    margin: 0;
}

/* Login Modal */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-bg-overlay);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: var(--z-max);
}

.modal-overlay.active {
    display: flex;
}

.modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--color-text-muted);
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: var(--transition-fast);
}

.modal-close:hover {
    background: var(--color-bg-secondary);
    color: var(--color-text);
}

/* Link-styled button */
.link-btn {
    background: none;
    border: none;
    padding: 0;
    color: var(--s-blue);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.link-btn:hover {
    color: #1B64DA;
}

/* Back to Top Button */
.back-to-top {
    position: fixed; right: 24px; bottom: 24px; z-index: var(--z-modal);
    width: 40px; height: 40px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: #fff; color: var(--s-sub);
    border: 1px solid var(--s-line); box-shadow: 0 2px 8px rgba(9, 30, 66, .06);
    cursor: pointer;
    opacity: 0; visibility: hidden; transform: translateY(12px) scale(.96);
    transition: opacity .18s ease, transform .22s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .22s,
        background .1s ease-out, color .1s ease-out, border-color .1s ease-out;
}
.back-to-top svg { width: 18px; height: 18px; }
.back-to-top:hover { background: var(--s-blue-bg); color: var(--s-blue); border-color: #CFE1FD; }
.back-to-top:active { transform: scale(.94); }
.back-to-top.visible { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

.back-to-top svg {
    width: 24px;
    height: 24px;
}

/* Image Lightbox */
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-bg-overlay-dark);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: var(--z-toast);
    cursor: zoom-out;
}

.lightbox.active {
    display: flex;
}

.lightbox img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    border-radius: 4px;
}

.lightbox-close {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    background: none;
    border: none;
    color: var(--color-white);
    font-size: 2.5rem;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity var(--d-base);
}

.lightbox-close:hover {
    opacity: 1;
}

/* Code Copy Button */
.code-copy-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    padding: 0.4rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    cursor: pointer;
    opacity: 0;
    transition: var(--transition-fast);
    color: var(--color-code-text);
}

pre:hover .code-copy-btn {
    opacity: 1;
}

.code-copy-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: var(--color-white);
}

.search-results {
    max-height: 400px;
    overflow-y: auto;
}

/* Card tags used to cycle through eight colours by position, so the same tag was a
   different colour on every card. They are one neutral chip now (card.css). */

/* Note tag style - special tag for notes */
.card-tag.note-tag,
.home-tag.note-tag,
.meta-tag.note-tag {
    background: var(--color-primary) !important;
    color: var(--color-white) !important;
    border-color: var(--color-primary) !important;
}

/* ===== Common Animations ===== */
@keyframes twinkle {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

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

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from { transform: translateY(10px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* ===== Responsive: 900px (Tablet) ===== */
@media (max-width: 900px) {
    main {
        padding: 1.5rem;
    }
}

/* ===== Responsive: 768px (Small Tablet) ===== */
@media (max-width: 768px) {
    main {
        padding: 1.25rem;
    }

    .modal-content {
        margin: 1rem;
        padding: 1.5rem;
        max-width: calc(100% - 2rem);
    }

    .search-modal {
        padding-top: 10vh;
    }

    .search-container {
        margin: 0 1rem;
        max-width: calc(100% - 2rem);
    }

    .back-to-top {
        bottom: 1.5rem;
        right: 1.5rem;
        width: 44px;
        height: 44px;
    }
}

/* ===== Responsive: 600px (Large Phone) ===== */
@media (max-width: 600px) {
    main {
        padding: 1rem;
    }

    .modal-content {
        padding: 1.25rem;
        border-radius: 10px;
    }

    .modal-tabs {
        margin-bottom: 1rem;
    }

    .modal-tab {
        padding: 0.6rem 0.75rem;
        font-size: 0.9rem;
    }

    .search-modal {
        padding-top: 5vh;
    }

    .search-container {
        margin: 0 0.75rem;
        border-radius: 10px;
    }

    .search-input-wrapper {
        padding: 0.75rem 1rem;
    }

    .search-input-wrapper input {
        font-size: 1rem;
    }

    .search-result-item {
        padding: 0.75rem 1rem;
    }

    .search-result-title {
        font-size: 0.95rem;
    }

    .search-result-summary {
        font-size: 0.8rem;
    }

    .back-to-top {
        bottom: 1rem;
        right: 1rem;
        width: 40px;
        height: 40px;
    }

    .back-to-top svg {
        width: 20px;
        height: 20px;
    }

    .lightbox img {
        max-width: 95%;
        max-height: 85%;
    }

    .lightbox-close {
        top: 0.5rem;
        right: 1rem;
        font-size: 2rem;
    }
}

/* ===== Responsive: 480px (Small Phone) ===== */
@media (max-width: 480px) {
    main {
        padding: 0.75rem;
    }

    .modal-content {
        padding: 1rem;
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }

    .modal-tab {
        padding: 0.5rem;
        font-size: 0.85rem;
    }

    .search-container {
        margin: 0 0.5rem;
    }

    .search-input-wrapper {
        padding: 0.6rem 0.75rem;
        gap: 0.5rem;
    }

    .search-input-wrapper kbd {
        display: none;
    }

    .back-to-top {
        width: 36px;
        height: 36px;
    }

    .back-to-top svg {
        width: 18px;
        height: 18px;
    }
}

/* ---------------------------------------------------------------------------
   Keyboard focus.
   Only two sheets styled :focus-visible at all, and several rules cleared the
   browser outline without putting anything back, so tabbing through the site
   was largely invisible. One ring, everywhere. :focus-visible means it never
   shows on a mouse click.
--------------------------------------------------------------------------- */
:focus-visible {
    outline: 2px solid var(--s-blue);
    outline-offset: 2px;
}
/* on the night-sky cover and any dark surface, blue on navy is not enough */
.page-cover :focus-visible,
.list-cover :focus-visible {
    outline-color: #fff;
}

/* the reveal (base.js reveal()): an element waits unseen, then rises; siblings stagger */
@keyframes rv-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.rv { opacity: 0; }
.rv.in { opacity: 1; animation: rv-rise .55s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 55ms); }

/* ---- 404: the number stands in the sky ---- */
.page-cover.nf-sky { margin: 0; border-radius: 0; min-height: 0; padding: clamp(40px, 8vw, 96px) 32px clamp(36px, 6vw, 72px); align-items: center; }
.nf-sky .sky-object.is-moon { top: 28px; right: 10%; }
.nf-code {
    position: relative; z-index: 1; margin: 0;
    font-size: clamp(88px, 16vw, 168px); font-weight: 800; line-height: 1; letter-spacing: -.05em; color: #fff;
    font-variant-numeric: tabular-nums; text-shadow: 0 6px 40px rgba(0, 0, 0, .35);
    animation: nf-in .7s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes nf-in { from { opacity: 0; transform: translateY(10px); } }
.nf { max-width: 520px; margin: 0 auto; padding: 36px 16px 80px; text-align: center; }
.nf h1 { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: #191F28; }
.nf-path { margin: 12px 0 0; font-size: 14px; line-height: 1.7; color: #6B7684; }
.nf-path code { display: inline-block; margin-top: 4px; padding: 2px 8px; border-radius: 6px; background: #F2F4F6; font-size: 12.5px; color: #4E5968; word-break: break-all; }
.nf-actions { display: flex; justify-content: center; gap: 8px; margin-top: 26px; }
.nf-actions a {
    display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 16px; border-radius: 10px;
    border: 1px solid #E9ECEF; background: #fff; font-size: 13.5px; font-weight: 700; color: #333D4B; text-decoration: none;
    transition: background .1s ease-out, border-color .1s ease-out;
}
.nf-actions a:hover { background: #F2F4F6; }
.nf-actions a.nf-primary { background: #3182F6; border-color: #3182F6; color: #fff; }
.nf-actions a.nf-primary:hover { background: #1B64DA; border-color: #1B64DA; }
.nf-actions svg { width: 15px; height: 15px; }
@media (prefers-reduced-motion: reduce) { .nf-code { animation: none; } }

/* base.js skyRest(): an off-screen sky does not animate */
.is-off, .is-off * { animation-play-state: paused !important; }