/* templates/modules/vision_v1/view.css — 비전 소개(어두운 바탕), 2026-10-20 */
.sc-vision{margin-bottom:28px;border-radius:30px;padding:clamp(24px,4vw,56px);background:#0c0c0d;color:#fff;overflow:clip;position:relative}
.sc-vision::before{content:"";position:absolute;top:-80px;left:38%;width:340px;height:240px;background:radial-gradient(closest-side,rgba(20,120,40,.45),transparent);filter:blur(30px);pointer-events:none}
.sc-vision .vs-head,.sc-vision .vs-lead,.sc-vision .vs-body{position:relative}
.vs-pill{display:inline-block;padding:7px 16px;border:1px solid rgba(255,255,255,.28);border-radius:999px;font-size:14px;color:#e6e6e6;background:rgba(255,255,255,.06)}
.sc-vision h2{margin:18px 0 14px;font-size:clamp(34px,5.4vw,78px);font-weight:600;letter-spacing:-.04em;line-height:1.05;color:#fff;white-space:pre-line;text-transform:none}
.vs-sub{margin:0;max-width:34em;font-size:clamp(13px,1.05vw,16px);line-height:1.7;color:#cfcfcf}
.vs-lead{margin:clamp(30px,5vw,64px) 0 26px;font-size:clamp(22px,2.6vw,38px);font-weight:900;letter-spacing:-.05em;color:#d2a994}
.vs-body{display:grid;grid-template-columns:1.7fr 1fr;gap:clamp(14px,2vw,28px);align-items:start}
.vs-photo{border-radius:26px;overflow:hidden;position:relative;min-height:300px;background:#1c2c47}
.vs-photo .slot{position:absolute;inset:0;background-size:cover;background-position:center}
.vs-cards{display:flex;flex-direction:column;gap:clamp(12px,1.6vw,22px)}
.vs-card{flex:none;background:#202020;border-radius:24px;padding:clamp(18px,2.2vw,30px)}
.vs-num{font-size:clamp(28px,3vw,44px);font-weight:300;line-height:1;color:#fff}
.vs-ct{margin:clamp(14px,2vw,28px) 0 8px;font-size:clamp(20px,2vw,30px);font-weight:700;letter-spacing:-.02em;color:#e4c8b8}
.vs-cd{margin:0;font-size:clamp(13px,1vw,15.5px);line-height:1.7;color:#f0f0f0;white-space:pre-line}
/* 모바일: 열이 내용 너비로 늘어나(1fr=auto 최소폭) 사진이 화면 밖으로 밀리던 문제 — minmax(0,1fr)로 고정하고 사진 높이는 너비에 맞춰 직접 지정(2026-10-22) */
.vs-body>*{min-width:0}
@media(max-width:860px){.vs-body{grid-template-columns:minmax(0,1fr)}.vs-photo{min-height:0;height:clamp(200px,56vw,360px);aspect-ratio:auto}}
/* 데스크톱 방문자 화면(2026-10-28): 사진은 제자리에 고정(가로로 긴 16:9 비율이라 카드 글이 길어도 안 늘어남)되고 오른쪽 카드만 스크롤하면서 서로 위에 덮이며 쌓임(참고 사이트와 같은 방식).
   편집 모드(.vs-edit)는 글을 고치기 편하게 일반 배치. 겹침이 끝나면(마지막 카드가 올라오면) 사진도 같이 풀려서 다음 모듈로 넘어감. */
@media(min-width:861px){
  /* 고정 위치(사진·첫 카드가 멈추는 높이) — 화면 위에 떠 있는 상단 메뉴(약 82px)에 가리지 않게 그 아래로(2026-10-28) */
  .sc-vision{--vs-top:100px}
  /* 고정 위치에 닿은 카드(.is-stuck, 아래 view.php 스크립트가 켬)는 위쪽이 흐린 유리처럼 회색으로 번지고 아래는 어두운 단색 — 아직 안 올라온 카드는 단색 그대로 */
  .sc-vision:not(.vs-edit) .vs-card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s ease;
    background:linear-gradient(180deg,rgba(150,150,150,.62) 0,rgba(105,105,105,.5) 28%,rgba(32,32,32,.96) 62%,#202020 100%);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px)}
  .sc-vision:not(.vs-edit) .vs-card.is-stuck{background:transparent}
  .sc-vision:not(.vs-edit) .vs-card.is-stuck::before{opacity:1}
  .sc-vision:not(.vs-edit) .vs-card>*{position:relative;z-index:1}
  .sc-vision:not(.vs-edit) .vs-photo{position:sticky;top:var(--vs-top);align-self:start;min-height:0;height:auto;aspect-ratio:1190/670}
  .sc-vision:not(.vs-edit) .vs-card{position:sticky;top:calc(var(--vs-top) + var(--vs-i,0) * 18px);box-shadow:0 -10px 24px rgba(0,0,0,.35)}
  .sc-vision:not(.vs-edit) .vs-card:nth-child(1){--vs-i:0}
  .sc-vision:not(.vs-edit) .vs-card:nth-child(2){--vs-i:1}
  .sc-vision:not(.vs-edit) .vs-card:nth-child(3){--vs-i:2}
}
.sc-vision.vs-edit .vs-photo{min-height:300px}