/* VEYRA (가상 기업 샘플) — 사이트 스타일
   팔레트: 무채색 + 시그널 오렌지 하나. 모양 규칙: 버튼=알약, 타일·사진=22px, 입력=12px. */
:root{
  --bg:#fff; --fg:#0b0b0c; --ink:#0b0b0c; --paper:#f5f5f7; --line:#e3e3e6;
  --sub:#6b6b70; --sub-d:#9a9aa1; --accent:#ff5a1f; --accent-d:#e2470f;
  --tile:22px; --hdr:56px;
}
html{scroll-padding-top:calc(var(--hdr) + 56px)}
body{background:#fff;overflow-x:clip}
.dark{background:var(--ink);color:#f5f5f7}
.paper{background:var(--paper)}

/* 버튼 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4em;height:46px;padding:0 1.4em;border-radius:999px;font-weight:600;font-size:.98rem;text-decoration:none;white-space:nowrap;transition:background var(--dur-micro) var(--ease-micro),color var(--dur-micro) var(--ease-micro),transform .15s var(--ease-micro)}
.btn:active{transform:scale(.97)}
.btn-a{background:var(--accent);color:#fff}.btn-a:hover{background:var(--accent-d)}
.btn-w{background:#fff;color:var(--ink)}.btn-w:hover{background:#e9e9ec}
.btn-k{background:var(--ink);color:#fff}.btn-k:hover{background:#2a2a2d}
.btn-o{border:1.5px solid currentColor;color:inherit}.btn-o:hover{background:rgba(127,127,127,.12)}
.lnk{color:var(--accent);text-decoration:none;font-weight:600;white-space:nowrap}
.lnk::after{content:" ›";font-weight:700}.lnk:hover{text-decoration:underline;text-underline-offset:3px}
.dark .lnk{color:#ff7a45}

/* ───────── 공지 띠 ───────── */
.notice{background:#1b1b1d;color:#d8d8dc;font-size:.82rem;text-align:center;padding:.55rem var(--gutter)}
.notice a{color:#ff8a5c;text-decoration:none;font-weight:600}

/* ───────── 헤더 + 메가메뉴 ───────── */
.hdr{position:sticky;top:0;z-index:50;height:var(--hdr);background:rgba(250,250,252,.78);backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);border-bottom:1px solid rgba(0,0,0,.06);transition:background .3s}
.hdr.on-dark{background:rgba(14,14,16,.86);color:#f2f2f4;border-color:rgba(255,255,255,.06)}
.hdr .wrap{height:100%;display:flex;align-items:center;gap:2rem}
.logo{font-weight:800;font-size:1.28rem;letter-spacing:.32em;text-decoration:none;margin-right:auto;display:flex;align-items:center;gap:.5rem}
.logo i{display:block;width:14px;height:14px;border-radius:50%;background:conic-gradient(from 200deg,var(--accent),#ffb38a,var(--accent));box-shadow:0 0 14px rgba(255,90,31,.6)}
.gnb{display:flex;gap:.25rem;height:100%}
.gnb>li{list-style:none;height:100%;display:flex;align-items:center}
.gnb>li>a{font-size:.9rem;font-weight:500;text-decoration:none;padding:0 .8rem;height:100%;display:flex;align-items:center;opacity:.86}
.gnb>li>a:hover,.gnb>li.open>a{opacity:1}
.gnb ul{margin:0;padding:0}
.hdr-ic{display:flex;gap:.3rem}
.hdr-ic a,.hdr-ic button{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:none;border:0;color:inherit;cursor:pointer}
.hdr-ic a:hover,.hdr-ic button:hover{background:rgba(127,127,127,.14)}
.hdr-ic svg{width:19px;height:19px}
.hdr-ic .burger{display:none}
.mega{position:absolute;left:0;right:0;top:var(--hdr);background:rgba(250,250,252,.97);backdrop-filter:blur(20px);color:var(--ink);border-bottom:1px solid var(--line);clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .45s var(--ease-move),visibility 0s .45s}
.hdr.on-dark .mega{background:rgba(18,18,20,.97);color:#f2f2f4;border-color:#26262a}
.mega.open{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path .45s var(--ease-move),visibility 0s}
.mega .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.3fr;gap:3rem;padding-block:2.4rem 3rem;height:auto}
.mega h5{font-size:.76rem;font-weight:600;color:var(--sub-d);margin:0 0 .9rem;letter-spacing:.02em}
.mega .big a{display:block;font-size:1.5rem;font-weight:700;letter-spacing:-.02em;text-decoration:none;padding:.18rem 0}
.mega .big a:hover{color:var(--accent)}
.mega .sm a{display:block;font-size:.92rem;text-decoration:none;padding:.32rem 0;opacity:.85}
.mega .sm a:hover{opacity:1;color:var(--accent)}
.mega-card{border-radius:16px;overflow:hidden;position:relative;aspect-ratio:16/10;background:#222}
.mega-card img{width:100%;height:100%;object-fit:cover}
.mega-card span{position:absolute;left:1rem;bottom:.9rem;color:#fff;font-weight:700;text-shadow:0 1px 10px rgba(0,0,0,.5)}
.mega>.wrap>div{opacity:0;transform:translateY(-8px);transition:opacity .3s,transform .4s var(--ease-enter)}
.mega.open>.wrap>div{opacity:1;transform:none}
.mega.open>.wrap>div:nth-child(2){transition-delay:.04s}.mega.open>.wrap>div:nth-child(3){transition-delay:.08s}.mega.open>.wrap>div:nth-child(4){transition-delay:.12s}
.dim{position:fixed;inset:0;background:rgba(0,0,0,.28);backdrop-filter:blur(6px);z-index:40;opacity:0;visibility:hidden;transition:opacity .35s,visibility 0s .35s}
.dim.on{opacity:1;visibility:visible;transition:opacity .35s}

/* 모바일 메뉴 */
.mnav{position:fixed;inset:var(--hdr) 0 0;background:var(--ink);color:#f2f2f4;z-index:49;padding:1.5rem var(--gutter) 3rem;overflow:auto;clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .5s var(--ease-move),visibility 0s .5s}
.mnav.open{clip-path:inset(0);visibility:visible;transition:clip-path .5s var(--ease-move)}
.mnav a{display:block;font-size:1.65rem;font-weight:700;letter-spacing:-.02em;text-decoration:none;padding:.5rem 0;border-bottom:1px solid #222226}
.mnav small{display:block;margin-top:2rem;color:var(--sub-d)}

@media (max-width:1023px){.gnb{display:none}.hdr-ic .burger{display:grid}.mega{display:none}}

/* ───────── 메인 히어로 (3D) ───────── */
.hero{position:relative;min-height:calc(100dvh - var(--hdr));display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center;overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(11,11,12,.94) 0%,rgba(11,11,12,.8) 30%,rgba(11,11,12,.25) 52%,rgba(11,11,12,0) 66%),linear-gradient(to top,rgba(11,11,12,.7),transparent 30%)}
.hero-metal{position:absolute;inset:0;z-index:-2;background:radial-gradient(40% 55% at 72% 52%,rgba(255,90,31,.38),transparent 70%),#0b0b0c}
.hero-metal canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block}
.hero-ghost{position:absolute;z-index:-1;left:-2vw;bottom:-5vw;font-weight:900;font-size:min(34vw,560px);letter-spacing:-.06em;line-height:.8;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.08);white-space:nowrap;pointer-events:none;user-select:none}
.hero-txt{padding:4rem 0 4rem var(--gutter);max-width:640px;justify-self:end;width:100%}
.hero-kick{display:inline-flex;align-items:center;gap:.5rem;font-size:.9rem;font-weight:600;color:#ff8a5c;margin-bottom:1.4rem}
.hero-kick b{background:var(--accent);color:#fff;font-size:.72rem;padding:.2rem .55rem;border-radius:999px;letter-spacing:.04em}
.hero h1{font-size:clamp(3.2rem,1rem + 8vw,8.6rem);line-height:.95;letter-spacing:-.045em;font-weight:800}
.hero h1 em{font-style:normal;background:linear-gradient(100deg,#fff 20%,#ffb08a 55%,var(--accent) 90%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .sub{font-size:clamp(1.1rem,1rem + .55vw,1.5rem);color:#c9c9ce;margin:1.4rem 0 2.2rem;line-height:1.5;max-width:22em}
.hero .cta{display:flex;gap:.7rem;flex-wrap:wrap}
.hero .price{margin-top:1.6rem;font-size:.86rem;color:var(--sub-d)}
.hero-3d{position:relative;height:min(86vh,860px);width:100%}
.hero-3d canvas{position:absolute;inset:0;width:100%!important;height:100%!important}
.hero-3d .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .6s}
.hero-3d.is-3d .poster{opacity:0}
.hero-chips{position:absolute;right:var(--gutter);bottom:2rem;display:flex;gap:.5rem;z-index:2}
.chip{white-space:nowrap;display:flex;align-items:center;gap:.5rem;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(12px);border-radius:999px;padding:.38rem .85rem .38rem .45rem;font-size:.8rem;color:#ddd;cursor:pointer;font-family:inherit}
.chip i{width:18px;height:18px;border-radius:50%;border:1.5px solid rgba(255,255,255,.5)}
.chip[aria-pressed=true]{background:rgba(255,255,255,.18);color:#fff;border-color:rgba(255,255,255,.4)}
@media (max-width:900px){
  .hero::before{background:linear-gradient(to bottom,rgba(11,11,12,.9) 0%,rgba(11,11,12,.7) 40%,rgba(11,11,12,.1) 70%)}
  .hero{grid-template-columns:1fr;grid-template-rows:auto auto;min-height:auto}
  .hero-txt{padding:3rem var(--gutter) 0;justify-self:start}
  .hero-3d{height:62vh;min-height:420px}
  .hero-chips{left:var(--gutter);right:auto;bottom:1rem}
}

/* ───────── 섹션 공통 ───────── */
.sec{padding-block:var(--sec)}
.sec-h{display:flex;align-items:end;justify-content:space-between;gap:2rem;margin-bottom:clamp(2rem,4vw,3.5rem)}
.sec-h h2{font-size:clamp(2rem,1.1rem + 3.2vw,4rem);letter-spacing:-.035em;line-height:1.08;font-weight:800}
.sec-h p{color:var(--sub);max-width:26em;font-size:1.05rem}
.dark .sec-h p{color:var(--sub-d)}
@media (max-width:760px){.sec-h{flex-direction:column;align-items:start;gap:1rem}}

/* ───────── 제품 타일 (애플 홈 방식, 크기 섞음) ───────── */
.tiles{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.tile{position:relative;border-radius:var(--tile);overflow:hidden;background:#fff;min-height:560px;display:flex;flex-direction:column;align-items:center;text-align:center;padding:2.6rem 1.5rem 0;isolation:isolate;text-decoration:none;color:inherit}
.tile.t-dark{background:#000;color:#f5f5f7}
.tile.t7{grid-column:span 7}.tile.t5{grid-column:span 5}.tile.t6{grid-column:span 6}.tile.t12{grid-column:span 12;min-height:640px}
.tile h3{font-size:clamp(1.9rem,1.2rem + 1.8vw,2.9rem);letter-spacing:-.03em;font-weight:800}
.tile p{font-size:clamp(1rem,.95rem + .3vw,1.25rem);margin-top:.35rem;color:inherit;opacity:.82}
.tile .act{display:flex;gap:1.4rem;justify-content:center;margin-top:1rem;font-size:1rem}
.tile .tag{font-size:.78rem;font-weight:700;color:var(--accent);letter-spacing:.06em;margin-bottom:.4rem}
.tile .ph{position:absolute;inset:auto 0 0 0;height:66%;z-index:-1;overflow:hidden}
.tile .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-enter)}
.tile:hover .ph img{transform:scale(1.045)}
.tile .ph::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to bottom,var(--tbg,#fff) 0%,transparent 26%)}
.tile.t-dark .ph::before{--tbg:#000}
.tile.t-full .ph{height:100%}.tile.t-full .ph::before{background:linear-gradient(to bottom,rgba(0,0,0,.55),transparent 40%)}
.tile.t-full{color:#fff}
@media (max-width:900px){.tile.t7,.tile.t5,.tile.t6,.tile.t12{grid-column:span 12}.tile{min-height:480px}.tile.t12{min-height:520px}}

/* ───────── 하루의 장면 (가로 고정 스크롤) ───────── */
.day{position:relative}
.day-pin{height:100dvh;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.day-head{padding-inline:var(--gutter);max-width:var(--max);margin:0 auto 2.2rem;width:100%;display:flex;justify-content:space-between;align-items:end;gap:2rem}
.day-head h2{font-size:clamp(2rem,1.1rem + 3.2vw,4rem);letter-spacing:-.035em;line-height:1.08;font-weight:800}
.day-prog{width:200px;height:2px;background:#2a2a2e;border-radius:2px;overflow:hidden;flex:none}
.day-prog i{display:block;height:100%;width:100%;background:var(--accent);transform-origin:left;transform:scaleX(0)}
.day-track{display:flex;gap:18px;padding-left:max(var(--gutter),calc((100vw - var(--max))/2 + var(--gutter)));padding-right:var(--gutter);width:max-content}
.scene{position:relative;width:min(72vw,980px);aspect-ratio:16/10;border-radius:var(--tile);overflow:hidden;flex:none;background:#1a1a1c}
.scene img{width:100%;height:100%;object-fit:cover;transform:scale(1.12)}
.scene::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.72),transparent 55%)}
.scene .cap{position:absolute;left:clamp(1.2rem,3vw,2.4rem);right:clamp(1.2rem,3vw,2.4rem);bottom:clamp(1.2rem,3vw,2.2rem);z-index:1;display:flex;align-items:end;justify-content:space-between;gap:1rem}
.scene time{display:block;font-size:clamp(2.6rem,1.4rem + 4vw,5.4rem);font-weight:800;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.scene .cap p{font-size:clamp(1rem,.9rem + .4vw,1.3rem);color:#e6e6ea;margin-top:.6rem;max-width:22em}
.scene .cap span{font-size:.82rem;background:rgba(255,255,255,.14);backdrop-filter:blur(10px);padding:.4rem .8rem;border-radius:999px;white-space:nowrap}
@media (max-width:900px){.scene{width:84vw;aspect-ratio:4/5}.scene .cap{flex-direction:column;align-items:start}.day-prog{display:none}}

/* ───────── 숫자 띠 ───────── */
.nums{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #2a2a2e}
.nums>div{padding:2.2rem 1.4rem 0 0;border-right:1px solid #2a2a2e;padding-left:1.4rem}
.nums>div:first-child{padding-left:0}.nums>div:last-child{border-right:0}
.nums b{display:block;font-size:clamp(2.4rem,1.2rem + 3.6vw,4.6rem);font-weight:800;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums}
.nums b small{font-size:.42em;margin-left:.12em;letter-spacing:0;color:var(--accent)}
.nums>div>span{display:block;color:var(--sub-d);margin-top:.7rem;font-size:.95rem}
@media (max-width:760px){.nums{grid-template-columns:1fr 1fr}.nums>div{border-right:0;padding:1.6rem 0;border-bottom:1px solid #2a2a2e}.nums>div:nth-child(odd){padding-right:1rem}}

/* ───────── 비즈니스 (고정 이미지 + 업종 탭) ───────── */
.biz{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.biz-list{display:flex;flex-direction:column}
.biz-item{border-top:1px solid var(--line);padding:1.5rem 0;cursor:pointer;background:none;border-left:0;border-right:0;border-bottom:0;text-align:left;font:inherit;color:inherit;width:100%}
.biz-item:last-child{border-bottom:1px solid var(--line)}
.biz-item .row{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.biz-item h3{font-size:clamp(1.4rem,1rem + 1.4vw,2.2rem);letter-spacing:-.03em;font-weight:700;color:#b9b9be;transition:color .35s}
.biz-item .n{font-size:.85rem;color:var(--sub);font-variant-numeric:tabular-nums}
.biz-item .more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease-move)}
.biz-item .more>div{overflow:hidden}
.biz-item .more p{color:var(--sub);padding-top:.8rem;max-width:30em}
.biz-item .more ul{display:flex;flex-wrap:wrap;gap:.4rem;margin:1rem 0 0;padding:0;list-style:none}
.biz-item .more li{font-size:.8rem;border:1px solid var(--line);border-radius:999px;padding:.25rem .7rem;color:#45454a}
.biz-item[aria-expanded=true] h3{color:var(--ink)}
.biz-item[aria-expanded=true] .more{grid-template-rows:1fr}
.biz-stage{position:sticky;top:calc(var(--hdr) + 2rem);border-radius:var(--tile);overflow:hidden;aspect-ratio:4/3.3;background:#ddd}
.biz-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity .7s var(--ease-move),transform 1.4s var(--ease-enter)}
.biz-stage img.on{opacity:1;transform:none}
.biz-stage .badge{position:absolute;left:1.2rem;top:1.2rem;z-index:2;background:rgba(255,255,255,.88);backdrop-filter:blur(10px);border-radius:999px;font-size:.8rem;font-weight:600;padding:.4rem .85rem}
.biz-stage .case{position:absolute;left:1.2rem;right:1.2rem;bottom:1.2rem;z-index:2;background:rgba(12,12,14,.72);backdrop-filter:blur(14px);color:#fff;border-radius:16px;padding:1.1rem 1.3rem;display:flex;justify-content:space-between;gap:1rem;align-items:end}
.biz-stage .case b{display:block;font-size:1.05rem}.biz-stage .case span{font-size:.84rem;color:#c9c9ce}
.biz-stage .case strong{font-size:1.9rem;font-weight:800;letter-spacing:-.03em;color:#ff8a5c;white-space:nowrap}
@media (max-width:900px){.biz{grid-template-columns:1fr}.biz-stage{position:relative;top:0;order:-1;aspect-ratio:4/3}}

/* ───────── 뉴스룸 ───────── */
.news{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(1.5rem,3vw,3rem)}
.news-main{text-decoration:none;color:inherit}
.news-main .im{border-radius:var(--tile);overflow:hidden;aspect-ratio:16/10}
.news-main img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-enter)}
.news-main:hover img{transform:scale(1.04)}
.news-main h3{font-size:clamp(1.4rem,1rem + 1.3vw,2.1rem);letter-spacing:-.03em;margin-top:1.2rem}
.meta{font-size:.82rem;color:var(--sub);margin-top:.5rem}.meta b{color:var(--accent);font-weight:600;margin-right:.6rem}
.news-list{display:flex;flex-direction:column}
.news-list a{display:grid;grid-template-columns:120px 1fr;gap:1.1rem;align-items:center;padding:1.15rem 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
.news-list a:first-child{padding-top:0}
.news-list .im{border-radius:12px;overflow:hidden;aspect-ratio:1}
.news-list img{width:100%;height:100%;object-fit:cover}
.news-list h4{font-size:1.08rem;letter-spacing:-.02em;line-height:1.4}
.news-list a:hover h4{color:var(--accent)}
@media (max-width:900px){.news{grid-template-columns:1fr}.news-list a{grid-template-columns:92px 1fr}}

/* ───────── 지속가능성 (풀블리드) ───────── */
.green{position:relative;min-height:92vh;display:flex;align-items:end;color:#fff;overflow:hidden;isolation:isolate}
.green .bgim{position:absolute;inset:-12% 0;z-index:-2}
.green .bgim img{width:100%;height:100%;object-fit:cover;object-position:50% 70%}
.green::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(0,0,0,.78) 10%,rgba(0,0,0,.1) 60%)}
.green .wrap{width:100%;padding-block:var(--sec-s)}
.green h2{font-size:clamp(2.3rem,1rem + 4.4vw,5.6rem);letter-spacing:-.04em;line-height:1.04;font-weight:800;max-width:12em}
.green .row{display:flex;justify-content:space-between;align-items:end;gap:2rem;flex-wrap:wrap;margin-top:2.2rem}
.green .row p{max-width:30em;color:#dadade;font-size:1.08rem}

/* ───────── 하단 큰 CTA ───────── */
.endcta{text-align:center;padding-block:var(--sec)}
.endcta h2{font-size:clamp(2.4rem,1rem + 5vw,6.4rem);letter-spacing:-.045em;line-height:1;font-weight:800}
.endcta p{color:var(--sub-d);margin:1.2rem auto 2rem;font-size:1.1rem}
.endcta .cta{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap}

/* ───────── 푸터 ───────── */
.ftr{background:var(--paper);color:#45454a;font-size:.86rem;padding-block:3.5rem 2.5rem}
.ftr-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:2rem;padding-bottom:2.5rem;border-bottom:1px solid #d9d9de}
.ftr h6{font-size:.84rem;color:var(--ink);margin:0 0 .9rem;font-weight:700}
.ftr-grid a{display:block;text-decoration:none;padding:.22rem 0}
.ftr-grid a:hover{color:var(--accent)}
.ftr-bot{display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;padding-top:1.6rem;color:#6b6b70}
.ftr .demo{margin-top:1.4rem;background:#fff;border:1px solid #e1e1e5;border-radius:12px;padding:.9rem 1.1rem;color:#45454a}
.ftr .demo b{color:var(--accent)}
@media (max-width:900px){.ftr-grid{grid-template-columns:1fr 1fr}}

/* ═════════ 제품 상세(Arc 7) ═════════ */
.lnav{position:sticky;top:0;z-index:45;height:52px;background:rgba(14,14,16,.78);backdrop-filter:saturate(180%) blur(18px);color:#f2f2f4;border-bottom:1px solid rgba(255,255,255,.07)}
.lnav .wrap{height:100%;display:flex;align-items:center;gap:1.4rem}
.lnav strong{font-size:1.15rem;letter-spacing:-.02em;margin-right:auto}
.lnav nav{display:flex;gap:1.3rem;font-size:.84rem}
.lnav nav a{text-decoration:none;opacity:.72;position:relative;padding:.3rem 0}
.lnav nav a.on{opacity:1}
.lnav nav a.on::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--accent);border-radius:2px}
.lnav .btn{height:32px;padding:0 1rem;font-size:.82rem}
@media (max-width:760px){.lnav nav{display:none}}
.pd-body .hdr{position:relative}

.pd-hero{min-height:calc(100dvh - 52px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;position:relative;overflow:hidden;padding:4rem var(--gutter)}
.pd-hero::before{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(45% 50% at 50% 60%,rgba(255,90,31,.32),transparent 70%)}
.pd-hero>*{position:relative}
.pd-hero .nm{font-size:clamp(1.2rem,1rem + 1vw,1.8rem);font-weight:600;color:#ff8a5c;margin-bottom:.6rem}
.pd-hero h1{font-size:clamp(3.4rem,1rem + 10vw,11rem);line-height:.92;letter-spacing:-.055em;font-weight:900;background:linear-gradient(180deg,#fff 30%,#8c8c92);-webkit-background-clip:text;background-clip:text;color:transparent}
.pd-hero .sub{font-size:clamp(1.15rem,1rem + .7vw,1.7rem);color:#d2d2d7;margin-top:1.2rem}
.pd-hero .cta{display:flex;gap:.7rem;margin-top:2rem;justify-content:center;flex-wrap:wrap}
.pd-hero .price{margin-top:1.1rem;color:var(--sub-d);font-size:.9rem}
.scroll-hint{position:absolute;bottom:1.8rem;left:50%;translate:-50% 0;font-size:.76rem;color:var(--sub-d);display:flex;flex-direction:column;align-items:center;gap:.5rem}
.scroll-hint i{width:1px;height:38px;background:linear-gradient(#fff,transparent);animation:hint 1.8s var(--ease-move) infinite;transform-origin:top}
@keyframes hint{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

/* 3D 고정 장면 */
.p3{position:relative;height:620vh}
.p3-stage{position:sticky;top:52px;height:calc(100dvh - 52px);overflow:hidden}
.p3-cv{position:absolute;inset:0}
.p3-cv canvas{width:100%!important;height:100%!important;display:block}
.p3-cap{position:absolute;left:var(--gutter);top:50%;translate:0 -50%;max-width:min(30rem,40vw);opacity:0;will-change:opacity,transform}
.p3-cap.r{left:auto;right:var(--gutter);text-align:right}
.p3-cap.c{left:50%;translate:-50% 0;top:auto;bottom:5vh;text-align:center;max-width:40rem;background:rgba(10,10,12,.62);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);padding:1.4rem 2rem;border-radius:22px}
.p3-cap.c h2{font-size:clamp(1.5rem,1rem + 1.8vw,2.6rem)}
.p3-cap small{display:block;color:#ff8a5c;font-weight:600;font-size:.95rem;margin-bottom:.6rem}
.p3-cap h2{font-size:clamp(2rem,1rem + 3.4vw,4.4rem);letter-spacing:-.04em;line-height:1.05;font-weight:800}
.p3-cap p{color:#bdbdc3;margin-top:1rem;font-size:clamp(1rem,.95rem + .3vw,1.2rem)}
.p3-cap .big{font-size:clamp(4rem,2rem + 8vw,10rem);font-weight:900;letter-spacing:-.06em;line-height:.9;color:#fff}
.p3-cap .big sub{font-size:.3em;vertical-align:baseline;letter-spacing:0;color:#ff8a5c;margin-left:.1em;bottom:0}
.p3-sw{position:absolute;bottom:7vh;left:50%;translate:-50% 0;display:flex;gap:.6rem;opacity:0;pointer-events:none}
.p3-sw.on{pointer-events:auto}
.p3-bar{position:absolute;left:0;top:0;height:2px;background:var(--accent);width:100%;transform-origin:left;transform:scaleX(0)}
@media (max-width:900px){.p3-sw{bottom:auto;top:1.2rem;width:max-content}.p3-sw .chip{font-size:.74rem}.p3-cap,.p3-cap.r{left:var(--gutter);right:var(--gutter);top:auto;bottom:6vh;translate:none;max-width:none;text-align:left}.p3-cap.c{left:var(--gutter);translate:none;text-align:left}}

/* 하이라이트 (가로로 넘기는 카드) */
.hl{display:grid;grid-auto-flow:column;grid-auto-columns:min(78vw,400px);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--gutter) 1rem;scrollbar-width:none;scroll-padding-inline:var(--gutter)}
.hl::-webkit-scrollbar{display:none}
.hl article{scroll-snap-align:start;border-radius:var(--tile);overflow:hidden;position:relative;aspect-ratio:3/4.3;background:#1c1c1f;color:#fff}
.hl article img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hl article::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.6),transparent 45%)}
.hl article div{position:absolute;left:1.5rem;right:1.5rem;top:1.5rem;z-index:1}
.hl article h3{font-size:1.45rem;letter-spacing:-.025em;line-height:1.3}
.hl article p{font-size:.92rem;color:#ddd;margin-top:.4rem}
.hl-ctl{display:flex;justify-content:flex-end;gap:.5rem;margin-top:1rem}
.hl-ctl button{width:44px;height:44px;border-radius:50%;border:0;background:#2a2a2e;color:#fff;font-size:1.1rem;cursor:pointer}
.hl-ctl button:hover{background:#3a3a3f}

/* 카메라 확대 장면 */
.zoom{position:relative;height:260vh}
.zoom-stage{position:sticky;top:52px;height:calc(100dvh - 52px);overflow:hidden;display:grid;place-items:center}
.zoom-frame{width:56vw;aspect-ratio:16/9;border-radius:var(--tile);overflow:hidden;will-change:width,border-radius}
.zoom-frame img{width:100%;height:100%;object-fit:cover}
.zoom-txt{position:absolute;inset:0;display:grid;place-items:center;text-align:center;pointer-events:none;padding:0 var(--gutter)}
.zoom-txt h2{font-size:clamp(2.4rem,1rem + 5vw,6.4rem);letter-spacing:-.05em;line-height:1;font-weight:900;color:#fff;text-shadow:0 4px 40px rgba(0,0,0,.5);opacity:0}
@media (max-width:760px){.zoom-frame{width:86vw;aspect-ratio:4/5}}

/* 성능 막대 */
.perf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,6rem);align-items:center}
.perf .im{border-radius:var(--tile);overflow:hidden;aspect-ratio:1}
.perf .im img{width:100%;height:100%;object-fit:cover}
.bars{display:flex;flex-direction:column;gap:1.6rem;margin-top:2.2rem}
.bars .row{display:flex;justify-content:space-between;font-size:.95rem;color:#d2d2d7;margin-bottom:.5rem}
.bars .row b{color:#fff;font-size:1.5rem;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.bars .tr{height:10px;border-radius:99px;background:#232326;overflow:hidden;position:relative}
.bars .tr i{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,#ff9a6b,var(--accent));transform-origin:left;transform:scaleX(var(--v))}
.bars .tr i.old{background:#4a4a50}
@media (max-width:900px){.perf{grid-template-columns:1fr}}

/* 배터리 큰 숫자 */
.batt{text-align:center}
.batt .big{font-size:clamp(5rem,2rem + 14vw,16rem);font-weight:900;letter-spacing:-.07em;line-height:.85;background:linear-gradient(180deg,#fff,#ff8a5c 120%);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.batt .big small{font-size:.28em;letter-spacing:-.02em}
.batt p{color:var(--sub-d);margin-top:1.2rem;font-size:1.15rem}
.batt-row{display:grid;grid-template-columns:repeat(3,1fr);margin-top:4rem;border-top:1px solid #2a2a2e;text-align:left}
.batt-row>div{padding:1.6rem 1.4rem 0;border-right:1px solid #2a2a2e}.batt-row>div:last-child{border:0}
.batt-row b{font-size:1.9rem;letter-spacing:-.03em;display:block}.batt-row>div>span{color:var(--sub-d);font-size:.92rem}
@media (max-width:760px){.batt-row{grid-template-columns:1fr}.batt-row>div{border-right:0;border-bottom:1px solid #2a2a2e;padding:1.2rem 0}}

/* 모델 비교 */
.cmp{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--line)}
.cmp>div{padding:2rem 1.6rem 2.4rem;border-right:1px solid var(--line);text-align:center}
.cmp>div:last-child{border-right:0}
.cmp .ph{height:220px;display:grid;place-items:center;margin-bottom:1.2rem}
.cmp .ph i{display:block;width:var(--w,96px);height:var(--h,200px);border-radius:22px;background:linear-gradient(160deg,var(--c1),var(--c2));box-shadow:inset 0 0 0 3px rgba(255,255,255,.25),0 18px 40px -16px rgba(0,0,0,.35);position:relative}
.cmp .ph i::after{content:"";position:absolute;left:10%;right:10%;top:7%;height:12%;border-radius:12px;background:rgba(0,0,0,.65)}
.cmp h3{font-size:1.6rem;letter-spacing:-.03em}
.cmp .pr{color:var(--sub);margin:.3rem 0 1.4rem}
.cmp dl{margin:0;display:flex;flex-direction:column;gap:1.1rem}
.cmp dt{font-size:.8rem;color:var(--sub)}.cmp dd{margin:.15rem 0 0;font-weight:600}
.cmp .new{display:inline-block;font-size:.72rem;font-weight:700;color:var(--accent);margin-bottom:.35rem}
@media (max-width:760px){.cmp{grid-template-columns:1fr}.cmp>div{border-right:0;border-bottom:1px solid var(--line)}}


/* ═════════ 비즈니스 ═════════ */
.bz-hero{position:relative;min-height:calc(100dvh - var(--hdr));display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;isolation:isolate;padding-top:6rem}
.bz-bg{position:absolute;inset:-10% 0;z-index:-2}.bz-bg img{width:100%;height:100%;object-fit:cover}
.bz-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(11,11,12,.96) 18%,rgba(11,11,12,.35) 70%,rgba(11,11,12,.55))}
.bz-hero h1{font-size:clamp(2.8rem,1rem + 6.4vw,7.4rem);line-height:1;letter-spacing:-.05em;font-weight:800}
.bz-hero .sub{font-size:clamp(1.05rem,1rem + .45vw,1.35rem);color:#d0d0d5;margin:1.4rem 0 2rem;max-width:30em}
.bz-hero .cta{display:flex;gap:.7rem;flex-wrap:wrap}
.bz-stats{display:grid;grid-template-columns:repeat(3,1fr);margin-top:clamp(3rem,8vh,6rem);border-top:1px solid rgba(255,255,255,.14);padding-bottom:2.5rem}
.bz-stats>div{padding:1.6rem 1rem 0 0}
.bz-stats b{display:block;font-size:clamp(1.8rem,1rem + 2.4vw,3.2rem);font-weight:800;letter-spacing:-.04em;line-height:1}
.bz-stats>div>span{color:var(--sub-d);font-size:.92rem}
@media (max-width:640px){.bz-stats{grid-template-columns:1fr 1fr}.bz-stats>div:last-child{grid-column:span 2}}

.ind{border-top:1px solid var(--line)}
.ind a{display:grid;grid-template-columns:70px minmax(0,1fr) minmax(0,1.1fr) 40px;align-items:center;gap:1.5rem;padding:1.6rem 0;border-bottom:1px solid var(--line);text-decoration:none;position:relative;transition:padding .45s var(--ease-move)}
.ind a::before{content:"";position:absolute;inset:0;background:var(--ink);transform:scaleY(0);transform-origin:bottom;transition:transform .45s var(--ease-move);z-index:-1}
.ind a{isolation:isolate}
.ind a:hover{color:#fff;padding-left:1.4rem;padding-right:1.4rem}
.ind a:hover::before{transform:scaleY(1);transform-origin:top}
.ind .no{font-size:.85rem;color:var(--sub);font-variant-numeric:tabular-nums}
.ind h3{font-size:clamp(1.5rem,1rem + 1.8vw,2.8rem);letter-spacing:-.035em;font-weight:700}
.ind p{color:var(--sub)}.ind a:hover p,.ind a:hover .no{color:#bdbdc3}
.ind i{font-size:1.6rem;transition:transform .4s var(--ease-move)}.ind a:hover i{transform:rotate(45deg);color:var(--accent)}
@media (max-width:760px){.ind a{grid-template-columns:40px 1fr 28px;gap:.8rem}.ind p{grid-column:2;grid-row:2}}
.ind-float{position:fixed;left:0;top:0;width:300px;aspect-ratio:4/3;border-radius:16px;overflow:hidden;pointer-events:none;z-index:30;opacity:0;visibility:hidden;box-shadow:0 30px 60px -20px rgba(0,0,0,.5)}
.ind-float img{width:100%;height:100%;object-fit:cover}

.flt{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2rem}
.flt button{font:inherit;font-size:.92rem;font-weight:600;height:42px;padding:0 1.15rem;border-radius:999px;border:1.5px solid #d4d4d9;background:#fff;color:#3a3a3f;cursor:pointer;transition:all var(--dur-micro) var(--ease-micro)}
.flt button:hover{border-color:var(--ink)}
.flt button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#fff}
.cases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.case-c{background:#fff;border-radius:var(--tile);overflow:hidden;display:flex;flex-direction:column}
.case-c.wide{grid-column:span 2;flex-direction:row}
.case-c.wide .im{flex:1.3}.case-c.wide .tx{flex:1;display:flex;flex-direction:column;justify-content:center}
.case-c .im{aspect-ratio:16/10;overflow:hidden}.case-c.wide .im{aspect-ratio:auto;min-height:340px}
.case-c img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease-enter)}
.case-c:hover img{transform:scale(1.05)}
.case-c .tx{padding:1.5rem 1.6rem 1.7rem}
.case-c .tg{font-size:.76rem;font-weight:700;color:var(--accent)}
.case-c h3{font-size:1.35rem;letter-spacing:-.025em;margin-top:.3rem}
.case-c p{color:var(--sub);margin-top:.5rem;font-size:.95rem}
.case-c dl{display:flex;gap:1.6rem;margin:1.2rem 0 0;padding-top:1rem;border-top:1px solid var(--line)}
.case-c dt{font-size:.76rem;color:var(--sub)}.case-c dd{margin:0;font-size:1.5rem;font-weight:800;letter-spacing:-.03em}
.case-c[hidden]{display:none}
@media (max-width:1000px){.cases{grid-template-columns:1fr 1fr}}
@media (max-width:680px){.cases{grid-template-columns:1fr}.case-c.wide{grid-column:auto;flex-direction:column}.case-c.wide .im{min-height:0;aspect-ratio:16/10}}

.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0;counter-reset:s;border-top:1px solid #2a2a2e}
.steps li{padding:2rem 1.5rem 0 0;position:relative}
.steps li::before{content:"";position:absolute;left:0;top:-1px;height:2px;width:40px;background:var(--accent)}
.steps b{font-size:.85rem;color:#ff8a5c;font-variant-numeric:tabular-nums}
.steps h3{font-size:1.6rem;letter-spacing:-.03em;margin:.6rem 0 .7rem}
.steps p{color:var(--sub-d);font-size:.95rem}
@media (max-width:860px){.steps{grid-template-columns:1fr 1fr;row-gap:2rem}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

.quote{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,6vw,6rem)}
.q-info{list-style:none;padding:0;margin:2rem 0 0;display:flex;flex-direction:column;gap:.7rem;font-weight:600}
.q-info li{display:flex;align-items:center;gap:.6rem}.q-info i{font-size:1.2rem;color:var(--accent)}
.qform{display:flex;flex-direction:column;gap:1rem;background:var(--paper);padding:clamp(1.4rem,3vw,2.4rem);border-radius:var(--tile)}
.qform .f2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.qform label{display:flex;flex-direction:column;gap:.4rem;font-size:.86rem;font-weight:600;color:#3a3a3f}
.qform input:not([type=checkbox]),.qform select,.qform textarea{font:inherit;font-size:1rem;font-weight:400;padding:.85rem 1rem;border-radius:12px;border:1.5px solid #dcdce0;background:#fff;color:var(--ink);min-height:50px;transition:border-color .2s}
.qform input:focus,.qform select:focus,.qform textarea:focus{outline:0;border-color:var(--accent)}
.qform label.agree{flex-direction:row;align-items:center;gap:.6rem;font-weight:500}
.qform label.agree input{width:20px;height:20px;accent-color:var(--accent)}
.qform .bad input,.qform .bad select,.qform .bad textarea,.qform label.bad{border-color:#e5484d;color:#e5484d}
.qform .btn{align-self:flex-start;height:52px;padding:0 2rem}
.q-msg{font-size:.92rem;min-height:1.4em}.q-msg.err{color:#e5484d}.q-msg.ok{color:#1f8a4c}
@media (max-width:900px){.quote{grid-template-columns:1fr}}
@media (max-width:560px){.qform .f2{grid-template-columns:1fr}}

/* ═════════ 회사 소개 ═════════ */
.mf-pin{min-height:calc(100dvh - var(--hdr));display:flex;align-items:center;padding-block:4rem}
.mf-txt{font-size:clamp(1.8rem,1rem + 3.2vw,4.4rem);font-weight:700;letter-spacing:-.035em;line-height:1.28;max-width:22em;color:#fff}
.js-motion .mf-txt .w{color:#3a3a3f}
.ab-nums{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.ab-nums>div{padding:1.8rem 1rem 0 0}
.ab-nums b{display:block;font-size:clamp(2.2rem,1rem + 3.4vw,4.4rem);font-weight:800;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums}
.ab-nums>div>span{color:var(--sub);margin-top:.6rem;display:block}
@media (max-width:760px){.ab-nums{grid-template-columns:1fr 1fr;row-gap:1.5rem}}
.tl{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);gap:clamp(2rem,6vw,6rem)}
.tl-side{position:sticky;top:calc(var(--hdr) + 3rem);align-self:start}
.tl-year{font-size:clamp(4.5rem,2rem + 10vw,12rem);font-weight:900;letter-spacing:-.06em;line-height:.9;color:var(--accent);font-variant-numeric:tabular-nums}
.tl-side p{color:var(--sub);margin-top:1rem;font-weight:600}
.tl-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:clamp(3rem,8vh,6rem)}
.tl-list li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.6rem;align-items:center;opacity:.35;transition:opacity .6s var(--ease-move)}
.tl-list li.on{opacity:1}
.tl-list img{border-radius:16px;aspect-ratio:4/3;object-fit:cover;width:100%}
.tl-list b{color:var(--accent);font-size:.9rem}
.tl-list h3{font-size:clamp(1.3rem,1rem + .9vw,1.8rem);letter-spacing:-.03em;margin:.4rem 0 .6rem}
.tl-list p{color:var(--sub)}
@media (max-width:860px){.tl{grid-template-columns:1fr}.tl-side{position:relative;top:0}.tl-year{display:none}.tl-list li{grid-template-columns:1fr;opacity:1}}

video.iv{width:100%;height:100%;object-fit:cover;display:block}
.green .bgim video{object-position:50% 60%}
.mega .wrap[hidden]{display:none}

.drag-hint{position:absolute;left:50%;bottom:4.2rem;translate:-50% 0;display:flex;align-items:center;gap:.45rem;font-size:.82rem;color:#d8d8dc;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(10px);padding:.4rem .9rem;border-radius:999px;pointer-events:none;transition:opacity .4s;white-space:nowrap;z-index:2}
.drag-hint i{font-size:1rem}
.hero-3d.dragging .drag-hint{opacity:0}
@media (max-width:900px){.drag-hint{bottom:3.6rem}}