/* BASIC css start */
/* ═══ 회원 로그인 (login) · 62096 CSS 탭 · 2026-09-04 ═══
   부품표(sc-parts)에 있는 것은 다시 만들지 않는다.
   이 화면 전용 클래스는 전부 .scl- 로 시작한다. */

.sc h1,.sc h2,.sc h3,.sc p,.sc li,.sc label{word-break:keep-all;overflow-wrap:break-word}

/* ── 두 칸 ── */
.scl-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px,6vw,110px);align-items:start}
@media(max-width:900px){.scl-cols{grid-template-columns:1fr;gap:var(--sc-s7)}}

/* ── 입력칸 ── */
.scl-field{margin-top:12px}
.scl-field:first-child{margin-top:0}
.scl-input,
.scl-field input[type=text],
.scl-field input[type=password]{
  display:block;width:100%;height:58px;padding:0 16px;
  background:var(--sc-paper);border:1px solid var(--sc-line);border-radius:0;
  font-family:"Pretendard",sans-serif;font-size:15px;color:var(--sc-ink);
  transition:border-color .15s}
.scl-input:focus,
.scl-field input[type=text]:focus,
.scl-field input[type=password]:focus{outline:0;border-color:var(--sc-ink)}
.scl-field input::placeholder{color:#A9A296}

/* ── 체크 줄 ── */
.scl-checks{display:flex;flex-wrap:wrap;gap:18px;margin-top:16px}
.scl-chk{display:inline-flex;align-items:center;gap:7px;
  font-size:13.5px;color:var(--sc-sub);cursor:pointer}
.scl-chk input{width:16px;height:16px;accent-color:var(--sc-ink);margin:0}
.scl-chk:hover{color:var(--sc-ink)}

/* ── 로그인 단추 ── */
.scl-go{margin-top:var(--sc-s5)}

/* ── 아래 링크 ── */
.scl-links{display:flex;align-items:center;justify-content:center;gap:14px;
  margin:var(--sc-s4) 0 0}
.scl-links a{font-size:13.5px;color:var(--sc-sub);text-decoration:none}
.scl-links a:hover{color:var(--sc-ink)}
.scl-links i{display:block;width:1px;height:11px;background:var(--sc-line)}

/* ── 간편 로그인 ── */
.scl-sns{margin-top:var(--sc-s6)}
.scl-sns__t{position:relative;margin:0 0 var(--sc-s4);text-align:center}
.scl-sns__t:before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;
  background:var(--sc-line)}
.scl-sns__t span{position:relative;padding:0 14px;background:var(--sc-paper);
  font-family:"Poppins",sans-serif;font-size:10.5px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--sc-sub)}
.scl-sns__l{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.scl-sns__l a{display:flex;align-items:center;justify-content:center;height:52px;
  font-size:14.5px;text-decoration:none;border:1px solid var(--sc-line);
  color:var(--sc-ink);background:var(--sc-paper)}
.scl-sns__l a:hover{background:var(--sc-tile)}
.scl-sns__l a.kakaotalk{background:#FEE500;border-color:#FEE500;color:#191600}
.scl-sns__l a.kakaotalk:hover{background:#F2DA00;border-color:#F2DA00}
.scl-sns__l a.naver{background:#03C75A;border-color:#03C75A;color:#fff}
.scl-sns__l a.naver:hover{background:#02B351;border-color:#02B351}
.scl-sns__l a.facebook{background:#1877F2;border-color:#1877F2;color:#fff}
.scl-sns__l a.facebook:hover{background:#166FE0;border-color:#166FE0}
.scl-sns__l a.apple{background:var(--sc-deep);border-color:var(--sc-deep);color:#fff}
.scl-sns__l a.apple:hover{background:#000}

/* ── 오른쪽 안내 ── */
.scl-side{border-top:1px solid var(--sc-line);padding-top:var(--sc-s5)}
.scl-side__t{margin:10px 0 0;font-family:"Pretendard",sans-serif;font-weight:500;
  font-size:clamp(21px,2.6vw,27px);line-height:1.45;letter-spacing:-.02em;color:var(--sc-ink)}
.scl-side__b{margin:var(--sc-s4) 0 0;font-size:14.5px;line-height:1.95;color:var(--sc-txt)}
.scl-side__b b{color:var(--sc-ink);font-weight:500}
.scl-side__go{margin-top:var(--sc-s5)}
@media(max-width:900px){
  .scl-side{border-top:0;background:var(--sc-tile);padding:clamp(24px,5vw,34px)}
  .scl-side__go{width:100%}
}

/* BASIC css end */