html{ background:#e1e1e1}
.pt0 {padding-top: 0 !important;}
.pt20 {padding-top: 20px !important;}
.pt55 {padding-top: 55px !important;}
.pt60 {padding-top: 60px !important;}
.pt90 {padding-top: 90px !important;}
.pt100 {padding-top: 100px !important;}
.pt120 {padding-top: 120px !important;}
.pt140 {padding-top: 140px !important;}
.pt200 {padding-top: 200px !important;}

.pb0 {padding-bottom: 0 !important;}
.pb20 {padding-bottom: 20px !important;}
.pb30 {padding-bottom: 30px !important;}
.pb40 {padding-bottom: 40px !important;}
.pb60 {padding-bottom: 60px !important;}
.pb70 {padding-bottom: 70px !important;}
.pb80 {padding-bottom: 80px !important;}
.pb90 {padding-bottom: 90px !important;}
.pb100 {padding-bottom: 100px !important;}

.mt0 {margin-top: 0 !important;}
.mt10 {margin-top: 10px !important;}
.mt100 {margin-top: 100px !important;}
.mt20 {margin-top: 20px !important;}
.mt30 {margin-top: 30px !important;}
.mt40 {margin-top: 40px !important;}
.mt50 {margin-top: 50px !important;}
.mt60 {margin-top: 60px !important;}
.mt90 {margin-top: 90px !important;}

.mr0 {margin-right: 0 !important;}
.mr20 {margin-right: 20px !important;}
.mr30 {margin-right: 30px !important;}
.mr40 {margin-right: 40px !important;}
.mr60 {margin-right: 60px !important;}
.mr80 {margin-right: 80px !important;}
.mr90 {margin-right: 90px !important;}


.mb0 {margin-bottom: 0px !important;}
.mb10 {margin-bottom: 10px !important;}
.mb20 {margin-bottom: 20px !important;}
.mb50 {margin-bottom: 50px !important;}
.mb90 {margin-bottom: 90px !important;}



.w1200 {margin: auto; width: 1200px !important;}
.w100p {width: 100% !important;}
.w100x {width: 100%;}
.h100p {height: 100% !important;}


.fz16 {font-size: 16px !important;}
.fz18 {font-size: 18px !important;}
.fz20 {font-size: 20px !important;}
.fz30 {font-size: 30px !important;}
.fz40 {font-size: 40px !important;}
.fz50 {font-size: 50px !important;}



.cross{ display:block; width:35%; height:2px; position:absolute;left:50%;top:50%;transform:translate(-50% , -50%);   background:#ff421d; }
.cross2{ display:block; width:2px; height:35%; margin-top:-17%; margin-left:-1.2%; position:absolute;left:50%;top:50%;transform:translate(-50% , -50%) , rotate(90deg); background:#ff421d;}
/* --- 변수 및 공통 --- */
:root {
    --main-color: #ff421d;
    --text-color: #333;
    --gray-text: #888;
    --border-color: #eee;
}

/* 랭킹 페이지 전용 스타일 */
    .rank_container { max-width: 100%; margin: 0 auto; padding: 20px 0; background: #fff; min-height: 50vh; }
    
    /* 1. 메인 탭 (공식 vs 개인) */
    .rank_type_tab { border-top:1px solid #000; border-bottom:1px solid #000; display: flex; background: #fff; border-radius: 0px; overflow: hidden; width:100%; margin:auto; margin-bottom: 20px; position: relative; }
    .rt_btn {  flex: 1; text-align: center; padding: 12px 0; font-size: 1.1rem; font-weight: 400; cursor: pointer; color: #000; z-index: 2; transition: color 0.3s; }
    .rt_btn.active { color: #fff; }
    .rt_btn:nth-child(2){ border-right:1px solid #000;}    
    /* 슬라이딩 배경 효과 */
    .rt_bg { position: absolute; top: 0; left: 0; width: 50%; height: 100%; border-radius: 0px; transition: background-image 0.3s ease; z-index: 1; }
    
    /* 테마별 색상 (공식: 그레이 / 개인: 보라) */
    .theme_official .rt_bg { background: #fff; left: 0; }
    .theme_official .rt_btn.active { color: #000;font-weight:400; background-image:url(/theme/basic/img/main/tab_checker.png );background-repeat:no-repeat; background-position:center; background-size:30% auto; }
    
    .theme_personal .rt_bg { background: #fff; left: 50%;  background-image:url(/theme/basic/img/main/tab_checker.png );background-repeat:no-repeat; background-position:center; background-size:30% auto;  }
    .theme_personal .rt_btn.active { color: #000; }

    /* 2. 서브 탭 (정렬 기준) */
    .sub_tab_scroll {text-align:center; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; margin-bottom: 20px; padding-bottom: 5px; }
    .sub_tab_scroll::-webkit-scrollbar { display: none; }
    
    .st_btn { display: inline-block; padding: 8px 16px; border: 1px solid #ddd; border-radius: 20px; color: #666; font-size: 0.95rem; margin-right: 5px; cursor: pointer; background: #fff; transition: all 0.2s; }
    
    /* 서브탭 활성화 스타일 (테마별) */
    .theme_official .st_btn.active { background: #ff421d; color: #fff; border-color: #ff421d; }
    .theme_personal .st_btn.active { background: #a0a0a0; color: #fff; border-color: #a0a0a0; }

    /* 3. 랭킹 리스트 */
    .rank_list { display: flex; flex-direction: column; gap: 10px;border-top:1px solid #000; }
    
    .rank_item {cursor:pointer; display: flex; align-items: center; padding: 15px; border-radius: 0px; background: #fff; position: relative; box-shadow: 0 2px 5px rgba(0,0,0,0.00); }
    
    /* 1,2,3위 스타일 차별화 (배경색 등) */
    .theme_official .rank_item.top1 {  border: 0px solid #ff421d; }
	


	
    .theme_personal .rank_item.top1 {   border: 0px solid #ff421d; }
	.theme_official .rank_item.top1{ 
 
	}
.theme_official .rank_item.top1:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index:1;
  background: linear-gradient(
    180deg,
    #ff5f00,
    #ffdbc6,
    #ff5f00
  );
  animation: glow 2s linear infinite;
}
@keyframes glow {
  0% { opacity: .2; }
  50% { opacity: .0; }
  100% { opacity: .2; }
}
@keyframes bg-pulse {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

	
	.theme_personal .rank_item .r_badge{  }
	.theme_personal .rank_item{ background-color:#f1f1f1 ;}	
    .r_num { width: 40px; font-size: 1.5rem; font-weight: 100; text-align: center; margin-right: 15px; color: #555;  }
    .top1 .r_num { color: #000;  ; font-size: 1.8rem;  background-image:url(/theme/basic/img/main/tab_checker.png );background-repeat:no-repeat; background-position:center 90%; background-size:90% auto; }
    .top2 .r_num { color: #000;  font-size: 1.8rem;background-image:url(/theme/basic/img/main/tab_checker.png );background-repeat:no-repeat; background-position:center 90%; background-size:90% auto;  }
    .top3 .r_num { color: #000; font-size: 1.8rem;  background-image:url(/theme/basic/img/main/tab_checker.png );background-repeat:no-repeat; background-position:center 90%; background-size:90% auto; }

    .r_profile { width: 50px; height: 50px; margin-right: 15px; border: 2px solid #fff; flex-shrink: 0;  position:relative; }
    .r_profile img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; overflow: hidden; }
    
    .r_info { flex: 1; }
    .r_nick { font-weight: bold; font-size: 1rem; color: #333; margin-bottom: 4px; }
    .r_data { font-size: 0.85rem; color: #666;   position:absolute;right:1%; top:50%;transform:translateY(-50%);}
    .r_data strong { font-size: 1rem; color: #333; }
    
    .r_badge { width: 25px;  position:absolute;right:-12px;bottom:-9px; }
    .r_badge img { width: 80px; }

    /* 로딩 인디케이터 */
    .loading_box { text-align: center; padding: 50px; color: #999; display: none; }
	

.rank_search_box {
        position: relative;
        margin-bottom: 0px;
    }
    .rs_input {
        width: 100%;
        padding: 12px 45px 12px 20px; /* 아이콘 공간 확보 */
        border: 0px solid #ff421d; /* 보라색 테두리 */
        border-radius: 0px;
        font-size: 1rem;
        outline: none;
        color: #333;
        box-sizing: border-box;
		border-top:1px solid #000;
		
    }
    .rs_input::placeholder { color: #aaa; }
    .rs_btn {
        position: absolute;
        top: 50%;
        right: 15px;
        transform: translateY(-50%);
        background: none;
        border: none;
        color: #ff421d;
        font-size: 1.2rem;
        cursor: pointer;
    }
  /* 회전 라인 */
  .rotation-line {
    position: absolute;
    bottom: 25%;
    width: 70%;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
  }

  /* 텍스트 */
  .count-text {
    position: absolute;
    bottom: 40%;
	text-align:center; width:100%;
    font-size: 48px;
    font-weight: 700;
    color: #ffffff;
    text-shadow: 0 0 6px rgba(0,0,0,0.5);
    pointer-events: none;
  }
  
  .fixed{ overflow:hidden;}
    /* 오른쪽 슬라이드 메뉴 */
	
	.side_wrap{ width:96%; margin:auto; border:0px solid rgba(0,0,0,0.6); height:100%;}
    #sideMenu {
        position: absolute;       /* body가 아닌 #page 기준 */
        top: 0;
        right: -200%;             /* 처음에는 page 밖 */
        width: 80%;              /* page 폭의 100% → PC는 최대 600px */
        height: 100vh;
        background: #fff;
    
        transition: right 0.35s ease;
        z-index: 100;
        padding: 20px;
    }
        /* 닫기 버튼 */
        #closeMenu {
            position: absolute;
            top: 30px;
            right: 50px;
            cursor: pointer;
            font-size: 24px;
        }
		
		
		
.check input[type="checkbox"] {
    -webkit-appearance: none;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    width: 20px;
    height: 20px;
    cursor: pointer;
    outline: none !important;
    border: 1px solid #9999;
    vertical-align: middle;
}
.check input[type="checkbox"]::before {
    content: "\2713";
    position: absolute;
    top: 50%;
    left: 50%;
    overflow: hidden;
    transform: scale(0) translate(-50%, -50%);
    line-height: 1;
}
.check input[type="checkbox"]:checked {
    background-color: #ff421d;
    border-color: rgba(255, 255, 255, 0.3);
    color: white;
}
.check input[type="checkbox"]:checked::before {
    border-radius: 4px;
    transform: scale(1) translate(-50%, -50%)
} 
/* 레이어 팝업 배경 (어두운 오버레이) */
.layer_popup_overlay {
    display: none; /* 기본 숨김 */
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 99999;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(3px); /* 배경 블러 효과 */
}

/* 팝업 박스 */
.layer_popup_box {
    background: #fff;
    width: 85%;
    max-width: 320px;
    padding: 30px 25px;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    animation: popUpAni 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* 팅겨오르는 효과 */
    transform: scale(1);
}

/* 상단 느낌표 아이콘 */
.layer_icon {
    width: 50px; height: 50px;
    margin: 0 auto 20px;
    background: #f0f0ff; /* 연한 보라 배경 */
    color: #ff421d;
    font-size: 24px;
    font-weight: bold;
    border-radius: 50%;
    line-height: 50px;
}

/* 메시지 텍스트 */
.layer_text {
    font-size: 1.05rem;
    color: #333;
    line-height: 1.5;
    margin-bottom: 25px;
    word-break: keep-all; /* 단어 단위 줄바꿈 */
}

/* 확인 버튼 */
.btn_layer_confirm {
    width: 100%;
    padding: 14px 0;
    background: #ff421d;
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s;
}
.btn_layer_confirm:hover {
    background: #5855d6;
}

/* 나타나는 애니메이션 */
@keyframes popUpAni {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}



    /* === 모바일 레이아웃 컨테이너 === */
    .app_container {
        max-width: 650px; /* 모바일 기준 폭 */
        margin: 0 auto;
        min-height: 90vh;
        background-color: #fff;
        position: relative;
        overflow-x: hidden;
    }


 .header_top {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0px 20px; border-bottom: 1px solid #eee;
}
/* 상단 네비게이션 전체 스타일 */
.mypage-nav {
    display: flex;
    width: 100%;
    height: 56px; /* 헤더 높이 */
    background-color: #fff;
    border-bottom: 1px solid #333; /* 하단 보더 */
    align-items: stretch; /* 자식 요소 높이를 부모에 맞춤 (세로선 때문) */
}

/* 양 끝 버튼 영역 (뒤로가기, 설정) */
.nav-side {
    width: 60px; /* 아이콘 영역 너비 */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 아이콘 스타일 (Font Awesome 6.4 오렌지 색상) */
.nav-icon {
    font-size: 22px;
    color: #ff6020; /* 이미지와 유사한 오렌지/코랄 색상 */
    text-decoration: none;
    transition: opacity 0.2s;
}

.nav-icon:hover {
    opacity: 0.7;
}

/* 중앙 타이틀 영역 및 세로 구분선 */
.nav-center {
    flex: 1; /* 남은 공간 모두 차지 */
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid #888; /* 왼쪽 세로선 */
    border-right: 1px solid #888; /* 오른쪽 세로선 */
}

.nav-center h1 {
    font-size: 18px;
    font-weight: 700;
    color: #000;
    margin: 0;
}
#recordForm{ padding:0  0px;}
    /* === 공통 타이포그래피 (직관적 클래스명) === */
    .header_title { padding: 20px; font-size: 1.2rem; color: #333; font-weight: 500;}
	.header_title.b2{ color:#ff5b0b; border-bottom:1px solid #000;}
    .tx_bold { font-weight: 700; }
    .tx_blue { color: #ff421d; }

    /* =========================================
       1번 화면: 업로드 (Upload View)
    ========================================= */
    .view_upload {
        display: flex;
        flex-direction: column;
        height: 90vh;
        padding:0  20px 20px 20px;
    }
    
    .upload_box {
        flex: 1;
        background-color: #e0e0e0;
        border-radius: 15px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        position: relative;
        margin-bottom: 20px;
    }

    /* 플러스 버튼 스타일 */
    .btn_plus_circle {
        width:60px;
        height: 60px;
        background:#ff421d;
        border-radius: 50%;
        position: relative;
    }
    .btn_plus_circle::before, .btn_plus_circle::after {
        content: ''; position: absolute; background-color: #fff;
        top: 50%; left: 50%; transform: translate(-50%, -50%);
    }
    .btn_plus_circle::before { width: 50%; height: 2px; } /* 가로선 */
    .btn_plus_circle::after { width: 2px; height: 50%; } /* 세로선 */

    .btn_bottom_upload {
        width:60%;
        padding: 15px;
		display:block; margin:auto;
		position:relative; 
        background-color: #fff;
        color: #000;
        border: none;
        border-radius:  0px;
        font-size: 1.1rem;
        font-weight: bold;
        cursor: pointer;
		background-image:url(/theme/basic/img/main/tab_checker.png );background-repeat:no-repeat; background-position:center 100%; background-size:20% auto;
    }
    .btn_bottom_upload:before{ content :"+"; position:absolute;left:0px;top:10px; font-size:18px; font-weight:500; display:block; }
    .btn_bottom_upload:after{ content :"+"; position:absolute;right:0px;top:10px; font-size:18px; font-weight:500;display:block; }
    /* 실제 파일 인풋은 숨김 */
    #file_input { display: none; }


    /* =========================================
       2번 화면: 스캔 중 (Scanning View)
    ========================================= */
    .view_scan {
        display: none; /* 초기 숨김 */
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        background-color: rgba(0,0,0,0.8);
        z-index: 10;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }

    .scan_img_wrapper {
        position: relative;
        width: 90%;
        max-height: 80vh;
        overflow: hidden;
        border-radius: 10px;
    }

    .scan_img_wrapper img { width: 100%; display: block; }

    /* 스캔 애니메이션 바 */
    .scan_bar {
        position: absolute;
        top: 0; left: 0;
        width: 100%;
        height: 5px;
        background: #00ff00;
        box-shadow: 0 0 10px #00ff00;
        animation: scanAnim 2s infinite linear;
    }

    .scan_text {
        position: absolute;
        bottom: 20%;
        left: 50%;
        transform: translateX(-50%);
        color: white;
        font-size: 1.5rem;
        font-weight: bold;
        text-shadow: 0 2px 5px rgba(0,0,0,0.5);
    }

    @keyframes scanAnim {
        0% { top: 0; opacity: 0; }
        10% { opacity: 1; }
        90% { opacity: 1; }
        100% { top: 100%; opacity: 0; }
    }


    /* =========================================
       3번 화면: 결과 폼 (Form View)
    ========================================= */
    .view_form {
        display: none; /* 초기 숨김 */
        padding: 0  0px 20px  0px;
        padding-bottom: 50px;
    }
    
    .form_card {
        background-color: #fff;
        padding: 20px;
        border-radius: 0px;
        margin-bottom: 20px;
    }

     .form_row {
        margin-bottom: 25px; /* 행 간격 */
        position: relative;
		display:flex; 
		justify-content: space-between; align-items:center;flex-wrap: wrap;
    }
     .form_row2 {
        margin-bottom: 25px; /* 행 간격 */
        position: relative;
		display:block; 
		justify-content: space-between; align-items:center;flex-wrap: wrap;
    }
     .form_row2 .form_label{ margin-bottom:10px;}
    /* 라벨 스타일 */
    .form_label {
        display: block;
        font-weight: bold;
        color: #333;
     
        font-size: 1rem;
    }

    /* [핵심] 입력 요소들을 감싸는 래퍼 (Wrapper) */
    .input_wrap {
        display: flex;
        flex-direction: column; /* 세로로 정렬 */
        gap: 10px; /* 요소 사이 간격 (Select와 Input 사이) */
        width: 100%;
    }

    /* 셀렉트 박스와 인풋 박스 공통 스타일 */
    .custom_select_full, 
    .custom_input {
        width: 100%; /* 부모 너비에 꽉 차게 */
        height: 48px; /* 높이 통일 */
        padding: 0 12px;
        border: 1px solid #ddd;
        border-radius: 0px;
        font-size: 1rem;
        box-sizing: border-box; /* 패딩 포함 너비 계산 */
        outline: none;
        background-color: #fff;
        transition: border-color 0.2s;
    }

    /* 포커스 시 색상 변경 */
    .custom_select_full:focus, 
    .custom_input:focus {
        border-color: #ff5b0b;
    }

    /* 숨겨진 인풋이 나타날 때 애니메이션 (선택사항) */
    .custom_input[style*="display: block"] {
        animation: fadeIn 0.3s ease-in-out;
    }
    .form_label { min-width: 60px; color: #333; font-size: 1.05rem;  }
    .form_input {
        flex: 1;
        background: transparent;
        border: none;
        border-bottom: 1px solid #ccc;
        padding: 5px;
        font-size: 1rem;
        color: #333;
		max-width:80%;
    }
    .form_input:focus { outline: none; border-bottom: 1px solid #ff421d; }

    /* 추가 정보 섹션 */
	.add_info_area{ background:#e5e5e5; padding:    20px;   }
    .add_info_title {  border-top:1px solid #000;border-bottom:1px solid #000; color: #666; font-size: 0.9rem; padding:10px 20px ; color:#ff5b0b;  margin-bottom:20px;}
    
    .select_group { display: flex; gap: 5px; margin-bottom: 20px; padding :20px; }
    .select_group span{font-weight:bold;line-height:1.6; font-size:14px;padding-right:10px;}	
    .custom_select {
        flex: 1;
        padding: 8px;
        border: none;
        border-bottom: 2px solid #ff421d;
        background: transparent;
        color: #555;
        font-size: 0.9rem;
    }

    /* 체크박스 섹션 */
    .agree_section {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        font-size: 0.8rem;
        color: #777;
        margin-bottom: 20px;
        line-height: 1.4;
    }
    #chk_agree { margin-top: 3px; transform: scale(1.2); }

    .btn_save {
        width: 100%;
        padding: 15px; 
		background-color:transparent; 
        color: #333;
        font-size: 1.1rem;
        border: none;
        border-radius: 10px;
        font-weight: bold;
        cursor: pointer;
		background-image:url(/theme/basic/img/main/tab_checker.png );background-repeat:no-repeat; background-position:center 100%; background-size:20% auto;
    }


.agree_vs{ padding:10px 20px; background:#fff;border-bottom:1px solid #000;}
.agree_item { position:relative;  padding-left:40px; word-break:keep-all; margin-bottom:20px;}
.agree_item input[type="checkbox"] + label {color:#676e70}
.agree_item input[type="checkbox"] + label:hover {color:#2172f8}
.agree_item input[type="checkbox"] + label span {position:absolute;top: 5px;left:15px;width:17px;height:17px;display:block;background:#fff;border:1px solid #ff5b0b;border-radius:3px}
.agree_item input[type="checkbox"]:checked + label {color:#000}
.agree_item input[type="checkbox"]:checked + label span {background:url('/img/chk.png') no-repeat 50% 50% #ff5b0b;border-color:#ff5b0b;border-radius:3px}
.agree_item.chk_all input[type="checkbox"] + label span {top:18px}
.selec_chk {position:absolute;top:0;left:0;width:0;height:0;opacity:0;outline:0;z-index:-1;overflow:hidden}



    /* =========================================
       4번 화면: 레이어 팝업 (Modal)
    ========================================= */
    .modal_overlay {
        display: none;
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0,0,0,0.6);
        z-index: 100;
        align-items: center;
        justify-content: center;
    }

    .modal_box {
        width: 80%;
        max-width: 320px;
        background: white;
        padding: 30px 20px;
        border-radius: 20px;
        text-align: center;
        box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    }

    .modal_text { font-size: 1.1rem; margin-bottom: 20px; line-height: 1.5; color: #333; }
    .btn_modal_go {
        display: block;
        width: 100%;
        padding: 12px;
        background: transparent;
        border: none;
        border-top: 1px solid #eee;
        font-size: 1.3rem;
        color: #ff421d;
        margin-top: 10px;
        cursor: pointer;
    }




/*main */

#openMenu{ font-size:30px; color:#ff421d; line-height:1;}


.sidebar_overlay { 
        position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
        background: rgba(0,0,0,0.5); z-index: 9998; display: none; 
        backdrop-filter: blur(2px); /* 배경 블러 효과 */
    }
    
    .sidebar_wrap { 
        position: fixed; top: 0; right: -320px; /* 숨김 위치 */
        width: 300px; height: 100%; 
        background: #fff; z-index: 9999; 
        transition: right 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* 부드러운 애니메이션 */
        display: flex; flex-direction: column; 
        box-shadow: -5px 0 15px rgba(0,0,0,0.1);
    }
    .sidebar_wrap.open { right: 0; }

    /* 헤더 영역 */
    .sb_header { padding: 40px 25px 30px; border-bottom: 1px solid #ff421d; position: relative; width:94%; margin:auto;  }
    .sb_close { 
        position: absolute; top: 20px; right: 20px; 
        font-size: 28px; cursor: pointer; color: #333; padding: 5px; z-index:3;
        line-height: 1;
    }
    .sb_logo { 
        font-size: 1.4rem; font-weight: 800; color: #ff421d; 
        margin-bottom: 25px; display: block; letter-spacing: -0.5px;
        font-family: 'Montserrat', sans-serif; /* 로고 폰트 예시 */
    }
    .sb_logo img{ max-width:50px;}	

    /* 프로필 영역 */
    .sb_profile { display: flex; align-items: center; gap: 15px; }
    .sb_mb_img { 
        width: 55px; height: 55px; border-radius: 50%; overflow: hidden; 
        background: #f5f5f5; border: 2px solid #ff421d; 
        flex-shrink: 0;
    }
    .sb_mb_img img { width: 100%; height: 100%; object-fit: cover; }
    .sb_mb_info { display: flex; flex-direction: column; justify-content: center; }
    .sb_nick { font-weight: 400; font-size: 1.1rem; color: #ff421d; margin-bottom: 3px; }
    .sb_mypage_link { 
        font-size: 0.9rem; color: #000; text-decoration: none; 
        display: flex; align-items: center; gap: 4px;
    }
    .sb_mypage_link:hover { color: #ff421d; }

    /* 메뉴 리스트 */
    .sb_menu_list { flex: 1; padding: 30px 25px; list-style: none; margin: 0; overflow-y: auto; }
    .sb_menu_list li { margin-bottom: 25px; }
    .sb_menu_list a { 
        display: flex; align-items: center; text-decoration: none; 
        color: #333; font-size: 1.15rem; font-weight: 600; 
        transition: color 0.2s;
    }
    .sublink { padding-left:10px; margin-top:10px;}	
    .sublink a { 
        display: block; align-items: center; text-decoration: none; 
        color: #333; font-size: 0.85rem; font-weight: 600; 
        transition: color 0.2s;
    }
	
	
    .sb_menu_list a:hover { color: #4a47d3; }
    .sb_menu_icon { width: 30px; text-align: center; margin-right: 12px; font-size: 1.2rem; }

    /* 푸터 */
    .sb_footer { padding: 25px; border-top: 1px solid #ff421d; background: #fff; }
    .sb_footer a { 
        text-decoration: none; color: #333; font-weight: 700; 
        display: block; font-size: 1rem; 
    }
    .sb_footer a.logout { color: #999; font-weight: normal; font-size: 0.95rem; }

    /* === 모바일 최적화 (화면폭 480px 이하) === */
    @media (max-width: 480px) {
        .sidebar_wrap { width: 85%; max-width: 300px; } /* 화면의 85% 차지 */
        .sb_header { padding: 30px 20px 20px; }
        .sb_menu_list a { font-size: 1.1rem; }
		.sublink { padding-left:10px; margin-top:10px;}	
		.sublink a { 
			display: block; align-items: center; text-decoration: none; 
			color: #333; font-size: 0.85rem; font-weight: 600; 
			transition: color 0.2s;
		}		
		
    }
	
	
	
/* 개인기록 페이지*/	
    .record_container { padding: 20px; padding-bottom: 80px; }
    
    .rec_item { 
        background: #fff; 
        border: 1px solid #eee; 
        border-radius: 15px; 
        padding: 20px; 
        margin-bottom: 15px; 
        box-shadow: 0 4px 10px rgba(0,0,0,0.03); 
        position: relative;
        transition: transform 0.2s;
    }
    .rec_item:hover { transform: translateY(-3px); box-shadow: 0 6px 15px rgba(0,0,0,0.06); }

    /* 날짜 및 삭제 버튼 */
    .rec_header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
    .rec_date { font-size: 0.9rem; color: #888; font-weight: 500; display: flex; align-items: center; gap: 5px; }
    .btn_del_rec { color: #ccc; font-size: 1.2rem; text-decoration: none; padding: 0 5px; }
    .btn_del_rec:hover { color: #ff6b6b; }

    /* 메인 기록 (거리, 시간) */
    .rec_main { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 15px; border-bottom: 1px dashed #f0f0f0; padding-bottom: 15px; }
    .rec_dist_box { display: flex; flex-direction: column; }
    .rec_label { font-size: 0.75rem; color: #999; margin-bottom: 2px; }
    .rec_dist { font-size: 2rem; font-weight: 800; color: #ff421d; line-height: 1; }
    .rec_dist span { font-size: 1rem; font-weight: 600; color: #ff421d; }
    
    .rec_time_info { text-align: right; }
    .rec_val { font-size: 1.2rem; font-weight: 700; color: #333; }
    .rec_sub_val { font-size: 0.9rem; color: #666; font-weight: 500; }

    /* 기어 및 메모 */
    .rec_footer { font-size: 0.9rem; }
    .rec_gear { display: flex; align-items: center; gap: 5px; color: #555; margin-bottom: 8px; }
    .gear_icon { width: 16px; height: 16px; background: #eee; border-radius: 50%; display: inline-block; text-align: center; line-height: 16px; font-size: 10px; }
    
    .rec_memo { background: #f9f9fc; padding: 10px; border-radius: 8px; color: #666; font-size: 0.9rem; line-height: 1.4; }

    /* 페이징 */
    .pg_wrap { text-align: center; margin-top: 20px; }
    .pg_page, .pg_current { display: inline-block; padding: 0px 10px; margin: 0 2px; border-radius: 5px; text-decoration: none; color: #666; background-color: #eee; font-size: 0.9rem; border:0;}
    .pg_current { background: #ff421d; color: #fff; font-weight: bold; }

    /* 플로팅 버튼 (등록하기) */
    .btn_floating_add { position: fixed; bottom: 30px; right: 20px; width: 60px; height: 60px; background: #ff421d; color: #fff; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 2rem; box-shadow: 0 4px 10px rgba(106, 103, 243, 0.4); text-decoration: none; z-index: 100; transition: transform 0.2s; }
    .btn_floating_add:hover { transform: scale(1.1); }
    
    /* 빈 상태 */
    .empty_list { text-align: center; padding: 50px 20px; color: #999; }
	
	    /* 플로팅 버튼 (등록하기) */
    .btn_floating_add2 {  width: 40px; height: 40px;   color: #333; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 2rem;  text-decoration: none; z-index: 100; transition: transform 0.2s; }
    .btn_floating_add2:hover { transform: scale(1.1); }
	
	
	
	/*  */
.record_wrap {
        max-width: 800px;
        margin: 0 auto;
        padding: 20px;
        font-family: 'Apple SD Gothic Neo', sans-serif;
        background: #fff;
    }

    /* 리스트 헤더 */
    .rec_head {
        display: flex;
        padding: 15px 0;
        border-bottom: 2px solid #eee; /* 보라색 라인 */
        margin-bottom: 10px;
    }
    .rec_head span {
        font-weight: bold;
        color: #333; /* 헤더 텍스트 보라색 */
        text-align: center;
        font-size: 0.95rem;
    }

    /* 리스트 아이템 */
    .rec_list {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .rec_item {
        display: flex;
        padding: 15px 0;
        border-bottom: 1px solid #f0f0f0;
        align-items: center;
        color: #666; /* 기본 텍스트 회색 */
        font-size: 0.9rem;
    }

    /* 컬럼 비율 설정 (PC/모바일 공통) */
    .col_no { width: 10%; text-align: center; color: #333; font-weight: bold; }
    .col_name { width: 40%; text-align: left; padding-left: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #333; }
    .col_div { width: 15%; text-align: center; color: #333; opacity: 0.7; }
    .col_time { width: 20%; text-align: center; color: #333; opacity: 0.7; }
    .col_pace { width: 15%; text-align: center; color: #333; opacity: 0.7; }

    /* 더보기 버튼 */
    .btn_more_wrap { text-align: center; margin-top: 20px; }
    .btn_more {
        background-color: #ff421d;
        color: #fff;
        border: none;
        padding: 10px 40px;
        border-radius: 20px;
        font-size: 1rem;
        font-weight: bold;
        cursor: pointer;
        transition: background 0.3s;
    }
    .btn_more:hover { background-color: #ff7051; }
    .btn_more:disabled { background-color: #ccc; cursor: not-allowed; }

    /* 모바일 반응형 미세 조정 */
    @media (max-width: 480px) {
        .rec_head span, .rec_item { font-size: 0.8rem; }
        .col_name { width: 35%; } /* 이름 공간 살짝 줄임 */
        .col_time { width: 25%; }
		
		
     .form_row {
        margin-bottom: 25px; /* 행 간격 */
        position: relative;
		display:block; 
		justify-content: space-between; align-items:center;
    }
	.form_label{ margin-bottom:10px;}
	
	
    }	
	
	.skiptranslate{ display:none !important;}
	
    /* 구글 상단 배너 강제 제거 */
    .goog-te-banner-frame.skiptranslate { display: none !important; }
    body { top: 0px !important; }

    /* 커스텀 드롭다운 스타일 */
    .custom-lang-dropdown {
        position: relative;
        display: inline-block;
        font-family: 'Notosans KR', sans-serif;
    }

    .lang-btn {
        background: #fff;
        border: 1px solid #ddd;
        padding: 8px 15px;
        cursor: pointer;
        border-radius: 4px;
        font-size: 14px;
        color: #333;
        display: flex;
        align-items: center;
        gap: 5px;
        transition: 0.2s;
    }
    
    .lang-btn:hover { background: #f8f8f8; border-color: #bbb; }

    .lang-list {
        display: none; /* 기본은 숨김 */
        position: absolute;
        bottom: 100%;
        right: 0; /* 오른쪽 정렬 */
        background: #fff;
        border: 1px solid #ddd;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        list-style: none;
        padding: 0;
        margin: 5px 0 0 0;
        width: 160px;
        z-index: 9999;
        border-radius: 4px;
    }

    .lang-list.show { display: block; }

    .lang-list li {
        padding: 10px 15px;
        cursor: pointer;
        font-size: 13px;
        color: #555;
        border-bottom: 1px solid #f0f0f0;
    }

    .lang-list li:last-child { border-bottom: none; }
    .lang-list li:hover { background: #f1f7ff; color: #000; }