@charset "UTF-8";
/* ==========================================================================
   K-HACCP homepage_v2 — 애플 기법 추가분 (AE · 2026-09-12)

   이 파일은 kh.css 뒤에 읽힙니다. kh.css 는 손대지 않습니다.
   (AD 가 같은 시간에 kh.css / kh.js 를 고치고 있으므로 파일을 나눴습니다)

   apple.com 실측 근거 — 2026-09-12 직접 내려받아 확인
     · 플라이아웃(메가메뉴)  : globalnav-submenu-trigger-link / aria-expanded / aria-controls
     · 컴팩트 전체화면 메뉴  : globalnav-menutrigger-button (data-topnav-flyout-trigger-compact)
     · 반투명 블러 내비      : #globalnav { backdrop-filter: var(--globalnav-backdrop-filter) }
     · 탭 전환              : role="tablist" / role="tab" / aria-selected / aria-controls
     · 포커스 링            : #globalheader :focus-visible{ outline:2px solid #0071e3; outline-offset:1px }
     · 반응형 이미지        : <picture><source srcset="…_small.jpg, …_small_2x.jpg 2x" media="…">
     · 모션 차단            : matchMedia("(prefers-reduced-motion: reduce)")
     · OS 다크모드          : prefers-color-scheme 0건 · <meta color-scheme> 0건 → 애플은 안 씀

   규칙
     ① 모든 향상은 html[data-ae] 안에만 둔다. JS 가 없으면 이 파일의 규칙은 통째로 무효가
        되고 화면은 kh.css 원래 모습 그대로 남는다. (본문·링크는 JS 없이도 전부 보인다)
     ② 움직임은 (prefers-reduced-motion: no-preference) 안에서만 정의한다.
        reduce 사용자에게는 전환 시간 0 — 상태만 바뀐다.
     ③ transform·opacity 만 움직인다. 레이아웃을 흔들지 않는다.
     ④ 외부 라이브러리 0. 순수 CSS.
   애플 이징 : cubic-bezier(.28,.11,.32,1)
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. 색 구성 선언 — 애플과 같이 '라이트 고정'
   apple.com 은 prefers-color-scheme 을 쓰지 않는다(실측 0건). DESIGN_apple.txt 도
   라이트 단일 팔레트다. 브라우저가 페이지를 임의로 어둡게 뒤집지 않도록 명시한다.
   -------------------------------------------------------------------------- */
:root{ color-scheme: light; }

/* --------------------------------------------------------------------------
   1. 포커스 링 — 애플 실측값 그대로
   근거: globalheader.css → :focus-visible{outline:2px solid #0071e3;outline-offset:1px}
   -------------------------------------------------------------------------- */
:focus-visible{
  outline:2px solid var(--kh-action);
  outline-offset:1px;
}
/* 본문 바로가기(스킵 링크)는 애플에 없는 우리 추가분이므로 그대로 둔다 */
.kh-skip:focus-visible{ outline-offset:3px; }

/* --------------------------------------------------------------------------
   2. 메가메뉴 플라이아웃 (데스크톱 1100px 이상)
   애플과 같은 동작: 위쪽 링크는 클릭하면 그 페이지로 그냥 간다.
   패널은 hover / focus / 화살표 버튼으로 열린다(호버 전용 아님).
   패널 안 링크는 전부 이미 있는 링크다 — 새 목적지를 만들지 않았다.
   -------------------------------------------------------------------------- */
.kh-nav__item{ display:flex; align-items:center; }
.kh-nav__more{ display:none; }

html[data-ae] .kh-nav__more{
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; margin-left:-4px; padding:0;
  background:transparent; border:0; border-radius:var(--kh-r-link);
  color:var(--kh-mid-gray); cursor:pointer; font:inherit;
}
html[data-ae] .kh-nav__more svg{ width:9px; height:9px; display:block; }
html[data-ae] .kh-nav__more:hover{ color:var(--kh-ink); }

/* 패널 — 헤더(position:sticky)를 기준으로 전체 폭에 깔린다 */
html[data-ae] .kh-mega{
  position:absolute; left:0; right:0; top:100%;
  background:rgba(250,250,252,.94);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--kh-hairline);
  display:grid; grid-template-rows:0fr;
  visibility:hidden; pointer-events:none;
  z-index:99;
}
html[data-ae] .kh-mega[data-open="true"]{
  grid-template-rows:1fr; visibility:visible; pointer-events:auto;
}
html[data-ae] .kh-mega__clip{ overflow:hidden; min-height:0; }
html[data-ae] .kh-mega__inner{ padding:28px 0 36px; }
html[data-ae] .kh-mega__h{
  margin:0 0 12px; font-size:var(--kh-micro); font-weight:500;
  color:var(--kh-mid-gray); letter-spacing:-0.01em;
}
html[data-ae] .kh-mega__list{ list-style:none; margin:0; padding:0; display:grid; gap:2px; }
html[data-ae] .kh-mega__list li{ margin:0; }
html[data-ae] .kh-mega__link{
  display:inline-block; padding:4px 0;
  font-size:24px; font-weight:600; line-height:1.25; letter-spacing:-0.016em;
  color:var(--kh-ink); text-decoration:none;
}
html[data-ae] .kh-mega__link:hover{ color:var(--kh-deep-gray); }
html[data-ae] .kh-mega__link[aria-current="page"]{ color:var(--kh-mid-gray); }

@media (prefers-reduced-motion: no-preference){
  html[data-ae] .kh-mega{
    transition:grid-template-rows .32s cubic-bezier(.28,.11,.32,1),
               visibility 0s linear .32s;
  }
  html[data-ae] .kh-mega[data-open="true"]{
    transition:grid-template-rows .32s cubic-bezier(.28,.11,.32,1), visibility 0s;
  }
  html[data-ae] .kh-mega__inner{
    opacity:0; transform:translate3d(0,-6px,0);
    transition:opacity .26s cubic-bezier(.28,.11,.32,1) .04s,
               transform .26s cubic-bezier(.28,.11,.32,1) .04s;
  }
  html[data-ae] .kh-mega[data-open="true"] .kh-mega__inner{ opacity:1; transform:none; }
}

/* 1100px 미만에서는 데스크톱 내비 자체가 숨겨지므로 패널도 완전히 끈다 */
@media (max-width:1099px){
  html[data-ae] .kh-mega{ display:none; }
}

/* --------------------------------------------------------------------------
   3. 모바일 전체화면 메뉴 (1100px 미만)
   애플 compact 메뉴와 같은 구조: 헤더 아래를 화면 끝까지 덮고, 뒤 배경은 잠근다.
   markup 은 지금 것 그대로 — 보이는 방식만 바꾼다.
   -------------------------------------------------------------------------- */
@media (max-width:1099px){
  html[data-ae] .kh-mobilenav{
    display:block;
    position:fixed; left:0; right:0;
    top:var(--kh-headerh, 45px);
    height:calc(100dvh - var(--kh-headerh, 45px));
    max-height:calc(100vh - var(--kh-headerh, 45px));
    overflow-y:auto; overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    background:var(--kh-faded);
    padding-bottom:calc(40px + env(safe-area-inset-bottom));
    z-index:98;
    visibility:hidden; opacity:0;
  }
  html[data-ae] .kh-mobilenav[data-open="true"]{ visibility:visible; opacity:1; }

  /* 열려 있는 동안 뒤 본문 스크롤 잠금 */
  html[data-ae][data-navlock="true"], html[data-ae][data-navlock="true"] body{
    overflow:hidden;
  }
  /* 메뉴가 열리면 하단 고정 CTA 가 메뉴를 가리지 않게 한다 */
  html[data-ae][data-navlock="true"] .kh-sticky,
  html[data-ae][data-navlock="true"] .kh-top{ display:none !important; }

  html[data-ae] .kh-mobilenav__link,
  html[data-ae] .kh-mobilenav__group,
  html[data-ae] .kh-mobilenav .kh-btn{ will-change:auto; }

  @media (prefers-reduced-motion: no-preference){
    html[data-ae] .kh-mobilenav{
      transition:opacity .28s cubic-bezier(.28,.11,.32,1), visibility 0s linear .28s;
    }
    html[data-ae] .kh-mobilenav[data-open="true"]{
      transition:opacity .28s cubic-bezier(.28,.11,.32,1), visibility 0s;
    }
    /* 항목이 차례로 올라온다 (애플 compact 메뉴와 같은 계단 등장) */
    html[data-ae] .kh-mobilenav__list > li,
    html[data-ae] .kh-mobilenav > .kh-wrap > .kh-btn{
      opacity:0; transform:translate3d(0,10px,0);
    }
    html[data-ae] .kh-mobilenav[data-open="true"] .kh-mobilenav__list > li,
    html[data-ae] .kh-mobilenav[data-open="true"] > .kh-wrap > .kh-btn{
      opacity:1; transform:none;
      transition:opacity .34s cubic-bezier(.28,.11,.32,1),
                 transform .34s cubic-bezier(.28,.11,.32,1);
      transition-delay:calc(var(--kh-i, 0) * 22ms + 60ms);
    }
  }

  /* 햄버거 → X 로 바뀐다 */
  html[data-ae] .kh-burger__icon span{
    transform-origin:center;
  }
  @media (prefers-reduced-motion: no-preference){
    html[data-ae] .kh-burger__icon span{
      transition:transform .28s cubic-bezier(.28,.11,.32,1), opacity .18s ease;
    }
  }
  html[data-ae] .kh-burger[aria-expanded="true"] .kh-burger__icon span:nth-child(1){
    transform:translate3d(0,5px,0) rotate(45deg);
  }
  html[data-ae] .kh-burger[aria-expanded="true"] .kh-burger__icon span:nth-child(2){
    opacity:0;
  }
  html[data-ae] .kh-burger[aria-expanded="true"] .kh-burger__icon span:nth-child(3){
    transform:translate3d(0,-5px,0) rotate(-45deg);
  }
}

/* --------------------------------------------------------------------------
   4. 검색 오버레이
   애플 globalnav-search 와 같은 자리·같은 동작(열기 버튼 → 전체 폭 패널 → Esc 닫기).
   찾는 대상은 이 사이트 12쪽의 제목과 소제목뿐이다. 새 문구를 만들지 않는다.
   -------------------------------------------------------------------------- */
.kh-searchbtn{ display:none; }
html[data-ae] .kh-searchbtn{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:44px; margin-left:4px; padding:0; flex:0 0 auto;
  background:transparent; border:0; border-radius:var(--kh-r-link);
  color:var(--kh-ink); cursor:pointer; font:inherit;
}
html[data-ae] .kh-searchbtn:hover{ background:var(--kh-wash); }
html[data-ae] .kh-searchbtn svg{ width:15px; height:15px; display:block; }
/* 1100px 미만에서는 데스크톱 내비가 사라지므로 돋보기가 오른쪽 끝으로 붙는다 */
@media (max-width:1099px){
  html[data-ae] .kh-searchbtn{ margin-left:auto; }
  html[data-ae] .kh-burger{ margin-left:8px; }
}

html[data-ae] .kh-search{
  position:absolute; left:0; right:0; top:100%;
  background:rgba(250,250,252,.96);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--kh-hairline);
  display:grid; grid-template-rows:0fr;
  visibility:hidden; pointer-events:none; z-index:101;
}
html[data-ae] .kh-search[data-open="true"]{
  grid-template-rows:1fr; visibility:visible; pointer-events:auto;
}
html[data-ae] .kh-search__clip{ overflow:hidden; min-height:0; }
html[data-ae] .kh-search__inner{ padding:20px 0 28px; }
html[data-ae] .kh-search__row{ display:flex; align-items:center; gap:10px; }
html[data-ae] .kh-search__input{
  flex:1 1 auto; width:100%;
  background:transparent; border:0; border-bottom:1px solid var(--kh-hairline);
  padding:10px 2px; font:inherit; font-size:21px; letter-spacing:-0.016em;
  color:var(--kh-ink);
}
html[data-ae] .kh-search__input:focus{ outline:none; border-bottom-color:var(--kh-ink); }
html[data-ae] .kh-search__input::placeholder{ color:var(--kh-mid-gray); }
html[data-ae] .kh-search__close{
  flex:0 0 auto; padding:7px 14px;
  background:transparent; border:1px solid var(--kh-ink); border-radius:var(--kh-r-pill);
  font:inherit; font-size:var(--kh-micro); color:var(--kh-ink); cursor:pointer;
}
html[data-ae] .kh-search__close:hover{ background:var(--kh-wash); }
html[data-ae] .kh-search__results{ list-style:none; margin:14px 0 0; padding:0; max-height:52vh; overflow-y:auto; }
html[data-ae] .kh-search__results li{ margin:0; }
html[data-ae] .kh-search__link{
  display:block; padding:11px 10px; border-radius:var(--kh-r-link);
  text-decoration:none; color:var(--kh-ink);
}
html[data-ae] .kh-search__link:hover,
html[data-ae] .kh-search__link:focus-visible{ background:var(--kh-wash); }
html[data-ae] .kh-search__t{ display:block; font-size:var(--kh-body); letter-spacing:-0.022em; }
html[data-ae] .kh-search__p{ display:block; font-size:var(--kh-micro); color:var(--kh-mid-gray); margin-top:2px; }
html[data-ae] .kh-search__msg{ margin:16px 0 0; font-size:var(--kh-caption); color:var(--kh-mid-gray); }

@media (prefers-reduced-motion: no-preference){
  html[data-ae] .kh-search{
    transition:grid-template-rows .3s cubic-bezier(.28,.11,.32,1), visibility 0s linear .3s;
  }
  html[data-ae] .kh-search[data-open="true"]{
    transition:grid-template-rows .3s cubic-bezier(.28,.11,.32,1), visibility 0s;
  }
}

/* --------------------------------------------------------------------------
   5. 가로 스냅 갤러리 (모바일 767px 이하)
   애플은 드래그 방식 JS 갤러리를 쓴다(scroll-snap CSS 는 안 씀).
   같은 결과를 외부 라이브러리 없이 내려면 CSS scroll-snap 이 정답이라 그것으로 대체했다.
   카드가 3장 이상인 줄에만 적용한다. 점(dot) 표시는 애플의 role="tablist" 점내비와 같다.
   -------------------------------------------------------------------------- */
@media (max-width:767px){
  html[data-ae] .kh-cards[data-ae-snap="on"]{
    display:grid;
    /* kh.css 가 좁은 화면에 깔아 둔 'grid-template-columns:1fr' 을 반드시 지운다.
       안 지우면 첫 카드만 그 explicit 칸에 들어가 폭이 찌그러진다(실측 56px). */
    grid-template-columns:none;
    grid-auto-flow:column;
    grid-auto-columns:84%;
    align-items:stretch;
    gap:var(--kh-gap-card);
    overflow-x:auto; overflow-y:hidden;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  /* .kh-wrap 바로 아래에 있을 때만 화면 끝까지 흘린다.
     (wrap 의 좌우 여백만큼만 빼내므로 화면보다 넓어지지 않는다 = 문서 가로 스크롤 0) */
  html[data-ae] .kh-cards[data-ae-bleed="on"]{
    margin-left:calc(var(--kh-pad) * -1);
    margin-right:calc(var(--kh-pad) * -1);
    padding-left:var(--kh-pad);
    padding-right:var(--kh-pad);
    scroll-padding-left:var(--kh-pad);
  }
  html[data-ae] .kh-cards[data-ae-snap="on"]::-webkit-scrollbar{ display:none; }
  html[data-ae] .kh-cards[data-ae-snap="on"] > *{ scroll-snap-align:start; min-width:0; }

  html[data-ae] .kh-dots{
    display:flex; justify-content:center; align-items:center; gap:2px;
    list-style:none; margin:8px 0 0; padding:0;
  }
  html[data-ae] .kh-dots li{ margin:0; }
  html[data-ae] .kh-dots button{
    /* 보이는 점은 8px 이지만 손가락이 닿는 자리는 44px 로 잡는다 */
    display:block; width:44px; height:44px; padding:0;
    background:transparent; border:0; cursor:pointer; font:inherit;
    position:relative;
  }
  html[data-ae] .kh-dots button::after{
    content:""; position:absolute; left:50%; top:50%;
    width:8px; height:8px; margin:-4px 0 0 -4px;
    border-radius:50%; background:var(--kh-hairline);
  }
  html[data-ae] .kh-dots button[aria-selected="true"]::after{ background:var(--kh-ink); }
  @media (prefers-reduced-motion: no-preference){
    html[data-ae] .kh-dots button::after{ transition:background-color .25s ease; }
  }
}
html[data-ae] .kh-dots{ display:none; }
@media (max-width:767px){ html[data-ae] .kh-dots{ display:flex; } }

/* --------------------------------------------------------------------------
   6. 포함/미포함 탭 전환 (모바일 767px 이하)
   애플 role="tablist" 패턴 그대로. 탭 이름은 화면에 이미 있는 '포함' '미포함'
   라벨을 그대로 옮긴 것이다 — 새 문구가 아니다.
   JS 가 없으면 두 칸이 지금처럼 위아래로 다 보인다.
   -------------------------------------------------------------------------- */
html[data-ae] .kh-tabnav{ display:none; }
@media (max-width:767px){
  html[data-ae] .kh-compare[data-ae-tabs="on"] .kh-tabnav{
    display:flex; gap:8px; list-style:none; margin:0 0 16px; padding:0;
  }
  html[data-ae] .kh-tabnav li{ margin:0; flex:1 1 0; }
  html[data-ae] .kh-tabnav button{
    display:block; width:100%; padding:9px 12px;
    background:transparent; border:1px solid var(--kh-hairline);
    border-radius:var(--kh-r-pill);
    font:inherit; font-size:var(--kh-caption); color:var(--kh-mid-gray);
    cursor:pointer; letter-spacing:-0.016em;
  }
  html[data-ae] .kh-tabnav button[aria-selected="true"]{
    background:var(--kh-ink); border-color:var(--kh-ink); color:#fff;
  }
  html[data-ae] .kh-compare[data-ae-tabs="on"]{ display:block; }
  html[data-ae] .kh-compare[data-ae-tabs="on"] > .kh-compare__col[hidden]{ display:none; }
  @media (prefers-reduced-motion: no-preference){
    html[data-ae] .kh-tabnav button{ transition:background-color .2s ease, color .2s ease, border-color .2s ease; }
  }
}

/* --------------------------------------------------------------------------
   7. 하단 고정 신청 바 — 위쪽 신청 버튼이 화면에서 사라진 뒤에 올라온다
   애플 구매 바와 같은 규칙(맨 위 화면에 이미 같은 버튼이 있을 때는 안 띄운다).
   JS 가 없으면 지금처럼 처음부터 계속 보인다.
   -------------------------------------------------------------------------- */
@media (max-width:767px){
  html[data-ae] body[data-sticky="on"] .kh-sticky{ transform:translate3d(0,110%,0); }
  html[data-ae] body[data-sticky="on"][data-ae-cta="show"] .kh-sticky{ transform:none; }
  @media (prefers-reduced-motion: no-preference){
    html[data-ae] body[data-sticky="on"] .kh-sticky{
      transition:transform .38s cubic-bezier(.28,.11,.32,1);
    }
  }
}

/* --------------------------------------------------------------------------
   8. 제품 화면 확대 보기 (라이트박스)
   캡처 파일이 들어오면 자동으로 켜진다. 파일이 없으면 아무 것도 하지 않는다.
   JS 가 없으면 지금처럼 새 탭에서 원본이 열린다.
   -------------------------------------------------------------------------- */
html[data-ae] .kh-lightbox{
  border:0; padding:0; max-width:min(96vw, 1400px); max-height:92vh;
  background:transparent; overflow:visible;
}
html[data-ae] .kh-lightbox::backdrop{ background:rgba(0,0,0,.62); }
html[data-ae] .kh-lightbox img{
  display:block; max-width:100%; max-height:86vh;
  border-radius:var(--kh-r-card); background:var(--kh-paper);
}
html[data-ae] .kh-lightbox__close{
  position:absolute; right:10px; top:10px;
  width:36px; height:36px; padding:0;
  background:rgba(250,250,252,.9); border:0; border-radius:50%;
  color:var(--kh-ink); font:inherit; font-size:15px; cursor:pointer;
}
html[data-ae] .kh-lightbox__cap{
  margin:10px 2px 0; color:#fff; font-size:var(--kh-caption); letter-spacing:-0.016em;
}

/* --------------------------------------------------------------------------
   9. 반응형 이미지 틀 — 크기를 미리 잡아 글이 튀지 않게 한다
   애플: <picture><source srcset="…_small.jpg, …_small_2x.jpg 2x" media="(max-width:734px)">
   -------------------------------------------------------------------------- */
.kh-shot img{ width:100%; height:auto; }

/* --------------------------------------------------------------------------
   10. 인쇄
   -------------------------------------------------------------------------- */
@media print{
  .kh-mega, .kh-search, .kh-searchbtn, .kh-nav__more, .kh-dots, .kh-tabnav{ display:none !important; }
  html[data-ae] .kh-compare[data-ae-tabs="on"] > .kh-compare__col[hidden]{ display:block !important; }
  html[data-ae] .kh-cards[data-ae-snap="on"]{ display:grid !important; grid-auto-flow:row !important; overflow:visible !important; }
}