*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}.absolute{position:absolute;}.fixed{position:fixed;}.relative{position:relative;}.sticky{position:sticky;}.inset-0{inset:0;}.bottom-0{bottom:0;}.right-2{right:0.5rem;}.top-0{top:0;}.top-2{top:0.5rem;}.z-10{z-index:10;}.z-50{z-index:50;}.grid{display:grid;}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr));}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}.mx-auto{margin-left:auto;margin-right:auto;}.mb-0{margin-bottom:0;}.mb-0\.5{margin-bottom:0.125rem;}.mb-1{margin-bottom:0.25rem;}.mb-2{margin-bottom:0.5rem;}.ml-3{margin-left:0.75rem;}.mt-0\.5{margin-top:0.125rem;}.mt-1{margin-top:0.25rem;}.mt-2{margin-top:0.5rem;}.mt-3{margin-top:0.75rem;}.mt-4{margin-top:1rem;}.block{display:block;}.inline-block{display:inline-block;}.hidden{display:none;}.h-12{height:3rem;}.h-16{height:4rem;}.h-2{height:0.5rem;}.h-3{height:0.75rem;}.h-4{height:1rem;}.h-48{height:12rem;}.h-6{height:1.5rem;}.h-64{height:16rem;}.h-full{height:100%;}.max-h-\[2000px\]{max-height:2000px;}.max-h-\[70vh\]{max-height:70vh;}.max-h-0{max-height:0;}.max-h-60{max-height:15rem;}.max-h-96{max-height:24rem;}.max-w-2xl{max-width:42rem;}.max-w-4xl{max-width:56rem;}.max-w-full{max-width:100%;}.min-h-screen{min-height:100vh;}.min-w-0{min-width:0;}.w-12{width:3rem;}.w-20{width:5rem;}.w-3{width:0.75rem;}.w-4{width:1rem;}.w-6{width:1.5rem;}.w-full{width:100%;}.flex{display:flex;}.flex-1{flex:1 1 0%;}.flex-col{flex-direction:column;}.transform{transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}@keyframes pulse{0%, 100% {opacity:1} 50% {opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(0.4,0,.6,1) infinite;}.cursor-pointer{cursor:pointer;}.cursor-wait{cursor:wait;}.cursor-not-allowed{cursor:not-allowed;}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed;}.cursor-grab{cursor:grab;}.cursor-grabbing{cursor:grabbing;}.appearance-none{-webkit-appearance:none;appearance:none;}.items-center{align-items:center;}.justify-center{justify-content:center;}.justify-between{justify-content:space-between;}.gap-1{gap:0.25rem;}.gap-1\.5{gap:0.375rem;}.gap-2{gap:0.5rem;}.gap-3{gap:0.75rem;}.gap-4{gap:1rem;}.space-y-0\.5>:not([hidden])~:not([hidden]){--un-space-y-reverse:0;margin-top:calc(0.125rem * calc(1 - var(--un-space-y-reverse)));margin-bottom:calc(0.125rem * var(--un-space-y-reverse));}.space-y-1\.5>:not([hidden])~:not([hidden]){--un-space-y-reverse:0;margin-top:calc(0.375rem * calc(1 - var(--un-space-y-reverse)));margin-bottom:calc(0.375rem * var(--un-space-y-reverse));}.space-y-1>:not([hidden])~:not([hidden]){--un-space-y-reverse:0;margin-top:calc(0.25rem * calc(1 - var(--un-space-y-reverse)));margin-bottom:calc(0.25rem * var(--un-space-y-reverse));}.space-y-2>:not([hidden])~:not([hidden]){--un-space-y-reverse:0;margin-top:calc(0.5rem * calc(1 - var(--un-space-y-reverse)));margin-bottom:calc(0.5rem * var(--un-space-y-reverse));}.space-y-3>:not([hidden])~:not([hidden]){--un-space-y-reverse:0;margin-top:calc(0.75rem * calc(1 - var(--un-space-y-reverse)));margin-bottom:calc(0.75rem * var(--un-space-y-reverse));}.space-y-4>:not([hidden])~:not([hidden]){--un-space-y-reverse:0;margin-top:calc(1rem * calc(1 - var(--un-space-y-reverse)));margin-bottom:calc(1rem * var(--un-space-y-reverse));}.overflow-hidden{overflow:hidden;}.overflow-y-auto{overflow-y:auto;}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.whitespace-pre-line{white-space:pre-line;}.break-words{overflow-wrap:break-word;}.border{border-width:1px;}.border-2{border-width:2px;}.border-b{border-bottom-width:1px;}.border-t{border-top-width:1px;}.border-blue-200{--un-border-opacity:1;border-color:rgb(191 219 254 / var(--un-border-opacity));}.border-blue-400{--un-border-opacity:1;border-color:rgb(96 165 250 / var(--un-border-opacity));}.border-blue-500{--un-border-opacity:1;border-color:rgb(59 130 246 / var(--un-border-opacity));}.border-gray-100{--un-border-opacity:1;border-color:rgb(243 244 246 / var(--un-border-opacity));}.border-gray-200{--un-border-opacity:1;border-color:rgb(229 231 235 / var(--un-border-opacity));}.border-gray-300{--un-border-opacity:1;border-color:rgb(209 213 219 / var(--un-border-opacity));}.border-green-200{--un-border-opacity:1;border-color:rgb(187 247 208 / var(--un-border-opacity));}.border-purple-200{--un-border-opacity:1;border-color:rgb(233 213 255 / var(--un-border-opacity));}.border-white{--un-border-opacity:1;border-color:rgb(255 255 255 / var(--un-border-opacity));}.border-yellow-200{--un-border-opacity:1;border-color:rgb(254 240 138 / var(--un-border-opacity));}.hover\:border-blue-300:hover{--un-border-opacity:1;border-color:rgb(147 197 253 / var(--un-border-opacity));}.hover\:border-blue-500:hover{--un-border-opacity:1;border-color:rgb(59 130 246 / var(--un-border-opacity));}.rounded{border-radius:0.25rem;}.rounded-full{border-radius:9999px;}.rounded-lg{border-radius:0.5rem;}.rounded-b-lg{border-bottom-left-radius:0.5rem;border-bottom-right-radius:0.5rem;}.rounded-t-lg{border-top-left-radius:0.5rem;border-top-right-radius:0.5rem;}.border-dashed{border-style:dashed;}.bg-black{--un-bg-opacity:1;background-color:rgb(0 0 0 / var(--un-bg-opacity));}.bg-blue-100{--un-bg-opacity:1;background-color:rgb(219 234 254 / var(--un-bg-opacity));}.bg-blue-50{--un-bg-opacity:1;background-color:rgb(239 246 255 / var(--un-bg-opacity));}.bg-blue-500{--un-bg-opacity:1;background-color:rgb(59 130 246 / var(--un-bg-opacity));}.bg-blue-500\/50{background-color:rgb(59 130 246 / 0.5);}.bg-blue-600{--un-bg-opacity:1;background-color:rgb(37 99 235 / var(--un-bg-opacity));}.bg-gray-100{--un-bg-opacity:1;background-color:rgb(243 244 246 / var(--un-bg-opacity));}.bg-gray-200{--un-bg-opacity:1;background-color:rgb(229 231 235 / var(--un-bg-opacity));}.bg-gray-300{--un-bg-opacity:1;background-color:rgb(209 213 219 / var(--un-bg-opacity));}.bg-gray-50{--un-bg-opacity:1;background-color:rgb(249 250 251 / var(--un-bg-opacity));}.bg-green-100{--un-bg-opacity:1;background-color:rgb(220 252 231 / var(--un-bg-opacity));}.bg-green-50{--un-bg-opacity:1;background-color:rgb(240 253 244 / var(--un-bg-opacity));}.bg-green-500{--un-bg-opacity:1;background-color:rgb(34 197 94 / var(--un-bg-opacity));}.bg-green-600{--un-bg-opacity:1;background-color:rgb(22 163 74 / var(--un-bg-opacity));}.bg-purple-500{--un-bg-opacity:1;background-color:rgb(168 85 247 / var(--un-bg-opacity));}.bg-red-500{--un-bg-opacity:1;background-color:rgb(239 68 68 / var(--un-bg-opacity));}.bg-white{--un-bg-opacity:1;background-color:rgb(255 255 255 / var(--un-bg-opacity));}.bg-yellow-50{--un-bg-opacity:1;background-color:rgb(254 252 232 / var(--un-bg-opacity));}.hover\:bg-blue-50:hover{--un-bg-opacity:1;background-color:rgb(239 246 255 / var(--un-bg-opacity));}.hover\:bg-blue-500\/80:hover{background-color:rgb(59 130 246 / 0.8);}.hover\:bg-blue-600:hover{--un-bg-opacity:1;background-color:rgb(37 99 235 / var(--un-bg-opacity));}.hover\:bg-blue-700:hover{--un-bg-opacity:1;background-color:rgb(29 78 216 / var(--un-bg-opacity));}.hover\:bg-gray-200:hover{--un-bg-opacity:1;background-color:rgb(229 231 235 / var(--un-bg-opacity));}.hover\:bg-gray-300:hover{--un-bg-opacity:1;background-color:rgb(209 213 219 / var(--un-bg-opacity));}.hover\:bg-gray-50:hover{--un-bg-opacity:1;background-color:rgb(249 250 251 / var(--un-bg-opacity));}.hover\:bg-green-600:hover{--un-bg-opacity:1;background-color:rgb(22 163 74 / var(--un-bg-opacity));}.hover\:bg-green-700:hover{--un-bg-opacity:1;background-color:rgb(21 128 61 / var(--un-bg-opacity));}.hover\:bg-purple-600:hover{--un-bg-opacity:1;background-color:rgb(147 51 234 / var(--un-bg-opacity));}.hover\:bg-red-600:hover{--un-bg-opacity:1;background-color:rgb(220 38 38 / var(--un-bg-opacity));}.bg-opacity-50{--un-bg-opacity:0.5;}.from-blue-50{--un-gradient-from-position:0%;--un-gradient-from:rgb(239 246 255 / var(--un-from-opacity, 1)) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(239 246 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);}.to-green-50{--un-gradient-to-position:100%;--un-gradient-to:rgb(240 253 244 / var(--un-to-opacity, 1)) var(--un-gradient-to-position);}.bg-gradient-to-r{--un-gradient-shape:to right;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));}.object-cover{object-fit:cover;}.p-1\.5{padding:0.375rem;}.p-2{padding:0.5rem;}.p-2\.5{padding:0.625rem;}.p-3{padding:0.75rem;}.p-4{padding:1rem;}.px-1\.5{padding-left:0.375rem;padding-right:0.375rem;}.px-2{padding-left:0.5rem;padding-right:0.5rem;}.px-3{padding-left:0.75rem;padding-right:0.75rem;}.px-4{padding-left:1rem;padding-right:1rem;}.px-6{padding-left:1.5rem;padding-right:1.5rem;}.py-0\.5{padding-top:0.125rem;padding-bottom:0.125rem;}.py-1{padding-top:0.25rem;padding-bottom:0.25rem;}.py-1\.5{padding-top:0.375rem;padding-bottom:0.375rem;}.py-2{padding-top:0.5rem;padding-bottom:0.5rem;}.py-3{padding-top:0.75rem;padding-bottom:0.75rem;}.pb-1{padding-bottom:0.25rem;}.text-center{text-align:center;}.align-middle{vertical-align:middle;}.text-2xl{font-size:1.5rem;line-height:2rem;}.text-4xl{font-size:2.25rem;line-height:2.5rem;}.text-base{font-size:1rem;line-height:1.5rem;}.text-lg{font-size:1.125rem;line-height:1.75rem;}.text-sm{font-size:0.875rem;line-height:1.25rem;}.text-xl{font-size:1.25rem;line-height:1.75rem;}.text-xs{font-size:0.75rem;line-height:1rem;}.text-blue-600{--un-text-opacity:1;color:rgb(37 99 235 / var(--un-text-opacity));}.text-blue-700{--un-text-opacity:1;color:rgb(29 78 216 / var(--un-text-opacity));}.text-gray-400{--un-text-opacity:1;color:rgb(156 163 175 / var(--un-text-opacity));}.text-gray-500{--un-text-opacity:1;color:rgb(107 114 128 / var(--un-text-opacity));}.text-gray-600{--un-text-opacity:1;color:rgb(75 85 99 / var(--un-text-opacity));}.text-gray-700{--un-text-opacity:1;color:rgb(55 65 81 / var(--un-text-opacity));}.text-gray-800{--un-text-opacity:1;color:rgb(31 41 55 / var(--un-text-opacity));}.text-green-700{--un-text-opacity:1;color:rgb(21 128 61 / var(--un-text-opacity));}.text-green-800{--un-text-opacity:1;color:rgb(22 101 52 / var(--un-text-opacity));}.text-white{--un-text-opacity:1;color:rgb(255 255 255 / var(--un-text-opacity));}.text-yellow-700{--un-text-opacity:1;color:rgb(161 98 7 / var(--un-text-opacity));}.text-yellow-800{--un-text-opacity:1;color:rgb(133 77 14 / var(--un-text-opacity));}.hover\:text-blue-800:hover{--un-text-opacity:1;color:rgb(30 64 175 / var(--un-text-opacity));}.font-bold{font-weight:700;}.font-medium{font-weight:500;}.font-semibold{font-weight:600;}.underline{text-decoration-line:underline;}.opacity-0{opacity:0;}.group:hover .group-hover\:opacity-100{opacity:1;}.disabled\:opacity-50:disabled{opacity:0.5;}.shadow-lg{--un-shadow:var(--un-shadow-inset) 0 10px 15px -3px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 4px 6px -4px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}.shadow-md{--un-shadow:var(--un-shadow-inset) 0 4px 6px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 2px 4px -2px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}.shadow-sm{--un-shadow:var(--un-shadow-inset) 0 1px 2px 0 var(--un-shadow-color, rgb(0 0 0 / 0.05));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}.shadow-xl{--un-shadow:var(--un-shadow-inset) 0 20px 25px -5px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 8px 10px -6px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px;}.focus\:ring-2:focus{--un-ring-width:2px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}.focus\:ring-blue-500:focus{--un-ring-opacity:1;--un-ring-color:rgb(59 130 246 / var(--un-ring-opacity));}.focus\:ring-gray-400:focus{--un-ring-opacity:1;--un-ring-color:rgb(156 163 175 / var(--un-ring-opacity));}.focus\:ring-green-500:focus{--un-ring-opacity:1;--un-ring-color:rgb(34 197 94 / var(--un-ring-opacity));}.focus\:ring-opacity-50:focus{--un-ring-opacity:0.5;}.blur{--un-blur:blur(8px);filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);}.grayscale{--un-grayscale:grayscale(1);filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}.duration-200{transition-duration:200ms;}.duration-300{transition-duration:300ms;}.ease-in-out{transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);}@media (min-width: 768px){.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}}
/* 포털웹 CSS Variables 임포트 (포털 배포 시 자동으로 로드됨) */
/* @import url('/assets/css/theme-system.css'); */

/* 전역 스타일 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* 다크모드 지원 */
.dark {
  color-scheme: dark;
}

/* 탭 전환 유틸리티 */
.hidden {
  display: none !important;
}

/* 탭 버튼 활성 상태 */
.tab-active {
  color: #3b82f6 !important;
  border-bottom-color: #3b82f6 !important;
}

.dark .tab-active {
  color: #60a5fa !important;
  border-bottom-color: #60a5fa !important;
}

/* Canvas 컨테이너 기본 스타일 */
#canvas-container {
  position: relative;
  width: 100%;
  height: 100%;
}

/* 스크롤바 커스터마이징 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(128, 128, 128, 0.3);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(128, 128, 128, 0.5);
}

.dark ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
}

.dark ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* CanvasSizeSelector Styles */
.canvas-size-selector {
  padding: 1rem;
}

/* 프리셋 버튼 그리드 */
.preset-grid {
  margin-bottom: 1.5rem;
}

.preset-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
  border: 2px solid #e5e7eb;
  border-radius: 0.5rem;
  background-color: #ffffff;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 4rem;
}

.preset-button:hover {
  border-color: #6366f1;
  background-color: #f9fafb;
  transform: translateY(-2px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.preset-button:active {
  transform: translateY(0);
}

.preset-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 0.25rem;
  text-align: center;
}

.preset-size {
  font-size: 0.75rem;
  color: #6b7280;
  font-weight: 400;
}

/* 다크모드 프리셋 버튼 */
.dark .preset-button {
  background-color: #1f2937;
  border-color: #374151;
}

.dark .preset-button:hover {
  background-color: #374151;
  border-color: #6366f1;
}

.dark .preset-name {
  color: #f9fafb;
}

.dark .preset-size {
  color: #9ca3af;
}

/* 커스텀 크기 입력 */
.custom-size-section {
  margin-bottom: 1.5rem;
}

.custom-size-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.input-group {
  display: flex;
  flex-direction: column;
}

.input-label {
  font-size: 0.75rem;
  color: #6b7280;
  margin-bottom: 0.25rem;
  font-weight: 500;
}

.dark .input-label {
  color: #9ca3af;
}

.custom-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  color: #111827;
  background-color: #ffffff;
  transition: all 0.2s ease;
  outline: none;
}

.custom-input:focus {
  border-color: #6366f1;
  ring: 2px;
  ring-color: rgba(99, 102, 241, 0.2);
}

.custom-input:hover {
  border-color: #9ca3af;
}

.dark .custom-input {
  background-color: #1f2937;
  border-color: #374151;
  color: #f9fafb;
}

.dark .custom-input:focus {
  border-color: #6366f1;
}

.dark .custom-input:hover {
  border-color: #4b5563;
}

/* 배경색 선택 */
.background-color-section {
  margin-bottom: 1.5rem;
}

.color-picker-wrapper {
  display: flex;
  justify-content: flex-start;
}

/* 적용 버튼 */
.apply-button {
  width: 100%;
  padding: 0.75rem 1rem;
  background-color: #6366f1;
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 600;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
  outline: none;
}

.apply-button:hover {
  background-color: #4f46e5;
  transform: translateY(-1px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.apply-button:active {
  background-color: #4338ca;
  transform: translateY(0);
}

.apply-button:focus {
  ring: 2px;
  ring-color: rgba(99, 102, 241, 0.5);
}

/* 프리셋 버튼에 활성 상태 표시 (옵션) */
.preset-button.active {
  border-color: #6366f1;
  background-color: rgba(99, 102, 241, 0.1);
}

.dark .preset-button.active {
  background-color: rgba(99, 102, 241, 0.2);
}

/* ExportDialog 스타일 */
.export-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  backdrop-filter: blur(4px);
}

.dark .export-dialog-overlay {
  background-color: rgba(0, 0, 0, 0.7);
}

.export-dialog {
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  max-width: 480px;
  width: 90%;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: export-dialog-fade-in 0.2s ease-out;
}

.dark .export-dialog {
  background-color: #1f2937;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
}

@keyframes export-dialog-fade-in {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.export-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid #e5e7eb;
}

.dark .export-dialog-header {
  border-bottom-color: #374151;
}

.export-dialog-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

.dark .export-dialog-title {
  color: #f9fafb;
}

.export-dialog-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background-color: transparent;
  border-radius: 6px;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.15s ease;
}

.export-dialog-close:hover {
  background-color: #f3f4f6;
  color: #111827;
}

.dark .export-dialog-close {
  color: #9ca3af;
}

.dark .export-dialog-close:hover {
  background-color: #374151;
  color: #f9fafb;
}

.export-dialog-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
}

.export-field {
  margin-bottom: 20px;
}

.export-field:last-child {
  margin-bottom: 0;
}

.export-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
  margin-bottom: 8px;
}

.dark .export-label {
  color: #d1d5db;
}

.export-select,
.export-input {
  width: 100%;
  padding: 10px 12px;
  font-size: 0.875rem;
  color: #111827;
  background-color: white;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  transition: all 0.15s ease;
  outline: none;
}

.export-select:focus,
.export-input:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.dark .export-select,
.dark .export-input {
  color: #f9fafb;
  background-color: #374151;
  border-color: #4b5563;
}

.dark .export-select:focus,
.dark .export-input:focus {
  border-color: #818cf8;
  box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.1);
}

.export-slider {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: #e5e7eb;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.dark .export-slider {
  background: #4b5563;
}

.export-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #6366f1;
  cursor: pointer;
  transition: all 0.15s ease;
}

.export-slider::-webkit-slider-thumb:hover {
  background: #4f46e5;
  transform: scale(1.1);
}

.export-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 50%;
  background: #6366f1;
  cursor: pointer;
  transition: all 0.15s ease;
}

.export-slider::-moz-range-thumb:hover {
  background: #4f46e5;
  transform: scale(1.1);
}

.export-quality-value {
  color: #6366f1;
  font-weight: 600;
}

.dark .export-quality-value {
  color: #818cf8;
}

.export-multiplier-group {
  display: flex;
  gap: 8px;
}

.export-multiplier-btn {
  flex: 1;
  padding: 10px 16px;
  font-size: 0.875rem;
  font-weight: 500;
  color: #6b7280;
  background-color: white;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.export-multiplier-btn:hover {
  border-color: #6366f1;
  color: #6366f1;
  background-color: #f0f1ff;
}

.export-multiplier-btn.active {
  color: white;
  background-color: #6366f1;
  border-color: #6366f1;
}

.dark .export-multiplier-btn {
  color: #9ca3af;
  background-color: #374151;
  border-color: #4b5563;
}

.dark .export-multiplier-btn:hover {
  border-color: #818cf8;
  color: #818cf8;
  background-color: #1e293b;
}

.dark .export-multiplier-btn.active {
  color: white;
  background-color: #6366f1;
  border-color: #6366f1;
}

.export-error {
  padding: 12px 16px;
  background-color: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 6px;
  color: #dc2626;
  font-size: 0.875rem;
  margin-top: 16px;
}

.dark .export-error {
  background-color: #7f1d1d;
  border-color: #991b1b;
  color: #fca5a5;
}

.export-dialog-footer {
  display: flex;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid #e5e7eb;
}

.dark .export-dialog-footer {
  border-top-color: #374151;
}

.export-btn {
  flex: 1;
  padding: 10px 16px;
  font-size: 0.875rem;
  font-weight: 500;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.export-btn-cancel {
  color: #374151;
  background-color: white;
  border: 1px solid #d1d5db;
}

.export-btn-cancel:hover {
  background-color: #f9fafb;
}

.dark .export-btn-cancel {
  color: #d1d5db;
  background-color: #374151;
  border-color: #4b5563;
}

.dark .export-btn-cancel:hover {
  background-color: #4b5563;
}

.export-btn-download {
  color: white;
  background-color: #6366f1;
}

.export-btn-download:hover {
  background-color: #4f46e5;
}

.export-btn-download:active {
  background-color: #4338ca;
}

/* ===== Figma 스타일 레이어 패널 ===== */

.figma-layer-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  background: transparent;
  border: 2px solid transparent;
  position: relative;
}

/* 호버 상태 */
.figma-layer-item:hover {
  background: rgba(0, 0, 0, 0.05);
}

.dark .figma-layer-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

/* 선택 상태 - Figma 스타일 파란 테두리 */
.figma-layer-item.layer-selected {
  background: rgba(59, 130, 246, 0.1);
  border-color: #3b82f6;
}

.dark .figma-layer-item.layer-selected {
  background: rgba(96, 165, 250, 0.15);
  border-color: #60a5fa;
}

/* 드래그 핸들 */
.layer-drag-handle {
  flex-shrink: 0;
  width: 12px;
  height: 16px;
  color: #9ca3af;
  cursor: grab;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.figma-layer-item:hover .layer-drag-handle {
  opacity: 1;
}

.layer-drag-handle:active {
  cursor: grabbing;
}

/* 썸네일 */
.layer-thumbnail {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  overflow: hidden;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dark .layer-thumbnail {
  background: #374151;
}

.layer-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 레이어 정보 */
.layer-info {
  flex: 1;
  min-width: 0;
}

.layer-name {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #1f2937;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dark .layer-name {
  color: #f3f4f6;
}

/* 액션 버튼 그룹 */
.layer-actions {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.figma-layer-item:hover .layer-actions,
.figma-layer-item.layer-selected .layer-actions {
  opacity: 1;
}

/* 개별 액션 버튼 */
.layer-action-btn {
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: #6b7280;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.layer-action-btn:hover {
  background: rgba(0, 0, 0, 0.1);
  color: #1f2937;
}

.dark .layer-action-btn {
  color: #9ca3af;
}

.dark .layer-action-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #f3f4f6;
}

/* 가시성 버튼 - 숨김 상태 */
.visibility-btn.layer-hidden {
  color: #ef4444;
}

.dark .visibility-btn.layer-hidden {
  color: #f87171;
}

/* 가시성 아이콘 전환 */
.visibility-btn .icon-eye {
  display: block;
}

.visibility-btn .icon-eye-off {
  display: none;
}

.visibility-btn.layer-hidden .icon-eye {
  display: none;
}

.visibility-btn.layer-hidden .icon-eye-off {
  display: block;
}

/* 잠금 버튼 */
.lock-btn .icon-lock {
  display: none;
}

.lock-btn .icon-unlock {
  display: block;
}

.lock-btn.locked .icon-lock {
  display: block;
}

.lock-btn.locked .icon-unlock {
  display: none;
}

.lock-btn.locked {
  color: #f59e0b;
}

.dark .lock-btn.locked {
  color: #fbbf24;
}

/* 삭제 버튼 - 호버 시 빨간색 */
.delete-btn:hover {
  color: #ef4444 !important;
  background: rgba(239, 68, 68, 0.1) !important;
}

/* 드래그 중 스타일 */
.figma-layer-item.sortable-ghost {
  opacity: 0.4;
}

.figma-layer-item.sortable-drag {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 레이어 목록 스크롤 */
#layer-list {
  padding: 4px;
}

#layer-list::-webkit-scrollbar {
  width: 8px;
}

#layer-list::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 4px;
}

.dark #layer-list::-webkit-scrollbar-thumb {
  background: #4b5563;
}

/* 속성 패널 스크롤 */
#properties-panel::-webkit-scrollbar {
  width: 8px;
}

#properties-panel::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 4px;
}

.dark #properties-panel::-webkit-scrollbar-thumb {
  background: #4b5563;
}

/* ===== 모던 필터 UI ===== */

/* 필터 섹션 - 2열 그리드 레이아웃 */
.filter-section {
  background: #f9fafb;
  border-radius: 8px;
  padding: 12px;
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 16px;
}

.dark .filter-section {
  background: #1f2937;
}

/* 필터 헤더 - 전체 너비 */
.filter-header {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0;
}

.filter-header-actions {
  display: flex;
  gap: 8px;
}

.filter-reset-all-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border: none;
  border-radius: 4px;
  background: #e5e7eb;
  color: #374151;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.filter-reset-all-btn:hover {
  background: #d1d5db;
}

.dark .filter-reset-all-btn {
  background: #374151;
  color: #d1d5db;
}

.dark .filter-reset-all-btn:hover {
  background: #4b5563;
}

/* 필터 컨트롤 (개선판) - 그리드 간격 사용 */
.filter-control-enhanced {
  margin-bottom: 16px;
}

/* 흑백 체크박스 - 전체 너비 (마지막 자식) */
.filter-section > .filter-control-enhanced:last-child {
  grid-column: 1 / -1;
}

.filter-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.filter-label {
  font-size: 13px;
  font-weight: 500;
  color: #374151;
}

.dark .filter-label {
  color: #d1d5db;
}

.filter-value-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* 값 입력 필드 */
.filter-value-input {
  width: 60px;
  padding: 4px 8px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  background: white;
  color: #1f2937;
  font-size: 12px;
  font-weight: 600;
  text-align: right;
  transition: all 0.15s ease;
}

.filter-value-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.dark .filter-value-input {
  background: #374151;
  border-color: #4b5563;
  color: #f3f4f6;
}

.dark .filter-value-input:focus {
  border-color: #60a5fa;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);
}

/* 개별 초기화 버튼 */
.filter-reset-btn {
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: #9ca3af;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.filter-reset-btn:hover {
  background: #e5e7eb;
  color: #3b82f6;
}

.dark .filter-reset-btn:hover {
  background: #374151;
  color: #60a5fa;
}

/* 슬라이더 컨테이너 */
.filter-slider-container {
  position: relative;
  height: 6px;
}

/* 모던 슬라이더 */
.filter-slider-modern {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: #e5e7eb;
  outline: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

.dark .filter-slider-modern {
  background: #4b5563;
}

/* 슬라이더 썸 (Chrome/Safari) */
.filter-slider-modern::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: white;
  border: 2px solid #3b82f6;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.15s ease;
}

.filter-slider-modern::-webkit-slider-thumb:hover {
  transform: scale(1.1);
  box-shadow: 0 3px 8px rgba(59, 130, 246, 0.3);
}

.dark .filter-slider-modern::-webkit-slider-thumb {
  background: #1f2937;
  border-color: #60a5fa;
}

/* 슬라이더 썸 (Firefox) */
.filter-slider-modern::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: white;
  border: 2px solid #3b82f6;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.15s ease;
}

.filter-slider-modern::-moz-range-thumb:hover {
  transform: scale(1.1);
  box-shadow: 0 3px 8px rgba(59, 130, 246, 0.3);
}

.dark .filter-slider-modern::-moz-range-thumb {
  background: #1f2937;
  border-color: #60a5fa;
}

/* 체크박스 모던 스타일 */
.filter-checkbox-modern {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

.filter-checkbox-input {
  display: none;
}

.filter-checkbox-custom {
  width: 18px;
  height: 18px;
  border: 2px solid #d1d5db;
  border-radius: 4px;
  background: white;
  transition: all 0.15s ease;
  position: relative;
  flex-shrink: 0;
}

.filter-checkbox-input:checked + .filter-checkbox-custom {
  background: #3b82f6;
  border-color: #3b82f6;
}

.filter-checkbox-input:checked + .filter-checkbox-custom::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 2px;
  width: 4px;
  height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.dark .filter-checkbox-custom {
  background: #374151;
  border-color: #4b5563;
}

.dark .filter-checkbox-input:checked + .filter-checkbox-custom {
  background: #60a5fa;
  border-color: #60a5fa;
}

.filter-checkbox-label {
  font-size: 13px;
  font-weight: 500;
  color: #374151;
}

.dark .filter-checkbox-label {
  color: #d1d5db;
}

/* ===== 반응형 미디어 쿼리 ===== */

/* 작은 화면 (1280px 이하) - 필터 1열로 변경 */
@media (max-width: 1280px) {
  .filter-section {
    grid-template-columns: 1fr;
  }

  .filter-section > .filter-control-enhanced:last-child {
    grid-column: 1;
  }
}

/* ===== 속성 패널 스타일 ===== */

/* 패널 컨테이너 */
.properties-panel-container {
  width: 384px;
  background-color: #1e293b; /* slate-800 */
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  color: #f3f4f6; /* gray-100 */
}

/* 섹션 구분선 */
.property-divider {
  border-top: 1px solid #334155; /* slate-700 */
  margin: 16px 0;
}

/* 속성 그룹 */
.property-group {
  margin-bottom: 12px;
}

/* 속성 라벨 */
.property-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #d1d5db; /* gray-300 */
  margin-bottom: 8px;
}

/* 섹션 제목 */
.section-title {
  font-size: 14px;
  font-weight: 500;
  color: #d1d5db; /* gray-300 */
  margin-bottom: 8px;
}

/* No selection 메시지 */
.no-selection {
  text-align: center;
  padding: 24px;
  font-size: 14px;
  color: #9ca3af; /* gray-400 */
}

/* ===== 모드 선택 모달 애니메이션 ===== */

/* 모달 오버레이 애니메이션 */
.mode-selection-modal {
  opacity: 0;
  transition: opacity 150ms ease;
}

.mode-selection-modal.visible {
  opacity: 1;
}

/* 모달 컨테이너 애니메이션 */
.mode-selection-modal .modal-container {
  transform: scale(0.95);
  transition: transform 150ms ease;
}

.mode-selection-modal.visible .modal-container {
  transform: scale(1);
}

/* ===== Hero Section 반응형 ===== */

/* 모바일: 텍스트만 표시 */
.hero-mobile {
  display: block;
}

.hero-desktop {
  display: none;
}

/* 데스크탑 (768px 이상): 3칸 카드 표시 */
@media (min-width: 768px) {
  .hero-mobile {
    display: none;
  }

  .hero-desktop {
    display: block;
  }
}