@charset "utf-8";
@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");

/* 운세천당 공통: 좌우 회색바 노출 방지 */
.wrap {
  background-color: #ffffff !important;
}

/*헤더시작*/
.wrap .wrapper .header {
 overflow:hidden; 
 margin:0 auto; 
 width: 100%;                                                                 
 height: 65px;
 top: 3px;
 left: 0px;
}


.wrap .wrapper .header .header-group {
  width: 100%;
  height: 75px;
  background-color: #ffffff;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
    grid-gap: 1px;
}

.wrap .wrapper .header .header-group .header-group-left {
  width: 150px;
  height: 65px;
  background-color: #ffffff;
  float: left;
  text-align: left;
  padding: 3px 0px 8px 5px;
}

.wrap .wrapper .header .header-group .header-group-right {
  width: 120px;
  height: 65px;
  padding: 17px 14px 5px 30px;
  background-color: #ffffff;
  float: right;
  text-align: right;
  display:flex;
}

.wrap .wrapper .header .header-group .header-group-left .logo {
  width: 150px;
  height: 53px;
  top: 7px;
  left: 10px;
  aspect-ratio: 1;
}

.wrap .header .header-group .header-group-left .logo img {
  width: 150px;
  height: 53px;
  object-fit: cover;
}

.wrap .wrapper .header .header-group .header-group-right .search {
  width: 28px;
  height: 28px;
  
}

.wrap .wrapper .header .header-group .header-group-right .bell {
  width: 28px;
  height: 28px;
  margin-left: 12px;
}

.wrap .wrapper .header .header-group .header-group-right .user {
  width: 28px;
  margin-left: 12px;

}

.wrap .wrapper .header .header-group .header-group-right .varmenu {
  width: 20px;
  height: 20px;
  margin-top: 3px;
  margin-left: 14px;
}

.wrap .wrapper .header .header-group .header-group-right .search img {
  width: 26px;
  height: 26px;
  object-fit: cover;
}

.wrap .wrapper .header .header-group .header-group-right .bell img {
  width: 26px;
  height: 26px;
  object-fit: cover;
}

.wrap .wrapper .header .header-group .header-group-right .user img {
  width: 26px;
  height: 26px;
  object-fit: cover;
}

.wrap .wrapper .header .header-group .header-group-right .varmenu img {
  width: 24px;
  height: 24px;
  object-fit: cover;
}
/*헤더 끝*/

  /* 검색창 토글 */
 .search-bar {
    position:relative;
    background:#fff;
    box-shadow:0 2px 6px rgba(0,0,0,0.08);
    overflow:hidden;
    max-height:0;
    transition:max-height .3s ease, opacity .3s ease;
    opacity:0;
  }
  .search-bar.open {
    max-height:80px;
    opacity:1;
  }
  .search-bar-inner {
    max-width:1200px;
    margin:0 auto;
    padding:12px 16px;
    display:flex;
    align-items:center;
    gap:8px;
  }
  .search-bar input[type="text"] {
    flex:1;
    padding:10px 12px;
    border:1px solid #ccc;
    border-radius:8px;
    font-size:15px;
  }
  .search-bar button {
    background:#0b63ff;
    color:#fff;
    border:none;
    border-radius:8px;
    padding:10px 16px;
    font-weight:600;
    cursor:pointer;
  }
/* 자동완성 목록 */
  .autocomplete {
    position:absolute;
    top:54px;
    left:16px;
    right:16px;
    background:#fff;
    border:1px solid #ddd;
    border-radius:8px;
    box-shadow:0 4px 8px rgba(0,0,0,0.08);
    overflow:hidden;
    display:none;
    z-index:99;
  }
  .autocomplete.show { display:block; }
  .autocomplete-item {
    padding:10px 12px;
    cursor:pointer;
  }
  .autocomplete-item:hover,
  .autocomplete-item.active {
    background:#f3f6ff;
  }


  /* 토글 메뉴 */
 /* 오버레이 */
  .overlay {
    position:fixed; inset:0;
    background:rgba(0,0,0,0.4);
    opacity:0; pointer-events:none;
    transition:opacity .25s;
    zz-index: 2000;
  }
  .overlay.open { opacity:1; pointer-events:auto; }

  /* 오프캔버스 메뉴 */
  .offcanvas {
    position:fixed;
    top:0; right:-360px;
    width:320px; max-width:86%;
    height:100vh;
    background:#fff;
    box-shadow:-18px 0 40px rgba(0,0,0,0.15);
    transition:right .32s cubic-bezier(.2,.9,.2,1);
    z-index:50;
    z-index: 2100;
    display:flex;
    flex-direction:column;
  }
  .offcanvas.open { right:0; }

  /* 스크롤 영역 */
  .oc-scroll {
    flex:1;
    overflow-y:auto;
    padding:18px 16px 0;
  }

  /* top */
  .oc-top {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:12px;
  }
  .oc-title { line-height: 1; }
  .oc-logo-link { display:inline-block; }
  .oc-logo {
    width: 122px;
    height: auto;
    object-fit: contain;
  }
  .oc-close {
    background:none;
    border:none;
    font-size:46px;
    line-height:1;
    cursor:pointer;
    color:#111;
    margin-top:-4px;
  }

  /* 상단 회원가입/로그인 버튼 */
  .oc-auth {
    display:flex;
    gap:10px;
    margin:8px 0 16px;
  }
  .oc-auth-btn {
    display:flex;
    align-items:center;
    justify-content:center;
    flex:1;
    height:38px;
    border-radius:8px;
    font-size:17px;
    font-weight:800;
    text-decoration:none;
    letter-spacing:-0.15px;
    line-height:1;
    padding: 8px 0px 5px 0px;
  }
  .oc-auth-txt {
    display:block;
    line-height:1;
    transform:translateY(-1px);
  }
  .oc-auth-primary {
    background:#0c0d10;
    border:1px solid #0c0d10;
    color:#fff;
  }
  .oc-auth-ghost {
    background:#fff;
    border:2px solid #c9c9c9;
    color:#222;
  }

  /* 메인 메뉴 */
  .oc-list {
    display:flex;
    flex-direction:column;
    gap:4px;
    margin-bottom:14px;
    text-align:left;
  }
  .oc-item {
    padding:9px 2px;
    text-decoration:none;
    color:#111;
    font-size:22px;
    line-height:0.7;
    font-weight:700;
    letter-spacing:-0.3px;
    transition:color .15s;
  }
  .oc-item:hover { color:#1f4e9a; }

  /* 포인트 링크 */
  .oc-point-list {
    margin:14px 0 20px;
    padding:14px 0;
    border-top:1px solid #ececec;
    border-bottom:1px solid #ececec;
    display:flex;
    flex-direction:row;
    justify-content:center;
    align-items:center;
    flex-wrap:nowrap;
    gap:18px;
  }
  .oc-point-item {
    text-decoration:none;
    color:#d9480f;
    font-size:18px;
    font-weight:800;
    line-height:1;
    letter-spacing:-0.2px;
    white-space: nowrap;
    padding:2px 0;
  }

  /* 카카오 문의 */
  .oc-kakao-wrap {
    padding:6px 0 14px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
  }
  .oc-kakao-btn {
    width: 190px;
    height: 56px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    text-decoration:none;
    border-radius:14px;
    background:#fee500;
    box-shadow:0 4px 10px rgba(0,0,0,0.16);
    color:#111;
    font-weight:900;
    font-size:20px;
    letter-spacing:-0.2px;
    padding: 0px 24px 0px 0px;
  }
  .oc-kakao-icon {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:22px;
    height:22px;
  }
  .oc-kakao-label {
    display:block;
  }
  .oc-kakao-time {
    font-size:15px;
    color:#666;
    font-weight:700;
    letter-spacing:-0.2px;
    text-align:center;
  }

  .oc-company-info {
    width: calc(100% - 36px);
    margin: -4px auto 0;
    color:#8B8787;
    font-size:13px;
    font-weight:500;
    line-height:1.45;
    letter-spacing:-0.2px;
    text-align:left;
    word-break:keep-all;
  }

  .oc-company-name {
    margin-bottom:3px;
    color:#000;
    font-size:15px;
    font-weight:800;
    line-height:1.35;
  }

  .oc-company-phone {
    color:#3f5eb8;
    font-weight:700;
  }

.header-username {
  position: absolute;
  top: 48px;           /* 위에서부터의 거리 조정 */
  right: 45px;         /* 오른쪽 여백 */
  font-family: "Roboto-Regular", Helvetica; 
  font-size: 13px;
  font-weight: 700;
  color: #000;
  z-index: 30;
}


/* 하단 약관 링크 */
.oc-footer-links {
  padding: 10px 0px 20px 0px;
  text-align: center;
  margin-top: 10px; /* 살짝 위로 끌어올림 */
}

.oc-footer-links a {
  font-size: 17px;
  color:#8B8787; /* 진그레이 */
  text-decoration: none;
  margin: 0 4px;
  font-weight: 500;
}

.oc-footer-links a:hover {
  color: #222;
  text-decoration: underline;
}


  @media(max-width:420px){
    .offcanvas { width:92%; right:-92%; }
    .offcanvas.open { right:0; }
  }