/* 기본 초기화 */
    * { margin:0; padding:0; box-sizing:border-box; }
    body { font-family: Arial, sans-serif; background:#fff; color:#333; }
    li { list-style: none; }
    a { text-decoration: none; color: inherit; }
    img { vertical-align: top; max-width:100%; }
    button { cursor:pointer; }

    /* 헤더 */
    header {
      height: 100px;
      width: 100%;
      background-color: #cebbd6;
      position: relative;
      z-index: 1000; /* 헤더 최상단 */
    }
    header .inner {
      max-width: 1200px;
      height: 100%;
      margin: auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 30px;
      position: relative;
    }
    header h1 a { font-size: 28px; font-weight: bold; color: #080808; }

    /* 네비게이션 */
    nav {
      display: flex;
      z-index: 1001; /* 메뉴 클릭 가능 */
    }
    nav ul {
      display: flex;
      gap: 20px;
    }
    nav ul li a {
      display: block;
      padding: 10px;
      font-family: 'Economica', sans-serif;
      font-size: 36px;
      color: #e06091;
      text-align: center;
      transition: color 0.5s ease; /* ⭐ 추가 */
    }

    /* 클릭 혹은 활성 메뉴 */
    nav ul li a.active {
        font-weight: 600;  /* 진하게 */
        color: #d1457b;    /* 조금 더 진한 색 */
    }
    
    nav ul li a:hover { color: white; }

    .sub-visual {
        height: 250px;
        background: url('./images/spabielenda-beautician-5529805.jpg' ) no-repeat center/cover;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    .sub-visual::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.4); /* 어둡게 */
        }

        .sub-visual h2 {
        position: relative;
        color: #fff;
        font-size: 36px;
        z-index: 1;
    }

    /* 햄버거 버튼 */
    .hamburger {
        position: relative;
        width: 30px;
        height: 22px;
        cursor: pointer;
        display:none;
    }

    /* 각 줄 */
    .hamburger span {
        position: absolute;       /* 절대 위치로 중앙 정렬 */
        left: 0;
        width: 100%;
        height: 4px;
        background-color: #e06091;
        border-radius: 2px;
        transition: all 0.3s ease;
        transform-origin: center; /* 회전 중심을 중앙으로 */
    }

    /* 위/가운데/아래 배치 */
    .hamburger span:nth-child(1) { top: 0; }
    .hamburger span:nth-child(2) { top: 50%; transform: translateY(-50%); }
    .hamburger span:nth-child(3) { bottom: 0; }

    /* 클릭 시 X */
    .hamburger.active span:nth-child(1) {
        top: 50%;                 /* 중앙으로 이동 */
        transform: rotate(45deg);
    }

    .hamburger.active span:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active span:nth-child(3) {
        bottom: auto;
        top: 50%;                 /* 중앙으로 이동 */
        transform: rotate(-45deg);
    }

    footer {
        /* background-color: #cebbd6; */
        color: #333;
        padding: 40px 20px 20px;
    }

    .footer-inner {
        max-width: 1200px;
        margin: auto;

        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }

    /* 왼쪽 */
    .footer-left h2 {
        font-size: 24px;
        margin-bottom: 10px;
    }

    .footer-left p {
        font-size: 14px;
    }

    /* 가운데 */
    .footer-center ul {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .footer-center ul li a {
        font-size: 14px;
        color: #333;
    }

    .footer-center ul li a:hover {
        color: #e06091;
    }

    /* 오른쪽 */
    .footer-right p {
        font-size: 14px;
        margin-bottom: 5px;
    }

    /* 하단 */
    .footer-bottom {
        text-align: center;
        margin-top: 30px;
        font-size: 12px;
        color: #555;
    }

    /* 모바일 */
    @media screen and (max-width: 768px) {
        .footer-inner {
            flex-direction: column;
            gap: 20px;
            text-align: center;
            align-items: center;
        }
    }

    /* 햄버거 메뉴 */
    @media screen and (max-width: 768px) {
      nav {
        position: absolute;
        top: 100%;
        right: 0;
        width: 200px;
        background-color: #cebbd6;
        flex-direction: column;
        display: none;
      }
      nav.active { display: flex; }
      nav ul { flex-direction: column; }
      nav ul li a {
        width: 100%;
        padding-left:10px;
        padding-top: 3px;
        font-size: 30px;
        text-align: left;
      }
      .hamburger { display: flex; }
    }

    /* footer */
    @media screen and (max-width: 768px) {
        .footer-inner {
            flex-direction: column;
            gap: 20px;
            text-align: center;
            align-items: center;
        }
    }