@charset "utf-8";

/* 박스 */
.ol{position:relative;padding:15px;border:1px solid #dde4e9;border-radius:12px;background:#f3f4f3}
.ol h2{margin:0;padding:0;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden}
.sound_only{position:absolute;clip:rect(0 0 0 0);width:1px;height:1px;margin:-1px;overflow:hidden;padding:0;border:0}

.ol_top{display:flex;justify-content:space-between;gap:8px;font-size:12px;margin-bottom:8px}
.ol_top a{color:#5f6164;text-decoration:none}

/* 입력/버튼 레이아웃 */
.ol_area{width:100%;overflow:hidden}
.ol_area .Left{float:left;width:115px}
.ol_area .Right{float:right;display:flex;align-items:stretch}

/* 입력창(내부 글자/placeholder 없음) */
#ol_id,
#ol_pw{
  display:block;margin:0 0 5px !important;padding:0 8px;
  width:110px;height:28px;border:1px solid #bebebe;border-radius:6px;
  background-color:#fff;line-height:28px;font-size:13px;color:#111827;
}

/* 텍스트 버튼 */
#ol_submit{
  display:inline-block;min-width:78px;height:62px;padding:0 12px;border:0;border-radius:10px;
  background:#2563eb;color:#fff;font-weight:700;font-size:14px;cursor:pointer;line-height:1;
}
#ol_submit:hover{background:#1e40af}
#ol_submit:focus{outline:2px solid rgba(37,99,235,.35);outline-offset:2px}

/* 자동로그인 */
.ol_auto{margin-top:6px;font-size:12px;color:#5f6164}

/* 로그인 후 */
#ol_after .btn_admin{display:inline-block;padding:0 10px;height:23px;border:1px solid #e8180c;background:#e8180c;color:#fff;text-decoration:none;line-height:2.15em;margin-left:6px}
#ol_after_private{margin:6px 0 0;padding:0;list-style:none;font-size:12px}
#ol_after_private:after{content:"";display:block;clear:both}
#ol_after_private li{float:left;margin-right:6px}
#ol_after_ft a{display:inline-block;margin-right:6px;background:#333;color:#fff;text-decoration:none;padding:4px 10px;border-radius:4px}

/* 모바일(선택) */
@media (max-width:480px){
  .ol_area .Left{float:none;width:100%}
  .ol_area .Right{float:none;width:100%;margin-top:6px}
  #ol_id,#ol_pw{width:100%}
  #ol_submit{width:100%;height:44px}
}
/* ===============================
   로그인 후(outlogin.skin.2.php)
   =============================== */

#ol_after {
  background-color: #f3f4f3;
  font-family: 'Noto Sans KR', sans-serif;
  border: 1px solid #dde4e9;
  border-radius: 12px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 상단 (닉네임 + 관리자버튼) */
#ol_after_hd .ol_user_row {
  display: flex;
  align-items: center;
  justify-content: center; /* 가운데 정렬 */
  gap: 8px;
  font-size: 14px;
  color: #111827;
}
#ol_after_hd .btn_admin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 8px;
  background: #e8180c;
  color: #fff;
  font-size: 12px;
  border-radius: 4px;
  text-decoration: none;
}

/* 중간 링크 (쪽지함, 포인트, 스크랩) */
.ol_private {
  display: flex;
  justify-content: center;
  gap: 12px;
  font-size: 13px;
  margin: 4px 0;
  padding: 0;
  list-style: none;
}
.ol_private a {
  color: #333;
  text-decoration: none;
}
.ol_private a:hover {
  text-decoration: underline;
}

/* 하단 버튼 (정보수정 / 로그아웃) */
#ol_after_ft {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 6px;
}
#ol_after_ft a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #333;
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 6px;
  transition: background-color .15s;
}
#ol_after_ft a:hover {
  background: #111;
}