/* 회원 쪽 두 개, 새 디자인 (MyPage = 나의 게시글 관리, Register = 회원정보 수정·회원가입).
   두 컨트롤이 새 디자인일 때 싣는다. 2026년 10월. 화면의 짜임은 예전 그대로이고
   여기서 카드, 글꼴, 입력칸, 단추를 새 모습으로 바꾼다. 옛 규칙(MainCategory.css,
   Register.css)이 많아 몇 군데는 !important 로 이긴다. */

/* ---------- 나의 게시글 관리 (MyPage) ---------- */
.v2-mypage { box-sizing: border-box; max-width: 1000px !important; margin: 24px auto 40px !important; padding: 26px 30px 20px !important;
    border: 1px solid var(--v2-line); border-radius: 18px; background: #fff; box-shadow: 0 4px 18px rgba(31, 36, 48, .04); font-family: var(--v2-font); color: var(--v2-text); }
.v2-mypage .TitleContainer { margin: 0 0 6px !important; padding: 0 0 14px 0 !important; border-bottom: 1px solid var(--v2-line) !important; }
.v2-mypage .TitleContainer .Title { display: inline-block; padding-left: 12px; border-left: 4px solid var(--v2-primary); font-size: 22px; font-weight: 900; color: var(--v2-navy); }
.v2-mypage .row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 !important; padding: 14px 4px; border-bottom: 1px solid var(--v2-line); }
.v2-mypage .row::before, .v2-mypage .row::after { display: none; }
.v2-mypage .row > [class*="col-"] { float: none; width: auto; padding: 0; margin: 0 !important; height: auto !important; }
.v2-mypage .row > .col-lg-8 { flex: 1 1 420px; min-width: 0; }
.v2-mypage .row > .col-lg-4 { flex: 0 0 auto; }
.v2-mypage .BoardListSeperator { display: none; }
.v2-mypage .BoardListWrapper { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.v2-mypage .BoardListItemTitleWrapper { flex: 1 1 100%; display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 10px; padding: 0 !important; overflow: visible; }
.v2-mypage .BoardListItemTitleWrapper > a { flex: 1; min-width: 0; text-decoration: none; }
.v2-mypage .BoardListItemTitle { font-size: 15.5px; font-weight: 700; color: var(--v2-text); }
.v2-mypage .BoardListItemTitleWrapper > a:hover .BoardListItemTitle { color: var(--v2-primary); }
.v2-mypage .BoardListItemCategory { float: none; flex: 0 0 auto; padding: 3px 10px; border-radius: 12px; background: var(--v2-primary-soft); color: var(--v2-primary); font-size: 12px; font-weight: 700; }
.v2-mypage .BoardListItemLocation, .v2-mypage .BoardListItemDate, .v2-mypage .BoardListItemHitContainer, .v2-mypage .BoardListItemReply {
    float: none; margin: 0; padding: 0; min-width: 0; text-align: left; font-size: 12.5px; color: var(--v2-muted); }
.v2-mypage .BoardListItemHit::before { content: '조회 '; }
.v2-mypage .MyPageWrapper { display: flex; flex-wrap: wrap; gap: 6px; }
.v2-mypage .MyPageButton { margin: 0 !important; padding: 7px 14px !important; border: 1px solid var(--v2-line) !important; border-radius: 10px !important; background: #fff !important;
    box-shadow: none !important; text-shadow: none !important; filter: none !important; font-family: var(--v2-font); font-size: 13px !important; font-weight: 700 !important; color: #4b5162 !important; }
.v2-mypage .MyPageButton:hover { border-color: var(--v2-primary) !important; color: var(--v2-primary) !important; }
.v2-mypage #Delete.MyPageButton:hover { border-color: #dc2626 !important; color: #dc2626 !important; }
.v2-mypage .EmptyItem { padding: 40px 0; text-align: center; color: var(--v2-muted); }
.v2-mypage #BoardListPager, .v2-mypage #BoardListPager2 { display: flex; justify-content: center; margin: 22px 0 6px !important; }
.v2-mypage #BoardListPager > span, .v2-mypage #BoardListPager2 > span { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; font-size: 0; }
.v2-mypage .PagerButton, .v2-mypage .PagerNormal, .v2-mypage .PagerCurrent { min-width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; margin: 0 !important;
    padding: 0 10px !important; border: 1px solid var(--v2-line) !important; border-radius: 10px; background: #fff; font-size: 14px !important; font-weight: 700; color: #4b5162 !important; text-decoration: none !important; }
.v2-mypage .PagerButton:hover, .v2-mypage .PagerNormal:hover { border-color: var(--v2-primary) !important; color: var(--v2-primary) !important; }
.v2-mypage .PagerCurrent { border-color: var(--v2-primary) !important; background: var(--v2-primary) !important; color: #fff !important; }

/* ---------- 회원정보 수정 · 회원가입 (Register) ---------- */
body:has(.v2-header) #RegisterWrapper { box-sizing: border-box; max-width: 880px; margin: 24px auto 40px !important; padding: 32px 36px 28px !important;
    border: 1px solid var(--v2-line) !important; border-radius: 18px !important; background: #fff; box-shadow: 0 4px 18px rgba(31, 36, 48, .04); font-family: var(--v2-font); color: var(--v2-text); }
body:has(.v2-header) #RegisterWrapper .Header { display: flex; align-items: center; gap: 10px; font-size: 24px; font-weight: 900; color: var(--v2-navy); }
body:has(.v2-header) #RegisterWrapper .rect { width: 6px; height: 26px; margin: 0; border: 0; border-radius: 3px; background: var(--v2-primary); }
body:has(.v2-header) #RegisterWrapper .HeaderDesc { margin: 14px 0 6px; padding: 14px 16px; border: 0; border-radius: 12px; background: var(--v2-bg); font-size: 13px; line-height: 1.7; color: var(--v2-muted); }
body:has(.v2-header) #RegisterWrapper .HeaderDesc span { color: #dc2626; }
body:has(.v2-header) #RegisterWrapper .GroupHeader { display: flex; align-items: center; gap: 8px; margin: 22px 0 6px; padding: 0; font-size: 16px; font-weight: 900; color: var(--v2-navy); }
body:has(.v2-header) #RegisterWrapper .square { width: 10px; height: 10px; margin: 0; border-radius: 3px; background: var(--v2-primary); }
body:has(.v2-header) #RegisterWrapper .RegisterList { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 4px 16px; align-items: center; margin: 0 0 6px; padding: 8px 0 16px;
    border: 0; border-bottom: 1px solid var(--v2-line); }
body:has(.v2-header) #RegisterWrapper .RegisterList > .clearBoth, body:has(.v2-header) #RegisterWrapper .RegisterList > div[style*="clear"] { grid-column: 1 / -1; height: 0; }
body:has(.v2-header) #RegisterWrapper #PasswordModify:not(.nodisplay), body:has(.v2-header) #RegisterWrapper #PasswordContainer:not(.nodisplay) { display: contents; }
body:has(.v2-header) #RegisterWrapper .RegisterTitle { float: none; width: auto; padding: 8px 0 !important; font-size: 13.5px; font-weight: 700; line-height: 1.45; color: #4b5162; }
body:has(.v2-header) #RegisterWrapper .RegisterContent { float: none; width: auto; padding: 6px 0; }
body:has(.v2-header) #RegisterWrapper input[type=text], body:has(.v2-header) #RegisterWrapper input[type=password], body:has(.v2-header) #RegisterWrapper input[type=email],
body:has(.v2-header) #RegisterWrapper select { box-sizing: border-box; height: 42px; padding: 0 12px !important; border: 1px solid var(--v2-line) !important; border-radius: 10px !important;
    background: #fff; font-family: var(--v2-font); font-size: 14px; color: var(--v2-text); outline: 0; }
body:has(.v2-header) #RegisterWrapper .RegisterList span > input[type=text], body:has(.v2-header) #RegisterWrapper .RegisterList span > input[type=password] { width: 320px; max-width: 100%; }
body:has(.v2-header) #RegisterWrapper input.is-verified { background: #f3fbf5 !important; border-color: #9fd8b3 !important; color: #14532d; }
body:has(.v2-header) #RegisterWrapper input:focus, body:has(.v2-header) #RegisterWrapper select:focus { border-color: var(--v2-primary) !important; box-shadow: 0 0 0 3px var(--v2-primary-soft); }
body:has(.v2-header) #RegisterWrapper .RegisterContent ul { display: flex; gap: 18px; margin: 0; padding: 0; }
body:has(.v2-header) #RegisterWrapper .RegisterContent ul li { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
body:has(.v2-header) #RegisterWrapper input[type=radio], body:has(.v2-header) #RegisterWrapper input[type=checkbox] { width: 17px; height: 17px; accent-color: var(--v2-primary); }
body:has(.v2-header) #RegisterWrapper .subTitle, body:has(.v2-header) #RegisterWrapper .subTitle2 { font-size: 13px; color: var(--v2-muted); }
body:has(.v2-header) #RegisterWrapper .RegisterDesc { font-size: 12px; color: var(--v2-muted); }
body:has(.v2-header) #RegisterWrapper .ChangePasswordButton, body:has(.v2-header) #RegisterWrapper .RegisterIDCheck, body:has(.v2-header) #RegisterWrapper .FindButton {
    display: inline-flex; align-items: center; width: auto; padding: 9px 16px !important; border: 1px solid #d9cdfa; border-radius: 10px !important; background: var(--v2-primary-soft) !important;
    color: var(--v2-primary); font-size: 13.5px; font-weight: 700; cursor: pointer; }
body:has(.v2-header) #RegisterWrapper .ChangePasswordButton:hover, body:has(.v2-header) #RegisterWrapper .RegisterIDCheck:hover { border-color: var(--v2-primary); }
body:has(.v2-header) #RegisterWrapper .AgreementCheck { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--v2-bg); font-size: 13.5px; line-height: 1.6; }
body:has(.v2-header) #RegisterWrapper .AgreementCheck a { color: var(--v2-primary); font-weight: 700; }
body:has(.v2-header) #RegisterWrapper .AgreementButton { display: flex; justify-content: center; gap: 10px; margin-top: 24px; }
body:has(.v2-header) #RegisterWrapper .AgreementButton a { width: auto; min-width: 150px; padding: 12px 24px !important; border: 1px solid var(--v2-line) !important; border-radius: 12px !important;
    background: #fff !important; color: #4b5162 !important; font-family: var(--v2-font); font-size: 15px !important; font-weight: 700; text-align: center; text-decoration: none !important; float: none !important; }
body:has(.v2-header) #RegisterWrapper .AgreementButton a.SubmitButton { border-color: var(--v2-primary) !important; background: var(--v2-primary) !important; color: #fff !important;
    box-shadow: 0 8px 18px rgba(107, 63, 224, .22); }
body:has(.v2-header) #RegisterWrapper .AgreementButton a.SubmitButton:hover { background: #5a30c8 !important; }

@media (max-width: 760px) {
    .v2-mypage { padding: 18px 16px !important; margin: 16px 12px 30px !important; }
    /* 나의 게시글: the row's left part asked for 420px (wider than the phone) and pushed the
       category tag off the screen - now the full width, the tag above the title */
    .v2-mypage .row > .col-lg-8 { flex-basis: 100%; }
    .v2-mypage .BoardListItemTitleWrapper { flex-direction: column-reverse; align-items: flex-start; gap: 4px; }
    .v2-mypage .BoardListItemTitleWrapper > a { width: 100%; }
    .v2-mypage .BoardListItemTitle { font-size: 14.5px; }
    .v2-mypage .BoardListItemCategory { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    /* 회원정보: the old stylesheet gives the box a fixed width - on a phone it ran off the right edge */
    body:has(.v2-header) #RegisterWrapper { width: auto !important; max-width: none; padding: 22px 16px !important; margin: 16px 12px 30px !important; }
    body:has(.v2-header) #RegisterWrapper * { max-width: 100%; }
    body:has(.v2-header) #RegisterWrapper .RegisterContent { width: auto !important; }
    body:has(.v2-header) #RegisterWrapper .RegisterList { grid-template-columns: minmax(0, 1fr); }
    body:has(.v2-header) #RegisterWrapper .RegisterTitle { padding: 6px 0 0 !important; }
}