/* 로그인 · 아이디/비밀번호 찾기 · 회원정보 수정 · 회원가입 2·3단계 공통 모양 (2026-11-06).
   templates/login.html · member.html · mypage_modify.html · signup.html 이 위에서 불러온다(cg-tokens.css 다음).
   .cg-auth 안의 칸만 바꾼다 — 입력칸 id·onclick·저장 순서는 원래 그대로. 값은 cg-tokens.css 의 --cg-* 변수.
   구성: 화면 제목(가운데) → 두 칸 탭 → 흰 카드(구역 제목 파란 막대) → 이름표 + 아이콘 입력칸(+ 오른쪽 검은 단추) → 파란 큰 단추 */

/* ── 화면 바탕·제목 ── */
html body:has(.cg-auth) #content { background: var(--cg-bg); }
html body:has(.cg-auth) #content :is(.s_visual, .rs_visual2) { height: auto; min-height: 0; margin: 0; padding: var(--cg-sp-6) var(--cg-sp-4) 0; background: none; text-align: center; }
html body:has(.cg-auth) :is(.s_visual, .rs_visual2) :is(.m-inner, .s_visual_in, .sv_tit) { height: auto; min-height: 0; margin: 0 auto; padding: 0; background: none; text-align: center; }
html body:has(.cg-auth) #content :is(.s_visual, .rs_visual2) .sv_tit > h3 {   /* 원래 #content .rs_visual2 … > h3 (폰 24·PC 40px) 를 이긴다 */
  margin: 0; font-size: var(--cg-fs-head); font-weight: var(--cg-fw-heavy); line-height: var(--cg-lh-tight); color: var(--cg-text); }
html body:has(.cg-auth) .vis_dep01:empty::before { content: "\00a0"; }   /* 제목은 스크립트가 넣는다 — 그 전에도 한 줄 높이 */
html body:has(.cg-auth) #pageCont { padding: 0; }

html .cg-auth { box-sizing: border-box; width: 100%; max-width: 480px; margin: 0 auto; padding: 0 var(--cg-sp-4) var(--cg-sp-6); font-size: var(--cg-fs-body); color: var(--cg-text); }
html .cg-auth *, html .cg-auth *::before, html .cg-auth *::after { box-sizing: border-box; }
html .cg-auth-sub { margin: var(--cg-sp-1) 0 0; font-size: var(--cg-fs-meta); line-height: var(--cg-lh-body); color: var(--cg-text-2); text-align: center; word-break: keep-all; }
html .cg-auth-sub b { font-weight: var(--cg-fw-bold); color: var(--cg-text); }
html .cg-auth-sub + .cg-auth-sub { margin-top: 0; color: var(--cg-text-3); }

/* ── 두 칸 탭(로그인/회원가입, 아이디 찾기/비밀번호 찾기) ── */
html .cg-seg { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cg-sp-1); margin: var(--cg-sp-5) 0 0; padding: var(--cg-sp-1); border-radius: var(--cg-r-lg); background: var(--cg-gray-100); }
html .cg-seg > * { display: flex; align-items: center; justify-content: center; height: 40px; margin: 0; padding: 0; border: 0; border-radius: var(--cg-r-md); background: none; font-size: var(--cg-fs-body); font-weight: var(--cg-fw-medium); color: var(--cg-text-2); text-decoration: none; cursor: pointer; }
html .cg-seg > *.on, html .cg-seg > *.active { background: var(--cg-surface); box-shadow: var(--cg-shadow); font-weight: var(--cg-fw-bold); color: var(--cg-accent); }
html .cg-seg > * a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: inherit; }

/* ── 카드·구역 제목 ── */
html .cg-card { margin: var(--cg-sp-3) 0 0; padding: var(--cg-sp-5) var(--cg-sp-4); border: 1px solid var(--cg-line); border-radius: var(--cg-r-xl); background: var(--cg-surface); box-shadow: var(--cg-shadow); }
html .cg-sec { display: flex; align-items: center; gap: var(--cg-sp-2); margin: 0 0 var(--cg-sp-1); font-size: var(--cg-fs-title); font-weight: var(--cg-fw-bold); line-height: var(--cg-lh-tight); color: var(--cg-text); }
html .cg-sec::before { content: ""; flex: none; width: 4px; height: 16px; border-radius: 2px; background: var(--cg-accent); }
html .cg-sec small { margin-left: auto; font-size: var(--cg-fs-label); font-weight: var(--cg-fw-medium); color: var(--cg-text-3); }

/* ── 이름표 + 입력칸 ── */
html .cg-field { margin: var(--cg-sp-4) 0 0; }
html .cg-lab { display: block; margin: 0 0 var(--cg-sp-2); font-size: var(--cg-fs-meta); font-weight: var(--cg-fw-bold); line-height: var(--cg-lh-tight); color: var(--cg-gray-700); }
html .cg-lab.cg-req::after { content: " *"; color: var(--cg-accent); }
html .cg-ctl { display: flex; gap: var(--cg-sp-2); align-items: stretch; }
html .cg-inp { position: relative; flex: 1 1 auto; min-width: 0; }
html .cg-auth .cg-inp > :is(input, select) { display: block; width: 100%; height: 48px; margin: 0; padding: 0 var(--cg-sp-3) 0 40px; border: 1px solid var(--cg-line); border-radius: var(--cg-r-lg); background: var(--cg-gray-50); box-shadow: none; font-family: inherit; font-size: var(--cg-fs-title); font-weight: var(--cg-fw-medium); line-height: normal; color: var(--cg-text); outline: none; transition: border-color .15s, background-color .15s; -webkit-appearance: none; appearance: none; }
html .cg-auth .cg-inp.cg-noico > :is(input, select) { padding-left: var(--cg-sp-3); }
html .cg-auth .cg-inp > select { padding-right: 32px; background: var(--cg-gray-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 10px center / 16px no-repeat; }
html .cg-auth .cg-inp > :is(input, select)::placeholder { font-weight: var(--cg-fw-normal); color: var(--cg-text-3); opacity: 1; }
html .cg-auth .cg-inp > :is(input, select):focus { border-color: var(--cg-accent); background-color: var(--cg-surface); box-shadow: 0 0 0 3px var(--cg-blue-50); }
html .cg-auth .cg-inp > input[readonly] { background-color: var(--cg-gray-100); color: var(--cg-text-2); }
html .cg-auth .cg-inp:has(.cg-eye) > input { padding-right: 44px; }
html .cg-inp-tag { position: absolute; top: 50%; right: var(--cg-sp-3); padding: 2px var(--cg-sp-2); border-radius: var(--cg-r-sm); background: var(--cg-gray-200); font-size: var(--cg-fs-badge); font-weight: var(--cg-fw-bold); color: var(--cg-text-2); transform: translateY(-50%); pointer-events: none; }
html .cg-hint { margin: var(--cg-sp-2) 0 0; font-size: var(--cg-fs-meta); line-height: var(--cg-lh-body); color: var(--cg-text-3); }
html .cg-hint:empty { display: none; }
html .cg-two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cg-sp-2); }

/* 입력칸 왼쪽 아이콘(회색 한 가지) — 칸 안에 data-ico */
html .cg-auth .cg-inp[data-ico]::before { content: ""; position: absolute; top: 50%; left: 14px; width: 18px; height: 18px; background: var(--cg-gray-400); transform: translateY(-50%); pointer-events: none; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
html .cg-inp[data-ico="user"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E"); }
html .cg-inp[data-ico="at"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-4 8'/%3E%3C/svg%3E"); }
html .cg-inp[data-ico="lock"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E"); }
html .cg-inp[data-ico="shield"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E"); }
html .cg-inp[data-ico="phone"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Crect x='6' y='2' width='12' height='20' rx='2.5'/%3E%3Cpath d='M11 18h2'/%3E%3C/svg%3E"); }

/* 비밀번호 보기 단추(눈) */
html .cg-auth .cg-eye { position: absolute; top: 50%; right: var(--cg-sp-1); display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 0; padding: 0; border: 0; background: none; transform: translateY(-50%); cursor: pointer; }
html .cg-auth .cg-eye::before { content: ""; width: 18px; height: 18px; background: var(--cg-gray-400); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat; }
html .cg-auth .cg-eye[aria-pressed="true"]::before { background: var(--cg-accent); }

/* ── 단추 ── */
html .cg-auth .cg-btn-dark { flex: none; display: inline-flex; align-items: center; justify-content: center; height: 48px; min-width: 96px; margin: 0; padding: 0 var(--cg-sp-3); border: 0; border-radius: var(--cg-r-lg); background: var(--cg-gray-900); font-family: inherit; font-size: var(--cg-fs-body); font-weight: var(--cg-fw-bold); line-height: normal; color: #fff; white-space: nowrap; cursor: pointer; }
html .cg-auth .cg-btn-dark:active { background: var(--cg-gray-700); }
html .cg-auth .cg-btn { display: flex; align-items: center; justify-content: center; gap: var(--cg-sp-1); width: 100%; height: 52px; margin: var(--cg-sp-6) 0 0; padding: 0; border: 0; border-radius: var(--cg-r-lg); background: var(--cg-accent); font-family: inherit; font-size: var(--cg-fs-title); font-weight: var(--cg-fw-bold); line-height: normal; color: #fff; cursor: pointer; }
html .cg-auth .cg-btn:active { background: var(--cg-blue-700); }
html .cg-auth .cg-btn.cg-go::after { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; }

/* ── 체크 상자(22px 둥근 네모, 체크하면 파랑) ── */
html .cg-auth .cg-check { display: flex; align-items: center; gap: var(--cg-sp-2); }
html .cg-auth .cg-check input[type="checkbox"] { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
html .cg-auth .cg-check label { display: flex; align-items: center; gap: var(--cg-sp-2); margin: 0; font-size: var(--cg-fs-body); font-weight: var(--cg-fw-medium); line-height: var(--cg-lh-tight); color: var(--cg-text); cursor: pointer; }
html .cg-auth .cg-check label::before { content: ""; flex: none; width: 22px; height: 22px; margin: 0; border: 1.5px solid var(--cg-gray-300); border-radius: var(--cg-r-sm); background: #fff center / 14px no-repeat; font-size: 0; }
html .cg-auth .cg-check input:checked + label::before { border-color: var(--cg-accent); background-color: var(--cg-accent); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
html .cg-auth .cg-check input:focus-visible + label::before { outline: 2px solid var(--cg-accent); outline-offset: 2px; }

/* ── 로그인 ── */
html .cg-login-row { display: flex; align-items: center; justify-content: space-between; gap: var(--cg-sp-2); margin: var(--cg-sp-4) 0 0; }
html .cg-login-row a { font-size: var(--cg-fs-meta); font-weight: var(--cg-fw-medium); color: var(--cg-text-2); text-decoration: underline; text-underline-offset: 3px; }
html .cg-err { margin: var(--cg-sp-3) 0 0; font-size: var(--cg-fs-meta); font-weight: var(--cg-fw-medium); color: var(--cg-danger); }
html .cg-err:empty { display: none; }

/* ── 아이디/비밀번호 찾기: 원래 규칙(club.css .find …: 흰 바탕, 탭 주황 밑줄, 칸 여백)을 이긴다 ── */
html .find.cg-auth { background: none; }
html .find.cg-auth .find-list.cg-seg { display: grid; gap: var(--cg-sp-1); }
html .find.cg-auth .find-list.cg-seg > div { display: flex; padding: 0; border: 0; font-size: var(--cg-fs-body); transition: none; }
html .find.cg-auth .find-list.cg-seg > div.active { border: 0; color: var(--cg-accent); }
html .find.cg-auth :is(#dvID, #dvPwd, #dvIDOK, #dvPwdChange, #frmID, #frmPwd) { width: auto; max-width: none; margin: 0; padding: 0; }

/* ── 아이디/비밀번호 찾기: 결과 표 ── */
html .cg-auth #dvIDOK.display_y, html .cg-auth #dvPwdChange.display_y { display: block; }
html .cg-auth #dvIDOK table { width: 100%; margin: var(--cg-sp-4) 0 0; border-collapse: separate; border-spacing: 0; overflow: hidden; border: 1px solid var(--cg-line); border-radius: var(--cg-r-lg); }
html .cg-auth #dvIDOK caption { padding: 0 0 var(--cg-sp-2); font-size: var(--cg-fs-title); font-weight: var(--cg-fw-bold); color: var(--cg-text); text-align: left; caption-side: top; }
html .cg-auth #dvIDOK th, html .cg-auth #dvIDOK td { height: 48px; padding: 0 var(--cg-sp-4); border: 0; border-bottom: 1px solid var(--cg-gray-100); font-size: var(--cg-fs-body); text-align: left; }
html .cg-auth #dvIDOK tr:last-child :is(th, td) { border-bottom: 0; }
html .cg-auth #dvIDOK th { width: 30%; background: var(--cg-gray-50); font-weight: var(--cg-fw-medium); color: var(--cg-text-2); }
html .cg-auth #dvIDOK td { font-weight: var(--cg-fw-bold); color: var(--cg-text); }
html .cg-auth #dvIDOK tr:last-child td { color: var(--cg-accent); }
html .cg-auth #dvIDOK .btn_alppyChk { display: flex; align-items: center; justify-content: center; width: 100%; height: 52px; margin: var(--cg-sp-4) 0 0; border: 0; border-radius: var(--cg-r-lg); background: var(--cg-accent); font-family: inherit; font-size: var(--cg-fs-title); font-weight: var(--cg-fw-bold); color: #fff; cursor: pointer; }
html .cg-auth #dvIDOK .Btns2 { margin: 0; }
html .cg-auth #sendConfirmMent { margin: var(--cg-sp-2) 0 0 !important; font-size: var(--cg-fs-meta); font-weight: var(--cg-fw-medium); color: var(--cg-accent); }
html .cg-auth #sendConfirmMent:empty { display: none; }

/* ── 회원정보 수정: 성별(두 칸 고르기) · 동의 줄 ── */
html .cg-auth .cg-gender { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cg-sp-1); padding: var(--cg-sp-1); border-radius: var(--cg-r-lg); background: var(--cg-gray-100); }
html .cg-auth .cg-gender input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
html .cg-auth .cg-gender label { display: flex; align-items: center; justify-content: center; height: 40px; margin: 0; border-radius: var(--cg-r-md); font-size: var(--cg-fs-body); font-weight: var(--cg-fw-medium); color: var(--cg-text-2); cursor: pointer; }
html .cg-auth .cg-gender label::before { display: none; }
html .cg-auth .cg-gender input:checked + label { background: var(--cg-accent); font-weight: var(--cg-fw-bold); color: #fff; }
html .cg-auth .cg-gender input:focus-visible + label { outline: 2px solid var(--cg-accent); outline-offset: 2px; }
html .cg-auth .cg-agree { display: flex; flex-direction: column; gap: var(--cg-sp-2); margin: var(--cg-sp-3) 0 0; }
html .cg-auth .cg-agree .cg-check { min-height: 48px; padding: 0 var(--cg-sp-3); border-radius: var(--cg-r-lg); background: var(--cg-gray-50); }
html .cg-auth .cg-agree .cg-check label { flex: 1 1 auto; justify-content: space-between; flex-direction: row-reverse; min-height: 48px; }

/* ── 회원정보 수정: 위 '마이페이지'는 작은 파란 글자, 아래 '회원정보 수정'이 화면 제목 ── */
html body:has(.cg-modify-page) #content .s_visual .sv_tit > h3 { font-size: var(--cg-fs-label); font-weight: var(--cg-fw-bold); letter-spacing: .04em; color: var(--cg-accent); }
html .cg-auth-title { margin: var(--cg-sp-1) 0 0; font-size: var(--cg-fs-head); font-weight: var(--cg-fw-heavy); line-height: var(--cg-lh-tight); color: var(--cg-text); text-align: center; }
html .cg-modify-page #userinfo-container { display: none; }   /* 칸은 auth-look.js 가 카드로 옮긴다 — 처음 빈 견본 줄도 보이지 않게 */
html .cg-modify-page form { min-height: 1180px; }   /* 카드가 그려지기 전에도 자리를 잡아 아래(단추·맨 아래)가 밀리지 않게 */
html .cg-modify-page form:has(.cg-modify) { min-height: 0; }

@media (min-width: 768px) {
  html body:has(.cg-auth) #content :is(.s_visual, .rs_visual2) { padding-top: 48px; }
  html .cg-auth { padding-bottom: 64px; }
}

/* ── 4. 가입완료(가입 후 서버가 보내는 로그인 화면 맨 위) ── */
html .cg-done { margin: var(--cg-sp-5) 0 0; padding: var(--cg-sp-5) var(--cg-sp-4); border: 1px solid var(--cg-line); border-radius: var(--cg-r-xl); background: var(--cg-surface); box-shadow: var(--cg-shadow); text-align: center; }
html .cg-done-ico { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin: 0 auto; border-radius: var(--cg-r-pill); background: var(--cg-ok-bg); }
html .cg-done-ico::before { content: ""; width: 24px; height: 24px; background: var(--cg-ok); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; }
html .cg-done h4 { margin: var(--cg-sp-3) 0 0; font-size: var(--cg-fs-head); font-weight: var(--cg-fw-heavy); line-height: var(--cg-lh-tight); color: var(--cg-text); }
html .cg-done p { margin: var(--cg-sp-2) 0 0; font-size: var(--cg-fs-meta); line-height: var(--cg-lh-body); color: var(--cg-text-2); word-break: keep-all; }
html .cg-done p b { font-weight: var(--cg-fw-bold); color: var(--cg-accent); }
html .cg-done ol { display: flex; justify-content: center; gap: var(--cg-sp-1); margin: var(--cg-sp-4) 0 0; padding: 0; list-style: none; font-size: var(--cg-fs-label); color: var(--cg-text-3); }
html .cg-done ol li + li::before { content: "›"; margin-right: var(--cg-sp-1); }
html .cg-done ol li:last-child { font-weight: var(--cg-fw-bold); color: var(--cg-ok); }