@charset "utf-8";
/*
 * [09SCM 운영 가이드] 통합 인증 화면(로그인+회원가입) 조각의 스타일시트다. 같은 조각이 세
 *   껍데기(wl_pages/auth.php 의 wl.css 껍데기, 코어
 *   bbs/login.php·bbs/register.php 의 테마 껍데기) 안에서 그려지므로 모든 규칙을 .wla 아래에
 *   가두고 쓸 값(색·선·반경)을 스스로 정한다. 채널색은 도매 #0b3b2e·소매
 *   #f26b1d(.wla.is-retail)이고, 대비 4.5:1 을 못 지키는 자리만 잉크·글자색 변형을 쓴다. 판
 *   전환(.wla-mode-login|signup)과 가입 유형 전환(숨긴 라디오 + 형제 선택자)은 JS 없이 동작한다.
 *   파일 끝에 관리자 문(door=admin) 링크 네 칸 규칙이 있다.
 * ■ 주요 함수·구역
 *   · .wla — 뿌리 상자 — 도매 기본 색
 *     변수(--wla-accent·--wla-on-accent·--wla-accent-text·--wla-brand-1/2)와
 *     폭·글꼴
 *   · .wla.is-retail — 소매 채널 색 덮어쓰기 — 주황 위 잉크 #431407(흰 글씨는 3.05:1 이라
 *     금지)
 *   · .wla-split — 2열 배치(브랜드 소개 + 인증 카드), 900px 이하에서 1열로 접힌다
 *   · .wla-brand — 브랜드 열 — 같은 색상의 최암부 그라데이션 위 흰 글씨
 *   · .wla-tabs — 로그인/회원가입 세그먼트 탭(.wla-tab · .wla-mode-signup
 *     .wla-tab-signup)
 *   · .wla-type-radio — 가입 유형 숨긴 라디오 — display:none 이 아니라 opacity:0(키보드
 *     초점 유지)
 *   · .wla-term-body — 약관 본문 스크롤 상자(.wla-term-text 는 pre-line,
 *     .wla-term-table 은 수집항목 표)
 *   · .wla-guest — 비회원 주문 상자와 개인정보 안내(.wla-guest-privacy)
 *   · .wla-admin-links — 관리자 문(door=admin) 하단 네 갈래 링크 격자(.wla-admin-link
 *     · .wla-admin-title)
 * ■ 고쳐도 되는 것
 *   채널 색 변수 값, 카드·탭 반경과 여백, 약관 상자 높이, 좁은 화면 접힘 폭(900px·480px), 관리자 문 링크
 *     격자 열 수·글자 크기
 * ■ 고치는 법
 *   ① 색을 바꾸려면 .wla 와 .wla.is-retail 의 --wla-* 변수만 고친다 — 바탕으로 쓰는
 *     --wla-accent 와 그 위 잉크 --wla-on-accent 를 한 쌍으로 바꾸고 대비 4.5:1 을 다시
 *     잰다. ② 배치는 .wla-split 의 grid-template-columns 와 @media (max-width:
 *     900px) 블록을 고친다. ③ 관리자 로그인 밑 링크 모양은
 *     .wla-admin-links·.wla-admin-link 를 고친다(링크 목록 자체는
 *     wl_authpage_admin_links 함수 에 있다).
 * ■ 주의
 *   규칙을 .wla 밖으로 꺼내면 테마 CSS(#mb_login·.mbskin·input[type=text])와 부딪혀 코어
 *     로그인 화면이 무너진다. lib/wl/woorilink_authpage.lib.php 의
 *     wl_authpage_asset 함수 가 이 파일을 filemtime 버전으로 걸고, 같은 함수 안에 이 파일과
 *     «일부러 겹쳐 둔» 구조 규칙 한 줄이 있다 — 선택자를 바꾸면 그 한 줄도 글자 그대로 맞춘다. 판 전환이 CSS
 *     만으로 되므로 .wla-mode-* 클래스 이름은 조각 마크업(wl_authpage_render 함수)과 계약이다.
 *     시험: auth_single_page.
 *   · 함께 볼 파일: lib/wl/woorilink_authpage.lib.php · wl_pages/auth.php ·
 *     wl_pages/wl.css
 *   · 시험: php tools/selftest/run.php auth_single_page
 *   · 전체 표: docs/guide/09SCM_운영·수정가이드_20261007.xlsx (python tools/docs/make_ui_edit_guide.py 로 다시 만든다)
 */
/*
 * 통합 인증 화면(로그인 + 회원가입) 스킨.
 *
 * ■ 왜 파일이 따로인가
 * 이 조각은 **서로 다른 세 껍데기 안**에서 그려진다 — `wl_pages/auth.php`(우리링크 껍데기,
 * wl.css), `bbs/login.php`·`bbs/register.php`(영카트 테마 껍데기, default.css + woorilink.css).
 * 테마 CSS 에는 `#mb_login`, `.mbskin`, `input[type=text]` 처럼 넓게 잡는 규칙이 많아,
 * 어느 한쪽에 얹어 두면 다른 쪽에서 모양이 무너진다. 그래서 규칙을 전부 `.wla` 아래로
 * 가두고, 안에서 쓸 값은 이 파일이 스스로 정한다(바깥 변수에 기대지 않는다).
 *
 * ■ 색 — 채널을 지키면서 대비를 지킨다 (D5 · wl.css 머리말과 같은 판단)
 * 도매는 `#0b3b2e`, 소매는 `#f26b1d` 가 확정색이다. 그런데 소매 주황 위의 흰 글씨는
 * 3.05:1 로 **AA 본문 4.5:1 에 미달**한다. 그래서 두 자리를 갈라 놓았다.
 *   · 강조색을 **바탕**으로 쓸 때(버튼·탭)  → 그 위 잉크를 채널별로 고른다.
 *       #431407 on #f26b1d .. 5.14:1 / #ffffff on #0b3b2e .. 12.51:1
 *   · 강조색을 **글자**로 쓸 때(링크·강조)  → 명도를 내린 변형을 쓴다.
 *       #9a3412 on #ffffff .. 7.31:1 / #0b3b2e on #ffffff .. 12.51:1
 *   · 브랜드 열은 **넓은 면적**이라 확정색을 그대로 깔면 화면이 통째로 형광이 된다.
 *     같은 색상(hue)의 최암부를 깔고 흰 글씨를 얹는다.
 *       #ffffff on #7c2d12 .. 9.37:1 / #ffffff on #0b3b2e .. 12.51:1
 * 즉 확정색은 버튼·탭·표식에 그대로 살아 있고, 대비를 못 지키는 자리에서만 명도를 옮긴다.
 *
 * ■ 자바스크립트 없이 동작한다
 * 판 전환은 뿌리 클래스(`wla-mode-login|signup`)가, 가입 유형 전환은 숨긴 라디오 +
 * 형제 선택자(`~`)가 한다. JS 는 클래스를 갈아끼워 새로고침을 없앨 뿐이다.
 */

.wla {
  --wla-accent: #0b3b2e;         /* 확정 채널색 — 바탕으로 쓴다 */
  --wla-on-accent: #ffffff;      /* 그 위에 얹는 잉크 */
  --wla-accent-text: #0b3b2e;    /* 흰 바탕에 글자로 쓸 때 */
  --wla-accent-soft: #e8f2ee;
  --wla-brand-1: #06231b;        /* 브랜드 열 그라데이션 시작 */
  --wla-brand-2: #0b3b2e;        /* 〃 끝 */

  --wla-surface: #ffffff;
  --wla-ink: #1b1f24;
  --wla-ink-sub: #667080;
  --wla-line: #e2e6ec;
  --wla-line-strong: #c9d0da;
  --wla-danger: #b3261e;
  --wla-radius: 14px;

  display: block;
  box-sizing: border-box;
  max-width: 1000px;
  margin: 34px auto 56px;
  padding: 0 16px;
  color: var(--wla-ink);
  font-size: 15px;
  line-height: 1.6;
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", system-ui, -apple-system, sans-serif;
  text-align: left;
  word-break: keep-all;
}

.wla.is-retail {
  --wla-accent: #f26b1d;
  --wla-on-accent: #431407;      /* 주황 위 5.14:1. 흰 글씨는 3.05:1 이라 못 쓴다 */
  --wla-accent-text: #9a3412;
  --wla-accent-soft: #fff1e9;
  --wla-brand-1: #3a1608;
  --wla-brand-2: #7c2d12;
}

.wla *,
.wla *::before,
.wla *::after { box-sizing: border-box; }

.wla a { color: var(--wla-accent-text); text-decoration: none; }
.wla a:hover { text-decoration: underline; }

/* ── 2열: 브랜드 소개 + 인증 카드 ────────────────────────────────
   align-items 기본(stretch)을 쓴다. start 로 두면 짧은 쪽이 위만
   채워 좌·우 박스 하단이 어긋난다(2026-09-10 사용자 지시). */
.wla-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 430px);
  gap: 26px;
  align-items: stretch;
}

.wla-brand {
  padding: 34px 30px;
  border-radius: var(--wla-radius);
  background: linear-gradient(160deg, var(--wla-brand-1), var(--wla-brand-2));
  color: #ffffff;
  height: 100%;
  box-sizing: border-box;
}
/* 브랜드 마크. 테마의 wl_brand_mark() 가 인라인 SVG(.wl-mark)를 뱉고, 테마가 없는
   배포에서만 .wla-mark 빈 사각형으로 떨어진다 — 두 자리를 같은 크기로 맞춰 둔다.
   SVG 는 viewBox 가 -4 만큼 넓다(둥근사각 테두리가 잘리지 않게) → 눈에 보이는 둥근사각은
   상자보다 약 1/7 작다. 그래서 상자를 52px 로 두면 화면상 마크는 헤더와 같은 44px 급이 된다. */
.wla-brand .wl-mark,
.wla-mark {
  display: block;
  width: 52px;
  height: 52px;
  margin-bottom: 16px;
}
.wla-mark {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: var(--wla-accent);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .92);
}
.wla-eyebrow {
  margin: 0 0 6px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .08em;
  color: rgba(255, 255, 255, .78);
}
/* 마크 + 이름 한 줄 (사용자 지시 2026-09-03). 마크의 아래 여백은 이 줄이 대신 갖는다 —
   두 곳이 여백을 가지면 이름만 아래로 밀려 «옆에» 가 «아래에» 로 보인다.
   baseline 이 아니라 center 정렬인 이유: 마크는 SVG 라 글자 baseline 이 없어서
   baseline 정렬을 걸면 브라우저마다 다른 자리에 앉는다. */
.wla-brand-id {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.wla-brand-id .wl-mark,
.wla-brand-id .wla-mark { margin-bottom: 0; flex: 0 0 auto; }
.wla-brand-id .wla-brand-name { margin: 0; }

.wla-brand-name { margin: 0 0 10px; font-size: 27px; line-height: 1.25; font-weight: 800; color: #fff; letter-spacing: .01em; }
/* "어느 몰로 들어왔는가" 한 줄. 제목(플랫폼 이름)보다 작고 흐리게 둔다 — 이 줄만
   요청마다 달라지므로, 크기로도 "여기가 가변부" 임이 드러나야 한다. 본사로 들어오면
   서버가 아예 안 그린다(wl_authpage_mall_line). */
.wla-brand-where {
  margin: -6px 0 10px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, .72);
}
.wla-brand-lead { margin: 0 0 22px; font-size: 15px; color: rgba(255, 255, 255, .9); }
.wla-brand-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.wla-brand-list li {
  position: relative;
  padding: 12px 14px 12px 15px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .1);
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .88);
}
.wla-brand-list b { display: block; margin-bottom: 2px; color: #fff; font-size: 14px; }

/* ── 카드 ─────────────────────────────────────────────────────── */
.wla-card {
  padding: 26px 26px 30px;
  border: 1px solid var(--wla-line);
  border-radius: var(--wla-radius);
  background: var(--wla-surface);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 8px 24px rgba(16, 24, 40, .07);
  height: 100%;
  box-sizing: border-box;
}

/* 탭 — 세그먼트 컨트롤 */
.wla-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  margin-bottom: 22px;
  border-radius: 11px;
  background: #f1f3f6;
}
.wla-tab {
  padding: 11px 0;
  border-radius: 8px;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--wla-ink-sub);
}
.wla-tab:hover { text-decoration: none; color: var(--wla-ink); }
.wla-mode-login  .wla-tab-login,
.wla-mode-signup .wla-tab-signup {
  background: var(--wla-accent);
  color: var(--wla-on-accent);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .16);
}

/* 판 — 서버가 둘 다 그리고 뿌리 클래스가 하나만 보인다 */
.wla-pane { display: none; }
.wla-mode-login  .wla-pane-login  { display: block; }
.wla-mode-signup .wla-pane-signup { display: block; }

/* ── 안내문 ───────────────────────────────────────────────────── */
.wla-notice,
.wla-next {
  margin: 0 0 16px;
  padding: 11px 13px;
  border-radius: 9px;
  font-size: 13px;
  line-height: 1.6;
}
.wla-notice { background: #fff6e5; border: 1px solid #f0d49b; color: #6b4a06; }
/* 관리자 판 로그인 오류 — 버튼 위 한 줄(A-LGN-003·004). hidden 속성이 숨김을 맡는다(display 를 여기서 정하지 않는다). */
.wla-error { margin: 4px 0 10px; padding: 9px 12px; border-radius: 8px; font-size: 13px; line-height: 1.5;
  background: #fdecec; border: 1px solid #f3b9b9; color: #a32020; }
.wla-error[hidden] { display: none; }
.wla-next   { background: var(--wla-accent-soft); border: 1px solid var(--wla-line); color: var(--wla-ink-sub); }
.wla-next b { color: var(--wla-accent-text); word-break: break-all; }

/* ── 입력 ─────────────────────────────────────────────────────── */
.wla-field { margin-bottom: 14px; }
.wla-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--wla-ink);
}
.wla-form input[type=text],
.wla-form input[type=password],
.wla-form input[type=tel] {
  display: block;
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--wla-line-strong);
  border-radius: 10px;
  background: #fff;
  color: var(--wla-ink);
  font-size: 15px;
  font-family: inherit;
}
.wla-form input[type=text]::placeholder,
.wla-form input[type=password]::placeholder,
.wla-form input[type=tel]::placeholder { color: #9aa3b0; }
.wla-form input[type=text]:focus,
.wla-form input[type=password]:focus,
.wla-form input[type=tel]:focus {
  outline: 3px solid var(--wla-accent-soft);
  outline-offset: 0;
  border-color: var(--wla-accent-text);
}

.wla-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin: 14px 0 4px;
}
.wla-quiet { font-size: 13px; color: var(--wla-ink-sub); }
.wla-quiet:hover { color: var(--wla-accent-text); }

.wla-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--wla-ink);
  cursor: pointer;
}
.wla-check input { width: 17px; height: 17px; margin: 1px 0 0; accent-color: var(--wla-accent); flex: none; }

.wla-btn {
  display: block;
  width: 100%;
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid var(--wla-accent);
  border-radius: 10px;
  background: var(--wla-accent);
  color: var(--wla-on-accent);
  font-size: 16px;
  font-weight: 800;
  font-family: inherit;
  line-height: 1.3;
  text-align: center;
  cursor: pointer;
}
.wla-btn:hover { filter: brightness(.94); text-decoration: none; }
.wla-btn:focus-visible { outline: 3px solid var(--wla-accent-text); outline-offset: 2px; }
.wla-btn-ghost {
  background: #fff;
  border-color: var(--wla-line-strong);
  color: var(--wla-ink);
}

.wla-swap {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--wla-line);
  font-size: 13.5px;
  text-align: center;
  color: var(--wla-ink-sub);
}
.wla-swap a { font-weight: 700; margin-left: 4px; }

.wla-social:empty { display: none; }
.wla-social { margin-top: 16px; }

.wla-fine { margin: 10px 0 0; font-size: 12.5px; color: var(--wla-ink-sub); }
.wla-h {
  margin: 24px 0 10px;
  font-size: 14px;
  font-weight: 800;
  color: var(--wla-ink);
}
.wla-h:first-of-type { margin-top: 0; }
.wla-h em {
  margin-left: 6px;
  font-style: normal;
  font-size: 11.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--wla-accent-soft);
  color: var(--wla-accent-text);
}

/* ── 가입 유형 (라디오 + 형제 선택자로 JS 없이 갈린다) ─────────── */
.wla-type-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;                       /* display:none 이면 초점을 못 받아 키보드로 못 고른다 */
  pointer-events: none;
}
.wla-types { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wla-type {
  display: block;
  padding: 14px;
  border: 1px solid var(--wla-line-strong);
  border-radius: 11px;
  background: #fff;
  cursor: pointer;
}
.wla-type b { display: block; margin-bottom: 4px; font-size: 14.5px; }
.wla-type span { display: block; font-size: 12.5px; line-height: 1.5; color: var(--wla-ink-sub); }
#wla_type_retail:checked ~ .wla-types .wla-type-retail,
#wla_type_biz:checked    ~ .wla-types .wla-type-biz {
  border-color: var(--wla-accent);
  background: var(--wla-accent-soft);
  box-shadow: inset 0 0 0 1px var(--wla-accent);
}
#wla_type_retail:focus-visible ~ .wla-types .wla-type-retail,
#wla_type_biz:focus-visible    ~ .wla-types .wla-type-biz {
  outline: 3px solid var(--wla-accent-text);
  outline-offset: 2px;
}

/* 안내문 · 수집항목의 사업자 행 — 고른 유형만 보인다.
   번호 띠(`.wla-steps`)는 2026-08-25 사용자 지시로 화면과 함께 걷어냈다. */
.wla-guide,
.wla-privacy-biz,
.wla-bizextra { display: none; }
#wla_type_retail:checked ~ .wla-guide-retail,
#wla_type_biz:checked    ~ .wla-guide-biz { display: block; }
#wla_type_biz:checked ~ .wla-term .wla-privacy-biz { display: table-row; }

/* 사업자번호·페이앱 선택 입력(지시 항목 12·13). 안내문과 **같은 형제 선택자**를 쓴다 —
   JS 로 토글하면 스크립트가 꺼진 브라우저에서 일반회원에게도 사업자 칸이 보인다.
   `display:none` 인 입력은 제출되긴 하지만 값이 비어 있으므로(사용자가 못 채운다)
   서버 쪽 «빈 값 = 안 넣음» 규칙과 그대로 맞는다. */
#wla_type_biz:checked ~ .wla-bizextra { display: block; }
.wla-bizextra { margin-top: 16px; }

.wla-guide {
  margin: 14px 0 0;
  padding: 12px 13px;
  border: 1px solid var(--wla-line);
  border-left: 3px solid var(--wla-accent);
  border-radius: 9px;
  background: #fafbfc;
  font-size: 13px;
  line-height: 1.65;
  color: var(--wla-ink-sub);
}
.wla-guide b { color: var(--wla-ink); }

/* ── 약관 ─────────────────────────────────────────────────────── */
.wla-term {
  margin-bottom: 12px;
  border: 1px solid var(--wla-line-strong);
  border-radius: 11px;
  overflow: hidden;
}
.wla-term-head {
  padding: 10px 13px;
  border-bottom: 1px solid var(--wla-line);
  background: #f7f8fa;
  font-size: 13px;
  font-weight: 700;
}
.wla-term-body {
  max-height: 150px;
  overflow-y: auto;
  padding: 12px 13px;
  font-size: 12.5px;
  line-height: 1.7;
  color: #4a5260;
}
/* 약관 본문은 get_text() 가 줄바꿈을 문자 그대로 남긴다(html 인자 0) — 그래서 pre-line.
   같은 규칙을 수집항목 표에 걸면 태그 사이 공백이 빈 줄로 찍힌다. 그래서 갈라 둔다. */
.wla-term-text  { white-space: pre-line; }
.wla-term-table { max-height: 210px; }
.wla-term .wla-check {
  padding: 11px 13px;
  border-top: 1px solid var(--wla-line);
  background: #fff;
}
.wla-check-all {
  margin-top: 14px;
  padding: 12px 13px;
  border: 1px solid var(--wla-accent);
  border-radius: 10px;
  background: var(--wla-accent-soft);
  font-weight: 700;
}

.wla-privacy { width: 100%; border-collapse: collapse; white-space: normal; }
.wla-privacy caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.wla-privacy th,
.wla-privacy td {
  padding: 7px 8px;
  border: 1px solid var(--wla-line);
  font-size: 11.5px;
  line-height: 1.5;
  text-align: left;
  vertical-align: top;
}
.wla-privacy th { background: #f7f8fa; font-weight: 700; white-space: nowrap; }

/* ── 비회원 상자 ──────────────────────────────────────────────── */
.wla-guest {
  margin-top: 22px;
  padding: 22px 24px 26px;
  border: 1px solid var(--wla-line);
  border-radius: var(--wla-radius);
  background: var(--wla-surface);
}
.wla-guest-privacy {
  max-height: 150px;
  overflow-y: auto;
  margin: 10px 0 14px;
  padding: 12px 13px;
  border: 1px solid var(--wla-line);
  border-radius: 9px;
  background: #fafbfc;
  font-size: 12.5px;
  line-height: 1.7;
  color: #4a5260;
}

/* ── 좁은 화면 ────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .wla { margin: 18px auto 40px; }
  .wla-split { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .wla-brand { padding: 24px 20px; }
  .wla-brand-name { font-size: 23px; }
  .wla-brand-list { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
  .wla-card { padding: 20px 18px 24px; }
  .wla-types { grid-template-columns: minmax(0, 1fr); }
  .wla-guest { padding: 18px 18px 22px; }
}

/* 아주 좁은 화면에서는 수집항목 표를 세로로 접는다 — 3열은 320px 에서 읽히지 않는다 */
@media (max-width: 480px) {
  .wla-privacy thead { display: none; }
  .wla-privacy tr { display: block; border-bottom: 1px solid var(--wla-line); }
  .wla-privacy td { display: block; border: 0; padding: 4px 2px; }
  .wla-privacy td:first-child { font-weight: 700; color: var(--wla-ink); }
}

/* ── 관리자 문(door=admin) — IA v1.6 7~11행 ─────────────────────────
   로그인 밑에 네 갈래(아이디 찾기 · 비밀번호 찾기 · 가맹점 가입신청 · 솔루션 도입신청)만 둔다.
   손님 판의 [회원가입] 탭 자리에 제목 한 줄이 선다. */
.wla-admin-title { margin: 0 0 22px; font-size: 20px; font-weight: 700; color: var(--wla-ink); }
.wla-admin-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--wla-line);
}
.wla-admin-link {
  display: block;
  padding: 10px 8px;
  border: 1px solid var(--wla-line);
  border-radius: 8px;
  text-align: center;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--wla-ink-sub);
}
.wla-admin-link:hover { text-decoration: none; color: var(--wla-accent-text); border-color: var(--wla-accent); }

/* 작업지시 #10·#28 — 로그인 판은 흰 카드만 둔다. 왼쪽 소개 열과 분홍 복귀 안내는 화면에서 뺀다.
   마크업은 가입 판·기존 시험이 읽으므로 숨기기만 한다. 관리자 문은 소매 주황이 아니라 파랑이다. */
.wla.wla-mode-login .wla-brand,
.wla.wla-mode-login .wla-next { display: none; }
.wla.wla-mode-login { max-width: 460px; }
.wla.wla-mode-login .wla-split { display: block; }
.wla.wla-admin {
  --wla-accent: #1d4ed8;
  --wla-on-accent: #ffffff;
  --wla-accent-text: #1d4ed8;
  --wla-accent-soft: #eff4ff;
  --wla-brand-1: #1e3a8a;
  --wla-brand-2: #1d4ed8;
}