@charset "utf-8";

/********************
// tablet 분기점
********************/
@media only screen and (max-width: 1200px) {

  .inner{width:calc(100% - 120px);margin:0 auto;}

  /* ✅ 햄버거 버튼 표시(모바일/태블릿) */
  .toggleBtn{display:block;}

  /* ✅ header는 상단바 높이만 유지 (커지는 문제 방지) */
  header{
    height:auto !important;
    min-height:0 !important;
  }

  /* ✅ 오프캔버스 메뉴: header 레이아웃에서 분리 */
  .menu{
    position:fixed !important;
    top:0;
    right:-100dvw;
    width:100dvw;
    height:100dvh;
    overflow-y:auto;
    background:#fff;
    transition:right .3s ease-in-out;
    z-index:898;
  }
  header.active .menu{right:0;}
  .menu li{border-bottom:1px solid #eeeef0;}

  /* ✅ 모바일 메뉴에서는 드롭다운을 아코디언 형태로 전환 */
  .dropDownMenu .dropDownCnt{
    position:static;
    width:auto;
    min-width:auto;
    border:0;

    opacity:1;
    visibility:visible;
    transform:none;
    transition:none;

    display:none; /* 기본 닫힘 */
  }
  .dropDownMenu.active .dropDownCnt{display:block;}

  /* 드롭다운 링크 높이: 모바일에선 유틸 우선(필요시 조정) */
  .dropDownCnt > a{height:auto;border-bottom:1px solid #eeeef0;}

  .chat_bubble::after {content:'';position:absolute;left:-8px;top:10px;}
  .chat_bubbleR::before{content:'';position:absolute;right:-8px;top:10px;}
  .portalLifeLeft{border-radius:12px 0 0 12px;}
  .inputBox{padding:20px;}
}

/* ✅ 데스크탑에서는 햄버거 숨김 */
@media only screen and (min-width: 1201px) {
  .toggleBtn{display:none;}
}

/********************
// 모바일 분기점
********************/
@media only screen and (max-width: 768px) {

  .stepBox{grid-template-columns:repeat(2, 1fr);}
  .inner{width:calc(100% - 40px);margin:0 auto;}
  .portalLifeLeft{border-radius:8px 0 0 8px;}
  .stepPoint{left:50%;top:-25px;animation:bounce 2s infinite ease-in-out;}

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

  .inputBox{padding:16px;}
}