/* =========================================================
   50. 반응형 시스템 · 최종 레이어
   1280 데스크탑 → 1180/1024 태블릿 가로 → 900 태블릿 세로
   → 740/640 폰 → 420 소형 폰 → 가로모드 → 터치
   ========================================================= */

/* ---------- 50-0. 공통 토큰 · 넘침 가드 ---------- */
:root{
  --pad-x:clamp(18px,5vw,60px);      /* 페이지뷰 좌우 여백 · 안전영역 계산 기준 */
}
html{-webkit-text-size-adjust:100%}
#pgbody>*,#pgfoot>*,.site-footer *{min-width:0}
#pgbody{word-break:keep-all;overflow-wrap:anywhere}
input,select,textarea{max-width:100%}
/* 노치 · 홈 인디케이터 안전영역 */
#pgbody,#pgfoot,#pghead{
  padding-left:max(var(--pad-x),env(safe-area-inset-left));
  padding-right:max(var(--pad-x),env(safe-area-inset-right))}
#pgfoot{padding-bottom:max(clamp(40px,6vh,64px),env(safe-area-inset-bottom))}

/* ---------- 50-1. 모바일 내비게이션 ---------- */
.site-nav__burger{display:none;flex-direction:column;justify-content:center;gap:4.5px;
  width:38px;height:38px;padding:0 8px;border:0;background:transparent;border-radius:12px;
  color:#fff;transition:background .3s var(--ease),color .6s var(--ease)}
.site-nav__burger span{display:block;height:1.8px;border-radius:2px;background:currentColor;
  transition:transform .32s var(--ease),opacity .22s var(--ease)}
.site-nav__bar.light .site-nav__burger{color:var(--deep)}
.site-nav__bar.menuon .site-nav__burger span:nth-child(1){transform:translateY(6.3px) rotate(45deg)}
.site-nav__bar.menuon .site-nav__burger span:nth-child(2){opacity:0}
.site-nav__bar.menuon .site-nav__burger span:nth-child(3){transform:translateY(-6.3px) rotate(-45deg)}

@media (max-width:860px){
  .site-nav__burger{display:flex}
  .site-nav__menu{display:flex!important;position:fixed;left:0;right:0;top:58px;margin:0;
    flex-direction:column;gap:0;
    padding:6px max(18px,env(safe-area-inset-left))
            calc(10px + env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-right));
    background:rgba(247,250,254,.97);
    -webkit-backdrop-filter:blur(20px) saturate(1.4);backdrop-filter:blur(20px) saturate(1.4);
    border-bottom:1px solid var(--line);box-shadow:0 24px 44px -30px rgba(12,27,46,.6);
    opacity:0;visibility:hidden;transform:translateY(-12px);
    transition:opacity .3s var(--ease),transform .34s var(--ease),visibility .34s}
  .site-nav__bar.menuon .site-nav__menu{opacity:1;visibility:visible;transform:none}
  .site-nav__bar .site-nav__menu button,
  .site-nav__bar.light .site-nav__menu button{
    color:rgba(12,27,46,.72);font-size:15px;font-weight:700;text-align:left;
    padding:14px 4px;border-bottom:1px solid rgba(12,27,46,.06)}
  .site-nav__menu button:last-child{border-bottom:0}
  .site-nav__menu button::after{display:none}
  .site-nav__bar .site-nav__menu button.on,
  .site-nav__bar.light .site-nav__menu button.on{color:#0082D3}
  .site-nav__cta{padding:9px 14px;font-size:12.5px}
}

/* ---------- 50-2. 히어로: 칩 · 폰 목업 ---------- */
/* 태블릿 가로 — 카드 폭을 줄이고 두 줄 허용 */
@media (max-width:1280px){
  .chip{max-width:212px!important}
  .chip b,.chip b+span{white-space:normal!important}
  .chip-grid{width:min(1020px,92vw)!important}
}
/* 태블릿 세로 이하 — 절대배치 해제 (transform 잔류로 화면 밖으로 밀리던 문제 수정) */
@media (max-width:960px){
  .intro__stage{flex-direction:column;align-items:center;justify-content:flex-start}
  .chip-grid{position:static!important;inset:auto!important;width:100%!important;
    max-width:660px!important;transform:none!important;
    display:flex!important;flex-wrap:wrap;justify-content:center;align-content:flex-start;
    gap:8px!important;margin:0 auto clamp(14px,3vh,26px)!important}
  .chip{position:static!important;left:auto!important;right:auto!important;
    top:auto!important;bottom:auto!important;
    display:inline-flex!important;animation:none!important;
    max-width:calc(50% - 5px)!important;opacity:1!important}
  .chip.p2,.chip.p4{display:inline-flex!important}
  .chip.p2.reveal.on,.chip.p4.reveal.on{opacity:1!important}
  .chip.p5,.chip.p6{display:none!important}
  .intro__phone{width:min(58vw,236px)}
}
@media (max-width:640px){
  .chip{max-width:min(100%,300px)!important;padding:9px 14px 9px 10px!important}
  .chip.p2,.chip.p4{display:none!important}
  .intro__phone{width:min(68vw,224px)}
  .intro__actions{width:100%;flex-wrap:nowrap;gap:9px}
  .intro__actions .btn{flex:1 1 0;min-width:0;justify-content:center;
    padding:13px 12px;font-size:13.5px;gap:6px;white-space:nowrap}
  .intro__actions .btn svg{width:15px;height:15px}
}
@media (max-width:375px){
  .chip b{font-size:12.4px!important}
  .chip b+span{font-size:10.6px!important}
  .intro__lead br{display:none}
}

/* ---------- 50-3. 푸터 · 서브 내비 ---------- */
@media (max-width:960px){
  .site-footer__nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 18px}
}
@media (max-width:375px){
  .site-footer__nav{grid-template-columns:1fr;gap:20px}
  .site-footer__social{flex-wrap:wrap}
}

/* ---------- 50-4. 페이지뷰 공통 ---------- */
@media (max-width:960px){
  .pg__dl{grid-template-columns:1fr;gap:18px}
  .pg__t3 .hd{display:none}
  .pg__t3 div{grid-template-columns:1fr;gap:7px;padding:16px 0}
  .pg__t3 div span:first-child{font-size:14.5px}
  .pg__t3 div span:not(:first-child){padding-left:12px;
    border-left:2px solid rgba(12,27,46,.1)}
}
@media (max-width:640px){
  .pg__hero h2{font-size:clamp(25px,7.4vw,34px)}
  .pg__lead{font-size:14.5px;line-height:1.85}
  .pg__form .pg__btn{align-self:stretch;width:100%}
  .pg__toc ol{columns:1}
  .pg__check li{font-size:14px}
  .pg__legal li{font-size:14px;line-height:1.85}
  .pg__cta .pg__btn{width:100%}
  /* iOS 자동 확대 방지 */
  .pg__form input,.pg__form select,.pg__form textarea,
  .fbk__new input,.fbk__new textarea{font-size:16px}
}
@media (max-width:375px){
  .pg__meta div{flex:1 1 100%}
}

/* ---------- 50-5. 로드맵 · 기능 제안 보드 ---------- */
@media (max-width:640px){
  .rmp__bar,.fbk__bar{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    padding-bottom:12px;margin-right:calc(var(--pad-x) * -1)}
  .rmp__bar::-webkit-scrollbar,.fbk__bar::-webkit-scrollbar{display:none}
  .rmp__bar i,.fbk__bar i,.rmp__bar .lb,.fbk__bar .lb{flex:0 0 auto}
  .fbk__bar .sp{display:none}
  .rmp__bar .sc{margin-left:6px;flex:0 0 auto}
}
@media (max-width:375px){
  .fbk__new .row{flex-direction:column;align-items:stretch}
  .fbk__new .row .pg__btn{width:100%;margin:0}
  .fbk__card{grid-template-columns:40px 1fr;gap:11px}
  .fbk__meta{gap:6px;font-size:11px}
  .rmp__card{grid-template-columns:40px 1fr;gap:11px}
}

/* ---------- 50-6. 기업 소개 · 브랜드 스토리 ---------- */
@media (max-width:640px){
  .abt__letter p{font-size:14.5px;line-height:1.95}
  .abt__heroimg b{font-size:clamp(20px,6vw,26px)}
  .brd__hero h2{font-size:clamp(26px,7.6vw,36px)}
  .brd__pal{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:375px){
  .brd__pal{grid-template-columns:1fr}
}

/* ---------- 50-7. 가로모드(낮은 높이) ---------- */
@media (orientation:landscape) and (max-height:520px){
  .site-nav__menu{top:52px;max-height:calc(100dvh - 62px);overflow-y:auto}
  .chip-grid{display:none!important}
  .intro__phone{width:min(26vh,180px)}
  .pg__hero{padding-bottom:24px}
}

/* ---------- 50-8. 터치 기기: 잔류 호버 제거 ---------- */
@media (hover:none){
  .pg__ch a:hover{transform:none;border-color:rgba(12,27,46,.09);background:#fff}
  .rmp__card.is-hoverable:hover{transform:none}
  .fbk__up:hover{transform:none}
  .pg__toc a:hover{transform:none}
  .site-nav__brand:hover{opacity:1}
}
/* ---------- 50-9. 소형 폰: 목업 축소 ---------- */
@media (max-width:375px){
  .demo__phone{width:200px}
  .demo__screen{width:184px;height:412px;font-size:7.4px}
  .extras__phone{width:214px}
  .extras__screen{width:198px;height:428px;font-size:7.7px}
  .watch{width:98px}
  .apphone{width:150px}
}

/* ---------- 50-10. 모바일 성능: 무거운 흐림 완화 ----------
   배경 장식 레이어의 blur 반경은 GPU 비용이 크다.
   폰에서는 반경을 줄이고 투명도로 비슷한 밀도를 유지한다. */
@media (max-width:640px){
  .intro__glow{filter:blur(34px)}
  .intro__dawn-glow{filter:blur(30px)}
  .intro__wind{filter:blur(14px)}
  .closing__glow{filter:blur(38px)}
  .demo__aura{filter:blur(34px)}
  .intro__watch::after{filter:blur(18px)}
  /* 스크롤 중 합성 부담을 줄인다 */
  .intro__glow,.closing__glow,.demo__aura,.intro__wind{will-change:auto}
}
/* 저사양·모션 최소화 환경 */
@media (prefers-reduced-motion:reduce){
  .intro__glow,.closing__glow,.demo__aura{filter:blur(26px)}
  .site-nav__menu{transition:none}
}
/* ---------- 50-11. 터치 타깃 크기 (폰) ----------
   손가락으로 정확히 누를 수 있도록 작은 컨트롤의 여백을 키운다. */
@media (max-width:640px){
  .rmp__bar i,.fbk__bar i{padding:9px 14px}
  .fbk__up{padding:11px 0 10px}
  .pgm__t{padding:9px 10px}
  .pgm__d a{padding:11px 12px}
  .step-nav__inner button{padding:9px 12px}
  .pg__toc a{padding:10px 2px}
  #pgback{padding:9px 14px 9px 10px}
  .site-footer__nav a{padding:9px 0}
}
/* ---------- 50-12. 모바일 상단바 정렬 ----------
   로고를 화면 중앙에 고정하고, 좌측에 다운로드(아이콘), 우측 끝에 메뉴를 둔다. */
@media (max-width:860px){
  .site-nav__bar{position:fixed;justify-content:space-between}
  .site-nav__brand{position:absolute;left:50%;top:50%;
    transform:translate(-50%,-50%);margin:0;pointer-events:auto}
  .site-nav__brand:hover{opacity:1}
  /* 다운로드는 아이콘만 남겨 좌우 균형을 맞춘다 */
  .site-nav__cta{order:-1;font-size:0;gap:0;padding:9px;border-radius:100px}
  .site-nav__cta svg{width:17px;height:17px}
  .site-nav__burger{order:9;margin-left:auto}
}

/* ---------- 50-13. 마무리 섹션 ----------
   장비 컷은 좌우를 자르지 않고 전체가 보이도록 두고,
   사진 뒤에 깔리던 파란 그라데이션은 걷어낸다. */
@media (max-width:860px){
  .closing__glow{display:none}
  .closing__gear{margin-top:clamp(24px,5vh,44px)}
  .closing__gear img{width:100%;max-width:none;margin:0 auto}
  .closing__gear-inner{transform:none!important}
  .site-footer{margin-top:clamp(48px,8vh,90px)}
}
/* 푸터 링크 구분 */
@media (max-width:640px){
  .site-footer__nav{gap:30px 20px}
  .site-footer__nav h6{margin-bottom:10px}
  .site-footer__nav a{padding:9px 0;line-height:1.4}
}
/* ---------- 50-14. 주요 기능 데모: 기기 묶음 크기 ----------
   폰과 워치가 가로로 나란히 놓여 좁은 화면에서 좌우·아래가 잘렸다.
   내부 비율을 유지해야 목업 글자가 깨지지 않으므로 묶음 전체를 축소한다. */
.demo__device{--dev-s:1;transform-origin:top center;width:100%;justify-content:center}
@media (max-width:860px){
  .demo__device{--dev-s:.88;margin-top:clamp(4px,1vh,12px)}
  .demo__stage{padding:clamp(58px,8vh,88px) 14px clamp(10px,1.6vh,18px)}
  .demo__lead{height:clamp(74px,10vh,102px);margin-top:clamp(8px,1.4vh,14px)}
  .demo__title{font-size:clamp(21px,4.4vw,30px)}
}
@media (max-width:640px){
  .demo__device{--dev-s:.8}
  .demo__aura{filter:blur(30px);opacity:.7}
}
@media (max-width:375px){
  .demo__device{--dev-s:.7}
  .demo__title{font-size:clamp(19px,5.6vw,24px)}
  .demo__lead{height:clamp(68px,9.5vh,92px)}
}
/* 가로모드는 높이가 부족하므로 더 줄인다 */
@media (orientation:landscape) and (max-height:560px){
  .demo__device{--dev-s:.56}
  .demo__stage{padding-top:46px}
}
/* 짧은 화면(구형 폰·작은 창)에서는 배율을 더 낮춘다 */
@media (max-width:860px) and (max-height:660px){
  .demo__device{--dev-s:.62}
  .demo__lead{height:clamp(62px,9vh,84px)}
}
@media (max-width:860px) and (max-height:560px){
  .demo__device{--dev-s:.5}
  .demo__stage{padding-top:clamp(48px,7vh,66px)}
}
/* ---------- 50-15. 지표 · 채널 카드: 모바일에서도 2열 유지 ----------
   한 줄에 하나씩 늘어놓으면 스크롤만 길어지고 비교가 어렵다.
   2열을 유지하되 좁은 폭에 맞춰 글자와 여백을 조인다. */
@media (max-width:640px){
  .pg__stats{grid-template-columns:repeat(2,1fr);gap:9px}
  .pg__stats div{padding:17px 15px;border-radius:14px}
  .pg__stats b{font-size:clamp(21px,6.4vw,27px);line-height:1.15}
  .pg__stats span{margin-top:6px;font-size:11.5px;word-break:keep-all}

  .pg__ch{grid-template-columns:repeat(2,1fr);gap:9px}
  .pg__ch a{padding:15px 14px;border-radius:14px}
  .pg__ch b{font-size:13.5px;word-break:keep-all}
  .pg__ch span{margin-top:3px;font-size:11px;word-break:break-all}
  .pg__ch em{margin-top:6px;font-size:11.5px;line-height:1.55;word-break:keep-all}
}
@media (max-width:375px){
  .pg__stats div{padding:14px 12px}
  .pg__ch a{padding:13px 12px}
}
/* ---------- 50-16. 팀 카드: 모바일 2열 ---------- */
@media (max-width:640px){
  .abt__adv-g{gap:9px}
  .abt__adv-g article{width:calc(50% - 4.5px);padding:18px 12px;border-radius:16px}
  .abt__adv-g .ph{width:52px;height:52px;margin-bottom:12px;font-size:21px}
  .abt__adv-g b{font-size:14.5px}
  .abt__adv-g span{margin-top:6px;font-size:11.5px;line-height:1.6}
  .abt__adv-g em{margin-top:10px;padding-top:10px;font-size:11px;line-height:1.55}
}
@media (max-width:375px){
  .abt__adv-g article{padding:16px 10px}
  .abt__adv-g span{font-size:11px}
}

/* ---------- 50-17. 스토어 버튼: 모바일 가로 2등분 ---------- */
@media (max-width:640px){
  .pg__dlbtn .stores{flex-direction:row;gap:8px}
  .pg__dlbtn .store{flex:1 1 0;width:auto;min-width:0!important;
    justify-content:center;padding:11px 8px!important;gap:7px}
  .pg__dlbtn .store svg{flex:0 0 auto}
  .pg__dlbtn .store small{font-size:7px;letter-spacing:.04em}
  .pg__dlbtn .store b{font-size:12.5px}
}
@media (max-width:375px){
  .pg__dlbtn .store{padding:10px 6px!important;gap:5px}
  .pg__dlbtn .store b{font-size:11.5px}
}

/* ---------- 50-18. 입력 요소가 카드를 벗어나지 않도록 ----------
   input·select·textarea는 브라우저 기본 폭(size·cols)을 갖고 있어
   좁은 화면에서 카드 안쪽 여백을 넘어 삐져나올 수 있다. */
.pg__form label,.pg__form .row,.fbk__new .row{min-width:0}
.pg__form input,.pg__form select,.pg__form textarea,
.fbk__new input,.fbk__new textarea{
  display:block;width:100%;min-width:0;max-width:100%}
.pg__form textarea,.fbk__new textarea{resize:vertical}
.pg__form select{-webkit-appearance:none;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,rgba(12,27,46,.45) 50%),
                   linear-gradient(135deg,rgba(12,27,46,.45) 50%,transparent 50%);
  background-position:calc(100% - 19px) 51%,calc(100% - 14px) 51%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:38px}