/* ======== 로그인 ======== */
.login_area {padding-top: 80px;}
.login_area h1 {font-family: 'JalnanGothic'; color: #000; text-align: center; font-size: 30px; margin-bottom: 50px;}

form {display: flex; width: 100%; flex-direction: column; gap: 10px;}

.login_btn {margin: 10px 0 40px; display: flex; flex-direction: column; width: 100%; align-items: center; gap: 15px;}
.find_box {display: flex; align-items: center; justify-content: center; gap: 20px;}
.find_box span {font-size: 14px; color: #b1b1b1; position: relative;}
.find_box span::after {content: ""; display: block; width: 1px; height: 9px; background-color: #b1b1b1; top: 50%; right: -10px; position: absolute; transform: translateY(-50%);}
.find_box span:last-child::after {display: none;}

.login_sns {width: 100%; display: flex; flex-direction: column; align-items: center; gap: 20px;}
.login_sns span {text-align: center; position: relative; font-size: 14px; color: #888;}
.login_sns span::before {content: ""; display: block; width: 90%; height: 1px; background-color: #ddd; position: absolute; top: 50%; left: calc(100% + 15px); transform: translateY(-50%);}
.login_sns span::after {content: ""; display: block; width: 90%; height: 1px; background-color: #ddd; position: absolute; top: 50%; right: calc(100% + 15px); transform: translateY(-50%);}

.logpage {overflow-x: hidden; height: 100vh; position: relative; padding-bottom: 20px;}
.logpage .bd {height: 100%;}
.logpage .skip {position: static; transform:none; margin: 30px auto 0;}
.skip {font-size: 14px; color: #aaa; text-decoration: underline;text-align: center; position:fixed; bottom: 80px; left: 50%; transform: translateX(-50%); }
.none-log{height: 100vh; padding-top: 0;}

/* ======== 회원가입 ======== */
.join_tit {display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding-bottom: 20px;}
.join_tit .tit {font-size: 24px; color: #111;}
.join_tit .tit em {font-weight: 600; display: inline;}
.join_tit .sub1 {font-size: 16px; color: #888;}
.join_tit .sub2 {font-size: 16px; color: #333;}
.join_cont {display: flex; width: 100%; flex-direction: column; gap: 15px;}
.join_cont .terms_chk {width: 100%; border-bottom: 1px solid #f1f1f1; padding: 15px 0;}
.join_cont .terms_chk .sub {padding-left: 26px; font-size: 14px; color: #888; padding-top: 2px;}
.join_cont .terms_unit {display: flex; flex-direction: column; width: 100%; align-items: flex-start;}
.join_cont .terms_unit .terms_con {width: 100%; padding: 10px 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 15px;}
.terms_unit .terms_con .view {color: #bcbcbc; font-size: 14px; padding-top: 2px;}

.terms_view {width: 100%;}
.terms_view .title {font-size: 18px; font-weight: 700;}
.terms_view .terms_text {margin-top: 25px; font-size: 14px;}

.join_box {width: 100%; display: flex; flex-direction: column; gap: 20px;}

.join_time span {display: inline;}
.join_time .time {padding-right: 4px; font-size: 16px; color: #888;}

.join_item {display: flex; flex-direction: column; width: 100%;}
.join_item.end {align-items: flex-end;}
.join_item p.number {font-size: 14px; font-weight: 700; width: 100%; text-align: left; padding-bottom: 8px;}
.join_item .title {font-size: 14px; color: #666;}

.join_area .skip {bottom: 70px;}

.join_done {display: flex; flex-direction: column; gap: 30px; align-items: center; margin-top: 130px;}
.join_done i.done {display: block; width: max-content;}
.join_done .done_text {display: flex; flex-direction: column; align-items: center; gap: 8px;}
.done_text .main {font-size: 20px; font-weight: 600; text-align: center;}
.done_text .main em {font-weight: inherit; font-size: inherit; color: #16854f;}
.done_text span {font-size: 16px; color: #888; text-align: center;}


.join_done.ct {margin-top: initial; position: absolute; top: 25%; left: 0; width: 100%; padding: 0 16px;}
.join_done.ct button {margin-top: 15px;}


/* ======== 프로필설정 ======== */
.step_bar {width: 100%; height: 3px; margin-bottom: 30px; position: relative; background-color: #d9d9d9;}
.step_bar .step {position: absolute; left: 0; top: 0; height: inherit; background-color: #16854f; width: 12.5%;}

/* 닉네임+프로필 */
.nickname_box {display: flex; flex-direction: column; align-items: center; gap: 30px;}
.nickname_box .prof_img {width: 120px; height: 120px; position: relative;}
.nickname_box .prof_img .img_box {width: 100%; height: 100%; border-radius: 100%; border: 1px solid #ddd; overflow: hidden;}
.nickname_box .prof_img .img_box img {width: 100%; height: 100%;}
.nickname_box .prof_img .photo {display: block; width: 23px; aspect-ratio: 1; background: url(../img/icon_camera.png) no-repeat center/contain; position: absolute; right: 6px; bottom: 5px;}
.nickname_box .input_box {position: relative;}
.nickname_box .input_box .btn_chk {position: absolute; top: 20px; right: 16px; font-size: 14px; color: #888; line-height: 1; font-weight: 500;}
.nickname_box .input_box .btn_chk.on {color: #16854f;}

/* 성별, 게임유형, 요일 */
.profile_wrap {margin-top: 20px;}
.gender_box {display: flex; gap: 10px;}
.gender_box button {flex-grow: 1; font-weight: 400;}
.gender_box.day {display: grid; grid-template-columns: 1fr 1fr 1fr; row-gap: 8px;}
.gender_box.day button {width: 100%;}
.etc_place {margin-bottom: 20px;}
.etc_place span {font-weight: 600; margin-bottom: 5px;}
.ex-txt span {font-weight: 600; margin-bottom: 5px;}

/* 활동지역 */
.search_con {width: 100%; display: flex; gap: 10px;}
.search_con .search_input {width: calc(100% - 70px); position: relative;}
.search_input input {width: 100%; padding-left: 35px;}
.search_input i {display: block; width: 17px; aspect-ratio: 1; background: url(../img/search-1.png) no-repeat center/contain; position: absolute; top: 50%; left: 10px; transform: translateY(-50%);}
.search_con button {width: 70px;}

.input_con.area {display: flex; gap: 10px;}
.input_con.area button {width: 60px;}
.input_con.area input[type="text"] {width: calc(100% - 60px);}


.area_sample {display: flex; flex-direction: column; align-items: flex-start; width: 100%; gap: 15px; margin-top: 50px;}
.area_sample .tit {font-size: 16px; font-weight: 600;}
.area_sample dl {display: flex; flex-direction: column; align-items: flex-start; gap: 5px; width: 100%;}
.area_sample dl + dl {padding-top: 12px;}
.area_sample dt {font-size: 13px; color: #a6a6a6;}
.area_sample dd {font-size: 15px; color: #5b5b5b; font-weight: 500;}

/* NTRP, 활동시간 */
.set_wrap {width: 100vw; padding: 0 16px; margin-left: -16px; overflow-x: auto;}
.set_bar {width: 100%; overflow-x: auto; display: flex;}
.set_con {min-width: 55px; position: relative; padding-top: 30px ;}
.set_con .box {width: 100%; height: 24px; background-color: #f1f1f1; border-right: 2px solid #fff; position: relative;}
.set_con .box::before {content: ""; display: block; width: 2px; height: 10px; background-color: #ddd; position: absolute; bottom: 100%; right: -2px;}
.set_con span {position: absolute; top: -2px; right: -20%; color: #d8d8d8; font-size: 14px;}
.set_con .st-on {color: #16854f;font-weight: 600;}
.set_con.st-on span {color: #16854f; font-weight: 600;}
.set_con.st-on .box::before {background-color: #16854f;}
.set_con.on .box {background-color: #16854f;}
.set_con.on .box::before {background-color: #16854f;}
.set_con.on span {color: #16854f; font-weight: 600;}

.ntrp-wrap {display: flex; flex-wrap: wrap; column-gap: 10px; row-gap: 10px;}
.ntrp-wrap button {width: calc((100% - 20px) / 3);}
.profile_wrap .ntrp-info {display: flex; align-items: center; gap: 5px; margin-top: 15px; padding: 7px 10px; border-radius: 10px; background: #e1f3eb; justify-content: space-between;}
.profile_wrap .ntrp-info p {display: flex; align-items: center; font-size: 14px; gap: 3px; font-weight: 500; color: #16854f;}
.profile_wrap .ntrp-info p i {font-size: 16px; color: #16854f;}
.profile_wrap .ntrp-info > i {font-size: 12px; color: #16854f; display: block; padding-bottom: 1px;}

.np-info .join_tit {padding-bottom: 25px;}
.np-info .join_tit p {font-size: 18px; font-weight: 600;}
.np-info .join_tit p em {font-weight: 600;}
.np-info .np-sub {margin-bottom: 40px;}
.np-info .np-sub > p {font-size: 16px; margin-bottom: 15px; font-weight: 500;}
.np-info .np-sub > div b {font-size: 14px; font-weight: 800; margin-bottom: 6px; display: block;}
.np-info .np-sub > div:last-child {margin-top: 30px;}
.np-info .np-sub > div > span {font-size: 14px; color: #777; font-weight: 500; margin-top: -12px;}
.np-info .np-sub > div .np-detail ul {display: flex; flex-direction: column; gap: 15px; margin-top: 10px; padding: 20px; border-radius: 10px; background-color: #f9f9f9;}
.np-info .np-sub > div .np-detail ul li {font-size: 14px; display: flex; align-items: flex-start; gap: 5px;}
.np-info .np-sub > div .np-detail ul li p {color: #16854f; font-weight: 600; width: 60px;}
.np-info .np-sub > div .np-detail ul li span {width: calc(100% - 65px); font-weight: 400; color: 111;}

.info-tit {display: flex; align-items: flex-start; flex-direction: row;}
.info-tit span {display: inline-block; width: 17px; margin-top: 4px;}
.info-tit span img {display: inline-block;}

/* 한줄 소개 */
.amount_text {display: flex; justify-content: flex-end; width: 100%; margin-bottom: -5px;}
.amount_text span {font-size: 12px; color: #888; font-weight: 500;}
.amount_text span.type {color: #555;}

.profile_wrap .input_box textarea {width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 5px; outline: none; height: 150px;}


/* 생년월일 추가 */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-inner-spin-button { opacity: 0; appearance: none; }
/* 기존 생년월일 없이 placeholder만 나오게 */
input[type='date']::before {
    content: attr(data-placeholder);
    width: 100%;
    color: #555;
  }
input[type="date"]:valid::before {
    display: none;  appearance: none;
}
input[type=date]::-webkit-datetime-edit-text {
    -webkit-appearance: none;
    display: none;
}
input[type="date"]:not(:focus):invalid {
    &::-webkit-datetime-edit-text,
    &::-webkit-datetime-edit-month-field,
    &::-webkit-datetime-edit-day-field,
    &::-webkit-datetime-edit-year-field {
      -webkit-appearance: none;
      display: none;
    }
  }
input[type="date"] {height: 50px; display: flex; align-items: center; width: 100%; position: relative; justify-content: flex-start; font-size: 16px;}

/* 전체 클릭해도 달력 나오게 수정 */
input[type="date"]::-webkit-calendar-picker-indicator {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: transparent;
color: transparent;
cursor: pointer;
}
/* 아이폰에서 텍스트 좌측 정렬 */
input[type="date"]::-webkit-date-and-time-value { text-align: left; } 

.date-box {width: 100%; border: 1px solid #ddd; border-radius: 5px; position: relative;}
.date-box input {width: 100%; text-align: left;}
.date-box em {position: absolute; top: 50%; right: 20px; transform: translateY(-50%); width: 20px; height: 20px;}


/* 친구찾기 - 시간선택 커스텀 */

.find .find-wrap {display: flex; align-items: center; gap: 10px;}
.find .find-wrap button {width: 50%; margin-bottom: 40px;}
.find .set_wrap p {font-size: 14px; font-weight: 500; margin-bottom: 16px;}

/* ======== 11.04 시간선택 수정 ======== */

.day_main {display: flex; gap: 8px; margin-bottom: 20px;}
.day_main button {width: 32%;}

/* ======== 12.04 장소 수정 ======== */
.ex-txt-inner {margin-top: 8px; display: flex; flex-direction: column; gap: 15px;}
.ex-txt-inner > div span {margin-bottom: 5px; display: inline-block; font-weight: 600;}

/* ======== 12.04 입상내역 ui 수정 ======== */

.award-wrap {display: flex; flex-direction: column; gap: 10px;}
.award-wrap .input_box {display: flex; flex-direction: row; gap: 10px; align-items: center;}
.award-wrap .input_box button {width: 40px; height: 40px; background-color: #16854f; border-radius: 50% !important; background-color: #d9d9d9 !important;}
.award-wrap .input_box button i {color: #fff; font-size: 18px;}