/* GroupHelp KOREA 랜딩. 다섯 장이 같은 결을 갖게 한 곳에 모았다.
   **프로그램 화면(console/ui.html)과 같은 디자인 코드를 쓴다.**
   시안 「다 · 청록」 + 단추 「4 · 테두리 강조」. 받아서 켰을 때 같은
   물건으로 보여야 한다. 색을 고칠 일이 생기면 두 곳을 같이 고친다. */
  :root{
    --page:#eef2f2; --surface:#fff; --surface2:#f4f8f7; --surface3:#e7efed;
    --ink:#101d1b; --ink2:#364744; --dim:#71827f; --dim2:#92a19e;
    --line:#dce4e3; --line2:#c3cfcd; --line3:#a7b6b3;
    --acc:#0d7a63; --acc2:#12987b; --acc-soft:#e6f5f1; --acc-line:#a9dccf;
    --acc-ink:#0a5f4d;
    --mk1:#202634; --mk2:#111520; --mint:#34dba8;
    --warn:#a86a08; --warn-soft:#fdf5e7; --warn-line:#ecdcb7;
    --sh1:0 1px 2px rgba(16,29,27,.05), 0 1px 3px rgba(16,29,27,.06);
    --sh2:0 1px 3px rgba(16,29,27,.06), 0 6px 14px -6px rgba(16,29,27,.16);
    --sh3:0 3px 8px -2px rgba(16,29,27,.08), 0 20px 40px -14px rgba(16,29,27,.24);
    --lift:inset 0 1px 0 rgba(255,255,255,.9);
    --r-btn:10px;
    --sans:"SUIT Variable",system-ui,-apple-system,"Malgun Gothic",sans-serif;
    --logo:"Instrument Sans",var(--sans);
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;background:var(--page);color:var(--ink);
       font:15px/1.72 var(--sans);letter-spacing:-.012em;
       -webkit-font-smoothing:antialiased}
  svg{display:block}
  img{max-width:100%}
  .num{font-variant-numeric:tabular-nums}
  /* 1920 화면에 맞춘 폭이다. 1080 으로 두면 양옆이 휑하고,
     1400 을 넘기면 글줄이 길어져서 읽기가 나빠진다. */
  .wrap{max-width:1220px;margin:0 auto;padding:0 28px}
  b,strong{font-weight:700}

  /* ---- 위쪽 띠 ---- */
  nav{position:sticky;top:0;z-index:20;background:rgba(238,242,242,.86);
      backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
  nav .wrap{display:flex;align-items:center;gap:11px;height:62px}
  .mk{width:31px;height:31px;border-radius:9px;flex:none;display:block;
      box-shadow:0 4px 12px -5px rgba(17,21,31,.5)}
  .brandname{font-family:var(--logo);font-size:16px;font-weight:700;
      letter-spacing:-.03em}
  .ver{font-size:11px;color:var(--dim);border:1px solid var(--line2);
      border-radius:999px;padding:1px 8px;font-family:var(--logo)}
  nav .grow{flex:1}
  nav a.lnk{color:var(--ink2);text-decoration:none;font-size:13.5px;
      font-weight:600;padding:7px 11px;border-radius:8px}
  nav a.lnk:hover{background:var(--surface);color:var(--ink)}
  @media (max-width:820px){ nav a.lnk{display:none} }

  /* 안을 옅게 칠하고 테두리를 진하게 하는 「테두리 강조」. 화면에서
     제일 눌러야 하는 하나만 테두리를 2px 로 세운다. */
  .btn{display:inline-flex;align-items:center;gap:8px;padding:11px 21px;
       border-radius:var(--r-btn);text-decoration:none;font-size:14.5px;
       font-weight:700;letter-spacing:-.015em;white-space:nowrap;
       background:#d3ebe4;color:var(--acc-ink);border:2px solid var(--acc);
       transition:background .12s,transform .08s}
  .btn:hover{background:#c2e3d9}
  .btn:active{transform:translateY(1px)}
  .btn.sm{padding:7px 15px;font-size:13.5px;border-width:1.5px}
  .btn.ghost{background:var(--surface);color:var(--ink2);
       border:1.5px solid var(--line2);box-shadow:var(--sh1),var(--lift)}
  .btn.ghost:hover{background:var(--surface2);border-color:var(--line3)}
  /* 어두운 마디 위에 놓는 단추. 바탕이 검으니 여기서는 반대로 칠한다. */
  .btn.dark{background:rgba(52,219,168,.14);color:#8ef0cd;
       border-color:var(--mint)}
  .btn.dark:hover{background:rgba(52,219,168,.24)}

  /* ---- 첫 화면 ---- */
  .hero{padding:56px 0 0;text-align:center;
        background:radial-gradient(900px 440px at 50% -14%,#d6eae3,transparent 62%)}
  .eyebrow{display:inline-flex;align-items:center;gap:8px;padding:5px 14px;
        border-radius:999px;background:var(--surface);border:1px solid var(--line2);
        font-size:12.5px;font-weight:600;color:var(--ink2);box-shadow:var(--sh1);
        margin-bottom:18px}
  .eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--mint);
        box-shadow:0 0 0 3px rgba(52,219,168,.24)}
  h1{margin:0 0 16px;font-size:clamp(31px,5.2vw,50px);font-weight:700;
     letter-spacing:-.042em;line-height:1.2;text-wrap:balance}
  h1 em{font-style:normal;color:var(--acc)}
  .sub{margin:0 auto 28px;max-width:54ch;color:var(--ink2);font-size:17.5px;
       line-height:1.72}
  .cta{display:flex;gap:11px;justify-content:center;flex-wrap:wrap}
  .fine{margin-top:16px;font-size:12.5px;color:var(--dim)}

  .shot{margin:44px auto 0;max-width:1120px;border-radius:16px 16px 0 0;
        border:1px solid var(--line2);border-bottom:0;background:var(--surface);
        box-shadow:var(--sh3),var(--lift);overflow:hidden}
  .shot .bar{display:flex;align-items:center;gap:7px;padding:11px 15px;
        border-bottom:1px solid var(--line);background:var(--surface2)}
  .shot .bar i{width:10px;height:10px;border-radius:50%;background:var(--line2)}
  .shot .bar span{margin-left:9px;font-size:11.5px;color:var(--dim);
        font-family:var(--logo)}
  .shot img{display:block;width:100%}

  /* ---- 마디 ---- */
  /* **마디 사이는 위아래 여백이 겹친다.** 84 로 두면 마디와 마디 사이가
     168 이 되어 한 화면이 통째로 비어 보인다. 색이 바뀌는 자리(.dark)에서는
     경계가 눈에 보이니 그대로 두고, 같은 색끼리 붙는 자리만 좁힌다. */
  section{padding:52px 0}
  section.dark,section+.dark,.dark+section{padding-top:74px;padding-bottom:74px}
  .end{padding:74px 0}
  .lbl{font-size:11.5px;font-weight:700;letter-spacing:.1em;color:var(--acc);
       text-transform:uppercase;margin-bottom:10px}
  h2{margin:0 0 11px;font-size:clamp(24px,3.4vw,33px);font-weight:700;
     letter-spacing:-.038em;line-height:1.28;text-wrap:balance}
  h3{margin:0 0 7px;font-size:17px;font-weight:700;letter-spacing:-.028em}
  .lead{margin:0 0 38px;color:var(--dim);font-size:16px;max-width:64ch;
        line-height:1.78}
  .lead b{color:var(--ink2)}
  /* **한국어는 낱말 안에서 줄이 바뀌면 안 된다.** 브라우저 기본은 글자 단위로
     끊어서 「승인은」이 「승인 / 은」이 된다. 낱말 단위로 끊게 바꾼다. */
  h1,h2,h3,.sub,.lead,.card p,.plan li,.duo li,details p,.fgroup dd,
  td,th,.who,.fine,.note{word-break:keep-all;overflow-wrap:break-word}
  .center{text-align:center}
  .center .lead{margin-left:auto;margin-right:auto}

  .grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
         gap:18px}
  /* 기능 갈래를 훑는 칸. 그림 없이 이름만 늘어놓아서 더 눕힌다. */
  .grid3.tight{grid-template-columns:repeat(auto-fit,minmax(205px,1fr));gap:14px}
  .tight .card{padding:18px 20px 20px}
  .tight .card h3{display:flex;align-items:center;gap:9px;margin:0 0 7px;
        font-size:15.5px}
  .tight .card p{margin:0;font-size:12.5px;color:var(--dim);line-height:1.7}
  .cnt{font-size:11.5px;font-weight:700;color:var(--acc-ink);
        background:var(--acc-soft);border:1px solid var(--acc-line);
        border-radius:999px;padding:1px 9px;font-variant-numeric:tabular-nums}
  .card{background:var(--surface);border:1px solid var(--line);border-radius:14px;
        padding:26px 25px 28px;box-shadow:var(--sh1),var(--lift)}
  .card .ico{width:40px;height:40px;border-radius:12px;display:grid;
        place-items:center;background:var(--acc-soft);color:var(--acc);
        border:1px solid var(--acc-line);margin-bottom:16px}
  .card p{margin:0;color:var(--dim);font-size:14px;line-height:1.72}
  .card p+p{margin-top:10px}

  /* ---- 두 단 ---- */
  .duo{display:grid;grid-template-columns:1fr 1.08fr;gap:56px;align-items:center}
  .duo.flip>div:first-child{order:2}
  @media (max-width:880px){ .duo{grid-template-columns:1fr;gap:26px}
                            .duo.flip>div:first-child{order:0} }
  .duo img{border-radius:13px;border:1px solid var(--line2);box-shadow:var(--sh2)}
  .duo ul{list-style:none;margin:20px 0 0;padding:0}
  .duo li{display:flex;gap:10px;align-items:flex-start;margin-bottom:11px;
      font-size:14.5px;color:var(--ink2);line-height:1.62}
  .duo li svg{flex:none;margin-top:4px;color:var(--acc)}

  /* ---- 어두운 마디 ---- */
  .dark{background:linear-gradient(150deg,var(--mk1),var(--mk2));color:#e8f0f4}
  .dark .lbl{color:var(--mint)}
  .dark h2,.dark h3{color:#fff}
  .dark .lead{color:#9aada9}
  .dark .lead b{color:#cfdcd8}
  .dark .card{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.09);
        box-shadow:none}
  .dark .card p{color:#9aada9}
  .dark .card .ico{background:rgba(52,219,168,.13);color:var(--mint);
        border-color:rgba(52,219,168,.28)}

  /* ---- 기능 목록 ---- */
  /* 갈래마다 개수가 달라서(홍보 3, 보안 9) 칸 높이를 맞추면 짧은 칸 아래가
     텅 빈다. 담긴 만큼만 높이를 갖게 둔다. */
  .feats{display:grid;grid-template-columns:repeat(auto-fit,minmax(286px,1fr));
         gap:18px;align-items:start}
  .fgroup{background:var(--surface);border:1px solid var(--line);
        border-radius:14px;padding:20px 22px 22px;box-shadow:var(--sh1),var(--lift)}
  .fgroup h3{display:flex;align-items:baseline;gap:8px;margin-bottom:14px;
        padding-bottom:12px;border-bottom:1px solid var(--line)}
  .fgroup h3 span{font-size:12px;font-weight:600;color:var(--dim2)}
  .fgroup dl{margin:0}
  .fgroup dt{font-size:14px;font-weight:650;margin-bottom:1px}
  .fgroup dd{margin:0 0 11px;font-size:13px;color:var(--dim);line-height:1.6}
  .fgroup dd:last-child{margin-bottom:0}

  /* ---- 다른 점 표 ---- */
  .tbl{border:1px solid var(--line);border-radius:14px;overflow:hidden;
       background:var(--surface);box-shadow:var(--sh2),var(--lift)}
  .tbl-scroll{overflow-x:auto}
  table{width:100%;border-collapse:collapse;font-size:14px}
  th,td{padding:15px 24px;text-align:left;border-bottom:1px solid var(--line);
        vertical-align:top}
  /* 첫 칸과 마지막 칸은 테두리 쪽으로 한 뼘 더 띄운다. 안 그러면 글이
     상자에 붙어 「담긴」 것으로 안 보인다. */
  th:first-child,td:first-child{padding-left:28px}
  th:last-child,td:last-child{padding-right:28px}
  thead th{padding-top:17px;padding-bottom:17px}
  thead th{font-size:11.5px;font-weight:700;letter-spacing:.07em;color:var(--dim);
     text-transform:uppercase;background:linear-gradient(180deg,var(--surface2),
     var(--surface3));border-bottom-color:var(--line2);white-space:nowrap}
  tbody tr:last-child td{border-bottom:0}
  tbody th{font-weight:650;font-size:14px;white-space:nowrap;width:180px}
  td.us{background:var(--acc-soft);color:#26356e;font-weight:600}
  thead th.us{background:linear-gradient(180deg,var(--acc-soft),#d7ede6);
        color:var(--acc-ink)}

  /* ---- 등급 ---- */
  /* 줄 수가 달라도 칸 아래를 맞춘다. start 로 두면 짧은 칸만 위로 붙어
     아래가 들쭉날쭉해 보인다. */
  .plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
         gap:18px;align-items:stretch}
  .plan{display:flex;flex-direction:column}
  .plan ul{flex:1}

  /* 결제 주기 손잡이 */
  .cycle{display:inline-flex;gap:4px;padding:4px;margin-bottom:26px;
        background:var(--surface2);border:1px solid var(--line);
        border-radius:999px}
  .cycle button{font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;
        padding:7px 17px;border-radius:999px;border:1px solid transparent;
        background:transparent;color:var(--dim);letter-spacing:-.01em;
        white-space:nowrap}
  .cycle button:hover{color:var(--ink2)}
  .cycle button.on{background:var(--surface);color:var(--acc-ink);
        border-color:var(--acc-line);box-shadow:var(--sh1)}
  .cycle i{font-style:normal;font-size:11.5px;font-weight:700;
        color:var(--acc);margin-left:4px}

  /* 주기별 값을 다 심어 두고 고른 것만 보인다. */
  .plans .price.q,.plans .price.h,.plans .peryear.q,.plans .peryear.h{display:none}
  .plans.q .price.q,.plans.q .peryear.q,
  .plans.h .price.h,.plans.h .peryear.h{display:block}
  .plans.q .price.mon,.plans.q .peryear.mon,
  .plans.h .price.mon,.plans.h .peryear.mon{display:none}
  .peryear{font-size:11.5px;color:var(--dim);margin:-6px 0 4px}
  .plan{background:var(--surface);border:1px solid var(--line);border-radius:14px;
        padding:26px 22px 28px;box-shadow:var(--sh1),var(--lift);position:relative}
  .plan.pick{border-color:var(--acc);box-shadow:var(--sh2),
        0 0 0 3px rgba(13,122,99,.13)}
  .plan .tag{position:absolute;top:-11px;left:22px;padding:3px 12px;
        border-radius:999px;background:var(--acc);color:#fff;font-size:11px;
        font-weight:700;letter-spacing:-.01em}
  .plan .price{font-size:27px;font-weight:700;letter-spacing:-.038em;
        margin:10px 0 3px}
  /* 숫자와 단위가 붙어 있으면 「300USDT」 한 낱말로 읽힌다. 한 칸 띄운다. */
  .plan .price small{font-size:13.5px;font-weight:600;color:var(--dim);
        letter-spacing:0;margin-left:7px}
  .plan .who{color:var(--dim);font-size:13px;min-height:40px}
  .plan ul{list-style:none;margin:17px 0 0;padding:0;
        border-top:1px solid var(--line);padding-top:16px}
  .plan li{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;
        color:var(--ink2);margin-bottom:9px;line-height:1.58}
  .plan li svg{flex:none;margin-top:3px;color:var(--acc)}
  .plan li.no{color:var(--dim2)}
  .plan li.no svg{color:var(--dim2)}

  /* ---- 자주 묻는 것 ---- */
  .qa{background:var(--surface);border:1px solid var(--line);border-radius:14px;
      box-shadow:var(--sh1),var(--lift);overflow:hidden}
  details{border-bottom:1px solid var(--line)}
  details:last-child{border-bottom:0}
  summary{cursor:pointer;padding:17px 22px;font-size:15px;font-weight:650;
      letter-spacing:-.022em;list-style:none;display:flex;align-items:center;
      gap:12px}
  summary::-webkit-details-marker{display:none}
  summary::after{content:"";margin-left:auto;width:9px;height:9px;flex:none;
      border-right:2px solid var(--dim2);border-bottom:2px solid var(--dim2);
      transform:rotate(45deg) translate(-2px,-2px);transition:transform .15s}
  details[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
  summary:hover{background:var(--surface2)}
  details p{margin:0;padding:0 22px 19px;color:var(--dim);font-size:14px;
      line-height:1.75;max-width:74ch}

  /* ---- 받기 ---- */
  .get{background:var(--surface);border:1px solid var(--line);border-radius:16px;
       padding:36px 34px 38px;box-shadow:var(--sh2),var(--lift);text-align:center}
  .get .mk{width:56px;height:56px;border-radius:16px;margin:0 auto 18px}
  .meta{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;
        margin-top:20px;font-size:12.5px;color:var(--dim)}
  .meta b{color:var(--ink2);font-weight:650}
  .soon{margin-top:18px;padding:12px 16px;border-radius:10px;
        background:var(--warn-soft);border:1px solid var(--warn-line);
        color:#7d4f06;font-size:13px;display:inline-block}

  footer{border-top:1px solid var(--line);padding:30px 0 50px;color:var(--dim);
         font-size:12.5px}
  footer .wrap{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
  footer .grow{flex:1}
  footer a{color:var(--dim);text-decoration:none}
  footer a:hover{color:var(--ink2)}

  @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto}
    details[open] summary::after,summary::after{transition:none} }

/* ---- 여러 장으로 나눈 뒤에 더한 것 ---- */
nav .home{display:flex;align-items:center;gap:11px;text-decoration:none;
     color:inherit}
nav a.lnk.on{background:var(--surface);color:var(--ink);
     box-shadow:inset 0 0 0 1px var(--line2)}
.btn.big{padding:14px 28px;font-size:15.5px}

/* 첫 장이 아닌 곳의 머리. 히어로만큼 크지 않게 한 단 낮춘다. */
.top{padding-top:56px;
     background:radial-gradient(820px 320px at 50% -18%,#dfeee8,transparent 64%)}
h1.small{margin:0 0 12px;font-size:clamp(27px,3.8vw,38px);font-weight:700;
     letter-spacing:-.04em;line-height:1.24;text-wrap:balance}
.end{background:linear-gradient(180deg,transparent,#e2ecea)}
.end .lead{margin-left:auto;margin-right:auto}

/* 받은 다음의 세 걸음 */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
     gap:18px;counter-reset:s}
.step{background:var(--surface);border:1px solid var(--line);border-radius:14px;
     padding:24px 24px 26px;box-shadow:var(--sh1),var(--lift);position:relative}
/* **바로 아래 자식만** 고른다. `.step b` 로 두면 문단 안의 굵은 글씨까지
   번호 모양을 뒤집어쓴다. 9/8 「/newbot」 이 그렇게 됐다. */
.step>b{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;
     background:var(--acc-soft);border:1px solid var(--acc-line);color:var(--acc);
     font-size:14px;font-weight:700;margin-bottom:14px;
     font-family:var(--logo)}
.step p b{color:var(--ink2);font-weight:700}
.step p{margin:0;color:var(--dim);font-size:14px;line-height:1.72}
.mk.big{width:60px;height:60px;border-radius:17px}