/* 11/08 대표: 회원가입 4단계 — 유리 카드 + 애니메이션 (signup.html) */
.sg { --sg-glass: linear-gradient(155deg, rgba(255,255,255,.7), rgba(240, 242, 242,.46));
  --sg-edge: 0 0 0 1px rgba(255,255,255,.85) inset, 0 0 0 1px rgba(27, 58, 61,.06), 0 24px 54px -28px rgba(27, 58, 61,.42);
  --sg-ck: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.7 2.7L12 5.3' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
body.sg::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(460px 380px at 10% 26%, rgba(114, 168, 174,.34), transparent 70%), radial-gradient(440px 360px at 90% 16%, rgba(32, 136, 136,.32), transparent 70%), radial-gradient(520px 420px at 64% 92%, rgba(147, 188, 193,.26), transparent 70%); }

/* 단계 표시: 동그라미 4개 + 이어지는 선 */
.sg .m-steps { position: relative; gap: 0; margin: 0 0 22px; padding: 14px 10px 12px; border-radius: 22px; background: var(--sg-glass); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: var(--sg-edge); }
.sg .m-steps li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 0; border: 0; font-size: 13px; font-weight: 600; color: #7f7f86; text-align: center; }
.sg .m-steps li::before { content: counter(st); position: relative; z-index: 1; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #f5fafa; box-shadow: 0 0 0 1.5px rgba(27, 58, 61,.2); font-size: 13px; font-weight: 800; color: #7f7f86; transition: background .3s, box-shadow .3s, color .3s; }
.sg .m-steps li + li::after { content: ''; position: absolute; top: 15px; right: calc(50% + 19px); width: calc(100% - 38px); height: 2px; border-radius: 2px; background: rgba(27, 58, 61,.12); }
.sg .m-steps li.is-done + li::after, .sg .m-steps li.is-done + li[aria-current]::after { background: linear-gradient(90deg, #588d93, #1b3a3d); }
.sg .m-steps li.is-done { color: #1b3a3d; }
.sg .m-steps li.is-done::before { content: ''; background: #2b6970 var(--sg-ck) center / 15px no-repeat; box-shadow: none; }
.sg .m-steps li[aria-current="step"] { color: #1b3a3d; font-weight: 800; }
.sg .m-steps li[aria-current="step"]::before { background: #1b3a3d; color: #eef1f1; box-shadow: 0 0 0 5px rgba(114, 168, 174,.25), 0 8px 16px -6px rgba(27, 58, 61,.5); }

/* 단계마다 유리 카드 */
.sg #step-role, .sg #step-account, .sg #step-consent, .sg #step-mail { padding: 26px 24px 24px; border-radius: 28px; background: var(--sg-glass); -webkit-backdrop-filter: blur(20px) saturate(1.15); backdrop-filter: blur(20px) saturate(1.15); box-shadow: var(--sg-edge); }
.sg #signup { gap: 0; }
.sg .m-h2 { margin-top: 0; letter-spacing: -.02em; }

/* 1. 역할 카드 */
.sg .m-roles { gap: 12px; }
.sg .m-role { grid-template-columns: 1fr; align-items: start; gap: 0; padding: 18px; border: 0; border-radius: 20px; cursor: pointer;
  background: rgba(255,255,255,.62); box-shadow: 0 0 0 1px rgba(27, 58, 61,.1), 0 8px 20px -16px rgba(27, 58, 61,.4); transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .25s, background .25s; }
.sg .m-role > span { display: grid; grid-template-columns: 1fr; row-gap: 4px; }
.sg .m-role > span::before { content: ''; width: 44px; height: 44px; margin-bottom: 10px; border-radius: 14px; background: rgba(27, 58, 61,.08) center / 24px no-repeat; transition: background-color .25s, transform .35s cubic-bezier(.3,1.5,.5,1); }
.sg .m-role:has(input[value="advertiser"]) > span::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b3a3d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10.5l1.4-5h13.2l1.4 5M4 10.5h16v9a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-9zM9.5 20.5v-5h5v5'/%3E%3C/svg%3E"); }
.sg .m-role:has(input[value="creator"]) > span::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b3a3d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='6' width='12' height='12' rx='2.5'/%3E%3Cpath d='M15.5 10.5l5-3v9l-5-3'/%3E%3C/svg%3E"); }
.sg .m-role strong { font-size: 18px; color: #1e2a2b; }
.sg .m-role strong + span { font-size: 14px; line-height: 1.45; color: #65656b; word-break: keep-all; }
.sg .m-role input { position: absolute; top: 18px; right: 18px; appearance: none; -webkit-appearance: none; width: 24px; height: 24px; margin: 0; border-radius: 50%; background: #FAFAFA; box-shadow: 0 0 0 1.5px rgba(27, 58, 61,.28); cursor: pointer; transition: background .2s, box-shadow .2s; }
.sg .m-role input:checked { background: #1b3a3d var(--sg-ck) center / 14px no-repeat; box-shadow: 0 0 0 4px rgba(114, 168, 174,.25); animation: sg-pop .4s cubic-bezier(.3,1.5,.5,1); }
.sg .m-role input:focus-visible { outline: 2px solid #1b3a3d; outline-offset: 3px; }
.sg .m-role:hover { transform: translateY(-3px); background: rgba(255,255,255,.85); box-shadow: 0 0 0 1px rgba(27, 58, 61,.16), 0 16px 28px -16px rgba(27, 58, 61,.45); }
.sg .m-role:hover > span::before { transform: scale(1.08) rotate(-4deg); }
.sg .m-role:has(input:checked) { background: linear-gradient(150deg, rgba(225, 239, 241,.95), rgba(255,255,255,.8)); box-shadow: 0 0 0 2px #2b6970, 0 16px 30px -16px rgba(27, 58, 61,.5); }
.sg .m-role:has(input:checked) > span::before { background-color: #1b3a3d; filter: none; }
.sg .m-role:has(input[value="advertiser"]:checked) > span::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23eef1f1' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10.5l1.4-5h13.2l1.4 5M4 10.5h16v9a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-9zM9.5 20.5v-5h5v5'/%3E%3C/svg%3E"); }
.sg .m-role:has(input[value="creator"]:checked) > span::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23eef1f1' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='6' width='12' height='12' rx='2.5'/%3E%3Cpath d='M15.5 10.5l5-3v9l-5-3'/%3E%3C/svg%3E"); }

/* 2. 계정 칸 */
.sg #step-account input, .sg #step-account textarea { background: rgba(255,255,255,.75); border: 0; border-radius: 14px; box-shadow: 0 0 0 1px rgba(27, 58, 61,.12); transition: box-shadow .2s, background .2s; }
.sg #step-account input:focus { outline: none; background: #FAFAFA; box-shadow: 0 0 0 2px #2b6970, 0 8px 20px -10px rgba(27, 58, 61,.4); }
.sg #step-account input[aria-invalid="true"] { box-shadow: 0 0 0 2px #208787; }
.sg .m-pw__show { border-radius: 11px; background: rgba(27, 58, 61,.07); color: #1b3a3d; font-weight: 700; transition: background .2s, color .2s; }
.sg .m-pw__show:hover, .sg .m-pw__show[aria-pressed="true"] { background: #1b3a3d; color: #eef1f1; }
.sg .m-meter span { height: 5px; background: rgba(27, 58, 61,.1); transition: background-color .3s, transform .3s; transform-origin: left; }
.sg .m-meter[data-level="1"] span:nth-child(-n+1) { background: #208787; }
.sg .m-meter[data-level="2"] span:nth-child(-n+2) { background: #e3f2f1; }
.sg .m-meter[data-level="3"] span:nth-child(-n+3), .sg .m-meter[data-level="4"] span { background: linear-gradient(90deg, #72a8ae, #2b6970); }

/* 3. 동의 */
.sg .m-consent { border: 0; display: grid; gap: 8px; }
.sg .m-check { padding: 12px 14px; border: 0; border-radius: 16px; background: rgba(255,255,255,.55); box-shadow: 0 0 0 1px rgba(27, 58, 61,.08); transition: background .2s, box-shadow .2s; }
.sg .m-check:hover { background: rgba(255,255,255,.85); }
.sg .m-check--all { padding: 16px 14px; background: linear-gradient(150deg, rgba(225, 239, 241,.95), rgba(255,255,255,.75)); box-shadow: 0 0 0 1.5px rgba(43, 105, 112,.35); font-size: 16px; }
.sg .m-check:has(input:checked) { box-shadow: 0 0 0 1.5px rgba(43, 105, 112,.45); }
.sg .m-check input { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; border-radius: 7px; background: #FAFAFA; box-shadow: 0 0 0 1.5px rgba(27, 58, 61,.3); cursor: pointer; transition: background .2s, box-shadow .2s; }
.sg .m-check input:checked { background: #1b3a3d var(--sg-ck) center / 14px no-repeat; box-shadow: 0 0 0 3px rgba(114, 168, 174,.25); animation: sg-pop .35s cubic-bezier(.3,1.5,.5,1); }
.sg .m-check input:focus-visible { outline: 2px solid #1b3a3d; outline-offset: 3px; }
.sg .m-check summary { min-height: 32px; font-weight: 600; }
.sg .m-req { color: #208787; font-weight: 700; }

/* 4. 메일 */
.sg #step-mail { text-align: left; }
.sg .m-mail__icon { width: 72px; height: 72px; padding: 14px; border-radius: 22px; background: linear-gradient(150deg, #e1eff1, #FAFAFA); box-shadow: 0 14px 30px -14px rgba(27, 58, 61,.45); }

.sg .m-acts .m-btn { min-height: 52px; border-radius: 16px; }
.sg .m-btn--ghost { background: rgba(255,255,255,.6); }

@media (prefers-reduced-motion: no-preference) {
  .sg .m-steps { animation: sg-up .55s cubic-bezier(.16,1,.3,1) both; }
  .sg #step-role:not([hidden]), .sg #step-account:not([hidden]), .sg #step-consent:not([hidden]), .sg #step-mail:not([hidden]) { animation: sg-up .55s .05s cubic-bezier(.16,1,.3,1) both; }
  .sg section:not([hidden]) .m-role, .sg section:not([hidden]) .m-field, .sg section:not([hidden]) .m-check { animation: sg-up .5s cubic-bezier(.16,1,.3,1) both; }
  .sg .m-role:nth-child(3), .sg .m-field:nth-child(2), .sg .m-check:nth-child(2) { animation-delay: .08s !important; }
  .sg .m-field:nth-child(3), .sg .m-check:nth-child(3) { animation-delay: .14s !important; }
  .sg .m-field:nth-child(4), .sg .m-check:nth-child(4) { animation-delay: .2s !important; }
  .sg .m-check:nth-child(5) { animation-delay: .26s !important; }
  .sg .m-steps li[aria-current="step"]::before { animation: sg-pop .45s cubic-bezier(.3,1.5,.5,1); }
  .sg .m-steps li.is-done::before { animation: sg-pop .45s cubic-bezier(.3,1.5,.5,1); }
  .sg .m-mail__icon { animation: sg-bob 3s ease-in-out infinite; }
}
@keyframes sg-up { from { opacity: 0; transform: translateY(14px); } }
@keyframes sg-pop { 0% { transform: scale(.5); } 100% { transform: scale(1); } }
@keyframes sg-bob { 50% { transform: translateY(-6px) rotate(-3deg); } }
@media (max-width: 480px) { .sg #step-role, .sg #step-account, .sg #step-consent, .sg #step-mail { padding: 22px 16px 18px; border-radius: 24px; } .sg .m-steps li { font-size: 12px; } }