@charset "utf-8";
/* ----------------------------------------------------------------------------------------------
 *                 ORANGE-PMI PLATFORM  Version 2.0.0 - Last modified 2026-10-08
 *           Modular Web Architecture · Powered by Orangecommunication · www.oranc.net
 * ----------------------------------------------------------------------------------------------
 * basic 로그인 스킨의 **틀** — 이 스킨에만 있는 구조.
 *
 * style.css (skin/login/basic/asset) — 이 스킨의 form.php 가 `asset_head('skin::style.css')` 로 건다.
 *   셸(layouts/base.php)이 공통 여섯 장 **뒤**에 <head> 로 낸다 → global-template "그 화면에만 필요한 CSS".
 *
 *   ── 여기 없는 것 ────────────────────────────────────────────────────────────
 *   칸·버튼·도움말 모양은 **사이트 CSS 여섯 장**이 갖는다 (`c-input` · `c-btn` · `c-help` · `c-notice`).
 *   이 파일은 "가운데 놓인 상자" 라는 **배치**만 맡는다 — 사이트마다 색·굵기가 다르면 그건 토큰
 *   (variables.css)이 정할 일이지 이 파일이 아니다.
 *
 *   ⚠ 색·치수는 토큰(`var(--…)`)으로 적는다. 값을 여기 박으면 사이트 테마를 바꿔도 로그인만 안 따라온다.
 *     토큰 이름이 사이트마다 없을 수 있어 두 번째 인자(폴백)를 같이 둔다.
 * ---------------------------------------------------------------------------------------------- */

/*  로그인 영역 — 가로는 가운데, 세로는 **위에 붙인다**(2026-10-08 사용자 지시). 전엔 min-height 60vh 안에서 세로 가운데라
    탭을 바꿔 폼 높이가 달라질 때마다(아이디·비밀번호 폼 ↔ 기관 계정 폼) 위아래로 들썩였다.  */
.c-login {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 40px 16px;
}

.c-login__box {
    width: 100%;
    max-width: 480px;   /* 2026-10-08 380→480 (사용자 "너무 좁아") — sso 스킨 .c-login__stack 과 같은 값 */
}

.c-login__tit {
    margin-bottom: 20px;
    font-size: var(--font-size-lg);
    font-weight: 700;
    text-align: center;
    color: var(--c-text, #222);
}

.c-login__field {
    margin-bottom: 16px;
}

/*  KRDS 로그인 정보 입력(2026-10-08) — 레이블은 칸 위에 보인다 · 아이디 형식 단서는 칸 아래 도움말.  */
.c-login__label {
    display: block;
    margin-bottom: 8px;
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--login-ink);
}
.c-login__desc {
    margin: 6px 0 0;
    font-size: var(--font-size-sm);
    color: var(--login-mute);
}
/*  아이디 저장(왼쪽) · 아이디·비밀번호 찾기(오른쪽) 한 줄. 찾기는 링크라 밑줄(KRDS — 밑줄은 링크만).  */
.c-login__opts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 4px 0 0;
    font-size: var(--font-size-base);
}
.c-login a.c-login__find {
    color: var(--login-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.c-login__field .c-input {
    width: 100%;
    height: 46px;
}

/* 비밀번호 칸 — 오른쪽 안쪽에 [보기]. 칸 자체는 c-input 그대로 두고 자리만 비워 준다. */
.c-login__field--pw {
    position: relative;
}

.c-login__field--pw .c-input {
    padding-right: 56px;
}

.c-login__eye {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    padding: 4px 8px;
    border: 0;
    background: none;
    font-size: var(--font-size-sm);
    line-height: 1;
    color: var(--c-muted, #888);
    cursor: pointer;
}

.c-login__eye.is-on {
    color: var(--c-primary, #2f6fed);
    font-weight: 700;
}

.c-login__btns {
    margin-top: 16px;
}

/*  글자 크기는 사이트 토큰(--font-size-base 본문 · -sm 보조 · -lg 제목)만 쓴다 — px 를 박지 않는다(2026-10-08 사용자 지시 "글자크기 기본으로").
    사이트가 본문 크기를 바꾸면 로그인도 따라온다.  */
/*  이 스킨이 쓰는 값 — 사이트 토큰을 여기서 한 번만 받아 아래에서 이름으로 부른다.
    사이트가 선·글자색을 바꾸면 로그인도 따라온다(파일 머리 ⚠ "값을 박지 않는다").  */
.c-login {
    --login-line: var(--border-color-cell, #e0e0e0);
    --login-ink: var(--color-ink, #444);
    --login-mute: var(--color-mute, #999);
}

/*  로그인 버튼 — 이 화면의 **주 동작**(KRDS Primary — 주조색 채움, 화면당 하나). 2026-10-08 KRDS 적용으로 무채색(#101821)에서
    사이트 주조색(--color-primary)으로 바꿨다. 소셜 버튼은 흰 바탕 윤곽이라 채움은 이것 하나다.
    ★ `.c-btn` 은 자기 오른쪽에 여백을 둔다(ui.css) — 한 줄을 꽉 채우는 버튼에선 그만큼 치우친다.  */
.c-login .c-btn--lg.c-login__submit {
    height: 56px;
    line-height: 54px;
    margin-right: 0;
    border-color: var(--color-primary, #003d97);
    border-radius: var(--radius-sm, 6px);
    background: var(--color-primary, #003d97);
    font-size: var(--font-size-base);
    font-weight: 700;
}

.c-login .c-btn--lg.c-login__submit:hover {
    border-color: var(--color-primary-ink, #001b54);
    background: var(--color-primary-ink, #001b54);
}

/* ── 소셜 로그인 — 아이콘 한 칸씩 ────────────────────────────────────────────── */

.c-login__sns {
    margin-top: 28px;
}

/*  가운데 글자 + 좌우 선. 선을 flex 로 늘려 **배경색을 몰라도** 된다 —
    글자 뒤에 바탕색을 깔아 선을 가리는 방식은 그 바탕이 페이지 배경과 같아야만 맞는다.  */
.c-login__sns-tit {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 12px;
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--login-mute);
}

.c-login__sns-tit::before,
.c-login__sns-tit::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--login-line);
}

.c-login__sns-list {
    display: flex;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.c-login__sns-list li {
    flex: 1;   /* 제공자가 둘이든 셋이든 남는 자리를 똑같이 나눈다 */
}

.c-login__sns-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 58px;
    border: 1px solid var(--login-line);
    border-radius: 12px;
    background: #fff;
}

.c-login__sns-btn:hover {
    border-color: var(--login-ink);
}

.c-login__sns-btn img {
    display: block;
    width: 28px;
    height: 28px;
}

/*  그림이 아직 없는 제공자 — 이름 글자로 떨어진다 (form.php 의 social_icon() 분기) */
.c-login__sns-txt {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--login-ink);
}

/* ── 회원가입 ────────────────────────────────────────────────────────────────── */

.c-login__join {
    margin: 24px 0 0;
    text-align: center;
    font-size: var(--font-size-base);
    color: var(--login-mute);
}

.c-login__join a {
    margin-left: 8px;
    color: var(--login-ink);
    font-weight: 700;
    text-decoration: none;
}

.c-login__join a span {
    margin-left: 4px;
}

.c-login__join a:hover {
    text-decoration: underline;
}