@charset "utf-8";
/* ----------------------------------------------------------------------------------------------
 *                 ORANGE-PMI PLATFORM  Version 2.0.0 - Last modified 2026-10-05
 *           Modular Web Architecture · Powered by Orangecommunication · www.oranc.net
 * ----------------------------------------------------------------------------------------------
 *
 * 로그인 스킨 `sso` — basic 과 **같은 모양**에 회원유형 탭만 얹는다.
 *
 * ⛔ basic 의 규칙을 **복제하지 않는다** — @import 로 가져다 쓴다. 베껴 두면 basic 을 고칠 때
 *   이쪽이 조용히 뒤처진다(사이트 CSS 복제 사고와 같은 꼴). 경로는 자산 URL 기준 상대경로다
 *   (`/asset/skin/login/sso/style.css` → `../basic/style.css`).
 * ★ 여기 적는 것은 **이 스킨에만 있는 것**(.c-login__stack·__tabs·__tab)뿐이다.
 */
@import url("../basic/style.css");

/*  세로 스택 — 이 스킨에만 있는 자리.
    ⚠ `.c-login` 은 basic 에서 **가로 flex**(justify-content:center)다. basic 은 그 안에 상자 하나만
      두고 SNS·링크까지 폼 안에 넣어 가운데 정렬을 얻는데, 이 스킨은 **폼이 둘**이라(탭 전환) 그럴 수
      없다. 그래서 래퍼를 하나 두고 그 안에서 세로로 쌓는다 — 없으면 탭·폼·SNS·링크가 가로로 흩어진다
      (실측 2026-10-05 — 탭이 왼쪽, SNS 가 오른쪽으로 떨어졌다).
    너비는 basic 의 `.c-login__box` 와 **같은 380px** 로 맞춘다(두 스킨의 상자 폭이 달라 보이지 않게). */
.c-login__stack {
    width: 100%;
    max-width: 380px;
}

/* 상자는 스택이 폭을 쥔다 — 제 max-width 를 풀어 준다(겹쳐 두면 뜻이 두 군데가 된다). */
.c-login__stack .c-login__box {
    max-width: none;
}

/*  회원유형 탭 — **세그먼트 버튼** 한 줄.
    ★ 카드형 탭(아래 상자와 테두리를 잇는 꼴)을 쓰지 않는다 — basic 의 로그인 상자는 **테두리가 없어**
      (입력칸만 테두리) 이을 상대가 없고, 유형이 늘면(지금 다섯) 한 줄에 다 들어가지도 않는다.
    ⚠ 유형 수는 **설치가 정한다**(member_ext_options) — 2개일 수도 6개일 수도 있어 폭을 고정하지 않고
      `flex-wrap` 으로 넘치면 다음 줄에 둔다. */
.c-login__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 18px;
}

.c-login__tab {
    flex: 1 1 auto;
    min-width: 62px;           /* '교직원' 세 글자가 한 줄에 들어가는 최소치 */
    padding: 9px 6px;
    border: 1px solid var(--login-line, #e0e0e0);
    border-radius: 8px;
    background: #fff;
    color: var(--login-mute, #999);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    cursor: pointer;
    transition: color .15s, border-color .15s, background-color .15s;
    /* 유형 이름은 설치가 정한다 — 길어도 글자 중간에서 끊기지 않게 */
    word-break: keep-all;
}

.c-login__tab:hover {
    border-color: var(--login-ink, #444);
    color: var(--login-ink, #444);
}

/*  고른 탭 — **로그인 버튼과 같은 무채색**이다. 사이트의 파란 강조색을 쓰면 아래 소셜 버튼
    (초록·노랑)과 다투어 어느 것이 주 동작인지 흐려진다 — basic 이 제출 버튼에 무채색을 쓴 이유와 같다.
    색은 그 버튼이 쓰는 토큰 그대로이고 새 색을 만들지 않는다. */
.c-login__tab.is-on {
    border-color: var(--bg-btn-hover, #101821);
    background: var(--bg-btn-hover, #101821);
    color: #fff;
    font-weight: 700;
}

/* 키보드 초점은 반드시 보인다 — 탭은 버튼이라 Tab 키로 넘나든다(global-template 접근성 넷). */
.c-login__tab:focus-visible {
    outline: 2px solid var(--bg-btn-hover, #101821);
    outline-offset: 2px;
}

/*  SSO 폼의 안내 문구 — **제목 바로 다음 것 하나**만. basic 에는 없는 자리라 여기서 간격만 준다
    (`c-help` 자체의 글꼴·색은 사이트 공통 CSS 몫이다 — 여기서 덮지 않는다).
    ⚠ `.c-login__box > .c-help` 로 넓게 잡으면 **버튼 아래 '비밀번호를 저장하지 않습니다' 줄까지**
      위로 당겨진다 — 인접 형제(`+`)로 첫 줄만 집는다. */
.c-login__tit + .c-help {
    margin: -8px 0 16px;
    text-align: center;
}