/* 사업영역(business) — 인트로 히어로 + 4개 스튜디오 인터랙션 + CTA
   base.css(리셋·헤더/푸터·폰트) 위에 로드. 전부 .biz-page 스코프. */

:root{
    --ink:#0b0f19; --gray-700:#3d4655; --gray-600:#5a6474; --gray-500:#667085; --gray-400:#a2aab8; --gray-300:#c9cfd8;
    --line:#e8eaef; --band:#f7f8fa;
    --digital:#2f6fed; --pay:#0aa06e; --talk:#e56a05; --content:#7c3aed;
}
.biz-page{color:var(--ink);background:#fff;line-height:1.6}
.biz-page .wrap{max-width:1120px;margin:0 auto;padding:0 24px}  /* 헤더(.ek-header-inner)와 좌우 정렬 동일 */

/* ===== 메인 배너 (원래 카드 디자인 · 회사소개와 동일 규격) ===== */
.biz-page .biz-wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.biz-page .biz-hero{position:relative;overflow:hidden;color:#fff;padding:44px 0 60px;
    background:
        linear-gradient(180deg, rgba(8,11,20,.25) 0%, rgba(8,11,20,.32) 45%, rgba(8,11,20,.72) 100%),
        url('/img/business4.png') center/cover no-repeat, #0b1120}
.biz-page .biz-hero .biz-wrap{display:flex;flex-direction:column;min-height:58vh}
.biz-page .biz-hero-bottom{margin-top:auto}
.biz-page .biz-hero-bottom p{margin:0 0 16px;max-width:640px;color:#d7dce4;font-size:1.05rem;line-height:1.55}
.biz-page .biz-hero-bottom h1{margin:0;font-size:clamp(2.6rem,7.5vw,6rem);font-weight:800;line-height:1.03;letter-spacing:-.02em}

/* ===== 브리지: 스튜디오 인덱스 (좌 헤더 그대로 · 우 간결 리스트 + 순차 샤인) ===== */
.biz-page .bridge{padding:clamp(72px,9vw,104px) 0}
.biz-page .bridge .inner{display:grid;grid-template-columns:1fr 1.2fr;gap:64px;align-items:start}
.biz-page .bridge .b-eyebrow{display:block;margin-bottom:14px;color:#101828;font-size:.8rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.biz-page .bridge h2{font-size:clamp(26px,3.2vw,36px);font-weight:800;letter-spacing:-.03em;line-height:1.28;color:#101828}
.biz-page .bridge .b-desc{margin-top:18px;max-width:420px;color:#667085;font-size:1rem;line-height:1.75}
.biz-page .bridge .list{display:flex;flex-direction:column}
.biz-page .bridge .row{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;padding:19px 8px;border-bottom:1px solid #eef0f3}
.biz-page .bridge .row:first-child{border-top:1px solid #eef0f3}
.biz-page .bridge .row .info h3{font-size:17px;font-weight:800;letter-spacing:-.02em;color:#101828}
.biz-page .bridge .row .info p{margin-top:6px;color:#667085;font-size:13.5px;line-height:1.55}
.biz-page .bridge .row .word{display:flex;align-items:center;gap:12px;font-size:clamp(1.05rem,1.5vw,1.35rem);font-weight:800;letter-spacing:0;color:#c2c8d2}
.biz-page .bridge .row .word .en{color:#c2c8d2;transition:color .22s}
/* 메인 MERIT와 동일한 빛나는 방식 · 색만 스튜디오별 */
.biz-page .bridge .row:hover .word .en,.biz-page .bridge .row.on .word .en{
    background-image:linear-gradient(90deg,var(--gd) 0%,var(--gb) 25%,var(--gl) 50%,var(--gb) 75%,var(--gd) 100%);
    background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
    animation:ekGradMove 1.6s linear infinite}
@keyframes ekGradMove{from{background-position:0% center}to{background-position:-200% center}}
.biz-page .bridge .row .word i{font-style:normal;font-size:1rem;color:#cfd4dd;transition:transform .22s,color .22s}
.biz-page .bridge .row:hover .word i,.biz-page .bridge .row.on .word i{transform:translateX(4px);color:var(--c)}
.biz-page .bridge .row:nth-child(1){--c:var(--digital);--gd:#1e40af;--gb:#3b82f6;--gl:#7dd3fc}
.biz-page .bridge .row:nth-child(2){--c:var(--pay);--gd:#0a6b4a;--gb:#12b886;--gl:#7af0c4}
.biz-page .bridge .row:nth-child(3){--c:var(--talk);--gd:#b34600;--gb:#fb923c;--gl:#ffd8a8}
.biz-page .bridge .row:nth-child(4){--c:var(--content);--gd:#5a1fb0;--gb:#a78bfa;--gl:#e2d6ff}
@media(prefers-reduced-motion:reduce){.biz-page .bridge .row:hover .word .en,.biz-page .bridge .row.on .word .en{animation:none;background:none;-webkit-text-fill-color:var(--c);color:var(--c)}}

/* ===== BLOCK ===== */
.biz-page .block{padding:64px 0;scroll-margin-top:24px}
.biz-page .block:first-of-type{padding-top:56px}
.biz-page .block .inner{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}

.biz-page .b-head{max-width:480px;margin:0;text-align:left}  /* 텍스트: 셀 왼쪽 끝(컨테이너 좌측)에 붙임 */
.biz-page .b-head .tag{display:flex;align-items:center;gap:10px;font-size:12.5px;font-weight:800;letter-spacing:.11em;color:var(--c)}
.biz-page .b-head .tag .no{font-size:12.5px;font-weight:900;color:#c2c8d2;letter-spacing:.02em}
.biz-page .b-head .tag .li{width:22px;height:1px;background:#dde1e8}
.biz-page .b-head h2{margin-top:12px;font-size:30px;font-weight:800;letter-spacing:-.04em;line-height:1.32}
.biz-page .b-head h2 .sm{display:block;margin-top:11px;font-size:17px;font-weight:700;color:var(--c)}
.biz-page .b-head .desc{margin-top:16px;font-size:16px;color:var(--gray-600);line-height:1.7}
.biz-page .b-head .desc b{color:var(--gray-700);font-weight:700}
.biz-page .b-head .go{margin-top:30px;display:inline-flex;align-items:center;gap:9px;font-size:15px;font-weight:800;
    color:#fff;background:var(--c);padding:14px 26px;border-radius:999px;transition:filter .2s,transform .2s}
.biz-page .b-head .go:hover{filter:brightness(1.08);transform:translateY(-3px)}
.biz-page .b-head .go svg{width:15px;height:15px;transition:transform .2s}
.biz-page .b-head .go:hover svg{transform:translateX(3px)}

.biz-page .stage *{animation-play-state:paused;animation-iteration-count:1;animation-fill-mode:forwards}
.biz-page .stage.play *{animation-play-state:running}
.biz-page .stage{position:relative;min-height:420px;display:flex;align-items:center;justify-content:flex-end}  /* 비주얼: 셀 오른쪽 끝(컨테이너 우측)에 붙임 */
.biz-page .stage::before{content:"";position:absolute;width:340px;height:340px;border-radius:50%;background:var(--c);opacity:.07;filter:blur(20px)}
.biz-page .b-digital{--c:var(--digital)} .biz-page .b-pay{--c:var(--pay)}
.biz-page .b-talk{--c:var(--talk)} .biz-page .b-content{--c:var(--content)}

/* ===== 01 DIGITAL : 웹 + 앱 만들기 ===== */
.biz-page .devvisual{position:relative;width:100%;max-width:480px;height:420px;border-radius:20px;background:#f5f7fa;overflow:hidden;display:flex;align-items:center;justify-content:center}
.biz-page .dwrap{position:relative;width:352px}
.biz-page .brw{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 24px 48px -26px rgba(11,15,25,.4);opacity:0;animation:fadeup .6s ease-out .1s forwards}
.biz-page .brw .bar{display:flex;align-items:center;gap:6px;padding:11px 13px;background:#eef1f6}
.biz-page .brw .bar i{width:8px;height:8px;border-radius:50%;background:#cfd5df}
.biz-page .brw .bar .url{margin-left:8px;flex:1;height:17px;border-radius:5px;background:#fff}
.biz-page .brw .sc{padding:16px;height:210px}
.biz-page .brw .hd{height:52px;border-radius:8px;background:linear-gradient(120deg,#cfe0fb,#eaf1fd);transform-origin:left;transform:scaleX(0);animation:grow .5s ease-out .5s forwards}
.biz-page .brw .cols{display:flex;gap:9px;margin-top:12px}
.biz-page .brw .cols i{flex:1;height:66px;border-radius:8px;background:#eef1f6;opacity:0;animation:fadeup .45s ease-out forwards}
.biz-page .brw .cols i:nth-child(1){animation-delay:.95s}.biz-page .brw .cols i:nth-child(2){animation-delay:1.1s}.biz-page .brw .cols i:nth-child(3){animation-delay:1.25s}
.biz-page .brw .ln{margin-top:14px}
.biz-page .brw .ln i{display:block;height:9px;border-radius:5px;background:#eef1f6;margin-bottom:8px;transform-origin:left;transform:scaleX(0);animation:grow .45s ease-out forwards}
.biz-page .brw .ln i:nth-child(1){width:76%;animation-delay:1.5s}.biz-page .brw .ln i:nth-child(2){width:54%;animation-delay:1.65s}
@keyframes grow{to{transform:scaleX(1)}}
@keyframes fadeup{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.biz-page .dph{position:absolute;right:-24px;bottom:-18px;width:138px;height:236px;background:#fff;border-radius:20px;box-shadow:0 22px 40px -20px rgba(11,15,25,.4);padding:16px 13px;display:flex;flex-direction:column;gap:9px;opacity:0;animation:fadeup .6s ease-out 1.9s forwards}
.biz-page .dph .h{height:40px;border-radius:8px;background:linear-gradient(120deg,#cfe0fb,#eaf1fd)}
.biz-page .dph i{display:block;height:8px;border-radius:4px;background:#eef1f6}
.biz-page .dph i:nth-of-type(1){width:82%}.biz-page .dph i:nth-of-type(2){width:58%}
.biz-page .dph .gd{margin-top:auto;display:grid;grid-template-columns:1fr 1fr;gap:7px}
.biz-page .dph .gd b{display:block;height:38px;border-radius:7px;background:#eef1f6}
.biz-page .dbadge{position:absolute;left:-8px;top:-16px;display:inline-flex;align-items:center;gap:10px;background:#0f1c30;color:#fff;padding:12px 18px;border-radius:999px;white-space:nowrap;box-shadow:0 18px 34px -18px rgba(11,15,25,.55);opacity:0;animation:fadeup .6s ease-out 2.5s forwards}
.biz-page .dbadge .dot{position:relative;width:8px;height:8px;border-radius:50%;background:#3ddc97}
.biz-page .dbadge .dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid #3ddc97;opacity:.5;animation:ping 2.2s ease-out infinite}
@keyframes ping{0%{transform:scale(.6);opacity:.7}100%{transform:scale(1.5);opacity:0}}
.biz-page .dbadge .tx{font-size:13px;font-weight:700;color:#c9d5e6}
.biz-page .dbadge .dv{width:1px;height:13px;background:rgba(255,255,255,.18)}
.biz-page .dbadge b{font-size:13.5px;font-weight:900;letter-spacing:-.02em}

/* ===== 02 PAY : 카드 → 체크 모핑 ===== */
.biz-page .payvisual{position:relative;width:100%;max-width:480px;height:420px;border-radius:20px;background:#f5f7fa;overflow:hidden;display:flex;align-items:flex-end;justify-content:center}
.biz-page .arch{position:relative;width:262px;height:360px;background:#fff;border-radius:34px 34px 0 0;overflow:hidden;box-shadow:0 -6px 30px -14px rgba(11,15,25,.25)}
.biz-page .arch::before{content:"";position:absolute;z-index:3;left:50%;top:12px;transform:translateX(-50%);width:58px;height:5px;border-radius:5px;background:#e6eaef}
.biz-page .cardglow{position:absolute;z-index:0;left:50%;top:46%;width:200px;height:200px;margin-left:-100px;margin-top:-100px;border-radius:50%;background:#e2f6ec;opacity:0;animation:glowpulse 8.5s ease-in-out infinite}
@keyframes glowpulse{0%,12%{opacity:0;transform:scale(.72)}19%{opacity:1;transform:scale(1.12)}31%{opacity:1;transform:scale(.88)}43%{opacity:1;transform:scale(1.12)}52%{opacity:1;transform:scale(.95)}58%,100%{opacity:0;transform:scale(.82)}}
.biz-page .morphwrap{position:absolute;z-index:1;left:50%;top:46%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;animation:slidein 8.5s ease-in-out infinite}
@keyframes slidein{0%{transform:translate(-50%,calc(-50% + 250px))}14%,100%{transform:translate(-50%,-50%)}}
.biz-page .morph{position:relative;width:180px;height:236px;border-radius:10px;background:linear-gradient(150deg,#10b981,#05664a);box-shadow:0 20px 38px -18px rgba(4,80,56,.55);display:flex;align-items:center;justify-content:center;animation:morph 8.5s ease-in-out infinite}
.biz-page .morph .chip{position:absolute;left:22px;top:26px;width:34px;height:25px;border-radius:5px;background:rgba(255,255,255,.62);animation:chipout 8.5s ease-in-out infinite}
.biz-page .morph svg{width:38px;height:38px;color:#fff;opacity:0;animation:chkin 8.5s ease-in-out infinite}
@keyframes morph{0%{opacity:0;width:148px;height:194px;border-radius:10px}14%{opacity:1;width:148px;height:194px;border-radius:10px}44%{opacity:1;width:148px;height:194px;border-radius:10px}58%{opacity:1;width:68px;height:68px;border-radius:50%}100%{opacity:1;width:80px;height:80px;border-radius:50%}}
@keyframes chipout{0%,42%{opacity:1}50%,100%{opacity:0}}
@keyframes chkin{0%,52%{opacity:0}62%,100%{opacity:1}}
.biz-page .donetext{position:absolute;left:0;right:0;top:63%;text-align:center;padding:0 20px;font-size:24px;font-weight:800;letter-spacing:-.03em;line-height:1.45;color:#3d4655;opacity:0;animation:textin 8.5s ease-in-out infinite}
@keyframes textin{0%,58%{opacity:0;transform:translateY(6px)}68%,100%{opacity:1;transform:none}}

/* ===== 03 TALK : 메시지가 아래에서 위로 밀려 올라가는 대화 ===== */
.biz-page .talkvisual{position:relative;width:100%;max-width:480px;height:420px;border-radius:20px;background:#f5f7fa;overflow:hidden}
.biz-page .chat{position:absolute;left:20px;right:20px;top:0;display:flex;flex-direction:column;gap:11px;transition:transform .7s cubic-bezier(.4,.1,.2,1)}
.biz-page .msg{background:#fff;border-radius:10px;padding:18px 20px;box-shadow:0 10px 24px -18px rgba(11,15,25,.4);display:flex;gap:12px;align-items:flex-start;opacity:0;transform:translateY(14px) scale(.98);transition:opacity .42s ease,transform .42s ease}
.biz-page .msg.show{opacity:1;transform:none}
.biz-page .msg .av{width:32px;height:32px;border-radius:10px;background:#fee500;flex:none;display:flex;align-items:center;justify-content:center;font-size:14px}
.biz-page .msg.sms .av{background:#e9eef5}
.biz-page .msg .av.kk{background:#fee500}.biz-page .msg .av.kk svg{width:19px;height:19px}
.biz-page .msg .av.tp{width:auto;min-width:44px;padding:0 9px;height:26px;border-radius:8px;font-size:11.5px;font-weight:800;letter-spacing:.04em;color:#3c6ad0;background:#e9f0fd;margin-top:2px}
.biz-page .msg .av.tp.lms{color:#7a5ad0;background:#efeafc}
.biz-page .msg .av.tp.mms{color:#0f8f6b;background:#e4f6ef}
.biz-page .msg .t{min-width:0}
.biz-page .msg .t .mmsimg{display:block;height:158px;border-radius:10px;margin-bottom:9px;background:url('/img/mms-summer.png') center/cover no-repeat,#eaf2fb}
.biz-page .msg .t b{display:block;font-size:15px;font-weight:800}
.biz-page .msg .t span{display:block;margin-top:5px;font-size:14px;color:var(--gray-600);line-height:1.55}
.biz-page .msg .t span em{font-style:normal;color:var(--talk);font-weight:900}
.biz-page .msg .t span.clamp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.biz-page .msg .t .rows{margin-top:11px}
.biz-page .msg .t .rows i{display:block;font-style:normal;font-size:12.5px;color:var(--gray-600);line-height:1.95;padding-left:13px;position:relative}
.biz-page .msg .t .rows i::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:0;height:0;border-left:5px solid #9aa6b6;border-top:3.5px solid transparent;border-bottom:3.5px solid transparent}
.biz-page .msg .time{margin-left:auto;font-size:12px;color:var(--gray-400);white-space:nowrap}

/* ===== 04 CONTENT : 하나의 기획 → 채널별 규격 ===== */
.biz-page .contentvisual{position:relative;width:100%;max-width:480px;height:420px;border-radius:20px;background:#f5f7fa;overflow:hidden;padding:24px;display:flex;flex-direction:column}
.biz-page .cmain{position:relative;height:150px;border-radius:9px;overflow:hidden;flex:none;background:#fff;padding:16px 18px;box-shadow:0 12px 28px -20px rgba(11,15,25,.45);opacity:0;animation:fadeup .7s ease-out .2s forwards}
.biz-page .cmain .doc{display:flex;align-items:center;gap:9px}
.biz-page .cmain .doc .di{width:26px;height:26px;border-radius:8px;background:#f0e7fd;color:var(--content);display:flex;align-items:center;justify-content:center;flex:none}
.biz-page .cmain .doc .di svg{width:14px;height:14px}
.biz-page .cmain .doc b{font-size:13.5px;font-weight:800}
.biz-page .cmain .doc span{margin-left:auto;font-size:10.5px;font-weight:800;color:var(--content);background:#f3ecfd;padding:4px 9px;border-radius:6px}
.biz-page .cmain .lines{margin-top:14px}
.biz-page .cmain .lines i{display:block;height:8px;border-radius:4px;background:#eef0f5;margin-bottom:8px;transform-origin:left;transform:scaleX(0);animation:linein .5s ease-out forwards}
.biz-page .cmain .lines i:nth-child(1){width:82%;animation-delay:.7s}.biz-page .cmain .lines i:nth-child(2){width:66%;animation-delay:1s}
.biz-page .cmain .lines i:nth-child(3){width:74%;animation-delay:1.3s}.biz-page .cmain .lines i:nth-child(4){width:48%;animation-delay:1.6s}
@keyframes linein{to{transform:scaleX(1)}}
.biz-page .cflow{display:flex;align-items:center;justify-content:center;gap:8px;margin:16px 0 14px;flex:none;font-size:12px;font-weight:800;color:#6b4aa8;opacity:0;animation:fadeup .6s ease-out 2.6s forwards}
.biz-page .cflow svg{width:15px;height:15px}
.biz-page .couts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;flex:1}
.biz-page .cout{position:relative;border-radius:8px;overflow:hidden;background:#e6dbf8;display:flex;align-items:flex-end;padding:9px;opacity:0;animation:fadeup .6s ease-out forwards}
.biz-page .cout:nth-child(1){animation-delay:3.2s;background:linear-gradient(160deg,#a56ff8,#4b1f9e)}
.biz-page .cout:nth-child(2){animation-delay:3.9s;background:linear-gradient(160deg,#b283fa,#5326b5)}
.biz-page .cout:nth-child(3){animation-delay:4.6s;background:linear-gradient(160deg,#8b4bf0,#2f1266)}
.biz-page .cout span{position:relative;z-index:2;font-size:10.5px;font-weight:800;color:#fff;background:rgba(0,0,0,.22);padding:4px 8px;border-radius:6px}
.biz-page .cout .pl{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center}
.biz-page .cout .pl svg{width:14px;height:14px;color:#4b1f9e;margin-left:2px}

/* 스크롤 등장 제거 — 즉시 노출 */
.biz-page .reveal,.biz-page .reveal.in{opacity:1;transform:none;animation:none}
@keyframes rise{to{opacity:1;transform:none}}

/* ===== CTA (다크) ===== */
.biz-page .cta{background:radial-gradient(120% 120% at 50% 0%,#132239 0%,#0b1424 70%);color:#fff;padding:clamp(80px,10vw,116px) 0;margin-top:40px}
.biz-page .cta .wrap{text-align:center}
.biz-page .cta-eyebrow{display:block;margin-bottom:14px;font-size:.78rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#93b4ff}
.biz-page .cta h2{font-size:clamp(26px,3.4vw,38px);font-weight:800;letter-spacing:-.03em;line-height:1.3}
.biz-page .cta .sub{max-width:470px;margin:16px auto 0;color:#aeb9d0;font-size:1.05rem;line-height:1.7}
.biz-page .cta .acts{margin-top:34px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.biz-page .cta .btn{display:inline-flex;min-height:54px;align-items:center;justify-content:center;gap:9px;padding:0 30px;border:1px solid;border-radius:999px;font-weight:800;font-size:15.5px;transition:transform .2s,background .2s,border-color .2s,box-shadow .2s}
.biz-page .cta .btn i{font-size:17px}
.biz-page .cta .btn.wht{border-color:#fff;background:#fff;color:#12224a;box-shadow:0 14px 34px -12px rgba(0,0,0,.55)}
.biz-page .cta .btn.wht:hover{transform:translateY(-3px);background:#fff;box-shadow:0 22px 46px -12px rgba(0,0,0,.62)}
.biz-page .cta .btn.ghostw{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.1);color:#fff}
.biz-page .cta .btn.ghostw:hover{transform:translateY(-3px);border-color:#fff;background:rgba(255,255,255,.2)}

@media (max-width:900px){
    .biz-page .biz-hero{padding:28px 0 40px}
    .biz-page .biz-hero .biz-wrap{min-height:46vh}
    .biz-page .biz-hero-bottom h1{font-size:clamp(2.1rem,8vw,3rem)}
    .biz-page .biz-hero-bottom p{font-size:.98rem;margin-bottom:12px}
    .biz-page .bridge .inner{grid-template-columns:1fr;gap:30px}
    .biz-page .block{padding:44px 0}
    .biz-page .block .inner{grid-template-columns:1fr;gap:44px}
    .biz-page .stage{min-height:320px;justify-content:center}  /* 모바일 단일 컬럼: 비주얼 가운데 */
    .biz-page .cta .acts{flex-direction:column}
    .biz-page .cta .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
    .biz-page .reveal{opacity:1!important;transform:none!important;animation:none!important}
    .biz-page .brw,.biz-page .brw .hd,.biz-page .brw .cols i,.biz-page .brw .ln i,.biz-page .dph,.biz-page .dbadge,
    .biz-page .cardglow,.biz-page .morphwrap,.biz-page .morph,.biz-page .morph .chip,.biz-page .morph svg,.biz-page .donetext,
    .biz-page .msg,.biz-page .cmain,.biz-page .cmain .lines i,.biz-page .cflow,.biz-page .cout{animation:none!important}
    .biz-page .msg{opacity:1;transform:none}
}