* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --bg:       #F3F3F3;
    --surface:  #FFFFFF;
    --border:   #e7e7e7;
    --text:     #444141;
    --text-sub: #444141;
    --accent:   #338fed;
    --accent-h: #2a7fd4; 
    --danger:   #FF4D4F;
    --icon:     #444141;
    --icon-h:   #444141;
    --sidebar-w: 70px;
    --panel-w:   300px;
    --topbar-h:  56px;
    --radius:    8px;
}

/* Bootstrap 충돌 방어 */
body { overflow: hidden !important; height: 100vh !important; display: flex !important; flex-direction: column !important; padding: 0 !important; margin: 0 !important; font-size: 14px !important; }
footer { display: none !important; }
.up.go-to-top { display: none !important; }
.panel-title { font-size: 14px !important; font-weight: 600 !important; margin-top: 0 !important; margin-bottom: 10px !important; color: var(--text-sub) !important; }
label { font-weight: 400 !important; margin-bottom: 0 !important; font-size: inherit !important; }
* { box-sizing: border-box; }

body {
    font-size: 14px;
    background: var(--bg);
    color: var(--text);
    overflow: hidden;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ── 상단 툴바 ── */
.topbar-logo-area {
    width: var(--sidebar-w);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-right: 1px solid var(--border);
}
#topbar {
    width: 100%;
    height: var(--topbar-h);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    padding: 0 12px 0 0;
    gap: 15px;
    flex-shrink: 0;
    z-index: 50;
}

/* 이미지 불러오기 탭 */
.topbar-img-tabs {
    display: flex;
    align-items: center;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 3px;
    gap: 2px;
    margin-left: auto;
}
.topbar-tab-btn {
    height: 28px;
    padding: 0 12px;
    background: none;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    color: var(--text-sub);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    transition: background .15s, color .15s;
}
.topbar-tab-btn:hover {
    background: var(--surface);
    color: var(--text);
}
.topbar-tab-btn.active {
    background: var(--surface);
    color: var(--accent);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* 구분선 */
.top-sep {
    width: 1px;
    height: 20px; 
    background: var(--border);
    margin: 0 6px;
    flex-shrink: 0;
}

/* 아이콘 버튼 */
.top-icon-btn {
    width: 32px; height: 32px;
    border: none;
    background: none;
    border-radius: 6px;
    cursor: pointer; 
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--icon);
    transition: background .15s, color .15s;
    flex-shrink: 0;
}
.top-icon-btn:hover { background: var(--bg); color: var(--icon-h); }
.top-icon-btn.active { background: #E5F3FD; color: var(--accent); }
.top-icon-btn:disabled { color: #c4c8ce; cursor: default; pointer-events: none; }
.top-icon-btn:disabled:hover { background: none; color: #c4c8ce; }

/* 투명도 */
#opacity-wrap {
    display: flex; 
    align-items: center;
    gap: 6px;
    margin-left: 4px;
}
#opacity-wrap label { color: var(--text-sub); white-space: nowrap; }
#opacityRange, #zoom-slider-bar {
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    outline: none;
    height: 4px; 
    border-radius: 2px;
    background: linear-gradient(to right, #9fadc0 0%, #9fadc0 var(--range-val, 100%), #dde3ec var(--range-val, 100%), #dde3ec 100%);
}
#opacityRange { width: 80px; }
#opacityRange::-webkit-slider-thumb, #zoom-slider-bar::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: #9fadc0;
    cursor: pointer;
    border: none;
    box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
#opacityRange::-moz-range-thumb, #zoom-slider-bar::-moz-range-thumb {
    width: 16px; height: 16px;
    border-radius: 50%;
    background: #9fadc0;
    cursor: pointer;
    border: none;
}
#opacityValue {
    min-width: 36px;
    text-align: right;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

/* 작업공간 타이틀 */
#ws-title-wrap {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    transition: left .2s ease;
    border: 1px solid #e7e7e7;
    border-radius: 5px;
}
#ws-title-input {
    pointer-events: auto;
    border: none;
    outline: none;
    background: transparent;
    font-size: 14px;
    font-family: inherit;
    font-weight: 500;
    color: var(--text);
    text-align: center;
    width: 180px;
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: background .15s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#ws-title-input:hover { background: var(--bg); }
#ws-title-input:focus { background: var(--bg); cursor: text; outline: 1px solid var(--border); }

/* 내보내기 버튼 */
/* 내보내기 영역 (형식 드롭다운 + 버튼) */
#export-wrap { margin-left: auto; display: flex; align-items: center; gap: 6px; }

#exportBtn {
    height: 32px;
    width: 100px;
    padding: 0;
    background: #fff;
    color: #338fed;
    border: 1.5px solid #338fed;
    border-radius: 5px;
    font-size: 14px;
    font-family: inherit;
    font-weight: 400;
    cursor: pointer;
    transition: background .15s;
    white-space: nowrap;
}
#exportBtn:hover { background: #E5F3FD; }

/* 형식 선택 드롭다운 */
#export-format {
    position: relative;
    height: 32px;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 10px;
    background: #fff;
    border: 1px solid #d8dde3;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 600;
    color: #444;
    cursor: pointer;
    white-space: nowrap;
    outline: none;
    transition: border-color .15s;
}
#export-format:hover { border-color: #338FED; }
#export-format .ef-caret { color: #9aa3ad; transition: transform .15s; }
#export-format.open .ef-caret { transform: rotate(180deg); }
#export-format-menu {
    display: none;
    position: absolute;
    top: calc(100% + 5px);
    right: 0;
    min-width: 150px;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 9px;
    box-shadow: 0 8px 24px rgba(0,0,0,.13);
    padding: 5px;
    margin: 0;
    list-style: none;
    z-index: 1000;
}
#export-format.open #export-format-menu { display: block; }
#export-format-menu li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 11px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #444;
    cursor: pointer;
    transition: background .12s;
}
#export-format-menu li:hover { background: #f3f7fd; }
#export-format-menu li.active { color: #338FED; }
#export-format-menu li.active::after { content: '✓'; color: #338FED; font-size: 12px; }
#export-format-menu .ef-desc { font-size: 11px; font-weight: 400; color: #aab1b8; margin-left: auto; }
#export-format-menu li.active .ef-desc { color: #9cc4f3; }

/* 팝업 메뉴들 (정렬, 순서, 반전) */
.popup-menu {
    display: none;
    position: absolute;
    top: calc(var(--topbar-h) + 4px);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    z-index: 200;
    min-width: 160px;
    padding: 4px 0;
    overflow: hidden;
}
.popup-menu.show { display: block; }

.popup-menu button {
    width: 100%;
    padding: 8px 14px;
    background: none;
    border: none;
    text-align: left;
    font-size: 14px;
    font-family: inherit;
    color: var(--text);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}
.popup-menu button:hover { background: var(--bg); }
.popup-menu-sep { height: 1px; background: var(--border); margin: 4px 0; }

/* 투명도 팝업 */
#opacity-popup {
    min-width: 120px;
}
#opacity-popup button {
    justify-content: space-between;
}
#opacity-popup button.active {
    color: var(--accent);
    background: #E5F3FD;
}

/* ── 에디터 전체 영역 ── */
#editor-area {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

/* ── 콘텐츠 보호: 텍스트 선택(블럭) · 이미지 드래그 방지 (입력 요소는 예외) ── */
#editor-area, #editor-area * {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
#editor-area input,
#editor-area textarea,
#editor-area select,
#editor-area [contenteditable="true"],
input, textarea {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}
#editor-area img,
#editor-area canvas {
    -webkit-user-drag: none;
    user-drag: none;
    -webkit-touch-callout: none;   /* iOS 길게 눌러 이미지 저장 방지 */
}

/* ── 사이드바 + 패널 + 캔버스 행 ── */
#editor-right {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* ── 캔버스 영역 ── */ 
#body-wrap {
    display: flex;
    flex: 1;
    overflow: hidden;
    position: relative;
}

#object-toolbar {
    position: absolute;
    z-index: 100;
    background: white;
    border-radius: 20px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.18);
    padding: 4px 6px;
    display: flex;
    gap: 2px;
    align-items: center;
    border: 1px solid var(--border);
    visibility: hidden;
    pointer-events: none;
}
#object-toolbar button {
    width: 30px; height: 30px;
    border: none; background: none;
    cursor: pointer;
    border-radius: 50%;
    transition: background .15s;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-sub);
}
#object-toolbar button:hover { background: var(--bg); }
#object-toolbar #obj-delete:hover { color: var(--danger); background: #FFF1F0; }
#object-toolbar #obj-eyedropper.active { color: var(--accent); background: var(--bg); }

/* 선택 객체 크기 배지 (미리캔버스 스타일) */
#size-badge {
    position: absolute;
    z-index: 99;
    display: none;
    padding: 5px 11px;
    background: rgba(40,42,46,.92);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .2px;
    border-radius: 8px;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
#size-badge.show { display: block; }

/* 크기 변경 팝업 */
#size-popup {
    position: absolute;
    z-index: 101;
    display: none;
    width: 280px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,.16);
    padding: 18px;
}
#size-popup.show { display: block; }
#size-popup .sp-close {
    position: absolute; top: 12px; right: 12px;
    background: none; border: none; font-size: 22px; line-height: 1;
    color: #b5b5b5; cursor: pointer; padding: 0 2px;
}
#size-popup .sp-close:hover { color: #777; }
#size-popup .sp-title { font-size: 15px; font-weight: 700; color: #333; margin-bottom: 14px; }
#size-popup .sp-row { display: flex; align-items: flex-end; gap: 8px; }
#size-popup .sp-field { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
#size-popup .sp-field label { font-size: 13px; color: #777; font-weight: 500; }
#size-popup .sp-field input {
    width: 100%; height: 36px; box-sizing: border-box;
    border: 1px solid #dcdfe3; border-radius: 8px;
    padding: 0 10px; font-size: 14px; font-family: inherit; color: #333;
    outline: none; transition: border-color .15s;
}
#size-popup .sp-field input:focus { border-color: #338FED; }
#size-popup #sp-lock {
    flex-shrink: 0; width: 36px; height: 36px; margin-bottom: 0;
    display: flex; align-items: center; justify-content: center;
    background: #fff; border: 1px solid #aaa; border-radius: 8px;
    color: #aaa; cursor: pointer; transition: all .15s;
}
#size-popup #sp-lock:hover { background: #f3f3f3; }
#size-popup #sp-lock.sp-locked { border-color: #444141; color: #444141; background: #fff; }
#size-popup #sp-lock .sp-lock-off { display: none; }
#size-popup #sp-lock .sp-lock-on { display: block; }
#size-popup #sp-lock:not(.sp-locked) .sp-lock-on { display: none; }
#size-popup #sp-lock:not(.sp-locked) .sp-lock-off { display: block; }
#size-popup #sp-apply {
    width: 100%; height: 38px; margin-top: 16px;
    background: #fff; color: #338FED;
    border: 1px solid #338FED; border-radius: 9px;
    font-size: 14px; font-weight: 600; font-family: inherit;
    cursor: pointer; transition: background .15s;
}
#size-popup #sp-apply:hover { background: #E5F3FD; }

#eyedropper-preview {
    position: fixed;
    display: none;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 6px 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
    pointer-events: none;
    z-index: 9999;
    font-size: 12px;
    font-weight: 500;
    color: #333;
    white-space: nowrap;
    transform: translate(14px, -50%);
}
#eyedropper-preview.visible { display: flex; }
#eyedropper-swatch {
    width: 22px; height: 22px;
    border-radius: 4px;
    border: 1px solid rgba(0,0,0,.12);
    flex-shrink: 0;
}

/* ── 좌측 아이콘 사이드바 ── */
#sidebar {
    width: var(--sidebar-w);
    background: var(--surface);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 10px 6px 0;
    gap: 10px;
    flex-shrink: 0;
    z-index: 40;
}

.sidebar-btn {
    width: 100%; height: auto;
    border: none;
    background: none;
    border-radius: 0;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 0;
    gap: 8px;
    color: var(--icon);
    transition: background .15s, color .15s;
    position: relative;
}
.sidebar-btn span {
    font-size: 12px;
    line-height: 1;
    color: var(--text-sub);
}
.sidebar-btn:hover { background: #F3F3F3; border-radius: 8px; }
.sidebar-btn:hover span { color: var(--icon-h); }
a.sidebar-btn { color: var(--icon); text-decoration: none; }
a.sidebar-btn:hover { color: var(--icon); }
.sidebar-btn.active { background: #E5F3FD; color: var(--accent); border-radius: 8px; }
.sidebar-btn.active span { color: var(--accent); }
.sidebar-btn-bottom { margin-top: auto; }

.sidebar-sep {
    width: 32px;
    height: 1px;
    background: var(--border);
    margin: 4px 0;
}

/* ── 좌측 패널 (사이드바 탭 내용) ── */
#left-panel {
    width: var(--panel-w);
    background: var(--surface);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex-shrink: 0;
    transition: width .2s ease;
}
#left-panel.collapsed { width: 0; }
#left-panel.wide { width: 480px; }

.panel-tab { flex: 1; min-height: 0; overflow: hidden; }
.panel-tab::-webkit-scrollbar { width: 4px; }
.panel-tab::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
/* 전체 탭이 스크롤되어야 하는 패널 */
#panel-image, #panel-crop, #panel-filter, #panel-text, #panel-shape, #panel-line { overflow-y: auto; }
/* 이미지 패널: 내부 그리드만 스크롤 */
#panel-cp-image { display: flex; flex-direction: column; }

/* 패널 핸들 */
#left-panel-handle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 20px;
    background: var(--surface);
    border-right: 1px solid var(--border);
    flex-shrink: 0;
    z-index: 41;
    position: relative;
}
#left-panel-collapse-btn {
    width: 20px;
    height: 40px;
    border: none;
    background: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
    padding: 0;
    border-radius: 0 4px 4px 0;
    border-top: 1px solid var(--border);
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    transition: background .15s, color .15s;
}
#left-panel-collapse-btn:hover {
    background: #f3f3f3;
}

.panel-section {
    padding: 14px 14px 10px;
    border-bottom: 1px solid var(--border);
}
.panel-section:last-child { border-bottom: none; }

.panel-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-sub);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 10px;
}

/* 패널 내 버튼 그룹 */
.panel-btn-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.panel-btn {
    flex: 1;
    min-width: 0;
    height: 30px;
    background: none;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    color: var(--text);
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, border-color .15s;
    padding: 0 8px;
}
.panel-btn:hover { background: #F3F3F3;}
.panel-btn.primary {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}
.panel-btn.primary:hover { background: var(--accent-h); }
.panel-btn.danger {
    background: #FFF1F0;
    border-color: #FFCCC7;
    color: var(--danger);
}

/* 패널 label 그룹 */
.panel-field {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.panel-field label {
    font-size: 14px;
    color: var(--text-sub);
    flex-shrink: 0;
    width: 52px;
}
.panel-field input[type="color"] {
    width: 28px; height: 28px;
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
    padding: 2px;
    background: white;
}
#bgColorWrapper::after {
    content: '';
    display: none;
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom right, transparent calc(50% - 1px), #e53935 calc(50% - 1px), #e53935 calc(50% + 1px), transparent calc(50% + 1px));
    pointer-events: none;
    border-radius: 4px;
}
#bgColorWrapper.no-bg::after { display: block; }
#fillColorWrapper::after {
    content: '';
    display: none;
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom right, transparent calc(50% - 1px), #e53935 calc(50% - 1px), #e53935 calc(50% + 1px), transparent calc(50% + 1px));
    pointer-events: none;
    border-radius: 4px;
}
#fillColorWrapper.no-fill::after { display: block; }
#strokeColorWrapper::after {
    content: '';
    display: none;
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom right, transparent calc(50% - 1px), #e53935 calc(50% - 1px), #e53935 calc(50% + 1px), transparent calc(50% + 1px));
    pointer-events: none;
    border-radius: 4px;
}
#strokeColorWrapper.no-stroke::after { display: block; }
.panel-field input[type="range"] {
    flex: 1;
    accent-color: var(--accent);
}
.panel-field input[type="number"] {
    flex: 1;
    height: 28px;
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0 8px;
    font-size: 14px;
    font-family: inherit;
    color: var(--text);
    outline: none;
}
.panel-field input[type="number"]:focus { border-color: var(--accent); }

/* ── Custom number spinners ── */
.num-spin-wrap { display: flex; align-items: stretch; }
.filter-header .num-spin-wrap { width: 66px; }
.slider-header .num-spin-wrap { width: 66px; }
.spacing-group  .num-spin-wrap { width: 100%; }
.text-color-group .num-spin-wrap { width: 74px; }

.num-spin-wrap input[type="number"] {
    flex: 1;
    min-width: 0;
    width: auto !important;
    border-right: none !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
.num-spin-wrap input[type="number"]::-webkit-inner-spin-button,
.num-spin-wrap input[type="number"]::-webkit-outer-spin-button,
.size-input-wrap input[type="number"]::-webkit-inner-spin-button,
.size-input-wrap input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
}
.num-spin-wrap input[type="number"],
.size-input-wrap input[type="number"] { -moz-appearance: textfield; }

.nsb-btns {
    display: flex;
    flex-direction: column;
    width: 18px;
    flex-shrink: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-left: 1px solid var(--border);
    border-radius: 0 4px 4px 0;
}
.size-input-wrap .nsb-btns {
    border: none;
    border-left: 1px solid var(--border);
    border-radius: 0;
    width: 20px;
    align-self: stretch;
    height: auto;
}
.nsb-up, .nsb-dn {
    flex: 1;
    border: none;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center; 
    justify-content: center;
    padding: 0;
    color: var(--text-sub);
    transition: background .12s;
}
.nsb-up { border-bottom: 1px solid var(--border); }
.nsb-up:hover, .nsb-dn:hover { background: #f3f3f3;}
.panel-field select {
    flex: 1;
    height: 28px;
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0 6px;
    font-size: 14px;
    font-family: inherit;
    color: var(--text);
    background: white;
    outline: none;
}
.panel-field .val-label {
    font-size: 14px;
    color: var(--text-sub);
    min-width: 32px;
    text-align: right;
}
.panel-field input[type="checkbox"] {
    accent-color: var(--accent);
    width: 14px; height: 14px;
    cursor: pointer;
}

/* SNS 레이아웃 버튼 */
.sns-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    margin-bottom: 4px;
}
.sns-btn {
    height: 28px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 5px;
    font-size: 14px;
    font-family: inherit;
    color: var(--text);
    cursor: pointer;
    padding: 0 6px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background .15s;
}
.sns-btn:hover { background: #E8EAEF; }

.sns-sub-title {
    font-size: 14px;
    color: var(--text-sub);
    margin: 8px 0 5px;
}

/* 자르기 패널 특별 */
#crop-panel-btn {
    width: 100%;
    height: 36px;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: var(--radius);
    font-size: 14px;
    font-family: inherit;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s;
}
#crop-panel-btn:hover { background: var(--accent-h); }

/* 필터 슬라이더 */
.filter-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.filter-row label {
    font-size: 14px;
    color: var(--text-sub);
    width: 36px;
    flex-shrink: 0;
}
.filter-row input[type="range"] {
    flex: 1;
    accent-color: var(--accent);
}
.filter-row .val {
    font-size: 14px;
    color: var(--text-sub);
    width: 28px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ── 우측 캔버스 영역 ── */
#right-panel {
    flex: 1;
    position: relative;
    background: var(--bg);
    overflow: hidden;
}

#scroll-container {
    position: absolute;
    inset: 0;
    overflow: auto;
    z-index: 1;
}
#scroll-container::-webkit-scrollbar { width: 6px; height: 6px; transition: width .15s, height .15s; }
#scroll-container::-webkit-scrollbar-track { background: transparent; }
#scroll-container::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); border-radius: 4px; }
#scroll-container::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.4); }
#scroll-container::-webkit-scrollbar-corner { background: transparent; }
#scroll-container:hover::-webkit-scrollbar { width: 10px; height: 10px; }

#viewport {
    display: flex;
    justify-content: center;
    align-items: center;
}
  
#canvas-container {
    position: relative;
    border: 1px solid var(--border);
    flex-shrink: 0;
    overflow: hidden;
    box-shadow: 0 2px 16px rgba(0,0,0,0.10);
}

.canvas-container { overflow: visible !important; }

#canvas {
    background:
            linear-gradient(45deg, #dbdbdb 25%, transparent 25%, transparent 75%, #dbdbdb 75%),
            linear-gradient(45deg, #dbdbdb 25%, transparent 25%, transparent 75%, #dbdbdb 75%);
    background-position: 0 0, 10px 10px;
    background-color: #efefef;
    background-size: 20px 20px;
    display: block;
}

#overlay-canvas {
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 5;
}

/* 자르기 확인 UI */
#crop-confirm-ui {
    position: absolute;
    z-index: 100;
    background: white;
    border-radius: 20px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.18);
    padding: 4px 6px;
    display: none;
    gap: 2px;
    align-items: center;
    border: 1px solid var(--border);
}
#crop-confirm-ui button {
    width: 30px; height: 30px;
    border: none; background: none;
    font-size: 16px; cursor: pointer;
    border-radius: 50%;
    transition: background .15s;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-sub);
}
#cancelCropFloat:hover { background: #FFF1F0; color: var(--danger); }
#applyCropFloat:hover  { background: #E5F3FD; color: #338fed; }
#clip-confirm-ui {
    position: absolute;
    z-index: 100;
    background: white;
    border-radius: 20px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.18);
    padding: 4px 6px;
    display: none;
    gap: 2px;
    align-items: center;
    border: 1px solid var(--border);
}
#clip-confirm-ui button {
    width: 30px; height: 30px;
    border: none; background: none;
    font-size: 16px; cursor: pointer;
    border-radius: 50%;
    transition: background .15s;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-sub);
}
#cancelClipFloat:hover  { background: #FFF1F0; color: var(--danger); }
#applyClipFloat:hover   { background: #E5F3FD; color: #338fed; }
.clip-confirm-sep { width: 1px; height: 18px; background: var(--border); margin: 0 2px; flex-shrink: 0; }
.clip-release-btn {
    width: auto !important;
    padding: 0 10px !important;
    border-radius: 14px !important;
    font-size: 12px !important;
    gap: 4px;
    white-space: nowrap;
    color: var(--text-sub) !important;
}
.clip-release-btn:hover { background: #FFF1F0 !important; color: var(--danger) !important; }

/* ── 줌 컨트롤 (우하단) ── */
#zoom-controls {
    position: absolute;
    bottom: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    gap: 2px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 4px 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    z-index: 50;
}

#zoom-controls button {
    width: 24px; height: 30px;
    border: none; background: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 15px;
    color: var(--icon);
    display: flex; align-items: center; justify-content: center;
    transition: background .15s;
}
#zoom-controls button:hover { background: var(--bg); color: var(--icon-h); }

#zoom-display-btn {
    height: 24px;
    padding: 0 8px;
    background: none;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-family: inherit;
    color: var(--text);
    cursor: pointer;
    min-width: 46px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    position: relative;
}
#zoom-display-btn:hover { background: var(--bg); }

/* 줌 드롭다운 */
#zoom-dropdown {
    display: none;
    position: absolute;
    bottom: calc(100% + 4px);
    right: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    min-width: 120px;
    padding: 4px 0;
    z-index: 200;
}
#zoom-dropdown.show { display: block; }
#zoom-dropdown button {
    width: 100%;
    padding: 7px 14px;
    background: none;
    border: none;
    text-align: center;
    font-size: 14px;
    font-family: inherit;
    color: var(--text);
    cursor: pointer;
}
#zoom-dropdown button:hover { background: var(--bg); }
#zoom-dropdown button.active { color: var(--accent); background: #E5F3FD; }
#zoom-dropdown .zoom-sep {
    height: 1px; background: var(--border); margin: 4px 0;
}

/* 팝업 메뉴 위치들 */
#align-popup  { left: 0; }
#order-popup  { left: 0; }
#flip-popup   { left: 0; }

/* 지우개 커서 */
#eraserCursor {
    position: absolute;
    pointer-events: none;
    border: 1px solid #ccc;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    display: none;
    z-index: 9999;
}

/* ── 새 패널 스타일 ── */
.size-row {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    margin-bottom: 2px;
}
.size-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
} 
.size-label { font-size:14px; color:var(--text-sub); }
.size-input-wrap {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--border);
    border-radius: 5px;
    overflow: hidden;
    background: white; 
    height: 30px;
}
.size-input-wrap input {
    flex: 1;
    height: 100%;
    border: none;
    padding: 0 6px;
    font-size: 14px;
    font-family: inherit;
    color: var(--text);
    outline: none;
    min-width: 0;
    width: 0;
    text-align: center;
}
.size-unit {
    font-size: 14px;
    color: var(--text-sub);
    padding: 0 5px;
    background: var(--bg);
    height: 100%;
    display: flex;
    align-items: center;
    border-left: 1px solid var(--border);
    flex-shrink: 0;
}
.ratio-lock-btn {
    width: 28px;
    height: 30px;
    border: 1px solid #aaa;
    border-radius: 5px;
    background: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #aaa;
    transition: background .12s, color .12s, border-color .12s;
    align-self: flex-end;
    margin-bottom: 0;
}
.ratio-lock-btn:hover { background: #f3f3f3; }
.ratio-lock-btn.locked { color: var(--text); border-color: var(--text); background: white; }

.size-input-row, .size-input-group, .size-lock-icons { display: none !important; }

.layout-group { margin-bottom:10px; }
.layout-group-title { font-size:14px; color:var(--text-sub); display:flex; align-items:center; gap:5px; margin-bottom:8px; font-weight:500; }
#panel-image .layout-group { margin-top:14px; }
#panel-cp-image .layout-group-title { margin-bottom:10px; }
.layout-btn { display:block; width:100%; height:30px; background:#ffffff; border:1px solid var(--border); border-radius:5px; font-size:14px; font-family:inherit; color:var(--text); cursor:pointer; text-align:left; padding:0 10px; margin-bottom:5px; transition:background .12s; }
.layout-btn:hover { background:#F3F3F3; }

.filter-item { margin-bottom:14px; }
.filter-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:5px; font-size:14px; color:var(--text); }
.filter-num-input { width:48px; height:26px; border:1px solid var(--border); border-radius:4px; padding:0 6px; font-size:14px; font-family:inherit; text-align:center; color:var(--text); outline:none; }
.filter-track-wrap { position:relative; height:20px; display:flex; align-items:center; }
.filter-track { position:absolute; left:0; right:0; height:6px; border-radius:3px; pointer-events:none; }
.filter-range { -webkit-appearance:none; width:100%; height:4px; background:var(--border); border-radius:2px; outline:none; cursor:pointer; }
.filter-range.overlay { position:absolute; top:50%; left:0; transform:translateY(-50%); background:transparent; height:20px; }
.filter-range::-webkit-slider-thumb { -webkit-appearance:none; width:16px; height:16px; border-radius:50%; background:white; border:2px solid var(--accent); box-shadow:0 1px 4px rgba(0,0,0,0.2); cursor:pointer; }

.text-toolbar-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.text-color-group { display:flex; align-items:center; gap:6px; }
.text-color-group input[type="color"] { width:24px; height:24px; border:1px solid var(--border); border-radius:4px; cursor:pointer; padding:1px; }
.text-format-row { display:flex; align-items:center; gap:3px; padding:3px; background:var(--bg); border-radius:6px; margin-bottom:8px; }
#panel-text .panel-field { margin: 6px 0 18px 0; }
#panel-text .text-toolbar-row { margin-bottom:18px; }
#panel-text .text-color-group { gap:14px; }
#panel-text #textColor { background:#fff; }
#panel-text #fontSize { width:70px; }
#panel-text .text-format-row { margin-bottom:18px; background : #fff; border : 1px solid #e7e7e7; }
#panel-text .text-format-row .fmt-btn { flex: 1; }
#panel-text .panel-btn.primary,
#panel-line .panel-btn.primary,
#panel-image .panel-btn.primary,
#panel-cp-image .panel-btn.primary { background:#fff; border-color:#338fed; color:#338fed; }
#panel-text .panel-btn.primary { margin-top:18px; }
#panel-text .panel-btn.primary:hover,
#panel-line .panel-btn.primary:hover,
#panel-image .panel-btn.primary:hover,
#panel-cp-image .panel-btn.primary:hover { background:#E5F3FD; }
.fmt-btn { width:28px; height:28px; border:none; background:none; border-radius:5px; cursor:pointer; font-size:14px; font-family:inherit; color:var(--icon); display:flex; align-items:center; justify-content:center; transition:background .12s,color .12s; }
.fmt-btn:hover { background:#f3f3f3; color:var(--text); }
.fmt-btn.active { background:white; color:var(--accent); } 
.fmt-sep { width:1px; height:18px; background:var(--border); margin:0 2px; }
.text-spacing-row { display:flex; gap:8px; } 
.spacing-group { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.spacing-label { font-size:14px; color:var(--text-sub); }
.spacing-input { height:30px; border:1px solid var(--border); border-radius:5px; padding:0 8px; font-size:14px; font-family:inherit; color:var(--text); outline:none; width:100%; box-sizing:border-box; text-align:center; }

.shape-grid { display:flex; gap:6px; margin-bottom:24px; flex-wrap:wrap; }
.shape-icon-btn { width:48px; height:48px; border:1px solid var(--border); border-radius:6px; background:none; cursor:pointer; padding:5px; display:flex; align-items:center; justify-content:center; transition:background .12s,border-color .12s; }
.shape-icon-btn:hover { background:#F3F3F3; border-color:#E2E4E8; }
.shape-icon-btn svg { width:100%; height:100%; }
.color-row { display:flex; align-items:center; gap:14px; margin-bottom:14px; }
#panel-shape .color-row { margin-bottom:24px; gap:29px; }
#panel-line .color-row { margin-bottom:20px; }
.color-item { display:flex; align-items:center; gap:6px; font-size:14px; color:var(--text-sub); }
#panel-shape .color-item { gap:10px; }
#panel-shape .color-item input[type="color"] { background:#fff; }
.color-item input[type="color"] { width:24px; height:24px; border:1px solid var(--border); border-radius:4px; cursor:pointer; padding:1px; }
.stroke-color-wrap input[type="color"] { width:24px; height:24px; border:1px solid var(--border); border-radius:4px; padding:1px; cursor:pointer; }
.slider-field { margin-bottom:12px; }
.slider-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:5px; font-size:14px; color:var(--text); }
#panel-shape .slider-field { margin-bottom:30px; }
#panel-line .layout-group { margin-bottom:24px; }
#panel-line .slider-field { margin-bottom:30px; }
#panel-line .slider-header { margin-bottom:15px; }
#panel-line .line-style-field { margin-bottom:20px; }
#panel-line .line-cap-field { margin-bottom:24px; }
#panel-line .line-style-field > span,
#panel-line .line-cap-field > span { width:50px; }
#panel-line .color-item input[type="color"]{background:#fff;}
.slider-num { width:48px; height:26px; border:1px solid var(--border); border-radius:4px; padding:0 6px; font-size:14px; font-family:inherit; text-align:center; color:var(--text); outline:none; }

.arrow-type-group { display:flex; align-items:center; gap:4px; }
.arrow-btn { width:44px; height:28px; border:1px solid var(--border); border-radius:5px; background:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--icon); transition:background .12s,border-color .12s,color .12s; padding:0 4px; }
.arrow-btn:hover { background:#f3f3f3; }
.arrow-btn.active { background:#E5F3FD; border-color:var(--accent); color:var(--accent); }

/* ── 작업공간 모달 ── */
.ws-modal-backdrop { display:none; position:fixed; top:0; left:0; width:100vw; height:100vh; background:rgba(0,0,0,0.45); z-index:9000; }
.ws-modal-backdrop.show { display:block; }
.ws-modal-backdrop.show > .ws-modal { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); }
.ws-modal { background:#fff; border-radius:12px; box-shadow:0 8px 32px rgba(0,0,0,0.18); min-width:400px; max-width:90vw; overflow:hidden; }
.ws-modal-wide { min-width:640px; max-width:860px; width:90vw; }
.ws-modal-header { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--border); font-size:15px; font-weight:600; color:var(--text); }
.ws-modal-close { background:none; border:none; font-size:16px; cursor:pointer; color:var(--text-sub); padding:2px 6px; border-radius:4px; line-height:1; }
.ws-modal-close:hover { background:var(--bg); color:var(--text); }
.ws-modal-body { padding:26px 30px; max-height:70vh; overflow-y:auto; }
.ws-modal-footer { display:flex; justify-content:flex-end; gap:8px; padding:14px 20px; border-top:1px solid var(--border); }
.ws-label { display:block; font-size:14px; color:var(--text-sub); padding:0 0 12px 0; }
.ws-input { width:100%; height:38px; border:1px solid var(--border); border-radius:8px; padding:0 12px; font-size:14px; font-family:inherit; color:var(--text); outline:none; }
.ws-input:focus { border-color:var(--accent); }
.ws-btn-cancel { height:36px; padding:0 16px; border:1px solid var(--border); border-radius:8px; background:#fff; font-size:14px; font-family:inherit; cursor:pointer; color:var(--text); }
.ws-btn-cancel:hover { background:var(--bg); }
.ws-btn-primary { height:36px; padding:0 20px; border:none; border-radius:8px; background:var(--accent); font-size:14px; font-family:inherit; cursor:pointer; color:#fff; font-weight:500; }
.ws-btn-primary:hover { background:var(--accent-h); }

/* ── 결제(구매) 모달 ── */
.pm-modal { width:550px; max-width:95vw; }
.pm-modal .ws-modal-body { font-size:16px; }
.pm-modal .ws-modal-header { font-size:16px; }
.pm-modal .ws-btn-cancel,
.pm-modal .ws-btn-primary { font-size:16px; }
.pm-desc { font-size:16px; line-height:1.5; color:var(--text-sub); margin:0 0 20px; }
.pm-section { margin-bottom:20px; }
.pm-section-label { font-size:16px; font-weight:600; color:var(--text); margin-bottom:10px; }

/* 라이선스 선택 라벨 + 도움말(?) 버튼 */
.pm-license-label { display:flex; align-items:center; gap:8px; }
.pm-license-help-mark {
    display:inline-flex; align-items:center; justify-content:center;
    width:20px; height:20px; padding:0;
    border:1px solid #d5d5d5; border-radius:50%;
    background:#fff; color:#827b7b; font-size:12px; font-weight:600; line-height:1;
    cursor:pointer; user-select:none;
    transition:border-color .15s, color .15s, background .15s;
}
.pm-license-help-mark:hover,
.pm-license-help-mark:focus-visible { border-color:var(--accent); color:var(--accent); background:#f0f7ff; outline:none; }

/* 라이선스 안내 모달 */
.lgm-modal { width:680px; max-width:92vw; }
.lgm-modal .ws-modal-body { max-height:70vh; overflow-y:auto; }
.lgm-more { margin:14px 0 0; text-align:right; font-size:13px; }
.pm-license-table { border-collapse:collapse; width:100%; font-weight:400; }
.pm-license-table th, .pm-license-table td {
    border:1px solid #d5d5d5; font-size:13px; padding:8px 8px; color:var(--text); vertical-align:middle;
    line-height:1.5; word-break:keep-all;
}
.pm-license-table th { background:#f7f8fa; font-weight:600; text-align:center; }
.pm-license-table .align-c { text-align:center; }
.pm-license-table .cell-2Jk4 { background:#fafcff; }
.pm-license-table .bold { font-weight:700; }
.pm-license-table .color338fed { color:#338fed; }
.pm-license-table .ff7171 { color:#ff7171; }
.pm-license-table a { color:#338fed; }

/* 구매 이미지 썸네일 */
.pm-img-list { display:flex; flex-wrap:wrap; gap:8px; }
.pm-thumb { width:88px; height:88px; object-fit:cover; border-radius:8px; border:1px solid var(--border); }

/* 라이선스 카드 */
.pm-license-group { display:flex; flex-direction:column; gap:10px; }
.pm-license {
    display:flex; align-items:center; gap:12px;
    padding:14px 16px;
    border:1.5px solid var(--border);
    border-radius:10px;
    cursor:pointer;
    transition:border-color .15s, background .15s, box-shadow .15s;
}
.pm-license:hover { border-color:#c3d9f3; background:#fafcff; }
.pm-license input { position:absolute; opacity:0; width:0; height:0; }
.pm-license-radio {
    flex-shrink:0;
    width:20px; height:20px;
    border:2px solid #c4c8ce;
    border-radius:50%;
    position:relative;
    transition:border-color .15s;
}
.pm-license-info { display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
.pm-license-name { font-size:16px; font-weight:600; color:var(--text); }
.pm-license-sub { font-size:16px; color:var(--text-sub); opacity:.85; }
.pm-license-price { font-size:16px; font-weight:700; color:var(--text); white-space:nowrap; }
.pm-license-price small { font-size:16px; font-weight:400; color:var(--text-sub); margin-left:2px; }

/* 선택된 카드 */
.pm-license:has(input:checked) {
    border-color:var(--accent);
    background:#f0f7ff;
    box-shadow:0 0 0 1px var(--accent) inset;
}
.pm-license:has(input:checked) .pm-license-radio {
    border-color:var(--accent);
}
.pm-license:has(input:checked) .pm-license-radio::after {
    content:""; position:absolute;
    top:50%; left:50%; transform:translate(-50%,-50%);
    width:10px; height:10px;
    border-radius:50%;
    background:var(--accent);
}

/* 요약/잔액 박스 */
.pm-summary-box {
    background:var(--bg);
    border-radius:10px;
    padding:16px 18px;
    display:flex; flex-direction:column; gap:6px;
}
.pm-summary { font-size:16px; font-weight:600; color:var(--text); }
.pm-balance { font-size:16px; color:var(--text-sub); }
.ws-list-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:14px; }
.ws-card { border:1px solid var(--border); border-radius:10px; overflow:hidden; cursor:pointer; transition:box-shadow .15s,border-color .15s; background:#fff; position:relative; }
.ws-card:hover { box-shadow:0 4px 16px rgba(0,0,0,0.1); border-color:var(--accent); }
.ws-card-thumb { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; background:var(--bg); }
.ws-card-thumb-empty { width:100%; aspect-ratio:4/3; background:var(--bg); display:flex; align-items:center; justify-content:center; color:var(--text-sub); font-size:28px; }
.ws-card-info { padding:10px 12px; }
.ws-card-title { font-size:14px; font-weight:500; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:4px; }
.ws-card-date { font-size:14px; color:var(--text-sub); }
.ws-card-delete {position:absolute; top:6px; right:6px; width:22px; height:22px; border-radius:50%; background:rgba(0,0,0,0.45); border:none; color:#fff; font-size:14px; cursor:pointer; display:none; align-items:center; justify-content:center; line-height:1; padding-bottom: 4px; padding-left: 1px;}
.ws-card:hover .ws-card-delete { display:flex; align-items:center; justify-content:center; }
.ws-card-delete:hover { background:var(--danger); }
.ws-card-active { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent); }
.ws-card-badge { position:absolute; top:8px; left:8px; width:22px; height:22px; border-radius:50%; background:var(--accent); display:flex; align-items:center; justify-content:center; box-shadow:0 1px 4px rgba(0,0,0,0.25); }
.ws-empty { text-align:center; padding:48px 0; color:var(--text-sub); font-size:14px; }
#ws-list-modal .ws-modal-body { min-height:260px; display:flex; flex-direction:column; }
#ws-list-modal .ws-empty { flex:1; display:flex; align-items:center; justify-content:center; padding:0 0 20px 0; font-size:16px; }
#ws-list-modal #ws-list-grid:has(.ws-empty) { display:flex; flex:1; }

/* ── 이미지 패널 (구매/검색) ── */
#panel-cp-image { display:flex; flex-direction:column; }
.cp-search-section { padding:14px; border-bottom:1px solid var(--border); flex-shrink:0; }
.cp-search-wrap { display:flex; align-items:center; border:1px solid var(--border); border-radius:6px; padding:0 14px; gap:8px; height:34px; transition:border-color .15s; }
.cp-search-wrap:focus-within { border-color:var(--accent); }
.cp-search-input { flex:1; border:none; outline:none; font-size:14px; font-family:inherit; color:var(--text); background:transparent; min-width:0; }
.cp-search-input::placeholder { color:#aaa; }
.cp-search-icon-btn { background:none; border:none; cursor:pointer; padding:0; display:flex; align-items:center; flex-shrink:0; }
.cp-tabs { display:flex; border-bottom:1px solid var(--border); flex-shrink:0; }
.cp-tab-btn { flex:1; height:45px; border:none; background:none; font-size:14px; font-family:inherit; color:var(--text-sub); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; transition:color .15s,border-color .15s; }
.cp-tab-btn.active { color:var(--accent); border-bottom-color:var(--accent); font-weight:500; }
.cp-tab-content { flex:1; overflow-y:auto; min-height:0; }
.cp-upload-footer { flex-shrink:0; padding:8px 12px; border-top:1px solid var(--border); }
#cp-tab-purchased { display:flex; flex-direction:column; overflow:hidden; }
#purchased-grid { flex:1; min-height:0; overflow-y:auto; padding:8px; }
#cp-tab-liked { padding:8px; }
#cp-search-overlay { display:flex; flex-direction:column; overflow:hidden; }
#cp-search-grid { flex:1; min-height:0; overflow-y:auto; padding:8px; }
.cp-img-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:6px; }
.cp-load-more { text-align:center; padding:12px 0; font-size:13px; color:var(--text-sub); }
.cp-img-card { aspect-ratio:1; overflow:hidden; border-radius:6px; cursor:pointer; border:1px solid var(--border); transition:border-color .15s; }
.cp-img-card:hover { border-color:var(--accent); }
.cp-img-thumb { width:100%; height:100%; object-fit:cover; display:block; background:var(--bg); }
.ws-login-notice { text-align:center; padding:12px; background:#FFF8E1; border:1px solid #FFE082; border-radius:8px; font-size:14px; color:#795548; margin-bottom:12px; }
.ws-choice-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.ws-choice-btn { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:22px 12px; border:1.5px solid var(--border); border-radius:10px; background:var(--surface); cursor:pointer; font-size:14px; font-weight:600; color:var(--text); font-family:inherit; transition:border-color .15s,background .15s,color .15s; width:100%; }
.ws-choice-btn:hover { border-color:var(--accent); background:#E5F3FD; color:var(--accent); }
.ws-choice-btn:hover span { color:var(--accent); }
.ws-choice-btn span { font-size:14px; font-weight:400; color:var(--text-sub); }

/* ── 임시저장 복원 배너 ── */
#draft-banner {
    display: none;
    position: fixed;
    top: var(--topbar-h);
    left: 50%;
    transform: translateX(-50%);
    z-index: 500;
    background: #1a1d23;
    color: #fff;
    align-items: center;
    gap: 12px;
    padding: 10px 18px;
    font-size: 14px;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
    white-space: nowrap;
}
#draft-banner.show { display: flex; }
#draft-restore-btn { background: var(--accent); color: #fff; border: none; border-radius: 6px; padding: 6px 16px; font-size: 14px; font-family: inherit; font-weight: 600; cursor: pointer; }
#draft-restore-btn:hover { background: var(--accent-h); }
#draft-dismiss-btn { background: rgba(255,255,255,0.12); color: #fff; border: none; border-radius: 6px; font-size: 14px; font-family: inherit; cursor: pointer; padding: 6px 12px; }

/* ===================== 커스텀 툴팁 ===================== */
#editor-tooltip {
    position: fixed;
    background: #2c2c2c;
    color: #fff;
    font-size: 12px;
    line-height: 1;
    padding: 6px 10px;
    border-radius: 6px;
    pointer-events: none;
    z-index: 99999;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.12s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.28);
    font-family: inherit;
}
#draft-dismiss-btn:hover { background: rgba(255,255,255,0.22); }

/* ===================== 클리핑 마스크 가이드 모달 ===================== */
#clip-guide-modal {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 9000;
    background: rgba(0,0,0,0.35);
}
#clip-guide-modal.show {
    display: block;
}

.cgm-card {
    background: #fff;
    border-radius: 16px;
    width: 380px;
    padding: 36px 24px 24px 24px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.18);
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
}
.cgm-close {
    position: absolute;
    top: 10px; right: 10px;
    width: 28px; height: 28px;
    border: none; background: none;
    cursor: pointer;
    color: #888;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    transition: background .15s, color .15s;
}
.cgm-close:hover { background: var(--bg); color: var(--text); }

/* 슬라이드 */
.cgm-slides-wrap {
    overflow: hidden;
    border-radius: 12px;
    background: #f0f7ff;
    margin-bottom: 14px;
}
.cgm-slides {
    display: flex;
    transition: transform 0.4s ease;
    width: 300%;
}
.cgm-slide {
    width: 33.333%;
    padding: 20px 12px 14px;
    text-align: center;
    flex-shrink: 0;
}

/* 일러스트 */
.cgm-illus { margin-bottom: 10px; }
.cgm-illus-canvas {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    height: 92px;
}
.cgm-obj { display: flex; align-items: center; justify-content: center; }
.cgm-circle {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: rgba(51,143,237,0.15);
    border: 2px solid #338fed;
}
.cgm-imgbox {
    width: 76px; height: 64px;
    border-radius: 6px;
    background: #e8f4ff;
    border: 1.5px solid #338fed;
    overflow: hidden;
}
.cgm-sample-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cgm-plus { font-size: 18px; color: #338fed; font-weight: 300; line-height: 1; }
.cgm-selected { box-shadow: none; }
.cgm-select-box {
    display: flex;
    gap: 10px;
    align-items: center;
    border: 2px dashed #338fed;
    border-radius: 8px;
    padding: 8px 12px;
}
.cgm-result-circle {
    width: 84px; height: 84px;
    border-radius: 50%;
    border: 2.5px solid #338fed;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(51,143,237,0.25);
}

.cgm-step-label {
    font-size: 12px;
    font-weight: 700;
    color: #338fed;
    letter-spacing: 0.08em;
    margin-bottom: 4px;
}
.cgm-step-desc {
    font-size: 16px;
    color: var(--text-sub);
    line-height: 1.5;
}

/* 점 인디케이터 */
.cgm-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-bottom: 14px;
}
.cgm-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #dde3ec;
    transition: background .3s;
}
.cgm-dot.active { background: #338fed; }

.cgm-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    margin-top: 24px;
    margin-bottom: 14px;
    text-align: center;
}
.cgm-desc {
    font-size: 16px;
    color: var(--text-sub);
    text-align: center;
    line-height: 1.6;
    margin-bottom: 24px;
}
.cgm-ok-btn {
    display: block;
    width: 100%;
    height: 40px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}
.cgm-ok-btn:hover { background: var(--accent-h); }

/* ===================== 사용법 스포트라이트 튜토리얼 ===================== */
#tut-spot { position: fixed; inset: 0; z-index: 10000; pointer-events: auto; }
#tut-spot.show { display: block !important; }
#tut-hole {
    position: absolute; border-radius: 10px;
    box-shadow: 0 0 0 9999px rgba(15,23,42,0.62);
    outline: 3px solid var(--accent);
    transition: all .35s cubic-bezier(.4,0,.2,1);
    pointer-events: none;
}
#tut-tip {
    position: absolute; width: 300px; max-width: 86vw;
    background: #fff; border-radius: 14px;
    box-shadow: 0 16px 44px rgba(0,0,0,0.3);
    padding: 20px 20px 18px;
    pointer-events: auto;
    transition: all .35s cubic-bezier(.4,0,.2,1);
    font-family: 'Pretendard', sans-serif;
}
#tut-tip .tut-arrow { position: absolute; width: 14px; height: 14px; background: #fff; transform: rotate(45deg); }
#tut-tip .tut-cnt { font-size: 12px; font-weight: 700; color: var(--accent); letter-spacing: .5px; margin-bottom: 7px; }
#tut-tip h3 { font-size: 18px; font-weight: 700; margin: 0 0 8px; letter-spacing: -.4px; color: var(--text); }
#tut-tip p { font-size: 14px; color: var(--text-sub); line-height: 1.65; margin: 0; }
#tut-tip p b { color: var(--text); font-weight: 600; }
#tut-tip .tut-guide { margin-top: 16px; padding-top: 14px; padding-bottom: 6px; border-top: 1px solid #eef0f4; display: flex; flex-direction: column; align-items: center; gap: 4px; }
#tut-tip .tut-guide-txt { font-size: 14px; color: var(--text-sub); line-height: 1.5; text-align: center; }
#tut-tip .tut-guide-btn {
    align-self: center; background: none; padding: 0;
    color: var(--accent); font-size: 14px; font-weight: 600; text-decoration: none;
    transition: color .15s;
}
#tut-tip .tut-guide-btn:hover { color: var(--accent-h); text-decoration: underline; }
#tut-tip .tut-row { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
#tut-tip .tut-prog { display: flex; gap: 5px; margin-right: auto; flex-wrap: wrap; }
#tut-tip .tut-prog i { width: 7px; height: 7px; border-radius: 50%; background: #d3dae6; }
#tut-tip .tut-prog i.on { background: var(--accent); width: 18px; border-radius: 4px; }
#tut-tip button { border: none; font-family: inherit; font-size: 14px; font-weight: 600; border-radius: 9px; cursor: pointer; height: 38px; padding: 0 16px; transition: .15s; }
#tut-tip .tut-prev { background: var(--bg); color: var(--text); }
#tut-tip .tut-prev:hover { background: #e8eaee; }
#tut-tip .tut-prev:disabled { opacity: .35; cursor: default; }
#tut-tip .tut-next { background: var(--accent); color: #fff; }
#tut-tip .tut-next:hover { background: var(--accent-h); }
#tut-tip .tut-skip { position: absolute; top: 16px; right: 16px; background: none; height: auto; padding: 0; color: #9aa3b0; font-size: 12px; font-weight: 500; }
#tut-tip .tut-skip:hover { color: var(--text); }

/* ── 사용법 선택 메뉴 (튜토리얼/가이드/단축키) ── */
#usage-menu {
    display: none;
    position: fixed;
    z-index: 100001;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(0,0,0,.16);
    padding: 6px;
    min-width: 168px;
}
#usage-menu.show { display: block; }
.usage-menu-item {
    display: flex; align-items: center; gap: 10px;
    width: 100%;
    padding: 10px 12px;
    background: none; border: none; border-radius: 8px;
    font-size: 14px; font-family: inherit; color: #444; text-align: left;
    cursor: pointer; transition: background .12s;
}
.usage-menu-item:hover { background: #F3F3F3; }
.usage-menu-item svg { color: #666; flex-shrink: 0; }

/* ── 편집기 단축키 모달 ── */
.sc-backdrop {
    display: none; position: fixed; inset: 0; z-index: 100002;
    background: rgba(0,0,0,.45); align-items: center; justify-content: center;
    padding: 24px; font-family: inherit;
}
.sc-backdrop.sc-show { display: flex; }
.sc-dialog {
    background: #fff; width: 100%; max-width: 880px; max-height: 90vh; overflow: auto;
    border-radius: 16px; box-shadow: 0 16px 48px rgba(0,0,0,.25);
}
.sc-header {
    display: flex; align-items: center; gap: 12px;
    padding: 22px 26px; border-bottom: 1px solid #f0f0f0;
}
.sc-logo {
    width: 40px; height: 40px; border-radius: 11px;
    background: linear-gradient(135deg,#4f8ef7,#3b6fe0);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 10px rgba(59,111,224,.35);
}
.sc-title { font-size: 20px; font-weight: 800; color: #2b2f36; }
.sc-close {
    margin-left: auto; background: none; border: none; font-size: 26px;
    line-height: 1; color: #aaa; cursor: pointer; padding: 0 4px; 
}
.sc-close:hover { color: #666; }
.sc-body {
    display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
    padding: 22px 26px 26px;
}
.sc-col { display: flex; flex-direction: column; gap: 18px; }
/* 본문(행) 영역 = 연회색 배경. overflow:hidden으로 헤더 풀블리드 배경이 둥근 모서리 안에서 잘림 */
.sc-group { background: #f7f8fa; border-radius: 14px; overflow: hidden; padding: 4px 18px 0px 13px; }
/* 섹션 타이틀 = 헤더 band: 본문보다 밝은 배경 + 하단 구분선 (좌우/상단 풀블리드로 카드 가장자리까지) */
.sc-group-title {
    display: flex; align-items: center; gap: 9px;
    font-size: 15px; font-weight: 800; color: #14181f;
    background: #f1f2f5;
    margin: -4px -18px 0 -13px;
    padding: 18px 18px 14px 13px;
    border-bottom: 1px solid #ededf1;
}
.sc-group-title i { width: 4px; height: 16px; border-radius: 3px; display: inline-block; }
/* 모든 행 위아래 간격(13px) 동일 → 타이틀↔첫행, 행↔행, 마지막행↔하단 모두 26px로 균일 */
.sc-row {
    display: flex; align-items: center; gap: 14px;
    padding: 13px 0; border-top: 1px solid #ededf1;
}
.sc-group-title + .sc-row { border-top: none; }
.kc { display: flex; align-items: center; gap: 6px; flex-shrink: 0; flex-wrap: wrap; color: #9aa1a9; font-size: 13px; }
.kc kbd {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 30px; height: 34px; padding: 0 12px;
    background: #fff; border: 1px solid #dfe3e8; border-bottom-width: 2px;
    border-radius: 8px; font-family: inherit; font-size: 14px; font-weight: 700;
    color: #3b6fe0;
}
.sc-desc { font-size: 14px; color: #444; line-height: 1.45; }
.sc-desc b { color: #2b2f36; }
.sc-dim { color: #aab1b8; }
.sc-note { font-size: 13px; color: #555; padding: 2px 0 6px; }
.sc-note span { color: #aab1b8; }
@media (max-width: 760px) {
    .sc-body { grid-template-columns: 1fr; }
}

/* ───────────── 눈금자(자) ───────────── */
/* 되돌리기: 이 블록 + editor.php의 ruler 캔버스/토글버튼 + editor.js의 "눈금자" 블록 제거 */
:root { --ruler-size: 22px; }
/* 정석: 자가 켜지면 캔버스 스크롤 영역을 자 크기만큼 안쪽으로 밀어 공간 확보 (오버레이 좌표계는 그대로) */
#right-panel.rulers-on #scroll-container { top: var(--ruler-size); left: var(--ruler-size); }
#ruler-corner, #ruler-h, #ruler-v {
    display: none; position: absolute; z-index: 6; background: #fff;
}
#right-panel.rulers-on #ruler-corner,
#right-panel.rulers-on #ruler-h,
#right-panel.rulers-on #ruler-v { display: block; }
#ruler-corner { top: 0; left: 0; width: var(--ruler-size); height: var(--ruler-size); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
#ruler-h { top: 0; left: var(--ruler-size); right: 0; height: var(--ruler-size); border-bottom: 1px solid var(--border); }
#ruler-v { top: var(--ruler-size); left: 0; bottom: 0; width: var(--ruler-size); border-right: 1px solid var(--border); }

/* ── 내보내기 형식 선택 모달 ── */
/* 내보내기 버튼 바로 아래에 뜨는 팝오버 (배경은 클릭 감지용 투명) */
.exm-backdrop {
    display: none; position: fixed; inset: 0; z-index: 100000;
    background: transparent; font-family: inherit;
}
.exm-backdrop.exm-show { display: block; }
.exm-dialog {
    position: fixed; top: 0; right: 0; background: #fff; width: 300px;
    border-radius: 14px; box-shadow: 0 12px 36px rgba(0,0,0,.2);
    padding: 22px 22px 20px;
}
.exm-close {
    position: absolute; top: 10px; right: 10px;
    background: none; border: none; font-size: 20px; line-height: 1;
    color: #b5b5b5; cursor: pointer; padding: 0 2px;
}
.exm-close:hover { color: #777; }
.exm-title { font-size: 14px; font-weight: 700; color: #444141; margin: 4px 0 16px; }
/* 모달 안의 형식 드롭다운: 풀폭 */
.exm-dialog #export-format {
    position: relative; width: 100%; height: 40px;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 16px; background: #fff; border: 1px solid #e7e7e7; border-radius: 6px;
    cursor: pointer; outline: none;
    transition: border-color .15s;
}
.exm-dialog #export-format:hover { border-color: #c7ccd3; }
#export-format-label { font-size: 14px; font-weight: 400; color: #444141; }
.exm-dialog #export-format .ef-caret { color: #9aa3ad; transition: transform .15s; }
.exm-dialog #export-format.open .ef-caret { transform: rotate(180deg); }
.exm-dialog #export-format-menu {
    display: none; position: absolute; top: calc(100% + 6px); left: 0; right: 0; width: 100%;
    min-width: 0; background: #fff; border: 1px solid #e6e6e6; border-radius: 12px;
    box-shadow: 0 10px 28px rgba(0,0,0,.14); padding: 6px; margin: 0; list-style: none; z-index: 10;
}
.exm-dialog #export-format.open #export-format-menu { display: block; }
.exm-dialog #export-format-menu li {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 12px; border-radius: 8px;
    font-size: 14px; font-weight: 700; color: #444141; cursor: pointer; transition: background .12s;
}
.exm-dialog #export-format-menu li:hover { background: #F3F3F3; }
.exm-dialog #export-format-menu li.active { color: #338fed; }
.exm-dialog #export-format-menu li.active::after { content: '✓'; margin-left: auto; color: #338fed; font-size: 13px; }
.exm-dialog #export-format-menu .ef-desc { font-size: 12px; font-weight: 400; color: #b6bcc4; margin-left: auto; }
.exm-dialog #export-format-menu li.active .ef-desc { margin-left: auto; color: #338fed; }
#export-do-btn {
    width: 100%; height: 40px; margin-top: 12px;
    background: #338fed; color: #fff; border: none; border-radius: 6px;
    font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer; transition: background .15s;
}
#export-do-btn:hover { background: #2278cc; }