*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
  :root{
    /* 글꼴 — 한 곳에서만 정한다. 예전엔 'Space Grotesk'/'Noto Sans KR' 이 48곳에 흩어져 있어
       글꼴을 바꾸려면 48곳을 고쳐야 했다(그래서 실제로 어긋난 곳도 있었다 — 한글 제목에
       Space Grotesk 를 걸어 두면 한글이 없는 글꼴이라 시스템 폰트로 떨어졌다). */
    --font-sans:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,sans-serif;
    --bg:#F6FAF9; --ink:#1A2826;
    --mint-pale:#E2F4F1; --mint:#7FCAC2; --mint-mid:#4FA89F; --mint-dark:#2D857B;
    --coral-pale:#FDE8E5; --coral:#F4998A; --coral-dark:#DA5849;
    --yellow:#F6CD63; --yellow-dark:#C99410;
    --lav:#B9ABE6; --lav-dark:#6E5BC0;
    --muted:#5C8580; --white:#FFFFFF; --border:rgba(26,40,38,0.12);
  --ease-spring:cubic-bezier(0.22,1,0.36,1); --ease-float:ease-in-out;
  --dur-float:5s; --dur-pulse:2s;
  /* ── 본문 타입 눈금 (2026-08-24) ─────────────────────────────────────────
     본문 구간(12~17px)에 크기가 13가지 섞여 있었다 — 그때그때 0.82rem·0.84rem 식으로
     정한 값들이 쌓인 결과다(사용자 지적). 아래 네 단계로만 쓴다.
     ★ 새 스타일에 임의의 rem 값을 적지 말고 이 변수를 쓴다. */
  --fs-xs:0.78rem;   /* 12.5px — 배지·캡션·작은 라벨 */
  --fs-sm:0.875rem;  /* 14px   — 카드 본문·보조 설명 */
  --fs-md:0.95rem;   /* 15.2px — 본문 */
  --fs-lg:1.05rem;   /* 16.8px — 리드 문단 */
  }
  html{scroll-behavior:smooth;scroll-padding-top:76px;;-webkit-text-size-adjust:100%;text-size-adjust:100%;}
  body{font-family:var(--font-sans);background:var(--bg);color:var(--ink);line-height:1.7;overflow-x:hidden;}

  /* Custom cursor follower */
  .cursor-glow{position:fixed;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(127,202,194,0.25),transparent 70%);pointer-events:none;z-index:1;transform:translate(-50%,-50%);transition:opacity 0.3s;mix-blend-mode:multiply;}

  /* NAV - non-overlap sticky header */
  nav{
    position:sticky;
    top:0;
    left:0;
    right:0;
    z-index:9999;
    height:76px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 4%;
    background:var(--ink);
    border-bottom:1px solid rgba(255,255,255,0.1);
    box-shadow:0 8px 24px rgba(0,0,0,.12);
    mix-blend-mode:normal;
  }
  .logo{width:165px; height:40px; background: url(../images/teammoca_logo_w.svg) no-repeat; background-size: 100%; cursor:pointer;}
  .logo .sr-only{position:absolute; width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  
  .nl{list-style:none;display:flex;gap:2rem;align-items:center;}
  .nl a{text-decoration:none;color:#fff;font-size:var(--fs-sm);font-weight:500;position:relative;}
  .nl a small{display:none;}
  .nl a::after{content:'';position:absolute;left:0;bottom:-3px;width:0;height:1.5px;background:var(--mint);transition:width 0.3s;}
  .nl a:hover::after{width:100%;}
  /* 상단 고정 CTA(데모 진입) — 일반 메뉴와 구분되도록 민트 채움 알약형. 밑줄 애니메이션은 끈다 */
  .nl-cta a{display:inline-flex;align-items:center;gap:0.4rem;padding:0.55rem 1.15rem;border-radius:100px;background:var(--mint);color:var(--ink);font-weight:700;white-space:nowrap;cursor:pointer;transition:background 0.25s,color 0.25s,transform 0.25s;}
  .nl-cta a:hover{background:var(--mint-dark);color:#fff;transform:translateY(-1px);}
  .nl-cta a::after{display:none;}
  .nl-react-cta{display:none;}

  /* ─────────────────────────────────────────────────────────────────────────
     모바일 메뉴 — MOCA(vendor/moca/css/mobile.css)의 방식을 그대로 가져왔다:
     햄버거 버튼(열리면 X) + 반투명 백드롭 + 옆에서 밀려 나오는 패널.
     종전에는 880px 아래에서 .nl li 를 전부 display:none 으로 감춰버려서
     모바일에는 메뉴가 아예 없었다(CTA 하나만 남음).
     패널은 오른쪽에서 나온다 — MOCA 는 좌측 사이드바라 왼쪽이지만,
     여기는 로고가 왼쪽·메뉴가 오른쪽인 상단바라 나오는 쪽을 맞췄다.
     데스크톱에서는 버튼·백드롭이 display:none 이라 이 블록이 관여하지 않는다.
     ───────────────────────────────────────────────────────────────────────── */
  .nav-burger{display:none;width:38px;height:38px;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:none;border:none;cursor:pointer;padding:4px;border-radius:6px;flex-shrink:0;transition:background 0.15s;}
  .nav-burger:hover{background:rgba(255,255,255,0.08);}
  .nav-burger span{display:block;width:22px;height:2px;background:var(--mint);border-radius:2px;transition:transform 0.22s,opacity 0.22s;}
  /* 열린 상태: 위·아래 막대를 가운데로 모아 X, 가운데 막대는 숨김 */
  .nav-burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .nav-burger.is-open span:nth-child(2){opacity:0;}
  .nav-burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
  .nav-backdrop{display:none;position:fixed;inset:0;background:rgba(20,30,28,0.55);z-index:9998;}
  .nav-backdrop.on{display:block;}


  /* HERO — kinetic typography */
  .hero{min-height:calc(100vh - 76px);display:flex;flex-direction:column;justify-content:center;padding:5rem 4% 7.5rem;position:relative;background:var(--ink);overflow:hidden;}
  .hero-shapes{position:absolute;inset:0;z-index:0;}
  .shape{position:absolute;border-radius:50%;filter:blur(50px);opacity:0.5;animation:float 8s ease-in-out infinite;}
  .sh1{width:380px;height:380px;background:var(--mint-dark);top:5%;right:8%;animation-delay:0s;}
  .sh2{width:300px;height:300px;background:var(--coral-dark);bottom:8%;left:10%;animation-delay:2s;}
  .sh3{width:240px;height:240px;background:var(--lav-dark);top:40%;left:45%;animation-delay:4s;}
  @keyframes float{0%,100%{transform:translate(0,0) scale(1);}33%{transform:translate(30px,-40px) scale(1.1);}66%{transform:translate(-20px,30px) scale(0.95);}}

  .hero-content{position:relative;z-index:2;max-width:1200px;margin:0 auto;width:100%;}
  .hero-eyebrow{display:inline-flex;align-items:center;gap:0.5rem;color:var(--mint);font-family:var(--font-sans);font-size:var(--fs-sm);font-weight:500;letter-spacing:2px;text-transform:uppercase;margin-bottom:1.5rem;opacity:0;animation:fadeUp 0.8s 0.2s forwards;}
  .hero-eyebrow .dot{width:8px;height:8px;background:var(--mint);border-radius:50%;animation:pulse var(--dur-pulse) var(--ease-float) infinite;}
  @keyframes pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:0.4;transform:scale(1.4);}}

  .hero h1{font-family:var(--font-sans);font-size:clamp(3rem,9vw,6rem);font-weight:700;line-height:0.95;color:#fff;letter-spacing:-3px;margin-bottom:2rem;position:relative;opacity:0;animation:fadeUp 0.8s 0.3s var(--ease-spring) forwards;}
  .hero h1:before{content:''; display:block; width:200px; height:200px; background:url(../images/bl_study.svg) no-repeat; background-size: 100%; position: absolute; right: 0; top:17%;}
  .hero h1 .line{display:block;}
  .hero h1 .line span{display:inline-block;}
  /* 강조어+조사(MOCA가)는 함께 줄바꿈 — 조사 한 글자가 혼자 떨어지면 우스꽝스럽다 */
  .hero h1 .kw{white-space:nowrap;}
  .grad-text{background:var(--yellow);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}

  .hero-bottom{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:2rem;opacity:0;animation:fadeUp 0.8s 0.9s forwards;}
  .hero-desc{color:var(--white);font-size:var(--fs-lg);line-height:1.8;}
  .hero-cta{display:inline-flex; cursor: pointer; align-items:center;gap:0.75rem;border: 4px solid var(--mint); color: var(--white);padding:1rem 2rem;border-radius:100px;text-decoration:none;font-weight:500;font-size:var(--fs-md);transition:transform 0.3s,background 0.3s;white-space:nowrap;}
  .hero-cta:hover{transform:scale(1.05);background:#00000080;}
  .hero-cta-group{display:flex;gap:1rem;flex-wrap:wrap;align-items:center;}
  .hero-cta-alt{border-color:var(--mint);background:var(--mint);color:var(--ink);}
  .hero-cta-alt:hover{transform:scale(1.05);background:var(--mint-dark);border-color:var(--mint-dark);color:var(--white);}
  @keyframes fadeUp{from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:translateY(0);}}

  /* scroll — 무한 가로 흐름. 히어로 하단 marquee 를 제거(2026-07-16)한 뒤로는
     .cta-bg-text(CTA 섹션 배경 대형 텍스트)만 쓴다. 지우면 그쪽이 멈추므로 남겨둔다. */
  @keyframes scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}

  /* HORIZONTAL SCROLL PRODUCTS */
  .h-scroll-sec{padding:6rem 0 5rem;position:relative;}
  .h-scroll-head{max-width:1200px;margin:0 auto 3rem;padding:0 4%;}
  .sec-label{font-family:var(--font-sans);font-size:var(--fs-xs);font-weight:600;letter-spacing:2px;color:var(--coral-dark);text-transform:uppercase;margin-bottom:0.75rem;}
  .sec-title{font-family:var(--font-sans);font-size:clamp(2rem,5vw,3.5rem);font-weight:700;letter-spacing:-1.5px;line-height:1.1;}
  .sec-title em{font-style:normal;color:var(--mint-dark);}
  .scroll-hint-h{font-size:var(--fs-xs);color:var(--muted);margin-top:0.75rem;display:flex;align-items:center;gap:0.5rem;}
  .scroll-hint-h .arrow-anim{display:inline-block;animation:slideX 1.4s infinite;}
  @keyframes slideX{0%,100%{transform:translateX(0);}50%{transform:translateX(6px);}}

  .h-track{display:flex;gap:1.5rem;overflow-x:auto;padding:1rem 4% 2rem;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--mint) transparent;}
  .h-track::-webkit-scrollbar{height:8px;}
  .h-track::-webkit-scrollbar-thumb{background:var(--mint);border-radius:10px;}
  .h-track::-webkit-scrollbar-track{background:var(--mint-pale);border-radius:10px;}
  .h-card{flex:0 0 380px;scroll-snap-align:center;border-radius:24px;padding:2.5rem;min-height:420px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;transition:transform 0.4s;}
  .h-card:hover{transform:translateY(-10px);}
  .hc-a{background:linear-gradient(150deg,#E2F4F1,#A8E0D8);}
  .hc-b{background:linear-gradient(150deg,#FDE8E5,#F8C2B8);}
  .hc-c{background:linear-gradient(150deg,#FEF6E0,#F8DC98);}
  .hc-d{background:linear-gradient(150deg,#EEEAFA,#CABEEE);}
  .hc-num{font-family:var(--font-sans);font-size:5rem;font-weight:700;opacity:0.18;line-height:1;letter-spacing:-3px;}
  .hc-body h3{font-family:var(--font-sans);font-size:1.9rem;font-weight:700;margin-bottom:0.5rem;letter-spacing:-1px;}
  .hc-tag{font-size:var(--fs-xs);font-weight:600;letter-spacing:1.5px;text-transform:uppercase;opacity:0.5;margin-bottom:1rem;}
  .hc-body p{font-size:var(--fs-md);line-height:1.7;opacity:0.75;margin-bottom:1.25rem;}
  .hc-feats{list-style:none;display:flex;flex-wrap:wrap;gap:0.5rem;}
  .hc-feats li{background:rgba(255,255,255,0.6);font-size:var(--fs-xs);padding:0.3rem 0.8rem;border-radius:100px;font-weight:500;}

  /* MOCA — split scroll reveal */
  .MOCA-sec{background:linear-gradient(165deg,#E8F6F3 0%,#CDEDE7 100%);color:var(--ink);padding:7rem 4%;position:relative;overflow:hidden;}
  .MOCA-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center;}
  /* ★ .reveal 은 더 이상 숨기지 않는다 — 콘텐츠는 처음부터 보인다.
     종전에는 opacity:0 으로 두고 스크롤 시 .in 을 붙여 나타냈는데, 두 가지 문제가 있었다.
      ① 대상이 860px 짜리 큰 블록이라 30% 가 보일 때까지 **빈 화면이 길게 이어지다 툭 튀어나왔다**(사용자 지적).
      ② main.js 는 'visible', CSS 는 '.in' 을 써서 두 이름이 어긋나 있었다 — 관찰자가 안 돌면
         콘텐츠가 영원히 안 보이는 상태가 된다. 마케팅 페이지의 본문이 JS 성공 여부에 걸리면 안 된다.
     등장 효과가 필요하면 화면에 들어오기 전에 미리 끝나도록 만들어야지, 본문을 숨기는 방식은 쓰지 않는다. */
  .reveal{opacity:1;transform:none;}
  .MOCA-sec .sec-label{color:var(--mint-dark);}
  .MOCA-title{font-family:var(--font-sans);font-size:clamp(2.2rem,4.5vw,3.5rem);font-weight:700;letter-spacing:-1.5px;line-height:1.1;margin-bottom:1.5rem;color:var(--ink);}
  .MOCA-title em{font-style:normal;color:var(--mint-dark);}
  .MOCA-desc{color:var(--ink);line-height:1.9;margin-bottom:1.5rem;}
  .MOCA-desc strong{color:var(--mint-dark);font-weight:500;}
  .MOCA-desc strong.c{color:var(--coral-dark);}

  .render-viz{background:#fff;border:1px solid var(--border);border-radius:20px;padding:2rem;box-shadow:0 12px 32px rgba(45,133,123,0.1);}
  .rv-l{font-family:var(--font-sans);font-size:var(--fs-xs);font-weight:600;letter-spacing:1px;color:var(--mint-dark);text-transform:uppercase;margin-bottom:1.5rem;}
  .rv-bars{display:flex;flex-direction:column;gap:1.25rem;}
  .rv-item{}
  .rv-item .lbl{display:flex;justify-content:space-between;font-size:var(--fs-xs);margin-bottom:0.5rem;}
  .rv-item .lbl .name{font-weight:500;}
  .rv-bar{height:38px;border-radius:10px;display:flex;align-items:center;padding:0 1rem;font-weight:500;color:var(--white);position:relative;overflow:hidden;background:var(--bg);}
  .rv-fill{position:absolute;left:0;top:0;bottom:0;border-radius:10px;width:0;transition:width 1.2s cubic-bezier(0.22,1,0.36,1);}
  .rv-fill.go{}
  .rv-others-fill{background:var(--coral);}
  .rv-MOCA-fill{background:var(--mint-mid);}
  .rv-bar{background:#666;}
  .rv-bar .txt{position:relative;z-index:1;font-size:var(--fs-xs);}
  .rv-steps{font-size:var(--fs-xs);color:var(--muted);margin-top:0.35rem;}

  
.ai-banner{
  margin-top:1.8rem;
  background:#fff;
  border-radius:28px;
  overflow:hidden;
  border:1px solid #dfe7e5;
  box-shadow:0 20px 50px rgba(0,0,0,.08);
}
.ai-header{
  background:linear-gradient(135deg,#1A2826,#223532);
  color:#fff;
  padding:18px 24px;
  display:flex;
  align-items:center;
  gap:12px;
}
.ai-header-icon{
  width:40px;height:40px;border-radius:12px;
  background:rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center;
  font-size:1.2rem;
}
.ai-header h4{font-size:1.15rem;font-weight:700;margin:0;}
.ai-header p{font-size:var(--fs-sm);color:var(--mint);margin:0;}
.ai-chat{padding:22px;display:flex;flex-direction:column;gap:18px;background:#E8F5F3;}
.chat-row{display:flex;align-items:flex-end;gap:10px;}
.chat-row.user{justify-content:flex-end;}
.chat-avatar{
  width:42px;height:42px;border-radius:50%;
  background:var(--mint-dark);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:var(--fs-sm);
}
.chat-avatar.ai{background:linear-gradient(135deg,var(--mint),var(--mint-dark));}
.bubble{
  max-width:78%;
  border-radius:22px;
  padding:16px 18px;
}
.bubble.user{
  background:#ffcb0d;
  border-top-right-radius:0px;
}
.bubble.ai{
  background:#fff;
  border:1px solid #e4ecea;
  border-bottom-left-radius:0px;
}
.chat-label{
  font-size:var(--fs-xs);
  font-weight:700;
  letter-spacing:1px;
  margin-bottom:6px;
}
.chat-label.user{color:#5a8f88;}
.chat-label.ai{color:var(--coral-dark);}
.attach{
  color:#333;
  font-size:var(--fs-md);
  margin-bottom:6px;
}
.chat-msg{
  font-size:var(--fs-lg);
  font-weight:700;
  line-height:1.5;
}
.ai-result{
  margin-top:8px;
  color:#2d857b;
  font-weight:700;
}
.build-badge{
  display:inline-block;
  margin-top:12px;
  padding:8px 12px;
  border-radius:999px;
  background:#fff3ef;
  color:var(--coral-dark);
  font-size:var(--fs-xs);
  font-weight:700;
}


  /* PROCESS STATS — story bridge */
  .stats{
    background:var(--ink);
    padding:5.4rem 4%;
    position:relative;
    overflow:hidden;
  }
  .stats::before{
    content:'';position:absolute;left:8%;right:8%;top:50%;height:1px;
    background:linear-gradient(90deg,transparent,rgba(127,202,194,.45),rgba(244,153,138,.35),transparent);
  }
  .stats-inner{
    position:relative;z-index:1;
    max-width:1100px;margin:0 auto;
    display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;
  }
  .stat{
    position:relative;
    background:rgba(255,255,255,.055);
    border:1px solid rgba(255,255,255,.12);
    border-radius:28px;
    padding:2rem 1.7rem;
    min-height:190px;
    backdrop-filter:blur(10px);
    transition:transform .3s,background .3s,border-color .3s;
  }
  .stat:hover{transform:translateY(-8px);background:rgba(255,255,255,.08);border-color:var(--white);}
  .stat .num{
    width:58px;height:58px;border-radius:18px;
    display:flex;align-items:center;justify-content:center;
    background:var(--mint);
    color:var(--ink);
    font-size:1.65rem;
    margin-bottom:1.15rem;
    box-shadow:0 14px 30px rgba(127,202,194,.18);
  }
  .stat:nth-child(2) .num{background:var(--yellow);}
  .stat:nth-child(3) .num{background:var(--coral);}
  .stat .lbl{
    color:#fff;
    font-size:1.25rem;
    font-weight:700;
    margin-bottom:.55rem;
    letter-spacing:-.5px;
  }
  .stat p{
    color:rgba(255,255,255,.58);
    font-size:var(--fs-sm);
    line-height:1.7;
    
  }

  /* WITHPLANPLUS */
  .wp-sec{padding:7rem 4%;background:linear-gradient(165deg,#FDF0EE 0%,#FBDBD5 100%);}
  /* 에디토리얼(2026-08-24) — 좌우 그리드+세로중앙 정렬은 왼쪽 글이 길수록 그림 위·아래가
     비었다(사용자 지적). MOCA 섹션과 같은 float 방식: 그림이 오른쪽 위를 차지하고
     글·칩이 옆을 채우다 그림이 끝나면 전체 폭으로 흘러내린다. */
  .wp-inner{max-width:1280px;margin:0 auto;display:flow-root;}
  .wp-sec .sec-label{color:var(--coral-dark);}
  .wp-sec .sec-title{margin-bottom:1.25rem;}
  .wp-sec .sec-title em{color:var(--coral-dark);}
  .wp-desc{color:var(--ink);font-size:var(--fs-md);line-height:1.85;margin-bottom:1.75rem;}
  /* 설명 아래 한 줄 권유 문구 — 본문보다 한 단계 강조하되 CTA 버튼보다는 약하게 */
  .wp-callout{display:flex;align-items:center;gap:0.6rem;margin:-0.5rem 0 1.75rem;padding:0.85rem 1.15rem;border-left:3px solid var(--mint);border-radius:0 10px 10px 0;background:rgba(127,202,194,0.14);color:var(--ink);font-size:var(--fs-md);font-weight:600;line-height:1.6;}
  .wp-chips{display:flex;flex-wrap:wrap;gap:0.6rem;margin-bottom:0;}
  /* 기능을 기본/플러스 두 묶음으로 (2026-08-24) — 플러스만 보여선 기본기가 안 보였다.
     플러스 묶음은 배경을 살짝 넣어 "더해지는 것" 임을 눈으로 구분한다. */
  .wp-feat{margin-bottom:1rem;}
  .wp-feat:last-of-type{margin-bottom:1.75rem;}
  .wp-feat-h{display:flex;align-items:baseline;gap:0.5rem;margin-bottom:0.6rem;flex-wrap:wrap;}
  .wp-feat-h strong{font-family:var(--font-sans);font-size:var(--fs-md);color:var(--ink);}
  .wp-feat-h span{font-size:var(--fs-xs);color:var(--muted);word-break:keep-all;}
  .wp-feat.is-plus{background:rgba(226,114,91,0.07);border:1px solid rgba(226,114,91,0.18);
    border-radius:14px;padding:0.9rem 1rem;}
  .wp-feat.is-plus .wp-feat-h strong{color:var(--coral-dark);}
  .wp-feat.is-plus .wp-chip{background:var(--coral);border-color:var(--coral);color:#fff;}
  .wp-feat.is-basic .wp-chip{border-color:rgba(226,114,91,0.35);}
  .wp-chip{background:white;border:1.5px solid var(--coral);color:var(--coral-dark);font-size:var(--fs-xs);font-weight:500;padding:0.4rem 0.95rem;border-radius:100px;transition:background 0.2s,color 0.2s;}
  /* ── 실제 화면 갤러리(2026-09-09) — 폰 캡처 9장 ──────────────────────────────
     원본은 923×2000 이라 그대로 넣으면 페이지가 무너진다. 폭 560px 로 줄여 두고,
     화면에서는 칸 폭에 맞춰 다시 줄인다(img{width:100%;height:auto}).
     PC 는 한 줄에 3장, 좁은 화면은 옆으로 밀어 보는 줄(스크롤 스냅) — 세로로 긴 그림을
     2열로 쌓으면 페이지가 한없이 길어진다. */
  .wp-shots{margin:0 0 1.75rem;}
  .wp-shots-t{font-family:var(--font-sans);font-size:var(--fs-md);color:var(--ink);margin:0 0 0.15rem;}
  .wp-shots-lead{font-size:var(--fs-sm);color:var(--muted);margin:0 0 1rem;word-break:keep-all;}
  .wp-shots-g{display:flex;align-items:baseline;gap:0.45rem;font-size:var(--fs-sm);font-weight:700;color:var(--coral-dark);margin:1rem 0 0.5rem;}
  .wp-shots-g span{font-weight:500;color:var(--muted);font-size:var(--fs-xs);word-break:keep-all;}
  .wp-shots-row{display:grid;grid-template-columns:repeat(3,minmax(0,240px));justify-content:center;gap:1.4rem;list-style:none;margin:0;padding:0;}
  .wp-shots-row figure{margin:0;}
  .wp-shots-row img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid rgba(20,43,39,0.12);
    background:#fff;box-shadow:0 6px 18px rgba(20,43,39,0.10);}
  .wp-shots-row figcaption{margin-top:0.5rem;font-size:var(--fs-xs);color:var(--muted);line-height:1.6;word-break:keep-all;text-align:center;}
  /* 메인 페이지에는 대표 3장만 — 아홉 장을 다 세우면 이 섹션만 3,000px 가 된다.
     나머지는 위드플랜플러스 페이지(withplan.html#screens)에 있고, 감춰진 사진은 내려받지도 않는다(lazy). */
  .wp-shots .is-more{display:none;}
  .wp-shots-more{font-size:var(--fs-xs);color:var(--muted);margin:0.75rem 0 0;}
  .wp-shots-more a{color:var(--coral-dark);font-weight:600;border-bottom:1px solid currentColor;}
  @media (max-width:760px){
    /* 옆으로 미는 줄 — 손가락으로 넘기고, 한 장이 화면에 딱 맞게 멈춘다 */
    /* ★ 스냅은 start — center 는 첫 장을 왼쪽으로 잘라 놓고 시작한다(폰 실측) */
    .wp-shots-row{display:flex;justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
      gap:0.75rem;padding-bottom:0.4rem;}
    .wp-shots-row li{flex:0 0 72%;scroll-snap-align:start;}
  }
  /* 위드플랜 → 위드플랜플러스 달라진 점(2026-09-07) — 전/후 표 + 옮겨 오기 안내. 좁은 화면은 행을 카드로 쌓는다 */
  .wp-diff{margin:0.5rem 0 1.75rem;padding:1.25rem 1.35rem;background:rgba(255,255,255,0.72);border:1px solid rgba(226,114,91,0.22);border-radius:18px;}
  .wp-diff .wp-feat-h{margin-bottom:0.5rem;}
  .wp-diff .wp-feat-h strong{color:var(--coral-dark);}
  .wp-diff-lead{color:var(--ink);font-size:var(--fs-sm);line-height:1.8;margin:0 0 1rem;word-break:keep-all;}
  .wp-diff-lead b,.wp-diff-move b{color:var(--coral-dark);}
  .wp-diff-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid rgba(226,114,91,0.18);border-radius:14px;background:#fff;}
  .wp-diff-tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--fs-sm);line-height:1.6;}
  .wp-diff-tbl th,.wp-diff-tbl td{padding:0.7rem 0.9rem;text-align:left;vertical-align:top;border-bottom:1px solid rgba(20,43,39,0.08);word-break:keep-all;}
  .wp-diff-tbl tr:last-child th,.wp-diff-tbl tr:last-child td{border-bottom:0;}
  .wp-diff-tbl tbody th{color:var(--muted);font-weight:600;white-space:nowrap;width:9.5em;}
  .wp-diff-tbl tbody td{color:var(--ink-soft);}
  .wp-diff-tbl tbody td.on{color:var(--ink);}
  .wp-diff-tbl td b{color:var(--coral-dark);}
  .wp-diff-move{margin:1rem 0 0.4rem;color:var(--ink);font-size:var(--fs-sm);line-height:1.8;word-break:keep-all;}
  .wp-diff-more{margin:0;font-size:var(--fs-sm);}
  .wp-diff-more a{color:var(--coral-dark);font-weight:600;text-decoration:none;border-bottom:1.5px solid rgba(226,114,91,0.4);}
  .wp-diff-more a:hover{border-bottom-color:var(--coral-dark);}
  @media(max-width:640px){
    .wp-diff{padding:1rem;}
    .wp-diff-wrap{overflow:visible;border:0;background:transparent;}
    .wp-diff-tbl thead{display:none;}
    .wp-diff-tbl,.wp-diff-tbl tbody,.wp-diff-tbl tr,.wp-diff-tbl th,.wp-diff-tbl td{display:block;width:auto;}
    .wp-diff-tbl tbody tr{border:1px solid rgba(226,114,91,0.18);border-radius:12px;background:#fff;margin-bottom:0.6rem;overflow:hidden;}
    .wp-diff-tbl tbody th{border-bottom:1px solid rgba(20,43,39,0.08);background:#FBE3DE;color:var(--ink);white-space:normal;padding:0.55rem 0.9rem;}
    .wp-diff-tbl tbody td{border-bottom:0;padding:0.5rem 0.9rem;}
  }
  .wp-dl{display:flex;gap:0.75rem;flex-wrap:wrap;}
  .wp-dl a{display:flex;align-items:center;gap:0.5rem;background:var(--ink);color:#fff;padding:0.7rem 1.5rem;border-radius:12px;font-size:var(--fs-sm);font-weight:500;text-decoration:none;transition:transform 0.2s;}
  .wp-dl a:hover{transform:translateY(-3px);}
  .wp-dl a.wp-dl-web{background:var(--coral);}   /* 웹으로 바로 쓰기 — 설치 없이 열리는 길이라 주색으로 앞세운다(2026-09-08) */
  .wp-dl-note{margin:0.75rem 0 0;font-size:var(--fs-xs,0.85rem);line-height:1.6;color:var(--muted,#6b7280);}
  .wp-dl a.wp-dl-guide{background:#fff;color:var(--coral-dark);border:1.5px solid var(--coral);}   /* 사용자 가이드 — 스토어 버튼과 구분되는 외곽선형(2026-09-07) */
  .wp-network{float:right;width:44%;position:relative;margin:0 0 1.4rem 2.6rem;min-width:0;shape-outside:inset(0 round 18px);animation:0.9s ease 0.9s both phoneReveal,floatY var(--dur-float) 1s var(--ease-float) infinite;}
  .wp-network::before{content:'';position:absolute;z-index:0;inset:12% 8% 10%;border-radius:50%;background:rgba(255,255,255,.72);filter:blur(28px);}
  .wp-network img{position:relative;z-index:1;display:block;width:100%;height:auto;filter:drop-shadow(0 24px 28px rgba(92,65,61,.13));}
  .wp-network-legend{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:.9rem;margin:-.4rem auto 0;padding:.7rem 1rem;width:max-content;max-width:92%;background:rgba(255,255,255,.88);border:1px solid rgba(255,255,255,.95);border-radius:14px;box-shadow:0 10px 26px rgba(92,65,61,.1);backdrop-filter:blur(10px);color:var(--ink);font-size:var(--fs-xs);}
  .wp-network-legend span{display:flex;align-items:center;gap:.35rem;white-space:nowrap;}
  .wp-network-legend i{display:block;width:9px;height:9px;border-radius:3px;box-shadow:0 0 0 3px rgba(0,0,0,.035);}
  .wp-network-legend .friend{background:#F47D70;}
  .wp-network-legend .work{background:#54B889;}
  .wp-network-legend .family{background:#F4B928;}
  .wp-network-legend strong{padding-left:.9rem;border-left:1px solid var(--border);color:var(--coral-dark);font-weight:700;white-space:nowrap;}

  /* TECH GRID */
  /* 개요 성격 섹션은 챕터 색을 가져가지 않고 채도 낮은 중립을 쓴다. */
  .tech-sec{padding:7rem 4%;background:linear-gradient(165deg,#F5F9F8 0%,#E9F1EF 100%);}
  .tech-inner{max-width:1200px;margin:0 auto;}
  .tech-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:3rem;}
  /* 라운드 — 페이지의 다른 카드는 전부 14~28px 인데 여기만 직각이라 미완성처럼 보였다.
     상단 accent 바(::before)는 overflow:hidden 이 이미 있어 라운드에 맞춰 잘린다. */
  .tech-card{position:relative;padding:2.25rem 2rem 2rem;background:#fff;border:1px solid var(--border);border-radius:20px;box-shadow:0 2px 10px rgba(26,40,38,.04);overflow:hidden;transition:transform 0.35s cubic-bezier(0.22,1,0.36,1),box-shadow 0.35s;cursor:default;}
  .tech-card::before{content:'';position:absolute;top:0;left:0;right:0;height:7px;background:var(--accent);transition:height 0.35s;}
  .tech-card:hover{transform:translateY(-8px);box-shadow:0 20px 40px rgba(36,51,48,0.1);}
  .tech-card:hover::before{height:8px;}
  .tc-bgnum{position: absolute;top: 0.5rem;right: 0.5rem;font-family:var(--font-sans);font-size: 6rem;font-weight: 700;line-height: 1;color: var(--accent-soft);letter-spacing: -4px;z-index: 0;transition: color 0.35s;pointer-events: none;}
  .tech-card:hover .tc-bgnum{color:var(--accent);}
  .tc-top{position:relative;z-index:1;display:flex;align-items:center;gap:0.85rem;margin-bottom:1.5rem;}
  .tc-icon{font-size:1.5rem;display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:16px;border:5px solid var(--accent);flex-shrink:0;transition:background 0.35s,transform 0.35s;}
  .tech-card:hover .tc-icon{transform:rotate(-10deg) scale(1.05);}
  .tc-tag{position:relative;z-index:1;font-size:0.68rem;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--accent-text);}
  .tech-card h3{position:relative;z-index:1;font-family:var(--font-sans);font-size:1.35rem;font-weight:600;margin-bottom:0.5rem;letter-spacing:-0.5px;color:var(--ink);}
  .tech-card p{position:relative;z-index:1;font-size:var(--fs-sm);color:var(--muted);line-height:1.7;}
  /* 상세 페이지(develop.html)로 보내는 진입 링크 — 카드가 그 제품의 유일한 입구가 된 항목에만 붙는다. */
  .tc-link{position:relative;z-index:1;display:inline-block;margin-top:0.9rem;font-family:var(--font-sans);font-size:var(--fs-xs);font-weight:600;color:var(--accent-text);text-decoration:none;transition:gap .2s,opacity .2s;}
  .tc-link:hover{opacity:.7;}
  /* per-card accent variables */
  .tcm{--accent:var(--mint-mid);--accent-pale:var(--mint-pale);--accent-soft:#D6EFEA;--accent-text:var(--mint-dark);}
  .tcc{--accent:var(--coral);--accent-pale:var(--coral-pale);--accent-soft:#FBD8D2;--accent-text:var(--coral-dark);}
  .tcy{--accent:var(--yellow);--accent-pale:#FEF6E0;--accent-soft:#FBEDC4;--accent-text:var(--yellow-dark);}
  .tcl{--accent:var(--lav);--accent-pale:#EEEAFA;--accent-soft:#DFD7F4;--accent-text:var(--lav-dark);}

  /* DOCS — 공식 문서(가이드/API) 카드 섹션 */
  .docs-sec{padding:7rem 4%;background:var(--mint-pale);}
  .docs-inner{max-width:1200px;margin:0 auto;}
  .docs-sec .sec-label{color:var(--mint-dark);}
  .docs-desc{margin-top:1rem;color:var(--muted);font-size:var(--fs-md);}
  .docs-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;margin-top:3rem;}
  .doc-card{--accent:var(--mint-mid);--accent-text:var(--mint-dark);position:relative;padding:2.25rem 2rem 2rem;background:#fff;border:1px solid var(--border);border-radius:18px;overflow:hidden;transition:transform 0.35s cubic-bezier(0.22,1,0.36,1),box-shadow 0.35s;}
  .doc-card::before{content:'';position:absolute;top:0;left:0;right:0;height:7px;background:var(--accent);}
  .doc-card:hover{transform:translateY(-8px);box-shadow:0 20px 40px rgba(36,51,48,0.1);}
  .dc-top{display:flex;align-items:center;gap:0.85rem;margin-bottom:1.25rem;}
  .dc-icon{font-size:1.5rem;display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:16px;border:5px solid var(--accent);flex-shrink:0;}
  .dc-tag{font-size:0.68rem;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--accent-text);}
  .doc-card h3{font-family:var(--font-sans);font-size:1.35rem;font-weight:600;margin-bottom:0.5rem;letter-spacing:-0.5px;color:var(--ink);}
  .doc-card p{font-size:var(--fs-sm);color:var(--ink);line-height:1.7;}
  .dc-btns{display:flex;gap:0.75rem;margin-top:1.5rem;flex-wrap:wrap;}
  /* 알약형 CTA 버튼 — react.html 에서 시작해 tools.html 도 쓰는 공용 컴포넌트라 여기(공용 CSS)에 둔다.
     기본색은 민트(사이트 주색), 섹션별 색은 각 페이지 CSS 가 .pt-cta/.is-cta 처럼 덮어쓴다. */
  .rc-cta{display:flex;gap:0.75rem;flex-wrap:wrap;margin-top:0.25rem;}
  .rc-cta a{display:inline-flex;align-items:center;gap:0.5rem;padding:0.8rem 1.7rem;border-radius:100px;font-size:var(--fs-sm);font-weight:600;text-decoration:none;transition:transform 0.25s,background 0.25s,color 0.25s;}
  .rc-cta .primary{background:var(--mint-dark);color:#fff;}
  .rc-cta .primary:hover{transform:translateY(-3px);background:var(--ink);}
  .rc-cta .ghost{background:#fff;border:2px solid var(--mint);color:var(--mint-dark);}
  .rc-cta .ghost:hover{transform:translateY(-3px);background:var(--mint);color:#fff;}
  .doc-btn{display:inline-flex;align-items:center;gap:0.35rem;padding:0.65rem 1.3rem;border-radius:12px;font-size:var(--fs-sm);font-weight:600;text-decoration:none;border:1.5px solid var(--mint-mid);color:var(--mint-dark);background:#fff;transition:transform 0.2s,box-shadow 0.2s,background 0.2s;}
  .doc-btn:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(45,133,123,0.18);}
  .doc-btn.primary{background:var(--mint-mid);color:#fff;}
  .doc-btn.primary:hover{background:var(--mint-dark);}
  /* MOCA React 문서 카드 — MOCA 문서와 한 그리드에 서지만 제품이 다르다는 게 보이도록 상단 띠를 진하게 */
  .doc-card.rc-doc{--accent:var(--mint-dark);--accent-text:var(--mint-dark);}
  .doc-card p code{font-family:var(--font-sans);font-size:0.85em;background:var(--mint-pale);color:var(--mint-dark);padding:0.08em 0.35em;border-radius:5px;}

  /* CONTACT */
  .cta{background:var(--ink);padding:7rem 4%;position:relative;overflow:hidden;}
  .cta-bg-text{position:absolute;top:40%;left:50%;transform:translate(-50%,-50%);font-family:var(--font-sans);font-size:clamp(10rem,22vw,20rem);font-weight:700;color:rgba(255,255,255,0.03);white-space:nowrap;pointer-events:none;letter-spacing:-4px; animation:scroll 30s linear infinite}
  .cta-inner{position:relative;z-index:1;max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center;}
  .cta-left{}
  .cta-label{display:inline-flex;align-items:center;gap:0.5rem;font-family:var(--font-sans);font-size:var(--fs-xs);font-weight:600;letter-spacing:2px;color:var(--mint);text-transform:uppercase;margin-bottom:1.5rem;}
  .cta-label .cdot{width:8px;height:8px;background:var(--mint);border-radius:50%;animation:pulse var(--dur-pulse) var(--ease-float) infinite;}
  .cta h2{font-family:var(--font-sans);font-size:clamp(2rem,4.5vw,3.2rem);font-weight:700;color:#fff;letter-spacing:-1.5px;line-height:1.15;margin-bottom:1.5rem;text-align:left;}
  .cta h2 em{font-style:normal;background:linear-gradient(135deg,var(--mint),var(--yellow));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
  .cta-desc{color:rgba(255,255,255,0.55);font-size:var(--fs-md);font-weight:300;line-height:1.85;margin-bottom:2rem;max-width:460px;}
  .cta-bullets{display:flex;flex-direction:column;gap:0.85rem;}
  .cta-bullet{display:flex;align-items:center;gap:0.75rem;font-size:var(--fs-sm);color:rgba(255,255,255,0.7);font-weight:300;}
  .cta-bullet .cb-icon{font-size:1.2rem;width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:rgba(127,202,194,0.12);border-radius:10px;flex-shrink:0;}
  /* Glass form */
  .cta-form{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);border-radius:24px;padding:2.5rem;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);}
  .form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem;}
  .form-field{display:flex;flex-direction:column;}
  .form-field.full{grid-column:1/-1;}
  .form-field input,.form-field textarea{background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.12);border-radius:12px;padding:0.9rem 1rem;font-size:var(--fs-sm);font-family:var(--font-sans);color:#fff;outline:none;transition:border-color 0.25s,background 0.25s;resize:vertical;}
  .form-field input::placeholder,.form-field textarea::placeholder{color:rgba(255,255,255,0.35);}
  .form-field input:focus,.form-field textarea:focus{border-color:var(--mint);background:rgba(127,202,194,0.08);}
  .form-field textarea{min-height:120px;}
  .form-submit{width:100%;margin-top:1rem;padding:1rem;border:none;border-radius:14px;font-size:var(--fs-md);font-weight:600;font-family:var(--font-sans);cursor:pointer;background:var(--mint-mid);color:var(--white);transition:transform 0.2s,box-shadow 0.2s;letter-spacing:0.3px;}
  .form-submit:hover{transform:translateY(-2px);}
  .form-note{text-align:center;margin-top:0.75rem;font-size:var(--fs-xs);color:rgba(255,255,255,0.3);}

  footer{background:var(--ink);color:rgba(255,255,255,0.4);text-align:center;padding:2rem;font-size:var(--fs-xs);border-top:1px solid rgba(255,255,255,0.08);}
  footer span{color:var(--mint);}
  /* 사업자 정보 — 회사명은 한 단계 밝게, 주소·등록번호는 본문 톤 유지 */
  footer .footer-corp{color:rgba(255,255,255,0.72);font-size:var(--fs-sm);font-weight:700;letter-spacing:0.02em;margin-bottom:0.4rem;}
  footer .footer-info{line-height:1.8;}
  footer .footer-copy{margin-top:1rem;}
  footer .footer-links{margin-top:0.5rem;}
  footer .footer-links a{color:rgba(255,255,255,0.45);text-decoration:none;}
  footer .footer-links a:hover{color:var(--mint);text-decoration:underline;}
  footer .footer-sep{margin:0 0.6rem;color:rgba(255,255,255,0.2);}

  @media(max-width:980px){
    .tech-grid{grid-template-columns:repeat(2,1fr);}
  }
  @media(max-width:880px){
    .MOCA-inner,.cta-inner{grid-template-columns:1fr;gap:3rem;}
    .stats-inner{grid-template-columns:1fr;gap:2.5rem;}
    .hero-bottom{flex-direction:column;align-items:flex-start;}
    .h-card{flex:0 0 300px;padding:2rem;}
    .form-row{grid-template-columns:1fr;}
  }

  /* ── 내비 패널 전환점 (2026-08-20) ─────────────────────────────────────
     메뉴 항목을 정식 제품명(MOCA Portable · MOCA IntelliSense)으로 바꾸면서
     가로 메뉴 필요폭이 971px 가 됐다. 실측상 881~1250px 구간에서 최대 204px 넘쳐
     전환점을 880 → 1200 으로 올린다. 이 블록의 규칙은 원래 880 블록에 있던 것을
     그대로 옮긴 것이다(다른 레이아웃 규칙은 880 에 그대로 둔다). */
  /* 가로 메뉴가 살아나는 첫 구간은 폭이 빠듯하다 — 필요폭 971px 에 가용폭이
     1201px 에서 925px 뿐이라 항목 간격을 줄여야 한 줄에 들어간다.
     종전엔 이 규칙이 index.html 인라인에만 있어 react/tools 에는 적용조차 안 됐다. */
  @media(min-width:1201px) and (max-width:1300px){.nl{gap:1.05rem;}}

  @media(max-width:1200px){
    /* 메뉴를 감추지 않고 오른쪽 슬라이드 패널로 옮긴다 (위 .nav-burger 블록 주석 참고) */
    html,body{overflow-x:clip;}
    .nav-burger{position:relative;z-index:10001;display:flex;}
    nav{height:60px;gap:0.6rem;padding:0 5%;}
    .logo{width:132px;height:32px;}
    .nl{
      position:fixed;top:0;right:0;z-index:9999;
      width:min(88vw,360px);height:100vh;height:100dvh;
      flex-direction:column;align-items:stretch;justify-content:flex-start;
      gap:.3rem;padding:4.35rem .85rem .85rem;
      background:linear-gradient(160deg,#172c28 0%,var(--ink) 58%,#10201d 100%);box-shadow:-10px 0 36px rgba(0,0,0,0.48);
      transform:translateX(100%);transition:transform 0.25s cubic-bezier(0.4,0,0.2,1);
      overflow-y:auto;overscroll-behavior:contain;
    }
    .nl.on{transform:translateX(0);}
    .nl li{border:1px solid rgba(127,202,194,.11);border-radius:12px;background:rgba(255,255,255,.035);}
    .nl li a{display:flex;flex-direction:column;justify-content:center;min-height:54px;padding:.55rem .75rem;font-size:var(--fs-md);line-height:1.25;}
    .nl li a span{display:block;font-weight:700;letter-spacing:-.01em;}
    .nl li a small{display:block;margin-top:.2rem;color:rgba(226,244,241,.62);font-size:var(--fs-xs);font-weight:400;line-height:1.25;letter-spacing:-.02em;}
    .nl li:active{border-color:rgba(127,202,194,.55);background:rgba(127,202,194,.1);}
    /* 밑줄 애니메이션은 터치에서 뜻이 없다 — 대신 누르는 면을 넓게 준다 */
    .nl a::after{display:none;}
    /* CTA 는 패널 맨 아래 꽉 찬 버튼으로 — 목록 항목처럼 보이지 않게 한다 */
    .nl-cta{border:none!important;margin-top:.15rem;padding:0;background:none!important;}
    /* display 를 다시 flex 로 — 바로 위 .nl li a 의 block 이 같은 순위라 나중 규칙이 이긴다 */
    .nl-cta a{display:flex;justify-content:center;min-height:48px;padding:.75rem 1rem;font-size:var(--fs-sm);}
    /* React 데모 CTA 도 패널에서는 보여준다 (2026-08-22).
       숨김(위 .nl-react-cta{display:none})은 원래 **데스크톱 가로 메뉴가 좁아서** 둔 것인데,
       되살리는 규칙이 ≤560px 블록에만 있어서 561~1200px(태블릿·창 좁힌 PC)에서는
       패널을 열어도 이 버튼이 없었다 — 폰에서는 보이는데 PC 에서는 안 보이는 차이가 이것이다. */
    .nl-react-cta{display:block;}
    /* 패널이 열려 있는 동안 뒤 페이지가 같이 스크롤되지 않게 */
    body.nav-open{overflow:hidden;}
  }
  @media(max-width:560px){
    .nl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(50px,auto);align-content:start;gap:.4rem;padding:4.05rem .7rem .7rem;}
    .nl li{min-width:0;}
    .nl li a{height:100%;min-height:0;padding:.35rem .62rem;font-size:var(--fs-sm);}
    .nl li a small{font-size:var(--fs-xs);}
    .nl-moca{grid-column:1/-1;}
    .nl-cta{grid-column:1/-1;}
    .tech-grid{grid-template-columns:1fr;}
    .wp-network-legend{flex-wrap:wrap;gap:.55rem .85rem;width:92%;}
    .wp-network-legend strong{flex-basis:100%;padding:.55rem 0 0;border-left:0;border-top:1px solid var(--border);text-align:center;}
    /* 카드 9장이 1열로 쌓여 이 섹션만 2,662px(3.5화면)이었다(실측 2026-08-20).
       데스크톱 여백(2.25rem)과 6rem 짜리 배경 숫자를 좁은 폭에서 줄인다. */
    .tech-card{padding:1.5rem 1.3rem 1.4rem;}
    .tc-bgnum{font-size:3.6rem;}
    .tc-top{gap:0.6rem;margin-bottom:0.9rem;}
    .tc-icon{width:42px;height:42px;border-width:4px;font-size:1.2rem;}
    .tech-card h3{font-size:1.15rem;}
  }

  /* ── 모바일 공통 여백·불필요 요소 정리 ──
     섹션들이 데스크톱 기준 padding:7rem(112px) 을 그대로 들고 있어 휴대폰에서는
     화면 한 판이 거의 빈 여백이었다. 한 곳에서 줄인다(개별 섹션에 흩어 두면 새 섹션이
     추가될 때마다 빠뜨린다). 가로도 4% → 5% 로 조금 넓혀 글이 가장자리에 붙지 않게. */
  @media(max-width:640px){
    .MOCA-sec,.wp-sec,.tech-sec,.docs-sec,.cta,.stats{padding-left:5%;padding-right:5%;}
    .MOCA-sec,.wp-sec,.tech-sec,.docs-sec,.cta{padding-top:3rem;padding-bottom:3rem;}
    .wp-network{float:none;width:100%;margin:0 0 1.5rem;shape-outside:none;}
    /* ★ .stats 는 위 세로여백 정리에서 빠져 있어 데스크톱값(5.4rem)을 그대로 들고 있었다.
       바로 위 .hero 도 padding-bottom:7.5rem(120px) 라, 히어로 카드와 첫 카드 사이가
       120+86 = 206px — 휴대폰에서 화면 반 판이 통째로 빈 채였다(2026-08-20 지적). */
    .stats{padding-top:2.5rem;padding-bottom:3rem;}
    /* ★ .hero 의 세로 여백은 여기서 주지 않는다 — 이 블록 아래(비반응형 구역)에 같은 특정도의
       `.hero{padding-bottom:7.5rem}` 이 또 있어, 미디어쿼리 안이어도 나중 규칙에 그냥 진다.
       (실제로 그렇게 죽은 코드였다 — 모바일에서 120px 가 그대로 남아 있었다. 2026-08-20)
       그래서 hero 여백은 파일 맨 아래 640px 블록에서 한 번에 준다. */
    /* 한글이 음절 사이에서 갈라지지 않게 — 큰 제목일수록 눈에 띈다 */
    .sec-title{word-break:keep-all;}
    /* 마우스를 따라다니는 발광 원 — 터치에는 따라올 커서가 없어 한쪽에 멈춰 있는다 */
    .cursor-glow{display:none;}
  }
  @media(max-width:880px){
    .docs-grid{grid-template-columns:1fr;}
  }


  /* HERO visual — dynamic redesign */
  .hero{padding-bottom:7.5rem;}
  .hero-content{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(440px,0.98fr);gap:3.8rem;align-items:center;}
  .hero-copy{min-width:0;}
  .hero-visual{position:relative;min-height:545px;opacity:0;animation:fadeUp 0.9s 1.05s forwards;}
  .moca-transform{
    position:relative;width:100%;height:545px;border-radius:36px;
    background:
      radial-gradient(circle at 50% 50%,rgba(127,202,194,.12),transparent 50%),
      radial-gradient(circle at 20% 80%,rgba(244,153,138,.08),transparent 40%),
      radial-gradient(circle at 80% 20%,rgba(185,171,230,.08),transparent 40%),
      linear-gradient(150deg,rgba(255,255,255,0.10),rgba(255,255,255,0.04));
    border:1px solid rgba(255,255,255,0.14);
    box-shadow:0 30px 90px rgba(0,0,0,.25);
    overflow:hidden;backdrop-filter:blur(14px);
  }
  .moca-transform::before{
    content:'';position:absolute;inset:0;
    background-image:
      linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
      linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
    background-size:40px 40px;
    mask-image:radial-gradient(circle at 50% 50%,#000 0%,transparent 75%);
    opacity:.6;
  }

  /* === SKETCH CARD (left) === */
  .sketch-card{
    position:absolute;z-index:3;
    left:28px;top:60px;width:220px;border-radius:18px;
    background:linear-gradient(145deg,#fffdf6,#f5ecd9);
    box-shadow:0 20px 50px rgba(0,0,0,.2), inset 0 0 0 1px rgba(80,60,35,.08);
    padding:16px 14px;
    transform:rotate(-5deg);
    animation:sketchFloat var(--dur-float) var(--ease-float) infinite;
  }
  @keyframes sketchFloat{0%,100%{transform:rotate(-5deg) translateY(0)}50%{transform:rotate(-3deg) translateY(-10px)}}
  .sketch-card::after{content:'✏️';position:absolute;right:12px;bottom:10px;font-size:var(--fs-md);opacity:.6;transform:rotate(12deg);}
  .sketch-title{font-size:var(--fs-xs);font-weight:700;margin-bottom:8px;letter-spacing:-.2px;}
  .sketch-lines{display:flex;flex-direction:column;gap:6px;}
  .sline{height:3px;border-radius:2px;background:rgba(38,56,53,.15);animation:drawLine .8s ease forwards;transform-origin:left;transform:scaleX(0);}
  .sline:nth-child(1){width:90%;animation-delay:.4s}
  .sline:nth-child(2){width:65%;animation-delay:.6s}
  .sline:nth-child(3){width:80%;animation-delay:.8s}
  .sline:nth-child(4){width:50%;animation-delay:1s}
  @keyframes drawLine{to{transform:scaleX(1)}}
  .sketch-box{margin-top:10px;display:flex;gap:8px;}
  .sbox{flex:1;height:48px;border-radius:8px;border:2px solid rgba(38,56,53,.12);animation:drawBox .6s ease forwards;opacity:0;}
  .sbox:nth-child(1){animation-delay:1.2s}.sbox:nth-child(2){animation-delay:1.4s}.sbox:nth-child(3){animation-delay:1.6s;flex:.6;}
  @keyframes drawBox{to{opacity:1}}
  .sketch-btn-mock{margin-top:8px;width:70px;height:22px;border-radius:6px;border:2px solid rgba(38,56,53,.15);animation:drawBox .5s 1.8s ease forwards;opacity:0;}

  /* === AI CORE (center) — orbiting system === */
  .ai-core{
    position:absolute;z-index:5;
    left:50%;top:50%;width:100px;height:100px;border-radius:30px;
    transform:translate(-50%,-50%);
    background:linear-gradient(135deg,var(--mint),#B0E8E0);
    color:var(--ink);font-family:var(--font-sans);
    display:flex;align-items:center;justify-content:center;flex-direction:column;
    font-size:1.6rem;font-weight:800;
    box-shadow:0 0 0 14px rgba(127,202,194,.10),0 0 80px rgba(127,202,194,.5),0 20px 50px rgba(0,0,0,.15);
    animation:corePulse var(--dur-pulse) var(--ease-float) infinite;
  }
  .ai-core small{font-size:.5rem;font-weight:700;letter-spacing:1px;opacity:.6;margin-top:-4px;}
  @keyframes corePulse{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.06)}}

  /* orbit ring */
  .orbit-ring{
    position:absolute;z-index:4;
    left:50%;top:50%;width:200px;height:200px;
    transform:translate(-50%,-50%);
    border:1px dashed rgba(127,202,194,.25);border-radius:50%;
    animation:orbitSpin 12s linear infinite;
  }
  .orbit-ring.r2{width:290px;height:290px;border-style:dotted;border-color:rgba(244,153,138,.2);animation-duration:18s;animation-direction:reverse;}
  @keyframes orbitSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}

  .orbit-item{
    position:absolute;width:36px;height:36px;border-radius:12px;
    display:flex;align-items:center;justify-content:center;font-size:var(--fs-md);
    background:#1e2826;box-shadow:0 6px 20px rgba(0,0,0,.15);
    animation:orbitCounterSpin 12s linear infinite;
  }
  .orbit-ring.r2 .orbit-item{animation-duration:18s;animation-direction:reverse;}
  .oi1{top:-18px;left:50%;margin-left:-18px;}
  .oi2{bottom:-18px;left:50%;margin-left:-18px;}
  .oi3{top:50%;left:-18px;margin-top:-18px;}
  .oi4{top:-18px;left:50%;margin-left:-18px;}
  .oi5{bottom:-18px;right:-18px;}
  @keyframes orbitCounterSpin{to{transform:rotate(-360deg)}}

  /* === DATA STREAM particles === */
  .stream-dot{
    position:absolute;z-index:4;width:5px;height:5px;border-radius:50%;
    background:var(--mint);box-shadow:0 0 12px rgba(127,202,194,.8);
    opacity:0;animation:streamFlow 2.8s ease-in-out infinite;
  }
  .stream-dot.left{left:230px;top:180px;}
  .stream-dot.left.d2{top:220px;animation-delay:.4s}
  .stream-dot.left.d3{top:260px;animation-delay:.8s}
  .stream-dot.left.d4{top:300px;animation-delay:1.2s}
  .stream-dot.right{left:52%;top:200px;animation-name:streamFlow;}
  .stream-dot.right.d2{top:240px;animation-delay:.5s}
  .stream-dot.right.d3{top:280px;animation-delay:1s}
  .stream-dot.right.d4{top:320px;animation-delay:1.5s}
  @keyframes streamFlow{
    0%{opacity:0;transform:translateX(0)}
    20%{opacity:1}
    80%{opacity:1}
    100%{opacity:0;transform:translateX(120px)}
  }

  /* === CODE SNIPPET floating === */
  .code-snippet{
    position:absolute;z-index:4;
    font-family:var(--font-sans);font-size:.62rem;font-weight:500;
    color:var(--mint);background:rgba(26,40,38,.65);
    padding:4px 10px;border-radius:8px;border:1px solid rgba(127,202,194,.25);
    white-space:nowrap;opacity:0;
    animation:chipFade 4s var(--ease-float) infinite;
  }
  .cs1{left:36%;top:28%;animation-delay:0s}
  .cs2{left:42%;top:70%;animation-delay:1.3s}
  .cs3{left:30%;bottom:15%;animation-delay:2.6s}
  @keyframes chipFade{
    0%{opacity:0;transform:translateY(8px)}
    15%{opacity:.9;transform:translateY(0)}
    70%{opacity:.9;transform:translateY(-5px)}
    100%{opacity:0;transform:translateY(-12px)}
  }

  /* === SERVICE CARD (right) === */
  .service-card{
    position:absolute;z-index:3;
    right:24px;top:50px;width:240px;border-radius:22px;
    background:#fff;box-shadow:0 24px 70px rgba(0,0,0,.25);
    padding:0;opacity:0;transform:translateX(30px) scale(.96);
    animation:serviceReveal 1s 2.2s cubic-bezier(.22,1,.36,1) forwards,floatY var(--dur-float) 3.2s var(--ease-float) infinite;
    overflow:hidden;
  }
  @keyframes serviceReveal{to{opacity:1;transform:translateX(0) scale(1)}}
  @keyframes floatY{0%,100%{translate:0 0}50%{translate:0 -8px}}
  .service-card::before{
    content:'완성된 서비스';position:absolute;left:16px;top:-28px;
    color:rgba(255,255,255,.65);font-size:var(--fs-xs);font-weight:500;
  }
  .browser-bar{height:32px;background:#F7FBFA;display:flex;align-items:center;gap:5px;padding:0 12px;border-bottom:1px solid #E7F1EF;}
  .browser-bar i{width:7px;height:7px;border-radius:50%;}
  .browser-bar i:nth-child(1){background:var(--coral)}
  .browser-bar i:nth-child(2){background:var(--yellow)}
  .browser-bar i:nth-child(3){background:var(--mint)}
  .svc-body{padding:12px;}
  .svc-hero-block{height:55px;border-radius:14px;background:linear-gradient(135deg,var(--mint-pale),#fff);margin-bottom:10px;display:flex;align-items:center;padding:0 12px;gap:10px;}
  .svc-text-lines{flex:1;display:flex;flex-direction:column;gap:5px;}
  .svc-text-lines span{display:block;height:7px;border-radius:4px;}
  .svc-text-lines span:first-child{width:80%;background:var(--mint-dark)}
  .svc-text-lines span:last-child{width:60%;background:#A8D8D2}
  .svc-thumb{width:38px;height:38px;border-radius:12px;background:var(--coral-pale);}
  .svc-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
  .svc-col{display:flex;flex-direction:column;gap:5px;}
  .svc-bar{height:7px;border-radius:4px;background:#E2F4F1;}
  .svc-bar:nth-child(2){width:72%;background:#F8D8D2}
  .svc-bar:nth-child(3){width:55%;background:#FBEDC4}
  .svc-row{height:28px;border-radius:10px;background:#F8FAFA;border:1px solid #E7F1EF;display:flex;align-items:center;padding:0 8px;gap:5px;}
  .svc-row i{width:7px;height:7px;border-radius:50%;background:var(--mint)}
  .svc-row:nth-child(2) i{background:var(--coral)}

  /* === MOBILE PHONE (bottom right) === */
  .mobile-phone{
    position:absolute;z-index:3;
    right:40px;bottom:36px;width:110px;border-radius:30px;
    background:#151E1C;border:4px solid var(--coral);
    box-shadow:0 20px 50px rgba(0,0,0,.28);
    padding:8px 7px;opacity:0;transform:translateY(28px) rotate(6deg);
    animation:phoneReveal .9s 2.8s forwards,floatY var(--dur-float) 3.7s var(--ease-float) infinite;
  }
  @keyframes phoneReveal{to{opacity:1;transform:translateY(0) rotate(6deg)}}
  .mobile-phone::before{content:'';position:absolute;left:50%;top:7px;transform:translateX(-50%);width:36px;height:4px;border-radius:6px;background:#0D1513;z-index:2;}
  .mob-screen{height:170px;border-radius:22px;background:#fff;overflow:hidden;padding:18px 8px 8px;}
  .mob-head{height:26px;border-radius:10px;background:var(--mint-pale);margin-bottom:6px;}
  .mob-row{height:18px;border-radius:8px;background:#F6FAF9;border:1px solid #E7F1EF;margin-bottom:5px;display:flex;align-items:center;padding:0 6px;gap:5px;}
  .mob-row i{width:6px;height:6px;border-radius:50%;background:var(--coral)}
  .mob-row:nth-child(3) i{background:var(--yellow)}
  .mob-row:nth-child(4) i{background:var(--mint-dark)}
  .mob-cta{height:26px;border-radius:10px;background:var(--mint);margin-top:8px;}

  /* === FLOATING CHIPS === */
  .idea-chip,.launch-chip{
    position:absolute;z-index:5;
    background:rgba(255,255,255,.94);color:var(--ink);border-radius:16px;padding:10px 14px;
    box-shadow:0 12px 30px rgba(0,0,0,.16);opacity:0;font-size:var(--fs-xs);line-height:1.35;
    animation:chipFade 4s var(--ease-float) infinite;
  }
  .idea-chip{left:40px;bottom:135px;animation-delay:2s}
  .launch-chip{left:46%;bottom:15%;background:rgba(26,40,38,.72);border:1px solid rgba(255,255,255,.15);color:#fff;animation-delay:2.6s}
  .idea-chip b{color:var(--mint-dark)}.launch-chip b{color:var(--mint)}
  @keyframes chipReveal{to{opacity:1;translate:0 -6px}}

  /* === PROCESS LABELS === */
  .process-label{
    position:absolute;z-index:3;left:50%;top:88%;transform:translateX(-50%);
    display:flex;gap:8px;align-items:center;color:rgba(255,255,255,.6);font-size:var(--fs-xs);letter-spacing:.3px;
  }
  .process-label span{padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1)}

  /* trust section */
  .trust-sec{background:#fff;padding:6rem 4%;}
  .trust-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1.1fr .9fr;gap:4rem;align-items:center;}
  .trust-list{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;}
  .trust-item{border:1px solid var(--border);border-radius:22px;padding:1.5rem;background:#fff;box-shadow:0 16px 38px rgba(26,40,38,.05);}
  .trust-item strong{font-family:var(--font-sans);font-size:1.7rem;color:var(--mint-dark);display:block;margin-bottom:.35rem;}
  .trust-item p{font-size:var(--fs-sm);color:var(--muted);line-height:1.65;}

  @media(max-width:1080px){.hero-content{grid-template-columns:1fr}.hero-visual{min-height:460px}.moca-transform{height:460px}.service-card{right:24px}.sketch-card{left:24px}.trust-inner{grid-template-columns:1fr}}
  @media(max-width:640px){.hero{padding-top:3rem;padding-bottom:2rem}.hero h1{font-size:clamp(2.4rem,13vw,4.2rem);letter-spacing:-2px}.hero h1:before{width:35%}.hero-visual{min-height:390px}.moca-transform{height:390px;border-radius:24px}.sketch-card{width:170px;left:16px;top:60px;padding:13px}.service-card{width:180px;right:14px;top:85px}.ai-core{width:80px;height:80px;font-size:1.3rem;border-radius:24px}.orbit-ring{width:160px;height:160px}.process-label{display:none}.trust-list{grid-template-columns:1fr}.hero-desc br{display:none}}


  @media(max-width:1120px){
    .hero-content{grid-template-columns:1fr;}
    .hero-visual{min-height:500px;}
    .moca-transform{max-width:720px;margin:0 auto;}
  }
  @media(max-width:880px){
    .stat:not(:last-child)::after{display:none;}
  }
  @media(max-width:560px){
    /* 카드 높이: 640px 구간(390px)보다 오히려 컸다 — 좁을수록 커지는 셈이라 아래가 비었다.
       같은 값으로 맞춘다. */
    .hero-visual{min-height:390px;}
    .moca-transform{height:390px;border-radius:26px;}
    /* 640px 구간의 .orbit-ring{160px} 은 specificity 상 .orbit-ring.r2 를 못 이겨
       두 번째 궤도만 290px 로 남아 있었다. 좁은 카드에선 이 링이 바닥 여백을 만든다. */
    .orbit-ring.r2{width:220px;height:220px;}
    .launch-chip{bottom:12%;}
    .sketch-card{width:165px;height:142px;left:16px;top:50px;padding:12px;}
    .sketch-card svg{height:88px;}
    .service-card{width:190px;height:178px;right:14px;top:88px;padding:10px;}
    .mobile-phone{display:none;}
    .ai-core{width:82px;height:82px;font-size:1.35rem;border-radius:26px;}
    .process-label{top:78%;font-size:.68rem;gap:5px;white-space:nowrap;}
    .process-label span{padding:5px 7px;}
    .flow-line,.flow-line.second{display:none;}
  }


  section[id]{scroll-margin-top:76px;}
  
 /* === 발자국 === */
.paw-wrap{width:100%; height:100%; position:absolute; left: 0; top: 0;}
.paw{position:absolute; width:400px; height:400px; background:url('../images/bl_foot.svg') center center no-repeat; background-size:contain; opacity:0;}
.paw1{left:80px; bottom:50px; transform:rotate(-20deg); animation:paw1 7s ease-in-out infinite;}
.paw2{left:550px; bottom:250px; transform:rotate(15deg); animation:paw2 7s ease-in-out infinite;}
.paw3{left:1000px; bottom:650px; transform:rotate(-20deg); animation:paw3 7s ease-in-out infinite;}

/* 첫번째 발자국 */
@keyframes paw1{
    0%,10%{opacity:0; transform:rotate(-20deg) scale(0.9);}
    20%{opacity:.08; transform:rotate(-20deg) scale(1);}
    35%{opacity:.08; transform:rotate(-20deg) scale(1);}
    45%{opacity:0; transform:rotate(-20deg) scale(1.05);}
    100%{opacity:0; transform:rotate(-20deg) scale(1.05);}
}

/* 두번째 발자국 */
@keyframes paw2{
    0%,35%{opacity:0; transform:rotate(15deg) scale(0.9);}
    45%{opacity:.08; transform:rotate(15deg) scale(1);}
    60%{opacity:.08; transform:rotate(15deg) scale(1);}
    70%{opacity:0; transform:rotate(15deg) scale(1.05);}
    100%{opacity:0; transform:rotate(15deg) scale(1.05);}
}

/* 세번째 발자국 */
@keyframes paw3{
    0%,60%{opacity:0; transform:rotate(-20deg) scale(0.9);}
    70%{opacity:.08; transform:rotate(-20deg) scale(1);}
    85%{opacity:.08; transform:rotate(-20deg) scale(1);}
    95%{opacity:0; transform:rotate(-20deg) scale(1.05);}
    100%{opacity:0; transform:rotate(-20deg) scale(1.05);}
}

/* ── 2026 visual refinement: shared surface, rhythm and interaction ── */
:root {
  --surface:#FFFFFF;
  --surface-soft:#F1F7F5;
  --ink-soft:#304743;
  --line:rgba(26,40,38,.10);
  --shadow-sm:0 8px 24px rgba(20,43,39,.07);
  --shadow-lg:0 28px 72px rgba(20,43,39,.14);
  --radius-lg:28px;
}
body{background:var(--surface);color:var(--ink);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;}
body::selection{background:var(--mint);color:var(--ink);}
nav{height:72px;padding:0 max(4%,calc((100vw - 1280px)/2));background:rgba(20,34,31,.92);border-bottom:1px solid rgba(255,255,255,.08);box-shadow:none;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);}
.logo{width:154px;height:36px;background-position:center;background-size:contain;}
.nl{gap:clamp(.8rem,1.4vw,1.7rem);}
.nl a{font-size:var(--fs-xs);color:rgba(255,255,255,.78);letter-spacing:-.01em;transition:color .2s;}
.nl a:hover{color:#fff;}
.nl-cta a{padding:.58rem 1.15rem;background:#fff;color:var(--ink);box-shadow:0 8px 24px rgba(0,0,0,.16);}
.nl-cta a:hover{background:var(--mint);color:var(--ink);}
.nl-react-cta a{background:var(--mint);}
.hero{min-height:calc(100svh - 72px);padding:clamp(4.5rem,8vw,7.5rem) 4% clamp(5rem,8vw,7rem);background:radial-gradient(circle at 82% 18%,rgba(79,168,159,.19),transparent 32%),radial-gradient(circle at 16% 82%,rgba(185,171,230,.12),transparent 30%),#14221f;}
.hero::after{content:'';position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(to bottom,black,transparent 85%);}
.hero-content{max-width:1280px;display:grid;grid-template-columns:minmax(0,.9fr) minmax(500px,1.1fr);gap:clamp(3rem,6vw,6rem);align-items:center;}
.hero-copy{min-width:0;}
.hero-eyebrow{margin-bottom:1.8rem;padding:.5rem .8rem;border:1px solid rgba(127,202,194,.22);border-radius:100px;background:rgba(127,202,194,.06);font-size:var(--fs-xs);letter-spacing:.16em;}
.hero h1{font-size:clamp(3.5rem,6.2vw,6rem);line-height:.98;letter-spacing:-.055em;margin-bottom:2rem;}
.hero h1:before{opacity:.14;right:-2rem;filter:grayscale(1) brightness(2);}
.hero-bottom{display:block;}
.hero-desc{max-width:600px;color:rgba(255,255,255,.68);font-size:var(--fs-md);line-height:1.9;word-break:keep-all;}
.hero-cta-group{margin-top:1.75rem;}
.hero-cta{min-height:52px;padding:.82rem 1.45rem;border:1px solid rgba(127,202,194,.65);font-weight:700;box-shadow:none;}
.hero-cta:hover{transform:translateY(-3px);background:rgba(127,202,194,.12);}
.hero-cta-alt{border-color:var(--mint);background:var(--mint);}
.hero-proof{display:flex;flex-wrap:wrap;gap:.7rem 1.2rem;margin-top:2rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.1);}
.hero-proof span{display:flex;align-items:center;gap:.45rem;color:rgba(255,255,255,.62);font-size:var(--fs-xs);white-space:nowrap;}
.hero-proof b{font-family:var(--font-sans);color:var(--mint);font-size:.68rem;letter-spacing:.08em;}
.moca-transform{border:1px solid rgba(255,255,255,.1);background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.025));box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 34px 80px rgba(0,0,0,.26);backdrop-filter:blur(10px);}
.shape{opacity:.28;filter:blur(80px);}
.cursor-glow{opacity:.42;}
/* 섹션 상하 여백 — 인접 섹션의 아래·위가 더해지므로 이 값의 2배가 실제 간격이다.
   5.5~8rem 이던 것을 4~6rem 으로 줄였다: 1080p 창에서 섹션 사이가 176~200px 이라
   내용 없는 구간이 화면의 20% 를 넘었다(2026-08-24 지적). */
.MOCA-sec,.wp-sec,.tech-sec,.ain-sec,.docs-sec{padding-block:clamp(4rem,6vw,6rem);}
.MOCA-inner,.wp-inner,.tech-inner,.ain-inner,.docs-inner,.cta-inner{max-width:1280px;}
.sec-label{margin-bottom:.9rem;font-size:var(--fs-xs);letter-spacing:.18em;}
.sec-title,.MOCA-title{letter-spacing:-.045em;line-height:1.12;}
.sec-title{font-size:clamp(2.2rem,4.4vw,3.7rem);}
.MOCA-sec{background:linear-gradient(155deg,#EFF8F6 0%,#DCEFEB 100%);}
.MOCA-inner{gap:clamp(1.25rem,2.4vw,2rem);align-items:stretch;}
.MOCA-desc{color:var(--ink-soft);font-size:var(--fs-md);}
.render-viz{border-color:rgba(45,133,123,.14);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);}
.rv-name-legacy{color:var(--coral-dark);}
.rv-name-moca{color:var(--mint-dark);}
.rv-flow{color:var(--muted);}
.ai-banner{border-radius:22px;box-shadow:var(--shadow-sm);}
.stats{padding-block:clamp(2.75rem,4.5vw,4rem);background:#14221f;}
.stat{border-radius:22px;}
.tech-sec{background:var(--surface-soft);}
.tech-grid{gap:1.25rem;}
.tech-card,.doc-card,.ain-card{border-color:var(--line);box-shadow:var(--shadow-sm);}
.tech-card,.doc-card{border-radius:22px;}
.tech-card:hover,.doc-card:hover,.ain-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);}
.tech-card p,.doc-card p,.ain-summary{color:var(--ink-soft);}
.wp-sec{background:linear-gradient(150deg,#FFF7F4 0%,#FBE3DE 100%);}
.wp-network{animation:phoneReveal .9s .5s both;}
.wp-network-legend{box-shadow:var(--shadow-sm);}
.ain-sec{background:#fff;}
.ain-card{border-radius:22px;}
.ain-thumb{height:172px;}
.ain-more,.doc-btn,.wp-dl a,.form-submit{min-height:46px;transition:transform .2s,box-shadow .2s,background .2s,color .2s;}
.ain-more:hover,.doc-btn:hover,.wp-dl a:hover,.form-submit:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(20,43,39,.15);}
.docs-sec{background:linear-gradient(180deg,#F4FAF8,#EAF4F1);}
.docs-grid{gap:1.25rem;}
.cta{padding-block:clamp(4rem,6vw,6rem);background:#14221f;}
.cta-form{border-color:rgba(255,255,255,.14);box-shadow:0 24px 70px rgba(0,0,0,.22);}
.form-field-spaced{margin-bottom:1rem;}
.form-field input,.form-field textarea{min-height:50px;}
footer{background:#0e1816;border-top:1px solid rgba(255,255,255,.08);}

/* MOCA 소개는 오른쪽 데모 높이에 왼쪽 문단을 세로 중앙 정렬하지 않는다. */
/* 다른 섹션과 같은 상단 여백을 쓴다 — 메뉴로 이동했을 때 내용이 시작하는 높이가
   섹션마다 다르면 화면이 불안정해 보인다(2026-08-24 지적). 여기만 3.75rem 이라 5px 낮았다. */
.MOCA-sec{padding-block:clamp(4rem,6vw,6rem);}
.MOCA-title{margin-bottom:1.15rem;}
.MOCA-desc{margin-bottom:1rem;line-height:1.75;}
.render-viz{padding:1.5rem;}
.rv-l{margin-bottom:1rem;}
.rv-bars{gap:.85rem;}
.rv-bar{height:34px;}
.ai-banner{margin-top:1.2rem;}
.ai-header{padding:13px 18px;}
.ai-header-icon{width:36px;height:36px;border-radius:10px;}
.ai-header h4{font-size:var(--fs-lg);}
.ai-header p{font-size:var(--fs-xs);}
.ai-chat{padding:16px 18px;gap:12px;}
.bubble{padding:12px 15px;border-radius:18px;}
.attach{margin-bottom:3px;font-size:var(--fs-sm);}
.chat-msg{font-size:var(--fs-md);}
.build-badge{margin-top:8px;padding:6px 10px;}

/* MOCA 핵심 차별점 — 긴 설명 아래의 빈 영역을 기술 요약 패널로 활용한다. */
.moca-story-box,.moca-edge{height:100%;padding:clamp(1.4rem,2.4vw,2rem);border:1px solid rgba(45,133,123,.18);border-radius:24px;background:rgba(255,255,255,.68);box-shadow:0 16px 38px rgba(45,92,84,.09);backdrop-filter:blur(10px);}
.moca-story-box{display:flex;flex-direction:column;}
.moca-story-kicker{display:flex;align-items:center;gap:.55rem;margin-bottom:1rem;font-family:var(--font-sans);font-size:var(--fs-xs);font-weight:700;letter-spacing:.12em;color:var(--mint-dark);}
.moca-story-kicker span{display:inline-flex;padding:.28rem .55rem;border-radius:7px;background:var(--mint-dark);color:#fff;letter-spacing:.08em;}
.moca-story-box .MOCA-title{font-size:clamp(2.2rem,3.6vw,3.35rem);line-height:1.08;}
.moca-story-box .MOCA-title span{color:var(--mint-dark);}
.moca-story-visual,.moca-edge-visual{position:relative;min-height:166px;margin:0 0 1rem;border:1px solid rgba(45,133,123,.12);border-radius:17px;background:radial-gradient(circle at 22% 52%,rgba(127,202,194,.3),transparent 31%),radial-gradient(circle at 79% 50%,rgba(185,171,230,.2),transparent 38%),linear-gradient(110deg,#F7FBFA,#E7F3F0);overflow:hidden;}
.moca-story-visual img,.moca-edge-visual img{position:absolute;top:50%;object-fit:contain;transform:translateY(-50%);filter:drop-shadow(0 12px 18px rgba(20,58,52,.15));}
.moca-story-editorial{display:flow-root;margin-bottom:.2rem;}
.moca-story-visual{float:left;width:28%;min-height:0;margin:.2rem 1.5rem .4rem -.25rem;border:0;border-radius:0;background:transparent;overflow:visible;shape-outside:inset(0 round 18px);}
.moca-story-visual .moca-product-box-img{position:static;display:block;width:100%;height:auto;transform:rotate(-1deg);filter:drop-shadow(0 18px 22px rgba(20,58,52,.2));}
.moca-story-lead{margin-bottom:.85rem;font-size:var(--fs-md);line-height:1.75;color:var(--ink-soft);word-break:keep-all;}
.moca-story-lead strong{color:var(--coral-dark);}
.moca-story-box .MOCA-desc:last-of-type{margin-bottom:1rem;}
.moca-platform-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem;margin-bottom:.8rem;}
.moca-platform-grid>div{position:relative;padding:.8rem .85rem .75rem 2.65rem;border:1px solid rgba(26,40,38,.08);border-radius:13px;background:rgba(255,255,255,.82);}
.moca-platform-grid>div>span{position:absolute;left:.75rem;top:.78rem;font-family:var(--font-sans);font-size:var(--fs-xs);font-weight:700;color:var(--mint-dark);}
.moca-platform-grid strong{display:block;font-size:var(--fs-sm);line-height:1.35;color:var(--ink);}
.moca-platform-grid p{margin-top:.15rem;font-size:var(--fs-xs);line-height:1.45;color:var(--muted);word-break:keep-all;}
.moca-cost-callout{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:.8rem;padding:.85rem 1rem;border:1px solid rgba(218,88,73,.2);border-radius:14px;background:linear-gradient(105deg,var(--coral-pale),rgba(255,255,255,.88));}
.moca-cost-callout>div{min-width:0;}
.moca-cost-callout span{display:block;margin-bottom:.15rem;font-size:var(--fs-xs);font-weight:700;color:var(--coral-dark);}
.moca-cost-callout strong{display:block;font-size:var(--fs-xs);line-height:1.5;color:var(--ink);word-break:keep-all;}
.moca-cost-callout a{flex:none;display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:.55rem .85rem;border-radius:10px;background:var(--coral-dark);color:#fff;font-size:var(--fs-xs);font-weight:700;text-decoration:none;white-space:nowrap;transition:transform .2s,box-shadow .2s;}
.moca-cost-callout a:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(218,88,73,.24);}
.moca-edge{display:flex;flex-direction:column;}
.moca-edge-head{display:flex;flex-direction:column-reverse;align-items:flex-start;gap:.65rem;margin-bottom:1rem;padding:0 .15rem;}
.moca-edge-head span{font-family:var(--font-sans);font-size:var(--fs-xs);font-weight:700;letter-spacing:.14em;color:var(--mint-dark);}
.moca-edge-head strong{width:100%;font-size:clamp(2.2rem,3.6vw,3.35rem);line-height:1.08;color:var(--ink);white-space:nowrap;}
.moca-edge-visual{min-height:118px;margin-bottom:.75rem;background:radial-gradient(circle at 50% 48%,rgba(185,171,230,.28),transparent 46%),linear-gradient(110deg,#F8FAFA,#EEF0F8);}
.moca-edge-visual img{left:50%;width:72%;height:170%;transform:translate(-50%,-50%);}
.moca-faq{display:flex;flex-direction:column;gap:.55rem;}
.moca-faq-item{border:1px solid rgba(26,40,38,.09);border-radius:14px;background:rgba(255,255,255,.84);overflow:hidden;transition:border-color .2s,box-shadow .2s,background .2s;}
.moca-faq-item[open]{border-color:rgba(45,133,123,.32);background:#fff;box-shadow:0 10px 24px rgba(45,92,84,.08);}
.moca-faq-item summary{display:grid;grid-template-columns:32px minmax(0,1fr) 24px;align-items:center;gap:.7rem;min-height:54px;padding:.65rem .85rem;cursor:pointer;list-style:none;}
.moca-faq-item summary::-webkit-details-marker{display:none;}
.moca-faq-num{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:9px;background:var(--mint-dark);font-family:var(--font-sans);font-size:var(--fs-xs);font-weight:700;color:#fff;box-shadow:0 6px 14px rgba(45,92,84,.16);}
.moca-faq-item summary strong{font-size:var(--fs-md);line-height:1.45;color:var(--ink);word-break:keep-all;}
.moca-faq-toggle{position:relative;width:24px;height:24px;border-radius:50%;background:var(--mint-pale);}
.moca-faq-toggle::before,.moca-faq-toggle::after{content:'';position:absolute;left:7px;top:11px;width:10px;height:2px;border-radius:2px;background:var(--mint-dark);}
.moca-faq-toggle::after{transform:rotate(90deg);transition:transform .2s;}
.moca-faq-item[open] .moca-faq-toggle::after{transform:rotate(0);}
.moca-faq-answer{margin:0 .85rem;padding:.85rem 0 1rem 2.7rem;border-top:1px solid rgba(26,40,38,.07);}
.moca-faq-answer strong{display:block;margin-bottom:.25rem;font-size:var(--fs-sm);line-height:1.5;color:var(--mint-dark);}
.moca-faq-answer p{font-size:var(--fs-sm);line-height:1.7;color:var(--muted);word-break:keep-all;}

@media(max-width:1120px){
  .hero-content{grid-template-columns:1fr;gap:3.5rem;}
  .hero-copy{max-width:760px;margin:0 auto;text-align:center;}
  .hero-desc{margin-inline:auto;}
  .hero-cta-group,.hero-proof{justify-content:center;}
  .hero-visual{width:100%;}
}
@media(max-width:720px){
  nav{height:66px;padding-inline:5%;}
  .hero{min-height:auto;padding:3.75rem 5% 4rem;}
  .hero h1{font-size:clamp(2.8rem,14vw,4.5rem);}
  .hero-eyebrow{font-size:.68rem;letter-spacing:.1em;}
  .hero-proof{gap:.55rem;}
  .hero-proof span{padding:.45rem .7rem;border:1px solid rgba(255,255,255,.1);border-radius:100px;}
  .MOCA-sec,.wp-sec,.tech-sec,.ain-sec,.docs-sec{padding-block:3.25rem;}
  .MOCA-sec{padding-block:3.25rem;}
  .moca-story-box,.moca-edge{height:auto;padding:1.25rem;}
  .moca-story-visual{float:none;width:100%;min-height:0;margin:0 0 .75rem;shape-outside:none;}
  .moca-edge-visual{min-height:108px;}
  .moca-story-visual .moca-product-box-img{width:60%;margin:0 auto;}
  .moca-platform-grid{grid-template-columns:1fr;}
  .moca-cost-callout{align-items:flex-start;flex-direction:column;}
  .moca-edge-head{display:block;}
  .moca-edge-head strong{display:block;margin-bottom:.3rem;white-space:normal;}
  .moca-faq-answer{padding-left:0;}
  .cursor-glow,.hero-shapes{display:none;}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}
}

/* ── 모바일 메뉴 패널이 스크롤을 따라오지 못하던 문제 (2026-08-22 실측·수정) ─────────
   `.nl` 패널은 `position:fixed` 로 뷰포트에 붙어야 하는데, 조상인 `nav` 에
   `backdrop-filter` 가 걸려 있으면 **nav 가 fixed 의 컨테이닝 블록이 된다**(transform·
   filter 와 같은 규칙). 그러면 패널의 `top:0` 이 뷰포트가 아니라 nav 의 원래 자리(문서 최상단)
   기준이 되어, 스크롤을 내린 만큼 패널이 위로 밀려 올라간다 —
   1500px 내린 상태에서 패널 top 이 **-1500px** 로 잡혔다(실측). 내릴수록 덜 보이는 증상이 이것이다.
   `nav.scrolled` 가 아니라 `nav` 에 항상 걸려 있어서, 맨 위에서만 정상으로 보였다.

   패널을 쓰는 구간(≤1200px)에서만 블러를 끈다. nav 배경이 이미 `rgba(20,34,31,.92)` 로
   거의 불투명해 시각 차이가 거의 없고, 데스크톱(>1200px)의 글래스 효과는 그대로 둔다.
   ※ 패널을 nav 밖으로 빼는 방법도 있으나, `.nl` 은 데스크톱에서 nav 의 flex 자식이라
     구조를 옮기면 상단 가로 메뉴 배치가 통째로 깨진다. */
@media(max-width:1200px){
  nav{backdrop-filter:none;-webkit-backdrop-filter:none;}
}

/* ── MOCA 플랫폼 구성도 (2026-08-23) ─────────────────────────────────────────
   제품군이 어떻게 맞물리는지 한 장으로 보여 주는 섹션. 그림은 SVG 파일이라
   글자가 선택·검색되고 확대해도 깨지지 않는다.
   좁은 폭에서는 줄이지 않고 **가로 스크롤**로 둔다 — 1200px 도식을 폰 폭으로 줄이면
   글자가 6px 대가 되어 아무도 못 읽는다. 손가락으로 밀어 보는 편이 낫다. */

.pmap-sec{padding:4rem 4%;background:var(--white);}
.pmap-inner{max-width:1180px;margin:0 auto;text-align:center;}
.pmap-desc{color:var(--muted);font-size:var(--fs-lg);margin:.5rem auto 2.5rem;max-width:700px;}
/* ── 플랫폼 도식 (HTML 판, 2026-08-24) ────────────────────────────────────────
   SVG 를 버리고 HTML 로 그린다. SVG 는 CSS 글자 크기 규칙이 닿지 않아 도식만 크기가
   따로 놀았고, 맞출 때마다 파일을 새로 만들어야 했다(캐시 때문에 이름까지 바꿔야 했다).
   ★ 여기서 글자 크기를 지정하지 않는다 — 페이지 공통 규칙을 그대로 따르게 두는 것이 전환의 목적이다.
   밴드 3개(서버 / 화면 계층 / 개발 환경)를 쌓고 사이에 화살표. 카드는 넓으면 가로로,
   좁아지면 auto-fit 으로 한 줄씩 접힌다. */
.pmap-d{text-align:left;max-width:1100px;margin:0 auto;}
.pmap-d-band{border:1px solid var(--border);border-radius:16px;padding:1rem 1.1rem 1.2rem;background:var(--white);}
.pmap-d-server{border-style:dashed;background:#FAFCFB;}
.pmap-d-screen{background:#F1F9F7;}
.pmap-d-bandtitle{font-weight:700;color:var(--mint-dark);margin-bottom:0.8rem;}
.pmap-d-pills{display:flex;flex-wrap:wrap;gap:0.5rem;}
.pmap-d-pills span{border:1px solid var(--border);border-radius:100px;padding:0.35rem 0.85rem;font-weight:600;color:var(--ink);background:var(--white);}
.pmap-d-bandnote{margin-top:0.8rem;color:var(--muted);word-break:keep-all;}
.pmap-d-link{text-align:center;font-weight:700;color:var(--mint-dark);padding:0.7rem 0;}
/* 카드 — 밴드 안에서 가로로 늘어선다(좁아지면 접힘). 형제 카드를 격자로 묶는다 */
.pmap-d-cards{display:grid;gap:0.7rem;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));}
.pmap-d-band{display:flex;flex-direction:column;}
.pmap-d-card{border-radius:12px;background:var(--white);border:1px solid var(--border);
  border-left:4px solid var(--mint-mid);padding:0.85rem 1rem;}
.pmap-d-card b{display:block;color:var(--ink);}
.pmap-d-card em{display:block;font-style:normal;font-weight:700;color:var(--mint-dark);margin:0.15rem 0 0.4rem;}
.pmap-d-card p{color:var(--muted);line-height:1.65;word-break:keep-all;margin:0;}
.pmap-d-card.c-vio{border-left-color:#7C5CD6;}
.pmap-d-card.c-vio em{color:#6E5BC0;}
.pmap-d-card.c-red{border-left-color:#E0674C;}
/* 「사내 PC 한 대에서 돌립니다」 — MCP 도입 검토자가 가장 먼저 묻는 두 가지(어느 AI 를 쓰나 /
   데이터가 나가나)에 구성표로 답하는 블록. 개발 환경 밴드 안, 카드 아래에 붙는다. */
.pmap-local{grid-column:1/-1;margin-top:0.9rem;padding:1.05rem 1.2rem;border-radius:12px;
    background:rgba(127,202,194,0.10);border:1px solid rgba(127,202,194,0.42);}
.pmap-local>b{display:block;color:var(--ink);font-size:var(--fs-md);margin-bottom:0.45rem;word-break:keep-all;}
.pmap-local p{color:var(--muted);font-size:var(--fs-sm);line-height:1.75;margin:0;word-break:keep-all;}
.pmap-local ul{list-style:none;margin:0.85rem 0 0.7rem;padding:0;display:grid;gap:0.4rem;}
.pmap-local li{display:flex;align-items:baseline;gap:0.6rem;font-size:var(--fs-sm);color:var(--ink);
    padding-bottom:0.4rem;border-bottom:1px dashed rgba(20,43,39,0.14);word-break:keep-all;}
.pmap-local li:last-child{border-bottom:0;padding-bottom:0;}
.pmap-local li>span{flex:0 0 5.6rem;color:var(--muted);font-size:var(--fs-xs);font-weight:700;}
.pmap-local li em,.pmap-local li .pmap-subtitle{font-style:normal;color:var(--mint-dark);font-weight:600;margin-left:0.35rem;}
.pmap-local-tail b{color:var(--ink);}
@media (max-width:600px){ .pmap-local li{flex-wrap:wrap;gap:0.15rem;} .pmap-local li>span{flex-basis:100%;} }
.pmap-d-card.c-red em{color:#C25A34;}

/* ── 모바일 타입 눈금 (2026-08-24) — 본문 크기가 섹션마다 12~16.3px 로 제각각이던 것을
   두 단계로 통일한다: 문단 0.95rem · 카드/보조 0.875rem. 제목은 sec-title 공통이라 그대로. ── */
@media(max-width:640px){
  .hero-desc,.moca-story-lead,.MOCA-desc,.pmap-desc,.ain-desc,.docs-desc,
  .wp-sec .wp-desc,.cta-desc,.pt-lead,.pt-sec .wp-desc,.is-lead,.is-sec .wp-desc,
  .rc-lead,.rc-sec .wp-desc{font-size:var(--fs-md);line-height:1.72;}
  .moca-faq-item summary strong{font-size:var(--fs-md);}
  .moca-faq-answer p,.moca-faq-answer strong,.tech-card p,.doc-card p,
  .pmap-note,.pmap-m-card p,.wp-callout,.pt-step p,.is-feat p{font-size:var(--fs-sm);line-height:1.65;}
}

/* ── 한글 어절 줄바꿈 (2026-08-24) — 제목·강조가 음절 단위로 끊겨
   "프레임워/크", "무/엇이" 처럼 한 글자·어중간 낙하가 생겼다(모바일 실측).
   어절(단어) 단위로만 꺾이게 한다. break-word 는 칸보다 긴 영단어·URL 의 안전판. ── */
h1,h2,h3,h4,.sec-title,.MOCA-title,.moca-edge-head strong,.moca-faq-item summary strong,
.tech-card h3,.doc-card h3,.pmap-m-card b,.is-feat strong,.moca-platform-grid strong,
.moca-cost-callout strong,.wp-callout,.cta-desc,.hero-desc{word-break:keep-all;overflow-wrap:break-word;}

/* ── 모바일 CTA 버튼 배치 (2026-08-24) — 알약 버튼이 폭에 따라 들쭉날쭉 감겨
   비대칭으로 보였다(사용자 지적). 좁은 화면에서는 격자로:
   primary = 한 줄 전체, 고스트들 = 반반. 홀수로 남는 마지막 고스트는 전체 폭. ── */
@media(max-width:640px){
  .rc-cta{display:grid;grid-template-columns:1fr 1fr;gap:0.6rem;}
  .rc-cta a{justify-content:center;text-align:center;padding-inline:0.5rem;}
  .rc-cta .primary{grid-column:1/-1;}
  /* 마지막 고스트가 혼자 남는 경우(전체 자식 수가 짝수) 전체 폭으로 */
  .rc-cta a:last-child:nth-child(even){grid-column:1/-1;}
}

/* ── MOCA 섹션 2단 전환점 (2026-08-24) ─────────────────────────────────────────
   다른 2단 섹션은 880px 에서 1단이 되지만, MOCA 는 왼쪽에 **에디토리얼(float 이미지)**
   가 들어 있어 더 일찍 좁아진다. 1019px 폭 실측에서 왼쪽 칸이 346px 까지 줄고,
   그 안에서 이미지(43%)가 뜨니 글줄이 168px 만 남아 "MOCA는 표준" 한 조각이
   허공에 뜨는 모양이 됐다(사용자 지적).
   전 폭 실측(390~1600px)에서 2단일 때는 **어느 폭에서도** 글줄이 190~230px 로 좁았다.
   → 이 섹션은 항상 1단으로 둔다. 소개 글은 위, FAQ 는 아래로 흐르고
     이미지는 지면 전체 폭 안에서 float 하므로 글줄이 490~690px 로 편안해진다. */
.MOCA-inner{grid-template-columns:1fr;gap:1.5rem;}
/* 이미지 float 해제는 "칸이 좁을 때" 라야 한다 — 1단이 된 뒤에는 칸이 넓으므로 float 유지.
   단, 실제 폰 폭에서는 종전대로 해제(아래 640px 규칙이 담당). */

/* ── MOCA 섹션 타입 눈금 (2026-08-24) — 리드 16 / FAQ 질문 15.2 / 답 14.4 / 카드 13.8 / 12 로
   다섯 단계가 뒤섞여 크기가 들쭉날쭉했다(사용자 지적). 읽는 단위로 두 단계만 쓴다:
     본문급(리드·본문·FAQ 질문) 1rem  ·  보조급(FAQ 답·카드) 0.9rem.
   질문과 본문은 크기를 같게 두고 **굵기로만** 구분한다 — 크기를 자주 바꾸면 지면이 소란해진다.
   (모바일 ≤640px 규칙은 0.95/0.875rem 로 같은 구조를 이미 쓰고 있다) ── */
/* 카드(「SPA 작업공간」 등)와 같은 0.9rem 을 지면의 기준 크기로 삼는다(2026-08-24 지시).
   리드 문단만 16px 이라 유독 커 보였다 — 이제 본문·카드·FAQ 가 모두 같은 크기이고
   위계는 굵기로만 준다. */
.moca-story-lead,.MOCA-desc,.moca-faq-item summary strong{font-size:var(--fs-sm);line-height:1.72;}
.moca-faq-answer strong,.moca-faq-answer p,.moca-platform-grid strong{font-size:var(--fs-sm);}
.moca-platform-grid p{font-size:var(--fs-sm);line-height:1.6;}

/* ── AI 뉴스·공지 스타일 복원(2026-08-24) — 도식 CSS 정리 스크립트가 구간을 넓게 잡아
   이 블록을 같이 지웠었다(뉴스 카드가 1열 전폭으로 깨진 원인). 9bdc547 직전 판에서 복원. ── */
/* ── AI 뉴스 섹션·모달 (index 인라인에서 이동 — ainews.html 과 공용, 2026-08-24) ── */
/* ── AI 뉴스 섹션 ── */
/* ★ 상하 여백은 주지 않는다 — 섹션 공통 규칙(style.css 의 padding-block)을 그대로 쓴다.
   여기서 7rem 을 따로 주는 바람에 이 섹션만 다른 섹션보다 컸고, 뉴스↔문서 사이가
   200px 로 벌어져 빈 공간처럼 보였다(2026-08-24 지적). 좌우 여백만 남긴다. */
.ain-sec{padding-inline:4%;background:linear-gradient(180deg,#FFFFFF 0%,#F0F8F6 100%);}
.ain-inner{max-width:1180px;margin:0 auto;text-align:center;}
.ain-desc{color:var(--muted);font-size:var(--fs-lg);margin:0.5rem auto 2.75rem;max-width:620px;}
.ain-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem;text-align:left;}
.ain-loading,.ain-empty{grid-column:1/-1;color:var(--muted);padding:2.5rem 0;font-size:var(--fs-md);}
.ain-card{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--border);border-radius:18px;overflow:hidden;text-decoration:none;color:inherit;transition:transform 0.25s ease,box-shadow 0.25s ease;box-shadow:0 4px 18px rgba(26,40,38,0.05);}
.ain-card:hover{transform:translateY(-6px);box-shadow:0 16px 36px rgba(26,40,38,0.13);}
.ain-thumb{position:relative;height:148px;background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;}
.ain-thumb .ain-emoji{font-size:3.1rem;filter:drop-shadow(0 3px 6px rgba(0,0,0,0.22));}
.ain-chip{position:absolute;top:12px;left:12px;background:rgba(255,255,255,0.92);color:var(--ink);font-family:var(--font-sans);font-size:var(--fs-xs);font-weight:600;letter-spacing:0.5px;padding:0.28rem 0.7rem;border-radius:100px;}
.ain-body{padding:1.15rem 1.25rem 0.5rem;flex:1;display:flex;flex-direction:column;}
.ain-title{font-size:var(--fs-lg);font-weight:700;line-height:1.4;color:var(--ink);margin-bottom:0.55rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.ain-summary{font-size:var(--fs-sm);color:var(--muted);line-height:1.65;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.ain-meta{display:flex;align-items:center;justify-content:space-between;gap:0.5rem;padding:0.9rem 1.25rem 1.15rem;margin-top:auto;font-family:var(--font-sans);font-size:var(--fs-xs);color:var(--muted);}
.ain-source{font-weight:600;color:var(--mint-dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ain-more-wrap{text-align:center;margin-top:2.5rem;}
.ain-more{cursor:pointer;background:var(--white);border:2px solid var(--mint);color:var(--mint-dark);font-family:var(--font-sans);font-weight:600;font-size:var(--fs-sm);padding:0.8rem 2.2rem;border-radius:100px;transition:background 0.25s,color 0.25s,transform 0.25s;}
.ain-more:hover{background:var(--mint);color:var(--white);transform:scale(1.04);}
@media(max-width:640px){.ain-sec{padding:3rem 5%;} .ain-grid{grid-template-columns:1fr;}}


/* ── 공지 팝업(모달) ── */
.nt-modal{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;padding:5%;background:rgba(20,30,28,0.55);}
.nt-modal.open{display:flex;}
.nt-dialog{position:relative;background:var(--white);border-radius:18px;max-width:680px;width:100%;max-height:82vh;display:flex;flex-direction:column;box-shadow:0 24px 60px rgba(0,0,0,0.3);overflow:hidden;}
.nt-dhead{padding:1.7rem 1.9rem 1rem;border-bottom:1px solid var(--border);}
.nt-dhead h3{font-size:1.3rem;line-height:1.45;color:var(--ink);margin:0.55rem 0 0.6rem;}
.nt-dmeta{font-family:var(--font-sans);font-size:var(--fs-xs);color:var(--muted);}
.nt-dbody{padding:1.5rem 1.9rem;overflow-y:auto;color:var(--ink);font-size:var(--fs-md);line-height:1.8;white-space:pre-wrap;word-break:break-word;}
.nt-close{position:absolute;top:1rem;right:1.3rem;background:none;border:none;font-size:1.9rem;line-height:1;color:var(--muted);cursor:pointer;}


/* ── AI 뉴스 카드 클릭 팝업 ── */
.ain-card{cursor:pointer;}
#anModal .nt-badge{color:#fff;letter-spacing:0.3px;}
.an-sum{white-space:pre-wrap;word-break:break-word;margin:0;font-size:var(--fs-md);line-height:1.85;color:var(--ink);}
.an-nosum{color:var(--muted);}
.an-link{margin-top:1.4rem;padding-top:1.1rem;border-top:1px solid var(--border);}
.an-link a{color:var(--mint-dark);font-weight:600;font-family:var(--font-sans);text-decoration:none;}
.an-link a:hover{text-decoration:underline;}



/* ══════════════════════════════════════════════════════════════════════════
   ★ 전체 글자 크기 통일 (2026-08-24 지시) — 제목까지 포함해 한 가지 크기만 쓴다.
     크기가 28가지까지 늘어나 정리가 안 되니, 일단 전부 0.78rem(12.5px) 으로 눕힌다.
     위계는 굵기·색·여백으로만 준다.

   ★ 되돌리기 : 아래 블록 전체를 지우면 원래 크기 체계로 돌아온다.
     (개별 규칙을 고친 게 아니라 맨 끝에서 덮어쓰는 방식이라 흔적이 남지 않는다)

   ※ 예외는 두 가지뿐이다.
      · 목업 안의 축소 글자(.is-*, .rc-*, .pt-* 의 코드/창 흉내) — 축소가 곧 그 그림의 표현
      · 아이콘·이모지 — 글자가 아니라 그림이라 같이 줄이면 안 보인다
   ══════════════════════════════════════════════════════════════════════════ */
/* 예외 ⓪ 섹션 메인타이틀(2026-08-24 지시) — 제목만 원래 크기(clamp)로 돌린다.
   revert 로는 안 된다(브라우저 기본 h2 크기로 떨어져 clamp 규칙이 죽는다) —
   블랭킷에서 아예 제외해 원래 규칙이 그대로 이기게 한다. 자손(em·span)까지 빼야
   제목 안의 강조 글자가 제목 크기를 상속한다. */
/* 독립 Energy Core 테마는 자체 타이포그래피를 사용한다. */
body:not(.home-landing):not(.contact-page):not(.react-product):not(.docs-library), body:not(.home-landing):not(.contact-page):not(.react-product):not(.docs-library) :not(.hero h1, .hero h1 *, .sec-title, .sec-title *, .site-header, .site-header *, .home-footer, .home-footer *,
  .MOCA-title, .MOCA-title *, .cta h2, .cta h2 *) { font-size: 0.78rem !important; }

/* 예외 ① 목업 — 창·코드 흉내라 원래 크기를 유지한다 */
.is-mock *, .rc-mock *, .pt-mock * { font-size: revert !important; }

/* 예외 ② 그림 구실을 하는 글자 */
.hc-num, .tc-bgnum, .stat .num, .pmap-m-link,
.wp-chip, .pt-row .pt-ic, .cta-bg-text { font-size: revert !important; }