/* -------------------------------------------------------------
   예봉중학교 홍도화 웹사이트 스타일시트
   이 스타일시트는 귀엽고 따뜻한 손그림 느낌의 레이아웃을 구현합니다.
   홍도화의 붉고 화사한 분홍빛을 테마 색상으로 사용합니다.
------------------------------------------------------------- */

/* 폰트 및 기본 여백 설정 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* 웹사이트 전체에 둥글고 귀여운 감자꽃 폰트 적용 */
    font-family: 'Gamja Flower', 'Gaegu', cursive, sans-serif;
}

/* 배경 및 글자 기본 스타일 */
body {
    /* 따뜻하고 부드러운 미색 배경 */
    background-color: #fdfbf7;
    /* 부드러운 다크 브라운 톤의 글자색으로 따뜻한 감성 전달 */
    color: #4a3e3d;
    line-height: 1.6;
    padding: 40px 20px;
    overflow-x: hidden;
}

/* 전체 메인 컨테이너 */
.container {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 80px; /* 섹션 사이의 간격을 넉넉히 설정 */
}

/* -------------------------------------------------------------
   헤더 및 메인 타이틀 영역
------------------------------------------------------------- */
.header {
    text-align: center;
    margin-bottom: 20px;
}

.main-title {
    font-size: 3.5rem;
    color: #52b788; /* 무궁이 타이틀처럼 산뜻한 나뭇잎 초록색 적용 */
    font-weight: 700;
    display: inline-block;
    position: relative;
    padding: 0 10px;
}

/* 타이틀 밑에 들어가는 귀여운 붉은색 꼬불 밑줄 */
.main-title::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 0;
    width: 100%;
    height: 15px;
    /* SVG 패스를 사용하여 구불구불한 손그림 형태의 밑줄을 표현 */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'><path d='M0,5 Q12.5,0 25,5 T50,5 T75,5 T100,5' fill='none' stroke='%23ff4d6d' stroke-width='5' stroke-linecap='round'/></svg>");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

/* 타이틀 위쪽의 보조 장식 데코선 */
.deco-line {
    width: 80px;
    height: 8px;
    background-color: #ff758f;
    margin: 25px auto 0;
    border-radius: 10px;
    opacity: 0.7;
}

/* -------------------------------------------------------------
   공통: 손그림 윈도우 스타일 메모창 (메인 스타일 핵심)
------------------------------------------------------------- */
.sketch-window {
    background-color: #ffffff;
    /* 손으로 삐뚤빼뚤하게 그린 테두리 구현 (보더 래디우스의 비대칭 처리) */
    border: 3px solid #ff4d6d;
    border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
    /* 손으로 색칠한 듯한 입체감 있는 붉은 핑크빛 그림자 효과 */
    box-shadow: 6px 6px 0px #ff8fa3;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* 마우스를 올렸을 때 통통 튀는 듯한 효과 */
.sketch-window:hover {
    transform: translate(-2px, -2px);
    box-shadow: 8px 8px 0px #ff4d6d;
}

/* 메모창 상단 바 */
.window-header {
    background-color: #fff0f3;
    border-bottom: 3px solid #ff4d6d;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 메모창 제목 */
.window-title {
    font-size: 1.2rem;
    font-weight: bold;
    color: #ff4d6d;
}

/* 메모창 버튼 그룹 (최소화, 최대화, 닫기) */
.window-buttons {
    display: flex;
    gap: 8px;
}

.win-btn {
    font-size: 1.1rem;
    font-weight: bold;
    color: #ff758f;
    cursor: pointer;
    user-select: none;
    transition: color 0.2s;
}

.win-btn:hover {
    color: #c9184a;
}

/* 메모창 내부 본문 */
.window-content {
    padding: 25px;
    font-size: 1.3rem;
}

.window-content h3 {
    font-size: 1.6rem;
    color: #c9184a;
    margin-top: 20px;
    margin-bottom: 10px;
    border-bottom: 2px dashed #ffb3c1;
    display: inline-block;
    padding-bottom: 3px;
}

.window-content h3:first-of-type {
    margin-top: 0;
}

.window-content p {
    margin-bottom: 15px;
    text-indent: 5px;
}

.window-content ul {
    list-style: none;
    margin: 15px 0;
    padding-left: 10px;
}

.window-content li {
    margin-bottom: 8px;
    display: flex;
    align-items: center;
}

.bullet {
    margin-right: 8px;
    font-size: 1.1rem;
}

.window-footer {
    font-style: italic;
    color: #800f2f;
    margin-top: 25px;
    border-top: 1px solid #ffe5ec;
    padding-top: 15px;
}

/* -------------------------------------------------------------
   섹션 1: 홍도화 소개 (사진 그룹 + 설명창 배치)
------------------------------------------------------------- */
.intro-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

/* 왼쪽 이미지 그룹 */
.image-group {
    position: relative;
    width: 45%;
    height: 350px;
}

/* 개별 사진 카드 스타일 (폴라로이드/수첩 인화 사진 감성) */
.photo-card {
    position: absolute;
    width: 220px;
    background: #ffffff;
    padding: 10px;
    border: 3px solid #ff4d6d;
    border-radius: 15px 225px 15px 255px/255px 15px 225px 15px;
    box-shadow: 0 6px 15px rgba(255, 77, 109, 0.15);
    transition: transform 0.3s ease;
}

.photo-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 8px;
}

/* 위쪽 사진 배치 및 약간의 회전 */
.photo-top {
    top: 10px;
    left: 10px;
    transform: rotate(-5deg);
    z-index: 2;
}

/* 아래쪽 사진 배치 및 반대 방향 회전 */
.photo-bottom {
    bottom: 10px;
    right: 10px;
    transform: rotate(6deg);
    z-index: 1;
}

/* 마우스 올렸을 때 사진이 가볍게 반응함 */
.photo-card:hover {
    transform: scale(1.05) rotate(0deg);
    z-index: 3;
}

/* 오른쪽 설명창 너비 조절 */
.intro-window {
    width: 50%;
}

/* -------------------------------------------------------------
   섹션 2: 캐릭터 소개 영역
------------------------------------------------------------- */
.character-section {
    text-align: center;
    background-color: rgba(255, 240, 243, 0.3);
    padding: 40px 20px;
    border-radius: 30px;
    border: 2px dashed #ffb3c1;
}

.sub-title {
    font-size: 2.2rem;
    color: #4a3e3d;
    margin-bottom: 30px;
}

.highlight-pink {
    color: #ff4d6d;
    position: relative;
    display: inline-block;
}

/* 글자 아래에 구불구불한 핑크색 장식선 추가 */
.highlight-pink::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 8px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'><path d='M0,5 Q25,10 50,5 T100,5' fill='none' stroke='%23ff758f' stroke-width='4'/></svg>");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

/* 캐릭터 및 말풍선 정렬 */
.character-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

/* 캐릭터 이미지 스타일 */
.character-img {
    width: 250px;
    height: auto;
    filter: drop-shadow(0px 8px 12px rgba(255, 77, 109, 0.2));
    /* 캐릭터 요정이 둥둥 떠다니는 애니메이션 적용 */
    animation: floatCharacter 3s ease-in-out infinite;
}

/* 캐릭터의 둥둥 뜨는 애니메이션 정의 */
@keyframes floatCharacter {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-12px); }
    100% { transform: translateY(0px); }
}

/* 요정 말풍선 */
.character-bubble {
    position: relative;
    background: #ffffff;
    border: 3px solid #ff758f;
    border-radius: 30px;
    padding: 20px 30px;
    max-width: 450px;
    font-size: 1.4rem;
    line-height: 1.5;
    box-shadow: 4px 4px 0px #ffb3c1;
}

/* 말풍선 꼭지점 데코레이션 (위쪽 삼각형) */
.character-bubble::after {
    content: '';
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 0 15px 15px;
    border-style: solid;
    border-color: transparent transparent #ffffff;
    z-index: 2;
}

.character-bubble::before {
    content: '';
    position: absolute;
    top: -19px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 0 16px 16px;
    border-style: solid;
    border-color: transparent transparent #ff758f;
    z-index: 1;
}

/* -------------------------------------------------------------
   섹션 3: 에코 약속 스토리 영역
------------------------------------------------------------- */
.story-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

/* 왼쪽 큰 텍스트 영역 */
.story-title-group {
    width: 40%;
    position: relative;
    padding: 20px;
}

.story-title {
    font-size: 2.5rem;
    line-height: 1.3;
    color: #4a3e3d;
}

/* 무궁화 타이틀 스타일처럼 특정 단어에 꼬불 장식선 */
.story-title span:first-child {
    color: #52b788; /* 초록색 강조 */
}

.story-title span:nth-child(3) {
    position: relative;
    display: inline-block;
}

.story-title span:nth-child(3)::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 8px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'><path d='M0,5 Q25,0 50,5 T100,5' fill='none' stroke='%23ff4d6d' stroke-width='4'/></svg>");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

/* 반짝이 데코레이션 위치 조절 */
.sparkle {
    position: absolute;
}

.sparkle-1 {
    top: -20px;
    left: -10px;
    transform: rotate(-15deg);
    animation: pulseSparkle 2s infinite ease-in-out;
}

.sparkle-2 {
    bottom: -10px;
    right: 20px;
    transform: rotate(20deg);
    animation: pulseSparkle 2s infinite ease-in-out 1s;
}

@keyframes pulseSparkle {
    0% { transform: scale(1) rotate(0deg); opacity: 0.8; }
    50% { transform: scale(1.2) rotate(10deg); opacity: 1; }
    100% { transform: scale(1) rotate(0deg); opacity: 0.8; }
}

/* 오른쪽 약속 스토리창 */
.story-window {
    width: 55%;
}

.story-subtitle {
    font-size: 1.4rem;
    font-weight: bold;
    color: #c9184a;
    text-align: center;
    margin-bottom: 20px;
}

/* 약속 목록을 담은 귀여운 서브 박스 */
.promises-box {
    background-color: #fff5f6;
    border: 2px dashed #ff8fa3;
    border-radius: 15px;
    padding: 15px;
    margin: 20px 0;
}

.promise-item {
    font-size: 1.2rem;
    margin-bottom: 12px;
    padding-left: 10px;
    position: relative;
}

.promise-item:last-child {
    margin-bottom: 0;
}

.promise-item strong {
    color: #ff4d6d;
}

.story-footer {
    font-style: italic;
    color: #800f2f;
    text-align: right;
    margin-top: 20px;
}

/* -------------------------------------------------------------
   반응형 웹 디자인 (태블릿 & 모바일 화면 지원)
------------------------------------------------------------- */
@media (max-width: 768px) {
    body {
        padding: 20px 10px;
    }
    
    .container {
        gap: 50px;
    }

    .main-title {
        font-size: 2.8rem;
    }

    /* 플렉스 레이아웃을 세로 방향 정렬로 변경 */
    .intro-section, .story-section {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }

    .image-group {
        width: 100%;
        max-width: 320px;
        height: 250px;
        margin: 0 auto;
    }

    .photo-card {
        width: 160px;
    }

    .photo-card img {
        height: 120px;
    }

    .intro-window, .story-window {
        width: 100%;
    }

    .story-title-group {
        width: 100%;
        text-align: center;
    }

    .sparkle-1 {
        left: 20%;
    }

    .sparkle-2 {
        right: 20%;
    }
}

/* -------------------------------------------------------------
   스크롤 페이드인 및 마우스 꽃잎 효과 (추가 기능)
------------------------------------------------------------- */

/* 스크롤 시 화면에 서서히 나타나는 효과 */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* 마우스 꽃잎 효과를 위한 스타일 */
.petal {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    animation: fadeAndFall 1.5s linear forwards;
}

@keyframes fadeAndFall {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(1);
        opacity: 1;
    }
    100% {
        /* JS에서 지정한 목적지(--dx, --dy)와 회전수(--rot)를 반영하여 꽃잎이 아래로 떨어지며 사라집니다 */
        transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(0.4);
        opacity: 0;
    }
}