@charset "utf-8";

.builder-edit-container [contenteditable="true"] { word-wrap: break-word; /* white-space: break-spaces; */ white-space: normal;}

.layout-element {
    /* --hidden-element-z-index: 1; */
    --element-rotation: 0deg;
    --z-index: 1;
    position: relative;
    z-index: var(--hidden-element-z-index, var(--z-index));
    cursor: default;
    min-width: 100px;
    min-height: 100px;
    max-width: none;
    max-height: none;
    transform-origin: center center;
    grid-template-columns: 100%;
    pointer-events: all;
    cursor: move;
    rotate: var(--element-rotation, 0deg);
     /* 
    --rotation: 0deg;
    --grid-row: 8 / 12;
    --grid-column: 2 / 9;
    --m-grid-row: 2 / 3;
    --m-grid-column: 3 / 4;
    --m-rotation-element-left: 1.6815370000000058px;
    --m-rotation-element-top: 1.2854309999999884px;
    --m-rotation-element-width: 149px;
    --m-rotation-element-height: 194px;
    --m-element-rotation: 1deg; */
    /* 
    display: grid;
    grid-row: var(--grid-row);
    grid-column: var(--grid-column);
    left: var(--rotation-element-left, var(--left));
    top: var(--rotation-element-top, auto); */
    /* width: var(--rotation-element-width, var(--element-width, 100%));
    height: var(--rotation-element-height, var(--element-height, 100%)); */
    /* text-align: var(--text);
    rotate: var(--element-rotation, 0deg); */
}
/* [Column 2]                     [Column 9]
           ↓                              ↓
-----------|---|---|---|---|---|---|---|---|-----------
           |   |   |   |   |   |   |   |   |
[Row 8]  → +-------------------------------+
           |                               |
           |                               |
           |          이 영역을            | → (세로 4칸 차지)
           |         차지합니다!           |
           |                               |
[Row 12] → +-------------------------------+
           |   |   |   |   |   |   |   |   |
           ← ---------- 가로 7칸 ---------- → */

.builder-edit-block.builder-edit-block-text {min-height: auto;}
.layout-element.layout-element-textbox {--z-index: 2; -webkit-user-select: none; user-select: none; min-width: auto; min-height: auto; text-align: center;}


/* .block-layout[data-v-8f87fb66], .block-layout__element[data-v-8f87fb66] {
    position: relative;
} */
/* .layout-element:not(.is-active-element-present):hover, .layout-element.is-highlighted, .layout-element.is-blocking-resize, .layout-element--is-multi-selected {
    -webkit-user-select: text;
    user-select: text;
} */

/* 2. 이미지 컨테이너: 센터 정렬 핵심 */
/* .image__image--cropped { overflow: hidden; position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; transform: translate(-50%, -50%); display: flex; justify-content: center; align-items: center;}
.image__image--cropped img { width: 100%; height: 100%; vertical-align: top; max-width: fit-content;} */
/* .image__image--cropped-hidden { display: flex; justify-content: center; align-items: center; height: 100%;  display: flex; justify-content: center; overflow: visible; }
.image__image--cropped-hidden img { height: 100%; width: auto;  max-height: 100%; max-width: none;  display: block;  object-fit: contain;} */
/* .image__image--cropped { width: 100%; height: 100%; display: flex;  justify-content: center; align-items: center; overflow: hidden; transform-origin: center center;transition: rotate 0.1s linear;}
.image__image--cropped img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block;} */
.image__image--cropped {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.image__image--cropped img {
  position: absolute;
  width: 100%; /* 부모와 동일한 크기로 시작 */
  height: auto;
  object-fit: cover;
  object-position: center;
  display: block;
  /* 1.5배 확대 */
  transform: scale(1);
  cursor: grab;
  transform-origin: 0 0;
  overflow: visible;
}

.image__image--cropped img:active {
  cursor: grabbing;
}

.layout-element > img { width: 100%; height: 100%; vertical-align: top; max-width: fit-content;}
.layout-element__slot {display: grid; position: absolute; left: 0; right: 0; top: 0; bottom:0; grid-area: 1 / 1 / -1 / -1; /* visibility: hidden; */}

.layout-element__slot::before {content: ""; position: absolute; top: -2px;; right: -2px;; bottom: -2px;; left: -2px;; transform-origin: center; transition: .15s cubic-bezier(.22,1,.36,1); border: 2px solid transparent;}

.builder-edit-section.active .layout-element__slot:before,
.layout-element.is-highlighted .layout-element__slot:before,
.layout-element.is-active .layout-element__slot:before {opacity: 1; border-color: #357df9;}
.layout-element.is-cropping .layout-element__slot:before {border-style: dashed;}
.layout-element.text-selectable{ -webkit-user-select: text; user-select: text; cursor: text;} /* 텍스트는 복사 가능 */
.layout-element.text-selectable .layout-element__slot {pointer-events: none;}
.layout-element.text-selectable .layout-element__slot .layout-element-menu {pointer-events: all;}
/* .builder-edit-block-text .layout-element .layout-element__slot {pointer-events: none;}
.builder-edit-block-text .layout-element .layout-element__slot .layout-element-menu {pointer-events: all;}
.builder-edit-block-text .layout-element__slot::before {pointer-events: none; } */




.layout-element-menu,
.resize-dots,
.rotation-handle {opacity: 0; visibility: hidden;}

.layout-element.is-active { z-index: 990;}
.insert-block-btn-container .insert-block-buttons { z-index: 991;}
.builder-edit-section.active .layout-element-menu,
.layout-element.is-active .layout-element-menu,
.layout-element.is-active .resize-dots,
.layout-element.is-active .rotation-handle {opacity: 1; visibility: visible;}

.layout-element.is-highlighted .layout-element__slot .resize-dots,
.layout-element.is-highlighted .layout-element__slot .layout-element-menu,
.layout-element.is-highlighted .layout-element__slot .rotation-handle {opacity: 0; visibility: hidden;}

/* .layout-element:not(.is-active-element-present):hover .layout-element__slot, 
.layout-element.is-highlighted .layout-element__slot, 
.layout-element.is-blocking-resize .layout-element__slot, 
.layout-element--is-multi-selected .layout-element__slot {
    visibility: visible;
} */

.resize-dots {
    /* position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; */
    position: relative;
    z-index: 1;
    display: grid;
    pointer-events: none; /* 핸들이 아닌 곳은 클릭이 통과되도록 함 */
}
.resize-dot {
    /* position: absolute;
    width: 10px;
    height: 10px;
    background: #fff;
    border: 2px solid #357df9;
    pointer-events: auto;
    z-index: 10; */
    position: absolute;
    grid-area: 1 / 1 / -1 / -1;
    padding: 4px;
    pointer-events: all;
}
/* 캔버스 배경(Background) 깔기
부모 그리드 컨테이너 안에 격자 무늬 배경이나 캔버스 도화지 레이어를 가장 밑바닥에 전체 화면으로 깔아둘 때 씁니다.
[Line 1]                             [Line -1] (끝선)
           ↓                                    ↓
-----------|---|---|---|---|---|---|---|---|---|-----------
[Line 1] → +-----------------------------------+
           |                                   |
           |   이 요소가 부모 그리드 판 전체를   |
           |   빈틈없이 꽉 채우게 됩니다!      |
           |                                   |
[Line -1]→ +-----------------------------------+
 (끝선) */
/* 방향별 위치 및 커서 스타일 */
.resize-dot--right, .resize-dot--left, .resize-dot--top, .resize-dot--bottom { display: flex; align-items: center; justify-content: center;}
.resize-dot--top { align-self: start; justify-self: center; transform: translateY(calc(-50% - 1px)); cursor: n-resize; }
.resize-dot--bottom { align-self: end; justify-self: center; transform: translateY(calc(50% + 1px)); cursor: s-resize; }
.resize-dot--left {align-self: center; justify-self: start; transform: translate(calc(-50% - 1px)); cursor: w-resize; }
.resize-dot--right {align-self: center; justify-self: end; transform: translate(calc(50% + 1px)); cursor: e-resize; }

.resize-dot--top-left {align-self: start; justify-self: start; transform: translate(-50%, -50%); cursor: nw-resize; }
.resize-dot--top-right {align-self: start; justify-self: end; transform: translate(50%, -50%); cursor: ne-resize; }
.resize-dot--bottom-left {align-self: end; justify-self: start; transform: translate(-50%, 50%); cursor: sw-resize; }
.resize-dot--bottom-right {align-self: end; justify-self: end;  transform: translate(50%, 50%); cursor: se-resize; }

.resize-dot__visual-trigger{
    display: block;
    width: 12px;
    height: 12px;
    background: #fff;
    outline: 2px solid var(--outline-color, #357df9);
}
.resize-dot--top, .resize-dot--bottom {
    width: 100%;
    height: 16px;
}
.resize-dot--right, .resize-dot--left {
    width: 16px;
    height: 100%;
}
.resize-dot--right .resize-dot__visual-trigger, .resize-dot--left .resize-dot__visual-trigger {
    height: 28px;
    width: 8px;
}
.resize-dot--top .resize-dot__visual-trigger, .resize-dot--bottom .resize-dot__visual-trigger {
    width: 28px;
    height: 8px;
}
.resize-dot--right .resize-dot__visual-trigger, .resize-dot--left .resize-dot__visual-trigger, .resize-dot--top .resize-dot__visual-trigger, .resize-dot--bottom .resize-dot__visual-trigger {
    border-radius: 5px;
}

.rotation-handle {position: absolute; bottom: -40px; left: 50%; z-index: 2; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; background-color: #357df9; color: var(--color-white); border-radius: 24px; transform: translate(-50%, 0); pointer-events: all; cursor: grab;}

.layout-element-menu {display: inline-flex; /*overflow: hidden;*/ transition: opacity 200ms ease; z-index: 3; position: absolute; left: 75%; bottom: 14px; transform: translate(-50%, 100%) rotate(calc(-1 * var(--element-rotation, 0deg))); transform-origin: center center; flex-direction: row; padding: 2px; border-radius: 3px; background-color: #fff; box-shadow: 1px 2px 5px rgba(0,0,0,.1); line-height: 1;
/* rotate: calc(-1 * var(--element-rotation, 0deg)); */
}

.layout-element-menu .nav {display: flex; align-items: center; justify-content: center; gap: 2px;}
.layout-element-menu button.btn {height: 2.4rem; width: 2.4rem; padding: 0; border-color: #357df9; color: var(--color-gray-950);}
.layout-element-menu button.btn:hover {color: var(--blue-700);}
.layout-element-menu button.btn.item-btn-element-edit {width: auto; gap:0;}
.layout-element-menu button.btn.item-btn-element-edit > span {padding-right: 4px; gap:0;}

.layout-element-menu .overlaylayer .list {--overlaylayer-width: 160px; box-shadow: 0 15px 20px -13px rgba(0, 0, 0, 0.05), 0 5px 20px 5px rgba(0, 0, 0, 0.05);}
.layout-element-menu .overlaylayer .list .overlaylayer .list nav button, .overlaylayer .list nav a { padding: 10px 22px;}
@media screen and (max-width: 767px) {
    .layout-element-menu {left: 80%;}
    .layout-element-menu button.btn.item-btn-element-edit > span:not([class]) { position: absolute; font-size: 0; color: transparent; }
    .layout-element-menu .overlaylayer .list {--overlaylayer-width: 128px;}
}
/* .layout-element-menu .overlaylayer .list nav > button:not(:last-of-type) {border-bottom: 1px solid var(--color-gray-100);} */
    


.item-btn-cropped-complete { display: none;}
/* 크롭 모드일 때 */
.layout-element.is-cropping .resize-dots {display: none;}
.layout-element.is-cropping .rotation-handle {display: none;}
.layout-element.is-cropping .item-btn-cropped-complete {display: inline-block;}
.layout-element.is-cropping .item-btn-cropped,
.layout-element.is-cropping .item-btn-width-full { display: none;}
.layout-element.is-cropping { cursor: default;}
.layout-element.is-cropping .layout-element-menu button.btn {pointer-events: all;}
.layout-element.is-cropping .layout-element__slot {pointer-events: none;}
.layout-element.is-cropping .layout-element__slot::before {pointer-events: none; }
.layout-element.is-cropping .image__image--cropped {overflow: visible;}
.image__image--cropped  .image__image--cropped-masked {display: none; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; overflow: hidden; pointer-events: none;}
.layout-element.is-cropping  .image__image--cropped-masked {display: flex; justify-content: center; align-items: center; background-size: cover; background-repeat: no-repeat; background-position: center; background-image: var(--bg-img);}
.layout-element.is-cropping .image__image--cropped { overflow: visible; }
.layout-element.is-cropping .image__image--cropped > img { opacity: 0.4; }



.builder-edit-section {width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; /*margin: 24px 0;*/ transition: max-width 200ms ease}
.builder-edit-section {margin-bottom: 2px;}

.block-edit-container { position: relative;  width: 100%;}
.block-edit-container .block {
    /* z-index: 1; */
    position: relative; width: 100%; height: 100%;
    /* display: block; min-height: auto; */
}
@media screen and (max-width: 767px) {
    /* .block-edit-container {min-height: auto;}
    .block-edit-container .block {min-height: auto;} */
}
.block-edit-container.block-edit-container-text {display: table;}
.block-edit-container.block-edit-container-text .block {display: table-cell !important;}
.block-edit-container.block-edit-container-text .builder-edit-block:before {content: none;}

.builder-edit-block { display: flex; position: relative; min-height: 32px; transition: max-width 200ms ease;}
.builder-edit-block:before { content: ""; position: absolute; top: -2px; right: -2px; bottom: -2px; left: -2px; transform: scale(1); transform-origin: center; transition: .15s cubic-bezier(.22,1,.36,1); border: 2px solid transparent; opacity: 0; pointer-events: none}

.builder-edit-block.editing:before,
.builder-edit-block:hover:before {transform:scale(1); opacity: 1;}
.builder-edit-block.editing:before {border-color: #357df9}

.builder-edit-element.builder-edit-media { position: relative; display: flex; justify-content: center; align-items: center; overflow: hidden; height: 100%; /*width: 100%;*/}

.insert-block-btn-container { position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; display: flex; align-items: center; justify-content: center; width: 100%; pointer-events: none}
.insert-block-btn-container::before {content: ""; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; transform-origin: center; border: 2px solid transparent; pointer-events: none}
/* .builder-edit-section.active { z-index: 3;} */
.builder-edit-section.active .insert-block-btn-container,
.builder-edit-section:hover .insert-block-btn-container {opacity: 1;}
.builder-edit-section.active .insert-block-btn-container::before { border-color: var(--color-primary-600);}
.builder-edit-section:not(.active):hover .insert-block-btn-container::before { border-color: var(--color-pink-600);}

.insert-block-buttons {z-index: 2; position: absolute; bottom: -1px; left: 10px; transform: translateY(50%); display: flex; align-items: center; justify-content: center; gap: 4px; pointer-events: all; line-height: 1;}
.builder-edit-section:not(.active) .insert-block-buttons button {border-color: var(--color-pink-500) !important; background-color: var(--color-pink-500) !important;}
.builder-edit-section:not(.active) .insert-block-buttons button:hover {border-color: var(--color-pink-600) !important; background-color: var(--color-pink-600) !important;}
.insert-block-btn {padding-left: 1.2rem !important; transition: width .25s ease, padding .25s ease; transition-delay: -.1s;}
.block-move-handle {display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 4px; }
.block-move-handle button {padding: 0 !important; height: 12px !important;}


@media screen and (max-width: 767px) {
    .insert-block-btn { min-width: 3.2rem !important;;  padding: 0 !important;; border-radius: 1.6rem !important;}
    .insert-block-btn > span:not([class]) { position: absolute; font-size: 0; color: transparent; }
        
}

/* .builder-edit-element-menu .k-btn {padding: 8px;} */
.builder-edit-element-menu .svg-icon {width: 16px; height: 16px;}
/* .builder-edit-element-menu .svg-icon path {fill: #694be7;} */
.builder-edit-element {position: relative; font-size: 18px; line-height: 32px;}
.builder-edit-element p {font-size: 18px; font-weight: 400; line-height: 32px;}
.builder-edit-element h2 {}
.builder-edit-element h3 {}
.builder-edit-element h2 + p,
.builder-edit-element h3 + p {margin-top: 14px;}
@media screen and (max-width: 1023px) { 
    .builder-edit-element h2, 
    .builder-edit-element h2 > * { font-size: calc((2 - 1) * 1.5vw + 1rem) !important; line-height: 1.4 !important;}
}

/* .media-upload {} */
.media-upload-content { display: flex; flex-direction: column; align-items: center; gap:12px; border: 1px solid var(--color-gray-300); border-radius: 4px; padding: 16px 18px; background-color: var(--color-white)}
/* .media-upload-content.placeholder { padding: 30px 20px; background-color: #f8f8f8}
.placeholder-text { font-size: 14px; font-weight: 400; line-height: 20px; color: #6e6d7a; text-align: center} */

.media-upload-img {position: relative; width: 100%; height: auto; max-height: 200px; aspect-ratio: 16/9; overflow: hidden; background-color: var(--color-gray-100);}
.media-upload-img img,
.media-upload-img video { display: none; /* 로드 전엔 숨김 */ width: 100%; height: 100%; border-radius: 4px; background-color: var(--color-gray-100); -o-object-fit: cover; object-fit: cover}

.action-button-container { display: flex; justify-content: center; align-content: center; gap:6px; width: 100%; }
.action-button-container button { flex: 1; }
.media-upload-label .media-upload-input {width: 0; height: 0; opacity: 0; overflow: hidden; position: absolute; z-index: -1;}
.media-upload-content .btn-action-media-upload-change {display: none;}
.media-upload-content-image .btn-action-media-upload-change[data-type="image"] {display: inline-flex;} 
.media-upload-content-video .btn-action-media-upload-change[data-type="video"] {display: inline-flex;} 
@media (max-width: 767px) {
    .media-upload-img { }
    /* .media-upload-img img,
    .media-upload-img video {
        border-radius:0
    } */
    /* .media-upload-img img:before,
    .media-upload-img video:before {
        content: "";
        display: block;
        padding-top: 75%
    } */
}

.builder-edit-element .img { max-width: 100%; max-height: 100%; }
.builder-edit-image img {
    /* 상단 .img 규칙에서 받아온 max 제한을 사파리를 위해 초기화 */
    /* object-fit: cover !important;
    max-width: 100% !important;
    max-height: 100% !important;
    aspect-ratio: auto !important; 
    flex-shrink: 0 !important; */
}
.builder-edit-element.builder-edit-media {
    /* 부모가 리사이즈될 때 내부 자식들의 렌더링을 강제로 재계획하도록 유도 */
    /* isolation: isolate; */
}
.builder-edit-video video {
    position: relative;
    z-index: 0;
    display: block;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    aspect-ratio: 16 / 9;
    aspect-ratio: auto !important; 
    flex-shrink: 0 !important;
}
.video-progress-container {
    position: relative;
    width: 100%;
    /* height: 100%; */
}

.builder-edit-video:hover .mute-toggle {opacity: 1}
.mute-toggle { display: flex; transition: opacity .2s ease; opacity: 1;}
.mute-toggle.visible { opacity: 1}
.mute-toggle .mute-button {  display: flex;  align-items: center;  justify-content: center;  width: 42px;  height: 42px;  border-radius: 50%;  background: #fff; color: #3d3d4e;  min-width: auto !important; border-color: transparent;}
.mute-toggle .mute-button .svg-mute {display: block;}
.mute-toggle .mute-button .svg-mute-off {display: none;}
.mute-toggle .mute-button.active .svg-mute {display: none;}
.mute-toggle .mute-button.active .svg-mute-off {display: block;}

.builder-edit-video .controls { display: flex; position: absolute; z-index: 2; bottom: 0; left: 0; transition: opacity .2s ease; opacity: 1; gap: 15px; margin: 0 0 36px 30px;}
@media screen and (max-width: 767px) {
    .builder-edit-video .controls {gap:10px; margin: 0 0 28px 10px;}
}
.builder-edit-video:hover .controls {opacity: 1}
.pause-button, .play-button  {  display: flex;  align-items: center;  justify-content: center;  width: 42px;  height: 42px; border-radius: 50%;  background: #fff; border-color: transparent; color: #3d3d4e; min-width: auto !important;}
@media screen and (max-width: 767px) {
    .pause-button, .play-button, .mute-toggle .mute-button  {
        /* 
            [기본 크기 및 모바일 유연한 축소 적용]
            - 최대 크기는 42px로 제한합니다.
            - 화면 너비가 줄어들면 32px까지 아주 미세하게 비례해서 줄어듭니다.
            - calc(...) 퍼펙트 플루이드(Fluid) 수식
        */
        width: clamp(28px, calc(28px + (42 - 28) * ((100vw - 320px) / (768 - 320))), 42px);
        height: clamp(28px, calc(28px + (42 - 28) * ((100vw - 320px) / (768 - 320))), 42px);
    }
    .pause-button svg, .play-button svg, .mute-toggle .mute-button svg {
        width: clamp(14px, calc(14px + (20 - 14) * ((100vw - 320px) / (768 - 320))), 20px);
        height: clamp(14px, calc(14px + (20 - 14) * ((100vw - 320px) / (768 - 320))), 20px);
    }
}
.progress-bar-container { display: flex; position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 40px; overflow: hidden; cursor: pointer; margin: 0 30px 22px 30px;}
@media screen and (max-width: 767px) {
    .progress-bar-container {margin: 0 10px 16px 10px;}
}
.progress-bar-container::before {display:block; content:""; position: absolute; bottom: 0; left: 0; right: 0; height: 4px;  width: 100%; border-radius: 6px; background:rgba(0, 0, 0,.3); }

.progress-bar { position: absolute; bottom: 0; left: 0; right: 0; height: 4px;  width: var(--progress-percent, 0%); border-radius: 6px; background:rgb(255, 20, 80); /* transition: width .2s linear; */}

.upload-progress-bar { display: none; position: absolute; z-index: 4; left: 0; right: 0; height: 100%; border-radius: 4px; background: rgba(234,76,137,.4); transition: all 0.2s ease;}
/* .upload-progress-info { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 4; pointer-events: none; text-align: center; width: 70%; padding: 20px; background-color: rgba(0, 0, 0, 0.3); color: #ffffff; border-radius: 10px; white-space: normal; word-break: keep-all; font-weight: 300; line-height: 1.3; font-size: clamp(11px, calc(11px + (14 - 11) * ((100cqi - 320px) / (768 - 320))), 14px); transition: opacity 0.5s ease, visibility 0.5s; opacity: 0; visibility: hidden;}
.upload-progress-info.is-visible { opacity: 1; visibility: visible;} */

.upload-progress-info {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    pointer-events: none;
    text-align: center;
    width: 70%;
    padding: 20px;

    /* 더 활동적인 멀티컬러 그라데이션 (검정+보라+핑크) */
    background: linear-gradient(135deg, 
        rgba(0, 0, 0, 0.3), 
        rgba(143, 26, 135, 0.4), 
        rgba(109, 2, 185, 0.4), 
        rgba(226, 62, 117, 0.4));
    
    background-size: 300% 300%; /* 더 넓은 범위를 움직이게 설정 */
    animation: active-dreamy-gradient 3s ease infinite; /* 3초 주기로 더 빠르게 */
    
    backdrop-filter: blur(12px); /* 블러 효과를 높여서 몽환미 강조 */
    -webkit-backdrop-filter: blur(12px);
    /* border: 1px solid rgba(255, 255, 255, 0.2); */
    
    color: #ffffff;
    border-radius: 20px; /* 라운드 수치 상향 */
    white-space: normal;
    word-break: keep-all;
    font-weight: 400; /* 조금 더 가독성 있게 굵기 조정 */
    line-height: 1.4;
    font-size: clamp(11px, calc(11px + (14 - 11) * ((100cqi - 320px) / (768 - 320))), 14px);
    
    transition: opacity 0.5s ease, visibility 0.5s;
    opacity: 0;
    visibility: hidden;
}

.upload-progress-info.is-visible {
    opacity: 1;
    visibility: visible;
}

/* 활동적인 배경 움직임 애니메이션 */
@keyframes active-dreamy-gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}









/* editor */


























/* 에디터 배경 구역 */
.editor-container {
    background: #f0f2f5;
    padding: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 🌟 실제 디자인이 이루어지는 도화지 */
.workspace {
    position: relative; /* 하위 레이어들의 절대 좌표 기준점 */
    width: 500px;
    height: 500px;
    background: #ffffff;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    overflow: hidden; /* 도화지 밖으로 나가는 이미지 커팅 */
}

/* 🌟 도화지 위에 올라가는 개별 레이어 (텍스트, 스티커 등) */
.layer {
    position: absolute;
    cursor: move;
    user-select: none;
    padding: 8px;
    border: 1px solid transparent;
}

/* 레이어가 선택(활성화)되었을 때 가이드라인 표시 */
.layer.active {
    border: 1px dashed #3b82f6;
}

/* 텍스트 입력 칸 */
.layer-content {
    outline: none;
    word-break: break-all;
}