* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border: none !important; /* 모든 요소의 경계선 강제 제거 */
    outline: none !important; /* 모든 요소의 아웃라인 강제 제거 */
}

html, body {
    margin: 0;
    padding: 0;
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
    background: var(--background-color, #4dff6a); /* CSS 변수 사용, 기본값은 녹색 */
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none; /* 경계선 제거 */
    outline: none; /* 아웃라인 제거 */
    transition: background-color 0.3s ease; /* 부드러운 배경색 전환 */
}



.container {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    background: var(--background-color, #4dff6a); /* CSS 변수 사용, 기본값은 녹색 */
    display: flex;
    border: none; /* 경계선 제거 */
    outline: none; /* 아웃라인 제거 */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    transition: background-color 0.3s ease; /* 부드러운 배경색 전환 */
    /* 4:3 비율 적용 제거 - 전체 화면 사용 */
}

/* resize 핸들 스타일링 */
.container::-webkit-resizer {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 3px;
}

/* 상단 컨트롤 버튼들 - 화면 밖으로 배치 */
.top-controls {
    position: fixed;
    top: 15px;
    right: 15px;
    z-index: 1000;
    display: flex;
    gap: 10px;
}

.control-btn {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
    font-family: inherit;
}

.control-btn:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.1) 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

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

/* 배경색 설정 스타일 */
.color-input-group {
    display: flex;
    gap: 10px;
    align-items: center;
}

.color-input-group input[type="color"] {
    width: 50px;
    height: 40px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.color-input-group input[type="text"] {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-family: monospace;
    font-size: 14px;
}

.color-preview-box {
    transition: background-color 0.3s ease;
    border: 1px solid #ccc !important;
    border-radius: 5px;
}

/* 색상 선택기 스타일 */
.color-picker-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.color-picker-panel {
    background: #1e1e1e;
    border-radius: 15px;
    padding: 25px;
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.color-picker-panel h3 {
    margin: 0 0 15px 0;
    color: #fff;
    text-align: center;
    font-size: 24px;
}

.color-picker-panel p {
    margin: 0 0 20px 0;
    color: #ccc;
    text-align: center;
    font-size: 14px;
}

.color-palette-picker {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    width: 100%;
    max-width: 100%;
}

.color-palette {
    flex: 1;
    min-width: 0;
}

.color-palette h4 {
    margin: 0 0 15px 0;
    color: #fff;
    font-size: 16px;
}

.color-grid {
    display: grid;
    /* grid-template-columns는 JavaScript에서 동적으로 설정됨 */
    gap: 8px;
    margin-bottom: 15px;
    width: 100%;
    max-width: 100%;
}

.color-option {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s;
    position: relative;
}

.color-option:hover {
    transform: scale(1.1);
    border-color: #fff;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.color-option.selected {
    border-color: #00ff00;
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.7);
}

.color-option.selected::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-weight: bold;
    font-size: 16px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.selected-colors {
    flex: 1;
    min-width: 0;
}

.selected-colors h4 {
    margin: 0 0 15px 0;
    color: #fff;
    font-size: 16px;
}

.selected-colors-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 15px;
    min-height: 60px;
}

.color-item {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #333;
    padding: 8px 12px;
    border-radius: 20px;
    border: 2px solid #555;
}

.color-preview {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #fff;
}

.color-value {
    color: #fff;
    font-family: monospace;
    font-size: 12px;
}

.remove-color {
    background: #ff4444;
    color: white;
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    cursor: pointer;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.add-color-btn, .clear-colors-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 12px;
    margin-right: 10px;
    margin-bottom: 10px;
}

.clear-colors-btn {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
}

.color-picker-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.apply-btn, .cancel-btn {
    padding: 12px 25px;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    transition: all 0.3s;
}

.apply-btn {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

.cancel-btn {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
    color: white;
}

.apply-btn:hover, .cancel-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.message-form {
    display: flex;
    gap: 10px;
    margin-bottom: 30px;
    justify-content: center;
    flex-wrap: wrap;
}

.message-form select,
.message-form input,
.message-form button {
    padding: 12px 20px;
    border: none;
    border-radius: 25px;
    font-size: 16px;
    outline: none;
}

.message-form select {
    background: white;
    cursor: pointer;
}

.message-form input {
    flex: 1;
    min-width: 200px;
    background: white;
}

.message-form button {
    background: linear-gradient(135deg, #FFE0B2 0%, #FFB74D 100%);
    color: white;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(255, 224, 178, 0.3);
}

.message-form button:hover {
    background: linear-gradient(135deg, #FFF3E0 0%, #FFCC80 100%);
    box-shadow: 0 6px 20px rgba(255, 224, 178, 0.4);
}

/* 별빛 배경 */
.starfield {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 999999 !important;
    pointer-events: none !important;
    background: transparent !important;
}

.star {
    position: absolute !important;
    background: white !important;
    border-radius: 50% !important;
    animation: twinkle 2s infinite ease-in-out !important;
    box-shadow: 0 0 20px rgba(255, 255, 255, 1) !important;
    border: 2px solid white !important;
}

.star.small {
    width: 2px;
    height: 2px;
    animation-duration: 3s;
}

.star.medium {
    width: 4px;
    height: 4px;
    animation-duration: 2.5s;
}

.star.large {
    width: 50px !important;
    height: 50px !important;
    animation-duration: 2s !important;
    background: red !important;
    border: 5px solid red !important;
    box-shadow: 0 0 50px red !important;
    display: block !important;
    visibility: visible !important;
}

@keyframes twinkle {
    0%, 100% {
        opacity: 0.8;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.5);
    }
}

.message-wall {
    position: relative;
    background: transparent; /* 별빛이 보이도록 투명 배경 */
    border-radius: 0; /* 모서리 둥글기 제거 */
    overflow: visible; /* 내용이 잘리지 않도록 */
    border: none; /* 경계선 완전 제거 */
    z-index: 50; /* 별빛보다 뒤에 표시 */
    
    /* 동적 그리드 레이아웃 (JavaScript에서 설정) */
    display: grid;
    /* grid-template-columns와 grid-template-rows는 JavaScript에서 동적 설정 */
    grid-auto-flow: row; /* 행 우선으로 채우기 */
    gap: 2vmin; /* 화면 크기에 따라 조정되는 간격 */
    padding: 2vmin 2vmin 4vmin 2vmin; /* 상단 패딩 줄이고 하단 패딩 늘려서 위쪽 배치 */
    
    /* 화면 크기에 맞춰 최대 크기로 표시 */
    width: 100vw;
    height: 100vh;
    
    /* 위쪽 정렬 */
    align-content: start; /* 그리드 내용을 위쪽으로 정렬 */
    justify-content: start; /* 가로도 왼쪽부터 정렬 (메시지 적을 때 퍼지지 않음) */
    margin: 0;
    z-index: 100; /* 배경보다 앞에 배치 */
    box-sizing: border-box;
}

/* 별 배경 캔버스 - 전체 화면 배경 (가장 뒤) */
#starfield, .starfield-canvas {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: -10 !important; /* 가장 뒤로 */
    pointer-events: none !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    outline: none !important;
}

/* 전체화면 모드에서 별빛 캔버스 강화 */
body.app-fullscreen .starfield-canvas {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: -10 !important; /* 가장 뒤로 */
    pointer-events: none !important;
    background: transparent !important;
    transform: none !important;
    opacity: 1 !important;
}

/* 전체화면 모드에서 전체 화면 사용 */
body.app-fullscreen .message-wall {
    width: 100vw !important;
    height: 100vh !important;
    aspect-ratio: unset !important;
    padding: 2vmin 3vmin 6vmin 3vmin !important; /* 위쪽 배치 패딩 */
    gap: 3vmin !important; /* 전체화면에서 더 넉넉한 간격 */
    align-content: start !important; /* 위쪽 정렬 강제 */
}

/* 전체화면 모드에서 메시지 스타일 */
body.app-fullscreen .message:not(.special-mode) {
    font-size: clamp(2rem, 5vmin, 4rem) !important; /* 전체화면에서 더 큰 폰트 */
    padding: 1.5vmin !important;
    font-family: 'Fredoka', 'Comfortaa', 'Quicksand', 'Nunito', 'Poppins', 'Gaegu', 'Hi Melody', 'Single Day', 'Dongle', 'Gamja Flower', 'Nanum Pen Script', 'Yeon Sung', 'Jua', 'Noto Sans KR', 'Noto Serif KR', 'Do Hyeon', 'Black Han Sans', 'Sunflower', 'Gowun Batang', 'Gowun Dodum', 'IBM Plex Sans KR', 'Malgun Gothic', '맑은 고딕', 'Microsoft YaHei', 'Hiragino Sans', 'Arial', sans-serif !important;
    letter-spacing: 0.6px !important;
    text-shadow: none !important;
}

/* 스페셜 모드 메시지 - 슬라이드 애니메이션 */
.message.special-mode {
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    font-size: 72px !important; /* 기본 폰트 크기 */
    max-width: 90vw !important;
    z-index: 9999 !important; /* 최상위로 */
    color: white !important;
    font-weight: 700 !important;
    font-family: 'Fredoka', 'Comfortaa', 'Quicksand', 'Nunito', 'Poppins', 'Gaegu', 'Hi Melody', 'Single Day', 'Dongle', 'Gamja Flower', 'Nanum Pen Script', 'Yeon Sung', 'Jua', 'Noto Sans KR', 'Noto Serif KR', 'Do Hyeon', 'Black Han Sans', 'Sunflower', 'Gowun Batang', 'Gowun Dodum', 'IBM Plex Sans KR', 'Malgun Gothic', '맑은 고딕', 'Microsoft YaHei', 'Hiragino Sans', 'Arial', sans-serif !important;
    letter-spacing: 1.5px !important;
    text-shadow: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* 새 메시지가 아래에서 위로 슬라이드인 */
.message.special-mode.slide-in {
    animation: slideInFromBottom 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards !important;
    z-index: 10000 !important; /* 새 메시지가 위에 표시 */
}

/* 기존 메시지가 위로 슬라이드아웃 */
.message.special-mode.slide-out {
    animation: slideUpOut 0.6s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards !important;
    z-index: 9999 !important; /* 기존 메시지가 아래에 표시 */
}

/* 아래에서 위로 올라오는 애니메이션 */
@keyframes slideInFromBottom {
    0% {
        opacity: 0;
        transform: translate(-50%, 150vh);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

/* 위로 사라지는 애니메이션 */
@keyframes slideUpOut {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -150vh);
    }
}

.message:not(.special-mode) {
    position: relative;
    z-index: 100; /* 별빛보다 뒤에 */
    padding: 1vmin;
    border-radius: 0;
    font-weight: 600;
    font-size: clamp(1.5rem, 4vmin, 3rem); /* 반응형 폰트 크기 */
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    line-height: 1.2;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.5s ease-in;
    cursor: pointer;
    transition: transform 0.3s, font-size 0.3s, text-shadow 0.3s;
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
    letter-spacing: 0.4px;
    text-shadow: none;
    background: transparent;
    border: none;
    box-shadow: none;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    line-height: 1.2;
    hyphens: auto;
    word-break: keep-all;
}

.message:hover {
    z-index: 300 !important; /* 호버 시 더 앞에 */
    transform: rotate(0deg) scale(1.05) !important; /* 호버 시 기울기 해제하고 살짝 확대 */
    filter: none !important;
}

/* 기본 메시지 스타일 - 색상은 JavaScript에서 랜덤 적용 */
.message:not(.special-mode) {
    background: transparent;
    font-weight: 700;
    /* text-stroke 제거: JavaScript에서 설정한 색상이 우선되도록 */
    transition: all 0.3s ease;
}

/* 빈 슬롯 스타일 (그리드 모양 유지용) */
.message.empty-slot {
    background: transparent !important;
    border: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* 메시지 나타나기/사라지기 애니메이션 */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px) rotate(0deg) scale(0.8);
    }
    100% {
        opacity: 1;
        transform: translateY(0) rotate(var(--tilt-angle, 0deg)) scale(1);
    }
}

@keyframes fadeOutDown {
    0% {
        opacity: 1;
        transform: translateY(0) rotate(var(--tilt-angle, 0deg)) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(-20px) rotate(0deg) scale(0.8);
    }
}

.message.fade-in {
    animation: fadeInUp 0.6s ease-out forwards;
}

.message.fade-out {
    animation: fadeOutDown 0.4s ease-in forwards;
}

.controls {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 20px;
}

.controls button {
    padding: 12px 25px;
    border: none;
    border-radius: 25px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s;
}

#clearBtn {
    background: linear-gradient(135deg, #FF6B9D 0%, #C44569 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(255, 107, 157, 0.3);
}

#clearBtn:hover {
    background: linear-gradient(135deg, #FF8AAB 0%, #D6688A 100%);
    box-shadow: 0 6px 20px rgba(255, 107, 157, 0.4);
}

#autoAddBtn {
    background: linear-gradient(135deg, #A8E6CF 0%, #7FB069 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(168, 230, 207, 0.3);
}

#autoAddBtn:hover {
    background: linear-gradient(135deg, #B8F0D9 0%, #8FC079 100%);
    box-shadow: 0 6px 20px rgba(168, 230, 207, 0.4);
}

#fullscreenBtn {
    background: linear-gradient(135deg, #E1BEE7 0%, #BA68C8 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(225, 190, 231, 0.3);
}

#fullscreenBtn:hover {
    background: linear-gradient(135deg, #E8C5F0 0%, #C678D8 100%);
    box-shadow: 0 6px 20px rgba(225, 190, 231, 0.4);
}



/* 시뮬레이션 버튼 호버 효과 */
#simulationBtn:hover {
    background: linear-gradient(135deg, #FFB74D 0%, #FF8A65 100%) !important;
    box-shadow: 0 6px 20px rgba(255, 152, 0, 0.4) !important;
    transform: translateY(-2px);
}



@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.1) rotate(0deg);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* 귀여운 움직임 애니메이션 */
@keyframes wiggle {
    0%, 100% {
        transform: translateX(0px) translateY(0px) rotate(0deg);
    }
    25% {
        transform: translateX(0.67px) translateY(-0.33px) rotate(0.33deg);
    }
    50% {
        transform: translateX(-0.33px) translateY(0.33px) rotate(-0.33deg);
    }
    75% {
        transform: translateX(0.33px) translateY(-0.67px) rotate(0.17deg);
    }
}

/* 반응형 디자인 */
@media (max-width: 768px) {
    .container {
        padding: 0;
        width: 100vw;
        height: 100vh;
        min-width: 320px;
        min-height: 240px;
    }
    
    /* 모바일 헤더 스타일 제거 */
    
    .message-form {
        flex-direction: column;
        align-items: center;
    }
    
    .message-form input {
        min-width: 250px;
    }
    
    .message-wall {
        width: 175.5%;
        height: 87.75%;
    }
    
    .message {
        font-size: 28px;
        max-width: 320px;
        padding: 0;
    }
    
    .stats-display {
        display: none;
    }
    
    .top-controls {
        top: 10px;
        right: 10px;
        flex-direction: column;
        gap: 6px;
    }
    
    .control-btn {
        font-size: 11px;
        padding: 5px 10px;
    }
}