@charset "UTF-8";
/* ==========================================================================
   K-HACCP homepage_v2 — 공통 스타일
   디자인 정본: homepage_v2/DESIGN_apple.txt  (Refero "Apple (España)" 실측)
   지시(2026-09-12): "애플을 그대로 따라라." — 가독성 예외(본문 키우기·연회색 금지·
   터치타깃 44px 강제)는 취소됨. 아래는 DESIGN_apple.txt 수치를 그대로 옮긴 것이다.

   그대로 적용한 것
     · 본문 17px / 400 / lh 25px(1.47) / 자간 -0.374px(-0.022em)
     · 타입 스케일 display 96 · heading-lg 80 · heading 56 · heading-sm 40 ·
       body-lg 28 · body 21 · caption 14 · micro 12  (모바일만 비율 축소)
     · 음수 자간 96px→-1.44px(-0.015em), 56px→-0.28px(-0.005em)
     · 보조 텍스트 Mid Gray #707070 · 내비 Deep Gray #474747
     · 버튼 알약(980px) · 패딩 가로 16 / 세로 11 · 17px
     · 카드·이미지 반경 28px · 배지 36px · 링크 10px
     · 그림자 0 · 구분선 0 — 흰색 #FFFFFF ↔ 회색 #F5F5F7 배경 교대로만 리듬
     · 섹션 간격 100~120px · 최대 폭 1200px · 카드 패딩 28px · 요소 간격 8~10px
     · 파랑 #0071E3 은 '채운 CTA 버튼'에만, 본문 링크는 #0066CC, 상태는 #B64400
   바꾼 것은 폰트뿐 (라이선스): 한글 Pretendard · 라틴 Inter · 없으면 시스템 고딕.
   ========================================================================== */

:root{
  /* ---- 색 : DESIGN_apple.txt Tokens — Colors 그대로 ---- */
  --kh-paper:      #FFFFFF;   /* Paper          — 기본 캔버스·카드면 */
  --kh-canvas:     #F5F5F7;   /* Canvas         — 교대로 깔리는 회색 띠 */
  --kh-wash:       #E8E8ED;   /* Cool Wash      — 옅은 버튼 바탕·hover */
  --kh-faded:      #FAFAFC;   /* Faded Surface  — 내비 펼침 면 */
  --kh-ink:        #1D1D1F;   /* Primary Ink    — 제목·본문·버튼 글자 */
  --kh-deep-gray:  #474747;   /* Deep Gray      — 내비 글자·아이콘 */
  --kh-mid-gray:   #707070;   /* Mid Gray       — 보조 텍스트·muted 라벨 */
  --kh-hairline:   #D6D6D6;   /* Hairline       — 아주 드물게 쓰는 실선 */
  --kh-action:     #0071E3;   /* Electric Blue  — 채운 CTA 버튼 전용 */
  --kh-action-d:   #0077ED;   /* 버튼 hover */
  --kh-link:       #0066CC;   /* Link Blue      — 본문 링크 글자 */
  --kh-ember:      #B64400;   /* Ember          — 상태 배지·'확인 필요' */

  /* ---- 기존 변수명 유지(빌드 소스 인라인 style 호환) ---- */
  --kh-bg:        var(--kh-paper);
  --kh-bg-tint:   var(--kh-canvas);
  --kh-ink-sub:   var(--kh-mid-gray);
  --kh-head:      var(--kh-ink);
  --kh-line:      var(--kh-hairline);
  --kh-primary:   var(--kh-action);
  --kh-primary-d: var(--kh-action-d);
  --kh-error:     var(--kh-ember);
  --kh-focus:     var(--kh-action);
  --kh-caution:   var(--kh-ember);

  /* ---- 면(surface) : 띠 색과 반대면을 카드에 깐다 ---- */
  --kh-surface:   var(--kh-canvas);

  /* ---- 반경 (Border Radius 표 그대로) ---- */
  --kh-r-card:  28px;   /* cards · productImages */
  --kh-r-badge: 36px;   /* badges */
  --kh-r-pill:  980px;  /* buttons */
  --kh-r-link:  10px;   /* links */
  --kh-r-field: 12px;   /* 입력칸(애플 미지정 — 링크 10px 하한 준수) */

  /* ---- 배치 (base unit 4px) ---- */
  --kh-max:      1200px;
  --kh-prose:    720px;
  --kh-pad:      40px;
  --kh-sec:      120px;   /* 섹션 간격 100~120px */
  --kh-gap-card: 20px;
  --kh-gap-el:   10px;    /* 요소 간격 8~10px */

  /* ---- 글자 : Type Scale 표 그대로 (모바일만 비율 축소) ---- */
  --kh-display:  clamp(40px, 6.7vw, 96px);   /* display    96 / lh100 / -1.44px */
  --kh-h1:       clamp(32px, 3.9vw, 56px);   /* heading    56 / lh 60 / -0.28px */
  --kh-h2:       clamp(28px, 2.8vw, 40px);   /* heading-sm 40 / lh 48 */
  --kh-h3:       clamp(21px, 1.67vw, 24px);  /* 24 / lh 1.17 */
  --kh-herosub:  clamp(21px, 1.95vw, 28px);  /* body-lg    28 / lh 32 / +0.196px */
  --kh-lead:     clamp(19px, 1.46vw, 21px);  /* body       21 / lh 29 / +0.231px */
  --kh-body:     17px;                       /* body-sm    17 / lh 25 / -0.374px */
  --kh-btn:      17px;
  --kh-small:    17px;                       /* 카드 보조 본문도 17px (애플 규정) */
  --kh-table:    17px;
  --kh-caption:  14px;                       /* caption    14 / lh 18 / -0.224px */
  --kh-micro:    12px;                       /* micro      12 / lh 16 / -0.12px */
}

@media (max-width: 767px){
  :root{
    --kh-pad: 22px; --kh-sec: 80px; --kh-gap-card: 16px;
  }
}

/* ---- reset ---- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--kh-paper);
  color:var(--kh-ink);
  /* 애플 폰트명은 쓰지 않는다(라이선스). 라틴=Inter, 한글=Pretendard, 없으면 시스템 고딕 */
  font-family:
    Inter, "Inter Variable",
    Pretendard, "Pretendard Variable",
    -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
    "Segoe UI", Roboto, "Malgun Gothic", "맑은 고딕", sans-serif;
  font-size:var(--kh-body);
  font-weight:400;
  line-height:1.47;             /* 17px → 25px */
  letter-spacing:-0.022em;      /* 17px → -0.374px */
  word-break:keep-all;
  overflow-wrap:anywhere;
  -webkit-font-smoothing:antialiased;
}
img,svg{ max-width:100%; height:auto; display:block; }
img{ border-radius:var(--kh-r-card); }

h1,h2,h3,h4{ color:var(--kh-ink); margin:0 0 20px; }
h1{ font-size:var(--kh-h1); font-weight:700; line-height:1.07; letter-spacing:-0.005em; }
h2{ font-size:var(--kh-h2); font-weight:600; line-height:1.2;  letter-spacing:0; }
h3{ font-size:var(--kh-h3); font-weight:600; line-height:1.17; letter-spacing:0.007em; }
h4{ font-size:var(--kh-body); font-weight:600; line-height:1.4; }
p{ margin:0 0 16px; }
p:last-child{ margin-bottom:0; }
ul,ol{ margin:0 0 16px; padding-left:1.3em; }
li{ margin:0 0 var(--kh-gap-el); }
li:last-child{ margin-bottom:0; }
strong{ font-weight:600; color:var(--kh-ink); }
hr{ border:0; border-top:1px solid var(--kh-hairline); margin:48px 0; }
code{ font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:.94em; }
table, .kh-fact__n, .kh-footer__tel{ font-variant-numeric:tabular-nums; }

:focus-visible{ outline:3px solid var(--kh-focus); outline-offset:3px; border-radius:var(--kh-r-link); }

.kh-skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--kh-ink); color:#fff; padding:11px 16px; border-radius:0 0 18px 0;
  display:inline-flex; align-items:center; text-decoration:none;
}
.kh-skip:focus{ left:0; }

/* ---- 공통 컨테이너 ---- */
.kh-wrap{ width:100%; max-width:var(--kh-max); margin:0 auto; padding-left:var(--kh-pad); padding-right:var(--kh-pad); }
.kh-prose{ max-width:var(--kh-prose); }
.kh-section{ padding-top:var(--kh-sec); padding-bottom:var(--kh-sec); background:var(--kh-paper); }

/* 띠 교대 — 이것이 구분선을 대신한다 (Section Divider (Implicit)) */
.kh-section--tint{ background:var(--kh-canvas); --kh-surface:var(--kh-paper); }
/* 마무리 CTA 띠: 애플 Surfaces 표에 어두운 면이 없으므로 흰 띠 + 채운 파랑 버튼 1개 */
.kh-section--deep{ background:var(--kh-paper); --kh-surface:var(--kh-canvas); color:var(--kh-ink); }
.kh-section--deep h1,.kh-section--deep h2,.kh-section--deep h3{ color:var(--kh-ink); }
.kh-section--deep .kh-lead,.kh-section--deep p{ color:var(--kh-ink); }
.kh-section--line{ border:0; }   /* 애플: 구분선 대신 배경 교대 */

/* Section Header — 28~32px weight 600, 뒤에 21px 보조 문단 */
.kh-eyebrow{
  display:block; font-size:var(--kh-body); font-weight:400;
  color:var(--kh-ink); letter-spacing:-0.022em; margin:0 0 10px; padding:0; border:0;
}
.kh-lead{
  font-size:var(--kh-lead); font-weight:600; line-height:1.38; letter-spacing:0.011em;
  color:var(--kh-ink); max-width:var(--kh-prose);
}
.kh-small{ font-size:var(--kh-small); color:var(--kh-mid-gray); }
.kh-center{ text-align:center; }
.kh-mt{ margin-top:40px; }
.kh-mt-s{ margin-top:20px; }
.kh-mt-l{ margin-top:56px; }

/* ==========================================================================
   Global Navigation Bar — 44px 고정 바 · 12px 링크 · 스크롤 시 #FAFAFC + blur
   ========================================================================== */
.kh-header{
  position:sticky; top:0; z-index:100;
  background:rgba(250,250,252,.82);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--kh-hairline);
}
.kh-header__bar{ display:flex; align-items:center; gap:var(--kh-gap-el); min-height:44px; }
.kh-brand{ display:flex; align-items:center; gap:8px; text-decoration:none; color:var(--kh-ink); flex:0 0 auto; }
.kh-brand__mark{ width:26px; height:26px; flex:0 0 auto; border-radius:7px; }
.kh-brand__name{ font-size:17px; font-weight:600; letter-spacing:-0.022em; line-height:1.1; }
.kh-brand__sub{ display:block; font-size:var(--kh-micro); font-weight:400; color:var(--kh-mid-gray); letter-spacing:-0.01em; }

.kh-nav{ margin-left:auto; }
.kh-nav__list{ display:flex; align-items:center; gap:var(--kh-gap-el); list-style:none; margin:0; padding:0; }
.kh-nav__list li{ margin:0; }
.kh-nav__link{
  display:inline-flex; align-items:center; padding:6px 8px;
  font-size:var(--kh-micro); font-weight:400; color:var(--kh-ink); text-decoration:none;
  border-radius:var(--kh-r-link); white-space:nowrap; letter-spacing:-0.01em;
}
.kh-nav__link:hover{ color:var(--kh-deep-gray); }
.kh-nav__link[aria-current="page"]{ color:var(--kh-deep-gray); border-bottom:1px solid currentColor; border-radius:0; }
.kh-header__cta{ flex:0 0 auto; margin-left:8px; }
.kh-header__cta .kh-btn{ font-size:var(--kh-micro); padding:7px 14px; }

.kh-burger{
  display:none; margin-left:auto; align-items:center; justify-content:center; gap:8px;
  padding:11px 16px;
  background:transparent; border:1px solid var(--kh-ink); border-radius:var(--kh-r-pill);
  font-size:var(--kh-caption); font-weight:400; color:var(--kh-ink); cursor:pointer;
  font-family:inherit; letter-spacing:-0.016em;
}
.kh-burger:hover{ background:var(--kh-wash); }
.kh-burger__icon{ width:18px; height:12px; position:relative; display:inline-block; }
.kh-burger__icon span{ position:absolute; left:0; width:100%; height:1.5px; background:var(--kh-ink); border-radius:2px; }
.kh-burger__icon span:nth-child(1){ top:0; } .kh-burger__icon span:nth-child(2){ top:5px; } .kh-burger__icon span:nth-child(3){ top:10px; }

.kh-mobilenav{ display:none; background:var(--kh-faded); padding-bottom:20px; }
.kh-mobilenav[data-open="true"]{ display:block; }
.kh-mobilenav__list{ list-style:none; margin:0; padding:8px 0 0; }
.kh-mobilenav__list li{ margin:0; }
.kh-mobilenav__link{
  display:flex; align-items:center; padding:12px 4px;
  font-size:var(--kh-body); font-weight:400; color:var(--kh-ink); text-decoration:none;
  letter-spacing:-0.022em;
}
.kh-mobilenav__link[aria-current="page"]{ color:var(--kh-link); }
.kh-mobilenav__group{
  font-size:var(--kh-micro); font-weight:500; color:var(--kh-mid-gray);
  letter-spacing:-0.01em; padding:20px 4px 4px; border:0;
}
.kh-mobilenav .kh-btn{ margin-top:20px; }

@media (max-width: 1099px){
  .kh-nav, .kh-header__cta{ display:none; }
  .kh-burger{ display:inline-flex; }
}

/* ==========================================================================
   Filled Pill Button / Ghost Pill Button
   패딩 가로 16 · 세로 11 · 17px · 반경 980px · 섹션당 채운 버튼 1개
   ========================================================================== */
.kh-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 16px; border-radius:var(--kh-r-pill);
  font-size:var(--kh-btn); font-weight:400; line-height:1.3; text-align:center;
  letter-spacing:-0.022em;
  text-decoration:none; cursor:pointer; border:1px solid transparent;
  font-family:inherit; transition:background-color .18s ease, color .18s ease;
}
@media (prefers-reduced-motion: reduce){ .kh-btn{ transition:none; } }
.kh-btn--primary{ background:var(--kh-action); color:#fff; border-color:var(--kh-action); }
.kh-btn--primary:hover{ background:var(--kh-action-d); border-color:var(--kh-action-d); }
.kh-btn--ghost{ background:transparent; color:var(--kh-ink); border-color:var(--kh-ink); }
.kh-btn--ghost:hover{ background:var(--kh-wash); }
.kh-btn--plain{ background:var(--kh-wash); color:var(--kh-ink); border-color:transparent; }
.kh-btn--plain:hover{ background:#DCDCE3; }
/* 마무리 CTA 띠가 흰 띠가 되었으므로 채운 파랑(섹션당 1개)으로 둔다 */
.kh-btn--onDeep{ background:var(--kh-action); color:#fff; border-color:var(--kh-action); }
.kh-btn--onDeep:hover{ background:var(--kh-action-d); border-color:var(--kh-action-d); }
.kh-btn--block{ width:100%; }
.kh-btns{ display:flex; flex-wrap:wrap; gap:var(--kh-gap-el); margin-top:28px; }
@media (max-width: 767px){
  .kh-btns{ flex-direction:column; gap:var(--kh-gap-el); }
  .kh-btns .kh-btn{ width:100%; }
}

/* Text Link with Arrow — 바탕·테두리 없음, #0066CC, hover 때만 밑줄 */
.kh-link{
  display:inline; color:var(--kh-link); font-weight:400; text-decoration:none;
  border-radius:var(--kh-r-link);
}
.kh-link:hover{ text-decoration:underline; text-underline-offset:4px; }
.kh-link--after::after{ content:" \203A"; font-size:1.2em; line-height:1; margin-left:.2em; }

/* ==========================================================================
   Product Hero — 흰 배경 · 거대한 제목 · 그 아래 제품 이미지
   ========================================================================== */
.kh-hero{ background:var(--kh-paper); }
.kh-hero__grid{
  display:grid; grid-template-columns:1fr; gap:56px; align-items:start;
  padding-top:calc(var(--kh-sec) - 24px); padding-bottom:var(--kh-sec);
}
.kh-hero h1{
  font-size:var(--kh-display); font-weight:600; line-height:1.04;
  letter-spacing:-0.015em; margin-bottom:24px;
}
.kh-hero__sub{
  font-size:var(--kh-herosub); font-weight:600; line-height:1.14; letter-spacing:0.007em;
  color:var(--kh-ink); margin-bottom:32px; max-width:22em;
}
.kh-hero .kh-note{ max-width:520px; }

.kh-pagehead{ background:var(--kh-canvas); --kh-surface:var(--kh-paper); padding-top:96px; padding-bottom:80px; }
.kh-pagehead h1{ margin-bottom:16px; }
.kh-crumb{ font-size:var(--kh-caption); line-height:1.28; letter-spacing:-0.016em; color:var(--kh-mid-gray); margin:0 0 16px; }
.kh-crumb a{ color:var(--kh-link); text-decoration:none; }
.kh-crumb a:hover{ text-decoration:underline; }
@media (max-width:767px){ .kh-pagehead{ padding-top:56px; padding-bottom:48px; } }

/* ==========================================================================
   Feature Showcase Card — 반경 28 · 테두리 0 · 그림자 0 · 띠와 반대면
   ========================================================================== */
.kh-cards{ display:grid; gap:var(--kh-gap-card); }
.kh-cards--2{ grid-template-columns:repeat(2,1fr); }
.kh-cards--3{ grid-template-columns:repeat(3,1fr); }
.kh-cards--4{ grid-template-columns:repeat(4,1fr); }
@media (max-width: 959px){ .kh-cards--3,.kh-cards--4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 767px){ .kh-cards--2,.kh-cards--3,.kh-cards--4{ grid-template-columns:1fr; } }

.kh-card{ background:var(--kh-surface); border:0; border-radius:var(--kh-r-card); padding:28px; }
.kh-card h3{ margin-bottom:10px; }
.kh-card__tag{
  display:inline-block; font-size:var(--kh-caption); font-weight:500;
  color:var(--kh-mid-gray); background:transparent;
  border-radius:var(--kh-r-badge); padding:0; margin-bottom:10px; letter-spacing:-0.016em;
}
.kh-card--accent{ border:0; }   /* 애플: 장식 테두리 없음 */

/* ==========================================================================
   번호 단계 목록 (애플 미지정 — 카드 규칙 + 무채색으로 맞춤)
   ========================================================================== */
.kh-steps{ list-style:none; margin:0; padding:0; counter-reset:khstep; display:grid; gap:var(--kh-gap-card); }
.kh-steps > li{
  counter-increment:khstep; position:relative; margin:0;
  padding:28px 28px 28px 88px; background:var(--kh-surface);
  border:0; border-radius:var(--kh-r-card);
}
.kh-steps > li::before{
  content:counter(khstep);
  position:absolute; left:28px; top:28px;
  width:40px; height:40px; border-radius:50%;
  background:var(--kh-ink); color:#fff;
  font-size:var(--kh-body); font-weight:600;
  display:flex; align-items:center; justify-content:center;
  font-variant-numeric:tabular-nums;
}
.kh-steps h3{ margin-bottom:8px; }
@media (max-width: 767px){
  .kh-steps > li{ padding:24px 22px 24px 76px; }
  .kh-steps > li::before{ left:22px; top:24px; width:38px; height:38px; }
}

/* ==========================================================================
   체크리스트 — 되는 것(잉크) / 안 되는 것(Ember)
   ========================================================================== */
.kh-check{ list-style:none; margin:0; padding:0; display:grid; gap:var(--kh-gap-el); }
.kh-check li{ position:relative; padding-left:34px; margin:0; }
.kh-check li::before{
  content:""; position:absolute; left:0; top:.3em;
  width:22px; height:22px; border-radius:7px; background:var(--kh-wash);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D1D1F' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size:16px 16px; background-position:center; background-repeat:no-repeat;
}
.kh-section--tint .kh-check li::before{ background-color:var(--kh-paper); }
.kh-check--x li::before{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B64400' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
  background-size:16px 16px; background-position:center; background-repeat:no-repeat;
}

/* ==========================================================================
   표 (애플 미지정 — hairline 최소 사용 · 모바일 세로 재배치로 가로 스크롤 방지)
   ========================================================================== */
.kh-table{
  width:100%; border-collapse:separate; border-spacing:0;
  font-size:var(--kh-table); background:transparent;
  border-radius:var(--kh-r-card); overflow:hidden;
}
.kh-table caption{ text-align:left; font-size:var(--kh-caption); color:var(--kh-mid-gray); padding-bottom:12px; letter-spacing:-0.016em; }
.kh-table th,.kh-table td{
  border:0; border-bottom:1px solid var(--kh-hairline);
  padding:18px 20px; text-align:left; vertical-align:top; line-height:1.47;
  background:var(--kh-surface);
}
.kh-table thead th{ background:var(--kh-ink); color:#fff; font-weight:600; border-bottom:0; }
.kh-table tbody th{ background:var(--kh-wash); color:var(--kh-ink); font-weight:600; width:34%; }
.kh-table tbody tr:last-child th,.kh-table tbody tr:last-child td{ border-bottom:0; }
.kh-table--spec tbody th{ width:38%; }
@media (max-width: 767px){
  .kh-table{ border-radius:0; overflow:visible; }
  .kh-table, .kh-table tbody, .kh-table tr, .kh-table td, .kh-table th{ display:block; width:100%; }
  .kh-table thead{ position:absolute; left:-9999px; }
  .kh-table tr{ border:0; border-radius:var(--kh-r-card); margin-bottom:16px; overflow:hidden; background:var(--kh-surface); }
  .kh-table th,.kh-table td{ border:0; border-bottom:1px solid var(--kh-hairline); padding:16px 20px; }
  .kh-table tr > *:last-child{ border-bottom:0; }
  .kh-table tbody th{ width:100%; }
  .kh-table td[data-label]::before{
    content:attr(data-label); display:block;
    font-size:var(--kh-caption); font-weight:500; color:var(--kh-mid-gray); margin-bottom:4px;
    letter-spacing:-0.016em;
  }
  .kh-table--spec td[data-label]::before{ content:none; }
}

/* ==========================================================================
   Color Variant Showcase 응용 — 두 장 나란히, 테두리·그림자 없음
   ========================================================================== */
.kh-compare{ display:grid; grid-template-columns:1fr 1fr; gap:var(--kh-gap-card); }
@media (max-width: 767px){ .kh-compare{ grid-template-columns:1fr; } }
.kh-compare__col{ border:0; border-radius:var(--kh-r-card); padding:28px; background:var(--kh-surface); }
.kh-compare__col--now{ background:var(--kh-wash); }
.kh-compare__label{
  display:inline-block; font-size:var(--kh-caption); font-weight:500; letter-spacing:-0.016em;
  padding:5px 14px; border-radius:var(--kh-r-badge); margin-bottom:16px;
}
.kh-compare__col--now .kh-compare__label{ background:var(--kh-paper); color:var(--kh-mid-gray); }
.kh-compare__col--new .kh-compare__label{ background:var(--kh-ink); color:#fff; }

/* ==========================================================================
   콜아웃 / 인용 / 배지
   ========================================================================== */
.kh-note{ border:0; background:var(--kh-surface); border-radius:var(--kh-r-card); padding:28px; }
.kh-note h3{ margin-bottom:10px; }
.kh-warn{ border:0; background:var(--kh-surface); border-radius:var(--kh-r-card); padding:28px; }
.kh-warn h3{ color:var(--kh-ember); margin-bottom:10px; }
.kh-quote{
  border:0; margin:0; padding:0;
  font-size:var(--kh-herosub); line-height:1.14; color:var(--kh-ink); font-weight:600;
  letter-spacing:0.007em;
}
.kh-quote cite{
  display:block; margin-top:14px; font-size:var(--kh-body); font-style:normal;
  font-weight:400; color:var(--kh-mid-gray); letter-spacing:-0.022em; line-height:1.47;
}

/* "Nuevo" Badge — 바탕·테두리 없는 인라인 글자, 12~14px weight 500, Ember */
.kh-badge{
  display:inline; font-size:var(--kh-caption); font-weight:500; line-height:1.28;
  padding:0; border:0; border-radius:var(--kh-r-badge); background:transparent;
  white-space:nowrap; letter-spacing:-0.016em;
}
.kh-badge--todo{ color:var(--kh-ember); }
.kh-badge--ok{ color:var(--kh-ink); }

/* {{변수}} 자리 — 확정 전 공개 금지 표시 (배지 반경 36px) */
.kh-var{
  display:inline-block; font-weight:500; color:var(--kh-ember);
  background:transparent; border:1px solid var(--kh-ember); border-radius:var(--kh-r-badge);
  padding:1px 14px;
}
.kh-varline{ display:inline-flex; flex-wrap:wrap; align-items:center; gap:8px; }
.kh-varnote{ display:block; font-size:var(--kh-caption); line-height:1.28; color:var(--kh-mid-gray); margin-top:8px; letter-spacing:-0.016em; }

/* ==========================================================================
   제품 화면 자리 (캡처 대기) — productImages 반경 28px
   ========================================================================== */
.kh-shot{ margin:0; }
.kh-shot img{ border-radius:var(--kh-r-card); }
.kh-shot__box{
  position:relative; width:100%; background:var(--kh-surface);
  border:1px dashed var(--kh-hairline); border-radius:var(--kh-r-card);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:28px; gap:var(--kh-gap-el);
}
.kh-shot__box--wide{ aspect-ratio:1040 / 650; }
.kh-shot__box--phone{ aspect-ratio:390 / 780; max-width:330px; margin:0 auto; }
.kh-shot__icon{ width:48px; height:48px; opacity:.5; }
.kh-shot__title{ font-size:var(--kh-body); font-weight:500; color:var(--kh-ember); letter-spacing:-0.022em; }
.kh-shot__what{ font-size:var(--kh-body); color:var(--kh-mid-gray); max-width:46em; }
.kh-shot__size{ font-size:var(--kh-caption); color:var(--kh-mid-gray); font-weight:400; letter-spacing:-0.016em; }
.kh-shot figcaption{ font-size:var(--kh-caption); line-height:1.28; color:var(--kh-mid-gray); padding-top:14px; letter-spacing:-0.016em; }
@media (max-width:767px){ .kh-shot__box{ padding:22px; gap:8px; } .kh-shot__icon{ width:40px; height:40px; } }

/* ==========================================================================
   FAQ 아코디언 (애플 미지정 — 카드 규칙으로 맞춤)
   ========================================================================== */
.kh-faq{ display:grid; gap:var(--kh-gap-el); }
.kh-faq__item{ border:0; border-radius:var(--kh-r-card); background:var(--kh-surface); overflow:hidden; }
.kh-faq__q{
  display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%;
  padding:20px 28px; margin:0;
  background:transparent; border:0; cursor:pointer; text-align:left;
  font-family:inherit; font-size:var(--kh-lead); font-weight:600; color:var(--kh-ink);
  line-height:1.38; letter-spacing:0.011em;
}
.kh-faq__q:hover{ background:rgba(0,0,0,.035); }
.kh-faq__sign{ flex:0 0 auto; width:24px; height:24px; position:relative; }
.kh-faq__sign::before,.kh-faq__sign::after{
  content:""; position:absolute; left:50%; top:50%; background:var(--kh-ink); border-radius:2px;
  transform:translate(-50%,-50%);
}
.kh-faq__sign::before{ width:17px; height:1.5px; }
.kh-faq__sign::after{ width:1.5px; height:17px; }
.kh-faq__q[aria-expanded="true"] .kh-faq__sign::after{ display:none; }
.kh-faq__a{ padding:0 28px 24px; border:0; }
.kh-faq__a[hidden]{ display:none; }
@media (max-width:767px){
  .kh-faq__q{ padding:18px 22px; }
  .kh-faq__a{ padding:0 22px 22px; }
}

/* ==========================================================================
   숫자·지표 스트립
   ========================================================================== */
.kh-facts{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--kh-gap-card); }
@media (max-width:767px){ .kh-facts{ grid-template-columns:1fr; } }
.kh-fact{ background:var(--kh-surface); border:0; border-radius:var(--kh-r-card); padding:28px; }
.kh-fact__n{ display:block; font-size:var(--kh-h2); font-weight:600; color:var(--kh-ink); line-height:1.2; margin-bottom:8px; letter-spacing:0; }
.kh-fact__t{ font-size:var(--kh-body); color:var(--kh-mid-gray); }

/* ==========================================================================
   페이지 하단 이동
   ========================================================================== */
.kh-pagenav{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:var(--kh-gap-card); }
.kh-pagenav a{
  display:flex; flex-direction:column; justify-content:center; gap:4px;
  padding:24px 28px; text-decoration:none;
  border:0; border-radius:var(--kh-r-card); background:var(--kh-surface); color:var(--kh-ink);
}
.kh-pagenav a:hover{ background:var(--kh-wash); }
.kh-pagenav__k{ font-size:var(--kh-caption); font-weight:400; color:var(--kh-mid-gray); letter-spacing:-0.016em; }
.kh-pagenav__v{ font-size:var(--kh-h3); font-weight:600; letter-spacing:0.007em; line-height:1.17; }

/* ==========================================================================
   Footer Legal Block — 배경 #F5F5F7 · 12px · #707070 · lh 1.33 · 링크 #0066CC
   ========================================================================== */
.kh-footer{
  background:var(--kh-canvas); --kh-surface:var(--kh-paper);
  color:var(--kh-mid-gray); font-size:var(--kh-micro); line-height:1.33;
  letter-spacing:-0.01em;
  border-top:1px solid var(--kh-hairline);
  padding-top:64px; padding-bottom:48px;
}
.kh-footer h2,.kh-footer h3{ color:var(--kh-ink); }
.kh-footer__grid{ display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:48px; }
@media (max-width:959px){ .kh-footer__grid{ grid-template-columns:1fr 1fr; gap:32px; } }
@media (max-width:600px){ .kh-footer__grid{ grid-template-columns:1fr; } }
.kh-footer__h{ font-size:var(--kh-micro); font-weight:600; color:var(--kh-ink); letter-spacing:-0.01em; margin:0 0 10px; }
.kh-footer__list{ list-style:none; margin:0; padding:0; }
.kh-footer__list li{ margin:0; }
.kh-footer a{ color:var(--kh-link); }
.kh-footer__list a{
  display:inline-flex; align-items:center; padding:5px 0;
  color:var(--kh-link); text-decoration:none; font-weight:400;
}
.kh-footer__list a:hover{ text-decoration:underline; text-underline-offset:3px; }
.kh-footer__biz{ margin:0; line-height:1.7; color:var(--kh-mid-gray); }
.kh-footer__biz b{ color:var(--kh-ink); font-weight:600; }
.kh-footer__tel{
  display:inline-flex; align-items:center;
  font-size:var(--kh-herosub); font-weight:600; color:var(--kh-ink); text-decoration:none;
  letter-spacing:0.007em; line-height:1.14;
}
.kh-footer__tel:hover{ color:var(--kh-link); }
.kh-footer__bottom{
  border-top:1px solid var(--kh-hairline); margin-top:48px; padding-top:24px;
  display:flex; flex-wrap:wrap; gap:12px 24px; align-items:center; justify-content:space-between;
}
.kh-footer__optout{
  background:var(--kh-paper); border:0; border-radius:var(--kh-r-card);
  padding:24px 28px; margin-top:32px; color:var(--kh-mid-gray);
}

/* ==========================================================================
   모바일 하단 고정 CTA + 맨 위로
   ========================================================================== */
.kh-sticky{ display:none; }
@media (max-width:767px){
  body[data-sticky="on"] .kh-sticky{
    display:block; position:fixed; left:0; right:0; bottom:0; z-index:90;
    background:rgba(250,250,252,.9);
    -webkit-backdrop-filter:saturate(180%) blur(20px);
    backdrop-filter:saturate(180%) blur(20px);
    border-top:1px solid var(--kh-hairline);
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  }
  body[data-sticky="on"]{ padding-bottom:80px; }
}
.kh-top{
  position:fixed; right:24px; bottom:24px; z-index:95;
  width:48px; height:48px; border-radius:50%;
  background:rgba(250,250,252,.9); border:1px solid var(--kh-hairline); color:var(--kh-ink);
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  display:none; align-items:center; justify-content:center; cursor:pointer;
  font-family:inherit; font-size:var(--kh-micro); font-weight:400; line-height:1.16; text-align:center;
  letter-spacing:-0.01em;
}
.kh-top[data-show="true"]{ display:flex; }
.kh-top:hover{ background:var(--kh-wash); }
@media (max-width:767px){
  body[data-sticky="on"] .kh-top{ bottom:88px; }
  .kh-top{ right:16px; }
}

/* ==========================================================================
   기타
   ========================================================================== */
.kh-sronly{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.kh-divider{ height:1px; background:var(--kh-hairline); border:0; margin:0; }
.kh-source{ font-size:var(--kh-caption); line-height:1.28; color:var(--kh-mid-gray); border-top:1px solid var(--kh-hairline); padding-top:20px; margin-top:40px; letter-spacing:-0.016em; }
.kh-source a{ color:var(--kh-link); }

.kh-formfield{ display:block; margin-bottom:24px; }
.kh-formfield__label{ display:block; font-weight:600; color:var(--kh-ink); margin-bottom:8px; }
.kh-formfield__hint{ display:block; font-size:var(--kh-caption); line-height:1.28; color:var(--kh-mid-gray); margin-bottom:8px; font-weight:400; letter-spacing:-0.016em; }
.kh-input,.kh-select,.kh-textarea{
  width:100%; padding:11px 16px;
  font-family:inherit; font-size:var(--kh-body); color:var(--kh-ink); letter-spacing:-0.022em;
  background:var(--kh-paper); border:1px solid var(--kh-hairline); border-radius:var(--kh-r-field);
}
.kh-input:focus,.kh-select:focus,.kh-textarea:focus{ border-color:var(--kh-action); }
.kh-textarea{ min-height:120px; line-height:1.47; resize:vertical; }
.kh-checkline{ display:flex; align-items:flex-start; gap:var(--kh-gap-el); padding:6px 0; }
.kh-checkline input[type="checkbox"]{ width:20px; height:20px; margin:3px 0 0; flex:0 0 auto; accent-color:var(--kh-action); }
.kh-req{ color:var(--kh-ember); font-weight:500; }

/* ==========================================================================
   모션 (2026-09-12) — 애플식 스크롤 모션
   원칙
     ① 진행형 향상 : 숨기는 규칙은 전부 html[data-motion="on"] 안에만 둔다.
        JS 가 꺼졌거나 kh.js 가 실패하면 data-motion 이 붙지 않으므로(또는 2.5초 뒤 제거)
        아래 규칙이 통째로 무효가 되고 화면은 지금과 똑같이 처음부터 다 보인다.
     ② prefers-reduced-motion: reduce 면 모든 모션이 꺼진다.
        숨김 규칙 자체를 (prefers-reduced-motion: no-preference) 안에 넣었으므로
        reduce 사용자는 '숨겼다가 보여 주는' 단계 없이 즉시 전부 표시된다.
     ③ 애니메이션은 transform·opacity 만 쓴다(레이아웃을 흔들지 않는다).
     ④ 스크롤 이벤트를 쓰지 않는다. 전부 IntersectionObserver.
   애플 이징 : cubic-bezier(.28,.11,.32,1)
   ========================================================================== */

/* ---- 1. 스크롤 진입 페이드업 (거리 20px · 0.7s) ---------------------------- */
@media (prefers-reduced-motion: no-preference){
  html[data-motion="on"] .kh-reveal{
    opacity:0;
    transform:translate3d(0,20px,0);
    transition:opacity .7s cubic-bezier(.28,.11,.32,1), transform .7s cubic-bezier(.28,.11,.32,1);
  }
  html[data-motion="on"] .kh-reveal.is-in{ opacity:1; transform:none; }

  /* 한 줄에 늘어선 카드는 0.07초씩 늦게 등장 */
  html[data-motion="on"] .kh-cards   > .kh-reveal:nth-child(2),
  html[data-motion="on"] .kh-facts   > .kh-reveal:nth-child(2),
  html[data-motion="on"] .kh-compare > .kh-reveal:nth-child(2){ transition-delay:.07s; }
  html[data-motion="on"] .kh-cards   > .kh-reveal:nth-child(3),
  html[data-motion="on"] .kh-facts   > .kh-reveal:nth-child(3){ transition-delay:.14s; }
  html[data-motion="on"] .kh-cards   > .kh-reveal:nth-child(4){ transition-delay:.21s; }
  html[data-motion="on"] .kh-cards   > .kh-reveal:nth-child(5){ transition-delay:.28s; }
  html[data-motion="on"] .kh-cards   > .kh-reveal:nth-child(6){ transition-delay:.35s; }
}
/* 인쇄물에는 숨김 상태가 남지 않게 한다 */
@media print{
  .kh-reveal{ opacity:1 !important; transform:none !important; }
}

/* ---- 2. 헤더 반응 (맨 위에서는 투명 · 스크롤하면 #FAFAFC + blur + 경계선) ----
   기본값(=JS 꺼짐)은 지금과 같은 '반투명+blur+경계선' 이다.
   JS 가 살아 있을 때만 맨 위에서 투명하게 내린다. */
html[data-motion="on"] .kh-header{
  transition:background-color .32s ease, border-bottom-color .32s ease;
}
html[data-motion="on"] .kh-header[data-scrolled="false"]{
  background:transparent;
  -webkit-backdrop-filter:none; backdrop-filter:none;
  border-bottom-color:transparent;
}
@media (prefers-reduced-motion: reduce){
  html[data-motion="on"] .kh-header{ transition:none; }
}
/* 스크롤 감지용 1px 표식 — 레이아웃에 영향을 주지 않는다 */
.kh-sentinel{ position:absolute; top:0; left:0; width:1px; height:1px; pointer-events:none; }

/* ---- 3. 스티키 제품 섹션 (제품 소개 1곳만) --------------------------------
   기본 구조(JS 꺼짐·모바일·reduce)는 지금과 같은 2열 그리드다.
   JS 가 살아 있고 화면이 1000px 이상일 때만 왼쪽 화면 자리를 고정하고
   오른쪽 설명이 스크롤에 따라 강조된다. 화면 캡처 파일이 들어오면 그대로 동작한다. */
.kh-stick__steps{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--kh-gap-card); }
@media (max-width:767px){ .kh-stick__steps{ grid-template-columns:1fr; } }
.kh-stick__stage{ display:none; }

html[data-motion="on"] .kh-stick[data-stick="on"]{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:56px; align-items:start;
}
html[data-motion="on"] .kh-stick[data-stick="on"] .kh-stick__stage{
  /* 화면 높이만큼 잡아 두고 그 안에서 세로 가운데에 고정한다(애플 방식) */
  display:block; position:sticky; top:0; height:100vh;
}
html[data-motion="on"] .kh-stick[data-stick="on"] .kh-stick__steps{
  grid-template-columns:1fr; gap:0;
}
html[data-motion="on"] .kh-stick[data-stick="on"] .kh-stick__step{
  position:relative; min-height:50vh; display:flex; align-items:center; padding-left:20px;
}
html[data-motion="on"] .kh-stick[data-stick="on"] .kh-stick__step::before{
  content:""; position:absolute; left:0; top:12px; bottom:12px; width:2px;
  background:var(--kh-hairline); transform:scaleY(.28); transform-origin:top;
  transition:transform .5s cubic-bezier(.28,.11,.32,1), background-color .4s ease;
}
html[data-motion="on"] .kh-stick[data-stick="on"] .kh-stick__step.is-active::before{
  background:var(--kh-ink); transform:scaleY(1);
}
html[data-motion="on"] .kh-stick[data-stick="on"] .kh-stick__step .kh-shot figcaption{
  padding-top:0; font-size:var(--kh-h3); line-height:1.35; letter-spacing:0.007em;
  color:var(--kh-mid-gray); transition:color .4s ease;
}
html[data-motion="on"] .kh-stick[data-stick="on"] .kh-stick__step.is-active .kh-shot figcaption{
  color:var(--kh-ink);
}
/* 고정된 화면 자리 안에서 한 장씩 교차 등장 */
.kh-stick__panel{
  position:absolute; inset:0; opacity:0; transform:translate3d(0,14px,0);
  transition:opacity .55s cubic-bezier(.28,.11,.32,1), transform .55s cubic-bezier(.28,.11,.32,1);
}
.kh-stick__panel.is-active{ opacity:1; transform:none; }
.kh-stick__panel{ display:flex; align-items:center; }
.kh-stick__panel > *{ width:100%; }
.kh-stick__panel img{ max-height:82vh; object-fit:contain; }
@media (prefers-reduced-motion: reduce){
  .kh-stick__panel{ transition:none; }
  html[data-motion="on"] .kh-stick[data-stick="on"] .kh-stick__step::before,
  html[data-motion="on"] .kh-stick[data-stick="on"] .kh-stick__step .kh-shot figcaption{ transition:none; }
}

/* ---- 4. 버튼·링크 호버 (확대 1.02 이하) ------------------------------------
   손가락 입력 기기(hover 없음)와 reduce 사용자에게는 적용되지 않는다. */
@media (hover:hover) and (prefers-reduced-motion: no-preference){
  .kh-btn{
    transition:background-color .18s ease, color .18s ease,
               transform .18s cubic-bezier(.28,.11,.32,1);
  }
  .kh-btn:hover{ transform:scale(1.02); }
  .kh-btn:active{ transform:scale(.99); }
  .kh-pagenav a{
    transition:background-color .2s ease, transform .2s cubic-bezier(.28,.11,.32,1);
  }
  .kh-pagenav a:hover{ transform:translate3d(0,-2px,0); }
  .kh-top{ transition:background-color .2s ease, transform .2s cubic-bezier(.28,.11,.32,1); }
  .kh-top:hover{ transform:scale(1.04); }
}

/* 고객사 명단 (2026-09-13) — 로고가 없어 이름만 격자로 */
.kh-clients{list-style:none;margin:0;padding:0;display:grid;gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.kh-clients li{background:var(--kh-bg-alt,#f5f5f7);border-radius:12px;padding:14px 16px;
  font-size:15px;line-height:1.4;color:var(--kh-text,#1d1d1f);
  border:1px solid rgba(0,0,0,.05)}
@media (max-width:520px){.kh-clients{grid-template-columns:1fr 1fr;gap:8px}
  .kh-clients li{padding:12px;font-size:13.5px}}