body { font-family: Arial, sans-serif; background: #0f0f0f; color: #fff; margin: 0; padding: 0; }
header { padding: 16px 24px; background: #0f0f0f; border-bottom: 1px solid #222; position: sticky; top: 0; z-index: 100; }
.logo { font-size: 2.1rem; font-weight: bold; background: linear-gradient(90deg, #ff0000, #ff4d4d); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin: 0; display: inline-block; }
#search-container { position: relative; width: 100%; max-width: 620px; margin: 16px auto 0; }
#search { width: 100%; padding: 12px 20px; font-size: 17px; border: none; border-radius: 999px; background: #222; color: white; }
#results, #trending { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; max-width: 1400px; margin: 32px auto; padding: 0 20px; }
.video-card { background: #181818; border-radius: 12px; overflow: hidden; cursor: pointer; transition: all 0.2s; }
.video-card:hover { transform: scale(1.05); box-shadow: 0 16px 32px rgba(0,0,0,0.55); }
.thumbnail { width: 100%; aspect-ratio: 16/9; object-fit: cover; transition: transform 0.3s; }
.video-card:hover .thumbnail { transform: scale(1.1); }
.details { padding: 14px 16px; }
h3 { margin: 0 0 8px; font-size: 1.05em; line-height: 1.38; }
.channel { color: #aaaaaa; font-size: 0.92em; }
#modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.94); z-index: 1000; justify-content: center; align-items: center; flex-direction: column; }
iframe { width: 92%; max-width: 1180px; height: 70vh; border: none; border-radius: 16px; }
#backBtn { margin-top: 20px; padding: 10px 20px; background: #ff0000; border: none; color: white; cursor: pointer; border-radius: 999px; font-size: 1rem; }
.section-title { max-width: 1400px; margin: 40px auto 16px; padding: 0 24px; font-size: 1.5rem; }
/* ==================================================
   모바일 환경에서 유튜브 PC 웹 스타일 UI 강제 적용 트릭
   ================================================== */
@media (max-width: 768px) {
  #modal {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* 화면 밖으로 삐져나가는 빈 공간 숨김 */
  }

  iframe {
    /* 1. 유튜브가 PC 모니터라고 착각하도록 강제로 넓은 고정 픽셀을 줍니다. */
    width: 860px !important;
    height: 484px !important; /* 16:9 비율 유지 */
    max-width: none !important; /* 기존 1180px 제한 무력화 */

    /* 2. 실제 좁은 모바일 화면 폭(약 380px)에 들어갈 수 있도록 절반 크기로 축소합니다. */
    transform: scale(0.45);
    transform-origin: center center;
    border-radius: 0;
  }

  /* iframe이 차지하는 보이지 않는 여백 때문에 버튼이 밀리는 현상 방지 */
  #backBtn {
    position: absolute;
    bottom: 50px;
    z-index: 1001;
  }
}