@charset "utf-8";
/* ----------------------------------------------------------------------------------------------
 *                 ORANGE-PMI PLATFORM  Version 2.0.0 - Last modified 2026-10-24
 *           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` 와 **같은 480px(2026-10-08 380→480)** 로 맞춘다(두 스킨의 상자 폭이 달라 보이지 않게). */
.c-login__stack {
    width: 100%;
    max-width: 480px;
}

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

/*  회원유형 탭 — **폴더 탭**(2026-10-24 사용자 지시 "기업 상세 탭처럼") — 값은 main ui.css 의 `c-tabs` 와 같다:
    회색 바탕·회색 글자 탭들 아래로 선 하나, 고른 탭만 흰 바탕 + 위 막대(주조색 3px) + 그 아래 선을 덮는다.
    ★ 마크업·동작은 그대로다 — 탭은 <button>, 고른 탭은 `.is-on`(js/tab.js). 그래서 c-tabs 의 class 를 빌리지 않고 같은 값만 쓴다.
    ⚠ 유형 수는 **설치가 정한다**(member_ext_options) — 폭을 고정하지 않고 한 줄에 고르게 나눈다(flex 1 · 상자 폭 안에서 줄어든다).
    ⚠ 가로 스크롤(overflow)을 걸지 않는다 — 고른 탭의 위 막대가 양옆으로 1px 나가 마지막 탭을 고르면 스크롤바가 생겼다(2026-10-24 사용자 지적).
    ※ 10-08 의 "세그먼트 버튼 · 고른 탭 윤곽" 은 이것으로 바뀌었다. 주조색 채움은 여전히 로그인 버튼 하나뿐이다(KRDS Primary 화면당 1회). */
.c-login__tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 18px;
    /* 아래 선 — 테두리가 아니라 **안쪽 그림자**다. 상자 안 바닥에 깔려 탭 아래에 놓인다 — 탭 사이 틈에서만 보이고, 탭 밑은 탭의 아랫변이 그린다
       (고른 탭은 아랫변이 흰색이라 선이 끊긴다) */
    box-shadow: inset 0 -1px 0 var(--border-color-cell, #d6dade);
}

.c-login__tab {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;              /* 상자 폭 안에서 줄어든다 — 넘쳐 스크롤되지 않게 */
    height: var(--btn-lg-height, 48px);
    padding: 0 8px;
    border: 1px solid var(--border-color-cell, #d6dade);
    border-radius: var(--radius-sm, 6px) var(--radius-sm, 6px) 0 0;
    background: var(--bg-thead, #f4f5f6);
    color: var(--color-help, #666);
    font-size: var(--font-size-sm);
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;       /* 유형 이름은 설치가 정한다 — 글자 중간에서 끊기지 않게 */
    cursor: pointer;
    transition: color .15s;
}

.c-login__tab:hover {
    color: var(--color-primary, #003d97);
}

/*  고른 탭 — 흰 바탕 + 위 막대 · **아래 선 없음**(아랫변을 흰색으로 — 아래 내용과 이어진다. c-tabs 의 '선 덮개' 와 같은 일). */
.c-login__tab.is-on {
    background: #fff;
    border-bottom-color: #fff;
    color: var(--color-primary-ink, var(--color-primary, #003d97));
    font-weight: 700;
}
.c-login__tab.is-on::before {
    content: '';
    position: absolute;
    left: -1px;
    right: -1px;
    top: -1px;
    height: 3px;
    background: var(--color-primary, #003d97);
    border-radius: var(--radius-sm, 6px) var(--radius-sm, 6px) 0 0;
}

/* 키보드 초점은 반드시 보인다 — 탭은 버튼이라 Tab 키로 넘나든다(global-template 접근성 넷). 줄 안쪽에 그려 스크롤 상자에 잘리지 않게 */
.c-login__tab:focus-visible {
    outline: 2px solid var(--color-primary, #003d97);
    outline-offset: -2px;
}

/*  폼 제목("로그인" · "<기관> 로그인") — basic 의 --font-size-lg(×1.2)에서 한 단계 키운다(2026-10-24 사용자 지시 "이 글자 좀 크게").
    콘텐츠 기준의 배수라 --content-font 를 따라 같이 움직인다. basic 스킨은 그대로다. */
.c-login__tit {
    font-size: calc(var(--font-size-base) * 1.4);
}

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