@charset "UTF-8";
@import url("/assets/fonts/Pretendard/web/static/pretendard.css");
/* http://meyerweb.com/eric/tools/css/reset/ 
	v2.0 | 20110126
	License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
main, article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

:root {
  --clr-base-white: #fff;
  --clr-base-black: #000;
  --clr-primary-50: var(--clr-base-primary-50);
  --clr-primary-100: var(--clr-base-primary-100);
  --clr-primary-200: var(--clr-base-primary-200);
  --clr-primary-300: var(--clr-base-primary-300);
  --clr-primary-400: var(--clr-base-primary-400);
  --clr-primary-500: var(--clr-base-primary-500);
  --clr-primary-600: var(--clr-base-primary-600);
  --clr-primary-700: var(--clr-base-primary-700);
  --clr-primary-800: var(--clr-base-primary-800);
  --clr-primary-900: var(--clr-base-primary-900);
  --clr-primary-950: var(--clr-base-primary-950);
  --clr-gray-50: var(--clr-base-gray-50);
  --clr-gray-100: var(--clr-base-gray-100);
  --clr-gray-200: var(--clr-base-gray-200);
  --clr-gray-300: var(--clr-base-gray-300);
  --clr-gray-400: var(--clr-base-gray-400);
  --clr-gray-500: var(--clr-base-gray-500);
  --clr-gray-600: var(--clr-base-gray-600);
  --clr-gray-700: var(--clr-base-gray-700);
  --clr-gray-800: var(--clr-base-gray-800);
  --clr-gray-900: var(--clr-base-gray-900);
  --clr-gray-950: var(--clr-base-gray-950);
  --clr-success-50: var(--clr-base-success-50);
  --clr-success-100: var(--clr-base-success-100);
  --clr-success-200: var(--clr-base-success-200);
  --clr-success-300: var(--clr-base-success-300);
  --clr-success-400: var(--clr-base-success-400);
  --clr-success-500: var(--clr-base-success-500);
  --clr-success-600: var(--clr-base-success-600);
  --clr-success-700: var(--clr-base-success-700);
  --clr-success-800: var(--clr-base-success-800);
  --clr-success-900: var(--clr-base-success-900);
  --clr-success-950: var(--clr-base-success-950);
  --clr-warning-50: var(--clr-base-warning-50);
  --clr-warning-100: var(--clr-base-warning-100);
  --clr-warning-200: var(--clr-base-warning-200);
  --clr-warning-300: var(--clr-base-warning-300);
  --clr-warning-400: var(--clr-base-warning-400);
  --clr-warning-500: var(--clr-base-warning-500);
  --clr-warning-600: var(--clr-base-warning-600);
  --clr-warning-700: var(--clr-base-warning-700);
  --clr-warning-800: var(--clr-base-warning-800);
  --clr-warning-900: var(--clr-base-warning-900);
  --clr-warning-950: var(--clr-base-warning-950);
  --clr-danger-50: var(--clr-base-danger-50);
  --clr-danger-100: var(--clr-base-danger-100);
  --clr-danger-200: var(--clr-base-danger-200);
  --clr-danger-300: var(--clr-base-danger-300);
  --clr-danger-400: var(--clr-base-danger-400);
  --clr-danger-500: var(--clr-base-danger-500);
  --clr-danger-600: var(--clr-base-danger-600);
  --clr-danger-700: var(--clr-base-danger-700);
  --clr-danger-800: var(--clr-base-danger-800);
  --clr-danger-900: var(--clr-base-danger-900);
  --clr-danger-950: var(--clr-base-danger-950);
  --clr-premium-50: var(--clr-base-premium-50);
  --clr-premium-100: var(--clr-base-premium-100);
  --clr-premium-200: var(--clr-base-premium-200);
  --clr-premium-300: var(--clr-base-premium-300);
  --clr-premium-400: var(--clr-base-premium-400);
  --clr-premium-500: var(--clr-base-premium-500);
  --clr-premium-600: var(--clr-base-premium-600);
  --clr-premium-700: var(--clr-base-premium-700);
  --clr-premium-800: var(--clr-base-premium-800);
  --clr-premium-900: var(--clr-base-premium-900);
  --clr-premium-950: var(--clr-base-premium-950);
  --clr-pink-50: var(--clr-base-pink-50);
  --clr-pink-100: var(--clr-base-pink-100);
  --clr-pink-200: var(--clr-base-pink-200);
  --clr-pink-300: var(--clr-base-pink-300);
  --clr-pink-400: var(--clr-base-pink-400);
  --clr-pink-500: var(--clr-base-pink-500);
  --clr-pink-600: var(--clr-base-pink-600);
  --clr-pink-700: var(--clr-base-pink-700);
  --clr-pink-800: var(--clr-base-pink-800);
  --clr-pink-900: var(--clr-base-pink-900);
  --clr-pink-950: var(--clr-base-pink-950);
  --clr-info-50: var(--clr-base-info-50);
  --clr-info-100: var(--clr-base-info-100);
  --clr-info-200: var(--clr-base-info-200);
  --clr-info-300: var(--clr-base-info-300);
  --clr-info-400: var(--clr-base-info-400);
  --clr-info-500: var(--clr-base-info-500);
  --clr-info-600: var(--clr-base-info-600);
  --clr-info-700: var(--clr-base-info-700);
  --clr-info-800: var(--clr-base-info-800);
  --clr-info-900: var(--clr-base-info-900);
  --clr-info-950: var(--clr-base-info-950);
  --clr-ember-50: var(--clr-base-ember-50);
  --clr-ember-100: var(--clr-base-ember-100);
  --clr-ember-200: var(--clr-base-ember-200);
  --clr-ember-300: var(--clr-base-ember-300);
  --clr-ember-400: var(--clr-base-ember-400);
  --clr-ember-500: var(--clr-base-ember-500);
  --clr-ember-600: var(--clr-base-ember-600);
  --clr-ember-700: var(--clr-base-ember-700);
  --clr-ember-800: var(--clr-base-ember-800);
  --clr-ember-900: var(--clr-base-ember-900);
  --clr-ember-950: var(--clr-base-ember-950);
  --clr-green-50: var(--clr-success-50);
  --clr-green-100: var(--clr-success-100);
  --clr-green-200: var(--clr-success-200);
  --clr-green-300: var(--clr-success-300);
  --clr-green-400: var(--clr-success-400);
  --clr-green-500: var(--clr-success-500);
  --clr-green-600: var(--clr-success-600);
  --clr-green-700: var(--clr-success-700);
  --clr-green-800: var(--clr-success-800);
  --clr-green-900: var(--clr-success-900);
  --clr-green-950: var(--clr-success-950);
  --clr-yellow-50: var(--clr-warning-50);
  --clr-yellow-100: var(--clr-warning-100);
  --clr-yellow-200: var(--clr-warning-200);
  --clr-yellow-300: var(--clr-warning-300);
  --clr-yellow-400: var(--clr-warning-400);
  --clr-yellow-500: var(--clr-warning-500);
  --clr-yellow-600: var(--clr-warning-600);
  --clr-yellow-700: var(--clr-warning-700);
  --clr-yellow-800: var(--clr-warning-800);
  --clr-yellow-900: var(--clr-warning-900);
  --clr-yellow-950: var(--clr-warning-950);
  --clr-red-50: var(--clr-danger-50);
  --clr-red-100: var(--clr-danger-100);
  --clr-red-200: var(--clr-danger-200);
  --clr-red-300: var(--clr-danger-300);
  --clr-red-400: var(--clr-danger-400);
  --clr-red-500: var(--clr-danger-500);
  --clr-red-600: var(--clr-danger-600);
  --clr-red-700: var(--clr-danger-700);
  --clr-red-800: var(--clr-danger-800);
  --clr-red-900: var(--clr-danger-900);
  --clr-red-950: var(--clr-danger-950);
  --clr-blue-50: var(--clr-info-50);
  --clr-blue-100: var(--clr-info-100);
  --clr-blue-200: var(--clr-info-200);
  --clr-blue-300: var(--clr-info-300);
  --clr-blue-400: var(--clr-info-400);
  --clr-blue-500: var(--clr-info-500);
  --clr-blue-600: var(--clr-info-600);
  --clr-blue-700: var(--clr-info-700);
  --clr-blue-800: var(--clr-info-800);
  --clr-blue-900: var(--clr-info-900);
  --clr-blue-950: var(--clr-info-950);
  --clr-bg-primary: var(--clr-base-white);
  --clr-bg-secondary: var(--clr-gray-50);
  --clr-bg-tertiary: var(--clr-gray-100);
  --clr-bg-elevated: var(--clr-base-white);
  --clr-text-primary: var(--clr-gray-900);
  --clr-text-secondary: var(--clr-gray-700);
  --clr-text-tertiary: var(--clr-gray-500);
  --clr-text-disabled: var(--clr-gray-400);
  --clr-border-primary: var(--clr-gray-300);
  --clr-border-secondary: var(--clr-gray-200);
  --clr-border-tertiary: var(--clr-gray-100);
  --clr-chat-bg: var(--clr-base-white);
  --clr-chat-bg-bar: var(--clr-gray-50);
  --clr-chat-border: var(--clr-gray-300);
  --clr-chat-text: var(--clr-gray-900);
  --clr-chat-text-secondary: var(--clr-gray-600);
  --clr-chat-placeholder: var(--clr-gray-400);
  --clr-chat-button-bg: transparent;
  --clr-chat-button-hover: var(--clr-gray-100);
  --clr-chat-button-text: var(--clr-gray-600);
  --clr-chat-file-bg: var(--clr-gray-50);
  --clr-chat-file-border: var(--clr-gray-200);
  --clr-base-primary-50: #f0f8ff;
  --clr-base-primary-100: #dff0ff;
  --clr-base-primary-200: #b9e1fe;
  --clr-base-primary-300: #7bcafe;
  --clr-base-primary-400: #34affc;
  --clr-base-primary-500: #0a97ed;
  --clr-base-primary-600: #0076cb;
  --clr-base-primary-700: #0066b2;
  --clr-base-primary-800: #055187;
  --clr-base-primary-900: #0a4370;
  --clr-base-primary-950: #072a4a;
  --clr-base-success-50: #f0fdf4;
  --clr-base-success-100: #dcfce7;
  --clr-base-success-200: #bbf7d0;
  --clr-base-success-300: #86efac;
  --clr-base-success-400: #4ade80;
  --clr-base-success-500: #22c55e;
  --clr-base-success-600: #16a34a;
  --clr-base-success-700: #15803d;
  --clr-base-success-800: #166534;
  --clr-base-success-900: #14532d;
  --clr-base-success-950: #052e16;
  --clr-base-warning-50: #fffbeb;
  --clr-base-warning-100: #fef3c7;
  --clr-base-warning-200: #fde68a;
  --clr-base-warning-300: #fcd34d;
  --clr-base-warning-400: #fbbf24;
  --clr-base-warning-500: #f59e0b;
  --clr-base-warning-600: #d97706;
  --clr-base-warning-700: #b45309;
  --clr-base-warning-800: #92400e;
  --clr-base-warning-900: #78350f;
  --clr-base-warning-950: #451a03;
  --clr-base-danger-50: #fef2f2;
  --clr-base-danger-100: #fee2e2;
  --clr-base-danger-200: #fecaca;
  --clr-base-danger-300: #fca5a5;
  --clr-base-danger-400: #f87171;
  --clr-base-danger-500: #ef4444;
  --clr-base-danger-600: #dc2626;
  --clr-base-danger-700: #b91c1c;
  --clr-base-danger-800: #991b1b;
  --clr-base-danger-900: #7f1d1d;
  --clr-base-danger-950: #450a0a;
  --clr-base-premium-50: #faf5ff;
  --clr-base-premium-100: #f3e8ff;
  --clr-base-premium-200: #e9d5ff;
  --clr-base-premium-300: #d8b4fe;
  --clr-base-premium-400: #c084fc;
  --clr-base-premium-500: #a855f7;
  --clr-base-premium-600: #9333ea;
  --clr-base-premium-700: #7e22ce;
  --clr-base-premium-800: #6b21a8;
  --clr-base-premium-900: #581c87;
  --clr-base-premium-950: #3b0764;
  --clr-base-pink-50: #fdf2f8;
  --clr-base-pink-100: #fce7f3;
  --clr-base-pink-200: #fbcfe8;
  --clr-base-pink-300: #f9a8d4;
  --clr-base-pink-400: #f472b6;
  --clr-base-pink-500: #ec4899;
  --clr-base-pink-600: #db2777;
  --clr-base-pink-700: #be185d;
  --clr-base-pink-800: #9d174d;
  --clr-base-pink-900: #831843;
  --clr-base-pink-950: #500724;
  --clr-base-info-50: #eff6ff;
  --clr-base-info-100: #dbeafe;
  --clr-base-info-200: #bfdbfe;
  --clr-base-info-300: #93c5fd;
  --clr-base-info-400: #60a5fa;
  --clr-base-info-500: #3b82f6;
  --clr-base-info-600: #2563eb;
  --clr-base-info-700: #1d4ed8;
  --clr-base-info-800: #1e40af;
  --clr-base-info-900: #1e3a8a;
  --clr-base-info-950: #172554;
  --clr-base-ember-50: #fff8f1;
  --clr-base-ember-100: #ffedd5;
  --clr-base-ember-200: #fed7aa;
  --clr-base-ember-300: #fdba74;
  --clr-base-ember-400: #fb923c;
  --clr-base-ember-500: #f97316;
  --clr-base-ember-600: #ea580c;
  --clr-base-ember-700: #c2410c;
  --clr-base-ember-800: #9a3412;
  --clr-base-ember-900: #7c2d12;
  --clr-base-ember-950: #431407;
  --clr-base-gray-50: #f9fafb;
  --clr-base-gray-100: #f3f4f6;
  --clr-base-gray-200: #e5e7eb;
  --clr-base-gray-300: #d1d5db;
  --clr-base-gray-400: #9ca3af;
  --clr-base-gray-500: #6b7280;
  --clr-base-gray-600: #4b5563;
  --clr-base-gray-700: #374151;
  --clr-base-gray-800: #1f2937;
  --clr-base-gray-900: #111827;
  --clr-base-gray-950: #030712;
}

[data-theme=dark] {
  --clr-bg-primary: var(--clr-base-gray-900);
  --clr-bg-secondary: var(--clr-base-gray-800);
  --clr-bg-tertiary: var(--clr-base-gray-700);
  --clr-bg-elevated: var(--clr-base-gray-900);
  --clr-text-primary: var(--clr-base-gray-50);
  --clr-text-secondary: var(--clr-base-gray-200);
  --clr-text-tertiary: var(--clr-base-gray-400);
  --clr-text-disabled: var(--clr-base-gray-600);
  --clr-border-primary: var(--clr-base-gray-700);
  --clr-border-secondary: var(--clr-base-gray-800);
  --clr-border-tertiary: var(--clr-base-gray-900);
  --clr-primary-50: var(--clr-base-primary-950);
  --clr-primary-100: var(--clr-base-primary-900);
  --clr-primary-200: var(--clr-base-primary-800);
  --clr-primary-300: var(--clr-base-primary-700);
  --clr-primary-400: var(--clr-base-primary-600);
  --clr-primary-500: var(--clr-base-primary-500);
  --clr-primary-600: var(--clr-base-primary-400);
  --clr-primary-700: var(--clr-base-primary-300);
  --clr-primary-800: var(--clr-base-primary-200);
  --clr-primary-900: var(--clr-base-primary-100);
  --clr-primary-950: var(--clr-base-primary-50);
  --clr-success-50: var(--clr-base-success-950);
  --clr-success-100: var(--clr-base-success-900);
  --clr-success-200: var(--clr-base-success-800);
  --clr-success-300: var(--clr-base-success-700);
  --clr-success-400: var(--clr-base-success-600);
  --clr-success-500: var(--clr-base-success-500);
  --clr-success-600: var(--clr-base-success-400);
  --clr-success-700: var(--clr-base-success-300);
  --clr-success-800: var(--clr-base-success-200);
  --clr-success-900: var(--clr-base-success-100);
  --clr-success-950: var(--clr-base-success-50);
  --clr-warning-50: var(--clr-base-warning-950);
  --clr-warning-100: var(--clr-base-warning-900);
  --clr-warning-200: var(--clr-base-warning-800);
  --clr-warning-300: var(--clr-base-warning-700);
  --clr-warning-400: var(--clr-base-warning-600);
  --clr-warning-500: var(--clr-base-warning-500);
  --clr-warning-600: var(--clr-base-warning-400);
  --clr-warning-700: var(--clr-base-warning-300);
  --clr-warning-800: var(--clr-base-warning-200);
  --clr-warning-900: var(--clr-base-warning-100);
  --clr-warning-950: var(--clr-base-warning-50);
  --clr-danger-50: var(--clr-base-danger-950);
  --clr-danger-100: var(--clr-base-danger-900);
  --clr-danger-200: var(--clr-base-danger-800);
  --clr-danger-300: var(--clr-base-danger-700);
  --clr-danger-400: var(--clr-base-danger-600);
  --clr-danger-500: var(--clr-base-danger-500);
  --clr-danger-600: var(--clr-base-danger-400);
  --clr-danger-700: var(--clr-base-danger-300);
  --clr-danger-800: var(--clr-base-danger-200);
  --clr-danger-900: var(--clr-base-danger-100);
  --clr-danger-950: var(--clr-base-danger-50);
  --clr-premium-50: var(--clr-base-premium-950);
  --clr-premium-100: var(--clr-base-premium-900);
  --clr-premium-200: var(--clr-base-premium-800);
  --clr-premium-300: var(--clr-base-premium-700);
  --clr-premium-400: var(--clr-base-premium-600);
  --clr-premium-500: var(--clr-base-premium-500);
  --clr-premium-600: var(--clr-base-premium-400);
  --clr-premium-700: var(--clr-base-premium-300);
  --clr-premium-800: var(--clr-base-premium-200);
  --clr-premium-900: var(--clr-base-premium-100);
  --clr-premium-950: var(--clr-base-premium-50);
  --clr-pink-50: var(--clr-base-pink-950);
  --clr-pink-100: var(--clr-base-pink-900);
  --clr-pink-200: var(--clr-base-pink-800);
  --clr-pink-300: var(--clr-base-pink-700);
  --clr-pink-400: var(--clr-base-pink-600);
  --clr-pink-500: var(--clr-base-pink-500);
  --clr-pink-600: var(--clr-base-pink-400);
  --clr-pink-700: var(--clr-base-pink-300);
  --clr-pink-800: var(--clr-base-pink-200);
  --clr-pink-900: var(--clr-base-pink-100);
  --clr-pink-950: var(--clr-base-pink-50);
  --clr-info-50: var(--clr-base-info-950);
  --clr-info-100: var(--clr-base-info-900);
  --clr-info-200: var(--clr-base-info-800);
  --clr-info-300: var(--clr-base-info-700);
  --clr-info-400: var(--clr-base-info-600);
  --clr-info-500: var(--clr-base-info-500);
  --clr-info-600: var(--clr-base-info-400);
  --clr-info-700: var(--clr-base-info-300);
  --clr-info-800: var(--clr-base-info-200);
  --clr-info-900: var(--clr-base-info-100);
  --clr-info-950: var(--clr-base-info-50);
  --clr-ember-50: var(--clr-base-ember-950);
  --clr-ember-100: var(--clr-base-ember-900);
  --clr-ember-200: var(--clr-base-ember-800);
  --clr-ember-300: var(--clr-base-ember-700);
  --clr-ember-400: var(--clr-base-ember-600);
  --clr-ember-500: var(--clr-base-ember-500);
  --clr-ember-600: var(--clr-base-ember-400);
  --clr-ember-700: var(--clr-base-ember-300);
  --clr-ember-800: var(--clr-base-ember-200);
  --clr-ember-900: var(--clr-base-ember-100);
  --clr-ember-950: var(--clr-base-ember-50);
  --clr-gray-50: var(--clr-base-gray-950);
  --clr-gray-100: var(--clr-base-gray-900);
  --clr-gray-200: var(--clr-base-gray-800);
  --clr-gray-300: var(--clr-base-gray-700);
  --clr-gray-400: var(--clr-base-gray-600);
  --clr-gray-500: var(--clr-base-gray-500);
  --clr-gray-600: var(--clr-base-gray-400);
  --clr-gray-700: var(--clr-base-gray-300);
  --clr-gray-800: var(--clr-base-gray-200);
  --clr-gray-900: var(--clr-base-gray-100);
  --clr-gray-950: var(--clr-base-gray-50);
  --clr-green-50: var(--clr-base-success-950);
  --clr-green-100: var(--clr-base-success-900);
  --clr-green-200: var(--clr-base-success-800);
  --clr-green-300: var(--clr-base-success-700);
  --clr-green-400: var(--clr-base-success-600);
  --clr-green-500: var(--clr-base-success-500);
  --clr-green-600: var(--clr-base-success-400);
  --clr-green-700: var(--clr-base-success-300);
  --clr-green-800: var(--clr-base-success-200);
  --clr-green-900: var(--clr-base-success-100);
  --clr-green-950: var(--clr-base-success-50);
  --clr-yellow-50: var(--clr-base-warning-950);
  --clr-yellow-100: var(--clr-base-warning-900);
  --clr-yellow-200: var(--clr-base-warning-800);
  --clr-yellow-300: var(--clr-base-warning-700);
  --clr-yellow-400: var(--clr-base-warning-600);
  --clr-yellow-500: var(--clr-base-warning-500);
  --clr-yellow-600: var(--clr-base-warning-400);
  --clr-yellow-700: var(--clr-base-warning-300);
  --clr-yellow-800: var(--clr-base-warning-200);
  --clr-yellow-900: var(--clr-base-warning-100);
  --clr-yellow-950: var(--clr-base-warning-50);
  --clr-red-50: var(--clr-base-danger-950);
  --clr-red-100: var(--clr-base-danger-900);
  --clr-red-200: var(--clr-base-danger-800);
  --clr-red-300: var(--clr-base-danger-700);
  --clr-red-400: var(--clr-base-danger-600);
  --clr-red-500: var(--clr-base-danger-500);
  --clr-red-600: var(--clr-base-danger-400);
  --clr-red-700: var(--clr-base-danger-300);
  --clr-red-800: var(--clr-base-danger-200);
  --clr-red-900: var(--clr-base-danger-100);
  --clr-red-950: var(--clr-base-danger-50);
  --clr-blue-50: var(--clr-base-info-950);
  --clr-blue-100: var(--clr-base-info-900);
  --clr-blue-200: var(--clr-base-info-800);
  --clr-blue-300: var(--clr-base-info-700);
  --clr-blue-400: var(--clr-base-info-600);
  --clr-blue-500: var(--clr-base-info-500);
  --clr-blue-600: var(--clr-base-info-400);
  --clr-blue-700: var(--clr-base-info-300);
  --clr-blue-800: var(--clr-base-info-200);
  --clr-blue-900: var(--clr-base-info-100);
  --clr-blue-950: var(--clr-base-info-50);
  --clr-chat-bg: var(--clr-base-gray-900);
  --clr-chat-bg-bar: var(--clr-base-gray-800);
  --clr-chat-border: var(--clr-base-gray-700);
  --clr-chat-text: var(--clr-base-gray-50);
  --clr-chat-text-secondary: var(--clr-base-gray-200);
  --clr-chat-placeholder: var(--clr-base-gray-400);
  --clr-chat-button-bg: transparent;
  --clr-chat-button-hover: var(--clr-base-gray-700);
  --clr-chat-button-text: var(--clr-base-gray-400);
  --clr-chat-file-bg: var(--clr-base-gray-800);
  --clr-chat-file-border: var(--clr-base-gray-700);
}

[data-theme=light] {
  --clr-bg-primary: var(--clr-base-white);
  --clr-bg-secondary: var(--clr-base-gray-50);
  --clr-bg-tertiary: var(--clr-base-gray-100);
  --clr-bg-elevated: var(--clr-base-white);
  --clr-text-primary: var(--clr-base-gray-900);
  --clr-text-secondary: var(--clr-base-gray-700);
  --clr-text-tertiary: var(--clr-base-gray-500);
  --clr-text-disabled: var(--clr-base-gray-400);
  --clr-border-primary: var(--clr-base-gray-300);
  --clr-border-secondary: var(--clr-base-gray-200);
  --clr-border-tertiary: var(--clr-base-gray-100);
  --clr-primary-50: var(--clr-base-primary-50);
  --clr-primary-100: var(--clr-base-primary-100);
  --clr-primary-200: var(--clr-base-primary-200);
  --clr-primary-300: var(--clr-base-primary-300);
  --clr-primary-400: var(--clr-base-primary-400);
  --clr-primary-500: var(--clr-base-primary-500);
  --clr-primary-600: var(--clr-base-primary-600);
  --clr-primary-700: var(--clr-base-primary-700);
  --clr-primary-800: var(--clr-base-primary-800);
  --clr-primary-900: var(--clr-base-primary-900);
  --clr-primary-950: var(--clr-base-primary-950);
  --clr-success-50: var(--clr-base-success-50);
  --clr-success-100: var(--clr-base-success-100);
  --clr-success-200: var(--clr-base-success-200);
  --clr-success-300: var(--clr-base-success-300);
  --clr-success-400: var(--clr-base-success-400);
  --clr-success-500: var(--clr-base-success-500);
  --clr-success-600: var(--clr-base-success-600);
  --clr-success-700: var(--clr-base-success-700);
  --clr-success-800: var(--clr-base-success-800);
  --clr-success-900: var(--clr-base-success-900);
  --clr-success-950: var(--clr-base-success-950);
  --clr-warning-50: var(--clr-base-warning-50);
  --clr-warning-100: var(--clr-base-warning-100);
  --clr-warning-200: var(--clr-base-warning-200);
  --clr-warning-300: var(--clr-base-warning-300);
  --clr-warning-400: var(--clr-base-warning-400);
  --clr-warning-500: var(--clr-base-warning-500);
  --clr-warning-600: var(--clr-base-warning-600);
  --clr-warning-700: var(--clr-base-warning-700);
  --clr-warning-800: var(--clr-base-warning-800);
  --clr-warning-900: var(--clr-base-warning-900);
  --clr-warning-950: var(--clr-base-warning-950);
  --clr-danger-50: var(--clr-base-danger-50);
  --clr-danger-100: var(--clr-base-danger-100);
  --clr-danger-200: var(--clr-base-danger-200);
  --clr-danger-300: var(--clr-base-danger-300);
  --clr-danger-400: var(--clr-base-danger-400);
  --clr-danger-500: var(--clr-base-danger-500);
  --clr-danger-600: var(--clr-base-danger-600);
  --clr-danger-700: var(--clr-base-danger-700);
  --clr-danger-800: var(--clr-base-danger-800);
  --clr-danger-900: var(--clr-base-danger-900);
  --clr-danger-950: var(--clr-base-danger-950);
  --clr-info-50: var(--clr-base-info-50);
  --clr-info-100: var(--clr-base-info-100);
  --clr-info-200: var(--clr-base-info-200);
  --clr-info-300: var(--clr-base-info-300);
  --clr-info-400: var(--clr-base-info-400);
  --clr-info-500: var(--clr-base-info-500);
  --clr-info-600: var(--clr-base-info-600);
  --clr-info-700: var(--clr-base-info-700);
  --clr-info-800: var(--clr-base-info-800);
  --clr-info-900: var(--clr-base-info-900);
  --clr-info-950: var(--clr-base-info-950);
  --clr-ember-50: var(--clr-base-ember-50);
  --clr-ember-100: var(--clr-base-ember-100);
  --clr-ember-200: var(--clr-base-ember-200);
  --clr-ember-300: var(--clr-base-ember-300);
  --clr-ember-400: var(--clr-base-ember-400);
  --clr-ember-500: var(--clr-base-ember-500);
  --clr-ember-600: var(--clr-base-ember-600);
  --clr-ember-700: var(--clr-base-ember-700);
  --clr-ember-800: var(--clr-base-ember-800);
  --clr-ember-900: var(--clr-base-ember-900);
  --clr-ember-950: var(--clr-base-ember-950);
  --clr-gray-50: var(--clr-base-gray-50);
  --clr-gray-100: var(--clr-base-gray-100);
  --clr-gray-200: var(--clr-base-gray-200);
  --clr-gray-300: var(--clr-base-gray-300);
  --clr-gray-400: var(--clr-base-gray-400);
  --clr-gray-500: var(--clr-base-gray-500);
  --clr-gray-600: var(--clr-base-gray-600);
  --clr-gray-700: var(--clr-base-gray-700);
  --clr-gray-800: var(--clr-base-gray-800);
  --clr-gray-900: var(--clr-base-gray-900);
  --clr-gray-950: var(--clr-base-gray-950);
  --clr-green-50: var(--clr-success-50);
  --clr-green-100: var(--clr-success-100);
  --clr-green-200: var(--clr-success-200);
  --clr-green-300: var(--clr-success-300);
  --clr-green-400: var(--clr-success-400);
  --clr-green-500: var(--clr-success-500);
  --clr-green-600: var(--clr-success-600);
  --clr-green-700: var(--clr-success-700);
  --clr-green-800: var(--clr-success-800);
  --clr-green-900: var(--clr-success-900);
  --clr-green-950: var(--clr-success-950);
  --clr-yellow-50: var(--clr-warning-50);
  --clr-yellow-100: var(--clr-warning-100);
  --clr-yellow-200: var(--clr-warning-200);
  --clr-yellow-300: var(--clr-warning-300);
  --clr-yellow-400: var(--clr-warning-400);
  --clr-yellow-500: var(--clr-warning-500);
  --clr-yellow-600: var(--clr-warning-600);
  --clr-yellow-700: var(--clr-warning-700);
  --clr-yellow-800: var(--clr-warning-800);
  --clr-yellow-900: var(--clr-warning-900);
  --clr-yellow-950: var(--clr-warning-950);
  --clr-red-50: var(--clr-danger-50);
  --clr-red-100: var(--clr-danger-100);
  --clr-red-200: var(--clr-danger-200);
  --clr-red-300: var(--clr-danger-300);
  --clr-red-400: var(--clr-danger-400);
  --clr-red-500: var(--clr-danger-500);
  --clr-red-600: var(--clr-danger-600);
  --clr-red-700: var(--clr-danger-700);
  --clr-red-800: var(--clr-danger-800);
  --clr-red-900: var(--clr-danger-900);
  --clr-red-950: var(--clr-danger-950);
  --clr-blue-50: var(--clr-info-50);
  --clr-blue-100: var(--clr-info-100);
  --clr-blue-200: var(--clr-info-200);
  --clr-blue-300: var(--clr-info-300);
  --clr-blue-400: var(--clr-info-400);
  --clr-blue-500: var(--clr-info-500);
  --clr-blue-600: var(--clr-info-600);
  --clr-blue-700: var(--clr-info-700);
  --clr-blue-800: var(--clr-info-800);
  --clr-blue-900: var(--clr-info-900);
  --clr-blue-950: var(--clr-info-950);
  --clr-chat-bg: var(--clr-base-white);
  --clr-chat-bg-bar: var(--clr-base-gray-50);
  --clr-chat-border: var(--clr-base-gray-300);
  --clr-chat-text: var(--clr-base-gray-900);
  --clr-chat-text-secondary: var(--clr-base-gray-600);
  --clr-chat-placeholder: var(--clr-base-gray-400);
  --clr-chat-button-bg: transparent;
  --clr-chat-button-hover: var(--clr-base-gray-100);
  --clr-chat-button-text: var(--clr-base-gray-600);
  --clr-chat-file-bg: var(--clr-base-gray-50);
  --clr-chat-file-border: var(--clr-base-gray-200);
}

:root {
  --family-pretendard: "Pretendard";
  --family-inter: "Inter";
  /* === Display (히어로/대제목) === */
  --display-xs-fs: clamp(3.2rem, 2.071197411vw + 2.4233009709rem, 6.4rem);
  --display-sm-fs: clamp(3.6rem, 2.3300970874vw + 2.7262135922rem, 7.2rem);
  --display-md-fs: clamp(4rem, 3.1067961165vw + 2.8349514563rem, 8.8rem);
  --display-lg-fs: clamp(4.8rem, 5.1779935275vw + 2.8582524272rem, 12.8rem);
  --display-xl-fs: clamp(6.4rem, 8.0258899676vw + 3.3902912621rem, 18.8rem);
  --display-xs-lh: 1.45;
  --display-sm-lh: 1.4;
  --display-md-lh: 1.333;
  --display-lg-lh: 1.25;
  --display-xl-lh: 1.2;
  --display-xs-fw: 700;
  --display-sm-fw: 700;
  --display-md-fw: 700;
  --display-lg-fw: 700;
  --display-xl-fw: 700;
  /* === Heading (섹션 타이틀) === */
  --heading-xs-fs: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.4rem);
  --heading-sm-fs: clamp(1.8rem, 0.6472491909vw + 1.5572815534rem, 2.8rem);
  --heading-md-fs: clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.2rem);
  --heading-lg-fs: clamp(2.4rem, 1.0355987055vw + 2.0116504854rem, 4rem);
  --heading-xl-fs: clamp(2.8rem, 1.2944983819vw + 2.3145631068rem, 4.8rem);
  --heading-xs-lh: 1.45;
  --heading-sm-lh: 1.4;
  --heading-md-lh: 1.333;
  --heading-lg-lh: 1.25;
  --heading-xl-lh: 1.2;
  --heading-xs-fw: 600;
  --heading-sm-fw: 600;
  --heading-md-fw: 600;
  --heading-lg-fw: 600;
  --heading-xl-fw: 600;
  /* === Body (본문/UI 텍스트) === */
  --body-xs-fs: clamp(1.2rem, 0.1294498382vw + 1.1514563107rem, 1.4rem);
  --body-sm-fs: clamp(1.3rem, 0.1941747573vw + 1.227184466rem, 1.6rem);
  --body-md-fs: clamp(1.4rem, 0.2588996764vw + 1.3029126214rem, 1.8rem); /* 기본 본문 */
  --body-lg-fs: clamp(1.5rem, 0.3236245955vw + 1.3786407767rem, 2rem);
  --body-xl-fs: clamp(1.6rem, 0.3883495146vw + 1.454368932rem, 2.2rem);
  --body-xs-lh: 1.6;
  --body-sm-lh: 1.6;
  --body-md-lh: 1.65;
  --body-lg-lh: 1.6;
  --body-xl-lh: 1.55;
  --body-xs-fw: 400;
  --body-sm-fw: 400;
  --body-md-fw: 400;
  --body-lg-fw: 400;
  --body-xl-fw: 400;
}

:root {
  --gutter: 2.4rem;
  --header-height: 10rem;
  --header-z-index: 1000;
  --sub-nav-height: 7rem;
  --drawer-z-index: 1001;
  --tran-15: 0.15s ease-in-out;
  --tran-3: .3s ease-in-out;
  --family-base: var(--family-pretendard);
  --family-en: var(--family-raleway);
}
@media (max-width: 1024px) {
  :root {
    --header-height: 7rem;
    --sub-nav-height: 5.6rem;
  }
}

body, button,
select,
input,
textarea,
option {
  color: var(--clr-text-base);
  font-family: var(--family-inter);
  font-size: clamp(1.3rem, 0.1941747573vw + 1.227184466rem, 1.6rem);
  font-weight: 400;
  line-height: 1.6;
  word-break: keep-all;
}

.no-order-table .--order-no-link, .no-table__cell--link {
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--clr-primary-600);
  text-decoration: none;
  transition: color 0.2s ease;
}
.no-order-table .--order-no-link:hover, .no-table__cell--link:hover {
  color: var(--clr-primary-700);
  text-decoration: underline;
}
.no-order-table .--underline.--order-no-link, .--underline.no-table__cell--link {
  text-decoration: underline;
}

.no-filter-bar__search-input:-webkit-autofill, .no-filter-bar__select:-webkit-autofill {
  -webkit-text-fill-color: var(--clr-text-primary) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--clr-bg-elevated) inset !important;
  box-shadow: 0 0 0 1000px var(--clr-bg-elevated) inset !important;
  border-color: var(--clr-border-primary) !important;
  background-color: var(--clr-bg-elevated) !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1), background-color 5000s ease-in-out 0s, color 5000s ease-in-out 0s;
}
.no-filter-bar__search-input:focus:-webkit-autofill, .no-filter-bar__select:focus:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--clr-bg-elevated) inset, 0 0 0 0.3rem rgba(37, 99, 235, 0.15), 0 0.2rem 0.6rem rgba(37, 99, 235, 0.1) !important;
  box-shadow: 0 0 0 1000px var(--clr-bg-elevated) inset, 0 0 0 0.3rem rgba(37, 99, 235, 0.15), 0 0.2rem 0.6rem rgba(37, 99, 235, 0.1) !important;
  border-color: var(--clr-primary-600) !important;
}

:root {
  /* === Section spacing (섹션 상·하단 패딩) === */
  --section-xs: clamp(2.4rem, 1.5533980583vw + 1.8174757282rem, 4.8rem);
  --section-sm: clamp(3.2rem, 2.071197411vw + 2.4233009709rem, 6.4rem);
  --section-md: clamp(4.8rem, 3.1067961165vw + 3.6349514563rem, 9.6rem);
  --section-lg: clamp(6.4rem, 4.142394822vw + 4.8466019417rem, 12.8rem);
  --section-xl: clamp(9.6rem, 4.142394822vw + 8.0466019417rem, 16rem);
  /* === Border Radius (유동 반경) === */
  --radius-xs: clamp(0.2rem, 0.1294498382vw + 0.1514563107rem, 0.4rem);
  --radius-sm: clamp(0.4rem, 0.2588996764vw + 0.3029126214rem, 0.8rem);
  --radius-md: clamp(0.8rem, 0.5177993528vw + 0.6058252427rem, 1.6rem);
  --radius-lg: clamp(1.2rem, 0.7766990291vw + 0.9087378641rem, 2.4rem);
  --radius-xl: clamp(1.6rem, 1.0355987055vw + 1.2116504854rem, 3.2rem);
  --radius-round: 9999px;
  /* === Spacing (마진·패딩 기본 단위, fluid 적용) === */
  --spacing-xxs: clamp(0.2rem, 0.1294498382vw + 0.1514563107rem, 0.4rem);
  --spacing-xs: clamp(0.4rem, 0.2588996764vw + 0.3029126214rem, 0.8rem);
  --spacing-sm: clamp(0.6rem, 0.3883495146vw + 0.454368932rem, 1.2rem);
  --spacing-md: clamp(0.8rem, 0.5177993528vw + 0.6058252427rem, 1.6rem);
  --spacing-lg: clamp(1.2rem, 0.7766990291vw + 0.9087378641rem, 2.4rem);
  --spacing-xl: clamp(1.6rem, 1.0355987055vw + 1.2116504854rem, 3.2rem);
  --spacing-2xl: clamp(2.4rem, 1.5533980583vw + 1.8174757282rem, 4.8rem);
  --spacing-3xl: clamp(3.2rem, 2.071197411vw + 2.4233009709rem, 6.4rem);
  --spacing-4xl: clamp(4rem, 2.5889967638vw + 3.0291262136rem, 8rem);
  --spacing-5xl: clamp(6.4rem, 4.142394822vw + 4.8466019417rem, 12.8rem);
}

@font-face {
  font-family: Inter;
  src: local("Inter/Inter Light"), url("/assets/fonts/Inter/Inter-Light.woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Inter;
  src: local("Inter/Inter Regular"), url("/assets/fonts/Inter/Inter-Regular.woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Inter;
  src: local("Inter/Inter Medium"), url("/assets/fonts/Inter/Inter-Medium.woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Inter;
  src: local("Inter/Inter SemiBold"), url("/assets/fonts/Inter/Inter-SemiBold.woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Inter;
  src: local("Inter/Inter Bold"), url("/assets/fonts/Inter/Inter-Bold.woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizelegibility;
  font-size: 62.5%;
}

body {
  background: var(--clr-bg-primary);
  color: var(--clr-text-primary);
}

::selection {
  background: var(--clr-primary-700);
  color: var(--clr-base-white);
}

button,
select,
input,
textarea,
option {
  font-size: var(--body-sm-fs);
}

ul,
ol,
li {
  list-style: none;
}

a {
  color: var(--clr-primary-400);
  text-decoration: none;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
a:hover {
  color: var(--clr-primary-500);
}

img {
  width: 100%;
}

em,
address {
  font-style: normal;
}

button {
  background: none;
  border: none;
  cursor: pointer;
}

label {
  cursor: pointer;
}

textarea {
  resize: none;
}

input,
textarea,
select,
option {
  border: none;
  outline: none;
}

.no-fm-pretendard {
  font-family: var(--family-pretendard);
}

.no-fm-inter {
  font-family: var(--family-inter);
}

/* === Display === */
.no-display-xs {
  font-size: var(--display-xs-fs);
  font-weight: var(--display-xs-fw);
  line-height: var(--display-xs-lh);
}

.no-display-sm {
  font-size: var(--display-sm-fs);
  font-weight: var(--display-sm-fw);
  line-height: var(--display-sm-lh);
}

.no-display-md {
  font-size: var(--display-md-fs);
  font-weight: var(--display-md-fw);
  line-height: var(--display-md-lh);
}

.no-display-lg {
  font-size: var(--display-lg-fs);
  font-weight: var(--display-lg-fw);
  line-height: var(--display-lg-lh);
}

.no-display-xl {
  font-size: var(--display-xl-fs);
  font-weight: var(--display-xl-fw);
  line-height: var(--display-xl-lh);
}

/* === Heading === */
.no-heading-xs {
  font-size: var(--heading-xs-fs);
  font-weight: var(--heading-xs-fw);
  line-height: var(--heading-xs-lh);
}

.no-heading-sm {
  font-size: var(--heading-sm-fs);
  font-weight: var(--heading-sm-fw);
  line-height: var(--heading-sm-lh);
}

.no-heading-md {
  font-size: var(--heading-md-fs);
  font-weight: var(--heading-md-fw);
  line-height: var(--heading-md-lh);
}

.no-heading-lg {
  font-size: var(--heading-lg-fs);
  font-weight: var(--heading-lg-fw);
  line-height: var(--heading-lg-lh);
}

.no-heading-xl {
  font-size: var(--heading-xl-fs);
  font-weight: var(--heading-xl-fw);
  line-height: var(--heading-xl-lh);
}

/* === Body === */
.no-body-xs {
  font-size: var(--body-xs-fs);
  font-weight: var(--body-xs-fw);
  line-height: var(--body-xs-lh);
}

.no-body-sm {
  font-size: var(--body-sm-fs);
  font-weight: var(--body-sm-fw);
  line-height: var(--body-sm-lh);
}

.no-body-md {
  font-size: var(--body-md-fs);
  font-weight: var(--body-md-fw);
  line-height: var(--body-md-lh);
} /* 기본 본문 */
.no-body-lg {
  font-size: var(--body-lg-fs);
  font-weight: var(--body-lg-fw);
  line-height: var(--body-lg-lh);
}

.no-body-xl {
  font-size: var(--body-xl-fs);
  font-weight: var(--body-xl-fw);
  line-height: var(--body-xl-lh);
}

/* === Section spacing (padding-y) === */
.no-section-xs {
  padding-top: var(--section-xs);
  padding-bottom: var(--section-xs);
}

.no-section-sm {
  padding-top: var(--section-sm);
  padding-bottom: var(--section-sm);
}

.no-section-md {
  padding-top: var(--section-md);
  padding-bottom: var(--section-md);
}

.no-section-lg {
  padding-top: var(--section-lg);
  padding-bottom: var(--section-lg);
}

.no-section-xl {
  padding-top: var(--section-xl);
  padding-bottom: var(--section-xl);
}

/* === Border Radius === */
.no-radius-xs {
  border-radius: var(--radius-xs);
}

.no-radius-sm {
  border-radius: var(--radius-sm);
}

.no-radius-md {
  border-radius: var(--radius-md);
}

.no-radius-lg {
  border-radius: var(--radius-lg);
}

.no-radius-xl {
  border-radius: var(--radius-xl);
}

.no-radius-round {
  border-radius: var(--radius-round);
}

.no-container-3xl {
  max-width: 1920px;
  width: 100%;
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.no-container-2xl {
  max-width: 1640px;
  width: 100%;
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.no-container-xl {
  max-width: 1320px;
  width: 100%;
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.no-container-lg {
  max-width: 1024px;
  width: 100%;
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.no-container-md {
  max-width: 768px;
  width: 100%;
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.no-container-sm {
  max-width: 544px;
  width: 100%;
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.no-container-xs {
  max-width: 450px;
  width: 100%;
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.no-container-xxs {
  max-width: 375px;
  width: 100%;
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.no-mg-xxs {
  margin: var(--spacing-xxs);
}

.no-mg-xxs--l {
  margin-left: var(--spacing-xxs);
}

.no-mg-xxs--r {
  margin-right: var(--spacing-xxs);
}

.no-mg-xxs--t {
  margin-top: var(--spacing-xxs);
}

.no-mg-xxs--b {
  margin-bottom: var(--spacing-xxs);
}

.no-mg-xs {
  margin: var(--spacing-xs);
}

.no-mg-xs--l {
  margin-left: var(--spacing-xs);
}

.no-mg-xs--r {
  margin-right: var(--spacing-xs);
}

.no-mg-xs--t {
  margin-top: var(--spacing-xs);
}

.no-mg-xs--b {
  margin-bottom: var(--spacing-xs);
}

.no-mg-sm {
  margin: var(--spacing-sm);
}

.no-mg-sm--l {
  margin-left: var(--spacing-sm);
}

.no-mg-sm--r {
  margin-right: var(--spacing-sm);
}

.no-mg-sm--t {
  margin-top: var(--spacing-sm);
}

.no-mg-sm--b {
  margin-bottom: var(--spacing-sm);
}

.no-mg-md {
  margin: var(--spacing-md);
}

.no-mg-md--l {
  margin-left: var(--spacing-md);
}

.no-mg-md--r {
  margin-right: var(--spacing-md);
}

.no-mg-md--t {
  margin-top: var(--spacing-md);
}

.no-mg-md--b {
  margin-bottom: var(--spacing-md);
}

.no-mg-lg {
  margin: var(--spacing-lg);
}

.no-mg-lg--l {
  margin-left: var(--spacing-lg);
}

.no-mg-lg--r {
  margin-right: var(--spacing-lg);
}

.no-mg-lg--t {
  margin-top: var(--spacing-lg);
}

.no-mg-lg--b {
  margin-bottom: var(--spacing-lg);
}

.no-mg-xl {
  margin: var(--spacing-xl);
}

.no-mg-xl--l {
  margin-left: var(--spacing-xl);
}

.no-mg-xl--r {
  margin-right: var(--spacing-xl);
}

.no-mg-xl--t {
  margin-top: var(--spacing-xl);
}

.no-mg-xl--b {
  margin-bottom: var(--spacing-xl);
}

.no-mg-2xl {
  margin: var(--spacing-2xl);
}

.no-mg-2xl--l {
  margin-left: var(--spacing-2xl);
}

.no-mg-2xl--r {
  margin-right: var(--spacing-2xl);
}

.no-mg-2xl--t {
  margin-top: var(--spacing-2xl);
}

.no-mg-2xl--b {
  margin-bottom: var(--spacing-2xl);
}

.no-mg-3xl {
  margin: var(--spacing-3xl);
}

.no-mg-3xl--l {
  margin-left: var(--spacing-3xl);
}

.no-mg-3xl--r {
  margin-right: var(--spacing-3xl);
}

.no-mg-3xl--t {
  margin-top: var(--spacing-3xl);
}

.no-mg-3xl--b {
  margin-bottom: var(--spacing-3xl);
}

.no-mg-4xl {
  margin: var(--spacing-4xl);
}

.no-mg-4xl--l {
  margin-left: var(--spacing-4xl);
}

.no-mg-4xl--r {
  margin-right: var(--spacing-4xl);
}

.no-mg-4xl--t {
  margin-top: var(--spacing-4xl);
}

.no-mg-4xl--b {
  margin-bottom: var(--spacing-4xl);
}

.no-mg-5xl {
  margin: var(--spacing-5xl);
}

.no-mg-5xl--l {
  margin-left: var(--spacing-5xl);
}

.no-mg-5xl--r {
  margin-right: var(--spacing-5xl);
}

.no-mg-5xl--t {
  margin-top: var(--spacing-5xl);
}

.no-mg-5xl--b {
  margin-bottom: var(--spacing-5xl);
}

.no-pd-xxs {
  padding: var(--spacing-xxs);
}

.no-pd-xxs--l {
  padding-left: var(--spacing-xxs);
}

.no-pd-xxs--r {
  padding-right: var(--spacing-xxs);
}

.no-pd-xxs--t {
  padding-top: var(--spacing-xxs);
}

.no-pd-xxs--b {
  padding-bottom: var(--spacing-xxs);
}

.no-pd-xs {
  padding: var(--spacing-xs);
}

.no-pd-xs--l {
  padding-left: var(--spacing-xs);
}

.no-pd-xs--r {
  padding-right: var(--spacing-xs);
}

.no-pd-xs--t {
  padding-top: var(--spacing-xs);
}

.no-pd-xs--b {
  padding-bottom: var(--spacing-xs);
}

.no-pd-sm {
  padding: var(--spacing-sm);
}

.no-pd-sm--l {
  padding-left: var(--spacing-sm);
}

.no-pd-sm--r {
  padding-right: var(--spacing-sm);
}

.no-pd-sm--t {
  padding-top: var(--spacing-sm);
}

.no-pd-sm--b {
  padding-bottom: var(--spacing-sm);
}

.no-pd-md {
  padding: var(--spacing-md);
}

.no-pd-md--l {
  padding-left: var(--spacing-md);
}

.no-pd-md--r {
  padding-right: var(--spacing-md);
}

.no-pd-md--t {
  padding-top: var(--spacing-md);
}

.no-pd-md--b {
  padding-bottom: var(--spacing-md);
}

.no-pd-lg {
  padding: var(--spacing-lg);
}

.no-pd-lg--l {
  padding-left: var(--spacing-lg);
}

.no-pd-lg--r {
  padding-right: var(--spacing-lg);
}

.no-pd-lg--t {
  padding-top: var(--spacing-lg);
}

.no-pd-lg--b {
  padding-bottom: var(--spacing-lg);
}

.no-pd-xl {
  padding: var(--spacing-xl);
}

.no-pd-xl--l {
  padding-left: var(--spacing-xl);
}

.no-pd-xl--r {
  padding-right: var(--spacing-xl);
}

.no-pd-xl--t {
  padding-top: var(--spacing-xl);
}

.no-pd-xl--b {
  padding-bottom: var(--spacing-xl);
}

.no-pd-2xl {
  padding: var(--spacing-2xl);
}

.no-pd-2xl--l {
  padding-left: var(--spacing-2xl);
}

.no-pd-2xl--r {
  padding-right: var(--spacing-2xl);
}

.no-pd-2xl--t {
  padding-top: var(--spacing-2xl);
}

.no-pd-2xl--b {
  padding-bottom: var(--spacing-2xl);
}

.no-pd-3xl {
  padding: var(--spacing-3xl);
}

.no-pd-3xl--l {
  padding-left: var(--spacing-3xl);
}

.no-pd-3xl--r {
  padding-right: var(--spacing-3xl);
}

.no-pd-3xl--t {
  padding-top: var(--spacing-3xl);
}

.no-pd-3xl--b {
  padding-bottom: var(--spacing-3xl);
}

.no-pd-4xl {
  padding: var(--spacing-4xl);
}

.no-pd-4xl--l {
  padding-left: var(--spacing-4xl);
}

.no-pd-4xl--r {
  padding-right: var(--spacing-4xl);
}

.no-pd-4xl--t {
  padding-top: var(--spacing-4xl);
}

.no-pd-4xl--b {
  padding-bottom: var(--spacing-4xl);
}

.no-pd-5xl {
  padding: var(--spacing-5xl);
}

.no-pd-5xl--l {
  padding-left: var(--spacing-5xl);
}

.no-pd-5xl--r {
  padding-right: var(--spacing-5xl);
}

.no-pd-5xl--t {
  padding-top: var(--spacing-5xl);
}

.no-pd-5xl--b {
  padding-bottom: var(--spacing-5xl);
}

.no-heading__highlight {
  font-weight: 500;
  color: var(--clr-primary-main);
  text-transform: uppercase;
}
.no-heading__title {
  font-size: var(--heading-lg-fs);
  font-weight: var(--heading-lg-fw);
  padding-top: 1.6rem;
}
.no-heading__desc {
  color: var(--clr-text-desc);
  padding-top: 0.8rem;
}

.no-base-button {
  position: static;
  margin: 0;
  width: 2.7rem;
  height: 4.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.4rem;
  background: var(--clr-bg-secondary);
}
.no-base-button i {
  color: var(--clr-text-desc);
  font-size: 1.6rem;
}
.no-base-button::after {
  content: none;
}

.no-base-controls {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.no-bedge-outline, .no-bedge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  border-radius: 10rem;
}

.no-bedge {
  color: var(--clr-base-white);
  background: var(--clr-text-base);
}
.no-bedge-outline {
  background-color: transparent;
  color: var(--clr-text-base);
  border: 1px solid var(--clr-text-base);
}
.no-bedge--xs {
  line-height: 1;
  font-size: 1.2rem;
  padding: 0.4rem 0.8rem;
  border-radius: 5.5rem;
}

.no-section-hr {
  height: 0;
  border-top: 0.1rem solid var(--clr-border-primary);
}

.no-hr {
  margin: 0;
  border: none;
}
.no-hr--lg {
  height: 0.1rem;
  width: 100%;
  background-color: var(--clr-border-primary);
  margin: clamp(2.4rem, 1.5533980583vw + 1.8174757282rem, 4.8rem) 0;
}

.no-bg--gray {
  background: var(--clr-bg-secondary);
}
.no-bg--primary-light {
  background: var(--clr-primary-50);
}

body.no-modal-open {
  overflow: hidden;
}

.--hidden {
  overflow: hidden;
}

.--full-height {
  height: 100vh;
}
@supports (height: 100dvh) {
  .--full-height {
    height: 100dvh;
  }
}

.--flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.--flex-column {
  flex-direction: column;
}

.--flex-end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.--tal {
  text-align: left;
}

.--tar {
  text-align: right;
}

.--tac {
  text-align: center;
}

@media (max-width: 768px) {
  .--wrap * br {
    display: none;
  }
}

.--blind {
  position: absolute;
  width: 1px;
  height: 1px;
  clip: rect(0 0 0 0);
  overflow: hidden;
}

.--highlight {
  color: var(--clr-primary-main);
}

.--gap-8 {
  gap: 0.8rem;
}

.--clr-text-desc {
  color: var(--clr-text-desc);
}

.--clr-secondary-main {
  color: var(--clr-secondary-main);
}

.--clr-primary-main {
  color: var(--clr-primary-main);
}

.--thin {
  font-weight: 100;
}

.--extralight {
  font-weight: 200;
}

.--light {
  font-weight: 300;
}

.--regular {
  font-weight: 400;
}

.--medium {
  font-weight: 500;
}

.--semibold {
  font-weight: 600;
}

.--bold {
  font-weight: 700;
}

.--extrabold {
  font-weight: 800;
}

.--black {
  font-weight: 900;
}

.--ttu {
  text-transform: uppercase;
}

.--ttc {
  text-transform: capitalize;
}

.--ttl {
  text-transform: lowercase;
}

@media (max-width: 768px) {
  .--wrap-md br {
    display: none;
  }
}

.--highlight {
  color: var(--clr-secondary-main);
  font-weight: 600;
}

@media (max-width: 768px) {
  .hide-mobile {
    display: none !important;
  }
}

@media (max-width: 1024px) {
  .hide-desktop {
    display: none !important;
  }
}

.show-mobile {
  display: none !important;
}
@media (max-width: 768px) {
  .show-mobile {
    display: block !important;
  }
}

.show-desktop {
  display: none !important;
}
@media (max-width: 1024px) {
  .show-desktop {
    display: block !important;
  }
}

.text-responsive {
  font-size: 14px;
}
@media (max-width: 544px) {
  .text-responsive {
    font-size: 15px;
  }
}
@media (max-width: 768px) {
  .text-responsive {
    font-size: 16px;
  }
}

.p-responsive {
  padding: 16px;
}
@media (max-width: 544px) {
  .p-responsive {
    padding: 20px;
  }
}
@media (max-width: 768px) {
  .p-responsive {
    padding: 24px;
  }
}

.m-responsive {
  margin: 16px;
}
@media (max-width: 544px) {
  .m-responsive {
    margin: 20px;
  }
}
@media (max-width: 768px) {
  .m-responsive {
    margin: 24px;
  }
}

.no-admin-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--clr-bg-secondary);
}
.no-admin-layout__body {
  display: flex;
  flex: 1;
  overflow: hidden;
  position: relative;
  gap: 0;
  padding-top: 6.4rem;
}
@media (max-width: 1024px) {
  .no-admin-layout__body {
    gap: 0;
  }
}
.no-admin-layout__main {
  flex: 1;
  overflow-y: auto;
  padding: 2.4rem;
  margin-left: 0;
  transition: margin-left 0.3s ease;
  width: 100%;
  background-color: var(--clr-bg-secondary);
  min-width: 0;
}
@media (min-width: 1024px) {
  .no-admin-layout__main {
    padding: 3.2rem;
    margin-left: 0;
    width: auto;
    flex: 1;
  }
}
.no-admin-layout__sidebar-overlay {
  display: none;
  position: fixed;
  top: 6.4rem;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 85;
  opacity: 0;
  transition: opacity 0.3s ease;
}
@media (min-width: 1024px) {
  .no-admin-layout__sidebar-overlay {
    display: none !important;
  }
}
.no-admin-layout__sidebar-overlay--visible {
  display: block;
  opacity: 1;
}

.no-home-layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--clr-bg-primary);
  position: relative;
}
.no-home-layout__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-top: 6.4rem;
}
.no-home-layout__main {
  width: 100%;
  max-width: 102.4rem;
  margin: 0 auto;
  padding: 2rem;
  flex: 1;
}
@media (max-width: 544px) {
  .no-home-layout__main {
    padding: 2.4rem;
  }
}
@media (max-width: 768px) {
  .no-home-layout__main {
    padding: 3.2rem;
  }
}

.no-auth-layout {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, var(--clr-primary-50) 0%, var(--clr-primary-100) 25%, var(--clr-gray-50) 50%, var(--clr-gray-100) 75%, var(--clr-bg-secondary) 100%);
  padding: 2rem;
  position: relative;
  overflow: hidden;
}
@media (max-width: 544px) {
  .no-auth-layout {
    padding: 2.4rem;
  }
}
@media (max-width: 768px) {
  .no-auth-layout {
    padding: 3.2rem;
  }
}
.no-auth-layout__content {
  width: 100%;
  max-width: 44rem;
  position: relative;
  z-index: 1;
}

.no-header__notification-btn, .no-header__profile-btn, .no-header__actions__locale-btn, .no-header__actions #locale-toggle-container .no-theme-toggle__button, .no-header__actions #theme-toggle-container .no-theme-toggle__button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  color: var(--clr-base-white);
  cursor: pointer;
  padding: 0;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  background: rgba(255, 255, 255, 0.1);
  border: 0.1rem solid rgba(255, 255, 255, 0.2);
}
.no-header__notification-btn:hover, .no-header__profile-btn:hover, .no-header__actions__locale-btn:hover, .no-header__actions #locale-toggle-container .no-theme-toggle__button:hover, .no-header__actions #theme-toggle-container .no-theme-toggle__button:hover {
  background-color: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
}
.no-header__notification-btn:focus, .no-header__profile-btn:focus, .no-header__actions__locale-btn:focus, .no-header__actions #locale-toggle-container .no-theme-toggle__button:focus, .no-header__actions #theme-toggle-container .no-theme-toggle__button:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.3);
}
.no-header__notification-btn:active, .no-header__profile-btn:active, .no-header__actions__locale-btn:active, .no-header__actions #locale-toggle-container .no-theme-toggle__button:active, .no-header__actions #theme-toggle-container .no-theme-toggle__button:active {
  background: rgba(255, 255, 255, 0.3);
}
.no-header__notification-btn svg, .no-header__profile-btn svg, .no-header__actions__locale-btn svg, .no-header__actions #locale-toggle-container .no-theme-toggle__button svg, .no-header__actions #theme-toggle-container .no-theme-toggle__button svg {
  width: 2rem;
  height: 2rem;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (max-width: 768px) {
  .no-header__notification-btn:hover svg, .no-header__profile-btn:hover svg, .no-header__actions__locale-btn:hover svg, .no-header__actions #locale-toggle-container .no-theme-toggle__button:hover svg, .no-header__actions #theme-toggle-container .no-theme-toggle__button:hover svg {
    opacity: 0.9;
  }
}
@media (max-width: 544px) {
  .no-header__notification-btn, .no-header__profile-btn, .no-header__actions__locale-btn, .no-header__actions #locale-toggle-container .no-theme-toggle__button, .no-header__actions #theme-toggle-container .no-theme-toggle__button {
    width: 3.2rem;
    height: 3.2rem;
  }
  .no-header__notification-btn svg, .no-header__profile-btn svg, .no-header__actions__locale-btn svg, .no-header__actions #locale-toggle-container .no-theme-toggle__button svg, .no-header__actions #theme-toggle-container .no-theme-toggle__button svg {
    width: 1.6rem;
    height: 1.6rem;
  }
}

.no-header {
  background: linear-gradient(135deg, var(--clr-base-primary-700) 0%, var(--clr-base-primary-900) 50%, var(--clr-base-primary-800) 100%);
  color: var(--clr-base-white);
  padding: 0 3.2rem;
  height: 6.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.15), 0 0.1rem 0.2rem rgba(0, 0, 0, 0.1);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 100;
  min-width: 0;
}
@media (max-width: 768px) {
  .no-header {
    padding: 0 2.4rem;
  }
}
@media (max-width: 544px) {
  .no-header {
    padding: 0 1.6rem;
  }
}
.no-header__left {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  min-width: 0;
}
.no-header__logo {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--clr-base-white);
  text-decoration: none;
  transition: opacity 0.2s ease;
  max-width: clamp(8rem, 5.1779935275vw + 6.0582524272rem, 16rem);
  min-width: 0;
  overflow: hidden;
}
.no-header__logo:hover {
  opacity: 0.9;
}
.no-header__logo-img {
  display: block;
}
.no-header__logo-img--light {
  display: none;
}
.no-header__logo-img--dark {
  display: block;
}
.no-header__logo-text {
  display: none;
  line-height: 1;
}
.no-header__menu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  background: none;
  border: none;
  color: var(--clr-base-white);
  cursor: pointer;
  padding: 0;
  margin-right: 1.2rem;
  border-radius: 0.4rem;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}
@media (min-width: 1024px) {
  .no-header__menu-toggle {
    display: none;
  }
}
@media (max-width: 768px) {
  .no-header__menu-toggle:hover {
    background-color: rgba(255, 255, 255, 0.15);
  }
}
.no-header__menu-toggle:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.3);
}
.no-header__menu-toggle:active {
  background-color: rgba(255, 255, 255, 0.25);
}
.no-header__menu-toggle svg {
  width: 2.4rem;
  height: 2.4rem;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.no-header__menu-toggle:hover svg {
  transform: rotate(90deg);
}
@media (max-width: 544px) {
  .no-header__menu-toggle {
    width: 3.2rem;
    height: 3.2rem;
    margin-right: 0.8rem;
  }
  .no-header__menu-toggle svg {
    width: 2rem;
    height: 2rem;
  }
}
.no-header__actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: nowrap;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .no-header__actions {
    gap: 1.2rem;
  }
}
@media (max-width: 544px) {
  .no-header__actions {
    gap: 0.5rem;
  }
}
.no-header__actions #theme-toggle-container .no-theme-toggle__button .no-theme-toggle__icon,
.no-header__actions #theme-toggle-container .no-theme-toggle__button .no-theme-toggle__text {
  color: var(--clr-base-white);
}
.no-header__actions #theme-toggle-container .no-theme-toggle__dropdown {
  background: var(--clr-bg-elevated);
  border-color: var(--clr-border-primary);
  box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.25);
}
.no-header__actions #theme-toggle-container .no-theme-toggle__dropdown .no-theme-toggle__option {
  color: var(--clr-text-primary);
  transition: all 0.2s ease;
  cursor: pointer;
}
.no-header__actions #theme-toggle-container .no-theme-toggle__dropdown .no-theme-toggle__option span {
  color: var(--clr-text-primary);
  font-weight: 500;
  transition: color 0.2s ease;
}
.no-header__actions #theme-toggle-container .no-theme-toggle__dropdown .no-theme-toggle__option i:first-child {
  color: var(--clr-text-secondary);
  transition: color 0.2s ease, transform 0.2s ease;
}
.no-header__actions #theme-toggle-container .no-theme-toggle__dropdown .no-theme-toggle__option .no-theme-toggle__check {
  color: var(--clr-primary-600);
  transition: color 0.2s ease, transform 0.2s ease;
}
.no-header__actions #theme-toggle-container .no-theme-toggle__dropdown .no-theme-toggle__option:hover {
  background: var(--clr-bg-tertiary);
  color: var(--clr-primary-600);
}
.no-header__actions #theme-toggle-container .no-theme-toggle__dropdown .no-theme-toggle__option:hover span {
  color: var(--clr-primary-600);
  font-weight: 600;
}
.no-header__actions #theme-toggle-container .no-theme-toggle__dropdown .no-theme-toggle__option:hover i:first-child {
  color: var(--clr-primary-600);
}
.no-header__actions #theme-toggle-container .no-theme-toggle__dropdown .no-theme-toggle__option:hover .no-theme-toggle__check {
  color: var(--clr-primary-700);
}
.no-header__actions #theme-toggle-container .no-theme-toggle__dropdown .no-theme-toggle__option:focus {
  outline: none;
  background: var(--clr-bg-tertiary);
  color: var(--clr-primary-600);
  box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.2);
}
.no-header__actions #theme-toggle-container .no-theme-toggle__dropdown .no-theme-toggle__option:focus span {
  color: var(--clr-primary-600);
  font-weight: 600;
}
.no-header__actions #theme-toggle-container .no-theme-toggle__dropdown .no-theme-toggle__option:focus i:first-child {
  color: var(--clr-primary-600);
}
.no-header__actions #theme-toggle-container .no-theme-toggle__dropdown .no-theme-toggle__option:focus .no-theme-toggle__check {
  color: var(--clr-primary-700);
}
.no-header__actions #theme-toggle-container .no-theme-toggle__dropdown .no-theme-toggle__option:active {
  background: var(--clr-bg-tertiary);
  transition: all 0.1s ease;
}
.no-header__actions #locale-toggle-container .no-theme-toggle__button .no-theme-toggle__icon,
.no-header__actions #locale-toggle-container .no-theme-toggle__button .no-theme-toggle__text {
  color: var(--clr-base-white);
}
.no-header__actions #locale-toggle-container .no-theme-toggle__dropdown {
  background: var(--clr-bg-elevated);
  border-color: var(--clr-border-primary);
  box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.25);
}
.no-header__actions #locale-toggle-container .no-theme-toggle__dropdown .no-theme-toggle__option {
  color: var(--clr-text-primary);
  transition: all 0.2s ease;
  cursor: pointer;
}
.no-header__actions #locale-toggle-container .no-theme-toggle__dropdown .no-theme-toggle__option span {
  color: var(--clr-text-primary);
  font-weight: 500;
  transition: color 0.2s ease;
}
.no-header__actions #locale-toggle-container .no-theme-toggle__dropdown .no-theme-toggle__option i:first-child {
  color: var(--clr-text-secondary);
  transition: color 0.2s ease, transform 0.2s ease;
}
.no-header__actions #locale-toggle-container .no-theme-toggle__dropdown .no-theme-toggle__option .no-theme-toggle__check {
  color: var(--clr-primary-600);
  transition: color 0.2s ease, transform 0.2s ease;
}
.no-header__actions #locale-toggle-container .no-theme-toggle__dropdown .no-theme-toggle__option:hover {
  background: var(--clr-bg-tertiary);
  color: var(--clr-primary-600);
}
.no-header__actions #locale-toggle-container .no-theme-toggle__dropdown .no-theme-toggle__option:hover span {
  color: var(--clr-primary-600);
  font-weight: 600;
}
.no-header__actions #locale-toggle-container .no-theme-toggle__dropdown .no-theme-toggle__option:hover i:first-child {
  color: var(--clr-primary-600);
}
.no-header__actions #locale-toggle-container .no-theme-toggle__dropdown .no-theme-toggle__option:hover .no-theme-toggle__check {
  color: var(--clr-primary-700);
}
.no-header__actions #locale-toggle-container .no-theme-toggle__dropdown .no-theme-toggle__option:focus {
  outline: none;
  background: var(--clr-bg-tertiary);
  color: var(--clr-primary-600);
  box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.2);
}
.no-header__actions #locale-toggle-container .no-theme-toggle__dropdown .no-theme-toggle__option:focus span {
  color: var(--clr-primary-600);
  font-weight: 600;
}
.no-header__actions #locale-toggle-container .no-theme-toggle__dropdown .no-theme-toggle__option:focus i:first-child {
  color: var(--clr-primary-600);
}
.no-header__actions #locale-toggle-container .no-theme-toggle__dropdown .no-theme-toggle__option:focus .no-theme-toggle__check {
  color: var(--clr-primary-700);
}
.no-header__actions #locale-toggle-container .no-theme-toggle__dropdown .no-theme-toggle__option:active {
  background: var(--clr-bg-tertiary);
  transition: all 0.1s ease;
}
.no-header__actions__locale {
  position: relative;
}
.no-header__actions__locale-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.no-header__actions__locale-btn .no-header__locale-icon {
  font-size: 1.8rem;
  color: var(--clr-base-white);
}
.no-header__actions__locale-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 0.4rem;
  min-width: 12rem;
  background: var(--clr-bg-elevated);
  border: 0.1rem solid var(--clr-border-primary);
  border-radius: 0.6rem;
  box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.25);
  z-index: 100;
  display: none;
  overflow: hidden;
}
.no-header__actions__locale-dropdown--open {
  display: block;
}
.no-header__actions__locale-form {
  display: block;
  margin: 0;
}
.no-header__actions__locale-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.6rem 1rem;
  border: none;
  background: transparent;
  color: var(--clr-text-primary);
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s ease;
  text-align: left;
}
.no-header__actions__locale-option:hover {
  background: var(--clr-bg-tertiary);
}
.no-header__actions__locale-option--active {
  background: var(--clr-bg-tertiary);
  font-weight: 600;
  color: var(--clr-primary-600);
}
.no-header__profile {
  position: relative;
}
.no-header__profile-btn {
  background: var(--clr-base-primary-500);
  border: 0.1rem solid var(--clr-base-primary-400);
}
.no-header__profile-btn:hover {
  background-color: var(--clr-base-primary-400);
  border-color: var(--clr-base-primary-300);
}
.no-header__profile-btn:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem var(--clr-base-primary-300);
}
.no-header__profile-btn:active {
  background: var(--clr-base-primary-300);
}
.no-header__profile-btn--active {
  background: var(--clr-base-primary-300);
  border-color: var(--clr-base-primary-200);
  box-shadow: 0 0 0 0.2rem var(--clr-base-primary-300);
}
.no-header__profile-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1;
}
@media (max-width: 544px) {
  .no-header__profile-avatar {
    font-size: 1.3rem;
  }
}
.no-header__profile-sheet-bar {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.2rem 1.6rem;
  border-bottom: 0.1rem solid var(--clr-border-secondary);
  background: var(--clr-bg-elevated);
  flex-shrink: 0;
}
.no-header__profile-sheet-title {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--clr-text-primary);
  letter-spacing: -0.02em;
}
.no-header__profile-sheet-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.4rem;
  height: 4.4rem;
  padding: 0;
  border: none;
  border-radius: 0.8rem;
  background: transparent;
  color: var(--clr-text-secondary);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.no-header__profile-sheet-close i {
  font-size: 1.8rem;
}
@media (max-width: 768px) {
  .no-header__profile-sheet-close:hover {
    background: var(--clr-bg-tertiary);
    color: var(--clr-text-primary);
  }
}
.no-header__profile-sheet-close:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.25);
}
.no-header__profile-dropdown {
  position: absolute;
  top: calc(100% + 0.8rem);
  right: 0;
  width: 28rem;
  background: var(--clr-bg-elevated);
  border: 0.1rem solid var(--clr-border-primary);
  border-radius: 1.2rem;
  box-shadow: 0 0.8rem 2.4rem rgba(0, 0, 0, 0.2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-1rem);
  transition: all 0.2s ease;
  z-index: 1000;
  overflow: hidden;
}
.no-header__profile-dropdown--open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
@media (max-width: 768px) {
  .no-header__profile-dropdown--open {
    position: fixed;
    inset: 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: none;
    min-height: 100vh;
    min-height: 100dvh;
    border-radius: 0;
    border: none;
    box-shadow: none;
    z-index: 1100;
    transform: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-top: env(safe-area-inset-top, 0);
    padding-right: env(safe-area-inset-right, 0);
    padding-bottom: env(safe-area-inset-bottom, 0);
    padding-left: env(safe-area-inset-left, 0);
    display: flex;
    flex-direction: column;
  }
  .no-header__profile-dropdown--open .no-header__profile-sheet-bar {
    display: flex;
  }
}
.no-header__profile-header {
  position: relative;
  padding-bottom: 0;
  margin-bottom: 0;
}
.no-header__profile-banner {
  height: 8rem;
  background: linear-gradient(135deg, #ff6b6b 0%, #4ecdc4 50%, #45b7d1 100%);
  position: relative;
  overflow: hidden;
}
.no-header__profile-banner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 107, 107, 0.8) 0%, rgba(78, 205, 196, 0.8) 50%, rgba(69, 183, 209, 0.8) 100%);
}
.no-header__profile-info {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 1.6rem 2rem;
  margin-top: -3.2rem;
  z-index: 1;
}
.no-header__profile-avatar-large {
  width: 6.4rem;
  height: 6.4rem;
  background: var(--clr-primary-500);
  border: 0.3rem solid var(--clr-bg-elevated);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
  font-weight: 600;
  color: var(--clr-base-white);
  margin-bottom: 1.2rem;
  box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}
.no-header__profile-name {
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--clr-text-primary);
  margin-bottom: 0.6rem;
  text-align: center;
  line-height: 1.4;
  word-break: break-word;
}
.no-header__profile-email {
  font-size: 1.3rem;
  color: var(--clr-text-secondary);
  text-align: center;
  word-break: break-all;
  line-height: 1.4;
  max-width: 100%;
  padding: 0 0.8rem;
}
.no-header__profile-menu {
  padding: 1.6rem 0;
  border-top: 0.1rem solid var(--clr-border-secondary);
  border-bottom: 0.1rem solid var(--clr-border-secondary);
}
.no-header__profile-menu-item {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.2rem 1.6rem;
  color: var(--clr-text-primary);
  text-decoration: none;
  font-size: 1.4rem;
  transition: all 0.2s ease;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}
.no-header__profile-menu-item i:first-child {
  width: 2rem;
  color: var(--clr-text-secondary);
  font-size: 1.4rem;
}
.no-header__profile-menu-item i:last-child {
  margin-left: auto;
  color: var(--clr-text-tertiary);
  font-size: 1.2rem;
}
.no-header__profile-menu-item:hover {
  background: var(--clr-bg-tertiary);
  color: var(--clr-primary-600);
}
.no-header__profile-menu-item:hover i:first-child {
  color: var(--clr-primary-500);
}
.no-header__profile-menu-item:hover i:last-child {
  color: var(--clr-text-secondary);
  opacity: 0.8;
}
.no-header__profile-menu-item:focus {
  outline: none;
  background: var(--clr-bg-tertiary);
  color: var(--clr-primary-600);
  box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.2);
}
.no-header__profile-menu-item:focus i:first-child {
  color: var(--clr-primary-600);
}
.no-header__profile-menu-item:active {
  background: var(--clr-bg-tertiary);
  transition: all 0.1s ease;
}
.no-header__profile-menu-item--logout {
  color: var(--clr-danger-600);
}
.no-header__profile-menu-item--logout i:first-child {
  color: var(--clr-danger-600);
}
.no-header__profile-menu-item--logout:hover {
  background: var(--clr-danger-50);
  color: var(--clr-danger-700);
}
.no-header__profile-menu-item--logout:hover i:first-child {
  color: var(--clr-danger-700);
}
.no-header__profile-footer {
  padding: 0.8rem 0;
}
.no-header__profile-logout-form {
  display: block;
}
.no-header__notification {
  position: relative;
}
.no-header__notification-badge {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  background-color: var(--clr-danger-500);
  color: var(--clr-base-white);
  font-size: 1rem;
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  border-radius: 1rem;
  min-width: 1.8rem;
  height: 1.8rem;
  text-align: center;
  line-height: 1.4;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0.2rem solid var(--clr-primary-700);
  box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.2);
}
.no-header__notification-badge--visible {
  display: flex;
}
.no-header__notification-badge--hidden {
  display: none;
}
@media (max-width: 544px) {
  .no-header__notification-badge {
    top: 0.25rem;
    right: 0.25rem;
    min-width: 1.5rem;
    height: 1.5rem;
    font-size: 0.85rem;
    padding: 0.1rem 0.35rem;
  }
}
.no-header__notification-dropdown {
  position: absolute;
  top: calc(100% + 0.8rem);
  right: 0;
  width: 38rem;
  max-width: calc(100vw - 3.2rem);
  background-color: var(--clr-bg-elevated);
  border-radius: 1.2rem;
  box-shadow: 0 0.8rem 2.4rem rgba(0, 0, 0, 0.15), 0 0.2rem 0.4rem rgba(0, 0, 0, 0.1);
  display: none;
  flex-direction: column;
  max-height: 52rem;
  z-index: 1000;
  overflow: hidden;
  border: 0.1rem solid var(--clr-border-primary);
}
@media (max-width: 768px) {
  .no-header__notification-dropdown {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    max-height: none;
    border-radius: 0;
    border: none;
    box-shadow: none;
    z-index: 1100;
    padding-top: env(safe-area-inset-top, 0);
    padding-bottom: env(safe-area-inset-bottom, 0);
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
  }
}
.no-header__notification-dropdown--open {
  display: flex;
}
.no-header__notification-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.6rem 2rem;
  border-bottom: 0.1rem solid var(--clr-border-secondary);
  background: var(--clr-bg-elevated);
  flex-shrink: 0;
}
@media (max-width: 544px) {
  .no-header__notification-header {
    padding: 1.2rem 1.6rem;
  }
}
.no-header__notification-header h3 {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--clr-text-primary);
  letter-spacing: -0.02em;
}
@media (max-width: 544px) {
  .no-header__notification-header h3 {
    font-size: 1.4rem;
  }
}
.no-header__notification-read-all {
  display: inline;
}
.no-header__notification-read-all button {
  background: none;
  border: none;
  color: var(--clr-primary-600);
  font-size: 1.3rem;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  transition: color 0.2s ease;
}
.no-header__notification-read-all button:hover {
  color: var(--clr-primary-700);
  text-decoration: underline;
}
.no-header__notification-list {
  flex: 1;
  overflow-y: auto;
  max-height: 40rem;
  min-height: 20rem;
}
@media (max-width: 768px) {
  .no-header__notification-list {
    max-height: none;
    min-height: 0;
    flex: 1 1 auto;
  }
}
.no-header__notification-list::-webkit-scrollbar {
  width: 0.6rem;
}
.no-header__notification-list::-webkit-scrollbar-track {
  background: var(--clr-bg-secondary);
}
.no-header__notification-list::-webkit-scrollbar-thumb {
  background: var(--clr-border-secondary);
  border-radius: 0.3rem;
}
.no-header__notification-list::-webkit-scrollbar-thumb:hover {
  background: var(--clr-text-tertiary);
}
.no-header__notification-loading {
  padding: 2.4rem;
  text-align: center;
  color: var(--clr-text-tertiary);
  font-size: 1.4rem;
}
.no-header__notification-item {
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
  padding: 1.2rem 1.6rem;
  border-bottom: 0.1rem solid var(--clr-border-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}
.no-header__notification-item:hover {
  background-color: var(--clr-bg-secondary);
}
.no-header__notification-item--unread {
  background-color: var(--clr-info-50);
  position: relative;
}
.no-header__notification-item--unread::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0.3rem;
  background: var(--clr-primary-600);
}
.no-header__notification-item:last-child {
  border-bottom: none;
}
.no-header__notification-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 50%;
  background: var(--clr-primary-100);
  color: var(--clr-primary-600);
  font-size: 1.6rem;
  flex-shrink: 0;
  transition: all 0.2s ease;
}
.no-header__notification-item:hover .no-header__notification-item-icon {
  background: var(--clr-primary-200);
}
.no-header__notification-item-content {
  flex: 1;
  min-width: 0;
}
.no-header__notification-item-title {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--clr-text-primary);
  margin: 0 0 0.4rem 0;
  line-height: 1.4;
  transition: color 0.2s ease;
}
.no-header__notification-item-message {
  font-size: 1.3rem;
  color: var(--clr-text-secondary);
  margin: 0 0 0.6rem 0;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.no-header__notification-item-time {
  font-size: 1.2rem;
  color: var(--clr-text-tertiary);
  font-weight: 500;
}
.no-header__notification-item:hover .no-header__notification-item-title {
  color: var(--clr-primary-600);
}
.no-header__notification-read-form {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-left: auto;
}
.no-header__notification-read-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  background: var(--clr-bg-tertiary);
  border: 0.1rem solid var(--clr-border-secondary);
  color: var(--clr-text-secondary);
  cursor: pointer;
  padding: 0;
  transition: all 0.2s ease;
  font-size: 1.4rem;
  flex-shrink: 0;
}
.no-header__notification-read-btn:hover {
  background: var(--clr-primary-100);
  border-color: var(--clr-primary-300);
  color: var(--clr-primary-600);
}
.no-header__notification-read-btn:active {
  transform: scale(0.95);
}
.no-header__notification-read-btn i {
  pointer-events: none;
}
.no-header__notification-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4.8rem 2.4rem;
  text-align: center;
  min-height: 20rem;
}
.no-header__notification-empty-icon {
  width: 6.4rem;
  height: 6.4rem;
  border-radius: 50%;
  background: var(--clr-bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.6rem;
  position: relative;
}
.no-header__notification-empty-icon::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 0.2rem solid var(--clr-border-secondary);
}
.no-header__notification-empty-icon i {
  font-size: 2.4rem;
  color: var(--clr-text-tertiary);
  position: relative;
  z-index: 1;
}
.no-header__notification-empty-text {
  color: var(--clr-text-secondary);
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.5;
}
.no-header__notification-footer {
  padding: 1.2rem 2rem;
  border-top: 0.1rem solid var(--clr-border-secondary);
  text-align: center;
  background: var(--clr-bg-elevated);
  flex-shrink: 0;
}
.no-header__notification-footer a {
  color: var(--clr-primary-600);
  font-size: 1.4rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
  display: inline-block;
}
.no-header__notification-footer a:hover {
  color: var(--clr-primary-700);
  text-decoration: underline;
}

.no-sidebar {
  padding: 2rem 0;
  width: 100%;
  max-width: 24rem;
  background-color: var(--clr-bg-elevated);
  border-right: 0.1rem solid var(--clr-border-primary);
  position: relative;
  top: 0;
  transform: translateX(0);
}
@media (max-width: 1024px) {
  .no-sidebar {
    padding: 2rem 0;
    background-color: var(--clr-bg-secondary);
    border-right: 0.1rem solid var(--clr-border-primary);
    overflow-y: auto;
    flex-shrink: 0;
    position: fixed;
    left: 0;
    top: 6.4rem;
    bottom: 0;
    z-index: 90;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }
}
.no-sidebar.--open {
  transform: translateX(0);
}
.no-sidebar__nav {
  padding: 0;
}
.no-sidebar__menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
.no-sidebar__item {
  margin: 0;
}
.no-sidebar__link {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  color: var(--clr-text-secondary);
  text-decoration: none;
  font-size: 1.4rem;
  font-weight: 500;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  border-left: 0.3rem solid transparent;
  background-color: transparent;
  position: relative;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  padding: 1.2rem 2.4rem;
  margin: 0 1.2rem;
  border-radius: 0.8rem;
}
@media (max-width: 1024px) {
  .no-sidebar__link {
    padding: 1.2rem 2rem;
    margin: 0 0.8rem;
  }
}
.no-sidebar__link:hover {
  background-color: var(--clr-bg-tertiary);
  color: var(--clr-text-primary);
}
.no-sidebar__link:hover .no-sidebar__icon {
  color: var(--clr-primary-500);
}
.no-sidebar__link:focus {
  outline: none;
  background-color: var(--clr-bg-tertiary);
  color: var(--clr-text-primary);
  box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.2);
}
.no-sidebar__link:focus .no-sidebar__icon {
  color: var(--clr-primary-500);
}
.no-sidebar__link:active {
  background-color: var(--clr-bg-tertiary);
  color: var(--clr-text-primary);
}
.no-sidebar__link:active .no-sidebar__icon {
  color: var(--clr-primary-500);
}
.no-sidebar__link--active {
  background-color: var(--clr-primary-50);
  border-left-color: var(--clr-primary-600);
  color: var(--clr-primary-700);
  font-weight: 600;
  box-shadow: inset 0.3rem 0 0 var(--clr-primary-600);
}
.no-sidebar__link--active .no-sidebar__icon {
  color: var(--clr-primary-600);
}
.no-sidebar__link--active:hover {
  background-color: var(--clr-primary-100);
}
.no-sidebar__link--active:focus, .no-sidebar__link--active:active {
  box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.2);
  border-left-color: transparent;
}
.no-sidebar__icon {
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  color: var(--clr-text-secondary);
}
.no-sidebar__text {
  flex: 1;
  line-height: 1.5;
  letter-spacing: -0.01em;
}
.no-sidebar__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.6rem;
  border-radius: 1rem;
  background-color: var(--clr-primary-400);
  color: var(--clr-base-white);
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1;
  margin-left: auto;
  flex-shrink: 0;
  transition: all 0.2s ease;
}
@media (max-width: 1024px) {
  .no-sidebar__badge {
    min-width: 1.8rem;
    height: 1.8rem;
    padding: 0 0.5rem;
    font-size: 1rem;
  }
}
.no-sidebar__badge--visible {
  display: inline-flex;
}
.no-sidebar__badge--hidden {
  display: none;
}
.no-sidebar__link:hover .no-sidebar__badge {
  background-color: var(--clr-primary-600);
  transform: scale(1.05);
}
.no-sidebar__link--active .no-sidebar__badge {
  background-color: var(--clr-primary-700);
}
.no-sidebar__arrow {
  font-size: 1.2rem;
  color: var(--clr-text-tertiary);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  margin-left: auto;
  flex-shrink: 0;
}
.no-sidebar__link--active .no-sidebar__arrow {
  color: var(--clr-primary-600);
}
.no-sidebar__item--open .no-sidebar__link--active .no-sidebar__arrow {
  color: var(--clr-primary-500);
}
.no-sidebar__link:hover .no-sidebar__arrow {
  color: var(--clr-primary-500);
}
.no-sidebar__item--open .no-sidebar__arrow {
  color: var(--clr-primary-500);
}
.no-sidebar__submenu {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s cubic-bezier(0.4, 0, 0.2, 1), margin 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background-color: transparent;
  border-radius: 0.8rem;
  opacity: 0;
  visibility: hidden;
}
@media (max-width: 1024px) {
  .no-sidebar__submenu {
    margin: 0;
  }
}
.no-sidebar__item--open .no-sidebar__submenu {
  max-height: 50rem;
  padding: 0.8rem 0;
  margin: 0.4rem 0.8rem 0;
  opacity: 1;
  visibility: visible;
  background-color: var(--clr-bg-secondary);
}
@media (max-width: 1024px) {
  .no-sidebar__item--open .no-sidebar__submenu {
    margin: 0.4rem 1.2rem 0;
  }
}
.no-sidebar__item--open .no-sidebar__arrow {
  transform: rotate(180deg);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  color: var(--clr-primary-500);
}
.no-sidebar__item--open .no-sidebar__link:not(.no-sidebar__link--active) {
  background-color: var(--clr-bg-tertiary);
  color: var(--clr-text-primary);
  border-left-color: transparent;
}
.no-sidebar__item--open .no-sidebar__link:not(.no-sidebar__link--active) .no-sidebar__icon {
  color: var(--clr-primary-500);
}
@media (max-width: 768px) {
  .no-sidebar__item--open .no-sidebar__link:not(.no-sidebar__link--active):hover {
    background-color: var(--clr-bg-secondary);
  }
}
.no-sidebar__subitem {
  margin: 0;
}
.no-sidebar__sublink {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1rem 2rem 1rem 5.6rem;
  color: var(--clr-text-secondary);
  text-decoration: none;
  font-size: 1.3rem;
  font-weight: 500;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  border-radius: 0.6rem;
  margin: 0 0.4rem;
  border-left: none;
  background-color: transparent;
}
.no-sidebar__sublink i:first-child {
  width: 1.6rem;
  font-size: 1.3rem;
  color: var(--clr-text-tertiary);
  text-align: center;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.no-sidebar__sublink span {
  flex: 1;
  line-height: 1.5;
  transition: color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.no-sidebar__sublink:hover {
  background-color: var(--clr-bg-secondary);
  color: var(--clr-primary-600);
}
.no-sidebar__sublink:hover i:first-child {
  color: var(--clr-primary-500);
}
.no-sidebar__sublink:hover span {
  color: var(--clr-primary-600);
}
.no-sidebar__sublink:focus {
  outline: none;
  background-color: var(--clr-bg-secondary);
  color: var(--clr-primary-600);
  box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.2);
}
.no-sidebar__sublink:focus i:first-child {
  color: var(--clr-primary-600);
}
.no-sidebar__sublink:focus span {
  color: var(--clr-primary-600);
}
.no-sidebar__sublink:active {
  background-color: var(--clr-bg-secondary);
  transition: all 0.1s ease;
  color: var(--clr-primary-600);
}
.no-sidebar__sublink:active i:first-child {
  color: var(--clr-primary-500);
}
.no-sidebar__sublink:active span {
  color: var(--clr-primary-600);
}
.no-sidebar__sublink--active {
  background-color: var(--clr-primary-50);
  color: var(--clr-primary-700);
  font-weight: 600;
  padding-left: 5.8rem;
  border-left-color: transparent;
}
.no-sidebar__sublink--active::before {
  content: "";
  position: absolute;
  left: 4rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background-color: var(--clr-primary-600);
}
.no-sidebar__sublink--active i:first-child {
  color: var(--clr-primary-600);
}
.no-sidebar__sublink--active span {
  color: var(--clr-primary-700);
  font-weight: 600;
}
.no-sidebar__sublink--active:hover {
  background-color: var(--clr-primary-100);
}
.no-sidebar__sublink--active:focus::before, .no-sidebar__sublink--active:active::before {
  display: none;
}
.no-sidebar__sublink--active:focus, .no-sidebar__sublink--active:active {
  box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.2);
}

.no-page-heading {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 3.2rem;
}
@media (max-width: 768px) {
  .no-page-heading {
    flex-direction: column;
    gap: 1.6rem;
    margin-bottom: 2.4rem;
    align-items: flex-start;
  }
}
.no-page-heading > div:first-child {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1.2rem;
}
@media (max-width: 768px) {
  .no-page-heading > div:first-child {
    flex-direction: column;
    gap: 0.8rem;
  }
}
.no-page-heading__actions {
  display: flex;
  gap: 1.2rem;
  flex-shrink: 0;
  width: auto;
  justify-content: flex-end;
}
@media (max-width: 768px) {
  .no-page-heading__actions {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.8rem;
  }
}
.no-page-heading__title {
  font-size: clamp(2rem, 0.5177993528vw + 1.8058252427rem, 2.8rem);
  font-weight: 700;
  color: var(--clr-text-primary);
  margin: 0;
  line-height: 1.2;
  letter-spacing: -0.02em;
  word-break: break-word;
}
.no-page-heading__subtitle {
  display: inline-flex;
  align-items: center;
  font-size: clamp(1.3rem, 0.0647249191vw + 1.2757281553rem, 1.4rem);
  color: var(--clr-primary-700);
  background: var(--clr-primary-50);
  padding: 0.4rem 1rem;
  border-radius: 1.2rem;
  margin: 0;
  line-height: 1.5;
  font-weight: 600;
  border: 0.1rem solid var(--clr-primary-200);
  white-space: nowrap;
}
@media (max-width: 544px) {
  .no-page-heading__subtitle {
    font-size: clamp(1.4rem, 0.0647249191vw + 1.3757281553rem, 1.5rem);
    padding: 0.5rem 1.2rem;
  }
}
@media (max-width: 768px) {
  .no-page-heading__subtitle {
    padding: 0.6rem 1.4rem;
  }
}

/**
 * Page Navigation Component
 * 페이지 네비게이션 스타일 (미니멀하고 직관적인 탭 형태)
 */
.no-page-nav {
  display: flex;
  gap: 0;
  padding: 0;
  margin: 0 0 1.5rem 0;
  border-bottom: 1px solid var(--clr-border-secondary, #e5e7eb);
  background: transparent;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.no-page-nav.--center {
  justify-content: center;
}
.no-page-nav::-webkit-scrollbar {
  display: none;
}
.no-page-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.5rem;
  color: var(--clr-text-secondary, #6b7280);
  text-decoration: none;
  font-weight: 500;
  font-size: 1.4rem;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: all 0.2s ease;
  position: relative;
  background: transparent;
}
.no-page-nav__link i {
  font-size: 1rem;
  transition: color 0.2s ease;
}
@media (max-width: 768px) {
  .no-page-nav__link {
    font-size: 1.2rem;
  }
  .no-page-nav__link:hover:not(.active) {
    color: var(--clr-primary-600, #2563eb);
    background: var(--clr-bg-tertiary, #f9fafb);
  }
}
.no-page-nav__link.active {
  color: var(--clr-primary-700, #1d4ed8);
  border-bottom-color: var(--clr-primary-600, #2563eb);
  font-weight: 600;
  background: transparent;
}
.no-page-nav__link.active i {
  color: var(--clr-primary-600, #2563eb);
}
.no-page-nav__link:focus {
  outline: 2px solid var(--clr-primary-300, #93c5fd);
  outline-offset: 2px;
  border-radius: 4px;
}

a.no-btn:hover {
  text-decoration: none;
}

.no-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.9rem 1.4rem;
  font-size: clamp(1.4rem, 0vw + 1.4rem, 1.4rem);
  font-weight: 500;
  border-radius: 0.8rem;
  border: none;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none !important;
  white-space: nowrap;
  font-family: inherit;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  overflow: hidden;
}
.no-btn:hover {
  text-decoration: none !important;
}
.no-btn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  transform: translate(-50%, -50%);
  transition: width 0.4s ease-out, height 0.4s ease-out, opacity 0.2s ease-out;
  pointer-events: none;
  opacity: 0;
}
.no-btn:active::before {
  width: 200px;
  height: 200px;
  opacity: 1;
  transition: width 0.2s ease-out, height 0.2s ease-out, opacity 0.15s ease-out;
}
@media (max-width: 544px) {
  .no-btn {
    padding: 1rem 1.6rem;
    gap: 0.8rem;
  }
}
@media (max-width: 768px) {
  .no-btn {
    padding: 1rem 2rem;
  }
}
.no-btn--primary {
  background-color: var(--clr-primary-500);
  color: var(--clr-base-white);
  box-shadow: 0 0.1rem 0.3rem rgba(37, 99, 235, 0.12);
}
.no-btn--primary:hover {
  background-color: var(--clr-primary-600);
  color: var(--clr-base-white) !important;
  text-decoration: none !important;
  transform: scale(1.01);
  box-shadow: 0 0.2rem 0.6rem rgba(37, 99, 235, 0.2);
}
.no-btn--primary:hover::before {
  background: rgba(255, 255, 255, 0.15);
}
.no-btn--primary:active {
  background-color: var(--clr-primary-800);
  transform: scale(0.99);
  box-shadow: 0 0.1rem 0.2rem rgba(37, 99, 235, 0.2);
  transition: all 0.1s ease-out;
}
.no-btn--primary:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.25), 0 0.1rem 0.3rem rgba(37, 99, 235, 0.12);
}
.no-btn--primary:focus:not(:active) {
  transform: scale(1);
}
.no-btn--secondary {
  background-color: var(--clr-bg-tertiary);
  color: var(--clr-text-secondary);
  box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.04);
}
.no-btn--secondary:hover {
  background-color: var(--clr-border-primary);
  color: var(--clr-text-primary);
  text-decoration: none;
  transform: scale(1.01);
  box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.1);
}
.no-btn--secondary:hover::before {
  background: rgba(0, 0, 0, 0.04);
}
.no-btn--secondary:active {
  background-color: var(--clr-text-tertiary);
  transform: scale(0.99);
  box-shadow: 0 0.05rem 0.1rem rgba(0, 0, 0, 0.08);
  transition: all 0.1s ease-out;
}
.no-btn--secondary:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(107, 114, 128, 0.2), 0 0.1rem 0.2rem rgba(0, 0, 0, 0.04);
}
.no-btn--secondary:focus:not(:active) {
  transform: scale(1);
}
.no-btn--danger {
  background-color: var(--clr-danger-500);
  color: var(--clr-base-white);
  box-shadow: 0 0.1rem 0.3rem rgba(239, 68, 68, 0.12);
}
.no-btn--danger:hover {
  background-color: var(--clr-danger-600);
  color: var(--clr-base-white);
  text-decoration: none;
  transform: scale(1.01);
  box-shadow: 0 0.2rem 0.6rem rgba(239, 68, 68, 0.2);
}
.no-btn--danger:hover::before {
  background: rgba(255, 255, 255, 0.15);
}
.no-btn--danger:active {
  background-color: var(--clr-danger-700);
  transform: scale(0.99);
  box-shadow: 0 0.1rem 0.2rem rgba(239, 68, 68, 0.2);
  transition: all 0.1s ease-out;
}
.no-btn--danger:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(239, 68, 68, 0.25), 0 0.1rem 0.3rem rgba(239, 68, 68, 0.12);
}
.no-btn--danger:focus:not(:active) {
  transform: scale(1);
}
.no-btn--success {
  background-color: var(--clr-success-500);
  color: var(--clr-base-white);
  box-shadow: 0 0.1rem 0.3rem rgba(34, 197, 94, 0.12);
}
.no-btn--success:hover {
  background-color: var(--clr-success-600);
  color: var(--clr-base-white);
  text-decoration: none;
  transform: scale(1.01);
  box-shadow: 0 0.2rem 0.6rem rgba(34, 197, 94, 0.2);
}
.no-btn--success:hover::before {
  background: rgba(255, 255, 255, 0.15);
}
.no-btn--success:active {
  background-color: var(--clr-success-700);
  transform: scale(0.99);
  box-shadow: 0 0.1rem 0.2rem rgba(34, 197, 94, 0.2);
  transition: all 0.1s ease-out;
}
.no-btn--success:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(34, 197, 94, 0.25), 0 0.1rem 0.3rem rgba(34, 197, 94, 0.12);
}
.no-btn--success:focus:not(:active) {
  transform: scale(1);
}
.no-btn--warning {
  background-color: var(--clr-warning-500);
  color: var(--clr-base-white);
  box-shadow: 0 0.1rem 0.3rem rgba(245, 158, 11, 0.12);
}
.no-btn--warning:hover {
  background-color: var(--clr-warning-600);
  color: var(--clr-base-white);
  text-decoration: none;
  transform: scale(1.01);
  box-shadow: 0 0.2rem 0.6rem rgba(245, 158, 11, 0.2);
}
.no-btn--warning:hover::before {
  background: rgba(255, 255, 255, 0.15);
}
.no-btn--warning:active {
  background-color: var(--clr-warning-700);
  transform: scale(0.99);
  box-shadow: 0 0.1rem 0.2rem rgba(245, 158, 11, 0.2);
  transition: all 0.1s ease-out;
}
.no-btn--warning:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(245, 158, 11, 0.25), 0 0.1rem 0.3rem rgba(245, 158, 11, 0.12);
}
.no-btn--warning:focus:not(:active) {
  transform: scale(1);
}
.no-btn--info {
  background-color: var(--clr-info-500);
  color: var(--clr-base-white);
  box-shadow: 0 0.1rem 0.3rem rgba(59, 130, 246, 0.12);
}
.no-btn--info:hover {
  background-color: var(--clr-info-600);
  color: var(--clr-base-white);
  text-decoration: none;
  transform: scale(1.01);
  box-shadow: 0 0.2rem 0.6rem rgba(59, 130, 246, 0.2);
}
.no-btn--info:hover::before {
  background: rgba(255, 255, 255, 0.15);
}
.no-btn--info:active {
  background-color: var(--clr-info-700);
  transform: scale(0.99);
  box-shadow: 0 0.1rem 0.2rem rgba(59, 130, 246, 0.2);
  transition: all 0.1s ease-out;
}
.no-btn--info:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.25), 0 0.1rem 0.3rem rgba(59, 130, 246, 0.12);
}
.no-btn--info:focus:not(:active) {
  transform: scale(1);
}
.no-btn--premium {
  background-color: var(--clr-premium-600);
  color: var(--clr-base-white);
  box-shadow: 0 0.1rem 0.3rem rgba(147, 51, 234, 0.12);
}
.no-btn--premium:hover {
  background-color: var(--clr-premium-700);
  color: var(--clr-base-white);
  text-decoration: none;
  transform: scale(1.01);
  box-shadow: 0 0.2rem 0.6rem rgba(147, 51, 234, 0.2);
}
.no-btn--premium:hover::before {
  background: rgba(255, 255, 255, 0.15);
}
.no-btn--premium:active {
  background-color: var(--clr-premium-800);
  transform: scale(0.99);
  box-shadow: 0 0.1rem 0.2rem rgba(147, 51, 234, 0.2);
  transition: all 0.1s ease-out;
}
.no-btn--premium:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(147, 51, 234, 0.25), 0 0.1rem 0.3rem rgba(147, 51, 234, 0.12);
}
.no-btn--premium:focus:not(:active) {
  transform: scale(1);
}
.no-btn--pink {
  background-color: var(--clr-pink-500);
  color: var(--clr-base-white);
  box-shadow: 0 0.1rem 0.3rem rgba(236, 72, 153, 0.12);
}
.no-btn--pink:hover {
  background-color: var(--clr-pink-600);
  color: var(--clr-base-white);
  text-decoration: none;
  transform: scale(1.01);
  box-shadow: 0 0.2rem 0.6rem rgba(236, 72, 153, 0.2);
}
.no-btn--pink:hover::before {
  background: rgba(255, 255, 255, 0.15);
}
.no-btn--pink:active {
  background-color: var(--clr-pink-700);
  transform: scale(0.99);
  box-shadow: 0 0.1rem 0.2rem rgba(236, 72, 153, 0.2);
  transition: all 0.1s ease-out;
}
.no-btn--pink:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(236, 72, 153, 0.25), 0 0.1rem 0.3rem rgba(236, 72, 153, 0.12);
}
.no-btn--pink:focus:not(:active) {
  transform: scale(1);
}
.no-btn--ember {
  background-color: var(--clr-ember-500);
  color: var(--clr-base-white);
  box-shadow: 0 0.1rem 0.3rem rgba(249, 115, 22, 0.12);
}
.no-btn--ember:hover {
  background-color: var(--clr-ember-600);
  color: var(--clr-base-white);
  text-decoration: none;
  transform: scale(1.01);
  box-shadow: 0 0.2rem 0.6rem rgba(249, 115, 22, 0.2);
}
.no-btn--ember:hover::before {
  background: rgba(255, 255, 255, 0.15);
}
.no-btn--ember:active {
  background-color: var(--clr-ember-700);
  transform: scale(0.99);
  box-shadow: 0 0.1rem 0.2rem rgba(249, 115, 22, 0.2);
  transition: all 0.1s ease-out;
}
.no-btn--ember:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(249, 115, 22, 0.25), 0 0.1rem 0.3rem rgba(249, 115, 22, 0.12);
}
.no-btn--ember:focus:not(:active) {
  transform: scale(1);
}
.no-btn--outline {
  background-color: transparent;
  border: 0.15rem solid currentColor;
}
.no-btn--outline-primary {
  color: var(--clr-primary-500);
  border-color: var(--clr-primary-500);
  box-shadow: 0 0.1rem 0.2rem rgba(37, 99, 235, 0.06);
}
.no-btn--outline-primary:hover {
  background-color: var(--clr-primary-50);
  color: var(--clr-primary-600);
  text-decoration: none;
  border-color: var(--clr-primary-600);
  transform: scale(1.01);
  box-shadow: 0 0.2rem 0.4rem rgba(37, 99, 235, 0.15);
}
.no-btn--outline-primary:hover::before {
  background: rgba(37, 99, 235, 0.08);
}
.no-btn--outline-primary:active {
  background-color: var(--clr-primary-100);
  color: var(--clr-primary-800);
  border-color: var(--clr-primary-800);
  transform: scale(0.99);
  box-shadow: 0 0.05rem 0.1rem rgba(37, 99, 235, 0.15);
  transition: all 0.1s ease-out;
}
.no-btn--outline-primary:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.2), 0 0.1rem 0.2rem rgba(37, 99, 235, 0.06);
}
.no-btn--outline-primary:focus:not(:active) {
  transform: scale(1);
}
.no-btn--outline-success {
  color: var(--clr-success-600);
  border-color: var(--clr-success-600);
  box-shadow: 0 0.1rem 0.2rem rgba(34, 197, 94, 0.06);
}
.no-btn--outline-success:hover {
  background-color: var(--clr-success-50);
  color: var(--clr-success-700);
  text-decoration: none;
  border-color: var(--clr-success-700);
  transform: scale(1.01);
  box-shadow: 0 0.2rem 0.4rem rgba(34, 197, 94, 0.15);
}
.no-btn--outline-success:hover::before {
  background: rgba(34, 197, 94, 0.08);
}
.no-btn--outline-success:active {
  background-color: var(--clr-success-100);
  color: var(--clr-success-800);
  border-color: var(--clr-success-800);
  transform: scale(0.99);
  box-shadow: 0 0.05rem 0.1rem rgba(34, 197, 94, 0.15);
  transition: all 0.1s ease-out;
}
.no-btn--outline-success:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(34, 197, 94, 0.2), 0 0.1rem 0.2rem rgba(34, 197, 94, 0.06);
}
.no-btn--outline-success:focus:not(:active) {
  transform: scale(1);
}
.no-btn--outline-warning {
  color: var(--clr-warning-600);
  border-color: var(--clr-warning-600);
  box-shadow: 0 0.1rem 0.2rem rgba(245, 158, 11, 0.06);
}
.no-btn--outline-warning:hover {
  background-color: var(--clr-warning-50);
  color: var(--clr-warning-700);
  text-decoration: none;
  border-color: var(--clr-warning-700);
  transform: scale(1.01);
  box-shadow: 0 0.2rem 0.4rem rgba(245, 158, 11, 0.15);
}
.no-btn--outline-warning:hover::before {
  background: rgba(245, 158, 11, 0.08);
}
.no-btn--outline-warning:active {
  background-color: var(--clr-warning-100);
  color: var(--clr-warning-800);
  border-color: var(--clr-warning-800);
  transform: scale(0.99);
  box-shadow: 0 0.05rem 0.1rem rgba(245, 158, 11, 0.15);
  transition: all 0.1s ease-out;
}
.no-btn--outline-warning:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(245, 158, 11, 0.2), 0 0.1rem 0.2rem rgba(245, 158, 11, 0.06);
}
.no-btn--outline-warning:focus:not(:active) {
  transform: scale(1);
}
.no-btn--outline-danger {
  color: var(--clr-danger-600);
  border-color: var(--clr-danger-600);
  box-shadow: 0 0.1rem 0.2rem rgba(239, 68, 68, 0.06);
}
.no-btn--outline-danger:hover {
  background-color: var(--clr-danger-50);
  color: var(--clr-danger-700);
  text-decoration: none;
  border-color: var(--clr-danger-700);
  transform: scale(1.01);
  box-shadow: 0 0.2rem 0.4rem rgba(239, 68, 68, 0.15);
}
.no-btn--outline-danger:hover::before {
  background: rgba(239, 68, 68, 0.08);
}
.no-btn--outline-danger:active {
  background-color: var(--clr-danger-100);
  color: var(--clr-danger-800);
  border-color: var(--clr-danger-800);
  transform: scale(0.99);
  box-shadow: 0 0.05rem 0.1rem rgba(239, 68, 68, 0.15);
  transition: all 0.1s ease-out;
}
.no-btn--outline-danger:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(239, 68, 68, 0.2), 0 0.1rem 0.2rem rgba(239, 68, 68, 0.06);
}
.no-btn--outline-danger:focus:not(:active) {
  transform: scale(1);
}
.no-btn--outline-info {
  color: var(--clr-info-600);
  border-color: var(--clr-info-600);
  box-shadow: 0 0.1rem 0.2rem rgba(59, 130, 246, 0.06);
}
.no-btn--outline-info:hover {
  background-color: var(--clr-info-50);
  color: var(--clr-info-700);
  text-decoration: none;
  border-color: var(--clr-info-700);
  transform: scale(1.01);
  box-shadow: 0 0.2rem 0.4rem rgba(59, 130, 246, 0.15);
}
.no-btn--outline-info:hover::before {
  background: rgba(59, 130, 246, 0.08);
}
.no-btn--outline-info:active {
  background-color: var(--clr-info-100);
  color: var(--clr-info-800);
  border-color: var(--clr-info-800);
  transform: scale(0.99);
  box-shadow: 0 0.05rem 0.1rem rgba(59, 130, 246, 0.15);
  transition: all 0.1s ease-out;
}
.no-btn--outline-info:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.2), 0 0.1rem 0.2rem rgba(59, 130, 246, 0.06);
}
.no-btn--outline-info:focus:not(:active) {
  transform: scale(1);
}
.no-btn--outline-premium {
  color: var(--clr-premium-600);
  border-color: var(--clr-premium-600);
  box-shadow: 0 0.1rem 0.2rem rgba(147, 51, 234, 0.06);
}
.no-btn--outline-premium:hover {
  background-color: var(--clr-premium-50);
  color: var(--clr-premium-700);
  text-decoration: none;
  border-color: var(--clr-premium-700);
  transform: scale(1.01);
  box-shadow: 0 0.2rem 0.4rem rgba(147, 51, 234, 0.15);
}
.no-btn--outline-premium:hover::before {
  background: rgba(147, 51, 234, 0.08);
}
.no-btn--outline-premium:active {
  background-color: var(--clr-premium-100);
  color: var(--clr-premium-800);
  border-color: var(--clr-premium-800);
  transform: scale(0.99);
  box-shadow: 0 0.05rem 0.1rem rgba(147, 51, 234, 0.15);
  transition: all 0.1s ease-out;
}
.no-btn--outline-premium:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(147, 51, 234, 0.2), 0 0.1rem 0.2rem rgba(147, 51, 234, 0.06);
}
.no-btn--outline-premium:focus:not(:active) {
  transform: scale(1);
}
.no-btn--outline-pink {
  color: var(--clr-pink-600);
  border-color: var(--clr-pink-600);
  box-shadow: 0 0.1rem 0.2rem rgba(236, 72, 153, 0.06);
}
.no-btn--outline-pink:hover {
  background-color: var(--clr-pink-50);
  color: var(--clr-pink-700);
  text-decoration: none;
  border-color: var(--clr-pink-700);
  transform: scale(1.01);
  box-shadow: 0 0.2rem 0.4rem rgba(236, 72, 153, 0.15);
}
.no-btn--outline-pink:hover::before {
  background: rgba(236, 72, 153, 0.08);
}
.no-btn--outline-pink:active {
  background-color: var(--clr-pink-100);
  color: var(--clr-pink-800);
  border-color: var(--clr-pink-800);
  transform: scale(0.99);
  box-shadow: 0 0.05rem 0.1rem rgba(236, 72, 153, 0.15);
  transition: all 0.1s ease-out;
}
.no-btn--outline-pink:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(236, 72, 153, 0.2), 0 0.1rem 0.2rem rgba(236, 72, 153, 0.06);
}
.no-btn--outline-pink:focus:not(:active) {
  transform: scale(1);
}
.no-btn--outline-ember {
  color: var(--clr-ember-600);
  border-color: var(--clr-ember-600);
  box-shadow: 0 0.1rem 0.2rem rgba(249, 115, 22, 0.06);
}
.no-btn--outline-ember:hover {
  background-color: var(--clr-ember-50);
  color: var(--clr-ember-700);
  text-decoration: none;
  border-color: var(--clr-ember-700);
  transform: scale(1.01);
  box-shadow: 0 0.2rem 0.4rem rgba(249, 115, 22, 0.15);
}
.no-btn--outline-ember:hover::before {
  background: rgba(249, 115, 22, 0.08);
}
.no-btn--outline-ember:active {
  background-color: var(--clr-ember-100);
  color: var(--clr-ember-800);
  border-color: var(--clr-ember-800);
  transform: scale(0.99);
  box-shadow: 0 0.05rem 0.1rem rgba(249, 115, 22, 0.15);
  transition: all 0.1s ease-out;
}
.no-btn--outline-ember:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(249, 115, 22, 0.2), 0 0.1rem 0.2rem rgba(249, 115, 22, 0.06);
}
.no-btn--outline-ember:focus:not(:active) {
  transform: scale(1);
}
.no-btn--outline-secondary {
  color: var(--clr-text-secondary);
  border-color: var(--clr-border-primary);
  box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.02);
}
.no-btn--outline-secondary:hover {
  background-color: var(--clr-bg-tertiary);
  color: var(--clr-text-primary);
  text-decoration: none;
  border-color: var(--clr-text-tertiary);
  transform: scale(1.01);
  box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.08);
}
.no-btn--outline-secondary:hover::before {
  background: rgba(0, 0, 0, 0.02);
}
.no-btn--outline-secondary:active {
  background-color: var(--clr-border-primary);
  color: var(--clr-text-primary);
  transform: scale(0.99);
  box-shadow: 0 0.05rem 0.1rem rgba(0, 0, 0, 0.06);
  transition: all 0.1s ease-out;
}
.no-btn--outline-secondary:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(107, 114, 128, 0.15), 0 0.1rem 0.2rem rgba(0, 0, 0, 0.02);
}
.no-btn--outline-secondary:focus:not(:active) {
  transform: scale(1);
}
.no-btn--sm {
  padding: 0.7rem 1rem;
  font-size: clamp(1.3rem, 0vw + 1.3rem, 1.3rem);
  gap: 0.5rem;
}
@media (max-width: 544px) {
  .no-btn--sm {
    padding: 0.8rem 1.2rem;
    gap: 0.6rem;
  }
}
@media (max-width: 768px) {
  .no-btn--sm {
    padding: 0.8rem 1.6rem;
  }
}
.no-btn--xs {
  padding: 0.35rem 0.5rem;
  font-size: clamp(1rem, 0.0647249191vw + 0.9757281553rem, 1.1rem);
  gap: 0.25rem;
  border-radius: 0.4rem;
  min-width: auto;
}
@media (max-width: 544px) {
  .no-btn--xs {
    padding: 0.4rem 0.6rem;
    gap: 0.3rem;
  }
}
@media (max-width: 768px) {
  .no-btn--xs {
    padding: 0.45rem 0.7rem;
  }
}
.no-btn--xs i {
  font-size: 0.75rem;
}
.no-btn--lg {
  padding: 1.2rem 2rem;
  font-size: clamp(1.5rem, 0.1941747573vw + 1.427184466rem, 1.8rem);
  gap: 0.8rem;
}
@media (max-width: 544px) {
  .no-btn--lg {
    padding: 1.4rem 2.4rem;
  }
}
@media (max-width: 768px) {
  .no-btn--lg {
    padding: 1.6rem 3.2rem;
    gap: 1rem;
  }
}
.no-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}
.no-btn:disabled:hover {
  transform: none !important;
  box-shadow: none !important;
}
@media (hover: none) and (pointer: coarse) {
  .no-btn:hover {
    transform: none;
    box-shadow: none;
  }
  .no-btn:active {
    transform: scale(0.96);
    transition: transform 0.1s ease;
  }
  .no-btn:focus {
    transform: scale(1);
  }
}

/**
 * Badge Component
 * 배지 컴포넌트
 */
.no-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 1rem;
  font-size: clamp(1.2rem, 0vw + 1.2rem, 1.2rem);
  font-weight: 600;
  line-height: 1;
  border-radius: 1.2rem;
  white-space: nowrap;
  vertical-align: middle;
}
.no-badge--primary {
  background-color: var(--clr-primary-100);
  color: var(--clr-primary-700);
}
.no-badge--success {
  background-color: var(--clr-success-100);
  color: var(--clr-success-700);
}
.no-badge--warning {
  background-color: var(--clr-warning-100);
  color: var(--clr-warning-700);
}
.no-badge--danger {
  background-color: var(--clr-danger-100);
  color: var(--clr-danger-700);
}
.no-badge--info {
  background-color: var(--clr-info-100);
  color: var(--clr-info-700);
}
.no-badge--gray {
  background-color: var(--clr-gray-100);
  color: var(--clr-gray-700);
}
.no-badge--secondary {
  background-color: #e0e7ff;
  color: #4338ca;
}
.no-badge--purple {
  background-color: #f3e8ff;
  color: #7c3aed;
}
.no-badge--teal {
  background-color: #ccfbf1;
  color: #0f766e;
}
.no-badge--orange {
  background-color: #ffedd5;
  color: #c2410c;
}
.no-badge--pink {
  background-color: #fce7f3;
  color: #be185d;
}
.no-badge--yellow {
  background-color: #fef3c7;
  color: #a16207;
}
.no-badge--indigo {
  background-color: #e0e7ff;
  color: #4f46e5;
}
.no-badge--cyan {
  background-color: #cffafe;
  color: #0e7490;
}
.no-badge--lime {
  background-color: #ecfccb;
  color: #4d7c0f;
}
.no-badge--emerald {
  background-color: #d1fae5;
  color: #047857;
}
.no-badge--outline {
  background-color: transparent;
  border: 0.1rem solid currentColor;
}
.no-badge--outline.no-badge--primary {
  color: var(--clr-primary-600);
  border-color: var(--clr-primary-300);
}
.no-badge--outline.no-badge--success {
  color: var(--clr-success-600);
  border-color: var(--clr-success-300);
}
.no-badge--outline.no-badge--warning {
  color: var(--clr-warning-600);
  border-color: var(--clr-warning-300);
}
.no-badge--outline.no-badge--danger {
  color: var(--clr-danger-600);
  border-color: var(--clr-danger-300);
}
.no-badge--outline.no-badge--info {
  color: var(--clr-info-600);
  border-color: var(--clr-info-300);
}
.no-badge--outline.no-badge--gray {
  color: var(--clr-gray-600);
  border-color: var(--clr-gray-300);
}
.no-badge--outline.no-badge--secondary {
  color: #4338ca;
  border-color: #c7d2fe;
}
.no-badge--outline.no-badge--purple {
  color: #7c3aed;
  border-color: #e9d5ff;
}
.no-badge--outline.no-badge--teal {
  color: #0f766e;
  border-color: #99f6e4;
}
.no-badge--outline.no-badge--orange {
  color: #c2410c;
  border-color: #fed7aa;
}
.no-badge--outline.no-badge--pink {
  color: #be185d;
  border-color: #fbcfe8;
}
.no-badge--outline.no-badge--yellow {
  color: #a16207;
  border-color: #fde68a;
}
.no-badge--outline.no-badge--indigo {
  color: #4f46e5;
  border-color: #c7d2fe;
}
.no-badge--outline.no-badge--cyan {
  color: #0e7490;
  border-color: #a5f3fc;
}
.no-badge--outline.no-badge--lime {
  color: #4d7c0f;
  border-color: #d9f99d;
}
.no-badge--outline.no-badge--emerald {
  color: #047857;
  border-color: #a7f3d0;
}
.no-badge--sm {
  padding: 0.2rem 0.8rem;
  font-size: clamp(1.1rem, 0vw + 1.1rem, 1.1rem);
}
.no-badge--lg {
  padding: 0.6rem 1.2rem;
  font-size: clamp(1.3rem, 0vw + 1.3rem, 1.3rem);
}
.no-badge__icon {
  margin-right: 0.4rem;
  font-size: clamp(1.1rem, 0vw + 1.1rem, 1.1rem);
}

.no-link {
  color: var(--clr-primary-600);
  text-decoration: none;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: clamp(1.4rem, 0vw + 1.4rem, 1.4rem);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
@media (max-width: 768px) {
  .no-link:hover {
    color: var(--clr-primary-700);
    text-decoration: underline;
    transform: translateY(-0.1rem);
  }
  .no-link:hover::after {
    content: "";
    position: absolute;
    bottom: -0.2rem;
    left: 0;
    right: 0;
    height: 0.2rem;
    background: var(--clr-primary-600);
    opacity: 0.3;
    border-radius: 0.1rem;
  }
}
.no-link:active {
  color: var(--clr-primary-800);
  transform: translateY(0);
}
.no-link:focus {
  outline: none;
  text-decoration: underline;
  box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.25);
  border-radius: 0.2rem;
  color: var(--clr-primary-700);
}
.no-link--primary {
  color: var(--clr-primary-600);
}
@media (max-width: 768px) {
  .no-link--primary:hover {
    color: var(--clr-primary-700);
    transform: translateY(-0.1rem);
  }
}
.no-link--primary:focus {
  box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.25);
}
.no-link--danger {
  color: var(--clr-danger-600);
}
@media (max-width: 768px) {
  .no-link--danger:hover {
    color: var(--clr-danger-700);
    text-decoration: underline;
    transform: translateY(-0.1rem);
  }
}
.no-link--danger:focus {
  box-shadow: 0 0 0 0.2rem rgba(239, 68, 68, 0.25);
}
.no-link--danger:active {
  color: var(--clr-danger-800);
}
.no-link--underline {
  text-decoration: underline;
}
@media (max-width: 768px) {
  .no-link--underline:hover {
    text-decoration: none;
    transform: translateY(-0.1rem);
  }
}
.no-link--success {
  color: var(--clr-success-600);
}
.no-link--warning {
  color: var(--clr-warning-600);
}
.no-link--danger {
  color: var(--clr-danger-600);
}
.no-link:disabled, .no-link[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.no-tabs {
  margin-bottom: 2.4rem;
}
.no-tabs__list {
  display: flex;
  gap: 0.8rem;
  list-style: none;
  padding: 0;
  margin: 0 0 2.4rem 0;
  border-bottom: 0.1rem solid var(--clr-border-secondary);
}
.no-tabs__item {
  position: relative;
  margin: 0;
  padding: 0;
}
.no-tabs__item::after {
  content: "";
  position: absolute;
  bottom: -0.1rem;
  left: 0;
  right: 0;
  height: 0.2rem;
  background-color: var(--clr-primary-600);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.no-tabs__item--active::after {
  opacity: 1;
}
.no-tabs__item--active .no-tabs__link {
  color: var(--clr-primary-600);
  border-bottom-color: transparent;
}
.no-tabs__link {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1.2rem 1.6rem;
  color: var(--clr-text-secondary);
  text-decoration: none;
  font-size: clamp(1.4rem, 0vw + 1.4rem, 1.4rem);
  font-weight: 500;
  border-bottom: 0.2rem solid transparent;
  transition: all 0.2s ease;
  cursor: pointer;
  user-select: none;
}
@media (max-width: 768px) {
  .no-tabs__link:hover:not(.no-tabs__link--active) {
    color: var(--clr-text-primary);
    background-color: var(--clr-bg-tertiary);
  }
}
.no-tabs__link i {
  font-size: clamp(1.4rem, 0.1294498382vw + 1.3514563107rem, 1.6rem);
}
.no-tabs__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.6rem;
  background: var(--clr-primary-500);
  color: var(--clr-base-white);
  font-size: clamp(1.1rem, 0.0647249191vw + 1.0757281553rem, 1.2rem);
  font-weight: 600;
  border-radius: 1rem;
  line-height: 1;
}
.no-tabs__content {
  position: relative;
}
.no-tabs__panel {
  display: none;
}
.no-tabs__panel--active {
  display: block;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(0.8rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/**
 * Tooltip Component
 * 툴팁 스타일
 */
.no-tooltip {
  position: absolute;
  z-index: 10000;
  padding: 0.6rem 1rem;
  background-color: var(--clr-base-black);
  color: var(--clr-base-white);
  font-size: 1.2rem;
  line-height: 1.4;
  border-radius: 0.4rem;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-0.4rem);
  transition: opacity 0.2s ease, transform 0.2s ease;
  box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.2);
  max-width: 24rem;
  white-space: normal;
  word-wrap: break-word;
}
.no-tooltip--visible {
  opacity: 1;
  transform: translateY(0);
}
.no-tooltip::before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
}
.no-tooltip[data-position=top]::before {
  bottom: -0.6rem;
  left: 50%;
  transform: translateX(-50%);
  border-width: 0.6rem 0.6rem 0 0.6rem;
  border-color: var(--clr-base-black) transparent transparent transparent;
}
.no-tooltip[data-position=bottom]::before {
  top: -0.6rem;
  left: 50%;
  transform: translateX(-50%);
  border-width: 0 0.6rem 0.6rem 0.6rem;
  border-color: transparent transparent var(--clr-base-black) transparent;
}
.no-tooltip[data-position=left]::before {
  right: -0.6rem;
  top: 50%;
  transform: translateY(-50%);
  border-width: 0.6rem 0 0.6rem 0.6rem;
  border-color: transparent transparent transparent var(--clr-base-black);
}
.no-tooltip[data-position=right]::before {
  left: -0.6rem;
  top: 50%;
  transform: translateY(-50%);
  border-width: 0.6rem 0.6rem 0.6rem 0;
  border-color: transparent var(--clr-base-black) transparent transparent;
}

/**
 * Theme Toggle Component
 * 다크모드/라이트모드 토글 버튼 (드롭다운)
 */
.no-theme-toggle {
  position: relative;
  display: inline-block;
}
.no-theme-toggle__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 4rem;
  height: 4rem;
  padding: 0;
  border: none;
  border-radius: 0.4rem;
  background: rgba(255, 255, 255, 0.1);
  color: var(--clr-base-white);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
@media (max-width: 768px) {
  .no-theme-toggle__button:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
  }
}
.no-theme-toggle__button:active {
  transform: scale(0.95);
}
.no-theme-toggle__button:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.3);
}
.no-theme-toggle__icon {
  font-size: 1.8rem;
  color: var(--clr-base-white);
  transition: transform 0.3s ease;
  flex-shrink: 0;
}
.no-theme-toggle__text {
  display: none;
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--clr-base-white);
  white-space: nowrap;
}
.no-theme-toggle__dropdown {
  position: absolute;
  top: calc(100% + 0.8rem);
  right: 0;
  min-width: 16rem;
  background: var(--clr-bg-elevated);
  border: 0.1rem solid var(--clr-border-primary);
  border-radius: 0.8rem;
  box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.15);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.8rem);
  transition: all 0.2s ease;
  z-index: 1000;
  overflow: hidden;
}
.no-theme-toggle__dropdown--open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.no-theme-toggle__option {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  padding: 0.8rem 1.2rem;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 1.4rem;
  text-align: left;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.no-theme-toggle__option[data-theme-toggle=light] {
  color: var(--clr-text-primary);
}
.no-theme-toggle__option[data-theme-toggle=light] i:first-child {
  color: var(--clr-text-secondary);
}
.no-theme-toggle__option[data-theme-toggle=light] span {
  color: var(--clr-text-primary);
}
.no-theme-toggle__option[data-theme-toggle=dark] {
  color: var(--clr-text-primary);
}
.no-theme-toggle__option[data-theme-toggle=dark] i:first-child {
  color: var(--clr-text-secondary);
}
.no-theme-toggle__option[data-theme-toggle=dark] span {
  color: var(--clr-text-primary);
}
.no-theme-toggle__option i:first-child {
  font-size: 1.4rem;
  width: 1.6rem;
  text-align: center;
}
.no-theme-toggle__option span {
  flex: 1;
  font-weight: 500;
}
.no-theme-toggle__option .no-theme-toggle__check {
  font-size: 1.2rem;
  color: var(--clr-primary-600);
  display: none;
}
@media (max-width: 768px) {
  .no-theme-toggle__option:hover {
    background: var(--clr-bg-tertiary);
  }
}
.no-theme-toggle__option:active {
  background: var(--clr-bg-tertiary);
}
.no-theme-toggle__option:focus {
  outline: none;
  background: var(--clr-bg-tertiary);
}
.no-theme-toggle__option:not(:last-child) {
  border-bottom: 0.1rem solid var(--clr-border-secondary);
}
.no-theme-toggle__sheet-top {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.2rem 1.6rem;
  border-bottom: 0.1rem solid var(--clr-border-secondary);
  background: var(--clr-bg-elevated);
  flex-shrink: 0;
}
.no-theme-toggle__sheet-title {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--clr-text-primary);
  letter-spacing: -0.02em;
}
.no-theme-toggle__sheet-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.4rem;
  height: 4.4rem;
  padding: 0;
  border: none;
  border-radius: 0.8rem;
  background: transparent;
  color: var(--clr-text-secondary);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.no-theme-toggle__sheet-close i {
  font-size: 1.8rem;
}
@media (max-width: 768px) {
  .no-theme-toggle__sheet-close:hover {
    background: var(--clr-bg-tertiary);
    color: var(--clr-text-primary);
  }
}
.no-theme-toggle__sheet-close:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.25);
}
@media (max-width: 768px) {
  .no-theme-toggle__dropdown--open {
    position: fixed;
    inset: 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: none;
    min-height: 100vh;
    min-height: 100dvh;
    max-height: none;
    border-radius: 0;
    border: none;
    box-shadow: none;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    transform: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    padding-top: env(safe-area-inset-top, 0);
    padding-right: env(safe-area-inset-right, 0);
    padding-bottom: env(safe-area-inset-bottom, 0);
    padding-left: env(safe-area-inset-left, 0);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .no-theme-toggle__dropdown--open .no-theme-toggle__sheet-top {
    display: flex;
    flex-shrink: 0;
  }
  .no-theme-toggle__dropdown--open .no-theme-toggle__option {
    flex: 0 0 auto;
    min-height: 0;
    font-size: 1.5rem;
    justify-content: flex-start;
    padding: 1rem 1.6rem;
  }
  .no-theme-toggle__dropdown--open .no-theme-toggle__option i:first-child {
    font-size: 1.5rem;
  }
}

.no-dropdown {
  position: relative;
  display: inline-block;
}
.no-dropdown__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  position: relative;
}
.no-dropdown__arrow {
  font-size: 1rem;
  transition: transform 0.2s ease;
  opacity: 0.7;
}
.no-dropdown.--open .no-dropdown__arrow {
  transform: rotate(180deg);
  opacity: 1;
}
.no-dropdown__menu {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  min-width: 20rem;
  max-width: calc(100vw - 2rem);
  background: var(--clr-bg-elevated);
  border: 0.1rem solid var(--clr-border-primary);
  border-radius: 0.6rem;
  box-shadow: 0 0.4rem 0.6rem -0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.4rem -0.1rem rgba(0, 0, 0, 0.06);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.4rem);
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
  z-index: 1000;
  overflow: hidden;
  max-height: calc(100vh - 12rem);
  overflow-y: auto;
}
@media (max-width: 544px) {
  .no-dropdown__menu {
    min-width: 18rem;
    right: auto;
    left: 0;
  }
}
.no-dropdown.--open .no-dropdown__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.no-dropdown__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.75rem 1rem;
  background: transparent;
  border: none;
  color: var(--clr-text-primary);
  font-size: 1.3rem;
  font-weight: 400;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.no-dropdown__item i {
  font-size: 1.3rem;
  width: 1.4rem;
  text-align: center;
  opacity: 0.8;
  flex-shrink: 0;
}
.no-dropdown__item span {
  flex: 1;
  line-height: 1.4;
}
@media (max-width: 768px) {
  .no-dropdown__item {
    padding: 0.7rem 1rem;
  }
  .no-dropdown__item:hover {
    background: var(--clr-bg-secondary);
    color: var(--clr-primary-600);
  }
  .no-dropdown__item:hover i {
    opacity: 1;
  }
}
.no-dropdown__item:active {
  background: var(--clr-bg-tertiary);
}
.no-dropdown__divider {
  height: 0.1rem;
  background: var(--clr-border-primary);
  margin: 0.4rem 0;
  border: none;
}
.no-dropdown__mode-section {
  padding: 0.75rem 1rem;
  border-top: 0.1rem solid var(--clr-border-primary);
  background: var(--clr-bg-secondary);
}
.no-dropdown__mode-label {
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--clr-text-secondary);
  margin-bottom: 0.6rem;
  display: block;
}
.no-dropdown__mode-radio-group {
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
}
.no-dropdown__mode-radio {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.no-dropdown__mode-radio input[type=radio] {
  cursor: pointer;
  width: 1.4rem;
  height: 1.4rem;
  min-width: 1.4rem;
  accent-color: var(--clr-primary-600);
  margin: 0;
  flex-shrink: 0;
}
.no-dropdown__mode-radio span {
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--clr-text-primary);
  line-height: 1.4;
  white-space: nowrap;
}
@media (max-width: 768px) {
  .no-dropdown__mode-radio:hover span {
    color: var(--clr-primary-600);
  }
}
.no-dropdown__quarter-section {
  padding: 0.9rem 1rem;
  background: var(--clr-bg-secondary);
  border-top: 0.1rem solid var(--clr-border-primary);
}
.no-dropdown__quarter-label {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--clr-text-primary);
  margin-bottom: 0.7rem;
  display: block;
}
.no-dropdown__quarter-year {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-bottom: 0.7rem;
  flex-wrap: wrap;
}
.no-dropdown__quarter-year label {
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--clr-text-secondary);
  white-space: nowrap;
}
.no-dropdown__quarter-select {
  flex: 1;
  min-width: 8rem;
  padding: 0.5rem 0.7rem;
  border: 0.1rem solid var(--clr-border-primary);
  border-radius: 0.4rem;
  background: var(--clr-bg-primary);
  color: var(--clr-text-primary);
  font-size: 1.2rem;
  font-weight: 400;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%23374151' d='M5 7L1 3h8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  background-size: 1rem;
  padding-right: 2.4rem;
}
@media (max-width: 768px) {
  .no-dropdown__quarter-select:hover {
    border-color: var(--clr-primary-400);
  }
}
.no-dropdown__quarter-select:focus {
  outline: none;
  border-color: var(--clr-primary-600);
  box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.1);
}
.no-dropdown__quarter-buttons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}
.no-dropdown__quarter-btn {
  padding: 0.65rem 0.8rem;
  background: var(--clr-bg-primary);
  border: 0.1rem solid var(--clr-border-primary);
  border-radius: 0.4rem;
  color: var(--clr-text-primary);
  font-size: 1.2rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  min-height: 3.6rem;
}
@media (max-width: 768px) {
  .no-dropdown__quarter-btn {
    padding: 0.6rem 1rem;
    min-height: auto;
  }
  .no-dropdown__quarter-btn:hover {
    background: var(--clr-primary-50);
    border-color: var(--clr-primary-500);
    color: var(--clr-primary-700);
  }
}
.no-dropdown__quarter-btn:active {
  background: var(--clr-primary-100);
  border-color: var(--clr-primary-600);
}

.no-dropdown-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  display: none;
  background: transparent;
}
.no-dropdown-overlay.--active {
  display: block;
}

.no-auth-container {
  width: 100%;
  max-width: 44rem;
  margin: 0 auto;
}

.no-auth-card {
  background-color: var(--clr-bg-elevated);
  border-radius: 1.2rem;
  box-shadow: 0 0.4rem 0.6rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.4rem rgba(0, 0, 0, 0.06);
  width: 100%;
  padding: 2.4rem;
  border: 0.1rem solid var(--clr-border-primary);
}
@media (max-width: 544px) {
  .no-auth-card {
    padding: 3.2rem;
  }
}
.no-auth-card__header {
  margin-bottom: 2.4rem;
  text-align: center;
}
.no-auth-card__title {
  font-size: clamp(2.4rem, 0.2588996764vw + 2.3029126214rem, 2.8rem);
  font-weight: 600;
  color: var(--clr-text-primary);
  margin: 0 0 0.8rem 0;
}
.no-auth-card__subtitle {
  font-size: clamp(1.3rem, 0.0647249191vw + 1.2757281553rem, 1.4rem);
  color: var(--clr-text-tertiary);
  margin: 0;
}
.no-auth-card__body {
  margin-bottom: 2.4rem;
}
.no-auth-card__footer {
  text-align: center;
  padding-top: 2.4rem;
  border-top: 0.1rem solid var(--clr-border-secondary);
}
.no-auth-card__separator {
  margin: 0 0.8rem;
  color: var(--clr-text-tertiary);
}
.no-auth-card__description {
  color: var(--clr-text-secondary);
  font-size: clamp(1.4rem, 0vw + 1.4rem, 1.4rem);
  margin-bottom: 2.4rem;
  line-height: 1.6;
  text-align: center;
}

.no-form__group {
  margin-bottom: 2rem;
}
.no-form__label {
  display: block;
  font-size: clamp(1.4rem, 0vw + 1.4rem, 1.4rem);
  font-weight: 500;
  color: var(--clr-text-primary);
  margin-bottom: 0.8rem;
}
.no-form__label--required .no-form__label-required {
  color: var(--clr-danger-500);
  margin-left: 0.4rem;
  font-weight: 600;
}
.no-form__label-required {
  color: var(--clr-danger-500);
  margin-left: 0.4rem;
  font-weight: 600;
}
.no-form__input, .no-form__textarea {
  width: 100%;
  padding: 1rem 1.4rem;
  font-size: clamp(1.4rem, 0vw + 1.4rem, 1.4rem);
  line-height: 1.5;
  border: 0.1rem solid var(--clr-border-primary);
  border-radius: 0.8rem;
  background-color: var(--clr-bg-secondary);
  color: var(--clr-text-primary);
  transition: all 0.2s ease;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  min-width: 0;
}
@media (max-width: 544px) {
  .no-form__input, .no-form__textarea {
    padding: 1.2rem 1.6rem;
  }
}
.no-form__input:focus, .no-form__textarea:focus {
  outline: none;
  border-color: var(--clr-primary-400);
  box-shadow: 0 0 0 0.3rem rgba(37, 99, 235, 0.1);
  background-color: var(--clr-bg-secondary);
}
.no-form__input::placeholder, .no-form__textarea::placeholder {
  color: var(--clr-text-tertiary);
  opacity: 1;
}
.no-form__input--error {
  border-color: var(--clr-danger-500);
}
.no-form__input--error:focus {
  border-color: var(--clr-danger-500);
  box-shadow: 0 0 0 0.3rem rgba(239, 68, 68, 0.1);
}
.no-form__password-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.no-form__password-wrapper .no-form__input, .no-form__password-wrapper .no-form__textarea {
  padding-right: 4rem;
}
@media (max-width: 544px) {
  .no-form__password-wrapper .no-form__input, .no-form__password-wrapper .no-form__textarea {
    padding-right: 4.8rem;
  }
}
.no-form__password-toggle {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.8rem;
  height: 2.8rem;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--clr-text-tertiary);
  cursor: pointer;
  transition: all 0.2s ease;
  border-radius: 0.4rem;
  font-size: clamp(1.4rem, 0.1294498382vw + 1.3514563107rem, 1.6rem);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
@media (max-width: 544px) {
  .no-form__password-toggle {
    right: 1.2rem;
    width: 3.2rem;
    height: 3.2rem;
  }
}
@media (max-width: 768px) {
  .no-form__password-toggle:hover {
    color: var(--clr-gray-700);
    background-color: var(--clr-bg-tertiary);
  }
}
.no-form__password-toggle:active {
  transform: translateY(-50%) scale(0.95);
  color: var(--clr-gray-700);
  background-color: var(--clr-bg-tertiary);
}
.no-form__password-toggle:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.2);
}
.no-form__password-toggle i {
  font-size: clamp(1.4rem, 0.1294498382vw + 1.3514563107rem, 1.6rem);
}
.no-form__textarea {
  min-height: 10rem;
  resize: vertical;
  font-family: inherit;
  line-height: 1.6;
}
.no-form__checkbox {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 2rem;
  cursor: pointer;
}
.no-form__checkbox input[type=checkbox] {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: 0.2rem solid var(--clr-border-primary);
  border-radius: 0.4rem;
  background-color: var(--clr-bg-secondary);
  position: relative;
  transition: all 0.2s ease;
  margin-top: 0.2rem;
}
.no-form__checkbox input[type=checkbox]:checked {
  background-color: var(--clr-primary-500);
  border-color: var(--clr-primary-500);
}
.no-form__checkbox input[type=checkbox]:checked::after {
  content: "";
  position: absolute;
  left: 0.6rem;
  top: 0.2rem;
  width: 0.5rem;
  height: 1rem;
  border: solid white;
  border-width: 0 0.2rem 0.2rem 0;
  transform: rotate(45deg);
}
.no-form__checkbox input[type=checkbox]:focus {
  outline: none;
  box-shadow: 0 0 0 0.3rem rgba(37, 99, 235, 0.1);
}
.no-form__checkbox label {
  font-size: clamp(1.4rem, 0vw + 1.4rem, 1.4rem);
  color: var(--clr-text-primary);
  cursor: pointer;
  margin: 0;
  line-height: 1.5;
  user-select: none;
}
.no-form__radio-group {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  margin-bottom: 2rem;
}
.no-form__radio {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  cursor: pointer;
}
.no-form__radio input[type=radio] {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: 0.2rem solid var(--clr-border-primary);
  border-radius: 50%;
  background-color: var(--clr-bg-secondary);
  position: relative;
  transition: all 0.2s ease;
  margin-top: 0.2rem;
}
.no-form__radio input[type=radio]:checked {
  border-color: var(--clr-primary-500);
}
.no-form__radio input[type=radio]:checked::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background-color: var(--clr-primary-500);
}
.no-form__radio input[type=radio]:focus {
  outline: none;
  box-shadow: 0 0 0 0.3rem rgba(37, 99, 235, 0.1);
}
.no-form__radio label {
  font-size: clamp(1.4rem, 0vw + 1.4rem, 1.4rem);
  color: var(--clr-text-primary);
  cursor: pointer;
  margin: 0;
  line-height: 1.5;
  user-select: none;
}
.no-form__button {
  width: 100%;
  padding: 1.2rem 2rem;
  font-size: clamp(1.5rem, 0.0647249191vw + 1.4757281553rem, 1.6rem);
  font-weight: 500;
  color: var(--clr-base-white);
  background-color: var(--clr-primary-500);
  border: none;
  border-radius: 0.8rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
@media (max-width: 544px) {
  .no-form__button {
    padding: 1.2rem 2.4rem;
  }
}
@media (max-width: 768px) {
  .no-form__button:hover {
    background-color: var(--clr-primary-700);
  }
}
.no-form__button:active {
  background-color: var(--clr-primary-800);
  transform: translateY(0.1rem);
}
.no-form__button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.no-form__button--secondary {
  background-color: var(--clr-bg-tertiary);
  color: var(--clr-text-secondary);
}
.no-form__button--secondary:hover {
  background-color: var(--clr-bg-tertiary);
}
.no-form__link {
  color: var(--clr-primary-500);
  text-decoration: none;
  font-size: clamp(1.4rem, 0vw + 1.4rem, 1.4rem);
  transition: color 0.2s;
}
@media (max-width: 768px) {
  .no-form__link:hover {
    color: var(--clr-primary-700);
    text-decoration: underline;
  }
}

.no-alert {
  padding: 1.2rem 1.6rem;
  border-radius: 0.8rem;
  margin-bottom: 2rem;
  font-size: clamp(1.4rem, 0vw + 1.4rem, 1.4rem);
  line-height: 1.5;
}
.no-alert--success {
  background-color: var(--clr-success-100);
  color: var(--clr-success-800);
  border: 0.1rem solid var(--clr-success-300);
}
.no-alert--error {
  background-color: var(--clr-danger-100);
  color: var(--clr-danger-800);
  border: 0.1rem solid var(--clr-danger-300);
}
.no-alert--warning {
  background-color: var(--clr-warning-100);
  color: var(--clr-warning-800);
  border: 0.1rem solid var(--clr-warning-300);
}
.no-alert ul {
  margin: 0.8rem 0 0 0;
  padding-left: 2rem;
}
.no-alert li {
  margin-bottom: 0.4rem;
}

.no-form-page {
  max-width: 72rem;
  margin: 0 auto;
}
.no-form-page.--small {
  max-width: 48rem;
}
.no-form-page.--medium {
  max-width: 72rem;
}
.no-form-page.--large {
  max-width: 128rem;
}
.no-form-page.--x-large {
  max-width: 160rem;
}
.no-form-page__header {
  margin-bottom: 2.4rem;
}
.no-form-page__title {
  font-size: clamp(2rem, 0.2588996764vw + 1.9029126214rem, 2.4rem);
  font-weight: 600;
  color: var(--clr-text-primary);
  margin: 0 0 0.8rem 0;
}
.no-form-page__subtitle {
  font-size: clamp(1.4rem, 0vw + 1.4rem, 1.4rem);
  color: var(--clr-text-tertiary);
  margin: 0;
}
.no-form-page__back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  color: var(--clr-text-secondary);
  text-decoration: none;
  font-size: clamp(1.4rem, 0vw + 1.4rem, 1.4rem);
  margin-bottom: 1.6rem;
  transition: color 0.2s;
  line-height: 1.5;
}
.no-form-page__back-link:hover {
  color: var(--clr-primary-600);
}
.no-form-page__body {
  background-color: var(--clr-bg-elevated);
  border-radius: 0.8rem;
  box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.1);
  padding: 1.6rem;
}
@media (max-width: 544px) {
  .no-form-page__body {
    padding: 2rem;
  }
}
@media (max-width: 768px) {
  .no-form-page__body {
    padding: 2.4rem;
  }
}
.no-form-page__actions {
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
  margin-top: 2.4rem;
  padding-top: 2.4rem;
  border-top: 0.1rem solid var(--clr-border-secondary);
}
.no-form-page__danger-zone {
  margin-top: 3.2rem;
  padding: 2.4rem;
  background-color: var(--clr-danger-50);
  border: 0.1rem solid var(--clr-danger-200);
  border-radius: 0.8rem;
}
.no-form-page__danger-zone.--bottom {
  margin-bottom: 3.2rem;
}
.no-form-page__danger-zone h2 {
  font-size: clamp(1.8rem, 0vw + 1.8rem, 1.8rem);
  font-weight: 600;
  color: var(--clr-danger-700);
  margin: 0 0 1.2rem 0;
}
.no-form-page__danger-zone p {
  font-size: clamp(1.4rem, 0vw + 1.4rem, 1.4rem);
  color: var(--clr-danger-700);
  margin: 0 0 1.6rem 0;
}

.no-form-section {
  transition: opacity 0.3s ease, filter 0.3s ease;
}
.no-form-section--disabled {
  opacity: 0.6;
  filter: grayscale(0.3);
  pointer-events: none;
}
.no-form-section--disabled .no-form-field__label,
.no-form-section--disabled .no-form-section__title,
.no-form-section--disabled .no-form-section__description {
  color: var(--clr-text-tertiary);
}
.no-form-section__title {
  font-size: clamp(1.8rem, 0.1294498382vw + 1.7514563107rem, 2rem);
  font-weight: 600;
  color: var(--clr-text-primary);
  margin: 0 0 1.6rem 0;
  padding-bottom: 1.2rem;
  border-bottom: 0.1rem solid var(--clr-border-secondary);
  transition: color 0.3s ease;
}
.no-form-section__description {
  transition: color 0.3s ease;
}
.no-form-section__content {
  margin-bottom: 2.4rem;
}
.no-form-section__content--grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (max-width: 768px) {
  .no-form-section__content--grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.no-form-section__content--grid .no-form-field {
  margin-bottom: 0;
}
.no-form-section__divider {
  margin: 3.2rem 0;
  border: none;
  border-top: 0.1rem solid var(--clr-border-secondary);
  background: none;
}

.no-form-field {
  margin-bottom: 1.6rem;
}
@media (max-width: 768px) {
  .no-form-field--full-width {
    grid-column: 1/-1;
  }
}
.no-form-field__label {
  display: block;
  font-size: clamp(1.3rem, 0.0647249191vw + 1.2757281553rem, 1.4rem);
  font-weight: 500;
  color: var(--clr-text-secondary);
  margin-bottom: 0.6rem;
}
.no-form-field__label--required .no-form-field__label-required {
  color: var(--clr-danger-500);
  margin-left: 0.4rem;
  font-weight: 600;
}
.no-form-field__label-required {
  color: var(--clr-danger-500);
  margin-left: 0.4rem;
  font-weight: 600;
}
.no-form-field__input, .no-form-field__select, .no-form-field__textarea {
  width: 100%;
  padding: 0.9rem 1.2rem;
  font-size: clamp(1.4rem, 0vw + 1.4rem, 1.4rem);
  line-height: 1.5;
  border: 0.1rem solid var(--clr-border-primary);
  border-radius: 0.6rem;
  background-color: var(--clr-bg-elevated);
  color: var(--clr-text-primary);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 5000s ease-in-out 0s, color 5000s ease-in-out 0s;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  min-width: 0;
  position: relative;
}
.no-form-field__input:-webkit-autofill, .no-form-field__select:-webkit-autofill, .no-form-field__textarea:-webkit-autofill, .no-form-field__input:-webkit-autofill:hover, .no-form-field__input:-webkit-autofill:focus, .no-form-field__input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--clr-text-primary) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--clr-bg-elevated) inset !important;
  box-shadow: 0 0 0 1000px var(--clr-bg-elevated) inset !important;
  border-color: var(--clr-border-primary) !important;
  background-color: var(--clr-bg-elevated) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 5000s ease-in-out 0s, color 5000s ease-in-out 0s;
}
.no-form-field__input:focus:-webkit-autofill, .no-form-field__select:focus:-webkit-autofill, .no-form-field__textarea:focus:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--clr-bg-elevated) inset, 0 0 0 0.2rem rgba(37, 99, 235, 0.1) !important;
  box-shadow: 0 0 0 1000px var(--clr-bg-elevated) inset, 0 0 0 0.2rem rgba(37, 99, 235, 0.1) !important;
  border-color: var(--clr-primary-600) !important;
}
@media (max-width: 544px) {
  .no-form-field__input, .no-form-field__select, .no-form-field__textarea {
    padding: 1rem 1.4rem;
  }
}
@media (max-width: 768px) {
  .no-form-field__input:hover:not(:disabled):not(:focus), .no-form-field__select:hover:not(:disabled):not(:focus), .no-form-field__textarea:hover:not(:disabled):not(:focus) {
    border-color: var(--clr-primary-400);
  }
}
.no-form-field__input:focus, .no-form-field__select:focus, .no-form-field__textarea:focus {
  outline: none;
  border-color: var(--clr-primary-600);
  box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.1);
  background-color: var(--clr-bg-elevated);
}
.no-form-field__input::placeholder, .no-form-field__select::placeholder, .no-form-field__textarea::placeholder {
  color: var(--clr-gray-400);
  opacity: 1;
}
.no-form-field__input:focus::placeholder, .no-form-field__select:focus::placeholder, .no-form-field__textarea:focus::placeholder {
  opacity: 0.5;
}
.no-form-field__input:disabled, .no-form-field__select:disabled, .no-form-field__textarea:disabled {
  background-color: var(--clr-bg-tertiary);
  color: var(--clr-text-tertiary);
  cursor: not-allowed;
  opacity: 0.6;
}
.no-form-field__input:disabled:hover, .no-form-field__select:disabled:hover, .no-form-field__textarea:disabled:hover {
  border-color: var(--clr-border-primary);
  box-shadow: none;
}
.no-form-field__input--error {
  border-color: var(--clr-danger-500);
  animation: shake 0.3s ease-in-out;
}
@media (max-width: 768px) {
  .no-form-field__input--error:hover:not(:focus) {
    border-color: var(--clr-danger-600);
  }
}
.no-form-field__input--error:focus {
  border-color: var(--clr-danger-500);
  box-shadow: 0 0 0 0.2rem rgba(239, 68, 68, 0.1);
}
@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-0.4rem);
  }
  75% {
    transform: translateX(0.4rem);
  }
}
.no-form-field__password-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.no-form-field__password-wrapper .no-form-field__input, .no-form-field__password-wrapper .no-form-field__select, .no-form-field__password-wrapper .no-form-field__textarea {
  padding-right: 4rem;
}
@media (max-width: 544px) {
  .no-form-field__password-wrapper .no-form-field__input, .no-form-field__password-wrapper .no-form-field__select, .no-form-field__password-wrapper .no-form-field__textarea {
    padding-right: 4.8rem;
  }
}
.no-form-field__input-group {
  display: flex;
  align-items: stretch;
  gap: 0;
  width: 100%;
}
.no-form-field__input-group .no-form-field__input, .no-form-field__input-group .no-form-field__select, .no-form-field__input-group .no-form-field__textarea {
  flex: 1;
  min-width: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.no-form-field__input-group .no-btn {
  flex-shrink: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  white-space: nowrap;
}
.no-form-field__password-toggle {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.8rem;
  height: 2.8rem;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--clr-text-tertiary);
  cursor: pointer;
  transition: all 0.2s ease;
  border-radius: 0.4rem;
  font-size: clamp(1.4rem, 0.1294498382vw + 1.3514563107rem, 1.6rem);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
@media (max-width: 544px) {
  .no-form-field__password-toggle {
    right: 1.2rem;
    width: 3.2rem;
    height: 3.2rem;
  }
}
@media (max-width: 768px) {
  .no-form-field__password-toggle:hover {
    color: var(--clr-text-secondary);
    background-color: var(--clr-bg-tertiary);
  }
}
.no-form-field__password-toggle:active {
  transform: translateY(-50%) scale(0.95);
  color: var(--clr-text-secondary);
  background-color: var(--clr-gray-100);
}
.no-form-field__password-toggle:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.2);
}
.no-form-field__password-toggle i {
  font-size: clamp(1.4rem, 0.1294498382vw + 1.3514563107rem, 1.6rem);
}
.no-form-field__textarea {
  min-height: 10rem;
  resize: vertical;
  font-family: inherit;
  line-height: 1.6;
}
@media (max-width: 768px) {
  .no-form-field__textarea:hover:not(:disabled):not(:focus) {
    border-color: var(--clr-primary-400);
  }
}
.no-form-field__textarea--disabled {
  background-color: var(--clr-bg-tertiary);
  color: var(--clr-text-tertiary);
  cursor: not-allowed;
  opacity: 0.6;
  pointer-events: none;
}
.no-form-field__textarea--disabled:hover {
  border-color: var(--clr-border-primary);
  box-shadow: none;
}
.no-form-field__select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23374151' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1.2rem;
  padding-right: 3.6rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
@media (max-width: 768px) {
  .no-form-field__select:hover:not(:disabled):not(:focus) {
    border-color: var(--clr-primary-400);
  }
}
.no-form-field__select:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%232563eb' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
}
.no-form-field__select::-ms-expand {
  display: none;
}
.no-form-field__select--multiple {
  padding-right: 1.2rem;
  background-image: none;
  min-height: 10rem;
}
.no-form-field__hint {
  font-size: clamp(1.2rem, 0vw + 1.2rem, 1.2rem);
  color: var(--clr-text-tertiary);
  margin-top: 0.6rem;
  line-height: 1.4;
}
.no-form-field__checkbox-group {
  display: flex;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
  user-select: none;
  position: relative;
}
.no-form-field__checkbox-group input[type=checkbox] {
  position: absolute;
  opacity: 0;
  width: 2rem;
  height: 2rem;
  margin: 0;
  cursor: pointer;
  z-index: 1;
  pointer-events: auto;
}
.no-form-field__checkbox-group input[type=checkbox]:checked + .no-checkbox-custom {
  background-color: var(--clr-primary-600);
  border-color: var(--clr-primary-600);
}
.no-form-field__checkbox-group input[type=checkbox]:checked + .no-checkbox-custom i {
  color: var(--clr-base-white);
  opacity: 1;
}
.no-form-field__checkbox-group input[type=checkbox]:focus + .no-checkbox-custom {
  box-shadow: 0 0 0 0.3rem rgba(37, 99, 235, 0.2);
}
.no-form-field__checkbox-group input[type=checkbox]:disabled + .no-checkbox-custom {
  opacity: 0.5;
  cursor: not-allowed;
}
.no-form-field__checkbox-group .no-checkbox-custom {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 0.2rem solid var(--clr-border-primary);
  border-radius: 0.4rem;
  background-color: var(--clr-bg-elevated);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 768px) {
  .no-form-field__checkbox-group .no-checkbox-custom:hover {
    border-color: var(--clr-primary-400);
    background-color: var(--clr-primary-50);
    transform: scale(1.1);
  }
}
.no-form-field__checkbox-group .no-checkbox-custom i {
  color: var(--clr-base-white);
  opacity: 0;
  font-size: 1.2rem;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  transform: scale(0);
}
.no-form-field__checkbox-group input[type=checkbox]:checked + .no-checkbox-custom i {
  opacity: 1;
  transform: scale(1);
}
.no-form-field__checkbox-group label {
  font-size: clamp(1.4rem, 0vw + 1.4rem, 1.4rem);
  color: var(--clr-text-secondary);
  cursor: pointer;
  margin: 0;
  line-height: 1.5;
}
.no-form-field__radio-group {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.no-form-field__radio-group--inline {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1.6rem;
}
.no-form-field__radio-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
  user-select: none;
  position: relative;
}
.no-form-field__radio-item input[type=radio] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.no-form-field__radio-item input[type=radio]:checked + .no-radio-custom {
  border-color: var(--clr-primary-600);
}
.no-form-field__radio-item input[type=radio]:checked + .no-radio-custom::after {
  opacity: 1;
  transform: scale(1);
}
.no-form-field__radio-item input[type=radio]:focus + .no-radio-custom {
  box-shadow: 0 0 0 0.3rem rgba(37, 99, 235, 0.2);
}
.no-form-field__radio-item input[type=radio]:disabled + .no-radio-custom {
  opacity: 0.5;
  cursor: not-allowed;
}
.no-form-field__radio-item .no-radio-custom {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 0.2rem solid var(--clr-border-primary);
  border-radius: 50%;
  background-color: var(--clr-bg-elevated);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
@media (max-width: 768px) {
  .no-form-field__radio-item .no-radio-custom:hover {
    border-color: var(--clr-primary-400);
    background-color: var(--clr-primary-50);
    transform: scale(1.1);
  }
}
.no-form-field__radio-item .no-radio-custom::after {
  content: "";
  position: absolute;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background-color: var(--clr-primary-600);
  opacity: 0;
  transform: scale(0);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.no-form-field__radio-item input[type=radio]:checked + .no-radio-custom::after {
  opacity: 1;
  transform: scale(1);
}
.no-form-field__radio-item label {
  font-size: clamp(1.4rem, 0vw + 1.4rem, 1.4rem);
  color: var(--clr-text-secondary);
  cursor: pointer;
  margin: 0;
  line-height: 1.5;
}
.no-form-field__radio {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  cursor: pointer;
}
.no-form-field__radio input[type=radio] {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: 0.2rem solid var(--clr-border-primary);
  border-radius: 50%;
  background-color: var(--clr-bg-elevated);
  position: relative;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  margin-top: 0.2rem;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
@media (max-width: 768px) {
  .no-form-field__radio input[type=radio]:hover:not(:checked):not(:disabled) {
    border-color: var(--clr-primary-400);
    background-color: var(--clr-primary-50);
    transform: scale(1.1);
  }
}
.no-form-field__radio input[type=radio]:checked {
  border-color: var(--clr-primary-600);
  transform: scale(1.05);
}
.no-form-field__radio input[type=radio]:checked::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background-color: var(--clr-primary-600);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.no-form-field__radio input[type=radio]:focus {
  outline: none;
  box-shadow: 0 0 0 0.3rem rgba(37, 99, 235, 0.25);
}
.no-form-field__radio input[type=radio]:active:not(:disabled) {
  transform: scale(0.95);
}
.no-form-field__radio input[type=radio]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.no-form-field__radio label {
  font-size: clamp(1.4rem, 0vw + 1.4rem, 1.4rem);
  color: var(--clr-text-secondary);
  cursor: pointer;
  margin: 0;
  line-height: 1.5;
  user-select: none;
}
.no-form-field__help {
  font-size: clamp(1.2rem, 0vw + 1.2rem, 1.2rem);
  color: var(--clr-text-tertiary);
  margin-top: 0.6rem;
  line-height: 1.4;
  display: block;
}
.no-form-field__error {
  font-size: clamp(1.2rem, 0vw + 1.2rem, 1.2rem);
  color: var(--clr-danger-500);
  margin-top: 0.6rem;
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.no-form-field__error::before {
  content: "⚠";
  font-size: clamp(1.4rem, 0vw + 1.4rem, 1.4rem);
}
.no-form-field__warning {
  font-size: clamp(1.2rem, 0vw + 1.2rem, 1.2rem);
  color: var(--clr-warning-600, #b45309);
  margin-top: 0.6rem;
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.no-form-field__warning::before {
  content: "⚠";
  font-size: clamp(1.4rem, 0vw + 1.4rem, 1.4rem);
}
.no-form-field .country-select {
  width: 100%;
}
.no-form-field .iti {
  width: 100%;
}
.no-form-field .iti__search-input {
  background: var(--clr-primary-50);
}
.no-form-field .country-select .country-list .country {
  background: var(--clr-bg-elevated);
}
.no-form-field .country-select .country-list .country.highlight {
  background: var(--clr-primary-800);
}
.no-form-field .country-select .country-list .country.highlight .country-name {
  color: var(--clr-primary-50);
}
.no-form-field .iti__dropdown-content {
  background: var(--clr-bg-elevated);
}
.no-form-field .iti__country.iti__highlight {
  background: var(--clr-primary-800);
}
.no-form-field .iti__country.iti__highlight .iti__country-name {
  color: var(--clr-primary-50);
}

.country-select .country-list {
  z-index: 12;
}

.no-counter-input {
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
  max-width: 12rem;
  border: 0.1rem solid var(--clr-border-primary);
  border-radius: 0.6rem;
  background: var(--clr-bg-primary);
  overflow: hidden;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.no-counter-input:hover {
  border-color: var(--clr-primary-400);
}
.no-counter-input:focus-within {
  border-color: var(--clr-primary-500);
  box-shadow: 0 0 0 0.3rem rgba(59, 130, 246, 0.1);
}
.no-counter-input.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--clr-bg-secondary);
  border-color: var(--clr-border-secondary);
}
.no-counter-input__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  background: var(--clr-bg-secondary);
  border: none;
  color: var(--clr-text-primary);
  font-size: 1.6rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
  user-select: none;
}
.no-counter-input__btn:hover:not(:disabled) {
  background: var(--clr-primary-50);
  color: var(--clr-primary-600);
}
.no-counter-input__btn:active:not(:disabled) {
  background: var(--clr-primary-100);
  transform: scale(0.95);
}
.no-counter-input__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.no-counter-input__input {
  flex: 1;
  width: 100%;
  min-width: 0;
  height: 3.2rem;
  padding: 0 1rem;
  border: none;
  background: transparent;
  color: var(--clr-text-primary);
  font-size: 1.5rem;
  font-weight: 600;
  text-align: center;
  outline: none;
  appearance: textfield;
  -moz-appearance: textfield;
}
.no-counter-input__input::-webkit-inner-spin-button, .no-counter-input__input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.no-counter-input__input:focus {
  outline: none;
}

/**
 * Counter Input Component
 * 수량 선택기 컴포넌트 (미니멀하고 직관적인 디자인)
 */
.counter-input {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  border: 0.1rem solid var(--clr-border-primary);
  border-radius: 0.6rem;
  background-color: var(--clr-bg-primary);
  padding: 0;
  min-width: 8rem;
  max-width: 12.4rem;
  overflow: hidden;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.counter-input:hover:not(.is-disabled) {
  border-color: var(--clr-primary-400);
  box-shadow: 0 0 0 0.2rem rgba(10, 151, 237, 0.1);
}
.counter-input:focus-within:not(.is-disabled) {
  border-color: var(--clr-primary-500);
  box-shadow: 0 0 0 0.2rem rgba(10, 151, 237, 0.15);
  outline: none;
}
.counter-input.is-disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: var(--clr-bg-secondary);
  border-color: var(--clr-border-secondary);
}
.counter-input.is-disabled:hover {
  border-color: var(--clr-border-secondary);
  box-shadow: none;
}

.counter-input__button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 3.6rem;
  height: 3.6rem;
  padding: 0;
  border: none;
  background-color: transparent;
  color: var(--clr-text-primary);
  font-size: 1.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
  flex-shrink: 0;
}
.counter-input.is-disabled .counter-input__button {
  opacity: 0.4;
  cursor: not-allowed;
  color: var(--clr-text-disabled);
}
.counter-input__button:hover:not(:disabled):not(.counter-input.is-disabled .counter-input__button) {
  background-color: var(--clr-bg-secondary);
}
.counter-input__button:active:not(:disabled):not(.counter-input.is-disabled .counter-input__button) {
  background-color: var(--clr-bg-tertiary);
  transform: scale(0.95);
}
.counter-input__button:disabled, .counter-input.is-disabled .counter-input__button {
  opacity: 0.4;
  cursor: not-allowed;
  color: var(--clr-text-disabled);
}
.counter-input__button:focus:not(:disabled):not(.counter-input.is-disabled .counter-input__button) {
  outline: none;
  background-color: var(--clr-bg-secondary);
}
.counter-input__button--decrease {
  border-right: 0.1rem solid var(--clr-border-secondary);
}
.counter-input__button--increase {
  border-left: 0.1rem solid var(--clr-border-secondary);
}

.counter-input__value {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-width: 4rem;
  height: 3.6rem;
  padding: 0 1rem;
  color: var(--clr-text-primary);
  font-size: 1.5rem;
  font-weight: 600;
  text-align: center;
  user-select: none;
}

.order-quantity-field {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 1rem;
}
.order-quantity-field label {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--clr-text-secondary);
}

/**
 * Select Component with Search
 * 검색 기능이 있는 Select 컴포넌트 스타일
 */
.no-select-wrapper {
  position: relative;
  width: 100%;
}
.no-select-wrapper__display {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.4rem;
  background: var(--clr-bg-elevated);
  border: 0.1rem solid var(--clr-border-primary);
  border-radius: 0.8rem;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: clamp(1.4rem, 0vw + 1.4rem, 1.4rem);
  line-height: 1.5;
  min-height: auto;
  color: var(--clr-text-primary);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
@media (max-width: 544px) {
  .no-select-wrapper__display {
    padding: 1.2rem 1.6rem;
  }
}
@media (max-width: 768px) {
  .no-select-wrapper__display:hover:not(.no-select-wrapper__display--open) {
    border-color: var(--clr-primary-500);
    box-shadow: 0 0.2rem 0.4rem rgba(37, 99, 235, 0.08);
    transform: translateY(-0.05rem);
  }
}
.no-select-wrapper__display:focus {
  outline: none;
  border-color: var(--clr-primary-600);
  box-shadow: 0 0 0 0.3rem rgba(37, 99, 235, 0.15), 0 0.2rem 0.6rem rgba(37, 99, 235, 0.1);
}
.no-select-wrapper__display:active {
  transform: translateY(0);
}
.no-select-wrapper__display--open {
  border-color: var(--clr-primary-600);
  box-shadow: 0 0 0 0.3rem rgba(37, 99, 235, 0.15), 0 0.2rem 0.6rem rgba(37, 99, 235, 0.1);
}
.no-select-wrapper__text {
  flex: 1;
  font-size: clamp(1.4rem, 0vw + 1.4rem, 1.4rem);
  color: var(--clr-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.no-select-wrapper__arrow {
  font-size: clamp(1.2rem, 0.1294498382vw + 1.1514563107rem, 1.4rem);
  color: var(--clr-text-secondary);
  transition: transform 0.2s ease;
  margin-left: 1.2rem;
  flex-shrink: 0;
}
.no-select-wrapper--open .no-select-wrapper__arrow {
  transform: rotate(180deg);
}
.no-select-wrapper__search-container {
  position: relative;
  padding: 0.8rem;
  border-bottom: 0.1rem solid var(--clr-border-secondary);
}
.no-select-wrapper__search {
  width: 100%;
  padding: 0.8rem 3.2rem 0.8rem 1.2rem;
  font-size: clamp(1.4rem, 0vw + 1.4rem, 1.4rem);
  color: var(--clr-text-primary);
  background: var(--clr-bg-elevated);
  border: 0.1rem solid var(--clr-border-primary);
  border-radius: 0.4rem;
  transition: all 0.2s ease;
}
.no-select-wrapper__search:focus {
  outline: none;
  border-color: var(--clr-primary-500);
  box-shadow: 0 0 0 0.2rem rgba(10, 151, 237, 0.1);
}
.no-select-wrapper__search::placeholder {
  color: var(--clr-text-tertiary);
}
.no-select-wrapper__search-clear {
  position: absolute;
  right: 1.6rem;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--clr-text-secondary);
  cursor: pointer;
  border-radius: 50%;
  transition: all 0.2s ease;
  font-size: clamp(1.2rem, 0.1294498382vw + 1.1514563107rem, 1.4rem);
}
.no-select-wrapper__search-clear:hover {
  background: var(--clr-gray-100);
  color: var(--clr-text-primary);
}
.no-select-wrapper__dropdown {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 10;
  background: var(--clr-bg-elevated);
  border: 0.1rem solid var(--clr-border-primary);
  border-radius: 0.8rem;
  box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.15);
  margin-top: 0.4rem;
  max-height: 30rem;
  overflow: hidden;
  display: none;
}
.no-select-wrapper__dropdown--open {
  display: block;
}
.no-select-wrapper__dropdown--top {
  bottom: 100%;
  top: auto;
  margin-top: 0;
  margin-bottom: 0.4rem;
}
.no-select-wrapper__dropdown--bottom {
  top: 100%;
  bottom: auto;
}
.no-select-wrapper__options {
  max-height: 24rem;
  overflow-y: auto;
}
.no-select-wrapper__option {
  padding: 1rem 1.4rem;
  font-size: clamp(1.4rem, 0vw + 1.4rem, 1.4rem);
  color: var(--clr-text-primary);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  border-bottom: 0.1rem solid var(--clr-border-secondary);
  position: relative;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
  white-space: nowrap;
}
@media (max-width: 544px) {
  .no-select-wrapper__option {
    padding: 1.2rem 1.6rem;
  }
}
.no-select-wrapper__option:last-child {
  border-bottom: none;
}
.no-select-wrapper__option:hover:not(.no-select-wrapper__option--disabled) {
  background: var(--clr-primary-50);
  color: var(--clr-primary-700);
  padding-left: 1.4rem;
  box-shadow: inset 0.2rem 0 0 var(--clr-primary-400);
}
@media (max-width: 544px) {
  .no-select-wrapper__option:hover:not(.no-select-wrapper__option--disabled) {
    padding-left: 1.6rem;
  }
}
.no-select-wrapper__option:focus {
  outline: none;
  background: var(--clr-primary-50);
  color: var(--clr-primary-700);
  box-shadow: inset 0.2rem 0 0 var(--clr-primary-600);
}
.no-select-wrapper__option:active:not(.no-select-wrapper__option--disabled) {
  background: var(--clr-primary-100);
  box-shadow: inset 0.2rem 0 0 var(--clr-primary-600);
}
.no-select-wrapper__option--selected {
  background: var(--clr-primary-100);
  color: var(--clr-primary-700);
  font-weight: 500;
  box-shadow: inset 0.2rem 0 0 var(--clr-primary-600);
}
.no-select-wrapper__option--selected:hover {
  background: var(--clr-primary-150);
}
.no-select-wrapper__option--focused {
  background: var(--clr-primary-50);
  color: var(--clr-primary-700);
  box-shadow: inset 0.2rem 0 0 var(--clr-primary-400);
}
.no-select-wrapper__option--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.no-select-wrapper__option--disabled:hover {
  background: transparent;
  color: var(--clr-text-primary);
  transform: none;
  padding-left: 1rem;
}
@media (max-width: 544px) {
  .no-select-wrapper__option--disabled:hover {
    padding-left: 1.2rem;
  }
}
.no-select-wrapper select {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
}

/**
 * MultiSelect Component with Search
 * 검색 기능이 있는 Multi-Select 컴포넌트 스타일
 */
.no-multiselect-wrapper {
  position: relative;
  width: 100%;
}
.no-multiselect-wrapper__input {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 0.9rem 1.4rem;
  background: var(--clr-bg-elevated);
  border: 0.1rem solid var(--clr-border-primary);
  border-radius: 0.8rem;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: clamp(1.4rem, 0vw + 1.4rem, 1.4rem);
  line-height: 1.5;
  min-height: 4.4rem;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
@media (max-width: 544px) {
  .no-multiselect-wrapper__input {
    padding: 1rem 1.6rem;
    min-height: 4.8rem;
  }
}
@media (max-width: 768px) {
  .no-multiselect-wrapper__input:hover:not(.no-multiselect-wrapper__input--open) {
    border-color: var(--clr-primary-500);
    box-shadow: 0 0.2rem 0.4rem rgba(37, 99, 235, 0.08);
  }
}
.no-multiselect-wrapper__input:focus-within {
  outline: none;
  border-color: var(--clr-primary-600);
  box-shadow: 0 0 0 0.3rem rgba(37, 99, 235, 0.15), 0 0.2rem 0.6rem rgba(37, 99, 235, 0.1);
}
.no-multiselect-wrapper__input--open {
  border-color: var(--clr-primary-600);
  box-shadow: 0 0 0 0.3rem rgba(37, 99, 235, 0.15), 0 0.2rem 0.6rem rgba(37, 99, 235, 0.1);
}
.no-multiselect-wrapper__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  flex: 1;
  min-width: 0;
  align-items: center;
}
.no-multiselect-wrapper__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 1rem;
  background: var(--clr-gray-100);
  color: var(--clr-text-primary);
  border-radius: 0.6rem;
  font-size: clamp(1.3rem, 0.0647249191vw + 1.2757281553rem, 1.4rem);
  font-weight: 500;
  flex-shrink: 0;
  white-space: nowrap;
}
.no-multiselect-wrapper__tag-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--clr-text-secondary);
  cursor: pointer;
  border-radius: 50%;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: clamp(1rem, 0.1294498382vw + 0.9514563107rem, 1.2rem);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .no-multiselect-wrapper__tag-remove:hover {
    background: var(--clr-gray-200);
    color: var(--clr-text-primary);
    transform: scale(1.15);
  }
}
.no-multiselect-wrapper__tag-remove:active {
  transform: scale(0.9);
}
.no-multiselect-wrapper__tag-remove:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(107, 114, 128, 0.25);
}
.no-multiselect-wrapper__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.8rem;
  background: var(--clr-gray-100);
  color: var(--clr-text-secondary);
  border-radius: 0.6rem;
  font-size: clamp(1.3rem, 0.0647249191vw + 1.2757281553rem, 1.4rem);
  font-weight: 500;
  flex-shrink: 0;
  white-space: nowrap;
}
.no-multiselect-wrapper__search-input {
  flex: 1;
  min-width: 8rem;
  padding: 0;
  border: none;
  background: transparent;
  font-size: clamp(1.4rem, 0vw + 1.4rem, 1.4rem);
  color: var(--clr-text-primary);
  font-family: inherit;
  outline: none;
}
.no-multiselect-wrapper__search-input::placeholder {
  color: var(--clr-text-tertiary);
}
.no-multiselect-wrapper__arrow {
  font-size: clamp(1.2rem, 0.1294498382vw + 1.1514563107rem, 1.4rem);
  color: var(--clr-text-secondary);
  transition: transform 0.2s ease;
  margin-left: 0.8rem;
  flex-shrink: 0;
}
.no-multiselect-wrapper--open .no-multiselect-wrapper__arrow {
  transform: rotate(180deg);
}
.no-multiselect-wrapper__search-container {
  position: relative;
  padding: 0.8rem;
  border-bottom: 0.1rem solid var(--clr-border-secondary);
}
.no-multiselect-wrapper__search {
  width: 100%;
  padding: 0.8rem 3.2rem 0.8rem 1.2rem;
  font-size: clamp(1.4rem, 0vw + 1.4rem, 1.4rem);
  color: var(--clr-text-primary);
  background: var(--clr-bg-elevated);
  border: 0.1rem solid var(--clr-border-primary);
  border-radius: 0.4rem;
  transition: all 0.2s ease;
}
.no-multiselect-wrapper__search:focus {
  outline: none;
  border-color: var(--clr-primary-500);
  box-shadow: 0 0 0 0.2rem rgba(10, 151, 237, 0.1);
}
.no-multiselect-wrapper__search::placeholder {
  color: var(--clr-text-tertiary);
}
.no-multiselect-wrapper__search-clear {
  position: absolute;
  right: 1.6rem;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--clr-text-secondary);
  cursor: pointer;
  border-radius: 50%;
  transition: all 0.2s ease;
  font-size: clamp(1.2rem, 0.1294498382vw + 1.1514563107rem, 1.4rem);
}
.no-multiselect-wrapper__search-clear:hover {
  background: var(--clr-gray-100);
  color: var(--clr-text-primary);
}
.no-multiselect-wrapper__dropdown {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--clr-bg-elevated);
  border: 0.1rem solid var(--clr-border-primary);
  border-radius: 0.8rem;
  box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.15);
  margin-top: 0.4rem;
  max-height: 30rem;
  overflow: hidden;
  display: none;
}
.no-multiselect-wrapper__dropdown--open {
  display: block;
}
.no-multiselect-wrapper__dropdown--top {
  bottom: 100%;
  top: auto;
  margin-top: 0;
  margin-bottom: 0.4rem;
}
.no-multiselect-wrapper__dropdown--bottom {
  top: 100%;
  bottom: auto;
}
.no-multiselect-wrapper__options {
  max-height: 24rem;
  overflow-y: auto;
}
.no-multiselect-wrapper__option {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.4rem;
  font-size: clamp(1.4rem, 0vw + 1.4rem, 1.4rem);
  color: var(--clr-text-primary);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  border-bottom: 0.1rem solid var(--clr-border-secondary);
  position: relative;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}
@media (max-width: 544px) {
  .no-multiselect-wrapper__option {
    padding: 1.2rem 1.6rem;
  }
}
.no-multiselect-wrapper__option:last-child {
  border-bottom: none;
}
.no-multiselect-wrapper__option--select-all {
  font-weight: 500;
  border-bottom: 0.1rem solid var(--clr-border-primary);
  margin-bottom: 0.4rem;
  padding-bottom: 1.2rem;
}
.no-multiselect-wrapper__option--indeterminate .no-multiselect-wrapper__checkbox-wrapper .no-checkbox-custom {
  border-color: var(--clr-primary-600);
  background: var(--clr-primary-600);
}
.no-multiselect-wrapper__option--indeterminate .no-multiselect-wrapper__checkbox-wrapper .no-checkbox-custom i {
  opacity: 1;
  transform: rotate(45deg);
}
.no-multiselect-wrapper__option:hover:not(.no-multiselect-wrapper__option--disabled) {
  background: var(--clr-primary-50);
  color: var(--clr-primary-700);
}
.no-multiselect-wrapper__option:hover:not(.no-multiselect-wrapper__option--disabled) .no-multiselect-wrapper__checkbox-wrapper .no-checkbox-custom {
  border-color: var(--clr-primary-500);
  transform: scale(1.05);
}
.no-multiselect-wrapper__option:focus {
  outline: none;
  background: var(--clr-primary-50);
  color: var(--clr-primary-700);
}
.no-multiselect-wrapper__option:active:not(.no-multiselect-wrapper__option--disabled) {
  background: var(--clr-primary-100);
}
.no-multiselect-wrapper__option--selected {
  background: var(--clr-primary-100);
  color: var(--clr-primary-700);
  font-weight: 500;
}
.no-multiselect-wrapper__option--selected:hover {
  background: var(--clr-primary-150);
}
.no-multiselect-wrapper__option--selected .no-multiselect-wrapper__checkbox-wrapper .no-checkbox-custom {
  border-color: var(--clr-primary-600);
  background: var(--clr-primary-600);
}
.no-multiselect-wrapper__option--selected .no-multiselect-wrapper__checkbox-wrapper .no-checkbox-custom i {
  opacity: 1;
}
.no-multiselect-wrapper__option--focused {
  background: var(--clr-primary-50);
  color: var(--clr-primary-700);
}
.no-multiselect-wrapper__option--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.no-multiselect-wrapper__option--disabled:hover {
  background: transparent;
  color: var(--clr-text-primary);
}
.no-multiselect-wrapper__option--disabled:hover .no-multiselect-wrapper__checkbox-wrapper .no-checkbox-custom {
  transform: none;
}
.no-multiselect-wrapper__option-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.no-multiselect-wrapper__checkbox-wrapper {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.no-multiselect-wrapper__checkbox-wrapper input[type=checkbox] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.no-multiselect-wrapper__checkbox-wrapper .no-checkbox-custom {
  width: 1.8rem;
  height: 1.8rem;
  border: 0.2rem solid var(--clr-border-primary);
  border-radius: 0.4rem;
  background: var(--clr-bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}
.no-multiselect-wrapper__checkbox-wrapper .no-checkbox-custom i {
  font-size: clamp(1.2rem, 0vw + 1.2rem, 1.2rem);
  color: var(--clr-base-white);
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.no-multiselect-wrapper select {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
}

/**
 * Switch Toggle Component
 * 일루코 스타일 토글 스위치 컴포넌트
 */
.no-switch {
  position: relative;
  display: inline-block;
  width: 4.4rem;
  height: 2.4rem;
  flex-shrink: 0;
}
.no-switch__input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.no-switch__input:checked + .no-switch__slider {
  background-color: var(--clr-primary-600);
}
.no-switch__input:checked + .no-switch__slider::before {
  transform: translateX(2rem);
}
.no-switch__input:focus + .no-switch__slider {
  outline: none;
  box-shadow: 0 0 0 0.3rem rgba(37, 99, 235, 0.25);
}
.no-switch__input:disabled + .no-switch__slider {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: var(--clr-border-primary);
}
@media (max-width: 768px) {
  .no-switch__input:hover:not(:disabled):not(:checked) + .no-switch__slider {
    background-color: var(--clr-text-tertiary);
    box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.1);
  }
  .no-switch__input:hover:not(:disabled):checked + .no-switch__slider {
    background-color: var(--clr-primary-700);
    box-shadow: 0 0.2rem 0.6rem rgba(37, 99, 235, 0.25);
  }
}
.no-switch__input:active:not(:disabled) + .no-switch__slider {
  transform: scale(0.96);
}
.no-switch__input:active:not(:disabled) + .no-switch__slider::before {
  width: 2rem;
}
.no-switch__slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--clr-gray-300);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 2.4rem;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.no-switch__slider::before {
  position: absolute;
  content: "";
  height: 1.8rem;
  width: 1.8rem;
  left: 0.3rem;
  bottom: 0.3rem;
  background-color: var(--clr-base-white);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 50%;
  box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.15);
}
.no-switch--sm {
  width: 3.6rem;
  height: 2rem;
}
.no-switch--sm .no-switch__slider::before {
  height: 1.4rem;
  width: 1.4rem;
  left: 0.3rem;
  bottom: 0.3rem;
}
.no-switch--sm .no-switch__input:checked + .no-switch__slider::before {
  transform: translateX(1.6rem);
}
.no-switch--lg {
  width: 5.2rem;
  height: 2.8rem;
}
.no-switch--lg .no-switch__slider::before {
  height: 2.2rem;
  width: 2.2rem;
  left: 0.3rem;
  bottom: 0.3rem;
}
.no-switch--lg .no-switch__input:checked + .no-switch__slider::before {
  transform: translateX(2.4rem);
}
.no-switch--success .no-switch__input:checked + .no-switch__slider {
  background-color: var(--clr-success-600);
}
@media (max-width: 768px) {
  .no-switch--success .no-switch__input:hover:not(:disabled):checked + .no-switch__slider {
    background-color: var(--clr-success-700);
  }
}
.no-switch--warning .no-switch__input:checked + .no-switch__slider {
  background-color: var(--clr-warning-500);
}
@media (max-width: 768px) {
  .no-switch--warning .no-switch__input:hover:not(:disabled):checked + .no-switch__slider {
    background-color: var(--clr-warning-600);
  }
}
.no-switch--danger .no-switch__input:checked + .no-switch__slider {
  background-color: var(--clr-danger-600);
}
@media (max-width: 768px) {
  .no-switch--danger .no-switch__input:hover:not(:disabled):checked + .no-switch__slider {
    background-color: var(--clr-danger-700);
  }
}

/**
 * Editor Component Styles
 * Summernote 에디터 스타일 초기화 및 커스터마이징
 */
.note-editor {
  border-radius: 0.8rem !important;
  overflow: hidden !important;
  border: 1px solid var(--clr-border-primary, #ddd) !important;
  position: relative !important;
  z-index: 1 !important;
}
.note-editor .note-dropzone {
  display: none !important;
}
.note-editor .note-dropzone.note-dropzone-open {
  display: none !important;
}
.note-editor.dragover .note-dropzone {
  display: none !important;
}
.note-editor .note-toolbar {
  background-color: var(--clr-bg-elevated, #fff) !important;
  border-bottom: 1px solid var(--clr-border-primary, #ddd) !important;
  padding: 0.5rem !important;
  border-top-left-radius: 0.8rem !important;
  border-top-right-radius: 0.8rem !important;
}
.note-editor .note-toolbar .note-btn-group {
  margin-right: 0.25rem !important;
}
.note-editor .note-toolbar .note-btn-group .btn {
  padding: 0.375rem 0.75rem !important;
  font-size: 14px !important;
  border-color: var(--clr-border-primary, #ddd) !important;
  color: var(--clr-text-primary, #333) !important;
  background-color: var(--clr-bg-elevated, #fff) !important;
}
.note-editor .note-toolbar .note-btn-group .btn:hover, .note-editor .note-toolbar .note-btn-group .btn:focus, .note-editor .note-toolbar .note-btn-group .btn.active {
  background-color: var(--clr-primary-100, #e6f2ff) !important;
  color: var(--clr-primary-700, #0052a3) !important;
  border-color: var(--clr-primary-300, #99ccff) !important;
}
.note-editor .note-editing-area .note-editable {
  min-height: 12rem !important;
  padding: 1rem !important;
  font-family: inherit !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: var(--clr-text-primary) !important;
  background-color: var(--clr-bg-elevated, #fff) !important;
}
.note-editor .note-editing-area .note-editable h1 {
  font-size: 2em !important;
  font-weight: bold !important;
  margin: 0 0 1rem 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
}
.note-editor .note-editing-area .note-editable h2 {
  font-size: 1.5em !important;
  font-weight: bold !important;
  margin: 0 0 0.875rem 0 !important;
  padding: 0 !important;
  line-height: 1.3 !important;
}
.note-editor .note-editing-area .note-editable h3 {
  font-size: 1.25em !important;
  font-weight: bold !important;
  margin: 0 0 0.75rem 0 !important;
  padding: 0 !important;
  line-height: 1.4 !important;
}
.note-editor .note-editing-area .note-editable h4 {
  font-size: 1.125em !important;
  font-weight: bold !important;
  margin: 0 0 0.625rem 0 !important;
  padding: 0 !important;
  line-height: 1.4 !important;
}
.note-editor .note-editing-area .note-editable h5 {
  font-size: 1em !important;
  font-weight: bold !important;
  margin: 0 0 0.5rem 0 !important;
  padding: 0 !important;
  line-height: 1.5 !important;
}
.note-editor .note-editing-area .note-editable h6 {
  font-size: 0.875em !important;
  font-weight: bold !important;
  margin: 0 0 0.5rem 0 !important;
  padding: 0 !important;
  line-height: 1.5 !important;
}
.note-editor .note-editing-area .note-editable p {
  margin: 0 0 1rem 0 !important;
  padding: 0 !important;
  line-height: 1.6 !important;
  font-size: inherit !important;
}
.note-editor .note-editing-area .note-editable p:last-child,
.note-editor .note-editing-area .note-editable h1:last-child,
.note-editor .note-editing-area .note-editable h2:last-child,
.note-editor .note-editing-area .note-editable h3:last-child,
.note-editor .note-editing-area .note-editable h4:last-child,
.note-editor .note-editing-area .note-editable h5:last-child,
.note-editor .note-editing-area .note-editable h6:last-child,
.note-editor .note-editing-area .note-editable ul:last-child,
.note-editor .note-editing-area .note-editable ol:last-child,
.note-editor .note-editing-area .note-editable blockquote:last-child {
  margin-bottom: 0 !important;
}
.note-editor .note-editing-area .note-editable ul,
.note-editor .note-editing-area .note-editable ol {
  margin: 0 0 1rem 0 !important;
  padding-left: 2rem !important;
}
.note-editor .note-editing-area .note-editable ul li,
.note-editor .note-editing-area .note-editable ol li {
  list-style: disc !important;
  margin: 0 0 0.5rem 0 !important;
  padding: 0 !important;
  line-height: 1.6 !important;
}
.note-editor .note-editing-area .note-editable ol li {
  list-style: decimal !important;
}
.note-editor .note-editing-area .note-editable blockquote {
  margin: 1rem 0 !important;
  padding: 0.75rem 1rem !important;
  border-left: 4px solid var(--clr-border-primary, #ddd) !important;
  background-color: var(--clr-bg-secondary, #f9f9f9) !important;
  font-style: italic !important;
}
.note-editor .note-editing-area .note-editable a {
  color: var(--clr-primary-600, #0066cc) !important;
  text-decoration: underline !important;
}
.note-editor .note-editing-area .note-editable a:hover {
  color: var(--clr-primary-700, #0052a3) !important;
}
.note-editor .note-editing-area .note-editable img {
  max-width: 100% !important;
  height: auto !important;
  margin: 1rem 0 !important;
  display: block !important;
}
.note-editor .note-editing-area .note-editable iframe {
  max-width: 100% !important;
  margin: 1rem 0 !important;
  display: block !important;
}
.note-editor .note-editing-area .note-editable table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 1rem 0 !important;
}
.note-editor .note-editing-area .note-editable td,
.note-editor .note-editing-area .note-editable th {
  border: 1px solid var(--clr-border-primary, #ddd) !important;
  padding: 0.5rem !important;
  text-align: left !important;
}
.note-editor .note-editing-area .note-editable th {
  background-color: var(--clr-bg-secondary, #f5f5f5) !important;
  font-weight: bold !important;
}
.note-editor .note-editing-area .note-editable code {
  background-color: var(--clr-bg-secondary, #f5f5f5) !important;
  padding: 0.125rem 0.25rem !important;
  border-radius: 0.25rem !important;
  font-family: monospace !important;
  font-size: 0.9em !important;
}
.note-editor .note-editing-area .note-editable pre {
  background-color: var(--clr-bg-secondary, #f5f5f5) !important;
  padding: 1rem !important;
  border-radius: 0.25rem !important;
  overflow-x: auto !important;
  margin: 1rem 0 !important;
}
.note-editor .note-editing-area .note-editable pre code {
  background-color: transparent !important;
  padding: 0 !important;
}
.note-editor .note-editing-area .note-editable [style*="text-align: left"] {
  text-align: left !important;
}
.note-editor .note-editing-area .note-editable [style*="text-align: center"] {
  text-align: center !important;
}
.note-editor .note-editing-area .note-editable [style*="text-align: right"] {
  text-align: right !important;
}
.note-editor .note-editing-area .note-editable [style*="text-align: justify"] {
  text-align: justify !important;
}
.note-editor .note-statusbar {
  background-color: var(--clr-bg-secondary, #f5f5f5) !important;
  border-top: 1px solid var(--clr-border-primary, #ddd) !important;
  border-bottom-left-radius: 0.8rem !important;
  border-bottom-right-radius: 0.8rem !important;
}

.note-modal.modal {
  background: rgba(0, 0, 0, 0.5) !important;
}

/* 부트스트랩 기본 백드롭 안 보이게 */
.modal-backdrop {
  display: none !important;
}

/* modal-open이어도 스크롤 막지 않게 */
body.modal-open {
  overflow: visible !important;
  padding-right: 0 !important;
}

.note-modal-backdrop {
  z-index: 10001 !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: rgba(0, 0, 0, 0.5) !important;
}

.note-modal.modal {
  z-index: 10002 !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
}
.note-modal.modal.show {
  display: flex !important;
}
.note-modal.modal.show[aria-hidden=false] {
  display: flex !important;
}
.note-modal.modal[aria-hidden=true] {
  display: none !important;
}
.note-modal .modal-dialog {
  margin: 0 !important;
  width: 90% !important;
  max-width: 44rem !important;
  position: relative !important;
  box-shadow: none;
}
.note-modal .modal-content {
  border-radius: 1.6rem !important;
  border: 0.1rem solid var(--clr-border-primary) !important;
  background-color: var(--clr-bg-elevated) !important;
  box-shadow: 0 2rem 2.5rem rgba(0, 0, 0, 0.15), 0 0.8rem 1rem rgba(0, 0, 0, 0.1) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
.note-modal .modal-header {
  border-bottom: 0.1rem solid var(--clr-border-primary) !important;
  background-color: transparent !important;
  padding: 2.4rem 2.4rem 0 2.4rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1.2rem !important;
}
@media (max-width: 544px) {
  .note-modal .modal-header {
    padding: 3.2rem 3.2rem 0 3.2rem !important;
  }
}
.note-modal .modal-header .modal-title {
  font-size: clamp(1.8rem, 0.1294498382vw + 1.7514563107rem, 2rem) !important;
  font-weight: 600 !important;
  color: var(--clr-text-primary) !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}
.note-modal .modal-header .close {
  padding: 0.8rem !important;
  margin: 0 !important;
  opacity: 0.6 !important;
  color: var(--clr-text-primary) !important;
  font-size: 1.8rem !important;
  line-height: 1 !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 3.2rem !important;
  height: 3.2rem !important;
  border-radius: 0.8rem !important;
}
.note-modal .modal-header .close:hover, .note-modal .modal-header .close:focus {
  opacity: 1 !important;
  color: var(--clr-text-primary) !important;
  background-color: var(--clr-bg-secondary) !important;
}
.note-modal .modal-body {
  padding: 2.4rem !important;
  background-color: transparent !important;
  color: var(--clr-text-primary) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2rem !important;
}
@media (max-width: 544px) {
  .note-modal .modal-body {
    padding: 3.2rem !important;
  }
}
.note-modal .modal-body .form-group.note-form-group {
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.8rem !important;
}
.note-modal .modal-body .note-form-label {
  display: block !important;
  margin: 0 !important;
  font-weight: 500 !important;
  color: var(--clr-text-primary) !important;
  font-size: clamp(1.4rem, 0.1294498382vw + 1.3514563107rem, 1.6rem) !important;
  line-height: 1.5 !important;
}
.note-modal .modal-body .form-control.note-form-control,
.note-modal .modal-body .note-input.form-control {
  display: block !important;
  width: 100% !important;
  padding: 0.8rem 1.2rem !important;
  font-size: clamp(1.4rem, 0.1294498382vw + 1.3514563107rem, 1.6rem) !important;
  line-height: 1.5 !important;
  color: var(--clr-text-primary) !important;
  background-color: var(--clr-bg-elevated) !important;
  border: 0.1rem solid var(--clr-border-primary) !important;
  border-radius: 0.8rem !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.note-modal .modal-body .form-control.note-form-control:focus,
.note-modal .modal-body .note-input.form-control:focus {
  color: var(--clr-text-primary) !important;
  background-color: var(--clr-bg-elevated) !important;
  border-color: var(--clr-primary-500) !important;
  outline: 0 !important;
  box-shadow: 0 0 0 0.3rem rgba(var(--clr-primary-500-rgb, 10, 151, 237), 0.2) !important;
}
.note-modal .modal-body .form-control.note-form-control::placeholder,
.note-modal .modal-body .note-input.form-control::placeholder {
  color: var(--clr-text-secondary) !important;
  opacity: 1 !important;
}
.note-modal .modal-body .form-check {
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
}
.note-modal .modal-body .form-check .form-check-label {
  display: flex !important;
  align-items: center !important;
  color: var(--clr-text-primary) !important;
  font-size: clamp(1.4rem, 0.1294498382vw + 1.3514563107rem, 1.6rem) !important;
  cursor: pointer !important;
  padding-left: 2.4rem !important;
  line-height: 1.5 !important;
  gap: 0.8rem !important;
}
.note-modal .modal-body .form-check .form-check-label .form-check-input {
  margin: 0 !important;
  margin-left: -2.4rem !important;
  width: 1.8rem !important;
  height: 1.8rem !important;
  cursor: pointer !important;
  border: 0.1rem solid var(--clr-border-primary) !important;
  border-radius: 0.4rem !important;
  background-color: var(--clr-bg-elevated) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.note-modal .modal-body .form-check .form-check-label .form-check-input:checked {
  background-color: var(--clr-primary-500) !important;
  border-color: var(--clr-primary-500) !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e") !important;
  background-size: 1.2rem 1.2rem !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
.note-modal .modal-body .form-check .form-check-label .form-check-input:focus {
  border-color: var(--clr-primary-500) !important;
  box-shadow: 0 0 0 0.3rem rgba(var(--clr-primary-500-rgb, 10, 151, 237), 0.2) !important;
}
.note-modal .modal-footer {
  border-top: 0.1rem solid var(--clr-border-primary) !important;
  background-color: transparent !important;
  padding: 0 2.4rem 2.4rem 2.4rem !important;
  display: flex !important;
  flex-direction: row !important;
  gap: 0.8rem !important;
  justify-content: flex-end !important;
  margin-top: 0 !important;
}
@media (max-width: 544px) {
  .note-modal .modal-footer {
    padding: 0 3.2rem 3.2rem 3.2rem !important;
    gap: 1.2rem !important;
  }
}
.note-modal .modal-footer .btn {
  padding: 0.8rem 1.6rem !important;
  font-size: clamp(1.4rem, 0.1294498382vw + 1.3514563107rem, 1.6rem) !important;
  font-weight: 500 !important;
  border-radius: 0.8rem !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  min-width: 10rem !important;
  border: 0.1rem solid transparent !important;
}
.note-modal .modal-footer .btn.btn-primary, .note-modal .modal-footer .btn.note-btn-primary {
  color: var(--clr-base-white) !important;
  background-color: var(--clr-primary-500) !important;
  border-color: var(--clr-primary-500) !important;
}
.note-modal .modal-footer .btn.btn-primary:hover:not(:disabled), .note-modal .modal-footer .btn.note-btn-primary:hover:not(:disabled) {
  background-color: var(--clr-primary-600) !important;
  border-color: var(--clr-primary-600) !important;
  transform: translateY(-0.1rem) !important;
  box-shadow: 0 0.4rem 0.8rem rgba(var(--clr-primary-500-rgb, 10, 151, 237), 0.3) !important;
}
.note-modal .modal-footer .btn.btn-primary:focus, .note-modal .modal-footer .btn.note-btn-primary:focus {
  box-shadow: 0 0 0 0.3rem rgba(var(--clr-primary-500-rgb, 10, 151, 237), 0.2) !important;
}
.note-modal .modal-footer .btn.btn-primary:active:not(:disabled), .note-modal .modal-footer .btn.note-btn-primary:active:not(:disabled) {
  transform: translateY(0) !important;
}
.note-modal .modal-footer .btn.btn-primary:disabled, .note-modal .modal-footer .btn.note-btn-primary:disabled {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
  transform: none !important;
}
.note-modal .modal-footer .btn.btn-secondary {
  color: var(--clr-text-primary) !important;
  background-color: var(--clr-bg-secondary) !important;
  border-color: var(--clr-border-primary) !important;
}
.note-modal .modal-footer .btn.btn-secondary:hover {
  background-color: var(--clr-gray-200) !important;
  border-color: var(--clr-gray-300) !important;
}
.note-modal .modal-footer .btn.btn-secondary:focus {
  box-shadow: 0 0 0 0.3rem rgba(var(--clr-gray-500-rgb, 107, 114, 128), 0.2) !important;
}

.modal-backdrop {
  background-color: rgba(0, 0, 0, 0.5) !important;
  z-index: 1050 !important;
  backdrop-filter: blur(0.4rem) !important;
}

.no-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: clamp(1.4rem, 0vw + 1.4rem, 1.4rem);
  background-color: var(--clr-bg-elevated);
}
.no-table__wrapper {
  position: relative;
  overflow-x: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border: 0.1rem solid var(--clr-border-secondary);
  border-radius: 0.8rem;
  max-height: calc(100vh - 30rem);
}
@media (max-width: 544px) {
  .no-table__wrapper {
    overflow-x: visible;
    overflow-y: visible;
    max-height: none;
  }
}
.no-admin-layout__main .no-table__wrapper {
  overflow-x: auto;
  overflow-y: visible;
  max-height: none;
}
.no-table__container {
  overflow-x: visible;
  overflow-y: visible;
}
.no-table__header {
  position: sticky;
  top: 0;
  z-index: 6;
  background-color: var(--clr-bg-secondary);
  border-bottom: 0.2rem solid var(--clr-border-primary);
}
.no-table__header > .no-table__row {
  background: transparent;
}
.no-table__row {
  border-bottom: 0.1rem solid var(--clr-border-secondary);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  background-color: var(--clr-bg-elevated);
  position: relative;
}
@media (max-width: 768px) {
  .no-table__row:hover {
    background-color: var(--clr-bg-secondary);
    transform: translateX(0.2rem);
    box-shadow: -0.2rem 0 0 var(--clr-primary-400);
  }
}
.no-table__row:last-child {
  border-bottom: none;
}
.no-table__row--selected {
  background-color: var(--clr-bg-secondary);
  box-shadow: inset 0.2rem 0 0 var(--clr-primary-600);
}
@media (max-width: 768px) {
  .no-table__row--selected:hover {
    background-color: var(--clr-info-100);
    transform: translateX(0.2rem);
  }
}
.no-table__row--grand-total {
  background-color: var(--clr-bg-secondary);
  border-top: 0.2rem solid var(--clr-border-primary);
  border-bottom: 0.2rem solid var(--clr-border-primary);
}
@media (max-width: 768px) {
  .no-table__row--grand-total:hover {
    background-color: var(--clr-bg-secondary);
    transform: none;
    box-shadow: none;
  }
}
.no-table__cell {
  padding: 1rem 1.2rem;
  text-align: left;
  color: var(--clr-text-secondary);
  white-space: nowrap;
  font-size: clamp(1.3rem, 0.0647249191vw + 1.2757281553rem, 1.4rem);
  line-height: 1.5;
  vertical-align: middle;
}
@media (max-width: 544px) {
  .no-table__cell {
    padding: 1.2rem 1.6rem;
    white-space: normal;
  }
}
@media (max-width: 768px) {
  .no-table__cell {
    padding: 1.4rem 2.4rem;
  }
}
.no-table__cell:first-child {
  width: 5rem;
  padding: 1.4rem 1.2rem;
  text-align: center;
}
@media (max-width: 544px) {
  .no-table__cell:first-child {
    width: 6rem;
    padding: 1.4rem 1.6rem;
  }
}
.no-table__image {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 0.4rem;
  border: 0.1rem solid var(--clr-border-secondary);
  background-color: var(--clr-bg-secondary);
  display: block;
  margin: 0 auto;
}
@media (max-width: 544px) {
  .no-table__image {
    width: 80px;
    height: 80px;
  }
}
.no-table__image--header {
  font-weight: 600;
  color: var(--clr-text-primary);
  font-size: clamp(1.3rem, 0vw + 1.3rem, 1.3rem);
  text-transform: none;
  letter-spacing: 0;
  padding: 1.6rem 1.6rem;
  background-color: var(--clr-bg-secondary);
  border-bottom: 0.1rem solid var(--clr-border-secondary);
  white-space: nowrap;
}
@media (max-width: 544px) {
  .no-table__image--header {
    padding: 1.6rem 2.4rem;
  }
}
.no-table__image--header:first-child {
  width: 5rem;
  padding: 1.6rem 1.2rem;
  text-align: center;
}
@media (max-width: 544px) {
  .no-table__image--header:first-child {
    width: 6rem;
    padding: 1.6rem 1.6rem;
  }
}
.no-table__image--link {
  color: var(--clr-primary-600);
  text-decoration: none;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  font-weight: 500;
  cursor: pointer;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
@media (max-width: 768px) {
  .no-table__image--link:hover {
    color: var(--clr-primary-700);
    text-decoration: underline !important;
    transform: translateX(0.2rem);
  }
}
.no-table__image--link:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.25);
  border-radius: 0.2rem;
}
.no-table__image--link:active {
  transform: translateX(0.1rem);
}
.no-table__image--empty {
  text-align: center;
  padding: 0;
  border-bottom: none;
}
.no-table__image--grand-total {
  background-color: var(--clr-bg-secondary);
  font-weight: 600;
  color: var(--clr-text-primary);
  border-top: 0.1rem solid var(--clr-border-primary);
}
.no-table__image--status-preparing {
  display: inline-block;
  padding: 0.4rem 1rem;
  background-color: var(--clr-warning-100);
  color: var(--clr-warning-800);
  border-radius: 0.4rem;
  font-size: clamp(1.2rem, 0vw + 1.2rem, 1.2rem);
  font-weight: 500;
  white-space: nowrap;
}
.no-table__image--status-received {
  display: inline-block;
  padding: 0.4rem 1rem;
  background-color: var(--clr-info-100);
  color: var(--clr-info-800);
  border-radius: 0.4rem;
  font-size: clamp(1.2rem, 0vw + 1.2rem, 1.2rem);
  font-weight: 500;
  white-space: nowrap;
}
.no-table__image--status-shipped {
  display: inline-block;
  padding: 0.4rem 1rem;
  background-color: var(--clr-success-200);
  color: var(--clr-success-800);
  border-radius: 0.4rem;
  font-size: clamp(1.2rem, 0vw + 1.2rem, 1.2rem);
  font-weight: 500;
  white-space: nowrap;
}
.no-table__checkbox {
  width: 1.8rem;
  height: 1.8rem;
  margin: 0;
  cursor: pointer;
  position: relative;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: 0.2rem solid var(--clr-border-primary);
  border-radius: 0.4rem;
  background-color: var(--clr-bg-elevated);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
@media (max-width: 768px) {
  .no-table__checkbox:hover:not(:checked) {
    border-color: var(--clr-primary-400);
    background-color: var(--clr-primary-50);
    transform: scale(1.1);
  }
}
.no-table__checkbox:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.25);
}
.no-table__checkbox:active {
  transform: scale(0.95);
}
.no-table__checkbox:checked {
  background-color: var(--clr-primary-600);
  border-color: var(--clr-primary-600);
  transform: scale(1.05);
}
.no-table__checkbox:checked::after {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--clr-base-white);
  font-size: clamp(1.2rem, 0vw + 1.2rem, 1.2rem);
  line-height: 1;
}
.no-table__checkbox:focus {
  outline: none;
  box-shadow: 0 0 0 0.3rem rgba(37, 99, 235, 0.2);
}
.no-table__checkbox:hover:not(:disabled) {
  border-color: var(--clr-primary-500);
}
.no-table__checkbox:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.no-table__checkbox-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.no-table__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6rem 2.4rem;
  gap: 1.6rem;
}
@media (max-width: 544px) {
  .no-table__empty {
    padding: 4rem 1.6rem;
  }
}
.no-table__empty-icon {
  font-size: clamp(4rem, 0.5177993528vw + 3.8058252427rem, 4.8rem);
  color: var(--clr-text-tertiary);
  margin-bottom: 0.8rem;
}
.no-table__empty-text {
  color: var(--clr-text-tertiary);
  font-size: clamp(1.4rem, 0.0647249191vw + 1.3757281553rem, 1.5rem);
  margin: 0;
  line-height: 1.6;
  font-weight: 500;
}
.no-table__card {
  background: var(--clr-bg-elevated);
  border: 0.1rem solid var(--clr-border-secondary);
  border-radius: 1.2rem;
  margin-bottom: 1.2rem;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}
@media (max-width: 768px) {
  .no-table__card:hover {
    box-shadow: 0 0.4rem 0.8rem rgba(0, 0, 0, 0.08);
    transform: translateY(-0.2rem);
  }
}
.no-table__card--selected {
  background: var(--clr-bg-secondary);
  border-color: var(--clr-primary-100);
  box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.1);
}
.no-table__card:last-child {
  margin-bottom: 0;
}
.no-table__card-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.no-table__card-header {
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
  padding: 1.6rem;
  padding-bottom: 1.2rem;
  border-bottom: 0.1rem solid var(--clr-border-secondary);
}
.no-table__card-selection {
  flex-shrink: 0;
  margin-top: 0.2rem;
}
.no-table__card-title-wrapper {
  flex: 1;
  min-width: 0;
}
.no-table__card-title {
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--clr-text-primary);
  margin: 0;
  line-height: 1.4;
  word-break: break-word;
}
.no-table__card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 1.2rem 1.6rem;
}
.no-table__card-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 1.1rem;
  background: var(--clr-bg-secondary);
  padding: 0.4rem 0.8rem;
  border-radius: 0.6rem;
  border: 0.1rem solid var(--clr-border-secondary);
  transition: all 0.2s ease;
}
.no-table__card-badge:hover {
  background: var(--clr-bg-tertiary);
  border-color: var(--clr-border-primary);
}
.no-table__card-badge-label {
  font-weight: 500;
  color: var(--clr-text-tertiary);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.no-table__card-badge-value {
  color: var(--clr-text-primary);
  font-weight: 600;
}
.no-table__card-actions {
  display: flex;
  gap: 0.8rem;
  align-items: center;
  padding: 1.2rem 1.6rem;
  padding-top: 1.2rem;
  border-top: 0.1rem solid var(--clr-border-secondary);
  flex-wrap: wrap;
}
.no-table__card-actions .no-btn {
  flex: 1;
  min-width: 8rem;
  justify-content: center;
}
.no-table__header--sticky {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--clr-bg-secondary);
  box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.1);
}
.no-table__card-container {
  display: none;
  padding: 1.2rem;
}

@media (max-width: 768px) {
  .no-table__wrapper tbody[data-card-view=true] .no-table__row {
    display: none !important;
  }
  .no-table__wrapper .no-table__card-container {
    display: block;
  }
  .no-table__wrapper .no-table__card {
    display: block;
  }
  .no-table__wrapper .no-table__card-container {
    display: none;
  }
  .no-table__wrapper .no-table__card {
    display: none;
  }
  .no-table__wrapper tbody[data-card-view=true] .no-table__row:not(.no-table__row--empty) {
    display: table-row !important;
  }
}
.no-order-table-scrollbar-top {
  display: block;
  width: 100%;
  height: 1.2rem;
  margin-bottom: 0.5rem;
  padding: 0.2rem 0;
  cursor: pointer;
  position: sticky;
  top: 0;
  z-index: 20;
  background-color: var(--clr-bg-elevated);
  border-radius: 0.4rem;
}
.no-order-table-scrollbar-top__track {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: var(--clr-bg-secondary);
  border-radius: 0.6rem;
  overflow: hidden;
}
.no-order-table-scrollbar-top__thumb {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: var(--clr-primary-400);
  border-radius: 0.6rem;
  transition: background-color 0.2s ease;
  cursor: grab;
}
.no-order-table-scrollbar-top__thumb:active {
  cursor: grabbing;
  background-color: var(--clr-primary-600);
}

/**
 * Pagination Component
 * 페이지네이션 컴포넌트 (ellipsis 처리 포함)
 */
.no-pagination-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.4rem;
  margin-top: 2.4rem;
  flex-wrap: wrap;
}
@media (max-width: 768px) {
  .no-pagination-wrapper {
    flex-direction: column;
    align-items: stretch;
    gap: 1.6rem;
    margin-top: 1.6rem;
  }
}

.no-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  flex: 1;
}
@media (max-width: 768px) {
  .no-pagination {
    gap: 0.4rem;
    width: 100%;
  }
}
.no-pagination__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.2rem;
  height: 3.2rem;
  padding: 0 0.8rem;
  border: 0.1rem solid var(--clr-border-primary);
  border-radius: 0.6rem;
  background: var(--clr-bg-elevated);
  color: var(--clr-text-secondary);
  font-size: clamp(1.3rem, 0.0647249191vw + 1.2757281553rem, 1.4rem);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}
@media (max-width: 544px) {
  .no-pagination__item {
    min-width: 3.6rem;
    height: 3.6rem;
    padding: 0 1.2rem;
  }
}
@media (max-width: 768px) {
  .no-pagination__item:hover:not(.no-pagination__item--disabled):not(.no-pagination__item--active):not(.no-pagination__item--ellipsis) {
    background: var(--clr-primary-50);
    border-color: var(--clr-primary-400);
    color: var(--clr-primary-600);
    transform: translateY(-0.15rem) scale(1.05);
    box-shadow: 0 0.3rem 0.6rem rgba(37, 99, 235, 0.15);
  }
}
.no-pagination__item:active:not(.no-pagination__item--disabled):not(.no-pagination__item--active):not(.no-pagination__item--ellipsis) {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.1);
}
.no-pagination__item:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.25);
}
.no-pagination__item--active {
  background: var(--clr-primary-500);
  border-color: var(--clr-primary-500);
  color: var(--clr-base-white);
  cursor: default;
  box-shadow: 0 0.2rem 0.4rem rgba(37, 99, 235, 0.25);
  transform: scale(1.05);
}
@media (max-width: 768px) {
  .no-pagination__item--active:hover {
    background: var(--clr-primary-600);
    transform: scale(1.08);
    box-shadow: 0 0.3rem 0.6rem rgba(37, 99, 235, 0.3);
  }
}
.no-pagination__item--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.no-pagination__item--ellipsis {
  border: none;
  background: transparent;
  cursor: default;
  padding: 0 0.4rem;
}
.no-pagination__item--ellipsis:hover {
  background: transparent;
}
.no-pagination__item i {
  font-size: clamp(1.2rem, 0vw + 1.2rem, 1.2rem);
}
.no-pagination__input-group {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0 0.8rem;
}
@media (max-width: 768px) {
  .no-pagination__input-group {
    margin: 0 0.4rem;
    gap: 0.4rem;
  }
}
.no-pagination__input-label {
  font-size: clamp(1.3rem, 0vw + 1.3rem, 1.3rem);
  color: var(--clr-text-secondary);
  white-space: nowrap;
}
@media (max-width: 768px) {
  .no-pagination__input-label {
    font-size: clamp(1.2rem, 0vw + 1.2rem, 1.2rem);
  }
}
.no-pagination__input {
  background: var(--clr-bg-elevated);
  width: 5rem;
  height: 3.2rem;
  padding: 0 0.6rem;
  border: 0.1rem solid var(--clr-border-primary);
  border-radius: 0.6rem;
  font-size: clamp(1.3rem, 0.0647249191vw + 1.2757281553rem, 1.4rem);
  text-align: center;
  transition: all 0.2s ease;
  min-width: 0;
}
@media (max-width: 544px) {
  .no-pagination__input {
    width: 6rem;
    height: 3.6rem;
    padding: 0 0.8rem;
  }
}
.no-pagination__input:focus {
  outline: none;
  border-color: var(--clr-primary-400);
  box-shadow: 0 0 0 0.3rem rgba(59, 130, 246, 0.1);
  background-color: var(--clr-bg-elevated);
}
.no-pagination__go-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 3.2rem;
  padding: 0 1rem;
  border: 0.1rem solid var(--clr-primary-500);
  border-radius: 0.6rem;
  background: var(--clr-primary-500);
  color: var(--clr-base-white);
  font-size: clamp(1.2rem, 0.0647249191vw + 1.1757281553rem, 1.3rem);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}
@media (max-width: 544px) {
  .no-pagination__go-btn {
    height: 3.6rem;
    padding: 0 1.2rem;
  }
}
.no-pagination__go-btn:hover {
  background: var(--clr-primary-600);
  border-color: var(--clr-primary-600);
  transform: translateY(-0.1rem);
  box-shadow: 0 0.2rem 0.4rem rgba(37, 99, 235, 0.2);
}
.no-pagination__go-btn:active {
  transform: translateY(0);
  background: var(--clr-primary-700);
}
.no-pagination__go-btn:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.3);
}
.no-pagination__per-page {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-shrink: 0;
  position: relative;
}
@media (max-width: 768px) {
  .no-pagination__per-page {
    width: 100%;
    justify-content: space-between;
  }
}
.no-pagination__per-page-label {
  font-size: clamp(1.3rem, 0vw + 1.3rem, 1.3rem);
  color: var(--clr-text-secondary);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  white-space: nowrap;
}
.no-pagination__per-page-label i {
  font-size: clamp(1.2rem, 0vw + 1.2rem, 1.2rem);
}
@media (max-width: 768px) {
  .no-pagination__per-page-label {
    font-size: clamp(1.2rem, 0vw + 1.2rem, 1.2rem);
  }
}
.no-pagination__per-page-select {
  padding: 0.7rem 2.8rem 0.7rem 1rem;
  border: 0.1rem solid var(--clr-border-primary);
  border-radius: 0.6rem;
  font-size: clamp(1.3rem, 0.0647249191vw + 1.2757281553rem, 1.4rem);
  background: var(--clr-bg-elevated);
  color: var(--clr-text-primary);
  cursor: pointer;
  transition: all 0.2s ease;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8rem center;
  background-size: 1.2rem;
  min-width: 7rem;
  touch-action: manipulation;
}
@media (max-width: 544px) {
  .no-pagination__per-page-select {
    padding: 0.8rem 3.2rem 0.8rem 1.2rem;
    min-width: 8rem;
  }
}
.no-pagination__per-page-select:focus {
  outline: none;
  border-color: var(--clr-primary-500);
  box-shadow: 0 0 0 0.3rem rgba(59, 130, 246, 0.1);
  background-color: var(--clr-bg-elevated);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%232563eb' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
}
@media (max-width: 768px) {
  .no-pagination__per-page-select:hover {
    border-color: var(--clr-border-primary);
  }
}
@media (max-width: 768px) {
  .no-pagination__per-page-select {
    flex: 1;
    max-width: 12rem;
  }
}

/**
 * Filter Bar Component
 * 필터, 검색, 정렬을 위한 상단 바
 */
.no-filter-bar {
  background: var(--clr-bg-elevated);
  border: 0.1rem solid var(--clr-border-secondary);
  border-radius: 0.8rem;
  padding: 2rem;
  margin-bottom: 0;
}
@media (max-width: 768px) {
  .no-filter-bar {
    padding: 1.6rem;
    margin-bottom: 0;
  }
}
.no-filter-bar:has(~ .no-filter-controls) {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.no-filter-bar__row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  align-items: flex-end;
}
.no-filter-bar__row > * {
  flex: 1 1 0%;
  min-width: fit-content;
}
@media (max-width: 768px) {
  .no-filter-bar__row {
    gap: 1.2rem;
    flex-direction: column;
  }
  .no-filter-bar__row > * {
    flex: 1 1 100%;
    min-width: 100%;
  }
}
.no-filter-bar__row:not(:last-child) {
  margin-bottom: 1.6rem;
  padding-bottom: 1.6rem;
  border-bottom: 0.1rem solid var(--clr-border-secondary);
}
@media (max-width: 768px) {
  .no-filter-bar__row:not(:last-child) {
    margin-bottom: 1.2rem;
    padding-bottom: 1.2rem;
  }
}
.no-filter-bar__row--search {
  align-items: flex-end;
}
.no-filter-bar__row--search .no-filter-bar__group--search {
  flex: 1 1 100%;
  min-width: 0;
  max-width: 100%;
}
@media (max-width: 768px) {
  .no-filter-bar__row--search .no-filter-bar__group--search {
    min-width: 100%;
  }
}
.no-filter-bar__row--search .no-filter-bar__actions {
  flex: 0 0 auto;
}
.no-filter-bar__row--filters .no-filter-bar__group:has(.no-filter-bar__date-range) {
  flex: 0 1 auto;
  min-width: 24rem;
  max-width: 32rem;
}
@media (max-width: 1200px) {
  .no-filter-bar__row--filters .no-filter-bar__group:has(.no-filter-bar__date-range) {
    min-width: 22rem;
    max-width: 30rem;
  }
}
@media (max-width: 1024px) {
  .no-filter-bar__row--filters .no-filter-bar__group:has(.no-filter-bar__date-range) {
    min-width: 20rem;
    max-width: 28rem;
  }
}
@media (max-width: 768px) {
  .no-filter-bar__row--filters .no-filter-bar__group:has(.no-filter-bar__date-range) {
    min-width: 100%;
    max-width: 100%;
  }
}
.no-filter-bar__row--filters .no-filter-bar__group:has(.no-filter-bar__label i.fa-info-circle) {
  max-width: 18rem;
  flex: 0 1 18rem;
}
@media (max-width: 768px) {
  .no-filter-bar__row--filters .no-filter-bar__group:has(.no-filter-bar__label i.fa-info-circle) {
    max-width: 100%;
    flex: 1 1 100%;
  }
}
.no-filter-bar__group {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  flex: 0 1 auto;
  min-width: 20rem;
  max-width: 30rem;
}
@media (max-width: 768px) {
  .no-filter-bar__group {
    min-width: 100%;
    max-width: 100%;
  }
}
.no-filter-bar__label {
  font-size: clamp(1.3rem, 0vw + 1.3rem, 1.3rem);
  font-weight: 600;
  color: var(--clr-text-secondary);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.no-filter-bar__label i {
  font-size: clamp(1.4rem, 0vw + 1.4rem, 1.4rem);
  color: var(--clr-text-tertiary);
}
.no-filter-bar__search {
  position: relative;
  flex: 1 1 100%;
  width: 100%;
  min-width: 100%;
}
.no-filter-bar__search:has(.no-filter-bar__search__search-input:focus) .no-filter-bar__search__search-icon {
  color: var(--clr-primary-500);
}
.no-filter-bar__search-input {
  width: 100%;
  padding: 0.9rem 1.4rem 0.9rem 3.6rem;
  border: 0.1rem solid var(--clr-border-primary);
  border-radius: 0.6rem;
  font-size: clamp(1.4rem, 0vw + 1.4rem, 1.4rem);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  background: var(--clr-bg-elevated);
  min-width: 0;
}
@media (max-width: 544px) {
  .no-filter-bar__search-input {
    padding: 1rem 1.6rem 1rem 4rem;
  }
}
@media (max-width: 768px) {
  .no-filter-bar__search-input:hover:not(:focus) {
    border-color: var(--clr-primary-400);
    box-shadow: 0 0.2rem 0.4rem rgba(37, 99, 235, 0.08);
  }
}
.no-filter-bar__search-input:focus {
  outline: none;
  border-color: var(--clr-primary-500);
  box-shadow: 0 0 0 0.3rem rgba(59, 130, 246, 0.15), 0 0.2rem 0.6rem rgba(59, 130, 246, 0.1);
  background-color: var(--clr-bg-elevated);
  transform: translateY(-0.1rem);
}
.no-filter-bar__search-input::placeholder {
  color: var(--clr-text-tertiary);
  transition: opacity 0.2s ease;
}
.no-filter-bar__search-input:focus::placeholder {
  opacity: 0.6;
}
.no-filter-bar__search-icon {
  position: absolute;
  left: 1.2rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--clr-gray-400);
  font-size: clamp(1.6rem, 0vw + 1.6rem, 1.6rem);
  pointer-events: none;
  z-index: 1;
  transition: color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.no-filter-bar__select {
  width: 100%;
  padding: 0.9rem 3.2rem 0.9rem 1.4rem;
  border: 0.1rem solid var(--clr-border-primary);
  border-radius: 0.6rem;
  font-size: clamp(1.4rem, 0vw + 1.4rem, 1.4rem);
  background: var(--clr-bg-elevated);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1.2rem;
  min-width: 0;
}
@media (max-width: 544px) {
  .no-filter-bar__select {
    padding: 1rem 3.6rem 1rem 1.6rem;
    background-position: right 1.2rem center;
  }
}
@media (max-width: 768px) {
  .no-filter-bar__select:hover:not(:focus) {
    border-color: var(--clr-primary-400);
    box-shadow: 0 0.2rem 0.4rem rgba(37, 99, 235, 0.08);
    transform: translateY(-0.05rem);
  }
}
.no-filter-bar__select:focus {
  outline: none;
  border-color: var(--clr-primary-500);
  box-shadow: 0 0 0 0.3rem rgba(59, 130, 246, 0.15), 0 0.2rem 0.6rem rgba(59, 130, 246, 0.1);
  background-color: var(--clr-bg-elevated);
  transform: translateY(-0.1rem);
}
.no-filter-bar__select:active {
  transform: translateY(0);
}
.no-filter-bar__actions {
  display: flex;
  gap: 0.8rem;
  align-items: flex-end;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .no-filter-bar__actions {
    width: 100%;
    justify-content: stretch;
  }
  .no-filter-bar__actions .no-btn {
    flex: 1;
  }
}
.no-filter-bar__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  align-items: center;
}
@media (max-width: 768px) {
  .no-filter-bar__filters {
    gap: 0.8rem;
  }
}
.no-filter-bar__filter-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.8rem 1.2rem;
  background: var(--clr-bg-secondary);
  border: 0.1rem solid var(--clr-border-secondary);
  border-radius: 0.6rem;
  font-size: clamp(1.3rem, 0vw + 1.3rem, 1.3rem);
  color: var(--clr-text-secondary);
}
@media (max-width: 768px) {
  .no-filter-bar__filter-item {
    padding: 0.6rem 1rem;
    font-size: clamp(1.2rem, 0vw + 1.2rem, 1.2rem);
  }
}
.no-filter-bar__filter-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--clr-text-tertiary);
  cursor: pointer;
  border-radius: 0.4rem;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: clamp(1.2rem, 0vw + 1.2rem, 1.2rem);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .no-filter-bar__filter-remove:hover {
    background: var(--clr-danger-50);
    color: var(--clr-danger-600);
    transform: scale(1.15) rotate(90deg);
  }
}
.no-filter-bar__filter-remove:active {
  transform: scale(0.9) rotate(90deg);
  background: var(--clr-danger-100);
  color: var(--clr-danger-700);
}
.no-filter-bar__filter-remove:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(239, 68, 68, 0.25);
  background: var(--clr-danger-50);
  color: var(--clr-danger-600);
}
.no-filter-bar__date-range {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  min-width: 0;
}
@media (max-width: 768px) {
  .no-filter-bar__date-range {
    flex-direction: column;
    gap: 0.6rem;
    align-items: stretch;
    min-width: 100%;
  }
}
.no-filter-bar__date-input {
  flex: 1 1 0%;
  padding: 0.9rem 1.4rem;
  border: 0.1rem solid var(--clr-border-primary);
  border-radius: 0.6rem;
  font-size: clamp(1.4rem, 0vw + 1.4rem, 1.4rem);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  background: var(--clr-bg-elevated);
  min-width: 0;
  width: 100%;
  font-family: inherit;
}
@media (max-width: 544px) {
  .no-filter-bar__date-input {
    padding: 1rem 1.6rem;
  }
}
.no-filter-bar__date-input::placeholder {
  color: var(--clr-text-tertiary);
}
@media (max-width: 768px) {
  .no-filter-bar__date-input:hover:not(:focus) {
    border-color: var(--clr-primary-400);
    box-shadow: 0 0.2rem 0.4rem rgba(37, 99, 235, 0.08);
  }
}
.no-filter-bar__date-input:focus {
  outline: none;
  border-color: var(--clr-primary-500);
  box-shadow: 0 0 0 0.3rem rgba(59, 130, 246, 0.15), 0 0.2rem 0.6rem rgba(59, 130, 246, 0.1);
  background-color: var(--clr-bg-elevated);
}
.no-filter-bar__date-separator {
  color: var(--clr-text-tertiary);
  font-size: clamp(1.4rem, 0vw + 1.4rem, 1.4rem);
  font-weight: 500;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .no-filter-bar__date-separator {
    display: none;
  }
}
.no-filter-bar__country-select {
  position: relative;
  width: 100%;
}
.no-filter-bar__country-input {
  width: 100%;
  padding: 0.9rem 1.4rem;
  border: 0.1rem solid var(--clr-border-primary);
  border-radius: 0.6rem;
  font-size: clamp(1.4rem, 0vw + 1.4rem, 1.4rem);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  background: var(--clr-bg-elevated);
  min-width: 0;
  font-family: inherit;
}
@media (max-width: 544px) {
  .no-filter-bar__country-input {
    padding: 1rem 1.6rem;
  }
}
.no-filter-bar__country-input::placeholder {
  color: var(--clr-text-tertiary);
}
@media (max-width: 768px) {
  .no-filter-bar__country-input:hover:not(:focus) {
    border-color: var(--clr-primary-400);
    box-shadow: 0 0.2rem 0.4rem rgba(37, 99, 235, 0.08);
  }
}
.no-filter-bar__country-input:focus {
  outline: none;
  border-color: var(--clr-primary-500);
  box-shadow: 0 0 0 0.3rem rgba(59, 130, 246, 0.15), 0 0.2rem 0.6rem rgba(59, 130, 246, 0.1);
  background-color: var(--clr-bg-elevated);
}

.no-filter-controls {
  display: flex;
  gap: 0.8rem;
  align-items: center;
  margin-top: -0.1rem;
  padding: 1.2rem;
  background: var(--clr-bg-elevated);
  border: 0.1rem solid var(--clr-border-secondary);
  border-top: none;
  border-radius: 0 0 0.8rem 0.8rem;
  margin-bottom: 2.4rem;
}
@media (max-width: 768px) {
  .no-filter-controls {
    margin-top: -0.1rem;
    padding: 1rem;
    gap: 0.6rem;
    margin-bottom: 1.6rem;
    flex-wrap: wrap;
  }
  .no-filter-controls .no-btn {
    flex: 1;
    min-width: 0;
  }
}
@media (max-width: 544px) {
  .no-filter-controls {
    gap: 0.8rem;
  }
}
@media (max-width: 768px) {
  .no-filter-controls {
    gap: 1rem;
  }
}

.no-alert-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  z-index: 10000;
  width: 90%;
  max-width: 64rem;
  max-height: 90vh;
}
.no-alert-modal:has(.loupe-info-modal__table--distance) {
  max-width: min(90rem, 96vw);
  width: 92%;
}
.no-alert-modal {
  background: var(--clr-bg-elevated);
  border-radius: 1.6rem;
  box-shadow: 0 2rem 2.5rem rgba(0, 0, 0, 0.15), 0 0.8rem 1rem rgba(0, 0, 0, 0.1);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  border: 0.1rem solid var(--clr-border-primary);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
}
.no-alert-modal__overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  backdrop-filter: blur(0.4rem);
}
.no-alert-modal__overlay--active {
  opacity: 1;
  visibility: visible;
}
.no-alert-modal__content {
  display: flex;
  flex-direction: column;
  padding: 2.4rem;
  gap: 2rem;
  max-height: 90vh;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
.no-alert-modal__content::-webkit-scrollbar {
  width: 0.8rem;
}
.no-alert-modal__content::-webkit-scrollbar-track {
  background: var(--clr-bg-secondary);
  border-radius: 0.4rem;
}
.no-alert-modal__content::-webkit-scrollbar-thumb {
  background: var(--clr-border-primary);
  border-radius: 0.4rem;
}
.no-alert-modal__content::-webkit-scrollbar-thumb:hover {
  background: var(--clr-border-secondary);
}
@media (max-width: 544px) {
  .no-alert-modal__content {
    padding: 3.2rem;
  }
}
.no-alert-modal__header {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}
.no-alert-modal__icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.8rem;
  height: 4.8rem;
  border-radius: 50%;
  flex-shrink: 0;
}
.no-alert-modal__icon {
  font-size: 2.4rem;
}
.no-alert-modal__title {
  font-size: clamp(1.8rem, 0.1294498382vw + 1.7514563107rem, 2rem);
  font-weight: 600;
  color: var(--clr-text-primary);
  margin: 0;
  line-height: 1.2;
  flex: 1;
}
.no-alert-modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  border: none;
  background: transparent;
  color: var(--clr-text-secondary);
  cursor: pointer;
  border-radius: 0.8rem;
  transition: all 0.2s ease;
  flex-shrink: 0;
  margin-left: auto;
}
.no-alert-modal__close:hover {
  background: var(--clr-gray-100);
  color: var(--clr-text-primary);
}
.no-alert-modal__close:active {
  transform: scale(0.95);
}
.no-alert-modal__close i {
  font-size: 1.6rem;
}
.no-alert-modal__body {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.no-alert-modal__message {
  font-size: clamp(1.4rem, 0.1294498382vw + 1.3514563107rem, 1.6rem);
  color: var(--clr-text-secondary);
  line-height: 1.6;
  margin: 0;
}
.no-alert-modal__order-confirm {
  text-align: left;
  line-height: 1.8;
}
.no-alert-modal__order-confirm-title {
  margin-bottom: 1.2rem;
  font-weight: 600;
  font-size: clamp(1.5rem, 0.0647249191vw + 1.4757281553rem, 1.6rem);
  color: var(--clr-text-primary);
}
@media (max-width: 768px) {
  .no-alert-modal__order-confirm-title {
    margin-bottom: 1rem;
    font-size: clamp(1.4rem, 0.0647249191vw + 1.3757281553rem, 1.5rem);
  }
}
.no-alert-modal__order-confirm-list {
  margin: 0;
  padding-left: 2rem;
  margin-bottom: 1.6rem;
}
@media (max-width: 768px) {
  .no-alert-modal__order-confirm-list {
    padding-left: 1.6rem;
    margin-bottom: 1.2rem;
  }
}
.no-alert-modal__order-confirm-item {
  margin-bottom: 0.8rem;
  font-size: clamp(1.4rem, 0.0647249191vw + 1.3757281553rem, 1.5rem);
  color: var(--clr-text-secondary);
  line-height: 1.6;
}
@media (max-width: 768px) {
  .no-alert-modal__order-confirm-item {
    margin-bottom: 0.6rem;
    font-size: clamp(1.3rem, 0.0647249191vw + 1.2757281553rem, 1.4rem);
    line-height: 1.5;
  }
}
.no-alert-modal__order-confirm-item:last-child {
  margin-bottom: 0;
}
.no-alert-modal__order-confirm-question {
  margin-top: 1.6rem;
  margin-bottom: 0;
  font-size: clamp(1.5rem, 0.0647249191vw + 1.4757281553rem, 1.6rem);
  color: var(--clr-text-primary);
  font-weight: 500;
}
@media (max-width: 768px) {
  .no-alert-modal__order-confirm-question {
    margin-top: 1.2rem;
    font-size: clamp(1.4rem, 0.0647249191vw + 1.3757281553rem, 1.5rem);
  }
}
.no-alert-modal__errors {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 1.2rem;
  background: var(--clr-bg-secondary);
  border-radius: 0.8rem;
  border: 0.1rem solid var(--clr-border-secondary);
}
.no-alert-modal__errors li {
  font-size: clamp(1.3rem, 0.1294498382vw + 1.2514563107rem, 1.5rem);
  color: var(--clr-text-secondary);
  line-height: 1.5;
  padding-left: 1.6rem;
  position: relative;
}
.no-alert-modal__errors li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--clr-danger-500);
  font-weight: bold;
}
.no-alert-modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.2rem;
  padding-top: 0.8rem;
  border-top: 0.1rem solid var(--clr-border-primary);
}
.no-alert-modal__countdown {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.6rem;
  background: linear-gradient(135deg, var(--clr-primary-50), var(--clr-bg-secondary));
  border-radius: 1rem;
  border: 0.1rem solid var(--clr-primary-200);
  align-items: flex-end;
  position: relative;
  overflow: hidden;
}
.no-alert-modal__countdown::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent);
  pointer-events: none;
}
.no-alert-modal__countdown-text {
  font-size: clamp(1.3rem, 0.0647249191vw + 1.2757281553rem, 1.4rem);
  color: var(--clr-text-primary);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  position: relative;
  z-index: 1;
}
.no-alert-modal__countdown-seconds {
  font-weight: 700;
  color: var(--clr-primary-600);
  font-size: clamp(1.8rem, 0.2588996764vw + 1.7029126214rem, 2.2rem);
  min-width: 2.4rem;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--clr-base-white);
  border-radius: 0.6rem;
  padding: 0.4rem 0.8rem;
  box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.no-alert-modal__countdown-seconds--pulse {
  animation: countdownPulse 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.no-alert-modal__countdown-progress {
  width: 100%;
  height: 0.5rem;
  background: var(--clr-bg-tertiary);
  border-radius: 0.25rem;
  overflow: hidden;
  position: relative;
  z-index: 1;
  box-shadow: inset 0 0.1rem 0.2rem rgba(0, 0, 0, 0.1);
}
.no-alert-modal__countdown-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--clr-primary-500), var(--clr-primary-600), var(--clr-primary-500));
  background-size: 200% 100%;
  border-radius: 0.25rem;
  transition: width 1s linear;
  width: 100%;
  position: relative;
  animation: progressShimmer 2s linear infinite;
}
.no-alert-modal__countdown-progress-bar::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: progressGlow 1s ease-in-out infinite;
}
.no-alert-modal__confirm {
  min-width: 10rem;
  align-self: flex-end;
}
.no-alert-modal__cancel {
  min-width: 10rem;
  align-self: flex-end;
}
.no-alert-modal--success .no-alert-modal__icon-wrapper {
  background: var(--clr-success-50);
  color: var(--clr-success-600);
}
.no-alert-modal--success .no-alert-modal__title {
  color: var(--clr-success-700);
}
.no-alert-modal--error .no-alert-modal__icon-wrapper {
  background: var(--clr-danger-50);
  color: var(--clr-danger-600);
}
.no-alert-modal--error .no-alert-modal__title {
  color: var(--clr-danger-700);
}
.no-alert-modal--warning .no-alert-modal__icon-wrapper {
  background: var(--clr-warning-50);
  color: var(--clr-warning-600);
}
.no-alert-modal--warning .no-alert-modal__title {
  color: var(--clr-warning-700);
}
.no-alert-modal--info .no-alert-modal__icon-wrapper {
  background: var(--clr-info-50);
  color: var(--clr-info-600);
}
.no-alert-modal--info .no-alert-modal__title {
  color: var(--clr-info-700);
}
.no-alert-modal--scale-shake {
  animation: scaleShake 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes scaleShake {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }
  25% {
    transform: translate(-50%, -50%) scale(1.05);
  }
  50% {
    transform: translate(-50%, -50%) scale(0.98);
  }
  75% {
    transform: translate(-50%, -50%) scale(1.02);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}
@keyframes countdownPulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.15);
    opacity: 0.9;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes progressShimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
@keyframes progressGlow {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
.no-confirm-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  z-index: 10000;
  width: 90%;
  max-width: 44rem;
  max-height: 90vh;
  background: var(--clr-bg-elevated);
  border-radius: 1.6rem;
  box-shadow: 0 2rem 2.5rem rgba(0, 0, 0, 0.15), 0 0.8rem 1rem rgba(0, 0, 0, 0.1);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  border: 0.1rem solid var(--clr-border-primary);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
}
.no-confirm-modal__overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  backdrop-filter: blur(0.4rem);
}
.no-confirm-modal__overlay--active {
  opacity: 1;
  visibility: visible;
}
.no-confirm-modal__content {
  display: flex;
  flex-direction: column;
  padding: 2.4rem;
  gap: 2rem;
  max-height: 90vh;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
.no-confirm-modal__content::-webkit-scrollbar {
  width: 0.8rem;
}
.no-confirm-modal__content::-webkit-scrollbar-track {
  background: var(--clr-bg-secondary);
  border-radius: 0.4rem;
}
.no-confirm-modal__content::-webkit-scrollbar-thumb {
  background: var(--clr-border-primary);
  border-radius: 0.4rem;
}
.no-confirm-modal__content::-webkit-scrollbar-thumb:hover {
  background: var(--clr-border-secondary);
}
@media (max-width: 544px) {
  .no-confirm-modal__content {
    padding: 3.2rem;
  }
}
.no-confirm-modal__header {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}
.no-confirm-modal__icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.8rem;
  height: 4.8rem;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--clr-info-50);
  color: var(--clr-info-600);
}
.no-confirm-modal__icon {
  font-size: 2.4rem;
}
.no-confirm-modal__title {
  font-size: clamp(1.8rem, 0.1294498382vw + 1.7514563107rem, 2rem);
  font-weight: 600;
  color: var(--clr-text-primary);
  margin: 0;
  line-height: 1.2;
}
.no-confirm-modal__body {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.no-confirm-modal__message {
  font-size: clamp(1.4rem, 0.1294498382vw + 1.3514563107rem, 1.6rem);
  color: var(--clr-text-secondary);
  line-height: 1.6;
  margin: 0;
}
.no-confirm-modal__footer {
  display: flex;
  flex-direction: row;
  gap: 0.8rem;
  padding-top: 0.8rem;
  border-top: 0.1rem solid var(--clr-border-primary);
  justify-content: flex-end;
}
@media (max-width: 544px) {
  .no-confirm-modal__footer {
    gap: 1.2rem;
  }
}
.no-confirm-modal__cancel {
  min-width: 10rem;
}
.no-confirm-modal__confirm {
  min-width: 10rem;
}
.no-confirm-modal--danger .no-confirm-modal__icon-wrapper {
  background: var(--clr-danger-50);
  color: var(--clr-danger-600);
}
.no-confirm-modal--danger .no-confirm-modal__title {
  color: var(--clr-danger-700);
}
.no-confirm-modal--warning .no-confirm-modal__icon-wrapper {
  background: var(--clr-warning-50);
  color: var(--clr-warning-600);
}
.no-confirm-modal--warning .no-confirm-modal__title {
  color: var(--clr-warning-700);
}
.no-confirm-modal--info .no-confirm-modal__icon-wrapper {
  background: var(--clr-info-50);
  color: var(--clr-info-600);
}
.no-confirm-modal--info .no-confirm-modal__title {
  color: var(--clr-info-700);
}
.no-confirm-modal--success .no-confirm-modal__icon-wrapper {
  background: var(--clr-success-50);
  color: var(--clr-success-600);
}
.no-confirm-modal--success .no-confirm-modal__title {
  color: var(--clr-success-700);
}

.no-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(0.4rem);
  -webkit-backdrop-filter: blur(0.4rem);
}
.no-modal-overlay--active {
  opacity: 1;
  visibility: visible;
}

.no-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  z-index: 10000;
  width: 90%;
  max-width: 60rem;
  max-height: 90vh;
  background: var(--clr-bg-elevated);
  border-radius: 1.6rem;
  box-shadow: 0 2rem 2.5rem rgba(0, 0, 0, 0.15), 0 0.8rem 1rem rgba(0, 0, 0, 0.1);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  border: 0.1rem solid var(--clr-border-primary);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.no-modal--active {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
}
.no-modal.loupe-info-modal {
  max-width: 90rem;
  width: 90%;
}
@media (max-width: 768px) {
  .no-modal.loupe-info-modal {
    max-width: 95%;
    width: 95%;
  }
}
.no-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  padding: 2rem 2.4rem;
  border-bottom: 0.1rem solid var(--clr-border-primary);
  flex-shrink: 0;
}
@media (max-width: 544px) {
  .no-modal__header {
    padding: 2.4rem 3.2rem;
  }
}
.no-modal__title {
  font-size: clamp(1.8rem, 0.1294498382vw + 1.7514563107rem, 2rem);
  font-weight: 600;
  color: var(--clr-text-primary);
  margin: 0;
  line-height: 1.2;
  flex: 1;
}
.no-modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  border: none;
  background: transparent;
  color: var(--clr-text-secondary);
  cursor: pointer;
  border-radius: 0.8rem;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.no-modal__close:hover {
  background: var(--clr-gray-100);
  color: var(--clr-text-primary);
}
.no-modal__close:active {
  transform: scale(0.95);
}
.no-modal__close i {
  font-size: 1.6rem;
}
.no-modal__body {
  display: flex;
  flex-direction: column;
  padding: 2.4rem;
  gap: 1.6rem;
  max-height: calc(90vh - 14rem);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
.no-modal__body::-webkit-scrollbar {
  width: 0.8rem;
}
.no-modal__body::-webkit-scrollbar-track {
  background: var(--clr-bg-secondary);
  border-radius: 0.4rem;
}
.no-modal__body::-webkit-scrollbar-thumb {
  background: var(--clr-border-primary);
  border-radius: 0.4rem;
}
.no-modal__body::-webkit-scrollbar-thumb:hover {
  background: var(--clr-border-secondary);
}
@media (max-width: 544px) {
  .no-modal__body {
    padding: 3.2rem;
  }
}
.no-modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.2rem;
  padding: 1.6rem 2.4rem;
  border-top: 0.1rem solid var(--clr-border-primary);
  flex-shrink: 0;
}
@media (max-width: 544px) {
  .no-modal__footer {
    padding: 2rem 3.2rem;
  }
}

.no-index-table-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 100%;
  overflow-y: auto;
  transform: translate(-50%, -50%) scale(0.9);
  z-index: 10001;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  display: flex;
  flex-direction: column;
  -webkit-overflow-scrolling: touch;
}
.no-index-table-modal--active {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
}
.no-index-table-modal__overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  backdrop-filter: blur(0.4rem);
}
.no-index-table-modal__overlay--active {
  opacity: 1;
  visibility: visible;
}
.no-index-table-modal__container {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 100vh;
  width: 100%;
  max-width: 120rem;
  margin: 0 auto;
  padding: 0 clamp(1.2rem, 0.7766990291vw + 0.9087378641rem, 2.4rem);
}
.no-index-table-modal__inner {
  padding: 2.4rem 0;
}
.no-index-table-modal__content {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--clr-bg-elevated);
  border-radius: 1.6rem;
  box-shadow: 0 2rem 2.5rem rgba(0, 0, 0, 0.15), 0 0.8rem 1rem rgba(0, 0, 0, 0.1);
  border: 0.1rem solid var(--clr-border-primary);
}
.no-index-table-modal__content::-webkit-scrollbar {
  width: 0.8rem;
}
.no-index-table-modal__content::-webkit-scrollbar-track {
  background: var(--clr-bg-secondary);
  border-radius: 0.4rem;
}
.no-index-table-modal__content::-webkit-scrollbar-thumb {
  background: var(--clr-border-primary);
  border-radius: 0.4rem;
}
.no-index-table-modal__content::-webkit-scrollbar-thumb:hover {
  background: var(--clr-border-secondary);
}
.no-index-table-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2.4rem;
  border-bottom: 0.1rem solid var(--clr-border-primary);
  flex-shrink: 0;
}
@media (max-width: 544px) {
  .no-index-table-modal__header {
    padding: 3.2rem;
  }
}
.no-index-table-modal__title {
  font-size: clamp(1.8rem, 0.2588996764vw + 1.7029126214rem, 2.2rem);
  font-weight: 600;
  color: var(--clr-text-primary);
  margin: 0;
  line-height: 1.2;
}
.no-index-table-modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.6rem;
  height: 3.6rem;
  border: none;
  background: transparent;
  color: var(--clr-text-secondary);
  cursor: pointer;
  border-radius: 0.8rem;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .no-index-table-modal__close:hover {
    background: var(--clr-bg-secondary);
    color: var(--clr-text-primary);
  }
}
.no-index-table-modal__close:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.25);
}
.no-index-table-modal__close:active {
  transform: scale(0.95);
}
.no-index-table-modal__close i {
  font-size: 1.8rem;
}
.no-index-table-modal__body {
  flex: 1;
  overflow: visible;
  padding: 2.4rem;
  display: flex;
  flex-direction: column;
  min-height: 0;
  gap: 1.6rem;
}
@media (max-width: 544px) {
  .no-index-table-modal__body {
    padding: 3.2rem;
  }
}
.no-index-table-modal__filter-container {
  flex-shrink: 0;
  margin-bottom: 1.6rem;
  overflow: visible;
  position: relative;
  z-index: 10002;
}
.no-index-table-modal__loading, .no-index-table-modal__empty, .no-index-table-modal__error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6rem 2rem;
  gap: 1.6rem;
  color: var(--clr-text-secondary);
  text-align: center;
}
.no-index-table-modal__loading i, .no-index-table-modal__empty i, .no-index-table-modal__error i {
  font-size: 3.2rem;
  color: var(--clr-text-tertiary);
}
.no-index-table-modal__loading p, .no-index-table-modal__empty p, .no-index-table-modal__error p {
  font-size: clamp(1.4rem, 0.1294498382vw + 1.3514563107rem, 1.6rem);
  margin: 0;
}
.no-index-table-modal__footer {
  display: flex;
  flex-direction: row;
  gap: 0.8rem;
  padding: 2.4rem;
  border-top: 0.1rem solid var(--clr-border-primary);
  justify-content: flex-end;
  flex-shrink: 0;
}
@media (max-width: 544px) {
  .no-index-table-modal__footer {
    padding: 3.2rem;
    gap: 1.2rem;
  }
}
.no-index-table-modal__cancel {
  min-width: 10rem;
}
.no-index-table-modal__confirm {
  min-width: 12rem;
}
.no-index-table-modal__confirm:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.no-index-table-modal .no-filter-bar {
  margin-bottom: 0;
  border-radius: 0.8rem;
  padding: 1.6rem;
  background: var(--clr-bg-secondary);
  border: 0.1rem solid var(--clr-border-secondary);
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  overflow: visible;
  position: relative;
  z-index: 1;
}
@media (max-width: 768px) {
  .no-index-table-modal .no-filter-bar {
    padding: 1.2rem;
    gap: 1.2rem;
  }
}
.no-index-table-modal .no-filter-bar__search-row {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  width: 100%;
  position: relative;
  z-index: 10002;
}
.no-index-table-modal .no-filter-bar__filters-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  align-items: flex-end;
}
.no-index-table-modal .no-filter-bar__filters-row > * {
  flex: 0 1 auto;
  min-width: fit-content;
}
@media (max-width: 768px) {
  .no-index-table-modal .no-filter-bar__filters-row {
    flex-direction: column;
    align-items: stretch;
    gap: 1.2rem;
    width: 100%;
  }
  .no-index-table-modal .no-filter-bar__filters-row > * {
    flex: 1 1 100%;
    min-width: 100%;
  }
}
.no-index-table-modal .no-filter-bar > [id*=-filter-list-container],
.no-index-table-modal .no-filter-bar > [id*=-sort-container] {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  align-items: flex-end;
  flex: 0 1 auto;
  min-width: fit-content;
}
@media (max-width: 768px) {
  .no-index-table-modal .no-filter-bar > [id*=-filter-list-container],
  .no-index-table-modal .no-filter-bar > [id*=-sort-container] {
    flex: 1 1 100%;
    min-width: 100%;
  }
}
.no-index-table-modal .no-filter-bar__search-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex: 1 1 100%;
  width: 100%;
  min-width: 100%;
  position: relative;
  z-index: 10002;
}
.no-index-table-modal .no-filter-bar__group {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  flex: 0 1 auto;
  min-width: 20rem;
  max-width: 30rem;
}
@media (max-width: 768px) {
  .no-index-table-modal .no-filter-bar__group {
    min-width: 100%;
    max-width: 100%;
  }
}
.no-index-table-modal .no-filter-bar__group[id*=-search-container] {
  flex: 1 1 100% !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
}
.no-index-table-modal .no-filter-bar__filters-row .no-index-table-modal .no-filter-bar__group {
  flex: 0 1 auto;
  min-width: 18rem;
  max-width: 30rem;
}
@media (max-width: 768px) {
  .no-index-table-modal .no-filter-bar__filters-row .no-index-table-modal .no-filter-bar__group {
    min-width: 100%;
    max-width: 100%;
    width: 100%;
    flex: 1 1 100%;
  }
}
.no-index-table-modal .no-filter-bar__search-label {
  font-size: clamp(1.3rem, 0vw + 1.3rem, 1.3rem);
  font-weight: 600;
  color: var(--clr-text-secondary);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.no-index-table-modal .no-filter-bar__search {
  display: flex;
  gap: 0.8rem;
  flex: 1;
  min-width: 0;
}
.no-index-table-modal .no-filter-bar__search input {
  flex: 1;
  min-width: 0;
}
.no-index-table-modal .no-filter-bar__search button {
  flex-shrink: 0;
}
.no-index-table-modal .no-filter-bar__sort-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-width: 18rem;
  max-width: 30rem;
  flex: 1 1 auto;
  position: relative;
  z-index: 10002;
}
@media (max-width: 768px) {
  .no-index-table-modal .no-filter-bar__sort-wrapper {
    min-width: 100%;
    max-width: 100%;
    width: 100%;
    flex: 1 1 100%;
  }
}
.no-index-table-modal .no-filter-bar__sort-label {
  font-size: clamp(1.3rem, 0vw + 1.3rem, 1.3rem);
  font-weight: 600;
  color: var(--clr-text-secondary);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.no-index-table-modal .no-filter-bar__sort {
  width: 100%;
  position: relative;
}
.no-index-table-modal .no-filter-bar__select-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  align-items: flex-end;
  flex: 0 0 auto;
  width: 100%;
}
@media (max-width: 768px) {
  .no-index-table-modal .no-filter-bar__select-filters {
    flex-direction: column;
    align-items: stretch;
    gap: 1.2rem;
    width: 100%;
  }
}
.no-index-table-modal .no-filter-bar__select-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-width: 18rem;
  max-width: 30rem;
  flex: 1 1 auto;
  position: relative;
  z-index: 10002;
}
@media (max-width: 768px) {
  .no-index-table-modal .no-filter-bar__select-wrapper {
    min-width: 100%;
    max-width: 100%;
    width: 100%;
    flex: 1 1 100%;
  }
}
.no-index-table-modal .no-filter-bar__select-label {
  font-size: clamp(1.3rem, 0vw + 1.3rem, 1.3rem);
  font-weight: 600;
  color: var(--clr-text-secondary);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.no-index-table-modal .no-filter-bar__per-page {
  display: none;
}
.no-index-table-modal__view-toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1.2rem;
  padding: 0.6rem;
  background-color: var(--clr-bg-secondary);
  border: 0.1rem solid var(--clr-border-secondary);
  border-radius: 0.8rem;
  width: fit-content;
}
@media (max-width: 768px) {
  .no-index-table-modal__view-toggle {
    display: none !important;
  }
}
.no-index-table-modal__view-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.8rem 1.6rem;
  background-color: transparent;
  border: 0.1rem solid transparent;
  border-radius: 0.6rem;
  color: var(--clr-text-secondary);
  font-size: 1.3rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.no-index-table-modal__view-btn i {
  font-size: 1.4rem;
  transition: all 0.2s ease;
}
.no-index-table-modal__view-btn span {
  transition: color 0.2s ease;
}
@media (max-width: 768px) {
  .no-index-table-modal__view-btn:hover:not(.no-index-table-modal__view-btn--active) {
    background-color: var(--clr-bg-tertiary);
    color: var(--clr-text-primary);
    border-color: var(--clr-border-primary);
  }
  .no-index-table-modal__view-btn:hover:not(.no-index-table-modal__view-btn--active) i {
    color: var(--clr-primary-500);
  }
}
.no-index-table-modal__view-btn:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.2);
}
.no-index-table-modal__view-btn:active {
  transform: scale(0.98);
}
.no-index-table-modal__view-btn--active {
  background-color: var(--clr-primary-50);
  border-color: var(--clr-primary-500);
  color: var(--clr-primary-700);
  font-weight: 600;
}
.no-index-table-modal__view-btn--active i {
  color: var(--clr-primary-600);
}
@media (max-width: 768px) {
  .no-index-table-modal__view-btn--active:hover {
    background-color: var(--clr-primary-100);
    border-color: var(--clr-primary-600);
  }
}
.no-index-table-modal__table-container {
  flex: 1;
  min-height: 0;
  overflow: visible;
  display: flex;
  flex-direction: column;
}
@media (max-width: 768px) {
  .no-index-table-modal__table-container {
    display: none !important;
  }
}
@media (min-width: 769px) {
  .no-index-table-modal[data-view-type=grid] .no-index-table-modal__table-container {
    display: none !important;
  }
}
@media (min-width: 769px) {
  .no-index-table-modal[data-view-type=list] .no-index-table-modal__card-wrapper--desktop {
    display: none !important;
  }
}
@media (max-width: 768px) {
  .no-index-table-modal .no-index-table-modal__table-container,
  .no-index-table-modal #index-table-modal-table,
  .no-index-table-modal .no-table__wrapper,
  .no-index-table-modal table.no-table {
    display: none !important;
  }
}
.no-index-table-modal__card-wrapper {
  flex: 1;
  min-height: 0;
  gap: 1.2rem;
  overflow: visible;
  padding: 0.4rem 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
  padding: 0.8rem 0;
}
@media (max-width: 1024px) {
  .no-index-table-modal__card-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .no-index-table-modal__card-wrapper {
    display: flex !important;
    flex-direction: column;
    gap: 1.2rem;
  }
}
.no-index-table-modal__card-wrapper::-webkit-scrollbar {
  width: 0.6rem;
}
.no-index-table-modal__card-wrapper::-webkit-scrollbar-track {
  background: transparent;
}
.no-index-table-modal__card-wrapper::-webkit-scrollbar-thumb {
  background: var(--clr-border-primary);
  border-radius: 0.3rem;
}
.no-index-table-modal__card-wrapper::-webkit-scrollbar-thumb:hover {
  background: var(--clr-border-secondary);
}
.no-index-table-modal .no-card {
  margin-bottom: 0;
  border: none;
  box-shadow: none;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: visible !important;
}
.no-index-table-modal .no-card__body {
  padding: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: visible !important;
}
.no-index-table-modal .no-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: clamp(1.4rem, 0vw + 1.4rem, 1.4rem);
  background-color: var(--clr-bg-elevated);
  table-layout: auto;
  display: table;
}
.no-index-table-modal .no-table__wrapper {
  position: relative;
  overflow: visible;
  -webkit-overflow-scrolling: touch;
  border: 0.1rem solid var(--clr-border-secondary);
  border-radius: 0.8rem;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  max-height: max-content;
}
@media (max-width: 768px) {
  .no-index-table-modal .no-table__wrapper {
    display: none !important;
  }
}
.no-index-table-modal .no-table__header {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: var(--clr-bg-secondary);
  border-bottom: 0.2rem solid var(--clr-border-primary);
  box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.05);
}
.no-index-table-modal .no-table__cell {
  padding: 1rem 1.2rem;
  text-align: left;
  color: var(--clr-text-secondary);
  white-space: nowrap;
  font-size: clamp(1.3rem, 0.0647249191vw + 1.2757281553rem, 1.4rem);
  line-height: 1.5;
  vertical-align: middle;
}
@media (max-width: 544px) {
  .no-index-table-modal .no-table__cell {
    padding: 1.2rem 1.6rem;
    white-space: normal;
  }
}
@media (max-width: 768px) {
  .no-index-table-modal .no-table__cell {
    padding: 1.4rem 2.4rem;
  }
}
.no-index-table-modal .no-table__cell--header {
  font-weight: 600;
  color: var(--clr-text-primary);
  background-color: var(--clr-bg-secondary);
}
.no-index-table-modal .no-table__cell--empty {
  text-align: center;
  padding: 4rem 2rem;
}
.no-index-table-modal .no-table__row {
  transition: background-color 0.2s ease;
  cursor: pointer;
}
.no-index-table-modal .no-table__row:hover {
  background: var(--clr-bg-secondary);
}
.no-index-table-modal .no-table__row:last-child .no-table__cell {
  border-bottom: none;
}
.no-index-table-modal .no-table__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  gap: 1.2rem;
  color: var(--clr-text-secondary);
}
.no-index-table-modal .no-table__empty-icon {
  font-size: 3.2rem;
  color: var(--clr-text-tertiary);
}
.no-index-table-modal .no-table__empty-text {
  font-size: 1.4rem;
  margin: 0;
}
.no-index-table-modal__pagination {
  margin-top: 0;
  padding-top: 1.6rem;
  border-top: 0.1rem solid var(--clr-border-primary);
  flex-shrink: 0;
  overflow: visible;
  position: relative;
}
.no-index-table-modal__pagination .no-pagination-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.4rem;
  flex-wrap: wrap;
  position: relative;
}
@media (max-width: 768px) {
  .no-index-table-modal__pagination .no-pagination-wrapper {
    flex-direction: column;
    align-items: stretch;
    gap: 1.6rem;
  }
}
.no-index-table-modal__pagination .no-pagination__info {
  font-size: 1.4rem;
  color: var(--clr-text-secondary);
  font-weight: 500;
}
.no-index-table-modal__pagination .no-pagination__per-page {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-shrink: 0;
  position: relative;
  z-index: 10004;
}
@media (max-width: 768px) {
  .no-index-table-modal__pagination .no-pagination__per-page {
    width: 100%;
    justify-content: space-between;
  }
}
.no-index-table-modal__pagination .no-select-wrapper {
  position: relative;
  z-index: 10005 !important;
}
.no-index-table-modal__pagination .no-select-wrapper__dropdown {
  z-index: 10006 !important;
}
.no-index-table-modal__card {
  background: var(--clr-bg-elevated);
  border: 0.1rem solid var(--clr-border-secondary);
  border-radius: 1.2rem;
  margin-bottom: 1.2rem;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.05);
}
@media (max-width: 768px) {
  .no-index-table-modal__card:hover:not(:has(.index-table-select-radio:checked)):not(:has(.index-table-select-checkbox:checked)) {
    border-color: var(--clr-primary-400);
    box-shadow: 0 0.2rem 0.6rem rgba(37, 99, 235, 0.1);
    transform: translateY(-0.1rem);
  }
}
.no-index-table-modal__card:has(.index-table-select-radio:checked), .no-index-table-modal__card:has(.index-table-select-checkbox:checked) {
  border-color: var(--clr-primary-500);
  background: var(--clr-primary-50);
  box-shadow: 0 0.2rem 0.8rem rgba(37, 99, 235, 0.15), 0 0 0 0.2rem rgba(37, 99, 235, 0.1);
  transform: translateY(-0.05rem);
}
.no-index-table-modal__card:last-child {
  margin-bottom: 0;
}
.no-index-table-modal__card:active {
  transform: translateY(0);
}
.no-index-table-modal__card-header {
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
  padding: 1.6rem;
  padding-bottom: 1.2rem;
  border-bottom: 0.1rem solid var(--clr-border-secondary);
  cursor: pointer;
  transition: background-color 0.2s ease;
}
@media (max-width: 768px) {
  .no-index-table-modal__card-header:hover {
    background: var(--clr-bg-secondary);
  }
}
.no-index-table-modal__card-image {
  flex-shrink: 0;
  width: 8rem;
  height: 8rem;
  border-radius: 0.8rem;
  overflow: hidden;
  background: var(--clr-bg-secondary);
  border: 0.1rem solid var(--clr-border-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}
@media (max-width: 768px) {
  .no-index-table-modal__card-image {
    width: 10rem;
    height: 10rem;
  }
  .no-index-table-modal__card:hover .no-index-table-modal__card-image {
    border-color: var(--clr-primary-400);
    box-shadow: 0 0.2rem 0.4rem rgba(37, 99, 235, 0.1);
  }
}
@media (max-width: 1024px) {
  .no-index-table-modal__card-image {
    width: 12rem;
    height: 12rem;
  }
}
.no-index-table-modal__card-image-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.no-index-table-modal__card-selection {
  flex-shrink: 0;
  margin-top: 0.2rem;
  pointer-events: auto;
}
.no-index-table-modal__card-title-wrapper {
  flex: 1;
  min-width: 0;
}
.no-index-table-modal__card-title {
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--clr-text-primary);
  margin: 0;
  line-height: 1.4;
  word-break: break-word;
}
.no-index-table-modal__image-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  height: 0;
  padding-bottom: 56.25%;
}
.no-index-table-modal__image-cell img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.no-index-table-modal__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.4rem;
  border: 0.1rem solid var(--clr-border-secondary);
}
.no-index-table-modal__card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 1.2rem 1.6rem;
  cursor: pointer;
}
.no-index-table-modal__card-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 1.1rem;
  background: var(--clr-bg-secondary);
  padding: 0.4rem 0.8rem;
  border-radius: 0.6rem;
  border: 0.1rem solid var(--clr-border-secondary);
  transition: all 0.2s ease;
  white-space: nowrap;
}
@media (max-width: 768px) {
  .no-index-table-modal__card-badge:hover {
    background: var(--clr-bg-tertiary);
    border-color: var(--clr-border-primary);
  }
}
.no-index-table-modal__card-badge-label {
  font-weight: 500;
  color: var(--clr-text-tertiary);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.no-index-table-modal__card-badge-value {
  color: var(--clr-text-primary);
  font-weight: 600;
}
.no-index-table-modal__selected-summary {
  flex-shrink: 0;
  padding: 1rem 1.2rem;
  background: var(--clr-bg-secondary);
  border: 0.1rem solid var(--clr-border-secondary);
  border-radius: 0.8rem;
  margin-bottom: 0.8rem;
}
.no-index-table-modal__selected-summary-title {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--clr-text-secondary);
  margin-bottom: 0.8rem;
}
.no-index-table-modal__selected-summary-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}
.no-index-table-modal__selected-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.8rem;
  font-size: 1.3rem;
  color: var(--clr-text-primary);
  background: var(--clr-bg-elevated);
  border: 0.1rem solid var(--clr-border-primary);
  border-radius: 0.6rem;
}
.no-index-table-modal__selected-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--clr-text-tertiary);
  cursor: pointer;
  border-radius: 0.4rem;
  transition: color 0.2s, background 0.2s;
}
.no-index-table-modal__selected-chip-remove:hover {
  color: var(--clr-danger-600);
  background: var(--clr-danger-50);
}
.no-index-table-modal__selected-chip-remove i {
  font-size: 1rem;
}

/**
 * Loupe Info Modal
 * 루페 정보 모달 스타일
 */
.loupe-info-modal {
  max-width: 90rem;
  width: 90%;
}
@media (max-width: 768px) {
  .loupe-info-modal {
    max-width: 95%;
    width: 95%;
  }
}
.loupe-info-modal__content {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  min-width: 48rem;
  overflow-x: auto;
}
.loupe-info-modal__section {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.loupe-info-modal__section-title {
  font-size: clamp(1.4rem, 0.1294498382vw + 1.3514563107rem, 1.6rem);
  font-weight: 600;
  color: var(--clr-text-primary);
  padding-bottom: 0.8rem;
  border-bottom: 0.2rem solid var(--clr-primary-500);
}
.loupe-info-modal__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.4rem;
  background: var(--clr-bg-primary);
  border-radius: 0.6rem;
  overflow: hidden;
  border: 0.1rem solid var(--clr-border-secondary);
}
.loupe-info-modal__table th {
  padding: 1rem 1.4rem;
  text-align: left;
  font-weight: 600;
  color: var(--clr-text-primary);
  background: var(--clr-bg-secondary);
  border-bottom: 0.1rem solid var(--clr-border-secondary);
  white-space: nowrap;
  min-width: 12rem;
  font-size: clamp(1.2rem, 0.1294498382vw + 1.1514563107rem, 1.4rem);
}
@media (max-width: 768px) {
  .loupe-info-modal__table th {
    padding: 0.8rem 1rem;
    min-width: 10rem;
  }
}
.loupe-info-modal__table td {
  padding: 1rem 1.4rem;
  text-align: left;
  color: var(--clr-text-primary);
  border-bottom: 0.1rem solid var(--clr-border-tertiary);
  font-size: clamp(1.2rem, 0.1294498382vw + 1.1514563107rem, 1.4rem);
}
@media (max-width: 768px) {
  .loupe-info-modal__table td {
    padding: 0.8rem 1rem;
  }
}
.loupe-info-modal__table tbody tr:last-child th,
.loupe-info-modal__table tbody tr:last-child td {
  border-bottom: none;
}
.loupe-info-modal__table--basic th {
  background: linear-gradient(135deg, var(--clr-primary-50), var(--clr-primary-100));
  color: var(--clr-primary-800);
  border-bottom: 0.15rem solid var(--clr-primary-300);
  font-weight: 700;
}
.loupe-info-modal__table--basic td {
  font-weight: 500;
  color: var(--clr-text-primary);
}
.loupe-info-modal__table--distance {
  table-layout: fixed;
}
.loupe-info-modal__table--distance th {
  width: 28%;
  min-width: 0;
  max-width: 12rem;
  font-size: clamp(1.3rem, 0.1294498382vw + 1.2514563107rem, 1.5rem);
}
.loupe-info-modal__table--distance td {
  width: 72%;
}
.loupe-info-modal__table--distance tbody td {
  font-weight: 700;
  font-size: clamp(1.5rem, 0.1941747573vw + 1.427184466rem, 1.8rem);
  line-height: 1.4;
  padding: 1.2rem 1.6rem;
  font-variant-numeric: tabular-nums;
}
.loupe-info-modal__table--distance tbody th {
  padding: 1.2rem 1.4rem;
  vertical-align: middle;
}
@media (max-width: 768px) {
  .loupe-info-modal__table--distance th {
    width: 32%;
    max-width: 10rem;
  }
  .loupe-info-modal__table--distance td {
    width: 68%;
  }
  .loupe-info-modal__table--distance tbody td {
    font-size: clamp(1.4rem, 0.1294498382vw + 1.3514563107rem, 1.6rem);
    padding: 1rem 1.2rem;
  }
}
.loupe-info-modal__table--vision thead {
  background: linear-gradient(135deg, var(--clr-primary-100), var(--clr-primary-50));
  border-bottom: 0.15rem solid var(--clr-primary-300);
}
.loupe-info-modal__table--vision thead th {
  padding: 1rem 1.2rem;
  text-align: center;
  font-weight: 600;
  color: var(--clr-primary-800);
  background: transparent;
  border-bottom: none;
  border-right: 0.1rem solid var(--clr-primary-200);
}
@media (max-width: 768px) {
  .loupe-info-modal__table--vision thead th {
    padding: 0.8rem 0.8rem;
    font-size: 1.2rem;
  }
}
.loupe-info-modal__table--vision thead th:last-child {
  border-right: none;
}
.loupe-info-modal__table--vision tbody th {
  background: var(--clr-bg-secondary);
  border-right: 0.1rem solid var(--clr-border-secondary);
  font-weight: 600;
  text-align: left;
}
.loupe-info-modal__table--vision tbody td {
  text-align: center;
  border-right: 0.1rem solid var(--clr-border-tertiary);
}
.loupe-info-modal__table--vision tbody td:last-child {
  border-right: none;
}
.loupe-info-modal__table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}
@media (max-width: 450px) {
  .loupe-info-modal__table-wrapper {
    overflow-x: visible;
  }
}
.loupe-info-modal__table-split {
  display: none;
  width: 100%;
  font-size: 1.3rem;
  table-layout: fixed;
}
@media (max-width: 450px) {
  .loupe-info-modal__table-split {
    display: table;
    margin-bottom: 1.6rem;
    font-size: 1rem;
  }
  .loupe-info-modal__table-split:last-child {
    margin-bottom: 0;
  }
  .loupe-info-modal__table-split thead {
    background: linear-gradient(135deg, var(--clr-primary-100), var(--clr-primary-50));
    border-bottom: 0.15rem solid var(--clr-primary-300);
  }
  .loupe-info-modal__table-split thead tr:first-child th {
    padding: 0.8rem 0.6rem;
    font-weight: 700;
    color: var(--clr-primary-800);
    text-align: center;
    font-size: 1.1rem;
    border-bottom: 0.1rem solid var(--clr-primary-200);
  }
  .loupe-info-modal__table-split thead tr:last-child th {
    padding: 0.6rem 0.4rem;
    font-weight: 600;
    color: var(--clr-primary-700);
    text-align: center;
    font-size: 0.95rem;
    border-top: 0.1rem solid var(--clr-primary-200);
    border-right: 0.1rem solid var(--clr-primary-200);
  }
  .loupe-info-modal__table-split thead tr:last-child th:last-child {
    border-right: none;
  }
  .loupe-info-modal__table-split tbody th {
    padding: 0.5rem 0.6rem;
    font-weight: 600;
    color: var(--clr-text-primary);
    text-align: left;
    background: var(--clr-bg-secondary);
    border-right: 0.1rem solid var(--clr-border-secondary);
    white-space: nowrap;
    width: 5rem;
    font-size: 0.9rem;
  }
  .loupe-info-modal__table-split tbody td {
    padding: 0.5rem 0.3rem;
    text-align: center;
    color: var(--clr-text-primary);
    font-weight: 500;
    border-bottom: 0.1rem solid var(--clr-border-tertiary);
    border-right: 0.1rem solid var(--clr-border-tertiary);
    font-size: 0.85rem;
    word-break: break-word;
  }
  .loupe-info-modal__table-split tbody td:last-child {
    border-right: none;
  }
  .loupe-info-modal__table-split tbody tr:last-child th,
  .loupe-info-modal__table-split tbody tr:last-child td {
    border-bottom: none;
  }
}
@media (max-width: 450px) {
  .loupe-info-modal__table--morenz {
    display: none;
  }
}
.loupe-info-modal__table--morenz {
  width: 100%;
  min-width: min(100%, 72rem);
  font-size: 1.3rem;
  table-layout: auto;
}
@media (max-width: 768px) {
  .loupe-info-modal__table--morenz {
    font-size: 1.2rem;
  }
}
@media (max-width: 544px) {
  .loupe-info-modal__table--morenz {
    font-size: 1.1rem;
  }
}
@media (max-width: 450px) {
  .loupe-info-modal__table--morenz {
    font-size: 1rem;
  }
}
.loupe-info-modal__table--morenz thead {
  background: linear-gradient(135deg, var(--clr-primary-100), var(--clr-primary-50));
  border-bottom: 0.15rem solid var(--clr-primary-300);
}
.loupe-info-modal__table--morenz thead tr:first-child th {
  padding: 1rem 0.8rem;
  font-weight: 700;
  color: var(--clr-primary-800);
  text-align: center;
  font-size: 1.4rem;
  border-bottom: 0.1rem solid var(--clr-primary-200);
}
.loupe-info-modal__table--morenz thead tr:first-child th:first-child {
  min-width: 13.5rem;
}
@media (max-width: 768px) {
  .loupe-info-modal__table--morenz thead tr:first-child th {
    padding: 0.8rem 0.6rem;
    font-size: 1.3rem;
  }
}
@media (max-width: 544px) {
  .loupe-info-modal__table--morenz thead tr:first-child th {
    padding: 0.6rem 0.4rem;
    font-size: 1.1rem;
  }
}
@media (max-width: 450px) {
  .loupe-info-modal__table--morenz thead tr:first-child th {
    padding: 0.5rem 0.3rem;
    font-size: 1rem;
  }
}
.loupe-info-modal__table--morenz thead tr:last-child th {
  padding: 0.8rem 0.6rem;
  font-weight: 600;
  color: var(--clr-primary-700);
  text-align: center;
  font-size: 1.2rem;
  border-top: 0.1rem solid var(--clr-primary-200);
  border-right: 0.1rem solid var(--clr-primary-200);
}
.loupe-info-modal__table--morenz thead tr:last-child th:first-child {
  min-width: 13.5rem;
}
@media (max-width: 768px) {
  .loupe-info-modal__table--morenz thead tr:last-child th {
    padding: 0.6rem 0.4rem;
    font-size: 1.1rem;
  }
}
@media (max-width: 544px) {
  .loupe-info-modal__table--morenz thead tr:last-child th {
    padding: 0.5rem 0.3rem;
    font-size: 1rem;
  }
}
@media (max-width: 450px) {
  .loupe-info-modal__table--morenz thead tr:last-child th {
    padding: 0.4rem 0.2rem;
    font-size: 0.9rem;
  }
}
.loupe-info-modal__table--morenz thead tr:last-child th:last-child {
  border-right: none;
}
.loupe-info-modal__table--morenz tbody th {
  padding: 1rem 1.2rem;
  font-weight: 600;
  color: var(--clr-text-primary);
  text-align: left;
  background: var(--clr-bg-secondary);
  border-right: 0.1rem solid var(--clr-border-secondary);
  white-space: nowrap;
  min-width: 13.5rem;
  width: auto;
}
@media (max-width: 768px) {
  .loupe-info-modal__table--morenz tbody th {
    padding: 0.8rem 1rem;
    min-width: 12rem;
  }
}
@media (max-width: 544px) {
  .loupe-info-modal__table--morenz tbody th {
    padding: 0.6rem 0.8rem;
    min-width: 11rem;
    font-size: 0.95rem;
  }
}
@media (max-width: 450px) {
  .loupe-info-modal__table--morenz tbody th {
    padding: 0.5rem 0.6rem;
    min-width: 10rem;
    font-size: 0.9rem;
    white-space: normal;
  }
}
.loupe-info-modal__table--morenz tbody td {
  padding: 1rem 0.8rem;
  text-align: center;
  color: var(--clr-text-primary);
  font-weight: 500;
  border-bottom: 0.1rem solid var(--clr-border-tertiary);
  border-right: 0.1rem solid var(--clr-border-tertiary);
  word-break: break-word;
}
@media (max-width: 768px) {
  .loupe-info-modal__table--morenz tbody td {
    padding: 0.8rem 0.6rem;
  }
}
@media (max-width: 544px) {
  .loupe-info-modal__table--morenz tbody td {
    padding: 0.6rem 0.4rem;
    font-size: 0.95rem;
  }
}
@media (max-width: 450px) {
  .loupe-info-modal__table--morenz tbody td {
    padding: 0.5rem 0.3rem;
    font-size: 0.85rem;
  }
}
.loupe-info-modal__table--morenz tbody td:last-child {
  border-right: none;
}
.loupe-info-modal__table--morenz tbody tr:last-child th,
.loupe-info-modal__table--morenz tbody tr:last-child td {
  border-bottom: none;
}

.no-vision-photo-modal__header {
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--clr-border-primary);
}
.no-vision-photo-modal__description {
  font-size: 1.4rem;
  color: var(--clr-text-secondary);
  margin: 0;
}
.no-vision-photo-modal__description strong {
  color: var(--clr-base-primary-600);
  font-weight: 600;
}
.no-vision-photo-modal__list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-height: 60vh;
  overflow-y: auto;
  padding: 0.5rem 0;
}

.no-vision-photo-item {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.2rem;
  background: var(--clr-base-bg-secondary);
  border: 1px solid var(--clr-border-primary);
  border-radius: 0.6rem;
  transition: all 0.2s ease;
}
.no-vision-photo-item:hover {
  background: var(--clr-base-bg-tertiary);
  border-color: var(--clr-base-primary-400);
  transform: translateY(-0.1rem);
  box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.08);
}
.no-vision-photo-item__icon {
  flex-shrink: 0;
  width: 4rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--clr-base-primary-100);
  border-radius: 0.5rem;
}
.no-vision-photo-item__icon i {
  font-size: 2rem;
  color: var(--clr-base-primary-600);
}
.no-vision-photo-item__info {
  flex: 1;
  min-width: 0;
}
.no-vision-photo-item__name {
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--clr-text-primary);
  margin-bottom: 0.4rem;
  word-break: break-all;
}
.no-vision-photo-item__meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.2rem;
  color: var(--clr-text-tertiary);
}
.no-vision-photo-item__extension {
  padding: 0.2rem 0.6rem;
  background: var(--clr-base-success-100);
  color: var(--clr-base-success-700);
  border-radius: 0.3rem;
  font-weight: 600;
  font-size: 1.1rem;
}
.no-vision-photo-item__separator {
  color: var(--clr-text-quaternary);
}
.no-vision-photo-item__size {
  font-weight: 500;
}
.no-vision-photo-item__actions {
  flex-shrink: 0;
}

@media (prefers-color-scheme: dark) {
  body[data-theme=dark] .no-vision-photo-item:hover {
    box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.3);
  }
}
@media (max-width: 768px) {
  .no-vision-photo-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  .no-vision-photo-item__icon {
    width: 3.5rem;
    height: 3.5rem;
  }
  .no-vision-photo-item__icon i {
    font-size: 1.8rem;
  }
  .no-vision-photo-item__name {
    font-size: 1.3rem;
  }
  .no-vision-photo-item__meta {
    font-size: 1.1rem;
  }
  .no-vision-photo-item__actions {
    width: 100%;
  }
  .no-vision-photo-item__actions .no-btn {
    width: 100%;
    justify-content: center;
  }
}
/**
 * File Upload Component
 * 다형성 지원 종합 파일 업로더 (드래그앤드롭, 타입별 프리뷰)
 */
.no-file-upload {
  width: 100%;
}
.no-file-upload__dropzone {
  position: relative;
  width: 100%;
  min-height: 12rem;
  border: 0.2rem dashed var(--clr-border-primary);
  border-radius: 1.2rem;
  background: var(--clr-bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: 1.6rem;
  touch-action: manipulation;
}
@media (max-width: 544px) {
  .no-file-upload__dropzone {
    min-height: 14rem;
    margin-bottom: 2rem;
  }
}
@media (max-width: 768px) {
  .no-file-upload__dropzone {
    min-height: 16rem;
  }
  .no-file-upload__dropzone:hover:not(.no-file-upload__dropzone--disabled) {
    border-color: var(--clr-primary-400);
    background: var(--clr-primary-50);
    transform: translateY(-0.2rem);
    box-shadow: 0 0.4rem 1.2rem rgba(37, 99, 235, 0.1);
  }
}
.no-file-upload__dropzone--dragover {
  border-color: var(--clr-primary-600);
  background: var(--clr-primary-50);
  transform: scale(1.01);
  box-shadow: 0 0.4rem 1.2rem rgba(37, 99, 235, 0.15);
  animation: pulse 1.5s ease-in-out infinite;
}
.no-file-upload__dropzone--dragover .no-file-upload__dropzone-content i {
  color: var(--clr-primary-600);
  transform: scale(1.1);
}
.no-file-upload__dropzone--dragover .no-file-upload__dropzone-content .no-file-upload__dropzone-text {
  color: var(--clr-primary-700);
  font-weight: 600;
}
.no-file-upload__dropzone--disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.no-file-upload__dropzone:active:not(.no-file-upload__dropzone--disabled) {
  transform: scale(0.98);
}
.no-file-upload__file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
  opacity: 0;
  pointer-events: none;
}
.no-file-upload__dropzone-content {
  text-align: center;
  padding: 2rem 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
@media (max-width: 544px) {
  .no-file-upload__dropzone-content {
    padding: 2.4rem 2rem;
  }
}
@media (max-width: 768px) {
  .no-file-upload__dropzone-content {
    padding: 3.2rem 2rem;
  }
}
.no-file-upload__dropzone-content i {
  font-size: clamp(3.2rem, 1.0355987055vw + 2.8116504854rem, 4.8rem);
  color: var(--clr-text-tertiary);
  margin-bottom: 1rem;
  display: block;
}
@media (max-width: 544px) {
  .no-file-upload__dropzone-content i {
    margin-bottom: 1.2rem;
  }
}
.no-file-upload__dropzone-text {
  font-size: clamp(1.6rem, 0vw + 1.6rem, 1.6rem);
  font-weight: 500;
  color: var(--clr-text-secondary);
  margin-bottom: 0.8rem;
}
.no-file-upload__dropzone-hint {
  font-size: clamp(1.3rem, 0vw + 1.3rem, 1.3rem);
  color: var(--clr-text-tertiary);
}
.no-file-upload__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 1.2rem;
  margin-bottom: 1.6rem;
}
@media (max-width: 544px) {
  .no-file-upload__list {
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 1.4rem;
  }
}
@media (max-width: 768px) {
  .no-file-upload__list {
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
    gap: 1.6rem;
  }
}
.no-file-upload__item {
  position: relative;
  border: 0.2rem solid var(--clr-border-secondary);
  border-radius: 1rem;
  padding: 1rem;
  background: var(--clr-bg-elevated);
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  overflow: hidden;
}
@media (max-width: 544px) {
  .no-file-upload__item {
    padding: 1.2rem;
    gap: 1rem;
  }
}
@media (max-width: 768px) {
  .no-file-upload__item:hover {
    border-color: var(--clr-primary-400);
    box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.1);
    transform: translateY(-0.2rem);
  }
}
.no-file-upload__item--deleted {
  opacity: 0.5;
  border-color: var(--clr-danger-300);
  background: var(--clr-danger-50);
}
.no-file-upload__item--image .no-file-upload__preview {
  aspect-ratio: 16/9;
}
.no-file-upload__item--video .no-file-upload__preview {
  aspect-ratio: 16/9;
}
.no-file-upload__item--audio .no-file-upload__preview {
  min-height: 10rem;
}
.no-file-upload__item--document .no-file-upload__preview, .no-file-upload__item--archive .no-file-upload__preview {
  min-height: 12rem;
}
.no-file-upload__preview {
  position: relative;
  width: 100%;
  border-radius: 0.8rem;
  overflow: hidden;
  background: var(--clr-bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.no-file-upload__preview-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.no-file-upload__preview-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.no-file-upload__preview-audio {
  width: 100%;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
}
.no-file-upload__preview-audio > i {
  font-size: clamp(3rem, 0.3883495146vw + 2.854368932rem, 3.6rem);
  color: var(--clr-primary-600);
}
.no-file-upload__audio-player {
  width: 100%;
  max-width: 100%;
}
.no-file-upload__preview-document {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.no-file-upload__preview-document i {
  font-size: clamp(4.8rem, 0.5177993528vw + 4.6058252427rem, 5.6rem);
  color: var(--clr-primary-600);
}
.no-file-upload__preview-archive {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.no-file-upload__preview-archive i {
  font-size: clamp(4.8rem, 0.5177993528vw + 4.6058252427rem, 5.6rem);
  color: var(--clr-warning-600);
}
.no-file-upload__preview-icon {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.no-file-upload__preview-icon i {
  font-size: clamp(4rem, 0.5177993528vw + 3.8058252427rem, 4.8rem);
  color: var(--clr-text-tertiary);
}
.no-file-upload__preview-doc {
  width: 100%;
  height: 100%;
  min-height: 12rem;
  object-fit: contain;
  background: var(--clr-bg-primary);
}
.no-file-upload__remove-btn {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.8rem;
  height: 2.8rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: var(--clr-base-white);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: clamp(1.2rem, 0.1294498382vw + 1.1514563107rem, 1.4rem);
  z-index: 10;
  backdrop-filter: blur(0.4rem);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
@media (max-width: 544px) {
  .no-file-upload__remove-btn {
    top: 0.8rem;
    right: 0.8rem;
    width: 3.2rem;
    height: 3.2rem;
  }
}
@media (max-width: 768px) {
  .no-file-upload__remove-btn:hover {
    background: var(--clr-danger-600);
    transform: scale(1.1);
  }
}
.no-file-upload__remove-btn:active {
  transform: scale(0.95);
  background: var(--clr-danger-600);
}
.no-file-upload__remove-btn:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(239, 68, 68, 0.3);
}
.no-file-upload {
  /* ===== 카드 정보 영역 ===== */
}
.no-file-upload__details {
  margin-top: 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.no-file-upload__details-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem;
}
.no-file-upload__name {
  font-size: clamp(1.4rem, 0vw + 1.4rem, 1.4rem);
  font-weight: 500;
  color: var(--clr-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
  max-width: 100%;
}
.no-file-upload__badge {
  padding: 0.2rem 0.8rem;
  border-radius: 9999px;
  font-size: clamp(1.1rem, 0vw + 1.1rem, 1.1rem);
  font-weight: 500;
  white-space: nowrap;
  background: var(--clr-bg-tertiary);
  color: var(--clr-text-secondary);
}
.no-file-upload__badge--image {
  background: var(--clr-primary-50);
  color: var(--clr-primary-700);
}
.no-file-upload__badge--video {
  background: var(--clr-warning-50);
  color: var(--clr-warning-700);
}
.no-file-upload__badge--audio {
  background: var(--clr-info-50);
  color: var(--clr-info-700);
}
.no-file-upload__badge--document, .no-file-upload__badge--archive {
  background: var(--clr-bg-tertiary);
  color: var(--clr-text-secondary);
}
.no-file-upload__details-meta {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: clamp(1.1rem, 0vw + 1.1rem, 1.1rem);
  color: var(--clr-text-tertiary);
}
.no-file-upload__meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}
.no-file-upload__meta-label {
  color: var(--clr-text-secondary);
}
.no-file-upload__size {
  color: var(--clr-text-tertiary);
  font-variant-numeric: tabular-nums;
}
.no-file-upload__status {
  padding: 0.1rem 0.6rem;
  border-radius: 9999px;
  font-size: clamp(1.1rem, 0vw + 1.1rem, 1.1rem);
  font-weight: 500;
}
.no-file-upload__status--new {
  background: var(--clr-success-50);
  color: var(--clr-success-700);
}
.no-file-upload__status--existing {
  background: var(--clr-bg-tertiary);
  color: var(--clr-text-secondary);
}
.no-file-upload__actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  padding-top: 0.8rem;
  margin-top: 0.8rem;
  border-top: 0.1rem solid var(--clr-border-secondary);
}
.no-file-upload__action-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-right: 1rem;
  margin-bottom: 0.4rem;
  padding: 0.5rem 1rem;
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--clr-primary-500) !important;
  background-color: transparent !important;
  border: 0.15rem solid var(--clr-primary-500);
  border-radius: 0.6rem;
  cursor: pointer;
  text-decoration: none !important;
  transition: color 0.2s, background-color 0.2s, border-color 0.2s;
}
.no-file-upload__action-link i {
  font-size: 1.2rem;
  flex-shrink: 0;
  color: inherit;
}
.no-file-upload__action-link:hover {
  color: var(--clr-primary-600) !important;
  background-color: var(--clr-primary-50) !important;
  border-color: var(--clr-primary-600);
}
.no-file-upload__action-link--danger {
  color: var(--clr-danger-600) !important;
  border-color: var(--clr-danger-500);
}
.no-file-upload__action-link--danger i {
  color: inherit;
}
.no-file-upload__action-link--danger:hover {
  color: var(--clr-danger-700) !important;
  background-color: var(--clr-danger-50) !important;
  border-color: var(--clr-danger-600);
}
.no-file-upload__delete-wrapper {
  margin-bottom: 0.4rem;
}
.no-file-upload__delete-checkbox {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  user-select: none;
}
.no-file-upload__delete-input {
  width: 1.8rem;
  height: 1.8rem;
  cursor: pointer;
  accent-color: var(--clr-danger-600);
}
.no-file-upload__delete-label {
  font-size: clamp(1.3rem, 0vw + 1.3rem, 1.3rem);
  color: var(--clr-danger-600);
  font-weight: 500;
}
@media (max-width: 768px) {
  .no-file-upload__delete-label {
    font-size: clamp(1.2rem, 0vw + 1.2rem, 1.2rem);
  }
}
.no-file-upload__input {
  display: none;
}
.no-file-upload {
  /* ===== 드롭존 하단 안내 영역 ===== */
}
.no-file-upload__helper {
  margin-top: 1.2rem;
  padding: 1rem 1.2rem;
  background: var(--clr-info-50);
  border: 0.1rem solid var(--clr-info-200);
  border-radius: 0.8rem;
  font-size: clamp(1.2rem, 0.0647249191vw + 1.1757281553rem, 1.3rem);
  color: var(--clr-info-800);
  line-height: 1.5;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
@media (max-width: 544px) {
  .no-file-upload__helper {
    padding: 1.2rem 1.6rem;
    gap: 0.8rem;
  }
}
.no-file-upload__helper i {
  color: var(--clr-info-600);
  font-size: clamp(1.3rem, 0.0647249191vw + 1.2757281553rem, 1.4rem);
  flex-shrink: 0;
}
.no-file-upload__helper-text {
  flex: 1;
}
.no-file-upload__helper-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--clr-text-tertiary);
  cursor: pointer;
  border-radius: 0.4rem;
  transition: all 0.2s ease;
  flex-shrink: 0;
  font-size: clamp(1.2rem, 0.1294498382vw + 1.1514563107rem, 1.4rem);
}
@media (max-width: 768px) {
  .no-file-upload__helper-btn:hover {
    color: var(--clr-primary-600);
    background: var(--clr-primary-50);
  }
}
.no-file-upload__helper-btn:active {
  transform: scale(0.95);
}
.no-file-upload__helper-btn:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.2);
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
}
/* 허용 가능한 파일 타입 모달 */
.no-file-upload-types-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  pointer-events: none;
}
.no-file-upload-types-modal--active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.no-file-upload-types-modal__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(0.2rem);
}
.no-file-upload-types-modal__content {
  position: relative;
  width: 90%;
  max-width: 40rem;
  max-height: 80vh;
  background: var(--clr-bg-elevated);
  border-radius: 1.2rem;
  box-shadow: 0 0.8rem 2.4rem rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  transform: scale(0.9);
  transition: transform 0.3s ease;
  overflow: hidden;
}
.no-file-upload-types-modal--active .no-file-upload-types-modal__content {
  transform: scale(1);
}
.no-file-upload-types-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.6rem 2rem;
  border-bottom: 0.1rem solid var(--clr-border-secondary);
}
.no-file-upload-types-modal__title {
  font-size: clamp(1.8rem, 0.1294498382vw + 1.7514563107rem, 2rem);
  font-weight: 600;
  color: var(--clr-text-primary);
  margin: 0;
}
.no-file-upload-types-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--clr-text-tertiary);
  cursor: pointer;
  border-radius: 0.4rem;
  transition: all 0.2s ease;
  font-size: clamp(1.6rem, 0.1294498382vw + 1.5514563107rem, 1.8rem);
}
@media (max-width: 768px) {
  .no-file-upload-types-modal__close:hover {
    color: var(--clr-text-primary);
    background: var(--clr-bg-tertiary);
  }
}
.no-file-upload-types-modal__close:active {
  transform: scale(0.95);
}
.no-file-upload-types-modal__close:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.2);
}
.no-file-upload-types-modal__body {
  padding: 2rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}
.no-file-upload-types-modal__type {
  padding: 1.2rem;
  background: var(--clr-bg-secondary);
  border-radius: 0.8rem;
  border: 0.1rem solid var(--clr-border-secondary);
}
.no-file-upload-types-modal__type-header {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1rem;
}
.no-file-upload-types-modal__type-header i {
  font-size: clamp(1.6rem, 0.1294498382vw + 1.5514563107rem, 1.8rem);
  color: var(--clr-primary-600);
}
.no-file-upload-types-modal__type-label {
  font-size: clamp(1.4rem, 0.0647249191vw + 1.3757281553rem, 1.5rem);
  font-weight: 600;
  color: var(--clr-text-primary);
}
.no-file-upload-types-modal__type-extensions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.no-file-upload-types-modal__extension {
  display: inline-block;
  padding: 0.4rem 0.8rem;
  background: var(--clr-primary-50);
  color: var(--clr-primary-700);
  border-radius: 0.4rem;
  font-size: clamp(1.1rem, 0.0647249191vw + 1.0757281553rem, 1.2rem);
  font-weight: 500;
  border: 0.1rem solid var(--clr-primary-200);
}

/**
 * Single File Upload Component
 * 단일 파일 업로드 input (input + button 형태)
 */
.no-single-file-upload {
  width: 100%;
}
.no-single-file-upload__dropzone {
  position: relative;
  width: 100%;
  border-radius: 0.8rem;
  transition: all 0.3s ease;
}
.no-single-file-upload__dropzone--dragover .no-single-file-upload__input-group {
  border-color: var(--clr-primary-600);
  background: var(--clr-primary-50);
  box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.2);
}
.no-single-file-upload__dropzone--dragover .no-single-file-upload__dropzone-overlay {
  opacity: 1;
  visibility: visible;
  pointer-events: none;
}
.no-single-file-upload__dropzone-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(37, 99, 235, 0.05);
  border: 0.2rem dashed var(--clr-primary-400);
  border-radius: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 10;
  backdrop-filter: blur(0.2rem);
  animation: pulse 1.5s ease-in-out infinite;
}
.no-single-file-upload__dropzone-content {
  text-align: center;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.no-single-file-upload__dropzone-content i {
  font-size: clamp(3.2rem, 1.0355987055vw + 2.8116504854rem, 4.8rem);
  color: var(--clr-primary-600);
  margin-bottom: 0.8rem;
}
.no-single-file-upload__dropzone-text {
  font-size: clamp(1.6rem, 0.1294498382vw + 1.5514563107rem, 1.8rem);
  font-weight: 600;
  color: var(--clr-primary-700);
}
.no-single-file-upload__input-group {
  display: flex;
  align-items: stretch;
  gap: 0;
  width: 100%;
  position: relative;
  z-index: 1;
  border: 0.1rem solid var(--clr-border-primary);
  border-radius: 0.8rem;
  background: var(--clr-bg-secondary);
  transition: all 0.3s ease;
}
.no-single-file-upload__input {
  flex: 1;
  padding: 0.8rem 1.2rem;
  border: none;
  border-radius: 0.8rem 0 0 0.8rem;
  font-size: clamp(1.4rem, 0vw + 1.4rem, 1.4rem);
  background-color: transparent;
  color: var(--clr-text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 0;
}
@media (max-width: 544px) {
  .no-single-file-upload__input {
    padding: 1rem 1.6rem;
  }
}
.no-single-file-upload__input::placeholder {
  color: var(--clr-text-tertiary);
}
.no-single-file-upload__input:focus {
  outline: none;
  border-color: var(--clr-primary-600);
  background-color: var(--clr-bg-elevated);
  box-shadow: 0 0 0 0.3rem rgba(37, 99, 235, 0.1);
}
.no-single-file-upload__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.8rem 1.2rem;
  border: none;
  border-radius: 0 0.8rem 0.8rem 0;
  font-size: clamp(1.3rem, 0.0647249191vw + 1.2757281553rem, 1.4rem);
  font-weight: 500;
  color: var(--clr-base-white);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 10rem;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  background-color: var(--clr-primary-600);
}
@media (max-width: 544px) {
  .no-single-file-upload__button {
    padding: 1rem 1.6rem;
    gap: 0.8rem;
    min-width: 12rem;
  }
}
.no-single-file-upload__button i {
  font-size: clamp(1.3rem, 0.0647249191vw + 1.2757281553rem, 1.4rem);
  flex-shrink: 0;
}
.no-single-file-upload__button span {
  white-space: nowrap;
}
@media (max-width: 768px) {
  .no-single-file-upload__button:hover {
    opacity: 0.95;
    transform: translateY(-0.1rem);
    box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.15);
  }
}
.no-single-file-upload__button:active {
  transform: translateY(0);
  opacity: 0.9;
}
.no-single-file-upload__button:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.3);
}
.no-single-file-upload__button--primary {
  background-color: var(--clr-primary-600);
}
@media (max-width: 768px) {
  .no-single-file-upload__button--primary:hover {
    background-color: var(--clr-primary-700);
  }
}
.no-single-file-upload__button--primary:active {
  background-color: var(--clr-primary-800);
}
.no-single-file-upload__file-input {
  display: none;
}
.no-single-file-upload__item {
  margin-top: 1.2rem;
  width: 100%;
  max-width: 30rem;
  border: 0.2rem solid var(--clr-border-secondary);
  border-radius: 1rem;
  padding: 1rem;
  background: var(--clr-bg-elevated);
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  overflow: hidden;
}
@media (max-width: 544px) {
  .no-single-file-upload__item {
    margin-top: 1.6rem;
    padding: 1.2rem;
    gap: 1rem;
  }
}
@media (max-width: 768px) {
  .no-single-file-upload__item:hover {
    border-color: var(--clr-primary-400);
    box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.1);
    transform: translateY(-0.2rem);
  }
}
.no-single-file-upload__item--deleted {
  opacity: 0.5;
  border-color: var(--clr-danger-300);
  background: var(--clr-danger-50);
}
.no-single-file-upload__item--image .no-single-file-upload__preview, .no-single-file-upload__item--video .no-single-file-upload__preview {
  aspect-ratio: 16/9;
}
.no-single-file-upload__item--audio .no-single-file-upload__preview {
  min-height: 10rem;
}
.no-single-file-upload__item--document .no-single-file-upload__preview, .no-single-file-upload__item--archive .no-single-file-upload__preview, .no-single-file-upload__item--any .no-single-file-upload__preview {
  min-height: 12rem;
}
.no-single-file-upload__preview {
  position: relative;
  width: 100%;
  border-radius: 0.8rem;
  overflow: hidden;
  background: var(--clr-bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.no-single-file-upload__preview-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.no-single-file-upload__preview-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.no-single-file-upload__preview-audio {
  width: 100%;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
}
.no-single-file-upload__preview-audio > i {
  font-size: clamp(3rem, 0.3883495146vw + 2.854368932rem, 3.6rem);
  color: var(--clr-primary-600);
}
.no-single-file-upload__preview-audio audio {
  width: 100%;
  max-width: 100%;
}
.no-single-file-upload__preview-icon {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.no-single-file-upload__preview-icon i {
  font-size: clamp(4rem, 0.5177993528vw + 3.8058252427rem, 4.8rem);
  color: var(--clr-text-tertiary);
}
.no-single-file-upload__details {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.no-single-file-upload__details-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}
.no-single-file-upload__name {
  flex: 1;
  font-size: clamp(1.3rem, 0.0647249191vw + 1.2757281553rem, 1.4rem);
  font-weight: 500;
  color: var(--clr-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.no-single-file-upload__badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.6rem;
  border-radius: 0.4rem;
  font-size: clamp(1rem, 0.0647249191vw + 0.9757281553rem, 1.1rem);
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}
.no-single-file-upload__badge--image {
  background: var(--clr-primary-50);
  color: var(--clr-primary-700);
}
.no-single-file-upload__badge--video {
  background: var(--clr-danger-50);
  color: var(--clr-danger-700);
}
.no-single-file-upload__badge--audio {
  background: var(--clr-warning-50);
  color: var(--clr-warning-700);
}
.no-single-file-upload__badge--document {
  background: var(--clr-info-50);
  color: var(--clr-info-700);
}
.no-single-file-upload__badge--archive {
  background: var(--clr-warning-50);
  color: var(--clr-warning-700);
}
.no-single-file-upload__badge--any {
  background: var(--clr-bg-tertiary);
  color: var(--clr-text-secondary);
}
.no-single-file-upload__details-meta {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.no-single-file-upload__meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}
.no-single-file-upload__meta-label {
  font-size: clamp(1.1rem, 0.0647249191vw + 1.0757281553rem, 1.2rem);
  color: var(--clr-text-tertiary);
}
.no-single-file-upload__size {
  font-size: clamp(1.1rem, 0.0647249191vw + 1.0757281553rem, 1.2rem);
  font-weight: 500;
  color: var(--clr-text-secondary);
}
.no-single-file-upload__status {
  font-size: clamp(1.1rem, 0.0647249191vw + 1.0757281553rem, 1.2rem);
  font-weight: 500;
}
.no-single-file-upload__status--existing {
  color: var(--clr-success-600);
}
.no-single-file-upload__status--new {
  color: var(--clr-primary-600);
}
.no-single-file-upload__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.8rem;
  padding-top: 0.8rem;
  border-top: 0.1rem solid var(--clr-border-secondary);
}
.no-single-file-upload__remove-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.8rem;
  height: 2.8rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: var(--clr-base-white);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: clamp(1.2rem, 0.1294498382vw + 1.1514563107rem, 1.4rem);
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .no-single-file-upload__remove-btn:hover {
    background: rgba(239, 68, 68, 0.8);
    transform: scale(1.05);
  }
}
.no-single-file-upload__remove-btn:active {
  transform: scale(0.95);
}
.no-single-file-upload__remove-btn:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(239, 68, 68, 0.3);
}
.no-single-file-upload__file-info {
  margin-top: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 1.4rem;
  background: var(--clr-bg-secondary);
  border: 0.1rem solid var(--clr-border-secondary);
  border-radius: 0.8rem;
  transition: all 0.2s ease;
}
@media (max-width: 544px) {
  .no-single-file-upload__file-info {
    margin-top: 1.2rem;
    padding: 1rem 1.6rem;
    gap: 1.4rem;
  }
}
@media (max-width: 768px) {
  .no-single-file-upload__file-info:hover {
    border-color: var(--clr-border-primary);
  }
}
.no-single-file-upload__file-info--existing {
  background: var(--clr-bg-elevated);
  border-color: var(--clr-border-primary);
}
.no-single-file-upload__file-info--deleted {
  background: var(--clr-danger-50);
  border-color: var(--clr-danger-300);
}
.no-single-file-upload__file-info--deleted .no-single-file-upload__file-name {
  color: var(--clr-danger-700);
  text-decoration: line-through;
}
.no-single-file-upload__file-main {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  flex: 1;
}
.no-single-file-upload__file-icon {
  font-size: clamp(1.3rem, 0.1294498382vw + 1.2514563107rem, 1.5rem);
  color: var(--clr-text-tertiary);
  flex-shrink: 0;
}
.no-single-file-upload__file-actions {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-shrink: 0;
}
.no-single-file-upload__file-name {
  flex: 1;
  font-size: clamp(1.2rem, 0.0647249191vw + 1.1757281553rem, 1.3rem);
  color: var(--clr-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.no-single-file-upload__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  border: none;
  border-radius: 0.4rem;
  background: var(--clr-danger-50);
  color: var(--clr-danger-600);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: clamp(1.2rem, 0vw + 1.2rem, 1.2rem);
  flex-shrink: 0;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
@media (max-width: 768px) {
  .no-single-file-upload__remove:hover {
    background: var(--clr-danger-100);
    color: var(--clr-danger-700);
    transform: scale(1.05);
  }
}
.no-single-file-upload__remove:active {
  transform: scale(0.95);
  background: var(--clr-danger-200);
}
.no-single-file-upload__remove:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(239, 68, 68, 0.3);
}
.no-single-file-upload__delete-wrapper {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.no-single-file-upload__delete-wrapper .no-form-field__checkbox-group {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.no-single-file-upload__delete-input {
  cursor: pointer;
}
.no-single-file-upload__delete-label {
  font-size: clamp(1.2rem, 0vw + 1.2rem, 1.2rem);
  color: var(--clr-text-secondary);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
}
@media (max-width: 768px) {
  .no-single-file-upload__delete-label:hover {
    color: var(--clr-danger-600);
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
}
/**
 * Chat File Upload Component
 * 채팅창 스타일 파일 업로더 (텍스트 입력 + 파일 첨부) - Cursor AI 스타일
 */
.no-chat-input {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--clr-chat-bg);
  border: 0.1rem solid var(--clr-chat-border);
  border-radius: 1.2rem;
  overflow: hidden;
  transition: all 0.2s ease;
}
@media (max-width: 768px) {
  .no-chat-input {
    border-radius: 1.6rem;
  }
}
.no-chat-input:focus-within {
  border-color: var(--clr-primary-500);
  box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.2);
}
.no-chat-input--dragover {
  border-color: var(--clr-primary-500);
  background: rgba(37, 99, 235, 0.08);
  box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.2);
}
.no-chat-input--dragover::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--clr-primary-50);
  border: 0.2rem dashed var(--clr-primary-500);
  border-radius: 1.2rem;
  z-index: 10;
  pointer-events: none;
  animation: pulse 1.5s ease-in-out infinite;
}
@media (max-width: 768px) {
  .no-chat-input--dragover::before {
    border-radius: 1.6rem;
  }
}
.no-chat-input--dragover .no-chat-input__textarea {
  color: var(--clr-primary-700);
}
.no-chat-input--dragover .no-chat-input__attach,
.no-chat-input--dragover .no-chat-input__send {
  background: var(--clr-primary-600);
  color: var(--clr-base-white);
  transform: scale(1.05);
}
.no-chat-input__files {
  display: none;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1.2rem;
  border-bottom: 0.1rem solid var(--clr-chat-border);
  background: var(--clr-chat-bg-bar);
}
@media (max-width: 768px) {
  .no-chat-input__files {
    padding: 1.6rem;
    gap: 1.2rem;
  }
}
.no-chat-input__files:not(:empty) {
  display: flex;
}
.no-chat-input__file-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  width: 10rem;
  padding: 0;
  background: var(--clr-bg-elevated);
  border: 0.1rem solid var(--clr-border-primary);
  border-radius: 1rem;
  overflow: hidden;
  transition: all 0.2s ease;
}
@media (max-width: 544px) {
  .no-chat-input__file-item {
    width: 12rem;
    gap: 1rem;
  }
}
@media (max-width: 768px) {
  .no-chat-input__file-item:hover {
    border-color: var(--clr-primary-400);
    box-shadow: 0 0.4rem 1.2rem rgba(37, 99, 235, 0.15);
    transform: translateY(-0.2rem);
  }
}
.no-chat-input__file-item--image {
  width: 12rem;
}
@media (max-width: 544px) {
  .no-chat-input__file-item--image {
    width: 16rem;
  }
}
.no-chat-input__file-item--video {
  width: 12rem;
}
@media (max-width: 544px) {
  .no-chat-input__file-item--video {
    width: 16rem;
  }
}
.no-chat-input__file-item--audio {
  width: 11rem;
}
@media (max-width: 544px) {
  .no-chat-input__file-item--audio {
    width: 14rem;
  }
}
.no-chat-input__file-item--document {
  width: 10rem;
}
@media (max-width: 544px) {
  .no-chat-input__file-item--document {
    width: 12rem;
  }
}
.no-chat-input__file-preview {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--clr-bg-secondary);
}
.no-chat-input__file-preview--image, .no-chat-input__file-preview--video {
  aspect-ratio: 16/9;
}
.no-chat-input__file-preview--audio, .no-chat-input__file-preview--document {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.no-chat-input__file-preview-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.no-chat-input__file-preview-overlay i {
  font-size: clamp(2rem, 0.2588996764vw + 1.9029126214rem, 2.4rem);
  color: var(--clr-base-white);
}
.no-chat-input__file-item:hover .no-chat-input__file-preview-overlay {
  opacity: 1;
}
.no-chat-input__preview-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.no-chat-input__preview-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.no-chat-input__preview-audio {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--clr-primary-50) 0%, var(--clr-primary-100) 100%);
}
.no-chat-input__preview-audio i {
  font-size: clamp(3.2rem, 0.5177993528vw + 3.0058252427rem, 4rem);
  color: var(--clr-primary-500);
}
.no-chat-input__preview-icon {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--clr-bg-tertiary) 0%, var(--clr-bg-secondary) 100%);
}
.no-chat-input__preview-icon i {
  font-size: clamp(2.8rem, 0.5177993528vw + 2.6058252427rem, 3.6rem);
  color: var(--clr-text-secondary);
}
.no-chat-input__file-info {
  flex: 1;
  min-width: 0;
  padding: 0.8rem 1rem;
  background: var(--clr-bg-elevated);
}
@media (max-width: 544px) {
  .no-chat-input__file-info {
    padding: 1rem 1.2rem;
  }
}
.no-chat-input__file-name {
  display: block;
  font-size: clamp(1.2rem, 0.0647249191vw + 1.1757281553rem, 1.3rem);
  font-weight: 500;
  color: var(--clr-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0.4rem;
  line-height: 1.4;
}
.no-chat-input__file-name span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}
.no-chat-input__file-size {
  font-size: clamp(1.1rem, 0.0647249191vw + 1.0757281553rem, 1.2rem);
  color: var(--clr-text-tertiary);
  line-height: 1.4;
  font-weight: 400;
}
.no-chat-input__file-remove {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.75);
  color: var(--clr-base-white);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: clamp(1.2rem, 0.1294498382vw + 1.1514563107rem, 1.4rem);
  z-index: 10;
  backdrop-filter: blur(0.6rem);
  box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.2);
}
@media (max-width: 544px) {
  .no-chat-input__file-remove {
    top: 0.8rem;
    right: 0.8rem;
    width: 2.8rem;
    height: 2.8rem;
  }
}
@media (max-width: 768px) {
  .no-chat-input__file-remove:hover {
    background: var(--clr-danger-600);
    transform: scale(1.1);
    box-shadow: 0 0.4rem 1.2rem rgba(239, 68, 68, 0.4);
  }
}
.no-chat-input__file-remove:active {
  transform: scale(0.95);
  background: var(--clr-danger-700);
}
.no-chat-input__file-remove:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(239, 68, 68, 0.4);
}
.no-chat-input__textarea-wrapper {
  flex: 1;
  position: relative;
  min-width: 0;
  padding: 1.2rem;
}
@media (max-width: 768px) {
  .no-chat-input__textarea-wrapper {
    padding: 1.6rem;
  }
}
.no-chat-input__textarea {
  width: 100%;
  min-height: 4.4rem;
  max-height: 20rem;
  padding: 0.8rem 1rem;
  font-size: clamp(1.4rem, 0vw + 1.4rem, 1.4rem);
  line-height: 1.6;
  border: none;
  border-radius: 0;
  background-color: transparent;
  color: var(--clr-chat-text);
  resize: none;
  overflow-y: auto;
  transition: all 0.2s ease;
  font-family: inherit;
}
@media (max-width: 544px) {
  .no-chat-input__textarea {
    min-height: 6rem;
    padding: 1rem 1.2rem;
  }
}
@media (max-width: 768px) {
  .no-chat-input__textarea {
    min-height: 8rem;
  }
}
.no-chat-input__textarea:focus {
  outline: none;
}
.no-chat-input__textarea::placeholder {
  color: var(--clr-chat-placeholder);
}
.no-chat-input__bottom-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.8rem 1.2rem;
  background: var(--clr-chat-bg-bar);
  border-top: 0.1rem solid var(--clr-chat-border);
  gap: 1rem;
}
@media (max-width: 768px) {
  .no-chat-input__bottom-bar {
    padding: 1rem 1.6rem;
  }
}
.no-chat-input__left-actions, .no-chat-input__right-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
@media (max-width: 544px) {
  .no-chat-input__left-actions, .no-chat-input__right-actions {
    gap: 0.8rem;
  }
}
.no-chat-input__left-actions {
  flex: 1;
}
.no-chat-input__right-actions {
  flex-shrink: 0;
}
.no-chat-input__file-input {
  display: none;
}
.no-chat-input__attach, .no-chat-input__image, .no-chat-input__send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  padding: 0;
  border: none;
  border-radius: 0.8rem;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: clamp(1.4rem, 0.1294498382vw + 1.3514563107rem, 1.6rem);
  flex-shrink: 0;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  background: var(--clr-chat-button-bg);
  color: var(--clr-chat-button-text);
}
@media (max-width: 544px) {
  .no-chat-input__attach, .no-chat-input__image, .no-chat-input__send {
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 1rem;
  }
}
@media (max-width: 768px) {
  .no-chat-input__attach, .no-chat-input__image, .no-chat-input__send {
    width: 4rem;
    height: 4rem;
  }
}
@media (max-width: 768px) {
  .no-chat-input__attach:hover, .no-chat-input__image:hover, .no-chat-input__send:hover {
    background: var(--clr-chat-button-hover);
    color: var(--clr-text-primary);
  }
}
.no-chat-input__attach:active, .no-chat-input__image:active, .no-chat-input__send:active {
  background: var(--clr-chat-button-hover);
  color: var(--clr-text-primary);
  transform: scale(0.95);
}
.no-chat-input__attach:focus, .no-chat-input__image:focus, .no-chat-input__send:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.3);
}
.no-chat-input__send {
  background: var(--clr-primary-600);
  color: var(--clr-base-white);
  min-width: 3.2rem;
  width: auto;
  padding: 0 0.8rem;
}
@media (max-width: 768px) {
  .no-chat-input__send:hover {
    background: var(--clr-primary-700);
    transform: translateY(-0.2rem);
    box-shadow: 0 0.4rem 1.2rem rgba(37, 99, 235, 0.3);
  }
}
.no-chat-input__send:active {
  background: var(--clr-primary-700);
  transform: scale(0.95);
}
.no-chat-input__send:disabled {
  background: var(--clr-gray-300);
  color: var(--clr-gray-500);
  cursor: not-allowed;
  transform: none;
}
.no-chat-input__send:disabled:hover {
  transform: none;
  box-shadow: none;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}
/**
 * Product Settings Component Styles
 * 제품 설정 탭 및 폼 스타일
 */
.no-product-settings {
  margin-top: 3rem;
  background: var(--color-bg-secondary, #ffffff);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  border: 1px solid var(--color-border, #e5e7eb);
}
.no-product-settings__header {
  padding: 2rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #ffffff;
}
@media (max-width: 768px) {
  .no-product-settings__header {
    padding: 1.5rem;
  }
}
.no-product-settings__title {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 0.5rem 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: #ffffff;
}
.no-product-settings__title i {
  font-size: 1.25rem;
}
.no-product-settings__subtitle {
  margin: 0;
  opacity: 0.9;
  font-size: 0.95rem;
}
.no-product-settings__tabs {
  display: flex;
  background: var(--clr-bg-primary, #f9fafb);
  border-bottom: 2px solid var(--clr-border-primary, #e5e7eb);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.no-product-settings__tabs::-webkit-scrollbar {
  height: 4px;
}
.no-product-settings__tabs::-webkit-scrollbar-track {
  background: transparent;
}
.no-product-settings__tabs::-webkit-scrollbar-thumb {
  background: var(--clr-border-primary, #e5e7eb);
  border-radius: 2px;
}
.no-product-settings__tab {
  flex: 0 0 auto;
  padding: 1rem 1.5rem;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-text-secondary, #6b7280);
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  position: relative;
}
.no-product-settings__tab i {
  font-size: 1rem;
}
.no-product-settings__tab:hover {
  color: var(--color-primary, #667eea);
  background: rgba(102, 126, 234, 0.05);
}
.no-product-settings__tab.active {
  color: var(--color-primary, #667eea);
  border-bottom-color: var(--color-primary, #667eea);
  background: var(--color-bg-secondary, #ffffff);
  font-weight: 600;
}
@media (max-width: 768px) {
  .no-product-settings__tab {
    padding: 0.875rem 1.25rem;
    font-size: 0.875rem;
  }
}
.no-product-settings__content {
  position: relative;
}
.no-product-settings__panel {
  display: none;
  padding: 2rem;
  animation: fadeIn 0.3s ease;
}
.no-product-settings__panel.active {
  display: block;
}
@media (max-width: 768px) {
  .no-product-settings__panel {
    padding: 1.5rem;
  }
}
.no-product-settings__panel-header {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 2px solid var(--color-border, #e5e7eb);
}
.no-product-settings__panel-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 0.5rem 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--color-text, #111827);
}
.no-product-settings__panel-title i {
  color: var(--color-primary, #667eea);
  font-size: 1.125rem;
}
.no-product-settings__panel-desc {
  margin: 0;
  color: var(--color-text-secondary, #6b7280);
  font-size: 0.95rem;
  line-height: 1.6;
}
.no-product-settings__panel-actions {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border, #e5e7eb);
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.no-product-settings__empty {
  text-align: center;
  padding: 3rem 2rem;
  color: var(--color-text-secondary, #6b7280);
}
.no-product-settings__empty i {
  font-size: 3rem;
  color: var(--color-border, #e5e7eb);
  margin-bottom: 1rem;
  display: block;
}
.no-product-settings__empty p {
  margin: 0 0 1.5rem 0;
  font-size: 1rem;
}

.no-loupe-form__section {
  margin-bottom: 2.5rem;
  padding: 1.5rem;
  background: var(--clr-bg-secondary, #f9fafb);
  border-radius: 8px;
  border: 1px solid var(--clr-border-primary, #e5e7eb);
  transition: all 0.2s ease;
}
.no-loupe-form__section:hover {
  border-color: var(--clr-primary-500, #667eea);
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1);
}
.no-loupe-form__section:last-child {
  margin-bottom: 0;
}
.no-loupe-form__section.is-disabled {
  opacity: 0.5;
  pointer-events: none;
  background: var(--clr-bg-tertiary, #f3f4f6);
  border-color: var(--clr-border-secondary, #d1d5db);
}
.no-loupe-form__section.is-disabled:hover {
  border-color: var(--clr-border-secondary, #d1d5db);
  box-shadow: none;
}
.no-loupe-form__section.is-disabled .no-loupe-form__section-title {
  color: var(--clr-text-tertiary, #9ca3af);
}
.no-loupe-form__section.is-disabled .no-loupe-form__section-title i {
  color: var(--clr-text-tertiary, #9ca3af);
}
.no-loupe-form__section.is-disabled .no-form-field {
  opacity: 0.6;
}
.no-loupe-form__section.is-disabled .no-form-field__label {
  color: var(--clr-text-tertiary, #9ca3af);
}
.no-loupe-form__section.is-disabled .no-form-field__input {
  background: var(--clr-bg-tertiary, #f3f4f6);
  cursor: not-allowed;
  color: var(--clr-text-tertiary, #9ca3af);
}
.no-loupe-form__section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 1rem;
}
@media (max-width: 768px) {
  .no-loupe-form__section-header {
    flex-direction: column;
    align-items: flex-start;
  }
}
.no-loupe-form__section-title {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--clr-text-primary, #111827);
}
.no-loupe-form__section-title i {
  color: var(--clr-primary-500, #667eea);
  font-size: 1rem;
}

.no-form-field.disabled {
  opacity: 0.5;
  pointer-events: none;
}
.no-form-field.disabled label {
  color: var(--clr-text-secondary, #6b7280);
}
.no-form-field.disabled input,
.no-form-field.disabled select,
.no-form-field.disabled textarea {
  background: var(--clr-bg-secondary, #f9fafb);
  cursor: not-allowed;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.product-setting-default-lens-block {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.product-setting-default-lens-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}
@media (min-width: 576px) {
  .product-setting-default-lens-actions {
    gap: 1rem;
  }
}
@media (min-width: 768px) {
  .product-setting-default-lens-actions {
    gap: 1.25rem;
  }
}

.product-setting-selected-card__placeholder {
  display: block;
  color: var(--color-text-secondary, #6b7280);
  font-size: 0.9375rem;
  padding: 0.5rem 0;
}
.product-setting-selected-card__inner {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 1rem;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 8px;
  background: var(--color-bg-secondary, #f9fafb);
}
@media (max-width: 480px) {
  .product-setting-selected-card__inner {
    flex-direction: column;
    gap: 1rem;
  }
}
.product-setting-selected-card__thumb-wrap {
  flex-shrink: 0;
  width: 200px;
  aspect-ratio: 16/10;
  border-radius: 6px;
  overflow: hidden;
  background: var(--color-border, #e5e7eb);
}
.product-setting-selected-card__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.product-setting-selected-card__body {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.product-setting-selected-card__row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 1.125rem;
  line-height: 1.45;
}
.product-setting-selected-card__row--price {
  margin-top: 0.25rem;
}
.product-setting-selected-card__label {
  flex-shrink: 0;
  min-width: 4.5em;
  color: var(--color-text-secondary, #6b7280);
  font-size: 1.0625rem;
}
.product-setting-selected-card__value {
  font-size: 1.125rem;
  color: var(--color-text, #111827);
  word-break: break-word;
}
.product-setting-selected-card__price {
  font-weight: 700;
  font-size: 1.3125rem;
  color: var(--color-primary, #4f46e5);
}

/**
 * Color Settings Component Styles
 * 컬러 설정 목록 스타일
 */
.no-color-settings {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.no-color-form {
  background: var(--clr-bg-elevated);
  border: 1px solid var(--clr-border-primary);
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.no-color-form__header {
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--clr-border-primary);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.no-color-form__title {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0;
  color: var(--clr-text-primary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: color 0.2s ease;
}
.no-color-form__title i {
  color: var(--clr-primary-500);
  font-size: 1.375rem;
  transition: color 0.2s ease;
}
.no-color-form__hex-group {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
@media (max-width: 768px) {
  .no-color-form__hex-group {
    flex-direction: column;
  }
}
.no-color-form__hex-picker {
  width: 100px;
  height: 40px;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 6px;
  overflow: hidden;
}
@media (max-width: 768px) {
  .no-color-form__hex-picker {
    width: 100%;
    height: 50px;
  }
}
.no-color-form__hex-text {
  flex: 1;
  font-family: "Courier New", monospace;
  text-transform: uppercase;
}

.no-color-settings__list-wrapper {
  margin-top: 1rem;
}

.no-color-settings__list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--clr-border, #e5e7eb);
}
.no-color-settings__list-title {
  font-size: clamp(1.4rem, 0.1294498382vw + 1.3514563107rem, 1.6rem);
  font-weight: 600;
  margin: 0;
  color: var(--clr-text-primary);
}
.no-color-settings__count {
  font-size: clamp(1.2rem, 0.1294498382vw + 1.1514563107rem, 1.4rem);
  color: var(--clr-primary-500);
  background: var(--clr-bg-secondary);
  padding: 0.5rem 1rem;
  border: 1px solid var(--clr-primary-500);
  border-radius: 12px;
  font-weight: 500;
}
.no-color-settings__list-outer {
  position: relative;
  min-height: 120px;
}
.no-color-settings__list {
  display: grid;
  gap: 1rem;
}
.no-color-settings__list-loader {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 8px;
  z-index: 10;
  font-size: 1rem;
  color: var(--clr-text-secondary);
}
.no-color-settings__list-loader i {
  font-size: 1.5rem;
  color: var(--clr-primary-500);
}
.no-color-settings__empty {
  text-align: center;
  padding: 3rem 2rem;
  background: var(--clr-bg-secondary);
  border-radius: 8px;
  border: 2px dashed var(--clr-border-primary);
}
.no-color-settings__empty i {
  font-size: 3rem;
  color: var(--clr-border-primary);
  margin-bottom: 1rem;
  display: block;
}
.no-color-settings__empty p {
  margin: 0 0 1.5rem 0;
  color: var(--clr-text-secondary);
  font-size: 1.125rem;
}

.no-color-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem;
  background: var(--clr-bg-elevated);
  border: 1px solid var(--clr-border-primary);
  border-radius: 8px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.no-color-item:hover {
  border-color: var(--clr-primary-500);
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1);
  transform: translateY(-2px);
  background: var(--clr-bg-secondary);
}
.no-color-item--ghost {
  opacity: 0.4;
  background: var(--clr-bg-secondary);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.no-color-item--drag {
  opacity: 1;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  z-index: 100;
}
.no-color-item__drag-handle {
  flex-shrink: 0;
  width: 28px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-text-tertiary);
  cursor: grab;
  border-radius: 4px;
  transition: color 0.2s, background 0.2s;
}
.no-color-item__drag-handle:hover {
  color: var(--clr-primary-500);
  background: var(--clr-bg-secondary);
}
.no-color-item__drag-handle:active {
  cursor: grabbing;
}
.no-color-item__preview {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  border: 2px solid var(--clr-border-primary);
  flex-shrink: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: border-color 0.2s ease;
}
.no-color-item__info {
  flex: 1;
  min-width: 0;
}
.no-color-item__name {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--clr-text-primary);
  margin-bottom: 0.5rem;
  transition: color 0.2s ease;
}
.no-color-item__meta {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 1rem;
  color: var(--clr-text-secondary);
  margin-bottom: 0.75rem;
  transition: color 0.2s ease;
}
.no-color-item__code, .no-color-item__hex, .no-color-item__sort-order {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.no-color-item__images {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--clr-border-primary);
  transition: border-color 0.2s ease;
}
.no-color-item__images-list {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}
.no-color-item__image-item {
  width: 60px;
  height: 60px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--clr-border-primary);
  flex-shrink: 0;
  background: var(--clr-bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.no-color-item__image-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.no-color-item__image-more {
  width: 60px;
  height: 60px;
  border-radius: 6px;
  border: 1px solid var(--clr-border-primary);
  background: var(--clr-bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--clr-text-secondary);
  flex-shrink: 0;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.no-color-item__images-count {
  font-size: 0.875rem;
  color: var(--clr-text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  transition: color 0.2s ease;
}
.no-color-item__images-count::before {
  content: "📷";
  font-size: 1rem;
}
.no-color-item__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .no-color-item__actions {
    flex-direction: column;
    width: 100%;
  }
}
.no-color-item__order-btns {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  margin-right: 0.5rem;
  padding: 2px;
  border-radius: 8px;
  border: 1px solid var(--clr-border-primary);
  background: var(--clr-bg-secondary);
  flex-shrink: 0;
}
.no-color-item__order-btns .no-btn {
  min-width: 2.25rem;
  width: 2.25rem;
  height: 2rem;
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border-radius: 6px;
  color: var(--clr-text-secondary);
  transition: color 0.2s ease, background-color 0.2s ease;
}
.no-color-item__order-btns .no-btn:hover {
  color: var(--clr-primary-600);
  background: var(--clr-primary-50, rgba(102, 126, 234, 0.08));
}
.no-color-item__order-btns .no-btn:focus-visible {
  outline: 2px solid var(--clr-primary-500);
  outline-offset: 2px;
}
.no-color-item__order-btns .no-btn i {
  font-size: 0.8125rem;
  pointer-events: none;
}
@media (min-width: 769px) {
  .no-color-item__order-btns .no-btn {
    width: 2.5rem;
    height: 2.25rem;
    min-width: 2.5rem;
  }
  .no-color-item__order-btns .no-btn i {
    font-size: 0.875rem;
  }
}
@media (max-width: 768px) {
  .no-color-item__order-btns {
    margin-right: 0.5rem;
  }
  .no-color-item__order-btns .no-btn {
    min-width: 44px;
    width: 2.75rem;
    min-height: 44px;
    height: 2.75rem;
  }
  .no-color-item__order-btns .no-btn i {
    font-size: 0.875rem;
  }
}
.no-color-item__delete-form {
  display: inline-block;
}
@media (max-width: 768px) {
  .no-color-item {
    flex-direction: column;
    align-items: stretch;
  }
  .no-color-item__preview {
    width: 100%;
    height: 80px;
  }
  .no-color-item__actions {
    width: 100%;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-end;
    gap: 0.5rem;
  }
  .no-color-item__actions .no-btn {
    flex: 1;
    min-width: fit-content;
  }
  .no-color-item__actions .no-color-item__order-btns {
    flex: 0 0 auto;
  }
  .no-color-item__actions .no-color-item__order-btns .no-btn {
    flex: none;
  }
}

[data-theme=dark] .no-color-form {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
[data-theme=dark] .no-color-item:hover {
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
}
[data-theme=dark] .no-color-item__preview {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

[data-theme=light] .no-color-form {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
[data-theme=light] .no-color-item:hover {
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1);
}
[data-theme=light] .no-color-item__preview {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/**
 * 제품 템플릿 — 리비전 관리 (이력 카드 + 편집 다이얼로그)
 */
.no-revision-settings__change {
  margin-bottom: 2.5rem;
}
.no-revision-settings__history {
  margin-top: 0.5rem;
}

.no-revision-history {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
}
.no-revision-history__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1.35rem;
}
.no-revision-history__head .no-form-section__title {
  font-size: 1.55rem;
  line-height: 1.25;
}
.no-revision-history__bulk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.9rem;
  padding: 0.8rem 0 1.1rem;
  border-bottom: 1px solid var(--clr-border-primary);
  margin-bottom: 1.2rem;
}
.no-revision-history__bulk-actions {
  display: flex;
  gap: 0.65rem;
  flex-wrap: wrap;
}
.no-revision-history__count {
  font-size: 1.125rem;
  color: var(--clr-text-muted);
  font-weight: 600;
}
.no-revision-history__empty {
  margin: 0;
  padding: 2rem 1.5rem;
  text-align: center;
  color: var(--clr-text-muted);
  background: var(--clr-bg-elevated);
  border: 1px dashed var(--clr-border-primary);
  border-radius: 14px;
}
.no-revision-history__card {
  background: var(--clr-bg-elevated);
  border: 1px solid var(--clr-border-primary);
  border-radius: 16px;
  padding: 1.75rem 1.65rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.no-revision-history__card:hover {
  border-color: var(--clr-border-strong, var(--clr-border-primary));
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.07);
}
.no-revision-history__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem 1rem;
  margin-bottom: 0.95rem;
  flex-wrap: wrap;
}
.no-revision-history__select {
  margin-bottom: 0;
}
.no-revision-history__select .no-form-field__checkbox-group {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.95rem;
  color: var(--clr-text-muted);
}
.no-revision-history__time {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--clr-text-secondary);
  font-variant-numeric: tabular-nums;
}
.no-revision-history__flow {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  padding: 0;
}
.no-revision-history__rev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.9rem;
  padding: 0.38rem 0.85rem;
  font-size: 1.12rem;
  font-weight: 700;
  font-family: ui-monospace, monospace;
  border-radius: 8px;
  line-height: 1.2;
}
.no-revision-history__rev--from {
  background: rgba(148, 163, 184, 0.16);
  color: var(--clr-text-primary);
  border: 1px solid rgba(148, 163, 184, 0.28);
}
.no-revision-history__rev--to {
  background: rgba(59, 130, 246, 0.2);
  color: var(--clr-primary-600, var(--clr-primary-500));
  border: 1px solid rgba(59, 130, 246, 0.5);
}
.no-revision-history__arrow {
  color: var(--clr-text-muted);
  font-size: 1rem;
  opacity: 0.85;
}
.no-revision-history__meta {
  margin-bottom: 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem 1.2rem;
}
.no-revision-history__changed-at {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 1rem;
  color: var(--clr-text-secondary);
}
.no-revision-history__user {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 1.05rem;
  color: var(--clr-text-muted);
}
.no-revision-history__user i {
  opacity: 0.75;
}
.no-revision-history__reason {
  font-size: 1.15rem;
  line-height: 1.62;
  color: var(--clr-text-primary);
  margin-bottom: 1.25rem;
  padding: 1.1rem 1.2rem;
  background: var(--clr-bg-elevated);
  border-radius: 10px;
  border: 1px solid var(--clr-border-primary);
  word-break: break-word;
}
.no-revision-history__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: flex-end;
}

.no-revision-dialog {
  max-width: min(760px, 100vw - 2rem);
  width: 100%;
  max-height: calc(100vh - 2rem);
  padding: 0;
  border: none;
  border-radius: 16px;
  background: var(--clr-bg-elevated);
  color: var(--clr-text-primary);
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  z-index: 10010;
  overflow: auto;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.18), 0 0 0 1px var(--clr-border-primary);
}
.no-revision-dialog::backdrop {
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
}
.no-revision-dialog__inner {
  padding: 1.75rem 1.75rem 1.5rem;
}
.no-revision-dialog__title {
  margin: 0 0 1.2rem;
  font-size: 1.3rem;
  font-weight: 600;
}
.no-revision-dialog__form {
  margin: 0;
}
.no-revision-dialog__footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 1.4rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--clr-border-primary);
}

/**
 * Option Settings Component Styles
 * 옵션 설정 목록 스타일
 */
.no-option-settings {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.no-option-form {
  background: var(--clr-bg-secondary, #ffffff);
  border: 1px solid var(--clr-border-primary);
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.no-option-form__header {
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--clr-border-primary);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.no-option-form__title {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0;
  color: var(--clr-text-primary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.no-option-form__title i {
  color: var(--clr-primary-500);
  font-size: 1.375rem;
}

.no-option-settings__list-wrapper {
  margin-top: 1rem;
}

.no-option-settings__list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--clr-border-primary);
}
.no-option-settings__list-title {
  font-size: 1.375rem;
  font-weight: 600;
  margin: 0;
  color: var(--clr-text-primary);
}
.no-option-settings__count {
  font-size: 1rem;
  color: var(--clr-text-secondary);
  background: var(--clr-bg-secondary);
  padding: 0.5rem 1rem;
  border-radius: 12px;
  font-weight: 500;
}
.no-option-settings__list {
  display: grid;
  gap: 1rem;
}
.no-option-settings__empty {
  text-align: center;
  padding: 3rem 2rem;
  background: var(--clr-bg-secondary);
  border-radius: 8px;
  border: 2px dashed var(--clr-border-primary);
}
.no-option-settings__empty i {
  font-size: 3rem;
  color: var(--clr-border-primary);
  margin-bottom: 1rem;
  display: block;
}
.no-option-settings__empty p {
  margin: 0 0 1.5rem 0;
  color: var(--clr-text-secondary);
  font-size: 1.125rem;
}

.no-option-card {
  background: var(--clr-bg-secondary, #ffffff);
  border: 1px solid var(--clr-border-primary);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.2s ease;
}
.no-option-card:hover {
  border-color: var(--clr-primary-500);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.1);
}
.no-option-card__header {
  padding: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.no-option-card__header:hover {
  background: var(--clr-bg-secondary);
}
.no-option-card__header[data-option-toggle] {
  cursor: pointer;
}
.no-option-card__header-left {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1;
  min-width: 0;
}
.no-option-card__header-actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}
.no-option-card__toggle {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: all 0.2s ease;
  color: var(--clr-text-secondary);
  flex-shrink: 0;
}
.no-option-card__toggle:hover {
  background: var(--clr-bg-secondary);
  color: var(--clr-primary-500);
}
.no-option-card__toggle i {
  transition: transform 0.2s ease;
}
.no-option-card__toggle[aria-expanded=true] i {
  transform: rotate(180deg);
}
.no-option-card__title-group {
  flex: 1;
  min-width: 0;
}
.no-option-card__name {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--clr-text-primary);
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.no-option-card__required-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.5rem;
  background: var(--clr-danger-500);
  color: #ffffff;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}
.no-option-card__meta {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.875rem;
  color: var(--clr-text-secondary);
}
.no-option-card__code, .no-option-card__sort-order, .no-option-card__items-count {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.no-option-card__body {
  padding: 0 1.5rem 1.5rem 1.5rem;
  border-top: 1px solid var(--clr-border-primary);
  margin-top: 0;
}
.no-option-card__description {
  padding: 1rem;
  background: var(--clr-bg-secondary);
  border-radius: 8px;
  margin-bottom: 1.5rem;
  color: var(--clr-text-secondary);
  font-size: 0.9375rem;
  line-height: 1.6;
}
.no-option-card__delete-form {
  display: inline-block;
}

.no-option-item-form {
  background: var(--clr-bg-secondary);
  border: 1px solid var(--clr-border-primary);
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
.no-option-item-form__header {
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--clr-border-primary);
}
.no-option-item-form__title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  color: var(--clr-text-primary);
}

.no-option-item-list-wrapper {
  margin-top: 1.5rem;
}

.no-option-item-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--clr-border-primary);
}

.no-option-item-list-title {
  font-size: 0.9375rem;
  font-weight: 600;
  margin: 0;
  color: var(--clr-text-primary);
}

.no-option-item-count {
  font-size: 0.875rem;
  color: var(--clr-text-secondary);
  background: var(--clr-bg-secondary);
  padding: 0.375rem 0.75rem;
  border-radius: 8px;
  font-weight: 500;
}

.no-option-item-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.no-option-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  background: var(--clr-bg-secondary, #ffffff);
  border: 1px solid var(--clr-border-primary);
  border-radius: 8px;
  transition: all 0.2s ease;
}
.no-option-item-row__info {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1;
  min-width: 0;
}
.no-option-item-row__preview {
  position: relative;
  flex-shrink: 0;
  width: 4.8rem;
  height: 4.8rem;
  border-radius: 0.6rem;
  overflow: hidden;
  background: var(--clr-bg-tertiary, #f3f4f6);
  border: 0.1rem solid var(--clr-border-primary);
}
.no-option-item-row__preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.no-option-item-row__preview-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-text-tertiary);
  font-size: 1.6rem;
}
.no-option-item-row__preview-count {
  position: absolute;
  top: 0.2rem;
  right: 0.2rem;
  background: rgba(0, 0, 0, 0.7);
  color: #ffffff;
  font-size: 1rem;
  font-weight: 600;
  padding: 0.2rem 0.4rem;
  border-radius: 0.4rem;
  line-height: 1;
}
.no-option-item-row__content {
  flex: 1;
  min-width: 0;
}
.no-option-item-row:hover {
  border-color: var(--clr-primary-500);
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1);
}
.no-option-item-row__info {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1;
  min-width: 0;
}
.no-option-item-row__preview {
  position: relative;
  flex-shrink: 0;
  width: 4.8rem;
  height: 4.8rem;
  border-radius: 0.6rem;
  overflow: hidden;
  background: var(--clr-bg-tertiary, #f3f4f6);
  border: 0.1rem solid var(--clr-border-primary);
}
.no-option-item-row__preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.no-option-item-row__preview-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-text-tertiary);
  font-size: 1.6rem;
}
.no-option-item-row__preview-count {
  position: absolute;
  top: 0.2rem;
  right: 0.2rem;
  background: rgba(0, 0, 0, 0.7);
  color: #ffffff;
  font-size: 1rem;
  font-weight: 600;
  padding: 0.2rem 0.4rem;
  border-radius: 0.4rem;
  line-height: 1;
}
.no-option-item-row__content {
  flex: 1;
  min-width: 0;
}
.no-option-item-row__name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--clr-text-primary);
  margin-bottom: 0.5rem;
}
.no-option-item-row__meta {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.875rem;
  color: var(--clr-text-secondary);
}
.no-option-item-row__code, .no-option-item-row__price, .no-option-item-row__sort-order {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.no-option-item-row__price {
  color: var(--clr-success-500);
  font-weight: 600;
}
.no-option-item-row__actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}
.no-option-item-row__delete-form {
  display: inline-block;
}

.no-option-item-empty {
  text-align: center;
  padding: 2rem 1rem;
  background: var(--clr-bg-secondary);
  border-radius: 8px;
  border: 2px dashed var(--clr-border-primary);
}
.no-option-item-empty i {
  font-size: 2rem;
  color: var(--clr-border-primary);
  margin-bottom: 0.75rem;
  display: block;
}
.no-option-item-empty p {
  margin: 0;
  color: var(--clr-text-secondary);
  font-size: 0.9375rem;
}

@media (max-width: 768px) {
  .no-option-card__header {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }
  .no-option-card__header-left {
    flex-direction: column;
    align-items: stretch;
  }
  .no-option-card__header-actions {
    width: 100%;
  }
  .no-option-card__header-actions .no-btn {
    flex: 1;
  }
  .no-option-item-row {
    flex-direction: column;
    align-items: stretch;
  }
  .no-option-item-row__actions {
    width: 100%;
  }
  .no-option-item-row__actions .no-btn {
    flex: 1;
  }
}
.no-notice-view {
  background: var(--clr-bg-elevated);
  border-radius: 1rem;
  border: 0.1rem solid var(--clr-border-primary);
  overflow: hidden;
}
.no-notice-view__header {
  padding: 1.6rem 2rem;
  border-bottom: 0.1rem solid var(--clr-border-secondary);
  background: var(--clr-bg-tertiary);
}
@media (max-width: 544px) {
  .no-notice-view__header {
    padding: 2rem 2.4rem;
  }
}
@media (max-width: 768px) {
  .no-notice-view__header {
    padding: 2.4rem 3.2rem;
  }
}
.no-notice-view__header-top {
  margin-bottom: 1.2rem;
}
@media (max-width: 768px) {
  .no-notice-view__header-top {
    margin-bottom: 1.6rem;
  }
}
.no-notice-view__title-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
}
@media (max-width: 544px) {
  .no-notice-view__title-wrapper {
    gap: 1.2rem;
  }
}
.no-notice-view__title {
  font-size: clamp(1.8rem, 0.3883495146vw + 1.654368932rem, 2.4rem);
  font-weight: 700;
  color: var(--clr-text-primary);
  margin: 0;
  line-height: 1.4;
  flex: 1;
  min-width: 0;
}
@media (max-width: 768px) {
  .no-notice-view__title {
    font-size: clamp(2rem, 0.3883495146vw + 1.854368932rem, 2.6rem);
  }
}
.no-notice-view__pinned-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.8rem;
  background: var(--clr-warning-100);
  color: var(--clr-warning-700);
  border-radius: 0.6rem;
  font-size: clamp(1.2rem, 0.0647249191vw + 1.1757281553rem, 1.3rem);
  font-weight: 600;
  white-space: nowrap;
}
.no-notice-view__pinned-badge i {
  font-size: clamp(1.1rem, 0.0647249191vw + 1.0757281553rem, 1.2rem);
}
.no-notice-view__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem 2rem;
  font-size: clamp(1.3rem, 0.0647249191vw + 1.2757281553rem, 1.4rem);
  color: var(--clr-text-secondary);
}
@media (max-width: 544px) {
  .no-notice-view__meta {
    gap: 1.6rem 2.4rem;
  }
}
.no-notice-view__meta-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.no-notice-view__meta-label {
  font-weight: 500;
  color: var(--clr-text-tertiary);
}
.no-notice-view__meta-value {
  color: var(--clr-text-secondary);
}
.no-notice-view__content {
  padding: 1.6rem 2rem;
  border-bottom: 0.1rem solid var(--clr-border-secondary);
}
@media (max-width: 544px) {
  .no-notice-view__content {
    padding: 2rem 2.4rem;
  }
}
@media (max-width: 768px) {
  .no-notice-view__content {
    padding: 2.4rem 3.2rem;
  }
}
.no-notice-view__content-body {
  font-size: clamp(1.4rem, 0.1294498382vw + 1.3514563107rem, 1.6rem);
  line-height: 1.75;
  color: var(--clr-text-primary);
  white-space: pre-wrap;
  word-break: break-word;
}
.no-notice-view__content-body :deep(img) {
  max-width: 100%;
  height: auto;
  border-radius: 0.8rem;
  margin: 1.6rem 0;
}
.no-notice-view__content-body :deep(p) {
  margin: 1.2rem 0;
  line-height: 1.75;
}
.no-notice-view__content-body :deep(p):first-child {
  margin-top: 0;
}
.no-notice-view__content-body :deep(p):last-child {
  margin-bottom: 0;
}
.no-notice-view__content-body :deep(h1),
.no-notice-view__content-body :deep(h2),
.no-notice-view__content-body :deep(h3),
.no-notice-view__content-body :deep(h4),
.no-notice-view__content-body :deep(h5),
.no-notice-view__content-body :deep(h6) {
  margin: 2rem 0 1.2rem;
  font-weight: 700;
  color: var(--clr-text-primary);
  line-height: 1.4;
}
.no-notice-view__content-body :deep(h1):first-child,
.no-notice-view__content-body :deep(h2):first-child,
.no-notice-view__content-body :deep(h3):first-child,
.no-notice-view__content-body :deep(h4):first-child,
.no-notice-view__content-body :deep(h5):first-child,
.no-notice-view__content-body :deep(h6):first-child {
  margin-top: 0;
}
.no-notice-view__content-body :deep(ul),
.no-notice-view__content-body :deep(ol) {
  margin: 1.2rem 0;
  padding-left: 2rem;
}
.no-notice-view__content-body :deep(li) {
  margin: 0.6rem 0;
}
.no-notice-view__content-body :deep(a) {
  color: var(--clr-primary-600);
  text-decoration: underline;
}
.no-notice-view__content-body :deep(a):hover {
  color: var(--clr-primary-700);
}
.no-notice-view__content-body :deep(blockquote) {
  margin: 1.6rem 0;
  padding: 1.2rem 1.6rem;
  border-left: 0.4rem solid var(--clr-border-primary);
  background: var(--clr-bg-secondary);
  border-radius: 0.4rem;
  font-style: italic;
}
.no-notice-view__content-body :deep(code) {
  padding: 0.2rem 0.4rem;
  background: var(--clr-bg-secondary);
  border-radius: 0.4rem;
  font-family: monospace;
  font-size: 0.9em;
}
.no-notice-view__content-body :deep(pre) {
  margin: 1.6rem 0;
  padding: 1.2rem;
  background: var(--clr-bg-secondary);
  border-radius: 0.8rem;
  overflow-x: auto;
}
.no-notice-view__content-body :deep(pre) code {
  background: transparent;
  padding: 0;
}
.no-notice-view__attachments {
  padding: 1.6rem 2rem;
  border-bottom: 0.1rem solid var(--clr-border-secondary);
  background: var(--clr-bg-secondary);
}
@media (max-width: 544px) {
  .no-notice-view__attachments {
    padding: 2rem 2.4rem;
  }
}
@media (max-width: 768px) {
  .no-notice-view__attachments {
    padding: 2.4rem 3.2rem;
  }
}
.no-notice-view__attachments-title {
  font-size: clamp(1.5rem, 0.1941747573vw + 1.427184466rem, 1.8rem);
  font-weight: 600;
  color: var(--clr-text-primary);
  margin: 0 0 1.2rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
@media (max-width: 768px) {
  .no-notice-view__attachments-title {
    margin-bottom: 1.6rem;
  }
}
.no-notice-view__attachments-title i {
  color: var(--clr-text-tertiary);
  font-size: clamp(1.4rem, 0.1294498382vw + 1.3514563107rem, 1.6rem);
}
.no-notice-view__attachments-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media (max-width: 544px) {
  .no-notice-view__attachments-list {
    gap: 1.2rem;
  }
}
.no-notice-view__attachment-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.2rem;
  background: var(--clr-bg-elevated);
  border: 0.1rem solid var(--clr-border-primary);
  border-radius: 0.8rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
@media (max-width: 544px) {
  .no-notice-view__attachment-item {
    gap: 1.2rem;
    padding: 1.2rem 1.6rem;
  }
}
@media (max-width: 768px) {
  .no-notice-view__attachment-item {
    padding: 1.2rem 1.6rem;
  }
  .no-notice-view__attachment-item:hover {
    background: var(--clr-bg-primary);
    border-color: var(--clr-primary-300);
    box-shadow: 0 0.2rem 0.6rem rgba(37, 99, 235, 0.08);
  }
}
.no-notice-view__attachment-preview {
  width: 4.8rem;
  height: 4.8rem;
  flex-shrink: 0;
  border-radius: 0.6rem;
  overflow: hidden;
  background: var(--clr-bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 544px) {
  .no-notice-view__attachment-preview {
    width: 5.6rem;
    height: 5.6rem;
  }
}
.no-notice-view__attachment-preview-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.no-notice-view__attachment-preview-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.no-notice-view__attachment-preview-audio {
  width: 100%;
  max-height: 100%;
}
.no-notice-view__attachment-preview-doc {
  width: 100%;
  height: 100%;
  min-height: 4rem;
  object-fit: contain;
}
.no-notice-view__attachment-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 3.2rem;
  color: var(--clr-text-tertiary);
  font-size: clamp(1.8rem, 0.2588996764vw + 1.7029126214rem, 2.2rem);
}
.no-notice-view__attachment-info {
  flex: 1;
  min-width: 0;
}
.no-notice-view__attachment-name {
  font-size: clamp(1.4rem, 0.0647249191vw + 1.3757281553rem, 1.5rem);
  font-weight: 500;
  color: var(--clr-text-primary);
  margin-bottom: 0.2rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.no-notice-view__attachment-size {
  font-size: clamp(1.2rem, 0.0647249191vw + 1.1757281553rem, 1.3rem);
  color: var(--clr-text-tertiary);
}
.no-notice-view__attachment-download {
  flex-shrink: 0;
  text-decoration: none !important;
}
.no-notice-view__actions {
  padding: 1.6rem 2rem;
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
}
@media (max-width: 544px) {
  .no-notice-view__actions {
    padding: 2rem 2.4rem;
    gap: 1.2rem;
  }
}
@media (max-width: 768px) {
  .no-notice-view__actions {
    padding: 2.4rem 3.2rem;
  }
}

/**
 * Distributor Categories Component
 * 대리점 카테고리 설정 스타일
 */
.no-distributor-categories__header {
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--clr-border-secondary, #e5e7eb);
}
.no-distributor-categories__title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--clr-text-primary, #111827);
  margin: 0 0 0.5rem 0;
}
.no-distributor-categories__title i {
  font-size: 1.375rem;
  color: var(--clr-primary-600, #2563eb);
}
.no-distributor-categories__description {
  font-size: 1.375rem;
  color: var(--clr-text-secondary, #6b7280);
  margin: 0;
}
.no-distributor-categories__list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 2rem;
}
.no-distributor-categories__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  text-align: center;
  color: var(--clr-text-secondary, #6b7280);
  background: var(--clr-bg-tertiary, #f9fafb);
  border-radius: 8px;
  border: 2px dashed var(--clr-border-secondary, #e5e7eb);
}
.no-distributor-categories__empty i {
  font-size: 3rem;
  color: var(--clr-text-tertiary, #9ca3af);
  margin-bottom: 1rem;
}
.no-distributor-categories__empty p {
  font-size: 1.125rem;
  margin: 0;
}

.no-distributor-category-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  background: var(--clr-bg-elevated, #ffffff);
  border: 2px solid var(--clr-border-secondary, #e5e7eb);
  border-radius: 8px;
  transition: all 0.2s ease;
}
.no-distributor-category-item:hover {
  border-color: var(--clr-primary-300, #93c5fd);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.1);
}
.no-distributor-category-item .no-form-field__checkbox-group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
  margin: 0;
}
.no-distributor-category-item__input {
  margin: 0;
}
.no-distributor-category-item__info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
  cursor: pointer;
  margin: 0;
}
.no-distributor-category-item__name {
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--clr-text-primary, #111827);
}
.no-distributor-category-item__slug {
  font-size: 1.2rem;
  color: var(--clr-text-secondary, #6b7280);
}
.no-distributor-category-item__enabled {
  display: flex;
  align-items: center;
  margin-left: 1rem;
}

/**
 * Distributor Prices Component
 * 대리점 단가 설정 스타일
 */
.no-distributor-prices__list-wrapper {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 2px solid var(--clr-border-secondary, #e5e7eb);
}
.no-distributor-prices__list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}
.no-distributor-prices__list-title {
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--clr-text-primary, #111827);
  margin: 0;
}
.no-distributor-prices__count {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  background: var(--clr-primary-50, #eff6ff);
  color: var(--clr-primary-700, #1d4ed8);
  border-radius: 20px;
  font-size: 1rem;
  font-weight: 600;
}
.no-distributor-prices__search {
  display: flex;
  gap: 1rem;
  align-items: flex-end;
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: var(--clr-bg-secondary, #f3f4f6);
  border-radius: 0.8rem;
  border: 0.1rem solid var(--clr-border-secondary, #e5e7eb);
}
@media (max-width: 768px) {
  .no-distributor-prices__search {
    flex-direction: column;
    align-items: stretch;
  }
}
.no-distributor-prices__search .no-form-field {
  flex: 1;
  margin: 0;
}
@media (max-width: 768px) {
  .no-distributor-prices__search .no-form-field {
    width: 100%;
  }
}
.no-distributor-prices__search .no-form-field__input-wrapper {
  position: relative;
}
.no-distributor-prices__search .no-form-field__input-clear {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--clr-text-tertiary, #9ca3af);
  cursor: pointer;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
}
.no-distributor-prices__search .no-form-field__input-clear:hover {
  color: var(--clr-text-primary, #111827);
}
.no-distributor-prices__search .no-form-field__input-clear i {
  font-size: 1.2rem;
}
.no-distributor-prices__list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.no-distributor-prices__category-group {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.no-distributor-prices__category-header {
  padding: 1rem 1.5rem;
  background: var(--clr-primary-50, #eff6ff);
  border: 0.1rem solid var(--clr-primary-200, #bfdbfe);
  border-radius: 0.8rem;
}
.no-distributor-prices__category-title {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--clr-primary-700, #1d4ed8);
  margin: 0;
}
.no-distributor-prices__category-title i {
  font-size: 1.1rem;
  color: var(--clr-primary-600, #2563eb);
}
.no-distributor-prices__category-count {
  font-size: 1rem;
  font-weight: 500;
  color: var(--clr-primary-600, #2563eb);
  margin-left: 0.4rem;
}
.no-distributor-prices__category-items {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-left: 1rem;
}
@media (max-width: 768px) {
  .no-distributor-prices__category-items {
    padding-left: 0;
  }
}
.no-distributor-prices__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  text-align: center;
  color: var(--clr-text-secondary, #6b7280);
  background: var(--clr-bg-tertiary, #f9fafb);
  border-radius: 8px;
  border: 2px dashed var(--clr-border-secondary, #e5e7eb);
}
.no-distributor-prices__empty--search {
  margin-top: 2rem;
}
.no-distributor-prices__empty i {
  font-size: 3rem;
  color: var(--clr-text-tertiary, #9ca3af);
  margin-bottom: 1rem;
}
.no-distributor-prices__empty p {
  font-size: 1.125rem;
  margin: 0;
}

.no-distributor-price-form__header {
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--clr-border-secondary, #e5e7eb);
}
.no-distributor-price-form__tabs {
  display: flex;
  gap: 0;
  margin-bottom: 2rem;
  border-bottom: 2px solid var(--clr-border-secondary, #e5e7eb);
}
.no-distributor-price-form__tab {
  padding: 1rem 1.5rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--clr-text-secondary, #6b7280);
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: color 0.2s, border-color 0.2s;
}
.no-distributor-price-form__tab:hover {
  color: var(--clr-text-primary, #111827);
}
.no-distributor-price-form__tab--active {
  color: var(--clr-primary-600, #2563eb);
  border-bottom-color: var(--clr-primary-600, #2563eb);
}
.no-distributor-price-form__panel {
  padding-top: 1rem;
}
.no-distributor-price-form__panel--hidden {
  display: none !important;
}
.no-distributor-price-form__effective-hint {
  padding: 1rem 1.2rem;
  background: var(--clr-bg-secondary, #f3f4f6);
  border-radius: 0.8rem;
  border: 0.1rem solid var(--clr-border-secondary, #e5e7eb);
}
.no-distributor-price-form__product-selector {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}
@media (max-width: 544px) {
  .no-distributor-price-form__product-selector {
    flex-direction: column;
    align-items: stretch;
  }
}
.no-distributor-price-form__product-display {
  flex: 1;
  min-height: 2.75rem;
  padding: 1rem 1.4rem;
  background: var(--clr-bg-tertiary, #f9fafb);
  border: 1px solid var(--clr-border-secondary, #e5e7eb);
  border-radius: 6px;
  display: flex;
  align-items: center;
  font-size: 1rem;
  line-height: 1.5;
}
.no-distributor-price-form__product-placeholder {
  color: var(--clr-text-tertiary, #9ca3af);
  font-size: 1.4rem;
  font-weight: 400;
}
.no-distributor-price-form__product-selected {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.no-distributor-price-form__product-name {
  font-weight: 600;
  color: var(--clr-text-primary, #111827);
  font-size: 1.3rem;
}
.no-distributor-price-form__product-code {
  color: var(--clr-text-secondary, #6b7280);
  font-size: 1.175rem;
}
.no-distributor-price-form__product-price {
  margin-left: auto;
  padding: 0.25rem 0.75rem;
  background: var(--clr-primary-50, #eff6ff);
  color: var(--clr-primary-700, #1d4ed8);
  border-radius: 4px;
  font-size: 1.175rem;
  font-weight: 600;
}
.no-distributor-price-form__product-select-btn {
  flex-shrink: 0;
}
.no-distributor-price-form__multi-actions {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}
.no-distributor-price-form__preview-card {
  margin-top: 1.25rem;
  padding: 1.25rem;
  background: var(--clr-bg-secondary, #f3f4f6);
  border: 1px solid var(--clr-border-secondary, #e5e7eb);
  border-radius: 0.8rem;
}
.no-distributor-price-form__preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.no-distributor-price-form__preview-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--clr-text-primary, #111827);
  margin: 0;
}
.no-distributor-price-form__preview-title strong {
  color: var(--clr-primary-600, #2563eb);
}
.no-distributor-price-form__preview-table-wrap {
  overflow-x: auto;
  border-radius: 6px;
  border: 1px solid var(--clr-border-secondary, #e5e7eb);
  background: var(--clr-bg-elevated, #fff);
}
.no-distributor-price-form__preview-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.no-distributor-price-form__preview-table th,
.no-distributor-price-form__preview-table td {
  padding: 0.6rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--clr-border-secondary, #e5e7eb);
}
.no-distributor-price-form__preview-table th {
  font-weight: 600;
  color: var(--clr-text-secondary, #6b7280);
  background: var(--clr-bg-tertiary, #f9fafb);
}
.no-distributor-price-form__preview-table tbody tr:last-child td {
  border-bottom: none;
}
.no-distributor-price-form__preview-num {
  text-align: right !important;
  white-space: nowrap;
}
.no-distributor-price-form__field-pricing-type {
  margin-top: 1.75rem;
  margin-bottom: 1rem;
}
.no-distributor-price-form__title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--clr-text-primary, #111827);
  margin: 0 0 0.5rem 0;
}
.no-distributor-price-form__title i {
  font-size: 1.375rem;
  color: var(--clr-primary-600, #2563eb);
}
.no-distributor-price-form__description {
  font-size: 1.375rem;
  color: var(--clr-text-secondary, #6b7280);
  margin: 0;
}
.no-distributor-price-form__effective {
  padding: 1.25rem;
  background: linear-gradient(135deg, var(--clr-primary-50, #eff6ff) 0%, var(--clr-primary-100, #dbeafe) 100%);
  border: 2px solid var(--clr-primary-200, #bfdbfe);
  border-radius: 8px;
  margin-top: 1rem;
}
.no-distributor-price-form__effective-value {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.no-distributor-price-form__effective-amount {
  font-size: 2rem;
  font-weight: 700;
  color: var(--clr-primary-700, #1d4ed8);
  line-height: 1;
}
.no-distributor-price-form__effective-currency {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--clr-primary-600, #2563eb);
}

.no-distributor-price-item {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.25rem;
  background: var(--clr-bg-elevated, #ffffff);
  border: 2px solid var(--clr-border-secondary, #e5e7eb);
  border-radius: 8px;
  transition: all 0.2s ease;
}
.no-distributor-price-item:hover {
  border-color: var(--clr-primary-300, #93c5fd);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.1);
}
.no-distributor-price-item__thumb {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  min-width: 2.5rem;
  min-height: 2.5rem;
  border-radius: 0.5rem;
  overflow: hidden;
  background: var(--clr-bg-secondary, #f3f4f6);
  border: 1px solid var(--clr-border-secondary, #e5e7eb);
}
.no-distributor-price-item__thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.no-distributor-price-item__info {
  flex: 1;
  min-width: 0;
}
.no-distributor-price-item__name {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--clr-text-primary, #111827);
  margin-bottom: 0.5rem;
}
.no-distributor-price-item__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 1rem;
  color: var(--clr-text-secondary, #6b7280);
}
.no-distributor-price-item__code, .no-distributor-price-item__type {
  display: inline-flex;
  align-items: center;
}
.no-distributor-price-item__price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  min-width: 150px;
}
.no-distributor-price-item__catalog {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.35rem 0.5rem;
  font-size: 0.875rem;
  color: var(--clr-text-secondary, #6b7280);
}
.no-distributor-price-item__catalog-label {
  font-weight: 500;
  margin-right: 0.15rem;
}
.no-distributor-price-item__catalog-amount {
  font-weight: 600;
  color: var(--clr-text-primary, #374151);
}
.no-distributor-price-item__catalog-currency {
  font-weight: 500;
  color: var(--clr-text-secondary, #6b7280);
}
.no-distributor-price-item__effective {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.no-distributor-price-item__amount {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--clr-primary-700, #1d4ed8);
  line-height: 1;
}
.no-distributor-price-item__currency {
  font-size: 1rem;
  font-weight: 600;
  color: var(--clr-primary-600, #2563eb);
}
.no-distributor-price-item__discount {
  font-size: 0.875rem;
  color: var(--clr-success-600, #059669);
  font-weight: 500;
}
.no-distributor-price-item__actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}
.no-distributor-price-item__delete-form {
  margin: 0;
}

.no-distributor-price-detail-modal {
  min-width: 0;
}
.no-distributor-price-detail-modal__intro {
  margin: 0 0 1.25rem;
  padding: 0.75rem 1rem;
  font-size: 0.9375rem;
  color: var(--clr-text-secondary, #6b7280);
  background: var(--clr-bg-secondary, #f3f4f6);
  border-radius: 0.5rem;
  border-left: 4px solid var(--clr-primary-500, #3b82f6);
}
.no-distributor-price-detail-modal__table-wrap {
  overflow-x: auto;
  border-radius: 0.75rem;
  border: 1px solid var(--clr-border-secondary, #e5e7eb);
  background: var(--clr-bg-elevated, #fff);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.no-distributor-price-detail-modal__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
.no-distributor-price-detail-modal__th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-weight: 600;
  color: var(--clr-text-secondary, #6b7280);
  background: var(--clr-bg-tertiary, #f9fafb);
  border-bottom: 2px solid var(--clr-border-secondary, #e5e7eb);
}
.no-distributor-price-detail-modal__th--thumb {
  width: 72px;
  text-align: center;
}
.no-distributor-price-detail-modal__th--num {
  text-align: right;
  white-space: nowrap;
}
.no-distributor-price-detail-modal__row {
  transition: background 0.15s ease;
}
.no-distributor-price-detail-modal__row:hover {
  background: var(--clr-primary-50, #eff6ff);
}
.no-distributor-price-detail-modal__row:not(:last-child) .no-distributor-price-detail-modal__cell {
  border-bottom: 1px solid var(--clr-border-secondary, #e5e7eb);
}
.no-distributor-price-detail-modal__cell {
  padding: 0.875rem 1rem;
  vertical-align: middle;
}
.no-distributor-price-detail-modal__cell--thumb {
  width: 72px;
  text-align: center;
}
.no-distributor-price-detail-modal__cell--name {
  font-weight: 500;
  color: var(--clr-text-primary, #111827);
}
.no-distributor-price-detail-modal__cell--code {
  color: var(--clr-text-secondary, #6b7280);
  font-size: 0.875rem;
}
.no-distributor-price-detail-modal__cell--num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.no-distributor-price-detail-modal__cell--effective {
  font-weight: 600;
  color: var(--clr-primary-700, #1d4ed8);
}
.no-distributor-price-detail-modal__thumb {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  min-width: 2.5rem;
  min-height: 2.5rem;
  border-radius: 0.5rem;
  overflow: hidden;
  background: var(--clr-bg-secondary, #f3f4f6);
  border: 1px solid var(--clr-border-secondary, #e5e7eb);
}
.no-distributor-price-detail-modal__thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/**
 * Order/Cart Component
 * 주문 페이지 스타일 - 일루코 디자인 시스템 적용
 */
.order-page {
  max-width: 160rem;
  margin: 0 auto;
  padding: 2rem;
}
@media (max-width: 768px) {
  .order-page {
    padding: 1rem;
  }
}

.order-message {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 1.4rem 1.6rem;
  background: var(--clr-primary-50);
  border: 0.1rem solid var(--clr-primary-200);
  border-radius: 0.6rem;
  margin-bottom: 2rem;
}
.order-message__header {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-shrink: 0;
}
.order-message__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background: var(--clr-primary-500);
  color: #ffffff;
  border-radius: 50%;
  flex-shrink: 0;
  font-size: 1rem;
}
.order-message__title {
  font-size: 1.4rem;
  line-height: 1.5;
  color: var(--clr-text-primary);
  font-weight: 600;
}
.order-message__content {
  font-size: 1.3rem;
  line-height: 1.6;
  color: var(--clr-text-secondary);
  font-weight: 400;
  padding-left: 2.8rem;
}

.order-layout {
  display: flex;
  gap: 2.4rem;
  align-items: start;
}
@media (max-width: 1024px) {
  .order-layout {
    flex-direction: column;
    gap: 2rem;
  }
}

.order-left {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  width: 50%;
}
@media (max-width: 1024px) {
  .order-left {
    width: 100%;
  }
}

.order-right {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  width: 50%;
}
@media (max-width: 1024px) {
  .order-right {
    width: 100%;
  }
}

.order-info-card {
  background: var(--clr-bg-elevated);
  border: 0.1rem solid var(--clr-border-primary);
  border-radius: 0.8rem;
  overflow: hidden;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.04);
}
.order-info-card:hover {
  box-shadow: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.08);
  border-color: var(--clr-primary-300);
}
.order-info-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem 1.6rem;
  background: var(--clr-bg-secondary);
  border-bottom: 0.1rem solid var(--clr-border-secondary);
}
.order-info-card__title {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--clr-text-primary);
  letter-spacing: -0.01em;
}
.order-info-card__title i {
  font-size: 1.4rem;
  color: var(--clr-primary-500);
}
.order-info-card__select-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.2rem;
  background: var(--clr-primary-500);
  color: #ffffff;
  border: none;
  border-radius: 0.5rem;
  font-size: 1.3rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.order-info-card__select-btn:hover {
  background: var(--clr-primary-600);
}
.order-info-card__select-btn:active {
  transform: scale(0.98);
}
.order-info-card__select-btn i {
  font-size: 0.9rem;
  transition: transform 0.2s;
}
.order-info-card__select-btn:hover i {
  transform: translateX(0.15rem);
}
.order-info-card__select-btn:disabled {
  background: var(--clr-gray-400);
  cursor: not-allowed;
  opacity: 0.6;
}
.order-info-card__content {
  padding: 1.4rem 1.6rem;
  min-height: 6rem;
}
.order-info-card__empty {
  color: var(--clr-text-disabled);
  font-size: 1.3rem;
  text-align: center;
  padding: 1.6rem 0;
}
.order-info-card__selected {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.2rem;
}
.order-info-card__selected-primary {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.order-info-card__selected-name {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--clr-text-primary);
  line-height: 1.4;
  letter-spacing: -0.01em;
}
.order-info-card__selected-code {
  font-size: 1.3rem;
  color: var(--clr-text-secondary);
  font-weight: 400;
}
.order-info-card__selected-details {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 0.8rem;
}
.order-info-card__view-all {
  margin-top: 0.6rem;
  font-size: 1.3rem;
  color: var(--clr-primary-600);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.order-info-card__view-all:hover {
  color: var(--clr-primary-700);
}
.order-info-card__details-full {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 0.1rem solid var(--clr-border-primary);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.order-info-card__details-full .order-info-card__detail-item:first-child .order-info-card__detail-value {
  font-weight: 500;
  white-space: pre-wrap;
  word-break: break-word;
}
.order-info-card__detail-item {
  display: flex;
  gap: 0.8rem;
  font-size: 1.3rem;
}
.order-info-card__detail-label {
  font-weight: 600;
  color: var(--clr-text-secondary);
  min-width: 6rem;
}
.order-info-card__detail-value {
  color: var(--clr-text-primary);
}
.order-info-card__remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.8rem;
  height: 2.8rem;
  background: transparent;
  border: 0.1rem solid var(--clr-border-primary);
  border-radius: 50%;
  color: var(--clr-text-secondary);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}
.order-info-card__remove:hover {
  background: var(--clr-danger-50);
  border-color: var(--clr-danger-400);
  color: var(--clr-danger-600);
}
.order-info-card__remove i {
  font-size: 1.1rem;
}

.order-product-info-box {
  background: var(--clr-bg-elevated);
  border: 0.1rem solid var(--clr-border-primary);
  border-radius: 0.8rem;
  padding: 1.6rem;
  min-height: 15rem;
  box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.04);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.order-product-info-box:hover {
  box-shadow: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.08);
  border-color: var(--clr-primary-300);
}
.order-product-info-box__title {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--clr-text-primary);
  margin-bottom: 1.2rem;
  padding-bottom: 0.8rem;
  border-bottom: 0.1rem solid var(--clr-border-secondary);
  letter-spacing: -0.01em;
}
.order-product-info-box__content {
  font-size: 1.4rem;
  color: var(--clr-text-secondary);
  line-height: 1.6;
}
.order-product-info-box__empty {
  color: var(--clr-text-disabled);
  font-style: italic;
  text-align: center;
  padding: 3rem 0;
}

.order-product-info {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.4rem;
  width: 100%;
}
@media (max-width: 768px) {
  .order-product-info {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

.order-product-primary {
  display: flex;
  flex-direction: row;
  gap: 2rem;
  align-items: flex-start;
}
@media (max-width: 768px) {
  .order-product-primary {
    flex-direction: column;
    gap: 1.5rem;
  }
}
.order-product-primary__thumbnail {
  flex: 0 0 35%;
  width: 35%;
  aspect-ratio: 1;
  border-radius: 0.8rem;
  overflow: hidden;
  background: var(--clr-bg-secondary);
  border: 0.1rem solid var(--clr-border-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.1);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.order-product-primary__thumbnail:hover {
  transform: scale(1.02);
}
@media (max-width: 768px) {
  .order-product-primary__thumbnail {
    flex: 0 0 100%;
    width: 100%;
  }
}
.order-product-primary__thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.order-product-primary__thumbnail:hover img {
  transform: scale(1.05);
}

.order-product-gallery {
  flex: 0 0 28rem;
  width: 28rem;
  max-width: 28rem;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  position: relative;
  z-index: 1;
  flex-direction: column;
}
@media (max-width: 768px) {
  .order-product-gallery {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    flex-direction: column;
    gap: 0.8rem;
  }
}
.order-product-gallery__main {
  flex: 1;
  width: 100%;
  min-width: 0;
  aspect-ratio: 1;
  border-radius: 0.6rem;
  overflow: hidden;
  background: var(--clr-bg-secondary);
  border: 0.1rem solid var(--clr-border-secondary);
  box-shadow: 0 0.1rem 0.4rem rgba(0, 0, 0, 0.08);
  position: relative;
}
@media (max-width: 768px) {
  .order-product-gallery__main {
    order: 1;
    width: 100%;
  }
}
.order-product-gallery__main .swiper {
  width: 100%;
  height: 100%;
}
.order-product-gallery__main .swiper-slide {
  width: 100%;
  height: 100%;
}
.order-product-gallery__main-item {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.order-product-gallery__main-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.order-product-gallery__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-text-disabled);
  font-size: 4rem;
  background: linear-gradient(135deg, var(--clr-bg-secondary) 0%, var(--clr-bg-tertiary) 100%);
}
.order-product-gallery__thumbs {
  flex: 0 0 auto;
  width: 100%;
  height: 6.4rem;
  overflow: hidden;
  position: relative;
  z-index: 2;
}
@media (max-width: 768px) {
  .order-product-gallery__thumbs {
    order: 2;
    height: 6rem;
  }
}
.order-product-gallery__thumbs .swiper {
  width: 100%;
  height: 100%;
}
.order-product-gallery__thumbs .swiper-wrapper {
  display: flex;
  flex-direction: row;
  height: 100%;
}
.order-product-gallery__thumbs .swiper-slide {
  width: auto;
  height: 100%;
  flex-shrink: 0;
  margin-right: 0.6rem;
}
.order-product-gallery__thumbs .swiper-slide:last-child {
  margin-right: 0;
}
.order-product-gallery__thumb-item {
  width: 6rem;
  height: 6rem;
  border-radius: 0.4rem;
  overflow: hidden;
  background: var(--clr-bg-secondary);
  border: 0.15rem solid var(--clr-border-primary);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0.6;
}
@media (max-width: 768px) {
  .order-product-gallery__thumb-item {
    width: 5.5rem;
    height: 5.5rem;
  }
}
.order-product-gallery__thumb-item:hover {
  opacity: 0.8;
  border-color: var(--clr-primary-400);
  transform: scale(1.05);
}
.order-product-gallery__thumb-item.active {
  opacity: 1;
  border-color: var(--clr-primary-500);
  box-shadow: 0 0 0 0.15rem rgba(37, 99, 235, 0.2);
}
.order-product-gallery__thumb-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.order-product-info__thumbnail-placeholder {
  flex: 0 0 40%;
  width: 40%;
  max-width: 40rem;
  aspect-ratio: 1;
  border-radius: 0.8rem;
  background: linear-gradient(135deg, var(--clr-bg-secondary) 0%, var(--clr-bg-tertiary) 100%);
  border: 0.1rem solid var(--clr-border-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-text-disabled);
  font-size: 4rem;
}
@media (max-width: 768px) {
  .order-product-info__thumbnail-placeholder {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
  }
}
.order-product-info__details {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  padding-left: 0;
}
@media (max-width: 768px) {
  .order-product-info__details {
    flex: 0 0 100%;
    width: 100%;
    padding-left: 0;
  }
}
.order-product-info__name {
  font-size: 2rem;
  font-weight: 700;
  color: var(--clr-text-primary);
  margin-bottom: 0.8rem;
  line-height: 1.3;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
}
@media (max-width: 768px) {
  .order-product-info__name {
    font-size: 1.8rem;
  }
}
.order-product-info__code, .order-product-info__model, .order-product-info__price {
  font-size: 1.4rem;
  color: var(--clr-text-secondary);
  margin-bottom: 0.4rem;
}
@media (max-width: 768px) {
  .order-product-info__code, .order-product-info__model, .order-product-info__price {
    font-size: 1.3rem;
  }
}
.order-product-info__editing-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.6rem;
  background: linear-gradient(135deg, var(--clr-warning-100) 0%, var(--clr-warning-50) 100%);
  border: 0.1rem solid var(--clr-warning-300);
  border-radius: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--clr-warning-700);
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.2s ease;
  box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.05);
}
.order-product-info__editing-badge:hover {
  background: linear-gradient(135deg, var(--clr-warning-200) 0%, var(--clr-warning-100) 100%);
  border-color: var(--clr-warning-400);
  transform: translateY(-0.05rem);
  box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.08);
}
.order-product-info__editing-badge i {
  font-size: 0.85rem;
  color: var(--clr-warning-600);
}
@media (max-width: 544px) {
  .order-product-info__editing-badge {
    padding: 0.2rem 0.5rem;
    font-size: 0.9rem;
    gap: 0.3rem;
  }
  .order-product-info__editing-badge i {
    font-size: 0.8rem;
  }
}
.order-product-info__detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 0.1rem solid var(--clr-border-tertiary);
  transition: all 0.2s;
}
.order-product-info__detail-item:hover {
  background: var(--clr-bg-secondary);
  margin: 0 -1rem;
  padding: 1rem;
  border-radius: 0.4rem;
}
.order-product-info__detail-item:last-child {
  border-bottom: none;
}
.order-product-info__detail-item--price {
  padding-top: 1.2rem;
  margin-top: 0.8rem;
  border-top: 0.2rem solid var(--clr-border-primary);
  border-bottom: none;
  margin-left: -1rem;
  margin-right: -1rem;
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 0.4rem;
}
.order-product-info__detail-label {
  font-weight: 600;
  color: var(--clr-text-secondary);
  font-size: 1.3rem;
}
.order-product-info__detail-value {
  color: var(--clr-text-primary);
  font-weight: 500;
  font-size: 1.4rem;
  text-align: right;
}
.order-product-info__detail-value #product-unit-price {
  color: var(--clr-primary-500);
  font-weight: 700;
  font-size: 1.8rem;
}
.order-product-info__description {
  margin-top: 1.2rem;
  padding-top: 1.2rem;
  border-top: 0.1rem solid var(--clr-border-secondary);
  background: var(--clr-bg-secondary);
  padding: 1.2rem;
  border-radius: 0.6rem;
}
.order-product-info__description .order-product-primary__detail-label {
  margin-bottom: 0.8rem;
}
.order-product-info__description .order-product-primary__detail-value {
  text-align: left;
  line-height: 1.7;
  color: var(--clr-text-secondary);
}

.order-product-options-box {
  background: var(--clr-bg-elevated);
  border: 0.1rem solid var(--clr-border-primary);
  border-radius: 0.8rem;
  padding: 1.6rem;
  min-height: 15rem;
  box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.04);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: visible;
}
.order-product-options-box:hover {
  box-shadow: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.08);
  border-color: var(--clr-primary-300);
}
.order-product-options-box__title {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--clr-text-primary);
  margin-bottom: 1.2rem;
  padding-bottom: 0.8rem;
  border-bottom: 0.1rem solid var(--clr-border-secondary);
  letter-spacing: -0.01em;
}
.order-product-options-box__content {
  font-size: 1.4rem;
  color: var(--clr-text-secondary);
  line-height: 1.8;
  position: relative;
  overflow: visible;
}
.order-product-options-box__empty {
  color: var(--clr-text-disabled);
  font-style: italic;
}
.order-product-options-box__empty div {
  margin-bottom: 0.4rem;
}

.order-add-to-cart-btn {
  background: var(--clr-primary-500);
  color: #ffffff;
  border: none;
  border-radius: 0.6rem;
  padding: 1.4rem 2.4rem;
  font-size: 1.5rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0.2rem 0.4rem rgba(37, 99, 235, 0.2);
  width: 100%;
  min-width: auto;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  margin-top: 2rem;
}
.order-add-to-cart-btn:hover:not(:disabled) {
  background: var(--clr-primary-600);
  box-shadow: 0 0.3rem 0.6rem rgba(37, 99, 235, 0.3);
  transform: translateY(-0.1rem);
}
.order-add-to-cart-btn:active:not(:disabled) {
  transform: scale(0.98);
}
.order-add-to-cart-btn:disabled {
  background: var(--clr-gray-400);
  color: var(--clr-gray-600);
  cursor: not-allowed;
  opacity: 0.7;
  box-shadow: none;
  transform: none;
}
.order-add-to-cart-btn .fa-spinner {
  animation: spin 1s linear infinite;
}
@media (max-width: 768px) {
  .order-add-to-cart-btn {
    padding: 1.2rem 2rem;
    font-size: 1.4rem;
  }
}

.order-cart-box {
  background: var(--clr-bg-elevated);
  border: 0.1rem solid var(--clr-border-primary);
  border-radius: 0.8rem;
  padding: 0;
  min-height: 20rem;
  box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.04);
  overflow: hidden;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.order-cart-box:hover {
  box-shadow: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.08);
  border-color: var(--clr-primary-300);
}
.order-cart-box__title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--clr-text-primary);
  padding: 1.2rem 1.6rem;
  background: var(--clr-bg-secondary);
  border-bottom: 0.1rem solid var(--clr-border-secondary);
  letter-spacing: -0.01em;
}
.order-cart-box__content {
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.order-cart-box__empty {
  color: var(--clr-text-disabled);
  font-style: italic;
  text-align: center;
  padding: 3rem 2rem;
}
.order-cart-box__loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  gap: 1rem;
  text-align: center;
}
.order-cart-box__loading-icon {
  font-size: 3rem;
  color: var(--clr-primary-500);
  animation: spin 1s linear infinite;
}
.order-cart-box__loading-text {
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--clr-text-secondary);
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.order-cart-loader {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.95);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  z-index: 10;
  border-radius: 0.8rem;
  backdrop-filter: blur(2px);
}
@media (prefers-color-scheme: dark) {
  .order-cart-loader {
    background: rgba(0, 0, 0, 0.8);
  }
}
[data-theme=dark] .order-cart-loader {
  background: rgba(0, 0, 0, 0.8);
}
.order-cart-loader__spinner {
  font-size: 2.4rem;
  color: var(--clr-primary-500);
  animation: spin 1s linear infinite;
}
.order-cart-loader__text {
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--clr-text-primary);
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.order-cart-selection-info {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 1.2rem 1.6rem;
  background: linear-gradient(135deg, var(--clr-primary-50) 0%, var(--clr-primary-100) 100%);
  border: 0.1rem solid var(--clr-primary-200);
  border-radius: 0.8rem;
  margin-bottom: 1.2rem;
  box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.05);
}
@media (max-width: 768px) {
  .order-cart-selection-info {
    padding: 1rem 1.4rem;
  }
}
@media (max-width: 544px) {
  .order-cart-selection-info {
    padding: 1rem 1.2rem;
  }
}
.order-cart-selection-info__row--select {
  flex-shrink: 0;
  margin-bottom: 0.8rem;
}
.order-cart-selection-info__row--summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
  align-items: stretch;
  margin-bottom: 0.8rem;
  padding-top: 0.8rem;
  border-top: 0.1rem solid var(--clr-primary-200);
}
@media (max-width: 544px) {
  .order-cart-selection-info__row--summary {
    grid-template-columns: 1fr;
    gap: 0.6rem;
    padding-top: 0.6rem;
    margin-bottom: 0.6rem;
  }
}
.order-cart-selection-info__row--actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: flex-end;
  padding-top: 0.8rem;
  border-top: 0.1rem solid var(--clr-primary-200);
}
@media (max-width: 544px) {
  .order-cart-selection-info__row--actions {
    padding-top: 0.6rem;
    gap: 0.5rem;
  }
}
.order-cart-selection-info__checkbox-label {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--clr-text-primary);
  cursor: pointer;
  user-select: none;
}
.order-cart-selection-info__btn-text {
  white-space: nowrap;
}
.order-cart-selection-info__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.75rem 1rem;
  min-width: 0;
  background: rgba(255, 255, 255, 0.8);
  border: 0.1rem solid var(--clr-primary-200);
  border-radius: 0.5rem;
  box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.04);
}
@media (max-width: 544px) {
  .order-cart-selection-info__item {
    padding: 0.6rem 0.9rem;
  }
}
.order-cart-selection-info__label {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--clr-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
@media (max-width: 544px) {
  .order-cart-selection-info__label {
    font-size: 1rem;
  }
}
.order-cart-selection-info__value {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--clr-primary-600);
  line-height: 1.2;
  word-break: break-word;
  overflow-wrap: break-word;
}
@media (max-width: 544px) {
  .order-cart-selection-info__value {
    font-size: 1.45rem;
  }
}

[data-theme=dark] .order-cart-selection-info {
  background: linear-gradient(135deg, var(--clr-bg-secondary) 0%, var(--clr-bg-tertiary) 100%);
  border-color: var(--clr-border-primary);
  box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.35);
}
[data-theme=dark] .order-cart-selection-info .order-cart-selection-info__row--summary,
[data-theme=dark] .order-cart-selection-info .order-cart-selection-info__row--actions {
  border-top-color: var(--clr-border-primary);
}
[data-theme=dark] .order-cart-selection-info .order-cart-selection-info__item {
  background: var(--clr-bg-elevated);
  border-color: var(--clr-border-secondary);
  box-shadow: none;
}
[data-theme=dark] .order-cart-selection-info .order-cart-selection-info__label {
  color: var(--clr-text-tertiary);
}
[data-theme=dark] .order-cart-selection-info .order-cart-selection-info__value {
  color: var(--clr-primary-400);
}
[data-theme=dark] .order-cart-group__header {
  background: var(--clr-bg-secondary);
}
[data-theme=dark] .order-cart-item__edit,
[data-theme=dark] .order-cart-item__remove {
  background: var(--clr-bg-secondary);
  border-color: var(--clr-border-secondary);
  color: var(--clr-text-primary);
}
[data-theme=dark] .order-cart-item__edit:hover {
  background: color-mix(in srgb, var(--clr-primary-500) 18%, var(--clr-bg-secondary));
  border-color: var(--clr-primary-500);
  color: var(--clr-primary-300);
  box-shadow: 0 0.1rem 0.25rem rgba(0, 0, 0, 0.35);
}
[data-theme=dark] .order-cart-item__remove:hover {
  background: color-mix(in srgb, var(--clr-danger-500) 16%, var(--clr-bg-secondary));
  border-color: var(--clr-danger-500);
  color: var(--clr-danger-300);
}
[data-theme=dark] .order-cart-item__color-badge:hover {
  background: var(--clr-bg-secondary);
  border-color: var(--clr-primary-500);
}

.order-cart-selection-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.6rem;
  padding: 1.2rem 1.6rem;
  background: var(--clr-bg-elevated);
  border: 0.1rem solid var(--clr-border-primary);
  border-radius: 0.8rem;
  margin-bottom: 1.6rem;
  box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.04);
}
@media (max-width: 768px) {
  .order-cart-selection-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 1.2rem;
    padding: 1rem 1.4rem;
  }
}
@media (max-width: 544px) {
  .order-cart-selection-actions {
    padding: 1rem 1.2rem;
    gap: 1rem;
  }
}
.order-cart-selection-actions__checkbox-wrapper {
  flex-shrink: 0;
}
.order-cart-selection-actions__checkbox-wrapper .no-form-field {
  margin: 0;
}
.order-cart-selection-actions__checkbox-wrapper .no-form-field__checkbox-group {
  gap: 0.8rem;
}
@media (max-width: 544px) {
  .order-cart-selection-actions__checkbox-wrapper .no-form-field__checkbox-group {
    gap: 0.6rem;
  }
}
.order-cart-selection-actions__checkbox-label {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--clr-text-primary);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
@media (max-width: 544px) {
  .order-cart-selection-actions__checkbox-label {
    font-size: 1.3rem;
  }
}
.order-cart-selection-actions__buttons {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .order-cart-selection-actions__buttons {
    width: 100%;
    justify-content: flex-end;
  }
}
@media (max-width: 544px) {
  .order-cart-selection-actions__buttons {
    flex-direction: column;
    width: 100%;
    gap: 0.6rem;
  }
  .order-cart-selection-actions__buttons .no-btn {
    width: 100%;
    justify-content: center;
  }
}
@media (max-width: 544px) {
  .order-cart-selection-actions__btn-text {
    display: inline;
  }
}
@media (max-width: 400px) {
  .order-cart-selection-actions__btn-text {
    display: none;
  }
}

.order-cart-group {
  border: 0.1rem solid var(--clr-border-primary);
  border-radius: 0.8rem;
  overflow: hidden;
  background: var(--clr-bg-elevated);
  box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.05);
  transition: all 0.2s;
}
.order-cart-group:hover {
  box-shadow: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.1);
}
.order-cart-group__header {
  background: var(--clr-primary-50);
  padding: 1.2rem 1.6rem;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--clr-text-primary);
  border-bottom: 0.1rem solid var(--clr-border-secondary);
  letter-spacing: -0.01em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.6rem;
}
@media (max-width: 768px) {
  .order-cart-group__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8rem;
    padding: 1rem 1.4rem;
  }
}
@media (max-width: 544px) {
  .order-cart-group__header {
    padding: 0.8rem 1.2rem;
  }
}
.order-cart-group__header-name {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--clr-text-primary);
}
@media (max-width: 544px) {
  .order-cart-group__header-name {
    font-size: 1.4rem;
  }
}
.order-cart-group__header-subtotal {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--clr-primary-500);
  word-break: break-word;
  overflow-wrap: break-word;
}
@media (max-width: 544px) {
  .order-cart-group__header-subtotal {
    font-size: 1.2rem;
  }
}
.order-cart-group__items {
  display: flex;
  flex-direction: column;
}

.order-cart-item {
  display: flex;
  flex-direction: column;
  padding: 1.6rem 2rem;
  transition: all 0.2s;
  background: var(--clr-bg-primary);
  position: relative;
  border-bottom: 0.2rem solid var(--clr-border-secondary, rgba(0, 0, 0, 0.15));
}
.order-cart-item:hover {
  background: var(--clr-bg-secondary);
  box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.05);
}
@media (max-width: 768px) {
  .order-cart-item {
    padding: 1.4rem 1.6rem;
  }
}
@media (max-width: 544px) {
  .order-cart-item {
    padding: 1.2rem;
  }
}
.order-cart-item__main {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  width: 100%;
}
@media (max-width: 768px) {
  .order-cart-item__main {
    gap: 1rem;
  }
}
@media (max-width: 544px) {
  .order-cart-item__main {
    gap: 0.8rem;
  }
}
.order-cart-item__header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  width: 100%;
}
@media (max-width: 768px) {
  .order-cart-item__header {
    gap: 0.9rem;
  }
}
@media (max-width: 544px) {
  .order-cart-item__header {
    gap: 0.8rem;
  }
}
.order-cart-item__header-content {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  flex: 1;
  min-width: 0;
}
@media (max-width: 544px) {
  .order-cart-item__header-content {
    gap: 0.6rem;
  }
}
.order-cart-item__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  padding-top: 1rem;
  border-top: 0.1rem solid var(--clr-border-tertiary);
  margin-top: 0.4rem;
}
@media (max-width: 768px) {
  .order-cart-item__footer {
    gap: 1rem;
    padding-top: 0.8rem;
  }
}
@media (max-width: 544px) {
  .order-cart-item__footer {
    flex-wrap: wrap;
    gap: 0.8rem;
    padding-top: 0.8rem;
    margin-top: 0.2rem;
  }
}
.order-cart-item__checkbox-wrapper {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 0.2rem;
}
@media (max-width: 544px) {
  .order-cart-item__checkbox-wrapper {
    padding-top: 0.1rem;
  }
}
.order-cart-item__image {
  width: 7rem;
  height: 7rem;
  background: var(--clr-bg-secondary);
  border-radius: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-text-disabled);
  font-size: 2.4rem;
  border: 0.1rem solid var(--clr-border-secondary);
  flex-shrink: 0;
  transition: all 0.2s;
  overflow: hidden;
  position: relative;
}
@media (max-width: 768px) {
  .order-cart-item__image {
    width: 6rem;
    height: 6rem;
    font-size: 2rem;
  }
}
@media (max-width: 544px) {
  .order-cart-item__image {
    width: 5.5rem;
    height: 5.5rem;
    font-size: 1.8rem;
  }
}
.order-cart-item__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.7rem;
  display: block;
}
.order-cart-item__image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--clr-text-disabled);
  font-size: 2rem;
}
.order-cart-item__image:hover {
  border-color: var(--clr-primary-400);
}
.order-cart-item__name {
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--clr-text-primary);
  line-height: 1.4;
  word-wrap: break-word;
  word-break: break-word;
  overflow-wrap: break-word;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
@media (max-width: 768px) {
  .order-cart-item__name {
    font-size: 1.5rem;
  }
}
@media (max-width: 544px) {
  .order-cart-item__name {
    font-size: 1.4rem;
    line-height: 1.3;
    gap: 0.5rem;
  }
}
.order-cart-item__editing-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.6rem;
  background: linear-gradient(135deg, var(--clr-warning-100) 0%, var(--clr-warning-50) 100%);
  border: 0.1rem solid var(--clr-warning-300);
  border-radius: 0.35rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--clr-warning-700);
  white-space: nowrap;
  box-shadow: 0 0.1rem 0.15rem rgba(245, 158, 11, 0.12);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  line-height: 1;
  flex-shrink: 0;
  vertical-align: middle;
}
@media (max-width: 544px) {
  .order-cart-item__editing-badge {
    padding: 0.2rem 0.5rem;
    font-size: 0.9rem;
    gap: 0.3rem;
    border-radius: 0.3rem;
  }
}
.order-cart-item__editing-badge i {
  font-size: 0.85rem;
  color: var(--clr-warning-600);
  opacity: 0.95;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 544px) {
  .order-cart-item__editing-badge i {
    font-size: 0.8rem;
  }
}
.order-cart-item__editing-badge-text {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  line-height: 1;
  letter-spacing: -0.01em;
}
.order-cart-item__editing-badge:hover {
  background: linear-gradient(135deg, var(--clr-warning-200) 0%, var(--clr-warning-100) 100%);
  border-color: var(--clr-warning-400);
  box-shadow: 0 0.15rem 0.25rem rgba(245, 158, 11, 0.18);
  transform: translateY(-0.05rem);
}
.order-cart-item__editing-badge:active {
  transform: translateY(0);
  box-shadow: 0 0.1rem 0.15rem rgba(245, 158, 11, 0.12);
}
.order-cart-item__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  width: 100%;
  min-width: 0;
}
@media (max-width: 768px) {
  .order-cart-item__badges {
    gap: 0.4rem;
  }
}
@media (max-width: 544px) {
  .order-cart-item__badges {
    gap: 0.4rem;
  }
}
.order-cart-item__badge {
  flex-shrink: 0;
  white-space: nowrap;
  overflow: visible;
}
.order-cart-item__badge i {
  font-size: 1rem;
  opacity: 0.8;
}
.order-cart-item__engraving-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.8rem;
  background: linear-gradient(135deg, var(--clr-purple-50, #f5f3ff) 0%, var(--clr-purple-100, #ede9fe) 100%);
  border: 0.1rem solid var(--clr-purple-300, #c4b5fd);
  border-radius: 0.6rem;
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--clr-purple-700, #6d28d9);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0.1rem 0.2rem rgba(109, 40, 217, 0.1);
  line-height: 1.2;
}
.order-cart-item__engraving-badge i {
  font-size: 1rem;
  color: var(--clr-purple-600, #7c3aed);
  opacity: 1;
}
.order-cart-item__engraving-badge:hover {
  background: linear-gradient(135deg, var(--clr-purple-100, #ede9fe) 0%, var(--clr-purple-200, #ddd6fe) 100%);
  border-color: var(--clr-purple-400, #a78bfa);
  transform: translateY(-0.05rem);
  box-shadow: 0 0.15rem 0.3rem rgba(109, 40, 217, 0.15);
}
@media (max-width: 768px) {
  .order-cart-item__engraving-badge {
    padding: 0.35rem 0.7rem;
    font-size: 1.15rem;
    gap: 0.35rem;
  }
}
@media (max-width: 544px) {
  .order-cart-item__engraving-badge {
    padding: 0.3rem 0.6rem;
    font-size: 1.1rem;
    gap: 0.3rem;
  }
  .order-cart-item__engraving-badge i {
    font-size: 0.95rem;
  }
}
.order-cart-item__color-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.8rem;
  background: var(--clr-bg-elevated);
  border: 0.1rem solid var(--clr-border-primary);
  border-radius: 0.6rem;
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--clr-text-primary);
  transition: all 0.2s;
  flex-shrink: 0;
  white-space: nowrap;
}
.order-cart-item__color-badge:hover {
  background: var(--clr-primary-50);
  border-color: var(--clr-primary-200);
}
@media (max-width: 544px) {
  .order-cart-item__color-badge {
    padding: 0.3rem 0.6rem;
    font-size: 1.1rem;
    gap: 0.4rem;
  }
}
.order-cart-item__color-image {
  width: 2rem;
  height: 2rem;
  object-fit: cover;
  border-radius: 0.4rem;
  border: 0.1rem solid var(--clr-border-secondary);
  flex-shrink: 0;
}
@media (max-width: 544px) {
  .order-cart-item__color-image {
    width: 1.6rem;
    height: 1.6rem;
  }
}
.order-cart-item__color-image-placeholder {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--clr-bg-secondary);
  border: 0.1rem solid var(--clr-border-secondary);
  border-radius: 0.4rem;
  color: var(--clr-text-secondary);
  font-size: 1rem;
  flex-shrink: 0;
}
@media (max-width: 544px) {
  .order-cart-item__color-image-placeholder {
    width: 1.6rem;
    height: 1.6rem;
    font-size: 0.9rem;
  }
}
.order-cart-item__color-name {
  font-weight: 600;
  color: var(--clr-text-primary);
}
.order-cart-item__option-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.8rem;
  background: var(--clr-success-50);
  border: 0.1rem solid var(--clr-success-200);
  border-radius: 0.6rem;
  font-size: 1.2rem;
  color: var(--clr-text-primary);
  transition: all 0.2s;
  flex-shrink: 0;
  white-space: nowrap;
}
.order-cart-item__option-badge:hover {
  background: var(--clr-success-100);
  border-color: var(--clr-success-300);
}
.order-cart-item__option-badge i {
  color: var(--clr-success-600);
  font-size: 1rem;
}
@media (max-width: 544px) {
  .order-cart-item__option-badge {
    padding: 0.3rem 0.6rem;
    font-size: 1.1rem;
    gap: 0.4rem;
  }
}
.order-cart-item__option-image {
  width: 2rem;
  height: 2rem;
  object-fit: cover;
  border-radius: 0.4rem;
  border: 0.1rem solid var(--clr-success-200);
  flex-shrink: 0;
}
@media (max-width: 544px) {
  .order-cart-item__option-image {
    width: 1.6rem;
    height: 1.6rem;
  }
}
.order-cart-item__option-image-placeholder {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--clr-success-100);
  border: 0.1rem solid var(--clr-success-200);
  border-radius: 0.4rem;
  color: var(--clr-success-600);
  font-size: 1rem;
  flex-shrink: 0;
}
@media (max-width: 544px) {
  .order-cart-item__option-image-placeholder {
    width: 1.6rem;
    height: 1.6rem;
    font-size: 0.9rem;
  }
}
.order-cart-item__option-label {
  font-weight: 600;
  color: var(--clr-success-700);
}
.order-cart-item__option-name {
  font-weight: 500;
  color: var(--clr-text-primary);
}
.order-cart-item__loupe-btn {
  cursor: pointer;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 1.2rem;
  padding: 0.4rem 0.8rem;
  border-radius: 0.6rem;
  border: 1px solid var(--clr-primary-600);
  color: var(--clr-primary-600);
}
.order-cart-item__loupe-btn:hover {
  transform: translateY(-0.1rem);
  opacity: 0.9;
}
.order-cart-item__loupe-btn:active {
  transform: translateY(0);
  gap: 0.4rem;
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 1.2rem;
  padding: 0.4rem 0.8rem;
  border-radius: 0.4rem;
  border: 0.1rem solid var(--clr-border-secondary);
  background: var(--clr-bg-secondary);
  color: var(--clr-text-primary);
  transition: all 0.2s;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.order-cart-item__loupe-btn:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.2);
  border-radius: 0.4rem;
}
.order-cart-item__vision-photo-btn {
  cursor: pointer;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 1.2rem;
  padding: 0.4rem 0.8rem;
  border-radius: 0.6rem;
  border: 1px solid var(--clr-primary-600);
  color: var(--clr-primary-600);
}
.order-cart-item__vision-photo-btn:hover {
  transform: translateY(-0.1rem);
  opacity: 0.9;
}
.order-cart-item__vision-photo-btn:active {
  transform: translateY(0);
  gap: 0.4rem;
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 1.2rem;
  padding: 0.4rem 0.8rem;
  border-radius: 0.4rem;
  border: 0.1rem solid var(--clr-border-secondary);
  background: var(--clr-bg-secondary);
  color: var(--clr-text-primary);
  transition: all 0.2s;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.order-cart-item__vision-photo-btn:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.2);
  border-radius: 0.4rem;
}
.order-cart-item__loupe-dropdown {
  position: relative;
  width: 100%;
}
@media (max-width: 768px) {
  .order-cart-item__loupe-dropdown {
    width: 100%;
  }
}
.order-cart-item__loupe-toggle {
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.order-cart-item__loupe-toggle .fa-chevron-down {
  margin-left: 0.4rem;
  transition: transform 0.2s;
  font-size: 0.9rem;
}
.order-cart-item__loupe-toggle:hover {
  opacity: 0.8;
}
.order-cart-item__loupe-content {
  margin-top: 0.8rem;
  padding: 1.2rem;
  background: var(--clr-bg-elevated);
  border: 0.1rem solid var(--clr-border-primary);
  border-radius: 0.6rem;
  box-shadow: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}
@media (max-width: 768px) {
  .order-cart-item__loupe-content {
    padding: 1rem;
    margin-top: 0.6rem;
    gap: 1.2rem;
  }
}
.order-cart-item__loupe-section {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.order-cart-item__loupe-section-title {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--clr-text-primary);
  padding-bottom: 0.6rem;
  border-bottom: 0.15rem solid var(--clr-primary-400);
  letter-spacing: -0.01em;
}
.order-cart-item__loupe-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.3rem;
  min-width: 20rem;
}
@media (max-width: 768px) {
  .order-cart-item__loupe-table {
    font-size: 1.2rem;
    min-width: 18rem;
  }
}
.order-cart-item__loupe-table th {
  text-align: left;
  padding: 0.6rem 1rem 0.6rem 0;
  font-weight: 600;
  color: var(--clr-text-primary);
  border-bottom: 0.1rem solid var(--clr-border-secondary);
  white-space: nowrap;
}
@media (max-width: 768px) {
  .order-cart-item__loupe-table th {
    padding: 0.5rem 0.8rem 0.5rem 0;
  }
}
.order-cart-item__loupe-table td {
  padding: 0.6rem 0;
  color: var(--clr-text-secondary);
  word-break: break-word;
}
@media (max-width: 768px) {
  .order-cart-item__loupe-table td {
    padding: 0.5rem 0;
  }
}
.order-cart-item__loupe-table tr:last-child th,
.order-cart-item__loupe-table tr:last-child td {
  border-bottom: none;
}
.order-cart-item__loupe-vision-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.3rem;
  background: var(--clr-bg-primary);
  border-radius: 0.4rem;
  overflow: hidden;
}
@media (max-width: 768px) {
  .order-cart-item__loupe-vision-table {
    font-size: 1.2rem;
  }
}
.order-cart-item__loupe-vision-table thead {
  background: var(--clr-primary-50);
  border-bottom: 0.15rem solid var(--clr-primary-200);
}
.order-cart-item__loupe-vision-table thead th {
  padding: 0.8rem 1rem;
  font-weight: 600;
  color: var(--clr-primary-600);
  text-align: center;
  font-size: 1.2rem;
  letter-spacing: 0.02em;
}
@media (max-width: 768px) {
  .order-cart-item__loupe-vision-table thead th {
    padding: 0.6rem 0.8rem;
    font-size: 1.1rem;
  }
}
.order-cart-item__loupe-vision-table tbody th {
  padding: 0.8rem 1rem;
  font-weight: 600;
  color: var(--clr-text-primary);
  text-align: left;
  background: var(--clr-bg-secondary);
  border-right: 0.1rem solid var(--clr-border-secondary);
}
@media (max-width: 768px) {
  .order-cart-item__loupe-vision-table tbody th {
    padding: 0.6rem 0.8rem;
  }
}
.order-cart-item__loupe-vision-table tbody td {
  padding: 0.8rem 1rem;
  text-align: center;
  color: var(--clr-text-primary);
  font-weight: 500;
  border-bottom: 0.1rem solid var(--clr-border-tertiary);
}
@media (max-width: 768px) {
  .order-cart-item__loupe-vision-table tbody td {
    padding: 0.6rem 0.8rem;
  }
}
.order-cart-item__loupe-vision-table tbody tr:last-child td {
  border-bottom: none;
}
.order-cart-item__loupe-morenz-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.2rem;
  background: var(--clr-bg-primary);
  border-radius: 0.4rem;
  overflow: hidden;
  min-width: 50rem;
}
@media (max-width: 768px) {
  .order-cart-item__loupe-morenz-table {
    font-size: 1.1rem;
    min-width: 40rem;
  }
}
.order-cart-item__loupe-morenz-table thead {
  background: linear-gradient(135deg, var(--clr-primary-100), var(--clr-primary-50));
  border-bottom: 0.15rem solid var(--clr-primary-300);
}
.order-cart-item__loupe-morenz-table thead tr:first-child th {
  padding: 0.8rem 0.6rem;
  font-weight: 700;
  color: var(--clr-primary-800);
  text-align: center;
  font-size: 1.3rem;
  letter-spacing: 0.02em;
}
@media (max-width: 768px) {
  .order-cart-item__loupe-morenz-table thead tr:first-child th {
    padding: 0.6rem 0.4rem;
    font-size: 1.2rem;
  }
}
.order-cart-item__loupe-morenz-table thead tr:last-child th {
  padding: 0.6rem 0.4rem;
  font-weight: 600;
  color: var(--clr-primary-600);
  text-align: center;
  font-size: 1.1rem;
  border-top: 0.1rem solid var(--clr-primary-200);
}
@media (max-width: 768px) {
  .order-cart-item__loupe-morenz-table thead tr:last-child th {
    padding: 0.5rem 0.3rem;
    font-size: 1rem;
  }
}
.order-cart-item__loupe-morenz-table tbody th {
  padding: 0.8rem 1rem;
  font-weight: 600;
  color: var(--clr-text-primary);
  text-align: left;
  background: var(--clr-bg-secondary);
  border-right: 0.1rem solid var(--clr-border-secondary);
  white-space: nowrap;
}
@media (max-width: 768px) {
  .order-cart-item__loupe-morenz-table tbody th {
    padding: 0.6rem 0.8rem;
  }
}
.order-cart-item__loupe-morenz-table tbody td {
  padding: 0.8rem 0.6rem;
  text-align: center;
  color: var(--clr-text-primary);
  font-weight: 500;
  border-bottom: 0.1rem solid var(--clr-border-tertiary);
  border-right: 0.1rem solid var(--clr-border-tertiary);
}
@media (max-width: 768px) {
  .order-cart-item__loupe-morenz-table tbody td {
    padding: 0.6rem 0.4rem;
  }
}
.order-cart-item__loupe-morenz-table tbody td:last-child {
  border-right: none;
}
.order-cart-item__loupe-morenz-table tbody tr:last-child td {
  border-bottom: none;
}
.order-cart-item__loupe-morenz-table tbody tr:nth-child(even) {
  background: var(--clr-bg-secondary);
}
.order-cart-item__qty {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start;
  flex: 1;
  min-width: 0;
}
@media (max-width: 544px) {
  .order-cart-item__qty {
    flex: 1 1 auto;
    min-width: 8rem;
  }
}
.order-cart-item__qty-label {
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--clr-text-secondary);
  white-space: nowrap;
}
@media (max-width: 544px) {
  .order-cart-item__qty-label {
    font-size: 1.1rem;
  }
}
.order-cart-item__qty-counter {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
}
.order-cart-item__qty-counter.is-disabled {
  opacity: 0.6;
  pointer-events: none;
}
.order-cart-item__qty-counter.is-disabled .counter-input {
  background: var(--clr-bg-secondary);
  border-color: var(--clr-border-secondary);
  cursor: not-allowed;
}
.order-cart-item__qty-counter.is-disabled .counter-input__button {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.order-cart-item__qty-counter .counter-input {
  width: 100%;
  min-width: 9rem;
  max-width: 12rem;
}
@media (max-width: 544px) {
  .order-cart-item__qty-counter .counter-input {
    min-width: auto;
    max-width: 100%;
  }
}
.order-cart-item__price {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex-shrink: 0;
  min-width: 9rem;
}
@media (max-width: 544px) {
  .order-cart-item__price {
    align-items: flex-start;
    text-align: left;
    min-width: auto;
    flex: 1 1 auto;
  }
}
.order-cart-item__price-label {
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--clr-text-secondary);
  white-space: nowrap;
}
@media (max-width: 544px) {
  .order-cart-item__price-label {
    font-size: 1.1rem;
  }
}
.order-cart-item__price-value {
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--clr-text-primary);
  white-space: nowrap;
}
@media (max-width: 544px) {
  .order-cart-item__price-value {
    font-size: 1.5rem;
  }
}
.order-cart-item__actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}
@media (max-width: 544px) {
  .order-cart-item__actions {
    gap: 0.3rem;
  }
}
.order-cart-item__edit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.8rem;
  height: 2.8rem;
  background: transparent;
  border: 0.1rem solid var(--clr-border-primary);
  color: var(--clr-text-secondary);
  cursor: pointer;
  border-radius: 0.4rem;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
  padding: 0;
}
@media (max-width: 544px) {
  .order-cart-item__edit {
    width: 2.6rem;
    height: 2.6rem;
  }
}
.order-cart-item__edit:hover {
  background: var(--clr-primary-50);
  border-color: var(--clr-primary-300);
  color: var(--clr-primary-600);
  transform: translateY(-0.1rem);
  box-shadow: 0 0.1rem 0.2rem rgba(37, 99, 235, 0.1);
}
.order-cart-item__edit:active {
  transform: translateY(0);
  box-shadow: none;
}
.order-cart-item__edit:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.2);
}
.order-cart-item__edit i {
  font-size: 1.2rem;
  line-height: 1;
}
@media (max-width: 544px) {
  .order-cart-item__edit i {
    font-size: 1.1rem;
  }
}
.order-cart-item__remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.8rem;
  height: 2.8rem;
  background: transparent;
  border: 0.1rem solid var(--clr-border-primary);
  color: var(--clr-text-secondary);
  cursor: pointer;
  border-radius: 0.4rem;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
  padding: 0;
}
@media (max-width: 544px) {
  .order-cart-item__remove {
    width: 2.6rem;
    height: 2.6rem;
  }
}
.order-cart-item__remove:hover {
  background: var(--clr-danger-50);
  border-color: var(--clr-danger-300);
  color: var(--clr-danger-600);
  transform: translateY(-0.1rem);
  box-shadow: 0 0.1rem 0.2rem rgba(239, 68, 68, 0.1);
}
.order-cart-item__remove:active {
  transform: translateY(0);
  box-shadow: none;
}
.order-cart-item__remove:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(239, 68, 68, 0.2);
}
.order-cart-item__remove i {
  font-size: 1.2rem;
  line-height: 1;
}
@media (max-width: 544px) {
  .order-cart-item__remove i {
    font-size: 1.1rem;
  }
}
.order-cart-item__children {
  margin-top: 1.2rem;
  padding-top: 1.2rem;
  border-top: 0.1rem solid var(--clr-border-tertiary);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}
.order-cart-item__children-title {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--clr-text-secondary);
  margin-bottom: 0.4rem;
  padding-left: 0.4rem;
}
.order-cart-item__child {
  display: flex;
  gap: 1.2rem;
  padding: 1rem 1.4rem;
  background: var(--clr-bg-secondary);
  border-radius: 0.6rem;
  border: 0.1rem solid var(--clr-border-secondary);
  margin-left: 2rem;
}
@media (max-width: 768px) {
  .order-cart-item__child {
    margin-left: 1rem;
    padding: 0.8rem 1rem;
    gap: 1rem;
  }
}
.order-cart-item__child-image {
  width: 5rem;
  height: 5rem;
  background: var(--clr-bg-primary);
  border-radius: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-text-disabled);
  font-size: 2rem;
  border: 0.1rem solid var(--clr-border-secondary);
  flex-shrink: 0;
  overflow: hidden;
}
@media (max-width: 768px) {
  .order-cart-item__child-image {
    width: 4rem;
    height: 4rem;
    font-size: 1.6rem;
  }
}
.order-cart-item__child-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.order-cart-item__child-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-width: 0;
}
.order-cart-item__child-name {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--clr-text-primary);
  line-height: 1.4;
}
@media (max-width: 768px) {
  .order-cart-item__child-name {
    font-size: 1.3rem;
  }
}
.order-cart-item__child-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.order-cart-item__child-details {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 1.2rem;
  color: var(--clr-text-secondary);
}
@media (max-width: 768px) {
  .order-cart-item__child-details {
    font-size: 1.1rem;
    gap: 0.8rem;
  }
}
.order-cart-item__child-qty, .order-cart-item__child-price, .order-cart-item__child-amount {
  white-space: nowrap;
}
.order-cart-item__child-amount {
  font-weight: 600;
  color: var(--clr-primary-500);
}

.order-cart-group-subtotal {
  padding: 1.2rem 1.6rem;
  background: var(--clr-bg-secondary);
  border-top: 0.1rem solid var(--clr-border-secondary);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.8rem;
}
@media (max-width: 768px) {
  .order-cart-group-subtotal {
    flex-direction: column;
    align-items: flex-end;
    gap: 0.8rem;
    padding: 1rem 1.4rem;
  }
}
@media (max-width: 544px) {
  .order-cart-group-subtotal {
    align-items: stretch;
    padding: 1rem 1.2rem;
  }
}
.order-cart-group-subtotal__item {
  display: flex;
  gap: 0.8rem;
}
@media (max-width: 544px) {
  .order-cart-group-subtotal__item {
    justify-content: space-between;
    width: 100%;
  }
}
.order-cart-group-subtotal__label {
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--clr-text-secondary);
}
@media (max-width: 544px) {
  .order-cart-group-subtotal__label {
    font-size: 1.2rem;
  }
}
.order-cart-group-subtotal__value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--clr-text-primary);
}
@media (max-width: 544px) {
  .order-cart-group-subtotal__value {
    font-size: 1.4rem;
  }
}
.order-cart-group-subtotal__item--selected .order-cart-group-subtotal__label {
  color: var(--clr-primary-500);
  font-weight: 600;
}
.order-cart-group-subtotal__item--selected .order-cart-group-subtotal__value {
  color: var(--clr-primary-600);
  font-size: 1.6rem;
}
@media (max-width: 544px) {
  .order-cart-group-subtotal__item--selected .order-cart-group-subtotal__value {
    font-size: 1.5rem;
  }
}

.order-memo-box {
  background: var(--clr-bg-elevated);
  border: 0.1rem solid var(--clr-border-primary);
  border-radius: 0.8rem;
  padding: 0;
  min-height: 12rem;
  box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.04);
  overflow: hidden;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.order-memo-box:hover {
  box-shadow: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.08);
  border-color: var(--clr-primary-300);
}
.order-memo-box__title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--clr-text-primary);
  padding: 1.2rem 1.6rem;
  background: var(--clr-bg-secondary);
  border-bottom: 0.1rem solid var(--clr-border-secondary);
  margin-bottom: 0;
  letter-spacing: -0.01em;
}
.order-memo-box__input {
  width: 100%;
  min-height: 10rem;
  padding: 1.4rem;
  font-size: 1.4rem;
  border: none;
  border-radius: 0;
  resize: vertical;
  font-family: inherit;
  background: var(--clr-bg-primary);
  color: var(--clr-text-primary);
  line-height: 1.6;
  transition: all 0.2s;
}
.order-memo-box__input::placeholder {
  color: var(--clr-text-disabled);
}
.order-memo-box__input:focus {
  outline: none;
  background: var(--clr-bg-elevated);
  box-shadow: inset 0 0 0 0.1rem var(--clr-primary-400);
}
@media (max-width: 768px) {
  .order-memo-box__input {
    min-height: 8rem;
    padding: 1.2rem;
  }
}

.order-total-box {
  background: var(--clr-bg-elevated);
  border: 0.1rem solid var(--clr-border-primary);
  border-radius: 0.6rem;
  padding: 1.6rem 1.8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (max-width: 768px) {
  .order-total-box {
    flex-direction: column;
    gap: 0.6rem;
    text-align: center;
    padding: 1.4rem 1.6rem;
  }
}
.order-total-box__label {
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--clr-text-secondary);
  letter-spacing: -0.01em;
}
@media (max-width: 768px) {
  .order-total-box__label {
    font-size: 1.3rem;
  }
}
.order-total-box__amount {
  font-size: 2rem;
  font-weight: 700;
  color: var(--clr-primary-500);
  letter-spacing: -0.02em;
}
@media (max-width: 768px) {
  .order-total-box__amount {
    font-size: 1.8rem;
  }
}

.order-submit-btn {
  background: var(--clr-success-600);
  color: #ffffff;
  border: none;
  border-radius: 0.6rem;
  padding: 1.4rem 2.4rem;
  font-size: 1.5rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  width: fit-content;
  min-width: auto;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  box-shadow: 0 0.2rem 0.4rem rgba(34, 197, 94, 0.2);
}
.order-submit-btn:hover {
  background: var(--clr-success-700);
  box-shadow: 0 0.3rem 0.6rem rgba(34, 197, 94, 0.3);
  transform: translateY(-0.1rem);
}
.order-submit-btn:active {
  transform: scale(0.98);
}
@media (max-width: 768px) {
  .order-submit-btn {
    padding: 1.2rem 2rem;
    font-size: 1.4rem;
    width: 100%;
  }
}

.order-product-options {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  margin-top: 1rem;
}

.order-product-option-group {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.order-product-option-label {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--clr-text-primary);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  letter-spacing: -0.01em;
}

.order-product-option-description {
  font-size: 1.3rem;
  color: var(--clr-text-secondary);
  line-height: 1.5;
  margin-top: -0.4rem;
}

.order-product-option-items {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.order-product-option-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 1.2rem;
  border: 0.1rem solid var(--clr-border-primary);
  border-radius: 0.6rem;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  background: var(--clr-bg-primary);
  position: relative;
  user-select: none;
}
.order-product-option-item:hover {
  background: var(--clr-bg-secondary);
  border-color: var(--clr-primary-400);
  transform: translateY(-0.1rem);
  box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.05);
}
.order-product-option-item input[type=radio] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.order-product-option-item input[type=radio]:checked + .order-product-option-item-preview {
  background: var(--clr-primary-500);
  border-color: var(--clr-primary-500);
}
.order-product-option-item input[type=radio]:checked + .order-product-option-item-preview::after {
  opacity: 1;
  transform: scale(1);
}
.order-product-option-item input[type=radio]:checked ~ .order-product-option-item-label {
  color: var(--clr-primary-500);
  font-weight: 600;
}
.order-product-option-item input[type=radio]:checked ~ .order-product-option-item-preview, .order-product-option-item input[type=radio]:checked ~ .order-product-option-item-label {
  transform: scale(1.02);
}
.order-product-option-item__preview {
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  border: 0.15rem solid var(--clr-border-primary);
  flex-shrink: 0;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  background: var(--clr-bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
}
.order-product-option-item__preview::after {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: #ffffff;
  opacity: 0;
  transform: scale(0);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.order-product-option-item__label {
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--clr-text-primary);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
}

.order-color-options-wrapper {
  margin-top: 1.5rem;
}

.order-color-options-label {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--clr-text-primary);
  margin-bottom: 1rem;
  display: block;
}

.order-color-options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 0.8rem;
}

.order-color-option {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.8rem;
  padding: 0.8rem;
  border: 0.1rem solid var(--clr-border-primary);
  border-radius: 0.6rem;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  background: var(--clr-bg-primary);
  position: relative;
}
.order-color-option:hover {
  background: var(--clr-bg-secondary);
  border-color: var(--clr-primary-400);
  transform: translateY(-0.1rem);
  box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.1);
}
.order-color-option input[type=radio] {
  display: none;
}
.order-color-option input[type=radio]:checked ~ .order-color-option__images {
  border-color: var(--clr-primary-500);
}
.order-color-option input[type=radio]:checked ~ .order-color-option__preview {
  border-color: var(--clr-primary-500);
  border-width: 0.2rem;
  box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.2);
  transform: scale(1.05);
}
.order-color-option input[type=radio]:checked ~ .order-color-option__label {
  color: var(--clr-primary-500);
  font-weight: 600;
}
.order-color-option__images {
  width: 100%;
  border-radius: 0.5rem;
  overflow: hidden;
  border: 0.1rem solid var(--clr-border-primary);
  background: var(--clr-bg-secondary);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.order-color-option__images-main {
  width: 100%;
  aspect-ratio: 1;
  margin-bottom: 0.4rem;
}
.order-color-option__images-main-item {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--clr-bg-tertiary);
}
.order-color-option__images-main-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.order-color-option__images-main-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--clr-text-tertiary);
  font-size: 2rem;
}
.order-color-option__images-placeholder {
  width: 100%;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  background: var(--clr-bg-tertiary);
  color: var(--clr-text-disabled);
  border-radius: 0.5rem;
}
.order-color-option__images-placeholder i {
  font-size: 3rem;
  opacity: 0.5;
}
.order-color-option__images-placeholder span {
  font-size: 1.2rem;
  opacity: 0.7;
}
.order-color-option__images-thumbs {
  width: 100%;
  padding: 0.2rem 0;
}
.order-color-option__images-thumbs-item {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 0.3rem;
  overflow: hidden;
  background: var(--clr-bg-secondary);
  border: 0.15rem solid var(--clr-border-primary);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0.6;
}
.order-color-option__images-thumbs-item:hover {
  opacity: 0.8;
  border-color: var(--clr-primary-400);
}
.order-color-option__images-thumbs-item.active {
  opacity: 1;
  border-color: var(--clr-primary-500);
  box-shadow: 0 0 0 0.15rem rgba(37, 99, 235, 0.2);
}
.order-color-option__images-thumbs-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.order-color-option__preview {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 0.1rem solid var(--clr-border-primary);
  flex-shrink: 0;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.1);
  align-self: center;
}
.order-color-option__check {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #ffffff;
  font-size: 0.8rem;
  display: none;
  text-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.3);
}
input[type=radio]:checked ~ .order-color-option__preview .order-color-option__check {
  display: block;
}
.order-color-option__label {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--clr-text-primary);
  transition: color 0.2s;
  white-space: nowrap;
  text-align: center;
}

.order-color-images {
  margin-top: 1.5rem;
  padding: 1.5rem;
  background: var(--clr-bg-secondary);
  border: 0.1rem solid var(--clr-border-secondary);
  border-radius: 0.8rem;
}
.order-color-images__main {
  width: 100%;
  margin-bottom: 1rem;
}
.order-color-images__main-item {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 0.6rem;
  overflow: hidden;
  background: var(--clr-bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.order-color-images__main-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.order-color-images__thumbs {
  width: 100%;
}
.order-color-images__thumbs-wrapper {
  display: flex;
  gap: 0.8rem;
}
.order-color-images__thumb-item {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 0.4rem;
  overflow: hidden;
  background: var(--clr-bg-secondary);
  border: 0.2rem solid var(--clr-border-primary);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0.6;
}
.order-color-images__thumb-item:hover {
  opacity: 0.8;
  border-color: var(--clr-primary-400);
  transform: scale(1.05);
}
.order-color-images__thumb-item.active {
  opacity: 1;
  border-color: var(--clr-primary-500);
  box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.2);
}
.order-color-images__thumb-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.order-color-images__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-text-disabled);
  font-size: 4rem;
}

.order-product-option-wrapper {
  margin-top: 1.5rem;
  padding: 1.5rem;
  background: var(--clr-bg-secondary);
  border: 0.1rem solid var(--clr-border-secondary);
  border-radius: 0.8rem;
}

.order-product-option-label {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--clr-text-primary);
  margin-bottom: 0.8rem;
  display: block;
}

.order-product-option-description {
  font-size: 1.3rem;
  color: var(--clr-text-secondary);
  margin-bottom: 1rem;
  line-height: 1.6;
}

.order-product-option-radios {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}
@media (max-width: 544px) {
  .order-product-option-radios {
    gap: 0.6rem;
  }
}

.order-product-option-radio {
  position: relative;
  cursor: pointer;
  flex: 0 0 auto;
  min-width: 13rem;
  max-width: 16rem;
  width: 100%;
}
@media (max-width: 768px) {
  .order-product-option-radio {
    min-width: 12rem;
    max-width: 15rem;
  }
}
@media (max-width: 544px) {
  .order-product-option-radio {
    min-width: calc(50% - 0.3rem);
    max-width: calc(50% - 0.3rem);
  }
}
.order-product-option-radio input[type=radio] {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  pointer-events: auto;
}
.order-product-option-radio input[type=radio]:checked ~ .order-product-option-radio__card {
  border-color: var(--clr-primary-500);
  background: var(--clr-primary-50);
  box-shadow: 0 0 0 0.15rem rgba(59, 130, 246, 0.25), 0 0.2rem 0.8rem rgba(59, 130, 246, 0.15);
  transform: translateY(-0.1rem);
}
.order-product-option-radio input[type=radio]:checked ~ .order-product-option-radio__card .order-product-option-radio__check {
  opacity: 1;
  transform: scale(1);
}
.order-product-option-radio input[type=radio]:checked ~ .order-product-option-radio__card .order-product-option-radio__label {
  color: var(--clr-primary-600);
  font-weight: 600;
}
.order-product-option-radio input[type=radio]:checked ~ .order-product-option-radio__card .order-product-option-radio__price {
  color: var(--clr-primary-500);
  font-weight: 600;
}
.order-product-option-radio input[type=radio]:checked ~ .order-product-option-radio__card .order-product-option-radio__images {
  border-color: var(--clr-primary-500);
}
.order-product-option-radio__card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.8rem;
  border: 0.1rem solid var(--clr-border-primary);
  border-radius: 0.6rem;
  background: var(--clr-bg-elevated);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.05);
}
@media (max-width: 544px) {
  .order-product-option-radio__card {
    padding: 0.7rem;
    gap: 0.5rem;
  }
}
.order-product-option-radio__card:hover {
  background: var(--clr-bg-secondary);
  border-color: var(--clr-primary-400);
  box-shadow: 0 0.1rem 0.4rem rgba(0, 0, 0, 0.1);
}
.order-product-option-radio__check {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  width: 1.8rem;
  height: 1.8rem;
  background: var(--clr-primary-500);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 0.85rem;
  opacity: 0;
  transform: scale(0);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 2;
  box-shadow: 0 0.15rem 0.3rem rgba(59, 130, 246, 0.3);
}
@media (max-width: 544px) {
  .order-product-option-radio__check {
    top: 0.5rem;
    right: 0.5rem;
    width: 1.6rem;
    height: 1.6rem;
    font-size: 0.75rem;
  }
}
.order-product-option-radio__no-image {
  width: 100%;
  height: 8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--clr-bg-secondary);
  border: 0.1rem dashed var(--clr-border-secondary);
  border-radius: 0.5rem;
  color: var(--clr-text-disabled);
}
@media (max-width: 544px) {
  .order-product-option-radio__no-image {
    height: 7rem;
  }
}
.order-product-option-radio__no-image i {
  font-size: 2.2rem;
  opacity: 0.5;
}
@media (max-width: 544px) {
  .order-product-option-radio__no-image i {
    font-size: 2rem;
  }
}
.order-product-option-radio__no-image span {
  font-size: 1.1rem;
  opacity: 0.7;
}
@media (max-width: 544px) {
  .order-product-option-radio__no-image span {
    font-size: 1rem;
  }
}
.order-product-option-radio__content {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  align-items: flex-start;
}
.order-product-option-radio__images-item {
  position: relative;
  overflow: hidden;
  height: 0;
  padding-bottom: 75%;
}
.order-product-option-radio__images-item img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.order-product-option-radio__images {
  width: 100%;
  border-radius: 0.4rem;
  overflow: hidden;
  border: 0.1rem solid var(--clr-border-primary);
  background: var(--clr-bg-secondary);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.order-product-option-radio__images-main {
  width: 100%;
}
.order-product-option-radio__images-main-item {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--clr-bg-tertiary);
}
.order-product-option-radio__images-main-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.order-product-option-radio__images-main-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--clr-text-tertiary);
  font-size: 1.6rem;
}
@media (max-width: 544px) {
  .order-product-option-radio__images-main-placeholder {
    font-size: 1.4rem;
  }
}
.order-product-option-radio__images-thumbs {
  width: 100%;
  padding: 0.15rem 0;
  display: flex;
  gap: 0.3rem;
  overflow-x: auto;
}
@media (max-width: 544px) {
  .order-product-option-radio__images-thumbs {
    padding: 0.1rem 0;
    gap: 0.25rem;
  }
}
.order-product-option-radio__images-thumbs-item {
  flex-shrink: 0;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 0.3rem;
  overflow: hidden;
  background: var(--clr-bg-secondary);
  border: 0.1rem solid var(--clr-border-primary);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0.6;
}
@media (max-width: 544px) {
  .order-product-option-radio__images-thumbs-item {
    width: 3rem;
    height: 3rem;
  }
}
.order-product-option-radio__images-thumbs-item:hover {
  opacity: 0.8;
  border-color: var(--clr-primary-400);
}
.order-product-option-radio__images-thumbs-item.active {
  opacity: 1;
  border-color: var(--clr-primary-500);
  box-shadow: 0 0 0 0.1rem rgba(37, 99, 235, 0.2);
}
.order-product-option-radio__images-thumbs-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.order-product-option-radio__label {
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--clr-text-primary);
  transition: all 0.2s;
  text-align: center;
  line-height: 1.3;
}
@media (max-width: 544px) {
  .order-product-option-radio__label {
    font-size: 1.1rem;
  }
}
.order-product-option-radio__price {
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--clr-text-secondary);
  transition: all 0.2s;
  text-align: center;
}
@media (max-width: 544px) {
  .order-product-option-radio__price {
    font-size: 1rem;
  }
}

.order-loupe-options {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  margin-top: 1rem;
}

.order-loupe-field {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.order-loupe-field__label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  flex-wrap: wrap;
}
.order-loupe-field__label {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--clr-text-primary);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.order-loupe-field__basic {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--clr-text-secondary);
  cursor: pointer;
  user-select: none;
}
.order-loupe-field__basic input[type=checkbox] {
  cursor: pointer;
}
.order-loupe-field__input {
  padding: 1rem 1.2rem;
  font-size: 1.4rem;
  border: 0.1rem solid var(--clr-border-primary);
  border-radius: 0.6rem;
  background: var(--clr-bg-primary);
  color: var(--clr-text-primary);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  width: 100%;
}
.order-loupe-field__input:focus {
  outline: none;
  border-color: var(--clr-primary-500);
  box-shadow: 0 0 0 0.3rem rgba(59, 130, 246, 0.1);
  background: var(--clr-bg-elevated);
}
.order-loupe-field__input:hover {
  border-color: var(--clr-primary-400);
}
.order-loupe-field__input--readonly {
  background: var(--clr-bg-secondary);
  cursor: not-allowed;
  opacity: 0.8;
}
.order-loupe-field__input[readonly] {
  background: var(--clr-bg-secondary);
  cursor: not-allowed;
  opacity: 0.8;
}

.order-add-option {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  margin-top: 1.5rem;
  padding: 1.6rem;
  background: var(--clr-bg-elevated);
  border: 0.1rem solid var(--clr-border-primary);
  border-radius: 0.8rem;
  box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.05);
}
.order-add-option__main-label {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--clr-text-primary);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.order-add-option__step1, .order-add-option__step2 {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.order-add-option__group {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 1.2rem;
  background: var(--clr-bg-secondary);
  border: 0.1rem solid var(--clr-border-secondary);
  border-radius: 0.6rem;
}
.order-add-option__group:not(:last-child) {
  margin-bottom: 1rem;
}
.order-add-option__title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--clr-primary-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.4rem;
  padding-bottom: 0.6rem;
  border-bottom: 0.2rem solid var(--clr-primary-400);
}
.order-add-option__radio {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.8rem 1rem;
  border: 0.1rem solid var(--clr-border-primary);
  border-radius: 0.6rem;
  background: var(--clr-bg-elevated);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.order-add-option__radio:hover {
  background: var(--clr-bg-secondary);
  border-color: var(--clr-primary-400);
  transform: translateX(0.2rem);
}
.order-add-option__radio input[type=radio] {
  width: 1.8rem;
  height: 1.8rem;
  cursor: pointer;
  accent-color: var(--clr-primary-500);
  flex-shrink: 0;
}
.order-add-option__radio:has(input[type=radio]:checked) {
  background: var(--clr-primary-500);
  border-color: var(--clr-primary-500);
  box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.2);
}
.order-add-option__radio:has(input[type=radio]:checked) .order-add-option__radio-label {
  color: var(--clr-base-white);
  font-weight: 600;
}
.order-add-option__radio-label {
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--clr-text-primary);
  cursor: pointer;
  transition: all 0.2s;
  flex: 1;
}

.order-vision-photo-field {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.5rem;
  padding: 1.6rem;
  background: var(--clr-bg-secondary);
  border: 0.1rem solid var(--clr-border-secondary);
  border-radius: 0.8rem;
}
.order-vision-photo-field__label {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--clr-text-primary);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.order-vision-photo-field__description {
  font-size: 1.3rem;
  color: var(--clr-text-secondary);
  line-height: 1.5;
}
.order-vision-photo-field__uploader {
  margin-top: 0.8rem;
}

.order-engraving-field {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  margin-top: 1.5rem;
  padding: 1.6rem;
  background: var(--clr-bg-secondary);
  border: 0.1rem solid var(--clr-border-secondary);
  border-radius: 0.8rem;
}
.order-engraving-field__label {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--clr-text-primary);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.order-engraving-field__input {
  padding: 1rem 1.2rem;
  font-size: 1.4rem;
  border: 0.1rem solid var(--clr-border-primary);
  border-radius: 0.6rem;
  background: var(--clr-bg-primary);
  color: var(--clr-text-primary);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  width: 100%;
}
.order-engraving-field__input:focus {
  outline: none;
  border-color: var(--clr-primary-500);
  box-shadow: 0 0 0 0.3rem rgba(59, 130, 246, 0.1);
  background: var(--clr-bg-elevated);
}
.order-engraving-field__input:hover {
  border-color: var(--clr-primary-400);
}
.order-engraving-field__input.no-form-field__input--error {
  border-color: var(--clr-danger-500);
  background: var(--clr-danger-50);
}
.order-engraving-field__error {
  margin-top: 0.4rem;
  font-size: 1.2rem;
  color: var(--clr-danger-600);
}

.order-engraving-input-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-top: 1rem;
}

.order-product-summary-box__content {
  padding-top: 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.4rem;
  align-items: center;
}
@media (max-width: 768px) {
  .order-product-summary-box__content {
    grid-template-columns: 1fr;
    gap: 1.6rem;
  }
}
.order-product-summary-box__qty {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.order-product-summary-box__qty-label {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--clr-text-primary);
  letter-spacing: -0.01em;
}
.order-product-summary-box__subtotal {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 1.2rem 1.6rem;
  background: linear-gradient(135deg, var(--clr-primary-50) 0%, var(--clr-primary-100) 100%);
  border: 0.1rem solid var(--clr-primary-200);
  border-radius: 0.6rem;
  box-shadow: 0 0.1rem 0.3rem rgba(37, 99, 235, 0.1);
}
@media (max-width: 768px) {
  .order-product-summary-box__subtotal {
    padding: 1rem 1.4rem;
  }
}
.order-product-summary-box__subtotal-label {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--clr-text-secondary);
  letter-spacing: -0.01em;
}
.order-product-summary-box__subtotal-value {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--clr-primary-600);
  letter-spacing: -0.02em;
  line-height: 1;
}
@media (max-width: 768px) {
  .order-product-summary-box__subtotal-value {
    font-size: 2rem;
  }
}
.order-product-summary-box__subtotal-currency {
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--clr-primary-500);
  opacity: 0.8;
}
@media (max-width: 768px) {
  .order-product-summary-box__subtotal-currency {
    font-size: 1.4rem;
  }
}
.order-product-summary-box__subtotal-amount {
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--clr-primary-600);
}
@media (max-width: 768px) {
  .order-product-summary-box__subtotal-amount {
    font-size: 2rem;
  }
}

.order-quantity-section {
  margin-top: 2.4rem;
  padding-top: 2.4rem;
  border-top: 0.2rem solid var(--clr-border-primary);
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.order-quantity-field {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.order-quantity-field__label {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--clr-text-primary);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.order-quantity-field__counter {
  width: fit-content;
}

.order-vision-table-wrapper {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 0.2rem solid var(--clr-border-primary);
  position: relative;
  z-index: 1;
}

.order-vision-table-label {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--clr-text-primary);
  margin-bottom: 1.2rem;
  display: block;
  letter-spacing: -0.01em;
}

.order-vision-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--clr-bg-elevated);
  border-radius: 0.8rem;
  overflow: hidden;
  box-shadow: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.08);
  border: 0.1rem solid var(--clr-border-primary);
}
.order-vision-table__input {
  width: 100%;
  max-width: 10rem;
  padding: 0.8rem 1rem;
  font-size: 1.3rem;
  border: 0.1rem solid var(--clr-border-primary);
  border-radius: 0.5rem;
  background: var(--clr-bg-elevated);
  color: var(--clr-text-primary);
  text-align: center;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.order-vision-table__input:focus {
  outline: none;
  border-color: var(--clr-primary-500);
  box-shadow: 0 0 0 0.3rem rgba(59, 130, 246, 0.15);
  background: var(--clr-bg-primary);
  transform: translateY(-0.1rem);
}
.order-vision-table__input:hover {
  border-color: var(--clr-primary-400);
  background: var(--clr-bg-secondary);
}
.order-vision-table__input::placeholder {
  color: var(--clr-text-disabled);
  font-size: 1.2rem;
  opacity: 0.6;
}
.order-vision-table__input.no-form-field__input--error {
  border-color: var(--clr-danger-500);
  background: var(--clr-danger-50);
  color: var(--clr-danger-700);
}
.order-vision-table__input.no-form-field__input--error:focus {
  border-color: var(--clr-danger-500);
  box-shadow: 0 0 0 0.3rem rgba(239, 68, 68, 0.15);
  background: var(--clr-danger-50);
}
.order-vision-table__input.no-form-field__input--error:hover {
  border-color: var(--clr-danger-500);
  background: var(--clr-danger-100);
}
@media (prefers-color-scheme: dark) {
  .order-vision-table__input.no-form-field__input--error {
    background: var(--clr-danger-900);
    color: var(--clr-danger-100);
  }
  .order-vision-table__input.no-form-field__input--error:focus {
    background: var(--clr-danger-900);
    box-shadow: 0 0 0 0.3rem rgba(239, 68, 68, 0.2);
  }
  .order-vision-table__input.no-form-field__input--error:hover {
    background: var(--clr-danger-800);
  }
}
.order-vision-table__error {
  margin-top: 1rem;
  padding: 1rem 1.2rem;
  background: var(--clr-danger-50);
  border: 0.1rem solid var(--clr-danger-500);
  border-radius: 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  box-shadow: 0 0.2rem 0.4rem rgba(239, 68, 68, 0.1);
  position: relative;
  padding-left: 4rem;
}
.order-vision-table__error::before {
  content: "\f06a";
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  position: absolute;
  left: 1.2rem;
  top: 1rem;
  color: var(--clr-danger-500);
  font-size: 1.6rem;
  z-index: 1;
}
@media (prefers-color-scheme: dark) {
  .order-vision-table__error {
    background: var(--clr-danger-900);
    border-color: var(--clr-danger-500);
  }
  .order-vision-table__error::before {
    color: var(--clr-danger-400);
  }
}
.order-vision-table__error .vision-error-item {
  font-size: 1.3rem;
  color: var(--clr-danger-700);
  padding: 0.4rem 0;
  border-bottom: 0.1rem solid var(--clr-danger-200);
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
@media (prefers-color-scheme: dark) {
  .order-vision-table__error .vision-error-item {
    color: var(--clr-danger-100);
    border-bottom-color: var(--clr-danger-700);
  }
}
.order-vision-table__error .vision-error-item:last-child {
  border-bottom: none;
}
.order-vision-table thead {
  background: var(--clr-bg-secondary);
}
@media (prefers-color-scheme: dark) {
  .order-vision-table thead {
    background: var(--clr-bg-tertiary);
  }
}
.order-vision-table th {
  padding: 1.2rem 1rem;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--clr-primary-500);
  text-align: center;
  border-bottom: 0.2rem solid var(--clr-primary-300);
  white-space: nowrap;
}
@media (prefers-color-scheme: dark) {
  .order-vision-table th {
    color: var(--clr-primary-400);
    border-bottom-color: var(--clr-primary-600);
  }
}
.order-vision-table th[scope=row] {
  background: linear-gradient(to right, var(--clr-primary-100), var(--clr-primary-50));
  color: var(--clr-primary-900);
  font-weight: 700;
  text-align: center;
  width: 5rem;
  position: sticky;
  left: 0;
  z-index: 1;
}
@media (prefers-color-scheme: dark) {
  .order-vision-table th[scope=row] {
    background: linear-gradient(to right, var(--clr-primary-900), var(--clr-primary-800));
    color: var(--clr-primary-100);
  }
}
.order-vision-table tbody {
  background: var(--clr-bg-primary);
}
.order-vision-table tbody tr {
  transition: background 0.2s;
}
.order-vision-table tbody tr:hover {
  background: var(--clr-bg-secondary);
}
.order-vision-table tbody tr:not(:last-child) {
  border-bottom: 0.1rem solid var(--clr-border-tertiary);
}
.order-vision-table tbody td {
  padding: 1rem 0.8rem;
  text-align: center;
  background: var(--clr-bg-primary);
}
.order-vision-table tbody td input {
  width: 100%;
  max-width: 10rem;
  padding: 0.8rem 1rem;
  font-size: 1.3rem;
  border: 0.1rem solid var(--clr-border-primary);
  border-radius: 0.5rem;
  background: var(--clr-bg-elevated);
  color: var(--clr-text-primary);
  text-align: center;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.order-vision-table tbody td input:focus {
  outline: none;
  border-color: var(--clr-primary-500);
  box-shadow: 0 0 0 0.3rem rgba(59, 130, 246, 0.15);
  background: var(--clr-bg-primary);
  transform: translateY(-0.1rem);
}
.order-vision-table tbody td input:hover {
  border-color: var(--clr-primary-400);
  background: var(--clr-bg-secondary);
}
.order-vision-table tbody td input::placeholder {
  color: var(--clr-text-disabled);
  font-size: 1.2rem;
  opacity: 0.6;
}
.order-vision-table tbody th[scope=row] {
  background: linear-gradient(to right, var(--clr-primary-100), var(--clr-primary-50));
  color: var(--clr-primary-900);
  font-weight: 700;
  text-align: center;
  padding: 1rem;
  position: sticky;
  left: 0;
  z-index: 1;
}
@media (max-width: 768px) {
  .order-vision-table {
    font-size: 1.2rem;
    border-radius: 0.6rem;
  }
  .order-vision-table th {
    padding: 1rem 0.6rem;
    font-size: 1.2rem;
  }
  .order-vision-table th[scope=row] {
    width: 4rem;
    padding: 1rem 0.5rem;
  }
  .order-vision-table td {
    padding: 0.8rem 0.5rem;
  }
  .order-vision-table td input {
    padding: 0.7rem 0.8rem;
    font-size: 1.2rem;
    max-width: 100%;
  }
}

.order-subtotal-preview {
  padding: 1.6rem;
  background: var(--clr-bg-elevated);
  border: 0.1rem solid var(--clr-border-primary);
  border-radius: 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  box-shadow: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
}
.order-subtotal-preview::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0.3rem;
  background: linear-gradient(90deg, var(--clr-primary-500) 0%, var(--clr-primary-400) 100%);
}
.order-subtotal-preview__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.8rem 0;
}
.order-subtotal-preview__item:not(:last-child) {
  border-bottom: 0.1rem solid var(--clr-border-secondary);
}
.order-subtotal-preview__item--total {
  margin-top: 0.4rem;
  padding-top: 1.2rem;
  border-top: 0.2rem solid var(--clr-primary-500);
  border-bottom: none;
}
.order-subtotal-preview__label {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--clr-text-secondary);
  letter-spacing: -0.01em;
}
.order-subtotal-preview__value {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--clr-text-primary);
  letter-spacing: -0.01em;
}
.order-subtotal-preview__value #subtotal-total {
  color: var(--clr-primary-500);
  font-weight: 700;
  font-size: 2rem;
}

.order-prescription-lenses {
  margin-top: 1.5rem;
  padding: 1.6rem;
  background: var(--clr-bg-elevated);
  border: 0.1rem solid var(--clr-border-primary);
  border-radius: 0.8rem;
}
.order-prescription-lenses__title {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--clr-text-primary);
  margin-bottom: 1.2rem;
  padding-bottom: 0.8rem;
  border-bottom: 0.1rem solid var(--clr-border-secondary);
}
.order-prescription-lenses__help {
  font-size: 1.2rem;
  color: var(--clr-text-secondary, #666);
  margin: -0.4rem 0 1rem;
  line-height: 1.45;
}
.order-prescription-lenses__content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.order-prescription-lenses__empty, .order-prescription-lenses__error {
  color: var(--clr-text-disabled);
  font-size: 1.3rem;
  text-align: center;
  padding: 1rem 0;
}
.order-prescription-lenses__error {
  color: var(--clr-danger-600);
}

.additional-products-item {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.2rem;
  background: var(--clr-bg-secondary);
  border: 0.1rem solid var(--clr-border-secondary);
  border-radius: 0.6rem;
  transition: all 0.2s;
}
.additional-products-item:hover {
  background: var(--clr-bg-tertiary);
  border-color: var(--clr-primary-300);
}
.additional-products-item__checkbox {
  flex-shrink: 0;
}
.additional-products-item__checkbox-input {
  display: none;
}
.additional-products-item__checkbox-label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  cursor: pointer;
}
.additional-products-item__image {
  flex-shrink: 0;
  width: 6rem;
  height: 6rem;
  border-radius: 0.6rem;
  overflow: hidden;
  background: var(--clr-bg-tertiary);
  border: 0.1rem solid var(--clr-border-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.additional-products-item__image-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.additional-products-item__image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--clr-text-disabled);
  font-size: 2rem;
}
.additional-products-item__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.additional-products-item__name {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--clr-text-primary);
}
.additional-products-item__code {
  font-size: 1.2rem;
  color: var(--clr-text-secondary);
}
.additional-products-item__details {
  display: flex;
  gap: 1.5rem;
  align-items: center;
}
.additional-products-item__qty {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  text-align: right;
}
.additional-products-item__qty-label {
  font-size: 1.2rem;
  color: var(--clr-text-secondary);
}
.additional-products-item__qty-input {
  width: 6rem;
  padding: 0.4rem 0.8rem;
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--clr-text-primary);
  background: var(--clr-bg-primary);
  border: 0.1rem solid var(--clr-border-primary);
  border-radius: 0.4rem;
  text-align: center;
}
.additional-products-item__qty-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.additional-products-item__price, .additional-products-item__total {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  text-align: right;
}
.additional-products-item__price-label, .additional-products-item__total-label {
  font-size: 1.2rem;
  color: var(--clr-text-secondary);
}
.additional-products-item__price-value {
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--clr-text-primary);
}
.additional-products-item__total-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--clr-primary-500);
}

.no-order-items-preview {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  padding: 0.4rem 0;
}

.no-order-item-row {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.8rem;
  background-color: var(--clr-gray-50);
  border-radius: var(--radius-sm);
  border-left: 0.3rem solid var(--clr-primary-500);
}

.no-order-item-name {
  font-weight: 600;
  font-size: 1.4rem;
  color: var(--clr-gray-900);
}

.no-order-item-qty {
  font-size: 1.3rem;
  color: var(--clr-gray-600);
  font-weight: 500;
}

.no-order-item-color {
  display: inline-block;
  padding: 0.3rem 0.8rem;
  background-color: var(--clr-info-100);
  color: var(--clr-info-700);
  border-radius: var(--radius-xs);
  font-size: 1.2rem;
  font-weight: 500;
}

.no-order-item-option {
  display: inline-block;
  padding: 0.3rem 0.8rem;
  background-color: var(--clr-warning-100);
  color: var(--clr-warning-700);
  border-radius: var(--radius-xs);
  font-size: 1.2rem;
  font-weight: 500;
  margin-right: 0.4rem;
}

.no-loupe-preview {
  margin-top: 0.6rem;
}

.no-loupe-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.2rem;
  background-color: var(--clr-white);
  border-radius: var(--radius-xs);
  overflow: hidden;
}
.no-loupe-table th {
  background-color: var(--clr-gray-100);
  color: var(--clr-gray-700);
  font-weight: 600;
  padding: 0.5rem 0.8rem;
  text-align: left;
  border-right: 0.1rem solid var(--clr-gray-200);
  width: 4rem;
}
.no-loupe-table td {
  padding: 0.5rem 0.8rem;
  color: var(--clr-gray-800);
  border-top: 0.1rem solid var(--clr-gray-200);
}
.no-loupe-table tr:first-child td {
  border-top: none;
}

@media (max-width: 768px) {
  .no-order-items-preview {
    gap: 0.8rem;
  }
  .no-order-item-row {
    padding: 0.6rem;
  }
  .no-order-item-name {
    font-size: 1.3rem;
  }
  .no-loupe-table {
    font-size: 1.1rem;
  }
}
/**
 * Order History Component Styles
 * 주문 기록 스타일 - 미니멀하고 직관적인 디자인
 */
.no-order-history-settings {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.no-order-history-form {
  background: var(--clr-bg-elevated);
  border: 1px solid var(--clr-border-primary);
  border-radius: 1.6rem;
  padding: 2.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.no-order-history-form__header {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 2px solid var(--clr-border-primary);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
}
.no-order-history-form__title {
  font-size: 2rem;
  font-weight: 600;
  margin: 0;
  color: var(--clr-text-primary);
  display: flex;
  align-items: center;
  gap: 0.8rem;
  transition: color 0.2s ease;
}
.no-order-history-form__title i {
  color: var(--clr-primary-500);
  font-size: 1.8rem;
  transition: color 0.2s ease;
}
.no-order-history-form .no-form {
  margin-top: 0;
}

.no-order-history-settings__list-wrapper {
  margin-top: 1.5rem;
}

.no-order-history-settings__list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--clr-border-primary);
}
.no-order-history-settings__list-title {
  font-size: 2rem;
  font-weight: 600;
  margin: 0;
  color: var(--clr-text-primary);
}
.no-order-history-settings__count {
  font-size: 1.2rem;
  color: var(--clr-primary-500);
  background: var(--clr-primary-50);
  padding: 0.6rem 1.2rem;
  border-radius: 2.5rem;
  font-weight: 500;
}
.no-order-history-settings__list {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.no-order-history-settings__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  padding: 5rem 3rem;
  background: var(--clr-bg-elevated);
  border-radius: 1.6rem;
  border: 2px dashed var(--clr-border-primary);
}
.no-order-history-settings__empty i {
  font-size: 4rem;
  color: var(--clr-text-tertiary);
  margin-bottom: 1.5rem;
  display: block;
}
.no-order-history-settings__empty p {
  margin: 0;
  color: var(--clr-text-secondary);
  font-size: 1.4rem;
}

.no-order-history-card {
  background: var(--clr-bg-elevated);
  border: 1px solid var(--clr-border-primary);
  border-radius: 1.4rem;
  padding: 0;
  transition: all 0.2s ease;
  overflow: hidden;
}
.no-order-history-card:hover {
  border-color: var(--clr-primary-300);
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.08);
}
.no-order-history-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
  padding: 1.5rem 2rem;
  border-bottom: 1px solid var(--clr-border-primary);
}
.no-order-history-card__meta {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  flex: 1;
  min-width: 0;
}
.no-order-history-card__status-wrapper {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
}
.no-order-history-card__status {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--clr-text-primary);
  line-height: 1.5;
}
.no-order-history-card__important-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  background: var(--clr-warning-500);
  color: #ffffff;
  border-radius: 50%;
  font-size: 0.9rem;
  flex-shrink: 0;
}
.no-order-history-card__important-badge i {
  font-size: 0.9rem;
}
.no-order-history-card__time {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.2rem;
  color: var(--clr-text-secondary);
  font-weight: 400;
}
.no-order-history-card__time i {
  font-size: 1.1rem;
  color: var(--clr-text-tertiary);
}
.no-order-history-card__time span {
  line-height: 1.5;
}
.no-order-history-card__actions {
  display: flex;
  gap: 0.6rem;
  flex-shrink: 0;
}
.no-order-history-card__action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 0.8rem;
  font-size: 1.2rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  background: transparent;
}
.no-order-history-card__action-btn i {
  font-size: 1.2rem;
}
.no-order-history-card__action-btn:hover {
  transform: scale(1.05);
}
.no-order-history-card__action-btn--edit {
  color: var(--clr-text-secondary);
  border-color: var(--clr-border-primary);
}
.no-order-history-card__action-btn--edit:hover {
  background: var(--clr-primary-50);
  border-color: var(--clr-primary-300);
  color: var(--clr-primary-600);
}
.no-order-history-card__action-btn--delete {
  color: var(--clr-danger-500);
  border-color: var(--clr-danger-200);
}
.no-order-history-card__action-btn--delete:hover {
  background: var(--clr-danger-50);
  border-color: var(--clr-danger-300);
  color: var(--clr-danger-600);
}
.no-order-history-card__body {
  padding: 1.5rem 2rem;
}
.no-order-history-card__memo {
  color: var(--clr-text-secondary);
  font-size: 1.2rem;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
}
.no-order-history-card__delete-form {
  display: inline-block;
  margin: 0;
}
@media (max-width: 640px) {
  .no-order-history-card__header {
    padding: 1.2rem 1.5rem;
  }
  .no-order-history-card__body {
    padding: 1.2rem 1.5rem;
  }
  .no-order-history-card__status {
    font-size: 1.2rem;
  }
  .no-order-history-card__time {
    font-size: 1rem;
  }
  .no-order-history-card__action-btn {
    width: 2.4rem;
    height: 2.4rem;
  }
  .no-order-history-card__action-btn i {
    font-size: 1rem;
  }
}

[data-theme=dark] .no-order-history-form {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
[data-theme=dark] .no-order-history-card:hover {
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15);
}
[data-theme=dark] .no-order-history-card__action-btn--edit:hover {
  background: var(--clr-primary-900);
}
[data-theme=dark] .no-order-history-card__action-btn--delete:hover {
  background: var(--clr-danger-900);
}

[data-theme=light] .no-order-history-form {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
[data-theme=light] .no-order-history-card:hover {
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.08);
}

.no-order-table-listing {
  position: relative;
}

.no-order-table-scrollbar-top {
  display: block;
  width: 100%;
  height: 1.2rem;
  margin-bottom: 0.5rem;
  padding: 0.2rem 0;
  cursor: pointer;
  position: sticky;
  top: 0;
  z-index: 7;
  background-color: var(--clr-bg-elevated);
}
.no-order-table-scrollbar-top__track {
  width: 100%;
  height: 100%;
  background-color: var(--clr-bg-secondary);
  border-radius: 0.6rem;
  position: relative;
  border: 0.1rem solid var(--clr-border-secondary);
}
.no-order-table-scrollbar-top__thumb {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: var(--clr-primary-500);
  border-radius: 0.6rem;
  cursor: grab;
  transition: background-color 0.2s ease;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  pointer-events: auto;
  min-width: 2rem;
}
.no-order-table-scrollbar-top__thumb:hover {
  background-color: var(--clr-primary-600);
}
.no-order-table-scrollbar-top__thumb:active {
  cursor: grabbing;
  background-color: var(--clr-primary-700);
}
.no-order-table-scrollbar-top__track {
  pointer-events: auto;
}

.no-order-table-wrapper {
  overflow: auto;
  margin: 2rem 0;
  background-color: var(--clr-bg-elevated);
  border-radius: var(--radius-md);
  box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.05);
  max-height: calc(100vh - 30rem);
}
@media (max-width: 768px) {
  .no-order-table-wrapper {
    overflow-x: visible;
    overflow-y: visible;
    max-height: none;
  }
}

.no-order-table-container {
  min-width: 100%;
}

.no-order-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.5rem;
  background-color: var(--clr-bg-elevated);
}
.no-order-table thead {
  position: sticky;
  top: 0;
  z-index: 6;
}
.no-order-table thead tr:first-child th {
  font-weight: 700;
  font-size: 1.7rem;
  letter-spacing: 0.02em;
  padding: 1.4rem 1rem;
  text-align: center;
  border: 0.1rem solid var(--clr-border-primary);
  white-space: nowrap;
  vertical-align: middle;
}
.no-order-table thead tr:first-child th.order {
  background-color: var(--clr-gray-300);
  color: var(--clr-gray-900);
  border-color: var(--clr-gray-400);
}
.no-order-table thead tr:first-child th.product {
  background-color: var(--clr-info-300);
  color: var(--clr-info-900);
  border-color: var(--clr-info-400);
}
.no-order-table thead tr:first-child th.loupe {
  background-color: var(--clr-primary-300);
  color: var(--clr-primary-900);
  border-color: var(--clr-primary-400);
}
.no-order-table thead tr:first-child th.total-amount, .no-order-table thead tr:first-child th.memo, .no-order-table thead tr:first-child th.created, .no-order-table thead tr:first-child th.confirmed, .no-order-table thead tr:first-child th.shipped, .no-order-table thead tr:first-child th.action {
  background-color: var(--clr-warning-200);
  color: var(--clr-warning-900);
  border-color: var(--clr-warning-300);
}
.no-order-table thead tr:first-child th.--check {
  background-color: var(--clr-gray-200);
  color: var(--clr-gray-900);
  position: sticky;
  left: 0;
}
.no-order-table thead tr:not(:first-child) th {
  padding: 1.2rem 0.9rem;
  text-align: center;
  font-weight: 600;
  border: 0.1rem solid var(--clr-border-primary);
  white-space: nowrap;
  vertical-align: middle;
  transition: background-color 0.2s ease;
  font-size: 1.3rem;
}
.no-order-table thead tr:not(:first-child) th.sticky {
  position: sticky;
  z-index: 11;
}
.no-order-table thead tr:not(:first-child) th.sticky.--check {
  left: 0;
  z-index: 12;
  min-width: 5rem;
  background-color: var(--clr-gray-50);
  color: var(--clr-gray-900);
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
}
.no-order-table thead tr:not(:first-child) th.sticky.--order-no {
  left: 5rem;
  z-index: 11;
  min-width: 15rem;
  text-align: left;
  background-color: var(--clr-gray-50);
  color: var(--clr-gray-900);
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
}
.no-order-table thead tr:not(:first-child) th.sticky.--name {
  left: 20rem;
  z-index: 11;
  min-width: 12rem;
  text-align: left;
  background-color: var(--clr-gray-50);
  color: var(--clr-gray-900);
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
}
.no-order-table thead tr:not(:first-child) th:nth-child(n+2):nth-child(-n+11) {
  background-color: var(--clr-gray-50);
  color: var(--clr-gray-900);
  border-color: var(--clr-gray-100);
}
.no-order-table thead tr:not(:first-child) th:nth-child(n+11):nth-child(-n+16) {
  background-color: var(--clr-info-50);
  color: var(--clr-info-900);
  border-color: var(--clr-info-100);
}
.no-order-table thead tr:not(:first-child) th:nth-child(n+17):nth-child(-n+33) {
  background-color: var(--clr-primary-50);
  color: var(--clr-primary-900);
  border-color: var(--clr-primary-100);
}
.no-order-table thead tr:not(:first-child) th.total-amount, .no-order-table thead tr:not(:first-child) th.memo, .no-order-table thead tr:not(:first-child) th.created, .no-order-table thead tr:not(:first-child) th.confirmed, .no-order-table thead tr:not(:first-child) th.shipped, .no-order-table thead tr:not(:first-child) th.action {
  background-color: var(--clr-warning-100);
  color: var(--clr-warning-900);
  border-color: var(--clr-warning-200);
}
.no-order-table thead tr:not(:first-child) th.memo {
  min-width: 15rem;
}
.no-order-table .no-order-table-color {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.no-order-table .no-order-table-color__block {
  display: inline-block;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 0.3rem;
  border: 1px solid var(--clr-border-primary);
  flex-shrink: 0;
  box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.1);
}
.no-order-table .no-order-table-color__name {
  font-size: 1.2rem;
}
.no-order-table .no-order-table-product {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.no-order-table .no-order-table-product__image {
  width: 3rem;
  height: 3rem;
  object-fit: cover;
  border-radius: 0.4rem;
  border: 1px solid var(--clr-border-primary);
  flex-shrink: 0;
}
.no-order-table .no-order-table-product__name {
  font-size: 1.2rem;
  font-weight: 600;
}
.no-order-table .--product-model {
  font-weight: 600;
}
.no-order-table tbody {
  --bg-color: var(--clr-bg-elevated);
}
.no-order-table tbody tr {
  border-bottom: 0.1rem solid var(--clr-border-primary);
  transition: background-color 0.2s ease;
}
.no-order-table tbody tr:hover {
  background-color: var(--clr-bg-secondary);
}
.no-order-table tbody tr:hover td {
  background-color: var(--clr-bg-secondary) !important;
}
.no-order-table tbody tr td {
  padding: 1.2rem 1rem;
  text-align: center;
  vertical-align: middle;
  border-right: 0.1rem solid var(--clr-border-primary);
  color: var(--clr-text-primary);
  background-color: transparent;
  font-size: 1.2rem;
}
.no-order-table tbody tr td.sticky {
  position: sticky;
  background-color: var(--bg-color);
  z-index: 5;
}
.no-order-table tbody tr td.sticky.--check {
  left: 0;
  z-index: 6;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
}
.no-order-table tbody tr td.sticky.--order-no {
  left: 5rem;
  z-index: 5;
  text-align: left;
}
.no-order-table tbody tr td.sticky.--name {
  left: 20rem;
  z-index: 5;
  text-align: left;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
}
.no-order-table tbody tr td.total-amount {
  text-align: right;
  font-weight: 600;
  color: var(--clr-success-600);
  min-width: 10rem;
}
.no-order-table tbody tr td.memo {
  text-align: left;
  max-width: 15rem;
  word-break: break-word;
}
.no-order-table .no-table-check {
  text-align: center;
}
.no-order-table .no-table-check .no-form-field__checkbox-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  cursor: pointer;
  user-select: none;
  position: relative;
}
.no-order-table .no-table-check .no-form-field__checkbox-group input[type=checkbox] {
  position: absolute;
  opacity: 0;
  width: 2rem;
  height: 2rem;
  margin: 0;
  cursor: pointer;
  z-index: 1;
  pointer-events: auto;
}
.no-order-table .no-table-check .no-form-field__checkbox-group input[type=checkbox]:checked + .no-checkbox-custom {
  background-color: var(--clr-primary-600);
  border-color: var(--clr-primary-600);
}
.no-order-table .no-table-check .no-form-field__checkbox-group input[type=checkbox]:checked + .no-checkbox-custom i {
  color: var(--clr-base-white);
  opacity: 1;
  transform: scale(1);
}
.no-order-table .no-table-check .no-form-field__checkbox-group input[type=checkbox]:focus + .no-checkbox-custom {
  box-shadow: 0 0 0 0.3rem rgba(37, 99, 235, 0.2);
}
.no-order-table .no-table-check .no-form-field__checkbox-group input[type=checkbox]:disabled + .no-checkbox-custom {
  opacity: 0.5;
  cursor: not-allowed;
}
.no-order-table .no-table-check .no-form-field__checkbox-group .no-checkbox-custom {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 0.2rem solid var(--clr-border-primary);
  border-radius: 0.4rem;
  background-color: var(--clr-bg-elevated);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  pointer-events: none;
  z-index: 0;
}
@media (min-width: 768px) {
  .no-order-table .no-table-check .no-form-field__checkbox-group .no-checkbox-custom:hover {
    border-color: var(--clr-primary-400);
    background-color: var(--clr-primary-50);
    transform: scale(1.1);
  }
}
.no-order-table .no-table-check .no-form-field__checkbox-group .no-checkbox-custom i {
  color: var(--clr-base-white);
  opacity: 0;
  font-size: 1.2rem;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  transform: scale(0);
}
.no-order-table .no-table-action {
  white-space: nowrap;
}
.no-order-table .no-table-action .no-page-index-table__action {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  align-items: center;
}
.no-order-table .no-table-action .no-table__actions {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  justify-content: center;
}
.no-order-table .no-table-action .no-btn-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 0.6rem;
  font-size: 1.3rem;
  font-weight: 500;
  transition: all 0.2s ease;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border: none;
}
.no-order-table .no-table-action .no-btn-action i {
  font-size: 1.4rem;
}
.no-order-table .no-table-action .no-btn-action span {
  font-size: 1.4rem;
}
.no-order-table .no-table-action .no-btn-action--edit {
  background-color: var(--clr-primary-600);
  color: var(--clr-base-white);
}
.no-order-table .no-table-action .no-btn-action--edit:hover {
  background-color: var(--clr-primary-700);
  color: var(--clr-base-white);
  transform: translateY(-0.1rem);
  box-shadow: 0 0.2rem 0.4rem rgba(0, 118, 203, 0.3);
}
.no-order-table .no-table-action .no-btn-action--edit:active {
  transform: translateY(0);
  box-shadow: 0 0.1rem 0.2rem rgba(0, 118, 203, 0.2);
}
.no-order-table .no-table-action .no-btn-action--delete {
  background-color: var(--clr-danger-500);
  color: var(--clr-base-white);
}
.no-order-table .no-table-action .no-btn-action--delete:hover {
  background-color: var(--clr-danger-600);
  color: var(--clr-base-white);
  transform: translateY(-0.1rem);
  box-shadow: 0 0.2rem 0.4rem rgba(239, 68, 68, 0.3);
}
.no-order-table .no-table-action .no-btn-action--delete:active {
  transform: translateY(0);
  box-shadow: 0 0.1rem 0.2rem rgba(239, 68, 68, 0.2);
}
.no-order-table .no-badge {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-xs);
  font-size: 1.4rem;
  font-weight: 500;
  white-space: nowrap;
}
.no-order-table .no-badge--success {
  background-color: var(--clr-success-100);
  color: var(--clr-success-700);
}
.no-order-table .no-badge--warning {
  background-color: var(--clr-warning-100);
  color: var(--clr-warning-700);
}
.no-order-table .no-badge--danger {
  background-color: var(--clr-danger-100);
  color: var(--clr-danger-700);
}
.no-order-table .no-badge--info {
  background-color: var(--clr-info-100);
  color: var(--clr-info-700);
}
.no-order-table .no-badge--gray {
  background-color: var(--clr-gray-100);
  color: var(--clr-gray-700);
}
.no-order-table .no-order-table-loupe-cell {
  padding: 1rem !important;
  text-align: left !important;
  vertical-align: top !important;
}
.no-order-table .no-order-table-loupe-cell .no-order-table-loupe-empty {
  color: var(--clr-text-tertiary);
  font-style: italic;
}

.no-order-options__block {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1.2rem;
  background: var(--clr-bg-secondary);
  border-radius: 0.6rem;
  border: 1px solid var(--clr-border-primary);
}

.no-order-option-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.2rem;
  background-color: var(--clr-base-white);
  border-radius: 0.4rem;
  overflow: hidden;
  border: 1px solid var(--clr-border-primary);
}
.no-order-option-table thead {
  background-color: var(--clr-info-100);
}
.no-order-option-table thead th {
  padding: 0.8rem 1rem;
  text-align: center;
  font-weight: 600;
  color: var(--clr-info-700);
  border: 1px solid var(--clr-info-200);
  font-size: 1.1rem;
}
.no-order-option-table thead th .--blind {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.no-order-option-table tbody th {
  background-color: var(--clr-gray-50);
  color: var(--clr-gray-900);
  font-weight: 600;
  padding: 0.8rem 1rem;
  text-align: left;
  border: 1px solid var(--clr-border-primary);
  font-size: 1.1rem;
}
.no-order-option-table tbody td {
  padding: 0.8rem 1rem;
  text-align: center;
  color: var(--clr-text-primary);
  border: 1px solid var(--clr-border-primary);
  font-family: "Courier New", monospace;
  font-size: 1.2rem;
}
.no-order-option-table--summary {
  margin-top: 1rem;
}
.no-order-option-table--summary thead {
  background-color: var(--clr-primary-100);
}
.no-order-option-table--summary thead th {
  background-color: var(--clr-primary-100);
  color: var(--clr-primary-700);
  border-color: var(--clr-primary-200);
}
.no-order-option-table--summary tbody th {
  background-color: var(--clr-primary-50);
  color: var(--clr-primary-900);
}

.no-table__cell--empty {
  padding: 4rem 2rem;
  text-align: center;
  background-color: var(--clr-bg-elevated);
}

.no-table__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  color: var(--clr-text-tertiary);
}
.no-table__empty-icon {
  font-size: 4rem;
  opacity: 0.5;
}
.no-table__empty-text {
  font-size: 1.4rem;
}

@media (max-width: 1200px) {
  .no-order-table {
    font-size: 1.3rem;
  }
  .no-order-table thead tr:first-child th {
    font-size: 1.5rem;
    padding: 1.2rem 0.8rem;
  }
  .no-order-table thead tr:not(:first-child) th {
    font-size: 1.3rem;
    padding: 1.2rem 0.8rem;
  }
  .no-order-table tbody td {
    padding: 1rem 0.8rem;
    font-size: 1.3rem;
  }
}
@media (max-width: 768px) {
  .no-order-table-wrapper {
    margin: 1rem 0;
  }
  .no-order-table {
    font-size: 1.2rem;
  }
  .no-order-table thead tr:first-child th {
    font-size: 1.4rem;
    padding: 1rem 0.6rem;
  }
  .no-order-table thead tr:not(:first-child) th {
    font-size: 1.2rem;
    padding: 1rem 0.6rem;
  }
  .no-order-table tbody td {
    padding: 0.8rem 0.6rem;
    font-size: 1.2rem;
  }
}
.no-order-table-listing--card {
  display: none;
}
@media (max-width: 767px) {
  .no-order-table-listing--card {
    display: block;
  }
}

@media (max-width: 767px) {
  .no-order-table-listing--table {
    display: none;
  }
}

.no-order-table-cards {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1rem;
}

.no-order-table-card {
  background: var(--clr-base-white);
  border: 1px solid var(--clr-border-primary);
  border-radius: 0.8rem;
  overflow: hidden;
  transition: all 0.2s ease;
  box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.05);
}
.no-order-table-card:hover {
  box-shadow: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.1);
  border-color: var(--clr-border-secondary);
}
.no-order-table-card--selected {
  border-color: var(--clr-primary-500);
  background: var(--clr-primary-50);
  box-shadow: 0 0 0 0.2rem var(--clr-primary-200);
}
.no-order-table-card__header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.2rem;
  background: var(--clr-gray-50);
  border-bottom: 1px solid var(--clr-border-primary);
}
.no-order-table-card__selection {
  flex-shrink: 0;
}
.no-order-table-card__title-wrapper {
  flex: 1;
  min-width: 0;
}
.no-order-table-card__title {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--clr-text-primary);
  margin: 0;
}
.no-order-table-card__order-link {
  color: var(--clr-primary-700);
  text-decoration: none;
  transition: color 0.2s ease;
}
.no-order-table-card__order-link:hover {
  color: var(--clr-primary-900);
  text-decoration: underline;
}
.no-order-table-card__status {
  flex-shrink: 0;
}
.no-order-table-card__thumbnail {
  width: 100%;
  height: 200px;
  overflow: hidden;
  background: var(--clr-gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
}
.no-order-table-card__thumbnail-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.no-order-table-card__checkbox {
  flex-shrink: 0;
}
.no-order-table-card__main-info {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.no-order-table-card__order-no {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--clr-primary-700);
  text-decoration: none;
  transition: color 0.2s ease;
}
.no-order-table-card__order-no:hover {
  color: var(--clr-primary-900);
  text-decoration: underline;
}
.no-order-table-card__actions {
  display: flex;
  gap: 1rem;
  padding: 1.2rem;
  border-top: 1px solid var(--clr-border-secondary);
  background: var(--clr-bg-elevated);
}
.no-order-table-card__info {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-bottom: 1px solid var(--clr-border-secondary);
}
.no-order-table-card__info-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
.no-order-table-card__info-item {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.no-order-table-card__info-item--full {
  grid-column: 1/-1;
}
.no-order-table-card__label {
  font-size: 1.1rem;
  color: var(--clr-text-secondary);
  font-weight: 500;
}
.no-order-table-card__value {
  font-size: 1.3rem;
  color: var(--clr-text-primary);
  font-weight: 500;
}
.no-order-table-card__value--amount {
  color: var(--clr-success-700);
  font-weight: 700;
  font-size: 1.5rem;
}
.no-order-table-card__link {
  color: var(--clr-primary-700);
  text-decoration: none;
  transition: color 0.2s ease;
}
.no-order-table-card__link:hover {
  color: var(--clr-primary-900);
  text-decoration: underline;
}
.no-order-table-card__items {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  padding: 0 1.5rem 1.5rem;
}
.no-order-table-card__customer-group {
  margin-bottom: 1rem;
  margin-top: 1rem;
}
.no-order-table-card__customer-group:first-child {
  margin-top: 0;
}
.no-order-table-card__customer-group-header {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem 1.2rem;
  background: var(--clr-primary-100);
  border: 0.1rem solid var(--clr-primary-300);
  border-radius: var(--radius-sm);
  margin-bottom: 1rem;
}
.no-order-table-card__customer-group-name {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--clr-primary-900);
}
.no-order-table-card__customer-group-age {
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--clr-primary-700);
}
.no-order-table-card__item {
  padding: 1.2rem;
  background: var(--clr-gray-50);
  border-radius: 0.6rem;
  border: 1px solid var(--clr-border-secondary);
}
.no-order-table-card__item {
  padding: 1.2rem;
  background: var(--clr-gray-50);
  border-radius: 0.6rem;
  border: 1px solid var(--clr-border-secondary);
  margin-bottom: 1rem;
}
.no-order-table-card__item:last-child {
  margin-bottom: 0;
}
.no-order-table-card__item-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--clr-border-secondary);
}
.no-order-table-card__item-image-wrapper {
  flex-shrink: 0;
}
.no-order-table-card__item-image {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 0.5rem;
  border: 1px solid var(--clr-border-primary);
}
.no-order-table-card__item-info {
  flex: 1;
  min-width: 0;
}
.no-order-table-card__item-name {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--clr-text-primary);
  margin-bottom: 0.5rem;
  line-height: 1.3;
}
.no-order-table-card__item-meta {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 1.2rem;
  color: var(--clr-text-secondary);
}
.no-order-table-card__item-code, .no-order-table-card__item-model {
  font-family: "Courier New", monospace;
}
.no-order-table-card__item-details {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.no-order-table-card__item-detail-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
.no-order-table-card__item-detail {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.no-order-table-card__detail-label {
  font-size: 1rem;
  color: var(--clr-text-secondary);
  font-weight: 500;
}
.no-order-table-card__item-detail {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.no-order-table-card__detail-label {
  font-size: 1rem;
  color: var(--clr-text-secondary);
  font-weight: 500;
}
.no-order-table-card__detail-value {
  font-size: 1.3rem;
  color: var(--clr-text-primary);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.no-order-table-card__detail-value--amount {
  color: var(--clr-success-700);
  font-weight: 700;
}
.no-order-table-card__color-block {
  display: inline-block;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 0.3rem;
  border: 1px solid var(--clr-border-primary);
  flex-shrink: 0;
}
.no-order-table-card__color-name {
  flex: 1;
}
.no-order-table-card__item-loupe {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--clr-border-secondary);
}
.no-order-table-card__loupe-btn {
  width: 100%;
  padding: 1rem 1.5rem;
  background: var(--clr-primary-50);
  border: 1px solid var(--clr-primary-300);
  border-radius: 0.6rem;
  color: var(--clr-primary-700);
  font-size: 1.3rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
}
.no-order-table-card__loupe-btn:hover {
  background: var(--clr-primary-100);
  border-color: var(--clr-primary-400);
  color: var(--clr-primary-900);
  transform: translateY(-0.1rem);
  box-shadow: 0 0.2rem 0.4rem rgba(37, 99, 235, 0.2);
}
.no-order-table-card__loupe-btn i {
  font-size: 1.4rem;
}
.no-order-table-card__loupe-btn span {
  font-weight: 600;
}
.no-order-table-card__empty {
  text-align: center;
  padding: 4rem 2rem;
  color: var(--clr-text-tertiary);
}
.no-order-table-card__empty i {
  font-size: 4rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}
.no-order-table-card__empty p {
  font-size: 1.4rem;
  margin: 0;
}

.no-order-loupe-modal {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.no-order-loupe-modal__section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.no-order-loupe-modal__title {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--clr-text-primary);
  margin: 0;
  padding-bottom: 0.8rem;
  border-bottom: 2px solid var(--clr-border-primary);
}
.no-order-loupe-modal__add-option {
  margin-top: 0.6rem;
  padding: 0.6rem 0.8rem;
  background: var(--clr-gray-50);
  border-radius: 0.4rem;
  font-size: 1.1rem;
  color: var(--clr-text-secondary);
  border: 1px solid var(--clr-border-secondary);
  text-align: center;
}

.no-aggregate-filters {
  background: var(--clr-bg-elevated);
  border: 1px solid var(--clr-border-primary);
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 2rem;
}
.no-aggregate-filters__form {
  width: 100%;
}
.no-aggregate-filters__row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-end;
}
.no-aggregate-filters__group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
  min-width: 150px;
}
.no-aggregate-filters__label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--clr-text-secondary);
}
.no-aggregate-filters__label i {
  color: var(--clr-primary-500);
}
.no-aggregate-filters__select {
  width: 100%;
}
.no-aggregate-filters__date-range {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.no-aggregate-filters__date-input {
  flex: 1;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--clr-border-primary);
  border-radius: 6px;
  font-size: 0.875rem;
  background: var(--clr-bg-primary);
  color: var(--clr-text-primary);
  transition: all 0.2s ease;
}
.no-aggregate-filters__date-input:focus {
  outline: none;
  border-color: var(--clr-primary-500);
  box-shadow: 0 0 0 3px var(--clr-primary-100);
}
.no-aggregate-filters__date-separator {
  color: var(--clr-text-tertiary);
  font-weight: 500;
}
.no-aggregate-filters__actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

.no-aggregate-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}
.no-aggregate-summary__card {
  background: var(--clr-bg-elevated);
  border: 1px solid var(--clr-border-primary);
  border-radius: 8px;
  padding: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  transition: all 0.2s ease;
}
.no-aggregate-summary__card:hover {
  border-color: var(--clr-primary-300);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.no-aggregate-summary__icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--clr-primary-500), var(--clr-primary-600));
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.5rem;
  flex-shrink: 0;
}
.no-aggregate-summary__content {
  flex: 1;
}
.no-aggregate-summary__label {
  font-size: 0.875rem;
  color: var(--clr-text-secondary);
  margin-bottom: 0.25rem;
}
.no-aggregate-summary__value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--clr-text-primary);
}

.no-aggregate-table {
  width: 100%;
  border-collapse: collapse;
}
.no-aggregate-table__wrapper {
  overflow-x: auto;
}
.no-aggregate-table thead {
  background: var(--clr-bg-secondary);
  border-bottom: 2px solid var(--clr-border-primary);
}
.no-aggregate-table th {
  padding: 1rem;
  text-align: left;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--clr-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.no-aggregate-table tbody tr {
  border-bottom: 1px solid var(--clr-border-secondary);
  transition: background-color 0.2s ease;
}
.no-aggregate-table tbody tr:hover {
  background: var(--clr-bg-secondary);
}
.no-aggregate-table tbody tr:last-child {
  border-bottom: none;
}
.no-aggregate-table td {
  padding: 1rem;
  font-size: 0.9375rem;
  color: var(--clr-text-primary);
}
.no-aggregate-table__code {
  font-family: "Courier New", monospace;
  font-size: 0.875rem;
  color: var(--clr-text-tertiary);
  background: var(--clr-bg-secondary);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
}
.no-aggregate-table__amount {
  color: var(--clr-success-600);
  font-size: 1.125rem;
}
.no-aggregate-table__count, .no-aggregate-table__qty {
  color: var(--clr-text-secondary);
}
.no-aggregate-table__avg {
  color: var(--clr-info-600);
  font-weight: 500;
}

.no-empty-state {
  text-align: center;
  padding: 4rem 2rem;
  color: var(--clr-text-tertiary);
}
.no-empty-state__icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}
.no-empty-state__text {
  font-size: 1rem;
  margin: 0;
}

@media (max-width: 768px) {
  .no-aggregate-filters__row {
    flex-direction: column;
  }
  .no-aggregate-filters__group {
    min-width: 100%;
  }
  .no-aggregate-filters__actions {
    width: 100%;
    flex-direction: column;
  }
  .no-aggregate-filters__actions .no-btn {
    width: 100%;
  }
  .no-aggregate-summary {
    grid-template-columns: 1fr;
  }
  .no-aggregate-table__wrapper {
    overflow-x: scroll;
  }
  .no-aggregate-table th,
  .no-aggregate-table td {
    padding: 0.75rem 0.5rem;
    font-size: 0.875rem;
  }
}
.no-order-detail {
  max-width: 1600px;
  margin: 0 auto;
  padding: 2rem;
}
.no-order-detail__header {
  margin-bottom: 2rem;
}
.no-order-detail__back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--clr-text-secondary);
  text-decoration: none;
  margin-bottom: 1.2rem;
  font-size: 1.4rem;
  font-weight: 500;
  transition: all 0.2s ease;
}
.no-order-detail__back-link i {
  font-size: 1.3rem;
}
.no-order-detail__back-link:hover {
  color: var(--clr-primary-600);
  transform: translateX(-0.25rem);
}
.no-order-detail__order-number {
  margin-bottom: 2.4rem;
  padding-bottom: 1.6rem;
  border-bottom: 0.1rem solid var(--clr-border-primary);
}
.no-order-detail__order-number-text {
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--clr-text-primary);
  margin: 0;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
}
@media (max-width: 768px) {
  .no-order-detail__order-number-text {
    font-size: 2.8rem;
  }
}
.no-order-detail__order-id-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 1rem;
  background: linear-gradient(135deg, var(--clr-primary-500) 0%, var(--clr-primary-600) 100%);
  color: var(--clr-base-white);
  font-size: 1.2rem;
  font-weight: 600;
  border-radius: 2rem;
  box-shadow: 0 0.2rem 0.6rem rgba(37, 99, 235, 0.25);
  letter-spacing: 0.02em;
  line-height: 1;
  transition: all 0.2s ease;
}
@media (max-width: 768px) {
  .no-order-detail__order-id-badge {
    font-size: 1.3rem;
    padding: 0.5rem 1.2rem;
  }
}
.no-order-detail__order-id-badge:hover {
  transform: translateY(-0.1rem);
  box-shadow: 0 0.3rem 0.8rem rgba(37, 99, 235, 0.35);
}
.no-order-detail__status-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
}
@media (max-width: 1024px) {
  .no-order-detail__status-layout {
    grid-template-columns: 1fr 1fr;
  }
}
.no-order-detail__status-card, .no-order-detail__history-card {
  display: flex;
  flex-direction: column;
}
.no-order-detail__container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.no-order-summary .no-card__body {
  padding: 2rem;
}
.no-order-summary__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
}
.no-order-summary__item {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 1.4rem;
  background: var(--clr-bg-secondary);
  border-radius: 0.8rem;
  border: 1px solid var(--clr-border-primary);
  transition: all 0.2s ease;
}
.no-order-summary__item:hover {
  border-color: var(--clr-border-secondary);
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.04);
}
.no-order-summary__label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.2rem;
  color: var(--clr-text-secondary);
  font-weight: 500;
}
.no-order-summary__label i {
  font-size: 1.2rem;
  color: var(--clr-text-tertiary);
}
.no-order-summary__value {
  font-size: 1.5rem;
  color: var(--clr-text-primary);
  font-weight: 600;
}
.no-order-summary__value--amount {
  color: var(--clr-success-600);
  font-size: 1.8rem;
  font-weight: 700;
}
.no-order-summary__message {
  margin-top: 2rem;
  padding: 1.5rem;
  background: var(--clr-info-50);
  border: 1px solid var(--clr-info-200);
  border-radius: 0.8rem;
  border-left: 4px solid var(--clr-info-500);
}
.no-order-summary__message-label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.3rem;
  color: var(--clr-info-700);
  font-weight: 600;
  margin-bottom: 1rem;
}
.no-order-summary__message-label i {
  font-size: 1.2rem;
  color: var(--clr-info-600);
}
.no-order-summary__message-content {
  font-size: 1.4rem;
  color: var(--clr-text-primary);
  line-height: 1.6;
  white-space: pre-wrap;
}

.no-order-state-process {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 2.4rem 1.6rem;
  position: relative;
}
.no-order-state-process__radio-input {
  display: none;
}
.no-order-state-process {
  gap: 0.8rem;
  flex-wrap: wrap;
  background: var(--clr-bg-secondary);
  border-radius: 1.2rem;
  border: 0.1rem solid var(--clr-border-primary);
}
.no-order-state-process__step {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  min-width: 140px;
  padding: 1.2rem 1.4rem;
  border-radius: 1.2rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: default;
}
.no-order-state-process__step.is-clickable {
  cursor: pointer;
}
@media (max-width: 768px) {
  .no-order-state-process__step.is-clickable:hover {
    background: var(--clr-primary-50);
    transform: translateY(-0.2rem);
    box-shadow: 0 0.4rem 1.2rem rgba(37, 99, 235, 0.12);
  }
  .no-order-state-process__step.is-clickable:hover .no-order-state-process__circle {
    transform: scale(1.05);
  }
  .no-order-state-process__step.is-clickable:hover .no-order-state-process__label {
    color: var(--clr-primary-700);
    font-weight: 600;
  }
  .no-order-state-process__step.is-clickable:active {
    transform: translateY(0);
    box-shadow: 0 0.2rem 0.6rem rgba(37, 99, 235, 0.1);
  }
}
.no-order-state-process__step.is-disabled {
  cursor: not-allowed;
  opacity: 0.8;
}
.no-order-state-process__step.is-disabled .no-order-state-process__circle {
  cursor: not-allowed;
}
.no-order-state-process__step.is-disabled .no-order-state-process__label {
  cursor: not-allowed;
}
.no-order-state-process__step--reject {
  margin-left: 3rem;
  position: relative;
}
.no-order-state-process__step--reject::before {
  content: "";
  position: absolute;
  left: -3rem;
  top: 4rem;
  width: 2rem;
  height: 2px;
  background: var(--clr-border-primary);
}
@media (max-width: 768px) {
  .no-order-state-process__step--reject.is-clickable:hover {
    background: var(--clr-danger-50);
  }
  .no-order-state-process__step--reject.is-clickable:hover .no-order-state-process__circle {
    transform: scale(1.05);
  }
  .no-order-state-process__step--reject.is-clickable:hover .no-order-state-process__label {
    color: var(--clr-danger-700);
    font-weight: 600;
  }
}
.no-order-state-process__divider {
  width: 3rem;
  height: 2px;
  background: var(--clr-border-primary);
  margin: 4rem 0 0 0;
  position: relative;
  flex-shrink: 0;
}
.no-order-state-process__divider::after {
  content: "";
  position: absolute;
  right: -0.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 0.5rem solid var(--clr-border-primary);
  border-top: 0.4rem solid transparent;
  border-bottom: 0.4rem solid transparent;
}
.no-order-state-process__line {
  position: absolute;
  top: 3.7rem;
  left: calc(50% + 2.5rem);
  right: calc(-50% + 2.5rem);
  height: 0.4rem;
  background: var(--clr-gray-300);
  z-index: 0;
  transition: background 0.3s ease;
  border-radius: 0.2rem;
}
.no-order-state-process__line.is-completed {
  background: linear-gradient(90deg, var(--clr-primary-500) 0%, var(--clr-primary-400) 100%);
  box-shadow: 0 0.2rem 0.4rem rgba(37, 99, 235, 0.2);
}
.no-order-state-process__step:last-child:not(.no-order-state-process__line--reject) .no-order-state-process__line {
  display: none;
}
.no-order-state-process__circle {
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  background: var(--clr-bg-primary);
  border: 0.3rem solid var(--clr-gray-300);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  margin-bottom: 1.2rem;
  overflow: visible;
  flex-shrink: 0;
}
.no-order-state-process__circle i {
  font-size: 1.8rem;
  color: var(--clr-gray-500);
  transition: color 0.3s ease;
  position: relative;
  z-index: 1;
}
.no-order-state-process__circle.is-active {
  background: var(--clr-primary-600);
  border-color: var(--clr-primary-600);
  box-shadow: 0 0 0 0.6rem rgba(37, 99, 235, 0.1), 0 0 0 1.2rem rgba(37, 99, 235, 0.05), 0 0.4rem 0.8rem rgba(37, 99, 235, 0.2);
  transform: scale(1.05);
}
.no-order-state-process__circle.is-active i {
  color: var(--clr-bg-primary);
}
.no-order-state-process__circle.is-active .no-order-state-process__ripple {
  animation: ripple 2s infinite;
}
.no-order-state-process__circle.is-completed {
  background: var(--clr-primary-500);
  border-color: var(--clr-primary-500);
}
.no-order-state-process__circle.is-completed i {
  color: var(--clr-bg-primary);
}
.no-order-state-process__circle--reject {
  border-color: var(--clr-danger-300);
  background: var(--clr-bg-primary);
}
.no-order-state-process__circle--reject i {
  color: var(--clr-danger-500);
}
.no-order-state-process__circle--reject.is-active {
  background: var(--clr-danger-600);
  border-color: var(--clr-danger-600);
  box-shadow: 0 0 0 0.6rem rgba(220, 38, 38, 0.1), 0 0 0 1.2rem rgba(220, 38, 38, 0.05), 0 0.4rem 0.8rem rgba(220, 38, 38, 0.2);
}
.no-order-state-process__circle--reject.is-active i {
  color: var(--clr-bg-primary);
}
.no-order-state-process__time {
  font-size: 1.2rem;
}
.no-order-state-process__step:has(input:checked) .no-order-state-process__circle:not(.is-active) {
  background: var(--clr-primary-50);
  border-color: var(--clr-primary-500);
  border-width: 0.4rem;
  box-shadow: 0 0 0 0.5rem rgba(37, 99, 235, 0.2), 0 0.3rem 0.8rem rgba(37, 99, 235, 0.25), 0 0 0 1rem rgba(37, 99, 235, 0.1);
  transform: scale(1.05);
}
.no-order-state-process__step:has(input:checked) .no-order-state-process__circle:not(.is-active) i {
  color: var(--clr-primary-700);
}
.no-order-state-process__step:has(input:checked) .no-order-state-process__label:not(.is-active) {
  color: var(--clr-primary-700);
  font-weight: 700;
}
.no-order-state-process__step:has(input:checked) .no-order-state-process__check-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background: var(--clr-primary-500);
  color: var(--clr-base-white);
  border-radius: 50%;
  font-size: 1rem;
  margin-left: 0.6rem;
  animation: check-bounce 0.5s ease-out;
  box-shadow: 0 0.2rem 0.4rem rgba(37, 99, 235, 0.3);
}
.no-order-state-process__step:has(input:checked).no-order-state-process__step--reject .no-order-state-process__circle:not(.is-active) {
  background: var(--clr-danger-50);
  border-color: var(--clr-danger-500);
  box-shadow: 0 0 0 0.5rem rgba(220, 38, 38, 0.2), 0 0.3rem 0.8rem rgba(220, 38, 38, 0.25), 0 0 0 1rem rgba(220, 38, 38, 0.1);
}
.no-order-state-process__step:has(input:checked).no-order-state-process__step--reject .no-order-state-process__circle:not(.is-active) i {
  color: var(--clr-danger-700);
}
.no-order-state-process__step:has(input:checked).no-order-state-process__step--reject .no-order-state-process__label:not(.is-active) {
  color: var(--clr-danger-700);
}
.no-order-state-process__step:has(input:checked).no-order-state-process__step--reject .no-order-state-process__check-icon {
  background: var(--clr-danger-500);
  box-shadow: 0 0.2rem 0.4rem rgba(220, 38, 38, 0.3);
}
.no-order-state-process__ripple {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;
  border: 0.3rem solid rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.5);
}
.no-order-state-process__ripple--1 {
  animation: ripple-1 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.no-order-state-process__ripple--2 {
  animation: ripple-2 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite 0.4s;
}
.no-order-state-process__ripple--3 {
  animation: ripple-3 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite 0.8s;
}
.no-order-state-process__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  text-align: center;
  width: 100%;
}
.no-order-state-process__label-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
}
.no-order-state-process__label {
  font-size: 1.4rem;
  color: var(--clr-text-primary);
  font-weight: 600;
  transition: all 0.3s ease;
  white-space: nowrap;
  line-height: 1.4;
}
.no-order-state-process__label.is-active {
  color: var(--clr-primary-700);
  font-weight: 700;
  font-size: 1.5rem;
}
.no-order-state-process__check-icon {
  display: none;
  opacity: 0;
  transform: scale(0);
  transition: all 0.3s ease;
}
.no-order-state-process__step:has(input:checked) .no-order-state-process__check-icon {
  display: inline-flex;
  opacity: 1;
  transform: scale(1);
}
.no-order-state-process__date {
  font-size: 1.3rem;
  color: var(--clr-text-primary);
  font-weight: 500;
  font-family: "Courier New", monospace;
  white-space: nowrap;
  padding: 0.4rem 0.8rem;
  background: var(--clr-bg-secondary);
  border-radius: 0.4rem;
  line-height: 1.5;
  border: 0.1rem solid var(--clr-border-secondary);
  transition: all 0.3s ease;
}
.is-clickable:hover .no-order-state-process__date {
  background: var(--clr-primary-50);
  border-color: var(--clr-primary-200);
  color: var(--clr-primary-700);
}

@keyframes ripple-1 {
  0% {
    width: 0;
    height: 0;
    opacity: 1;
    border-width: 0.3rem;
    box-shadow: 0 0 0 0 rgb(255, 255, 255), 0 0 0 0 rgba(37, 99, 235, 0.6);
  }
  30% {
    opacity: 0.9;
    box-shadow: 0 0 0.8rem 0.4rem rgba(255, 255, 255, 0.8), 0 0 1.2rem 0.6rem rgba(37, 99, 235, 0.4);
  }
  100% {
    width: 8rem;
    height: 8rem;
    opacity: 0;
    border-width: 0.1rem;
    box-shadow: 0 0 1.5rem 0.8rem rgba(255, 255, 255, 0), 0 0 2.5rem 1.5rem rgba(37, 99, 235, 0);
  }
}
@keyframes ripple-2 {
  0% {
    width: 0;
    height: 0;
    opacity: 0.95;
    border-width: 0.3rem;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.9), 0 0 0 0 rgba(37, 99, 235, 0.5);
  }
  30% {
    opacity: 0.8;
    box-shadow: 0 0 1rem 0.5rem rgba(255, 255, 255, 0.7), 0 0 1.5rem 0.8rem rgba(37, 99, 235, 0.35);
  }
  100% {
    width: 10rem;
    height: 10rem;
    opacity: 0;
    border-width: 0.1rem;
    box-shadow: 0 0 2rem 1rem rgba(255, 255, 255, 0), 0 0 3rem 2rem rgba(37, 99, 235, 0);
  }
}
@keyframes ripple-3 {
  0% {
    width: 0;
    height: 0;
    opacity: 0.9;
    border-width: 0.3rem;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8), 0 0 0 0 rgba(37, 99, 235, 0.4);
  }
  30% {
    opacity: 0.7;
    box-shadow: 0 0 1.2rem 0.6rem rgba(255, 255, 255, 0.6), 0 0 1.8rem 1rem rgba(37, 99, 235, 0.3);
  }
  100% {
    width: 12rem;
    height: 12rem;
    opacity: 0;
    border-width: 0.1rem;
    box-shadow: 0 0 2.5rem 1.5rem rgba(255, 255, 255, 0), 0 0 4rem 2.5rem rgba(37, 99, 235, 0);
  }
}
@keyframes active-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0.6rem rgba(37, 99, 235, 0.2), 0 0 0 1.2rem rgba(37, 99, 235, 0.12), 0 0 0 1.8rem rgba(37, 99, 235, 0.06), 0 0 0 2.4rem rgba(37, 99, 235, 0.03), 0 0.4rem 0.8rem rgba(37, 99, 235, 0.3);
  }
  50% {
    box-shadow: 0 0 0 0.8rem rgba(37, 99, 235, 0.25), 0 0 0 1.5rem rgba(37, 99, 235, 0.15), 0 0 0 2.2rem rgba(37, 99, 235, 0.08), 0 0 0 3rem rgba(37, 99, 235, 0.04), 0 0.6rem 1.2rem rgba(37, 99, 235, 0.35);
  }
}
@keyframes check-bounce {
  0% {
    opacity: 0;
    transform: scale(0) rotate(-180deg);
  }
  50% {
    transform: scale(1.2) rotate(10deg);
  }
  75% {
    transform: scale(0.95) rotate(-5deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}
@keyframes ripple-reject-1 {
  0% {
    width: 0;
    height: 0;
    opacity: 1;
    border-width: 0.3rem;
    box-shadow: 0 0 0 0 rgb(255, 255, 255), 0 0 0 0 rgba(220, 38, 38, 0.6);
  }
  30% {
    opacity: 0.9;
    box-shadow: 0 0 0.8rem 0.4rem rgba(255, 255, 255, 0.8), 0 0 1.2rem 0.6rem rgba(220, 38, 38, 0.4);
  }
  100% {
    width: 8rem;
    height: 8rem;
    opacity: 0;
    border-width: 0.1rem;
    box-shadow: 0 0 1.5rem 0.8rem rgba(255, 255, 255, 0), 0 0 2.5rem 1.5rem rgba(220, 38, 38, 0);
  }
}
@keyframes ripple-reject-2 {
  0% {
    width: 0;
    height: 0;
    opacity: 0.95;
    border-width: 0.3rem;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.9), 0 0 0 0 rgba(220, 38, 38, 0.5);
  }
  30% {
    opacity: 0.8;
    box-shadow: 0 0 1rem 0.5rem rgba(255, 255, 255, 0.7), 0 0 1.5rem 0.8rem rgba(220, 38, 38, 0.35);
  }
  100% {
    width: 10rem;
    height: 10rem;
    opacity: 0;
    border-width: 0.1rem;
    box-shadow: 0 0 2rem 1rem rgba(255, 255, 255, 0), 0 0 3rem 2rem rgba(220, 38, 38, 0);
  }
}
@keyframes ripple-reject-3 {
  0% {
    width: 0;
    height: 0;
    opacity: 0.9;
    border-width: 0.3rem;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8), 0 0 0 0 rgba(220, 38, 38, 0.4);
  }
  30% {
    opacity: 0.7;
    box-shadow: 0 0 1.2rem 0.6rem rgba(255, 255, 255, 0.6), 0 0 1.8rem 1rem rgba(220, 38, 38, 0.3);
  }
  100% {
    width: 12rem;
    height: 12rem;
    opacity: 0;
    border-width: 0.1rem;
    box-shadow: 0 0 2.5rem 1.5rem rgba(255, 255, 255, 0), 0 0 4rem 2.5rem rgba(220, 38, 38, 0);
  }
}
@keyframes active-pulse-reject {
  0%, 100% {
    box-shadow: 0 0 0 0.6rem rgba(220, 38, 38, 0.2), 0 0 0 1.2rem rgba(220, 38, 38, 0.12), 0 0 0 1.8rem rgba(220, 38, 38, 0.06), 0 0 0 2.4rem rgba(220, 38, 38, 0.03), 0 0.4rem 0.8rem rgba(220, 38, 38, 0.3);
  }
  50% {
    box-shadow: 0 0 0 0.8rem rgba(220, 38, 38, 0.25), 0 0 0 1.5rem rgba(220, 38, 38, 0.15), 0 0 0 2.2rem rgba(220, 38, 38, 0.08), 0 0 0 3rem rgba(220, 38, 38, 0.04), 0 0.6rem 1.2rem rgba(220, 38, 38, 0.35);
  }
}
.no-order-state-dates {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--clr-border-secondary);
}
.no-order-state-dates__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.4rem;
}
.no-order-state-dates__item {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1.2rem 1.3rem;
  background: var(--clr-bg-secondary);
  border-radius: 0.75rem;
  border: 1px solid var(--clr-border-primary);
  transition: all 0.2s ease;
}
.no-order-state-dates__item:hover {
  border-color: var(--clr-primary-300);
  background: var(--clr-primary-50);
}
.no-order-state-dates__item i {
  font-size: 1.4rem;
  color: var(--clr-primary-500);
  flex-shrink: 0;
}
.no-order-state-dates__label {
  font-size: 1.2rem;
  color: var(--clr-text-secondary);
  font-weight: 500;
  min-width: 5.5rem;
}
.no-order-state-dates__value {
  font-size: 1.4rem;
  color: var(--clr-text-primary);
  font-weight: 600;
  margin-left: auto;
}
.no-order-state-dates__empty {
  color: var(--clr-text-tertiary);
  font-style: italic;
  font-weight: 400;
  font-size: 1.2rem;
}
.no-order-state-dates__note {
  margin-top: 1.2rem;
  padding: 1rem 1.2rem;
  background: var(--clr-info-50);
  border-left: 3px solid var(--clr-info-500);
  border-radius: 0.6rem;
  font-size: 1.2rem;
  color: var(--clr-info-700);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.no-order-state-dates__note i {
  font-size: 1.3rem;
}

.no-order-documents .no-card__body {
  padding: 2rem;
}
.no-order-documents__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.no-order-document {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  padding: 2rem;
  border: 2px solid var(--clr-border-primary);
  border-radius: 1rem;
  background: var(--clr-bg-elevated);
  text-decoration: none;
  color: var(--clr-text-primary);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}
.no-order-document::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--clr-primary-500);
  transform: scaleY(0);
  transition: transform 0.3s ease;
}
.no-order-document:hover {
  border-color: var(--clr-primary-500);
  background: var(--clr-primary-50);
  transform: translateY(-0.25rem);
  box-shadow: 0 0.5rem 1.5rem rgba(10, 151, 237, 0.15);
}
.no-order-document:hover::before {
  transform: scaleY(1);
}
.no-order-document:hover .no-order-document__icon {
  transform: scale(1.1);
  color: var(--clr-primary-600);
}
.no-order-document:hover .no-order-document__arrow {
  transform: translateX(0.25rem);
}
.no-order-document__icon-wrapper {
  width: 4.5rem;
  height: 4.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--clr-primary-50);
  border-radius: 0.9rem;
  flex-shrink: 0;
  transition: all 0.3s ease;
}
.no-order-document__icon {
  font-size: 2rem;
  color: var(--clr-primary-600);
  transition: all 0.3s ease;
}
.no-order-document__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}
.no-order-document__label {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--clr-text-primary);
  line-height: 1.4;
}
.no-order-document__ref {
  font-size: 1.2rem;
  color: var(--clr-text-tertiary);
  font-family: "Courier New", monospace;
  word-break: break-all;
}
.no-order-document__arrow {
  font-size: 1.4rem;
  color: var(--clr-text-tertiary);
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.no-order-history__timeline {
  position: relative;
  padding-left: 3.2rem;
}
.no-order-history__item {
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
  margin-bottom: 2rem;
  position: relative;
}
.no-order-history__item:not(:last-child) .no-order-history__line {
  position: absolute;
  left: 1.1rem;
  top: 2.4rem;
  bottom: -2rem;
  width: 0.2rem;
  background: var(--clr-border-secondary);
}
.no-order-history__item:last-child {
  margin-bottom: 0;
}
.no-order-history__icon {
  position: relative;
  width: 2.4rem;
  height: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--clr-success-500);
  border-radius: 50%;
  flex-shrink: 0;
  z-index: 1;
}
.no-order-history__icon i {
  font-size: 1.2rem;
  color: var(--clr-base-white);
}
.no-order-history__line {
  position: absolute;
  left: 1.1rem;
  top: 2.4rem;
  bottom: -2rem;
  width: 0.2rem;
  background: var(--clr-border-secondary);
}
.no-order-history__content {
  flex: 1;
  padding-top: 0.2rem;
}
.no-order-history__status-text {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--clr-text-primary);
  margin-bottom: 0.6rem;
}
.no-order-history__time {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.2rem;
  color: var(--clr-text-secondary);
}
.no-order-history__time i {
  font-size: 1.1rem;
}
.no-order-history__actions {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.2rem;
}
.no-order-history__action-btn {
  width: 2.8rem;
  height: 2.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0.1rem solid var(--clr-border-primary);
  border-radius: 0.6rem;
  background: var(--clr-bg-primary);
  color: var(--clr-text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 1.3rem;
}
.no-order-history__action-btn:hover {
  border-color: var(--clr-primary-400);
  background: var(--clr-primary-50);
  color: var(--clr-primary-600);
}
.no-order-history__action-btn--delete:hover {
  border-color: var(--clr-danger-400);
  background: var(--clr-danger-50);
  color: var(--clr-danger-600);
}

.no-order-status-info {
  margin-top: 2.4rem;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}
.no-order-status-info__message {
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
  padding: 1.6rem;
  border-radius: 0.8rem;
  background: var(--clr-bg-secondary);
  border: 0.1rem solid var(--clr-border);
}
.no-order-status-info__message--success {
  background: var(--clr-success-50);
  border-color: var(--clr-success-200);
}
.no-order-status-info__message--error {
  background: var(--clr-danger-50);
  border-color: var(--clr-danger-200);
}
.no-order-status-info__message--info {
  background: var(--clr-info-50);
  border-color: var(--clr-info-200);
}
.no-order-status-info__icon {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.2rem;
}
.no-order-status-info__icon i {
  font-size: 1.8rem;
}
.no-order-status-info__message--success .no-order-status-info__icon {
  color: var(--clr-success-600);
}
.no-order-status-info__message--error .no-order-status-info__icon {
  color: var(--clr-danger-600);
}
.no-order-status-info__message--info .no-order-status-info__icon {
  color: var(--clr-info-600);
}
.no-order-status-info__content {
  flex: 1;
  min-width: 0;
}
.no-order-status-info__title {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 0.4rem;
}
.no-order-status-info__message--success .no-order-status-info__title {
  color: var(--clr-success-700);
}
.no-order-status-info__message--error .no-order-status-info__title {
  color: var(--clr-danger-700);
}
.no-order-status-info__message--info .no-order-status-info__title {
  color: var(--clr-info-700);
}
.no-order-status-info__text {
  font-size: 1.4rem;
  line-height: 1.5;
  color: var(--clr-text-secondary);
}
.no-order-status-info__memo {
  padding: 0;
  background: var(--clr-bg-primary);
  border: 0.1rem solid var(--clr-border);
  border-radius: 0.8rem;
  overflow: hidden;
}
.no-order-status-info__memo-label {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--clr-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 1.2rem 1.6rem;
  background: var(--clr-bg-secondary);
  border-bottom: 0.1rem solid var(--clr-border);
  margin: 0;
}
.no-order-status-info__memo-content {
  font-size: 1.4rem;
  line-height: 1.6;
  color: var(--clr-text-primary);
  white-space: pre-wrap;
  word-break: break-word;
  padding: 1.6rem;
  background: var(--clr-bg-primary);
}

.no-order-completion {
  margin-top: 2.4rem;
  padding: 2.4rem;
  background: var(--clr-success-50);
  border: 0.1rem solid var(--clr-success-200);
  border-radius: 1.2rem;
  text-align: center;
}
.no-order-completion__title {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--clr-success-700);
  margin: 0 0 1.2rem 0;
}
.no-order-completion__message {
  font-size: 1.4rem;
  color: var(--clr-text-primary);
  line-height: 1.6;
  margin-bottom: 2rem;
}
.no-order-completion--cancelled {
  background: var(--clr-danger-50);
  border-color: var(--clr-danger-200);
}
.no-order-completion--cancelled .no-order-completion__title {
  color: var(--clr-danger-700);
}
.no-order-completion .no-btn {
  min-width: 16rem;
}

.no-order-items__table-wrapper {
  padding: 0;
  overflow-x: auto;
}

.no-order-items-table-listing--table {
  display: block;
}
@media (max-width: 768px) {
  .no-order-items-table-listing--table {
    display: none !important;
  }
}
.no-order-items-table-listing--card {
  display: none;
}
@media (max-width: 768px) {
  .no-order-items-table-listing--card {
    display: block !important;
  }
}

.no-order-items-card-wrapper {
  display: none;
}
@media (max-width: 768px) {
  .no-order-items-card-wrapper {
    display: block;
  }
}

.no-order-items-card-group {
  margin-bottom: 2.4rem;
  border: 0.1rem solid var(--clr-border-primary);
  border-radius: 1.2rem;
  overflow: hidden;
  background: var(--clr-bg-elevated);
  box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.04);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.no-order-items-card-group:hover {
  box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.08);
}
.no-order-items-card-group__header {
  padding: 1.6rem 1.8rem;
  background: linear-gradient(135deg, var(--clr-primary-50) 0%, var(--clr-primary-100) 100%);
  border-bottom: 0.2rem solid var(--clr-primary-200);
}
.no-order-items-card-group__customer {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1.2rem;
}
.no-order-items-card-group__customer i {
  font-size: 1.6rem;
  color: var(--clr-primary-600);
  flex-shrink: 0;
}
.no-order-items-card-group__customer-name {
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--clr-primary-800);
  margin: 0;
  line-height: 1.4;
}
.no-order-items-card-group__meta {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  flex-wrap: wrap;
}
.no-order-items-card-group__meta-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.3rem;
  color: var(--clr-text-secondary);
  font-weight: 500;
}
.no-order-items-card-group__meta-item i {
  font-size: 1.2rem;
  color: var(--clr-primary-600);
}
.no-order-items-card-group__meta-item--total {
  color: var(--clr-success-700);
  font-weight: 700;
  font-size: 1.5rem;
  margin-left: auto;
}
.no-order-items-card-group__meta-item--total i {
  color: var(--clr-success-600);
}
.no-order-items-card-group__items {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  padding: 1.2rem;
}

.no-order-items-card {
  border: 0.1rem solid var(--clr-border-primary);
  border-radius: 1rem;
  padding: 1.6rem;
  background: var(--clr-bg-primary);
  display: flex;
  gap: 1.6rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.04);
}
@media (max-width: 544px) {
  .no-order-items-card {
    flex-direction: column;
    gap: 1.2rem;
  }
}
.no-order-items-card:hover {
  border-color: var(--clr-primary-300);
  box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.08);
  transform: translateY(-0.2rem);
}
.no-order-items-card__image {
  flex-shrink: 0;
  width: 11rem;
  height: 11rem;
  border-radius: 0.8rem;
  overflow: hidden;
  border: 0.1rem solid var(--clr-border-primary);
  background: var(--clr-bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.06);
}
.no-order-items-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.no-order-items-card__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.no-order-items-card__header {
  margin-bottom: 0;
}
.no-order-items-card__product-name {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--clr-text-primary);
  margin: 0;
  line-height: 1.4;
  letter-spacing: -0.01em;
}
.no-order-items-card__info {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.no-order-items-card__info-row {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 1rem;
  background: var(--clr-bg-secondary);
  border-radius: 0.8rem;
  border: 0.1rem solid var(--clr-border-secondary);
}
.no-order-items-card__info-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 2.8rem;
}
.no-order-items-card__summary {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 1.2rem;
  padding: 1.2rem 1.4rem;
  background: linear-gradient(135deg, var(--clr-primary-50) 0%, var(--clr-primary-100) 100%);
  border-radius: 0.8rem;
  border: 0.1rem solid var(--clr-primary-200);
  margin-top: 0.8rem;
  box-shadow: 0 0.2rem 0.4rem rgba(37, 99, 235, 0.1);
}
.no-order-items-card__summary-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  flex: 1;
}
.no-order-items-card__summary-item--amount {
  align-items: flex-end;
}
.no-order-items-card__summary-label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.1rem;
  color: var(--clr-text-secondary);
  font-weight: 600;
}
.no-order-items-card__summary-label i {
  font-size: 1.1rem;
  color: var(--clr-primary-600);
}
.no-order-items-card__summary-value {
  font-size: 1.4rem;
  color: var(--clr-text-primary);
  font-weight: 600;
}
.no-order-items-card__summary-value--amount {
  color: var(--clr-success-700);
  font-weight: 700;
  font-size: 1.8rem;
}
.no-order-items-card__label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.2rem;
  color: var(--clr-text-secondary);
  font-weight: 600;
  flex-shrink: 0;
}
.no-order-items-card__label i {
  font-size: 1.2rem;
  color: var(--clr-primary-600);
  width: 1.6rem;
  text-align: center;
}
.no-order-items-card__label span {
  white-space: nowrap;
}
.no-order-items-card__value {
  font-size: 1.3rem;
  color: var(--clr-text-primary);
  font-weight: 500;
  text-align: right;
  word-break: break-word;
}
.no-order-items-card__value--amount {
  color: var(--clr-success-700);
  font-weight: 700;
  font-size: 1.6rem;
}
.no-order-items-card__color-block {
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 0.3rem;
  border: 0.1rem solid var(--clr-border-primary);
  display: inline-block;
  margin-right: 0.6rem;
  vertical-align: middle;
  box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.1);
}
.no-order-items-card__loupe {
  margin-top: 0.8rem;
}
.no-order-items-card__loupe-btn {
  width: 100%;
  padding: 1rem 1.2rem;
  background: linear-gradient(135deg, var(--clr-primary-50) 0%, var(--clr-primary-100) 100%);
  border: 0.1rem solid var(--clr-primary-300);
  border-radius: 0.8rem;
  color: var(--clr-primary-700);
  font-weight: 600;
  font-size: 1.3rem;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  box-shadow: 0 0.2rem 0.4rem rgba(37, 99, 235, 0.1);
}
.no-order-items-card__loupe-btn:hover {
  background: linear-gradient(135deg, var(--clr-primary-100) 0%, var(--clr-primary-200) 100%);
  border-color: var(--clr-primary-400);
  transform: translateY(-0.1rem);
  box-shadow: 0 0.4rem 0.8rem rgba(37, 99, 235, 0.15);
}
.no-order-items-card__loupe-btn:active {
  transform: translateY(0);
}
.no-order-items-card__loupe-btn i {
  font-size: 1.3rem;
}
.no-order-items-card__loupe-content {
  margin-top: 1.2rem;
  padding: 1.4rem;
  background: var(--clr-bg-secondary);
  border-radius: 0.8rem;
  border: 0.1rem solid var(--clr-border-primary);
  box-shadow: inset 0 0.2rem 0.4rem rgba(0, 0, 0, 0.04);
}
.no-order-items-card__loupe-section {
  margin-bottom: 1.4rem;
}
.no-order-items-card__loupe-section:last-child {
  margin-bottom: 0;
}
.no-order-items-card__loupe-section h5 {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--clr-text-primary);
  margin: 0 0 1rem 0;
  padding-bottom: 0.8rem;
  border-bottom: 0.2rem solid var(--clr-border-primary);
}
.no-order-items-card__children {
  margin-top: 1rem;
  padding: 1.4rem;
  background: linear-gradient(135deg, var(--clr-info-50) 0%, var(--clr-bg-secondary) 100%);
  border-radius: 0.8rem;
  border: 0.1rem solid var(--clr-info-200);
}
.no-order-items-card__children-header {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--clr-info-800);
  margin: 0 0 1.2rem 0;
  padding-bottom: 0.8rem;
  border-bottom: 0.2rem solid var(--clr-info-200);
}
.no-order-items-card__children-header i {
  font-size: 1.3rem;
  color: var(--clr-info-600);
}
.no-order-items-card__children-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.no-order-items-card__child-item {
  padding: 1.2rem;
  background: var(--clr-bg-primary);
  border-radius: 0.6rem;
  border: 0.1rem solid var(--clr-border-primary);
  transition: all 0.2s ease;
}
.no-order-items-card__child-item:hover {
  border-color: var(--clr-info-300);
  background: var(--clr-info-50);
}
.no-order-items-card__child-name {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--clr-text-primary);
  margin-bottom: 0.6rem;
  line-height: 1.4;
}
.no-order-items-card__child-meta {
  font-size: 1.2rem;
  color: var(--clr-text-secondary);
  margin-bottom: 0.6rem;
  font-family: "Courier New", monospace;
}
.no-order-items-card__child-qty-amount {
  font-size: 1.3rem;
  color: var(--clr-text-primary);
  font-weight: 500;
}
.no-order-items-card__actions {
  margin-top: 1.2rem;
  padding-top: 1.2rem;
  border-top: 0.2rem solid var(--clr-border-primary);
}

.no-order-items__table-wrapper {
  padding: 0;
  overflow-x: auto;
}
.no-order-items__customer-group {
  margin-bottom: 3rem;
}
.no-order-items__customer-header {
  padding: 1.5rem 2rem;
  background: var(--clr-primary-50);
  border-bottom: 2px solid var(--clr-primary-200);
  border-radius: 0.8rem 0.8rem 0 0;
}
.no-order-items__customer-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
@media (max-width: 768px) {
  .no-order-items__customer-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
}
.no-order-items__customer-name {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--clr-primary-800);
  margin: 0;
}
.no-order-items__customer-name i {
  font-size: 1.6rem;
  color: var(--clr-primary-600);
}
.no-order-items__customer-meta {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  font-size: 1.4rem;
}
.no-order-items__customer-count {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--clr-text-secondary);
  font-weight: 500;
}
.no-order-items__customer-count i {
  color: var(--clr-primary-600);
}
.no-order-items__customer-total {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--clr-success-700);
  font-weight: 700;
  font-size: 1.5rem;
}
.no-order-items__customer-total i {
  color: var(--clr-success-600);
}
.no-order-items__table-container {
  overflow-x: auto;
  border: 1px solid var(--clr-border-primary);
  border-top: none;
  border-radius: 0 0 0.8rem 0.8rem;
  background: var(--clr-bg-primary);
}

.no-order-items-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.3rem;
  background: var(--clr-bg-primary);
  min-width: 1800px;
}
.no-order-items-table thead {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--clr-bg-primary);
}
.no-order-items-table thead tr:first-child th {
  font-weight: 700;
  font-size: 1.4rem;
  padding: 1.2rem 0.8rem;
  text-align: center;
  border: 1px solid var(--clr-border-primary);
  background: var(--clr-info-50);
  color: var(--clr-gray-900);
  white-space: nowrap;
}
.no-order-items-table thead tr:first-child th.sticky-col {
  position: sticky;
  z-index: 11;
  background: var(--clr-info-50);
}
.no-order-items-table thead tr:first-child th.sticky-col--image {
  left: 0;
  width: 100px;
}
.no-order-items-table thead tr:first-child th.sticky-col--product {
  left: 100px;
  min-width: 200px;
}
.no-order-items-table thead tr:last-child th {
  font-weight: 600;
  font-size: 1.2rem;
  padding: 0.8rem;
  text-align: center;
  border: 1px solid var(--clr-border-primary);
  background: var(--clr-gray-50);
  color: var(--clr-text-primary);
  white-space: nowrap;
}
.no-order-items-table thead tr:last-child th.sticky-col {
  position: sticky;
  z-index: 11;
  background: var(--clr-gray-50);
}
.no-order-items-table thead tr:last-child th.sticky-col--image {
  left: 0;
}
.no-order-items-table thead tr:last-child th.sticky-col--product {
  left: 100px;
}
.no-order-items-table tbody tr {
  border-bottom: 1px solid var(--clr-border-secondary);
  transition: background-color 0.2s ease;
  background: var(--clr-bg-primary);
}
.no-order-items-table tbody tr:hover {
  background: var(--clr-gray-50);
}
.no-order-items-table tbody tr:last-child {
  border-bottom: none;
}
.no-order-items-table tbody td {
  padding: 1rem 0.8rem;
  border: 1px solid var(--clr-border-secondary);
  vertical-align: middle;
  text-align: center;
  background: var(--clr-bg-primary);
  color: var(--clr-text-primary);
}
.no-order-items-table tbody td.sticky-col {
  position: sticky;
  z-index: 12;
  background: var(--clr-bg-primary);
}
.no-order-items-table tbody td.sticky-col--image {
  left: 0;
  width: 100px;
  padding: 0.8rem;
}
.no-order-items-table tbody td.sticky-col--product {
  left: 100px;
  min-width: 200px;
  text-align: left;
}
.no-order-items-table__row:hover .sticky-col {
  background: var(--clr-gray-50);
}
.no-order-items-table__image {
  width: 80px;
  height: 80px;
  border-radius: 0.6rem;
  overflow: hidden;
  border: 1px solid var(--clr-border-primary);
  background: var(--clr-bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}
.no-order-items-table__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.no-order-items-table__product-name {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--clr-text-primary);
  margin-bottom: 0.5rem;
  line-height: 1.4;
}
.no-order-items-table__product-meta {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 1.2rem;
}
.no-order-items-table__product-code {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--clr-text-tertiary);
  font-family: "Courier New", monospace;
}
.no-order-items-table__product-code i {
  font-size: 1.1rem;
  color: var(--clr-text-tertiary);
}
.no-order-items-table__product-model {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--clr-text-secondary);
  font-weight: 500;
}
.no-order-items-table__product-model i {
  font-size: 1.1rem;
  color: var(--clr-text-tertiary);
}
.no-order-items-table__tags {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start;
}
.no-order-items-table__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.8rem;
  border-radius: 0.4rem;
  font-size: 1.2rem;
  font-weight: 500;
}
.no-order-items-table__tag--color {
  background: var(--clr-bg-secondary);
  color: var(--clr-text-primary);
  border: 1px solid var(--clr-border-primary);
}
.no-order-items-table__tag--option {
  background: var(--clr-bg-secondary);
  color: var(--clr-text-primary);
  border: 1px solid var(--clr-border-primary);
}
.no-order-items-table__color-block {
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 0.2rem;
  border: 1px solid var(--clr-border-primary);
  display: inline-block;
}
.no-order-items-table__lens-info {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 1.2rem;
  text-align: left;
  font-family: "Courier New", monospace;
}
.no-order-items-table__loupe-vision, .no-order-items-table__loupe-lens {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.no-order-items-table__loupe-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.2rem;
  background: var(--clr-bg-primary);
  border-radius: 0.5rem;
  overflow: hidden;
  border: 1px solid var(--clr-border-secondary);
  box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.04);
}
.no-order-items-table__loupe-table thead {
  background: var(--clr-gray-50);
  border-bottom: 1px solid var(--clr-border-primary);
}
.no-order-items-table__loupe-table thead th {
  padding: 0.8rem 0.6rem;
  text-align: center;
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--clr-text-primary);
  border-right: 1px solid var(--clr-border-secondary);
  white-space: nowrap;
}
.no-order-items-table__loupe-table thead th:last-child {
  border-right: none;
}
.no-order-items-table__loupe-table tbody th {
  background: var(--clr-gray-50);
  color: var(--clr-text-primary);
  font-weight: 600;
  padding: 0.8rem 0.6rem;
  text-align: left;
  border-right: 1px solid var(--clr-border-secondary);
  border-bottom: 1px solid var(--clr-border-secondary);
  font-size: 1.1rem;
  width: 60px;
}
.no-order-items-table__loupe-table tbody th:last-child {
  border-right: none;
}
.no-order-items-table__loupe-table tbody td {
  padding: 0.8rem 0.6rem;
  text-align: center;
  color: var(--clr-text-primary);
  border-right: 1px solid var(--clr-border-secondary);
  border-bottom: 1px solid var(--clr-border-secondary);
  font-family: "Courier New", monospace;
  font-size: 1.2rem;
  background: var(--clr-bg-primary);
  transition: background-color 0.2s ease;
}
.no-order-items-table__loupe-table tbody td:last-child {
  border-right: none;
}
.no-order-items-table__loupe-table tbody tr:last-child th,
.no-order-items-table__loupe-table tbody tr:last-child td {
  border-bottom: none;
}
.no-order-items-table__loupe-table tbody tr:hover td {
  background: var(--clr-gray-50);
}
.no-order-items-table__loupe-table--lens thead th {
  padding: 0.7rem 0.5rem;
  font-size: 1rem;
}
.no-order-items-table__loupe-table--lens thead th:first-child {
  width: 80px;
}
.no-order-items-table__loupe-table--lens tbody th {
  padding: 0.7rem 0.5rem;
  font-size: 1rem;
  width: 80px;
}
.no-order-items-table__loupe-table--lens tbody td {
  padding: 0.7rem 0.5rem;
  font-size: 1.1rem;
}
.no-order-items-table__add-option {
  margin-top: 0.6rem;
  padding: 0.6rem 0.8rem;
  background: var(--clr-gray-50);
  border-radius: 0.4rem;
  font-size: 1.1rem;
  color: var(--clr-text-secondary);
  border: 1px solid var(--clr-border-secondary);
  text-align: center;
}
.no-order-items-table__child-items {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  text-align: left;
}
.no-order-items-table__child-item {
  padding: 0.8rem;
  background: var(--clr-bg-secondary);
  border-radius: 0.4rem;
  border: 1px solid var(--clr-border-primary);
}
.no-order-items-table__child-name {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--clr-text-primary);
  margin-bottom: 0.4rem;
}
.no-order-items-table__child-meta {
  font-size: 1.1rem;
  color: var(--clr-text-secondary);
  margin-bottom: 0.4rem;
  font-family: "Courier New", monospace;
}
.no-order-items-table__child-qty-amount {
  font-size: 1.2rem;
  color: var(--clr-text-primary);
  font-weight: 500;
}
.no-order-items-table__qty {
  font-weight: 600;
  color: var(--clr-text-primary);
}
.no-order-items-table__amount {
  font-weight: 700;
  color: var(--clr-success-700);
  font-size: 1.4rem;
}

.no-order-items-table-container {
  position: relative;
}
.no-order-items-table-container::before, .no-order-items-table-container::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 10px;
  pointer-events: none;
  z-index: 20;
  transition: opacity 0.3s ease;
}
.no-order-items-table-container::before {
  left: 100px;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.1), transparent);
  opacity: 0;
}
.no-order-items-table-container::after {
  left: 300px;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.1), transparent);
  opacity: 0;
}
.no-order-items-table-container.scrolled::before, .no-order-items-table-container.scrolled::after {
  opacity: 1;
}

.no-order-items__list {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.no-order-customer-group {
  border: 1px solid var(--clr-border-primary);
  border-radius: 1rem;
  background: var(--clr-bg-elevated);
  overflow: hidden;
  margin-bottom: 2rem;
}
.no-order-customer-group__header {
  padding: 1.5rem 2rem;
  background: var(--clr-primary-50);
  border-bottom: 2px solid var(--clr-primary-200);
}
.no-order-customer-group__info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
@media (max-width: 768px) {
  .no-order-customer-group__info {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
}
.no-order-customer-group__name {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--clr-primary-800);
  margin: 0;
}
.no-order-customer-group__name i {
  font-size: 1.6rem;
  color: var(--clr-primary-600);
}
.no-order-customer-group__meta {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  font-size: 1.4rem;
}
@media (max-width: 768px) {
  .no-order-customer-group__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8rem;
  }
}
.no-order-customer-group__count {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--clr-text-secondary);
  font-weight: 500;
}
.no-order-customer-group__count i {
  color: var(--clr-primary-600);
}
.no-order-customer-group__total {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--clr-success-700);
  font-weight: 700;
  font-size: 1.5rem;
}
.no-order-customer-group__total i {
  color: var(--clr-success-600);
}
.no-order-customer-group__items {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.no-order-item {
  border: 1px solid var(--clr-border-primary);
  border-radius: 1rem;
  padding: 2.2rem;
  background: var(--clr-bg-elevated);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.04);
}
.no-order-item:hover {
  border-color: var(--clr-primary-300);
  box-shadow: 0 0.5rem 1.5rem rgba(10, 151, 237, 0.12);
  transform: translateY(-0.125rem);
}
.no-order-item__main {
  display: flex;
  gap: 2rem;
  margin-bottom: 2rem;
}
.no-order-item__image-wrapper {
  width: 12rem;
  height: 12rem;
  flex-shrink: 0;
  border-radius: 0.9rem;
  overflow: hidden;
  border: 1px solid var(--clr-border-primary);
  background: var(--clr-bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.no-order-item__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.no-order-item__image-wrapper:hover .no-order-item__image {
  transform: scale(1.05);
}
.no-order-item__info {
  flex: 1;
  min-width: 0;
  padding: 1.2rem;
  background: var(--clr-bg-secondary);
  border: 1px solid var(--clr-border-primary);
  border-radius: 0.8rem;
}
.no-order-item__title {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--clr-text-primary);
  margin: 0 0 0.6rem 0;
  line-height: 1.4;
}
.no-order-item__meta {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-bottom: 0.9rem;
  flex-wrap: wrap;
}
.no-order-item__code {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.3rem;
  color: var(--clr-text-tertiary);
  font-family: "Courier New", monospace;
}
.no-order-item__code i {
  font-size: 1.2rem;
  color: var(--clr-text-tertiary);
}
.no-order-item__model {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.3rem;
  color: var(--clr-text-secondary);
  font-weight: 500;
}
.no-order-item__model i {
  font-size: 1.2rem;
  color: var(--clr-text-tertiary);
}
.no-order-item__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1rem;
  margin-bottom: 1.2rem;
}
.no-order-item__summary {
  display: flex;
  gap: 1.5rem;
  padding-top: 1.2rem;
  margin-top: 1.2rem;
  border-top: 1px solid var(--clr-info-200);
}
@media (max-width: 768px) {
  .no-order-item__summary {
    flex-direction: column;
    gap: 1rem;
  }
}
.no-order-item__summary-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.no-order-item__summary-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 1.2rem;
  color: var(--clr-info-700);
  font-weight: 500;
}
.no-order-item__summary-label i {
  font-size: 1.1rem;
  color: var(--clr-info-600);
}
.no-order-item__summary-value {
  font-size: 1.4rem;
  color: var(--clr-info-900);
  font-weight: 600;
}
.no-order-item__summary-value--amount {
  color: var(--clr-success-600);
  font-size: 1.6rem;
  font-weight: 700;
}
.no-order-item__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 0.6rem;
  font-size: 1.2rem;
  font-weight: 500;
}
.no-order-item__tag i {
  font-size: 1.1rem;
}
.no-order-item__tag--color {
  background: var(--clr-bg-secondary);
  color: var(--clr-text-primary);
  border: 1px solid var(--clr-border-primary);
}
.no-order-item__tag--color i {
  color: var(--clr-text-tertiary);
}
.no-order-item__tag--option {
  background: var(--clr-bg-secondary);
  color: var(--clr-text-primary);
  border: 1px solid var(--clr-border-primary);
}
.no-order-item__tag--option i {
  color: var(--clr-text-tertiary);
}
.no-order-item__actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-self: flex-start;
  min-width: 150px;
}
.no-order-item__summary-inline {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1rem;
  background: var(--clr-bg-secondary);
  border-radius: 0.6rem;
  border: 1px solid var(--clr-border-primary);
}
.no-order-item__summary-inline-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.3rem;
  color: var(--clr-text-primary);
  font-weight: 500;
}
.no-order-item__summary-inline-item i {
  font-size: 1.2rem;
  color: var(--clr-primary-600);
}
.no-order-item__summary-inline-item--amount {
  color: var(--clr-success-700);
  font-weight: 700;
  font-size: 1.4rem;
}
.no-order-item__summary-inline-item--amount i {
  color: var(--clr-success-600);
}
.no-order-item__loupe-wrapper {
  margin: 2rem 0;
}
.no-order-item__loupe-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem 1.5rem;
  background: var(--clr-bg-secondary);
  border: 1px solid var(--clr-border-primary);
  border-radius: 0.8rem;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}
.no-order-item__loupe-toggle:hover {
  background: var(--clr-bg-primary);
  border-color: var(--clr-border-secondary);
}
.no-order-item__loupe-toggle:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--clr-primary-100);
}
.no-order-item__loupe-chevron {
  font-size: 1.2rem;
  color: var(--clr-text-secondary);
  transition: transform 0.3s ease;
}
.no-order-item__loupe-wrapper[data-expanded=true] .no-order-item__loupe-chevron {
  transform: rotate(180deg);
}
.no-order-item__loupe {
  margin-top: 1rem;
  padding: 2rem;
  background: var(--clr-bg-primary);
  border: 1px solid var(--clr-border-primary);
  border-radius: 1rem;
  display: none;
  flex-direction: column;
  gap: 2rem;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease, margin 0.3s ease;
}
.no-order-item__loupe[data-expanded=true] {
  display: flex;
  max-height: 5000px;
  opacity: 1;
}
.no-order-item__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--clr-border-secondary);
}
@media (min-width: 1024px) {
  .no-order-item__layout {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto 1fr;
  }
}
.no-order-item__main-section {
  grid-column: 1/-1;
}
@media (min-width: 1024px) {
  .no-order-item__main-section {
    grid-column: 1;
    grid-row: 1/-1;
  }
}
.no-order-item__children-section {
  padding: 1.5rem;
  background: var(--clr-bg-secondary);
  border-radius: 0.8rem;
  border: 1px solid var(--clr-border-primary);
}
@media (min-width: 1024px) {
  .no-order-item__children-section {
    grid-column: 2;
    grid-row: 1;
    min-width: 280px;
  }
}
.no-order-item__summary-section {
  padding: 1.5rem;
  background: var(--clr-bg-secondary);
  border-radius: 0.8rem;
  border: 1px solid var(--clr-border-primary);
}
@media (min-width: 1024px) {
  .no-order-item__summary-section {
    grid-column: 2;
    grid-row: 2;
    min-width: 280px;
  }
}
.no-order-item__loupe-title {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--clr-text-primary);
  margin: 0 0 0.5rem 0;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--clr-border-primary);
}
.no-order-item__loupe-title i {
  font-size: 1.5rem;
  color: var(--clr-text-secondary);
}
.no-order-item__loupe-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.no-order-item__loupe-section-title {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--clr-text-primary);
  margin: 0;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--clr-border-primary);
}
.no-order-item__details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.6rem;
  padding: 1.5rem;
  background: var(--clr-bg-secondary);
  border-radius: 0.8rem;
  border: 1px solid var(--clr-border-primary);
}
@media (max-width: 768px) {
  .no-order-item__details {
    grid-template-columns: 1fr;
    gap: 1.2rem;
    padding: 1.2rem;
  }
}
.no-order-item__detail {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.no-order-item__detail-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.2rem;
  color: var(--clr-text-secondary);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.no-order-item__detail-label i {
  font-size: 1.1rem;
  color: var(--clr-primary-500);
}
.no-order-item__detail-value {
  font-size: 1.5rem;
  color: var(--clr-text-primary);
  font-weight: 600;
}
.no-order-item__detail-value--amount {
  color: var(--clr-success-600);
  font-size: 1.8rem;
  font-weight: 700;
}
.no-order-item__children-title {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--clr-text-primary);
  margin: 0 0 1.5rem 0;
}
.no-order-item__children-title i {
  font-size: 1.4rem;
  color: var(--clr-primary-500);
}
.no-order-item__children-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.no-order-item__child {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
  padding: 1.5rem;
  background: var(--clr-bg-primary);
  border-radius: 0.8rem;
  border: 1px solid var(--clr-border-primary);
  transition: all 0.2s ease;
}
.no-order-item__child:hover {
  border-color: var(--clr-primary-300);
  box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.05);
}
@media (max-width: 768px) {
  .no-order-item__child {
    flex-direction: column;
    gap: 1rem;
  }
}
.no-order-item__child-info {
  flex: 1;
  min-width: 0;
}
.no-order-item__child-name {
  font-size: 1.5rem;
  color: var(--clr-text-primary);
  font-weight: 600;
  margin: 0 0 0.8rem 0;
}
.no-order-item__child-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.8rem;
  flex-wrap: wrap;
}
.no-order-item__child-code, .no-order-item__child-model {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.2rem;
  color: var(--clr-text-secondary);
  font-family: "Courier New", monospace;
}
.no-order-item__child-code i, .no-order-item__child-model i {
  font-size: 1.1rem;
  color: var(--clr-info-500);
}
.no-order-item__child-model {
  font-family: inherit;
  font-weight: 500;
}
.no-order-item__child-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.no-order-item__child-summary {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  align-items: flex-end;
  padding: 1rem;
  background: var(--clr-bg-secondary);
  border-radius: 0.6rem;
  border: 1px solid var(--clr-border-primary);
  min-width: 140px;
}
@media (max-width: 768px) {
  .no-order-item__child-summary {
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
  }
}
.no-order-item__child-qty, .no-order-item__child-amount {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.3rem;
  color: var(--clr-text-primary);
  font-weight: 500;
}
.no-order-item__child-qty i, .no-order-item__child-amount i {
  font-size: 1.2rem;
  color: var(--clr-primary-600);
}
.no-order-item__child-amount {
  color: var(--clr-success-700);
  font-weight: 700;
  font-size: 1.4rem;
}
.no-order-item__child-amount i {
  color: var(--clr-success-600);
}
.no-order-item__total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  margin-top: 2rem;
  background: var(--clr-primary-50);
  border: 2px solid var(--clr-primary-200);
  border-radius: 0.8rem;
}
.no-order-item__total-label {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--clr-primary-800);
}
.no-order-item__total-value {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--clr-success-700);
}

.no-order-loupe-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.2rem;
  background: var(--clr-bg-primary);
  border-radius: 0.5rem;
  overflow: hidden;
  border: 1px solid var(--clr-border-secondary);
  box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.04);
}
.no-order-loupe-table thead {
  background: var(--clr-gray-50);
  border-bottom: 1px solid var(--clr-border-primary);
}
.no-order-loupe-table thead th {
  padding: 0.8rem 0.6rem;
  text-align: center;
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--clr-text-primary);
  border-right: 1px solid var(--clr-border-secondary);
  white-space: nowrap;
}
.no-order-loupe-table thead th:last-child {
  border-right: none;
}
.no-order-loupe-table tbody th {
  background: var(--clr-gray-50);
  color: var(--clr-text-primary);
  font-weight: 600;
  padding: 0.8rem 0.6rem;
  text-align: left;
  border-right: 1px solid var(--clr-border-secondary);
  border-bottom: 1px solid var(--clr-border-secondary);
  font-size: 1.1rem;
  width: 60px;
}
.no-order-loupe-table tbody th:last-child {
  border-right: none;
}
.no-order-loupe-table tbody td {
  padding: 0.8rem 0.6rem;
  text-align: center;
  color: var(--clr-text-primary);
  border-right: 1px solid var(--clr-border-secondary);
  border-bottom: 1px solid var(--clr-border-secondary);
  font-family: "Courier New", monospace;
  font-size: 1.2rem;
  background: var(--clr-bg-primary);
  transition: background-color 0.2s ease;
}
.no-order-loupe-table tbody td:last-child {
  border-right: none;
}
.no-order-loupe-table tbody tr:last-child th,
.no-order-loupe-table tbody tr:last-child td {
  border-bottom: none;
}
.no-order-loupe-table tbody tr:hover td {
  background: var(--clr-gray-50);
}
.no-order-loupe-table--summary {
  table-layout: auto;
}
.no-order-loupe-table--summary thead th {
  padding: 0.7rem 0.5rem;
  font-size: 1rem;
}
.no-order-loupe-table--summary thead th:first-child {
  min-width: 13.5rem;
  width: auto;
}
.no-order-loupe-table--summary tbody th {
  padding: 0.7rem 0.5rem;
  font-size: 1rem;
  min-width: 13.5rem;
  width: auto;
  white-space: normal;
}
.no-order-loupe-table--summary tbody td {
  padding: 0.7rem 0.5rem;
  font-size: 1.1rem;
}
@media (max-width: 768px) {
  .no-order-loupe-table {
    font-size: 1.1rem;
  }
  .no-order-loupe-table thead th {
    padding: 0.7rem 0.5rem;
    font-size: 1rem;
  }
  .no-order-loupe-table tbody th,
  .no-order-loupe-table tbody td {
    padding: 0.7rem 0.5rem;
    font-size: 1.1rem;
  }
  .no-order-loupe-table--summary thead th {
    font-size: 0.9rem;
    padding: 0.6rem 0.4rem;
  }
  .no-order-loupe-table--summary tbody th,
  .no-order-loupe-table--summary tbody td {
    font-size: 1rem;
    padding: 0.6rem 0.4rem;
  }
}

.no-empty-state {
  text-align: center;
  padding: 4rem 2rem;
  color: var(--clr-text-tertiary);
}
.no-empty-state__icon {
  font-size: 3.5rem;
  margin-bottom: 1rem;
  opacity: 0.4;
  color: var(--clr-text-tertiary);
}
.no-empty-state__text {
  font-size: 1.5rem;
  margin: 0;
  color: var(--clr-text-secondary);
}

@media (max-width: 1024px) {
  .no-order-detail {
    padding: 1.5rem;
  }
  .no-order-detail__container {
    gap: 1.5rem;
  }
  .no-order-state-process {
    padding: 2rem 0.5rem;
  }
  .no-order-state-dates__grid {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  }
}
@media (max-width: 768px) {
  .no-order-detail {
    padding: 1rem;
  }
  .no-order-detail__container {
    gap: 1.5rem;
  }
  .no-order-summary__grid {
    grid-template-columns: 1fr;
  }
  .no-order-state-process {
    flex-wrap: wrap;
    gap: 1.2rem;
    padding: 2rem 1.2rem;
  }
  .no-order-state-process__step {
    flex: 0 0 calc(50% - 0.6rem);
    min-width: 120px;
    padding: 1rem 0.8rem;
  }
  .no-order-state-process__step.is-clickable:active {
    transform: translateY(0);
    background: var(--clr-primary-100);
  }
  .no-order-state-process__circle {
    width: 4.5rem;
    height: 4.5rem;
    margin-bottom: 1rem;
  }
  .no-order-state-process__circle i {
    font-size: 1.6rem;
  }
  .no-order-state-process__label {
    font-size: 1.3rem;
  }
  .no-order-state-process__label.is-active {
    font-size: 1.4rem;
  }
  .no-order-state-process__date {
    font-size: 1.2rem;
    padding: 0.3rem 0.6rem;
  }
  .no-order-state-process__time {
    font-size: 1.1rem;
  }
  .no-order-state-process__line {
    display: none;
  }
  .no-order-state-process__divider {
    width: 100%;
    flex-basis: 100%;
    margin: 1rem 0;
  }
  .no-order-state-process__step--reject {
    margin-left: 0;
    flex: 0 0 100%;
  }
  .no-order-state-process__step--reject::before {
    display: none;
  }
  .no-order-state-dates__grid {
    grid-template-columns: 1fr;
  }
  .no-order-item__main {
    flex-direction: column;
    gap: 1rem;
  }
  .no-order-item__image-wrapper {
    width: 100%;
    height: 12rem;
  }
  .no-order-item__actions {
    width: 100%;
  }
  .no-order-item__details {
    grid-template-columns: 1fr;
  }
  .no-order-documents__grid {
    grid-template-columns: 1fr;
  }
}
.no-order-edit-form__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-bottom: 2rem;
}
@media (max-width: 768px) {
  .no-order-edit-form__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}
@media (max-width: 1024px) {
  .no-order-edit-form__grid {
    gap: 2rem;
  }
}
.no-order-edit-form__dates-card .no-card__body, .no-order-edit-form__other-card .no-card__body, .no-order-edit-form__awb-card .no-card__body, .no-order-edit-form__other-files-card .no-card__body {
  padding: 1.5rem;
}
.no-order-edit-form__date-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.8rem 0;
}
.no-order-edit-form__date-icon {
  flex-shrink: 0;
  width: 2.4rem;
  height: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-primary-500);
  font-size: 1.6rem;
}
.no-order-edit-form__date-content {
  flex: 1;
  min-width: 0;
}
.no-order-edit-form__date-label {
  margin-bottom: 0.6rem;
}
.no-order-edit-form__date-text {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--clr-text-primary);
}
.no-order-edit-form__section {
  margin-bottom: 1.5rem;
}
.no-order-edit-form__section:last-child {
  margin-bottom: 0;
}
.no-order-edit-form__section-title {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--clr-text-primary);
  margin: 0 0 1rem 0;
  padding-bottom: 0.8rem;
  border-bottom: 0.1rem solid var(--clr-border-secondary);
}
.no-order-edit-form__date-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
@media (max-width: 768px) {
  .no-order-edit-form__date-row {
    grid-template-columns: 1fr;
  }
}
.no-order-edit-form__actions {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  padding-top: 1.5rem;
  margin-top: 2rem;
  border-top: 0.1rem solid var(--clr-border-primary);
}
.no-order-edit-form .no-form-field {
  margin-bottom: 1.2rem;
}
.no-order-edit-form .no-form-field:last-child {
  margin-bottom: 0;
}

.no-order-edit-form {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}
@media (max-width: 1024px) {
  .no-order-edit-form {
    gap: 2rem;
  }
}
.no-order-edit-form__two-column-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2.4rem;
}
@media (max-width: 1024px) {
  .no-order-edit-form__two-column-layout {
    gap: 1.6rem;
  }
}
@media (max-width: 768px) {
  .no-order-edit-form__two-column-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}
.no-order-edit-form__dates-card .no-card__body {
  padding: 2rem;
}
@media (max-width: 768px) {
  .no-order-edit-form__dates-card .no-card__body {
    padding: 1.6rem;
  }
}
.no-order-edit-form__other-card .no-card__body {
  padding: 2rem;
}
@media (max-width: 768px) {
  .no-order-edit-form__other-card .no-card__body {
    padding: 1.6rem;
  }
}
.no-order-edit-form__date-fields {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.6rem;
}
@media (max-width: 768px) {
  .no-order-edit-form__date-fields {
    grid-template-columns: 1fr;
  }
}
.no-order-edit-form__date-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 1.4rem;
  padding: 1.6rem;
  background: var(--clr-bg-secondary);
  border: 0.1rem solid var(--clr-border-primary);
  border-radius: 0.8rem;
  transition: all 0.2s ease;
}
@media (max-width: 1024px) {
  .no-order-edit-form__date-item {
    padding: 1.4rem;
    gap: 1.2rem;
  }
}
@media (max-width: 768px) {
  .no-order-edit-form__date-item {
    padding: 1.2rem;
    gap: 1rem;
    flex-direction: column;
  }
  .no-order-edit-form__date-item .no-form-field {
    margin-bottom: 0;
    width: 100%;
  }
}
.no-order-edit-form__date-item:hover {
  border-color: var(--clr-primary-300);
  box-shadow: 0 0.2rem 0.8rem rgba(37, 99, 235, 0.08);
}
.no-order-edit-form__date-icon {
  width: 3.2rem;
  height: 3.2rem;
  min-width: 3.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--clr-primary-500);
  border-radius: 0.6rem;
  color: var(--clr-base-white);
  font-size: 1.6rem;
  flex-shrink: 0;
  box-shadow: 0 0.2rem 0.4rem rgba(37, 99, 235, 0.2);
}
@media (max-width: 1024px) {
  .no-order-edit-form__date-icon {
    width: 2.8rem;
    height: 2.8rem;
    min-width: 2.8rem;
    font-size: 1.4rem;
  }
}
@media (max-width: 768px) {
  .no-order-edit-form__date-icon {
    width: 2.6rem;
    height: 2.6rem;
    min-width: 2.6rem;
    font-size: 1.3rem;
  }
}
.no-order-edit-form__date-icon i {
  display: block;
  line-height: 1;
}
.no-order-edit-form__date-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}
@media (max-width: 768px) {
  .no-order-edit-form__date-content {
    gap: 0.8rem;
    width: 100%;
  }
}
.no-order-edit-form__date-label {
  display: flex;
  align-items: center;
  margin-bottom: 0;
}
.no-order-edit-form__date-text {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--clr-text-primary);
  line-height: 1.4;
}
@media (max-width: 1024px) {
  .no-order-edit-form__date-text {
    font-size: 1.4rem;
  }
}
@media (max-width: 768px) {
  .no-order-edit-form__date-text {
    font-size: 1.3rem;
  }
}
.no-order-edit-form__section {
  margin-bottom: 2rem;
}
.no-order-edit-form__section:last-child {
  margin-bottom: 0;
}
@media (max-width: 768px) {
  .no-order-edit-form__section {
    margin-bottom: 1.6rem;
  }
}
.no-order-edit-form__section-title {
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--clr-text-primary);
  margin-bottom: 1.6rem;
  padding-bottom: 1rem;
  border-bottom: 0.1rem solid var(--clr-border-primary);
}
@media (max-width: 768px) {
  .no-order-edit-form__section-title {
    font-size: 1.5rem;
    margin-bottom: 1.4rem;
    padding-bottom: 0.8rem;
  }
}
.no-order-edit-form__awb-section {
  padding: 1.6rem;
  background: var(--clr-bg-secondary);
  border: 0.1rem solid var(--clr-border-primary);
  border-radius: 0.8rem;
  margin-top: 1.6rem;
  transition: opacity 0.3s ease, display 0.3s ease;
  opacity: 1;
}
@media (max-width: 768px) {
  .no-order-edit-form__awb-section {
    padding: 1.4rem;
    margin-top: 1.4rem;
  }
}
.no-order-edit-form__awb-section[style*="display: none"] {
  opacity: 0;
}
.no-order-edit-form__actions {
  display: flex;
  gap: 1.2rem;
  margin-top: 2.4rem;
  padding-top: 2.4rem;
  border-top: 0.1rem solid var(--clr-border-primary);
}
@media (max-width: 1024px) {
  .no-order-edit-form__actions {
    justify-content: flex-start;
  }
}
@media (max-width: 768px) {
  .no-order-edit-form__actions {
    flex-direction: column;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 2rem;
  }
}

.no-order-status-display {
  display: inline-flex;
  align-items: center;
}

.box-detail-modal {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-height: 200px;
  max-height: 500px;
}
.box-detail-modal__header {
  flex-shrink: 0;
}
.box-detail-modal__bulk-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.box-detail-modal__select-all-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
.box-detail-modal__select-all-label {
  font-size: 1.3rem;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  user-select: none;
}
.box-detail-modal__bulk-select {
  flex: 1;
  min-width: 180px;
  padding: 1rem 1.2rem;
  font-size: 1.4rem;
  line-height: 1.5;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  background: #ffffff;
  cursor: pointer;
  transition: all 0.2s ease;
}
.box-detail-modal__bulk-select:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.box-detail-modal__bulk-select:hover {
  border-color: #9ca3af;
}
.box-detail-modal__bulk-btn {
  flex-shrink: 0;
  padding: 1rem 1.5rem;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.5;
}
.box-detail-modal__summary {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.2rem;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 0.375rem;
  margin-top: 0.5rem;
}
.box-detail-modal__summary-label {
  font-size: 1.3rem;
  font-weight: 600;
  color: #374151;
  flex-shrink: 0;
}
.box-detail-modal__summary-content {
  font-size: 1.3rem;
  font-weight: 500;
  color: #1f2937;
  flex: 1;
}
.box-detail-modal__body {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding-right: 0.5rem;
}
.box-detail-modal__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.box-detail-modal__item {
  display: flex;
  align-items: center;
  padding: 0.625rem 0.75rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.375rem;
  background: #ffffff;
  transition: all 0.2s ease;
}
.box-detail-modal__item:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}
.box-detail-modal__item-label {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  cursor: pointer;
  min-width: 0;
}
.box-detail-modal__checkbox-group {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.box-detail-modal__checkbox {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
}
.box-detail-modal__checkbox:checked + .no-checkbox-custom {
  background: #3b82f6;
  border-color: #3b82f6;
}
.box-detail-modal__checkbox:checked + .no-checkbox-custom i {
  opacity: 1;
  transform: scale(1);
}
.box-detail-modal__checkbox:focus + .no-checkbox-custom {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}
.box-detail-modal__checkbox:disabled + .no-checkbox-custom {
  background: #f3f4f6;
  border-color: #d1d5db;
  cursor: not-allowed;
  opacity: 0.5;
}
.box-detail-modal .no-checkbox-custom--small {
  width: 1.4rem;
  height: 1.4rem;
  border: 1.5px solid #d1d5db;
  border-radius: 0.25rem;
  background: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.box-detail-modal .no-checkbox-custom--small i {
  font-size: 0.85rem;
  color: #ffffff;
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.2s ease;
}
.box-detail-modal__item-sequence {
  font-size: 0.95rem;
  font-weight: 600;
  color: #6b7280;
  min-width: 1.75rem;
  flex-shrink: 0;
}
.box-detail-modal__item-name {
  flex: 1;
  font-size: 0.95rem;
  font-weight: 500;
  color: #000000;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.box-detail-modal__box-select {
  flex-shrink: 0;
  min-width: 90px;
  max-width: 110px;
  padding: 0.75rem 0.9rem;
  font-size: 1.2rem;
  line-height: 1.5;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  background: #ffffff;
  color: #000000;
  cursor: pointer;
  transition: all 0.2s ease;
}
.box-detail-modal__box-select:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.box-detail-modal__box-select:hover {
  border-color: #9ca3af;
}

[data-theme=dark] .box-detail-modal__select-all-label {
  color: var(--clr-text-primary);
}
[data-theme=dark] .box-detail-modal__bulk-select, [data-theme=dark] .box-detail-modal__box-select {
  background: var(--clr-bg-secondary);
  border-color: var(--clr-border-primary);
  color: var(--clr-text-primary);
}
[data-theme=dark] .box-detail-modal__bulk-select:focus, [data-theme=dark] .box-detail-modal__box-select:focus {
  border-color: var(--clr-primary-400);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}
[data-theme=dark] .box-detail-modal__bulk-select:hover, [data-theme=dark] .box-detail-modal__box-select:hover {
  border-color: var(--clr-border-secondary);
}
[data-theme=dark] .box-detail-modal__summary {
  background: var(--clr-bg-secondary);
  border-color: var(--clr-border-primary);
}
[data-theme=dark] .box-detail-modal__summary-label {
  color: var(--clr-text-primary);
}
[data-theme=dark] .box-detail-modal__summary-content {
  color: var(--clr-text-secondary);
}
[data-theme=dark] .box-detail-modal__item {
  background: var(--clr-bg-secondary);
  border-color: var(--clr-border-primary);
}
[data-theme=dark] .box-detail-modal__item:hover {
  background: var(--clr-bg-tertiary);
  border-color: var(--clr-border-secondary);
}
[data-theme=dark] .box-detail-modal__item-sequence {
  color: var(--clr-text-tertiary);
}
[data-theme=dark] .box-detail-modal__item-name {
  color: var(--clr-text-primary);
}
[data-theme=dark] .box-detail-modal__checkbox:disabled + .no-checkbox-custom {
  background: var(--clr-bg-tertiary);
  border-color: var(--clr-border-primary);
}
[data-theme=dark] .box-detail-modal .no-checkbox-custom--small {
  border-color: var(--clr-border-primary);
  background: var(--clr-bg-secondary);
}

.no-order-doc {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
  background: #ffffff;
  color: #000000;
  overflow-y: auto;
}
.no-order-doc__header {
  margin-bottom: 2rem;
}
.no-order-doc__title {
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--clr-base-black);
  margin: 0;
}
.no-order-doc__form {
  background: #ffffff;
}
.no-order-doc__container {
  background: #ffffff;
  color: #000000;
  padding: 1.2rem;
  min-width: 108rem;
  page-break-inside: avoid;
}
@media print {
  .no-order-doc__container {
    padding: 1rem;
    page-break-inside: avoid;
    break-inside: avoid;
  }
}
.no-order-doc--edit .no-order-doc__container {
  padding: 1.5rem;
}
@media print {
  .no-order-doc--edit .no-order-doc__container {
    padding: 1.2rem;
  }
}
.no-order-doc__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 1.5rem 0;
  margin-top: 3rem;
  border-top: 1px solid #e5e7eb;
  overflow: visible;
  position: relative;
  z-index: 2;
}
.no-order-doc__actions-buttons {
  display: flex;
  gap: 0.8rem;
  align-items: center;
  overflow: visible;
}
.no-order-doc__serial-section {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 0.1rem solid var(--clr-border-secondary, #e5e7eb);
}
.no-order-doc__serial-desc {
  font-size: 1.35rem;
  color: var(--clr-text, #374151);
  margin: 0 0 1rem;
  line-height: 1.5;
}
.no-order-doc__action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.4rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  background: #ffffff;
  color: #6b7280;
  font-size: 1.3rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
}
.no-order-doc__action-btn:hover {
  border-color: #d1d5db;
  background: #f9fafb;
  transform: translateY(-0.1rem);
}
.no-order-doc__action-btn--cancel {
  color: #6b7280;
}
.no-order-doc__action-btn--cancel:hover {
  border-color: #9ca3af;
  background: #f3f4f6;
  color: #4b5563;
}
.no-order-doc__action-btn--save, .no-order-doc__action-btn--download {
  background: #2563eb;
  border-color: #2563eb;
  color: #ffffff;
}
.no-order-doc__action-btn--save:hover, .no-order-doc__action-btn--download:hover {
  background: #1d4ed8;
  border-color: #1d4ed8;
}
.no-order-doc__download-split {
  display: inline-flex;
  align-items: stretch;
  position: relative;
  overflow: visible;
}
.no-order-doc__download-split .no-order-doc__action-btn--download {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right-color: rgba(255, 255, 255, 0.35);
}
.no-order-doc__download-split__more {
  position: relative;
  display: flex;
  overflow: visible;
}
.no-order-doc__download-split__caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.75rem;
  margin: 0;
  border: 1px solid #2563eb;
  border-left: none;
  border-radius: 0 0.5rem 0.5rem 0;
  background: #2563eb;
  color: #ffffff;
  font-size: 1.2rem;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.no-order-doc__download-split__caret:hover:not(:disabled) {
  background: #1d4ed8;
  border-color: #1d4ed8;
}
.no-order-doc__download-split__caret:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}
.no-order-doc__download-split__menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.4rem);
  top: auto;
  min-width: 24rem;
  margin: 0;
  padding: 0.4rem 0;
  list-style: none;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  box-shadow: 0 -0.2rem 1.2rem rgba(0, 0, 0, 0.1);
  z-index: 200;
}
.no-order-doc__download-split__menu li {
  margin: 0;
}
.no-order-doc__download-split__menu button {
  display: block;
  width: 100%;
  padding: 0.75rem 1.2rem;
  border: none;
  background: transparent;
  color: #374151;
  font-size: 1.3rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}
.no-order-doc__download-split__menu button:hover:not(:disabled) {
  background: #f3f4f6;
}
.no-order-doc__download-split__menu button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.no-order-doc-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 0.8rem;
  padding-bottom: 0.8rem;
  border-bottom: 2px solid #e5e7eb;
}
.no-order-doc--edit .no-order-doc-header {
  margin-bottom: 1.2rem;
  padding-bottom: 1.2rem;
}
.no-order-doc-header__logo {
  flex-shrink: 0;
}
.no-order-doc-header__logo-img {
  max-width: 9rem;
}
.no-order-doc--edit .no-order-doc-header__logo-img {
  max-width: 10rem;
}
.no-order-doc-header__right {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.6rem;
}
.no-order-doc--edit .no-order-doc-header__right {
  gap: 0.8rem;
}
.no-order-doc-header__title {
  font-size: 1.8rem;
  font-weight: 700;
  color: #0066b2;
  margin: 0;
  letter-spacing: 0.02em;
  line-height: 1;
}
.no-order-doc--edit .no-order-doc-header__title {
  font-size: 2rem;
}
.no-order-doc-header__title-text {
  font-size: 1.8rem;
  font-weight: 700;
  color: #0066b2;
  margin: 0;
}
.no-order-doc--edit .no-order-doc-header__title-text {
  font-size: 2rem;
}
.no-order-doc-header__refs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.8rem;
  width: 100%;
  max-width: 500px;
}
.no-order-doc--edit .no-order-doc-header__refs {
  gap: 1rem;
}
.no-order-doc-header__refs.--show .no-order-doc-header__ref-value {
  border: none;
  padding: 0;
}
.no-order-doc-header__ref-item {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.no-order-doc--edit .no-order-doc-header__ref-item {
  gap: 0.3rem;
}
.no-order-doc-header__ref-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: #6b7280;
}
.no-order-doc--edit .no-order-doc-header__ref-label {
  font-size: 1.05rem;
}
.no-order-doc-header__ref-input, .no-order-doc-header__ref-value {
  width: 100%;
  padding: 0.4rem 0.6rem;
  border: 1px solid #d1d5db;
  border-radius: 0.3rem;
  font-size: 1.05rem;
  background: #ffffff;
  color: #000000;
  transition: all 0.2s ease;
}
.no-order-doc--edit .no-order-doc-header__ref-input, .no-order-doc--edit .no-order-doc-header__ref-value {
  padding: 0.5rem 0.7rem;
  font-size: 1.15rem;
}
.no-order-doc-header__ref-input:focus, .no-order-doc-header__ref-value:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.no-order-doc-header--pr {
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 1.2rem;
  background: var(--clr-base-primary-100);
}
.no-order-doc--edit .no-order-doc-header--pr {
  padding: 0.8rem 1.4rem;
}
.no-order-doc-header--pr .no-order-doc-header__logo {
  flex: 0 0 auto;
}
.no-order-doc-header--pr .no-order-doc-header__title {
  flex: 1;
  text-align: center;
}
.no-order-doc-header--pr .no-order-doc-header__title-text {
  text-align: center;
}
.no-order-doc-header__ref {
  display: flex;
  gap: 0.5rem;
  flex: 0 0 auto;
}
.no-order-doc-header__ref-box {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  align-items: flex-end;
}
.no-order-doc--edit .no-order-doc-header__ref-box {
  gap: 0.3rem;
}

.no-order-doc-buyer {
  margin-top: 0.5rem;
}
.no-order-doc--edit .no-order-doc-buyer {
  margin-top: 0.7rem;
}
.no-order-doc-buyer__info {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 30rem;
}
.no-order-doc--edit .no-order-doc-buyer__info {
  gap: 0.6rem;
}
.no-order-doc-buyer__title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #000000;
  margin: 0;
}
.no-order-doc--edit .no-order-doc-buyer__title {
  font-size: 1.2rem;
}
.no-order-doc-buyer__fields {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.no-order-doc--edit .no-order-doc-buyer__fields {
  gap: 0.5rem;
}
.no-order-doc-buyer__field {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.no-order-doc-buyer__field label {
  font-size: 1rem;
  font-weight: 600;
  color: #000000;
  min-width: 80px;
}
.no-order-doc--edit .no-order-doc-buyer__field label {
  font-size: 1.1rem;
}
.no-order-doc-buyer__field span {
  flex: 1;
  font-size: 1rem;
  color: #000000;
  padding: 0.3rem 0;
}
.no-order-doc--edit .no-order-doc-buyer__field span {
  font-size: 1.1rem;
}
.no-order-doc-buyer__input {
  flex: 1;
  padding: 0.3rem 0.5rem;
  border: 1px solid #d1d5db;
  border-radius: 0.4rem;
  font-size: 0.95rem;
  background: #ffffff;
  color: #000000;
  transition: all 0.2s ease;
}
.no-order-doc--edit .no-order-doc-buyer__input {
  padding: 0.4rem 0.6rem;
  font-size: 1.05rem;
}
.no-order-doc-buyer__input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.no-order-doc-validity {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.8rem;
  padding: 0.5rem 0.6rem;
  background: #fef2f2;
  border-left: 3px solid #ef4444;
  border-radius: 0.3rem;
}
.no-order-doc--edit .no-order-doc-validity {
  margin-bottom: 1rem;
  padding: 0.6rem 0.8rem;
}
.no-order-doc-validity__star {
  color: #ef4444;
  font-size: 1.1rem;
  font-weight: 700;
}
.no-order-doc--edit .no-order-doc-validity__star {
  font-size: 1.2rem;
}
.no-order-doc-validity__text {
  font-size: 0.95rem;
  color: #000000;
  font-weight: 500;
}
.no-order-doc--edit .no-order-doc-validity__text {
  font-size: 1.05rem;
}

.no-order-doc-addresses {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 0.8rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid #e5e7eb;
}
.no-order-doc--edit .no-order-doc-addresses {
  gap: 2rem;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
}
.no-order-doc-addresses__bill, .no-order-doc-addresses__ship {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.no-order-doc--edit .no-order-doc-addresses__bill, .no-order-doc--edit .no-order-doc-addresses__ship {
  gap: 0.6rem;
}
.no-order-doc-addresses__title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #000000;
  margin: 0;
}
.no-order-doc--edit .no-order-doc-addresses__title {
  font-size: 1.2rem;
}
.no-order-doc-addresses__fields {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.no-order-doc--edit .no-order-doc-addresses__fields {
  gap: 0.5rem;
}
.no-order-doc-addresses__field {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.no-order-doc--edit .no-order-doc-addresses__field {
  gap: 0.8rem;
}
.no-order-doc-addresses__field label {
  font-size: 0.95rem;
  font-weight: 600;
  color: #000000;
  min-width: 60px;
}
.no-order-doc--edit .no-order-doc-addresses__field label {
  font-size: 1.05rem;
  min-width: 80px;
}
.no-order-doc-addresses__field span {
  flex: 1;
  font-size: 0.95rem;
  color: #000000;
  padding: 0.2rem 0;
}
.no-order-doc--edit .no-order-doc-addresses__field span {
  font-size: 1.05rem;
}
.no-order-doc-addresses__input {
  flex: 1;
  padding: 0.3rem 0.5rem;
  border: 1px solid #d1d5db;
  border-radius: 0.3rem;
  font-size: 0.95rem;
  background: #ffffff;
  color: #000000;
  transition: all 0.2s ease;
}
.no-order-doc--edit .no-order-doc-addresses__input {
  padding: 0.4rem 0.6rem;
  font-size: 1.05rem;
}
.no-order-doc-addresses__input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.no-order-doc-sales {
  margin-bottom: 0.8rem;
}
.no-order-doc--edit .no-order-doc-sales {
  margin-bottom: 1rem;
}
.no-order-doc-sales__table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #e5e7eb;
  background: #ffffff;
}
.no-order-doc-sales__table thead {
  background: #f9fafb;
}
.no-order-doc-sales__table thead th {
  padding: 0.4rem 0.3rem;
  text-align: center;
  font-weight: 600;
  font-size: 0.9rem;
  color: #000000;
  border: 1px solid #e5e7eb;
}
.no-order-doc--edit .no-order-doc-sales__table thead th {
  padding: 0.5rem 0.4rem;
  font-size: 1rem;
}
.no-order-doc-sales__table tbody td {
  padding: 0.4rem 0.3rem;
  border: 1px solid #e5e7eb;
  background: #ffffff;
}
.no-order-doc--edit .no-order-doc-sales__table tbody td {
  padding: 0.5rem 0.4rem;
}
.no-order-doc-sales__input {
  width: 100%;
  padding: 0.3rem 0.4rem;
  border: 1px solid #d1d5db;
  border-radius: 0.3rem;
  font-size: 0.9rem;
  background: #ffffff;
  color: #000000;
  transition: all 0.2s ease;
  text-align: center;
}
.no-order-doc--edit .no-order-doc-sales__input {
  padding: 0.4rem 0.5rem;
  font-size: 1rem;
}
.no-order-doc-sales__input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.no-order-doc-sales__input[type=email] {
  margin-top: 0.3rem;
}
.no-order-doc-sales__input.--show {
  border: none;
}

.no-order-doc-terms {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.5rem;
  margin-bottom: 0.8rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid #e5e7eb;
}
.no-order-doc--edit .no-order-doc-terms {
  gap: 0.6rem;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
}
.no-order-doc-terms__item {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.no-order-doc--edit .no-order-doc-terms__item {
  gap: 0.4rem;
}
.no-order-doc-terms__item label {
  font-size: 0.9rem;
  font-weight: 600;
  color: #000000;
}
.no-order-doc--edit .no-order-doc-terms__item label {
  font-size: 0.95rem;
}
.no-order-doc-terms__value {
  font-size: 1.175rem;
}
.no-order-doc-terms__input {
  width: 100%;
  padding: 0.3rem 0.5rem;
  border: 1px solid #d1d5db;
  border-radius: 0.3rem;
  font-size: 0.95rem;
  background: #ffffff;
  color: #000000;
  transition: all 0.2s ease;
}
.no-order-doc--edit .no-order-doc-terms__input {
  padding: 0.4rem 0.6rem;
  font-size: 1.05rem;
}
.no-order-doc-terms__input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.no-order-doc-terms__input.--show {
  border: none;
}

.no-order-doc-customer {
  margin-bottom: 1rem;
}
.no-order-doc--edit .no-order-doc-customer {
  margin-bottom: 1.2rem;
}
.no-order-doc-customer__table {
  width: 100%;
  border-collapse: collapse;
  border: 2px solid #000000;
  background: #ffffff;
}
.no-order-doc-customer__table thead {
  background: #f9fafb;
}
.no-order-doc-customer__table thead th {
  padding: 0.6rem 0.8rem;
  text-align: center;
  font-weight: 700;
  font-size: 1.05rem;
  color: #000000;
  border: 1px solid #000000;
}
.no-order-doc--edit .no-order-doc-customer__table thead th {
  padding: 0.7rem 1rem;
  font-size: 1.15rem;
}
.no-order-doc-customer__table tbody td {
  padding: 0.5rem 0.8rem;
  border: 1px solid #000000;
  background: #ffffff;
  text-align: center;
}
.no-order-doc--edit .no-order-doc-customer__table tbody td {
  padding: 0.6rem 1rem;
}
.no-order-doc-customer__input {
  width: 100%;
  padding: 0.4rem 0.5rem;
  border: 1px solid #d1d5db;
  border-radius: 0.3rem;
  font-size: 1.05rem;
  background: #ffffff;
  color: #000000;
  transition: all 0.2s ease;
  text-align: center;
}
.no-order-doc--edit .no-order-doc-customer__input {
  padding: 0.5rem 0.6rem;
  font-size: 1.15rem;
}
.no-order-doc-customer__input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.no-order-doc-customer__input.--show {
  border: none;
}

.no-order-doc-items {
  margin-bottom: 0.8rem;
}
.no-order-doc--edit .no-order-doc-items {
  margin-bottom: 1rem;
}
.no-order-doc-items__table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #e5e7eb;
  background: #ffffff;
}
.no-order-doc-items__table thead {
  background: #f9fafb;
}
.no-order-doc-items__table thead th {
  padding: 0.4rem 0.3rem;
  text-align: center;
  font-weight: 600;
  font-size: 0.9rem;
  color: #000000;
  border: 1px solid #e5e7eb;
}
.no-order-doc--edit .no-order-doc-items__table thead th {
  padding: 0.5rem 0.4rem;
  font-size: 1rem;
}
.no-order-doc-items__table tbody td {
  padding: 0.35rem 0.3rem;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  font-size: 0.9rem;
}
.no-order-doc--edit .no-order-doc-items__table tbody td {
  padding: 0.4rem 0.35rem;
  font-size: 1rem;
}
.no-order-doc-items__table tbody td input {
  font-size: 0.9rem;
}
.no-order-doc--edit .no-order-doc-items__table tbody td input {
  font-size: 1rem;
}
.no-order-doc-items__table tbody td span {
  font-size: 0.9rem;
}
.no-order-doc--edit .no-order-doc-items__table tbody td span {
  font-size: 1rem;
}
.no-order-doc-items__table tfoot {
  background: #f9fafb;
}
.no-order-doc-items__table tfoot td {
  padding: 0.4rem 0.3rem;
  border: 1px solid #e5e7eb;
  text-align: right;
}
.no-order-doc--edit .no-order-doc-items__table tfoot td {
  padding: 0.5rem 0.4rem;
}
.no-order-doc-header--pr ~ * .no-order-doc-items__table {
  border: 2px solid #000000;
}
.no-order-doc-header--pr ~ * .no-order-doc-items__table thead th {
  border: 1px solid #000000;
  font-weight: 700;
  font-size: 0.95rem;
}
.no-order-doc--edit .no-order-doc-header--pr ~ * .no-order-doc-items__table thead th {
  font-size: 1.05rem;
}
.no-order-doc-header--pr ~ * .no-order-doc-items__table tbody td {
  border: 1px solid #000000;
  font-size: 0.95rem;
}
.no-order-doc--edit .no-order-doc-header--pr ~ * .no-order-doc-items__table tbody td {
  font-size: 1.05rem;
}
.no-order-doc-header--pr ~ * .no-order-doc-items__table tbody td input {
  font-size: 0.95rem;
}
.no-order-doc--edit .no-order-doc-header--pr ~ * .no-order-doc-items__table tbody td input {
  font-size: 1.05rem;
}
.no-order-doc-header--pr ~ * .no-order-doc-items__table tbody td span {
  font-size: 0.95rem;
}
.no-order-doc--edit .no-order-doc-header--pr ~ * .no-order-doc-items__table tbody td span {
  font-size: 1.05rem;
}
.no-order-doc-header--pr ~ * .no-order-doc-items__table tfoot td {
  border: 1px solid #000000;
}
.no-order-doc-items__row--empty td {
  background: #f9fafb;
}
.no-order-doc-items__row--box {
  background: #f9fafb;
}
.no-order-doc-items__row--grand-total td {
  font-weight: 600;
  background: #ffffff;
  padding: 0.5rem 0.3rem;
}
.no-order-doc--edit .no-order-doc-items__row--grand-total td {
  padding: 0.6rem 0.4rem;
}
.no-order-doc-items__row--grand-total td input {
  font-weight: 600;
  background: transparent;
  border: none;
  text-align: center;
  cursor: default;
}
.no-order-doc-items__row--grand-total td input:focus {
  outline: none;
  box-shadow: none;
}
.no-order-doc-items__row--grand-total td span {
  font-weight: 600;
  font-size: 1.05rem;
}
.no-order-doc-items__measurement-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
}
.no-order-doc-items__measurement-wrapper .no-order-doc-items__measurement-value {
  font-size: 0.9rem;
  text-align: center;
}
.no-order-doc--edit .no-order-doc-items__measurement-wrapper .no-order-doc-items__measurement-value {
  font-size: 1rem;
}
.no-order-doc-items__cbm-display {
  margin-top: 0.3rem;
  padding: 0.2rem 0.4rem;
  background: #f3f4f6;
  border-radius: 0.3rem;
  display: inline-block;
}
.no-order-doc-items__cbm-display .no-order-doc-items__cbm-value {
  font-size: 0.85rem;
  color: #4b5563;
  text-align: center;
  font-weight: 600;
}
.no-order-doc--edit .no-order-doc-items__cbm-display .no-order-doc-items__cbm-value {
  font-size: 0.9rem;
}
.no-order-doc-items__cbm-wrapper {
  margin-top: 0.2rem;
}
.no-order-doc-items__cbm-wrapper .no-order-doc-items__cbm-value {
  font-size: 0.85rem;
  color: #6b7280;
  text-align: center;
  font-weight: 500;
}
.no-order-doc--edit .no-order-doc-items__cbm-wrapper .no-order-doc-items__cbm-value {
  font-size: 0.95rem;
}
.no-order-doc-items__weight-value {
  font-size: 0.9rem;
  text-align: center;
}
.no-order-doc--edit .no-order-doc-items__weight-value {
  font-size: 1rem;
}
.no-order-doc-items__input {
  width: 100%;
  padding: 0.3rem 0.4rem;
  border: 1px solid #d1d5db;
  border-radius: 0.3rem;
  font-size: 0.9rem;
  background: #ffffff;
  color: #000000;
  transition: all 0.2s ease;
  text-align: center;
}
.no-order-doc--edit .no-order-doc-items__input {
  padding: 0.35rem 0.45rem;
  font-size: 1rem;
}
.no-order-doc-items__input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.no-order-doc-items__input:disabled {
  background: #f9fafb;
  color: #9ca3af;
  cursor: not-allowed;
}
.no-order-doc-items__input--qty {
  text-align: center;
  max-width: 80px;
}
.no-order-doc-items__input--select {
  padding: 0.25rem 0.4rem;
}
.no-order-doc--edit .no-order-doc-items__input--select {
  padding: 0.3rem 0.45rem;
}
.no-order-doc-items__input.--show {
  border: none;
}
.no-order-doc-items__unit-price-input, .no-order-doc-items__qty-input {
  width: calc(100% - 1.5rem);
  padding: 0.3rem 0.4rem;
  border: 1px solid #d1d5db;
  border-radius: 0.3rem;
  font-size: 0.9rem;
  background: #ffffff;
  color: #000000;
  transition: all 0.2s ease;
  text-align: right;
}
.no-order-doc--edit .no-order-doc-items__unit-price-input, .no-order-doc--edit .no-order-doc-items__qty-input {
  padding: 0.35rem 0.45rem;
  font-size: 1rem;
}
.no-order-doc-items__unit-price-input:focus, .no-order-doc-items__qty-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.no-order-doc-items__total-cell {
  text-align: right;
  font-weight: 600;
}
.no-order-doc-items__total-value {
  display: inline-block;
}
.no-order-doc-items__empty {
  display: inline-block;
  padding: 0.3rem 0.4rem;
  color: #9ca3af;
  font-size: 0.9rem;
  text-align: center;
}
.no-order-doc--edit .no-order-doc-items__empty {
  font-size: 1rem;
}
.no-order-doc-items__summary-label {
  font-weight: 600;
  font-size: 0.95rem;
  text-align: right;
  padding-right: 0.5rem;
}
.no-order-doc--edit .no-order-doc-items__summary-label {
  font-size: 1.05rem;
}
.no-order-doc-items__summary-label--total {
  font-weight: 700;
  font-size: 1.05rem;
}
.no-order-doc--edit .no-order-doc-items__summary-label--total {
  font-size: 1.15rem;
}
.no-order-doc-items__summary-value {
  font-weight: 600;
  font-size: 0.95rem;
  text-align: right;
}
.no-order-doc--edit .no-order-doc-items__summary-value {
  font-size: 1.05rem;
}
.no-order-doc-items__summary-value--total {
  font-weight: 700;
  font-size: 1.05rem;
}
.no-order-doc--edit .no-order-doc-items__summary-value--total {
  font-size: 1.15rem;
}
.no-order-doc-items__freight-input {
  width: calc(100% - 1.5rem);
  padding: 0.3rem 0.4rem;
  border: 1px solid #d1d5db;
  border-radius: 0.3rem;
  font-size: 0.95rem;
  background: #ffffff;
  color: #000000;
  transition: all 0.2s ease;
  text-align: right;
}
.no-order-doc--edit .no-order-doc-items__freight-input {
  padding: 0.35rem 0.45rem;
  font-size: 1.05rem;
}
.no-order-doc-items__freight-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.no-order-doc-items__total-label {
  font-weight: 700;
  font-size: 1.05rem;
  text-align: left;
  padding-left: 0.5rem;
}
.no-order-doc--edit .no-order-doc-items__total-label {
  font-size: 1.15rem;
}
.no-order-doc-items__total-value {
  position: relative;
  text-align: center;
}
.no-order-doc-items__total-unit {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.95rem;
  color: #6b7280;
}
.no-order-doc--edit .no-order-doc-items__total-unit {
  font-size: 1.05rem;
}

.no-order-doc__section-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: #000000;
  margin: 0.5rem 0 0.4rem 0;
  padding-bottom: 0.3rem;
  border-bottom: 2px solid #e5e7eb;
  page-break-after: avoid;
}
.no-order-doc--edit .no-order-doc__section-title {
  font-size: 1rem;
  margin: 0.6rem 0 0.5rem 0;
  padding-bottom: 0.5rem;
}
.no-order-doc__item-empty {
  display: inline-block;
  padding: 0.25rem 0.4rem;
  color: #9ca3af;
  font-size: 0.9rem;
  text-align: center;
}
.no-order-doc--edit .no-order-doc__item-empty {
  font-size: 1rem;
}
.no-order-doc__empty-message {
  text-align: center;
  padding: 2rem;
  color: #9ca3af;
  font-style: italic;
  font-size: 1.2rem;
}
.no-order-doc--edit .no-order-doc__empty-message {
  font-size: 1.3rem;
}

.no-order-doc-hs__field {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.no-order-doc--edit .no-order-doc-hs__field {
  gap: 0.8rem;
}
.no-order-doc-hs__label {
  font-size: 1rem;
  font-weight: 600;
  color: #000000;
  min-width: 100px;
}
.no-order-doc--edit .no-order-doc-hs__label {
  font-size: 1.1rem;
}
.no-order-doc-hs__input {
  flex: 1;
  max-width: 300px;
  padding: 0.3rem 0.5rem;
  border: 1px solid #d1d5db;
  border-radius: 0.3rem;
  font-size: 1rem;
  background: #ffffff;
  color: #000000;
  transition: all 0.2s ease;
}
.no-order-doc--edit .no-order-doc-hs__input {
  padding: 0.4rem 0.6rem;
  font-size: 1.1rem;
}
.no-order-doc-hs__input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.no-order-doc-hs__input.--show {
  border: none;
}
.no-order-doc-hs__value {
  flex: 1;
  max-width: 300px;
  font-size: 1rem;
  color: #000000;
  padding: 0.3rem 0;
}
.no-order-doc--edit .no-order-doc-hs__value {
  font-size: 1.1rem;
}

.no-order-doc-bank {
  margin-top: 0.8rem;
  padding-top: 0.8rem;
  border-top: 1px solid #e5e7eb;
}
.no-order-doc--edit .no-order-doc-bank {
  margin-top: 1rem;
  padding-top: 1rem;
}
.no-order-doc-bank__title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #000000;
  margin: 0 0 0.6rem 0;
}
.no-order-doc--edit .no-order-doc-bank__title {
  font-size: 1.2rem;
  margin-bottom: 0.8rem;
}
.no-order-doc-bank__fields {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.no-order-doc--edit .no-order-doc-bank__fields {
  gap: 0.5rem;
}
.no-order-doc-bank__field {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.no-order-doc--edit .no-order-doc-bank__field {
  gap: 0.8rem;
}
.no-order-doc-bank__field label {
  font-size: 0.95rem;
  font-weight: 600;
  color: #000000;
  min-width: 110px;
}
.no-order-doc--edit .no-order-doc-bank__field label {
  font-size: 1.05rem;
  min-width: 120px;
}
.no-order-doc-bank__field span {
  flex: 1;
  font-size: 0.95rem;
  color: #000000;
  padding: 0.3rem 0;
}
.no-order-doc--edit .no-order-doc-bank__field span {
  font-size: 1.05rem;
}
.no-order-doc-bank__input {
  flex: 1;
  padding: 0.3rem 0.5rem;
  border: 1px solid #d1d5db;
  border-radius: 0.3rem;
  font-size: 0.95rem;
  background: #ffffff;
  color: #000000;
  transition: all 0.2s ease;
}
.no-order-doc--edit .no-order-doc-bank__input {
  padding: 0.4rem 0.6rem;
  font-size: 1.05rem;
}
.no-order-doc-bank__input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.no-order-doc-bank__input.--show {
  border: none;
}

.no-order-doc-info {
  display: grid;
  grid-template-columns: 6fr 4fr;
  gap: 1.2rem;
  margin-top: 0.8rem;
  padding-top: 0.8rem;
  border-top: 1px solid #e5e7eb;
}
.no-order-doc--edit .no-order-doc-info {
  gap: 1.5rem;
  margin-top: 1rem;
  padding-top: 1rem;
}

.no-order-doc-footer {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  margin-top: 0.8rem;
  padding-top: 0.8rem;
}
.no-order-doc--edit .no-order-doc-footer {
  gap: 1.5rem;
  margin-top: 1rem;
  padding-top: 1rem;
}
.no-order-doc-footer__left, .no-order-doc-footer__right {
  display: flex;
  flex-direction: column;
}
.no-order-doc-footer__left {
  gap: 0.6rem;
  flex: 1;
}
.no-order-doc--edit .no-order-doc-footer__left {
  gap: 0.8rem;
}
.no-order-doc-footer__field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.no-order-doc--edit .no-order-doc-footer__field {
  gap: 0.4rem;
}
.no-order-doc-footer__field label {
  font-size: 0.95rem;
  font-weight: 600;
  color: #000000;
}
.no-order-doc--edit .no-order-doc-footer__field label {
  font-size: 1.05rem;
}
.no-order-doc-footer__field span {
  font-size: 0.9rem;
  color: #000000;
  padding: 0.2rem 0;
}
.no-order-doc--edit .no-order-doc-footer__field span {
  font-size: 1rem;
}
.no-order-doc-footer__textarea {
  width: 100%;
  padding: 0.3rem 0.5rem;
  border: 1px solid #d1d5db;
  border-radius: 0.3rem;
  font-size: 0.95rem;
  font-family: inherit;
  resize: vertical;
  background: #ffffff;
  color: #000000;
  transition: all 0.2s ease;
  min-height: 2rem;
}
.no-order-doc--edit .no-order-doc-footer__textarea {
  padding: 0.4rem 0.6rem;
  font-size: 1.05rem;
}
.no-order-doc-footer__textarea:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.no-order-doc-footer__input {
  width: 100%;
  padding: 0.3rem 0.5rem;
  border: 1px solid #d1d5db;
  border-radius: 0.3rem;
  font-size: 0.95rem;
  background: #ffffff;
  color: #000000;
  transition: all 0.2s ease;
}
.no-order-doc--edit .no-order-doc-footer__input {
  padding: 0.4rem 0.6rem;
  font-size: 1.05rem;
}
.no-order-doc-footer__input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.no-order-doc-footer__company {
  font-size: 1.175rem;
  color: #000000;
  line-height: 1.5;
}
.no-order-doc--edit .no-order-doc-footer__company {
  font-size: 1rem;
}
.no-order-doc-footer__company p {
  margin: 0.2rem 0;
}
.no-order-doc-footer__company strong {
  font-weight: 700;
}
.no-order-doc-footer__supplied {
  font-size: 1rem;
  color: #000000;
  margin: 0;
}
.no-order-doc--edit .no-order-doc-footer__supplied {
  font-size: 1.1rem;
}
.no-order-doc-footer__company-name {
  font-size: 1.4rem;
  font-weight: 700;
  color: #000000;
  margin: 0.3rem 0;
}
.no-order-doc--edit .no-order-doc-footer__company-name {
  font-size: 1.5rem;
}
.no-order-doc-footer__signature {
  width: 100%;
  max-width: 25rem;
  margin: 0.5rem 0;
  text-align: center;
}
.no-order-doc--edit .no-order-doc-footer__signature {
  margin: 0.6rem 0;
}
.no-order-doc-footer__signature-img {
  width: 100%;
  height: auto;
}
.no-order-doc-footer__president {
  font-size: 1rem;
  color: #000000;
  margin: 0;
  text-align: center;
}
.no-order-doc--edit .no-order-doc-footer__president {
  font-size: 1.1rem;
}
.no-order-doc-footer__certification-text {
  font-size: 0.85rem;
  color: #000000;
  line-height: 1.5;
  margin-top: 0.5rem;
  padding: 0.5rem 0.6rem;
  border: 0.1rem solid #e5e7eb;
  border-radius: 0.3rem;
}
.no-order-doc--edit .no-order-doc-footer__certification-text {
  font-size: 0.95rem;
  padding: 0.6rem 0.7rem;
}
.no-order-doc-footer__note {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.no-order-doc--edit .no-order-doc-footer__note {
  gap: 0.4rem;
}
.no-order-doc-footer__note-label {
  font-size: 1rem;
  font-weight: 600;
  color: #000000;
}
.no-order-doc--edit .no-order-doc-footer__note-label {
  font-size: 1.1rem;
}
.no-order-doc-footer__note-text {
  font-size: 0.9rem;
  color: #000000;
  line-height: 1.4;
}
.no-order-doc--edit .no-order-doc-footer__note-text {
  font-size: 1rem;
}
.no-order-doc-footer__note-textarea {
  width: 100%;
  padding: 0.3rem 0.5rem;
  border: 1px solid #d1d5db;
  border-radius: 0.3rem;
  font-size: 0.95rem;
  font-family: inherit;
  resize: vertical;
  background: #ffffff;
  color: #000000;
  transition: all 0.2s ease;
}
.no-order-doc--edit .no-order-doc-footer__note-textarea {
  padding: 0.4rem 0.6rem;
  font-size: 1.05rem;
}
.no-order-doc-footer__note-textarea:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.no-order-doc-footer__charges {
  margin-top: 0.5rem;
}
.no-order-doc--edit .no-order-doc-footer__charges {
  margin-top: 0.6rem;
}
.no-order-doc-footer__charges-text {
  font-size: 1rem;
  font-weight: 600;
  color: #000000;
}
.no-order-doc--edit .no-order-doc-footer__charges-text {
  font-size: 1.1rem;
}

.no-order-doc__footer-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 1.5rem;
  margin-bottom: 0.8rem;
}
.no-order-doc--edit .no-order-doc__footer-section {
  gap: 2rem;
  margin-bottom: 1rem;
}
.no-order-doc__boxes-section {
  margin-bottom: 0;
}
.no-order-doc__boxes-table-wrapper {
  overflow-x: auto;
}
.no-order-doc__notes-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.no-order-doc--edit .no-order-doc__notes-section {
  gap: 0.6rem;
}
.no-order-doc__notes-label {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.3rem;
  color: #000000;
}
.no-order-doc--edit .no-order-doc__notes-label {
  font-size: 1.2rem;
  margin-bottom: 0.4rem;
}
.no-order-doc__notes-textarea {
  width: 100%;
  padding: 0.6rem 0.8rem;
  border: 2px solid #e5e7eb;
  border-radius: 0.4rem;
  font-size: 1rem;
  font-family: inherit;
  resize: vertical;
  min-height: 120px;
  background: #ffffff;
  color: #000000;
  transition: all 0.2s ease;
  line-height: 1.5;
}
.no-order-doc--edit .no-order-doc__notes-textarea {
  padding: 0.7rem 0.9rem;
  font-size: 1.1rem;
  min-height: 140px;
}
.no-order-doc__notes-textarea:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.no-order-doc__notes-text {
  width: 100%;
  padding: 0.6rem 0.8rem;
  border: 2px solid #e5e7eb;
  border-radius: 0.4rem;
  font-size: 1rem;
  font-family: inherit;
  min-height: 120px;
  background: #f9fafb;
  color: #000000;
  line-height: 1.5;
  white-space: pre-wrap;
}
.no-order-doc--edit .no-order-doc__notes-text {
  padding: 0.7rem 0.9rem;
  font-size: 1.1rem;
  min-height: 140px;
}
.no-order-doc__box-form {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 2px solid #e5e7eb;
}
.no-order-doc--edit .no-order-doc__box-form {
  margin-top: 2rem;
  padding-top: 2rem;
}
.no-order-doc__box-form-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.no-order-doc--edit .no-order-doc__box-form-container {
  gap: 1.2rem;
}
.no-order-doc__box-form-fields {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.8rem;
  align-items: flex-end;
}
.no-order-doc--edit .no-order-doc__box-form-fields {
  gap: 1rem;
}
.no-order-doc__box-form-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.no-order-doc--edit .no-order-doc__box-form-field {
  gap: 0.5rem;
}
.no-order-doc__box-form-label {
  font-size: 1rem;
  font-weight: 600;
  color: #000000;
}
.no-order-doc--edit .no-order-doc__box-form-label {
  font-size: 1.1rem;
}
.no-order-doc__box-form-input {
  width: 100%;
  padding: 0.4rem 0.6rem;
  border: 1px solid #d1d5db;
  border-radius: 0.3rem;
  font-size: 1rem;
  background: #ffffff;
  color: #000000;
  transition: all 0.2s ease;
}
.no-order-doc--edit .no-order-doc__box-form-input {
  padding: 0.5rem 0.7rem;
  font-size: 1.1rem;
}
.no-order-doc__box-form-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.no-order-doc__box-form-input::placeholder {
  color: #9ca3af;
}
.no-order-doc__box-size-inputs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}
.no-order-doc__box-size-inputs .no-order-doc__box-size-input {
  flex: 1;
  min-width: 0;
}
.no-order-doc__box-size-inputs .no-order-doc__box-size-separator {
  flex-shrink: 0;
  font-size: 1.2rem;
  color: #6b7280;
  font-weight: 600;
  padding: 0 0.3rem;
}
.no-order-doc__box-size-inputs-inline {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  width: 100%;
}
.no-order-doc__box-size-inputs-inline .box-size-input {
  flex: 1;
  min-width: 0;
  text-align: center;
}
.no-order-doc__box-size-inputs-inline .no-order-doc__box-size-separator-inline {
  flex-shrink: 0;
  font-size: 1rem;
  color: #6b7280;
  font-weight: 600;
  padding: 0 0.2rem;
}
.no-order-doc__box-list-section {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 2px solid #e5e7eb;
}
.no-order-doc--edit .no-order-doc__box-list-section {
  margin-top: 2rem;
  padding-top: 2rem;
}
.no-order-doc__box-list-section-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #000000;
  margin: 0 0 0.8rem 0;
}
.no-order-doc--edit .no-order-doc__box-list-section-title {
  font-size: 1.3rem;
  margin-bottom: 1rem;
}
.no-order-doc__box-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  justify-content: center;
}
.no-order-doc--edit .no-order-doc__box-actions {
  gap: 0.8rem;
}
.no-order-doc__boxes-section .no-order-doc__items-table {
  border: 2px solid #000000;
}
.no-order-doc__boxes-section .no-order-doc__items-table thead th {
  border: 1px solid #000000;
  font-weight: 700;
  font-size: 1rem;
}
.no-order-doc--edit .no-order-doc__boxes-section .no-order-doc__items-table thead th {
  font-size: 1.1rem;
}
.no-order-doc__boxes-section .no-order-doc__items-table tbody td {
  border: 1px solid #000000;
  font-size: 1rem;
}
.no-order-doc--edit .no-order-doc__boxes-section .no-order-doc__items-table tbody td {
  font-size: 1.1rem;
}

.no-order-doc-pr-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.2rem;
  padding: 0.6rem 1.2rem;
  background: var(--clr-base-primary-100);
  position: relative;
}
.no-order-doc--edit .no-order-doc-pr-header {
  margin-bottom: 1.5rem;
  padding: 0.8rem 1.4rem;
}
.no-order-doc-pr-header__logo {
  flex-shrink: 0;
}
.no-order-doc-pr-header__logo-img {
  max-width: 12rem;
}
.no-order-doc-pr-header__right {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1rem;
}
.no-order-doc--edit .no-order-doc-pr-header__right {
  gap: 1.2rem;
}
.no-order-doc-pr-header__title {
  font-size: 2rem;
  font-weight: 700;
  color: #0066b2;
  margin: 0;
  letter-spacing: 0.02em;
  line-height: 1;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.no-order-doc--edit .no-order-doc-pr-header__title {
  font-size: 2.2rem;
}
.no-order-doc-pr-header__refs {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  width: 100%;
  max-width: 500px;
}
.no-order-doc-pr-header__ref-item {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.no-order-doc--edit .no-order-doc-pr-header__ref-item {
  gap: 0.4rem;
}
.no-order-doc-pr-header__ref-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: #000000;
}
.no-order-doc--edit .no-order-doc-pr-header__ref-label {
  font-size: 1.05rem;
}
.no-order-doc-pr-header__ref-input, .no-order-doc-pr-header__ref-value {
  width: 100%;
  padding: 0.4rem 0.6rem;
  border: 1px solid #d1d5db;
  border-radius: 0.3rem;
  font-size: 1.05rem;
  background: #ffffff;
  color: #000000;
  transition: all 0.2s ease;
}
.no-order-doc--edit .no-order-doc-pr-header__ref-input, .no-order-doc--edit .no-order-doc-pr-header__ref-value {
  padding: 0.5rem 0.7rem;
  font-size: 1.15rem;
}
.no-order-doc-pr-header__ref-input:focus, .no-order-doc-pr-header__ref-value:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.no-order-doc-pr-customer {
  margin-bottom: 1.2rem;
}
.no-order-doc-pr-customer__table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  table-layout: auto;
  font-size: 1.175rem;
}
.no-order-doc-pr-customer__table thead {
  background: #f9fafb;
}
.no-order-doc-pr-customer__table thead th {
  padding: 0.25rem 0.2rem;
  text-align: center;
  font-weight: 600;
  font-size: 1.175rem;
  color: #000000;
  border: 1px solid #e5e7eb;
  word-wrap: break-word;
  overflow-wrap: break-word;
  page-break-inside: avoid;
}
.no-order-doc--edit .no-order-doc-pr-customer__table thead th {
  padding: 0.3rem 0.25rem;
  font-size: 1.175rem;
}
.no-order-doc-pr-customer__table tbody td {
  padding: 0.25rem 0.2rem;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  page-break-inside: avoid;
  text-align: center;
}
.no-order-doc--edit .no-order-doc-pr-customer__table tbody td {
  padding: 0.3rem 0.25rem;
}
@media print {
  .no-order-doc-pr-customer__table tbody td {
    page-break-inside: avoid;
    break-inside: avoid;
  }
}
.no-order-doc-pr-customer__input {
  width: 100%;
  padding: 0.3rem 0.4rem;
  border: 1px solid #d1d5db;
  border-radius: 0.3rem;
  font-size: 1.175rem;
  background: #ffffff;
  color: #000000;
  transition: all 0.2s ease;
  text-align: center;
}
.no-order-doc--edit .no-order-doc-pr-customer__input {
  padding: 0.4rem 0.5rem;
  font-size: 1.175rem;
}
.no-order-doc-pr-customer__input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.no-order-doc-pr-customer__input:disabled {
  background: #f9fafb;
  color: #9ca3af;
  cursor: not-allowed;
}
.no-order-doc-pr-customer__input.--show {
  border: none;
  padding: 0.3rem 0.4rem;
  background: transparent;
  font-size: 1.175rem;
}
.no-order-doc--edit .no-order-doc-pr-customer__input.--show {
  padding: 0.4rem 0.5rem;
  font-size: 1.175rem;
}

.no-order-doc-pr-items {
  margin-bottom: 1.2rem;
}
.no-order-doc-pr-items__table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  table-layout: auto;
  font-size: 1.175rem;
}
.no-order-doc-pr-items__table thead {
  background: #f9fafb;
}
.no-order-doc-pr-items__table thead th {
  padding: 0.25rem 0.2rem;
  text-align: center;
  font-weight: 600;
  font-size: 1.175rem;
  color: #000000;
  border: 1px solid #e5e7eb;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: nowrap;
  page-break-inside: avoid;
}
.no-order-doc--edit .no-order-doc-pr-items__table thead th {
  padding: 0.3rem 0.25rem;
  font-size: 1.175rem;
}
.no-order-doc-pr-items__table tbody td {
  padding: 0.25rem 0.2rem;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  text-align: center;
  font-size: 1.175rem;
  word-wrap: break-word;
  overflow-wrap: break-word;
  page-break-inside: avoid;
  white-space: normal;
  max-width: 80px;
}
.no-order-doc--edit .no-order-doc-pr-items__table tbody td {
  padding: 0.3rem 0.25rem;
  font-size: 1.175rem;
  max-width: 90px;
}
.no-order-doc-pr-items__table tbody td.empty-cell {
  display: none;
  width: 0;
  padding: 0;
  border: none;
}
@media print {
  .no-order-doc-pr-items__table tbody td {
    page-break-inside: avoid;
    break-inside: avoid;
    overflow: visible;
  }
  .no-order-doc-pr-items__table tbody td.empty-cell {
    display: none;
  }
}
.no-order-doc-pr-items__table tbody tr {
  page-break-inside: avoid;
  break-inside: avoid;
}
@media print {
  .no-order-doc-pr-items__table tbody tr {
    page-break-inside: avoid;
    break-inside: avoid;
  }
}
.no-order-doc-pr-items__table tfoot {
  background: #f9fafb;
}
.no-order-doc-pr-items__table tfoot td {
  padding: 0.4rem 0.3rem;
  border: 1px solid #e5e7eb;
}
.no-order-doc--edit .no-order-doc-pr-items__table tfoot td {
  padding: 0.5rem 0.4rem;
}
.no-order-doc-pr-items__row--empty td {
  background: #f9fafb;
}
.no-order-doc-pr-items__input {
  width: 100%;
  padding: 0.3rem 0.4rem;
  border: 1px solid #d1d5db;
  border-radius: 0.3rem;
  font-size: 1.175rem;
  background: #ffffff;
  color: #000000;
  transition: all 0.2s ease;
  text-align: center;
}
.no-order-doc--edit .no-order-doc-pr-items__input {
  padding: 0.4rem 0.5rem;
  font-size: 1.175rem;
}
.no-order-doc-pr-items__input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.no-order-doc-pr-items__input:disabled {
  background: #f9fafb;
  color: #9ca3af;
  cursor: not-allowed;
}
.no-order-doc-pr-items__input--select {
  padding: 0.3rem 0.4rem;
}
.no-order-doc--edit .no-order-doc-pr-items__input--select {
  padding: 0.4rem 0.5rem;
}
.no-order-doc-pr-items__empty {
  display: inline-block;
  padding: 0.3rem 0.4rem;
  color: #9ca3af;
  font-size: 1.175rem;
  text-align: center;
}
.no-order-doc--edit .no-order-doc-pr-items__empty {
  padding: 0.4rem 0.5rem;
  font-size: 1.175rem;
}
.no-order-doc-pr-items__total-label {
  font-weight: 700;
  font-size: 1.4rem;
  text-align: left;
  padding-left: 1rem;
}
.no-order-doc-pr-items__total-value {
  position: relative;
  text-align: center;
}
.no-order-doc-pr-items__total-unit {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2rem;
  color: #6b7280;
}
.no-order-doc-pr-items__box-cell {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
  width: 100%;
}
.no-order-doc-pr-items__box-cell .box-detail-btn {
  width: 100%;
  justify-content: center;
}
.no-order-doc-pr-items__box-cell .box-detail-btn.disabled, .no-order-doc-pr-items__box-cell .box-detail-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.no-order-doc-pr-items__box-hint {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.45;
  color: #6b7280;
}
.no-order-doc--edit .no-order-doc-pr-items__box-hint {
  font-size: 1.2rem;
}
.no-order-doc-pr-items__box-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.85rem;
  color: #6b7280;
  width: 100%;
}
.no-order-doc--edit .no-order-doc-pr-items__box-info {
  font-size: 0.9rem;
}
.no-order-doc-pr-items__box-count {
  display: inline-block;
  padding: 0.2rem 0.4rem;
  background: #f3f4f6;
  border-radius: 0.25rem;
  font-weight: 500;
  color: #374151;
  white-space: nowrap;
  margin-right: 0.25rem;
}
.no-order-doc--edit .no-order-doc-pr-items__box-count {
  padding: 0.25rem 0.45rem;
}
.no-order-doc-pr-items__box-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(calc(33.333% - 0.3rem), 1fr));
  gap: 0.4rem;
  width: 100%;
}
.no-order-doc-pr-items__box-summary[data-box-count="1"] {
  grid-template-columns: 1fr;
}
.no-order-doc-pr-items__box-summary[data-box-count="2"] {
  grid-template-columns: repeat(2, 1fr);
}
.no-order-doc--edit .no-order-doc-pr-items__box-summary {
  gap: 0.5rem;
}
.no-order-doc-pr-items__box-no {
  font-weight: 700;
  color: #0f172a;
}
.no-order-doc-pr-items__box-qty {
  font-weight: 500;
  color: #475569;
}
.no-order-doc-pr-items__box-summary-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.25rem 0.35rem;
  padding: 0.4rem 0.6rem;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1px solid #e2e8f0;
  border-radius: 0.4rem;
  font-size: 0.85rem;
  text-align: center;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  min-width: 0;
}
.no-order-doc-pr-items__box-summary-item:hover {
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  border-color: #cbd5e1;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.no-order-doc--edit .no-order-doc-pr-items__box-summary-item {
  padding: 0.5rem 0.7rem;
  font-size: 0.9rem;
}

.no-order-doc-pr-footer {
  display: flex;
  gap: 1.5rem;
  margin-top: 1rem;
  padding-top: 1rem;
  page-break-inside: avoid;
}
.no-order-doc--edit .no-order-doc-pr-footer {
  gap: 1.8rem;
  margin-top: 1.2rem;
  padding-top: 1.2rem;
}
.no-order-doc-pr-footer__left {
  flex: 0 0 45%;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.no-order-doc--edit .no-order-doc-pr-footer__left {
  gap: 1rem;
}
.no-order-doc-pr-footer__right {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.no-order-doc-pr-footer__notes {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.no-order-doc--edit .no-order-doc-pr-footer__notes {
  gap: 1rem;
}
.no-order-doc-pr-footer__field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-top: 0;
}
.no-order-doc--edit .no-order-doc-pr-footer__field {
  gap: 0.4rem;
}
.no-order-doc-pr-footer__field label {
  font-size: 1.175rem;
  font-weight: 600;
  color: #000000;
}
.no-order-doc--edit .no-order-doc-pr-footer__field label {
  font-size: 1.175rem;
}
.no-order-doc-pr-footer__textarea {
  width: 100%;
  padding: 0.3rem 0.5rem;
  border: 1px solid #d1d5db;
  border-radius: 0.3rem;
  font-size: 1.175rem;
  font-family: inherit;
  resize: vertical;
  background: #ffffff;
  color: #000000;
  transition: all 0.2s ease;
  min-height: 60px;
  max-height: 80px;
  line-height: 1.4;
}
.no-order-doc--edit .no-order-doc-pr-footer__textarea {
  padding: 0.35rem 0.55rem;
  font-size: 1.175rem;
  min-height: 70px;
  max-height: 90px;
}
.no-order-doc-pr-footer__textarea:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.no-order-doc-pr-footer__text {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 1px solid #d1d5db;
  border-radius: 0.3rem;
  font-size: 1.175rem;
  font-family: inherit;
  min-height: 60px;
  background: #f9fafb;
  color: #000000;
  line-height: 1.6;
  white-space: normal;
  overflow-wrap: break-word;
  word-wrap: break-word;
  overflow-y: auto;
  max-height: 200px;
}
.no-order-doc--edit .no-order-doc-pr-footer__text {
  font-size: 1.175rem;
  min-height: 70px;
  max-height: 250px;
}
.no-order-doc-pr-footer__input {
  width: 100%;
  padding: 0.5rem 0.8rem;
  border: 1px solid #d1d5db;
  border-radius: 0.4rem;
  font-size: 1.3rem;
  background: #ffffff;
  color: #000000;
  transition: all 0.2s ease;
}
.no-order-doc-pr-footer__input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.no-order-doc-pr-footer__company {
  font-size: 1.2rem;
  color: #000000;
  line-height: 1.6;
}
.no-order-doc-pr-footer__company p {
  margin: 0.5rem 0;
}
.no-order-doc-pr-footer__company strong {
  font-weight: 700;
}
.no-order-doc-pr-footer__supplied {
  font-size: 1.3rem;
  color: #000000;
  margin: 0;
}
.no-order-doc-pr-footer__company-name {
  font-size: 1.8rem;
  font-weight: 700;
  color: #000000;
  margin: 0.5rem 0;
}
.no-order-doc-pr-footer__signature {
  margin: 1rem 0;
  text-align: center;
}
.no-order-doc-pr-footer__signature-img {
  max-width: 30rem;
  height: auto;
}
.no-order-doc-pr-footer__president {
  font-size: 1.3rem;
  color: #000000;
  margin: 0;
  text-align: center;
}

@media (max-width: 1024px) {
  .no-order-doc-pr-header {
    flex-direction: column;
    gap: 1.5rem;
    align-items: flex-start;
  }
  .no-order-doc-pr-header__right {
    align-items: flex-start;
    width: 100%;
  }
  .no-order-doc-pr-header__refs {
    max-width: 100%;
  }
  .no-order-doc-pr-footer {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}
@media (max-width: 768px) {
  .no-order-doc {
    padding: 1rem;
  }
  .no-order-doc__form {
    padding: 1.5rem;
  }
  .no-order-doc-header__title {
    font-size: 2.2rem;
  }
  .no-order-doc-header__refs {
    grid-template-columns: 1fr;
  }
  .no-order-doc-terms {
    grid-template-columns: 1fr;
  }
  .no-order-doc-items__table,
  .no-order-doc-sales__table,
  .no-order-doc-customer__table {
    font-size: 1.1rem;
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
  .no-order-doc-items__table thead th,
  .no-order-doc-sales__table thead th,
  .no-order-doc-customer__table thead th {
    font-size: 1.1rem;
    padding: 0.8rem 0.5rem;
  }
  .no-order-doc-items__table tbody td,
  .no-order-doc-items__table tfoot td,
  .no-order-doc-sales__table tbody td,
  .no-order-doc-sales__table tfoot td,
  .no-order-doc-customer__table tbody td,
  .no-order-doc-customer__table tfoot td {
    padding: 0.6rem 0.4rem;
  }
  .no-order-doc__box-form-fields {
    grid-template-columns: 1fr;
  }
  .no-order-doc-pr-header__title {
    font-size: 2.2rem;
  }
  .no-order-doc-pr-header__refs {
    grid-template-columns: 1fr;
  }
  .no-order-doc-pr-items__table {
    font-size: 1.1rem;
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
  .no-order-doc-pr-items__table thead th {
    font-size: 1.1rem;
    padding: 0.8rem 0.5rem;
  }
  .no-order-doc-pr-items__table tbody td,
  .no-order-doc-pr-items__table tfoot td {
    padding: 0.6rem 0.4rem;
  }
}
.no-order-doc-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 1.2rem 2rem;
  background: var(--clr-bg-primary);
  border-bottom: 1px solid var(--clr-border-primary);
  margin-bottom: 0;
  flex-wrap: wrap;
}
.no-order-doc-nav__item {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 1.4rem;
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--clr-text-secondary);
  text-decoration: none;
  border-radius: 0.6rem;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.no-order-doc-nav__item i {
  font-size: 1.4rem;
  transition: transform 0.2s ease;
}
.no-order-doc-nav__item:hover {
  background: var(--clr-bg-secondary);
  color: var(--clr-primary-600);
  text-decoration: none;
  transform: translateY(-0.1rem);
}
.no-order-doc-nav__item:hover i {
  transform: scale(1.1);
}
.no-order-doc-nav__item.active {
  background: var(--clr-primary-50);
  color: var(--clr-primary-700);
  font-weight: 600;
  box-shadow: 0 0.1rem 0.3rem rgba(37, 99, 235, 0.1);
}
.no-order-doc-nav__item.active i {
  color: var(--clr-primary-600);
}
.no-order-doc-nav__item:active {
  transform: translateY(0);
}
.no-order-doc-nav__divider {
  font-size: 1.4rem;
  color: var(--clr-border-primary);
  margin: 0 0.2rem;
}

[data-theme=dark] .no-order-doc-nav__item.active {
  background: var(--clr-primary-900);
  color: var(--clr-primary-300);
  box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.3);
}
[data-theme=dark] .no-order-doc-nav__item.active i {
  color: var(--clr-primary-400);
}

@media (max-width: 1024px) {
  .no-order-doc-nav {
    padding: 1rem 1.5rem;
    gap: 0.3rem;
  }
  .no-order-doc-nav__item {
    padding: 0.7rem 1.2rem;
    font-size: 1.2rem;
  }
  .no-order-doc-nav__item i {
    font-size: 1.3rem;
  }
  .no-order-doc-nav__divider {
    font-size: 1.3rem;
  }
}
@media (max-width: 768px) {
  .no-order-doc-nav {
    padding: 0.8rem 1rem;
    gap: 0.2rem;
  }
  .no-order-doc-nav__item {
    padding: 0.6rem 1rem;
    font-size: 1.1rem;
    gap: 0.4rem;
  }
  .no-order-doc-nav__item i {
    font-size: 1.2rem;
  }
  .no-order-doc-nav__item span {
    display: none;
  }
  .no-order-doc-nav__divider {
    font-size: 1.2rem;
    margin: 0 0.1rem;
  }
}
.order-merge-warning {
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
  padding: 1.6rem 2rem;
  margin-bottom: 2.4rem;
  background: linear-gradient(135deg, var(--clr-warning-50) 0%, var(--clr-warning-100) 100%);
  border: 0.15rem solid var(--clr-warning-300);
  border-radius: 0.8rem;
  box-shadow: 0 0.2rem 0.6rem rgba(245, 158, 11, 0.15);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}
.order-merge-warning::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: shimmer 3s infinite;
}
@keyframes shimmer {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}
.order-merge-warning:hover {
  border-color: var(--clr-warning-400);
  box-shadow: 0 0.3rem 0.8rem rgba(245, 158, 11, 0.2);
  transform: translateY(-0.1rem);
}
@media (max-width: 768px) {
  .order-merge-warning {
    padding: 1.4rem 1.6rem;
    gap: 1rem;
    margin-bottom: 2rem;
  }
}
@media (max-width: 544px) {
  .order-merge-warning {
    padding: 1.2rem 1.4rem;
    gap: 0.8rem;
    flex-direction: row;
    align-items: flex-start;
  }
}
.order-merge-warning__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  min-width: 3.2rem;
  background: linear-gradient(135deg, var(--clr-warning-500) 0%, var(--clr-warning-600) 100%);
  color: #ffffff;
  border-radius: 50%;
  flex-shrink: 0;
  font-size: 1.6rem;
  box-shadow: 0 0.2rem 0.4rem rgba(245, 158, 11, 0.3);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0.2rem 0.4rem rgba(245, 158, 11, 0.3);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0.3rem 0.6rem rgba(245, 158, 11, 0.4);
  }
}
.order-merge-warning__icon i {
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 768px) {
  .order-merge-warning__icon {
    width: 2.8rem;
    height: 2.8rem;
    min-width: 2.8rem;
    font-size: 1.4rem;
  }
}
@media (max-width: 544px) {
  .order-merge-warning__icon {
    width: 2.4rem;
    height: 2.4rem;
    min-width: 2.4rem;
    font-size: 1.2rem;
  }
}
.order-merge-warning__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-width: 0;
}
.order-merge-warning__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--clr-warning-800);
  letter-spacing: -0.01em;
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
@media (max-width: 768px) {
  .order-merge-warning__title {
    font-size: 1.4rem;
  }
}
@media (max-width: 544px) {
  .order-merge-warning__title {
    font-size: 1.3rem;
    gap: 0.4rem;
  }
}
.order-merge-warning__message {
  font-size: 1.4rem;
  line-height: 1.6;
  color: var(--clr-warning-900);
  font-weight: 500;
  letter-spacing: -0.01em;
}
@media (max-width: 768px) {
  .order-merge-warning__message {
    font-size: 1.3rem;
    line-height: 1.5;
  }
}
@media (max-width: 544px) {
  .order-merge-warning__message {
    font-size: 1.2rem;
    line-height: 1.5;
  }
}

.no-serial-search {
  max-width: 120rem;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.no-serial-search__form-wrapper {
  margin: 0 auto 2.4rem;
  padding: 2rem;
  background: var(--clr-bg-elevated);
  border: 0.1rem solid var(--clr-border-primary);
  border-radius: 1.2rem;
  box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.04);
}
@media (max-width: 768px) {
  .no-serial-search__form-wrapper {
    max-width: 100%;
    padding: 1.6rem;
    margin-bottom: 2rem;
  }
}

.no-serial-search-form {
  display: flex;
  gap: 0.8rem;
  align-items: stretch;
  width: 100%;
}
.no-serial-search-form__input-container {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}
.no-serial-search-form__input-icon {
  position: absolute;
  left: 1.2rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  color: var(--clr-text-tertiary);
  pointer-events: none;
  z-index: 1;
  transition: color 0.2s ease;
}
.no-serial-search-form__input {
  width: 100%;
  padding: 1.2rem 1.2rem 1.2rem 4rem;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.5;
  border: 0.1rem solid var(--clr-border-primary);
  border-radius: 0.8rem;
  background: var(--clr-base-white);
  color: var(--clr-text-primary);
  font-family: "Courier New", "Monaco", "Menlo", monospace;
  letter-spacing: 0.05em;
  transition: all 0.2s ease;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
@media (max-width: 768px) {
  .no-serial-search-form__input {
    padding: 1rem 1rem 1rem 3.6rem;
    font-size: 1.3rem;
  }
}
.no-serial-search-form__input:-webkit-autofill, .no-serial-search-form__input:-webkit-autofill:hover, .no-serial-search-form__input:-webkit-autofill:focus, .no-serial-search-form__input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--clr-text-primary) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--clr-base-white) inset !important;
  box-shadow: 0 0 0 1000px var(--clr-base-white) inset !important;
  border-color: var(--clr-border-primary) !important;
  background-color: var(--clr-base-white) !important;
}
@media (max-width: 768px) {
  .no-serial-search-form__input:hover:not(:focus) {
    border-color: var(--clr-primary-400);
  }
}
.no-serial-search-form__input:focus {
  outline: none;
  border-color: var(--clr-primary-500);
  box-shadow: 0 0 0 0.3rem rgba(37, 99, 235, 0.1);
}
.no-serial-search-form__input:focus ~ .no-serial-search-form__input-icon {
  color: var(--clr-primary-600);
}
.no-serial-search-form__input::placeholder {
  color: var(--clr-text-tertiary);
  opacity: 0.6;
  font-weight: 400;
  letter-spacing: 0.02em;
  transition: opacity 0.2s ease;
}
.no-serial-search-form__input:focus::placeholder {
  opacity: 0.4;
}
[data-theme=dark] .no-serial-search-form__input {
  background: var(--clr-bg-secondary);
  border-color: var(--clr-border-primary);
  color: var(--clr-text-primary);
}
[data-theme=dark] .no-serial-search-form__input:-webkit-autofill, [data-theme=dark] .no-serial-search-form__input:-webkit-autofill:hover, [data-theme=dark] .no-serial-search-form__input:-webkit-autofill:focus, [data-theme=dark] .no-serial-search-form__input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--clr-text-primary) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--clr-bg-secondary) inset !important;
  box-shadow: 0 0 0 1000px var(--clr-bg-secondary) inset !important;
  border-color: var(--clr-border-primary) !important;
  background-color: var(--clr-bg-secondary) !important;
}
[data-theme=dark] .no-serial-search-form__input::placeholder {
  color: var(--clr-text-tertiary);
  opacity: 0.9;
}
[data-theme=dark] .no-serial-search-form__input:focus {
  border-color: var(--clr-primary-400);
  box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.35);
}
[data-theme=dark] .no-serial-search-form__input:focus ~ .no-serial-search-form__input-icon {
  color: var(--clr-primary-400);
}
[data-theme=dark] .no-serial-search-form__input-icon {
  color: var(--clr-text-tertiary);
}
.no-serial-search-form__button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.2rem 1.6rem;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--clr-base-white);
  background: var(--clr-primary-600);
  border: none;
  border-radius: 0.8rem;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .no-serial-search-form__button {
    min-width: 8rem;
  }
}
@media (max-width: 768px) {
  .no-serial-search-form__button {
    padding: 1rem 1.4rem;
    font-size: 1.3rem;
  }
}
.no-serial-search-form__button i {
  font-size: 1.3rem;
}
.no-serial-search-form__button span {
  letter-spacing: -0.01em;
}
@media (max-width: 768px) {
  .no-serial-search-form__button:hover:not(:disabled) {
    background: var(--clr-primary-700);
  }
}
.no-serial-search-form__button:active:not(:disabled) {
  background: var(--clr-primary-800);
}
.no-serial-search-form__button:focus {
  outline: none;
  box-shadow: 0 0 0 0.3rem rgba(37, 99, 235, 0.2);
}
.no-serial-search-form__button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.no-serial-results {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
@media (max-width: 768px) {
  .no-serial-results {
    gap: 2.4rem;
  }
}

.no-serial-card {
  margin-bottom: 0;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.no-serial-card:hover {
  transform: translateY(-0.2rem);
  box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.08);
}
.no-serial-card .no-card__header {
  padding: 2rem 2.4rem;
  border-bottom: 0.1rem solid var(--clr-border-secondary);
  background: linear-gradient(135deg, var(--clr-bg-elevated) 0%, var(--clr-bg-secondary) 100%);
}
.no-serial-card .no-card__title {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--clr-text-primary);
  margin: 0;
}
.no-serial-card .no-card__title i {
  font-size: 1.6rem;
  color: var(--clr-primary-600);
}
.no-serial-card .no-card__body {
  padding: 2.4rem;
}
.no-serial-card__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6rem;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1024px) {
  .no-serial-card__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
}
@media (max-width: 768px) {
  .no-serial-card__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 544px) {
  .no-serial-card__grid {
    grid-template-columns: 1fr;
  }
}
.no-serial-card__item {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 1.6rem;
  background: var(--clr-bg-secondary);
  border-radius: 0.8rem;
  border: 0.1rem solid var(--clr-border-primary);
  transition: all 0.2s ease;
}
.no-serial-card__item:hover {
  border-color: var(--clr-border-secondary);
  background: var(--clr-bg-tertiary);
  transform: translateY(-0.1rem);
  box-shadow: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.04);
}
.no-serial-card__label {
  font-size: 1.2rem;
  color: var(--clr-text-secondary);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.no-serial-card__value {
  font-size: 1.5rem;
  color: var(--clr-text-primary);
  font-weight: 600;
  line-height: 1.4;
  word-break: break-word;
}
.no-serial-card__value--serial {
  font-family: "Courier New", "Monaco", "Menlo", monospace;
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--clr-primary-700);
  letter-spacing: 0.05em;
}
.no-serial-card__link {
  color: var(--clr-primary-600);
  text-decoration: none;
  font-weight: 600;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.no-serial-card__link::after {
  content: "\f061";
  font-family: "Font Awesome 7 Pro";
  font-weight: 300;
  font-size: 1.2rem;
  opacity: 0;
  transform: translateX(-0.4rem);
  transition: all 0.2s ease;
}
.no-serial-card__link:hover {
  color: var(--clr-primary-700);
  text-decoration: underline;
}
.no-serial-card__link:hover::after {
  opacity: 1;
  transform: translateX(0);
}
.no-serial-card--empty .no-card__body {
  padding: 4rem 2.4rem;
}
.no-serial-card--placeholder .no-card__body {
  padding: 6rem 2.4rem;
}

.no-serial-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem 0;
}
.no-serial-empty__icon {
  font-size: 5rem;
  color: var(--clr-gray-400);
  margin-bottom: 1.6rem;
  opacity: 0.6;
}
.no-serial-empty__title {
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--clr-text-primary);
  margin: 0 0 0.8rem 0;
}
.no-serial-empty__message {
  font-size: 1.4rem;
  color: var(--clr-text-secondary);
  margin: 0;
  line-height: 1.6;
  max-width: 50rem;
}

.no-serial-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem 0;
}
.no-serial-placeholder__icon {
  font-size: 6rem;
  color: var(--clr-gray-300);
  margin-bottom: 2rem;
  opacity: 0.5;
  animation: pulse 2s ease-in-out infinite;
}
.no-serial-placeholder__title {
  font-size: 2rem;
  font-weight: 600;
  color: var(--clr-text-secondary);
  margin: 0 0 1.2rem 0;
}
.no-serial-placeholder__message {
  font-size: 1.5rem;
  color: var(--clr-text-tertiary);
  margin: 0;
  line-height: 1.8;
  max-width: 50rem;
}
@keyframes pulse {
  0%, 100% {
    opacity: 0.5;
  }
  50% {
    opacity: 0.3;
  }
}

@media (max-width: 544px) {
  .no-serial-search__form-wrapper {
    padding: 1.4rem;
  }
  .no-serial-search-form {
    flex-direction: column;
    gap: 0.8rem;
  }
  .no-serial-search-form__input {
    padding: 1rem 1rem 1rem 3.6rem;
    font-size: 1.3rem;
  }
  .no-serial-search-form__input-icon {
    left: 1rem;
    font-size: 1.3rem;
  }
  .no-serial-search-form__button {
    width: 100%;
  }
  .no-serial-card .no-card__header {
    padding: 1.6rem 2rem;
  }
  .no-serial-card .no-card__title {
    font-size: 1.6rem;
  }
  .no-serial-card .no-card__title i {
    font-size: 1.4rem;
  }
  .no-serial-card .no-card__body {
    padding: 2rem;
  }
  .no-serial-card__grid {
    gap: 1.2rem;
  }
  .no-serial-card__item {
    padding: 1.4rem;
  }
  .no-serial-card__label {
    font-size: 1.1rem;
  }
  .no-serial-card__value {
    font-size: 1.4rem;
  }
  .no-serial-card__value--serial {
    font-size: 1.5rem;
  }
  .no-serial-empty {
    padding: 3rem 0;
  }
  .no-serial-empty__icon {
    font-size: 4rem;
    margin-bottom: 1.2rem;
  }
  .no-serial-empty__title {
    font-size: 1.6rem;
  }
  .no-serial-empty__message {
    font-size: 1.3rem;
  }
  .no-serial-placeholder {
    padding: 4rem 0;
  }
  .no-serial-placeholder__icon {
    font-size: 5rem;
    margin-bottom: 1.6rem;
  }
  .no-serial-placeholder__title {
    font-size: 1.8rem;
  }
  .no-serial-placeholder__message {
    font-size: 1.4rem;
  }
}
/**
 * Claim Detail Page
 * 클레임 접수 페이지 스타일
 */
.no-claim-detail-page {
  max-width: 90rem;
  margin: 0 auto;
  padding: 2rem 1.6rem;
}
@media (max-width: 768px) {
  .no-claim-detail-page {
    padding: 2.4rem;
  }
}
.no-claim-detail-page__header {
  margin-bottom: 2.4rem;
}
.no-claim-detail-page__back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  color: var(--clr-text-secondary);
  text-decoration: none;
  font-size: clamp(1.4rem, 0vw + 1.4rem, 1.4rem);
  margin-bottom: 1.6rem;
  transition: color 0.2s;
}
.no-claim-detail-page__back-link:hover {
  color: var(--clr-primary-600);
}
.no-claim-detail-page__title-row {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-bottom: 1.2rem;
  flex-wrap: wrap;
}
.no-claim-detail-page__title {
  font-size: clamp(2rem, 0.2588996764vw + 1.9029126214rem, 2.4rem);
  font-weight: 600;
  color: var(--clr-text-primary);
  margin: 0;
}
.no-claim-detail-page__subtitle {
  font-size: clamp(1.3rem, 0.0647249191vw + 1.2757281553rem, 1.4rem);
  color: var(--clr-text-tertiary);
  margin: 0;
  line-height: 1.6;
}
.no-claim-detail-page__body {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}
.no-claim-detail-page__content-section, .no-claim-detail-page__chat-section {
  background: var(--clr-bg-elevated);
  border-radius: 1.2rem;
  border: 0.1rem solid var(--clr-border-primary);
  overflow: hidden;
}
.no-claim-detail-page__section-header {
  padding: 1.6rem 2rem;
  border-bottom: 0.1rem solid var(--clr-border-secondary);
  background: var(--clr-bg-tertiary);
}
@media (max-width: 768px) {
  .no-claim-detail-page__section-header {
    padding: 2rem 2.4rem;
  }
}
.no-claim-detail-page__section-title {
  font-size: clamp(1.6rem, 0.1294498382vw + 1.5514563107rem, 1.8rem);
  font-weight: 600;
  color: var(--clr-text-primary);
  margin: 0;
}
.no-claim-detail-page__content-box {
  padding: 2rem;
}
@media (max-width: 768px) {
  .no-claim-detail-page__content-box {
    padding: 2.4rem;
  }
}
.no-claim-detail-page__content-text {
  font-size: clamp(1.4rem, 0.0647249191vw + 1.3757281553rem, 1.5rem);
  line-height: 1.8;
  color: var(--clr-text-primary);
  white-space: pre-wrap;
  word-break: break-word;
}
.no-claim-detail-page__attachments {
  margin-top: 2.4rem;
  padding-top: 2.4rem;
  border-top: 0.1rem solid var(--clr-border-secondary);
}
.no-claim-detail-page__attachments-title {
  font-size: clamp(1.4rem, 0.0647249191vw + 1.3757281553rem, 1.5rem);
  font-weight: 600;
  color: var(--clr-text-secondary);
  margin: 0 0 1.2rem 0;
}
.no-claim-detail-page__attachments-list {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.no-claim-detail-page__attachment-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem 1.2rem;
  background: var(--clr-bg-tertiary);
  border: 0.1rem solid var(--clr-border-primary);
  border-radius: 0.8rem;
  text-decoration: none;
  color: var(--clr-text-primary);
  transition: all 0.2s ease;
  font-size: clamp(1.3rem, 0.0647249191vw + 1.2757281553rem, 1.4rem);
}
.no-claim-detail-page__attachment-item:hover {
  background: var(--clr-primary-50);
  border-color: var(--clr-primary-400);
  color: var(--clr-primary-700);
}
.no-claim-detail-page__attachment-item i {
  color: var(--clr-text-tertiary);
  font-size: clamp(1.4rem, 0.1294498382vw + 1.3514563107rem, 1.6rem);
}
.no-claim-detail-page__attachment-item span:first-of-type {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.no-claim-detail-page__attachment-size {
  color: var(--clr-text-tertiary);
  font-size: clamp(1.1rem, 0.0647249191vw + 1.0757281553rem, 1.2rem);
}
.no-claim-detail-page__chat-container {
  display: flex;
  flex-direction: column;
  height: 80rem;
  max-height: 80vh;
}
@media (max-width: 768px) {
  .no-claim-detail-page__chat-container {
    height: 70rem;
  }
}
.no-claim-detail-page__messages {
  flex: 1;
  overflow-y: auto;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  background: var(--clr-bg-primary);
}
@media (max-width: 768px) {
  .no-claim-detail-page__messages {
    padding: 2.4rem;
  }
}
.no-claim-detail-page__messages::-webkit-scrollbar {
  width: 0.6rem;
}
.no-claim-detail-page__messages::-webkit-scrollbar-track {
  background: var(--clr-bg-tertiary);
}
.no-claim-detail-page__messages::-webkit-scrollbar-thumb {
  background: var(--clr-border-primary);
  border-radius: 0.3rem;
}
.no-claim-detail-page__messages::-webkit-scrollbar-thumb:hover {
  background: var(--clr-text-tertiary);
}
.no-claim-detail-page__messages-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--clr-text-tertiary);
  font-size: clamp(1.4rem, 0vw + 1.4rem, 1.4rem);
}
.no-claim-detail-page__messages-empty-search {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  color: var(--clr-text-tertiary);
  font-size: clamp(1.4rem, 0vw + 1.4rem, 1.4rem);
}
.no-claim-detail-page__messages-empty-search p {
  margin: 0;
}
.no-claim-detail-page__chat-search {
  padding: 1.2rem 1.6rem;
  background: var(--clr-bg-elevated);
  border-bottom: 0.1rem solid var(--clr-border-secondary);
}
@media (max-width: 768px) {
  .no-claim-detail-page__chat-search {
    padding: 1.6rem 2rem;
  }
}
.no-claim-detail-page__chat-search-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.no-claim-detail-page__chat-search-icon {
  position: absolute;
  left: 1.2rem;
  color: var(--clr-text-tertiary);
  font-size: clamp(1.4rem, 0.1294498382vw + 1.3514563107rem, 1.6rem);
  pointer-events: none;
  z-index: 1;
}
.no-claim-detail-page__chat-search-input {
  width: 100%;
  padding: 0.8rem 1.2rem 0.8rem 3.6rem;
  font-size: clamp(1.3rem, 0.0647249191vw + 1.2757281553rem, 1.4rem);
  line-height: 1.5;
  border: 0.1rem solid var(--clr-border-primary);
  border-radius: 0.8rem;
  background: var(--clr-bg-primary);
  color: var(--clr-text-primary);
  transition: all 0.2s ease;
}
@media (max-width: 768px) {
  .no-claim-detail-page__chat-search-input {
    padding: 1rem 1.4rem 1rem 4rem;
    border-radius: 1rem;
  }
}
.no-claim-detail-page__chat-search-input:focus {
  outline: none;
  border-color: var(--clr-primary-500);
  box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.1);
}
.no-claim-detail-page__chat-search-input::placeholder {
  color: var(--clr-text-tertiary);
}
.no-claim-detail-page__chat-search-clear {
  position: absolute;
  right: 0.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--clr-text-tertiary);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: clamp(1.2rem, 0.1294498382vw + 1.1514563107rem, 1.4rem);
}
@media (max-width: 768px) {
  .no-claim-detail-page__chat-search-clear {
    right: 1rem;
    width: 2.8rem;
    height: 2.8rem;
  }
}
.no-claim-detail-page__chat-search-clear:hover {
  background: var(--clr-bg-secondary);
  color: var(--clr-text-primary);
}
.no-claim-detail-page__chat-search-clear:active {
  transform: scale(0.95);
}
.no-claim-detail-page__message-date-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2rem 0;
  gap: 1.2rem;
  position: relative;
}
@media (max-width: 768px) {
  .no-claim-detail-page__message-date-divider {
    margin: 2.4rem 0;
    gap: 1.6rem;
  }
}
.no-claim-detail-page__message-date-divider-line {
  flex: 1;
  height: 0.1rem;
  background: var(--clr-border-secondary);
  max-width: 10rem;
}
@media (max-width: 768px) {
  .no-claim-detail-page__message-date-divider-line {
    max-width: 15rem;
  }
}
.no-claim-detail-page__message-date-divider-text {
  font-size: clamp(1.1rem, 0.0647249191vw + 1.0757281553rem, 1.2rem);
  font-weight: 500;
  color: var(--clr-text-tertiary);
  padding: 0 0.8rem;
  background: var(--clr-bg-primary);
  white-space: nowrap;
  flex-shrink: 0;
}
.no-claim-detail-page__message {
  display: flex;
  gap: 1.2rem;
  align-items: flex-start;
  animation: messageSlideIn 0.3s ease-out;
  margin-bottom: 1.6rem;
}
@media (max-width: 768px) {
  .no-claim-detail-page__message {
    gap: 1.6rem;
    margin-bottom: 2rem;
  }
}
.no-claim-detail-page__message--own {
  flex-direction: row-reverse;
}
.no-claim-detail-page__message-avatar {
  position: relative;
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 50%;
  background: var(--clr-primary-100);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 0.2rem solid var(--clr-primary-200);
}
@media (max-width: 768px) {
  .no-claim-detail-page__message-avatar {
    width: 4rem;
    height: 4rem;
  }
}
.no-claim-detail-page__message-avatar--own {
  background: var(--clr-primary-600);
  border-color: var(--clr-primary-700);
  box-shadow: 0 0.2rem 0.8rem rgba(37, 99, 235, 0.3);
}
.no-claim-detail-page__message-avatar-text {
  font-size: clamp(1.4rem, 0.1294498382vw + 1.3514563107rem, 1.6rem);
  font-weight: 600;
  color: var(--clr-primary-700);
}
.no-claim-detail-page__message-avatar-text--own {
  color: var(--clr-base-white);
}
.no-claim-detail-page__message-avatar-badge {
  position: absolute;
  bottom: -0.2rem;
  right: -0.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6rem;
  height: 1.6rem;
  padding: 0 0.4rem;
  background: var(--clr-primary-600);
  color: var(--clr-base-white);
  font-size: clamp(0.9rem, 0.0647249191vw + 0.8757281553rem, 1rem);
  font-weight: 700;
  border-radius: 0.8rem;
  border: 0.15rem solid var(--clr-base-white);
  box-shadow: 0 0.1rem 0.4rem rgba(0, 0, 0, 0.15);
  line-height: 1;
  letter-spacing: -0.02em;
}
@media (max-width: 768px) {
  .no-claim-detail-page__message-avatar-badge {
    min-width: 1.8rem;
    height: 1.8rem;
    font-size: clamp(1rem, 0.0647249191vw + 0.9757281553rem, 1.1rem);
    border-width: 0.2rem;
  }
}
.no-claim-detail-page__message-avatar i {
  font-size: clamp(1.6rem, 0.1294498382vw + 1.5514563107rem, 1.8rem);
  color: var(--clr-primary-600);
}
.no-claim-detail-page__message-content {
  max-width: 70%;
  background: var(--clr-bg-elevated);
  border: 0.1rem solid var(--clr-border-primary);
  border-radius: 1.2rem;
  padding: 0;
  box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
}
@media (max-width: 768px) {
  .no-claim-detail-page__message-content {
    max-width: 65%;
  }
}
.no-claim-detail-page__message-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.4rem;
  background: var(--clr-bg-tertiary);
  border-bottom: 0.1rem solid var(--clr-border-secondary);
  gap: 0.8rem;
}
@media (max-width: 768px) {
  .no-claim-detail-page__message-header {
    padding: 1.2rem 1.6rem;
  }
}
.no-claim-detail-page__message-header-left {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: 1;
  min-width: 0;
}
.no-claim-detail-page__message-sender {
  font-size: clamp(1.2rem, 0.0647249191vw + 1.1757281553rem, 1.3rem);
  font-weight: 600;
  color: var(--clr-text-primary);
}
.no-claim-detail-page__message-time {
  font-size: clamp(1.1rem, 0.0647249191vw + 1.0757281553rem, 1.2rem);
  font-weight: 400;
  color: var(--clr-text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: 0.8rem;
  opacity: 0.8;
}
.no-claim-detail-page__message-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  border-radius: 0.4rem;
  background: transparent;
  color: var(--clr-text-tertiary);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: clamp(1.2rem, 0.0647249191vw + 1.1757281553rem, 1.3rem);
  flex-shrink: 0;
  opacity: 0.6;
}
@media (max-width: 768px) {
  .no-claim-detail-page__message-delete:hover {
    background: var(--clr-danger-50);
    color: var(--clr-danger-600);
    opacity: 1;
  }
}
.no-claim-detail-page__message-delete:active {
  transform: scale(0.95);
}
.no-claim-detail-page__message-delete:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(239, 68, 68, 0.2);
}
.no-claim-detail-page__message-text {
  font-size: clamp(1.4rem, 0.0647249191vw + 1.3757281553rem, 1.5rem);
  line-height: 1.6;
  color: var(--clr-text-primary);
  white-space: pre-wrap;
  word-break: break-word;
  padding: 1.2rem 1.4rem;
}
@media (max-width: 768px) {
  .no-claim-detail-page__message-text {
    padding: 1.4rem 1.6rem;
  }
}
.no-claim-detail-page__chat-input-wrapper {
  border-top: 0.1rem solid var(--clr-border-secondary);
  background: var(--clr-bg-elevated);
  padding: 1.6rem;
}
@media (max-width: 768px) {
  .no-claim-detail-page__chat-input-wrapper {
    padding: 2rem;
  }
}
.no-claim-detail-page__completed-notice {
  display: flex;
  align-items: flex-start;
  gap: 1.6rem;
  padding: 2.4rem;
  background: linear-gradient(135deg, var(--clr-success-50) 0%, var(--clr-success-100) 100%);
  border: 0.2rem solid var(--clr-success-300);
  border-radius: 1.2rem;
  box-shadow: 0 0.4rem 1.2rem rgba(34, 197, 94, 0.1);
}
@media (max-width: 768px) {
  .no-claim-detail-page__completed-notice {
    padding: 3.2rem;
    gap: 2rem;
  }
}
.no-claim-detail-page__completed-icon {
  flex-shrink: 0;
  width: 4.8rem;
  height: 4.8rem;
  border-radius: 50%;
  background: var(--clr-success-500);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0.4rem 1.2rem rgba(34, 197, 94, 0.3);
}
@media (max-width: 768px) {
  .no-claim-detail-page__completed-icon {
    width: 5.6rem;
    height: 5.6rem;
  }
}
.no-claim-detail-page__completed-icon i {
  font-size: clamp(2.4rem, 0.2588996764vw + 2.3029126214rem, 2.8rem);
  color: var(--clr-base-white);
}
.no-claim-detail-page__completed-content {
  flex: 1;
  min-width: 0;
}
.no-claim-detail-page__completed-title {
  font-size: clamp(1.6rem, 0.1294498382vw + 1.5514563107rem, 1.8rem);
  font-weight: 600;
  color: var(--clr-success-800);
  margin: 0 0 0.8rem 0;
  line-height: 1.4;
}
.no-claim-detail-page__completed-text {
  font-size: clamp(1.3rem, 0.0647249191vw + 1.2757281553rem, 1.4rem);
  color: var(--clr-success-700);
  line-height: 1.6;
  margin: 0 0 1.6rem 0;
}
.no-claim-detail-page__message-attachments {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.2rem 1.4rem;
  background: var(--clr-bg-secondary);
  border-top: 0.1rem solid var(--clr-border-secondary);
}
@media (max-width: 768px) {
  .no-claim-detail-page__message-attachments {
    padding: 1.4rem 1.6rem;
    gap: 0.8rem;
  }
}
.no-claim-detail-page__message-attachment {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.8rem 1rem;
  background: var(--clr-bg-elevated);
  border: 0.1rem solid var(--clr-border-primary);
  border-radius: 0.6rem;
  text-decoration: none;
  color: var(--clr-text-primary);
  transition: all 0.2s ease;
  font-size: clamp(1.3rem, 0.0647249191vw + 1.2757281553rem, 1.4rem);
}
@media (max-width: 768px) {
  .no-claim-detail-page__message-attachment {
    padding: 1rem 1.2rem;
    border-radius: 0.8rem;
  }
}
.no-claim-detail-page__message-attachment:hover {
  background: var(--clr-primary-50);
  border-color: var(--clr-primary-400);
  color: var(--clr-primary-700);
  transform: translateX(0.2rem);
}
.no-claim-detail-page__message-attachment i {
  color: var(--clr-text-tertiary);
  font-size: clamp(1.4rem, 0.1294498382vw + 1.3514563107rem, 1.6rem);
  flex-shrink: 0;
}
.no-claim-detail-page__message-attachment span:first-of-type {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.no-claim-detail-page__attachment-size {
  color: var(--clr-text-tertiary);
  font-size: clamp(1.1rem, 0.0647249191vw + 1.0757281553rem, 1.2rem);
  flex-shrink: 0;
  margin-left: 0.4rem;
}
.no-claim-detail-page__message--own .no-claim-detail-page__message-attachments {
  background: var(--clr-bg-secondary);
  border-top-color: var(--clr-border-secondary);
}
.no-claim-detail-page__message--own .no-claim-detail-page__message-attachment {
  background: var(--clr-bg-elevated);
  border-color: var(--clr-border-primary);
  color: var(--clr-text-primary);
}
.no-claim-detail-page__message--own .no-claim-detail-page__message-attachment:hover {
  background: var(--clr-primary-50);
  border-color: var(--clr-primary-400);
  color: var(--clr-primary-700);
}
@keyframes messageSlideIn {
  from {
    opacity: 0;
    transform: translateY(1rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/**
 * Claim Edit Page
 * 클레임 수정 페이지 스타일
 */
.no-claim-tabs {
  margin-bottom: 3.2rem;
  background: var(--clr-bg-elevated);
  border-radius: 1.2rem;
  border: 0.1rem solid var(--clr-border-primary);
  overflow: hidden;
}
.no-claim-tabs .no-tabs__list {
  background: var(--clr-bg-tertiary);
  padding: 0 1.6rem;
  margin: 0;
  border-bottom: 0.1rem solid var(--clr-border-secondary);
  border-radius: 1.2rem 1.2rem 0 0;
}
@media (max-width: 768px) {
  .no-claim-tabs .no-tabs__list {
    padding: 0 2.4rem;
  }
}
.no-claim-tabs .no-tabs__content {
  padding: 2rem;
}
@media (max-width: 768px) {
  .no-claim-tabs .no-tabs__content {
    padding: 2.4rem;
  }
}
.no-claim-tabs .no-tabs__panel {
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(0.5rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.no-claim-content-section {
  background: var(--clr-bg-elevated);
  border-radius: 1.2rem;
  border: 0.1rem solid var(--clr-border-primary);
  overflow: hidden;
}
.no-claim-content-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.6rem 2rem;
  border-bottom: 0.1rem solid var(--clr-border-secondary);
  background: var(--clr-bg-tertiary);
}
@media (max-width: 768px) {
  .no-claim-content-section__header {
    padding: 2rem 2.4rem;
  }
}
.no-claim-content-section__title {
  font-size: clamp(1.6rem, 0.1294498382vw + 1.5514563107rem, 1.8rem);
  font-weight: 600;
  color: var(--clr-text-primary);
  margin: 0;
}
.no-claim-content-section__badge {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.8rem;
  background: var(--clr-warning-50);
  color: var(--clr-warning-700);
  border: 0.1rem solid var(--clr-warning-200);
  border-radius: 0.6rem;
  font-size: 1.2rem;
  font-weight: 500;
}
.no-claim-content-section__body {
  padding: 2rem;
}
@media (max-width: 768px) {
  .no-claim-content-section__body {
    padding: 2.4rem;
  }
}

.no-claim-chat-section {
  background: var(--clr-bg-elevated);
  border-radius: 1.2rem;
  border: 0.1rem solid var(--clr-border-primary);
  overflow: hidden;
  height: 100%;
}

.no-form-field__input[readonly],
.no-form-field__textarea[readonly] {
  background: var(--clr-bg-tertiary);
  color: var(--clr-text-secondary);
  cursor: not-allowed;
  opacity: 0.8;
}

.no-claim-view-section {
  background: var(--clr-bg-elevated);
  border-radius: 1.2rem;
  border: 0.1rem solid var(--clr-border-primary);
  overflow: hidden;
  margin-bottom: 2rem;
}
.no-claim-view-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.6rem 2rem;
  border-bottom: 0.1rem solid var(--clr-border-secondary);
  background: var(--clr-bg-tertiary);
}
@media (max-width: 768px) {
  .no-claim-view-section__header {
    padding: 2rem 2.4rem;
  }
}
.no-claim-view-section__title {
  font-size: clamp(1.6rem, 0.1294498382vw + 1.5514563107rem, 1.8rem);
  font-weight: 600;
  color: var(--clr-text-primary);
  margin: 0;
}
.no-claim-view-section__body {
  padding: 2rem;
}
@media (max-width: 768px) {
  .no-claim-view-section__body {
    padding: 2.4rem;
  }
}

.no-claim-status-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  margin-bottom: 2rem;
}
.no-claim-status-meta__item {
  flex: 1 1 10rem;
  min-width: 0;
  padding: 1rem 1.4rem;
  border-radius: 0.8rem;
  border: 0.1rem solid var(--clr-border-secondary);
  background: var(--clr-bg-elevated);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.no-claim-status-meta__label {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--clr-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.no-claim-status-meta__value {
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--clr-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.no-claim-distributor-strip {
  margin-bottom: 1.6rem;
  border-radius: 0.8rem;
  border: 0.1rem solid var(--clr-border-secondary);
  background: var(--clr-bg-elevated);
  overflow: hidden;
}
.no-claim-distributor-strip__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.8rem 1.2rem;
  border-bottom: 0.1rem solid var(--clr-border-secondary);
  background: var(--clr-bg-tertiary);
}
.no-claim-distributor-strip__title {
  margin: 0;
  font-size: clamp(1.4rem, 0.0647249191vw + 1.3757281553rem, 1.5rem);
  font-weight: 600;
  color: var(--clr-text-primary);
  line-height: 1.3;
}
.no-claim-distributor-strip__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
@media (min-width: 768px) {
  .no-claim-distributor-strip__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.no-claim-distributor-strip__cell {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
  padding: 0.9rem 1.2rem;
  border-bottom: 0.1rem solid var(--clr-border-secondary);
}
.no-claim-distributor-strip__cell:last-child {
  border-bottom: none;
}
@media (min-width: 768px) {
  .no-claim-distributor-strip__cell {
    padding: 0.75rem 1.2rem;
    border-bottom: none;
    border-right: 0.1rem solid var(--clr-border-secondary);
  }
  .no-claim-distributor-strip__cell:last-child {
    border-right: none;
  }
}
.no-claim-distributor-strip__label {
  font-size: 1rem;
  font-weight: 600;
  color: var(--clr-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.2;
}
.no-claim-distributor-strip__value {
  font-size: clamp(1.3rem, 0.0647249191vw + 1.2757281553rem, 1.4rem);
  font-weight: 500;
  color: var(--clr-text-primary);
  line-height: 1.35;
  word-break: break-word;
}

.no-claim-view-field {
  margin-bottom: 2.4rem;
}
.no-claim-view-field:last-child {
  margin-bottom: 0;
}
.no-claim-view-field__label {
  display: block;
  font-size: clamp(1.3rem, 0.0647249191vw + 1.2757281553rem, 1.4rem);
  font-weight: 600;
  color: var(--clr-text-secondary);
  margin-bottom: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.no-claim-view-field__value {
  font-size: clamp(1.4rem, 0.0647249191vw + 1.3757281553rem, 1.5rem);
  line-height: 1.6;
  color: var(--clr-text-primary);
  padding: 1.2rem 1.6rem;
  background: var(--clr-bg-primary);
  border: 0.1rem solid var(--clr-border-secondary);
  border-radius: 0.8rem;
  word-break: break-word;
}
@media (max-width: 768px) {
  .no-claim-view-field__value {
    padding: 1.6rem 2rem;
  }
}
.no-claim-view-field__value--content {
  white-space: pre-wrap;
  min-height: 10rem;
  line-height: 1.8;
}

.no-claim-attachments {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.no-claim-attachment-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.2rem;
  background: var(--clr-bg-primary);
  border: 0.1rem solid var(--clr-border-primary);
  border-radius: 0.8rem;
  text-decoration: none;
  color: var(--clr-text-primary);
  transition: all 0.2s ease;
  font-size: clamp(1.3rem, 0.0647249191vw + 1.2757281553rem, 1.4rem);
}
.no-claim-attachment-item:hover {
  background: var(--clr-primary-50);
  border-color: var(--clr-primary-400);
  color: var(--clr-primary-700);
  transform: translateY(-0.1rem);
  box-shadow: 0 0.2rem 0.4rem rgba(37, 99, 235, 0.1);
}
.no-claim-attachment-item i {
  color: var(--clr-text-tertiary);
  font-size: clamp(1.4rem, 0.1294498382vw + 1.3514563107rem, 1.6rem);
  flex-shrink: 0;
}
.no-claim-attachment-item span:first-of-type {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.no-claim-attachment-item__size {
  color: var(--clr-text-tertiary);
  font-size: clamp(1.1rem, 0.0647249191vw + 1.0757281553rem, 1.2rem);
  flex-shrink: 0;
}

/**
 * Notification Page Styles
 * 전체 알림 페이지 스타일
 */
.no-notification-page {
  padding: 2.4rem;
}
@media (max-width: 768px) {
  .no-notification-page {
    padding: 3.2rem;
  }
}
.no-notification-page__header {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  margin-bottom: 2.4rem;
}
.no-notification-page__header-left {
  flex: 1;
}
.no-notification-page__header-right {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
@media (max-width: 768px) {
  .no-notification-page__header-right {
    flex-direction: row;
    align-items: center;
    gap: 2rem;
  }
}
.no-notification-page__title {
  font-size: clamp(2.4rem, 0.2588996764vw + 2.3029126214rem, 2.8rem);
  font-weight: 700;
  color: var(--clr-text-primary);
  margin: 0 0 0.4rem 0;
  line-height: 1.2;
}
.no-notification-page__subtitle {
  font-size: clamp(1.3rem, 0.0647249191vw + 1.2757281553rem, 1.4rem);
  color: var(--clr-text-secondary);
  margin: 0;
  line-height: 1.5;
}
.no-notification-page__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
}
@media (max-width: 768px) {
  .no-notification-page__stats {
    gap: 1.6rem;
  }
}
.no-notification-page__stat-card {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.2rem 1.6rem;
  background: var(--clr-bg-elevated);
  border: 0.1rem solid var(--clr-border-secondary);
  border-radius: 1.2rem;
  min-width: 0;
  flex: 1;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}
@media (max-width: 768px) {
  .no-notification-page__stat-card {
    padding: 1.6rem 2rem;
    gap: 1.6rem;
    flex: 0 1 auto;
    min-width: 14rem;
  }
}
@media (max-width: 544px) {
  .no-notification-page__stat-card {
    padding: 1rem 1.2rem;
    gap: 1rem;
    min-width: 0;
    flex: 1 1 calc(50% - 0.6rem);
  }
}
.no-notification-page__stat-card:hover {
  border-color: var(--clr-border-primary);
  box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.08);
  transform: translateY(-0.2rem);
}
.no-notification-page__stat-card--unread {
  background: linear-gradient(135deg, var(--clr-primary-50) 0%, var(--clr-bg-elevated) 100%);
  border-color: var(--clr-primary-200);
}
.no-notification-page__stat-card--unread:hover {
  border-color: var(--clr-primary-300);
  box-shadow: 0 0.4rem 1.2rem rgba(37, 99, 235, 0.15);
}
.no-notification-page__stat-card--read {
  background: linear-gradient(135deg, var(--clr-primary-50) 0%, var(--clr-bg-elevated) 100%);
  border-color: var(--clr-primary-200);
}
.no-notification-page__stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: 1rem;
  flex-shrink: 0;
  transition: all 0.2s ease;
}
@media (max-width: 768px) {
  .no-notification-page__stat-icon {
    width: 4.8rem;
    height: 4.8rem;
  }
}
@media (max-width: 544px) {
  .no-notification-page__stat-icon {
    width: 3.6rem;
    height: 3.6rem;
  }
}
.no-notification-page__stat-icon i {
  font-size: clamp(1.6rem, 0.1294498382vw + 1.5514563107rem, 1.8rem);
  transition: all 0.2s ease;
}
.no-notification-page__stat-icon--total {
  background: var(--clr-primary-100);
  color: var(--clr-primary-600);
}
.no-notification-page__stat-icon--unread {
  background: var(--clr-primary-500);
  color: var(--clr-base-white);
}
.no-notification-page__stat-icon--read {
  background: var(--clr-primary-100);
  color: var(--clr-primary-600);
  border: 0.1rem solid var(--clr-primary-200);
}
.no-notification-page__stat-content {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
  flex: 1;
}
.no-notification-page__stat-label {
  font-size: clamp(1.1rem, 0.0647249191vw + 1.0757281553rem, 1.2rem);
  font-weight: 500;
  color: var(--clr-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.2;
}
.no-notification-page__stat-value {
  font-size: clamp(2rem, 0.2588996764vw + 1.9029126214rem, 2.4rem);
  font-weight: 700;
  color: var(--clr-text-primary);
  line-height: 1.2;
  letter-spacing: -0.02em;
}
@media (max-width: 544px) {
  .no-notification-page__stat-value {
    font-size: clamp(1.8rem, 0.1294498382vw + 1.7514563107rem, 2rem);
  }
}
.no-notification-page__stat-value--unread {
  color: var(--clr-primary-600);
  text-shadow: 0 0 0.8rem rgba(37, 99, 235, 0.3);
}
.no-notification-page__stat-value--read {
  color: var(--clr-primary-400);
  font-weight: 600;
}
.no-notification-page__read-all-form {
  margin: 0;
}
.no-notification-page__tabs-wrapper {
  margin-bottom: 2.4rem;
  background: transparent;
  border: none;
  padding: 0;
}
.no-notification-page__tabs-form {
  margin: 0;
}
.no-notification-page__tab-item {
  position: relative;
  flex: 1;
  min-width: 0;
}
.no-notification-page__tab-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  padding: 1.2rem 1rem;
  border-radius: 1.2rem;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
  position: relative;
  font-size: clamp(1.3rem, 0.0647249191vw + 1.2757281553rem, 1.4rem);
  color: var(--clr-text-secondary);
  background: var(--clr-bg-elevated);
  border: 0.1rem solid var(--clr-border-secondary);
  min-height: 8rem;
}
@media (max-width: 768px) {
  .no-notification-page__tab-label {
    padding: 1.6rem 1.2rem;
    gap: 1rem;
    font-size: clamp(1.4rem, 0.0647249191vw + 1.3757281553rem, 1.5rem);
    min-height: 9rem;
  }
}
@media (max-width: 544px) {
  .no-notification-page__tab-label {
    padding: 1rem 0.8rem;
    gap: 0.6rem;
    font-size: clamp(1.2rem, 0.0647249191vw + 1.1757281553rem, 1.3rem);
    min-height: 7rem;
  }
}
.no-notification-page__tab-label i {
  font-size: clamp(2rem, 0.2588996764vw + 1.9029126214rem, 2.4rem);
  color: var(--clr-text-tertiary);
  transition: all 0.3s ease;
  flex-shrink: 0;
}
@media (max-width: 544px) {
  .no-notification-page__tab-label i {
    font-size: clamp(1.8rem, 0.1294498382vw + 1.7514563107rem, 2rem);
  }
}
.no-notification-page__tab-label:hover {
  background: var(--clr-bg-base);
  border-color: var(--clr-primary-300);
  color: var(--clr-text-primary);
  transform: translateY(-0.2rem);
  box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.08);
}
.no-notification-page__tab-label:hover i {
  color: var(--clr-primary-500);
  transform: scale(1.1);
}
.no-notification-page__tab-text {
  font-weight: 600;
  font-size: clamp(1.2rem, 0.0647249191vw + 1.1757281553rem, 1.3rem);
  text-align: center;
  line-height: 1.3;
}
@media (max-width: 768px) {
  .no-notification-page__tab-text {
    font-size: clamp(1.3rem, 0.0647249191vw + 1.2757281553rem, 1.4rem);
  }
}
.no-notification-page__tab-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-top: 0.4rem;
}
@media (max-width: 544px) {
  .no-notification-page__tab-stats {
    gap: 0.6rem;
    font-size: clamp(1rem, 0.0647249191vw + 0.9757281553rem, 1.1rem);
  }
}
.no-notification-page__tab-stat {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: clamp(1.1rem, 0.0647249191vw + 1.0757281553rem, 1.2rem);
  line-height: 1.2;
}
@media (max-width: 544px) {
  .no-notification-page__tab-stat {
    gap: 0.3rem;
    font-size: clamp(1rem, 0.0647249191vw + 0.9757281553rem, 1.1rem);
  }
}
.no-notification-page__tab-stat-label {
  color: var(--clr-text-tertiary);
  font-weight: 500;
  font-size: clamp(1rem, 0.0647249191vw + 0.9757281553rem, 1.1rem);
}
@media (max-width: 544px) {
  .no-notification-page__tab-stat-label {
    font-size: clamp(0.9rem, 0.0647249191vw + 0.8757281553rem, 1rem);
  }
}
.no-notification-page__tab-stat-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  padding: 0.2rem 0.5rem;
  border-radius: 0.4rem;
  font-weight: 700;
  font-size: clamp(1.1rem, 0.0647249191vw + 1.0757281553rem, 1.2rem);
  line-height: 1;
}
@media (max-width: 768px) {
  .no-notification-page__tab-stat-value {
    min-width: 2.2rem;
    padding: 0.25rem 0.6rem;
    font-size: clamp(1.2rem, 0.0647249191vw + 1.1757281553rem, 1.3rem);
  }
}
@media (max-width: 544px) {
  .no-notification-page__tab-stat-value {
    min-width: 1.8rem;
    padding: 0.2rem 0.4rem;
    font-size: clamp(1rem, 0.0647249191vw + 0.9757281553rem, 1.1rem);
  }
}
.no-notification-page__tab-stat-value--unread {
  background: var(--clr-primary-500);
  color: var(--clr-base-white);
  box-shadow: 0 0.2rem 0.4rem rgba(37, 99, 235, 0.3);
}
.no-notification-page__tab-stat-value--read {
  background: var(--clr-bg-base);
  color: var(--clr-text-secondary);
  border: 0.1rem solid var(--clr-border-secondary);
}
.no-notification-page__tab-stat-divider {
  color: var(--clr-text-tertiary);
  font-weight: 300;
  opacity: 0.5;
  font-size: clamp(1.1rem, 0.0647249191vw + 1.0757281553rem, 1.2rem);
}
.no-notification-page .no-form-field__radio-group--tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
}
@media (max-width: 768px) {
  .no-notification-page .no-form-field__radio-group--tabs {
    gap: 1.6rem;
  }
}
@media (max-width: 544px) {
  .no-notification-page .no-form-field__radio-group--tabs {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
}
@media (max-width: 450px) {
  .no-notification-page .no-form-field__radio-group--tabs {
    grid-template-columns: 1fr;
  }
}
.no-notification-page .no-form-field__radio-group--tabs input[type=radio] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.no-notification-page .no-form-field__radio-group--tabs input[type=radio]:checked + .no-notification-page__tab-label {
  background: linear-gradient(135deg, var(--clr-primary-500) 0%, var(--clr-primary-600) 100%);
  color: var(--clr-base-white);
  border-color: var(--clr-primary-700);
  box-shadow: 0 0.4rem 1.6rem rgba(37, 99, 235, 0.3);
  transform: translateY(-0.3rem);
}
.no-notification-page .no-form-field__radio-group--tabs input[type=radio]:checked + .no-notification-page__tab-label i {
  color: var(--clr-base-white);
  transform: scale(1.15);
}
.no-notification-page .no-form-field__radio-group--tabs input[type=radio]:checked + .no-notification-page__tab-label .no-notification-page__tab-text {
  color: var(--clr-base-white);
  font-weight: 700;
}
.no-notification-page .no-form-field__radio-group--tabs input[type=radio]:checked + .no-notification-page__tab-label .no-notification-page__tab-stat-label {
  color: rgba(255, 255, 255, 0.8);
}
.no-notification-page .no-form-field__radio-group--tabs input[type=radio]:checked + .no-notification-page__tab-label .no-notification-page__tab-stat-value--unread {
  background: rgba(255, 255, 255, 0.25);
  color: var(--clr-base-white);
  box-shadow: 0 0.2rem 0.4rem rgba(255, 255, 255, 0.2);
}
.no-notification-page .no-form-field__radio-group--tabs input[type=radio]:checked + .no-notification-page__tab-label .no-notification-page__tab-stat-value--read {
  background: rgba(255, 255, 255, 0.15);
  color: var(--clr-base-white);
  border-color: rgba(255, 255, 255, 0.25);
}
.no-notification-page .no-form-field__radio-group--tabs input[type=radio]:checked + .no-notification-page__tab-label .no-notification-page__tab-stat-divider {
  color: rgba(255, 255, 255, 0.6);
}
.no-notification-page .no-form-field__radio-group--tabs input[type=radio]:focus + .no-notification-page__tab-label {
  outline: 0.2rem solid var(--clr-primary-400);
  outline-offset: 0.2rem;
}
.no-notification-page__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  margin-bottom: 2.4rem;
  padding: 1.6rem;
  background: var(--clr-bg-elevated);
  border-radius: 1.2rem;
  border: 0.1rem solid var(--clr-border-secondary);
}
@media (max-width: 768px) {
  .no-notification-page__filters {
    gap: 2rem;
    padding: 2rem;
  }
}
.no-notification-page__filter-group {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-width: 12rem;
  flex: 1;
}
@media (max-width: 768px) {
  .no-notification-page__filter-group {
    min-width: 16rem;
    flex: 0 1 auto;
  }
}
@media (max-width: 544px) {
  .no-notification-page__filter-group {
    min-width: none;
    width: 100%;
  }
}
.no-notification-page__filter-group .no-select-wrapper {
  width: 100%;
}
.no-notification-page__filter-label {
  font-size: clamp(1.2rem, 0.0647249191vw + 1.1757281553rem, 1.3rem);
  font-weight: 600;
  color: var(--clr-text-secondary);
}
.no-notification-page__list {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-bottom: 2.4rem;
}
.no-notification-page__item {
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
  padding: 1.2rem;
  background: var(--clr-bg-elevated);
  border: 0.1rem solid var(--clr-border-secondary);
  border-radius: 0.8rem;
  transition: all 0.2s ease;
  position: relative;
}
@media (max-width: 768px) {
  .no-notification-page__item {
    padding: 1.4rem;
    gap: 1.4rem;
  }
}
.no-notification-page__item:hover {
  border-color: var(--clr-border-primary);
  background: var(--clr-bg-base);
}
.no-notification-page__item--unread {
  background: var(--clr-bg-elevated);
  border-left: 0.3rem solid var(--clr-primary-500);
  padding-left: 1rem;
}
.no-notification-page__item--unread::before {
  content: "";
  position: absolute;
  left: 0.4rem;
  top: 1.6rem;
  width: 0.6rem;
  height: 0.6rem;
  background: var(--clr-primary-500);
  border-radius: 50%;
}
.no-notification-page__item-link-area {
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.2s ease;
}
@media (max-width: 768px) {
  .no-notification-page__item-link-area {
    gap: 1.4rem;
  }
}
.no-notification-page__item-link-area:hover {
  opacity: 0.8;
}
.no-notification-page__item-link-area--no-link {
  cursor: default;
  pointer-events: none;
}
.no-notification-page__item-link-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  color: var(--clr-text-tertiary);
  font-size: clamp(1.2rem, 0.0647249191vw + 1.1757281553rem, 1.3rem);
  transition: all 0.2s ease;
}
@media (max-width: 768px) {
  .no-notification-page__item-link-icon {
    width: 2.8rem;
    height: 2.8rem;
  }
}
.no-notification-page__item-link-area:hover .no-notification-page__item-link-icon {
  color: var(--clr-primary-600);
  transform: translateX(0.2rem);
}
.no-notification-page__item-icon {
  flex-shrink: 0;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 0.6rem;
  background: var(--clr-primary-100);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-primary-600);
  font-size: clamp(1.4rem, 0.1294498382vw + 1.3514563107rem, 1.6rem);
}
@media (max-width: 768px) {
  .no-notification-page__item-icon {
    width: 3.6rem;
    height: 3.6rem;
  }
}
.no-notification-page__item-icon--notice {
  background: var(--clr-info-100);
  color: var(--clr-info-600);
}
.no-notification-page__item-icon--claim {
  background: var(--clr-danger-100);
  color: var(--clr-danger-600);
}
.no-notification-page__item-icon--order {
  background: var(--clr-success-100);
  color: var(--clr-success-600);
}
.no-notification-page__item-content {
  flex: 1;
  min-width: 0;
}
.no-notification-page__item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.6rem;
}
.no-notification-page__item-type {
  font-size: clamp(1rem, 0.0647249191vw + 0.9757281553rem, 1.1rem);
  font-weight: 500;
  color: var(--clr-text-tertiary);
  padding: 0.2rem 0.6rem;
  background: var(--clr-bg-base);
  border-radius: 0.4rem;
}
.no-notification-page__item-time {
  font-size: clamp(1rem, 0.0647249191vw + 0.9757281553rem, 1.1rem);
  color: var(--clr-text-tertiary);
}
.no-notification-page__item-title {
  font-size: clamp(1.4rem, 0.0647249191vw + 1.3757281553rem, 1.5rem);
  font-weight: 600;
  color: var(--clr-text-primary);
  margin-bottom: 0.4rem;
  line-height: 1.4;
}
.no-notification-page__item-message {
  font-size: clamp(1.2rem, 0.0647249191vw + 1.1757281553rem, 1.3rem);
  color: var(--clr-text-secondary);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.no-notification-page__item-actions {
  display: flex;
  flex-direction: row;
  gap: 0.6rem;
  flex-shrink: 0;
  align-items: flex-start;
  padding-left: 1.2rem;
  border-left: 0.1rem solid var(--clr-border-secondary);
}
@media (max-width: 768px) {
  .no-notification-page__item-actions {
    padding-left: 1.4rem;
  }
}
.no-notification-page__read-form {
  margin: 0;
}
.no-notification-page__read-btn {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 1rem;
  border-radius: 0.6rem;
  border: 0.1rem solid var(--clr-border-secondary);
  background: var(--clr-bg-base);
  color: var(--clr-text-secondary);
  transition: all 0.2s ease;
  cursor: pointer;
  font-size: clamp(1.2rem, 0.0647249191vw + 1.1757281553rem, 1.3rem);
  font-weight: 500;
  white-space: nowrap;
}
@media (max-width: 768px) {
  .no-notification-page__read-btn {
    padding: 0.7rem 1.2rem;
    font-size: clamp(1.3rem, 0.0647249191vw + 1.2757281553rem, 1.4rem);
  }
}
.no-notification-page__read-btn i {
  font-size: clamp(1.2rem, 0.0647249191vw + 1.1757281553rem, 1.3rem);
  transition: transform 0.2s ease;
}
.no-notification-page__read-btn:hover {
  background: var(--clr-success-500);
  border-color: var(--clr-success-500);
  color: var(--clr-base-white);
  transform: translateY(-0.1rem);
  box-shadow: 0 0.2rem 0.4rem rgba(34, 197, 94, 0.3);
}
.no-notification-page__read-btn:hover i {
  transform: scale(1.1);
}
.no-notification-page__read-btn:active {
  transform: translateY(0);
}
.no-notification-page__read-btn-text {
  font-size: inherit;
  font-weight: inherit;
}
.no-notification-page__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6.4rem 2.4rem;
  text-align: center;
}
.no-notification-page__empty-icon {
  width: 6.4rem;
  height: 6.4rem;
  border-radius: 50%;
  background: var(--clr-bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.6rem;
  color: var(--clr-text-tertiary);
  font-size: clamp(2.4rem, 0.2588996764vw + 2.3029126214rem, 2.8rem);
}
.no-notification-page__empty-text {
  font-size: clamp(1.4rem, 0.1294498382vw + 1.3514563107rem, 1.6rem);
  color: var(--clr-text-secondary);
}
.no-notification-page__pagination {
  margin-top: 2.4rem;
}

/**
 * Notification Dropdown Styles
 * 헤더 알림 드롭다운 스타일
 */
.no-header__notification-tabs {
  display: flex;
  gap: 0.4rem;
  padding: 1.2rem;
  border-bottom: 0.1rem solid var(--clr-border-secondary);
  background: var(--clr-bg-elevated);
  flex-shrink: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.no-header__notification-tabs::-webkit-scrollbar {
  display: none;
}
@media (max-width: 544px) {
  .no-header__notification-tabs {
    padding: 1rem 0.8rem;
    gap: 0.3rem;
  }
}

.no-header__notification-tab {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 1.2rem;
  background: transparent;
  border: 0.1rem solid transparent;
  border-radius: 0.8rem;
  color: var(--clr-text-secondary);
  font-size: clamp(1.3rem, 0.0647249191vw + 1.2757281553rem, 1.4rem);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  position: relative;
  flex-shrink: 0;
  font-family: inherit;
}
@media (max-width: 544px) {
  .no-header__notification-tab {
    padding: 0.6rem 0.8rem;
    font-size: 1.2rem;
    gap: 0.4rem;
  }
}
.no-header__notification-tab i {
  font-size: clamp(1.3rem, 0.0647249191vw + 1.2757281553rem, 1.4rem);
  flex-shrink: 0;
}
@media (max-width: 544px) {
  .no-header__notification-tab i {
    font-size: 1.2rem;
  }
}
.no-header__notification-tab > span:not(.no-header__notification-tab-badge) {
  position: relative;
  display: inline-block;
}
.no-header__notification-tab:hover:not(.no-header__notification-tab--active) {
  background: var(--clr-bg-secondary);
  color: var(--clr-text-primary);
}
.no-header__notification-tab--active {
  background: var(--clr-primary-100);
  color: var(--clr-primary-700);
  border-color: var(--clr-primary-300);
}
@media (max-width: 544px) {
  .no-header__notification-tab--active {
    background: var(--clr-primary-50);
  }
}

.no-header__notification-tab-badge {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  min-width: 1.4rem;
  height: 1.4rem;
  padding: 0 0.5rem;
  background: var(--clr-primary-400);
  color: var(--clr-base-white);
  font-size: 0.85rem;
  font-weight: 700;
  border-radius: 0.7rem;
  line-height: 1.4rem;
  text-align: center;
  box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.2);
  z-index: 2;
  white-space: nowrap;
  transform: translate(25%, -25%);
}
@media (max-width: 544px) {
  .no-header__notification-tab-badge {
    min-width: 1.2rem;
    height: 1.2rem;
    font-size: 0.75rem;
    line-height: 1.2rem;
    padding: 0 0.25rem;
    top: -0.1rem;
    right: -0.1rem;
  }
}
.no-header__notification-tab-badge[data-count="99+"] {
  padding: 0 0.25rem;
  font-size: 0.8rem;
}
@media (max-width: 544px) {
  .no-header__notification-tab-badge[data-count="99+"] {
    font-size: 0.7rem;
    padding: 0 0.2rem;
  }
}
.no-header__notification-tab-badge--visible {
  display: inline-flex;
}
.no-header__notification-tab-badge--hidden {
  display: none;
}

.no-header__notification-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0.6rem;
  color: var(--clr-text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
@media (max-width: 544px) {
  .no-header__notification-close {
    width: 2.8rem;
    height: 2.8rem;
  }
}
.no-header__notification-close i {
  font-size: 1.6rem;
}
@media (max-width: 544px) {
  .no-header__notification-close i {
    font-size: 1.4rem;
  }
}
.no-header__notification-close:hover {
  background: var(--clr-bg-secondary);
  color: var(--clr-text-primary);
}
.no-header__notification-close:active {
  transform: scale(0.95);
}

.no-card {
  background-color: var(--clr-bg-elevated);
  border-radius: 0.8rem;
  border: 0.1rem solid var(--clr-border-secondary);
  margin-bottom: 2.4rem;
  overflow: hidden;
  box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.05);
}
@media (max-width: 768px) {
  .no-card {
    margin-bottom: 3.2rem;
  }
}
.no-card__header {
  padding: 20px 24px;
  border-bottom: 0.1rem solid var(--clr-border-secondary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  background-color: var(--clr-bg-elevated);
}
.no-card__title {
  font-size: 18px;
  font-weight: 600;
  color: var(--clr-text-primary);
  margin: 0;
  line-height: 1.4;
}
.no-card__badge {
  display: inline-block;
  padding: 0.4rem 1.2rem;
  background-color: var(--clr-bg-tertiary);
  color: var(--clr-text-secondary);
  border-radius: 1.2rem;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.5;
}
.no-card__body {
  padding: 0;
  background-color: var(--clr-bg-elevated);
}
.no-card__empty {
  padding: 6rem 2.4rem;
  text-align: center;
}
.no-card__empty-text {
  color: var(--clr-text-tertiary);
  font-size: 1.4rem;
  margin: 0;
  line-height: 1.6;
}
.no-card__empty-link {
  color: var(--clr-primary-600);
  text-decoration: none;
  font-weight: 500;
  margin-left: 0.4rem;
  transition: color 0.2s;
}
.no-card__empty-link:hover {
  color: var(--clr-primary-700);
  text-decoration: underline;
}
.no-card--attachments .no-card__body {
  padding: 2.4rem;
}

.no-attachments-group {
  margin-bottom: 2.4rem;
}
.no-attachments-group:last-child {
  margin-bottom: 0;
}
.no-attachments-group__header {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1.2rem;
  padding-bottom: 1rem;
  border-bottom: 0.1rem solid var(--clr-border-secondary);
}
.no-attachments-group__title {
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--clr-text-primary);
}
.no-attachments-group__count {
  font-size: 1.4rem;
  color: var(--clr-text-secondary);
  font-weight: 400;
}
.no-attachments-group__list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.no-attachment-item {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.2rem 1.6rem;
  background-color: var(--clr-bg-secondary);
  border: 0.1rem solid var(--clr-border-primary);
  border-radius: 0.6rem;
  text-decoration: none;
  color: var(--clr-text-primary);
  transition: all 0.2s ease;
}
.no-attachment-item:hover {
  background-color: var(--clr-bg-tertiary);
  border-color: var(--clr-primary-400);
  transform: translateY(-0.1rem);
  box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.05);
}
.no-attachment-item:hover .no-attachment-item__action {
  color: var(--clr-primary-600);
  transform: scale(1.1);
}
.no-attachment-item__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  background-color: var(--clr-bg-tertiary);
  border-radius: 0.6rem;
  flex-shrink: 0;
  font-size: 1.8rem;
  color: var(--clr-primary-600);
}
.no-attachment-item__icon i {
  font-size: 1.8rem;
}
.no-attachment-item__info {
  flex: 1;
  min-width: 0;
}
.no-attachment-item__name {
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--clr-text-primary);
  margin-bottom: 0.4rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.4;
}
.no-attachment-item__meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 1.2rem;
  color: var(--clr-text-secondary);
}
.no-attachment-item__size {
  font-weight: 500;
}
.no-attachment-item__type {
  padding: 0.2rem 0.6rem;
  background-color: var(--clr-bg-tertiary);
  border-radius: 0.3rem;
  font-weight: 500;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.no-attachment-item__action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  color: var(--clr-text-secondary);
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.no-attachment-item__action i {
  font-size: 1.6rem;
}

.no-page-loader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px) saturate(180%);
  -webkit-backdrop-filter: blur(8px) saturate(180%);
  animation: loaderFadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity;
  pointer-events: all;
}
@media (prefers-color-scheme: dark) {
  .no-page-loader {
    background: rgba(0, 0, 0, 0.75);
  }
}
[data-theme=dark] .no-page-loader {
  background: rgba(0, 0, 0, 0.75);
}
.no-page-loader-inner {
  position: relative;
  width: 8rem;
  height: 8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
}
@media (max-width: 544px) {
  .no-page-loader-inner {
    width: 7rem;
    height: 7rem;
    gap: 1.4rem;
  }
}
.no-page-loader-inner svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0.4rem 1.2rem rgba(0, 0, 0, 0.15));
  animation: loaderPulse 2s ease-in-out infinite;
}
@media (prefers-color-scheme: dark) {
  .no-page-loader-inner svg {
    filter: drop-shadow(0 0.4rem 1.2rem rgba(0, 0, 0, 0.4));
  }
}
[data-theme=dark] .no-page-loader-inner svg {
  filter: drop-shadow(0 0.4rem 1.2rem rgba(0, 0, 0, 0.4));
}
.no-page-loader-inner .no-page-loader__message {
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--clr-text-primary);
  text-align: center;
  margin-top: 0.8rem;
  opacity: 0.9;
  animation: loaderMessageFade 0.3s ease-in-out;
  white-space: nowrap;
}
@media (max-width: 544px) {
  .no-page-loader-inner .no-page-loader__message {
    font-size: 1.3rem;
  }
}
.no-page-loader-inner::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10rem;
  height: 10rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 118, 203, 0.1) 0%, transparent 70%);
  transform: translate(-50%, -50%);
  animation: loaderRipple 2s ease-in-out infinite;
  pointer-events: none;
}
@media (max-width: 544px) {
  .no-page-loader-inner::before {
    width: 9rem;
    height: 9rem;
  }
}
@media (prefers-color-scheme: dark) {
  .no-page-loader-inner::before {
    background: radial-gradient(circle, rgba(10, 151, 237, 0.2) 0%, transparent 70%);
  }
}
[data-theme=dark] .no-page-loader-inner::before {
  background: radial-gradient(circle, rgba(10, 151, 237, 0.2) 0%, transparent 70%);
}
.no-page-loader[aria-hidden=true] {
  display: none;
}

@keyframes loaderFadeIn {
  from {
    opacity: 0;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
  }
  to {
    opacity: 1;
    backdrop-filter: blur(8px) saturate(180%);
    -webkit-backdrop-filter: blur(8px) saturate(180%);
  }
}
@keyframes loaderPulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(0.98);
  }
}
@keyframes loaderRipple {
  0% {
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(0.8);
  }
  50% {
    opacity: 0.3;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.2);
  }
}
@keyframes loaderMessageFade {
  from {
    opacity: 0;
    transform: translateY(-0.4rem);
  }
  to {
    opacity: 0.9;
    transform: translateY(0);
  }
}
body.loading {
  overflow: hidden;
  position: relative;
}
@media (max-width: 544px) {
  body.loading {
    position: fixed;
    width: 100%;
    height: 100%;
  }
}

.no-prev-next {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
  margin-top: 2.4rem;
}
.no-prev-next__item {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.4rem;
  font-size: clamp(1.3rem, 0.0647249191vw + 1.2757281553rem, 1.4rem);
  font-weight: 500;
  color: var(--clr-text-secondary);
  text-decoration: none;
  border: 0.1rem solid var(--clr-border-primary);
  border-radius: 0.8rem;
  background-color: var(--clr-bg-elevated);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  flex: 1;
  justify-content: center;
  position: relative;
}
@media (max-width: 544px) {
  .no-prev-next__item {
    gap: 0.8rem;
    padding: 1rem 1.6rem;
    flex: 0 1 auto;
  }
}
@media (max-width: 768px) {
  .no-prev-next__item:hover:not([disabled]) {
    background-color: var(--clr-primary-50);
    border-color: var(--clr-primary-400);
    color: var(--clr-primary-700);
    transform: translateY(-0.15rem) scale(1.02);
    box-shadow: 0 0.3rem 0.6rem rgba(37, 99, 235, 0.15);
  }
  .no-prev-next__item:hover:not([disabled]) i {
    transform: scale(1.1);
  }
}
.no-prev-next__item:active:not([disabled]) {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.1);
}
.no-prev-next__item:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.25);
}
.no-prev-next__item i {
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.no-prev-next__item--prev i {
  order: -1;
}
.no-prev-next__item--next i {
  order: 1;
}
.no-prev-next__item[disabled], .no-prev-next__item:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
@media (max-width: 544px) {
  .no-prev-next__item {
    padding: 0.8rem 1.2rem;
    font-size: clamp(1.3rem, 0vw + 1.3rem, 1.3rem);
  }
}

.no-salesinfo-page__content {
  padding: 0;
}
.no-salesinfo-page__grid {
  display: grid;
  margin-bottom: 2rem;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}
@media (max-width: 768px) {
  .no-salesinfo-page__grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

.no-salesinfo-card {
  transition: all 0.2s ease;
  border: 1px solid var(--clr-border-primary);
  border-radius: 0.8rem;
  background: var(--clr-bg-elevated);
  overflow: hidden;
}
.no-salesinfo-card:hover {
  border-color: var(--clr-border-secondary);
  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.04);
}
@media (max-width: 544px) {
  .no-salesinfo-card--full-width {
    grid-column: 1/-1;
  }
}
.no-salesinfo-card .no-card__header {
  padding: 1.5rem 2rem;
  background: var(--clr-bg-secondary);
  border-bottom: 1px solid var(--clr-border-primary);
}
.no-salesinfo-card .no-card__title {
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--clr-text-primary);
  margin: 0;
}
.no-salesinfo-card .no-card__body {
  padding: 2rem;
}
.no-salesinfo-card__header-content {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.no-salesinfo-card__icon {
  font-size: 1.4rem;
  color: var(--clr-text-secondary);
  width: 2.2rem;
  height: 2.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.no-salesinfo-card__content--grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
.no-salesinfo-card__content--grid .no-form-field {
  margin-bottom: 0;
}
@media (max-width: 768px) {
  .no-salesinfo-card__content--grid .no-form-field--full-width {
    grid-column: 1/-1;
  }
}

.no-dashboard-filters {
  margin-bottom: 2.4rem;
  background: var(--clr-bg-elevated);
  border: 0.1rem solid var(--clr-border-primary);
  border-radius: 1.6rem;
  padding: 2.4rem;
  transition: all 0.2s ease;
}
@media (max-width: 768px) {
  .no-dashboard-filters {
    margin-bottom: 2rem;
    padding: 2rem;
  }
}
@media (max-width: 544px) {
  .no-dashboard-filters {
    margin-bottom: 2rem;
    padding: 1.6rem;
    border-radius: 1.2rem;
  }
}
.no-dashboard-filters__wrapper {
  width: 100%;
}
.no-dashboard-filters__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: flex-end;
}
@media (max-width: 768px) {
  .no-dashboard-filters__grid {
    gap: 1.6rem;
  }
}
@media (max-width: 544px) {
  .no-dashboard-filters__grid {
    gap: 1.2rem;
  }
}
.no-dashboard-filters__item {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 1 1 auto;
  min-width: 18rem;
}
@media (max-width: 768px) {
  .no-dashboard-filters__item {
    min-width: 0;
  }
}
@media (max-width: 544px) {
  .no-dashboard-filters__item {
    flex: 1 1 calc(50% - 0.6rem);
    gap: 0.8rem;
  }
}
@media (max-width: 450px) {
  .no-dashboard-filters__item {
    flex: 1 1 100%;
  }
}
.no-dashboard-filters__actions {
  display: flex;
  gap: 0.8rem;
  flex: 0 0 auto;
}
@media (max-width: 768px) {
  .no-dashboard-filters__actions {
    flex: 1 1 100%;
    justify-content: flex-end;
  }
}
@media (max-width: 544px) {
  .no-dashboard-filters__actions {
    flex: 1 1 100%;
  }
}
.no-dashboard-filters__actions .no-btn {
  min-width: 11rem;
}
@media (max-width: 768px) {
  .no-dashboard-filters__actions .no-btn {
    flex: 0 0 auto;
    min-width: 10rem;
  }
}
@media (max-width: 544px) {
  .no-dashboard-filters__actions .no-btn {
    flex: 1;
  }
}
.no-dashboard-filters__label {
  font-size: clamp(1.2rem, 0.0647249191vw + 1.1757281553rem, 1.3rem);
  font-weight: 600;
  color: var(--clr-text-secondary);
  margin-bottom: 0;
}
.no-dashboard-filters select {
  width: 100%;
}

.no-dashboard-stats {
  margin-bottom: 3.2rem;
}
@media (max-width: 768px) {
  .no-dashboard-stats {
    margin-bottom: 2.4rem;
  }
}
.no-dashboard-stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}
@media (max-width: 1640px) {
  .no-dashboard-stats__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .no-dashboard-stats__grid {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }
}
.no-dashboard-stats__card {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  padding: 2.4rem;
  background: var(--clr-bg-elevated);
  border: 0.1rem solid var(--clr-border-primary);
  border-radius: 1.6rem;
  transition: all 0.2s ease;
}
.no-dashboard-stats__card:hover {
  border-color: var(--clr-primary-400);
  box-shadow: 0 0.4rem 1.2rem rgba(37, 99, 235, 0.1);
  transform: translateY(-0.2rem);
}
@media (max-width: 768px) {
  .no-dashboard-stats__card {
    padding: 1.8rem;
    gap: 1.2rem;
    border-radius: 1.2rem;
  }
}
@media (max-width: 544px) {
  .no-dashboard-stats__card {
    padding: 1.4rem;
    gap: 1rem;
    border-radius: 1rem;
  }
}
.no-dashboard-stats__card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 6rem;
  height: 6rem;
  border-radius: 1.4rem;
  background: var(--clr-bg-tertiary);
  color: var(--clr-text-secondary);
  font-size: clamp(2.2rem, 0.1294498382vw + 2.1514563107rem, 2.4rem);
  flex-shrink: 0;
  transition: all 0.2s ease;
}
@media (max-width: 768px) {
  .no-dashboard-stats__card-icon {
    width: 5rem;
    height: 5rem;
    font-size: clamp(2rem, 0.1294498382vw + 1.9514563107rem, 2.2rem);
  }
}
@media (max-width: 544px) {
  .no-dashboard-stats__card-icon {
    width: 4.4rem;
    height: 4.4rem;
    border-radius: 1rem;
    font-size: clamp(1.8rem, 0.1294498382vw + 1.7514563107rem, 2rem);
  }
}
.no-dashboard-stats__card-icon--primary {
  background: var(--clr-primary-50);
  color: var(--clr-primary-600);
}
.no-dashboard-stats__card-icon--success {
  background: var(--clr-success-50);
  color: var(--clr-success-600);
}
.no-dashboard-stats__card-icon--warning {
  background: var(--clr-warning-50);
  color: var(--clr-warning-600);
}
.no-dashboard-stats__card-content {
  flex: 1;
  min-width: 0;
}
.no-dashboard-stats__card-label {
  font-size: clamp(1.2rem, 0.0647249191vw + 1.1757281553rem, 1.3rem);
  font-weight: 500;
  color: var(--clr-text-secondary);
  margin-bottom: 0.6rem;
  line-height: 1.4;
}
@media (max-width: 544px) {
  .no-dashboard-stats__card-label {
    font-size: clamp(1.1rem, 0.0647249191vw + 1.0757281553rem, 1.2rem);
    margin-bottom: 0.4rem;
  }
}
.no-dashboard-stats__card-value {
  font-size: clamp(2.2rem, 0.2588996764vw + 2.1029126214rem, 2.6rem);
  font-weight: 700;
  color: var(--clr-text-primary);
  line-height: 1.2;
  word-break: break-word;
}
@media (max-width: 768px) {
  .no-dashboard-stats__card-value {
    font-size: clamp(1.8rem, 0.2588996764vw + 1.7029126214rem, 2.2rem);
  }
}
@media (max-width: 544px) {
  .no-dashboard-stats__card-value {
    font-size: clamp(1.6rem, 0.2588996764vw + 1.5029126214rem, 2rem);
  }
}

.no-dashboard-charts {
  margin-bottom: 3.2rem;
}
@media (max-width: 768px) {
  .no-dashboard-charts {
    margin-bottom: 2.4rem;
  }
}
.no-dashboard-charts__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.4rem;
}
@media (max-width: 1024px) {
  .no-dashboard-charts__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .no-dashboard-charts__grid {
    gap: 2rem;
  }
}
@media (max-width: 544px) {
  .no-dashboard-charts__grid {
    grid-template-columns: 1fr;
    gap: 1.6rem;
  }
}

.no-dashboard-chart {
  position: relative;
  width: 100%;
  height: 35rem;
  padding: 2.4rem;
  min-height: 35rem;
}
@media (max-width: 1024px) {
  .no-dashboard-chart {
    height: 32rem;
    padding: 2rem;
    min-height: 32rem;
  }
}
@media (max-width: 768px) {
  .no-dashboard-chart {
    height: 30rem;
    padding: 1.6rem;
    min-height: 30rem;
  }
}
@media (max-width: 544px) {
  .no-dashboard-chart {
    height: 28rem;
    padding: 1.2rem;
    min-height: 28rem;
  }
}
.no-dashboard-chart.loading::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  z-index: 10;
  border-radius: 0.8rem;
}
.no-dashboard-chart.loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 3.2rem;
  height: 3.2rem;
  border: 0.3rem solid var(--clr-border-secondary);
  border-top-color: var(--clr-primary-600);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  z-index: 11;
}
.no-dashboard-chart canvas {
  max-width: 100%;
  max-height: 100%;
}

@keyframes spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
.no-dashboard-table-view {
  display: block;
}
@media (max-width: 768px) {
  .no-dashboard-table-view {
    display: none;
  }
}

.no-dashboard-card-view {
  display: none;
}
@media (max-width: 768px) {
  .no-dashboard-card-view {
    display: block;
  }
}

.no-dashboard-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.no-dashboard-table {
  min-width: 100%;
  white-space: nowrap;
}
.no-dashboard-table .no-table__cell--sticky {
  position: sticky;
  left: 0;
  background: var(--clr-bg-elevated);
  z-index: 2;
  font-weight: 600;
  box-shadow: 0.2rem 0 0.4rem rgba(0, 0, 0, 0.05);
}
.no-dashboard-table .no-table__cell--sticky::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 0.1rem;
  background: var(--clr-border-primary);
}
.no-dashboard-table .no-table__cell--number {
  text-align: right;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.no-dashboard-table .no-table__cell--total {
  background: var(--clr-bg-tertiary);
  border-left: 0.2rem solid var(--clr-primary-400);
}
.no-dashboard-table .no-table__header .no-table__cell--sticky {
  background: var(--clr-bg-secondary);
  z-index: 3;
}

.no-dashboard-card {
  background: var(--clr-bg-secondary);
  border: 0.1rem solid var(--clr-border-primary);
  border-radius: 1rem;
  padding: 1.4rem;
  margin-bottom: 1.2rem;
  transition: all 0.2s ease;
}
.no-dashboard-card:last-child {
  margin-bottom: 0;
}
.no-dashboard-card:hover {
  border-color: var(--clr-border-secondary);
  box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.06);
}
.no-dashboard-card__header {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.4rem;
  padding-bottom: 1.2rem;
  border-bottom: 0.1rem solid var(--clr-border-primary);
}
.no-dashboard-card__title {
  font-size: clamp(1.5rem, 0.0647249191vw + 1.4757281553rem, 1.6rem);
  font-weight: 700;
  color: var(--clr-text-primary);
  margin: 0;
  line-height: 1.4;
}
.no-dashboard-card__total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--clr-bg-elevated);
  padding: 1rem 1.2rem;
  border-radius: 0.6rem;
}
.no-dashboard-card__total-label {
  font-size: clamp(1.2rem, 0.0647249191vw + 1.1757281553rem, 1.3rem);
  font-weight: 500;
  color: var(--clr-text-secondary);
}
.no-dashboard-card__total-value {
  font-size: clamp(1.6rem, 0.1294498382vw + 1.5514563107rem, 1.8rem);
  font-weight: 700;
  color: var(--clr-primary-600);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.no-dashboard-card__info {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-bottom: 1.4rem;
  padding-bottom: 1.2rem;
  border-bottom: 0.1rem solid var(--clr-border-secondary);
}
@media (max-width: 544px) {
  .no-dashboard-card__info {
    gap: 0.6rem;
    margin-bottom: 1.2rem;
    padding-bottom: 1rem;
  }
}
.no-dashboard-card__info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.no-dashboard-card__info-label {
  font-size: clamp(1.2rem, 0.0647249191vw + 1.1757281553rem, 1.3rem);
  font-weight: 500;
  color: var(--clr-text-secondary);
}
.no-dashboard-card__info-value {
  font-size: clamp(1.3rem, 0.0647249191vw + 1.2757281553rem, 1.4rem);
  font-weight: 600;
  color: var(--clr-text-primary);
}
.no-dashboard-card__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
@media (max-width: 544px) {
  .no-dashboard-card__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.8rem;
  }
}
.no-dashboard-detail-content .no-dashboard-card__grid {
  grid-template-columns: 1fr;
  gap: 1.2rem;
}
@media (max-width: 544px) {
  .no-dashboard-detail-content .no-dashboard-card__grid {
    gap: 1rem;
  }
}
.no-dashboard-card__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 1rem 0.8rem;
  background: var(--clr-bg-elevated);
  border: 0.1rem solid var(--clr-border-secondary);
  border-radius: 0.6rem;
  transition: all 0.2s ease;
}
.no-dashboard-card__item:hover {
  background: var(--clr-bg-primary);
  border-color: var(--clr-primary-300);
  transform: translateY(-0.1rem);
}
.no-dashboard-detail-content .no-dashboard-card__item {
  align-items: flex-start;
  padding: 1.2rem;
  gap: 0.8rem;
}
@media (max-width: 544px) {
  .no-dashboard-detail-content .no-dashboard-card__item {
    padding: 1rem;
    gap: 0.6rem;
  }
}
.no-dashboard-card__month {
  font-size: clamp(1.1rem, 0.0647249191vw + 1.0757281553rem, 1.2rem);
  font-weight: 600;
  color: var(--clr-text-secondary);
}
.no-dashboard-card__amount {
  font-size: clamp(1.3rem, 0.0647249191vw + 1.2757281553rem, 1.4rem);
  font-weight: 700;
  color: var(--clr-text-primary);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.no-dashboard-card__status {
  margin-top: 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.no-dashboard-card__item-header {
  margin-bottom: 0.8rem;
}
.no-dashboard-card__item-name {
  font-size: clamp(1.3rem, 0.0647249191vw + 1.2757281553rem, 1.4rem);
  font-weight: 600;
  color: var(--clr-text-primary);
  line-height: 1.4;
  word-break: break-word;
}
.no-dashboard-card__item-details {
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
  margin-bottom: 0.8rem;
}
@media (max-width: 544px) {
  .no-dashboard-card__item-details {
    gap: 1rem;
  }
}
.no-dashboard-card__item-detail {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 1 1 auto;
  min-width: 0;
}
.no-dashboard-card__item-label {
  font-size: clamp(1rem, 0.0647249191vw + 0.9757281553rem, 1.1rem);
  font-weight: 500;
  color: var(--clr-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.no-dashboard-card__item-value {
  font-size: clamp(1.3rem, 0.0647249191vw + 1.2757281553rem, 1.4rem);
  font-weight: 600;
  color: var(--clr-text-primary);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.no-dashboard-card__item-value--amount {
  color: var(--clr-primary-600);
  font-weight: 700;
  font-size: clamp(1.4rem, 0.0647249191vw + 1.3757281553rem, 1.5rem);
}
.no-dashboard-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1.2rem;
  padding-top: 1.2rem;
  border-top: 0.1rem solid var(--clr-border-primary);
}
.no-dashboard-card__footer-label {
  font-size: clamp(1.3rem, 0.0647249191vw + 1.2757281553rem, 1.4rem);
  font-weight: 600;
  color: var(--clr-text-secondary);
}
.no-dashboard-card__footer-value {
  font-size: clamp(1.6rem, 0.1294498382vw + 1.5514563107rem, 1.8rem);
  font-weight: 700;
  color: var(--clr-primary-600);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.no-dashboard-card__empty {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--clr-text-secondary);
  font-size: clamp(1.2rem, 0.0647249191vw + 1.1757281553rem, 1.3rem);
  font-style: italic;
}

.no-dashboard-detail-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}
@media (max-width: 544px) {
  .no-dashboard-detail-wrapper {
    gap: 1.2rem;
  }
}

.no-dashboard-detail-section {
  border: 0.1rem solid var(--clr-border-primary);
  border-radius: 0.8rem;
  overflow: hidden;
  transition: all 0.2s ease;
}
.no-dashboard-detail-section:hover {
  border-color: var(--clr-border-secondary);
}
.no-dashboard-detail-section.is-expanded .no-dashboard-detail-header {
  background: var(--clr-bg-tertiary);
}
.no-dashboard-detail-section.is-expanded .no-dashboard-detail-icon {
  transform: rotate(180deg);
}
.no-dashboard-detail-section .no-dashboard-detail-header:hover {
  background: var(--clr-bg-secondary);
}

.no-dashboard-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1.6rem 2rem;
  background: var(--clr-bg-elevated);
  gap: 1.6rem;
  flex-wrap: nowrap;
}
@media (max-width: 768px) {
  .no-dashboard-detail-header {
    padding: 1.4rem 1.6rem;
    gap: 1.2rem;
  }
}
@media (max-width: 544px) {
  .no-dashboard-detail-header {
    padding: 1.2rem 1.4rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
}
.no-dashboard-detail-header-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  gap: 1.6rem;
  flex-wrap: nowrap;
}
@media (max-width: 768px) {
  .no-dashboard-detail-header-toggle {
    gap: 1.2rem;
  }
}
@media (max-width: 544px) {
  .no-dashboard-detail-header-toggle {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
}
.no-dashboard-detail-header-toggle:hover {
  opacity: 0.8;
}
.no-dashboard-detail-header-left {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1 1 auto;
  min-width: 0;
}
@media (max-width: 544px) {
  .no-dashboard-detail-header-left {
    width: 100%;
    gap: 0.8rem;
  }
}
.no-dashboard-detail-header-right {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-shrink: 0;
}
@media (max-width: 544px) {
  .no-dashboard-detail-header-right {
    width: 100%;
    justify-content: space-between;
    gap: 1rem;
  }
}

.no-dashboard-detail-icon {
  flex-shrink: 0;
  font-size: 1.4rem;
  color: var(--clr-text-secondary);
  transition: transform 0.3s ease;
}

.no-dashboard-detail-name {
  font-size: clamp(1.3rem, 0.1941747573vw + 1.227184466rem, 1.6rem);
  font-weight: 600;
  color: var(--clr-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}
@media (max-width: 544px) {
  .no-dashboard-detail-name {
    white-space: normal;
    word-break: break-word;
  }
}

.no-dashboard-detail-count {
  font-size: clamp(1.1rem, 0.1294498382vw + 1.0514563107rem, 1.3rem);
  color: var(--clr-text-secondary);
  flex-shrink: 0;
  white-space: nowrap;
}

.no-dashboard-detail-subtotal {
  font-size: clamp(1.2rem, 0.1294498382vw + 1.1514563107rem, 1.4rem);
  color: var(--clr-text-secondary);
  flex-shrink: 0;
  white-space: nowrap;
  display: flex;
  align-items: center;
}
@media (max-width: 544px) {
  .no-dashboard-detail-subtotal {
    white-space: normal;
  }
}
.no-dashboard-detail-subtotal strong {
  color: var(--clr-primary-600);
  font-weight: 700;
  font-size: clamp(1.4rem, 0.1294498382vw + 1.3514563107rem, 1.6rem);
  margin-left: 0.4rem;
}
@media (max-width: 544px) {
  .no-dashboard-detail-subtotal strong {
    font-size: clamp(1.5rem, 0.0647249191vw + 1.4757281553rem, 1.6rem);
  }
}

.no-dashboard-detail-export-btn {
  flex-shrink: 0;
  white-space: nowrap;
  margin-left: auto;
}
@media (max-width: 544px) {
  .no-dashboard-detail-export-btn {
    margin-left: 0;
  }
}

.no-dashboard-detail-content {
  border-top: 0.1rem solid var(--clr-border-primary);
  padding: 1.6rem;
  background: var(--clr-bg-secondary);
  transition: all 0.3s ease;
}
@media (max-width: 768px) {
  .no-dashboard-detail-content {
    padding: 1.2rem;
  }
}
@media (max-width: 544px) {
  .no-dashboard-detail-content {
    padding: 1rem;
  }
}

.no-dashboard-detail-content .no-dashboard-table tbody .no-table__row--order-separator {
  border-bottom: 0.1rem solid var(--clr-border-primary);
}
.no-dashboard-detail-content .no-dashboard-table tbody .no-table__row--last-order {
  border-bottom: none;
}

.no-dashboard-detail-card-view {
  display: none;
}
@media (max-width: 768px) {
  .no-dashboard-detail-card-view {
    display: block;
  }
}

.no-dashboard-detail-card-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
@media (max-width: 544px) {
  .no-dashboard-detail-card-wrapper {
    gap: 1rem;
  }
}

.no-dashboard-detail-order-card {
  background: var(--clr-bg-elevated);
  border: 0.1rem solid var(--clr-border-primary);
  border-radius: 0.8rem;
  overflow: hidden;
  transition: all 0.2s ease;
}
.no-dashboard-detail-order-card:hover {
  border-color: var(--clr-border-secondary);
  box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.06);
}
.no-dashboard-detail-order-card--separator {
  margin-bottom: 1.2rem;
  padding-bottom: 1.2rem;
  border-bottom: 0.2rem solid var(--clr-border-primary);
}
@media (max-width: 544px) {
  .no-dashboard-detail-order-card--separator {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
  }
}
.no-dashboard-detail-order-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.2rem 1.4rem;
  background: var(--clr-bg-secondary);
  border-bottom: 0.1rem solid var(--clr-border-primary);
}
@media (max-width: 544px) {
  .no-dashboard-detail-order-card__header {
    flex-direction: column;
    padding: 1rem 1.2rem;
    gap: 0.8rem;
  }
}
.no-dashboard-detail-order-card__header-left {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 1 1 auto;
  min-width: 0;
}
.no-dashboard-detail-order-card__header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.6rem;
  flex-shrink: 0;
}
@media (max-width: 544px) {
  .no-dashboard-detail-order-card__header-right {
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}
.no-dashboard-detail-order-card__order-no {
  font-size: clamp(1.3rem, 0.1294498382vw + 1.2514563107rem, 1.5rem);
  font-weight: 700;
  color: var(--clr-primary-600);
  text-decoration: none;
  transition: color 0.2s ease;
  word-break: break-word;
}
.no-dashboard-detail-order-card__order-no:hover {
  color: var(--clr-primary-700);
  text-decoration: underline;
}
.no-dashboard-detail-order-card__date {
  font-size: clamp(1.1rem, 0.0647249191vw + 1.0757281553rem, 1.2rem);
  color: var(--clr-text-secondary);
  font-weight: 500;
}
.no-dashboard-detail-order-card__status {
  display: inline-block;
  padding: 0.3rem 0.8rem;
  border-radius: 0.4rem;
  font-size: clamp(1rem, 0.0647249191vw + 0.9757281553rem, 1.1rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.no-dashboard-detail-order-card__status--접수 {
  background: var(--clr-info-50);
  color: var(--clr-info-700);
}
.no-dashboard-detail-order-card__status--생산중 {
  background: var(--clr-warning-50);
  color: var(--clr-warning-700);
}
.no-dashboard-detail-order-card__status--포장중 {
  background: var(--clr-warning-50);
  color: var(--clr-warning-700);
}
.no-dashboard-detail-order-card__status--출하 {
  background: var(--clr-success-50);
  color: var(--clr-success-700);
}
.no-dashboard-detail-order-card__status--취소, .no-dashboard-detail-order-card__status--rejected {
  background: var(--clr-danger-50);
  color: var(--clr-danger-700);
}
.no-dashboard-detail-order-card__total {
  font-size: clamp(1.4rem, 0.1294498382vw + 1.3514563107rem, 1.6rem);
  font-weight: 700;
  color: var(--clr-primary-600);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.no-dashboard-detail-order-card__body {
  padding: 1.2rem 1.4rem;
}
@media (max-width: 544px) {
  .no-dashboard-detail-order-card__body {
    padding: 1rem 1.2rem;
  }
}
.no-dashboard-detail-order-card__item {
  padding: 1rem;
  background: var(--clr-bg-secondary);
  border: 0.1rem solid var(--clr-border-secondary);
  border-radius: 0.6rem;
  margin-bottom: 0.8rem;
  transition: all 0.2s ease;
}
.no-dashboard-detail-order-card__item:last-child {
  margin-bottom: 0;
}
.no-dashboard-detail-order-card__item:hover {
  background: var(--clr-bg-tertiary);
  border-color: var(--clr-border-primary);
}
@media (max-width: 544px) {
  .no-dashboard-detail-order-card__item {
    padding: 0.8rem;
    margin-bottom: 0.6rem;
  }
}
.no-dashboard-detail-order-card__item-name {
  font-size: clamp(1.3rem, 0.0647249191vw + 1.2757281553rem, 1.4rem);
  font-weight: 600;
  color: var(--clr-text-primary);
  margin-bottom: 0.8rem;
  line-height: 1.4;
  word-break: break-word;
}
@media (max-width: 544px) {
  .no-dashboard-detail-order-card__item-name {
    font-size: clamp(1.2rem, 0.0647249191vw + 1.1757281553rem, 1.3rem);
    margin-bottom: 0.6rem;
  }
}
.no-dashboard-detail-order-card__item-details {
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
}
@media (max-width: 544px) {
  .no-dashboard-detail-order-card__item-details {
    gap: 1rem;
  }
}
.no-dashboard-detail-order-card__item-detail {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 1 1 auto;
  min-width: 0;
}
.no-dashboard-detail-order-card__item-label {
  font-size: clamp(1rem, 0.0647249191vw + 0.9757281553rem, 1.1rem);
  font-weight: 500;
  color: var(--clr-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.no-dashboard-detail-order-card__item-value {
  font-size: clamp(1.3rem, 0.0647249191vw + 1.2757281553rem, 1.4rem);
  font-weight: 600;
  color: var(--clr-text-primary);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.no-dashboard-detail-order-card__item-value--amount {
  color: var(--clr-primary-600);
  font-weight: 700;
  font-size: clamp(1.4rem, 0.0647249191vw + 1.3757281553rem, 1.5rem);
}
.no-dashboard-detail-order-card__empty {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--clr-text-secondary);
  font-size: clamp(1.2rem, 0.0647249191vw + 1.1757281553rem, 1.3rem);
  font-style: italic;
}
@media (max-width: 544px) {
  .no-dashboard-detail-order-card__empty {
    padding: 1.5rem 1rem;
  }
}

.no-table__cell--amount {
  white-space: nowrap;
}

.no-table__cell--action {
  white-space: nowrap;
  width: 1%;
  vertical-align: middle;
}

.no-dashboard-amount__value {
  font-size: clamp(1.5rem, 0.1294498382vw + 1.4514563107rem, 1.7rem);
  font-weight: 700;
  color: var(--clr-primary-600);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.no-dashboard-order-detail-modal {
  max-width: 72rem;
  width: 92%;
}
@media (max-width: 768px) {
  .no-dashboard-order-detail-modal {
    max-width: 90%;
    width: 92%;
  }
}
.no-dashboard-order-detail-modal .no-modal__body {
  padding: 1.6rem 2rem;
  max-height: 75vh;
  overflow-y: auto;
  overflow-x: hidden;
}

.no-dashboard-order-detail-modal__order-no {
  font-size: clamp(1.3rem, 0.0647249191vw + 1.2757281553rem, 1.4rem);
  font-weight: 600;
  color: var(--clr-text-secondary);
  margin-bottom: 1.2rem;
}

.no-dashboard-order-detail-modal .no-table__wrapper {
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  margin-left: -0.4rem;
  margin-right: -0.4rem;
  padding-left: 0.4rem;
  padding-right: 0.4rem;
}

.no-dashboard-order-detail-table {
  margin-bottom: 1.6rem;
  min-width: 38rem;
}
.no-dashboard-order-detail-table th,
.no-dashboard-order-detail-table td {
  box-sizing: border-box;
}
.no-dashboard-order-detail-table .no-table__cell:first-child {
  min-width: 10rem;
}
.no-dashboard-order-detail-table .no-table__cell--num {
  text-align: right;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  min-width: 6rem;
}
.no-dashboard-order-detail-table .no-table__cell--num:last-child {
  min-width: 8rem;
}

.no-dashboard-order-detail-summary {
  border-top: 0.1rem solid var(--clr-border-primary);
  padding-top: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.no-dashboard-order-detail-summary__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: clamp(1.3rem, 0.0647249191vw + 1.2757281553rem, 1.4rem);
}
.no-dashboard-order-detail-summary__row--total {
  font-weight: 700;
  font-size: clamp(1.5rem, 0.1294498382vw + 1.4514563107rem, 1.7rem);
  color: var(--clr-primary-600);
  padding-top: 0.6rem;
  margin-top: 0.2rem;
  border-top: 0.1rem solid var(--clr-border-secondary);
}
.no-dashboard-order-detail-summary__label {
  color: var(--clr-text-secondary);
  font-weight: 500;
}
.no-dashboard-order-detail-summary__value {
  font-weight: 600;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.no-dashboard-order-detail-summary__row--total .no-dashboard-order-detail-summary__value {
  font-size: clamp(1.6rem, 0.1294498382vw + 1.5514563107rem, 1.8rem);
}

.guide-doc {
  display: flex;
  gap: 0;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 0 3rem;
  min-height: 60vh;
  background-color: var(--clr-bg-primary);
}
@media (max-width: 1024px) {
  .guide-doc {
    padding: 2.4rem 0 4rem;
    gap: 0;
  }
}
.guide-doc__side {
  flex-shrink: 0;
  width: 220px;
  position: sticky;
  top: 2rem;
  align-self: start;
  padding: 1rem 1.25rem 1rem 0;
  margin-right: 1.5rem;
  background-color: var(--clr-bg-primary);
  border-right: 1px solid var(--clr-border-primary);
}
@media (max-width: 1024px) {
  .guide-doc__side {
    width: 240px;
    padding: 1.25rem 1.5rem 1.25rem 0;
    margin-right: 2rem;
    top: 2.4rem;
  }
}
.guide-doc__nav-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--clr-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 1rem;
  padding: 0 1rem;
}
.guide-doc__nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.guide-doc__nav-item {
  margin: 0;
}
.guide-doc__nav-link {
  display: block;
  padding: 0.65rem 1rem;
  margin: 0 0.4rem;
  font-size: 1.38rem;
  font-weight: 500;
  color: var(--clr-primary-600);
  text-decoration: none;
  border-radius: 0.4rem;
  border-left: 3px solid transparent;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, text-decoration 0.2s ease;
}
.guide-doc__nav-link:hover {
  color: var(--clr-primary-500);
  background-color: var(--clr-bg-tertiary);
  text-decoration: underline;
}
.guide-doc__nav-link:focus-visible {
  outline: 2px solid var(--clr-primary-500);
  outline-offset: 2px;
}
.guide-doc__nav-link--active {
  color: var(--clr-primary-600);
  background-color: var(--clr-bg-tertiary);
  border-left-color: var(--clr-primary-500);
  font-weight: 600;
}
.guide-doc__nav-num {
  display: inline-block;
  min-width: 2em;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--clr-text-tertiary);
  margin-right: 0.25rem;
}
.guide-doc__nav-text {
  font-weight: 500;
}
.guide-doc__nav-link:hover .guide-doc__nav-num, .guide-doc__nav-link--active .guide-doc__nav-num {
  color: var(--clr-primary-600);
}
[data-theme=dark] .guide-doc__nav-link {
  color: var(--clr-primary-400);
}
[data-theme=dark] .guide-doc__nav-link:hover {
  color: var(--clr-primary-300);
}
[data-theme=dark] .guide-doc__nav-link--active {
  color: var(--clr-primary-300);
  border-left-color: var(--clr-primary-400);
  background-color: var(--clr-bg-tertiary);
}
[data-theme=dark] .guide-doc__nav-link:hover .guide-doc__nav-num, [data-theme=dark] .guide-doc__nav-link--active .guide-doc__nav-num {
  color: var(--clr-primary-300);
}
.guide-doc__main {
  flex: 1;
  min-width: 0;
  padding: 0 1.25rem 2rem;
  background-color: var(--clr-bg-primary);
}
@media (max-width: 1024px) {
  .guide-doc__main {
    padding: 0 2rem 3rem;
  }
}
.guide-doc__section {
  display: none;
  animation: guide-fade 0.2s ease;
}
.guide-doc__section--active {
  display: block;
}
.guide-doc__header {
  margin-bottom: 2.25rem;
}
.guide-doc__page-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--clr-text-primary);
  margin: 0 0 0.5rem;
  line-height: 1.3;
  letter-spacing: -0.02em;
}
@media (max-width: 1024px) {
  .guide-doc__page-title {
    font-size: 2.5rem;
    margin: 0 0 0.6rem;
  }
}
.guide-doc__page-sub {
  font-size: 1.45rem;
  color: var(--clr-text-tertiary);
  margin: 0;
  line-height: 1.55;
}
.guide-doc__content {
  font-size: 1.5rem;
  line-height: 1.75;
  color: var(--clr-text-primary);
  letter-spacing: 0.01em;
}
.guide-doc__content h2 {
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--clr-text-primary);
  margin: 3.25rem 0 1.25rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--clr-border-secondary);
  scroll-margin-top: 1.25rem;
  line-height: 1.32;
  letter-spacing: -0.01em;
}
.guide-doc__content h2:first-of-type {
  margin-top: 0;
}
@media (max-width: 1024px) {
  .guide-doc__content h2 {
    font-size: 1.85rem;
    margin: 3.5rem 0 1.35rem;
  }
}
.guide-doc__content h3 {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--clr-text-primary);
  margin: 2.25rem 0 0.75rem;
  line-height: 1.38;
  letter-spacing: -0.005em;
}
@media (max-width: 1024px) {
  .guide-doc__content h3 {
    margin: 2.5rem 0 0.85rem;
  }
}
.guide-doc__content p {
  margin: 0 0 1.5rem;
  color: var(--clr-text-secondary);
  line-height: 1.8;
}
.guide-doc__content p + p {
  margin-top: 0.25rem;
}
.guide-doc__content ul, .guide-doc__content ol {
  margin: 1rem 0 1.75rem;
  padding-left: 2rem;
}
.guide-doc__content li {
  margin: 0.6rem 0;
  line-height: 1.78;
}
.guide-doc__content ul li {
  padding-left: 0.35rem;
}
.guide-doc__content strong {
  color: var(--clr-text-primary);
  font-weight: 600;
}
.guide-doc__content a {
  color: var(--clr-primary-500);
  text-decoration: underline;
  text-decoration-color: var(--clr-border-secondary);
  text-underline-offset: 0.25em;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.guide-doc__content a:hover {
  color: var(--clr-primary-600);
  text-decoration-color: var(--clr-primary-500);
}
.guide-doc__content em {
  color: var(--clr-text-tertiary);
  font-style: italic;
}
.guide-doc__content code {
  font-size: 0.9em;
  padding: 0.2em 0.45em;
  border-radius: 0.4rem;
  background-color: var(--clr-bg-tertiary);
  color: var(--clr-text-primary);
  border: 1px solid var(--clr-border-secondary);
  font-weight: 500;
}
.guide-doc__jump {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 0.6rem 1.25rem;
  margin: 1.5rem 0 2rem;
  padding: 1.25rem 1.5rem;
  background-color: var(--clr-bg-secondary);
  border: 1px solid var(--clr-border-primary);
  border-radius: 0.6rem;
}
.guide-doc__jump-link {
  display: inline-block;
  padding: 0.4rem 0;
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--clr-primary-600);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.guide-doc__jump-link:hover {
  color: var(--clr-primary-500);
}
[data-theme=dark] .guide-doc__jump-link {
  color: var(--clr-primary-400);
}
[data-theme=dark] .guide-doc__jump-link:hover {
  color: var(--clr-primary-300);
}
.guide-doc__table-wrap {
  overflow-x: auto;
  margin: 1.5rem 0 2rem;
  border: 1px solid var(--clr-border-primary);
  border-radius: 0.6rem;
  background-color: var(--clr-bg-secondary);
  max-width: 100%;
}
.guide-doc__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.4rem;
  line-height: 1.5;
}
.guide-doc__table th, .guide-doc__table td {
  padding: 1rem 1.25rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--clr-border-secondary);
}
.guide-doc__table th {
  background-color: var(--clr-bg-tertiary);
  font-weight: 600;
  color: var(--clr-text-primary);
  font-size: 1.35rem;
  letter-spacing: 0.01em;
}
.guide-doc__table td {
  color: var(--clr-text-secondary);
}
.guide-doc__table tbody tr:hover td {
  background-color: var(--clr-bg-primary);
}
.guide-doc__table td code {
  white-space: nowrap;
}
.guide-doc__table tbody tr:last-child th,
.guide-doc__table tbody tr:last-child td {
  border-bottom: none;
}
.guide-doc__table--mail .guide-doc__cell-event {
  vertical-align: middle;
  font-weight: 600;
  color: var(--clr-text-primary);
}
.guide-doc__muted {
  font-weight: 400;
  color: var(--clr-text-tertiary);
  font-size: 0.95em;
}
.guide-doc__h4 {
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--clr-text-primary);
  margin: 1.5rem 0 0.5rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--clr-border-secondary);
}
.guide-doc__table--loupe th, .guide-doc__table--loupe td {
  padding: 0.75rem 1rem;
}
.guide-doc__table--loupe tbody tr:nth-child(even) td {
  background-color: var(--clr-bg-secondary);
}
.guide-doc__table--example tbody td {
  vertical-align: middle;
}
.guide-doc__role-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--clr-text-primary);
  margin: 2.25rem 0 0.75rem;
  line-height: 1.38;
}
.guide-doc__role-title:first-of-type {
  margin-top: 1rem;
}
@media (max-width: 1024px) {
  .guide-doc__role-title {
    margin: 2.5rem 0 0.85rem;
  }
}
.guide-doc__crud-cell {
  text-align: center;
  vertical-align: middle;
}
.guide-doc__crud-cell .guide-doc__crud-check {
  color: var(--clr-primary-500);
  font-size: 1.35rem;
}
.guide-doc__crud-cell .guide-doc__crud-empty {
  color: var(--clr-text-tertiary);
}
[data-theme=dark] .guide-doc__crud-cell .guide-doc__crud-check {
  color: var(--clr-primary-400);
}
.guide-doc__table--crud tbody td {
  background-color: #fff;
}
.guide-doc__table--crud tbody tr:hover td {
  background-color: #f5f6f8;
}
[data-theme=dark] .guide-doc__table--crud tbody td {
  background-color: var(--clr-bg-primary);
}
[data-theme=dark] .guide-doc__table--crud tbody tr:hover td {
  background-color: var(--clr-bg-secondary);
}
.guide-doc__serial-format {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.75rem 0 1rem;
  font-size: 1.35rem;
}
.guide-doc__serial-part {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.75rem;
  background-color: var(--clr-bg-tertiary);
  border: 1px solid var(--clr-border-secondary);
  border-radius: 0.35rem;
  font-weight: 600;
  color: var(--clr-text-primary);
}
.guide-doc__steps {
  list-style: none;
  padding-left: 0;
  counter-reset: guide-step;
  margin: 1.5rem 0 2rem;
}
.guide-doc__steps li {
  position: relative;
  margin: 1.5rem 0;
  padding-left: 3.5rem;
  counter-increment: guide-step;
  line-height: 1.78;
}
.guide-doc__steps li::before {
  content: counter(guide-step);
  position: absolute;
  left: 0;
  top: 0.02em;
  width: 2.15rem;
  height: 2.15rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--clr-primary-600);
  background-color: var(--clr-bg-tertiary);
  border: 1px solid var(--clr-border-primary);
  border-radius: 0.4rem;
}
[data-theme=dark] .guide-doc__steps li::before {
  color: var(--clr-primary-400);
  background-color: var(--clr-bg-tertiary);
  border-color: var(--clr-border-primary);
}
.guide-doc__note {
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
  border-radius: 0.6rem;
  border-left: 4px solid var(--clr-warning-500);
  background-color: var(--clr-warning-50);
  font-size: 1.4rem;
  line-height: 1.65;
  color: var(--clr-warning-900);
}
.guide-doc__note strong {
  color: inherit;
  font-weight: 700;
}
[data-theme=dark] .guide-doc__note {
  background-color: var(--clr-warning-800);
  border-left-color: var(--clr-warning-400);
  color: var(--clr-warning-50);
}
.guide-doc__notice {
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
  border-radius: 0.6rem;
  border-left: 4px solid var(--clr-primary-500);
  background-color: var(--clr-primary-50);
  font-size: 1.4rem;
  line-height: 1.65;
  color: var(--clr-text-primary);
}
.guide-doc__notice .guide-doc__steps {
  margin: 0.75rem 0 0;
}
.guide-doc__notice-title {
  font-weight: 700;
  margin: 0 0 0.5rem;
  color: var(--clr-primary-700);
}
[data-theme=dark] .guide-doc__notice {
  background-color: var(--clr-primary-900);
  border-left-color: var(--clr-primary-400);
  color: var(--clr-text-primary);
}
[data-theme=dark] .guide-doc__notice-title {
  color: var(--clr-primary-300);
}
.guide-doc__footer {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--clr-border-primary);
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: center;
  justify-content: flex-start;
}
.guide-doc__nav-prev-next {
  display: flex;
  gap: 0.75rem;
}
.guide-doc__nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1rem;
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--clr-text-secondary);
  background-color: var(--clr-bg-secondary);
  border: 1px solid var(--clr-border-primary);
  border-radius: 0.5rem;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.guide-doc__nav-btn:hover {
  background-color: var(--clr-bg-tertiary);
  color: var(--clr-primary-500);
  border-color: var(--clr-border-secondary);
}

@keyframes guide-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.no-listing-wrapper--table {
  display: block;
}
@media (max-width: 768px) {
  .no-listing-wrapper--table {
    display: none;
  }
}
.no-listing-wrapper--card {
  display: none;
}
@media (max-width: 768px) {
  .no-listing-wrapper--card {
    display: block;
  }
}

.no-listing-card__list {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}
@media (max-width: 544px) {
  .no-listing-card__list {
    gap: 2rem;
  }
}
.no-listing-card__item {
  background: var(--clr-bg-elevated);
  border: 0.1rem solid var(--clr-border-primary);
  border-radius: 1.2rem;
  overflow: hidden;
  transition: all 0.2s ease;
}
@media (max-width: 768px) {
  .no-listing-card__item:hover {
    border-color: var(--clr-primary-400);
    box-shadow: 0 0.4rem 1.2rem rgba(37, 99, 235, 0.1);
  }
}
.no-listing-card__header {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.6rem;
  background: var(--clr-bg-tertiary);
  border-bottom: 0.1rem solid var(--clr-border-secondary);
}
@media (max-width: 544px) {
  .no-listing-card__header {
    padding: 2rem;
  }
}
.no-listing-card__selection {
  flex-shrink: 0;
}
.no-listing-card__title-wrapper {
  flex: 1;
  min-width: 0;
}
.no-listing-card__title {
  font-size: clamp(1.6rem, 0.1294498382vw + 1.5514563107rem, 1.8rem);
  font-weight: 600;
  color: var(--clr-text-primary);
  margin: 0;
  line-height: 1.4;
}
.no-listing-card__title-link {
  color: var(--clr-text-primary);
  text-decoration: none;
  transition: color 0.2s ease;
}
.no-listing-card__title-link:hover {
  color: var(--clr-primary-600);
}
.no-listing-card__info {
  padding: 1.6rem;
}
@media (max-width: 544px) {
  .no-listing-card__info {
    padding: 2rem;
  }
}
.no-listing-card__info-row {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-bottom: 1.2rem;
}
.no-listing-card__info-row:last-child {
  margin-bottom: 0;
}
@media (max-width: 544px) {
  .no-listing-card__info-row {
    flex-direction: row;
    align-items: center;
  }
}
.no-listing-card__info-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
@media (max-width: 544px) {
  .no-listing-card__info-item {
    flex-direction: row;
    align-items: center;
    gap: 0.8rem;
  }
}
.no-listing-card__label {
  font-size: clamp(1.2rem, 0.0647249191vw + 1.1757281553rem, 1.3rem);
  font-weight: 500;
  color: var(--clr-text-secondary);
  flex-shrink: 0;
}
@media (max-width: 544px) {
  .no-listing-card__label {
    min-width: 8rem;
  }
}
.no-listing-card__value {
  font-size: clamp(1.4rem, 0.0647249191vw + 1.3757281553rem, 1.5rem);
  color: var(--clr-text-primary);
  word-break: break-word;
}
.no-listing-card__actions {
  display: flex;
  gap: 0.8rem;
  padding: 1.6rem;
  background: var(--clr-bg-tertiary);
  border-top: 0.1rem solid var(--clr-border-secondary);
}
@media (max-width: 544px) {
  .no-listing-card__actions {
    padding: 2rem;
  }
}
.no-listing-card__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  text-align: center;
  color: var(--clr-text-secondary);
}
.no-listing-card__empty i {
  font-size: clamp(4.8rem, 1.0355987055vw + 4.4116504854rem, 6.4rem);
  margin-bottom: 1.6rem;
  opacity: 0.5;
}
.no-listing-card__empty p {
  font-size: clamp(1.4rem, 0.1294498382vw + 1.3514563107rem, 1.6rem);
  margin-bottom: 2rem;
}

/**
 * Reset Token Success Component
 * 비밀번호 재설정 토큰 성공 메시지 스타일
 */
.no-reset-token-success {
  margin: 1.5rem 0;
}
.no-reset-token-success__message {
  font-size: 1rem;
  color: #212529;
  line-height: 1.6;
  margin: 0 0 1rem 0;
  word-break: break-all;
}
.no-reset-token-success__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.no-reset-token-success__copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--clr-success-500);
  color: var(--clr-base-white);
  border: none;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}
.no-reset-token-success__copy-btn:hover {
  background: var(--clr-success-600);
}
.no-reset-token-success__copy-btn:active {
  transform: scale(0.98);
}
.no-reset-token-success__copy-btn--copied {
  background: var(--clr-success-600);
}
.no-reset-token-success__copy-btn--copied span::before {
  content: "복사됨!";
}
.no-reset-token-success__copy-btn span::before {
  content: "복사";
}
.no-reset-token-success__link {
  color: var(--clr-primary-600);
  text-decoration: none;
  font-size: 0.875rem;
  transition: color 0.2s ease;
}
.no-reset-token-success__link:hover {
  color: var(--clr-primary-700);
  text-decoration: underline;
}
@media (max-width: 768px) {
  .no-reset-token-success__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .no-reset-token-success__copy-btn {
    width: 100%;
    justify-content: center;
  }
}

.no-test-page {
  min-height: 100vh;
  padding: 4rem 2rem;
}
@media (max-width: 768px) {
  .no-test-page {
    padding: 6rem 4rem;
  }
}
.no-test-page__container {
  max-width: 120rem;
  margin: 0 auto;
  border-radius: 1.2rem;
  box-shadow: 0 2rem 6rem rgba(0, 0, 0, 0.15);
  background-color: var(--clr-bg-elevated);
  border: 0.1rem solid var(--clr-border-primary);
  padding: 3.2rem 2.4rem;
}
@media (max-width: 768px) {
  .no-test-page__container {
    padding: 4.8rem 4rem;
  }
}
.no-test-page__title {
  font-size: clamp(2.8rem, 0.5177993528vw + 2.6058252427rem, 3.6rem);
  font-weight: 700;
  color: var(--clr-text-primary);
  margin: 0 0 0.8rem 0;
}
.no-test-page__subtitle {
  font-size: clamp(1.6rem, 0.1294498382vw + 1.5514563107rem, 1.8rem);
  color: var(--clr-text-secondary);
  margin: 0 0 4rem 0;
}
@media (max-width: 768px) {
  .no-test-page__subtitle {
    margin-bottom: 4.8rem;
  }
}

.no-test-section {
  margin-bottom: 4.8rem;
  padding-bottom: 3.2rem;
  border-bottom: 0.1rem solid var(--clr-border-secondary);
}
.no-test-section:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.no-test-section__title {
  font-size: clamp(2rem, 0.2588996764vw + 1.9029126214rem, 2.4rem);
  font-weight: 600;
  color: var(--clr-text-primary);
  margin: 0 0 2rem 0;
  padding-bottom: 1.2rem;
  border-bottom: 0.2rem solid var(--clr-primary-600);
}
.no-test-section__content {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}
.no-test-section__group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem;
  padding: 1.6rem;
  background-color: var(--clr-bg-secondary);
  border-radius: 0.8rem;
  border: 0.1rem solid var(--clr-border-secondary);
}
@media (max-width: 544px) {
  .no-test-section__group {
    flex-direction: column;
    align-items: stretch;
  }
}

.no-switch-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
  padding: 1.2rem 1.6rem;
  background-color: var(--clr-bg-elevated);
  border: 0.1rem solid var(--clr-border-secondary);
  border-radius: 0.8rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
.no-switch-label:hover {
  background-color: var(--clr-bg-secondary);
  border-color: var(--clr-border-primary);
}
.no-switch-label__text {
  font-size: clamp(1.4rem, 0vw + 1.4rem, 1.4rem);
  font-weight: 500;
  color: var(--clr-text-secondary);
}

/**
 * Order Excel Upload Page Styles
 * 주문 엑셀 업로드 페이지 스타일 (하이엔드급 디자인)
 */
.order-excel-upload-page {
  min-height: 100vh;
  background-color: var(--clr-bg-primary);
  padding-bottom: 4rem;
}

.order-excel-upload-header {
  padding: 3rem 0 2rem;
  background-color: var(--clr-bg-elevated);
  border-bottom: 0.1rem solid var(--clr-border-secondary);
}
.order-excel-upload-header__top {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-bottom: 1rem;
  max-width: 160rem;
  margin-left: auto;
  margin-right: auto;
  padding: 0 3.2rem;
}
@media (max-width: 768px) {
  .order-excel-upload-header__top {
    padding: 0 1.6rem;
    gap: 1.2rem;
  }
}
.order-excel-upload-header__back {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  color: var(--clr-text-secondary);
  font-size: 1.4rem;
  text-decoration: none;
  transition: all 0.2s ease;
  padding: 0.8rem 1.2rem;
  border-radius: 0.6rem;
}
.order-excel-upload-header__back:hover {
  color: var(--clr-primary-600);
  background-color: var(--clr-primary-50);
}
.order-excel-upload-header__back i {
  font-size: 1.2rem;
}
.order-excel-upload-header__title {
  font-size: 2.8rem;
  font-weight: 700;
  color: var(--clr-text-primary);
  margin: 0;
  letter-spacing: -0.02em;
}
@media (max-width: 768px) {
  .order-excel-upload-header__title {
    font-size: 2.2rem;
  }
}
.order-excel-upload-header__subtitle {
  font-size: 1.5rem;
  color: var(--clr-text-secondary);
  margin: 0;
  line-height: 1.6;
  max-width: 160rem;
  margin-left: auto;
  margin-right: auto;
  padding: 0 3.2rem;
}
@media (max-width: 768px) {
  .order-excel-upload-header__subtitle {
    font-size: 1.4rem;
    padding: 0 1.6rem;
  }
}

.order-excel-upload-content {
  max-width: 160rem;
  margin: 0 auto;
  padding: 3.2rem;
}
@media (max-width: 768px) {
  .order-excel-upload-content {
    padding: 2rem 1.6rem;
  }
}

.order-excel-upload-upload-section {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 2.4rem;
  margin-bottom: 3.2rem;
}
@media (max-width: 1200px) {
  .order-excel-upload-upload-section {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}
@media (max-width: 768px) {
  .order-excel-upload-upload-section {
    gap: 1.6rem;
    margin-bottom: 2.4rem;
  }
}

.order-excel-upload-template-card {
  background: var(--clr-bg-elevated);
  border: 0.1rem solid var(--clr-border-secondary);
  border-radius: 1.2rem;
  padding: 2.4rem;
  box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.04);
  transition: all 0.3s ease;
}
.order-excel-upload-template-card:hover {
  box-shadow: 0 0.4rem 1.6rem rgba(0, 0, 0, 0.08);
  transform: translateY(-0.2rem);
}
.order-excel-upload-template-card__header {
  margin-bottom: 1.6rem;
}
.order-excel-upload-template-card__title {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--clr-text-primary);
  margin: 0;
}
.order-excel-upload-template-card__title i {
  color: var(--clr-success-600);
  font-size: 2rem;
}
.order-excel-upload-template-card__body {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}
.order-excel-upload-template-card__description {
  font-size: 1.4rem;
  color: var(--clr-text-secondary);
  margin: 0;
  line-height: 1.6;
}
.order-excel-upload-template-card__buttons {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.order-excel-upload-template-card__buttons .no-btn {
  font-weight: 600;
  color: var(--clr-primary-700);
  border-width: 0.2rem;
  border-color: var(--clr-primary-500);
  background: var(--clr-primary-50);
}
.order-excel-upload-template-card__buttons .no-btn i {
  color: var(--clr-primary-700);
}
.order-excel-upload-template-card__buttons .no-btn:hover {
  color: var(--clr-primary-800);
  border-color: var(--clr-primary-600);
  background: var(--clr-primary-100);
}
.order-excel-upload-template-card__buttons .no-btn:hover i {
  color: var(--clr-primary-800);
}
.order-excel-upload-template-card__info {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.6rem;
  background: var(--clr-bg-primary);
  border-radius: 0.8rem;
  border: 0.1rem solid var(--clr-border-secondary);
}
.order-excel-upload-template-card__info-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  font-size: 1.3rem;
  color: var(--clr-text-primary);
  line-height: 1.5;
}
.order-excel-upload-template-card__info-item i {
  flex-shrink: 0;
  margin-top: 0.2rem;
  color: var(--clr-primary-600);
  font-size: 1.4rem;
}
.order-excel-upload-template-card__info-item strong {
  color: var(--clr-text-primary);
  font-weight: 600;
}

.order-excel-upload-file-card {
  background: var(--clr-bg-elevated);
  border: 0.1rem solid var(--clr-border-secondary);
  border-radius: 1.2rem;
  padding: 2.4rem;
  box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.04);
  transition: all 0.3s ease;
}
.order-excel-upload-file-card:hover {
  box-shadow: 0 0.4rem 1.6rem rgba(0, 0, 0, 0.08);
}
.order-excel-upload-file-card__header {
  margin-bottom: 2rem;
}
.order-excel-upload-file-card__title {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--clr-text-primary);
  margin: 0;
}
.order-excel-upload-file-card__title i {
  color: var(--clr-primary-600);
  font-size: 2rem;
}
.order-excel-upload-file-card__field {
  margin-bottom: 2.4rem;
}
.order-excel-upload-file-card__field:last-of-type {
  margin-bottom: 0;
}
.order-excel-upload-file-card__label {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--clr-text-primary);
  margin-bottom: 1.2rem;
}
.order-excel-upload-file-card__label i {
  color: var(--clr-primary-600);
  font-size: 1.6rem;
}
.order-excel-upload-file-card__label .required {
  color: var(--clr-danger);
}
.order-excel-upload-file-card__mode-selector {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}
@media (max-width: 1024px) {
  .order-excel-upload-file-card__mode-selector {
    grid-template-columns: 1fr;
  }
}
.order-excel-upload-file-card__mode-option {
  cursor: pointer;
  display: block;
}
.order-excel-upload-file-card__mode-option input[type=radio] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.order-excel-upload-file-card__mode-option input[type=radio]:checked + .order-excel-upload-file-card__mode-card {
  border-color: var(--clr-primary-500);
  background: linear-gradient(135deg, var(--clr-primary-50) 0%, var(--clr-primary-100) 100%);
  box-shadow: 0 0 0 0.3rem var(--clr-primary-100), 0 0.4rem 1.2rem rgba(59, 130, 246, 0.15);
}
.order-excel-upload-file-card__mode-option input[type=radio]:checked + .order-excel-upload-file-card__mode-card .order-excel-upload-file-card__mode-icon {
  background: var(--clr-primary-500);
  color: var(--clr-base-white);
  transform: scale(1.05);
}
.order-excel-upload-file-card__mode-option input[type=radio]:checked + .order-excel-upload-file-card__mode-card .order-excel-upload-file-card__mode-icon i {
  color: var(--clr-base-white) !important;
}
.order-excel-upload-file-card__mode-option input[type=radio]:checked + .order-excel-upload-file-card__mode-card .order-excel-upload-file-card__mode-title {
  color: var(--clr-primary-700);
  font-weight: 700;
}
.order-excel-upload-file-card__mode-card {
  display: flex;
  align-items: flex-start;
  gap: 1.4rem;
  padding: 1.6rem;
  background: var(--clr-bg-primary);
  border: 0.2rem solid var(--clr-border-secondary);
  border-radius: 1rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  height: 100%;
}
.order-excel-upload-file-card__mode-card:hover {
  border-color: var(--clr-primary-300);
  box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.08);
  transform: translateY(-0.2rem);
}
.order-excel-upload-file-card__mode-icon {
  flex-shrink: 0;
  width: 4.8rem;
  height: 4.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--clr-bg-elevated);
  border-radius: 1rem;
  color: var(--clr-primary-600);
  font-size: 2rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.05);
}
.order-excel-upload-file-card__mode-content {
  flex: 1;
  min-width: 0;
}
.order-excel-upload-file-card__mode-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--clr-text-primary);
  margin-bottom: 0.6rem;
  transition: all 0.2s ease;
}
.order-excel-upload-file-card__mode-desc {
  font-size: 1.3rem;
  color: var(--clr-text-secondary);
  line-height: 1.5;
}
.order-excel-upload-file-card__dropzone {
  position: relative;
  display: block;
  width: 100%;
  min-height: 14rem;
  border: 0.2rem dashed var(--clr-border-primary);
  border-radius: 1rem;
  background: var(--clr-bg-primary);
  transition: border-color 0.2s ease, background 0.2s ease;
  cursor: pointer;
}
.order-excel-upload-file-card__dropzone--dragover {
  border-color: var(--clr-primary-500);
  background: var(--clr-primary-50);
  box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.15);
}
.order-excel-upload-file-card__dropzone--has-file {
  border-color: var(--clr-primary-500);
  background: var(--clr-primary-50);
  border-style: solid;
  box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.12);
}
.order-excel-upload-file-card__dropzone--has-file .order-excel-upload-file-card__dropzone-hint {
  font-weight: 600;
  color: var(--clr-primary-700);
}
.order-excel-upload-file-card__remove-file {
  margin-top: 0.8rem;
}
.order-excel-upload-file-card__input--hidden {
  position: absolute;
  width: 0.1rem;
  height: 0.1rem;
  opacity: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.order-excel-upload-file-card__input--hidden::file-selector-button {
  display: none;
}
.order-excel-upload-file-card__dropzone-content {
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  padding: 2.4rem;
  pointer-events: none;
}
.order-excel-upload-file-card__dropzone-icon {
  font-size: 3.2rem;
  color: var(--clr-primary-500);
}
.order-excel-upload-file-card__dropzone-text {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--clr-text-primary);
}
.order-excel-upload-file-card__dropzone-hint {
  margin: 0;
  font-size: 1.3rem;
  color: var(--clr-text-secondary);
}
.order-excel-upload-file-card__input {
  width: 100%;
  padding: 1.2rem 1.6rem;
  font-size: 1.4rem;
  color: var(--clr-text-primary);
  background-color: var(--clr-bg-primary);
  border: 0.2rem solid var(--clr-border-primary);
  border-radius: 0.8rem;
  transition: all 0.2s ease;
  cursor: pointer;
}
.order-excel-upload-file-card__input:hover {
  border-color: var(--clr-primary-400);
}
.order-excel-upload-file-card__input:focus {
  outline: none;
  border-color: var(--clr-primary-500);
  box-shadow: 0 0 0 0.4rem var(--clr-primary-100);
}
.order-excel-upload-file-card__input::file-selector-button {
  padding: 0.8rem 1.6rem;
  margin-right: 1.6rem;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--clr-text-primary);
  background-color: var(--clr-bg-secondary);
  border: 0.1rem solid var(--clr-border-primary);
  border-radius: 0.6rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
.order-excel-upload-file-card__input::file-selector-button:hover {
  background-color: var(--clr-primary-50);
  border-color: var(--clr-primary-300);
}
.order-excel-upload-file-card__help {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 1rem;
  font-size: 1.3rem;
  color: var(--clr-text-secondary);
  line-height: 1.5;
}
.order-excel-upload-file-card__help i {
  flex-shrink: 0;
  color: var(--clr-info-600);
}
.order-excel-upload-file-card__actions {
  display: flex;
  gap: 1.2rem;
  margin-top: 2.4rem;
  padding-top: 2.4rem;
  border-top: 0.1rem solid var(--clr-border-secondary);
}

.order-excel-upload-form {
  margin-top: 3.2rem;
}
@media (max-width: 768px) {
  .order-excel-upload-form {
    margin-top: 2.4rem;
  }
}

.order-excel-upload-data-section {
  margin-top: 3.2rem;
}
@media (max-width: 768px) {
  .order-excel-upload-data-section {
    margin-top: 2.4rem;
  }
}

.order-excel-upload-data-card {
  background: var(--clr-bg-elevated);
  border: 0.1rem solid var(--clr-border-secondary);
  border-radius: 1.2rem;
  box-shadow: 0 0.4rem 1.6rem rgba(0, 0, 0, 0.08);
  overflow: hidden;
}
.order-excel-upload-data-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  padding: 2.4rem;
  background: linear-gradient(135deg, var(--clr-primary-50) 0%, var(--clr-primary-100) 100%);
  border-bottom: 0.2rem solid var(--clr-primary-200);
}
@media (max-width: 768px) {
  .order-excel-upload-data-card__header {
    flex-direction: column;
    padding: 2rem;
  }
}
.order-excel-upload-data-card__header-left {
  flex: 1;
  min-width: 0;
}
.order-excel-upload-data-card__title {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 2rem;
  font-weight: 700;
  color: var(--clr-text-primary);
  margin: 0 0 0.8rem;
  letter-spacing: -0.02em;
}
.order-excel-upload-data-card__title i {
  color: var(--clr-primary-600);
  font-size: 2.2rem;
}
.order-excel-upload-data-card__subtitle {
  font-size: 1.4rem;
  color: var(--clr-text-secondary);
  margin: 0;
  line-height: 1.6;
}
.order-excel-upload-data-card__subtitle .order-excel-upload-data-card__badge-new {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.8rem;
  background: var(--clr-success-100);
  color: var(--clr-success-700);
  border-radius: 0.4rem;
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0 0.4rem;
}
.order-excel-upload-data-card__actions {
  display: flex;
  gap: 0.8rem;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .order-excel-upload-data-card__actions {
    width: 100%;
  }
  .order-excel-upload-data-card__actions .no-btn {
    flex: 1;
  }
}
.order-excel-upload-data-card__body {
  padding: 2.4rem;
}
@media (max-width: 768px) {
  .order-excel-upload-data-card__body {
    padding: 1.6rem;
  }
}
.order-excel-upload-data-card__footer {
  display: flex;
  justify-content: flex-end;
  gap: 1.2rem;
  padding: 2rem 2.4rem;
  background: var(--clr-bg-secondary);
  border-top: 0.1rem solid var(--clr-border-secondary);
}
@media (max-width: 768px) {
  .order-excel-upload-data-card__footer {
    flex-direction: column-reverse;
    padding: 1.6rem;
  }
  .order-excel-upload-data-card__footer .no-btn {
    width: 100%;
  }
}

.order-excel-upload-data-table-container {
  position: relative;
  border: 0.1rem solid var(--clr-border-secondary);
  border-radius: 0.8rem;
  background: var(--clr-bg-primary);
}
.order-excel-upload-data-table-container .no-order-table-wrapper {
  margin: 0;
  border: none;
  border-radius: 0;
}

.order-excel-upload-data-errors {
  margin-top: 2.4rem;
  padding: 2rem;
  background: linear-gradient(135deg, var(--clr-error-50) 0%, var(--clr-error-100) 100%);
  border: 0.2rem solid var(--clr-error-300);
  border-radius: 1rem;
}
.order-excel-upload-data-errors__title {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.6rem;
  color: var(--clr-error-700);
  font-size: 1.8rem;
  font-weight: 700;
}
.order-excel-upload-data-errors__title i {
  flex-shrink: 0;
  font-size: 2rem;
}
.order-excel-upload-data-errors__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.order-excel-upload-data-errors__item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.2rem 1.6rem;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 0.8rem;
  color: var(--clr-error-700);
  font-size: 1.4rem;
  line-height: 1.6;
  box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.05);
}
.order-excel-upload-data-errors__item i {
  flex-shrink: 0;
  margin-top: 0.2rem;
}

.order-excel-upload-auto-create-summary {
  margin-top: 2.4rem;
  padding: 2rem;
  background: linear-gradient(135deg, var(--clr-info-50) 0%, var(--clr-info-100) 100%);
  border: 0.2rem solid var(--clr-info-300);
  border-radius: 1rem;
}
.order-excel-upload-auto-create-summary__title {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.6rem;
  color: var(--clr-info-700);
  font-size: 1.8rem;
  font-weight: 700;
}
.order-excel-upload-auto-create-summary__title i {
  flex-shrink: 0;
  font-size: 2rem;
}
.order-excel-upload-auto-create-summary__content {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}
.order-excel-upload-auto-create-summary__group {
  padding: 1.6rem;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 0.8rem;
  box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.05);
}
.order-excel-upload-auto-create-summary__group-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--clr-text-primary);
  margin-bottom: 1.2rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.order-excel-upload-auto-create-summary__group-title i {
  color: var(--clr-info-600);
}
.order-excel-upload-auto-create-summary__items {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.order-excel-upload-auto-create-summary__item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.2rem;
  background: var(--clr-bg-primary);
  border-radius: 0.6rem;
  border: 0.1rem solid var(--clr-border-secondary);
}
.order-excel-upload-auto-create-summary__item-label {
  font-weight: 600;
  color: var(--clr-text-primary);
  min-width: 8rem;
}
.order-excel-upload-auto-create-summary__item-value {
  color: var(--clr-text-secondary);
  flex: 1;
}
.order-excel-upload-auto-create-summary__item-badge {
  padding: 0.4rem 0.8rem;
  background: var(--clr-success-100);
  color: var(--clr-success-700);
  border-radius: 0.4rem;
  font-size: 1.2rem;
  font-weight: 600;
}

.order-excel-upload-result {
  margin-top: 3.2rem;
  animation: fadeInUp 0.4s ease-out;
}
@media (max-width: 768px) {
  .order-excel-upload-result {
    margin-top: 2.4rem;
  }
}

.order-excel-upload-result-card {
  background: var(--clr-bg-elevated);
  border: 0.1rem solid var(--clr-border-secondary);
  border-radius: 1.2rem;
  box-shadow: 0 0.4rem 1.6rem rgba(0, 0, 0, 0.08);
  overflow: hidden;
}
.order-excel-upload-result-card__header {
  padding: 2.4rem;
  background: var(--clr-gray-50);
  border-bottom: 0.1rem solid var(--clr-border-secondary);
}
@media (max-width: 768px) {
  .order-excel-upload-result-card__header {
    padding: 2rem;
  }
}
.order-excel-upload-result-card__title {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 2rem;
  font-weight: 700;
  color: var(--clr-text-primary);
  margin: 0;
}
.order-excel-upload-result-card__title i {
  color: var(--clr-gray-600);
  font-size: 2.2rem;
}
.order-excel-upload-result-card__body {
  padding: 2.4rem;
}
@media (max-width: 768px) {
  .order-excel-upload-result-card__body {
    padding: 2rem;
  }
}

.order-excel-upload-result__summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
  margin-bottom: 2.4rem;
}
@media (max-width: 768px) {
  .order-excel-upload-result__summary {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }
}
.order-excel-upload-result__stat {
  padding: 2rem;
  background: var(--clr-bg-primary);
  border-radius: 1rem;
  border: 0.1rem solid var(--clr-border-secondary);
  text-align: center;
}
.order-excel-upload-result__stat-icon {
  margin-bottom: 0.8rem;
  font-size: 2.4rem;
  line-height: 1;
}
.order-excel-upload-result__stat-icon i {
  display: inline-block;
}
.order-excel-upload-result__stat-label {
  font-size: 1.3rem;
  color: var(--clr-text-secondary);
  font-weight: 500;
  margin-bottom: 0.8rem;
}
.order-excel-upload-result__stat-value {
  font-size: 3.2rem;
  font-weight: 700;
  color: var(--clr-text-primary);
  line-height: 1.2;
}
.order-excel-upload-result__stat--process .order-excel-upload-result__stat-icon i {
  color: var(--clr-primary-500);
}
.order-excel-upload-result__stat--process .order-excel-upload-result__stat-value {
  color: var(--clr-primary-600);
}
.order-excel-upload-result__stat--success .order-excel-upload-result__stat-icon i {
  color: var(--clr-success-500);
}
.order-excel-upload-result__stat--success .order-excel-upload-result__stat-value {
  color: var(--clr-success-600);
}
.order-excel-upload-result__stat--error .order-excel-upload-result__stat-icon i {
  color: var(--clr-danger-500);
}
.order-excel-upload-result__stat--error .order-excel-upload-result__stat-value {
  color: var(--clr-danger-600);
}
.order-excel-upload-result__errors {
  margin-top: 2.4rem;
  padding-top: 2.4rem;
  border-top: 0.2rem solid var(--clr-border-secondary);
}
.order-excel-upload-result__errors-title {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--clr-text-primary);
  margin-bottom: 1.6rem;
}
.order-excel-upload-result__errors-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.order-excel-upload-result__error-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.4rem 1.8rem;
  background: var(--clr-error-50);
  border-radius: 0.8rem;
  border-left: 0.4rem solid var(--clr-error-500);
  color: var(--clr-error-700);
  font-size: 1.4rem;
  line-height: 1.6;
}
.order-excel-upload-result__error-item i {
  color: var(--clr-error-600);
  flex-shrink: 0;
  margin-top: 0.2rem;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(2rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (max-width: 768px) {
  .order-excel-upload-header {
    padding: 2rem 0 1.6rem;
  }
  .order-excel-upload-content {
    padding: 1.6rem;
  }
}
.om--index .om__index-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(26rem, 1fr));
  gap: 1.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.om__card--link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  position: relative;
  padding-right: 3rem;
}
.om__card--link:hover .om__card-arrow {
  opacity: 1;
  transform: translateX(0.2rem);
}

.om__card-arrow {
  position: absolute;
  right: 2rem;
  bottom: 2rem;
  font-size: 1.4rem;
  color: var(--clr-primary-600, #4f46e5);
  opacity: 0.7;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.om__card-arrow i {
  font-size: 1em;
}

.om__card--sql .om__card-icon {
  background: linear-gradient(135deg, var(--clr-warning-50, #fffbeb), var(--clr-warning-100, #fef3c7));
  color: var(--clr-warning-700, #b45309);
}

.om__card--serial .om__card-icon {
  background: linear-gradient(135deg, var(--clr-primary-100, #e0e7ff), var(--clr-primary-200, #c7d2fe));
  color: var(--clr-primary-700, #4338ca);
}

.om-tabs {
  margin-bottom: 2rem;
  border-bottom: 0.1rem solid var(--clr-border-secondary);
}

.om-tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.om-tabs__item {
  margin: 0;
}

.om-tabs__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.4rem;
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--clr-text-secondary);
  text-decoration: none;
  border-bottom: 0.2rem solid transparent;
  margin-bottom: -0.1rem;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.om-tabs__link:hover {
  color: var(--clr-text-primary);
}
.om-tabs__link--active {
  color: var(--clr-primary-600, #4f46e5);
  border-bottom-color: var(--clr-primary-600, #4f46e5);
}
.om-tabs__link i {
  font-size: 1.1em;
}

.om {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1.6rem 4rem;
}
.om__header {
  margin-bottom: 1.6rem;
}
.om__content {
  margin-top: 0.4rem;
}
.om__header-inner {
  padding-bottom: 1.6rem;
  border-bottom: 0.1rem solid var(--clr-border-secondary);
}
.om__title {
  font-size: clamp(2rem, 4vw, 2.6rem);
  font-weight: 700;
  color: var(--clr-text-primary);
  margin: 0 0 0.5rem;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.om__subtitle {
  font-size: 1.45rem;
  color: var(--clr-text-secondary);
  margin: 0;
  line-height: 1.55;
}
.om__feedback {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.2rem;
  padding: 0.9rem 1.4rem;
  border-radius: 0.8rem;
  font-size: 1.4rem;
  line-height: 1.5;
  font-weight: 500;
}
.om__feedback i {
  font-size: 1.5rem;
}
.om__feedback--success {
  background: var(--clr-success-bg, rgba(34, 197, 94, 0.12));
  color: var(--clr-success-text, #16a34a);
}
.om__feedback--error {
  background: var(--clr-danger-50, rgba(239, 68, 68, 0.1));
  color: var(--clr-danger-600, #dc2626);
}
.om__delete-form--inline {
  display: inline-block;
  margin-left: 0.8rem;
}
.om__actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  margin-bottom: 3rem;
}
@media (max-width: 544px) {
  .om__actions {
    grid-template-columns: 1fr;
  }
}
.om__card {
  background: var(--clr-bg-elevated);
  border: 0.1rem solid var(--clr-border-secondary);
  border-radius: 1.2rem;
  padding: 2rem 2.2rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.om__card:hover {
  box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.06);
  border-color: var(--clr-border-primary);
}
.om__card--backup .om__card-icon {
  background: linear-gradient(135deg, var(--clr-primary-100, #e0e7ff), var(--clr-primary-200, #c7d2fe));
  color: var(--clr-primary-700, #4338ca);
}
.om__card--recalc .om__card-icon {
  background: linear-gradient(135deg, var(--clr-info-50, #e0f2fe), var(--clr-info-100, #bae6fd));
  color: var(--clr-info-700, #0369a1);
}
.om__card--payload .om__card-icon {
  background: linear-gradient(135deg, var(--clr-success-50, #dcfce7), var(--clr-success-100, #bbf7d0));
  color: var(--clr-success-700, #15803d);
}
.om__card--single {
  max-width: 52rem;
}
.om__card-icon {
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.2rem;
  flex-shrink: 0;
}
.om__card-icon i {
  font-size: 1.8rem;
}
.om__card-title {
  font-size: 1.65rem;
  font-weight: 600;
  color: var(--clr-text-primary);
  margin: 0 0 0.8rem;
  line-height: 1.35;
}
.om__card-desc {
  font-size: 1.35rem;
  color: var(--clr-text-secondary);
  margin: 0 0 1.6rem;
  line-height: 1.6;
  flex: 1;
}
.om__card-desc code {
  font-size: 1.2rem;
  padding: 0.15rem 0.5rem;
  background: var(--clr-bg-tertiary);
  border-radius: 0.4rem;
}
.om__form {
  margin: 0;
}
.om__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.2rem;
}
.om__btn i {
  font-size: 1.1em;
}
.om__schedule {
  margin-bottom: 2.8rem;
  padding: 1.8rem 2rem;
  background: linear-gradient(180deg, var(--clr-bg-tertiary) 0%, var(--clr-bg-secondary) 100%);
  border-radius: 1rem;
  border: 0.1rem solid var(--clr-border-secondary);
}
.om__section-title {
  font-size: 1.55rem;
  font-weight: 600;
  color: var(--clr-text-primary);
  margin: 0 0 0.6rem;
  line-height: 1.4;
}
.om__schedule-desc {
  font-size: 1.35rem;
  color: var(--clr-text-secondary);
  margin: 0 0 1rem;
  line-height: 1.55;
}
.om__schedule-desc code {
  font-size: 1.2rem;
  padding: 0.15rem 0.4rem;
  background: var(--clr-bg-elevated);
  border-radius: 0.4rem;
}
.om__schedule-url {
  display: block;
  font-size: 1.25rem;
  padding: 1rem 1.2rem;
  background: var(--clr-bg-elevated);
  border-radius: 0.6rem;
  word-break: break-all;
  color: var(--clr-text-primary);
  border: 0.1rem solid var(--clr-border-secondary);
  font-family: ui-monospace, "SF Mono", Monaco, monospace;
}
.om__backups {
  margin-top: 0.4rem;
}
.om__backups .om__section-title {
  margin-bottom: 1.2rem;
}
.om__empty {
  text-align: center;
  padding: 3rem 2rem;
  background: var(--clr-bg-tertiary);
  border-radius: 1rem;
  border: 0.15rem dashed var(--clr-border-secondary);
}
.om__empty i {
  font-size: 3rem;
  color: var(--clr-text-tertiary);
  margin-bottom: 1rem;
  display: block;
}
.om__empty p {
  font-size: 1.4rem;
  color: var(--clr-text-secondary);
  margin: 0;
  line-height: 1.5;
}
.om__table-wrap {
  border-radius: 1rem;
  overflow: hidden;
  border: 0.1rem solid var(--clr-border-secondary);
  box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.04);
}
.om__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.4rem;
  background: var(--clr-bg-elevated);
}
.om__table th,
.om__table td {
  padding: 1.2rem 1.4rem;
  text-align: left;
  border-bottom: 0.1rem solid var(--clr-border-secondary);
}
.om__table th {
  font-weight: 600;
  color: var(--clr-text-secondary);
  background: var(--clr-bg-tertiary);
  font-size: 1.3rem;
  text-transform: none;
}
.om__table tr:last-child td {
  border-bottom: none;
}
.om__table tr:hover td {
  background: var(--clr-bg-secondary);
}
.om__table td {
  color: var(--clr-text-primary);
  vertical-align: middle;
}
.om__table .no-btn {
  white-space: nowrap;
}
.om__table .no-btn i {
  margin-right: 0.35rem;
}
.om__filename {
  font-family: ui-monospace, "SF Mono", Monaco, monospace;
  font-size: 1.3rem;
}

.om-recalc-modal {
  max-width: 44rem;
}
.om-recalc-modal .no-modal__body {
  padding-bottom: 0.5rem;
}

.om-recalc-modal__message {
  font-size: 1.4rem;
  color: var(--clr-text-secondary);
  line-height: 1.6;
  margin: 0;
}

.om-recalc-modal__progress {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem 0;
  font-size: 1.35rem;
  color: var(--clr-text-secondary);
}
.om-recalc-modal__progress i {
  color: var(--clr-primary-500);
  font-size: 1.4rem;
}

.om-recalc-modal__result {
  padding: 1rem 1.2rem;
  border-radius: 0.8rem;
  font-size: 1.35rem;
  line-height: 1.5;
}
.om-recalc-modal__result--success {
  background: var(--clr-success-bg, rgba(34, 197, 94, 0.12));
  color: var(--clr-success-text, #16a34a);
}
.om-recalc-modal__result--error {
  background: var(--clr-danger-50, rgba(239, 68, 68, 0.1));
  color: var(--clr-danger-600, #dc2626);
}

.om-recalc-modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
}

.om-backfill-modal {
  max-width: 44rem;
}
.om-backfill-modal .no-modal__body {
  padding-bottom: 0.5rem;
}

.om-backfill-modal__message {
  font-size: 1.4rem;
  color: var(--clr-text-secondary);
  line-height: 1.6;
  margin: 0 0 1.2rem;
}

.om-backfill-modal__progress {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem 0 1.2rem;
  font-size: 1.35rem;
  color: var(--clr-text-secondary);
}
.om-backfill-modal__progress i {
  color: var(--clr-primary-500);
  font-size: 1.4rem;
}

.om-backfill-modal__result {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 1rem 1.2rem;
  border-radius: 0.8rem;
  font-size: 1.35rem;
  line-height: 1.5;
  margin-bottom: 1.2rem;
  white-space: pre-wrap;
}
.om-backfill-modal__result i {
  flex-shrink: 0;
  margin-top: 0.15rem;
}
.om-backfill-modal__result--success {
  background: var(--clr-success-bg, rgba(34, 197, 94, 0.12));
  color: var(--clr-success-text, #16a34a);
}
.om-backfill-modal__result--error {
  background: var(--clr-danger-50, rgba(239, 68, 68, 0.1));
  color: var(--clr-danger-600, #dc2626);
}

.om-backfill-modal .no-modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
}

.om-backup-delete-modal {
  max-width: 44rem;
}

.om-backup-delete-modal__message {
  font-size: 1.4rem;
  color: var(--clr-text-secondary);
  line-height: 1.6;
  margin: 0;
}

.om-backup-delete-modal .no-modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
}

.sr-only {
  position: absolute;
  width: 0.1rem;
  height: 0.1rem;
  padding: 0;
  margin: -0.1rem;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.om--sql-executor .om__content {
  margin-top: 0;
}

.om-sql {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}

.om-sql__editor-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.om-sql__label {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--clr-text-primary);
}

.om-sql__editor {
  width: 100%;
  min-height: 16rem;
  padding: 1.2rem 1.4rem;
  font-family: ui-monospace, "SF Mono", Monaco, "Cascadia Code", monospace;
  font-size: 1.35rem;
  line-height: 1.6;
  color: var(--clr-text-primary);
  background: var(--clr-bg-elevated);
  border: 0.1rem solid var(--clr-border-secondary);
  border-radius: 0.8rem;
  resize: vertical;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.om-sql__editor:focus {
  outline: none;
  border-color: var(--clr-primary-500);
  box-shadow: 0 0 0 0.2rem rgba(var(--clr-primary-rgb, 99, 102, 241), 0.2);
}
.om-sql__editor::placeholder {
  color: var(--clr-text-tertiary);
}

.om-sql__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.om-sql__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.om-sql__btn i {
  font-size: 1em;
}

.om-sql__result-section {
  padding: 1.8rem 2rem;
  background: var(--clr-bg-tertiary);
  border: 0.1rem solid var(--clr-border-secondary);
  border-radius: 1rem;
}

.om-sql__result-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--clr-text-primary);
  margin: 0 0 1rem;
  line-height: 1.4;
}

.om-sql__result-placeholder {
  font-size: 1.35rem;
  color: var(--clr-text-tertiary);
  min-height: 2rem;
}
.om-sql__result-placeholder .fa-spinner {
  margin-right: 0.5rem;
}

.om-sql__result-content {
  margin-top: 0.5rem;
}

.om-sql__result-meta {
  font-size: 1.3rem;
  color: var(--clr-text-secondary);
  margin-bottom: 1rem;
}

.om-sql__result-table-wrap {
  overflow-x: auto;
  border-radius: 0.6rem;
  border: 0.1rem solid var(--clr-border-secondary);
  margin-bottom: 1rem;
}

.om-sql__result-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.35rem;
  background: var(--clr-bg-elevated);
}
.om-sql__result-table th,
.om-sql__result-table td {
  padding: 0.8rem 1.2rem;
  text-align: left;
  border-bottom: 0.1rem solid var(--clr-border-secondary);
}
.om-sql__result-table th {
  font-weight: 600;
  color: var(--clr-text-secondary);
  background: var(--clr-bg-tertiary);
  white-space: nowrap;
}
.om-sql__result-table tr:last-child td {
  border-bottom: none;
}
.om-sql__result-table td {
  color: var(--clr-text-primary);
  vertical-align: top;
}

.om-sql__result-text {
  display: block;
  margin: 0;
  padding: 1rem 1.2rem;
  font-family: ui-monospace, "SF Mono", Monaco, monospace;
  font-size: 1.3rem;
  line-height: 1.5;
  color: var(--clr-text-primary);
  background: var(--clr-bg-elevated);
  border-radius: 0.6rem;
  border: 0.1rem solid var(--clr-border-secondary);
  white-space: pre-wrap;
  word-break: break-word;
}

.om-sql__result-error {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 1rem 1.2rem;
  border-radius: 0.8rem;
  font-size: 1.35rem;
  line-height: 1.5;
  background: var(--clr-danger-50, rgba(239, 68, 68, 0.1));
  color: var(--clr-danger-600, #dc2626);
}
.om-sql__result-error i {
  flex-shrink: 0;
  margin-top: 0.15rem;
}

.no-pv__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.75rem;
  margin-top: 1.75rem;
}
@media (min-width: 1024px) and (max-width: 1399px) {
  .no-pv__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
}
@media (max-width: 1024px) {
  .no-pv__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
}
@media (max-width: 768px) {
  .no-pv__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }
}
@media (max-width: 544px) {
  .no-pv__grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}
.no-pv__card {
  background: var(--clr-bg-elevated);
  border: 0.1rem solid var(--clr-border-secondary);
  border-radius: 1rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.no-pv__card:hover {
  border-color: var(--clr-border-primary);
  box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.08);
}
.no-pv__image-wrap {
  position: relative;
  width: 100%;
  padding-bottom: 62.5%;
  background: var(--clr-bg-tertiary);
  overflow: hidden;
}
.no-pv__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.no-pv__image-actions {
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.35rem;
  max-width: calc(100% - 1rem);
}
.no-pv__image-icon-btn {
  width: 2.2rem;
  height: 2.2rem;
  padding: 0;
  border: none;
  border-radius: 0.45rem;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s ease, transform 0.15s ease;
}
.no-pv__image-icon-btn:hover {
  background: rgba(0, 0, 0, 0.75);
  transform: scale(1.05);
}
.no-pv__image-icon-btn:focus {
  outline: 0.2rem solid var(--clr-primary, #2563eb);
  outline-offset: 0.2rem;
}
.no-pv__image-icon-btn i {
  font-size: 1rem;
}
.no-pv__image-icon-btn--zoom i {
  font-size: 1.05rem;
}
.no-pv__body {
  padding: 1.2rem 1.4rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.no-pv__name {
  font-size: 1.65rem;
  font-weight: 700;
  color: var(--clr-text-primary);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0 0 1rem 0;
  padding-bottom: 0.75rem;
  border-bottom: 0.1rem solid var(--clr-border-secondary);
}
.no-pv__meta-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
}
.no-pv__meta-row {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: 0.75rem;
  align-items: start;
  margin: 0;
  min-height: 1.6em;
}
.no-pv__meta-row dt,
.no-pv__meta-row dd {
  margin: 0;
}
.no-pv__meta-row--description {
  align-items: start;
}
.no-pv__meta-row--description .no-pv__value--description {
  min-width: 0;
}
.no-pv__label {
  font-size: 1rem;
  font-weight: 600;
  color: var(--clr-text-tertiary);
  letter-spacing: 0.02em;
  flex-shrink: 0;
  min-width: 8rem;
}
.no-pv__label::after {
  content: ":";
  margin-left: 0.1em;
}
.no-pv__value {
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--clr-text-primary);
  line-height: 1.45;
  word-break: break-word;
  min-width: 0;
}
.no-pv__value--price {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--clr-text-primary);
  white-space: nowrap;
}
.no-pv__value--description {
  font-size: 1.15rem;
  color: var(--clr-text-secondary);
  line-height: 1.5;
}
.no-pv__meta-row--price {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 0.15rem solid var(--clr-border-secondary);
}
.no-pv__meta-row--price .no-pv__label {
  font-size: 1rem;
}
.no-pv__details {
  margin: 0;
  padding: 0;
}
.no-pv__details-summary {
  font-size: inherit;
  font-weight: 500;
  color: var(--clr-text-primary);
  cursor: pointer;
  list-style: none;
  user-select: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.no-pv__details-summary::-webkit-details-marker {
  display: none;
}
.no-pv__details-summary::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-right: 0.35rem;
  border-left: 0.35rem solid var(--clr-text-secondary);
  border-top: 0.25rem solid transparent;
  border-bottom: 0.25rem solid transparent;
  vertical-align: middle;
  transition: transform 0.2s ease;
}
.no-pv__details[open] .no-pv__details-summary {
  -webkit-line-clamp: unset;
  overflow: visible;
}
.no-pv__details[open] .no-pv__details-summary::before {
  transform: rotate(90deg);
}
.no-pv__details-content {
  font-size: 1.15rem;
  color: var(--clr-text-secondary);
  line-height: 1.55;
  margin-top: 0.5rem;
  padding-left: 1rem;
}
.no-pv__empty {
  grid-column: 1/-1;
  text-align: center;
  padding: 4rem 2rem;
  color: var(--clr-text-secondary);
  font-size: 1.45rem;
  line-height: 1.5;
}

.no-pv-image-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0.2s ease, opacity 0.2s ease;
}
.no-pv-image-modal--open {
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
}
.no-pv-image-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  cursor: pointer;
}
.no-pv-image-modal__inner {
  position: relative;
  max-width: 95vw;
  max-height: 95vh;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.no-pv-image-modal__close {
  position: absolute;
  top: -3rem;
  right: 0;
  width: 2.8rem;
  height: 2.8rem;
  padding: 0;
  border: none;
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}
.no-pv-image-modal__close:hover {
  background: rgba(255, 255, 255, 0.25);
}
.no-pv-image-modal__close:focus {
  outline: 0.2rem solid #fff;
  outline-offset: 0.2rem;
}
.no-pv-image-modal__close i {
  font-size: 1.4rem;
}
.no-pv-image-modal__content {
  max-width: 100%;
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.no-pv-image-modal__img {
  max-width: 100%;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.no-pv-info-modal {
  position: fixed;
  inset: 0;
  z-index: 1110;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 3vw, 1.75rem);
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0.2s ease, opacity 0.2s ease;
}
.no-pv-info-modal--open {
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
}
.no-pv-info-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  cursor: pointer;
}
.no-pv-info-modal__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: min(96vw, 52rem);
  max-height: min(90vh, 48rem);
  background: var(--clr-bg-elevated);
  border: 0.1rem solid var(--clr-border-secondary);
  border-radius: clamp(0.75rem, 1.5vw, 1.1rem);
  box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
@media (max-width: 544px) {
  .no-pv-info-modal__panel {
    max-height: 94vh;
  }
}
.no-pv-info-modal--colors .no-pv-info-modal__panel {
  max-width: min(96vw, 66rem);
  max-height: min(94vh, 60rem);
}
.no-pv-info-modal--options .no-pv-info-modal__panel {
  max-width: min(96vw, 44rem);
  max-height: min(88vh, 38rem);
}
.no-pv-info-modal--loupe .no-pv-info-modal__panel {
  max-width: min(96vw, 50rem);
  max-height: min(90vh, 44rem);
}
.no-pv-info-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(1rem, 2.5vw, 1.5rem) clamp(1rem, 3vw, 1.75rem);
  border-bottom: 0.1rem solid var(--clr-border-secondary);
  flex-shrink: 0;
}
.no-pv-info-modal__title {
  margin: 0;
  font-size: clamp(1.55rem, 1.35rem + 0.65vw, 2rem);
  font-weight: 700;
  color: var(--clr-text-primary);
  line-height: 1.3;
  padding-right: 0.5rem;
}
.no-pv-info-modal__close {
  flex-shrink: 0;
  width: clamp(2.4rem, 5vw, 2.85rem);
  height: clamp(2.4rem, 5vw, 2.85rem);
  padding: 0;
  border: none;
  border-radius: 0.45rem;
  background: transparent;
  color: var(--clr-text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, color 0.2s ease;
}
.no-pv-info-modal__close:hover {
  background: var(--clr-bg-tertiary);
  color: var(--clr-text-primary);
}
.no-pv-info-modal__close:focus {
  outline: 0.2rem solid var(--clr-primary, #2563eb);
  outline-offset: 0.15rem;
}
.no-pv-info-modal__close i {
  font-size: clamp(1.2rem, 2.8vw, 1.45rem);
}
.no-pv-info-modal__body {
  padding: clamp(1rem, 3vw, 1.75rem);
  padding-top: clamp(0.75rem, 2vw, 1.1rem);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  font-size: clamp(1.25rem, 1.1rem + 0.35vw, 1.45rem);
  color: var(--clr-text-primary);
  line-height: 1.55;
}
.no-pv-info-modal__body .no-pv-preview-product {
  margin: 0 0 clamp(1rem, 2.5vw, 1.5rem) 0;
  font-size: clamp(1.2rem, 1.05rem + 0.4vw, 1.4rem);
  color: var(--clr-text-secondary);
}
.no-pv-info-modal__body .no-pv-preview-section-title {
  margin: 1rem 0 0.5rem 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--clr-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.no-pv-info-modal__body .no-pv-preview-section-title:first-child {
  margin-top: 0;
}
.no-pv-info-modal__body .no-pv-preview-dl {
  margin: 0;
  display: grid;
  gap: 0.45rem 1rem;
}
.no-pv-info-modal__body .no-pv-preview-dl__row {
  display: grid;
  grid-template-columns: minmax(8rem, 11rem) 1fr;
  gap: 0.75rem;
  align-items: start;
}
@media (max-width: 544px) {
  .no-pv-info-modal__body .no-pv-preview-dl__row {
    grid-template-columns: 1fr;
  }
}
.no-pv-info-modal__body .no-pv-preview-dl__dt {
  margin: 0;
  font-weight: 600;
  color: var(--clr-text-secondary);
  font-size: clamp(1.1rem, 1rem + 0.25vw, 1.25rem);
}
.no-pv-info-modal__body .no-pv-preview-dl__dd {
  margin: 0;
  word-break: break-word;
}
.no-pv-info-modal__body .no-pv-preview-flags {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.35rem;
}
.no-pv-info-modal__body .no-pv-preview-flags__item {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.35rem 0;
  border-bottom: 0.05rem solid var(--clr-border-secondary);
  font-size: clamp(1.1rem, 1rem + 0.25vw, 1.25rem);
}
.no-pv-info-modal__body .no-pv-preview-flags__item:last-child {
  border-bottom: none;
}
.no-pv-info-modal__body .no-pv-preview-badge {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 0.35rem;
  font-size: clamp(0.95rem, 0.9rem + 0.15vw, 1.1rem);
  font-weight: 600;
}
.no-pv-info-modal__body .no-pv-preview-badge--on {
  background: rgba(34, 197, 94, 0.18);
  color: var(--clr-success, #22c55e);
}
.no-pv-info-modal__body .no-pv-preview-badge--off {
  background: var(--clr-bg-tertiary);
  color: var(--clr-text-tertiary);
}
.no-pv-info-modal__body .no-pv-preview--colors-only {
  display: flex;
  flex-direction: column;
  gap: clamp(0.85rem, 2vw, 1.25rem);
}
.no-pv-info-modal__body .no-pv-preview--options-only {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.no-pv-info-modal__body .no-pv-preview--options-only .no-pv-preview-product {
  margin-bottom: clamp(0.65rem, 1.5vw, 1rem);
}
.no-pv-info-modal__body .no-pv-preview-color-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
  gap: clamp(0.75rem, 2vw, 1.25rem);
}
.no-pv-info-modal__body .no-pv-preview-color-card {
  background: var(--clr-bg-tertiary);
  border: 0.1rem solid var(--clr-border-secondary);
  border-radius: 0.65rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.no-pv-info-modal__body .no-pv-preview-color-card__media {
  aspect-ratio: 4/3;
  background: var(--clr-bg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.no-pv-info-modal__body .no-pv-preview-color-card__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.no-pv-info-modal__body .no-pv-preview-color-card__footer {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: clamp(0.65rem, 1.8vw, 0.9rem);
}
.no-pv-info-modal__body .no-pv-preview-color-card__name {
  font-size: clamp(1.15rem, 1rem + 0.35vw, 1.35rem);
  font-weight: 600;
  color: var(--clr-text-primary);
  line-height: 1.35;
  word-break: break-word;
}
.no-pv-info-modal__body .no-pv-preview-color-block {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.3rem;
  border: 0.1rem solid var(--clr-border-primary);
  flex-shrink: 0;
}
.no-pv-info-modal__body .no-pv-preview-color-block--card {
  width: clamp(1.75rem, 4vw, 2.1rem);
  height: clamp(1.75rem, 4vw, 2.1rem);
}
.no-pv-info-modal__body .no-pv-preview-option-stack {
  display: flex;
  flex-direction: column;
  gap: clamp(1.1rem, 2.5vw, 1.65rem);
}
.no-pv-info-modal__body .no-pv-preview-option-block__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.65rem;
}
.no-pv-info-modal__body .no-pv-preview-option-block__name {
  font-size: clamp(1.3rem, 1.1rem + 0.45vw, 1.55rem);
  font-weight: 700;
  color: var(--clr-text-primary);
}
.no-pv-info-modal__body .no-pv-preview-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.6rem;
}
.no-pv-info-modal__body .no-pv-preview-chip {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.45rem 0.75rem;
  border-radius: 0.5rem;
  background: var(--clr-bg-tertiary);
  border: 0.08rem solid var(--clr-border-secondary);
  font-size: clamp(1.15rem, 1.05rem + 0.25vw, 1.35rem);
  font-weight: 500;
  color: var(--clr-text-primary);
  line-height: 1.35;
  word-break: break-word;
}
.no-pv-info-modal__body .no-pv-preview-chip .no-pv-preview-chip-extra {
  font-size: 0.92em;
  font-weight: 600;
  color: var(--clr-text-tertiary);
  white-space: nowrap;
}
.no-pv-info-modal--colors .no-pv-info-modal__body .no-pv-preview-color-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr));
}
.no-pv-info-modal--options .no-pv-info-modal__body .no-pv-preview-chip {
  padding: 0.5rem 0.85rem;
  font-size: clamp(1.2rem, 1.08rem + 0.32vw, 1.45rem);
}

/*# sourceMappingURL=style.css.map */