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

body {
    font-family: 'SUIT Variable', sans-serif;
}

/* ===================================
   바깥 컨테이너
   모든 화면 크기에서 동일하게 세로 스크롤 허용
   =================================== */
.main-outer {
    width: 100vw;
    min-height: 100vh;
    overflow-x: hidden;
    background: #fff;
}

/* ===================================
   메인: 화면 크기 불문 항상 세로 스택
   (눈 → 별 그룹 순서)
   =================================== */
.main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 100vh;
    padding: 40px 0;
    gap: 40px;
}

/* ===================================
   눈 영역
   =================================== */
.eye-wrapper {
    position: relative;
    width: 198.7px;
    height: 198.7px;
}

.eye {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 176.6px;
    height: 196.9px;
    background-color: #FE8439;
    border-radius: 50%;
    overflow: hidden;
}

.white-oval {
    width: 44.2px;
    height: 87.4px;
    background: white;
    border-radius: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.yellow-oval {
    width: 35px;
    height: 94.8px;
    background: yellow;
    border-radius: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.eyelash {
    position: absolute;
    width: 304px;
    top: -78px;
    left: -110px;
    z-index: 10;
    transform-origin: bottom center;
    cursor: pointer;
}

/* ===================================
   별 그룹: 항상 flex로 가로 나열 + 줄바꿈
   =================================== */
.star-group {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 16px;
    width: 90vw;
    max-width: 500px;
}

.swing, .diary, .snowdrift, .summer, .letter {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: 600;
    text-decoration: none;
    transition: background-image 0.15s ease;
}

.swing::after, .diary::after, .snowdrift::after, .summer::after, .letter::after {
    content: '';
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
    font-size: 0.85em;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;

}
 
.swing:hover, .diary:hover, .snowdrift:hover, .summer:hover, .letter:hover {
    background-image: none;
}
 
.swing:hover::after, .diary:hover::after, .snowdrift:hover::after, .summer:hover::after, .letter:hover::after {
    opacity: 1;
}

.swing {
    width: 16vw; height: 16vw;
    max-width: 110px; max-height: 110px;
    min-width: 60px; min-height: 60px;
    background: url(../images/Star_03.png) 50% 50% / cover;
}
.swing::after {
    content: 'swing';
    color: #C1F0AC;
}

.diary {
    width: 14vw; height: 14vw;
    max-width: 95px; max-height: 95px;
    min-width: 52px; min-height: 52px;
    background: url(../images/Star_01.png) 50% 50% / cover;
}
.diary::after {
    content: 'diary';
    color: #F0ACAD;
}

.snowdrift {
    width: 9vw; height: 9vw;
    max-width: 60px; max-height: 60px;
    min-width: 34px; min-height: 34px;
    background: url(../images/Star_02.png) 50% 50% / cover;
}
.snowdrift::after {
    content: 'snowdrift';
    color: #ACDFF0;
}

.summer {
    width: 6.5vw; height: 6.5vw;
    max-width: 45px; max-height: 45px;
    min-width: 26px; min-height: 26px;
    background: url(../images/Star_04.png) 50% 50% / cover;
}
.summer::after {
    content: 'summer';
    color: #F0EFAC;
}

@media (max-width: 768px) {
    .summer {
        display: none;
    }
}

.letter {
    width: 8vw; height: 8vw;
    max-width: 55px; max-height: 55px;
    min-width: 30px; min-height: 30px;
    background: url(../images/Star_05.png) 50% 50% / cover;
}
.letter::after {
    content: 'letter';
    color: #ADACF0;
}

/* footer */

footer{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
gap: 40px;}

.icon_wrap{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 18px;
}

.icon_wrap a{font-size: 28px; text-decoration: none; color: #000;}

.email-copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  font-size: 28px;
  color: inherit;
  cursor: pointer;
}

.credit{text-align: center;}

footer p a{color: #000;}


/* 토스터 */

.toaster-ui-lib-container{
  max-width: 300px;
  bottom: 0;
}
.toaster-ui-lib::after {
    display: none;
}