/* 햄버거 버튼 */
 /*
  .hamburger {
    position: fixed;
    top: 16px;
    left: 16px; 
    width:44px;
    height:44px;
    border-radius:10px;
    display:inline-grid;
    place-items:center;
    background:rgba(255,255,255,0.9);
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    border:1px solid rgba(0,0,0,0.04);
    z-index: 60;
    cursor:pointer;
  }
  .hamburger:focus { outline: 3px solid rgba(59,130,246,0.25); }

  .hamburger .box {
    width:22px;
    height:16px;
    position:relative;
    display:block;
  }
  .hamburger .box span{
    position:absolute;
    left:0;
    right:0;
    height:2px;
    background:var(--accent);
    transition: transform var(--transition), opacity var(--transition);
    border-radius:2px;
  }
  .hamburger .box span:nth-child(1){ top:0; }
  .hamburger .box span:nth-child(2){ top:7px; }
  .hamburger .box span:nth-child(3){ bottom:0; }
*/
  /* 열린 상태 */
  .is-open .box span:nth-child(1){
    transform: translateY(7px) rotate(45deg);
  }
  .is-open .box span:nth-child(2){
    opacity:0;
  }
  .is-open .box span:nth-child(3){
    transform: translateY(-7px) rotate(-45deg);
  }

  /* 오버레이(배경 어둡게) */
  .overlay{
    position:fixed;
    inset:0;
    background:var(--overlay);
    opacity:0;
    pointer-events:none;
    transition: opacity var(--transition);
    z-index:50;
  }
  .overlay.show{
    opacity:1;
    pointer-events:auto;
  }

  /* 사이드 메뉴 공통 (왼쪽에서 나오는 예제) */
  .side {
    position: fixed;
    top:0;
    left:0; /* 오른쪽에서 나오게 하려면 left: auto; right:0; 로 변경 */
    height:100vh;
    width:var(--side-width);
    transform: translateX(-100%);
    transition: transform var(--transition);
    background: linear-gradient(180deg,#fff,#f6f6f8);
    box-shadow: 2px 0 24px rgba(16,24,40,0.08);
    z-index:55;
    display:flex;
    flex-direction:column;
    padding:20px;
    gap:12px;
  }
  .side.show{
    transform: translateX(0);
  }

  /* 헤더(타이틀 & 닫기) */
  .side .head{
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  .side h2{ margin:0; font-size:1.125rem; }
  .side .close{
    background:transparent;
    border:0;
    font-size:1.25rem;
    cursor:pointer;
    padding:6px;
  }
  .side .close:focus { outline: 3px solid rgba(59,130,246,0.25); border-radius:6px; }

  /* 메뉴 리스트 */
  .side nav ul{
    list-style:none;
    padding:0;
    margin:8px 0 0 0;
    display:flex;
    flex-direction:column;
    gap:6px;
  }
  .side nav a{
    display:block;
    text-decoration:none;
    padding:10px 12px;
    border-radius:8px;
    color:var(--accent);
  }
  .side nav a:hover, .side nav a:focus{
    background:rgba(16,24,40,0.04);
    outline:none;
  }

  /* 작은 화면에서 full width로 변형 (선택적) */
  @media (max-width:540px){
    :root { --side-width: 86vw; }
    .hamburger { left: 12px; top:12px; }
  }