:root {
    color-scheme: light;
    --canvas:#FFFFFF;
    --soft:#F7F9FE;
    --surface:#FFFFFF;
    --ink:#0B0B0F; --ink-2:#4E5361; --ink-3:#5C6270; --ink-4:#6C7181;
    /* 입력칸 안내 글자. 흰 바탕에서도 읽히는 대비다 */
    --ink-ph-t:#6F7583;
    --line:#EAEBF0; --line-2:#EFF3FE; --line-3:#DCDEE5;
    --accent:#2E5BE6; --accent-h:#2449C4; --accent-bg:#EFF3FE; --accent-ln:#C6D3F6;
    --ok:#137A4E; --ok-bg:#EFF7F2; --ok-ln:#CDE7DA;
    --warn:#8A5B00; --warn-bg:#FBF5E9; --warn-ln:#EEDFBE;
    --r-sm:8px; --r:10px; --r-lg:20px;

    /* 버튼 한 벌이 쓰는 값 — 네 화면이 같은 글을 나눠 갖는다 */
    --subtle:#F2F4F7; --hover:#FAFBFC; --accent-d:#1D3A9E;
    --danger:#C33A2E; --danger-h:#A82F25; --danger-d:#8C271E;
    --danger-bg:#FCF2F1; --danger-ln:#EFD3CF;
    --dur:.16s;
    --sh-b:0 1px 1.5px rgba(11,11,15,.05);
    --sh-bh:0 1px 3px rgba(11,11,15,.09);
    --sh-bp:0 1px 2px rgba(29,58,158,.28), inset 0 1px 0 rgba(255,255,255,.2);
    --sh-bph:0 2px 5px rgba(29,58,158,.3), inset 0 1px 0 rgba(255,255,255,.2);
    --sh-3:0 16px 50px rgba(11,11,15,.13), 0 2px 8px rgba(11,11,15,.05);
    --sans:"Pretendard Variable",Pretendard,"Pretendard 대체",system-ui,sans-serif;
  }
  /* 폰트 대체 시 글자가 내려앉지 않게 세로 수치를 맞춘 얼굴을 Pretendard 뒤에 끼운다 */
  @font-face {
    font-family:"Pretendard 대체";
    src:local("Malgun Gothic"), local("맑은 고딕"), local("Apple SD Gothic Neo"),
        local("Noto Sans KR"), local("Segoe UI");
    ascent-override:102%;
    descent-override:24%;
    line-gap-override:0%;
  }
  /* 무한 애니메이션 둘은 움직임 줄이기를 따르고 스크롤 부드럽게는 JS 가 갈래를 가른다 */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  }
  body {
    background:var(--canvas); color:var(--ink); font-family:var(--sans);
    font-size:16px; line-height:1.65; letter-spacing:-.006em; font-weight:400;
    -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
    padding-bottom:calc(64px + env(safe-area-inset-bottom));
    /* 한글은 기본값이면 낱말 한가운데서 줄이 바뀐다. 띄어쓰기에서만 끊는다 */
    word-break:keep-all; overflow-wrap:break-word;
  }
  a { color:inherit; text-decoration:none; }
  /* 폼 요소 글꼴 상속은 머리 리셋이 사라졌을 때를 받치는 그물이고 line-height 는 안 물린다 */
  button, input, select, textarea, optgroup { font-family:inherit; }
  .num { font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }
  :focus, :focus-visible { outline:none; }
  ::selection { background:var(--accent-ln); }
  .wrap { max-width:1060px; margin:0 auto; padding:0 20px; }

  /* sticky 내비에 가려지지 않게 앵커 이동 자리마다 scroll-margin 을 준다 */
  #check, #cases, #data, #way, #faq, .rep { scroll-margin-top:66px; }

  /* ── nav ── */
  .nav {
    position:sticky; top:0; z-index:50; background:rgba(255,255,255,.84);
    -webkit-backdrop-filter:blur(16px) saturate(1.6); backdrop-filter:blur(16px) saturate(1.6);
    border-bottom:1px solid var(--line);
  }
  .nav-in { max-width:1060px; margin:0 auto; padding:12px 20px; display:flex; align-items:center; gap:10px; }
  .mark {
    width:28px; height:28px; border-radius:9px; flex:none;
    background:linear-gradient(160deg,#3E6BEB,#1F41BE); color:#fff;
    display:grid; place-items:center; font-size:12.5px; font-weight:700;
    box-shadow:0 1px 2px rgba(14,16,25,.34), inset 0 1px 0 rgba(255,255,255,.22);
  }
  .mark.logo { width:30px; height:30px; border-radius:0; box-shadow:none; background:#080404;
    -webkit-mask:var(--logo) center/contain no-repeat; mask:var(--logo) center/contain no-repeat; }
  .brand { font-size:15px; font-weight:650; letter-spacing:-.026em; }
  .nav-links { margin-left:auto; display:none; gap:2px; }
  .nav-links a {
    display:inline-flex; align-items:center; min-height:38px;
    padding:0 13px; border-radius:var(--r-sm); font-size:14px; font-weight:550;
    color:var(--ink-2); transition:background .12s, color .12s;
  }
  .nav-links a:hover { background:var(--soft); color:var(--ink); }
  .nav-cta { margin-left:auto; display:flex; gap:7px; align-items:center; }
  .nav-links + .nav-cta { margin-left:12px; }

  /* ── atoms ── */
  /* 버튼은 네 화면이 공유하는 한 벌이라 다섯 크기 값으로만 바꾸고 직접 수치를 안 쓴다 */
  .btn {
    --btn-h:34px; --btn-r:9px; --btn-px:14px; --btn-fs:13.5px; --btn-fw:600; --btn-sv:14px;
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    height:var(--btn-h); padding:0 var(--btn-px); border-radius:var(--btn-r);
    font-family:inherit; font-size:var(--btn-fs); font-weight:var(--btn-fw);
    letter-spacing:-.011em; line-height:1;
    background:var(--surface); border:1px solid var(--line-3); color:var(--ink);
    cursor:pointer; white-space:nowrap; user-select:none; box-shadow:var(--sh-b);
    transition:background var(--dur) ease, border-color var(--dur) ease,
               box-shadow var(--dur) ease, transform .08s ease;
  }
  .btn:hover { background:var(--hover); border-color:#C2C7D2; box-shadow:var(--sh-bh); }
  .btn:active { background:var(--subtle); box-shadow:none; transform:translateY(1px); }
  /* 정의가 두 곳이면 뒤가 이겨 cursor:not-allowed 가 죽는다. 여기 하나로 둔다 */
  .btn:disabled { opacity:.62; cursor:not-allowed; box-shadow:none; transform:none; }
  .btn svg { width:var(--btn-sv); height:var(--btn-sv); stroke-width:1.85; flex:none; }

  /* 주요 — 한 화면에 하나가 원칙이다 */
  .btn-p { background:var(--accent); border-color:var(--accent-h); color:#fff; box-shadow:var(--sh-bp); }
  .btn-p:hover { background:var(--accent-h); border-color:var(--accent-d); box-shadow:var(--sh-bph); }
  .btn-p:active { background:var(--accent-d); box-shadow:inset 0 1px 2px rgba(0,0,0,.22); transform:translateY(1px); }

  /* 크기 — 값이 아니라 이 다섯 개를 쓴다 */
  .btn-xs { --btn-h:24px; --btn-r:7px; --btn-px:8px; --btn-fs:12px; --btn-sv:12px; }
  .btn-sm { --btn-h:29px; --btn-r:8px; --btn-px:11px; --btn-fs:12.5px; --btn-sv:13px; }
  .btn-lg { --btn-h:44px; --btn-r:11px; --btn-px:20px; --btn-fs:15px; --btn-sv:16px; }
  .btn-xl { --btn-h:52px; --btn-r:13px; --btn-px:26px; --btn-fs:16.5px; --btn-fw:650; --btn-sv:18px; }

  /* 조용한 — 테두리와 그림자를 걷고 올릴 때만 바닥이 생긴다 */
  .btn-gh { background:none; border-color:transparent; box-shadow:none; color:var(--ink-2); }
  .btn-gh:hover { background:var(--subtle); border-color:transparent; color:var(--ink); box-shadow:none; }
  .btn-gh:active { background:var(--subtle); box-shadow:none; transform:translateY(1px); }

  /* 삭제 — 아이콘 대신 글자로, 위험도가 보이되 과하지 않게 */
  /* 삭제 단추는 평소엔 테두리·글자만 붉게 두고 올렸을 때만 물들인다 */
  .btn-del { background:var(--surface); border-color:var(--danger-ln); color:var(--danger-d);
             box-shadow:var(--sh-b); }
  .btn-del:hover { background:var(--danger-bg); border-color:#DCAFA9; color:var(--danger-h);
                   box-shadow:var(--sh-bh); }
  .btn-del:active { background:#F6DEDA; border-color:#D2A099;
                    box-shadow:inset 0 1px 2px rgba(140,39,30,.12); transform:translateY(1px); }
  .btn-del:focus-visible { border-color:var(--danger); }

  /* 아이콘만 — 너비가 높이를 따라가 늘 정사각이다 */
  .btn-ic { --btn-px:0; width:var(--btn-h); }
  .btn-w { width:100%; }

  /* 상태 표식은 세 화면이 같은 벌을 쓰되 랜딩만 본문과 안 튀게 글자를 조금 키운다 */
  .bdg {
    display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 10px 0 12px;
    border-radius:8px; font-size:12px; font-weight:650; letter-spacing:-.008em; line-height:1;
    background:var(--subtle); color:var(--ink-3); border:0;
    box-shadow:inset 2px 0 0 var(--ink-4), inset 0 0 0 1px var(--line);
  }
  .bdg.ok { background:var(--ok-bg); color:var(--ok);
            box-shadow:inset 2px 0 0 var(--ok), inset 0 0 0 1px var(--ok-ln); }
  .bdg.warn { background:var(--warn-bg); color:var(--warn);
              box-shadow:inset 2px 0 0 #C08A1E, inset 0 0 0 1px var(--warn-ln); }

  /* ── hero ── */
  .hero { position:relative; overflow:hidden; padding:58px 0 46px; }
  .hero::before {
    content:""; position:absolute; inset:auto 0 auto 50%; top:-46vmax;
    width:96vmax; height:96vmax; transform:translateX(-50%); border-radius:50%;
    background:radial-gradient(circle, rgba(46,91,230,.07), rgba(46,91,230,0) 60%); pointer-events:none;
  }
  .hero .wrap { position:relative; z-index:1; }
  .eyebrow {
    display:inline-flex; align-items:center; gap:7px; height:30px; padding:0 13px;
    border-radius:99px; background:var(--accent-bg); border:1px solid var(--accent-ln);
    color:#1D3A9E; font-size:13px; font-weight:600; letter-spacing:-.01em; margin-bottom:20px;
  }
  h1 {
    margin:0; font-size:clamp(31px, 6.4vw, 52px); font-weight:700;
    letter-spacing:-.042em; line-height:1.24; text-wrap:balance;
  }
  h1 .hl { color:var(--accent); }
  .hero-p {
    margin:18px 0 0; font-size:clamp(15.5px, 2.4vw, 18px); color:var(--ink-2);
    line-height:1.7; max-width:36ch;
  }

  /* 진단 입력 */
  .form {
    margin-top:28px; background:var(--surface); border:1px solid var(--line);
    border-radius:var(--r-lg); box-shadow:var(--sh-3); padding:18px; max-width:560px;
  }
  .form-l { font-size:13px; font-weight:600; color:var(--ink-2); margin-bottom:9px; }
  .form-row { display:flex; gap:8px; flex-direction:column; }
  /* 입력칸은 iOS 확대를 막게 16px 을 기본으로 하고 마우스 환경에서만 되돌린다 */
  .inp {
    width:100%; height:48px; border:1px solid var(--line-3); border-radius:var(--r);
    padding:0 14px; font-size:16px; background:var(--surface); color:var(--ink); letter-spacing:-.01em;
    transition:border-color .12s, box-shadow .12s;
  }
  @media (pointer:fine) { .inp { font-size:15.5px; } }
  .inp:focus { outline:none; border-color:var(--ink-4); box-shadow:none; }
  .inp::placeholder { color:var(--ink-ph-t); }
  .micro { margin-top:12px; font-size:13px; color:var(--ink-3); display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
  .micro b { color:var(--ink-2); font-weight:600; }
  /* 진행 알림 자리는 화면엔 안 보이되 읽히게 display·visibility 숨김을 안 쓴다 */
  .micro-live {
    position:absolute; width:1px; height:1px; margin:-1px; padding:0;
    overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
  }
  .dot { width:3px; height:3px; border-radius:50%; background:var(--ink-4); }

  /* 진단 단계 */
  .steps { display:grid; gap:6px; margin-top:16px; }
  .st { display:flex; align-items:center; gap:10px; padding:10px 13px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface); transition:border-color .2s, background .2s; }
  .st-d { width:20px; height:20px; flex:none; border-radius:50%; background:var(--soft); color:var(--ink-4); display:grid; place-items:center; font-size:10.5px; font-weight:600; }
  .st-t { font-size:13.5px; font-weight:500; }
  .st-s { margin-left:auto; font-size:11.5px; font-weight:500; color:var(--ink-4); }
  .st.run { border-color:var(--accent-ln); background:var(--accent-bg); }
  .st.run .st-d { background:var(--accent); color:#fff; }
  .st.run .st-s { color:#1D3A9E; }
  .st.done .st-d { background:var(--ok-bg); color:var(--ok); }
  .st.done .st-s { color:var(--ok); }


  /* footer */
  .foot { padding:46px 0 40px; border-top:1px solid var(--line); background:var(--soft); }
  .foot-g { display:grid; gap:26px; grid-template-columns:1fr; }
  .foot-k { font-size:12px; font-weight:600; color:var(--ink-4); margin-bottom:11px; letter-spacing:.03em; }
  .foot a, .foot li { font-size:13.5px; color:var(--ink-2); line-height:2; }
  /* 하단 링크도 손가락으로 누를 수 있는 높이를 준다 */
  .foot a { display:inline-flex; align-items:center; min-height:34px; }
  .foot a:hover { color:var(--ink); }
  .foot ul { list-style:none; margin:0; padding:0; }
  .biz { margin-top:32px; padding-top:22px; border-top:1px solid var(--line); font-size:12px; color:var(--ink-4); line-height:1.95; }

  /* 하단 고정 CTA */
  .stick {
    position:fixed; left:0; right:0; bottom:0; z-index:60;
    background:rgba(255,255,255,.9); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
    border-top:1px solid var(--line); padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    display:flex; align-items:center; gap:12px;
  }
  .stick-t { font-size:13.5px; font-weight:550; letter-spacing:-.012em; min-width:0; }
  .stick-s { font-size:12px; color:var(--ink-3); }
  .stick .btn { margin-left:auto; flex:none; }

  /* 결과 리포트 */
  .rep { margin-top:20px; display:none; }
  .rep.on { display:block; animation:rin .4s cubic-bezier(.32,.72,.29,1); }
  @keyframes rin { from { opacity:0; transform:translateY(14px); } }
  .rep-top {
    background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
    box-shadow:var(--sh-3); overflow:hidden;
  }
  .rep-h { padding:20px 22px; border-bottom:1px solid var(--line-2); display:flex; align-items:center; gap:13px; flex-wrap:wrap; }
  .rep-nm { font-size:18px; font-weight:680; letter-spacing:-.026em; }
  .rep-sub { font-size:13px; color:var(--ink-3); margin-top:2px; }
  .score { margin-left:auto; text-align:right; flex:none; }
  .score-v { font-size:38px; font-weight:680; letter-spacing:-.044em; line-height:1; color:var(--accent); font-variant-numeric:tabular-nums; }
  .score-v small { font-size:.4em; font-weight:550; color:var(--ink-3); margin-left:2px; }
  .score-k { font-size:12px; color:var(--ink-3); margin-top:4px; }
  .rep-b { padding:22px; display:grid; gap:22px; }
  .rep-t { font-size:13px; font-weight:600; color:var(--ink-2); margin-bottom:11px; display:flex; align-items:center; gap:8px; }
  .rep-t .bdg { height:22px; font-size:11.5px; }

  .kwt { width:100%; border-collapse:collapse; }
  .kwt th { text-align:left; font-size:12px; font-weight:550; color:var(--ink-3); padding:8px 12px; border-bottom:1px solid var(--line); background:#FCFCFD; white-space:nowrap; }
  .kwt td { padding:11px 12px; border-bottom:1px solid var(--line-2); font-size:14px; color:var(--ink-2); }
  .kwt tr:last-child td { border-bottom:0; }
  .kwt .k { font-weight:600; color:var(--ink); }
  .tbox { border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
  .tscroll { overflow-x:auto; }

  .pri { display:grid; gap:9px; }
  .pri-i { display:flex; gap:12px; align-items:flex-start; font-size:14.5px; color:var(--ink-2); line-height:1.6; }
  .pri-n {
    width:21px; height:21px; flex:none; border-radius:6px; background:var(--accent);
    color:#fff; display:grid; place-items:center; font-size:11px; font-weight:700; margin-top:2px;
  }

  /* 못 읽은 채널은 막대를 안 그려 조회 실패가 0점짜리 가게로 안 읽히게 한다 */
  .ch { display:grid; gap:9px; }
  .ch-i { display:grid; grid-template-columns:66px 1fr 44px; align-items:center; gap:11px; }
  .ch-n { font-size:13px; color:var(--ink-2); font-weight:550; }
  .ch-bar { height:8px; border-radius:99px; background:var(--subtle); box-shadow:inset 0 0 0 1px var(--line); overflow:hidden; }
  .ch-bar i { display:block; height:100%; border-radius:99px; background:var(--accent); }
  .ch-bar.off { background:repeating-linear-gradient(-45deg, var(--subtle) 0 5px, #fff 5px 10px); }
  .ch-v { font-size:13.5px; font-weight:650; text-align:right; font-variant-numeric:tabular-nums; color:var(--ink); }
  .ch-note { margin-top:9px; font-size:12px; color:var(--warn); line-height:1.6; }

  /* 잠긴 목록 — 무엇이 더 있는지는 보여 주고 값만 가린다 */
  .lockl { display:grid; gap:7px; }
  .lock-i { display:flex; align-items:center; gap:10px; padding:11px 13px; border:1px solid var(--line);
            border-radius:var(--r-sm); background:var(--soft); }
  .lock-ic { width:15px; height:15px; flex:none; color:var(--ink-4); }
  .lock-ic svg { width:15px; height:15px; display:block; }
  .lock-k { font-size:13.5px; color:var(--ink-3); }
  .lock-b { margin-left:auto; flex:none; font-size:11px; font-weight:650; color:var(--ink-4); }

  /* 블로그 구좌 표본 */
  .blogl { margin-top:11px; display:grid; gap:6px; }
  .blog-i { display:flex; align-items:baseline; gap:10px; font-size:13.5px; line-height:1.55; }
  .blog-r { flex:none; width:20px; font-size:11.5px; font-weight:650; color:var(--ink-4); font-variant-numeric:tabular-nums; }
  .blog-i a { color:var(--ink-2); text-decoration:underline; text-underline-offset:2px; }
  .blog-i a:hover { color:var(--accent); }

  /* 추천 운영 영역 */
  .areas { display:flex; flex-wrap:wrap; gap:7px; }
  .area { display:inline-flex; align-items:center; height:30px; padding:0 13px; border-radius:99px;
          background:var(--accent-bg); border:1px solid var(--accent-ln); color:#1D3A9E;
          font-size:13px; font-weight:600; }

  /* 진단 중 확인된 리뷰. 별점은 있을 때만, 출처와 작성일은 가는 세로줄로 가른다 */
  .rvl { display:grid; gap:9px; }
  .rv-c { padding:14px 16px 13px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); }
  .rv-s { position:relative; display:inline-block; height:17px; margin-bottom:7px; vertical-align:top; }
  .rv-s0, .rv-s1 { display:flex; height:17px; white-space:nowrap; }
  .rv-s1 { position:absolute; left:0; top:0; overflow:hidden; }
  .rv-s svg { width:18px; height:17px; flex:none; display:block; }
  .rv-s0 svg { fill:var(--line-3); }
  .rv-s1 svg { fill:#F59E0B; }
  .rv-q { font-size:14.5px; line-height:1.65; color:var(--ink); }
  .rv-m { display:flex; flex-wrap:wrap; align-items:center; margin-top:7px; font-size:12.5px; color:var(--ink-4); }
  .rv-m span + span::before { content:""; display:inline-block; width:1px; height:10px; margin:0 8px; vertical-align:-1px; background:var(--line-3); }
  .rv-o { margin-top:12px; padding:15px 17px; border:1px solid var(--accent-ln); border-radius:var(--r); background:var(--accent-bg); }
  .rv-oh { font-size:16px; font-weight:700; letter-spacing:-.022em; color:var(--ink); }
  .rv-op { margin-top:5px; font-size:14px; line-height:1.6; color:var(--ink-2); }
  .rv-op b { font-weight:700; color:var(--accent-d); }
  /* 상담 칸 위 혜택 말풍선. 리뷰를 찾았을 때만 선다 */
  .bub {
    position:relative; display:inline-flex; flex-direction:column; gap:1px; margin:0 0 16px;
    padding:10px 18px 11px; border-radius:14px; background:var(--accent); color:#fff;
  }
  .bub::after {
    content:""; position:absolute; left:26px; bottom:-5px; width:10px; height:10px;
    background:var(--accent); border-radius:2px; transform:rotate(45deg);
  }
  .bub-k { font-size:12px; font-weight:600; opacity:.9; }
  .bub b { font-size:15.5px; font-weight:700; letter-spacing:-.02em; }

  .rep-f { padding:20px 22px; background:#FCFCFD; border-top:1px solid var(--line-2); }
  .lead { display:grid; gap:9px; }
  /* 동의 줄은 .lead 그리드 밖에 둬 3열이 될 때 엉뚱한 칸으로 안 끼게 한다 */
  .agree { display:flex; align-items:flex-start; gap:8px; margin-top:11px; font-size:12.5px; color:var(--ink-3); line-height:1.6; cursor:pointer; }
  .agree input { width:16px; height:16px; flex:none; margin:2px 0 0; accent-color:var(--accent); }
  .agree-todo { color:var(--ink-4); text-decoration:underline; text-underline-offset:2px; text-decoration-style:dotted; }
  .disc { margin-top:14px; font-size:11.5px; color:var(--ink-4); line-height:1.7; }

  /* ══════ iPhone 목업 ══════ */
  .phone {
    position:relative; width:min(330px, 84vw); aspect-ratio:393/852;
    margin:0 auto; flex:none;
    filter:drop-shadow(0 30px 60px rgba(11,11,15,.22)) drop-shadow(0 8px 18px rgba(11,11,15,.12));
  }
  .ph-body {
    position:absolute; inset:0; border-radius:14.2%/6.6%;
    background:
      linear-gradient(148deg,#5A5E66 0%,#2B2E34 9%,#191B1F 26%,#0F1012 50%,#1D1F23 72%,#43474E 90%,#24272C 100%);
    padding:2.6%;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.13), inset 0 1px 1px rgba(255,255,255,.2);
  }
  .ph-screen {
    position:relative; width:100%; height:100%; overflow:hidden;
    border-radius:12.4%/5.6%; background:#fff;
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.5);
  }
  .ph-screen iframe {
    position:absolute; left:0; right:0; bottom:0; top:46px;
    width:100%; height:calc(100% - 46px); border:0; background:#fff;
    display:block;
  }
  .ph-status {
    position:absolute; top:0; left:0; right:0; height:46px; z-index:4;
    background:#fff; display:flex; align-items:center; justify-content:space-between;
    padding:10px 22px 0; pointer-events:none;
  }
  .ph-time { font-size:13.5px; font-weight:650; letter-spacing:-.02em; color:#0B0B0F; font-variant-numeric:tabular-nums; }
  .ph-ind { display:flex; align-items:center; gap:5px; color:#0B0B0F; }
  .ph-ind svg { height:11px; width:auto; display:block; }
  .ph-island {
    position:absolute; top:9px; left:50%; transform:translateX(-50%); z-index:6;
    width:29.5%; height:26px; border-radius:99px; background:#08090A;
    box-shadow:0 0 0 .5px rgba(255,255,255,.06);
  }
  .ph-island::after {
    content:""; position:absolute; right:9px; top:50%; transform:translateY(-50%);
    width:7px; height:7px; border-radius:50%;
    background:radial-gradient(circle at 34% 32%, #2E3D52 0%, #10161F 58%, #05070A 100%);
  }
  .ph-home {
    position:absolute; left:50%; bottom:7px; transform:translateX(-50%); z-index:5;
    width:34%; height:4px; border-radius:99px; background:rgba(11,11,15,.34);
  }
  .ph-glare {
    position:absolute; inset:0; z-index:3; pointer-events:none; border-radius:inherit;
    background:linear-gradient(118deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,0) 26%, rgba(255,255,255,0) 74%, rgba(255,255,255,.09) 100%);
    mix-blend-mode:overlay;
  }
  .ph-btn { position:absolute; background:linear-gradient(90deg,#4A4E56,#22252A 55%,#3B3F46); border-radius:2px; }
  .ph-act  { left:-2px; top:16.4%; width:3px; height:3.6%; border-radius:2px 0 0 2px; }
  .ph-vu   { left:-2px; top:25.6%; width:3px; height:6.4%; border-radius:2px 0 0 2px; }
  .ph-vd   { left:-2px; top:34.2%; width:3px; height:6.4%; border-radius:2px 0 0 2px; }
  .ph-pwr  { right:-2px; top:28.4%; width:3px; height:9.4%; border-radius:0 2px 2px 0; }

  .ph-hint {
    display:flex; align-items:center; justify-content:center; gap:7px;
    margin-top:16px; font-size:12.5px; color:var(--ink-3); font-weight:500;
  }
  .ph-hint svg { width:13px; height:13px; stroke-width:1.9; animation:sw 1.9s ease-in-out infinite; }
  @keyframes sw { 0%,100% { transform:translateY(-2px); opacity:.5; } 50% { transform:translateY(2px); opacity:1; } }

  .hero-grid { display:grid; gap:38px; grid-template-columns:1fr; align-items:center; }
  .phone-wrap { display:flex; flex-direction:column; align-items:center; }
  .phone-cap { text-align:center; margin-bottom:18px; }
  .phone-cap b { display:block; font-size:14.5px; font-weight:650; letter-spacing:-.02em; }
  .phone-cap span { font-size:13px; color:var(--ink-3); }

  @media (min-width:760px) {
    .nav-links { display:flex; }
    .nav-cta { margin-left:0; }
    .form-row { flex-direction:row; }
    .form-row .inp { flex:1; }
    .foot-g { grid-template-columns:1.4fr 1fr 1fr; }
    .hero-grid { grid-template-columns:1fr .82fr; gap:48px; }
    .phone { width:min(316px, 100%); }
    .lead { grid-template-columns:1fr 1fr auto; }
    .hero { padding:76px 0 60px; }
    body { padding-bottom:0; }
    .stick { display:none; }
  }

  /* 좁은 화면에서 브랜드 줄바꿈으로 내비가 부풀어 로그인 단추를 빼고 nowrap 을 건다 */
  @media (max-width:759px) {
    .nav-cta a[href="client.html"] { display:none; }
    .brand { white-space:nowrap; }
  }


  /* 옮겨 온 소개 랜딩 CSS 는 전부 .gd 아래에 가두고, 우리 제목 규칙이 스며든 값만 첫 줄에서 원본 쪽으로 되돌린다 */
  .gd h1, .gd h2, .gd h3, .gd h4 { font-weight:900; line-height:1.4; text-wrap:wrap; }
  .gd * { margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent }
  .gd { font-family:var(--sans);color:#111;line-height:1.85;font-size:17px;-webkit-font-smoothing:antialiased;word-break:keep-all }
  .gd .container { max-width:720px;margin:0 auto;padding:0 24px }
  .gd strong { font-weight:800 }
  .gd em { font-style:normal;font-weight:800 }
  .gd .hl { background:linear-gradient(to top,#fff200 55%,transparent 55%);padding:0 2px;font-weight:800 }
  .gd .red { color:#d32f2f;font-weight:800 }
  .gd .hero { padding:100px 0 80px;text-align:center }
  .gd .hero .label { font-size:12px;letter-spacing:0.2em;color:#888;font-weight:700;margin-bottom:28px }
  .gd .hero h1 { font-size:38px;line-height:1.35;font-weight:900;letter-spacing:-0.03em;margin-bottom:28px }
  .gd .hero .sub { font-size:18px;color:#444;line-height:1.7 }
  .gd .hero .scroll-hint { font-size:13px;color:#aaa;letter-spacing:0.1em;margin-top:50px }
  .gd section { padding:90px 0;border-top:1px solid #eee }
  .gd section .label { display:inline-block;font-size:11px;letter-spacing:0.2em;color:#888;font-weight:800;margin-bottom:22px;border:1px solid #ddd;padding:7px 14px;border-radius:100px;background:#fff }
  .gd section h2 { font-size:29px;line-height:1.4;font-weight:900;letter-spacing:-0.025em;margin-bottom:30px }
  .gd section h3 { font-size:21px;line-height:1.5;font-weight:800;margin:36px 0 16px;letter-spacing:-0.02em }
  .gd section p { margin-bottom:20px;line-height:1.9 }
  .gd .pullquote { border-left:4px solid #111;padding:8px 0 8px 22px;margin:36px 0;font-size:20px;font-weight:800;line-height:1.6;letter-spacing:-0.01em }
  .gd .dark-card { background:#111;color:#fff;padding:56px 32px;margin:40px -24px;text-align:center }
  .gd .dark-card p { color:#fff;margin-bottom:0 }
  .gd .dark-card .big { font-size:25px;font-weight:900;line-height:1.5;margin-bottom:18px;letter-spacing:-0.02em }
  .gd .dark-card .small { font-size:16px;color:#bbb;line-height:1.7 }
  .gd .num-list { list-style:none;padding:0;margin:36px 0 }
  .gd .num-list>li { padding:30px 0;border-bottom:1px solid #eee;display:grid;grid-template-columns:50px 1fr;gap:20px }
  .gd .num-list>li:first-child { padding-top:0 }
  .gd .num-list>li:last-child { border-bottom:none;padding-bottom:0 }
  .gd .num-list .n { font-size:21px;font-weight:900;letter-spacing:-0.02em;color:#111;padding-top:2px }
  .gd .num-list .body h4 { font-size:19px;font-weight:900;margin-bottom:12px;letter-spacing:-0.02em;line-height:1.45 }
  .gd .num-list .body p { font-size:16px;line-height:1.85;margin-bottom:0;color:#333 }
  .gd .num-list .body p+p { margin-top:14px }
  .gd .stat-row { display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:34px 0 }
  .gd .stat-box { background:#f5f5f5;padding:34px 22px;border-radius:8px;text-align:center }
  .gd .stat-box .v { font-size:29px;font-weight:900;letter-spacing:-0.025em;line-height:1.2;margin-bottom:10px }
  .gd .stat-box .l { font-size:13.5px;color:#666;line-height:1.5 }
  .gd .case-card { background:#fafafa;border:1px solid #eee;padding:30px 26px;margin:18px 0;border-radius:8px }
  .gd .case-card .case-label { font-size:13px;color:#888;font-weight:700;letter-spacing:0.04em;margin-bottom:10px }
  .gd .case-card .case-h { font-size:22px;font-weight:900;line-height:1.4;letter-spacing:-0.02em;margin-bottom:12px;color:#111 }
  .gd .case-card .case-d { font-size:15px;color:#555;line-height:1.7;margin-bottom:0 }
  .gd .bubble-wrap { margin:28px 0;overflow:hidden }
  .gd .bubble { background:#f0f0f0;padding:16px 22px;border-radius:18px;margin-bottom:10px;font-size:15.5px;font-weight:600;display:block;line-height:1.5;max-width:90%;width:fit-content;color:#333 }
  .gd .bubble.left { float:left;clear:both }
  .gd .faq-item { border-bottom:1px solid #eee;padding:28px 0 }
  .gd .faq-item:first-child { padding-top:0 }
  .gd .faq-item:last-child { border-bottom:none }
  .gd .faq-item .q { font-size:18px;font-weight:800;margin-bottom:14px;letter-spacing:-0.02em;line-height:1.5 }
  .gd .faq-item .q::before { content:"Q. ";font-weight:900 }
  .gd .faq-item .a { font-size:15px;color:#444;line-height:1.85;margin-bottom:0 }
  .gd .faq-item .a::before { content:"A. ";font-weight:900;color:#111 }
  .gd .cta-section { background:#111;color:#fff;padding:80px 24px;text-align:center }
  .gd .cta-section .label { color:#aaa;border-color:#444;background:transparent }
  .gd .cta-section h2 { color:#fff;margin-bottom:22px;font-size:30px }
  .gd .cta-section p { color:#bbb }
  .gd .cta-section .gd-btn { display:inline-block;background:#fff;color:#111;padding:20px 60px;font-size:17px;font-weight:900;border-radius:4px;text-decoration:none;margin-top:32px;letter-spacing:-0.01em }
  .gd .cta-section .contact { margin-top:30px;font-size:14px;color:#999;line-height:1.8 }
  .gd .cta-section p strong { color:#fff;font-weight:900 }
  .gd .cta-section a { color:#fff;text-decoration:underline;text-underline-offset:4px;cursor:pointer }
  .gd .cta-section a:hover { opacity:0.75 }
  .gd .cta-section hr { border:none;border-top:1px solid #444;width:48px;margin:32px auto }
  .gd #reject-3 { scroll-margin-top:66px }
  .gd #reject-3 .n { color:#d32f2f }
  @media (max-width:640px) {
    .gd { font-size:16px }
    .gd .hero { padding:70px 0 50px }
    .gd .hero h1 { font-size:27px;margin-bottom:22px }
    .gd .hero .sub { font-size:16px }
    .gd section { padding:64px 0 }
    .gd section h2 { font-size:23px;margin-bottom:24px }
    .gd section h3 { font-size:18px }
    .gd .pullquote { font-size:17px;padding-left:16px }
    .gd .stat-row { grid-template-columns:1fr;gap:12px }
    .gd .stat-box { padding:28px 18px }
    .gd .stat-box .v { font-size:25px }
    .gd .num-list>li { grid-template-columns:36px 1fr;gap:12px;padding:24px 0 }
    .gd .num-list .n { font-size:17px }
    .gd .num-list .body h4 { font-size:17px }
    .gd .num-list .body p { font-size:15px }
    .gd .dark-card { padding:42px 24px;margin:32px -24px }
    .gd .dark-card .big { font-size:20px }
    .gd .case-card { padding:26px 22px }
    .gd .case-card .case-h { font-size:19px }
    .gd .cta-section { padding:60px 24px }
    .gd .cta-section h2 { font-size:24px }
    .gd .cta-section .gd-btn { padding:17px 44px;font-size:16px;display:block;max-width:280px;margin:32px auto 0 }
  }
  .gd .gear-svg-wrap { margin:44px 0;text-align:center }
  .gd .gear-svg-wrap svg { display:block;width:100%;height:auto;max-width:560px;margin:0 auto }
  .gd .gear-svg-wrap svg circle[fill="#fff"], .gd .compare-card svg circle[fill="#fff"] { display:none }
  .gd .gear-caption { font-size:18px;font-weight:800;text-align:center;line-height:1.7;margin:28px 0 0;letter-spacing:-0.01em }
  .gd .gear-caption .red { color:#d32f2f;font-weight:900 }
  .gd .compare-wrap { display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:36px 0 }
  .gd .compare-card { text-align:center }
  .gd .compare-card .c-tag { font-size:12px;font-weight:800;color:#888;margin-bottom:12px;letter-spacing:0.05em }
  .gd .compare-card svg { width:100%;max-width:280px;display:block;margin:0 auto;height:auto }
  .gd .compare-card .c-verdict { margin-top:14px;font-size:15px;font-weight:800;line-height:1.5 }
  .gd .compare-card.left .c-verdict { color:#999 }
  .gd .compare-card.right .c-verdict { color:#111 }
  .gd .channel-flow { list-style:none;margin:24px 0;background:#fafafa;border-radius:8px;padding:8px 22px }
  .gd .channel-flow li { padding:14px 0;border-bottom:1px solid #ececec;font-size:15.5px;color:#333;line-height:1.6 }
  .gd .channel-flow li:last-child { border-bottom:none }
  .gd .package-grid { margin:32px 0 }
  .gd .package-card { background:#fafafa;border:1px solid #eee;border-radius:10px;padding:30px 28px;margin-bottom:14px }
  .gd .package-card .pc-num { font-size:11px;font-weight:900;color:#888;letter-spacing:0.2em;margin-bottom:10px }
  .gd .package-card .pc-title { font-size:19px;font-weight:900;letter-spacing:-0.02em;margin-bottom:14px;line-height:1.4 }
  .gd .package-card .pc-items { font-size:14.5px;color:#555;line-height:1.85 }
  .gd .data-table { margin:40px 0 24px;border-top:2px solid #111 }
  .gd .data-row { display:grid;grid-template-columns:140px 1fr;border-bottom:1px solid #ddd;padding:28px 0;align-items:center }
  .gd .data-row .dr-label { font-size:16px;font-weight:800;color:#555;letter-spacing:-0.01em }
  .gd .data-row .dr-value { font-size:38px;font-weight:900;letter-spacing:-0.03em;line-height:1.1 }
  .gd .big-percent { text-align:center;font-size:96px;font-weight:900;letter-spacing:-0.05em;line-height:1;margin:0 0 18px;color:#fff }
  @media (max-width:640px) {
    .gd .compare-wrap { grid-template-columns:1fr;gap:32px }
    .gd .gear-svg-wrap { margin:34px 0 }
    .gd .package-card { padding:24px 22px }
    .gd .package-card .pc-title { font-size:17px }
    .gd .package-card .pc-items { font-size:14px }
    .gd .channel-flow li { font-size:14.5px;padding:12px 0 }
    .gd .gear-caption { font-size:16px }
    .gd .data-row { grid-template-columns:90px 1fr;padding:22px 0 }
    .gd .data-row .dr-label { font-size:14px }
    .gd .data-row .dr-value { font-size:26px }
    .gd .big-percent { font-size:64px;margin-bottom:14px }
  }

  /* 손실 칸은 겁주지 않고 왼쪽 색 띠 하나로만 비어 있음을 담담히 알린다 */
  .ls { display:grid; gap:9px; }
  .ls-i {
    border:1px solid var(--line); border-left:3px solid var(--accent-ln);
    border-radius:var(--r); padding:13px 15px; background:var(--surface);
  }
  /* 못 읽은 자리는 색 띠를 죽인다. 비어 있는 것과 확인 못 한 것은 다른 사실이다 */
  .ls-un { border-left-color:var(--line-3); background:var(--soft); }
  .ls-h { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .ls-t { font-size:14.5px; font-weight:650; letter-spacing:-.018em; }
  .ls-b {
    font-size:11.5px; font-weight:550; color:var(--ink-3);
    background:var(--subtle); border-radius:999px; padding:2px 8px; white-space:nowrap;
  }
  .ls-so { font-size:12.5px; color:var(--ink-4); margin-top:1px; }
  .ls-say { font-size:13.5px; color:var(--ink-2); line-height:1.65; margin-top:7px; }
  .ls-n { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-top:9px; }
  .ls-v {
    font-size:26px; font-weight:750; letter-spacing:-.03em; line-height:1.1;
    font-variant-numeric:tabular-nums; color:var(--ink);
  }
  .ls-v small { font-size:14px; font-weight:600; margin-left:2px; }
  .ls-k { font-size:12.5px; color:var(--ink-3); }
  /* 어떻게 셌는지 한 줄 — 수가 있으면 반드시 이 줄이 함께 선다 */
  .ls-how {
    font-size:11.5px; color:var(--ink-4); line-height:1.6; margin-top:7px;
    padding-top:7px; border-top:1px solid var(--line-2);
  }
  .ls-miss { font-size:11.5px; color:var(--warn); line-height:1.6; margin-top:5px; }

  /* ── 잠금을 여는 열쇠 둘 ── */
  .join-or { font-size:12px; color:var(--ink-3); text-align:center; margin-top:9px; }
  .join-off {
    font-size:12.5px; color:var(--ink-3); background:var(--soft);
    border:1px solid var(--line); border-radius:var(--r-sm); padding:9px 12px;
  }

  /* 소개 랜딩은 오른쪽 사이드 배너(.lpbn)로 여는 패널(.lp)에 담긴다 */
  .lpbn {
    position:fixed; right:0; top:50%; transform:translateY(-50%);
    z-index:40; display:grid; gap:1px; justify-items:center;
    padding:14px 9px; border:1px solid var(--line-3); border-right:0;
    border-radius:var(--r) 0 0 var(--r); background:var(--surface);
    box-shadow:var(--sh-b); cursor:pointer; color:var(--ink);
    font-family:inherit; transition:box-shadow var(--dur), background var(--dur);
  }
  .lpbn:hover { background:var(--hover); box-shadow:var(--sh-bh); }
  .lpbn-t { font-size:13px; font-weight:650; letter-spacing:-.018em; writing-mode:vertical-rl; }
  .lpbn-s { font-size:11px; color:var(--ink-3); writing-mode:vertical-rl; }
  .lp {
    position:fixed; inset:0 0 0 auto; width:min(760px, 100vw);
    z-index:60; overflow-y:auto; overscroll-behavior:contain;
    background:var(--canvas); box-shadow:var(--sh-3);
  }
  /* hidden 을 display 규칙이 덮지 않게 못 박는다. 이 줄이 없으면 패널이 늘 열려 있다 */
  .lp[hidden] { display:none; }
  .lp-x {
    position:sticky; top:0; left:auto; margin-left:auto; display:block; z-index:1;
    border:0; border-bottom:1px solid var(--line); width:100%; text-align:right;
    padding:11px 18px; background:var(--surface); cursor:pointer;
    font-family:inherit; font-size:13px; font-weight:600; color:var(--ink-2);
  }
  .lp-x:hover { color:var(--ink); }
  /* 패널이 열린 동안 뒤 화면이 따라 구르지 않게 한다 */
  body.lp-on { overflow:hidden; }
  @media (max-width:820px) {
    .lp { width:100vw; }
    /* 폰에서는 하단 막대(.stick)와 겹치지 않게 위로 올린다 */
    .lpbn { top:auto; bottom:calc(84px + env(safe-area-inset-bottom)); transform:none; }
  }

  /* 인쇄에서는 조작 장치와 폰 목업을 빼고 소개 내용만 남긴다 */
  @media print {
    @page { margin:12mm; }
    body { background:#fff !important; padding-bottom:0 !important; }
    .nav, .stick, .form, .btn, .gd-btn, .phone-wrap, .nav-cta, .nav-links { display:none !important; }
    /* 사이드 배너와 패널 닫기 단추는 조작 장치다 */
    .lpbn, .lp-x { display:none !important; }
    /* 소개 랜딩을 종이로 돌릴 때는 패널을 흐름 안에 펴 놓는다 — 고정 자리에 두면 한 쪽만 찍힌다 */
    .lp { position:static !important; width:auto !important; overflow:visible !important; box-shadow:none !important; }
    body.lp-on { overflow:visible !important; }
    .hero, .gd section, .gd .cta-section { padding:20px 0 !important; background:#fff !important; }
    .wrap { max-width:none !important; padding:0 !important; }
    .hero-grid, .foot-g, .gd .stat-row, .gd .compare-wrap { display:block !important; }
    .hero-grid > *, .gd .stat-row > *, .gd .compare-wrap > * { margin-bottom:10px !important; }
    .rep, .gd .case-card, .gd .package-card, .gd .faq-item { break-inside:avoid; page-break-inside:avoid; border:1px solid #C9CDD6; }
    .st { opacity:1 !important; transform:none !important; }
    * { box-shadow:none !important; text-shadow:none !important; }
  }