body, html {
    margin: 0;
    padding: 0;
}

.yellow {
    color: yellow;
}
a,
a:visited,
a:active,
a:focus {
    text-decoration: none;
    color: inherit;
    outline: none;
}

.topbar {
    display: flex;
    width: 100%;
}

.logo {
    margin-top: 1vh;
    margin-left: 10%;
    width: 7vw;
    align-items: center;
}

.logo a {
    display: flex;
}

.logo a:hover{
    cursor: pointer;
}

.logotext {
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.1;
    align-items: center;
}

.middlebar {
    margin-left: 25%;
    max-width: 50%;
}

.sms {
    margin-top: 2vh;
    margin-left: 15%;
}

.adask {
    color: darkblue;
    margin: 0;
    margin-top: 2vh;
    font-size: 35px;
    font-weight: bold;
}

.adask:hover {
    cursor: pointer;
}

.titlename {
    margin: 0;
    font-size: 50px;
    font-weight: bold;
    display: flex;
    flex-direction: row; /* This ensures horizontal layout */
    align-items: center; /* Aligns text vertically center */
    white-space: nowrap; /* Prevents line breaks */
}

.titledes {
    margin: 0;
    color: darkred;
    font: 30px;
    font-weight: bold;
    transform: scaleX(2.65); /* Stretches horizontally */
    display: inline-block;
}

.menubar {
    width: 100%;
    background-color: rgb(72, 72, 72);
}

.menulist {
    margin-left: 15vw;
    margin-right: 15vw;
    color: white;
    font-size: 20px;
    display: flex;
    list-style: none; /*리스트 동그라미 없애는거*/
    gap: 10px;
}

.menulist li {
    white-space: nowrap;
    display: flex;
    justify-content: center;
    padding: 15px;
}

.menulist li:hover {
    background-color: #000000;
    cursor: pointer;
}

.menulist .grow {
    flex: 1;
}

.content {
    display: flex;
    width: 100%;
}

.sideleft {
    width: 10%;
}

.sideright {
    width: 10%;
}

.announcement-box {
  background-color: #ffdcdc;
  border-right: 0.3vw solid #f31212;
  padding: 1vh 1.5vw;
  margin-top: 4vh;
  font-size: 1.3vw;
  color: #333;
  border-radius: 0.5vw;
  box-shadow: 0 0 0.3vw rgba(0, 0, 0, 0.05);
  max-width: 80vw;
}

.container {
    width: 80%;
}

.newvideo {
  width: 49%;
  border-collapse: collapse;
  margin: 1rem 0;
  table-layout: fixed;
}

.newvideo th,
.newvideo td {
  border: 1px solid #ccc;
  padding: 8px 12px;
  text-align: left;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.title-col {
  width: 70%;
}

.date-col {
  width: 30%;
}

.newvideo td a {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #0066cc;
  text-decoration: none;
}

.newvideo td a:hover {
  text-decoration: underline;
}

.stats {
  width: 40%;
  border: 1px solid #ccc;
  padding: 1rem;
  margin: 1rem 0;
  margin-left: 5%;
  font-family: Arial, sans-serif;
  background-color: #f9f9f9;
  border-radius: 8px;
}

.stats p {
  margin: 0.5rem 0;
  font-size: 1rem;
}

.widthfixer {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}


.red {
    color: rgb(207, 0, 0);
}

.horiad {
    width: 49%;
}

.videoblock {
  display: inline-block;
  width: 100%;
  margin: 2vh 1vw;
  vertical-align: top;
  font-family: sans-serif;
}


.videoblock .title {
  font-weight: bold;
  font-size: 1.2vw;
  margin: 1vh 0 0.5vh;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100%;
}

.videoblock .date,
.videoblock .views {
  font-size: 1vw;
  color: #666;
  margin: 0.2vh 0;
}

.video-wrapper .title {
  font-weight: bold;
  font-size: 1.2vw;
  margin: 1vh 0 0.5vh;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100%;
}

.video-wrapper .date,
.video-wrapper .views {
  font-size: 1vw;
  color: #666;
  margin: 0.2vh 0;
}

.pagination {
  margin: 2vh 0;
  text-align: center;
  user-select: none;
}

.pagination button {
  background-color: #fff;
  border: 1px solid #ccc;
  color: #333;
  font-size: 1.6vw;
  padding: 0.8vh 1.2vw;
  margin: 0 0.5vw;
  min-width: 3.5vw;
  border-radius: 0.5vw;
  cursor: pointer;
  transition: background-color 0.25s, color 0.25s;
}

.pagination button:hover:not(:disabled) {
  background-color: #007bff;
  color: white;
  border-color: #007bff;
}

.pagination button:disabled {
  background-color: #ddd;
  color: #888;
  cursor: default;
  border-color: #bbb;
}

.photoblock {
  width: 100%;
  margin: 1vw;
  display: inline-block;
  vertical-align: top;
  font-family: Arial, sans-serif;
}

.photocontainer {
    position: relative;
    width: 100%;
    height: 0;   /* Essential: collapse the height to 0 */
    padding-bottom: 56.25%;
    background-color: #ddd;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border-radius: 0.5vw;
    margin-bottom: 0.6vh;
}

.loadedphoto {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.title {
  font-size: 1.6vw;
  font-weight: bold;
  margin: 0 0 0.4vh 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.date, .views {
  font-size: 1.2vw;
  color: #666;
  margin: 0;
}

.videophoto {
    position: relative;
    width: 100%;
    height: 0;   /* Essential: collapse the height to 0 */
    padding-bottom: 56.25%;
    background-color: #ddd;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border-radius: 0.5vw;
    margin-bottom: 0.6vh;
}

.loadedvideo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.thumb {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.video-wrapper {
    width: 100%;
}

.video-container {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 56.25%; /* 16:9 aspect ratio */
  background-color: #000;
  border-radius: 1vw;
  overflow: hidden;
}

.video-container video {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 1vw;
}

.custom-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 6vw;
  color: white;
  background: rgba(0, 0, 0, 0.5);
  border: 3px solid white;
  border-radius: 50%;
  padding: 1vw 1.5vw;
  cursor: pointer;
  z-index: 2;
  transition: background 0.2s ease;
}

.custom-play:hover {
  background: rgba(255, 255, 255, 0.2);
}

.video-title {
  font-size: 2vw;
  margin: 1vh 0 0.5vh;
  color: #333;
}

.video-info {
  font-size: 1.2vw;
  color: #666;
}


.popup-body {
  background-color: #ffffff;
  border-radius: 1.5vw;
  padding: 3vw;
  box-shadow: 0 0 2vw rgba(0, 0, 0, 0.3);
  max-width: 90vw;
  max-height: 85vh;
  overflow-y: auto;
  text-align: center;
  position: relative;
}

.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.5);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.popup-box {
  background: white;
  width: 60vw;
  max-height: 80vh;
  padding: 2vh 2vw;
  border-radius: 1vw;
  overflow-y: auto;
}

.popup-content {
  text-align: center;
}

.popup-content img.popup-image {
  max-width: 100%;
  max-height: 40vh;
  border-radius: 0.5vw;
  margin-bottom: 2vh;
}

.popup-footer {
  text-align: right;
  margin-top: 2vh;
}


.popup-text {
  font-size: 2.3vw;
  color: #222;
  margin: 2vh 0;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.5;
}

@media (max-width: 768px) {
    .sideleft,
    .sideright {
        width: 2%;
    }

    .container {
        width: 96%;
    }

    .titlename {
        margin: 0;
        font-size: 5vw;          /* 20px ≈ 5vw on a 400px-wide phone */
        font-weight: bold;
        display: flex;
        flex-direction: row;     /* horizontal layout */
        align-items: center;
        white-space: nowrap;
    }

    .titledes {
        margin: 0;
        color: darkred;
        font-size: 1.5vw;          /* 3px ≈ 1vw */
        font-weight: bold;
        transform: scaleX(1.5); 
        display: inline-block;
    }

    .logo {
        margin-left: 1%;
        margin-top: 2vh;
        width: 7vw;
        align-items: center;
    }

    .logoimage {
      max-width: 100%;
      height: auto;
      display: block;
    }

    .middlebar {
        margin-left: 25%;
        max-width: 50vw;
    }

    .announcement-box {
        background-color: #ffdcdc;
        border-right: 0.8vw solid #f31212; /* 0.3vw already good */
        padding: 1vh 4vw;                  /* 1.5vw → 4vw for better spacing */
        margin-left: 5%;
        margin-top: 2vh;
        font-size: 2.5vw;                  /* 10px → 2.5vw */
        color: #333;
        border-radius: 1.3vw;              /* 0.5vw → 1.3vw for roundness */
        box-shadow: 0 0 0.8vw rgba(0, 0, 0, 0.05);
        max-width: 100vw;
    }

    .adask {
        color: darkblue;
        margin-top: 2vh;
        font-size: 4vw;        /* 20px → 5vw */
        font-weight: bold;
    }

    .sms {
        margin-top: 0vh;
        margin-left: 5vw;
    }

    .menulist {
        padding-left: 0;
        margin-left: 0;
        margin-right: 0;
        color: white;
        font-size: 4vw;         /* 20px → 5vw */
        display: flex;
        list-style: none;
        gap: 0;
        border-top: 0.5vw solid red;
        border-bottom: 0.5vw solid red;
        border-left: 0.5vw solid red;
    }

    .menulist li {
        white-space: nowrap;
        display: flex;
        justify-content: center;
        padding: 2vh 4vw;       /* 15px → ≈ 4vw/4vh mix */
        border-left: 0.5vw solid red;
        border-right: 0.5vw solid red;
    }

    .newvideo {
        width: 100%;
        border-collapse: collapse;
        margin: 2vh 0;
        table-layout: fixed;
    }

    .stats {
        width: 100%;
        border: 0.3vw solid #ccc;
        padding: 2vh;
        margin: 2vh 0;
        margin-left: 0;
        font-family: Arial, sans-serif;
        background-color: #f9f9f9;
        border-radius: 2vw;
    }

    .videoblock .title {
        font-weight: bold;
        font-size: 5vw;         /* 20px → 5vw */
        margin: 1vh 0 0.5vh;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    .videoblock .date,
    .videoblock .views {
        font-size: 4vw;         /* 15px → 4vw */
        color: #666;
        margin: 0.2vh 0;
    }

    .video-wrapper .title {
        font-weight: bold;
        font-size: 5vw;
        margin: 1vh 0 0.5vh;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    .video-wrapper .date,
    .video-wrapper .views {
        font-size: 4vw;
        color: #666;
        margin: 0.2vh 0;
    }

    .photoblock .title {
        font-weight: bold;
        font-size: 5vw;
        margin: 1vh 0 0.5vh;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    .photoblock .date,
    .photoblock .views {
        font-size: 4vw;
        color: #666;
        margin: 0.2vh 0;
    }

    .popup-box {
        width: 90vw;
        padding: 3vh 4vw;
    }

    .popup-content img.popup-image {
        max-height: 30vh;
    }
}