@charset "utf-8"; /* ========================================================= 회원 페이지 디자인 (계정 찾기 / 회원가입 / 회원정보 보기) - Rhymix 회원 기본 스킨(.xm) 마크업을 CSS로만 재디자인 - 기본 스킨 원본은 수정하지 않음 (업데이트 시 유지) - 로그인 페이지(.signin)는 제외 → 기본 스킨 디자인 그대로 사용 - 쪽지함/친구 보기(커뮤니케이션 모듈 .xc)도 동일하게 적용 ========================================================= */ #content :is(.xm:not(:has(.signin)),.xc){max-width:900px;margin:0 auto;padding:20px 0 60px;font-size:15px;color:#333;line-height:1.6;} #content :is(.xm:not(:has(.signin)),.xc) *{box-sizing:border-box;} /* 제목 */ #content :is(.xm:not(:has(.signin)),.xc) h1{position:static;width:auto;height:auto;margin:0 0 30px;padding:0 0 20px;font-size:26px;font-weight:600;color:#222;text-align:center;text-indent:0;overflow:visible;border-bottom:2px solid #222 !important;} #content :is(.xm:not(:has(.signin)),.xc) .nav-tabs~h1{padding-bottom:0;border-bottom:0 !important;} #content :is(.xm:not(:has(.signin)),.xc) em{font-style:normal;color:#222 !important;} /* 안내 메시지 */ #content :is(.xm:not(:has(.signin)),.xc) .message{margin:0 0 25px;padding:15px 20px;border:1px solid #ddd;background:#f7f7f7;color:#555;font-size:14px;} #content :is(.xm:not(:has(.signin)),.xc) .message p{margin:0;} /* 입력폼 공통 */ #content :is(.xm:not(:has(.signin)),.xc) select, #content :is(.xm:not(:has(.signin)),.xc) textarea, #content :is(.xm:not(:has(.signin)),.xc) input[type="text"], #content :is(.xm:not(:has(.signin)),.xc) input[type="password"], #content :is(.xm:not(:has(.signin)),.xc) input[type="date"], #content :is(.xm:not(:has(.signin)),.xc) input[type="number"], #content :is(.xm:not(:has(.signin)),.xc) input[type="email"], #content :is(.xm:not(:has(.signin)),.xc) input[type="url"], #content :is(.xm:not(:has(.signin)),.xc) input[type="tel"]{width:320px;max-width:100%;height:46px;margin:0;padding:0 14px;border:1px solid #ddd;border-radius:0;background:#fff;box-shadow:none;font-size:15px;line-height:normal;color:#333;vertical-align:middle;transition:border-color .2s ease;} #content :is(.xm:not(:has(.signin)),.xc) textarea{height:auto;padding:12px 14px;} #content :is(.xm:not(:has(.signin)),.xc) select{width:auto;min-width:150px;padding-right:10px;} #content :is(.xm:not(:has(.signin)),.xc) select:focus, #content :is(.xm:not(:has(.signin)),.xc) textarea:focus, #content :is(.xm:not(:has(.signin)),.xc) input[type="text"]:focus, #content :is(.xm:not(:has(.signin)),.xc) input[type="password"]:focus, #content :is(.xm:not(:has(.signin)),.xc) input[type="date"]:focus, #content :is(.xm:not(:has(.signin)),.xc) input[type="number"]:focus, #content :is(.xm:not(:has(.signin)),.xc) input[type="email"]:focus, #content :is(.xm:not(:has(.signin)),.xc) input[type="url"]:focus, #content :is(.xm:not(:has(.signin)),.xc) input[type="tel"]:focus{border-color:#333;box-shadow:none;outline:0;} #content :is(.xm:not(:has(.signin)),.xc) input::placeholder{color:#aaa;} #content :is(.xm:not(:has(.signin)),.xc) input:focus:invalid, #content :is(.xm:not(:has(.signin)),.xc) textarea:focus:invalid, #content :is(.xm:not(:has(.signin)),.xc) select:focus:invalid{color:#333;border-color:#333;box-shadow:none;} #content :is(.xm:not(:has(.signin)),.xc) input[type="radio"], #content :is(.xm:not(:has(.signin)),.xc) input[type="checkbox"]{width:17px;height:17px;margin:0 8px 0 0;vertical-align:middle;accent-color:#333;} /* 버튼 공통 */ #content :is(.xm:not(:has(.signin)),.xc) .btn{display:inline-flex;align-items:center;justify-content:center;width:auto;height:auto !important;margin:0;padding:14px 26px !important;border:1px solid #ccc;border-radius:0;background:#fff;box-shadow:none;text-shadow:none;font-size:15px;line-height:1.4 !important;color:#333;cursor:pointer;vertical-align:middle;transition:all .2s ease;} #content :is(.xm:not(:has(.signin)),.xc) .btn:hover{border-color:#333;background:#f5f5f5;} #content :is(.xm:not(:has(.signin)),.xc) .btn-inverse{border-color:#333;background:#333;color:#fff !important;} #content :is(.xm:not(:has(.signin)),.xc) .btn-inverse:hover{border-color:#111;background:#111;} /* 탭 메뉴 (회원정보 보기 등) */ #content :is(.xm:not(:has(.signin)),.xc) .nav-tabs{display:flex;flex-wrap:nowrap;margin:0 0 50px;border-bottom:1px solid #ddd;overflow-x:auto;} #content :is(.xm:not(:has(.signin)),.xc) .nav-tabs:before, #content :is(.xm:not(:has(.signin)),.xc) .nav-tabs:after{display:none;} #content :is(.xm:not(:has(.signin)),.xc) .nav-tabs>li{flex:1 1 auto;float:none;margin-bottom:0;} #content :is(.xm:not(:has(.signin)),.xc) .nav-tabs>li>a{margin:0;padding:14px 10px;text-align:center;white-space:nowrap;border:0;border-bottom:2px solid transparent;border-radius:0;background:none;font-size:15px;line-height:1.4;color:#888;} #content :is(.xm:not(:has(.signin)),.xc) .nav-tabs>li>a:hover, #content :is(.xm:not(:has(.signin)),.xc) .nav-tabs>li>a:focus{border:0;border-bottom:2px solid #ccc;background:none;color:#333;} #content :is(.xm:not(:has(.signin)),.xc) .nav-tabs>.active>a, #content :is(.xm:not(:has(.signin)),.xc) .nav-tabs>.active>a:hover, #content :is(.xm:not(:has(.signin)),.xc) .nav-tabs>.active>a:focus{border:0;border-bottom:2px solid #222;background:none;font-weight:600;color:#222;} /* ---------- 계정 찾기 ---------- */ #content :is(.xm:not(:has(.signin)),.xc)>section{max-width:480px;margin:0 auto;padding:50px 40px;border:1px solid #ddd;} #content :is(.xm:not(:has(.signin)),.xc)>section h1{margin:0 0 12px;padding:0;font-size:24px;border-bottom:0 !important;} #content :is(.xm:not(:has(.signin)),.xc)>section p{margin:0 0 30px;font-size:14px;color:#777;word-break:keep-all;} #content :is(.xm:not(:has(.signin)),.xc)>section form{margin:0;} #content :is(.xm:not(:has(.signin)),.xc)>section form input[type="email"]{width:100%;margin-bottom:12px;} #content :is(.xm:not(:has(.signin)),.xc)>section form br{display:none;} #content :is(.xm:not(:has(.signin)),.xc)>section form .btn{width:100%;padding:16px 26px !important;font-size:16px;} #content :is(.xm:not(:has(.signin)),.xc)>hr{max-width:480px;margin:40px auto;border:0;border-top:1px solid #eee;} /* ---------- 회원가입 ---------- */ #content :is(.xm:not(:has(.signin)),.xc) .form-horizontal{margin:0;} #content :is(.xm:not(:has(.signin)),.xc) .form-horizontal .control-group{margin:0;padding:18px 0;border-bottom:1px solid #eee;} #content :is(.xm:not(:has(.signin)),.xc) .form-horizontal .control-label{float:left;width:170px;margin:0;padding-top:12px;text-align:left;font-size:15px;font-weight:500;color:#222;} #content :is(.xm:not(:has(.signin)),.xc) .form-horizontal .controls{margin-left:190px;} #content :is(.xm:not(:has(.signin)),.xc) .form-horizontal .help-inline{display:block;margin-top:8px;padding-left:0;font-size:13px;color:#888;} #content :is(.xm:not(:has(.signin)),.xc) .form-horizontal .controls label{display:inline-flex;align-items:center;margin:0 28px 0 0;padding:12px 0 0;font-size:15px;color:#555;cursor:pointer;} #content :is(.xm:not(:has(.signin)),.xc) .form-horizontal .controls[style]{padding-top:0 !important;} #content :is(.xm:not(:has(.signin)),.xc) .form-horizontal .dateRemover{height:46px !important;margin-left:6px;padding:0 18px !important;font-size:14px;} /* 약관 동의 */ #content :is(.xm:not(:has(.signin)),.xc) .agreement{margin:0 0 20px;padding:25px;border:1px solid #ddd;border-radius:0;background:#fafafa;} #content :is(.xm:not(:has(.signin)),.xc) .agreement>.title{margin:0 0 15px;padding:0 0 15px;border-bottom:1px solid #e5e5e5;font-size:16px;font-weight:600;color:#222;} #content :is(.xm:not(:has(.signin)),.xc) .agreement>.text{font-size:14px;color:#666;} #content :is(.xm:not(:has(.signin)),.xc) .agreement>.confirm{margin:15px 0 0;padding:15px 0 0;border-top:1px solid #e5e5e5;} #content :is(.xm:not(:has(.signin)),.xc) .agreement>.confirm label{display:inline-flex;align-items:center;margin:0;font-size:14px;color:#333;cursor:pointer;} /* 하단 버튼 (취소 / 등록) */ #content :is(.xm:not(:has(.signin)),.xc) .form-horizontal .btnArea{display:flex;justify-content:center;gap:10px;margin-top:0;padding-top:50px !important;border-top:0 !important;} #content :is(.xm:not(:has(.signin)),.xc) .form-horizontal .btnArea .btn{float:none;width:180px;padding:17px 26px !important;font-size:16px;} #content :is(.xm:not(:has(.signin)),.xc) .form-horizontal .btnArea .btn-inverse{order:2;} /* ---------- 회원정보 보기 ---------- */ #content :is(.xm:not(:has(.signin)),.xc) .dl-horizontal{display:grid;grid-template-columns:190px 1fr;margin:0;border-top:2px solid #222;} #content :is(.xm:not(:has(.signin)),.xc) .dl-horizontal:before, #content :is(.xm:not(:has(.signin)),.xc) .dl-horizontal:after{display:none;} #content :is(.xm:not(:has(.signin)),.xc) .dl-horizontal dt, #content :is(.xm:not(:has(.signin)),.xc) .dl-horizontal dd{float:none;width:auto;margin:0;padding:16px 20px;border-bottom:1px solid #eee;} #content :is(.xm:not(:has(.signin)),.xc) .dl-horizontal dt{background:#fafafa;text-align:left;font-weight:500;color:#222;} #content :is(.xm:not(:has(.signin)),.xc) .dl-horizontal dd{color:#555;word-break:break-all;} #content :is(.xm:not(:has(.signin)),.xc) .btnArea.btn-group{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:40px;} #content :is(.xm:not(:has(.signin)),.xc) .btnArea.btn-group .btn{min-width:130px;} #content :is(.xm:not(:has(.signin)),.xc) .btnArea.btn-group .btn:last-child{color:#999;} /* ---------- 목록형 페이지 (스크랩 / 저장함 / 작성 글·댓글 / 쪽지함 / 친구) ---------- */ /* float 해제 (원본 스킨의 clear 요소가 동작하지 않아 하단 영역이 밀려 올라오는 문제) */ #content :is(.xm:not(:has(.signin)),.xc){display:flow-root;} #content :is(.xm:not(:has(.signin)),.xc)>div, #content :is(.xm:not(:has(.signin)),.xc) .btnArea, #content :is(.xm:not(:has(.signin)),.xc) .pagination{display:flow-root;} /* 상단·하단 버튼 영역 */ #content :is(.xm:not(:has(.signin)),.xc) form{margin:0;} #content :is(.xm:not(:has(.signin)),.xc)>div:not([class]), #content :is(.xm:not(:has(.signin)),.xc)>.btnArea, #content :is(.xm:not(:has(.signin)),.xc) form>.btnArea{margin:0 0 20px;} #content :is(.xm:not(:has(.signin)),.xc) form>.btnArea:last-of-type{margin:20px 0 0;text-align:right;} #content :is(.xm:not(:has(.signin)),.xc) .btnArea select+.btn, #content :is(.xm:not(:has(.signin)),.xc) .btnArea select+.btn-group, #content :is(.xm:not(:has(.signin)),.xc) .btnArea .btn-group+.btn, #content :is(.xm:not(:has(.signin)),.xc) .btnArea .etc+select{margin-left:6px;} #content :is(.xm:not(:has(.signin)),.xc) .btnArea .etc{margin-right:6px;} #content :is(.xm:not(:has(.signin)),.xc) .btnArea .btn-group{display:inline-flex !important;gap:6px;vertical-align:middle;font-size:inherit;} #content :is(.xm:not(:has(.signin)),.xc) .btn-group>.btn{margin:0;border-radius:0;} /* 쪽지함 분류 버튼: 선택된 항목(인라인 bold) 강조 */ #content :is(.xm:not(:has(.signin)),.xc) .btn-group>.btn[style*="bold"]{border-color:#333;background:#333;color:#fff;} /* 테이블 */ #content :is(.xm:not(:has(.signin)),.xc) .table{width:100%;margin:0;border-top:2px solid #222;border-bottom:1px solid #ddd;border-collapse:collapse;} #content :is(.xm:not(:has(.signin)),.xc) .table>caption{padding:0 0 10px;text-align:left;font-size:14px;font-weight:500;color:#555;} #content :is(.xm:not(:has(.signin)),.xc) .table th, #content :is(.xm:not(:has(.signin)),.xc) .table td{padding:15px 12px;border-top:1px solid #eee;vertical-align:middle;font-size:14px;line-height:1.5;} #content :is(.xm:not(:has(.signin)),.xc) .table thead th{border-top:0;border-bottom:1px solid #ddd;background:#fafafa;font-weight:600;color:#222;} #content :is(.xm:not(:has(.signin)),.xc) .table td{color:#555;} #content :is(.xm:not(:has(.signin)),.xc) .table td a{color:#333;} #content :is(.xm:not(:has(.signin)),.xc) .table-striped tbody>tr:nth-child(odd)>td, #content :is(.xm:not(:has(.signin)),.xc) .table-striped tbody>tr:nth-child(odd)>th{background:none;} #content :is(.xm:not(:has(.signin)),.xc) .table-hover tbody tr:hover>td{background:#f7f7f7;} #content :is(.xm:not(:has(.signin)),.xc) .table select{min-width:110px;height:38px;} #content :is(.xm:not(:has(.signin)),.xc) .table button.text{padding:0;border:0;background:none;color:#888;cursor:pointer;text-decoration:underline;} /* 하단 검색 + 페이지 번호 */ #content :is(.xm:not(:has(.signin)),.xc) .pagination{margin:30px 0 0;} #content :is(.xm:not(:has(.signin)),.xc) .pagination>form{display:flex;gap:6px;align-items:center;} #content :is(.xm:not(:has(.signin)),.xc) .pagination>form input[type="text"]{width:220px;} #content :is(.xm:not(:has(.signin)),.xc) .pagination ul{display:flex;margin:0;padding:0;border-radius:0;box-shadow:none;list-style:none;} #content :is(.xm:not(:has(.signin)),.xc) .pagination-centered ul{justify-content:center;} #content :is(.xm:not(:has(.signin)),.xc) .pagination ul>li>a, #content :is(.xm:not(:has(.signin)),.xc) .pagination ul>li>span{float:none;display:block;margin-left:-1px;padding:8px 14px;border:1px solid #ddd;border-radius:0 !important;background:#fff;font-size:14px;line-height:1.4;color:#555;} #content :is(.xm:not(:has(.signin)),.xc) .pagination ul>li:first-child>a{margin-left:0;} #content :is(.xm:not(:has(.signin)),.xc) .pagination ul>li>a:hover{background:#f5f5f5;color:#222;} #content :is(.xm:not(:has(.signin)),.xc) .pagination ul>.active>a{border-color:#333;background:#333;color:#fff;position:relative;z-index:1;}