spectrum-er 1.0.0

data/_sass/_base.scss

@@ -0,0 +1,298 @@
+// Base Styles
+// ===========
+
+// Reset and normalize
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  font-size: 16px;
+  line-height: 1.5;
+  -webkit-text-size-adjust: 100%;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  font-family: 'Lato', Verdana, Helvetica, sans-serif;
+  font-size: 1rem;
+  line-height: 1.6;
+  color: var(--text-color, #2c3e50);
+  background-color: var(--bg-color, #ffffff);
+  transition: color 0.3s ease, background-color 0.3s ease;
+  margin: 0;
+  padding: 0;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.page-wrapper {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  max-width: var(--max-width, 1125px); /* Expanded by 25% from 900px for better screen utilization */
+  margin: 0 auto;
+  padding: var(--nav-height, 6rem) 1rem 0; /* Add top padding for fixed navigation, remove bottom padding */
+}
+
+.main-content {
+  flex: 1;
+}
+
+// Typography
+h1, h2, h3, h4, h5, h6 {
+  font-weight: 400;
+  line-height: 1.3;
+  margin-bottom: 0.75rem;
+  margin-top: 1.5rem;
+  color: var(--text-color, #2c3e50);
+}
+
+h1 {
+  font-size: 1.8rem;
+  margin-top: 0;
+  font-weight: 300;
+}
+h2 { font-size: 1.4rem; }
+h3 { font-size: 1.2rem; }
+h4 { font-size: 1.1rem; }
+h5 { font-size: 1rem; }
+h6 { font-size: 0.95rem; }
+
+p {
+  margin-bottom: 0.75rem;
+  color: var(--text-color, #2c3e50);
+  line-height: 1.5;
+}
+
+a {
+  color: var(--primary-color, #3498db);
+  text-decoration: none;
+  transition: color 0.2s ease;
+
+  &:hover {
+    color: var(--accent-color, #e74c3c);
+  }
+}
+
+// Lists
+ul, ol {
+  margin-bottom: 1rem;
+  padding-left: 2rem;
+}
+
+li {
+  margin-bottom: 0.5rem;
+}
+
+// Code
+code {
+  font-family: var(--font-family, 'JetBrains Mono', Monaco, 'Lucida Console', monospace);
+  font-size: 0.875rem;
+  background-color: var(--border-color, #ecf0f1);
+  padding: 0.125rem 0.25rem;
+  border-radius: 0.25rem;
+  color: var(--accent-color, #e74c3c);
+}
+
+pre {
+  background-color: var(--border-color, #ecf0f1);
+  padding: 1rem;
+  border-radius: 0.5rem;
+  overflow-x: auto;
+  margin-bottom: 1rem;
+
+  code {
+    background: none;
+    padding: 0;
+    color: var(--text-color, #2c3e50);
+  }
+}
+
+// Blockquotes
+blockquote {
+  border-left: 4px solid var(--primary-color, #3498db);
+  padding-left: 1rem;
+  margin: 1rem 0;
+  font-style: italic;
+  color: var(--light-text-color, #7f8c8d);
+}
+
+// Tables
+table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-bottom: 1rem;
+}
+
+th, td {
+  padding: 0.75rem;
+  text-align: left;
+  border-bottom: 1px solid var(--border-color, #ecf0f1);
+}
+
+th {
+  font-weight: 600;
+  background-color: var(--border-color, #ecf0f1);
+}
+
+// Images
+img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+}
+
+// Form elements
+input, textarea, select, button {
+  font-family: inherit;
+  font-size: inherit;
+}
+
+button {
+  cursor: pointer;
+  border: none;
+  background: none;
+  padding: 0;
+}
+
+// Utility classes
+.container {
+  max-width: var(--max-width, 1125px); /* Expanded by 25% to match page-wrapper */
+  margin: 0 auto;
+  padding: 0 1rem;
+
+  @media (min-width: 768px) {
+    padding: 0 2rem;
+  }
+}
+
+.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;
+}
+
+// Dark mode styles
+.dark-mode {
+  --bg-color: #2c3e50;
+  --text-color: #ecf0f1;
+  --light-text-color: #bdc3c7;
+  --border-color: #34495e;
+
+  code {
+    background-color: var(--border-color);
+  }
+
+  pre {
+    background-color: var(--border-color);
+  }
+
+  th {
+    background-color: var(--border-color);
+  }
+}
+
+// Animation utilities
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes slideInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideInLeft {
+  from {
+    opacity: 0;
+    transform: translateX(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.animate-fade-in {
+  animation: fadeIn 0.5s ease-out;
+}
+
+.animate-slide-up {
+  animation: slideInUp 0.5s ease-out;
+}
+
+.animate-slide-left {
+  animation: slideInLeft 0.5s ease-out;
+}
+
+// Responsive breakpoints
+@media (max-width: 767px) {
+  .page-wrapper {
+    padding: var(--nav-height-mobile, 5.5rem) 0.5rem 0; // 0.75rem → 0.5rem
+    max-width: 100%; // 최대 너비 100% 보장
+  }
+
+  body {
+    font-size: 0.85rem;
+    overflow-x: hidden; // 가로 스크롤 방지
+  }
+
+  .container {
+    padding: 0 0.5rem; // 패딩 감소
+    max-width: 100%;
+  }
+
+  h1 { font-size: 1.5rem; }
+  h2 { font-size: 1.3rem; }
+  h3 { font-size: 1.1rem; }
+  h4 { font-size: 1rem; }
+  h5 { font-size: 0.95rem; }
+  h6 { font-size: 0.9rem; }
+
+  p {
+    margin-bottom: 0.6rem;
+  }
+}
+
+// 매우 작은 화면 추가
+@media (max-width: 480px) {
+  .page-wrapper {
+    padding: var(--nav-height-mobile, 5.5rem) 0.25rem 0;
+  }
+  
+  .container {
+    padding: 0 0.25rem;
+  }
+}
+
+@media (min-width: 768px) and (max-width: 1023px) {
+  .page-wrapper {
+    padding: var(--nav-height-tablet, 5.75rem) 1.5rem 0; /* Add top padding for fixed navigation on tablet, remove bottom padding */
+  }
+}
+
+@media (min-width: 1024px) {
+  .page-wrapper {
+    padding: var(--nav-height, 6rem) 2rem 0; /* Add top padding for fixed navigation on desktop, remove bottom padding */
+  }
+}

data/_sass/_color-variables.scss

@@ -0,0 +1,262 @@
+// Color Variables and Theme System
+// =================================
+
+// CSS Custom Properties for theming
+:root {
+  // Primary colors
+  --primary-color: #3498db;
+  --primary-hover: #2980b9;
+  --primary-light: #85c1e9;
+  --primary-dark: #1f618d;
+
+  // Secondary colors
+  --secondary-color: #2c3e50;
+  --secondary-hover: #1a252f;
+  --secondary-light: #566573;
+  --secondary-dark: #1b2631;
+
+  // Accent colors
+  --accent-color: #e74c3c;
+  --accent-hover: #c0392b;
+  --accent-light: #f1948a;
+  --accent-dark: #a93226;
+
+  // Neutral colors
+  --white: #ffffff;
+  --black: #000000;
+  --gray-50: #f8f9fa;
+  --gray-100: #e9ecef;
+  --gray-200: #dee2e6;
+  --gray-300: #ced4da;
+  --gray-400: #adb5bd;
+  --gray-500: #6c757d;
+  --gray-600: #495057;
+  --gray-700: #343a40;
+  --gray-800: #212529;
+  --gray-900: #121416;
+
+  // Semantic colors
+  --success-color: #27ae60;
+  --warning-color: #f39c12;
+  --error-color: #e74c3c;
+  --info-color: #3498db;
+
+  // Background colors
+  --bg-color: #ffffff;
+  --bg-secondary: #f8f9fa;
+  --bg-tertiary: #e9ecef;
+
+  // Text colors
+  --text-color: #2c3e50;
+  --text-secondary: #6c757d;
+  --text-muted: #adb5bd;
+  --text-light: #ffffff;
+
+  // Border colors
+  --border-color: #dee2e6;
+  --border-light: #e9ecef;
+  --border-dark: #adb5bd;
+
+  // Shadow colors
+  --shadow-light: rgba(0, 0, 0, 0.1);
+  --shadow-medium: rgba(0, 0, 0, 0.15);
+  --shadow-dark: rgba(0, 0, 0, 0.25);
+
+  // Gradient colors
+  --gradient-primary: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
+  --gradient-secondary: linear-gradient(135deg, var(--secondary-color), var(--secondary-dark));
+  --gradient-accent: linear-gradient(135deg, var(--accent-color), var(--accent-dark));
+
+  // Animation variables
+  --transition-fast: 0.15s ease;
+  --transition-normal: 0.3s ease;
+  --transition-slow: 0.5s ease;
+
+  // Spacing variables (8px base scale)
+  --spacing-xs: 0.25rem;   // 4px
+  --spacing-sm: 0.5rem;    // 8px
+  --spacing-md: 1rem;      // 16px
+  --spacing-lg: 1.5rem;    // 24px
+  --spacing-xl: 2rem;      // 32px
+  --spacing-2xl: 3rem;     // 48px
+  --spacing-3xl: 4rem;     // 64px
+  --spacing-4xl: 6rem;     // 96px
+
+  // Border radius
+  --radius-sm: 0.25rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
+  --radius-full: 9999px;
+
+  // Layout variables
+  --content-max-width: 875px;
+  --site-max-width: 1125px;
+  --max-width: 1125px;
+
+  // Navigation height variables
+  --nav-height: 6rem;
+  --nav-height-mobile: 5.5rem;
+  --nav-height-tablet: 5.75rem;
+
+  // Z-index scale
+  --z-dropdown: 1000;
+  --z-sticky: 1020;
+  --z-fixed: 1030;
+  --z-modal-backdrop: 1040;
+  --z-modal: 1050;
+  --z-popover: 1060;
+  --z-tooltip: 1070;
+}
+
+// 모바일 반응형 변수
+@media (max-width: 767px) {
+  :root {
+    --content-max-width: calc(100% - 1rem);
+    --site-max-width: 100%;
+    --max-width: 100%;
+  }
+}
+
+@media (max-width: 480px) {
+  :root {
+    --content-max-width: calc(100% - 0.5rem);
+  }
+}
+
+// Dark mode color overrides
+.dark-mode {
+  // Background colors
+  --bg-color: #1a1a1a;
+  --bg-secondary: #2d2d2d;
+  --bg-tertiary: #404040;
+
+  // Text colors
+  --text-color: #e9ecef;
+  --text-secondary: #adb5bd;
+  --text-muted: #6c757d;
+
+  // Border colors
+  --border-color: #404040;
+  --border-light: #2d2d2d;
+  --border-dark: #6c757d;
+
+  // Shadow colors (lighter for dark mode)
+  --shadow-light: rgba(255, 255, 255, 0.1);
+  --shadow-medium: rgba(255, 255, 255, 0.15);
+  --shadow-dark: rgba(255, 255, 255, 0.25);
+}
+
+// Color utility classes
+.text-primary { color: var(--primary-color) !important; }
+.text-secondary { color: var(--secondary-color) !important; }
+.text-accent { color: var(--accent-color) !important; }
+.text-success { color: var(--success-color) !important; }
+.text-warning { color: var(--warning-color) !important; }
+.text-error { color: var(--error-color) !important; }
+.text-muted { color: var(--text-muted) !important; }
+
+.bg-primary { background-color: var(--primary-color) !important; }
+.bg-secondary { background-color: var(--secondary-color) !important; }
+.bg-accent { background-color: var(--accent-color) !important; }
+.bg-success { background-color: var(--success-color) !important; }
+.bg-warning { background-color: var(--warning-color) !important; }
+.bg-error { background-color: var(--error-color) !important; }
+
+.border-primary { border-color: var(--primary-color) !important; }
+.border-secondary { border-color: var(--secondary-color) !important; }
+.border-accent { border-color: var(--accent-color) !important; }
+
+// Gradient utility classes
+.gradient-primary {
+  background: var(--gradient-primary);
+}
+
+.gradient-secondary {
+  background: var(--gradient-secondary);
+}
+
+.gradient-accent {
+  background: var(--gradient-accent);
+}
+
+// Hover effects
+.hover-primary:hover {
+  color: var(--primary-color);
+  transition: color var(--transition-fast);
+}
+
+.hover-bg-primary:hover {
+  background-color: var(--primary-color);
+  transition: background-color var(--transition-fast);
+}
+
+.hover-scale:hover {
+  transform: scale(1.05);
+  transition: transform var(--transition-fast);
+}
+
+.hover-shadow:hover {
+  box-shadow: 0 4px 12px var(--shadow-medium);
+  transition: box-shadow var(--transition-fast);
+}
+
+// Focus styles
+.focus-primary:focus {
+  outline: 2px solid var(--primary-color);
+  outline-offset: 2px;
+}
+
+.focus-ring:focus {
+  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.25);
+}
+
+// Animation utilities
+.transition-fast {
+  transition: all var(--transition-fast);
+}
+
+.transition-normal {
+  transition: all var(--transition-normal);
+}
+
+.transition-slow {
+  transition: all var(--transition-slow);
+}
+
+// Spacing utilities
+.p-xs { padding: var(--spacing-xs); }
+.p-sm { padding: var(--spacing-sm); }
+.p-md { padding: var(--spacing-md); }
+.p-lg { padding: var(--spacing-lg); }
+.p-xl { padding: var(--spacing-xl); }
+
+.m-xs { margin: var(--spacing-xs); }
+.m-sm { margin: var(--spacing-sm); }
+.m-md { margin: var(--spacing-md); }
+.m-lg { margin: var(--spacing-lg); }
+.m-xl { margin: var(--spacing-xl); }
+
+// Border radius utilities
+.rounded-sm { border-radius: var(--radius-sm); }
+.rounded-md { border-radius: var(--radius-md); }
+.rounded-lg { border-radius: var(--radius-lg); }
+.rounded-xl { border-radius: var(--radius-xl); }
+.rounded-full { border-radius: var(--radius-full); }
+
+// Shadow utilities
+.shadow-sm {
+  box-shadow: 0 1px 3px var(--shadow-light);
+}
+
+.shadow-md {
+  box-shadow: 0 4px 6px var(--shadow-light);
+}
+
+.shadow-lg {
+  box-shadow: 0 10px 15px var(--shadow-medium);
+}
+
+.shadow-xl {
+  box-shadow: 0 20px 25px var(--shadow-dark);
+}