/* 콘텐츠클리닉 3차 · p-svc-sns-ops.css — SNS 운영 영상 "한 달이 미리 채워져요"(한 달 캘린더 + 휴대폰 틀 1개) (담당 F3)
   공통 틀은 p-service.css. 앞머리 op-. 글자 크기는 t-* 클래스만(여기서 px 글자 크기 없음).
   기본 상태 = 12칸이 모두 채워진 모습. JS가 움직임이 켜져 있을 때만 .is-live를 붙여 스크롤로 차례로 채움 */

.op-making { display: grid; gap: var(--cc-s6); align-items: center; justify-items: center; }
@media (min-width: 1024px) {
  .op-making { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--cc-s8); }
}

/* ---- 캘린더 ---- */
.op-cal { width: 100%; max-width: 680px; margin-inline: auto; }
.op-week, .op-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--cc-s1); }
.op-week { margin-bottom: var(--cc-s2); text-align: center; }
.op-grid { margin: 0; padding: 0; list-style: none; }
@media (min-width: 600px) { .op-week, .op-grid { gap: var(--cc-s2); } }

.op-day {
  position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr); row-gap: var(--cc-s1);
  aspect-ratio: 3 / 4; padding: 0 var(--cc-s1) var(--cc-s1); border-radius: var(--cc-r-control);
  background: var(--cc-paper);
}
.op-day--empty { background: var(--cc-navy-04); }
.op-n { padding: var(--cc-s1) var(--cc-s1) 0; line-height: 1.2; color: var(--cc-navy-soft); font-variant-numeric: tabular-nums; }

.op-post {
  position: relative; display: block; min-height: 0; overflow: hidden; border-radius: 6px;
}
.op-post--short { background: var(--cc-navy); }
.op-post--plan { background: var(--cc-white); box-shadow: var(--cc-shadow); }
/* 썸네일은 원본 비율 그대로, 칸 높이에 맞춰 가운데 */
.op-post > img {
  position: absolute; top: 4px; bottom: 4px; left: 50%; transform: translateX(-50%);
  height: calc(100% - 8px); width: auto; max-width: none; border-radius: 3px;
}
.op-play {
  position: absolute; left: 50%; top: 50%; width: 36%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%; background: rgba(20, 33, 61, 0.62);
}
.op-play::after {
  content: ""; position: absolute; inset: 0; background: var(--cc-white);
  clip-path: polygon(38% 28%, 38% 72%, 74% 50%);
}
.op-dot { display: none; }

/* 채워지는 움직임(JS가 .is-live를 붙였을 때만) */
.op-cal.is-live .op-post { transition: opacity 360ms var(--cc-ease), transform 360ms var(--cc-ease); }
.op-cal.is-live .op-post:not(.is-in) { opacity: 0; transform: scale(0.8); }

/* ---- 휴대폰 틀 1개(볼앤테일 릴스 1편, 소리 없음) ---- */
.op-phone { --phone-w: 280px; }

/* ---- 범례 + 한 줄(가운데) ---- */
ul.op-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--cc-s3) var(--cc-s6); margin: var(--cc-s7) 0 0; padding: 0; list-style: none; }
.op-legend > li { display: inline-flex; align-items: center; gap: var(--cc-s2); }
.op-key { flex: none; position: relative; width: 22px; height: 28px; border-radius: 6px; }
.op-key--short { background: var(--cc-navy); }
.op-key--short::after { content: ""; position: absolute; inset: 0; background: var(--cc-white); clip-path: polygon(34% 34%, 34% 66%, 72% 50%); }
.op-key--plan { background: var(--cc-white); box-shadow: inset 0 0 0 1px var(--cc-line), var(--cc-shadow); }
.op-line { margin: var(--cc-s3) 0 0; }

/* ---- 모바일: 7열 유지, 썸네일 대신 작은 아이콘·점 ---- */
@media (max-width: 599px) {
  .op-day { aspect-ratio: 1 / 1.25; padding: 0 2px 2px; row-gap: 2px; }
  .op-n { padding: 2px 2px 0; }
  .op-post > img { display: none; }
  .op-post--short .op-play { width: 62%; background: none; }
  .op-dot { display: block; position: absolute; left: 50%; top: 50%; width: 38%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: var(--cc-navy-soft); }
  .op-post--plan { box-shadow: inset 0 0 0 1px var(--cc-line); }
}
@media (max-width: 599px) { .op-phone { --phone-w: 240px; } }