@charset "utf-8";

/* ================================================
   MOA.AI.KR — 아웃로그인 스킨 (모던 리디자인)
   ================================================ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600;700&display=swap');

/* ── 공통 ─────────────────────────────────────── */
:root {
    --ol-bg:          #ffffff;
    --ol-border:      #eef0f5;
    --ol-accent:      #4f7ef8;
    --ol-accent-dark: #3563e9;
    --ol-accent-glow: rgba(79,126,248,.18);
    --ol-text:        #1a1d2e;
    --ol-muted:       #7a8098;
    --ol-subtle:      #f5f7ff;
    --ol-shadow:      0 4px 24px rgba(79,126,248,.10), 0 1px 4px rgba(0,0,0,.06);
    --ol-radius:      14px;
    --ol-input-h:     42px;
    --ol-font:        'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
}

.ol {
    position: relative;
    background: var(--ol-bg);
    border: 1px solid var(--ol-border);
    border-radius: var(--ol-radius);
    box-shadow: var(--ol-shadow);
    overflow: hidden;
    margin-bottom: 18px;
    font-family: var(--ol-font);
    transition: box-shadow .25s;
}
.ol:hover {
    box-shadow: 0 8px 32px rgba(79,126,248,.14), 0 2px 6px rgba(0,0,0,.07);
}
.ol a.btn_admin {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0 10px;
    height: 26px;
    border-radius: 6px;
    background: var(--ol-subtle);
    color: var(--ol-accent);
    font-size: .78em;
    text-decoration: none;
    transition: background .2s, color .2s;
}
.ol a.btn_admin:hover { background: var(--ol-accent); color: #fff; }


/* ── 로그인 전 (skin 1) ────────────────────────── */
#ol_before {}
#ol_before:after { display:block;visibility:hidden;clear:both;content:"" }

/* 헤더 탭 */
#ol_be_cate {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--ol-border);
}
#ol_be_cate h2 {
    flex: 1;
    margin: 0;
    padding: 13px 0;
    text-align: center;
    font-size: .88em;
    font-weight: 700;
    color: var(--ol-text);
    letter-spacing: -.01em;
    width: auto;
    float: none;
}
#ol_be_cate .join {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 13px 0;
    background: var(--ol-subtle);
    color: var(--ol-accent);
    font-size: .84em;
    font-weight: 600;
    text-decoration: none;
    border-left: 1px solid var(--ol-border);
    transition: background .2s, color .2s;
    float: none;
    width: auto;
}
#ol_be_cate .join:hover {
    background: var(--ol-accent);
    color: #fff;
}
#ol_be_cate:after { display:block;visibility:hidden;clear:both;content:"" }

/* 폼 영역 */
.ol form {
    padding: 18px 18px 14px;
}

.ol form fieldset {
    border: none;
    margin: 0;
    padding: 0;
}

/* 입력 래퍼 */
#ol_before .ol_wr {
    position: relative;
    margin-bottom: 10px;
}

/* 아이디 · 비밀번호 */
#ol_id,
#ol_pw {
    display: block;
    width: 100%;
    height: var(--ol-input-h);
    padding: 0 14px;
    border: 1.5px solid var(--ol-border);
    border-radius: 8px;
    background: var(--ol-subtle);
    color: var(--ol-text);
    font-size: .875em;
    font-family: var(--ol-font);
    transition: border-color .2s, background .2s, box-shadow .2s;
    box-sizing: border-box;
    margin-bottom: 8px;
    outline: none;
    -webkit-appearance: none;
}
#ol_id:focus,
#ol_pw:focus {
    border-color: var(--ol-accent);
    background: #fff;
    box-shadow: 0 0 0 3px var(--ol-accent-glow);
}
#ol_id::placeholder,
#ol_pw::placeholder {
    color: #b0b5c8;
}

/* 로그인 버튼 */
#ol_submit {
    width: 100%;
    height: var(--ol-input-h);
    background: linear-gradient(135deg, var(--ol-accent) 0%, var(--ol-accent-dark) 100%);
    border: none;
    border-radius: 8px;
    color: #fff;
    font-weight: 700;
    font-size: .92em;
    font-family: var(--ol-font);
    letter-spacing: .03em;
    cursor: pointer;
    transition: opacity .2s, transform .1s, box-shadow .2s;
    box-shadow: 0 3px 10px rgba(79,126,248,.35);
    -webkit-appearance: none;
}
#ol_submit:hover {
    opacity: .92;
    box-shadow: 0 5px 16px rgba(79,126,248,.45);
}
#ol_submit:active {
    transform: scale(.98);
}

/* 자동로그인 · 정보찾기 */
.ol_auto_wr {
    overflow: hidden; /* float 컨테이너 */
    margin-top: 8px;
}
.ol_auto_wr:after { display:block;visibility:hidden;clear:both;content:"" }

#ol_auto {
    float: left;
    line-height: 20px;
}
#ol_auto label {
    font-size: .8em;
    color: var(--ol-muted);
    vertical-align: baseline;
    cursor: pointer;
    transition: color .2s;
}
#ol_auto label:hover { color: var(--ol-accent); }
#ol_auto input { width:13px;height:13px; }

#ol_svc {
    float: right;
    line-height: 20px;
}
#ol_svc a {
    display: inline-block;
    font-size: .78em;
    color: var(--ol-accent);
    border: 1px solid rgba(79,126,248,.3);
    border-radius: 20px;
    padding: 3px 10px;
    text-decoration: none;
    transition: background .2s, color .2s;
}
#ol_svc a:hover {
    background: var(--ol-accent);
    color: #fff;
    border-color: var(--ol-accent);
}

/* SNS 로그인 영역 조정 */
#sns_login { margin-top: 0 !important; border-top: 0 !important; }
#sns_login h3 { position:absolute;font-size:0;line-height:0;overflow:hidden }


/* ── 로그인 후 (skin 2) ────────────────────────── */
#ol_after {}

/* 상단 헤더 */
#ol_after_hd {
    position: relative;
    padding: 16px 16px 12px 74px;
    min-height: 72px;
    border-bottom: 1px solid var(--ol-border);
    background: linear-gradient(135deg, var(--ol-subtle) 0%, #fff 100%);
}
#ol_after_hd h2 {
    margin: 0;
    padding: 0;
    width: 1px;
    height: 1px;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
}
#ol_after_hd .profile_img {
    position: absolute;
    top: 14px;
    left: 14px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--ol-accent);
    box-shadow: 0 0 0 3px var(--ol-accent-glow);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ol-subtle);
}
#ol_after_hd .profile_img img {
    border: none;
    border-radius: 50%;
    width: 46px;
    height: 46px;
    object-fit: cover;
}
#ol_after_hd .profile_img a {
    text-align: center;
    font-size: 20px;
    color: var(--ol-accent);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

#ol_after_hd strong {
    display: block;
    font-size: .92em;
    font-weight: 700;
    color: var(--ol-text);
    margin: 0 0 7px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}

#ol_after_info {
    display: inline-flex;
    align-items: center;
    height: 24px;
    font-size: .76em;
    font-weight: 600;
    color: var(--ol-accent);
    border: 1.5px solid rgba(79,126,248,.35);
    border-radius: 20px;
    padding: 0 9px;
    text-decoration: none;
    transition: background .2s, color .2s;
}
#ol_after_info:hover {
    background: var(--ol-accent);
    color: #fff;
    border-color: var(--ol-accent);
}
#ol_after_hd .btn_admin {
    margin-left: 4px;
    height: 24px;
    line-height: 1;
    font-size: .76em;
    vertical-align: middle;
}
#ol_after_hd .btn_b04 { line-height: 23px; padding: 0 5px; }

/* 개인 메뉴 리스트 */
#ol_after_private {
    margin: 0;
    padding: 0;
    list-style: none;
}
#ol_after_private:after { display:block;visibility:hidden;clear:both;content:"" }

#ol_after_private li {
    border-bottom: 1px solid var(--ol-border);
    position: relative;
}
#ol_after_private li:last-child { border-bottom: none; }

#ol_after_private a {
    display: flex;
    align-items: center;
    color: var(--ol-text);
    font-size: .84em;
    font-weight: 500;
    padding: 11px 14px;
    text-decoration: none;
    transition: background .18s, color .18s;
    gap: 6px;
}
#ol_after_private a:hover {
    background: var(--ol-subtle);
    color: var(--ol-accent);
}
#ol_after_private li:first-child a { border-left: 0; }

#ol_after_private li i {
    width: 20px;
    text-align: center;
    color: var(--ol-muted);
    font-size: 1em;
    flex-shrink: 0;
    transition: color .18s;
}
#ol_after_private a:hover i,
#ol_after_private li:hover i { color: var(--ol-accent); }

#ol_after_private a strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    float: none;
    min-width: 28px;
    padding: 2px 8px;
    border-radius: 20px;
    background: var(--ol-subtle);
    color: var(--ol-accent);
    font-size: .8em;
    font-weight: 700;
    transition: background .2s, color .2s;
    white-space: nowrap;
    text-overflow: clip;
    overflow: hidden;
    max-width: 80px;
}

/* 포인트 · 쪽지 · 스크랩 호버 강조 */
#ol_after_private .win_point:hover strong  { background: #10b981; color: #fff; }
#ol_after_private .win_memo:hover strong   { background: #6366f1; color: #fff; }
#ol_after_private .win_scrap:hover strong  { background: #f59e0b; color: #fff; }

/* 호버 왼쪽 바 */
#ol_after_private li a:hover:after {
    position: absolute;
    left: 0; top: 0;
    width: 3px; height: 100%;
    background: var(--ol-accent);
    content: "";
    border-radius: 0 2px 2px 0;
}

/* 로그아웃 */
#ol_after_logout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 13px 0;
    font-size: .83em;
    font-weight: 600;
    color: var(--ol-muted);
    text-decoration: none;
    border-top: 1px solid var(--ol-border);
    transition: color .2s, background .2s;
    letter-spacing: .01em;
}
#ol_after_logout:hover {
    color: var(--ol-accent);
    background: var(--ol-subtle);
}
#ol_after_logout i { font-size: 1em; }

/* 포인트·쪽지 여백 제거 (기존과 동일) */
#ol_after_memo { margin-right: 0; }
#ol_after_pt   { margin-right: 0; }


/* ── 커스텀 체크박스 ────────────────────────────── */
.selec_chk {
    position: absolute;
    top: 0; left: 0;
    width: 0; height: 0;
    opacity: 0; outline: 0;
    z-index: -1; overflow: hidden;
}
.chk_box { position: relative; }
.chk_box input[type="checkbox"] + label {
    padding-left: 22px;
    color: var(--ol-muted);
    font-size: .8em;
    cursor: pointer;
    user-select: none;
    transition: color .2s;
}
.chk_box input[type="checkbox"] + label:hover { color: var(--ol-accent); }

.chk_box input[type="checkbox"] + label span {
    position: absolute;
    top: 1px; left: 0;
    width: 15px; height: 15px;
    display: block;
    background: #fff;
    border: 1.5px solid #d0d6e8;
    border-radius: 4px;
    transition: border-color .2s, background .2s;
}
.chk_box input[type="checkbox"]:checked + label { color: var(--ol-text); }
.chk_box input[type="checkbox"]:checked + label span {
    background: var(--ol-accent) url('./img/chk.png') no-repeat 50% 50%;
    border-color: var(--ol-accent);
    box-shadow: 0 0 0 2px var(--ol-accent-glow);
}