/* 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 */
    --radius-xs: 3px;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-2xl: 20px;
    --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: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    color: var(--color-text);
}

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

/* 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-content {
    background: var(--color-bg);
    border-radius: 12px;
    padding: 2rem;
    width: 100%;
    max-width: 400px;
    position: relative;
    box-shadow: 0 20px 60px var(--shadow-dark);
}

.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);
}

.modal-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid var(--color-border-light);
}

.modal-tab {
    flex: 1;
    padding: 0.75rem 1rem;
    background: none;
    border: none;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: var(--transition-fast);
    position: relative;
}

.modal-tab::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--color-primary);
    transform: scaleX(0);
    transition: transform 0.2s;
}

.modal-tab:hover {
    color: var(--color-text-light);
}

.modal-tab.active {
    color: var(--color-primary);
}

.modal-tab.active::after {
    transform: scaleX(1);
}

.sso-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.sso-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    transition: var(--transition-fast);
    cursor: pointer;
}

.sso-btn.google {
    background: var(--color-bg);
    border: 1px solid var(--color-gray-400);
    color: var(--color-text);
}

.sso-btn.google:hover {
    background: var(--color-bg-tertiary);
    border-color: var(--color-gray-500);
}

.sso-btn.github {
    background: var(--color-github);
    border: 1px solid var(--color-github);
    color: var(--color-white);
}

.sso-btn.github:hover {
    background: var(--color-github-dark);
}

.modal-divider {
    display: flex;
    align-items: center;
    margin: 1.5rem 0;
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

.modal-divider::before,
.modal-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--color-border-light);
}

.modal-divider span {
    padding: 0 1rem;
}

.sso-text-signup {
    display: none;
}

.signup-mode .sso-text-login {
    display: none;
}

.signup-mode .sso-text-signup {
    display: inline;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.auth-form input {
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-gray-400);
    border-radius: 8px;
    font-size: 0.95rem;
    transition: border-color 0.2s;
}

.auth-form input:focus {
    outline: none;
    border-color: var(--color-primary);
}

.auth-form .btn-submit {
    padding: 0.75rem 1rem;
    background: var(--color-primary);
    color: var(--color-white);
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.auth-form .btn-submit:hover {
    background: var(--color-primary-dark);
}

.modal-footer {
    margin-top: 1.5rem;
    text-align: center;
    font-size: 0.9rem;
    color: var(--color-gray-700);
}

.modal-footer a {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: none;
}

.modal-footer a:hover {
    text-decoration: underline;
}

/* Link-styled button */
.link-btn {
    background: none;
    border: none;
    padding: 0;
    color: var(--color-primary);
    font: inherit;
    cursor: pointer;
    text-decoration: underline;
}
.link-btn:hover {
    color: var(--color-primary-dark);
}

/* Back to Top Button */
.back-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-white);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s;
    box-shadow: 0 4px 12px var(--shadow-medium);
    z-index: var(--z-modal);
}

.back-to-top:hover {
    background: var(--color-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px var(--shadow-dark);
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.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 0.2s;
}

.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);
}

/* Dark Mode */
body.dark-mode {
    /* Gray scale - dark */
    --color-gray-50: #2a2a2a;
    --color-gray-100: #252525;
    --color-gray-200: #333;
    --color-gray-300: #404040;
    --color-gray-400: #444;
    --color-gray-500: #555; /* 글자색으로 절대 사용 금지 */
    --color-gray-600: #888;
    --color-gray-700: #aaa;
    --color-gray-800: #b0b0b0;
    --color-gray-900: #e0e0e0;

    /* Text colors - dark */
    --color-text: #e0e0e0;
    --color-text-light: #b0b0b0;
    --color-text-muted: #888;
    --color-text-placeholder: #777;

    /* Background colors - dark */
    --color-bg: #1a1a1a;
    --color-bg-secondary: #252525;
    --color-bg-tertiary: #2a2a2a;
    --color-bg-hover: var(--color-primary-alpha-15);
    --color-bg-active: var(--color-primary-alpha-20);

    /* Border colors - dark */
    --color-border: #404040;
    --color-border-light: #333;
    --color-border-lighter: #333;

    /* Footer colors - dark */
    --color-footer-bg: #0a0a0f;

    /* Status colors - dark */
    --color-error-bg: var(--color-primary-alpha-20);
    --color-error-border: var(--color-primary-alpha-30);

    background: var(--color-bg);
    color: var(--color-text);
}

body.dark-mode main {
    background: var(--color-bg);
}

body.dark-mode .post-card,
body.dark-mode .sidebar,
body.dark-mode .profile,
body.dark-mode .section,
body.dark-mode .publication-item,
body.dark-mode .research-item,
body.dark-mode .cert-item {
    background: var(--color-bg-secondary);
    border-color: var(--color-border);
}

body.dark-mode .post-card-title,
body.dark-mode .page-title,
body.dark-mode .section h2,
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3 {
    color: var(--color-text);
}

body.dark-mode .post-card-summary,
body.dark-mode .post-card-footer,
body.dark-mode p {
    color: var(--color-text-light);
}

body.dark-mode pre,
body.dark-mode code {
    background: var(--color-code-bg);
}

body.dark-mode .top-category-card {
    background: var(--color-bg-secondary);
    border-color: var(--color-border);
}

body.dark-mode .top-category-card:hover {
    border-color: var(--color-primary);
}

/* Search Modal */
.search-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-bg-overlay);
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding-top: 15vh;
    z-index: var(--z-toast);
}

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

.search-container {
    background: var(--color-bg);
    border-radius: 12px;
    width: 100%;
    max-width: 600px;
    box-shadow: 0 20px 60px var(--shadow-dark);
    overflow: hidden;
}

.search-input-wrapper {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--color-border-light);
}

.search-input-wrapper svg {
    color: var(--color-text-muted);
    flex-shrink: 0;
}

.search-input-wrapper input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 1.1rem;
    background: transparent;
}

.search-input-wrapper kbd {
    padding: 0.25rem 0.5rem;
    background: var(--color-bg-secondary);
    border-radius: 4px;
    font-size: 0.75rem;
    color: var(--color-gray-700);
    font-family: inherit;
}

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

.search-result-item {
    display: block;
    padding: 1rem 1.25rem;
    text-decoration: none;
    border-bottom: 1px solid var(--color-bg-secondary);
    transition: background 0.15s;
}

.search-result-item:hover {
    background: var(--color-bg-hover);
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-title {
    display: block;
    color: var(--color-text);
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.search-result-summary {
    display: block;
    color: var(--color-gray-700);
    font-size: 0.9rem;
    line-height: 1.4;
}

.no-results {
    padding: 2rem;
    text-align: center;
    color: var(--color-text-muted);
}

/* Dark Mode Toggle Button */
.btn-darkmode .icon-moon {
    display: none;
}

body.dark-mode .btn-darkmode .icon-sun {
    display: none;
}

body.dark-mode .btn-darkmode .icon-moon {
    display: block;
}

/* Dark Mode - Search Modal */
body.dark-mode .search-container {
    background: var(--color-bg-secondary);
}

body.dark-mode .search-input-wrapper input {
    color: var(--color-text);
}

/* Dark Mode - Modal */
body.dark-mode .modal-content {
    background: var(--color-bg-secondary);
}

body.dark-mode .modal-tab.active {
    color: var(--color-primary-light);
}

body.dark-mode .auth-form input {
    background: var(--color-bg-tertiary);
    color: var(--color-text);
}

/* ===== Reusable Patterns ===== */

/* Star background pattern - used in banners and hero sections */
.star-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(2px 2px at 20px 30px, #fff, transparent),
        radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 90px 40px, #fff, transparent),
        radial-gradient(2px 2px at 130px 80px, rgba(255,255,255,0.9), transparent),
        radial-gradient(1px 1px at 160px 20px, #fff, transparent),
        radial-gradient(2px 2px at 200px 50px, rgba(255,255,255,0.7), transparent),
        radial-gradient(1px 1px at 250px 35px, #fff, transparent),
        radial-gradient(2px 2px at 300px 65px, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 350px 25px, #fff, transparent),
        radial-gradient(2px 2px at 400px 55px, rgba(255,255,255,0.9), transparent),
        radial-gradient(1px 1px at 450px 45px, #fff, transparent),
        radial-gradient(2px 2px at 500px 30px, rgba(255,255,255,0.7), transparent),
        radial-gradient(1px 1px at 550px 70px, #fff, transparent),
        radial-gradient(2px 2px at 600px 20px, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 650px 60px, #fff, transparent),
        radial-gradient(2px 2px at 700px 40px, rgba(255,255,255,0.9), transparent),
        radial-gradient(1px 1px at 750px 75px, #fff, transparent),
        radial-gradient(2px 2px at 800px 15px, rgba(255,255,255,0.7), transparent);
    animation: twinkle 3s ease-in-out infinite alternate;
    z-index: 1;
}

/* Tag color cycling pattern - used for post tags (.card-tag, .home-tag, .meta-tag) */
.card-tag:nth-child(8n+1), .home-tag:nth-child(8n+1) { color: var(--color-tag-1); }
.card-tag:nth-child(8n+2), .home-tag:nth-child(8n+2) { color: var(--color-tag-2); }
.card-tag:nth-child(8n+3), .home-tag:nth-child(8n+3) { color: var(--color-tag-3); }
.card-tag:nth-child(8n+4), .home-tag:nth-child(8n+4) { color: var(--color-tag-4); }
.card-tag:nth-child(8n+5), .home-tag:nth-child(8n+5) { color: var(--color-tag-5); }
.card-tag:nth-child(8n+6), .home-tag:nth-child(8n+6) { color: var(--color-tag-6); }
.card-tag:nth-child(8n+7), .home-tag:nth-child(8n+7) { color: var(--color-tag-7); }
.card-tag:nth-child(8n), .home-tag:nth-child(8n) { color: var(--color-tag-8); }

/* 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;
    }

    .sso-btn {
        padding: 0.65rem 0.8rem;
        font-size: 0.85rem;
    }

    .auth-form input {
        padding: 0.65rem 0.85rem;
        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;
    }

    .sso-btn {
        padding: 0.6rem;
        font-size: 0.8rem;
        gap: 0.5rem;
    }

    .auth-form input {
        padding: 0.6rem 0.75rem;
    }

    .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;
    }
}

/* Screen reader only - for accessibility and SEO */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}