/* =========================================================
   시안4 홈 화면 전용 (index.html에서만 불러와요)
   - 기존 style.css와 이름이 겹치지 않게 모든 이름 앞에 v- 를 붙였어요.
   ========================================================= */
.v-sec{padding:104px 0;position:relative}
.v-cream{background:var(--cream)}
.v-dark{background:var(--ink);color:#e9e5dd}
.v-dark h2,.v-dark h3{color:#fff}
.v-head{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:end;margin-bottom:44px}
.v-label{display:inline-flex;align-items:center;gap:10px;font-size:14.5px;font-weight:800;color:var(--accent-t);margin-bottom:14px}
.v-label b{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--accent);color:#fff;font-size:13px}
.v-dark .v-label{color:#ffad85}
.v-head h2,.v-h2{font-family:var(--display);font-weight:900;font-size:clamp(30px,3.7vw,46px);line-height:1.26;letter-spacing:-.045em}
.v-head p{color:var(--sub);max-width:440px;margin-top:12px}
.v-dark .v-head p{color:#bdb7ac}
.v-head .v-side{justify-self:end}
.v-credit{font-size:13px;color:var(--mute);margin-top:14px}
.rv{opacity:0;transform:translateY(22px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.rv.on{opacity:1;transform:none}

/* ---------- 첫 화면 ---------- */
.v-hero{background:var(--cream);padding:52px 0 64px}
.v-hero-grid{display:grid;grid-template-columns:1fr 1.08fr;gap:56px;align-items:center}
.v-chip{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);padding:8px 16px;border-radius:999px;font-size:14px;font-weight:700;color:var(--ink)}
.v-chip i{width:8px;height:8px;border-radius:50%;background:var(--accent)}
.v-hero h1{font-family:var(--display);font-weight:900;font-size:clamp(36px,4.5vw,62px);line-height:1.22;letter-spacing:-.045em;margin:24px 0 20px;min-height:3.66em;color:var(--ink)}
.v-hero h1 span{display:block;transition:opacity .4s,transform .4s}
.v-hero h1.out span{opacity:0;transform:translateY(12px)}
.v-hero h1 em{font-style:normal;color:var(--accent)}
.v-lead{font-size:18px;color:var(--text);max-width:520px}
.v-cta{display:flex;gap:10px;margin-top:30px;flex-wrap:wrap}
.v-dots{display:flex;align-items:center;gap:14px;margin-top:34px}
.v-dots button{width:40px;height:4px;border:0;border-radius:4px;background:#d8d0c2;cursor:pointer;padding:0;position:relative;overflow:hidden}
.v-dots button i{position:absolute;inset:0;background:var(--ink);transform:scaleX(0);transform-origin:left}
.v-dots button.on i{animation:vbar 6s linear forwards}
.v-dots button.done i{transform:scaleX(1)}
@keyframes vbar{to{transform:scaleX(1)}}
.v-dots span{font-size:14px;font-weight:700;color:var(--mute);font-variant-numeric:tabular-nums}
.v-frame{position:relative;aspect-ratio:5/4;border-radius:28px;overflow:hidden;background:#e9e3d8;box-shadow:0 40px 70px -40px rgba(0,0,0,.45)}
.v-frame .sl{position:absolute;inset:0;opacity:0;transition:opacity 1s}
.v-frame .sl.on{opacity:1}
.v-frame .sl>img{width:100%;height:100%;object-fit:cover;transform:scale(1.08)}
.v-frame .sl.on>img{animation:vkb 7s ease-out forwards}
@keyframes vkb{to{transform:scale(1)}}
.v-frame .sl.work{background:#f3efe6}
.v-frame .sl.work>img{object-position:70% 75%;transform:scale(1.35)}
.v-frame .sl.work.on>img{animation:vkb2 7s ease-out forwards}
@keyframes vkb2{from{transform:scale(1.45)}to{transform:scale(1.3)}}
.v-frame .tag{position:absolute;left:16px;bottom:16px;z-index:3;background:rgba(255,255,255,.95);color:var(--ink);font-size:13px;font-weight:700;padding:7px 14px;border-radius:999px}
.v-frame .xl{position:absolute;right:22px;top:22px;width:58%;z-index:2;transform:rotate(-1.5deg)}

/* 정보 띠 */
.v-facts{background:var(--ink);color:#fff}
.v-facts .wrap{display:grid;grid-template-columns:repeat(4,1fr) auto;align-items:center}
.v-facts .f{padding:22px 22px 22px 0;border-right:1px solid rgba(255,255,255,.14);margin-right:22px}
.v-facts small{display:block;font-size:13px;color:#b9b4aa}
.v-facts b{font-size:18px;color:#fff}
.v-facts b em{font-style:normal;color:#ffad85;margin-left:4px}

/* ---------- 01 마음 읽기 ---------- */
.v-tabs{display:inline-flex;gap:6px;background:var(--cream);padding:6px;border-radius:999px;margin-bottom:40px}
.v-tabs button{border:0;background:none;font:inherit;font-weight:700;font-size:16px;padding:12px 24px;border-radius:999px;cursor:pointer;color:var(--sub)}
.v-tabs button.on{background:var(--ink);color:#fff}
.v-panel{display:none;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:center}
.v-panel.on{display:grid;animation:vup .5s ease}
@keyframes vup{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.v-pimg{border-radius:24px;overflow:hidden;background:var(--cream);aspect-ratio:4/3.3;display:grid;place-items:center}
.v-pimg img{width:100%;height:100%;object-fit:cover}
.v-pimg .xl{width:80%;transform:rotate(-2deg)}
.v-pcap{margin-top:12px;font-size:14px;color:var(--mute)}
.v-mq{padding:24px 0;border-top:1px solid var(--line)}
.v-mq:last-child{border-bottom:1px solid var(--line)}
.v-mq q{display:block;font-family:var(--display);font-weight:900;font-size:clamp(21px,2vw,26px);color:var(--ink);letter-spacing:-.03em;quotes:"“" "”"}
.v-mq q:before,.v-mq q:after{color:var(--accent)}
.v-mq p{color:var(--sub);margin-top:6px}

/* ---------- 02 대표 과정 ---------- */
.v-duo{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.v-course{background:#fff;border-radius:26px;overflow:hidden;border:1px solid var(--line);display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s}
.v-course:hover{transform:translateY(-6px);box-shadow:var(--shadow-h)}
.v-course .ph{position:relative;aspect-ratio:16/10;overflow:hidden;background:#e9e3d8}
.v-course .ph>img{width:100%;height:100%;object-fit:cover;transition:transform .8s}
.v-course:hover .ph>img{transform:scale(1.05)}
.v-course .ph .xl{position:absolute;right:20px;bottom:20px;width:52%;transform:rotate(-1.5deg)}
.v-course .bd{padding:32px 32px 34px;display:flex;flex-direction:column;flex:1}
.v-course .no{font-size:14px;font-weight:800;color:var(--accent-t)}
.v-course h3{font-family:var(--display);font-weight:900;font-size:clamp(25px,2.5vw,32px);line-height:1.3;letter-spacing:-.04em;margin:8px 0 10px}
.v-course p{color:var(--sub)}
.v-track{list-style:none;margin:18px 0 24px;padding:0;border-top:1px solid var(--line)}
.v-track li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:15px}
.v-track li span{font-weight:700;color:var(--ink)}
.v-track li small{flex:none;color:var(--accent-t);font-weight:800;font-size:13.5px}
.v-course .btn{margin-top:auto;align-self:flex-start}

/* ---------- 03 모집 중 ---------- */
.v-sub-h{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:800;color:var(--ink);margin:0 0 18px}
.v-sub-h:before{content:"";width:10px;height:10px;border-radius:3px;background:var(--accent)}
.v-sub-h.oa:before{background:#1f7244}
.v-grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.v-grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.v-oa-row{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:52px;align-items:start}
.v-oa-row .teacher{margin:0}

/* ---------- 04 도면 → 공간 ---------- */
.v-ba-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:center}
.v-ba{position:relative;aspect-ratio:4/3;border-radius:24px;overflow:hidden;user-select:none;cursor:ew-resize;touch-action:pan-y}
.v-ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.v-ba .after{clip-path:inset(0 0 0 50%)}
.v-ba .handle{position:absolute;top:0;bottom:0;left:50%;width:3px;background:#fff;transform:translateX(-50%)}
.v-ba .handle:after{content:"↔";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center;font-weight:800;box-shadow:0 6px 18px rgba(0,0,0,.3)}
.v-ba .lb{position:absolute;top:14px;font-size:13px;font-weight:700;padding:6px 12px;border-radius:99px;background:rgba(27,26,23,.85);color:#fff}
.v-ba .lb.l{left:14px}.v-ba .lb.r{right:14px;background:var(--accent)}
.v-steps{display:grid;gap:12px;margin-top:26px}
.v-steps div{display:flex;gap:14px;align-items:center;font-weight:600;color:var(--ink)}
.v-steps span{flex:none;width:34px;height:34px;border-radius:50%;background:#fff;border:1px solid var(--line);display:grid;place-items:center;font-size:13px;font-weight:800;color:var(--accent-t)}

/* ---------- 05 약속 ---------- */
.v-why{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.v-why-img{position:relative;aspect-ratio:4/4.4;border-radius:26px;overflow:hidden;background:var(--cream)}
.v-why-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s}
.v-why-img img.on{opacity:1}
.v-wi{padding:22px 0;border-top:1px solid var(--line);cursor:pointer}
.v-wi:last-child{border-bottom:1px solid var(--line)}
.v-wi h3{font-size:22px;letter-spacing:-.03em;display:flex;gap:14px;align-items:center;color:#a9a397;transition:color .3s}
.v-wi h3 span{font-size:14px;font-weight:800}
.v-wi p{color:var(--sub);max-height:0;overflow:hidden;transition:max-height .45s,margin .45s;padding-left:34px}
.v-wi.on h3{color:var(--ink)}
.v-wi.on h3 span{color:var(--accent)}
.v-wi.on p{max-height:140px;margin-top:6px}

/* ---------- 06 둘러보기 ---------- */
.v-rail{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 max(24px,calc((100vw - 1192px)/2)) 10px;scroll-padding-inline:max(24px,calc((100vw - 1192px)/2));scrollbar-width:none}
.v-rail::-webkit-scrollbar{display:none}
.v-rail figure{flex:none;width:min(480px,80vw);scroll-snap-align:start;margin:0}
.v-rail .im{aspect-ratio:16/10;border-radius:20px;overflow:hidden}
.v-rail img{width:100%;height:100%;object-fit:cover}
.v-rail figcaption{margin-top:12px;display:flex;justify-content:space-between;font-size:15px;color:#cfc9be}
.v-rail figcaption b{color:#fff;font-size:17px}
.v-arrows{display:flex;gap:10px}
.v-arrows button{width:50px;height:50px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:none;color:#fff;font-size:20px;cursor:pointer}
.v-arrows button:hover{background:#fff;color:var(--ink)}

/* ---------- 08 이야기 ---------- */
.v-qs{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.v-q{background:#fff;border:1px solid var(--line);border-radius:22px;padding:36px 34px;margin:0}
.v-q p{font-family:var(--display);font-weight:700;font-size:clamp(19px,1.8vw,23px);line-height:1.65;color:var(--ink);letter-spacing:-.02em}
.v-q cite{display:block;margin-top:16px;font-style:normal;font-size:14px;color:var(--mute)}

/* ---------- 10 신청 ---------- */
.v-apply{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.v-ap{background:var(--cream);border-radius:22px;padding:30px 28px}
.v-ap b{font-size:14px;color:var(--accent-t)}
.v-ap h3{font-size:21px;margin:10px 0 8px}
.v-ap p{font-size:15px;color:var(--sub)}

/* ---------- 기타 과정 ---------- */
.v-etc{background:var(--cream);border-radius:26px;padding:34px 36px}
.v-etc-head{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:18px}
.v-etc-head h2{font-family:var(--display);font-weight:900;font-size:26px;letter-spacing:-.04em}
.v-etc-head p{color:var(--sub);margin-top:4px}
.v-etc .etc-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 28px}
.v-etc .etc-list a{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--line)}
.v-etc .etc-cat{font-size:12.5px;font-weight:800;color:var(--accent-t)}
.v-etc .etc-list b{font-weight:700;color:var(--ink)}
.v-etc .etc-date{font-size:13px;color:var(--mute)}

/* ---------- 상담 ---------- */
.v-ctabox{display:grid;grid-template-columns:1.1fr .9fr;border-radius:30px;overflow:hidden;background:var(--accent);color:#fff}
.v-ctatxt{padding:62px 56px}
.v-ctatxt small{font-size:15px;font-weight:800;opacity:.92}
.v-ctatxt h2{font-family:var(--display);font-weight:900;font-size:clamp(30px,3.5vw,44px);line-height:1.3;letter-spacing:-.04em;color:#fff;margin:12px 0 16px}
.v-ctatxt p{font-size:17px;opacity:.96}
.v-ctarow{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
.v-ctarow .btn-white{background:#fff;color:var(--ink)}
.v-ctaimg img{width:100%;height:100%;object-fit:cover;min-height:320px}

@media (max-width:1100px){
  .v-hero-grid,.v-panel.on,.v-ba-grid,.v-why,.v-qs,.v-ctabox,.v-oa-row{grid-template-columns:1fr}
  .v-hero-grid{gap:34px}
  .v-frame{order:-1}
  .v-hero h1{min-height:0}
  .v-grid4{grid-template-columns:1fr 1fr}
  .v-facts .wrap{grid-template-columns:1fr 1fr}
  .v-facts .f{border-right:0;border-bottom:1px solid rgba(255,255,255,.14);margin-right:0}
  .v-facts .go{grid-column:span 2;padding:16px 0}
  .v-facts .go .btn{width:100%}
  .v-why-img{aspect-ratio:16/10}
  .v-ctaimg{display:none}
  .v-course .ph .xl{display:none}
}
@media (max-width:760px){
  .v-sec{padding:74px 0}
  .v-hero{padding:22px 0 46px}
  .v-lead{font-size:16px}
  .v-head{grid-template-columns:1fr}
  .v-head .v-side{justify-self:start}
  .v-duo,.v-grid4,.v-grid2,.v-apply,.v-etc .etc-list{grid-template-columns:1fr}
  .v-course .bd{padding:24px 22px 26px}
  .v-tabs{display:flex;border-radius:18px}
  .v-tabs button{flex:1;padding:12px 10px;font-size:15px}
  .v-pimg{aspect-ratio:auto;padding:28px 0;min-height:240px}
  .v-pimg:has(img){padding:0;aspect-ratio:4/3.3}
  .v-q{padding:28px 24px}
  .v-ctatxt{padding:42px 24px}
  .v-etc{padding:26px 20px}
  .v-frame .xl{width:60%;right:10px;top:10px}
  .v-frame .xl .xl-fx{display:none}
  .v-frame .xl .xl-top{padding:6px 10px;font-size:11px}
  .v-frame .xl .xl-grid span{padding:3px 7px;font-size:11px}
  .v-frame .tag{font-size:12px;left:10px;bottom:10px}
}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .v-frame .sl.on>img,.v-dots button.on i{animation:none}
}