:root{
    --dark:#242426;          /* 히어로/푸터 배경 */
    --ink:#2E2E30;           /* 본문 */
    --green:#0A9F60;         /* 브랜드 그린 */
    --deep:#012516;          /* FOR STORES 배경 */
    --purple:#774EFF;        /* FEATURE 라벨/원 */
    --gold:#C8A25B;          /* 히어로 서브라벨 */
    --gray-bg:#ECEEEF;       /* GET STARTED 배경 */
    --faq-bg:#F5F6F8;
    --kr:"Pretendard Variable",Pretendard,"Malgun Gothic",sans-serif;
    --en:Poppins,"Pretendard Variable",Pretendard,sans-serif;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
  body{font-family:var(--kr);color:var(--ink);background:#fff;overflow-x:hidden;
    -webkit-user-select:none;user-select:none;}          /* 텍스트 드래그 선택 방지 */
  img{display:block;max-width:100%;
    -webkit-user-drag:none;user-drag:none;pointer-events:none;}  /* 이미지 드래그·저장 방지 */
  a img,button img{pointer-events:auto;}
  a{text-decoration:none;color:inherit;}
  .container{max-width:1170px;margin:0 auto;padding:0 24px;}

  /* ── 공통 섹션 타이틀 ── */
  .sec-label{font-family:var(--kr);font-weight:400;font-size:20px;color:var(--green);margin-bottom:6px;letter-spacing:20%;}
  .sec-title{font-family:var(--en);font-weight:700;font-size:clamp(36px,5vw,50px);letter-spacing:20%;line-height:1.1;}

  /* ── 헤더 ── */
  .site-header{position:fixed;top:0;left:0;right:0;height:72px;z-index:100;
    display:flex;align-items:center;background:rgba(36,36,38,.85);backdrop-filter:blur(12px);}
  .site-header .container{display:flex;align-items:center;justify-content:space-between;width:100%;}
  /* 로고·슬로건 — 디바이스 폭에 비례해 자동 축소(비율 유지) */
  .site-header img.logo{height:clamp(17px,5.2vw,26px);}
  .site-header img.slogan{height:clamp(10px,3.1vw,16px);opacity:.9;}

  /* ── 히어로 ── */
  .hero{background:var(--dark);color:#fff;padding:150px 0 0;position:relative;overflow:hidden;}
  .hero .container{display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center;}
  .hero-title{font-family:var(--en);font-weight:700;font-size:clamp(40px,5.5vw,72px);
    color:var(--green);letter-spacing:.06em;line-height:1.12;}
  .hero-sub{font-family:var(--en);font-weight:600;font-size:clamp(13px,1.4vw,19px);
    letter-spacing:.32em;color:var(--gold);margin:26px 0 14px;}
  .hero-desc{font-size:clamp(14px,1.4vw,18px);line-height:1.65;color:#D7D7DA;margin-bottom:36px;}
  .store-badges{display:flex;gap:14px;flex-wrap:wrap;}
  .store-badges img{height:56px;transition:transform .25s ease;}
  .store-badges a:hover img{transform:translateY(-3px);}
  /* 피그마 731×927 좌표계 — 폰 400 · 티켓 286 · 스크린코드 286.5 비례 그대로 */
  .hero-visual{position:relative;width:100%;max-width:731px;aspect-ratio:731/927;margin:0 auto;}
  .hero-visual .phone{position:absolute;left:20%;top:0;width:54.7%;z-index:2;}
  /* 티켓·스크린코드 25% 확대. 스크린코드는 폰 뒤(z 1) */
  .hero-visual .ticket{position:absolute;left:51.1%;top:8.8%;width:48.9%;z-index:3;
    filter:drop-shadow(0 24px 48px rgba(0,0,0,.35));}
  /* 폰에 가리는 부분이 카드의 1/3 이하가 되도록 왼쪽으로 */
  .hero-visual .screencode{position:absolute;left:-13%;top:42%;width:49%;z-index:1;
    filter:drop-shadow(0 24px 48px rgba(0,0,0,.35));}

  /* ── FEATURE 슬라이더 ── */
  .features{position:relative;overflow:hidden;background:#F4F8FD;padding:110px 0;}
  /* 배경: 블러 처리된 원 2개가 뒤에서 은은히 움직인다 (Figma: 원 + 배경블러 재현) */
  .features .orbs{position:absolute;inset:0;pointer-events:none;}
  .orb{position:absolute;border-radius:50%;filter:blur(110px);opacity:.55;
    will-change:transform;}
  .orb.purple{width:541px;height:541px;background:var(--purple);left:6%;top:14%;
    animation:orbFloatA 11s ease-in-out infinite alternate;}
  .orb.green{width:280px;height:280px;background:var(--green);right:12%;bottom:12%;
    animation:orbFloatB 9s ease-in-out infinite alternate;}
  @keyframes orbFloatA{
    0%{transform:translate(0,0) scale(1);}
    50%{transform:translate(34px,-26px) scale(1.05);}
    100%{transform:translate(-22px,20px) scale(.98);}
  }
  @keyframes orbFloatB{
    0%{transform:translate(0,0) scale(1);}
    50%{transform:translate(-30px,24px) scale(1.08);}
    100%{transform:translate(18px,-18px) scale(.96);}
  }
  .features .blur-layer{position:absolute;inset:0;background:rgba(242,247,255,.35);}

  .slider{position:relative;z-index:2;touch-action:pan-y;cursor:grab;}
  .slider.dragging{cursor:grabbing;}
  .track{display:flex;transition:transform .6s cubic-bezier(.22,.61,.36,1);will-change:transform;}
  .slide{flex:0 0 100%;min-width:100%;}
  .slide-inner{max-width:1170px;margin:0 auto;padding:0 24px;display:grid;
    grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;min-height:820px;}

  /* 슬라이드 전환 시 폰 → 부가1 → 부가2 순서로 등장 */
  .slide .anim{opacity:0;transform:translateY(30px);
    transition:opacity .65s ease-out,transform .65s cubic-bezier(.22,.61,.36,1);}
  .slide.active .anim{opacity:1;transform:translateY(0);}
  .slide.active .f-copy.anim{transition-delay:.1s;}
  .slide.active .phone.anim{transition-delay:0s;}
  .slide.active .sub1{transition-delay:.28s;}
  .slide.active .sub2{transition-delay:.5s;}

  /* 좌우 화살표 (피그마 nav-left/right) */
  .nav-arrows{display:flex;gap:18px;margin-top:44px;}
  .nav-btn{width:64px;height:64px;border-radius:50%;background:#fff;border:0;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 8px 22px rgba(20,40,30,.12);transition:.22s;}
  .nav-btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(20,40,30,.18);}
  .nav-btn svg{width:14px;height:22px;}
  .dots{display:flex;gap:10px;justify-content:center;}
  .dot{width:10px;height:10px;border-radius:50%;background:rgba(0,0,0,.18);border:0;cursor:pointer;transition:.25s;}
  .dot.active{width:28px;border-radius:6px;background:var(--green);}
  .slider-ctrl{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;
    gap:28px;margin-top:34px;}

  /* 흐린(백) 이미지는 이동 없이 투명도 0 → 1 페이드만 */
  .slide .sub-back.anim{transform:none;transition:opacity .9s ease-out;}
  .slide.active .sub-back.anim{transform:none;}

  .f-label{font-family:var(--en);font-weight:700;font-size:20px;color:var(--purple);
    line-height:1.15;white-space:pre-line;}
  .f-title{font-family:var(--kr);font-weight:700;font-size:clamp(32px,3.4vw,50px);color:var(--ink);
    margin:8px 0;}
  .f-en{font-family:var(--en);font-weight:600;font-size:20px;color:var(--green);letter-spacing:40%;}
  .f-tag{font-family:var(--en);font-weight:400;font-size:19px;color:rgba(0,0,0,.30);margin-top:4px;}
  .f-desc{font-size:clamp(15px,1.3vw,19px);line-height:1.7;color:var(--ink);margin-top:18px;}

  /* 비주얼 박스 — 피그마 716×880 좌표계를 %로 환산해 비례 유지 */
  .f-visual{position:relative;width:100%;max-width:716px;aspect-ratio:716/880;margin:0 auto;}
  .f-visual .phone{position:absolute;top:0;width:55.9%;z-index:2;   /* 400/716 */
    filter:drop-shadow(0 30px 60px rgba(20,40,30,.18));}
  .f-visual .sub1,.f-visual .sub2{position:absolute;filter:drop-shadow(0 20px 44px rgba(20,40,30,.18));}
  /* 피그마 레이어 순서: 흐린(백) 이미지는 폰 뒤, 선명한 이미지는 폰 앞 */
  .f-visual .sub-back{z-index:1;}
  .f-visual .sub-front{z-index:3;}

  /* F1 — 매장찾기: 스트립(앞) 왼쪽, 매장카드(뒤) 오른쪽 */
  /* 부가 목업은 폰 대비 25% 확대한 값 */
  .f1v .phone{left:20%;}
  /* mock-02-01: 디자인의 235×300 매장 카드 — 폰 왼쪽에 겹침 */
  .f1v .sub1{left:0;top:27%;width:41%;}                      /* 32.8%×1.25 */
  .f1v .sub2{left:47.5%;top:14%;width:52.4%;}                /* 41.9%×1.25 */

  /* F2 — 간편이용: 위젯(-01=앞) 왼쪽, QR(-02=뒤) 오른쪽 */
  .f2v .phone{left:18.2%;}
  .f2v .sub1{left:0;top:11%;width:49.9%;}                    /* 39.9%×1.25 */
  .f2v .sub2{left:49.9%;top:32%;width:50.1%;}                /* 40.1%×1.25 */

  /* F3 — 스코어카드: 카드(-01=뒤) 왼쪽, 랭킹바(-02=앞) 하단 */
  .f3v .phone{left:32.1%;}
  .f3v .sub1{left:0;top:8%;width:59.4%;}                     /* 47.5%×1.25 */
  .f3v .sub2{left:33.2%;top:53%;width:66.8%;}                /* 53.4%×1.25 */

  /* F4 — 대회: 순위변동(-02=뒤) 왼쪽, 대회정보(-01=앞) 오른쪽 */
  .f4v .phone{left:27.4%;}
  .f4v .sub1{left:33.2%;top:23%;width:66.8%;}                /* 53.4%×1.25 */
  .f4v .sub2{left:0;top:46%;width:66.8%;}                    /* 53.4%×1.25 */

  /* ── HOW IT WORKS ── */
  .how{background:#fff;padding:120px 0 130px;text-align:left;}
  .how .head{margin-bottom:56px;}
  .process{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;}
  .process img{width:100%;border-radius:20px;}
  .copy3{margin:64px auto 40px;display:flex;justify-content:center;}
  .copy3 img{height:44px;}
  .how .store-badges{justify-content:center;margin-top:8px;}

  /* ── WHY / FOR YOU (탭) ── */
  .why{position:relative;padding:120px 0;background:#0B1F16 url('assets/why-bg.png') center/cover no-repeat;color:#fff;}
  .why::before{content:"";position:absolute;inset:0;background:rgba(4,20,12,.55);}
  .why .container{position:relative;z-index:1;}
  .why .sec-label{color:#7CE3AE;}
  .why .sec-title{color:#fff;}
  /* WHY PARKYA / FOR YOU — 좌우 2컬럼 */
  .why-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,5vw,90px);margin-top:52px;}
  .why-col .col-head{display:inline-block;font-family:var(--en);font-weight:700;
    font-size:clamp(20px,2.2vw,30px);background:var(--green);color:#fff;
    padding:16px 48px;border-radius:100px;margin-bottom:18px;}
  .why-col.foryou .col-head{background:rgba(255,255,255,.16);}
  .why-col h3{font-size:clamp(19px,1.9vw,26px);font-weight:500;margin-bottom:30px;text-decoration:underline}
  .why-list{display:grid;gap:26px;max-width:640px;}
  .why-item{display:flex;gap:22px;align-items:center;}
  .why-item .ic{flex:0 0 84px;height:84px;border-radius:50%;background:#fff;
    display:flex;align-items:center;justify-content:center;}
  .why-item .ic img{width:56px;height:56px;object-fit:contain;}
  .why-item strong{display:block;font-size:clamp(17px,1.6vw,22px);margin-bottom:4px;}
  .why-item span{font-size:clamp(14px,1.3vw,17px);color:rgba(255,255,255,.82);}

  /* ── FOR STORES ── */
  .stores{background:var(--deep);color:#fff;padding:120px 0;position:relative;overflow:hidden;}
  .stores .sec-label{color:#7CE3AE;}
  .stores .sec-title{color:#fff;margin-bottom:64px;letter-spacing:20%}
  /* 좌(고민) — 중앙(모델 이미지) — 우(해결+CTA) */
  .stores-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(28px,4vw,64px);align-items:center;}
  .stores .model{width:clamp(280px,25vw,476px);}
  /* 좌우 인용 블록: 상단 기준선을 맞춰 아이콘 높이 동일, 내용 중앙정렬 */
  .quote{position:relative;padding:8px 0;text-align:center;}
  .quote .icon{width:96px;height:96px;margin:0 auto 24px;}
  .quote p{font-weight:700;font-size:clamp(19px,1.8vw,30px);line-height:1.45;}
  .quote.pain p{color:rgba(255,255,255,.92);}
  .quote.solve .lead{color:#5BFF71;}
  .biz-cta{display:inline-flex;align-items:center;gap:10px;margin-top:40px;
    background:var(--green);color:#fff;font-weight:700;font-size:clamp(15px,1.4vw,19px);
    padding:18px 34px;border-radius:14px;transition:.25s;}
  .biz-cta:hover{transform:translateY(-3px);box-shadow:0 16px 32px rgba(10,159,96,.35);}
  .biz-cta::after{content:"→";font-family:var(--en);}

  /* ── FAQ ── */
  .faq{background:var(--faq-bg);padding:120px 0;}
  .faq .head{margin-bottom:52px;}
  .faq-list{max-width:1080px;margin:0 auto;display:grid;gap:16px;}
  .faq details{background:#fff;border-radius:18px;overflow:hidden;}
  .faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;
    padding:34px 40px;font-weight:700;font-size:clamp(17px,1.6vw,22px);}
  .faq summary::-webkit-details-marker{display:none;}
  .faq summary::after{content:"+";font-family:var(--en);font-size:28px;color:var(--green);transition:.2s;}
  .faq details[open] summary::after{content:"−";}
  .faq .body{padding:0 40px 34px;font-size:clamp(14px,1.3vw,18px);color:#5A5F5C;line-height:1.7;}

  /* ── GET STARTED ── */
  .start{background:var(--gray-bg);padding:120px 0 130px;text-align:center;}
  .start .sec-title{margin-bottom:44px;}
  .start .store-badges{justify-content:center;}

  /* ── 슬로건 스트립 ── */
  .slogan-strip{background:var(--green);padding:64px 0;display:flex;justify-content:center;}
  .slogan-strip img{height:38px;}

  /* ── 푸터 ── */
  .site-footer{background:var(--dark);color:#fff;padding:70px 0 60px;}
  .site-footer .top{display:flex;justify-content:space-between;align-items:flex-start;gap:32px;
    padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.16);}
  .site-footer img.plogo{height:44px;}
  .site-footer .welcome{font-size:15px;line-height:1.75;color:rgba(255,255,255,.85);}
  .site-footer .links{display:flex;gap:10px;flex-wrap:wrap;padding:22px 12px;
    font-size:14px;color:rgba(255,255,255,.85);border-bottom:1px solid rgba(255,255,255,.16);}
  .site-footer .links a:hover{color:#0A9F60;}
  .site-footer .links .sep{opacity:.4;}
  .site-footer .bottom{display:grid;grid-template-columns:auto 1fr auto;gap:40px;align-items:start;padding-top:36px;}
  .site-footer img.slogo{height:80px;}
  .site-footer .info{font-size:14px;line-height:1.8;color:rgba(255,255,255,.75);}
  .site-footer .hours{font-size:14px;line-height:1.8;color:rgba(255,255,255,.75);text-align:right;}
  .site-footer .tel{display:block;font-family:var(--en);font-weight:700;
    font-size:clamp(30px,3vw,44px);color:#fff;letter-spacing:.02em;margin-bottom:-10px;margin-top:-15px;}
  .site-footer .copy{margin-top:28px;font-size:13px;color:rgba(255,255,255,.5);}

  /* ── 섹션 타이틀 중앙 정렬 ── */
  .sec-head{text-align:center;}
  /* WHY/FOR YOU 좌우 컬럼 타이틀도 중앙 */
  .why-col .col-head{display:table;margin:0 auto 18px;}
  .why-col h3{text-align:center;}
  .why-col .why-list{margin:0 auto;width:fit-content;}

  /* ── 푸터: 디자인대로 — 로고·환영문(그린) 중앙, 링크 좌/우, 카피 좌측 ── */
  .site-footer .top{flex-direction:column;align-items:center;text-align:center;gap:20px;}
  .site-footer .welcome{color:#0A9F60;}
  .site-footer .links{justify-content:space-between;align-items:center;}
  .site-footer .links-left{display:flex;gap:26px;}
  .site-footer .links-right{display:flex;gap:10px;align-items:center;}
  .site-footer .links a.green{color:#0A9F60;}
  .site-footer .tel{color:#5BFF71;}
  .site-footer .copy{text-align:left;}

  /* ── 데스크톱: 각 섹션을 1080 디자인처럼 브라우저 보이는 영역에 채움 ── */
  @media (min-width:961px){
    .hero,.features,.how,.why,.stores,.faq{
      display:flex;align-items:center;
      padding-top:0;padding-bottom:0;
    }
    /* 히어로만 온전한 화면 높이(헤더가 위에 겹침), 나머지는 헤더 높이를 뺀 값 */
    .hero{min-height:100vh;min-height:100svh;padding-top:72px;}
    .features,.how,.why,.stores,.faq{
      min-height:calc(100vh - 72px);min-height:calc(100svh - 72px);
    }
    .hero>.container,.how>.container,.why>.container,
    .stores>.container,.faq>.container{width:100%;}
    /* FOR STORES: 타이틀 위, 콘텐츠 중앙, 모델은 섹션 바닥에 붙임(아래 여백 없음) */
    .stores{flex-direction:column;justify-content:flex-start;}
    .stores>.container{flex:1;display:flex;flex-direction:column;padding-top:88px;}
    .stores .stores-grid{flex:1;justify-items:center;align-items:start;}
    .stores .quote{margin-top:9vh;}          /* 좌우 아이콘 시작 높이 동일 */
    .stores .model{align-self:end;}
    .features{flex-direction:column;justify-content:center;}
    .features .slider{width:100%;}
    .slide-inner{min-height:auto;}
    .start{min-height:60vh;display:flex;align-items:center;}
    .start>.container{width:100%;}
  }

  /* ── 반응형 ── */
  @media (max-width:960px){
    .hero .container,.why-cols{grid-template-columns:1fr;}
    /* 스토어 배지 중앙 */
    .store-badges{justify-content:center;}
    /* 히어로 비주얼: 좌우 여백을 두고 중앙에 — 스크린코드가 화면 밖으로 넘치지 않게 */
    .hero-visual{max-width:min(440px,88%);margin-top:20px;}
    .hero-visual .screencode{left:-2%;}
    /* 피처 슬라이드: 폰(비주얼) 위 → 텍스트 아래로 스택 */
    .slide-inner{grid-template-columns:1fr;gap:34px;min-height:auto;padding:16px 24px 8px;}
    .f-visual{max-width:440px;}
    /* 모바일: 피처 카피 중앙정렬 (네비 화살표 포함) */
    .f-copy{text-align:center;}
    .f-copy .nav-arrows{justify-content:center;}
    /* FOR STORES: 세로 스택, 모바일에선 모델 이미지 숨김 */
    .stores-grid{grid-template-columns:1fr;justify-items:center;text-align:center;}
    .stores .model{display:none;}
    .quote .icon{margin-left:auto;margin-right:auto;}
    .process{grid-template-columns:1fr;max-width:420px;margin:0 auto;}

    /* 슬로건 스트립 — 화면에 비례해 축소 */
    .slogan-strip{padding:36px 0;}
    .slogan-strip img{height:clamp(16px,5.5vw,26px);}

    /* 푸터 — 축소 + 전체 중앙정렬 */
    .site-footer .plogo{height:32px;}
    .site-footer .welcome{font-size:13px;word-break:keep-all;}  /* 문장 2줄 유지 */
    .site-footer .links{flex-direction:column;align-items:center;gap:16px;padding:26px 0;}
    .site-footer .links-left{flex-wrap:wrap;justify-content:center;gap:14px 24px;}
    .site-footer .links-right{flex-wrap:wrap;justify-content:center;}
    .site-footer .bottom{grid-template-columns:1fr;justify-items:center;text-align:center;gap:26px;}
    .site-footer img.slogo{height:60px;}
    .site-footer .info{text-align:center;line-height:2;}
    .site-footer .hours{text-align:center;}
    .site-footer .copy{text-align:center;}
    .orb.purple{width:380px;height:380px;}
  }