/* 画布样式 - 画布容器、图片容器、图片预览 */

/* 画布容器 */
.canvas-container {
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    position: relative;
    z-index: 1; /* 基础层级 */
}

/* 画布 */
.canvas {
    width: 720px;
    height: 960px;
    background-color: #FF989A;
    position: relative;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    border-radius: 10px;
    z-index: 1; /* 基础层级 */
}

/* 图片容器 */
.image-container {
    width: 100%;
    height: 100%;
    padding: 20px;
    position: relative;
    z-index: 1;
}

/* 图片包装器 */
.image-wrapper {
    position: absolute;
    width: 340px;
    height: 460px;
    cursor: move;
    /* 默认位置 */
    z-index: 2;
    pointer-events: auto;
    /* 允许手柄显示在 wrapper 外面 */
    overflow: visible;
}

/* 独立的手柄容器 */
.resize-handles-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* 容器本身不接收事件，但子元素可以 */
    z-index: 10000; /* 非常高的z-index，确保在所有图片和wrapper之上 */
    overflow: visible; /* 确保手柄可以超出容器边界 */
}

/* 图片区域调整手柄 */
.resize-handle {
    /* 使用 absolute 定位，在 wrapper 内部 */
    position: absolute;
    width: 60px;
    height: 8px;
    background-color: var(--color-primary, #e91e63);
    border-radius: 4px;
    cursor: ns-resize;
    /* 高 z-index 确保手柄显示在所有图片之上 */
    z-index: 99999;
    opacity: 0;
    transition: opacity 0.15s ease, background-color 0.15s ease;
    pointer-events: auto;
}

/* 被遮挡的手柄样式 */
.resize-handle.occluded {
    background-color: rgba(233, 30, 99, 0.4);
}

.image-wrapper.show-handles ~ .resize-handles-container .resize-handle {
    opacity: 1;
}

/* 手柄的top和bottom位置由JavaScript动态设置 */

.resize-handle:hover {
    background-color: var(--color-primary-dark, #c2185b);
    opacity: 1;
}

.resize-handle:active {
    background-color: var(--color-primary-darker, #880e4f);
}

.image-wrapper:nth-child(1) {
    top: 13.33px;
    left: 13.33px;
}

.image-wrapper:nth-child(2) {
    top: 13.33px;
    left: 366.67px;
}

.image-wrapper:nth-child(3) {
    top: 486.67px;
    left: 13.33px;
}

.image-wrapper:nth-child(4) {
    top: 486.67px;
    left: 366.67px;
}

/* 图片上传按钮 */
.image-upload {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 5;
}

/* 图片预览 */
.image-preview {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.3);
    border: 2px dashed #ccc;
    overflow: hidden;
    z-index: 3;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 53px;
    transition: all 0.3s ease;
    pointer-events: auto;
}

/* 有图片时的样式 */
.image-preview.has-image {
    background-color: transparent;
    border: none;
}

/* 位置编号样式 */
.position-number {
    font-size: 80px;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.2);
    user-select: none;
    pointer-events: none;
    z-index: 2;
    position: relative;
}

/* 有图片时隐藏编号 */
.image-preview.has-image .position-number {
    display: none;
}

/* 上传的图片 */
.image-preview img.uploaded-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    border-radius: 53px;
    pointer-events: auto;
}

/* 图片背景（底图） */
.image-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
    border-radius: inherit;
}

/* 名字底图 */
.image-bg[data-type="name"] {
    background-image: url('../名字.png');
}

/* 尺码底图 */
.image-bg[data-type="size"] {
    background-image: url('../尺码.png');
}

/* 图片文字信息 */
.image-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 3;
    pointer-events: none;
    width: 100%;
    padding: 0 20px;
}

.image-name {
    font-size: 24px;
    font-weight: bold;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    line-height: 1.2;
    font-family: 'Microsoft YaHei', Arial, sans-serif;
}

.image-info {
    font-size: 18px;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    line-height: 1.2;
    font-family: 'Microsoft YaHei', Arial, sans-serif;
}

/* 顶层内容容器 */
.top-content {
    /* 使用 absolute 定位，自然跟随滚动，避免 iOS Safari fixed 元素延迟 */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: var(--z-top-content, 20000);
    pointer-events: none;
    /* iOS Safari GPU 加速 */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* 组c：整体居中容器 */
.group-c {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: calc(var(--z-top-content, 20000) + 1);
    pointer-events: auto;
    cursor: default;
    transform-origin: center center;
    transition: none;
    min-width: 200px;
    min-height: 200px;
}

.group-c:active {
    cursor: grabbing; /* 拖动时的光标 */
}

/* 子元素保持可交互 */
.group-c .name-img,
.group-c .size-img,
.group-c .main-name,
.group-c .main-info {
    pointer-events: auto;
}

/* 组a：名字组 */
.group-a {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    /* 让名字组内容自然高度 */
    margin-bottom: -15px; /* 与组b的间距为-15 */
}

/* 组b：尺码组 */
.group-b {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    /* 让尺码组内容自然高度 */
}

/* 名字图片 */
.name-img {
    position: relative;
    z-index: var(--z-top-content-elements, 20002);
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

/* 尺码图片 */
.size-img {
    position: relative;
    z-index: var(--z-top-content-elements, 20002);
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

/* SVG图片样式 */
.name-img svg,
.size-img svg {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    position: relative;
    z-index: var(--z-top-content-elements, 20002);
}

/* 确保直接内嵌的SVG也能获得正确样式 */
.name-img,
.size-img,
.name-img svg,
.size-img svg {
    visibility: visible;
    opacity: 1;
    position: relative;
    z-index: var(--z-top-content-elements, 20002);
    pointer-events: auto;
}

/* 当手柄显示时，在图片区域内的SVG应该允许事件穿透到手柄 */
.image-wrapper.show-handles ~ * svg,
.image-container:has(.image-wrapper.show-handles) ~ .top-content svg {
    pointer-events: none;
}

/* 主名字文字 */
.main-name {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 80px;
    font-weight: bold;
    color: white;
    line-height: 1.2;
    font-family: 'XiangJiao', sans-serif;
    z-index: var(--z-text, 20003);
    text-align: center;
    width: 100%;
    padding: 0 20px;
    pointer-events: none;
    text-shadow: var(--text-shadow-outline);
}

/* 主信息文字 */
.main-info {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 60px;
    color: white;
    line-height: 1.2;
    font-family: 'XiangJiao', sans-serif;
    z-index: var(--z-text, 20003);
    text-align: center;
    width: 100%;
    padding: 0 20px;
    pointer-events: none;
    text-shadow: var(--text-shadow-outline);
}

/* ========== 空间合并样式 ========== */

/* 主合并空间 */
.image-wrapper.merged-primary {
    /* 合并后的样式由 JS 动态设置尺寸 */
    transition: width 0.3s ease, height 0.3s ease;
}

/* 被合并的次级空间（隐藏） */
.image-wrapper.merged-secondary {
    display: none !important;
    pointer-events: none;
}

/* 合并预览效果（可选，hover时显示） */
.image-wrapper.merge-preview {
    outline: 3px dashed var(--color-primary, #e91e63);
    outline-offset: -3px;
}

/* 合并后的位置编号样式 */
.image-wrapper.merged-primary .position-number {
    font-size: 60px; /* 合并后稍小一点 */
}