/* =========================================================================
   /work — 텍스트 UI 랜딩 전용 스타일
   =========================================================================
   ★모든 클래스에 jw- 프리픽스를 둔다. 이 사이트는 Tailwind 컴파일본
     (output_ko.css)을 링크하는데, 컴파일 안 된 유틸리티를 쓰면 조용히
     아무 일도 안 일어난다. 그래서 /work 본문은 유틸리티에 기대지 않고
     여기서 전부 정의한다. 기존 페이지 스타일은 건드리지 않는다.
   ★헤더·푸터는 head.html / footer.html 을 그대로 주입하므로
     그쪽이 쓰는 output_ko.css 는 계속 링크해야 한다.
   ========================================================================= */

.jw {
  /* 색 — 홈페이지 주황(#FD7D00)을 그대로 쓴다. 앱의 #f26100 과 다르다. */
  --jw-accent: #fd7d00;
  --jw-accent-ink: #b35800;
  --jw-ink: #1c1c1e;
  --jw-ink-2: #4a4a4f;
  --jw-ink-3: #78787f;
  --jw-line: #e6e6ea;
  --jw-surface: #ffffff;
  --jw-surface-2: #f7f7f9;
  --jw-dark: #191a1d;
  --jw-dark-2: #24262b;

  /* 본문 폭 — 960 → 1248 (형님 지시 2026-08-10, +30%).
     ★이 페이지는 내용의 절반이 화면 스크린샷이다. 960 에서는 1440 화면에서도
       기능 블록 사진 한 장이 433px 라 화면 속 글씨가 안 읽혔다("좁아 보인다"의 정체).
     ★다만 글줄까지 같이 늘리지는 않는다 — 한글은 한 줄 45~50자를 넘으면 눈이
       다음 줄 머리를 못 찾는다. 글은 --jw-prose 로 따로 묶는다(아래 jw-lead 등). */
  --jw-max: 1248px;
  --jw-prose: 62ch;
  --jw-gap-section: 96px;
  --jw-radius: 14px;

  --jw-sans: 'Noto Sans KR', system-ui, -apple-system, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  --jw-display: 'SCoreDream', var(--jw-sans);

  color: var(--jw-ink);
  font-family: var(--jw-sans);
  /* ★한국어는 낱말 안에서 끊지 않는다(형님 지적 2026-08-13 — 「비교해 보 / 세요」로 갈렸다).
     기본 줄바꿈은 글자 단위라 두 글자 낱말이 행 끝에서 쪼개진다. */
  word-break: keep-all;
  overflow-wrap: break-word;   /* 아주 긴 영문·URL 은 넘치지 않게 풀어 준다 */
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  background: var(--jw-surface);
}

.jw *,
.jw *::before,
.jw *::after { box-sizing: border-box; }

/* 읽는 글은 폭을 따로 묶는다 — 상자를 넓힌 것은 사진을 키우기 위해서지
   문장을 길게 하려는 것이 아니다. 좌우 2단 안(기능 블록)은 이미 좁아 제외한다. */
.jw-hero__grid .jw-lead,
.jw-section > .jw-wrap > .jw-lead,
.jw-section > .jw-wrap > .jw-h2 + .jw-lead {
  max-width: var(--jw-prose);
}
.jw-section > .jw-wrap > .jw-lead { margin-left: auto; margin-right: auto; }

.jw-wrap {
  max-width: var(--jw-max);
  margin: 0 auto;
  padding: 0 24px;
}

.jw-section { padding: var(--jw-gap-section) 0; }
.jw-section--tint { background: var(--jw-surface-2); }

/* ---- 타이포 위계 : 크기 대비로 잡는다 (균일 강조 금지) ---- */
.jw-h1 {
  font-family: var(--jw-display);
  font-weight: 800;
  font-size: clamp(30px, 5.2vw, 52px);
  line-height: 1.22;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
}
.jw-h2 {
  font-family: var(--jw-display);
  font-weight: 800;
  font-size: clamp(24px, 3.4vw, 34px);
  line-height: 1.3;
  letter-spacing: -0.015em;
  margin: 0 0 14px;
}
.jw-h3 {
  font-family: var(--jw-display);
  font-weight: 700;
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.4;
  margin: 0 0 10px;
}
.jw-lead { font-size: clamp(16px, 1.9vw, 19px); color: var(--jw-ink-2); margin: 0 0 8px; }
.jw-body { font-size: 16px; color: var(--jw-ink-2); margin: 0 0 8px; }
.jw-eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--jw-accent-ink);
  margin: 0 0 12px;
}
.jw-note { font-size: 13px; color: var(--jw-ink-3); }

.jw ul.jw-list { margin: 0 0 8px; padding: 0; list-style: none; }
.jw ul.jw-list li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 6px;
  font-size: 16px;
  color: var(--jw-ink-2);
}
.jw ul.jw-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 11px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--jw-accent);
}

/* ---- 버튼 : 1차 하나 + 2차 (균일 강조를 피한다) ---- */
.jw-cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.jw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 26px;
  border-radius: 10px;
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
}
.jw-btn--primary {
  background: var(--jw-accent);
  color: #fff;
  box-shadow: 0 6px 18px rgba(253, 125, 0, .28);
}
.jw-btn--primary:hover { background: #e97300; transform: translateY(-1px); box-shadow: 0 10px 24px rgba(253,125,0,.34); }
.jw-btn--ghost { background: #fff; color: var(--jw-ink); border-color: var(--jw-line); }
.jw-btn--ghost:hover { border-color: var(--jw-ink-3); transform: translateY(-1px); }
.jw-btn--onDark { background: rgba(255,255,255,.10); color: #fff; border-color: rgba(255,255,255,.28); }
.jw-btn--onDark:hover { background: rgba(255,255,255,.18); transform: translateY(-1px); }
.jw-btn:focus-visible,
.jw a:focus-visible { outline: 3px solid var(--jw-accent); outline-offset: 3px; }

.jw-textlink {
  color: var(--jw-accent-ink);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(179, 88, 0, .35);
}
.jw-textlink:hover { border-bottom-color: var(--jw-accent-ink); }

/* ---- 플랜 배지 : 요금표에서 파생시킨다 (한 컴포넌트로 통일) ---- */
.jw-badge-plan {
  display: inline-block;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  border: 1px solid var(--jw-line);
  background: #fff;
  color: var(--jw-ink-2);
}
.jw-badge-plan--all { border-color: #bfe3c8; background: #eef8f1; color: #216c39; }
.jw-badge-plan--paid { border-color: #ffd9ae; background: #fff5e9; color: var(--jw-accent-ink); }

/* ---- 히어로 ---- */
.jw-hero { padding: 84px 0 var(--jw-gap-section); }
.jw-hero__grid { display: grid; grid-template-columns: 1fr; gap: 40px; }
.jw-hero__shot {
  background: var(--jw-dark);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 24px 60px rgba(25, 26, 29, .22);
  /* ★화면 두 장을 액자 «가운데»에 둔다(형님 지적 2026-08-13).
     액자 높이는 왼쪽 글 칸에 맞춰 늘어나는데 화면은 위에 붙어 있어,
     아래에만 45px 이 비어 «위로 치우쳐» 보였다(실측: 위 18 / 아래 63).
     ★grid 에 align-items 를 주지 않는다 — 그러면 글 칸까지 같이 움직인다.
       액자 안에서만 가운데로 모은다. */
  display: flex;
  align-items: center;
}
/* flex 자식이 되면 폭이 내용에 맞춰 줄어든다 — 원래대로 액자를 꽉 채우게 못박는다. */
.jw-hero__shot > .jw-hero__stack { width: 100%; }

/* 스크린샷 자리 — 이미지는 형님이 별도 제공. 임의 이미지 넣지 않는다. */
.jw-shot {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 260px;
  border-radius: 10px;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.035) 0 12px, transparent 12px 24px),
    var(--jw-dark-2);
  color: rgba(255,255,255,.62);
  font-size: 13px;
  letter-spacing: .02em;
  padding: 20px;
}
/* ---- 스크린샷 자리표시자 : 자리가 스스로 무엇을 넣어야 하는지 말하게 한다 ----
   ★사진이 들어오면 이 div 는 <img> 로 통째 교체되므로 이 규칙도 같이 사라진다.
     "무엇을 찍어야 하나"를 문서로만 두면 화면과 문서가 갈린다 — 화면이 직접 말하게 둔다. */
.jw-shot { flex-direction: column; gap: 10px; }
.jw-shot::before {
  content: attr(data-no) "  " attr(data-asset);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  opacity: .85;
}
.jw-shot::after {
  content: attr(data-spec);
  max-width: 34em;
  font-size: 11.5px;
  line-height: 1.65;
  opacity: .72;
}
.jw-shot--light {
  background:
    repeating-linear-gradient(45deg, rgba(0,0,0,.03) 0 12px, transparent 12px 24px),
    var(--jw-surface-2);
  color: var(--jw-ink-3);
  border: 1px solid var(--jw-line);
}

/* ---- 신뢰 바 ---- */
.jw-trust { padding: 34px 0; border-top: 1px solid var(--jw-line); border-bottom: 1px solid var(--jw-line); }
.jw-trust p { margin: 0 0 18px; font-size: 14px; color: var(--jw-ink-3); text-align: center; }

/* ---- 스크린샷 ----
   ★width/height 를 마크업에 박아 두었으므로 aspect-ratio 가 자동으로 잡힌다 —
     이미지가 늦게 와도 자리가 안 흔들린다(CLS 0). 여기선 폭만 맞춰 준다. */
.jw-pic {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--jw-line);
  background: var(--jw-surface-2);
}
.jw-pic--hero {
  /* ★히어로는 크게 렌더되는 자리라 10px 는 각져 보인다 — 크기에 비례해 키운다(형님 지시). */
  border-radius: 16px;
  border-color: rgba(255,255,255,.10);
  box-shadow: 0 18px 40px rgba(0,0,0,.28);
  overflow: hidden;   /* 스크린샷 모서리가 테두리 밖으로 삐져나오지 않게 */
}
/* ---- 히어로 : 화면 두 장 겹치기 ----
   좁은 화면에서는 세로로 쌓고, 769px 이상에서만 겹친다(아래 미디어쿼리).
   ★앞 장은 상자 왼쪽 밖으로 조금 나가야 '떠 있는 것'으로 읽힌다 — 액자 안에
     얌전히 들어가면 두 장이 한 장처럼 붙어 보인다. */
.jw-hero__stack { position: relative; }
.jw-hero__front { margin-top: 14px; }
/* 한 블록에 화면 두 장 — 좌우로 나누면 한 장이 434px 라 글씨가 안 읽힌다.
   좁은 화면: 세로로 쌓는다 / 넓은 화면: 조각 한 장을 겹쳐 깊이를 준다(아래 미디어쿼리). */
.jw-stack { position: relative; }
.jw-stack figure { margin: 0; }
.jw-stack__front { margin-top: 16px; }
.jw-pic-pair, .jw-stack figcaption {
  margin-top: 7px;
  font-size: 12px;
  color: var(--jw-ink-3);
  letter-spacing: .01em;
}

/* ---- 신뢰 바 : 로고 대신 '쌓인 것' ----
   ★로고처럼 보이는 도형은 넣지 않는다 — 없는 고객을 있다고 말하는 그림이 된다.
     장식(SVG)은 아무 주장도 하지 않고, 주장은 숫자가 한다(기준일 병기). */
.jw-trust__band { position: relative; padding: 6px 0 2px; }
.jw-trust__deco {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.jw-trust__stats {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.jw-trust__stats li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}
.jw-trust__stats strong {
  font-family: var(--jw-display);
  /* ★2026-08-10 — 네 칸 중 셋이 숫자에서 낱말로 바뀌었다(두 화면·무설치·한 곳에).
     30px 은 숫자 넉 자에 맞춘 크기라, 한글 낱말이 오면 칸을 넘치도록 커 보인다.
     낱말도 '표제'로 읽히는 선까지만 키운다. */
  font-size: 24px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--jw-ink);
  font-variant-numeric: tabular-nums;   /* 남아 있는 '2021' 의 자릿수 폭을 고정 */
  word-break: keep-all;                 /* '두 화면' 이 낱말 가운데서 끊기지 않게 */
}
.jw-trust__unit {
  margin-left: 3px;
  font-family: var(--jw-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--jw-accent-ink);
  letter-spacing: 0;
}
/* 설명이 길어졌다(예: '텍스트 UI와 그래픽 UI, 버튼 한 번으로 전환') — 두 줄을 전제로 잡는다.
   keep-all 이 없으면 'UI와' 같은 덩어리가 가운데서 끊겨 읽기가 나빠진다. */
.jw-trust__cap {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--jw-ink-3);
  word-break: keep-all;
  /* ★max-width 에 ch 를 쓰면 안 된다 — ch 는 숫자 '0' 의 폭이라 12.5px 폰트에서 1ch≈7px 다.
     22ch 로 두었더니 154px 이 되어 '화상·채팅·결재·근태·인사·' 뒤에서 줄이 끊겼다
     (구분점으로 줄이 끝나 목록이 잘린 것처럼 보였다). 칸 폭은 격자가 이미 정하므로
     여기서는 구분선에 글자가 닿지 않을 만큼만 여백을 준다. */
  padding: 0 10px;
}

/* ---- 신뢰 바 그림 : 전부 인라인 SVG(요청 0·파일 0) ----
   ★타사 참고안(다우오피스)처럼 사진이 아니라 플랫 벡터로 간다. 다만 로고 모양은
     절대 만들지 않는다 — 기관 로고를 흉내 낸 도형은 없는 고객을 있다고 말하는 그림이다.
     여기 그림들은 '무엇을 하는 도구인가'만 말하고 누구의 것도 가리키지 않는다. */
.jw-trust__ico { display: block; width: 40px; height: 40px; }
.jw-trust__ico svg { width: 100%; height: 100%; display: block; }
.jw-fill-accent       { fill: var(--jw-accent); }
.jw-fill-accent-soft  { fill: var(--jw-accent); opacity: .28; }
.jw-fill-soft         { fill: var(--jw-surface-2); stroke: var(--jw-line); stroke-width: 1.2; }
.jw-fill-line         { fill: var(--jw-line); }
.jw-stroke-line       { stroke: var(--jw-line); stroke-width: 1.2; stroke-linecap: round; }

/* 아이콘은 장식이다 — 화면 낭독기에는 숫자와 설명만 남는다(svg 는 aria-hidden). */
@media (prefers-reduced-motion: no-preference) {
  .jw-trust__stats li { transition: transform .35s cubic-bezier(.16,1,.3,1); }
  .jw-trust__stats li:hover { transform: translateY(-2px); }
}
.jw-trust__asof {
  margin: 16px 0 0;
  font-size: 11.5px;
  color: var(--jw-ink-3);
  opacity: .8;
  text-align: center;
}

@media (min-width: 769px) {
  .jw-trust { padding: 40px 0; }
  .jw-trust__stats { grid-template-columns: repeat(4, 1fr); gap: 0; }
  /* 칸 사이 얇은 구분선 — 상자를 그리지 않고 리듬만 준다 */
  .jw-trust__stats li + li { border-left: 1px solid var(--jw-line); }
  .jw-trust__stats strong { font-size: 27px; }
  .jw-trust__ico { width: 44px; height: 44px; }

  /* 히어로 겹치기 — 뒤를 92% 로 줄여 왼쪽 아래에 자리를 만들고 앞을 걸친다. */
  .jw-hero__stack { padding-bottom: 46px; }
  .jw-hero__back { width: 92%; margin-left: auto; }
  .jw-hero__front {
    position: absolute;
    left: -6%;
    bottom: 0;
    width: 62%;
    margin-top: 0;
    border-radius: 14px;   /* 앞 장은 조금 작으니 반경도 조금 작게 — 같은 곡률로 보이게 */
    border-color: rgba(255,255,255,.16);
    box-shadow: 0 20px 44px rgba(0,0,0,.42);
  }

  /* ---- 조직도 위에 인사카드 조각을 얹는다 ----
     back 을 92% 로 줄여 오른쪽 아래에 자리를 만들고, 그 자리에 front 를 걸친다.
     front 는 흰 테두리와 그림자로 '위에 떠 있는 것'임을 분명히 한다 —
     테두리가 없으면 두 화면이 한 장처럼 붙어 보인다. */
  .jw-stack { padding-bottom: 34px; }
  .jw-stack__back { width: 92%; }
  .jw-stack__front {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 74%;
    margin-top: 0;
  }
  .jw-stack__front .jw-pic {
    border: 3px solid var(--jw-surface);
    box-shadow: 0 14px 34px rgba(0,0,0,.16);
  }
  .jw-stack__front figcaption { text-align: right; }
}

/* ---- 기능 블록 : 좌우 교차 ---- */
.jw-feature { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; }
.jw-feature + .jw-feature { margin-top: 72px; }
.jw-feature__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 6px; }

/* ---- 카드 3열 ---- */
.jw-cards { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 30px; }
.jw-card {
  background: #fff;
  border: 1px solid var(--jw-line);
  border-radius: var(--jw-radius);
  padding: 24px;
}
.jw-card h3 { margin-top: 0; }

/* ---- 두 가지 뷰 ---- */
.jw-views { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: center; margin-top: 30px; }
.jw-views__arrow { text-align: center; font-size: 22px; color: var(--jw-ink-3); }
.jw-views__cap { margin-top: 8px; font-size: 13px; color: var(--jw-ink-3); text-align: center; }

/* ---- 연동 ---- */
.jw-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.jw-chip {
  border: 1px solid var(--jw-line);
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 15px;
  color: var(--jw-ink-2);
  background: #fff;
}

/* ---- 요금 ---- */
.jw-toggle { display: inline-flex; padding: 4px; border: 1px solid var(--jw-line); border-radius: 999px; background: #fff; margin: 6px 0 22px; }
.jw-toggle button {
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  color: var(--jw-ink-3);
  padding: 9px 20px;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.jw-toggle button[aria-pressed='true'] { background: var(--jw-ink); color: #fff; }
/* ★연간 결제가 얼마나 싼지 «숫자로» 보인다(형님 확정 2026-08-13).
   종전엔 「연간 결제 기준입니다」만 있어서 실제 17.9~18.3% 할인을 사용자가 직접 계산해야 알았다.
   할인을 더 주는 대신 **있는 할인을 보이게** 하는 쪽을 택했다. */
/* ★추천 플랜 표시 — «가장 많이 선택»은 취향이 아니라 실측이다(프리미엄 70곳으로 최다).
   열 머리 아래에 작게 붙인다. 색을 새로 만들지 않고 브랜드색 하나만 쓴다. */
.jw-pick {
  display: block; margin-top: 4px;
  font-size: 10.5px; font-weight: 700; letter-spacing: -.01em;
  color: var(--jw-accent-ink);
}
/* ★프로모션 줄만 떼어 눈에 띄게 — 회색 주석 3줄에 섞이면 «가장 중요한 것»이 묻힌다. */
.jw-promo {
  display: inline-block; margin-top: 8px; padding: 6px 12px;
  background: #FFF6ED; border: 1px solid #FFD9AE; border-radius: 8px;
  color: var(--jw-accent-ink); font-size: 12.5px; font-weight: 700; letter-spacing: -.01em;
}
.jw-promo em { font-style: normal; font-weight: 500; color: var(--jw-ink-2); }
.jw-save {
  margin-left: 7px; padding: 2px 7px; border-radius: 999px;
  background: #FFF1E0; color: #B35800;
  font-size: 11px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap;
}
.jw-toggle button[aria-pressed='true'] .jw-save { background: rgba(255,255,255,.16); color: #FFCF9B; }
.jw-toggle button:hover { color: var(--jw-ink); }
.jw-toggle button[aria-pressed='true']:hover { color: #fff; }

.jw-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.jw-table { width: 100%; border-collapse: collapse; min-width: 640px; background: #fff; }
.jw-table th, .jw-table td {
  border: 1px solid var(--jw-line);
  padding: 13px 14px;
  text-align: center;
  font-size: 15px;
}
.jw-table thead th { background: var(--jw-surface-2); font-weight: 700; }
.jw-table tbody th { text-align: left; font-weight: 600; color: var(--jw-ink-2); background: #fff; }
.jw-table td.jw-yes { color: var(--jw-accent-ink); font-weight: 700; }
.jw-table td.jw-no { color: #b9b9c0; }
.jw-price { font-weight: 800; font-size: 17px; }
.jw-price--hl { color: var(--jw-accent-ink); }

/* ---- FAQ ---- */
.jw-faq { border-top: 1px solid var(--jw-line); margin-top: 26px; }
.jw-faq details { border-bottom: 1px solid var(--jw-line); }
.jw-faq summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 40px 20px 0;
  font-size: 17px;
  font-weight: 700;
  position: relative;
}
.jw-faq summary::-webkit-details-marker { display: none; }
.jw-faq summary::after {
  content: '+';
  position: absolute;
  right: 6px; top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  font-weight: 400;
  color: var(--jw-ink-3);
}
.jw-faq details[open] summary::after { content: '−'; }
.jw-faq summary:hover { color: var(--jw-accent-ink); }
.jw-faq__a { padding: 0 0 20px; color: var(--jw-ink-2); font-size: 16px; }

/* ---- 최종 CTA ---- */
.jw-final { background: var(--jw-dark); color: #fff; text-align: center; }
.jw-final .jw-h2 { color: #fff; }
.jw-final .jw-lead { color: rgba(255,255,255,.76); }
.jw-final .jw-cta-row { justify-content: center; }
.jw-final .jw-note { color: rgba(255,255,255,.5); margin-top: 18px; }
.jw-final a.jw-textlink { color: #ffc688; border-bottom-color: rgba(255,198,136,.4); }

/* ---- 스크롤 진입 페이드인 (캐러셀·패럴랙스 금지) ---- */
.jw-reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.jw-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .jw-reveal { opacity: 1; transform: none; transition: none; }
  .jw-btn, .jw-btn:hover { transition: none; transform: none; }
}

/* ---- 반응형 : 768px 이하는 세로 스택 ---- */
@media (min-width: 769px) {
  .jw-hero__grid { grid-template-columns: 1.05fr .95fr; gap: 52px; }
  .jw-feature { grid-template-columns: 1fr 1fr; gap: 46px; }
  .jw-feature--flip .jw-feature__text { order: 2; }
  .jw-feature--flip .jw-feature__media { order: 1; }
  .jw-cards { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .jw-views { grid-template-columns: 1fr auto 1fr; gap: 22px; }
}
@media (max-width: 768px) {
  .jw { --jw-gap-section: 64px; }
  .jw-hero { padding: 52px 0 var(--jw-gap-section); }
  .jw-feature + .jw-feature { margin-top: 52px; }
  .jw-btn { width: 100%; }
  .jw-cta-row { gap: 10px; }
}