/* 콘텐츠클리닉 3차 시안 · 3F 레퍼런스 (담당 G)
   글자 크기는 공통 6단계 클래스만. 테두리 상자 없음(흰 면 + 그림자 1종, 선). 그림은 원래 비율 그대로. */

/* ---------------- 첫 화면: 자료실 장면 + 이름표 ---------------- */
.rf-hero { padding-block: var(--cc-s7); }
.rf-hero-art {
  position: relative; margin: 0; container-type: inline-size;
  aspect-ratio: 16 / 9; border-radius: var(--cc-r-card); overflow: hidden;
  background: #FBEFE0; box-shadow: var(--cc-shadow);
}
.rf-hero-img { width: 100%; height: 100%; }
.rf-plate {
  position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h);
  display: flex; align-items: center; justify-content: center;
  color: var(--cc-white); text-align: center; white-space: nowrap; pointer-events: none; z-index: 2;
}
.rf-plate-name { display: none; }
.rf-plate-no { box-shadow: 0 0 0 2px var(--cc-white); }
@container (min-width: 1080px) {
  .rf-plate-name { display: block; }
  .rf-plate-no { display: none; }
}
.rf-cubby {
  position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); z-index: 1;
  border-radius: var(--cc-r-control);
  transition: background-color var(--cc-dur) var(--cc-ease);
}
.rf-cubby:hover { background: rgba(255, 255, 255, 0.22); }
.rf-cubby:focus-visible { outline: 3px solid var(--cc-navy); outline-offset: -3px; }

/* ---------------- 서비스 탭(머리줄 아래 붙음) ---------------- */
.rf-nav {
  position: sticky; top: var(--cc-header-h); z-index: 90;
  background: var(--cc-white);
}
.rf-tab { text-decoration: none; }
.rf-tab[aria-current="true"] { color: var(--cc-navy); }
.rf-tab[aria-current="true"]::after {
  content: ""; position: absolute; left: var(--cc-s4); right: var(--cc-s4); bottom: -1px; height: 3px;
  border-radius: 3px 3px 0 0; background: var(--rf-c, var(--cc-navy));
}
.rf-tab[data-svc="renewal"] { --rf-c: var(--cc-dept-01); }
.rf-tab[data-svc="brand-film"] { --rf-c: var(--cc-dept-02); }
.rf-tab[data-svc="sns-ad"] { --rf-c: var(--cc-dept-03); }
.rf-tab[data-svc="sns-ops"] { --rf-c: var(--cc-dept-04); }

/* ---------------- 업종 칩 ---------------- */
.rf-filter { padding-block: var(--cc-s5); }

/* ---------------- 서비스 묶음 ---------------- */
.rf-group[data-svc="renewal"] { --rf-c: var(--cc-dept-01); }
.rf-group[data-svc="brand-film"] { --rf-c: var(--cc-dept-02); }
.rf-group[data-svc="sns-ad"] { --rf-c: var(--cc-dept-03); }
.rf-group[data-svc="sns-ops"] { --rf-c: var(--cc-dept-04); }
.rf-head::before {          /* 서비스 색 막대(구역 폭 전체) */
  content: ""; justify-self: stretch; height: 4px; border-radius: 2px; background: var(--rf-c);
  margin-bottom: var(--cc-s5);
}
.rf-head .link { margin-top: var(--cc-s1); }

.rf-body { display: grid; gap: var(--cc-s7); }
.rf-row { display: flex; justify-content: center; align-items: flex-start; }
.rf-row--feature { justify-content: space-between; }
.rf-lead, .rf-side { flex: none; min-width: 0; }
.rf-side { display: grid; align-content: start; }
.rf-row > .rf-card { flex: none; }
@media (max-width: 1023px) { .rf-body { gap: var(--cc-s6); } }

.rf-empty { max-width: 640px; margin-inline: auto; }

/* 03: 큰 휴대폰 + 장면 3컷(큰 휴대폰 틀의 세로 가운데) */
.rf-row--scenes { align-items: center; }
.rf-row--scenes > .rf-scene { margin-bottom: var(--rf-cap-h, 0px); }
.rf-sceneset { display: grid; }

/* 04 작은 묶음 이름: 가운데, 양옆 선 */
.rf-sub { display: flex; align-items: center; gap: var(--cc-s4); text-align: center; }
.rf-sub::before, .rf-sub::after { content: ""; flex: 1; height: 1px; background: var(--cc-line); }
.rf-sub:not(:first-child) { margin-top: var(--cc-s5); }

/* ---------------- 카드 ---------------- */
.rf-card { display: block; min-width: 0; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.rf-media { transition: transform 300ms var(--cc-ease); }
@media (hover: hover) { .rf-card:hover .rf-media { transform: translateY(-4px); } }
.rf-card:focus-visible { outline: none; }
.rf-card:focus-visible .rf-media { outline: 3px solid var(--cc-navy); outline-offset: 4px; border-radius: var(--cc-r-card); }
.rf-cap { display: grid; justify-items: center; gap: var(--cc-s1); margin-top: var(--cc-s3); text-align: center; }

/* 사이트: 마우스를 올리면 둘째 화면으로 천천히 바뀜 */
.frame-screen > img.rf-alt { position: absolute; inset: 0; opacity: 0; transition: opacity 600ms var(--cc-ease); }
@media (hover: hover) { .rf-card:hover .rf-alt.is-ready { opacity: 1; } }

/* 가로 영상 16:9 */
.rf-wide { aspect-ratio: 16 / 9; border-radius: var(--cc-r-card); overflow: hidden; background: var(--cc-navy-deep); box-shadow: var(--cc-shadow); }
.rf-wide > video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* 웹툰·카드뉴스: 원래 비율 그대로 종이 위에 */
.rf-paper { padding: var(--cc-s3); border-radius: var(--cc-r-control); background: var(--cc-paper); }
.rf-paper > img { width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 599px) { .rf-paper { padding: var(--cc-s2); } }

/* ---------------- 상세 창 ---------------- */
.rf-m-media { display: grid; justify-items: center; }
.rf-m-info { display: grid; justify-items: center; gap: var(--cc-s1); margin-top: var(--cc-s5); text-align: center; }
.rf-m-foot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--cc-s4); width: 100%; }
.rf-m-prev, .rf-m-next { gap: var(--cc-s1); }
.rf-m-prev { justify-self: start; }
.rf-m-next { justify-self: end; }

.rf-m-site { display: grid; grid-template-columns: minmax(0, 1.661fr) minmax(0, 0.58fr); gap: var(--cc-s5); align-items: start; width: 100%; }
.rf-m-dots { display: flex; justify-content: center; gap: var(--cc-s2); margin-top: var(--cc-s3); }
.rf-dot {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; background: none;
}
.rf-dot::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--cc-navy-08); transition: background-color var(--cc-dur) var(--cc-ease); }
.rf-dot[aria-pressed="true"]::before { background: var(--cc-navy); }
.rf-m-alt.is-ready { opacity: 1; }
.frame-phone .frame-screen > img.rf-top { object-position: top center; }

.rf-m-v { --phone-w: min(300px, calc((100dvh - 400px) / 1.725)); }
.rf-m-h { width: 100%; }
.rf-m-paper { width: min(100%, calc((100dvh - 380px) * var(--ar))); }

@media (max-width: 767px) {
  .rf-m-site { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .rf-m-phone { width: 56%; }
  .rf-m-lap { width: 100%; }
  .rf-m-v { --phone-w: min(280px, calc((100dvh - 360px) / 1.725)); }
  .rf-m-foot { grid-template-columns: 1fr 1fr; }
  .rf-m-foot .btn { grid-column: 1 / -1; grid-row: 1; width: 100%; }
}
.rf-hero .sec-head > .t-l { text-wrap: balance; }