@charset "utf-8";
/* ============================================================================
   메인 sec1 히어로 — 2026-09-08
   원본(외주 산출물)  : __docs/incoming/hero-demo/        ← 손대지 않는다
   원본↔적용본 차이표 : __docs/incoming/hero-demo/README.md
   미리보기(비교용)   : /preview/hero-work.html

   구성 : 슬라이드 5장. 1장은 2단(카피 | 캔버스), 2~5장은 1단.
   ⚠ index.html 만 로드한다. 전 규칙이 .ubx 또는 .mVisual-wr 스코프 안에 있다.
   ============================================================================ */

/* ─────────── TOKENS ───────────
   원본과 다른 것 3개 (CLAUDE.md 근거)
   - 폰트: IBM Plex Mono·나눔명조 두 개를 구글폰트에서 더 받고 있었다. §4 — 이 사이트
     웹폰트는 Spoqa 하나뿐이다. 둘 다 Spoqa 로 대체하고, Mono 가 하던 숫자 자리맞춤만
     tabular-nums 로 살렸다. 새로 받는 폰트 0 개.
   - --wrap:1180px 삭제. 좌우 기준선은 layout.css 의 --content 하나다 (§2).
     ⚠ 여기서 --content 를 다시 선언하지 않는다. layout.css :root 값을 가려버린다.
   - font-weight 600 전멸. §4 — Spoqa 에 600 이 없어 가짜 볼드가 된다. 500/700 만 쓴다. */
.ubx{
  --surface:#FFFFFF;
  --surface-2:#EDEFF3;
  --ink:#14171C;
  --ink-2:#3B424E;
  --ink-3:#697180;
  --line:#DDE1E7;
  --line-2:#BAC1CA;
  /* ⭐ 히어로 캔버스(.axviz) 가 그리는 '종이' 안쪽 전용. --ink-3/--line-2 를 쓰면 안 된다 —
     사진 위(.mVisual-wr .ubx)에서 그 둘은 흰색으로 뒤집히는데 종이 채움(--surface)은
     늘 흰색이라 흰 종이에 흰 글씨가 됐다(2026-09-30). 아래 사진용 오버라이드에서
     이 둘은 일부러 안 건드린다. 값을 --ink-3/--line-2 로 되돌리지 말 것. */
  --card-ink:#697180;
  --card-line:#BAC1CA;
  /* CLAUDE.md §5 — UbiDecision(회사) 정본 브랜드 레드. 데모가 쓰던 #D8232F 는
     외주의 임의값이라 정본으로 되돌렸다. -deep 은 §5.4 규칙대로 흰색·검정을 섞지 않고
     채널 비율만 유지한 배율(×0.75)이다 — 그래야 어두워질 때 채도가 안 빠진다. */
  --accent:#D6000F;
  --accent-deep:#A0000B;
  --accent-wash:#FBEBEC;
  --slate-2:#232C38;
  --on-slate:#E9ECF1;
  --on-slate-2:#98A2B0;
  --shadow:0 1px 2px rgba(20,23,28,.05),0 8px 24px rgba(20,23,28,.06);
  --shadow-lg:0 2px 4px rgba(20,23,28,.06),0 24px 60px rgba(20,23,28,.14);
  --f-sans:var(--font-base,"Spoqa Han Sans Neo",sans-serif);
}
/* 원본이 --f-mono 로 잡던 자리 = 라틴 대문자 라벨·숫자. 폰트 대신 자간·숫자정렬만 준다. */
.ubx .ic-k,.ubx .app-url,.ubx .doc-m,.ubx .app-side .lbl,
.ubx .s-n,.ubx .w-n,.ubx .stats .n{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ─────────── BASE ─────────── */
.ubx,.ubx *,.ubx *::before,.ubx *::after{box-sizing:border-box}
.ubx{color:var(--ink);font-family:var(--f-sans);line-height:1.65;-webkit-font-smoothing:antialiased}
.ubx h1,.ubx h2,.ubx h3,.ubx p,.ubx ul,.ubx ol,.ubx blockquote{margin:0}
.ubx ul{padding:0;list-style:none}
.ubx a{color:inherit;text-decoration:none}
.ubx :focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:3px}
/* §2 — max-width + margin:0 auto. padding-inline 을 주면 --content 여백에 더해져 2중이 된다. */
/* ⚠ width:100% 가 반드시 있어야 한다. 부모 `.mvis-ubx` 가 display:flex(가로) 이고
   flex 아이템은 주축으로 늘어나지 않는다 — flex-grow 가 없으면 내용 너비(max-content)
   만큼만 차지하고, 거기에 margin:0 auto 가 붙어 양쪽에서 안으로 당겨진다.
   종전엔 리드문이 길어 내용 너비가 늘 --content 상한을 넘겨 가려져 있던 버그다.
   2026-09-30 히어로 문구를 줄이자 드러났다(사용자 지적: 컨텐츠영역에 안 찬다).
   ⚠ §2 의 규칙은 그대로다 — 좌우 여백 소유자는 여전히 max-width 이고 padding 이 아니다. */
.ubx .wrap{width:100%;max-width:var(--content);margin:0 auto}

/* ─────────── 공통 타이포 ───────────
   ⚠ ch 기반 글줄 제한(max-width:62ch 등)은 전부 뺐다(사용자 지시 2026-09-08).
      그게 있으면 슬라이드마다 문단 폭이 달라 보인다. 가로 기준선은 --content 하나다.
      다시 넣으려면 폭이 제각각으로 보이는 걸 감수해야 한다. */
.ubx .eyebrow{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:500;
  letter-spacing:.02em;color:var(--accent);margin-bottom:clamp(10px,1.8vh,20px)}
.ubx .eyebrow::before{content:"";width:22px;height:1px;background:currentColor;opacity:.8;flex:none}
.ubx h2.h{font-size:clamp(26px,3.2vw,40px);font-weight:700;line-height:1.26;letter-spacing:-.028em;text-wrap:balance}
.ubx .lede{font-size:19px;color:var(--ink-2);line-height:1.72;margin-top:16px}
.ubx .hero-tit,.ubx h2.h,.ubx .sc-head :is(h2,h3),.ubx .infra-card b{word-break:keep-all}

/* 종전 히어로 버튼을 그대로 가져왔다(사용자 지시 2026-09-08).
   값의 정본은 _Css/main.css 의 .mVisual-wr .txt-box .mbtn — 유리(글래스모피즘) 알약이다.
   ⚠ 빨강 채움 버튼으로 되돌리지 말 것. 사진 위에서 레드는 대비가 안 난다. */
.ubx .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;white-space:nowrap;
  border:1px solid rgba(255,255,255,.55);border-radius:30px;padding:15px 30px;
  background:rgba(255,255,255,.14);
  backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);
  color:#fff;font-weight:500;                    /* 크기는 본문(18px) 상속 — 종전과 같다 */
  transition:background .3s ease,border-color .3s ease;
}
/* 첫 CTA 하나만 채움으로 강조한다(사용자 지시 2026-09-08).
   흰 글자 / #D6000F 대비 5.43:1 — AA(4.5:1) 통과. 실측값이므로 색을 바꾸면 다시 재야 한다. */
.ubx .btn.btn-em{background:var(--accent);border-color:var(--accent)}

@media (hover:hover){
  .ubx .btn:hover{background:rgba(255,255,255,.32);border-color:#fff}
  .ubx .btn.btn-em:hover{background:var(--accent-deep);border-color:var(--accent-deep)}
}
@media all and (max-width:1300px){
  .ubx .btn{padding:12px 20px 10px}
}

/* ─────────── 슬라이드 1 : 카피 + 캔버스 ───────────
   §1.2 — 열 수를 BP 로 끊지 않는다. auto-fit 하나로 2단→1단이 연속으로 준다.
   430px = 왼쪽 글이 읽히는 최소폭. 콘텐츠폭이 (430*2+gap) 밑이면 자동으로 쌓인다(≈940px). */
/* 2026-10-15 : minmax(430px) → minmax(min(430px,100%)). 폰(글칸 320~350px)에서 칸이 430px 로 고정돼
   화면 오른쪽 밖으로 넘쳤고, .mvis-ubx 의 overflow:hidden 에 잘려 가로 스크롤도 안 생겼다(사용자 지적).
   min() 은 칸이 430 보다 좁을 때만 작동한다 — 그보다 넓은 화면은 종전과 같다. */
.ubx .hero-split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(430px,100%),1fr));
  gap:clamp(28px,4vw,56px);align-items:center}
.ubx .hero-copy,.ubx .hero-viz{min-width:0}
.ubx .hero-tit{font-size:clamp(34px,4.05vw,56px);font-weight:700;line-height:1.22;letter-spacing:-.032em;text-wrap:balance}
.ubx .hero-tit em{font-style:normal;color:var(--accent)}

.ubx .hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:clamp(30px,4.8vh,56px)}

/* 캔버스 무대. 그림자 없음(사용자 지시 2026-09-08). */
.ubx .axviz-wrap{position:relative;border:1px solid var(--line);border-radius:12px;overflow:hidden;
  background:radial-gradient(60% 70% at 50% 52%, color-mix(in srgb,var(--accent) 7%,transparent) 0%, transparent 70%),var(--surface)}
.ubx .axviz{display:block;width:100%;aspect-ratio:4/3;transition:opacity .5s ease,transform .5s ease}
/* 장면 설명 — 캔버스 '아래'. 세 항목이 캔버스의 세 장면과 1:1 이고,
   지금 장면만 밝아진다(클래스는 main-hero.js 의 setStep 이 붙인다).
   ⚠ 기본값이 '전부 읽히는 상태' 여야 한다. 캔버스 스크립트가 죽으면 강조만 안 붙는데,
      여기서 opacity:0 을 기본으로 두면 문구가 통째로 사라진다(.rv 와 같은 이유).
   ⚠ 강조를 --accent 로 하지 않는다 — 사진 위 브랜드 레드는 1.95~3.11:1 로 AA 미달이다.
      글자는 밝기 한 단계(--ink-3 → --ink)로 가르고, 빨강은 글자가 아닌 점에만 쓴다. */
.ubx .axviz-legend{margin:clamp(10px,1.5vh,16px) 0 0;padding:0;list-style:none;
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  font-size:13px;line-height:1.6;color:var(--ink-3)}
.ubx .axviz-legend li{display:flex;align-items:center;gap:7px;color:var(--ink-3);opacity:.72;
  transition:color .45s ease,opacity .45s ease}
.ubx .axviz-legend li + li{margin-left:clamp(14px,2.2vw,30px)}
.ubx .axviz-legend li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;
  background:currentColor;opacity:.5;
  transition:background .45s ease,opacity .45s ease,transform .45s ease}
.ubx .axviz-legend li.is-done{opacity:.85}
.ubx .axviz-legend li.is-done::before{background:var(--accent);opacity:.7}
.ubx .axviz-legend li.is-on{color:var(--ink);font-weight:500;opacity:1}
.ubx .axviz-legend li.is-on::before{background:var(--accent);opacity:1;transform:scale(1.45)}
/* 장면 B — 제품 화면 목업이 캔버스 위로 크로스페이드 */
.ubx .mock{position:absolute;inset:0;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .5s ease .08s, visibility 0s linear .58s}
.ubx .mock .app{position:absolute;left:4.5%;top:6%;width:82%;height:88%;display:flex;flex-direction:column}
.ubx .mock .app-body{flex:1;min-height:0}
.ubx .mock .phone{right:4%;bottom:5%}
.ubx .axviz-wrap.show-product .axviz{opacity:0;transform:scale(.985)}
.ubx .axviz-wrap.show-product .mock{opacity:1;visibility:visible;transition:opacity .5s ease .1s, visibility 0s}
.ubx .mock .chart b{transform-origin:bottom}
.ubx .show-product .mock .chart b{animation:ubx-axgrow .75s cubic-bezier(.2,.7,.3,1) both}
.ubx .show-product .mock .chart b:nth-child(2){animation-delay:.05s}
.ubx .show-product .mock .chart b:nth-child(3){animation-delay:.1s}
.ubx .show-product .mock .chart b:nth-child(4){animation-delay:.15s}
.ubx .show-product .mock .chart b:nth-child(5){animation-delay:.2s}
.ubx .show-product .mock .chart b:nth-child(6){animation-delay:.25s}
.ubx .show-product .mock .sign{animation:ubx-axstamp .45s cubic-bezier(.2,.7,.3,1) .55s both}
.ubx .show-product .mock .phone-sign{animation:ubx-axstamp .45s cubic-bezier(.2,.7,.3,1) .75s both}
/* 전역 네임스페이스라 일부러 접두어를 붙였다. 이름을 줄이지 말 것. */
@keyframes ubx-axgrow{from{transform:scaleY(.12);opacity:.4}to{transform:none;opacity:1}}
@keyframes ubx-axstamp{from{opacity:0;transform:scale(1.08)}to{opacity:1;transform:none}}

/* 목업 내부 */
.ubx .app{border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--surface);box-shadow:var(--shadow-lg)}
.ubx .app-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.ubx .dot{width:9px;height:9px;border-radius:50%;background:var(--line-2)}
.ubx .app-url{margin-left:10px;flex:1;height:22px;border-radius:11px;background:var(--surface);
  border:1px solid var(--line);display:flex;align-items:center;padding:0 11px;font-size:11px;color:var(--ink-3)}
.ubx .app-body{display:grid;grid-template-columns:168px 1fr;min-height:300px}
.ubx .app-side{border-right:1px solid var(--line);padding:16px 12px;display:flex;flex-direction:column;gap:5px;background:var(--surface)}
.ubx .app-side .lbl{font-size:10px;letter-spacing:.13em;color:var(--ink-3);padding:0 8px;margin:6px 0 4px}
.ubx .si{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:4px;font-size:13px;color:var(--ink-2)}
.ubx .si i{width:5px;height:5px;border-radius:1px;background:var(--line-2);flex:none}
.ubx .si.on{background:var(--accent-wash);color:var(--accent-deep);font-weight:500}
.ubx .si.on i{background:var(--accent)}
.ubx .app-main{padding:22px 24px;display:flex;flex-direction:column;gap:18px;background:#F5F6F8}
.ubx .doc{background:var(--surface);border:1px solid var(--line);border-radius:5px;padding:20px 22px;
  box-shadow:var(--shadow);flex:1;display:flex;flex-direction:column;gap:16px}
.ubx .doc-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;border-bottom:1px solid var(--line);padding-bottom:13px}
.ubx .doc-t{font-size:15px;font-weight:500;letter-spacing:-.02em}
.ubx .doc-m{font-size:10px;color:var(--ink-3);letter-spacing:.05em}
.ubx .chart{display:flex;align-items:flex-end;gap:7px;height:74px}
.ubx .chart b{flex:1;background:var(--surface-2);border-radius:2px 2px 0 0;display:block}
.ubx .chart b.hi{background:var(--accent)}
.ubx .rows{display:flex;flex-direction:column;gap:7px}
.ubx .row{display:grid;grid-template-columns:1fr 62px 52px;gap:12px;align-items:center}
.ubx .ln{height:7px;border-radius:2px;background:var(--surface-2)}
.ubx .ln.s{background:var(--line)}
.ubx .sign{border:1.5px dashed var(--accent);border-radius:5px;background:var(--accent-wash);
  padding:11px 14px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.ubx .sign-l{font-size:12px;color:var(--accent-deep);font-weight:500}
/* 원본은 여기가 나눔명조였다. 폰트가 하나뿐이라 굵기·자간으로만 구분한다. */
.ubx .sign-s{font-size:19px;color:var(--accent-deep);line-height:1;font-weight:500;letter-spacing:.02em}
.ubx .phone{position:absolute;right:14px;bottom:0;width:186px;border:1px solid var(--line);
  border-radius:20px;background:var(--surface);box-shadow:var(--shadow-lg);padding:9px}
.ubx .phone-in{border:1px solid var(--line);border-radius:13px;overflow:hidden;background:#F5F6F8}
.ubx .phone-top{height:22px;background:var(--surface);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:center}
.ubx .phone-top span{width:44px;height:4px;border-radius:2px;background:var(--line-2)}
.ubx .phone-body{padding:12px 11px;display:flex;flex-direction:column;gap:9px}
.ubx .phone-body .ln{height:6px}
.ubx .phone-sign{border:1.5px dashed var(--accent);border-radius:4px;background:var(--accent-wash);padding:9px;text-align:center;margin-top:3px}
.ubx .phone-sign span{font-size:16px;color:var(--accent-deep);font-weight:500;letter-spacing:.02em}
.ubx .phone-btn{background:var(--accent);color:#fff;border-radius:4px;text-align:center;padding:7px;font-size:11px;font-weight:500;margin-top:4px}

/* ─────────── 슬라이드 2~5 공통 머리글 ───────────
   ⚠ 바깥 카드(.sc-panel)의 채움은 걷어냈다(사용자 지시). 뼈대만 남은 세로 흐름이다. */
/* ⚠ 세로 간격은 vh 함수다. 히어로가 뷰포트 100 이라, 화면이 낮으면(노트북 768·720)
      2단 라이프사이클이 잘린다. §1.2 대로 새 브레이크포인트를 만들지 않고 함수로 줄인다.
      1080px 화면에서 22px, 720px 화면에서 12px. 고정값으로 되돌리지 말 것. */
.ubx .sc-panel{display:flex;flex-direction:column;gap:clamp(12px,2vh,22px)}
.ubx .sc-head{display:flex;flex-direction:column;gap:clamp(3px,.6vh,6px)}
.ubx .sc-head .eyebrow{margin-bottom:clamp(2px,.6vh,6px)}
.ubx .sc-head :is(h2,h3){font-size:clamp(20px,min(2.6vw,3.4vh),30px);font-weight:700;letter-spacing:-.025em;line-height:1.28;text-wrap:balance}
.ubx .sc-head p{font-size:16px;color:var(--ink-2);line-height:1.65}

/* ─────────── 슬라이드 2 : 문서 라이프사이클 ─────────── */
.ubx .tier{padding:clamp(10px,1.6vh,16px) 18px}
.ubx .t-hd{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:clamp(4px,.8vh,8px)}
.ubx .t-t{font-size:19px;font-weight:700;letter-spacing:-.025em}
.ubx .t-s{font-size:15.5px;line-height:1.6}
.ubx .tier-ai{background:var(--accent-wash);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);
  border-bottom:0;display:flex;align-items:center;flex-wrap:wrap;gap:8px 18px;padding:clamp(8px,1.2vh,12px) 18px}
.ubx .tier-ai .t-hd{margin:0}
.ubx .tier-ai .t-s{color:var(--ink-2);flex:1 1 260px;font-size:14px;margin:0}
.ubx .tier-core{background:var(--surface);border:1px solid var(--line);padding:clamp(10px,1.6vh,16px) 18px clamp(12px,1.8vh,18px)}
/* §1.2 — 열 수를 BP 마다 재선언하지 않는다. auto-fit 하나로 5→…→1 이 연속으로 준다. */
.ubx .flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:5px;overflow:hidden}
.ubx .step{background:var(--surface);padding:clamp(8px,1.2vh,12px) 12px clamp(10px,1.4vh,14px);display:flex;flex-direction:column;gap:clamp(4px,.7vh,6px)}
.ubx .s-n{font-size:12.5px;font-weight:500;color:var(--accent);letter-spacing:.07em}
.ubx .s-ko{font-size:18px;font-weight:700;letter-spacing:-.025em;line-height:1.15}
.ubx .s-d{font-size:14px;color:var(--ink-2);line-height:1.5;flex:1}

/* 제품 칩 = 이 안에서는 라벨이 아니라 실제 CTA 다. 버튼 무게를 준다. */
.ubx .prods{display:flex;flex-direction:column;gap:4px;margin-top:2px}
.ubx a.prod{display:flex;align-items:center;justify-content:space-between;gap:8px;width:auto;
  font-size:13px;font-weight:500;padding:8px 11px;border-radius:5px;
  background:var(--accent-wash);border:1.5px solid color-mix(in srgb,var(--accent) 45%,transparent);
  color:var(--accent-deep);box-shadow:0 1px 2px color-mix(in srgb,var(--accent) 12%,transparent);
  transition:background .16s,border-color .16s,color .16s,box-shadow .16s,transform .16s}
.ubx a.prod::after{content:"→";font-size:14px;line-height:1;transition:transform .16s}
.ubx a.prod:hover,.ubx a.prod:focus-visible{background:var(--accent);border-color:var(--accent);color:#fff;
  box-shadow:0 4px 14px color-mix(in srgb,var(--accent) 34%,transparent);transform:translateY(-1px)}
.ubx a.prod:hover::after,.ubx a.prod:focus-visible::after{transform:translateX(3px)}
.ubx a.prod:active{transform:translateY(0);box-shadow:none}
.ubx .tier-ai .prods{flex-direction:row;margin-top:0}
.ubx .tier-ai a.prod{background:var(--accent);border-color:var(--accent);color:#fff;padding:9px 13px;border-radius:6px;
  box-shadow:0 2px 8px color-mix(in srgb,var(--accent) 30%,transparent)}
.ubx .tier-ai a.prod:hover{background:var(--accent-deep)}

/* ─────────── 슬라이드 3 : 인프라 ───────────
   바깥 판을 벗겼으므로 머리글은 본문 잉크를 쓴다.
   안쪽 카드(.infra-card)는 자기 어두운 채움을 유지한다 — 그건 "가장 큰 div" 가 아니다. */
.ubx .infra-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(10px,1.4vh,14px)}
.ubx .infra-card{display:flex;flex-direction:column;gap:clamp(4px,.8vh,7px);padding:clamp(12px,1.8vh,18px) 20px clamp(11px,1.6vh,16px);border-radius:9px;
  background:var(--slate-2);border:1px solid rgba(255,255,255,.12);color:var(--on-slate);
  transition:border-color .16s,transform .16s}
.ubx .infra-card:hover{border-color:var(--accent);transform:translateY(-2px)}
/* IaaS·PaaS 는 대소문자 섞인 약어다. 원본의 text-transform:uppercase 가 IAAS 로 찍고 있었다. */
.ubx .infra-card .ic-k{font-size:11.5px;letter-spacing:.06em;text-transform:none;color:var(--accent)}
.ubx .infra-card b{font-size:clamp(24px,2.3vw,31px);font-weight:700;letter-spacing:-.025em;line-height:1.2}
.ubx .infra-card p{font-size:17px;color:var(--on-slate-2);line-height:1.6}
.ubx .infra-card ul{display:flex;flex-direction:column;gap:5px;margin-top:2px}
.ubx .infra-card li{font-size:16px;line-height:1.55;padding-left:14px;position:relative;color:var(--on-slate)}
.ubx .infra-card li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:1.5px;background:var(--accent)}
/* 2026-09-30 : 텍스트 링크 → 사이트 표준 버튼(999px pill + 1px 테두리).
   레시피 정본은 layout.css .cta-btn / .cta-btn-secondary — 카드가 어두운 판이라
   흰색 알파 유리가 맞다. ⚠ 빨강 채움으로 바꾸지 말 것(§main-hero.css 상단 주석과 같은 이유). */
.ubx .infra-card .ic-cta{
  align-self:flex-start;margin-top:auto;
  display:inline-flex;align-items:center;justify-content:center;gap:.45em;
  height:46px;padding:0 24px;box-sizing:border-box;border-radius:999px;
  border:1px solid rgba(255,255,255,.45);background:rgba(255,255,255,.14);
  backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);
  font-size:15.5px;font-weight:500;letter-spacing:-.02em;color:#fff;
  transition:background .3s ease,border-color .3s ease}
.ubx .infra-card:hover .ic-cta{background:rgba(255,255,255,.3);border-color:#fff;color:#fff}
.ubx .infra-foot{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:baseline;font-size:14px;
  color:var(--ink-3);border-top:1px solid var(--line);padding-top:14px}
.ubx .infra-foot b{color:var(--ink);font-weight:500;margin-right:6px}
.ubx .infra-foot a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-2)}
.ubx .infra-foot a:hover{color:var(--accent);text-decoration-color:var(--accent)}
.ubx .ext::after{content:"↗";font-size:.78em;margin-left:.35em;opacity:.6}

/* ─────────── 슬라이드 4 : 왜 지금인가 ─────────── */
.ubx .pull{font-size:clamp(20px,2.5vw,27px);line-height:1.62;font-weight:300;
  border-left:3px solid var(--accent);padding:6px 0 6px 26px;margin-top:clamp(16px,3vh,34px)}
.ubx .pull cite{display:block;font-style:normal;font-size:13.5px;color:var(--ink-3);margin-top:18px;font-weight:400}
.ubx .stats{display:flex;flex-wrap:wrap;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:6px;overflow:hidden;margin-top:clamp(18px,3.4vh,38px)}
.ubx .stats li{flex:1 1 300px;background:var(--surface);padding:clamp(18px,2.8vh,30px) 28px}
.ubx .stats .n{font-size:clamp(44px,6vw,60px);font-weight:700;letter-spacing:-.05em;color:var(--accent);line-height:1}
.ubx .stats .d{font-size:16px;color:var(--ink-2);margin-top:16px;line-height:1.6}
.ubx .src{font-size:13px;color:var(--ink-3);margin-top:16px}

/* ─────────── 슬라이드 5 : 왜 유비디시전인가 ─────────── */
.ubx .why{display:flex;flex-wrap:wrap;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:6px;overflow:hidden;margin-top:clamp(18px,3.4vh,38px)}
.ubx .why li{flex:1 1 270px;background:var(--surface);padding:clamp(16px,2.4vh,26px) 24px clamp(18px,2.6vh,28px)}
.ubx .w-n{font-size:12.5px;font-weight:500;color:var(--accent);letter-spacing:.07em}
.ubx .why h3{font-size:20px;font-weight:700;letter-spacing:-.025em;margin:12px 0 10px}
.ubx .why p{font-size:16px;color:var(--ink-2);line-height:1.65}

/* ============================================================================
   히어로에서 내려온 본문 섹션 (2026-09-09)
   캐러셀 2~5 번 슬라이드를 스크롤 섹션으로 옮겼다. 히어로는 1 장만 남는다.
   ⭐ 마크업은 손대지 않았다 — 같은 `.ubx` 안에 그대로 들어 있어서 컴포넌트
      CSS(§ .sc-panel · .infra-grid · .stats · .why)가 전부 그대로 먹는다.
   ⭐ 사진 위 흰 글자로 뒤집던 규칙은 전부 `.mVisual-wr .ubx` 스코프였다.
      히어로 밖으로 나온 순간 `.ubx` 의 기본 토큰(라이트)으로 자동 복귀한다 —
      여기서 색을 다시 지정하지 않는다.
   ============================================================================ */

/* 세로 여백만 준다. 좌우는 `.ubx .wrap` 의 --content 가 갖는다(§2 — 여기에
   padding 을 주면 2중 여백이 된다). */
.main-sec.ubx-sec{padding:clamp(72px,7.5vw,128px) 0}

/* 흰 섹션이 연달아 서지 않도록 한 칸 걸러 톤을 준다.
   ⚠ 색이 아니라 밝기 한 단계다 — 카드(.stats li·.why li·.tier-core)가 --surface
      흰색이라, 바탕이 옅게 깔려야 칸 경계가 보인다. */
.main-sec.ubx-sec.sec-whynow,
.main-sec.ubx-sec.sec-infra{background:#F4F5F7}

/* .ubx 기본 포커스링은 사진 위 전제라 흰색이다. 밝은 섹션에서는 안 보인다. */
.main-sec.ubx-sec .ubx :focus-visible{outline-color:var(--ink)}

/* 히어로에서는 100vh 안에 다섯 장을 우겨넣느라 vh 로 죄어 놨다.
   스크롤 섹션은 그 제약이 없으므로 세로 리듬만 조금 푼다. */
.main-sec.ubx-sec .ubx .sc-panel{gap:clamp(18px,2.2vw,30px)}
.main-sec.ubx-sec .ubx .sc-head :is(h2,h3){font-size:clamp(24px,2.9vw,36px)}
/* 2026-09-30 : 플랫폼 섹션 제목만 한 단계 더 크게(사용자 지시).
   eyebrow 를 걷어내 이 제목이 섹션의 첫 줄이 됐다. 중간 단계는 BP 가 아니라 clamp 로(§1.2) —
   778px 에서 28px, 1278px 이상에서 46px. */
.main-sec.ubx-sec.sec-platform .ubx .sc-head :is(h2,h3){font-size:clamp(28px,3.6vw,46px)}
.main-sec.ubx-sec .ubx h2.h{margin-top:14px}

/* 등장 페이드 — main.js 의 .obs-target 관측자가 붙이는 .on 을 쓴다.
   ⚠ 감추는 쪽은 .js-anim 이 붙었을 때만이다(main-hero.js 가 맨 앞에서 붙인다).
      스크립트가 죽으면 클래스가 안 붙고, 그러면 섹션이 처음부터 그냥 보인다.
      opacity:0 을 기본값으로 두면 JS 사고 한 번에 본문 4개가 백지가 된다.
   ⚠ IntersectionObserver 가 없으면 main.js 가 .on 대신 .no-observer 를 붙인다.
      그 경우도 보이게 해 둬야 한다. */
.ubx-sec.js-anim .rv{opacity:0;transform:translateY(18px);
  transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.ubx-sec.js-anim.on .rv,
.ubx-sec.js-anim.no-observer .rv{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .ubx-sec.js-anim .rv{opacity:1;transform:none;transition:none}
}

@media all and (max-width:999px){
  .main-sec.ubx-sec{padding:clamp(52px,9vw,80px) 0}
}

/* ============================================================================
   sec1 배치 — 여기부터가 이 프로젝트 고유분(원본 데모에 없던 것)
   ============================================================================ */

/* ⚠ .mVisual-wr 는 main.css 에서 position 이 없다(`.main-sec1 .mVisual-wr {}` 빈 규칙).
   종전 마크업은 .txt-box 가 슬라이드(relative) 안이라 문제가 없었지만,
   프로그레스바는 .mVisual-wr 직계라 relative 가 없으면 뷰포트로 탈출한다. */
.main-sec1 .mVisual-wr{position:relative}

/* 높이 = 가장 큰 슬라이드 (사용자 결정 2026-09-08).
   ⭐ 다섯 장을 grid 한 칸(1/1)에 겹쳐 놓는다. 그러면 무대 높이가 자동으로
      가장 큰 슬라이드가 된다 — JS 가 높이를 재지 않는다. 계산으로 맞추면
      폰트 로드·리플로우마다 틀어진다.
   min-height 는 짧은 장이 히어로답게 보이도록 하는 바닥값. */
/* ⭐ 히어로 높이는 정확히 100vh 다. --header-h 를 빼지 말 것.
   _Css/main.css:23 의 `main {margin-top:-70px}` 가 본문을 헤더 높이만큼 끌어올려서,
   히어로가 헤더 **아래로 파고들고** 헤더가 그 위에 떠 있는 구조다(메인 전용).
   그래서 100vh 에서 헤더를 빼면 문서가 그만큼 짧아져 **다음 섹션이 70px 먹고 들어온다**
   (2026-09-08 실제로 이 증상이 났다).
   dvh 는 모바일 주소창이 접힐 때 100vh 가 튀는 것을 막는다. */
.mVisual-wr .mvis-track{height:100vh}
@supports (height:100dvh){
  .mVisual-wr .mvis-track{height:100dvh}
}
.mVisual-wr .mvis-stage{display:grid;height:100%}
.mVisual-wr .mvis-slide{grid-area:1/1;display:flex}

/* ⭐ 감추는 쪽은 .js-anim 이 붙었을 때만이다(main-hero.js 가 맨 첫 줄에서 붙인다).
   JS 가 죽거나 차단되면 아래 두 줄만 살아서 "첫 장만 보이는 정적 히어로" 가 된다.
   기본값을 opacity:0 으로 두면 스크립트 사고 한 번에 sec1 이 통째로 백지가 된다.
   ⚠ 특정도가 (0,3,0) 로 같으므로 .js-anim 규칙이 반드시 뒤에 와야 이긴다. */
.mVisual-wr .mvis-slide:nth-child(n+2){display:none}

.mVisual-wr.js-anim .mvis-slide{
  display:flex;
  opacity:0;visibility:hidden;
  transition:opacity .8s ease, visibility 0s linear .8s;
}
.mVisual-wr.js-anim .mvis-slide.is-on{
  opacity:1;visibility:visible;
  transition:opacity .8s ease, visibility 0s;
}

/* 슬라이드 안 내용 상자. 아래 컨트롤 바 자리를 비워 둔다. */
/* 아래쪽은 컨트롤 바(bottom:70px)와 진행 막대(bottom:34px) 자리를 비운다.
   ⚠ 여기를 줄이면 두 컨트롤 위로 글이 올라탄다. */
/* 위 : 헤더가 히어로 위에 겹쳐 있으니 그 높이를 반드시 비운다.
   아래 : 컨트롤 바(bottom:70px)와 진행 막대(bottom:34px) 자리.
   ⚠ 여기를 줄이면 글이 GNB 나 컨트롤 위로 올라탄다. */
.mVisual-wr .mvis-ubx{flex:1;min-height:0;display:flex;align-items:center;overflow:hidden;
  padding:calc(var(--header-h) + clamp(16px,2.6vh,40px)) 0 clamp(104px,15vh,132px)}

/* 사진 위에 앉으므로 잉크를 밝은 쪽으로 뒤집는다 (사용자 결정: 사진 유지 + 글자 흰색).
   ⚠ 흰 채움을 갖는 조각(목업·제품칩·통계칸 등)은 아래에서 따로 되돌린다. */
.mVisual-wr .ubx{
  --ink:#fff;
  --ink-2:rgba(255,255,255,.88);
  --ink-3:rgba(255,255,255,.66);
  --line:rgba(255,255,255,.24);
  --line-2:rgba(255,255,255,.45);
  /* ⚠ 여기서 --accent 를 밝은 쪽(핑크)으로 갈지 않는다(사용자 지시 2026-09-08).
     사진 위 브랜드 레드는 측정값이 1.95~3.11:1 로 AA 미달이다. 대비는 색을 바꿔서가
     아니라 뒤에 배경을 깔아서 푼다. 색을 다시 밝히지 말 것. */
}
/* 사진이 밝은 구간에서도 글이 읽히도록 아래쪽을 어둡게 깐다.
   ⚠ 완전 평면 단색으로 만들지 않는다 — 사진의 계조가 사라진다(CLAUDE.md §4 배너 규칙과 같은 이유). */
.mVisual-wr .mvis-slide::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(10,12,16,.34) 0%, rgba(10,12,16,.52) 55%, rgba(10,12,16,.72) 100%);
}
.mVisual-wr .mvis-ubx{position:relative;z-index:1}

/* 자기 채움을 갖는 흰 조각들은 원래 잉크로 되돌린다 */
.mVisual-wr .ubx .app,
.mVisual-wr .ubx .phone,
.mVisual-wr .ubx .tier-ai,
.mVisual-wr .ubx .tier-core,
.mVisual-wr .ubx a.prod{
  --ink:#14171C;--ink-2:#3B424E;--ink-3:#697180;
  --line:#DDE1E7;--line-2:#BAC1CA;--accent:#D6000F;--accent-deep:#A0000B;
  /* ⚠ 변수만 되돌리면 안 된다 — color 는 .ubx 에서 이미 흰색으로 계산된 채 상속된다.
     자기 color 가 없는 글자(.doc-t 보고서 제목 등)가 흰 종이에 흰 글씨였다(2026-10-16). */
  color:var(--ink);
}

/* 4·5단 격자 : 틀(테두리·칸 사이 선)은 두고 채움만 투명 (사용자 결정) */
.mVisual-wr .ubx .stats,
.mVisual-wr .ubx .why{background:rgba(255,255,255,.24);border-color:rgba(255,255,255,.28)}
.mVisual-wr .ubx .stats li,
.mVisual-wr .ubx .why li{background:rgba(255,255,255,.06)}

/* 캔버스 무대는 사진 위에서 유리판이다.
   ⭐ 2026-09-30 : 알파 .07 은 사실상 맨 사진이라, 배경이 흰 종이와 보고서 목업을 뚫고
      올라와 그림이 안 읽혔다(사용자 지시 "글래스 효과를 강하게"). 판을 어둡게 깔고
      backdrop-filter 로 뒤를 뭉갠다. .mock(마지막 보고서 장면)도 이 판 위에 앉으므로
      같이 해결된다 — 목업에 따로 배경을 주지 말 것.
   ⚠ 완전 불투명으로 만들지 않는다. 사진의 계조가 남아야 유리로 읽힌다(CLAUDE.md §4 와 같은 이유).
   ⚠ backdrop-filter 는 새 스태킹 컨텍스트를 만든다. .mock 은 이 요소의 자식이라 무관하지만,
      바깥으로 삐져나가야 하는 자식을 넣으면 잘린다(overflow:hidden 과 같은 효과). */
.mVisual-wr .ubx .axviz-wrap{
  background:rgba(12,14,18,.56);
  border-color:rgba(255,255,255,.26);
  backdrop-filter:blur(22px) saturate(120%);
  -webkit-backdrop-filter:blur(22px) saturate(120%);
}
/* 종전에 여기 있던 .axviz-legend 깔개(어두운 그라데이션)는 삭제했다 — 문구가 캔버스 위에
   겹쳐 있을 때 사진과 겹쳐 읽히라고 둔 것인데, 지금은 그림 밖이라 필요 없다. */

/* 등장 페이드 — 활성 슬라이드에서만.
   ⚠ 감추는 쪽은 .js-anim 이 붙었을 때만이다. main-hero.js 가 맨 첫 줄에서 붙인다.
      스크립트가 죽거나 차단되면 클래스가 안 붙고, 그러면 글이 처음부터 그냥 보인다.
      opacity:0 을 기본값으로 두면 JS 사고 한 번에 히어로가 통째로 백지가 된다. */
.mVisual-wr.js-anim .mvis-ubx .rv{opacity:0;transform:translateY(16px);
  transition:opacity .6s cubic-bezier(.2,.7,.3,1),transform .6s cubic-bezier(.2,.7,.3,1)}
.mVisual-wr.js-anim .mvis-ubx .rv.in{opacity:1;transform:none}
/* 2026-09-30 : 두 번째 요소(캔버스)의 .12s 시차 제거(사용자 지시 — 딜레이 없이 바로).
   슬라이드가 여러 장이던 시절 글→그림 순서를 주려던 것인데, 지금은 1 장이라
   첫 화면에서 그림만 늦게 뜨는 것으로 보인다. */
.mVisual-wr.js-anim .mvis-ubx .rv:nth-child(2){transition-delay:0s}

/* 점(bullet)은 이제 <button> 이다(종전 swiper 는 <span> 이었다).
   크기·테두리·활성색은 main.css 의 .data-pkg .mvis-dots 규칙이 갖는다.
   여기서는 버튼의 브라우저 기본값만 지운다. */
.mVisual-wr .data-pkg .mvis-dots > button{
  padding:0;background:none;border-radius:0;cursor:pointer;appearance:none;-webkit-appearance:none;
}
.mVisual-wr .data-pkg .mvis-dots > button:hover{background-color:rgba(255,255,255,.45)}

/* ─────────── 진행 막대 ───────────
   컨트롤 바(.data-pkg)와 같은 좌우 기준선에 두고, 그 바로 아래에 눕힌다. */
/* 컨트롤 바 가운데정렬 (사용자 지시 2026-09-08).
   main.css 는 left:var(--gutter) 로 왼쪽에 붙인다 — 종전 히어로는 글이 왼쪽이라 그게 맞았다.
   지금은 슬라이드마다 내용 배치가 달라서 가운데가 맞다. right:auto 를 같이 줘야
   shrink-to-fit 폭이 유지된다(prev/next 가 그 폭의 양끝에 붙는다). */
.mVisual-wr .data-pkg{left:50%;right:auto;transform:translateX(-50%);z-index:3}

/* ⭐ z-index:3 은 장식이 아니라 클릭이 되게 하는 값이다.
   슬라이드 본문 상자 `.mvis-ubx` 가 `position:relative;z-index:1` 인 데다
   슬라이드를 꽉 채우는 박스라(아래 여백도 padding 이지 바깥이 아니다) 컨트롤 바 자리까지
   덮는다. `.data-pkg` 는 z-index 가 auto 여서 그 아래에 깔렸고,
   화살표·점·재생정지 버튼이 전부 보이기만 하고 눌리지 않았다(2026-09-09).
   ⚠ `.mvis-ubx` 의 z-index 를 빼서 풀지 말 것 — 그건 슬라이드 사진 위 어둠막
   (`.mvis-slide::before`)보다 글을 위로 올리는 값이다. */

/* 진행 막대는 컨트롤 바(bottom:70px)보다 아래에 눕힌다 — 둘이 겹치면 안 된다.
   좌우 기준선은 컨트롤 바와 같은 var(--gutter) 다. */
.mVisual-wr .mvis-progress{position:absolute;left:var(--gutter);right:var(--gutter);bottom:34px;
  height:3px;background:rgba(255,255,255,.30);border-radius:2px;overflow:hidden;z-index:3}
.mVisual-wr .mvis-progress i{display:block;height:100%;width:0;background:#fff;border-radius:2px;
  box-shadow:0 0 8px rgba(255,255,255,.5)}
.mVisual-wr .mvis-progress.is-paused i{background:rgba(255,255,255,.5)}

@media (prefers-reduced-motion:reduce){
  .mVisual-wr.js-anim .mvis-ubx .rv{opacity:1;transform:none;transition:none}
  /* 2026-10-15 : 히어로 캔버스·목업·장면 설명의 전환 끄기는 삭제 — 캔버스가 이 설정을 무시하고 돌기 때문에
     (main-hero.js 캔버스 블록), 여기서 전환만 끄면 장면이 바뀔 때 뚝뚝 끊긴다. */
  .mVisual-wr .mvis-progress{display:none}
}

/* §1.1 — 전역 BP 는 1300/999/520 넷뿐이다. 원본의 1080·860 은 여기로 합쳤고,
   사라진 중간 단계는 위쪽 clamp()/auto-fit 이 대신 만든다(§1.2). */
@media all and (max-width:999px){
  /* main.css 가 이 구간에서 height:500px 로 못박는다. 여기서도 뷰포트 기준으로 되돌린다. */
  .mVisual-wr .mvis-track{height:100vh}
  .mVisual-wr .mvis-ubx{padding:calc(var(--header-h) + clamp(12px,2vh,28px)) 0 clamp(92px,14vh,116px)}
  .mVisual-wr .mvis-progress{bottom:28px}
  .mVisual-wr .mvis-ubx{padding:96px 0 130px}
  .ubx .axviz{aspect-ratio:16/7}
  .ubx .phone{display:none}
  .ubx .app-body{grid-template-columns:1fr}
  .ubx .app-side{display:none}
  .ubx .mock .app{left:3%;top:3%;width:94%;height:auto}
  .ubx .axviz-legend{font-size:11.5px}
  .ubx .axviz-legend li + li{margin-left:14px}
  .ubx .axviz-legend li{gap:6px}
  /* 폰에서는 한 장을 대략 한 화면에 — 부차 문장을 접는다 */
  .ubx .sc-head p,.ubx .tier-ai .t-s,.ubx .infra-foot .if-when{display:none}
  .ubx .tier-ai{gap:8px 12px}
  .mVisual-wr .mvis-progress{bottom:44px}
}
@media all and (max-width:520px){
  .ubx .tier{padding:16px 14px}
  .ubx .tier-core{padding:16px 14px 18px}
  .ubx .hero-cta .btn{flex:1 1 100%}
  .ubx .stats li,.ubx .why li{flex-basis:100%}
  .ubx .stats li{padding:22px 18px}
  .ubx .why li{padding:20px 18px 22px}
}


/* ═══════════════════════════════════════════════════════════════════
   2026-09-30 · 문서 생애주기 섹션 — 3단 유리판
   ═══════════════════════════════════════════════════════════════════ */

/* 다운로드 아이콘. 라벨 오른쪽(사용자 지시). 사진 위라 stroke 1.7px 로 두껍게. */
.ubx .btn .btn-ico{flex:none;display:block}

/* ⚠ 유리는 '뒤에 계조가 있어야' 유리로 보인다 — CLAUDE.md §4 가 배너에서 겪은 것과 같다.
   섹션 바탕이 순백이면 backdrop-filter 가 섞을 게 없어 그냥 반투명 띠가 된다.
   그래서 아주 옅은 기울기를 깔고 그 위에 판을 얹는다. 회색 hex 단색이 아니라 기울기여야 한다. */
.main-sec.ubx-sec.sec-platform{
  background:
    radial-gradient(120% 90% at 10% -5%, color-mix(in srgb,var(--accent) 7%,transparent) 0%, transparent 56%),
    radial-gradient(100% 80% at 94% 16%, #DAE2EF 0%, transparent 60%),
    linear-gradient(180deg,#F8F9FB 0%,#EDF0F6 100%);
}

/* 종전엔 1·2단이 테두리를 맞대어 한 덩어리였다(tier-ai 의 border-bottom:0).
   사용자 지시로 3단을 서로 떼어 놓는다. */
.ubx .stack{display:flex;flex-direction:column;gap:clamp(10px,1.4vw,18px)}

/* 유리 레시피 — layout.css .cta-btn-secondary 와 같은 계열. 밝은 바탕이라 흰색 알파다.
   특정도 0,4,0 이라 위쪽 .ubx .tier-ai / .tier-core (0,2,0) 의 채움·테두리를 이긴다. */
.main-sec.ubx-sec.sec-platform .ubx .tier{
  background:rgba(255,255,255,.52);
  backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);
  border:1px solid rgba(255,255,255,.75);border-radius:14px;
  box-shadow:0 8px 28px rgba(28,38,56,.09), inset 0 1px 0 rgba(255,255,255,.6);
  padding:clamp(16px,2vw,26px) clamp(16px,2vw,24px);
}
/* 판 안의 흰 칸들도 같이 비쳐야 유리가 유리로 읽힌다. 불투명 흰색이면 판 위에 종이가 얹힌 꼴이 된다. */

/* AI 솔루션 칩 — 주력 제품이 아니라 강조를 뺀다. 형태·크기는 그대로, 색만 흰색(사용자 지시). */
.ubx .tier-ai a.prod{background:#fff;border-color:var(--line-2);color:var(--ink);
  box-shadow:0 1px 2px rgba(28,38,56,.08)}
.ubx .tier-ai a.prod:hover,.ubx .tier-ai a.prod:focus-visible{background:#fff;border-color:var(--ink);
  color:var(--ink);box-shadow:0 4px 14px rgba(28,38,56,.14)}

/* ⚠ 임시 — 작업하는 동안만 키워 둔 값이다(사용자 지시 2026-09-30).
   3단 유지 여부가 정해지면 다른 ubx-sec 과 같은 clamp(72px,7.5vw,128px) 로 되돌린다. */
/* 2026-09-30 : 위아래 여백을 2/3 으로(사용자 지시). 96/168 → 64/112.
   ⚠ 이 값은 작업하려고 키워 뒀던 임시값이었다. 이제 다른 ubx-sec(72~128px)보다
      오히려 작다 — 의도한 것이다. 되돌릴 일이 생기면 그 값이 기준이다. */
.main-sec.ubx-sec.sec-platform{padding:clamp(64px,6.7vw,112px) 0}

/* 슬라이드가 1 장이라 조작 UI(.data-pkg·진행막대)가 숨겨져 있다. 그 자리로 잡아 뒀던
   아래 패딩 104~132px 을 걷어야 내용이 실제로 가운데 온다 — 안 걷으면 위로 치우쳐 보인다
   (2026-09-30 사용자 지적). 클래스는 main-hero.js 가 붙인다: 슬라이드를 다시 늘리면
   클래스가 안 붙고 원래 패딩으로 자동 복귀한다. 특정도 0,3,0 이라 ≤999 블록도 이긴다. */
.mVisual-wr.mvis-single .mvis-ubx{
  padding:calc(var(--header-h) + clamp(14px,2.4vh,38px)) 0 clamp(34px,5.5vh,66px)}

/* 3단 인프라 카드 — 제품군 섹션의 카드를 그대로 가져왔다(2026-09-30 사용자 지시).
   겉모습은 main.css 의 :is(.main-sec2,.tier-infra) 가 공유한다. 여기서는 배치만 정한다.
   ⚠ .main-sec2 .cards-box 의 그리드/더보기 토글은 일부러 공유하지 않았다 —
      그쪽은 overflow:hidden + JS 가 넣는 max-height 로 첫 줄만 남기는 틀이라,
      여기에 걸리면 카드가 잘린다. §1.2 대로 열 수는 BP 가 아니라 auto-fit 이 준다. */
.ubx .tier-infra .cards-box{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  /* 2026-09-30 : 인피니티스택 ↔ 바라스택 사이 간격 확대(사용자 지시). 12px → 16~28px.
     ⚠ 단계 카드(.step .cards-box)는 세로로 쌓이는 flex 라 이 gap 을 안 쓴다 — 여기만 바뀐다. */
  gap:clamp(16px,1.9vw,28px);width:100%;box-sizing:border-box;margin-top:clamp(10px,1.4vw,16px)}

/* ═══════════════════════════════════════════════════════════════════
   2026-09-30 · 생애주기 섹션 배경 = 제품군 섹션과 같은 사진 (사용자 지시)
   앞쪽의 옅은 기울기 블록을 같은 특정도 + 뒤 순서로 덮는다. 되돌리려면 이 블록만 지운다.
   ═══════════════════════════════════════════════════════════════════ */

/* ⭐ 카드 사진이 안 보이던 원인.
   .tier 가 backdrop-filter 를 가져 스태킹 컨텍스트를 만드는데, .card 와 그 안의 <a> 는
   position:relative 지만 z-index:auto 라 컨텍스트를 못 만든다. 그래서 카드 내부의
   z-index(사진 0 · 글 1 · 화살표 2)가 카드 안에서 안 풀리고 유리판 컨텍스트에 섞였다.
   isolation:isolate 로 카드마다 자기 컨텍스트를 준다 — 다른 속성은 건드리지 않는다. */
.ubx .sc-panel .card{isolation:isolate}

/* 2026-09-30 : 오브젝트를 아래로 내린다(사용자 지시).
   ⚠ background-position 의 세로값만 바꾸면 아무 일도 안 일어난다 — 사진 비율이 1.702 인데
      이 섹션은 그보다 세로로 길어서 cover 가 '높이에 맞춰' 확대한다. 세로로 넘치는 부분이
      없으니 세로 오프셋이 무효다(실측: 1920x1128). 그래서 높이를 112% 로 키워 넘길 자리를
      먼저 만들고, 위를 기준으로 붙인다 → 사진 중앙의 오브젝트가 섹션의 약 56% 지점으로 내려온다.
   ⚠ background-color 는 안전망이다. 극단적인 화면비에서 112% 가 가로를 다 못 덮어도
      드러나는 곳이 검정이라 티가 안 난다(어차피 위쪽은 검정으로 채운다). */
.main-sec.ubx-sec.sec-platform{
  background-color:#080A10;
  /* ⭐ 사진 아래로 아주 옅은 계조 두 장. 장식이 아니라 01~05 유리판의 '재료' 다 —
     CLAUDE.md §4 · 이 파일 위쪽 주석과 같은 이유로, 뒤가 평면 단색이면 backdrop-filter 가
     섞을 게 없어 유리가 그냥 검은 띠가 된다(2026-09-30 '완전 까망으로 덮고 있다' 지적).
     사진은 섹션의 48% 아래 · 오른쪽에만 있어서 판 뒤(13~48%)가 통째로 평면이었다.
     ⚠ 색이 아니라 계조다. 최고점이 rgb(50,58,80)/L=.042 라 흰 제목이 11.4:1 로 남는다.
     ⚠ 사진의 위치·크기(right bottom / auto 52%)는 사용자 결정이라 안 건드린다. */
  background-image:
    url(/_Img/Main/main_sec02_bg.jpg),
    radial-gradient(92% 44% at 16% 36%, rgba(104,118,158,.32) 0%, transparent 72%),
    radial-gradient(64% 36% at 88% 26%, rgba(70,84,120,.26) 0%, transparent 74%);
  background-repeat:no-repeat;
  /* 2026-09-30 : 오른쪽 아래를 앵커로 잡고 크기를 줄인다(사용자 지시).
     cover 를 버렸으므로 사진이 섹션을 다 덮지 않는다 — 남는 자리는 background-color
     (#080A10) 가 채운다. 그게 '비는 공간은 검정' 이다.
     ⚠ 세로 52% 기준이라 가로는 1.702 × 0.52 × 섹션높이로 따라온다. 폭을 직접 지정하지
        않는 이유는 사진 비율이 깨지면 안 되기 때문이다. */
  background-position:right bottom, 0 0, 0 0;
  background-size:auto 52%, 100% 100%, 100% 100%;
}
/* ⚠ 이 사진은 어둡다 — .main-sec2 가 제목·카드 글자를 #fff 로 두는 것이 그 근거다.
   그래서 잉크 토큰을 뒤집는다. 히어로(.mVisual-wr .ubx)가 쓰는 것과 같은 방식이고,
   토큰만 갈면 되므로 개별 규칙을 하나도 안 건드린다. */
.main-sec.ubx-sec.sec-platform .ubx{
  --ink:#fff;
  --ink-2:rgba(255,255,255,.88);
  --ink-3:rgba(255,255,255,.66);
  --line:rgba(255,255,255,.24);
  --line-2:rgba(255,255,255,.45);
}
/* 유리판 — 어두운 사진 위라 흰색 알파를 낮춘다. 밝은 바탕에서 쓰던 .52 는 여기선 뿌옇다.
   (layout.css §5.4 의 '밴드 안에서는 .13 으로 낮춘다' 와 같은 이유) */
.main-sec.ubx-sec.sec-platform .ubx .tier{
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 10px 34px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.22);
}
/* ⚠ AI 칩은 흰 채움이다. 위에서 --ink 를 흰색으로 뒤집었으므로 글자색을 명시하지 않으면
   흰 글자 + 흰 배경이 된다. 여기만 본문 잉크를 직접 박는다. */
.main-sec.ubx-sec.sec-platform .ubx .tier-ai a.prod{color:#1D2430}

/* 카드 높이 — 제품군 섹션은 5열이라 350px 고정이 맞지만, 3단은 2열이라 카드가 넓다.
   폭이 다르면 줄 수가 달라지므로 고정 높이는 좁은 폭에서 글을 누르고 넓은 폭에서는 남는다.
   내용이 정하게 하고 하한만 둔다. 같은 줄의 두 카드는 grid 기본 stretch 로 높이가 맞는다.
   ⚠ 아래 padding 은 화살표(.card:before, bottom:32px · height:16px)를 피해야 한다 — 48px 이 하한. */
/* ⚠ display:grid 가 반드시 있어야 한다. <a> 가 카드 전체 높이를 채워야 그 :before(배경사진,
   inset:0)가 카드를 다 덮는다. height:auto 로만 두면 <a> 는 글자 높이까지만 차지해
   min-height 로 늘어난 아래쪽이 사진 없이 비고, 화살표(.card:before)만 그 빈 자리에 찍힌다
   (2026-09-30 실제로 그랬다). grid 아이템은 기본 stretch 라 한 줄로 해결된다. */
.ubx .sc-panel .cards-box .card{height:auto;display:grid}
.ubx .tier-infra .cards-box .card{min-height:clamp(170px,15vw,200px)}
/* 화살표를 아래로 더 붙여 그만큼 패딩을 줄인다. 제품군 섹션(bottom:32px·height:16px →
   48px 확보 필요)과 달리 여기선 카드가 낮아야 해서 22px 로 내리고 패딩 44px 로 맞췄다. */
.ubx .tier-infra .cards-box .card:before{bottom:22px}
.ubx .tier-infra .card > a{height:auto;padding:clamp(24px,2.4vw,32px) clamp(26px,2.6vw,34px) 44px}

/* 제목이 사진의 바쁜 구간에 얹혀 안 읽힌다(2026-09-30 사용자 지적) → 그라데이션 스크림.
   ⚠ 단색 판으로 덮지 않는다 — §4 와 같은 이유로, 계조가 사라지면 아래 유리판이
      섞을 게 없어져 그냥 반투명 띠가 된다. 위만 누르고 아래로 풀어 준다.
   ⚠ 사진이 프로그레시브 JPEG 이라 이 서버의 measure_banner*.py 로 못 잰다.
      그래서 '사진이 가장 밝을 때'(L=1.0)를 가정한 최악값으로 알파를 잡았다 —
      검정 .85 를 얹으면 합성 L ≤ .15, 흰 글자 대비 = 1.05/.20 = 5.25:1 (AA 4.5 통과).
      실제 사진은 더 어두우므로 여유는 이보다 크다.
   ⚠ 아래 stop 값은 2026-09-30 에 바뀌었다. 종전 설명("28% 까지 평평, 42% 부터 풀어 준다")은
      사진이 full-bleed 이던 시절 것이라 지금과 맞지 않는다 — 실측은 제목대 6~13%,
      01~05 판 시작 13~15%, 사진 시작 48% 다(python3 로 섹션 높이를 재서 계산).
   ⚠ 정지점을 22% 로 당기면 제목 아랫줄이 3.85:1 로 AA 미달이 된다(검산함). */
.main-sec.ubx-sec.sec-platform{position:relative;isolation:isolate}
.main-sec.ubx-sec.sec-platform::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(8,10,16,1)   0%,
    rgba(8,10,16,1)   14%,   /* 제목대(섹션의 6~13%)까지는 아예 검정 — 사용자 지시 그대로다 */
    rgba(8,10,16,0)   32%,   /* ⭐ 2026-09-30 : 여기부터 연다. 01~05 판이 15% 부터 앉는데
                                종전엔 26% 까지 불투명이라 판 뒤가 통째로 가려져 있었다.
                                ⚠ 화면이 어두워지는 게 아니다 — 이 색 rgba(8,10,16,1) 은
                                   바탕색 #080A10 과 같은 색이라 지워도 위쪽은 그대로 검정이다.
                                   지우는 건 '검정' 이 아니라 그 아래 계조를 가리던 뚜껑이다. */
    rgba(8,10,16,0)   44%,
    rgba(8,10,16,.22) 50%,   /* 사진 윗변(48%) 이음매만 종전 값 그대로 누른다 */
    rgba(8,10,16,0)   60%);  /* 아래로 갈수록 사진이 드러난다 */
}

/* ─── 2026-09-30 : 3단을 유리판 '하나'로 합친다(사용자 지시 · 스크린샷 기준) ───
   종전엔 .tier 세 개가 각각 유리판이고 .stack 이 gap 으로 떼어 놨다.
   이제 .stack 이 판을 갖고, .tier 는 그 안의 구획이 된다.
   ⚠ 위쪽 '.sec-platform .ubx .tier' 유리 규칙(특정도 0,4,0)을 같은 특정도 + 뒤 순서로 덮는다.
      되돌리려면 이 블록만 지우면 된다 — 앞 블록은 그대로 살아 있다. */
/* 2026-09-30 : 가장 바깥 판 제거(사용자 지시). 안쪽 칸들이 각자 패널을 갖게 되면서
   바깥 테두리까지 있으면 액자가 두 겹이 된다. .stack 은 이제 세로 간격만 갖는다.
   ⚠ padding 을 함께 지웠으므로 안쪽 칸들이 .sc-panel 폭을 그대로 쓴다 — 폭의 소유자는
      §2 대로 --content 하나다. 여기에 좌우 padding 을 되살리지 말 것. */
.main-sec.ubx-sec.sec-platform .ubx .stack{gap:clamp(10px,1.4vw,18px)}
/* 안쪽 구획은 자기 판을 버린다. 세로 리듬은 padding 으로만 준다. */
.main-sec.ubx-sec.sec-platform .ubx .tier{
  background:none;backdrop-filter:none;-webkit-backdrop-filter:none;
  border:0;border-radius:0;box-shadow:none;
  padding:clamp(10px,1.2vw,16px) 0;
}
/* 2026-09-30 : 구획 경계선 삭제(사용자 지시). 단계와 인프라가 각각 자기 패널을 갖게 되면서
   선으로 끊어 줄 이유가 없어졌다 — 선까지 있으면 테두리가 두 겹으로 읽힌다. */

/* ─── 2026-09-30 : 단계(01~05) 안의 제품 칩 → 제품군 섹션의 실제 카드로 교체(사용자 지시) ───
   카드 폭은 flow 5열 기준 약 260px 로, 제품군 섹션의 원래 카드 폭(284px)과 거의 같다.
   다만 한 단계에 3장이 세로로 쌓이므로(01 생성) 높이와 글자를 한 단계씩 줄인다.
   ⚠ 여기서 줄이는 건 .step 안쪽뿐이다 — 제품군 섹션과 3단 인프라 카드는 안 건드린다. */
.ubx .step .cards-box{display:flex;flex-direction:column;gap:10px;margin-top:10px;width:100%}
/* 2026-09-30 : 가장 내용이 긴 유비도큐 컨버터 & 뷰어에 다른 카드 높이를 맞춘다(사용자 지시).
   ⚠ 폭이 넓을수록 '작은' 값이다 — 화면이 좁아지면 글자칸이 줄어 설명 줄 수가 늘기 때문이다.
      그래서 vw 계수가 음수다(보통의 clamp 와 반대 방향). 실측 근거:
      1920→260px · 1300→286px · 1100→302px · 1000→327px 이 컨버터가 필요로 하는 높이다.
      calc(400px - 7.3vw) 이 그 직선을 지난다(1000 에서 327, 1920 에서 260).
   ⚠ min-height 는 상한이 아니라 하한이다. 이 값을 넘는 내용은 그대로 더 커진다 —
      그래서 어긋나더라도 글자가 잘리지는 않는다. */
.ubx .step .cards-box .card{min-height:clamp(230px,calc(400px - 7.3vw),300px);border-radius:16px}
.ubx .step .card > a{height:auto;padding:clamp(20px,2vw,26px) clamp(16px,1.6vw,22px) 44px}
/* 화살표도 카드 크기에 맞춰 줄이고 아래로 붙인다(기본값은 40x16 · bottom:32px). */
.ubx .step .cards-box .card:before{width:28px;height:11px;right:18px;bottom:15px}
/* 2026-09-30 : 글자 축소를 걷었다(사용자 지시 — 운영 카드와 같은 크기로).
   종전엔 01 에 카드가 3장 쌓여서 높이를 맞추려고 4단을 전부 줄여 뒀었다.
   지금은 4열에 최대 2장이라 그 제약이 없다. 크기는 제품군 섹션 카드와 완전히 같아진다
   (:is(.main-sec2,.sc-panel) 가 공유하는 값 — 설명 18px · 제품명 26px).
   ⚠ 설명만 키우지 않는다. 그러면 설명(18px)이 영문명(12.6px)보다 커져 4단 위계가 뒤집힌다. */

/* ─── 2026-09-30 : 네 단계를 각각 떼어 나열한다(사용자 지시) ───
   종전 .flow 는 gap:1px + 바깥 테두리 + overflow:hidden 으로 '표 한 장'처럼 붙여 놓은
   구조였다(1px 틈에 배경색이 비쳐 칸선이 되는 방식). 칸을 떼려면 그 세 가지를 같이 풀어야
   한다 — gap 만 벌리면 배경이 칸 사이로 넓게 드러나고, 테두리만 지우면 모서리가 안 둥글다.
   §1.2 — 열 수는 여전히 auto-fit 이 준다. 브레이크포인트를 만들지 않는다. */
.main-sec.ubx-sec.sec-platform .ubx .flow{
  gap:clamp(8px,1vw,14px);
  background:none;border:0;border-radius:0;overflow:visible;
}
.main-sec.ubx-sec.sec-platform .ubx .step{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.5);
  border-radius:12px;
  padding:clamp(14px,1.6vw,20px) clamp(12px,1.3vw,16px) clamp(14px,1.6vw,18px);
}

/* ─── 2026-09-30 : 인프라 단을 자기 박스 하나로 묶는다(사용자 지시) ───
   제목("Application을 돌리는 인프라까지")과 카드 두 장이 한 테두리 안에 들어간다.
   위 .step 패널과 같은 레시피를 쓴다 — 같은 판 안에서 칸마다 다른 재질이면 따로 노는다. */
.main-sec.ubx-sec.sec-platform .ubx .tier-infra{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.5);
  border-radius:12px;
  padding:clamp(16px,1.8vw,22px) clamp(14px,1.5vw,18px) clamp(16px,1.8vw,20px);
}

/* ─── 2026-09-30 : AI 단도 하나로 묶는다 — 위 칸들과 같은 기하, 배경은 아직 없이 ───
   제목("문서가 데이터가 되는 곳")부터 버튼까지가 한 덩어리로 읽혀야 한다.
   폭·모서리·안여백은 .step / .tier-infra 와 같은 값을 쓴다. 채움만 비워 둔다(사용자 지시). */
.main-sec.ubx-sec.sec-platform .ubx .tier-ai{
  background:none;
  border:1px solid rgba(255,255,255,.5);
  border-radius:12px;
  padding:clamp(16px,1.8vw,22px) clamp(14px,1.5vw,18px);
}

/* ─── 2026-09-30 : 패널 가독성 — 흰색 유리 → 어두운 유리 ───
   ⚠ 이 섹션은 흰 글자다. 흰색 알파를 얹으면 바탕이 글자색 쪽으로 밝아져 대비가 오히려 깎인다.
      종전 rgba(255,255,255,.08) 이 그랬다(사용자 지적: 글씨 읽기 힘듦).
      §5.4 가 CTA 밴드에서 '바탕이 밝아지면 흰 비율을 낮춘다' 고 적어 둔 것과 같은 이유다.
   ⚠ 바깥 판을 걷을 때 backdrop-filter 도 같이 사라졌다 — 블러가 유리를 유리로 만드는 부분이라
      각 패널로 옮겨 온다. 블러는 대비를 올리지 않는다(평균 휘도는 그대로). 대비는 어두운 채움이 만든다.
   대비(흰 글자) : 사진 L=0.10 → 11.7:1 · 0.25 → 7.2:1 · 0.40 → 5.2:1 — 전부 AA 통과.
   사진이 프로그레시브 JPEG 이라 실측은 못 했다. 다만 .main-sec2 가 같은 사진 위에
   패널 없이 흰 글자를 쓰므로, 사이트는 이미 이 사진을 L≲0.18 로 전제하고 있다. */
.main-sec.ubx-sec.sec-platform .ubx .step,
.main-sec.ubx-sec.sec-platform .ubx .tier-infra{
  background:rgba(8,10,16,.62);
  backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);
  border-color:rgba(255,255,255,.26);
}
/* AI 단은 채움 없이 두라는 지시(2026-09-30) — 블러만 얹어 테두리 안쪽이 살짝 가라앉게 한다.
   채움이 없으므로 글자 대비는 사진에 그대로 의존한다. 읽기 힘들면 여기에 같은 어두운 채움을 준다. */
.main-sec.ubx-sec.sec-platform .ubx .tier-ai{
  backdrop-filter:blur(10px) saturate(130%);-webkit-backdrop-filter:blur(10px) saturate(130%);
}

/* 인프라 단을 위 단계(01~04)와 같은 모양으로 — 번호 + 제목 세로 배치.
   값은 .ubx .step 과 같은 것을 쓴다(2026-09-30 '05 운영' 으로 교체). */
.main-sec.ubx-sec.sec-platform .ubx .tier-infra{
  display:flex;flex-direction:column;gap:clamp(4px,.7vh,6px);
}

/* 2026-09-30 : 세로 간격 축소(사용자 지시).
   ① 머리글("각 구간의 제품을…")과 표 사이 = .sc-panel 의 gap. 30 → 18px(와이드 기준).
   ② 표와 표 사이(01~04 → 05, 그리고 05 → AI) = .stack 의 gap. 18 → 10px.
   ⚠ ②는 .stack 의 gap 하나라 05→AI 간격도 같이 줄어든다. 따로 두려면 .tier-ai 에
      margin-top 을 주는 게 아니라 .stack 을 grid 로 바꿔 row-gap 을 나눠야 한다
      (인접형제 마진을 새로 만들면 §2.1 과 같은 '소유자 둘' 문제가 생긴다). */
.main-sec.ubx-sec.sec-platform .ubx .sc-panel{gap:clamp(12px,1.5vw,18px)}
/* 2026-09-30 : 05 위아래 간격을 01~04 사이 간격과 같게(사용자 지시).
   .flow 의 gap 과 같은 식을 쓴다 — 숫자를 따로 적으면 한쪽만 고쳐질 때 어긋난다. */
.main-sec.ubx-sec.sec-platform .ubx .stack{gap:clamp(8px,1vw,14px)}

/* ⭐ 간격이 안 줄던 진짜 이유 — .tier 의 세로 패딩(위 '박스 합치기' 때 남긴 10~16px)이
   tier-core 에 그대로 붙어 있었다. gap 을 줄여도 이 패딩이 위아래로 더해져 표가 안 붙었다.
   01~04 는 각 .step 이 자기 패딩을 갖고 있으므로 묶음 자체는 패딩이 필요 없다. */
.main-sec.ubx-sec.sec-platform .ubx .tier-core{padding:0}


/* 단계 카드 바깥 글자(번호·제목·설명)를 한 단계 키운다(2026-09-30 사용자 지시).
   05 운영 박스도 같은 .s-n/.s-ko 를 쓰므로 함께 커진다 — 번호 줄이 서로 달라지면 안 된다. */
.main-sec.ubx-sec.sec-platform .ubx .s-n{font-size:14px}
.main-sec.ubx-sec.sec-platform .ubx .s-ko{font-size:21px}
.main-sec.ubx-sec.sec-platform .ubx .s-d{font-size:16px}


/* ─── 2026-09-30 : 카드를 담는 판(.step / 05 운영)을 흰 유리로(사용자 지시) ───
   카드 자체는 사진 그대로다. 흰색을 칠하는 건 그 카드를 담고 있는 판이다.
   ⚠ 잉크를 같이 뒤집는다. 이 섹션은 --ink 가 흰색이라(사진 위 전제) 판만 희게 하면
      번호·제목·설명이 사라진다. 판 안에서만 본문 잉크로 되돌린다.
   ⚠ 번호는 --accent(#D6000F) 가 아니라 --accent-deep 을 쓴다. 흰 유리 .80 위에서
      원색 레드는 4.45:1 로 AA 미달이고, deep 은 6.44:1 이다(뒤 사진이 어두울 때 기준).
   대비: 본문 12.8:1 · 보조 6.4:1 · 번호 6.4:1 — 전부 통과. */
.main-sec.ubx-sec.sec-platform .ubx .step,
.main-sec.ubx-sec.sec-platform .ubx .tier-infra{
  /* 2026-09-30 : '더 비치게 + 더 환하게'(사용자 지시). 둘은 보통 서로를 잡아먹는다 —
     알파를 낮추면 어두운 사진이 더 비쳐 판이 회색으로 가라앉는다.
     그래서 알파는 .80 → .55 로 낮추고, 잃은 밝기는 backdrop-filter 의 brightness 로
     되찾는다. brightness 는 '판 뒤에 있는 것'을 밝히므로 투명도를 깎지 않고 밝아진다.
     ⚠ brightness 는 sRGB 채널에 곱해진다(선형 휘도가 아니다). 대비를 눈대중하지 말 것.
     합성 바탕 .601 — 본문 9.67:1 · 번호 5.21:1 로 둘 다 AA 통과(뒤 사진 최악 기준). */
  /* 2026-09-30 : 단색 → 세로 그라데이션(사용자 지시). 위는 완전 흰색(뒤가 안 비친다),
     아래로 내려오며 종전 수준 .55 로 열린다. backdrop-filter 는 그대로 살아 있어서
     투명해지는 아래쪽만 블러·brightness 가 실제로 보인다.
     2026-09-30 : 위쪽 흰색 농도 완화(1.0 → .86, 사용자 지시). 위에서도 뒤가 조금 비친다.
     ⚠ 대비는 위에서 가장 좋고 아래에서 가장 나쁘다 — 기준선은 여전히 바닥의 .55 다. */
  /* 2026-09-30 : 판 자체는 채움 없이 — '문서가 데이터가 되는 곳'(.tier-ai) 과 같은 수준.
     흰 유리는 아래 .step-head(글자 블록)만 갖는다. */
  background:none;
  backdrop-filter:blur(10px) saturate(130%);-webkit-backdrop-filter:blur(10px) saturate(130%);
  /* 2026-09-30 : 외곽선을 밝게(사용자 지시). .22 → .48.
     판 자체가 채움 없는 상태라 테두리가 칸의 경계를 혼자 진다 — 옅으면 칸이 흩어져 보인다. */
  border-color:rgba(255,255,255,.48);
  box-shadow:none;
}
.main-sec.ubx-sec.sec-platform .ubx .step .s-ko,
.main-sec.ubx-sec.sec-platform .ubx .tier-infra .s-ko{color:#1D2430}
.main-sec.ubx-sec.sec-platform .ubx .step .s-d,
.main-sec.ubx-sec.sec-platform .ubx .tier-infra .s-d{color:#4A5361}
/* 2026-09-30 : 번호를 브랜드 원색으로 되돌림(사용자 지시). accent-deep 로 낮췄던 것은
   흰 유리 위 AA 때문이었는데, 판이 밝아지면서(brightness + 그라데이션) 원색도 통과한다. */
.main-sec.ubx-sec.sec-platform .ubx .step .s-n,
.main-sec.ubx-sec.sec-platform .ubx .tier-infra .s-n{color:var(--accent)}

/* 단계 번호를 키운다(2026-09-30 사용자 지시). 제목(21px)보다 크게 잡아 시선의 첫 자리를 준다. */
.main-sec.ubx-sec.sec-platform .ubx .s-n{font-size:26px;line-height:1.1}

/* ─── 2026-09-30 : 번호와 제목을 같은 줄에(사용자 지시) ───
   HTML 은 안 건드린다. 칸을 flex-wrap 행 배치로 바꾸고, 뒤따르는 설명·카드에만
   width:100% 를 줘서 줄을 강제로 넘긴다 — 래퍼 <div> 를 새로 넣지 않아도 된다.
   ⚠ .s-d 는 기본이 flex:1 이라 그대로 두면 번호·제목 옆에 끼어든다. flex 를 눌러야 한다.
   align-items:baseline — 26px 번호와 21px 제목의 밑선을 맞춘다(가운데 정렬이면 따로 논다). */
.main-sec.ubx-sec.sec-platform .ubx .step,
.main-sec.ubx-sec.sec-platform .ubx .tier-infra{
  /* 래퍼 .step-head 가 생기면서 판은 다시 단순한 세로 흐름이다(2026-09-30). */
  flex-direction:column;align-items:stretch;
  gap:clamp(8px,1vw,12px);
}


/* ─── 2026-09-30 : 05 운영 카드 — 영문명을 한글명 옆으로(와이드 전용) ───
   ⚠ '와이드 전용' 을 min-width:1301px 같은 새 BP 로 만들지 않는다(§1.1 — 전역 BP 는
      1300/999/520/(min)1000 넷뿐). 대신 옆배치를 기본값으로 두고 ≤1300 에서 되돌린다.
      결과는 같고 BP 는 안 늘어난다.
   <a> 를 줄바꿈 flex 로 바꾸고 수식어·설명만 100% 로 밀어내면, 한글명과 영문명이 한 줄에 남는다.
   래퍼 <div> 를 넣지 않는 이유는 .step 에서 쓴 방법과 같다 — 마크업과 CSS 를 둘 다
   맞춰야 하는 상태를 만들지 않는다. */
.ubx .tier-infra .card > a{
  display:flex;flex-wrap:wrap;align-items:baseline;align-content:flex-start;
  column-gap:10px;row-gap:0;
}
.ubx .tier-infra .card .cd-s-tit,
.ubx .tier-infra .card .txt{flex:0 0 100%}
.ubx .tier-infra .card .cd-ko{margin-bottom:0}
/* 영문명이 한글명과 같은 줄로 올라오면서 한 줄(약 31px)이 비었다 — 그만큼 카드를 줄인다. */
.ubx .tier-infra .cards-box .card{min-height:clamp(140px,12.4vw,168px)}

@media all and (max-width:1300px){
  /* 좁아지면 원래대로 세로 쌓기. 줄이 하나 늘어나므로 높이도 되돌린다. */
  .ubx .tier-infra .card > a{display:block}
  .ubx .tier-infra .card .cd-ko{margin-bottom:2px}
  .ubx .tier-infra .cards-box .card{min-height:clamp(170px,15vw,200px)}
}

/* 안내 문구("각 구간의 제품을…")를 지우고 그 자리는 비워 둔다(2026-09-30 사용자 지시 —
   아래 내용을 위로 당기지 말 것). 지운 <p> 가 갖던 높이를 머리글이 대신 든다.
   26.4px(16px × 1.65) + .sc-head 의 gap 6px = 32px.
   ⚠ 문구를 다시 넣으면 이 padding 을 같이 지워야 한다. 안 그러면 간격이 두 배가 된다. */
.main-sec.ubx-sec.sec-platform .ubx .sc-head{padding-bottom:32px}

/* ─── 2026-09-30 : 글자 블록(.step-head)만 흰 유리로 ───
   판은 비우고 번호·제목·설명이 앉는 자리만 채운다. 번호와 제목은 한 줄, 설명은 그 아래.
   ⚠ align-content:flex-start 가 필요하다 — 줄바꿈 flex 는 남는 세로 공간을 줄 사이에
      나눠 넣는 게 기본이라, 없으면 번호줄과 설명줄이 벌어진다(같은 함정 두 번째).
   2026-09-30 : 농도 .68 → .92(사용자 지시 — 거의 흰색). 판 패딩을 0 으로 해 테두리에 붙인다.
   대비(뒤 사진 최악) : 제목 12.3:1 · 설명 6.1:1 · 번호 5.3:1 — .92 때보다 낮지만 전부 통과. */
.main-sec.ubx-sec.sec-platform .ubx .step-head{
  display:flex;flex-wrap:wrap;align-items:baseline;align-content:flex-start;
  column-gap:10px;row-gap:clamp(4px,.7vh,6px);
  /* 2026-09-30 : 유리감 보강(사용자 지시). .92 는 사실상 불투명이라 블러가 할 일이 없었다.
     알파를 .72 로 내려 실제로 비치게 하고, 잃은 밝기는 backdrop 의 brightness 를
     1.5 → 1.9 로 올려 되찾는다. saturate 를 높인 건 뒤 색이 유리를 통과한 것처럼 보이게
     하려는 것이다 — 흰색만 섞으면 유리가 아니라 반투명 종이가 된다.
     아래 inset 그림자 두 줄이 '가장자리에 빛이 걸린' 느낌을 만든다. 이게 유리의 3요소 중
     마지막이다(투명 · 블러 · 모서리 하이라이트). */
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(24px) saturate(190%) brightness(1.9);
  -webkit-backdrop-filter:blur(24px) saturate(190%) brightness(1.9);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),
             inset 0 -1px 0 rgba(255,255,255,.35),
             0 6px 18px rgba(0,0,0,.14);
  border-radius:11px 11px 0 0;   /* 바깥 12px - 테두리 1px = 안쪽 반경 11px */
  padding:clamp(12px,1.3vw,16px) clamp(12px,1.3vw,16px) clamp(13px,1.4vw,17px);
}
.main-sec.ubx-sec.sec-platform .ubx .step-head .s-d{flex:0 0 100%}

/* 글자 블록이 판 테두리에 붙어야 하므로 판의 패딩을 0 으로 내리고, 그 여백은 카드 쪽이 갖는다
   (2026-09-30 사용자 지시). 간격 소유자를 둘로 만들지 않기 위해 .cards-box 의 margin-top 도
   같이 0 으로 내린다 — 위아래 간격은 판의 gap 하나가 갖는다(§2.1 과 같은 이유). */
.main-sec.ubx-sec.sec-platform .ubx .step,
.main-sec.ubx-sec.sec-platform .ubx .tier-infra{padding:0}
.main-sec.ubx-sec.sec-platform .ubx .step .cards-box,
.main-sec.ubx-sec.sec-platform .ubx .tier-infra .cards-box{
  margin-top:0;
  padding:0 clamp(12px,1.3vw,16px) clamp(14px,1.6vw,18px);
}

/* ═══════════════════════════════════════════════════════════════════
   2026-09-30 · 사진을 한 겹으로 — 카드는 평면, 판이 하나의 밝은 덩어리
   ───────────────────────────────────────────────────────────────────
   문제였던 것 : 섹션 배경도 사진, 카드도 각자 사진. 두 사진이 서로를 상쇄해
   시선이 붙잡을 덩어리가 없었다("왤케 눈에 안 들어오지", 2026-09-30).
   해법 : 사진은 섹션 배경 하나만 남기고, 판 전체를 흰 유리로 올려 덩어리를 만든다.
   ⚠ 카드 사진을 지우면 카드 글자(#fff)가 사라진다 — 배경과 잉크는 항상 같이 뒤집는다.
   ═══════════════════════════════════════════════════════════════════ */

/* ① 판 전체가 밝은 면이 된다(종전엔 맨 위 흰 띠만 밝았다) */
.main-sec.ubx-sec.sec-platform .ubx .step,
.main-sec.ubx-sec.sec-platform .ubx .tier-infra{
  background:rgba(255,255,255,.80);
  backdrop-filter:blur(24px) saturate(180%) brightness(1.8);
  -webkit-backdrop-filter:blur(24px) saturate(180%) brightness(1.8);
  border-color:rgba(255,255,255,.75);
  box-shadow:0 14px 36px rgba(0,0,0,.26);
}
/* ② 글자 블록은 판의 일부가 되므로 자기 채움을 버린다 — 배치만 남긴다 */
/* 2026-09-30 : 위쪽 글자가 테두리에 바짝 붙어 패딩을 키웠다(사용자 지시). 12~16 → 18~24. */
.main-sec.ubx-sec.sec-platform .ubx .step-head{
  background:none;backdrop-filter:none;-webkit-backdrop-filter:none;
  box-shadow:none;border-radius:0;
  padding:clamp(18px,1.9vw,24px) clamp(14px,1.5vw,18px) clamp(15px,1.6vw,20px);
}
/* ③ 카드에서 사진을 걷고 평면 타일로 */
/* ④ 잉크를 같이 뒤집는다 (③ 없이 이것만 하면 흰 글자가 흰 타일에서 사라진다) */
.main-sec.ubx-sec.sec-platform .ubx .card .txt{color:#4A5361}
/* ⑤ 화살표도 흰색 이미지다. brightness(0) 은 원본 색과 무관하게 알파를 지킨 채 검게 만든다. */
.main-sec.ubx-sec.sec-platform .ubx .cards-box .card:before{filter:brightness(0);opacity:.4}

/* ─── 2026-09-30 : 평면 타일에 제품 테마색을 옅게 얹는다(사용자 지시) ───
   값의 출처는 content.css 의 --cate-a / --cate-ink 블록이다(§5.1 — 색이 사는 4군데 중 하나).
   여기서 hex 를 새로 만들지 않고 그 값을 그대로 옮겨 적는다. 색을 바꿀 땐 그쪽이 먼저다.
   ⚠ 면과 글자를 같은 값으로 쓰지 않는다(§5.2). --cate-a 는 면(채움·테두리)용이고,
      글자에는 대비를 맞춰 어둡게 내린 --cate-ink 를 쓴다. 셰어링 노랑(#F4C009)이
      흰 배경에서 1.55:1 인 게 이 규칙이 생긴 이유다.
   ⚠ 리포트는 §5 에서 '값만 저장하고 소개페이지에 적용하지 않음' 이다. 여기는 소개페이지가
      아니라 메인 카드라 종전값(#E13133)을 그대로 쓴다 — 소개페이지는 안 건드렸다. */
.main-sec.ubx-sec.sec-platform .ubx .card-ubireport              {--tile:#E13133;--tile-ink:#C21D1F}
.main-sec.ubx-sec.sec-platform .ubx .card-ubireport-eform        {--tile:#009040;--tile-ink:#00823A}
.main-sec.ubx-sec.sec-platform .ubx .card-ubidocumaker           {--tile:#61A4F5;--tile-ink:#4270A7}
.main-sec.ubx-sec.sec-platform .ubx .card-ubicontent             {--tile:#6861D1;--tile-ink:#453DB8}
.main-sec.ubx-sec.sec-platform .ubx .card-ubidocu-converter-viewer{--tile:#2F63D3;--tile-ink:#2F63D3}
.main-sec.ubx-sec.sec-platform .ubx .card-ubisharing             {--tile:#F4C009;--tile-ink:#7A5E00}
.main-sec.ubx-sec.sec-platform .ubx .card-infinitystack          {--tile:#2CAA6F;--tile-ink:#217E52}
.main-sec.ubx-sec.sec-platform .ubx .card-barastack              {--tile:#50A8D7;--tile-ink:#387696}

/* 2026-09-30 : 왼쪽 색 띠 삭제(사용자 지시). 제품 식별은 테두리가 대신 진다 — 아래 참조. */

/* ─── 2026-09-30 : 이 섹션의 글씨체를 Noto Sans KR 로 통일(사용자 지시) ───
   종전엔 카드 한 장 안에서 한글명만 Noto, 나머지 3단은 Spoqa 라 섞여 보였다.
   ⚠ 굵기는 그대로 둔다 — font-family 만 바꾼다. 그래서 설명글의 300 을 위해
      webfont.css 의 Noto 요청에 300 을 추가했다(없으면 400 으로 떨어져 굵기가 바뀐다).
   ⚠ 범위는 이 섹션뿐이다. 사이트 본문 기본 폰트는 여전히 Spoqa 다(§4) —
      전역으로 바꾸려면 webfont.css 의 --font-base 를 건드려야 하고, 그건 전 페이지 얘기다. */
.main-sec.ubx-sec.sec-platform .ubx{font-family:var(--font-noto)}

/* 제품명(한글) 1px 작게 — 26 → 25px (2026-09-30 사용자 지시).
   em 으로 쓴다: 1.444em → 1.389em. px 로 박으면 ≤999 에서 기준 폰트가 바뀔 때 어긋난다. */
.main-sec.ubx-sec.sec-platform .ubx .card .cd-ko{font-size:1.389em}

/* ═══════════════════════════════════════════════════════════════════
   2026-09-30 · 밝은 면을 판 → 카드로 옮긴다(사용자 지시)
   숫자 판은 '문서가 데이터가 되는 곳'(.tier-ai)과 같은 재질로 통일하고,
   판이 갖고 있던 흰 유리를 제품 카드가 이어받는다.
   ⚠ 판이 투명해지면 그 위 글자(제목·설명·번호)가 어두운 색이라 사라진다 —
      배경과 잉크는 항상 같이 뒤집는다. 여기서 흰색으로 되돌린다.
   ═══════════════════════════════════════════════════════════════════ */
.main-sec.ubx-sec.sec-platform .ubx .step,
.main-sec.ubx-sec.sec-platform .ubx .tier-infra{
  background:none;
  backdrop-filter:blur(10px) saturate(130%);-webkit-backdrop-filter:blur(10px) saturate(130%);
  border-color:rgba(255,255,255,.5);
  box-shadow:none;
}
.main-sec.ubx-sec.sec-platform .ubx .step-head .s-ko,
.main-sec.ubx-sec.sec-platform .ubx .tier-infra .s-ko{color:#fff}
.main-sec.ubx-sec.sec-platform .ubx .step-head .s-d,
.main-sec.ubx-sec.sec-platform .ubx .tier-infra .s-d{color:rgba(255,255,255,.88)}
/* ⚠ 번호를 브랜드 레드로 두지 않는다. 판이 투명해져 사진 위에 바로 앉는데,
   main-hero.css 상단 주석대로 '사진 위 브랜드 레드는 1.95~3.11:1 로 AA 미달' 이다.
   대비는 색을 밝혀서가 아니라 뒤에 배경을 깔아서 푸는 것이 이 파일의 규칙이라,
   배경이 없어진 지금은 흰색이 맞다. */
.main-sec.ubx-sec.sec-platform .ubx .step-head .s-n,
.main-sec.ubx-sec.sec-platform .ubx .tier-infra .s-n{color:#fff}

/* 제품 카드. 채움·테두리의 최종값은 아래 블록이 갖는다(여기서는 그림자만 남긴다). */
.main-sec.ubx-sec.sec-platform .ubx .cards-box .card{
  box-shadow:0 10px 26px rgba(0,0,0,.20);
}

/* 제품 설명 굵기 300 → 400 (2026-09-30 사용자 지시 — 안 보인다).
   Noto 로 바꾸면서 같은 300 이라도 Spoqa 보다 가늘게 보인 것이다.
   400 은 이미 로드돼 있다(webfont.css 표 참조) — 가짜 볼드 아님. */
/* 제품 설명 — 굵기 300→400(안 보인다), 크기 18→17px(1px 작게). 둘 다 2026-09-30 사용자 지시.
   크기는 em 으로 쓴다(17/18 = .944em). px 로 박으면 ≤999 에서 기준 폰트가 바뀔 때 비율이 어긋난다. */
.main-sec.ubx-sec.sec-platform .ubx .card .txt{font-weight:400;font-size:.944em}

/* ═══════════════════════════════════════════════════════════════════
   2026-09-30 · 제품 카드 — 투명 + 흰 글자 (사용자 지시)
   ⚠ 채움을 '흰색'으로 투명하게 하면 안 된다. 흰 알파는 바탕을 글자색 쪽으로 밝혀
      대비를 깎는다 — 실측: 흰색 .10 은 사진 L=.18 에서 3.37:1(미달),
      같은 정도로 비치는 어두운 .52 는 7.61:1 이다. 그래서 어두운 채움을 쓴다.
   ⚠ 영문명에 브랜드 원색을 쓰지 않는다. 어두운 바탕에서 1.2~4.0:1 로 전부 미달이다
      (§5.2 와 같은 이유, 방향만 반대 — 밝은 배경에선 어둡게, 어두운 배경에선 밝게).
      아래 --tile-lit 은 각 브랜드색의 색상·채도를 유지한 채 흰쪽으로 밝혀 4.6:1 에 맞춘 값이다.
   ═══════════════════════════════════════════════════════════════════ */
.main-sec.ubx-sec.sec-platform .ubx .card-ubireport              {--tile-lit:#F5BBBC}
.main-sec.ubx-sec.sec-platform .ubx .card-ubireport-eform        {--tile-lit:#A1D6B8}
.main-sec.ubx-sec.sec-platform .ubx .card-ubidocumaker           {--tile-lit:#A8CDFA}
.main-sec.ubx-sec.sec-platform .ubx .card-ubicontent             {--tile-lit:#C9C6EE}
.main-sec.ubx-sec.sec-platform .ubx .card-ubidocu-converter-viewer{--tile-lit:#B8CAF0}
.main-sec.ubx-sec.sec-platform .ubx .card-ubisharing             {--tile-lit:#F5C315}
.main-sec.ubx-sec.sec-platform .ubx .card-infinitystack          {--tile-lit:#9AD6BA}
.main-sec.ubx-sec.sec-platform .ubx .card-barastack              {--tile-lit:#A2D1EA}

.main-sec.ubx-sec.sec-platform .ubx .cards-box .card{
  /* 2026-09-30 : 테두리를 단계 판과 같은 값으로 통일(사용자 지시). 종전엔 제품 테마색이었다. */
  border:1px solid rgba(255,255,255,.5);
  box-shadow:0 10px 26px rgba(0,0,0,.24);
}
.main-sec.ubx-sec.sec-platform .ubx .card > a > span{color:#fff}
.main-sec.ubx-sec.sec-platform .ubx .card .cd-s-tit{color:rgba(255,255,255,.86)}
.main-sec.ubx-sec.sec-platform .ubx .card .txt{color:rgba(255,255,255,.86)}
/* 화살표는 원래 흰색 이미지다 — 앞서 걸어둔 brightness(0) 을 푼다. */
/* 2026-09-30 : 화살표 원복. 흰 카드 시절 넣었던 opacity:.6 이 사진 복귀 후에도 남아
   흐리게 보였다(사용자 지적). 원래대로 필터·투명도 없음. */
.main-sec.ubx-sec.sec-platform .ubx .cards-box .card:before{filter:none;opacity:1}

/* ─── 01~05 단계 판 : 검정 유리 (2026-09-30 사용자 지시 — '살짝 글래스, 아래가 비쳐 보이게')
   같은 날 한 번 '완전 검정'(background:#000)으로 갔다가 되돌아온 자리다. 값의 이력 :
       흰색 알파 .10  →  #000 불투명  →  지금 : 검정 알파 .85 + blur
   ⭐ 알파 .85 는 눈대중이 아니라 이 파일이 제목대에서 이미 쓴 것과 같은 상한이다(§3 산술검증).
      사진이 가장 밝을 때(L=1.0)를 가정한 최악 합성 휘도 = .152 → 흰 글자 5.20:1 (AA 4.5 통과).
      2026-09-30 재조정 : 뒤에 계조를 깔고 나서 .85 → .82 로 한 단계 열었다(합성 4.53:1, AA 통과).
      .80 은 4.17:1 로 AA 미달이다 — 여기가 바닥이다.
      ⚠ 더 투명하게 해 달라는 요청이 오면 알파가 아니라 '사진 쪽'을 어둡게 해서 푼다.
   ⭐ backdrop-filter 를 쓰지 않는다. 그냥 알파 합성이다. 이유 :
      1) 조상 .sec-platform 이 isolation:isolate 라 여기가 backdrop root 가 된다. 그러면
         판이 스냅샷하는 '뒤' 에 .sec-platform 자신의 background(=사진과 아래 계조)가
         안 잡힐 수 있고, 빈 스냅샷을 블러하면 결과가 검정이다. 브라우저가 없어 확인이
         안 되는 조건부 동작에 화면을 걸지 않는다(이 파일의 '글래스 포기' 이력도 아마 이것).
      2) 뒤가 이제 매끈한 계조라 블러해도 결과가 거의 같다 — 얻는 게 없다.
      되살리고 싶으면 isolation:isolate 를 z-index:0 으로 바꿔 backdrop root 를 없앤 뒤에 한다
      (z-index 는 쌓임맥락만 만들고 backdrop root 는 안 만든다). ::before 의 z-index:-1 은 그대로 산다.
   ⚠ 01~05 번호는 브랜드 레드다. 검정 위 3.69:1 인데 사진이 비쳐 밝아지면 더 내려간다 —
      숫자가 흐리다는 지적이 나오면 알파가 아니라 그 색이 원인이다(아래 .s-n 규칙). */
.main-sec.ubx-sec.sec-platform .ubx .step,
.main-sec.ubx-sec.sec-platform .ubx .tier-infra{
  background:rgba(6,8,13,.82);
  backdrop-filter:none;-webkit-backdrop-filter:none;
  border-color:rgba(255,255,255,.5);
  box-shadow:none;
}
/* 번호 — 굵기 한 단계 올리고(500→600) 색은 처음의 브랜드 레드로.
   ⚠ 검정 위 #D6000F 는 2.78:1 이다. 26px Bold = 큰 텍스트 기준 3:1 에도 못 미친다.
      사용자 지시로 적용한 값이므로 남겨 두되, 읽기 문제가 나오면 여기가 원인이다. */
.main-sec.ubx-sec.sec-platform .ubx .step-head .s-n,
.main-sec.ubx-sec.sec-platform .ubx .tier-infra .s-n{color:var(--accent);font-weight:700}

/* 영문 제품명 한 단계 작게 — 0.89em(16px) → 0.83em(15px). 색·굵기는 원래대로(흰색 상속 · 400).
   em 으로 쓴다: px 로 박으면 ≤999 에서 기준 폰트가 바뀔 때 다른 3단과 비율이 어긋난다. */
.main-sec.ubx-sec.sec-platform .ubx .card .cd-tit{font-size:.83em}

/* 테두리를 더 흐리게 (2026-09-30 사용자 지시). 단계카드 · 제품카드 둘 다 .5 → .28.
   ⚠ 값을 전역 문자열로 치환하지 않는다 — 같은 rgba 가 히어로 캔버스(.axviz-wrap)에도
      쓰여서, 앞서 한 번 그쪽까지 바뀐 적이 있다. 반드시 이 섹션 선택자 안에서만 바꾼다. */
.main-sec.ubx-sec.sec-platform .ubx .step,
.main-sec.ubx-sec.sec-platform .ubx .tier-infra{border-color:rgba(255,255,255,.28)}
.main-sec.ubx-sec.sec-platform .ubx .cards-box .card{border-color:rgba(255,255,255,.28)}

/* 제품카드는 자기 채움을 갖지 않는다 — 배경은 사진(.card > a:before)이 전부 덮는다.
   ⚠ 여기에 색을 깔면 사진이 못 닿는 1px 가장자리·둥근 모서리로 비쳐서 '흰 테두리' 로 보인다
     (2026-09-30 실제로 그랬다. 테두리 값을 아무리 낮춰도 안 없어지던 원인). */
.main-sec.ubx-sec.sec-platform .ubx .cards-box .card{background:transparent}

/* ─── 2026-09-30 : 01~05 를 '둥근 사각형 하나' 로 (사용자 지시) ───
   칸 사이 간격을 0 으로 붙이고, 바깥 네 모서리만 둥글게 남긴다.
   ⚠ 붙이면 인접한 두 칸의 1px 테두리가 겹쳐 2px 로 보인다 — 겹치는 변을 한쪽에서 지운다.
   ⚠ AI 단(.tier-ai)은 이 사각형에 포함되지 않는다. .stack 의 gap 을 0 으로 내렸으므로
      그 칸만 margin-top 으로 다시 떼어 놓는다(§2.1 — 간격 소유자가 둘이 되지 않게
      .stack gap 은 0 으로 고정하고 이 한 줄만 간격을 진다). */
.main-sec.ubx-sec.sec-platform .ubx .flow{gap:0}
.main-sec.ubx-sec.sec-platform .ubx .stack{gap:0}
.main-sec.ubx-sec.sec-platform .ubx .tier-ai{margin-top:clamp(10px,1.2vw,18px)}

.main-sec.ubx-sec.sec-platform .ubx .step,
.main-sec.ubx-sec.sec-platform .ubx .tier-infra{border-radius:0}
.main-sec.ubx-sec.sec-platform .ubx .flow > .step + .step{border-left:0}
.main-sec.ubx-sec.sec-platform .ubx .tier-infra{border-top:0}
.main-sec.ubx-sec.sec-platform .ubx .flow > .step:first-child{border-top-left-radius:14px}
.main-sec.ubx-sec.sec-platform .ubx .flow > .step:last-child{border-top-right-radius:14px}
.main-sec.ubx-sec.sec-platform .ubx .tier-infra{border-bottom-left-radius:14px;border-bottom-right-radius:14px}

@media all and (max-width:999px){
  /* 좁아지면 .flow 가 2열·1열로 줄바꿈한다. 그러면 :first-child/:last-child 가 가리키는
     자리가 '사각형의 모서리' 가 아니게 되고, border-left:0 이 둘째 줄 첫 칸의 왼쪽 변을
     지워 버린다. 이 구간에서는 칸을 다시 떼어 놓는 편이 안전하다. */
  .main-sec.ubx-sec.sec-platform .ubx .flow{gap:clamp(8px,1vw,14px)}
  .main-sec.ubx-sec.sec-platform .ubx .stack{gap:clamp(8px,1vw,14px)}
  .main-sec.ubx-sec.sec-platform .ubx .tier-ai{margin-top:0}
  .main-sec.ubx-sec.sec-platform .ubx .step,
  .main-sec.ubx-sec.sec-platform .ubx .tier-infra{border-radius:12px;border-top:1px solid rgba(255,255,255,.28)}
  .main-sec.ubx-sec.sec-platform .ubx .flow > .step + .step{border-left:1px solid rgba(255,255,255,.28)}
}

/* 인피니티스택·바라스택 카드 모서리를 단계 안 제품카드와 같은 16px 로(2026-09-30 사용자 지시).
   이 두 장만 main.css 의 기본값 30px 을 그대로 받아 혼자 둥글었다. */
.main-sec.ubx-sec.sec-platform .ubx .tier-infra .cards-box .card{border-radius:16px}

/* 번호(01~05)만 다시 Spoqa 로 (2026-09-30 사용자 지시). 나머지 글자는 Noto 유지.
   ⚠ 굵기 700 은 Spoqa 가 실제로 갖고 있다(§4 표). 600 이었다면 가짜 볼드가 됐을 값이다. */
.main-sec.ubx-sec.sec-platform .ubx .step-head .s-n,
.main-sec.ubx-sec.sec-platform .ubx .tier-infra .s-n{font-family:var(--font-base)}

/* 제품카드 외곽선을 '안쪽' 으로 (2026-09-30 사용자 지시 — 들떠 보인다).
   ⚠ border 는 사진(.card > a:before, inset:0)이 닿지 않는 바깥 1px 에 그려진다.
      그래서 선이 카드에 붙지 않고 떠 보였다. inset box-shadow 는 사진 위에 얹히므로
      같은 1px 이라도 카드 안쪽 가장자리에 그려진다.
   ⚠ border 를 0 으로 내려야 한다 — 남겨 두면 선이 두 줄이 된다. 레이아웃 폭도 1px 줄어든다. */
.main-sec.ubx-sec.sec-platform .ubx .cards-box .card{
  border:0;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28), 0 10px 26px rgba(0,0,0,.24);
}

/* 설명을 영문 제품명에서 반 줄쯤 더 떼어 놓는다(2026-09-30 사용자 지시).
   설명 한 줄 = 17px × line-height 1.5 = 25.5px → 반 줄 ≈ 13px. 기존 12px + 13 = 25px.
   ⚠ 간격 소유자는 영문명의 margin-bottom 하나다. 설명에 margin-top 을 새로 만들지 않는다 —
      인접형제 마진 상쇄로 최종 간격이 max(둘) 이 되면서 어느 쪽을 고쳐야 할지 갈린다(§2.1). */
.main-sec.ubx-sec.sec-platform .ubx .card .cd-tit{margin-bottom:25px}

/* ① 제품카드 외곽선 제거(2026-09-30 사용자 지시). 그림자만 남긴다. */
.main-sec.ubx-sec.sec-platform .ubx .cards-box .card{
  box-shadow:0 10px 26px rgba(0,0,0,.24);
}

/* ② 카드 배경 사진 왼쪽에 보이던 흰 줄 — 배경 상자를 카드보다 조금 키워 가장자리를 밀어낸다.
   카드가 overflow:hidden 이라 넘치는 3px 은 잘린다. transform 으로 키우지 않는 이유는
   그 자리를 호버 확대(scale 1.08)가 이미 쓰고 있어서다. */
.main-sec.ubx-sec.sec-platform .ubx .card > a:before{inset:-3px}

/* ③ 번호를 더 눈에 띄게 — 굵기는 이미 700 으로 Spoqa 의 최대치라 더 올릴 곳이 없다(§4 표).
   그래서 크기와 자간으로 푼다. 26 → 34px, 자간 .07em → -.01em.
   ⚠ 자간이 넓으면 같은 굵기여도 가늘어 보인다. 숫자를 붙여야 덩어리로 읽힌다. */
.main-sec.ubx-sec.sec-platform .ubx .step-head .s-n,
.main-sec.ubx-sec.sec-platform .ubx .tier-infra .s-n{font-size:34px;letter-spacing:-.01em}

/* 설명 글자를 불투명 흰색으로 (2026-09-30 사용자 지시 — 반투명이면 100 으로).
   단계 설명(.s-d)과 제품카드 설명(.txt) 둘 다. 수식어(.cd-s-tit)는 한 단계 아래 위계라 그대로 둔다. */
.main-sec.ubx-sec.sec-platform .ubx .step-head .s-d,
.main-sec.ubx-sec.sec-platform .ubx .tier-infra .s-d,
.main-sec.ubx-sec.sec-platform .ubx .card .txt{color:#fff}

/* 1·2 단계처럼 카드가 두 장 쌓이는 칸 — 카드 사이를 띄우고, 카드 안쪽 아래 여백도 늘린다
   (2026-09-30 사용자 지시). gap 10 → 14~22px · 카드 아래 패딩 44 → 56px.
   ⚠ 아래 패딩은 화살표(.card:before, bottom:15px · height:11px)를 피해야 한다 — 26px 이 하한이다.
      56px 이면 설명 마지막 줄과 화살표 사이에 30px 이 남는다. */
.main-sec.ubx-sec.sec-platform .ubx .step .cards-box{gap:clamp(14px,1.6vw,22px)}
.main-sec.ubx-sec.sec-platform .ubx .step .card > a{padding-bottom:56px}

/* 마지막 카드와 판 아래 테두리 사이를 넓힌다(2026-09-30 사용자 지시 — 아래 패딩이 안 생겼다).
   ⚠ 이건 .card 의 padding 이 아니라 .cards-box 의 padding-bottom 이다.
      카드 '안쪽' 여백(.card > a 의 56px)과는 다른 값이라 하나를 고쳐도 다른 쪽은 안 움직인다.
   14~18 → 20~32px. 카드 사이 간격(14~22px)보다 조금 크게 잡아 바닥이 답답하지 않게 한다. */
.main-sec.ubx-sec.sec-platform .ubx .step .cards-box,
.main-sec.ubx-sec.sec-platform .ubx .tier-infra .cards-box{
  padding-bottom:clamp(20px,2.4vw,32px);
}

/* AI 단 — 유리 상자를 걷고 글자만 남긴다(2026-09-30 사용자 지시).
   1~5 단계가 하나의 사각형이고, 그 아래 질문 한 줄 + 버튼이 상자 없이 놓이는 구성이다.
   ⚠ 좌우 padding 을 0 으로 내린다. 상자가 없으면 그 여백이 '왼쪽으로 밀린 글자' 로만 보인다 —
      §2 대로 좌우 기준선은 --content 하나여야 하고, 위 사각형의 왼쪽 변과 같은 선에 서야 한다. */
.main-sec.ubx-sec.sec-platform .ubx .tier-ai{
  background:none;
  border:0;border-radius:0;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  box-shadow:none;
  padding:clamp(4px,.6vw,8px) 0 0;
}

/* AI 단 — 질문과 버튼을 세로로 쌓고 가운데 정렬, 버튼은 고스트(채움 없음)
   (2026-09-30 사용자 지시). 생애주기 사각형에서 한 줄 더 띄운다.
   ⚠ .ubx .tier-ai 기본값이 display:flex + align-items:center(가로 배치)다. 방향만 바꾸면
      align-items 가 '가로 가운데' 가 아니라 '세로축 가운데' 로 뜻이 바뀌므로 text-align 도 같이 준다. */
.main-sec.ubx-sec.sec-platform .ubx .tier-ai{
  flex-direction:column;align-items:center;text-align:center;
  gap:clamp(12px,1.4vw,18px);
  margin-top:clamp(30px,3.2vw,48px);
  padding:0;
}
.main-sec.ubx-sec.sec-platform .ubx .tier-ai .prods{flex-direction:row;justify-content:center;margin:0}
/* 고스트 버튼 — 채움 없이 테두리만. 사이트 표준(layout.css .cta-btn-secondary)과 같은 계열이되
   배경이 검정이라 유리(반투명 흰색) 대신 완전한 투명을 쓴다. */
.main-sec.ubx-sec.sec-platform .ubx .tier-ai a.prod{
  background:none;border:1px solid rgba(255,255,255,.45);color:#fff;
  box-shadow:none;padding:12px 26px;border-radius:999px;font-size:15px;
}
@media (hover:hover){
  .main-sec.ubx-sec.sec-platform .ubx .tier-ai a.prod:hover{
    background:rgba(255,255,255,.1);border-color:#fff;color:#fff;box-shadow:none}
}

/* AI 버튼을 사이트 표준 버튼 규격으로 (2026-09-30 사용자 지시 — 기존 문법대로).
   레시피 정본은 layout.css .cta-btn : [999px pill + 1px 테두리], min-width 220 · height 60 ·
   padding 0 36 · font 17/500 · gap .45em. 채움만 비운 고스트다(직전 지시).
   화살표는 .ubx a.prod::after 가 이미 "→" 를 넣고 있어 따로 마크업이 필요 없다. */
.main-sec.ubx-sec.sec-platform .ubx .tier-ai a.prod{
  min-width:220px;height:60px;padding:0 36px;gap:.45em;
  border-radius:999px;font-size:17px;font-weight:500;letter-spacing:-.02em;
  justify-content:center;
}

/* AI 버튼에 유리를 되살린다(2026-09-30 사용자 지시). 고스트(채움 0)로 했더니 허전했다.
   레시피는 layout.css .cta-btn-secondary 와 같은 계열 — 흰색 알파 + 블러 + 1px 테두리.
   ⚠ 이 자리 바탕은 사진이 아니라 검정이라 .22 를 그대로 쓴다. 배너(사진 위)와 같은 값이고,
      CTA 밴드처럼 바탕이 중간톤인 곳에서만 .13 으로 낮춘다(§5.4). */
.main-sec.ubx-sec.sec-platform .ubx .tier-ai a.prod{
  background:rgba(255,255,255,.22);
  backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.45);
}
@media (hover:hover){
  .main-sec.ubx-sec.sec-platform .ubx .tier-ai a.prod:hover{
    background:rgba(255,255,255,.34);border-color:#fff}
}

/* ════════════════════════════════════════════════════════════════════════════
   2026-09-30 · 플랫폼 섹션 추가 손질 + 3 번 섹션(근거) 재구성   ─ 사용자 지시 6건
   ════════════════════════════════════════════════════════════════════════════ */

/* ─── ① 생애주기 사각형을 도는 붉은 광선 ──────────────────────────────────────
   컨버터 소개페이지(product/UbiDocu_Converter_Viewer.html)의 흐름도 광선과 같은 방식이다 —
   머리는 희게 타고 꼬리가 감쇠하는 혜성 하나가 선 위를 달린다. 색만 파랑 → 브랜드 레드.
   그리는 것은 _Js/main-hero.js 의 '플랫폼 테두리 광선' 블록. 여기서는 자리만 만든다.
   ⚠ 캔버스는 .stack 안에 JS 가 넣는다. 그래서 .stack 에 position 이 필요하다.
   ⚠ pointer-events:none 이어야 한다 — 광선이 카드 링크 위를 지나므로, 없으면 그 순간
      마우스가 캔버스에 막혀 카드가 안 눌린다.
   ⚠ z-index 는 판(.step/.tier-infra)보다 위, 카드보다 아래가 아니라 '맨 위' 다.
      선이 판 테두리 위를 달려야 하는데 판이 불투명 유리라 아래에 두면 가려진다. */
.main-sec.ubx-sec.sec-platform .ubx .stack{position:relative}
.main-sec.ubx-sec.sec-platform .ubx .plat-beam{
  position:absolute;left:0;top:0;width:100%;height:100%;
  pointer-events:none;z-index:5;
}
/* ≤999px 은 칸이 다시 떨어져 '사각형 하나' 가 아니다(위 @media 참고). 한 줄짜리 테두리를
   돌 대상이 없으므로 아예 끈다 — JS 도 같은 폭에서 멈춘다. 둘 중 하나만 고치지 말 것. */
@media all and (max-width:999px){
  .main-sec.ubx-sec.sec-platform .ubx .plat-beam{display:none}
}
/* 2026-10-15 : reduced-motion 에서 끄던 규칙 삭제 — 테두리 광선은 이 설정을 따르지 않는다(사용자 지시, main-hero.js 와 짝) */

/* ─── ② 제품카드 호버 — 피드백 강화(2026-09-30 사용자 지시 "너무 약하다") ────────
   종전엔 사진 확대(1.08)와 화살표 10px 이동뿐이라, 사진이 이미 움직이는 카드에서
   '눌리는 것' 이 안 읽혔다. 네 가지를 겹친다 : 들어올림 · 그림자 · 테두리 · 제품색 글로우.
   ⚠ .card 에 transform 을 걸어도 된다 — 사진 확대는 `.card > a:before` 가 갖고 있어
      자리가 겹치지 않는다(§ 위 '②' 주석과 같은 이유, 방향만 반대).
   ⚠ .main-sec2 쪽 카드는 등장 애니메이션이 .card 의 transform 을 쓰므로 여기에 끼지
      않는다 — 이 규칙은 .sec-platform 스코프다. 넓히지 말 것.
   ⚠ 글로우 색은 --tile(브랜드 원색)이다. 이미 카드마다 정의돼 있다(위 --tile 표). */
.main-sec.ubx-sec.sec-platform .ubx .cards-box .card{
  transition:transform .34s cubic-bezier(.2,.7,.3,1),
             box-shadow .34s cubic-bezier(.2,.7,.3,1),
             border-color .34s ease;
  will-change:transform;
}
/* 2026-09-30 : 호버 때 테두리를 밝히지 않는다(사용자 지시). 들어올림 · 그림자 · 제품색
   글로우 세 가지로만 반응한다. ⚠ 흰 테두리(border-color)와 1px 링(box-shadow 0 0 0 1px)이
   둘 다 '테두리' 로 보인다 — 한쪽만 지우면 그대로 선이 남는다. */
@media (hover:hover){
  .main-sec.ubx-sec.sec-platform .ubx .cards-box .card:hover{
    transform:translateY(-10px);
    box-shadow:0 26px 52px rgba(0,0,0,.44),
               0 12px 40px color-mix(in srgb, var(--tile, #fff) 42%, transparent);
  }
  /* 사진 확대를 한 단계 더 (1.08 → 1.13) */
  .main-sec.ubx-sec.sec-platform .ubx .cards-box .card > a:hover:before{transform:scale(1.13)}
  /* 화살표 이동. ⚠ 16px + scale(1.12) 로 키웠더니 카드 밖으로 나갔다(2026-09-30 사용자 지적).
     단계 카드의 화살표는 right:18px 이라 16px 을 밀면 남는 여백이 2px 뿐이고, 거기에 확대까지
     겹치면 카드 경계를 넘어 overflow:hidden 에 잘린다. 여백(18px)의 절반 이내로 둔다. */
  .main-sec.ubx-sec.sec-platform .ubx .cards-box .card:hover:before{transform:translateX(8px)}
  /* 눌렀을 때는 들어올림을 절반만 — 클릭이 '닿았다' 는 느낌 */
  .main-sec.ubx-sec.sec-platform .ubx .cards-box .card:active{
    transform:translateY(-4px);transition-duration:.08s}
}
/* 키보드 이동에도 같은 피드백을 준다(호버만 있으면 탭 이동 때 아무 일도 안 난다) */
.main-sec.ubx-sec.sec-platform .ubx .cards-box .card:focus-within{
  transform:translateY(-10px);
  box-shadow:0 26px 52px rgba(0,0,0,.44),
             0 12px 40px color-mix(in srgb, var(--tile, #fff) 42%, transparent);
}

/* ─── ③ 유비도큐 컨버터 카드 — 흰 글자가 안 읽히던 것 ────────────────────────
   ⭐ 왜 여러 번 고쳐도 안 됐나 — 측정해서 원인을 확인했다(2026-09-30).
      · 카드 실측 338×261, 그림 284×350. 그림에서 보라 오브젝트는 가로 17~100% ·
        세로 0~70% 를 덮는다. 카드 글자는 가로 6.5~93.5% 를 쓴다.
      · 종전값(130% / 12% 72%)은 그림을 카드폭의 3.6% 옮긴 게 전부였다 — 눈에 안 보일 만하다.
      · 그 상태의 흰 글자 대비는 최악 픽셀 기준 1.33:1 이었다(AA 4.5:1 기준 한참 미달).
      · 평균 휘도는 0.073 으로 오히려 어두운 편인데, 오브젝트의 하이라이트(최대 0.738)가
        글자 자리를 가로지르는 게 원인이다. 그래서 '어두운 사진인데 글씨가 안 보이는' 상태였다.
   ⭐ 그래서 옮기는 것만으로는 못 고친다 — 오브젝트가 그림의 거의 전부다. 두 가지를 같이 한다.
      ㉠ 크게 확대해 그림의 왼쪽·아래 어두운 부분이 카드 왼쪽을 채우게 하고, 오브젝트를
         오른쪽으로 밀어낸다 : 240% / 0% 70%. 카드 왼쪽 40% 가 완전히 비워진다.
      ㉡ 오브젝트가 실제로 있는 오른쪽만 검정 스크림으로 누른다 : 18% 부터 40% 까지 램프,
         그 뒤 α .78 고정. 왼쪽 18% 는 완전 투명이라 스크림이 그림을 건드리지 않는다.
      측정 결과 : 글자 구간 최악 픽셀 1.33:1 → 4.95:1 (AA 통과). 그림은 25% 가 남는다.
   ⚠ 값이 작을수록 오브젝트가 오른쪽·아래로 간다. position 0% 70% = 그림의 왼쪽을 보여 주는
      것이고, 그러면 오브젝트가 오른쪽으로 밀린다. 부호를 반대로 적지 말 것.
   ⚠ 확대율을 낮추면(180~200%) 대비가 2.7~3.5:1 로 다시 미달이다 — 확인했다. 240% 가 하한이다.
   ⚠ transform 으로 키우지 않는다 — 그 자리는 호버 확대(scale 1.13)가 쓰고 있다.
   ⚠ 나머지 카드 7 장도 같은 기준으로는 전부 미달이다(1.65~3.36:1). 사용자가 지적한 건
      이 카드뿐이라 여기만 고쳤다 — 전체에 적용하려면 카드 겉모습이 다 바뀌므로 별도 결정이다. */
.main-sec.ubx-sec.sec-platform .ubx .card-ubidocu-converter-viewer > a:before{
  /* 2026-09-30 재조정 : 240% 확대 철회(사용자 지적 "너무 깨져"). 원본이 284×350 뿐이라
     240% = 811px 는 2.9 배 확대였다. cover(338px = 1.19 배)가 이 카드에서 가능한 최소 확대다.
     ⚠ 가로로 밀려면 카드폭보다 큰 그림이 필요하다 = 확대가 전제다. '오른쪽으로 밀기' 와
        '안 깨지기' 는 같이 못 간다 — 근본 해결은 왼쪽이 비어 있는 카드 이미지로 교체하는 것이다.
     ⚠ 측정상 확대 없이 세로만 위로 올리는 편이 대비도 낫다 : 50% 0% → 최악 1.84:1 ·
        평균기준 12.3:1. 130~155% 확대안은 1.46~1.51:1 로 더 나빴다.
     ⚠ background-size 를 다시 쓰지 않는다 — main.css 의 cover 를 그대로 받는다. */
  background-position:50% 0%;
}
/* 스크림. ::before 는 사진이고 글자 span 은 z-index:1 이라, 그 사이에 들어갈 층은
   `> a::after` 하나뿐이다(같은 z-index 0 이지만 ::before 보다 뒤라 위에 그려진다).
   ⚠ .card::before 는 화살표(z-index:2)다. 여기에 쓰지 말 것. */
.main-sec.ubx-sec.sec-platform .ubx .card-ubidocu-converter-viewer > a::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  /* 2026-09-30 : "너무 튄다" — 두 가지가 문제였다.
     · 세기 : α .78 로 오른쪽 절반이 통째로 검게 눌렸다.
     · 이음매 : 18%→40% 램프 뒤 고정이라 40% 지점에 세로 경계선이 보였다.
     그래서 세기를 약 절반으로 낮추고, 0% 부터 100% 까지 끊기지 않게 이어지는 램프로 바꿨다.
     2026-09-30 재조정 : 한 번 더 낮췄다(.08~.42 → .05~.28, 사용자 지시 "더 살짝").
     ⚠ 대가 : 글자 구간 최악 픽셀 대비는 1.84:1 이다(평균 기준 12.3:1). 하이라이트가
        지나가는 자리의 글자는 약하다. 이건 스크림이 아니라 그림을 바꿔야 풀린다 —
        왼쪽이 비어 있는 카드 이미지로 교체하는 게 근본 해결이다. */
  background:linear-gradient(90deg,
    rgba(0,0,0,0) 0%, rgba(0,0,0,.05) 30%,
    rgba(0,0,0,.22) 70%, rgba(0,0,0,.28) 100%);
}

/* ─── ④ 05 운영 : 서브타이틀을 '운영' 오른쪽에 붙인다(≥1000px, 사용자 지시) ────
   01~04 는 .s-d{flex:0 0 100%} 로 줄을 내리는 게 기본이다. 이 칸만 되돌린다.
   ⚠ .step-head 는 flex-wrap:wrap 이라 폭이 모자라면 알아서 줄이 내려간다 —
      새 브레이크포인트를 만들지 않는다(§1.2). min-width:0 은 긴 문장이 줄바꿈 없이
      칸을 밀어내지 않게 하는 안전장치다. */
@media all and (min-width:1000px){
  .main-sec.ubx-sec.sec-platform .ubx .tier-infra .step-head .s-d{
    flex:1 1 auto;min-width:0;
  }
}
/* ─── ⑤ 운영과 그 아래 두 카드 사이 여백 축소(사용자 지시) ─────────────────────
   간격의 소유자는 .step-head 의 아래 padding 하나다(.cards-box 의 margin-top 은 0 이다).
   01~04 는 15~20px 그대로 두고 05 만 줄인다. */
.main-sec.ubx-sec.sec-platform .ubx .tier-infra .step-head{
  padding-bottom:clamp(6px,.7vw,9px);
}

/* ─── ⑥ 3 번 섹션(근거) — 인용 카드 · 수치 카드 · 출처 ────────────────────────
   2026-09-30 사용자 지시로 구조를 바꿨다. 종전 .pull(왼쪽 세로선 인용구)은 이 섹션에서
   쓰지 않는다 — 규칙 자체는 위에 남겨 뒀다(다른 곳에서 쓸 수 있다).
   섹션 바탕이 #F4F5F7 이라 카드는 흰 면 + 옅은 그림자로 띄운다. */
.main-sec.ubx-sec.sec-whynow .ubx .quote-card{
  margin:clamp(24px,3.4vw,44px) 0 0;
  padding:clamp(28px,3.4vw,44px) clamp(20px,3vw,40px) clamp(24px,3vw,36px);
  background:var(--surface);border:0;border-radius:14px;
  display:flex;flex-direction:column;align-items:center;gap:clamp(14px,1.8vw,22px);
  text-align:center;
}
/* 큰따옴표는 글에 넣지 않고 여기서 붙인다 — 문구를 고칠 때 따옴표를 빠뜨리지 않게. */
.main-sec.ubx-sec.sec-whynow .ubx .qc-t{
  font-size:clamp(17px,1.9vw,24px);line-height:1.6;font-weight:500;
  letter-spacing:-.025em;color:var(--ink);word-break:keep-all;margin:0;
}
.main-sec.ubx-sec.sec-whynow .ubx .qc-t::before{content:"\201C"}
.main-sec.ubx-sec.sec-whynow .ubx .qc-t::after{content:"\201D"}
/* 출처 이름. 로고 이미지는 없다 — 워드마크 색(네이비)만 빌려 글자로 쓴다.
   ⚠ 굵기 700 이다. Spoqa 에 600 이 없다(§4) — 600 을 쓰면 가짜 볼드가 된다. */
.main-sec.ubx-sec.sec-whynow .ubx .qc-by{
  font-size:clamp(15px,1.5vw,18px);font-weight:700;letter-spacing:-.01em;
  color:#123A6B;line-height:1;
}
/* 수치 두 칸 — 종전의 '붙은 띠' 를 떼어 카드 두 장으로.
   §1.2 : 열 수를 BP 로 재선언하지 않는다. auto-fit 하나로 2 → 1 열이 연속으로 준다. */
.main-sec.ubx-sec.sec-whynow .ubx .stats.stats-card{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(12px,1.6vw,20px);
  background:none;border:0;border-radius:0;overflow:visible;
  margin-top:clamp(12px,1.6vw,20px);
}
.main-sec.ubx-sec.sec-whynow .ubx .stats.stats-card li{
  flex:none;background:var(--surface);border:0;border-radius:14px;
  padding:clamp(24px,2.8vw,36px) clamp(18px,2.2vw,28px);
  display:flex;flex-direction:column;align-items:center;gap:clamp(10px,1.2vw,16px);
  text-align:center;
}
.main-sec.ubx-sec.sec-whynow .ubx .stats.stats-card .n{
  font-size:clamp(38px,4.6vw,56px);font-weight:700;letter-spacing:-.05em;
  color:var(--accent);line-height:1;
}
.main-sec.ubx-sec.sec-whynow .ubx .stats.stats-card .d{
  margin-top:0;font-size:clamp(14px,1.3vw,16px);line-height:1.65;
  color:var(--ink-2);word-break:keep-all;
}
.main-sec.ubx-sec.sec-whynow .ubx .src{margin-top:clamp(14px,1.8vw,22px)}

/* ─── ⑦ 3 번 섹션 바탕을 한 단계 어둡게(2026-09-30 사용자 지시 "배경이 너무 확 밝아진다") ──
   바로 위 플랫폼 섹션이 어두운 사진판이라 #F4F5F7 로 넘어오는 순간 단차가 컸다.
   ⚠ 카드에서 테두리·그림자를 걷었으므로(⑥) 카드와 바탕의 밝기 차 하나가 칸 경계를 진다.
      측정 : #F4F5F7(휘도 .913) → #D5DBE4(.704). 흰 카드와 1.39:1 로 테두리 없이도 구분된다.
      같이 확인한 글자 대비 — 제목 12.9:1 · 본문 7.3:1 (둘 다 AA 여유).
   ⚠ .sec-infra 는 같이 내리지 않는다. 위의 `.sec-whynow, .sec-infra` 규칙을 고치지 말고
      여기서 .sec-whynow 만 덮는다(그 섹션은 지금 비어 있지만 규칙은 살아 있다). */
.main-sec.ubx-sec.sec-whynow{background:#D5DBE4}

/* ─── ⑧ 4 번 섹션(왜 유비디시전인가) — 사분면 + 글자 확대 ──────────────────────
   2026-09-30 사용자 지시. 종전엔 4 칸이 한 줄(flex 1 1 270px)이라 글이 좁은 기둥 넷이었다.
   ⚠ 여기만은 auto-fit 을 쓰지 않는다(§1.2 의 예외). '사분면' 은 2×2 로 고정돼야 뜻이 서는데,
      auto-fit + minmax 는 --content(최대 1480)에서 열 수가 최소폭에 따라 2 나 3 으로 갈린다 —
      3 열이 되는 순간 사분면이 아니다. 그래서 표준 BP(§1.1 의 1000/999) 한 쌍으로 2 → 1 을 정한다.
   ⚠ gap:1px + 부모 배경(var(--line))이 칸 사이 '십자선' 을 만든다. gap 을 키우면 사분면이
      아니라 카드 네 장이 된다 — 선을 남기려면 1px 을 유지할 것. */
.ubx .why{
  display:grid;grid-template-columns:1fr;
  border-radius:12px;
}
@media all and (min-width:1000px){
  .ubx .why{grid-template-columns:repeat(2,1fr)}
}
.ubx .why li{
  flex:none;
  padding:clamp(24px,3vw,40px) clamp(22px,2.6vw,34px) clamp(26px,3.2vw,42px);
}
/* 글자 확대 — 번호 12.5 → 15px, 제목 20 → 최대 28px, 본문 16 → 최대 19px */
.main-sec.ubx-sec.sec-whyus .ubx .w-n{font-size:15px;letter-spacing:.09em}
.main-sec.ubx-sec.sec-whyus .ubx .why h3{
  font-size:clamp(21px,2.2vw,28px);line-height:1.3;margin:14px 0 12px;word-break:keep-all;
}
.main-sec.ubx-sec.sec-whyus .ubx .why p{
  font-size:clamp(16px,1.45vw,19px);line-height:1.72;word-break:keep-all;
}
/* 출처 한 줄은 카드 밖, 즉 어두워진 바탕 위에 바로 앉는다. 종전 --ink-3(#697180)은
   #D5DBE4 위에서 3.5:1 로 AA 미달이다(13px 일반 텍스트 기준 4.5:1). 한 단계 내린다 — 5.5:1. */
.main-sec.ubx-sec.sec-whynow .ubx .src{color:#4A5361}

/* ─── ⑨ 컨버터 카드 높이를 옆 카드와 맞춘다(2026-09-30 사용자 지시) ──────────────
   이 카드만 설명이 한 줄 더 길어서 min-height 를 넘겨 혼자 높았다.
   사용자가 "화살표 div 와 글씨가 겹쳐도 된다" 고 해서, 화살표 자리로 비워 뒀던 아래 여백을
   되돌려 준다 — 56px → 26px. 그만큼 글이 내려올 수 있어 카드가 min-height 안에 들어온다.
   측정(1920px, 카드 338×min260) : 종전 261px → 231px. 옆 UbiSharing 카드는 235px 라
   둘 다 min-height 260px 에 걸려 같은 높이가 된다.
   ⚠ 고정 height 로 박지 않는다 — 좁은 폭(≈1000px)에서 설명이 6 줄이 되면 307px 이 필요해
      300px 상한에 잘린다. min-height 를 유지해야 넘칠 때 카드가 늘어난다.
   ⚠ 2026-10-15 : 26 → 34px. '겹쳐도 된다' 를 철회했다(사용자 지시 — 여백은 줄이되 겹치지는 않게).
      화살표 윗변 = bottom 15 + 높이 11 = 26px, 여기에 8px 띄워 34px 이 하한이다.
      이 카드가 옆 카드보다 커지지 않는 건 이제 min-height 가 아니라 아래 ⑪ 의 행 맞춤이 보장한다 —
      글이 길면 화살표와의 여백(56 → 34)을 먼저 내주고, 그래도 넘치면 같은 줄 카드가 '함께' 커진다. */
.main-sec.ubx-sec.sec-platform .ubx .card-ubidocu-converter-viewer > a{
  padding-bottom:34px;
}

/* ─── ⑩ 3 번 섹션 타이포 · 정렬 (2026-09-30 사용자 지시) ──────────────────────
   큰 제목 : 공용 h2.h 는 clamp(26px,3.2vw,40px). 한 번 54px 까지 올렸다가 "너무 크다" 는
   지적으로 46px 로 내렸다. 757px 에서 28px, 1243px 이상에서 46px.
   §1.2 대로 BP 가 아니라 clamp 기울기로 만든다.
   ⚠ 가운데 정렬이므로 text-wrap:balance(공용 h2.h 가 갖고 있다)가 더 중요해진다 —
      지우면 마지막 줄만 짧게 남는다. */
.main-sec.ubx-sec.sec-whynow .ubx h2.h{
  font-size:clamp(28px,3.7vw,46px);line-height:1.28;text-align:center;
}
/* 인용문 확대 — 24 → 28px */
.main-sec.ubx-sec.sec-whynow .ubx .qc-t{font-size:clamp(19px,2.2vw,28px)}
/* 수치 자간을 넓힌다. -.05em 은 큰 숫자를 덩어리로 붙이려던 값인데, 카드 안에서 혼자 쓰이니
   답답해 보였다(사용자 지시) → 0. ⚠ 숫자 폭은 위쪽 .ubx .stats .n 의 tabular-nums 가 잡는다. */
.main-sec.ubx-sec.sec-whynow .ubx .stats.stats-card .n{letter-spacing:0}
/* 수치 아래 설명 확대 — 16 → 19px */
.main-sec.ubx-sec.sec-whynow .ubx .stats.stats-card .d{font-size:clamp(16px,1.55vw,19px)}
/* 출처 가운데 정렬 */
.main-sec.ubx-sec.sec-whynow .ubx .src{text-align:center}

/* ════════════════════════════════════════════════════════════════════════════
   ⑪ 2026-10-15 · 생애주기 01~04 — 열 수 · 행 맞춤 · 수식어 크기 (사용자 지시 4건)
   ════════════════════════════════════════════════════════════════════════════ */

/* ① 열 수 : PC 4열 · ≤999 2×2 · ≤520 1열. 3열은 없다.
   종전엔 .flow 가 auto-fit minmax(180px) 이라 약 580~760px 에서 3열이 되어 '04 협업' 만
   다음 줄에 혼자 떨어졌다(사용자 지적 — 네 단계가 한 덩어리로 안 보인다).
   2026-10-15 : 4열을 999 아래까지 끌고 가는 안은 기각 — 760px 에서 카드 안쪽 폭이 120px 대라
   글이 안 들어간다. 2×2 는 520px 에서도 안쪽 폭 약 180px(PC 1000px 수준)이다.
   ⚠ 쓰는 BP 는 전역 표준 999 · 520 뿐이다(§1.1). 360 같은 값을 만들지 않는다. */
.main-sec.ubx-sec.sec-platform .ubx .flow{grid-template-columns:repeat(4,minmax(0,1fr))}
@media all and (max-width:999px){
  .main-sec.ubx-sec.sec-platform .ubx .flow{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media all and (max-width:520px){
  .main-sec.ubx-sec.sec-platform .ubx .flow{grid-template-columns:minmax(0,1fr)}
}

/* ② 같은 줄의 단계끼리 '같은 층' 의 높이를 맞춘다 — subgrid.
   종전엔 단계마다 따로 세로로 쌓여서, 한 칸의 설명(.s-d)만 두 줄이 되면 그 칸의 카드만
   아래로 밀려 카드 시작선이 들쭉날쭉했다(사용자 지적). 같은 일이 카드끼리도 있었다 —
   컨버터 카드만 글이 길어 혼자 키가 컸다.
   단계 하나 = .flow 의 행 4개를 빌려 쓴다 : [머리글] [첫 카드] [둘째 카드] [아래 여백]
   행을 부모와 공유하므로 같은 줄 네 칸의 머리글 · 첫 카드 · 둘째 카드가 각각 같은 높이가 된다.
   (03·04 는 카드가 하나라 셋째 행이 비어 있다 — 01·02 의 둘째 카드 자리만큼 판만 이어진다.
    이건 종전과 같은 모양이다.)
   ⚠ 이걸 위해 .cards-box 를 display:contents 로 푼다. 그래서 그 상자가 갖던
      좌우 padding · 카드 사이 gap · 아래 padding 이 사라진다 — 값은 그대로 카드 margin 과
      ::after 여백 행으로 옮겼다. .cards-box 쪽 padding/gap 을 고쳐도 이제 화면이 안 바뀐다.
   ⚠ 아래 여백을 '마지막 카드의 margin-bottom' 으로 주지 않는다. 03 은 첫 카드가 곧 마지막
      카드라, 그 margin 이 둘째 행이 아니라 첫 카드 행을 키워서 01 의 첫 카드가 그만큼 늘어난다.
      여백은 넷째 행(::after) 한 곳만 갖는다.
   ⚠ row-gap:0 은 지우지 말 것. 없으면 ≤999 에서 부모의 칸 간격(.flow gap)이 단계 '안' 의
      층 사이에도 끼어든다. */
.main-sec.ubx-sec.sec-platform .ubx .step{
  display:grid;grid-template-columns:minmax(0,1fr);row-gap:0;
}
.main-sec.ubx-sec.sec-platform .ubx .step .cards-box{display:contents}
.main-sec.ubx-sec.sec-platform .ubx .step .cards-box .card{
  margin:clamp(8px,1vw,12px) clamp(12px,1.3vw,16px) 0;   /* 위 = 종전 .step 의 gap · 좌우 = 종전 .cards-box 의 padding */
}
.main-sec.ubx-sec.sec-platform .ubx .step .cards-box .card + .card{
  margin-top:clamp(14px,1.6vw,22px);                      /* 종전 .cards-box 의 gap */
}
.main-sec.ubx-sec.sec-platform .ubx .step::after{
  content:"";grid-row:4;height:clamp(20px,2.4vw,32px);    /* 종전 .cards-box 의 padding-bottom */
}
/* subgrid 를 모르는 브라우저는 위 규칙만으로 종전처럼 단계마다 따로 쌓인다(맞춤만 빠진다). */
@supports (grid-template-rows:subgrid){
  .main-sec.ubx-sec.sec-platform .ubx .step{grid-row:span 4;grid-template-rows:subgrid}
}

/* ③ 수식어(.cd-s-tit)도 좁아지면 줄인다.
   종전 : ≥1300 17.1px → 1000~1300 15.7px → ≤999 18px. 다른 3단은 ≤999 에서 기준 폰트가
   18 → 14px 로 내려가 같이 줄어드는데, 수식어만 main.css ≤999 의 1.286em(모바일 복원값)을 받아
   오히려 커졌다. 이 섹션 안에서만 연속 곡선 하나로 바꾼다(§1.2).
   clamp(13.5px, 11.17px + .449vw, 17px) → 520px 13.5 · 760px 14.6 · 999px 15.7 · 1300px 이상 17.
   1000~1300 은 종전 값(15.7px)에서 이어지므로 데스크톱 모양은 거의 그대로다.
   설명(13.2px)·영문명(11.6px)보다는 덜 줄인다(사용자 지시 — 그만큼 작아질 필요는 없다). */
.main-sec.ubx-sec.sec-platform .ubx .card .cd-s-tit{font-size:clamp(13.5px,calc(11.17px + .449vw),17px)}

/* ④ 설명 아래 여백의 소유자는 <a> 의 padding-bottom 하나다(일반 56px · 컨버터 34px).
   main.css ≤999 의 .txt{margin-bottom:30px} 가 여기에 더해져 모바일에서만 86 / 56px 이 됐다 —
   컨버터는 그만큼 '못 줄이는' 여백이었다. 이 섹션에서는 0 으로 둔다(§2.1 과 같은 이유). */
.main-sec.ubx-sec.sec-platform .ubx .card .txt{margin-bottom:0}

/* ════════════════════════════════════════════════════════════════════════════
   ⑫ 2026-10-15 · ≤999 도 PC 처럼 '둥근 사각형 하나' + 광선 (사용자 지시)
   ────────────────────────────────────────────────────────────────────────────
   520~999 : 01 02 / 03 04 (2×2) + 05 운영이 아래에 붙는다.
   ≤520    : 01 → 05 한 칸씩 세로.
   어느 쪽이든 칸 사이 간격 없이 붙이고 실선 한 줄로만 나눈다. 둥근 모서리는 바깥 넷뿐이다.
   종전 ≤999 는 칸을 떼어 놓았다(위쪽 '좁아지면 .flow 가 2열·1열로…' @media 블록) —
   그 블록은 지우지 않고 같은 특정도 + 뒤 순서로 덮는다. 되돌리려면 이 블록만 지운다.
   ⚠ 05 운영까지 붙여야 한다. 광선(_Js/main-hero.js)은 .flow 와 .tier-infra 를 합친 사각형의
      둘레를 돈다 — 둘이 떨어져 있으면 광선이 그 틈을 가로질러 그려진다.
   ⚠ 붙은 변은 한쪽만 그린다(둘 다 그리면 2px). 아래 nth-child 들이 그 일을 한다 —
      열 수를 바꾸면 이 셀렉터도 같이 바꿔야 한다.
   ⚠ 모서리 반경 14px 은 main-hero.js 의 RADIUS 와 같아야 광선이 모서리를 따라 돈다.
   ════════════════════════════════════════════════════════════════════════════ */
@media all and (max-width:999px){
  .main-sec.ubx-sec.sec-platform .ubx .flow,
  .main-sec.ubx-sec.sec-platform .ubx .stack{gap:0}
  .main-sec.ubx-sec.sec-platform .ubx .step,
  .main-sec.ubx-sec.sec-platform .ubx .tier-infra{border-radius:0;border:1px solid rgba(255,255,255,.28)}
  .main-sec.ubx-sec.sec-platform .ubx .tier-infra{border-top:0;border-radius:0 0 14px 14px}
  /* 2×2 : 오른쪽 칸은 왼쪽 변, 아랫줄은 윗변을 지운다 */
  .main-sec.ubx-sec.sec-platform .ubx .flow > .step:nth-child(2n){border-left:0}
  .main-sec.ubx-sec.sec-platform .ubx .flow > .step:nth-child(n+3){border-top:0}
  .main-sec.ubx-sec.sec-platform .ubx .flow > .step:nth-child(1){border-top-left-radius:14px}
  .main-sec.ubx-sec.sec-platform .ubx .flow > .step:nth-child(2){border-top-right-radius:14px}
  /* ⚠ PC 의 '.flow > .step:last-child{border-top-right-radius:14px}' 는 의사클래스 하나만큼
     특정도가 높아 위 .step{border-radius:0} 으로는 안 지워진다(04 오른쪽 위가 둥글게 남았다). */
  .main-sec.ubx-sec.sec-platform .ubx .flow > .step:last-child{border-top-right-radius:0}
  /* 광선 켜기. 위쪽 ≤999 의 display:none 을 덮는다. reduced-motion 은 JS 가 캔버스를 안 만든다. */
  .main-sec.ubx-sec.sec-platform .ubx .plat-beam{display:block}

  /* 카드 아래 빈 자리를 걷는다(사용자 지시 — '여백이 많이 남는다').
     min-height(최대 300px)는 PC 4열의 좁은 카드에 맞춘 값이라 여기선 100px 가까이 비었다.
     하한을 풀면 '글 + 화살표 여백(56 / 컨버터 34px)' 이 카드 높이가 된다.
     2×2 에서도 같은 줄 카드 높이는 ⑪ 의 subgrid 가 맞춘다.
     ⚠ 05 운영 카드 두 장(.tier-infra)은 건드리지 않았다. */
  .main-sec.ubx-sec.sec-platform .ubx .step .cards-box .card{min-height:0}
}
@media all and (max-width:520px){
  /* 1열 : 왼쪽 변을 되살리고, 둘째 칸부터 윗변을 지운다. 위 두 모서리는 01 이 다 갖는다. */
  .main-sec.ubx-sec.sec-platform .ubx .flow > .step:nth-child(2n){border-left:1px solid rgba(255,255,255,.28)}
  .main-sec.ubx-sec.sec-platform .ubx .flow > .step + .step{border-top:0}
  .main-sec.ubx-sec.sec-platform .ubx .flow > .step:nth-child(2){border-top-right-radius:0}
  .main-sec.ubx-sec.sec-platform .ubx .flow > .step:nth-child(1){border-radius:14px 14px 0 0}
}

/* ════════════════════════════════════════════════════════════════════════════
   ⑬ 2026-10-15 · 521px 이상 — 평소엔 로드맵, 호버하면 제품 설명 (사용자 지시)
   적용 구간 : ≥1000(4열) · 521~999(2×2). ≤520(모바일)은 호버가 없다고 보고 설명을 항상 보인다.
   ⚠ '521' 을 새 BP 로 쓰지 않는다(§1.1) — 'not all and (max-width:520px)' 로 표준값 520 을 뒤집어 쓴다.
   ────────────────────────────────────────────────────────────────────────────
   평소 : 수식어 · 제품명만 보인다(설명 숨김). 01~04 를 '로드맵' 으로 훑는 상태.
   호버 : 카드를 제품 테마색이 덮고, 제목 3줄이 사라지며 그 자리에 설명이 뜬다. 화살표는 4px 떠오르기만 한다
          (원형 칩으로 바꿨다가 '괜히 강조된다' 는 지적으로 걷었다 — 2026-10-15).
   클릭 : 그 제품 페이지로 이동. 터치 PC(태블릿 가로)는 첫 탭 = 펼침, 둘째 탭 = 이동
          (_Js/main-hero.js 의 '로드맵 카드 탭' 블록이 .is-open 을 붙인다).
   ⚠ 설명은 opacity 로만 숨긴다. display/visibility 로 숨기면 링크의 접근 가능한 이름에서
      설명이 빠지고, 펼칠 때 카드 높이가 바뀐다. 자리는 그대로 두고 안 보이게만 한다.
   ⚠ 덮는 색은 --tile 이 아니라 --tile-ink 다. 흰 글자 대비 : --tile 이면 도큐메이커 2.58 ·
      셰어링 1.69 로 미달, --tile-ink 면 전부 4.9:1 이상(§5.2 — 면이 아니라 '글자 바탕' 이라서).
      셰어링만 예외 — --tile-ink(#7A5E00)는 갈색이라(§5.4 갈색 이력) 노랑 그대로 + 어두운 글자(9.2:1).
   ⚠ 덮개는 .card::after 다. .card::before 는 화살표, .card > a::before 는 사진,
      .card > a::after 는 컨버터 스크림이 쓰고 있다. z-index 0 + 트리 순서로 사진·스크림 위,
      글자(z1)·화살표(z2) 아래에 앉는다.
   ⚠ 05 운영 카드(.tier-infra)는 대상이 아니다 — 셀렉터가 전부 .step 안이다.
   ════════════════════════════════════════════════════════════════════════════ */
@media not all and (max-width:520px){
  /* 2026-10-15 : 호버하면 제목 3줄이 사라지고 '그 자리에' 설명이 나온다(사용자 지시 — 전환).
     설명은 흐름에서 빼서(absolute) 카드 왼쪽 위 = 수식어 자리에 겹쳐 둔다.
     ⚠ 같은 날 grid 로 '같은 칸에 겹치기' 를 해 봤다가 되돌렸다 — 숨긴 설명이 여전히 자리를
        차지해 평소 상태의 제목이 위에 안 붙었다(사용자 지적). 숨긴 것은 높이에 끼면 안 된다.
     top/left/right 는 위쪽 .ubx .step .card > a 의 padding 과 같은 식이다 — 한쪽만 바꾸면 어긋난다.
     카드 높이 = 제목 3줄 + 아래 여백. 설명이 그보다 길면 넘친다 — 산술상 전 구간 들어간다
     (1000px 컨버터 : 설명 + 위 20 + 화살표 자리 34 = 약 177px < 카드 약 202px).
     ⚠ 카드 하한(min-height)은 푼다(사용자 지시 — 설명이 없으니 카드가 줄어야 한다).
     ⚠ 영문명 아래 25px(설명과 떼려던 값)은 0 — 그 아래 여백은 <a> 의 padding-bottom 하나다. */
  .main-sec.ubx-sec.sec-platform .ubx .step .cards-box .card{min-height:0}
  .main-sec.ubx-sec.sec-platform .ubx .step .card .cd-tit{margin-bottom:0}
  .main-sec.ubx-sec.sec-platform .ubx .step .card .txt{
    position:absolute;top:clamp(20px,2vw,26px);left:clamp(16px,1.6vw,22px);right:clamp(16px,1.6vw,22px);
    opacity:0;transform:translateY(8px);transition:opacity .3s ease, transform .3s ease;
  }
  .main-sec.ubx-sec.sec-platform .ubx .step .card :is(.cd-s-tit,.cd-ko,.cd-tit){
    transition:opacity .25s ease, transform .3s ease;
  }
  .main-sec.ubx-sec.sec-platform .ubx .step .cards-box .card:is(:focus-within,.is-open) :is(.cd-s-tit,.cd-ko,.cd-tit){
    opacity:0;transform:translateY(-6px);
  }
  .main-sec.ubx-sec.sec-platform .ubx .step .cards-box .card::after{
    content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    background:var(--tile-ink);opacity:0;transition:opacity .3s ease;
  }
  .main-sec.ubx-sec.sec-platform .ubx .step .cards-box .card-ubisharing::after{background:var(--tile)}
  .main-sec.ubx-sec.sec-platform .ubx .step .cards-box .card::before{transition:transform .35s ease}

  /* ── 펼친 상태 = 호버 · 키보드 포커스 · 터치 첫 탭(.is-open) ── */
  .main-sec.ubx-sec.sec-platform .ubx .step .cards-box .card:is(:focus-within,.is-open)::after{opacity:1}
  .main-sec.ubx-sec.sec-platform .ubx .step .cards-box .card:is(:focus-within,.is-open) .txt{opacity:1;transform:none}
  .main-sec.ubx-sec.sec-platform .ubx .step .cards-box .card:is(:focus-within,.is-open)::before{transform:translateY(-4px)}
  .main-sec.ubx-sec.sec-platform .ubx .step .cards-box .card-ubisharing:is(:focus-within,.is-open) > a > span{color:#1D2430}

}
/* 호버는 마우스 기기만. 터치에서 :hover 가 '붙어 남는' 문제를 피한다(터치는 .is-open 이 대신한다). */
/* ⚠ not 은 쿼리 전체를 뒤집는다 — (hover:hover) 를 같은 줄에 붙이면 "≤520 이거나 호버 불가" 가 된다. 그래서 중첩한다. */
@media not all and (max-width:520px){@media (hover:hover){
  .main-sec.ubx-sec.sec-platform .ubx .step .cards-box .card:hover::after{opacity:1}
  .main-sec.ubx-sec.sec-platform .ubx .step .cards-box .card:hover .txt{opacity:1;transform:none}
  .main-sec.ubx-sec.sec-platform .ubx .step .cards-box .card:hover :is(.cd-s-tit,.cd-ko,.cd-tit){opacity:0;transform:translateY(-6px)}
  .main-sec.ubx-sec.sec-platform .ubx .step .cards-box .card:hover::before{transform:translateY(-4px)}
  .main-sec.ubx-sec.sec-platform .ubx .step .cards-box .card-ubisharing:hover > a > span{color:#1D2430}
}}

/* ─── ⑬-b 2026-10-15 : 제품카드 높이를 '전부' 같게 (사용자 지시 — 전 구간) ───
   ⑪ 의 subgrid 는 '같은 줄' 끼리만 맞췄다 — 첫 카드 줄과 둘째 카드 줄(01·02 의 이폼·컨텐츠),
   2×2 의 윗줄과 아랫줄은 서로 높이가 달랐다. 카드 행을 전부 1fr 로 두면, 높이가 정해지지 않은
   grid 에서 fr 행들은 '가장 큰 내용' 에 맞춰 같은 크기가 된다 → 카드 전부 = 가장 긴 카드의 글 높이.
   카드 안 글은 위에 붙는다.
   ⚠ 빈 1fr 행도 같은 크기로 커진다. 그래서 카드가 한 장인 단계(03·04)는 행을 4개가 아니라
      3개만 쓴다 [머리글][카드][여백] — :has() 로 판정하므로 카드 수가 바뀌어도 따라간다.
      단 PC(≥1000)는 한 줄에 01~04 가 같이 서므로 판 높이를 맞추려 전부 4행이다.
   ⚠ 아래 grid-template-rows 는 '01·02 는 카드 2장, 03·04 는 1장' 이라는 지금 배치를 전제로 한다.
      단계별 카드 수를 바꾸면 이 행 목록도 같이 고친다(1fr 하나 = 카드 한 줄).
   ⚠ 행 크기에는 카드 margin 이 들어간다. 그래서 모든 카드의 margin 합을 같게 맞춘다 :
      위 A(8~12) + 아래 (B-A) → 카드 사이 = B(14~22) 로 종전과 같고, 카드 높이는 전부 '행 - B'.
      늘어난 아래 (B-A) 만큼 ::after 여백 행에서 뺀다 — 판 아래 여백도 종전과 같다. */
@supports (grid-template-rows:subgrid){
  .main-sec.ubx-sec.sec-platform .ubx .step .cards-box .card,
  .main-sec.ubx-sec.sec-platform .ubx .step .cards-box .card + .card{
    margin-top:clamp(8px,1vw,12px);
    margin-bottom:calc(clamp(14px,1.6vw,22px) - clamp(8px,1vw,12px));
  }
  .main-sec.ubx-sec.sec-platform .ubx .step::after{
    grid-row:-2 / -1;   /* 마지막 행 = 여백. 4행·3행 단계 둘 다 맞는다 */
    height:calc(clamp(20px,2.4vw,32px) - (clamp(14px,1.6vw,22px) - clamp(8px,1vw,12px)));
  }
  @media all and (min-width:1000px){
    .main-sec.ubx-sec.sec-platform .ubx .flow{grid-template-rows:auto 1fr 1fr auto}
  }
  @media all and (max-width:999px){
    .main-sec.ubx-sec.sec-platform .ubx .step:not(:has(.card + .card)){grid-row:span 3}
    .main-sec.ubx-sec.sec-platform .ubx .step .cards-box .card{min-height:0}
    /* 2×2 : [01·02 = 4행] [03·04 = 3행] */
    .main-sec.ubx-sec.sec-platform .ubx .flow{grid-template-rows:auto 1fr 1fr auto auto 1fr auto}
  }
  @media all and (max-width:520px){
    /* 1열 : 01 · 02 · 03 · 04 순서 */
    .main-sec.ubx-sec.sec-platform .ubx .flow{
      grid-template-rows:auto 1fr 1fr auto auto 1fr 1fr auto auto 1fr auto auto 1fr auto;
    }
  }
}

/* ─── ⑬-c 2026-10-15 : 폰(≤520) 제품카드 — 설명 글자 조금 작게 · 설명 끝 ↔ 화살표 간격 0 (사용자 지시) ───
   간격 0 = <a> 의 padding-bottom 을 '화살표 bottom + 화살표 높이' 와 같게 :
     01~04 카드 15 + 11 = 26px · 05 운영 카드 22 + 16 = 38px.
   ⚠ 카드 높이 맞춤(⑬-b 의 1fr 행)을 폰에서는 끈다(auto). 1 열이라 옆 카드와 맞출 일이 없고,
      켜 두면 짧은 카드가 가장 긴 카드 높이로 늘어나 설명 아래가 다시 빈다. 운영 카드의 min-height 도 같은 이유로 0.
   설명 .944em → .87em(15px 기준 약 14.2 → 13px). */
@media all and (max-width:520px){
  @supports (grid-template-rows:subgrid){
    .main-sec.ubx-sec.sec-platform .ubx .flow{
      grid-template-rows:auto auto auto auto auto auto auto auto auto auto auto auto auto auto;
    }
  }
  .main-sec.ubx-sec.sec-platform .ubx .card .txt{font-size:.87em}
  .main-sec.ubx-sec.sec-platform .ubx .step .card > a{padding-bottom:26px}
  .main-sec.ubx-sec.sec-platform .ubx .tier-infra .card > a{padding-bottom:38px}
  .main-sec.ubx-sec.sec-platform .ubx .tier-infra .cards-box .card{min-height:0}
}

/* ─── ⑭ 2026-10-15 : 컨버터 한글명 한 줄 고정 (사용자 지시) ───
   "유비도큐 컨버터 & 뷰어" 가 카드 폭을 넘기는 순간부터 글자를 폭에 맞춰 연속으로 줄인다.
   평소 크기(1.389em = PC 25px)는 넉넉한 폭에서 그대로고, 좁을 때만 min() 의 둘째 항이 이긴다.
   기준은 뷰포트가 아니라 '카드 폭' 이다(cqi) — 열 수가 4 · 2 · 1 로 바뀌어도 식 하나로 맞는다.
     글 폭  = 9.33em (한글 9자 × (1 - .08 자간) + 공백 3 + .amp 의 & ) — Noto 600 의 한글 폭 1em 기준 추정
     나누는 값 9.7 = 9.33 × 1.04(안전여유). 브라우저가 없어 실측을 못 했다 — 그래도 두 줄이면 이 값을 올린다.
     안쪽 폭 = 카드 폭 - 좌우 padding(위쪽 .ubx .step .card > a 와 같은 식).
   산술 : 1000px 카드 안쪽 168px → 17.4px · 1300px 228px → 23.5px · 약 1310px 이상 25px 그대로.
   ⚠ container-type 은 카드에 레이아웃 격리를 건다. 카드는 이미 position:relative + isolation 이라
      절대배치 자식(화살표·덮개)과 쌓임 순서는 바뀌지 않는다. */
.main-sec.ubx-sec.sec-platform .ubx .step .cards-box .card-ubidocu-converter-viewer{container-type:inline-size}
.main-sec.ubx-sec.sec-platform .ubx .step .card-ubidocu-converter-viewer .cd-ko{
  white-space:nowrap;
  font-size:min(1.389em, calc((100cqi - 2 * clamp(16px,1.6vw,22px)) / 9.7));
}

/* ════════════════════════════════════════════════════════════════════════════
   ⑮ 2026-10-15 · 05 운영 카드 두 장도 ⑬ 과 같은 호버 전환 (사용자 지시) — 구간도 ⑬ 과 같다(521px 이상)
   ────────────────────────────────────────────────────────────────────────────
   ⑬ 의 셀렉터는 .step 안만 잡는다 — 여기서 .tier-infra 쪽을 같은 규칙으로 따로 건다.
   ⑬ 과 다른 값은 둘뿐이다 : 안여백(아래 .tier-infra .card > a 의 식) · 하한 해제.
   덮개색 --tile-ink 흰 글자 대비 : 인피니티스택 5.03 · 바라스택 5.00 (AA 통과).
   ⚠ ≤1300 에서는 영문명이 한글명 아래로 내려가 제목이 3줄이 된다(위쪽 ≤1300 블록) — 카드 높이는
      그 3줄을 감싸도록 따라간다. 하한(min-height)은 ⑬ 과 같은 이유로 푼다(설명이 빠졌으니).
   ════════════════════════════════════════════════════════════════════════════ */
@media not all and (max-width:520px){
  .main-sec.ubx-sec.sec-platform .ubx .tier-infra .cards-box .card{min-height:0}
  .main-sec.ubx-sec.sec-platform .ubx .tier-infra .card .cd-tit{margin-bottom:0}
  .main-sec.ubx-sec.sec-platform .ubx .tier-infra .card .txt{
    position:absolute;top:clamp(24px,2.4vw,32px);left:clamp(26px,2.6vw,34px);right:clamp(26px,2.6vw,34px);
    opacity:0;transform:translateY(8px);transition:opacity .3s ease, transform .3s ease;
  }
  .main-sec.ubx-sec.sec-platform .ubx .tier-infra .card :is(.cd-s-tit,.cd-ko,.cd-tit){
    transition:opacity .25s ease, transform .3s ease;
  }
  .main-sec.ubx-sec.sec-platform .ubx .tier-infra .cards-box .card::after{
    content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    background:var(--tile-ink);opacity:0;transition:opacity .3s ease;
  }
  .main-sec.ubx-sec.sec-platform .ubx .tier-infra .cards-box .card::before{transition:transform .35s ease}
  /* 펼친 상태 = 키보드 포커스 · 터치 첫 탭 */
  .main-sec.ubx-sec.sec-platform .ubx .tier-infra .cards-box .card:is(:focus-within,.is-open)::after{opacity:1}
  .main-sec.ubx-sec.sec-platform .ubx .tier-infra .cards-box .card:is(:focus-within,.is-open) .txt{opacity:1;transform:none}
  .main-sec.ubx-sec.sec-platform .ubx .tier-infra .cards-box .card:is(:focus-within,.is-open) :is(.cd-s-tit,.cd-ko,.cd-tit){opacity:0;transform:translateY(-6px)}
  .main-sec.ubx-sec.sec-platform .ubx .tier-infra .cards-box .card:is(:focus-within,.is-open)::before{transform:translateY(-4px)}
}
/* ⚠ not 은 쿼리 전체를 뒤집는다 — (hover:hover) 를 같은 줄에 붙이면 "≤520 이거나 호버 불가" 가 된다. 그래서 중첩한다. */
@media not all and (max-width:520px){@media (hover:hover){
  .main-sec.ubx-sec.sec-platform .ubx .tier-infra .cards-box .card:hover::after{opacity:1}
  .main-sec.ubx-sec.sec-platform .ubx .tier-infra .cards-box .card:hover .txt{opacity:1;transform:none}
  .main-sec.ubx-sec.sec-platform .ubx .tier-infra .cards-box .card:hover :is(.cd-s-tit,.cd-ko,.cd-tit){opacity:0;transform:translateY(-6px)}
  .main-sec.ubx-sec.sec-platform .ubx .tier-infra .cards-box .card:hover::before{transform:translateY(-4px)}
}}

/* ─── ⑯ 2026-10-15 : 제품카드 1px 흰 테두리 10% (사용자 지시) — 01~04 · 05 운영 카드 전부 ───
   테두리는 <a> 의 ::after 가 그린다 — 사진(a::before) 위, 글자(span z1) 아래 층이다.
   ⚠ 같은 날 해 본 것 : outline + offset -1px → 화면에 안 보였다(사용자 지적). 카드가
      isolation 으로 자기 쌓임맥락을 가져 outline 이 사진 아래로 깔린 것으로 본다.
   ⚠ border 는 쓰지 않는다 — 사진이 닿지 않는 바깥 1px 에 그려져 '떠 보인다'(2026-09-30 이력).
      inset box-shadow 도 자식인 사진 아래에 칠해져 가려진다.
   ⚠ a::after 는 컨버터 카드의 스크림(그라데이션)도 쓴다. 여기선 border 만 더하므로 둘이 같이 산다.
   ⚠ z-index 1 — 호버 덮개(.card::after, z0)보다 위라 덮개 위에서도 선이 보인다.
      글자 span 도 z1 이지만 트리상 뒤라 글자가 위다. pointer-events:none 이라 클릭을 안 막는다.
   ⚠ 반경 16px 은 카드(.cards-box .card)와 같은 값이다 — <a> 는 반경이 없어서 직접 준다. */
.main-sec.ubx-sec.sec-platform .ubx .cards-box .card > a::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  border:1px solid rgba(255,255,255,.1);border-radius:16px;box-sizing:border-box;
}

/* ─── ⑰ 2026-10-15 : ≤999(2×2 · 모바일 1열) 카드 글자를 PC 크기로 (사용자 지시) ───
   같은 날 2×2 에만 걸었다가 모바일(≤520)도 키웠다. 1열 카드 안쪽 폭은 320px 에서도 약 223px 라 들어간다.
   이 구간은 .doc-wrap 기준 폰트가 14px 라(main.css ≤999) 카드 글이 PC 의 0.78 배였다.
   2×2 카드는 PC 4열 카드보다 넓거나 같으므로(안쪽 폭 179~415px vs PC 168~293px) PC 값을 그대로 쓴다.
   카드의 기준만 18px 로 되돌리면 em 으로 적힌 한글명 · 영문명 · 설명(호버 글)이 PC 와 같아진다 :
     한글명 25 · 영문명 14.9 · 설명 17px (종전 19.4 · 11.6 · 13.2)
   수식어만 px clamp(⑪ ③)라 따로 16px 로 올린다(종전 13.5~15.7).
   컨버터 한글명은 ⑭ 의 cqi 식이 카드 폭에 맞춰 알아서 줄인다.
   05 운영 카드도 포함. 모바일은 설명이 항상 보이므로 설명 17px 가 평소 글이 된다. */
@media all and (max-width:999px){
  .main-sec.ubx-sec.sec-platform .ubx .cards-box .card{font-size:18px}
  .main-sec.ubx-sec.sec-platform .ubx .cards-box .card .cd-s-tit{font-size:16px}
}

/* ─── ⑱ 2026-10-15 : 섹션 바탕을 사진의 검정에 맞춘다 (사용자 지시 — 사진 경계가 보인다) ───
   사진(main_sec02_bg.jpg)은 가장자리가 순검정인데, 그 바깥은 #080A10(남색 기운) + 남색 글로우
   두 장이라 사진 사각형의 테두리가 드러났다.
   · 글로우 두 장 삭제 — '유리판이 섞을 재료' 로 넣은 것인데(위쪽 2026-09-30 주석), 지금 판은
     backdrop-filter 를 안 쓰는 검정 알파(.82)라 재료가 필요 없다.
   · 바탕색 · 위쪽 스크림의 색 #080A10 → #000. 스크림은 '바탕과 같은 색' 이어야 뚜껑이 티가 안 난다.
   ⚠ 사진 자체는 이 서버에서 픽셀을 못 읽는다(프로그레시브 JPEG). '순검정' 은 사용자 확인값이다.
      그래도 경계가 보이면 사진 가장자리가 실제로는 #000 이 아닌 것이니 그 색을 재서 여기 넣는다.
   ⚠ 흰 글자 대비는 바탕이 더 어두워지는 쪽이라 낮아지지 않는다. */
.main-sec.ubx-sec.sec-platform{
  background-color:#000;
  background-image:url(/_Img/Main/main_sec02_bg.jpg);
  background-position:right bottom;
  background-size:auto 52%;
}
.main-sec.ubx-sec.sec-platform::before{
  background:linear-gradient(180deg,
    #000 0%, #000 14%, rgba(0,0,0,0) 32%,
    rgba(0,0,0,0) 44%, rgba(0,0,0,.22) 50%, rgba(0,0,0,0) 60%);
}

/* ─── ⑲ 2026-10-15 : 호버해도 카드는 제자리 (사용자 지시) ───
   위쪽 '② 제품카드 호버' 의 들어올림(translateY -10 · 누름 -4 · 포커스 -10)만 끈다.
   그림자 · 제품색 글로우 · 화살표 떠오름(⑬) · 덮개 전환은 그대로다.
   will-change:transform 도 같이 푼다 — 움직이지 않는 카드에 합성 레이어를 잡아 둘 이유가 없다. */
.main-sec.ubx-sec.sec-platform .ubx .cards-box .card,
.main-sec.ubx-sec.sec-platform .ubx .cards-box .card:is(:hover,:active,:focus-within){
  transform:none;will-change:auto;
}

/* ════════════════════════════════════════════════════════════════════════════
   ⑳ 2026-10-15 · 히어로 캔버스 — 버튼 한 개 높이만큼 낮추고, 그만큼 장면 설명 글씨를 키운다
   (사용자 지시) · ≥1000 전용(글/그림 좌우 배치 구간)
   ────────────────────────────────────────────────────────────────────────────
   높이 = 폭 × 3/4(종전 aspect-ratio) − 히어로 버튼 높이.
   폭을 높이 식에 넣으려고 .axviz-wrap 을 컨테이너로 삼는다(75cqi = 폭의 3/4).
   버튼 높이 = 테두리 2 + 위아래 padding + 글줄(18px × 1.65 = 29.7) :
     >1300 : 2 + 30 + 29.7 = 61.7 → 62px      ≤1300 : 2 + 22 + 29.7 = 53.7 → 54px
     (값의 출처 = 위쪽 .ubx .btn 의 padding 15px 30px / ≤1300 12px 20px 10px)
   ⚠ 버튼 padding 을 바꾸면 --hero-btn-h 도 같이 고친다.
   ⚠ 캔버스는 JS(resize)가 실제 크기를 읽어 다시 그리므로 비율이 바뀌어도 그림이 늘어지지 않는다.
   ⚠ ≤999 는 이미 16:7 로 납작해서 건드리지 않았다.
   장면 설명 : 13px → clamp(16px, 1.4vw, 20px). 1000px 에서 16 · 1430px 이상 20.
     1000px 에서 그림 열 폭 약 440px — 세 항목(약 20자 + 간격)이 한 줄에 든다(16px × 20em ≈ 320 + 간격 ≈ 400). */
@media all and (min-width:1000px){
  .mVisual-wr .ubx .axviz-wrap{container-type:inline-size;--hero-btn-h:62px}
  .mVisual-wr .ubx .axviz{aspect-ratio:auto;height:calc(75cqi - var(--hero-btn-h))}
  .mVisual-wr .ubx .axviz-legend{font-size:clamp(16px,1.4vw,20px);margin-top:clamp(12px,1.2vw,18px)}
  .mVisual-wr .ubx .axviz-legend li::before{width:7px;height:7px}
}
@media all and (min-width:1000px) and (max-width:1300px){
  .mVisual-wr .ubx .axviz-wrap{--hero-btn-h:54px}
}

/* ─── ⑳-b 2026-10-15 : 장면 설명 사이에 가로 실선 — 세 문구가 '단계' 로 읽히게 (사용자 지시) ───
   흩어진 문서 ──── 구조화된 데이터 ──── 기업의 자산
   선은 앞 항목의 ::after 다(::before 는 이미 점이 쓴다). 항목 간 간격의 소유자는 이 선 하나다 —
   종전 li + li 의 margin-left 는 0 으로 내리고 선의 좌우 margin 이 간격이 된다.
   선은 흰색이고, 지금 단계 뒤의 선이 진행에 맞춰 빨강으로 차오른다(지난 단계 = 다 찬 빨강).
   ⚠ ≥1000 전용(⑳ 과 같다). 1000px 에서 16px 글자 + 선 2 개(각 28 + 좌우 12)가 한 줄에 든다
      (약 320 + 104 = 424px < 그림 열 440px). */
@media all and (min-width:1000px){
  .mVisual-wr .ubx .axviz-legend li + li{margin-left:0}
  /* 2026-10-15 : 흰 선이 단계 진행에 맞춰 왼쪽부터 빨강으로 차오른다(사용자 지시).
     --fill(0~1)은 main-hero.js 의 setStep/fillStep 이 캔버스 시계로 넣는다 — 다 차는 순간이 다음 장면이다.
     JS 가 죽으면 --fill 이 없어 0 = 흰 선만 남는다(문구는 그대로 읽힌다).
     ⚠ li 의 opacity(.72/.85)가 선에도 곱해진다. 선 자체 알파는 흰색 .55 · 빨강 1. */
  .mVisual-wr .ubx .axviz-legend li:not(:last-child)::after{
    content:"";flex:none;width:clamp(20px,2.6vw,48px);height:1px;   /* ㉑ 캔버스 축소로 28~56 → 20~48 */
    margin:0 clamp(10px,.8vw,14px);
    background:linear-gradient(90deg,
      var(--accent) 0 calc(var(--fill,0) * 100%),
      rgba(255,255,255,.55) calc(var(--fill,0) * 100%) 100%);
  }
}

/* ─── ㉑ 2026-10-15 : 히어로 그림(캔버스 + 설명)을 조금 더 작게 — 비율 유지, 오른쪽 붙임 유지 (사용자 지시) ───
   폭 = 그림 열의 88%, 단 440px 아래로는 안 줄인다(설명 한 줄이 그 폭을 필요로 한다).
   → 1000~1100px 은 종전 크기 그대로, 1300px 519px(종전 590) · 1920px 638px(종전 725).
   justify-self:end — 오른쪽 끝은 --content 선에 그대로 붙는다.
   비율 : 높이 식(⑳ 의 75cqi − 버튼 높이)에서 빼는 버튼 높이도 같은 88% 로 줄여, 폭이 줄어든 만큼
     높이가 같은 비율로 준다(1920px : 638 × .665 = 424px, 종전 725 × .665 = 482px).
   설명 한 줄 산술(⑳-b 의 선 20~48 · 여백 10~14 기준) : 1000 418/435 · 1300 474/519 · 1920 549/638px — 전부 한 줄. */
@media all and (min-width:1000px){
  .mVisual-wr .ubx .hero-viz{width:min(100%, max(88%, 440px));justify-self:end}
  .mVisual-wr .ubx .axviz{height:calc(75cqi - var(--hero-btn-h) * .88)}
}

/* ─── ㉒ 2026-10-15 : 히어로 글을 그림 윗선에 맞추고, 버튼은 아랫단으로 (사용자 지시) ───
   종전 .hero-split 은 align-items:center 라 글 덩어리가 그림의 세로 가운데에 떠 있었다.
   · 두 열을 같은 높이로 늘리고(stretch) 그림은 위에 붙인다 → 제목 윗선 = 캔버스 윗선.
   · 글 열은 세로 flex. 버튼 줄만 margin-top:auto 로 밀어 아랫단에 붙인다(space-between 과 같은 효과 —
     justify-content:space-between 을 쓰면 제목·소개문·버튼 셋이 고르게 벌어져 소개문이 가운데로 뜬다).
   · 아랫단 = 그림 열의 바닥(장면 설명 줄의 밑선)이다.
   ⚠ 글이 그림보다 길면(산술상 약 1600px 미만 — 제목이 3줄이 된다) 줄 높이는 글이 정하고,
      버튼은 글 끝에 놓인다. 그때도 윗선은 맞는다. 버튼 위 최소 간격은 padding-top 이 지킨다
      (종전 margin-top 값 그대로 — auto 와 같이 쓸 수 없어 padding 으로 옮겼다). */
@media all and (min-width:1000px){
  .mVisual-wr .ubx .hero-split{align-items:stretch}
  .mVisual-wr .ubx .hero-viz{align-self:start}
  .mVisual-wr .ubx .hero-copy{display:flex;flex-direction:column}
  .mVisual-wr .ubx .hero-copy .hero-cta{margin-top:auto;padding-top:clamp(30px,4.8vh,56px)}
}

/* ─── ㉒-b 2026-10-15 : 폰(≤520) 히어로 — 위 여백 절반 · 캔버스 1.2배 높이 · 장면 설명 키우고 PC 와 같은 가로 실선 (사용자 지시) ───
   ① 헤더 ↔ 제목 간격 50%.
      종전엔 .mvis-ubx 가 align-items:center 라 간격 = padding(헤더 + 14~38px) + 남는 높이의 절반이었다.
      산술(390×844) : 내용 약 645px · 남는 높이 72px → 간격 20 + 36 ≈ 56px.
      padding 만 줄이면 가운데정렬이 남는 높이를 다시 나눠 가져 화면이 안 바뀐다 → 위에 붙이고(flex-start)
      간격을 padding 하나로 정한다. clamp(14px, 3.3vh, 28px) : 844 에서 28px(= 56 의 절반) · 740 에서 24px.
   ② 캔버스 높이 ×1.2 — ≤999 의 16:7 → 16:8.4(폭은 그대로).
   ③ 장면 설명 11.5px → clamp(11.5px, 3.3vw, 14px), 사이에 ⑳-b 와 같은 실선(--fill 로 빨강이 차오른다).
      한 줄 산술(글 20자 × .95em + 점·간격 3 × 12 + 선 2 × (선 + 좌우 6)) :
        360(글칸 320) : 11.9px → 226 + 36 + 46 = 308 · 390(350) : 12.9px → 245 + 36 + 47 = 328 · 520(480) : 357 — 전부 한 줄. */
@media all and (max-width:520px){
  /* 2026-10-15 2차 : 28px 은 너무 붙었다(사용자 지적) → 5vh(844 에서 42px · 740 에서 37px), 종전 56px 의 3/4 쯤 */
  .mVisual-wr.mvis-single .mvis-ubx{align-items:flex-start;padding-top:calc(var(--header-h) + clamp(20px,5vh,42px))}
  /* 2026-10-15 3차 : 장면 설명 아래로 사진만 남는 자리를 70% 로(사용자 지시 — 배경이 너무 많이 보인다).
     히어로 높이가 100dvh 고정이라 위에 붙인 뒤 남는 높이가 전부 아래로 갔다.
     산술(390×844) : 위 102 + 내용 약 629 → 아래 113px. 70% = 약 80px.
     → 높이를 내용이 정하게(auto) 하고 아래 여백을 80px 로 못박는다. 폰 높이가 달라도 아래는 늘 80px.
     ⚠ 높이 auto 는 이 구간만이다. 521px 이상은 종전대로 화면 높이 고정. */
  .mVisual-wr .mvis-track{height:auto}
  .mVisual-wr.mvis-single .mvis-ubx{padding-bottom:80px}
  /* 회사소개서 버튼 ↔ 캔버스 : 종전 28px(.hero-split gap 하한) → 48px. 위로 붙인 뒤 남는 높이에서 가져온다 */
  .mVisual-wr .ubx .hero-split{row-gap:48px}
  /* 칸을 화면 폭에 맞춘 뒤의 글 크기(사용자 지시 '패딩에 맞춰 글씨는 줄여도 된다').
     제목 34px → 8vw : 둘째 줄 '당신의 문서를 읽지 못합니다'(약 10.8em)가 한 줄에 든다 —
       360(글칸 320) 28.8px → 311 · 390(350) 31.2px → 337 · 425 이상 34px 상한.
     소개문 19px → 16px. 버튼은 이미 flex 1 1 100% 라 칸 폭(= 패딩 안쪽)을 그대로 따른다. */
  .mVisual-wr .ubx .hero-tit{font-size:clamp(26px,8vw,34px)}
  .mVisual-wr .ubx .lede{font-size:16px}
  /* ④ 3 번 장면(기업의 자산) — 브라우저 창 + 폰 목업을 PC 배치 그대로 축소해서 보인다(사용자 지시).
     종전 ≤999 규칙은 폰을 숨기고 창을 height:auto(본문 최소 300px)로 늘려서, 184px 캔버스에는
     창 윗머리만 걸리고 나머지는 잘렸다.
     방식 : 목업을 600 × 315px(= 캔버스 비율 16:8.4) 고정 판에 PC 배치로 깐 뒤 판째 축소한다.
       배율 --mock-k = 캔버스 폭 / 600 은 main-hero.js resize() 가 넣는다(390 폰 ≈ .58 · 360 폰 ≈ .53).
       글자·여백을 하나하나 줄이지 않아도 비율이 그대로 유지된다.
     ⚠ 600 을 바꾸면 main-hero.js 의 MOCK_W 도 같이 고친다. 높이 315 = 600 × 8.4/16(②의 비율). */
  .mVisual-wr .ubx .mock{inset:auto;left:0;top:0;width:600px;height:315px;
    transform:scale(var(--mock-k,.55));transform-origin:0 0}
  .mVisual-wr .ubx .mock .app{left:4.5%;top:6%;width:82%;height:88%}
  .mVisual-wr .ubx .mock .app-body{grid-template-columns:150px 1fr;min-height:0}
  .mVisual-wr .ubx .mock .app-side{display:flex}
  .mVisual-wr .ubx .mock .phone{display:block}
  /* 판 높이 315 는 PC 판(약 424)보다 낮아서, PC 여백 그대로면 보고서 아래쪽(서명란)이 약 90px 잘린다.
     창 본문 232px(= 315 × .88 − 주소줄 45) 안에 들도록 세로 여백만 줄였다 :
       본문 패딩 28 + 문서(패딩 24 · 간격 27 · 머리 34 · 차트 40 · 줄 31 · 서명 33 = 189) = 217 < 232. */
  .mVisual-wr .ubx .mock .app-main{padding:14px 16px;gap:10px}
  .mVisual-wr .ubx .mock .doc{padding:12px 14px;gap:9px}
  .mVisual-wr .ubx .mock .doc-h{padding-bottom:8px}
  .mVisual-wr .ubx .mock .chart{height:40px}
  .mVisual-wr .ubx .mock .rows{gap:5px}
  .mVisual-wr .ubx .mock .sign{padding:7px 12px}
  .mVisual-wr .ubx .axviz{aspect-ratio:16/8.4}
  .mVisual-wr .ubx .axviz-legend{font-size:clamp(11.5px,3.3vw,14px)}
  .mVisual-wr .ubx .axviz-legend li + li{margin-left:0}
  .mVisual-wr .ubx .axviz-legend li:not(:last-child)::after{
    content:"";flex:none;width:clamp(10px,3vw,20px);height:1px;margin:0 6px 0 0;   /* 왼쪽 6px 은 li 의 gap(≤999 6px)이 이미 준다 */
    background:linear-gradient(90deg,
      var(--accent) 0 calc(var(--fill,0) * 100%),
      rgba(255,255,255,.55) calc(var(--fill,0) * 100%) 100%);
  }
}

/* 2026-10-15 : 폰(≤520) 전용 줄바꿈. 생애주기 섹션 제목을 '인프라까지,' 뒤에서 끊는다(사용자 지시).
   521px 이상은 br 을 숨겨 종전처럼 흐른다. br 뒤의 공백 한 칸이 그때 단어 사이 띄어쓰기가 된다. */
.ubx br.br-mo{display:none}
@media all and (max-width:520px){
  .ubx br.br-mo{display:inline}
  /* Our Mission 제목 — 폰은 세 줄(사용자 지시 : 두 줄에 맞췄더니 13~14px 로 너무 작았다).
       유비디시전은 문서를 데이터로 전환하여, / 기업의 DX·AX를 앞당기는 / 비즈니스 파트너가 되겠습니다
     가장 긴 줄은 첫 줄(≈ 17.3em). 글칸(뷰포트 − 40px)에 들도록 5vw :
       360 : 18px → 311 < 320 · 390 : 19.5px → 337 < 350 · 520 : 26px 상한 → 450 < 480.
     ⚠ 브라우저 실측이 아닌 em 추정이다. 첫 줄이 넘어가면 5vw 를 내린다.
     ⚠ .wrap 을 끼워 특정도를 하나 올렸다 — 기본 크기 규칙(㉓-b)이 이 블록보다 파일 뒤에 있어 같은 특정도면 진다. */
  .main-sec.ubx-sec.sec-mission .ubx .wrap h2.h{font-size:clamp(16px,5vw,26px)}
  /* 생애주기 섹션 배경 사진을 뺀다(사용자 지시). 바탕 검정(#000)은 남긴다 — 글자·유리판이 전부 흰색 기준이다. */
  .main-sec.ubx-sec.sec-platform{background-image:none}
  /* 두 줄에 맞춘다(사용자 지시). 긴 쪽 '문서 업무의 전 구간을 지원합니다' ≈ 14.1em :
     28px 이면 394px 라 글칸(320~350px)을 넘어 3 줄이 됐다. 6.2vw →
       360 : 22.3px → 314 < 320 · 390 : 24.2px → 341 < 350 · 452px 이상 28px 상한(→ 394 < 412). */
  .main-sec.ubx-sec.sec-platform .ubx .sc-head :is(h2,h3){font-size:clamp(20px,6.2vw,28px)}
}

/* ════════════════════════════════════════════════════════════════════════════
   ㉓ 2026-10-15 · Our Mission 섹션 (사용자 지시 — 시안 이미지를 사이트 문법으로)
   ────────────────────────────────────────────────────────────────────────────
   자리 : 종전 '왜 지금인가(AX 시대…)' 섹션. 바탕 톤(#D5DBE4)과 흰 카드 문법은 그 섹션 것을 이어받는다.
   시안과 다른 점(사이트 문법에 맞춤) :
     · 보라 → 브랜드 레드(--accent). 시안의 보라는 이 사이트 팔레트에 없다(§5).
     · 카드 머리의 색 띠 'Our Mission' → 다른 섹션과 같은 가운데 큰 제목(h2.h).
   구조 : [입력 목록] [연결선] [허브 : 칩 + 로고] [연결선] [결과 목록] — 다섯 칸 grid.
   ⚠ 연결선은 viewBox 100×300 을 preserveAspectRatio:none 으로 늘린다. 선 굵기가 같이 늘지 않게
      vector-effect:non-scaling-stroke. 경로의 y(50·150·250)가 목록 세 칸의 중심과 맞으려면
      목록(.ms-in/.ms-out)이 위아래 padding 없이 같은 높이의 3 행이어야 한다.
   ⚠ 로고는 허브 원 '아래' 에 절대배치다. 흐름에 넣으면 허브 칸의 세로 중심이 원에서 벗어나
      가운데 선(y 150)이 원 중심을 못 맞힌다.
   ⚠ 미디어쿼리는 ≤520 하나다(§1.1). 나머지 크기는 clamp. 360px 산술 : 라벨 14px 기준
      입력 56 + 선 20 + 허브 80 + 선 20 + 결과 108 = 284 < 카드 안쪽 288px.
   ════════════════════════════════════════════════════════════════════════════ */
.main-sec.ubx-sec.sec-mission{background:#D5DBE4}
.main-sec.ubx-sec.sec-mission .ubx h2.h{font-size:clamp(28px,3.7vw,46px);line-height:1.28;text-align:center}
.sec-mission .ubx .ms-card{
  margin-top:clamp(24px,3.4vw,44px);
  background:var(--surface);border-radius:14px;
  padding:clamp(28px,3.6vw,52px) clamp(16px,3vw,44px) clamp(16px,2.4vw,32px);
  display:flex;flex-direction:column;gap:clamp(24px,3vw,40px);
}
.sec-mission .ubx .ms-flow{
  display:grid;grid-template-columns:auto clamp(20px,7vw,110px) auto clamp(20px,7vw,110px) auto;
  justify-content:center;align-items:stretch;
  /* 로고가 허브 아래로 내려가는 자리 */
  padding-bottom:clamp(8px,1vw,14px);
}
.sec-mission .ubx .ms-in,
.sec-mission .ubx .ms-out{display:grid;grid-template-rows:repeat(3,clamp(48px,5vw,72px));margin:0;padding:0}
.sec-mission .ubx .ms-in li,
.sec-mission .ubx .ms-out li{display:flex;align-items:center;gap:clamp(8px,1.2vw,18px)}
.sec-mission .ubx .ms-in li{justify-content:flex-end}
.sec-mission .ubx .ms-lb{font-size:clamp(14px,1.4vw,19px);font-weight:500;color:var(--ink);letter-spacing:-.02em;white-space:nowrap}
/* 입력 쪽 '문서 카드' — 테두리 + 글줄 두 개 */
.sec-mission .ubx .ms-doc{
  flex:none;width:clamp(44px,5vw,66px);height:clamp(30px,3.2vw,42px);
  border:1.5px solid color-mix(in srgb,var(--accent) 35%,#fff);border-radius:6px;
  background:
    linear-gradient(var(--line-2),var(--line-2)) 22% 38% / 46% 2px no-repeat,
    linear-gradient(var(--line-2),var(--line-2)) 22% 64% / 30% 2px no-repeat,
    var(--surface);
}
.sec-mission .ubx .ms-wire{display:block;width:100%;height:100%;overflow:visible}
.sec-mission .ubx .ms-wire path{fill:none;stroke:var(--accent);stroke-opacity:.45;stroke-width:1.5;vector-effect:non-scaling-stroke}
.sec-mission .ubx .ms-hub{position:relative;display:flex;align-items:center;justify-content:center;
  width:clamp(80px,11vw,150px)}
.sec-mission .ubx .ms-core{
  display:grid;place-items:center;
  width:clamp(52px,6vw,84px);aspect-ratio:1;border-radius:50%;
  background:var(--accent-wash);
  border:1.5px solid color-mix(in srgb,var(--accent) 45%,#fff);
  box-shadow:0 0 0 clamp(4px,.6vw,8px) color-mix(in srgb,var(--accent) 8%,transparent);
}
.sec-mission .ubx .ms-core svg{width:56%;height:56%;fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round}
.sec-mission .ubx .ms-logo{position:absolute;top:calc(50% + clamp(26px,3vw,42px) + clamp(8px,1vw,14px));left:50%;
  transform:translateX(-50%);width:100%;height:auto}
.sec-mission .ubx .ms-chk{flex:none;width:clamp(18px,1.7vw,24px);height:auto}
.sec-mission .ubx .ms-chk circle{fill:var(--accent)}
.sec-mission .ubx .ms-chk path{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* 미션 문장 — 카드 안의 옅은 판. 강조 구절은 레드(#D6000F / #F4F5F7 = 5.1:1, AA 통과) */
.sec-mission .ubx .ms-stmt{
  margin:0;background:#F4F5F7;border-radius:10px;
  padding:clamp(28px,4vw,56px) clamp(16px,3vw,40px);
  text-align:center;font-size:clamp(18px,2.1vw,28px);font-weight:700;line-height:1.55;
  letter-spacing:-.03em;color:var(--ink);word-break:keep-all;text-wrap:balance;
}
.sec-mission .ubx .ms-stmt em{font-style:normal;color:var(--accent)}
@media all and (max-width:520px){
  /* 폰 : 문서 카드를 접어 가로 폭을 확보한다(라벨만으로 입력이 읽힌다) */
  .sec-mission .ubx .ms-doc{display:none}
  .sec-mission .ubx .ms-stmt br{display:none}
}
/* ㉓-b 2026-10-15 : 제목 'Our Mission' 을 지우고 그 자리 · 그 크기로 미션 문장을 올렸다(사용자 지시).
   카드 아래 회색 판(.ms-stmt)은 마크업에서 삭제 — 위 .ms-stmt 규칙은 대상이 없다.
   강조 구절 레드 : #D6000F / 섹션 바탕 #D5DBE4 = 3.90:1 — 46px Bold 는 큰 텍스트(3:1) 기준 통과.
     ⚠ 모바일 최소 28px Bold 도 큰 텍스트(18.66px Bold 이상)라 같은 기준이다. */
.main-sec.ubx-sec.sec-mission .ubx h2.h em{font-style:normal;color:var(--accent)}

/* ════════════════════════════════════════════════════════════════════════════
   ㉔ 2026-10-15 · Our Mission 도식 — 흐르는 빛 + 칩 강조 (사용자 지시 '화려하게' · 제안 1·3)
   ────────────────────────────────────────────────────────────────────────────
   한 바퀴 4s : 0~35% 왼쪽 선을 빛이 달려 칩으로 → 33~45% 칩이 맥동(받았다) →
                40~75% 오른쪽 선을 빛이 달려 결과로 → 75% 체크가 켜진다.
   세 줄은 .18s 씩 어긋나 위에서 아래로 물결친다(--i = 줄 번호, JS 가 넣는다).
   빛 = 길이 14 의 dash 하나(pathLength 100 기준). dashoffset 14 = 출발점 직전(안 보임),
        -100 = 끝점 너머(안 보임). 그 사이를 달린다.
   ⚠ 선 좌표는 main-hero.js 'Our Mission 연결선' 이 실제 크기로 다시 쓴다. 늘린 viewBox 그대로면
      dash 가 찌그러지므로 애니메이션은 JS 가 붙이는 .ms-live 아래에서만 돈다.
   ⚠ 칩 궤도(점선 원)는 항상 천천히 돈다(18s). 빛의 박자와 엮지 않는다 — 둘 다 박자가 있으면 산만하다.
   reduced-motion 이면 전부 멈추고 체크는 켜진 상태로 둔다.
   ════════════════════════════════════════════════════════════════════════════ */
.sec-mission .ubx .ms-wire path{vector-effect:non-scaling-stroke}
.sec-mission .ubx .ms-wire .ms-comet{
  fill:none;stroke:var(--accent);stroke-opacity:1;stroke-width:2.6;stroke-linecap:butt;
  stroke-dasharray:14 100;stroke-dashoffset:14;
  vector-effect:none;   /* pathLength 기반 dash 는 non-scaling-stroke 와 섞으면 브라우저마다 길이가 다르다. viewBox 가 실제 px 라 필요도 없다 */
  filter:drop-shadow(0 0 3px rgba(214,0,15,.75)) drop-shadow(0 0 8px rgba(214,0,15,.35));
}
.sec-mission.ms-live .ubx .ms-wire-l .ms-comet{animation:msWireL 4s linear infinite;animation-delay:calc(var(--i) * .18s)}
.sec-mission.ms-live .ubx .ms-wire-r .ms-comet{animation:msWireR 4s linear infinite;animation-delay:calc(var(--i) * .18s)}
@keyframes msWireL{0%{stroke-dashoffset:14}35%,100%{stroke-dashoffset:-100}}
@keyframes msWireR{0%,40%{stroke-dashoffset:14}75%,100%{stroke-dashoffset:-100}}

/* 결과 체크 — 평소 옅게, 빛이 닿는 순간 켜지며 한 번 튄다 */
.sec-mission.ms-live .ubx .ms-out li .ms-chk{animation:msChk 4s ease-out infinite;transform-origin:50% 50%}
.sec-mission.ms-live .ubx .ms-out li:nth-child(1) .ms-chk{animation-delay:0s}
.sec-mission.ms-live .ubx .ms-out li:nth-child(2) .ms-chk{animation-delay:.18s}
.sec-mission.ms-live .ubx .ms-out li:nth-child(3) .ms-chk{animation-delay:.36s}
@keyframes msChk{
  0%,72%{opacity:.38;transform:scale(1);filter:none}
  77%{opacity:1;transform:scale(1.22);filter:drop-shadow(0 0 6px rgba(214,0,15,.55))}
  86%,94%{opacity:1;transform:scale(1);filter:none}
  100%{opacity:.38;transform:scale(1)}
}

/* 칩 — 빛을 받을 때 맥동 + 바깥 점선 궤도 */
.sec-mission .ubx .ms-hub{--core:clamp(52px,6vw,84px)}
.sec-mission .ubx .ms-core{width:var(--core);position:relative;z-index:1}
.sec-mission.ms-live .ubx .ms-core{animation:msCore 4s ease-in-out infinite}
@keyframes msCore{
  0%,30%,60%,100%{box-shadow:0 0 0 clamp(4px,.6vw,8px) color-mix(in srgb,var(--accent) 8%,transparent)}
  40%{box-shadow:0 0 0 clamp(7px,1vw,13px) color-mix(in srgb,var(--accent) 16%,transparent),
                 0 0 28px color-mix(in srgb,var(--accent) 35%,transparent)}
}
.sec-mission .ubx .ms-orbit{
  position:absolute;left:50%;top:50%;
  width:calc(var(--core) * 1.5);aspect-ratio:1;margin:calc(var(--core) * -.75) 0 0 calc(var(--core) * -.75);
  border-radius:50%;border:1.5px dashed color-mix(in srgb,var(--accent) 40%,transparent);
  pointer-events:none;
}
.sec-mission.ms-live .ubx .ms-orbit{animation:msOrbit 18s linear infinite}
@keyframes msOrbit{to{transform:rotate(360deg)}}
/* 로고는 궤도 바깥으로 내린다(종전 : 원 반지름 + 간격) */
.sec-mission .ubx .ms-logo{top:calc(50% + var(--core) * .75 + clamp(6px,.8vw,12px))}

/* 2026-10-15 : reduced-motion 정지 블록 삭제 — 미션 도식(광선·체크·칩·궤도)도 이 설정을 따르지 않는다
   (사용자 지시 — 그 설정이 켜진 폰에서 체크만 켜진 채 광선이 안 보였다). main-hero.js 'mission-beam' 과 짝. */
/* ㉔-b 2026-10-15 : 연결선이 목록 세 칸과 어긋나던 것(사용자 스크린샷).
   원인 — SVG 는 viewBox 비율(처음 100×300 = 1:3)로 스스로 키를 갖는다. 그 키(폭 110 × 3 = 330px)가
   목록 세 칸(약 216px)보다 커서 줄 높이를 늘렸고, 선의 1/6 · 1/2 · 5/6 지점이 목록 칸 중심에서 벗어났다.
   contain:size 로 SVG 의 고유 크기를 0 으로 만들어 줄 높이 계산에서 빼고, align-self:stretch 로
   줄 높이(= 목록 세 칸)만큼만 늘린다. 이제 줄 높이의 소유자는 목록(.ms-in/.ms-out) 하나다. */
.sec-mission .ubx .ms-wire{contain:size;height:auto;min-height:0;align-self:stretch}
/* ㉔-c 2026-10-15 : 라벨 교체로 이름이 길어졌다(업무 프로세스 · AI 지식베이스).
   360px 산술 : 한 줄이면 입력 88 + 선 25 + 허브 80 + 선 25 + 결과 117 = 335 > 카드 안쪽 288px.
   ≤520 에서만 단어 단위 두 줄을 허용한다 → 입력 '프로세스' 52 · 결과 '지식베이스' 91 → 273px.
   행 높이 48px 에 13px × 1.3 × 2 줄 = 34px 이라 들어간다. 왼쪽 목록은 오른쪽 정렬(선 쪽으로 붙는다). */
@media all and (max-width:520px){
  .sec-mission .ubx .ms-lb{white-space:normal;word-break:keep-all;font-size:13px;line-height:1.3}
  .sec-mission .ubx .ms-in .ms-lb{text-align:right}
}

/* ════════════════════════════════════════════════════════════════════════════
   ㉕ 2026-10-15 · Our Mission — 검정 바탕 + 유리 카드 + 혜성 광선 (사용자 지시)
   ────────────────────────────────────────────────────────────────────────────
   · 바탕 #D5DBE4 → #111318. ⚠ 완전 평면으로 두지 않는다 — 유리(backdrop-filter)가 섞을 계조가
     있어야 '유리' 로 읽힌다(CLAUDE.md §4). 허브 뒤 붉은 잔광 + 왼쪽 위 차가운 잔광 두 장을 깐다.
   · 흰 카드 → 유리(흰 알파 .06 + blur + 1px 테두리 + 윗변 하이라이트).
   · 잉크를 같이 뒤집는다(배경과 잉크는 항상 같이) : 제목 흰색, 강조 #FF4D57.
     ⚠ 강조를 #D6000F 그대로 두지 않는다 — 이 바탕에서 3.42:1. #FF4D57 은 5.71:1 (AA 통과).
   · 광선은 main-hero.js 가 그리는 캔버스(.ms-beam)다. 종전 SVG dash 빛줄기(.ms-comet)는 더 만들지 않는다.
   · 로고는 흰 워드마크(/_Img/Layout/logo.png)로 바꿨다(마크업).
   ════════════════════════════════════════════════════════════════════════════ */
.main-sec.ubx-sec.sec-mission{
  background-color:#111318;
  background-image:
    radial-gradient(42% 46% at 50% 62%, rgba(214,0,15,.16) 0%, transparent 72%),
    radial-gradient(50% 50% at 14% 18%, rgba(80,96,140,.22) 0%, transparent 70%);
}
.main-sec.ubx-sec.sec-mission .ubx{
  --ink:#fff; --ink-2:rgba(255,255,255,.86); --ink-3:rgba(255,255,255,.62);
  --line:rgba(255,255,255,.18); --line-2:rgba(255,255,255,.38);
}
.main-sec.ubx-sec.sec-mission .ubx h2.h{color:#fff}
.main-sec.ubx-sec.sec-mission .ubx h2.h em{color:#FF4D57}
.main-sec.ubx-sec.sec-mission .ubx :focus-visible{outline-color:#fff}

.sec-mission .ubx .ms-card{
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 20px 50px rgba(0,0,0,.35);
}
.sec-mission .ubx .ms-lb{color:rgba(255,255,255,.92)}
.sec-mission .ubx .ms-doc{
  border-color:rgba(255,255,255,.28);
  background:
    linear-gradient(rgba(255,255,255,.4),rgba(255,255,255,.4)) 22% 38% / 46% 2px no-repeat,
    linear-gradient(rgba(255,255,255,.4),rgba(255,255,255,.4)) 22% 64% / 30% 2px no-repeat,
    rgba(255,255,255,.04);
}
.sec-mission .ubx .ms-wire path{stroke:#FF4D57;stroke-opacity:.32}
.sec-mission .ubx .ms-wire .ms-comet{display:none}
.sec-mission .ubx .ms-core{
  background:rgba(214,0,15,.14);
  border-color:rgba(255,77,87,.55);
}
.sec-mission .ubx .ms-core svg{stroke:#FF4D57}
.sec-mission .ubx .ms-orbit{border-color:rgba(255,77,87,.38)}

/* 혜성 캔버스 — 도식 전체를 덮는다. 클릭할 것이 없지만 습관대로 pointer-events:none */
.sec-mission .ubx .ms-flow{position:relative}
.sec-mission .ubx .ms-beam{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:2}
/* ㉕-b 2026-10-15 : 빨강을 걷는다(사용자 지적 — '빨간빛이라 무섭다').
   빛 · 선 · 칩 · 궤도 · 바탕 잔광 → 차가운 은백색. 넓게 깔린 빨강은 경고로 읽힌다(CTA 밴드 §5.4 와 같은 이유).
   브랜드 레드는 '점' 으로만 남긴다 : 제목 강조 구절 · 결과 체크 아이콘. */
.main-sec.ubx-sec.sec-mission{
  background-image:
    radial-gradient(42% 46% at 50% 62%, rgba(150,172,214,.14) 0%, transparent 72%),
    radial-gradient(50% 50% at 14% 18%, rgba(80,96,140,.22) 0%, transparent 70%);
}
.sec-mission .ubx .ms-wire path{stroke:#fff;stroke-opacity:.22}
.sec-mission .ubx .ms-core{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.38)}
.sec-mission .ubx .ms-core svg{stroke:#fff}
.sec-mission .ubx .ms-orbit{border-color:rgba(255,255,255,.28)}
@keyframes msCoreW{
  0%,30%,60%,100%{box-shadow:0 0 0 clamp(4px,.6vw,8px) rgba(255,255,255,.05)}
  40%{box-shadow:0 0 0 clamp(7px,1vw,13px) rgba(255,255,255,.10), 0 0 28px rgba(200,215,245,.35)}
}
.sec-mission .ubx .ms-core{box-shadow:0 0 0 clamp(4px,.6vw,8px) rgba(255,255,255,.05)}
.sec-mission.ms-live .ubx .ms-core{animation-name:msCoreW}
/* ㉕-c 2026-10-15 : 사용자 지시 3건
   ① 결과 체크 → 초록(#2EB872, '완료' 의 관용색). 제품색(이폼 #009040)은 피했다 — 특정 제품을 가리키는 걸로 읽힌다.
      흰 체크 / #2EB872 = 2.5:1 이지만 아이콘(비텍스트)이고 옆 라벨이 뜻을 진다.
   ② 제목 강조 → 정본 브랜드 레드 #D6000F. 이 바탕에서 3.42:1 — 제목은 28~46px Bold 라 큰 텍스트(3:1) 기준 통과.
      ⚠ 본문 크기 글자에 이 조합을 쓰면 미달이다.
   ③ 섹션 높이 — 위아래 여백만 늘린다(공용 72~128 → 96~168px). 카드 안쪽은 그대로. */
.sec-mission .ubx .ms-chk circle{fill:#2EB872}
@keyframes msChkG{
  0%,72%{opacity:.38;transform:scale(1);filter:none}
  77%{opacity:1;transform:scale(1.22);filter:drop-shadow(0 0 6px rgba(46,184,114,.6))}
  86%,94%{opacity:1;transform:scale(1);filter:none}
  100%{opacity:.38;transform:scale(1)}
}
.sec-mission.ms-live .ubx .ms-out li .ms-chk{animation-name:msChkG}
.main-sec.ubx-sec.sec-mission .ubx h2.h em{color:#D6000F}
.main-sec.ubx-sec.sec-mission{padding:clamp(96px,9.5vw,168px) 0}
@media all and (max-width:999px){
  /* ③ 의 모바일 값. 공용 ≤999(52~80px)보다 한 단계만 크게 — 96px 하한은 폰에서 과하다. */
  .main-sec.ubx-sec.sec-mission{padding:clamp(68px,11vw,110px) 0}
}
/* ㉕-d 2026-10-15 : 아래 여백만 한 단계 더(사용자 지시). 위는 ㉕-c 값 그대로.
   PC 96~168 → 120~210px · ≤999 68~110 → 84~136px (각 약 1.25 배). */
.main-sec.ubx-sec.sec-mission{padding-bottom:clamp(120px,11.9vw,210px)}
@media all and (max-width:999px){
  .main-sec.ubx-sec.sec-mission{padding-bottom:clamp(84px,13.6vw,136px)}
}
/* ㉕-e 2026-10-15 : 초록불이 다 켜진 뒤 잠깐 머물렀다가 반복(사용자 지시). 한 바퀴 4s → 6s.
   빛이 달리는 시간은 그대로이고 늘어난 2s 는 끝의 머묾이다. JS(main-hero.js 의 T · LA/LB/RA/RB)와 같은 박자 :
     칩 맥동 = 오른쪽 빛 출발(1.6s = 26.7%) · 체크 켜짐 = 오른쪽 빛 도착(3.0s = 50%) · 92% 까지 켜진 채 · 100% 에 꺼짐. */
@keyframes msChkH{
  0%,48%{opacity:.38;transform:scale(1);filter:none}
  51.5%{opacity:1;transform:scale(1.22);filter:drop-shadow(0 0 6px rgba(46,184,114,.6))}
  57%,92%{opacity:1;transform:scale(1);filter:none}
  100%{opacity:.38;transform:scale(1)}
}
@keyframes msCoreH{
  0%,20%,40%,100%{box-shadow:0 0 0 clamp(4px,.6vw,8px) rgba(255,255,255,.05)}
  26.7%{box-shadow:0 0 0 clamp(7px,1vw,13px) rgba(255,255,255,.10), 0 0 28px rgba(200,215,245,.35)}
}
.sec-mission.ms-live .ubx .ms-out li .ms-chk{animation-name:msChkH;animation-duration:6s}
.sec-mission.ms-live .ubx .ms-core{animation-name:msCoreH;animation-duration:6s}
/* ㉕-f 2026-10-15 : 스크롤로 나갔다 돌아오면 가운데 칩이 잠깐 사라졌다 뜬다(사용자 지적).
   코드상 칩을 숨기는 곳은 없다(섹션은 donot-remove-on 이라 .on 이 안 빠지고, 광선 캔버스는 투명이다).
   유리 카드(backdrop-filter) 안에서 계속 움직이는 칩(맥동) · 궤도(회전)를 브라우저가 화면 밖에서
   내려놨다가 늦게 다시 그리는 것으로 본다 — 브라우저가 없어 재현은 못 했다.
   허브를 처음부터 자기 합성 레이어로 올려 둬 다시 그릴 일이 없게 한다.
   ⚠ 그래도 깜빡이면 다음 후보는 카드의 backdrop-filter 다(잠깐 꺼서 확인). */
.sec-mission .ubx .ms-hub,
.sec-mission .ubx .ms-core,
.sec-mission .ubx .ms-orbit{will-change:transform;backface-visibility:hidden}

/* ─── ㉖ 2026-10-15 : Our Mission → '지금 시작해보세요' 사이 (사용자 지시)
   · 스크롤을 따라 밝아지는 덮개를 해 봤다가 '별로' 라는 판정으로 걷었다(JS 포함 삭제).
   · 두 섹션 사이 간격(= Mission 아래 padding m + sec3 위 padding s)을 70% 로 줄인다.
     Mission 의 m 은 방금 사용자가 늘린 값이라 안 건드리고, 줄이는 몫은 전부 s 에서 뺀다 :
       s' = 0.7(m + s) − m = 0.7s − 0.3m        (s 는 main.css 의 260 / ≤1300 200 / ≤999 120px)
     1920px : 210 + 260 = 470 → 329 (s' 119) · 1300px : 155 + 200 = 355 → 248 (s' 93) ·
      700px : 95 + 120 = 215 → 151 (s' 56)
     ⚠ m 의 식(㉕-d 의 clamp)을 바꾸면 아래 calc 안의 clamp 도 같이 바꾼다.
   · 그라데이션 : sec3 윗부분을 아주 옅은 회색(#E6E9EE)에서 흰색으로 풀어 준다. 어두운 Mission 에서
     순백으로 바로 떨어지는 단차를 한 단계 누그러뜨리는 정도 — 어둡게 칠하지 않는다. */
.main-sec3{
  padding-top:calc(182px - .3 * clamp(120px,11.9vw,210px));
  background:linear-gradient(180deg, #E6E9EE 0, #fff clamp(240px,24vw,420px));
}
@media all and (max-width:1300px){
  .main-sec3{padding-top:calc(140px - .3 * clamp(120px,11.9vw,210px))}
}
@media all and (max-width:999px){
  .main-sec3{padding-top:calc(84px - .3 * clamp(84px,13.6vw,136px))}
}
/* ㉖-b 2026-10-15 : 질문 섹션(.main-sec3) — 사용자 지시 2건
   · 바탕을 순백이 아닌 아주 옅은 회색(#F5F6F8)으로. 바로 아래 레퍼런스 섹션(.main-sec4)이 #fff 라 구분된다.
     위쪽 그라데이션(#E6E9EE →)도 흰색이 아니라 이 회색으로 풀리게 바꾼다.
     ⚠ 질문 카드(.link)의 바탕 #EEE 와 차이가 줄었다(255 → 245 대 238). 카드가 묻혀 보이면 카드를 흰색으로 올린다.
   · 카드 아래 여백 1.2 배 : 260 → 312 · ≤1300 200 → 240 · ≤999 120 → 144px. */
.main-sec3{
  background:linear-gradient(180deg, #E6E9EE 0, #F5F6F8 clamp(240px,24vw,420px));
  padding-bottom:312px;
}
@media all and (max-width:1300px){ .main-sec3{padding-bottom:240px} }
@media all and (max-width:999px){ .main-sec3{padding-bottom:144px} }
/* ㉖-c 2026-10-15 : 질문(회색) ↔ 레퍼런스(흰색) 경계 (사용자 지시)
   · 회색 아래 여백 65% : 312 → 203 · ≤1300 240 → 156 · ≤999 144 → 94px (㉖-b 의 1.2 배 값 기준).
   · 레퍼런스 섹션(.main-sec4)은 위 padding 이 0 이라 제목이 경계에 붙어 있었다 → 흰 위 여백.
     PC 아래 padding(130px)과 같은 무게로 잡되 폭에 따라 줄인다 : 60px(≈920px 이하) ~ 120px(1846px 이상). */
.main-sec3{padding-bottom:203px}
@media all and (max-width:1300px){ .main-sec3{padding-bottom:156px} }
@media all and (max-width:999px){ .main-sec3{padding-bottom:94px} }
.main-sec4{padding-top:clamp(60px,6.5vw,120px)}
/* ㉖-d 2026-10-15 : 질문 섹션의 내용(제목 + 카드 5장) 시작점을 내린다(사용자 지시).
   ㉖ 의 위 padding 식에 40~72px(1000px 40 · 1800px 이상 72)을 더한다. 바탕 그라데이션은 위에서부터라 같이 안 움직인다.
   결과 : 1920px 119 → 191 · 1300px 93 → 145 · 700px 56 → 96px. */
.main-sec3{padding-top:calc(182px - .3 * clamp(120px,11.9vw,210px) + clamp(40px,4vw,72px))}
@media all and (max-width:1300px){
  .main-sec3{padding-top:calc(140px - .3 * clamp(120px,11.9vw,210px) + clamp(40px,4vw,72px))}
}
@media all and (max-width:999px){
  .main-sec3{padding-top:calc(84px - .3 * clamp(84px,13.6vw,136px) + clamp(28px,5.7vw,40px))}
}
/* ㉗ 2026-10-15 : 레퍼런스 사례 카드(.main-sec4 .case-item, #1F2327)에 흰 10% 1px 테두리(사용자 지시).
   생애주기 제품카드(⑯)와 같은 값 · 같은 방식 — 카드 위에 얹는 ::after 층이라 레이아웃 폭이 안 바뀌고,
   카드 안 내용이 가장자리를 덮어도 선이 위에 남는다. 반경은 카드와 같게 inherit. */
.main-sec4 .case-item::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  border:1px solid rgba(255,255,255,.1);border-radius:inherit;box-sizing:border-box;
}
/* ㉗-b 2026-10-15 : 질문 섹션의 회색 카드(.main-sec3 .link, #EEE)에 검정 10% 1px 테두리(사용자 지시).
   빨간 첫 카드(.m-link)는 제외 — 회색 카드만이다. 방식은 ㉗ 과 같다(::after 층, 반경 inherit).
   ⚠ .link 는 isolation:isolate 라 z-index:1 이 카드 안에서만 쌓인다 — 글자(z auto)보다 위지만 선만 있어 안 가린다. */
.main-sec3 .links-box .link:not(.m-link)::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  border:1px solid rgba(0,0,0,.1);border-radius:inherit;box-sizing:border-box;
}

/* ─── ㉘ 2026-10-15 : 폰(≤520) 질문 섹션(.main-sec3) — 사용자 지시 3건 ───
   ① 제목 '우리 회사에 꼭 맞는 툴은?' 한 줄. main.css ≤520 의 .slice{display:block}(줄바꿈)을 끄고 글칸에 맞춘다.
      제목 ≈ 11.8em → 7.2vw : 360 25.9px → 306 < 320 · 390 28px 상한 → 330 < 350.
   ② 빨간 카드(.m-link) 없음. 폰엔 호버가 없는데 첫 카드가 늘 빨강이고, 탭하면 main.js 의 mouseover 로
      빨강이 옮겨 다녔다. 클래스는 JS 가 계속 붙이므로 폰에서는 .m-link 를 회색 카드와 똑같이 보이게 한다
      (바탕 · 원형 장식 · 번호 칩 · 글자색 · 테두리 ㉗-b).
   ③ 제목 위 여백 80% : ≤999 식(㉖-d) 그대로 × .8 → 360~490px 에서 86.8 → 69.4px. */
@media all and (max-width:520px){
  .main-sec3 .tit-box .m-tit{font-size:clamp(22px,7.2vw,28px)}
  .main-sec3 .tit-box .m-tit .slice{display:none}

  .main-sec3 .links-box .m-link{background-color:#EEE}
  .main-sec3 .links-box .m-link:before{opacity:0}
  .main-sec3 .links-box .m-link .num{background-color:transparent;font-size:1.365em}
  .main-sec3 .links-box .m-link .tit{color:#000}
  .main-sec3 .links-box .m-link .detail{color:#525252}
  .main-sec3 .links-box .m-link::after{
    content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
    border:1px solid rgba(0,0,0,.1);border-radius:inherit;box-sizing:border-box;
  }

  .main-sec3{padding-top:calc((84px - .3 * clamp(84px,13.6vw,136px) + clamp(28px,5.7vw,40px)) * .8)}
  /* 2026-10-16 : 섹션 아래 여백 50%(사용자 지시). 눈에 보이는 간격 = 마지막 카드 margin 10 + .links-box margin 24 + padding 94 = 128px
     → 64px 이 되도록 padding 만 94 → 30px. (앞 두 값은 카드 사이 간격·PC 공용이라 안 건드린다) */
  .main-sec3{padding-bottom:30px}

  /* ④ 2026-10-16 : 번호 · 질문을 한 줄 글로 붙인다(사용자 지시 — 따로 놀아 시선이 흩어졌다).
        "01 계약 및 서명 업무를 … 싶다면?" 처럼 평문으로 흐르고, 줄이 넘치면 번호 아래로 감긴다.
        번호 칩(30px 칸 · 가운데 정렬, 10-15 ④)은 걷었다. '자세히 보기'(카드 오른쪽 아래 절대배치)는 그대로 둔다.
     ⑤ 질문이 inline 이라 margin-bottom 이 안 먹는다. 질문 ↔ '자세히 보기' 간격은 a 의 아래 패딩이 갖는다 :
        16(종전 패딩) + 32(10-15 ⑤ 의 질문 margin-bottom) = 48px — 종전과 같은 높이. */
  .main-sec3 .links-box .link > a{padding:22px 16px 48px 24px}   /* 위 16→22 · 왼 16→24(사용자 지시 2026-10-16). 오른쪽은 종전 16 */
  .main-sec3 .links-box .num,
  .main-sec3 .links-box .m-link .num{display:inline;width:auto;height:auto;margin:0 .45em 0 0;font-size:16px}
  .main-sec3 .links-box .tit,
  .main-sec3 .links-box .m-link .tit{display:inline;margin:0}
}

/* ─── ㉙ 2026-10-15 : 폰(≤520) 레퍼런스 섹션 제목 — 한 줄 · 설명 두 줄 (사용자 지시) ───
   제목 '유비디시전에서 협업하는 4,000개 기업' ≈ 17em → 5.2vw :
     360 18.7px → 318 < 320 · 390 20.3px → 345 < 350 · 462px 이상 24px(main.css 종전값) 상한.
   설명은 br 로 이미 두 줄이다 — 각 줄이 다시 접히지 않게 글자·자간을 줄인다.
     긴 쪽 첫 줄 '스타트업부터 대기업, 공공기관·교육·제조·IT·미디어 등' ≈ 22.6em(자간 −.05em 기준) → 3.8vw :
     360 13.7px → 309 < 320 · 390 14.8px → 335 < 350 · 500px 이상 19px(종전값) 상한.
   ⚠ 둘 다 브라우저 실측이 아닌 em 추정이다. 폰에서 접히면 vw 계수를 내린다. */
@media all and (max-width:520px){
  .main-sec4 .m-tit strong{font-size:clamp(18px,5.2vw,24px)}
  .main-sec4 .m-tit p{font-size:clamp(13px,3.8vw,19px);letter-spacing:-.05em}
  /* 2026-10-15 2차(사용자 스크린샷 412px — 제목 '기업' · 설명 '등' 이 다음 줄로 넘어갔다).
     원인은 글자 크기가 아니라 .m-tit 의 padding-right 44px(main.css — 로고 칸과 나란히 서던 PC 배치의 간격)였다.
     폰은 세로로 쌓이므로 필요 없다. 실측(스크린샷) : 제목 약 347px · 설명 첫 줄 약 338px < 글칸 372px. */
  .main-sec4 .m-tit{padding-right:0}
}

/* ─── ㉚ 2026-10-15 : 폰(≤520) 도입사례 카드 — 담당자 왼쪽 · 오른쪽 아래 '자세히 >' (사용자 지시) ───
   터치 기기(main.css @media (hover:none))는 .case-more 판(카드 전체를 덮는 링크)을 투명하게 상시 노출하는데,
   판의 align-items:center 가 그대로라 '도입사례 더보기' 가 카드 세로 가운데 = 인용문 위에 겹쳐 찍혔다.
   · 문구를 판 바닥으로(flex-end) → 담당자(.case-by) 줄과 같은 높이, 오른쪽 끝.
   · 문구 '도입사례 더보기' → '자세히'. 글자만 바꾼다 — 링크 이름은 aria-label('○○ 도입사례 더보기')이 그대로 갖는다.
   · 담당자는 왼쪽 정렬. 오른쪽 70px 은 '자세히 >'(약 60px) 자리 — 이름이 길면 겹치지 않고 줄을 바꾼다. */
@media all and (max-width:520px){
  .main-sec4 .case-more{align-items:flex-end}
  .main-sec4 .case-more .txt{display:none}
  .main-sec4 .case-more::before{content:"자세히";font-size:15px;line-height:1.4;font-weight:500}
  .main-sec4 .case-more .arr{margin-bottom:.3em}   /* 글줄(15 × 1.4) 가운데쯤 — flex-end 라 화살표가 바닥에 붙는 것을 띄운다 */
  .main-sec4 .case-by{text-align:left;padding-right:70px}
}

/* ─── ㉛ 2026-10-15 : 히어로 제목은 어느 폭에서든 콤마 기준 두 줄 (사용자 지시) ───
   '기업 AI는 아직,' / '당신의 문서를 읽지 못합니다' — 둘째 줄(≈ 10.8em)이 글 열 폭을 넘으면 세 줄로 접힌다.
   산술(≥1000 2 열) : 글 열 = (min(1480, 100vw − 90) − gap) / 2, 글자 = clamp(34, 4.05vw, 56).
     1000px 열 435 · 둘째 줄 437 → 접힘 · 1100~1300px 여유 1~2% 뿐(em 추정 오차 안쪽이라 실제로는 접힐 수 있다).
   → 글 열을 컨테이너로 삼고 글자를 '열 폭 / 11.3'(여유 4%) 이하로 묶는다. 넉넉한 폭에서는 종전 값 그대로다.
   ⚠ ≤520 은 ㉒-b 의 8vw 가 같은 일을 하므로 이 규칙은 521px 이상에만 건다. */
.mVisual-wr .ubx .hero-copy{container-type:inline-size}
@media not all and (max-width:520px){
  .mVisual-wr .ubx .hero-copy .hero-tit{font-size:min(clamp(34px,4.05vw,56px), calc(100cqi / 11.3))}
}
/* 521~999(글 · 그림 위아래 배치) 도 폰처럼 버튼 ↔ 그림 사이 48px. 종전 gap 하한 28~40px 은 둘이 한 덩어리로 붙어 보였다. */
@media all and (max-width:999px){
  .mVisual-wr .ubx .hero-split{row-gap:48px}
}

/* ─── ㉜ 2026-10-15 : 히어로 버튼 좌우 여유 (사용자 지시 — 폭이 글자에 꼭 맞아 좁아 보인다) ───
   좌우 padding 만 늘린다 : >1300 30 → 44px · ≤1300 20 → 32px. 위아래는 그대로라
   ⑳ 의 --hero-btn-h(버튼 높이 → 캔버스 높이 식)는 안 바뀐다.
   히어로 버튼(.hero-cta)만이다 — .ubx .btn 을 쓰는 다른 자리는 종전 그대로. ≤520 은 버튼이 폭 100% 라 무관. */
.mVisual-wr .ubx .hero-cta .btn{padding-left:44px;padding-right:44px}
@media all and (max-width:1300px){
  .mVisual-wr .ubx .hero-cta .btn{padding-left:32px;padding-right:32px}
}

/* ─── ㉝ 2026-10-15 : 생애주기 섹션 제목 아래 간격 줄임 — 전 구간 (사용자 지시, ≤999 먼저 · 이어서 PC) ───
   머리글 padding 32 → 18px. 제목 ↔ 01~05 판 = 18 + 판 gap(12~18) → PC 50 → 36px · 폰 44 → 30px.
   ⚠ 32px 은 2026-09-30 '지운 안내 문구 자리를 당기지 말 것' 지시로 비워 둔 값이었다(위 주석).
      이번 지시로 그 결정을 바꾼 것이다 — 되돌리라는 말이 없으면 32 로 복귀시키지 않는다. */
.main-sec.ubx-sec.sec-platform .ubx .sc-head{padding-bottom:18px}