/* 1gram.tv — A안 「시그널 핑크」 다크 테마 (2026-08-22 시안 확정).
 * IE11 호환: CSS Grid·custom property 미사용, flexbox(-ms- 프리픽스 병기)만. */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: #0e1014; color: #eceef1;
  font-family: -apple-system, BlinkMacSystemFont, "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  font-size: 15px; line-height: 1.45;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; border: 0; display: block; }

/* 헤더 */
.site-header { background: #12151b; }
.header-inner {
  max-width: 1200px; margin: 0 auto; padding: 16px;
  display: -ms-flexbox; display: flex;
  -ms-flex-align: center; align-items: center;
  -ms-flex-pack: justify; justify-content: space-between;
}
.logo { font-family: Montserrat, sans-serif; font-size: 24px; font-weight: 800; letter-spacing: -0.5px; }
.logo-accent { color: #f13697; }
.tagline { display: none; color: #98a0ab; font-size: 13px; margin-left: 14px; }
@media (min-width: 700px) { .tagline { display: inline; } }
.search-form { display: -ms-flexbox; display: flex; }
.search-form input {
  width: 190px; padding: 8px 12px; border: 1px solid #2a3140; border-radius: 4px 0 0 4px;
  background: #0e1014; color: #eceef1; font-size: 14px; outline: none;
}
.search-form input:focus { border-color: #f13697; }
.search-form button {
  padding: 8px 16px; border: 0; border-radius: 0 4px 4px 0;
  background: #f13697; color: #fff; font-size: 14px; font-weight: 700; cursor: pointer;
}
/* 시그니처: 그램 저울 눈금 스트립 (repeating-linear-gradient — IE10+ 지원) */
.ruler {
  height: 10px; border-bottom: 1px solid #2a3140;
  background: repeating-linear-gradient(to right, #2a3140 0, #2a3140 1px, transparent 1px, transparent 9px);
  background-position: 0 bottom; background-size: 9px 6px; background-repeat: repeat-x;
}
.cat-nav {
  max-width: 1200px; margin: 0 auto; padding: 0 8px;
  overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch;
}
.cat-link {
  display: inline-block; padding: 12px 13px; font-size: 15px; color: #98a0ab;
  border-bottom: 2px solid transparent;
}
.cat-link:hover { color: #eceef1; }
.cat-link.is-active { color: #fff; border-bottom-color: #f13697; font-weight: 700; }

/* 플레이어 */
.player-zone { max-width: 1200px; margin: 0 auto; }
.player-zone .player-frame { position: relative; padding-bottom: 56.25%; height: 0; background: #000; }
.player-zone .player-frame iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
.player-zone.is-floating .player-frame {
  position: fixed; right: 16px; bottom: 16px; z-index: 100;
  width: 320px; height: 180px; padding-bottom: 0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
}
.player-close {
  display: none; position: absolute; top: -28px; right: 0; z-index: 101;
  padding: 4px 10px; border: 0; background: #23272f; color: #e8eaed; font-size: 12px; cursor: pointer;
}
.player-zone.is-floating .player-close { display: block; }

/* 영상 그리드 — flexbox + % 폭 (IE11) */
.main { max-width: 1200px; margin: 18px auto; padding: 0 8px; }
.video-grid { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.video-card { position: relative; width: 100%; padding: 8px; }
@media (min-width: 600px) { .video-card { width: 50%; } }
@media (min-width: 900px) { .video-card { width: 33.333%; } }
@media (min-width: 1200px) { .video-card { width: 25%; } }
.video-card .rank-badge {
  position: absolute; top: 14px; left: 14px; z-index: 1;
  min-width: 26px; padding: 2px 6px; text-align: center;
  font-size: 13px; font-weight: 700; color: #fff;
  background: #f13697; border-radius: 0 0 8px 0;
}
.video-card .thumb { display: block; overflow: hidden; border-radius: 10px; background: #171b22; }
.video-card img { width: 100%; }
.video-card:hover .title { color: #f13697; }
.video-card .meta { display: block; padding: 9px 2px 0; }
.video-card .title {
  display: block; font-size: 15px; font-weight: 600; color: #eceef1;
  max-height: 2.9em; overflow: hidden; /* IE11용 클램프 폴백 */
}
.video-card .channel { display: block; margin-top: 3px; font-size: 13px; color: #98a0ab; }
.empty, .list-status { width: 100%; padding: 30px 0; text-align: center; color: #98a0ab; }

/* 푸터 */
.site-footer { padding: 26px 16px 44px; text-align: center; color: #5c6470; font-size: 13px; }

@media (max-width: 480px) {
  .search-form input { width: 110px; }
  .tagline { display: none; }
}