/* ==================== 深化设计阶段 - 独立样式文件 ==================== */
/* 5卡片布局：第一行3个，第二行2个 */

/* ==================== 基础定位变量 ==================== */
:root {
    --dd-base-top: calc(29rem);
    --dd-base-left: calc(19rem); /* 右移4rem: 19rem + 4rem */
    --dd-icon-size: calc(2.5rem);
    --dd-icon-half: calc(1.25rem);
    --dd-title-row1-top: calc(var(--dd-base-top) + 3.9375rem);
    --dd-title-row2-top: calc(var(--dd-base-top) + 8rem);
    --dd-subtitle-offset: calc(1.85rem);
    /* 第一行间距 */
    --dd-col-gap-1-2: calc(40rem); /* +2rem */
    --dd-col-gap-2-3: calc(40rem); /* +2rem */
    /* 第二行间距 */
    --dd-col-gap-4-5: calc(37rem); /* +2rem */
    /* 第二行垂直偏移 */
    --dd-row2-top-offset: calc(5rem);
}

/* ==================== 图标通用样式 ==================== */
.main-content > .step-icon {
    position: absolute;
    width: var(--dd-icon-size);
    height: var(--dd-icon-size);
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    z-index: 10;
}

.main-content > .step-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ==================== 标题容器通用样式 ==================== */
.main-content > .step-title-wrapper {
    position: absolute;
    display: flex;
    align-items: flex-start;
    transform: translateX(-50%);
}

.main-content > .step-title-wrapper .step-title {
    font-family: var(--font-family);
    font-size: calc(1em);
    line-height: calc(1.6rem);
    font-weight: 700;
    color: #000000;
    text-transform: none;
    margin: 0;
    white-space: nowrap;
    text-align: center;
}

/* ==================== 副标题容器通用样式 ==================== */
.main-content > .step-subtitle-wrapper {
    position: absolute;
    display: flex;
    align-items: flex-start;
}

.main-content > .step-subtitle-wrapper .step-subtitle {
    font-family: 'ChillDINGothic', DIN-regular, sans-serif;
    font-size: calc(0.8em);
    line-height: calc(1.25rem);
    letter-spacing: calc(0.10625rem);
    color: #565656;
    text-transform: none;
    margin: 0;
    max-width: calc(22rem);
    text-align: left;
}

/* ==================== 图标位置 ==================== */
.step-icon.pos-1 {
    left: var(--dd-base-left);
    top: calc(var(--dd-base-top) + 0.9375rem);
}
.step-icon.pos-2 {
    left: calc(var(--dd-base-left) + var(--dd-col-gap-1-2));
    top: calc(var(--dd-base-top) + 0.9375rem);
}
.step-icon.pos-3 {
    left: calc(var(--dd-base-left) + var(--dd-col-gap-1-2) + var(--dd-col-gap-2-3));
    top: calc(var(--dd-base-top) + 0.9375rem);
}
.step-icon.pos-4 {
    left: calc(var(--dd-base-left) + 20rem);
    top: calc(var(--dd-base-top) + var(--dd-row2-top-offset));
}
.step-icon.pos-5 {
    left: calc(var(--dd-base-left) + 20rem + var(--dd-col-gap-4-5));
    top: calc(var(--dd-base-top) + var(--dd-row2-top-offset));
}

/* ==================== 标题位置 ==================== */
.step-title-wrapper.pos-1 {
    left: calc(var(--dd-base-left) + var(--dd-icon-half));
    top: var(--dd-title-row1-top);
}
.step-title-wrapper.pos-2 {
    left: calc(var(--dd-base-left) + var(--dd-col-gap-1-2) + var(--dd-icon-half));
    top: var(--dd-title-row1-top);
}
.step-title-wrapper.pos-3 {
    left: calc(var(--dd-base-left) + var(--dd-col-gap-1-2) + var(--dd-col-gap-2-3) + var(--dd-icon-half));
    top: var(--dd-title-row1-top);
}
.step-title-wrapper.pos-4 {
    left: calc(var(--dd-base-left) + 20rem + var(--dd-icon-half));
    top: var(--dd-title-row2-top);
}
.step-title-wrapper.pos-5 {
    left: calc(var(--dd-base-left) + 20rem + var(--dd-col-gap-4-5) + var(--dd-icon-half));
    top: var(--dd-title-row2-top);
}

/* ==================== 副标题 top 位置 ==================== */
.step-subtitle-wrapper.pos-1,
.step-subtitle-wrapper.pos-2,
.step-subtitle-wrapper.pos-3 {
    top: calc(var(--dd-title-row1-top) + var(--dd-subtitle-offset));
}

.step-subtitle-wrapper.pos-4,
.step-subtitle-wrapper.pos-5 {
    top: calc(var(--dd-title-row2-top) + var(--dd-subtitle-offset));
}

/* ==================== SVG 连接线容器样式 ==================== */
.step-connectors-svg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.step-connectors-svg line {
    stroke: #D9D9D9;
    stroke-width: 1;
    stroke-dasharray: 5, 5;
}