/* ===== AI-Generated Code Syntax Responsive =====
 * Created by: 콩미니 (Kong-mini)
 * Models: GPT-4.1 + Claude 3.5 Sonnet
 * Last Updated: 2026-02-24
 *
 * Policy: P1 (Device Agnosticism), P2 (No Essence Compromise)
 * Task: L4-16 ~ L4-19 (Code Example Responsive)
 */

/* ===== Code Display Base ===== */
.code-display {
  background: #1e1e1e;  /* Dark theme (better battery on mobile) */
  border-radius: 8px;
  padding: var(--space-sm);
  overflow-x: auto;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: var(--font-size-sm);
  line-height: 1.4;
  color: #d4d4d4;
  border: 1px solid #333;
}

/* Mobile: Smaller font, wrap long lines */
@media (max-width: 767px) {
  .code-display {
    font-size: 13px;  /* Smaller for mobile */
    padding: var(--space-sm);
  }

  .code-display pre {
    white-space: pre-wrap;  /* Wrap long lines */
    word-break: break-word;
    overflow-x: hidden;  /* No horizontal scroll */
  }

  /* Adjust line height for smaller screens */
  .code-display code {
    line-height: 1.3;
  }
}

/* Tablet & Desktop: Horizontal scroll, better readability */
@media (min-width: 768px) {
  .code-display {
    font-size: 14px;
    padding: var(--space-md);
  }

  .code-display pre {
    white-space: pre;  /* Preserve formatting */
    overflow-x: auto;  /* Horizontal scroll */
  }

  .code-display code {
    line-height: 1.4;
  }
}

/* ===== Syntax Highlighting (Dark Theme) ===== */

/* Keywords */
.code-display .keyword {
  color: #569cd6;  /* Blue */
  font-weight: 600;
}

/* Types */
.code-display .type {
  color: #4ec9b0;  /* Teal */
}

/* Strings */
.code-display .string {
  color: #ce9178;  /* Orange */
}

/* Comments */
.code-display .comment {
  color: #6a9955;  /* Green */
  font-style: italic;
}

/* Numbers */
.code-display .number {
  color: #b5cea8;  /* Light green */
}

/* Functions */
.code-display .function {
  color: #dcdcaa;  /* Yellow */
}

/* Macros */
.code-display .macro {
  color: #c586c0;  /* Purple */
}

/* Operators */
.code-display .operator {
  color: #d4d4d4;
}

/* ===== Mobile Syntax Highlighting Optimization ===== */

/* Reduce color intensity for mobile (better battery, readability) */
@media (max-width: 767px) {
  /* Slightly darker colors for mobile OLED */
  .code-display .keyword {
    color: #4a8cc2;  /* Darker blue */
  }

  .code-display .string {
    color: #b88260;  /* Darker orange */
  }

  .code-display .comment {
    color: #5a7f45;  /* Darker green */
  }

  .code-display .function {
    color: #b8b080;  /* Darker yellow */
  }
}

/* ===== Inline Code ===== */
code:not(pre code) {
  background: rgba(0, 0, 0, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'Monaco', 'Menlo', monospace;
  font-size: 0.9em;
  color: #e83e8c;
}

@media (prefers-color-scheme: dark) {
  code:not(pre code) {
    background: rgba(255, 255, 255, 0.1);
    color: #f48fb1;
  }
}

/* ===== Code Block with Line Numbers (Future) ===== */
.code-display-with-lines {
  position: relative;
  padding-left: 40px;
}

.code-display-with-lines::before {
  content: attr(data-lines);
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 30px;
  background: #252526;
  color: #858585;
  font-size: 12px;
  line-height: 1.4;
  padding: var(--space-sm) 4px;
  text-align: right;
  counter-reset: line;
}

/* ===== Copy Button (Future) ===== */
.code-copy-btn {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  background: #333;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 12px;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s;
}

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

.code-copy-btn.copied {
  background: #4caf50;
}

/* ===== Scrollbar Styling ===== */
.code-display::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}

.code-display::-webkit-scrollbar-track {
  background: #1e1e1e;
  border-radius: 4px;
}

.code-display::-webkit-scrollbar-thumb {
  background: #444;
  border-radius: 4px;
}

.code-display::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Mobile: Hide scrollbar (scrolling still works) */
@media (max-width: 767px) {
  .code-display::-webkit-scrollbar {
    display: none;
  }

  .code-display {
    -ms-overflow-style: none;  /* IE/Edge */
    scrollbar-width: none;  /* Firefox */
  }
}

/* ===== Accessibility ===== */
@media (prefers-reduced-motion: reduce) {
  .code-copy-btn {
    transition: none;
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .code-display {
    border: 2px solid #666;
  }

  .code-display .keyword {
    font-weight: 700;
  }
}