/* =========================
   BASIC
========================= */

html {
    background: #b3d9ad;
}

body {
    margin: 0;
    padding: 0;

    background: #b3d9ad;
    color: #111;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;

    text-align: center;
}


/* =========================
   COMMON / PAGE
========================= */

/* ================= PAGE ================= */

.page {
    width: 720px;

    margin: 20px auto 80px;
    padding: 10px 20px 50px;

    box-sizing: border-box;

    position: relative;
    z-index: 2;
}

main {
    position: relative;
}


/* ================= HEADER ================= */

header {
    text-align: center;
    margin-bottom: 15px;
}

.logo {
    font-size: 29px;
    letter-spacing: 1px;
}

.tiny-top {
    font-size: 10px;
    margin-bottom: 8px;
}

h1 {
    margin: 27px 0 24px 0;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 29px;
    font-weight: normal;

    letter-spacing: 1px;
}

.subtitle {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
}

.blink {
    margin-top: 18px;

    display: inline-block;

    background: #ffff00;
    color: #ff0000;

    padding: 2px 5px;

    font-weight: bold;
    font-size: 10px;
}


/* ================= NAVIGATION ================= */

nav {
    margin: 32px 0 45px;

    padding: 7px 4px;

    border-top: 1px solid #111;
    border-bottom: 1px solid #111;

    font-size: 12px;

    word-spacing: 4px;

    text-align: center;
}

nav a {
    color: #0000ee;
    text-decoration: underline;
}

nav a:visited {
    color: #551a8b;
}

nav a:hover {
    color: #ff0000;
}


/* ================= FOOTER ================= */

footer {
    margin-top: 50px;

    padding-top: 15px;

    border-top: 1px solid #111;

    font-size: 10px;

    text-align: center;
}

footer div {
    font-size: 16px;
    margin-bottom: 15px;
}

footer p {
    margin: 5px 0;
}


/* =========================
   INDEX
========================= */

/* ================= INTRO PAGE ================= */

.intro-page {
    margin: 0;
    padding: 0;

    min-height: 100vh;

    display: flex;
    justify-content: center;
    align-items: center;

    background: #b3d9ad;
}


/* ================= INTRO CONTENT ================= */

.intro-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}


/* ================= INTRO TEXT ================= */

.intro-text {
    margin-bottom: 15px;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 21px;
    line-height: 1.5;

    color: #111;
    text-align: center;
}


/* ================= INTRO IMAGE ================= */

.intro-image {
    display: block;
}

.intro-image img {
    display: block;

    max-width: 80vw;
    max-height: 80vh;

    width: auto;
    height: auto;
}


/* =========================
   MAIN
========================= */

/* ================= WELCOME ================= */

.welcome {
    width: 430px;

    margin: 0 auto 100px;

    text-align: center;
}

.welcome h2 {
    font-family: "Times New Roman", serif;
    font-size: 38px;

    margin: 0 0 20px;
}

.welcome p {
    line-height: 1.7;
}


/* ================= NEWS ================= */

.news-banner {
    position: relative;

    width: 600px;
    max-width: 90%;

    margin: 30px auto;
}

.news-banner img {
    display: block;

    width: 100%;
    height: auto;
}

.news-text {
    position: absolute;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    margin: 0;
    padding: 0;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 30px;

    color: #111;

    text-align: center;
}


/* ================= WEIRD TEXT ================= */

.weird-text {
    margin: 0 auto 80px;

    font-family: "Courier New", monospace;

    text-align: center;
}

.weird-text p {
    margin: 4px 0;
}

.weird-text .tiny {
    font-size: 8px;

    margin-left: 0;
}


/* ================= LINKS ================= */

.links-box {
    width: 230px;

    margin: 0 auto 120px;
    padding: 10px;

    border: 1px solid #111;

    background: #cce6c7;

    text-align: center;
}

.box-title {
    margin-bottom: 12px;

    padding: 2px 5px;

    background: #ffff00;

    font-weight: bold;
    font-size: 16px;
}

.links-box a {
    color: #0000ee;
    line-height: 2;
}

.links-box a:visited {
    color: #551a8b;
}

.links-box a:hover {
    color: #ff0000;
}


/* ================= RANDOM ================= */

.random {
    margin: 0 auto 100px;

    font-family: "Times New Roman", serif;
    font-size: 18px;

    text-align: center;
}

.random p {
    margin: 12px 0;
}

.random a {
    color: #0000ee;
    text-decoration: underline;
}


/* ================= VISITOR COUNTER ================= */

.counter {
    width: 150px;

    margin: 0 auto 130px;

    text-align: center;

    font-size: 9px;
}

.numbers {
    display: inline-block;

    margin: 5px 0;
    padding: 2px 7px;

    background: #111;
    color: #00ff00;

    font-family: "Courier New", monospace;
    font-size: 16px;

    letter-spacing: 3px;
}


/* ================= LAST MESSAGE ================= */

.last-message {
    margin: 0 auto 120px;

    font-family: "Comic Sans MS", "Comic Sans", cursive;
    font-size: 15px;

    text-align: center;
}

.last-message p {
    margin: 12px 0;
}

.last-message .small {
    font-family: Arial, sans-serif;
    font-size: 9px;
}


/* ================= cat GIF ================= */

.dream-gif {
    display: block;

    width: 40%;
    max-width: 300px;
    height: auto;

    margin: 40px auto 0;
}

/* =========================
   MUSIC
========================= */

/* ================= MUSIC MAIN PAGE ================= */

.music-page {
    margin: 0 auto 100px;

    text-align: center;
}

.music-page h2 {
    font-family: "Times New Roman", serif;

    font-size: 38px;
    font-weight: normal;

    margin: 0 0 20px;
}

.music-page > p {
    margin-bottom: 50px;
}


/* ================= YEAR BOXES ================= */

.music-years {
    display: grid;

    grid-template-columns: repeat(2, 320px);

    justify-content: center;

    gap: 25px;
}

.year-box {
    display: block;

    width: 320px;
    height: 300px;

    box-sizing: border-box;

    border: 1px solid #111;

    background: #cce6c7;

    text-decoration: none;
}

.year-box img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.year-label {
    margin-top: 0;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 16px;

    color: #111;
}

.year-box:hover {
    background: #ffff00;
    color: #ff0000;
}


/* =========================
   2026
========================= */

/* ================= MUSIC YEAR PAGE ================= */

.music-year {
    margin: 0 auto 100px;

    text-align: center;
}

.music-year h2 {
    font-family: "Times New Roman", serif;

    font-size: 38px;
    font-weight: normal;

    margin: 0 0 20px;
}

.music-year > p {
    margin-bottom: 50px;
}


/* ================= OLD MUSIC LIST ================= */

.music-list {
    width: 500px;

    margin: 0 auto;

    text-align: left;
}

.music-list a {
    display: block;

    margin: 14px 0;

    color: #0000ee;

    text-decoration: underline;

    font-size: 13px;
}

.music-list a:visited {
    color: #551a8b;
}

.music-list a:hover {
    color: #ff0000;
}


/* =========================
   MOVIE
========================= */

/*
   현재 보내준 CSS에는 MOVIE 전용 스타일이 없음.

   movie.html에 별도의 <style>이 있다면
   나중에 이 부분으로 옮기면 됨.
*/


/* =========================
   DIARY
========================= */

/* ================= DIARY PAGE ================= */

.diary-page {
    width: 480px;
    max-width: 480px;

    margin-left: auto;
    margin-right: auto;

    padding: 35px 0 50px;

    box-sizing: border-box;

    background: transparent;

    position: relative;
    z-index: 2;
}


/* ================= DIARY TITLE ================= */

.diary-heading {
    display: block;

    width: 100%;

    margin: 0 0 20px;
    padding: 0;

    background: transparent;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 32px;
    font-weight: normal;

    text-align: center;

    color: #111;
}


/* ================= WHITE DIARY AREA ================= */

.diary-paper {
    display: block;

    width: 100%;

    margin: 0;

    padding: 35px 40px 50px;

    box-sizing: border-box;

    background: #ffffff;
}


/* ================= DIARY ENTRY ================= */

.diary-entry {
    margin: 0;

    padding: 30px 0;

    background: transparent;

    box-sizing: border-box;

    color: #111;

    text-align: left;
}

.diary-entry p {
    margin: 12px 0;

    line-height: 1.8;
}


/* ================= DIARY DIVIDER ================= */

.diary-entry + .diary-entry {
    border-top: 1px solid #111;

    margin-left: 25px;
    margin-right: 25px;
}


/* ================= DATE ================= */

.diary-date {
    margin: 22px 0 0;

    font-family: "Courier New", monospace;

    font-size: 11px;

    color: #555;

    text-align: center;
}


/* ================= TAG ================= */

.diary-tag {
    margin-top: 22px;

    font-size: 10px;

    color: #666;

    text-align: center;
}


/* ================= DIARY IMAGE ================= */

.diary-image {
    display: block;

    max-width: 100%;
    height: auto;

    margin: 25px auto;
}


/* =========================
   DIARY / FLYING FROGS
========================= */

/* ================= FLYING FROGS ================= */

.frog-fly-zone {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    pointer-events: none;

    z-index: 1;
}


/* ================= FROG ================= */

.flying-frog {
    position: absolute;

    width: 70px;
    height: auto;
}


/* ================= FROG 1 ================= */

.frog1 {
    top: 12%;
    left: -100px;

    animation: frogRight1 17s linear infinite;
}


/* ================= FROG 2 ================= */

.frog2 {
    top: 28%;
    right: -100px;

    animation: frogLeft1 21s linear infinite;
}


/* ================= FROG 3 ================= */

.frog3 {
    top: 43%;
    left: -100px;

    animation: frogRight2 23s linear infinite;
}


/* ================= FROG 4 ================= */

.frog4 {
    top: 61%;
    right: -100px;

    animation: frogLeft2 19s linear infinite;
}


/* ================= FROG 5 ================= */

.frog5 {
    top: 76%;
    left: -100px;

    animation: frogRight3 26s linear infinite;
}


/* ================= FROG 6 ================= */

.frog6 {
    top: 88%;
    right: -100px;

    animation: frogLeft3 24s linear infinite;
}


/* =========================
   DIARY / FROG ANIMATIONS
========================= */

/* ================= FROG 1: LEFT → RIGHT ================= */

@keyframes frogRight1 {

    0% {
        left: -100px;
        transform: translateY(0) rotate(-5deg);
    }

    25% {
        transform: translateY(-35px) rotate(4deg);
    }

    50% {
        transform: translateY(30px) rotate(-3deg);
    }

    75% {
        transform: translateY(-20px) rotate(5deg);
    }

    100% {
        left: calc(100% + 100px);
        transform: translateY(10px) rotate(-4deg);
    }
}


/* ================= FROG 3: LEFT → RIGHT ================= */

@keyframes frogRight2 {

    0% {
        left: -100px;
        transform: translateY(20px) rotate(4deg);
    }

    30% {
        transform: translateY(-45px) rotate(-5deg);
    }

    60% {
        transform: translateY(25px) rotate(3deg);
    }

    100% {
        left: calc(100% + 100px);
        transform: translateY(-30px) rotate(-5deg);
    }
}


/* ================= FROG 5: LEFT → RIGHT ================= */

@keyframes frogRight3 {

    0% {
        left: -100px;
        transform: translateY(-20px) rotate(-3deg);
    }

    35% {
        transform: translateY(40px) rotate(5deg);
    }

    65% {
        transform: translateY(-35px) rotate(-4deg);
    }

    100% {
        left: calc(100% + 100px);
        transform: translateY(20px) rotate(4deg);
    }
}


/* ================= FROG 2: RIGHT → LEFT ================= */

@keyframes frogLeft1 {

    0% {
        right: -100px;
        transform: translateY(0) rotate(5deg);
    }

    25% {
        transform: translateY(40px) rotate(-4deg);
    }

    55% {
        transform: translateY(-30px) rotate(5deg);
    }

    80% {
        transform: translateY(20px) rotate(-3deg);
    }

    100% {
        right: calc(100% + 100px);
        transform: translateY(-15px) rotate(4deg);
    }
}


/* ================= FROG 4: RIGHT → LEFT ================= */

@keyframes frogLeft2 {

    0% {
        right: -100px;
        transform: translateY(-20px) rotate(-4deg);
    }

    35% {
        transform: translateY(-45px) rotate(5deg);
    }

    65% {
        transform: translateY(35px) rotate(-5deg);
    }

    100% {
        right: calc(100% + 100px);
        transform: translateY(-20px) rotate(3deg);
    }
}


/* ================= FROG 6: RIGHT → LEFT ================= */

@keyframes frogLeft3 {

    0% {
        right: -100px;
        transform: translateY(15px) rotate(4deg);
    }

    30% {
        transform: translateY(-35px) rotate(-5deg);
    }

    70% {
        transform: translateY(30px) rotate(4deg);
    }

    100% {
        right: calc(100% + 100px);
        transform: translateY(-25px) rotate(-4deg);
    }
}


/* =========================
   GALLERY
========================= */

/* ================= GALLERY PAGE ================= */

.gallery-page {
    width: 100%;

    margin: 0 auto 100px;

    padding: 40px 0 60px;

    box-sizing: border-box;
}


/* ================= GALLERY TITLE ================= */

.gallery-heading {
    margin: 0 0 45px;

    font-family: "Times New Roman", serif;

    font-size: 38px;
    font-weight: normal;

    text-align: center;
}


/* ================= GALLERY GRID ================= */

.gallery-grid {
    display: flex;

    flex-wrap: wrap;

    align-items: flex-start;

    gap: 8px;

    width: 100%;

    margin: 0 auto;
}


/* ================= GALLERY PHOTO ================= */

.gallery-photo {
    display: block;

    height: 220px;

    flex: 1 1 auto;

    overflow: hidden;

    text-decoration: none;
}

.gallery-photo img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    user-select: none;
    -webkit-user-drag: none;
}


/* ================= LAST ROW ================= */

.gallery-photo:last-child {
    flex-grow: 0;
}


/* =========================
   MOBILE
========================= */

/* ================= MOBILE PAGE ================= */

@media (max-width: 700px) {

    .page {
        width: 100%;

        padding-left: 10px;
        padding-right: 10px;
    }


    /* ================= MUSIC ================= */

    .music-years {
        grid-template-columns: 320px;
    }


    /* ================= DIARY ================= */

    .diary-page {
        width: 100%;
        max-width: 480px;

        padding-left: 0;
        padding-right: 0;
    }


    /* ================= GALLERY ================= */

    .gallery-grid {
        gap: 5px;
    }

    .gallery-photo {
        height: 180px;
    }
}


/* =========================
   SMALL MOBILE
========================= */

/* ================= SMALL MOBILE PAGE ================= */

@media (max-width: 450px) {

    .gallery-grid {
        gap: 4px;
    }

    .gallery-photo {
        height: 140px;
    }
}