/* 사용자가 고른 시안 6종의 첫 화면을 플랫폼별 페이지에 그대로 입힘 (h-1 ~ h-6) */
.hero.mh{padding:0;overflow:hidden;position:relative}
.mh header{height:58px;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:3}
.mh header img{height:24px;width:auto}
.mh header span{font-size:12px;opacity:.75}
.mh h1{position:relative;z-index:3}
.mh .lead{position:relative;z-index:3;opacity:1}
.mh .cars-n{display:flex;justify-content:space-between;font-size:13px;font-weight:700;position:relative;z-index:3;padding:6px 0 0}
.mh .k3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;position:relative;z-index:3;padding:14px 0 46px}
.mh .k3 div{border-radius:14px;padding:12px 12px 10px}
.mh .k3 b{display:block;font-size:20px;font-weight:800;letter-spacing:-.04em}
.mh .k3 span{font-size:12px;opacity:.75}

/* 시안1 화이트 스튜디오 — 네이버·당근 */
.hero.h-1{background:linear-gradient(#F1F1F4 62%,#E6E6EA);color:#171A20}
.hero.h-1 h1{font-size:30px;line-height:1.3;font-weight:500;letter-spacing:-.03em;margin-top:16px}
.hero.h-1 .lead{font-size:16px;color:#5C5F66;margin-top:10px}
.hero.h-1 .big3{position:absolute;right:6px;top:70px;font-size:240px;line-height:1;font-weight:800;letter-spacing:-.06em;color:#E1E5EE;z-index:0}
.hero.h-1 .stage{position:relative;height:230px;margin:6px -20px 0;z-index:1}
.hero.h-1 .stage img{position:absolute;height:auto;filter:drop-shadow(0 14px 12px rgba(23,26,32,.18))}
.hero.h-1 .stage .a{width:52%;left:-4%;top:40px}.h-1 .stage .b{width:50%;right:-5%;top:28px}.h-1 .stage .c{width:80%;left:10%;bottom:2px;z-index:2}
.hero.h-1.warm{background:linear-gradient(#FFF3E2 60%,#FBEBD6)}
.hero.h-1.warm .big3{color:#F6DFC2}

/* 시안2 나이트 쇼룸 — 메타 일반 */
.hero.h-2{background:radial-gradient(120% 60% at 50% 78%,#2A2B2F 0%,#121315 55%,#0E0F11 100%);color:#F2F2F0}
.hero.h-2 header img{filter:brightness(0) invert(1);opacity:.92}
.hero.h-2 h1{font-size:33px;line-height:1.28;font-weight:300;margin-top:26px;letter-spacing:-.02em}
.hero.h-2 h1 b{font-weight:600;color:#C8A27A}
.hero.h-2 .lead{font-size:15px;color:#9A9DA3;margin-top:12px}
.hero.h-2 .tabs{display:flex;gap:18px;margin-top:24px;position:relative;z-index:3;overflow-x:auto;scrollbar-width:none}
.hero.h-2 .tabs button{font-size:14px;color:#6E7177;padding-bottom:6px;white-space:nowrap}
.hero.h-2 .tabs button.on{color:#F2F2F0;box-shadow:inset 0 -2px 0 #C8A27A}
.hero.h-2 .spot{position:relative;height:220px;margin:4px -20px 0}
.hero.h-2 .spot::before{content:"";position:absolute;left:50%;top:-40px;width:340px;height:300px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(255,244,228,.16),transparent)}
.hero.h-2 .spot::after{content:"";position:absolute;left:12%;right:12%;bottom:18px;height:34px;background:radial-gradient(closest-side,rgba(200,162,122,.3),transparent)}
.hero.h-2 .spot img{position:absolute;left:8%;width:84%;bottom:24px;z-index:1;filter:drop-shadow(0 18px 18px rgba(0,0,0,.5));transition:opacity .25s}
.hero.h-2 .k3 div{background:#1A1C1F}.h-2 .k3 b{color:#C8A27A}

/* 시안3 브랜드 컬러 — 유튜브·구글 */
.hero.h-3{background:#22386B;color:#fff;overflow:visible!important}
.hero.h-3 header img{filter:brightness(0) invert(1)}
.hero.h-3 .kick{font-size:14px;color:rgba(255,255,255,.72);margin-top:28px;position:relative;z-index:3}
.hero.h-3 h1{font-size:40px;line-height:1.18;font-weight:800;letter-spacing:-.045em;margin-top:8px}
.hero.h-3 h1 em{font-style:normal;color:#9FC3FF}
.hero.h-3 .lead{font-size:16px;color:rgba(255,255,255,.8);margin-top:12px;max-width:310px}
.hero.h-3 .bleed{position:relative;height:150px;margin-top:20px}
.hero.h-3 .bleed img{position:absolute;left:14%;bottom:-84px;width:120%;max-width:none;z-index:2;filter:drop-shadow(0 22px 22px rgba(0,0,0,.25))}
.h3-band{height:96px;background:var(--cream)}
.h3-k3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:6px 0 30px}
.h3-k3 div{background:#fff;border-radius:14px;padding:12px;box-shadow:0 1px 0 var(--line)}
.h3-k3 b{display:block;font-size:20px;font-weight:800;color:#22386B;letter-spacing:-.04em}
.h3-k3 span{font-size:12px;color:var(--sub)}

/* 시안4 스카이 인터랙티브 — 카카오 */
.hero.h-4{background:linear-gradient(180deg,#B9D0F7 0%,#DCE8FB 48%,var(--cream) 100%);color:#141820}
.hero.h-4 .kick{font-size:15px;color:#22386B;font-weight:600;margin-top:14px;position:relative;z-index:3}
.hero.h-4 .giant4{position:absolute;left:0;right:0;top:84px;text-align:center;font-size:150px;line-height:1;font-weight:800;letter-spacing:-.07em;color:#fff;opacity:.92;z-index:1;white-space:nowrap}
.hero.h-4 .rail4{position:relative;z-index:2;margin:10px -20px 0;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:0 11% 30px;perspective:900px}
.hero.h-4 .rail4::-webkit-scrollbar{display:none}
.hero.h-4 .rail4 .sl{flex:0 0 78%;scroll-snap-align:center;transition:transform .08s linear,opacity .08s}
.hero.h-4 .rail4 img{width:100%;filter:drop-shadow(0 24px 20px rgba(34,56,107,.22))}
.hero.h-4 .meta4{position:relative;z-index:3;display:flex;justify-content:space-between;align-items:center;margin-top:-14px;font-size:12px;color:#22386B}
.hero.h-4 .meta4 b{font-size:17px;color:#141820}
.hero.h-4 .meta4 .pr{font-size:13px;font-weight:800;color:var(--blue)}
.hero.h-4 h1{font-size:28px;line-height:1.32;font-weight:700;margin-top:18px}
.hero.h-4 .lead{font-size:15px;color:#3C4C78;margin-top:6px;padding-bottom:50px}

/* 시안5 시네마틱 컬러필드 — 틱톡 */
.hero.h-5{background:radial-gradient(90% 55% at 50% 52%,#3C63D6 0%,#1D3A9A 42%,#0B1638 100%);color:#fff}
.hero.h-5 header img{filter:brightness(0) invert(1)}
.hero.h-5 .kick{font-size:14px;color:#AEBBDA;margin-top:20px;position:relative;z-index:3}
.hero.h-5 .mega{position:absolute;left:-4px;right:-4px;top:140px;z-index:1;text-align:center;font-size:108px;line-height:.92;font-weight:800;letter-spacing:-.06em;color:rgba(255,255,255,.14);white-space:nowrap}
.hero.h-5 .mega span{display:block;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.35)}
.hero.h-5 .car5{position:relative;z-index:2;width:104%;margin:140px 0 0 -2%;filter:drop-shadow(0 30px 30px rgba(0,0,0,.45))}
.hero.h-5 .refl{height:36px;margin-top:-16px;background:radial-gradient(closest-side,rgba(127,176,255,.45),transparent)}
.hero.h-5 h1{font-size:26px;line-height:1.35;font-weight:700;margin-top:4px}
.hero.h-5 .lead{font-size:15px;color:#AEBBDA;margin-top:6px}
.hero.h-5 .k3 div{background:rgba(255,255,255,.08)}

/* 시안6 지갑 카드 스택 — 메타 저신용 */
.hero.h-6{background:url(/assets/bg-sky.webp) center top/cover;color:#14204A}
.hero.h-6 h1{font-size:29px;line-height:1.3;font-weight:700;margin-top:20px}
.hero.h-6 .lead{font-size:15px;color:#3C4C78;margin-top:8px}
.hero.h-6 .stack6{position:relative;height:290px;margin-top:22px;cursor:pointer}
.hero.h-6 .wc6{position:absolute;left:4%;right:4%;height:196px;border-radius:24px;padding:16px 18px;color:#fff;overflow:hidden;box-shadow:0 24px 40px -22px rgba(20,32,74,.55);transition:top .4s cubic-bezier(.2,.7,.2,1),transform .4s cubic-bezier(.2,.7,.2,1)}
.hero.h-6 .wc6 b{font-size:16px}.h-6 .wc6 span{display:block;font-size:12px;opacity:.85}
.hero.h-6 .wc6 img{position:absolute;right:-6%;bottom:8%;width:78%}
.hero.h-6 .wc6 .no{position:absolute;right:18px;top:16px;font-size:12px;opacity:.7}
.hero.h-6 .p1{top:0;z-index:1;transform:scale(.9);background:linear-gradient(135deg,#7E8FA8,#4F5F79)}
.hero.h-6 .p2{top:38px;z-index:2;transform:scale(.95);background:linear-gradient(135deg,#8FA6CF,#5A74A8)}
.hero.h-6 .p3{top:84px;z-index:3;background:linear-gradient(135deg,#3858A0,#1B2C5C)}
.hero.h-6 .tap{text-align:center;font-size:12px;color:#3C4C78;padding:0 0 50px}

.t-char{background:#0E0F11}
.t-char .cta{background:rgba(14,15,17,.96)}
.t-char footer{background:#08090B}

.hero.h-1 header img,.hero.h-4 header img,.hero.h-6 header img{filter:none}
.hero.h-3 .bleed img{left:4%;width:104%;bottom:-70px}