/* ==================================================================
   simble.basic 아웃로그인(로그인 디자인) 12종 — v0.3.2a93
   로그인·회원가입·정보수정·비밀번호·마이페이지 공통.
   구조: .sb-main--member > .sb-memberpage > .sblg.sblg--page.sblg--<id>
         > [.sblg__side(분할형)] + .sblg__panel > .sblg__card[.sblg__card--wide]
   규칙(a90):
     g1·s1·s2·s3  전체 배경 흰색, 우측 카드 그림자 없음(분할형)
     g2            헤더~푸터 사이를 녹색 그라데이션으로 가득
     g3            헤더~푸터 사이를 핑크톤 그라데이션으로 가득
     m1·m3         전체·카드 모두 흰색, 카드 테두리 없음
     m2            전체·카드 모두 소프트 그레이, 카드 테두리 없음
     f1·f2·f3      헤더~푸터 사이를 각 그라데이션으로 가득
   ================================================================== */

/* ── 회원 페이지 영역 (a91) ──
   body = 세로 플렉스(헤더·본문·푸터) → 내용이 짧으면 헤더와 푸터가 한 화면에, 길면 푸터는 스크롤.
   .sblg       = 헤더~푸터 사이를 채우는 배경층(디자인별 그라데이션/흰색/회색), 상하 여백 32px 동일
   .sblg__body = 본문(.sb-container) 너비 안에 놓이는 내용 블록 — 좌측 이미지 + 우측 폼(분할형) 또는 폼만
   ─ g2·g3·m1·m2·m3·f1·f2·f3 : 카드가 가로 가운데 · 세로 중간
   ─ g1·s1·s2·s3(.sblg--split, 로그인·마이페이지) : 블록이 상하 여백 동일하게 영역을 채움, 좌우 여백 보임
   ─ 긴 페이지(.sblg--wide, 회원가입·정보수정) : 좌측 이미지 없음, 높이 자동(푸터는 스크롤) */
.sb-main--member { display: flex; flex-direction: column; }
.sb-memberpage { flex: 1; display: flex; flex-direction: column; }
.sblg { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 100%; margin: 0; padding: 24px 20px; box-sizing: border-box; background: #fff; border: 0; border-radius: 0; box-shadow: none; }
.sblg__body { width: 100%; max-width: calc(var(--sb-container, 1280px) - 40px); display: flex; align-items: stretch; justify-content: center; box-sizing: border-box; }
.sblg--split .sblg__body { flex: 1; min-height: 420px; border-radius: 18px; overflow: hidden; }
.sblg--wide .sblg__body { flex: 0 0 auto; }
/* a93: 마이페이지 — 세로 위쪽부터, 헤더와 30px · 푸터와 최소 30px */
.sblg--top { justify-content: flex-start; padding-top: 30px; padding-bottom: 30px; }
.sblg--page.sblg--top .sblg__panel { padding-top: 0; padding-bottom: 0; }
.sblg__panel { flex: 1; display: flex; align-items: center; justify-content: center; padding: 16px 24px; min-width: 0; }
.sblg--wide .sblg__panel { padding: 8px 0; }
.sblg__card { width: 100%; max-width: 380px; background: transparent; border: 0; box-shadow: none; }
.sblg__card--wide { max-width: 860px; }
.sblg__logo { margin: 0 0 10px; }
.sblg__logo img { max-height: 44px; max-width: 220px; }
.sblg__title { margin: 0 0 4px; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; color: #0f172a; }
.sblg__sub { margin: 0 0 16px; font-size: 13.5px; color: #64748b; }
.sblg__field { margin-bottom: 12px; }
.sblg__field label { display: block; font-size: 12.5px; font-weight: 700; color: #334155; margin-bottom: 5px; }
.sblg__field input { width: 100%; box-sizing: border-box; height: 46px; padding: 0 14px; border: 1px solid #dbe2ea; border-radius: 10px; font-size: 15px; background: #fff; color: #0f172a; transition: border-color .15s, box-shadow .15s; }
.sblg__field input[readonly] { background: #f1f5f9; color: #64748b; }
.sblg__field input:focus { outline: none; border-color: #3b813a; box-shadow: 0 0 0 3px rgba(59,129,58,.15); }
.sblg__opts { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 16px; font-size: 13px; color: #475569; }
.sblg__auto { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.sblg__lost { color: #3b813a; text-decoration: none; }
.sblg__lost:hover { text-decoration: underline; }
.sblg__submit { width: 100%; height: 48px; border: 0; border-radius: 10px; background: #3b813a; color: #fff; font-size: 16px; font-weight: 800; cursor: pointer; transition: filter .15s, transform .05s; }
.sblg__submit:hover { filter: brightness(1.08); }
.sblg__submit:active { transform: translateY(1px); }
.sblg__links { margin-top: 16px; text-align: center; font-size: 13px; color: #94a3b8; }
.sblg__links a { color: #475569; text-decoration: none; }
.sblg__links a:hover { text-decoration: underline; }

/* ── 그누보드 기본 회원 스킨 마크업(회원가입·비밀번호 찾기 등)을 카드 안에 맞춤 ── */
.sblg__card .register { margin: 0; }
.sblg__card .mbskin { margin: 0 auto; width: auto; max-width: 420px; }
.sblg__card .mbskin h1 { margin: 0 0 16px; font-size: 1.3em; }
.sblg__card .new_win { margin: 0; }
.sblg__card .new_win .new_win_con { margin: 0 0 12px; }
.sblg__card .new_win h1 { margin: 0 0 12px; font-size: 1.3em; }
.sblg__card #fregister section, .sblg__card #register_form, .sblg__card #fregister_chkall { background: #fff; }
.sblg__card #register_form { border: 1px solid #dde7e9; border-radius: 6px; }
.sblg__card .btn_confirm .btn_submit, .sblg__card .btn_submit, .sblg__card #btn_submit { background: #3b813a; border-color: #3b813a; color: #fff; border-radius: 8px; }
.sblg__card .btn_confirm .btn_close, .sblg__card .btn_cancel { border-radius: 8px; }

/* 회원가입·정보수정 폼 내부(그누보드 표준 마크업) 다듬기 */
.sblg__card--wide .frm_input, .sblg__card--wide .frm_file { height: 42px; padding: 0 12px; border: 1px solid #dbe2ea; border-radius: 8px; font-size: 14px; background: #fff; box-sizing: border-box; }
.sblg__card--wide .frm_input:focus { outline: none; border-color: #3b813a; box-shadow: 0 0 0 3px rgba(59,129,58,.15); }
/* a95: 그누보드 기본 마크업의 size="70" 같은 속성 때문에 390px 화면에서 입력칸이 화면 밖으로 나가 가로 스크롤이 생기던 문제 */
.sblg__card--wide .frm_input, .sblg__card--wide .frm_file, .sblg__card--wide select, .sblg__card--wide textarea { max-width: 100%; }
.sblg__card--wide #register_form h2, .sblg__card--wide #fregister h2 { font-size: 15px; font-weight: 800; color: #0f172a; }
.sblg__card--wide #register_form .register_form_inner { padding: 0 20px 10px; }
.sblg__card--wide #register_form li { line-height: 1.6; }
.sblg__card--wide #fregister section, .sblg__card--wide #register_form { border-radius: 10px; overflow: hidden; }
.sblg__card--wide .btn_confirm { margin-top: 18px; }
.sblg__card--wide .btn_confirm .btn_submit { height: 48px !important; border-radius: 10px; font-size: 15px; }
.sblg__card--wide .btn_confirm .btn_close, .sblg__card--wide .btn_confirm .btn_cancel { height: 48px !important; line-height: 48px; border-radius: 10px; }

/* ── 분할형 공통(g1·s1·s2·s3): 왼쪽 브랜드 패널 + 오른쪽 폼, 흰 배경·그림자 없음 ── */
.sblg__side { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.sblg__side-inner { position: relative; z-index: 2; text-align: center; padding: 36px; }
.sblg__side-logo { max-height: 48px; filter: brightness(0) invert(1); opacity: .95; }
.sblg__side-title { color: #fff; font-size: 22px; font-weight: 800; margin: 14px 0 6px; }
.sblg__side-sub { color: rgba(255,255,255,.85); font-size: 13.5px; margin: 0; }
.sblg__blob { position: absolute; border-radius: 50%; opacity: .25; background: #fff; }
.sblg__blob--1 { width: 220px; height: 220px; top: -60px; left: -60px; }
.sblg__blob--2 { width: 140px; height: 140px; bottom: 10%; right: -40px; }
.sblg__blob--3 { width: 70px; height: 70px; bottom: -20px; left: 30%; }
.sblg--wide .sblg__side { display: none; }
.sblg--split .sblg__side { flex: 0 0 50%; }
.sblg--split.sblg--s2 .sblg__side { flex: 0 0 40%; }

/* ── 1. 그라데이션 & 일러스트 ── */
/* g1 퍼플 일러스트: 전체 흰 배경, 좌측 보라 패널, 우측 카드 그림자 없음 */
.sblg--g1 { background: #fff; }
.sblg--g1 .sblg__side { background: linear-gradient(135deg, #6d5df0 0%, #8b7cf6 55%, #4f9cf0 100%); }
.sblg--g1 .sblg__field input:focus { border-color: #6d5df0; box-shadow: 0 0 0 3px rgba(109,93,240,.18); }
.sblg--g1 .sblg__submit, .sblg--g1 .sblg__card .btn_submit { background: linear-gradient(135deg, #6d5df0, #4f9cf0); border-color: transparent; }
/* g2 심블 그린 글로우: 헤더~푸터 사이 녹색 그라데이션 가득 */
.sblg--g2 { background: linear-gradient(140deg, #d9f3db 0%, #a9dfb0 45%, #5cb85f 100%); }
.sblg--g2 .sblg__card { background: #fff; border-radius: 18px; padding: 28px 32px; box-shadow: 0 16px 48px rgba(27,94,32,.22); }
/* g3 선셋 웨이브: 헤더~푸터 사이 핑크톤 그라데이션 가득 */
.sblg--g3 { background: linear-gradient(150deg, #ffe3ec 0%, #fbb6cf 45%, #f27da6 100%); position: relative; }
.sblg--g3 .sblg__card { background: #fff; border-radius: 18px; padding: 28px 32px; box-shadow: 0 16px 48px rgba(242,125,166,.3); position: relative; z-index: 1; }
.sblg--g3 .sblg__submit, .sblg--g3 .sblg__card .btn_submit { background: linear-gradient(135deg, #f58fb2, #ee6a99); border-color: transparent; }
.sblg--g3 .sblg__field input:focus { border-color: #f27da6; box-shadow: 0 0 0 3px rgba(242,125,166,.2); }
.sblg--g3 .sblg__lost { color: #e05a8c; }
.sblg--g3::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 120px;
  background: radial-gradient(60% 120% at 50% 100%, rgba(255,255,255,.45), transparent 70%); pointer-events: none; }

/* ── 2. 미니멀리즘 ── */
/* m1 퓨어 화이트: 전체·카드 흰색, 테두리 없음 */
.sblg--m1, .sblg--m1 .sblg__card { background: #fff; border: 0; box-shadow: none; }
/* m2 소프트 그레이: 전체·카드 같은 소프트 그레이, 테두리 없음 */
.sblg--m2, .sblg--m2 .sblg__card { background: #f4f6f8; border: 0; box-shadow: none; }
.sblg--m2 .sblg__field input { background: #fff; border-color: #e3e8ee; }
.sblg--m2 .sblg__card #register_form, .sblg--m2 .sblg__card #fregister section { border-color: #e3e8ee; }
/* m3 모노 라인: 전체·카드 흰색, 테두리 없음, 밑줄형 입력칸 */
.sblg--m3, .sblg--m3 .sblg__card { background: #fff; border: 0; box-shadow: none; border-radius: 0; }
.sblg--m3 .sblg__title { letter-spacing: 0; }
.sblg--m3 .sblg__field input { border: 0; border-bottom: 2px solid #111; border-radius: 0; padding-left: 2px; }
.sblg--m3 .sblg__field input:focus { box-shadow: none; border-color: #111; }
.sblg--m3 .sblg__submit, .sblg--m3 .sblg__card .btn_submit { background: #111; border-color: #111; border-radius: 0; }
.sblg--m3 .sblg__lost { color: #111; }

/* ── 3. 스플릿 스크린: 전체 흰 배경, 우측 카드 그림자 없음 ── */
.sblg--s1, .sblg--s2, .sblg--s3 { background: #fff; }
.sblg--s1.sblg--split .sblg__body { border: 1px solid #e2e8f0; }
.sblg--s1 .sblg__side { background: linear-gradient(135deg, #16324f 0%, #2d6187 50%, #3b813a 100%); }
.sblg--s1 .sblg__side::before { content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.14) 2px, transparent 2px); background-size: 26px 26px; }
.sblg--s2 .sblg__side { background: #162032; }
.sblg--s2 .sblg__blob { background: #3b813a; opacity: .35; }
.sblg--s3 .sblg__side { background: linear-gradient(135deg, #3b813a, #2f9e44); clip-path: ellipse(100% 78% at 0% 50%); margin-right: -56px; }
.sblg--s3 .sblg__panel { padding-left: 76px; }

/* ── 4. 글래스모피즘 & 뉴모피즘: 헤더~푸터 사이 그라데이션 가득 ── */
.sblg--f1 { background: linear-gradient(135deg, #8ec5fc 0%, #e0c3fc 100%); }
.sblg--f1 .sblg__card { background: rgba(255,255,255,.35); border: 1px solid rgba(255,255,255,.55);
  border-radius: 18px; padding: 28px 32px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 8px 32px rgba(31,38,135,.2); }
.sblg--f1 .sblg__field input { background: rgba(255,255,255,.6); border-color: rgba(255,255,255,.7); }
.sblg--f2 { background: linear-gradient(135deg, #0f172a 0%, #273a5e 100%); }
.sblg--f2 .sblg__card { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
  border-radius: 18px; padding: 28px 32px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: #e2e8f0; }
.sblg--f2 .sblg__title { color: #fff; }
.sblg--f2 .sblg__sub, .sblg--f2 .sblg__opts, .sblg--f2 .sblg__links, .sblg--f2 .sblg__links a, .sblg--f2 .sblg__field label { color: #cbd5e1; }
.sblg--f2 .sblg__field input { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.2); color: #fff; }
.sblg--f2 .sblg__field input[readonly] { background: rgba(255,255,255,.06); color: #cbd5e1; }
.sblg--f2 .sblg__field input::placeholder { color: #94a3b8; }
.sblg--f2 .sblg__lost { color: #86efac; }
.sblg--f2 .sblg__submit { background: #2f9e44; }
.sblg--f2 .sblg__card #fregister section, .sblg--f2 .sblg__card #register_form, .sblg--f2 .sblg__card #fregister_chkall,
.sblg--f2 .sblg__card .mbskin, .sblg--f2 .sblg__card .new_win { color: #0f172a; }
.sblg--f2 .sblg__card .mbskin, .sblg--f2 .sblg__card .new_win_con, .sblg--f2 .sblg__card #reg_result { background: #fff; border-radius: 12px; padding: 16px; }
.sblg--f3 { background: #e8ecf1; }
.sblg--f3 .sblg__card { background: #e8ecf1; border-radius: 22px; padding: 28px 32px;
  box-shadow: 10px 10px 24px #c9cfd6, -10px -10px 24px #ffffff; }
.sblg--f3 .sblg__field input { background: #e8ecf1; border: 0;
  box-shadow: inset 5px 5px 10px #c9cfd6, inset -5px -5px 10px #ffffff; }
.sblg--f3 .sblg__field input:focus { box-shadow: inset 5px 5px 10px #c9cfd6, inset -5px -5px 10px #ffffff, 0 0 0 2px rgba(59,129,58,.25); }
.sblg--f3 .sblg__submit { background: #e8ecf1; color: #3b813a;
  box-shadow: 6px 6px 14px #c9cfd6, -6px -6px 14px #ffffff; }
.sblg--f3 .sblg__submit:active { box-shadow: inset 5px 5px 10px #c9cfd6, inset -5px -5px 10px #ffffff; transform: none; }

/* ── 마이페이지 (a92): 제목 100% + 좌 30% / 우 70% ── */
.sblg__card--full { max-width: none; }
.sbmp { width: 100%; color: #0f172a; }
.sbmp__title { margin: 0 0 14px; font-size: 24px; font-weight: 800; letter-spacing: -0.02em; }
.sbmp__title small { margin-left: 6px; font-size: 13px; font-weight: 500; color: #94a3b8; }
.sbmp__cols { display: grid; grid-template-columns: 30% 1fr; gap: 24px; align-items: start; }
.sbmp__card { background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; }
/* 좌측 프로필 카드 */
.sbmp__profile { position: relative; overflow: hidden; padding: 0 20px 18px; text-align: center; }
.sbmp__banner { position: relative; height: 76px; margin: 0 -20px 0; overflow: hidden; background: linear-gradient(135deg, #3b813a, #2f9e44); }
.sbmp__banner .sblg__blob { background: #fff; opacity: .22; }
.sbmp__banner .sblg__blob--1 { width: 120px; height: 120px; top: -56px; left: -28px; }
.sbmp__banner .sblg__blob--2 { width: 70px; height: 70px; bottom: -34px; right: 18px; }
.sbmp__avatar { position: relative; width: 84px; height: 84px; margin: -42px auto 10px; border-radius: 50%; overflow: visible; }
.sbmp__avatar .profile_img { display: block; }
.sbmp__avatar img { width: 84px !important; height: 84px !important; border-radius: 50%; object-fit: cover; border: 3px solid #fff; background: #e5e7eb; display: block; box-sizing: border-box; }
.sbmp__avatar-edit { position: absolute; right: -2px; bottom: 2px; width: 26px; height: 26px; border-radius: 50%; background: var(--mp-accent, #111827); color: #fff; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; }
.sbmp__avatar-edit svg { width: 14px; height: 14px; }
.sbmp__name { margin: 0 0 14px; font-size: 17px; font-weight: 800; }
.sbmp__lv { display: inline-block; margin-left: 4px; padding: 2px 8px; font-size: 11px; font-weight: 700; color: #fff; background: var(--mp-accent, #111827); border-radius: 999px; vertical-align: middle; }
.sbmp__counts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 12px; padding: 12px 0; list-style: none; border-top: 1px solid #eef1f5; border-bottom: 1px solid #eef1f5; }
.sbmp__counts a { display: flex; align-items: center; gap: 10px; padding: 6px 4px; text-decoration: none; color: #0f172a; border-radius: 10px; text-align: left; }
.sbmp__counts a:hover { background: var(--mp-soft, #f3f4f6); }
.sbmp__bigic { flex: 0 0 48px; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; box-shadow: 0 1px 3px rgba(15,23,42,.06); }
.sbmp__bigic svg { width: 34px; height: 34px; }
.sbmp__cnt { display: flex; flex-direction: column; min-width: 0; }
.sbmp__cnt small { font-size: 11.5px; color: #6b7280; line-height: 1.2; }
.sbmp__cnt strong { font-size: 22px; line-height: 1.15; color: #0f172a; }
.sbmp__ic { display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; border-radius: 6px; background: var(--mp-accent, #3b813a); color: #fff; }
.sbmp__ic svg { width: 13px; height: 13px; fill: #fff; }
.sbmp__menu { display: flex; flex-direction: column; gap: 2px; text-align: left; }
.sbmp__menu a { display: flex; align-items: center; justify-content: space-between; padding: 9px 16px; border-radius: 10px; color: #0f172a; font-weight: 700; font-size: 14px; text-decoration: none; }
.sbmp__menu a:hover { background: var(--mp-soft, #f3f4f6); }
.sbmp__menu a.is-active { background: var(--mp-soft, #eef6ff); color: var(--mp-accent, #0f172a); box-shadow: inset 3px 0 0 var(--mp-accent, #0f172a); }
.sbmp__badge { font-style: normal; font-size: 11px; padding: 1px 7px; border-radius: 999px; background: #ef4444; color: #fff; }
/* 우측 */
.sbmp__sec { margin: 0 0 12px; font-size: 16px; font-weight: 800; }
.sbmp__toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px; margin: 0 0 20px; background: var(--mp-soft, #f8fafc); border-color: var(--mp-line, #e5e7eb); }
.sbmp__btn { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; font-size: 13.5px; font-weight: 700; color: #0f172a; background: #fff; border: 1px solid #dbe2ea; border-radius: 9px; text-decoration: none; cursor: pointer; }
.sbmp__btn svg { width: 16px; height: 16px; }
.sbmp__btn--ico { width: 38px; padding: 0; justify-content: center; }
.sbmp__btn--primary { background: var(--mp-accent, #3b813a); border-color: var(--mp-accent, #3b813a); color: var(--mp-accent-text, #fff); }
.sbmp__btn--primary:hover { filter: brightness(1.08); background: var(--mp-accent, #3b813a); }
/* 헤더 우측 상단 관리자 아이콘과 동일 디자인: 둥근 사각 테두리 + 호버 색 반전 */
.sbmp__btn--adm { width: 38px; padding: 0; justify-content: center; color: var(--mp-accent, #3b813a); border: 1.5px solid var(--mp-accent, #3b813a); background: #fff; }
.sbmp__btn--adm svg { width: 18px; height: 18px; }
.sbmp__btn--adm img { width: 24px; height: auto; display: block; }
.sbmp__btn--adm:hover { background: var(--mp-accent, #3b813a); color: #fff; }
.sbmp__btn--adm.sbmp__btn--g5:hover { background: var(--mp-soft, #f3f4f6); }
.sbmp__btn--danger { color: #b91c1c; margin-left: auto; }
.sbmp__btn:hover { background: #f3f4f6; }
.sbmp__copied { font-size: 12.5px; color: #15803d; font-weight: 700; }
.sbmp__info { display: grid; grid-template-columns: 1fr 1fr; margin: 0; }
.sbmp__info > div { padding: 12px 4px; border-bottom: 1px solid #e5e7eb; }
.sbmp__info > div:nth-child(-n+2) { border-top: 1px solid #e5e7eb; }
.sbmp__info dt { font-size: 12px; color: #94a3b8; margin: 0 0 4px; }
.sbmp__info dd { margin: 0; font-size: 14.5px; }
.sbmp__info dd a { color: #0f172a; }
/* 목록 */
.sbmp__list { width: 100%; border-collapse: collapse; font-size: 13.5px; border-top: 2px solid var(--mp-accent, #111827); }
.sbmp__list th { padding: 11px 8px; font-size: 12.5px; color: #6b7280; font-weight: 700; border-bottom: 1px solid #e5e7eb; background: var(--mp-soft, #f8fafc); }
.sbmp__list td { padding: 11px 8px; border-bottom: 1px solid #eef1f5; text-align: center; }
.sbmp__list .num { width: 56px; color: #94a3b8; }
.sbmp__list .bo { width: 120px; color: #475569; }
.sbmp__list .date { width: 110px; color: #64748b; font-size: 12.5px; }
.sbmp__list .st { width: 80px; }
.sbmp__list td.subj { text-align: left; }
.sbmp__list td.subj a { color: #0f172a; text-decoration: none; }
.sbmp__list td.subj a:hover { text-decoration: underline; }
.sbmp__list td.empty { padding: 40px 8px; color: #94a3b8; }
.sbmp__list .muted { color: #94a3b8; }
.sbmp__list tr.is-unread td.subj a { font-weight: 700; }
.sbmp__cmt { font-style: normal; color: var(--mp-accent, #3b813a); font-size: 12px; }
.sbmp__done { color: #15803d; font-weight: 700; } .sbmp__wait { color: #b45309; font-weight: 700; }
.sbmp__pager { display: flex; justify-content: center; gap: 4px; margin: 16px 0 0; }
.sbmp__pager a, .sbmp__pager strong { min-width: 32px; height: 32px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid #e5e7eb; color: #475569; text-decoration: none; font-size: 13px; }
.sbmp__pager strong { background: var(--mp-accent, #111827); border-color: var(--mp-accent, #111827); color: var(--mp-accent-text, #fff); }
.sbmp__foot { margin: 14px 0 0; text-align: right; }
/* a93: 선택한 아웃로그인 디자인의 색을 마이페이지 전체(선택 메뉴·툴바·버튼·표·페이저)에 통일 적용 */
.sblg--g1 { --mp-accent: #6d5df0; --mp-soft: #efedfd; --mp-line: #ddd8fb; }
.sblg--g2 { --mp-accent: #2f7d32; --mp-soft: #e8f5e9; --mp-line: #cfe8d2; }
.sblg--g3 { --mp-accent: #e5588b; --mp-soft: #fde8f0; --mp-line: #f9cfdf; }
.sblg--m1 { --mp-accent: #111827; --mp-soft: #f1f5f9; --mp-line: #e2e8f0; }
.sblg--m2 { --mp-accent: #374151; --mp-soft: #e5e7eb; --mp-line: #d1d5db; }
.sblg--m3 { --mp-accent: #111111; --mp-soft: #f2f2f2; --mp-line: #111111; }
.sblg--s1 { --mp-accent: #2d6187; --mp-soft: #e6eff6; --mp-line: #cdddea; }
.sblg--s2 { --mp-accent: #162032; --mp-soft: #e8ecf3; --mp-line: #d3d9e4; }
.sblg--s3 { --mp-accent: #2f9e44; --mp-soft: #e6f6ea; --mp-line: #c9ebd1; }
.sblg--f1 { --mp-accent: #5b7fe8; --mp-soft: #eaf0fd; --mp-line: #cfdcfb; }
.sblg--f2 { --mp-accent: #8b7cf6; --mp-soft: rgba(139,124,246,.18); --mp-line: rgba(255,255,255,.16); }
.sblg--f3 { --mp-accent: #3b813a; --mp-soft: #dfe6ee; --mp-line: #cfd6df; }
/* 테마별 배너색(좌측 이미지를 프로필 배너로 편집) · 강조색 */
.sblg--g1 .sbmp__banner { background: linear-gradient(135deg, #6d5df0 0%, #8b7cf6 55%, #4f9cf0 100%); }
.sblg--g2 .sbmp__banner { background: linear-gradient(135deg, #5cb85f, #2f7d32); }
.sblg--g3 .sbmp__banner { background: linear-gradient(135deg, #f58fb2, #ee6a99); }
.sblg--m1 .sbmp__banner, .sblg--m3 .sbmp__banner { background: #111827; }
.sblg--m2 .sbmp__banner { background: linear-gradient(135deg, #6b7280, #374151); }
.sblg--m2 .sbmp__card { border-color: #e3e8ee; }
.sblg--m3 .sbmp__card, .sblg--m3 .sbmp__btn, .sblg--m3 .sbmp__menu a, .sblg--m3 .sbmp__pager a, .sblg--m3 .sbmp__pager strong { border-radius: 0; }
.sblg--s1 .sbmp__banner { background: linear-gradient(135deg, #16324f 0%, #2d6187 50%, #3b813a 100%); }
.sblg--s1 .sbmp__banner::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.14) 2px, transparent 2px); background-size: 22px 22px; }
.sblg--s2 .sbmp__banner { background: #162032; }
.sblg--s2 .sbmp__banner .sblg__blob { background: #3b813a; opacity: .35; }
.sblg--s3 .sbmp__banner { background: linear-gradient(135deg, #3b813a, #2f9e44); }
.sblg--f1 .sbmp__banner { background: linear-gradient(135deg, #8ec5fc, #e0c3fc); }
.sblg--f1 .sbmp__card { background: rgba(255,255,255,.72); border-color: rgba(255,255,255,.8); }
.sblg--f2 .sbmp { color: #e2e8f0; }
.sblg--f2 .sbmp__banner { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
.sblg--f2 .sbmp__card, .sblg--f2 .sbmp__toolbar { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); }
.sblg--f2 .sbmp__name, .sblg--f2 .sbmp__counts strong, .sblg--f2 .sbmp__menu a, .sblg--f2 .sbmp__info dd, .sblg--f2 .sbmp__info dd a, .sblg--f2 .sbmp__list td.subj a, .sblg--f2 .sbmp__sec, .sblg--f2 .sbmp__title { color: #f1f5f9; }
.sblg--f2 .sbmp__menu a.is-active { color: #c4b5fd; }
.sblg--f2 .sbmp__bigic { background: #fff; border-color: rgba(255,255,255,.3); }
.sblg--f2 .sbmp__cnt small { color: #cbd5e1; }
.sblg--f2 .sbmp__cnt strong { color: #f1f5f9; }
.sblg--f2 .sbmp__btn.sbmp__btn--adm { background: rgba(255,255,255,.06); color: #c4b5fd; border: 1.5px solid #c4b5fd; }
.sblg--f2 .sbmp__btn.sbmp__btn--adm:hover { background: #c4b5fd; color: #1e1b4b; }
.sblg--f2 .sbmp__btn.sbmp__btn--primary { background: var(--mp-accent); border-color: var(--mp-accent); color: #fff; }
.sblg--f2 .sbmp__counts, .sblg--f2 .sbmp__counts li + li, .sblg--f2 .sbmp__info > div, .sblg--f2 .sbmp__list th, .sblg--f2 .sbmp__list td { border-color: rgba(255,255,255,.14); }
.sblg--f2 .sbmp__list { border-top-color: rgba(255,255,255,.5); }
.sblg--f2 .sbmp__list th { background: rgba(255,255,255,.06); color: #cbd5e1; }
.sblg--f2 .sbmp__btn { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: #f1f5f9; }
.sblg--f2 .sbmp__btn--danger { color: #fca5a5; }
.sblg--f2 .sbmp__avatar img { border-color: #273a5e; }
.sblg--f2 .sbmp__avatar-edit { border-color: #273a5e; }
.sblg--f2 .sbmp__pager a { color: #cbd5e1; border-color: rgba(255,255,255,.2); }
.sblg--f3 .sbmp__card { background: #e8ecf1; border: 0; box-shadow: 8px 8px 18px #c9cfd6, -8px -8px 18px #ffffff; }
.sblg--f3 .sbmp__toolbar { background: #e8ecf1; }
.sblg--f3 .sbmp__btn { background: #e8ecf1; border: 0; box-shadow: 4px 4px 10px #c9cfd6, -4px -4px 10px #ffffff; }
.sblg--f3 .sbmp__btn.sbmp__btn--adm { border: 1.5px solid var(--mp-accent); background: #fff; box-shadow: none; }
.sblg--f3 .sbmp__btn.sbmp__btn--primary { background: var(--mp-accent); color: #fff; box-shadow: none; }
.sblg--f1 .sbmp__card.sbmp__toolbar { background: var(--mp-soft); }
.sblg--f3 .sbmp__banner { background: linear-gradient(135deg, #cfd6df, #aab4c1); }
.sblg--f3 .sbmp__list th { background: transparent; }
@media (max-width: 860px) {
  .sbmp__cols { grid-template-columns: 1fr; }
  .sbmp__list .bo, .sbmp__list .num { display: none; }
}

/* 낮은 화면(노트북 1366×768 등)에서도 헤더·푸터가 한 화면에 보이도록 촘촘하게 */
@media (max-height: 840px) and (min-width: 861px) {
  .sblg { padding: 16px 20px; }
  .sblg__panel { padding: 8px 24px; }
  .sblg__logo { margin-bottom: 6px; }
  .sblg__logo img { max-height: 34px; }
  .sblg__title { font-size: 22px; }
  .sblg__sub { margin-bottom: 10px; }
  .sblg__field { margin-bottom: 8px; }
  .sblg__field input { height: 40px; }
  .sblg__opts { margin: 2px 0 10px; }
  .sblg__submit { height: 42px; }
  .sblg__links { margin-top: 10px; }
  .sblg--g2 .sblg__card, .sblg--g3 .sblg__card, .sblg--f1 .sblg__card, .sblg--f2 .sblg__card, .sblg--f3 .sblg__card { padding: 20px 26px; }
}

/* 반응형: 분할형은 세로 스택 */
@media (max-width: 860px) {
  .sblg { padding: 20px 16px; }
  .sblg__body { flex-direction: column; }
  .sblg--split .sblg__body { min-height: 0; flex: 0 0 auto; }
  .sblg__side { min-height: 180px; flex: none !important; clip-path: none !important; margin: 0 !important; }
  .sblg__panel { padding: 28px 16px; }
  .sblg--s3 .sblg__panel { padding-left: 16px; }
}