@charset "utf-8";
/* ==========================================================================
    member.css — 로그인/가입/찾기/약관/마이페이지
    브레이크포인트: 1280 / 1024 / 768 / 560 (common.css 표준)
   ========================================================================== */

.member h3{ font-size: 1.25rem; font-weight: 600; margin: 0 0 15px; text-align: left; }
.member h3 span{ display: block; font-weight: normal; }

@media (width <= 768px){
    .member h3{ font-size: 1.0625rem; margin: 0 0 10px; }
}

/* ==========================================================================
    약관/개인정보 본문 (guide)
   ========================================================================== */
.guide .full{ background: var(--bg-soft); padding: 40px; border-radius: var(--radius); }
.guide .con_text .top{ margin-bottom: 50px; }
.guide .con_text ol > li{ margin-top: 50px; }
.guide .con_text ol > li:first-child{ margin-top: 0; }
.guide .con_text ol > li > div.tit{ font-size: 1.25rem; font-weight: 700; margin-bottom: 10px; color: var(--ink); }
.guide .con_text .depth{ margin-top: 15px; }
.guide .con_text .depth strong{ font-weight: 600; }
.guide .con_text .depth li{ margin-top: 15px; padding-left: 15px; }
.guide .con_text .depth li > .mark{ display: inline-block; margin-left: -15px; margin-right: 3px; }
.guide .con_text .depth li > .tit{ display: inline; }
.guide .con_text .depth_lim{ margin-top: 5px; }
.guide .con_text .lim li{ margin-top: 5px; }

@media (width <= 768px){
    .guide .full{ padding: 30px 16px; }
    .guide .con_text .top{ margin-bottom: 40px; }
    .guide .con_text ol > li{ margin-top: 40px; }
    .guide .con_text ol > li > div.tit{ font-size: 1rem; }
}

.privacy-con {width: 100%;
    & .privacy-text {display: flex; flex-direction: column; gap: 36px; padding: 24px; background: var(--bg-soft); border-radius: 8px;
        & .tit {display: flex; flex-direction: column; gap: 12px;
            & h2 {font-size: 20px;}
            & p {}
        }
        & .desc {display: flex; flex-direction: column; gap: 6px;
            & h2 {font-size: 18px; margin: 0 0 6px;}
            & p {font-size: 15px; font-weight: 500;}
            & span {position: relative; display: block; font-size: 15px; line-height: 20px; padding: 0 0 0 18px; color: var(--ink-2);}
            & span::before {content: ''; position: absolute; top: 8px; left: 8px; width: 4px; height: 4px; background: var(--ink-2); border-radius: 50%;}
        }
    }
    @media (width <= 768px) {
        & .privacy-text {padding: 16px; gap: 24px;
            & .tit h2 {font-size: 18px;}
            & .tit p {font-size: 15px;}
            & .desc h2 {font-size: 16px;}
            & .desc p {font-size: 14px;}
            & .desc span {font-size: 14px;}
        }
    }
}

/* ==========================================================================
    로그인
   ========================================================================== */
.member .login_box{
    margin: 20px auto 0;
    max-width: 420px;
    padding: clamp(28px, 5vw, 48px);
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-1);
}
.member .login_box ul{ text-align: left; }
.member .login_box ul li{ margin-top: 10px; }
.member .login_box ul li:first-child{ margin-top: 0; }
.member .login_box ul li input{ width: 100%; }
.member .login_box .checkbox_style{ margin-top: 14px; }
.member .login_box .btn_login{ display: block; margin-top: 20px; }
.member .login_box .btn_login input{
    display: inline-block;
    width: 100%;
    height: 52px;
    color: #fff; font-weight: 600; font-size: 1rem;
    background: var(--point, #4F46E5);
    border: 0; border-radius: var(--radius-sm);
    cursor: pointer;
    appearance: none; -webkit-appearance: none;
    transition: background .2s;
}
.member .login_box .btn_login input:hover{ background: var(--point-strong); }

.member .more_btn{ clear: both; margin-top: 20px; text-align: center; }
.member .more_btn span{
    display: inline-block;
    position: relative;
    padding-right: 14px; margin-right: 14px;
}
.member .more_btn span::after{
    content: '';
    position: absolute;
    right: 0; top: 50%;
    transform: translateY(-50%);
    width: 1px; height: 10px;
    background: var(--line);
}
.member .more_btn span:last-of-type{ margin-right: 0; padding-right: 0; }
.member .more_btn span:last-of-type::after{ content: none; }
.member .more_btn a{
    display: inline-block;
    font-size: .9rem; color: var(--ink-3);
    transition: color .15s;
}
.member .more_btn a:hover{ color: var(--point, #4F46E5); }

/* SNS 로그인 */
.member .sns_box{ margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line-soft); }
.member .sns_box p{
    margin-bottom: 12px;
    font-size: .875rem; color: var(--ink-3);
    text-align: center;
}
.member .sns_box li{ margin-top: 8px; }
.member .sns_box li a{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    font-weight: 600; font-size: .9375rem;
    border-radius: var(--radius-sm);
    transition: filter .15s;
}
.member .sns_box li a:hover{ filter: brightness(.96); }
.member .sns_box li.kakao a{ background: #FEE500; color: #3C1E1E; }
.member .sns_box li.naver a{ background: #03C75A; color: #fff; }

@media (width <= 560px){
    .member .login_box{ max-width: 100%; }
}

/* ==========================================================================
    아이디/비밀번호 찾기
   ========================================================================== */
.find{ margin: 0 auto; max-width: 760px; }
.find .form_wrap .form_table input{ width: 100%; }

/* ==========================================================================
    회원가입 — 약관동의
   ========================================================================== */
.member .agree .con{
    height: 300px;
    margin: 0;
    overflow-y: auto;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}
.member .agree .con .con_text{ padding: 20px; }
.member .agree .guide .con_text ol > li > div.tit{ font-size: 1.0625rem; }
.member .agree .join_check{ display: block; margin-top: 20px; padding: 0; text-align: center; }

@media (width <= 768px){
    .member .agree .con .con_text{ padding: 15px; }
}

/* ==========================================================================
    가입완료 / 아이디찾기 결과
   ========================================================================== */
.join_result_wrap,
.id_result_wrap{
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    padding: clamp(36px, 6vw, 60px);
    text-align: center;
    background: var(--bg-soft);
    border-radius: var(--radius);
}
.join_result_wrap .result_txt .tit,
.id_result_wrap .result_txt .tit{ font-size: 1.2rem; font-weight: 600; color: var(--ink); }
.id_result_wrap .item-wrap{
    display: inline-block;
    margin: 20px 0 0;
    line-height: 40px;
    padding: 0 40px;
    background: var(--bg);
    border-radius: var(--radius-sm);
}
.id_result_wrap .item-wrap dl dt{ display: inline-block; font-weight: 600; }
.id_result_wrap .item-wrap dl dd{ display: inline-block; }
.id_result_wrap .item-wrap dl dd::before{
    content: '';
    display: inline-block;
    width: 1px; height: 12px;
    background: var(--line);
    margin: 0 20px;
}

@media (width <= 768px){
    .id_result_wrap .item-wrap{ width: 100%; padding: 0; }
}

/* ==========================================================================
    마이페이지 — 공용 탭 (layout/mypage_tabs.php)
   ========================================================================== */
.mypage_tabs{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 20px;
}
.mypage_tabs a{
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--ink-2);
    font-size: .9375rem;
    transition: background .15s, color .15s, border-color .15s;
}
.mypage_tabs a:hover{
    color: var(--point, #4F46E5);
    border-color: var(--point-border);
    background: var(--point-faint);
}
.mypage_tabs a.is-active{
    color: #fff;
    border-color: var(--point, #4F46E5);
    background: var(--point, #4F46E5);
}
.mypage_tabs a .cnt{ opacity: .75; }

/* ==========================================================================
    마이페이지 — 프로필 카드 (layout/mypage_profile.php)
   ========================================================================== */
.mypage_profile{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin: 0 0 20px;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--bg-soft);
}
.mypage_profile .mp_photo{ flex: 0 0 56px; text-align: center; }
.mypage_profile .mp_photo img{
    display: block;
    width: 56px; height: 56px;
    border-radius: 50%;
    object-fit: cover;
}
.mypage_profile .mp_photo .mp_initial{
    display: flex;
    align-items: center; justify-content: center;
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--point, #4F46E5);
    color: #fff;
    font-size: 1.4em; font-weight: 600;
}
.mypage_profile .mp_photo_btns{ margin-top: 4px; font-size: .75em; white-space: nowrap; }
.mypage_profile .mp_photo_btns a{ color: var(--point, #4F46E5); }
.mypage_profile .mp_photo_btns a.del{ color: var(--ink-4); }
.mypage_profile .mp_info{ flex: 1; min-width: 180px; }
.mypage_profile .mp_name{ font-weight: 600; font-size: 1.1em; color: var(--ink); }
.mypage_profile .mp_name .mp_id{ color: var(--ink-4); font-weight: 400; font-size: .85em; }
.mypage_profile .mp_meta{ color: var(--ink-3); font-size: .9em; margin-top: 4px; }
.mypage_profile .mp_badge{
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: .8em;
}
.mypage_profile .mp_badge.ok{ background: color-mix(in srgb, var(--success) 10%, #fff); color: var(--success); }
.mypage_profile .mp_badge.pending{ background: color-mix(in srgb, var(--danger) 8%, #fff); color: var(--danger); }
.mypage_profile .mp_meta .mp_resend{ margin-left: 6px; color: var(--point, #4F46E5); font-size: .85em; text-decoration: underline; }
.mypage_profile .mp_meta .mp_sep{
    display: inline-block;
    width: 1px; height: 10px;
    background: var(--line);
    margin: 0 8px;
}
.mypage_profile .mp_stats{ display: flex; gap: 24px; }
.mypage_profile .mp_stats li{ text-align: center; }
.mypage_profile .mp_stats .num{ font-weight: 700; font-size: 1.2em; color: var(--ink); }
.mypage_profile .mp_stats .label{ color: var(--ink-3); font-size: .85em; }

/* ==========================================================================
    마이페이지 — 목록 셀 (내 댓글 / 문의내역 / 스크랩)
   ========================================================================== */
.bo_basic_list .tdb.cmt_cell,
.bo_basic_list .tdb.inq_cell{ text-align: left; white-space: normal; }

.cmt_text{ color: var(--ink-2); }
.cmt_meta{ margin-top: 6px; font-size: .8125rem; color: var(--ink-3); }
.cmt_board{ color: var(--ink-4); }
.cmt_link{ color: var(--point, #4F46E5); }
.cmt_link:hover{ text-decoration: underline; }
.cmt_gone{ color: var(--ink-4); }

.inq_cate{ color: var(--ink-4); }
.inq_contents{ margin-top: 8px; color: var(--ink-2); white-space: pre-line; }

.btn_unscrap{ color: var(--danger); }
.btn_unscrap:hover{ text-decoration: underline; }

/* 비밀번호 찾기 — 이메일 분리 입력 */
#pw_email.em_01{ width: 35%; display: inline-block; }
#pw_email2.em_02{ width: 55%; display: inline-block; }
@media (width <= 560px){
    #pw_email.em_01, #pw_email2.em_02{ width: 100%; margin-top: 4px; }
}

/* ==========================================================================
    문의 조회 (sub/contactus/track.php)
   ========================================================================== */
.track_box{ max-width: 560px; margin: 0 auto; }
.track_intro{ margin-bottom: 18px; text-align: center; color: var(--ink-2); }
.track_fields{ display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.track_fields #track_no{ flex: 1; min-width: 160px; width: auto; }
.track_fields #track_email{ flex: 2; min-width: 200px; width: auto; }
.track_submit{
    width: 100%;
    padding: 13px;
    color: #fff; font-size: .9375rem; font-weight: 600;
    text-align: center;
    background: var(--point, #4F46E5);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background .2s;
}
.track_submit:hover{ background: var(--point-strong); }
#track_result{ display: none; margin-top: 24px; }
.track_card{
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.track_head{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.track_head strong{ font-size: 1.0625rem; }
/* 문의 상태 칩 — track 카드 / 마이페이지 문의내역 공용 */
.track_status, .status_chip{
    flex: none;
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
}
.track_status.st0, .status_chip.st0{ color: var(--ink-3); background: var(--line-soft); }
.track_status.st1, .status_chip.st1{ color: #92400e; background: #fef3c7; }
.track_status.st2, .status_chip.st2{ color: var(--success); background: color-mix(in srgb, var(--success) 12%, #fff); }
.track_body{ color: var(--ink-2); line-height: 1.7; margin-bottom: 8px; }
.track_date{ font-size: 12px; color: var(--ink-4); margin-top: 8px; }
.track_answer{
    margin-top: 16px;
    padding: 14px 16px;
    background: var(--point-faint);
    border-left: 3px solid var(--point, #4F46E5);
    border-radius: var(--radius-sm);
}
.track_answer_tit{ font-weight: 600; color: var(--point, #4F46E5); margin-bottom: 6px; }
.track_answer_body{ color: var(--ink-2); line-height: 1.7; }
.track_none{ margin-top: 16px; color: var(--ink-4); }
.track_err{ text-align: center; color: var(--danger); padding: 16px; }