body {
    min-height: 100vh;
    
      margin: 0;
      font-family: 'Noto Sans KR', sans-serif;
    }
    a {
      color: inherit;
      text-decoration: none;
    }
    .menu.hide {
      display: none;
    }
    /* 배경 */
    .hero {
        
        position: relative;
    }
    
    .hero::before {
     
        content: "";
        position: absolute;
        inset: 0;
        /*background:	linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.7)), linear-gradient(135deg, rgba(150,100,70,0.3), rgba(80,50,30,0.3));*/
    }
    
    .content {
       
        position: relative;
        z-index: 1;
        text-align: center;
        color: #222222;
       padding-top: 10vh; /* top 높이만큼 */
    }
    
    /* 상단 */
    .top {
        background: url('/img/sub_bg.png') center/cover no-repeat;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
    
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 2.5vh 0;
        z-index: 1100;
        /*background: rgba(0,0,0,0.3);
        backdrop-filter: blur(10px);*/
    }
    .logo{
        font-size: 30px;
    }
    .user{
        margin-right: 2vw;
    }
    /* 텍스트 */
    .title { 
        font-size: 24px; 
        padding:0.5vh;
    }
    .subtitle {
        padding:1.8vh 0;
        font-size: 16px; opacity: 0.9;
    }
    
    /* 원형 */
    .circle-wrap {
        font-weight: 900;
        position: relative;
        width: 260px;
        height: 260px;
        margin: 40px auto;
    }
    
    .center {
        width: 80%;
        height: 80%;
        background: linear-gradient(#9b6b4a, #6b432c);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 50%; left: 50%;
        transform: translate(-50%, -50%);
    }
    
    .item {
        position: absolute;
        width: 30%;
        height: 30%;
        background: rgba(255,255,255,0.9);
        color: #5a3d2a;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .top-item { top: 0; left: 50%; transform: translateX(-50%); }
    .bottom-item { bottom: 0; left: 50%; transform: translateX(-50%); }
    .left-item { left: -10px; top: 50%; transform: translateY(-50%); }
    .right-item { right: -10px; top: 50%; transform: translateY(-50%); }
    
    /* 버튼 */
    .cta {
        margin-top: 20px;
        width: 220px;
        height: 50px;
        background: linear-gradient(#8b5e3c, #6b432c);
        border: none;
        color: white;
        border-radius: 25px;
    }
    
    .secondary {
        margin-top: 10px;
        width: 220px;
        height: 50px;
        border: 1px solid #d2b49c;
        background: transparent;
        color: #000000;
        border-radius: 25px;
    }
    
    .point { margin-top: 10px; }
    
    /* ===== GNB ===== */
    
    .menu {
        margin-left: 2vw;
        position: static; /* ← 이게 중요 */
        top: 20px;
        z-index: 1100;
        cursor: pointer;
        font-size: 24px;
    }
    
    /* 메뉴 */
    .side-menu {
        position: fixed;
        top: 0;
        left: -100%;
        width: 90%;
        height: 100%;
        background: linear-gradient(180deg, #5a3d2a, #2b1a10);
        color: #f5e6d8;
        transition: 0.3s;
        z-index: 1001;
        padding: 20px 5%;
    }
    
    .side-menu.open { left: 0; }
    
    /* overlay */
    .overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.5);
      opacity: 0;
      visibility: hidden;
      transition: 0.3s;
      z-index: 1000;
    }
    
    .overlay.show {
      opacity: 1;
      visibility: visible;
    }
    
    /* 프로필 */
    .menu-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 30px;
    }
    
    .profile {
      display: flex;
      gap: 12px;
      align-items: center;
    }
    
    .profile-icon {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background: rgba(255,255,255,0.15);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .profile-name {
      font-size: 16px;
      font-weight: bold;
    }
    
    .profile-point {
      font-size: 12px;
      opacity: 0.7;
    }
    
    .gnb-close {
      font-size: 24px;
      cursor: pointer;
      background: none;
      border: none;
      color: #fff;
    }
    
    /* 메뉴 리스트 */
    .menu-list {
      list-style: none;
      padding: 0;
    }
    
    .menu-list li {
      padding: 15px 0;
      border-bottom: 1px solid rgba(255,255,255,0.1);
      cursor: pointer;
    }
    
    /* 애니메이션 */
    .menu-list li {
      opacity: 0;
      transform: translateX(-20px);
    }
    
    .side-menu.open .menu-list li {
      opacity: 1;
      transform: translateX(0);
      transition: 0.4s;
    }