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

:root{
  --primary-50: #f4fbf9;
  --primary-100: #daf1eb;
  --primary-200: #b5e3d7;
  --primary-300: #89d2be;
  --primary-400: #5cc1a6;
  --primary-500: #46b99a;
  --primary-600: #358d75;
  --primary-700: #276856;
  --primary-800: #1b463b;
  --primary-900: #0e251f;
  --primary: var(--primary-500);
  --primary-hover: #38947b;
  --on-primary-50: #111111;
  --on-primary-100: #111111;
  --on-primary-200: #111111;
  --on-primary-300: #111111;
  --on-primary-400: #111111;
  --on-primary-500: #111111;
  --on-primary-600: #111111;
  --on-primary-700: #ffffff;
  --on-primary-800: #ffffff;
  --on-primary-900: #ffffff;
  --primary-op10: rgba(70, 185, 154, 0.1);
  --primary-op20: rgba(70, 185, 154, 0.2);
  --primary-op30: rgba(70, 185, 154, 0.3);
  --primary-op40: rgba(70, 185, 154, 0.4);
  --primary-op50: rgba(70, 185, 154, 0.5);
  --primary-op60: rgba(70, 185, 154, 0.6);
  --primary-op70: rgba(70, 185, 154, 0.7);
  --primary-op80: rgba(70, 185, 154, 0.8);
  --primary-op90: rgba(70, 185, 154, 0.9);

  --secondary-50: #f5fbf4;
  --secondary-100: #dff2d9;
  --secondary-200: #bee5b3;
  --secondary-300: #97d685;
  --secondary-400: #70c757;
  --secondary-500: #3a7728;
  --secondary-600: #479131;
  --secondary-700: #346b24;
  --secondary-800: #234918;
  --secondary-900: #13260d;
  --secondary: var(--secondary-500);
  --secondary-hover: #27511b;
  --on-secondary-50: #111111;
  --on-secondary-100: #111111;
  --on-secondary-200: #111111;
  --on-secondary-300: #111111;
  --on-secondary-400: #111111;
  --on-secondary-500: #ffffff;
  --on-secondary-600: #111111;
  --on-secondary-700: #ffffff;
  --on-secondary-800: #ffffff;
  --on-secondary-900: #ffffff;
  --secondary-op10: rgba(58, 119, 40, 0.1);
  --secondary-op20: rgba(58, 119, 40, 0.2);
  --secondary-op30: rgba(58, 119, 40, 0.3);
  --secondary-op40: rgba(58, 119, 40, 0.4);
  --secondary-op50: rgba(58, 119, 40, 0.5);
  --secondary-op60: rgba(58, 119, 40, 0.6);
  --secondary-op70: rgba(58, 119, 40, 0.7);
  --secondary-op80: rgba(58, 119, 40, 0.8);
  --secondary-op90: rgba(58, 119, 40, 0.9);

  --tertiary-50: #f3f7fc;
  --tertiary-100: #d7e6f4;
  --tertiary-200: #afcde9;
  --tertiary-300: #80afdb;
  --tertiary-400: #5090ce;
  --tertiary-500: #5c98d1;
  --tertiary-600: #2b6297;
  --tertiary-700: #1f486f;
  --tertiary-800: #15314c;
  --tertiary-900: #0b1a28;
  --tertiary: var(--tertiary-500);
  --tertiary-hover: #377fc3;
  --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: #ffffff;
  --on-tertiary-700: #ffffff;
  --on-tertiary-800: #ffffff;
  --on-tertiary-900: #ffffff;
  --tertiary-op10: rgba(92, 152, 209, 0.1);
  --tertiary-op20: rgba(92, 152, 209, 0.2);
  --tertiary-op30: rgba(92, 152, 209, 0.3);
  --tertiary-op40: rgba(92, 152, 209, 0.4);
  --tertiary-op50: rgba(92, 152, 209, 0.5);
  --tertiary-op60: rgba(92, 152, 209, 0.6);
  --tertiary-op70: rgba(92, 152, 209, 0.7);
  --tertiary-op80: rgba(92, 152, 209, 0.8);
  --tertiary-op90: rgba(92, 152, 209, 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)}