/* 메인 시안 v02 — DRAFT · 승인 대기 (메인 FINAL v08은 수정하지 않음)
   1280px 이상: FINAL v08 좌표(1585 기준)를 그대로 쓰고 창 너비에 맞춰 비율 축소.
   1280px 미만: 같은 자산으로 세로 흐름 레이아웃(태블릿·모바일). */
:root{--u:calc(100cqw / 1585)}
.draft-badge{position:fixed;right:14px;bottom:14px;z-index:3000;padding:7px 12px;border-radius:999px;
  background:rgba(52,48,74,.82);color:#fff;font-size:12px;font-weight:600;pointer-events:none}
.mv-stage{position:relative;container-type:inline-size;overflow:hidden;
  /* 배경을 연하게: 그림 위에 흰색 막을 한 겹 (위쪽은 살짝, 아래로 갈수록 더 연하게) */
  --wash-top:.28;--wash-bottom:.55;
  background:
    linear-gradient(180deg,rgba(255,255,255,var(--wash-top)) 0%,rgba(255,255,255,calc((var(--wash-top) + var(--wash-bottom)) / 2)) 22%,rgba(255,255,255,var(--wash-bottom)) 45%,rgba(255,255,255,var(--wash-bottom)) 100%),
    #F8F3FA url("./assets/main_v02/common_background.jpg") center top/100% auto no-repeat}
.mv-stage img{display:block}

/* ================= DESKTOP (FINAL 좌표 비율 재현) ================= */
.sec{position:relative;height:calc(var(--H) * var(--u))}
.L{position:absolute;left:calc(var(--x) * var(--u));top:calc(var(--y) * var(--u));
  width:calc(var(--w) * var(--u));height:calc(var(--h) * var(--u))}
img.L{object-fit:fill;pointer-events:none}
.note{transform:rotate(var(--r));transform-origin:0 0}
/* 토리·벼리: 세 페이지 모두 토리 키가 같게(PC 340 / 태블릿 280 / 휴대폰 215px) + 같은 떠다니는 움직임 */
.hero-char{filter:drop-shadow(0 18px 26px rgba(120,43,144,.18));animation:mv-float 5s ease-in-out infinite}
@keyframes mv-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* HERO */
.hero-copy{z-index:20}
.hero-pill{display:flex;align-items:center;justify-content:center;margin:0 0 0 calc(32 * var(--u));
  width:calc(329 * var(--u));height:calc(40 * var(--u));border-radius:999px;background:rgba(255,255,255,.78);
  font-size:calc(18 * var(--u));font-weight:600;color:#7C5AA6}
.hero-copy h1{margin:calc(24 * var(--u)) 0 0}
.hero-line{display:block;font-family:"SchoolSafetyRoundedSmile",sans-serif;font-size:calc(68 * var(--u));
  line-height:calc(73 * var(--u));font-weight:700;letter-spacing:calc(-2 * var(--u))}
.hero-line.dark{color:#29232C}.hero-line.purple{color:#782B90}.hero-line.pink{color:#ED0C6E}
.hero-text{margin:calc(15 * var(--u)) 0 0;font-size:calc(19 * var(--u));line-height:calc(33 * var(--u));color:#4C464E}

/* BRAND */
.brand-top{position:absolute;left:0;right:0;top:0;z-index:30;text-align:center;padding-top:calc(29 * var(--u))}
.brand-arch{margin:0;height:calc(34 * var(--u));display:flex;justify-content:center;gap:calc(16 * var(--u));
  font-family:"SchoolSafetyStarrySky",sans-serif;font-size:calc(20 * var(--u));line-height:calc(24 * var(--u));font-weight:700;color:#845E9E}
.brand-arch span{display:inline-block;transform:translateY(calc(var(--a) * -1 * var(--u)))}
.mv-brand h2{margin:calc(9 * var(--u)) 0 0;height:calc(60 * var(--u));display:flex;justify-content:center;align-items:center;
  white-space:nowrap;font-family:"Cafe24Surround",sans-serif;font-size:calc(48 * var(--u));line-height:calc(58 * var(--u));font-weight:700}
.brand-tail{color:#62546D}
.nobr{white-space:nowrap}
.mv-brand h2 > span{white-space:pre}
.brand-sub{margin:calc(11 * var(--u)) 0 0;font-size:calc(20 * var(--u));line-height:calc(30 * var(--u));font-weight:600;color:#34304A}
.brand-desc{margin:calc(9 * var(--u)) 0 0;font-size:calc(16 * var(--u));line-height:calc(25 * var(--u));color:#636466}
.bcard-bg{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.bcard-char{position:absolute;z-index:1}
.bcard-logo{position:absolute;z-index:2;height:auto}
.bcard-copy{position:absolute;z-index:3}
.bcard.edu .bcard-logo{left:5.14%;top:9.59%;width:39.4%}
.bcard.edu .bcard-copy{left:6.87%;top:46.2%}
.bcard.edu .bcard-char{left:41.4%;top:29.3%;width:58%;height:65.6%}
.bcard.perf .bcard-logo{left:4.05%;top:9.55%;width:39.2%}
.bcard.perf .bcard-copy{left:7.37%;top:46.05%}
.bcard.perf .bcard-char{left:49.8%;top:34.4%;width:51.9%;height:58.8%}
.bcard-copy h3{margin:0 0 calc(28 * var(--u));font-size:calc(22 * var(--u));line-height:1.2;font-weight:700;white-space:nowrap}
.bcard.edu h3{color:#ED0C6E}.bcard.perf h3{color:#2D63DB}
.bcard-copy p{margin:0;font-size:calc(16 * var(--u));line-height:calc(25 * var(--u));color:#55505A;white-space:nowrap}

/* 섹션 제목 (교육·공연·갤러리 공통) */
.sec-head{position:absolute;inset:0;z-index:40;pointer-events:none}
.sec-head > *{pointer-events:auto}
.section-kicker{position:absolute;left:calc(72 * var(--u));top:calc(49 * var(--u));margin:0;
  font-size:calc(21 * var(--u));line-height:calc(29 * var(--u));font-weight:600;color:#764EB1}
.section-title{position:absolute;left:calc(72 * var(--u));top:calc(84 * var(--u));margin:0;font-family:"PayboocFont",sans-serif;
  font-size:calc(46 * var(--u));line-height:calc(52 * var(--u));font-weight:800;color:#ED2B79;white-space:nowrap}
.section-title span{color:#6F269F}
.section-cta{position:absolute;right:calc(73 * var(--u));top:calc(73 * var(--u));width:calc(257 * var(--u));height:calc(44 * var(--u));
  border-radius:999px;display:flex;align-items:center;justify-content:center;text-decoration:none;
  font-size:calc(20 * var(--u));font-weight:600;color:#693D86;background:#F4EDFA;border:1px solid #E0D3EC;transition:.15s ease}
.section-cta:hover{transform:translateY(-1px);background:#F8F3FC}

/* EDUCATION */
.ecard-bg{position:absolute;inset:0;width:100%;height:100%}
.ecard-char{position:absolute;left:9.93%;top:4.94%;width:80.72%;height:64.6%;transition:transform .25s ease}
.ecard:hover .ecard-char{transform:translateY(-6px) scale(1.02)}
.ecard-label{position:absolute;left:0;right:0;top:71.47%;text-align:center}
.ecard-label h3{margin:0;font-family:"SchoolSafeVaultingBox",sans-serif;font-size:calc(25 * var(--u));line-height:calc(32 * var(--u));font-weight:400;color:var(--ink)}
.ecard-label p{margin:calc(14 * var(--u)) 0 0;font-size:calc(15 * var(--u));line-height:calc(22 * var(--u));color:var(--sub)}

/* PERFORMANCE */
.p-left{z-index:1}.p-right{z-index:2}.p-mid{z-index:3}
.pcard-stage{position:absolute;inset:0;width:100%;height:100%}
.pcard-char,.pcard-brush{position:absolute}
.pcard-label{position:absolute;left:24.1%;width:51.8%;text-align:center}
.p-left .pcard-char{left:13.25%;top:21.3%;width:73.5%;height:49%}
.p-left .pcard-brush{left:15.1%;top:67.9%;width:69.3%;height:28.9%}
.p-left .pcard-label{top:77.1%}
.p-mid .pcard-char{left:16.8%;top:24.9%;width:66.4%;height:49.8%}
.p-mid .pcard-brush{left:15.1%;top:69.1%;width:69.3%;height:33.2%}
.p-mid .pcard-label{top:80.7%}
.p-right .pcard-char{left:11%;top:21.9%;width:77.9%;height:58.5%}
.p-right .pcard-brush{left:15.1%;top:66.9%;width:69.3%;height:40.4%}
.p-right .pcard-label{top:81.5%}
.pcard-label h3{margin:0;font-family:"SchoolSafeVaultingBox",sans-serif;font-size:calc(25 * var(--u));line-height:calc(30 * var(--u));font-weight:400;color:var(--ink)}
.pcard-label p{margin:calc(5 * var(--u)) 0 0;font-size:calc(16 * var(--u));line-height:calc(24 * var(--u));color:#4A4858}

/* GALLERY */
.gframe{margin:0;z-index:1;transform:rotate(var(--r,0deg))}
.g-right{z-index:2}.g-center{z-index:3}
.gframe::before{content:"";position:absolute;inset:calc(-12 * var(--u));z-index:-1;border:2px solid rgba(255,255,255,.94);
  border-radius:calc(22 * var(--u));background:rgba(247,229,250,.78)}
.g-right::before{background:rgba(224,242,250,.84)}
.g-center::before{inset:calc(-14 * var(--u));background:rgba(235,240,255,.88)}
.gframe img{width:100%;height:100%;object-fit:cover;background:#fff;border:calc(8 * var(--u)) solid #fff;
  border-radius:calc(18 * var(--u));box-shadow:0 12px 24px rgba(67,55,112,.14)}
.g-center img{border-width:calc(10 * var(--u));border-radius:calc(20 * var(--u));box-shadow:0 14px 28px rgba(67,55,112,.16)}

/* CONTACT */
.contact-copy{z-index:30}
.contact-copy h2{margin:0;font-family:"Cafe24Surround",sans-serif;font-size:calc(41 * var(--u));line-height:calc(49 * var(--u));font-weight:700;white-space:nowrap}
.contact-copy p{margin:calc(13 * var(--u)) 0 0;font-size:calc(18 * var(--u));line-height:calc(27 * var(--u));color:#636466}
.contact-cta{z-index:35;border-radius:999px;display:flex;align-items:center;justify-content:center;text-decoration:none;
  font-size:calc(20 * var(--u));font-weight:600;color:#782B90;background:rgba(255,255,255,.91);
  border:1px solid #E8DBF5;box-shadow:2px 5px 12px rgba(120,43,144,.11);transition:.15s ease}
.contact-cta:hover{background:#782B90;color:#fff}
.contact-fade{position:absolute;left:0;right:0;bottom:0;height:calc(72 * var(--u));z-index:25;pointer-events:none;
  background:linear-gradient(to bottom,rgba(252,250,253,0),rgba(252,250,253,.62) 68%,#FCFAFD)}

/* ================= TABLET / MOBILE (1280px 미만: 세로 흐름) ================= */
@media (max-width:1279px){
  .mv-stage{background:linear-gradient(180deg,#FDF6FB 0%,#F4EEFB 45%,#FBF1F8 100%)}
  .sec{height:auto}
  .L{position:relative;left:auto;top:auto;width:auto;height:auto}
  .sec-head{position:static;pointer-events:auto}
  .section-kicker,.section-title,.section-cta{position:static}
  .section-kicker{font-size:18px;line-height:26px}
  .section-title{margin-top:4px;font-size:36px;line-height:44px;white-space:normal}
  .section-cta{display:inline-flex;width:auto;height:42px;padding:0 22px;margin-top:16px;font-size:16px}

  /* HERO */
  .mv-hero{overflow:hidden;padding:64px 24px 0;text-align:center;display:flex;flex-direction:column;align-items:center;
    background:linear-gradient(rgba(255,255,255,.28),rgba(255,255,255,.28)),url("./assets/main_v02/common_background.jpg") center top/1585px auto no-repeat}
  .mv-hero .deco{display:none}
  .hero-copy{position:relative;z-index:2;order:1}
  .mv-hero .hero-char{order:2}
  .hero-pill{display:inline-flex;width:auto;height:40px;padding:0 22px;margin:0 0 22px;font-size:16px}
  .hero-copy h1{margin:0}
  .hero-line{font-size:54px;line-height:62px;letter-spacing:-1.5px}
  .hero-text{margin-top:18px;font-size:18px;line-height:30px}
  .hero-char{position:relative;z-index:1;width:min(320px,75vw);height:auto;margin:26px auto 0}

  /* BRAND */
  .mv-brand{padding:56px 28px 64px}
  .brand-top{position:static;padding:0}
  .brand-arch{height:auto;gap:10px;font-size:18px;line-height:22px}
  .brand-arch span{transform:translateY(calc(var(--a) * -0.6px))}
  .mv-brand h2{display:block;height:auto;margin-top:8px;white-space:normal;font-size:40px;line-height:50px;text-wrap:balance}
  .mv-brand h2 > span{white-space:pre-wrap}
  .mv-brand h2 > .nobr{white-space:nowrap}
  .brand-sub,.brand-desc,.contact-copy h2{text-wrap:balance}
  .brand-sub{font-size:18px;line-height:28px;margin-top:10px}
  .brand-desc{font-size:15px;line-height:24px;margin-top:6px}
  .brand-cards{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:36px}
  .bcard{border-radius:30px;overflow:hidden;padding:30px 28px 0;display:flex;flex-direction:column}
  .bcard-bg{object-fit:cover}
  .bcard-logo,.bcard-copy,.bcard-char{position:relative;left:auto!important;top:auto!important;height:auto!important}
  .bcard-logo{width:min(250px,70%)!important}
  .bcard-copy{margin-top:16px}
  .bcard-copy h3{margin-bottom:12px;font-size:21px;white-space:normal}
  .bcard-copy p{font-size:15.5px;line-height:26px;white-space:normal}
  .bcard-copy br{display:none}
  .bcard-char{width:78%!important;margin:auto -6px 0 auto;padding-top:8px}

  /* EDUCATION / PERFORMANCE / GALLERY */
  .mv-edu,.mv-perf,.mv-gallery{padding:52px 28px 56px}
  .edu-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:30px}
  .ecard{aspect-ratio:403.92/504.72}
  .ecard-label h3{font-size:clamp(13px,1.45vw,19px);line-height:1.3;white-space:nowrap}
  .ecard-label p{margin-top:6px;font-size:clamp(11.5px,1.25vw,14px);line-height:1.4}
  .perf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px}
  .pcard{aspect-ratio:1;order:2}.p-left{order:1}.p-right{order:3}
  .pcard-label h3{font-size:clamp(17px,2.2vw,24px);line-height:1.25}
  .pcard-label p{margin-top:4px;font-size:clamp(12px,1.4vw,15px);line-height:1.4}
  .gal-grid{display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:26px;align-items:center;margin-top:40px;padding:0 6px}
  .gframe{aspect-ratio:545/312}
  .g-center{order:2}.g-left{order:1}.g-right{order:3}
  .gframe::before{inset:-10px;border-radius:20px}
  .gframe img{border-width:7px;border-radius:16px}

  /* CONTACT */
  .mv-contact{display:flex;flex-direction:column;align-items:center;gap:24px;text-align:center;padding:56px 24px 60px}
  .contact-copy h2{white-space:normal;font-size:32px;line-height:42px}
  .contact-copy p{margin-top:10px;font-size:16px;line-height:26px}
  .contact-cta{width:min(300px,100%);height:56px;font-size:18px}
  .contact-fade{display:none}
}

/* 모바일 */
@media (max-width:759px){
  .section-kicker{font-size:15px;line-height:22px}
  .section-title{font-size:27px;line-height:36px}
  .section-cta{height:38px;padding:0 18px;font-size:14px;margin-top:12px}
  .mv-hero{padding:44px 18px 0}
  .hero-pill{height:34px;padding:0 16px;font-size:13.5px;margin-bottom:16px}
  .hero-line{font-size:38px;line-height:46px;letter-spacing:-1px}
  .hero-text{font-size:15.5px;line-height:26px}
  .hero-char{width:min(246px,63vw)}
  .mv-brand{padding:44px 20px 50px}
  .brand-arch{font-size:14px;gap:5px}
  .mv-brand h2{font-size:28px;line-height:38px}
  .brand-sub{font-size:16px;line-height:25px}
  .brand-desc{font-size:14px;line-height:22px}
  .brand-cards{grid-template-columns:1fr;gap:16px;margin-top:28px}
  .bcard{padding:24px 22px 0;border-radius:24px}
  .bcard-copy h3{font-size:18.5px}
  .bcard-copy p{font-size:14.5px;line-height:24px}
  .mv-edu,.mv-perf,.mv-gallery{padding:44px 20px 48px}
  .edu-grid{grid-template-columns:repeat(2,1fr);gap:12px;margin-top:22px}
  .ecard-label{top:70.5%}
  .ecard-label h3{font-size:13.5px;line-height:1.3;padding:0 6px;white-space:normal}
  .ecard-label p{margin-top:3px;font-size:10.5px}
  .perf-grid{grid-template-columns:1fr;max-width:360px;margin:16px auto 0;gap:6px}
  .pcard-label h3{font-size:21px}
  .pcard-label p{font-size:13px}
  .gal-grid{grid-template-columns:1fr;gap:26px;max-width:420px;margin:30px auto 0}
  .gframe{transform:none}
  .mv-contact{padding:44px 20px 48px}
  .contact-copy h2{font-size:24px;line-height:34px}
  .contact-copy p{font-size:14.5px;line-height:23px}
}