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

:root{
  --primary-50: #f9f7f5;
  --primary-100: #ede4de;
  --primary-200: #dac9be;
  --primary-300: #c4a997;
  --primary-400: #ae896f;
  --primary-500: #a0765a;
  --primary-600: #7c5b46;
  --primary-700: #5b4333;
  --primary-800: #3e2e23;
  --primary-900: #211812;
  --primary: var(--primary-500);
  --primary-hover: #7f5e48;
  --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: #ffffff;
  --on-primary-700: #ffffff;
  --on-primary-800: #ffffff;
  --on-primary-900: #ffffff;
  --primary-op10: rgba(160, 118, 90, 0.1);
  --primary-op20: rgba(160, 118, 90, 0.2);
  --primary-op30: rgba(160, 118, 90, 0.3);
  --primary-op40: rgba(160, 118, 90, 0.4);
  --primary-op50: rgba(160, 118, 90, 0.5);
  --primary-op60: rgba(160, 118, 90, 0.6);
  --primary-op70: rgba(160, 118, 90, 0.7);
  --primary-op80: rgba(160, 118, 90, 0.8);
  --primary-op90: rgba(160, 118, 90, 0.9);

  --secondary-50: #f9f7f5;
  --secondary-100: #ece3df;
  --secondary-200: #d9c6bf;
  --secondary-300: #c3a598;
  --secondary-400: #ac8372;
  --secondary-500: #745244;
  --secondary-600: #7a5648;
  --secondary-700: #5a4035;
  --secondary-800: #3d2b24;
  --secondary-900: #201713;
  --secondary: var(--secondary-500);
  --secondary-hover: #543b31;
  --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: #ffffff;
  --on-secondary-700: #ffffff;
  --on-secondary-800: #ffffff;
  --on-secondary-900: #ffffff;
  --secondary-op10: rgba(116, 82, 68, 0.1);
  --secondary-op20: rgba(116, 82, 68, 0.2);
  --secondary-op30: rgba(116, 82, 68, 0.3);
  --secondary-op40: rgba(116, 82, 68, 0.4);
  --secondary-op50: rgba(116, 82, 68, 0.5);
  --secondary-op60: rgba(116, 82, 68, 0.6);
  --secondary-op70: rgba(116, 82, 68, 0.7);
  --secondary-op80: rgba(116, 82, 68, 0.8);
  --secondary-op90: rgba(116, 82, 68, 0.9);

  --tertiary-50: #fbf7f4;
  --tertiary-100: #f1e4da;
  --tertiary-200: #e3cab5;
  --tertiary-300: #d2aa88;
  --tertiary-400: #c28a5c;
  --tertiary-500: #dbba9f;
  --tertiary-600: #8d5c35;
  --tertiary-700: #684427;
  --tertiary-800: #462e1a;
  --tertiary-900: #25180e;
  --tertiary: var(--tertiary-500);
  --tertiary-hover: #cd9f7a;
  --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(219, 186, 159, 0.1);
  --tertiary-op20: rgba(219, 186, 159, 0.2);
  --tertiary-op30: rgba(219, 186, 159, 0.3);
  --tertiary-op40: rgba(219, 186, 159, 0.4);
  --tertiary-op50: rgba(219, 186, 159, 0.5);
  --tertiary-op60: rgba(219, 186, 159, 0.6);
  --tertiary-op70: rgba(219, 186, 159, 0.7);
  --tertiary-op80: rgba(219, 186, 159, 0.8);
  --tertiary-op90: rgba(219, 186, 159, 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)}