/* ===== Pretendard — 자체 호스팅 가변 폰트(2026-08-05) =====
   전에는 정적 5종(Regular~ExtraBold, 합 3.7MB)을 굵기마다 받았다. 이 페이지는 400·500·600·700·800을
   모두 쓰므로 실제 전송도 3.7MB였다 → **가변 하나(2.0MB)**로 바꿔 45% 줄였다.
   (layout.tsx가 별도로 jsdelivr의 Pretendard CSS까지 불러 이중 로드이던 것도 함께 정리) */
@font-face{font-family:'Pretendard';font-weight:100 900;font-display:swap;src:url('/fonts/PretendardVariable.woff2') format('woff2-variations');}

*{box-sizing:border-box;margin:0;padding:0}
  /* 반응형 하한 방어막(사장님): 320px 아래로는 레이아웃을 더 쪼이지 않는다 —
     검증 최소 기기가 Z Fold 커버(344)라 그 밑은 축소 대신 가로 스크롤로 전환.
     html에 줘야 스크롤바가 생긴다(#root는 overflow-x:clip이라 자기 것만 자름). */
  html{min-width:320px}
  #root{min-width:320px}
  html{scroll-padding-top:0;scroll-behavior:smooth;}  /* scroll-snap은 로드 후 JS가 켬 — 초기 스냅 점프(모바일 배지 가림) 방지 */
  body{background:#fff}
  html,body{background:transparent}
  [data-bgcolor]{scroll-snap-align:start;}
  @keyframes hfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
  @keyframes hfloat2{0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}}
  @keyframes hpulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}}
  @keyframes hmarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  @keyframes hscan{0%{transform:translateY(0);opacity:0}12%{opacity:1}88%{opacity:1}100%{transform:translateY(360px);opacity:0}}
  @keyframes hpop{0%{opacity:0;transform:translateY(10px) scale(.96)}100%{opacity:1;transform:none}}
  @keyframes haurora{0%{transform:translate(0,0) scale(1)}33%{transform:translate(6%,-4%) scale(1.12)}66%{transform:translate(-5%,5%) scale(.95)}100%{transform:translate(0,0) scale(1)}}
  @keyframes hshine{0%{background-position:-180% 0}100%{background-position:180% 0}}
  @keyframes hscreenin{0%{opacity:0;transform:scale(1.03)}100%{opacity:1;transform:none}}
  @keyframes hcapin{0%{opacity:0;transform:translateY(16px)}100%{opacity:1;transform:none}}

  /* nav active (scrollspy) + press feedback */
  #nav a.nav-active{color:var(--ink)!important;background:rgba(15,18,24,.06)!important}
  #nav a:active{transform:scale(.96)}

  /* capabilities bento (vignette grid) */
  [data-cap-bento]{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:34px;}
  [data-cap-card]{border-radius:20px;padding:16px 18px 18px;background:#F5F7FA;transition:opacity .35s ease, transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease, background .22s ease !important;}
  [data-cap-card]:hover{transform:translateY(-5px) scale(1.02) !important;background:#EFF3F8;box-shadow:0 22px 44px -26px rgba(15,30,60,.30);}
  /* 카드 본문: 말줄임표(…) 제거(사장님 지시).
     `-webkit-line-clamp`는 잘릴 때 항상 "…"을 붙인다 → max-height로 줄 수를 제한하고,
     '실제로 잘린 문단'만 아래를 부드럽게 흐린다(잘리지 않은 문단까지 흐려지면 안 되므로 JS가 판정해 클래스 부여). */
  [data-cap-card] p{display:block !important;-webkit-line-clamp:none !important;
    max-height:calc(var(--cap-lines,2) * 1.55em);overflow:hidden;}
  /* 페이드 세기: 62%→투명은 마지막 줄이 통째로 날아가 '블러가 세다'(사장님) →
     78%부터 시작하고 바닥도 완전 투명이 아닌 .55로 남겨, 잘렸다는 신호만 준다 */
  [data-cap-card] p.cap-cut{-webkit-mask-image:linear-gradient(180deg,#000 78%,rgba(0,0,0,.55) 100%);
    mask-image:linear-gradient(180deg,#000 78%,rgba(0,0,0,.55) 100%);}
  @media(max-width:1020px){[data-cap-bento]{grid-template-columns:1fr 1fr;}}
  @media(max-width:640px){[data-cap-bento]{grid-template-columns:1fr;}}

  /* FAQ 2-col accordion — Apple hairline list (독립 2열: 펼침이 옆 열에 영향 없음) */
  [data-faq]{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(36px,5vw,72px);align-items:start;}
  [data-faq-q]:hover span:first-child{color:var(--accent);}
  @media(max-width:760px){[data-faq]{grid-template-columns:1fr;}}

  /* pricing: 모바일은 토글(연간/월간/Free)로 카드 1장씩 → 1열 중앙 배치 */
  [data-price-grid]{grid-template-columns:minmax(0,620px);justify-content:center;}
  /* PC는 PRO·Free 두 카드를 나란히 두는 기존 배치 유지(사장님 지시) — 카드로 보여주므로 토글에서 Free 제외 */
  @media(min-width:901px){
    [data-price-grid]{grid-template-columns:1fr 1fr;justify-content:normal;}
    [data-bill="free"]{display:none !important;}
    [data-price-grid] > div:last-child [data-bill-toggle]{display:none !important;}   /* Free 카드엔 토글 없음(기존) */
    [data-price-grid] > div:last-child [data-pro-head]{min-height:40px;}              /* PRO 헤더 높이와 맞춤(기존) */
    /* 180차: 금액 블록을 헤더 안으로 옮겨 자식이 [금액][토글] 둘이 됐다 — 인라인 space-between 이
       제 역할을 되찾아 금액 왼쪽 · 토글 오른쪽으로 한 줄에 선다(179차의 flex-end 는 불필요해져 제거).
       금액과 토글의 세로 중심을 맞춘다(금액이 크므로 baseline 아닌 center).
       마크업은 [토글][금액] 순(폰 기준: 플랜을 고르면 그 가격이 아래에 뜬다) → PC에서만 금액을 앞으로. */
    [data-pro-head]{align-items:center !important;}
    [data-pro-head] [data-price-line]{order:-1;}
  }
  /* 카드 전환 연출(테두리 그리기)의 SVG가 z-2로 카드 위를 덮는다 → 배지는 그보다 앞으로(사장님 지시).
     배지가 카드 상단 테두리에 걸쳐 있어서, 그냥 두면 그려지는 선이 배지 위로 지나간다 */
  [data-reco-badge],[data-free-badge]{z-index:5;}
  [data-pro-feats]{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(5,auto);grid-auto-flow:column;gap:12px 22px;}
  [data-free-feats]{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(5,auto);grid-auto-flow:column;gap:12px 22px;}
  @media(max-width:480px){[data-pro-feats]{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row;}[data-free-feats]{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row;}}

  /* ===== 플로팅 QR (PC 전용, 우측 하단) =====
     캡션을 '타일 안'에 둔다 — 섹션마다 배경색이 달라(연보라·검정·파랑) 바깥 글씨는 어디선가 안 읽힌다.
     타일 폭은 max-content: 언어에 따라 캡션 길이가 달라도 항상 한 줄 → 높이가 일정해
     그 위에 놓이는 FAB 오프셋이 어긋나지 않는다(영문 "Open it on your phone"도 한 줄).
     폰에서는 자기 화면을 스캔할 수 없으므로 렌더 자체를 안 한다. */
  [data-qr-float]{display:none;}
  @media(min-width:901px){
    [data-qr-float]{position:fixed;right:16px;bottom:18px;z-index:90;
      display:flex;flex-direction:column;align-items:center;gap:5px;
      width:max-content;min-width:92px;max-width:230px;padding:7px 9px 8px;box-sizing:border-box;
      border-radius:14px;background:#fff;border:1px solid rgba(15,18,24,.08);
      box-shadow:0 14px 34px -14px rgba(10,15,30,.5);text-decoration:none;
      transition:transform .2s ease, opacity .3s ease, visibility .3s;}
    [data-qr-float]:hover{transform:translateY(-3px);}
    [data-qr-float] svg{display:block;width:80px;height:80px;}
    [data-qr-float] [data-qr-cap]{font-size:10.5px;font-weight:800;letter-spacing:-.3px;
      color:#3B4250;white-space:nowrap;}
    html.qr-hide [data-qr-float]{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(6px);}
    /* FAB를 QR 위로 올리는 규칙은 #topFab 기본 선언 '뒤'에 있어야 한다 — 여기에 두면
       같은 특이도인 아래쪽 기본 선언(bottom:18px)에 덮인다(실측: 안 먹었음) */
  }

  /* ===== 테마 월 — 앱 설정 > 프리미엄 테마 미리보기 카드 38종 =====
     카드는 scripts/gen-theme-wall.mjs가 앱 glassThemes.ts에서 생성(치수는 앱 SettingsModal 비율 그대로).
     레인 4줄을 각각 다른 속도로 흘린다: 38장을 한 화면에 격자로 깔면 세로 1,100px이 넘어
     '섹션 1개 = 화면 1개' 리듬(데스크톱 글라이드)이 깨진다. 흐르면 높이는 4줄로 고정된다. */
  [data-theme-body]{display:flex;align-items:center;justify-content:center;gap:clamp(20px,3vw,44px);}
  [data-theme-phone]{flex:0 0 auto;min-width:0;}
  /* 폰 목업 — 앱 화면 12장을 36초에 한 바퀴 크로스페이드(3초씩).
     3장이던 것을 12장으로 늘렸다(2026-08-06 사장님 새 스크린샷) — 옆 테마 월과 같이
     '테마가 많다'를 폰 화면으로도 보여준다. 음수 delay 로 각 장을 3초씩 어긋나게 물린다
     (양수면 시작 직후 아무것도 안 보이는 구간이 생긴다).
     PNG 3장(2.9MB) → webp 12장(776KB)으로 오히려 가벼워졌다. */
  .tw-phone{position:relative;width:clamp(196px,17vw,244px);aspect-ratio:902/1952;
    border-radius:38px;padding:6px;box-sizing:border-box;
    background:linear-gradient(150deg,#1d2027,#0a0c10);
    box-shadow:0 50px 80px -30px rgba(15,30,60,.5), inset 0 1px 1px rgba(255,255,255,.16);}
  /* width/height를 auto로 두면 img가 '제 비율'로 잡혀 3장 높이가 424·429·418로 어긋난다(스샷 비율 미세차) */
  .tw-shot{position:absolute;inset:6px;width:calc(100% - 12px);height:calc(100% - 12px);object-fit:cover;border-radius:32px;
    opacity:0;animation:tw-shot 36s ease-in-out infinite;}
  .tw-shot:nth-of-type(1){animation-delay:0s;}
  .tw-shot:nth-of-type(2){animation-delay:-3s;}
  .tw-shot:nth-of-type(3){animation-delay:-6s;}
  .tw-shot:nth-of-type(4){animation-delay:-9s;}
  .tw-shot:nth-of-type(5){animation-delay:-12s;}
  .tw-shot:nth-of-type(6){animation-delay:-15s;}
  .tw-shot:nth-of-type(7){animation-delay:-18s;}
  .tw-shot:nth-of-type(8){animation-delay:-21s;}
  .tw-shot:nth-of-type(9){animation-delay:-24s;}
  .tw-shot:nth-of-type(10){animation-delay:-27s;}
  .tw-shot:nth-of-type(11){animation-delay:-30s;}
  .tw-shot:nth-of-type(12){animation-delay:-33s;}
  /* 한 장이 3초 머물고 0.6초에 걸쳐 다음 장으로(36초 = 12장 × 3초) */
  @keyframes tw-shot{0%,6.7%{opacity:1;}8.3%,98.3%{opacity:0;}100%{opacity:1;}}
  /* reduce에서도 크로스페이드는 유지 — 이동 없는 opacity 전환이라 멀미 유발 요소가 아니다.
     여기서 끄면 '동작 줄이기' 켠 기기에서 테마 섹션이 통째로 정지 사진이 된다. */
  [data-theme-wall]{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:12px;
    --tw-w:clamp(104px,10vw,128px);}
  /* overflow:hidden으로는 iOS가 자식 레이아웃 폭(트랙 2,256px)으로 레이아웃 뷰포트를 확장한다(07-21 교훈,
     사장님 '사파리 좌우 흔들림') → clip + contain:paint로 기여 자체를 차단 */
  .tw-lane{overflow:clip;contain:paint;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);}
  .tw-track{display:flex;gap:12px;width:max-content;animation:tw-scroll 64s linear infinite;}
  .tw-track--2{animation-duration:82s;animation-direction:reverse;}
  .tw-track--3{animation-duration:71s;}
  .tw-track--4{animation-duration:89s;animation-direction:reverse;}
  @keyframes tw-scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}  /* 트랙에 같은 내용 2벌 → 절반이 한 바퀴 */
  /* 마우스에서만 정지 — 터치에서는 탭 한 번에 :hover가 붙어 그대로 남는다(iOS). 그러면 월이 멈춘 채로 보인다 */
  @media(hover:hover) and (pointer:fine){
    [data-theme-wall]:hover .tw-track{animation-play-state:paused;}
  }
  /* '동작 줄이기'를 켜도 흐름은 유지하고 속도만 1.5배 늦춘다(피날레 영상·캐러셀 카드와 같은 결정).
     멈춰 세우면 이 섹션이 정지 사진이 되어 38종을 보여준다는 목적 자체가 사라진다 */
  @media(prefers-reduced-motion:reduce){
    .tw-track{animation-duration:96s;}
    .tw-track--2{animation-duration:123s;}
    .tw-track--3{animation-duration:107s;}
    .tw-track--4{animation-duration:134s;}
  }
  .tw-card{flex:0 0 auto;width:var(--tw-w);border-radius:14px;overflow:hidden;
    background:rgba(255,255,255,.72);border:1px solid rgba(15,18,24,.06);
    box-shadow:0 10px 24px -16px rgba(20,25,50,.45);}
  .tw-prev{position:relative;height:calc(var(--tw-w) * .62);padding:8px;box-sizing:border-box;
    display:flex;flex-direction:column;justify-content:center;gap:6px;}
  .tw-badge{position:absolute;top:6px;right:6px;width:16px;height:16px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.8);color:#1F2937;}
  .tw-badge--dark{background:rgba(0,0,0,.55);color:#fff;}
  .tw-acc{display:block;height:32%;border-radius:7px;}
  .tw-row{display:flex;align-items:center;gap:5px;padding:6px;border-radius:7px;border:1px solid transparent;}
  .tw-dot{width:12px;height:12px;border-radius:4px;flex:none;}
  .tw-line{flex:1;height:5px;border-radius:3px;}
  .tw-name{padding:7px 9px;font-size:12px;font-weight:700;letter-spacing:-.2px;color:#2A2F3A;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;}
  /* 폰: 목업과 월을 같이 넣으면 사파리 표시 영역(svh 664)을 넘는다 → 월만 남기고 세로로 편다 */
  /* ── 테마·보안·FAQ: 가운데 정렬 유지 + 사파리 보정 + 약간의 위 편향 ──
     한 규칙으로 세 환경을 다 맞춘다(130차까지의 시행착오 정리):
     · 아이폰 사파리: 섹션 100vh(lvh)가 보이는 svh보다 커서 가운데가 처짐 → (lvh−svh)만큼 아래를 밀어 보정
     · PC 반응형·폴드 에뮬(lvh=svh): 보정 0 — 가운데 정렬 그대로(상단 고정은 세로 긴 화면에서 아래가 텅 빔)
     · 공통: +28px 위 편향 — 광학적으로 살짝 위가 무게중심이 맞다(사장님 '올려줘' 계열 피드백의 접점) */
  @media(max-width:900px){
    #themes, #security, #faq{padding-bottom:calc(28px + 100lvh - 100svh);}
    [data-theme-body]{display:block;}
    [data-theme-phone]{display:none;}
    [data-theme-wall]{--tw-w:clamp(96px,26vw,116px);margin-top:clamp(20px,3vh,32px);}
    /* 좁은 카드(102px)에서 이름 잘림 — 언어별 이름을 넣고 나서 ja·vi는 38종 중 13종이 잘렸다.
       글자만 줄여 한 줄 유지(두 줄로 풀면 레인 4줄이 44px 더 높아져 섹션이 화면을 넘는다) */
    .tw-name{font-size:11px !important;letter-spacing:-.4px !important;padding-left:7px;padding-right:7px;}
  }

  /* ===== responsive (mobile) ===== */
  @media(max-width:900px){
    #download h2{font-size:20px !important;letter-spacing:-.8px !important;}   /* 다운로드 카드 제목 축소(사장님 지시) */
    [data-nav-links]{display:none !important;}          /* 좁은 화면: 중앙 링크 숨김(로고+언어+다운로드 유지) */
    [data-hero]{height:auto !important;}                 /* 히어로 100vh 고정 해제 — 스택 시 잘림 방지 */
  }
  @media(max-width:640px){
    [data-hero-chip]{display:none !important;}           /* 플로팅 칩: 화면 밖 넘침 방지 */
  }

  /* ===== mobile nav (top bar + hamburger) ===== */
  [data-dl-round]{display:none;}
  [data-menu-btn]{display:none;}
  /* 햄버거 메뉴: '드롭다운'(사장님 지시). 전체화면 → 상단 시트 → 사이드 드로어를 거쳐 최종안.
     햄버거 버튼 바로 아래(우상단)에 붙는 작은 패널 — 화면을 덮지 않아 뒤 내용이 계속 보인다.
     헤더 바가 56px이라 top:62px으로 6px 띄우고, 폭은 내용에 맞춘 상한(260px).
     닫기는 햄버거(열리면 X로 바뀜)와 스크림 탭 — 그래서 패널 안 로고/X 줄(.mm-head)은 감춘다. */
  [data-mobile-menu]{display:none;position:fixed;top:62px;right:14px;left:auto;bottom:auto;z-index:240;
    width:max-content;min-width:150px;max-width:min(72vw,280px);   /* 내용 크기만큼만(사장님 지시) */
    max-height:calc(100svh - 84px);overflow:auto;overscroll-behavior:contain;
    background:rgba(255,255,255,.98);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
    border-radius:18px;border:1px solid rgba(15,18,24,.07);
    box-shadow:0 18px 44px -12px rgba(10,15,30,.42);
    padding:6px 14px 10px;}
  /* 언어 지구본은 드롭다운에서 제외(사장님 지시) — 메뉴는 섹션 링크만.
     마크업은 남겨두고 CSS로만 감춘다(되돌리기 쉽게). ⚠ 헤더 지구본(#langFloat)도 모바일에선
     `@media(max-width:900px){#langFloat{display:none}}`(index.html)로 숨겨져 있어, 현재 모바일에는
     언어 전환 수단이 없다 — 헤더에 다시 노출하려면 그 규칙을 풀고 햄버거와 겹치지 않게 위치를 잡아야 함. */
  [data-mobile-menu] .mm-langs-wrap{display:none;}
  [data-mobile-menu]{overflow:visible;}
  [data-mobile-menu] .mm-langs.open{
    /* 기준(.mm-langs-wrap)이 메뉴 안쪽 패딩(14px)만큼 들어와 있어 +12px만 주면 메뉴와 3px 겹친다 → 14+12 */
    position:absolute;right:calc(100% + 26px);top:-6px;z-index:1;
    /* nowrap 필수 — column+wrap이면 max-height 때문에 2열로 접히면서 max-content 폭이 249px로 부풀어
       화면 왼쪽 밖(left −17)으로 넘쳤음. 한 열로 고정하고 넘치는 만큼 세로 스크롤. */
    flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:4px;
    width:max-content;max-height:min(60svh,420px);overflow:auto;overscroll-behavior:contain;
    padding:6px;border-radius:16px;
    background:rgba(255,255,255,.98);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
    border:1px solid rgba(15,18,24,.07);box-shadow:0 18px 44px -12px rgba(10,15,30,.42);}
  [data-mobile-menu] .mm-lang{text-align:left;}
  [data-mobile-menu] .mm-head{display:none;}   /* 로고·닫기 줄 제거 — 드롭다운은 버튼 옆에 붙어 있어 불필요 */
  /* 드롭다운 밀도: 페이지형(18px/16px 패딩)은 너무 큼 → 메뉴답게 축소 */
  [data-mobile-menu] .mm-link{padding:12px 2px;font-size:16px;}
  /* 폭이 내용에 맞춰지면 space-between이 만들던 여백이 사라져 셰브런이 라벨에 붙는다 → gap으로 확보 */
  [data-mobile-menu] .mm-langbtn{padding:12px 2px;font-size:16px;gap:18px;}
  /* 시트 아래로 페이지가 보이므로 스크림으로 덮고, 눌러서 닫을 수 있게 한다(v1/script.js가 .on 토글) */
  /* 드롭다운은 화면을 덮지 않는다 — 배경을 어둡게 하면 모달로 읽힌다(사장님 지적).
     그래서 스크림은 '보이지 않는 클릭 캐처'로만 둔다: 바깥을 탭하면 닫히되 페이지는 그대로 보인다.
     z-index 99 = 헤더(#nav 100)보다 아래 — 헤더의 X를 가리지 않기 위함. */
  .mm-scrim{position:fixed;inset:0;z-index:99;background:transparent;pointer-events:none;}
  .mm-scrim.on{pointer-events:auto;}
  [data-mobile-menu].open{display:block;}
  .mm-head{display:flex;align-items:center;justify-content:space-between;height:56px;margin:0 -14px 2px -6px;}  /* 바의 로고(좌16px)·햄버거(우10px) 위치와 정렬 */
  .mm-link{display:block;padding:16px 2px;font-size:18px;font-weight:700;color:var(--ink);text-decoration:none;letter-spacing:-.3px;border-bottom:1px solid #EEF0F4;}
  .mm-langs-wrap{margin-top:6px;}
  .mm-langbtn{width:100%;display:flex;align-items:center;justify-content:space-between;padding:16px 2px;font-size:18px;font-weight:700;color:var(--ink);letter-spacing:-.3px;border:none;border-bottom:1px solid #EEF0F4;background:none;font-family:inherit;cursor:pointer;}
  .mm-langs{display:none;flex-wrap:wrap;gap:8px;padding:14px 2px 4px;}
  .mm-langs.open{display:flex;}
  .mm-lang{border:1px solid #E2E6EE;background:#fff;border-radius:999px;padding:8px 14px;font-size:13.5px;font-weight:600;color:var(--ink);font-family:inherit;cursor:pointer;}
  .mm-lang.cur{background:var(--accent);border-color:var(--accent);color:#fff;}
  @media(max-width:900px){
    /* 헤더 '바' 자체를 없애고 버튼 두 개만 우상단에 띄운다(사장님 지시 2026-08-03).
       바 → 글래시 바 → 제거 순으로 왔다. 바가 사라지면 콘텐츠가 버튼 밑으로 그냥 흐르므로
       ① 로고는 감추고(브랜드는 히어로·푸터가 들고 있다) ② 버튼이 각자 배경을 가져야 읽힌다. */
    /* sticky는 '레이아웃 높이를 차지한다' — 바 시절엔 그게 헤더 자리였지만, 버튼을 세로로 쌓으면서
       98px짜리 빈 띠가 페이지 맨 위에 생겼다(사장님 리포트). 떠 있는 버튼이니 fixed로 띄우고,
       폭도 버튼만큼만 잡아 아래 콘텐츠 클릭을 막지 않게 한다. */
    #nav{position:fixed !important;top:0 !important;right:0 !important;left:auto !important;width:auto !important;
      padding:10px 12px 0 !important;}
    /* index.html의 `#root .hero{margin-top:-56px}`는 sticky 내비가 차지하던 슬롯을 되당기는 값이었다.
       fixed로 바꿔 슬롯이 사라졌으니 그대로 두면 히어로가 화면 위로 56px 잘려 올라간다 → 0으로.
       (인라인 <style>이 뒤에 오므로 `html` 접두로 특이도를 이긴다) */
    html #root .hero{margin-top:0 !important;}
    /* 컨테이너는 두 버튼만 감싸는 세로 유리 캡슐(사장님 지시) — 폭을 콘텐츠에 맞추고 오른쪽 정렬.
       밝은 유리로 통일하면 다크 섹션에서도 캡슐이 배경을 만들어 줘, 버튼 색을 배경에 따라
       뒤집을 필요가 없다(모바일에선 on-dark 플립이 실제로 안 걸린다 — 56차 참고). */
    #nav [data-nav-pill]{max-width:none !important;width:max-content !important;
      margin-left:auto !important;margin-right:0 !important;
      flex-direction:column !important;align-items:center !important;justify-content:center !important;
      gap:10px !important;height:auto !important;padding:0 !important;border-radius:0 !important;position:relative;
      background:none !important;
      -webkit-backdrop-filter:none !important;backdrop-filter:none !important;
      border:none !important;box-shadow:none !important;}
    /* on-dark 플립은 쓰지 않는다 — 판정이 '배경 레이어 색'이라 실제 보이는 섹션과 어긋난다
       (FAQ가 화면을 채웠는데 레이어는 아직 보안 섹션의 #0E1117 → 라이트 섹션에 다크 캡슐. 기존부터 있던 문제).
       유리 캡슐이 자체 배경을 만들어 주므로 어느 섹션에서든 같은 모습이면 충분하다.
       index.html의 인라인 <style> 규칙이 뒤에 오므로 `html`을 앞에 붙여 특이도로 이긴다. */
    html #nav.on-dark [data-nav-pill]{background:none !important;border:none !important;box-shadow:none !important;
      -webkit-backdrop-filter:none !important;backdrop-filter:none !important;}
    html #nav.on-dark [data-dl-round]{background:var(--ink) !important;color:#fff !important;}
    html #nav.on-dark [data-menu-btn]{color:var(--ink) !important;}
    #nav [data-nav-pill] > a[href="#"]{display:none !important;}   /* 로고(맨 위로 링크) */
    /* 버튼 두 개는 pill의 직계가 아니라 '우측 그룹 div' 안에 있다 — pill에만 column을 걸면
       [로고][우측그룹]이 세로로 쌓일 뿐 버튼은 그대로 가로였다(실측). 그룹에도 걸어야 한다. */
    #nav [data-nav-pill] > div:last-child{flex-direction:column !important;gap:8px !important;align-items:center !important;}
    /* 감싸는 캡슐 없이 '칩 두 개'로 따로 세운다(사장님 지시) → 각자 배경을 가져야 한다.
       햄버거: 유리 원형. 다운로드: 검은 원 + 흰 링 — 다크 섹션(#0E1117)에서 원이 배경에 묻히는 걸
       배경 판정(on-dark, 어긋남 있음) 없이 막는다. 밝은 배경에선 링이 거의 안 보인다. */
    /* 햄버거 제거(사장님 지시, 78차에 메뉴가 미트볼로 옮겨감) — 상단엔 다운로드 버튼만 남는다.
       패널 마크업(.mm-link)은 남겨 둔다: 미트볼 칩이 그 텍스트를 복제해 쓰고, i18n 워커가 번역해 준다 */
    [data-menu-btn]{display:none !important;}
    /* (헤더 다운로드 원 표시 규칙 제거 — 2026-08-04 캡슐로 이동. 아래 [data-dl-round]{display:none}가 담당) */
    #nav .hl-lang{display:none !important;}        /* 언어 선택은 햄버거 메뉴 안 */
    [data-hero-grid]{padding-top:92px !important;}  /* 배지가 상단 바에 붙지 않게 */
    [data-dl-desktop]{display:none !important;}    /* 텍스트 다운로드 → 동그란 버튼으로 대체 */
  }

  /* ===== mobile typography scale-down ===== */
  @media(max-width:900px){
    [data-hero] h1{font-size:30px !important;letter-spacing:-1.2px !important;}
    [data-hero] [data-reveal="left"] > div:first-child{font-size:11.5px !important;padding:6px 12px !important;}
    [data-i18n="heroDesc"]{font-size:14px !important;}
    [data-bgcolor] h2{font-size:22px !important;letter-spacing:-.8px !important;}
    /* 요금 섹션 제목만 19px — "필요한 만큼만, Haulo PRO"는 다른 섹션 제목보다 길어서
       22px면 영문·스페인어·프랑스어·포르투갈어·인니어·베트남어가 두 줄로 접힌다(사장님 지시로 축소) */
    #pricing > div:first-child > div:first-child h2{font-size:19px !important;letter-spacing:-.6px !important;}
    [data-bgcolor] h2 + p{font-size:14px !important;}
    [data-cap-card] h3{font-size:15px !important;}
    [data-cap-card] p{font-size:12.5px !important;}
    #security h3{font-size:16px !important;}
    #security [data-reveal] > div + div p{font-size:13px !important;}
    [data-faq-q] > span:first-child{font-size:15px !important;}
    [data-faq-a] p{font-size:13.5px !important;}
    [data-faq-col] > div:not([data-faq-item]){font-size:11px !important;}
    [data-free-feats] > div,[data-pro-feats] > div{font-size:13px !important;}
    [data-price],[data-price-free]{font-size:30px !important;}
    [data-billing-note]{font-size:11.5px !important;}
    [data-dl-strip] > div:last-child{font-size:11px !important;}
  }

  /* 모바일 capabilities: 1열 풀폭(가로로 긴 띠) → 2열 반폭 카드 — 사장님 지시(2026-07-28).
     ≤900 블록의 !important 타이포를 덮어야 하므로 그 뒤에 배치 */
  @media(max-width:640px){
    [data-cap-bento]{grid-template-columns:1fr 1fr;gap:10px;}
    [data-cap-card]{padding:12px 12px 14px;border-radius:16px;}
    [data-cap-card] > div:first-child{height:64px !important;}          /* 상단 비주얼 축소(인라인 80px 덮기) */
    [data-cap-card] > div:first-child > div{zoom:.65;}                  /* 내부 목업 비율 축소 — 반폭에서 잘림/줄바꿈 방지(55%·통화 필 등) */
    /* 제목이 1줄인 카드와 2줄인 카드가 섞여 본문 시작 높이가 들쭉날쭉했다 → 두 줄분으로 고정해 정렬.
       단, '그 언어에 2줄 제목이 하나도 없으면'(ko 등) 예약 공간이 통째로 공백이 된다(사장님) —
       JS가 언어 적용 후 판정해 html.cap-1line을 달면 한 줄분으로 줄인다 */
    [data-cap-card] h3{font-size:13.5px !important;letter-spacing:-.3px !important;
      min-height:calc(2 * 1.25em);display:flex;align-items:flex-start;}
    html.cap-1line [data-cap-card] h3{min-height:0;}
    [data-cap-card] h3 span{font-size:9px !important;padding:2px 5px !important;}   /* PRO 배지 */
    [data-cap-card] p{font-size:11.5px !important;line-height:1.5 !important;--cap-lines:3;
      max-height:calc(3 * 1.5em);}
    [data-cap-bento] > [data-cap-card]:last-child{grid-column:1 / -1;}  /* 9번째 홀수 카드: 풀폭 마감 */
    /* ── 좁은 2열 카드 UI 정리(사장님 '불편해') ── */
    /* ① PRO 배지가 제목을 2줄로 밀던 것(실측 badgeWrapped) → 카드 우상단 고정 */
    [data-cap-card]{position:relative;}
    [data-cap-card] h3 span{position:absolute;top:9px;right:9px;vertical-align:baseline !important;z-index:1;}
    /* ② 보안 카드 정렬: 모바일만 좌측으로 뒀던 것을 되돌림 — 아이콘·타이틀이 카드 중앙에 안 온다는
       사장님 지시(2026-07-31). 전 뷰포트 중앙 정렬(위 전역 규칙)로 통일 */
    /* 좁은 폭이라 CJK 기본 줄바꿈이 어절 중간을 끊음('않/아요', '있어/요.') → 어절 단위로 */
    #security [data-sec-grid] h3,#security [data-sec-grid] p{word-break:keep-all;}
    /* ③ 카드 높이 균일 — 행마다 높이가 달라 들쭉날쭉하던 것 정돈 */
    [data-sec-grid],[data-cap-bento]{grid-auto-rows:1fr;}
    /* 보안 카드 6장: 1열 풀폭 → 2열 반폭 (사장님 지시 — capabilities와 동일 밀도) */
    [data-sec-grid]{grid-template-columns:1fr 1fr !important;gap:10px !important;}
    [data-sec-grid] > div{padding:13px 12px 12px !important;gap:7px !important;border-radius:16px !important;}
    [data-sec-grid] > div > div:first-child{width:34px !important;height:34px !important;border-radius:10px !important;}
    [data-sec-grid] > div > div:first-child svg{width:18px;height:18px;}
    #security [data-sec-grid] h3{font-size:14px !important;margin-bottom:4px !important;letter-spacing:-.3px !important;}
    #security [data-reveal] > div + div p{font-size:11.5px !important;line-height:1.5 !important;}
    /* 설명문↔카드 간격 52 → 24 (사장님 지시). 카드가 2열로 작아진 뒤로 위 여백만 크게 남아 보였음.
       인트로 블록은 그리드 밖의 [data-reveal] — 카드(그리드 안)와 구분하려고 자식 조합자 사용 */
    #security > div > [data-reveal]{margin-bottom:24px !important;}
    /* 플랜 헤더: 세그먼트가 3개(연간/월간/Free)라 좁은 폭에서 한 줄에 안 들어감
       → 플랜명 아래 전체 폭 한 줄로. 세그먼트당 ~99px 확보(한 줄 유지 시 63px로 배지가 잘림) */
    [data-pro-head]{flex-wrap:wrap !important;row-gap:8px !important;}
    /* 폰은 토글이 전체 폭이라 한 줄에 못 세운다 — 마크업 순서 그대로 [토글] 다음 [금액]으로 쌓인다
       ('플랜을 고르면 그 가격이 아래에 뜬다'는 읽기 흐름 유지).
       ⚠ 여백은 헤더의 row-gap(8px)이 이미 만든다 — 옛 margin-top:8px 를 되살리면 16px 로 벌어져
       마지막 화면(svh 664) 예산을 8px 잡아먹는다. 그래서 주지 않는다. */
    [data-pro-head] [data-bill-toggle]{flex:1 0 100% !important;max-width:none !important;}
    [data-pro-head] [data-bill-toggle] button{font-size:11.5px !important;height:32px !important;}
    [data-pro-head] [data-bill-toggle] [data-disc]{font-size:9px !important;padding:1px 4px !important;}
    /* 다운로드 카드 버튼: 축소해 가운데 나란히(양 옆) */
    [data-dl-btns]{flex-wrap:nowrap !important;justify-content:center;gap:10px !important;width:100%;}   /* 폭 100% — flex:1 1 0이 실제로 균등 분배되게(shrink-to-fit 방지) */
    [data-dl-btns] a{flex:0 0 auto !important;width:calc(50% - 5px) !important;min-width:0 !important;max-width:150px;height:46px !important;padding:0 10px !important;border-radius:12px !important;gap:8px !important;box-sizing:border-box !important;}   /* 명시적 50%-갭 = 두 버튼 완전 동일 폭(플렉스 분배는 border 바닥값 탓 2px 어긋남) */
    [data-dl-btns] a svg{width:17px;height:auto;}
    [data-dl-btns] a div div:first-child{font-size:9.5px !important;}
    [data-dl-btns] a div div:last-child{font-size:13px !important;}

    /* ── 요금제: 두 가격이 화면 위/아래로 멀리 떨어져 비교가 안 되던 것(사장님 지시) ──
       카드를 반으로 좁히면 기능 문구가 줄바꿈되므로, 폭은 그대로 두고 '카드 높이'를 줄인다.
       기능 목록 10줄 → 2열 5줄이 핵심(카드당 약 150px 단축) → PRO 가격과 Free 가격이 한 화면에 들어옴 */
    /* padding-top의 (100lvh−100svh): 사파리는 섹션 100vh가 '주소창 접힌 큰 뷰포트'(≈745)라
       중앙 정렬 기준이 745가 된다 — 문서 끝에서 보이는 건 아래 svh(≈664)뿐이라 위가 잘리고
       푸터 위에 어정쩡한 공백이 남았다(사장님 "사파리에서 중심이 안 잡혀"). 그 차이만큼 위를
       밀어 **보이는 영역(svh) 기준으로 중앙**을 잡는다 — 스토리 섹션의 svh 앵커(25차)와 같은 수법.
       팬·PC는 lvh=svh라 0(무변화). */
    /* 패딩 보정(padding-top → padding-bottom 두 판) 모두 실패 — 섹션(100vh=lvh 745)이 보이는 영역(svh 664)보다
       큰 게 근본 원인이라, 안에서 아무리 밀어도 문서 끝 뷰에서는 위가 잘리거나 푸터 위가 벌어진다.
       **섹션 높이 자체를 svh로** — 사파리에서도 팬과 동일한 664 기준 구성이 된다.
       주소창이 접히면(745) 이 섹션 위로 FAQ 끝자락이 81px 보일 뿐 구성은 안 깨진다. */
    #pricing{min-height:100svh !important;}
    #pricing > div:first-child{padding-left:20px !important;padding-right:20px !important;
      justify-content:center !important;padding-bottom:6px !important;}
    /* 세로 정렬: flex-end(하단 붙임) → **center**(사장님 지시 2026-08-03).
       flex-end는 남는 높이를 전부 위로 보내 852에서 위쪽 236px이 비었다. 가운데로 두면 위아래로 나뉜다
       — 대신 다운로드 카드↔푸터 사이에 그만큼 여백이 생긴다(32차에 없앴던 그 여백. 이번 지시가 우선). */
    [data-price-grid]{gap:14px !important;}
    [data-price-grid] > div{padding:22px 16px 10px !important;border-radius:20px !important;}   /* 위 14→22(배지↔토글 6→11px), 아래 14→10으로 상쇄 */
    [data-pro-feats],[data-free-feats]{margin-top:12px !important;
      grid-template-columns:1fr 1fr !important;grid-template-rows:none !important;grid-auto-flow:row !important;
      gap:9px 12px !important;}
    [data-free-feats] > div,[data-pro-feats] > div{font-size:11px !important;gap:7px !important;letter-spacing:-.2px;}
    [data-free-feats] > div > span:first-child,[data-pro-feats] > div > span:first-child{width:16px !important;height:16px !important;}
    [data-free-feats] > div > span:first-child svg,[data-pro-feats] > div > span:first-child svg{width:9px;height:9px;}
    [data-price],[data-price-free]{font-size:32px !important;}
    [data-pro-feats] + div + p{margin-top:10px !important;font-size:10.5px !important;line-height:1.45 !important;}
  }

  /* 다운로드 카드 제목 블록은 카드 폭을 다 쓴다.
     #download가 flex column + align-items:center라 이 블록이 h2 폭(폰에서 206px)까지 쪼그라들어
     본문이 그 안에서 접혔다 — 카드 안쪽 폭은 281px인데 75px을 못 쓰고 있었다. */
  #download > div:has(> h2){width:100%;}

  /* ===== 요금제(PC): 헤딩부터 푸터까지 한 화면에 =====
     사장님 지시 3건 — ① 카드↔다운로드 카드 공백 축소 ② 영문에서 두 줄로 접히는 h2를 한 줄로
     ③ 마지막 화면에 푸터까지 같이. 1440×900에서 섹션+푸터가 1096이라 196px을 덜어내야 했다.
     문구는 그대로 두고 여백·글자 크기만 줄인다. */
  @media(min-width:901px){
    #pricing > div:first-child{padding-top:26px !important;padding-bottom:14px !important;}
    /* 인트로: 폭을 넓혀야 영문 h2가 한 줄로 선다(640이면 "…with Haulo PRO"가 접힘).
       900이면 가장 긴 vi(652)·pt(648)도 한 줄 — 14개 언어 전부 실측 확인 */
    #pricing > div:first-child > div:first-child{max-width:900px !important;margin-bottom:26px !important;}   /* 배지가 -13px 걸쳐 있어 16이면 간격이 3px밖에 안 남는다 */
    #pricing > div:first-child > div:first-child > div:first-child{margin-bottom:8px !important;}
    #pricing > div:first-child > div:first-child h2{font-size:clamp(26px,2.3vw,33px) !important;letter-spacing:-1px !important;}
    #pricing > div:first-child > div:first-child h2 + p{margin-top:8px !important;font-size:15px !important;line-height:1.45 !important;}
    /* 요금 카드 내부 */
    [data-price-grid] > div{padding:28px 22px 22px !important;}   /* 위만 더: 배지 아래 여유 */
    [data-price-grid]{gap:18px !important;}
    [data-pro-feats],[data-free-feats]{gap:8px 20px !important;}
    [data-pro-feats] + div + p,[data-free-feats] + div + p{margin-top:12px !important;}
    /* 카드 ↔ 다운로드 카드 공백(45 → 18) + 다운로드 카드 자체도 압축 */
    #download{margin-top:22px !important;padding-top:19px !important;padding-bottom:19px !important;gap:13px !important;}
    #download h2{font-size:clamp(20px,1.7vw,24px) !important;}   /* 사장님 지시로 축소 */
    /* 본문 폭 360 → 560: 360이면 한국어(첫 줄 236px)만 2줄이고 나머지 11개 언어는 3줄로 접혀
       줄 수가 언어마다 달랐다(사장님 지시: 전부 동일하게). 가장 긴 프랑스어 첫 줄이 533px. */
    #download h2 + p{margin-top:7px !important;max-width:560px !important;}
    /* 하단 신뢰 문구: 프랑스어만 1075px가 필요해 두 줄로 접히며 카드가 18px 커졌다(카드 높이가
       언어마다 달라짐 → 섹션이 중앙 정렬이라 전체가 밀림) → 글자를 줄여 1440에서 전 언어 한 줄 */
    [data-dl-strip] > div:last-child{font-size:11.5px !important;}
  }

  /* ===== 요금제: 금액 카드 + 다운로드 카드를 한 화면에 (모바일 한정) =====
     PC는 2열로 세웠다가 사장님 지시로 원복 — 금액 카드 아래 다운로드 카드가 오는 기존 세로 배치 유지.
     (2열은 세로를 329px 줄여 푸터까지 한 화면에 들어왔지만, 카드 옆 여백이 커서 허전했음)
     모바일은 나란히 둘 수 없으므로 섹션 여백만 깎아 두 카드가 한 스크롤에 들어오게 함. */
  @media(max-width:900px){
    /* 세로로 쌓이는 구간 — 여백만 깎아 두 카드를 한 스크롤에.
       기준은 lvh(812)가 아니라 svh: 사파리 주소창이 보일 때(약 747)도 다운로드 카드 하단까지 들어와야 함 */
    #pricing > div:first-child{padding-top:0 !important;}   /* 32(상단 고정 헤더 회피 몫)→12→0. 폰 상단에 헤더가 없어(117차) 회피할 것도 없다 — 사장님 '훨씬 많이 올려줘' */
    #pricing > div:first-child > div:first-child{margin-bottom:34px !important;}   /* 배지(-13px) 자리 확보 + 숨통(24→34, 사장님 '꽉 차보여') */
    #pricing > div:first-child > div:first-child > div:first-child{margin-bottom:6px !important;}  /* PRICING 라벨 */
    #pricing > div:first-child > div:first-child h2 + p{margin-top:8px !important;}
    #download{margin-top:26px !important;padding-top:18px !important;padding-bottom:18px !important;gap:14px !important;}   /* 16→26 숨통 */
  }
  @media(max-width:640px){
    /* 폰에서 지우는 문구(사장님 지시) — PC는 유지.
       ① 요금제 인트로 설명("기본 기능은 무료로 충분히…") ② 다운로드 카드 하단 신뢰 문구(우측이 FAB에 가려 잘림) */
    #pricing > div:first-child > div:first-child > p{display:none !important;}
    [data-dl-strip] > div:last-child{display:none !important;}
    /* 위 두 문구가 빠지며 94px이 남아, svh 21px 맞추려 조였던 카드 내부 압축은 되돌림(밀도 복구) */

    /* 다운로드 카드↔푸터 공백 제거(사장님 지시). 원인은 하단 패딩 24px + '세로 중앙 정렬 여유'.
       섹션이 min-height:100vh라 내용이 짧으면 남는 높이를 위/아래로 반씩 나눠 아래에도 쌓임
       (주소창 접힌 아이폰에서 44px 관측) → flex-end로 남는 높이를 전부 위로 보내고 하단은 10px 고정 */

    /* ── 사파리 주소창+툴바가 보일 때(실측 svh 664)도 마지막 화면이 다 보이게 ──
       사장님 아이폰 스크린샷: 요금 카드 상단 34px(추천 배지 포함)이 고정 헤더에 가려 안 보였음.
       필요 높이 = 헤더56 + 배지13 + 카드371 + 간격16 + 다운로드172 + 여백10 + 푸터73 = 711 > 664.
       콘텐츠를 줄일 순 없으니 여백만 52px 깎아 659로 맞춘다(392×664에서 재현·검증). */
    #download{margin-top:24px !important;padding-top:12px !important;padding-bottom:12px !important;gap:9px !important;}   /* 16→24 숨통 */
  }

  /* ===== 폰: 파란 다운로드 카드 제거 — 스토어 버튼 2개만(사장님 지시). PC는 카드 유지 =====
     카드가 사라지면 버튼이 밝은 섹션 배경(#EAF0FA) 위에 바로 서므로, 파란 카드 전제로 만든
     Google Play(반투명 흰 유리 + 흰 글자)는 그대로면 안 보인다 → 두 버튼을 흰 면 + 헤어라인으로 통일.
     위의 #download 패딩 규칙(≤900 18px·≤640 12px)보다 뒤에 둬야 padding:0이 이긴다(동급 !important는 순서 승부) */
  @media(max-width:900px){
    #download{background:none !important;box-shadow:none !important;padding:0 !important;border-radius:0 !important;overflow:visible !important;}
    #download > div:first-child{display:none;}                   /* 글로우 원 */
    #download > div:has(> h2){display:none;}                     /* 제목 + 설명 */
    [data-dl-strip] > div:last-child{display:none !important;}   /* 신뢰 문구(흰 글자) — 641~900 구간도 숨김 */
    #download [data-dl-btns] a{background:#fff !important;border:1px solid rgba(15,18,24,.12) !important;color:#0F1218 !important;box-shadow:0 12px 28px -16px rgba(15,30,60,.35);}
  }

  /* 푸터 사업자정보 토글 — 사파리 기본 삼각형 마커 제거(list-style:none만으론 안 됨) + 펼침 시 화살표 회전 */
  [data-biz-info] > summary::-webkit-details-marker{display:none;}
  [data-biz-info] > summary::marker{content:"";}
  [data-biz-info] > summary:hover{color:var(--ink);}
  [data-biz-info][open] > summary [data-biz-arrow]{transform:rotate(180deg);}
  /* 본문 display는 반드시 [open] 조건부로 — 저자 CSS(인라인 포함)로 display를 무조건 주면
     UA의 details:not([open]) 접힘 규칙을 이겨서 닫혀도 계속 보인다(실측 확인) */
  [data-biz-info]:not([open]) > [data-biz-body]{display:none;}
  /* 닫힘에서 빈 ::details-content 상자가 flex 아이템으로 남아 줄(gap 8px)을 하나 더 만들었다 —
     클릭할 때마다 푸터가 8px 요동친 원인(사장님). 상자째 숨긴다 */
  [data-biz-info]:not([open])::details-content{display:none;}
  /* head(500)와 펼친 내용(상속 400)의 굵기 차 — 같은 자리 교체라 굵기가 튀면 폰트가 달라 보인다 */
  [data-biz-body]{font-weight:500;}
  [data-biz-info] > summary{justify-content:flex-end;}   /* 푸터 맨 오른쪽 정렬 */

  /* 펼침 UI 정돈 — 버튼은 '문의' 오른쪽 링크 줄 안에(사장님 지시), 본문만 아래 줄 전체 폭으로.
     핵심은 `display:contents` — details를 레이아웃에서 지워 summary와 본문이 링크 줄의 flex 아이템이 됨.
     그래야 버튼은 링크들과 같은 줄에 서고, 본문은 flex-basis:100%로 다음 줄을 통째로 쓸 수 있다.
     (details를 그냥 flex 아이템으로 두면 펼칠 때 그 폭이 913px로 불어나 링크를 왼쪽으로 밀어냈음)
     본문은 flex+gap이면 줄바꿈 간격이 들쭉날쭉해 문장처럼 흐르는 인라인 + '·' 구분자 사용 */
  [data-biz-info]{display:contents;}
  [data-biz-info][open] > [data-biz-body]{display:block;flex:0 0 100%;text-align:right;max-width:720px;margin-left:auto;}
  [data-biz-body] > span + span::before,
  [data-biz-head] > span + span::before{content:"·";margin:0 8px;color:color-mix(in srgb, var(--muted) 45%, transparent);}
  /* 상호·사업자등록번호·통신판매업신고는 접지 않고 항상 보인다(사장님 지시).
     나머지(대표자·소재지·문의)는 전자상거래법 §10 표시 항목이라 지울 수 없어 토글에 남겼다 */
  [data-biz-head]{flex:1 1 auto;min-width:0;}
  [data-biz-more]{flex:0 0 auto;}
  /* PC 푸터: 상하 패딩 축소 + 정보는 링크 줄 아래 전체 폭으로(720px 제한 해제 — 줄 수를 줄임) */
  @media(min-width:901px){
    [data-footer] > div{padding-top:16px !important;padding-bottom:16px !important;
      justify-content:flex-start !important;gap:14px;}
    [data-footer] > div > div:first-child{margin-right:auto;}   /* 로고만 왼쪽, 링크+사업자정보는 오른쪽에 붙어 있게 */
    /* 사업자정보를 **아랫줄**로(사장님) — 폰(77·103차)과 같은 구조: 윗줄 [로고 ↔ 링크],
       아랫줄 [사업자정보 라벨][상호… / 펼치면 대표자…]. 라벨이 줄 맨 앞이라 토글해도 위치 불변. */
    [data-footer] > div{flex-wrap:wrap;}
    [data-footer] [data-biz-info]{display:flex !important;flex:0 0 100%;align-items:baseline;gap:8px;min-width:0;}
    [data-footer] [data-biz-info] > summary{flex:0 0 auto;justify-content:flex-start;}
    [data-biz-info][open] [data-biz-head]{display:none;}
    [data-biz-info][open] > [data-biz-body]{display:block;flex:none;max-width:none;
      text-align:left;margin-left:0;margin-top:0 !important;}
  }
  /* 모바일 푸터: 로고 축소 + 상하 패딩 제거(사장님 지시). 마지막 화면에서 푸터가 차지하던 123px → 66px.
     좌우 28px는 유지(본문 정렬선), 두 줄 사이 18px 간격도 유지 — 없애면 로고와 링크가 붙는다. */
  @media(max-width:900px){
    /* 상하 10px만(28px는 과했고 0은 테두리에 붙었음) + 두 줄 사이는 18 → 8px.
       아래 env()는 여백이 아니라 홈 인디케이터 회피분 */
    [data-footer] > div{padding-top:10px !important;
      padding-bottom:calc(10px + env(safe-area-inset-bottom)) !important;row-gap:8px !important;}
    /* 로고줄+링크줄을 **한 줄로**(사장님 지시). 393에서 두 줄분이 한 줄에 들어가려면 글자를 줄여야 한다:
       마크 16 → 9px('확 줄여줘') · 워드마크 15 → 13 · 카피라이트 13 → 10.5 · 링크 14 → 11px. */
    /* 두 줄 구조(사장님 지시): 윗줄은 기존처럼 양 끝(로고 ↔ 링크), 사업자정보는 아랫줄 왼쪽.
       사업자정보를 링크 div 밖으로 꺼냈기에(index.html) 100% 폭 아이템으로 줄을 차지할 수 있다. */
    [data-footer] > div{flex-wrap:wrap !important;justify-content:space-between !important;row-gap:8px !important;
      padding-left:16px !important;padding-right:16px !important;}
    [data-footer] > div > div:first-child{justify-content:flex-start !important;flex:0 0 auto;min-width:0;}
    [data-footer] > div > div:nth-child(2){justify-content:flex-end !important;flex:0 1 auto;min-width:0;}
    /* 펼친 내용은 '사업자정보' 라벨 오른쪽에서 시작한다(사장님 지시).
       그러려면 details가 레이아웃에 있어야 한다 — display:contents면 summary와 본문이 각각
       푸터의 flex 아이템이라 나란히 세울 기준이 없다. details를 아랫줄 전체(100%)를 쓰는
       flex 행으로 만들고 [라벨][본문]으로 나눈다. 닫힘 상태는 위의 :not([open]) 규칙이 그대로 담당 */
    [data-footer] [data-biz-info]{display:flex !important;flex:0 0 100% !important;
      align-items:baseline;gap:8px;min-width:0;}
    /* 이제 summary가 '항상 보이는 3개'까지 안고 있어 아랫줄 전체를 쓴다 — [사업자정보][상호·등록번호·신고번호] */
    [data-footer] [data-biz-info]{flex-wrap:wrap;}
    [data-footer] [data-biz-info] > summary{flex:0 0 100% !important;justify-content:flex-start !important;
      align-items:baseline;}
    /* 펼치면 나머지(대표자·소재지·문의)가 상호·등록번호·신고번호 **자리를 대체**한다(사장님).
       이어붙이기(102차)가 아니라 교체 — head를 감추고 body가 라벨 오른쪽 그 자리에 선다. */
    [data-footer] [data-biz-info][open] [data-biz-head]{display:none;}
    [data-footer] [data-biz-info][open] > summary{flex:0 0 auto !important;}   /* 라벨만 남으니 한 줄을 다 쥐지 않는다 */
    [data-footer] [data-biz-info][open] > [data-biz-body]{min-width:0;
      text-align:left;max-width:none;margin-left:0;margin-top:0 !important;}
    /* flex는 body가 아니라 ::details-content(UA 익명 상자)에 — details의 flex 아이템은 그 상자다(77차 함정).
       body에 flex:1을 줘도 상자가 기본값이라 통째로 다음 줄로 떨어졌다(실측 w361).
       미지원 브라우저는 이 규칙만 무시되어 아랫줄로 흐른다 — 깨지지 않는다. */
    [data-footer] [data-biz-info][open]::details-content{flex:1 1 0;min-width:0;}
    /* 항목이 '단어 중간'에서 접히지 않게(사장님 "정렬이 마음에 안 든다" — "통신판/매업신고"로 끊겨 있었다).
       폰에서는 항목을 통짜(nowrap)로 두고 flex-wrap으로 줄을 바꾼다. 항목이 덩어리로 떨어지니
       '·' 구분자는 접힌 줄 머리에 매달려 지저분해서 폰에서만 뺀다(간격이 구분을 담당). */
    [data-biz-head], [data-footer] [data-biz-info][open] > [data-biz-body]{
      display:flex;flex-wrap:wrap;column-gap:12px;row-gap:1px;}
    [data-biz-head] > span, [data-biz-body] > span{white-space:nowrap;}
    [data-biz-head] > span + span::before, [data-biz-body] > span + span::before{content:none;margin:0;}
    [data-footer] > div > div:first-child{gap:6px !important;}
    [data-footer] > div > div:first-child > div:first-child{width:9px !important;height:9px !important;border-radius:3px !important;box-shadow:none !important;}
    [data-footer] > div > div:first-child > div:nth-child(2){font-size:13px !important;}
    [data-footer] > div > div:first-child > span{font-size:10.5px !important;margin-left:4px !important;}
    [data-footer] > div > div:last-child{font-size:11px !important;gap:5px !important;flex-wrap:nowrap !important;}
    [data-biz-info] > summary{font-size:11px !important;gap:3px !important;}
  }
  /* 폰은 10 → 6px. 마지막 화면(사파리 바 표시 시 svh 664)에 요금+다운로드 카드까지 들여보내려면
     푸터도 6px 더 내놔야 했다. ≤900 규칙 뒤에 와야 덮어쓴다(같은 특이도 — 나중 규칙 승) */
  @media(max-width:640px){
    [data-footer] > div{padding-top:6px !important;
      padding-bottom:calc(26px + env(safe-area-inset-bottom)) !important;}   /* 6은 약관·방침 줄이 사파리 툴바에 깔림(사장님 'privacy가 너무 밑에') — 상단 헤더 버튼이 사라져 위 예산이 생겼다 */
  }
  /* ===== 폰 마지막 화면: pricing 콘텐츠를 위로 + 푸터는 바닥에(사장님 '바텀 패딩이 너무 많아') =====
     인너의 세로 중앙 정렬(인라인 center + ≤640 center !important)이 남는 높이를 위아래 반씩 나누는데,
     파란 카드가 빠지며 그 몫이 ~80pt까지 커져 위도 아래도 붕 떴다 → flex-start로 콘텐츠를 위에 붙이고
     남는 높이는 인너(flex:1) 하단이 흡수. 푸터는 100svh 섹션 바닥에 그대로 붙는다.
     푸터 하단 패딩도 26 → 12px(+safe-area). 위의 center·26px 규칙보다 뒤에 둬야 이긴다(동급 !important는 순서 승부) */
  @media(max-width:900px){
    /* 152차(사장님 '조금 더 중앙을 맞춰줘'): 버튼을 카드에 붙인 채(18px) 블록 전체를 세로 중앙으로 —
       남는 높이가 제목 위/버튼 아래로 반반 갈린다. 146~151차의 flex-start·auto 마진 왕복 최종형 */
    #pricing > div:first-child{justify-content:center !important;}
    [data-footer] > div{padding-bottom:calc(12px + env(safe-area-inset-bottom)) !important;}
    #download{margin-top:18px !important;margin-bottom:0 !important;}
    /* 약관·방침 링크 글자 14 → 12px(사장님 '조금 줄여').
       ⚠ 위의 div:last-child 11px 규칙(541줄)은 죽은 선택자 — 푸터 마지막 자식이 details라 div:last-child에 걸리는 div가 없다 */
    [data-footer] > div > div:nth-child(2){font-size:12px !important;}
  }
  /* 한 줄에 '실제로' 들어가는 폭에서만 링크를 감추고 정보를 그 자리에 올린다.
     필요폭 = 로고173 + 정보875 + 버튼63 + 간격30 = 1141 → 뷰포트 1141+패딩56 ≈ 1200부터 성립.
     그 아래(901~1199)에서 링크까지 감추면 타이틀은 사라진 채 정보만 두 줄로 남아 어색해짐
     → 사장님 지시대로 접히는 구간에서는 **타이틀을 기존 자리에 두고 정보만 아래로** 흘린다. */
  /* 위 규칙들(링크 감춤·본문을 같은 줄로·버튼 order:1)은 **정보 전체가 토글 안에 있던 시절**의 것이었다.
     이제 상호·등록번호·신고번호가 summary에 들어와 늘 링크 줄에 있으므로, 펼친 나머지까지 한 줄에
     욱여넣으면 [나머지][버튼][앞 3개] 순서로 뒤집혀 읽힌다(실측) → 나머지는 아랫줄 우측 정렬로.
     (기본 규칙 `[open] > [data-biz-body]{flex:0 0 100%;text-align:right;margin-left:auto}`가 그대로 담당) */
  @media(min-width:1200px){
    /* (11.5px 축소·구분자 조임 규칙 제거 — 2026-08-04 사장님 '폰트 사이즈 동일하게'. head와 같은 12px) */
  }
  [data-biz-info] > summary:focus{outline:none;}                       /* 클릭 시 파란 사각 테두리 제거 */
  [data-biz-info] > summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px;}

  /* 보안 카드: 아이콘·타이틀만 중앙, 본문은 좌측 그대로 — 전 뷰포트(사장님 지시) */
  [data-sec-grid] > div{display:grid !important;grid-template-columns:auto minmax(0,1fr);
    column-gap:10px;row-gap:8px;align-items:center;}
  [data-sec-grid] > div > div:first-child{grid-column:1;grid-row:1;}
  [data-sec-grid] > div > div:last-child{display:contents;}
  [data-sec-grid] > div h3{grid-column:2;grid-row:1;text-align:left;margin-bottom:0 !important;}
  [data-sec-grid] > div p{grid-column:1 / -1;grid-row:2;}

  /* FAQ 인트로 폭 640 → 780(PC).
     사장님 "언어마다 타이틀이 살짝 위아래로 움직인다" — 섹션이 콘텐츠를 세로 중앙 정렬하는데
     인도네시아어만 h2가 두 줄로 접혀(1440에서 675px 필요 > 640) 전체 높이가 53px 늘고
     타이틀이 26px 위로 올라갔다. 폭을 넓혀 14개 언어 전부 한 줄로 → 높이 고정 → 안 움직인다. */
  @media(min-width:901px){
    #faq > div:first-child > div:first-child{max-width:780px !important;}
  }

  /* FAQ 카테고리 — 낱개 칩 → '세그먼트 컨트롤'(사장님 지시로 방식 변경).
     낱개 칩은 ①떨어져 있어 하나의 스위치로 안 읽히고 ②모바일에서 3+1로 접혀 마지막 항목이 외톨이가 됐음.
     하나의 트랙 안에 4칸을 균등 분할하면 '탭 4개 중 하나' 라는 게 형태로 드러나고, 폭도 항상 한 줄에 맞는다. */
  /* 4칸을 '가장 긴 라벨' 폭으로 **균등**하게(사장님: Features·My Data도 왼쪽 두 개와 같은 폭으로).
     flex 균등(1 1 0)은 트랙이 화면 폭에 묶여 긴 라벨이 옆 칸을 침범했지만(48차),
     grid의 1fr은 width:max-content 트랙에서 '최장 칸 폭'으로 풀려 넘칠 일이 없다. */
  .faq-chips{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:3px;
    width:max-content;max-width:100%;box-sizing:border-box;
    margin:0 auto 30px;padding:4px;border-radius:999px;
    background:rgba(24,26,32,.07);border:1px solid rgba(24,26,32,.08);}
  .faq-chip{min-width:0;height:38px;padding:0 16px;border:none;border-radius:999px;background:transparent;
    font-family:inherit;font-size:14px;font-weight:700;color:#5A5E66;cursor:pointer;white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis;
    transition:background .2s,color .2s,box-shadow .2s;}
  .faq-chip:hover{color:#16181d;}
  .faq-chip.on{background:var(--accent);color:#fff;
    box-shadow:0 4px 12px -4px color-mix(in srgb, var(--accent) 60%, transparent);}
  [data-faq] .faq-off{display:none !important;}
  [data-faq-col] > div:not([data-faq-item]){display:none !important;}     /* 그룹 헤더는 칩이 대체 */
  /* align-content:start 필수 — 컨테이너 높이를 '전 그룹 최대'로 고정한 뒤(109차), 기본값(stretch)이
     빈 열(auto 행)까지 잡아 늘려 짧은 그룹에서 질문 '위'에 큰 공백이 생겼다(사장님 스크린샷).
     start면 문항이 칩 바로 아래 붙고 남는 공간은 바닥으로 간다. */
  [data-faq]{grid-template-columns:1fr;max-width:760px;margin:0 auto;align-content:start;}    /* 선택 그룹 중앙 배치([data-faq] 자체를 2열로 두면 그룹이 한 열에 몰려 한쪽이 빈다) */
  /* 긴 그룹(요금 및 구독)만 PC에서 세로 2열 — 짧은 그룹까지 펴면 문항이 듬성듬성해진다(사장님).
     스위치는 script.js 가 문항 수로 켠다(html.faq-2col 아님, [data-faq].faq-2col).
     열 나누기를 [data-faq-col] '안'에서 하는 이유:
     ① 이 래퍼가 실제 박스로 남아야 sizeFaq 의 col.offsetHeight 측정이 그대로 동작한다
        (display:contents 로 지우면 0이 되어 고정 높이 계산이 통째로 깨진다)
     ② grid(행 흐름)라 답변을 펼쳐도 항목이 열 사이를 오가지 않는다
        (multi-column 은 펼칠 때마다 재분배돼 문항이 반대 열로 튄다) */
  [data-faq-col]{display:grid;grid-template-columns:1fr;column-gap:clamp(28px,4vw,56px);align-content:start;}
  @media(min-width:761px){
    [data-faq].faq-2col{max-width:1040px;}                                  /* 2열일 때만 넓힌다 — 1열 그룹은 760px 가독 폭 유지 */
    /* 읽는 순서는 '1열 위→아래, 그다음 2열 위→아래'(사장님). grid 기본은 행 흐름이라
       좌우로 번갈아 읽히므로 auto-flow:column + 행 수 고정으로 뒤집는다.
       행 수(--faq-rows)는 그룹 문항 수의 절반이라 CSS로는 못 구한다 → script.js 가 apply() 에서 넘긴다. */
    [data-faq].faq-2col [data-faq-col]{grid-template-columns:1fr 1fr;
      grid-auto-flow:column;grid-template-rows:repeat(var(--faq-rows,8), auto);}
  }
  #faq{justify-content:center;}                                           /* 섹션(100vh) 세로 중앙 — 상단 고정+하단 공백 불균형 해소 */
  @media(max-width:760px){
    /* 트랙을 화면 폭에 맞추고 4칸 균등 분할 → 항상 한 줄(낱개 칩 시절의 3+1 줄바꿈 해소).
       글자는 12px, 좌우 패딩 최소 — '요금 및 구독'(가장 긴 라벨)이 잘리지 않는 하한 */
    .faq-chips{width:100%;margin-bottom:22px;}
    /* 좁은 화면에선 네 칸을 균등 분배하되(가로 스크롤 없이 4개 다 보이게) 라벨은 두 줄까지 접는다.
       영문·포르투갈어는 한 줄로는 절대 안 들어가 잘림(…)이 되는데, 필터는 글자가 보여야 고른다. */
    /* min-height는 '두 줄'분(52) — 한 줄짜리 언어(ko·ja)와 두 줄짜리(es·pt·id)의 칩 줄 높이가
       48/62로 갈리면 섹션이 세로 중앙 정렬이라 타이틀이 언어마다 최대 18px 위아래로 움직였다 */
    .faq-chip{height:auto;min-height:46px;padding:4px 6px;font-size:11.5px;letter-spacing:-.3px;   /* 칸 균등은 이제 grid 1fr이 담당(flex 무효) */
      white-space:normal;line-height:1.15;overflow:visible;text-overflow:clip;
      overflow-wrap:break-word;}   /* 칸보다 긴 단어만 쪼갠다. anywhere로 두면 "Subscription/s"처럼 들어가는 단어도 끊김 */
    [data-faq-q]{padding:15px 4px !important;}                            /* 문항 컴팩트(22px→15px) */
  }

  /* 맨 위로 FAB — 글래시(블러+반투명), 스크롤 내리면 표시(html.fab-on ← v2/script.js) */
  /* 푸터 링크 구분자 */
  [data-fdiv]{color:color-mix(in srgb, var(--muted) 42%, transparent);font-weight:400;user-select:none;}
  /* (구분자 숨김 규칙 삭제 — '문의' 링크를 빼면서 폰에서도 세 항목이 한 줄에 들어간다.
     문의는 이메일이 사업자정보 안에 이미 있어 중복이었다. 사장님 지시 2026-08-03) */

  /* 리프트(--fab-lift)는 폐기 — 위로 밀면 요금 카드를 걸쳐서, 이제 끝 구간에선 아예 감춘다(v2/script.js) */
  /* 플로팅 버튼 3종(맨 위로 · 미트볼 · 펼친 메뉴)은 참고 컴포넌트(shadcn outline 버튼)의 결을 따른다:
     흰 면 + 얇은 테두리 + 옅은 그림자 + 어두운 아이콘. 값은 여기 한 곳에서 관리한다 */
  :root{--fab-bg:#fff;--fab-bd:rgba(15,18,24,.10);--fab-ink:#0F1218;
    --fab-sh:0 1px 2px rgba(10,15,30,.06), 0 10px 26px -14px rgba(10,15,30,.35);
    --fab-hover:rgba(107,114,128,.12);}
  #topFab{position:fixed;right:16px;bottom:calc(18px + env(safe-area-inset-bottom));z-index:95;
    width:46px;height:46px;border-radius:50%;border:1px solid var(--fab-bd);padding:0;
    background:var(--fab-bg);
    color:var(--fab-ink);display:flex;align-items:center;justify-content:center;cursor:pointer;font-family:inherit;
    box-shadow:var(--fab-sh);
    opacity:0;transform:translateY(10px);pointer-events:none;
    transition:opacity .3s ease, transform .3s ease, background .2s ease;}
  html.fab-on #topFab{opacity:1;transform:none;pointer-events:auto;}
  @media(hover:hover) and (pointer:fine){ #topFab:hover{background:#F4F5F7;} }

  /* ===== 미트볼(⋯) — FAB 바로 아래(사장님 지시) =====
     PC엔 우상단 언어 지구본이 있으므로 모바일 전용. 모바일은 35차에 지구본을 뺀 뒤로
     언어를 바꿀 방법이 없었는데, 이 버튼이 그 역할을 맡는다.
     FAB는 스크롤해야 뜨지만(html.fab-on) 미트볼은 항상 떠 있다 — 메뉴는 언제든 필요하다. */
  #dotsFab{display:none;}
  @media(max-width:900px){
    #dotsFab{position:fixed;right:16px;bottom:calc(18px + env(safe-area-inset-bottom));z-index:95;
      display:flex;align-items:center;justify-content:center;
      width:46px;height:46px;border-radius:50%;border:1px solid var(--fab-bd);padding:0;
      background:var(--fab-bg);
      color:var(--fab-ink);cursor:pointer;font-family:inherit;
      box-shadow:var(--fab-sh);transition:background .2s ease;}
    /* ===== '맨 위로' + 미트볼 = 세로 캡슐 하나(사장님 지시) =====
       래퍼가 면·테두리·그림자를 그리고 두 버튼은 아이콘만 남는다.
       FAB는 스크롤해야 뜨므로(html.fab-on) 캡슐은 **높이가 자란다** — 가로 메뉴와 같은 방식.
       메뉴가 열리면 캡슐은 미트볼 한 칸으로 줄고 면도 지운다(가로 알약과 이어져 하나로 보이게). */
    /* 세로 패딩 3 + 버튼 38 → 닫힘 높이 46(= 폭, 정확히 원)이면서 두 아이콘 중심은 38px 간격.
       가로 메뉴의 아이콘 간격(글리프 사이 18px)과 같아진다(사장님: 이 간격도 줄여달라 — 24 → 18) */
    .fab-stack{position:fixed;right:16px;bottom:calc(18px + env(safe-area-inset-bottom));z-index:97;
      box-sizing:border-box;width:46px;padding:3px 0;display:flex;flex-direction:column;align-items:center;
      border-radius:999px;border:1px solid rgba(255,255,255,.55);
      background:rgba(255,255,255,.55);
      -webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5);   /* 글래스(사장님) — 언어 판과 같은 재질 */
      box-shadow:var(--fab-sh);
      overflow:hidden;transition:background .2s ease, border-color .2s ease, box-shadow .2s ease;}
    #topFab,#dotsFab{position:static !important;right:auto !important;bottom:auto !important;
      width:38px;height:38px;flex:none;border:none !important;background:none !important;
      box-shadow:none !important;border-radius:50%;transform:none !important;}
    @media(hover:hover) and (pointer:fine){ #dotsFab:hover{background:var(--fab-hover) !important;} }
    /* FAB: 안 보일 땐 높이 0 → 캡슐이 미트볼 한 칸으로 줄어든다(가로 strip과 같은 이징) */
    #topFab{height:0;opacity:0;pointer-events:none;
      transition:height .34s cubic-bezier(.22,1,.28,1), opacity .2s ease;}
    html.fab-on #topFab{height:38px;opacity:1;pointer-events:auto;}
    html.dots-open #topFab{height:0;opacity:0;pointer-events:none;}
    /* 다운로드(헤더의 검은 원을 캡슐로 내림 — 사장님) — 미트볼 위, 항상 표시.
       메뉴가 열리면 ↑처럼 접혀 캡슐이 미트볼 한 칸이 된다(가로 알약과 이어지는 기존 연출 유지) */
    .fab-dl{width:38px;height:38px;flex:none;border-radius:50%;
      display:flex;align-items:center;justify-content:center;
      background:rgba(15,18,24,.78);color:#fff;text-decoration:none;overflow:hidden;   /* 순검정에서 톤 다운(사장님) */
      transition:height .34s cubic-bezier(.22,1,.28,1), opacity .2s ease, transform .12s ease;}
    .fab-dl:active{transform:scale(.92);}
    html.dots-open .fab-dl{height:0;opacity:0;pointer-events:none;}
    [data-dl-round]{display:none !important;}   /* 헤더 우상단 원은 캡슐이 대체 */
    html.dots-open .fab-stack{background:none;border-color:transparent;box-shadow:none;}
    /* 숨김 신호를 qr-hide(다운로드 카드 진입) → cap-hide(푸터 진입)로 — 요금·다운로드 구간에서도 계속 떠 있고
       약관·방침 줄이 올라올 때만 비켜준다(2026-08-04 사장님) */
    html.cap-hide .fab-stack{visibility:hidden;pointer-events:none;transition:visibility .3s;}
    /* 펼치면 ⋯ → X (사장님 지시). 두 아이콘을 겹쳐 두고 회전+페이드로 바꾼다 —
       display 토글이면 딱딱하고, 버튼이 flex 중앙정렬이라 겹치려면 절대배치가 필요하다 */
    #dotsFab [data-ic-dots],#dotsFab [data-ic-x]{position:absolute;
      transition:opacity .18s ease, transform .22s cubic-bezier(.2,.7,.2,1);}
    #dotsFab [data-ic-x]{opacity:0;transform:rotate(-90deg) scale(.8);}
    #dotsFab[aria-expanded="true"] [data-ic-dots]{opacity:0;transform:rotate(90deg) scale(.8);}
    #dotsFab[aria-expanded="true"] [data-ic-x]{opacity:1;transform:none;}
    /* (FAB를 미트볼 위 74px에 띄우던 규칙 제거 — 이제 둘은 .fab-stack 안에 세로로 붙어 있다) */
    /* 페이지 끝(다운로드 카드가 화면에 들어온 구간)에서는 미트볼도 감춘다 —
       푸터가 바로 그 자리에 있어 링크 오른쪽('개인정보처리방침')을 덮었다. FAB와 같은 신호(html.qr-hide) 사용. */
    /* 끝 구간 숨김은 캡슐(.fab-stack)에서 한 번에 — 아래 규칙 참조 */
  }
  /* 언어 팝오버 — 미트볼 위로 펼친다(아래는 화면 끝) */
  /* 나머지 플로팅 UI와 같은 모션·재질로(사장님 "언어 모달만 바꾸면") —
     ① 2열 그리드: 14개 세로 한 줄(380px 스크롤)은 이 캡슐 세계에서 혼자 길쭉했다 → 스크롤 없이 한 화면
     ② 여는 연출: display 스위치(뚝) → 지구본 쪽(우하단)에서 fade + scale로 펴진다(가로 바와 같은 이징) */
  /* 한 글자 칩 7×2(사장님 지시) — 가로 메뉴와 같은 34px 원형 칩, 풀 네임은 툴팁.
     overflow:visible 필수 — 툴팁이 팝오버 위로 튀어나온다(스크롤이 없어져 잘라낼 이유도 없다) */
  /* 낱개 원 + 그 뒤에 살짝 불투명한 유리판(사장님) — 원들이 콘텐츠 위에 바로 떠 있으면
     뒤 글자가 원 사이로 비쳐 어수선했다. 판은 흐린 배경일 뿐 면·테두리는 여전히 칩이 각자 */
  .dots-pop{position:fixed;right:16px;bottom:calc(74px + env(safe-area-inset-bottom));z-index:96;
    display:grid;grid-template-columns:repeat(7,36px);gap:7px;width:max-content;
    overflow:visible;padding:9px;border-radius:18px;border:none;
    background:rgba(255,255,255,.55);
    -webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5);
    box-shadow:0 14px 34px -18px rgba(10,15,30,.35);
    opacity:0;visibility:hidden;pointer-events:none;
    transform:translate(6px,8px) scale(.95);transform-origin:bottom right;
    transition:opacity .2s ease, transform .22s cubic-bezier(.2,.7,.2,1), visibility .22s;}
  .dots-pop.open{opacity:1;visibility:visible;pointer-events:auto;transform:none;}
  /* 미트볼에서 왼쪽으로 펴지는 메뉴(사장님 지시 + 참고 프롬프트의 quick-tooltip-actions 느낌).
     **하나의 알약 안에 아이콘 버튼들**을 담고, 라벨은 아이콘 위 작은 툴팁으로 띄운다.
     글자를 아이콘으로 바꾼 덕에 언어와 무관하게 폭이 일정하다 — 텍스트 칩일 때는 폰 가용폭 305px에
     ko·zh만 들어가고 fr 426 · vi 420이라 줄을 접어야 했다(78차). */
  /* 미트볼과 같은 규격(사장님 지시) — 다크 글래스로 맞췄다가, 참고 컴포넌트의 결(흰 면 + 테두리)로 통일.
     펼침 연출도 radix 툴팁과 같게: fade + zoom-95 + 트리거 쪽에서 밀려 나옴 */
  /* 알약이 미트볼 자리까지 덮고(오른쪽 패딩 = 버튼 46 + 여유 6), 미트볼은 열렸을 때 자기 테두리·면을 지운다
     → 둘이 붙은 게 아니라 **처음부터 하나의 캡슐**로 보인다(사장님 "하나처럼"). 닫히면 알약이 사라지므로 무해 */
  /* 펼침 방식은 참고 컴포넌트(toolbar-dock)를 따른다: 아이콘 줄을 overflow 클립 영역에 넣고
     그 **폭만 0 ⇄ 실측값**으로 움직인다. 알약은 오른쪽(미트볼)에 고정돼 있으므로 폭이 자라면
     왼쪽으로 열리고, 안쪽 내용이 오른쪽 기준이라 아이콘이 토글에서 밀려 나오고 다시 말려 들어간다.
     페이드/스케일을 쓰지 않는 이유: '토글에서 나온다'는 인상이 흐려진다.
     스프링(stiffness 460 · damping 42 · mass 0.9)은 감쇠비 ≈1.03(오버슛 없음)이라 이징으로 근사했다 */
  .dots-bar{position:fixed;right:16px;bottom:calc(18px + env(safe-area-inset-bottom));z-index:96;
    box-sizing:border-box;height:46px;display:flex;align-items:center;
    padding-right:41px;   /* 미트볼 자리. 41이어야 마지막 칩↔X의 중심 간격이 다른 칩과 같은 36px이 된다(실측) */
    border-radius:999px;border:1px solid var(--fab-bd);
    background:var(--fab-bg);box-shadow:var(--fab-sh);color:var(--fab-ink);
    visibility:hidden;pointer-events:none;transition:visibility 0s .34s;}
  .dots-bar.open{visibility:visible;pointer-events:auto;transition:visibility 0s 0s;}
  .dots-strip{position:relative;height:34px;width:0;overflow:hidden;
    transition:width .34s cubic-bezier(.22,1,.28,1);}
  .dots-bar.open .dots-strip{width:var(--strip-w,0px);}
  .dots-strip-in{position:absolute;right:0;top:0;height:34px;
    display:flex;align-items:center;gap:2px;padding-left:4px;}   /* 왼쪽 여백 17 → 13 = 오른쪽(X↔알약 끝)과 동일 */
  .dots-chip{position:relative;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
    width:34px;height:34px;padding:0;border:none;border-radius:50%;background:none;
    font-family:inherit;color:var(--fab-ink);text-decoration:none;cursor:pointer;
    transition:background .15s ease, transform .12s ease;}
  /* ⚠ iOS는 탭 뒤 :hover가 눌러붙는다(75차와 같은 병) — 지구본 칩에 회색 원이 남아
     바로 옆 X(미트볼)와 겹쳐 보였다(사장님). 배경은 마우스에만 준다. */
  @media(hover:hover) and (pointer:fine){
    .dots-chip:hover{background:var(--fab-hover);}   /* 참고 컴포넌트의 hover:bg-muted-foreground/10 */
  }
  .dots-chip:active{transform:scale(.92);}
  .dots-chip svg{width:18px;height:18px;}
  /* 라벨: 아이콘 위 작은 팝오버. 터치에는 hover가 없으므로 :active(누르는 동안)에도 띄운다 */
  .dots-tip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);
    padding:3px 8px;border-radius:8px;border:1px solid var(--fab-bd);
    background:var(--fab-bg);box-shadow:var(--fab-sh);
    font-size:11px;font-weight:700;letter-spacing:-.2px;color:var(--fab-ink);white-space:nowrap;
    opacity:0;pointer-events:none;transition:opacity .2s ease;}
  .dots-chip:active .dots-tip{opacity:1;}
  @media(hover:hover) and (pointer:fine){ .dots-chip:hover .dots-tip{opacity:1;} }
  html.cap-hide .dots-bar{visibility:hidden;pointer-events:none;}
  html.cap-hide .dots-bar .dots-strip{width:0;}
  /* PC는 예전 그대로 — 래퍼를 레이아웃에서 지우면 #topFab이 자기 fixed 규칙으로 돌아간다(미트볼은 어차피 숨김) */
  @media(min-width:901px){.dots-bar{display:none;}.fab-stack{display:contents;}.fab-dl{display:none;}}
  /* 팝오버는 #root 밖(body)에 붙는다 — #root가 ≤900에서 overflow-x:clip이라 안에 두면 잘릴 수 있어서.
     ⚠ 여기선 색 변수를 쓰면 안 된다: --ink는 #root에선 #0F1218이지만 html/body 레벨에는 v2가 다크용으로
     **#ffffff**를 정의해 둬서, 흰 팝오버에 흰 글자가 됐다(폴백도 소용없음 — 변수가 '정의는 돼' 있으니). 리터럴로 고정. */
  .dots-pop button{appearance:none;font-family:inherit;font-size:14px;font-weight:700;
    color:var(--fab-ink);width:36px;height:36px;padding:0;border-radius:50%;cursor:pointer;white-space:nowrap;
    position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;
    background:var(--fab-bg);border:1px solid var(--fab-bd);box-shadow:var(--fab-sh);
    transition:background .15s ease, color .15s ease;}
  .dots-pop button:active .dots-tip{opacity:1;}
  @media(hover:hover) and (pointer:fine){
    .dots-pop button:hover .dots-tip{opacity:1;}
    .dots-pop button:hover{background:var(--fab-hover);}
  }
  .dots-pop button.cur{background:#1577F2;color:#fff;border-color:transparent;}
  /* PC 우측 하단은 플로팅 QR(타일 118px)이 차지 → FAB를 그 위로(18 + 118 + 10). QR이 감춰지면 원위치.
     타일 높이는 언어와 무관하게 118 고정(캡션이 max-content 폭으로 항상 한 줄) */
  @media(min-width:901px){
    #topFab{bottom:146px;}
    html.qr-hide #topFab{bottom:18px;}
  }

  /* (후기 섹션 제거 — 2026-07-27 목 데이터 정리) */

  /* ===== 스토어 버튼 '곧 출시' 표시 (163차~, 167차 개편) =====
     스토어 URL이 아직 없어 스토어 버튼 10개가 전부 #download 플레이스홀더다(눌러도 아무 일 없음).
     실제 링크가 나오면 이 블록과 script.js의 markSoon() IIFE만 지우면 원상복구된다.
     이력: 163차 반투명 막+중앙 칩(버튼이 죽고 라벨과 겹침) → 165차 버튼 위 바깥 칩
           → 167차(사장님) **칩을 없애고 글자만, 비활성 버튼 위에 겹쳐서**.
     버튼 자체를 흐리게 눌러 '비활성'을 보여주고, 그 위에 또렷한 글자만 얹는다. */
  .soon-wrap{position:relative;display:inline-flex;}
  .soon-wrap > a{pointer-events:none;opacity:.55;filter:saturate(.8);}   /* 비활성으로 눌러 둔다 */
  .soon-wrap svg{flex:none;}
  /* 글자는 버튼 한가운데(사장님). 라벨과 정면으로 겹치면 둘 다 못 읽으므로 **라벨을 비운다** —
     opacity:0이라 자리는 그대로 남아 스토어 아이콘은 제 위치(왼쪽)에 있고, 비워진 라벨 자리에 글자가 온다. */
  .soon-wrap > a .btn__label{opacity:0;}
  #download .soon-wrap > a > div{opacity:0;}
  .soon-veil{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;
    pointer-events:none;}
  .soon-veil > span{font-size:15px;font-weight:800;letter-spacing:-.2px;color:#fff;white-space:nowrap;
    text-shadow:0 1px 8px rgba(0,0,0,.55);}
  /* 라이트 배경(다운로드 섹션)에서는 흐려진 흰 버튼 위라 어두운 글자가 읽힌다 */
  #download .soon-veil > span{color:#0F1218;text-shadow:0 1px 6px rgba(255,255,255,.8);}
  /* 버튼이 풀폭 스택인 폰에서는 래퍼도 같이 늘어나야 글자가 버튼 한가운데 온다 */
  @media(max-width:900px){
    .hero__cta .soon-wrap, .story__cta .soon-wrap, .caro__dl .soon-wrap{width:100%;max-width:300px;}
    .hero__cta .soon-wrap > a, .story__cta .soon-wrap > a, .caro__dl .soon-wrap > a{width:100%;max-width:100%;}
    [data-dl-btns] .soon-wrap{flex:1 1 0;min-width:0;}
    /* ⚠ 8차의 `[data-dl-btns] a{width:calc(50% - 5px) !important}`는 부모가 [data-dl-btns]일 때 값이다.
       래퍼가 끼면 기준이 래퍼로 바뀌어 버튼이 반의 반으로 찌그러진다 → 래퍼 안에서는 100%. */
    [data-dl-btns] .soon-wrap > a{width:100% !important;max-width:none !important;}
    [data-dl-btns] .soon-veil > span{font-size:13px;}
  }

  /* 캡슐 ⬇(요금 화면으로): 첫 두 화면(히어로·스토리)에서는 감춘다 — 그 화면들이 이미 스토어 버튼을
     크게 들고 있어 중복이다(2026-08-05 사장님). 신호는 v2/script.js의 dl-hide.
     ↑(맨 위로)는 원래 스크롤해야 뜨므로 여기선 어차피 안 보이고, ⋯(미트볼)만 남는다. */
  html.dl-hide .fab-dl{height:0;opacity:0;pointer-events:none;
    transition:height .28s cubic-bezier(.22,1,.28,1), opacity .18s ease;}

/* ===== 리퍼럴 배너 (?ref=HAULO-XXXXXX) =====
   기본은 display:none — 파라미터가 없으면 마크업이 있어도 레이아웃에 1px도 관여하지 않는다.
   fixed·sticky가 아니라 '흐름 맨 위'에 둔다: 각 섹션이 한 화면(svh 664)에 딱 맞게 높이 예산을
   짜여 있어(39·148차) 상시 떠 있는 띠는 그 예산을 통째로 갉아먹는다. 스크롤하면 자연스럽게
   지나가고, 코드는 그 전에 클립보드로 들어가 있다.
   색은 리터럴로 — 배너가 켜지는 자리는 히어로(다크 영상) 위라 --ink(어두운 잉크)를 쓰면 안 된다. */
/* 흐름이 아니라 '히어로 위에 얹는다'(사장님) — 흐름에 두면 아래 내용이 통째로 배너 높이만큼
   내려가 히어로가 밀린 느낌이 난다. absolute라 히어로는 제자리에서 화면을 꽉 채우고, 스크롤하면
   배너만 자연스럽게 지나간다(fixed로 두면 모든 섹션의 한 화면 예산을 갉아먹는다 — 39·148차).
   재질은 사이트의 기존 글래스(.nav.is-scrolled)와 같은 값 — 얹힌 판으로 읽히게. */
.refb{display:none;position:absolute;top:0;left:0;right:0;z-index:101;
  background:rgba(10,15,30,.72);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);
  border-bottom:1px solid rgba(255,255,255,.10);}
.refb.on{display:block;}
/* 고정 헤더 둘을 배너가 남아 있는 만큼만 아래로(--refb-top은 script.js가 스크롤에 맞춰 0으로 줄인다).
   #v2nav는 margin으로 — top은 아일랜드 모프(top:10px)가 쓰고 있어 뺏으면 연출이 깨진다.
   #nav는 sticky/fixed라 top이 맞다(인라인 top:0을 이겨야 해서 !important). */
html.refb-on #v2nav{margin-top:var(--refb-top,0px);}
html.refb-on #nav{top:var(--refb-top,0px) !important;}
/* 언어 지구본은 두 헤더 '밖'의 별도 fixed 요소(#langFloat)라 위 두 줄로는 안 움직인다 —
   그대로 두면 헤더만 내려가고 지구본만 배너 옆에 남는다(사장님 PC 스크린샷). 같은 만큼 함께 내린다.
   ⚠ top 이 아니라 transform 인 이유: #langFloat 은 `transition:top .45s`(아일랜드 모프를 따라가는 연출)라
   스크롤마다 바뀌는 값을 top 으로 주면 헤더는 즉시 움직이는데 지구본만 0.45초씩 뒤따라와 따로 논다.
   transform 은 전환 목록에 없어 즉시 반영되고, top 은 아일랜드 모프(10px↔17px)에 그대로 남겨 둔다. */
html.refb-on #langFloat{transform:translateY(var(--refb-top,0px));}
.refb [hidden]{display:none;}
.refb__in{position:relative;max-width:1080px;margin:0 auto;display:flex;align-items:center;gap:14px;padding:13px 52px 13px 20px;}
.refb__gift{flex:none;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:12px;background:rgba(21,119,242,.22);color:#7FB4FA;}
.refb__txt{min-width:0;}
.refb__title{font-size:14.5px;font-weight:800;letter-spacing:-.2px;color:#fff;}
.refb__sub{margin-top:2px;font-size:12.5px;font-weight:500;line-height:1.45;color:rgba(255,255,255,.62);}
/* 이미 앱을 쓰는 사람용 보조 안내 — 한 급 더 흐리게 해서 각주로 읽히게(주된 동선은 위 두 줄) */
.refb__hint{margin-top:3px;font-size:11.5px;font-weight:500;line-height:1.4;color:rgba(255,255,255,.42);}
.refb__code{flex:none;margin-left:auto;padding:8px 14px;border-radius:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:19px;font-weight:700;letter-spacing:1.2px;color:#fff;white-space:nowrap;}
.refb__acts{flex:none;display:flex;align-items:center;gap:8px;}
.refb__copy,.refb__get{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:40px;padding:0 16px;border-radius:999px;border:none;
  font-family:inherit;font-size:13.5px;font-weight:700;white-space:nowrap;text-decoration:none;cursor:pointer;transition:background .15s ease, transform .12s ease;}
.refb__copy{position:relative;background:#1577F2;color:#fff;}
/* 복사 성공 말풍선: absolute라 버튼 폭도 배너 높이도 건드리지 않는다(레이아웃 점프 0) */
.refb__tip{position:absolute;top:calc(100% + 7px);left:50%;transform:translateX(-50%);
  padding:5px 10px;border-radius:9px;background:#0F1218;border:1px solid rgba(255,255,255,.18);
  color:#fff;font-size:12px;font-weight:700;white-space:nowrap;pointer-events:none;
  box-shadow:0 10px 24px -10px rgba(0,0,0,.7);}
.refb__get{background:rgba(255,255,255,.94);color:#0F1218;}
.refb__copy:active,.refb__get:active{transform:scale(.97);}
.refb__ic{flex:none;}
.refb__x{position:absolute;top:50%;right:8px;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:999px;background:none;border:none;color:rgba(255,255,255,.5);cursor:pointer;transition:background .15s ease,color .15s ease;}
/* 터치에서는 :hover가 탭 뒤에 눌러붙는다(75·164차) → 마우스에만 */
@media(hover:hover) and (pointer:fine){
  .refb__copy:hover{background:#0F6AE0;}
  .refb__get:hover{background:#fff;}
  .refb__x:hover{background:rgba(255,255,255,.12);color:#fff;}
}
/* 폰: 제목·설명 / 코드+버튼 두 덩어리로. 코드와 버튼이 한 줄에 들어가도록 치수를 잡아
   3행(≈112px)에 묶는다 — 히어로가 svh 664 안에 CTA까지 담아야 하므로(166차) 배너가 두꺼우면
   스토어 버튼이 접힌다. 라벨이 긴 언어는 자연스럽게 한 줄 더 접힌다(넘침 없음). */
@media(max-width:900px){
  .refb__in{flex-wrap:wrap;justify-content:center;text-align:center;gap:7px;padding:10px 40px 11px 16px;}
  .refb__gift{display:none;}
  .refb__txt{flex:0 0 100%;}
  .refb__title{font-size:14px;}
  .refb__sub{margin-top:1px;font-size:12px;}
  .refb__hint{margin-top:2px;font-size:11px;}
  /* 코드 칩이 폰에서 너무 커 보였다(사장님) → 한 급 줄이고, 버튼 둘은 라벨을 빼고
     아이콘만 남겨 코드 바로 옆에 붙인다. 이름은 aria-label이 계속 들고 있다. */
  .refb__code{margin-left:0;padding:5px 10px;border-radius:9px;font-size:15px;letter-spacing:1px;}
  .refb__acts{gap:6px;}
  .refb__lb{display:none;}
  .refb__copy,.refb__get{width:34px;height:34px;padding:0;gap:0;}
  .refb__x{top:6px;right:5px;transform:none;width:30px;height:30px;}
}
@media(max-width:380px){
  .refb__in{padding-right:36px;}
  .refb__code{font-size:14px;padding:5px 9px;}
}