@import url('https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/Paperlogy.css');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');

/* 로그인 — 콘솔과 같은 남색·로열 블루로 선다.
   왼쪽은 이 서비스가 하는 일 하나(서명이 끝나면 문서가 봉인된다)를 영수증 한 장으로 보여 주고,
   오른쪽은 로그인 칸만 둔다. 로그인 전후로 서체가 달라지지 않게 콘솔과 같은 글꼴을 쓴다. */

.bs-login-body {
    --lg-ink: #15171c;
    --lg-ink-2: #1d2026;
    --lg-line: #2c2f36;
    --lg-on-dark: #f3f4f6;
    --lg-on-dark-2: #9aa0ab;
    --lg-ac: #2554eb;
    --lg-ac-deep: #1b41c9;
    --lg-ac-on-dark: #7d97ff;
    --lg-seal: #d13a2c;
    --lg-text: #15171c;
    --lg-text-2: #5b606b;
    --lg-text-3: #8b909a;
    --lg-field: #e1e3e8;
    --lg-display: "Paperlogy", "Pretendard Variable", "Pretendard", "Malgun Gothic", sans-serif;

    margin: 0;
    min-height: 100vh;
    background: #fff;
    color: var(--lg-text);
    font-family: "Pretendard Variable", "Pretendard", "Malgun Gothic", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
}

.bs-login-body button,
.bs-login-body input { font-family: inherit; }

/* 한글은 어절 단위로 줄을 바꾼다 — 기본값이면 「필 / 요하지」 처럼 낱말 한가운데서 끊긴다. */
.bs-login-body { word-break: keep-all; overflow-wrap: anywhere; }

.bs-login-body p { text-wrap: pretty; }

.bs-login {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: 100vh;
}

/* ── 왼쪽: 그림 한 장 ─────────────────────────────────────── */
/* 그림은 원래 크기의 절반 이하로만 띄운다 — 판을 덮도록 늘리면 고해상도 화면에서 흐려진다. */

.bs-login__left {
    display: grid;
    place-items: center;
    padding: 48px;
    background: linear-gradient(160deg, #eef2fe 0%, #dfe7fd 100%);
}

.bs-login__art { display: block; width: min(420px, 72%); height: auto; }

/* ── 오른쪽: 로그인 칸 ─────────────────────────────────────── */

.bs-login__right {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
}

.bs-login__panel { width: 100%; max-width: 340px; }

.bs-login__mbrand {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    margin-bottom: 36px;
    font-family: var(--lg-display);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.05em;
    color: var(--lg-text);
    text-decoration: none;
}

.bs-login__mbrand em { font-style: normal; color: var(--lg-ac); }

.bs-login__title {
    margin: 0 0 8px;
    font-family: var(--lg-display);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -.04em;
}

.bs-login__desc { margin: 0 0 28px; font-size: 13.5px; line-height: 1.6; color: var(--lg-text-2); }

.bs-login__form { display: flex; flex-direction: column; gap: 16px; }

.bs-login__group label {
    display: block;
    margin-bottom: 7px;
    font-size: 13px;
    font-weight: 600;
    color: var(--lg-text);
}

.bs-login__input {
    display: block;
    width: 100%;
    height: 44px;
    padding: 0 13px;
    border: 1px solid var(--lg-field);
    border-radius: 8px;
    background: #fff;
    color: var(--lg-text);
    font-size: 14.5px;
    transition: border-color .15s, box-shadow .15s;
}

.bs-login__input::placeholder { color: #a6abb4; }

.bs-login__input:focus {
    outline: none;
    border-color: var(--lg-ac-deep);
    box-shadow: 0 0 0 3px rgba(37, 84, 235, .22);
}

.bs-login__submit {
    height: 46px;
    margin-top: 4px;
    border: 0;
    border-radius: 8px;
    background: #162836;
    color: #fff;
    font-family: var(--lg-display);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s;
}

.bs-login__submit:hover { background: #0d1a24; }

.bs-login__submit:focus-visible { outline: 2px solid var(--lg-ac); outline-offset: 2px; }

.bs-login__err,
.bs-login__note {
    margin: 0 0 20px;
    padding: 11px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
}

.bs-login__err { background: #fdf0ee; border: 1px solid #f3cfc9; color: #9f241c; }
.bs-login__note { background: #f4f5f7; border: 1px solid #e3e5e9; color: var(--lg-text-2); }

/* 서명하러 온 사람에게 — 로그인 칸 아래로 비켜서 조용히. */
.bs-login__aside {
    margin: 32px 0 0;
    padding: 20px 0 0;
    border-top: 1px solid #eceef1;
    font-size: 13px;
    line-height: 1.65;
    color: var(--lg-text-2);
}

.bs-login__aside b { color: var(--lg-text); }

.bs-login__aside p { margin: 4px 0 0; }

.bs-login__foot { margin: 12px 0 0; font-size: 13px; color: var(--lg-text-3); }

@media (max-width: 900px) {
    .bs-login { grid-template-columns: minmax(0, 1fr); }
    .bs-login__left { display: none; }
    .bs-login__right { align-items: flex-start; padding: 40px 20px; }
}

/* 로고 마크(LS 서명 모노그램). 글자 크기를 따라 커지고 작아진다. */
.bs-logomark { width: 1.2em; height: 1.2em; flex: none; border-radius: 24%; }