/* ==========================================================
   setting_color.css - 컬러 시스템 (자동 생성)
   생성일: 2026-04-12 15:58:26
   ※ 이 파일은 컬러 시스템 모달에서 자동 생성됩니다.
   ※ 직접 수정하지 마세요.
   ========================================================== */

:root{
  --primary-50: #f1f0ff;
  --primary-100: #d2ccff;
  --primary-200: #a499ff;
  --primary-300: #6e5cff;
  --primary-400: #381fff;
  --primary-500: #978aff;
  --primary-600: #1600c2;
  --primary-700: #10008f;
  --primary-800: #0b0061;
  --primary-900: #060033;
  --primary: var(--primary-500);
  --primary-hover: #6a57ff;
  --on-primary-50: #111111;
  --on-primary-100: #111111;
  --on-primary-200: #111111;
  --on-primary-300: #111111;
  --on-primary-400: #ffffff;
  --on-primary-500: #111111;
  --on-primary-600: #ffffff;
  --on-primary-700: #ffffff;
  --on-primary-800: #ffffff;
  --on-primary-900: #ffffff;
  --primary-op10: rgba(151, 138, 255, 0.1);
  --primary-op20: rgba(151, 138, 255, 0.2);
  --primary-op30: rgba(151, 138, 255, 0.3);
  --primary-op40: rgba(151, 138, 255, 0.4);
  --primary-op50: rgba(151, 138, 255, 0.5);
  --primary-op60: rgba(151, 138, 255, 0.6);
  --primary-op70: rgba(151, 138, 255, 0.7);
  --primary-op80: rgba(151, 138, 255, 0.8);
  --primary-op90: rgba(151, 138, 255, 0.9);

  --secondary-50: #fff9f0;
  --secondary-100: #ffeccc;
  --secondary-200: #ffda99;
  --secondary-300: #fec35c;
  --secondary-400: #fead20;
  --secondary-500: #fea50b;
  --secondary-600: #c17b01;
  --secondary-700: #8e5a01;
  --secondary-800: #613d00;
  --secondary-900: #332000;
  --secondary: var(--secondary-500);
  --secondary-hover: #d58701;
  --on-secondary-50: #111111;
  --on-secondary-100: #111111;
  --on-secondary-200: #111111;
  --on-secondary-300: #111111;
  --on-secondary-400: #111111;
  --on-secondary-500: #111111;
  --on-secondary-600: #111111;
  --on-secondary-700: #ffffff;
  --on-secondary-800: #ffffff;
  --on-secondary-900: #ffffff;
  --secondary-op10: rgba(254, 165, 11, 0.1);
  --secondary-op20: rgba(254, 165, 11, 0.2);
  --secondary-op30: rgba(254, 165, 11, 0.3);
  --secondary-op40: rgba(254, 165, 11, 0.4);
  --secondary-op50: rgba(254, 165, 11, 0.5);
  --secondary-op60: rgba(254, 165, 11, 0.6);
  --secondary-op70: rgba(254, 165, 11, 0.7);
  --secondary-op80: rgba(254, 165, 11, 0.8);
  --secondary-op90: rgba(254, 165, 11, 0.9);

  --tertiary-50: #f4fbf7;
  --tertiary-100: #d9f2e5;
  --tertiary-200: #b2e6cb;
  --tertiary-300: #84d6ac;
  --tertiary-400: #56c78d;
  --tertiary-500: #2f8e5d;
  --tertiary-600: #30925f;
  --tertiary-700: #246b46;
  --tertiary-800: #184930;
  --tertiary-900: #0d2619;
  --tertiary: var(--tertiary-500);
  --tertiary-hover: #226844;
  --on-tertiary-50: #111111;
  --on-tertiary-100: #111111;
  --on-tertiary-200: #111111;
  --on-tertiary-300: #111111;
  --on-tertiary-400: #111111;
  --on-tertiary-500: #111111;
  --on-tertiary-600: #111111;
  --on-tertiary-700: #ffffff;
  --on-tertiary-800: #ffffff;
  --on-tertiary-900: #ffffff;
  --tertiary-op10: rgba(47, 142, 93, 0.1);
  --tertiary-op20: rgba(47, 142, 93, 0.2);
  --tertiary-op30: rgba(47, 142, 93, 0.3);
  --tertiary-op40: rgba(47, 142, 93, 0.4);
  --tertiary-op50: rgba(47, 142, 93, 0.5);
  --tertiary-op60: rgba(47, 142, 93, 0.6);
  --tertiary-op70: rgba(47, 142, 93, 0.7);
  --tertiary-op80: rgba(47, 142, 93, 0.8);
  --tertiary-op90: rgba(47, 142, 93, 0.9);

  --deep: #111827;
  --deep-hover: #020203;
  --deep-op10: rgba(17, 24, 39, 0.1);
  --deep-op20: rgba(17, 24, 39, 0.2);
  --deep-op30: rgba(17, 24, 39, 0.3);
  --deep-op40: rgba(17, 24, 39, 0.4);
  --deep-op50: rgba(17, 24, 39, 0.5);
  --deep-op60: rgba(17, 24, 39, 0.6);
  --deep-op70: rgba(17, 24, 39, 0.7);
  --deep-op80: rgba(17, 24, 39, 0.8);
  --deep-op90: rgba(17, 24, 39, 0.9);
  --red: #ef4444;
  --red-hover: #eb1515;
  --red-op10: rgba(239, 68, 68, 0.1);
  --red-op20: rgba(239, 68, 68, 0.2);
  --red-op30: rgba(239, 68, 68, 0.3);
  --red-op40: rgba(239, 68, 68, 0.4);
  --red-op50: rgba(239, 68, 68, 0.5);
  --red-op60: rgba(239, 68, 68, 0.6);
  --red-op70: rgba(239, 68, 68, 0.7);
  --red-op80: rgba(239, 68, 68, 0.8);
  --red-op90: rgba(239, 68, 68, 0.9);
  --success: #10b981;
  --success-hover: #0c8a60;
  --success-op10: rgba(16, 185, 129, 0.1);
  --success-op20: rgba(16, 185, 129, 0.2);
  --success-op30: rgba(16, 185, 129, 0.3);
  --success-op40: rgba(16, 185, 129, 0.4);
  --success-op50: rgba(16, 185, 129, 0.5);
  --success-op60: rgba(16, 185, 129, 0.6);
  --success-op70: rgba(16, 185, 129, 0.7);
  --success-op80: rgba(16, 185, 129, 0.8);
  --success-op90: rgba(16, 185, 129, 0.9);
  --cancel: #a3a3a3;
  --cancel-hover: #8a8a8a;
  --cancel-op10: rgba(163, 163, 163, 0.1);
  --cancel-op20: rgba(163, 163, 163, 0.2);
  --cancel-op30: rgba(163, 163, 163, 0.3);
  --cancel-op40: rgba(163, 163, 163, 0.4);
  --cancel-op50: rgba(163, 163, 163, 0.5);
  --cancel-op60: rgba(163, 163, 163, 0.6);
  --cancel-op70: rgba(163, 163, 163, 0.7);
  --cancel-op80: rgba(163, 163, 163, 0.8);
  --cancel-op90: rgba(163, 163, 163, 0.9);
  --darkgray: #374151;
  --darkgray-hover: #222933;
  --darkgray-op10: rgba(55, 65, 81, 0.1);
  --darkgray-op20: rgba(55, 65, 81, 0.2);
  --darkgray-op30: rgba(55, 65, 81, 0.3);
  --darkgray-op40: rgba(55, 65, 81, 0.4);
  --darkgray-op50: rgba(55, 65, 81, 0.5);
  --darkgray-op60: rgba(55, 65, 81, 0.6);
  --darkgray-op70: rgba(55, 65, 81, 0.7);
  --darkgray-op80: rgba(55, 65, 81, 0.8);
  --darkgray-op90: rgba(55, 65, 81, 0.9);
  --point: #f59e0b;
  --point-hover: #c57f08;
  --point-op10: rgba(245, 158, 11, 0.1);
  --point-op20: rgba(245, 158, 11, 0.2);
  --point-op30: rgba(245, 158, 11, 0.3);
  --point-op40: rgba(245, 158, 11, 0.4);
  --point-op50: rgba(245, 158, 11, 0.5);
  --point-op60: rgba(245, 158, 11, 0.6);
  --point-op70: rgba(245, 158, 11, 0.7);
  --point-op80: rgba(245, 158, 11, 0.8);
  --point-op90: rgba(245, 158, 11, 0.9);
  --blue: #3b82f6;
  --blue-hover: #0b63f3;
  --blue-op10: rgba(59, 130, 246, 0.1);
  --blue-op20: rgba(59, 130, 246, 0.2);
  --blue-op30: rgba(59, 130, 246, 0.3);
  --blue-op40: rgba(59, 130, 246, 0.4);
  --blue-op50: rgba(59, 130, 246, 0.5);
  --blue-op60: rgba(59, 130, 246, 0.6);
  --blue-op70: rgba(59, 130, 246, 0.7);
  --blue-op80: rgba(59, 130, 246, 0.8);
  --blue-op90: rgba(59, 130, 246, 0.9);
}

/* 유틸리티 클래스 */
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:10px;padding:10px 14px;border:1px solid transparent;cursor:pointer}
.bg-primary-500{background:var(--primary-500); color:var(--on-primary-500)}
.text-primary-500{color:var(--primary-500)}
.btn-primary{background:var(--primary); color:#ffffff}
.btn-primary:hover{background:var(--primary-hover)}
.bg-secondary-500{background:var(--secondary-500); color:var(--on-secondary-500)}
.text-secondary-500{color:var(--secondary-500)}
.btn-secondary{background:var(--secondary); color:#ffffff}
.btn-secondary:hover{background:var(--secondary-hover)}
.bg-tertiary-500{background:var(--tertiary-500); color:var(--on-tertiary-500)}
.text-tertiary-500{color:var(--tertiary-500)}
.btn-tertiary{background:var(--tertiary); color:#ffffff}
.btn-tertiary:hover{background:var(--tertiary-hover)}
.btn-deep{background:var(--deep);color:#ffffff}
.btn-deep:hover{background:var(--deep-hover)}
.btn-red{background:var(--red);color:#ffffff}
.btn-red:hover{background:var(--red-hover)}
.btn-success{background:var(--success);color:#ffffff}
.btn-success:hover{background:var(--success-hover)}
.btn-cancel{background:var(--cancel);color:#ffffff}
.btn-cancel:hover{background:var(--cancel-hover)}
.btn-darkgray{background:var(--darkgray);color:#ffffff}
.btn-darkgray:hover{background:var(--darkgray-hover)}
.btn-point{background:var(--point);color:#ffffff}
.btn-point:hover{background:var(--point-hover)}
.btn-blue{background:var(--blue);color:#ffffff}
.btn-blue:hover{background:var(--blue-hover)}