@font-face {
    font-family: 'WandocleanseaB';
    src: url('images/WandocleanseaB.ttf') ;
}
@font-face {
    font-family: 'WandocleanseaR';
    src: url('images/WandocleanseaR.ttf') ;
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

    /* 1. 모바일 터치 시 뜨는 파란색 박스(하이라이트) 제거 */
    -webkit-tap-highlight-color: transparent; 
    
    /* 2. iOS에서 길게 눌렀을 때 팝업 메뉴(복사/공유 등) 뜨는 것 방지 */
    -webkit-touch-callout: none; 
}
:root{
    --container-width: 450px;
    --main-color: #48464B;
    --dark-gray: #8D8A95;
    --text-dg: #56535A;
}
html, body {
    height: auto;
    margin: 0;
    padding: 0;
}

        body {
            font-family: 'SUIT Variable', "Pretendard JP Variable", sans-serif;
            background: #eef2f5;
            overflow-x: hidden; /* 가로 스크롤 방지 */
-webkit-user-select: none; /* 사파리/크롬 */
    -moz-user-select: none;    /* 파이어폭스 */
    -ms-user-select: none;     /* 익스플로러/엣지 */
    user-select: none;         /* 표준 */
        }
/* 4. 이미지 자체를 드래그해서 옮기는 행위 방지 */
img {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
}

/* 5. 입력창(input, textarea)에서는 글씨 선택이 가능해야 하므로 예외 처리 */
input, textarea {
    -webkit-user-select: text;
    user-select: text;
}

        /* 메인 컨테이너 */
        .container {
            position: relative;
            max-width: var(--container-width);
            margin: 0 auto;
            /* min-height: 100vh; */
            background: transparent;
        }

/* 1. 헤더 수정: 왼쪽 패딩을 없애서 버튼이 벽에 붙도록 함 */
.header {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    
    /* [수정] 위,오른쪽,아래는 20px 유지하고, 왼쪽(Last)만 0으로 변경 */
    padding: 20px 20px 20px 0; 
    
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
    max-width: var(--container-width);
}

/* style.css 약 90번째 줄 근처 */
.back-btn {
    width: 52px;
    height: 32px;
    font-size: 20px;
    
    /* 오른쪽만 둥글게 */
    border-radius: 0 20px 20px 0; 
    
    /* [핵심 1] 투명한 테두리를 1.2px 정도 확보 (이 공간에 그라데이션이 들어갑니다) */
    border: 1.2px solid transparent;
    border-left: none;
    
    background: rgba(30, 30, 30, 0.1); 
    backdrop-filter: blur(10px);
    
    /* 배경이 적용될 범위 지정 */
    background-origin: border-box;
    background-clip: padding-box, border-box;
    
    /* 블러 효과 유지 */
    backdrop-filter: blur(10px);

    /* 아이콘 정렬 및 색상 */
    color: white;
    display: flex;
    align-items: center;
    justify-content: end;
    padding-right: 15px;
    cursor: pointer;
    
    /* [핵심 3] 상단에 날카로운 엣지 조명 추가 (1px 두께의 안쪽 광) */
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.6);
    
    transition: background 0.3s;
}

/* 호버 시 배경만 살짝 진하게 */
.back-btn:hover {
}

.back-btn i {
        filter: drop-shadow(0px 3px 0px rgba(0, 0, 0, 0.1));

}

/* 3. 메뉴 버튼(오른쪽)은 기존 스타일 유지하거나 약간 맞춤 */
.menu-btn {
    /* 뒤로가기 버튼과 높이를 맞춰주면 균형이 맞음 (선택사항) */
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: white;
    background: rgba(30, 30, 30, 0.1); 
    backdrop-filter: blur(10px);

    /* 테두리: 흰색 반투명 선 (왼쪽 면은 제외) */
    border: 1px solid rgba(255, 255, 255);
}
.menu-btn i {
    filter: drop-shadow(0px 3px 0px rgba(0, 0, 0, 0.1));

}

/* 1. Hero 배경 수정 */
.hero-bg-wrapper {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: var(--container-width);
    height: 220px;
    z-index: 3; 
    pointer-events: none;

    background: linear-gradient(135deg, #a4b0be 0%, #dfe4ea 50%, #f1f2f6 100%);
    
    border-radius: 0 0 8px 8px; 
    
    /* [수정] box-shadow의 흰색 선을 제거하고 border-bottom으로 변경 */
    /* 기존: box-shadow: 0 1px 0 0 #fff, ... */
    border-bottom: 1px solid rgba(255, 255, 255, 0.9); /* 안쪽에 그려지는 1px 흰색 선 */
    
    /* 그림자는 유지 (단, 카드에 가려져서 잘 안 보일 수 있음) */
    box-shadow: 0 23px 12px -10px rgba(0,0,0,0.05); 
    
    overflow: hidden;

    /* transition에 border-bottom 추가 */
    transition: border-radius 0.3s ease, box-shadow 0.3s ease, border-bottom 0.3s ease, z-index 0.3s step-start;
}

/* 2. 스크롤 되었을 때 스타일 수정 */
body.scrolled .hero-bg-wrapper {
    z-index: 0;
    border-radius: 0;
    box-shadow: none;
    
    /* [추가] 스크롤 되면 흰색 선도 사라지게 설정 */
    border-bottom: 1px solid transparent;
    
    transition: border-radius 0.3s ease, box-shadow 0.3s ease, border-bottom 0.3s ease, z-index 0.3s step-start;
}

/* --- [추가 1] 배경 격자 무늬 (Tech 느낌) --- */
.bg-grid {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    /* 얇은 흰색 선으로 모눈종이 패턴 생성 */
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.3) 1px, transparent 1px);
    background-size: 40px 40px; /* 격자 크기 */
    background-position: center;
    opacity: 0.5;
}

/* --- [추가 2] 오른쪽 위 넘실거리는 주황빛 (Flare) --- */
.warm-flare {
    position: absolute;
    top: -50%;
    right: -30%;
    width: 400px;
    height: 400px;
    
    /* 중심은 살구색/주황색 -> 밖은 투명 */
    background: radial-gradient(circle, rgba(255, 160, 122, 0.6) 0%, rgba(255, 200, 180, 0.2) 40%, transparent 70%);
    filter: blur(40px); /* 몽환적으로 퍼지게 */
    
    /* 넘실거리는 애니메이션 */
    animation: flareWave 6s ease-in-out infinite alternate;
    mix-blend-mode: overlay; /* 배경과 자연스럽게 섞임 */
}

@keyframes flareWave {
    0% { transform: translate(0, 0) scale(1); opacity: 0.8; }
    100% { transform: translate(-20px, 20px) scale(1.1); opacity: 1; }
}

/* --- [추가 3] 궤도 시스템 (회전) --- */
.orbit-system {
    position: absolute;
    top: 50%;
    left: 50%;
    /* 로고보다 약간 큰 크기 */
    width: 280px; 
    height: 280px;
    transform: translate(-50%, -50%);
    
    /* 전체가 빙글빙글 돔 */
    animation: orbitSpin 15s linear infinite;
}

/* 궤도 선 (링) */
.orbit-ring {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    border-radius: 50%;
    
    /* 얇은 흰색 테두리 */
    border: 1px solid rgba(255, 255, 255, 0.5);
    
    /* 원근감을 위해 약간 납작하게 누르고 싶다면 transform: scaleY(0.8) 추가 가능 */
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.2); /* 은은한 발광 */
}

/* 행성 (점) 공통 */
.planet {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 10px #fff, 0 0 20px #ffafbd; /* 빛나는 효과 */
}

/* 행성 1 위치 (위쪽 중앙) */
.planet.p1 {
    top: -4px; /* 선 위에 걸치게 */
    left: 50%;
    transform: translateX(-50%);
}

/* 행성 2 위치 (아래쪽 중앙 - 반대편) */
.planet.p2 {
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
}

/* 회전 애니메이션 */
@keyframes orbitSpin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* --- [수정] 텍스트가 궤도보다 위에 오도록 --- */
.hero-content {
    position: relative; /* z-index 적용을 위해 relative */
    z-index: 2;         /* 궤도(기본값)보다 위 */
    text-align: center;
    color: white;
    /* margin-top은 flex 정렬을 쓰므로 제거하거나 조정 */
    text-shadow: 0 2px 10px rgba(0,0,0,0.1); /* 텍스트 가독성 */
}
        
        .hero-content h1 { font-size: 24px; letter-spacing: 2px; }
        .hero-content p { font-size: 12px; opacity: 0.8; letter-spacing: 4px; }

        @keyframes float {
            0%, 100% { transform: translate(0, 0); }
            50% { transform: translate(10px, -10px); }
        }

/* 3. 프로필 섹션 (올라오는 카드) */
.scroll-content {
    position: relative;
    /* [핵심 3] 처음에는 히어로(z-index:5)보다 뒤에 있어야 함 */
    z-index: 2; 
    
    /* [핵심 4] 겹침 확보: 카드를 히어로 영역 안쪽까지 깊숙이 끌어올림 */
    margin-top: 220px; 
}

/* 스크롤 되면: 내용물이 히어로를 덮음 */
body.scrolled .scroll-content {
    /* 히어로(1)보다 앞으로 튀어나옴 */
    z-index: 10; 
}

.profile-card {
    background: rgba(231, 230, 235, 1);
    padding: 25px 20px 40px 20px;  /* bottom만 80px으로 (네비 버튼 높이 확보) */
    /* min-height, height 전부 제거 */
    
    border-radius: 0; 
    border-top: none; 
    box-shadow: none;
    transition: border-radius 0.3s ease, box-shadow 0.3s ease;
}

/* 스크롤 되면: 카드가 둥글어지고 그림자가 생김 */
body.scrolled .profile-card {
    /* [핵심 6] 둥근 부분이 위로 생김 (180도 전환 효과) */
    border-radius: 8px 8px 0 0;
    
    /* 그림자: 위로 솟음 */
    box-shadow: 
        0 -1px 0 0 #fff,
        0 -10px 20px rgba(0,0,0,0.05);
    }
/* [1] 밖으로 나온 아바타 위치 잡기 */
.avatar-wrapper {
    width: 110px;
    height: 110px;
    
    /* 핵심: Container 기준으로 절대 위치를 잡습니다. */
    /* Container가 같이 스크롤되므로, 아바타도 같이 올라갑니다. */
    position: absolute;
    
    /* 위치 계산: Hero 높이(220px) + 카드 패딩(25px) - 튀어나올 높이(35px) = 210px */
    top: -10px; 
    left: 27px; /* 카드 패딩(20px) 만큼 띄움 */
    
    /* Hero(z-index: 5)보다 높게 설정하여 무조건 위에 보이게 함 */
    z-index: 50; 
    
    /* 마진 제거 (absolute 위치 잡을 때 방해됨) */
    margin: 0; 
}

/* [2] 원래 자리를 지켜줄 빈 상자 스타일 */
.avatar-placeholder {
    width: 100px;
    height: 100px;
    /* 원래 아바타가 가지고 있던 마진값을 그대로 흉내 냅니다 */
    margin-top: -35px;
    margin-bottom: 15px;
    /* 눈에는 안 보이게 */
    visibility: hidden; 
}

        /* --- 프로필 상단 레이아웃 (좌/우 분할) --- */
        .profile-top-grid {
            display: flex;
            gap: 20px;
        }
.profile-second-grid{
    display: flex;
    gap: 10px;
    margin: 8px 0;
}

        /* 왼쪽: 아바타 + 레벨 */
        .profile-left {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 115px;
            flex-shrink: 0;
        }

        /* 오른쪽: 이름 + 칭호 + 스탯 */
.profile-right {
    flex-grow: 1;
    display: flex;           /* Flexbox 적용 */
    flex-direction: column;  /* 세로 정렬 */
    align-items: flex-start; /* 모든 요소 왼쪽 정렬 (핵심) */
}

.profile-top-grid .profile-right {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* 아래로 정렬 */
    align-items: flex-start;
}


/* 아바타 이미지 영역 수정 */
.avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    
    /* 1. 테두리 깨짐 방지: border 대신 outline 사용 권장 */
    /* border: 3px solid #ffffff; <- 기존 보더는 주석 처리하거나 제거 */
    outline: 2px solid #ffffff; /* 아웃라인이 더 매끄럽게 보일 때가 많습니다 */
    outline-offset: -1px; /* 미세하게 안쪽으로 넣어 회색 배경 노출 방지 */
    
    background: #333;
    overflow: hidden;
    position: relative;
    z-index: 1;

    /* 2. 흰색 빛 번짐(Glow) 효과 추가 */
    /* 기존 그림자 대신, 여러 겹의 box-shadow를 사용하여 은은한 광원 효과 연출 */
    box-shadow: 
        0 0 10px rgba(255, 255, 255, 0.8), /* 안쪽 밝은 빛 */
        0 0 20px rgba(255, 255, 255, 0.4), /* 바깥쪽 퍼지는 빛 */
        0 10px 8px rgba(0, 0, 0, 0.1);    /* 바닥면 입체감 그림자 */
    
    /* 브라우저 렌더링 최적화 (하드웨어 가속) */
    /* -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0); */
}

/* 내부 이미지 스타일 (비는 틈 없애기) */
.avatar-img div {
    transform: scale(1.02); /* 2% 정도 미세하게 키워서 경계선 빈틈을 완전히 덮음 */
}

/* --- [수정] 레벨 컨테이너 (오른쪽으로 이동 후 스타일 조정) --- */
.level-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 15px;     /* 스탯 리스트와 간격 */
    width: 100%;             /* 전체 너비 사용 */
    padding-left: 10px;       /* 미세 위치 조정 */
}

.level-box-wrapper {
    position: relative;
    width: 100%;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(217, 214, 221, 0.3); /* 배경 투명도 살짝 조절 */
    border-radius: 2px;
}

/* 레벨 경험치 텍스트 위치도 왼쪽이나 박스 중앙에 맞춤 */
.level-exp {
    font-size: 13px;
    color: var(--dark-gray);
    margin-top: 3px;
    text-align: center; /* 박스 기준 중앙 정렬 */
    letter-spacing: 1px;
}

/* 2. 괄호 공통 스타일 (박스 테두리 역할) */
.level-bracket {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 3px; /* 괄호의 너비 */
    pointer-events: none;
    
    /* 괄호 선의 색상 및 두께 */
    border: 1px solid #C8C8D0;
    
    /* 중요: 그림자는 괄호(선)에만 생기도록 필터 사용 */
    /* x:3px, y:5px, blur:2px, color:연한회색 */
    filter: drop-shadow(4px 5px 1px rgba(0, 0, 0, 0.05));
}

/* 왼쪽 괄호 & 점 */
.level-bracket.left {
    left: 0;
    /* 위, 아래, 왼쪽 선만 표시 (오른쪽 뚫림) */
    border-right: none;
    /* 박스와 동일한 곡률로 딱 붙게 설정 */
    border-radius: 2px 0 0 2px; 
    
    /* 가운데를 뚫어주기 위해 clip-path 사용 (선택사항, 사진처럼 위아래 끊긴 느낌을 주려면) */
    /* 사진에는 위아래가 연결되어 있지 않고 가운데가 비어있으므로 border-top/bottom을 제거하고 높이를 조절하거나, 
       지금처럼 'ㄷ'자 형태라면 그냥 둡니다. 요청하신 사진은 'ㄷ'자가 위아래가 좀 짧은 형태입니다. */
    /* 사진처럼 위아래가 짧게 하려면 top/bottom에 여백을 줌 */
    /* top: -1px; bottom: -1px; */
}

/* 왼쪽 점 (수직 중앙) */
.level-bracket.left::after {
    content: '';
    position: absolute;
    top: 50%;
    left: -5px; /* 선 밖으로 위치 */
    transform: translateY(-50%);
    width: 2px;
    height: 2px;
    background-color: #C8C8D0;
    border-radius: 50%;
}

/* 오른쪽 괄호 & 점 */
.level-bracket.right {
    right: 0;
    /* 위, 아래, 오른쪽 선만 표시 (왼쪽 뚫림) */
    border-left: none;
    border-radius: 0 2px 2px 0;
    /* top: -1px; bottom: -1px; */
}

/* 오른쪽 점 */
.level-bracket.right::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -5px;
    transform: translateY(-50%);
    width: 2px;
    height: 2px;
    background-color: #C8C8D0;
    border-radius: 50%;
}

/* 레벨 텍스트 */
.level-content {
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 1; 
}

.level-num {
    font-size: 18px;
    font-weight: 400;
    color: var(--text-dg);
    letter-spacing: 2px;
}

.level-icon {
    font-size: 13px;
    color: var(--dark-gray);
    margin-top: 1px;
    margin-right: -12px;
}
/* 1. 화살표 연결성 수정 */
.arrow-decoration {
    position: absolute;
    left: -20px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    filter: drop-shadow(4px 5px 1px rgba(0, 0, 0, 0.05));
}

.arrow-angle {
    width: 10px;
    height: 1px;
    background: var(--dark-gray);
    transform: rotate(-45deg);
    /* 오른쪽 끝을 기준으로 회전하여 가로선 시작점과 일치시킴 */
    transform-origin: right center; 
}

.arrow-line {
    width: 40px;
    height: 1px;
    background: var(--dark-gray);
    /* margin 제거하여 빈틈 방지 */
}

/* 3. 점 (2px 크기, 2px 간격) */
.arrow-dot {
    width: 2px;
    height: 2px;
    background: var(--dark-gray);
    border-radius: 50%;
    margin-left: 2px; /* 선과 2px 간격 */
}

/* 4. 삼각형 (5px 간격, 둥근 모서리) */
.arrow-tri {
    width: 0;
    height: 0;
    border-top: 3.5px solid transparent;
    border-bottom: 3.5px solid transparent;
    border-left: 5px solid var(--dark-gray); /* 오른쪽을 가리키는 삼각형 */
    margin-left: 5px; /* 점과 5px 간격 */
    border-radius: 2px; /* 모서리 살짝 둥글게 */
}


/* --- 성별 버튼 (수정됨) --- */
.gender-btn {
    position: relative;
    width: 50px;
    height: 25px;
    border-radius: 14px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* 배경 설정 유지 */
    background: linear-gradient(168deg, #F4EEE2 35%, #f5e5d3 35%);
    color: #8a6d6d;
    font-size: 14px;
    
    /* [수정] 밖으로 튀어나가는 비행기를 숨기기 위해 필수 */
    overflow: hidden; 

    /* [추가] 호버 시 부드러운 움직임을 위한 전환 효과 */
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
    margin-left: 10px;
}

/* [추가] 마우스 올렸을 때 둥실 떠오르는 효과 */
.gender-btn:hover {
    transform: translateY(-3px); /* 위로 3px 이동 */
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); /* 그림자도 자연스럽게 멀어짐 */
}

/* [추가] 비행기 아이콘 애니메이션 정의 */
@keyframes flyAround {
    0% {
        transform: translateX(0) scale(1);
        opacity: 1;
    }
    40% {
        /* 오른쪽으로 날아감 (버튼 크기 고려) */
        transform: translateX(40px) scale(0.8); 
        opacity: 0;
    }
    41% {
        /* 순식간에 왼쪽 끝으로 이동 (보이지 않는 상태) */
        transform: translateX(-40px) scale(0.8);
        opacity: 0;
    }
    100% {
        /* 원래 위치로 복귀 */
        transform: translateX(0) scale(1);
        opacity: 1;
    }
}

/* [추가] JS에서 이 클래스를 붙이면 애니메이션 실행 */
.gender-btn.flying i {
    animation: flyAround 0.8s ease-in-out;
}

/* 끊긴 테두리 (Mask 사용) */
.gender-btn-border {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 14px;
    
    /* 테두리 색상: 연한 갈색/살구색 */
    border: 1.5px solid #8a6d6d80; 
    
    pointer-events: none;
}

        /* 이름 영역 */
        .name-row {
            display: flex;
            align-items: center;
            gap: 20px;
            padding-left: 50px;
            margin-bottom: 10px;
        }

        .user-name {
            font-size: 20px;
            color: var(--main-color);
            font-family: 'WandocleanseaB';
        }

        .edit-pen {
            color: #999;
            font-size: 14px;
            cursor: pointer;
        }

        

        /* 회색 꺾인 선 (CSS Border로 구현) */
        .decoration-line {
            position: absolute;
            top: -15px; /* 이름 아래에서 시작 */
            left: -15px; /* 아바타 쪽으로 이동 */
            width: 25px;
            height: 28px;
            border-bottom: 1px solid #d1d5db;
            border-left: 1px solid #d1d5db;
            border-radius: 0 0 0 0; /* 직각 */
        }
        
        .decoration-dot {
            position: absolute;
            left: -18px;
            top: -18px;
            width: 6px;
            height: 6px;
            background: #d1d5db;
            border-radius: 50%;
        }
/* 칭호와 장식 선 영역 */
.subtitle-wrapper {
    position: relative;
    padding-left: 50px; /* 칭호 배지 앞 여백 */
    display: flex;
    align-items: center; /* 화살표와 칭호 수직 중앙 정렬 */
    margin-bottom: 10px;
}
/* style.css 약 590번째 줄 근처 */

.subtitle-badge {
    display: flex;             
    justify-content: center;   /* 가로 중앙 정렬 */
    align-items: center;       /* 세로 중앙 정렬 */
    color: var(--dark-gray);
    padding: 1px 12px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid var(--dark-gray);
    font-family: 'WandocleanseaB';
    min-width: 170px;
    letter-spacing: 1.2px;
}
.badge-row {
    display: flex;
    flex-direction: row;
    gap: 6px;
    padding-left: 60px;
}
.custom-badge {
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background-color: rgb(from var(--dark-gray) r g b / 20%);
}

/* --- [수정] 스탯 리스트 컨테이너 --- */
.stats-list {
    width: 100%; /* 부모 너비 가득 채우기 */
    padding-left: 17px;
    padding-right: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
}

.stat-item {
    display: flex;
    align-items: center;
    width: 100%; /* 너비 확보 */
    margin-bottom: 3px;
    font-size: 14px;
}

/* 라벨/값 덩어리와 우측 아이콘을 양 끝으로 배치 */
.stat-subicon {
    margin-left: auto; /* 핵심: 오른쪽 끝으로 밀어냄 */
    color: var(--dark-gray);
    font-size: 12px;
    cursor: pointer;
}

/* --- [수정] 선 + 오른쪽 두꺼운 박스 --- */
.stats-list::before {
    content: '';
    position: absolute;
    /* 선의 시작 위치 (점과 공백을 위해 약간 우측에 배치) */
    left: 6px; 
    top: 0px;
    bottom: 0px;
    
    /* 전체 너비: 얇은 선(1px) + 두꺼운 박스(2px) = 3px */
    width: 2px; 

    /* 배경 1: 오른쪽 상단 두꺼운 박스 (진한색) */
    /* 배경 2: 왼쪽 전체 얇은 선 (연한색) */
    background-image: 
        linear-gradient(#929BAF, #929BAF),
        linear-gradient(#929BAF, #929BAF);
    
    /* 크기 설정 */
    background-size: 
        2px 10px,  /* 두꺼운 박스: 너비 2px, 높이 10px */
        1px 100%;  /* 얇은 선: 너비 1px, 높이 100% */
        
    background-repeat: no-repeat;
    
    /* 위치 설정 (핵심) */
    background-position: 
        right top, /* 두꺼운 박스는 오른쪽(right) 상단에 붙임 */
        left top;  /* 얇은 선은 왼쪽(left)에 붙임 */
    filter: drop-shadow(4px 5px 1px rgba(0, 0, 0, 0.05));
}

/* style.css 약 835번째 줄 근처 */
.stats-list::after {
    content: '';
    position: absolute;
    left: 1px; 
    bottom: 20px;
    
    /* 첫 번째 점 (기준) */
    width: 1px;
    height: 1px;
    background-color: #929BAF; 
    
    /* [수정] 쉼표(,)로 구분하여 점을 추가합니다.
       0 6px 0 -> 두 번째 점 (6px 아래)
       0 12px 0 -> 세 번째 점 (12px 아래) */
    box-shadow: 
        0 6px 0 #929BAF,
        0 18px 0 #d1d5db; 
}

        .stat-icon {
            width: 20px;
            text-align: center;
            margin-right: 8px;
            color: rgb(from var(--dark-gray) r g b / 50%);
            font-size: 13px;
        }
        
        .stat-icon.heart { color: #E69699; }

.stat-label {
    color: var(--text-dg);
    margin-right: 10px;
    font-weight: 500;
    letter-spacing: .8px;
    
    /* [수정] 라벨의 너비를 고정하여 값들이 같은 위치에서 시작하도록 함 */
    display: inline-block; 
    width: 70px; /* 가장 긴 텍스트(헌터 번호/생년월일)에 맞춰 조절하세요. 70~80px 추천 */
}

        .stat-value {
            color: var(--dark-gray);
            letter-spacing: .5px;
        }

/* style.css 약 788번째 줄 근처 .bio-box 수정 */

.bio-box {
    background: rgba(255, 255, 255, 0.4);
    border-radius: 3px;
    padding: 25px;
    margin: 15px 0 10px 0;
    
    /* [중요] 가상 요소가 뒤로 숨을 수 있도록 z-index 컨텍스트 생성 */
    position: relative; 
    z-index: 1; 
    
    font-size: 12px;
    color: var(--text-dg);
    border: 1px solid #fff;
    
    /* 기존 box-shadow가 있다면 지워주세요 */
    box-shadow: none; 
}

.bio-box::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 3px;
    z-index: -1;
    
    /* [핵심 1] 배경을 반드시 '투명'으로 설정하여 색 겹침 방지 */
    background: transparent;
    
    /* [핵심 2] 그림자 농도를 아주 연하게(0.05 ~ 0.08) 조절 */
    /* 진한 그림자는 투명 박스 뒤에서 지저분해 보일 수 있습니다 */
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.08);
    
    /* [핵심 3] 구멍을 박스보다 1px 더 크게 뚫어서, 
       그림자가 안으로 번지는 현상(Inner Bleeding)을 원천 차단 */
    clip-path: polygon(
        -100% -100%, 200% -100%, 200% 200%, -100% 200%, -100% -100%,
        
        /* 0px 대신 -1px, 100% 대신 calc(100% + 1px) 사용 */
        -1px -1px, 
        -1px calc(100% + 1px), 
        calc(100% + 1px) calc(100% + 1px), 
        calc(100% + 1px) -1px, 
        -1px -1px
    );
}
        .bio-content {
            font-size: 1em;
            font-weight: 500;
        }
        
        .bio-edit {
            position: absolute;
            bottom: 10px;
            right: 10px;
            color: var(--dark-gray);
        }

.theme-btn {
    float: right;
    font-size: 13px;
    font-weight: 600;
    
    display: flex;              /* 플렉스 박스로 변경 */
    align-items: center;        /* 세로 중앙 정렬 */
    justify-content: center;    /* 가로 중앙 정렬 */

    color: var(--dark-gray);
    background: #eee;
    padding: 3px 12px;
    border-radius: 15px;
    cursor: pointer;
    border: 1px solid rgb(from var(--dark-gray) r g b / 30%);
}

        .clearfix::after {
            content: "";
            clear: both;
            display: table;
        }

/* style.css 약 680번째 줄 근처 */

/* 1. 탭 컨테이너: 회색 줄 유지 */
.tabs {
    display: flex;
    width: calc(100% - 44px); 
    margin: 30px auto 0 auto;
    
    /* 전체를 가로지르는 회색 라인 */
    border-bottom: 1px solid rgb(from var(--dark-gray) r g b / 50%); 
}

/* 2. 탭 기본 스타일: 아래쪽 여백(margin)을 음수로 주어 부모 테두리와 위치를 겹치게 함 */
.tab {
    flex: 1;
    text-align: center;
    font-family: 'WandocleanseaB';
    padding: 2px 0;
    font-size: 1em;
    color: var(--main-color);
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
    letter-spacing: 3px;
    
    /* [수정] 비활성 상태일 때도 투명 테두리를 2px 줍니다 (활성 상태와 두께 통일) */
    border-bottom: 1px solid transparent; 
    
    /* [핵심] 탭을 1px 아래로 내려서 컨테이너의 border-bottom(회색줄)을 덮을 준비를 합니다 */
    margin-bottom: -1px;
    display: flex;             /* 탭 내부를 플렉스 박스로 만듦 */
    align-items: center;       /* 세로 중앙 정렬 */
    justify-content: center;   /* 가로 중앙 정렬 */
}

/* 3. 활성 탭 스타일: 금색 테두리가 회색 줄을 덮음 */
.tab.active {
    /* 배경 설정 유지 */
    background: radial-gradient(
        circle at 50% 240%, 
        rgba(255, 187, 162, 0.7) 0%,   
        var(--main-color) 60%          
    );
    
    color: white;
    font-weight: normal; 
    border-bottom: 2px solid #ffd17b; 
    overflow: visible; 
    
    /* [추가] z-index를 주어 확실하게 회색 줄보다 위에 오도록 설정 */
    z-index: 2; 
}
.tab.active::after {
    content: '';
    position: absolute;
    
    /* 탭의 바로 아래(100%)에 위치 */
    top: 100%; 
    left: 0;
    
    /* 너비를 꽉 채워서 '네모난 일자 모양' 유지 */
    width: 100%; 
    
    /* 그림자 길이 (원하는 만큼 조절 가능) */
    height: 23px; 
    
    /* 위쪽은 연한 회색(0.3) -> 아래쪽은 투명(0)으로 떨어지는 그라데이션 */
    background: linear-gradient(
        to bottom, 
        rgb(from var(--dark-gray) r g b / 50%) 0%, 
        rgba(200, 200, 200, 0) 100%
    );
    
    /* 중요: 그림자가 마우스 클릭을 가로채지 않도록 설정 (아래 카드 클릭 가능하게) */
    pointer-events: none; 
    
    /* 다른 요소 위에 덮이지 않도록 z-index 조절 (필요 시) */
    z-index: 1; 
}
        /* 카드 그리드 */
        .cards-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
                width: calc(100% - 44px); 
    margin: 30px auto 0 auto;
        }

        .card {
            aspect-ratio: 0.75;
            border-radius: 10px;
            background: #eee;
            position: relative;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        
        .card-inner {
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
        }

/* 1. 전체 컨테이너 설정: 위치 고정 및 정렬 */
/* 1. 컨테이너 내부로 위치 고정 */
.bottom-nav {
    position: fixed;
    bottom: 30px;       /* 바닥에서 띄울 높이 */
    
    /* [핵심] 헤더처럼 화면 중앙에 정렬하되, 컨테이너 너비를 넘지 않게 함 */
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: var(--container-width); /* 450px */
    
    /* [핵심] 내부 아이템 오른쪽 정렬 */
    display: flex;
    justify-content: flex-end; /* 아이콘들을 오른쪽 끝으로 보냄 */
    padding-right: 20px;       /* 오른쪽 벽에서 살짝 띄움 */
    gap: 15px;                 /* 아이콘 사이 간격 */
    
    z-index: 1000;
    
    /* 배경 제거 */
    background: transparent;
    border: none;
    box-shadow: none;
    
    /* [중요] 투명한 박스가 가로 전체를 덮고 있으므로, 
       빈 공간을 클릭했을 때 뒤에 있는 내용이 클릭되도록 통과시킴 */
    pointer-events: none; 
}

/* 2. 개별 아이콘 설정 */
.nav-item {
    /* [중요] 부모가 pointer-events: none이므로, 버튼은 클릭 되도록 켜줘야 함 */
    pointer-events: auto; 
    
    display: flex;
    justify-content: center;
    align-items: center;
    
    width: 40px;
    height: 40px;
    border-radius: 50%;
    
    background-color: rgba(255, 255, 255, 0.5);
    color: var(--dark-gray);
    font-size: 20px;
    
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    text-decoration: none;
    transition: transform 0.2s ease, background-color 0.2s;
}

/* 3. 호버 및 활성 상태 */
.nav-item:hover,
.nav-item.active {
    transform: translateY(-3px);
    background-color: rgba(255, 255, 255, 1);
    color: #333;
}


/* =========================================
   Mobile Responsive (Max Width: 500px)
   style.css 파일의 맨 아래에 추가하세요.
   ========================================= */

@media screen and (max-width: 500px) {
    :root {
        /* 1. 컨테이너 너비를 모바일 화면 100%로 변경 */
        --container-width: 100%;
    }

    /* 2. 전체 레이아웃 및 배경 리셋 */
    body {
        /* 모바일에서는 배경색과 카드가 자연스럽게 이어지도록 설정 */
        background: rgba(231, 230, 235, 1); 
    }

    .container {
        width: 100%;
        max-width: 100%;
        margin: 0;
        overflow-x: hidden; /* 가로 스크롤 방지 */
    }

    /* 3. 고정 위치 요소(헤더, 히어로 배경, 하단 네비)의 중앙 정렬 해제 */
    /* 기존의 left: 50%, transform: translateX(-50%) 방식을 해제하고 꽉 채웁니다 */
    .header, 
    .hero-bg-wrapper, 
    .bottom-nav {
        left: 0;
        transform: none;
        width: 100%;
        max-width: 100%;
    }

    /* 4. 헤더 여백 최적화 */
    .header {
        padding: 15px 15px 15px 0; /* 상우하좌 padding 미세 조정 */
    }

    /* 5. 히어로 영역 모바일 최적화 */
    .hero-bg-wrapper {
        height: 180px; /* 높이 약간 축소 */
    }
    
    .scroll-content {
        margin-top: 180px; /* 히어로 높이에 맞춰 조정 */
    }

    /* 6. 프로필 카드 및 내부 여백 조정 */
    .profile-card {
        /* 화면 꽉 차게, 하단 네비게이션 공간 확보 */
        padding: 15px 18px 40px 18px; 
    }
    .profile-second-grid {
        margin: 4px 0;
        gap: 8px;
    }

    /* 7. 아바타 및 이름 영역 위치 재조정 */
    .avatar-wrapper {
        left: 30px; /* 왼쪽 여백 축소에 맞춰 이동 */
        width: 93px; /* 아바타 크기 살짝 축소 */
        height: 93px;
        top: 170px;
    }
    
    .avatar-placeholder {
        width: 90px;
        height: 90px;
        margin-top: -30px;
    }
    
    .profile-left {
        width: 105px; /* 왼쪽 영역 너비 축소 */
    }

    .arrow-decoration {
        left: -23px;
    }

    .arrow-line {
        width: 32px;
    }
    .arrow-tri {
        margin-left: 2px;
    }
    .level-box-wrapper {
        height: 20px;
        border-radius: 1px;
    }

    .level-container {
        padding-left: 13px;
        margin-bottom: 0;
    }
    .level-bracket {
        width: 3px;
    }
    .level-bracket.left {
        border-radius: 1px 0 0 1px;
    }
    .level-bracket.right {
        border-radius: 0 1px 1px 0;
    }
    .level-num {
        font-size: 15px;
    }
    .level-icon {
        font-size: 12px;
        margin-right: -9px;
    }
    .level-exp {
        font-size: 11px;
    }

    /* 이름, 칭호 등이 아바타와 겹치지 않게 패딩 조정 */
    .name-row, 
    .subtitle-wrapper{
        padding-left: 38px; 
    }
    .badge-row {
        padding-left: 42px; 
    }
    .subtitle-wrapper {
        margin-bottom: 7px;
    }
    .name-row {
        margin-bottom: 8px;
    }
    .user-name {
        font-size: 18px; /* 좁은 화면 고려하여 폰트 조정 */
    }

    .subtitle-badge {
        min-width: 150px;
        font-size: 11px;
    }
    .custom-badge {
    width: 15px;
    height: 15px;
}
    .gender-btn {
        width: 44px;
        height: 24px;
        font-size: 13px;
        margin-top: auto;
        margin-bottom: 2px;
    }
    .gender-btn-border {
        border: 1px solid #8a6d6d80;
    }
    .stats-list {
        padding-left: 14px;
    }
    .stats-list::before {
        background-size: 2px 8px, 1px 100%;
    }
    .stats-list::after {
        bottom: 14px ;
        box-shadow: 0 3px 0 #929BAF, 0 14px 0 #d1d5db;
    }
    .stat-icon {
        font-size: 12px;
        margin-right: 4px;
    }
    .bio-box {
        margin: 10px 0 6px 0;
        padding: 20px 18px;
    }
    .theme-btn {
        font-size: 11px;
        padding: 3px 10px;
    }


    /* 8. 스탯 리스트 (헌터번호 등) 줄바꿈 방지 */
    .stat-label {
        width: 60px; /* 라벨 너비 약간 축소 */
        font-size: 13px;
        margin-right: 5px;
    }
    
    .stat-value {
        font-size: 13px;
    }
    .tabs {
        margin: 20px auto 0 auto;
    }
    .tab {
        font-size: .9em;
    }
    
    /* 10. 하단 네비게이션바 (아이폰 노치/홈바 대응) */
    .bottom-nav {
        bottom: 0;
        /* 아이폰 하단 바(Home Indicator) 영역만큼 패딩 추가 */
        padding-bottom: calc(20px + env(safe-area-inset-bottom)); 
        padding-right: 20px;
        
        /* 스크롤 시 하단 아이콘이 잘 보이도록 배경 그라데이션 추가 (선택사항) */
        background: linear-gradient(to top, rgba(238,242,245, 0.9) 20%, transparent 100%);
    }
}