/* INP-932/933 — 새 페이지(brands.html · cash.html)용 공용 크롬 스타일.
 *
 * index.html 의 인라인 <style> 을 그대로 옮긴 사본이다. 재작성하지 않았다 —
 * 손으로 다시 쓰면 페이지 간 외형이 미묘하게 갈린다.
 *
 * index 를 이 파일로 전환하지 않은 이유는 fonts.css 주석과 같다(로더가 렌더 임계).
 *
 * ⚠️ 나브·푸터·브랜드 카드 스타일을 고칠 때는 index.html 인라인 블록과 이 파일을
 *    양쪽 다 고쳐야 한다. 한쪽만 고치면 메인과 하위 페이지의 외형이 갈린다.
 *    (히어로·로더·모달 규칙도 함께 들어 있다. 새 페이지에서 쓰이지 않지만,
 *     선별 삭제하다 실수하는 것보다 통째로 두는 편이 안전하다)
 */
/* INP-631 브랜드 쇼케이스 — 토큰: bg #040406 / 그린 그라데이션 #B6E920→#9FED00→#5BEC45 / easing cubic-bezier(.4,0,.2,1)
       폰트는 로더(#inpica-loader)에 임베드된 'WM'(Sora 700)·'SL'(Outfit 800) 재사용 — 중복 임베드 없음 */
    *{margin:0;padding:0;box-sizing:border-box}
    html{scroll-behavior:smooth;scrollbar-gutter:stable}   /* 드로어 스크롤 잠금 시 스크롤바 폭 점프 방지 */
    body{font-family:-apple-system,BlinkMacSystemFont,'Noto Sans KR',sans-serif;background:#040406;color:#f2f2f4;-webkit-font-smoothing:antialiased;word-break:keep-all;line-height:1.7}
    a{color:inherit;text-decoration:none}
    .grad{background:linear-gradient(98deg,#B6E920 0%,#9FED00 55%,#5BEC45 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
    /* NAV (INP-649) — 히어로 브랜드바를 상단 고정 내비로 승격(로고 중복 노출 없음).
       z-index 100: 로더(#loader 9999) 아래 → 첫 방문 시 로더가 내비를 덮는다.
       ⚠️ blur 배경은 .nav가 아니라 .nav::before에 건다 — backdrop-filter를 .nav에 직접 주면
       .nav가 fixed 자식의 컨테이닝 블록이 되어 모바일 드로어(inset:0)가 바 높이로 붕괴한다 */
    :root{--nav-h:64px}
    .nav{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid transparent;transition:border-color .3s cubic-bezier(.4,0,.2,1)}
    .nav::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background-color:rgba(4,4,6,.75);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);opacity:0;transition:opacity .3s cubic-bezier(.4,0,.2,1)}
    .nav.is-scrolled::before{opacity:1}
    .nav.is-scrolled{border-bottom-color:rgba(255,255,255,.06)}
    .nav-logo{position:relative;z-index:2;display:flex;align-items:center;gap:11px}
    .nav-logo img{width:27px;height:30px;display:block;transform:translateY(-2px)}
    .nav-logo span{font-family:'WM',sans-serif;font-weight:700;font-size:20px;letter-spacing:.02em;color:#fff;line-height:1}
    .nav-menu{position:relative;z-index:2;display:flex;align-items:center;gap:34px}   /* z-index 필수: ::before 베일 위로 */
    .nav-menu a{font-family:'SL',sans-serif;font-weight:800;font-size:13px;letter-spacing:.08em;color:rgba(255,255,255,.62);transition:color .2s cubic-bezier(.4,0,.2,1)}
    .nav-menu a:hover{color:#fff}
    .nav-toggle{display:none}
    /* 모바일(≤768px): 메뉴 → 햄버거 + 전체화면 드로어 */
    @media(max-width:768px){
      :root{--nav-h:56px}
      .nav{padding:0 12px 0 20px}
      .nav-toggle{position:relative;z-index:2;display:block;width:44px;height:44px;padding:0;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
      .nav-toggle .bar{position:absolute;left:12px;top:21px;width:20px;height:2px;border-radius:2px;background:#fff;transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .2s cubic-bezier(.4,0,.2,1)}
      .nav-toggle .bar:nth-child(1){transform:translateY(-6px)}
      .nav-toggle .bar:nth-child(3){transform:translateY(6px)}
      .nav-open .nav-toggle .bar:nth-child(1){transform:rotate(45deg)}
      .nav-open .nav-toggle .bar:nth-child(2){opacity:0}
      .nav-open .nav-toggle .bar:nth-child(3){transform:rotate(-45deg)}
      .nav-menu{position:fixed;inset:0;z-index:1;flex-direction:column;justify-content:center;gap:30px;background:rgba(4,4,6,.94);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);opacity:0;visibility:hidden;transition:opacity .3s cubic-bezier(.4,0,.2,1),visibility .3s cubic-bezier(.4,0,.2,1)}
      .nav-open .nav-menu{opacity:1;visibility:visible}
      .nav-menu a{font-size:26px;letter-spacing:.02em;color:#f2f2f4}
      .nav-open{overflow:hidden}   /* 드로어 열림 중 배경 스크롤 잠금 — 데스크탑 복귀 시 미디어쿼리로 자동 해제 */
    }
    /* 강제 색상 모드(Windows 고대비): background로 그린 햄버거 막대가 사라지므로 시스템 색으로 고정 */
    @media(forced-colors:active){
      .nav-toggle .bar{background:CanvasText}
    }
    /* HERO */
    .hero{position:relative;height:100dvh;min-height:560px;overflow:hidden;display:flex;align-items:center;justify-content:center}
    .hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
    .hero-veil{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(4,4,6,.72) 0%,rgba(4,4,6,.40) 42%,rgba(4,4,6,.95) 100%)}
    .hero-copy{position:relative;z-index:3;text-align:center;padding:0 24px}
    .headline{font-family:'SL',sans-serif;font-weight:800;font-size:64px;letter-spacing:-.03em;line-height:1.05;white-space:nowrap}
    .headline .gray{color:#b0b0b3}
    .sub{margin-top:20px;font-size:17px;color:#b0b0b3;letter-spacing:-.01em}
    /* 헤드라인 글자 stagger.
       ⚠️ 부모의 background-clip:text는 inline-block 자식에 적용되지 않으므로(자식은 투명 fill만 상속되어
       사라짐), 그라데이션 단어의 각 글자가 배경을 직접 갖는다. JS 픽셀 측정 없이 CSS 퍼센트만 사용:
       background-size = 글자수x100%, background-position = (i/(n-1))x100% → 단어 전체 그라데이션 분할.
       .hl-armed는 JS가 글자 분할에 성공한 뒤에만 부여(스크립트 실패 시 텍스트가 보이도록) */
    .headline .ch{display:inline-block}
    .headline .grad .ch{color:#9FED00;-webkit-text-fill-color:#9FED00}  /* fallback: 클립 미지원 시 라임 단색 */
    @supports ((-webkit-background-clip:text) or (background-clip:text)){
      .headline .grad .ch{
        background-image:linear-gradient(98deg,#B6E920 0%,#9FED00 55%,#5BEC45 100%);
        background-size:calc(var(--n,1) * 100%) 100%;
        background-position:calc(var(--p,0) * 100%) 0;
        background-repeat:no-repeat;
        -webkit-background-clip:text;background-clip:text;
        -webkit-text-fill-color:transparent;
      }
    }
    .hl-armed .headline .ch{opacity:0}
    .hl-armed .sub{opacity:0}
    .hl-play .headline .ch{animation:inpCharUp 900ms cubic-bezier(.4,0,.2,1) both}
    .hl-play .sub{animation:inpSubUp .6s cubic-bezier(.4,0,.2,1) 3150ms both}
    /* 영상 루프 직전(종료 0.3s 전) 카피 전체를 짧게 페이드아웃 → ended에서 즉시 리셋 후 재등장.
       전이는 .hl-out에만 걸어, 해제 시에는 지연 없이 곧바로 글자 애니메이션이 시작되게 한다 */
    .hl-out .hero-copy{opacity:0;transition:opacity .3s cubic-bezier(.4,0,.2,1)}
    @keyframes inpCharUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
    @keyframes inpSubUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
    @media(prefers-reduced-motion:reduce){
      .hl-armed .headline .ch,.hl-armed .sub{opacity:1}
      .hl-play .headline .ch,.hl-play .sub{animation:none}
      .scroll-hint{animation:none}
    }
    .scroll-hint{position:absolute;bottom:26px;left:50%;z-index:3;font-family:'WM',sans-serif;font-weight:700;font-size:10px;letter-spacing:.24em;color:rgba(255,255,255,.45);animation:inpScrollFloat 2.4s cubic-bezier(.4,0,.2,1) infinite}
    @keyframes inpScrollFloat{0%,100%{transform:translate(-50%,0);opacity:.45}50%{transform:translate(-50%,6px);opacity:.9}}
    /* BRANDS */
    .brands{max-width:920px;margin:0 auto;padding:96px 24px 72px}
    .sec-label{font-family:'WM',sans-serif;font-weight:700;font-size:12px;letter-spacing:.22em;color:rgba(255,255,255,.4);text-align:center;margin-bottom:34px}
    .brand-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
    .brand-card{display:block;padding:28px 26px;border:1px solid rgba(255,255,255,.09);border-radius:14px;background:rgba(255,255,255,.02);transition:border-color .25s cubic-bezier(.4,0,.2,1),transform .25s cubic-bezier(.4,0,.2,1)}
    .brand-card:hover{border-color:rgba(159,237,0,.45);transform:translateY(-3px)}
    /* CASH (INP-931) — 인피카 캐시.
       ⚠️ .brand-card 를 쓰지 않는다. 그 클래스는 모달 JS 가 잡아 카드 내용을 dialog 로 띄우는데,
          캐시는 브랜드가 아니라 결제 수단이라 같은 층위로 보이면 성격이 잘못 전달된다.
          그래서 카드 격자가 아니라 폭 전체를 쓰는 단일 패널로 시각적으로도 분리한다.
       상단 패딩이 0인 것은 위 .brands 가 이미 하단 72px 을 갖고 있어 겹치지 않게 하려는 것 */
    .cash{max-width:920px;margin:0 auto;padding:0 24px 96px}
    .cash-cta{display:inline-flex;align-items:center;min-height:44px;margin-top:10px;padding:0 20px;border:1px solid rgba(159,237,0,.45);border-radius:10px;font-family:'SL',sans-serif;font-weight:800;font-size:14px;letter-spacing:-.01em;color:#9FED00;transition:background-color .2s cubic-bezier(.4,0,.2,1),border-color .2s cubic-bezier(.4,0,.2,1)}
    .cash-cta:hover{background:rgba(159,237,0,.1);border-color:rgba(159,237,0,.85)}
/* INP-884 고객센터 카카오 채널 진입점.
   라벨 텍스트를 항상 함께 노출하므로 원형이 아니라 알약형이다(아이콘 단독 금지).
   우하단 고정 — .scroll-hint 는 좌우 중앙 absolute 라 겹치지 않는다. */
.kakao{position:fixed;bottom:1.5rem;right:1.5rem;z-index:90;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px 0 12px;border-radius:999px;background:#FEE500;color:#3C1E1E;font-family:'SL',sans-serif;font-weight:800;font-size:13px;letter-spacing:-.01em;box-shadow:0 4px 16px rgba(0,0,0,.25);transition:transform .2s cubic-bezier(.4,0,.2,1),box-shadow .2s cubic-bezier(.4,0,.2,1)}
.kakao:hover{transform:translateY(-2px);box-shadow:0 6px 22px rgba(0,0,0,.35)}
.kakao svg{width:20px;height:20px;flex:none}
@media(max-width:600px){.kakao{bottom:1rem;right:1rem;padding:0 14px 0 10px;font-size:12px}.kakao svg{width:18px;height:18px}}
/* 드로어가 열리면 숨긴다. 버튼이 <main> 밖이라 main[inert] 가 안 걸리고,
   .nav-menu 는 z-index 1 이라 z-index 90 인 이 버튼이 그 위에 뜬다.
   visibility:hidden 이라 포커스 순서에서도 빠진다. */
.nav-open .kakao{opacity:0;visibility:hidden;pointer-events:none}
    .brand-name{display:block;font-family:'WM',sans-serif;font-weight:700;font-size:20px;letter-spacing:.01em;margin-bottom:6px}
    .brand-desc{display:block;font-size:14px;color:#b0b0b3}
    @media(max-width:768px){.brand-grid{grid-template-columns:repeat(2,1fr)}}   /* 태블릿 2열 — 기본 규칙 뒤에 두어야 적용됨(≤600 1열은 아래 블록) */
    /* BRAND DETAIL (INP-944) — /brands/{slug} 전용. index.html 은 이 클래스를 쓰지 않으므로
       인라인 블록에는 없다. 6개 상세 페이지가 이 한 정의를 공유한다(페이지별 복제 없음). */
    .bd{max-width:720px;margin:0 auto;padding:calc(var(--nav-h) + 48px) 24px 96px}
    .bd .sec-label{text-align:left;margin-bottom:10px}
    .bd-back{font-size:13px;margin-bottom:24px}
    .bd-back a{color:rgba(255,255,255,.5)}
    .bd-back a:hover{color:#fff}
    .bd-name{font-family:'WM',sans-serif;font-weight:700;font-size:38px;letter-spacing:.01em;line-height:1.15;margin-bottom:8px}
    .bd-desc{font-size:14px;color:#b0b0b3;margin-bottom:26px}
    .bd-hook{font-size:17px;line-height:1.8;color:#f2f2f4;padding-bottom:26px;margin-bottom:26px;border-bottom:1px solid rgba(255,255,255,.09);text-wrap:pretty}
    .bd-body{font-size:15px;line-height:1.9;color:#c8c8cc;margin-bottom:18px;text-wrap:pretty}
    .bd-cta{display:inline-flex;align-items:center;min-height:44px;margin-top:14px;padding:0 20px;border:1px solid rgba(159,237,0,.45);border-radius:10px;font-family:'SL',sans-serif;font-weight:800;font-size:14px;letter-spacing:-.01em;color:#9FED00;transition:background-color .2s cubic-bezier(.4,0,.2,1),border-color .2s cubic-bezier(.4,0,.2,1)}
    .bd-cta:hover{background:rgba(159,237,0,.1);border-color:rgba(159,237,0,.85)}
    @media(max-width:600px){
      .bd{padding:calc(var(--nav-h) + 32px) 20px 72px}
      .bd-name{font-size:29px}
      .bd-hook{font-size:16px}
    }
    /* FOOTER (INP-649: 좌측 정렬 + 사업자 정보 접기/펼치기) — 컨테이너 폭·좌측 기준선을 .brands와 일치 */
    .site-footer{border-top:1px solid rgba(255,255,255,.07);padding:34px 0 46px;font-size:12px;line-height:2.1;color:rgba(255,255,255,.45);scroll-margin-top:var(--nav-h)}
    .footer-inner{max-width:920px;margin:0 auto;padding:0 24px;text-align:left}
    .site-footer .sep{margin:0 7px;opacity:.45}
    .site-footer a{border-bottom:1px solid rgba(255,255,255,.18)}
    .site-footer a:hover{color:#fff;border-bottom-color:rgba(255,255,255,.7)}
    .biz-toggle{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0;background:none;border:0;cursor:pointer;font-family:inherit;font-size:12px;line-height:1;letter-spacing:-.01em;color:rgba(255,255,255,.62);transition:color .2s cubic-bezier(.4,0,.2,1);-webkit-tap-highlight-color:transparent}
    .biz-toggle:hover{color:#fff}
    .biz-toggle .chev{width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .3s cubic-bezier(.4,0,.2,1)}
    .biz-open .biz-toggle .chev{transform:translateY(1px) rotate(-135deg)}
    /* 접힘 전환: grid-template-rows 0fr↔1fr (미지원 브라우저는 전환 없이 즉시 접힘/펼침).
       닫힘 상태에서 visibility:hidden → 안의 메일 링크가 탭 포커스·스크린리더에서 제외된다 */
    .biz-info{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s cubic-bezier(.4,0,.2,1)}
    .biz-open .biz-info{grid-template-rows:1fr}
    .biz-info>div{overflow:hidden;visibility:hidden;transition:visibility 0s linear .32s}
    .biz-open .biz-info>div{visibility:visible;transition-delay:0s}
    .footer-legal{margin-top:6px}          /* legal 링크는 토글 밖 상시 노출 (법적 접근성) */
    .site-footer .copy{display:block;margin-top:4px;color:rgba(255,255,255,.3)}
    @media(max-width:600px){
      .nav{padding:0 8px 0 18px}
      .nav-logo{gap:9px}
      .nav-logo img{width:23px;height:25px}
      .nav-logo span{font-size:17px}
      .headline{font-size:38px}
      .sub{margin-top:16px;font-size:15px}
      .brands{padding:64px 20px 56px;scroll-margin-top:24px}   /* 64+24-56 = 나브 아래 32px, 데스크탑과 동일 여유 */
      .brand-grid{grid-template-columns:1fr}
      .cash{padding:0 20px 64px}          /* .brands 모바일(64/20/56)과 같은 좌우 여백 */
      .site-footer{font-size:11px;line-height:2.2}
      .footer-inner{padding:0 20px}
    }
    /* INP-649 모션 최소화: 내비/드로어/토글 전이 제거 + 앵커 즉시 이동.
       .scroll-hint는 위쪽 reduced-motion 블록에도 있으나 그 뒤의 .scroll-hint 정의에 덮여 무력화돼 있었다(선행 결함) → 여기서 실효화 */
    @media(prefers-reduced-motion:reduce){
      html{scroll-behavior:auto}
      .nav,.nav::before,.nav-menu,.nav-toggle .bar,.biz-info,.biz-info>div,.biz-toggle .chev,.cash-cta,.kakao{transition:none}
      .scroll-hint{animation:none}
    }
    /* F16 인쇄/PDF: 사업자 정보가 접힘 상태면 법정 표기가 전량 누락되므로 항상 펼쳐 출력 */
    @media print{
      .nav{display:none}
      .biz-info{grid-template-rows:1fr}
      .biz-info>div{visibility:visible}
    }