/* ============================================================================
cc-auth.css — 로그인·가입·SNS 대기·연결 관리 화면 전용 (P8.4)
=== P8.4 (cookclip-frontend-dev) === 원본 Docs/design/p84/cc-auth.css(ui-designer 시안) 이식
+ 끝의 §11 구현 보충. 토큰(var(--cc-*))만 쓴다. cc-base/cc-components 는 건드리지 않고
필요한 변형은 이 파일 안에서 auth 카드·연결 목록 범위로만 한정한다.
전제: cc-tokens.css 에 cc-tokens.p84-insert.css 블록이 들어가 있어야 한다.
로드 순서: tokens → base → components → cc-auth.css
========================================================================== */
/* ---- 1. 인증 카드 = 작업대 위 색인 카드 ------------------------------------
모바일(<480)은 판 없이 평평하게(좁은 폭에서 테두리·여백이 입력칸을 줄이지 않게),
480 이상에서 종이 카드 + 상단 브랜드 괘선 4px. */
.cc-auth-card { max-width: 440px; }
@media (min-width: 480px) {
.cc-auth-card {
background: var(--cc-paper);
border: var(--cc-bw-hair) solid var(--cc-line);
border-top: var(--cc-bw-bar) solid var(--cc-brand-fill);
border-radius: var(--cc-radius-lg);
box-shadow: var(--cc-shadow-1);
padding: var(--cc-sp-7) var(--cc-sp-7) var(--cc-sp-6);
}
}
.cc-auth-card .cc-form { max-width: none; }
.cc-auth-card__lead { color: var(--cc-ink-muted); font-size: var(--cc-fs-body-sm); margin: calc(-1 * var(--cc-sp-3)) 0 var(--cc-sp-5); }
/* ---- 2. 로그인 옵션(이메일 저장 · 로그인 상태 유지) --------------------------
한 줄 2개(320px 에서도 들어감), 경고 1줄은 아래 전폭. */
.cc-auth-opts { display: flex; flex-wrap: wrap; column-gap: var(--cc-sp-5); row-gap: 0; margin-top: calc(-1 * var(--cc-sp-1)); }
.cc-auth-opts .cc-checkbox { align-items: center; min-height: var(--cc-touch-min); }
.cc-auth-opts .cc-checkbox input { margin-top: 0; }
.cc-auth-opts__help {
flex-basis: 100%; display: flex; align-items: flex-start; gap: var(--cc-sp-1);
margin: 0; font-size: var(--cc-fs-caption); line-height: var(--cc-lh-caption); color: var(--cc-ink-muted);
}
.cc-auth-opts__help .cc-i { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--cc-warning-solid); }
/* ---- 3. 구분선 "또는" ------------------------------------------------------
기존 .cc-auth-card__sns-label 은 ink-faint(3.62:1)라 글자 대비 미달 → ink-muted(5.88:1). */
.cc-auth-divider {
display: flex; align-items: center; gap: var(--cc-sp-3);
margin: var(--cc-sp-6) 0 var(--cc-sp-4);
font-size: var(--cc-fs-caption); color: var(--cc-ink-muted); text-align: center;
}
.cc-auth-divider::before, .cc-auth-divider::after { content: ""; flex: 1; height: var(--cc-bw-hair); background: var(--cc-line); }
/* ---- 4. 간편로그인 버튼 `.cc-sns` ------------------------------------------
카카오 로그인
.cc-btn / .cc-btn--ghost 를 같이 붙이지 않는다(테두리·색이 섞인다). */
.cc-auth-card__sns { display: flex; flex-direction: column; gap: var(--cc-sns-gap); margin-top: 0; }
.cc-sns {
position: relative;
display: flex; align-items: center; justify-content: center;
width: 100%; min-height: var(--cc-sns-h);
padding: 0 calc(var(--cc-sns-pad) + var(--cc-sns-icon) + var(--cc-sp-2));
border: var(--cc-bw-hair) solid transparent;
border-radius: var(--cc-sns-radius);
font-family: var(--cc-font-sans); font-size: var(--cc-sns-fs); font-weight: var(--cc-fw-semibold); line-height: 1.25;
text-decoration: none; text-align: center; cursor: pointer;
transition: box-shadow var(--cc-dur-fast) var(--cc-ease-standard);
}
.cc-sns__icon {
position: absolute; left: var(--cc-sns-pad); top: 50%;
width: var(--cc-sns-icon); height: var(--cc-sns-icon); transform: translateY(-50%);
}
.cc-sns__label { min-width: 0; word-break: keep-all; }
/* 좁은 폭(<360): 좌우 대칭 여백이 레이블 폭을 잡아먹어 "Google 계정으로 로그인"이 두 줄이 된다 →
오른쪽 여백만 줄이고 레이블은 가운데 정렬 유지(심볼 자리만 비워 둔다). */
@media (max-width: 359px) {
.cc-sns { padding-right: var(--cc-sp-3); font-size: var(--cc-sns-fs-sm); }
}
.cc-sns:hover { box-shadow: inset 0 0 0 100vmax var(--cc-sns-hover-overlay); }
.cc-sns:active { box-shadow: inset 0 0 0 100vmax var(--cc-sns-active-overlay); }
.cc-sns:focus-visible { outline: var(--cc-bw-bold) solid var(--cc-focus); outline-offset: 2px; }
.cc-sns--kakao { background: var(--cc-brand-kakao-bg); color: var(--cc-brand-kakao-ink); }
.cc-sns--naver { background: var(--cc-brand-naver-bg); color: var(--cc-brand-naver-ink); }
.cc-sns--google { background: var(--cc-brand-google-bg); color: var(--cc-brand-google-ink); border-color: var(--cc-brand-google-line); }
/* 링크 방문색·다크 링크색이 브랜드 글자를 덮지 않게 */
.cc-sns--kakao:visited { color: var(--cc-brand-kakao-ink); }
.cc-sns--naver:visited { color: var(--cc-brand-naver-ink); }
.cc-sns--google:visited { color: var(--cc-brand-google-ink); }
/* 이동 중(클릭 후 제공자 화면으로 넘어가기 전) — JS 가 aria-busy="true" 를 붙인다 */
.cc-sns[aria-busy="true"] { pointer-events: none; }
.cc-sns[aria-busy="true"] .cc-sns__icon { animation: cc-sns-pulse 900ms ease-in-out infinite; }
@keyframes cc-sns-pulse { 50% { opacity: .35; } }
/* 윈도 고대비 모드: 브랜드 배경이 사라지므로 경계를 시스템 색으로 */
@media (forced-colors: active) {
.cc-sns { border-color: ButtonText; }
}
/* ---- 5. 가입 화면 상단 간편가입 묶음 ---------------------------------------- */
.cc-auth-quick { margin-bottom: 0; }
.cc-auth-quick__title { font-size: var(--cc-fs-body); font-weight: var(--cc-fw-semibold); margin: 0 0 var(--cc-sp-1); }
.cc-auth-quick__help { font-size: var(--cc-fs-caption); color: var(--cc-ink-muted); margin: 0 0 var(--cc-sp-3); }
/* ---- 6. SNS 오류 안내 `#sns-error` ------------------------------------------
.cc-alert.cc-alert--warning 위에 얹는다. 문구 1~2줄 + [○○로 다시 시도]. */
.cc-sns-error { flex-wrap: wrap; }
.cc-sns-error .cc-alert__body p { margin: 0; }
.cc-sns-error__title { font-weight: var(--cc-fw-semibold); }
.cc-sns-error__actions { flex-basis: 100%; display: flex; gap: var(--cc-sp-2); padding-left: calc(20px + var(--cc-sp-3)); }
.cc-sns-error__actions .cc-btn { background: var(--cc-paper); }
/* ---- 7. 인증 카드 하단 링크 (가로 2개, 좁으면 줄바꿈) ------------------------ */
.cc-auth-card__links { flex-direction: row; flex-wrap: wrap; justify-content: center; column-gap: var(--cc-sp-5); row-gap: 0; }
.cc-auth-card__links .cc-auth-sep { color: var(--cc-line-strong); align-self: center; }
/* ---- 8. SNS 대기 화면 4종 공통 ---------------------------------------------- */
.cc-auth-provider {
display: inline-flex; align-items: center; gap: var(--cc-sp-2);
min-height: 32px; padding: 0 var(--cc-sp-3) 0 var(--cc-sp-1);
border: var(--cc-bw-hair) solid var(--cc-line); border-radius: var(--cc-radius-pill);
font-size: var(--cc-fs-caption); font-weight: var(--cc-fw-medium); color: var(--cc-ink-muted);
margin-bottom: var(--cc-sp-4);
}
.cc-sns-badge {
display: inline-flex; align-items: center; justify-content: center; flex: none;
width: 24px; height: 24px; border-radius: 50%;
border: var(--cc-bw-hair) solid transparent;
}
.cc-sns-badge img { width: 14px; height: 14px; }
.cc-sns-badge--kakao { background: var(--cc-brand-kakao-bg); }
.cc-sns-badge--naver { background: var(--cc-brand-naver-bg); }
.cc-sns-badge--google { background: var(--cc-brand-google-bg); border-color: var(--cc-brand-google-line); }
.cc-sns-badge--lg { width: 40px; height: 40px; border-radius: var(--cc-radius-md); }
.cc-sns-badge--lg img { width: 20px; height: 20px; }
.cc-auth-step__body { max-width: 34rem; }
.cc-auth-step__body strong { overflow-wrap: anywhere; }
.cc-auth-step__expire { display: flex; gap: var(--cc-sp-1); align-items: center; font-size: var(--cc-fs-caption); color: var(--cc-ink-muted); margin: var(--cc-sp-4) 0 0; }
.cc-auth-step__expire .cc-i { width: 16px; height: 16px; flex: none; }
.cc-auth-step__or { margin: var(--cc-sp-5) 0 var(--cc-sp-3); }
/* 취소 = 조용한 텍스트 버튼(전폭 ghost 두 개가 쌓여 주 행동이 흐려지는 것 방지) */
.cc-btn--quiet { background: transparent; border-color: transparent; color: var(--cc-ink-muted); font-weight: var(--cc-fw-medium); text-decoration: underline; text-underline-offset: 3px; }
.cc-btn--quiet:hover { color: var(--cc-ink); background: var(--cc-surface-sunk); }
.cc-auth-cancel { display: flex; justify-content: center; margin-top: var(--cc-sp-3); }
/* ---- 9. 내 정보 — 간편로그인 연결 목록 `#sns-link-list` ---------------------- */
.cc-sns-links { list-style: none; margin: 0; padding: 0; border: var(--cc-bw-hair) solid var(--cc-line); border-radius: var(--cc-radius-md); }
.cc-sns-links__item {
display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; column-gap: var(--cc-sp-3); row-gap: var(--cc-sp-2);
align-items: center; padding: var(--cc-sp-3) var(--cc-sp-4);
}
.cc-sns-links__item + .cc-sns-links__item { border-top: var(--cc-bw-hair) solid var(--cc-line); }
.cc-sns-links__main { min-width: 0; }
.cc-sns-links__name { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cc-sp-2); font-weight: var(--cc-fw-semibold); }
.cc-sns-links__meta { display: block; font-size: var(--cc-fs-caption); color: var(--cc-ink-muted); overflow-wrap: anywhere; }
.cc-sns-links__num { font-variant-numeric: tabular-nums; }
.cc-sns-links__act { margin: 0; }
.cc-sns-links__note {
grid-column: 2 / -1; display: flex; gap: var(--cc-sp-1); align-items: flex-start;
font-size: var(--cc-fs-caption); color: var(--cc-warning); margin: 0;
}
.cc-sns-links__note .cc-i { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.cc-sns-status { display: inline-flex; align-items: center; gap: 4px; min-height: 22px; padding: 0 var(--cc-sp-2); border-radius: var(--cc-radius-pill); font-size: var(--cc-fs-micro); font-weight: var(--cc-fw-semibold); }
.cc-sns-status .cc-i { width: 12px; height: 12px; }
.cc-sns-status--on { background: var(--cc-success-soft); color: var(--cc-success); }
.cc-sns-status--off { background: var(--cc-surface-sunk); color: var(--cc-ink-muted); }
/* 좁은 폭: 버튼을 아래 줄 전폭으로 */
@media (max-width: 400px) {
.cc-sns-links__item { grid-template-columns: 40px minmax(0, 1fr); }
.cc-sns-links__act { grid-column: 2 / -1; }
.cc-sns-links__act .cc-btn { width: 100%; }
}
/* 비밀번호 설정 유도 */
.cc-pwset-nudge {
display: flex; gap: var(--cc-sp-3); align-items: flex-start; flex-wrap: wrap;
margin-top: var(--cc-sp-4); padding: var(--cc-sp-3) var(--cc-sp-4);
background: var(--cc-brand-soft); border: var(--cc-bw-hair) solid var(--cc-brand-soft-line); border-radius: var(--cc-radius-md);
color: var(--cc-ink); font-size: var(--cc-fs-body-sm);
}
.cc-pwset-nudge > .cc-i { width: 20px; height: 20px; flex: none; color: var(--cc-brand-soft-text); margin-top: 2px; }
.cc-pwset-nudge__body { flex: 1 1 200px; min-width: 0; }
.cc-pwset-nudge__body p { margin: 0; }
/* ---- 10. 한 카드에 폼이 여러 개(대기 화면) — 폼 사이 간격 -------------------
sns-verify·sns-email 은