/**
 * Chart Layout System
 * LayoutEngine과 연동되는 구조적 스타일 정의
 */

/* 1. Form Canvas */
.chart-form-canvas {
    position: relative;
    width: 100%;
    min-height: 300px;
    background-color: #fcfcfc;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
    /* This padding will be respected by .chart-canvas-inner */
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
    overflow-y: auto;
    overflow-x: hidden;

    /* Transition for smooth scaling */
    transition: min-height 0.2s ease;
}

.chart-canvas-inner {
    position: relative;
    width: 100%;
    height: 100%;
    /* All absolute elements will be relative to this */
}

/* 2. Group Container */
.chart-group-container {
    position: absolute;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    background: var(--card-bg);
    /* Use card-bg instead of primary-light for cleaner look */
    border: 1px solid var(--primary-color);
    border-radius: 8px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* 2.1 Repeatable Group Special Styling */
.chart-group-container.is-repeatable {
    border: 2px dashed var(--primary-color);
    background-color: color-mix(in srgb, var(--color-primary) 2%, transparent);
}

/* 3. Group Header */
.chart-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--primary-color);
    color: white;
    padding: 0 12px;
    height: 40px;
    /* 부모(높이 지정됨)를 채움 */
    border-radius: 4px 4px 0 0;
    margin-bottom: 0;
    flex-shrink: 0;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.chart-group-title {
    margin: 0;
    font-weight: 600;
    font-size: 0.75rem;
    line-height: 1.2;
}

/* 3.1 Group Header Actions */
.btn-add-row {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: none;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.2s ease;
}

.btn-add-row:hover {
    background: rgba(255, 255, 255, 0.4);
    transform: translateY(-1px);
}

.btn-add-row:active {
    transform: translateY(0);
}

/* 4. Group Grid Container (Internal) */
.chart-group-grid {
    display: grid;
    /* 중요: var(--gap)에 단위를 붙여서 계산 */
    gap: calc(var(--grid-gap) * var(--v-scale));
    grid-template-columns: repeat(var(--grid-columns), 1fr);

    /* Row Height Calculation 
       10px * vScale
    */
    grid-auto-rows: calc(var(--row-height-unit) * var(--v-scale));

    padding: 0;
    /* 여백 제거: 필드가 테두리에 딱 붙게 함 */
    width: 100%;
    box-sizing: border-box;
    /* Padding 포함 */
}

/* 5. Field Wrapper */
.chart-field-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* overflow: hidden; */
    /* Remove to prevent label clipping */
    min-height: 0;
    /* Important for flexible grids */
}

/* Ensure grouped fields respect CSS Grid and don't overlap as absolute */
.chart-group-grid .chart-field-wrapper,
.chart-group-grid .form-field-wrapper {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    height: auto !important;
    box-shadow: none;
    /* Grid items usually don't need independent shadows unless designed */
    border: 1px solid var(--border-color);
    background: white;
}

.chart-field-wrapper.absolute-field {
    position: absolute;
    /* top, left, width, height -> JS injected */
}

/* 6. Drag Ghost (Designer Only) */
.chart-drag-ghost {
    opacity: 0.5;
    background: var(--primary-light);
    border: 2px dashed var(--primary-color);
    z-index: 1000;
}