/*
Theme Name: Notion Style Theme
Description: A clean, modern WordPress theme inspired by Notion's design system. Perfect for blogs, personal websites, and company pages.
Author: DwarfLab
Version: 1.0.0
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: notion-theme
Tags: blog, clean, modern, responsive, notion, minimal, education, business
Requires at least: 5.0
Tested up to: 6.4
Requires PHP: 7.4
*/

/*
===========================================
NOTION DESIGN SYSTEM for WordPress
===========================================
Version: 1.0
Description: Complete Notion-inspired design system
Usage: Import this file in child theme or add to existing theme
===========================================
*/


/* ===========================================
   1. CSS CUSTOM PROPERTIES (Design Tokens)
   =========================================== */
   :root {
    /* Colors - Notion Color Palette */
    --notion-text: #37352f;
    --notion-text-light: #6b7280;
    --notion-text-lighter: #9ca3af;
    --notion-bg: #ffffff;
    --notion-bg-light: #f7f6f3;
    --notion-bg-hover: #f3f2f0;
    --notion-border: #e9e5e0;
    --notion-border-light: #f3f4f6;
    
    /* Accent Colors */
    --notion-blue: #2563eb;
    --notion-blue-light: #dbeafe;
    --notion-blue-dark: #1d4ed8;
    --notion-green: #059669;
    --notion-green-light: #d1fae5;
    --notion-purple: #7c3aed;
    --notion-purple-light: #e9d5ff;
    --notion-orange: #ea580c;
    --notion-orange-light: #fed7aa;
    
    /* Typography */
    --notion-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif;
    --notion-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
    
    /* Spacing Scale */
    --space-xs: 0.25rem;   /* 4px */
    --space-sm: 0.5rem;    /* 8px */
    --space-md: 1rem;      /* 16px */
    --space-lg: 1.5rem;    /* 24px */
    --space-xl: 2rem;      /* 32px */
    --space-2xl: 3rem;     /* 48px */
    --space-3xl: 4rem;     /* 64px */
    
    /* Border Radius */
    --radius-sm: 0.25rem;  /* 4px */
    --radius-md: 0.5rem;   /* 8px */
    --radius-lg: 0.75rem;  /* 12px */
    --radius-xl: 1rem;     /* 16px */
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    
    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-normal: 300ms ease;
    --transition-slow: 500ms ease;
  }
  
  /* ===========================================
     2. RESET & BASE STYLES
     =========================================== */
  * {
    box-sizing: border-box;
  }
  
  body {
    font-family: var(--notion-font-family);
    color: var(--notion-text);
    background-color: var(--notion-bg);
    line-height: 1.6;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  /* ===========================================
     3. LAYOUT COMPONENTS
     =========================================== */
  
  /* Container Sizes */
  .notion-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-lg);
  }
  
  .notion-container-sm {
    max-width: 1024px; /* max-w-4xl과 동일 */
    margin: 0 auto;
    padding: 0 1.5rem; /* px-6과 동일 */
  }
  
  .notion-container-lg {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--space-lg);
  }
  
  /* Page Layout */
  .notion-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }
  
  .notion-main {
    flex: 1;
    padding: 2rem 0; /* py-8과 동일 */
  }
  
  /* ===========================================
     4. HEADER STYLES
     =========================================== */
  .notion-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--notion-border);
    transition: all var(--transition-fast);
  }
  
  .notion-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 3.5rem;
    padding: 0 var(--space-lg);
  }
  
  .notion-logo {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    text-decoration: none;
    color: var(--notion-text);
    font-weight: 500;
    transition: color var(--transition-fast);
  }
  
  .notion-logo:hover {
    color: var(--notion-text-light);
  }
  
  .notion-logo-icon {
    width: 1.5rem;
    height: 1.5rem;
    background: linear-gradient(135deg, var(--notion-blue), var(--notion-purple));
    border-radius: var(--radius-sm);
  }
  
  .notion-nav-links {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
  }
  
  .notion-nav-link {
    font-size: 0.875rem;
    color: var(--notion-text);
    text-decoration: none;
    transition: color var(--transition-fast);
  }
  
  .notion-nav-link:hover {
    color: var(--notion-text-light);
  }
  
  /* ===========================================
     5. TYPOGRAPHY SYSTEM
     =========================================== */
  .notion-title {
    font-size: 2.25rem; /* text-4xl과 동일 */
    font-weight: 700;
    color: var(--notion-text);
    line-height: 1.1; /* leading-tight과 동일 */
    margin: 0 0 1.5rem 0; /* mb-6과 동일 */
  }
  
  .notion-title-lg {
    font-size: 3rem; /* text-5xl */
  }
  
  .notion-title-sm {
    font-size: 2rem;
  }
  
  .notion-subtitle {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--notion-text);
    margin: 0 0 var(--space-md) 0;
  }
  
  .notion-text {
    font-size: 1rem;
    color: var(--notion-text);
    line-height: 1.6;
    margin: 0 0 var(--space-md) 0;
  }
  
  .notion-text-sm {
    font-size: 0.875rem;
    color: var(--notion-text-light);
  }
  
  .notion-text-xs {
    font-size: 0.75rem;
    color: var(--notion-text-lighter);
  }
  
  /* ===========================================
     6. CARD COMPONENTS
     =========================================== */
  .notion-card {
    background: var(--notion-bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-xl);
    transition: all var(--transition-fast);
    border: 1px solid var(--notion-border-light);
  }
  
  .notion-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
  }
  
  .notion-card-header {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem; /* space-x-3과 동일 */
    margin-bottom: 1.5rem; /* mb-6과 동일 */
  }
  
  .notion-card-icon {
    width: 2rem; /* w-8 h-8과 동일 */
    height: 2rem;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 0.25rem; /* mt-1과 동일 */
    background: linear-gradient(135deg, var(--notion-green), #10b981); /* 기본값 */
  }
  
  .notion-card-content {
    flex: 1;
    min-width: 0; /* Tailwind의 min-w-0 */
  }
  
  /* ===========================================
     7. BUTTON COMPONENTS
     =========================================== */
  .notion-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: all var(--transition-fast);
    cursor: pointer;
    border: none;
    background: none;
  }
  
  .notion-btn-primary {
    background: var(--notion-blue);
    color: white;
  }
  
  .notion-btn-primary:hover {
    background: var(--notion-blue-dark);
    color: white;
  }
  
  .notion-btn-secondary {
    background: var(--notion-bg-hover);
    color: var(--notion-text);
  }
  
  .notion-btn-secondary:hover {
    background: var(--notion-border);
  }
  
  .notion-btn-ghost {
    color: var(--notion-text-light);
  }
  
  .notion-btn-ghost:hover {
    background: var(--notion-bg-hover);
    color: var(--notion-text);
  }
  
  /* ===========================================
     8. BADGE/TAG COMPONENTS
     =========================================== */
  .notion-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 0.25rem 0.75rem; /* px-3 py-1과 동일 */
    border-radius: 9999px; /* rounded-full */
    font-size: 0.75rem; /* text-xs */
    font-weight: 500; /* font-medium */
    margin-bottom: 2rem; /* mb-8과 동일 */
  }
  
  .notion-badge-blue {
    background: #dbeafe; /* bg-blue-50 */
    color: #1d4ed8; /* text-blue-700 */
  }
  
  .notion-badge-green {
    background: #dcfce7; /* bg-green-50 */
    color: #15803d; /* text-green-700 */
  }
  
  .notion-badge-purple {
    background: var(--notion-purple-light);
    color: var(--notion-purple);
  }
  
  .notion-badge-gray {
    background: var(--notion-bg-light);
    color: var(--notion-text);
  }
  
  /* ===========================================
     9. CONTENT BLOCKS
     =========================================== */
  .notion-content {
    font-family: var(--notion-font-family);
    color: var(--notion-text);
    line-height: 1.6;
  }
  
  .notion-content h1,
  .notion-content h2,
  .notion-content h3,
  .notion-content h4,
  .notion-content h5,
  .notion-content h6 {
    color: var(--notion-text);
    font-weight: 600;
    margin: 2em 0 0.5em 0;
    line-height: 1.3;
  }
  
  .notion-content h1 { font-size: 2rem; }
  .notion-content h2 { font-size: 1.5rem; }
  .notion-content h3 { font-size: 1.25rem; }
  .notion-content h4 { font-size: 1.125rem; }
  
  .notion-content p {
    margin: 0 0 1em 0;
  }
  
  .notion-content a {
    color: var(--notion-text);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--transition-fast);
  }
  
  .notion-content a:hover {
    color: var(--notion-blue);
  }
  
  .notion-content blockquote {
    border-left: 3px solid var(--notion-border);
    padding-left: var(--space-md);
    margin: var(--space-lg) 0;
    font-style: normal;
    color: var(--notion-text-light);
    background: var(--notion-bg-light);
    padding: var(--space-md);
    border-radius: var(--radius-md);
  }
  
  .notion-content code {
    background: var(--notion-bg-light);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    font-family: var(--notion-font-mono);
    font-size: 0.875em;
  }
  
  .notion-content pre {
    background: var(--notion-bg-light);
    border: 1px solid var(--notion-border);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    overflow-x: auto;
    margin: var(--space-lg) 0;
  }
  
  .notion-content pre code {
    background: none;
    padding: 0;
  }
  
  .notion-content ul,
  .notion-content ol {
    padding-left: var(--space-lg);
    margin: var(--space-md) 0;
  }
  
  .notion-content li {
    margin: var(--space-sm) 0;
  }
  
  /* ===========================================
     10. POST/PAGE SPECIFIC STYLES
     =========================================== */
  .notion-post-grid {
    display: grid;
    gap: var(--space-xl);
  }
  
  .notion-post-item {
    display: block;
    text-decoration: none;
    color: inherit;
  }
  
  .notion-post-meta {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    font-size: 0.875rem; /* text-sm과 동일 */
    color: #6b7280; /* text-gray-500와 동일 */
    margin: var(--space-md) 0 1.5rem 0; /* mb-6과 동일 */
  }
  
  .notion-post-meta-item {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
  }
  
  /* ===========================================
     11. BREADCRUMB COMPONENT
     =========================================== */
  .notion-breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 0.875rem;
    margin-bottom: var(--space-lg);
  }
  
  .notion-breadcrumb-link {
    color: var(--notion-text-light);
    text-decoration: none;
    transition: color var(--transition-fast);
  }
  
  .notion-breadcrumb-link:hover {
    color: var(--notion-text);
  }
  
  .notion-breadcrumb-separator {
    color: var(--notion-text-lighter);
  }
  
  /* ===========================================
     12. FOOTER STYLES
     =========================================== */
  .notion-footer {
    border-top: 1px solid var(--notion-border);
    margin-top: var(--space-3xl);
    padding: var(--space-3xl) 0;
  }
  
  .notion-footer-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-2xl);
    margin-bottom: var(--space-xl);
  }
  
  .notion-footer-section {
    flex: 1;
  }
  
  .notion-footer-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--notion-text);
    margin-bottom: var(--space-md);
  }
  
  .notion-footer-links {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }
  
  .notion-footer-link {
    font-size: 0.875rem;
    color: var(--notion-text-light);
    text-decoration: none;
    transition: color var(--transition-fast);
  }
  
  .notion-footer-link:hover {
    color: var(--notion-text);
  }
  
  .notion-footer-bottom {
    padding-top: var(--space-lg);
    border-top: 1px solid var(--notion-border);
    text-align: center;
  }
  
  .notion-footer-copyright {
    font-size: 0.75rem;
    color: var(--notion-text-lighter);
  }
  
  /* ===========================================
     13. RESPONSIVE DESIGN
     =========================================== */
  @media (max-width: 768px) {
    .notion-container,
    .notion-container-sm,
    .notion-container-lg {
      padding: 0 var(--space-md);
    }
    
    .notion-nav {
      padding: 0 var(--space-md);
    }
    
    .notion-nav-links {
      gap: var(--space-md);
    }
    
    .notion-title {
      font-size: 2rem;
    }
    
    .notion-title-lg {
      font-size: 2.5rem;
    }
    
    .notion-card {
      padding: var(--space-lg);
    }
    
    .notion-footer-content {
      flex-direction: column;
      gap: var(--space-xl);
    }
  }
  
  @media (max-width: 480px) {
    .notion-nav-links {
      display: none;
    }
    
    .notion-title {
      font-size: 1.75rem;
    }
    
    .notion-card {
      padding: var(--space-md);
    }
  }
  
  /* ===========================================
     14. UTILITY CLASSES
     =========================================== */
  
  /* Spacing */
  .notion-mt-xs { margin-top: var(--space-xs); }
  .notion-mt-sm { margin-top: var(--space-sm); }
  .notion-mt-md { margin-top: var(--space-md); }
  .notion-mt-lg { margin-top: var(--space-lg); }
  .notion-mt-xl { margin-top: var(--space-xl); }
  .notion-mt-2xl { margin-top: var(--space-2xl); }
  
  .notion-mb-xs { margin-bottom: var(--space-xs); }
  .notion-mb-sm { margin-bottom: var(--space-sm); }
  .notion-mb-md { margin-bottom: var(--space-md); }
  .notion-mb-lg { margin-bottom: var(--space-lg); }
  .notion-mb-xl { margin-bottom: var(--space-xl); }
  .notion-mb-2xl { margin-bottom: var(--space-2xl); }
  
  .notion-p-xs { padding: var(--space-xs); }
  .notion-p-sm { padding: var(--space-sm); }
  .notion-p-md { padding: var(--space-md); }
  .notion-p-lg { padding: var(--space-lg); }
  .notion-p-xl { padding: var(--space-xl); }
  
  /* Flexbox */
  .notion-flex { display: flex; }
  .notion-flex-col { flex-direction: column; }
  .notion-items-center { align-items: center; }
  .notion-justify-center { justify-content: center; }
  .notion-justify-between { justify-content: space-between; }
  .notion-gap-sm { gap: var(--space-sm); }
  .notion-gap-md { gap: var(--space-md); }
  .notion-gap-lg { gap: var(--space-lg); }
  
  /* Text */
  .notion-text-center { text-align: center; }
  .notion-text-left { text-align: left; }
  .notion-text-right { text-align: right; }
  
  /* Border */
  .notion-border-t { border-top: 1px solid var(--notion-border); }
  .notion-border-b { border-bottom: 1px solid var(--notion-border); }
  .notion-rounded { border-radius: var(--radius-md); }
  .notion-rounded-lg { border-radius: var(--radius-lg); }
  
  /* Background */
  .notion-bg-light { background-color: var(--notion-bg-light); }
  .notion-bg-hover { background-color: var(--notion-bg-hover); }
  
  /* ===========================================
     15. WORDPRESS SPECIFIC OVERRIDES
     =========================================== */
  
  /* Override WordPress default styles */
  .notion-content .wp-block-image {
    margin: var(--space-lg) 0;
  }
  
  .notion-content .wp-block-quote {
    border-left: 3px solid var(--notion-blue);
    background: var(--notion-blue-light);
    padding: var(--space-md);
    border-radius: var(--radius-md);
  }
  
  .notion-content .wp-block-code {
    background: var(--notion-bg-light);
    border: 1px solid var(--notion-border);
    border-radius: var(--radius-md);
    padding: var(--space-md);
  }
  
  /* WordPress navigation */
  .notion-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--space-2xl);
    padding-top: var(--space-xl);
    border-top: 1px solid var(--notion-border);
  }
  
  .notion-pagination a {
    display: inline-flex;
    align-items: center;
    padding: var(--space-sm) var(--space-md);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--notion-text);
    text-decoration: none;
    transition: color var(--transition-fast);
  }
  
  .notion-pagination a:hover {
    color: var(--notion-blue);
  }
  
  /* ===========================================
     END OF NOTION DESIGN SYSTEM
     =========================================== */