/* 자동 생성 파일 — 원본 redesign/signup/signup.css · 반영 redesign/_tools/release.js. 여기서 직접 고치지 말 것 */
/* signup/signup.css — 회원가입 C안(결정 81). 토큰·헤더 구조·푸터는 ../d3/d.css
   잉크 무대 한 화면: 1192 안 왼쪽 1fr(이름표 · 제목 · 상담창 미리보기 · 관리자 로그인 주소 · 칩) / 오른쪽 흰 폼 카드 560 · 간격 64 · 위 기준 정렬
   폼 카드 = 가입 전 · 가입 완료 두 화면을 같은 칸에 겹쳐 높이 = 큰 쪽(바뀌어도 카드 · 왼쪽 제목이 움직이지 않음). 900 이하: 카드 먼저, 높이는 내용대로 */
.su { --nav-h: 76px; --err: #b3243f; }

/* ── 헤더 — 도입 상담과 같은 검정 유리, 이 페이지만 회원가입 버튼 숨김 ── */
.su .d-nav { background: rgba(22, 24, 29, .6); -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px); box-shadow: 0 1px 0 rgba(255, 255, 255, .08); color: #e3e5ea; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .su .d-nav { background: #16181d; } }
@media (prefers-reduced-transparency: reduce) { .su .d-nav { background: #16181d; -webkit-backdrop-filter: none; backdrop-filter: none; } }
.su .d-logo img { content: url("../../images/logo-white.png"); }
.su .d-nav-links a, .su .d-nav-login { color: #e3e5ea; }
.su .d-nav-links a:hover, .su .d-nav-login:hover { color: #fff; }
.su .d-nav-sep { background: rgba(255, 255, 255, .2); }
.su .d-nav-links a[aria-current="page"], .su .d-nav-login[aria-current="page"], .su .d-nav-dlinks a[aria-current="page"] { color: #fff; }   /* 검정 유리: 현재 위치 글자 = 흰색 + 밑줄 */
.su .d-nav-pill--ink { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24); color: #fff; }   /* 회원가입 — 숨기지 않고 현재 위치(옅게, 결정 86) */
.su .d-nav-burger { color: #fff; }
.su .d-nav-drawer { background: #16181d; }
.su .d-nav-dlinks a { color: #e3e5ea; }
.su .d-nav-pill--line { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .3); color: #fff; }

/* ── 잉크 무대 ── */
.su .su-stage { min-height: max(880px, 100vh); margin-top: calc(var(--nav-h) * -1); padding: calc(var(--nav-h) + 64px) 0 72px;   /* 첫 이름표 = 헤더 아래 64(결정 78 규칙) — 폼 카드 위끝도 같은 선 */ background: radial-gradient(800px 800px at 100% 0%, rgba(200, 17, 90, .22), transparent 62%), radial-gradient(760px 760px at 0% 100%, rgba(59, 74, 107, .55), transparent 62%), var(--ink); color: #fff; }
.su .su-grid { display: grid; grid-template-columns: minmax(0, 1fr) 560px; gap: 64px; align-items: start; }   /* 페이지 폭(d-wrap) 그대로 — 왼쪽 시작 = 로고 선 = 도입 상담 왼쪽 시작(사용자 요청, 이전 1192 가운데) */
.su .su-l { min-width: 0; }
.su .su-ey { font-size: var(--t-ey); font-weight: 600; color: var(--on-ink-brand); line-height: 1.4; }
.su .su-h1 { margin-top: 14px; font-size: 40px; font-weight: 700; line-height: 1.18; letter-spacing: -0.025em; }   /* 폼 페이지 제목(결정 87 예외) — 도입 상담과 같은 단계: 40 · 1100 이하 36 · 900 이하 32 · 760 이하 30 */
@media (max-width: 1100px) { .su .su-h1 { font-size: 36px; } }
@media (max-width: 900px) { .su .su-h1 { font-size: 32px; } }
.su .su-h1 .ln, .su .su-lead .ln { display: block; }
.su .su-g { background: linear-gradient(100deg, #fff 10%, #ffc2da 95%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #fff; }
.su .su-h1 .su-g { display: inline-block; }
.su .su-h1 .su-nw { white-space: nowrap; }   /* 좁은 화면(360)에서 세 줄이 되면 "이어링을 직접 / 운영해 보세요"로 — 한 단어 끝줄 없음, 글자는 다른 폼 페이지와 같은 30 */
.su .su-lead { margin-top: 14px; font-size: var(--t-lead); line-height: 1.6; color: var(--t-lead-c-ink); }

/* 상담창 미리보기 */
.su .su-prev { width: 420px; max-width: 100%; margin-top: 34px; border-radius: 20px; background: #fff; color: var(--ink); box-shadow: 0 30px 70px rgba(0, 0, 0, .45); overflow: hidden; }
.su .su-prev-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: #f7f8fa; box-shadow: inset 0 -1px 0 #e3e5ea; font-size: 12.5px; color: var(--ink-3); }
.su .su-prev-bar i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--face); }
.su .su-prev-bar span { flex: 1; min-width: 0; margin-left: 6px; padding: 4px 10px; border-radius: 6px; background: #fff; overflow-wrap: anywhere; }
.su .su-prev-bar b { font-weight: 700; color: var(--ink); }
.su .su-prev-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: #3b4a6b; color: #fff; }
.su .su-prev-av { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: rgba(255, 255, 255, .18); font-size: 12px; font-weight: 800; }
.su .su-prev-head p { min-width: 0; }
.su .su-prev-head b { display: block; font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; }
.su .su-prev-head small { display: block; font-size: 12px; opacity: .82; }
.su .su-prev-body { display: flex; flex-direction: column; gap: 8px; padding: 16px; }
.su .su-prev-bub { align-self: flex-start; max-width: 100%; min-height: calc(1.55em * 3 + 20px); padding: 10px 13px; border-radius: 4px 14px 14px 14px; background: var(--face); font-size: 14.5px; line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; }
.su .su-prev-bub mark { background: none; color: var(--brand-deep); font-weight: 700; }
.su .su-prev-bub mark.is-fade { animation: su-mark .9s ease-out forwards; }
.su .su-prev-bub mark.is-old { color: inherit; font-weight: inherit; animation: none; }
@keyframes su-mark { from { color: var(--brand-deep); } to { color: var(--ink); } }
.su .su-cur { display: inline-block; width: 2px; height: 1.1em; margin-left: 1px; vertical-align: -3px; background: var(--ink); animation: su-blink 1s steps(1) infinite; }
@keyframes su-blink { 50% { opacity: 0; } }
.su .su-prev-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.su .su-prev-btns span { padding: 4px 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px #e3e5ea; font-size: 12.5px; color: var(--ink-2); }
/* 관리자 로그인 주소 */
.su .su-login { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; width: 420px; max-width: 100%; margin-top: 14px; padding: 12px 16px; border-radius: 14px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.su .su-login-k { font-size: 13px; color: #8d929c; white-space: nowrap; }
.su .su-login b { min-width: 0; font-size: 15px; font-weight: 700; color: #fff; overflow-wrap: anywhere; }
.su .su-hl.is-flash { animation: su-flash .9s ease-out; }
.su .su-prev-bar .su-hl.is-flash { animation-name: su-flash-l; }
@keyframes su-flash { from { color: var(--on-ink-brand); } to { color: inherit; } }
@keyframes su-flash-l { from { color: var(--brand); } to { color: var(--ink); } }
.su .su-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.su .su-chips span { padding: 8px 14px; border-radius: 999px; background: #22252c; font-size: var(--t-sub); font-weight: 600; color: #c9cdd6; white-space: nowrap; }

/* ── 흰 폼 카드 ── */
.su .su-card { display: grid; min-width: 0; padding: 34px; border-radius: 28px; background: #fff; color: var(--ink); box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
.su .su-st { grid-area: 1 / 1; display: flex; flex-direction: column; min-width: 0; }
.su .su-card:not(.is-done) .su-st--done, .su .su-card.is-done .su-st--form { visibility: hidden; }.su .su-h2:focus { outline: none; }.su .su-sub .ln { display: block; }
.su .su-form { flex: 1; display: flex; flex-direction: column; gap: 16px; }
.su .su-grp { font-size: var(--t-lab); font-weight: 600; color: var(--ink-3); }
.su .su-grp--2 { margin-top: 10px; }
.su .su-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }.su .su-help { font-size: var(--t-cap); line-height: 1.55; color: var(--t-cap-c); overflow-wrap: anywhere; }
.su .su-help b { font-weight: 700; color: var(--ink); }
.su .su-err { display: none; font-size: var(--t-cap); line-height: 1.45; color: var(--err); }
.su .has-error .su-err { display: block; }
.su .has-error .su-help { display: none; }
.su .su-f.has-error input { box-shadow: inset 0 0 0 1.5px #e05252; }.su .su-f.has-error .su-pre { box-shadow: inset 0 0 0 1.5px #e05252; }.su .su-cx a { color: var(--ink); font-weight: 700; text-underline-offset: 3px; }.su .su-cx { margin-top: 20px; font-size: var(--t-sub); line-height: 1.6; color: var(--ink-3); text-align: center; }

/* 가입 완료 */
.su .su-dn { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--ai); color: #fff; }
.su .su-dn svg { width: 22px; height: 22px; }
.su .su-h2--done { margin-top: 20px; font-size: var(--t-h3); font-weight: 700; line-height: 1.35; letter-spacing: -0.015em; }
.su .su-sub--done { margin: 10px 0 24px; line-height: 1.65; }
.su .su-mail { padding: 16px 18px; border-radius: 14px; background: var(--bg); font-size: var(--t-sub); line-height: 1.7; color: var(--ink-2); overflow-wrap: anywhere; }
.su .su-mail b { color: var(--ink); }
.su .su-bc { margin-top: 16px; padding: 4px 18px 8px; border-radius: 16px; box-shadow: inset 0 0 0 1px #e3e5ea; }
.su .su-bc-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; padding: 14px 0; box-shadow: inset 0 -1px 0 #e3e5ea; }
.su .su-bc-h b { font-size: var(--t-body); overflow-wrap: anywhere; font-weight: 700; }
.su .su-bc-h > span { font-size: var(--t-cap); color: var(--t-cap-c); overflow-wrap: anywhere; }
.su .su-bc-r { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; font-size: var(--t-sub); }
.su .su-bc-r + .su-bc-r { box-shadow: inset 0 1px 0 #f2f3f5; }
.su .su-bc-r span { flex: none; color: var(--ink-3); }
.su .su-bc-r b { min-width: 0; text-align: right; overflow-wrap: anywhere; }
.su .su-bc-r b.is-on { color: var(--ai); }
.su .su-space { flex: 1 0 24px; }
.su .su-next { margin-top: 22px; padding-top: 18px; box-shadow: inset 0 1px 0 #e3e5ea; }
.su .su-next-k { font-size: var(--t-lab); font-weight: 600; color: var(--ink-3); }
.su .su-next-s { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.su .su-next-s span { padding: 8px 13px; border-radius: 999px; background: var(--bg); font-size: var(--t-sub); font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.su .su-next-s span.is-on { background: var(--ink); color: #fff; }
.su .su-next-s em { font-style: normal; color: #9a9fa8; }

/* ── 좁은 화면 ── */
@media (max-width: 1240px) { .su .su-grid { grid-template-columns: minmax(0, 1fr) 520px; gap: 48px; } }
@media (max-width: 1060px) { .su .su-grid { grid-template-columns: minmax(0, 1fr) 480px; gap: 40px; } .su .su-card { padding: 28px; } }
@media (max-width: 900px) {
  .su .su-stage { min-height: 0; padding: calc(var(--nav-h) + 64px) 0 56px; }
  .su .su-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .su .su-card { order: -1; }
  .su .su-card:not(.is-done) .su-st--done, .su .su-card.is-done .su-st--form { display: none; }   /* 높이 고정 풀고 내용대로 */
  .su .su-l { padding-top: 0; }
  .su .su-tos { margin-top: 4px; }
}
@media (max-width: 760px) { .su .su-stage { padding-top: calc(var(--nav-h) + 40px); } .su { --nav-h: 64px; } .su .su-h1 { font-size: 30px; } .su .su-lead { font-size: var(--t-lead); } .su .su-lead .ln { display: inline; } }
@media (max-width: 540px) {
  .su .su-row { grid-template-columns: minmax(0, 1fr); }
  .su .su-card { padding: 24px 20px; border-radius: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .su .su-cur, .su .su-hl.is-flash, .su .su-prev-bub mark.is-fade { animation: none; }
  .su .su-f input, .su .su-pre { transition: none; }
}

/* ── 폼 카드 위치 = 도입 상담 대화 카드와 같은 칸(사용자 요청 2026-10-07) ──
   왼쪽 칸 max(540, 50% − 180)(1100 이하 480) · 카드 = 왼쪽 칸 끝 + 40(1100 이하 32) ~ 페이지 오른쪽 여백(헤더 버튼 끝선) · 카드 위끝 = 헤더 + 32 · 첫 이름표 = 헤더 + 64 */
.su { --pad-x: max(var(--gutter), calc(50vw - 720px)); }
.su .su-stage { padding-top: calc(var(--nav-h) + 32px); }
.su .su-grid { width: auto; max-width: none; margin: 0; grid-template-columns: minmax(540px, calc(50% - 180px)) minmax(0, 1fr); gap: 0; }
.su .su-l { padding: 32px 40px 0 var(--pad-x); }
.su .su-card { margin: 0 var(--pad-x) 0 40px; }
@media (max-width: 1240px) { .su .su-grid { grid-template-columns: minmax(540px, calc(50% - 180px)) minmax(0, 1fr); gap: 0; } }
@media (max-width: 1100px) { .su .su-grid { grid-template-columns: 480px minmax(0, 1fr); } .su .su-l { padding-right: 32px; } .su .su-card { margin-left: 32px; } }
@media (max-width: 1060px) { .su .su-grid { grid-template-columns: 480px minmax(0, 1fr); gap: 0; } }
@media (max-width: 900px) {
  .su .su-stage { padding-top: calc(var(--nav-h) + 64px); }
  .su .su-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; padding: 0 var(--gutter); }
  .su .su-l { padding: 0; }
  .su .su-card { margin: 0; }
}
@media (max-width: 760px) { .su .su-stage { padding-top: calc(var(--nav-h) + 40px); } }

/* 모바일 글자 한 단계 더 작게(2026-10-12) — 폰에서 꽉 차 읽기 버겁다는 의견. 토큰(type.css)을 안 쓰는 고정 크기만 여기서 줄임 */
@media (max-width: 600px) {
  html body.su .su-l .su-h1 { font-size: 27px; }
  html body.su .su-prev .su-prev-body .su-prev-bub { font-size: 13.5px; }
  html body.su .su-l .su-login b, html body.su .su-f .su-pre .su-pre-k, html body.su .su-prev-head p b { font-size: 14px; }
  html body.su .su-card .su-st .su-h2 { font-size: 16px; }
}

/* 첫 화면 한 화면에 맞춤(2026-10-12, PC만) — 들어오자마자 스크롤 없이 폼 전체가 보이게. 높이가 낮을수록 한 단계씩 촘촘하게(푸터는 아래로 스크롤) */
@media (min-width: 1101px) {
  .su .su-stage { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding-top: calc(var(--nav-h) + 24px); padding-bottom: 24px; }
  .su .su-stage > * { width: 100%; }
  .su .su-l { padding-top: 0; }
  .su .su-grid { align-items: center; }
  .su .su-card:not(.is-done) .su-st--done { display: none; }   /* 완료 화면 높이가 폼 칸을 늘리지 않게 */
}
/* 계정 정보 · 브랜드 정보 묶음 구분(2026-10-12) — 번호 + 이름 + 가로선, 둘째 묶음 위는 한 칸 더 띄움(모든 화면) */
@media all {
  .su .su-form { counter-reset: sugrp; }
  .su .su-grp { counter-increment: sugrp; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--ink); }
  .su .su-grp::before { content: counter(sugrp); display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 11.5px; font-weight: 700; }
  .su .su-grp::after { content: ""; flex: 1; height: 1px; background: #e6e8ec; }
  .su .su-grp--2 { margin-top: 12px; }
}
@media (min-width: 1101px) and (max-height: 960px) {
  .su .su-card { padding: 26px 32px; }
  .su .su-sub { display: none; }   /* 카드 부제는 왼쪽 글과 겹치는 말이라 낮은 화면에서 뺌 */
  .su .su-h2 { margin-bottom: 16px; }
  .su .su-form { row-gap: 12px; }
  .su .su-f { gap: 6px; }
  .su .su-tos { padding-top: 14px; }
  .su .su-btn { min-height: 48px; }
  .su .su-cx { margin-top: 12px; }
  .su .su-prev { margin-top: 24px; }
}
@media (min-width: 1101px) and (max-height: 880px) {
  .su .su-prev { display: none; }   /* 왼쪽 미리 보기는 빼고 글 · 로그인 주소 · 혜택만 */
  .su .su-f input { padding-top: 10px; padding-bottom: 10px; }
}
@media (min-width: 1101px) and (max-height: 780px) {
  .su .su-card { padding: 20px 28px; }
  .su .su-h2 { margin-bottom: 12px; font-size: 19px; }
  .su .su-f input { padding-top: 9px; padding-bottom: 9px; }
  .su .su-form { row-gap: 10px; }
  .su .su-grp--2 { margin-top: 6px; }
}
@media (min-width: 1101px) and (max-height: 880px) { .su .su-stage { padding-top: calc(var(--nav-h) + 16px); padding-bottom: 16px; } }
/* PC: '이미 계정이 있으신가요? 로그인'을 카드 제목 오른쪽 줄로(맨 아래 한 줄을 아껴 한 화면에) · 약관 동의 체크 칸과 글자 가운데 맞춤(2026-10-12) */
@media (min-width: 1101px) {
  .su .su-st--form { position: relative; }
  .su .su-st--form > .su-cx { position: absolute; top: 4px; right: 0; margin: 0; font-size: var(--t-cap); }
  .su .su-st--form > .su-h2 { padding-right: 230px; }
}
@media (min-width: 1101px) and (max-height: 820px) { .su .su-stage { padding-bottom: 8px; } }
.su .su-f.has-error .su-pre input { box-shadow: none; }   /* 브랜드 주소: 빨간 테두리는 바깥 칸 하나만(안쪽 입력칸까지 두 겹이던 것) */
/* 모바일(900 이하) 순서 = 도입 상담처럼 글 먼저: 이름표 · 제목 · 설명 · 혜택 → 가입 카드. 미리 보기 · 로그인 주소 카드는 빼서 카드가 바로 이어지게(로그인 주소는 폼 '브랜드 주소' 아래에 나옴)(2026-10-12) */
@media (max-width: 900px) {
  .su .su-card { order: 0; }
  .su .su-grid { gap: 24px; }
  .su .su-l .su-prev, .su .su-l .su-login { display: none; }
  .su .su-chips { margin-top: 16px; }
}