/* 메인 ABOUT(#about) 모션 — 섹션에 class "sec scm scm-about" (원래 "sec" 뒤에 scm scm-about 추가) */
#about.scm-about { overflow: clip; background: radial-gradient(ellipse 70% 60% at 78% 38%, #fbf8f1 0%, #f5f5f5 62%); }
.scm-about .sec-inner { position: relative; z-index: 2; }
.scm-about .sec-h2 { position: relative; }
.scm-about .sec-rule { transform-origin: 0 50%; }
/* 사진 칸: 3D 틸트·콜라주가 보이게 overflow 풀고 원근 */
.scm-about .about-img { overflow: visible; transform-style: preserve-3d; z-index: 1; }
.scm-about .about-img > img { position: relative; z-index: 1; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .22)); }
.scm-about .scm-sweep { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: 0; z-index: 2;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 244, 222, .75) 50%, transparent 62%) no-repeat; background-size: 250% 100%; }
/* 콜라주: 퍼시스 공식 공간 사진(사이트 제품정보에 이미 쓰는 fursys-imgs) 4장 — 사진 칸 안 절대위치라 레이아웃 안 밀림(CLS 0) */
.scm-stack { position: absolute; inset: 0; pointer-events: none; transform-style: preserve-3d; z-index: 3; }
.scm-card { position: absolute; left: var(--x); top: var(--y); width: var(--w); aspect-ratio: 4 / 3; overflow: hidden; border-radius: 2px;
  background: #e9e5dc; outline: 4px solid #fff; outline-offset: -1px;
  box-shadow: 0 30px 50px -16px rgba(0, 0, 0, .45), 0 6px 14px rgba(0, 0, 0, .18); opacity: 0; will-change: transform, opacity; }
.scm-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.scm-card.c1 { --x: 60%; --y: 1%; --w: 38%; }
.scm-card.c2 { --x: 1%; --y: 70%; --w: 34%; }
.scm-card.c3 { --x: 66%; --y: 72%; --w: 31%; }
.scm-card.c4 { --x: 3%; --y: 4%; --w: 27%; }
/* OUR SERVICE: 위 선은 캔버스가 그림, 점은 금빛 */
.scm-about .about-services { border-top-color: transparent; position: relative; }
.scm-about .about-services-list li { position: relative; }
.scm-about .scm-dot { position: absolute; left: 1px; top: .78em; width: 6px; height: 6px; margin: -3px 0 0 -1px; border-radius: 50%; pointer-events: none; opacity: 0;
  background: #e8c890; box-shadow: 0 0 10px 3px rgba(232, 200, 144, .85); }
@media (max-width: 900px) {
  .scm-card.c1 { --x: 62%; --y: 2%; --w: 35%; }
  .scm-card.c2 { --x: 2%; --y: 73%; --w: 34%; }
  .scm-card.c3 { --x: 66%; --y: 74%; --w: 31%; }
  .scm-card.c4 { --x: 3%; --y: 3%; --w: 30%; }
  .scm-card { outline-width: 3px; }
}
/* JS 준비 전 깜빡임 방지(html.scm-js 는 head 에서 붙이고 3초 뒤 안전 해제) */
html.scm-js .scm-about :is(.sec-eyebrow, .about-tagline, .sec-h2, .about-text > p, .about-services-title, .about-services-list li) { opacity: 0; }
html.scm-js .scm-about .about-img > img { clip-path: inset(0 100% 0 0); }
@media (prefers-reduced-motion: reduce) {
  html.scm-js .scm-about :is(.sec-eyebrow, .about-tagline, .sec-h2, .about-text > p, .about-services-title, .about-services-list li) { opacity: 1; }
  html.scm-js .scm-about .about-img > img { clip-path: none; }
  .scm-card { opacity: 1; }
  .scm-about .about-services { border-top-color: var(--line); }
}