/* 영상 페이지(tutorials.html) — styles.css 의 옛 영상 카드 위에 B 디자인(theme.css 토큰)으로 덧붙인다 */

/* ---------- 검색 + 정렬 ---------- */
.video-search { display: flex; gap: 8px; align-items: stretch; flex-wrap: nowrap; flex-direction: row; }
.video-search #searchInput { flex: 1; min-width: 0; }
#videoSort {
  flex: none; padding: 0 12px; border-radius: 8px; font: inherit; font-size: .88rem; cursor: pointer;
  background: var(--b-raised); color: var(--b-text); border: 1px solid var(--b-border);
}
#videoSort:focus-visible { outline: none; border-color: var(--b-accent); }

/* ---------- 태그 묶음 ---------- */
/* 묶음마다 줄을 바꾸지 않고 한 흐름으로 잇는다. 묶음 이름은 태그 사이에 작은 글씨로만 끼운다 */
.tag-groups { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tag-group { display: contents; }
.tag-group-name { flex: none; margin-left: 10px; font-size: .74rem; font-weight: 700; color: var(--b-faint); }
.tag-group:first-child .tag-group-name { margin-left: 0; }
/* 접힌 상태: 시리즈·나눔 자료·대상·길이 묶음은 숨긴다 */
.tag-groups.is-folded .tag-group[data-extra] { display: none; }

/* 태그 더 보기·접기 단추는 모든 화면에서 보인다(styles.css 는 휴대폰에서만 보였다) */
.tag-toggle {
  display: inline-block; width: auto; margin-top: 10px; padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--b-border); background: transparent; color: var(--b-muted);
  font: inherit; font-size: .82rem; cursor: pointer;
}
.tag-toggle:hover, .tag-toggle:focus-visible { color: var(--b-text); border-color: var(--b-accent); outline: none; }
.tag-toggle b { color: var(--b-accent); font-weight: 700; }

/* ---------- 카드 ---------- */
.video-card .vc-open { display: block; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.video-card .vc-open:focus-visible { outline: 2px solid var(--b-accent); outline-offset: -2px; }
.video-card .vc-thumb { position: relative; display: block; }
.video-card .vc-thumb::after {   /* 재생 표시 */
  content: '▶'; position: absolute; inset: 0; margin: auto; width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; padding-left: 4px; box-sizing: border-box;
  background: rgba(17, 18, 20, .72); color: #fff; font-size: 1.2rem; opacity: 0; transition: opacity .2s;
}
.video-card:hover .vc-thumb::after, .video-card .vc-thumb:focus-visible::after { opacity: 1; }
.video-card h3 .vc-open { display: inline; color: inherit; text-decoration: none; }   /* 두 줄 자르기(h3)가 그대로 먹게 */
.video-card h3 .vc-open:hover { text-decoration: underline; }
.vc-date { padding: 0 1rem; margin-top: -0.5rem; font-family: var(--b-mono); font-size: .74rem; color: var(--b-faint); }

/* 카드 안 태그는 누르면 그 태그로 거른다 */
.video-tags button {
  padding: 0.3rem 0.8rem; border: 0; border-radius: 20px; font: inherit; font-size: 0.8rem; height: 24px; line-height: 1;
  display: inline-flex; align-items: center; white-space: nowrap; cursor: pointer; color: #fff;
}
.video-tags button:hover, .video-tags button:focus-visible { filter: brightness(1.15); outline: 2px solid rgba(255, 255, 255, .5); outline-offset: 1px; }
.video-tags button[data-category="난이도"] { background-color: var(--tag-level-bg); }
.video-tags button[data-category="에디션"] { background-color: var(--tag-edition-bg); }
.video-tags button[data-category="시리즈"] { background-color: var(--tag-series-bg); }
.video-tags button[data-category="주제"] { background-color: var(--tag-topic-bg); }
.video-tags button[data-category="공유"] { background-color: var(--tag-share-yellow); color: var(--b-bg); }
.video-tags button[data-category="가이드"] { background-color: var(--tag-guide-gray); color: var(--b-bg); }
.video-tags button[data-category="길이"] { background-color: var(--tag-length-bg); }
.video-tags button:not([data-category]), .video-tags button[data-category=""] { background: var(--b-raised); }

/* 카드 아래 단추: 보기·요약(창) | 유튜브 | 링크 복사 */
.video-card .play-btn { border: 0; font: inherit; cursor: pointer; }
.video-card .yt-btn {
  display: flex; align-items: center; justify-content: center; width: 50px; flex: none;
  background: var(--bg-tertiary); color: var(--b-youtube); border-left: 1px solid var(--bg-border); text-decoration: none;
}
.video-card .yt-btn:hover { background: var(--bg-hover); }

/* ---------- 영상 창(재생 + 요약) ---------- */
body.vm-open { overflow: hidden; }
.vm {
  position: fixed; inset: 0; z-index: 1000; display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 16px; overflow-y: auto; background: rgba(0, 0, 0, .72);
}
.vm-box {
  width: 100%; max-width: 900px; border-radius: 14px; overflow: hidden;
  background: var(--b-surface); border: 1px solid var(--b-border); box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
.vm-head { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--b-border); }
.vm-head h2 { flex: 1; margin: 0; font-size: 1.1rem; line-height: 1.45; color: var(--b-text); }
.vm-close {
  flex: none; width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--b-border); cursor: pointer;
  background: var(--b-raised); color: var(--b-text); font-size: 1.3rem; line-height: 1;
}
.vm-close:hover, .vm-close:focus-visible { border-color: var(--b-accent); outline: none; }
.vm-player { position: relative; aspect-ratio: 16 / 9; background: #000; }
.vm-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 18px; border-bottom: 1px solid var(--b-border); }
.vm-actions a, .vm-actions button {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: .84rem; text-decoration: none; background: var(--b-raised); color: var(--b-text); border: 1px solid var(--b-border);
}
.vm-actions a:hover, .vm-actions button:hover { border-color: var(--b-accent); }
.vm-actions .fa-youtube { color: var(--b-youtube); }
.vm-date { margin-left: auto; font-family: var(--b-mono); font-size: .78rem; color: var(--b-faint); }
.vm-body { padding: 8px 22px 26px; color: var(--b-text); line-height: 1.75; font-size: .95rem; }
.vm-body .loading, .vm-body .vm-note { color: var(--b-muted); }
.vm-body h2 { margin: 26px 0 10px; padding-bottom: 6px; font-size: 1.08rem; border-bottom: 1px solid var(--b-border); }
.vm-body h3 { margin: 18px 0 8px; font-size: 1rem; }
.vm-body p { margin: 8px 0; }
.vm-body ul, .vm-body ol { margin: 8px 0; padding-left: 1.4em; }
.vm-body li { margin: 4px 0; }
.vm-body a { color: var(--b-accent); }
.vm-body code { padding: 1px 6px; border-radius: 5px; background: var(--b-raised); font-family: var(--b-mono); font-size: .86em; }
.vm-body pre { overflow-x: auto; padding: 12px 14px; border-radius: 8px; background: var(--b-bg); border: 1px solid var(--b-border); }
.vm-body pre code { padding: 0; background: none; }
.vm-body img { max-width: 100%; height: auto; border-radius: 8px; }
.vm-body table { width: 100%; margin: 10px 0; border-collapse: collapse; font-size: .88rem; display: block; overflow-x: auto; }
.vm-body th, .vm-body td { padding: 6px 10px; border: 1px solid var(--b-border); text-align: left; vertical-align: top; }
.vm-body th { background: var(--b-raised); }
.vm-body blockquote { margin: 10px 0; padding: 6px 14px; border-left: 3px solid var(--b-accent); color: var(--b-muted); }

@media (max-width: 768px) {
  .vm { padding: 0; }
  .vm-box { min-height: 100%; border-radius: 0; border: 0; }
  .vm-body { padding: 4px 16px 24px; }
}