@charset "utf-8";
/* frame.css — 구조 시스템 · v6 · 2026-09-07 · (주)엑스온
   ─────────────────────────────────────────────────────────────
   방향: "구조적 정밀 · 물류다운". 장식이 아니라 구조로 감도를 올린다.
   설계도·계측기의 어법을 빌린다 — 코너 브래킷, 가이드라인, 넘버 마커,
   두께가 다른 선. 유행을 타는 그라디언트·블롭·그림자 더미는 쓰지 않는다.

   anti-ai-design 즉시 반려 목록에서 v5가 걸린 4개를 여기서 푼다:
     ① 섹션 여백이 어디나 똑같다      → --sp-* 5단계로 차등
     ② 같은 크기 카드가 반복된다      → 1+2+3 불규칙 배열 (insights.css)
     ③ 같은 형식 세트가 반복된다      → .why 첫 항목 확대 (flow.css)
     ④ 깊이가 없다                    → 그림자가 아니라 선 두께 3단계로 층을 만든다

   ★ 그림자를 쓰지 않는 이유
   v5 진단에서 "그림자 0 = 평면적"이 나왔지만, 해법을 그림자로 잡으면
   SaaS 랜딩과 똑같아진다(물류의 무게감이 죽는다). 대신 선의 두께와
   여백의 차이로 층을 만든다. 물류 서류·도면이 그렇게 생겼다. */

:root{
  /* ── 여백 리듬 : 섹션 역할별로 다르게. 균일한 여백이 AI 티의 절반이다 ── */
  /* v7.3 (2026-09-10) : 1440px 기준 섹션 사이 빈 구간이 240~320px 까지 벌어져 한 단계씩 조였다.
     역할별 차이(리듬)는 그대로 두고 절대값만 약 25% 내렸다. */
  --sp-hero:clamp(88px,11vh,140px);    /* 히어로 · 최종 CTA */
  --sp-xl:clamp(60px,7vw,104px);       /* 장(章)이 바뀌는 자리 */
  --sp-lg:clamp(44px,5.5vw,80px);      /* 일반 섹션 */
  --sp-md:clamp(32px,4vw,56px);        /* 도해처럼 위와 붙어야 하는 것 */
  --sp-sm:clamp(24px,3vw,40px);        /* 캡션·각주 */

  /* ── 선 두께 3단계. 1px 하나만 쓰면 층이 안 생긴다 ── */
  --hair:.5px;                          /* 표 안쪽 · 미세 구분 */
  --rule:3px;                           /* 장 구분 · 강조 */
  --brk-w:13px;                         /* 코너 브래킷 변 길이 */
}

/* ══════════════════════════════════════════════
   1. L자 코너 브래킷 — 계측 대상을 집는 표시
   숫자·요금·한 줄 답변처럼 "이 값이 핵심"인 블록에만.
   남발하면 의미가 없어지므로 한 화면에 2개까지.
   ══════════════════════════════════════════════ */
.brk{position:relative}
.brk::before,.brk::after{
  content:'';position:absolute;width:var(--brk-w);height:var(--brk-w);
  border-style:solid;border-color:var(--navy);pointer-events:none;
}
.brk::before{top:0;left:0;border-width:2px 0 0 2px}
.brk::after{bottom:0;right:0;border-width:0 2px 2px 0}
.brk--in::before{top:10px;left:10px}
.brk--in::after{bottom:10px;right:10px}
.on-nv .brk::before,.on-nv .brk::after,
.beat--nv .brk::before,.beat--nv .brk::after,
.beat--shot .brk::before,.beat--shot .brk::after{border-color:var(--accent)}

/* ══════════════════════════════════════════════
   2. 넘버 마커 — 01 · 02. 공정과 순서가 사업의 뼈대라 전면에 세운다
   ══════════════════════════════════════════════ */
.mark{display:grid;grid-template-columns:auto 1fr;gap:0 clamp(16px,2vw,26px);align-items:start}
.mark__n{
  font-family:var(--f-brand);font-weight:600;font-size:14px;letter-spacing:.18em;
  color:var(--navy);min-width:46px;padding-top:9px;border-top:var(--rule) solid var(--navy);
  font-variant-numeric:tabular-nums;
}
.mark__b{min-width:0}
@media (max-width:600px){
  .mark{grid-template-columns:1fr;gap:14px}
  .mark__n{min-width:0;width:46px}
}

/* ══════════════════════════════════════════════
   3. 컨테이너 가이드라인 — 도면의 치수선
   섹션 좌우 끝에 1px 세로선. 콘텐츠 폭이 어디까지인지 눈에 보이게 한다.
   ══════════════════════════════════════════════ */
.guides{position:relative}
.guides::before,.guides::after{
  content:'';position:absolute;top:0;bottom:0;width:1px;
  background:var(--line);pointer-events:none;
}
.guides::before{left:0}
.guides::after{right:0}
@media (max-width:860px){.guides::before,.guides::after{display:none}}

/* 눈금 — 가이드라인 위에 얹는 짧은 가로 티크 */
.tick{position:relative;padding-left:22px}
.tick::before{
  content:'';position:absolute;left:0;top:.62em;width:12px;height:1px;background:var(--navy);
}

/* ══════════════════════════════════════════════
   4. 라벨 — 계측값에 붙는 작은 활자
   ══════════════════════════════════════════════ */
.tagline{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--f-brand);font-size:var(--fs-label);font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);
}
.tagline::before{content:'';width:26px;height:var(--rule);background:var(--navy);flex:none}
.on-nv .tagline::before,.beat--nv .tagline::before{background:var(--accent)}

/* ══════════════════════════════════════════════
   5. 스크롤 리빌
   ★ html.rv-on 이 붙었을 때만 숨긴다. reveal.js 가 즉시 붙이므로,
     JS 가 죽거나 늦으면 콘텐츠는 그냥 다 보인다 (GEO·접근성상 중요).
   ══════════════════════════════════════════════ */
html.rv-on [data-rv]{
  opacity:0;transform:translate3d(0,18px,0);
  transition:opacity .62s var(--ease),transform .62s var(--ease);
  transition-delay:var(--rv-d,0ms);will-change:opacity,transform;
}
html.rv-on [data-rv].is-in{opacity:1;transform:none;will-change:auto}
@media (prefers-reduced-motion:reduce){
  html.rv-on [data-rv]{opacity:1!important;transform:none!important;transition:none!important}
}

/* ══════════════════════════════════════════════
   6. 스크롤 축소 GNB (리퀴드 글래스)
   트렌드 레이더 2026 : 채택. 축소는 높이·패딩만 — 로고까지 줄이면 출렁인다.
   ══════════════════════════════════════════════ */
.sitehead{transition:padding .28s var(--ease),background .28s linear,box-shadow .28s linear}
.sitehead__in{transition:padding .28s var(--ease)}
.sitehead[data-scrolled] .sitehead__in{padding-top:9px;padding-bottom:9px}
.sitehead[data-scrolled]{box-shadow:0 1px 0 var(--line)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .sitehead{background:var(--bg)}          /* 폴백 — 반투명 금지 */
  .topbar.is-solid{background:var(--bg)}
}

/* ══════════════════════════════════════════════
   7. 태블릿 · 폴더블 펼침 (768~1023)
   트렌드 레이더 : 이 구간에서 2단이 나와야 한다. 모바일 1단을 늘리면 여백만 뜬다.
   ══════════════════════════════════════════════ */
@media (min-width:768px) and (max-width:1023px){
  .foot__in{gap:28px}
  .res__sec,.res__hero,.res__cta{padding-left:clamp(28px,5vw,56px);padding-right:clamp(28px,5vw,56px)}
}