/* signature.css — SIGNATURE 페이지 전용 (공통부는 common.css) */

.control-panel {
  margin-top: 18px; padding: 16px; border-radius: 13px;
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow);
  display: grid; grid-template-columns: minmax(0, 1fr) 240px auto; gap: 12px; align-items: center;
}
.search-input { height: 47px; border-radius: 10px; border: 1px solid rgba(226,194,223,.7); background: rgba(255,255,255,.92); outline: none; padding: 13px 15px; font-size: 15px; font-weight: 850; color: #5b4668; font-family: inherit; }
.search-input:focus { border-color: rgba(169,101,232,.75); box-shadow: 0 0 0 4px rgba(169,101,232,.12); }
.volume-box { height: 47px; border-radius: 10px; background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,244,251,.85)); border: 1px solid rgba(236,206,232,.72); padding: 0 12px; display: flex; align-items: center; gap: 10px; color: #b05cc9; font-size: 13px; font-weight: 950; }
.volume-box input { width: 100%; min-width: 80px; accent-color: var(--pink); }
.members-link { height: 47px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; color: #fff; font-weight: 950; background: linear-gradient(135deg, #ff7eb7, #a965e8); box-shadow: 0 8px 20px rgba(177, 92, 201, .20); }
.members-link:hover { transform: translateY(-1px); }

.range-tabs { margin-top: 14px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.range-btn { min-height: 42px; border: 1px solid rgba(226,194,223,.68); border-radius: 9px; background: rgba(255,255,255,.82); color: #765a88; font-family: inherit; font-weight: 950; cursor: pointer; transition: .14s ease; }
.range-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(150,94,171,.10); }
.range-btn.active { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--pink), var(--purple)); box-shadow: 0 10px 22px rgba(176,97,209,.20); }

.section { margin-top: 26px; }
.section-title { position: relative; width: 100%; min-height: 50px; margin-bottom: 14px; display: flex; align-items: center; justify-content: flex-start; }
.section-name { width: min(280px, 100%); min-height: 50px; padding: 11px 13px; border-radius: 10px; display: grid; place-items: center; text-align: center; background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,241,249,.88)); border: 1px solid rgba(226,194,223,.68); box-shadow: 0 10px 24px rgba(150,94,171,.09); color: #8f4eb2; font-size: 18px; font-weight: 950; white-space: nowrap; }
.section-count { position: absolute; right: 0; top: 50%; transform: translateY(-50%); min-width: 70px; padding: 7px 10px; border-radius: 8px; text-align: center; background: rgba(255,255,255,.82); border: 1px solid rgba(226,194,223,.58); color: #8a4dae; font-size: 11px; font-weight: 950; white-space: nowrap; box-shadow: 0 8px 18px rgba(150,94,171,.08); }

.grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.sig-card { min-width: 0; border-radius: 12px; background: rgba(255,255,255,.80); border: 1px solid rgba(226,194,223,.58); box-shadow: 0 12px 30px rgba(150,94,171,.10); padding: 8px; cursor: pointer; overflow: hidden; transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease; }
.sig-card:hover { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(150,94,171,.16); border-color: rgba(255,126,183,.42); }
.sig-card.playing { border-color: rgba(255,126,183,.78); box-shadow: 0 0 0 3px rgba(255,126,183,.18), 0 16px 32px rgba(150,94,171,.16); }
.sig-card.loading { border-color: rgba(169,101,232,.74); box-shadow: 0 0 0 3px rgba(169,101,232,.16), 0 16px 32px rgba(150,94,171,.16); }
.thumb, .no-image { width: 100%; aspect-ratio: 16 / 9; border-radius: 9px; background: linear-gradient(135deg, #ffe8f5, #efe1ff); }
.thumb { display: block; object-fit: cover; }
.no-image { display: grid; place-items: center; color: #a061bb; font-size: 13px; font-weight: 950; }
.sig-info { padding: 8px 2px 0; text-align: center; }
.sig-number { display: inline-flex; align-items: center; justify-content: center; border-radius: 7px; padding: 4px 7px; margin: 0 auto 5px; background: linear-gradient(135deg, #f7d9ff, #fff1c8); color: #8a4dae; font-size: 11px; font-weight: 950; }
.sig-name { min-height: 30px; color: #4b3659; font-size: 13px; font-weight: 950; line-height: 1.2; text-align: center; word-break: keep-all; }
.video-btn { width: 100%; margin-top: 2px; border: 1px solid rgba(226,194,223,.66); border-radius: 8px; padding: 7px 6px; cursor: pointer; background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(243,237,255,.92)); color: #8655ad; font-size: 12px; font-weight: 950; font-family: inherit; transition: .14s ease; }
.video-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(150,94,171,.12); }
.video-btn.no-video { cursor: default; color: #aaa; background: #f1edf4; box-shadow: none; }
.video-btn.no-video:hover { transform: none; }

.empty { margin-top: 24px; padding: 40px 18px; border-radius: 13px; text-align: center; background: rgba(255,255,255,.78); border: 1px solid var(--line); color: #8a7893; font-weight: 950; }

.video-modal { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; padding: 18px; background: rgba(30,20,45,.42); backdrop-filter: blur(6px); }
.video-modal.active { display: flex; }
/* max-height 는 "보이는" 뷰포트 기준이어야 한다. 모바일에서 86vh 는 주소창이 숨겨진 큰 뷰포트 기준이라
   실제 화면보다 박스가 커지고, 모달이 중앙정렬(align-items:center)이라 넘친 영상 하단이 화면 밖으로 잘린다.
   dvh(동적 뷰포트) - 모달 상하 padding(18px*2) 로 잡아 박스가 항상 화면 안에 들어가고 내부 스크롤되게 한다. */
.video-modal-box { width: min(1100px, 96vw); max-height: calc(100vh - 36px); max-height: calc(100dvh - 36px); overflow: auto; border-radius: 13px; background: #fff; border: 1px solid rgba(255,183,217,.65); box-shadow: 0 20px 55px rgba(40,30,70,.28); }
.video-modal-head { position: sticky; top: 0; z-index: 1; padding: 7px 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: rgba(255,255,255,.92); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(226,194,223,.55); }
.video-modal-title { min-width: 0; font-size: 14px; font-weight: 950; color: #4b3659; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.video-close { width: 28px; height: 28px; border: 0; border-radius: 8px; cursor: pointer; color: #fff; background: linear-gradient(135deg, var(--pink), var(--purple)); font-size: 18px; font-weight: 950; line-height: 1; }
/* 영상 영역 높이를 --maxh 로 고정(영상 종류 무관 일정) + 폭은 영상 비율대로 명시 계산.
   세로영상: 폭이 좁아져(가운데) 높이를 꽉 채움. 가로영상: 폭 100%지만 16:9라 영상이 위아래 검은 여백(letterbox)으로 들어감 — 좌우 안 잘림.
   (구글 preview 는 폭 기준으로 영상을 그리므로, 박스 폭보다 영상이 납작하면 위아래 여백이 생긴다.) */
.video-player-wrap { --maxh: 78vh; --maxh: 78dvh; position: relative; margin: 12px auto; border-radius: 10px; overflow: hidden; background: #111;
  width: min(100%, calc(var(--maxh) * var(--vw, 16) / var(--vh, 9)));
  height: var(--maxh); }
.video-frame { width: 100%; height: 100%; border: 0; display: block; }
.video-list { padding: 0 16px 16px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.video-link { min-width: 0; border: 1px solid rgba(226,194,223,.68); border-radius: 8px; padding: 9px 10px; text-align: center; cursor: pointer; background: rgba(255,246,252,.82); color: #5b4668; font-size: 12px; font-weight: 950; font-family: inherit; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.video-link.active { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--pink), var(--purple)); }

@media (max-width: 1100px) { .grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .control-panel { margin-top: 16px; padding: 11px; grid-template-columns: 1fr; gap: 8px; border-radius: 11px; }
  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .video-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .range-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .range-btn { min-height: 38px; font-size: 12px; }
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .section-name { width: 100%; font-size: 15px; }
  /* 모바일: PC와 동일한 중앙 다이얼로그, 패딩 최소화로 가로 최대 + 영상 세로 더 크게(80dvh) */
  .video-modal { padding: 10px; }
  .video-modal-box { width: calc(100vw - 20px); max-height: calc(100vh - 20px); max-height: calc(100dvh - 20px); }
  .video-player-wrap { --maxh: 80vh; --maxh: 80dvh; width: min(100%, calc(var(--maxh) * var(--vw, 16) / var(--vh, 9))); }
  .video-list { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px; }
}
@media (max-width: 460px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }