@charset "utf-8";

/* =========================================
   88카 outlogin (garoCompact) - Responsive
   - PC: 한줄 정렬
   - Mobile: 2줄(입력/버튼) 깔끔하게 줄바꿈
========================================= */

.c88-olbar{
  width:100%;
  margin:20px 0px 0px 0px;
  font-family:inherit;
}

.c88-olbar__inner{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
}

.c88-olbar__fields{
  display:flex;
  align-items:center;
  gap:8px;
}

.c88-olbar__fields input{
  width:140px;
  height:34px;
  padding:0 10px;
  border:1px solid #d9dde6;
  border-radius:10px;
  outline:0;
  background:#fff;
  font-size:14px;
  line-height:34px;
}

.c88-olbar__fields input:focus{
  border-color:#ec1d40;
  box-shadow:0 0 0 3px rgba(236,29,64,.12);
}

.c88-olbar__actions{
  display:flex;
  align-items:center;
  gap:8px;
}

.c88-btn{
  height:34px;
  padding:0 12px;
  border-radius:10px;
  border:1px solid transparent;
  cursor:pointer;
  font-weight:800;
  font-size:14px;
  line-height:34px;
  background:#fff;
}

.c88-btn--primary{
  background:#ec1d40;
  color:#fff;
  border-color:#ec1d40;
}

.c88-btn--primary:hover{ filter:brightness(.97); }

.c88-btn--ghost{
  background:#fff;
  color:#111827;
  border-color:#d9dde6;
}

.c88-btn--ghost:hover{
  border-color:#ec1d40;
  color:#ec1d40;
}

.c88-btn--admin{
  padding:0 10px;
}

/* 로그인 후 텍스트 */
.c88-olbar__hello{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.c88-olbar__text{ opacity:.85; font-weight:700; }
.c88-olbar__nick{
  text-decoration:none;
  color:#111827;
  font-weight:900;
}
.c88-olbar__nick:hover{ color:#ec1d40; }

/* =========================================
   Mobile
========================================= */
/* =========================================
   Mobile (1줄 고정)
========================================= */
/* =========================================
   Mobile 로그인폼 (2줄 / 컴팩트 유지)
   - 1줄: 아이디 + 로그인
   - 2줄: 비밀번호 + 회원가입
========================================= */
/* =========================================
   Mobile 로그인 전(outlogin) 2줄 재배치
   - 1줄: 아이디 + 로그인
   - 2줄: 비밀번호 + 회원가입
   ※ PC는 기존 그대로
========================================= */
@media (max-width: 575.98px){

  /* ✅ 모바일에서만 Grid로 재배치 */
  form.c88-olbar .c88-olbar__inner{
    display:grid;
    grid-template-columns: 1fr auto; /* 입력칸 / 버튼 */
    grid-template-areas:
      "id   login"
      "pw   join";
    gap:8px;
    align-items:center;
  }

  /* 입력 2개가 한 래퍼에 들어있으므로: 래퍼 자체는 해제 */
  form.c88-olbar .c88-olbar__fields{
    display:contents; /* ✅ 자식(input)을 그리드 아이템으로 올림 */
  }

  /* 버튼 2개도 한 래퍼에 있으므로: 래퍼 자체는 해제 */
  form.c88-olbar .c88-olbar__actions{
    display:contents; /* ✅ 자식(button)을 그리드 아이템으로 올림 */
  }

  /* ✅ 각 요소 위치 지정 */
  form.c88-olbar .c88-olbar__fields input[type="text"]{
    grid-area:id;
  }
  form.c88-olbar .c88-olbar__fields input[type="password"]{
    grid-area:pw;
  }
  form.c88-olbar .c88-olbar__actions .c88-btn--primary{
    grid-area:login;
  }
  form.c88-olbar .c88-olbar__actions .c88-btn--ghost{
    grid-area:join;
  }

  /* ✅ 크기는 "지금처럼 작게" 유지 */
  form.c88-olbar .c88-olbar__fields input{
    width:100%;
    height:32px;
    line-height:32px;
    font-size:13px;
    padding:0 10px;
    border-radius:8px;
  }

  form.c88-olbar .c88-btn{
    height:32px;
    line-height:32px;
    font-size:13px;
    padding:0 10px;
    border-radius:8px;
    white-space:nowrap;
  }

  /* 버튼 폭 고정(너무 넓게 안 퍼지게) */
  form.c88-olbar .c88-olbar__actions .c88-btn{
    min-width:78px;
  }
}

/* =========================================
   Tablet+ (입력칸 살짝 키우기)
========================================= */
@media (min-width: 992px){
  .c88-olbar__fields input{ width:160px; }
}
/* 모바일 상단 여백 보강 */
@media (max-width: 575.98px){
  .c88-olbar{  /* ← 여기 숫자만 조절 */
  }
}