@import url('https://cdn.jsdelivr.net/gh/toss/tossface/dist/tossface.css');
* {box-sizing:border-box;scrollbar-width:thin;}
*::-webkit-scrollbar-thumb {background-color:#cbd5e1;border-radius:10px;}
*::-webkit-scrollbar-track {background-color:#f1f5f9;}
html,body {max-width:100%;overflow-x:hidden;}
body {font-family:'Nanum Gothic','Tossface',sans-serif;background-color:#f4f6f8;margin:0;padding:0;color:#333;}

.workspace {padding-left:70px;position:relative;}
.letter-workspace {padding-left:70px;position:relative;}
.sidebar {position:fixed;top:60px;left:0;bottom:0;padding:5px;width:70px;background-color:#ffffff;border-right:1px solid #edf1f5;display:flex;flex-direction:column;align-items:center;gap:5px;z-index:90;}
.menu-item {width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 0;color:#868e96;cursor:pointer;transition:all 0.2s;position:relative;gap:6px;}
.menu-item.active {color:#6366f1;}
.menu-item.active:before {content:"";position:absolute;inset:0;background-color:#e4edff;border-radius:8px;z-index:-1;}
.menu-icon {font-size:22px;display:flex;}
.menu-icon img {width:28px;}
.menu-item.active .menu-icon img {filter:invert(1);}
.menu-text {font-size:12px;font-weight:700;}
.menu-item.active .menu-text {color:#6366f1;}
.panel {position:fixed;top:60px;left:70px;bottom:0;width:320px;background-color:#ffffff;border-right:1px solid #edf1f5;display:flex;flex-direction:column;z-index:80;box-shadow:2px 0 8px rgba(0,0,0,0.02);}
.panel-header {height:50px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;border-bottom:1px solid #edf1f5;font-weight:700;font-size:15px;flex-shrink:0;color:#111;}
.btn-panel-close {display:none;background:none;border:none;font-size:24px;color:#adb5bd;cursor:pointer;padding:0;line-height:1;transition:color 0.2s;}
.btn-panel-close:hover {color:#fa5252;}
.panel-content {position:relative;flex:1;overflow-y:auto;padding:24px 20px;}
.panel-tab {display:none;}
.panel-tab.active {display:block;}
.control-group {margin-bottom:28px;}
.group-label {display:flex;height:20px;align-items:center;gap:4px;margin-bottom:14px;font-weight:700;color:#6e7787;font-size:12px;letter-spacing:-0.3px;}
.group-label svg {width:20px;height:20px;}
.panel-divider {border:none;border-top:1px solid #edf1f5;margin:24px 0;}
.sub-label {font-size:12px;color:#868e96;margin-bottom:6px;display:block;font-weight:700;}
.mb0 {margin-bottom:0;}
input[type="text"],textarea,select,input[type="number"] {width:100%;padding:10px 12px;border:1px solid #ced4da;border-radius:8px;font-size:13px;transition:all 0.2s;color:#495057;background-color:#ffffff;font-family:inherit;}
input[type="color"] {padding:2px;border:1px solid #ced4da;border-radius:8px;cursor:pointer;}
input[type="range"] {-webkit-appearance:none;width:100%;height:6px;background:#edf1f5;border-radius:3px;outline:none;}
input[type="range"]::-webkit-slider-thumb {-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:#ffffff;border:2px solid #6366f1;cursor:pointer;box-shadow:0 2px 4px rgba(0,0,0,0.1);transition:transform 0.1s;}
input[type="range"]::-webkit-slider-thumb:hover {transform:scale(1.2);}
textarea {height:120px;resize:vertical;}
.custom-select-wrap {position:relative;width:100%;margin-bottom:16px;user-select:none;z-index:50;}
.custom-select-trigger {display:flex;align-items:center;justify-content:space-between;width:100%;padding:10px 12px;border:1px solid #edf1f5;border-radius:8px;font-size:13px;color:#333;background-color:#f8f9fa;cursor:pointer;height:40px;transition:all 0.2s;}
.custom-select-trigger:hover {background-color:#f1f3f5;border-color:#ced4da;}
.custom-select-trigger.active {border-color:#3a7bd5;box-shadow:0 0 0 2px rgba(58,123,213,0.2);}
.custom-select-options {position:absolute;top:100%;left:0;right:0;margin-top:4px;background:#ffffff;border:1px solid #ced4da;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,0.1);max-height:220px;overflow-y:auto;z-index:100;display:none;}
.custom-select-options.open {display:block;}
.custom-option {display:flex;align-items:center;padding:10px 12px;cursor:pointer;border-bottom:1px solid #f8f9fa;font-size:14px;transition:background 0.2s;}
.custom-option:hover {background:#f8f9fa;}
.custom-option:last-child {border-bottom:none;}
.custom-option.selected {background:#e4edff;color:#6366f1;}
.font-star {cursor:pointer;margin-right:8px;fill:#ced4da;width:18px;height:18px;transition:fill 0.2s;flex-shrink:0;}
.font-star.active {fill:#ffc107;}
.font-name {flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:16px;}
.trigger-text {flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:16px;}
.btn-secondary {background-color:#f1f3f5;color:#495057;border:none;box-shadow:none;}
.btn-secondary:hover {background-color:#e9ecef;color:#212529;transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.05);}
.btn-danger {background-color:#fff0f0;color:#fa5252;border:none;box-shadow:none;}
.btn-danger:hover {background-color:#ffe3e3;transform:translateY(-2px);box-shadow:0 4px 12px rgba(250,82,82,0.15);}
.btn-outline {background-color:#ffffff;color:#6366f1;border:1px solid #6366f1;box-shadow:none;}
.btn-outline:hover {background-color:#f0f4fb;box-shadow:0 4px 12px rgba(23,103,255,0.1);}
.btn-full {width:100%;margin-bottom:10px;}
.btn-zoom {padding:4px 8px;border-radius:8px;font-size:15px;border:none;background:transparent;color:#495057;font-weight:700;cursor:pointer;}
.btn-zoom:hover {background:#f1f3f5;color:#111;}
.btn-panel-action {background-color:#f8f9fa;color:#495057;border:1px solid #edf1f5;border-radius:10px;font-weight:700;font-size:13px;padding:12px 16px;display:flex;align-items:center;justify-content:center;gap:6px;transition:all 0.2s;width:100%;cursor:pointer;}
.btn-panel-action:hover {background-color:#edf1f5;color:#212529;}
.btn-panel-action.primary {background-color:#e4edff;color:#6366f1;border-color:#e4edff;}
.btn-panel-action.primary:hover {background-color:#6366f1;color:#ffffff;transform:translateY(-2px);box-shadow:0 4px 12px rgba(23,103,255,0.2);}
#btn_crop_rotate_toggle {background-color:#495057;color:#ffffff;box-shadow:0 4px 12px rgba(73,80,87,0.2);}
#btn_crop_rotate_toggle:hover {background-color:#343a40;transform:translateY(-2px);box-shadow:0 6px 16px rgba(73,80,87,0.3);}
.row {display:flex;gap:10px;margin-bottom:16px;}
.row-mt8 {margin-top:8px;}
.row-mt16 {margin-top:16px;}
.col {flex:1;}
.col-1-5 {flex:1.5;}
.col-1 {flex:1;}
.solid-preset-list {display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;}
.solid-preset-item {flex:0 0 calc((100% - 30px)/6);aspect-ratio:1/1;border-radius:10px;cursor:pointer;border:2px solid transparent;transition:all 0.2s;box-shadow:inset 0 0 0 1px rgba(0,0,0,0.05);}
.solid-preset-item.selected {border-color:transparent;box-shadow:0 0 0 2px #ffffff,0 0 0 4px #6366f1;transform:translateY(-2px);}
.solid-preset-item:hover {transform:translateY(-2px);}
.gradient-preset-list {display:flex;flex-wrap:wrap;gap:6px;}
.gradient-preset-item {flex:0 0 calc((100% - 30px)/6);aspect-ratio:1/1;border-radius:10px;cursor:pointer;border:2px solid transparent;transition:all 0.2s;box-shadow:inset 0 0 0 1px rgba(0,0,0,0.05);}
.gradient-preset-item.selected {border-color:transparent;box-shadow:0 0 0 2px #ffffff,0 0 0 4px #6366f1;transform:translateY(-2px);}
.gradient-preset-item:hover {transform:translateY(-2px);}
.bg-preset-list {display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;}
.bg-preset-item {flex:0 0 calc((100% - 24px)/4);aspect-ratio:1/1;border-radius:10px;cursor:pointer;border:2px solid transparent;transition:all 0.2s;background-size:cover;background-position:center;box-shadow:inset 0 0 0 1px rgba(0,0,0,0.05);}
.bg-preset-item.selected {border-color:transparent;box-shadow:0 0 0 2px #ffffff,0 0 0 4px #6366f1;transform:translateY(-2px);}
.bg-preset-item:hover {transform:translateY(-2px);}
.color-picker-wrapper {display:flex;align-items:center;justify-content:space-between;background:#f8f9fa;padding:6px 12px;border-radius:8px;border:1px solid #edf1f5;margin-top:8px;}
.color-picker-wrapper input[type="color"] {width:26px;height:26px;border:none;padding:0;background:transparent;cursor:pointer;border-radius:6px;overflow:hidden;}
.emoji-list {display:flex;flex-wrap:wrap;gap:8px;}
.emoji-btn {background:#f8f9fa;border:1px solid #e9ecef;border-radius:8px;cursor:pointer;font-size:18px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;transition:all 0.2s;}
.emoji-btn:hover {background:#e9ecef;transform:translateY(-1px);}
.font-size-toggle {position:relative;display:flex;background-color:#f8f9fa;border:1px solid #edf1f5;border-radius:8px;padding:4px;width:100%;height:38px;align-items:center;z-index:1;}
.toggle-bg-3 {position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 8px)/3);background-color:#ffffff;border-radius:6px;box-shadow:0 2px 8px rgba(0,0,0,0.06);transition:transform 0.3s cubic-bezier(0.4,0,0.2,1);z-index:-1;}
.toggle-bg-2 {position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 8px)/2);background-color:#ffffff;border-radius:6px;box-shadow:0 2px 8px rgba(0,0,0,0.06);transition:transform 0.3s cubic-bezier(0.4,0,0.2,1);z-index:-1;}
.toggle-bg-3-tx100 {transform:translateX(100%);}
.toggle-bg-2-tx0 {transform:translateX(0%);}
.toggle-bg-3-tx0 {transform:translateX(0%);}
.toggle-btn {flex:1;background:none;border:none;font-size:13px;font-weight:700;color:#868e96;cursor:pointer;height:100%;transition:color 0.3s;padding:0;display:flex;align-items:center;justify-content:center;}
.toggle-btn.active {color:#111;}
.sticker-size-ctrl {display:flex;align-items:center;justify-content:space-between;background:#ffffff;border:1px solid #edf1f5;border-radius:8px;height:38px;overflow:hidden;}
.btn-size-ctrl {background:#f8f9fa;border:none;color:#495057;width:32px;height:100%;cursor:pointer;font-weight:700;font-size:18px;transition:background 0.2s;padding:0;}
.btn-size-ctrl:hover {background:#e9ecef;color:#111;}
.ts-size-display {font-size:14px;font-weight:700;color:#333333;flex:1;text-align:center;}
.sticker-category-list {display:flex;gap:8px;margin-bottom:16px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none;}
.sticker-category-list::-webkit-scrollbar {display:none;}
.sticker-category-btn {background:#f0f5f9;border:0;border-radius:20px;padding:6px 14px;font-size:13px;font-weight:600;color:#495057;cursor:pointer;white-space:nowrap;transition:all 0.2s;}
.sticker-category-btn:hover {background:#e9ecef;color:#212529;}
.sticker-category-btn.active {background:#6366f1;color:#fff;box-shadow:0 4px 12px rgba(0,0,0,0.15);}
.sticker-list {display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-height:260px;overflow-y:auto;padding:4px;}
.sticker-item {background:#f8f9fa;border:none;border-radius:12px;padding:10px;cursor:pointer;transition:all 0.2s;display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;}
.sticker-item:hover {background:#edf1f5;transform:scale(1.05);}
.sticker-item img {max-width:100%;max-height:100%;object-fit:contain;pointer-events:none;}
.editor-area {margin-left:320px;background-color:#f4f6f8;position:relative;min-height:calc(100vh - 60px);width:calc(100% - 320px);overflow-x:auto;}
#sheets_container {display:flex;flex-direction:column;gap:40px;align-items:center;width:100%;margin:0 auto;padding:60px 15px 120px 15px;}
.mode-toggle-wrapper {position:fixed;top:60px;left:390px;right:0;width:auto;display:flex;justify-content:space-between;padding:10px 15px 0;z-index:50;pointer-events:none;}
.mode-toggle-wrapper>button {pointer-events:auto;}
.text-mode-container {display:none;width:100%;padding:60px 15px 15px;flex-direction:column;align-items:center;}
.text-mode-input {width:100%;max-width:500px;min-height:calc(100vh - 250px);padding:30px;font-size:18px;border:1px solid #edf1f5;border-radius:16px;resize:none;overflow:hidden;line-height:1.6;background-color:#ffffff;box-shadow:0 8px 24px rgba(0,0,0,0.04);color:#333333;outline:none;font-family:'Nanum Gothic','Tossface',sans-serif;}
.canvas-toolbar-container {position:fixed;bottom:20px;left:390px;right:0;display:flex;justify-content:center;pointer-events:none;z-index:50;margin:0 auto;}
.canvas-toolbar {background:rgba(255,255,255,0.95);padding:10px 15px;border-radius:30px;box-shadow:0 8px 24px rgba(0,0,0,0.08);display:flex;align-items:center;gap:8px;pointer-events:auto;border:1px solid #edf1f5;backdrop-filter:blur(8px);}
.letter-sheet-wrapper {position:relative;display:flex;flex-direction:column;align-items:center;margin:0 auto;}
.sheet-controls {width:100%;display:flex;justify-content:space-between;align-items:center;height:35px;font-size:13px;color:#868e96;font-weight:700;flex-shrink:0;}
.btn-sheet-del {background:none;border:none;color:#adb5bd;cursor:pointer;font-size:13px;display:flex;align-items:center;gap:4px;transition:color 0.2s;padding:0;font-weight:700;}
.btn-sheet-del:hover {color:#fa5252;}
.btn-sheet-reset {background:none;border:none;color:#adb5bd;cursor:pointer;font-size:13px;transition:color 0.2s;padding:0;font-weight:700;}
.btn-sheet-reset:hover {color:#fa5252;}
.letter_canvas {width:500px;height:709px;background-color:#ffffff;background-size:cover;background-position:center;box-shadow:0 8px 24px rgba(0,0,0,0.08),0 2px 8px rgba(0,0,0,0.04);position:absolute;top:40px;left:0;transform-origin:top left;transition:outline 0.2s,background-color 0.3s,background-image 0.3s;flex-shrink:0;}
.letter_canvas.active-canvas {outline:2px solid #6366f1;outline-offset:2px;}
.canvas-bg-overlay {position:absolute;top:0;left:0;right:0;bottom:0;background-color:#ffffff;opacity:0;z-index:0;pointer-events:none;border-radius:inherit;}
.canvas-bg-layer {position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden;z-index:1;border-radius:inherit;}
.canvas-bg-layer-inner {padding:100px 60px 69px 60px;width:100%;height:100%;position:relative;}
.canvas-visual-layer {position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden;z-index:5;pointer-events:none;}
.canvas-ui-layer {position:absolute;top:0;left:0;right:0;bottom:0;overflow:visible;z-index:10;pointer-events:none;}
.canvas-lines {position:absolute;top:100px;left:60px;right:60px;height:540px;pointer-events:none;z-index:3;}
.canvas-lines .line-rule {position:absolute;left:0;right:0;height:1px;background:rgba(0,0,0,0.05);}
.canvas-content {width:100%;height:100%;position:relative;z-index:5;}
.letter-text {width:100%;height:100%;border:none;background:transparent;font-size:17px;line-height:30px;resize:none;outline:none;overflow:hidden;color:#333333;padding:0;margin:0;box-sizing:border-box;-webkit-appearance:none;appearance:none;}
.letter-text::placeholder {color:#ced4da;}
.txt-sticker-inner {width:100%;height:100%;display:block;box-sizing:border-box;padding:6px 10px;white-space:pre-wrap;word-break:break-word;overflow:visible;line-height:1.4;text-align:center;outline:none;min-width:60px;min-height:30px;cursor:move;border:none;transition:transform 0.15s;}
.txt-sticker-inner[contenteditable="true"].editing {cursor:text;outline:2px solid #6366f1;outline-offset:-2px;border-radius:4px;background:rgba(255,255,255,0.8);}
.sticker-container {position:absolute;display:inline-block;cursor:move;z-index:10;box-sizing:content-box;pointer-events:auto;touch-action:none;}
.sticker-rotatable {width:100%;height:100%;position:relative;transform-origin:center center;border:2px dashed transparent;box-sizing:border-box;transition:border-color 0.15s;display:flex;align-items:center;justify-content:center;}
.sticker-container:hover .sticker-rotatable {border-color:#6366f1;}
.sticker-container.selected .sticker-rotatable {border:2px dashed #6366f1;}
.sticker-rotatable img {display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none;transition:transform 0.15s;}
.sticker-top-controls {position:absolute;top:-60px;left:50%;transform:translateX(-50%);display:none;gap:6px;z-index:50;background:#ffffff;border-radius:8px;padding:6px;white-space:nowrap;pointer-events:all;box-shadow:0 4px 12px rgba(0,0,0,0.15);border:1px solid #edf1f5;box-sizing:border-box;}
.sticker-container.selected .sticker-top-controls {display:flex;}
.sticker-layer-menu {position:absolute;top:auto;left:50%;transform:translateX(-50%);display:none;flex-direction:column;gap:2px;z-index:60;background:#ffffff;border-radius:8px;padding:6px;white-space:nowrap;pointer-events:all;box-shadow:0 8px 24px rgba(0,0,0,0.15);min-width:120px;border:1px solid #edf1f5;}
.sticker-layer-menu.open {display:flex;}
.sticker-layer-menu-item {background:none;border:none;color:#495057;cursor:pointer;font-size:13px;padding:8px 12px;border-radius:6px;text-align:left;transition:background 0.2s;white-space:nowrap;font-weight:600;display:flex;align-items:center;gap:6px;}
.sticker-layer-menu-item:hover {background:#f4f6f8;color:#111;}
.sticker-ctrl-btn {background:none;border:none;color:#495057;cursor:pointer;font-size:14px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:6px;transition:all 0.2s;padding:0;-webkit-user-select:none;user-select:none;}
.sticker-ctrl-btn:hover {background:#f4f6f8;color:#111;}
.sticker-ctrl-btn.del:hover {background:#fff0f0;color:#fa5252;}
.sticker-ctrl-btn.layer-open {background:#edf1f5;color:#111;}
.sticker-ctrl-btn img {width:18px;height:18px;}
.sticker-rot-wrapper {position:absolute;bottom:-45px;left:50%;transform:translateX(-50%);display:none;gap:6px;z-index:30;pointer-events:all;}
.sticker-container.selected .sticker-rot-wrapper {display:flex;}
.sticker-rot-handle {width:32px;height:32px;background:#ffffff;border:1px solid #edf1f5;box-shadow:0 4px 12px rgba(0,0,0,0.1);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;cursor:grab;pointer-events:all;-webkit-user-select:none;user-select:none;transition:background 0.2s;touch-action:none;}
.sticker-rot-handle img {width:18px;height:18px;}
.sticker-rot-handle:hover {background:#f8f9fa;}
.sticker-rot-handle.rotating {cursor:grabbing;background:#f8f9fa;}
.sticker-reset-btn {background:#ffffff;border:1px solid #edf1f5;box-shadow:0 4px 12px rgba(0,0,0,0.1);cursor:pointer;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all 0.2s;padding:0;pointer-events:all;}
.sticker-reset-btn:hover {background:#f8f9fa;}
.sticker-reset-btn img {width:18px;height:18px;}
.sticker-rotatable .ui-resizable-handle {background:#ffffff;border:2px solid #6366f1;border-radius:50%;width:14px!important;height:14px!important;opacity:0;transition:opacity 0.15s;z-index:25;box-shadow:0 2px 6px rgba(0,0,0,0.2);touch-action:none;}
.sticker-container.selected .sticker-rotatable .ui-resizable-handle {opacity:1;}
.sticker-rotatable .ui-resizable-nw {top:-7px!important;left:-7px!important;cursor:nw-resize;}
.sticker-rotatable .ui-resizable-ne {top:-7px!important;right:-7px!important;cursor:ne-resize;}
.sticker-rotatable .ui-resizable-sw {bottom:-7px!important;left:-7px!important;cursor:sw-resize;}
.sticker-rotatable .ui-resizable-se {bottom:-7px!important;right:-7px!important;cursor:se-resize;}
.sticker-rotatable .ui-resizable-n {top:-7px!important;left:50%!important;transform:translateX(-50%);cursor:n-resize;}
.sticker-rotatable .ui-resizable-s {bottom:-7px!important;left:50%!important;transform:translateX(-50%);cursor:s-resize;}
.sticker-rotatable .ui-resizable-e {right:-7px!important;top:50%!important;transform:translateY(-50%);cursor:e-resize;}
.sticker-rotatable .ui-resizable-w {left:-7px!important;top:50%!important;transform:translateY(-50%);cursor:w-resize;}
.mobile-overlay {display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:9998;}
.btn_open_ai {padding:8px 16px;border-radius:20px;border:none;background:#e4edff;color:#6366f1;cursor:pointer;font-size:13px;font-weight:700;transition:all 0.2s;}
.btn_open_ai:hover {color:#ffffff;background:#6366f1;box-shadow:0 4px 12px rgba(23,103,255,0.2);}
.ai-modal-overlay {position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.6);backdrop-filter:blur(2px);z-index:1100;display:flex;justify-content:center;align-items:center;}
.ai-modal-container {background:#ffffff;width:100%;max-width:500px;border-radius:16px;box-shadow:0 16px 40px rgba(0,0,0,0.15);overflow:hidden;display:flex;flex-direction:column;max-height:90vh;border:none;}
.ai-modal-header {padding:20px 24px;border-bottom:1px solid #edf1f5;display:flex;justify-content:space-between;align-items:center;background:#ffffff;}
.ai-modal-header h3 {margin:0;font-size:16px;color:#111;display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-0.5px;}
.btn-modal-close {background:none;border:none;font-size:24px;color:#adb5bd;cursor:pointer;transition:color 0.2s;}
.btn-modal-close:hover {color:#fa5252;}
.ai-modal-body {padding:24px;overflow-y:auto;flex:1;background:#f8f9fa;}
.step-card {background:#ffffff;border:1px solid #edf1f5;border-radius:12px;padding:20px;margin-bottom:20px;box-shadow:0 2px 8px rgba(0,0,0,0.02);}
.input-group {margin-bottom:20px;}
.input-group:last-child {margin-bottom:0;}
.input-label {display:block;font-size:14px;font-weight:700;color:#212529;margin-bottom:10px;}
.row-group {display:flex;gap:12px;}
.form-input,.form-select {flex:1;padding:12px 14px;border:1px solid #ced4da;border-radius:8px;font-size:14px;transition:border-color 0.2s;}
.form-input:focus,.form-select:focus {border-color:#6366f1;outline:none;box-shadow:0 0 0 2px rgba(23,103,255,0.1);}
.form-textarea {width:100%;padding:12px 14px;border:1px solid #ced4da;border-radius:8px;font-size:14px;height:100px;resize:vertical;transition:border-color 0.2s;}
.form-textarea:focus {border-color:#6366f1;outline:none;box-shadow:0 0 0 2px rgba(23,103,255,0.1);}
.mt-2 {margin-top:12px;}
.ai-modal-footer {padding:20px 24px;border-top:1px solid #edf1f5;background:#ffffff;text-align:center;}
.btn-generate {background:#6366f1;color:#ffffff;border:none;padding:14px 24px;border-radius:12px;font-size:16px;font-weight:700;cursor:pointer;width:100%;display:flex;justify-content:center;align-items:center;gap:10px;box-shadow:0 4px 12px rgba(23,103,255,0.2);transition:all 0.2s;}
.btn-generate:hover:not(:disabled) {background:#4345a5;transform:translateY(-2px);box-shadow:0 6px 16px rgba(23,103,255,0.3);}
.btn-generate:disabled {background:#adb5bd;box-shadow:none;cursor:not-allowed;transform:none;}
.toast-wrapper {position:fixed;bottom:100px;left:50%;z-index:10000;pointer-events:none;}
.toast-msg {position:absolute;bottom:0;left:50%;transform:translate(-50%,20px);background:rgba(33,37,41,0.9);color:#ffffff;padding:12px 24px;border-radius:30px;font-size:14px;font-weight:700;box-shadow:0 4px 16px rgba(0,0,0,0.15);white-space:nowrap;opacity:0;transition:all 0.4s cubic-bezier(0.4,0,0.2,1);}
.toast-msg.show {opacity:1;transform:translate(-50%,0);}
.toast-msg.hide {opacity:0;transform:translate(-50%,0);}
#global_loader_overlay {position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(255,255,255,0.9);z-index:9999;display:none;align-items:center;justify-content:center;flex-direction:column;color:#212529;backdrop-filter:blur(4px);}
.spinner-circle {width:60px;height:60px;border:5px solid rgba(23,103,255,0.1);border-top-color:#6366f1;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:20px;}
@keyframes spin {100%{transform:rotate(360deg);}}
.svg-icon-inline {display:inline-block;vertical-align:middle;margin-right:6px;}
.sticker-container[data-type="txt"].selected .ui-resizable-handle {display:block!important;width:16px!important;height:16px!important;background:#ffffff;border:2px solid #6366f1;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,0.2);position:absolute;z-index:90;touch-action:none;}
.sticker-container[data-type="txt"].selected .ui-resizable-n {top:-8px;left:50%;transform:translateX(-50%);}
.sticker-container[data-type="txt"].selected .ui-resizable-s {bottom:-8px;left:50%;transform:translateX(-50%);}
.sticker-container[data-type="txt"].selected .ui-resizable-e {right:-8px;top:50%;transform:translateY(-50%);}
.sticker-container[data-type="txt"].selected .ui-resizable-w {left:-8px;top:50%;transform:translateY(-50%);}
.sticker-container[data-type="txt"].selected .ui-resizable-se {bottom:-8px;right:-8px;background-image:none;}
.sticker-container[data-type="txt"].selected .ui-resizable-sw {bottom:-8px;left:-8px;}
.sticker-container[data-type="txt"].selected .ui-resizable-ne {top:-8px;right:-8px;}
.sticker-container[data-type="txt"].selected .ui-resizable-nw {top:-8px;left:-8px;}
.loader-text {font-size:16px;font-weight:bold;color:#495057;}
.flex-align-center-gap8 {display:flex;gap:10px;align-items:center;}
#bg_category_list {margin-bottom:16px;}
.flex-between-center {display:flex;justify-content:space-between;align-items:center;}
#bg_opacity_display {font-size:12px;color:#6366f1;font-weight:800;}
#bg_opacity {width:100%;margin-top:8px;}
#gradient_angle_display {font-size:12px;color:#6366f1;font-weight:800;}
#gradient_angle {width:100%;margin-top:8px;}
#btn_clear_bg {margin-top:20px;}
#btn_add_txt_sticker {padding:12px;font-size:14px;display:flex;align-items:center;justify-content:center;}
.helper-text {font-size:11px;color:#868e96;line-height:1.6;}
.helper-mt8 {margin-top:10px;}
.helper-mt12 {margin-top:12px;}
.icon-mb8 {margin-bottom:8px;}
#btn_toggle_text_mode {border-radius:20px;background:#ffffff;box-shadow:0 4px 12px rgba(0,0,0,0.05);}
#canvas_1 {background-color:#ffffff;}
#zoom_level {font-size:14px;font-weight:700;width:50px;text-align:center;color:#495057;}
.toolbar-divider {width:1px;height:18px;background:#e1e4e8;margin:0 6px;}
#btn_add_sheet {padding:8px 16px;border-radius:16px;border:none;background:#f8f9fa;color:#495057;cursor:pointer;font-size:13px;font-weight:700;transition:all 0.2s;}
#btn_add_sheet:hover {background:#e9ecef;color:#212529;}
#btn_toggle_lines {padding:8px 16px;border-radius:16px;border:none;background:#f0f4fb;color:#6366f1;cursor:pointer;font-size:13px;font-weight:700;transition:all 0.2s;}
#btn_toggle_lines:hover {background:#e4edff;color:#0b51d6;}
.svg-icon-m0 {margin:0;}
.svg-icon-18 {width:18px;height:18px;color:rgb(22,24,29);}
.solid-preset-item[data-color="#ffffff"] {background-color:#ffffff;}
.solid-preset-item[data-color="#fff0f6"] {background-color:#fff0f6;}
.solid-preset-item[data-color="#fff9db"] {background-color:#fff9db;}
.solid-preset-item[data-color="#ebfbee"] {background-color:#ebfbee;}
.solid-preset-item[data-color="#e7f5ff"] {background-color:#e7f5ff;}
.solid-preset-item[data-color="#f3f0ff"] {background-color:#f3f0ff;}
.gradient-preset-item[data-gradient="linear-gradient(180deg, #ffe3e3 0%, #d9ffff 100%)"] {background:linear-gradient(180deg, #ffe3e3 0%, #d9ffff 100%);}
.gradient-preset-item[data-gradient="linear-gradient(180deg, #ffd6d6 0%, #fff9db 100%)"] {background:linear-gradient(180deg, #ffd6d6 0%, #fff9db 100%);}
.gradient-preset-item[data-gradient="linear-gradient(180deg, #fefbdc 0%, #e0f2ff 100%)"] {background:linear-gradient(180deg, #fefbdc 0%, #e0f2ff 100%);}
.gradient-preset-item[data-gradient="linear-gradient(180deg, #e7f5ff 0%, #f3f0ff 100%)"] {background:linear-gradient(180deg, #e7f5ff 0%, #f3f0ff 100%);}
.gradient-preset-item[data-gradient="linear-gradient(180deg, #f3f0ff 0%, #fff0f6 100%)"] {background:linear-gradient(180deg, #f3f0ff 0%, #fff0f6 100%);}
.gradient-preset-item[data-gradient="linear-gradient(180deg, #f8f9fa 0%, #e7f5ff 100%)"] {background:linear-gradient(180deg, #f8f9fa 0%, #e7f5ff 100%);}
.sheet-controls-auto {margin:0 auto;}
.sticker-visual {position:absolute;transform-origin:center center;}
.sticker-visual img {display:block;width:100%;height:100%;object-fit:contain;}
.sticker-visual .txt-sticker-inner {width:100%;height:100%;}
.history-controls {display:flex;gap:6px;pointer-events:auto;}
.btn-icon {padding:8px 12px;display:flex;align-items:center;justify-content:center;}
.btn-icon:disabled {opacity:0.5;cursor:not-allowed;background-color:#f8f9fa;border-color:#ced4da;color:#adb5bd;}
.mode-controls {display:flex;gap:10px;pointer-events:auto;}
#btn_toggle_text_mode.active {background-color:#6366f1;color:#fff;border-color:#6366f1;}
.text-color-control {display:flex;align-items:center;gap:10px;}
.text-color-preset-list {display:flex;gap:5px;padding:4px 0;flex:1;}
.text-color-preset-item {flex:1;max-width:40px;aspect-ratio:1/1;border-radius:50%;cursor:pointer;transition:all 0.2s;}
.text-color-preset-item:hover {transform:translateY(-2px);box-shadow:0 4px 8px rgba(0,0,0,0.1),inset 0 0 0 1px rgba(0,0,0,0.1);}
.text-color-preset-item.selected {box-shadow:inset 0 0 0 3px rgba(255,255,255,0.35);}
.custom-color-picker-wrap {width:34px;height:34px;border-radius:50%;overflow:hidden;border:1px solid #edf1f5;flex-shrink:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,0.1);cursor:pointer;}
.color-input-custom {width:200%;height:200%;transform:translate(-25%,-25%);border:none;cursor:pointer;padding:0;background:none;}
#floating_emoji_panel {position:absolute;top:20px;left:20px;z-index:90;display:none;height:44px;border-radius:22px;background:#ffffff;box-shadow:0 4px 16px rgba(0,0,0,0.1);overflow:hidden;transition:width 0.3s cubic-bezier(0.4,0,0.2,1);width:44px;pointer-events:auto;}
#floating_emoji_panel.open {width:calc(100% - 40px);overflow:visible;}
#btn_floating_emoji_toggle {position:absolute;top:0;left:0;width:44px;height:44px;border:none;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:100;padding:0;outline:none;color:#666;transition:color 0.2s;}
#btn_floating_emoji_toggle:hover {color:#6366f1;}
#floating_emoji_list_wrap {position:absolute;top:0;left:44px;right:0;bottom:auto;display:flex;align-items:center;opacity:0;transition:opacity 0.2s;height:44px;}
#floating_emoji_panel.open #floating_emoji_list_wrap {opacity:1;}
#floating_emoji_list_wrap .emoji-internal-container {width:100%;height:100%;display:flex;align-items:center;min-width:0;}
#floating_emoji_list_wrap .emoji-section-quick {display:flex!important;align-items:center;gap:6px;width:100%;min-width:0;padding:0;border:none;background:transparent;}
#floating_emoji_list_wrap .emoji-quick-grid {display:flex;gap:6px;overflow-x:auto;flex:1 1 0;scrollbar-width:none;min-width:0;align-items:center;height:100%;padding-right:6px;}
#floating_emoji_list_wrap .emoji-quick-grid::-webkit-scrollbar {display:none;}
#floating_emoji_list_wrap .nav-arrow {flex-shrink:0;background:transparent;border:none;color:#868e96;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;}
#floating_emoji_list_wrap .btn-view-toggle {flex-shrink:0;background:transparent;border:none;color:#868e96;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;width:44px;height:44px;}
#floating_emoji_list_wrap .btn-view-toggle:hover,#floating_emoji_list_wrap .nav-arrow:hover {color:#6366f1;}
#floating_emoji_list_wrap .emoji-item-btn {font-size:22px;padding:6px;flex:0 0 auto;cursor:pointer;transition:transform 0.2s;}
#floating_emoji_list_wrap .emoji-item-btn:hover {transform:scale(1.2);}
.upload-label {display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px;border:2px dashed #ced4da;border-radius:8px;background:#f8f9fa;cursor:pointer;color:#3a7bd5;font-size:14px;font-weight:700;transition:all 0.2s;text-align:center;}
.upload-label:hover {background:#f0f4fb;border-color:#3a7bd5;}
.upload-label.dragover {background:#f0f4fb;border-color:#3a7bd5;}
.crop-container {width:100%;max-width:600px;height:60vh;background:#000000;margin-bottom:20px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,0.15);flex-shrink:0;position:relative;}
.local-loader {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;z-index:10;justify-content:center;}
.local-loader .spinner-circle {width:30px;height:30px;border:3px solid #f3f3f3;border-top:3px solid #3498db;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:10px;}
.local-loader .loader-text {font-size:14px;color:#666;}
#crop_image {display:block;max-width:100%;max-height:100%;margin:0 auto;}
.crop-toolbar {display:flex;gap:12px;margin-bottom:16px;flex-shrink:0;position:relative;z-index:10;justify-content:center;width:100%;}
.crop-result-container {background:#f8f9fa;padding:24px;box-shadow:inset 0 2px 8px rgba(0,0,0,0.02);margin-bottom:20px;display:flex;justify-content:center;align-items:center;flex-shrink:0;width:100%;}
.crop-result-container img {display:block;object-fit:contain;box-shadow:0 5px 5px 2px rgba(0,0,0,0.1),0 5px 20px 6px rgba(0,0,0,0.1);}
.mosaic-overlay {position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:100;overflow:hidden;}
.mosaic-overlay .mosaic-item {pointer-events:auto;}
.mosaic-item {position:absolute;z-index:200;display:inline-block;box-sizing:border-box;}
.mosaic-inner {width:100%;height:100%;border-radius:50%;border:2px dashed transparent;box-sizing:border-box;backdrop-filter:blur(6px);transition:border-color 0.2s;}
.mosaic-item.selected .mosaic-inner {border-color:#6366f1;box-shadow:0 0 0 2px rgba(23,103,255,0.2);}
.mosaic-del {position:absolute;top:-35px;left:50%;transform:translateX(-50%);width:28px;height:28px;background:#ffffff;color:#fa5252;border-radius:50%;border:1px solid #e9ecef;box-shadow:0 2px 6px rgba(0,0,0,0.15);cursor:pointer;display:none;align-items:center;justify-content:center;padding:4px;z-index:210;}
.mosaic-item.selected .mosaic-del {display:flex;}
.mosaic-item .ui-resizable-handle {background:#ffffff;border:2px solid #6366f1;border-radius:50%;width:12px!important;height:12px!important;opacity:0;transition:opacity 0.15s;z-index:25;box-shadow:0 1px 3px rgba(0,0,0,0.2);touch-action:none;}
.mosaic-item.selected .ui-resizable-handle {opacity:1;}
.mosaic-item .ui-resizable-ne {top:-6px!important;right:-6px!important;cursor:ne-resize;}
.mosaic-item .ui-resizable-nw {top:-6px!important;left:-6px!important;cursor:nw-resize;}
.mosaic-item .ui-resizable-se {bottom:-6px!important;right:-6px!important;cursor:se-resize;}
.mosaic-item .ui-resizable-sw {bottom:-6px!important;left:-6px!important;cursor:sw-resize;}
.photo-nav-btn {position:absolute;top:50%;transform:translateY(-50%);background:#ffffff;border:1px solid #e9ecef;box-shadow:0 4px 12px rgba(0,0,0,0.08);border-radius:50%;width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:#495057;cursor:pointer;z-index:200;transition:all 0.2s;display:none;}
.photo-nav-btn:hover {background:#f8f9fa;color:#212529;transform:translateY(-50%) scale(1.05);box-shadow:0 6px 16px rgba(0,0,0,0.12);}
.photo-nav-btn.prev {left:20px;}
.photo-nav-btn.next {right:20px;}
.crop-title {color:#212529;font-size:22px;margin-bottom:24px;font-weight:800;flex-shrink:0;position:relative;z-index:10;letter-spacing:-0.5px;}
#mosaic_toolbar {display:flex;flex-direction:column;gap:10px;margin-bottom:16px;width:100%;max-width:600px;flex-shrink:0;position:relative;z-index:10;}
#btn_add_mosaic {background:#ffffff;border:1px solid #ced4da;color:#495057;border-radius:20px;padding:8px 16px;box-shadow:0 2px 6px rgba(0,0,0,0.02);}
#btn_add_mosaic:hover {background:#f8f9fa;border-color:#adb5bd;color:#212529;}
#mosaic_intensity_wrap {display:none;align-items:center;gap:10px;background:#ffffff;padding:8px 20px;border-radius:30px;box-shadow:0 4px 12px rgba(0,0,0,0.05);border:1px solid #e9ecef;}
.mosaic-label {color:#495057;font-size:13px;margin:0;font-weight:700;}
#mosaic_intensity {width:100px;margin:0;}
.crop-desc {color:#6c757d;font-size:13px;margin-top:12px;flex-shrink:0;position:relative;z-index:10;font-weight:500;}
.result-title {color:#212529;}
input[type="file"] {display:none;}
#photo_workspace {display:flex;flex-direction:column;width:100%;min-height:calc(100vh - 60px);padding:24px;background:#f4f6f8;}
.mobile-upload-wrapper {width:100%;margin-bottom:24px;}
.mobile-upload-wrapper:empty {display:none;margin-bottom:0;}
.photo-top-area {display:none;margin-bottom:24px;flex-shrink:0;}
.photo-top-area .group-label {margin-bottom:16px;display:block;font-weight:700;font-size:15px;color:#212529;letter-spacing:-0.3px;}
#photo_list_top {display:grid;grid-template-columns:repeat(10,1fr);gap:12px;margin-top:0;}
.photo-bottom-area {flex:1;position:relative;overflow:hidden;display:none;flex-direction:column;background:#ffffff;border-radius:16px;border:1px solid #edf1f5;box-shadow:0 4px 16px rgba(0,0,0,0.04);}
.crop-editor {position:relative!important;background:transparent!important;width:100%;height:100%;flex:1;overflow-y:auto;justify-content:center;padding:32px 20px;display:none;flex-direction:column;align-items:center;}
.crop-result-view {position:relative!important;background:transparent!important;width:100%;height:100%;flex:1;overflow-y:auto;justify-content:center;padding:32px 20px;display:none;flex-direction:column;align-items:center;}
.photo-item {position:relative;padding-bottom:100%;border-radius:8px;overflow:hidden;cursor:pointer;border:2px solid transparent;transition:all 0.2s cubic-bezier(0.4,0,0.2,1);background:#f1f3f5;}
.photo-item:hover {border-color:#3a7bd5;transform:translateY(-2px);box-shadow:0 6px 16px rgba(58,123,213,0.2);}
.photo-item img {position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;border-radius:6px;}
.photo-item .status-badge {position:absolute;bottom:8px;right:8px;background:rgba(0,0,0,0.7);color:#ffffff;font-size:11px;font-weight:600;padding:4px 10px;border-radius:14px;backdrop-filter:blur(4px);}
.photo-item .status-badge.cropped {background:rgba(32,201,151,0.9);}
.photo-item-del {position:absolute;top:5px;right:5px;background:rgba(250,82,82,0.9);color:#ffffff;width:20px;height:20px;border-radius:50%;text-align:center;line-height:22px;font-size:14px;font-weight:bold;display:none;box-shadow:0 2px 6px rgba(0,0,0,0.2);}
.photo-item:hover .photo-item-del {display:block;}
.guide-container {flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#868e96;text-align:center;padding:40px 20px;background:#ffffff;border-radius:16px;border:1px solid #edf1f5;box-shadow:0 4px 16px rgba(0,0,0,0.04);}
.guide-container svg {margin-bottom:20px;color:#adb5bd;}
.guide-container .guide-title {font-size:18px;font-weight:700;color:#212529;margin-bottom:10px;letter-spacing:-0.5px;margin-top:0;}
.guide-container .guide-desc {font-size:13px;line-height:1.6;color:#868e96;margin-top:0;}
#photo_select_guide.guide-container {background:transparent;border:none;box-shadow:none;}
#print_workspace {display:none;flex-direction:column;width:100%;height:100%;min-height:calc(100vh - 60px);padding:24px;background:#f4f6f8;}
.print-item {position:relative;display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-radius:5px;margin-bottom:10px;background:#f8f9fa;width:100%;border:1px dashed #dedeed;}
.print-item-info {display:flex;align-items:center;flex:1;overflow:hidden;margin-right:10px;}
.print-item-name {font-size:13px;font-weight:700;word-break:break-all;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-right:10px;flex:1;}
.print-item-pages {font-size:13px;color:#e74c3c;font-weight:bold;white-space:nowrap;}
.print-item-del {cursor:pointer;color:#888;font-size:20px;font-weight:bold;line-height:1;padding:0 5px;}
.print-total-wrap {margin-top:15px;text-align:right;font-size:14px;font-weight:700;}
.print-total-wrap span {color:#e74c3c;}
#print_list_area {flex:1;position:relative;overflow:hidden;display:none;flex-direction:column;background:#ffffff;border-radius:16px;border:1px solid #edf1f5;box-shadow:0 4px 16px rgba(0, 0, 0, 0.04);padding:32px 20px;}

@media (max-width:1480px) {
    #photo_list_top {grid-template-columns:repeat(6,1fr);}
}

@media (max-width:991px) {
    .letter-workspace {padding-left:0;}
    .workspace {padding-top:60px;padding-left:0;}
    .sidebar {position:fixed;top:85px;left:0;right:0;bottom:auto;width:100%;height:40px;flex-direction:row;border-right:none;border-bottom:1px solid #edf1f5;border-top:none;z-index:200;}
    .menu-item {flex:1;justify-content:center;gap:3px;padding:5px 0;flex-direction:row;}
    .menu-icon {font-size:18px;}
    .menu-icon svg {width:20px;height:20px;}
    .menu-text {font-size:12px;}
    .panel {display:flex;position:fixed;top:auto;bottom:15px;left:15px;right:15px;transform:translateY(30px);width:auto;max-width:420px;max-height:70vh;margin:0 auto;order:unset;border:none;border-radius:16px;box-shadow:0 -10px 40px rgba(0,0,0,0.15);z-index:9999;opacity:0;visibility:hidden;pointer-events:none;overflow:hidden;transition:transform 0.4s cubic-bezier(0.4,0,0.2,1),opacity 0.4s ease,visibility 0.4s;}
    .panel.show-mobile {transform:translateY(0);opacity:1;visibility:visible;pointer-events:auto;}
    .panel.show-mobile:before {content:"";position:absolute;bottom:0;left:0;right:0;height:24px;background:linear-gradient(0deg, #fff 50%, transparent);z-index:10;}
    .mobile-overlay.show {display:block;}
    .btn-panel-close {display:block;}
    .sticker-list {grid-template-columns:repeat(4, 1fr);max-height:220px;}
    .editor-area {margin-left:0;width:100%;overflow-x:auto;}
    .header-logo {font-size:14px;}
    .header-actions .btn-default,.header-actions .btn {padding:8px 12px;font-size:12px;}
    .canvas-toolbar {flex-wrap:wrap;justify-content:center;padding:6px;gap:3px;}
    .canvas-toolbar-container {position:fixed;bottom:15px;left:0;right:0;}
    #btn_add_sheet {padding:5px 12px;font-size:12px;}
    #btn_toggle_lines {padding:5px 12px;font-size:12px;}
    #zoom_level {font-size:12px;}
    .sheet-controls {height:auto;}
    .letter_canvas {top:30px;}
    .mode-toggle-wrapper {position:fixed;top:125px;left:0;right:0;width:100%;background:#f4f6f8;background:linear-gradient(180deg, #f4f6f8 60%, transparent 100%);padding:10px 15px 5px;z-index:20;pointer-events:auto;max-width:none;flex-wrap:wrap;gap:0;}
    .history-controls {gap:5px;}
    .history-controls .btn-icon {padding:8px;}
    .history-controls .btn-icon svg {width:16px;height:16px;}
    .mode-controls {flex-wrap:wrap;justify-content:flex-end;gap:6px;}
    .mode-controls .btn-default {padding:8px 10px;font-size:12px;gap:3px;}
    .mode-controls .btn-default svg {width:16px;height:16px;}
    #sheets_container {padding:105px 15px 90px;gap:30px;}
    .text-mode-container {padding:105px 15px 15px;}
    .sticker-rotatable .ui-resizable-handle:not(.ui-resizable-se) {display:none !important;}
    .sticker-rotatable .ui-resizable-se {width:24px !important;height:24px !important;bottom:-12px !important;right:-12px !important;border-width:3px !important;}
    .ai-modal-container {position:absolute;width:auto;left:15px;right:15px;bottom:30px;max-height:75vh!important;margin:0 auto;}
    .ai-modal-header {padding:0 20px;}
    .ai-modal-header h3 {font-size:15px;height:50px;}
    .ai-modal-header h3 svg {width:18px;height:18px;}
    .ai-modal-body {overflow-y:auto;flex:1;padding:20px;}
    .upload-label {padding:15px;}
    .crop-container {height:40vh;}
    .guide-container {flex:none;}
    .guide-container svg {width:32px;}
    #photo_workspace {padding:16px 15px 0;min-height:calc(100vh - 115px);}
    #print_list_area {flex:none;}
    #photo_list_top {grid-template-columns:repeat(5,1fr);}
    .photo-nav-btn {width:36px;height:36px;}
    .photo-nav-btn.prev {left:10px;}
    .photo-nav-btn.next {right:10px;}
    .photo-item .status-badge {bottom:5px;right:5px;padding:3px 8px;font-size:10px;}
    #photo_select_guide.guide-container {padding:40px 30px;}
    .guide-container .guide-desc br {display:none;}
    #print_workspace {padding:16px 15px 15px;min-height:calc(100vh - 115px);}
    .print-item-name {font-size:12px;}
    .print-item-pages {font-size:12px;}
}

@media (max-width:768px) {
    #photo_list_top {grid-template-columns:repeat(3,1fr);}
}

@media print {
    .header,.sidebar,.panel,.canvas-toolbar-container,.sheet-controls,.mode-toggle-wrapper {display:none !important;}
    .workspace,.editor-area {display:block;padding:0;background:#ffffff;height:auto;overflow:visible;}
    .letter-sheet-wrapper {margin:0 auto;padding:0;page-break-after:always;}
    .letter_canvas {box-shadow:none;outline:none !important;margin:0;transform:scale(1) !important;}
}