/* ============================================================
   시안에서 가져온 디자인 — FAQ · 로그인 · 어드바이저 인트로
   ------------------------------------------------------------
   출처: 02. 서비스 화면 제작 / 화면 시안 / changupAI-20260825.html
         (changup.ai — 서비스 통합 시안 v1.0)

   토큰은 tokens.css 와 같은 디자인 시스템이라 색은 그대로 맞는다.
   반경·그림자만 값이 조금 달라(r-md 11 vs 12 등) tokens.css 쪽을
   쓰게 두었다 — 페이지 안에서 반경이 섞이는 것이 더 나쁘다.

   ⚠ 시안 원본의 :root 에 순환 참조가 있었다.
       --tint:var(--tint)  --tint3:var(--tint3)  --paper:var(--paper)
       --ing:var(--ing)    --ing-ln:var(--ing-ln)
     자기 자신을 가리켜 무효가 되는데 아래 규칙에서 11번 쓰인다.
     같은 시스템의 이웃 값(--tint2 / --line-btn / --wait 계열의 패턴)에
     맞춰 채웠다. 디자이너 확인이 필요하다.
   ============================================================ */
:root{
  --tint:#eef3fe;          /* --tint2:#f4f8ff 보다 한 단 진한 파랑 틴트 */
  --tint3:#e6eefd;
  --paper:#fff;
  --ing:#3358b8;           /* 진행 상태 글자 — 파랑 틴트 위에서 읽히는 값 */
  --ing-ln:#cddcfb;        /* --line-btn:#d3defa 와 같은 계열 */
}

/* ── common ── */
.btn:hover{transform:translateY(-1px);box-shadow:var(--e-btn-h)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font:var(--f-label-m);letter-spacing:var(--ls-label-m);
  color:#fff;background:linear-gradient(120deg,var(--blue),var(--indigo));border-radius:var(--r-md);padding:10px 18px;
  box-shadow:var(--e-btn);text-decoration:none}
.btn.gh{color:var(--tx);background:#fff;border:1px solid var(--line);box-shadow:none}
.btn.gh:hover{border-color:var(--line-hover);color:var(--ink);transform:none;box-shadow:none}
.btn.sm{font:var(--f-label-s);letter-spacing:var(--ls-label-s);padding:8px 13px;border-radius:var(--r-sm)}
.btn.warn{color:var(--rose);background:#fff;border:1px solid var(--no-ln);box-shadow:none}
.plan .btn{width:100%;margin-top:18px}
.bp-dl .btn{flex:1}
.bp-appr .btn{margin-left:auto}
.ai-cta .btn{height:auto;min-width:220px;padding:17px 30px;border-radius:var(--r-lg);
  font:var(--f-label-l);letter-spacing:var(--ls-label-l);font-weight:800}
@media(max-width:600px){
  .ai-cta .btn{width:100%;min-width:0}
}
.pr-ban .btn{position:relative;z-index:2;flex:none;height:auto;padding:16px 30px;border-radius:var(--r-lg);
  font:var(--f-label-l);letter-spacing:var(--ls-label-l);font-weight:800;color:var(--ink);
  background:#fff;box-shadow:0 12px 30px -14px rgba(0,0,0,.6)}
.pr-ban .btn:hover{transform:translateY(-1px);box-shadow:0 16px 34px -14px rgba(0,0,0,.7)}
@media(max-width:680px){
  .pr-ban .btn{width:100%}
}
.ar-cta .btn{margin-top:24px;height:auto;padding:15px 26px;border-radius:var(--r-lg);
  font:var(--f-label-l);letter-spacing:var(--ls-label-l);font-weight:800}

/* ── advintro ── */
/* 타이포는 위 토큰(--f-* / --ls-*)을 씁니다.
   미세 UI(배지·메타·칩)는 토큰 눈금(11 / 12 / 13 / 15px)으로 스냅했습니다.
   ⚠ 토큰에 「굵은 11~12px 배지」가 없습니다 — caption 은 500 이라 배지 강조가 약합니다.
      label-xs (11px / 700) 를 토큰에 추가하는 것을 권합니다. 지금은 굵기만 따로 지정해 두었습니다. */
/* 큰 글자는 Pretendard Variable 의 굵기 축(45~920)을 직접 씁니다.
   ⚠ font-weight:45 920 은 @font-face 전용 문법이라 요소에 쓰면 무시됩니다.
      요소에서는 font-variation-settings 로 축 값을 지정합니다. */
.bl-hero h1,.fq-hero h1,.ss h1,.ai-hero h1,.ai-sec h2,.ai-end h2,.dh h1{
  font-variation-settings:"wght" 900;font-weight:900}
.met .mk{font-size:11px;font-weight:700;color:var(--mut)}
@media(max-width:720px){
  .bl-hero h1,.fq-hero h1,.ss h1,.ai-hero h1{font:var(--f-display-1);letter-spacing:var(--ls-display-1)}
  .ai-sec h2,.ai-end h2{font:var(--f-h3);letter-spacing:var(--ls-h3)}
}
/* ══════════ 사업 어드바이저 소개 (로그아웃) ══════════ */
.ai-hero{background:radial-gradient(1100px 460px at 50% -8%,var(--tint) 0,rgba(238,243,255,0) 60%),#fff;
  border-bottom:1px solid var(--line)}
.ai-in{max-width:1100px;margin:0 auto;padding:0 var(--gutter)}
.ai-hero .ai-in{padding-top:80px;padding-bottom:64px;text-align:center}
.ai-tag{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700;color:var(--indigo);
  background:#eef3fe;border:1px solid #d5e2fb;border-radius:var(--r-pill);padding:5px 13px}
.ai-hero h1{font:var(--f-display-2);letter-spacing:var(--ls-display-2);color:var(--ink);margin-top:22px}
.ai-hero h1 em{font-style:normal;background:linear-gradient(100deg,var(--blue),var(--cyan));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.ai-hero p{font:var(--f-body-1);letter-spacing:var(--ls-body-1);color:var(--mut);margin:20px auto 0;max-width:560px}
/* 확정본 랜딩 히어로 CTA(.hbtn) 와 같은 크기 : min-width 220 · padding 17/30 · r12 */
.ai-cta{margin-top:38px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.ai-cta .btn{height:auto;min-width:220px;padding:17px 30px;border-radius:var(--r-lg);
  font:var(--f-label-l);letter-spacing:var(--ls-label-l);font-weight:800}
@media(max-width:600px){
  .ai-cta{flex-direction:column;align-items:stretch}
  .ai-cta .btn{width:100%;min-width:0}
}
.ai-sec{padding:72px var(--gutter);border-bottom:1px solid var(--line)}
.ai-sec.alt{background:#f9fafc}
.ai-sec h2{font:var(--f-h2);letter-spacing:var(--ls-h2);color:var(--ink);text-align:center}
.ai-sec .sub{font:var(--f-body-1);letter-spacing:var(--ls-body-1);color:var(--mut);text-align:center;margin-top:16px}
.ai-cmp{max-width:900px;margin:44px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:18px}
.ai-c{background:#fff;border:1px solid var(--line);border-radius:var(--r-2xl);padding:26px 28px}
.ai-c.good{border-color:var(--indigo);box-shadow:0 26px 56px -40px rgba(67,99,202,.75)}
.ai-c .h{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:800;color:var(--fnt);letter-spacing:.04em}
.ai-c.good .h{color:var(--indigo)}
.ai-chips{margin-top:16px;display:flex;flex-wrap:wrap;gap:6px;min-height:26px}
.ai-chips span{font-size:11px;font-weight:700;color:var(--tx);background:var(--soft);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:3px 10px}
.ai-c .q{margin-top:16px;font-size:13px;color:var(--fnt);font-weight:700}
.ai-c .a{margin-top:8px;font:var(--f-body-2);letter-spacing:var(--ls-body-2);color:var(--tx);
  background:var(--soft);border-radius:var(--r-lg);padding:15px 16px}
.ai-c.good .a{background:var(--tint);color:var(--ink)}
.ai-c .a b{color:var(--ink);font-weight:700}
.ai-c .v{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:12px;font-weight:700;
  line-height:1.6;display:flex;gap:8px}
.ai-c.bad .v{color:var(--no)}
.ai-c.good .v{color:var(--done)}
.ai-dom{max-width:900px;margin:40px auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.ai-d{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);padding:20px 22px}
.ai-d .i{width:34px;height:34px;border-radius:var(--r-md);background:var(--tint);color:var(--indigo);
  display:flex;align-items:center;justify-content:center}
.ai-d b{display:block;font-size:15px;font-weight:700;color:var(--ink);letter-spacing:-.4px;margin-top:13px}
.ai-d p{font-size:13px;color:var(--mut);margin-top:6px;line-height:1.6;font-weight:400}
.ai-step{max-width:820px;margin:40px auto 0;display:grid;gap:12px}
.ai-s{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-xl);padding:20px 22px}
.ai-s .n{width:30px;height:30px;border-radius:var(--r-md);background:var(--ink);color:#fff;flex:none;
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}
.ai-s b{font-size:15px;font-weight:700;color:var(--ink);letter-spacing:-.4px}
.ai-s p{font-size:13px;color:var(--mut);margin-top:5px;line-height:1.7;font-weight:400}
.ai-end{padding:80px var(--gutter);text-align:center;background:#fff}
.ai-end h2{font:var(--f-h2);letter-spacing:var(--ls-h2);color:var(--ink)}
.ai-end p{font:var(--f-body-1);letter-spacing:var(--ls-body-1);color:var(--mut);margin-top:16px}
@media(max-width:860px){
  .ai-cmp,.ai-dom{grid-template-columns:1fr}
  .ai-hero .ai-in{padding-top:52px;padding-bottom:44px}
  .ai-sec,.ai-end{padding-top:52px;padding-bottom:52px}
}
/* ══════════ 소개 페이지 목업 ══════════ */
.mk{max-width:900px;margin:44px auto 0;border-radius:var(--r-2xl);overflow:hidden;background:#fff;
  border:1px solid var(--line);box-shadow:0 40px 80px -50px rgba(13,17,32,.6)}
.mk-bar{height:34px;background:#eef1f7;display:flex;align-items:center;gap:6px;padding:0 13px;
  border-bottom:1px solid var(--line)}
.mk-bar i{width:8px;height:8px;border-radius:50%;display:block}
.mk-url{margin-left:10px;background:#fff;border:1px solid var(--line);border-radius:var(--r-xs);
  font:var(--f-caption-2);color:var(--fnt);padding:2px 10px}
.mk-body{display:grid;grid-template-columns:172px minmax(0,1fr);min-height:330px}
.mk-side{border-right:1px solid var(--line);padding:14px 12px}
.mk-new{display:flex;align-items:center;justify-content:center;gap:6px;border-radius:var(--r-md);padding:9px;
  font:var(--f-label-s);color:#fff;background:linear-gradient(120deg,var(--blue),var(--indigo));box-shadow:var(--e-btn)}
.mk-k{font:var(--f-caption-2);font-weight:700;color:var(--fnt);padding:12px 8px 6px}
.mk-c{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:var(--r-sm);
  font:var(--f-label-s);color:var(--tx)}
.mk-c .lu{color:var(--fnt)}
.mk-c.on{background:var(--tint);color:var(--indigo)}
.mk-c.on .lu{color:var(--indigo)}
.mk-e{font:var(--f-caption-1);color:var(--fnt);padding:4px 8px;line-height:1.6}
.mk-main{padding:18px 20px;display:flex;flex-direction:column;gap:10px;background:var(--bg)}
.mk-row{display:flex;gap:8px;align-items:flex-start}
.mk-av{width:20px;height:20px;border-radius:7px;background:linear-gradient(120deg,var(--blue),var(--indigo));
  color:#fff;display:flex;align-items:center;justify-content:center;flex:none;margin-top:2px}
.mk-bub{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg) var(--r-lg) var(--r-lg) 4px;
  padding:11px 14px;font:var(--f-body-3);color:var(--tx);flex:1}
.mk-bub b{color:var(--ink);font-weight:700}
.mk-bub p+p{margin-top:5px}
.mk-me{align-self:flex-end;max-width:70%;background:linear-gradient(120deg,var(--blue),var(--indigo));color:#fff;
  border-radius:var(--r-lg) var(--r-lg) 4px var(--r-lg);padding:9px 13px;font:var(--f-body-3);font-weight:600}
.mk-chips{display:flex;flex-wrap:wrap;gap:5px;margin-left:28px}
.mk-chips span{font:var(--f-label-s);color:var(--indigo);background:#fff;border:1px solid var(--line-hover);
  border-radius:var(--r-pill);padding:5px 11px}
.mk-chips span.gh{color:var(--mut);border-color:var(--line);border-style:dashed}
.mk-doc{margin-top:8px;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:#fff}
.mk-doc .h{background:var(--paper);padding:6px 11px;font:var(--f-caption-2);font-weight:700;color:var(--mut);
  display:flex;align-items:center;gap:7px;border-bottom:1px solid var(--line)}
.mk-doc .b{padding:10px 12px;font-family:var(--serif);font-size:11px;line-height:1.85;color:#3b4257}
.mk-doc u{text-decoration-color:var(--line-hover);text-underline-offset:3px;font-weight:700}
.mk-refl{margin-left:28px;background:linear-gradient(180deg,#f6f8ff,#fff);border:1px solid var(--ing-ln);
  border-radius:var(--r-lg);padding:13px 15px}
.mk-refl b{font:var(--f-label-m);color:var(--ink);display:flex;align-items:center;gap:7px}
.mk-refl b .lu{color:var(--indigo)}
.mk-refl p{font:var(--f-body-3);color:var(--mut);margin-top:6px}
.mk-refl .f{margin-top:11px;display:flex;gap:6px;align-items:center}
.mk-refl .f span{font:var(--f-label-s);border-radius:var(--r-sm);padding:6px 12px}
.mk-refl .f .p{color:#fff;background:linear-gradient(120deg,var(--blue),var(--indigo));box-shadow:var(--e-btn)}
.mk-refl .f .g{color:var(--tx);background:#fff;border:1px solid var(--line)}
.mk-refl .f em{font-style:normal;margin-left:auto;font:var(--f-caption-2);color:var(--fnt)}
.mk-comp{margin-top:auto;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-pill);padding:8px 8px 8px 15px}
.mk-comp span{flex:1;font:var(--f-body-3);color:var(--fnt)}
.mk-comp i{width:26px;height:26px;border-radius:50%;background:linear-gradient(120deg,var(--blue),var(--indigo));
  color:#fff;display:flex;align-items:center;justify-content:center;flex:none;font-style:normal}
@media(max-width:760px){
  .mk-body{grid-template-columns:1fr}
  .mk-side{display:none}
  .mk{margin-top:32px}
}

/* ── faq ── */
/* 타이포는 위 토큰(--f-* / --ls-*)을 씁니다.
   미세 UI(배지·메타·칩)는 토큰 눈금(11 / 12 / 13 / 15px)으로 스냅했습니다.
   ⚠ 토큰에 「굵은 11~12px 배지」가 없습니다 — caption 은 500 이라 배지 강조가 약합니다.
      label-xs (11px / 700) 를 토큰에 추가하는 것을 권합니다. 지금은 굵기만 따로 지정해 두었습니다. */
/* 큰 글자는 Pretendard Variable 의 굵기 축(45~920)을 직접 씁니다.
   ⚠ font-weight:45 920 은 @font-face 전용 문법이라 요소에 쓰면 무시됩니다.
      요소에서는 font-variation-settings 로 축 값을 지정합니다. */
.bl-hero h1,.fq-hero h1,.ss h1,.ai-hero h1,.ai-sec h2,.ai-end h2,.dh h1{
  font-variation-settings:"wght" 900;font-weight:900}
@media(max-width:720px){
  .bl-hero h1,.fq-hero h1,.ss h1,.ai-hero h1{font:var(--f-display-1);letter-spacing:var(--ls-display-1)}
}
.bl-f{margin-top:24px;display:flex;gap:8px;flex-wrap:wrap}
.bl-fc{display:inline-flex;align-items:center;gap:7px;font:var(--f-label-s);color:var(--mut);
  background:#fff;border:1px solid #e2e8f6;border-radius:var(--r-pill);padding:8px 16px;box-shadow:var(--e1)}
.bl-fc i{font-style:normal;font-size:11px;font-weight:800;color:var(--fnt)}
.bl-fc:hover{border-color:var(--line-hover);color:var(--tx)}
.bl-fc.on{color:#fff;background:linear-gradient(120deg,var(--blue),var(--indigo));border-color:transparent;
  box-shadow:var(--e-btn)}
.bl-fc.on i{color:rgba(255,255,255,.75)}
.bl-list .bl-f{margin:0 0 20px;padding-bottom:2px}
/* ══════════ FAQ ══════════ */
.fq-hero{background:#fff;border-bottom:1px solid var(--line)}
.fq-in{max-width:1080px;margin:0 auto;padding:0 var(--gutter)}
.fq-hero .fq-in{padding-top:72px;padding-bottom:40px}
.fq-hero h1{font:var(--f-display-2);letter-spacing:var(--ls-display-2);color:var(--ink)}
.fq-hero p{font:var(--f-body-1);letter-spacing:var(--ls-body-1);color:var(--mut);margin-top:18px;max-width:600px}
.fq-search{display:flex;align-items:center;gap:14px;border:1px solid #dce4f5;
  border-radius:var(--r-2xl);background:#fff;padding:22px 24px;margin-bottom:24px;cursor:text;
  box-shadow:0 18px 44px -26px rgba(30,45,90,.34),0 2px 6px rgba(20,30,60,.05);
  transition:border-color .16s,box-shadow .16s}
.fq-search:hover{border-color:var(--line-hover)}
.fq-search:focus-within{border-color:var(--blue);box-shadow:var(--focus),0 18px 44px -26px rgba(30,45,90,.34)}
.fq-search .lu{color:var(--indigo)}
.fq-search input{flex:1;min-width:0;border:0;outline:none;background:none;font-family:inherit;
  font-size:17px;font-weight:500;color:var(--ink)}
.fq-search input::placeholder{font-weight:400}
.fq-x{width:28px;height:28px;border-radius:50%;background:var(--soft);color:var(--mut);flex:none;
  display:flex;align-items:center;justify-content:center}
.fq-x:hover{background:#e6eaf3;color:var(--ink)}
/* 검색 모달 */
.fqm{position:fixed;inset:0;z-index:170;background:rgba(13,17,32,.45);-webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px);display:none;align-items:flex-start;justify-content:center;padding:12vh 20px 20px}
.fqm.open{display:flex}
.fqm-card{width:100%;max-width:640px;background:#fff;border-radius:var(--r-2xl);overflow:hidden;
  box-shadow:0 44px 100px -44px rgba(13,17,32,.75)}
.fqm-top{display:flex;align-items:center;gap:14px;padding:20px 22px;border-bottom:1px solid var(--line)}
.fqm-top .lu{color:var(--indigo)}
.fqm-top input{flex:1;border:0;outline:none;font-size:17px;font-weight:500;color:var(--ink);background:none;min-width:0;font-family:inherit}
.fqm-body{max-height:52vh;overflow:auto;padding:18px 22px 22px}
.fqm-k{font-size:11px;font-weight:800;letter-spacing:.14em;color:var(--fnt)}
.fqm-chips{margin-top:12px;display:flex;flex-wrap:wrap;gap:7px}
.fqm-chips button{font-size:13px;font-weight:700;color:var(--indigo);background:var(--tint);
  border:1px solid var(--ing-ln);border-radius:var(--r-pill);padding:7px 14px}
.fqm-chips button:hover{background:#e3ebff}
.fqm-list{margin-top:8px}
.fqm-i{display:flex;align-items:flex-start;gap:12px;width:100%;text-align:left;padding:13px 12px;
  border-radius:var(--r-md);line-height:1.5}
.fqm-i:hover{background:var(--tint2)}
.fqm-i .n{width:22px;height:22px;border-radius:var(--r-xs);background:var(--soft);color:var(--mut);flex:none;
  font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;margin-top:1px}
.fqm-i b{font-size:13px;font-weight:700;color:var(--ink);letter-spacing:-.3px;display:block}
.fqm-i em{font-style:normal;font-size:12px;color:var(--fnt);display:block;margin-top:3px}
.fqm-i mark{background:#fff2b8;color:inherit;border-radius:3px;padding:0 2px}
.fqm-none{padding:26px 12px;text-align:center;font-size:13px;color:var(--fnt)}
.fqm-foot{padding:12px 22px;background:var(--paper);border-top:1px solid var(--line);
  font-size:12px;color:var(--fnt);display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.fqm-foot kbd{font-family:inherit;font-size:11px;font-weight:700;color:var(--mut);background:#fff;
  border:1px solid var(--line);border-radius:var(--r-xs);padding:2px 6px}
.fq-body{background:linear-gradient(180deg,#eef2fb 0,#f6f8fd 240px,#fafbfd 100%)}
.fq-body .fq-in{padding-top:34px;padding-bottom:60px}
.fq-body .bl-f{margin-bottom:22px}
.fq-sec{scroll-margin-top:calc(var(--header-h) + 16px)}
.fq-sec+.fq-sec{margin-top:32px}
.fq-sh{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:0 2px 12px}
.fq-sh h2{font:var(--f-h4);letter-spacing:var(--ls-h4);color:var(--ink)}
.fq-sh span{font:var(--f-caption-1);color:var(--fnt)}
.fq-acc{background:#fff;border:1px solid #e9edf7;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--e2)}
.fq-i{border-top:1px solid var(--line)}
.fq-i:first-child{border-top:0}
.fq-q{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:16px 18px;
  font:var(--f-title-2);letter-spacing:var(--ls-title-2);color:var(--ink)}
.fq-q:hover{background:var(--paper)}
.fq-q .ic{margin-left:auto;color:var(--fnt);display:flex;transition:transform .18s}
.fq-i.on .fq-q{color:var(--indigo);background:#f7f9ff}
.fq-i.on .fq-q .ic{transform:rotate(180deg);color:var(--indigo)}
.fq-a{display:none;padding:0 18px 18px;font:var(--f-body-2);letter-spacing:var(--ls-body-2);color:var(--tx)}
.fq-i.on .fq-a{display:block}
.fq-a b{color:var(--ink);font-weight:700}
.fq-a p+p{margin-top:9px}
.fq-a .tip{margin-top:11px;background:var(--soft);border-radius:var(--r-sm);padding:10px 13px;font-size:12px;
  color:var(--mut);line-height:1.65}
.fq-a .tip b{color:var(--tx)}
.fq-none{padding:44px 0;text-align:center;color:var(--fnt);font-size:13px}
.fq-ask{margin-top:30px;background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);padding:22px 24px;
  display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.fq-ask b{font-size:15px;font-weight:800;color:var(--ink);letter-spacing:-.5px;display:block}
.fq-ask p{font-size:13px;color:var(--mut);margin-top:5px;line-height:1.6}
@media(max-width:900px){
  .fq-search{padding:14px 16px;border-radius:var(--r-lg)}
}

/* ── login ── */
.lg-err{margin-top:10px;font-size:12px;color:var(--rose);font-weight:600;display:none}
.lg-err.on{display:block}
.lgpage{min-height:100vh;background:#f6f8fc;display:flex;align-items:center;justify-content:center;padding:40px 20px;
  position:relative}
.lg-top{position:absolute;top:22px;right:26px;display:flex;align-items:center;gap:10px}
.lg-ic{width:34px;height:34px;border-radius:var(--r-sm);background:#fff;border:1px solid var(--line);color:var(--mut);
  display:flex;align-items:center;justify-content:center}
.lg-ic:hover{color:var(--ink);border-color:var(--line-hover)}
.lg-lang{display:flex;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.lg-lang button{font-size:12px;font-weight:800;color:var(--mut);padding:8px 16px}
.lg-lang button.on{color:#fff;background:var(--ing)}
.lg-card{width:100%;max-width:520px;background:#fff;border-radius:var(--r-2xl);padding:44px 52px 42px;
  box-shadow:var(--e2)}
.lg-brand{text-align:center;font-size:28px;font-weight:800;color:var(--ing);letter-spacing:-1px}
.lg-sub{text-align:center;font-size:15px;color:var(--mut);margin-top:10px}
.lg-f{margin-top:26px}
.lg-f+.lg-f{margin-top:18px}
.lg-f label{display:block;font-size:13px;font-weight:700;color:var(--ink);margin-bottom:9px}
.lg-f input{width:100%;border:1px solid transparent;background:#eef1f8;border-radius:var(--r-md);padding:15px 16px;
  font-size:15px;color:var(--ink);outline:none}
.lg-f input::placeholder{color:#a9b2c6}
.lg-f input:focus{border-color:var(--ing);background:#fff;box-shadow:var(--focus)}
.lg-save{margin-top:18px;display:flex;align-items:center;gap:9px;font-size:13px;color:var(--tx)}
.lg-save .box{width:19px;height:19px;border-radius:var(--r-xs);border:1.6px solid #c6ccdb;background:#fff;flex:none;
  display:flex;align-items:center;justify-content:center;color:transparent}
.lg-save .box.on{background:var(--ing);border-color:var(--ing);color:#fff}
.lg-go{width:100%;height:54px;border-radius:var(--r-md);font-size:15px;font-weight:700;color:#fff;margin-top:20px;
  background:linear-gradient(120deg,#3f7fe0,#2352c9);box-shadow:var(--e-btn)}
.lg-join{width:100%;height:54px;border-radius:var(--r-md);font-size:15px;font-weight:700;color:var(--ing);margin-top:12px;
  background:#f2f6fd;border:1px solid #e2eaf9}
.lg-join:hover{background:#eaf1fc}
.lg-sns{margin-top:26px;display:flex;align-items:center;justify-content:center;gap:16px}
.lg-sns button{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  transition:transform .12s}
.lg-sns button:hover{transform:translateY(-2px)}
.sns-n{background:#03c75a;color:#fff;font-size:18px;font-weight:800;font-family:Arial,sans-serif}
.sns-k{background:#fee500;color:#3c1e1e;font-size:11px;font-weight:800}
.sns-g{background:#fff;border:1px solid var(--line);font-size:20px;font-weight:800;
  background-image:linear-gradient(90deg,#4285f4,#ea4335 33%,#fbbc05 66%,#34a853);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.sns-a{background:#111;color:#fff}
.lg-note{margin-top:26px;font-size:12px;color:var(--fnt);text-align:center;line-height:1.7}
@media(max-width:560px){
  .lg-card{padding:34px 24px 32px}
  .lg-brand{font-size:24px}
}


/* ══════════════════════════════════════════════════════════
   로그인 — 카카오 우선 2단계 (2026-08-29)
   ----------------------------------------------------------
   수단을 한 번에 다 보여주면 「무엇으로 가입했더라」를 떠올려야 한다.
   대부분이 카카오를 쓰므로 그것만 먼저 보여주고, 나머지는
   「다른 방법으로 로그인」 뒤로 미룬다. 없애는 게 아니라 미루는 것이다.
   ══════════════════════════════════════════════════════════ */
.lg-title{
  text-align:center;font-size:22px;font-weight:800;color:var(--ink);
  letter-spacing:-.5px;margin-top:14px;
}
.lg-step{margin-top:28px}
.lg-step[hidden]{display:none}   /* flex 를 쓰는 자식이 있어 명시한다 */

/* 제공자 버튼 — 아이콘은 왼쪽에 고정, 글자는 가운데.
   아이콘을 글자에 붙이면 버튼마다 글자 위치가 달라져 줄이 흔들린다. */
.prov{
  position:relative;width:100%;height:54px;border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:700;letter-spacing:-.2px;
  border:1px solid var(--line);background:#fff;color:var(--ink);
  transition:background .13s,border-color .13s;
}
.prov:hover{background:var(--soft);border-color:var(--line-hover)}
.prov-i{position:absolute;left:18px;display:flex;align-items:center;justify-content:center;width:20px}

.prov.kakao{background:#FEE500;border-color:#FEE500;color:#191600}
.prov.kakao:hover{background:#F5DC00;border-color:#F5DC00}
.prov.naver .prov-i{background:#03C75A;border-radius:4px;width:22px;height:22px}
.prov.apple .prov-i{background:#000;border-radius:5px;width:22px;height:22px}

/* 1단계의 카카오는 더 크게 — 이 화면에서 유일하게 눈에 띄어야 한다 */
.lg-primary{height:58px;font-size:16px;box-shadow:0 3px 10px rgba(254,229,0,.35)}

.lg-more{
  width:100%;height:52px;margin-top:12px;border-radius:var(--r-md);
  background:var(--soft);border:1px solid transparent;
  font-size:14.5px;font-weight:700;color:var(--tx);
}
.lg-more:hover{background:#e9edf6}

.lg-or{
  position:relative;margin:24px 0 18px;text-align:center;
}
.lg-or::before{
  content:'';position:absolute;left:0;right:0;top:50%;height:1px;background:var(--line);
}
.lg-or span{
  position:relative;background:#fff;padding:0 12px;
  font-size:12.5px;color:var(--fnt);
}
.lg-provs{display:flex;flex-direction:column;gap:10px}

.lg-back{
  width:100%;margin-top:20px;display:flex;align-items:center;justify-content:center;gap:5px;
  font-size:13px;font-weight:600;color:var(--mut);padding:8px;
}
.lg-back:hover{color:var(--ink)}

.lg-links{margin-top:26px;text-align:center;display:flex;flex-direction:column;gap:8px}
.lg-links p{font-size:13px;color:var(--mut)}
.lg-links a{font-weight:700;color:var(--ink);margin-left:4px}
.lg-links a:hover{text-decoration:underline}

.lg-note{
  margin-top:24px;padding-top:18px;border-top:1px dashed var(--line);
  font-size:11.5px;line-height:1.7;color:var(--fnt);text-align:center;
}
.lg-note b{color:var(--tx)}

@media (max-width:520px){
  .lg-card{padding:34px 24px 30px;border-radius:var(--r-xl)}
  .prov,.lg-more{height:50px;font-size:14.5px}
  .lg-primary{height:54px;font-size:15px}
}

/* ▼ 우리 추가 */

/* 인계본 누락 보완 — 검색 지우기 버튼.
   faq.js 가 검색어 유무에 따라 `.hide` 를 토글하는데, 인계본 CSS 어디에도 그 규칙이 없어
   버튼이 늘 보였다(빈 검색창 옆에 X 가 떠 있었다). 인계본 폴더에서도 같다. */
.fq-x.hide { display: none; }