// ColorPaletteContent.tsx — WING-OPS Color 파운데이션 페이지 (다크/라이트 테마 지원)

import { useState } from 'react';
import type { DesignTheme } from './designTheme';

// ---------- 타입 ----------

interface ColorStep {
  step: number;
  color: string;
}


interface ColorToken {
  name: string;
  hex: string;
}

interface ColorTokenGroup {
  title: string;
  tokens: ColorToken[];
}

// ---------- 데이터 ----------

// Grayscale (Cool Tone)
const GRAY_SCALE: ColorStep[] = [
  { step: 0, color: '#FFFFFF' },
  { step: 50, color: '#F8F9FC' },
  { step: 100, color: '#F3F6FB' },
  { step: 200, color: '#EBEFF5' },
  { step: 250, color: '#E1E6EC' },
  { step: 300, color: '#D6DBE1' },
  { step: 400, color: '#B9C1C9' },
  { step: 500, color: '#808892' },
  { step: 550, color: '#6C747E' },
  { step: 600, color: '#565B64' },
  { step: 700, color: '#3A3F49' },
  { step: 800, color: '#24272D' },
  { step: 850, color: '#1B1E23' },
  { step: 900, color: '#121418' },
  { step: 1000, color: '#000000' },
];

// Primary Blue-Cyan (hue ~200°, base #0099DD)
const PRIMARY_SCALE: ColorStep[] = [
  { step: 100, color: '#E6F4FB' },
  { step: 200, color: '#B3E0F5' },
  { step: 300, color: '#80CCEE' },
  { step: 400, color: '#4DB8E8' },
  { step: 500, color: '#0099DD' },
  { step: 600, color: '#007AB1' },
  { step: 700, color: '#005C85' },
  { step: 800, color: '#003D59' },
  { step: 900, color: '#001F2D' },
];

interface ColorSpec {
  role: string;
  gray: string;
  hex: string;
}

const TEXT_COLORS: { light: ColorSpec[]; dark: ColorSpec[] } = {
  light: [
    { role: '제목 (Title)', gray: 'Gray 900', hex: '#121418' },
    { role: '서브 (Sub)', gray: 'Gray 800', hex: '#24272D' },
    { role: '부가정보 (Info)', gray: 'Gray 600', hex: '#565B64' },
    { role: '캡션 (Caption)', gray: 'Gray 500', hex: '#808892' },
  ],
  dark: [
    { role: '제목 (Title)', gray: 'Gray 50', hex: '#F8F9FC' },
    { role: '서브 (Sub)', gray: 'Gray 400', hex: '#B9C1C9' },
    { role: '부가정보 (Info)', gray: 'Gray 500', hex: '#808892' },
    { role: '캡션 (Caption)', gray: 'Gray 550', hex: '#6C747E' },
  ],
};

const BG_COLORS: { light: ColorSpec[]; dark: ColorSpec[] } = {
  light: [
    { role: 'Background / Bottom Sheet', gray: 'Gray 0', hex: '#FFFFFF' },
  ],
  dark: [
    { role: 'Background', gray: 'Gray 900', hex: '#121418' },
    { role: 'Bottom Sheet / Panel', gray: 'Gray 850', hex: '#1B1E23' },
  ],
};

const LINE_COLORS: { light: ColorSpec[]; dark: ColorSpec[] } = {
  light: [
    { role: 'Divider', gray: 'Gray 50', hex: '#F8F9FC' },
    { role: 'Accent Line', gray: 'Gray 250', hex: '#E1E6EC' },
    { role: 'Line', gray: 'Gray 400', hex: '#B9C1C9' },
  ],
  dark: [
    { role: 'Divider', gray: 'Gray 850', hex: '#1B1E23' },
    { role: 'Accent Line', gray: 'Gray 550', hex: '#6C747E' },
    { role: 'Line', gray: 'Gray 800', hex: '#24272D' },
  ],
};

interface SemanticColor {
  name: string;
  hex: string;
  usages: string[];
}

const SEMANTIC_COLORS: SemanticColor[] = [
  { name: 'Primary 500', hex: '#0099DD', usages: ['긍정의 의미', '주요 액션 버튼', '링크, 선택 상태'] },
  { name: 'Red 600', hex: '#D61111', usages: ['부정 컬러로 사용', '공지 배지의 Text로 사용'] },
  { name: 'Red 100', hex: '#7A2D2D', usages: ['공지 배지의 bg 컬러'] },
  { name: 'Yellow 500', hex: '#FEDA4A', usages: ['즐겨찾기/북마크 의미로 사용'] },
];

const POSITIVE_COLOR = {
  light: { label: 'Primary 500', hex: '#0099DD' },
  dark: { label: 'Primary 600', hex: '#007AB1' },
};

const NEGATIVE_COLOR = {
  light: { label: 'Red 600', hex: '#D61111' },
  dark: { label: 'Red 500', hex: '#DE4141' },
};

const NOTICE_COLOR = {
  light: { text: { label: 'Red 600', hex: '#D61111' }, bg: { label: 'Red 100', hex: '#FFF2F2' } },
  dark: { text: { label: 'PaleRed 900', hex: '#84222C' }, bg: { label: 'PaleRed 300', hex: '#F59EA7' } },
};

const MARITIME_COLORS = [
  { role: '유지 (기본)', hex: '#121418', label: 'Gray 900', desc: '기본 상태, 중립 데이터' },
  { role: '위험 / 오염', hex: '#D61111', label: 'Red 600', desc: '오일 유출, 오염 감지, 위험 알림' },
  { role: '안전 / 정상', hex: '#0099DD', label: 'Primary 500', desc: '정상 수질, 안전 구역, 정상 상태' },
];

const COLOR_TOKEN_GROUPS: ColorTokenGroup[] = [
  {
    title: 'Static',
    tokens: [
      { name: 'static.black', hex: '#131415' },
      { name: 'static.white', hex: '#ffffff' },
    ],
  },
  {
    title: 'Gray',
    tokens: [
      { name: 'gray.0', hex: '#FFFFFF' },
      { name: 'gray.50', hex: '#F8F9FC' },
      { name: 'gray.100', hex: '#F3F6FB' },
      { name: 'gray.200', hex: '#EBEFF5' },
      { name: 'gray.250', hex: '#E1E6EC' },
      { name: 'gray.300', hex: '#D6DBE1' },
      { name: 'gray.400', hex: '#B9C1C9' },
      { name: 'gray.500', hex: '#808892' },
      { name: 'gray.550', hex: '#6C747E' },
      { name: 'gray.600', hex: '#565B64' },
      { name: 'gray.700', hex: '#3A3F49' },
      { name: 'gray.800', hex: '#24272D' },
      { name: 'gray.850', hex: '#1B1E23' },
      { name: 'gray.900', hex: '#121418' },
      { name: 'gray.1000', hex: '#000000' },
    ],
  },
  {
    title: 'Blue (Primary)',
    tokens: [
      { name: 'blue.100', hex: '#E6F4FB' },
      { name: 'blue.200', hex: '#B3E0F5' },
      { name: 'blue.300', hex: '#80CCEE' },
      { name: 'blue.400', hex: '#4DB8E8' },
      { name: 'blue.500', hex: '#0099DD' },
      { name: 'blue.600', hex: '#007AB1' },
      { name: 'blue.700', hex: '#005C85' },
      { name: 'blue.800', hex: '#003D59' },
      { name: 'blue.900', hex: '#001F2D' },
      { name: 'blue.1000', hex: '#001520' },
    ],
  },
  {
    title: 'Green',
    tokens: [
      { name: 'green.100', hex: '#dcfce7' },
      { name: 'green.200', hex: '#bbf7d0' },
      { name: 'green.300', hex: '#86efac' },
      { name: 'green.400', hex: '#4ade80' },
      { name: 'green.500', hex: '#22c55e' },
      { name: 'green.600', hex: '#16a34a' },
      { name: 'green.700', hex: '#15803d' },
      { name: 'green.800', hex: '#166534' },
      { name: 'green.900', hex: '#14532d' },
      { name: 'green.1000', hex: '#052e16' },
    ],
  },
  {
    title: 'Yellow',
    tokens: [
      { name: 'yellow.100', hex: '#fef9c3' },
      { name: 'yellow.200', hex: '#fef08a' },
      { name: 'yellow.300', hex: '#fde047' },
      { name: 'yellow.400', hex: '#facc15' },
      { name: 'yellow.500', hex: '#FEDA4A' },
      { name: 'yellow.600', hex: '#ca8a04' },
      { name: 'yellow.700', hex: '#a16207' },
      { name: 'yellow.800', hex: '#854d0e' },
      { name: 'yellow.900', hex: '#713f12' },
      { name: 'yellow.1000', hex: '#422006' },
    ],
  },
  {
    title: 'Red',
    tokens: [
      { name: 'red.100', hex: '#7A2D2D' },
      { name: 'red.200', hex: '#fecaca' },
      { name: 'red.300', hex: '#fca5a5' },
      { name: 'red.400', hex: '#f87171' },
      { name: 'red.500', hex: '#DE4141' },
      { name: 'red.600', hex: '#D61111' },
      { name: 'red.700', hex: '#b91c1c' },
      { name: 'red.800', hex: '#991b1b' },
      { name: 'red.900', hex: '#7f1d1d' },
      { name: 'red.1000', hex: '#450a0a' },
    ],
  },
  {
    title: 'Purple',
    tokens: [
      { name: 'purple.100', hex: '#f3e8ff' },
      { name: 'purple.200', hex: '#e9d5ff' },
      { name: 'purple.300', hex: '#d8b4fe' },
      { name: 'purple.400', hex: '#c084fc' },
      { name: 'purple.500', hex: '#a855f7' },
      { name: 'purple.600', hex: '#9333ea' },
      { name: 'purple.700', hex: '#7e22ce' },
      { name: 'purple.800', hex: '#6b21a8' },
      { name: 'purple.900', hex: '#581c87' },
      { name: 'purple.1000', hex: '#3b0764' },
    ],
  },
];

// ---------- 헬퍼 ----------

const hexToRgb = (hex: string): string => {
  const r = parseInt(hex.slice(1, 3), 16);
  const g = parseInt(hex.slice(3, 5), 16);
  const b = parseInt(hex.slice(5, 7), 16);
  return `rgb(${r}, ${g}, ${b})`;
};

// ---------- Definition 탭 전용 테마 토큰 ----------
// 라이트 모드를 웜 오프화이트 + 잉크 네이비로 설계 (해양 차트 느낌)
interface DefThemeTokens {
  pageBg: string;
  paperBg: string;
  inkPrimary: string;
  inkSecondary: string;
  inkMuted: string;
  borderSoft: string;
  borderStrong: string;
  dotPattern: string;
  accent: string;
}

const DEF_THEME_LIGHT: DefThemeTokens = {
  pageBg: '#F7F7F2',
  paperBg: '#FAFAFA',
  inkPrimary: '#0A1929',
  inkSecondary: '#2F3A49',
  inkMuted: '#6B7380',
  borderSoft: 'rgba(10,25,41,0.08)',
  borderStrong: 'rgba(10,25,41,0.16)',
  dotPattern: 'rgba(10,25,41,0.05)',
  accent: '#0099DD',
};

const DEF_THEME_DARK: DefThemeTokens = {
  pageBg: '#0a0e1a',
  paperBg: '#0f1524',
  inkPrimary: '#edf0f7',
  inkSecondary: '#c0c8dc',
  inkMuted: '#8994A8',
  borderSoft: 'rgba(255,255,255,0.06)',
  borderStrong: 'rgba(255,255,255,0.12)',
  dotPattern: 'rgba(255,255,255,0.04)',
  accent: '#0099DD',
};

// ---------- 내부 컴포넌트: SectionLabel ----------
// 기술 문서 스타일의 섹션 헤더 — [NN] LABEL ─────── Title
interface SectionLabelProps {
  number: string;
  label: string;
  title: string;
  desc?: React.ReactNode;
  d: DefThemeTokens;
}

const SectionLabel = ({ number, label, title, desc, d }: SectionLabelProps) => (
  <div className="mb-8">
    <div className="flex items-center gap-3 mb-4">
      <span
        className="font-mono text-caption font-bold"
        style={{
          color: d.accent,
          backgroundColor: 'transparent',
          padding: '2px 8px',
          border: `1px solid ${d.accent}`,
          borderRadius: 2,
          letterSpacing: '0.05em',
        }}
      >
        {number}
      </span>
      <span
        className="font-mono text-caption uppercase"
        style={{ color: d.inkMuted, letterSpacing: '0.2em' }}
      >
        {label}
      </span>
      <div className="flex-1 h-px" style={{ backgroundColor: d.borderSoft }} />
    </div>
    <h2
      className="font-bold mb-3"
      style={{
        color: d.inkPrimary,
        fontSize: '30px',
        letterSpacing: '-0.02em',
        lineHeight: 1.15,
      }}
    >
      {title}
    </h2>
    {desc && (
      <p
        className="text-body-2"
        style={{ color: d.inkSecondary, lineHeight: 1.65, maxWidth: '640px' }}
      >
        {desc}
      </p>
    )}
  </div>
);

// ---------- 내부 컴포넌트: PaperCard ----------
// 라이트/다크 양쪽에서 "종이 같은" 카드 — 웜 배경 + 도트 그리드
interface PaperCardProps {
  children: React.ReactNode;
  d: DefThemeTokens;
  label?: string;
  className?: string;
  style?: React.CSSProperties;
}

const PaperCard = ({ children, d, label, className = '', style = {} }: PaperCardProps) => (
  <div
    className={`relative rounded-lg overflow-hidden ${className}`}
    style={{
      backgroundColor: d.paperBg,
      border: `1px solid ${d.borderSoft}`,
      backgroundImage: `radial-gradient(circle at 1px 1px, ${d.dotPattern} 1px, transparent 0)`,
      backgroundSize: '24px 24px',
      ...style,
    }}
  >
    {label && (
      <div className="absolute top-4 left-4 flex items-center gap-2 z-10">
        <div
          style={{ width: 6, height: 6, borderRadius: '50%', backgroundColor: d.accent }}
        />
        <span
          className="font-mono text-caption uppercase"
          style={{ color: d.inkMuted, letterSpacing: '0.2em' }}
        >
          {label}
        </span>
      </div>
    )}
    {children}
  </div>
);

// ---------- 내부 컴포넌트: ChipRow ----------
// 컬러 칩 + 역할 + 토큰 + hex + rgb
interface ChipRowProps {
  hex: string;
  role: string;
  gray?: string;
  d: DefThemeTokens;
  subdued?: boolean;
}

const ChipRow = ({ hex, role, gray, d, subdued = false }: ChipRowProps) => (
  <div
    className="flex items-center gap-4 py-2.5"
    style={{
      borderBottom: `1px solid ${d.borderSoft}`,
      opacity: subdued ? 0.7 : 1,
    }}
  >
    <div
      style={{
        width: 36,
        height: 24,
        backgroundColor: hex,
        border: `1px solid ${d.borderSoft}`,
        borderRadius: 2,
        flexShrink: 0,
      }}
    />
    <span
      className="text-body-2 font-semibold"
      style={{ color: d.inkPrimary, minWidth: 160 }}
    >
      {role}
    </span>
    {gray && (
      <span
        className="font-mono text-caption"
        style={{ color: d.inkMuted, minWidth: 90 }}
      >
        {gray}
      </span>
    )}
    <span
      className="font-mono text-caption font-semibold ml-auto"
      style={{ color: d.inkPrimary }}
    >
      {hex.toUpperCase()}
    </span>
    <span
      className="font-mono text-caption"
      style={{ color: d.inkMuted, minWidth: 130, textAlign: 'right' }}
    >
      {hexToRgb(hex)}
    </span>
  </div>
);

// ---------- 내부 컴포넌트: DualModeSection ----------

interface DualModeSectionProps {
  lightBg?: string;
  darkBg?: string;
  lightContent: React.ReactNode;
  darkContent: React.ReactNode;
  lightSpecs: React.ReactNode;
  darkSpecs: React.ReactNode;
}

export const DualModeSection = ({
  lightBg = '#F5F5F5',
  darkBg = '#121418',
  lightContent,
  darkContent,
  lightSpecs,
  darkSpecs,
}: DualModeSectionProps) => (
  <div>
    {/* 상단: Light/Dark 시각 영역 */}
    <div className="grid grid-cols-2 rounded-lg overflow-hidden" style={{ minHeight: '200px' }}>
      <div className="relative p-6" style={{ backgroundColor: lightBg }}>
        <span
          className="absolute top-3 left-3 px-2 py-1 text-caption font-semibold rounded"
          style={{ border: '1px solid #e5e7eb', color: '#1e293b', backgroundColor: '#fff' }}
        >
          Light Mode
        </span>
        <div className="flex items-center justify-center h-full pt-6">{lightContent}</div>
      </div>
      <div className="relative p-6" style={{ backgroundColor: darkBg }}>
        <span
          className="absolute top-3 left-3 px-2 py-1 text-caption font-semibold rounded"
          style={{ backgroundColor: '#374151', color: '#fff', border: '1px solid rgba(255,255,255,0.1)' }}
        >
          Dark Mode
        </span>
        <div className="flex items-center justify-center h-full pt-6">{darkContent}</div>
      </div>
    </div>
    {/* 하단: 색상 스펙 테이블 */}
    <div className="grid grid-cols-2">
      <div>{lightSpecs}</div>
      <div style={{ backgroundColor: '#000' }}>{darkSpecs}</div>
    </div>
  </div>
);

// ---------- 내부 컴포넌트: ColorSpecRow ----------

interface ColorSpecRowProps {
  role: string;
  gray: string;
  hex: string;
  dark?: boolean;
}

export const ColorSpecRow = ({ role, gray, hex, dark = false }: ColorSpecRowProps) => (
  <div
    className="flex items-center gap-4 px-4 py-3"
    style={{
      borderBottom: `1px solid ${dark ? 'rgba(255,255,255,0.08)' : '#e5e7eb'}`,
      color: dark ? '#e5e7eb' : '#1e293b',
    }}
  >
    <div
      style={{
        width: 20,
        height: 20,
        borderRadius: 4,
        backgroundColor: hex,
        border: `1px solid ${dark ? 'rgba(255,255,255,0.1)' : '#e5e7eb'}`,
        flexShrink: 0,
      }}
    />
    <span className="text-body-2 font-semibold" style={{ minWidth: 120 }}>{role}</span>
    <span className="font-mono text-caption font-bold" style={{ minWidth: 80 }}>{gray}</span>
    <span className="font-mono text-caption">{hex}</span>
    <span
      className="font-mono text-caption"
      style={{ color: dark ? 'rgba(255,255,255,0.5)' : '#94a3b8' }}
    >
      {hexToRgb(hex)}
    </span>
  </div>
);

// ---------- Props ----------

interface ColorPaletteContentProps {
  theme: DesignTheme;
}

// ---------- 컴포넌트 ----------

export const ColorPaletteContent = ({ theme }: ColorPaletteContentProps) => {
  const t = theme;
  const isDark = t.mode === 'dark';
  const [activeColorTab, setActiveColorTab] = useState<'rule' | 'definition' | 'token'>('rule');

  const dividerColor = isDark ? 'rgba(255,255,255,0.08)' : '#e5e7eb';
  const d: DefThemeTokens = isDark ? DEF_THEME_DARK : DEF_THEME_LIGHT;

  return (
    <div className="p-12" style={{ color: t.textPrimary }}>
      <div style={{ maxWidth: '64rem' }}>
        {/* ── 섹션 1: 헤더 ── */}
        <div className="pb-10 mb-12 border-b border-solid" style={{ borderColor: dividerColor }}>
          <p
            className="font-mono text-body-2 uppercase tracking-widest mb-3"
            style={{ color: t.textAccent }}
          >
            Foundations
          </p>
          <h1 className="text-4xl font-bold mb-4" style={{ color: t.textPrimary }}>
            Color
          </h1>
          <p className="text-lg" style={{ color: t.textSecondary }}>
            브랜드 아이덴티티를 유지하기 위한 컬러 사용 기준입니다. <br />
            핵심 정보를 강조하고 현재 상태를 명확하게 전달합니다.
          </p>
        </div>

        {/* 탭 전환 */}
        <div className="flex gap-1 mb-10" style={{ borderBottom: `1px solid ${dividerColor}` }}>
          {(['rule', 'definition', 'token'] as const).map((tab) => {
            const isActive = activeColorTab === tab;
            const label = tab === 'rule' ? 'Rule' : tab === 'definition' ? 'Definition' : 'Token';
            return (
              <button
                key={tab}
                onClick={() => setActiveColorTab(tab)}
                className="px-5 py-2.5 text-body-2 font-semibold border-none cursor-pointer bg-transparent"
                style={{
                  color: isActive ? t.textAccent : t.textMuted,
                  borderBottom: isActive ? `2px solid ${t.textAccent}` : '2px solid transparent',
                }}
              >
                {label}
              </button>
            );
          })}
        </div>

        {/* ── Rule 탭 콘텐츠 ── */}
        {activeColorTab === 'rule' && (
          <div className="mb-16">
            {/* 네이밍 공식 */}
            <div className="mb-12">
              <h2 className="text-xl font-bold mb-3" style={{ color: t.textPrimary }}>
                네이밍 공식
              </h2>
              <div
                className="rounded-lg px-6 py-5 font-mono text-lg font-bold mb-4"
                style={{
                  backgroundColor: isDark ? 'rgba(255,255,255,0.03)' : '#f5f5f5',
                  color: t.textAccent,
                }}
              >
                --{'{property}'}-{'{role}'}[-{'{variant}'}]
              </div>
              <p className="text-body-2 leading-relaxed" style={{ color: t.textSecondary }}>
                모든 컬러 토큰은{' '}
                <strong style={{ color: t.textPrimary }}>Property-Role-Variant</strong> 3계층 구조를
                따릅니다. Property는 색상이 적용되는 CSS 속성, Role은 의미 기반 역할, Variant는 상태
                수식어입니다.
              </p>
            </div>

            {/* Property */}
            <div className="mb-12">
              <h2 className="text-xl font-bold mb-4" style={{ color: t.textPrimary }}>
                Property (기본 속성)
              </h2>
              <div
                className="rounded-lg overflow-hidden"
                style={{ border: `1px solid ${dividerColor}` }}
              >
                {[
                  {
                    prop: 'fg',
                    desc: '텍스트, 아이콘 등 UI의 전경 요소에 사용하는 색상입니다.',
                    css: 'color',
                    example: '--fg-default, --fg-sub',
                  },
                  {
                    prop: 'bg',
                    desc: '전체 화면 또는 UI의 배경에 사용하는 색상입니다.',
                    css: 'background',
                    example: '--bg-surface, --bg-card',
                  },
                  {
                    prop: 'stroke',
                    desc: '경계를 구분하는 선 또는 UI 요소의 윤곽선에 사용하는 색상입니다.',
                    css: 'border, outline',
                    example: '--stroke-default, --stroke-light',
                  },
                ].map((row, i) => (
                  <div
                    key={row.prop}
                    className="flex items-center gap-6 px-5 py-4"
                    style={{
                      borderTop: i > 0 ? `1px solid ${dividerColor}` : undefined,
                      backgroundColor: isDark ? 'rgba(255,255,255,0.02)' : '#fafafa',
                    }}
                  >
                    <span
                      className="font-mono text-body-2 font-bold shrink-0 w-16"
                      style={{ color: t.textAccent }}
                    >
                      {row.prop}
                    </span>
                    <div className="flex-1">
                      <div className="text-body-2" style={{ color: t.textSecondary }}>
                        {row.desc}
                      </div>
                    </div>
                    <span className="font-mono text-caption" style={{ color: t.textMuted }}>
                      {row.example}
                    </span>
                  </div>
                ))}
              </div>
            </div>

            {/* Role & Variant */}
            <div className="mb-12">
              <h2 className="text-xl font-bold mb-4" style={{ color: t.textPrimary }}>
                Role (역할) & Variant (변형)
              </h2>
              <div className="grid grid-cols-2 gap-6">
                {/* Role */}
                <div
                  className="rounded-lg overflow-hidden"
                  style={{ border: `1px solid ${dividerColor}` }}
                >
                  <div
                    className="px-5 py-3 text-caption font-bold uppercase tracking-wider"
                    style={{
                      backgroundColor: isDark ? 'rgba(255,255,255,0.04)' : '#f1f5f9',
                      color: t.textMuted,
                    }}
                  >
                    Role
                  </div>
                  {[
                    { name: 'default', desc: '기본 상태' },
                    { name: 'sub', desc: '보조, 2차 계층' },
                    { name: 'disabled', desc: '비활성, 플레이스홀더' },
                    { name: 'base', desc: '최하단 배경' },
                    { name: 'surface', desc: '패널, 컨테이너' },
                    { name: 'elevated', desc: '부각된 영역' },
                    { name: 'card', desc: '카드, 플로팅' },
                    { name: 'overlay', desc: '오버레이, 딤' },
                  ].map((row) => (
                    <div
                      key={row.name}
                      className="flex items-center justify-between px-5 py-2.5"
                      style={{
                        borderTop: `1px solid ${dividerColor}`,
                        backgroundColor: isDark ? 'rgba(255,255,255,0.02)' : '#fafafa',
                      }}
                    >
                      <span
                        className="font-mono text-body-2 font-semibold"
                        style={{ color: t.textPrimary }}
                      >
                        {row.name}
                      </span>
                      <span className="text-caption" style={{ color: t.textMuted }}>
                        {row.desc}
                      </span>
                    </div>
                  ))}
                </div>

                {/* Variant */}
                <div
                  className="rounded-lg overflow-hidden"
                  style={{ border: `1px solid ${dividerColor}` }}
                >
                  <div
                    className="px-5 py-3 text-caption font-bold uppercase tracking-wider"
                    style={{
                      backgroundColor: isDark ? 'rgba(255,255,255,0.04)' : '#f1f5f9',
                      color: t.textMuted,
                    }}
                  >
                    Variant (선택)
                  </div>
                  {[
                    { name: 'hover', desc: '호버 상태' },
                    { name: 'active', desc: '활성/선택 상태' },
                    { name: 'muted', desc: '약한 강도' },
                    { name: 'light', desc: '밝은 변형' },
                    { name: 'subtle', desc: '미묘한 변형' },
                  ].map((row) => (
                    <div
                      key={row.name}
                      className="flex items-center justify-between px-5 py-2.5"
                      style={{
                        borderTop: `1px solid ${dividerColor}`,
                        backgroundColor: isDark ? 'rgba(255,255,255,0.02)' : '#fafafa',
                      }}
                    >
                      <span
                        className="font-mono text-body-2 font-semibold"
                        style={{ color: t.textPrimary }}
                      >
                        {row.name}
                      </span>
                      <span className="text-caption" style={{ color: t.textMuted }}>
                        {row.desc}
                      </span>
                    </div>
                  ))}
                </div>
              </div>
            </div>

            {/* Semantic 토큰 매핑 */}
            <div
              className="mb-12 pt-12 border-t border-solid"
              style={{ borderColor: dividerColor }}
            >
              <h2 className="text-xl font-bold mb-2" style={{ color: t.textPrimary }}>
                Semantic Tokens
              </h2>
              <p className="text-body-2 mb-6" style={{ color: t.textSecondary }}>
                용도에 따라 의미를 부여한 토큰. 테마 전환 시 값이 변경됩니다.
              </p>

              {/* bg, fg, stroke 테이블 */}
              {[
                {
                  title: 'bg — Background',
                  tokens: [
                    {
                      name: '--bg-base',
                      value: '#121418',
                      desc: '페이지 최하단 배경',
                    },
                    {
                      name: '--bg-surface',
                      value: '#1B1E23',
                      desc: '패널, 사이드바',
                    },
                    {
                      name: '--bg-elevated',
                      value: '#24272D',
                      desc: '테이블 헤더, 섹션',
                    },
                    {
                      name: '--bg-card',
                      value: '#24272D',
                      desc: '카드, 플로팅 요소',
                    },
                    {
                      name: '--bg-surface-hover',
                      value: '#3A3F49',
                      desc: '호버 인터랙션',
                    },
                  ],
                },
                {
                  title: 'fg — Foreground',
                  tokens: [
                    { name: '--fg-default', value: '#F8F9FC', desc: '기본 텍스트' },
                    { name: '--fg-sub', value: '#B9C1C9', desc: '보조 텍스트' },
                    {
                      name: '--fg-disabled',
                      value: '#808892',
                      desc: '비활성, 플레이스홀더',
                    },
                  ],
                },
                {
                  title: 'stroke — Border',
                  tokens: [
                    {
                      name: '--stroke-default',
                      value: '#24272D',
                      desc: '기본 구분선',
                    },
                    {
                      name: '--stroke-light',
                      value: '#1B1E23',
                      desc: '연한 구분선',
                    },
                  ],
                },
              ].map((group) => (
                <div key={group.title} className="mb-8">
                  <h3 className="text-body-2 font-bold mb-3" style={{ color: t.textAccent }}>
                    {group.title}
                  </h3>
                  <div
                    className="rounded-lg overflow-hidden"
                    style={{ border: `1px solid ${dividerColor}` }}
                  >
                    {/* 헤더 */}
                    <div
                      className="grid grid-cols-[1fr_1fr_80px_1fr] gap-2 px-4 py-2.5 text-caption font-bold uppercase tracking-wider"
                      style={{
                        backgroundColor: isDark ? 'rgba(255,255,255,0.04)' : '#f1f5f9',
                        color: t.textMuted,
                      }}
                    >
                      <span>New</span>
                      <span>설명</span>
                      <span>Value</span>
                      <span>Preview</span>
                    </div>
                    {group.tokens.map((tk) => (
                      <div
                        key={tk.name}
                        className="grid grid-cols-[1fr_1fr_80px_1fr] gap-2 items-center px-4 py-3"
                        style={{
                          borderTop: `1px solid ${dividerColor}`,
                          backgroundColor: isDark ? 'rgba(255,255,255,0.02)' : '#fafafa',
                        }}
                      >
                        <span
                          className="font-mono text-caption font-semibold"
                          style={{ color: t.textPrimary }}
                        >
                          {tk.name}
                        </span>
                        <span className="text-caption" style={{ color: t.textMuted }}>
                          {tk.desc}
                        </span>
                        <span className="font-mono text-caption" style={{ color: t.textSecondary }}>
                          {tk.value}
                        </span>
                        <div className="flex items-center gap-2">
                          <div
                            style={{
                              width: 20,
                              height: 20,
                              borderRadius: 4,
                              backgroundColor: tk.value,
                              border: `1px solid ${dividerColor}`,
                              flexShrink: 0,
                            }}
                          />
                          <span className="font-mono text-caption" style={{ color: t.textMuted }}>
                            {hexToRgb(tk.value)}
                          </span>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              ))}
            </div>

            {/* Palette 토큰 매핑 */}
            <div
              className="mb-12 pt-12 border-t border-solid"
              style={{ borderColor: dividerColor }}
            >
              <h2 className="text-xl font-bold mb-2" style={{ color: t.textPrimary }}>
                Palette Tokens
              </h2>
              <p className="text-body-2 mb-6" style={{ color: t.textSecondary }}>
                fg · bg · stroke 모든 맥락에서 사용되는 색상 원본. Property 접두사 없이{' '}
                <code className="font-mono" style={{ color: t.textAccent }}>
                  --color-*
                </code>{' '}
                로 참조합니다.
              </p>

              <div
                className="rounded-lg overflow-hidden"
                style={{ border: `1px solid ${dividerColor}` }}
              >
                <div
                  className="grid grid-cols-[1fr_80px_1fr_1fr] gap-2 px-4 py-2.5 text-caption font-bold uppercase tracking-wider"
                  style={{
                    backgroundColor: isDark ? 'rgba(255,255,255,0.04)' : '#f1f5f9',
                    color: t.textMuted,
                  }}
                >
                  <span>New</span>
                  <span>Value</span>
                  <span>Preview</span>
                  <span>설명</span>
                </div>
                {[
                  { name: '--color-accent', value: '#0099DD', desc: '주요 강조' },
                  { name: '--color-accent-muted', value: '#007AB1', desc: '차분한 강조' },
                  { name: '--color-info', value: '#0099DD', desc: '정보' },
                  { name: '--color-danger', value: '#D61111', desc: '위험' },
                  { name: '--color-warning', value: '#f97316', desc: '주의' },
                  { name: '--color-caution', value: '#FEDA4A', desc: '경고' },
                  { name: '--color-success', value: '#22c55e', desc: '성공' },
                  {
                    name: '--color-tertiary',
                    value: '#a855f7',
                    desc: '3차 강조',
                  },
                  {
                    name: '--color-boom',
                    value: '#f59e0b',
                    desc: '오일붐 (도메인)',
                  },
                  {
                    name: '--color-boom-hover',
                    value: '#fbbf24',
                    desc: '오일붐 호버',
                  },
                  {
                    name: '--color-navy',
                    value: '#1e40af',
                    desc: 'Navy 강조',
                  },
                  {
                    name: '--color-navy-hover',
                    value: '#1d4ed8',
                    desc: 'Navy 호버',
                  },
                ].map((tk) => (
                  <div
                    key={tk.name}
                    className="grid grid-cols-[1fr_80px_1fr_1fr] gap-2 items-center px-4 py-3"
                    style={{
                      borderTop: `1px solid ${dividerColor}`,
                      backgroundColor: isDark ? 'rgba(255,255,255,0.02)' : '#fafafa',
                    }}
                  >
                    <span
                      className="font-mono text-caption font-semibold"
                      style={{ color: t.textPrimary }}
                    >
                      {tk.name}
                    </span>
                    <span className="font-mono text-caption" style={{ color: t.textSecondary }}>
                      {tk.value}
                    </span>
                    <div className="flex items-center gap-2">
                      <div
                        style={{
                          width: 20,
                          height: 20,
                          borderRadius: 4,
                          backgroundColor: tk.value,
                          border: `1px solid ${dividerColor}`,
                          flexShrink: 0,
                        }}
                      />
                      <span className="font-mono text-caption" style={{ color: t.textMuted }}>
                        {hexToRgb(tk.value)}
                      </span>
                    </div>
                    <span className="text-caption" style={{ color: t.textMuted }}>
                      {tk.desc}
                    </span>
                  </div>
                ))}
              </div>
            </div>

            {/* Non-color 토큰 */}
            <div
              className="mb-12 pt-12 border-t border-solid"
              style={{ borderColor: dividerColor }}
            >
              <h2 className="text-xl font-bold mb-2" style={{ color: t.textPrimary }}>
                Non-color Tokens
              </h2>
              <p className="text-body-2 mb-6" style={{ color: t.textSecondary }}>
                타이포그래피, 라운딩 등 색상 외 토큰.
              </p>

              <div
                className="rounded-lg overflow-hidden"
                style={{ border: `1px solid ${dividerColor}` }}
              >
                <div
                  className="grid grid-cols-[1fr_1fr_1fr] gap-2 px-4 py-2.5 text-caption font-bold uppercase tracking-wider"
                  style={{
                    backgroundColor: isDark ? 'rgba(255,255,255,0.04)' : '#f1f5f9',
                    color: t.textMuted,
                  }}
                >
                  <span>New</span>
                  <span>Category</span>
                  <span>설명</span>
                </div>
                {[
                  {
                    name: '--font-korean',
                    category: 'Typography',
                    desc: '한국어 UI 폰트 스택',
                  },
                  {
                    name: '--font-mono',
                    category: 'Typography',
                    desc: '수치/데이터 폰트 스택',
                  },
                  {
                    name: '--radius-sm',
                    category: 'Radius',
                    desc: '작은 라운딩 (6px)',
                  },
                  {
                    name: '--radius-md',
                    category: 'Radius',
                    desc: '중간 라운딩 (8px)',
                  },
                ].map((tk) => (
                  <div
                    key={tk.name}
                    className="grid grid-cols-[1fr_1fr_1fr] gap-2 items-center px-4 py-3"
                    style={{
                      borderTop: `1px solid ${dividerColor}`,
                      backgroundColor: isDark ? 'rgba(255,255,255,0.02)' : '#fafafa',
                    }}
                  >
                    <span
                      className="font-mono text-caption font-semibold"
                      style={{ color: t.textPrimary }}
                    >
                      {tk.name}
                    </span>
                    <span
                      className="text-caption font-mono px-2 py-0.5 rounded"
                      style={{
                        color: t.textAccent,
                        backgroundColor: isDark ? 'rgba(6,182,212,0.05)' : 'rgba(6,182,212,0.08)',
                      }}
                    >
                      {tk.category}
                    </span>
                    <span className="text-caption" style={{ color: t.textMuted }}>
                      {tk.desc}
                    </span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        )}

        {/* ── Definition 탭 콘텐츠 ── */}
        {activeColorTab === 'definition' && (
          <div className="space-y-20">
            {/* ═════════ 01 · Foundation · Primary ═════════ */}
            <section>
              <SectionLabel
                number="01"
                label="Foundation"
                title="Primary · Current"
                desc="해양 아이덴티티의 핵심 — Blue-Cyan 중간톤(hue ~200°, base #0099DD). 주요 액션, 선택 상태, 링크, 정상 데이터에 사용됩니다."
                d={d}
              />
              <PaperCard d={d} label="Primary Scale · 100 → 900">
                <div className="p-6 pt-14">
                  <div className="flex rounded overflow-hidden" style={{ border: `1px solid ${d.borderSoft}` }}>
                    {PRIMARY_SCALE.map(({ step, color }) => (
                      <div key={step} className="flex-1 flex flex-col justify-end" style={{ backgroundColor: color, height: 120, padding: '8px 6px' }}>
                        <span className="font-mono font-bold" style={{ color: step <= 300 ? '#001F2D' : '#FFFFFF', fontSize: '10px' }}>{step}</span>
                        {step === 500 && (
                          <span className="font-mono font-bold mt-1" style={{ color: '#FFFFFF', fontSize: '9px', letterSpacing: '0.1em' }}>▲ BASE</span>
                        )}
                      </div>
                    ))}
                  </div>
                  <div className="mt-6">
                    {PRIMARY_SCALE.map(({ step, color }) => (
                      <ChipRow
                        key={step}
                        hex={color}
                        role={`Primary ${step}${step === 500 ? ' · base' : ''}`}
                        d={d}
                        subdued={step !== 500 && step !== 600 && step !== 300}
                      />
                    ))}
                  </div>
                </div>
              </PaperCard>
            </section>

            {/* ═════════ 02 · Foundation · Grayscale ═════════ */}
            <section>
              <SectionLabel
                number="02"
                label="Foundation"
                title="Grayscale"
                desc="쿨톤 회색조. 정보 계층과 깊이감의 기본 — 배경·텍스트·구분선에 사용되어 다른 색을 지지합니다."
                d={d}
              />
              <div className="grid grid-cols-2 gap-4">
                <PaperCard d={DEF_THEME_LIGHT} label="Light · Paper">
                  <div className="p-6 pt-14">
                    {GRAY_SCALE.map(({ step, color }) => (
                      <div key={step} className="flex items-center gap-3 py-1.5" style={{ borderBottom: `1px solid ${DEF_THEME_LIGHT.borderSoft}` }}>
                        <div style={{ width: 40, height: 20, backgroundColor: color, border: step === 0 ? `1px solid ${DEF_THEME_LIGHT.borderStrong}` : 'none', borderRadius: 2, flexShrink: 0 }} />
                        <span className="font-mono text-caption font-semibold" style={{ color: DEF_THEME_LIGHT.inkPrimary, minWidth: 70 }}>Gray {step}</span>
                        <span className="font-mono text-caption ml-auto" style={{ color: DEF_THEME_LIGHT.inkMuted }}>{color.toUpperCase()}</span>
                      </div>
                    ))}
                  </div>
                </PaperCard>
                <PaperCard d={DEF_THEME_DARK} label="Dark · Abyssal">
                  <div className="p-6 pt-14">
                    {GRAY_SCALE.map(({ step, color }) => (
                      <div key={step} className="flex items-center gap-3 py-1.5" style={{ borderBottom: `1px solid ${DEF_THEME_DARK.borderSoft}` }}>
                        <div style={{ width: 40, height: 20, backgroundColor: color, border: step === 1000 ? `1px solid ${DEF_THEME_DARK.borderStrong}` : 'none', borderRadius: 2, flexShrink: 0 }} />
                        <span className="font-mono text-caption font-semibold" style={{ color: DEF_THEME_DARK.inkPrimary, minWidth: 70 }}>Gray {step}</span>
                        <span className="font-mono text-caption ml-auto" style={{ color: DEF_THEME_DARK.inkMuted }}>{color.toUpperCase()}</span>
                      </div>
                    ))}
                  </div>
                </PaperCard>
              </div>
            </section>

            {/* ═════════ 03 · Application · Text ═════════ */}
            <section>
              <SectionLabel
                number="03"
                label="Application"
                title="Text · Hierarchy"
                desc="타이틀·서브·부가정보·캡션 4단 계층으로 정보 우선순위를 표현합니다."
                d={d}
              />
              <div className="grid grid-cols-2 gap-4">
                <PaperCard d={DEF_THEME_LIGHT} label="Light · 샘플">
                  <div className="p-6 pt-14">
                    <div style={{ fontSize: '32px', fontWeight: 700, color: DEF_THEME_LIGHT.inkPrimary, letterSpacing: '-0.02em' }}>유출량 12,000 kL</div>
                    <div className="mt-1" style={{ color: TEXT_COLORS.light[1].hex, fontSize: '15px', fontWeight: 600 }}>서해 인천항 남방 3.2해리</div>
                    <div className="mt-3 flex gap-4 text-caption" style={{ color: TEXT_COLORS.light[2].hex }}>
                      <span>감지: 2026-04-16 14:23</span>
                      <span>· 경과: 2시간 41분</span>
                    </div>
                    <div className="mt-1 text-caption" style={{ color: TEXT_COLORS.light[3].hex }}>최종 업데이트 34초 전</div>
                    <div className="mt-6 pt-4" style={{ borderTop: `1px solid ${DEF_THEME_LIGHT.borderSoft}` }}>
                      {TEXT_COLORS.light.map((s) => (
                        <ChipRow key={s.role} hex={s.hex} role={s.role} gray={s.gray} d={DEF_THEME_LIGHT} />
                      ))}
                    </div>
                  </div>
                </PaperCard>
                <PaperCard d={DEF_THEME_DARK} label="Dark · 샘플">
                  <div className="p-6 pt-14">
                    <div style={{ fontSize: '32px', fontWeight: 700, color: DEF_THEME_DARK.inkPrimary, letterSpacing: '-0.02em' }}>유출량 12,000 kL</div>
                    <div className="mt-1" style={{ color: TEXT_COLORS.dark[1].hex, fontSize: '15px', fontWeight: 600 }}>서해 인천항 남방 3.2해리</div>
                    <div className="mt-3 flex gap-4 text-caption" style={{ color: TEXT_COLORS.dark[2].hex }}>
                      <span>감지: 2026-04-16 14:23</span>
                      <span>· 경과: 2시간 41분</span>
                    </div>
                    <div className="mt-1 text-caption" style={{ color: TEXT_COLORS.dark[3].hex }}>최종 업데이트 34초 전</div>
                    <div className="mt-6 pt-4" style={{ borderTop: `1px solid ${DEF_THEME_DARK.borderSoft}` }}>
                      {TEXT_COLORS.dark.map((s) => (
                        <ChipRow key={s.role} hex={s.hex} role={s.role} gray={s.gray} d={DEF_THEME_DARK} />
                      ))}
                    </div>
                  </div>
                </PaperCard>
              </div>
            </section>

            {/* ═════════ 04 · Application · Background ═════════ */}
            <section>
              <SectionLabel
                number="04"
                label="Application"
                title="Background · Layering"
                desc="배경색은 깊이와 계층을 구성합니다. 라이트는 단일 톤, 다크는 2단(Background + Bottom Sheet)으로 운영."
                d={d}
              />
              <div className="grid grid-cols-2 gap-4">
                <PaperCard d={DEF_THEME_LIGHT} label="Light">
                  <div className="p-6 pt-14">
                    <div className="rounded-lg mb-3" style={{ height: 90, backgroundColor: BG_COLORS.light[0].hex, border: `1px solid ${DEF_THEME_LIGHT.borderSoft}` }}>
                      <div className="p-4">
                        <span className="font-mono text-caption" style={{ color: DEF_THEME_LIGHT.inkMuted }}>Background</span>
                      </div>
                    </div>
                    {BG_COLORS.light.map((s) => (
                      <ChipRow key={s.role} hex={s.hex} role={s.role} gray={s.gray} d={DEF_THEME_LIGHT} />
                    ))}
                  </div>
                </PaperCard>
                <PaperCard d={DEF_THEME_DARK} label="Dark">
                  <div className="p-6 pt-14">
                    <div className="flex gap-3 mb-4">
                      <div className="flex-1 rounded-lg" style={{ height: 90, backgroundColor: BG_COLORS.dark[0].hex, border: `1px solid ${DEF_THEME_DARK.borderSoft}` }}>
                        <div className="p-3"><span className="font-mono text-caption" style={{ color: DEF_THEME_DARK.inkMuted }}>Background</span></div>
                      </div>
                      <div className="flex-1 rounded-lg" style={{ height: 90, backgroundColor: BG_COLORS.dark[1].hex, border: `1px solid ${DEF_THEME_DARK.borderSoft}` }}>
                        <div className="p-3"><span className="font-mono text-caption" style={{ color: DEF_THEME_DARK.inkMuted }}>Bottom Sheet</span></div>
                      </div>
                    </div>
                    {BG_COLORS.dark.map((s) => (
                      <ChipRow key={s.role} hex={s.hex} role={s.role} gray={s.gray} d={DEF_THEME_DARK} />
                    ))}
                  </div>
                </PaperCard>
              </div>
            </section>

            {/* ═════════ 05 · Application · Line ═════════ */}
            <section>
              <SectionLabel
                number="05"
                label="Application"
                title="Line · Separation"
                desc="디바이더(가장 연함) → Accent Line → Line(가장 진함) 3단 구조로 시각적 분리 강도를 제어합니다."
                d={d}
              />
              <div className="grid grid-cols-2 gap-4">
                {[
                  { themeD: DEF_THEME_LIGHT, data: LINE_COLORS.light, label: 'Light' },
                  { themeD: DEF_THEME_DARK, data: LINE_COLORS.dark, label: 'Dark' },
                ].map((col) => (
                  <PaperCard key={col.label} d={col.themeD} label={col.label}>
                    <div className="p-6 pt-14">
                      <div className="space-y-4 mb-6">
                        {col.data.map((s) => (
                          <div key={s.role}>
                            <div className="flex items-center justify-between mb-1">
                              <span className="text-caption font-semibold" style={{ color: col.themeD.inkSecondary }}>{s.role}</span>
                              <span className="font-mono text-caption" style={{ color: col.themeD.inkMuted }}>{s.gray}</span>
                            </div>
                            <div style={{ height: 1, backgroundColor: s.hex, width: '100%' }} />
                          </div>
                        ))}
                      </div>
                      {col.data.map((s) => (
                        <ChipRow key={s.role} hex={s.hex} role={s.role} gray={s.gray} d={col.themeD} />
                      ))}
                    </div>
                  </PaperCard>
                ))}
              </div>
            </section>

            {/* ═════════ 06 · Meaning · Semantic ═════════ */}
            <section>
              <SectionLabel
                number="06"
                label="Meaning"
                title="Semantic"
                desc="UI 요소의 기능이나 정보 유형에 따라 의미를 전달하는 색상. 일관된 사용이 인지 부하를 낮춥니다."
                d={d}
              />
              <PaperCard d={d}>
                <div className="p-6 pt-14">
                  <div className="grid grid-cols-2 gap-3">
                    {SEMANTIC_COLORS.map((sc) => {
                      const isBright = sc.hex === '#FBD8DC' || sc.hex === '#FEDA4A';
                      return (
                        <div key={sc.name} className="rounded-lg overflow-hidden" style={{ border: `1px solid ${d.borderSoft}` }}>
                          <div style={{ backgroundColor: sc.hex, padding: '16px 18px', borderBottom: `1px solid ${d.borderSoft}` }}>
                            <div className="flex items-start justify-between">
                              <span className="text-body-1 font-bold" style={{ color: isBright ? '#0A1929' : '#FFFFFF', letterSpacing: '-0.01em' }}>{sc.name}</span>
                              <span className="font-mono text-caption font-semibold" style={{ color: isBright ? '#0A1929' : 'rgba(255,255,255,0.9)' }}>{sc.hex.toUpperCase()}</span>
                            </div>
                          </div>
                          <div className="p-4" style={{ backgroundColor: d.paperBg }}>
                            {sc.usages.map((u) => (
                              <div key={u} className="flex items-start gap-2 text-body-2" style={{ color: d.inkSecondary, lineHeight: 1.7 }}>
                                <span style={{ color: d.accent }}>—</span>
                                <span>{u}</span>
                              </div>
                            ))}
                          </div>
                        </div>
                      );
                    })}
                  </div>
                </div>
              </PaperCard>
            </section>

            {/* ═════════ 07 · Meaning · Positive ═════════ */}
            <section>
              <SectionLabel
                number="07"
                label="Meaning"
                title="Positive · Confirmation"
                desc="긍정 상태, 확인된 작업, 안전 신호. Primary 색상 계열 사용."
                d={d}
              />
              <div className="grid grid-cols-2 gap-4">
                {[
                  { themeD: DEF_THEME_LIGHT, c: POSITIVE_COLOR.light, label: 'Light' },
                  { themeD: DEF_THEME_DARK, c: POSITIVE_COLOR.dark, label: 'Dark' },
                ].map((col) => (
                  <PaperCard key={col.label} d={col.themeD} label={col.label}>
                    <div className="p-6 pt-14">
                      <div className="mb-6">
                        <div className="text-caption font-semibold mb-2" style={{ color: col.themeD.inkSecondary }}>구역 지정</div>
                        <div className="flex items-center gap-2 px-3 py-2 rounded-sm" style={{ border: `1.5px solid ${col.c.hex}`, backgroundColor: col.themeD.paperBg }}>
                          <span className="text-body-2" style={{ color: col.themeD.inkPrimary }}>인천항 방제구역 A-3</span>
                          <div style={{ width: 2, height: 14, backgroundColor: col.c.hex, marginLeft: 2 }} />
                        </div>
                        <div className="text-caption mt-1 flex items-center gap-1" style={{ color: col.c.hex }}>
                          <span>✓</span>
                          <span>구역 확인됨</span>
                        </div>
                      </div>
                      <ChipRow hex={col.c.hex} role="긍정" gray={col.c.label} d={col.themeD} />
                    </div>
                  </PaperCard>
                ))}
              </div>
            </section>

            {/* ═════════ 08 · Meaning · Negative ═════════ */}
            <section>
              <SectionLabel
                number="08"
                label="Meaning"
                title="Negative · Critical"
                desc="오류·위험·되돌릴 수 없는 작업. 어둡고 무거운 톤으로 주의를 강제합니다."
                d={d}
              />
              <div className="grid grid-cols-2 gap-4">
                {[
                  { themeD: DEF_THEME_LIGHT, c: NEGATIVE_COLOR.light, label: 'Light' },
                  { themeD: DEF_THEME_DARK, c: NEGATIVE_COLOR.dark, label: 'Dark' },
                ].map((col) => (
                  <PaperCard key={col.label} d={col.themeD} label={col.label}>
                    <div className="p-6 pt-14">
                      <div className="mb-6">
                        <div className="text-caption font-semibold mb-2" style={{ color: col.themeD.inkSecondary }}>좌표 입력</div>
                        <div className="flex items-center gap-2 px-3 py-2 rounded-sm" style={{ border: `1.5px solid ${col.c.hex}`, backgroundColor: col.themeD.paperBg }}>
                          <span className="font-mono text-body-2" style={{ color: col.themeD.inkPrimary }}>126.590,invalid</span>
                          <span className="ml-auto" style={{ color: col.c.hex, fontSize: 14 }}>⊗</span>
                        </div>
                        <div className="text-caption mt-1 flex items-center gap-1" style={{ color: col.c.hex }}>
                          <span>⚠</span>
                          <span>유효하지 않은 좌표 형식</span>
                        </div>
                      </div>
                      <ChipRow hex={col.c.hex} role="부정" gray={col.c.label} d={col.themeD} />
                    </div>
                  </PaperCard>
                ))}
              </div>
            </section>

            {/* ═════════ 09 · Meaning · Notice ═════════ */}
            <section>
              <SectionLabel
                number="09"
                label="Meaning"
                title="Notice · Attention"
                desc="주목이 필요한 공지, 업데이트 뱃지. 선명한 톤으로 시선을 유도합니다."
                d={d}
              />
              <div className="grid grid-cols-2 gap-4">
                {[
                  { themeD: DEF_THEME_LIGHT, c: NOTICE_COLOR.light, label: 'Light' },
                  { themeD: DEF_THEME_DARK, c: NOTICE_COLOR.dark, label: 'Dark' },
                ].map((col) => (
                  <PaperCard key={col.label} d={col.themeD} label={col.label}>
                    <div className="p-6 pt-14">
                      <div className="flex items-start gap-3 mb-6 p-4 rounded-lg" style={{ backgroundColor: col.c.bg.hex, border: `1px solid ${col.themeD.borderSoft}` }}>
                        <span className="font-mono text-caption font-bold px-2 py-1 rounded" style={{ backgroundColor: col.c.text.hex, color: '#FFFFFF', letterSpacing: '0.1em' }}>UPDATE</span>
                        <div className="flex-1">
                          <div className="text-body-2 font-semibold" style={{ color: col.c.text.hex }}>v1.6.2 릴리즈 노트</div>
                          <div className="text-caption mt-1" style={{ color: col.themeD.inkSecondary }}>HNS 확산 모델 알고리즘 개선 · AEGL 등농도선 추가</div>
                        </div>
                      </div>
                      <ChipRow hex={col.c.text.hex} role="Text" gray={col.c.text.label} d={col.themeD} />
                      <ChipRow hex={col.c.bg.hex} role="Background" gray={col.c.bg.label} d={col.themeD} />
                    </div>
                  </PaperCard>
                ))}
              </div>
            </section>

            {/* ═════════ 10 · Domain · Maritime ═════════ */}
            <section>
              <SectionLabel
                number="10"
                label="Domain"
                title="Maritime · Operations"
                desc="해양 방제 데이터의 시각화 규약. 색상은 주관이 아니라 데이터의 특성과 목적에 따라 선택됩니다."
                d={d}
              />
              <PaperCard d={d}>
                <div className="p-6 pt-14">
                  <div className="grid grid-cols-3 gap-3">
                    {MARITIME_COLORS.map((mc) => (
                      <div key={mc.role} className="rounded-lg overflow-hidden" style={{ border: `1px solid ${d.borderSoft}` }}>
                        <div style={{ backgroundColor: mc.hex, height: 80, position: 'relative' }}>
                          <span className="absolute bottom-3 left-3 font-mono text-caption font-bold" style={{ color: mc.hex === '#121418' ? '#F8F9FC' : '#FFFFFF', letterSpacing: '0.05em' }}>{mc.label}</span>
                        </div>
                        <div className="p-4" style={{ backgroundColor: d.paperBg }}>
                          <div className="text-body-2 font-bold mb-1" style={{ color: d.inkPrimary }}>{mc.role}</div>
                          <div className="text-caption" style={{ color: d.inkSecondary, lineHeight: 1.6 }}>{mc.desc}</div>
                          <div className="font-mono text-caption mt-3 pt-3" style={{ color: d.inkMuted, borderTop: `1px solid ${d.borderSoft}` }}>{mc.hex.toUpperCase()}</div>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              </PaperCard>
            </section>

            {/* ═════════ 11 · Domain · Case ═════════ */}
            <section>
              <SectionLabel
                number="11"
                label="Domain"
                title="Case · Monitoring Panel"
                desc="실제 wing-ops 모니터링 패널의 색상 적용 예시. 라이트/다크 모두 동등한 정보 전달력을 가집니다."
                d={d}
              />
              <div className="grid grid-cols-2 gap-4">
                {[
                  { themeD: DEF_THEME_LIGHT, label: 'Light', primary: '#0099DD', danger: '#D61111', gray900: '#121418', gray500: '#808892', cardBg: '#FFFFFF', labelT: 'Gray 900', labelD: 'Red 600', labelP: 'Primary 500' },
                  { themeD: DEF_THEME_DARK, label: 'Dark', primary: '#007AB1', danger: '#DE4141', gray900: '#F8F9FC', gray500: '#6C747E', cardBg: '#1B1E23', labelT: 'Gray 50', labelD: 'Red 500', labelP: 'Primary 600' },
                ].map((s) => (
                  <PaperCard key={s.label} d={s.themeD} label={s.label}>
                    <div className="p-6 pt-14">
                      <div className="rounded-lg p-4" style={{ backgroundColor: s.cardBg, border: `1px solid ${s.themeD.borderSoft}` }}>
                        <div className="flex items-center justify-between mb-3">
                          <div className="text-body-2 font-bold" style={{ color: s.gray900 }}>해양 수질 모니터링</div>
                          <span className="font-mono text-caption px-2 py-0.5 rounded" style={{ backgroundColor: s.themeD.dotPattern, color: s.gray500 }}>LIVE</span>
                        </div>
                        <div className="space-y-2">
                          <div className="flex items-center justify-between">
                            <span className="text-caption" style={{ color: s.gray500 }}>정상 수치 (ppm)</span>
                            <span className="font-mono text-body-2 font-bold" style={{ color: s.gray900 }}>12,000</span>
                          </div>
                          <div className="flex items-center justify-between">
                            <span className="text-caption flex items-center gap-1" style={{ color: s.danger }}><span>●</span>오염 감지</span>
                            <span className="font-mono text-body-2 font-bold" style={{ color: s.danger }}>+0.05%</span>
                          </div>
                          <div className="flex items-center justify-between">
                            <span className="text-caption flex items-center gap-1" style={{ color: s.primary }}><span>●</span>안전 수준</span>
                            <span className="font-mono text-body-2 font-bold" style={{ color: s.primary }}>−3.33%</span>
                          </div>
                        </div>
                      </div>
                      <div className="mt-4">
                        <ChipRow hex={s.gray900} role="유지 · 기본" gray={s.labelT} d={s.themeD} />
                        <ChipRow hex={s.danger} role="오염 · 위험" gray={s.labelD} d={s.themeD} />
                        <ChipRow hex={s.primary} role="안전 · 정상" gray={s.labelP} d={s.themeD} />
                      </div>
                    </div>
                  </PaperCard>
                ))}
              </div>
            </section>

            {/* ═════════ 12 · Effects · Dimmed ═════════ */}
            <section>
              <SectionLabel
                number="12"
                label="Effects"
                title="Dimmed · Overlay"
                desc="화면 전체를 덮는 딤 효과. 모달·오버레이 상태에서 배경 주목도를 낮춥니다. 기본 80% 블랙."
                d={d}
              />
              <PaperCard d={d}>
                <div className="p-6 pt-14 flex items-center gap-8">
                  <div className="relative rounded-lg overflow-hidden" style={{ width: '60%', height: 120, background: 'repeating-conic-gradient(#d0d0d0 0% 25%, #fff 0% 50%)', backgroundSize: '16px 16px' }}>
                    <div className="absolute inset-0" style={{ backgroundColor: 'rgba(0,0,0,0.8)' }} />
                    <div className="absolute inset-0 flex items-center justify-center">
                      <span className="font-mono text-caption font-bold" style={{ color: '#FFFFFF', letterSpacing: '0.2em' }}>DIMMED · 80%</span>
                    </div>
                  </div>
                  <div className="flex-1">
                    <div className="font-mono text-caption mb-2" style={{ color: d.inkMuted, letterSpacing: '0.15em' }}>TOKEN</div>
                    <div className="font-mono text-body-2 font-bold mb-4" style={{ color: d.inkPrimary }}>rgba(0, 0, 0, 0.8)</div>
                    <div className="text-caption" style={{ color: d.inkSecondary, lineHeight: 1.7 }}>
                      모달 오버레이, 풀스크린 로딩 차단 등에 사용합니다. Light/Dark 테마 공통.
                    </div>
                  </div>
                </div>
              </PaperCard>
            </section>
          </div>
        )}

        {/* ── Token 탭 콘텐츠 ── */}
        {activeColorTab === 'token' && (
          <div className="mb-16">
            <div className="mb-6">
              <p
                className="font-mono text-body-2 uppercase tracking-widest mb-1"
                style={{ color: t.textAccent }}
              >
                Primitive
              </p>
              <p className="text-body-2" style={{ color: t.textMuted }}>
                UI 전반에서 사용하는 기본 색조 팔레트. 테마와 무관하게 고정된 값입니다.
              </p>
            </div>
            {COLOR_TOKEN_GROUPS.map((group, groupIdx) => (
              <div key={group.title}>
                <h2
                  className="text-xl font-bold mb-4"
                  style={{
                    color: t.textPrimary,
                    marginTop: groupIdx === 0 ? 0 : '3rem',
                  }}
                >
                  {group.title}
                </h2>
                <div>
                  {group.tokens.map((token) => (
                    <div
                      key={token.name}
                      className="flex items-center py-4"
                      style={{ borderBottom: `1px solid ${dividerColor}` }}
                    >
                      {/* 색상 스와치 */}
                      <div
                        style={{
                          width: '40px',
                          height: '40px',
                          backgroundColor: token.hex,
                          borderRadius: '8px',
                          border: `1px solid ${dividerColor}`,
                          flexShrink: 0,
                        }}
                      />
                      {/* 토큰명 */}
                      <span
                        className="font-mono text-body-2 font-semibold ml-4"
                        style={{ color: t.textPrimary }}
                      >
                        {token.name}
                      </span>
                      {/* HEX + RGB */}
                      <div className="ml-auto text-right">
                        <div className="font-mono text-body-2" style={{ color: t.textPrimary }}>
                          {token.hex}
                        </div>
                        <div className="font-mono text-caption" style={{ color: t.textMuted }}>
                          {hexToRgb(token.hex)}
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
};

export default ColorPaletteContent;
