/* 모던 MZ 스타일 기본 설정 */
@import url('https://fonts.googleapis.com/css2?family=Pretendard:wght@300;400;500;600;700;800;900&display=swap');

:root {
    /* MZ세대 트렌드 컬러 팔레트 */
    --primary-gradient: linear-gradient(135deg, #6c8df2 0%, #8b7ed8 100%);
    --secondary-gradient: linear-gradient(135deg, #ff9ff3 0%, #ff7b7b 100%);
    --accent-gradient: linear-gradient(135deg, #7bb3ff 0%, #4dd0f7 100%);
    --success-gradient: linear-gradient(135deg, #6bef81 0%, #5bfad5 100%);
    --warning-gradient: linear-gradient(135deg, #ffab9a 0%, #ffe066 100%);
    
    /* 다크모드 느낌의 베이스 컬러 */
    --bg-dark: #f8f9fa;
    --bg-card: #ffffff;
    --bg-light: #e9ecef;
    --text-primary: #2c3e50;
    --text-secondary: #6c757d;
    --text-muted: #adb5bd;
    
    /* 네온 액센트 컬러 */
    --accent-blue: #4a90e2;
    --accent-purple: #8e7cc3;
    --accent-pink: #e91e63;
    --accent-green: #4caf50;
    --accent-orange: #ff9800;
}

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

body {
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: linear-gradient(135deg, #f8f9fa 0%, #e3f2fd 50%, #f3e5f5 100%);
    color: var(--text-primary);
    padding: 20px 20px 0 20px; /* 상단, 좌우 패딩만, 하단은 footer에서 처리 */
    line-height: 1.6;
    overflow-x: auto;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    
    /* 애니메이션 배경 */
    background-attachment: fixed;
    position: relative;
}

/* 배경 파티클 효과 */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 20% 50%, rgba(106, 139, 242, 0.08) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(255, 159, 243, 0.08) 0%, transparent 50%),
                radial-gradient(circle at 40% 80%, rgba(123, 179, 255, 0.08) 0%, transparent 50%);
    pointer-events: none;
    z-index: -1;
}

.container {
    min-width: 1120px;
    margin: 0 auto;
    overflow: visible; /* 버튼이 컨테이너 밖으로 나가도 보이도록 */
    flex: 1; /* 남은 공간을 모두 차지하여 footer를 하단에 고정 */
}

/* 헤더 전체 스타일 */
.header {
    text-align: center;
    margin-bottom: 40px;
    padding: 30px 20px;
    background: rgba(255, 255, 255, 0.9);
    /* backdrop-filter: blur(20px); */
    border-radius: 20px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

.header::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(from 0deg, transparent, var(--accent-blue), transparent, var(--accent-purple), transparent);
    opacity: 0.03;
    z-index: -1;
}

/* 회전 애니메이션 제거 */

.logo-section {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    padding: 0 10px; /* 약간의 여백 추가 */
}

.main-title-link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.main-title-link:hover {
    transform: scale(1.02);
}

.main-title-link:active {
    transform: scale(0.98);
}

/* 글로우 애니메이션 제거 */

.main-title {
    font-size: 3rem;
    font-weight: 800;
    margin: 0;
    line-height: 1.2;
}

.ai-text {
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 30px rgba(102, 126, 234, 0.5);
}

.mandal-text {
    background: var(--secondary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 30px rgba(240, 147, 251, 0.5);
}

.subtitle {
    color: var(--text-secondary);
    font-size: 1.1rem;
    font-weight: 400;
    margin: 15px 0 0 0;
    opacity: 0.9;
}

/* 만다라트 메인 그리드 - 그룹 크기에 맞춰 조정 */
.mandal-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px; /* 간격을 약간 늘려 버튼 공간 확보 */
    width: 1080px;
    min-width: 1080px;
    margin: 0 auto;
    overflow: visible; /* 버튼이 그리드 밖으로 나가도 보이도록 */
}

/* 그룹 공통 스타일 - MZ세대 글래스모피즘 효과 */
.execution-group,
.goal-group {
    background: rgba(255, 255, 255, 0.9);
    /* backdrop-filter: blur(20px); */
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 16px;
    padding: 12px; /* 패딩을 줄여서 내부 셀 크기에 맞춤 */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    position: relative;
    transition: all 0.3s ease;
    overflow: visible; /* 버튼이 그룹 경계를 넘어도 표시되도록 */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 데코레이션 라인 제거됨 */
.execution-group::before,
.goal-group::before {
    display: none; /* 모든 데코레이션 라인 숨김 */
}

.execution-group:hover,
.goal-group:hover {
    border-color: rgba(0, 0, 0, 0.15);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.group-header {
    display: none;
}

/* 각 그룹 내부의 3x3 서브 그리드 - 동일 크기 정사각형 */
.sub-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 8px;
    aspect-ratio: 1 / 1;
    width: 100%;
    overflow: visible; /* 버튼이 셀 밖으로 나가도 보이도록 */
}

/* 셀 컨테이너 - 버튼과 contenteditable div를 감싸는 wrapper */
.cell-container {
    position: relative;
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1; /* 모든 셀 컨테이너는 정사각형 */
    overflow: visible; /* 버튼이 경계를 넘어도 표시 */
    margin: 0; /* 여백 제거하여 그룹 크기 최적화 */
}

/* input-container 제거됨 - 이제 contenteditable div가 직접 grid item */
/* .input-container 스타일 삭제됨 */

/* Contenteditable div 공통 스타일 - 정사각형 유지하되 색상은 개별 적용 */
[contenteditable="true"],
[contenteditable="false"] {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    aspect-ratio: 1 / 1; /* 정사각형 유지만 강제 */
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    font-size: 0.85rem;
    background: rgba(255, 255, 255, 0.8);
    /* backdrop-filter: blur(10px); */
    color: var(--text-primary);
    box-sizing: border-box;
    overflow: hidden;
    font-family: inherit;
    line-height: 1.2;
    word-wrap: break-word;
    word-break: break-word;
    white-space: pre-wrap;
    transition: all 0.3s ease;
    
    /* 중앙 정렬 및 텍스트 렌더링 최적화 */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    
    /* 커서 위치 최적화 */
    line-height: 1.3;
    
    /* 기본 패딩 */
    padding: 4px;
    margin: 0;
    
    /* contenteditable 기본 스타일 제거 */
    outline: none;
    
    /* 모든 셀 동일한 그림자 */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    
    /* 텍스트가 버튼보다 위에 오도록 z-index */
    position: relative;
    z-index: 10;
}

/* 모든 셀 강제 정사각형 - 최고 우선순위 */
[contenteditable="true"],
[contenteditable="false"],
.core-goal-cell,
.sub-goal-cell,
.main-sub-goal,
.task-cell {
    aspect-ratio: 1 / 1 !important; /* 어떤 스타일도 이를 덮어쓸 수 없음 */
    width: 100% !important;
    height: 100% !important;
}

/* Task-cell 전용 강화된 정사각형 규칙 */
.task-cell,
div.task-cell,
[data-type="task"],
.execution-group .task-cell,
.execution-group div.task-cell,
.execution-group [data-type="task"] {
    aspect-ratio: 1 / 1 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: unset !important;
    max-height: unset !important;
    min-width: unset !important;
    max-width: unset !important;
}

/* 모든 셀 기본 속성 */
.core-goal-cell,
.sub-goal-cell,
.main-sub-goal,
.task-cell {
    padding: 4px;
    margin: 0;
}

/* 모든 입력 셀 텍스트 래핑 규칙 - 단어 단위 줄바꿈 */
.core-goal-cell,
.sub-goal-cell,
.main-sub-goal,
.task-cell {
    /* 한글/중문: 단어 단위로만 줄바꿈 */
    word-break: keep-all;
    
    /* 영문: 컨테이너를 벗어나는 긴 단어는 강제 줄바꿈 */
    overflow-wrap: break-word;
    
    /* 자동 하이픈 처리 (브라우저 지원 시) */
    hyphens: auto;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    
    /* 줄 간격 최적화 */
    line-height: 1.3;
}

/* Focus 상태 스타일 - MZ세대 네온 효과 */
[contenteditable="true"]:focus {
    border-color: var(--accent-blue);
    box-shadow: 0 0 10px rgba(74, 144, 226, 0.3);
    background: rgba(255, 255, 255, 0.95);
}

/* Contenteditable 요소 텍스트 래핑 강화 */
[contenteditable="true"],
[contenteditable="false"] {
    /* 단어 단위 줄바꿈 보장 */
    word-break: keep-all;
    overflow-wrap: break-word;
    hyphens: auto;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    line-height: 1.3;
}

/* Placeholder 효과 구현 - MZ세대 스타일 */
[contenteditable="true"]:empty:before {
    content: attr(data-placeholder);
    color: var(--text-muted);
    font-style: italic;
    pointer-events: none;
    opacity: 0.8;
}

/* 목표 버튼 스타일 - 강제 14x14px 크기 적용 */
.goal-button {
    position: absolute !important;
    bottom: -8px !important; /* 25px 버튼에 맞춰 위치 조정 */
    right: -8px !important; /* 25px 버튼에 맞춰 위치 조정 */
    width: 25px !important; /* 강제 25px 적용 */
    height: 25px !important; /* 강제 25px 적용 */
    min-width: 25px !important; /* 최소 크기 보장 */
    max-width: 25px !important; /* 최대 크기 제한 */
    min-height: 25px !important; /* 최소 높이 보장 */
    max-height: 25px !important; /* 최대 높이 제한 */
    border: none !important;
    border-radius: 6px !important; /* 버튼 크기에 맞춰 증가 */
    background: var(--primary-gradient) !important;
    color: white !important;
    font-size: 12px !important; /* 아이콘 크기를 8px → 12px로 증가 */
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
    z-index: 9999 !important; /* 매우 높은 z-index로 최상위 보장 */
    box-shadow: 0 2px 6px rgba(102, 126, 234, 0.3) !important;
    /* backdrop-filter: blur(10px) !important; */
    pointer-events: auto !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    -webkit-tap-highlight-color: transparent !important; /* 모바일 탭 하이라이트 제거 */
    touch-action: manipulation !important; /* 터치 최적화 */
    isolation: isolate !important;
    /* 부모 크기 영향 차단 */
    flex: none !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    box-sizing: border-box !important;
    /* 클릭 영역 확장 */
    padding: 2px !important;
    margin: -2px !important;
}

.goal-button:hover {
    background: var(--accent-gradient);
    filter: brightness(1.1);
    transform: scale(1.05); /* 14px에 적합한 작은 확대 효과 */
    box-shadow: 0 3px 8px rgba(102, 126, 234, 0.4);
}

.goal-button:active {
    transform: scale(0.95);
}

/* 모바일 터치 최적화 */
@media (max-width: 768px) {
    .goal-button {
        width: 30px !important; /* 모바일에서 더 큰 터치 영역 */
        height: 30px !important;
        min-width: 30px !important;
        max-width: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        font-size: 14px !important; /* 모바일에서 더 큰 아이콘 */
        bottom: -10px !important;
        right: -10px !important;
        /* 터치 영역 확장 */
        padding: 4px !important;
        margin: -4px !important;
        /* 터치 반응성 향상 */
        -webkit-touch-callout: none !important;
        -webkit-user-select: none !important;
        -khtml-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
        user-select: none !important;
    }
    
    .goal-button:hover {
        /* 모바일에서는 hover 효과 비활성화 */
        background: var(--primary-gradient) !important;
        filter: none !important;
        transform: none !important;
        box-shadow: 0 2px 6px rgba(102, 126, 234, 0.3) !important;
    }
    
    .goal-button:active {
        background: var(--accent-gradient) !important;
        transform: scale(0.9) !important;
        box-shadow: 0 1px 3px rgba(102, 126, 234, 0.5) !important;
    }
}

/* Goal Button 크기 강제 보장 - 모든 상황에서 적용 */
button.goal-button,
.goal-button,
*[class*="goal-button"] {
    width: 25px !important;
    height: 25px !important;
    min-width: 25px !important;
    max-width: 25px !important;
    min-height: 25px !important;
    max-height: 25px !important;
}

/* 특별 버튼 크기 강제 보장 */
button.goal-button[data-type="core-goal"],
button.goal-button[data-type="sub-goal"],
.goal-button[data-type="core-goal"],
.goal-button[data-type="sub-goal"] {
    width: 25px !important;
    height: 25px !important;
    min-width: 25px !important;
    max-width: 25px !important;
    min-height: 25px !important;
    max-height: 25px !important;
}

/* 브라우저 기본 스타일 완전 무력화 */
.goal-button {
    /* 모든 가능한 크기 관련 속성 리셋 */
    flex-basis: auto !important;
    align-self: auto !important;
    justify-self: auto !important;
    grid-area: auto !important;
    
    /* 브라우저 기본 버튼 스타일 제거 */
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    
    /* Transform 초기화 (scale 영향 제거) */
    transform-origin: center center !important;
    
    /* 부모로부터의 상속 차단 */
    font-family: inherit !important;
    line-height: 1 !important;
    
    /* 절대 위치 재확인 */
    position: absolute !important;
    top: auto !important;
    left: auto !important;
}

/* 핵심목표 스타일 - 검정 텍스트로 변경 */
.core-goal-cell {
    background: rgba(255, 255, 255, 0.9); /* 흰색 배경으로 변경 */
    color: #2c3e50 !important; /* 검정색 텍스트 */
    font-weight: 700;
    font-size: 0.85rem;
    border: 2px solid var(--accent-blue); /* 핵심목표임을 구분하는 파란색 테두리 */
    box-shadow: 0 4px 15px rgba(74, 144, 226, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    text-shadow: none; /* 텍스트 그림자 제거 */
    position: relative;
    aspect-ratio: 1 / 1; /* 정사각형만 강제 */
}

.core-goal-cell:empty:before {
    color: rgba(44, 62, 80, 0.6); /* placeholder도 검정색 계열로 */
    text-shadow: none;
}

.core-goal-cell:focus {
    border-color: var(--accent-blue);
    box-shadow: 0 0 15px rgba(74, 144, 226, 0.4);
    background: rgba(255, 255, 255, 1); /* 포커스 시 더 밝은 배경 */
}

/* 세부목표 스타일 - 고유 색상 유지 */
.main-sub-goal {
    color: white;
    font-weight: 600;
    font-size: 0.85rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    position: relative;
    aspect-ratio: 1 / 1; /* 정사각형만 강제 */
}

.main-sub-goal:empty:before {
    color: rgba(255, 255, 255, 0.8);
    text-shadow: none;
}

.main-sub-goal:hover {
    /* 호버 효과 제거 */
}

/* 목표그룹의 각 세부목표별 MZ세대 네온 그라데이션 */
.main-sub-goal[data-index="1"] {
    background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
    border-color: var(--accent-blue);
}

.main-sub-goal[data-index="2"] {
    background: linear-gradient(135deg, #ff9800 0%, #e68900 100%);
    border-color: var(--accent-orange);
}

.main-sub-goal[data-index="3"] {
    background: linear-gradient(135deg, #e91e63 0%, #c2185b 100%);
    border-color: var(--accent-pink);
}

.main-sub-goal[data-index="4"] {
    background: linear-gradient(135deg, #4caf50 0%, #388e3c 100%);
    border-color: var(--accent-green);
}

.main-sub-goal[data-index="5"] {
    background: linear-gradient(135deg, #8e7cc3 0%, #7b68a2 100%);
    border-color: var(--accent-purple);
}

.main-sub-goal[data-index="6"] {
    background: linear-gradient(135deg, #667eea 0%, #5066d6 100%);
    border-color: #5066d6;
}

.main-sub-goal[data-index="7"] {
    background: linear-gradient(135deg, #f093fb 0%, #d67ad6 100%);
    border-color: #d67ad6;
}

.main-sub-goal[data-index="8"] {
    background: linear-gradient(135deg, #4facfe 0%, #3d8bfe 100%);
    border-color: #3d8bfe;
}

/* 실행그룹의 세부목표 스타일 - 고유 색상 유지 */
.sub-goal-cell:not(.main-sub-goal) {
    color: white;
    font-weight: 600;
    font-size: 0.85rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    position: relative;
    aspect-ratio: 1 / 1; /* 정사각형만 강제 */
}

.sub-goal-cell:not(.main-sub-goal):empty:before {
    color: rgba(255, 255, 255, 0.8);
    text-shadow: none;
}

.sub-goal-cell:not(.main-sub-goal):hover {
    /* 호버 효과 제거 */
}

/* 실행그룹별 세부목표 MZ세대 네온 그라데이션 매칭 */
.execution-group[data-group="1"] .sub-goal-cell {
    background: linear-gradient(135deg, rgba(74, 144, 226, 0.8) 0%, rgba(53, 122, 189, 0.8) 100%);
    border-color: var(--accent-blue);
}

.execution-group[data-group="2"] .sub-goal-cell {
    background: linear-gradient(135deg, rgba(255, 152, 0, 0.8) 0%, rgba(230, 137, 0, 0.8) 100%);
    border-color: var(--accent-orange);
}

.execution-group[data-group="3"] .sub-goal-cell {
    background: linear-gradient(135deg, rgba(233, 30, 99, 0.8) 0%, rgba(194, 24, 91, 0.8) 100%);
    border-color: var(--accent-pink);
}

.execution-group[data-group="4"] .sub-goal-cell {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.8) 0%, rgba(56, 142, 60, 0.8) 100%);
    border-color: var(--accent-green);
}

.execution-group[data-group="5"] .sub-goal-cell {
    background: linear-gradient(135deg, rgba(142, 124, 195, 0.8) 0%, rgba(123, 104, 162, 0.8) 100%);
    border-color: var(--accent-purple);
}

.execution-group[data-group="6"] .sub-goal-cell {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.8) 0%, rgba(80, 102, 214, 0.8) 100%);
    border-color: #5066d6;
}

.execution-group[data-group="7"] .sub-goal-cell {
    background: linear-gradient(135deg, rgba(240, 147, 251, 0.8) 0%, rgba(214, 122, 214, 0.8) 100%);
    border-color: #d67ad6;
}

.execution-group[data-group="8"] .sub-goal-cell {
    background: linear-gradient(135deg, rgba(79, 172, 254, 0.8) 0%, rgba(61, 139, 254, 0.8) 100%);
    border-color: #3d8bfe;
}

.main-sub-goal:focus,
.sub-goal-cell:focus {
    box-shadow: 0 0 10px rgba(74, 144, 226, 0.4);
    border-color: var(--accent-blue);
}

/* 실행과제 스타일 - 원래 색상 유지하되 정사각형 적용 */
.task-cell {
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: rgba(255, 255, 255, 0.6);
    color: var(--text-primary);
    transition: all 0.3s ease;
    aspect-ratio: 1 / 1 !important; /* 정사각형 강제 - !important 추가 */
}

.task-cell:not([contenteditable="false"]):focus {
    border-color: var(--accent-purple);
    box-shadow: 0 0 10px rgba(142, 124, 195, 0.4);
    background: rgba(255, 255, 255, 0.9);
}

.task-cell:not([contenteditable="false"]):hover {
    /* 호버 효과 제거 */
}

/* 실행그룹별 실행과제 - 정사각형 보장 */
.execution-group[data-group="1"] .task-cell:not([contenteditable="false"]) {
    background: rgba(74, 144, 226, 0.08);
    border-color: rgba(74, 144, 226, 0.2);
    aspect-ratio: 1 / 1 !important; /* 정사각형 강제 */
}

.execution-group[data-group="2"] .task-cell:not([contenteditable="false"]) {
    background: rgba(255, 152, 0, 0.08);
    border-color: rgba(255, 152, 0, 0.2);
    aspect-ratio: 1 / 1 !important;
}

.execution-group[data-group="3"] .task-cell:not([contenteditable="false"]) {
    background: rgba(233, 30, 99, 0.08);
    border-color: rgba(233, 30, 99, 0.2);
    aspect-ratio: 1 / 1 !important;
}

.execution-group[data-group="4"] .task-cell:not([contenteditable="false"]) {
    background: rgba(76, 175, 80, 0.08);
    border-color: rgba(76, 175, 80, 0.2);
    aspect-ratio: 1 / 1 !important;
}

.execution-group[data-group="5"] .task-cell:not([contenteditable="false"]) {
    background: rgba(142, 124, 195, 0.08);
    border-color: rgba(142, 124, 195, 0.2);
    aspect-ratio: 1 / 1 !important;
}

.execution-group[data-group="6"] .task-cell:not([contenteditable="false"]) {
    background: rgba(102, 126, 234, 0.08);
    border-color: rgba(102, 126, 234, 0.2);
    aspect-ratio: 1 / 1 !important;
}

.execution-group[data-group="7"] .task-cell:not([contenteditable="false"]) {
    background: rgba(240, 147, 251, 0.08);
    border-color: rgba(240, 147, 251, 0.2);
    aspect-ratio: 1 / 1 !important;
}

.execution-group[data-group="8"] .task-cell:not([contenteditable="false"]) {
    background: rgba(79, 172, 254, 0.08);
    border-color: rgba(79, 172, 254, 0.2);
    aspect-ratio: 1 / 1 !important;
}

/* 비활성화 상태 - 원래 스타일 복구 */
[contenteditable="false"] {
    /* 비활성화 특별 시각적 스타일 */
    background: rgba(248, 249, 250, 0.8) !important;
    color: var(--text-muted) !important;
    cursor: not-allowed;
    opacity: 0.7;
    /* backdrop-filter: blur(5px); */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* 비활성화 상태 placeholder */
[contenteditable="false"]:empty:before {
    content: attr(data-placeholder);
    color: var(--text-muted) !important;
    font-style: italic;
    pointer-events: none;
    opacity: 0.6;
}

/* 목표그룹 특별 스타일 - MZ세대 중심 그룹 */
.goal-group {
    border: 2px solid var(--accent-purple);
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 12px 40px rgba(142, 124, 195, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* 목표그룹 데코레이션 라인 제거됨 */
.goal-group::before {
    display: none;
}

/* 실행그룹별 MZ세대 네온 배경 구분 */
.execution-group[data-group="1"] { 
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(74, 144, 226, 0.3);
}
/* 실행그룹 1 데코레이션 라인 제거됨 */
.execution-group[data-group="1"]::before { display: none; }

.execution-group[data-group="2"] { 
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 152, 0, 0.3);
}
/* 실행그룹 2 데코레이션 라인 제거됨 */
.execution-group[data-group="2"]::before { display: none; }

.execution-group[data-group="3"] { 
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(233, 30, 99, 0.3);
}
/* 실행그룹 3 데코레이션 라인 제거됨 */
.execution-group[data-group="3"]::before { display: none; }

.execution-group[data-group="4"] { 
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(76, 175, 80, 0.3);
}
/* 실행그룹 4 데코레이션 라인 제거됨 */
.execution-group[data-group="4"]::before { display: none; }

.execution-group[data-group="5"] { 
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(142, 124, 195, 0.3);
}
/* 실행그룹 5 데코레이션 라인 제거됨 */
.execution-group[data-group="5"]::before { display: none; }

.execution-group[data-group="6"] { 
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(102, 126, 234, 0.3);
}
/* 실행그룹 6 데코레이션 라인 제거됨 */
.execution-group[data-group="6"]::before { display: none; }

.execution-group[data-group="7"] { 
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(240, 147, 251, 0.3);
}
/* 실행그룹 7 데코레이션 라인 제거됨 */
.execution-group[data-group="7"]::before { display: none; }

.execution-group[data-group="8"] { 
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(79, 172, 254, 0.3);
}
/* 실행그룹 8 데코레이션 라인 제거됨 */
.execution-group[data-group="8"]::before { display: none; }

/* MZ세대 모바일 디자인 최적화 */
@media (max-width: 768px) {
    body {
        padding: 15px 10px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        background-attachment: scroll; /* 모바일에서 성능 최적화 */
        zoom: 0.35; /* 단순 줌 아웃으로 전체 보기 */
    }
    
    .container {
        min-width: 1080px;
        padding: 0;
    }
    
    .mandal-grid {
        width: 1080px;
        min-width: 1080px;
        gap: 10px; /* 모바일에서 간격 줄임 */
    }
    
    /* 헤더 모바일 최적화 */
    .header {
        padding: 20px 15px;
        margin-bottom: 25px;
        border-radius: 15px;
    }
    
    .logo-section {
        padding: 0 5px; /* 모바일에서 좌우 5px 여백만 */
        width: calc(100% - 10px); /* 좌우 여백 제외하고 꽉차게 */
        max-width: 100%;
        box-sizing: border-box;
    }
    
    .main-title-link {
        width: 100%;
        display: block;
        text-align: center;
    }
    
    .main-title {
        font-size: 4.4rem; /* 기존 2.2rem의 2배 */
        white-space: nowrap;
        text-align: center;
        margin: 0;
        line-height: 1.1;
    }
    
    .subtitle {
        font-size: 0.95rem;
    }
    
    /* URL 컨트롤 모바일 최적화 */
    .url-controls {
        flex-direction: column;
        gap: 12px;
        padding: 15px;
        margin-bottom: 20px;
        align-items: center;
    }
    
    /* AI 일괄생성 버튼 - 가로 길이 2배 확대 */
    #generateAllBtn {
        width: calc(100vw - 20px) !important; /* 화면 전체 너비에서 좌우 여백 제외 */
        max-width: none !important; /* 최대 크기 제한 해제 */
        height: 75px !important; /* 높이 증가 */
        font-size: 1.8rem !important; /* 글자 크기 대폭 증가 */
        font-weight: 800 !important;
        padding: 20px 40px !important;
        border-radius: 20px !important;
        margin: 0 10px !important; /* 좌우 10px 여백 */
        justify-content: center !important;
        gap: 20px !important;
        display: flex !important;
        align-items: center !important;
        box-sizing: border-box !important;
    }
    
    #generateAllBtn .button-icon {
        font-size: 2.2rem !important; /* 아이콘 크기 대폭 증가 */
        flex-shrink: 0;
    }
    
    #generateAllBtn .button-text {
        font-size: 1.8rem !important; /* 텍스트 크기 대폭 증가 */
        font-weight: 800 !important;
        color: white !important;
        flex-shrink: 0;
        text-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
    }
    
    /* 2차 버튼들 - 2열 배치 */
    .mobile-secondary-buttons {
        display: flex;
        gap: 8px;
        width: 80%;
        max-width: 320px;
        justify-content: space-between;
    }
    
    .mobile-secondary-buttons .url-button {
        flex: 1;
        height: 45px;
        font-size: 0.9rem;
        padding: 10px 8px;
        border-radius: 10px;
        justify-content: center;
        gap: 6px;
        min-width: 0; /* flex 아이템이 줄어들 수 있도록 */
    }
    
    .mobile-secondary-buttons .button-icon {
        font-size: 1.1rem;
        flex-shrink: 0;
    }
    
    .mobile-secondary-buttons .button-text {
        font-size: 0.85rem;
        font-weight: 500;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    /* 그룹 모바일 최적화 */
    .execution-group,
    .goal-group {
        padding: 8px; /* 모바일에서 더 컴팩하게 */
        border-radius: 12px;
        /* 모바일에서 호버 효과 비활성화 */
        transform: none !important;
    }
    
    .execution-group:hover,
    .goal-group:hover {
        transform: none !important;
        animation: none;
    }
    
    /* 셀 크기 모바일 최적화 - 정사각형 유지 */
    [contenteditable="true"],
    [contenteditable="false"] {
        font-size: 0.75rem;
        border-radius: 10px;
        padding: 3px;
    }
    
    /* 모바일에서도 모든 셀 정사각형 유지 */
    .core-goal-cell,
    .sub-goal-cell:not(.main-sub-goal),
    .main-sub-goal,
    .task-cell {
        font-size: 0.75rem;
        padding: 3px;
    }
    
    .sub-goal-cell:not(.main-sub-goal) {
        font-size: 0.75rem !important;
    }
    
    /* input-container 제거됨 - 더 이상 필요없음 */
    
    .sub-grid {
        aspect-ratio: 1 / 1;
    }
    
    /* AI 버튼 모바일 최적화 - 강제 적용 */
    .goal-button {
        width: 20px !important; /* 12px → 20px로 증가 */
        height: 20px !important;
        min-width: 20px !important;
        max-width: 20px !important;
        min-height: 20px !important;
        max-height: 20px !important;
        font-size: 10px !important; /* 7px → 10px로 증가 */
        border-radius: 4px !important;
        bottom: -6px !important; /* 위치 조정 */
        right: -6px !important;
    }
    
    .goal-button[data-type="core-goal"],
    .goal-button[data-type="sub-goal"] {
        width: 22px !important; /* 16px → 22px로 증가 */
        height: 22px !important;
        min-width: 22px !important;
        max-width: 22px !important;
        min-height: 22px !important;
        max-height: 22px !important;
        font-size: 12px !important; /* 9px → 12px로 증가 */
    }
    
    /* 모바일에서 스크롤바 숨기기 */
    body::-webkit-scrollbar {
        display: none;
    }
    
    .container::-webkit-scrollbar {
        display: none;
    }
    
    /* Firefox */
    body {
        scrollbar-width: none;
    }
    
    /* 모바일에서 애니메이션 간소화 (성능 최적화) */
    .execution-group,
    .goal-group {
        animation: none;
    }
    
    /* 터치 인터랙션 최적화 */
    [contenteditable="true"]:focus,
    .goal-button:active,
    .url-button:active {
        transform: scale(0.98);
    }
}

/* 태블릿 디자인 */
@media (min-width: 769px) and (max-width: 1024px) {
    body {
        padding: 15px;
    }
    
    .container {
        min-width: 1080px;
    }
    
    .mandal-grid {
        width: 1080px;
        min-width: 1080px;
    }
    
    .header {
        padding: 25px 20px;
    }
    
    .main-title {
        font-size: 2.8rem;
    }
}

/* 대형 화면 최적화 */
@media (min-width: 1400px) {
    .container {
        max-width: 1200px;
    }
    
    .header {
        padding: 40px 30px;
    }
    
    .main-title {
        font-size: 3.5rem;
    }
    
    .subtitle {
        font-size: 1.3rem;
    }
    
    .execution-group,
    .goal-group {
        padding: 16px; /* 대형 화면에서도 적절한 크기 유지 */
    }
    
    [contenteditable="true"],
    [contenteditable="false"] {
        font-size: 0.95rem;
        padding: 5px;
    }
    
    /* 대형 화면에서도 모든 셀 정사각형 유지 */
    .core-goal-cell,
    .main-sub-goal,
    .sub-goal-cell:not(.main-sub-goal),
    .task-cell {
        font-size: 0.95rem;
        padding: 5px;
    }
    
    .sub-goal-cell:not(.main-sub-goal) {
        font-size: 0.95rem !important;
    }
    
    /* input-container 제거됨 - 더 이상 필요없음 */
    
    .sub-grid {
        aspect-ratio: 1 / 1;
    }
    
    .goal-button {
        width: 22px !important; /* 25px에서 약간 작게 */
        height: 22px !important;
        min-width: 22px !important;
        max-width: 22px !important;
        min-height: 22px !important;
        max-height: 22px !important;
        font-size: 11px !important; /* 아이콘 크기도 증가 */
        border-radius: 5px !important;
        bottom: -7px !important; /* 위치도 조정 */
        right: -7px !important;
    }
}

/* MZ세대 애니메이션 효과 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes pulseGlow {
    0%, 100% {
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    }
    50% {
        box-shadow: 0 12px 40px rgba(102, 126, 234, 0.2);
    }
}

/* 플로팅 애니메이션 제거 */

.execution-group,
.goal-group {
    animation: fadeInUp 0.6s ease-out;
}

.goal-group {
    animation: fadeInUp 0.6s ease-out, pulseGlow 3s ease-in-out infinite;
}

/* 호버 시 과도한 애니메이션 제거 */

/* MZ세대 활성화 표시 */
.activated {
    border-color: var(--accent-green) !important;
    box-shadow: 0 0 15px rgba(76, 175, 80, 0.4) !important;
}

/* MZ세대 부드러운 transition */
.smooth-transition [contenteditable="true"],
.smooth-transition [contenteditable="false"] {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.smooth-transition .execution-group,
.smooth-transition .goal-group {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 초기 로드 시 스태거드 애니메이션 */
@keyframes staggerFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.execution-group:nth-child(1) { animation-delay: 0s; }
.execution-group:nth-child(2) { animation-delay: 0.1s; }
.execution-group:nth-child(3) { animation-delay: 0.2s; }
.execution-group:nth-child(4) { animation-delay: 0.3s; }
.execution-group:nth-child(5) { animation-delay: 0.1s; }
.execution-group:nth-child(6) { animation-delay: 0.4s; }
.execution-group:nth-child(7) { animation-delay: 0.5s; }
.execution-group:nth-child(8) { animation-delay: 0.6s; }
.execution-group:nth-child(9) { animation-delay: 0.7s; }

/* MZ세대 AI 생성 애니메이션 */
@keyframes aiGoalGenerated {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.8);
        border-color: var(--neon-blue);
    }
    25% {
        transform: scale(1.05);
        box-shadow: 0 0 20px 5px rgba(102, 126, 234, 0.6);
    }
    50% {
        transform: scale(1.03) rotate(2deg);
        box-shadow: 0 0 30px 10px rgba(102, 126, 234, 0.4);
    }
    75% {
        transform: scale(1.05) rotate(-2deg);
        box-shadow: 0 0 20px 5px rgba(102, 126, 234, 0.6);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(102, 126, 234, 0);
    }
}

@keyframes aiTaskGenerated {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(157, 78, 221, 0.8);
        border-color: var(--neon-purple);
    }
    25% {
        transform: scale(1.03);
        box-shadow: 0 0 15px 3px rgba(157, 78, 221, 0.6);
    }
    50% {
        transform: scale(1.02) rotate(1deg);
        box-shadow: 0 0 20px 5px rgba(157, 78, 221, 0.4);
    }
    75% {
        transform: scale(1.03) rotate(-1deg);
        box-shadow: 0 0 15px 3px rgba(157, 78, 221, 0.6);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(157, 78, 221, 0);
    }
}

/* 네온 펄스 애니메이션 */
@keyframes neonPulse {
    0%, 100% {
        text-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor;
    }
    50% {
        text-shadow: 0 0 10px currentColor, 0 0 20px currentColor, 0 0 30px currentColor;
    }
}

/* ======================== Footer Styles ======================== */

.footer {
    margin-top: 60px;
    padding: 30px 20px 25px;
    background: linear-gradient(135deg, rgba(248, 249, 250, 0.95) 0%, rgba(227, 242, 253, 0.95) 50%, rgba(243, 229, 245, 0.95) 100%);
    border-top: 1px solid rgba(108, 141, 242, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.footer-logo {
    font-size: 1.4rem;
    animation: bounce 2s infinite;
}

.footer-name {
    background: linear-gradient(135deg, #6c8df2 0%, #8b7ed8 50%, #ff9ff3 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
}

.footer-copyright {
    font-size: 0.9rem;
    color: var(--text-secondary);
    opacity: 0.8;
}

/* 돼지 바운스 애니메이션 */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-4px);
    }
    60% {
        transform: translateY(-2px);
    }
}

/* 모바일 footer 최적화 */
@media (max-width: 768px) {
    .footer {
        margin-top: 40px;
        padding: 25px 15px 20px;
    }
    
    .footer-brand {
        font-size: 1rem;
    }
    
    .footer-logo {
        font-size: 1.2rem;
    }
    
    .footer-copyright {
        font-size: 0.85rem;
    }
}

/* 대형 화면 footer 최적화 */
@media (min-width: 1400px) {
    .footer {
        padding: 35px 20px 30px;
    }
    
    .footer-brand {
        font-size: 1.2rem;
    }
    
    .footer-logo {
        font-size: 1.5rem;
    }
}

/* 로드 시 AI 버튼 애니메이션 */
@keyframes aiLoading {
    0% {
        transform: scale(1) rotate(0deg);
        box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
    }
    50% {
        transform: scale(1.1) rotate(180deg);
        box-shadow: 0 8px 30px rgba(0, 212, 255, 0.6);
    }
    100% {
        transform: scale(1) rotate(360deg);
        box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
    }
}

.goal-button.loading {
    animation: aiLoading 1s linear infinite;
    pointer-events: none;
}

/* 메시지 애니메이션 */
@keyframes slideInFromRight {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideOutToRight {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

/* URL 기능 버튼 스타일 - MZ세대 네온 버튼 */
.url-controls {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 30px;
    padding: 20px;
}

.url-button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    /* backdrop-filter: blur(10px); */
    border: 1px solid rgba(255, 255, 255, 0.2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    overflow: hidden;
}

.url-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.url-button:hover::before {
    left: 100%;
}

#exportImageBtn {
    background: var(--success-gradient);
    color: white;
    box-shadow: 0 8px 25px rgba(67, 233, 123, 0.3);
}

#exportImageBtn:hover {
    background: var(--accent-gradient);
    filter: brightness(1.1);
}

#clearMandalartBtn {
    background: var(--warning-gradient);
    color: white;
    box-shadow: 0 8px 25px rgba(250, 112, 154, 0.3);
}

#clearMandalartBtn:hover {
    background: var(--secondary-gradient);
    filter: brightness(1.1);
}

.url-button:active {
    transform: translateY(-1px) scale(0.98);
}

/* AI 버튼 공통 스타일 업데이트 - 강제 25px 적용 */
.goal-button[data-type="core-goal"],
.goal-button[data-type="sub-goal"] {
    width: 25px !important; /* 강제 25px 적용 */
    height: 25px !important;
    min-width: 25px !important;
    max-width: 25px !important;
    min-height: 25px !important;
    max-height: 25px !important;
    border-radius: 6px !important; /* 버튼 크기에 맞춰 약간 증가 */
    font-size: 14px !important; /* 아이콘 크기를 10px → 14px로 증가 */
    font-weight: 700 !important;
    /* backdrop-filter: blur(10px) !important; */
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    position: absolute !important;
    overflow: hidden !important;
    bottom: -8px !important; /* 25px 버튼에 맞춰 위치 조정 */
    right: -8px !important; /* 25px 버튼에 맞춰 위치 조정 */
    flex: none !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    box-sizing: border-box !important;
}

.goal-button[data-type="core-goal"]::before,
.goal-button[data-type="sub-goal"]::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.3s ease;
}

.goal-button[data-type="core-goal"]:hover::before,
.goal-button[data-type="sub-goal"]:hover::before {
    width: 60px;
    height: 60px;
}

/* 핵심목표 AI 버튼 스타일 */
.goal-button[data-type="core-goal"] {
    background: var(--primary-gradient);
    color: white;
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.goal-button[data-type="core-goal"]:hover {
    background: var(--accent-gradient);
    filter: brightness(1.1);
}

.goal-button[data-type="core-goal"]:disabled {
    background: rgba(108, 117, 125, 0.8);
    transform: none;
    box-shadow: none;
    cursor: not-allowed;
    border-color: rgba(255, 255, 255, 0.1);
}

/* 세부목표 AI 버튼 스타일 */
.goal-button[data-type="sub-goal"] {
    background: var(--secondary-gradient);
    color: white;
    box-shadow: 0 6px 20px rgba(240, 147, 251, 0.4);
}

.goal-button[data-type="sub-goal"]:hover {
    background: var(--warning-gradient);
    filter: brightness(1.1);
}

.goal-button[data-type="sub-goal"]:disabled {
    background: rgba(233, 236, 239, 0.8);
    color: rgba(108, 117, 125, 0.8);
    transform: none;
    box-shadow: none;
    cursor: not-allowed;
    border-color: rgba(222, 226, 230, 0.5);
}

/* ========================================
   CRITICAL: Task Cell Aspect Ratio 최종 보장 규칙
   이 규칙은 파일 맨 마지막에 위치하여 최고 우선순위를 가짐
   ======================================== */

/* 모든 가능한 Task Cell 셀렉터로 정사각형 강제 적용 */
div[data-type="task"],
.task-cell,
div.task-cell,
[data-type="task"],
.execution-group .task-cell,
.execution-group div.task-cell,
.execution-group [data-type="task"],
.execution-group[data-group] .task-cell,
.execution-group[data-group] div.task-cell,
.execution-group[data-group] [data-type="task"],
.execution-group[data-group="1"] .task-cell,
.execution-group[data-group="2"] .task-cell,
.execution-group[data-group="3"] .task-cell,
.execution-group[data-group="4"] .task-cell,
.execution-group[data-group="5"] .task-cell,
.execution-group[data-group="6"] .task-cell,
.execution-group[data-group="7"] .task-cell,
.execution-group[data-group="8"] .task-cell,
.execution-group[data-group="1"] div.task-cell,
.execution-group[data-group="2"] div.task-cell,
.execution-group[data-group="3"] div.task-cell,
.execution-group[data-group="4"] div.task-cell,
.execution-group[data-group="5"] div.task-cell,
.execution-group[data-group="6"] div.task-cell,
.execution-group[data-group="7"] div.task-cell,
.execution-group[data-group="8"] div.task-cell,
.execution-group[data-group="1"] [data-type="task"],
.execution-group[data-group="2"] [data-type="task"],
.execution-group[data-group="3"] [data-type="task"],
.execution-group[data-group="4"] [data-type="task"],
.execution-group[data-group="5"] [data-type="task"],
.execution-group[data-group="6"] [data-type="task"],
.execution-group[data-group="7"] [data-type="task"],
.execution-group[data-group="8"] [data-type="task"] {
    /* 절대적인 정사각형 보장 */
    aspect-ratio: 1 / 1 !important;
    width: 100% !important;
    height: 100% !important;
    
    /* 기타 크기 관련 속성 초기화 */
    min-width: unset !important;
    max-width: unset !important;
    min-height: unset !important;
    max-height: unset !important;
    
    /* Flexbox나 Grid 관련 속성들도 정사각형을 방해하지 않도록 */
    flex: none !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    
    /* Box sizing 확실히 적용 */
    box-sizing: border-box !important;
    
    /* 텍스트 래핑 규칙 최종 보장 */
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    -webkit-hyphens: auto !important;
    -moz-hyphens: auto !important;
    line-height: 1.3 !important;
}

/* 모든 셀 타입 텍스트 래핑 최종 보장 */
.core-goal-cell,
.sub-goal-cell,
.main-sub-goal,
div.core-goal-cell,
div.sub-goal-cell,
div.main-sub-goal,
[data-type="core-goal"],
[data-type="sub-goal"],
[data-type="main-sub-goal"] {
    /* 모든 셀에서 단어 단위 줄바꿈 보장 */
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    -webkit-hyphens: auto !important;
    -moz-hyphens: auto !important;
    line-height: 1.3 !important;
}